@font-face{font-family:'Open Sans';src:url('assets/fonts/OpenSans.woff2') format('woff2');font-weight:300 800;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('assets/fonts/JetBrainsMono-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
:root{--ink:#A9BCCE;--blue:#0B4CE8;--blue-soft:#4E86FF;--sans:'Open Sans',ui-sans-serif,system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,Menlo,monospace;--pad:clamp(20px,4vw,56px)}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{margin:0;background:linear-gradient(180deg,#B7C8D8 0%,#A5B9CB 45%,#9FB6CB 100%) fixed;color:#fff;font-family:var(--sans);line-height:1.55;overflow-x:hidden}
::selection{background:rgba(255,255,255,.45)}
a{color:#fff;text-decoration:none}
a:hover{color:var(--blue-soft)}
img{max-width:100%;display:block}
/* ---------- ambient background ---------- */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,#B7C8D8 0%,#A5B9CB 45%,#9FB6CB 100%);overflow:hidden}
.bg canvas{position:absolute;inset:0;width:100%;height:100%}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;will-change:transform}
.orb.a{width:56vw;height:56vw;left:-12vw;top:-10vw;background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.85),rgba(255,255,255,0) 68%)}
.orb.b{width:48vw;height:48vw;right:-8vw;top:28vh;background:radial-gradient(circle at 50% 50%,rgba(11,76,232,.20),rgba(11,76,232,0) 70%)}
.orb.c{width:62vw;height:62vw;left:16vw;top:76vh;background:radial-gradient(circle at 50% 50%,rgba(120,145,175,.55),rgba(120,145,175,0) 70%)}
.grain{position:absolute;inset:-50%;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
.wrap{position:relative;z-index:10}
/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(32px);transition:opacity .7s ease-out,transform .7s ease-out;will-change:transform}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
/* ---------- glass tokens ---------- */
.glass{background:rgba(255,255,255,.10);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.15)}
.badge{display:inline-flex;align-items:center;border-left:2px solid #fff;background:rgba(255,255,255,.28);backdrop-filter:blur(14px);padding:7px 13px;font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase}
.ds{text-shadow:0 2px 14px rgba(52,74,98,.38)}
.btn{display:inline-flex;align-items:center;gap:7px;border-radius:999px;background:#fff;color:#14202E;box-shadow:0 6px 20px rgba(52,74,98,.16);padding:11px 22px;font-size:14px;font-weight:600;transition:background .3s,color .3s;border:0;cursor:pointer;font-family:var(--sans)}
.btn:hover{background:rgba(255,255,255,.85);color:#14202E}
.btn-ghost{background:rgba(255,255,255,.28);color:#fff;border:1px solid rgba(255,255,255,.9);backdrop-filter:blur(14px);box-shadow:none;text-shadow:0 2px 14px rgba(52,74,98,.38)}
.btn-ghost:hover{background:rgba(255,255,255,.42);color:#fff}
/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px var(--pad);border-bottom:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.18);backdrop-filter:blur(14px)}
.nav .logo img{height:30px;width:auto;filter:brightness(0) invert(1) drop-shadow(0 2px 10px rgba(52,74,98,.35))}
.nav ul{display:none;gap:36px;list-style:none;margin:0;padding:0}
.nav ul a{font-size:14px;color:rgba(255,255,255,.92);text-shadow:0 2px 14px rgba(52,74,98,.38);transition:color .3s}
.nav ul a:hover{color:#fff}
.nav ul sup{font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.75)}
.nav .cta{border-radius:8px;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.28);text-shadow:0 2px 14px rgba(52,74,98,.38);backdrop-filter:blur(14px);padding:9px 18px;font-size:13px;white-space:nowrap;transition:background .3s}
.nav .cta:hover{background:rgba(255,255,255,.45);color:#fff}
@media(min-width:900px){.nav ul{display:flex}}
/* ---------- layout ---------- */
section{padding:0 var(--pad)}
.screen{min-height:100vh;display:flex;flex-direction:column;justify-content:space-between;padding-top:112px;padding-bottom:64px}
@supports(height:100svh){.screen{min-height:100svh}}
.spacer{height:70vh}
h1,h2{font-weight:400;letter-spacing:-.025em;line-height:1.05;margin:0}
.hd{font-size:clamp(40px,7vw,76px)}
.lede{font-size:clamp(17px,1.6vw,21px);line-height:1.6;margin:0}
.row{display:flex;flex-direction:column;gap:32px}
@media(min-width:760px){.row{flex-direction:row;justify-content:space-between;align-items:flex-start}}
.svc{display:flex;flex-direction:column;gap:10px}
.svc span{font-family:var(--mono);font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.bottom{display:flex;flex-direction:column;gap:36px;align-items:flex-start}
@media(min-width:900px){.bottom{flex-direction:row;align-items:flex-end;justify-content:space-between}}
/* ---------- contact card ---------- */
.card{display:flex;align-items:center;gap:16px;border-radius:16px;padding:14px;background:rgba(255,255,255,.26);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.42)}
.card .ph{width:84px;height:100px;border-radius:12px;flex:none;background:repeating-linear-gradient(135deg,rgba(255,255,255,.5) 0 6px,rgba(255,255,255,.18) 6px 12px);display:grid;place-items:center;text-align:center;font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;color:rgba(38,56,78,.7);padding:6px;line-height:1.4}
.card .t{display:flex;flex-direction:column;gap:6px;padding-right:6px}
.card .t b{font-size:14px;font-weight:600}
.card .btn{white-space:nowrap}
/* ---------- panel ---------- */
.panel{width:100%;max-width:460px;border-radius:20px;padding:2px 22px;background:rgba(255,255,255,.22);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.7)}
.panel .r{display:flex;gap:20px;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.45)}
.panel .r:last-child{border-bottom:0}
.panel .r i{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.15em;color:rgba(255,255,255,.9);padding-top:3px}
.panel .r h3{margin:0;font-size:17px;font-weight:600;display:flex;align-items:center;gap:8px}
.panel .r p{margin:6px 0 0;font-size:14px;line-height:1.6;color:rgba(255,255,255,.88)}
.chev{transition:transform .3s,color .3s;color:rgba(255,255,255,.7)}
.panel .r:hover .chev{transform:translateX(3px);color:#fff}
/* ---------- ventures ---------- */
.vent{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:900px){.vent{grid-template-columns:1.4fr 1fr}}
.v{border-radius:20px;padding:28px;background:rgba(255,255,255,.20);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.7);display:flex;flex-direction:column;gap:14px}
.v h3{margin:0;font-size:26px;font-weight:400;letter-spacing:-.02em}
.v p{margin:0;font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.88)}
.v ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.v ul li{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:6px 11px}
.v .stat{display:flex;gap:28px;margin-top:auto;padding-top:8px}
.v .stat div b{display:block;font-size:28px;font-weight:600;letter-spacing:-.02em}
.v .stat div span{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.9)}
/* ---------- process ---------- */
.steps{display:grid;gap:1px;background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.7);border-radius:20px;overflow:hidden;grid-template-columns:1fr}
@media(min-width:720px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.steps{grid-template-columns:repeat(4,1fr)}}
.steps div{background:rgba(255,255,255,.5);backdrop-filter:blur(16px);padding:26px 22px 30px}
.steps div i{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.15em;color:rgba(255,255,255,.9)}
.steps div h3{margin:14px 0 8px;font-size:18px;font-weight:600}
.steps div p{margin:0;font-size:14px;line-height:1.6;color:rgba(255,255,255,.88)}
/* ---------- contact ---------- */
.cband{display:grid;gap:36px;grid-template-columns:1fr;padding:clamp(60px,9vw,110px) 0}
@media(min-width:900px){.cband{grid-template-columns:1.2fr 1fr;align-items:end}}
.det{display:flex;flex-direction:column;gap:18px}
.det div span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.9);margin-bottom:5px}
.det div p{margin:0;font-size:15px;line-height:1.6;color:rgba(255,255,255,.9)}
footer{border-top:1px solid rgba(255,255,255,.45);padding:26px var(--pad);display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;position:relative;z-index:10}
footer p{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.9)}
footer nav{display:flex;gap:20px}
footer nav a{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.9)}
footer nav a:hover{color:#fff}

.v p,.panel .r p,.steps div p{text-shadow:0 2px 14px rgba(52,74,98,.3)}
.panel .r h3,.v h3,.steps div h3{text-shadow:0 2px 14px rgba(52,74,98,.35)}

#art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* readable ink on frosted surfaces (light theme) */
.svc span{color:rgba(255,255,255,.98);font-weight:600}
.card .t b{color:#16283C;text-shadow:none}
.card .t span{color:rgba(22,40,60,.62);text-shadow:none}
.panel .r i{color:rgba(22,40,60,.55)}
.panel .r h3{color:#16283C;text-shadow:none}
.panel .r p{color:rgba(22,40,60,.82);text-shadow:none}
.chev{color:rgba(22,40,60,.45)}
.panel .r:hover .chev{color:#16283C}
.v h3{color:#16283C;text-shadow:none}
.v p{color:rgba(22,40,60,.82);text-shadow:none}
.v .mono{color:rgba(22,40,60,.6)!important}
.v ul li{color:rgba(22,40,60,.75);border-color:rgba(22,40,60,.22)}
.v .stat div b{color:#16283C}
.v .stat div span{color:rgba(22,40,60,.6)}
.steps div i{color:rgba(22,40,60,.55)}
.steps div h3{color:#16283C;text-shadow:none}
.steps div p{color:rgba(22,40,60,.82);text-shadow:none}
.det div span{color:rgba(22,40,60,.6)}
.det div p,.det div p a{color:#16283C}
.det div p a:hover{color:var(--blue)}
footer p,footer nav a{color:rgba(22,40,60,.72)}
footer nav a:hover{color:#16283C}

.grid7{display:grid;gap:1px;background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.4);border-radius:20px;overflow:hidden;grid-template-columns:1fr}
@media(min-width:640px){.grid7{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.grid7{grid-template-columns:repeat(4,1fr)}}
.grid7 .p{background:rgba(255,255,255,.2);backdrop-filter:blur(16px);padding:22px 20px 24px;display:flex;flex-direction:column;gap:6px;transition:background .3s}
.grid7 .p:hover{background:rgba(255,255,255,.42);color:inherit}
.grid7 .p i{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;color:rgba(22,40,60,.5)}
.grid7 .p b{font-size:16px;font-weight:600;letter-spacing:.01em;color:#16283C}
.grid7 .p span{font-size:13px;line-height:1.5;color:rgba(22,40,60,.72)}

/* stronger legibility pass */
.ds{text-shadow:0 2px 18px rgba(30,48,70,.55),0 1px 3px rgba(30,48,70,.35)}
.hd{font-weight:600}
.svc span{color:#fff;font-weight:700;font-size:12.5px}
.lede{color:#fff;font-weight:500}
.badge{color:#fff;font-weight:600;background:rgba(255,255,255,.34)}
.nav ul a{color:#fff;font-weight:600}
.nav .cta{color:#fff;font-weight:600;background:rgba(255,255,255,.34)}
.panel .r p,.v p,.steps div p{color:rgba(16,32,50,.92)}
.panel .r i,.steps div i,.v .stat div span,.det div span,.grid7 .p i{color:rgba(16,32,50,.7)}
.card .t span,.v .mono{color:rgba(16,32,50,.72)!important}
footer p,footer nav a{color:rgba(16,32,50,.82)}
.v ul li{color:rgba(16,32,50,.85);border-color:rgba(16,32,50,.3)}
.glass,.panel,.v,.card,.steps div,.grid7 .p{background:rgba(255,255,255,.34)}
.grid7 .p:hover,.steps div:hover{background:rgba(255,255,255,.5)}

.card .ph{background:rgba(255,255,255,.72);display:grid;place-items:center;padding:14px}
.card .ph img{width:100%;height:auto;filter:brightness(0)}

.grid7 .p b{text-transform:uppercase;letter-spacing:.04em}

/* header: black nav */
.nav .logo img{filter:brightness(0)}
.nav ul a{color:#000;text-shadow:none}
.nav ul a:hover{color:var(--blue)}
.nav ul sup{color:rgba(0,0,0,.6)}
.nav .cta{color:#000;text-shadow:none;border-color:rgba(0,0,0,.25)}
.nav .cta:hover{color:#000}

/* responsive pass */
@media(max-width:760px){
 .hd{font-size:clamp(34px,9vw,46px)}
 h2[style*="nowrap"]{white-space:normal!important}
 .screen{padding-top:96px;padding-bottom:48px}
 .spacer{height:40vh}
 .card{flex-direction:row;align-items:flex-start}
 .card .ph{width:70px;height:84px}
 .btn{padding:11px 18px;font-size:13.5px}
 .panel{max-width:100%}
 .lede{font-size:16.5px}
}
@media(max-width:420px){.card{flex-direction:column;align-items:flex-start}.card .ph{width:78px;height:92px}}
@media(min-width:761px) and (max-width:1024px){.hd{font-size:clamp(40px,6.2vw,58px)}.spacer{height:55vh}}
img,canvas{max-width:100%}

/* ---------- light theme: white page, dark ink ---------- */
body{background:#fff;color:#16283C}
.bg{background:#fff}
.orb{opacity:.35;filter:blur(110px)}
.orb.a{background:radial-gradient(circle at 40% 40%,rgba(11,76,232,.10),rgba(11,76,232,0) 68%)}
.orb.b{background:radial-gradient(circle at 50% 50%,rgba(11,76,232,.12),rgba(11,76,232,0) 70%)}
.orb.c{background:radial-gradient(circle at 50% 50%,rgba(120,145,175,.16),rgba(120,145,175,0) 70%)}
.grain{opacity:.035;mix-blend-mode:multiply}
::selection{background:rgba(11,76,232,.18)}
a{color:#16283C}
a:hover{color:var(--blue)}
.ds,.v p,.panel .r p,.steps div p,.panel .r h3,.v h3,.steps div h3{text-shadow:none}
.hd,h1,h2{color:#0E1A28}
.lede{color:rgba(22,40,60,.82);font-weight:400}
.svc span{color:rgba(22,40,60,.7);font-weight:600}
.badge{color:rgba(22,40,60,.8);background:rgba(11,76,232,.06);border-left-color:var(--blue)}
.btn{background:#0E1A28;color:#fff;box-shadow:0 6px 18px rgba(14,26,40,.14)}
.btn:hover{background:var(--blue);color:#fff}
.btn-ghost{background:transparent;color:#16283C;border:1px solid rgba(22,40,60,.28);text-shadow:none}
.btn-ghost:hover{background:rgba(22,40,60,.05);color:#16283C}
.nav{background:rgba(255,255,255,.86);border-bottom:1px solid rgba(22,40,60,.10)}
.nav ul a,.nav .cta{color:#16283C}
.nav .cta{background:transparent;border-color:rgba(22,40,60,.22)}
.nav .cta:hover{background:rgba(22,40,60,.05)}
.glass,.panel,.v,.card,.steps div,.grid7 .p{background:rgba(255,255,255,.78);backdrop-filter:blur(10px)}
.panel,.v,.card,.det{border:1px solid rgba(22,40,60,.12)}
.panel .r{border-bottom-color:rgba(22,40,60,.10)}
.steps,.grid7{background:rgba(22,40,60,.12);border-color:rgba(22,40,60,.12)}
.steps div,.grid7 .p{background:#fff}
.grid7 .p:hover,.steps div:hover{background:rgba(11,76,232,.04)}
.card .ph{background:rgba(22,40,60,.04)}
.v ul li{color:rgba(22,40,60,.7);border-color:rgba(22,40,60,.18)}
footer{border-top-color:rgba(22,40,60,.12)}
footer p,footer nav a{color:rgba(22,40,60,.65)}
footer nav a:hover{color:var(--blue)}