/* ============================================================
   AlaramChhaiye — Redesigned v2
   Aesthetic: Luminous Pro · Warm light + Rich dark · Editorial
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,700;1,9..144,300;1,9..144,500;1,9..144,700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=JetBrains+Mono:wght@400;700&display=swap');

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  /* Dark palette (hero, world clock, notification, footer) */
  --d-bg:         #0C0B1D;
  --d-bg2:        #13112A;
  --d-bg3:        #1C1938;
  --d-surface:    rgba(255,255,255,.05);
  --d-border:     rgba(255,255,255,.08);
  --d-text:       #F0EEF9;
  --d-text2:      #BDB8D4;
  --d-muted:      #7B759A;

  /* Light palette (most content sections) */
  --l-bg:         #FEFCF8;
  --l-bg2:        #FFF8ED;
  --l-surface:    #FFFFFF;
  --l-border:     rgba(15,12,40,.08);
  --l-text:       #0F0C28;
  --l-text2:      #3D3760;
  --l-muted:      #8A85A8;

  /* Brand */
  --amber:        #F59E0B;
  --amber2:       #F97316;
  --amber-light:  #FCD34D;
  --amber-dark:   #D97706;
  --amber-glow:   rgba(245,158,11,.15);
  --amber-border: rgba(245,158,11,.25);

  --indigo:       #6366F1;
  --teal:         #14B8A6;
  --green:        #10B981;
  --rose:         #F43F5E;

  /* Gradients */
  --grad-amber: linear-gradient(135deg, #F59E0B 0%, #F97316 100%);
  --grad-hero:  linear-gradient(145deg, #0C0B1D 0%, #1A0F3A 55%, #0D1F3C 100%);
  --grad-text:  linear-gradient(135deg, #F59E0B 10%, #F97316 90%);
  --grad-cta:   linear-gradient(135deg, #F59E0B 0%, #F97316 50%, #EF4444 100%);

  /* Fonts */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Spacing */
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 40px;
  --ease: cubic-bezier(.16,1,.3,1);
  --fast: 200ms; --med: 380ms; --slow: 650ms;
}

/* ── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul { list-style: none; }
body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  background: var(--l-bg);
  color: var(--l-text);
}

/* ── UTILITY ────────────────────────────────────────────── */
.container { max-width: 1160px; margin: 0 auto; padding: 0 1.5rem; }

/* Gradient text */
.gt {
  background-color: #F59E0B;
  background-image: linear-gradient(135deg, #F59E0B 10%, #F97316 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Section type helpers */
.dark-sec {
  background: var(--d-bg);
  color: var(--d-text);
}
.light-sec {
  background: var(--l-bg);
  color: var(--l-text);
}
.cream-sec {
  background: var(--l-bg2);
  color: var(--l-text);
}

/* Label / eyebrow text */
.label {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.label::before {
  content: '';
  display: inline-block;
  width: 18px; height: 1.5px;
  background: var(--amber);
  border-radius: 2px;
}
.label-dark  { color: var(--amber); }
.label-light { color: var(--amber-dark); }

/* Section headings */
.sec-title {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.025em;
  font-size: clamp(2rem, 4vw, 3.4rem);
  margin-top: .8rem;
}
.sec-desc {
  font-size: 1rem;
  line-height: 1.75;
  max-width: 480px;
  margin-top: .8rem;
}
.dark-sec .sec-desc { color: var(--d-text2); }
.light-sec .sec-desc, .cream-sec .sec-desc { color: var(--l-muted); }

.sec { padding: 6rem 0; }
.sec-head { margin-bottom: 4rem; }
.sec-head.center { text-align: center; }
.sec-head.center .sec-desc { margin: .8rem auto 0; }

/* Scroll reveal */
.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: .1s; } .d2 { transition-delay: .2s; }
.d3 { transition-delay: .3s; } .d4 { transition-delay: .4s; }

/* ── NAVBAR ─────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  padding: 1.1rem 1.5rem;
  transition: background var(--med) var(--ease), border-color var(--med) var(--ease),
              box-shadow var(--med) var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(12,11,29,.9);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-bottom-color: rgba(255,255,255,.06);
  box-shadow: 0 2px 40px rgba(0,0,0,.3);
}
.nav-inner {
  max-width: 1160px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo { display: flex; align-items: center; gap: 10px; }
.nav-logo-mark {
  width: 36px; height: 36px;
  background-color: #F59E0B;
  background-image: linear-gradient(135deg, #F59E0B 0%, #F97316 100%);
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 18px;
  box-shadow: 0 4px 16px rgba(245,158,11,.4);
}
.nav-logo-name {
  font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 600;
  color: white; letter-spacing: -.01em;
}
.nav-links { display: flex; align-items: center; gap: 2rem; }
.nav-links a { font-size: .87rem; color: rgba(255,255,255,.6); transition: color var(--fast); }
.nav-links a:hover, .nav-links a.active { color: white; }
.nav-cta {
  background: var(--grad-amber) !important;
  color: white !important;
  padding: .5rem 1.2rem;
  border-radius: var(--r-sm);
  font-weight: 600; font-size: .82rem;
  box-shadow: 0 4px 16px rgba(245,158,11,.35);
  transition: transform var(--fast), box-shadow var(--fast) !important;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(245,158,11,.45) !important; }
.nav-hamburger {
  display: none; flex-direction: column; gap: 5px; padding: 4px; cursor: pointer;
}
.nav-hamburger span {
  width: 22px; height: 1.5px; background: white; display: block;
  transition: transform var(--med) var(--ease), opacity var(--med);
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── PARTNER DROPDOWN ───────────────────────────────────── */
.nav-has-dropdown {
  position: relative;
}

/* Invisible hover bridge — fills the gap between trigger text and dropdown panel
   so the mouse doesn't leave .nav-has-dropdown while crossing the 16px gap */
.nav-has-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -12px;
  right: -12px;
  height: 22px;
  pointer-events: auto;
}

/* "Partner" trigger text with chevron */
.nav-dd-trigger {
  display: flex !important;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  user-select: none;
  font-size: .87rem;
  color: rgba(255,255,255,.6);
  transition: color var(--fast);
}
.nav-has-dropdown:hover .nav-dd-trigger {
  color: white;
}
.nav-dd-trigger svg {
  width: 11px; height: 11px;
  stroke: currentColor; fill: none;
  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  opacity: .6;
  transition: transform var(--med) var(--ease), opacity var(--fast);
  flex-shrink: 0;
}
.nav-has-dropdown:hover .nav-dd-trigger svg,
.nav-has-dropdown.open .nav-dd-trigger svg {
  transform: rotate(180deg);
  opacity: 1;
}

/* Dropdown panel */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 200px;
  background: rgba(10, 9, 28, 0.96);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  padding: 8px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55),
              0 0 0 1px rgba(255,255,255,.04) inset;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--med) var(--ease),
              transform var(--med) var(--ease),
              visibility var(--med);
  z-index: 400;
}

/* Small arrow tip pointing up */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -5px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px; height: 10px;
  background: rgba(10,9,28,.96);
  border-top: 1px solid rgba(255,255,255,.1);
  border-left: 1px solid rgba(255,255,255,.1);
}

/* Open state — triggered by :hover on desktop, .open class on mobile */
.nav-has-dropdown:hover .nav-dropdown,
.nav-has-dropdown.open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Divider line between items */
.nav-dd-divider {
  height: 1px;
  background: rgba(255,255,255,.07);
  margin: 4px 8px;
}

/* Each dropdown row */
.nav-dd-item {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  font-size: .87rem;
  font-weight: 500;
  color: rgba(255,255,255,.75);
  transition: background var(--fast), color var(--fast);
}
.nav-dd-item:hover {
  background: rgba(255,255,255,.07);
  color: white;
}

/* ── MOBILE: dropdown stacked inside nav-links.open ─────── */
@media (max-width: 768px) {
  .nav-has-dropdown { position: static; width: 100%; }

  .nav-dd-trigger { width: 100%; justify-content: space-between; }
  .nav-dd-trigger svg { width: 14px; height: 14px; }

  .nav-dropdown {
    position: static;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    box-shadow: none;
    margin-top: 6px;
    padding: 6px;
    display: none;
  }
  .nav-dropdown::before { display: none; }

  .nav-has-dropdown.open .nav-dropdown { display: block; }

  .nav-dd-item { padding: 10px 12px; }
}

/* ── BUTTONS ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: .8rem 1.8rem; border-radius: var(--r-md);
  font-family: var(--font-body); font-size: .92rem; font-weight: 600;
  letter-spacing: .01em;
  transition: all var(--fast) var(--ease);
}
.btn-primary {
  background-color: #F59E0B;
  background-image: linear-gradient(135deg, #F59E0B 0%, #F97316 100%);
  color: white;
  box-shadow: 0 6px 24px rgba(245,158,11,.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(245,158,11,.45); }

.btn-dark-ghost {
  background: rgba(255,255,255,.06);
  color: white;
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
}
.btn-dark-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }

.btn-light-ghost {
  background: transparent;
  color: var(--l-text);
  border: 1.5px solid var(--l-border);
}
.btn-light-ghost:hover { border-color: var(--amber); color: var(--amber-dark); }

.btn-lg { padding: .95rem 2.2rem; font-size: 1rem; }

/* ── HERO ────────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  background-color: #0C0B1D;
  background-image: linear-gradient(145deg, #0C0B1D 0%, #1A0F3A 55%, #0D1F3C 100%);
  color: var(--d-text);
  display: flex; flex-direction: column; justify-content: center;
  padding: 9rem 0 6rem;
  position: relative; overflow: hidden;
}

/* dot grid */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

/* gradient mesh blobs */
.hero-blob {
  position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(60px);
}
.hero-blob-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(245,158,11,.18) 0%, transparent 70%);
  top: -100px; right: -100px;
  animation: blobDrift 12s ease-in-out infinite alternate;
}
.hero-blob-2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(99,102,241,.12) 0%, transparent 70%);
  bottom: -80px; left: -80px;
  animation: blobDrift 16s ease-in-out infinite alternate-reverse;
}
.hero-blob-3 {
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(20,184,166,.08) 0%, transparent 70%);
  top: 40%; left: 30%;
  animation: blobDrift 20s ease-in-out infinite alternate;
}
@keyframes blobDrift { 0% { transform: scale(1) translate(0,0); } 100% { transform: scale(1.15) translate(20px,30px); } }

/* ── CELESTIAL: STARS ────────────────────────────────── */
.hero-stars {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(1.4px 1.4px at  7% 14%, rgba(255,255,255,.95), transparent 60%),
    radial-gradient(1px   1px   at 18% 32%, rgba(255,255,255,.70), transparent 60%),
    radial-gradient(1.2px 1.2px at 34% 9%,  rgba(255,247,220,.95), transparent 60%),
    radial-gradient(1px   1px   at 48% 24%, rgba(220,230,255,.65), transparent 60%),
    radial-gradient(1.6px 1.6px at 78% 6%,  rgba(255,240,200,.95), transparent 60%),
    radial-gradient(1px   1px   at 88% 18%, rgba(255,255,255,.70), transparent 60%),
    radial-gradient(1.2px 1.2px at 12% 48%, rgba(210,225,255,.80), transparent 60%),
    radial-gradient(1px   1px   at 27% 65%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.4px 1.4px at 41% 88%, rgba(255,245,215,.80), transparent 60%),
    radial-gradient(1px   1px   at 57% 75%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 71% 85%, rgba(210,225,255,.75), transparent 60%),
    radial-gradient(1px   1px   at 84% 56%, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(1px   1px   at 4%  82%, rgba(255,255,255,.50), transparent 60%),
    radial-gradient(1.3px 1.3px at 93% 40%, rgba(255,240,200,.85), transparent 60%),
    radial-gradient(1px   1px   at 63% 42%, rgba(255,255,255,.55), transparent 60%);
  translate: var(--stars-px, 0px) var(--stars-py, 0px);
  animation: starTwinkle 5.5s ease-in-out infinite;
}
@keyframes starTwinkle {
  0%,100% { opacity: .85; }
  50%     { opacity: 1; }
}

/* ── CELESTIAL: SUN ──────────────────────────────────── */
.hero-sun {
  position: absolute;
  top: -120px; right: -140px;
  width: 480px; height: 480px;
  pointer-events: none; z-index: 0;
  opacity: var(--sun-opacity, 1);
  /* Composes time-of-day + scroll + mouse-parallax offsets */
  translate:
    var(--sun-px, 0px)
    calc(var(--sun-time-y, 0px) + var(--sun-scroll-y, 0px) + var(--sun-py, 0px));
  transition: opacity 2.5s ease-out;
}

/* Soft outer corona — atmospheric glow */
.sun-corona {
  position: absolute; inset: -40px;
  border-radius: 50%;
  background:
    radial-gradient(circle,
      rgba(255,200,90, .22) 0%,
      rgba(255,160,40, .14) 30%,
      rgba(247,107,28, .08) 55%,
      transparent 78%);
  filter: blur(8px);
  animation: sunBreathe 6s ease-in-out infinite;
}

/* Thin radiating rays — 24 sharp streaks */
.sun-rays {
  position: absolute; inset: -10px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255,220,110,.32) .4deg,
    rgba(255,220,110,.32) 1.6deg,
    transparent 2deg,
    transparent 15deg
  );
  -webkit-mask-image: radial-gradient(circle, transparent 32%, #000 40%, #000 60%, transparent 82%);
          mask-image: radial-gradient(circle, transparent 32%, #000 40%, #000 60%, transparent 82%);
  animation: sunSpin 70s linear infinite;
}

/* The solid sun disc — multi-stop gradient for realistic plasma look */
.sun-core {
  position: absolute;
  top: 50%; left: 50%;
  width: 260px; height: 260px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%,
      #FFFCE8  0%,
      #FFE9A0  10%,
      #FFC658  28%,
      #FFA12A  52%,
      #F76B1C  78%,
      rgba(180,55,10,0) 100%);
  box-shadow:
    0 0 60px  rgba(255,180,60,.55),
    0 0 130px rgba(255,140,40,.40),
    0 0 220px rgba(247,107,28,.25),
    inset -10px -10px 50px rgba(220,90,20,.45),
    inset  20px  20px 60px rgba(255,250,200,.35);
  animation: sunBreathe 5s ease-in-out infinite;
}

/* Subtle hot-spot for plasma highlight */
.sun-core::before {
  content: '';
  position: absolute; inset: 22%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
    rgba(255,255,235,.7) 0%, rgba(255,230,160,.3) 40%, transparent 75%);
  filter: blur(14px);
}

@keyframes sunSpin    { to { transform: rotate(360deg); } }
@keyframes sunBreathe {
  0%,100% { filter: brightness(1)    saturate(1); }
  50%     { filter: brightness(1.12) saturate(1.08); }
}

/* ── CELESTIAL: MOON ─────────────────────────────────── */
.hero-moon {
  position: absolute;
  bottom: 14%; left: 4%;
  width: 130px; height: 130px;
  pointer-events: none; z-index: 0;
  opacity: var(--moon-opacity, 1);
  /* `translate` property composes with the `transform` from moonFloat keyframes */
  translate:
    var(--moon-px, 0px)
    calc(var(--moon-time-y, 0px) + var(--moon-scroll-y, 0px) + var(--moon-py, 0px));
  animation: moonFloat 9s ease-in-out infinite;
  transition: opacity 2.5s ease-out;
}

/* Cool pale halo — gentle, not a glaring glow */
.moon-halo {
  position: absolute; inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(150,160,210,.10) 30%,
    rgba(120,130,180,.05) 60%,
    transparent 80%);
  filter: blur(6px);
}

/* The moon disc — partially lit sphere with craters layered on top */
.moon-body {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    /* Craters — small dim patches */
    radial-gradient(circle at 32% 32%, rgba(20,15,35,.55) 0%, rgba(20,15,35,0) 9%),
    radial-gradient(circle at 56% 64%, rgba(20,15,35,.45) 0%, rgba(20,15,35,0) 7%),
    radial-gradient(circle at 72% 30%, rgba(20,15,35,.40) 0%, rgba(20,15,35,0) 5%),
    radial-gradient(circle at 25% 70%, rgba(20,15,35,.45) 0%, rgba(20,15,35,0) 5%),
    radial-gradient(circle at 65% 82%, rgba(20,15,35,.35) 0%, rgba(20,15,35,0) 4%),
    radial-gradient(circle at 48% 18%, rgba(20,15,35,.32) 0%, rgba(20,15,35,0) 3.5%),
    /* Base sphere — silver-grey, well defined, with terminator into deep navy */
    radial-gradient(circle at 32% 28%,
      #DDD6E4  0%,
      #BCB4C8 22%,
      #8C849F 45%,
      #524C70 68%,
      #221E3A 88%,
      #0E0B22 100%);
  box-shadow:
    inset -12px -10px 32px rgba(8,5,20,.75),
    inset  3px  3px 10px rgba(200,195,220,.12),
    0 0 25px rgba(140,150,200,.12),
    0 0 50px rgba(110,120,170,.06);
}

/* Tiny crescent highlight on the lit edge — subdued */
.moon-body::after {
  content: '';
  position: absolute;
  top: 14%; left: 22%;
  width: 28%; height: 22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220,215,230,.22) 0%, transparent 70%);
  filter: blur(5px);
}

@keyframes moonFloat {
  0%,100% { transform: translateY(0)    rotate(-2deg); }
  50%     { transform: translateY(-12px) rotate(2deg); }
}

/* Mute the original blobs slightly so celestial bodies lead */
.hero-blob-1 { opacity: .55; }
.hero-blob-2 { opacity: .65; }

/* ── CELESTIAL: DRIFTING CLOUDS ───────────────────────── */
.hero-clouds {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  overflow: hidden;
}
.cloud {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 60% 50% at 30% 50%, rgba(255,255,255,.14), transparent 70%),
    radial-gradient(ellipse 50% 40% at 60% 45%, rgba(255,240,210,.10), transparent 65%),
    radial-gradient(ellipse 70% 45% at 75% 55%, rgba(220,225,255,.08), transparent 70%);
  filter: blur(28px);
  will-change: transform;
}
.cloud-1 { top:  8%; width: 280px; height: 70px; animation: cloudDrift  85s linear infinite; }
.cloud-2 { top: 22%; width: 340px; height: 90px; opacity: .7; animation: cloudDrift 130s linear infinite -45s; }
.cloud-3 { top: 36%; width: 200px; height: 55px; opacity: .55; animation: cloudDrift 110s linear infinite -70s; }
@keyframes cloudDrift {
  from { transform: translateX(-360px); }
  to   { transform: translateX(120vw); }
}

/* ── CELESTIAL: SHOOTING STAR (METEOR) ────────────────── */
.hero-meteor {
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px #fff, 0 0 22px rgba(255,240,200,.85);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  rotate: var(--meteor-angle, 30deg);
}
.hero-meteor::before {
  content: '';
  position: absolute;
  top: 50%; right: 100%;
  width: 160px; height: 1.6px;
  background: linear-gradient(to left,
    rgba(255,255,255,.95) 0%,
    rgba(255,240,200,.55) 35%,
    rgba(255,210,150,.25) 70%,
    transparent 100%);
  transform: translateY(-50%);
  border-radius: 2px;
}
.hero-meteor.fire {
  animation: meteorStreak 1.4s cubic-bezier(.55,.05,.1,.95) forwards;
}
@keyframes meteorStreak {
  0%   { opacity: 0; translate: 0 0; }
  10%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; translate: var(--meteor-dx, 700px) var(--meteor-dy, 380px); }
}

/* ── CELESTIAL: SUNSET OVERLAY (scroll-driven) ────────── */
.hero-sunset {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background: linear-gradient(180deg,
    rgba(247,107,28,.22) 0%,
    rgba(180,50,120,.16) 35%,
    rgba(60,30,110,.10) 70%,
    transparent 100%);
  opacity: var(--scroll-progress, 0);
  transition: opacity .3s ease-out;
}

.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
}
.hero-label { margin-bottom: 1rem; }
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 5.5vw, 5.5rem);
  font-weight: 300; line-height: 1.04; letter-spacing: -.03em;
  margin-bottom: 1.4rem;
  color: white;
}
.hero-title em { font-style: italic; }
.hero-desc {
  font-size: 1.05rem; line-height: 1.78;
  color: var(--d-text2); max-width: 440px; margin-bottom: 2.2rem;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-note {
  margin-top: 1.4rem; display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: .7rem;
  color: var(--d-muted); letter-spacing: .06em;
}
.hero-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 8px var(--amber);
  animation: glow 2s ease-in-out infinite;
}
@keyframes glow { 0%,100% { box-shadow: 0 0 6px var(--amber); } 50% { box-shadow: 0 0 16px var(--amber); } }

/* ── CLOCK VISUAL ───────────────────────────────────────── */
.hero-visual { display: flex; justify-content: center; align-items: center; position: relative; }

.clock-outer {
  position: relative; width: 320px; height: 320px;
}
/* outer dashed ring */
.clock-ring-dash {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px dashed rgba(245,158,11,.25);
  animation: spinSlow 80s linear infinite;
}
.clock-ring-dash::before {
  content: ''; position: absolute;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 12px var(--amber), 0 0 24px rgba(245,158,11,.5);
  top: -5px; left: 50%; transform: translateX(-50%);
}
/* middle ring */
.clock-ring-solid {
  position: absolute; inset: 22px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.08);
  animation: spinSlow 60s linear infinite reverse;
}
/* tick markers */
.clock-ticks { position: absolute; inset: 0; }
/* face */
.clock-face {
  position: absolute; inset: 40px; border-radius: 50%;
  background: linear-gradient(145deg, #1C1938 0%, #13112A 100%);
  border: 1px solid rgba(255,255,255,.1);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: inset 0 2px 30px rgba(0,0,0,.5),
              0 0 0 1px rgba(255,255,255,.04),
              0 20px 60px rgba(0,0,0,.4);
}
.clock-live-time {
  font-family: var(--font-mono);
  font-size: 2.4rem; font-weight: 700;
  color: var(--amber); letter-spacing: .04em;
  text-shadow: 0 0 30px rgba(245,158,11,.6), 0 0 60px rgba(245,158,11,.3);
}
.clock-live-date {
  font-family: var(--font-mono); font-size: .58rem;
  color: var(--d-muted); letter-spacing: .15em; text-transform: uppercase; margin-top: 5px;
}
@keyframes spinSlow { to { transform: rotate(360deg); } }

/* floating chips */
.chip {
  position: absolute;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 40px; padding: 8px 16px;
  font-family: var(--font-mono); font-size: .72rem; color: rgba(255,255,255,.85);
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
}
.chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); flex-shrink: 0; }
.chip-1 { top: 5%; right: -8%;  animation: chipFloat 4s ease-in-out infinite; }
.chip-2 { bottom: 12%; right: -15%; animation: chipFloat 4s ease-in-out 1.6s infinite; }
.chip-3 { top: 28%; left: -18%; animation: chipFloat 4s ease-in-out .9s infinite; }
@keyframes chipFloat { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } }

/* ── STATS BAR ──────────────────────────────────────────── */
.stats-bar {
  background: white;
  border-bottom: 1px solid var(--l-border);
  box-shadow: 0 4px 30px rgba(15,12,40,.06);
}
.stats-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
}
.stat {
  padding: 2.5rem 1rem; text-align: center;
  border-right: 1px solid var(--l-border);
}
.stat:last-child { border-right: none; }
.stat-val {
  font-family: var(--font-display);
  font-size: 3rem; font-weight: 700;
  background-color: #F59E0B;
  background-image: linear-gradient(135deg, #F59E0B 10%, #F97316 90%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1; margin-bottom: 6px;
}
.stat-lbl {
  font-family: var(--font-mono); font-size: .68rem;
  color: var(--l-muted); letter-spacing: .1em; text-transform: uppercase;
}

/* ── FEATURE CARDS (light section) ─────────────────────── */
.feat-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.4rem; }

.feat-card {
  background: var(--l-surface);
  border: 1px solid var(--l-border);
  border-radius: var(--r-xl);
  padding: 2.2rem;
  position: relative; overflow: hidden;
  transition: transform var(--med) var(--ease), box-shadow var(--med) var(--ease);
}
/* colored stripe at top */
.feat-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.feat-card.fc-amber::before { background: linear-gradient(90deg, #F59E0B, #F97316); }
.feat-card.fc-blue::before  { background: linear-gradient(90deg, #3B82F6, #14B8A6); }
.feat-card.fc-green::before { background: linear-gradient(90deg, #10B981, #6366F1); }
.feat-card.fc-rose::before  { background: linear-gradient(90deg, #8B5CF6, #EC4899); }

.feat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(15,12,40,.12);
}
.feat-num {
  position: absolute; top: 1.6rem; right: 1.8rem;
  font-family: var(--font-mono); font-size: .65rem;
  color: var(--l-muted); letter-spacing: .12em;
}
.feat-icon-wrap {
  width: 54px; height: 54px; border-radius: var(--r-md);
  display: grid; place-items: center; font-size: 24px;
  margin-bottom: 1.5rem;
}
.feat-card.fc-amber .feat-icon-wrap { background: #FEF3C7; }
.feat-card.fc-blue  .feat-icon-wrap { background: #DBEAFE; }
.feat-card.fc-green .feat-icon-wrap { background: #D1FAE5; }
.feat-card.fc-rose  .feat-icon-wrap { background: #F3E8FF; }

.feat-name {
  font-family: var(--font-display);
  font-size: 1.75rem; font-weight: 500; letter-spacing: -.02em;
  line-height: 1.15; color: var(--l-text); margin-bottom: .5rem;
}
.feat-desc { font-size: .9rem; color: var(--l-muted); line-height: 1.65; margin-bottom: 1.5rem; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  background: var(--l-bg); border: 1px solid var(--l-border);
  border-radius: 20px; padding: 4px 12px;
  font-size: .7rem; color: var(--l-text2);
  font-family: var(--font-mono); letter-spacing: .04em;
}
.feat-card.fc-amber .tag { background: #FFFBEB; border-color: rgba(245,158,11,.2); color: #92400E; }
.feat-card.fc-blue  .tag { background: #EFF6FF; border-color: rgba(59,130,246,.2); color: #1E40AF; }
.feat-card.fc-green .tag { background: #ECFDF5; border-color: rgba(16,185,129,.2); color: #065F46; }
.feat-card.fc-rose  .tag { background: #F5F3FF; border-color: rgba(139,92,246,.2); color: #5B21B6; }

/* ── ALARM SPOTLIGHT (light) ─────────────────────────────── */
.spotlight { padding: 6rem 0; }
.spotlight-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
}
.spotlight-grid.flip { direction: rtl; }
.spotlight-grid.flip > * { direction: ltr; }

.sub-feats { margin-top: 1.5rem; }
.sub-feat {
  display: flex; gap: 1rem;
  padding: 1rem 0; border-bottom: 1px solid var(--l-border);
}
.light-sec .sub-feat { border-bottom-color: var(--l-border); }
.dark-sec  .sub-feat { border-bottom-color: var(--d-border); }
.sub-feat:last-child { border-bottom: none; }
.sub-feat-ico { font-size: 1.2rem; flex-shrink: 0; padding-top: 2px; }
.sub-feat-body h4 {
  font-size: .9rem; font-weight: 600;
  margin-bottom: 2px;
}
.light-sec .sub-feat-body h4 { color: var(--l-text); }
.dark-sec  .sub-feat-body h4 { color: var(--d-text); }
.sub-feat-body p { font-size: .83rem; line-height: 1.55; }
.light-sec .sub-feat-body p { color: var(--l-muted); }
.dark-sec  .sub-feat-body p { color: var(--d-text2); }

/* learn more link */
.learn-more {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 1.8rem; font-size: .88rem; font-weight: 600;
  color: var(--amber-dark); transition: gap var(--fast);
}
.dark-sec .learn-more { color: var(--amber); }
.learn-more:hover { gap: 10px; }

/* ── PHONE MOCKUP ───────────────────────────────────────── */
.phone-wrap { display: flex; justify-content: center; }
.phone {
  width: 215px;
  background: #1a1830;
  border: 2px solid rgba(255,255,255,.1);
  border-radius: 38px; padding: 10px;
  box-shadow: 0 40px 100px rgba(0,0,0,.5),
              inset 0 1px 0 rgba(255,255,255,.06),
              0 0 0 1px rgba(0,0,0,.4);
}
.phone-notch {
  width: 70px; height: 26px;
  background: #0C0B1D; border-radius: 0 0 16px 16px;
  margin: 0 auto 6px;
}
.phone-screen { background: #0C0B1D; border-radius: 28px; overflow: hidden; height: 375px; }

/* — Alarm screen mock — */
.ms-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 14px 10px;
}
.ms-title { font-family: var(--font-mono); font-size: 9px; color: var(--amber); letter-spacing: .14em; }
.ms-add {
  width: 24px; height: 24px;
  background-color: #F59E0B;
  background-image: linear-gradient(135deg, #F59E0B 0%, #F97316 100%);
  border-radius: 6px;
  display: grid; place-items: center;
  color: white; font-weight: 700; font-size: 15px; line-height: 1;
  box-shadow: 0 2px 8px rgba(245,158,11,.4);
}
.ms-item {
  background: #161430; border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px; padding: 12px 13px; margin: 0 10px 8px;
}
.ms-time {
  font-family: var(--font-mono); font-size: 22px;
  color: white; font-weight: 700; line-height: 1;
}
.ms-time sup { font-size: 9px; color: #7B759A; font-weight: 400; vertical-align: top; margin-top: 3px; display: inline-block; }
.ms-lbl { font-size: 8.5px; color: #7B759A; margin-top: 3px; font-family: var(--font-mono); }
.ms-tog {
  float: right; width: 32px; height: 18px;
  background-color: #F59E0B;
  background-image: linear-gradient(135deg, #F59E0B 0%, #F97316 100%);
  border-radius: 10px;
  margin-top: -27px; position: relative;
  box-shadow: 0 0 8px rgba(245,158,11,.4);
}
.ms-tog::after { content: ''; width: 14px; height: 14px; background: #fff; border-radius: 50%; position: absolute; right: 2px; top: 2px; }
.ms-item.off { opacity: .4; }
.ms-item.off .ms-tog { background: #2A2845; box-shadow: none; }
.ms-item.off .ms-tog::after { right: auto; left: 2px; }

/* — World clock mock — */
.wc-head { padding: 14px 14px 8px; font-family: var(--font-mono); font-size: 9px; color: var(--amber); letter-spacing: .14em; }
.wc-item { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; border-bottom: 1px solid rgba(255,255,255,.05); }
.wc-city { font-size: 10px; color: #C4C0D4; }
.wc-tz   { font-family: var(--font-mono); font-size: 7px; color: #7B759A; margin-top: 2px; }
.wc-t    { font-family: var(--font-mono); font-size: 17px; color: var(--amber); font-weight: 700; text-align: right; }
.wc-offset { font-family: var(--font-mono); font-size: 7px; color: #7B759A; text-align: right; }

/* — Stopwatch mock — */
.sw-body { padding: 18px 14px; }
.sw-main { background: #161430; border-radius: 14px; padding: 18px; text-align: center; margin-bottom: 12px; }
.sw-time {
  font-family: var(--font-mono); font-size: 28px; color: var(--amber);
  font-weight: 700; text-shadow: 0 0 20px rgba(245,158,11,.5);
}
.sw-btns { display: flex; justify-content: center; gap: 8px; margin-bottom: 12px; }
.sw-btn { background: #161430; border: 1px solid rgba(255,255,255,.06); border-radius: 20px; padding: 5px 12px; font-size: 8.5px; color: #7B759A; font-family: var(--font-mono); }
.sw-btn.active { background-color: #F59E0B; background-image: linear-gradient(135deg, #F59E0B 0%, #F97316 100%); color: white; border-color: transparent; }
.lap-row { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 8px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.lap-fast { color: #10B981; } .lap-slow { color: #F43F5E; } .lap-norm { color: #7B759A; }

/* — Timer mock — */
.tm-body { padding: 20px 14px; }
.tm-wheels { display: flex; justify-content: center; align-items: center; gap: 4px; margin-bottom: 16px; }
.tm-col { background: #161430; border: 1px solid rgba(255,255,255,.06); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tm-v { font-family: var(--font-mono); font-size: 22px; color: var(--amber); font-weight: 700; line-height: 1; }
.tm-v.dim { opacity: .3; font-size: 13px; }
.tm-u { font-family: var(--font-mono); font-size: 7px; color: #7B759A; letter-spacing: .1em; }
.tm-colon { font-family: var(--font-mono); font-size: 18px; color: #7B759A; align-self: center; animation: blink 1s step-end infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .15; } }
.tm-btn { display: block; width: calc(100% - 28px); margin: 0 14px; background-color: #F59E0B; background-image: linear-gradient(135deg, #F59E0B 0%, #F97316 100%); border-radius: 12px; padding: 10px; text-align: center; font-family: var(--font-mono); font-size: 10px; color: white; font-weight: 700; letter-spacing: .08em; box-shadow: 0 4px 16px rgba(245,158,11,.35); }

/* ── TWO-COL MINI FEATURES ──────────────────────────────── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.mini-card {
  background: var(--l-surface); border: 1px solid var(--l-border);
  border-radius: var(--r-xl); padding: 2.4rem;
  transition: transform var(--med) var(--ease), box-shadow var(--med) var(--ease);
}
.mini-card:hover { transform: translateY(-5px); box-shadow: 0 20px 60px rgba(15,12,40,.1); }
.mini-card-ico { font-size: 2.4rem; margin-bottom: 1.3rem; display: block; }
.mini-card-title { font-family: var(--font-display); font-size: 2rem; font-weight: 300; color: var(--l-text); margin-bottom: .5rem; letter-spacing: -.02em; }
.mini-card-desc { font-size: .9rem; color: var(--l-muted); line-height: 1.65; margin-bottom: 1.5rem; }
.highlights { display: flex; flex-direction: column; gap: 7px; }
.hl { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--l-text2); }
.hl::before { content: ''; width: 16px; height: 16px; border-radius: 50%; background: #FEF3C7; display: grid; place-items: center; flex-shrink: 0; font-size: .7rem; }

/* custom check */
.hl::before { content: '✓'; color: var(--amber-dark); font-weight: 700; background: #FEF3C7; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: .6rem; flex-shrink: 0; }

/* Stopwatch mockup section */
.mock-box { background: #0C0B1D; border-radius: 14px; padding: 16px; margin-bottom: 1.5rem; }

/* ── WORLD CLOCK SECTION (dark) ─────────────────────────── */
.wc-spotlight {
  background: var(--d-bg);
  padding: 6rem 0;
  position: relative; overflow: hidden;
}
.wc-spotlight::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.wc-glow {
  position: absolute; width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,158,11,.1) 0%, transparent 70%);
  top: 50%; right: -200px; transform: translateY(-50%);
  pointer-events: none; filter: blur(40px);
}

/* Glass card for dark sections */
.glass-card {
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-xl);
  padding: 2rem;
}
.glass-card:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); }

/* ── NOTIFICATION SECTION (dark) ───────────────────────── */
.notif-sec {
  background: linear-gradient(135deg, #0C0B1D 0%, #130F2A 50%, #0F1A2E 100%);
  padding: 6rem 0;
  position: relative; overflow: hidden;
}
.notif-sec::before {
  content: ''; position: absolute;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,.08) 0%, transparent 70%);
  top: -100px; right: -100px; filter: blur(40px); pointer-events: none;
}
.notif-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.notif-cards { display: flex; flex-direction: column; gap: .9rem; }

.notif-item {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-lg); padding: 1.1rem 1.3rem;
  display: flex; gap: 1rem; align-items: flex-start;
  transition: background var(--fast);
}
.notif-item:nth-child(3) { opacity: .5; transform: scale(.97); }
.notif-item:hover { background: rgba(255,255,255,.07); }
.ni-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center; font-size: 18px; flex-shrink: 0;
}
.ni-icon.amber { background: rgba(245,158,11,.15); border: 1px solid rgba(245,158,11,.25); }
.ni-icon.blue  { background: rgba(99,102,241,.15);  border: 1px solid rgba(99,102,241,.25); }
.ni-body h5 { font-size: .88rem; font-weight: 500; color: var(--d-text); margin-bottom: 2px; }
.ni-body p  { font-size: .78rem; color: var(--d-muted); }
.ni-btns { display: flex; gap: 7px; margin-top: 9px; }
.ni-btn {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px; padding: 4px 12px; font-size: .73rem; color: var(--d-text2);
  transition: background var(--fast);
}
.ni-btn:hover { background: rgba(255,255,255,.12); }
.ni-btn.amber { background-color: #F59E0B; background-image: linear-gradient(135deg, #F59E0B 0%, #F97316 100%); color: white; border-color: transparent; font-weight: 600; }

.notif-copy h3 {
  font-family: var(--font-display);
  font-size: 2.4rem; font-weight: 300; line-height: 1.12;
  color: var(--d-text); margin: .8rem 0 1rem;
}
.notif-copy p { font-size: .92rem; color: var(--d-text2); line-height: 1.75; margin-bottom: 1.8rem; }
.notif-checks { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.nc { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--d-text2); }
.nc::before { content: '✓'; color: var(--amber); font-weight: 700; flex-shrink: 0; }

/* ── CTA SECTION ─────────────────────────────────────────── */
.cta-sec {
  background-color: #F59E0B;
  background-image: linear-gradient(135deg, #F59E0B 0%, #F97316 50%, #EF4444 100%);
  color: white;
  padding: 7rem 0; text-align: center;
  position: relative; overflow: hidden;
}
.cta-sec::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 28px 28px; pointer-events: none;
  z-index: 0;
}
.cta-sec .container { position: relative; z-index: 1; }
.cta-sec .label { color: rgba(255,255,255,.85); }
.cta-sec .label::before { background: rgba(255,255,255,.6); }
.cta-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.5vw, 4.8rem);
  font-weight: 300; letter-spacing: -.03em;
  line-height: 1.07; color: white;
  margin: .8rem 0 1.2rem;
}
.cta-title em { font-style: italic; }
.cta-desc { font-size: 1.05rem; color: rgba(255,255,255,.85); max-width: 440px; margin: 0 auto 2.5rem; line-height: 1.7; }
.cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn-cta-primary {
  background: white; color: #D97706;
  border-radius: var(--r-lg); padding: 1rem 2.2rem;
  font-size: 1rem; font-weight: 700;
  box-shadow: 0 8px 30px rgba(0,0,0,.2);
  transition: transform var(--fast), box-shadow var(--fast);
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.btn-cta-ghost {
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  color: white; border: 1.5px solid rgba(255,255,255,.3);
  border-radius: var(--r-lg); padding: 1rem 2.2rem;
  font-size: 1rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background var(--fast), border-color var(--fast);
}
.btn-cta-ghost:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.5); }

/* ── ANDROID BADGE ──────────────────────────────────────── */
.abadge {
  display: inline-flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.12); backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,.25);
  border-radius: var(--r-lg); padding: 12px 22px;
  transition: background var(--fast), border-color var(--fast);
}
.abadge:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); }
.abadge-ico { font-size: 28px; }
.abadge-txt { text-align: left; }
.abadge-txt small { display: block; font-size: .65rem; color: rgba(255,255,255,.7); letter-spacing: .05em; }
.abadge-txt strong { display: block; font-size: 1rem; font-weight: 700; color: white; }

/* Light badge variant */
.abadge-light {
  background: white; border: 1.5px solid var(--l-border);
  border-radius: var(--r-lg); padding: 12px 22px;
  display: inline-flex; align-items: center; gap: 12px;
  box-shadow: 0 4px 20px rgba(15,12,40,.08);
  transition: transform var(--fast), box-shadow var(--fast);
}
.abadge-light:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(15,12,40,.12); }
.abadge-light .abadge-txt small  { color: var(--l-muted); }
.abadge-light .abadge-txt strong { color: var(--l-text); }

/* ── FOOTER ─────────────────────────────────────────────── */
.footer {
  background: #080715; border-top: 1px solid rgba(255,255,255,.06);
  padding: 4rem 0 2rem;
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem; margin-bottom: 3rem;
}
.footer-brand p { font-size: .88rem; color: var(--d-muted); line-height: 1.65; margin-top: .9rem; max-width: 250px; }
.footer-col h6 { font-family: var(--font-mono); font-size: .65rem; letter-spacing: .16em; text-transform: uppercase; color: var(--d-muted); margin-bottom: .9rem; }
.footer-col a { display: block; font-size: .88rem; color: var(--d-muted); padding: 4px 0; transition: color var(--fast); }
.footer-col a:hover { color: var(--amber); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.05); }
.footer-bottom p { font-size: .75rem; color: #4A4567; font-family: var(--font-mono); }

/* ── PAGE HERO ──────────────────────────────────────────── */
.page-hero {
  background-color: #0C0B1D;
  background-image: linear-gradient(145deg, #0C0B1D 0%, #1A0F3A 55%, #0D1F3C 100%);
  color: var(--d-text);
  padding: 10rem 0 6rem; text-align: center;
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 32px 32px; pointer-events: none;
}
.page-hero-blob {
  position: absolute; border-radius: 50%; pointer-events: none; filter: blur(50px);
  width: 500px; height: 400px;
  background: radial-gradient(circle, rgba(245,158,11,.2) 0%, transparent 70%);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.page-hero-inner { position: relative; z-index: 1; }
.page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 5.2rem);
  font-weight: 300; letter-spacing: -.03em; line-height: 1.08;
  color: white; margin: .8rem 0 1.2rem;
}
.page-hero-desc { font-size: 1.05rem; color: var(--d-text2); max-width: 500px; margin: 0 auto; line-height: 1.75; }

/* ── FEATURES DETAIL PAGE ───────────────────────────────── */
.feat-sec { padding: 5.5rem 0; }
.feat-sec.alt { background: var(--l-bg2); }
.feat-sec-grid {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: 5rem; align-items: start;
}
.feat-sec-grid.rev { direction: rtl; }
.feat-sec-grid.rev > * { direction: ltr; }

.big-num {
  font-family: var(--font-mono); font-size: 5.5rem; font-weight: 700;
  color: rgba(15,12,40,.05); line-height: 1; margin-bottom: -1.2rem;
}
.feat-sec.alt .big-num { color: rgba(15,12,40,.06); }

.feat-main-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 300; letter-spacing: -.025em; line-height: 1.1;
  color: var(--l-text); margin-bottom: .8rem;
}
.feat-main-desc { font-size: .95rem; color: var(--l-muted); line-height: 1.75; margin-bottom: 2rem; }
.feat-items { display: flex; flex-direction: column; gap: .8rem; }
.feat-item {
  background: var(--l-surface); border: 1px solid var(--l-border);
  border-radius: var(--r-md); padding: 1.2rem 1.3rem;
  display: flex; gap: 1rem; align-items: flex-start;
  transition: border-color var(--med) var(--ease), box-shadow var(--med) var(--ease);
}
.feat-sec.alt .feat-item { background: var(--l-surface); }
.feat-item:hover { border-color: rgba(245,158,11,.3); box-shadow: 0 4px 20px rgba(245,158,11,.08); }
.feat-item-ico { font-size: 1.4rem; flex-shrink: 0; }
.feat-item h4 { font-size: .9rem; font-weight: 600; color: var(--l-text); margin-bottom: 4px; }
.feat-item p  { font-size: .83rem; color: var(--l-muted); line-height: 1.55; }
.feat-item code { background: #FEF3C7; border-radius: 4px; padding: 1px 6px; font-family: var(--font-mono); font-size: .78rem; color: #92400E; }

.feat-visual-box {
  background: var(--d-bg);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--r-2xl); padding: 3rem 2rem;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1.5rem;
  min-height: 460px; position: sticky; top: 100px;
  overflow: hidden;
}
.feat-visual-box::before {
  content: ''; position: absolute;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,158,11,.1) 0%, transparent 70%);
  top: 50%; left: 50%; transform: translate(-50%,-50%); filter: blur(20px);
}
.feat-visual-box .phone-wrap { position: relative; z-index: 1; }
.feat-visual-label { font-family: var(--font-mono); font-size: .65rem; color: var(--d-muted); letter-spacing: .12em; text-align: center; position: relative; z-index: 1; }

/* ── DOWNLOAD PAGE ──────────────────────────────────────── */
.dl-hero {
  background-color: #0C0B1D;
  background-image: linear-gradient(145deg, #0C0B1D 0%, #1A0F3A 55%, #0D1F3C 100%);
  color: var(--d-text); padding: 10rem 0 6rem; text-align: center; position: relative; overflow: hidden; }
.dl-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; }
.dl-blob { position: absolute; border-radius: 50%; filter: blur(50px); pointer-events: none; width: 600px; height: 500px; background: radial-gradient(circle, rgba(245,158,11,.18) 0%, transparent 70%); top: 50%; left: 50%; transform: translate(-50%,-50%); }
.dl-inner { position: relative; z-index: 1; }
.dl-title { font-family: var(--font-display); font-size: clamp(2.8rem, 6vw, 5.5rem); font-weight: 300; letter-spacing: -.03em; line-height: 1.07; color: white; margin: .8rem 0 1.2rem; }
.dl-desc { font-size: 1.05rem; color: var(--d-text2); max-width: 480px; margin: 0 auto 2.5rem; line-height: 1.75; }
.dl-badges { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.dl-pills { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }
.pill { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); border-radius: 30px; padding: 5px 14px; font-size: .73rem; color: rgba(255,255,255,.7); font-family: var(--font-mono); display: flex; align-items: center; gap: 6px; }
.pill-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--amber); flex-shrink: 0; }

.req-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.req-card {
  background: var(--l-surface);
  border: 1px solid var(--l-border);
  border-radius: var(--r-xl);
  padding: 2rem 1.8rem;
  text-align: center;
  box-shadow: 0 4px 24px rgba(15,12,40,.06);
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.req-card:hover { transform: translateY(-3px); box-shadow: 0 10px 36px rgba(15,12,40,.1); }

.req-ico-wrap {
  width: 60px; height: 60px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.25rem;
}
.req-ico-wrap svg { width: 26px; height: 26px; }

.req-ico-green  { background: rgba(16,185,129,.12); color: #059669; border: 1px solid rgba(16,185,129,.2); }
.req-ico-indigo { background: rgba(99,102,241,.12); color: var(--indigo); border: 1px solid rgba(99,102,241,.2); }
.req-ico-amber  { background: rgba(245,158,11,.12); color: var(--amber-dark); border: 1px solid rgba(245,158,11,.2); }

.req-tit { font-size: 1rem; font-weight: 700; color: var(--l-text); margin-bottom: .5rem; }
.req-badge {
  display: inline-block;
  font-size: .7rem; font-weight: 600; letter-spacing: .04em;
  padding: 2px 10px; border-radius: 20px;
  margin-bottom: .85rem;
}
.req-badge-green  { background: rgba(16,185,129,.1);  color: #059669; }
.req-badge-indigo { background: rgba(99,102,241,.1);  color: var(--indigo); }
.req-badge-amber  { background: rgba(245,158,11,.12); color: var(--amber-dark); }
.req-desc { font-size: .82rem; color: var(--l-muted); line-height: 1.65; }

.perm-list { margin-top: 2rem; }
.perm-item { display: flex; gap: 1.2rem; padding: 1.5rem 0; border-bottom: 1px solid var(--l-border); align-items: flex-start; }
.perm-item:last-child { border-bottom: none; }
.perm-ico { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; font-size: 20px; flex-shrink: 0; background: #FEF3C7; }
.perm-body { flex: 1; }
.perm-body h4 { font-size: .92rem; font-weight: 600; color: var(--l-text); margin-bottom: 5px; }
.perm-body p  { font-size: .84rem; color: var(--l-muted); line-height: 1.6; }
.perm-badge { font-size: .65rem; background: var(--l-bg2); border: 1px solid rgba(245,158,11,.2); border-radius: 20px; padding: 4px 10px; color: var(--amber-dark); font-family: var(--font-mono); white-space: nowrap; flex-shrink: 0; align-self: flex-start; font-weight: 600; }

.install-steps { display: flex; flex-direction: column; }
.step { display: flex; gap: 1.5rem; padding: 2rem 0; border-bottom: 1px solid var(--l-border); align-items: flex-start; }
.step:last-child { border-bottom: none; }
.step-num { width: 44px; height: 44px; border: 2px solid rgba(245,158,11,.3); border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: .9rem; color: var(--amber-dark); flex-shrink: 0; background: #FEF3C7; font-weight: 700; }
.step-body h4 { font-size: 1rem; font-weight: 600; color: var(--l-text); margin-bottom: 5px; }
.step-body p  { font-size: .9rem; color: var(--l-muted); line-height: 1.65; }
.step-body code { background: #FEF3C7; border-radius: 5px; padding: 2px 8px; font-family: var(--font-mono); font-size: .78rem; color: #92400E; }
.step-body strong { color: var(--l-text2); font-weight: 600; }

.tip-box { background: #FFFBEB; border: 1px solid rgba(245,158,11,.25); border-radius: var(--r-lg); padding: 1.5rem; display: flex; gap: 1rem; align-items: flex-start; margin-top: 2.5rem; }
.tip-box-icon { font-size: 1.4rem; flex-shrink: 0; }
.tip-box-title { font-size: .9rem; font-weight: 600; color: #92400E; margin-bottom: 4px; }
.tip-box-body  { font-size: .85rem; color: #78350F; line-height: 1.65; }
.tip-box-body strong { color: #92400E; }

/* Version table */
.ver-table-wrap { margin-top: 3rem; background: var(--l-surface); border: 1px solid var(--l-border); border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 4px 30px rgba(15,12,40,.06); }
.ver-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.ver-table thead tr { border-bottom: 1px solid var(--l-border); background: var(--l-bg); }
.ver-table th { text-align: left; padding: .9rem 1.3rem; font-family: var(--font-mono); font-size: .65rem; letter-spacing: .12em; color: var(--l-muted); font-weight: 400; text-transform: uppercase; }
.ver-table td { padding: .85rem 1.3rem; border-bottom: 1px solid var(--l-border); }
.ver-table tr:last-child td { border-bottom: none; }
.ver-table tr.recommended { background: #FFFBEB; }
.vc-full    { color: #065F46; font-weight: 600; }
.vc-partial { color: #92400E; }
.vc-note    { color: var(--l-muted); }

/* FAQ */
.faq-list { max-width: 720px; margin-top: 2.5rem; }
.faq-item { border-bottom: 1px solid var(--l-border); }
.faq-q {
  width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center;
  padding: 1.4rem 0; font-size: .95rem; font-weight: 500; color: var(--l-text);
  font-family: var(--font-body); cursor: pointer; transition: color var(--fast);
}
.faq-q:hover { color: var(--amber-dark); }
.faq-arrow { color: var(--amber); font-size: 1.3rem; transition: transform var(--med) var(--ease); flex-shrink: 0; }
.faq-item.open .faq-arrow { transform: rotate(45deg); }
.faq-a { font-size: .9rem; color: var(--l-muted); line-height: 1.75; max-height: 0; overflow: hidden; transition: max-height var(--med) var(--ease), padding var(--med); }
.faq-item.open .faq-a { max-height: 200px; padding-bottom: 1.4rem; }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-grid, .spotlight-grid, .spotlight-grid.flip,
  .notif-grid, .feat-sec-grid, .feat-sec-grid.rev { grid-template-columns: 1fr; gap: 3rem; direction: ltr; }
  .feat-sec-grid.rev > * { direction: ltr; }
  .hero-visual { order: -1; }
  .clock-outer { width: 240px; height: 240px; }
  .chip { display: none; }
  .hero-sun  { width: 340px; height: 340px; top: -90px; right: -100px; }
  .sun-core  { width: 190px; height: 190px; }
  .hero-moon { width: 90px;  height: 90px;  bottom: 6%; left: 6%; }
  .feat-grid, .two-col { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .feat-visual-box { position: static; min-height: auto; }
  .req-grid { grid-template-columns: 1fr 1fr; }
  .notif-checks { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(12,11,29,.97); backdrop-filter: blur(20px);
    padding: 1.5rem; border-bottom: 1px solid rgba(255,255,255,.06);
    gap: 1.2rem;
  }
  .nav-hamburger { display: flex; }
  .hero-moon { display: none; }
  .hero-sun  { width: 280px; height: 280px; top: -70px; right: -80px; }
  .sun-core  { width: 150px; height: 150px; }
  .feat-grid, .two-col, .req-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; gap: .8rem; text-align: center; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .stat { border-right: none; border-bottom: 1px solid var(--l-border); }
  .stat:nth-child(odd) { border-right: 1px solid var(--l-border); }
  .stat:last-child { border-bottom: none; }
  .cta-btns, .dl-badges { flex-direction: column; align-items: center; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
}