:root{
    --bg:#0a0a0a;
    --bg-card:#141414;
    --white:#f2f0ea;
    --red:#dc2626;
    --red-dark:#7f1d1d;
    --silver:#9a9a9a;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--white);
    font-family:'Barlow Condensed', sans-serif;
    overflow-x:hidden;
  }
  .font-display{
    font-family:'Anton', sans-serif;
    letter-spacing:0.02em;
  }

  /* ---- ambient texture ---- */
  .grain{
    position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.05; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .glow-red{
    position:fixed; top:-10%; left:50%; transform:translateX(-50%);
    width:900px; height:900px; border-radius:50%;
    background:radial-gradient(circle, rgba(220,38,38,0.18) 0%, rgba(220,38,38,0) 65%);
    pointer-events:none; z-index:0;
  }

  /* ---- wings (fluid, flexbox-based, no fixed px math) ---- */
  .wing{
    flex-shrink:0;
    fill:var(--white);
    opacity:0;
    filter:drop-shadow(0 0 14px rgba(0,0,0,.6));
  }
  .wing-left{ transform-origin:100% 50%; }
  .wing-right{ transform-origin:0% 50%; }
  .wings-in .wing-left{ animation: wingInL 7s cubic-bezier(.2,.9,.25,1) .2s infinite; }
  .wings-in .wing-right{ animation: wingInR 7s cubic-bezier(.2,.9,.25,1) .2s infinite; }
  @keyframes wingInL{
    0%{ opacity:0; transform:rotate(25deg) scale(.6);}
    30%{ opacity:1; transform:rotate(0deg) scale(1);}
    65%{ transform:rotate(-3deg) scale(1);}
    100%{ transform:rotate(0deg) scale(1);}
  }
  @keyframes wingInR{
    0%{ opacity:0; transform:scaleX(-1) rotate(25deg) scale(.6);}
    30%{ opacity:1; transform:scaleX(-1) rotate(0deg) scale(1);}
    65%{ transform:scaleX(-1) rotate(-3deg) scale(1);}
    100%{ transform:scaleX(-1) rotate(0deg) scale(1);}
  }

  /* ---- belt divider ---- */
  .belt{
    position:relative;
    height:22px;
    background:repeating-linear-gradient(
      -45deg,
      var(--white) 0 14px,
      #1a1a1a 14px 20px
    );
    border-radius:2px;
    box-shadow:0 2px 10px rgba(0,0,0,.5);
  }
  .belt-tip{
    position:absolute; right:-6px; top:50%; transform:translateY(-50%);
    width:46px; height:32px;
    background:var(--red);
    clip-path: polygon(0 0, 100% 15%, 100% 85%, 0 100%);
    box-shadow:0 2px 10px rgba(220,38,38,.4);
  }

  /* ---- link buttons ---- */
  .link-btn{
    position:relative;
    display:flex; align-items:center; gap:14px;
    background:var(--bg-card);
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
    overflow:hidden;
    transition:transform .25s ease, border-color .25s ease, background .25s ease;
    isolation:isolate;
  }
  .link-btn::before{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(90deg, var(--red-dark), var(--red));
    transform:translateX(-101%);
    transition:transform .35s cubic-bezier(.4,0,.2,1);
    z-index:-1;
  }
  .link-btn:hover::before{ transform:translateX(0); }
  .link-btn:hover{ transform:translateY(-3px); border-color:var(--red); }
  .link-btn:active{ transform:translateY(0) scale(.98); }
  .link-icon{
    display:flex; align-items:center; justify-content:center;
    border-radius:8px;
    background:rgba(255,255,255,.06);
    flex-shrink:0;
    transition:background .25s ease;
  }
  .link-btn:hover .link-icon{ background:rgba(0,0,0,.25); }
  .link-label{
    font-family:'Anton', sans-serif;
    font-size:clamp(1rem, 0.9rem + 0.5vw, 1.35rem);
    letter-spacing:.03em;
    text-transform:uppercase;
  }
  .link-sub{
    font-size:clamp(.78rem, 0.72rem + 0.3vw, .95rem);
    color:var(--silver);
    font-weight:500;
  }
  .link-btn:hover .link-sub{ color:rgba(255,255,255,.85); }
  .chev{
    margin-left:auto; opacity:.4; transition:transform .25s ease, opacity .25s ease;
  }
  .link-btn:hover .chev{ transform:translateX(4px); opacity:1; }

  /* fade-in on scroll */
  .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
  .reveal.show{ opacity:1; transform:translateY(0); }

  .stat-card{
    background:var(--bg-card);
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
  }

  ::selection{ background:var(--red); color:white; }

  .avatar-ring{
    box-shadow:0 0 0 3px var(--bg), 0 0 0 5px rgba(220,38,38,.6), 0 0 40px rgba(220,38,38,.25);
  }