/* =========================================================
   Grevity — marketing site  ·  v2 "Pendrive Edition"
   1. Fonts  2. Tokens  3. Base  4. Layout  5. Components
   6. Sections  7. Motion  8. Responsive
   =========================================================
   The whole site is built around one object: the pendrive.
   Everything below — the aurora field, the glass surfaces, the
   3D stages — exists to keep that object the brightest thing
   on the screen. Nothing decorative competes with it.
   ========================================================= */

/* ============================================================
   1. SELF-HOSTED FONTS
   Variable woff2, split by unicode-range so a browser downloads
   only the subsets the page actually renders. An English visitor
   fetches Inter latin + JetBrains Mono latin + icons (~84 KB) and
   never touches the 110 KB Gujarati face.
   Re-download with the script in README > Fonts.
   ============================================================ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Sans Gujarati';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/noto-gujarati-gujarati.woff2') format('woff2');
  unicode-range: U+0951-0952, U+0964-0965, U+0A80-0AFF, U+200C-200D, U+20B9, U+25CC, U+A830-A839;
}
@font-face {
  font-family: 'Noto Sans Gujarati';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/noto-gujarati-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Noto Sans Gujarati';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/noto-gujarati-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('/assets/fonts/material-symbols-rounded.woff2') format('woff2');
}

/* ---------- 2. TOKENS ---------- */
:root {
  /* brand — indigo core, violet + cyan as the two gradient partners.
     Every gradient on the site is built from --g1/--g2/--g3 so the
     whole page reads as one light source. */
  --brand-50:  #eef2ff;
  --brand-100: #e0e7ff;
  --brand-200: #c7d2fe;
  --brand-300: #a5b4fc;
  --brand-400: #818cf8;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;
  --brand-800: #3730a3;
  --brand-900: #312e81;

  --brand:       var(--brand-600);
  --brand-hover: var(--brand-700);
  --brand-ink:   var(--brand-600);
  --brand-soft:  var(--brand-50);

  --g1: #6366f1;   /* indigo  */
  --g2: #8b5cf6;   /* violet  */
  --g3: #06b6d4;   /* cyan    */
  --grad:      linear-gradient(112deg, var(--g1), var(--g2) 48%, var(--g3));
  --grad-soft: linear-gradient(112deg, rgba(99,102,241,.16), rgba(139,92,246,.14) 48%, rgba(6,182,212,.14));

  /* semantic accents — icons, tags, status. Never primary CTAs. */
  --ok:          #10b981;
  --ok-soft:     rgba(16, 185, 129, .12);
  --warn:        #f59e0b;
  --warn-soft:   rgba(245, 158, 11, .14);
  --danger:      #f43f5e;
  --danger-soft: rgba(244, 63, 94, .10);
  --violet:      #8b5cf6;
  --violet-soft: rgba(139, 92, 246, .12);
  --teal:        #14b8a6;
  --teal-soft:   rgba(20, 184, 166, .12);
  --sky:         #0ea5e9;
  --sky-soft:    rgba(14, 165, 233, .12);
  --accent:      var(--warn);
  --accent-soft: var(--warn-soft);
  --wa:          #25D366;            /* WhatsApp brand green — intentional exception */

  /* neutrals — slate */
  --bg:            #ffffff;
  --bg-tint:       #f7f8fc;
  --surface:       #ffffff;
  --surface-2:     #f7f8fc;
  --surface-3:     #e6e9f2;
  --text-strong:   #0b1120;
  --text:          #0f172a;
  --muted:         #4b5675;
  --faint:         #8f9ab5;
  --border:        #e6e9f2;
  --border-strong: #cbd2e4;

  /* Glass is a real surface here, not an effect bolted on: one token pair
     so every floating panel (nav, hero cards, hotspots) matches. */
  --glass:        rgba(255, 255, 255, .72);
  --glass-border: rgba(255, 255, 255, .85);
  --glass-blur:   saturate(180%) blur(18px);

  --ring: 0 0 0 3px rgba(99, 102, 241, .40);
  --sh-1: 0 1px 2px rgba(11, 17, 32, .05), 0 1px 3px rgba(11, 17, 32, .06);
  --sh-2: 0 4px 12px rgba(11, 17, 32, .06), 0 12px 28px rgba(11, 17, 32, .07);
  --sh-3: 0 12px 30px rgba(11, 17, 32, .10), 0 30px 60px rgba(11, 17, 32, .10);
  --sh-4: 0 30px 60px rgba(11, 17, 32, .13), 0 60px 120px rgba(11, 17, 32, .12);
  --sh-brand:      0 6px 18px rgba(79, 70, 229, .28);
  --sh-brand-lift: 0 14px 32px rgba(79, 70, 229, .36);

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  --shell: 1220px;
  --nav-h: 74px;

  --f-head: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease: cubic-bezier(.22, .68, .28, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* Dark mode is toggled by `dark` on <html>, matching the app.
   The dark ground is deliberately near-black with a blue cast — the
   3D stages read as lit objects in a room rather than flat art. */
.dark {
  --brand-ink:  var(--brand-300);
  --brand-soft: rgba(99, 102, 241, .16);

  --bg:            #070a14;
  --bg-tint:       #0a0e1c;
  --surface:       #111726;
  --surface-2:     #0d1322;
  --surface-3:     #1e2640;
  --text-strong:   #f1f5f9;
  --text:          #e2e8f0;
  --muted:         #a9b4cc;
  --faint:         #6c7796;
  --border:        #1d2438;
  --border-strong: #2c3550;

  --glass:        rgba(17, 23, 38, .66);
  --glass-border: rgba(255, 255, 255, .09);

  --sh-1: 0 1px 2px rgba(0, 0, 0, .5);
  --sh-2: 0 6px 18px rgba(0, 0, 0, .42);
  --sh-3: 0 18px 50px rgba(0, 0, 0, .55);
  --sh-4: 0 34px 80px rgba(0, 0, 0, .6);
}

/* Gujarati typography */
[data-lang="gu"] {
  --f-head: "Noto Sans Gujarati", "Inter", system-ui, sans-serif;
  --f-body: "Noto Sans Gujarati", "Inter", system-ui, sans-serif;
}
[data-lang="gu"] body { line-height: 1.85; }
[data-lang="gu"] h1, [data-lang="gu"] h2, [data-lang="gu"] h3 { line-height: 1.42; letter-spacing: 0; }

/* ---------- 3. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 {
  font-family: var(--f-head);
  color: var(--text-strong);
  line-height: 1.1;
  letter-spacing: -.028em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.15rem, 4.4vw, 3.5rem); font-weight: 800; letter-spacing: -.038em; }
h2 { font-size: clamp(1.85rem, 3.9vw, 3rem); font-weight: 800; letter-spacing: -.035em; }
h3 { font-size: 1.08rem; font-weight: 700; }
h4 { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
p  { margin: 0 0 1rem; color: var(--muted); }
a  { color: var(--brand-ink); text-decoration: none; }
img, svg, canvas { max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: -60px; left: 12px; z-index: 300;
  background: var(--brand); color: #fff; padding: 10px 16px;
  border-radius: 0 0 var(--r-sm) var(--r-sm); transition: top .2s;
}
.skip-link:focus { top: 0; }

.msym {
  font-family: "Material Symbols Rounded";
  font-weight: normal; font-style: normal;
  font-size: 22px; line-height: 1;
  letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; direction: ltr;
  -webkit-font-feature-settings: "liga"; font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  flex: none;
}
/* If the icon font never arrives, hide the glyph names rather than print them. */
.no-icons .msym { display: none !important; }

/* Numerals, amounts and technical strings use the mono face. */
.plan__amt, .plan__mrp, .plan__renew strong,
.device__url, .floatcard small, .spec__val, .hot__k {
  font-family: var(--f-mono);
  font-feature-settings: "tnum" 1;
}

/* Gradient text — one utility, used sparingly on hero + section leads. */
.grad {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- 4. LAYOUT ---------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: 20px; }
.shell--narrow { max-width: 840px; }

.section { padding: clamp(72px, 9.5vw, 132px) 0; position: relative; }
.section--tint { background: var(--bg-tint); }
/* A hairline that fades out at both ends, used where two flat bands meet. */
.section--edge { border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent) 1; }

.sechead { max-width: 760px; margin: 0 auto clamp(40px, 5vw, 68px); text-align: center; }
.sechead p { font-size: 1.08rem; margin: 0; }
.sechead--left { margin-inline: 0; text-align: left; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
  font-family: var(--f-head); font-size: .76rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-ink);
  background: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
  padding: 6px 14px; border-radius: var(--r-pill);
}
.eyebrow .msym { font-size: 15px; }
.eyebrow--on { color: #fff; background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .28); }

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

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}

/* ---------- 5. COMPONENTS ---------- */

/* Buttons */
.btn {
  --btn-bg: transparent; --btn-fg: var(--text);
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border: 1px solid transparent; border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--f-head); font-size: .95rem; font-weight: 700;
  cursor: pointer; text-align: center; white-space: nowrap;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              background-color .22s var(--ease), border-color .22s var(--ease);
}
.btn .msym { font-size: 19px; transition: transform .25s var(--ease); }
.btn > * { position: relative; z-index: 1; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:hover .msym { transform: translateX(3px); }

.btn--primary {
  --btn-fg: #fff;
  background: var(--grad); background-size: 160% 160%;
  box-shadow: var(--sh-brand);
}
/* The sheen sweeps once per hover — a single moving highlight, not a loop. */
.btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.35) 50%, transparent 80%);
  transform: translateX(-120%); transition: transform .7s var(--ease-out);
}
.btn--primary:hover { box-shadow: var(--sh-brand-lift); }
.btn--primary:hover::after { transform: translateX(120%); }

.btn--ghost { --btn-fg: var(--text); border-color: var(--border-strong); background: var(--surface); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand-ink); }
.btn--on { --btn-fg: #fff; border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .08); }
.btn--on:hover { background: rgba(255, 255, 255, .18); border-color: #fff; color: #fff; }

.btn--wa { --btn-bg: var(--wa); --btn-fg: #06331A; box-shadow: 0 6px 18px rgba(37, 211, 102, .3); }
.btn--wa:hover { --btn-bg: #1FBE5B; }

.btn--sm  { padding: 9px 16px; font-size: .87rem; }
.btn--lg  { padding: 16px 28px; font-size: 1.02rem; }
.btn--block { display: flex; width: 100%; }

.iconbtn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; min-width: 40px; padding: 0 10px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-pill);
  cursor: pointer; transition: background-color .2s, border-color .2s, transform .2s;
}
.iconbtn:hover { border-color: var(--brand); transform: translateY(-1px); }
.iconbtn__label { font-family: var(--f-head); font-size: .8rem; font-weight: 700; }
.icon-dark, .dark .icon-light { display: none; }
.dark .icon-dark { display: inline-block; }

/* Pills, tags, ticks */
.pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 16px 7px 12px; border-radius: var(--r-pill);
  background: var(--glass); border: 1px solid var(--border);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--sh-1);
  font-size: .84rem; font-weight: 600; color: var(--text);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.pill:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.pill__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 0 var(--ok-soft); animation: ping 2.4s infinite;
}
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, .55); }
  70%  { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.tag {
  display: inline-block; margin-top: 12px; padding: 5px 12px;
  border-radius: var(--r-pill); background: var(--accent-soft);
  color: var(--text); font-size: .75rem; font-weight: 700;
  border: 1px solid rgba(245, 158, 11, .4);
}

.ticks { display: grid; gap: 11px; margin: 22px 0; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); }
.ticks .msym { color: var(--ok); font-size: 20px; margin-top: 2px; }
.ticks--sm li { font-size: .9rem; }
.ticks--on li { color: rgba(255, 255, 255, .88); }
.ticks--on .msym { color: var(--brand-300); }

/* Spotlight: a soft light that follows the pointer across a card.
   --mx/--my are written by main.js; with no JS the card is simply flat. */
.spot { position: relative; isolation: isolate; }
.spot::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit; opacity: 0; transition: opacity .35s var(--ease);
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%),
              color-mix(in srgb, var(--brand) 14%, transparent), transparent 65%);
}
.spot:hover::before { opacity: 1; }
.spot > * { position: relative; z-index: 1; }

/* Tilt: real perspective, driven by pointer. JS sets --rx/--ry. */
.tilt { transform-style: preserve-3d; will-change: transform; }
.js .tilt {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform .5s var(--ease-out);
}
.js .tilt.is-tilting { transition: transform .08s linear; }

/* ---------- 6. SECTIONS ---------- */

/* --- Aurora field: the page's single ambient light source. --- */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.aurora__blob {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55;
  will-change: transform;
}
.aurora__blob--1 { width: 620px; height: 620px; top: -220px; right: -140px;
  background: radial-gradient(circle, rgba(99,102,241,.55), transparent 70%); animation: drift 24s ease-in-out infinite; }
.aurora__blob--2 { width: 520px; height: 520px; top: 180px; left: -180px;
  background: radial-gradient(circle, rgba(139,92,246,.42), transparent 70%); animation: drift 30s ease-in-out infinite reverse; }
.aurora__blob--3 { width: 420px; height: 420px; bottom: -120px; right: 26%;
  background: radial-gradient(circle, rgba(6,182,212,.34), transparent 70%); animation: drift 36s ease-in-out infinite; }
@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(42px, -34px, 0) scale(1.1); }
  66%      { transform: translate3d(-30px, 26px, 0) scale(.92); }
}
.aurora__grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--border) 1px, transparent 1px),
                    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 30%, #000 22%, transparent 76%);
  mask-image: radial-gradient(ellipse 72% 62% at 50% 30%, #000 22%, transparent 76%);
  opacity: .6;
}
/* Film grain over the gradients — stops big blurred fields from banding. */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.dark .grain { opacity: .05; mix-blend-mode: soft-light; }

/* A. NAV */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.nav.is-stuck {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-bottom-color: var(--border);
  box-shadow: var(--sh-1);
}
.nav__inner {
  display: flex; align-items: center; gap: 18px;
  height: var(--nav-h);
  transition: height .3s var(--ease);
}
.nav.is-stuck .nav__inner { height: 62px; }

.brand { display: inline-flex; align-items: center; color: var(--text-strong); }
/* Two files: indigo wordmark on light surfaces, white one on dark. */
.brand__logo { display: block; height: 40px; width: auto; transition: transform .35s var(--ease); }
.brand:hover .brand__logo { transform: scale(1.03); }
.brand__logo--dark { display: none; }
.dark .brand__logo--light { display: none; }
.dark .brand__logo--dark { display: block; }
.footer .brand__logo { height: 38px; }

.nav__links { display: flex; gap: 2px; margin-left: auto; }
.nav__links a {
  position: relative; padding: 8px 13px; border-radius: var(--r-pill);
  color: var(--muted); font-size: .92rem; font-weight: 600;
  transition: color .2s, background-color .2s;
}
.nav__links a::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px;
  background: var(--grad); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease);
}
.nav__links a:hover, .nav__links a.is-current { color: var(--text-strong); }
.nav__links a:hover::after, .nav__links a.is-current::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: 8px; margin-left: 10px; }
.nav__burger { display: none; }
.nav__burger .icon-close { display: none; }
.nav.is-open .nav__burger .icon-close { display: inline-block; }
.nav.is-open .nav__burger .icon-open { display: none; }

.nav__progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: var(--grad);
  transition: width .1s linear;
}

/* B. HERO */
.hero { position: relative; padding: calc(var(--nav-h) + 56px) 0 76px; overflow: hidden; }
.hero__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.04fr .96fr; gap: clamp(24px, 3.5vw, 52px); align-items: center;
}
.hero__title { margin: 20px 0 14px; }
.hero__title span { display: block; }
.hero__rotator {
  font-family: var(--f-head); font-weight: 700; font-size: 1.06rem;
  color: var(--text); margin: 0 0 14px;
  display: flex; gap: 7px; flex-wrap: wrap; align-items: baseline;
}
.rotator {
  display: inline-block; position: relative; max-width: 100%;
  color: var(--brand-ink); text-align: left; vertical-align: bottom;
}
.rotator__word { display: inline-block; white-space: nowrap; }
.rotator__word--in { animation: wordIn .45s var(--ease) backwards; }
/* The outgoing word leaves the flow, so the incoming one never gets pushed. */
.rotator__word--out {
  position: absolute; left: 0; top: 0;
  animation: wordOut .4s var(--ease) forwards;
}
@keyframes wordOut { to { opacity: 0; transform: translateY(-70%) rotateX(35deg); } }
@keyframes wordIn { from { opacity: 0; transform: translateY(70%) rotateX(-35deg); } }

.hero__sub { font-size: 1.08rem; max-width: 34em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 30px; }

.trustbar { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.trustbar li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: .82rem; font-weight: 600; color: var(--text);
  transition: transform .2s var(--ease), border-color .2s;
}
.trustbar li:hover { transform: translateY(-2px); border-color: var(--brand); }
.trustbar .msym { font-size: 18px; color: var(--brand-ink); }

/* The float cards are positioned against this, so it has to be the
   containing block — without it they anchor to the viewport and land
   on top of the headline. */
.hero__art { position: relative; align-self: start; }
.hero__visual { position: relative; }
.hero__art .trustbar { justify-content: center; margin-top: 28px; position: relative; z-index: 3; }

/* --- The 3D stage. Same shell for both WebGL scenes. --- */
.stage {
  position: relative;
  border-radius: var(--r-2xl);
  isolation: isolate;
}
/* The glow sits behind the drive so the object looks lit from within the page. */
.stage::before {
  content: ""; position: absolute; z-index: -1; inset: 12% 6%;
  background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--g1) 34%, transparent), transparent 68%);
  filter: blur(48px); opacity: .85;
}
/* Bottom-left rather than centred: the floating cards claim the middle and
   the bottom-right of the stage, and a centred hint collides with them. */
.hero__stage { height: clamp(340px, 46vw, 520px); }

/* The stage hosts a WebGL canvas (pendrive3d.js). Until its first frame is on
   screen — or for good if WebGL, the CDN or Save-Data rule it out — the flat
   cut-out photo underneath is what the visitor sees. */
.stage[data-pd] {
  display: grid; place-items: center;
  outline: none;
}
.stage[data-pd]:focus-visible { box-shadow: var(--ring); }
.pd-canvas {
  position: absolute; inset: 0; z-index: 1;
  display: block; width: 100%; height: 100%;
  cursor: grab; touch-action: pan-y;
  opacity: 0; transition: opacity .5s var(--ease);
}
.stage.is-live .pd-canvas { opacity: 1; }
.stage.is-dragging .pd-canvas { cursor: grabbing; }
.pd-fallback { display: none; }
/* No 3D, no hint: it only makes sense once there is a model. */
.stage[data-pd]:not(.is-live) .pd-hint { display: none; }


.product-shot {
  position: relative;
  width: 100%;
  aspect-ratio: 707 / 568;
  margin: 0;
  filter: drop-shadow(0 18px 22px rgba(20, 25, 45, .22));
}
.product-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.product-shot__brand {
  position: absolute;
  left: 46%;
  top: 56%;
  transform: translate(-50%, -50%) rotate(-35deg);
  color: #3a3631;
  font-family: var(--f-head);
  font-size: clamp(11px, 2vw, 17px);
  font-weight: 800;
  letter-spacing: .24em;
  text-indent: .24em;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .65);
  pointer-events: none;
}

.pd-hint {
  position: absolute; z-index: 2; left: 4px; bottom: 4px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 13px; border-radius: var(--r-pill);
  background: var(--glass); border: 1px solid var(--border);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  font-size: .74rem; font-weight: 600; color: var(--muted);
  pointer-events: none;
  transition: opacity .5s var(--ease);
}
.stage.is-used .pd-hint { opacity: 0; }

/* Floating glass cards around the hero drive */
.floatcard {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 11px;
  padding: 12px 16px; border-radius: var(--r-md);
  background: var(--glass); border: 1px solid var(--border);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--sh-2); max-width: 264px;
}
.floatcard strong { display: block; font-family: var(--f-head); font-size: .82rem; color: var(--text-strong); }
.floatcard small { font-size: .74rem; color: var(--muted); }
.floatcard .msym { color: var(--ok); }
.floatcard .msym--warn { color: var(--accent); }
.floatcard--a { left: -26px; top: 18%; animation: bob 6s ease-in-out infinite; }
.floatcard--b { right: -40px; top: 80%; animation: bob 7.5s ease-in-out .8s infinite reverse; }
.floatcard--c { right: -14px; top: 4%; animation: bob 6.8s ease-in-out 1.6s infinite; }
.floatcard--d { left: 0; top: 69%; animation: bob 8s ease-in-out .4s infinite reverse; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* C. TICKER — the offline promise, on repeat */
.ticker {
  border-block: 1px solid var(--border);
  background: var(--surface-2);
  overflow: hidden; padding: 14px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track { display: flex; gap: 44px; width: max-content; animation: slide 38s linear infinite; }
.ticker__item {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-head); font-size: .92rem; font-weight: 700;
  color: var(--muted); white-space: nowrap;
}
.ticker__item .msym { font-size: 19px; color: var(--brand-ink); }
@keyframes slide { to { transform: translateX(-50%); } }

/* D. COMPARE */
.compare__card { padding: 0; overflow: hidden; transition: transform .28s var(--ease), box-shadow .28s var(--ease); }
.compare__card:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }
.compare__bad, .compare__good { padding: 22px; }
.compare__bad { background: var(--surface-2); border-bottom: 1px dashed var(--border-strong); }
.compare__bad .msym { color: var(--danger); background: var(--danger-soft); }
.compare__good .msym { color: var(--ok); background: var(--ok-soft); }
.compare__card .msym {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px; margin-bottom: 12px; font-size: 20px;
}
.compare__bad h3 { color: var(--muted); font-size: 1rem; }
.compare__bad p, .compare__good p { font-size: .88rem; margin: 0; }
.compare__good h3 { font-size: 1.02rem; }

/* E. THE PENDRIVE — the centrepiece section */
.drive { position: relative; overflow: hidden; }
.drive__grid {
  display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(28px, 4vw, 60px);
  align-items: start; position: relative; z-index: 2;
}
.drive__stage { padding-bottom: clamp(36px, 8vw, 84px); }
.drive__after { margin-top: 8px; }

/* Dashboard card with the live pendrive on its bottom-right corner. */
.dash { position: relative; }
.dash__card {
  margin: 0; overflow: hidden;
  border-radius: 22px; background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 30px 60px -22px rgba(20, 25, 45, .32), 0 6px 16px rgba(20, 25, 45, .08);
  animation: dashFloat 7s ease-in-out infinite;
}
.dash__card img { display: block; width: 100%; height: auto; }
.dash__drive {
  position: absolute; z-index: 2;
  right: calc(-8% - 100px); bottom: -24%;
  width: 60%; aspect-ratio: 4 / 3;
}
.dash__drive::before { display: none; }
.dash__drive .pd-fallback { width: 86%; animation: none; }
.dash__drive .pd-hint { display: none; }
@keyframes dashFloat {
  0%, 100% { transform: translateY(-7px); }
  50%      { transform: translateY(7px); }
}
.drive__after .ticks { margin-top: 0; }

.drive__specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 26px 0 28px; }
.spec {
  padding: 16px 18px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border);
}
.spec__val { display: block; font-family: var(--f-head); font-size: 1.32rem; font-weight: 800; color: var(--text-strong); letter-spacing: -.03em; }
.spec__k { font-size: .8rem; color: var(--muted); }

/* F. FEATURES — bento */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 32px; }
.chip {
  padding: 9px 17px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border);
  font-family: var(--f-head); font-size: .85rem; font-weight: 600; color: var(--muted);
  cursor: pointer; transition: all .22s var(--ease);
}
.chip:hover { border-color: var(--brand); color: var(--text); transform: translateY(-1px); }
.chip.is-active { background: var(--grad); border-color: transparent; color: #fff; box-shadow: var(--sh-brand); }

.bento {
  display: grid; gap: 16px;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-flow: dense;
}
.feature {
  grid-column: span 2;
  padding: 24px 22px; position: relative; overflow: hidden;
  border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--sh-1);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.feature::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--grad);
  transform: scaleX(0); transform-origin: left; transition: transform .38s var(--ease);
}
.feature:hover { transform: translateY(-6px); box-shadow: var(--sh-2); border-color: var(--border-strong); }
.feature:hover::after { transform: scaleX(1); }
.feature__icon {
  display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 16px;
  border-radius: 14px; font-size: 26px;
  color: var(--brand-ink); background: var(--brand-soft);
  transition: transform .35s var(--ease), background-color .3s;
}
.feature:hover .feature__icon { transform: translateY(-3px) rotate(-6deg) scale(1.06); }
.feature p { font-size: .91rem; margin: 0; }
.feature.is-hidden { display: none; }

/* Wide tiles span 4, not 3. The grid is 6 columns of span-2 cards, so a span-3
   tile can only ever pair with a span-2 and leave one dead column; span-4 + 2
   fills the row exactly. With one hero (4) and one wide (4), the 19 features
   come to 42 spans — seven complete rows, no holes. */
.feature--wide { grid-column: span 4; }
.feature--hero {
  grid-column: span 4;
  background:
    radial-gradient(600px 200px at 100% 0%, color-mix(in srgb, var(--g2) 20%, transparent), transparent 70%),
    var(--surface);
  border-color: color-mix(in srgb, var(--brand) 40%, transparent);
}
.feature--hero h3 { font-size: 1.3rem; }
.feature--hero p { font-size: .98rem; max-width: 46ch; }
.feature--hero .feature__icon {
  width: 56px; height: 56px; font-size: 30px;
  background: var(--grad); color: #fff; box-shadow: var(--sh-brand);
}

/* Category colour-coding, mirroring how the app tints its dashboard modules. */
.feature[data-cat="stock"]    .feature__icon { color: var(--teal);   background: var(--teal-soft); }
.feature[data-cat="reports"]  .feature__icon { color: var(--sky);    background: var(--sky-soft); }
.feature[data-cat="platform"] .feature__icon { color: var(--violet); background: var(--violet-soft); }
.feature--hero.feature[data-cat="platform"] .feature__icon { color: #fff; background: var(--grad); }
.features__empty { text-align: center; color: var(--muted); margin-top: 24px; }

/* G. STEPS */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; }
.steps::before {
  content: ""; position: absolute; top: 27px; left: 10%; right: 10%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--border-strong) 0 8px, transparent 8px 16px);
}
.step { position: relative; text-align: center; padding: 0 8px; }
.step__num {
  display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 18px;
  border-radius: 50%; background: var(--surface); border: 2px solid var(--brand);
  color: var(--brand-ink); font-family: var(--f-head); font-size: 1.2rem; font-weight: 800;
  box-shadow: 0 0 0 6px var(--bg-tint); position: relative; z-index: 1;
  transition: transform .3s var(--ease), background-color .3s, color .3s, border-color .3s;
}
.step:hover .step__num { background: var(--grad); border-color: transparent; color: #fff; transform: scale(1.08); }
.step p { font-size: .91rem; margin: 0; }

/* H. REACH — support + coverage band (replaces the old city map) */
.reach { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.reach h2 { margin-top: 6px; }
.langcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.langcard {
  padding: 20px 16px; text-align: center; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-1);
  transition: transform .3s var(--ease), border-color .3s;
}
.langcard:hover { transform: translateY(-5px); border-color: var(--brand); }
.langcard b { display: block; font-family: var(--f-head); font-size: 1.5rem; color: var(--text-strong); letter-spacing: -.02em; }
.langcard span { font-size: .8rem; color: var(--muted); }
.reach__list { display: flex; flex-wrap: wrap; gap: 8px; }
.reach__list li {
  padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: .82rem; font-weight: 600; color: var(--muted);
}
.reach__note { margin-top: 18px; font-size: .86rem; }

/* I. PRICING */
.plans { display: grid; gap: 20px; align-items: stretch; }
/* Grevity ships as a single product, so the plan sits alone and centred. */
.plans--single { grid-template-columns: minmax(0, 680px); justify-content: center; }
.plan--single { text-align: center; padding: 38px clamp(20px, 4vw, 40px) 32px; }
.plan--single .plan__price { justify-content: center; }
.plan--single .plan__cta { max-width: 340px; margin-inline: auto; }
.plan--single .ticks {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 26px;
  text-align: left; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--border);
}
.plan__fine { margin: 22px 0 0; font-size: .8rem; color: var(--muted); }
.plan { display: flex; flex-direction: column; padding: 26px 22px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.plan:hover { transform: translateY(-6px); box-shadow: var(--sh-3); }
.plan--featured { position: relative; border-color: transparent; box-shadow: 0 14px 40px rgba(79, 70, 229, .18); }
/* Gradient border via a masked ring — a plain border can't hold a gradient
   and keep the 20px radius crisp on every browser we support. */
.plan--featured::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: var(--grad); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.plan__badge {
  /* Above .plan--featured::after — that masked gradient ring paints later in
     the stacking order and otherwise draws a line straight through the badge,
     which reads as a strikethrough on the offer. */
  position: absolute; z-index: 2; top: -14px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; padding: 6px 16px; border-radius: var(--r-pill);
  background: var(--grad); color: #fff; font-size: .74rem; font-weight: 700;
  font-family: var(--f-head); box-shadow: var(--sh-brand);
}
.plan__badge .msym { font-size: 15px; }
/* The launch badge is the one element on the page allowed to pulse — it is
   carrying a time-limited price, and stillness would undersell it. */
.plan__badge--offer {
  background: linear-gradient(112deg, #f97316, #e11d48 55%, var(--g2));
  box-shadow: 0 6px 20px rgba(225, 29, 72, .38);
  animation: offerPulse 2.6s var(--ease) infinite;
}
@keyframes offerPulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(225, 29, 72, .38); }
  50%      { box-shadow: 0 6px 28px rgba(225, 29, 72, .62); }
}

/* Sits directly above the CTA, where the decision actually happens. */
.plan__urgent {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 0 14px; padding: 10px 14px;
  border-radius: var(--r-md); text-align: left;
  background: var(--warn-soft); border: 1px solid rgba(245, 158, 11, .38);
  color: var(--text); font-size: .82rem; font-weight: 600; line-height: 1.45;
}
.plan__urgent .msym { font-size: 18px; color: var(--warn); }
.plan__name { font-size: 1.24rem; margin-bottom: 2px; }
.plan__for { font-size: .84rem; margin: 0 0 16px; }
.plan__price { display: flex; align-items: baseline; gap: 6px; margin: 0 0 4px; }
.plan__amt {
  font-family: var(--f-head); font-size: clamp(2.5rem, 5vw, 3.3rem); font-weight: 800;
  color: var(--text-strong); letter-spacing: -.035em;
}
.plan__per { font-size: .9rem; color: var(--muted); font-weight: 600; }
.plan__mrp {
  font-family: var(--f-mono); font-size: 1.15rem; font-weight: 500;
  color: var(--faint); text-decoration-thickness: 2px;
}
.plan__off {
  display: inline-flex; align-self: center; margin: 2px 0 0;
  padding: 4px 12px; border-radius: var(--r-pill);
  background: var(--ok-soft); color: var(--ok);
  font-family: var(--f-head); font-size: .78rem; font-weight: 700;
}
.plan__renew {
  /* The card is a column flex container, so an inline-flex child would be
     blockified and stretch — align-self keeps the pill hugging its text. */
  display: inline-flex; align-self: center; align-items: baseline; gap: 6px;
  margin: 6px 0 0; padding: 7px 16px; border-radius: var(--r-pill);
  background: var(--brand-soft); color: var(--text);
  font-size: .9rem; font-weight: 600;
}
.plan__renew strong { font-family: var(--f-head); font-size: 1.12rem; font-weight: 800; color: var(--text-strong); }
.plan__note { font-size: .78rem; color: var(--muted); margin: 14px 0 18px; }
.plan .ticks { margin: 20px 0 0; }

/* J. TESTIMONIALS */
.marquee { position: relative; overflow: hidden; padding: 10px 0 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee__track { display: flex; gap: 20px; width: max-content; animation: slide 46s linear infinite; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
.quote { flex: 0 0 auto; width: min(400px, 84vw); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.stars { color: var(--accent); letter-spacing: 3px; font-size: .95rem; }
.star--off { color: var(--border-strong); }
.quote blockquote { margin: 0; font-size: .98rem; line-height: 1.62; color: var(--text); }
.quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.quote figcaption strong { display: block; font-family: var(--f-head); font-size: .92rem; color: var(--text-strong); }
.quote figcaption small { font-size: .78rem; color: var(--muted); }
.ava {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--grad); color: #fff;
  font-family: var(--f-head); font-size: .85rem; font-weight: 700; flex: none;
}

/* K. FAQ */
.acc { display: grid; gap: 12px; }
.acc__item {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; transition: border-color .25s, box-shadow .25s;
}
.acc__item[open] { border-color: var(--brand); box-shadow: var(--sh-1); }
.acc__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 20px; cursor: pointer; list-style: none;
  font-family: var(--f-head); font-size: 1rem; font-weight: 700; color: var(--text-strong);
}
.acc__item summary::-webkit-details-marker { display: none; }
.acc__item summary:hover { color: var(--brand-ink); }
.acc__chev { color: var(--muted); transition: transform .3s var(--ease); }
.acc__item[open] .acc__chev { transform: rotate(180deg); color: var(--brand-ink); }
.acc__body { padding: 0 20px 18px; }
.acc__body p { margin: 0; font-size: .94rem; }
.acc__item[open] .acc__body { animation: accIn .32s var(--ease); }
@keyframes accIn { from { opacity: 0; transform: translateY(-8px); } }

/* L. CTA */
.cta {
  color: #fff; position: relative; overflow: hidden;
  background:
    radial-gradient(900px 420px at 12% 8%, rgba(255, 255, 255, .14), transparent 60%),
    linear-gradient(126deg, var(--brand-700) 0%, #5b21b6 55%, #0e7490 130%);
}
.dark .cta { background:
    radial-gradient(900px 420px at 12% 8%, rgba(255, 255, 255, .07), transparent 60%),
    linear-gradient(126deg, var(--brand-800) 0%, #4c1d95 55%, #155e75 130%); }
.cta h2 { color: #fff; }
/* Scoped to the copy column: the form card next to it stays on a light surface. */
.cta__copy p { color: rgba(255, 255, 255, .84); }
.cta__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 60px); align-items: center; }
.cta__direct { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

.form { padding: 28px; background: var(--surface); border-radius: var(--r-xl); }
.form h3 { font-size: 1.28rem; margin-bottom: 18px; color: var(--text-strong); }
.field { margin-bottom: 14px; }
.field label {
  display: block; margin-bottom: 6px;
  font-family: var(--f-head); font-size: .83rem; font-weight: 700; color: var(--text);
}
.field input, .field select {
  width: 100%; padding: 12px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--border-strong); background: var(--bg); color: var(--text);
  font-family: var(--f-body); font-size: .95rem;
  transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder { color: var(--muted); opacity: .65; }
.field input:focus, .field select:focus { border-color: var(--brand); box-shadow: var(--ring); outline: none; }
.field input.is-invalid { border-color: var(--danger); }
.field__phone { display: flex; align-items: stretch; }
.field__prefix {
  display: grid; place-items: center; padding: 0 12px;
  border: 1px solid var(--border-strong); border-right: 0;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  background: var(--surface-2); color: var(--muted); font-size: .9rem; font-weight: 600;
}
.field__phone input { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
/* hCaptcha widget is a fixed 303px iframe — keep it inside the card on phones. */
.h-captcha { margin: 6px 0 14px; }
.h-captcha iframe { border-radius: var(--r-sm); }

/* Honeypot — off-canvas rather than display:none, which some bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.err { display: block; min-height: 16px; margin-top: 4px; font-size: .76rem; color: var(--danger); }
.form__fine { font-size: .76rem; color: var(--muted); margin: 12px 0 0; text-align: center; }
.form__status { margin: 10px 0 0; font-size: .88rem; font-weight: 600; text-align: center; color: var(--text); }
.form__status.ok { color: var(--ok); }
.form__status.bad { color: var(--danger); }
.btn.is-busy { opacity: .7; pointer-events: none; }

/* M. FOOTER */
.footer { background: var(--bg-tint); border-top: 1px solid var(--border); padding: 60px 0 0; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 30px; }
.footer__brand p { font-size: .9rem; max-width: 32ch; }
.footer__brand .brand { margin-bottom: 14px; }
.footer__col { display: flex; flex-direction: column; gap: 9px; }
.footer__col h4 { margin-bottom: 4px; }
.footer__col a { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: .9rem; transition: color .2s, transform .2s; }
.footer__col a:hover { color: var(--brand-ink); transform: translateX(3px); }
.footer__col a .msym { font-size: 17px; }
.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  margin-top: 46px; padding: 18px 20px; border-top: 1px solid var(--border);
}
.footer__bottom p { margin: 0; font-size: .84rem; }
.footer__legal { display: flex; gap: 10px; }
.footer__legal a { color: var(--muted); }
.footer__legal a:hover { color: var(--brand-ink); }

/* Floating WhatsApp + mobile bar */
.fab-wa {
  position: fixed; right: 18px; bottom: 22px; z-index: 90;
  display: inline-flex; align-items: center; gap: 9px;
  height: 56px; padding: 0 18px; border-radius: var(--r-pill);
  background: var(--wa); color: #06331A;
  font-family: var(--f-head); font-weight: 700; font-size: .92rem;
  box-shadow: 0 10px 26px rgba(37, 211, 102, .42);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.fab-wa .msym { font-size: 26px; }
.fab-wa:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 16px 34px rgba(37, 211, 102, .5); }
.fab-wa::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-pill);
  border: 2px solid var(--wa); animation: ring 2.8s ease-out infinite;
}
@keyframes ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.32); opacity: 0; } }

.mobar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: none; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  transform: translateY(110%); transition: transform .35s var(--ease);
}
.mobar.is-on { transform: translateY(0); }
.mobar__btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 46px; padding: 0 10px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  font-family: var(--f-head); font-size: .88rem; font-weight: 700;
}
.mobar__btn .msym { font-size: 20px; }
.mobar__btn--wa { background: var(--wa); border-color: var(--wa); color: #06331A; }
.mobar__btn--primary { flex: 1.2; background: var(--grad); border-color: transparent; color: #fff; }

/* ---------- 7. MOTION ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); }
.js .reveal.in {
  opacity: 1; transform: none;
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
}
.js .reveal[data-delay="1"].in { transition-delay: .07s; }
.js .reveal[data-delay="2"].in { transition-delay: .14s; }
.js .reveal[data-delay="3"].in { transition-delay: .21s; }
.js .reveal[data-delay="4"].in { transition-delay: .28s; }
.js .reveal[data-delay="5"].in { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .marquee__track, .ticker__track { animation: none; width: auto; }
  .marquee, .ticker { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .aurora__blob { animation: none; }
  .pd-fallback { animation: none; }
  .dash__card { animation: none; }
}

/* ---------- 8. RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .feature { grid-column: span 3; }
  .feature--hero, .feature--wide { grid-column: span 6; }
}

@media (max-width: 980px) {
  :root { --nav-h: 66px; }
  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto; flex-direction: column; gap: 0;
    margin: 0; padding: 12px 16px 20px;
    background: var(--bg); border-bottom: 1px solid var(--border);
    box-shadow: var(--sh-2);
    transform: translateY(-14px); opacity: 0; visibility: hidden;
    transition: transform .3s var(--ease), opacity .3s var(--ease), visibility .3s;
    max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; text-align: left;
  }
  .nav.is-open .nav__links { transform: translateY(0); opacity: 1; visibility: visible; }
  .nav__links a { padding: 14px 8px; font-size: 1rem; border-bottom: 1px solid var(--border); border-radius: 0; }
  .nav__links a::after { display: none; }
  .nav__burger { display: inline-flex; }
  .nav__cta { display: none; }
  /* .nav__links is fixed here, so its auto margin no longer pushes anything —
     the actions have to claim the free space themselves. */
  .nav__actions { margin-left: auto; }

  .hero { padding-top: calc(var(--nav-h) + 34px); }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__copy { text-align: center; }
  .hero__sub { margin-inline: auto; }
  .hero__cta, .trustbar, .hero__rotator { justify-content: center; }
  .hero__art { margin-top: 16px; max-width: 660px; margin-inline: auto; }
  .floatcard--a { left: -4px; }
  .floatcard--b { right: -4px; top: 60%; }
  .floatcard--c { right: -4px; }
  .floatcard--d { left: 2%; }
  .hero__art .trustbar { margin-top: 52px; }

  .drive__grid, .reach, .cta__inner { grid-template-columns: 1fr; }
  .drive__right { order: -1; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .steps::before { display: none; }
}

@media (max-width: 860px) {
  .mobar { display: flex; }
  body { padding-bottom: 74px; }
  /* The sticky bottom bar already carries WhatsApp here, so the floating
     button would only duplicate it and cover content. */
  .fab-wa { display: none; }
}

@media (max-width: 720px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__bottom { flex-direction: column; text-align: center; align-items: center; }
  .langcards { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .form { padding: 20px; }
  .h-captcha { transform: scale(.76); transform-origin: 0 0; height: 62px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .feature, .feature--hero, .feature--wide { grid-column: span 1; }
  .steps { grid-template-columns: 1fr; }
  .plan--single .ticks, .drive__specs { grid-template-columns: 1fr; }
  .chips { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px;
    scrollbar-width: none; -ms-overflow-style: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
  .floatcard { max-width: 210px; padding: 10px 13px; }
  .floatcard--a { left: -2px; top: 8%; }
  .floatcard--b { right: -2px; top: 60%; bottom: auto; }
  .floatcard--c { right: -2px; top: 30%; }
  .floatcard--d { left: -2px; top: 76%; }
  .cta__direct .btn { width: 100%; }
}

@media (max-width: 380px) {
  .brand__logo { height: 32px; }
  .iconbtn__label { display: none; }
  .floatcard { display: none; }
}

@media print {
  .nav, .fab-wa, .mobar, .aurora, .grain, .marquee, .ticker, .stage { display: none !important; }
  body { color: #000; background: #fff; }
}

/* ---------- LEGAL PAGES (privacy / terms / refund) ----------
   Separate pages that reuse the site header and footer. No main.js runs
   there, so the nav is rendered already "stuck" and nothing uses .reveal
   (which stays invisible until main.js adds .in). */
body.legal-page { background: var(--bg); }
.legal { padding: calc(var(--nav-h) + 44px) 0 clamp(56px, 8vw, 96px); }
.legal__head { max-width: 760px; margin-bottom: 26px; }
.legal__head h1 { font-size: clamp(2rem, 4vw, 2.85rem); margin-bottom: .3em; }
.legal__meta { font-size: .9rem; margin: 0; }

.legal__summary {
  max-width: 980px; margin-bottom: 40px; padding: 20px 24px;
  background: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
  border-radius: var(--r-lg);
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 32px;
}
.legal__summary h2 {
  grid-column: 1 / -1; margin: 0 0 4px;
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-ink);
}
.legal__summary p { margin: 0; color: var(--text); font-size: .95rem; }
.legal__summary p[lang="gu"] { font-family: "Noto Sans Gujarati", var(--f-body); line-height: 1.85; }

.legal__layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 56px; align-items: start; }
.legal__toc { position: sticky; top: calc(var(--nav-h) + 16px); font-size: .88rem; }
.legal__toc h2 { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.legal__toc ol { list-style: none; margin: 0; padding: 0 0 0 14px; display: grid; gap: 9px; border-left: 2px solid var(--border); }
.legal__toc a { color: var(--muted); transition: color .2s; }
.legal__toc a:hover { color: var(--brand-ink); }

.legal__body { max-width: 740px; }
.legal__body section { scroll-margin-top: calc(var(--nav-h) + 16px); }
.legal__body h2 { font-size: 1.3rem; letter-spacing: -.02em; margin: 2.1em 0 .6em; }
.legal__body section:first-child h2 { margin-top: 0; }
.legal__body h3 { margin: 1.4em 0 .4em; }
.legal__body p, .legal__body li { color: var(--text); }
/* The site reset strips bullets; legal lists need them to read as lists. */
.legal__body ul { margin: 0 0 1rem; padding-left: 1.25em; list-style: disc; }
.legal__body li { margin-bottom: .45rem; }
.legal__body strong { color: var(--text-strong); }

.legal__note {
  margin: 0 0 1.2rem; padding: 14px 18px;
  background: var(--warn-soft); border-left: 3px solid var(--warn); border-radius: var(--r-sm);
}
.legal__note p { margin: 0; }

.legal__tablewrap { overflow-x: auto; margin: 0 0 1.2rem; border: 1px solid var(--border); border-radius: var(--r-md); }
.legal__table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.legal__table th, .legal__table td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.legal__table th { background: var(--surface-2); color: var(--text-strong); font-weight: 700; }
.legal__table tr:last-child td { border-bottom: 0; }
.legal__table td { color: var(--text); }

.legal__contact { padding: 18px 22px; }
.legal__contact p { margin: 0 0 .35rem; color: var(--text); }
.legal__contact a[href^="tel:"] { white-space: nowrap; }

.legal-page .nav__actions { margin-left: auto; }
.nav__home { gap: 6px; }

@media (max-width: 900px) {
  .legal__layout { grid-template-columns: 1fr; gap: 28px; }
  .legal__toc { position: static; padding: 16px 18px; background: var(--surface-2); border-radius: var(--r-md); }
  .legal__toc ol { border-left: 0; padding-left: 0; gap: 0; }
  /* Full-row links: finger-sized tap targets (~33px) on phones. */
  .legal__toc a { display: block; padding: 8px 0; }
  .legal__summary { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  /* No sticky mobile bar on these pages, so drop the space reserved for it. */
  body.legal-page { padding-bottom: 0; }
}
@media (max-width: 520px) {
  .nav__home .nav__home-label { display: none; }
}