@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }

:root {
  --bg: #2a2e36;
  --teal: #7de8d5;
  --orange: #e8a878;
  --text: #f0f2f5;
  --text-secondary: #a0a5b0;
  --border: rgba(240, 242, 245, 0.08);
  --glow-teal: 0 0 24px rgba(125, 232, 213, 0.28);
}

html, body {
  height: 100%;
}

body {
  font-family: 'Cairo', sans-serif;
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 20% -10%, rgba(125, 232, 213, 0.09), transparent 42%),
    radial-gradient(circle at 80% 110%, rgba(232, 168, 120, 0.07), transparent 42%);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}

.wrap {
  text-align: center;
  max-width: 460px;
}

.brand {
  font-size: clamp(2.8rem, 12vw, 4.5rem);
  font-weight: 800;
  color: var(--teal);
  text-shadow: 0 0 40px rgba(125, 232, 213, 0.35);
  margin-bottom: 18px;
}

.tagline {
  color: var(--text-secondary);
  font-size: 1.1rem;
  margin-bottom: 40px;
}

.divider {
  width: 48px;
  height: 2px;
  background: var(--border);
  margin: 0 auto 40px;
}

.eyebrow {
  color: var(--orange);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.product-line {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 32px;
}

.btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid var(--teal);
  color: var(--teal);
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.btn:hover {
  background: rgba(125, 232, 213, 0.08);
  box-shadow: var(--glow-teal);
  transform: translateY(-2px);
}

.contact {
  margin-top: 48px;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.contact a {
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  transition: color 0.25s ease, border-color 0.25s ease;
}

.contact a:hover {
  color: var(--teal);
  border-color: var(--teal);
}

.lang-switch {
  margin-top: 20px;
  font-size: 0.85rem;
}

.lang-switch a {
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  transition: color 0.25s ease, border-color 0.25s ease;
}

.lang-switch a:hover {
  color: var(--teal);
  border-color: var(--teal);
}