@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/poppins-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-latin-700-normal.woff2) format('woff2')}

:root{
  --ink:#1c1c1c; --card:#262626; --fg:#f4f4f4; --mut:#d6d6d6; --dim:#8a8a8a;
  --g-green:linear-gradient(45deg,#067a4e 0%,#08ae6e 48%,#e9f06a 100%);
  --g-indigo:linear-gradient(45deg,#2e2fbd 0%,#484fce 42%,#b9a9f2 78%,#86e2f2 100%);
  --g-orange:linear-gradient(45deg,#b34a03 0%,#ea6409 50%,#fcd9b4 100%);
  --ease:cubic-bezier(.6,0,.2,1); --d1:240ms; --d2:480ms; --d3:720ms;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--fg);font-family:'Poppins','Century Gothic',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block}
.wrap{max-width:1280px;margin:0 auto;padding:0 40px}
.label{font-size:13px;font-weight:300;letter-spacing:2.5px;color:var(--dim)}
.pill{display:inline-block;background:var(--fg);color:var(--ink);font-weight:700;border-radius:999px;padding:16px 36px;font-size:16px;transition:transform var(--d1) var(--ease),background var(--d1) var(--ease);cursor:pointer}
.pill:hover{transform:translateY(-2px)}
.pill:active{transform:translateY(0) scale(.98)}

/* nav */
nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:background var(--d2) var(--ease),backdrop-filter var(--d2) var(--ease)}
nav.on{background:rgba(28,28,28,.82);backdrop-filter:blur(14px)}
.nav-in{max-width:1280px;margin:0 auto;padding:22px 40px;display:flex;align-items:center;justify-content:space-between}
.nav-links{display:flex;align-items:center;gap:36px}
.nav-links a{font-size:15px;font-weight:600;color:var(--mut);transition:color var(--d1) var(--ease)}
.nav-links a:hover{color:var(--fg)}
.nav-links a.pill{padding:12px 26px;font-size:15px;color:var(--ink)}

/* reveal system (progressive enhancement: without JS everything is visible) */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity var(--d3) var(--ease),transform var(--d3) var(--ease)}
.js .rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:120ms}.rv-d2{transition-delay:240ms}.rv-d3{transition-delay:360ms}

/* hero */
.hero{padding:150px 0 0}
h1{font-size:clamp(44px,6.6vw,96px);font-weight:700;line-height:1.14;letter-spacing:-.03em;max-width:21ch}
.hero-sub{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;margin-top:22px}
.hero-sub .big{font-size:clamp(17px,1.8vw,26px);color:var(--mut)}
.reel{position:relative;margin-top:52px;height:clamp(380px,45vw,660px);border-radius:clamp(170px,22vw,320px) clamp(170px,22vw,320px) 32px 32px;background:var(--g-indigo);overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:pointer}
.reel iframe,.work-reel iframe{position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%;height:auto;aspect-ratio:16/9;min-height:100%;border:0}
.playmark{position:relative;width:clamp(84px,9vw,120px);transition:transform var(--d1) var(--ease)}
.reel:hover .playmark{transform:scale(1.06)}
.playmark svg.sil{width:100%;height:auto;display:block}
.playmark .tri{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:28%}
.reel-tag{position:absolute;left:clamp(18px,3vw,44px);bottom:clamp(18px,2.4vw,34px);background:rgba(28,28,28,.85);color:var(--fg);font-size:14px;font-weight:600;padding:11px 24px;border-radius:999px;pointer-events:none}
.hero-cta{margin-top:44px}

/* marquee */
.clients{padding:96px 0 50px;text-align:center}
.mq{position:relative;overflow:hidden;margin-top:40px}
.mq-track{display:flex;width:max-content;opacity:.55;animation:mq 45s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
.mq-set{display:flex;align-items:center;gap:72px;padding-right:72px}
.mq-set img{width:auto}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq::before,.mq::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:1;pointer-events:none}
.mq::before{left:0;background:linear-gradient(90deg,var(--ink),rgba(28,28,28,0))}
.mq::after{right:0;background:linear-gradient(270deg,var(--ink),rgba(28,28,28,0))}

/* sections */
section, section.wrap{padding-top:150px}
h2{font-size:clamp(30px,4.3vw,62px);font-weight:700;line-height:1.14;letter-spacing:-.024em}
.sec-head{display:flex;flex-direction:column;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:56px}
.pcard{background:var(--card);border-radius:24px;padding:36px;display:flex;flex-direction:column;gap:12px}
.pcard b{font-size:18px;font-weight:700}
.pcard p{font-size:17px;line-height:1.55;color:var(--mut)}
.statement-row{display:flex;align-items:stretch;gap:28px;margin-top:56px}
.sel-frame{flex:1;position:relative;padding:48px 56px;border:2px dashed #4a4a4a;display:flex;align-items:center}
.sel-frame .stmt{font-size:clamp(24px,2.8vw,40px);font-weight:400;line-height:1.3}
.dot{position:absolute;width:26px;height:26px;border-radius:999px;background:var(--fg);display:flex;align-items:center;justify-content:center}
.dot .p{width:10px;height:10px;border-radius:999px;background:var(--ink);will-change:transform}
.dot.tl{left:-13px;top:-13px}.dot.tr{right:-13px;top:-13px}.dot.bl{left:-13px;bottom:-13px}.dot.br{right:-13px;bottom:-13px}
.stat{width:420px;flex-shrink:0;background:var(--g-green);border-radius:160px 160px 24px 24px;padding:64px 44px 36px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;color:#fff}
.stat .num{font-size:92px;font-weight:700;line-height:1}
.stat p{font-size:15px;font-weight:500;line-height:1.5;max-width:300px}
.stat .src{font-size:13px;color:rgba(255,255,255,.75)}

/* shift (Lottie with static fallback) */
.shift-anim{display:none;position:relative;flex-shrink:0;width:416px;height:274px}
.shift-anim .lot{position:absolute;left:-38px;top:-108px;width:490px;height:490px}
.js .shift-art{display:none}
.js .shift-anim{display:block}
/* shift */
.shift{display:flex;align-items:center;gap:72px}
.shift-art{position:relative;width:460px;height:250px;flex-shrink:0}
.shift-art>div{position:absolute;transition:transform var(--d3) var(--ease) 260ms}
.shift-art svg{width:186px;height:auto;display:block}
.shift-art.in .sa-o,html:not(.js) .sa-o{transform:translateX(50px)}
.shift-art.in .sa-i,html:not(.js) .sa-i{transform:translateX(25px)}
.shift:hover .sa-o,.shift:hover .sa-i,.shift:hover .sa-g{transform:translateX(0);transition-delay:0ms}
.shift-txt{display:flex;flex-direction:column;gap:16px}
.shift-txt h2{font-size:clamp(28px,3.1vw,44px);line-height:1.18}
.shift-txt p{font-size:20px;color:var(--mut);line-height:1.5;max-width:620px}

/* chapter animations (Lottie with static fallback) */
.ch-anim{display:none;position:relative;flex-shrink:0;width:140px;height:120px}
.ch-anim .lot{position:absolute;left:-95px;top:0;width:240px;height:120px}
.js .ch-static{display:none}
.js .ch-anim{display:block}
/* system chapters */
.sys-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.sys-head p{font-size:20px;color:var(--mut);line-height:1.5;max-width:420px;padding-bottom:8px}
.chapters{margin-top:56px}
.chapter{padding:72px 0}
.chapter .wrap{display:flex;align-items:center;gap:56px}
.ch-static{display:flex;align-items:center;gap:56px;flex-shrink:0}
.ch-num{font-size:clamp(90px,14vw,200px);font-weight:700;line-height:.8;width:130px;flex-shrink:0}
.ch-plate{position:relative;width:96px;height:108px;flex-shrink:0}
.ch-plate svg.sil{width:96px;height:auto;display:block}
.ch-plate .icon{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%)}
.ch-main{display:flex;flex-direction:column;gap:12px;max-width:500px}
.ch-label{font-size:13px;font-weight:300;letter-spacing:2.5px;text-transform:uppercase;opacity:.75}
.ch-main h3{font-size:clamp(28px,3vw,44px);font-weight:700;letter-spacing:-.02em}
.ch-main p{font-size:17px;font-weight:500;line-height:1.55}
.ch-own{margin-left:auto;width:320px;flex-shrink:0;padding-left:28px;font-size:15px;font-weight:500;line-height:1.6}
.chapter.c1{background:var(--g-green);color:var(--ink)}
.chapter.c2{background:var(--g-indigo);color:#fff}
.chapter.c3{background:var(--g-orange);color:var(--ink)}
.c1 .ch-num,.c3 .ch-num{color:rgba(28,28,28,.18)}
.c2 .ch-num{color:rgba(28,28,28,.18)}
.c1 .ch-own,.c3 .ch-own{border-left:3px solid rgba(28,28,28,.4)}
.c2 .ch-own{border-left:3px solid rgba(255,255,255,.5)}

/* layer toggles + expandable panels */
.ltoggle{display:inline-flex;align-items:center;gap:10px;margin-top:6px;background:transparent;border:2px solid currentColor;color:inherit;border-radius:999px;padding:11px 20px;font:600 15px/1 'Poppins',sans-serif;cursor:pointer;transition:background var(--d1) var(--ease),color var(--d1) var(--ease);align-self:flex-start}
.c1 .ltoggle:hover,.c3 .ltoggle:hover{background:rgba(28,28,28,.12)}
.c2 .ltoggle:hover{background:rgba(255,255,255,.14)}
.ltoggle .chev{transition:transform var(--d2) var(--ease)}
.ltoggle .t-close{display:none}
.ltoggle[aria-expanded="true"] .t-open{display:none}
.ltoggle[aria-expanded="true"] .t-close{display:inline}
.ltoggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.lpanel{background:var(--card);display:grid;grid-template-rows:1fr}
.js .lpanel{grid-template-rows:0fr;transition:grid-template-rows var(--d3) var(--ease)}
.js .lpanel.open{grid-template-rows:1fr}
.lpanel-in{overflow:hidden;min-height:0}
.lbody{padding:64px 40px 72px}
.llead{font-size:clamp(20px,1.9vw,27px);font-weight:500;line-height:1.45;max-width:820px;letter-spacing:-.01em}
.lsub{margin-top:18px;font-size:13px;font-weight:300;letter-spacing:2.5px;text-transform:uppercase;color:var(--dim)}
.lsec-label{margin-top:52px;font-size:13px;font-weight:300;letter-spacing:2.5px;text-transform:uppercase;color:var(--dim)}
.lsec-label + .lsteps{margin-top:20px}
.lsteps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px;margin-top:52px}
[data-layer="1"] .lsteps{grid-template-columns:repeat(3,minmax(0,1fr))}
.lstep{display:flex;flex-direction:column;gap:10px;border-top:1px solid #3a3a3a;padding-top:20px}
.lnum{font-size:13px;font-weight:700;letter-spacing:2px}
[data-layer="1"] .lnum{color:#2fbf85}[data-layer="2"] .lnum{color:#8a90e8}[data-layer="3"] .lnum{color:#f57a24}
.lstep h4{font-size:20px;font-weight:700;letter-spacing:-.01em}
.lstep p,.lnote,.ldef p,.lgive p{font-size:15.5px;line-height:1.65;color:var(--mut)}
.lnote{margin-top:32px;max-width:760px}
.ldef{margin-top:48px;max-width:820px}
.ldef h3{font-size:26px;font-weight:700;letter-spacing:-.015em}
.ldef p{margin-top:16px;font-size:17px}
.lgives{margin-top:44px}
.lgives-label{font-size:13px;font-weight:300;letter-spacing:2.5px;color:var(--dim);text-transform:uppercase}
.lgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 40px;margin-top:22px}
.lgive b{display:block;font-size:17px;font-weight:700;line-height:1.35}
.lgive p{margin-top:8px}
.lown{margin-top:48px;border-left:3px solid #3a3a3a;padding-left:28px;max-width:820px}
[data-layer="1"] .lown{border-color:#2fbf85}[data-layer="2"] .lown{border-color:#8a90e8}[data-layer="3"] .lown{border-color:#f57a24}
.lown-label{font-size:13px;font-weight:300;letter-spacing:2.5px;color:var(--dim);text-transform:uppercase}
.lown p{margin-top:10px;font-size:17px;line-height:1.6}
.lbridge{margin-top:40px;font-style:italic;font-size:15px;color:var(--dim)}
/* cta banner */
.banner{margin-top:130px;background:var(--card);border-radius:32px;padding:46px 64px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.banner b{font-size:clamp(22px,2.1vw,30px);font-weight:700;letter-spacing:-.02em}

/* work */
.work-head{display:flex;align-items:flex-end;justify-content:space-between}
.work-note{font-size:16px;font-weight:500;color:var(--dim);padding-bottom:10px}
.work-reel{position:relative;margin-top:48px;height:260px;border-radius:130px 130px 20px 20px;background:var(--g-orange);overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:pointer}
.work-reel .playmark{width:72px}

/* close */
.close-sec{padding-top:170px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px}
.close-sec .lines{font-size:clamp(17px,1.7vw,24px);font-weight:400;line-height:1.5;color:var(--mut);max-width:640px}
.close-sec .build{font-size:clamp(34px,4.6vw,66px);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.close-sec .cta{margin-top:14px}
.close-sec .pill{font-size:18px;padding:20px 44px}
.spend{font-weight:700;color:#f57a24}.asset{font-weight:700;color:#2fbf85}.yours{color:#8a90e8}

/* footer */
footer{margin-top:150px;border-top:1px solid #3a3a3a}
.foot-in{max-width:1280px;margin:0 auto;padding:48px 40px 56px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot-brand{display:flex;align-items:center;gap:18px}
.foot-links{display:flex;align-items:center;gap:30px}
.foot-links a{display:flex;align-items:center;color:var(--mut);font-size:15px;font-weight:500;transition:color var(--d1) var(--ease),transform var(--d1) var(--ease)}
.foot-links a:hover{color:var(--fg);transform:translateY(-2px)}
.copy{font-size:14px;color:var(--dim)}

/* partners */
.partners-head{display:flex;flex-direction:column;gap:18px}
.partners-head p{font-size:20px;color:var(--mut);line-height:1.5;max-width:620px}
.pgrid{display:flex;flex-wrap:wrap;gap:28px;margin-top:56px}
.ptile{display:block;width:408px;height:300px;border-radius:190px 190px 24px 24px;overflow:hidden;background:var(--card);position:relative;flex-shrink:0}
.ptile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--d3) var(--ease)}
.ptile:hover img{transform:scale(1.04)}
.ptile .tag{position:absolute;left:24px;bottom:20px;background:rgba(28,28,28,.85);color:var(--fg);font-size:14px;font-weight:600;padding:9px 20px;border-radius:999px;pointer-events:none}
/* privacy */
.legal{max-width:760px}
.legal h1{font-size:clamp(36px,4.6vw,62px);font-weight:700;line-height:1.14;letter-spacing:-.024em}
.legal .meta{color:var(--dim);font-size:15px;margin-top:16px}
.legal h2{font-size:22px;font-weight:700;margin-top:48px;letter-spacing:-.01em}
.legal p,.legal li{font-size:17px;line-height:1.65;color:var(--mut);margin-top:14px}
.legal ul{padding-left:22px}
.legal a{text-decoration:underline;text-underline-offset:3px}
.page-top{padding-top:150px}
/* responsive */
@media(max-width:1023px){
  .chapter .wrap{flex-wrap:wrap;gap:28px}
  .lsteps,[data-layer="1"] .lsteps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ptile{width:calc(50% - 14px)}
  .ch-own{margin-left:0;width:100%;flex-shrink:1;min-width:0}
  .statement-row{flex-direction:column}
  .stat{width:100%;border-radius:120px 120px 18px 18px;padding:84px 28px 30px}
  .shift{flex-direction:column-reverse;align-items:flex-start;gap:40px}
  .sys-head{flex-direction:column;align-items:flex-start}
  .banner{flex-direction:column;text-align:center}
}
@media(max-width:640px){
  .wrap{padding:0 24px}
  section, section.wrap{padding-top:96px}
  .nav-links a:not(.pill){display:none}
  .nav-in{padding:16px 24px}
  .nav-links a.pill{padding:10px 18px;font-size:13px}
  .ch-num{display:none}
  .lbody{padding:44px 24px 52px}
  .lsteps,[data-layer="1"] .lsteps{grid-template-columns:1fr;gap:24px;margin-top:36px}
  .lgrid{grid-template-columns:1fr}
  .ch-anim{width:92px;height:78px}
  .ch-anim .lot{left:-60px;width:155px;height:78px}
  .shift-anim{width:304px;height:200px}
  .shift-anim .lot{left:-27px;top:-79px;width:358px;height:358px}
  .ptile{width:100%;height:240px;border-radius:120px 120px 18px 18px}
  .ch-plate{width:62px;height:70px}
  .ch-plate svg.sil{width:62px}
  .ch-plate .icon{width:28px;height:28px}
  .shift-art{width:330px;height:190px}
  .shift-art.in .sa-o{transform:translateX(30px)}
  .shift-art.in .sa-i{transform:translateX(15px)}
  .shift-art svg{width:136px}
  .sa-o{left:164px!important;top:0!important}
  .sa-i{left:82px!important;top:14px!important}
  .sa-g{left:0!important;top:28px!important}
  .grid3{grid-template-columns:1fr;margin-top:36px}
  .hero{padding-top:120px}
  .reel{border-radius:170px 170px 20px 20px}
  .mq-set{gap:40px;padding-right:40px}
  .mq-set img{transform:scale(.78);transform-origin:center}
  .mq::before,.mq::after{width:48px}
  .ch-num{width:auto}
  .chapter{padding:44px 0}
  .stat .num{font-size:64px}
  .close-sec{padding-top:110px}
  footer{margin-top:100px}
  .work-reel{height:200px;border-radius:100px 100px 16px 16px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .lpanel{transition:none}
  .js .shift-art{display:block}.js .shift-anim{display:none}
  .js .ch-static{display:flex}.js .ch-anim{display:none}
  .shift-art .sa-o{transform:translateX(50px)}
  .shift-art .sa-i{transform:translateX(25px)}
  .rv{opacity:1;transform:none;transition:none}
  .mq-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  *{transition:none!important}
}