/* ============================================================================
   EVARA — flagship design system  ·  "AI dawn"
   Earthy dusk dreamscapes (the lavender→peach brand gradient as a natural sky)
   + frosted glassmorphism UI. Light, warm, premium, futuristic.
   Display: Fraunces · Body: Plus Jakarta Sans · Data: JetBrains Mono
   ========================================================================== */

/* ---- Tokens ---------------------------------------------------------------- */
:root{
  /* light dusk-earth surfaces */
  --sand:      #EDE4DA;   /* warm light base */
  --blush:     #F3E7E1;   /* soft blush light */
  --porcelain: #FBF6F1;   /* raised light surface */
  --mist:      #E7E0E4;   /* cool lilac-grey light */

  /* dusk darks (warm, purple-tinted — never sterile black) */
  --dusk:      #2A2130;
  --dusk-2:    #201826;
  --night:     #16121C;
  --hair-d: rgba(246,239,234,.16);
  --hair-d-soft: rgba(246,239,234,.09);
  --hair-l: rgba(40,30,46,.14);
  --hair-l-soft: rgba(40,30,46,.07);

  /* accents (brand) */
  --lavender:    #B09BE9;
  --lavender-hi: #C9B6FF;
  --lavender-deep:#7E66C4;
  --peach:       #FFB88A;
  --peach-hi:    #FFCBA6;
  --peach-deep:  #F0955E;
  --glow:        #F6C7D2;   /* the orb's soft pink glow */
  --chrome:      #BFC3CE;   /* metallic sphere accent */

  /* text */
  --ink:              #251E2B;
  --tx-on-light:      #251E2B;
  --tx-on-light-soft: rgba(37,30,43,.66);
  --tx-on-light-mute: rgba(37,30,43,.44);
  --tx-on-dark:       #F7F0EB;
  --tx-on-dark-soft:  rgba(247,240,235,.74);
  --tx-on-dark-mute:  rgba(247,240,235,.48);

  /* glass */
  --glass:        rgba(255,255,255,.16);
  --glass-hi:     rgba(255,255,255,.30);
  --glass-brd:    rgba(255,255,255,.34);
  --glass-dark:   rgba(28,22,36,.44);
  --glass-dark-brd: rgba(255,255,255,.16);
  --glass-blur:   blur(16px) saturate(1.25);

  /* type */
  --f-display:'Fraunces', Georgia, serif;
  --f-body:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --f-mono:'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* rhythm */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --sect: clamp(76px, 11vw, 150px);
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  /* motion — Emil-style strong curves */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io:  cubic-bezier(0.77, 0, 0.175, 1);

  --grad: linear-gradient(118deg, var(--lavender) 0%, var(--glow) 48%, var(--peach) 100%);
  --grad-warm: linear-gradient(118deg, var(--lavender), var(--peach));
  --sky: linear-gradient(180deg, #b9a7d8 0%, #d9b8c6 38%, #f0c6ab 70%, #f6e2cf 100%);

  /* back-compat aliases for older inline references */
  --cream:#F7F0EB; --void:#16121C; --aubergine:#201826; --aubergine-2:#251C30;
  --hairline-d:rgba(246,239,234,.16); --hairline-d-soft:rgba(246,239,234,.09);
  --hairline-l:rgba(40,30,46,.14);
}

/* ---- Reset ----------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; overflow-x:clip; }
body{
  font-family:var(--f-body);
  background:var(--sand);
  color:var(--tx-on-light);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,textarea,select{ font-family:inherit; font-size:inherit; }
::selection{ background:var(--lavender); color:#fff; }
:focus-visible{ outline:2px solid var(--lavender-deep); outline-offset:3px; border-radius:6px; }

html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

/* ---- Layout ---------------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-wide{ max-width:1360px; }
[id]{ scroll-margin-top:96px; }
section{ position:relative; }
.pad-y{ padding-block:var(--sect); }

/* section surfaces */
.sect-light{ background:var(--sand); color:var(--tx-on-light); }
.sect-blush{ background:var(--blush); color:var(--tx-on-light); }
.sect-porcelain{ background:var(--porcelain); color:var(--tx-on-light); }
.sect-mist{ background:var(--mist); color:var(--tx-on-light); }
.sect-dusk{ background:var(--dusk); color:var(--tx-on-dark); }
.sect-night{ background:var(--night); color:var(--tx-on-dark); }
/* back-compat aliases (existing HTML) */
.sect-cream{ background:var(--sand); color:var(--tx-on-light); }
.sect-dark{ background:var(--dusk); color:var(--tx-on-dark); }
.sect-ink{ background:var(--night); color:var(--tx-on-dark); }
.sect-aubergine{ background:var(--dusk-2); color:var(--tx-on-dark); }

/* full-bleed dreamscape section */
.sect-scene{ color:var(--tx-on-dark); background:#c9b6c4; overflow:hidden; }
.sect-scene__bg{ position:absolute; inset:0; z-index:0; }
.sect-scene__bg img{ width:100%; height:100%; object-fit:cover; }
.sect-scene__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,16,26,.28), rgba(20,16,26,.12) 40%, rgba(20,16,26,.42)); }
.sect-scene > .wrap{ position:relative; z-index:1; }

/* soft gradient aura blobs (decorative, behind content) */
.aura{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; pointer-events:none; z-index:0; }
.aura--lav{ background:radial-gradient(circle, var(--lavender), transparent 68%); }
.aura--peach{ background:radial-gradient(circle, var(--peach), transparent 68%); }
.aura--glow{ background:radial-gradient(circle, var(--glow), transparent 66%); }

/* ---- Typography ------------------------------------------------------------ */
.display{
  font-family:var(--f-display); font-weight:340; font-optical-sizing:auto;
  font-variation-settings:'opsz' 144,'SOFT' 0,'WONK' 0;
  line-height:1.02; letter-spacing:-.02em; text-wrap:balance;
  font-size:clamp(2.8rem, 6.6vw, 5.6rem);
}
.display-sm{
  font-family:var(--f-display); font-weight:360; font-optical-sizing:auto;
  line-height:1.05; letter-spacing:-.02em; text-wrap:balance;
  font-size:clamp(2rem, 4.4vw, 3.3rem);
}
.h2{
  font-family:var(--f-display); font-weight:380; line-height:1.07;
  letter-spacing:-.02em; text-wrap:balance; font-size:clamp(1.9rem, 3.8vw, 3rem);
}
.h3{ font-family:var(--f-body); font-weight:600; line-height:1.2; letter-spacing:-.01em; font-size:clamp(1.15rem,1.8vw,1.45rem); }
em,.em{ font-family:var(--f-display); font-style:italic; font-weight:360; font-variation-settings:'opsz' 90,'SOFT' 40,'WONK' 1; }
.lead{ font-size:clamp(1.08rem,1.5vw,1.3rem); line-height:1.58; color:var(--tx-on-light-soft); max-width:60ch; text-wrap:pretty; }
.sect-dusk .lead,.sect-night .lead,.sect-aubergine .lead,.sect-scene .lead,.sect-dark .sect .lead{ color:var(--tx-on-dark-soft); }
.sect-dusk .lead,.sect-night .lead,.sect-aubergine .lead,.sect-dark .lead,.sect-scene .lead{ color:var(--tx-on-dark-soft); }
.body-lg{ font-size:1.12rem; line-height:1.62; }

.eyebrow{
  font-family:var(--f-mono); font-weight:500; font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; display:inline-flex; align-items:center; gap:.7em; color:var(--lavender-deep);
}
.eyebrow::before{ content:""; width:20px; height:1px; background:currentColor; opacity:.7; }
.eyebrow.no-tick::before{ display:none; }
.sect-dusk .eyebrow,.sect-night .eyebrow,.sect-aubergine .eyebrow,.sect-dark .eyebrow,.sect-scene .eyebrow{ color:var(--lavender-hi); }

.stat-num{ font-family:var(--f-display); font-weight:340; font-size:clamp(2.5rem,5vw,4rem); line-height:.95; letter-spacing:-.03em; }
.mono{ font-family:var(--f-mono); }

/* ---- Glass ----------------------------------------------------------------- */
.glass{
  background:var(--glass); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd); border-radius:var(--radius-lg);
  box-shadow:0 20px 50px -24px rgba(40,26,50,.42), inset 0 1px 0 rgba(255,255,255,.4);
}
.glass--dark{
  background:var(--glass-dark); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-dark-brd); color:var(--tx-on-dark);
  box-shadow:0 24px 60px -26px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.14);
}
.glass--solid{ background:rgba(251,246,241,.78); }

/* ---- Buttons (Emil craft: scale-on-press, strong ease) --------------------- */
.btn{
  --bg:var(--ink); --fg:#fff;
  display:inline-flex; align-items:center; gap:.55em; padding:15px 26px; border-radius:999px;
  background:var(--bg); color:var(--fg); font-weight:600; font-size:.98rem; letter-spacing:-.01em;
  position:relative; isolation:isolate; will-change:transform;
  transition:transform 200ms var(--ease-out), box-shadow 300ms var(--ease-out), background 300ms;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:scale(.97); }
.btn .arw{ transition:transform 300ms var(--ease-out); }
.btn:hover .arw{ transform:translateX(4px); }
.btn--primary{ --bg:var(--ink); --fg:#fff; box-shadow:0 8px 24px -10px rgba(37,30,43,.5); }
.btn--accent{ --bg:var(--ink); --fg:#fff; background:var(--ink); position:relative; }
.btn--accent{ --bg:transparent; color:var(--ink);
  background:linear-gradient(115deg, #A47CF2 0%, #F58FB8 46%, #FF965A 100%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 12px 32px -12px rgba(240,130,95,.62); }
.btn--accent:hover{ box-shadow:0 16px 38px -12px rgba(176,120,220,.7); }
.btn--ghost{ --bg:transparent; color:var(--ink); border:1px solid var(--hair-l); backdrop-filter:blur(8px); }
.sect-dusk .btn--ghost,.sect-night .btn--ghost,.sect-aubergine .btn--ghost,.sect-dark .btn--ghost,.sect-scene .btn--ghost{ color:var(--tx-on-dark); border-color:var(--hair-d); }
.btn--ghost:hover{ border-color:var(--lavender); }
.btn--lg{ padding:18px 32px; font-size:1.05rem; }

.link-arrow{ display:inline-flex; align-items:center; gap:.4em; font-weight:600; font-size:.96rem; border-bottom:1px solid transparent; transition:border-color .3s, gap .3s var(--ease-out); }
.link-arrow:hover{ border-color:currentColor; gap:.7em; }

/* ---- Chips ----------------------------------------------------------------- */
.chip{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.02em; padding:6px 13px; border-radius:999px;
  border:1px solid var(--hair-l); color:var(--tx-on-light-soft); display:inline-flex; align-items:center; gap:.5em; white-space:nowrap;
  background:rgba(255,255,255,.4); backdrop-filter:blur(8px); }
.sect-dusk .chip,.sect-night .chip,.sect-aubergine .chip,.sect-dark .chip,.sect-scene .chip{ border-color:var(--hair-d); color:var(--tx-on-dark-soft); background:rgba(255,255,255,.06); }
.chip .dot{ width:6px; height:6px; border-radius:50%; background:var(--peach-deep); }
.chip .dot.lav{ background:var(--lavender-deep); }

/* ---- Nav ------------------------------------------------------------------- */
.nav{ position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gutter); transition:background .5s var(--ease-out), padding .5s var(--ease-out), border-color .5s; border-bottom:1px solid transparent; }
.nav.scrolled{ background:linear-gradient(180deg, rgba(22,15,28,.86) 0%, rgba(16,11,22,.92) 100%); backdrop-filter:blur(8px) saturate(1.25); -webkit-backdrop-filter:blur(8px) saturate(1.25); border-bottom:1px solid var(--hair-d-soft); padding-block:12px; }
.nav__logo{ height:26px; }
.nav__logo svg,.nav__logo img{ height:100%; width:auto; }
.nav__links{ display:flex; align-items:center; gap:4px; }
.nav__link{ padding:9px 15px; border-radius:999px; font-size:.92rem; font-weight:500; color:var(--tx-on-light-soft); transition:color .3s, background .3s; }
.nav__link:hover{ color:var(--ink); background:rgba(40,30,46,.05); }
.nav__right{ display:flex; align-items:center; gap:14px; }
/* nav starts over the light dreamscape hero → dark text; when scrolled stays dark on light */
.nav__has-menu{ position:relative; }
.nav__menu{ position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(8px); width:340px; padding:10px;
  background:rgba(251,246,241,.86); backdrop-filter:blur(28px) saturate(1.4); border:1px solid var(--glass-brd); border-radius:20px;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .35s var(--ease-out), transform .35s var(--ease-out), visibility .35s;
  box-shadow:0 30px 60px -24px rgba(40,26,50,.4); }
.nav__has-menu:hover .nav__menu{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.nav__menu-item{ display:flex; gap:13px; align-items:flex-start; padding:13px 14px; border-radius:14px; transition:background .3s; }
.nav__menu-item:hover{ background:rgba(40,30,46,.05); }
.nav__menu-ico{ flex:0 0 34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--grad-warm); color:#fff; }
.nav__menu-ico svg{ width:18px; height:18px; }
.nav__menu-t{ font-weight:600; font-size:.94rem; color:var(--ink); }
.nav__menu-d{ font-size:.8rem; color:var(--tx-on-light-mute); line-height:1.4; margin-top:2px; }
.nav__burger{ display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--hair-l); align-items:center; justify-content:center; background:rgba(255,255,255,.4); }
.nav__burger span,.nav__burger span::before,.nav__burger span::after{ display:block; width:18px; height:1.7px; background:var(--ink); transition:.35s var(--ease-out); }
.nav__burger span{ position:relative; }
.nav__burger span::before,.nav__burger span::after{ content:""; position:absolute; left:0; }
.nav__burger span::before{ top:-6px; } .nav__burger span::after{ top:6px; }
body.menu-open .nav__burger span{ background:transparent; }
body.menu-open .nav__burger span::before{ top:0; transform:rotate(45deg); }
body.menu-open .nav__burger span::after{ top:0; transform:rotate(-45deg); }

/* mobile slide-out menu — right-side drawer, dropdown-style cream glass */
.mm-scrim{ position:fixed; inset:0; z-index:98; background:rgba(30,20,38,.34);
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease-io), visibility .5s;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
body.menu-open .mm-scrim{ opacity:1; visibility:visible; }
.mobile-menu{ position:fixed; top:0; right:0; bottom:0; z-index:99; width:min(360px,86vw);
  background:rgba(251,246,241,.94); backdrop-filter:blur(28px) saturate(1.4); -webkit-backdrop-filter:blur(28px) saturate(1.4);
  border-left:1px solid var(--glass-brd); box-shadow:-42px 0 84px -32px rgba(40,26,50,.5);
  padding:92px 30px 34px; display:flex; flex-direction:column; gap:0;
  transform:translateX(100%); transition:transform .5s var(--ease-io); overflow-y:auto; }
body.menu-open .mobile-menu{ transform:translateX(0); }
.mm__group{ display:flex; flex-direction:column; }
.mm__group + .mm__group{ margin-top:22px; }
.mm__h{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--lavender-deep); margin:0 0 3px; }
.mm__group a{ display:block; font-family:var(--f-body); font-size:1.15rem; font-weight:500; letter-spacing:-.01em;
  color:var(--ink); padding:12px 2px; border-bottom:1px solid var(--hair-l-soft); transition:color .25s, padding-left .25s; }
.mm__group a:last-child{ border-bottom:none; }
.mm__group a:hover{ color:var(--lavender-deep); padding-left:4px; }
.mm__cta{ display:flex; width:100%; justify-content:center; margin-top:30px; font-size:1rem; }

/* burger open-state (X) — force dark X + transparent middle over scrolled/over-dark rules + cream menu */
body.menu-open .nav__burger{ background:rgba(40,30,46,.06); border-color:var(--hair-l); }
body.menu-open .nav__burger span{ background:transparent !important; }
body.menu-open .nav__burger span::before,
body.menu-open .nav__burger span::after{ background:var(--ink) !important; }

/* ---- Footer ---------------------------------------------------------------- */
.footer{ background:var(--night); color:var(--tx-on-dark); padding-top:var(--sect); border-top:1px solid var(--hair-d-soft); position:relative; overflow:hidden; }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:48px; padding-bottom:60px; position:relative; z-index:1; }
.footer__logo{ height:30px; margin-bottom:22px; }
.footer h5{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--tx-on-dark-mute); margin-bottom:18px; }
.footer__col a{ display:block; padding:7px 0; color:var(--tx-on-dark-soft); font-size:.95rem; transition:color .3s, padding-left .3s; }
.footer__col a:hover{ color:var(--lavender-hi); padding-left:5px; }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; padding:26px 0; border-top:1px solid var(--hair-d-soft); font-size:.85rem; color:var(--tx-on-dark-mute); flex-wrap:wrap; gap:16px; position:relative; z-index:1; }
.footer__social{ display:flex; gap:10px; }
.footer__social a{ width:40px; height:40px; border-radius:50%; border:1px solid var(--hair-d); display:grid; place-items:center; transition:.35s var(--ease-out); }
.footer__social a:hover{ border-color:var(--lavender); background:var(--hair-d-soft); transform:translateY(-2px); }
.footer__social svg{ width:17px; height:17px; }

/* ---- Reveal (enhance already-visible default) ------------------------------ */
.reveal{ opacity:0; transform:translateY(24px); }
.reveal-ready .reveal{ transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
[data-stagger] > *{ opacity:0; transform:translateY(20px); }
.reveal-ready [data-stagger].in > *{ opacity:1; transform:none; transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .reveal,[data-stagger] > *{ opacity:1 !important; transform:none !important; }
}

/* ---- Helpers --------------------------------------------------------------- */
.grid{ display:grid; gap:24px; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,88px); align-items:center; }
.hairline{ height:1px; background:var(--hair-l); border:0; }
.sect-dusk .hairline,.sect-night .hairline,.sect-aubergine .hairline,.sect-dark .hairline,.sect-scene .hairline{ background:var(--hair-d); }

/* ---- Decorative orb -------------------------------------------------------- */
.orb{ position:absolute; border-radius:50%; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 38% 34%, #fff, var(--glow) 42%, rgba(246,199,210,0) 72%);
  filter:blur(2px); }

@media (max-width: 900px){
  .nav__links{ display:none; }
  .nav__right .btn{ display:none; }
  .nav__burger{ display:flex; }
  .two-col{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width: 560px){ .footer__grid{ grid-template-columns:1fr; } .btn{ padding:14px 22px; } }

/* ============================================================================
   COMPONENTS (glass / dreamscape language)
   ========================================================================== */
.sh{ max-width:720px; }
.sh .h2{ margin-top:16px; }
.sh .lead{ margin-top:20px; }
.sh--center{ margin-inline:auto; text-align:center; }
.sh--center .eyebrow{ justify-content:center; }
.sh--center .lead{ margin-inline:auto; }

/* ---- Stats (glass) ---- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.stat{ padding:30px 26px; border-radius:var(--radius-lg); background:rgba(255,255,255,.72); border:1px solid var(--glass-brd);
  box-shadow:0 16px 40px -26px rgba(40,26,50,.35); }
.sect-dusk .stat,.sect-night .stat,.sect-aubergine .stat,.sect-dark .stat,.sect-scene .stat{ background:var(--glass-dark); border-color:var(--glass-dark-brd); color:var(--tx-on-dark); }
.stat__num{ font-family:var(--f-display); font-weight:340; font-size:clamp(2.2rem,3.8vw,3.2rem); line-height:.95; letter-spacing:-.03em; color:var(--ink); }
.sect-dusk .stat__num,.sect-night .stat__num,.sect-aubergine .stat__num,.sect-dark .stat__num,.sect-scene .stat__num{ color:var(--tx-on-dark); }
.stat__num .u{ color:var(--lavender-deep); }
.sect-dusk .stat__num .u,.sect-scene .stat__num .u,.sect-night .stat__num .u{ color:var(--lavender-hi); }
.stat__lab{ margin-top:12px; font-size:.92rem; color:var(--tx-on-light-soft); line-height:1.45; }
.sect-dusk .stat__lab,.sect-night .stat__lab,.sect-aubergine .stat__lab,.sect-dark .stat__lab,.sect-scene .stat__lab{ color:var(--tx-on-dark-soft); }
.stat__src{ margin-top:10px; font-family:var(--f-mono); font-size:.64rem; letter-spacing:.03em; color:var(--tx-on-light-mute); text-transform:uppercase; }
.sect-dusk .stat__src,.sect-scene .stat__src,.sect-night .stat__src{ color:var(--tx-on-dark-mute); }
@media(max-width:840px){ .stats{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:460px){ .stats{ grid-template-columns:1fr; } }

/* ---- Cards (glass) ---- */
.cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.cards-3{ grid-template-columns:repeat(3,1fr); }
.card{ position:relative; padding:30px; border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; min-height:100%;
  background:rgba(255,255,255,.55); border:1px solid var(--glass-brd);
  box-shadow:0 18px 44px -28px rgba(40,26,50,.4); transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .5s; }
.card:hover{ transform:translateY(-5px); box-shadow:0 30px 60px -30px rgba(40,26,50,.5); border-color:var(--lavender); }
.sect-dusk .card,.sect-night .card,.sect-aubergine .card,.sect-dark .card,.sect-scene .card{ background:var(--glass-dark); border-color:var(--glass-dark-brd); color:var(--tx-on-dark); }
.card__glow{ position:absolute; inset:0; background:radial-gradient(420px 200px at var(--mx,80%) -10%, rgba(176,155,233,.22), transparent 70%); opacity:0; transition:opacity .5s; pointer-events:none; }
.card:hover .card__glow{ opacity:1; }
.card__ico{ width:52px; height:52px; border-radius:15px; display:grid; place-items:center; background:var(--grad-warm); color:#fff; margin-bottom:22px; box-shadow:0 8px 20px -10px rgba(240,149,94,.6); }
.card__ico svg{ width:24px; height:24px; }
.card__k{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--tx-on-light-mute); margin-bottom:12px; }
.sect-dusk .card__k,.sect-scene .card__k,.sect-night .card__k,.sect-aubergine .card__k{ color:var(--tx-on-dark-mute); }
.card__t{ font-family:var(--f-display); font-weight:360; font-size:1.5rem; letter-spacing:-.02em; line-height:1.1; color:var(--ink); }
.sect-dusk .card__t,.sect-scene .card__t,.sect-night .card__t,.sect-aubergine .card__t,.sect-dark .card__t{ color:var(--tx-on-dark); }
.card__d{ margin-top:13px; color:var(--tx-on-light-soft); font-size:.98rem; line-height:1.55; flex:1; }
.sect-dusk .card__d,.sect-scene .card__d,.sect-night .card__d,.sect-aubergine .card__d,.sect-dark .card__d{ color:var(--tx-on-dark-soft); }
.card__foot{ margin-top:22px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.card__price{ font-family:var(--f-mono); font-size:.8rem; color:var(--peach-deep); }
.sect-dusk .card__price,.sect-scene .card__price{ color:var(--peach-hi); }
/* Home services cards: orange eyebrow above heading, CTA right-aligned (price removed) */
#services .card__k{ color:var(--peach-deep); }
#services .card__foot{ justify-content:flex-end; }
.card--lg{ grid-column:span 2; }
.card--feature{ background:linear-gradient(155deg, rgba(201,182,255,.32), rgba(255,203,166,.24)); border-color:var(--glass-hi); }
.sect-dusk .card--feature,.sect-scene .card--feature,.sect-night .card--feature{ background:linear-gradient(155deg, rgba(176,155,233,.28), rgba(28,22,36,.5)); }
@media(max-width:820px){ .cards,.cards-3{ grid-template-columns:1fr; } .card--lg{ grid-column:span 1; } }

/* ---- Feature split ---- */
.feature{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,6vw,80px); align-items:center; }
.feature--rev{ grid-template-columns:.95fr 1.05fr; }
.feature--rev .feature__media{ order:-1; }
.feature__media{ position:relative; border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:4/5; box-shadow:0 30px 70px -36px rgba(40,26,50,.5); }
.feature__media img{ width:100%; height:100%; object-fit:cover; }
.feature__media--wide{ aspect-ratio:5/4; }
@media(max-width:820px){ .feature,.feature--rev{ grid-template-columns:1fr; } .feature--rev .feature__media{ order:0; } }

/* ---- Steps ---- */
.steps{ display:grid; gap:2px; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--hair-l); }
.sect-dusk .steps,.sect-night .steps,.sect-scene .steps,.sect-aubergine .steps,.sect-dark .steps{ border-color:var(--hair-d); }
.step{ background:rgba(255,255,255,.4); display:grid; grid-template-columns:130px 1fr auto; gap:28px; padding:30px 26px; align-items:baseline; transition:background .4s; }
.sect-dusk .step,.sect-night .step,.sect-scene .step,.sect-aubergine .step,.sect-dark .step{ background:rgba(255,255,255,.05); }
.step:hover{ background:rgba(255,255,255,.65); }
.sect-dusk .step:hover,.sect-scene .step:hover,.sect-night .step:hover{ background:rgba(255,255,255,.1); }
.step__n{ font-family:var(--f-mono); font-size:.78rem; letter-spacing:.08em; color:var(--lavender-deep); }
.sect-dusk .step__n,.sect-scene .step__n,.sect-night .step__n{ color:var(--lavender-hi); }
/* Big number stacked above a short label (used in the audit "five checks") */
.step__k{ display:block; font-family:var(--f-display); font-weight:360; font-size:2.3rem; line-height:1; letter-spacing:-.02em; color:var(--peach-deep); }
.sect-night .step__k,.sect-charcoal .step__k,.sect-scene .step__k,.sect-dusk .step__k{ color:var(--peach); }
.step__lab{ display:block; margin-top:8px; font-family:var(--f-mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; }
.step__t{ font-family:var(--f-display); font-size:clamp(1.3rem,2.3vw,1.85rem); font-weight:360; letter-spacing:-.02em; color:var(--ink); }
.sect-dusk .step__t,.sect-scene .step__t,.sect-night .step__t,.sect-aubergine .step__t,.sect-dark .step__t{ color:var(--tx-on-dark); }
.step__d{ color:var(--tx-on-light-soft); font-size:.98rem; max-width:46ch; margin-top:8px; }
.sect-dusk .step__d,.sect-scene .step__d,.sect-night .step__d,.sect-aubergine .step__d,.sect-dark .step__d{ color:var(--tx-on-dark-soft); }
@media(max-width:720px){ .step{ grid-template-columns:1fr; gap:8px; } }

/* ---- CTA band (dreamscape scene) ---- */
.ctaband{ position:relative; border-radius:var(--radius-xl); overflow:hidden; padding:clamp(48px,7vw,92px); text-align:center; color:var(--tx-on-dark); box-shadow:0 40px 90px -44px rgba(40,26,50,.6); }
.ctaband__bg{ position:absolute; inset:0; z-index:0; }
.ctaband__bg img{ width:100%; height:100%; object-fit:cover; filter:blur(4px); transform:scale(1.06); }
.ctaband__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,16,26,.32), rgba(20,16,26,.5)); }
.ctaband > *{ position:relative; z-index:1; }
.ctaband .h2{ max-width:18ch; margin-inline:auto; color:#fff; }
.ctaband .lead{ margin:18px auto 30px; color:rgba(255,255,255,.85); }
.ctaband__cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---- Quote ---- */
.quote{ font-family:var(--f-display); font-weight:340; font-style:italic; font-size:clamp(1.5rem,3vw,2.25rem); line-height:1.3; letter-spacing:-.01em; }
.quote__by{ margin-top:24px; display:flex; align-items:center; gap:14px; }
.quote__by b{ font-family:var(--f-body); font-weight:600; font-style:normal; font-size:.95rem; }
.quote__by span{ font-size:.9rem; color:var(--tx-on-light-soft); }
.sect-dusk .quote__by span,.sect-scene .quote__by span,.sect-night .quote__by span{ color:var(--tx-on-dark-soft); }

/* --- testimonials: frosted glass floating over a dusk scene --- */
.vouch-scene{ position:relative; overflow:hidden; }
.vouch-scene__bg{ position:absolute; inset:0; z-index:0; }
.vouch-scene__bg img{ width:100%; height:100%; object-fit:cover; }
.vouch-scene__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(165deg, rgba(26,20,32,.58), rgba(26,20,32,.8)); }
.vouch-scene .wrap{ position:relative; z-index:1; }
.vouch-head{ margin-bottom:clamp(34px,4vw,52px); }
.vouch-head .eyebrow{ color:var(--lavender-hi); }
.vouch-head .h2{ color:#fff; white-space:nowrap; }
@media(max-width:600px){ .vouch-head .h2{ white-space:normal; } }
.vouches{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(20px,2.4vw,30px); align-items:start; }
.vouch{ position:relative; display:flex; flex-direction:column; gap:20px; padding:clamp(30px,3vw,40px) clamp(28px,3vw,38px) 30px;
  border-radius:var(--radius-lg); background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd); box-shadow:0 44px 90px -46px rgba(16,10,22,.85);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
@media(min-width:900px){ .vouch--offset{ margin-top:60px; } }
.vouch:hover{ transform:translateY(-5px); box-shadow:0 56px 104px -48px rgba(16,10,22,.9); }
.vouch__glyph{ font-family:var(--f-display); font-style:italic; font-weight:500; font-size:4.4rem;
  line-height:1; color:var(--peach-deep); height:2rem; user-select:none; }
.vouch__q{ margin:0; font-family:var(--f-display); font-weight:360; font-style:italic;
  font-size:clamp(1.16rem,1.5vw,1.32rem); line-height:1.5; letter-spacing:-.01em; color:var(--ink); }
.vouch__q mark{ background:linear-gradient(180deg, transparent 58%, rgba(240,149,94,.34) 58%);
  color:inherit; font-style:normal; font-weight:500; padding:0 .04em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.vouch__by{ margin-top:auto; }
.vouch__id{ display:flex; flex-direction:column; }
.vouch__id b{ font-weight:600; font-size:1rem; color:var(--ink); }
.vouch__id span{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--lavender-deep); margin-top:3px; }
@media (prefers-reduced-motion: reduce){ .vouch{ transition:none; } .vouch:hover{ transform:none; } }

/* ---- Founders ---- */
.founders{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.founder{ position:relative; border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:4/5; box-shadow:0 30px 70px -40px rgba(40,26,50,.5); }
.founder img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
.founder:hover img{ transform:scale(1.04); }
.founder__cap{ position:absolute; left:14px; right:14px; bottom:14px; padding:16px 18px; border-radius:16px;
  background:var(--glass-dark); backdrop-filter:blur(14px); border:1px solid var(--glass-dark-brd); }
.founder__cap b{ font-family:var(--f-display); font-weight:400; font-size:1.3rem; color:#fff; }
.founder__cap span{ display:block; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--lavender-hi); margin-top:3px; }
@media(max-width:560px){ .founders{ grid-template-columns:1fr; } }

/* ---- Marquee ---- */
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.marquee__track{ display:flex; gap:56px; width:max-content; animation:scrollx 36s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__item{ font-family:var(--f-mono); font-size:.82rem; letter-spacing:.05em; color:var(--tx-on-light-mute); white-space:nowrap; display:flex; align-items:center; gap:10px; }
.sect-dusk .marquee__item,.sect-scene .marquee__item,.sect-night .marquee__item{ color:var(--tx-on-dark-mute); }
.marquee__item::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--lavender-deep); opacity:.7; }
@keyframes scrollx{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; } }

/* ---- FAQ ---- */
.faq{ border-top:1px solid var(--hair-l); }
.sect-dusk .faq,.sect-night .faq,.sect-scene .faq{ border-color:var(--hair-d); }
.faq__item{ border-bottom:1px solid var(--hair-l); }
.sect-dusk .faq__item,.sect-night .faq__item,.sect-scene .faq__item{ border-color:var(--hair-d); }
.faq__q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:26px 0; text-align:left;
  font-family:var(--f-display); font-size:clamp(1.15rem,2vw,1.5rem); font-weight:360; letter-spacing:-.01em; color:var(--ink); transition:color .3s; }
.sect-dusk .faq__q,.sect-night .faq__q,.sect-scene .faq__q{ color:var(--tx-on-dark); }
.faq__q:hover{ color:var(--lavender-deep); }
.faq__ico{ flex:0 0 auto; width:26px; height:26px; position:relative; }
.faq__ico::before,.faq__ico::after{ content:""; position:absolute; background:var(--lavender-deep); transition:transform .4s var(--ease-out); }
.sect-dusk .faq__ico::before,.sect-dusk .faq__ico::after,.sect-scene .faq__ico::before,.sect-scene .faq__ico::after,.sect-night .faq__ico::before,.sect-night .faq__ico::after{ background:var(--lavender-hi); }
.faq__ico::before{ top:12px; left:3px; right:3px; height:1.7px; }
.faq__ico::after{ left:12px; top:3px; bottom:3px; width:1.7px; }
.faq__item.open .faq__ico::after{ transform:scaleY(0); }
.faq__a{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease-io); }
.faq__a-inner{ padding-bottom:26px; color:var(--tx-on-light-soft); max-width:66ch; line-height:1.62; }
.sect-dusk .faq__a-inner,.sect-night .faq__a-inner,.sect-scene .faq__a-inner{ color:var(--tx-on-dark-soft); }

/* ---- Trust row ---- */
.trustrow{ display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; }
.trustrow__i{ display:flex; align-items:center; gap:8px; font-size:.88rem; color:var(--tx-on-light-soft); }
.sect-dusk .trustrow__i,.sect-scene .trustrow__i,.sect-night .trustrow__i{ color:var(--tx-on-dark-soft); }
.trustrow__i svg{ width:17px; height:17px; color:var(--lavender-deep); }
.sect-dusk .trustrow__i svg,.sect-scene .trustrow__i svg,.sect-night .trustrow__i svg{ color:var(--lavender-hi); }

/* ---- Pill list ---- */
.pill-list{ display:flex; flex-direction:column; gap:2px; }
.pill-list li{ list-style:none; display:grid; grid-template-columns:auto 1fr; gap:16px; padding:18px 0; border-bottom:1px solid var(--hair-l); align-items:start; }
.sect-dusk .pill-list li,.sect-scene .pill-list li,.sect-night .pill-list li{ border-color:var(--hair-d); }
.pill-list .tick{ width:27px; height:27px; border-radius:50%; background:var(--grad-warm); color:#fff; display:grid; place-items:center; margin-top:2px; }
.pill-list .tick svg{ width:15px; height:15px; }
.pill-list b{ font-weight:600; }
.pill-list p{ color:var(--tx-on-light-soft); font-size:.95rem; margin-top:3px; }
.sect-dusk .pill-list p,.sect-scene .pill-list p,.sect-night .pill-list p{ color:var(--tx-on-dark-soft); }

/* ---- Page hero (service pages) ---- */
.phero{ padding-top:clamp(140px,19vh,210px); padding-bottom:var(--sect); position:relative; overflow:hidden; color:var(--tx-on-dark); }
.phero__bg{ position:absolute; inset:0; z-index:0; }
.phero__bg img{ width:100%; height:100%; object-fit:cover; }
.phero__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,16,26,.24), rgba(20,16,26,.12) 44%, rgba(22,18,28,.66) 92%); }
.phero .wrap{ position:relative; z-index:1; }
.phero .display{ max-width:17ch; }
.phero .lead{ margin-top:22px; color:var(--tx-on-dark-soft); }

/* about hero — copy constrained to the left, founder cut-outs anchored bottom-right (never overlap the text) */
.phero--team{ position:relative; padding-bottom:0; }
.phero--team .phero__split{ display:block; min-height:clamp(460px,58vh,590px); }
.phero--team .phero__copy{ max-width:min(540px,50%); position:relative; z-index:2; }
.phero--team .phero__copy .display{ max-width:14ch; }
.phero--team .phero__copy .lead{ max-width:42ch; }
.phero__figs{ position:absolute; right:clamp(4px,1.6vw,28px); bottom:0; z-index:1;
  display:flex; align-items:flex-end; justify-content:flex-end; pointer-events:none; }
.phero__fig{ display:block; height:auto; max-width:none; }
.phero__fig--front{ position:relative; z-index:2; width:clamp(250px,26.5vw,398px);
  margin-right:clamp(-98px,-7vw,-60px); filter:drop-shadow(0 34px 42px rgba(28,16,38,.46)); }
.phero__fig--back{ position:relative; z-index:1; width:clamp(264px,27.5vw,416px);
  filter:drop-shadow(0 28px 36px rgba(28,16,38,.34)); }
@media(max-width:860px){
  .phero--team .phero__split{ min-height:0; }
  .phero--team .phero__copy{ max-width:none; }
  .phero__figs{ position:static; justify-content:center; margin-top:12px; }
  .phero__fig--front{ width:clamp(150px,42vw,236px); margin-right:-13vw; }
  .phero__fig--back{ width:clamp(158px,44vw,248px); }
}
.breadcrumb{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; color:var(--tx-on-dark-mute); margin-bottom:24px; display:flex; gap:10px; align-items:center; }
.breadcrumb a{ color:var(--tx-on-dark-soft); } .breadcrumb a:hover{ color:var(--lavender-hi); }

/* ---- Adaptive callout ------------------------------------------------------ */
.callout{ margin-top:40px; padding:26px 32px; border-radius:var(--radius-lg); border:1px solid var(--glass-brd);
  background:linear-gradient(120deg, rgba(176,155,233,.16), rgba(255,184,138,.12)); backdrop-filter:var(--glass-blur);
  display:flex; gap:22px; align-items:center; flex-wrap:wrap; justify-content:space-between; }
.sect-dusk .callout,.sect-night .callout,.sect-scene .callout,.sect-aubergine .callout,.sect-dark .callout{ background:var(--glass-dark); border-color:var(--glass-dark-brd); }
.callout > p{ font-family:var(--f-display); font-style:italic; font-size:clamp(1.1rem,2vw,1.45rem); max-width:46ch; line-height:1.3; color:var(--ink); margin:0; }
.sect-dusk .callout > p,.sect-scene .callout > p,.sect-night .callout > p,.sect-aubergine .callout > p,.sect-dark .callout > p{ color:var(--tx-on-dark); }

/* ---- Adaptive nav (light vs dark hero) ------------------------------------ */
.nav__logo .logo-light{ display:none; }
.nav__logo .logo-dark{ display:block; }
.nav--over-dark .nav__logo .logo-light{ display:block; }
.nav--over-dark .nav__logo .logo-dark{ display:none; }
.nav.scrolled .nav__logo .logo-light{ display:block; }
.nav.scrolled .nav__logo .logo-dark{ display:none; }
.nav--over-dark .nav__link{ color:var(--tx-on-dark-soft); }
.nav--over-dark .nav__link:hover{ color:#fff; background:rgba(255,255,255,.1); }
.nav--over-dark:not(.scrolled) .nav__burger{ border-color:var(--hair-d); background:rgba(255,255,255,.08); }
.nav--over-dark:not(.scrolled) .nav__burger span,
.nav--over-dark:not(.scrolled) .nav__burger span::before,
.nav--over-dark:not(.scrolled) .nav__burger span::after{ background:#fff; }
.nav.scrolled .nav__link{ color:var(--tx-on-dark-soft); }
.nav.scrolled .nav__link:hover{ color:#fff; background:rgba(255,255,255,.1); }
.nav.scrolled .nav__burger span,
.nav.scrolled .nav__burger span::before,
.nav.scrolled .nav__burger span::after{ background:#fff; }
/* CTA on the right loses its glow in the scrolled (dark) nav */
.nav.scrolled .nav__right .btn--accent{ box-shadow:none; }

/* ============================================================================
   v3 OVERRIDES — vibrant images (no overlays), refined glass, uppercase nav,
   no button-movement, animated life
   ========================================================================== */

/* 1. Images at 100% — remove all scenic overlays */
.sect-scene__bg::after,
.phero__bg::after,
.ctaband__bg::after{ display:none !important; }

/* text legibility over vibrant scenes via shadow (not an image overlay) */
.on-scene, .phero .display, .phero .lead, .phero .eyebrow, .phero .breadcrumb,
.ctaband .h2, .ctaband .lead, .ctaband .eyebrow,
.sect-scene > .wrap .h2, .sect-scene > .wrap .lead, .sect-scene > .wrap .eyebrow{
  text-shadow:0 1px 3px rgba(16,10,22,.72), 0 2px 22px rgba(16,10,22,.6), 0 4px 60px rgba(16,10,22,.5);
}
.phero .lead, .sect-scene > .wrap .lead, .ctaband .lead{ color:#fff !important; }
.phero .breadcrumb, .phero .breadcrumb a{ color:rgba(255,255,255,.9); }

/* 2. Refined glassmorphism — cleaner, more readable, more vibrant edge */
.glass--dark, .sect-scene .card, .ansard{
  background:rgba(22,16,28,.74);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 30px 70px -30px rgba(20,12,28,.7), inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 40px rgba(255,255,255,.04);
}
.sect-scene .card__d, .sect-scene .card__t{ text-shadow:0 1px 12px rgba(18,12,24,.4); }
.sect-scene .card__d{ color:rgba(247,240,235,.9); }
.card{ background:rgba(255,255,255,.78); border:1px solid rgba(255,255,255,.7); box-shadow:0 22px 50px -30px rgba(40,26,50,.45), inset 0 1px 0 rgba(255,255,255,.9); }
.stat{ background:rgba(255,255,255,.78); border:1px solid rgba(255,255,255,.7); box-shadow:0 18px 44px -30px rgba(40,26,50,.4), inset 0 1px 0 rgba(255,255,255,.9); }

/* 3. Nav uppercase */
.nav__link{ text-transform:uppercase; letter-spacing:.11em; font-size:.74rem; font-weight:600; }

/* 4. Buttons — no hover movement, tasteful non-moving hover */
.btn{ transition:box-shadow .4s var(--ease-out), background .4s var(--ease-out), filter .3s; }
.btn:hover{ transform:none; }
.btn--primary:hover{ box-shadow:0 12px 30px -10px rgba(37,30,43,.6); }
.btn--accent:hover{ filter:saturate(1.08) brightness(1.03); box-shadow:0 16px 40px -12px rgba(176,155,233,.7); }
.btn:active{ transform:scale(.98); }
.btn .arw{ transition:transform .35s var(--ease-out); }
.btn:hover .arw{ transform:translateX(4px); }

/* 5. Dropdown menu — fix layout (title/desc stacked, spaced), refine */
.nav__menu{ width:392px; padding:12px; border-radius:22px; }
.nav__menu-item{ align-items:center; padding:14px 15px; gap:15px; }
.nav__menu-ico{ flex:0 0 40px; height:40px; border-radius:12px; }
.nav__menu-ico svg{ width:20px; height:20px; }
.nav__menu-t{ display:block; font-size:.98rem; font-weight:600; letter-spacing:-.01em; }
.nav__menu-d{ display:block; font-size:.82rem; margin-top:4px; line-height:1.45; }

/* 6. Come-alive: soft parallax + drift for scene bgs, refined reveal */
.sect-scene__bg img, .phero__bg img{ will-change:transform; transform:scale(1.06); }
.reveal{ transform:translateY(30px); filter:blur(0); }
.reveal-ready .reveal{ transition:opacity 1s var(--ease-out), transform 1s var(--ease-out); }

/* ---- Team cards (prominent photos, subtle bottom label) -------------------- */
.team{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.tcard{ position:relative; border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:4/5;
  box-shadow:0 30px 70px -40px rgba(40,26,50,.5); }
.tcard img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease-out); }
.tcard:hover img{ transform:scale(1.05); }
.tcard figcaption{ position:absolute; left:0; right:0; bottom:0; padding:24px 22px 20px;
  background:linear-gradient(to top, rgba(18,12,24,.8), rgba(18,12,24,.2) 60%, transparent); }
.tcard figcaption b{ display:block; font-family:var(--f-body); font-weight:600; font-size:1.18rem; color:#fff; letter-spacing:-.01em; }
.tcard figcaption span{ display:block; font-size:.82rem; color:rgba(255,255,255,.82); margin-top:3px; }
@media(max-width:760px){ .team{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; } }

/* ---- v3.1 nav fixes: sentence case, links right, aligned, dropdown bridge -- */
.nav__link{ text-transform:none; letter-spacing:-.01em; font-size:.84rem; font-weight:500; padding:8px 13px; }
/* nav CTA button: smaller than in-page buttons */
.nav__right .btn{ font-size:.82rem; padding:11px 19px; }
.nav__links{ margin-left:auto; margin-right:10px; align-items:center; }
.nav__has-menu{ display:inline-flex; align-items:center; }
.nav__has-menu > .nav__link{ display:inline-flex; align-items:center; gap:5px; }
.nav__menu{ top:calc(100% + 4px); }
.nav__menu::before{ content:""; position:absolute; top:-16px; left:-10px; right:-10px; height:18px; }

/* ---- v3.2: dark scene overlays for text legibility (per request) ---------- */
.phero__bg::after, .sect-scene__bg::after{ display:block !important; content:""; position:absolute; inset:0;
  background:linear-gradient(178deg, rgba(15,9,20,.5) 0%, rgba(15,9,20,.28) 42%, rgba(15,9,20,.62) 100%); }
.ctaband__bg::after{ display:block !important; content:""; position:absolute; inset:0;
  background:linear-gradient(178deg, rgba(15,9,20,.42), rgba(15,9,20,.55)); }

/* ---- v3.2: footer sizing + bigger Facebook icon -------------------------- */
.footer__grid > div > p{ font-size:.85rem !important; }
.footer__col a{ font-size:.85rem; }
.footer__bottom{ font-size:.78rem; }
.footer__social a:last-child svg{ width:22px; height:22px; }

/* ---- v3.2: smooth image fade-in ------------------------------------------ */
.imgfade{ opacity:0; transition:opacity .9s var(--ease-out); }
.imgfade.loaded{ opacity:1; }

/* ---- v3.2: VSL video placeholder ----------------------------------------- */
.vsl{ position:relative; border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:16/9; border:1px solid var(--glass-dark-brd);
  background:linear-gradient(135deg,#251d30,#15111c); box-shadow:0 40px 90px -44px rgba(0,0,0,.7); }
.vsl__inner{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  background:radial-gradient(circle at 50% 45%, rgba(176,155,233,.2), transparent 62%); }
.vsl__play{ width:82px; height:82px; border-radius:50%; background:var(--grad-warm); color:#2a1f14; display:grid; place-items:center;
  box-shadow:0 14px 44px -10px rgba(176,155,233,.6); transition:box-shadow .4s, filter .3s; }
.vsl__play svg{ width:32px; height:32px; margin-left:5px; }
.vsl__play:hover{ filter:brightness(1.05); box-shadow:0 20px 54px -10px rgba(176,155,233,.85); }
.vsl__label{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-on-dark-mute); }

/* ============================================================================
   v4 — depth pass: full-bleed cinematic CTAs w/ frosted glass panel,
   floating 3D spheres, charcoal (de-purpled) sections, cleaner page heroes,
   readable quote, revenue calculator
   ========================================================================== */

/* --- charcoal surface (replaces lilac/purple sect-mist per request) -------- */
:root{ --charcoal:#211E25; --charcoal-2:#1A171E; }
.sect-charcoal{ background:var(--charcoal); color:var(--tx-on-dark); }

/* --- footer legal links ----------------------------------------------------- */
.footer__legal{ display:flex; gap:18px; }
.footer__legal a{ color:var(--tx-on-dark-mute); font-size:.8rem; transition:color .3s; }
.footer__legal a:hover{ color:var(--lavender-hi); }
@media(max-width:560px){ .footer__bottom{ flex-direction:column; align-items:flex-start; gap:14px; } }

/* --- legal / prose pages ---------------------------------------------------- */
.legal{ max-width:770px; }
.legal__meta{ font-family:var(--f-mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--tx-on-light-mute); margin-top:16px; }
.legal h2{ font-family:var(--f-display); font-weight:400; font-size:clamp(1.35rem,2.5vw,1.85rem); letter-spacing:-.02em; margin:46px 0 14px; color:var(--ink); line-height:1.15; }
.legal h3{ font-family:var(--f-body); font-weight:600; font-size:1.05rem; margin:28px 0 10px; color:var(--ink); }
.legal p{ color:var(--tx-on-light-soft); margin-bottom:15px; line-height:1.72; }
.legal ul{ margin:0 0 18px 0; padding-left:22px; color:var(--tx-on-light-soft); }
.legal li{ margin-bottom:9px; line-height:1.62; }
.legal a{ color:var(--lavender-deep); border-bottom:1px solid transparent; transition:border-color .3s; }
.legal a:hover{ border-color:currentColor; }
.legal strong{ color:var(--ink); font-weight:600; }
.legal em,.legal i{ font-style:italic; }
.legal hr{ border:0; height:1px; background:var(--hair-l); margin:32px 0; }

/* --- risk-reversal band (DBR "you don't pay until we deliver") -------------- */
.norisk{ text-align:center; max-width:760px; margin-inline:auto; }
.norisk__ico{ width:74px; height:74px; border-radius:50%; margin:0 auto 26px; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 35%, rgba(176,155,233,.28), rgba(255,184,138,.14)); border:1px solid var(--glass-brd); }
.norisk__ico svg{ width:32px; height:32px; color:var(--peach-deep); }
.norisk .eyebrow{ justify-content:center; color:var(--peach-deep); }
.norisk .eyebrow::before{ display:none; }
.norisk h2{ margin-top:18px; }
.norisk p{ margin:22px auto 0; }

/* numbered badge variant of the pill-list tick */
.pill-list .tick--n{ font-family:var(--f-body); font-weight:700; font-size:.85rem; color:#fff; }

/* gradient italic emphasis (for headings) */
.em-grad{ font-family:var(--f-display); font-style:italic; font-weight:360; letter-spacing:-.01em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* --- walkthrough video (Tella embed) --------------------------------------- */
.vwrap{ position:relative; max-width:980px; margin:46px auto 0; border-radius:26px; padding:14px;
  background:linear-gradient(135deg, rgba(201,182,255,.55), rgba(246,199,210,.42) 45%, rgba(255,203,166,.5));
  box-shadow:0 50px 110px -52px rgba(40,26,50,.55); }
.vframe{ position:relative; padding-bottom:56.25%; height:0; border-radius:16px; overflow:hidden; background:#16111d; }
.vframe iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* --- quiet-leak stat cards (#40) ------------------------------------------- */
.leakcards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:52px; }
.leakcard{ padding:32px 28px; border-radius:var(--radius-lg); background:rgba(255,255,255,.62);
  border:1px solid var(--glass-brd); box-shadow:0 18px 44px -30px rgba(40,26,50,.4); }
.sect-dusk .leakcard,.sect-night .leakcard,.sect-charcoal .leakcard{ background:rgba(255,255,255,.05); border-color:var(--hair-d); box-shadow:none; }
.leakcard__n{ font-family:var(--f-display); font-weight:360; font-size:clamp(2.6rem,4.8vw,3.5rem); letter-spacing:-.02em; color:var(--ink); line-height:.95; }
.sect-dusk .leakcard__n,.sect-night .leakcard__n,.sect-charcoal .leakcard__n{ color:#fff; }
.leakcard__t{ font-family:var(--f-display); font-weight:400; font-size:1.2rem; letter-spacing:-.01em; margin-top:16px; color:var(--ink); }
.sect-dusk .leakcard__t,.sect-night .leakcard__t,.sect-charcoal .leakcard__t{ color:#fff; }
.leakcard__d{ margin-top:14px; color:var(--tx-on-light-soft); font-size:.96rem; line-height:1.6; }
.sect-dusk .leakcard__d,.sect-night .leakcard__d,.sect-charcoal .leakcard__d{ color:var(--tx-on-dark-soft); }
@media(max-width:820px){ .leakcards{ grid-template-columns:1fr; } }

/* --- for / against qualifier cards (#43) ----------------------------------- */
.qual{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.qualcard{ padding:clamp(28px,3.4vw,40px); border-radius:var(--radius-xl); background:rgba(255,255,255,.72);
  border:1px solid var(--glass-brd); box-shadow:0 22px 50px -30px rgba(40,26,50,.4); }
.qualcard--no{ background:rgba(255,255,255,.5); }
.qualcard__h{ font-family:var(--f-mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--tx-on-light-mute); margin-bottom:8px; }
.qual ul{ list-style:none; }
.qual li{ display:grid; grid-template-columns:auto 1fr; gap:14px; padding:14px 0; align-items:start; font-size:1rem; color:var(--tx-on-light); border-top:1px solid var(--hair-l-soft); line-height:1.45; }
.qual li:first-child{ border-top:0; }
.qual li svg{ width:21px; height:21px; margin-top:1px; flex:0 0 auto; }
.qual__yes svg{ color:var(--lavender-deep); } .qual__no svg{ color:var(--peach-deep); }
@media(max-width:760px){ .qual{ grid-template-columns:1fr; } }

/* --- page hero: no leading dash on the eyebrow (cleaner) -------------------- */
.phero .eyebrow::before, .hero .eyebrow::before{ display:none; }
.phero .eyebrow, .hero .eyebrow{ gap:0; }
/* hero eyebrows always light (results/about pheros lacked sect-dark) */
.phero .eyebrow, .hero .eyebrow{ color:var(--lavender-hi); }

/* --- floating 3D spheres (chrome / glass orbs for depth) -------------------- */
.spheres{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.sphere{ position:absolute; border-radius:50%; will-change:transform;
  background:
    radial-gradient(circle at 32% 28%, #ffffff 0%, rgba(255,255,255,.65) 8%, rgba(201,182,255,.55) 26%, rgba(126,102,196,.35) 52%, rgba(20,14,28,.55) 82%),
    radial-gradient(circle at 70% 80%, rgba(255,184,138,.5), transparent 60%);
  box-shadow:inset 0 -8px 22px rgba(20,12,28,.5), inset 0 6px 14px rgba(255,255,255,.35), 0 30px 60px -20px rgba(20,12,28,.55);
  animation:sphereFloat 12s ease-in-out infinite; }
.sphere--peach{ background:
    radial-gradient(circle at 34% 30%, #ffffff 0%, rgba(255,203,166,.7) 16%, rgba(240,149,94,.42) 48%, rgba(30,16,20,.5) 84%),
    radial-gradient(circle at 72% 78%, rgba(201,182,255,.4), transparent 60%); }
.sphere--glass{ background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.55), rgba(255,255,255,.06) 42%, rgba(255,255,255,.02) 70%);
  border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(3px); box-shadow:inset 0 4px 14px rgba(255,255,255,.3), 0 24px 50px -18px rgba(20,12,28,.5); }
@keyframes sphereFloat{ 0%,100%{ transform:translate3d(0,0,0) } 50%{ transform:translate3d(0,-22px,0) } }
@media (prefers-reduced-motion: reduce){ .sphere{ animation:none; } }
@media (max-width:640px){ .sphere{ opacity:.55; } .sphere--sm-hide{ display:none; } }

/* --- FULL-BLEED CTA BAND: fix bg bug + full width + frosted glass panel ----- */
section:has(> .wrap > .ctaband){ padding-block:0; }
.ctaband{ width:100vw; margin-left:calc(50% - 50vw); border-radius:0;
  padding:clamp(96px,14vw,190px) var(--gutter); display:grid; place-items:center; text-align:center;
  box-shadow:none; }
.ctaband__bg{ position:absolute !important; inset:0; z-index:0; }
.ctaband__bg::after{ display:block !important; content:""; position:absolute; inset:0;
  background:radial-gradient(120% 120% at 50% 40%, rgba(15,9,20,.35), rgba(12,8,17,.72) 90%); }
/* fix: the generic `.ctaband > *` rule must NOT re-position the background */
.ctaband > .ctaband__bg{ position:absolute; z-index:0; }
/* frosted glass panel that holds the copy (the #24 aesthetic) */
.ctaband__panel{ position:relative; z-index:2; width:min(840px,100%);
  padding:clamp(38px,5.5vw,68px) clamp(28px,4.5vw,56px); border-radius:var(--radius-xl);
  background:rgba(20,14,25,.86);
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 50px 110px -40px rgba(12,7,18,.8), inset 0 1px 0 rgba(255,255,255,.26), inset 0 0 60px rgba(255,255,255,.04); }
.ctaband__panel .eyebrow{ justify-content:center; color:var(--lavender-hi); margin-bottom:16px; }
.ctaband__panel .eyebrow::before{ display:none; }
.ctaband__panel .h2{ color:#fff; max-width:20ch; margin:0 auto; }
.ctaband__panel .lead{ color:rgba(255,255,255,.86) !important; margin:18px auto 30px; max-width:52ch; text-shadow:none; }
.ctaband__panel .ctaband__cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:4px; }
.ctaband__panel .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.4); }
.ctaband__panel .btn--ghost:hover{ border-color:var(--lavender-hi); }
/* kill the old on-scene text-shadow inside the panel (no longer over raw image) */
.ctaband__panel .h2, .ctaband__panel .lead, .ctaband__panel .eyebrow{ text-shadow:none; }

/* --- readable quote / callout (home #25) ----------------------------------- */
.callout{ padding:30px 34px; border-left:3px solid var(--lavender-hi); align-items:center; }
.sect-scene .callout, .callout{ background:rgba(16,11,22,.72); backdrop-filter:blur(12px) saturate(1.3);
  border-top:1px solid rgba(255,255,255,.14); border-right:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); }
.callout > p{ font-family:var(--f-display); font-style:italic; font-weight:400; line-height:1.32;
  font-size:clamp(1.2rem,2.1vw,1.6rem) !important; max-width:46ch; color:#fff !important;
  letter-spacing:.005em; text-shadow:0 1px 18px rgba(10,6,14,.55); }
.sect-scene .callout .link-arrow, .callout .link-arrow{ color:var(--peach-hi); white-space:nowrap; }

/* --- REVENUE CALCULATOR (DBR) ---------------------------------------------- */
.calc{ display:grid; grid-template-columns:1.05fr .95fr; gap:20px; align-items:stretch; }
.calc__panel{ padding:clamp(26px,3vw,40px); border-radius:var(--radius-xl);
  background:rgba(255,255,255,.62); border:1px solid rgba(255,255,255,.7);
  box-shadow:0 22px 50px -30px rgba(40,26,50,.45), inset 0 1px 0 rgba(255,255,255,.9); }
.calc__row{ margin-bottom:26px; }
.calc__row:last-of-type{ margin-bottom:0; }
.calc__head{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.calc__label{ font-weight:600; font-size:.98rem; color:var(--ink); }
.calc__val{ font-family:var(--f-display); font-weight:400; font-size:1.5rem; letter-spacing:-.02em; color:var(--lavender-deep); }
.calc__hint{ font-size:.82rem; color:var(--tx-on-light-mute); margin-top:9px; }
.calc input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:6px; margin-top:14px;
  border-radius:999px; background:linear-gradient(90deg,var(--lavender) var(--fill,40%), rgba(40,30,46,.14) var(--fill,40%)); outline:none; }
.calc input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:24px; height:24px; border-radius:50%;
  background:var(--grad-warm); border:3px solid #fff; box-shadow:0 4px 12px -2px rgba(240,149,94,.6); cursor:pointer; transition:transform .2s var(--ease-out); }
.calc input[type=range]::-webkit-slider-thumb:hover{ transform:scale(1.12); }
.calc input[type=range]::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:var(--peach-deep); border:3px solid #fff; cursor:pointer; }
.calc__reset{ display:inline-flex; align-items:center; gap:8px; margin-top:26px; font-family:var(--f-mono); font-size:.74rem;
  letter-spacing:.04em; color:var(--tx-on-light-mute); text-transform:uppercase; transition:color .3s; }
.calc__reset:hover{ color:var(--lavender-deep); }
.calc__reset svg{ width:14px; height:14px; }
/* output card — dusk glass, not gold */
.calc__out{ position:relative; overflow:hidden; padding:clamp(28px,3vw,40px); border-radius:var(--radius-xl); color:var(--tx-on-dark);
  background:linear-gradient(158deg, #2c2336 0%, #1b1522 68%, #17111d 100%); border:1px solid rgba(255,255,255,.12);
  box-shadow:0 40px 90px -44px rgba(12,7,18,.8), inset 0 1px 0 rgba(255,255,255,.12); display:flex; flex-direction:column; }
.calc__out::before{ content:""; position:absolute; top:-40%; right:-30%; width:80%; height:80%; border-radius:50%;
  background:radial-gradient(circle, rgba(176,155,233,.28), transparent 68%); filter:blur(20px); pointer-events:none; }
.calc__outhead{ display:flex; align-items:center; justify-content:space-between; gap:12px; position:relative; z-index:1; }
.calc__outk{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--tx-on-dark-mute); }
.calc__pill{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.04em; padding:5px 11px; border-radius:999px;
  border:1px solid var(--hair-d); color:var(--tx-on-dark-soft); display:inline-flex; align-items:center; gap:7px; }
.calc__pill .dot{ width:6px; height:6px; border-radius:50%; background:var(--peach); }
.calc__big{ font-family:var(--f-display); font-weight:340; font-size:clamp(3.2rem,7vw,5rem); line-height:1; letter-spacing:-.03em;
  color:#fff; margin:14px 0 22px; position:relative; z-index:1; }
.calc__breakdown{ border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--hair-d); position:relative; z-index:1; }
.calc__line{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:15px 18px; background:rgba(255,255,255,.03); }
.calc__line + .calc__line{ border-top:1px solid var(--hair-d-soft); }
.calc__line:last-child{ background:rgba(176,155,233,.12); }
.calc__lt{ font-size:.92rem; color:var(--tx-on-dark-soft); }
.calc__lt small{ display:block; font-family:var(--f-mono); font-size:.66rem; color:var(--tx-on-dark-mute); margin-top:3px; letter-spacing:.02em; }
.calc__ln{ font-family:var(--f-display); font-weight:360; font-size:1.35rem; letter-spacing:-.02em; color:#fff; white-space:nowrap; }
.calc__cta{ margin-top:22px; position:relative; z-index:1; }
.calc__cta .btn{ width:100%; justify-content:center; }
.calc__foot{ margin-top:20px; font-size:.82rem; color:var(--tx-on-light-mute); text-align:center; max-width:70ch; margin-inline:auto; }
@media(max-width:820px){ .calc{ grid-template-columns:1fr; } }

/* ============================================================================
   Liquid-glass secondary buttons (next-gen glassmorphism) — replaces flat ghost
   ========================================================================== */
.btn--ghost{
  color:var(--ink);
  background:linear-gradient(140deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.12) 52%, rgba(255,255,255,.22) 100%);
  border:1px solid rgba(255,255,255,.55);
  backdrop-filter:blur(18px) saturate(1.8);
  -webkit-backdrop-filter:blur(18px) saturate(1.8);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.75), inset 0 -10px 20px rgba(255,255,255,.10), 0 10px 30px -14px rgba(40,26,50,.4);
  transition:background .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
}
.btn--ghost:hover{
  background:linear-gradient(140deg, rgba(255,255,255,.48), rgba(255,255,255,.2));
  border-color:rgba(255,255,255,.85);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9), inset 0 -10px 20px rgba(255,255,255,.16), 0 16px 40px -14px rgba(176,155,233,.5);
}
/* over dark scenes / sections / glass panels: lighter translucent glass, white text */
.sect-dusk .btn--ghost, .sect-night .btn--ghost, .sect-aubergine .btn--ghost,
.sect-dark .btn--ghost, .sect-scene .btn--ghost, .sect-charcoal .btn--ghost,
.phero .btn--ghost, .ctaband__panel .btn--ghost{
  color:#fff;
  background:linear-gradient(140deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.07) 55%, rgba(255,255,255,.13) 100%);
  border-color:rgba(255,255,255,.42);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.55), inset 0 -10px 20px rgba(255,255,255,.06), 0 12px 34px -16px rgba(0,0,0,.5);
}
.sect-dusk .btn--ghost:hover, .sect-night .btn--ghost:hover, .sect-scene .btn--ghost:hover,
.sect-charcoal .btn--ghost:hover, .phero .btn--ghost:hover, .ctaband__panel .btn--ghost:hover{
  background:linear-gradient(140deg, rgba(255,255,255,.32), rgba(255,255,255,.13));
  border-color:rgba(255,255,255,.65);
}
/* home hero sits over a LIGHT dune scene → keep dark ink text on the glass */
.hero__cta .btn--ghost{
  color:var(--ink);
  background:linear-gradient(140deg, rgba(255,255,255,.4), rgba(255,255,255,.16));
  border-color:rgba(255,255,255,.6);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.8), 0 12px 34px -16px rgba(20,12,28,.35);
}
/* home-hero glass secondary needs its own hover (its base rule out-specifies the
   generic .btn--ghost:hover, so hover was previously dead) — fades in smoothly */
.hero__cta .btn--ghost:hover{
  background:linear-gradient(140deg, rgba(255,255,255,.58), rgba(255,255,255,.26));
  border-color:rgba(255,255,255,.85);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.95), 0 16px 42px -16px rgba(176,155,233,.5);
}

/* all hero glass secondary buttons: ensure a smooth fade on hover state change */
.hero__cta .btn--ghost, .phero .btn--ghost{
  transition:background .45s var(--ease-out), border-color .45s var(--ease-out), box-shadow .45s var(--ease-out);
}

/* illustrations for the "Always On AI Bots" panel items */
.botpanel__art{ display:block; width:96px; height:auto; margin:-6px 0 14px -6px; }
@media(max-width:820px){ .botpanel__art{ width:104px; } }

/* --- solar showcase (#47): dusk-gradient bg + big floating cut-out laptop --- */
.solar-showcase{ background:linear-gradient(155deg, #dccfeb 0%, #ecd8d1 50%, #f5ddc7 100%); color:var(--tx-on-light); overflow:hidden; }
.solar-showcase .feature{ align-items:center; }
.solar-showcase__media{ position:relative; }
.solar-laptop{ display:block; width:128%; max-width:none; margin-left:-14%;
  filter:drop-shadow(0 44px 60px rgba(48,30,58,.32)); }
@media(max-width:820px){ .solar-laptop{ width:110%; margin-left:-5%; } }

/* --- Shift "insight" block (#48): break the wall of text --------------------- */
.insight{ max-width:66ch; margin-top:40px; padding:26px 30px; border-radius:0 18px 18px 0;
  border-left:3px solid var(--lavender-hi);
  background:rgba(255,255,255,.05); border-top:1px solid var(--hair-d); border-right:1px solid var(--hair-d); border-bottom:1px solid var(--hair-d);
  backdrop-filter:blur(8px); }
.insight__k{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--lavender-hi); }
.insight__lead{ font-family:var(--f-display); font-weight:400; font-size:clamp(1.25rem,2.2vw,1.6rem); line-height:1.25; color:#fff; margin-top:12px; letter-spacing:-.01em; }
.insight__d{ margin-top:14px; color:var(--tx-on-dark-soft); font-size:1rem; line-height:1.6; }
.insight__d b{ color:var(--peach-hi); font-weight:600; }

/* --- "Always On AI Bots" full-width panel (#49) ----------------------------- */
.botpanel{ display:block; margin-top:18px; padding:clamp(24px,3vw,32px); border-radius:var(--radius-lg);
  background:rgba(255,255,255,.62); border:1px solid rgba(255,255,255,.7);
  box-shadow:0 22px 50px -30px rgba(40,26,50,.45), inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .5s; }
.botpanel:hover{ border-color:var(--lavender); box-shadow:0 30px 60px -30px rgba(40,26,50,.5); transform:translateY(-3px); }
.botpanel__head{ display:flex; align-items:center; gap:16px; padding-bottom:22px; margin-bottom:24px; border-bottom:1px solid var(--hair-l); }
.botpanel__ico{ width:46px; height:46px; border-radius:13px; background:var(--grad-warm); display:grid; place-items:center; color:#fff; flex:0 0 auto; box-shadow:0 8px 20px -10px rgba(240,149,94,.6); }
.botpanel__ico svg{ width:23px; height:23px; }
.botpanel__k{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--tx-on-light-mute); display:block; }
.botpanel__t{ font-family:var(--f-display); font-weight:360; font-size:1.5rem; letter-spacing:-.02em; color:var(--ink); line-height:1.1; }
.botpanel__link{ margin-left:auto; color:var(--peach-deep); white-space:nowrap; }
.botpanel__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.botpanel__item b{ font-weight:600; font-size:1rem; color:var(--ink); }
.botpanel__item p{ margin-top:6px; font-size:.9rem; color:var(--tx-on-light-soft); line-height:1.5; }
@media(max-width:820px){ .botpanel__grid{ grid-template-columns:1fr 1fr; gap:22px 26px; } .botpanel__head{ flex-wrap:wrap; } .botpanel__link{ margin-left:0; } }
@media(max-width:480px){ .botpanel__grid{ grid-template-columns:1fr; } }

/* --- nav mega-menu: bright frosted glass · 3 cols × 2 rows · no icons -------- */
/* Glassmorphism recipe: a BRIGHT translucent fill (not a muddy dark tint) +
   strong blur + a saturation boost so the blurred backdrop stays vivid + a
   luminous 1px edge + a specular inset top-highlight for real depth. */
.nav__menu{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(10px);
  width:min(600px, 92vw); max-width:92vw; padding:14px;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; border-radius:26px;
  background:linear-gradient(180deg, rgba(255,255,255,.74) 0%, rgba(255,255,255,.58) 100%);
  backdrop-filter:blur(40px) saturate(1.9); -webkit-backdrop-filter:blur(40px) saturate(1.9);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 32px 64px -22px rgba(30,18,40,.4), 0 4px 12px rgba(30,18,40,.1),
             inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.35);
}
.nav__has-menu:hover .nav__menu{ transform:translateX(-50%) translateY(0); }
.nav__menu::before{ content:""; position:absolute; top:-16px; left:0; right:0; height:18px; }
.nav__menu-item{ display:flex; flex-direction:column; align-items:flex-start; gap:0; padding:14px 15px; border-radius:16px; text-align:left; transition:background .3s var(--ease-out); }
.nav__menu-item:hover{ background:rgba(255,255,255,.6); }
.nav__menu-ico{ display:none; }
.nav__menu-t{ display:block; font-size:.95rem; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.nav__menu-d{ display:block; font-size:.8rem; margin-top:5px; line-height:1.45; color:var(--tx-on-light-mute); }

/* --- hero background images fade in smoothly on page load ------------------- */
@keyframes heroBgFade{ from{ opacity:0 } to{ opacity:1 } }
.hero__media, .phero__bg{ animation:heroBgFade 1.15s var(--ease-out) both; }
@media (prefers-reduced-motion: reduce){ .hero__media, .phero__bg{ animation:none; opacity:1; } }

/* ============================================================================
   Footer redesign: oasis scene bg + full-width floating liquid-glass card (#55)
   ========================================================================== */
.footer{
  background:linear-gradient(180deg, rgba(18,12,24,.28), rgba(18,12,24,.42)), url(/assets/scenes/oasis.jpg) center/cover no-repeat;
  padding:clamp(16px,2.4vw,28px); padding-top:clamp(16px,2.4vw,28px);
  border-top:none; overflow:hidden; position:relative;
}
.footer .wrap{
  max-width:none; width:100%; margin:0;
  padding:clamp(72px,8vw,120px) clamp(28px,4.5vw,56px) clamp(48px,5vw,68px);
  border-radius:30px;
  background:linear-gradient(180deg, rgba(22,15,28,.62) 0%, rgba(16,11,22,.74) 100%);
  backdrop-filter:blur(16px) saturate(1.35); -webkit-backdrop-filter:blur(16px) saturate(1.35);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 44px 90px -40px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.24), inset 0 0 60px rgba(255,255,255,.03);
}
.footer__grid{ padding-bottom:clamp(56px,6vw,80px); }

/* ============================================================================
   Batch: plain pre-footer CTA · hero opacity · wider dropdown · footer glass
   ========================================================================== */

/* pre-footer CTA band: plain premium gradient (no scene image) so it doesn't
   clash with the new oasis footer */
.ctaband__bg{ display:none !important; }
.ctaband{ background:
  radial-gradient(120% 95% at 50% -10%, rgba(126,102,196,.30), transparent 56%),
  linear-gradient(180deg, #241b31 0%, #1a1422 55%, #15101c 100%); }

/* home hero background at 0.8 opacity */
@keyframes heroBgFade80{ from{ opacity:0 } to{ opacity:.8 } }
.hero__media{ animation-name:heroBgFade80; opacity:.8; }

/* services dropdown: wider so it's shorter in height */
.nav__menu{ width:min(760px, 94vw); }

/* footer glass card: more transparent so the oasis image reads through */
.footer .wrap{
  background:linear-gradient(180deg, rgba(22,15,28,.34) 0%, rgba(16,11,22,.46) 100%);
  backdrop-filter:blur(3px) saturate(1.4); -webkit-backdrop-filter:blur(3px) saturate(1.4);
}

/* light home-nav text gets a soft shadow for legibility over the dune hero */
.nav--over-dark:not(.scrolled) .nav__link{ text-shadow:0 1px 12px rgba(18,12,26,.45); }

/* ============================================================================
   Dropdown → same glassmorphism as the footer (dark glass, light text) +
   smaller headings · glass proof stat cards (home)
   ========================================================================== */
.nav__menu{
  background:linear-gradient(180deg, rgba(18,12,24,.58), rgba(18,12,24,.70)), url(/assets/scenes/oasis.jpg) center/cover no-repeat;
  backdrop-filter:blur(3px) saturate(1.4); -webkit-backdrop-filter:blur(3px) saturate(1.4);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 44px 90px -40px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.24), inset 0 0 60px rgba(255,255,255,.03);
}
.nav__menu-item:hover{ background:rgba(255,255,255,.08); }
.nav__menu-t{ font-family:var(--f-mono); font-weight:500; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--tx-on-dark-mute); }
.nav__menu-d{ color:var(--tx-on-dark-soft); }

/* Proof section cards → frosted glassmorphism like the footer wrapper
   (used on the Database Reactivation "Proof it works" section over a dusk scene) */
#proof .card{
  background:linear-gradient(180deg, rgba(22,15,28,.34) 0%, rgba(16,11,22,.46) 100%);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 44px 90px -40px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.24), inset 0 0 60px rgba(255,255,255,.03);
  backdrop-filter:blur(6px) saturate(1.4); -webkit-backdrop-filter:blur(6px) saturate(1.4);
}

/* home hero: fixed opacity + warm maroon backdrop behind the media */
.hero{ background:#472626; }
.hero__media{ opacity:0.7 !important; }

/* ============================================================================
   Launch pass (2026-07-13): hero trustrow legibility, charcoal lead fix,
   gradient stat numbers + bottom-aligned sources, full-width insight,
   consistent nav CTA width
   ========================================================================== */

/* trustrow text/ticks were dark on the dark page heroes (.sect-dark uncovered) */
.phero .trustrow__i, .sect-dark .trustrow__i{ color:var(--tx-on-dark-soft); }
.phero .trustrow__i svg, .sect-dark .trustrow__i svg{ color:var(--lavender-hi); }

/* lead paragraph was dark-on-dark inside charcoal sections (e.g. AI Bots) */
.sect-charcoal .lead{ color:var(--tx-on-dark-soft); }

/* stat panels: push the source line to the bottom so sources align across a row */
.stats{ align-items:stretch; }
.stat{ display:flex; flex-direction:column; }
.stat__src{ margin-top:auto; padding-top:14px; }

/* home "the shift" stat numbers → brand CTA gradient (lavender → peach) */
#shift .stat__num, #shift .stat__num .u{
  background:var(--grad-warm);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* "The part most owners miss" spans the full width on the home page */
#shift .insight{ max-width:none; }

/* keep the standardised (longer) nav CTA on one line */
.nav__right .btn{ white-space:nowrap; }

/* custom card illustrations (home: #how truths + #services ways-in) —
   replace the small icon chips; centered above the kicker + text */
.card__art{ display:block; width:100%; max-width:240px; height:auto; margin:-6px auto 20px; }
@media(max-width:820px){ .card__art{ max-width:224px; } }
/* three-leaks cards: larger, more prominent illustrations */
#leaks .card__art{ max-width:292px; margin:-4px auto 22px; }
@media(max-width:820px){ #leaks .card__art{ max-width:268px; } }


/* pre-footer free-audit CTA: branded AI report image, blurred + darkened so it
   reads as a subtle textured background, not a legible report screenshot. */
.ctaband{ background:#15101c !important; }
.ctaband::before{ content:""; position:absolute; inset:-24px; z-index:0;
  background:url('/assets/generated/ai-visibility-report-cta.jpg') top / cover no-repeat;
  filter:blur(2px) brightness(0.4) saturate(0.52); }
.ctaband::after{ content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(12,8,17,.18), rgba(11,7,16,.42)); }
.ctaband > *{ position:relative; z-index:1; }
.ctaband__bg{ display:none !important; }


/* insight callout — two-column with brand illustration */
.insight{ display:grid; grid-template-columns:1.35fr .92fr; gap:clamp(22px,3.4vw,46px); align-items:center; }
.insight__body{ min-width:0; }
.insight__art{ margin:0; }
.insight__art img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:16px;
  border:1px solid var(--hair-d); box-shadow:0 34px 74px -36px rgba(0,0,0,.62); }
@media(max-width:760px){ .insight{ grid-template-columns:1fr; gap:22px; } .insight__art img{ aspect-ratio:16/10; } }


/* animated AI-logo cycler before "AI" in service hero headings */
.ai-lockup{ white-space:nowrap; }   /* keeps the logo glued to the immediate left of "AI" so a line-break never strands it */
.ailogo{ position:relative; display:inline-block; width:.86em; height:.86em; vertical-align:-.08em; margin-right:.14em; }
.ailogo__i{ position:absolute; inset:0; display:grid; place-items:center; opacity:0; will-change:opacity,transform;
  animation:aiLogoCycle 12s cubic-bezier(.4,0,.2,1) infinite; animation-delay:calc(var(--i) * -2.4s); }
.ailogo__i svg{ width:100%; height:100%; fill:currentColor; display:block; }
@keyframes aiLogoCycle{ 0%{opacity:0;transform:scale(.55) rotate(-7deg)} 3%{opacity:1;transform:scale(1) rotate(0)}
  17%{opacity:1;transform:scale(1) rotate(0)} 20%{opacity:0;transform:scale(.55) rotate(7deg)} 100%{opacity:0} }
@media(prefers-reduced-motion:reduce){ .ailogo__i{ animation:none } .ailogo__i[style*="--i:0"]{ opacity:1 } }

/* insight illustration — controlled height (aspect-ratio was not constraining in-grid) */
.insight__art img{ height:clamp(300px,30vw,430px); aspect-ratio:auto; }
@media(max-width:760px){ .insight__art img{ height:220px; } }

/* mobile menu open — show the DARK logo on the cream panel (not the faint light one) */
body.menu-open .nav__logo .logo-light{ display:none !important; }
body.menu-open .nav__logo .logo-dark{ display:block !important; }


/* ai-ready monitoring section — slightly blurred arch bg + glowing orbit-orb overlay */
.feature__media--orb .feature__bg{ filter:blur(3px) brightness(.96) saturate(1.03); transform:scale(1.09); }
.feature__media--orb .feature__orb{ position:absolute; inset:0; margin:auto; width:86%; height:86%;
  object-fit:contain; pointer-events:none; will-change:transform; animation:orbFloat 9s ease-in-out infinite; }
@keyframes orbFloat{ 0%,100%{ transform:translateY(-1.6%) } 50%{ transform:translateY(1.6%) } }
@media(prefers-reduced-motion:reduce){ .feature__media--orb .feature__orb{ animation:none } }


/* insight illustration is now a transparent vector graphic — no photo frame */
.insight__art img{ object-fit:contain !important; border:none !important; box-shadow:none !important; border-radius:0 !important; height:clamp(320px,34vw,470px) !important; aspect-ratio:auto !important; }
@media(max-width:760px){ .insight__art img{ height:300px !important; } }


/* "Live simulation" badge — pulsing dot + pill outline to signal a live scan */
.chip--live .dot{ animation:liveDot 1.8s ease-out infinite; }
.chip--live{ animation:liveRing 1.8s ease-in-out infinite; }
@keyframes liveDot{ 0%{ box-shadow:0 0 0 0 rgba(176,155,233,.6) } 70%,100%{ box-shadow:0 0 0 7px rgba(176,155,233,0) } }
@keyframes liveRing{ 0%,100%{ border-color:var(--hair-d) } 50%{ border-color:rgba(201,182,255,.65) } }
@media(prefers-reduced-motion:reduce){ .chip--live,.chip--live .dot{ animation:none } }


/* audit page: lighter "Watch a live scan" backdrop (scoped; home stays as-is) */
.avc--light .avc__scene::after{ background:linear-gradient(120deg, rgba(40,30,52,.60), rgba(56,42,74,.40)); }

/* proof cards: GPU-composited + paint-contained so the backdrop blur no longer janks on scroll */
#proof .card{ transform:translateZ(0); -webkit-transform:translateZ(0); contain:paint; }
#proof .sect-scene__bg{ transform:translateZ(0); }

/* ── Related-answer cards ─────────────────────────────────────────────────────
   Shared by the Ask Evara guides and the service pages (which link out to the
   matching guides). Promoted here from ask.css so service pages get it without
   pulling in the whole guide stylesheet. */
.related{ margin-top:clamp(44px,5vw,64px); }
.related__k{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tx-on-light-mute); margin-bottom:14px; }
/* auto-FIT, not auto-fill: collapses empty tracks so a 2-card row (service pages)
   fills the width evenly instead of leaving a phantom third column. Identical
   behaviour when every track is filled, so the 3-card guide rows are unaffected. */
.related__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.relcard{ display:flex; flex-direction:column; border-radius:var(--radius-lg); background:var(--porcelain);
  border:1px solid var(--hair-l); overflow:hidden;
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s; }
.relcard:hover{ transform:translateY(-4px); box-shadow:0 30px 58px -32px rgba(40,26,50,.42); border-color:var(--lavender); }
.relcard__media{ aspect-ratio:16/9; overflow:hidden; background:var(--mist); }
.relcard__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out); }
.relcard:hover .relcard__media img{ transform:scale(1.05); }
.relcard__body{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.relcard__k{ font-family:var(--f-mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--peach-deep); margin-bottom:10px; }
.relcard__q{ font-family:var(--f-display); font-weight:400; font-size:1.12rem; line-height:1.24; color:var(--ink); }
.relcard__go{ margin-top:14px; display:inline-flex; align-items:center; gap:7px; font-size:.84rem;
  color:var(--lavender-deep); font-weight:600; }
.relcard__go svg{ width:15px; height:15px; }
@media (prefers-reduced-motion: reduce){
  .relcard, .relcard__media img{ transition:none; }
}