:root{
  --deep:#031634; --navy:#06204a; --navy2:#0b2d63; --sea:#0f3f86;
  --foam:#cfe3ff; --white:#fff; --ink:#eef4ff; --dim:#8ea7cf; --aqua:#7fe3ff;
  --line:rgba(207,227,255,.18);
  /* names used by the swarm block */
  --blue:#7fb6ff; --ice:#cfe3ff;
  --display:'Bricolage Grotesque',Impact,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --body:'Bricolage Grotesque',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--deep);color:var(--ink);font-family:var(--body);min-width:1180px;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;text-transform:none}
.mono{font-family:var(--mono)}
.label{font-size:14px;letter-spacing:.32em;color:var(--aqua);margin-bottom:22px}

/* split letters (lift in as an agent builds them) */
.w{display:inline-block;white-space:nowrap}
.ch{display:inline-block;transform:translateY(.45em);opacity:0;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .6s;transition-delay:calc(var(--i) * 28ms)}
.lift .ch{transform:none;opacity:1}
.bobbing .ch{animation:letterbob 4.2s ease-in-out infinite;animation-delay:calc(var(--i) * -.32s)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:800;
  font-size:14px;letter-spacing:.12em;padding:12px 20px;border-radius:999px;cursor:pointer;border:1.5px solid var(--white);
  transition:transform .2s,box-shadow .2s,background .2s,color .2s}
.btn.solid{background:var(--white);color:var(--navy);box-shadow:0 0 28px rgba(207,227,255,.35)}
.btn.solid:hover{transform:translateY(-2px);box-shadow:0 0 48px rgba(207,227,255,.7)}
.btn.ghost{background:transparent;color:var(--white)}
.btn.ghost:hover{background:rgba(255,255,255,.12)}
.btn.big{font-size:17px;padding:20px 32px}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:14px 56px;background:rgba(3,22,52,.6);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:800;font-stretch:75%;font-size:28px;letter-spacing:.02em}
.brand img{border-radius:50%;box-shadow:0 0 0 2px var(--white)}
.links{display:flex;gap:34px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.links a:hover{color:var(--white)}
.nav-cta{display:flex;gap:10px}

/* hero */
.hero{position:relative;min-height:max(100vh,860px);display:grid;grid-template-columns:1.2fr .8fr;align-items:center;
  gap:20px;padding:110px 56px 60px;overflow:hidden}
.hero-sea{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.8) saturate(1.1);animation:sea 26s ease-in-out infinite alternate}
.hero::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(3,22,52,.9) 0%,rgba(3,22,52,.62) 48%,rgba(3,22,52,.18) 100%),
             linear-gradient(0deg,var(--deep) 0%,transparent 22%)}
.hero-copy{position:relative;z-index:3}
.kicker{display:flex;align-items:center;gap:10px;font-size:14px;letter-spacing:.26em;color:var(--foam)}
.kicker b{color:var(--white)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--aqua);box-shadow:0 0 12px var(--aqua);animation:blink 1.6s infinite}
.giant{font-family:var(--display);font-weight:800;font-stretch:75%;line-height:.8;letter-spacing:-.01em;text-transform:uppercase}
.giant .line{display:block}
.giant em{font-size:1.12em;line-height:.7}
.hero .giant{font-size:200px;margin:26px 0 34px}
.hero .giant em{color:var(--foam)}
.lede{font-size:23px;line-height:1.45;color:#d3e1fa;max-width:600px}
.ca-bar{display:flex;align-items:stretch;gap:10px;margin-top:34px;max-width:760px}
.ticker{display:flex;align-items:center;padding:0 20px;font-family:var(--display);font-weight:800;font-stretch:75%;font-size:32px;
  color:var(--navy);background:var(--white);border-radius:14px}
.ca-box{flex:1;min-width:420px;padding:11px 18px;border:1.5px solid var(--line);border-radius:14px;background:rgba(3,22,52,.72);backdrop-filter:blur(6px)}
.ca-box small{display:block;font-size:11px;letter-spacing:.24em;color:var(--dim);margin-bottom:5px}
.ca-box code{font-size:19px;font-weight:700;color:var(--white);word-break:break-all}
.btn.copy{border-radius:14px;background:rgba(255,255,255,.1);color:var(--white);min-width:110px}
.btn.copy:hover{background:var(--white);color:var(--navy)}
.btn.copy.ok{background:var(--aqua);border-color:var(--aqua);color:var(--navy)}
.cta{display:flex;gap:14px;margin-top:16px}

.hero-cat{position:relative;z-index:2;height:min(84vh,780px);justify-self:center;align-self:center;aspect-ratio:507/1000;margin-top:-30px}
.bob{position:relative;height:100%;animation:bob 6.5s ease-in-out infinite;translate:var(--px,0) var(--py,0);transition:translate .4s ease-out}
.cat{position:relative;height:100%;width:auto;filter:drop-shadow(0 0 40px rgba(207,227,255,.35)) drop-shadow(0 24px 30px rgba(0,8,30,.55))}
.reflect{position:absolute;top:100%;left:0;height:100%;width:auto;transform:scaleY(-1);opacity:.2;filter:blur(2px);
  -webkit-mask-image:linear-gradient(0deg,#000 0%,transparent 34%);mask-image:linear-gradient(0deg,#000 0%,transparent 34%)}
.rings{position:absolute;left:50%;bottom:-2%;width:150%;height:110px;transform:translateX(-50%)}
.rings i{position:absolute;inset:0;border:2px solid rgba(207,227,255,.55);border-radius:50%;opacity:0;animation:ripple 5.4s ease-out infinite}
.rings i:nth-child(2){animation-delay:1.8s}.rings i:nth-child(3){animation-delay:3.6s}

/* marquee */
.marquee{overflow:hidden;background:var(--white);color:var(--navy);padding:18px 0}
.track{display:flex;gap:28px;width:max-content;animation:marquee 34s linear infinite;font-weight:800;font-size:22px;letter-spacing:.16em}
.track i{font-style:normal;opacity:.4}
.track .b{color:var(--sea)}

/* section heads */
section{position:relative}
.sec-head{padding:140px 56px 56px}
.huge{font-family:var(--display);font-weight:800;font-stretch:75%;font-size:150px;line-height:.86;text-transform:uppercase;max-width:1320px}
.huge em{color:var(--foam);font-size:1.1em}

/* the float (banner) */
.banner{position:relative;overflow:hidden;aspect-ratio:3/1}
.banner img{width:100%;height:100%;object-fit:cover;animation:drift 22s ease-in-out infinite alternate}
.banner::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 90% at 50% 50%,transparent 50%,rgba(3,22,52,.6))}
.over{position:absolute;top:50%;transform:translateY(-50%);z-index:2;font-family:var(--display);font-weight:800;font-stretch:75%;
  font-size:130px;line-height:.8;text-shadow:0 10px 40px rgba(0,10,40,.55)}
.over.l{left:4%}
.over.r{right:5%}
.over em{font-size:180px;color:var(--white)}

/* manifesto */
.manifesto{padding:160px 56px 150px;background:linear-gradient(180deg,var(--deep),var(--navy) 50%,var(--deep))}
.mline{font-family:var(--display);font-weight:800;font-stretch:75%;font-size:122px;line-height:.98;text-transform:uppercase;color:rgba(238,244,255,.35)}
.mline .hl{color:var(--white)}
.mline em{color:var(--white);font-size:1.18em}

/* horizon */
.profile{position:relative;aspect-ratio:3/1;overflow:hidden}
.profile img{width:100%;height:100%;object-fit:cover}
.profile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,22,52,.55),transparent 40%)}
.tag{position:absolute;left:56px;bottom:30px;z-index:2;font-size:13px;letter-spacing:.2em;color:var(--foam);
  background:rgba(3,22,52,.7);border:1px solid var(--line);padding:9px 14px;border-radius:999px}
.tag b{color:var(--white)}

/* ritual */
.ritual{display:grid;grid-template-columns:600px 1fr;gap:80px;padding:150px 56px 150px;align-items:start}
.rit-art{position:sticky;top:100px;aspect-ratio:4/5;border-radius:24px;overflow:hidden;box-shadow:0 0 80px rgba(127,182,255,.22)}
.rit-art img{width:100%;height:100%;object-fit:cover}
.rit-list{padding-top:20px}
.step{padding:30px 0 42px;border-bottom:1px solid var(--line);position:relative}
.step .n{position:absolute;top:44px;right:0;font-size:16px;color:var(--aqua);letter-spacing:.2em}
.step h3{font-family:var(--display);font-weight:800;font-stretch:75%;font-size:170px;line-height:.85;transition:color .3s,transform .4s}
.step h3 em{font-size:1.1em}
.step:hover h3{color:var(--foam);transform:translateY(-8px)}
.step p{font-size:22px;line-height:1.45;color:#c6d6f2;margin-top:14px;max-width:560px}

/* buy */
.buy{background:linear-gradient(180deg,var(--deep),var(--navy))}
.buy-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:0 56px 150px}
.buy-steps li{padding:34px 30px 38px;border:1px solid var(--line);border-radius:22px;background:rgba(3,22,52,.6);transition:transform .25s,border-color .25s}
.buy-steps li:hover{transform:translateY(-8px);border-color:var(--white)}
.buy-steps .n{font-family:var(--display);font-weight:800;font-stretch:75%;font-size:110px;line-height:.8;color:transparent;-webkit-text-stroke:2px var(--foam)}
.buy-steps h3{font-family:var(--display);font-weight:800;font-stretch:75%;font-size:44px;margin:22px 0 10px}
.buy-steps p{font-size:17px;line-height:1.5;color:var(--dim)}

/* finale */
.finale{position:relative;min-height:570px;display:flex;align-items:center;padding:56px;overflow:hidden}
.finale-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 50%}
.finale::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(3,22,52,.85) 0%,rgba(3,22,52,.4) 45%,transparent 60%)}
.finale-copy{position:relative;z-index:2}
.finale .giant{font-size:180px;margin-bottom:10px}
.finale .giant em{color:var(--foam)}

.foot{display:flex;justify-content:space-between;align-items:center;gap:40px;padding:28px 56px;font-size:12px;color:var(--dim);letter-spacing:.06em;border-top:1px solid var(--line)}
.foot span:first-child{display:flex;align-items:center;gap:10px;color:var(--white);font-weight:800;letter-spacing:.2em;white-space:nowrap}
.foot img{border-radius:50%}

.toast{position:fixed;left:50%;bottom:34px;transform:translate(-50%,20px);z-index:9200;background:var(--white);color:var(--navy);font-weight:800;
  letter-spacing:.16em;font-size:14px;padding:14px 24px;border-radius:999px;opacity:0;visibility:hidden;transition:.3s}
.toast.on{opacity:1;visibility:visible;transform:translate(-50%,0)}

@keyframes blink{50%{opacity:.25}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-.8deg)}50%{transform:translateY(-22px) rotate(.8deg)}}
@keyframes letterbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.06em)}}
@keyframes ripple{0%{transform:scale(.35);opacity:0}15%{opacity:.75}100%{transform:scale(1.25);opacity:0}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes sea{from{transform:scale(1.04) translateX(0)}to{transform:scale(1.12) translateX(-2%)}}
@keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.08) translateX(-1%)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .ch{transform:none;opacity:1}
}

/* ---------- cursor appear effect (swarm.js) ---------- */
.swarm-on [data-build]{clip-path:inset(0 100% 100% 0)}
.swarm-on [data-build].building{clip-path:inset(0);transition:clip-path .75s cubic-bezier(.65,0,.35,1)}
.swarm-on [data-build].built{clip-path:none}
.sw-grid{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:0;transition:opacity .8s;
  background-image:linear-gradient(rgba(207,227,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(207,227,255,.07) 1px,transparent 1px);
  background-size:24px 24px}
.sw-active .sw-grid{opacity:1}
.sw-layer{position:absolute;top:0;left:0;width:100%;height:0;z-index:9000;pointer-events:none}
.sw-layer.sw-hidden .sw-agent{opacity:0!important}
.sw-agent{position:absolute;top:0;left:0;will-change:transform;transition:opacity .35s}
.sw-agent svg{display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));transform-origin:2px 2px;transition:transform .35s}
.sw-tag{position:absolute;left:18px;top:22px;font:700 11px/1 var(--mono);letter-spacing:.06em;color:#02060f;
  padding:4px 7px;border-radius:3px;white-space:nowrap;transition:opacity .35s}
.sw-agent.idle{opacity:.3}
.sw-agent.idle svg{transform:scale(.75)}
.sw-agent.idle .sw-tag{opacity:.6;transform:scale(.85);transform-origin:left top}
.sw-agent.near{opacity:.06}
.sw-ghost{position:absolute;border:1px dashed rgba(207,227,255,.34);border-radius:3px;background:rgba(127,182,255,.04)}
.sw-box{position:absolute;border:1.5px solid var(--c);background:color-mix(in srgb,var(--c) 9%,transparent);transition:opacity .5s,border-color .2s}
.sw-box i{position:absolute;width:7px;height:7px;background:#fff;border:1.5px solid var(--c)}
.sw-box .h1{left:-4px;top:-4px}.sw-box .h2{right:-4px;top:-4px}.sw-box .h3{left:-4px;bottom:-4px}.sw-box .h4{right:-4px;bottom:-4px}
.sw-label{position:absolute;left:-1.5px;bottom:100%;margin-bottom:5px;font:700 11px/1 var(--mono);letter-spacing:.06em;color:#02060f;
  padding:4px 7px;border-radius:3px 3px 3px 0;white-space:nowrap}
.sw-size{position:absolute;right:0;top:100%;margin-top:6px;font:600 10px/1 var(--mono);color:var(--c);background:rgba(3,22,52,.85);padding:3px 5px;border-radius:2px;white-space:nowrap}
.sw-box.done{--c:#22c55e}
.sw-box.done .sw-label{background:#22c55e!important}
.sw-box.out{opacity:0}
.sw-bar{position:fixed;left:50%;bottom:22px;transform:translate(-50%,30px);z-index:9100;display:flex;align-items:center;gap:14px;
  font:700 12px/1 var(--mono);letter-spacing:.14em;color:var(--ice);background:rgba(3,22,52,.88);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:999px;padding:10px 12px 10px 18px;opacity:0;transition:opacity .5s,transform .5s}
.sw-active .sw-bar{opacity:1;transform:translate(-50%,0)}
.sw-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 10px #22c55e;animation:blink 1s infinite}
.sw-count{color:#fff}
.sw-prog{width:140px;height:4px;background:rgba(207,227,255,.15);border-radius:2px;overflow:hidden}
.sw-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),#22c55e);transition:width .4s}
.sw-hide{font:700 11px/1 var(--mono);letter-spacing:.12em;color:var(--ice);background:transparent;border:1px solid var(--line);
  border-radius:999px;padding:7px 12px;cursor:pointer}
.sw-hide:hover{border-color:var(--white);color:#fff}