:root{
    --abyss:#050c12;
    --deep:#081a24;
    --panel:#0b2028;
    --line:#1c3038;
    --purple:#ff7d59;
    --cyan:#3aa0e6;
    --steel:#87a19d;
    --white:#eef6f4;
    --red:#ff6b6b;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{
    scroll-behavior:smooth;
    background:#05060a;
    color-scheme:dark;
  }
  body{
    background:var(--abyss);
    color:var(--white);
    font-family:'Outfit',sans-serif;
    overflow-x:hidden;
  }
    .site-watermark{
    position:fixed;inset:0;z-index:0;pointer-events:none;
    background-color:var(--abyss);
    background-image:url('watermark.webp');
    background-size:640px auto;background-repeat:repeat;background-position:center;
    opacity:0.09;
  }
  ::selection{background:var(--purple);color:var(--white);}
  a{color:inherit;text-decoration:none;}

  .mono{font-family:'IBM Plex Mono',monospace;}
  .display{font-family:'Rajdhani',sans-serif;}
  .grad-text{
    background:linear-gradient(90deg,var(--cyan),var(--purple));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .neon{
    color:var(--white);
    text-shadow:
      0 0 12px rgba(63,217,196,0.55),
      0 0 30px rgba(255,125,89,0.45),
      0 0 60px rgba(255,125,89,0.35),
      0 0 100px rgba(255,125,89,0.2);
    animation:neon-flicker 5s ease-in-out infinite;
  }
  @keyframes neon-flicker{
    0%,92%,100%{opacity:1;}
    93%{opacity:0.85;}
    94%{opacity:1;}
    96%{opacity:0.9;}
  }
  @media(prefers-reduced-motion:reduce){.neon{animation:none;}}
  .neon-badge{
    display:inline-flex;align-items:center;gap:10px;
    padding:9px 18px;border-radius:999px;
    border:1px solid rgba(63,217,196,0.5);
    background:rgba(63,217,196,0.06);
    color:var(--cyan);font-size:12px;letter-spacing:1px;font-weight:600;
    text-shadow:0 0 10px rgba(63,217,196,0.8);
    box-shadow:0 0 22px rgba(63,217,196,0.18), inset 0 0 14px rgba(63,217,196,0.08);
    margin-top:11px;
  }
  .neon-badge .pulse-dot{
    width:7px;height:7px;border-radius:50%;background:var(--cyan);
    box-shadow:0 0 8px var(--cyan), 0 0 16px var(--cyan);
    animation:pulse-dot 1.8s ease-in-out infinite;
  }
  @keyframes pulse-dot{0%,100%{opacity:1;}50%{opacity:0.3;}}

  .wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
  section{position:relative;}

  /* ---------- Nav ---------- */
  nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    background:rgba(5,6,12,0.72);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  nav .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:72px;max-width:none;padding:0 28px;}
  .logo{justify-self:start;}
  .nav-links{justify-self:center;}
  .nav-actions{display:flex;align-items:center;gap:10px;justify-self:end;}
  .logo{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:20px;letter-spacing:0.5px;display:flex;align-items:flex-end;gap:10px;}
  .brand-font{font-family:Arial, Helvetica, sans-serif !important;}
  .logo-img{
    height:24px;width:auto;
    object-fit:contain;
    filter:drop-shadow(0 0 10px rgba(255,125,89,0.85)) drop-shadow(0 0 20px rgba(255,125,89,0.5));
  }
  .logo-img.large{
    height:clamp(52px,10vw,132px);width:auto;
    filter:drop-shadow(0 0 18px rgba(255,125,89,0.85)) drop-shadow(0 0 36px rgba(255,125,89,0.5));
  }
  .logo-dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--purple));box-shadow:0 0 14px var(--purple);}
  .nav-links{display:flex;gap:36px;font-size:14px;color:var(--steel);}
  .nav-links a:hover{color:var(--white);}
  .nav-links a{transition:color .25s ease, text-shadow .25s ease;}
  .nav-links a.active{
    color:var(--cyan);
    font-weight:700;
    text-shadow:0 0 8px rgba(58,160,230,0.9), 0 0 18px rgba(58,160,230,0.55);
  }
  .nav-cta{
    font-size:13px;font-weight:600;padding:10px 20px;border-radius:2px;color:var(--white);
    background:rgba(255,255,255,0.06);border:1px solid var(--line);
    transition:background .25s, color .25s, border-color .25s, box-shadow .25s;
    display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  }
  .nav-cta:hover{
    background:rgba(255,255,255,0.06);
    color:var(--white);border-color:var(--purple);
    box-shadow:0 0 10px rgba(255,125,89,0.6);
  }
  @media(max-width:760px){
    .nav-links{display:none;}
    /* No section links on mobile, so drop the centre column and let the logo
       and the action buttons sit at the two edges. */
    nav .wrap{grid-template-columns:auto auto;justify-content:space-between;padding:0 16px;}
    .nav-actions{gap:8px;}
    /* Collapse the CTAs to compact icon-only buttons so they stop overflowing. */
    .nav-cta{width:44px;height:44px;padding:0;justify-content:center;border-radius:8px;}
    .nav-cta .cta-label{display:none;}
  }

  /* ---------- Hero ---------- */
  .hero{
    min-height:100svh;display:flex;flex-direction:column;justify-content:center;
    padding-top:72px;
    scroll-snap-align:start;scroll-snap-stop:always;
    background:
      radial-gradient(ellipse 70% 55% at 25% 10%, rgba(255,125,89,0.14), transparent 60%),
      radial-gradient(ellipse 60% 50% at 80% 20%, rgba(63,217,196,0.14), transparent 60%),
      radial-gradient(ellipse 90% 70% at 50% 100%, rgba(11,60,70,0.6), transparent 70%),
      linear-gradient(180deg, var(--abyss) 0%, #071823 60%, #030809 100%);
    position:relative;overflow:hidden;
  }
  .sonar{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:1px;height:1px;pointer-events:none;z-index:0;
  }
  .sonar-ring{
    position:absolute;top:0;left:0;border:1.4px solid rgba(255,125,89,0.32);
    border-radius:50%;transform:translate(-50%,-50%);
    animation:ping 7s cubic-bezier(0.2,0.6,0.4,1) infinite;
  }
  .sonar-ring:nth-child(2){animation-delay:1.75s;border-color:rgba(63,217,196,0.35);}
  .sonar-ring:nth-child(3){animation-delay:3.5s;}
  .sonar-ring:nth-child(4){animation-delay:5.25s;border-color:rgba(63,217,196,0.3);}
  @keyframes ping{
    0%{width:40px;height:40px;opacity:0.95;}
    100%{width:1180px;height:1180px;opacity:0;}
  }
  @media(prefers-reduced-motion:reduce){.sonar-ring{animation:none;display:none;}}

  .ocean-waves{
    position:absolute;bottom:0;left:0;width:100%;line-height:0;z-index:0;pointer-events:none;
  }
  .ocean-waves svg{width:100%;height:auto;display:block;}
  .wave-back{opacity:0.35;animation:wave-drift 18s ease-in-out infinite;}
  .wave-front{opacity:0.55;animation:wave-drift 12s ease-in-out infinite reverse;}
  @keyframes wave-drift{
    0%,100%{transform:translateX(0);}
    50%{transform:translateX(-3%);}
  }
  @media(prefers-reduced-motion:reduce){.wave-back,.wave-front{animation:none;}}

  /* ---------- Time-of-day ocean atmosphere ---------- */
  body.tod-dawn .hero{
    background:
      radial-gradient(ellipse 70% 55% at 25% 10%, rgba(255,163,102,0.20), transparent 60%),
      radial-gradient(ellipse 60% 50% at 80% 20%, rgba(63,217,196,0.12), transparent 60%),
      radial-gradient(ellipse 90% 70% at 50% 100%, rgba(40,80,100,0.55), transparent 70%),
      linear-gradient(180deg, #0d1622 0%, #17293c 55%, #1d3648 100%);
  }
  body.tod-dawn .wave-back path{fill:#173142;}
  body.tod-dawn .wave-front path{fill:#0b1c26;}

  body.tod-day .hero{
    background:
      radial-gradient(ellipse 70% 55% at 25% 10%, rgba(255,255,255,0.14), transparent 60%),
      radial-gradient(ellipse 60% 50% at 80% 20%, rgba(63,217,196,0.22), transparent 60%),
      radial-gradient(ellipse 90% 70% at 50% 100%, rgba(20,95,128,0.55), transparent 70%),
      linear-gradient(180deg, #123049 0%, #1a5478 55%, #12405e 100%);
  }
  body.tod-day .wave-back path{fill:#1c5470;}
  body.tod-day .wave-front path{fill:#0f3346;}
  body.tod-day .reef-rock path{fill:#0a2331;}

  body.tod-dusk .hero{
    background:
      radial-gradient(ellipse 70% 55% at 25% 10%, rgba(255,125,89,0.30), transparent 60%),
      radial-gradient(ellipse 60% 50% at 80% 20%, rgba(255,196,120,0.18), transparent 60%),
      radial-gradient(ellipse 90% 70% at 50% 100%, rgba(60,32,52,0.6), transparent 70%),
      linear-gradient(180deg, #1a0e18 0%, #2c1424 55%, #170a12 100%);
  }
  body.tod-dusk .wave-back path{fill:#2a1420;}
  body.tod-dusk .wave-front path{fill:#150a10;}

  /* tod-night uses the default .hero styles already defined above */

  /* ---------- Custom cursor: buoy + water trail ---------- */
  @media (hover:hover) and (pointer:fine){
    body{cursor:none;}
  }
  .cursor-buoy{
    position:fixed;top:0;left:0;width:54px;height:53px;pointer-events:none;z-index:9999;
    display:none;will-change:transform;
  }
  @media (hover:hover) and (pointer:fine){
    .cursor-buoy{display:block;}
  }
  .cursor-buoy img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 4px 8px rgba(0,0,0,0.5));transition:transform 0.15s ease;}
  .cursor-splash-wrap{position:fixed;top:0;left:0;width:0;height:0;pointer-events:none;z-index:9998;}
  .wake-crest{
    position:absolute;left:0;top:0;
    transform-origin:8% 50%;
    filter:drop-shadow(0 0 4px rgba(63,217,196,0.65));
    animation:wake-fade .95s cubic-bezier(.15,.6,.3,1) forwards;
  }
  .wake-crest svg{display:block;overflow:visible;}
  @keyframes wake-fade{
    0%{opacity:0.75;transform:translate(-50%,-50%) rotate(var(--ang,0deg)) scaleY(-1) scaleX(var(--flipx,1)) scale(0.4);}
    50%{opacity:0.55;}
    100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--ang,0deg)) scaleY(-1) scaleX(var(--flipx,1)) scale(1.1) translateX(4px);}
  }

  .reef-rock{position:absolute;bottom:0;z-index:0;pointer-events:none;opacity:0.55;}
  .reef-rock.left{left:0;}
  .reef-rock.right{right:0;transform:scaleX(-1);}

  /* ---------- Swimming shark shadows ---------- */
  .shark-shadow{
    position:absolute;top:30%;left:-280px;z-index:0;pointer-events:none;
    opacity:0.16;filter:blur(0.5px);
    animation:swim-across linear infinite;
  }
  .shark-shadow svg{display:block;fill:#040608;width:100%;height:auto;}
  .shark-tail{transform-origin:52px 70px;animation:tail-wag 0.9s ease-in-out infinite;}
  @keyframes tail-wag{
    0%,100%{transform:rotate(-11deg);}
    50%{transform:rotate(11deg);}
  }
  .shark-shadow.s1 .shark-tail{animation-duration:0.9s;}
  .shark-shadow.s2 .shark-tail{animation-duration:1.1s;}
  .shark-shadow.s3 .shark-tail{animation-duration:0.75s;}
  .shark-shadow.s4 .shark-tail{animation-duration:1.35s;}
  .shark-shadow.s5 .shark-tail{animation-duration:0.65s;}
  @media(prefers-reduced-motion:reduce){.shark-tail{animation:none;}}
  .shark-shadow.s1{top:16%;width:230px;animation-duration:27s;animation-delay:0s;}
  .shark-shadow.s2{
    top:38%;width:130px;animation-duration:33s;animation-delay:-11s;
    animation-name:swim-across-rev;opacity:0.11;
  }
  .shark-shadow.s3{top:58%;width:190px;animation-duration:22s;animation-delay:-6s;opacity:0.14;}
  .shark-shadow.s4{
    top:72%;width:110px;animation-duration:40s;animation-delay:-25s;
    animation-name:swim-across-rev;opacity:0.09;
  }
  .shark-shadow.s5{top:48%;width:95px;animation-duration:19s;animation-delay:-9s;opacity:0.10;}
  @keyframes swim-across{
    0%{left:-280px;transform:translateY(0) scaleX(1);}
    45%{transform:translateY(-22px) scaleX(1);}
    50%{left:calc(100% + 280px);transform:translateY(0) scaleX(1);}
    50.01%{left:calc(100% + 280px);transform:translateY(0) scaleX(-1);}
    95%{transform:translateY(18px) scaleX(-1);}
    100%{left:-280px;transform:translateY(0) scaleX(-1);}
  }
  @keyframes swim-across-rev{
    0%{left:calc(100% + 280px);transform:translateY(0) scaleX(-1);}
    45%{transform:translateY(16px) scaleX(-1);}
    50%{left:-280px;transform:translateY(0) scaleX(-1);}
    50.01%{left:-280px;transform:translateY(0) scaleX(1);}
    95%{transform:translateY(-14px) scaleX(1);}
    100%{left:calc(100% + 280px);transform:translateY(0) scaleX(1);}
  }
  @media(prefers-reduced-motion:reduce){.shark-shadow{animation:none;display:none;}}

  .bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}

  .float-avatars{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;}
  .float-avatar{
    position:absolute;border-radius:50%;overflow:hidden;
    border:2px solid rgba(63,217,196,0.4);
    box-shadow:
      0 8px 24px rgba(0,0,0,0.45),
      0 0 18px rgba(63,217,196,0.22),
      inset 0 0 16px rgba(255,255,255,0.25),
      inset 0 -10px 18px rgba(63,217,196,0.2);
    background:var(--panel);
    opacity:0.62;
    left:0;top:0;
    /* JS sets transform:translate3d(...) directly on this element every
       frame — GPU-composited, no layout reflow, works everywhere without
       needing newer CSS features. */
    will-change:transform;
  }
  .float-avatar::before{
    content:"";
    position:absolute;inset:0;border-radius:50%;
    background:radial-gradient(circle at 28% 24%, rgba(255,255,255,0.6), rgba(255,255,255,0.08) 32%, transparent 58%);
    pointer-events:none;z-index:2;
  }
  .float-avatar::after{
    content:"";
    position:absolute;inset:0;border-radius:50%;
    background:radial-gradient(circle at 78% 82%, rgba(255,255,255,0.28), transparent 30%);
    pointer-events:none;z-index:2;
  }
  /* the gentle "breathing" wobble lives on the image itself, so it never
     fights with the JS-driven position transform on the outer element */
  .float-avatar img{animation:bubble-wobble 3.4s ease-in-out infinite;}
  @keyframes bubble-wobble{
    0%,100%{transform:scale(1,1);}
    50%{transform:scale(1.035,0.965);}
  }
  @media(prefers-reduced-motion:reduce){.float-avatar img{animation:none;}}
  .float-avatar img{width:100%;height:100%;object-fit:cover;display:block;opacity:0.88;}
  .fa-1{width:241px;height:241px;}
  .fa-2{width:179px;height:179px;}
  .fa-3{width:207px;height:207px;}
  .fa-4{width:162px;height:162px;}
  .fa-5{width:190px;height:190px;}
  .fa-6{width:198px;height:198px;}
  .fa-7{width:170px;height:170px;}
  @media(max-width:760px){
    .fa-1,.fa-2,.fa-3,.fa-4,.fa-5,.fa-6,.fa-7{width:105px;height:105px;}
  }
  .section::before, .community::before{
    content:"";
    position:absolute;inset:0;
    background:
      radial-gradient(ellipse 55% 40% at 18% 25%, rgba(63,217,196,0.07), transparent 60%),
      radial-gradient(ellipse 50% 35% at 82% 75%, rgba(58,160,230,0.06), transparent 60%);
    background-size:160% 160%;
    background-repeat:no-repeat;
    animation:water-drift 24s ease-in-out infinite alternate;
    pointer-events:none;
    z-index:-1;
  }
  @keyframes water-drift{
    0%{background-position:0% 10%, 100% 90%;}
    100%{background-position:16% 22%, 84% 78%;}
  }
  @media(prefers-reduced-motion:reduce){.section::before,.community::before{animation:none;}}
  .section::after, .community::after{
    content:"";
    position:absolute;inset:0;
    background-image:url('assets/logo.png');
    background-repeat:no-repeat;
    background-position:center;
    background-size:min(46vw,420px);
    opacity:0.045;
    pointer-events:none;
    z-index:-1;
  }
  .bubble{
    position:absolute;bottom:-40px;border-radius:50%;
    background:radial-gradient(circle at 30% 30%, rgba(63,217,196,0.35), rgba(255,125,89,0.05));
    border:1px solid rgba(63,217,196,0.22);
    animation:rise linear infinite;
  }
  @keyframes rise{
    0%{transform:translate(0,0);opacity:0;}
    10%{opacity:0.7;}
    30%{transform:translate(16px,-30vh);}
    55%{transform:translate(-14px,-58vh);}
    80%{transform:translate(18px,-85vh);opacity:0.5;}
    100%{transform:translate(-8px,-112vh);opacity:0;}
  }
  @media(prefers-reduced-motion:reduce){.bubbles{display:none;}}

  .eyebrow{
    font-size:12px;letter-spacing:3px;color:var(--cyan);text-transform:uppercase;
    display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:24px;position:relative;z-index:1;
  }
  .eyebrow::before{content:'';width:24px;height:1px;background:var(--cyan);}

  .hero h1{
    font-size:clamp(52px,10vw,132px);line-height:0.92;font-weight:700;letter-spacing:-2px;
    position:relative;z-index:1;
  }
  .tagline{
    font-size:clamp(16px,2vw,22px);color:var(--steel);max-width:560px;margin:28px auto 0;
    font-weight:400;line-height:1.5;position:relative;z-index:1;text-align:center;
  }
  .hero-actions{display:flex;gap:16px;margin-top:44px;position:relative;z-index:1;flex-wrap:wrap;justify-content:center;}
  .btn{
    padding:19px 36px;font-size:16px;font-weight:600;border-radius:2px;
    display:inline-flex;align-items:center;gap:8px;transition:all .2s;
    border:1px solid var(--cyan);
    box-shadow:0 0 8px rgba(58,160,230,0.55), 0 0 2px rgba(58,160,230,0.9) inset;
  }
  .btn-primary{background:rgba(255,255,255,0.06);color:var(--white);}
  .btn-primary:hover{
    background:linear-gradient(90deg,var(--cyan),var(--purple));color:var(--abyss);
    border-color:transparent;box-shadow:0 0 18px rgba(58,160,230,0.8);
    filter:brightness(1.1);transform:translateY(-2px);
  }
  .btn-outline{color:var(--white);background:rgba(255,255,255,0.06);}
  .btn-outline:hover{
    background:linear-gradient(90deg,var(--cyan),var(--purple));color:var(--abyss);
    border-color:transparent;box-shadow:0 0 18px rgba(58,160,230,0.8);
    transform:translateY(-2px);
  }

  .scroll-hint{
    position:absolute;bottom:36px;left:32px;font-size:11px;color:var(--steel);
    letter-spacing:2px;display:flex;align-items:center;gap:10px;z-index:1;
  }
  .scroll-hint .line{width:1px;height:36px;background:linear-gradient(var(--purple),transparent);}

  /* ---------- Ticker ---------- */
  .ticker-bar{
    background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    padding:22px 0;overflow:hidden;position:relative;z-index:1;
  }
  .ticker-inner{display:flex;gap:64px;}
  .ticker-item{display:flex;flex-direction:column;gap:4px;white-space:nowrap;}
  .ticker-label{font-size:11px;color:var(--steel);letter-spacing:1.5px;text-transform:uppercase;}
  .ticker-value{font-size:22px;font-weight:600;}
  .ticker-value.down{color:var(--red);}
  .ticker-value .unit{font-size:13px;color:var(--steel);font-weight:400;margin-left:4px;}
  .ticker-sep{width:1px;background:var(--line);align-self:stretch;}
  @media(max-width:760px){
    .ticker-inner{flex-wrap:wrap;gap:28px 40px;}
    .ticker-sep{display:none;}
  }

  /* ---------- Section shared ---------- */
  .section{padding:120px 0;background:var(--abyss);position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;scroll-snap-align:start;scroll-snap-stop:always;}

  header.hero > .wrap,
  section.section > .wrap,
  .community > .wrap,
  footer > .wrap{
    transition:transform .5s cubic-bezier(.22,.68,.36,1), opacity .45s ease;
    will-change:transform, opacity;
  }
  .reveal-up{transform:translateY(-56px);opacity:0;}
  .reveal-down{transform:translateY(56px);opacity:0;}
  .reveal-in{transform:translateY(0);opacity:1;}
  @media(prefers-reduced-motion:reduce){
    header.hero > .wrap, section.section > .wrap, .community > .wrap, footer > .wrap{transition:none;transform:none;opacity:1;}
  }
  .section-head{margin-bottom:56px;}
  .index-tag{font-size:12px;color:var(--cyan);letter-spacing:2px;margin-bottom:14px;}
  .section-title{font-size:clamp(30px,4vw,46px);font-weight:700;letter-spacing:-1px;}
  .section-sub{color:var(--steel);font-size:16px;margin-top:14px;max-width:580px;line-height:1.7;}

  /* ---------- About ---------- */
  .about-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:64px;align-items:start;}
  .about-quote{
    font-family:'Rajdhani',sans-serif;font-size:clamp(22px,2.6vw,30px);
    line-height:1.45;color:var(--white);font-weight:500;
    border-left:2px solid transparent;
    border-image:linear-gradient(var(--cyan),var(--purple)) 1;
    padding-left:28px;
  }
  .about-body{color:var(--steel);line-height:1.9;font-size:15px;}
  .about-body p{margin-bottom:16px;}
  .chain-badge{
    display:inline-flex;align-items:center;gap:8px;margin-top:24px;padding:8px 14px;
    border:1px solid var(--line);border-radius:2px;font-size:12px;color:var(--steel);
  }
  .chain-badge .dot{width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--purple));}
  @media(max-width:860px){.about-grid{grid-template-columns:1fr;}}

  /* ---------- Team ---------- */
  .team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
  @media(max-width:640px){.team-grid{grid-template-columns:1fr;}}
  .team-card{
    background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:28px;
    transition:border-color .2s;
  }
  .team-card:hover{border-color:var(--purple);}
  .team-avatar{
    width:64px;height:64px;border-radius:50%;
    background:linear-gradient(135deg, rgba(255,125,89,0.25), rgba(63,217,196,0.15));
    border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
    margin-bottom:20px;color:var(--white);font-size:18px;font-weight:600;font-family:'Rajdhani',sans-serif;
    overflow:hidden;
  }
  .team-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
  .team-name{font-weight:600;font-size:16px;margin-bottom:4px;}
  .team-role{font-size:12px;color:var(--cyan);letter-spacing:1px;text-transform:uppercase;margin-bottom:12px;}
  .team-bio{font-size:13px;color:var(--steel);line-height:1.6;margin-bottom:16px;}
  .team-x{font-size:12px;color:var(--steel);display:inline-flex;align-items:center;gap:6px;}
  .team-x:hover{color:var(--cyan);}
  .placeholder-note{
    margin-top:28px;font-size:13px;color:var(--steel);padding:16px 20px;
    border:1px dashed var(--line);border-radius:4px;
  }

  /* ---------- Traits ---------- */
  .trait-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);}
  .trait-cell{background:var(--abyss);padding:32px 24px;transition:background .2s;}
  .trait-cell:hover{background:var(--panel);}
  .trait-cat{font-size:11px;letter-spacing:2px;color:var(--steel);text-transform:uppercase;margin-bottom:10px;}
  .trait-name{font-size:20px;font-weight:600;font-family:'Rajdhani',sans-serif;margin-bottom:6px;}
  .trait-pct{font-size:13px;color:var(--cyan);}

  /* ---------- Gallery ---------- */
  .gallery-filters{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0 32px;}
  .gallery-filter{
    background:rgba(255,255,255,0.04);border:1px solid var(--line);color:var(--steel);
    padding:10px 22px;border-radius:999px;font-size:13px;font-family:'Outfit',sans-serif;
    cursor:pointer;transition:all .15s;
  }
  .gallery-filter:hover{border-color:var(--cyan);color:var(--white);}
  .gallery-filter.active{background:linear-gradient(90deg,var(--cyan),var(--purple));color:#04121b;border-color:transparent;font-weight:600;}
  .gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px;}
  .gallery-item{
    background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;
    transition:transform .15s ease,border-color .15s ease;
  }
  .gallery-item:hover{transform:translateY(-4px);border-color:var(--cyan);}
  .gallery-item.is-hidden{display:none;}
  .gallery-thumb{
    aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;font-size:48px;
    background:linear-gradient(135deg,rgba(58,160,230,0.14),rgba(255,125,89,0.10));
    overflow:hidden;
  }
  .gallery-cat{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--cyan);padding:14px 14px 0;}
  .gallery-name{font-size:14px;color:var(--white);padding:4px 14px 16px;font-weight:500;}
  .gallery-status{font-size:13px;color:var(--steel);margin:0 0 20px;}
  .gallery-cta{margin-top:32px;text-align:center;}

  /* ---------- Marketplace CTA ---------- */
  .market-panel{
    background:var(--panel);border:1px solid var(--line);border-radius:6px;
    padding:56px;display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap;
    position:relative;overflow:hidden;
  }
  .market-panel::before{
    content:'';position:absolute;top:-40%;right:-10%;width:400px;height:400px;
    background:radial-gradient(circle, rgba(255,125,89,0.16), transparent 70%);
  }
  .market-panel::after{
    content:'';position:absolute;bottom:-40%;left:-5%;width:300px;height:300px;
    background:radial-gradient(circle, rgba(63,217,196,0.14), transparent 70%);
  }
  .market-text{position:relative;z-index:1;max-width:440px;}
  .market-text h3{font-size:26px;font-weight:700;margin-bottom:12px;}
  .market-text p{color:var(--steel);font-size:14px;line-height:1.7;}
  .market-stats{display:flex;gap:36px;position:relative;z-index:1;flex-wrap:wrap;}

  /* ---------- OTC Market ---------- */
  .otc-panel{
    background:var(--panel);border:1px solid var(--line);border-radius:6px;
    padding:56px;position:relative;overflow:hidden;
  }
  .otc-panel::before{
    content:'';position:absolute;top:-30%;left:-8%;width:340px;height:340px;
    background:radial-gradient(circle, rgba(63,217,196,0.16), transparent 70%);
  }
  .otc-badges{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px;position:relative;z-index:1;}
  .otc-badge{
    display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;
    border:1px solid var(--line);font-size:12px;color:var(--steel);
  }
  .otc-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);}
  .otc-grid{display:grid;grid-template-columns:1.2fr 0.8fr;gap:48px;align-items:center;position:relative;z-index:1;}
  .otc-text h3{font-size:28px;font-weight:700;margin-bottom:14px;font-family:'Rajdhani',sans-serif;}
  .otc-text p{color:var(--steel);font-size:15px;line-height:1.75;max-width:480px;}
  .otc-stats{display:flex;gap:28px;flex-wrap:wrap;}
  .otc-stat{
    background:var(--abyss);border:1px solid var(--line);border-radius:6px;
    padding:24px 28px;flex:1;min-width:150px;text-align:center;
  }
  .otc-stat .num{font-family:'IBM Plex Mono',monospace;font-size:34px;font-weight:600;color:var(--white);}
  .otc-stat.sold .num{color:var(--cyan);}
  .otc-stat .lbl{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--steel);margin-top:8px;}
  @media(max-width:860px){.otc-grid{grid-template-columns:1fr;}}

  /* ---------- Community / Footer ---------- */
  .community{text-align:center;padding:100px 0;background:var(--abyss);position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;scroll-snap-align:start;scroll-snap-stop:always;}
  .community-links{display:flex;gap:20px;justify-content:center;margin-top:36px;flex-wrap:wrap;}
  .social-btn{
    width:52px;height:52px;border:1px solid var(--line);border-radius:50%;
    display:flex;align-items:center;justify-content:center;transition:all .2s;
  }
  .social-btn:hover{border-color:var(--purple);background:rgba(255,125,89,0.10);}

  footer{border-top:1px solid var(--line);padding:32px 0;background:var(--deep);position:relative;z-index:1;scroll-snap-align:end;}
  footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
  .footer-links{display:flex;gap:28px;font-size:13px;color:var(--steel);}
  .footer-copy{font-size:12px;color:var(--steel);}

  /* Touch devices report the real (tall, narrow) viewport height even when
     the layout width is pinned to desktop size, which stretches every
     100vh/100svh section far beyond what's actually on screen — this is
     what was pushing the floating avatar bubbles out of view. pointer:coarse
     targets real touch devices regardless of the forced viewport width, so
     we can pin full-page sections to a sane, desktop-like fixed height. */
  @media (pointer:coarse){
    .hero{min-height:860px;}
    .section{min-height:860px;}
    .community{min-height:860px;}
  }