@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/space-mono-400.woff2) format("woff2")}
@font-face{font-family:Syne;font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/syne-var.woff2) format("woff2")}
:root{
  --abyss:#030a24; --deep:#06102e; --ocean:#0b1d51; --indigo:#3730a3; --peri:#a5b4fc;
  --cyan:#5ee7ff; --ice:#e0f7ff; --ink:#dbe7ff; --hue:0deg;
  --mx:0; --my:0;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; color:var(--ink); overflow-x:hidden;
  font:16px/1.65 "Space Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:radial-gradient(120% 80% at 50% 0%,#0d2a6b 0%,var(--deep) 45%,var(--abyss) 100%) fixed;
}
#field,.parallax{filter:hue-rotate(var(--hue))}
::selection{background:var(--cyan);color:var(--abyss)}
a{color:var(--cyan)}
.defs{position:absolute;width:0;height:0}

#field,#bubbles{position:fixed;inset:0;width:100%;height:100%;display:block}
#field{z-index:-3;opacity:.9}
#bubbles{z-index:20;pointer-events:none}
.grain{position:fixed;inset:-50%;z-index:-1;pointer-events:none;opacity:.07;
  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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(4) infinite}
@keyframes grain{25%{transform:translate(3%,-2%)}50%{transform:translate(-2%,4%)}75%{transform:translate(4%,2%)}}

/* parallax */
.parallax{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.layer{position:absolute;inset:0;will-change:transform}
.blob{position:absolute;opacity:.55;filter:blur(2px);mix-blend-mode:screen}
.b1{width:min(60vw,620px);left:-12vw;top:8vh}
.b2{width:min(46vw,480px);right:-8vw;top:38vh;opacity:.45}
.b3{width:min(30vw,300px);left:55vw;top:-4vh;opacity:.4}
.floaty{position:absolute;color:var(--peri);opacity:.5;font-size:28px;animation:bob 9s ease-in-out infinite}
.f1{left:12vw;top:70vh}.f2{left:80vw;top:18vh;color:var(--cyan);animation-duration:7s}
.f3{left:70vw;top:78vh;font-size:44px;color:#c7d2fe;animation-duration:13s}
.f4{left:6vw;top:30vh;font-size:56px;animation-duration:11s}
.f5{left:44vw;top:88vh;font-size:22px;color:var(--cyan)}
.eye{left:86vw;top:58vh;width:54px;height:34px;border-radius:50%;background:#e0f2fe;opacity:.85;
  box-shadow:0 0 30px #5ee7ff88;overflow:hidden;animation:bob 10s ease-in-out infinite, blink 6s infinite}
.eye i{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#7dd3fc,#1e1b4b 60%);
  transform:translate(calc(var(--mx)*12px),calc(var(--my)*7px))}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-22px) rotate(8deg)}}
@keyframes blink{0%,46%,50%,100%{clip-path:inset(0 0 0 0 round 50%)}48%{clip-path:inset(48% 0 48% 0 round 50%)}}

/* header */
.top{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:center;
  padding:14px clamp(16px,4vw,40px);font-size:13px;backdrop-filter:blur(6px);
  background:linear-gradient(#030a24cc,#030a2400)}
.logo{font-family:Syne,system-ui,sans-serif;font-weight:800;letter-spacing:.02em;text-decoration:none;color:var(--ice);font-size:18px}
.logo span{color:var(--peri);opacity:.6}
.status{margin:0;opacity:.75}
.status b{color:var(--cyan);font-weight:400}

/* hero */
main{position:relative;z-index:1}
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:90px 16px 40px}
.kicker{margin:0 0 6px;letter-spacing:.35em;text-transform:lowercase;font-size:12px;color:var(--peri)}
.title{margin:0;line-height:.9;font-family:Syne,system-ui,sans-serif;font-weight:800;
  font-size:clamp(30px,8.6vw,150px);letter-spacing:-.04em;white-space:nowrap}
.wob{display:inline-block;filter:url(#wobble);
  background:linear-gradient(100deg,#e0f7ff 0%,#5ee7ff 25%,#818cf8 50%,#22d3ee 75%,#e0f7ff 100%);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:flow 14s linear infinite}
.wob.split{background:none;color:#e0f7ff;text-shadow:0 0 40px #5ee7ff55}
.wob .ch{display:inline-block;transition:transform 1.4s cubic-bezier(.2,.8,.2,1);cursor:default;
  animation:tint 9s ease-in-out infinite;animation-delay:calc(var(--i) * -.7s)}
@keyframes tint{0%,100%{color:#e0f7ff}33%{color:#5ee7ff}66%{color:#8b9cff}}
.wob .ch.drift{transition-duration:.5s}
@keyframes flow{to{background-position:300% 0}}
.sub{margin:18px 0 0;font-size:clamp(14px,2.3vw,19px);opacity:.85}
.sub em{color:var(--cyan);font-style:normal}
.dive{margin-top:48px;display:inline-flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--peri);font-size:13px;letter-spacing:.2em}
.dive .arrow{font-size:22px;animation:bob 3s ease-in-out infinite}
.dive:hover span:first-child{letter-spacing:.6em;transition:letter-spacing .8s}

/* cards */
.card,.grid{width:min(880px,calc(100% - 32px));margin:0 auto 18vh}
.card{position:relative;padding:clamp(22px,4vw,44px);border-radius:38px 70px 44px 90px/60px 40px 80px 50px;
  background:linear-gradient(140deg,#1e3a8a44,#0b1d5122 60%,#4f46e533);
  border:1px solid #a5b4fc33;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 30px 80px -30px #000a, inset 0 1px 0 #ffffff14;
  transition:border-radius 2.4s ease, transform .9s ease}
.card:hover{border-radius:80px 40px 90px 36px/40px 80px 50px 70px}
.card.wide{width:min(1040px,calc(100% - 32px))}
.card.center{text-align:center}
h2{margin:0 0 14px;font-family:Syne,system-ui,sans-serif;font-weight:800;font-size:clamp(26px,5vw,48px);line-height:1.05;letter-spacing:-.02em;color:var(--ice)}
h2 i{color:var(--peri);font-style:italic;font-weight:500}
h2 small{font-size:.4em;font-weight:500;opacity:.6;letter-spacing:0}
h3{margin:0 0 8px;font-family:Syne,system-ui,sans-serif;font-size:22px;color:var(--cyan)}
p{margin:0 0 12px}
.faint{opacity:.6}
#currently{color:var(--cyan);display:inline-block;min-width:6ch}

/* map */
.map svg{width:100%;height:auto;max-height:220px;display:block;margin:4px 0 14px}
.coast{fill:none;stroke:var(--cyan);stroke-width:2;stroke-dasharray:6 8;animation:dash 30s linear infinite}
.coast.c2{stroke:var(--peri);opacity:.5;animation-direction:reverse}
@keyframes dash{to{stroke-dashoffset:-400}}
.pin{fill:#e0f7ff;filter:drop-shadow(0 0 8px #5ee7ff);animation:pin 4s ease-in-out infinite;transform-origin:158px 72px}
@keyframes pin{50%{transform:translate(14px,6px) scale(.8)}}
.map text{fill:var(--ink);font-size:11px;font-family:inherit}
.map text.faint{fill:var(--peri)}

/* ticker */
.ticker{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.ticker li{padding:14px 16px;border-radius:20px;background:#03091f66;border:1px solid #5ee7ff22;transition:transform .5s}
.ticker li:hover{transform:rotate(-2deg) translateY(-4px) scale(1.03)}
.ticker span{display:block;font-size:11px;letter-spacing:.2em;opacity:.6}
.ticker b{font-weight:400;color:var(--ice);font-size:18px}

/* tiles */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.tile{padding:24px;border-radius:30px;background:#0b1d5155;border:1px solid #818cf833;backdrop-filter:blur(8px);
  transition:transform .8s cubic-bezier(.3,1.6,.4,1),background .8s}
.tile:nth-child(2){transform:translateY(30px)}
.tile:hover{transform:translateY(-10px) rotate(1.5deg) skewX(-3deg);background:#1e3a8a77}

/* blues list */
.blues{list-style:none;margin:0;padding:0;counter-reset:b}
.blues li{counter-increment:b;display:flex;align-items:center;gap:14px;padding:12px 4px;border-bottom:1px dashed #a5b4fc2a;transition:padding .6s, letter-spacing .6s}
.blues li::before{content:"";width:28px;height:28px;flex:none;border-radius:50% 40% 55% 45%;background:var(--c);box-shadow:0 0 18px var(--c);transition:border-radius 1s, transform 1s}
.blues li span{margin-left:auto;font-size:12px;opacity:.45}
.blues li:hover{padding-left:22px;letter-spacing:.06em}
.blues li:hover::before{border-radius:30% 70% 40% 60%;transform:rotate(200deg) scale(1.3)}

/* dial */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:14px;border-radius:99px;margin:14px 0;
  background:linear-gradient(90deg,#0b1d51,#3730a3,#818cf8,#22d3ee,#a5f3fc);outline-offset:6px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;border-radius:44% 56% 60% 40%;background:#e0f7ff;box-shadow:0 0 20px #5ee7ff;cursor:grab}
input[type=range]::-moz-range-thumb{width:34px;height:34px;border:0;border-radius:44% 56% 60% 40%;background:#e0f7ff;box-shadow:0 0 20px #5ee7ff;cursor:grab}
.dial-read b{color:var(--cyan);font-weight:400}

/* faq */
details{border-top:1px solid #a5b4fc22;padding:12px 0}
details:last-child{border-bottom:1px solid #a5b4fc22}
summary{cursor:pointer;list-style:none;font-size:17px;color:var(--ice);transition:transform .5s,color .3s}
summary::-webkit-details-marker{display:none}
summary::before{content:"◌ ";color:var(--cyan)}
details[open] summary::before{content:"◍ "}
summary:hover{transform:translateX(10px) skewX(-8deg);color:var(--cyan)}
details p{margin:10px 0 0 26px;opacity:.85}

/* button */
#nothing{font:inherit;font-size:16px;color:var(--abyss);background:linear-gradient(120deg,#a5f3fc,#818cf8);border:0;
  padding:16px 34px;border-radius:999px;cursor:pointer;box-shadow:0 10px 40px -8px #5ee7ffaa;
  transition:transform .6s cubic-bezier(.3,1.8,.4,1),border-radius .8s,filter .4s;margin:6px 0 16px}
#nothing:hover{border-radius:40% 60% 50% 70%/60% 40% 70% 50%;filter:hue-rotate(-25deg)}
#nothing:active{transform:scale(.92) rotate(-3deg)}
#nothing:focus-visible,a:focus-visible,summary:focus-visible{outline:2px dashed var(--cyan);outline-offset:4px}

footer{text-align:center;padding:40px 16px 60px;font-size:13px;position:relative;z-index:1}

/* reveal */
[data-reveal]{opacity:0;transform:translateY(40px) scale(.98);filter:blur(6px);transition:opacity 1.4s ease,transform 1.4s ease,filter 1.4s ease}
[data-reveal].in{opacity:1;transform:none;filter:none}
.no-js [data-reveal]{opacity:1;transform:none;filter:none}

@media (max-width:640px){
  .b1{width:90vw;left:-30vw}.b2{width:70vw;right:-25vw}.b3{width:50vw;left:50vw}
  .eye{left:78vw;top:64vh}
  .tile:nth-child(2){transform:none}
  .card{border-radius:30px 50px 34px 60px/44px 30px 56px 40px}
  .status{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .wob{filter:none}
  [data-reveal]{opacity:1;transform:none;filter:none}
  .grain{display:none}
}