/* ============================================================
   Delightech Landing Page — Stylesheet
   Sections:
   1. Tokens & reset
   2. Layout helpers
   3. Navigation
   4. Hero
   5. Features
   6. Screens showcase
   7. How it works
   8. Privacy
   9. Download CTA
   10. Footer
   11. Animations
   12. Responsive
   13. RTL overrides
   ============================================================ */

/* -------- 1. Tokens & reset ---------------------------------- */
:root {
  --bg-deep: #05080f;
  --bg-surface: #0a0f1c;
  --bg-elev: #111a2e;
  --line: rgba(148, 163, 184, 0.14);
  --line-strong: rgba(148, 163, 184, 0.28);

  --text: #f1f5f9;
  --text-dim: #94a3b8;
  --text-mute: #64748b;

  --accent: #00ff95;          /* electric green */
  --accent-soft: #5eead4;
  --accent-blue: #38bdf8;     /* electric blue */
  --accent-violet: #818cf8;

  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;

  --container: 1240px;
  --gutter: clamp(20px, 4vw, 40px);

  --font-display: "Space Grotesk", "Noto Sans TC", "Noto Sans JP", "Noto Sans KR", "Noto Sans Arabic", system-ui, sans-serif;
  --font-body: "Manrope", "Noto Sans TC", "Noto Sans JP", "Noto Sans KR", "Noto Sans Arabic", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  background: var(--bg-deep);
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(0, 255, 149, 0.10), transparent 60%),
    radial-gradient(1000px 700px at -10% 20%, rgba(56, 189, 248, 0.10), transparent 55%),
    var(--bg-deep);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.08;
  text-wrap: balance;
}

p { margin: 0; }

/* -------- 2. Layout helpers ---------------------------------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 6px 14px;
  border: 1px solid rgba(0, 255, 149, 0.25);
  border-radius: 999px;
  background: rgba(0, 255, 149, 0.06);
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}

section { padding: clamp(72px, 10vw, 140px) 0; position: relative; }

.section-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.section-head h2 {
  font-size: clamp(32px, 4.4vw, 56px);
  margin-top: 18px;
}
.section-head p {
  margin-top: 18px;
  color: var(--text-dim);
  font-size: clamp(16px, 1.4vw, 18px);
}

/* -------- 3. Navigation -------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 80;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  background: rgba(5, 8, 15, 0.65);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease;
}
.nav.is-scrolled {
  background: rgba(5, 8, 15, 0.88);
  border-bottom-color: var(--line);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 72px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.brand-mark {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-blue));
  display: grid; place-items: center;
  color: #05080f;
  font-weight: 800;
  font-size: 16px;
  box-shadow: 0 0 32px rgba(0, 255, 149, 0.25);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-size: 14px;
  color: var(--text-dim);
  font-weight: 500;
  transition: color .15s ease;
}
.nav-links a:hover { color: var(--text); }

.nav-cta {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lang-picker { position: relative; }
.lang-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  transition: background .15s ease, border-color .15s ease;
}
.lang-button:hover { background: rgba(255,255,255,0.08); border-color: var(--line-strong); }
.lang-button svg { opacity: .7; }

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 6px;
  min-width: 200px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.02) inset;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 90;
}
.lang-menu.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.lang-menu button {
  display: flex; width: 100%; align-items: center;
  gap: 12px;
  background: none; border: none;
  color: var(--text);
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  text-align: start;
  transition: background .12s ease;
}
.lang-menu button:hover { background: rgba(255,255,255,0.06); }
.lang-menu button[aria-selected="true"] {
  background: rgba(0, 255, 149, 0.10);
  color: var(--accent);
}
.lang-menu .lang-code {
  margin-inline-start: auto;
  font-size: 11px;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  color: var(--text);
  align-items: center; justify-content: center;
}
.nav-toggle svg { width: 20px; height: 20px; }

.mobile-menu {
  display: none;
  padding: 12px 0 24px;
  border-top: 1px solid var(--line);
}
.mobile-menu a {
  display: block;
  padding: 14px 0;
  font-size: 16px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}
.mobile-menu a:last-child { border-bottom: none; }

/* -------- 4. Hero -------------------------------------------- */
.hero {
  padding: clamp(60px, 9vw, 120px) 0 clamp(80px, 11vw, 160px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(640px, 90vh, 900px);
  display: flex;
  align-items: center;
}
.hero::before {
  /* Full-bleed hero photo background */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("https://www.appfit.biz/screenshot/background.png");
  background-size: cover;
  background-position: 75% top;
  background-repeat: no-repeat;
  z-index: -2;
}
.hero::after {
  /* Dark overlay: opaque on the left for readable copy, fades to clear on the right;
     also fades to dark at the bottom so the photo blends into the next section. */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 8, 15, 0.94) 0%, rgba(5, 8, 15, 0.78) 35%, rgba(5, 8, 15, 0.35) 65%, rgba(5, 8, 15, 0.15) 100%),
    linear-gradient(180deg, rgba(5, 8, 15, 0.2) 0%, transparent 40%, var(--bg-deep) 100%);
  z-index: -1;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: clamp(40px, 6vw, 80px);
}

.hero-copy { max-width: 620px; }
.hero h1 {
  font-size: clamp(40px, 6vw, 76px);
  margin: 22px 0 0;
}
.hero h1 .accent {
  background: linear-gradient(110deg, var(--accent) 0%, var(--accent-blue) 60%, var(--accent-violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-slogan {
  margin-top: 22px;
  font-size: clamp(17px, 1.5vw, 19px);
  color: var(--text-dim);
  max-width: 560px;
  line-height: 1.6;
}

.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 36px;
}

/* Store badges drawn in CSS */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  border-radius: 14px;
  background: #f8fafc;
  color: #05080f;
  transition: transform .15s ease, box-shadow .15s ease;
  border: 1px solid transparent;
}
.store-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0, 255, 149, 0.18);
}
.store-badge svg { width: 28px; height: 28px; flex-shrink: 0; }
.store-badge .store-text { display: flex; flex-direction: column; line-height: 1.05; text-align: start; }
.store-badge .store-top { font-size: 11px; opacity: .65; letter-spacing: 0.04em; }
.store-badge .store-bottom { font-size: 17px; font-weight: 700; font-family: var(--font-display); }

.hero-meta {
  margin-top: 28px;
  font-size: 13px;
  color: var(--text-mute);
  letter-spacing: 0.04em;
}

/* Hero visual — landscape tablet / equipment-console mockup */
.hero-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 540px;
}

.hero-orb {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(closest-side, rgba(0, 255, 149, 0.18), transparent 70%),
    radial-gradient(closest-side at 70% 60%, rgba(56, 189, 248, 0.20), transparent 70%);
  filter: blur(20px);
  z-index: 0;
}

/* Hero photo — real product photo replaces the device mockup */
.hero-photo {
  position: relative;
  z-index: 2;
  width: clamp(320px, 42vw, 540px);
  aspect-ratio: 1 / 1;
  margin: 0;
  border-radius: 32px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 60px 100px -20px rgba(0, 0, 0, 0.7),
    0 30px 60px -20px rgba(0, 255, 149, 0.18),
    inset 0 0 0 1px rgba(255,255,255,0.05);
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-photo::after {
  /* subtle inner sheen + soft top-left vignette to blend with dark bg */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(160deg, rgba(0, 255, 149, 0.10), transparent 30%),
    linear-gradient(0deg, rgba(5, 8, 15, 0.35), transparent 50%);
  pointer-events: none;
}

/* Keep .phone / .tablet styles for backward compat (no longer in DOM) */
.phone, .tablet {
  position: relative;
  z-index: 2;
  width: clamp(320px, 44vw, 560px);
  aspect-ratio: 16 / 9.6;
  background: linear-gradient(160deg, #1e293b, #0b1220);
  border-radius: 26px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 50px 80px -20px rgba(0, 0, 0, 0.6),
    0 20px 40px -10px rgba(0, 255, 149, 0.15),
    inset 0 0 0 2px rgba(255,255,255,0.04);
}
.phone::before, .tablet::before {
  /* Front camera dot, centered on top bezel */
  content: "";
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  width: 6px; height: 6px;
  background: rgba(148, 163, 184, 0.5);
  border-radius: 50%;
  z-index: 3;
}
.phone-screen, .tablet-screen {
  width: 100%; height: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #1e293b;
  position: relative;
}
.phone-screen img, .tablet-screen img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.phone-screen.placeholder, .tablet-screen.placeholder {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 12px, transparent 12px 24px),
    linear-gradient(180deg, #1e293b, #0f172a);
}

/* Floating data card overlay */
.hero-chip {
  position: absolute;
  z-index: 4;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  font-size: 13px;
}
.hero-chip-1 { top: 18%; inset-inline-start: -6%; }
.hero-chip-2 { bottom: 16%; inset-inline-end: -8%; }

.hero-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.hero-chip strong { color: var(--text); font-weight: 600; }
.hero-chip span { color: var(--text-dim); }

/* App icon badge */
.app-icon-badge {
  position: absolute;
  top: -34px;
  inset-inline-start: -34px;
  width: 96px; height: 96px;
  border-radius: 22px;
  background: #05080f;
  display: grid; place-items: center;
  overflow: hidden;
  box-shadow: 0 30px 60px -10px rgba(0, 255, 149, 0.4), inset 0 -8px 16px rgba(0,0,0,0.15);
  z-index: 5;
  border: 4px solid rgba(5, 8, 15, 0.7);
}
.app-icon-badge img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* -------- 5. Features ---------------------------------------- */
.features { background: linear-gradient(180deg, transparent 0%, rgba(56, 189, 248, 0.03) 50%, transparent 100%); }

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.feature-card {
  position: relative;
  padding: 32px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--line);
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
  overflow: hidden;
}
.feature-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-4px);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}
.feature-card::after {
  /* subtle accent corner glow */
  content: "";
  position: absolute;
  top: -40%; inset-inline-end: -40%;
  width: 200px; height: 200px;
  background: radial-gradient(closest-side, rgba(0, 255, 149, 0.10), transparent 70%);
  opacity: 0;
  transition: opacity .3s ease;
}
.feature-card:hover::after { opacity: 1; }

.feature-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(140deg, rgba(0,255,149,0.18), rgba(56,189,248,0.18));
  color: var(--accent);
  border: 1px solid rgba(0, 255, 149, 0.25);
  margin-bottom: 22px;
}
.feature-icon svg { width: 24px; height: 24px; }

.feature-card h3 {
  font-size: 20px;
  font-weight: 600;
}
.feature-card p {
  margin-top: 12px;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.6;
}

/* -------- 6. Screens showcase -------------------------------- */
.screens { padding-bottom: clamp(72px, 10vw, 140px); }

.screens-track-wrap {
  position: relative;
  margin: 0 calc(var(--gutter) * -1);
  padding: 40px 0 20px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.screens-track {
  display: flex;
  gap: 28px;
  padding: 0 var(--gutter);
  cursor: grab;
  user-select: none;
  scroll-behavior: smooth;
  overflow-x: auto;
  scrollbar-width: none;
}
.screens-track::-webkit-scrollbar { display: none; }
.screens-track.dragging { cursor: grabbing; scroll-behavior: auto; }

.screen-card {
  flex: 0 0 auto;
  width: clamp(340px, 36vw, 480px);
  aspect-ratio: 16 / 9.6;
  background: linear-gradient(160deg, #1e293b, #0b1220);
  border-radius: 22px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5), inset 0 0 0 2px rgba(255,255,255,0.04);
  transition: transform .25s ease;
  position: relative;
}
.screen-card:hover { transform: translateY(-8px); }
.screen-card::before {
  /* tiny front-camera dot on top bezel */
  content: "";
  position: absolute;
  top: 4px; left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  background: rgba(148, 163, 184, 0.5);
  border-radius: 50%;
}
.screen-card .screen-inner {
  width: 100%; height: 100%;
  border-radius: 12px;
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 12px, transparent 12px 24px),
    linear-gradient(180deg, #1e293b, #0f172a);
  display: grid;
  place-items: center;
  color: var(--text-mute);
  font-size: 12px;
  position: relative;
}
.screen-card .screen-inner img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.screen-card .placeholder-label {
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  font-size: 13px;
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  color: rgba(148, 163, 184, 0.6);
}

.screens-nav {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 32px;
}
.screens-nav button {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  color: var(--text);
  display: grid; place-items: center;
  transition: background .15s ease, border-color .15s ease;
}
.screens-nav button:hover { background: rgba(255,255,255,0.08); border-color: var(--line-strong); }
.screens-nav svg { width: 18px; height: 18px; }

/* -------- 7. How it works ------------------------------------ */
.how { background: linear-gradient(180deg, transparent, rgba(0, 255, 149, 0.03), transparent); }

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
}
.steps::before {
  /* connecting line */
  content: "";
  position: absolute;
  top: 56px;
  inset-inline-start: 12%;
  inset-inline-end: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--line-strong), var(--line-strong), transparent);
  z-index: 0;
}

.step {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 32px 24px;
}
.step-number {
  width: 64px; height: 64px;
  border-radius: 50%;
  margin: 0 auto 24px;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  background: var(--bg-elev);
  color: var(--accent);
  border: 1px solid rgba(0, 255, 149, 0.4);
  box-shadow: 0 0 28px rgba(0, 255, 149, 0.15);
}
.step h3 { font-size: 22px; }
.step p { margin-top: 12px; color: var(--text-dim); font-size: 15px; }

/* -------- 8. Privacy ----------------------------------------- */
.privacy-panel {
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(0, 255, 149, 0.08), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(40px, 6vw, 64px);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.privacy-copy h2 { font-size: clamp(28px, 3.4vw, 44px); margin-top: 18px; }
.privacy-points {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 18px;
}
.privacy-point {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  padding: 20px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.privacy-point .pi {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(0, 255, 149, 0.10);
  color: var(--accent);
}
.privacy-point .pi svg { width: 22px; height: 22px; }
.privacy-point h4 { font-size: 16px; font-weight: 600; }
.privacy-point p { margin-top: 6px; font-size: 14px; color: var(--text-dim); }

/* -------- 9. Download CTA ------------------------------------ */
.cta-panel {
  position: relative;
  border-radius: var(--radius-lg);
  padding: clamp(48px, 7vw, 80px);
  background:
    radial-gradient(600px 400px at 20% 0%, rgba(0, 255, 149, 0.20), transparent 70%),
    radial-gradient(500px 400px at 90% 100%, rgba(56, 189, 248, 0.18), transparent 70%),
    linear-gradient(180deg, #0a1428, #060b18);
  border: 1px solid var(--line-strong);
  overflow: hidden;
  text-align: center;
}
.cta-panel::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 24px);
  pointer-events: none;
}
.cta-panel h2 { font-size: clamp(32px, 4.4vw, 56px); }
.cta-panel p {
  margin: 18px auto 0;
  max-width: 540px;
  color: var(--text-dim);
}
.cta-ctas {
  display: flex; gap: 14px; flex-wrap: wrap;
  justify-content: center;
  margin-top: 36px;
  position: relative;
}
.cta-qrs {
  display: flex; gap: 48px;
  justify-content: center;
  margin-top: 56px;
  flex-wrap: wrap;
  position: relative;
}
.qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.qr-box {
  width: 140px; height: 140px;
  border-radius: var(--radius);
  background: #f8fafc;
  padding: 10px;
  display: grid; place-items: center;
  color: #05080f;
  position: relative;
  overflow: hidden;
}
.qr-box svg { width: 100%; height: 100%; }
.qr-label {
  font-size: 13px;
  color: var(--text-dim);
}

/* -------- 10. Footer ----------------------------------------- */
.footer {
  border-top: 1px solid var(--line);
  padding: 64px 0 40px;
  background: var(--bg-deep);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
}
.footer-about { max-width: 360px; color: var(--text-dim); font-size: 14px; margin-top: 18px; }
.footer h5 { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); margin: 0 0 18px; font-weight: 600; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.footer ul a { color: var(--text-dim); font-size: 14px; }
.footer ul a:hover { color: var(--accent); }

.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  font-size: 13px;
  color: var(--text-mute);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* -------- 11. Animations ------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }
.reveal-delay-5 { transition-delay: .40s; }
.reveal-delay-6 { transition-delay: .48s; }

@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.float { animation: float-y 6s ease-in-out infinite; }

/* -------- 12. Responsive ------------------------------------- */
@media (max-width: 1024px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .privacy-panel { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: 1fr; gap: 60px; text-align: start; }
  .hero-visual { min-height: 480px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  /* When hero stacks, switch the photo overlay to top-readable / bottom-image */
  .hero::before { background-position: center top; }
  .hero::after {
    background:
      linear-gradient(180deg, rgba(5,8,15,0.92) 0%, rgba(5,8,15,0.55) 35%, rgba(5,8,15,0.25) 60%, var(--bg-deep) 100%);
  }
}

@media (max-width: 768px) {
  .nav-links, .nav-cta .nav-cta-link { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobile-menu.open { display: block; }

  .features-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 32px; }
  .steps::before { display: none; }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .hero-chip-1 { inset-inline-start: -2%; top: 14%; }
  .hero-chip-2 { inset-inline-end: -2%; bottom: 14%; }
  .app-icon-badge { width: 72px; height: 72px; top: -22px; inset-inline-start: -10px; border-radius: 18px; }

  .cta-qrs { gap: 24px; }
}

/* -------- 13. RTL overrides ---------------------------------- */
html[dir="rtl"] .hero-grid { direction: rtl; }
html[dir="rtl"] .screens-track { direction: rtl; }
html[dir="rtl"] .hero h1 .accent { background: linear-gradient(250deg, var(--accent) 0%, var(--accent-blue) 60%, var(--accent-violet) 100%); -webkit-background-clip: text; background-clip: text; }
html[dir="rtl"] .nav-icon-flip { transform: scaleX(-1); }