
/* Layout: wide alternating ink / paper chapters; the Skalebuzz icon travels between anchors and becomes the video trigger */
:root{
  --ink:#191716; --ink-2:#2D2928; --ink-3:#36312F;
  --paper:#F3F2F8; --paper-2:#E6E2F2; --white:#FFFFFF;
  --purple:#7856FF; --purple-deep:#5B3BE8; --purple-soft:#E3DCFF;
  --lime:#D6FF3D; --muted-d:#ABA5BA; --muted-l:#5E5868;
  --line-d:rgba(255,255,255,.12); --line-l:rgba(25,23,22,.12);
  --display:"Outfit","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Manrope","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --gut:clamp(16px,2.4vw,36px); --max:1520px; --r:22px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--body);font-size:16px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
a{color:inherit}
button{font:inherit;cursor:pointer;color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
section{position:relative}
.dark{background:var(--ink);color:var(--paper)}
.light{background:var(--paper);color:var(--ink)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--purple)}
.dark .eyebrow{color:var(--muted-d)} .light .eyebrow{color:var(--muted-l)}
.box{background:var(--purple);color:var(--white);padding:0 .14em .02em;display:inline-block;line-height:1.05}
.h2{font-size:clamp(34px,5vw,72px);font-weight:700}
.lead{font-size:clamp(17px,1.5vw,20px);max-width:58ch}
.dark .lead{color:#CFCAD9} .light .lead{color:var(--muted-l)}
.btn{display:inline-flex;align-items:center;gap:10px;border:0;border-radius:999px;padding:15px 24px;font-weight:700;font-size:15px;text-decoration:none;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.btn:hover{transform:translateY(-2px)}
.btn-lime{background:var(--lime);color:var(--ink)}
.btn-ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn .dot{width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--lime);display:grid;place-items:center;font-size:12px;transition:transform .3s}
.btn:hover .dot{transform:rotate(-45deg)}
.anchor{display:block;flex:none;aspect-ratio:1;pointer-events:none}
.chap{padding-block:clamp(72px,9vw,130px)}
.head{display:flex;align-items:flex-end;gap:28px;justify-content:space-between;flex-wrap:wrap;margin-bottom:48px}
.head>div{display:grid;gap:18px;min-width:0;flex:1 1 520px}
.head .anchor{width:clamp(70px,8vw,116px)}

/* Avatars: photo or initials */
.avs{display:flex}
.avs>*{width:38px;height:38px;border-radius:50%;border:2.5px solid var(--av-b,var(--ink));margin-left:-10px;object-fit:cover;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:13px;color:var(--white);background:var(--purple)}
.avs>*:first-child{margin-left:0}
.who{display:flex;align-items:center;gap:12px;font-size:14px}
.who b{font-weight:700}

/* Play button + video trigger */
.play{width:74px;height:74px;border-radius:50%;background:var(--lime);display:grid;place-items:center;border:0;box-shadow:0 0 0 0 rgba(214,255,61,.6);animation:ping 2.2s infinite;transition:transform .3s}
.play:hover{transform:scale(1.08)}
.play svg{width:24px;height:24px;margin-left:4px}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(214,255,61,.55)}80%,100%{box-shadow:0 0 0 22px rgba(214,255,61,0)}}

/* Traveller */
#trav{position:fixed;left:0;top:0;width:100px;height:100px;z-index:5;pointer-events:none;will-change:transform,opacity}
#trav svg{width:100%;height:100%;overflow:visible;display:block}
#tcap rect{transition:fill .5s}
#trav circle{filter:drop-shadow(0 10px 30px rgba(120,86,255,.45))}

/* Nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;padding-top:env(safe-area-inset-top,0px)}
.nav-in{margin:12px auto 0;max-width:calc(var(--max) - 2*var(--gut));width:calc(100% - 2*var(--gut));display:flex;align-items:center;gap:24px;padding:10px 10px 10px 22px;border-radius:999px;background:rgba(25,23,22,.74);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line-d);color:var(--paper)}
.logo{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.03em;text-decoration:none;display:inline-flex;align-items:center}
.logo .box{margin-left:2px;padding:0 6px 2px}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:14px;font-weight:600}
.nav-links a{text-decoration:none;color:#D9D4E4;transition:color .2s}
.nav-links a:hover{color:var(--lime)}
.nav .btn{padding:11px 18px;font-size:14px}
@media (max-width:900px){.nav-links{display:none}.nav .btn{margin-left:auto}}

/* Hero */
.hero{padding-top:118px;padding-bottom:36px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 70% 40%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 70% 40%,#000 30%,transparent 75%)}
.glow{position:absolute;width:680px;height:680px;border-radius:50%;background:radial-gradient(circle,rgba(120,86,255,.38),transparent 65%);right:-100px;top:10px;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;position:relative}
.hero-copy{min-width:0;display:grid;gap:24px}
.trust{display:flex;align-items:center;gap:14px;font-size:14px;color:#D9D4E4}
.trust .avs>*{width:40px;height:40px}
.hero h1{font-size:clamp(46px,7vw,108px);font-weight:800;letter-spacing:-.035em}
.hero h1 .box{border-radius:6px}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .line>span{display:inline-block;animation:rise 1s cubic-bezier(.2,.8,.2,1) both}
.hero h1 .line:nth-child(2)>span{animation-delay:.1s}
.hero h1 .line:nth-child(3)>span{animation-delay:.2s}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
.ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.proof{display:grid;grid-template-columns:repeat(4,auto);gap:28px;justify-content:start;border-top:1px solid var(--line-d)}
.proof div{display:grid;gap:2px;padding-top:16px}
.proof b{font-family:var(--display);font-size:30px;font-weight:700;font-variant-numeric:tabular-nums}
.proof span{font-size:13px;color:var(--muted-d)}
.hero-vis{position:relative;aspect-ratio:1;max-width:100%;display:grid;place-items:center}
#sphere{position:absolute;inset:0;width:100%;height:100%}
.hero-vis .anchor{width:44%}
.chip{position:absolute;left:50%;top:50%;font-family:var(--mono);font-size:13px;white-space:nowrap;padding:8px 14px;border-radius:999px;background:rgba(40,36,48,.85);border:1px solid rgba(255,255,255,.16);color:var(--paper);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);will-change:transform,opacity}
.chip.hot{background:var(--purple);border-color:transparent}
.chip.lime{background:var(--lime);color:var(--ink);border-color:transparent}
.tour{position:absolute;left:0;bottom:6%;z-index:8;display:flex;align-items:center;gap:12px;padding:8px 18px 8px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(25,23,22,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);text-align:left;transition:transform .3s}
.tour:hover{transform:translateY(-3px)}
.tour .thumb{width:52px;height:52px;border-radius:50%;position:relative;overflow:hidden;flex:none}
.tour .thumb img{width:100%;height:100%;object-fit:cover}
.tour .thumb i{position:absolute;inset:0;display:grid;place-items:center;background:rgba(120,86,255,.45);color:var(--white);font-style:normal;font-size:14px}
.tour b{display:block;font-size:14px}
.tour small{font-size:12px;color:var(--muted-d)}
.marquee{margin-top:44px;border-block:1px solid var(--line-d);overflow:hidden;padding-block:18px}
.marquee .label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-d);text-align:center;margin-bottom:12px}
.track{display:flex;gap:56px;width:max-content;animation:marq 34s linear infinite}
.track span{font-family:var(--display);font-weight:700;font-size:26px;color:#8E879E;white-space:nowrap;display:inline-flex;align-items:center;gap:56px}
.track span::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--purple)}
@keyframes marq{to{transform:translateX(-50%)}}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr}.hero-vis{max-width:500px;margin:0 auto;width:100%}.proof{grid-template-columns:repeat(2,auto)}}

/* Problem + icon video */
.why{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);align-items:center;margin-bottom:56px}
.why>div{min-width:0}
.why-copy{display:grid;gap:22px}
.why-copy .turn{font-family:var(--display);font-size:clamp(21px,2vw,27px);font-weight:600;line-height:1.25;max-width:30ch}
.why-copy .turn em{font-style:normal;background:var(--lime);padding:0 .15em}
.vtrig{position:relative;width:min(100%,560px);margin-inline:auto;aspect-ratio:1;border:0;background:none;padding:0;display:block}
.vtrig svg{width:100%;height:100%;overflow:visible;display:block}
.vtrig .ring{transform-origin:center;animation:spin 18s linear infinite}
.vtrig .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.vtrig .play:hover{transform:translate(-50%,-50%) scale(1.08)}
.vtrig .badge{position:absolute;right:4%;bottom:12%;font-family:var(--mono);font-size:12px;background:var(--ink);color:var(--paper);padding:9px 14px;border-radius:999px;display:flex;gap:8px;align-items:center}
.vtrig .badge::before{content:"";width:8px;height:8px;border-radius:50%;background:#FF5A5A;animation:blink 1.4s infinite}
.vtrig .views{position:absolute;left:2%;top:16%;background:var(--white);color:var(--ink);border-radius:16px;padding:10px 14px;box-shadow:0 18px 40px -18px rgba(25,23,22,.35);display:flex;gap:10px;align-items:center;font-size:13px;font-weight:600}
.vtrig .views .avs>*{width:30px;height:30px;--av-b:var(--white)}
@keyframes blink{50%{opacity:.25}}
@keyframes spin{to{transform:rotate(360deg)}}
.pains{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pain{background:var(--white);border-radius:var(--r);padding:26px;display:grid;gap:16px;align-content:start;border:1px solid var(--line-l);transition:transform .35s,box-shadow .35s}
.pain:hover{transform:translateY(-6px);box-shadow:0 24px 50px -24px rgba(91,59,232,.35)}
.pain svg{width:46px;height:46px}
.pain svg .draw{stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset 1.2s ease .2s}
.pain.in svg .draw{stroke-dashoffset:0}
.pain h3{font-size:21px;font-weight:600;line-height:1.2}
.pain p{font-size:14.5px;color:var(--muted-l)}
@media (max-width:980px){.why{grid-template-columns:1fr}.pains{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pains{grid-template-columns:1fr}}

/* Services */
.stack{display:grid;gap:28px}
.scard{position:sticky;top:calc(92px + var(--i)*18px);border-radius:30px;padding:clamp(20px,2.6vw,36px);display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(20px,3vw,44px);box-shadow:0 -20px 60px -30px rgba(0,0,0,.6)}
.scard>*{min-width:0}
.scard .meta{display:grid;gap:18px;align-content:center}
.tag{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;border-radius:999px;justify-self:start}
.scard h3{font-size:clamp(32px,4vw,56px);font-weight:700}
.scard p{font-size:17px;max-width:46ch}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills span{font-size:13px;font-weight:600;padding:8px 13px;border-radius:999px}
.scard .who{padding-top:6px}
.s-grow{background:var(--purple);color:var(--white)} .s-grow .tag{background:rgba(255,255,255,.18)} .s-grow .pills span{background:rgba(255,255,255,.16)} .s-grow .avs>*{--av-b:var(--purple);background:var(--ink)}
.s-create{background:var(--paper);color:var(--ink)} .s-create .tag{background:var(--purple-soft);color:var(--purple-deep)} .s-create .pills span{background:var(--white);border:1px solid var(--line-l)} .s-create .avs>*{--av-b:var(--paper)}
.s-build{background:var(--ink-3);color:var(--paper)} .s-build .tag{background:rgba(255,255,255,.1)} .s-build .pills span{background:rgba(255,255,255,.08)} .s-build .avs>*{--av-b:var(--ink-3)}
.s-amp{background:var(--lime);color:var(--ink)} .s-amp .tag{background:rgba(25,23,22,.1)} .s-amp .pills span{background:rgba(25,23,22,.08)} .s-amp .avs>*{--av-b:var(--lime);background:var(--ink)}
.media{position:relative;border-radius:22px;overflow:hidden;min-height:380px}
.media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.scard:hover .media>img{transform:scale(1.12)}
.float{position:absolute;border-radius:16px;background:rgba(25,23,22,.86);color:var(--paper);padding:14px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 20px 40px -20px rgba(0,0,0,.6);animation:bob 5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px)}}
.float .lbl{font-family:var(--mono);font-size:11px;color:var(--lime);letter-spacing:.06em}
.bars{display:flex;align-items:flex-end;gap:7px;height:70px;margin-top:8px}
.bars i{width:16px;border-radius:5px 5px 2px 2px;background:rgba(255,255,255,.35);transform-origin:bottom;animation:grow 3.2s cubic-bezier(.2,.8,.2,1) infinite}
.bars i:last-child{background:var(--lime)}
@keyframes grow{0%{transform:scaleY(.15)}45%,80%{transform:scaleY(1)}100%{transform:scaleY(.15)}}
.frames{position:relative;width:96px;height:120px;margin-top:8px}
.frames div{position:absolute;inset:0;border-radius:10px;display:grid;place-items:end start;padding:8px;font-family:var(--display);font-weight:700;font-size:13px;color:var(--white);animation:deal 6s infinite}
.frames div:nth-child(1){background:linear-gradient(160deg,#9B82FF,var(--purple-deep))}
.frames div:nth-child(2){background:linear-gradient(160deg,#4A4442,var(--ink));animation-delay:-2s}
.frames div:nth-child(3){background:linear-gradient(160deg,#E9FF9A,#B9E61C);color:var(--ink);animation-delay:-4s}
@keyframes deal{0%,30%{transform:none;z-index:3}40%{transform:translateX(70px) rotate(14deg);z-index:3}50%,66%{transform:rotate(-6deg) scale(.92);z-index:1}100%{transform:none;z-index:2}}
.browser{width:100%;border-radius:12px;background:#24211F;border:1px solid var(--line-d);overflow:hidden}
.browser .bar{display:flex;gap:5px;padding:8px 10px;border-bottom:1px solid var(--line-d)}
.browser .bar i{width:8px;height:8px;border-radius:50%;background:#55505A}
.browser .body{padding:10px;display:grid;gap:7px}
.browser .body i{display:block;height:10px;border-radius:5px;background:#3D3842;transform-origin:left;animation:paint 4s ease infinite}
.browser .body i.big{height:44px;background:linear-gradient(120deg,var(--purple),#9B82FF)}
.browser .body i.half{width:55%}
.browser .body i.cta{width:40%;height:18px;border-radius:999px;background:var(--lime)}
.browser .body i:nth-child(2){animation-delay:.25s}.browser .body i:nth-child(3){animation-delay:.5s}.browser .body i:nth-child(4){animation-delay:.75s}
@keyframes paint{0%{transform:scaleX(0);opacity:0}15%,85%{transform:scaleX(1);opacity:1}100%{opacity:0}}
.net{position:relative;width:120px;height:120px;margin-top:6px}
.net .hub{position:absolute;inset:50%;width:40px;height:40px;margin:-20px;border-radius:50%;background:var(--purple);display:grid;place-items:center;font-family:var(--display);font-weight:800;color:var(--white)}
.net .rg{position:absolute;inset:50%;width:40px;height:40px;margin:-20px;border-radius:50%;border:2px solid var(--lime);animation:pulse 2.6s ease-out infinite}
.net .rg:nth-child(2){animation-delay:1.3s}
@keyframes pulse{to{transform:scale(3);opacity:0}}
.net .orb{position:absolute;inset:0;animation:spin 14s linear infinite}
.net .orb b{position:absolute;width:26px;height:26px;border-radius:50%;background:var(--paper);display:grid;place-items:center;font-size:9px;color:var(--ink);font-family:var(--mono)}
.bundle{margin-top:28px;border-radius:30px;padding:28px 32px;display:flex;gap:24px;align-items:center;flex-wrap:wrap;border:1.5px dashed rgba(255,255,255,.28)}
.bundle>div{flex:1 1 420px;min-width:0;display:grid;gap:8px}
.bundle h3{font-size:clamp(24px,2.6vw,32px);font-weight:700}
.bundle p{color:var(--muted-d)}
@media (max-width:900px){.scard{grid-template-columns:1fr;position:relative;top:auto}.media{min-height:280px}}

/* Work: mockup-style photo-led cards */
.filters{display:inline-flex;flex-wrap:wrap;gap:6px;padding:6px;border-radius:999px;background:var(--white);border:1px solid var(--line-l)}
.filters button{border:0;background:transparent;padding:10px 18px;border-radius:999px;font-weight:700;font-size:14px;transition:background .2s,color .2s}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.rail-wrap{position:relative}
.rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px;scrollbar-width:thin;cursor:grab}
.rail.dragging{cursor:grabbing;scroll-snap-type:none}
.wk{flex:none;width:clamp(270px,22vw,330px);height:500px;scroll-snap-align:start;border-radius:24px;overflow:hidden;display:flex;flex-direction:column;user-select:none;transition:transform .35s;position:relative}
.wk:hover{transform:translateY(-6px)}
.wk .pic{flex:1;position:relative;overflow:hidden;min-height:0}
.wk .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;transition:transform 1s}
.wk:hover .pic img{transform:scale(1.06)}
.wk .tagrow{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;gap:8px;z-index:1}
.wk .tagrow span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;background:rgba(25,23,22,.78);color:var(--paper);padding:6px 10px;border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.wk .txt{padding:20px 22px 22px;display:grid;gap:8px}
.wk .client{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.wk .metric{font-family:var(--display);font-size:clamp(24px,2vw,30px);font-weight:600;line-height:1.08}
.wk .desc{font-size:13.5px;opacity:.8}
.wk.dk .txt{background:var(--ink);color:var(--paper)} .wk.dk .metric b{color:var(--lime);font-weight:700}
.wk.lt{background:var(--white);border:1px solid var(--line-l)} .wk.lt .txt{color:var(--ink)} .wk.lt .metric b{color:var(--purple);font-weight:700}
.wk.feat{width:clamp(520px,40vw,640px);flex-direction:row;background:var(--purple);color:var(--white)}
.wk.feat .txt{width:50%;align-content:space-between;padding:28px;display:grid}
.wk.feat .metric{font-size:clamp(26px,2.3vw,34px)}
.wk.feat .pic{width:50%;flex:none}
.wk .art{position:absolute;inset:0}
.wk .art i{position:absolute;border-radius:50%}
.wk .art .num{position:absolute;font-family:var(--display);font-weight:800;line-height:.8;letter-spacing:-.05em}
.rail-btn{position:absolute;top:50%;width:62px;height:62px;border-radius:50%;background:var(--lime);border:0;display:grid;place-items:center;font-size:22px;z-index:6;box-shadow:0 12px 30px -10px rgba(25,23,22,.5);transform:translateY(-50%);transition:transform .25s}
.rail-btn:hover{transform:translateY(-50%) scale(1.08)}
#next{right:-10px} #prev{left:-10px}
.note{font-size:12.5px;color:var(--muted-l);margin-top:8px}
@media (max-width:640px){.wk.feat{width:86vw;flex-direction:column}.wk.feat .txt,.wk.feat .pic{width:100%}.wk.feat .pic{flex:1}.rail-btn{display:none}}

/* Testimonials */
.testi{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:18px;align-items:stretch}
.qcard{background:var(--white);color:var(--ink);border-radius:24px;padding:28px;display:grid;gap:18px;align-content:space-between}
.qcard .who .avs>*{--av-b:var(--white)}
.qcard blockquote{margin:0;font-family:var(--display);font-size:21px;line-height:1.3;color:#77707F}
.stars{color:var(--purple);letter-spacing:3px;font-size:16px}
.vcard{position:relative;border-radius:24px;overflow:hidden;min-height:440px;border:0;padding:0;background:var(--ink-3);text-align:left}
.vcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vcard::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(25,23,22,.85))}
.vcard .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2}
.vcard .cap{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;color:var(--white);display:grid;gap:2px}
.vcard .cap b{font-family:var(--display);font-size:20px}
.vcard .cap span{font-size:13px;opacity:.8}
.vcard .dur{position:absolute;top:18px;right:18px;z-index:2;font-family:var(--mono);font-size:12px;background:rgba(25,23,22,.75);color:var(--white);padding:6px 10px;border-radius:999px}
@media (max-width:900px){.testi{grid-template-columns:1fr}}

/* Compare (light) */
.cmp-wrap{overflow-x:auto;border-radius:24px;border:1px solid var(--line-l);background:var(--white)}
.cmp{width:100%;border-collapse:collapse;min-width:820px;font-size:15px}
.cmp th,.cmp td{padding:18px 22px;text-align:left;border-bottom:1px solid var(--line-l);vertical-align:middle}
.cmp thead th{font-family:var(--display);font-size:18px;font-weight:600;color:var(--muted-l)}
.cmp tbody th{font-weight:700;color:var(--ink);width:20%}
.cmp td{color:var(--muted-l)}
.cmp .us{background:var(--purple);color:var(--white);font-weight:700;border-bottom-color:rgba(255,255,255,.18)}
.cmp thead .us{color:var(--white);font-size:20px}
.cmp thead .us .inner{display:flex;align-items:center;gap:12px}
.cmp thead .us .anchor{width:44px}
.cmp tr:last-child td,.cmp tr:last-child th{border-bottom:0}

/* Process (dark) */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-top:70px}
.rail-line{position:absolute;top:22px;left:0;right:0;height:4px;border-radius:4px;background:rgba(255,255,255,.12)}
.rail-line .fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--purple);border-radius:4px}
.ball{position:absolute;top:2px;left:0;width:44px;height:44px;margin-left:-22px;border-radius:50%;background:var(--purple);box-shadow:0 10px 24px -6px rgba(120,86,255,.7)}
.ball::after{content:"";position:absolute;left:50%;top:50%;width:66px;height:14px;margin:-7px 0 0 -33px;border-radius:7px;background:var(--paper);z-index:-1;transform:rotate(var(--r,0deg))}
.step{display:grid;gap:12px;align-content:start;padding:16px 16px 22px;border-radius:var(--r);background:var(--ink-3);border:1px solid var(--line-d);transition:background .4s,transform .4s}
.step .n{font-family:var(--mono);font-size:12px;color:var(--muted-d);padding-inline:6px}
.step h3{font-size:26px;font-weight:700;padding-inline:6px}
.step p{font-size:15px;color:var(--muted-d);padding-inline:6px}
.step.on{background:var(--purple);transform:translateY(-6px)}
.step.on p{color:#EAE5FF}.step.on .n{color:var(--lime)}
.screen{height:150px;border-radius:14px;background:var(--paper);color:var(--ink);padding:14px;display:grid;gap:8px;align-content:start;overflow:hidden;font-size:12px}
.screen .ttl{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-l)}
.chk{display:flex;align-items:center;gap:8px;font-weight:600}
.chk i{width:14px;height:14px;border-radius:50%;flex:none}
.gantt{display:grid;gap:7px}
.gantt i{display:block;height:12px;border-radius:6px;background:var(--purple)}
.ab{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ab div{border-radius:10px;height:84px;display:grid;place-items:end start;padding:8px;font-weight:700;color:var(--white);font-size:11px}
.ab div:first-child{background:linear-gradient(160deg,#9B82FF,var(--purple-deep))}
.ab div:last-child{background:var(--ink-2);outline:3px solid var(--lime)}
.spark{width:100%;height:96px}
@media (max-width:980px){.steps{grid-template-columns:1fr 1fr;padding-top:0}.rail-line,.ball{display:none}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* Stages (light) */
.tabs{display:inline-flex;flex-wrap:wrap;gap:6px;padding:6px;border-radius:999px;background:var(--ink);margin-bottom:24px}
.tabs button{border:0;background:transparent;color:var(--paper);padding:11px 20px;border-radius:999px;font-weight:700;font-size:14px}
.tabs button[aria-selected="true"]{background:var(--lime);color:var(--ink)}
.panel{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.panel>div{border-radius:24px;padding:30px;display:grid;gap:16px;align-content:start;min-width:0}
.worry{background:var(--white);border:1px solid var(--line-l)}
.worry q{display:block;font-family:var(--display);font-size:20px;line-height:1.3;quotes:none;padding-left:16px;border-left:3px solid var(--purple)}
.fix{background:var(--purple);color:var(--white)}
.fix ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.fix li{display:flex;gap:12px;font-size:16px}
.fix li::before{content:"";flex:none;width:18px;height:18px;margin-top:4px;border-radius:50%;background:var(--lime)}
.panel h4{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;opacity:.75}
@media (max-width:760px){.panel{grid-template-columns:1fr}}

/* Life at Skalebuzz bento */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(190px,17vw,250px);gap:14px}
.tile{position:relative;border-radius:22px;overflow:hidden;background:var(--ink-3);min-width:0}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s}
.tile:hover img{transform:scale(1.06)}
.tile .cap{position:absolute;left:12px;bottom:12px;right:12px;z-index:2;font-size:13px;font-weight:700;color:var(--white);display:flex}
.tile .cap span{background:rgba(25,23,22,.78);padding:7px 12px;border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.t-big{grid-column:span 2;grid-row:span 2;border:0;padding:0;text-align:left}
.t-big::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(25,23,22,.1),rgba(25,23,22,.7))}
.t-big .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:92px;height:92px}
.t-big .cap{font-size:clamp(18px,2vw,26px);font-family:var(--display);bottom:22px;left:22px}
.t-big .cap span{background:none;padding:0;backdrop-filter:none}
.t-wide{grid-column:span 2}
.slot{display:grid;place-items:center;text-align:center;border:1.5px dashed rgba(255,255,255,.26);background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 14px,transparent 14px 28px)}
.slot div{display:grid;gap:6px;justify-items:center;padding:16px;color:var(--muted-d);font-size:13.5px}
.slot b{color:var(--paper);font-size:16px}
.slot svg{width:34px;height:34px}
.stat{background:var(--lime);color:var(--ink);padding:22px;display:grid;align-content:space-between}
.stat b{font-family:var(--display);font-size:clamp(46px,5vw,72px);line-height:.9;font-weight:800}
.stat p{font-weight:600;font-size:15px}
.tools{background:var(--purple);color:var(--white);padding:22px;display:grid;gap:10px;align-content:start}
.tools h4{font-size:18px;font-weight:600}
.tools ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:14px}
.tools li b{display:inline-block;min-width:96px;font-family:var(--mono);font-size:12px;color:var(--lime);font-weight:500}
@media (max-width:900px){.bento{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.bento{grid-template-columns:1fr}.t-big,.t-wide{grid-column:span 1}.t-big{grid-row:span 2}}

/* Founder */
.founder{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,72px);align-items:center}
.portrait{width:clamp(200px,24vw,320px);aspect-ratio:4/5;border-radius:170px 170px 26px 26px;background:linear-gradient(170deg,var(--purple),var(--purple-deep));position:relative;overflow:hidden}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;mix-blend-mode:normal}
.portrait .nm{position:absolute;left:14px;bottom:14px;background:var(--white);color:var(--ink);border-radius:12px;padding:8px 12px;font-size:13px;font-weight:700;box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}
.portrait .nm span{display:block;font-weight:500;color:var(--muted-l);font-size:12px}
.founder blockquote{margin:0;display:grid;gap:22px}
.founder blockquote p{font-family:var(--display);font-size:clamp(24px,3vw,40px);font-weight:500;line-height:1.2;letter-spacing:-.015em}
.founder cite{font-style:normal;font-size:15px;color:var(--muted-l)}
.founder cite b{color:var(--ink)}
@media (max-width:680px){.founder{grid-template-columns:1fr}}

/* Team */
.squad{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
.lead-card{background:var(--white);border:1px solid var(--line-l);border-radius:24px;padding:12px 12px 20px;display:grid;gap:14px;align-content:start}
.ph{position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:linear-gradient(165deg,var(--c1,#8C70FF),var(--c2,var(--purple-deep)))}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%}
.ph .cap{position:absolute;left:50%;top:50%;width:150%;height:24%;border-radius:999px;background:rgba(25,23,22,.85);transform:translate(-50%,-50%) rotate(-30deg);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.lead-card:hover .ph .cap,.member:hover .ph .cap{transform:translate(-50%,-50%) rotate(150deg)}
.ph .ini{position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:clamp(22px,2.4vw,36px)}
.ph .pend{position:absolute;left:10px;bottom:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;background:rgba(255,255,255,.88);color:var(--ink);padding:5px 9px;border-radius:999px}
.lead-card .tx{display:grid;gap:4px;padding-inline:8px}
.lead-card h3{font-size:22px;font-weight:700}
.lead-card .role{font-size:13.5px;font-weight:700;color:var(--purple-deep)}
.lead-card p{font-size:14px;color:var(--muted-l)}
.lead-card .ask{font-size:13px;margin-top:6px;padding:9px 12px;border-radius:12px;background:var(--paper);color:var(--ink)}
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.member{background:var(--white);border:1px solid var(--line-l);border-radius:20px;padding:10px 10px 16px;display:grid;gap:10px;align-content:start}
.member .ph{aspect-ratio:1}
.member .ph .ini{font-size:22px}
.member h3{font-size:17px;font-weight:700;padding-inline:6px}
.member .role{font-size:12.5px;font-weight:700;color:var(--purple-deep);padding-inline:6px}
@media (max-width:980px){.squad{grid-template-columns:repeat(2,1fr)}}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,4vw,64px);align-items:start}
.faq-grid>div{min-width:0}
.faq-side{display:grid;gap:18px;position:sticky;top:110px}
.faq{display:grid;gap:10px}
.faq details{background:var(--white);border:1px solid var(--line-l);border-radius:18px;padding:0 24px}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;font-family:var(--display);font-size:20px;font-weight:600;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:34px;height:34px;border-radius:50%;background:var(--purple-soft);color:var(--purple-deep);display:grid;place-items:center;font-size:20px;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--purple);color:var(--white)}
.faq details p{padding-bottom:22px;color:var(--muted-l);max-width:68ch}
.ask-card{background:var(--ink);color:var(--paper);border-radius:22px;padding:22px;display:grid;gap:12px}
.ask-card .who .avs>*{--av-b:var(--ink)}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr}.faq-side{position:relative;top:auto}}

/* CTA */
.cta-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,5vw,72px);align-items:start}
.cta-grid>div{min-width:0}
.cta-copy{display:grid;gap:22px;position:sticky;top:110px}
.cta-copy .anchor{width:clamp(110px,14vw,180px)}
.meet{display:flex;gap:14px;align-items:center;padding:14px;border-radius:18px;background:var(--ink-3);max-width:460px}
.meet .avs>*{width:48px;height:48px;--av-b:var(--ink-3)}
.meet p{font-size:14px;color:var(--muted-d)}
.meet b{color:var(--paper)}
.form{background:var(--paper);color:var(--ink);border-radius:28px;padding:clamp(22px,3vw,36px);display:grid;gap:16px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:grid;gap:6px;min-width:0}
.field label,.fs legend{font-size:13px;font-weight:700}
.field input,.field select{width:100%;font:inherit;font-size:15px;padding:13px 14px;border-radius:12px;border:1px solid var(--line-l);background:var(--white);color:var(--ink)}
.fs{border:0;padding:0;margin:0;display:grid;gap:8px}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choices label{position:relative}
.choices input{position:absolute;opacity:0}
.choices span{display:inline-block;padding:9px 14px;border-radius:999px;border:1px solid var(--line-l);background:var(--white);font-size:14px;font-weight:600;cursor:pointer;transition:background .2s,color .2s}
.choices input:checked+span{background:var(--purple);color:var(--white);border-color:var(--purple)}
.choices input:focus-visible+span{outline:2px solid var(--purple);outline-offset:2px}
.form .btn{justify-content:center;width:100%;padding:17px}
.success{border-radius:14px;padding:16px;background:var(--purple-soft);color:var(--purple-deep);font-weight:700}
.wa{font-size:15px;color:var(--muted-d)}
.wa b{color:var(--paper);font-family:var(--mono);font-size:14px;user-select:all}
@media (max-width:900px){.cta-grid{grid-template-columns:1fr}.cta-copy{position:relative;top:auto}.row2{grid-template-columns:1fr}}

/* Footer */
footer{padding-block:56px 30px;border-top:1px solid var(--line-d)}
.wordmark{font-family:var(--display);font-weight:800;font-size:clamp(64px,18vw,290px);letter-spacing:-.05em;line-height:.9;white-space:nowrap}
.wordmark .box{border-radius:10px;padding:0 .08em .04em}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;margin-top:36px;font-size:14px;color:var(--muted-d)}
.foot nav{display:flex;gap:22px;flex-wrap:wrap}
.foot a{text-decoration:none}.foot a:hover{color:var(--lime)}

/* Reel modal */
.modal{position:fixed;inset:0;z-index:100;background:rgba(10,9,9,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:grid;place-items:center;padding:20px}
.reel{position:relative;width:min(960px,100%);aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:var(--ink)}
.reel .sl{position:absolute;inset:0;opacity:0;transition:opacity .8s}
.reel .sl.on{opacity:1}
.reel .sl img{width:100%;height:100%;object-fit:cover}
.reel .sl.on img{animation:kb 4.2s linear both}
@keyframes kb{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.14) translate(-2%,-1%)}}
.reel .sl::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(25,23,22,.85))}
.reel .sl p{position:absolute;left:28px;bottom:26px;right:28px;z-index:2;font-family:var(--display);font-size:clamp(20px,3vw,34px);font-weight:600;color:var(--white)}
.prog{position:absolute;top:14px;left:14px;right:14px;display:flex;gap:6px;z-index:3}
.prog i{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.prog i b{display:block;height:100%;width:0;background:var(--lime)}
.mclose{position:absolute;top:28px;right:16px;z-index:4;width:44px;height:44px;border-radius:50%;border:0;background:rgba(25,23,22,.75);color:var(--white);font-size:20px}
.mnote{position:absolute;left:16px;top:28px;z-index:4;font-family:var(--mono);font-size:11px;background:var(--lime);color:var(--ink);padding:6px 10px;border-radius:999px}

/* Services mega-menu */
.nav-links{align-items:center}
.svc-btn{border:0;background:none;padding:0;font-weight:600;font-size:14px;color:#D9D4E4;display:inline-flex;align-items:center;gap:6px;transition:color .2s}
.svc-btn:hover,.svc-btn[aria-expanded="true"]{color:var(--lime)}
.svc-btn svg{width:10px;height:6px;transition:transform .3s}
.svc-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.mega{margin:8px auto 0;max-width:calc(var(--max) - 2*var(--gut));width:calc(100% - 2*var(--gut));background:rgba(25,23,22,.97);border:1px solid var(--line-d);border-radius:28px;padding:16px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:var(--paper);max-height:calc(100vh - 100px);overflow:auto;box-shadow:0 40px 80px -30px rgba(0,0,0,.7);animation:megaIn .35s cubic-bezier(.2,.8,.2,1)}
@keyframes megaIn{from{opacity:0;transform:translateY(-10px) scale(.985)}}
.mega-grid{display:grid;grid-template-columns:1fr 2fr 1fr 1fr;gap:10px}
.mcol{border-radius:20px;padding:18px 10px 10px;background:rgba(255,255,255,.04);display:grid;align-content:start;gap:12px;min-width:0}
.c-grow{--acc:var(--purple)} .c-create{--acc:#B9A8FF} .c-ecom{--acc:var(--lime)} .c-web{--acc:var(--paper)}
.mhead{padding-inline:8px;display:grid;gap:8px}
.mtag{justify-self:start;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;border-radius:999px}
.c-grow .mtag{background:var(--purple);color:var(--white)}
.c-create .mtag{background:var(--paper);color:var(--ink)}
.c-ecom .mtag{background:var(--lime);color:var(--ink)}
.c-web .mtag{background:var(--ink-3);color:var(--paper);box-shadow:inset 0 0 0 1px var(--line-d)}
.mhead p{font-size:13px;color:var(--muted-d);line-height:1.4}
.mcol ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mcol a{display:grid;grid-template-columns:22px 1fr;column-gap:10px;padding:9px 8px;border-radius:12px;text-decoration:none;transition:background .2s}
.mcol a:hover,.mcol a:focus-visible{background:rgba(255,255,255,.07)}
.mcol a b{grid-column:2;font-size:14.5px;font-weight:700;color:var(--paper);line-height:1.3}
.mcol a span{grid-column:2;font-size:12.5px;line-height:1.35;color:var(--muted-d)}
.ic{grid-column:1;grid-row:1 / span 2;width:22px;height:22px;position:relative;margin-top:-1px}
.ic::before{content:"";position:absolute;left:0;right:0;top:8px;height:6px;border-radius:3px;background:rgba(255,255,255,.26);transform:rotate(-30deg);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.ic::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--acc)}
.mcol a:hover .ic::before,.mcol a:focus-visible .ic::before{transform:rotate(150deg)}
.sub2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sub2>div{min-width:0}
.mlabel{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-d);padding:0 8px 8px;margin-bottom:4px;border-bottom:1px solid var(--line-d)}
.mega-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:10px;padding:12px 12px 12px 12px;border-radius:20px;background:var(--purple);color:var(--white)}
.fbm{display:flex;align-items:center;gap:14px;min-width:0;flex:1 1 420px}
.fbm img{width:58px;height:58px;border-radius:14px;object-fit:cover;flex:none}
.fbm div{display:grid;gap:2px;min-width:0}
.fbm b{font-family:var(--display);font-size:19px}
.fbm span{font-size:13.5px;opacity:.88}
@media (max-width:1240px){.mega-grid{grid-template-columns:repeat(3,1fr)}.mega-grid>.c-create{grid-column:1/-1;order:3}}
@media (max-width:900px){.mega{display:none!important}}
/* Mobile services accordion */
.mnav{max-height:calc(100vh - 90px);overflow:auto}
.macc>summary{list-style:none;cursor:pointer;font-family:var(--display);font-size:22px;font-weight:600;padding:12px 14px;border-radius:14px;display:flex;justify-content:space-between;align-items:center}
.macc summary::-webkit-details-marker{display:none}
.macc>summary::after{content:"+";width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;font-size:20px;transition:transform .3s}
.macc[open]>summary::after{transform:rotate(45deg);background:var(--lime);color:var(--ink)}
.macc-in{display:grid;gap:6px;padding:2px 4px 10px}
.macc2{border-radius:14px;background:rgba(255,255,255,.05)}
.macc2>summary{list-style:none;cursor:pointer;padding:13px 14px;font-weight:700;font-size:15px;display:flex;align-items:center;gap:10px}
.macc2>summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--muted-d);border-bottom:2px solid var(--muted-d);transform:rotate(45deg);transition:transform .3s}
.macc2[open]>summary::after{transform:rotate(225deg)}
.macc2 .dotc{width:10px;height:10px;border-radius:50%;background:var(--acc);flex:none}
.macc2 ul{list-style:none;margin:0;padding:0 6px 10px;display:grid}
.mnav .macc2 a{display:block;font-family:var(--body);font-size:15px;font-weight:500;padding:9px 12px;color:#D9D4E4;border-radius:10px}
.macc2 .ml{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-d);padding:10px 12px 2px}

/* ===== Mobile (desktop above 900px is untouched) ===== */
.menu-btn{display:none}
.mnav{display:none}
@media (max-width:900px){
  .menu-btn{display:grid;place-content:center;gap:5px;flex:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-d);background:transparent;padding:0}
  .menu-btn span{display:block;width:16px;height:2px;border-radius:2px;background:var(--paper);transition:transform .3s}
  .menu-btn[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .mnav:not([hidden]){display:grid;gap:2px;margin:8px auto 0;width:calc(100% - 2*var(--gut));padding:10px;border-radius:22px;background:rgba(25,23,22,.96);border:1px solid var(--line-d);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .mnav a{text-decoration:none;font-family:var(--display);font-size:22px;font-weight:600;color:var(--paper);padding:12px 14px;border-radius:14px}
  .mnav a:active{background:rgba(255,255,255,.06)}
  .mnav .mcta{margin-top:6px;background:var(--lime);color:var(--ink);text-align:center;font-size:17px}
}
@media (max-width:760px){
  :root{--gut:16px}
  .nav-in{margin-top:8px;padding:8px 8px 8px 16px;gap:10px}
  .logo{font-size:20px}
  .nav .btn{padding:10px 14px;font-size:13px}
  .nav .btn .dot{display:none}

  .hero{padding-top:92px;padding-bottom:24px}
  .glow{width:420px;height:420px;right:-160px;top:280px}
  .hero-copy{gap:20px}
  .trust{font-size:13px;line-height:1.4}
  .trust .avs>*{width:34px;height:34px}
  .hero h1{font-size:clamp(40px,11.6vw,58px)}
  .hero .ctas .btn{flex:1 1 auto;justify-content:center}
  .proof{gap:4px 22px}
  .proof b{font-size:26px}
  .hero-vis{width:92%;margin-top:4px}
  .chip{font-size:11px;padding:6px 10px}
  .tour{left:50%;bottom:0;transform:translateX(-50%);white-space:nowrap;padding:6px 16px 6px 6px}
  .tour:hover{transform:translateX(-50%)}
  .tour .thumb{width:42px;height:42px}
  .marquee{margin-top:28px;padding-block:14px}
  .track,.track span{gap:34px}
  .track span{font-size:20px}

  .chap{padding-block:64px}
  .head{margin-bottom:28px;gap:14px}
  .head>div{flex-basis:100%;gap:14px}
  .head .anchor{order:-1;width:58px}
  .h2{font-size:clamp(30px,8.6vw,42px)}
  .lead{font-size:16px}

  .why{gap:28px;margin-bottom:32px}
  .why-copy{gap:18px}
  .why-copy .turn{font-size:20px}
  .why .ctas .btn{flex:1 1 auto;justify-content:center}
  .vtrig .play{width:60px;height:60px}
  .vtrig .views{font-size:11.5px;padding:7px 10px;top:4%;left:0}
  .vtrig .views .avs>*{width:26px;height:26px}
  .vtrig .badge{font-size:11px;bottom:4%;right:0}
  .pains{gap:12px}
  .pain{padding:20px;gap:12px}
  .pain h3{font-size:19px}

  .stack{gap:16px}
  .scard{border-radius:24px;padding:18px;gap:18px}
  .scard .meta{gap:14px}
  .scard h3{font-size:30px}
  .scard p{font-size:15.5px}
  .pills span{font-size:12px;padding:7px 11px}
  .who{font-size:13px;line-height:1.4}
  .media{min-height:250px;border-radius:16px}
  .float{padding:10px;border-radius:12px}
  .bars{height:48px;gap:5px} .bars i{width:12px}
  .frames{width:72px;height:90px}
  .net{width:90px;height:90px} .net .orb b{width:22px;height:22px;font-size:8px} .net .orb b:nth-child(1),.net .orb b:nth-child(3){left:34px!important} .net .orb b:nth-child(2),.net .orb b:nth-child(4){top:34px!important}
  .s-build .float{width:160px!important}
  .bundle{padding:22px;border-radius:24px}
  .bundle .btn{flex:1 1 100%;justify-content:center}

  .filters{display:flex;flex-wrap:nowrap;overflow-x:auto;max-width:100%;border-radius:16px;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .filters button{white-space:nowrap;padding:9px 14px;font-size:13px}
  .rail{margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);scroll-padding-inline:var(--gut);gap:12px}
  .wk{width:78vw;height:450px;border-radius:20px}
  .wk .metric{font-size:24px}
  .wk.feat{width:86vw;height:auto}
  .wk.feat .txt{padding:22px;gap:12px}
  .wk.feat .pic{height:260px;flex:none}
  .wk.feat .metric{font-size:22px}
  .note{font-size:12px}

  .testi{gap:14px}
  .qcard{padding:22px;gap:14px}
  .qcard blockquote{font-size:18px}
  .vcard{min-height:380px;order:-1}

  .cmp-wrap{overflow:visible;border:0;border-radius:0;background:none}
  .cmp,.cmp thead,.cmp tbody{display:block;min-width:0;width:100%}
  .cmp thead tr{display:flex}
  .cmp thead th:not(.us){display:none}
  .cmp thead .us{flex:1;border-radius:20px 20px 0 0;padding:16px 18px;font-size:19px}
  .cmp tbody{display:grid;gap:10px;background:var(--purple);padding:0 10px 10px;border-radius:0 0 20px 20px}
  .cmp tbody tr{display:grid;grid-template-columns:repeat(3,1fr);background:var(--white);border-radius:16px;overflow:hidden}
  .cmp tbody th{grid-column:1/-1;width:auto;padding:14px 16px 6px;border:0;font-size:15px}
  .cmp tbody td{padding:8px 10px 14px 16px;border:0;font-size:13px;line-height:1.35}
  .cmp tbody td.us{grid-column:1/-1;order:-1;margin:0 10px 8px;border-radius:12px;padding:10px 14px;font-size:15px}
  .cmp tbody th{order:-2}
  .cmp tbody td::before{content:attr(data-label);display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-l);margin-bottom:3px;font-weight:500}
  .cmp tbody td.us::before{color:var(--lime)}

  .steps{gap:12px}
  .step h3{font-size:22px}
  .step p{font-size:14.5px}
  .screen{height:128px}

  .tabs{display:grid;grid-template-columns:repeat(3,1fr);width:100%;border-radius:16px;gap:4px;padding:4px}
  .tabs button{padding:11px 6px;font-size:13px;border-radius:12px}
  .panel>div{padding:22px;border-radius:20px}
  .worry q{font-size:17px}
  .fix li{font-size:15px}

  .bento{grid-auto-rows:190px;gap:10px}
  .t-big .play{width:72px;height:72px}
  .tile .cap{font-size:12px}
  .stat{padding:18px}
  .tools{padding:18px}
  .tools ul{font-size:13px}

  .founder{justify-items:center;gap:28px}
  .portrait{width:min(260px,72vw)}
  .founder blockquote p{font-size:23px}

  .squad{grid-template-columns:1fr;gap:12px;margin-bottom:12px}
  .lead-card{grid-template-columns:118px 1fr;align-items:center;padding:10px;gap:14px}
  .lead-card .tx{padding-inline:0}
  .lead-card h3{font-size:19px}
  .lead-card p{font-size:13px}
  .lead-card .ask{font-size:12px;padding:7px 10px;margin-top:4px}
  .ph .ini{font-size:20px}
  .ph .pend{font-size:8.5px;left:6px;bottom:6px;padding:4px 7px}
  .team{grid-template-columns:repeat(2,1fr);gap:10px}
  .member h3{font-size:15px;padding-inline:4px}
  .member .role{font-size:11.5px;padding-inline:4px}

  .faq-side{gap:14px}
  .faq details{padding:0 16px;border-radius:16px}
  .faq summary{font-size:17px;padding:18px 0}
  .faq summary::after{width:30px;height:30px}

  .cta-copy{gap:18px}
  .cta-copy .anchor{width:84px}
  .meet{padding:12px}
  .meet .avs>*{width:40px;height:40px}
  .form{padding:20px;border-radius:22px;gap:14px}
  .choices span{font-size:13px;padding:8px 12px}

  footer{padding-block:40px 24px}
  .foot{font-size:13px;margin-top:24px}

  .modal{padding:12px}
  .reel{aspect-ratio:3/4;border-radius:18px}
  .reel .sl p{font-size:20px;left:18px;right:18px;bottom:18px}
  .mnote{top:30px;left:12px;font-size:10px}
  .mclose{top:26px;right:10px}
}
@media (max-width:420px){
  .bl{display:none}
  .lead-card{grid-template-columns:100px 1fr}
  .tabs button{font-size:12px}
}

/* Reveal: visible at rest, gently settles in */
.rv{transition:transform 1s cubic-bezier(.2,.8,.2,1),opacity 1s}
.js .rv:not(.in){transform:translateY(28px);opacity:.25}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv:not(.in){transform:none;opacity:1}
}

.mf-r{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.mall-d{font-weight:700;font-size:14px;color:var(--white);text-decoration:underline;text-underline-offset:4px}
.mnav .mall{display:block;font-family:var(--body);font-size:15px;font-weight:700;color:var(--lime);padding:10px 14px}

.mf-r{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.mall-d{font-weight:700;font-size:14px;color:var(--white);text-decoration:underline;text-underline-offset:4px}
.mnav .mall{display:block;font-family:var(--body);font-size:15px;font-weight:700;color:var(--lime);padding:10px 14px}

/* ================= Service page template ================= */
.cat-grow{--acc:var(--purple)} .cat-create{--acc:#9B82FF} .cat-ecom{--acc:var(--lime)} .cat-web{--acc:var(--paper)}
.svc-hero{padding-top:112px;padding-bottom:36px;overflow:hidden}
.svc-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 72% 45%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 72% 45%,#000 30%,transparent 75%)}
.svc-hero .glow{position:absolute;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,rgba(120,86,255,.36),transparent 65%);right:-120px;top:40px;pointer-events:none}
.svh{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(24px,4vw,64px);align-items:center;position:relative}
.svh-copy{display:grid;gap:22px;min-width:0}
.crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--muted-d)}
.crumb a{text-decoration:none}.crumb a:hover{color:var(--lime)}
.crumb i{font-style:normal;opacity:.5}
.svh h1{font-size:clamp(42px,5.4vw,84px);font-weight:800;letter-spacing:-.035em}
.svh h1 .box,.hub-hero h1 .box{display:inline;border-radius:6px;padding:0 .12em .02em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.svh h1{animation:svrise .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes svrise{from{transform:translateY(26px);opacity:0}}
.svh .ctas{display:flex;flex-wrap:wrap;gap:12px}
.svh .who{color:#D9D4E4}
.svh .who .avs>*{--av-b:var(--ink)}
.svh-vis{position:relative;min-height:540px;min-width:0}
.svh-photo{position:absolute;top:0;right:0;bottom:56px;left:14%;border-radius:30px;overflow:hidden;background:var(--ink-3)}
.svh-photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.svh-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(25,23,22,0) 40%,rgba(25,23,22,.55))}
.svh-vis>.anchor{position:absolute;right:-14px;top:-24px;width:112px;z-index:4}
.tagstrip{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:40px;padding-top:22px;border-top:1px solid var(--line-d)}
.tagstrip .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-d);margin-right:6px}
.tagstrip span:not(.lbl){font-family:var(--mono);font-size:12.5px;padding:8px 14px;border-radius:999px;border:1px solid var(--line-d);color:#D9D4E4}

/* Floating UI panels (one per service type) */
.uiw{position:absolute;left:0;bottom:0;z-index:3;max-width:86%}
.ui{position:relative;width:340px;max-width:100%;background:var(--paper);color:var(--ink);border-radius:22px;padding:16px;box-shadow:0 30px 60px -24px rgba(0,0,0,.75);display:grid;gap:12px;animation:bob 6s ease-in-out infinite}
.ui-h{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-l)}
.live{width:9px;height:9px;border-radius:50%;background:#3BD58A;box-shadow:0 0 0 0 rgba(59,213,138,.6);animation:livep 1.6s infinite}
@keyframes livep{70%,100%{box-shadow:0 0 0 8px rgba(59,213,138,0)}}
.kk{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kk div{background:var(--white);border-radius:12px;padding:8px 10px;display:grid}
.kk small{font-size:11px;color:var(--muted-l)}
.kk b{font-family:var(--display);font-size:18px}
.up{color:#14A866}.dn{color:#14A866}
.ui .bars{display:flex;align-items:flex-end;gap:8px;height:84px;padding:0 4px}
.ui .bars i{flex:1;border-radius:6px 6px 3px 3px;background:var(--purple-soft);transform-origin:bottom;animation:grow 3.2s cubic-bezier(.2,.8,.2,1) infinite}
.ui .bars i:nth-child(2){animation-delay:.1s}.ui .bars i:nth-child(3){animation-delay:.2s}.ui .bars i:nth-child(4){animation-delay:.3s}
.ui .bars i:last-child{background:var(--purple);animation-delay:.4s}
.rows{display:grid;gap:6px}
.rows div{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:12.5px;font-weight:600;background:var(--white);border-radius:10px;padding:8px 10px}
.st{font-style:normal;font-size:10.5px;font-family:var(--mono);padding:3px 8px;border-radius:999px;white-space:nowrap}
.st.s1{background:#DDF8EA;color:#0E7A4A;animation:stc 6s infinite}
.st.s2{background:var(--purple-soft);color:var(--purple-deep)}
.st.s3{background:#EEE;color:#777}
@keyframes stc{0%,45%{background:var(--purple-soft);color:var(--purple-deep)}50%,100%{background:#DDF8EA;color:#0E7A4A}}
/* seo */
.sbox{display:flex;align-items:center;gap:8px;background:var(--white);border:1px solid var(--line-l);border-radius:999px;padding:10px 14px;font-family:var(--mono);font-size:12.5px}
.sbox::before{content:"";width:12px;height:12px;border:2px solid var(--muted-l);border-radius:50%;flex:none}
.q{display:inline-block;overflow:hidden;white-space:nowrap;width:0;animation:type 7s steps(var(--n)) infinite}
@keyframes type{0%{width:0}35%,100%{width:calc(var(--n) * 1ch)}}
.caret{width:2px;height:14px;background:var(--purple);animation:blink 1s infinite}
.serp{position:relative;height:184px;margin:0;padding:0;list-style:none}
.serp li{position:absolute;left:0;right:0;height:42px;border-radius:12px;background:var(--white);display:flex;align-items:center;gap:10px;padding:0 12px;font-size:12.5px}
.serp li i{flex:1;height:6px;border-radius:3px;background:#E4E1EC}
.serp li b{font-weight:700;white-space:nowrap}
.serp .c{animation:down 7s cubic-bezier(.6,0,.2,1) infinite}
.serp .c:nth-child(1){top:0}.serp .c:nth-child(2){top:46px}.serp .c:nth-child(3){top:92px}
.serp .you{top:138px;background:var(--purple);color:var(--white);animation:climb 7s cubic-bezier(.6,0,.2,1) infinite;z-index:2}
.serp .you i{background:rgba(255,255,255,.35)}
.serp .you em{font-style:normal;font-family:var(--mono);font-size:11px;background:var(--lime);color:var(--ink);padding:2px 7px;border-radius:999px}
@keyframes climb{0%,40%{transform:none}70%,100%{transform:translateY(-138px)}}
@keyframes down{0%,40%{transform:none}70%,100%{transform:translateY(46px)}}
/* phone */
.ui-phone{width:220px;height:410px;border-radius:34px;padding:10px;background:var(--ink);border:2px solid #3A3533;overflow:hidden;gap:0}
.ui-phone .scr{position:relative;border-radius:26px;overflow:hidden;height:100%;background:#24211F}
.ui-phone .notch{position:absolute;left:50%;top:8px;width:70px;height:18px;margin-left:-35px;border-radius:10px;background:var(--ink);z-index:3}
.feed{display:grid;gap:8px;padding:34px 8px 8px;animation:feed 9s cubic-bezier(.6,0,.2,1) infinite}
@keyframes feed{0%,22%{transform:none}33%,55%{transform:translateY(-196px)}66%,88%{transform:translateY(-392px)}100%{transform:none}}
.post{height:188px;border-radius:16px;position:relative;overflow:hidden;background:linear-gradient(160deg,#9B82FF,var(--purple-deep));flex:none}
.post img{width:100%;height:100%;object-fit:cover}
.post.b{background:linear-gradient(160deg,#E9FF9A,#B9E61C)}
.post.c{background:linear-gradient(160deg,#4A4442,var(--ink))}
.post .cap2{position:absolute;left:10px;right:10px;bottom:10px;display:grid;gap:5px}
.post .cap2 i{height:6px;border-radius:3px;background:rgba(255,255,255,.7)}
.post .cap2 i:last-child{width:60%}
.post .big{position:absolute;left:12px;top:14px;font-family:var(--display);font-weight:800;font-size:26px;color:var(--white);line-height:1}
.post.b .big{color:var(--ink)}
.heart{position:absolute;right:18px;bottom:96px;width:40px;height:40px;border-radius:50%;background:var(--white);display:grid;place-items:center;z-index:3;animation:pop 3s infinite}
.heart svg{width:20px;height:20px}
@keyframes pop{0%,70%,100%{transform:scale(1)}80%{transform:scale(1.35)}}
.fstat{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;background:rgba(243,242,248,.95);color:var(--ink);border-radius:14px;padding:8px 12px;display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700}
.fstat b{font-family:var(--display);font-size:17px;font-variant-numeric:tabular-nums}
.shopcard{position:absolute;left:10px;right:10px;bottom:10px;z-index:3;background:var(--white);color:var(--ink);border-radius:16px;padding:10px;display:grid;grid-template-columns:52px 1fr;gap:4px 10px;align-items:center}
.shopcard img{width:52px;height:52px;border-radius:10px;object-fit:cover;grid-row:span 2}
.shopcard b{font-size:12.5px}
.shopcard small{font-size:11px;color:var(--muted-l)}
.shopcard .add{grid-column:1/-1;margin-top:6px;text-align:center;font-weight:800;font-size:12.5px;padding:9px;border-radius:999px;background:#FE2C55;color:var(--white);animation:pulse2 1.8s infinite}
@keyframes pulse2{50%{transform:scale(1.04)}}
.sold{position:absolute;left:12px;top:40px;z-index:3;font-family:var(--mono);font-size:11px;background:var(--lime);color:var(--ink);padding:5px 9px;border-radius:999px}
/* influencer */
.ui .net{width:220px;height:220px;margin:4px auto}
.ui .net .hub{width:64px;height:64px;margin:-32px;font-size:22px}
.ui .net .rg{width:64px;height:64px;margin:-32px}
.ui .net .orb b{width:44px;height:44px;border:3px solid var(--paper);overflow:hidden;background:var(--purple-soft);font-size:11px}
.ui .net .orb b img{width:100%;height:100%;object-fit:cover}
/* creative */
.ui .frames{width:150px;height:186px;margin:6px auto 4px}
.ui .frames div{font-size:17px;padding:12px;border-radius:14px}
.winner{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:700;background:var(--white);border-radius:12px;padding:9px 12px}
.winner em{font-style:normal;font-family:var(--mono);font-size:10.5px;background:var(--lime);padding:3px 8px;border-radius:999px}
/* video */
.prev{height:120px;border-radius:14px;background:linear-gradient(130deg,var(--purple-deep),#9B82FF 60%,#E9FF9A);position:relative;overflow:hidden;display:grid;place-items:center}
.prev::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 40%,rgba(255,255,255,.35),transparent 50%);animation:sweep 4s linear infinite}
@keyframes sweep{from{transform:translateX(-60%)}to{transform:translateX(60%)}}
.prev .pl{width:40px;height:40px;border-radius:50%;background:rgba(25,23,22,.75);display:grid;place-items:center;z-index:1}
.tl{position:relative;display:grid;gap:5px;padding-top:4px}
.trk{display:flex;gap:4px;height:16px}
.trk i{border-radius:5px;background:var(--purple)}
.trk.t2 i{background:var(--ink-2)}
.wave{display:flex;align-items:center;gap:2px;height:22px}
.wave i{flex:1;background:#14A866;border-radius:2px;animation:wv 1.2s ease-in-out infinite}
@keyframes wv{0%,100%{height:20%}50%{height:100%}}
.ph-line{position:absolute;top:0;bottom:0;width:2px;background:#FE2C55;left:0;animation:play 5s linear infinite}
.ph-line::before{content:"";position:absolute;top:-4px;left:-4px;width:10px;height:10px;border-radius:50%;background:#FE2C55}
@keyframes play{to{left:100%}}
/* ai */
.aig{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.aig i{aspect-ratio:1;border-radius:10px;background:linear-gradient(110deg,#E4E1EC 30%,#F7F6FB 50%,#E4E1EC 70%);background-size:300% 100%;animation:shim 1.4s linear infinite,reveal 9s infinite;animation-delay:0s,calc(var(--k) * .35s)}
@keyframes shim{to{background-position:-150% 0}}
@keyframes reveal{0%,12%{filter:none;opacity:.6}20%,90%{opacity:1;background:var(--g)}100%{opacity:.6}}
.aig i:nth-child(3n+1){--g:linear-gradient(160deg,#9B82FF,var(--purple-deep))}
.aig i:nth-child(3n+2){--g:linear-gradient(160deg,#E9FF9A,#B9E61C)}
.aig i:nth-child(3n){--g:linear-gradient(160deg,#4A4442,var(--ink))}
/* linkedin */
.li-h{display:flex;gap:10px;align-items:center}
.li-h .av{width:40px;height:40px;border-radius:50%;background:var(--purple);flex:none}
.li-h div{display:grid;gap:5px;flex:1}
.ln{height:7px;border-radius:4px;background:#DCD8E6}
.li-img{height:110px;border-radius:12px;background:linear-gradient(135deg,var(--ink-2),var(--ink));position:relative;overflow:hidden;padding:14px;color:var(--white);font-family:var(--display);font-weight:700;font-size:18px;line-height:1.1}
.li-img em{font-style:normal;color:var(--lime)}
.react{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted-l);font-weight:600}
.react .dots{display:flex}
.react .dots i{width:16px;height:16px;border-radius:50%;border:2px solid var(--paper);margin-left:-5px}
.react .dots i:first-child{margin-left:0;background:#3B82F6}.react .dots i:nth-child(2){background:#14A866}.react .dots i:nth-child(3){background:#FE2C55}
.react b{color:var(--ink);font-variant-numeric:tabular-nums}
/* amazon */
.amz{display:grid;grid-template-columns:92px 1fr;gap:12px;background:var(--white);border-radius:14px;padding:10px}
.amz img{width:92px;height:92px;object-fit:cover;border-radius:10px}
.amz div{display:grid;gap:6px;align-content:start}
.spons{font-family:var(--mono);font-size:10px;color:var(--muted-l)}
.stars{color:#F5A623;font-size:13px;letter-spacing:1px}
.price{font-family:var(--display);font-weight:700;font-size:18px}
.rank{display:grid;gap:6px;font-size:12px;font-weight:700}
.rank .tr{height:8px;border-radius:4px;background:#E4E1EC;overflow:hidden}
.rank .tr i{display:block;height:100%;width:30%;background:linear-gradient(90deg,var(--purple),#9B82FF);border-radius:4px;animation:fill 4s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes fill{0%{width:18%}60%,100%{width:92%}}
.aplus{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.aplus i{height:46px;border-radius:8px;background:var(--purple-soft);animation:paint 4s ease infinite}
.aplus i:nth-child(2){background:#E9FF9A;animation-delay:.3s}.aplus i:nth-child(3){background:#DCD8E6;animation-delay:.6s}
/* web */
.ui .browser{background:#24211F}
.ui .browser .body{padding:12px;gap:8px}
.ui .browser .body i{height:12px}
.ui .browser .body i.big{height:86px}
.ui .browser .body i.cta{height:24px}
.ui .browser .url{flex:1;margin-left:8px;height:16px;border-radius:8px;background:#3D3842;font-family:var(--mono);font-size:9.5px;color:#ABA5BA;display:flex;align-items:center;padding:0 8px}
/* cro */
.fun{display:grid;gap:8px}
.fun div{display:grid;grid-template-columns:86px 1fr;align-items:center;gap:10px;font-size:12px;font-weight:600}
.fun span{display:block;height:22px;border-radius:7px;background:var(--purple);transform-origin:left;animation:fgrow 5s cubic-bezier(.2,.8,.2,1) infinite}
.fun div:nth-child(2) span{background:#9B82FF}.fun div:nth-child(3) span{background:#C5B8FF}.fun div:nth-child(4) span{background:var(--lime)}
@keyframes fgrow{0%{transform:scaleX(var(--a))}50%,100%{transform:scaleX(var(--b))}}

/* Pains */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pcard{background:var(--white);border:1px solid var(--line-l);border-radius:var(--r);padding:28px;display:grid;gap:14px;align-content:start;transition:transform .35s,box-shadow .35s}
.pcard:hover{transform:translateY(-6px);box-shadow:0 24px 50px -24px rgba(91,59,232,.35)}
.pcard .x{width:44px;height:44px;border-radius:50%;background:#FFE7E7;display:grid;place-items:center}
.pcard .x svg{width:18px;height:18px}
.pcard h3{font-size:23px;font-weight:600;line-height:1.15}
.pcard p{color:var(--muted-l);font-size:15px}
.fixbar{margin-top:16px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;padding:24px 28px;border-radius:var(--r);background:var(--ink);color:var(--paper)}
.fixbar p{font-family:var(--display);font-size:clamp(20px,2.1vw,27px);font-weight:600;flex:1 1 420px;min-width:0;line-height:1.25}
.fixbar em{font-style:normal;color:var(--lime)}

/* Included */
.igrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.icard{border-radius:var(--r);padding:26px;background:var(--ink-3);border:1px solid var(--line-d);display:grid;gap:12px;align-content:start;transition:transform .35s,background .35s}
.icard:hover{transform:translateY(-6px);background:#3F3936}
.icard svg{width:46px;height:46px}
.icard svg .draw{stroke-dasharray:160;stroke-dashoffset:160;transition:stroke-dashoffset 1.3s ease .15s}
.icard.in svg .draw{stroke-dashoffset:0}
.icard h3{font-size:21px;font-weight:600;line-height:1.2}
.icard p{color:var(--muted-d);font-size:14.5px}

/* Measure */
.measure{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,64px);align-items:center}
.measure>div{min-width:0}
.mcopy{display:grid;gap:18px}
.ktiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ktile{background:var(--white);border:1px solid var(--line-l);border-radius:20px;padding:20px;display:grid;gap:10px}
.ktile .top{display:flex;justify-content:space-between;gap:8px;align-items:center}
.ktile b{font-family:var(--display);font-size:20px;font-weight:600;line-height:1.15}
.ktile .dir{font-family:var(--mono);font-size:11px;padding:4px 8px;border-radius:999px;background:var(--purple-soft);color:var(--purple-deep);white-space:nowrap}
.ktile svg{width:100%;height:60px;display:block}
.ktile .ln2{stroke-dasharray:300;stroke-dashoffset:300;transition:stroke-dashoffset 1.6s ease .2s}
.ktile.in .ln2{stroke-dashoffset:0}
.ktile:nth-child(1){background:var(--purple);color:var(--white);border-color:transparent}
.ktile:nth-child(1) .dir{background:rgba(255,255,255,.18);color:var(--white)}

/* Proof */
.proofgrid{display:grid;grid-template-columns:1fr 1fr .9fr;gap:16px}
.proofgrid .wk{width:auto;height:480px}
.proofgrid .qcard{background:var(--ink);color:var(--paper)}
.proofgrid .qcard blockquote{color:#CFCAD9}
.proofgrid .qcard .who .avs>*{--av-b:var(--ink)}

/* Team (service) */
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tall{background:var(--ink);color:var(--paper);border-radius:24px;padding:24px;display:grid;align-content:space-between;gap:20px}
.tall h3{font-size:26px;font-weight:700}
.tall p{color:var(--muted-d);font-size:15px}

/* Related */
.rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.rcard{display:grid;gap:12px;align-content:space-between;padding:22px;border-radius:22px;background:var(--white);border:1px solid var(--line-l);text-decoration:none;color:var(--ink);min-height:210px;transition:transform .35s,box-shadow .35s}
.rcard:hover{transform:translateY(-6px);box-shadow:0 24px 50px -24px rgba(91,59,232,.35)}
.rcard h3{font-size:24px;font-weight:700}
.rcard p{font-size:14.5px;color:var(--muted-l)}
.rcard .go{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:14px}
.rcard .go i{width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--lime);display:grid;place-items:center;font-style:normal;transition:transform .3s}
.rcard:hover .go i{transform:rotate(-45deg)}
.rcard.fbm2{background:var(--purple);color:var(--white);border-color:transparent}
.rcard.fbm2 p{color:#EAE5FF}
.rcard .mtag{justify-self:start}

/* Hub page */
.hubcat{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(24px,4vw,64px);align-items:start;padding-block:clamp(48px,6vw,80px);border-top:1px solid var(--line-l)}
.dark .hubcat{border-color:var(--line-d)}
.hubcat:first-child{border-top:0}
.hubcat>div{min-width:0}
.hubside{display:grid;gap:16px;position:sticky;top:110px}
.hubside h2{font-size:clamp(32px,4vw,56px);font-weight:700}
.hubside p{font-size:17px}
.dark .hubside p{color:#CFCAD9}.light .hubside p{color:var(--muted-l)}
.hgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hsub{grid-column:1/-1;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding-top:8px}
.dark .hsub{color:var(--muted-d)}.light .hsub{color:var(--muted-l)}
.hcard{display:grid;grid-template-columns:30px 1fr auto;gap:2px 14px;align-items:center;padding:20px;border-radius:20px;text-decoration:none;transition:transform .3s,background .3s}
.light .hcard{background:var(--white);border:1px solid var(--line-l);color:var(--ink)}
.dark .hcard{background:var(--ink-3);border:1px solid var(--line-d);color:var(--paper)}
.hcard:hover{transform:translateY(-4px)}
.hcard .ic{grid-row:1/3;--acc:var(--cacc)}
.light .hcard .ic::before{background:rgba(25,23,22,.22)}
.hcard:hover .ic::before{transform:rotate(150deg)}
.hcard b{font-family:var(--display);font-size:20px;font-weight:600}
.hcard span{grid-column:2;font-size:14px;opacity:.75}
.hcard .arr{grid-column:3;grid-row:1/3;width:34px;height:34px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center;font-size:14px;transition:transform .3s}
.hcard:hover .arr{transform:rotate(-45deg)}
.hub-hero{padding-top:130px;padding-bottom:60px;overflow:hidden}
.hub-hero h1{font-size:clamp(46px,7vw,110px);font-weight:800;letter-spacing:-.035em;max-width:14ch}
.hub-hero .lead{margin-top:22px}
.hub-hero .pillrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.hub-hero .pillrow a{text-decoration:none;display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:999px;border:1px solid var(--line-d);font-weight:700;font-size:14px}
.hub-hero .pillrow a:hover{border-color:var(--lime);color:var(--lime)}
.hub-hero .pillrow .mtag{padding:5px 10px}
.hub-hero .anchor{position:absolute;right:var(--gut);top:150px;width:clamp(120px,16vw,220px)}

@media (max-width:1100px){
  .igrid,.pgrid{grid-template-columns:repeat(2,1fr)}
  .tgrid,.rgrid{grid-template-columns:repeat(2,1fr)}
  .proofgrid{grid-template-columns:1fr 1fr}.proofgrid .qcard{grid-column:1/-1}
  .hubcat{grid-template-columns:1fr}.hubside{position:relative;top:auto}
}
@media (max-width:960px){
  .svh{grid-template-columns:1fr}
  .svh-vis{max-width:560px;width:100%;margin:10px auto 0}
  .measure{grid-template-columns:1fr}
}
@media (max-width:760px){
  .svc-hero{padding-top:92px;padding-bottom:24px}
  .svc-hero .glow{width:420px;height:420px;right:-160px;top:420px}
  .svh-copy{gap:18px}
  .svh h1{font-size:clamp(38px,10.8vw,54px)}
  .svh .ctas .btn{flex:1 1 auto;justify-content:center}
  .svh-vis{min-height:430px}
  .svh-photo{left:12%;bottom:50px;border-radius:22px}
  .svh-vis>.anchor{width:76px;right:-4px;top:-18px}
  .ui{width:290px;padding:13px;gap:10px;border-radius:18px}
  .ui-phone{width:190px;height:360px;padding:8px}
  .post{height:166px}
  @keyframes feed{0%,22%{transform:none}33%,55%{transform:translateY(-174px)}66%,88%{transform:translateY(-348px)}100%{transform:none}}
  .ui .net{width:180px;height:180px}
  .ui .frames{width:120px;height:150px}
  .prev{height:96px}
  .ui .bars{height:64px}
  .tagstrip{margin-top:28px;padding-top:18px;gap:6px}
  .tagstrip span:not(.lbl){font-size:11.5px;padding:7px 11px}
  .tagstrip .lbl{width:100%}
  .pgrid,.igrid,.ktiles,.tgrid,.rgrid,.proofgrid,.hgrid{grid-template-columns:1fr}
  .pcard,.icard{padding:22px}
  .pcard h3{font-size:20px}.icard h3{font-size:19px}
  .fixbar{padding:20px}
  .fixbar .btn{flex:1 1 100%;justify-content:center}
  .proofgrid .wk{height:440px}
  .tgrid .lead-card{grid-template-columns:118px 1fr}
  .rcard{min-height:0}
  .hub-hero{padding-top:100px;padding-bottom:40px}
  .hub-hero h1{font-size:clamp(40px,11vw,58px)}
  .hub-hero .anchor{display:none}
  .hcard{padding:16px}
  .hcard b{font-size:18px}
}
.mtag.c-grow{background:var(--purple);color:var(--white)}
.mtag.c-create{background:var(--paper);color:var(--ink)}
.mtag.c-ecom{background:var(--lime);color:var(--ink)}
.mtag.c-web{background:var(--ink-3);color:var(--paper);box-shadow:inset 0 0 0 1px var(--line-d)}
.light .mtag.c-create{background:var(--ink);color:var(--paper)}
.light .mtag.c-web{background:var(--ink-2);color:var(--paper)}

/* ================= Page variety: hero themes + section layout variants ================= */

/* Tone helpers used by every variant */
.light{--tl:var(--line-l);--t2:var(--muted-l);--cardbg:var(--white);--ist:#7856FF}
.dark{--tl:var(--line-d);--t2:var(--muted-d);--cardbg:var(--ink-3);--ist:#9B82FF}

/* Hero colour themes */
.th-ink{--hbg:var(--ink);--hsolid:#191716;--hfg:var(--paper);--hmuted:#CFCAD9;--hline:rgba(255,255,255,.14);--boxbg:var(--purple);--boxfg:var(--white)}
.th-violet{--hbg:linear-gradient(150deg,#4B2DD6 0%,#7856FF 70%,#8E72FF 100%);--hsolid:#5B3BE8;--hfg:#FFFFFF;--hmuted:#ECE7FF;--hline:rgba(255,255,255,.28);--boxbg:var(--lime);--boxfg:var(--ink)}
.th-lime{--hbg:var(--lime);--hsolid:#D6FF3D;--hfg:var(--ink);--hmuted:#3F4A12;--hline:rgba(25,23,22,.18);--boxbg:var(--purple);--boxfg:var(--white)}
.th-paper{--hbg:var(--paper);--hsolid:#F3F2F8;--hfg:var(--ink);--hmuted:var(--muted-l);--hline:rgba(25,23,22,.14);--boxbg:var(--purple);--boxfg:var(--white)}
.svc-hero,.hcardbox{background:var(--hbg);color:var(--hfg)}
.svc-hero .lead,.hcardbox .lead,.svc-hero .crumb,.hcardbox .crumb{color:var(--hmuted)}
.svc-hero .who,.hcardbox .who{color:var(--hfg)}
.svc-hero .who .avs>*,.hcardbox .who .avs>*{--av-b:var(--hsolid)}
.svc-hero h1 .box,.hcardbox h1 .box{background:var(--boxbg);color:var(--boxfg)}
.th-lime .btn-lime{background:var(--ink);color:var(--lime)}
.th-lime .btn-lime .dot{background:var(--lime);color:var(--ink)}
.svc-hero .tagstrip{border-top-color:var(--hline)}
.svc-hero .tagstrip span:not(.lbl){border-color:var(--hline);color:var(--hfg)}
.svc-hero .tagstrip .lbl{color:var(--hmuted)}
.svc-hero.th-lime::before,.svc-hero.th-paper::before{display:none}
.th-lime .glow,.th-paper .glow{display:none}
.svc-hero.th-violet::before{background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px)}
.th-violet .glow{background:radial-gradient(circle,rgba(214,255,61,.28),transparent 65%)!important}
.th-violet .mtag.c-grow,.th-violet .mtag.c-create{background:var(--ink);color:var(--paper)}
.th-paper .mtag.c-create,.th-lime .mtag.c-create{background:var(--ink);color:var(--paper)}
.th-lime .mtag.c-ecom{background:var(--ink);color:var(--lime)}
.th-paper .mtag.c-web,.th-lime .mtag.c-web{background:var(--ink);color:var(--paper)}
.th-lime .svh-photo::after,.th-paper .svh-photo::after{background:none}

/* Hero layout: reversed */
.hl-rev .svh{grid-template-columns:.98fr 1.02fr}
.hl-rev .svh-vis{order:-1}
.hl-rev .svh-photo{left:0;right:14%}
.hl-rev .uiw{left:auto;right:0}
.hl-rev .svh-vis>.anchor{right:auto;left:-14px}

/* Hero layout: centred stage */
.hl-stage .svh{grid-template-columns:1fr;justify-items:center}
.hl-stage .svh-copy{max-width:980px;justify-items:center;text-align:center}
.hl-stage .crumb,.hl-stage .ctas{justify-content:center}
.hl-stage .lead{margin-inline:auto}
.hl-stage .svh-vis{width:100%;max-width:none;min-height:0;height:clamp(360px,36vw,500px);margin:26px 0 70px}
.hl-stage .svh-photo{inset:0;border-radius:32px}
.hl-stage .uiw{left:50%;bottom:-56px;transform:translateX(-50%)}
.hl-stage .svh-vis>.anchor{left:28px;right:auto;top:-34px}
.hl-stage .tagstrip{justify-content:center;margin-top:0}

/* Hero layout: full-bleed photo */
.hl-bleed{min-height:min(780px,100vh)}
.bleed-img{position:absolute;inset:0;z-index:0}
.bleed-img img{width:100%;height:100%;object-fit:cover;object-position:70% 30%}
.bleed-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--hsolid) 30%,transparent 78%),linear-gradient(0deg,var(--hsolid) 0%,transparent 30%)}
.hl-bleed .svh{z-index:1}
.hl-bleed .svh-vis{min-height:520px}
.hl-bleed .uiw{left:auto;right:4%;bottom:30px}
.hl-bleed .svh-vis>.anchor{right:8%;top:10px}
.hl-bleed .tagstrip{position:relative;z-index:1}
.hl-bleed.th-violet .bleed-img::after{background:linear-gradient(90deg,#5B3BE8 32%,rgba(91,59,232,.15) 80%),linear-gradient(0deg,#5B3BE8 0%,transparent 30%)}

/* Hero layout: card */
.hl-card{background:var(--hbg);padding-top:104px}
.hl-card::before{display:none}
.hcardbox{position:relative;display:grid;grid-template-columns:1.05fr .95fr;border-radius:38px;overflow:hidden;min-height:600px}
.hcardbox .svh-copy{padding:clamp(28px,4vw,64px);align-content:center}
.hcardbox h1{font-size:clamp(40px,5vw,78px);font-weight:800;letter-spacing:-.035em;animation:svrise .9s cubic-bezier(.2,.8,.2,1) both}
.hcardbox h1 .box{display:inline;border-radius:6px;padding:0 .12em .02em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hcardbox .ctas{display:flex;flex-wrap:wrap;gap:12px}
.hcardbox .svh-vis{min-height:100%}
.hcardbox .svh-photo{inset:0;border-radius:0}
.hcardbox .uiw{left:24px;bottom:24px}
.hcardbox .svh-vis>.anchor{right:24px;top:24px}

/* ---------- Problems ---------- */
.dark .pcard{background:var(--ink-3);border-color:var(--line-d)}
.dark .pcard p{color:var(--muted-d)}
.dark .pcard .x{background:rgba(255,107,107,.14)}
.dark .fixbar{background:var(--purple)}
.prows{display:grid;border-top:1px solid var(--tl)}
.prow{display:grid;grid-template-columns:64px 1fr 1fr;gap:28px;align-items:center;padding:30px 0;border-bottom:1px solid var(--tl)}
.prow .xx{width:54px;height:54px;border-radius:50%;border:2px solid #FF6B6B;color:#FF6B6B;display:grid;place-items:center;font-size:20px;font-weight:700;transition:background .3s,color .3s}
.prow:hover .xx{background:#FF6B6B;color:var(--white)}
.prow h3{font-size:clamp(24px,2.6vw,38px);font-weight:700;line-height:1.1}
.prow p{font-size:17px;color:var(--t2)}
.chat{display:grid;gap:14px;max-width:880px;margin-inline:auto}
.bub{max-width:min(560px,90%);padding:18px 22px;border-radius:26px 26px 26px 6px;background:var(--cardbg);border:1px solid var(--tl);font-size:16.5px;line-height:1.5;color:var(--t2)}
.bub b{display:block;font-family:var(--display);font-size:clamp(20px,2vw,25px);line-height:1.2;margin-bottom:6px;color:inherit}
.light .bub b{color:var(--ink)} .dark .bub b{color:var(--paper)}
.bub:nth-child(2){justify-self:end;border-radius:26px 26px 6px 26px}
.bub .from{display:flex;gap:8px;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;color:var(--t2)}
.bub .from i{width:22px;height:22px;border-radius:50%;background:var(--paper-2)}
.bub.us{justify-self:end;background:var(--purple);border-color:transparent;color:#EAE5FF;border-radius:26px 26px 6px 26px}
.bub.us b{color:var(--white)!important}
.bub.us .from{color:#EAE5FF}
.bub.us .from i{background:var(--lime)}
.bub.us em{font-style:normal;color:var(--lime);font-weight:700}
.psplit{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,4vw,72px);align-items:start}
.pside{position:sticky;top:110px;display:grid;gap:18px}
.pstack{display:grid;gap:14px}
.psplit .pcard{grid-template-columns:auto 1fr;column-gap:20px;align-items:start}
.psplit .pcard .x{grid-row:span 2}

/* ---------- Included ---------- */
.icard svg{stroke:var(--ist)}
.light .icard{background:var(--white);border-color:var(--line-l)}
.light .icard:hover{background:var(--white);box-shadow:0 24px 50px -24px rgba(91,59,232,.3)}
.light .icard p{color:var(--muted-l)}
.ibento{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ibig{grid-column:span 2;grid-row:span 2;position:relative;border-radius:var(--r);overflow:hidden;min-height:440px;display:grid;align-content:end;gap:10px;padding:28px;color:var(--white)}
.ibig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s}
.ibig:hover img{transform:scale(1.05)}
.ibig::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(25,23,22,.88))}
.ibig>*:not(img){position:relative;z-index:1}
.ibig h3{font-size:clamp(26px,2.6vw,36px);font-weight:700}
.ibig p{color:#E4E0EE;max-width:42ch}
.icard.iwide{grid-column:1/-1;grid-template-columns:auto 1fr 1.4fr;align-items:center;column-gap:24px;background:var(--purple);border-color:transparent;color:var(--white);--ist:#D6FF3D}
.icard.iwide p{color:#EAE5FF}
.ilist{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,4vw,72px);align-items:start}
.ilist>div{min-width:0}
.ivis{position:sticky;top:110px;border-radius:30px;overflow:hidden;aspect-ratio:4/5;max-height:680px}
.ivis img{width:100%;height:100%;object-fit:cover}
.ivchips{position:absolute;left:16px;right:16px;bottom:16px;display:flex;flex-wrap:wrap;gap:8px}
.ivchips span{font-family:var(--mono);font-size:12px;padding:7px 12px;border-radius:999px;background:rgba(25,23,22,.8);color:var(--paper);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.irows{display:grid;border-top:1px solid var(--tl)}
.irow{display:grid;grid-template-columns:48px 1fr;gap:4px 18px;padding:24px 0;border-bottom:1px solid var(--tl)}
.irow .ck{grid-row:span 2;width:44px;height:44px;border-radius:50%;background:var(--lime);display:grid;place-items:center}
.irow h3{font-size:clamp(20px,2vw,26px);font-weight:600}
.irow p{color:var(--t2)}
.irail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px;scrollbar-width:thin}
.irail .icard{flex:none;width:clamp(260px,24vw,330px);min-height:320px;scroll-snap-align:start;align-content:space-between}
.irail .icard:nth-child(3n+1){background:var(--purple);border-color:transparent;color:var(--white);--ist:#D6FF3D}
.irail .icard:nth-child(3n+1) p{color:#EAE5FF}
.irail .icard:nth-child(3n+2){background:var(--lime);border-color:transparent;color:var(--ink);--ist:#5B3BE8}
.irail .icard:nth-child(3n+2) p{color:#3F4A12}

/* ---------- Measure ---------- */
.dark .ktile:not(:first-child){background:var(--ink-3);border-color:var(--line-d)}
.dark .ktile:not(:first-child) .dir{background:rgba(155,130,255,.18);color:#C9BCFF}
.mband{display:grid;grid-template-columns:repeat(4,1fr);border-radius:32px;overflow:hidden;background:var(--purple);color:var(--white)}
.mb{padding:clamp(22px,3vw,40px);display:grid;gap:12px;align-content:start;border-left:1px solid rgba(255,255,255,.2)}
.mb:first-child{border-left:0}
.mb .arr{font-family:var(--display);font-size:clamp(54px,6vw,92px);font-weight:700;line-height:.9;color:var(--lime)}
.mb b{font-family:var(--display);font-size:clamp(20px,1.9vw,26px);font-weight:600;line-height:1.15}
.mb small{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#E1D9FF}
.mband.in .arr{animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{50%{transform:translate(4px,-4px)}}
.mdash{display:grid;grid-template-columns:.75fr 1.25fr;border-radius:30px;background:var(--cardbg);border:1px solid var(--tl);overflow:hidden}
.mdl{padding:28px;display:grid;align-content:start;border-right:1px solid var(--tl)}
.mdl .ttl,.mdh{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t2)}
.mdl .ttl{margin-bottom:8px}
.kr{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--tl);font-family:var(--display);font-size:20px;font-weight:600}
.kr:last-child{border-bottom:0}
.kr em{font-style:normal;font-size:14px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#DDF8EA;color:#0E7A4A}
.mdr{padding:28px;display:grid;gap:16px;align-content:start;min-width:0}
.mdh{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.lg{display:flex;align-items:center;gap:8px}
.lg i{width:18px;height:4px;border-radius:2px;background:var(--purple)}
.lg i.b{background:currentColor;opacity:.4}
.bigchart{width:100%;height:240px;display:block}
.bigchart .ln2{stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 2s ease .2s}
.mdash.in .bigchart .ln2{stroke-dashoffset:0}
.bigchart path[stroke-dasharray="6 8"]{stroke-dasharray:6 8;stroke-dashoffset:0}

/* ---------- Process ---------- */
.light .step{background:var(--white);border-color:var(--line-l)}
.light .step p{color:var(--muted-l)}
.light .step .n{color:var(--purple-deep)}
.light .step.on{background:var(--purple);color:var(--white)}
.light .step.on p{color:#EAE5FF}.light .step.on .n{color:var(--lime)}
.light .rail-line{background:var(--paper-2)}
.light .ball::after{background:var(--ink-2)}
.vtl{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,4vw,72px);align-items:start}
.vside{position:sticky;top:110px;display:grid;gap:18px}
.vsteps{position:relative;display:grid;gap:16px;padding-left:58px}
.vsteps::before{content:"";position:absolute;left:20px;top:10px;bottom:10px;width:4px;border-radius:2px;background:var(--tl)}
.vfill{position:absolute;left:20px;top:10px;width:4px;height:0;border-radius:2px;background:var(--purple)}
.vstep{position:relative;padding:26px;border-radius:var(--r);background:var(--cardbg);border:1px solid var(--tl);display:grid;gap:8px;transition:border-color .4s,transform .4s}
.vstep::before{content:"";position:absolute;left:-48px;top:28px;width:24px;height:24px;border-radius:50%;background:var(--cardbg);border:3px solid var(--tl);transition:background .4s,border-color .4s}
.vstep.on{border-color:var(--purple);transform:translateX(6px)}
.vstep.on::before{background:var(--lime);border-color:var(--purple)}
.vstep .n{font-family:var(--mono);font-size:12px;color:var(--t2)}
.vstep h3{font-size:26px;font-weight:700}
.vstep p{color:var(--t2)}
.pbig{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pb{position:relative;overflow:hidden;border-radius:28px;padding:32px;min-height:270px;display:grid;align-content:end;gap:10px;background:var(--cardbg);border:1px solid var(--tl)}
.pb .num{position:absolute;right:18px;top:-18px;font-family:var(--display);font-weight:800;font-size:clamp(130px,14vw,200px);line-height:1;color:transparent;-webkit-text-stroke:2px var(--purple);opacity:.55;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.pb:hover .num{transform:translateY(14px) rotate(-4deg)}
.pb h3{position:relative;font-size:clamp(26px,2.6vw,34px);font-weight:700}
.pb p{position:relative;color:var(--t2);max-width:42ch}
.pb:nth-child(2),.pb:nth-child(3){background:var(--purple);border-color:transparent;color:var(--white)}
.pb:nth-child(2) p,.pb:nth-child(3) p{color:#EAE5FF}
.pb:nth-child(2) .num,.pb:nth-child(3) .num{-webkit-text-stroke-color:var(--lime)}

/* ---------- Proof ---------- */
.dark .note{color:var(--muted-d)}
.dark .proofgrid .qcard,.dark .pfeat .qcard{background:var(--paper);color:var(--ink)}
.dark .proofgrid .qcard blockquote,.dark .pfeat .qcard blockquote{color:#77707F}
.dark .proofgrid .qcard .who .avs>*,.dark .pfeat .qcard .who .avs>*{--av-b:var(--paper)}
.pfeat{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pfeat .wk{width:auto;height:400px}
.pfeat .wk.big{grid-column:1/-1;flex-direction:row;height:auto;min-height:440px}
.pfeat .wk.big .pic{flex:1.15}
.pfeat .wk.big .txt{flex:1;align-content:center;padding:clamp(24px,4vw,56px);gap:16px}
.pfeat .wk.big .metric{font-size:clamp(30px,3.4vw,48px)}
.pfeat .wk.big .desc{font-size:16px}
.light .pfeat .qcard{background:var(--ink);color:var(--paper)}
.light .pfeat .qcard blockquote{color:#CFCAD9}
.light .pfeat .qcard .who .avs>*{--av-b:var(--ink)}

/* ---------- Team ---------- */
.dark .lead-card{background:var(--ink-3);border-color:var(--line-d)}
.dark .lead-card p{color:var(--muted-d)}
.dark .lead-card .role{color:#C9BCFF}
.dark .tall{background:var(--purple)}
.dark .tall p{color:#EAE5FF}
.tstrip{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,72px);align-items:center}
.tside{display:grid;gap:18px}
.faces{display:flex;flex-wrap:wrap;gap:22px;justify-content:center}
.face{display:grid;justify-items:center;gap:6px;text-align:center;width:170px}
.face .ph{width:150px;aspect-ratio:1;border-radius:50%}
.face:hover .ph .cap{transform:translate(-50%,-50%) rotate(150deg)}
.face b{font-family:var(--display);font-size:19px;margin-top:6px}
.face span{font-size:13px;color:var(--t2)}

/* ---------- FAQ ---------- */
.dark .faq details{background:var(--ink-3);border-color:var(--line-d)}
.dark .faq details p{color:var(--muted-d)}
.dark .faq summary::after{background:rgba(255,255,255,.1);color:var(--paper)}
.dark .faq details[open] summary::after{background:var(--lime);color:var(--ink)}
.dark .ask-card{background:var(--purple)}
.dark .ask-card .avs>*{--av-b:var(--purple)}
.faqc{display:grid;gap:30px}
.fh{display:grid;justify-items:center;gap:14px;text-align:center}
.faq.two{grid-template-columns:1fr 1fr;align-items:start}
.faqmore{text-align:center;color:var(--t2)}
.faqmore a{font-weight:700;color:inherit;text-underline-offset:4px}
.light .faqmore a{color:var(--purple-deep)} .dark .faqmore a{color:var(--lime)}

/* ---------- Related ---------- */
.dark .rcard:not(.fbm2){background:var(--ink-3);border-color:var(--line-d);color:var(--paper)}
.dark .rcard:not(.fbm2) p{color:var(--muted-d)}
.dark .rcard .go i{background:var(--lime);color:var(--ink)}
.rlist{display:grid;border-top:1px solid var(--tl)}
.rrow{display:grid;grid-template-columns:200px 1fr 1fr 56px;gap:24px;align-items:center;padding:26px 12px;border-bottom:1px solid var(--tl);text-decoration:none;color:inherit;border-radius:16px;transition:background .35s,padding .35s,color .35s}
.rrow:hover{background:var(--purple);color:var(--white);padding-inline:28px}
.rrow .mtag{justify-self:start}
.rrow h3{font-size:clamp(24px,2.8vw,40px);font-weight:700;line-height:1.05}
.rrow p{color:var(--t2)}
.rrow:hover p{color:#EAE5FF}
.rrow i{width:52px;height:52px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center;font-style:normal;font-size:18px;transition:transform .35s}
.rrow:hover i{transform:rotate(-45deg)}

/* ---------- CTA ---------- */
.light .form{background:var(--white);border:1px solid var(--line-l)}
.light .meet{background:var(--white);border:1px solid var(--line-l)}
.light .meet p,.light .wa{color:var(--muted-l)}
.light .meet b,.light .wa b{color:var(--ink)}
.light .meet .avs>*{--av-b:var(--white)}
.cta-c{display:grid;gap:22px;justify-items:center;text-align:center}
.cta-c .anchor{width:clamp(90px,10vw,140px)}
.cta-c .h2{max-width:16ch}
.cta-c .lead{margin-inline:auto}
.cta-c .form{width:100%;max-width:940px;text-align:left;margin-top:8px}
.cta-c .meet{text-align:left;max-width:640px}
.sec-cta{padding-bottom:clamp(80px,10vw,140px)}

@media (max-width:1100px){
  .ibento{grid-template-columns:repeat(2,1fr)}
  .ibig{grid-column:1/-1;grid-row:auto;min-height:360px}
  .icard.iwide{grid-template-columns:auto 1fr}
  .icard.iwide p{grid-column:1/-1}
  .rrow{grid-template-columns:1fr 1fr 52px}
  .rrow .mtag{display:none}
  .mband{grid-template-columns:1fr 1fr}
  .mb:nth-child(3){border-left:0}
  .mb:nth-child(n+3){border-top:1px solid rgba(255,255,255,.2)}
}
@media (max-width:960px){
  .hl-rev .svh{grid-template-columns:1fr}
  .hl-rev .svh-vis{order:0}
  .hl-rev .svh-photo{left:14%;right:0}
  .hl-rev .uiw{left:0;right:auto}
  .hcardbox{grid-template-columns:1fr;min-height:0}
  .hcardbox .svh-vis{min-height:420px;max-width:none;margin:0}
  .hl-bleed{min-height:0}
  .bleed-img{inset:0 0 auto 0;height:560px}
  .bleed-img::after{background:linear-gradient(180deg,transparent 30%,var(--hsolid) 92%)!important}
  .hl-bleed .svh{padding-top:250px}
  .hl-bleed .svh-vis{min-height:400px}
  .hl-bleed .uiw{left:0;right:auto}
  .psplit,.ilist,.vtl,.tstrip{grid-template-columns:1fr}
  .pside,.ivis,.vside{position:relative;top:auto}
  .ivis{aspect-ratio:16/10}
  .mdash{grid-template-columns:1fr}
  .mdl{border-right:0;border-bottom:1px solid var(--tl)}
  .faq.two{grid-template-columns:1fr}
}
@media (max-width:760px){
  .hl-card{padding-top:84px}
  .hcardbox{border-radius:26px}
  .hcardbox .svh-copy{padding:24px 20px}
  .hcardbox h1{font-size:clamp(36px,10vw,50px)}
  .hcardbox .ctas .btn{flex:1 1 auto;justify-content:center}
  .hcardbox .svh-vis{min-height:400px}
  .hcardbox .uiw{left:14px;bottom:14px}
  .hl-stage .svh-vis{height:300px;margin:18px 0 60px}
  .hl-stage .svh-copy{text-align:left;justify-items:start}
  .hl-stage .crumb,.hl-stage .ctas{justify-content:flex-start}
  .hl-stage .mtag{justify-self:start!important}
  .hl-stage .tagstrip{justify-content:flex-start}
  .hl-bleed .svh{padding-top:210px}
  .bleed-img{height:480px}
  .prow{grid-template-columns:44px 1fr;gap:6px 16px;padding:22px 0}
  .prow .xx{width:40px;height:40px;font-size:16px;grid-row:span 2}
  .prow h3{font-size:22px}
  .prow p{font-size:15px}
  .bub{padding:16px 18px;font-size:15px}
  .ibento{grid-template-columns:1fr}
  .ibig{min-height:320px;padding:22px}
  .irow{grid-template-columns:40px 1fr;gap:4px 14px;padding:18px 0}
  .irow .ck{width:38px;height:38px}
  .irail .icard{width:80vw;min-height:260px}
  .mband{grid-template-columns:1fr}
  .mb{border-left:0!important;border-top:1px solid rgba(255,255,255,.2)}
  .mb:first-child{border-top:0}
  .mb .arr{font-size:48px}
  .kr{font-size:17px}
  .bigchart{height:170px}
  .vsteps{padding-left:44px}
  .vsteps::before,.vfill{left:13px}
  .vstep{padding:20px}
  .vstep::before{left:-40px;width:20px;height:20px}
  .vstep h3{font-size:21px}
  .pbig{grid-template-columns:1fr}
  .pb{min-height:220px;padding:24px}
  .pfeat{grid-template-columns:1fr}
  .pfeat .wk.big{flex-direction:column;min-height:0}
  .pfeat .wk.big .pic{flex:none;height:260px}
  .pfeat .wk.big .metric{font-size:28px}
  .pfeat .wk{height:420px}
  .face{width:140px}
  .face .ph{width:120px}
  .faces{gap:14px}
  .rrow{grid-template-columns:1fr 44px;gap:6px 14px;padding:20px 8px}
  .rrow p{grid-column:1}
  .rrow i{grid-row:1/3;grid-column:2;width:44px;height:44px}
  .rrow h3{font-size:24px}
  .cta-c{text-align:left;justify-items:start}
}

/* ================= v7: white inner pages, work + video showcases, fixed cross-sell ================= */
.th-white{--hbg:#FFFFFF;--hsolid:#FFFFFF;--hfg:var(--ink);--hmuted:var(--muted-l);--hline:rgba(25,23,22,.12);--boxbg:var(--purple);--boxfg:var(--white)}
.svc-hero.th-white::before{display:none}
.th-white .glow{background:radial-gradient(circle,rgba(120,86,255,.14),transparent 65%)!important}
.th-white .mtag.c-create{background:var(--ink);color:var(--paper)}
.th-white .mtag.c-web{background:var(--ink);color:var(--paper)}
.th-white .svh-photo::after{background:none}
.th-white .svh-photo{box-shadow:0 30px 70px -40px rgba(25,23,22,.45)}
.th-white .ui{box-shadow:0 30px 60px -24px rgba(25,23,22,.35);border:1px solid var(--line-l)}
.th-white.hl-card{background:#FFFFFF}
.th-white .tagstrip span:not(.lbl){background:var(--paper);border-color:transparent}
.hl-bleed.th-white .bleed-img::after{background:linear-gradient(90deg,#FFFFFF 34%,rgba(255,255,255,.2) 78%),linear-gradient(0deg,#FFFFFF 0%,transparent 28%)}
.hl-bleed.th-white .bleed-img{left:30%}

/* White sections (light, alternate with grey) */
.light.white{background:var(--white);--cardbg:var(--paper)}
.white .pcard,.white .icard:not(.iwide),.white .ktile:not(:first-child),.white .step:not(.on),.white .faq details,.white .lead-card,.white .vstep,.white .pb:not(:nth-child(2)):not(:nth-child(3)),.white .worry,.white .mdash{background:var(--paper);border-color:transparent}
.white .irail .icard:nth-child(3n){background:var(--paper)}
.white .form,.white .meet{background:var(--paper);border-color:transparent}

/* Real numbers strip (from your previous case study) */
.realnums{background:var(--white);padding-bottom:10px}
.rn{display:grid;grid-template-columns:auto repeat(4,1fr);gap:10px;align-items:stretch;background:var(--ink);color:var(--paper);border-radius:24px;padding:10px}
.rn-l{display:flex;align-items:center;padding:0 18px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--lime);max-width:200px;line-height:1.5}
.rn div{background:var(--ink-3);border-radius:16px;padding:16px 18px;display:grid;gap:2px}
.rn div:first-of-type{background:var(--purple)}
.rn b{font-family:var(--display);font-size:clamp(24px,2.6vw,36px);font-weight:700;line-height:1}
.rn span{font-size:13px;color:var(--muted-d)}
.rn div:first-of-type span{color:#EAE5FF}

/* Work figure (shared) */
.wf{position:relative;margin:0;border-radius:20px;overflow:hidden;background:var(--paper-2);cursor:zoom-in}
.wf img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.wf:hover img,.wf:focus-visible img{transform:scale(1.05)}
.wf figcaption{position:absolute;left:10px;right:10px;bottom:10px;display:flex;flex-direction:column;gap:1px;padding:10px 14px;border-radius:14px;background:rgba(25,23,22,.82);color:var(--paper);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transform:translateY(8px);opacity:0;transition:transform .35s,opacity .35s}
.wf:hover figcaption,.wf:focus-visible figcaption{transform:none;opacity:1}
.wf figcaption b{font-size:14px}
.wf figcaption span{font-size:12px;color:#CFCAD9}
.wf .zoom{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center;font-style:normal;font-weight:700;opacity:0;transform:scale(.6);transition:transform .35s,opacity .35s}
.wf:hover .zoom,.wf:focus-visible .zoom{opacity:1;transform:none}
.showmore{display:flex;justify-content:center;margin-top:28px}

/* Masonry */
.masonry{columns:3;column-gap:14px}
.masonry .wf{break-inside:avoid;margin-bottom:14px;display:block}

/* Marquee strip */
.marq-wrap{display:grid;gap:14px;overflow:hidden;padding-block:6px}
.marq{overflow:hidden}
.mtrack{display:flex;gap:14px;width:max-content;animation:marq 60s linear infinite}
.marq.rev .mtrack{animation-direction:reverse;animation-duration:70s}
.marq:hover .mtrack{animation-play-state:paused}
.wf.sc{flex:none;width:clamp(220px,20vw,300px);aspect-ratio:4/5}

/* Amazon case-study steps (inspired by your Trademark Beauty page) */
.csteps{display:grid;gap:clamp(36px,5vw,64px)}
.cstep{display:grid;gap:20px}
.cs-h{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center}
.cs-n{font-family:var(--display);font-weight:800;font-size:clamp(48px,6vw,84px);line-height:.85;color:transparent;-webkit-text-stroke:2px var(--purple)}
.cs-h h3{font-size:clamp(24px,2.6vw,36px);font-weight:700}
.cs-h p{color:var(--t2);max-width:60ch}
.cs-g{display:grid;gap:14px}
.cs-g.g1{grid-template-columns:minmax(0,560px)}
.cs-g.g3{grid-template-columns:repeat(3,1fr)}
.cs-g.k2{grid-template-columns:1fr}
.wf.ct{background:var(--white);border:1px solid var(--tl)}
.wf.ct img{object-fit:contain}

/* Browser frames */
.bframes{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.bf{margin:0;border-radius:20px;overflow:hidden;background:var(--ink);border:1px solid var(--tl);cursor:zoom-in}
.bf-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--ink-2)}
.bf-bar i{width:10px;height:10px;border-radius:50%;background:#55505A}
.bf-bar i:first-child{background:#FF6B6B}.bf-bar i:nth-child(2){background:#FFB443}.bf-bar i:nth-child(3){background:#3BD58A}
.bf-bar span{margin-left:10px;flex:1;font-family:var(--mono);font-size:11px;color:#ABA5BA;background:#3A3533;border-radius:999px;padding:4px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bf-shot{height:clamp(260px,26vw,380px);overflow:hidden;background:var(--white)}
.bf-shot img{width:100%;height:auto;min-height:100%;object-fit:cover;object-position:top;transition:transform 4s ease}
.bf:hover .bf-shot img{transform:translateY(calc(-100% + clamp(260px,26vw,380px)))}
.bf figcaption{display:flex;justify-content:space-between;gap:10px;padding:14px 16px;color:var(--paper);font-size:14px}
.bf figcaption span{color:#ABA5BA}

/* Video showcase */
.vchips{display:flex;flex-wrap:wrap;gap:8px;margin:-16px 0 24px}
.vchips span{font-size:13px;font-weight:700;padding:8px 14px;border-radius:999px;border:1px solid var(--line-d);color:#D9D4E4}
.vchips span.on{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.reels-wrap{overflow:hidden}
.reels{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px max(var(--gut),calc((100vw - var(--max))/2 + var(--gut))) 18px;scrollbar-width:none}
.reels::-webkit-scrollbar{display:none}
.vc{position:relative;flex:none;width:clamp(220px,19vw,280px);aspect-ratio:9/16;border:0;padding:0;border-radius:26px;overflow:hidden;background:var(--ink-3);scroll-snap-align:center;text-align:left;color:var(--white);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.vc:hover,.vc:focus-visible{transform:translateY(-8px) scale(1.02);box-shadow:0 30px 60px -20px rgba(120,86,255,.55)}
.vc img,.vc video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vc img{animation:kb2 9s ease-in-out infinite alternate}
@keyframes kb2{from{transform:scale(1.02)}to{transform:scale(1.14) translate(-2%,-2%)}}
.vc::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(25,23,22,.35),transparent 30%,transparent 55%,rgba(25,23,22,.9))}
.vtop{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;z-index:2}
.vtop em{font-style:normal;font-family:var(--mono);font-size:10.5px;padding:5px 9px;border-radius:999px;background:rgba(25,23,22,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.vplay{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px;border-radius:50%;background:var(--lime);display:grid;place-items:center;z-index:2;transition:transform .35s;animation:ping 2.4s infinite}
.vplay svg{width:22px;height:22px;margin-left:3px}
.vc:hover .vplay{transform:scale(1.12)}
.vcap{position:absolute;left:16px;right:16px;bottom:16px;z-index:2;display:grid;gap:2px}
.vcap b{font-family:var(--display);font-size:19px;line-height:1.15}
.vcap span{font-size:12.5px;color:#D9D4E4}
.vnav{display:flex;gap:10px;justify-content:flex-end;margin-top:6px}
.vnav button{width:52px;height:52px;border-radius:50%;border:1px solid var(--line-d);background:transparent;color:var(--paper);font-size:18px;transition:background .25s,color .25s}
.vnav button:hover{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.vfilm{display:grid;grid-template-columns:1.35fr 1fr;gap:16px}
.vc.big{width:100%;aspect-ratio:16/10;border-radius:28px}
.vc.big .vplay{width:92px;height:92px;margin:-46px}
.vc.big .vcap b{font-size:clamp(24px,2.6vw,34px)}
.vside4{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vside4 .vc{width:100%;aspect-ratio:auto;min-height:220px}

/* Lightbox (images + video) */
.lb{position:fixed;inset:0;z-index:120;background:rgba(10,9,9,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:grid;place-items:center;align-content:center;gap:12px;padding:20px}
.lb-in{max-width:min(1100px,100%);max-height:80vh;display:grid;place-items:center}
.lb-in img{max-width:100%;max-height:80vh;border-radius:16px;object-fit:contain;background:var(--white)}
.lb-in video{max-width:100%;max-height:80vh;border-radius:16px;background:#000}
.lb-in .vph{position:relative;width:min(420px,86vw);aspect-ratio:9/16;border-radius:22px;overflow:hidden}
.lb-in .vph img{width:100%;height:100%;object-fit:cover;max-height:none;animation:kb2 6s ease-in-out infinite alternate;border-radius:0}
.lb-in .vph p{position:absolute;left:14px;right:14px;bottom:14px;margin:0;padding:12px;border-radius:12px;background:rgba(25,23,22,.85);color:var(--paper);font-size:13px}
.lb-cap{color:#D9D4E4;font-size:14px;text-align:center;margin:0}
.lb-x{position:fixed;top:calc(16px + env(safe-area-inset-top,0px));right:16px;width:46px;height:46px;border-radius:50%;border:0;background:var(--lime);color:var(--ink);font-size:18px;font-weight:700}

/* Cross-sell: one fixed component on every service page */
.xsell{background:var(--paper);color:var(--ink);padding-block:clamp(72px,9vw,120px);--tl:var(--line-l);--t2:var(--muted-l)}
.xs-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:36px}
.xs-head>div{display:grid;gap:16px;min-width:0;flex:1 1 520px}
.xsell .eyebrow{color:var(--muted-l)}
.xs-all{font-weight:700;color:var(--purple-deep);text-decoration:none;font-size:15px;white-space:nowrap}
.xs-all:hover{text-decoration:underline;text-underline-offset:4px}
.xs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.xs-card{display:flex;flex-direction:column;border-radius:24px;overflow:hidden;background:var(--white);color:var(--ink);text-decoration:none;border:1px solid var(--line-l);transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.xs-card:hover,.xs-card:focus-visible{transform:translateY(-8px);box-shadow:0 30px 60px -28px rgba(91,59,232,.45)}
.xs-img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)}
.xs-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s}
.xs-card:hover .xs-img img{transform:scale(1.06)}
.xs-body{display:grid;gap:8px;padding:20px 20px 8px;flex:1;align-content:start}
.xs-body .mtag{justify-self:start;font-size:10.5px}
.xs-body b{font-family:var(--display);font-size:24px;font-weight:700;line-height:1.1}
.xs-body>span:last-child{font-size:14.5px;color:var(--muted-l)}
.xs-go{display:flex;justify-content:space-between;align-items:center;padding:14px 20px 20px;font-weight:700;font-size:14px}
.xs-go i{width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--lime);display:grid;place-items:center;font-style:normal;transition:transform .35s}
.xs-card:hover .xs-go i{transform:rotate(-45deg)}
.xs-fbm{background:var(--purple);color:var(--white);border-color:transparent}
.xs-fbm .xs-body{align-content:end;padding-top:28px}
.xs-fbm .xs-body b{font-size:30px}
.xs-fbm .xs-body>span:last-child{color:#EAE5FF}
.xs-fbm .xs-go i{background:var(--lime);color:var(--ink)}

/* Team photos from the live site */
.ph .tp{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;z-index:2}

@media (max-width:1100px){
  .xs-grid{grid-template-columns:repeat(2,1fr)}
  .masonry{columns:2}
  .vfilm{grid-template-columns:1fr}
  .rn{grid-template-columns:repeat(2,1fr)}
  .rn-l{grid-column:1/-1;max-width:none;padding:10px 8px}
}
@media (max-width:760px){
  .xs-grid{grid-template-columns:1fr}
  .xs-card{display:grid;grid-template-columns:120px 1fr;grid-template-rows:auto auto}
  .xs-img{grid-row:span 2;aspect-ratio:auto;height:100%}
  .xs-body{padding:16px 16px 4px}
  .xs-body b{font-size:20px}
  .xs-go{padding:8px 16px 16px}
  .xs-fbm{grid-template-columns:1fr}
  .masonry{columns:2;column-gap:10px}
  .masonry .wf{margin-bottom:10px;border-radius:14px}
  .wf figcaption{opacity:1;transform:none;padding:7px 10px;left:6px;right:6px;bottom:6px;border-radius:10px}
  .wf figcaption b{font-size:12px}.wf figcaption span{display:none}
  .wf.sc{width:200px}
  .cs-h{grid-template-columns:auto 1fr}
  .cs-h .btn{grid-column:1/-1;justify-self:start}
  .cs-g.g3{grid-template-columns:1fr 1fr}
  .cs-g.g3 .wf:first-child{grid-column:1/-1}
  .bframes{grid-template-columns:1fr}
  .vc{width:72vw;max-width:280px}
  .vside4{grid-template-columns:1fr 1fr}
  .vside4 .vc{width:100%;min-height:200px}
  .vchips{margin-top:-8px}
}

/* ================= Portfolio + Our Methodology ================= */
.pf-hero,.mt-hero{padding-top:120px;padding-bottom:40px;overflow:hidden}
.pf-top{position:relative;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end}
.pf-copy,.mt-copy{display:grid;gap:22px;min-width:0}
.pf-hero h1,.mt-hero h1{font-size:clamp(46px,6.6vw,104px);font-weight:800;letter-spacing:-.035em;max-width:14ch;animation:svrise .9s cubic-bezier(.2,.8,.2,1) both}
.pf-hero h1 .box,.mt-hero h1 .box{display:inline;border-radius:6px;padding:0 .12em .02em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.pf-hero .ctas,.mt-hero .ctas{display:flex;flex-wrap:wrap;gap:12px}
.pf-top>.anchor{width:clamp(110px,13vw,180px);margin-bottom:20px}
.pf-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:40px}
.pf-stats div{background:var(--paper);border-radius:20px;padding:20px 22px;display:grid;gap:4px}
.pf-stats div:first-child{background:var(--purple);color:var(--white)}
.pf-stats div:first-child span{color:#EAE5FF}
.pf-stats b{font-family:var(--display);font-size:clamp(28px,3vw,42px);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.pf-stats span{font-size:14px;color:var(--muted-l)}
.pf-marq{margin-top:28px}
.pf-marq .wf.sc{width:clamp(240px,22vw,320px)}

/* Case studies */
.cases{display:grid;gap:clamp(48px,6vw,90px)}
.case{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,4vw,64px);align-items:start}
.case.rev .c-imgs{order:2}
.case>div{min-width:0}
.c-imgs{display:grid;grid-template-columns:1fr 1fr;gap:12px;position:sticky;top:100px}
.c-imgs .cbig{grid-column:1/-1}
.c-body{display:grid;gap:16px}
.c-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.c-n{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--purple-deep)}
.c-tags{display:flex;flex-wrap:wrap;gap:6px}
.c-tags span{font-family:var(--mono);font-size:11px;padding:5px 10px;border-radius:999px;background:var(--white);border:1px solid var(--line-l)}
.c-client{font-family:var(--display);font-weight:700;font-size:18px;color:var(--purple-deep)}
.c-body h3{font-size:clamp(28px,3.2vw,46px);font-weight:700;line-height:1.05}
.c-two{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:20px 0;border-block:1px solid var(--line-l)}
.c-two h4{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-l);font-weight:500;margin-bottom:8px}
.c-two p{color:var(--muted-l);font-size:15px}
.c-two ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:14.5px}
.c-two li{display:flex;gap:10px}
.c-two li::before{content:"";flex:none;width:16px;height:16px;margin-top:3px;border-radius:50%;background:var(--lime);box-shadow:inset 0 0 0 4px var(--white)}
.c-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.c-nums div{background:var(--ink);color:var(--paper);border-radius:16px;padding:16px;display:grid;gap:4px}
.c-nums div:first-child{background:var(--purple)}
.c-nums b{font-family:var(--display);font-size:clamp(22px,2.2vw,30px);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.c-nums span{font-size:12px;color:#CFCAD9}
.cx-track{display:grid;grid-template-columns:auto repeat(4,1fr);gap:8px;align-items:stretch}
.cx-l{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-l);display:flex;align-items:center;max-width:90px;line-height:1.4}
.cx-track div{background:var(--white);border:1px solid var(--line-l);border-radius:14px;padding:12px;display:grid}
.cx-track b{font-family:var(--display);font-size:20px}
.cx-track span{font-size:11.5px;color:var(--muted-l)}
.c-link{justify-self:start;display:inline-flex;align-items:center;gap:10px;font-weight:700;text-decoration:none;color:var(--ink)}
.c-link i{width:36px;height:36px;border-radius:50%;background:var(--lime);display:grid;place-items:center;font-style:normal;transition:transform .3s}
.c-link:hover i{transform:rotate(-45deg)}

/* Filterable gallery */
.pf-filters{margin-bottom:24px;background:var(--paper)}
.pgallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;grid-auto-flow:dense}
.gi{min-width:0}
.gi .wf{aspect-ratio:1}
.gi:nth-child(5n+1){grid-column:span 2;grid-row:span 2}
.gi:nth-child(5n+1){position:relative;min-height:200px}
.gi:nth-child(5n+1) .wf,.gi:nth-child(5n+1) .ctile{position:absolute;inset:0;aspect-ratio:auto;height:auto}
.gi[hidden]{display:none}
.ctile{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:1;display:flex;flex-direction:column}
.ctile .pic{position:absolute;inset:0}
.ctile .tagrow{position:absolute;top:12px;left:12px;z-index:1}
.ctile .tagrow span{font-family:var(--mono);font-size:10.5px;background:rgba(25,23,22,.78);color:var(--paper);padding:5px 9px;border-radius:999px}
.ct-txt{position:absolute;left:12px;right:12px;bottom:12px;z-index:1;background:var(--white);border-radius:14px;padding:12px 14px;display:grid}
.ct-txt b{font-family:var(--display);font-size:18px}
.ct-txt span{font-size:12px;color:var(--muted-l)}


/* Client logos */
.logos{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.lg-t{background:var(--white);border:1px solid var(--line-l);border-radius:18px;min-height:110px;display:grid;place-items:center;padding:16px;text-align:center;transition:transform .3s,box-shadow .3s}
.lg-t:hover{transform:translateY(-4px);box-shadow:0 20px 40px -24px rgba(91,59,232,.35)}
.lg-t img{max-width:120px;max-height:44px;object-fit:contain;filter:grayscale(1);opacity:.75}
.lg-t:hover img{filter:none;opacity:1}
.lg-t img+span{display:none}
.lg-t span{font-family:var(--display);font-weight:700;font-size:18px;color:var(--ink-2)}

/* Methodology hero */
.mt-top{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);align-items:center}
.mt-vis{position:relative;min-height:520px}
.mt-p1{position:absolute;top:0;right:0;width:74%;height:78%;border-radius:30px;overflow:hidden;box-shadow:0 30px 70px -40px rgba(25,23,22,.45)}
.mt-p2{position:absolute;left:0;bottom:0;width:42%;aspect-ratio:4/5;border-radius:160px 160px 24px 24px;overflow:hidden;background:linear-gradient(170deg,var(--purple),var(--purple-deep));border:6px solid var(--white);box-shadow:0 30px 60px -30px rgba(25,23,22,.5)}
.mt-p1 img,.mt-p2 img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.mt-card{position:absolute;right:4%;bottom:6%;width:min(300px,52%);background:var(--ink);color:var(--paper);border-radius:20px;padding:18px;display:grid;gap:10px;animation:bob 6s ease-in-out infinite;z-index:2}
.mt-card .mtag{justify-self:start}
.mt-card p{font-family:var(--display);font-size:17px;line-height:1.3}
.mt-vis>.anchor{position:absolute;left:30%;top:-20px;width:96px;z-index:3}

/* Mission / vision */
.mv{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mv-c{border-radius:28px;padding:clamp(28px,4vw,48px);background:var(--white);display:grid;gap:18px;align-content:start}
.mv-c h3{font-size:clamp(22px,2.4vw,32px);font-weight:600;line-height:1.25}
.mv-c.v{background:var(--purple);color:var(--white)}
.mv-c.v .eyebrow{color:#EAE5FF}.mv-c.v .eyebrow::before{background:var(--lime)}

/* Growth system (interactive) */
.gsys{display:grid;gap:22px}
.gs-track{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.gs-line{position:absolute;left:10%;right:10%;top:26px;height:4px;border-radius:2px;background:var(--paper-2)}
.gs-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:var(--purple);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.gs-step{position:relative;border:0;background:none;display:grid;justify-items:center;gap:6px;padding:0 6px 14px;text-align:center;color:var(--ink)}
.gs-dot{width:56px;height:56px;border-radius:50%;background:var(--white);border:3px solid var(--paper-2);position:relative;z-index:1;transition:background .4s,border-color .4s,transform .4s}
.gs-dot::after{content:"";position:absolute;left:50%;top:50%;width:80px;height:16px;margin:-8px 0 0 -40px;border-radius:8px;background:var(--ink-2);z-index:-1;transform:rotate(-30deg) scale(0);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.gs-step.on .gs-dot{background:var(--purple);border-color:var(--purple);transform:scale(1.08)}
.gs-step.on .gs-dot::after{transform:rotate(-30deg) scale(1)}
.gs-step.done .gs-dot{background:var(--lime);border-color:var(--lime)}
.gs-n{font-family:var(--mono);font-size:11px;color:var(--muted-l);margin-top:6px}
.gs-step b{font-family:var(--display);font-size:clamp(16px,1.6vw,22px)}
.gs-w{font-size:12.5px;color:var(--muted-l)}
.gs-panel{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px;animation:panelIn .5s cubic-bezier(.2,.8,.2,1)}
@keyframes panelIn{from{opacity:0;transform:translateY(14px)}}
.gs-main{background:var(--ink);color:var(--paper);border-radius:24px;padding:clamp(24px,3vw,36px);display:grid;gap:12px;align-content:start}
.gs-when{font-family:var(--mono);font-size:11.5px;color:var(--lime);letter-spacing:.06em;text-transform:uppercase}
.gs-main h3{font-size:clamp(30px,3.4vw,48px);font-weight:700}
.gs-main p{color:#CFCAD9;font-size:16.5px}
.gs-col{background:var(--paper);border-radius:24px;padding:clamp(22px,2.6vw,32px)}
.gs-col h4{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-l);font-weight:500;margin-bottom:12px}
.gs-col ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.gs-col li{display:flex;gap:10px;font-weight:600}
.gs-col li::before{content:"✓";flex:none;width:22px;height:22px;border-radius:50%;background:var(--purple);color:var(--white);display:grid;place-items:center;font-size:12px}
.gs-chips{display:flex;flex-wrap:wrap;gap:8px}
.gs-chips span{font-size:13.5px;font-weight:700;padding:8px 12px;border-radius:999px;background:var(--lime)}
.gs-who{display:flex;flex-wrap:wrap;gap:10px}
.gs-p{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;background:var(--white);border-radius:999px;padding:4px 12px 4px 4px}
.gs-p .avs>*{width:30px;height:30px;font-size:11px;--av-b:var(--white)}

/* Principles */
.icard.pr{position:relative;overflow:hidden}
.pr-n{font-family:var(--display);font-weight:800;font-size:64px;line-height:1;color:transparent;-webkit-text-stroke:2px var(--purple);opacity:.6}
.light .icard.pr:nth-child(1),.light .icard.pr:nth-child(5){background:var(--purple);color:var(--white);border-color:transparent}
.light .icard.pr:nth-child(1) p,.light .icard.pr:nth-child(5) p{color:#EAE5FF}
.light .icard.pr:nth-child(1) .pr-n,.light .icard.pr:nth-child(5) .pr-n{-webkit-text-stroke-color:var(--lime)}

/* Ladder */
.ladder-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,72px);align-items:end}
.lw-copy{display:grid;gap:18px}
.ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:end;min-height:460px}
.ld{display:grid;grid-template-rows:auto auto;gap:14px;height:100%;align-content:end}
.ld-bar{height:calc(var(--h) * 2.6px + 40px);border-radius:22px 22px 8px 8px;background:var(--ink-3);position:relative;transform-origin:bottom;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.js .ld:not(.in) .ld-bar{transform:scaleY(.15)}
.ld:nth-child(2) .ld-bar{background:#4A3AA8}
.ld:nth-child(3) .ld-bar{background:var(--purple)}
.ld-n{position:absolute;top:14px;left:16px;font-family:var(--display);font-weight:800;font-size:40px;color:transparent;-webkit-text-stroke:2px var(--lime)}
.ld-t{display:grid;gap:4px}
.ld-t b{font-family:var(--display);font-size:24px}
.ld-s{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--lime)}
.ld-t p{color:var(--muted-d);font-size:14.5px}

/* Full team */
.tgroups{display:grid;gap:30px}
.tgroup h4{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-l);font-weight:500;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line-l)}
.tg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.tm{display:grid;grid-template-columns:84px 1fr;gap:16px;align-items:center;background:var(--white);border:1px solid var(--line-l);border-radius:20px;padding:10px;transition:transform .3s}
.tm:hover{transform:translateY(-4px)}
.tm .ph{width:84px;aspect-ratio:1;border-radius:16px}
.tm .ph .ini{font-size:20px}
.tm:hover .ph .cap{transform:translate(-50%,-50%) rotate(150deg)}
.tm-t{display:grid;gap:2px}
.tm-t b{font-family:var(--display);font-size:19px}
.tm-t .role{font-size:13px;font-weight:700;color:var(--purple-deep)}
.tm-t span:last-child{font-size:13px;color:var(--muted-l)}

/* Markets + tools */
.tm2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,72px)}
.tm2>div{display:grid;gap:16px;align-content:start;min-width:0}
.mks{display:grid;gap:8px;margin-top:8px}
.mk{display:flex;justify-content:space-between;gap:10px;align-items:center;background:var(--paper);border-radius:14px;padding:14px 18px}
.mk b{font-family:var(--display);font-size:19px}
.mk span{font-size:13px;color:var(--muted-l)}
.mk:last-child{background:var(--ink);color:var(--paper)}.mk:last-child span{color:var(--lime)}
.tools2{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.tools2 span{font-weight:700;font-size:15px;padding:12px 18px;border-radius:999px;background:var(--paper);transition:background .25s,color .25s}
.tools2 span:hover{background:var(--purple);color:var(--white)}

@media (max-width:1100px){
  .case,.case.rev{grid-template-columns:1fr}
  .case.rev .c-imgs{order:0}
  .c-imgs{position:relative;top:auto}
  .pgallery{grid-template-columns:repeat(3,1fr)}
  .logos{grid-template-columns:repeat(4,1fr)}
  .gs-panel{grid-template-columns:1fr 1fr}
  .gs-main{grid-column:1/-1}
  .ladder-wrap,.mt-top{grid-template-columns:1fr}
}
@media (max-width:760px){
  .pf-hero,.mt-hero{padding-top:96px}
  .pf-hero h1,.mt-hero h1{font-size:clamp(40px,11vw,56px)}
  .pf-top{grid-template-columns:1fr}
  .pf-top>.anchor{display:none}
  .pf-hero .ctas .btn,.mt-hero .ctas .btn{flex:1 1 auto;justify-content:center}
  .pf-stats{grid-template-columns:1fr 1fr;margin-top:28px}
  .pf-stats div{padding:16px}
  .c-two{grid-template-columns:1fr}
  .c-nums{grid-template-columns:1fr 1fr}
  .cx-track{grid-template-columns:1fr 1fr}
  .cx-l{grid-column:1/-1;max-width:none}
  .pgallery{grid-template-columns:1fr 1fr;gap:10px}
  .gi:nth-child(5n+1){grid-column:1/-1;grid-row:auto}
  .gi:nth-child(5n+1){aspect-ratio:1}
  .ct-txt b{font-size:15px}
  .logos{grid-template-columns:1fr 1fr}
  .mt-vis{min-height:400px}
  .mt-card{width:62%}
  .mv{grid-template-columns:1fr}
  .gs-track{grid-template-columns:repeat(5,minmax(64px,1fr));overflow-x:auto;padding-bottom:6px}
  .gs-line{left:32px;right:32px}
  .gs-dot{width:44px;height:44px}
  .gs-step b{font-size:14px}
  .gs-w{display:none}
  .gs-panel{grid-template-columns:1fr}
  .ladder{min-height:360px;gap:8px}
  .ld-bar{height:calc(var(--h) * 1.8px + 30px)}
  .ld-n{font-size:28px}
  .ld-t b{font-size:19px}
  .ld-t p{font-size:13px}
  .tm2{grid-template-columns:1fr;gap:48px}
}

/* ---- Prose pages (sb-prose: privacy statement, cookie policy) ---- */
.prose-page{padding-top:clamp(112px,12vw,150px)}
.prose-page .crumb{color:var(--muted-l)}
.prose-page .crumb a:hover{color:var(--purple-deep)}
.prose-page h1{font-size:clamp(38px,5.5vw,72px);font-weight:800;letter-spacing:-.03em;max-width:18ch;margin-top:18px}
.prose-page .lead{margin-top:18px}
.prose{max-width:72ch;margin-top:40px;font-size:17px;line-height:1.7;color:var(--ink-2)}
.prose>:first-child{margin-top:0}
.prose h2,.prose h3,.prose h4{line-height:1.2;text-wrap:pretty;color:var(--ink)}
.prose h2{font-size:clamp(24px,2.4vw,32px);font-weight:700;margin:44px 0 14px}
.prose h3{font-size:clamp(19px,1.6vw,22px);font-weight:700;margin:28px 0 10px}
.prose h4{font-size:17px;font-weight:700;margin:22px 0 8px}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:1.3em}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--purple)}
.prose a{color:var(--purple-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prose a:hover{color:var(--purple)}
.prose strong{color:var(--ink)}
.prose hr{border:0;border-top:1px solid var(--line-l);margin:36px 0}
.prose blockquote{margin:0 0 18px;padding-left:18px;border-left:3px solid var(--purple);color:var(--muted-l)}
