/* NETSPOT: nền tảng dùng chung cho mọi trang. Token, nền sao, thanh nav, nút. */
:root{
  --canvas:#050C1E; --canvas-deep:#020814; --panel:#0C1730; --panel-hi:#142140;
  --line:#1E2C4E; --line-strong:#55628F;
  --cyan:#7ED8EC; --cyan-dim:#4E93AC; --cyan-whisper:#223851;
  --accent:#CFC4FF; --accent-hover:#E2DBFF; --accent-glow:#8E7FC4; --accent-muted:#3D3566;
  --text-primary:#EDF1FB; --text-secondary:#9BA6C8;
  --display:"Unbounded",system-ui,sans-serif;
  --body:"Be Vietnam Pro",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --tshadow:0 1px 2px rgba(3,5,14,.95),0 3px 12px rgba(3,5,14,.8),0 10px 44px rgba(3,5,14,.82);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --gut:clamp(20px,5vw,72px);
  --rail:clamp(20px,4vw,54px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{overflow-x:hidden;overflow-x:clip}
body{margin:0;background:var(--canvas);color:var(--text-primary);font-family:var(--body);
  -webkit-font-smoothing:antialiased;line-height:1.62;font-size:16px}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul{list-style:none;padding:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:#0B0F1E;
  padding:12px 20px;border-radius:0 0 10px 0;font-weight:600;text-decoration:none}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:5px}

/* one environment behind everything */
/* THE SKY: three fixed layers behind everything. Every one of them animates
   transform and opacity only, on its own compositor layer, so the whole thing is
   a GPU job and costs the scroll nothing. */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(1200px 760px at 78% 8%,rgba(140,130,214,.13),transparent 62%),
    radial-gradient(980px 660px at 12% 84%,rgba(78,147,172,.11),transparent 60%),
    var(--canvas)}

/* 1. the star vault. It turns on its own, and turns further as you scroll. */
.vault{position:absolute;left:50%;top:50%;width:190vmax;height:190vmax;margin:-95vmax 0 0 -95vmax;
  will-change:transform;transform:rotate(calc(var(--sky,0)*1deg))}
.vault-in{position:absolute;inset:0;will-change:transform;
  animation:spin 240s linear infinite;
  background-repeat:no-repeat;
  background-image:
    radial-gradient(1.7px 1.7px at 18% 12%,rgba(232,242,255,.95),transparent),
    radial-gradient(1.2px 1.2px at 63% 7%,rgba(198,220,255,.7),transparent),
    radial-gradient(2.1px 2.1px at 41% 23%,rgba(255,255,255,.9),transparent),
    radial-gradient(1.3px 1.3px at 84% 18%,rgba(190,215,255,.66),transparent),
    radial-gradient(1.6px 1.6px at 9% 34%,rgba(226,238,255,.8),transparent),
    radial-gradient(1.1px 1.1px at 72% 31%,rgba(180,205,250,.6),transparent),
    radial-gradient(2.3px 2.3px at 52% 44%,rgba(255,252,240,.92),transparent),
    radial-gradient(1.4px 1.4px at 27% 51%,rgba(214,232,255,.72),transparent),
    radial-gradient(1.2px 1.2px at 91% 47%,rgba(200,222,255,.62),transparent),
    radial-gradient(1.8px 1.8px at 14% 66%,rgba(236,244,255,.85),transparent),
    radial-gradient(1.1px 1.1px at 58% 62%,rgba(186,210,252,.58),transparent),
    radial-gradient(2px 2px at 78% 71%,rgba(250,250,255,.88),transparent),
    radial-gradient(1.3px 1.3px at 35% 78%,rgba(206,226,255,.68),transparent),
    radial-gradient(1.5px 1.5px at 66% 88%,rgba(228,240,255,.78),transparent),
    radial-gradient(1.1px 1.1px at 22% 93%,rgba(192,214,252,.6),transparent),
    radial-gradient(1.9px 1.9px at 88% 84%,rgba(240,246,255,.86),transparent),
    radial-gradient(1.2px 1.2px at 46% 15%,rgba(196,218,255,.64),transparent),
    radial-gradient(1.4px 1.4px at 5% 55%,rgba(220,234,255,.7),transparent),
    radial-gradient(1.1px 1.1px at 95% 62%,rgba(188,212,252,.56),transparent),
    radial-gradient(1.6px 1.6px at 31% 36%,rgba(230,240,255,.76),transparent)}
@keyframes spin{to{transform:rotate(360deg)}}

/* 2. aurora ribbons. The blur is baked in once and never animated,
   so these are cheap rasters the GPU just slides around. */
.aur{position:absolute;inset:-25% -20%;will-change:transform,opacity;
  transform:scaleY(calc(1 + var(--gust,0)*.20));opacity:calc(.72 + var(--gust,0)*.28)}
.aur i{position:absolute;left:-14%;width:128%;opacity:0;
  transform:translate3d(0,0,0) rotate(-8deg);will-change:transform,opacity;
  animation:aur 34s ease-in-out infinite}
.aur i:nth-child(1){top:6%;height:34vmax;animation-delay:-4s;
  background:radial-gradient(ellipse 46% 50% at 42% 50%,rgba(126,216,236,.30) 0%,rgba(126,216,236,.19) 26%,rgba(140,130,214,.11) 50%,rgba(140,130,214,.04) 72%,transparent 88%)}
.aur i:nth-child(2){top:40%;height:28vmax;animation-delay:-17s;animation-duration:46s;
  background:radial-gradient(ellipse 52% 50% at 58% 50%,rgba(140,130,214,.25) 0%,rgba(140,130,214,.16) 28%,rgba(126,216,236,.10) 54%,rgba(126,216,236,.03) 74%,transparent 89%)}
.aur i:nth-child(3){top:70%;height:31vmax;animation-delay:-28s;animation-duration:58s;
  background:radial-gradient(ellipse 50% 50% at 48% 50%,rgba(78,147,172,.22) 0%,rgba(207,196,255,.09) 30%,rgba(140,130,214,.15) 56%,rgba(140,130,214,.04) 76%,transparent 90%)}
@keyframes aur{
  0%,100%{opacity:.46;transform:translate3d(-7%,0,0) rotate(-8deg) scaleY(1)}
  35%    {opacity:.92;transform:translate3d(4%,-2.5vmax,0) rotate(-3deg) scaleY(1.20)}
  68%    {opacity:.62;transform:translate3d(-2%,2vmax,0) rotate(-11deg) scaleY(.88)}
}

/* 3. the drifting near field, the layer closest to the reader */
.motes{position:absolute;inset:-14%;opacity:.5;will-change:transform;
  transform:translate3d(0,calc(var(--sky,0)*-0.35px),0) scale(calc(1 + var(--gust,0)*.05));
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%,rgba(220,232,255,.55),transparent),
    radial-gradient(1.2px 1.2px at 74% 14%,rgba(200,220,255,.45),transparent),
    radial-gradient(1.6px 1.6px at 42% 68%,rgba(235,240,255,.5),transparent),
    radial-gradient(1.1px 1.1px at 88% 58%,rgba(190,215,255,.42),transparent),
    radial-gradient(1.3px 1.3px at 27% 86%,rgba(225,235,255,.46),transparent),
    radial-gradient(1px 1px at 61% 40%,rgba(180,205,250,.4),transparent),
    radial-gradient(1.5px 1.5px at 8% 54%,rgba(230,238,255,.44),transparent),
    radial-gradient(1.2px 1.2px at 95% 88%,rgba(205,224,255,.4),transparent)}

/* THE SIGNATURE: the descent rail. The hero's depth meter, continued down the whole page. */
.rail{position:fixed;left:var(--rail);top:96px;bottom:34px;width:1px;z-index:40;pointer-events:none;
  background:linear-gradient(rgba(126,216,236,.05),rgba(126,216,236,.16),rgba(126,216,236,.05));
  opacity:0;transition:opacity .7s var(--ease-soft)}
.rail.on{opacity:1}
.rail i{position:absolute;left:0;top:0;width:1px;height:calc(var(--rp,0)*100%);
  background:linear-gradient(rgba(126,216,236,.25),var(--cyan))}
.rail b{position:absolute;left:-3.5px;top:calc(var(--rp,0)*100%);width:8px;height:8px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 16px rgba(207,196,255,.9);margin-top:-4px}
@media (max-width:900px){.rail{display:none}}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;gap:22px;padding:0 var(--gut);height:72px;
  background:linear-gradient(rgba(4,8,20,.88),rgba(4,8,20,.32) 62%,rgba(4,8,20,0))}
.wm{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none}
.wm .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 14px rgba(207,196,255,.9);flex:none}
.wm .t{font-family:var(--display);font-weight:700;font-size:clamp(14px,1.5vw,17px);letter-spacing:.17em}
.wm .t b{color:var(--accent);font-weight:700}
.nav ul{display:flex;gap:clamp(14px,2.2vw,32px);font-size:14px;color:var(--text-secondary)}
.nav ul a{text-decoration:none;transition:color .3s var(--ease)}
.nav ul a:hover{color:var(--text-primary)}
@media (max-width:900px){.nav ul{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--body);font-weight:600;font-size:15px;line-height:1;
  padding:14px 26px;border-radius:999px;text-decoration:none;border:1px solid transparent;
  transition:background .32s var(--ease),color .32s var(--ease),border-color .32s var(--ease),
             box-shadow .32s var(--ease),transform .32s var(--ease)}
.btn.p{background:var(--accent);color:#0B0F1E}
.btn.p:hover{background:var(--accent-hover);box-shadow:0 0 38px rgba(207,196,255,.34);transform:translateY(-1px)}
.btn.s{border-color:var(--line-strong);color:var(--text-primary)}
.btn.s:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-1px)}
.btn.sm{padding:11px 20px;font-size:14px}
@media (pointer:coarse){.btn{min-height:44px}}