@font-face{font-family:Figtree;src:url(/figtree.woff2) format("woff2");font-weight:300 900;font-display:swap}

:root{
  --ground:#07100D;
  --ground-2:#0A1612;
  --card:rgba(18,38,31,.55);
  --card-solid:#0E1D18;
  --card-hi:rgba(26,54,44,.75);
  --line:rgba(76,245,176,.14);
  --line-hi:rgba(76,245,176,.55);
  --mint:#4CF5B0;
  --mint-lt:#D6FFEF;
  --white:#EEF6F2;
  --muted:#9DB5AA;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html{background:var(--ground);color-scheme:dark;-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;min-height:100dvh;color:var(--white);
  font-family:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;position:relative;
}
a{color:inherit}
::selection{background:var(--mint);color:var(--ground)}

/* ---------- ambient background ---------- */
.bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bg::before{ /* layered rings, echoing the cut-open sphere */
  content:"";position:absolute;left:50%;top:150px;width:1600px;height:1600px;translate:-50% -50%;
  background:repeating-radial-gradient(circle,rgba(76,245,176,.10) 0 1px,transparent 1.6px 56px);
  -webkit-mask:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 22%,transparent 52%);
  mask:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 22%,transparent 52%);
  animation:rings 14s var(--ease) infinite alternate;
}
.bg::after{ /* top glow */
  content:"";position:absolute;left:50%;top:-260px;width:1100px;height:760px;translate:-50% 0;
  background:radial-gradient(closest-side,rgba(76,245,176,.16),rgba(76,245,176,.05) 55%,transparent);
}
.grain{position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes rings{from{scale:1;opacity:.85}to{scale:1.06;opacity:1}}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:468px;margin:0 auto;padding:20px 16px 36px;display:flex;flex-direction:column;align-items:center}
.top{width:100%;display:flex;justify-content:flex-end;min-height:44px}
.icon-btn{
  display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--card);border:1px solid var(--line);color:var(--white);cursor:pointer;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:border-color .2s,background .2s,transform .2s var(--ease);
}
.icon-btn:hover{border-color:var(--line-hi);background:var(--card-hi)}
.icon-btn:active{transform:scale(.94)}
.icon-btn svg{width:19px;height:19px}

/* ---------- hero ---------- */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:8px}
.mark-wrap{position:relative;width:148px;height:148px}
.mark-wrap::before{content:"";position:absolute;inset:-34px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(76,245,176,.42),rgba(76,245,176,.08) 60%,transparent);
  animation:breathe 5.5s ease-in-out infinite}
.mark{position:relative;width:148px;height:148px;display:block;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.55));animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes breathe{0%,100%{opacity:.75;scale:.96}50%{opacity:1;scale:1.04}}

.pill{display:inline-flex;align-items:center;gap:8px;margin-top:26px;padding:6px 12px 6px 10px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);font-size:13px;font-weight:600;letter-spacing:.3px;color:var(--mint-lt)}
.live{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 rgba(76,245,176,.6);animation:ping 2.4s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(76,245,176,.55)}80%,100%{box-shadow:0 0 0 9px rgba(76,245,176,0)}}

h1{font-weight:800;font-size:clamp(52px,15vw,66px);letter-spacing:-.03em;line-height:.95;margin:16px 0 12px}
.tag{margin:0;font-weight:700;font-size:19px;color:var(--mint)}
.intro{color:var(--muted);font-size:16px;line-height:1.55;margin:14px 0 0;max-width:330px}

/* ---------- topics marquee ---------- */
.topics{width:calc(100% + 32px);margin:30px -16px 0;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.track{display:flex;width:max-content;animation:marquee 32s linear infinite}
.track ul{display:flex;gap:10px;list-style:none;margin:0;padding:0 10px 0 0}
.track li{white-space:nowrap;font-size:14px;font-weight:600;color:var(--muted);padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(14,29,24,.6)}
.track li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--mint);margin-right:8px;vertical-align:2px;opacity:.8}
@keyframes marquee{to{translate:-50% 0}}

/* ---------- links ---------- */
.section-label{align-self:flex-start;margin:34px 0 12px 4px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.links{width:100%;display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.link{
  position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px 14px 14px;border-radius:18px;
  text-decoration:none;color:var(--white);background:var(--card);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:border-color .25s,background .25s,transform .25s var(--ease),box-shadow .25s;
}
.link:hover{border-color:var(--line-hi);background:var(--card-hi);transform:translateY(-2px);
  box-shadow:0 10px 30px -12px rgba(76,245,176,.35)}
.link:active{transform:translateY(0) scale(.985)}
.link:focus-visible,.icon-btn:focus-visible,.copy:focus-visible,.foot a:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.tile{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:13px;
  background:linear-gradient(145deg,#183A2E,#0C1C16);border:1px solid rgba(255,255,255,.06)}
.tile svg{width:22px;height:22px;fill:#FFFFFF}
.txt{flex:1;min-width:0}
.name{display:block;font-weight:700;font-size:17px;line-height:1.2}
.handle{display:block;color:var(--muted);font-size:14px;margin-top:3px}
.go{flex:none;width:20px;height:20px;color:var(--mint);transition:translate .25s var(--ease)}
.link:hover .go{translate:4px 0}

/* contact card */
.contact{width:100%;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;border-radius:18px;
  border:1px dashed rgba(76,245,176,.32);background:rgba(10,22,18,.5)}
.contact a{flex:1;min-width:0;text-decoration:none;padding:6px 0}
.contact .name{font-size:16px}
.copy{flex:none;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:12px;cursor:pointer;
  font:600 14px/1 Figtree,system-ui,sans-serif;color:var(--ground);background:var(--mint);border:0;transition:filter .2s,transform .2s var(--ease)}
.copy:hover{filter:brightness(1.08)}
.copy:active{transform:scale(.95)}
.copy svg{width:16px;height:16px}

/* ---------- footer ---------- */
.foot{margin-top:44px;text-align:center;color:var(--muted);font-size:13px;line-height:1.7}
.foot b{color:var(--mint-lt);font-weight:700}
.foot a{color:var(--muted);text-underline-offset:3px}
.foot a:hover{color:var(--white)}

/* toast */
.toast{position:fixed;left:50%;bottom:28px;translate:-50% 20px;opacity:0;pointer-events:none;
  padding:10px 16px;border-radius:999px;background:var(--mint);color:var(--ground);font-weight:700;font-size:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.4);transition:opacity .25s,translate .25s var(--ease)}
.toast.show{opacity:1;translate:-50% 0}

/* entrance */
.rise{opacity:0;translate:0 14px;animation:rise .7s var(--ease) forwards}
@keyframes rise{to{opacity:1;translate:0 0}}
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}.d4{animation-delay:.35s}
.d5{animation-delay:.45s}.d6{animation-delay:.52s}.d7{animation-delay:.59s}.d8{animation-delay:.66s}.d9{animation-delay:.76s}

/* ---------- text pages (privacy, 404) ---------- */
.page{max-width:640px;margin:0 auto;padding:28px 16px 56px}
.back{display:inline-flex;align-items:center;gap:8px;color:var(--mint);text-decoration:none;font-weight:700;font-size:15px}
.back:hover{text-decoration:underline;text-underline-offset:3px}
.page h1{font-size:clamp(36px,9vw,48px);margin:28px 0 8px}
.page h2{font-size:20px;margin:32px 0 8px}
.page p,.page li{color:#C6D6CF;font-size:16px;line-height:1.65}
.page a{color:var(--mint)}
.page .meta{color:var(--muted);font-size:14px}
.center{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 16px}
.center .mark{width:110px;height:110px}

@media (min-width:900px){
  .wrap{padding-top:36px}
  .mark-wrap,.mark{width:164px;height:164px}
}

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

/* screen-reader only + skip link */
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip:focus{position:fixed!important;left:16px;top:16px;width:auto;height:auto;clip:auto;margin:0;padding:10px 14px;z-index:10;
  background:var(--mint);color:var(--ground);border-radius:10px;font-weight:700;text-decoration:none}