/* ============================================================
   ARAVI AI — shared design system
   Consumed by index.html and every subpage under /3/. Homepage
   keeps page-specific rules (hero, cards, testimonial panel,
   aurora section) inline; anything here is site chrome that must
   render identically everywhere: fonts, tokens, header/nav,
   wordmark, buttons/pills, footer, waitlist dialog, focus ring,
   reveal + reduced-motion utilities.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Imperial+Script&display=swap');

@font-face {
  font-family: "GT America";
  src: url("https://framerusercontent.com/assets/P3OjLjGu6v81n98w2gJu394bcVY.woff2") format("woff2");
  font-display: swap; font-style: normal; font-weight: 400;
}
@font-face {
  font-family: "GT America";
  src: url("https://framerusercontent.com/assets/vj1ePfzjNhdO4y4kOKfTXMmk9Q.woff2") format("woff2");
  font-display: swap; font-style: normal; font-weight: 500;
}
@font-face {
  font-family: "GT America";
  src: url("https://framerusercontent.com/assets/QY4Xq3u8mkj66gnwHTlYuNpS9iE.woff2") format("woff2");
  font-display: swap; font-style: normal; font-weight: 600;
}
@font-face {
  font-family: "GT America";
  src: url("https://framerusercontent.com/assets/b3Rb06QYXyACFVGTXxidvrdGcI.woff2") format("woff2");
  font-display: swap; font-style: normal; font-weight: 300;
}

:root{
  /* ---- neutral / ink scale (verified Duna-derived palette — unchanged) ---- */
  --ink:            #0d0d0d;
  --ink-2:          #17100d;   /* warm off-black — default text, buttons */
  --ink-4:          #222221;   /* headline ink */
  --ink-5:          #292421;   /* pill label ink */
  --ink-6:          #1b0624;   /* card/testimonial ink */
  --muted:          #999999;
  --muted-2:        #4d4846;
  --muted-3:        #898683;
  --muted-4:        #928e8b;
  --muted-5:        #b2afae;
  --white:          #ffffff;
  --cream:          #f7f7f5;
  --cream-2:        #edece7;
  --paper:          #fafafa;
  --off-black:      #17100d;
  --off-white:      #faf9f6;   /* bone page ground */

  /* ---- Figma correction: true near-black for hero + testimonial dusk ---- */
  --near-black:     #0a0a09;
  --near-black-2:   #0f0f0d;

  /* ---- teal system ---- */
  --teal:           #45848d;   /* ring / dot / bar accent */
  --teal-wash-1:    #7faab0;   /* lighter wash — footer/aurora gradient top */
  --teal-wash-2:    #5e9098;   /* deeper wash — footer/aurora gradient base */

  --border-hair:    rgba(78,72,70,.08);
  --border-hair-2:  rgb(237,236,231);
  --mono-font:      "SF Mono", "IBM Plex Mono", "Menlo", ui-monospace, monospace;

  --shadow-ambient: 0 28px 70px rgba(23,16,13,.14);
  --shadow-contact: 0 14px 32px rgba(23,16,13,.08);
  --shadow-ring:    0 0 0 .5px rgba(23,16,13,.08);
  --shadow-card:    var(--shadow-ambient), var(--shadow-contact), var(--shadow-ring);
  --shadow-ring-dark: 0 0 0 .5px rgba(255,255,255,.08);

  --container: 1120px; /* live-measured against Duna: nested pad+cap collapses to
    (viewport-container)/2 once the cap engages, so 1200 rendered ~40px tighter
    than Duna's framing (x=193 vs their x=233 at 1600px viewport) -- 1120 closes it. */
  --text-col: 800px;
  --text-col-narrow: 660px; /* hero / dark-section headline measure, per Figma frame */
  --pad-x: 40px;

  /* ---- radius — 6-token set, nothing ad-hoc ----
     999  = pill   (buttons, badges, chips, avatar rings)
     50%  = circle (dots, ring graphic, social icons)
     4px  = input  (form fields)
     12px = minor  (nested mock panels, inline UI)
     16px = card   (panels, dialogs, prop cards)
     24px = media  (photo/video containers, testimonial panel) */
  --r-pill:   999px;
  --r-circle: 50%;
  --r-input:  4px;
  --r-minor:  12px;
  --r-card:   16px;
  --r-media:  24px;

  --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-20: 20px;
  --sp-24: 24px; --sp-32: 32px; --sp-40: 40px; --sp-48: 48px; --sp-60: 60px;
  --sp-64: 64px; --sp-80: 80px; --sp-96: 96px; --sp-128: 128px;

  --border-media-dark:  rgba(255,255,255,.24);
  --border-card-dark:   rgba(255,255,255,.08);
  --border-media-light: rgb(237,236,231);

  --ease-out: cubic-bezier(.16,1,.3,1);
  --spring:   cubic-bezier(.34,1.4,.64,1);

  color-scheme: light;
}

*{ box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html,body{ margin:0; padding:0; }
body{
  background: var(--off-white);
  color: var(--ink-2);
  font-family: "GT America", "GT America Placeholder", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6,p,figure,ul,ol{ margin:0; padding:0; }
ul,ol{ list-style:none; }
a{ color: inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }

.wrap{ width:100%; max-width: var(--container); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
@media (max-width: 719px){ .wrap{ --pad-x: 20px; } }

/* ---- script accent — the renaissance touch on the Swiss base.
       Used sparingly: wordmark A, H1 initial + one accent letter,
       quote marks. Never a whole word, never body copy. ---- */
.scr{
  font-family: "Imperial Script", "Brush Script MT", cursive;
  font-weight: 400;
  font-style: normal;
  /* inline, not inline-block: an atomic inline-block box creates a line-break
     opportunity at its edges even with no whitespace present, which would
     split "makes" into "m" / "akes" across lines. Plain inline glues it to
     its neighboring text node for wrapping purposes. */
  display: inline;
  white-space: nowrap;
  line-height: 0;
  position: relative;
  /* per-glyph tuning: Imperial Script glyphs carry wide entry flourishes and
     long exit tails whose ink extends past the advance width, so each glyph
     needs its own optical spacing against the sans that follows. Values are
     em-based so they scale with context. Contexts (wordmark/H1) may scale
     --scr-s and --scr-t; the l/r corrections are glyph-intrinsic. */
  font-size: calc(1em * var(--scr-s, 1.22));
  top: var(--scr-t, .05em);
  margin-left: var(--scr-l, 0em);
  margin-right: var(--scr-r, .02em);
}
/* glyph tuning table — measured optically against the Figma reference.
   Imperial Script exit tails carry ink well past the advance width; the
   r-values clear that overflow so the following sans glyph never collides. */
.scr[data-g="A"]{ --scr-r:.22em; --scr-l:.01em; }
.scr[data-g="P"]{ --scr-r:.10em; }
.scr[data-g="M"]{ --scr-r:.24em; }
.scr[data-g="m"]{ --scr-s:1.62; --scr-r:.03em; --scr-t:.02em; }
.scr[data-g="y"]{ --scr-s:1.22; --scr-r:.08em; --scr-t:.02em; }
.scr[data-g="r"]{ --scr-s:1.22; --scr-r:.08em; --scr-t:.02em; }
.scr[data-g="c"]{ --scr-s:1.22; --scr-r:.08em; --scr-t:.02em; }
.scr[data-g="b"]{ --scr-s:1.25; --scr-r:.08em; --scr-t:.02em; }
.scr[data-g="Y"]{ --scr-r:.12em; }
.scr[data-g="W"]{ --scr-r:.10em; }
.scr[data-g="V"]{ --scr-r:.15em; }
.scr[data-g="T"]{ --scr-r:.18em; }
.scr[data-g="S"]{ --scr-r:.15em; }
.scr[data-g="R"]{ --scr-r:.10em; }
.scr[data-g="Q"]{ --scr-r:.08em; }
.scr[data-g="O"]{ --scr-r:.13em; }
.scr[data-g="L"]{ --scr-r:.16em; }
.scr[data-g="I"]{ --scr-r:.12em; }
.scr[data-g="G"]{ --scr-r:.10em; }
.scr[data-g="F"]{ --scr-r:.12em; }

html{ scrollbar-gutter: stable; }

/* ============ PAGE TRANSITIONS ============
   Native cross-document View Transitions (Chrome/Edge 126+, Safari 18+) --
   zero JS. The browser snapshots the outgoing document, swaps in the new
   one, and crossfades/animates the two via these pseudo-elements. The
   header wordmark carries a matching view-transition-name on every page,
   so instead of crossfading with the rest of the page it morphs smoothly
   in place -- it holds still while the world around it changes. Selector
   is scoped to .nav-logo (the header instance only): .wordmark is reused
   for the footer's large mark on every page, and two elements sharing one
   view-transition-name on the same document cancels the whole transition.
   assets/motion.js carries the same-origin click-intercept fallback for
   browsers without cross-document support. */
@view-transition{ navigation: auto; }

::view-transition-group(root){
  animation-duration: .42s;
  animation-timing-function: var(--ease-out);
}
::view-transition-old(root){
  animation: aravi-vt-out .32s var(--ease-out) forwards;
}
::view-transition-new(root){
  animation: aravi-vt-in .42s var(--ease-out) forwards;
}
@keyframes aravi-vt-out{ to{ opacity:0; transform: translateY(10px); } }
@keyframes aravi-vt-in{ from{ opacity:0; transform: translateY(14px); } }

.wordmark.nav-logo{ view-transition-name: wordmark; }

@media (prefers-reduced-motion: reduce){
  @view-transition{ navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){
    animation: none !important;
  }
}

/* JS fallback (non-supporting browsers only -- see assets/motion.js) */
body.page-out{ animation: aravi-page-out .22s var(--ease-out) forwards; }
@keyframes aravi-page-out{ to{ opacity:0; } }
@media (prefers-reduced-motion: reduce){
  body.page-out{ animation:none; }
}

/* ============ PRELOADER ============ */
#preloader{
  position: fixed; inset: 0; z-index: 9999;
  background: var(--near-black);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .5s var(--ease-out), visibility .5s var(--ease-out);
}
#preloader.done{ opacity:0; visibility:hidden; pointer-events:none; }
#preloader .mark{
  width: 34px; height: 34px;
  border-radius: var(--r-circle);
  border: 2px solid rgba(255,255,255,.18);
  border-top-color: #fff;
  animation: spin .7s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ============ REVEAL UTILITIES ============ */
[data-reveal]{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  will-change: transform, opacity;
}
[data-reveal].in{ opacity:1; transform: translateY(0); }
[data-reveal="16"]{ transform: translateY(16px); }
[data-reveal="30"]{ transform: translateY(30px); }
[data-reveal-group] [data-reveal]{ transition-delay: calc(var(--i,0) * 70ms); }

[data-reveal-words] .word{
  display:inline-block;
  opacity: .001;
  filter: blur(2px);
  transform: translateY(4px);
  transition: opacity .5s var(--ease-out), filter .5s var(--ease-out), transform .5s var(--ease-out);
  transition-delay: calc(var(--wi,0) * 28ms);
}
[data-reveal-words].in .word{ opacity:1; filter:blur(0); transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ transform:none; transition: opacity .4s linear; }
  [data-reveal].in{ transform:none; }
  [data-reveal-group] [data-reveal]{ transition-delay:0s; }
  [data-reveal-words] .word{ transform:none; filter:none; transition: opacity .3s linear; transition-delay:0s; }
  [data-reveal-words].in .word{ transform:none; filter:none; }
  *{ scroll-behavior:auto !important; }
  .pill-frosted, .nav-cta, .nav-links a, .btn-primary, .btn-white, .btn-frosted,
  .link-pill, .llm-link, .nav-burger .bar, .prop,
  #mobileMenu, #mobileMenu a, #mobileMenu .mm-cta,
  #preloader .mark, .hero-dust{
    transition-duration:.01ms !important; animation-duration:.01ms !important;
  }
  .pill-frosted:hover, .nav-cta:hover, .nav-cta:active,
  .btn-primary:hover, .btn-primary:active, .btn-white:hover, .btn-white:active,
  .btn-frosted:hover, .btn-frosted:active,
  .link-pill:active, .llm-link:hover, .llm-link:active, .prop:hover,
  #mobileMenu a, #mobileMenu .mm-cta{ transform:none; }
  #preloader .mark{ animation-duration: 1.2s; }
}

/* ============ NAV + WORDMARK ============
   Header sits on the dark hero (white text/icons) and flips to ink
   once .scrolled adds the frosted cover — one `color` toggle drives
   the wordmark, links, burger and CTA-adjacent icons via currentColor. */
header.nav{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  display:flex; justify-content:center;
  padding: 20px 40px;
  color: #fff;
  transition: color .3s var(--ease-out);
}
@media (max-width: 719px){ header.nav{ padding: 16px 20px; } }
.nav-cover{
  position:absolute; inset:0;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity .3s var(--ease-out);
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
header.nav.scrolled{ color: var(--ink-2); }
header.nav.scrolled .nav-cover{ opacity:1; }
.nav-inner{
  position:relative; z-index:1;
  width:100%; max-width: 1160px;
  display:grid; grid-template-columns: 1fr auto 1fr;
  align-items:center; gap: 24px;
}
@media (max-width:809px){ .nav-inner{ grid-template-columns: auto 1fr; gap: 12px; } }
.nav-links{ display:flex; align-items:center; justify-content:center; gap: 4px; }
@media (max-width: 809px){ .nav-links{ display:none; } }

.wordmark{ display:inline-flex; align-items:baseline; height:36px; color: currentColor; font-size:22px; letter-spacing:-.01em; white-space:nowrap; }
.wordmark .scr{ --scr-s:1.55; --scr-t:.09em; --scr-r:.12em; }
.wordmark--lg{ font-size:30px; }
.nav-logo{ justify-self:start; }
@media (max-width:374px){ .wordmark{ font-size:18px; } }

.nav-links a{
  font-size:14px; line-height:24px; color: currentColor; opacity:.82;
  padding: 6px 20px; border-radius: var(--r-pill);
  transition: opacity .2s var(--ease-out), background-color .2s var(--ease-out), color .2s var(--ease-out);
}
@media (hover:hover){ .nav-links > a:hover, .nav-item > a:hover{ opacity:1; background: rgba(25,22,20,.9); color:#fff; } }
.nav-links > a:active, .nav-item > a:active{ background: rgba(25,22,20,.82); color:#fff; transition-duration: .1s; }

/* ============ PRODUCT DROPDOWN — dark glass card, fixed below the bar,
   two columns (Product / Platform). The trigger's own box (not a padding
   hack) provides the hover chain: the panel is absolutely positioned
   inside .nav-item, so moving the pointer from link to panel never leaves
   a hoverable ancestor. A pseudo-element bridges the small visible gap. */
.nav-item{ position:relative; }
.nav-dropdown{
  position:absolute; top:calc(100% + 14px); left:50%;
  transform:translateX(-50%) translateY(-4px);
  width:min(560px, calc(100vw - 40px));
  background: rgba(23,16,13,.88);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-radius: var(--r-card);
  padding: var(--sp-20);
  display:grid; grid-template-columns:1fr 1fr; gap: var(--sp-8);
  box-shadow: var(--shadow-ambient);
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .22s var(--ease-out), transform .22s var(--ease-out), visibility .22s;
}
.nav-dropdown::before{ content:""; position:absolute; left:0; right:0; top:-14px; height:14px; }
@media (hover:hover){
  .nav-item.has-dropdown:hover .nav-dropdown,
  .nav-item.has-dropdown:focus-within .nav-dropdown{
    opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
  }
}
.nav-dropdown-col{ display:flex; flex-direction:column; gap:2px; }
.nav-dropdown-heading{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color: rgba(255,255,255,.5); padding: 8px 12px 6px; }
.nav-dropdown-col a{
  display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius: var(--r-minor);
  opacity:1; color:#fff;
  transition: background-color .2s var(--ease-out);
}
.nav-dropdown-col a .t{ font-size:14.5px; letter-spacing:-.01em; color:#fff; }
.nav-dropdown-col a .d{ font-size:12.5px; line-height:1.4; color: rgba(255,255,255,.58); }
@media (hover:hover){ .nav-dropdown-col a:hover{ background: rgba(255,255,255,.1); } }
.nav-dropdown-col a:focus-visible{ outline-color:#fff; background: rgba(255,255,255,.1); }
@media (max-width:809px){ .nav-dropdown{ display:none; } }
@media (prefers-reduced-motion: reduce){ .nav-dropdown{ transition-duration:.01ms !important; } }

.nav-right{ justify-self:end; display:flex; align-items:center; gap:12px; }
.nav-cta{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; padding: 8px 16px; border-radius: var(--r-pill);
  background: #fff; color: var(--ink-2); font-size:14px; letter-spacing:-.02em;
  box-shadow: var(--shadow-contact), var(--shadow-ring);
  transition: transform .35s var(--spring), background-color .2s var(--ease-out);
}
@media (hover:hover){ .nav-cta:hover{ background:#fff; transform: translateY(-1px); } }
.nav-cta:active{ transform: translateY(0) scale(.96); transition-duration: .12s; }

.nav-burger{ display:none; width:40px; height:40px; border-radius: var(--r-circle); align-items:center; justify-content:center; transition: background-color .2s var(--ease-out); color: currentColor; }
@media (max-width: 809px){ .nav-burger{ display:inline-flex; } }
@media (hover:hover){ .nav-burger:hover{ background: rgba(127,127,127,.14); } }
.nav-burger:active{ background: rgba(127,127,127,.22); }
.nav-burger .bars{ position:relative; width:16px; height:11px; }
.nav-burger .bar{
  position:absolute; left:0; width:16px; height:1.5px; background: currentColor; border-radius:1px;
  transition: transform .3s var(--ease-out), opacity .2s var(--ease-out), top .3s var(--ease-out);
}
.nav-burger .bar:first-child{ top:0; }
.nav-burger .bar:last-child{ top:9.5px; }
.nav-burger[aria-expanded="true"] .bar:first-child{ top:4.75px; transform: rotate(45deg); }
.nav-burger[aria-expanded="true"] .bar:last-child{ top:4.75px; transform: rotate(-45deg); }

/* ============ MOBILE MENU ============ */
#mobileMenu{
  position:fixed; top:0; left:0; right:0; z-index:400;
  padding-top: 76px;
  max-height:100vh; overflow-y:auto;
  background: var(--off-white);
  box-shadow: 0 20px 50px rgba(23,16,13,.12);
  transform: translateY(-8px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility .3s;
}
@media (min-width:810px){ #mobileMenu{ display:none; } }
#mobileMenu.open{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
#mobileMenu ul{ display:flex; flex-direction:column; padding: 8px 20px 20px; }
#mobileMenu li{ border-bottom: 1px solid var(--border-hair-2); }
#mobileMenu li:last-child{ border-bottom:none; }
#mobileMenu a{
  display:flex; align-items:center;
  padding: var(--sp-16) var(--sp-4); font-size:20px; letter-spacing:-.02em; color: var(--ink-2);
  opacity:0; transform: translateX(-10px);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out), color .2s var(--ease-out);
}
#mobileMenu.open a{ opacity:1; transform:translateX(0); }
#mobileMenu li:nth-child(1) a{ transition-delay:.04s; }
#mobileMenu li:nth-child(2) a{ transition-delay:.08s; }
#mobileMenu li:nth-child(3) a{ transition-delay:.12s; }
#mobileMenu li:nth-child(4) a{ transition-delay:.16s; }
@media (hover:hover){ #mobileMenu a:hover{ color: var(--teal); } }
#mobileMenu .mm-cta{
  margin: var(--sp-16) var(--sp-20) var(--sp-24); display:flex; align-items:center; justify-content:center;
  height:48px; border-radius: var(--r-pill); background: var(--ink-2); color:#fff; font-size:16px; letter-spacing:-.02em;
  opacity:0; transform: translateX(-10px);
  transition: opacity .35s var(--ease-out) .2s, transform .35s var(--ease-out) .2s, background-color .2s var(--ease-out);
}
#mobileMenu.open .mm-cta{ opacity:1; transform:translateX(0); }
@media (hover:hover){ #mobileMenu .mm-cta:hover{ background:#0d0906; } }
#mobileMenu .mm-cta:active{ transform: scale(.97); }
body.menu-open{ overflow:hidden; }
#mobileMenuScrim{
  position:fixed; inset:0; z-index:399;
  background: rgba(23,16,13,.28);
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .3s var(--ease-out), visibility .3s;
}
#mobileMenuScrim.open{ opacity:1; visibility:visible; pointer-events:auto; }
@media (prefers-reduced-motion: reduce){ #mobileMenuScrim{ transition-duration:.01ms !important; } }

/* ============ SHARED BUTTONS / PILLS ============ */
/* --mx/--my: magnetic-hover offset (assets/motion.js, desktop pointer only).
   Composited into the same transform as the existing lift/press states via
   a leading translate() so the magnetic pull never fights or overrides
   them -- it just rides along underneath. Defaults to 0px when JS is
   absent or the effect is gated off (touch, reduced motion). */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:44px; padding:12px 24px; border-radius: var(--r-pill);
  background: rgb(22,15,12); color:#fff; font-size:18px; letter-spacing:-.03em;
  transform: translate(var(--mx,0px), var(--my,0px));
  transition: transform .4s var(--spring), background-color .2s var(--ease-out);
}
@media (hover:hover){ .btn-primary:hover{ background:#0d0906; transform: translate(var(--mx,0px), var(--my,0px)) translateY(-2px) scale(1.02); } }
.btn-primary:active{ transform: translate(var(--mx,0px), var(--my,0px)) translateY(0) scale(.98); }

.btn-white{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:44px; padding:12px 24px; border-radius: var(--r-pill);
  background: var(--off-white); color: var(--ink);
  font-size:18px; letter-spacing:-.03em;
  transition: transform .4s var(--spring);
}
@media (hover:hover){ .btn-white:hover{ transform: translateY(-2px) scale(1.02); } }
.btn-white:active{ transform: translateY(0) scale(.98); transition-duration: .15s; }

/* frosted glass pill — hero CTA, sits directly on the dusked photo */
.btn-frosted{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:46px; padding:12px 26px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color:#fff; font-size:16px; letter-spacing:-.02em;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 12px 30px rgba(0,0,0,.25);
  transform: translate(var(--mx,0px), var(--my,0px));
  transition: transform .4s var(--spring), background-color .25s var(--ease-out);
}
@media (hover:hover){ .btn-frosted:hover{ background: rgba(255,255,255,.2); transform: translate(var(--mx,0px), var(--my,0px)) translateY(-2px); } }
.btn-frosted:active{ background: rgba(255,255,255,.24); transform: translate(var(--mx,0px), var(--my,0px)) translateY(0) scale(.98); transition-duration:.12s; }

.eyebrow-pill{
  display:inline-flex; align-items:center; height:24px; padding:0 14px; border-radius: var(--r-pill);
  background: var(--cream); border:1px solid rgba(78,72,70,.1);
  font-size:14px; line-height:24px; color: var(--ink-5);
  margin-bottom:24px;
}

/* frosted pill — hero eyebrow, sits on the dark dusked photo */
.pill-frosted{
  display:inline-flex; align-items:center; height:34px; padding:0 20px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color:#fff; font-size:13px; letter-spacing:-.01em;
  box-shadow: 0 .6px 1.8px -.67px rgba(0,0,0,.12), 0 10px 30px -2px rgba(0,0,0,.2);
  transition: transform .3s var(--ease-out), background-color .2s var(--ease-out);
}
@media (hover:hover){ .pill-frosted:hover{ transform: translateY(-2px); background: rgba(255,255,255,.12); } }

.link-pill{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  height:40px; padding:9px 20px; border-radius: var(--r-pill); border:1px solid #ccc;
  font-size:15px; transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
@media (hover:hover){ .link-pill:hover{ background: var(--cream); border-color:#999; } }
.link-pill:active{ background: var(--cream-2); border-color:#999; transform: scale(.97); transition-duration: .12s; }

/* ============ FOOTER ============ */
footer.site-footer{
  position:relative; overflow:hidden;
  color:#fff;
  padding: 96px 40px 40px;
  /* The top holds flat at the same .94 silver-teal the homepage final CTA
     ends on -- both sides of that seam need zero slope in the SAME color or
     the eye reads a Mach-band crease at the boundary even when the pixel
     values match. */
  background:
    linear-gradient(180deg, rgb(154,181,184) 0%, rgba(154,181,184,.94) 7%, rgba(110,153,159,.72) 34%, rgba(72,124,131,.58) 62%, rgba(48,96,104,.82) 100%),
    url("assets/footer-mountains.jpg") center 68% / cover no-repeat,
    var(--teal-wash-2);
}
@media (max-width: 719px){ footer.site-footer{ padding:64px 20px 32px; } }
.footer-inner{ max-width:1200px; margin:0 auto; position:relative; z-index:1; } /* above the grain layer */

.footer-top{
  display:flex; align-items:flex-end; justify-content:space-between; gap:40px;
  margin-bottom:80px;
}
@media (max-width:809px){ .footer-top{ flex-direction:column; align-items:flex-start; gap:32px; } }
.footer-mark{ display:flex; flex-direction:column; gap:16px; max-width:560px; }
.footer-mark p{
  font-family:"GT America","GT America Placeholder",sans-serif;
  font-weight:400; font-size:20px; line-height:1.2em; letter-spacing:-.02em;
  color:#fff; opacity:.92;
}
@media (max-width:719px){ .footer-mark p{ font-size:17px; } }
.footer-socials{ display:flex; align-items:center; gap:10px; flex:none; }
.social-link{
  width:40px; height:40px; border-radius: var(--r-pill); flex:none;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.16);
  transition: background-color .2s var(--ease-out), transform .2s var(--ease-out);
}
@media (hover:hover){ .social-link:hover{ background: rgba(255,255,255,.26); transform: translateY(-1px) scale(1.06); } }
.social-link:active{ background: rgba(255,255,255,.3); transform: translateY(0) scale(.94); transition-duration: .1s; }
.social-link svg{ width:17px; height:17px; }

.footer-divider{ height:1px; background: rgba(255,255,255,.28); border-radius: var(--r-pill); margin: 0 0 var(--sp-60); }
.footer-cols{ display:grid; grid-template-columns: repeat(5,1fr); gap:32px; margin-bottom:64px; }
@media (max-width:1199px) and (min-width:720px){ .footer-cols{ grid-template-columns: repeat(3,1fr); gap:40px 32px; } }
@media (max-width:719px){ .footer-cols{ grid-template-columns: repeat(2,1fr); gap:32px 16px; } }
.footer-col h6{ font-size:13px; color:#fff; margin-bottom:18px; opacity:.62; font-weight:400; letter-spacing:.06em; text-transform:uppercase; }
.footer-col ul{ display:flex; flex-direction:column; gap: var(--sp-12); }
.footer-col a{
  position:relative; display:inline-block;
  font-size:15px; color:#fff; opacity:.88;
  transition: opacity .2s var(--ease-out);
}
.footer-col a::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background: currentColor; transform: scaleX(0); transform-origin:left;
  transition: transform .25s var(--ease-out);
}
@media (hover:hover){
  .footer-col a:hover{ opacity:1; }
  .footer-col a:hover::after{ transform: scaleX(1); }
}
.footer-col a:active{ opacity:.75; }

.footer-bottom{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding-top:32px; border-top:1px solid rgba(255,255,255,.22); }
.footer-legal{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.footer-pill{ display:inline-flex; align-items:center; height:32px; padding:0 16px; border-radius: var(--r-pill); font-size:14px; color: rgba(255,255,255,.78); }
.footer-pill a{ color: rgba(255,255,255,.9); }
.footer-llms{ display:flex; align-items:center; gap:10px; }
.footer-llms span{ font-size:14px; color:#fff; opacity:.78; }
.llm-link{ width:40px; height:40px; border-radius: var(--r-pill); display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.16); transition: background-color .2s var(--ease-out), transform .2s var(--ease-out); }
@media (hover:hover){ .llm-link:hover{ background: rgba(255,255,255,.26); transform: translateY(-1px) scale(1.06); } }
.llm-link:active{ background: rgba(255,255,255,.3); transform: translateY(0) scale(.94); transition-duration: .1s; }
.llm-link svg{ width:18px; height:18px; }
.footer-copy{ display:flex; align-items:center; justify-content:space-between; margin-top:24px; padding-top:24px; border-top:1px solid rgba(255,255,255,.22); font-size:14px; color: rgba(255,255,255,.72); flex-wrap:wrap; gap:12px; }
.footer-copy a{ color: rgba(255,255,255,.88); }
.footer-copy-left{ display:flex; align-items:center; gap: var(--sp-12); flex-wrap:wrap; }
.footer-copy .made-in-india{
  display:inline-flex; align-items:center; gap:6px;
  padding-left:14px; border-left:1px solid rgba(255,255,255,.28);
  color: rgba(255,255,255,.72);
}
.footer-pill.is-link{ transition: background-color .2s var(--ease-out), color .2s var(--ease-out); }
@media (hover:hover){ .footer-pill.is-link:hover{ background: rgba(255,255,255,.14); color:#fff; } }
.footer-pill.is-link:active{ background: rgba(255,255,255,.2); transition-duration:.1s; }

/* ============ FOCUS-VISIBLE — one ring system site-wide ============ */
a, button{ outline: none; }
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--ink-2);
  outline-offset: 3px;
  border-radius: var(--r-input);
}
.nav-cta:focus-visible, .nav-burger:focus-visible,
.btn-primary:focus-visible, .link-pill:focus-visible,
.eyebrow-pill:focus-visible{ outline-offset: 2px; }
.prop:focus-within{ box-shadow: var(--shadow-ambient), var(--shadow-contact), 0 0 0 2px var(--ink-2); }
.btn-white:focus-visible, .btn-frosted:focus-visible, .pill-frosted:focus-visible,
.site-footer a:focus-visible, .llm-link:focus-visible, .social-link:focus-visible{ outline-color: #fff; }
header.nav:not(.scrolled) .nav-links a:focus-visible,
header.nav:not(.scrolled) .nav-cta:focus-visible,
header.nav:not(.scrolled) .nav-burger:focus-visible,
header.nav:not(.scrolled) .wordmark:focus-visible{ outline-color: #fff; }
header.nav.scrolled .nav-cta:focus-visible,
header.nav.scrolled .nav-burger:focus-visible{ outline-color: var(--ink-2); }
#mobileMenu a:focus-visible, #mobileMenu .mm-cta:focus-visible{ outline-color: var(--ink-2); outline-offset: -2px; }

/* ============ WAITLIST DIALOG (shared — every "Join the waitlist" CTA site-wide) ============ */
#waitlistScrim{
  position:fixed; inset:0; z-index:600;
  background: rgba(23,16,13,.4);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .3s var(--ease-out), visibility .3s;
  display:flex; align-items:center; justify-content:center;
  padding: 24px;
}
#waitlistScrim.open{ opacity:1; visibility:visible; pointer-events:auto; }
.waitlist-dialog{
  width:100%; max-width:440px;
  background: var(--off-white);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: var(--sp-32);
  display:flex; flex-direction:column; gap: var(--sp-20);
  transform: translateY(12px) scale(.98);
  opacity:0;
  transition: transform .35s var(--spring), opacity .3s var(--ease-out);
}
#waitlistScrim.open .waitlist-dialog{ transform:translateY(0) scale(1); opacity:1; }
.waitlist-head{ display:flex; align-items:flex-start; justify-content:space-between; gap: var(--sp-16); }
.waitlist-head h3{
  font-family:"GT America","GT America Placeholder",sans-serif;
  font-weight:400; font-size:26px; letter-spacing:-.03em; line-height:1.15em; color: var(--ink-2);
}
.waitlist-close{
  width:32px; height:32px; border-radius: var(--r-circle); flex:none;
  display:flex; align-items:center; justify-content:center;
  color: var(--muted-2);
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
@media (hover:hover){ .waitlist-close:hover{ background: rgba(0,0,0,.06); color: var(--ink-2); } }
.waitlist-close:active{ background: rgba(0,0,0,.1); }
.waitlist-close svg{ width:16px; height:16px; }
.waitlist-dialog p.waitlist-sub{ font-size:15px; line-height:1.5; color: var(--muted-2); margin-top:-8px; }
.waitlist-form{ display:flex; flex-direction:column; gap: var(--sp-16); }
.waitlist-field{ display:flex; flex-direction:column; gap: var(--sp-8); }
.waitlist-field label{ font-size:13px; color: var(--muted-2); }
.waitlist-field input{
  height:46px; padding:0 var(--sp-16); border-radius: var(--r-input);
  border:1px solid rgba(78,72,70,.18); background:#fff;
  font-family:inherit; font-size:15px; color: var(--ink-2);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.waitlist-field input::placeholder{ color: var(--muted-4); }
@media (hover:hover){ .waitlist-field input:hover{ border-color: rgba(78,72,70,.32); } }
.waitlist-field input:focus-visible{
  outline:none; border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(69,132,141,.18);
}
.waitlist-field input:invalid:not(:placeholder-shown){ border-color:#a44634; }
.waitlist-submit{
  height:46px; margin-top:4px; border-radius: var(--r-pill);
  background: var(--ink-2); color:#fff; font-size:15px; letter-spacing:-.02em;
  display:flex; align-items:center; justify-content:center;
  transition: transform .35s var(--spring), background-color .2s var(--ease-out);
}
@media (hover:hover){ .waitlist-submit:hover{ background:#0d0906; transform: translateY(-1px); } }
.waitlist-submit:active{ background:#0d0906; transform: translateY(0) scale(.98); transition-duration:.12s; }
.waitlist-submit:focus-visible{ outline: 2px solid var(--ink-2); outline-offset: 3px; }
.waitlist-note{ font-size:13px; color: var(--muted-4); }
.waitlist-success{ display:none; flex-direction:column; align-items:flex-start; gap:8px; }
.waitlist-success.show{ display:flex; }
.waitlist-success .check{
  width:40px; height:40px; border-radius: var(--r-circle); background: rgba(47,109,74,.12); color:#2f6d4a;
  display:flex; align-items:center; justify-content:center; margin-bottom:4px;
}
.waitlist-success .check svg{ width:20px; height:20px; }
.waitlist-success h3{
  font-family:"GT America","GT America Placeholder",sans-serif;
  font-weight:400; font-size:22px; letter-spacing:-.02em; color: var(--ink-2);
}
.waitlist-success p{ font-size:15px; line-height:1.5; color: var(--muted-2); }
.waitlist-form.hide{ display:none; }
@media (prefers-reduced-motion: reduce){
  #waitlistScrim, .waitlist-dialog, .waitlist-close, .waitlist-field input, .waitlist-submit{
    transition-duration:.01ms !important;
  }
  .waitlist-dialog{ transform:none; }
  #waitlistScrim.open .waitlist-dialog{ transform:none; }
  .waitlist-submit:hover, .waitlist-submit:active{ transform:none; }
}

/* ============ SECTION SHELL (shared page rhythm) ============ */
.section{ padding: 160px 40px 144px; }
@media (max-width:719px){ .section{ padding: 80px 20px; } }
.section-inner{ max-width: var(--container); margin:0 auto; }
/* every section-to-section transition is seamed by a 1px hairline rather than
   left as a silent void -- Duna never lets a large gap pass without a seam
   marking the handoff. Scoped to adjacent .section elements only: sections
   with their own background (dark hero-style bands, the photo panel) already
   read as a deliberate full break and take none. */
.section + .section{ border-top:1px solid var(--border-hair-2); }

/* ============ MOTION MODULE (assets/motion.js) ============
   Opt-in scroll motion for subpages, same visual language as the
   homepage's [data-reveal] + pixel-line system above, namespaced
   under data-m so it never collides with the homepage's own inline
   reveal implementation. scrub-settle / scrub-drift are GSAP-driven
   (transform only) and carry no CSS of their own beyond will-change. */
[data-m="reveal"]{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  will-change: transform, opacity;
}
[data-m="reveal"].in{ opacity:1; transform:none; }

[data-m="scrub-settle"], [data-m="scrub-drift"]{ will-change: transform; }

[data-m="pixel-reveal"] .m-word{ display:inline-block; }
[data-m="pixel-reveal"] .m-ch{
  display:inline-block;
  opacity:0; transform:scale(.4); filter:blur(2px);
  transition: opacity .45s var(--ease-out), transform .45s var(--spring), filter .45s var(--ease-out);
}
[data-m="pixel-reveal"] .m-ch.on{ opacity:1; transform:scale(1); filter:blur(0); }

@media (prefers-reduced-motion: reduce){
  [data-m="reveal"]{ transform:none; transition: opacity .4s linear; }
  [data-m="reveal"].in{ transform:none; }
  [data-m="pixel-reveal"] .m-ch{ transition: opacity .3s linear; transform:none!important; filter:none!important; }
}

/* ============ FILM GRAIN (2026-07-10) ============
   A pinch of static grain on every photographic surface, sitewide. SVG
   turbulence tile; overlay blend keeps it out of the deep blacks and off
   the UI mocks/logo swatches (those are deliberately excluded). The hero
   video is excluded via :has() -- its grain is baked into the footage. */
.post-card-figure::after, .subhero-bg::after, .testimonial-panel::after,
.hero-bg:has(> img)::after, .pillar-hero-bg::after, .pillar-cta-bg::after,
.page-hero-bg::after, .phero-bg::after, .spec-hover-card::after,
.ai-bg::after, .man-figure-media::after, .final-cta::after,
footer.site-footer::after{
  content:""; position:absolute; inset:0; z-index:0;
  pointer-events:none;
  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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
  opacity:.06; mix-blend-mode:overlay;
}