:root{
  --font:'Manrope',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --bg:#FCFCFE; --mist:#F5F4FB; --lav:#ECE9FA; --line:#E4E1F2;
  --ink:#1B1840; --ink2:#524E78; --ink3:#8683A6;
  --purple:#6A5AE0; --purple-deep:#4A3DBB; --purple-ink:#2A2466; --purple-soft:#E9E5FF;
  --teal:#2BB8A4; --teal-soft:#DDF6F1; --amber:#F2B65C; --coral:#F07A6F;
  --dark:#17143A; --dark2:#211D4F; --dark-ink:#F5F4FF; --dark-mute:#B2ADD9;
  --r-xl:32px; --r-lg:24px; --r:16px; --r-sm:10px;
  --shadow:0 24px 60px -28px rgba(42,36,102,.35);
  --shadow-sm:0 10px 30px -18px rgba(42,36,102,.35);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:calc(90px + env(safe-area-inset-top,0px));scroll-behavior:smooth}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-0.025em;line-height:1.04}
h1{font-size:clamp(42px,5.6vw,76px)}
h2{font-size:clamp(32px,4vw,54px)}
h3{font-size:clamp(21px,1.9vw,26px);letter-spacing:-0.01em}
p{margin:0}
.lead{font-size:clamp(18px,1.35vw,21px);color:var(--ink2);max-width:58ch;line-height:1.55}
.wrap{width:min(1180px,calc(100% - 48px));margin:0 auto}
.section{padding:108px 0;position:relative}
@media (max-width:760px){.section{padding:68px 0}}
.band-mist{background:var(--mist)}
.band-lav{background:linear-gradient(180deg,var(--lav),var(--mist))}
.band-dark{background:var(--dark);color:var(--dark-ink)}
.band-dark .lead{color:var(--dark-mute)}
.band-purple{background:linear-gradient(135deg,var(--purple-deep),var(--purple) 60%,#8A7CF0);color:#fff}
.band-purple .lead{color:rgba(255,255,255,.82)}
.sec-head{max-width:720px;margin-bottom:52px}
.sec-head p{margin-top:18px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--purple-deep);background:var(--purple-soft);padding:7px 13px;border-radius:999px;margin-bottom:18px}
.band-dark .kicker,.band-purple .kicker{background:rgba(255,255,255,.12);color:#fff}
.kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal)}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}.rv.d4{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 26px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;border:2px solid transparent;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;cursor:pointer;font-family:inherit;line-height:1}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--purple);color:#fff;box-shadow:0 14px 30px -12px var(--purple)}
.btn-primary:hover{background:var(--purple-deep)}
.btn-white{background:#fff;color:var(--purple-ink);box-shadow:0 14px 30px -14px rgba(0,0,0,.4)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.band-dark .btn-ghost,.band-purple .btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
.btn-teal{background:var(--teal);color:#06302A}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(252,252,254,.8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:84px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;font-weight:800;font-size:22px;letter-spacing:-0.02em}
.logo .lm{font-weight:500;color:var(--ink2)}
.footer .logo .lm{color:var(--dark-mute)}
@media (max-width:420px){.logo .lm{display:none}}
.logo .mark{width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,var(--purple-deep),var(--purple));display:grid;place-items:center;box-shadow:0 8px 18px -8px var(--purple)}
.logo .mark svg{width:20px;height:20px}
.links{display:flex;gap:4px;align-items:center}
.links a{text-decoration:none;padding:10px 14px;border-radius:999px;font-weight:600;color:var(--ink2);font-size:15px}
.links a:hover,.links a[aria-current="page"]{background:var(--mist);color:var(--ink)}
.links .btn{margin-left:10px;padding:12px 20px;color:#fff}
.links .btn:hover{background:var(--purple-deep)}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);background:#fff;border-radius:12px;cursor:pointer;place-items:center}
.burger span{display:block;width:20px;height:2px;background:var(--ink);margin:3px 0;transition:transform .2s,opacity .2s}
@media (max-width:960px){
  .links{display:none;position:absolute;left:0;right:0;top:84px;flex-direction:column;align-items:stretch;background:var(--bg);border-bottom:1px solid var(--line);padding:12px 24px 22px;gap:2px;box-shadow:var(--shadow)}
  .links a{padding:14px 12px;font-size:17px}
  .links .btn{margin:10px 0 0}
  .nav.open .links{display:flex}
  .nav.open .burger span:nth-child(1){transform:translateY(5px) rotate(45deg)}
  .nav.open .burger span:nth-child(2){opacity:0}
  .nav.open .burger span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
  .burger{display:grid}
}

/* hero */
.hero{padding:88px 0 72px;position:relative;overflow:hidden}
.hero .glow{position:absolute;width:64vw;height:64vw;max-width:820px;max-height:820px;border-radius:50%;filter:blur(40px);opacity:.55;pointer-events:none}
.hero .glow.a{background:radial-gradient(closest-side,#DCD6FF,transparent 70%);right:-14%;top:-30%}
.hero .glow.b{background:radial-gradient(closest-side,#D3F3EC,transparent 70%);left:-24%;bottom:-40%}
.hero .wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:center;position:relative}
.hero h1 span{display:block}
.hero .lead{margin:26px 0 34px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.hero-note{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px 22px;color:var(--ink2);font-size:15px;font-weight:600}
.hero-note span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--teal);margin-right:8px;vertical-align:1px}
@media (max-width:960px){.hero .wrap{grid-template-columns:1fr}.hero{padding:52px 0 48px}}

/* hero visual: panel + device + floating cards */
.hv{position:relative;aspect-ratio:1/1;width:100%;max-width:560px;justify-self:end}
.hv .panel{position:absolute;inset:6% 0 6% 10%;border-radius:36px;background:linear-gradient(145deg,var(--purple-deep) 0%,var(--purple) 55%,#9A8FF3 100%);box-shadow:var(--shadow)}
.hv .device{position:absolute;left:0;top:16%;width:84%;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 40px 80px -30px rgba(23,20,58,.55),0 0 0 1px rgba(0,0,0,.05);transform:rotate(-2deg);animation:float 7s ease-in-out infinite}
.hv .device .bar{height:30px;background:#F3F2F8;display:flex;align-items:center;gap:6px;padding:0 12px;border-bottom:1px solid #E6E4F0}
.hv .device .bar i{width:9px;height:9px;border-radius:50%;background:#D8D6E6}
.hv .device img{aspect-ratio:16/10;object-fit:cover;object-position:top;width:100%}
.hv .card{position:absolute;white-space:nowrap;background:#fff;border-radius:14px;padding:12px 14px;box-shadow:0 20px 40px -20px rgba(23,20,58,.5);display:flex;gap:10px;align-items:center;font-size:13px;font-weight:700;color:var(--ink);animation:float 6s ease-in-out infinite}
.hv .card small{display:block;font-weight:500;color:var(--ink3)}
.hv .card .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;flex:0 0 34px}
.hv .card.c1{right:-2%;top:9%;animation-delay:-2s}
.hv .card.c2{right:2%;bottom:14%;animation-delay:-4s}
.hv .card.c3{left:-4%;bottom:6%;animation-delay:-1s}
@keyframes float{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-9px) rotate(var(--rot,0deg))}}
.hv .device{--rot:-2deg}
@media (max-width:960px){.hv{justify-self:center;max-width:520px}}
@media (prefers-reduced-motion:reduce){.hv .device,.hv .card{animation:none}}

/* trusted strip */
.trusted{padding:0 0 0;background:linear-gradient(90deg,var(--lav),var(--teal-soft) 50%,var(--lav));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trusted .wrap{padding:44px 0 48px;text-align:center}
.trusted p{font-size:14px;font-weight:700;color:var(--purple-deep);margin-bottom:20px}
.marks{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 14px}
.marks span{font-weight:800;font-size:17px;letter-spacing:-0.01em;color:var(--ink);background:#fff;border:1px solid var(--line);padding:12px 20px;border-radius:999px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}
.marks span:hover{transform:translateY(-2px);box-shadow:var(--shadow)}

/* markets */
.markets{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.market{border-radius:var(--r-xl);padding:46px;display:flex;flex-direction:column;gap:20px;min-height:540px;position:relative;overflow:hidden;text-decoration:none;color:inherit;transition:transform .25s ease,box-shadow .25s ease}
.market:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.market.home{background:#fff;border:1px solid var(--line)}
.market.home::before{content:"";position:absolute;left:0;top:0;right:0;height:6px;background:linear-gradient(90deg,var(--teal),var(--purple))}
.market.pro{background:linear-gradient(160deg,var(--dark),var(--dark2));color:var(--dark-ink)}
.market.pro::after{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(closest-side,rgba(106,90,224,.55),transparent)}
.market p{color:var(--ink2);max-width:46ch;position:relative}
.market.pro p{color:var(--dark-mute)}
.market .go{margin-top:auto;padding-top:16px;font-weight:700;color:var(--purple-deep);display:flex;align-items:center;gap:8px;position:relative}
.market.pro .go{color:#C9C2FF}
.chips{display:flex;flex-wrap:wrap;gap:8px;position:relative}
.chips span{padding:8px 13px;border-radius:999px;font-size:14px;font-weight:600;background:var(--mist);color:var(--ink);border:1px solid var(--line)}
.market.pro .chips span{background:rgba(255,255,255,.07);color:var(--dark-ink);border-color:rgba(255,255,255,.14)}
@media (max-width:880px){.markets{grid-template-columns:1fr}.market{min-height:0;padding:32px}}

/* work rail (horizontal snap) */
.rail-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:36px}
.rail-nav{display:flex;gap:8px}
.rail-nav button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;display:grid;place-items:center;color:var(--ink);transition:background .2s}
.rail-nav button:hover{background:var(--mist)}
.rail{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 0 28px;scrollbar-width:none;-ms-overflow-style:none}
.rail::-webkit-scrollbar{display:none}
.rail .slide{flex:0 0 min(520px,86vw);scroll-snap-align:start;border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease}
.rail .slide:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.rail .frame{padding:34px 34px 0;background:var(--tone,var(--lav));position:relative;overflow:hidden}
.rail .frame::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(0,0,0,.08))}
.rail .frame img{border-radius:12px 12px 0 0;box-shadow:0 20px 40px -18px rgba(0,0,0,.5);aspect-ratio:16/9.5;object-fit:cover;object-position:top;position:relative}
.rail .meta{padding:20px 24px 24px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.rail .meta h3{font-size:20px}
.rail .meta p{font-size:14px;color:var(--ink3);margin-top:3px}
.rail .meta .tag{font-size:12px;font-weight:700;padding:6px 10px;border-radius:999px;background:var(--purple-soft);color:var(--purple-deep);white-space:nowrap}
.rail .meta .tag.pro{background:var(--teal-soft);color:#0F5F53}

/* work grid (work page) */
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.work-grid .slide{flex:none}
@media (max-width:760px){.work-grid{grid-template-columns:1fr}}

/* case study page */
.case-hero{padding:72px 0 0}
.case-hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end}
.case-frame{border-radius:var(--r-xl) var(--r-xl) 0 0;background:var(--tone,var(--lav));padding:40px 40px 0;margin-top:48px}
.case-frame img{border-radius:14px 14px 0 0;box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fact{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px}
.fact b{display:block;font-size:13px;color:var(--ink3);font-weight:700;margin-bottom:6px}
.fact span{font-weight:700}
.case-body{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.case-body h3{margin-bottom:12px}
.case-body p{color:var(--ink2)}
@media (max-width:860px){.case-hero .wrap,.case-body{grid-template-columns:1fr}.facts{grid-template-columns:1fr}}

/* process */
.stage{background:var(--dark2);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-xl);padding:34px;display:grid;grid-template-columns:1fr 1.15fr;gap:34px;align-items:stretch;box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.steps{display:flex;flex-direction:column;gap:6px}
.step{display:flex;gap:16px;align-items:flex-start;padding:14px 16px;border-radius:14px;cursor:pointer;border:1px solid transparent;transition:background .3s,border-color .3s;position:relative;overflow:hidden;background:none;text-align:left;color:inherit;font:inherit;width:100%}
.step .n{width:34px;height:34px;flex:0 0 34px;border-radius:50%;border:2px solid var(--dark-mute);display:grid;place-items:center;font-weight:800;font-size:13px;color:var(--dark-mute);transition:all .3s}
.step h4{font-size:17px;font-weight:700;color:var(--dark-ink)}
.step p{font-size:14px;color:var(--dark-mute);margin-top:3px;line-height:1.45}
.step.active{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
.step.active .n,.step.done .n{background:var(--teal);border-color:var(--teal);color:#06302A}
.step .bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--teal);transform:scaleX(0);transform-origin:left;opacity:0}
.step.active .bar{opacity:1;animation:fill 3.6s linear forwards}
@keyframes fill{to{transform:scaleX(1)}}
.canvas{position:relative;border-radius:18px;background:radial-gradient(120% 90% at 30% 20%,#2A2472,#100E2B 70%);border:1px solid rgba(255,255,255,.12);overflow:hidden;min-height:360px}
.scene{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.scene.active{opacity:1;transform:none}
.scene svg{width:min(80%,440px);height:auto}
.play{position:absolute;right:14px;top:14px;z-index:2;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:8px 14px;font-weight:700;font-size:13px;cursor:pointer;font-family:inherit}
@media (max-width:900px){.stage{grid-template-columns:1fr;padding:22px}.canvas{min-height:280px;order:-1}}
.scene .draw{stroke-dasharray:700;stroke-dashoffset:700}
.scene.active .draw{animation:draw 1.6s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.scene .pop{transform-origin:center;transform:scale(.6);opacity:0}
.scene.active .pop{animation:pop .5s cubic-bezier(.2,.9,.3,1.4) forwards}
.scene.active .pop:nth-of-type(2){animation-delay:.25s}.scene.active .pop:nth-of-type(3){animation-delay:.5s}.scene.active .pop:nth-of-type(4){animation-delay:.75s}.scene.active .pop:nth-of-type(5){animation-delay:1s}.scene.active .pop:nth-of-type(6){animation-delay:1.2s}
@keyframes pop{to{transform:scale(1);opacity:1}}
.scene .grow{transform-origin:left;transform:scaleX(0)}
.scene.active .grow{animation:grow 1.4s ease forwards}
.scene.active .grow:nth-of-type(2){animation-delay:.3s}.scene.active .grow:nth-of-type(3){animation-delay:.6s}
@keyframes grow{to{transform:scaleX(1)}}
.scene .pulse{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.scene *{animation:none!important}.scene .draw{stroke-dashoffset:0}.scene .pop{transform:none;opacity:1}.scene .grow{transform:none}.step.active .bar{animation:none;transform:scaleX(1)}}

/* pricing */
.tabs{display:inline-flex;background:var(--mist);border:1px solid var(--line);padding:5px;border-radius:999px;gap:4px;margin-bottom:36px}
.tabs button{border:0;background:transparent;padding:12px 22px;border-radius:999px;font-weight:700;font-size:15px;cursor:pointer;color:var(--ink2);font-family:inherit}
.tabs button[aria-selected="true"]{background:var(--purple);color:#fff;box-shadow:0 10px 20px -12px var(--purple)}
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tier{border-radius:var(--r-lg);padding:28px 26px;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;gap:14px;position:relative;transition:transform .25s ease,box-shadow .25s ease}
.tier:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.tier.feature{background:linear-gradient(165deg,var(--purple-deep),var(--purple));color:#fff;border-color:transparent;box-shadow:0 30px 60px -28px var(--purple)}
.tier .badge{position:absolute;top:-13px;left:24px;background:var(--teal);color:#06302A;font-size:12px;font-weight:800;padding:6px 12px;border-radius:999px}
.tier .name{font-weight:800;font-size:19px}
.tier .amt{font-size:38px;font-weight:800;letter-spacing:-0.03em;line-height:1}
.tier .amt small{font-size:15px;font-weight:600;letter-spacing:0;color:var(--ink3)}
.tier.feature .amt small{color:rgba(255,255,255,.75)}
.tier .care{font-size:14px;font-weight:700;color:var(--ink2)}
.tier.feature .care{color:rgba(255,255,255,.8)}
.tier ul{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:9px;font-size:15px}
.tier li{padding-left:24px;position:relative;color:var(--ink2)}
.tier.feature li{color:rgba(255,255,255,.85)}
.tier li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:12px;border-radius:50%;background:var(--teal)}
.tier .btn{margin-top:auto}
.tier.feature .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.panel{display:none}.panel.active{display:block}
.pricing-note{margin-top:22px;color:var(--ink2);font-size:15px;max-width:72ch}
@media (max-width:1000px){.tiers{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.tiers{grid-template-columns:1fr}}

/* stats / creds */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;left:0;bottom:0;right:0;height:5px;background:linear-gradient(90deg,var(--purple),var(--teal))}
.stat strong{display:block;font-size:40px;font-weight:800;letter-spacing:-0.03em;line-height:1;margin-bottom:8px}
.stat span{color:var(--ink2);font-size:15px}
.band-dark .stat{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.band-dark .stat span{color:var(--dark-mute)}
@media (max-width:760px){.stats{grid-template-columns:1fr}}

/* people */
.people{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.person{display:grid;grid-template-columns:220px 1fr;gap:26px;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:26px;align-items:start;box-shadow:var(--shadow-sm)}
.person img{aspect-ratio:4/5;object-fit:cover;border-radius:18px;width:100%}
.person h3{font-size:24px}
.person .role{color:var(--purple-deep);background:var(--purple-soft);display:inline-block;padding:5px 11px;border-radius:999px;font-size:13px;font-weight:700;margin:8px 0 12px}
.person p{color:var(--ink2);font-size:15px}
@media (max-width:1000px){.people{grid-template-columns:1fr}}
@media (max-width:560px){.person{grid-template-columns:1fr}}

/* feature rows */
.rows{display:flex;flex-direction:column;gap:22px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:40px;box-shadow:var(--shadow-sm)}
.row.alt{grid-template-columns:1fr 1fr}
.row.alt .art{order:-1}
.row .art{border-radius:var(--r-lg);aspect-ratio:4/3;background:linear-gradient(145deg,var(--lav),#fff);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.row .art img{width:100%;height:100%;object-fit:cover;object-position:top}
.row h3{margin-bottom:10px}
.row p{color:var(--ink2)}
.row ul{padding-left:20px;color:var(--ink2);margin:14px 0 0;display:flex;flex-direction:column;gap:6px}
@media (max-width:860px){.row,.row.alt{grid-template-columns:1fr;padding:26px}.row.alt .art{order:0}}

/* icon grid */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ic-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;box-shadow:var(--shadow-sm)}
.ic-card .ic{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--purple-soft),#fff);border:1px solid var(--line);display:grid;place-items:center;color:var(--purple-deep);margin-bottom:16px}
.ic-card h3{font-size:20px;margin-bottom:8px}
.ic-card p{color:var(--ink2);font-size:15px}
@media (max-width:860px){.grid3{grid-template-columns:1fr}}

/* quote */
.quote{background:#fff;border:1px solid var(--line);border-left:6px solid var(--purple);border-radius:var(--r-lg);padding:32px 36px;max-width:880px}
.quote p{font-size:20px;line-height:1.5}
.quote footer{margin-top:14px;font-size:14px;color:var(--ink3);font-weight:700;border:0;padding:0}

/* cta band */
.cta-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.cta-band h2{max-width:14ch}

/* contact */
.contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
form{display:grid;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:30px;box-shadow:var(--shadow)}
.band-dark form{background:var(--dark2);border-color:rgba(255,255,255,.12)}
label{display:grid;gap:6px;font-size:14px;font-weight:700}
input,select,textarea{font:inherit;font-size:16px;padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--purple)}
.band-dark input,.band-dark select,.band-dark textarea{background:var(--dark);border-color:rgba(255,255,255,.18);color:var(--dark-ink)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:900px){.contact .wrap{grid-template-columns:1fr}}
@media (max-width:560px){.two{grid-template-columns:1fr}}
.contact-list{display:flex;flex-direction:column;gap:14px;margin-top:26px;font-size:16px}
.contact-list a{font-weight:700;text-decoration:none}

/* footer */
.footer{background:var(--dark);color:var(--dark-mute);padding:64px 0 36px;font-size:14px}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px}
.footer h4{color:#fff;font-size:15px;margin-bottom:12px}
.footer a{display:block;text-decoration:none;padding:4px 0}
.footer a:hover{color:#fff}
.footer .logo{color:#fff;margin-bottom:12px}
.footer .base{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
@media (max-width:760px){.footer .cols{grid-template-columns:1fr 1fr}}

/* bigger device variant (service pages) */
.hv.big .device{width:96%;left:0;top:12%;--rot:-1.5deg;border:6px solid #fff;border-radius:22px;box-shadow:0 50px 90px -30px rgba(23,20,58,.55),0 0 0 1px rgba(23,20,58,.08)}
.hv.big .panel{inset:4% 0 4% 8%}

/* hero: a website assembling itself */
.build{position:relative;max-width:600px;width:100%;justify-self:end}
.bframe{position:relative;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 50px 100px -40px rgba(42,36,102,.45),0 0 0 8px rgba(106,90,224,.06);overflow:visible}
.bbar{height:38px;background:#F6F5FB;border-bottom:1px solid var(--line);border-radius:22px 22px 0 0;display:flex;align-items:center;gap:6px;padding:0 14px}
.bbar i{width:10px;height:10px;border-radius:50%;background:#DAD8E8}
.bbar b{margin-left:10px;flex:1;height:20px;border-radius:7px;background:#fff;border:1px solid var(--line);font-weight:500;font-size:11px;color:var(--ink3);display:flex;align-items:center;padding:0 9px}
.bpage{padding:18px 22px 22px;border-radius:0 0 22px 22px;background:#fff;min-height:330px}
.bnav{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.blogo{width:26px;height:26px;border-radius:8px;background:var(--purple)}
.bl{height:8px;width:38px;border-radius:4px;background:#E3E1F0}
.bbtn{margin-left:auto;height:22px;width:74px;border-radius:999px;background:var(--purple)}
.bhero{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:center}
.bh{height:22px;border-radius:7px;background:var(--ink);margin-bottom:9px;transform-origin:left;transform:scaleX(0)}
.bh1{width:92%}.bh2{width:70%}
.bp{height:9px;border-radius:5px;background:#D9D7E8;margin-top:8px;transform-origin:left;transform:scaleX(0)}
.bp1{width:96%}.bp2{width:78%}
.bcta{display:flex;gap:8px;margin-top:16px}
.bc1,.bc2{height:26px;border-radius:999px;transform:scale(.6);opacity:0}
.bc1{width:92px;background:var(--purple)}.bc2{width:80px;background:#fff;border:2px solid var(--line)}
.bimg{aspect-ratio:4/3.4;border-radius:14px;background:linear-gradient(160deg,#EAE6FF,#DDF6F1);position:relative;overflow:hidden;opacity:0;transform:translateY(12px)}
.bimg svg{position:absolute;inset:0;width:100%;height:100%}
.bsun{position:absolute;inset:0;background:linear-gradient(180deg,rgba(106,90,224,0) 55%,rgba(27,24,64,.35));pointer-events:none}
.bstrip{display:flex;gap:10px;margin-top:20px}
.bstrip>span{flex:1;height:44px;border-radius:9px;background:#F3F2F9;border:1px solid var(--line);opacity:0;transform:translateY(8px)}
.brev{flex:1.6;height:44px;display:flex;align-items:center;gap:8px;padding:0 10px;border-radius:9px;background:#fff;border:1px solid var(--line);opacity:0;transform:translateY(8px);white-space:nowrap;overflow:hidden}
.bfaces{display:flex}
.bfaces i{display:block;width:26px;height:26px;border-radius:50%;border:2px solid #fff;margin-left:-8px;position:relative}
.bfaces i::before{content:"";position:absolute;left:7px;top:5px;width:8px;height:8px;border-radius:50%;background:#fff;opacity:.9}
.bfaces i::after{content:"";position:absolute;left:4px;top:14px;width:14px;height:10px;border-radius:7px 7px 0 0;background:#fff;opacity:.9}
.bfaces i:first-child{margin-left:0}
.bstars{color:var(--amber);font-size:13px;letter-spacing:1px}
.btxt{font-size:12px;font-weight:700;color:var(--ink2)}
.bcall,.bfound{position:absolute;background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 14px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px;box-shadow:var(--shadow);opacity:0}
.bcall{right:-18px;bottom:40px;color:var(--ink)}
.bfound{left:-18px;top:54px;color:#0F5F53}
.bfound svg{color:var(--teal)}
.bring{width:28px;height:28px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center}
/* timeline: 11s loop */
.bh1{animation:bx 11s ease-in-out infinite}.bh2{animation:bx 11s ease-in-out infinite .35s}
.bp1{animation:bx 11s ease-in-out infinite .8s}.bp2{animation:bx 11s ease-in-out infinite 1s}
.bc1{animation:bpop 11s cubic-bezier(.2,.9,.3,1.3) infinite 1.5s}.bc2{animation:bpop 11s cubic-bezier(.2,.9,.3,1.3) infinite 1.7s}
.bimg{animation:bfade 11s ease infinite 2.1s}
.brev{animation:bfade 11s ease infinite 2.7s}.bstrip>span:nth-child(2){animation:bfade 11s ease infinite 2.9s}.bstrip>span:nth-child(3){animation:bfade 11s ease infinite 3.1s}
.bfound{animation:bchip 11s ease infinite 3.8s}
.bcall{animation:bchip 11s ease infinite 5s}
.bring{animation:bring 11s ease infinite 5s}
@keyframes bx{0%{transform:scaleX(0)}6%{transform:scaleX(1)}88%{transform:scaleX(1);opacity:1}94%,100%{transform:scaleX(1);opacity:0}}
@keyframes bpop{0%{transform:scale(.6);opacity:0}5%{transform:scale(1);opacity:1}86%{opacity:1}92%,100%{opacity:0}}
@keyframes bfade{0%{opacity:0;transform:translateY(12px)}6%{opacity:1;transform:none}84%{opacity:1}90%,100%{opacity:0}}
@keyframes bchip{0%{opacity:0;transform:translateY(10px) scale(.9)}5%{opacity:1;transform:none}70%{opacity:1}76%,100%{opacity:0}}
@keyframes bring{0%,4%{transform:rotate(0)}6%{transform:rotate(-14deg)}8%{transform:rotate(14deg)}10%{transform:rotate(-10deg)}12%{transform:rotate(10deg)}14%{transform:rotate(0)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.build *{animation:none!important}.bh,.bp{transform:none}.bc1,.bc2,.bimg,.bstrip>span,.brev,.bcall,.bfound{opacity:1;transform:none}}
@media (max-width:960px){.build{justify-self:center;max-width:560px}.bcall{right:6px}.bfound{left:6px}}

/* hero art (3D illustration slot) */
.art{width:100%;max-width:600px;justify-self:end}
.art-panel{position:relative;aspect-ratio:1/0.92;border-radius:40px;background:linear-gradient(150deg,#EEEBFF 0%,#DCD6FF 45%,#D9F4EE 100%);overflow:hidden;box-shadow:0 50px 100px -50px rgba(42,36,102,.5),inset 0 0 0 1px rgba(255,255,255,.7)}
.orb{position:absolute;border-radius:50%;filter:blur(2px)}
.o1{width:46%;height:46%;right:-8%;top:-10%;background:radial-gradient(circle at 35% 30%,#9C8FF6,#6A5AE0 55%,#4A3DBB);box-shadow:0 40px 80px -30px rgba(74,61,187,.6);animation:float 8s ease-in-out infinite}
.o2{width:22%;height:22%;left:8%;bottom:10%;background:radial-gradient(circle at 35% 30%,#7FE0D0,#2BB8A4 60%,#1B8F80);box-shadow:0 30px 60px -20px rgba(43,184,164,.6);animation:float 7s ease-in-out infinite -3s}
.o3{width:12%;height:12%;left:30%;top:14%;background:radial-gradient(circle at 35% 30%,#FFE0A8,#F2B65C 60%,#C98A2E);animation:float 6s ease-in-out infinite -1.5s}
.art-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;z-index:2}
.art-chip{position:absolute;z-index:3;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.9);border-radius:16px;padding:12px 16px;box-shadow:0 20px 40px -20px rgba(42,36,102,.45);display:flex;flex-direction:column;line-height:1.2;animation:float 7s ease-in-out infinite}
.art-chip b{font-size:15px;color:var(--ink)}
.art-chip small{font-size:12px;color:var(--ink3);font-weight:600}
.a1{left:6%;top:8%;animation-delay:-2s}
.a2{right:6%;bottom:8%;animation-delay:-4.5s}
@media (max-width:960px){.art{justify-self:center;max-width:560px}}
@media (prefers-reduced-motion:reduce){.orb,.art-chip{animation:none}}

/* team (stacked) */
.team{display:flex;flex-direction:column;gap:32px}
.member{display:grid;grid-template-columns:400px 1fr;gap:48px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:40px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.member::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:linear-gradient(180deg,var(--purple),var(--teal))}
.member.flip{grid-template-columns:1fr 400px}
.member.flip .portrait{order:2}
.member.flip::before{left:auto;right:0}
.portrait{position:relative;border-radius:24px;padding:10px;background:linear-gradient(150deg,var(--purple-soft),var(--teal-soft))}
.portrait img{aspect-ratio:4/5;object-fit:cover;object-position:top;border-radius:16px;width:100%;box-shadow:0 30px 60px -30px rgba(42,36,102,.5)}
.bio h3{font-size:clamp(30px,3vw,40px);margin:6px 0 14px}
.bio .kicker{margin-bottom:0}
.bio .lede{font-size:19px;color:var(--ink);font-weight:600;line-height:1.5;margin-bottom:14px}
.bio p{color:var(--ink2);font-size:16px;line-height:1.6}
.marks-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.marks-row strong{display:block;font-size:26px;font-weight:800;letter-spacing:-0.02em;color:var(--purple-deep)}
.marks-row span{font-size:13px;color:var(--ink3);font-weight:600}
@media (max-width:960px){.member,.member.flip{grid-template-columns:1fr;padding:26px}.member.flip .portrait{order:0}.portrait{max-width:360px}}
@media (max-width:560px){.marks-row{grid-template-columns:1fr}}

.mark-img{width:38px;height:38px;object-fit:contain}
.footer .mark-img{width:34px;height:34px}

/* ===== Variant: ink + lime, violet secondary ===== */
:root{
  --bg:#FFFFFF; --mist:#F4F4F6; --lav:#ECECF0; --line:#E1E1E7;
  --ink:#12102E; --ink2:#4E4C63; --ink3:#83819A;
  --purple:#B8E62E; --purple-deep:#4A3DBB; --purple-ink:#12102E; --purple-soft:#F2F9D9;
  --teal:#4A3DBB; --teal-soft:#EAE7FF; --amber:#F2B65C;
  --dark:#12102E; --dark2:#1C1946; --dark-ink:#F5F5F7; --dark-mute:#A9A7C2;
  --shadow:0 24px 60px -28px rgba(18,16,46,.35); --shadow-sm:0 10px 30px -18px rgba(18,16,46,.3);
}
.btn-primary{background:var(--purple);color:#12102E;box-shadow:0 14px 30px -12px rgba(184,230,46,.7)}
.btn-primary:hover{background:#A6D51E}
.links .btn{color:#12102E}
.links .btn:hover{background:#A6D51E}
.logo .mark{background:var(--dark)}
.kicker{color:#3F5A00;background:var(--purple-soft)}
.kicker::before{background:var(--purple-deep)}
.band-lav{background:linear-gradient(180deg,#F4F4F6,#FFFFFF)}
.band-purple{background:linear-gradient(135deg,#12102E 0%,#1C1946 60%,#2A2472 100%)}
.btn-white{color:#12102E}
.band-purple .btn-white{background:var(--purple)}
.market.home::before{background:linear-gradient(90deg,#B8E62E,#4A3DBB)}
.market.pro::after{background:radial-gradient(closest-side,rgba(184,230,46,.35),transparent)}
.market .go{color:#3F5A00}.market.pro .go{color:#B8E62E}
.rail .meta .tag{background:var(--purple-soft);color:#3F5A00}
.rail .meta .tag.pro{background:#EAE7FF;color:#4A3DBB}
.step.active .n,.step.done .n{background:var(--purple);border-color:var(--purple);color:#12102E}
.step .bar{background:var(--purple)}
.canvas{background:radial-gradient(120% 90% at 30% 20%,#2A2472,#0E0C26 70%)}
.tabs button[aria-selected="true"]{background:var(--dark);color:#fff;box-shadow:none}
.tier.feature{background:linear-gradient(165deg,#12102E,#2A2472);color:#fff}
.tier .badge{background:var(--purple);color:#12102E}
.tier li::before{background:var(--purple)}
.tier.feature li::before{background:var(--purple)}
.stat::after{background:linear-gradient(90deg,#B8E62E,#4A3DBB)}
.art-panel{background:linear-gradient(150deg,#F4F4F6 0%,#E9E9EE 45%,#F2F9D9 100%)}
.o1{background:radial-gradient(circle at 35% 30%,#3A3480,#1C1946 55%,#12102E);box-shadow:0 40px 80px -30px rgba(18,16,46,.6)}
.o2{background:radial-gradient(circle at 35% 30%,#D6F56B,#B8E62E 60%,#8DB915);box-shadow:0 30px 60px -20px rgba(184,230,46,.6)}
.o3{background:radial-gradient(circle at 35% 30%,#9C8FF6,#6A5AE0 60%,#4A3DBB)}
.art-chip b{color:#12102E}
.trusted{background:linear-gradient(90deg,#F4F4F6,#F2F9D9 50%,#F4F4F6)}
.trusted p{color:#3F5A00}
.ic-card .ic{background:linear-gradient(135deg,#F2F9D9,#fff);color:#3F5A00}
.person .role{color:#3F5A00;background:var(--purple-soft)}
.member::before{background:linear-gradient(180deg,#B8E62E,#4A3DBB)}
.portrait{background:linear-gradient(150deg,#F2F9D9,#EAE7FF)}
.marks-row strong{color:#12102E}
.cred{border-left-color:#B8E62E}
.quote{border-left-color:#B8E62E}
.footer .mark-img{filter:none}
input:focus,select:focus,textarea:focus{border-color:#4A3DBB}
.member.flip::before{background:linear-gradient(180deg,#4A3DBB,#B8E62E)}

/* violet scaled back to tertiary */
:root{--teal:#12102E; --teal-soft:#F2F9D9; --purple-deep:#12102E}
.kicker::before{background:#B8E62E}
.ic-card .ic{background:#12102E;border-color:#12102E;color:#B8E62E}
.rail .meta .tag.pro{background:#12102E;color:#B8E62E}
.market .go{color:#12102E}
.stat::after{background:linear-gradient(90deg,#B8E62E,#12102E)}
.member::before,.member.flip::before{background:linear-gradient(180deg,#B8E62E,#12102E)}
.portrait{background:linear-gradient(150deg,#F2F9D9,#ECECF0)}
.person .role{color:#12102E;background:#F2F9D9}
.o3{background:radial-gradient(circle at 35% 30%,#9C8FF6,#6A5AE0 60%,#4A3DBB)} /* the one violet touch */
.marks-row strong{color:#12102E}
.bio .kicker,.kicker{color:#12102E;background:#F2F9D9}
input:focus,select:focus,textarea:focus{border-color:#12102E}

/* CTA band: lime gradient between white sections and the ink footer */
.band-purple{background:linear-gradient(135deg,#CFF25A 0%,#B8E62E 55%,#9CCB1F 100%);color:#12102E}
.band-purple .lead{color:#3F5A00}
.band-purple .btn-white{background:#12102E;color:#FFFFFF;box-shadow:0 14px 30px -14px rgba(18,16,46,.6)}
.band-purple .btn-ghost{border-color:rgba(18,16,46,.35);color:#12102E}
.band-purple .kicker{background:rgba(18,16,46,.1);color:#12102E}
.footer{border-top:6px solid #B8E62E;background:linear-gradient(180deg,#12102E 0%,#0C0A22 100%)}

/* services dropdown */
.dd{position:relative}
.dd-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:999px;font-weight:600;color:var(--ink2);font-size:15px;background:transparent;border:0;cursor:pointer;font-family:inherit}
.dd-btn:hover,.dd.active .dd-btn{background:var(--mist);color:var(--ink)}
.dd-menu{display:none;position:absolute;left:0;top:calc(100% + 8px);min-width:320px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:8px;box-shadow:var(--shadow);z-index:60}
.dd:hover .dd-menu,.dd.open .dd-menu{display:block}
.dd-menu a{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:12px;color:var(--ink)}
.dd-menu a b{font-size:15px;font-weight:700}
.dd-menu a small{font-size:13px;color:var(--ink3);font-weight:500}
.dd-menu a:hover,.dd-menu a[aria-current="page"]{background:var(--mist)}
@media (max-width:960px){.dd{display:contents}.dd-btn{display:none}.dd-menu{display:block;position:static;box-shadow:none;border:0;padding:0;min-width:0}.dd-menu a{padding:12px 12px}.dd-menu a small{display:none}}
/* case studies */
.cs{padding:96px 0;border-top:1px solid var(--line)}
.cs:nth-of-type(even){background:var(--mist)}
.cs-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.cs.flip .cs-grid{grid-template-columns:.95fr 1.05fr}
.cs.flip .cs-shot{order:2}
.cs-shot{display:block;border-radius:var(--r-xl);background:var(--tone,var(--lav));padding:36px 36px 0;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease}
.cs-shot:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.cs-shot img{border-radius:14px 14px 0 0;box-shadow:0 24px 50px -20px rgba(0,0,0,.5);aspect-ratio:16/10;object-fit:cover;object-position:top}
.cs-body h2{margin:10px 0 24px}
.cs-steps{display:flex;flex-direction:column;gap:18px;margin-bottom:26px}
.cs-steps>div{padding-left:22px;border-left:4px solid var(--purple)}
.cs-steps>div:nth-child(2){border-left-color:var(--ink)}
.cs-steps>div:nth-child(3){border-left-color:var(--purple-deep)}
.cs-steps b{display:block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:6px}
.cs-steps p{color:var(--ink2);font-size:16px;line-height:1.55}
@media (max-width:900px){.cs-grid,.cs.flip .cs-grid{grid-template-columns:1fr}.cs.flip .cs-shot{order:0}}

/* dropdown: no hover gap between the button and the menu */
.dd{padding-bottom:10px;margin-bottom:-10px}
.dd-menu{top:100%;margin-top:0}
.dd-menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}