/* ============================================================
   Nova Digital — design system v4
   Donor tokens (localhost:8124 @1440): one grotesque, roles by
   size/weight/case; h1 56/59 w500 sentence · h2 36 ls-.02em ·
   body 16/24 · hero copy rhythm 36px · pillar gap 96px · wrap 1400
   Fonts: 2-font system — Montserrat (display: headings, labels,
   numerals) + Inter (body: text, UI). CopperplateStd = LOGO ONLY.
   Palette: black #0A0B0C · silver #D6D8DA · one moonlight blue
   ============================================================ */

@font-face{
  font-family:'CopperplateStd';
  src:url('../assets/fonts/CopperplateGothicStd.ttf') format('truetype');
  font-display:swap;
}

:root{
  /* -- palette ------------------------------------------------ */
  --bg:          #0A0B0C;
  --ink:         #ECEDEF;
  --ink-dim:     #94979D;
  --silver:      #D6D8DA;
  --paper:       #F5F5F4;
  --paper-ink:   #131416;
  --paper-dim:   #5C6066;
  --paper-line:  #E5E5E3;
  --accent:      #7DB4FF;
  --accent-2:    #4C8DFF;
  --accent-deep: #2F6FE0;
  --grad:        linear-gradient(92deg, var(--accent-2), var(--accent));
  --card-bg:     rgba(16,17,19,.84);
  --card-bg-solid: #101216;
  --line:        rgba(255,255,255,.08);

  /* -- type system --------------------------------------------
     RULE: the logo font (CopperplateStd) is used ONLY in the logo
     wordmark. Never in headings, body, labels, or numerals.
     Donor audit (localhost:8124): ONE grotesque on 799/822 nodes;
     roles are carved by size / weight / case / tracking alone:
       h1 56/59 w500 sentence-case · h2 36/37 w500 ls-.02em
       h3 20/24 w400 · body+lead 20/28 w400 · quote 22/31 w400
       nav 14 w500 CAPS · button 14 w500 CAPS ls.14em
       stat numeral 84/84 w700 · labels CAPS tracked
     We follow the same one-grotesque grammar (Montserrat).
     ------------------------------------------------------------ */
  --font-logo:    'CopperplateStd', 'Times New Roman', serif; /* logo wordmark ONLY */
  --font-display: 'Montserrat', system-ui, sans-serif;        /* headings, labels, numerals */
  --font-body:    'Inter', system-ui, sans-serif;             /* body text + UI */

  /* text-role variables — all Montserrat, roles by size/weight/case */
  --t-h1:        clamp(2.3rem, 4.6vw, 3.5rem);    /* donor 56px, sentence-case w600 */
  --t-h2:        clamp(1.65rem, 3vw, 2.3rem);     /* donor 36px */
  --t-h3:        1.1rem;                           /* w600 · donor 20px */
  --t-sub:       1.2rem;                           /* w400 · donor lead 20px */
  --t-body:      16px;                             /* w400 · donor 16px */
  --t-quote:     1.08rem;                          /* w400 · donor 22px scaled */
  --t-nav:       .88rem;                           /* w500 · donor 14px */
  --t-btn:       .8rem;                            /* w600 CAPS · donor 14px */
  --t-label:     .76rem;                           /* CAPS wide · kickers, footer */
  --t-stat:      clamp(2.5rem, 5vw, 3.9rem);       /* w700 · 4-up results */
  --lh-disp:     1.08;                             /* donor 1.05 */
  --lh-text:     1.55;
  --track-disp:  -.02em;                           /* donor h2 -0.72px @36 */
  --track-caps:  .13em;                            /* donor buttons .14em */
  --track-wide:  .2em;

  /* -- space / layout (donor-derived) -------------------------
     hero copy rhythm 36px · pillar column gap 96px · grid gap 72px
     container 1400 · side gutter 32px */
  --wrap:        1320px;
  --sect:        clamp(88px, 8.5vw, 132px);
  --rhythm:      2.25rem;   /* 36px — donor hero copy gap */
  --gutter:      32px;
  --pillar-gap:  96px;      /* donor pillar media↔copy */
  --gap:         24px;      /* card grid gap */

  /* -- shape (donor buttons 3.5px, cards ~12) ----------------- */
  --radius:      14px;
  --radius-sm:   10px;
  --radius-btn:  4px;

  /* -- motion (donor durations/easings) ----------------------- */
  --dur:         .25s;
  --ease:        cubic-bezier(.4, 0, .2, 1);
  --ease-out:    cubic-bezier(.22, 1, .36, 1);

  /* -- surface nuances (from card render: engraved edges) ----- */
  --edge:        inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.55);
  --shadow:      0 24px 60px -18px rgba(0,0,0,.55);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:var(--t-body); line-height:var(--lh-text);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2{
  font-family:var(--font-display); font-weight:600;
  line-height:var(--lh-disp); letter-spacing:var(--track-disp);
  margin:0 0 .5em;
}
h1{ font-size:var(--t-h1); }
h2{ font-size:var(--t-h2); }
h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.25; margin:0 0 .5em; }
h3{ font-size:var(--t-h3); }
p{ margin:0 0 1em; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; }
.ic{ width:1.05em; height:1.05em; flex:none; }

/* solid accent, not background-clip:text — clip-to-text repeatedly
   froze Chrome's rasterizer in this project; keep text fills solid */
.grad-text{ color:var(--accent); }
.kicker{
  font-family:var(--font-display); font-weight:600; font-size:var(--t-label);
  letter-spacing:var(--track-wide); text-transform:uppercase;
  color:var(--accent); margin-bottom:1.2em;
}
.light .kicker{ color:var(--accent-deep); }
.section-lead{ color:var(--ink-dim); font-size:var(--t-sub); line-height:1.45; max-width:580px; }
.light .section-lead{ color:var(--paper-dim); }

/* ---------- buttons (donor: caps, tracked, near-sharp) ------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font-display); font-weight:600; font-size:var(--t-btn);
  text-transform:uppercase; letter-spacing:var(--track-caps);
  padding:1.05em 1.7em; border-radius:var(--radius-btn); white-space:nowrap;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn-grad{
  background:var(--grad); color:#06090F;
  box-shadow:0 8px 30px -10px rgba(76,141,255,.5);
}
.btn-grad:hover{ transform:translateY(-2px); box-shadow:0 14px 40px -10px rgba(76,141,255,.65); }
.btn-ghost{
  border:1px solid var(--line); color:var(--ink);
  background:rgba(255,255,255,.03); backdrop-filter:blur(6px);
}
.btn-ghost:hover{ transform:translateY(-2px); background:rgba(255,255,255,.07); }
.btn-lg{ padding:1.2em 2.1em; font-size:.88rem; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto; z-index:50;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(10,11,12,.8); backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.nav-inner{
  max-width:none; margin:0; padding:18px 44px;
  display:flex; align-items:center; gap:32px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-logo{ height:42px; width:auto; flex:none; color:var(--silver); }
.brand-logo .crater{ fill:var(--bg); }
.brand-name{
  display:flex; flex-direction:column; line-height:1.02;
  font-family:var(--font-logo); font-weight:400; font-size:.95rem;
  letter-spacing:.16em; color:var(--silver); white-space:nowrap;
}
/* header nav: links + dropdowns + tel + buttons */
.nav-links{ margin-left:auto; display:flex; align-items:center; gap:4px; }
.nav-item{ position:relative; }
.nav-link{
  display:inline-flex; align-items:center; gap:.3em;
  font-family:var(--font-display); font-weight:500; font-size:.92rem;
  color:var(--silver); padding:.5em .9em; border-radius:8px;
  transition:color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav-link:hover{ color:var(--ink); background:rgba(255,255,255,.05); }
.has-menu > .nav-link::after{
  content:""; width:.62em; height:.62em; flex:none; opacity:.6;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.75 4.75 6 8 9.25 4.75' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.75 4.75 6 8 9.25 4.75' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.nav-menu{
  position:absolute; top:calc(100% + 6px); left:0; min-width:250px;
  background:rgba(16,17,19,.97); backdrop-filter:blur(16px);
  border:1px solid var(--line); border-radius:12px; padding:8px;
  display:flex; flex-direction:column; gap:2px; box-shadow:var(--shadow); z-index:60;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility 0s .2s;
}
.nav-item:hover .nav-menu, .nav-item:focus-within .nav-menu{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.nav-menu a{ font-size:.88rem; color:var(--ink-dim); padding:.6em .8em; border-radius:8px; white-space:nowrap;
  transition:color var(--dur) var(--ease), background var(--dur) var(--ease); }
.nav-menu a:hover{ color:var(--ink); background:rgba(255,255,255,.06); }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-tel{ font-family:var(--font-display); font-weight:600; font-size:.9rem; color:var(--silver); white-space:nowrap; }
.nav-tel:hover{ color:var(--ink); }
.btn-sm{ padding:.72em 1.2em; font-size:.72rem; }

/* scaffold subpages (Contact, Packages, Reviews, Blog, legal, Login) */
.subpage{ background:var(--bg); min-height:100vh; }
.subpage .nav{ background:rgba(10,11,12,.86); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.page-scaffold{ min-height:80vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:170px 24px 110px; position:relative; }
.page-scaffold-inner{ max-width:640px; position:relative; z-index:1; }
.page-scaffold h1{ font-size:clamp(2.2rem, 5vw, 3.4rem); margin:.15em 0 .5em; }
.page-scaffold-note{ color:var(--ink-dim); font-size:1.1rem; margin-bottom:2em; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding:130px 28px 90px; overflow:hidden;
  /* placeholder 4K render: Pexels #31650443 (free license) + scrim */
  background:
    linear-gradient(115deg, rgba(10,11,12,.92) 0%, rgba(10,11,12,.72) 45%, rgba(10,11,12,.45) 100%),
    url('../assets/hero-silk.webp') center / cover no-repeat;
}
.aurora{ position:absolute; inset:0; width:100%; height:100%; }
.hero-inner{
  position:relative; z-index:2; max-width:var(--wrap); margin:0 auto;
  display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);
  gap:var(--pillar-gap); align-items:center; width:100%;
}
/* donor hero copy: uniform 36px vertical rhythm (kicker→h1→sub→cta) */
.hero-copy .kicker{ margin-bottom:1.4rem; }
.hero-copy h1{ margin-bottom:var(--rhythm); }
/* max-width is refined by JS to 90% of the H1's longest line; this is the fallback */
.hero-sub{ color:var(--ink-dim); font-size:var(--t-sub); line-height:1.5; max-width:min(90%, 44ch); margin:0; }
.hero-sub-tag{ display:inline-block; margin-top:.2em; color:var(--ink-dim); opacity:.7; font-style:italic; }
.hero-actions{ display:flex; gap:14px; margin-top:var(--rhythm); flex-wrap:wrap; }
.hero-actions.center{ justify-content:center; }
.hero-note{
  margin-top:1.6rem; font-size:.84rem; letter-spacing:.04em;
  color:var(--ink-dim); opacity:.85;
}
.hero-fade{
  position:absolute; z-index:1; left:0; right:0; bottom:0; height:140px;
  background:linear-gradient(to bottom, transparent, var(--bg));
  pointer-events:none;
}

/* ---------- stage & scenes ---------- */
.stage{
  position:relative; height:min(560px, 72vh); min-height:420px;
  perspective:1200px;
}
.scene{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .9s var(--ease), visibility 0s linear .9s;
}
.scene.is-on{ opacity:1; visibility:visible; transition:opacity .9s var(--ease); }

/* entrances are owned by anime.js (js/scenes.js); cards start hidden and a
   gentle continuous float is layered on via the `translate` property so it
   composes with anime's `transform` without fighting it */
.scene .card{ opacity:0; }
.scene.is-on .card{ animation:card-float 7s ease-in-out infinite alternate; }
@keyframes card-float{ from{ translate:0 0; } to{ translate:0 -14px; } }

/* ---------- card base (engraved-glass surface) ---------- */
.card{
  position:absolute;
  background:var(--card-bg); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow), var(--edge);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  color:var(--ink); font-size:.9rem;
  will-change:transform, opacity;
}
.chip{
  display:inline-flex; align-items:center; gap:.35em;
  font-size:.68rem; font-weight:600; letter-spacing:.03em;
  padding:.28em .7em; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid var(--line);
}
.chip-glow{
  background:linear-gradient(92deg, rgba(76,141,255,.16), rgba(125,180,255,.16));
  border-color:rgba(125,180,255,.38); color:var(--accent);
}
.chip-cite{
  background:rgba(125,180,255,.12); border-color:rgba(125,180,255,.4);
  color:#A9CBFF; font-family:ui-monospace, monospace; letter-spacing:0;
}
.stars{ color:#FFC94D; letter-spacing:.12em; font-size:.82em; }
.stars.dim{ color:#8B8F9C; }

/* search pill */
.search-pill{
  top:4%; left:6%;
  display:flex; align-items:center; gap:.7em;
  padding:.85em 1.3em; border-radius:999px; font-size:.95rem;
  color:var(--ink);
}
.search-pill .ic{ color:var(--ink-dim); }
.pill-dot{ width:.85em; height:.85em; border-radius:50%; background:var(--grad); flex:none; }

/* map pack */
.map-pack{ top:22%; left:0; width:min(360px, 92%); padding:1.1em 1.15em .6em; }
.mp-head{
  display:flex; align-items:center; gap:.5em; color:var(--ink-dim);
  font-size:.78rem; letter-spacing:.04em; margin-bottom:.8em;
}
.mp-head .ic{ color:var(--accent); }
.mp-row{
  display:flex; align-items:center; gap:.8em;
  padding:.7em .6em; border-radius:var(--radius-sm); margin-bottom:.25em;
}
.mp-row.is-us{
  background:linear-gradient(92deg, rgba(76,141,255,.12), rgba(125,180,255,.08));
  border:1px solid rgba(125,180,255,.28);
}
.mp-rank{
  width:1.7em; height:1.7em; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.8rem;
  background:rgba(255,255,255,.07); color:var(--ink-dim);
}
.mp-row.is-us .mp-rank{ background:var(--grad); color:#06090F; }
.mp-body{ display:flex; flex-direction:column; gap:.15em; min-width:0; }
.mp-body strong{ font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-meta{ font-size:.76rem; color:var(--ink-dim); }
.mp-row .chip{ margin-left:auto; }

/* stat chip */
.stat-chip{
  bottom:8%; right:4%;
  display:flex; align-items:center; gap:.6em;
  padding:.8em 1.2em; font-size:.88rem; color:var(--ink-dim);
}
.stat-chip .ic{ color:var(--accent); }
.stat-chip strong{ color:var(--accent); }

/* GBP card */
.gbp-card{ top:8%; left:4%; width:min(330px, 92%); padding:1.2em 1.25em; }
.gbp-head{ display:flex; align-items:center; gap:.8em; margin-bottom:.7em; }
.gbp-avatar{
  width:2.6em; height:2.6em; border-radius:var(--radius-sm); flex:none;
  background:var(--grad); color:#06090F;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:1rem;
}
.gbp-id{ display:flex; flex-direction:column; gap:.1em; min-width:0; }
.gbp-id strong{ font-size:.98rem; }
.gbp-verified{
  display:inline-flex; align-items:center; gap:.35em;
  font-size:.74rem; color:var(--accent);
}
.gbp-verified .ic{ color:var(--accent); }
.gbp-stars{ font-size:.9rem; margin-bottom:.35em; }
.gbp-status{ display:flex; align-items:center; gap:.5em; font-size:.82rem; color:var(--ink-dim); }
.dot-open{ width:.55em; height:.55em; border-radius:50%; background:#3ADB7C; box-shadow:0 0 8px #3ADB7C88; }
.gbp-photos{ display:flex; gap:.5em; margin:.9em 0; }
.gbp-photos span{
  height:52px; flex:1; border-radius:8px;
  background:linear-gradient(135deg, #24272C, #383D45);
}
.gbp-photos span:nth-child(2){ background:linear-gradient(135deg, #1D2A3C, #2F4A6B); }
.gbp-photos span:nth-child(3){ background:linear-gradient(135deg, #2B2E34, #4A505A); }
.gbp-actions{ display:flex; gap:.5em; }
.gbp-actions span{
  flex:1; text-align:center; font-size:.78rem; font-weight:600;
  padding:.55em 0; border-radius:999px;
  border:1px solid var(--line); color:var(--accent);
}

/* review note */
.review-note{ bottom:14%; right:2%; width:min(270px, 86%); padding:1.1em 1.2em; }
.review-note p{ margin:.4em 0 .6em; font-size:.92rem; }
.rn-foot{ display:flex; align-items:center; gap:.5em; font-size:.75rem; color:var(--ink-dim); }

/* mini chip cards */
.mini-chip{
  bottom:2%; left:14%;
  display:flex; align-items:center; gap:.6em;
  padding:.75em 1.15em; font-size:.83rem; color:var(--ink-dim);
}
.mini-chip .ic{ color:var(--accent); }
.mini-chip.glowline{ color:var(--ink); border-color:rgba(125,180,255,.4); }

/* AI card */
.ai-card{ top:10%; left:2%; width:min(360px, 94%); padding:1.15em 1.2em; }
.ai-q{
  display:flex; align-items:center; gap:.7em;
  font-size:.9rem; color:var(--ink);
  padding-bottom:.8em; border-bottom:1px solid var(--line); margin-bottom:.9em;
}
.ai-avatar{
  width:1.9em; height:1.9em; border-radius:50%; flex:none;
  background:linear-gradient(135deg, #35507E, #5F79AC);
}
.ai-a{ position:relative; padding-left:1.7em; }
.ai-a p{ font-size:.9rem; margin:0 0 .7em; color:var(--ink-dim); }
.ai-a p strong{ color:var(--ink); }
.ai-spark{
  position:absolute; left:0; top:.05em;
  color:var(--accent); font-size:1.05em;
}
.mini-chip .ai-spark, .glowline .ai-spark{ position:static; }

/* engine chips */
.engine-chips{ bottom:6%; right:6%; display:flex; gap:.5em; padding:.7em .9em; }
.engine-chips span{
  font-size:.74rem; font-weight:600; padding:.4em .85em;
  border-radius:999px; border:1px solid var(--line);
  background:rgba(255,255,255,.05); color:var(--ink-dim);
}

/* chart card */
.chart-card{ top:10%; left:6%; width:min(330px, 92%); padding:1.15em 1.2em; }
.cc-head{
  display:flex; align-items:center; justify-content:space-between;
  font-weight:600; font-size:.92rem; margin-bottom:.8em;
}
.cc-chart{ width:100%; height:90px; }
.cc-foot{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:.8rem; color:var(--ink-dim); margin-top:.7em;
}
.cc-foot strong{ font-size:1.05rem; color:var(--accent); }

/* url pill */
.url-pill{
  bottom:22%; right:4%;
  display:flex; align-items:center; gap:.6em;
  padding:.8em 1.3em; border-radius:999px;
  font-family:ui-monospace, monospace; font-size:.85rem;
}
.url-pill .ic{ color:var(--accent); }

/* audit card */
.audit-card{ bottom:10%; right:4%; width:min(280px, 88%); padding:1.1em 1.2em; }
.audit-list{ list-style:none; margin:0; padding:0; }
.audit-list li{
  display:flex; gap:.6em; align-items:center;
  font-size:.85rem; color:var(--ink-dim); padding:.32em 0;
}
.audit-list .ok{ color:var(--accent); font-weight:700; }
.audit-list .warn{ color:var(--ink-dim); font-weight:700; }

/* ============================================================
   PLATFORM DOCK (macOS-style app-icon dock)
   ============================================================ */
.dock-sec{ position:relative; z-index:5; padding:44px 28px 20px; text-align:center; }
.dock-label{
  font-family:var(--font-display); font-weight:600; font-size:.72rem;
  letter-spacing:var(--track-wide); text-transform:uppercase;
  color:var(--ink-dim); margin-bottom:2.9rem;  /* clearance for magnified icons */
}
/* liquid-glass bar (Apple "liquid glass" look, per rdev/liquid-glass-react):
   heavy backdrop blur + saturation, translucent gradient fill, a bright
   top specular sheen, refractive inner ring, and a soft floating shadow. */
.dock{
  /* dockbar magnification vars (JS reads these). Mirrors the
     CatsJuice/dockbar params: base icon size, reach of the effect, and
     peak scale. Each icon reserves base*scale of LAYOUT width, so the
     bar widens and neighbours slide apart (they never overlap). */
  --dock-base:56px;       /* resting icon size (px) */
  --dock-range:150px;     /* how far from the cursor the effect reaches (px) */
  --dock-max-scale:1.65;  /* peak scale under the cursor; capped so the tallest
                             icon clears the "we manage…" label above the dock
                             (56*1.65≈92px, overflows the bar top by ~24px, and the
                             label now sits ~42px above the bar → no overlap) */
  position:relative;
  display:inline-flex; align-items:flex-end; gap:10px;
  height:80px; padding:0 14px 12px;
  border-radius:26px; overflow:visible;
  background:linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.045) 42%, rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.18);
  /* lighter blur = cheaper re-compute as the bar widens each frame */
  backdrop-filter:blur(16px) saturate(1.7) brightness(1.05);
  -webkit-backdrop-filter:blur(16px) saturate(1.7) brightness(1.05);
  box-shadow:
    0 30px 64px -20px rgba(0,0,0,.8),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 2px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(255,255,255,.06);
}
.dock::before{  /* specular sheen across the top of the glass */
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.3), transparent 32%);
  opacity:.55;
}
.dock-app{
  position:relative; z-index:1; flex:none;
  /* the OUTER box only reserves layout width (base*scale) so the bar widens
     and neighbours slide apart — cheap layout, no repaint */
  width:var(--dock-base); height:var(--dock-base);
  display:flex; align-items:flex-end; justify-content:center;
  contain:layout style;
}
.dock-app img{
  /* the icon stays base-sized (rasterised ONCE) and is magnified with a GPU
     transform — no per-frame image re-rasterisation, so it stays smooth */
  width:var(--dock-base); height:var(--dock-base); flex:none;
  object-fit:contain; transform-origin:bottom center;
  will-change:transform; backface-visibility:hidden;
  border-radius:24%; background:#fff; padding:14%;
  box-shadow:0 8px 16px -5px rgba(0,0,0,.55);
}
.dock-app img.full{ padding:0; background:transparent; object-fit:cover; }
.dock-app:hover{ z-index:50; }
.dock-tip{ z-index:60; }
/* magnification eases toward the cursor target every frame in JS (main.js §5),
   fading in over ~280ms and out over ~240ms — no CSS width transition (kept off
   the layout path so it never janks or freezes in throttled tabs) */
.dock-tip{
  position:absolute; bottom:calc(100% + 16px); left:50%; translate:-50% 0;
  font-family:var(--font-body); font-size:.72rem; white-space:nowrap;
  background:rgba(18,19,21,.94); color:#fff;
  padding:.42em .72em; border-radius:8px;
  border:1px solid rgba(255,255,255,.1);
  opacity:0; pointer-events:none; transition:opacity .18s var(--ease);
}
.dock-app:hover .dock-tip{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .dock-app{ width:var(--dock-base); height:var(--dock-base); transition:none; }
}

/* ============================================================
   PILLARS
   ============================================================ */
/* full-bleed white background; content centred to --wrap via .pillar */
.pillars{ padding:calc(var(--sect) * .55) 28px calc(var(--sect) * .35); }
.pillar{
  max-width:var(--wrap); margin-inline:auto;
  display:grid; grid-template-columns:1fr 1fr; gap:var(--pillar-gap);
  align-items:start; padding:calc(var(--sect) * .45) 0;
}
.pillar.flip .pillar-media{ order:2; }
.pillar.flip .pillar-copy{ order:1; }
.media-box{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:
    linear-gradient(160deg, rgba(10,11,12,.55), rgba(10,11,12,.75)),
    #0B0C0E url('../assets/card-silk.webp') center / cover no-repeat;
  border:1px solid var(--line);
  aspect-ratio:5/4;
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.7);
}
.media-box .card{ position:absolute; }
.media-box .gbp-card{ top:9%; left:7%; width:min(300px, 80%); }
.media-box .review-note{ bottom:9%; right:6%; }
.media-box .url-pill{ top:12%; left:8%; bottom:auto; right:auto; }
.media-box .audit-card{ bottom:11%; right:8%; }
.media-box .ai-card{ top:12%; left:7%; width:min(330px, 86%); }
.media-box .engine-chips{ bottom:9%; right:7%; }
.float-slow{ animation:card-float 8s ease-in-out infinite alternate; }
.float-late{ animation-delay:2.4s; }

/* pillar flow videos (reel clips) — square 540×540 black screen, video letterboxes seamlessly */
.media-box.video-box{ background:#000; aspect-ratio:1; width:530px; max-width:100%; margin-inline:auto; }
.pillar-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; }

/* social-proof band — aggregate rating + portfolio impact stats */
.proof-band{ background:var(--paper); color:var(--paper-ink); padding:calc(var(--sect) * .5) 28px; }
.proof-inner{ max-width:var(--wrap); margin:0 auto; display:grid; grid-template-columns:1.25fr 1fr; gap:24px; align-items:stretch; }
.proof-card{ background:#fff; border:1px solid var(--paper-line); border-radius:22px; padding:38px 42px;
  box-shadow:0 16px 50px -26px rgba(10,12,20,.18); }
.proof-rating h2{ font-size:clamp(1.5rem,2.3vw,2rem); line-height:1.16; margin:0 0 1.1em; color:var(--paper-ink); }
.proof-rate{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.proof-rate .stars{ color:#FBBC04; font-size:1.15rem; letter-spacing:2px; }
.stars-img{ height:19px; width:auto; display:inline-block; flex:none; }
.proof-rate-txt{ color:var(--paper-dim); font-size:1rem; }
.proof-rate-txt strong{ color:var(--paper-ink); font-weight:700; }
.proof-faces{ display:inline-flex; margin-left:6px; }
.proof-faces span{ width:36px; height:36px; border-radius:50%; border:2px solid #fff; margin-left:-12px;
  background:linear-gradient(135deg,#4C8DFF,#7DB4FF); box-shadow:0 2px 6px rgba(0,0,0,.12); }
.proof-faces span:nth-child(2){ background:linear-gradient(135deg,#2E4E7A,#4C8DFF); }
.proof-faces span:nth-child(3){ background:linear-gradient(135deg,#1F6B62,#3ADB7C); }
.proof-stats{ display:flex; flex-direction:column; justify-content:center; }
.proof-label{ font-family:var(--font-display); font-weight:600; font-size:.82rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--paper-dim); margin-bottom:1.3em; }
.proof-stat-row{ display:flex; gap:24px; justify-content:space-between; }
.proof-stat{ display:flex; flex-direction:column; min-width:0; }
.proof-stat strong{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.8rem,3vw,2.4rem);
  color:var(--accent-2); line-height:1; }
.proof-stat span{ font-size:.85rem; color:var(--paper-dim); margin-top:.55em; }
.pillar-lead{ color:var(--ink-dim); font-size:1.08rem; margin-bottom:1.6em; }
.light .pillar-lead{ color:var(--paper-dim); }

/* accordions (height animated by JS; content fades in) */
.acc details{ border-top:1px solid var(--line); overflow:hidden; }
.acc details:last-child{ border-bottom:1px solid var(--line); }
.acc summary{
  cursor:pointer; list-style:none; position:relative;
  font-family:var(--font-body); font-weight:600; font-size:1.02rem;
  padding:1em 2.2em 1em 0; transition:color var(--dur) var(--ease);
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary::after{
  content:"+"; position:absolute; right:.2em; top:50%;
  translate:0 -50%; font-weight:400; font-size:1.25em;
  color:var(--accent); transition:rotate .3s var(--ease);
}
.acc details[open] summary::after{ rotate:45deg; }
.acc details p{
  margin:0; padding:0 1.5em 1.2em 0;
  color:var(--ink-dim); font-size:.95rem;
}
.acc details[open] p{ animation:acc-in .45s var(--ease-out) both; }
@keyframes acc-in{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:none; }
}
.acc summary:hover{ color:var(--accent); }

/* ============================================================
   LIGHT SECTIONS
   ============================================================ */
.light{ background:var(--paper); color:var(--paper-ink); }
.acc-light details{ border-color:#DEDEDC; }
.acc-light summary::after{ color:var(--accent-deep); }
.acc-light summary:hover{ color:var(--accent-deep); }
.acc-light details p{ color:var(--paper-dim); }

/* ============================================================
   GBP SLIDESHOW
   ============================================================ */
.gbp-show{ padding:var(--sect) 28px; text-align:center; }
.gbp-show-inner{ max-width:var(--wrap); margin:0 auto; }
.gbp-slider{
  position:relative; margin:52px auto 0; max-width:640px;
  display:flex; align-items:center; gap:12px;
}
.gbp-viewport{ overflow:hidden; border-radius:calc(var(--radius) + 4px); flex:1; }
.gbp-track{ display:flex; transition:transform .55s var(--ease-out); }
.gbp-slide{ flex:0 0 100%; padding:6px; }
.gbp-pro{
  background:var(--card-bg-solid); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; text-align:left;
  box-shadow:var(--shadow), var(--edge);
}
.gbp-cover{ position:relative; height:132px; }
.cover-a{ background:linear-gradient(135deg,#1B2A45,#2E4E7A); }
.cover-b{ background:linear-gradient(135deg,#123B3A,#1F6B62); }
.cover-c{ background:linear-gradient(135deg,#241C42,#4A3A78); }
.cover-d{ background:linear-gradient(135deg,#2A2320,#5A3D2A); }
.gbp-cover::after{  /* subtle photo sheen */
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,.18), transparent 60%);
}
.gbp-badge{
  position:absolute; top:12px; right:12px; z-index:2;
  font-size:.68rem; font-weight:600; letter-spacing:.02em;
  padding:.32em .7em; border-radius:999px;
  background:linear-gradient(92deg, rgba(76,141,255,.9), rgba(125,180,255,.9));
  color:#06090F;
}
.gbp-pro-body{ padding:18px 20px 20px; margin-top:-34px; position:relative; }
.gbp-pro-body .gbp-avatar{ width:3.4em; height:3.4em; font-size:1.05rem; border:3px solid var(--card-bg-solid); }
.gbp-pro-body .gbp-head{ align-items:flex-end; margin-bottom:.8em; }
.gbp-pro-body .gbp-id strong{ font-size:1.1rem; }
.gbp-pro-body .gbp-stars{ font-size:.95rem; }
.gbp-pro-body .gbp-photos span{ height:60px; }
.gbp-nav{
  flex:none; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line); background:rgba(255,255,255,.04);
  color:var(--ink); font-size:1.4rem; line-height:1; cursor:pointer;
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.gbp-nav:hover{ background:rgba(255,255,255,.1); transform:translateY(-2px); }
.gbp-dots{ display:flex; justify-content:center; gap:9px; margin-top:26px; }
.gbp-dot{
  width:8px; height:8px; border-radius:50%; padding:0; cursor:pointer;
  border:none; background:rgba(255,255,255,.2);
  transition:background var(--dur) var(--ease), width var(--dur) var(--ease);
}
.gbp-dot.on{ width:22px; border-radius:999px; background:var(--grad); }

/* ============================================================
   RESULTS BAND
   ============================================================ */
.results{
  position:relative; padding:var(--sect) 28px; overflow:hidden;
  background:
    linear-gradient(rgba(10,11,12,.78), rgba(10,11,12,.88)),
    var(--bg) url('../assets/hero-silk.webp') center / cover no-repeat;
}
.results-inner{ position:relative; z-index:2; max-width:var(--wrap); margin:0 auto; }
.stat-row{ display:grid; grid-template-columns:repeat(4, 1fr); gap:32px; margin-top:60px; }
.stat{ display:flex; flex-direction:column; gap:.3em; }
.stat-label{
  font-family:var(--font-display); font-weight:600; font-size:.72rem;
  letter-spacing:var(--track-wide); text-transform:uppercase;
  color:var(--accent); margin-bottom:.2em;
}
.stat-big{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.02em;
  font-size:var(--t-stat); line-height:1;
  color:var(--silver);
}
.stat-cap{ color:var(--ink-dim); font-size:.82rem; white-space:nowrap; }
.results-note{ margin-top:56px; font-size:.8rem; color:#6A6E74; max-width:520px; }

/* ============================================================
   TESTIMONIALS (objections answered)
   ============================================================ */
.testimonials{ padding:calc(var(--sect) * .35) 28px var(--sect); }
.testimonials-inner{ max-width:var(--wrap); margin:0 auto; }
.quote-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); margin-top:48px; }
.quote-card{
  margin:0; background:#FFFFFF; border:1px solid var(--paper-line);
  border-radius:var(--radius); padding:30px 28px;
  display:flex; flex-direction:column; gap:.9em;
}
.quote-doubt{
  margin:0; font-family:var(--font-display); font-weight:600;
  font-size:1.08rem; line-height:1.3; color:var(--paper-ink);
}
.quote-card blockquote{ margin:0; font-size:var(--t-quote); line-height:1.55; color:var(--paper-dim); }
.quote-card figcaption{ display:flex; flex-direction:column; margin-top:auto; }
.quote-card figcaption span{ color:var(--paper-dim); font-size:.85rem; }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ padding:calc(var(--sect) * .35) 28px var(--sect); }
.faq-inner{ max-width:820px; margin:0 auto; }
.faq h2{ margin-bottom:1.4em; }

/* ============================================================
   CTA
   ============================================================ */
.cta{
  position:relative; padding:calc(var(--sect) * 1.15) 28px; text-align:center;
  background:
    radial-gradient(60% 80% at 50% 110%, rgba(76,141,255,.20), transparent 70%),
    radial-gradient(45% 60% at 25% 105%, rgba(214,216,218,.07), transparent 70%),
    radial-gradient(45% 60% at 75% 105%, rgba(125,180,255,.10), transparent 70%),
    var(--bg);
}
.cta-inner{ max-width:760px; margin:0 auto; }
.cta .section-lead{ margin:1.2em auto 0; }
.cta .hero-actions{ margin-top:2.4em; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ border-top:1px solid var(--line); padding:70px 28px 40px; background:var(--bg); }
.footer-inner{
  max-width:var(--wrap); margin:0 auto;
  display:grid; grid-template-columns:2fr 1fr 1fr 1.4fr; gap:40px;
}
.footer-brand p{ color:var(--ink-dim); font-size:.92rem; margin-top:1.2em; }
.footer-col{ display:flex; flex-direction:column; gap:.7em; }
.footer-col h4{
  font-family:var(--font-display); font-weight:600; font-size:var(--t-label);
  letter-spacing:var(--track-wide); text-transform:uppercase;
  color:var(--ink-dim); margin-bottom:.6em;
}
.footer-col a{ color:var(--ink-dim); font-size:.94rem; transition:color var(--dur) var(--ease); }
.footer-col a:hover{ color:var(--ink); }
.footer-legal{
  max-width:var(--wrap); margin:44px auto 0;
  color:#62666C; font-size:.82rem;
}

/* ============================================================
   HERO ENTRANCE — pure CSS, plays immediately on load
   ============================================================ */
.hi{ opacity:0; animation:hi-up .7s var(--ease-out) forwards; }
.hi1{ animation-delay:.1s; } .hi2{ animation-delay:.22s; }
.hi3{ animation-delay:.34s; } .hi4{ animation-delay:.46s; }
@keyframes hi-up{
  from{ opacity:0; transform:translateY(22px); }
  to{ opacity:1; transform:none; }
}

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .55s var(--ease), transform .55s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.d1{ transition-delay:.12s; } .d2{ transition-delay:.24s; }
.d3{ transition-delay:.36s; } .d4{ transition-delay:.48s; }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .hi{ opacity:1; animation:none; }
  .scene .card, .scene.is-on .card{ animation:none; opacity:1; transform:none; }
  .float-slow{ animation:none; }
  .acc details[open] p{ animation:none; }
  .btn, .setup-item{ transition:none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1020px){
  .hero-inner{ grid-template-columns:1fr; gap:24px; }
  .stage{ height:480px; max-width:560px; }
  .pillar{ grid-template-columns:1fr; gap:36px; }
  .pillar.flip .pillar-media{ order:0; }
  .pillar.flip .pillar-copy{ order:1; }
  .setup-grid, .steps, .quote-grid, .stat-row{ grid-template-columns:1fr 1fr; }
  .footer-inner{ grid-template-columns:1fr 1fr; }
}
/* ---- tablets / dock fit ---- */
@media (max-width: 900px){
  .nav-inner{ padding:14px 20px; }
  .brand-logo{ height:36px; }
  .nav-links, .nav-tel{ display:none; }
  .nav-cta{ margin-left:auto; gap:10px; }
  .dock{ --dock-base:46px; --dock-range:120px; --dock-max-scale:1.45; padding:10px 14px; gap:8px; max-width:100%; }
  .proof-inner{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px){
  html, body{ overflow-x:hidden; }
  body{ font-size:16px; }
  h2{ font-size:1.55rem; }
  .hero{ padding:104px 20px 56px; }
  .hero-sub{ font-size:1.02rem; }
  .stage{ height:380px; max-width:100%; }
  .hero-actions{ flex-wrap:wrap; gap:12px; }
  .btn{ padding:1em 1.5em; }
  /* dock: shrink so 7 icons fit the phone width — never overflow */
  .dock-sec{ padding:30px 12px 10px; }
  .dock{ --dock-base:40px; --dock-range:96px; --dock-max-scale:1.35; padding:8px 10px; gap:5px; }
  .dock-tip{ display:none; }
  .dock-label{ font-size:.72rem; margin-bottom:2rem; }
  /* pillars: video fills width, nothing overflows */
  .pillars{ padding:48px 18px 32px; }
  .pillar{ padding:30px 0; gap:24px; }
  .media-box.video-box{ width:100%; max-width:100%; }
  .pillar-copy h2{ font-size:1.65rem; }
  .pillar-lead{ font-size:1rem; }
  /* stack + tighten every content section */
  .setup-grid, .steps, .quote-grid, .stat-row{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr; }
  .pillars, .setup, .process, .testimonials, .faq, .results, .cta, .gbp-show, .proof-band, #proof, section{ padding-left:18px; padding-right:18px; }
  .proof-card{ padding:26px 22px; }
  .proof-stat-row{ gap:14px; }
  .proof-stat strong{ font-size:1.7rem; }
  .wrap, .section-inner, .hero-inner, .gbp-show-inner{ max-width:100%; }
  .search-pill{ font-size:.82rem; }
  .stat-cap{ max-width:none; }
  .brand-name{ font-size:.86rem; letter-spacing:.14em; }
  /* safety: no child may exceed the viewport */
  .dock, .dock-app, .dock-app img, .media-box, .pillar-vid, .pillar-media, .pillar-copy, .gbp-viewport{ max-width:100%; }
}