/* ==========================================================================
   DEMANDLAYER — DESIGN TOKENS
   ========================================================================== */
:root{
  --ink:#0B0B0C;
  --ink-2:#1A1A1D;
  --paper:#F2F2EF;
  --white:#FFFFFF;
  --accent:#2340F2;
  --accent-soft:#7B8DFF;   /* accent on dark surfaces */
  --accent-ink:#1B33C8;
  --muted:rgba(11,11,12,.62);
  --muted-2:rgba(11,11,12,.45);
  --muted-inv:rgba(255,255,255,.64);
  --hairline:rgba(11,11,12,.13);
  --hairline-inv:rgba(255,255,255,.14);
  --sans:'Inter',-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,'SF Mono','Cascadia Mono','Roboto Mono',Menlo,monospace;
  --max:1180px;
  --pad:40px;
  --radius:2px;
}

/* ==========================================================================
   BASE
   ========================================================================== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
a{color:inherit;text-decoration:none}
img,svg{display:block}
button{font-family:var(--sans);cursor:pointer}
::selection{background:var(--accent);color:#fff}

.meta{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted-2);
}
.meta--accent{color:var(--accent)}
.meta--inv{color:rgba(255,255,255,.45)}

.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .marquee-track{animation:none !important}
}

/* ==========================================================================
   NAV
   ========================================================================== */
nav{
  position:sticky;top:0;z-index:50;
  background:rgba(242,242,239,.88);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hairline);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px}
.brand .wm{font-size:18px;letter-spacing:-.03em;line-height:1}
.brand .wm b{font-weight:600}
.brand .wm span{font-weight:400}
.nav-links{display:flex;align-items:center;gap:26px;font-size:14px;color:var(--muted)}
.nav-links a:hover{color:var(--ink)}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--ink);color:#fff;
  font-size:14px;font-weight:500;
  padding:10px 18px;border-radius:var(--radius);
  transition:background .15s ease;border:none;
}
.btn:hover{background:var(--accent)}
.btn--accent{background:var(--accent)}
.btn--accent:hover{background:var(--accent-ink)}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn--inv{background:#fff;color:var(--ink)}
.btn--inv:hover{background:var(--accent);color:#fff}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{padding:100px 0 70px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:60px;align-items:center}
.hero .kicker{margin-bottom:22px;display:flex;align-items:center;gap:10px}
.hero .kicker .dot{width:7px;height:7px;background:var(--accent)}
.hero h1{font-size:clamp(42px,6vw,72px);font-weight:600;letter-spacing:-.038em;line-height:1.02}
.hero h1 .accent{color:var(--accent)}
.hero .sub{margin-top:26px;max-width:520px;font-size:18px;color:var(--muted)}
.hero .cta-row{margin-top:36px;display:flex;gap:12px;flex-wrap:wrap}
/* hero system diagram: channels flow through the layer into pipeline */
.sys{width:100%;max-width:420px;margin:0 auto}
.sys-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sys-chip{
  background:var(--white);border:1px solid var(--hairline);border-radius:var(--radius);
  padding:9px 6px;text-align:center;
  font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;
}
.sys-flow{display:block;width:100%;height:64px}
.sys-flow path{fill:none;stroke:rgba(11,11,12,.16);stroke-width:1.25}
.sys-flow circle{fill:var(--accent)}
.sys-band{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--accent);color:#fff;border-radius:var(--radius);
  padding:14px 18px;
  animation:bandpulse 4.4s ease-in-out infinite;
}
.sys-band svg{flex:none}
.sys-band .bn{font-size:16px;letter-spacing:-.025em}
.sys-band .bn b{font-weight:600}
.sys-band .bn span{font-weight:400;opacity:.9}
@keyframes bandpulse{0%,100%{box-shadow:0 0 0 0 rgba(35,64,242,.28)}50%{box-shadow:0 0 0 9px rgba(35,64,242,0)}}
.sys-out{position:relative;height:118px;margin-top:14px}
.sys-card{
  position:absolute;inset:0;
  background:var(--white);border:1px solid var(--hairline);border-radius:var(--radius);
  padding:14px 16px;display:flex;align-items:center;gap:11px;
  opacity:0;animation:flowcard 12.8s infinite;
}
.sys-card:nth-of-type(2){animation-delay:3.2s}
.sys-card:nth-of-type(3){animation-delay:6.4s}
.sys-card:nth-of-type(4){animation-delay:9.6s}
@keyframes flowcard{
  0%{opacity:0;transform:translateY(10px)}
  4%,29%{opacity:1;transform:translateY(0)}
  33%,100%{opacity:0;transform:translateY(-8px)}
}
.sys-card-body{min-width:0;flex:1}
.strow{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.sys-card .src{
  flex:none;font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);border:1px solid rgba(35,64,242,.3);border-radius:2px;padding:2px 6px;
}
.sys-card .sq{font-size:12.5px;color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sys-card .sig{
  flex:none;width:34px;height:34px;border-radius:50%;
  background:rgba(35,64,242,.1);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;
}
.sys-card .st{font-size:12.5px;font-weight:600;letter-spacing:-.008em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sys-card .sd{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-2);margin-top:2px}
.sys-pipe{margin-top:14px}
.sys-pipe .lab{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:8px}
.sys-pipe .track{height:5px;background:rgba(11,11,12,.09);border-radius:2px;overflow:hidden}
.sys-pipe .fill{height:100%;width:40%;background:var(--accent);border-radius:2px;animation:pipefill 12.8s ease-in-out infinite}
@keyframes pipefill{0%{width:26%}45%{width:78%}55%{width:78%}100%{width:26%}}
@media (prefers-reduced-motion:reduce){
  .sys-band{animation:none}
  .sys-card{animation:none;position:relative;opacity:1;margin-bottom:8px}
  .sys-out{height:auto}
  .sys-card:nth-child(n+2){display:none}
  .sys-pipe .fill{animation:none;width:62%}
  .sys-flow circle{display:none}
}

/* ==========================================================================
   LOGO MARQUEE — "in market with" strip
   Swap/prune the <img> list in the HTML. Logos auto-grayscale.
   ========================================================================== */
.marquee-sec{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:26px 0;background:var(--white)}
.marquee-sec .meta{text-align:center;display:block;margin-bottom:20px}
.marquee{overflow:hidden;position:relative}
.marquee::before,.marquee::after{
  content:'';position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(90deg,var(--white),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--white),transparent)}
.marquee-track{display:flex;align-items:center;gap:64px;width:max-content;animation:scroll 38s linear infinite}
.marquee-track img{height:30px;width:auto;max-width:130px;object-fit:contain;filter:grayscale(1) contrast(.85);opacity:.65}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-track--reverse{animation-direction:reverse}
.logo-ph{
  display:flex;align-items:center;justify-content:center;
  height:34px;padding:0 22px;border:1px dashed rgba(11,11,12,.25);
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(11,11,12,.4);white-space:nowrap;
}

/* ==========================================================================
   POSITIONING STRIP (dark)
   ========================================================================== */
.position{background:var(--ink);color:#fff;padding:90px 0}
.position .meta{margin-bottom:26px}
.position h2{font-size:clamp(28px,3.6vw,44px);font-weight:500;letter-spacing:-.028em;line-height:1.18;max-width:880px}
.position h2 .dim{color:rgba(255,255,255,.38)}
.position h2 .accent{color:var(--accent-soft)}
.position .foot{margin-top:34px;font-size:15.5px;color:var(--muted-inv);max-width:640px}

/* ==========================================================================
   THE LAYER
   ========================================================================== */
.layers{padding:100px 0}
.sec-head{margin-bottom:56px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:end}
.sec-head h2{font-size:clamp(30px,3.8vw,46px);font-weight:600;letter-spacing:-.032em;line-height:1.06}
.sec-head p{font-size:16px;color:var(--muted)}
.sec-head .meta{display:block;margin-bottom:16px}

.layer-row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:40px;padding:40px 0;border-top:1px solid var(--hairline)}
.layer-row:last-of-type{border-bottom:1px solid var(--hairline)}
.layer-id{display:flex;flex-direction:column;gap:14px}
.layer-id .stratum{width:52px;height:13px;background:var(--ink);clip-path:polygon(12% 0,100% 0,88% 100%,0 100%)}
.layer-id .stratum--accent{background:var(--accent)}
.layer-id h3{font-size:19px;font-weight:600;letter-spacing:-.015em}
.layer-id .meta{font-size:10px}
.layer-body{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cap{background:var(--white);border:1px solid var(--hairline);border-radius:var(--radius);padding:22px 22px 20px;transition:border-color .15s ease}
.cap:hover{border-color:var(--ink)}
.cap h4{font-size:15px;font-weight:600;margin-bottom:6px}
.cap p{font-size:13.5px;color:var(--muted);line-height:1.5}
.layer-note{margin-top:14px;font-size:13.5px;color:var(--muted-2)}

/* ==========================================================================
   HOW IT WORKS — pinned scrollytelling
   Left panel sticks; steps on the right advance the visual as you scroll.
   ========================================================================== */
.how{background:var(--ink);color:#fff;padding:100px 0 60px}
.how .sec-head h2{color:#fff}
.how .sec-head p{color:var(--muted-inv)}
.scrolly{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:70px;align-items:start}
.scrolly-visual{position:sticky;top:110px;padding:30px 0 60px}
.scrolly-visual svg{width:100%;max-width:380px}
.scrolly-visual .stage-label{
  margin-top:26px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-soft);min-height:16px;
  transition:opacity .3s ease;
}
/* strata states driven by data-stage on .scrolly-visual */
.sv-layer{fill:none;stroke:rgba(255,255,255,.28);stroke-width:1.5;transition:fill .45s ease,stroke .45s ease}
.sv-base{stroke:rgba(255,255,255,.28);stroke-width:1.5;fill:none;transition:stroke .45s ease}
[data-stage="1"] .sv-l3{fill:rgba(255,255,255,.16);stroke:rgba(255,255,255,.6)}
[data-stage="2"] .sv-l3,[data-stage="2"] .sv-l2{fill:rgba(255,255,255,.28);stroke:rgba(255,255,255,.7)}
[data-stage="3"] .sv-l3,[data-stage="3"] .sv-l2{fill:#fff;stroke:#fff}
[data-stage="3"] .sv-l1{fill:var(--accent);stroke:var(--accent)}
[data-stage="4"] .sv-l3,[data-stage="4"] .sv-l2,[data-stage="4"] .sv-l1{fill:var(--accent);stroke:var(--accent)}
[data-stage="4"] .sv-base{stroke:#fff}
.scrolly-steps{display:flex;flex-direction:column}
.s-step{
  min-height:52vh;display:flex;flex-direction:column;justify-content:center;
  border-left:1px solid var(--hairline-inv);padding:40px 0 40px 36px;
  opacity:.32;transition:opacity .35s ease,border-color .35s ease;
}
.s-step.active{opacity:1;border-left:2px solid var(--accent-soft);padding-left:35px}
.s-step .num{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--accent-soft);display:block;margin-bottom:16px}
.s-step h3{font-size:clamp(22px,2.4vw,30px);font-weight:600;letter-spacing:-.022em;margin-bottom:12px}
.s-step p{font-size:15.5px;color:var(--muted-inv);max-width:440px}
.s-step ul{margin-top:16px;list-style:none;font-size:14px;color:var(--muted-inv)}
.s-step ul li{padding:6px 0;border-bottom:1px solid var(--hairline-inv)}
.s-step ul li:last-child{border-bottom:none}

/* ==========================================================================
   PROOF — case studies
   Results delivered by this operating team under our prior brand.
   ========================================================================== */
.proof{padding:100px 0 40px}
.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.case{
  background:var(--white);border:1px solid var(--hairline);border-radius:var(--radius);
  padding:34px 32px 30px;display:flex;flex-direction:column;gap:18px;
  transition:border-color .15s ease;
}
.case:hover{border-color:var(--ink)}
.case .client{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.case .client .name{font-size:13px;font-weight:600;letter-spacing:.01em}
.case h3{font-size:clamp(20px,2.2vw,26px);font-weight:600;letter-spacing:-.022em;line-height:1.12}
.case h3 .accent{color:var(--accent)}
.case .body p{font-size:14px;color:var(--muted);line-height:1.55}
.case .body p + p{margin-top:10px}
.case .body b{color:var(--ink);font-weight:600}
.case .stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:auto;padding-top:18px;border-top:1px solid var(--hairline)}
.case .stat .n{font-size:26px;font-weight:600;letter-spacing:-.03em}
.case .stat .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);margin-top:4px}
.proof-foot{margin-top:18px;font-size:12.5px;color:var(--muted-2)}

/* ==========================================================================
   REAL REPLIES — tabbed inbox screenshots
   ========================================================================== */
.replies{padding:70px 0 100px}
.reply-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.reply-tab{
  background:transparent;border:1px solid var(--hairline);border-radius:var(--radius);
  font-size:13.5px;font-weight:500;color:var(--muted);padding:9px 16px;
  transition:all .15s ease;
}
.reply-tab:hover{border-color:var(--ink);color:var(--ink)}
.reply-tab.active{background:var(--ink);border-color:var(--ink);color:#fff}
.reply-stage{
  background:var(--white);border:1px solid var(--hairline);border-radius:var(--radius);
  padding:28px;display:flex;justify-content:center;align-items:center;min-height:340px;
}
.reply-stage img{max-width:100%;max-height:480px;width:auto;border:1px solid var(--hairline)}
.reply-stage .pane{display:none}
.reply-stage .pane.active{display:block}

/* ==========================================================================
   TESTIMONIALS — scroll stack
   Cards pin below the nav and stack over one another as you scroll.
   Offsets are per-card via nth-child; keep them if you reorder.
   ========================================================================== */
.quotes{padding:0 0 120px}
.quotes .sec-head{margin-bottom:40px}
.quote-stack{display:flex;flex-direction:column;gap:22px}
.t-card{
  position:sticky;
  background:var(--white);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  padding:38px 40px 32px;
  box-shadow:0 -14px 34px rgba(11,11,12,.07);
}
.t-card:nth-child(1){top:88px}
.t-card:nth-child(2){top:104px}
.t-card:nth-child(3){top:120px}
.t-card:nth-child(4){top:136px}
.t-card:nth-child(5){top:152px}
.t-card .q{font-size:16.5px;font-weight:400;letter-spacing:-.008em;line-height:1.6;color:rgba(11,11,12,.85);max-width:840px}
.t-card .q p + p{margin-top:12px}
.t-card .who{margin-top:24px;display:flex;align-items:center;gap:13px}
.t-card .avatar{
  flex:none;width:40px;height:40px;border-radius:50%;
  background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:600;letter-spacing:.03em;
}
img.avatar{object-fit:cover;border:1px solid var(--hairline)}
.t-card:first-child .avatar{background:var(--accent)}
.t-card .who .n{font-size:14.5px;font-weight:600}
.t-card .who .c{font-size:12.5px;color:var(--muted-2)}

/* ==========================================================================
   PRINCIPLES
   ========================================================================== */
.principles{padding:0 0 100px}
.prin-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.prin{border-top:2px solid var(--ink);padding:24px 4px 8px}
.prin.accent{border-top-color:var(--accent)}
.prin h3{font-size:17px;font-weight:600;margin-bottom:8px}
.prin p{font-size:14.5px;color:var(--muted)}

/* ==========================================================================
   INTELLIGENCE OS — report-driven proof section
   The right panel mirrors the real 30-day workflow report format.
   ========================================================================== */
.reporting{padding:0 0 100px}
.intel-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:14px;align-items:stretch}
.intel-copy{
  background:var(--white);border:1px solid var(--hairline);border-radius:var(--radius);
  padding:44px 40px;display:flex;flex-direction:column;
}
.intel-copy .meta{display:block;margin-bottom:16px}
.intel-copy h2{font-size:clamp(24px,2.8vw,32px);font-weight:600;letter-spacing:-.025em;line-height:1.15;margin-bottom:16px}
.intel-copy > p{font-size:15px;color:var(--muted);margin-bottom:26px}
.intel-list{margin-top:auto}
.intel-list .row{
  display:flex;align-items:baseline;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--hairline);font-size:14.5px;
}
.intel-list .row:last-child{border-bottom:none}
.intel-list .row .tick{flex:none;width:8px;height:8px;background:var(--accent);transform:translateY(-1px)}
.intel-list .row b{font-weight:600}
.intel-list .row span{color:var(--muted)}

/* the report document */
.rep-doc{
  background:var(--white);border:1px solid var(--hairline);border-radius:var(--radius);
  display:flex;flex-direction:column;overflow:hidden;
}
.rep-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:20px 28px;border-bottom:1px solid var(--hairline);
}
.rep-head .t{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.rep-head .d{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted-2)}
.rep-metrics{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid var(--hairline);
}
.rep-metrics .m{padding:20px 28px;border-right:1px solid var(--hairline)}
.rep-metrics .m:nth-child(3n){border-right:none}
.rep-metrics .m:nth-child(-n+3){border-bottom:1px solid var(--hairline)}
.rep-metrics .n{font-size:24px;font-weight:600;letter-spacing:-.03em}
.rep-metrics .n .u{color:var(--accent)}
.rep-metrics .l{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);margin-top:5px}
.rep-body{display:flex;flex-direction:column;padding:22px 28px 18px;flex:1;gap:18px}
.rep-chart .lab{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);margin-bottom:10px;display:flex;justify-content:space-between}
.rep-chart svg{width:100%;height:auto;display:block}
.rep-chart .bar{fill:var(--ink);opacity:.82}
.rep-chart .bar--last{fill:var(--accent);opacity:1}
.rep-chart .val{font-family:var(--mono);font-size:11px;font-weight:500;fill:var(--ink)}
.rep-chart .val--last{fill:var(--accent)}
.rep-chart .mon{font-family:var(--mono);font-size:9px;letter-spacing:.06em;fill:rgba(11,11,12,.45)}
.rep-chart .curve{fill:none;stroke:var(--accent);stroke-width:2}
.rep-chart .pt{fill:var(--accent)}
.rep-insights{border-top:1px solid var(--hairline);padding-top:8px}
.rep-insights .row{display:flex;gap:10px;align-items:baseline;padding:7px 0;font-size:13.5px;color:var(--muted)}
.rep-insights .row b{color:var(--ink);font-weight:600}
.rep-insights .dot{flex:none;width:7px;height:7px;border-radius:50%;transform:translateY(-1px)}
.dot--scale{background:var(--accent)}
.dot--hold{background:#8a8a85}
.rep-foot{
  padding:14px 28px;border-top:1px solid var(--hairline);
  font-size:11.5px;color:var(--muted-2);
}

/* ==========================================================================
   FAQ — accessible accordion via details/summary
   ========================================================================== */
.faq{padding:0 0 110px}
.faq .sec-head{margin-bottom:36px}
.faq-list{max-width:820px}
.faq-item{border-top:1px solid var(--hairline)}
.faq-item:last-child{border-bottom:1px solid var(--hairline)}
.faq-item summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 4px;font-size:16.5px;font-weight:500;letter-spacing:-.012em;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .plus{
  flex:none;width:22px;height:22px;position:relative;
}
.faq-item summary .plus::before,.faq-item summary .plus::after{
  content:'';position:absolute;background:var(--ink);transition:transform .2s ease;
}
.faq-item summary .plus::before{left:0;right:0;top:10px;height:2px}
.faq-item summary .plus::after{top:0;bottom:0;left:10px;width:2px}
.faq-item[open] summary .plus::after{transform:scaleY(0)}
.faq-item[open] summary{color:var(--accent)}
.faq-item .answer{padding:0 40px 24px 4px;font-size:15px;color:var(--muted);max-width:700px}

/* ==========================================================================
   YOUTUBE STRIP — auto-scrolling video cards linked to the channel
   Replace each placeholder card: set href to the video URL and swap the
   .yt-thumb div for <img class="yt-thumb" src="https://img.youtube.com/vi/VIDEO_ID/hqdefault.jpg">
   Keep both track copies identical.
   ========================================================================== */
.yt-sec{padding:0 0 110px}
.yt-sec .sec-head{margin-bottom:36px}
.yt-marquee{overflow:hidden;position:relative}
.yt-marquee::before,.yt-marquee::after{content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.yt-marquee::before{left:0;background:linear-gradient(90deg,var(--paper),transparent)}
.yt-marquee::after{right:0;background:linear-gradient(270deg,var(--paper),transparent)}
.yt-track{display:flex;gap:16px;width:max-content;animation:scroll 45s linear infinite}
.yt-marquee:hover .yt-track{animation-play-state:paused}
.yt-card{display:block;width:280px;flex:none}
.yt-thumb{
  width:280px;height:158px;background:var(--ink);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;position:relative;
  border:1px solid var(--hairline);object-fit:cover;
}
.play--overlay{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;background:rgba(11,11,12,.55);
  display:flex;align-items:center;justify-content:center;transition:background .15s ease;
}
.play--overlay::after{content:'';display:block;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #fff;margin-left:3px}
.yt-card:hover .play{background:var(--accent)}
.yt-title{margin-top:10px;font-size:13.5px;font-weight:500;line-height:1.4;color:var(--ink)}
.yt-meta{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);margin-top:4px}

/* ==========================================================================
   FINAL CTA + FOOTER
   ========================================================================== */
.cta-final{background:var(--ink);color:#fff;padding:100px 0}
.book-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center}
.book-copy h2{font-size:clamp(30px,4vw,50px);font-weight:600;letter-spacing:-.035em;line-height:1.06}
.book-copy h2 .accent{color:var(--accent-soft)}
.book-copy p{margin-top:22px;font-size:16px;color:var(--muted-inv);max-width:480px}
.book-points{margin-top:30px}
.book-points .bp{
  display:flex;align-items:center;gap:11px;
  padding:11px 0;border-bottom:1px solid var(--hairline-inv);
  font-size:14.5px;color:var(--muted-inv);
}
.book-points .bp:last-child{border-bottom:none}
.book-points .tick{flex:none;width:8px;height:8px;background:var(--accent-soft)}
.book-cal iframe{
  width:100%;height:640px;border:none;border-radius:var(--radius);
  background:var(--white);display:block;
}
.book-fallback{margin-top:12px;font-size:12.5px;color:rgba(255,255,255,.45)}
.book-fallback a{color:#fff;border-bottom:1px solid var(--accent-soft)}

footer{background:var(--ink);color:#fff;border-top:1px solid var(--hairline-inv);padding:36px 0}
.foot-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.foot-inner .brand .wm{color:#fff}
.foot-links{display:flex;gap:24px;font-size:13.5px;color:var(--muted-inv)}
.foot-links a:hover{color:#fff}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:920px){
  :root{--pad:22px}
  .nav-links{display:none}
  .hero{padding:64px 0 50px}
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .sys{max-width:330px}
  .sec-head{grid-template-columns:1fr;gap:16px}
  .layer-row{grid-template-columns:1fr;gap:20px;padding:32px 0}
  .layer-body{grid-template-columns:1fr}
  .scrolly{grid-template-columns:1fr;gap:0}
  .scrolly-visual{position:relative;top:0;padding:10px 0 30px}
  .s-step{min-height:0;padding:30px 0 30px 26px}
  .case-grid,.prin-grid{grid-template-columns:1fr}
  .t-card{padding:26px 22px 24px}
  .t-card:nth-child(1){top:74px}
  .t-card:nth-child(2){top:84px}
  .t-card:nth-child(3){top:94px}
  .t-card:nth-child(4){top:104px}
  .t-card:nth-child(5){top:114px}
  .intel-grid{grid-template-columns:1fr}
  .intel-copy{padding:32px 24px}
  .rep-metrics .m{padding:16px 18px}
  .rep-body{padding:18px 18px 14px}
  .book-grid{grid-template-columns:1fr;gap:36px}
  .book-cal iframe{height:820px}
}