*{box-sizing:border-box;margin:0;padding:0}
:root{--ink:#154359;--teal:#066377;--g1:#F0F0F0;--g2:#F0F5F7;--stroke:rgba(6,99,119,.25);--grad:linear-gradient(294deg,#185B7B 20%,#4BBDF0)}
html,body{height:100%;font-family:'Inter',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;background:#fff;color:var(--ink)}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img,svg{display:block;max-width:100%}
.firs{font-family:'TT Firs Neue','Inter',system-ui,sans-serif}
.shell{height:100vh;height:100dvh;background:#fff;padding:12px}
.frame{position:relative;width:100%;height:100%;overflow:hidden;border-radius:28px;background:#fff}
.scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.scroll::-webkit-scrollbar{display:none}
@media(min-width:640px){.shell{padding:20px}.frame{border-radius:36px}}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* chamfers */
.ch10{clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.ch8{clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.ch14{clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;gap:8px;padding:12px 20px;font-size:11px;text-transform:uppercase;letter-spacing:.14em;font-weight:500;color:#fff;background:var(--teal);overflow:hidden;transition:filter .2s,transform .2s}
.btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);opacity:0}
.btn:hover{filter:brightness(1.2);transform:translateY(-1px)}
.btn:hover::after{opacity:1;animation:sweep 1.1s linear infinite}
.btn svg{width:14px;height:14px;transition:transform .2s}
.btn:hover svg{transform:translate(2px,-2px)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn.ghost::after{background:linear-gradient(100deg,transparent,rgba(21,67,89,.12),transparent)}
.btn.ghost:hover{filter:none;background:rgba(21,67,89,.05)}
@keyframes sweep{from{left:-60%}to{left:120%}}

/* header */
.topbar{position:relative;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:20px 16px 0}
.logo{display:flex;align-items:center;gap:8px;color:var(--ink)}
.logo svg{width:22px;height:22px}
.logo .t{display:flex;flex-direction:column;line-height:1}
.logo .t b{font-size:15px;font-weight:600;letter-spacing:-.02em}
.logo .t i{font-style:normal;font-size:10px;font-weight:300;opacity:.85;margin-top:-1px}
.topbar .actions{display:flex;align-items:center;gap:10px}
.btn .long{display:none}
.burger{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;background:#fff;color:var(--ink);border:1px solid var(--stroke);cursor:pointer}
.burger svg{width:18px;height:18px}
@media(min-width:640px){.topbar{padding:32px 40px 0}.btn .long{display:inline}.btn .short{display:none}}
@media(min-width:768px){.burger{display:none}}
.nav{display:none;position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:40;background:#fff;padding:16px 24px;gap:22px;align-items:center;border-bottom-left-radius:28px;border-bottom-right-radius:28px}
.nav a{font-size:11px;text-transform:uppercase;letter-spacing:.14em;font-weight:500;color:#262626;transition:color .2s;position:relative}
.nav a:hover,.nav a.on{color:var(--teal)}
.nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--teal)}
.nav .k{position:absolute;top:0;width:24px;height:24px;background:#fff}
.nav .kl{left:-24px;-webkit-mask-image:radial-gradient(circle at 0 100%,transparent 24px,#000 25px);mask-image:radial-gradient(circle at 0 100%,transparent 24px,#000 25px)}
.nav .kr{right:-24px;-webkit-mask-image:radial-gradient(circle at 100% 100%,transparent 24px,#000 25px);mask-image:radial-gradient(circle at 100% 100%,transparent 24px,#000 25px)}
@media(min-width:768px){.nav{display:flex}}
@media(min-width:1024px){.nav{padding:16px 40px;gap:34px}}
.menu{position:absolute;inset:0;z-index:60;background:#fff;display:none;flex-direction:column;padding:24px 20px}
.menu.open{display:flex}
.menu .row{display:flex;justify-content:space-between;align-items:center}
.menu nav{margin-top:40px;display:flex;flex-direction:column;gap:6px}
.menu nav a{font-size:28px;font-weight:600;letter-spacing:-.02em;padding:10px 0;border-bottom:1px solid var(--stroke)}
.menu .sm{margin-top:auto;display:flex;flex-wrap:wrap;gap:16px;font-size:11px;text-transform:uppercase;letter-spacing:.14em;opacity:.7}

/* indicators */
.ind{pointer-events:none;position:absolute;bottom:16px;z-index:40;color:rgba(255,255,255,.85);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.18em;mix-blend-mode:difference}
.ind.r{right:16px;display:flex;align-items:center;gap:12px}
.ind.l{left:16px}
.ind .line{width:32px;height:1px;background:rgba(255,255,255,.4)}
@media(min-width:640px){.ind{bottom:24px}.ind.r{right:32px}.ind.l{left:32px}}

/* hero */
.hero{position:relative;overflow:hidden;min-height:calc(100vh - 40px);background:radial-gradient(120% 90% at 50% 0%,#fff 0%,var(--g2) 55%,#E4EEF3 100%)}
.hero .art{position:absolute;inset:0;width:100%;height:100%}
.hero .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(21,67,89,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(21,67,89,.06) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(70% 60% at 50% 45%,#000 30%,transparent 100%);mask-image:radial-gradient(70% 60% at 50% 45%,#000 30%,transparent 100%)}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:drift 18s ease-in-out infinite alternate}
.b1{width:46vw;height:46vw;left:-10vw;top:10vh;background:#BFE4F4}
.b2{width:38vw;height:38vw;right:-8vw;bottom:0;background:#9FD3E8;animation-delay:-8s}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(6vw,-4vh) scale(1.08)}}
.hero .center{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;text-align:center;padding:112px 24px 140px}
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.3em;font-weight:500;margin-bottom:24px;opacity:.9}
.h1{font-weight:400;letter-spacing:-.04em;line-height:.9;font-size:46px}
.h1 em{font-style:normal;background-image:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{font-size:12px;text-transform:uppercase;letter-spacing:.22em;font-weight:500;max-width:30rem;line-height:1.8;opacity:.9;margin-top:32px}
.hero .cta{margin-top:36px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.orbit{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(120vw,900px);height:min(120vw,900px);pointer-events:none;opacity:.55}
@media(min-width:640px){.hero .center{padding-top:150px}.eyebrow{font-size:12px}.h1{font-size:72px}.sub{font-size:14px}.orbit{opacity:.7}}
@media(min-width:768px){.h1{font-size:96px}}
@media(min-width:1024px){.h1{font-size:118px}}
.ticker{position:relative;z-index:10;overflow:hidden;border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke);padding:14px 0;background:rgba(255,255,255,.55);backdrop-filter:blur(6px)}
.ticker .track{display:flex;gap:56px;white-space:nowrap;width:max-content;animation:tick 40s linear infinite;font-size:11px;text-transform:uppercase;letter-spacing:.2em;font-weight:500;opacity:.8}
@keyframes tick{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker .track,.blob,.btn::after,.orbit *{animation:none!important}}

/* sections */
.sec{position:relative;overflow:hidden;padding:80px 24px}
.sec.g1{background:var(--g1)}.sec.g2{background:var(--g2)}.sec.w{background:#fff}
.in{max-width:80rem;margin:0 auto}
.in.n{max-width:64rem}
.tag{font-size:12px;letter-spacing:.24em;text-transform:uppercase;opacity:.85}
.h2{font-size:38px;font-weight:600;letter-spacing:-.02em;text-transform:uppercase;line-height:.95;margin-top:4px}
.lead{font-size:17px;line-height:1.55;max-width:36rem;margin-top:20px}
.split{display:flex;flex-direction:column;gap:32px}
.fade{pointer-events:none;position:absolute;bottom:0;left:0;width:100%;height:120px;z-index:5;background:linear-gradient(to bottom,rgba(240,245,247,0),rgba(240,245,247,.7) 60%,var(--g2))}
@media(min-width:640px){.sec{padding:112px 40px}.h2{font-size:50px}.lead{font-size:18px}.fade{height:200px}}
@media(min-width:1024px){.split{flex-direction:row;justify-content:space-between;gap:64px}.split>*{flex:1}.h2{font-size:54px}}

/* cards */
.cards{display:grid;grid-template-columns:1fr;gap:18px;margin-top:48px}
.card{position:relative;display:block;padding:26px 24px 24px;background:#fff;transition:transform .25s}
.card::before{content:"";position:absolute;inset:0;background:var(--stroke);z-index:-1}
.card{clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.cwrap{position:relative;padding:1px;background:var(--stroke);clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);transition:transform .25s}
.cwrap:hover{transform:translateY(-3px)}
.cwrap>.card{height:100%}
.card .ic{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--g2);color:var(--teal);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.card .ic svg{width:20px;height:20px}
.card h3{font-size:17px;font-weight:600;letter-spacing:-.01em;margin-top:18px}
.card p{font-size:14px;line-height:1.55;margin-top:10px;opacity:.85}
.card .more{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-size:11px;text-transform:uppercase;letter-spacing:.14em;font-weight:500;color:var(--teal)}
.card .more svg{width:12px;height:12px;transition:transform .2s}
.cwrap:hover .more svg{transform:translate(2px,-2px)}
@media(min-width:768px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.cards{grid-template-columns:repeat(3,1fr);gap:20px}}

/* nomination-style pills */
.pills{display:flex;flex-direction:column;gap:14px}
.pill{position:relative;display:block;width:100%;max-width:22em;height:5em;margin:0 auto;transition:transform .2s}
.pill:hover{transform:translateY(-2px)}
.pill svg{position:absolute;inset:0;width:100%;height:100%}
.pill span{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:0 16px;text-align:center}
.pill b{font-size:13px;font-weight:600}
.pill i{font-style:normal;font-size:12px;opacity:.8}

/* journey */
.journey{display:grid;grid-template-columns:1fr;gap:18px;margin-top:48px;counter-reset:step}
.step{position:relative;padding:28px 24px 26px;background:#fff;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.step .n{font-weight:600;font-size:44px;line-height:1;background-image:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.step h3{font-size:22px;font-weight:600;text-transform:uppercase;letter-spacing:-.01em;margin-top:14px}
.step p{font-size:14px;line-height:1.55;margin-top:10px;opacity:.85}
.step .out{margin-top:16px;padding-top:14px;border-top:1px solid var(--stroke);font-size:12px;letter-spacing:.06em;opacity:.8}
@media(min-width:768px){.journey{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.journey{grid-template-columns:repeat(4,1fr)}.step:nth-child(even){margin-top:40px}}

/* stats */
.stats{margin-top:56px;display:grid;grid-template-columns:1fr;gap:20px}
.stat{position:relative;height:260px;background:rgba(255,255,255,.8);padding:1.5px}
.stat .im{width:100%;height:100%;overflow:hidden;background:linear-gradient(160deg,#fff,#E3EEF3)}
.stat .im svg{width:100%;height:100%}
.stat .tx{position:absolute;left:24px;right:24px;bottom:24px;max-width:70%}
.stat .v{font-weight:600;text-transform:uppercase;font-size:38px;line-height:1;background-image:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .d{font-size:14px;line-height:1.4;margin-top:12px}
.s1,.s1 .im{clip-path:polygon(64px 0,calc(100% - 14px) 0,calc(100% - 4px) 4px,100% 14px,100% calc(100% - 14px),calc(100% - 4px) calc(100% - 4px),calc(100% - 14px) 100%,14px 100%,4px calc(100% - 4px),0 calc(100% - 14px),0 64px)}
.s2,.s2 .im{clip-path:polygon(0 14px,4px 4px,14px 0,calc(100% - 64px) 0,100% 64px,100% calc(100% - 14px),calc(100% - 4px) calc(100% - 4px),calc(100% - 14px) 100%,64px 100%,0 calc(100% - 64px))}
.s3,.s3 .im{clip-path:polygon(0 14px,4px 4px,14px 0,calc(100% - 64px) 0,100% 64px,100% calc(100% - 64px),calc(100% - 64px) 100%,14px 100%,4px calc(100% - 4px),0 calc(100% - 14px))}
@media(min-width:640px){.stat{height:320px}.stat .v{font-size:52px}}
@media(min-width:768px){.stats{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.stats{grid-template-columns:repeat(3,1fr)}.s2{margin-top:80px}}

/* misc blocks */
.logos{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:28px;font-size:13px;font-weight:500;letter-spacing:.04em;opacity:.75}
.logos span{padding:8px 0;border-bottom:1px solid var(--stroke)}
.quote{margin-top:48px;padding:36px 28px;background:#fff;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.quote p{font-size:26px;font-weight:400;letter-spacing:-.02em;line-height:1.15}
.quote small{display:block;margin-top:16px;font-size:11px;text-transform:uppercase;letter-spacing:.14em;opacity:.7}
@media(min-width:640px){.quote p{font-size:40px}}
.cta-band{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:80px 24px;text-align:center}
.cta-band .h2{color:#fff}
.cta-band p{max-width:34rem;margin:18px auto 0;font-size:16px;line-height:1.6;opacity:.85}
.cta-band .btn{margin-top:32px;background:#fff;color:var(--ink)}
.cta-band .ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:900px;height:900px;border-radius:50%;border:1px solid rgba(255,255,255,.08);pointer-events:none}
.cta-band .ring.b{width:600px;height:600px;border-color:rgba(255,255,255,.12)}
@media(min-width:640px){.cta-band{padding:112px 40px}}

/* prose pages */
.prose{max-width:46rem}
.prose h2{font-size:22px;font-weight:600;letter-spacing:-.01em;margin-top:40px}
.prose h3{font-size:17px;font-weight:600;margin-top:26px}
.prose p,.prose li{font-size:16px;line-height:1.65;margin-top:12px}
.prose ul{padding-left:18px;list-style:disc}
.prose .meta{font-size:12px;text-transform:uppercase;letter-spacing:.14em;opacity:.7;margin-top:8px}
.prose a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.page-head{padding-top:110px}
@media(min-width:768px){.page-head{padding-top:150px}}

/* contact */
.form{display:grid;grid-template-columns:1fr;gap:14px;margin-top:8px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:11px;text-transform:uppercase;letter-spacing:.14em;font-weight:500}
.form input,.form textarea,.form select{font:inherit;font-size:15px;padding:12px 14px;border:1px solid var(--stroke);background:#fff;color:var(--ink);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.form textarea{min-height:140px;resize:vertical}
.form .full{grid-column:1/-1}
@media(min-width:640px){.form{grid-template-columns:1fr 1fr}}
.info{display:flex;flex-direction:column;gap:20px}
.info div{padding:20px;background:#fff;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.info b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.14em;opacity:.7}
.info span{display:block;margin-top:6px;font-size:16px}

/* footer */
.footer{background:#fff;padding:64px 24px 40px;border-top:1px solid var(--stroke)}
.footer .in{display:grid;grid-template-columns:1fr;gap:36px}
.footer h4{font-size:11px;text-transform:uppercase;letter-spacing:.14em;opacity:.7}
.footer ul{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.footer li a{font-size:14px;transition:color .2s}
.footer li a:hover{color:var(--teal)}
.footer .brand p{font-size:14px;line-height:1.55;margin-top:14px;max-width:22rem;opacity:.85}
.footer .base{max-width:80rem;margin:48px auto 0;padding-top:20px;border-top:1px solid var(--stroke);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:12px;opacity:.7}
@media(min-width:640px){.footer{padding:80px 40px 40px}.footer .in{grid-template-columns:1.4fr 1fr 1fr 1fr}}

/* reveal */
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* home additions */
.state{font-size:26px;font-weight:400;letter-spacing:-.02em;line-height:1.15;margin-top:12px;max-width:52rem}
@media(min-width:640px){.state{font-size:40px}}
.facts{margin-top:40px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.facts div{padding:18px 0;border-top:1px solid var(--stroke)}
.facts b{display:block;font-size:30px;font-weight:600;letter-spacing:-.02em;background-image:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.facts span{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.14em;opacity:.7;margin-top:4px}
@media(min-width:768px){.facts{grid-template-columns:repeat(5,1fr)}}
.layers{width:100%;max-width:520px;margin:0 auto}
.lyr{animation:floaty 6s ease-in-out infinite}
.l1{animation-delay:0s}.l2{animation-delay:-2s}.l3{animation-delay:-4s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.flowwrap{margin-top:48px;padding:24px 8px;background:#fff;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);overflow-x:auto}
.flow{min-width:720px;width:100%}
.flow .line{fill:none;stroke:#066377;stroke-opacity:.3;stroke-width:1.5}
.flow .dash{stroke:#4BBDF0;stroke-opacity:.7;stroke-dasharray:6 10;animation:dashmove 1.6s linear infinite}
@keyframes dashmove{to{stroke-dashoffset:-32}}
.radar{width:100%;max-width:360px}
.radar-shape{animation:breathe 5s ease-in-out infinite;transform-origin:200px 200px}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.draw{stroke-dasharray:600;stroke-dashoffset:600;animation:drawline 2.4s ease-out forwards}
@keyframes drawline{to{stroke-dashoffset:0}}
.pulse{animation:pulse 3s ease-out infinite;transform-origin:300px 90px}
@keyframes pulse{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.15);opacity:0}}
.bar{transform-origin:bottom;animation:rise 1.4s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{transform:scaleY(0)}}
.compare{margin-top:56px;display:grid;grid-template-columns:1fr;gap:16px;align-items:stretch}
.compare .col{padding:28px 24px;background:#fff;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.compare .col.good{background:var(--ink);color:#fff}
.compare h3{font-size:20px;font-weight:600;text-transform:uppercase}
.compare ul{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.compare li{font-size:14px;line-height:1.5;padding-left:18px;position:relative}
.compare li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;background:currentColor;opacity:.5}
.compare .good li::before{background:#4BBDF0;opacity:1}
.compare .vs{display:flex;align-items:center;justify-content:center}
.compare .vs span{width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;background:#fff;border:1px solid var(--stroke);border-radius:50%}
@media(min-width:900px){.compare{grid-template-columns:1fr 60px 1fr}}
.list{display:flex;flex-direction:column;margin-top:20px}
.list li a{display:block;padding:16px 0;border-top:1px solid var(--stroke);transition:padding-left .2s}
.list li a:hover{padding-left:8px}
.list b{display:block;font-size:16px;font-weight:600}
.list span{display:block;font-size:13px;opacity:.75;margin-top:4px}
.scroll{overflow-anchor:none}
@media(prefers-reduced-motion:reduce){.lyr,.flow .dash,.radar-shape,.pulse,.bar,.draw{animation:none!important}.draw{stroke-dashoffset:0}}

/* ===== polish layer ===== */
.progress{position:absolute;top:0;left:0;height:2px;width:0;background:var(--grad);z-index:70;transition:width .08s linear}
.grain{pointer-events:none;position:absolute;inset:0;z-index:65;opacity:.045;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.topbar .logo{transition:transform .3s}
.topbar .logo:hover{transform:translateY(-1px)}
.topbar .logo svg{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.topbar .logo:hover svg{transform:rotate(90deg)}
.nav{transition:box-shadow .3s,background .3s}
.nav.scrolled{box-shadow:0 10px 30px -18px rgba(21,67,89,.35)}
.nav a::before{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:100%;background:var(--teal);transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.nav a:hover::before{transform:scaleX(1);transform-origin:left}
.nav a.on::before{display:none}

/* floating geometry */
.geo{pointer-events:none;position:absolute;inset:0;overflow:hidden;z-index:0}
.geo i{position:absolute;display:block;border:1px solid rgba(6,99,119,.22);clip-path:polygon(22% 0,100% 0,100% 78%,78% 100%,0 100%,0 22%);animation:geo 22s ease-in-out infinite alternate}
.geo i.f{background:linear-gradient(135deg,rgba(75,189,240,.18),rgba(24,91,123,.08));border:none}
.geo i.d{border-style:dashed}
@keyframes geo{from{transform:translate3d(0,0,0) rotate(0deg)}to{transform:translate3d(18px,-26px,0) rotate(14deg)}}
.sec>.in,.sec>.split{position:relative;z-index:1}

/* cards: corner ticks + spotlight */
.card{position:relative;overflow:hidden}
.card::after{content:"";position:absolute;inset:0;background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(75,189,240,.14),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.cwrap:hover .card::after{opacity:1}
.card .tick{position:absolute;width:10px;height:10px;border-color:var(--teal);border-style:solid;opacity:0;transition:opacity .3s,transform .3s}
.card .tick.tl{top:10px;left:10px;border-width:1px 0 0 1px;transform:translate(-4px,-4px)}
.card .tick.br{right:10px;bottom:10px;border-width:0 1px 1px 0;transform:translate(4px,4px)}
.cwrap:hover .tick{opacity:1;transform:none}
.card .ic{transition:transform .35s cubic-bezier(.2,.8,.2,1),background .3s}
.cwrap:hover .ic{transform:translateY(-2px) rotate(-6deg);background:#E1F1F8}

/* steps hover + number glow */
.step{transition:transform .3s,box-shadow .3s}
.step:hover{transform:translateY(-4px);box-shadow:0 24px 40px -30px rgba(21,67,89,.45)}
.step .n{position:relative}
.step .n::after{content:"";position:absolute;left:0;bottom:-6px;width:28px;height:2px;background:var(--grad);transition:width .4s}
.step:hover .n::after{width:64px}

/* pills sweep */
.pill span{transition:transform .3s}
.pill:hover span{transform:translateX(3px)}
.pill svg polygon{transition:stroke .3s}
.pill:hover svg polygon{stroke:rgba(6,99,119,.6)}

/* stat cards shimmer */
.stat .im{position:relative}
.stat .im::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);transform:translateX(-120%);transition:transform 1.1s ease}
.stat:hover .im::after{transform:translateX(120%)}

/* cta band beam */
.cta-band{isolation:isolate}
.cta-band::before{content:"";position:absolute;inset:-1px;z-index:-1;background:conic-gradient(from var(--a,0deg),transparent 0 75%,#4BBDF0 88%,transparent 100%);animation:spin 7s linear infinite;opacity:.9}
.cta-band::after{content:"";position:absolute;inset:1px;z-index:-1;background:var(--ink)}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes spin{to{--a:360deg}}
.cta-band .ring{animation:ringpulse 8s ease-in-out infinite}
.cta-band .ring.b{animation-delay:-4s}
@keyframes ringpulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.06)}}
.cta-band .dots{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:radial-gradient(60% 60% at 50% 50%,#000,transparent);mask-image:radial-gradient(60% 60% at 50% 50%,#000,transparent);pointer-events:none}

/* page head decoration */
.page-head{overflow:hidden}
.page-head .deco{position:absolute;right:-40px;top:60px;width:min(46vw,420px);opacity:.9;pointer-events:none}
.page-head .deco .r{transform-origin:center;animation:slowspin 40s linear infinite}
.page-head .deco .r2{animation-direction:reverse;animation-duration:60s}
@keyframes slowspin{to{transform:rotate(360deg)}}

/* magnetic btn base */
.btn{will-change:transform}
.btn.mag{transition:transform .25s cubic-bezier(.2,.8,.2,1),filter .2s}

/* footer link arrows */
.footer li a{position:relative;display:inline-block}
.footer li a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--teal);transition:width .3s}
.footer li a:hover::after{width:100%}

/* text gradient sweep on h2 hover */
.h2 em{font-style:normal}
.quote p{position:relative}
.quote p::before{content:"";position:absolute;left:-28px;top:6px;width:3px;height:calc(100% - 12px);background:var(--grad)}

/* selection */
::selection{background:#4BBDF0;color:#fff}
@media(prefers-reduced-motion:reduce){.geo i,.cta-band::before,.page-head .deco .r,.cta-band .ring{animation:none!important}}

/* blog */
.coverwrap{padding:1px;background:var(--stroke);clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.cover{clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);background:#fff}
.cover svg{width:100%;height:auto;display:block}
.feature{display:grid;grid-template-columns:1fr;gap:0;background:#fff;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);transition:transform .3s}
.feature:hover{transform:translateY(-3px)}
.feature .cover{clip-path:none}
.feature .ftext{padding:28px 24px 30px}
.feature .date,.post .date{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.14em;opacity:.7}
.feature h2{font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1.02;margin-top:12px}
.feature p{font-size:16px;line-height:1.55;margin-top:14px;opacity:.85}
.feature .more{display:inline-flex;align-items:center;gap:6px;margin-top:20px;font-size:11px;text-transform:uppercase;letter-spacing:.14em;font-weight:500;color:var(--teal)}
.feature .more svg{width:12px;height:12px;transition:transform .2s}
.feature:hover .more svg{transform:translate(2px,-2px)}
@media(min-width:900px){.feature{grid-template-columns:1.2fr 1fr}.feature .ftext{padding:40px 36px}.feature h2{font-size:40px}}
.card.post{padding:0 0 24px}
.card.post .thumb{margin:0 0 18px;overflow:hidden}
.card.post .thumb svg{width:100%;height:auto;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.cwrap:hover .card.post .thumb svg{transform:scale(1.04)}
.card.post .date,.card.post h3,.card.post p,.card.post .more{margin-left:24px;margin-right:24px}
.card.post h3{margin-top:10px}
.postnav{margin-top:48px;display:grid;grid-template-columns:1fr 1fr;gap:16px;border-top:1px solid var(--stroke);padding-top:24px}
.postnav a{display:block}
.postnav a.r{text-align:right}
.postnav small{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.14em;opacity:.7}
.postnav b{display:block;font-size:15px;font-weight:600;margin-top:4px;transition:color .2s}
.postnav a:hover b{color:var(--teal)}

/* film section */
.filmwrap{margin-top:48px}
.film{position:relative;padding:1.5px;background:var(--grad);clip-path:polygon(28px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 28px),calc(100% - 28px) 100%,14px 100%,0 calc(100% - 14px),0 28px);box-shadow:0 40px 80px -40px rgba(21,67,89,.45)}
.film video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#0e2a38;clip-path:polygon(28px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 28px),calc(100% - 28px) 100%,14px 100%,0 calc(100% - 14px),0 28px)}
.film .corner{position:absolute;width:26px;height:26px;border:2px solid #fff;opacity:.9;pointer-events:none;z-index:2;animation:cornerpulse 4s ease-in-out infinite}
.film .tl{top:14px;left:14px;border-right:0;border-bottom:0}
.film .tr{top:14px;right:14px;border-left:0;border-bottom:0;animation-delay:-1s}
.film .bl{bottom:14px;left:14px;border-right:0;border-top:0;animation-delay:-2s}
.film .br{bottom:14px;right:14px;border-left:0;border-top:0;animation-delay:-3s}
@keyframes cornerpulse{0%,100%{opacity:.55}50%{opacity:1}}
.filmbar{position:absolute;left:14px;right:14px;bottom:14px;z-index:3;display:flex;align-items:center;gap:14px;padding:10px 12px 10px 14px;background:rgba(21,67,89,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.filmbar .rec{display:inline-flex;align-items:center;gap:8px;font-size:11px;text-transform:uppercase;letter-spacing:.16em;font-weight:600}
.filmbar .rec i{width:8px;height:8px;border-radius:50%;background:#4BBDF0;box-shadow:0 0 0 0 rgba(75,189,240,.7);animation:recdot 1.6s ease-out infinite}
@keyframes recdot{to{box-shadow:0 0 0 10px rgba(75,189,240,0)}}
.filmbar .filmmeta{margin-left:auto;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.8;display:none}
.filmbtn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;background:#fff;color:var(--ink);border:0;cursor:pointer;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);transition:transform .2s,background .2s}
.filmbtn:hover{transform:translateY(-1px);background:#E1F1F8}
.filmbtn svg{width:16px;height:16px}
.filmbtn .i-play{display:none}
.film.paused .filmbtn .i-play{display:block}
.film.paused .filmbtn .i-pause{display:none}
.filmcap{margin-top:18px;font-size:13px;line-height:1.5;opacity:.75;max-width:40rem}
@media(min-width:640px){.filmbar .filmmeta{display:inline}.filmbar{padding:12px 14px 12px 18px}}
@media(min-width:1024px){.filmsec .split{align-items:flex-end}}
@media(prefers-reduced-motion:reduce){.film .corner,.filmbar .rec i{animation:none}}