/* ============================================================
   AutomateDemand — dark system, read off the live site
   bg #080807 · accent #00E5FF · Inter Tight 400 headings · body #858585
   ============================================================ */
:root{
  --bg:#080807; --bg-2:#0b0b0a;
  --accent:#00e5ff; --accent-dim:#0aa9bd; --accent-wash:rgba(0,229,255,.09);
  --card:#0f0f0e; --card-2:#0c0c0b; --well:#0a0a09;
  --line:#1e1e1d; --line-2:#282827; --line-soft:#161615;
  --ink:#ffffff; --ink-2:#d6d6d4; --muted:#858585; --muted-2:#5f5f5e;
  --tight:'Inter Tight',system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1360px; --pad:40px; --r:12px; --r-sm:10px;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--muted);
  font-family:var(--tight); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--accent); text-decoration:none}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
p{margin:0}
h1,h2,h3,h4{margin:0; font-family:var(--tight); font-weight:400; color:var(--ink);
  letter-spacing:-.02em; line-height:1.06}
::selection{background:rgba(0,229,255,.25); color:#fff}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
[id]{scroll-margin-top:100px}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}
.sec{position:relative; padding:112px 0}
/* the per-section glow the live site uses: radial(50% 40% at 50% 56%, #141712, #080807) */
.sec::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(50% 42% at 50% 56%, #141712 0%, rgba(8,8,7,0) 100%)}
.sec > *{position:relative; z-index:1}
.sec--flat::before{display:none}
.h2{font-size:clamp(42px,6.6vw,90px); letter-spacing:-.03em; text-wrap:balance}
.h2 em{font-style:normal; color:var(--accent)}
.lede{margin-top:22px; font-size:18px; line-height:1.6; color:var(--muted); max-width:70ch}
.eyebrow{font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:22px}
.head-row{display:flex; align-items:flex-end; justify-content:space-between; gap:36px; flex-wrap:wrap}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:9px; border-radius:99px; font-family:var(--sans);
  font-size:15px; font-weight:500; padding:13px 24px; transition:.2s ease; white-space:nowrap;
  border:1px solid var(--line-2); color:var(--ink); background:rgba(255,255,255,.02)}
.btn:hover{border-color:rgba(0,229,255,.5); background:var(--accent-wash); color:#fff}
.btn .ar{opacity:.7; transition:transform .2s ease}
.btn:hover .ar{transform:translate(2px,-2px)}
.btn-cta{background:var(--accent); border-color:var(--accent); color:#04191d; font-weight:600}
.btn-cta:hover{background:#5cf0ff; border-color:#5cf0ff; color:#04191d}
.btn-sm{padding:10px 18px; font-size:14px}

/* ---------- nav ---------- */
.nav{position:fixed; top:0; left:0; right:0; z-index:80; padding:18px 0; transition:.26s ease}
.nav.stuck{background:rgba(8,8,7,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft); padding:12px 0}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:20px; position:relative}
.brand{display:flex; align-items:center; gap:9px}
.brand img{height:26px}
.brand span{font-family:var(--sans); font-size:16px; font-weight:500; color:var(--ink); letter-spacing:-.02em}
.nav-pill{display:flex; align-items:center; gap:4px; padding:6px; border:1px solid var(--line-2);
  border-radius:99px; background:rgba(16,16,15,.7); backdrop-filter:blur(10px)}
.nav-pill a{font-family:var(--sans); font-size:14.5px; font-weight:400; color:var(--ink-2);
  padding:8px 16px; border-radius:99px; transition:.18s ease}
.nav-pill a:hover{background:rgba(255,255,255,.06); color:#fff}
.nav-cta-m{display:none}
.burger{display:none; width:42px; height:42px; border:1px solid var(--line-2); border-radius:99px;
  align-items:center; justify-content:center}
.burger i{display:block; width:16px; height:1.5px; background:var(--ink); position:relative}
.burger i::before,.burger i::after{content:""; position:absolute; left:0; width:16px; height:1.5px; background:var(--ink)}
.burger i::before{top:-5px} .burger i::after{top:5px}

/* ---------- hero ---------- */
.hero{position:relative; padding:170px 0 90px; text-align:center; overflow:clip}
.hero-glow{position:absolute; left:50%; top:-260px; width:1200px; height:900px; transform:translateX(-50%);
  pointer-events:none; background:radial-gradient(closest-side, rgba(0,229,255,.13), rgba(0,229,255,.03) 55%, transparent 75%);
  filter:blur(30px)}
#stars{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.hero > .wrap{position:relative; z-index:2}
h1{font-size:clamp(42px,6.6vw,96px); letter-spacing:-.04em; line-height:1.02; max-width:22ch;
  margin:0 auto; text-wrap:balance}
h1 em{font-style:normal; color:var(--accent)}
.hero-sub{margin:28px auto 0; font-size:19px; line-height:1.5; color:var(--muted); max-width:56ch; text-wrap:balance}
.hero-sub b{font-weight:500; color:var(--ink)}
.hero-cta{display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:36px}
.hero-note{margin-top:16px; font-size:14px; color:var(--muted-2)}

/* video facade — poster + play button, swaps in the Wistia iframe on click.
   Keeps the page fast and means no third-party script loads until someone asks. */
.vid{position:relative; max-width:820px; margin:44px auto 0; border-radius:var(--r);
  overflow:hidden; border:1px solid var(--line-2); background:#000; cursor:pointer;
  aspect-ratio:16/9; transition:.24s ease}
.vid:hover{border-color:rgba(0,229,255,.5)}
.vid img{width:100%; height:100%; object-fit:cover; opacity:.82; transition:.3s ease}
.vid:hover img{opacity:1; transform:scale(1.015)}
.vid .play{position:absolute; inset:0; display:grid; place-items:center}
.vid .play i{width:66px; height:66px; border-radius:50%; background:var(--accent);
  display:grid; place-items:center; box-shadow:0 0 0 12px rgba(0,229,255,.14);
  transition:.24s ease}
.vid:hover .play i{transform:scale(1.07); box-shadow:0 0 0 16px rgba(0,229,255,.2)}
.vid .play svg{width:22px; height:22px; margin-left:3px; fill:#04191d}
.vid .len{position:absolute; right:12px; bottom:12px; padding:4px 10px; border-radius:6px;
  background:rgba(4,25,29,.78); color:#fff; font-family:var(--sans); font-size:12.5px}

/* the play link on a case-study card */
.watch{display:inline-flex; align-items:center; gap:9px; margin-top:18px;
  font-family:var(--sans); font-size:14px; font-weight:500; color:var(--accent); cursor:pointer}
.watch b{width:24px; height:24px; border-radius:50%; border:1px solid rgba(0,229,255,.4);
  display:grid; place-items:center; transition:.2s ease}
.watch:hover b{background:var(--accent-wash); border-color:var(--accent)}
.watch svg{width:9px; height:9px; margin-left:2px; fill:var(--accent)}

/* inline players: the video plays where it was clicked, no overlay */
.vid.playing{cursor:default}
.vid.playing:hover{border-color:var(--line-2)}
.vid iframe,.vid video,.case-vid iframe,.case-vid video{width:100%; height:100%; border:0; display:block; background:#000}
.case-vid{margin-top:18px; aspect-ratio:16/9; border-radius:var(--r-sm); overflow:hidden;
  border:1px solid var(--line-2); background:#000}

/* ---------- logo marquee ---------- */
.proof{padding:56px 0 76px; position:relative}
.proof h2{text-align:center; font-family:var(--sans); font-size:clamp(24px,3vw,37px); font-weight:700;
  letter-spacing:-.03em; margin-bottom:40px}
.marquee{overflow:hidden; border-radius:var(--r);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex; width:max-content; animation:slideBack 48s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.marquee-row{display:flex; align-items:center; gap:76px; padding-right:76px}
.marquee-row img{height:var(--h); width:auto; opacity:.5; transition:opacity .25s ease}
.marquee-row a{display:block; flex:0 0 auto}
.marquee-row a:hover img,.marquee-row a:focus-visible img{opacity:1}

/* ---------- card ---------- */
.card{padding:26px; border:1px solid var(--line); border-radius:var(--r); min-width:0;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%); transition:.24s ease}
.card:hover{border-color:var(--line-2)}
.card h3{font-size:22px; margin-bottom:12px}
.card p{font-size:15px; line-height:1.55; color:var(--muted)}
.card .rn{font-size:13px; font-family:var(--sans); letter-spacing:.1em; color:var(--muted-2); margin-bottom:14px}

/* the nested "device" well every live card puts its widget in */
.well{border:1px solid var(--line); border-radius:var(--r-sm); background:var(--well);
  padding:24px; margin-bottom:26px; overflow:hidden; position:relative; min-width:0}

/* ---------- process grid (3 up / 2 down, like the live site) ---------- */
/* six tracks so the bottom two cards can be the same width as the top three
   and still sit centred under them (cols 2-3 and 4-5) */
.proc{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px; margin-top:56px}
.proc > .card{grid-column:span 2; display:flex; flex-direction:column}
.proc > .card:nth-child(4){grid-column:2 / span 2}
.proc > .card:nth-child(5){grid-column:4 / span 2}
.proc h3{font-size:clamp(26px,2.4vw,35px); margin-bottom:14px}
.proc h3 i{font-style:normal; color:var(--accent)}
.proc .well{flex:1 1 auto; min-height:212px; display:flex; align-items:center; justify-content:center}

/* ---------- widget: toggle + segmented (01) ---------- */
.w-stack{width:100%; display:flex; flex-direction:column; gap:14px}
.w-bar{display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--card-2)}
.sw{width:46px; height:25px; border-radius:99px; background:#1c1c1b; position:relative; flex:0 0 auto;
  animation:swbg 5s ease-in-out infinite}
.sw i{position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%;
  background:#3a3a39; animation:swknob 5s ease-in-out infinite}
@keyframes swbg{0%,18%{background:#1c1c1b} 30%,88%{background:rgba(0,229,255,.22)} 100%{background:#1c1c1b}}
@keyframes swknob{
  0%,18%{left:3px; background:#3a3a39}
  30%,88%{left:24px; background:var(--accent); box-shadow:0 0 12px rgba(0,229,255,.7)}
  100%{left:3px; background:#3a3a39}}
.w-on{font-family:var(--sans); font-size:14px; font-weight:500; color:var(--accent); min-width:24px;
  animation:onfade 5s ease-in-out infinite}
@keyframes onfade{0%,18%{opacity:.25} 30%,88%{opacity:1} 100%{opacity:.25}}
.w-bar .w-label{margin-left:auto; font-family:var(--sans); font-size:14px; color:var(--ink-2)}
.seg{justify-content:center; gap:8px}
.seg span{font-family:var(--sans); font-size:13.5px; padding:7px 18px; border-radius:99px;
  color:var(--muted); transition:.3s ease}
.seg .s1{animation:seg1 5s ease-in-out infinite}
.seg .s2{animation:seg2 5s ease-in-out infinite}
@keyframes seg1{0%,22%{background:rgba(255,255,255,.07); color:var(--ink)} 34%,100%{background:transparent; color:var(--muted)}}
@keyframes seg2{0%,22%{background:transparent; color:var(--muted)} 34%,100%{background:rgba(0,229,255,.14); color:var(--accent)}}

/* ---------- widget: tool tiles marquee (02) ---------- */
.tiles{width:100%; min-width:0; display:flex; flex-direction:column; gap:12px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.tiles-row{display:flex; width:max-content; gap:12px}
.tiles-row.a{animation:slide 26s linear infinite}
.tiles-row.b{animation:slideBack 26s linear infinite}
@keyframes slideBack{from{transform:translateX(-50%)} to{transform:translateX(0)}}
.tile{flex:0 0 auto; width:56px; height:56px; border-radius:var(--r-sm); border:1px solid var(--line-2);
  background:linear-gradient(180deg,#151514,#0e0e0d); display:grid; place-items:center;
  font-family:var(--sans); font-size:14px; font-weight:600; color:#a9a9a7; letter-spacing:-.02em;
  transition:.22s ease}
.tile:hover{border-color:rgba(0,229,255,.45); color:var(--accent)}

/* ---------- widget: collaborative cursor (03) ---------- */
.build{position:relative; width:100%; height:150px}
.build .tile{position:absolute; width:58px; height:58px}
.build .tile.rest{left:6%; top:52px}
.build .tile.drag{left:34%; top:52px; animation:dragTile 6s ease-in-out infinite}
@keyframes dragTile{
  0%,12%{transform:translate(0,0)} 44%,60%{transform:translate(96px,-26px)}
  90%,100%{transform:translate(0,0)}}
.cursor{position:absolute; top:96px; left:34%; width:112px; animation:cursorMove 6s ease-in-out infinite}
@keyframes cursorMove{
  0%,12%{transform:translate(4px,2px)} 44%,60%{transform:translate(100px,-24px)}
  90%,100%{transform:translate(4px,2px)}}
.cursor svg{width:17px; height:17px; display:block}
.cursor b{display:inline-block; margin:2px 0 0 10px; padding:4px 11px; border-radius:6px;
  background:rgba(0,229,255,.18); border:1px solid rgba(0,229,255,.45); color:var(--accent);
  font-family:var(--sans); font-size:12.5px; font-weight:500}

/* ---------- widget: progress bars (04) ---------- */
.bars{width:100%; display:flex; flex-direction:column; gap:18px}
.bar-label{font-family:var(--sans); font-size:13.5px; color:var(--ink-2); margin-bottom:9px}
.bar{height:11px; border-radius:99px; background:#151514; border:1px solid var(--line); overflow:hidden}
.bar i{display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg,rgba(0,229,255,.18),var(--accent));
  box-shadow:0 0 14px rgba(0,229,255,.45); transition:width 1.5s cubic-bezier(.22,.9,.3,1)}
.in .bar i{width:var(--to)}

/* ---------- widget: globe (05) ---------- */
.globe-wrap{position:relative; width:100%; display:grid; place-items:center}
#globe{width:100%; max-width:420px; height:300px; display:block}

/* ---------- widget: workflow stack (services) ---------- */
.flow{width:100%; display:flex; flex-direction:column; align-items:center}
.flow-row{width:100%; display:flex; align-items:center; gap:12px; padding:11px 13px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--card-2); transition:.35s ease}
.flow-row.on{border-color:rgba(0,229,255,.45); background:rgba(0,229,255,.05)}
.flow-ic img{width:20px; height:20px; object-fit:contain}
.flow-ic{width:32px; height:32px; border-radius:8px; flex:0 0 auto; display:grid; place-items:center;
  background:#171716; border:1px solid var(--line-2); font-family:var(--sans); font-size:13px;
  font-weight:600; color:#b4b4b2; transition:.35s ease}
.flow-row.on .flow-ic{color:var(--accent); border-color:rgba(0,229,255,.4)}
.flow-t b{display:block; font-family:var(--sans); font-size:13.5px; font-weight:500; color:var(--accent)}
.flow-t span{display:block; font-size:12.5px; color:var(--muted)}
.flow-dot{width:15px; height:15px; margin:5px 0; border-radius:50%; border:1px solid var(--line-2);
  display:grid; place-items:center; font-size:11px; color:var(--muted-2)}

/* ---------- widget: chat (services) ---------- */
.chat{width:100%; display:flex; flex-direction:column; gap:14px}
.chat-msg{display:flex; gap:11px; align-items:flex-start}
.chat-msg.r{flex-direction:row-reverse; text-align:right}
/* messages arrive when the card scrolls in, not at page load when nobody is looking */
.js .chat-msg{opacity:0}
.js .in .chat-msg{animation:msgIn .5s ease forwards}
.js .in .chat-msg:nth-child(1){animation-delay:.25s}
.js .in .chat-msg:nth-child(2){animation-delay:1.5s}
@keyframes msgIn{to{opacity:1}}
.chat-av{width:34px; height:34px; border-radius:9px; flex:0 0 auto; display:grid; place-items:center;
  background:#171716; border:1px solid var(--line-2); font-family:var(--sans); font-size:13px; font-weight:600; color:#b4b4b2}
.chat-av.ad{background:rgba(0,229,255,.12); border-color:rgba(0,229,255,.4); color:var(--accent)}
.chat-av img{width:20px; height:20px; object-fit:contain}
.chat-b b{display:block; font-family:var(--sans); font-size:13px; font-weight:500; color:var(--accent)}
.chat-b span{display:block; font-size:13.5px; color:var(--ink-2); margin-top:2px}
.chat-in{display:flex; align-items:center; gap:10px; padding:11px 14px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--card-2)}
.caret{width:1.5px; height:15px; background:var(--accent); animation:blink 1.1s steps(1) infinite}
@keyframes blink{0%,50%{opacity:1} 51%,100%{opacity:0}}
.chat-send{margin-left:auto; color:var(--accent); font-size:15px}

/* ---------- widget: area chart (services) ---------- */
.chart{position:relative; width:100%}
.chart svg{width:100%; height:150px; display:block; overflow:visible}
.chart .ln{fill:none; stroke:#e8f6f4; stroke-width:2; stroke-linecap:round;
  stroke-dasharray:640; stroke-dashoffset:640; animation:draw 3.4s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.js .chart .ln{animation-play-state:paused}
.js .in .chart .ln{animation-play-state:running}
.chart .dot{animation:dotPulse 2.4s ease-in-out infinite 3s}
@keyframes dotPulse{0%,100%{r:5} 50%{r:7.5}}
.chart-badge{position:absolute; top:2px; left:56%; padding:4px 12px; border-radius:99px;
  background:rgba(0,229,255,.14); border:1px solid rgba(0,229,255,.4); color:var(--accent);
  font-family:var(--sans); font-size:12.5px; font-weight:500}

/* ---------- services grid ---------- */
.svc{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:56px}
.svc .card{display:flex; flex-direction:column}
.svc .well{min-height:222px; display:flex; align-items:center; justify-content:center}
.svc h3{font-size:clamp(24px,2.2vw,32px); margin-bottom:12px}
.svc-chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; padding-top:20px}
.chip{font-family:var(--sans); font-size:12.5px; padding:5px 12px; border-radius:99px;
  border:1px solid var(--line-2); color:var(--muted); background:rgba(255,255,255,.02)}

/* ---------- GTM system: orchestration map ---------- */
/* inputs -> AutomateDemand -> what each seller receives. The connectors are SVG paths
   measured from the rendered layout (JS), so they follow every breakpoint. */
.orch{position:relative; margin-top:56px; padding:34px; display:grid; align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,.94fr) minmax(0,1fr); column-gap:clamp(56px,7vw,112px)}
.orch:hover{border-color:var(--line)}
.orch-lines{position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; overflow:visible}
.orch-lines path{fill:none; stroke:var(--line-2); stroke-width:1; transition:stroke .35s ease}
.orch-lines path.on{stroke:rgba(0,229,255,.5)}
.orch-lines path.pulse{stroke:var(--accent); stroke-width:2.5; stroke-linecap:round; opacity:0}
.orch-col,.orch-hub{position:relative; z-index:1; display:flex; flex-direction:column; gap:10px; min-width:0}
.orch-k{font-family:var(--sans); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); margin-bottom:4px}
.orch-hub .orch-k{text-align:center}
.orch-node{display:flex; align-items:center; gap:12px; padding:11px 13px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--card-2); transition:border-color .35s ease, background-color .35s ease}
.orch-node.on{border-color:rgba(0,229,255,.45); background:#0b1718}
.orch-ic{width:32px; height:32px; border-radius:8px; flex:0 0 auto; display:grid; place-items:center;
  background:#171716; border:1px solid var(--line-2); color:#9a9a98; transition:.35s ease}
.orch-ic svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.orch-node.on .orch-ic{color:var(--accent); border-color:rgba(0,229,255,.4)}
.orch-t{min-width:0}
.orch-t b{display:block; font-family:var(--sans); font-size:13.5px; font-weight:500; color:var(--ink-2); transition:color .35s ease}
.orch-t span{display:block; font-size:12.5px; color:var(--muted)}
.orch-node.on .orch-t b{color:var(--accent)}
/* done-for-you marker on the outputs we run end to end */
.orch-node .tag-dfy,.tag-dfy{display:inline-block; width:auto; flex:0 0 auto; margin-left:auto; align-self:center; padding:1px 7px; border-radius:99px; vertical-align:1px;
  border:1px solid rgba(0,229,255,.4); background:rgba(0,229,255,.08); color:var(--accent);
  font-family:var(--sans); font-size:9.5px; font-weight:600; letter-spacing:.09em}
.hub{padding:18px 18px 16px; border:1px solid var(--line-2); border-radius:var(--r); background:var(--well);
  transition:border-color .35s ease, box-shadow .35s ease}
.hub.on{border-color:rgba(0,229,255,.4); box-shadow:0 0 0 6px rgba(0,229,255,.04), 0 26px 60px -30px rgba(0,229,255,.45)}
.hub-brand{display:flex; align-items:center; justify-content:center; gap:10px; font-family:var(--sans);
  font-size:16px; font-weight:500; color:var(--ink); letter-spacing:-.02em}
.hub-brand img{height:24px}
.hub-steps{display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin-top:14px}
.hub-steps span{font-family:var(--sans); font-size:12px; padding:5px 12px; border-radius:99px; border:1px solid var(--line-2);
  color:var(--muted-2); transition:.3s ease}
.hub-steps span.on{color:var(--accent); border-color:rgba(0,229,255,.45); background:rgba(0,229,255,.08)}
.hub-log{margin-top:12px; min-height:38px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--card-2);
  font-family:var(--sans); font-size:12.5px; line-height:1.45; color:var(--ink-2); transition:opacity .3s ease}
.hub-log.dim{opacity:.3}
.sys-cta{margin-top:64px; padding:30px 34px; border:1px dashed var(--line-2); border-radius:var(--r);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px 36px}
.sys-cta p{max-width:44ch; font-size:clamp(20px,2vw,26px); line-height:1.3; letter-spacing:-.02em; color:var(--ink)}
.sys-cta p em{font-style:normal; color:var(--accent)}
@media (max-width:780px){ .sys-cta{padding:24px} .sys-cta .btn{width:100%; justify-content:center} }
.hub-note{margin-top:12px; text-align:center; font-family:var(--sans); font-size:11.5px; color:var(--muted-2)}

/* ---------- GTM system: pillars and modules ---------- */
.pillar{margin-top:88px}
.pillar-head{display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 20px; padding-bottom:18px; border-bottom:1px solid var(--line)}
.pillar-k{font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); white-space:nowrap}
.pillar-head h3{font-size:clamp(22px,2.4vw,32px); letter-spacing:-.025em}
.pillar-n{margin-left:auto; font-family:var(--sans); font-size:13px; color:var(--muted-2); font-variant-numeric:tabular-nums}
.pillar .svc{margin-top:22px}
.mod h3 i{font-style:normal; color:var(--accent); margin-right:4px}
.mod-get{margin:16px 0 0; padding:0}
.mod-get li{list-style:none; font-size:14.5px; line-height:1.45; color:var(--ink-2); padding:6px 0 6px 18px; position:relative}
.mod-get li::before{content:""; position:absolute; left:0; top:15px; width:8px; height:1px; background:var(--accent-dim)}
.chip-proof{color:var(--accent); border-color:rgba(0,229,255,.35); transition:.18s ease}
.chip-proof:hover{background:var(--accent-wash); border-color:var(--accent); color:var(--accent)}
.w-tag{align-self:flex-start; font-family:var(--sans); font-size:11.5px; padding:4px 11px; border-radius:99px;
  border:1px solid rgba(0,229,255,.4); color:var(--accent); background:rgba(0,229,255,.08); opacity:0; transition:opacity .5s ease 1.8s}
.in .w-tag{opacity:1}

/* 01: won deals by segment; the winning segment lights up once the bars settle */
.icp{width:100%; display:flex; flex-direction:column; gap:8px; font-family:var(--sans)}
.icp-head{display:flex; justify-content:space-between; gap:10px; margin-bottom:2px; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted-2)}
.icp-row{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 34px; gap:10px; align-items:center; margin:0 -8px; padding:6px 8px;
  border:1px solid transparent; border-radius:8px; font-size:12.5px; color:var(--ink-2);
  transition:border-color .5s ease 1.5s, background-color .5s ease 1.5s}
.icp-row .k{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.icp-row b{font-weight:500; text-align:right; color:var(--muted); font-variant-numeric:tabular-nums}
.icp .bar{height:8px}
.icp-row:not(.top) .bar i{background:#3a3a39; box-shadow:none}
.icp-row:nth-child(3) .bar i{transition-delay:.12s}
.icp-row:nth-child(4) .bar i{transition-delay:.24s}
.icp-row:nth-child(5) .bar i{transition-delay:.36s}
.in .icp-row.top{border-color:rgba(0,229,255,.4); background-color:rgba(0,229,255,.05)}
.icp-row.top b{color:var(--accent)}

/* 02: three sources merge, dedupe and narrow down (numbers count up in JS) */
.tam{width:100%; display:flex; flex-direction:column; gap:16px; font-family:var(--sans)}
.tam-src{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.tam-src > div,.tam-step{min-width:0; padding:9px 11px; border:1px solid var(--line); border-radius:8px; background:var(--card-2)}
.tam span{display:block; min-width:0; font-size:11.5px; color:var(--muted-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tam b{display:block; margin-top:3px; font-family:var(--tight); font-weight:400; font-size:18px; line-height:1.1; color:var(--ink-2);
  font-variant-numeric:tabular-nums}
.tam-step{position:relative; display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.tam-step b{flex:0 0 auto; margin-top:0}
.tam-step span{white-space:normal; line-height:1.3}
.tam-step::before{content:""; position:absolute; left:50%; top:-17px; width:1px; height:16px; background:var(--line-2)}
.tam-step.out{transition:border-color .5s ease, background-color .5s ease}
.tam-step.out b{font-size:24px; color:var(--accent)}
.tam.done .tam-step.out{border-color:rgba(0,229,255,.5); background-color:rgba(0,229,255,.06)}

/* 03: ranked accounts against the threshold; the grade decides who works them */
.rank{width:100%; display:flex; flex-direction:column; gap:10px; font-family:var(--sans); font-size:12.5px}
.rank-row{display:grid; grid-template-columns:22px minmax(0,1fr) minmax(56px,.55fr) 26px; gap:10px; align-items:center; color:var(--ink-2)}
.rank-row .g{width:22px; height:22px; border-radius:6px; display:grid; place-items:center; font-size:11.5px; font-weight:600;
  border:1px solid var(--line-2); color:var(--muted)}
.rank-row.a .g{color:var(--accent); border-color:rgba(0,229,255,.45); background:rgba(0,229,255,.08)}
.rank-row .nm{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rank-row b{font-family:var(--tight); font-weight:400; font-size:17px; line-height:1; text-align:right; color:var(--ink);
  font-variant-numeric:tabular-nums}
.rank-row.c .nm,.rank-row.c b{color:var(--muted-2)}
.rank .acu-bar{display:block}
.rank .acu-bar i{transition:width 1.2s cubic-bezier(.22,.9,.3,1)}
.in .rank .acu-bar i{width:var(--s)}
.rank-row:nth-child(2) .acu-bar i{transition-delay:.12s}
.rank-row:nth-child(3) .acu-bar i{transition-delay:.24s}
.rank-row:nth-child(4) .acu-bar i{transition-delay:.36s}
.rank-foot{display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:4px; padding-top:11px; border-top:1px solid var(--line)}
.rank-foot span{font-size:11px; padding:3px 9px; border-radius:99px; border:1px solid var(--line-2); color:var(--muted)}
.rank-foot em{margin-left:auto; font-style:normal; font-size:11px; color:var(--muted-2)}

/* 05: a call list working itself down (JS swaps the contact) */
.dial{width:100%; display:flex; flex-direction:column; gap:10px; font-family:var(--sans); font-size:12.5px}
.dial-top{display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2)}
.dial-q{margin-left:auto; font-size:11.5px; letter-spacing:0; text-transform:none; font-variant-numeric:tabular-nums}
.dial-card{display:flex; flex-direction:column; gap:9px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--card-2); transition:opacity .25s ease, transform .25s ease}
.dial-card.swap{opacity:0; transform:translateY(6px)}
.dial-who b{display:block; font-size:13.5px; font-weight:500; color:var(--ink)}
.dial-who span{display:block; margin-top:1px; font-size:12px; color:var(--muted)}
.dial-num{display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:9px; border-top:1px solid var(--line)}
.d-num{font-family:ui-monospace,Consolas,monospace; font-size:12.5px; color:var(--ink-2); white-space:nowrap}
.d-ver{font-size:11px; padding:2px 8px; border-radius:99px; border:1px solid rgba(0,229,255,.4); color:var(--accent);
  background:rgba(0,229,255,.08); white-space:nowrap}
.dial-hook{display:grid; grid-template-columns:52px minmax(0,1fr); gap:8px; align-items:baseline}
.dial-hook .k{font-size:11.5px; color:var(--muted-2)}
.d-hook{line-height:1.4; color:var(--ink-2)}
.dial-act{display:flex; align-items:center; gap:12px}
.dial-btn{display:inline-flex; align-items:center; padding:6px 16px; border-radius:99px; background:var(--accent); color:#04191d;
  font-size:12.5px; font-weight:600}
.dial-btn.ring{animation:ring 1s ease-out infinite}
@keyframes ring{from{box-shadow:0 0 0 0 rgba(0,229,255,.55)} to{box-shadow:0 0 0 11px rgba(0,229,255,0)}}
.dial-crm{font-size:11.5px; color:var(--muted-2); transition:color .3s ease}
.dial-crm.done{color:var(--ink-2)}
.dial-crm.done::before{content:"\2713\00a0"; color:var(--accent)}

/* 07: a sign-up enriched, scored and routed, one step after the other */
.inb{width:100%; display:flex; flex-direction:column; gap:8px; font-family:var(--sans)}
.inb-step{display:flex; align-items:center; gap:11px; padding:9px 12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--card-2)}
.inb-ic{width:28px; height:28px; flex:0 0 auto; border-radius:7px; display:grid; place-items:center; background:#171716;
  border:1px solid var(--line-2); font-size:12px; font-weight:600; color:#b4b4b2}
.inb-step:last-child .inb-ic{color:var(--accent); border-color:rgba(0,229,255,.4)}
.inb-t{min-width:0}
.inb-t b{display:block; font-size:13px; font-weight:500; color:var(--ink-2)}
.inb-t em{display:block; font-style:normal; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.inb-step:nth-child(1){animation:inb1 7s ease-in-out infinite}
.inb-step:nth-child(2){animation:inb2 7s ease-in-out infinite}
.inb-step:nth-child(3){animation:inb3 7s ease-in-out infinite}
.inb-step:nth-child(4){animation:inb4 7s ease-in-out infinite}
@keyframes inb1{0%,2%{opacity:.28} 8%,84%{opacity:1} 94%,100%{opacity:.28}}
@keyframes inb2{0%,14%{opacity:.28} 20%,84%{opacity:1} 94%,100%{opacity:.28}}
@keyframes inb3{0%,26%{opacity:.28} 32%,84%{opacity:1} 94%,100%{opacity:.28}}
@keyframes inb4{0%,38%{opacity:.28; border-color:#1e1e1d; background-color:#0c0c0b}
  44%,84%{opacity:1; border-color:rgba(0,229,255,.45); background-color:#0b1718}
  94%,100%{opacity:.28; border-color:#1e1e1d; background-color:#0c0c0b}}

/* 08: record health moving from before to after once the card is in view */
.crm{width:100%; display:flex; flex-direction:column; gap:14px; font-family:var(--sans)}
.crm-l{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:7px; font-size:12.5px; color:var(--ink-2)}
.crm-l em{font-style:normal; font-size:12px; color:var(--muted-2); white-space:nowrap; font-variant-numeric:tabular-nums}
.crm-l em b{font-weight:500; color:var(--accent)}
.crm .bar{height:9px}
.crm .bar i{width:var(--from); background:#d9963a; box-shadow:none;
  transition:width 1.5s cubic-bezier(.22,.9,.3,1) .4s, background-color .5s ease 1.1s, box-shadow .5s ease 1.1s}
.in .crm .bar i{width:var(--to); background:var(--accent); box-shadow:0 0 12px rgba(0,229,255,.4)}

@media (max-width:900px){
  .orch{grid-template-columns:minmax(0,1fr); row-gap:52px; padding:22px}
  .orch-col{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
  .orch-col .orch-k{grid-column:1 / -1}
  .orch-node{flex-direction:column; align-items:flex-start; gap:8px; padding:10px 11px}
  .orch-node{position:relative}
  .orch-node .tag-dfy{position:absolute; right:10px; top:10px; margin:0}
  .orch-t b{font-size:13px}
  .orch-t span{font-size:11.5px}
}

/* ---------- status quo / gap ---------- */
.g3{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; margin-top:52px}
.compare{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:18px; margin-top:48px}
.pane{padding:30px; border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(180deg,var(--card),var(--card-2))}
.pane--on{border-color:rgba(0,229,255,.3);
  background:linear-gradient(180deg,rgba(0,229,255,.055),rgba(12,12,11,.9))}
.pane-tag{font-family:var(--sans); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted-2); margin-bottom:16px}
.pane--on .pane-tag{color:var(--accent)}
.pane-quote{font-size:19px; line-height:1.45; color:var(--muted-2); margin-bottom:24px; min-height:84px}
.pane--on .pane-quote{color:var(--ink)}
.tick{display:flex; gap:12px; align-items:flex-start; font-size:15.5px; line-height:1.5;
  color:var(--muted); padding:8px 0}
.pane--on .tick{color:var(--ink-2)}
.tick i{flex:0 0 19px; height:19px; margin-top:2px; border-radius:50%; display:grid; place-items:center;
  font-size:10px; font-style:normal; background:#191918; color:var(--muted-2)}
.pane--on .tick i{background:rgba(0,229,255,.18); color:var(--accent)}
.layers{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:18px; margin-top:18px}
.layer h3{font-size:24px; color:var(--ink); margin-bottom:12px}
.layer h3 i{font-style:normal; color:var(--accent); margin-right:6px}
.layer p{font-size:15px; color:var(--muted); margin-bottom:16px; line-height:1.55}
.layer ul{margin:0; padding:0}
.layer li{list-style:none; font-size:15px; color:var(--ink-2); padding:7px 0 7px 18px; position:relative}
.layer li::before{content:""; position:absolute; left:0; top:15px; width:8px; height:1px; background:var(--accent-dim)}

/* ---------- status quo widgets: each one shows the problem its card names ---------- */
.g3 > .card{display:flex; flex-direction:column}
.sq-well{min-height:228px; display:flex; align-items:center; justify-content:center}

/* I: one signal, every competitor alerted at the same moment */
.sig{width:100%; display:flex; flex-direction:column; gap:10px}
.sig-src{display:flex; align-items:center; gap:9px; font-family:var(--sans); font-size:12.5px; color:var(--ink-2);
  padding-bottom:10px; border-bottom:1px solid var(--line)}
.sig-dot{width:8px; height:8px; border-radius:50%; background:var(--accent); flex:0 0 auto; animation:sigPing 4s ease-out infinite}
@keyframes sigPing{0%,8%{box-shadow:0 0 0 0 rgba(0,229,255,.55)} 34%,100%{box-shadow:0 0 0 10px rgba(0,229,255,0)}}
.sig-row{display:flex; align-items:center; justify-content:space-between; gap:10px; font-family:var(--sans); font-size:12.5px}
.sig-row b{font-weight:500; color:var(--ink-2)}
.sig-chip{font-size:11.5px; padding:3px 10px; border-radius:99px; border:1px solid var(--line-2); color:var(--muted-2);
  animation:sigChip 4s ease-in-out infinite}
@keyframes sigChip{0%,12%{color:var(--muted-2); border-color:var(--line-2); background:transparent}
  20%,70%{color:var(--accent); border-color:rgba(0,229,255,.45); background:rgba(0,229,255,.08)}
  84%,100%{color:var(--muted-2); border-color:var(--line-2); background:transparent}}

/* II: the merge-tag opener, read and archived */
.mailwrap{position:relative; width:100%; transform-origin:82% 100%; animation:mailToss 5.5s ease-in-out infinite}
/* the merge-tag mail is read, flagged as spam and thrown away */
@keyframes mailToss{
  0%,34%{transform:none; opacity:1}
  48%{transform:translate(108px,92px) rotate(14deg) scale(.16); opacity:.1}
  50%,62%{transform:translate(108px,92px) rotate(14deg) scale(.16); opacity:0}
  71%,100%{transform:none; opacity:1}}
.bin{position:absolute; right:10px; bottom:6px; width:66px; height:74px}
.bin svg{width:100%; height:100%; fill:none; stroke:var(--muted-2); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  animation:binGlow 5.5s ease-in-out infinite}
.bin .lid{transform-origin:10px 13px; animation:binLid 5.5s ease-in-out infinite}
.bin .body{animation:binBump 5.5s ease-in-out infinite}
@keyframes binLid{0%,34%{transform:none} 42%,54%{transform:rotate(-30deg) translate(-1px,-2px)} 64%,100%{transform:none}}
@keyframes binBump{0%,48%{transform:none} 53%{transform:translateY(2px)} 66%,100%{transform:none}}
@keyframes binGlow{0%,44%{stroke:var(--muted-2)} 50%,58%{stroke:#ff4d4d} 70%,100%{stroke:var(--muted-2)}}
.mail{padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--card-2);
  font-family:var(--sans); font-size:12.5px; color:var(--ink-2); animation:mailFade 5.5s ease-in-out infinite}
.mail-head{color:var(--muted-2); padding-bottom:9px; margin-bottom:9px; border-bottom:1px solid var(--line)}
.mail-head b{font-weight:500; color:var(--ink-2)}
.mail-line{line-height:1.75}
.tok{font-family:ui-monospace,Consolas,monospace; font-size:11.5px; padding:1px 4px; border-radius:5px;
  color:var(--accent); background:rgba(0,229,255,.08); animation:tokPulse 6s ease-in-out infinite}
@keyframes tokPulse{0%,8%,48%,100%{background:rgba(0,229,255,.08)} 18%,36%{background:rgba(0,229,255,.26)}}
.mail-bar{height:6px; width:92%; border-radius:99px; background:#1b1b1a; margin-top:9px}
.mail-bar.short{width:58%}
.mail-tag{position:absolute; top:-12px; right:14px; z-index:1; font-family:var(--sans); font-size:12.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; padding:5px 13px; border-radius:99px;
  border:1px solid rgba(255,77,77,.55); color:#ff4d4d; background:#1a0f0f;
  opacity:0; animation:mailTag 5.5s ease-in-out infinite}
@keyframes mailFade{0%,26%{opacity:1} 34%,46%{opacity:.55} 100%{opacity:1}}
@keyframes mailTag{0%,16%{opacity:0; transform:translateY(-4px)} 24%,44%{opacity:1; transform:none} 48%,100%{opacity:0}}

/* III: volume climbs, replies stay flat, reputation drains (driven by JS) */
.vol{width:100%; display:flex; flex-direction:column; gap:12px; font-family:var(--sans)}
.vol-row{display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:12.5px; color:var(--muted)}
.vol-row b{font-family:var(--tight); font-weight:400; font-size:26px; line-height:1; color:var(--ink);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.vol-row b.dim{font-size:20px; color:var(--muted)}
.vol-row em{font-style:normal; color:var(--ink-2); font-variant-numeric:tabular-nums}
.vol-bar{height:8px; margin-top:8px; border-radius:99px; background:#151514; border:1px solid var(--line); overflow:hidden}
.vol-fill{display:block; height:100%; width:96%; border-radius:99px; background:var(--accent); transition:background .4s ease}
.vol-fill.warn{background:#d9963a}

/* ---------- three layers as one flow: an event travels signal -> acumen -> action ---------- */
.layers.flow3{grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr) 44px minmax(0,1fr); gap:0}
.flow3 .layer{display:flex; flex-direction:column; transition:border-color .35s ease, box-shadow .35s ease}
.flow3 .layer.on{border-color:rgba(0,229,255,.32); box-shadow:0 22px 50px -32px rgba(0,229,255,.4)}
.flow3 .lw{height:252px; display:flex; align-items:center; justify-content:center; margin-bottom:24px}

/* connectors, vertically centred on the widget wells (card padding 26 + well 252/2) */
.flow3 .link{position:relative}
.flow3 .link::before{content:""; position:absolute; left:6px; right:10px; top:152px; height:1px; background:var(--line-2); transition:background .3s ease}
.flow3 .link::after{content:""; position:absolute; right:8px; top:149px; width:7px; height:7px;
  border-top:1px solid var(--muted-2); border-right:1px solid var(--muted-2); transform:rotate(45deg)}
.flow3 .link i{position:absolute; left:6px; top:149px; width:7px; height:7px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 12px rgba(0,229,255,.9); opacity:0}
.flow3 .link.go::before{background:rgba(0,229,255,.45)}
.flow3 .link.go i{animation:linkX .6s ease-in-out forwards}
@keyframes linkX{0%{left:6px; opacity:0} 15%,85%{opacity:1} 100%{left:calc(100% - 14px); opacity:0}}
@keyframes linkY{0%{top:4px; opacity:0} 15%,85%{opacity:1} 100%{top:calc(100% - 14px); opacity:0}}

/* signal: live feed */
.feed{width:100%}
.feed-head{display:flex; align-items:center; gap:8px; margin-bottom:10px; font-family:var(--sans); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2)}
.live-dot{width:7px; height:7px; border-radius:50%; background:var(--accent); flex:0 0 auto; animation:sigPing 2s ease-out infinite}
.feed-src{margin-left:auto; text-transform:none; letter-spacing:0; font-size:11.5px}
.feed-list{display:flex; flex-direction:column; gap:7px}
.ev{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:9px; padding:7px 10px;
  border:1px solid var(--line); border-radius:8px; background:var(--card-2); font-family:var(--sans); font-size:12.5px;
  color:var(--ink-2); transition:border-color .3s ease, background .3s ease}
.ev.hot{border-color:rgba(0,229,255,.45); background:rgba(0,229,255,.05)}
.ev.new{animation:evIn .45s ease-out}
@keyframes evIn{from{opacity:0; transform:translateY(-10px)} to{opacity:1; transform:none}}
.ev-type{font-family:var(--sans); font-size:11px; padding:2px 8px; border-radius:99px; border:1px solid var(--line-2);
  color:var(--muted); white-space:nowrap}
.ev.hot .ev-type,.acu .ev-type{color:var(--accent); border-color:rgba(0,229,255,.4)}
.ev-txt{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ev-ago{font-size:11px; color:var(--muted-2); font-variant-numeric:tabular-nums}

/* acumen: interpretation + score against the threshold */
.acu,.act{width:100%; display:flex; flex-direction:column; gap:10px; font-family:var(--sans); font-size:12.5px; transition:opacity .35s ease}
.acu.dim,.act.dim{opacity:.28}
.acu-ev{display:flex; align-items:center; gap:8px; padding-bottom:10px; border-bottom:1px solid var(--line); color:var(--ink-2); min-height:32px}
.acu-row{display:grid; grid-template-columns:58px minmax(0,1fr); gap:10px; align-items:baseline}
.acu-row .k,.acu-score .k{font-size:11.5px; color:var(--muted-2)}
.acu-row .v{color:var(--ink-2); line-height:1.45}
.acu-why{min-height:36px}
.acu-score{display:grid; grid-template-columns:58px minmax(0,1fr) 30px; gap:10px; align-items:center}
.acu-bar{position:relative; height:8px; border-radius:99px; background:#151514; border:1px solid var(--line)}
.acu-bar i{display:block; height:100%; width:0; border-radius:99px; background:#3a3a39; transition:background .3s ease}
.acu-bar i.pass{background:var(--accent); box-shadow:0 0 10px rgba(0,229,255,.45)}
.acu-bar::after{content:""; position:absolute; left:70%; top:-5px; bottom:-5px; width:1px; background:var(--muted)}
.acu-num{font-family:var(--tight); font-weight:400; font-size:20px; line-height:1; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums}
.acu-note{font-size:11px; color:var(--muted-2)}

/* action: message, channels, handover */
.act-ch{display:flex; align-items:center; gap:6px}
.act-ch .ch{font-size:11px; padding:3px 9px; border-radius:99px; border:1px solid var(--line-2); color:var(--muted-2); transition:.3s ease}
.act-ch .ch.on{color:var(--accent); border-color:rgba(0,229,255,.45); background:rgba(0,229,255,.08)}
.act-to{margin-left:auto; font-size:11.5px; color:var(--muted-2); white-space:nowrap}
.act-msg{min-height:78px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--card-2);
  color:var(--ink-2); line-height:1.5; transition:border-color .3s ease, color .3s ease}
.act-msg.held{color:#d9963a; border-color:rgba(217,150,58,.35)}
.act-steps{display:flex; flex-wrap:wrap; gap:6px; min-height:22px}
.act-steps .st{font-size:11px; padding:3px 9px; border-radius:99px; border:1px solid var(--line); color:var(--muted-2); transition:.3s ease}
.act-steps .st:empty{display:none}
.act-steps .st.done{color:var(--ink-2); border-color:var(--line-2); background:rgba(255,255,255,.03)}
.act-steps .st.done::before{content:"\2713\00a0"; color:var(--accent)}
.act-steps .st.skip{color:#d9963a; border-color:rgba(217,150,58,.4)}

@media (max-width:900px){
  .layers.flow3{grid-template-columns:minmax(0,1fr)}
  .flow3 .link{height:46px}
  .flow3 .link::before{left:50%; right:auto; top:6px; bottom:14px; width:1px; height:auto}
  .flow3 .link::after{left:calc(50% - 3px); right:auto; top:auto; bottom:11px; transform:rotate(135deg)}
  .flow3 .link i{left:calc(50% - 3px); top:4px}
  .flow3 .link.go i{animation-name:linkY}
}

/* ---------- case studies ---------- */
.cases{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:56px}
@media (max-width:900px){ .cases{grid-template-columns:1fr} }
.case{display:flex; flex-direction:column}
.case-top{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 16px;
  margin-bottom:24px; min-height:34px}
.case-brand{display:flex; align-items:center; gap:10px; min-width:0}
.case-top img{width:auto; opacity:.85}
/* funding stage next to the logo, same pill as the DFY marker */
.case-fund{flex:0 0 auto; padding:2px 8px; border-radius:99px; border:1px solid rgba(0,229,255,.4);
  background:rgba(0,229,255,.08); color:var(--accent); font-family:var(--sans); font-size:10px;
  font-weight:600; letter-spacing:.06em; white-space:nowrap}
.case-seg{font-family:var(--sans); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2)}
@media (max-width:460px){ .case-seg{font-size:10.5px; letter-spacing:.06em} .case-fund{font-size:9.5px} }
.case-metric{font-size:clamp(30px,3.2vw,40px); color:var(--accent); letter-spacing:-.03em; margin-bottom:14px; line-height:1.05}
.case-foot{margin-top:auto; padding-top:22px; display:flex; gap:7px; flex-wrap:wrap}

/* ---------- stack ---------- */
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-top:40px}
.filter{font-family:var(--sans); font-size:14px; padding:9px 20px; border-radius:99px;
  border:1px solid var(--line-2); color:var(--muted); background:rgba(255,255,255,.02); transition:.18s ease}
.filter:hover{color:var(--ink); border-color:#333}
.filter.on{background:var(--accent); border-color:var(--accent); color:#04191d; font-weight:600}
.tools{display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); gap:12px; margin-top:24px}
.tool{padding:18px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--card-2);
  transition:.2s ease; min-height:104px; display:flex; flex-direction:column}
.tool:hover{border-color:rgba(0,229,255,.35); background:rgba(0,229,255,.04)}
.tool b{font-family:var(--sans); font-size:15.5px; font-weight:500; color:var(--ink); letter-spacing:-.02em}
.tool span{font-size:13px; color:var(--muted); line-height:1.45; margin-top:7px}
a.tool{color:inherit}
.tool b .ext{font-style:normal; font-size:12px; color:var(--accent); opacity:.8}
.tool .pin{margin-top:auto; align-self:flex-start; font-family:var(--sans); font-size:10.5px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--accent);
  border:1px solid rgba(0,229,255,.35); padding:3px 9px; border-radius:99px}
.tool.hide{display:none}

/* ---------- testimonials: vertical ---------- */
.quotes{margin-top:56px; position:relative}
.qs-track{display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:4px}
.qs-track::-webkit-scrollbar{display:none}
.qs-card{flex:0 0 min(440px,86%); scroll-snap-align:start; margin:0; display:flex; flex-direction:column; min-height:380px;
  padding:30px; border:1px solid var(--line); border-radius:var(--r); background:linear-gradient(180deg,var(--card),var(--card-2));
  transition:border-color .2s ease}
.qs-card:hover{border-color:var(--line-2)}
.qs-logo{align-self:flex-start; width:auto; opacity:.85}
.qs-logo.ph{display:inline-flex; align-items:center; height:30px; padding:0 12px; border:1px dashed var(--line-2); border-radius:8px;
  font-family:var(--sans); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2)}
.qs-card blockquote{flex:1; margin:26px 0 0}
.qs-card h3{font-size:clamp(20px,1.9vw,25px); line-height:1.3; letter-spacing:-.02em}
.qs-card p{margin-top:14px; font-size:15px; line-height:1.55; color:var(--muted)}
.qs-card figcaption{display:flex; align-items:center; gap:14px; margin-top:26px; padding-top:20px; border-top:1px solid var(--line)}
.qs-photo{width:52px; height:52px; flex:0 0 auto; border-radius:50%; object-fit:cover}
.qs-photo.ph{display:grid; place-items:center; border:1px dashed var(--line-2); background:#141413;
  font-family:var(--sans); font-size:14px; font-weight:600; color:#8a8a88}
.qs-card figcaption b{display:block; font-family:var(--sans); font-size:15px; font-weight:500; color:var(--ink)}
.qs-card figcaption span span{display:block; font-family:var(--sans); font-size:13.5px; color:var(--accent)}
.qs-nav{display:flex; gap:10px; margin-top:22px}
.qs-btn{width:46px; height:46px; border-radius:50%; border:1px solid var(--line-2); color:var(--ink); font-size:18px; transition:.2s ease}
.qs-btn:hover{border-color:var(--accent); color:var(--accent)}
.quote{padding:30px 32px; border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(180deg,var(--card),var(--card-2)); transition:.22s ease}
.quote:hover{border-color:var(--line-2)}
.quote h3{font-size:clamp(21px,2.2vw,29px); line-height:1.25; letter-spacing:-.025em; margin:0}
.quote p{margin:14px 0 22px; font-size:15px; line-height:1.55; color:var(--muted); max-width:72ch}
.by{display:flex; align-items:center; gap:13px}
.av{width:38px; height:38px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  background:#171716; border:1px solid var(--line-2); font-family:var(--sans); font-size:13px;
  font-weight:600; color:#b4b4b2; letter-spacing:-.02em}
.by b{display:block; font-family:var(--sans); font-size:15px; font-weight:500; color:var(--ink)}
.by span{display:block; font-family:var(--sans); font-size:13.5px; color:var(--accent)}
.quote.more{display:none}
.quotes.open .quote.more{display:block}
.more-btn{align-self:flex-start; margin-top:8px}

/* ---------- insights ---------- */
.posts{display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:18px; margin-top:56px}
.post{display:flex; flex-direction:column; height:100%}
.post-meta{display:flex; gap:12px; align-items:center; font-family:var(--sans); font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); margin-bottom:18px}
.post-meta .cat{color:var(--accent)}
.post h3{font-size:22px; line-height:1.25; margin-bottom:12px}
.post p{flex:1}
.post-link{margin-top:22px; font-family:var(--sans); font-size:14.5px; font-weight:500; color:var(--accent);
  display:inline-flex; align-items:center; gap:8px}
.post-link .ar{transition:transform .2s ease}
.post:hover .post-link .ar{transform:translate(2px,-2px)}
.posts-all{display:none; margin-top:26px}

/* ---------- team ---------- */
.team{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; margin-top:56px}
.person{text-align:center; padding:36px 28px}
.person .av{width:96px; height:96px; font-size:28px; margin:0 auto 22px}
.person img.av{object-fit:cover; background:none; border-color:var(--line-2)}
.person b{display:block; font-family:var(--tight); font-size:28px; font-weight:400; color:var(--ink); letter-spacing:-.025em}
.person .role{font-family:var(--sans); font-size:14px; color:var(--accent); margin-top:6px}
.person .role + a{margin-top:20px}
.person p{margin-top:16px; font-size:15px; line-height:1.55}

/* ---------- FAQ ---------- */
.faq{margin-top:56px; max-width:920px; border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%;
  text-align:left; padding:26px 4px; font-family:var(--tight); font-size:20px; font-weight:400;
  color:var(--ink); letter-spacing:-.02em; transition:.18s ease}
.faq-q:hover{color:var(--accent)}
.faq-q .pm{flex:0 0 26px; height:26px; border-radius:50%; border:1px solid var(--line-2);
  display:grid; place-items:center; position:relative; transition:.24s ease}
.faq-q .pm::before,.faq-q .pm::after{content:""; position:absolute; background:var(--muted); transition:.24s ease}
.faq-q .pm::before{width:11px; height:1.5px}
.faq-q .pm::after{width:1.5px; height:11px}
.faq-item.on .pm{background:var(--accent); border-color:var(--accent); transform:rotate(180deg)}
.faq-item.on .pm::before{background:#04191d}
.faq-item.on .pm::after{opacity:0}
.faq-a{max-height:0; overflow:hidden; transition:max-height .32s ease}
.faq-a p{padding:0 4px 28px; font-size:16px; line-height:1.62; color:var(--muted); max-width:78ch}

/* ---------- contact ---------- */
.cta-box{display:grid; grid-template-columns:1.3fr .95fr; gap:18px; margin-top:56px}
.cta-card{padding:48px; border:1px solid rgba(0,229,255,.26); border-radius:var(--r);
  background:linear-gradient(180deg,rgba(0,229,255,.07),rgba(12,12,11,.9))}
.info-row{padding:18px 0; border-bottom:1px solid var(--line)}
.info-row:last-child{border-bottom:none; padding-bottom:0}
.info-card{display:flex; flex-direction:column; justify-content:center; text-align:center}
.info-row .k{font-family:var(--sans); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted-2); margin-bottom:7px}
.info-row .v{font-size:16px; color:var(--ink-2); line-height:1.5}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line); padding:64px 0 40px}
.foot-grid{display:grid; grid-template-columns:1.7fr repeat(3,1fr); gap:36px}
.foot h4{font-family:var(--sans); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted-2); font-weight:500; margin-bottom:16px}
.foot a{display:block; font-size:15px; color:var(--muted); padding:5px 0}
.foot a:hover{color:var(--accent)}
/* .foot a would otherwise out-specify .brand and break the lockup onto two lines */
.foot a.brand{display:flex; padding:0; margin-bottom:16px}
.foot-bar{margin-top:52px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:14px; color:var(--muted-2)}
.foot-bar a{display:inline; padding:0}

/* ---------- reveal (progressive enhancement) ---------- */
.js [data-reveal]{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.js [data-reveal].in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1; transform:none; transition:none}
  .marquee-track,.tiles-row,.sw,.sw i,.w-on,.seg .s1,.seg .s2,
  .build .tile.drag,.cursor,.chart .ln,.chart .dot,.caret,
  .sig-dot,.sig-chip,.mail,.mail-tag,.mailwrap,.bin svg,.bin .lid,.bin .body,.tok,.live-dot,.ev.new,.flow3 .link i,
  .inb-step,.dial-btn,.js .in .chat-msg{animation:none !important}
  .mail-tag,.inb-step{opacity:1}
  .mailwrap{transform:none; opacity:1}
  .chart .ln{stroke-dashoffset:0}
  .chat-msg,.js .chat-msg{opacity:1; animation:none}
}

/* ---------- responsive ---------- */
@media (max-width:1120px){
  :root{--pad:28px}
  .proc,.svc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proc > .card,
  .proc > .card:nth-child(4){grid-column:auto}
  /* five cards never balance in two columns — centre the odd one out */
  .proc > .card:nth-child(5){grid-column:1 / -1; justify-self:center; width:calc(50% - 9px)}
  /* three modules in two columns: the third takes the full row, its widget stays card-sized */
  .svc > .card:nth-child(3):last-child{grid-column:1 / -1}
  .svc > .card:nth-child(3):last-child .well > *{max-width:520px}
  .cta-box{grid-template-columns:1fr}
}
@media (max-width:780px){
  :root{--pad:20px}
  .h2{font-size:clamp(32px,9.4vw,42px)}
  .sec{padding:76px 0}
  .hero{padding:130px 0 70px}
  .nav-pill{display:none}
  .nav-pill.open{display:flex; position:absolute; left:0; right:0; top:calc(100% + 12px);
    flex-direction:column; align-items:stretch; gap:2px; padding:10px; background:#101010;
    border-radius:var(--r)}
  .nav-pill.open a{padding:12px 14px; font-size:16px}
  .nav-pill.open .nav-cta-m{display:block; color:var(--accent)}
  .burger{display:flex}
  .nav .btn-cta{display:none}
  .proc,.svc{grid-template-columns:1fr}
  .proc > .card:nth-child(5){grid-column:auto; width:auto}
  .svc > .card:nth-child(3):last-child{grid-column:auto}
  .foot-grid{grid-template-columns:1fr 1fr}
  .cta-card{padding:32px}
  .posts-all{display:inline-flex}
  .head-row .btn{display:none}
  .hero-cta .btn{width:100%; justify-content:center}
}
@media (max-width:520px){ .foot-grid{grid-template-columns:1fr} }

/* ---------- multi-page: subpage openers, active nav, module index on the homepage ---------- */
.sec.first{padding-top:170px}
h1.h2{margin:0; max-width:none; font-size:clamp(42px,6.6vw,90px); line-height:1.06; letter-spacing:-.03em; text-wrap:balance}
.nav-pill a[aria-current]{background:rgba(255,255,255,.08); color:#fff}
.lang-switch{font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.06em; color:var(--muted-2)}
.lang-switch:hover{color:var(--accent)}
.mod-index{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:18px}
a.card.mi{display:flex; flex-direction:column; color:inherit}
a.card.mi:hover{border-color:rgba(0,229,255,.35)}
.mi h3{font-size:22px; margin:12px 0 16px}
.mi ol{margin:0; padding:0; list-style:none}
.mi li{display:flex; gap:12px; padding:10px 0; border-top:1px solid var(--line); font-size:15px; color:var(--ink-2)}
.mi li i{font-style:normal; min-width:22px; font-family:var(--sans); font-size:13px; color:var(--accent)}
.mi-more{margin-top:auto; padding-top:18px; font-family:var(--sans); font-size:14px; font-weight:500; color:var(--accent)}
.mi-more .ar{display:inline-block; transition:transform .2s ease}
a.card.mi:hover .mi-more .ar{transform:translate(2px,-2px)}
@media (max-width:900px){ .mod-index{grid-template-columns:1fr} }
@media (max-width:780px){ .sec.first{padding-top:130px} }

/* ---------- round 3 ---------- */
/* module cards: every widget well the same height and headlines reserving two lines,
   so labels, headlines and copy sit on one level across each row */
.pillar .svc .well{height:300px; min-height:0}
.mod-k{margin-bottom:10px; font-family:var(--sans); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2)}
.mod-k i{font-style:normal; color:var(--accent); margin-right:8px}
.mod h3{min-height:2.12em}
@media (max-width:780px){ .mod h3{min-height:0} .pillar .svc .well{height:auto; min-height:260px} }
/* case cards: video thumbnail on top, plays in place */
.case .vid{max-width:none; margin:0 0 24px; border-radius:var(--r-sm)}
/* homepage cards keep the centred button; the case-study page uses a corner pill so the
   quote in the thumbnail stays readable */
.case .vid .play i{width:54px; height:54px; box-shadow:0 0 0 10px rgba(0,229,255,.14)}
.case .vid .play svg{width:18px; height:18px}
.case .vid .play-pill{position:absolute; right:12px; bottom:12px; display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:99px; border:1px solid rgba(0,229,255,.5); background:rgba(4,25,29,.82);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-family:var(--sans); font-size:12.5px; font-weight:500; color:#eafcff; transition:.2s ease}
.case .vid .play-pill svg{width:12px; height:12px; fill:currentColor}
.case .vid:hover .play-pill{background:var(--accent); border-color:var(--accent); color:#04191d}
.case-vid-box.ph{aspect-ratio:16/9; margin:0 0 24px; display:grid; place-items:center; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--well)}
.case-vid-box.ph img{height:34px; width:auto; opacity:.45}
.team{max-width:900px; margin-left:auto; margin-right:auto; justify-content:center}

/* ---------- case-study pages (/case-studies/<client>) ---------- */
.case-page .crumb{margin-bottom:26px; font-family:var(--sans); font-size:14px}
.case-page .case-top{max-width:900px}
.case-page h1.h2{max-width:22ch; margin-bottom:34px}
.case-page h1.h2 em{display:block; font-style:normal; color:var(--accent)}
.case-page .vid{max-width:900px; margin:0 0 30px}
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px; max-width:900px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.fact{padding:18px 20px; background:var(--card-2)}
.fact .k{margin-bottom:6px; font-family:var(--sans); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2)}
.fact .v{font-family:var(--sans); font-size:14.5px; line-height:1.4; color:var(--ink-2)}
.case-body{max-width:820px; margin-top:64px}
.case-sec{margin-bottom:56px}
.case-sec h2{margin-bottom:22px; font-size:clamp(26px,3vw,38px); letter-spacing:-.03em}
.case-sec .mod-get li{padding:9px 0 9px 20px; font-size:16.5px}
.steps{display:flex; flex-direction:column; gap:14px}
.step{padding:22px 24px; border:1px solid var(--line); border-radius:var(--r); background:linear-gradient(180deg,var(--card),var(--card-2))}
.step h3{margin-bottom:8px; font-size:19px}
.step p{font-size:15.5px; line-height:1.55; color:var(--muted)}
.nums{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px}
.num{padding:22px 24px; border:1px solid var(--line); border-radius:var(--r); background:var(--card-2)}
.num b{display:block; font-family:var(--tight); font-weight:400; font-size:clamp(26px,3.2vw,38px); letter-spacing:-.03em; color:var(--accent)}
.num span{display:block; margin-top:8px; font-size:14.5px; line-height:1.45; color:var(--muted)}
.pull{margin:0 0 18px; padding:24px 28px; border-left:2px solid var(--accent);
  background:linear-gradient(90deg,rgba(0,229,255,.06),transparent)}
.pull blockquote{margin:0; font-size:clamp(19px,2vw,24px); line-height:1.4; letter-spacing:-.02em; color:var(--ink)}
.pull figcaption{margin-top:14px; font-family:var(--sans); font-size:13.5px; color:var(--accent)}
.case-mods{padding-top:0}
.more-cases{margin-top:64px}
.more-h{margin-bottom:22px; font-size:clamp(22px,2.4vw,30px)}
.more-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
a.card.more-case{display:flex; flex-direction:column; gap:10px; padding:22px; color:inherit}
a.card.more-case:hover{border-color:rgba(0,229,255,.35)}
.more-logo{display:flex; align-items:center; height:30px}
.more-logo img{width:auto; max-width:170px; object-fit:contain; opacity:.85}
.more-case b{font-family:var(--tight); font-weight:400; font-size:26px; letter-spacing:-.02em; color:var(--accent)}
.more-case span{font-size:14.5px; line-height:1.45; color:var(--muted)}
.case-link{display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  font-family:var(--sans); font-size:14.5px; font-weight:500; color:var(--accent)}
.case-link .ar{transition:transform .2s ease}
.case-link:hover .ar{transform:translate(2px,-2px)}
@media (max-width:900px){ .more-grid{grid-template-columns:1fr} }

/* ---------- legal pages (imprint, privacy) ----------
   Long-form text, not marketing: one narrow column, generous line height, and the
   same spec table the blog uses for label/value pairs. */
.foot-legal{display:flex; gap:20px; flex-wrap:wrap}
.legal{max-width:80ch}
.legal h1{margin-bottom:24px; overflow-wrap:anywhere; hyphens:auto}  /* "Datenschutzerklaerung" sprengt sonst 390px */
.legal h2{font-size:clamp(22px,2.2vw,30px); margin:52px 0 14px; letter-spacing:-.025em}
.legal h3{font-family:var(--sans); font-size:17px; font-weight:600; color:var(--ink-2); margin:30px 0 10px}
.legal p{font-size:15.5px; line-height:1.65; color:var(--muted); margin:0 0 14px; overflow-wrap:anywhere}
.legal p strong,.legal li strong{color:var(--ink-2); font-weight:500}
.legal a{color:var(--accent)}
.legal a:hover{text-decoration:underline}
.legal ul,.legal ol{margin:0 0 18px; padding:0}
.legal li{list-style:none; position:relative; padding:7px 0 7px 18px; font-size:15.5px;
  line-height:1.6; color:var(--muted)}
.legal li::before{content:""; position:absolute; left:0; top:16px; width:8px; height:1px; background:var(--accent-dim)}
.legal-address{font-style:normal; font-size:15.5px; line-height:1.75; color:var(--ink-2); margin:0 0 18px}
.legal-status{font-family:var(--sans); font-size:13px; color:var(--muted-2); margin-bottom:30px}
.legal-toc{display:block; padding:22px 24px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--card-2); margin-bottom:8px}
.legal-toc b{display:block; font-family:var(--sans); font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:10px}
.legal-toc ol{counter-reset:toc; margin:0}
.legal-toc li{padding:5px 0 5px 30px; color:var(--ink-2)}
.legal-toc li::before{counter-increment:toc; content:counter(toc) "."; top:5px; left:0; width:auto;
  height:auto; background:none; font-family:var(--sans); font-size:13px; color:var(--muted-2)}
.legal-toc a{color:var(--ink-2)}
.legal-toc a:hover{color:var(--accent); text-decoration:none}
.legal-more{margin-top:44px; padding-top:20px; border-top:1px solid var(--line)}

/* label/value table, same shape as on the blog */
.legal .spec{margin:0 0 24px; padding:18px 20px; border:1px solid var(--line);
  border-radius:var(--r); background:var(--card)}
.legal .spec-row{display:grid; grid-template-columns:190px minmax(0,1fr); gap:8px 14px;
  padding:9px 0; border-bottom:1px solid var(--line)}
.legal .spec-row:last-child{border-bottom:none}
.legal .spec .k{font-family:var(--sans); font-size:11.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted-2); padding-top:3px}
.legal .spec .v{color:var(--ink-2); font-size:15.5px; line-height:1.55}
@media (max-width:600px){ .legal .spec-row{grid-template-columns:1fr; gap:4px} }

/* ---------- consent banner ----------
   Erscheint unten links, nimmt die Seite nicht in Geiselhaft: beide Antworten sind
   gleich gut erreichbar, kein Dark Pattern. */
.consent{position:fixed; left:20px; bottom:20px; z-index:120; width:min(420px, calc(100vw - 40px));
  padding:20px 22px; border:1px solid var(--line-2); border-radius:var(--r);
  background:rgba(12,12,11,.96); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
  opacity:0; transform:translateY(12px); transition:opacity .3s ease, transform .3s ease}
.consent.on{opacity:1; transform:none}
.consent p{font-size:14px; line-height:1.55; color:var(--muted); margin:0 0 16px}
.consent a{color:var(--accent)}
.consent a:hover{text-decoration:underline}
.consent-btns{display:flex; gap:10px; flex-wrap:wrap}
.consent-btns .btn{flex:1 1 auto; justify-content:center}
@media (max-width:560px){ .consent{left:12px; right:12px; bottom:12px; width:auto; padding:18px} }
@media (prefers-reduced-motion:reduce){ .consent{transition:none; opacity:1; transform:none} }

/* ---------- Logoband auf schmalen Schirmen ----------
   Auf 390px passten nur zwei Logos in den Streifen, und zwischen ihnen stand nichts als
   Schwarz. Kleinere Logos plus engere Abstaende zeigen vier bis fuenf auf einmal, und die
   Sektion bekommt weniger Luft, damit das Band nicht im Leeren haengt. */
@media (max-width:780px){
  .proof{padding:40px 0 48px}
  .proof h2{margin-bottom:26px}
  .marquee-row{gap:40px; padding-right:40px}
  .marquee-row img{height:calc(var(--h) * .74)}
  .marquee-track{animation-duration:34s}
  .marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
           mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
}