:root{
    --bg:#151312;
    --panel:#1B1917;
    --ink:#EFE9DF;
    --ink-soft:#A79E90;
    --line:#332F2A;
    --accent:#C4A25A;
    --max:1180px;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}

  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    -webkit-font-smoothing:antialiased;
  }

  @media (prefers-reduced-motion: reduce){
    *{transition:none !important;}
  }

  a{color:inherit; text-decoration:none;}
  .wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}

  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    padding:26px 32px;
    display:flex; align-items:center; justify-content:space-between;
    color:#fff;
  }
  header .wordmark{
    font-family:'Space Grotesk', sans-serif;
    font-weight:600;
    font-size:15px;
    letter-spacing:0.06em;
  }
  header nav{display:flex; align-items:center; gap:32px;}
  header nav a{
    font-size:12px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    opacity:0.85;
    transition:opacity .2s;
  }
  header nav a:hover{opacity:1;}

  .music-menu{position:relative; display:inline-flex; align-items:center;}
  .music-trigger{cursor:pointer;}
  .music-dropdown{
    position:absolute;
    top:calc(100% + 14px);
    left:50%;
    transform:translateX(-50%) translateY(-6px);
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:10px;
    padding:8px;
    min-width:168px;
    display:flex;
    flex-direction:column;
    gap:2px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
    z-index:50;
  }
  .music-menu.open .music-dropdown{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
  }
  .music-dropdown a{
    display:flex; align-items:center; gap:10px;
    padding:10px 12px;
    border-radius:6px;
    font-family:'Inter', sans-serif;
    font-size:13px;
    letter-spacing:0.02em;
    text-transform:none;
    color:var(--ink);
    opacity:1;
    transition:background .15s ease, color .15s ease;
  }
  .music-dropdown a:hover{background:rgba(196,162,90,0.12); color:var(--accent);}
  .music-dropdown svg{width:16px; height:16px; flex-shrink:0;}

  .hero{
    position:relative;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:28px;
    background:#000;
    padding:110px 24px 40px;
  }
  .hero .frame{
    background:#fff;
    padding:14px 14px 34px;
    box-shadow:0 30px 80px rgba(0,0,0,0.6);
    max-width:620px;
    width:100%;
    transform:rotate(-0.4deg);
  }
  .hero img{
    display:block;
    width:100%;
    height:auto;
  }
  .sub-nav{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:64px;
    padding:0 24px;
    background:#000;
    width:100%;
  }
  .sub-nav a{
    font-family:'Space Grotesk', sans-serif;
    font-size:13px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--ink);
    opacity:0.8;
    transition:opacity .2s;
  }
  .sub-nav a:hover{opacity:1;}

  @media (max-width:520px){
    .sub-nav{gap:32px;}
  }

  @media (max-width:640px){
    header{padding:18px 20px;}
    header .wordmark{font-size:13px;}
    header nav{gap:16px;}
    header nav a{font-size:10.5px;}

    .wrap{padding:0 20px;}

    .hero{padding:96px 18px 32px; gap:20px;}
    .hero .frame{padding:10px 10px 22px;}

    .sub-nav{gap:36px; padding:0 20px;}
    .sub-nav a{font-size:12px;}

    section{padding:56px 0;}
    .section-head{margin-bottom:22px; padding-bottom:16px;}
    .section-head h2{font-size:18px;}

    .platform{padding:20px 2px;}
    .platform .name{font-size:15px;}
    .platform svg{width:17px; height:17px;}
  }

  @media (max-width:380px){
    header nav{gap:12px;}
    header nav a{font-size:9.5px;}
    .sub-nav{gap:24px;}
  }

  .section-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    padding-bottom:24px;
    margin-bottom:36px;
    border-bottom:1px solid var(--line);
  }
  .section-head h2{
    font-family:'Space Grotesk', sans-serif;
    font-weight:600;
    font-size:22px;
    text-transform:uppercase;
    letter-spacing:0.02em;
  }
  .section-head .tag{
    font-size:12px;
    color:var(--ink-soft);
    letter-spacing:0.06em;
  }

  section{padding:90px 0;}

  .platforms{
    border-top:1px solid var(--line);
  }
  .platform{
    border-bottom:1px solid var(--line);
    padding:26px 4px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    transition:opacity .2s;
  }
  .platform:hover{opacity:0.65;}

  .platform .left{
    display:flex; align-items:center; gap:16px;
  }
  .platform svg{width:19px; height:19px; flex-shrink:0; color:var(--accent);}
  .platform .name{
    font-family:'Space Grotesk', sans-serif;
    font-weight:500;
    font-size:17px;
  }
  .arrow{
    color:var(--ink-soft);
    display:flex;
    flex-shrink:0;
  }
  .arrow svg{width:16px; height:16px;}

  .subscribe .inner{
    max-width:520px;
  }
  .subscribe p{
    color:var(--ink-soft);
    font-size:15px;
    margin-bottom:32px;
  }

  .signup-form{
    display:flex;
    gap:0;
    border-bottom:1px solid var(--line);
    padding-bottom:14px;
  }
  .signup-form input{
    flex:1;
    background:transparent;
    border:none;
    outline:none;
    color:var(--ink);
    font-family:'Inter', sans-serif;
    font-size:16px;
    padding:8px 4px;
  }
  .signup-form input::placeholder{color:var(--ink-soft);}
  .signup-form button{
    background:none;
    border:none;
    color:var(--accent);
    font-size:12px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    cursor:pointer;
    padding:8px 4px;
    white-space:nowrap;
  }
  .signup-form button:hover{text-decoration:underline;}

  .form-note{
    margin-top:16px;
    font-size:12px;
    color:var(--ink-soft);
  }
  .form-status{
    margin-top:18px;
    font-size:12px;
    min-height:16px;
  }
  .form-status.ok{color:var(--accent);}

  footer{
    background:#000;
    padding:22px 32px;
  }
  footer .wrap{
    max-width:none;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:16px;
  }
  footer .word{display:none;}
  .footer-left{
    display:flex;
    align-items:center;
    gap:22px;
    flex-wrap:wrap;
  }
  footer .copy{
    font-family:'Space Grotesk', monospace;
    font-size:11px;
    letter-spacing:0.03em;
    color:var(--ink-soft);
    text-transform:uppercase;
  }
  .footer-links{display:flex; gap:18px; flex-wrap:wrap;}
  .footer-links a{
    font-family:'Space Grotesk', monospace;
    font-size:11px;
    letter-spacing:0.03em;
    text-transform:uppercase;
    color:var(--ink-soft);
    transition:color .2s;
  }
  .footer-links a:hover{color:var(--ink);}
  .footer-right{
    display:flex;
    align-items:center;
    gap:20px;
  }
  .social-row{display:flex; gap:18px;}
  .social-row a{
    color:#fff;
    opacity:0.8;
    transition:opacity .2s;
  }
  .social-row a:hover{opacity:1;}
  .social-row svg{width:16px; height:16px;}
  .subscribe-pill{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:'Space Grotesk', monospace;
    font-size:12px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--ink);
    border:1px solid var(--line);
    border-radius:999px;
    padding:9px 18px;
    transition:border-color .2s, color .2s;
  }
  .subscribe-pill:hover{border-color:var(--accent); color:var(--accent);}
  .pill-arrow{display:flex; flex-shrink:0;}
  .pill-arrow svg{width:14px; height:14px;}

  @media (max-width:640px){
    footer .wrap{flex-direction:column; align-items:flex-start;}
    .footer-right{width:100%; justify-content:space-between;}
  }

  ::selection{background:var(--accent); color:#151312;}

  a:focus-visible, button:focus-visible, input:focus-visible{
    outline:1px solid var(--accent);
    outline-offset:3px;
  }