:root{
    --void:#08080a;
    --night:#111113;
    --panel:#18181b;
    --panel-2:#1a1a1d;
    --violet:#d8dbe2;
    --violet-dim:#8f939c;
    --magenta:#aeb2ba;
    --ice:#f0f0f5;
    --chrome:#f2f2f5;
    --chrome-dim:#9a9aa4;
    --line: rgba(200,205,215,0.32);
    --header-bg: rgba(8,8,10,0.5);
    --panel-alpha: rgba(255,255,255,0.045);
    --gold: #d8dbe2;
    --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
    --font-tag: 'Permanent Marker', cursive;
    --font-body: 'Inter', -apple-system, sans-serif;
  }
  :root[data-theme="light"]{
    --void:#fff8ef;
    --night:#ffffff;
    --panel:#fff0e0;
    --panel-2:#ffe6cf;
    --violet:#3a3a3d;
    --violet-dim:#242426;
    --magenta:#5a5a5f;
    --ice:#3a3a3d;
    --chrome:#18181b;
    --chrome-dim:#5c5c62;
    --line: rgba(140,145,155,0.22);
    --header-bg: rgba(255,250,242,0.65);
    --panel-alpha: rgba(120,124,132,0.04);
    --gold:#c9414f;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    transition: background-color .4s ease, color .4s ease;
    background:var(--void);
    color:var(--chrome);
    font-family:var(--font-body);
    overflow-x:hidden;
    position:relative;
  }
  ::selection{ background:var(--violet); color:#fff; }
  a{ color:inherit; text-decoration:none; }
  ul{ list-style:none; }
  img{ max-width:100%; display:block; }
  .wrap{ max-width:1180px; margin:0 auto; padding:0 clamp(20px,5vw,48px); }

  .grain{
    position:fixed; inset:0; z-index:3; pointer-events:none; opacity:0.045; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  /* ---------------- nav ---------------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:50;
    background:rgba(8,8,10,0.5);
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    border-bottom:1px solid transparent;
    background-image:
      linear-gradient(rgba(8,8,10,0.5), rgba(8,8,10,0.5)),
      linear-gradient(90deg, transparent, rgba(216,219,226,0.5) 20%, rgba(216,219,226,0.9) 50%, rgba(216,219,226,0.5) 80%, transparent);
    background-origin:border-box;
    background-clip:padding-box, border-box;
    background-size:100% 100%, 220% 1px;
    background-position:0 0, 0 100%;
    background-repeat:no-repeat, no-repeat;
    animation: navdrop .6s cubic-bezier(.2,.9,.3,1) both, borderscan 6s linear infinite;
  }
  @keyframes borderscan{
    0%{ background-position:0 0, 0% 100%; }
    100%{ background-position:0 0, -220% 100%; }
  }
  @keyframes navdrop{
    from{ transform:translateY(-100%); opacity:0; }
    to{ transform:translateY(0); opacity:1; }
  }
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between;
    gap:14px;
    padding:12px clamp(20px,4vw,40px);
    max-width:1400px; margin:0 auto;
  }
  .brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
  .brand img{
    width:40px; height:40px; border-radius:50%;
    box-shadow:0 0 0 1px rgba(220,220,228,0.35), 0 0 22px rgba(216,219,226,0.55);
  }
  .brand-text{ font-family:var(--font-display); font-size:21px; letter-spacing:0.06em; line-height:1; color:#f2f2f5; white-space:nowrap; }
  .brand-text small{
    display:block; font-family:var(--font-body); font-weight:600;
    font-size:9px; letter-spacing:0.32em; color:#d8dbe2; margin-top:3px;
  }
  nav.links{ position:relative; display:flex; gap:2px; align-items:center; flex-shrink:1; min-width:0; }
  nav.links a{
    position:relative; padding:9px 13px; font-size:13.5px; font-weight:500; color:#9a9aa4;
    white-space:nowrap; transition:color .25s ease;
  }
  .nav-indicator{
    position:absolute; bottom:2px; height:2px;
    background:linear-gradient(90deg,var(--violet),var(--magenta));
    border-radius:2px;
    transition:left .3s cubic-bezier(.3,.8,.4,1), width .3s cubic-bezier(.3,.8,.4,1), opacity .2s ease;
    opacity:0; pointer-events:none;
  }
  nav.links:hover .nav-indicator{ opacity:1; }
  nav.links a:hover{ color:#f2f2f5; }
  nav.links a.active{ color:#f2f2f5; }
  .nav-cta{
    display:inline-flex; align-items:center; gap:8px; padding:10px 18px;
    font-size:12.5px; font-weight:700; letter-spacing:0.03em; color:var(--void);
    white-space:nowrap; flex-shrink:0;
    background:linear-gradient(115deg, var(--ice), var(--violet) 35%, var(--magenta) 65%, var(--ice));
    background-size:300% 100%;
    animation: btnshift 6s ease-in-out infinite;
    clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
    transition:filter .25s ease, transform .25s ease;
  }
  .nav-cta:hover{ filter:brightness(1.15); transform:translateY(-1px); }
  .burger{ display:none; width:26px; height:20px; position:relative; cursor:pointer; z-index:60; flex-shrink:0; }
  .burger span{ position:absolute; left:0; right:0; height:2px; background:var(--chrome); transition:transform .3s ease, opacity .3s ease; }
  .burger span:nth-child(1){ top:0; } .burger span:nth-child(2){ top:9px; } .burger span:nth-child(3){ top:18px; }
  .burger.open span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
  .burger.open span:nth-child(2){ opacity:0; }
  .burger.open span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }
  .mobile-panel{
    position:fixed; top:66px; left:0; right:0; z-index:45;
    background:var(--void); border-bottom:1px solid var(--line);
    display:flex; flex-direction:column; padding:10px 24px 26px;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:transform .28s ease, opacity .28s ease;
  }
  .mobile-panel.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .mobile-panel a{ padding:14px 0; font-size:16px; border-bottom:1px solid rgba(255,255,255,0.06); color:var(--chrome-dim); }
  .mobile-panel a:hover{ color:var(--chrome); }

  /* ---------------- hero: fixed full-page background ---------------- */
  #hero-fixed-bg{
    position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  }
  .hero-bg{
    position:absolute; inset:-4%;
    background-image:url("../assets/hero.jpg");
    background-size:cover; background-position:center 32%;
    filter:saturate(1.08) contrast(1.03);
    animation: kenburns 22s ease-in-out infinite alternate;
    will-change:transform;
  }
  @keyframes kenburns{
    0%{ transform:scale(1.03); }
    100%{ transform:scale(1.14); }
  }
  .hero-vignette{
    position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(8,8,10,0.55) 0%, rgba(8,8,10,0.05) 22%, rgba(8,8,10,0.15) 55%, rgba(8,8,10,0.92) 100%),
      radial-gradient(ellipse 70% 50% at 50% 100%, rgba(8,8,10,0.5), transparent 60%);
  }
  .hero-glow{
    position:absolute; width:340px; height:340px; border-radius:50%;
    top:20%; right:14%;
    background:radial-gradient(circle, rgba(216,219,226,0.22), transparent 65%);
    animation: glowpulse 6s ease-in-out infinite;
    mix-blend-mode:screen;
  }
  @keyframes glowpulse{ 0%,100%{ opacity:0.6; } 50%{ opacity:1; } }
  .hero-beam{
    position:absolute; top:19%; right:9%;
    width:0; height:0;
    border-left:2px solid transparent;
    border-right:180px solid transparent;
    border-top:260px solid rgba(216,219,226,0.10);
    transform-origin:top right;
    animation: beamsweep 5.5s ease-in-out infinite;
    mix-blend-mode:screen;
  }
  @keyframes beamsweep{
    0%,100%{ transform:rotate(24deg); }
    50%{ transform:rotate(34deg); }
  }
  #page-fx{ position:fixed; inset:0; z-index:2; pointer-events:none; opacity:0.55; }

  /* ---------------- periodic light sweep ---------------- */
  #lightsweep{
    position:fixed; top:0; bottom:0; left:-40%; width:35%; z-index:2;
    pointer-events:none; mix-blend-mode:screen;
    background:linear-gradient(100deg, transparent, rgba(200,205,215,0.10) 45%, rgba(174,178,186,0.08) 55%, transparent);
    transform:skewX(-14deg);
    animation: sweepacross 9s ease-in-out infinite;
  }
  :root[data-theme="light"] #lightsweep{
    background:linear-gradient(100deg, transparent, rgba(174,178,186,0.14) 45%, rgba(216,219,226,0.08) 55%, transparent);
  }
  @keyframes sweepacross{
    0%{ left:-40%; }
    45%{ left:120%; }
    100%{ left:120%; }
  }
  @media (prefers-reduced-motion: reduce){ #lightsweep{ display:none; } }

  /* ---------------- hero: foreground content (scrolls normally) ---------------- */
  main{ position:relative; z-index:1; }
  .hero{
    position:relative; min-height:100vh;
    display:flex; align-items:flex-end; justify-content:center;
  }

  .hero-content{
    position:relative; z-index:4; width:100%;
    padding:0 24px 76px;
    display:flex; flex-direction:column; align-items:center; text-align:center;
  }
  .hero-title{
    font-family:var(--font-display);
    font-size:clamp(52px,10vw,120px);
    line-height:0.92; letter-spacing:0.01em;
    color:#f2f2f5;
    text-shadow:0 0 40px rgba(216,219,226,0.35), 0 4px 20px rgba(0,0,0,0.5);
    margin-bottom:28px;
    animation: rise 1s ease 0s both;
  }
  .hero-title span{
    display:block;
    font-size:0.62em;
    background:linear-gradient(90deg, #d8dbe2, #f2f2f5 50%, #aeb2ba);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    letter-spacing:0.1em;
  }
  .hero-glass{
    backdrop-filter:blur(10px) saturate(140%);
    -webkit-backdrop-filter:blur(10px) saturate(140%);
    background:rgba(10,10,12,0.38);
    border:1px solid var(--line);
    padding:26px clamp(20px,5vw,46px) 30px;
    clip-path:polygon(16px 0,100% 0,calc(100% - 16px) 100%,0 100%);
    max-width:640px;
    animation: rise 1s ease .2s both;
  }
  @keyframes rise{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:translateY(0);} }
  .hero-glass p{
    color:#c5c5cc; font-size:15px; line-height:1.7; margin-bottom:20px;
  }
  .hero-glass p strong{ color:#f2f2f5; font-weight:600; }
  .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
  .server-status{
    display:inline-flex; align-items:center; gap:8px; margin:6px auto 18px;
    font-size:13px; color:var(--chrome-dim); font-family:var(--font-body);
  }
  .server-status .dot{
    width:8px; height:8px; border-radius:50%; background:#5c5c62; flex-shrink:0;
  }
  .server-status.online .dot{ background:#4bd18a; box-shadow:0 0 8px #4bd18a; animation:dotpulse 1.6s ease-in-out infinite; }
  .server-status.offline .dot{ background:#ff5a68; }
  @keyframes dotpulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.4; } }
  .btn{
    display:inline-flex; align-items:center; gap:10px; padding:14px 28px;
    font-size:13.5px; font-weight:700; letter-spacing:0.03em;
    clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);
    transition:transform .25s ease, filter .25s ease;
  }
  .btn-primary{
    color:var(--void);
    background:linear-gradient(115deg, var(--ice), var(--violet) 35%, var(--magenta) 65%, var(--ice));
    background-size:300% 100%;
    animation: btnshift 6s ease-in-out infinite;
    box-shadow:0 8px 30px rgba(216,219,226,0.35);
  }
  @keyframes btnshift{
    0%{ background-position:0% 50%; }
    50%{ background-position:100% 50%; }
    100%{ background-position:0% 50%; }
  }
  .btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.1); }
  .btn-ghost{ color:var(--chrome); background:rgba(255,255,255,0.04); border:1px solid var(--line); }
  .btn-ghost:hover{ background:rgba(255,255,255,0.08); transform:translateY(-2px); }

  .scroll-cue{
    position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:4;
    width:22px; height:36px; border:2px solid rgba(230,230,235,0.5); border-radius:12px;
  }
  .scroll-cue::before{
    content:""; position:absolute; top:6px; left:50%; width:3px; height:8px;
    background:#f0f0f5; border-radius:2px; transform:translateX(-50%);
    animation: cue 1.8s ease infinite;
  }
  @keyframes cue{ 0%{ opacity:1; top:6px;} 70%{ opacity:0; top:16px;} 100%{opacity:0; top:6px;} }

  /* ---------------- section shared ---------------- */
  section{ position:relative; padding:120px 0; }
  section:not(.hero){ background:var(--void); }
  #city{ background:
    radial-gradient(ellipse 90% 70% at 85% 0%, rgba(216,219,226,0.17), transparent 62%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(174,178,186,0.07), transparent 60%),
    var(--void);
  }
  #features{ background:
    radial-gradient(ellipse 70% 55% at 10% 100%, rgba(174,178,186,0.15), transparent 62%),
    radial-gradient(ellipse 50% 40% at 90% 0%, rgba(216,219,226,0.08), transparent 60%),
    var(--void);
  }
  #storyline{ background:
    radial-gradient(ellipse 65% 55% at 50% 0%, rgba(216,219,226,0.18), transparent 62%),
    var(--void);
  }
  .join{ background:
    radial-gradient(ellipse 85% 75% at 50% 100%, rgba(216,219,226,0.22), transparent 65%),
    radial-gradient(ellipse 50% 40% at 20% 0%, rgba(174,178,186,0.1), transparent 60%),
    var(--void);
  }
  .section-head{ max-width:640px; margin-bottom:56px; }
  .kicker{
    font-family:var(--font-tag); color:var(--magenta); font-size:15px; transform:rotate(-1.5deg);
    display:inline-block; margin-bottom:10px;
  }
  :root[data-theme="light"] .kicker{ color:var(--gold); }
  h2{
    font-family:var(--font-display); font-size:clamp(38px,6vw,64px); line-height:1.02;
    letter-spacing:0.01em; color:var(--chrome);
  }
  .section-head p{ margin-top:16px; color:var(--chrome-dim); font-size:16px; line-height:1.7; max-width:52ch; }

  /* ---------------- about / city with crest ---------------- */
  .city-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:56px; align-items:center; }
  .city-copy p{ color:var(--chrome-dim); font-size:16px; line-height:1.75; margin-bottom:16px; max-width:54ch; }
  .city-copy p strong{ color:var(--chrome); font-weight:600; }
  .crest-panel{
    aspect-ratio:1/1.05; position:relative;
    background: linear-gradient(160deg, #1a1a1d, #18181b 60%, #08080a);
    border:1px solid var(--line);
    clip-path:polygon(0 6%, 94% 0, 100% 92%, 8% 100%);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  .crest-panel::before{
    content:""; position:absolute; inset:0;
    background:radial-gradient(circle at 30% 20%, rgba(216,219,226,0.35), transparent 55%);
  }
  .crest-panel img{
    width:62%; border-radius:50%;
    box-shadow:0 0 0 1px rgba(220,220,228,0.3), 0 0 60px rgba(216,219,226,0.5);
    animation: crestfloat 5s ease-in-out infinite;
    position:relative; z-index:1;
  }
  @keyframes crestfloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
  .crest-panel .tag{
    position:absolute; bottom:26px; left:26px; right:26px; z-index:1;
    font-family:var(--font-tag); color:#f0f0f5; font-size:15px; opacity:0.85; transform:rotate(-1deg);
    text-align:center;
  }

  /* ---------------- feature cards ---------------- */
  .feature-grid{
    display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
    background:var(--line); border:1px solid var(--line);
  }
  .feature{
    background:var(--night); padding:32px 22px 28px; min-height:220px;
    display:flex; flex-direction:column; position:relative; transition:background .3s ease;
  }
  .feature:hover{ background:var(--panel); }
  .feature .icon{
    width:34px; height:34px; margin-bottom:18px; color:var(--violet);
    filter:drop-shadow(0 0 6px rgba(200,205,215,0.5));
    transition:filter .3s ease, transform .3s ease;
  }
  .feature:hover .icon{ filter:drop-shadow(0 0 12px rgba(200,205,215,0.85)); transform:translateY(-3px) scale(1.06); }
  .feature h3{ font-family:var(--font-display); font-size:22px; letter-spacing:0.02em; color:var(--chrome); margin-bottom:9px; }
  .feature p{ font-size:13.5px; line-height:1.6; color:var(--chrome-dim); }
  .feature .corner{
    position:absolute; top:0; right:0; width:0; height:0;
    border-style:solid; border-width:0 20px 20px 0;
    border-color:transparent var(--violet-dim) transparent transparent; opacity:0.5;
  }

  /* ---------------- storyline (empty) ---------------- */
  .story-panel{
    border:1px dashed var(--line);
    background:
      repeating-linear-gradient(135deg, rgba(216,219,226,0.03) 0 18px, transparent 18px 36px),
      var(--panel);
    padding:clamp(48px,8vw,90px) clamp(24px,6vw,64px); text-align:center; position:relative; overflow:hidden;
  }
  .story-panel img{
    width:56px; height:56px; margin:0 auto 22px; border-radius:50%;
    opacity:0.9; box-shadow:0 0 30px rgba(216,219,226,0.5);
    animation: flickerslow 3.6s ease-in-out infinite;
  }
  @keyframes flickerslow{ 0%,100%{ opacity:0.95;} 48%{opacity:0.95;} 50%{ opacity:0.35;} 52%{opacity:0.95;} }
  .story-panel h3{ font-family:var(--font-display); font-size:clamp(30px,5vw,44px); color:var(--chrome); margin-bottom:14px; }
  .story-panel p{ color:var(--chrome-dim); max-width:46ch; margin:0 auto; font-size:15px; line-height:1.7; }
  .story-panel .pulse-line{
    width:64px; height:2px; margin:26px auto 0;
    background:linear-gradient(90deg,transparent, var(--violet), transparent);
    animation: sweep 2.4s ease-in-out infinite;
  }
  @keyframes sweep{ 0%,100%{ opacity:0.3; width:40px;} 50%{ opacity:1; width:90px;} }

  /* ---------------- join ---------------- */
  .join{ text-align:center; padding:130px 0 150px; }
  .join h2{ margin-bottom:16px; }
  .join p{ color:var(--chrome-dim); max-width:48ch; margin:0 auto 34px; font-size:16px; line-height:1.7; }
  .join .btn-primary{ font-size:16px; padding:18px 38px; }

  /* ---------------- footer ---------------- */
  footer{ border-top:1px solid var(--line); padding:44px 0 34px; position:relative; z-index:1; background:var(--void); }
  .foot-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px; }
  .foot-brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:19px; letter-spacing:0.05em; color:var(--chrome-dim); }
  .foot-brand img{ width:26px; height:26px; border-radius:50%; }
  .foot-links{ display:flex; gap:22px; }
  .foot-links a{ font-size:13px; color:var(--chrome-dim); }
  .foot-links a:hover{ color:var(--chrome); }
  .foot-fine{ margin-top:24px; font-size:12px; color:#5a5a60; }

  @media (max-width: 980px){
    .feature-grid{ grid-template-columns:repeat(3,1fr); }
  }
  @media (max-width: 1280px){
    nav.links{ display:none; } .nav-cta{ display:none; } .burger{ display:block; }
    .city-grid{ grid-template-columns:1fr; }
  }
  @media (max-width: 560px){
    .feature-grid{ grid-template-columns:repeat(2,1fr); }
    section{ padding:88px 0; }
    .hero{ align-items:flex-end; }
  }
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  }

  /* ---------------- nav dropdown ---------------- */
  .nav-dropdown{ position:relative; }
  .nav-dropdown-menu{
    position:absolute; top:100%; left:0; min-width:190px;
    background:var(--night); border:1px solid var(--line);
    padding:6px; opacity:0; pointer-events:none;
    transform:translateY(-6px);
    transition:opacity .2s ease, transform .2s ease;
    box-shadow:0 20px 40px rgba(0,0,0,0.4);
  }
  .nav-dropdown:hover .nav-dropdown-menu{ opacity:1; pointer-events:auto; transform:translateY(0); }
  .nav-dropdown-menu a{
    display:block; padding:10px 14px; font-size:13px; color:var(--chrome-dim);
    white-space:nowrap;
    transition:background .2s ease, color .2s ease;
  }
  .nav-dropdown-menu a:hover{ background:var(--panel-alpha); color:var(--chrome); }
  .mobile-panel a.sub{ padding-left:18px; font-size:14px; opacity:0.85; }

  /* ---------------- interior page header ---------------- */
  .page-hero{
    padding:170px 0 70px; text-align:center; position:relative; z-index:1;
    background:
      radial-gradient(ellipse 80% 60% at 50% 0%, rgba(216,219,226,0.14), transparent 62%),
      var(--void);
  }
  .page-hero h1{
    font-family:var(--font-display); font-size:clamp(40px,7vw,72px); color:var(--chrome);
    letter-spacing:0.01em; line-height:1.02; margin-top:10px;
  }
  .page-hero p{ color:var(--chrome-dim); max-width:56ch; margin:16px auto 0; font-size:16px; line-height:1.7; }

  /* ---------------- empty-state gallery panel (reuses story-panel look) ---------------- */
  .empty-panel{
    border:1px dashed var(--line);
    background:
      repeating-linear-gradient(135deg, var(--panel-alpha) 0 18px, transparent 18px 36px),
      var(--panel);
    padding:clamp(48px,8vw,90px) clamp(24px,6vw,64px); text-align:center; position:relative; overflow:hidden;
  }
  .empty-panel img{
    width:56px; height:56px; margin:0 auto 22px; border-radius:50%;
    opacity:0.9; box-shadow:0 0 30px rgba(216,219,226,0.35);
  }
  .empty-panel h3{ font-family:var(--font-display); font-size:clamp(28px,5vw,40px); color:var(--chrome); margin-bottom:14px; }
  .empty-panel p{ color:var(--chrome-dim); max-width:46ch; margin:0 auto; font-size:15px; line-height:1.7; }
  .empty-panel .pulse-line{
    width:64px; height:2px; margin:26px auto 0;
    background:linear-gradient(90deg,transparent, var(--violet), transparent);
    animation: sweep 2.4s ease-in-out infinite;
  }

  /* ---------------- gallery grid (ready for real content later) ---------------- */
  .gallery-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:20px;
  }
  .gallery-card{
    aspect-ratio:16/10; background:var(--night); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    color:var(--chrome-dim); font-size:12px; letter-spacing:0.05em;
    position:relative; overflow:hidden;
  }
  .gallery-card::before{
    content:""; position:absolute; inset:0;
    background:repeating-linear-gradient(135deg, var(--panel-alpha) 0 14px, transparent 14px 28px);
  }

  /* ---------------- staff page: simple uniform grid, no tiers/categories ---------------- */
  .staff-section{ margin-bottom:48px; }
  .staff-section-title{
    font-family:var(--font-display); font-size:26px; letter-spacing:0.03em; color:var(--chrome);
    margin-bottom:20px; padding-bottom:10px; border-bottom:1px solid var(--line);
  }
  .staff-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:20px; }
  .staff-card{
    background:linear-gradient(160deg, var(--panel-2), var(--panel));
    border:1px solid var(--line);
    padding:28px 20px 24px;
    text-align:center;
    transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
    position:relative;
  }
  .staff-card:hover{ transform:translateY(-6px); border-color:var(--violet); box-shadow:0 20px 40px rgba(0,0,0,0.4); }
  .staff-avatar{
    width:64px; height:64px; margin:0 auto 14px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, var(--panel-2), var(--panel));
    border:1px solid var(--line);
    font-family:var(--font-display); font-size:22px; color:var(--violet);
  }
  .staff-card h3{ font-family:var(--font-display); font-size:19px; color:var(--chrome); letter-spacing:0.02em; margin-bottom:10px; }
  .staff-badges{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
  .staff-badge{
    font-size:10px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
    padding:4px 9px; border-radius:3px;
    background:rgba(216,219,226,0.15); color:#ff8a93; border:1px solid rgba(216,219,226,0.35);
  }
  .staff-badge.dim{ background:var(--panel-alpha); color:var(--chrome-dim); border-color:var(--line); }
  .staff-badge.blue{ background:rgba(174,178,186,0.15); color:#8fb0ff; border-color:rgba(174,178,186,0.35); }
  .staff-badge.green{ background:rgba(70,180,120,0.15); color:#7de0ab; border-color:rgba(70,180,120,0.35); }
  .staff-badge.gold{ background:rgba(232,184,75,0.15); color:#e8b84b; border-color:rgba(232,184,75,0.35); }

  /* ---------------- police rules ---------------- */
  .rules-block{ margin-bottom:44px; }
  .rules-block h3{
    font-family:var(--font-display); font-size:24px; color:var(--chrome); margin-bottom:14px;
    display:flex; align-items:center; gap:10px;
  }
  .rules-block h3 span{
    display:inline-flex; align-items:center; justify-content:center;
    width:26px; height:26px; font-size:13px; font-family:var(--font-body); font-weight:700;
    background:var(--violet); color:var(--void); border-radius:4px;
  }
  .rules-block ul{ list-style:none; }
  .rules-block li{
    color:var(--chrome-dim); font-size:15px; line-height:1.7; padding:9px 0 9px 22px;
    position:relative; border-bottom:1px solid var(--line);
  }
  .rules-block li::before{
    content:"›"; position:absolute; left:0; color:var(--violet); font-weight:700;
  }
  .rules-note{
    margin-top:10px; margin-bottom:40px; padding:16px 20px;
    border:1px dashed var(--line); background:var(--panel-alpha);
    color:var(--chrome-dim); font-size:13.5px; line-height:1.6;
  }

  /* ---------------- police application ---------------- */
  .app-steps{ display:grid; gap:16px; margin-bottom:50px; }
  .app-step{
    display:flex; gap:18px; align-items:flex-start;
    background:var(--night); border:1px solid var(--line); padding:22px 24px;
  }
  .app-step .num{
    font-family:var(--font-display); font-size:26px; color:var(--violet); min-width:36px;
  }
  .app-step h4{ font-family:var(--font-body); font-weight:700; color:var(--chrome); margin-bottom:6px; font-size:15px; }
  .app-step p{ color:var(--chrome-dim); font-size:14px; line-height:1.65; }
  .app-cta{
    text-align:center; padding:44px 24px;
    border:1px solid var(--line);
    background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(216,219,226,0.14), transparent 65%), var(--panel);
  }
  .app-cta h3{ font-family:var(--font-display); font-size:clamp(26px,4vw,36px); color:var(--chrome); margin-bottom:12px; }
  .app-cta p{ color:var(--chrome-dim); max-width:52ch; margin:0 auto 26px; font-size:15px; line-height:1.7; }

  /* ---------------- police application form ---------------- */
  .app-form{
    background:var(--night); border:1px solid var(--line); padding:32px clamp(20px,4vw,40px);
    display:flex; flex-direction:column; gap:20px;
  }
  .form-row{ display:flex; flex-direction:column; gap:8px; }
  .form-row-half{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  .form-row-half > div{ display:flex; flex-direction:column; gap:8px; }
  .app-form label{ font-size:13.5px; font-weight:600; color:var(--chrome); }
  .app-form input, .app-form textarea{
    background:var(--panel); border:1px solid var(--line); color:var(--chrome);
    font-family:var(--font-body); font-size:14px; padding:12px 14px;
    resize:vertical; transition:border-color .2s ease;
  }
  .app-form input:focus, .app-form textarea:focus{ outline:none; border-color:var(--chrome-dim); }
  .app-form button{ align-self:flex-start; }
  .app-form button:disabled{ opacity:0.6; cursor:not-allowed; }
  .form-note{ font-size:13.5px; min-height:1.2em; }
  .form-note.success{ color:#7de0ab; }
  .form-note.error{ color:#ff8a93; }
  @media (max-width:560px){ .form-row-half{ grid-template-columns:1fr; } }

  /* ---------------- discord auth area ---------------- */
  .auth-area{ display:flex; align-items:center; }
  .auth-login{
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 18px; font-size:13px; font-weight:600;
    color:var(--chrome); background:rgba(88,101,242,0.15);
    border:1px solid rgba(88,101,242,0.5);
    clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
    transition:background .25s ease, transform .25s ease;
  }
  .auth-login:hover{ background:rgba(88,101,242,0.3); transform:translateY(-1px); }
  .auth-login svg{ width:16px; height:16px; }

  .auth-user{
    display:flex; align-items:center; gap:12px;
    padding:6px 8px 6px 6px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(200,205,215,0.3);
    clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
  }
  .auth-user img{
    width:28px; height:28px; border-radius:50%;
    box-shadow:0 0 0 1px rgba(220,220,228,0.5), 0 0 10px rgba(216,219,226,0.4);
    animation: avatarpulse 4s ease-in-out infinite;
  }
  @keyframes avatarpulse{
    0%,100%{ box-shadow:0 0 0 1px rgba(220,220,228,0.5), 0 0 10px rgba(216,219,226,0.35); }
    50%{ box-shadow:0 0 0 1px rgba(220,220,228,0.7), 0 0 16px rgba(216,219,226,0.6); }
  }
  .auth-user span{ font-size:13px; color:#9a9aa4; font-weight:500; }

  .auth-logout{
    display:inline-flex; align-items:center; gap:6px;
    font-size:12px; font-weight:600; letter-spacing:0.02em;
    color:#9a9aa4;
    background:transparent;
    border:1px solid rgba(200,205,215,0.3);
    padding:7px 14px 7px 12px;
    clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
    transition:color .22s ease, background .22s ease, border-color .22s ease;
  }
  .auth-logout svg{ width:13px; height:13px; transition:transform .22s ease; }
  .auth-logout:hover{
    color:#fff;
    background:linear-gradient(135deg, rgba(174,178,186,0.35), rgba(216,219,226,0.35));
    border-color:rgba(174,178,186,0.6);
  }
  .auth-logout:hover svg{ transform:translateX(2px); }
  @media (max-width:1280px){ .auth-area{ display:none; } }

  /* ---------------- theme toggle ---------------- */
  .theme-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(200,205,215,0.3);
    border-radius:50%;
    color:#9a9aa4;
    cursor:pointer;
    transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
  }
  .theme-toggle:hover{ color:#f2f2f5; border-color:#9a9aa4; transform:rotate(-8deg); }
  .theme-toggle svg{ width:18px; height:18px; }
  .theme-toggle .icon-moon{ display:none; }
  :root[data-theme="light"] .theme-toggle .icon-sun{ display:none; }
  :root[data-theme="light"] .theme-toggle .icon-moon{ display:block; }
  .theme-toggle-mobile{
    width:auto; height:auto; border-radius:0; justify-content:flex-start; gap:10px;
    padding:14px 0; font-size:14px; color:var(--chrome-dim); border:none; border-bottom:1px solid rgba(255,255,255,0.06);
    background:transparent;
  }
  @media (max-width:1280px){ .theme-toggle:not(.theme-toggle-mobile){ display:none; } }

  /* ---------------- scroll-reveal ---------------- */
  .reveal{
    opacity:0; transform:translateY(22px);
    transition:opacity .7s ease, transform .7s ease;
  }
  .reveal.in-view{ opacity:1; transform:translateY(0); }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
  }

  /* ---------------- button shine sweep ---------------- */
  .btn{ position:relative; overflow:hidden; }
  .btn::after{
    content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
    background:linear-gradient(115deg, transparent, rgba(255,255,255,0.35), transparent);
    transform:skewX(-20deg);
    transition:left .6s ease;
    pointer-events:none;
  }
  .btn:hover::after{ left:130%; }

  /* ---------------- nav logo breathing glow + glitch ---------------- */
  .brand img{
    animation: crestpulse 5s ease-in-out infinite, navglitch 8s steps(1) infinite;
  }
  @keyframes crestpulse{
    0%,100%{ box-shadow:0 0 0 1px rgba(220,220,228,0.35), 0 0 22px rgba(216,219,226,0.55); }
    50%{ box-shadow:0 0 0 1px rgba(220,220,228,0.55), 0 0 30px rgba(216,219,226,0.8); }
  }
  @keyframes navglitch{
    0%, 95%, 100%{ filter:none; transform:translate(0); }
    96%{ filter:drop-shadow(2px 0 0 rgba(255,60,90,0.55)) drop-shadow(-2px 0 0 rgba(90,180,255,0.55)); transform:translate(1px,0); }
    97%{ transform:translate(-1px,0); }
    98%{ filter:none; transform:translate(0); }
  }

  /* ---------------- entrance splash ---------------- */
  .entrance{
    position:fixed; inset:0; z-index:200; background:var(--void);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
    transition:opacity .8s ease, visibility .8s ease;
    overflow:hidden;
  }
  .entrance.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
  .entrance-scan{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
  .entrance-scan::before{
    content:""; position:absolute; left:0; right:0; top:-2px; height:2px;
    background:linear-gradient(90deg, transparent, rgba(216,219,226,0.7), transparent);
    animation: entrancescan 3.2s linear infinite;
  }
  @keyframes entrancescan{ 0%{ top:-2px; } 100%{ top:100%; } }
  .entrance-logo{
    width:110px; height:110px; border-radius:50%;
    box-shadow:0 0 50px rgba(216,219,226,0.4);
    animation: entrancepulse 2.4s ease-in-out infinite;
    position:relative; z-index:1;
  }
  @keyframes entrancepulse{
    0%,100%{ transform:scale(1); filter:brightness(1); }
    50%{ transform:scale(1.045); filter:brightness(1.3); }
  }
  .entrance-title{
    font-family:var(--font-display); font-size:clamp(26px,5vw,42px);
    letter-spacing:0.3em; color:var(--chrome); position:relative; z-index:1;
  }
  .entrance-btn{
    margin-top:8px; padding:16px 42px; border:1px solid var(--line); background:transparent;
    color:var(--chrome); font-family:var(--font-body); font-weight:700; letter-spacing:0.16em; font-size:12.5px;
    cursor:pointer; position:relative; z-index:1;
    transition:background .3s ease, color .3s ease, letter-spacing .3s ease, transform .3s ease;
  }
  .entrance-btn:hover{ background:var(--chrome); color:var(--void); letter-spacing:0.22em; transform:translateY(-2px); }
  .entrance-hint{
    font-size:10.5px; color:var(--chrome-dim); letter-spacing:0.1em; text-transform:uppercase;
    opacity:0.7; position:relative; z-index:1;
  }

  /* ---------------- ambient sound toggle ---------------- */
  .icon-sound-off{ display:none; }
  [data-sound="off"] .icon-sound-on{ display:none; }
  [data-sound="off"] .icon-sound-off{ display:block; }

  /* ---------------- page-wide scanline ---------------- */
  #page-scanline{
    position:fixed; left:0; right:0; height:2px; z-index:6; pointer-events:none;
    background:linear-gradient(90deg, transparent, rgba(216,219,226,0.10), transparent);
    animation: pagescan 7s linear infinite;
  }
  @keyframes pagescan{ 0%{ top:-2px; } 100%{ top:100%; } }

  /* ---------------- tilt-on-hover cards ---------------- */
  .feature, .staff-card{ transform-style:preserve-3d; will-change:transform; }

  @media (prefers-reduced-motion: reduce){
    .entrance{ display:none !important; }
    #page-scanline{ display:none; }
    .brand img{ animation:none; }
  }

  /* ---------------- car/ped gallery: real cards with site branding ---------------- */
  .page-hero-video{
    position:relative; overflow:hidden; padding-top:150px; padding-bottom:50px;
    min-height:0;
  }
  .page-hero-video-bg{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    filter:saturate(1.05) brightness(0.55);
    z-index:0;
  }
  .page-hero-video-overlay{
    position:absolute; inset:0; z-index:0;
    background:linear-gradient(180deg, rgba(8,8,10,0.65) 0%, rgba(8,8,10,0.4) 40%, var(--void) 100%);
  }
  .page-hero-video .wrap{ position:relative; z-index:1; }

  /* ---------------- police light bar effect ---------------- */
  .page-hero-video.police-lights::before{
    content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
    animation: policeflash 1.6s steps(1) infinite;
  }
  @keyframes policeflash{
    0%, 100%{ background:radial-gradient(ellipse 60% 50% at 15% 0%, rgba(200,30,40,0.30), transparent 65%); }
    25%{ background:radial-gradient(ellipse 60% 50% at 15% 0%, rgba(200,30,40,0.05), transparent 65%); }
    50%{ background:radial-gradient(ellipse 60% 50% at 85% 0%, rgba(30,80,220,0.30), transparent 65%); }
    75%{ background:radial-gradient(ellipse 60% 50% at 85% 0%, rgba(30,80,220,0.05), transparent 65%); }
  }
  .police-badge{
    width:52px; height:52px; margin:0 auto 14px;
    display:flex; align-items:center; justify-content:center;
    color:var(--chrome);
    animation: badgepulse 2s ease-in-out infinite;
  }
  .police-badge svg{ width:100%; height:100%; }
  @keyframes badgepulse{
    0%,100%{ filter:drop-shadow(0 0 6px rgba(200,30,40,0.6)); transform:scale(1); }
    50%{ filter:drop-shadow(0 0 14px rgba(30,80,220,0.7)); transform:scale(1.06); }
  }
  @media (prefers-reduced-motion: reduce){
    .page-hero-video.police-lights::before{ animation:none; display:none; }
    .police-badge{ animation:none; }
  }

  /* YouTube-as-background hero (police pages) */
  .page-hero-yt-wrap{
    position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none;
  }
  .page-hero-yt{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:100%; height:100%;
    min-width:100%; min-height:100%;
    /* oversize so the 16:9 embed always covers this box instead of
       letterboxing, whatever the section's own aspect ratio is */
    width:max(100%, 177.78vh);
    height:max(100%, 56.25vw);
    filter:saturate(1.05) brightness(0.5);
  }

  /* ---------------- showroom-style vehicle cards ---------------- */
  .car-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:28px;
    margin-top:10px;
  }
  .car-card{
    background:
      radial-gradient(ellipse 70% 50% at 50% 30%, rgba(216,219,226,0.10), transparent 65%),
      var(--night);
    border:1px solid var(--line);
    overflow:hidden; transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
    position:relative;
  }
  .car-card:hover{ transform:translateY(-6px); border-color:var(--chrome-dim); box-shadow:0 24px 50px rgba(0,0,0,0.45); }
  .car-media{
    aspect-ratio:16/7; overflow:hidden; position:relative;
    background:#000;
  }
  .car-shot{
    width:100%; height:100%; object-fit:cover; object-position:center 50%;
    display:block; position:relative; z-index:0;
    filter:saturate(1.05) contrast(1.02);
    transition:transform .5s ease;
  }
  .car-card:hover .car-shot{ transform:scale(1.05); }
  /* studio spotlight, layered ON TOP of the photo with a blend mode so it
     reads as a lighting effect regardless of what's in the screenshot.
     Kept subtle here since these renders already come fully lit. */
  .car-media::before{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:radial-gradient(ellipse 55% 60% at 50% 38%, rgba(255,255,255,0.22), transparent 68%);
    mix-blend-mode:screen;
  }
  /* vignette: a light edge darkening only, not a heavy re-light, since the
     source render already has its own studio lighting baked in */
  .car-media::after{
    content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:
      url("../assets/watermark.png") repeat 0 0/130px auto,
      radial-gradient(ellipse 78% 85% at 50% 45%, transparent 55%, rgba(0,0,0,0.3) 100%),
      linear-gradient(180deg, rgba(0,0,0,0.18) 0%, transparent 18%, transparent 72%, rgba(0,0,0,0.5) 100%);
    mix-blend-mode:overlay;
  }
  .car-floor{
    position:absolute; left:0; right:0; bottom:0; height:34%; z-index:2; pointer-events:none;
    background:linear-gradient(0deg, rgba(0,0,0,0.9), transparent);
  }
  .car-floor::before{
    content:""; position:absolute; left:10%; right:10%; bottom:14px; height:2px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    box-shadow:0 0 20px 4px rgba(255,255,255,0.25);
  }
  .car-watermark{
    position:absolute; top:12px; left:12px; z-index:3;
    display:flex; align-items:center; gap:6px;
    padding:4px 10px 4px 4px;
    background:rgba(0,0,0,0.55); backdrop-filter:blur(3px);
    border:1px solid rgba(255,255,255,0.14);
  }
  .car-watermark img{ width:16px; height:16px; border-radius:50%; }
  .car-watermark span{ font-family:var(--font-display); font-size:10px; letter-spacing:0.06em; color:#fff; }
  .car-info{
    padding:16px 18px 18px; border-top:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between; gap:12px;
  }
  .car-info h3{ font-family:var(--font-body); font-weight:600; font-size:13.5px; color:var(--chrome); line-height:1.4; }
  .car-price{ font-family:var(--font-mono, var(--font-body)); font-size:12px; color:var(--chrome-dim); white-space:nowrap; }
  .gallery-cta{
    text-align:center; margin-top:36px; padding:44px 24px;
    border:1px solid var(--line);
    background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(216,219,226,0.14), transparent 65%), var(--panel);
  }
  .gallery-cta h3{ font-family:var(--font-display); font-size:clamp(24px,4vw,32px); color:var(--chrome); margin-bottom:10px; }
  .gallery-cta p{ color:var(--chrome-dim); max-width:52ch; margin:0 auto 22px; font-size:14.5px; line-height:1.7; }

  /* ---------------- floating spotify player ---------------- */
  .spotify-player{
    position:fixed; bottom:20px; right:20px; z-index:120;
    width:300px; max-width:calc(100vw - 40px);
    background:linear-gradient(160deg, var(--panel-2), var(--panel));
    border:1px solid var(--line);
    clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
    box-shadow:0 20px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(216,219,226,0.06) inset;
    opacity:0; transform:translateY(16px) scale(0.98); pointer-events:none;
    transition:opacity .4s ease, transform .4s ease;
    animation: playerglow 4s ease-in-out infinite;
  }
  .spotify-player.visible{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
  @keyframes playerglow{
    0%,100%{ box-shadow:0 20px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(216,219,226,0.06) inset; }
    50%{ box-shadow:0 20px 60px rgba(0,0,0,0.55), 0 0 22px rgba(216,219,226,0.18), 0 0 0 1px rgba(216,219,226,0.1) inset; }
  }
  .spotify-player-head{
    display:flex; align-items:center; gap:8px; flex-wrap:nowrap;
    padding:12px 14px; border-bottom:1px solid var(--line);
    font-family:var(--font-display); font-size:13px; letter-spacing:0.06em;
    color:var(--chrome); text-transform:uppercase;
  }
  .spotify-player-head .label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .spotify-volume-inline{ display:flex; align-items:center; gap:6px; min-width:0; flex-shrink:1; }
  .spotify-volume-inline svg{ width:14px; height:14px; color:var(--chrome-dim); flex-shrink:0; }
  .spotify-volume-inline input[type="range"]{
    width:56px; -webkit-appearance:none; appearance:none;
    height:3px; background:var(--line); border-radius:2px; outline:none;
  }
  .spotify-volume-inline input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none;
    width:11px; height:11px; border-radius:50%;
    background:var(--chrome); cursor:pointer;
  }
  .spotify-volume-inline input[type="range"]::-moz-range-thumb{
    width:11px; height:11px; border-radius:50%; border:none;
    background:var(--chrome); cursor:pointer;
  }
  .spotify-player.collapsed .spotify-player-head{ border-bottom:none; }
  .spotify-eq{ display:flex; align-items:flex-end; gap:2px; height:14px; }
  .spotify-eq span{
    width:3px; background:var(--chrome); border-radius:1px;
    animation: eqbounce 1.1s ease-in-out infinite;
  }
  .spotify-eq span:nth-child(1){ animation-delay:-0.9s; }
  .spotify-eq span:nth-child(2){ animation-delay:-0.4s; }
  .spotify-eq span:nth-child(3){ animation-delay:-0.6s; }
  .spotify-eq span:nth-child(4){ animation-delay:-0.1s; }
  @keyframes eqbounce{
    0%,100%{ height:3px; }
    50%{ height:14px; }
  }
  .spotify-player-head .label{ flex:1; }
  .spotify-player-head button{
    background:none; border:1px solid var(--line); color:var(--chrome-dim);
    font-size:13px; cursor:pointer; width:24px; height:24px; line-height:1;
    display:flex; align-items:center; justify-content:center;
    transition:color .2s ease, border-color .2s ease, background .2s ease;
  }
  .spotify-player-head button:hover{ color:var(--chrome); border-color:var(--chrome-dim); background:var(--panel-alpha); }
  .spotify-player.collapsed #spotify-embed-slot{ display:none; }
  #spotify-embed-slot{ padding:2px; }
  #spotify-embed-slot iframe{ display:block; border:0; width:100%; border-radius:0; }
  @media (max-width:560px){ .spotify-player{ right:12px; bottom:12px; width:260px; } }
  @media (prefers-reduced-motion: reduce){
    .spotify-player{ animation:none; }
    .spotify-eq span{ animation:none; height:8px; }
  }

  /* ---------------- cursor-follow glow ---------------- */
  #cursor-glow{
    position:fixed; width:420px; height:420px; border-radius:50%;
    background:radial-gradient(circle, rgba(216,219,226,0.10), transparent 70%);
    top:0; left:0; z-index:1; pointer-events:none;
    transform:translate(-50%,-50%);
    transition:opacity .3s ease;
    opacity:0;
  }
  #cursor-glow.visible{ opacity:1; }
  @media (hover:none){ #cursor-glow{ display:none; } }

  /* ---------------- magnetic buttons + ripple ---------------- */
  .btn, .nav-cta{ will-change:transform; }
  .btn-ripple{
    position:absolute; border-radius:50%; background:rgba(255,255,255,0.5);
    transform:scale(0); animation:rippleEffect .6s ease-out forwards;
    pointer-events:none;
  }
  @keyframes rippleEffect{
    to{ transform:scale(1); opacity:0; }
  }

  /* ---------------- gradient-shift section headings ---------------- */
  h2{
    background:linear-gradient(100deg, var(--chrome) 40%, #d8dbe2 50%, var(--chrome) 60%);
    background-size:250% 100%;
    -webkit-background-clip:text; background-clip:text;
    animation: h2shine 8s ease-in-out infinite;
  }
  @keyframes h2shine{
    0%,100%{ background-position:0% 0; }
    50%{ background-position:100% 0; }
  }

  @media (prefers-reduced-motion: reduce){
    #cursor-glow{ display:none; }
    h2{ animation:none; }
  }

  /* ---------------- particle burst on click ---------------- */
  .btn-particle{
    position:fixed; width:5px; height:5px; border-radius:50%;
    background:#f2f2f5; pointer-events:none; z-index:300;
    animation:particleFly .7s ease-out forwards;
  }
  @keyframes particleFly{
    to{ transform:translate(var(--px), var(--py)) scale(0); opacity:0; }
  }

  /* ---------------- back to top button ---------------- */
  #back-to-top{
    position:fixed; right:24px; bottom:24px; z-index:90;
    width:48px; height:48px; border-radius:50%;
    background:var(--panel); border:1px solid var(--line);
    color:var(--chrome); display:flex; align-items:center; justify-content:center;
    cursor:pointer; opacity:0; transform:translateY(16px) scale(0.85);
    pointer-events:none; transition:opacity .3s ease, transform .3s ease, border-color .25s ease, background .25s ease;
  }
  #back-to-top.visible{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
  #back-to-top:hover{ border-color:var(--chrome-dim); background:var(--panel-2); }
  #back-to-top svg{ width:20px; height:20px; transition:transform .25s ease; }
  #back-to-top:hover svg{ transform:translateY(-3px); }

  /* ---------------- text scramble ---------------- */
  .scramble-text{ display:inline-block; }

  /* ---------------- blur-to-sharp image reveal ---------------- */
  .blur-reveal{ filter:blur(14px); opacity:0; transform:scale(1.04); transition:filter .8s ease, opacity .8s ease, transform .8s ease; }
  .blur-reveal.in-view{ filter:blur(0); opacity:1; transform:scale(1); }

  @media (prefers-reduced-motion: reduce){
    #back-to-top{ transition:opacity .01s, transform .01s; }
    .blur-reveal{ filter:none; opacity:1; transform:none; transition:none; }
  }