/* ══════════════════════════════════════════════════════════
   Команда смурфиков — Deep Space Terminal
   ══════════════════════════════════════════════════════════ */

:root{
  --bg:            #000000;
  --bg-soft:       #04070d;
  --panel:         rgba(10, 18, 30, .5);
  --panel-line:    rgba(120, 190, 255, .13);
  --panel-line-hi: rgba(130, 210, 255, .32);

  --ink:           #eaf4ff;
  --ink-dim:       #93a9c4;
  --ink-faint:     #5a6f8c;

  /* one accent system: cyan → smurf-blue → deep-blue. no third hue. */
  --smurf:         #3aa0ff;
  --cyan:          #00d4ff;
  --deep:          #1b7fe0;
  --amber:         #fbbf24;

  --glow-1:        rgba(58, 160, 255, .55);
  --glow-2:        rgba(0, 212, 255, .38);

  --ok:            #46e6a8;
  --err:           #ff5f7e;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;

  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --maxw: 1180px;
  --pad:  clamp(20px, 5vw, 48px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  min-height:100vh;
}

h1,h2,h3{ margin:0; line-height:1.05; letter-spacing:-.02em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

::selection{ background:rgba(58,160,255,.32); color:#fff; }

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:4px;
}

.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* ── OFFSCREEN PAUSE ─────────────────────────────────────────
   Only things that genuinely leave the viewport park here. The old .bg-paused
   also stopped .neb/.pulse/.tcaret once you scrolled one screen down — but
   those sit on fixed layers that stay in view the whole page, so it just froze
   visible animation. The rAF loop is now gated on document.hidden alone.
   ────────────────────────────────────────────────────────── */

#team.anim-paused .ava-ring{ animation-play-state:paused; }

/* ── BACKDROP LAYERS ─────────────────────────────────────── */

#sky{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:0;
  display:block;
  pointer-events:none;
}

/* ── CURSOR GLOW ─────────────────────────────────────────
   A light the pointer carries across the sky. Positioned by transform from
   inside the one rAF loop — writing .style on every mousemove would touch
   layout hundreds of times a second for a purely decorative effect.
   Hidden until JS places it, so it never flashes in the corner on load. */
#cursor-glow{
  position:fixed;
  top:0; left:0;
  z-index:1;
  width:520px; height:520px;
  margin:-260px 0 0 -260px;   /* centre on the pointer */
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  transition:opacity .45s var(--ease);
  background:radial-gradient(circle closest-side,
    rgba(58,160,255,.20), rgba(0,212,255,.09) 45%, transparent 72%);
  will-change:transform;
  contain:strict;
}
#cursor-glow.on{ opacity:1; }

/* No pointer to follow — and a phone would just show a blob stuck mid-screen. */
@media (hover: none), (pointer: coarse){
  #cursor-glow{ display:none; }
}

#nebula{
  position:fixed; inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.neb{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  opacity:.5;
  will-change:transform;
}
.neb-1{
  width:70vmax; height:70vmax;
  top:-28vmax; left:-22vmax;
  background:radial-gradient(circle at 50% 50%, rgba(20,90,180,.5), rgba(10,40,90,.16) 48%, transparent 70%);
  animation:drift-a 46s var(--ease-soft) infinite alternate;
}
.neb-2{
  width:58vmax; height:58vmax;
  top:38vh; right:-24vmax;
  background:radial-gradient(circle at 50% 50%, rgba(90,70,220,.34), rgba(40,20,110,.12) 50%, transparent 72%);
  animation:drift-b 58s var(--ease-soft) infinite alternate;
}
.neb-3{
  width:64vmax; height:64vmax;
  bottom:-30vmax; left:18vw;
  background:radial-gradient(circle at 50% 50%, rgba(0,150,190,.26), rgba(0,60,90,.08) 52%, transparent 74%);
  animation:drift-a 68s var(--ease-soft) infinite alternate-reverse;
}
@keyframes drift-a{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(5vw,4vh,0) scale(1.12); }
}
@keyframes drift-b{
  from{ transform:translate3d(0,0,0) scale(1.08); }
  to  { transform:translate3d(-6vw,-5vh,0) scale(1); }
}


/* The .grain layer is gone: a viewport-sized fixed div with
   mix-blend-mode:overlay forces the whole page into a composited blend on
   every paint. The vignette below is a plain gradient — cheap — and carries
   the depth on its own. */
/* ── SMURFS ADRIFT ───────────────────────────────────────
   Five smurfs floating in the background, below the vignette so it seats them
   into the black instead of letting them sit on top of it. Kept to the edges:
   the copy runs down the middle. Transform-only animation — no backdrop-filter,
   no will-change (a transform animation gets its own layer anyway). */
#smurf-field{
  position:fixed; inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
  contain:strict;
}
.sm{
  position:absolute;
  height:clamp(112px, 15vh, 196px);
  width:auto;
  opacity:.22;
  /* They are flat cartoons on a deep-space page: a blue cast and softened
     contrast stop them reading as stickers pasted over the starfield. */
  filter:saturate(.82) brightness(.9) drop-shadow(0 0 26px rgba(58,160,255,.35));
  animation:sm-drift 34s ease-in-out infinite alternate;
}
.sm-1{ left:2.5%;  top:14%;  animation-duration:31s; animation-delay:-4s; }
.sm-2{ right:3%;   top:9%;   animation-duration:38s; animation-delay:-12s; }
.sm-3{ right:5.5%; bottom:8%; animation-duration:29s; animation-delay:-7s; }
.sm-4{ left:4%;    bottom:6%; animation-duration:41s; animation-delay:-19s; }
.sm-5{ right:26%;  top:47%;  animation-duration:35s; animation-delay:-25s; opacity:.15; }
/* Gargamel, lurking on the far side of the page from the crew. As is right. */
.sm-6{ left:19%;   bottom:9%; animation-duration:44s; animation-delay:-9s; }

@keyframes sm-drift{
  from{ transform:translate3d(0,0,0) rotate(-5deg); }
  to  { transform:translate3d(18px,-26px,0) rotate(4deg); }
}

@media (max-width: 900px){
  /* Fewer, smaller: on a phone the full cast crowds the copy and costs bytes
     for decoration nobody asked to download. Gargamel stays — he was asked for. */
  .sm{ height:clamp(84px, 11vh, 124px); opacity:.16; }
  .sm-3, .sm-5{ display:none; }
  .sm-6{ left:auto; right:4%; bottom:34%; }
}

.vignette{
  position:fixed; inset:0;
  z-index:2;
  pointer-events:none;
  background:radial-gradient(ellipse 120% 85% at 50% 42%, transparent 42%, rgba(0,0,0,.6) 100%);
}

/* ── TOPBAR ──────────────────────────────────────────────── */

.topbar{
  position:sticky; top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  max-width:var(--maxw);
  margin:0 auto;
  padding:18px var(--pad);
}
.topbar::before{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  background:linear-gradient(180deg, rgba(0,0,0,.82), rgba(0,0,0,0));
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);
  mask-image:linear-gradient(180deg,#000 55%,transparent);
  pointer-events:none;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--ink);
  font-family:var(--mono);
  font-size:14px;
  letter-spacing:.02em;
}
.brand-mark{
  display:grid; place-items:center;
  width:34px; height:34px;
  border-radius:11px;
  background:rgba(10,22,38,.7);
  border:1px solid var(--panel-line);
  box-shadow:0 0 20px rgba(58,160,255,.2), inset 0 0 14px rgba(58,160,255,.07);
  transition:box-shadow .4s var(--ease), transform .4s var(--ease);
}
.brand:hover .brand-mark{
  transform:translateY(-1px);
  box-shadow:0 0 30px rgba(58,160,255,.4), inset 0 0 18px rgba(58,160,255,.12);
}
.brand-dot{ color:var(--cyan); }

.topnav{
  display:flex;
  align-items:center;
  gap:6px;
}
.topnav a{
  color:var(--ink-dim);
  text-decoration:none;
  font-size:13.5px;
  padding:8px 13px;
  border-radius:999px;
  transition:color .3s var(--ease), background .3s var(--ease);
}
.topnav a:hover{ color:var(--ink); background:rgba(90,170,255,.08); }
.nav-cta{
  color:var(--ink) !important;
  border:1px solid var(--panel-line-hi);
  background:rgba(58,160,255,.07);
  box-shadow:0 0 18px rgba(58,160,255,.13);
}
.nav-cta:hover{ background:rgba(58,160,255,.16) !important; box-shadow:0 0 26px rgba(58,160,255,.28); }

/* ── LAYOUT ──────────────────────────────────────────────── */

main{
  position:relative;
  z-index:5;
}
.section{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(72px, 12vh, 132px) var(--pad);
}

.sec-head{ margin-bottom:clamp(34px, 5vw, 56px); max-width:640px; }
.sec-kicker{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cyan);
  opacity:.8;
  margin-bottom:14px;
}
.sec-title{
  font-size:clamp(28px, 4.6vw, 46px);
  font-weight:800;
  letter-spacing:-.03em;
  text-shadow:0 0 44px rgba(58,160,255,.28);
}
.sec-lede{
  margin-top:14px;
  color:var(--ink-dim);
  font-size:clamp(15px, 1.7vw, 17px);
  line-height:1.65;
}

/* ── HERO ────────────────────────────────────────────────── */

.hero{
  position:relative;
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(48px, 11vh, 104px) var(--pad) clamp(64px, 10vh, 110px);
  min-height:calc(100svh - 70px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  font-family:var(--mono);
  font-size:19px;
  font-weight:700;
  letter-spacing:.22em;
  text-indent:.22em;      /* letter-spacing pads the right; push back to centre */
  color:#cfe6ff;
  padding:6px 18px;
  border-radius:999px;
  border:1px solid var(--panel-line);
  background:rgba(6,14,26,.5);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  animation:fade-up .9s var(--ease-out) both;
}

/* ── 404 GLITCH ──────────────────────────────────────────
   Two clones of the text sit exactly on top of the real one, tinted cyan and
   red, and jitter sideways while clip-path slices them into bands. The real
   text never moves, so it stays readable — only the fringes tear.
   steps() rather than a smooth ease: a glitch that eases is a wobble. */
.glitch{ position:relative; isolation:isolate; }
.glitch::before,
.glitch::after{
  content:attr(data-text);
  position:absolute;
  left:18px; top:6px;          /* match the padding — line up with the real text */
  letter-spacing:.22em;
  text-indent:.22em;
  pointer-events:none;
  opacity:.85;
}
.glitch::before{
  color:var(--cyan);
  animation:glitch-a 2.6s steps(1) infinite;
}
.glitch::after{
  color:var(--err);
  animation:glitch-b 3.1s steps(1) infinite;
}
/* Mostly idle — clipped to nothing — so it fires in bursts instead of buzzing. */
@keyframes glitch-a{
  0%, 42%, 46%, 68%, 72%, 100%{ clip-path:inset(100% 0 0 0); transform:none; }
  43%{ clip-path:inset(12% 0 62% 0); transform:translate(-2px, -1px); }
  45%{ clip-path:inset(58% 0 18% 0); transform:translate(3px, 1px); }
  69%{ clip-path:inset(35% 0 40% 0); transform:translate(-3px, 0); }
  71%{ clip-path:inset(70% 0 8% 0);  transform:translate(2px, -1px); }
}
@keyframes glitch-b{
  0%, 30%, 34%, 80%, 84%, 100%{ clip-path:inset(100% 0 0 0); transform:none; }
  31%{ clip-path:inset(64% 0 12% 0); transform:translate(3px, 1px); }
  33%{ clip-path:inset(20% 0 55% 0); transform:translate(-2px, 0); }
  81%{ clip-path:inset(45% 0 30% 0); transform:translate(2px, 1px); }
  83%{ clip-path:inset(8% 0 74% 0);  transform:translate(-3px, -1px); }
}
/* The pill itself twitches once in a while — the tear alone reads as a font bug. */
.glitch{ animation:fade-up .9s var(--ease-out) both, glitch-shift 7s steps(1) infinite; }
@keyframes glitch-shift{
  0%, 96%, 100%{ transform:none; }
  97%{ transform:translate(-2px, 0) skewX(-6deg); }
  98%{ transform:translate(2px, 0) skewX(5deg); }
  99%{ transform:none; }
}

@media (prefers-reduced-motion: reduce){
  .glitch::before, .glitch::after{ display:none; }
}

.hero-title{
  margin:clamp(22px, 3.5vh, 34px) 0 0;
  font-weight:900;
  letter-spacing:-.045em;
  line-height:.9;
  font-size:clamp(44px, 12.5vw, 132px);
  text-transform:uppercase;
}
.hero-title .line{
  display:block;
  background:linear-gradient(178deg, #ffffff 6%, #cfe9ff 38%, #4aa8f5 88%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  filter:
    drop-shadow(0 0 18px rgba(58,160,255,.5))
    drop-shadow(0 0 52px rgba(0,140,255,.34))
    drop-shadow(0 0 110px rgba(0,110,220,.22));
}
.line-1{ animation:fade-up 1s .1s var(--ease-out) both; }
.line-2{ animation:fade-up 1s .22s var(--ease-out) both; }

@keyframes fade-up{
  from{ opacity:0; transform:translate3d(0,20px,0); filter:blur(6px); }
  to  { opacity:1; transform:translate3d(0,0,0);   filter:blur(0); }
}

.hero-sub{
  margin-top:clamp(20px, 3vh, 30px);
  max-width:56ch;
  color:var(--ink-dim);
  font-size:clamp(15px, 1.9vw, 18.5px);
  line-height:1.68;
  text-align:center;
  animation:fade-up 1s .34s var(--ease-out) both;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin-top:clamp(28px, 4vh, 40px);
  animation:fade-up 1s .46s var(--ease-out) both;
}

/* ── HERO TERMINAL ───────────────────────────────────────── */

/* Deep-space's own panel treatment — deliberately NO macOS traffic-light
   chrome: the comment form already spends that trick once, and twice on one
   page is how a template starts to smell. Opaque-ish rather than
   backdrop-filtered: it sits over the starfield and the text has to win. */
.term{
  position:relative;
  width:100%;
  max-width:620px;
  margin-top:clamp(28px, 4vh, 40px);
  border-radius:var(--r-lg);
  border:1px solid var(--panel-line);
  background:linear-gradient(180deg, rgba(9,18,31,.92), rgba(3,7,13,.95));
  box-shadow:
    0 24px 60px -28px rgba(0,0,0,1),
    0 0 56px -20px rgba(58,160,255,.42);
  overflow:hidden;
  text-align:left;
  animation:fade-up 1s .58s var(--ease-out) both;
}
.term::before{
  content:"";
  position:absolute;
  top:0; left:12%; right:12%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(120,210,255,.55), transparent);
}
.term-body{
  margin:0;
  padding:18px 20px 20px;
  font-family:var(--mono);
  font-size:12.5px;
  line-height:1.8;
  color:var(--ink-dim);
  overflow-x:auto;
}
.term-body .l { display:block; }
.term-body .p { color:var(--smurf); }
.term-body .pa{ color:#7ea8c9; }
.term-body .c { color:#42596f; font-style:italic; }
.term-body .ok{ color:var(--ok); }
.term-body .wr{ color:var(--amber); }
.tcaret{
  display:inline-block;
  width:7px; height:13px;
  background:var(--cyan);
  vertical-align:-2px;
  box-shadow:0 0 10px var(--cyan);
  animation:blink 1.05s steps(1,end) infinite;
}

/* ── BUTTONS ─────────────────────────────────────────────── */

.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 26px;
  border:1px solid transparent;
  border-radius:999px;
  font-family:var(--sans);
  font-size:14.5px;
  font-weight:600;
  letter-spacing:.01em;
  text-decoration:none;
  cursor:pointer;
  overflow:hidden;
  transition:transform .32s var(--ease-out), box-shadow .32s var(--ease), background .32s var(--ease);
}
.btn:active{ transform:translateY(1px) scale(.99); }

.btn-primary{
  color:#02121f;
  background:linear-gradient(180deg, #9fdcff, #3aa0ff 62%, #1b7fe0);
  box-shadow:
    0 0 0 1px rgba(160,225,255,.5) inset,
    0 6px 26px rgba(58,160,255,.36),
    0 0 44px rgba(0,180,255,.22);
}
.btn-primary::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 32%, rgba(255,255,255,.55) 50%, transparent 68%);
  transform:translateX(-130%);
  transition:transform .75s var(--ease-out);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(180,235,255,.7) inset,
    0 10px 34px rgba(58,160,255,.5),
    0 0 66px rgba(0,190,255,.36);
}
.btn-primary:hover::after{ transform:translateX(130%); }

.btn-ghost{
  color:var(--ink);
  background:rgba(10,20,34,.5);
  border-color:var(--panel-line-hi);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.btn-ghost:hover{
  transform:translateY(-2px);
  background:rgba(20,40,66,.6);
  box-shadow:0 0 30px rgba(58,160,255,.24);
}


.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none !important; }

/* ── HERO STATS ──────────────────────────────────────────── */

.hero-stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1px;                       /* the gaps ARE the divider hairlines: the
                                    panel-line background shows through them */
  margin:clamp(30px, 4.5vh, 52px) 0 0;
  width:100%;
  max-width:720px;
  background:var(--panel-line);
  border:1px solid var(--panel-line);
  border-radius:var(--r-md);
  overflow:hidden;
  animation:fade-up 1s .62s var(--ease-out) both;
}
.hero-stats > div{
  background:rgba(4,10,18,.62);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:18px 10px;
  display:flex;
  flex-direction:column-reverse;
  align-items:center;
  gap:4px;
}
.hero-stats dt{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.hero-stats dd{
  margin:0;
  font-size:clamp(20px, 3vw, 27px);
  font-weight:800;
  letter-spacing:-.03em;
  color:#dff0ff;
  text-shadow:0 0 24px rgba(58,160,255,.42);
}
.hero-stats dd span{ color:var(--cyan); }


.scroll-hint{
  position:absolute;
  bottom:22px; left:50%;
  transform:translateX(-50%);
  width:22px; height:36px;
  border:1px solid rgba(120,190,255,.24);
  border-radius:999px;
  display:grid;
  justify-items:center;
  padding-top:7px;
}
.scroll-hint span{
  width:3px; height:7px;
  border-radius:2px;
  background:var(--cyan);
  box-shadow:0 0 8px var(--cyan);
  animation:scroll-dot 2s var(--ease-soft) infinite;
}
@keyframes scroll-dot{
  0%     { transform:translateY(0);    opacity:0; }
  25%    { opacity:1; }
  70%,100%{ transform:translateY(15px); opacity:0; }
}

/* ── CREW CARDS ──────────────────────────────────────────── */

.crew{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(272px, 1fr));
  gap:clamp(18px, 2.4vw, 26px);
}

.card{
  position:relative;
  isolation:isolate;
  /* Column flex so .socials can margin-top:auto onto the bottom edge. Cards
     are equal height (grid stretch) but their tags wrap to different row
     counts, which left the social rows at three different heights.
     .ava keeps an explicit width, so stretch does not deform the circle. */
  display:flex;
  flex-direction:column;
  padding:clamp(28px, 3vw, 38px) clamp(20px, 2.4vw, 28px) clamp(24px, 2.6vw, 30px);
  text-align:center;
  border-radius:var(--r-lg);
  border:1px solid var(--panel-line);
  background:
    linear-gradient(180deg, rgba(14,26,44,.5), rgba(4,9,16,.6));
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  overflow:hidden;
  transition:transform .5s var(--ease-out), border-color .5s var(--ease), box-shadow .5s var(--ease);
  /* No float-card animation, deliberately, for two reasons:
     1. An animation beats a normal declaration in the cascade, so the float
        kept overriding .card:hover's transform — the signature hover-lift on
        this section silently did nothing.
     2. Animating an element that carries backdrop-filter forces the browser
        to re-sample and re-blur the backdrop every frame, forever, on all
        three cards, even offscreen. Nothing on this page cost more.
     Hover now owns the transform outright, and the blur is a static,
     cacheable snapshot. No will-change either: the hover transition promotes
     the layer when it is actually needed instead of pinning 3 layers for the
     life of the page. */
}

/* top hairline */
.card::before{
  content:"";
  position:absolute;
  top:0; left:12%; right:12%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(120,210,255,.55), transparent);
}
/* z-index 0, not -1: .card carries backdrop-filter, which makes it a stacking
   context, so a negative-z child paints BEHIND the card's own panel gradient
   and the glow arrives dimmed through it. At 0 it lands on top of the panel
   — where the effect was designed to be — and the content below claims z-1. */
.card-glow{
  position:absolute;
  top:-40%; left:50%;
  transform:translateX(-50%);
  width:120%; height:80%;
  background:radial-gradient(ellipse at 50% 50%, rgba(58,160,255,.2), transparent 66%);
  opacity:0;
  transition:opacity .6s var(--ease);
  pointer-events:none;
  z-index:0;
}
.card-name,
.tags{ position:relative; z-index:1; }

.card:hover{
  transform:translate3d(0,-12px,0);
  border-color:var(--panel-line-hi);
  box-shadow:
    0 26px 60px -20px rgba(0,0,0,.85),
    0 0 60px -10px rgba(58,160,255,.3);
}
.card:hover .card-glow{ opacity:1; }

/* avatar */
.ava{
  position:relative;
  /* z-index makes .ava its own stacking context, so the ::after halo's
     z-index:-1 lands behind the avatar but IN FRONT of the card's panel
     gradient. Without it the halo escapes to .card's context and blooms
     behind an opaque background — i.e. invisibly. */
  z-index:1;
  width:clamp(120px, 15vw, 148px);
  aspect-ratio:1;
  margin:0 auto 22px;
}
.ava-ring{
  position:absolute;
  inset:-9px;
  border-radius:50%;
  background:conic-gradient(from 0deg,
    transparent 0deg, var(--ring, #00d4ff) 62deg, #ffffff 88deg, var(--ring, #00d4ff) 118deg, transparent 210deg, transparent 360deg);
  filter:blur(.6px);
  opacity:.9;
  animation:ring-spin 7s linear infinite;
  will-change:transform;
}
.ava-ring::after{
  content:"";
  position:absolute; inset:3px;
  border-radius:50%;
  background:var(--bg);
}
@keyframes ring-spin{ to{ transform:rotate(360deg); } }

/* cyan → blue → deep-blue: three beats of ONE hue system, not three brands */
.ava[data-hue="cyan"]{ --ring:#00d4ff; --halo:rgba(0,212,255,.45); }
.ava[data-hue="blue"]{ --ring:#3aa0ff; --halo:rgba(58,160,255,.45); }
.ava[data-hue="deep"]{ --ring:#1b7fe0; --halo:rgba(27,127,224,.48); }

.ava::after{  /* soft halo bloom */
  content:"";
  position:absolute;
  inset:-26px;
  border-radius:50%;
  background:radial-gradient(circle, var(--halo), transparent 62%);
  filter:blur(18px);
  opacity:.5;
  z-index:-1;
  transition:opacity .55s var(--ease), transform .55s var(--ease-out);
  pointer-events:none;
}
.card:hover .ava::after{ opacity:.95; transform:scale(1.1); }

.ava-inner{
  position:absolute;
  inset:0;
  border-radius:50%;
  overflow:hidden;
  background:#04101c;
  box-shadow:
    inset 0 0 0 1px rgba(160,220,255,.28),
    inset 0 -14px 30px rgba(0,0,0,.6);
}
.ava-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:50%;
}
.ava-img{ z-index:2; }
.card:hover .ava-img{ transform:scale(1.05); }
.ava-img{ transition:transform .6s var(--ease-out); }

.card-name{
  font-family:var(--mono);
  font-size:clamp(17px, 2vw, 19px);
  font-weight:700;
  letter-spacing:-.01em;
  color:#ffffff;
  text-shadow:0 0 26px rgba(58,160,255,.45);
}

.tags{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:7px;
  margin-top:18px;
}
.tags li{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.03em;
  color:#a9cbe8;
  padding:5px 10px;
  border-radius:7px;
  border:1px solid rgba(110,180,255,.18);
  background:rgba(20,40,66,.42);
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}

/* The sprite itself must never paint — only its <symbol>s, via <use>. */
.icon-sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* Language mark inside a tag. Keeps its brand colours, so no fill here. */
.ti{
  width:13px; height:13px;
  flex:0 0 auto;
  display:block;
}

/* ── SOCIALS ──────────────────────────────────────────────
   No handles yet, so these are <span>, not <a>: a guessed t.me/<nick> would
   send visitors to whatever stranger owns that name. Swap to <a href> the
   moment we have real ones — the styling already covers :hover. */
.socials{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:auto;   /* sit on the card's bottom edge, level across all three */
  padding-top:16px;
  position:relative;
  z-index:1;
}
/* A hairline that fades out at both ends instead of a dashed rule stopping dead
   against the card's padding. Brightest in the middle, under the icons, so it
   reads as a seam in the panel rather than a border drawn on top of it. */
.socials::before{
  content:"";
  position:absolute;
  top:0; left:8%; right:8%;
  height:1px;
  background:linear-gradient(90deg,
    transparent,
    rgba(110,180,255,.10) 22%,
    rgba(140,215,255,.34) 50%,
    rgba(110,180,255,.10) 78%,
    transparent);
  transition:opacity .4s var(--ease);
}
.card:hover .socials::before{
  background:linear-gradient(90deg,
    transparent,
    rgba(0,212,255,.16) 22%,
    rgba(0,212,255,.6) 50%,
    rgba(0,212,255,.16) 78%,
    transparent);
}
.soc{
  display:grid;
  place-items:center;
  width:30px; height:30px;
  border-radius:9px;
  color:#7fa8cd;
  border:1px solid rgba(110,180,255,.16);
  background:rgba(20,40,66,.42);
  transition:color .25s var(--ease), border-color .25s var(--ease),
             background .25s var(--ease), transform .25s var(--ease);
}
.soc .si{ width:15px; height:15px; display:block; }
.card:hover .soc{ border-color:rgba(110,180,255,.3); }

/* Only the ones wired to do something advertise themselves as clickable. */
a.soc{ text-decoration:none; }
.soc:not([href]){ cursor:default; }

.soc[href]:hover,
.soc[href]:focus-visible{
  color:#eaf6ff;
  border-color:var(--cyan);
  background:rgba(58,160,255,.16);
  transform:translateY(-2px);
}
.card:hover .tags li{
  border-color:rgba(120,200,255,.36);
  color:#d6ecff;
  background:rgba(30,62,100,.5);
}

/* ── CONTACT ─────────────────────────────────────────────── */

.contact{ padding-top:clamp(30px, 5vh, 50px); }
.contact-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  text-align:center;
  padding:clamp(44px, 7vw, 76px) clamp(22px, 5vw, 56px);
  border-radius:26px;
  border:1px solid var(--panel-line);
  background:linear-gradient(180deg, rgba(14,28,48,.5), rgba(3,7,13,.6));
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.contact-card::before{
  content:"";
  position:absolute; top:0; left:20%; right:20%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(120,210,255,.6), transparent);
}
.contact-glow{
  position:absolute;
  bottom:-60%; left:50%;
  transform:translateX(-50%);
  width:80%; height:120%;
  background:radial-gradient(ellipse at 50% 50%, rgba(58,160,255,.22), transparent 60%);
  z-index:-1;
  pointer-events:none;
}
.contact-card .sec-kicker,
.contact-card .sec-lede{ margin-left:auto; margin-right:auto; }
.contact-card .sec-lede{ max-width:52ch; margin-bottom:28px; }
.contact-card .btn{ font-family:var(--mono); }

/* ── FOOTER ──────────────────────────────────────────────── */

.foot{
  position:relative;
  z-index:5;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px;
  max-width:var(--maxw);
  margin:0 auto;
  padding:30px var(--pad) 44px;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.03em;
  color:var(--ink-faint);
  text-align:center;
}

/* ── RESPONSIVE ──────────────────────────────────────────── */

@media (max-width: 640px){
  .topnav a:not(.nav-cta){ display:none; }
  .hero{ min-height:auto; padding-top:24px; padding-bottom:64px; }
  /* Three stats stay in one row: 2 columns would strand the third alone. */
  .hero-stats{ grid-template-columns:repeat(3, 1fr); }
  .hero-stats > div{ padding:14px 4px; }
  .scroll-hint{ display:none; }
}

/* ── REDUCED MOTION ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  /* Keep the sky: JS paints a STATIC star scatter (no motion, so the
     preference is respected) and the page keeps its identity. Only the
     drifting comment bubbles — pure motion — are removed. */
  .neb{ animation:none !important; }
  .ava-ring{
    animation:none !important;
    background:conic-gradient(from 210deg, transparent, var(--ring) 40%, #fff 55%, var(--ring) 70%, transparent);
  }
  .card{ transform:none !important; }
  .tcaret{ animation:none !important; opacity:1; }
  .hero-title .line,
  .eyebrow,.hero-actions,.hero-stats,.term{
    opacity:1 !important; filter:none !important; transform:none !important;
  }
}