:root{
    --bg:#0a0710;
    --bg-alt:#120b1f;
    --card:rgba(255,255,255,0.035);
    --card-border:rgba(255,255,255,0.09);
    --pink:#ff2e88;
    --violet:#8b2fe0;
    --grad: linear-gradient(135deg, var(--pink), var(--violet));
    --text:#f5f2fb;
    --muted:#b3a6cc;
    --muted-dim:#7c6f96;
    --display: 'Unbounded', sans-serif;
    --body: 'Manrope', sans-serif;
    --mono: 'Space Mono', monospace;
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--body);
    overflow-x:hidden;
    line-height:1.6;
  }
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}
  img{max-width:100%;display:block;}
  section{position:relative;z-index:1;}
  .wrap{max-width:1200px;margin:0 auto;padding:0 32px;}
  @media(max-width:640px){.wrap{padding:0 20px;}}

  ::selection{background:var(--pink);color:#fff;}

  /* focus visibility */
  a:focus-visible, button:focus-visible, input:focus-visible{
    outline:2px solid var(--pink); outline-offset:3px;
  }

  /* ===== NAV ===== */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    backdrop-filter:blur(14px);
    background:rgba(10,7,16,0.6);
    border-bottom:1px solid rgba(255,255,255,0.06);
  }
  nav.wrap{
    display:flex; align-items:center; justify-content:space-between;
    height:76px;
  }
  .logo{
    font-family:var(--display); font-weight:700; font-size:17px;
    letter-spacing:0.02em; display:flex; align-items:center; gap:10px;
  }
  .logo-mark{
    width:34px;height:34px;border-radius:9px;background:var(--grad);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--display); font-size:14px; font-weight:900;
  }
  .logo span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .nav-links{display:flex; gap:36px; font-size:14px; font-weight:600; color:var(--muted);}
  .nav-links a:hover{color:var(--text);}
  .nav-cta{
    background:var(--grad); color:#fff; font-weight:700; font-size:13px;
    padding:11px 22px; border-radius:999px; border:none; cursor:pointer;
    letter-spacing:0.02em;
  }
  .burger{display:none;}
  @media(max-width:860px){
    .nav-links{display:none;}
  }

  /* ===== HERO ===== */
  .hero{
    padding:170px 0 100px;
    position:relative;
    text-align:center;
    overflow:hidden;
  }
  .hero-waves{
    position:absolute; inset:0; z-index:0; opacity:0.55; pointer-events:none;
  }
  .hero-waves svg{width:100%; height:100%;}
  .wave-path{ animation: drift 14s ease-in-out infinite; transform-origin:center; }
  .wave-path.w2{ animation-duration:18s; animation-delay:-3s; }
  .wave-path.w3{ animation-duration:22s; animation-delay:-7s; }
  @keyframes drift{
    0%,100%{ transform:translateY(0) scaleY(1); }
    50%{ transform:translateY(-14px) scaleY(1.08); }
  }

  .eyebrow{
    font-family:var(--mono); font-size:12px; letter-spacing:0.32em;
    color:var(--pink); text-transform:uppercase; margin-bottom:22px;
    position:relative; z-index:1;
  }
  h1.hero-title{
    font-family:var(--display); font-weight:700;
    font-size:clamp(38px, 7vw, 74px);
    line-height:1.05; letter-spacing:-0.01em;
    position:relative; z-index:1;
  }
  h1.hero-title .grad{
    background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
    display:block; font-weight:900;
  }
  .hero-sub{
    max-width:560px; margin:26px auto 40px; color:var(--muted);
    font-size:16px; position:relative; z-index:1;
  }
  .hero-ctas{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; position:relative; z-index:1;}
  .btn-primary{
    background:var(--grad); color:#fff; font-weight:700; font-size:14px;
    padding:15px 30px; border-radius:999px; border:none; cursor:pointer;
    box-shadow:0 10px 30px -8px rgba(255,46,136,0.55);
  }
  .btn-ghost{
    background:transparent; color:var(--text); font-weight:600; font-size:14px;
    padding:14px 28px; border-radius:999px; border:1px solid rgba(255,255,255,0.22); cursor:pointer;
  }
  .btn-ghost:hover{border-color:var(--pink);}

  /* ===== MIXER CARD (signature element) ===== */
  .mixer-wrap{ padding:0 0 120px; }
  .mixer{
    max-width:760px; margin:0 auto;
    background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
    border:1px solid var(--card-border);
    border-radius:24px; padding:28px 30px 24px;
    position:relative; z-index:1;
  }
  .mixer-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:22px;}
  .mixer-label{font-family:var(--mono); font-size:11px; color:var(--pink); letter-spacing:0.18em; text-transform:uppercase; margin-bottom:6px;}
  .mixer-track{font-family:var(--display); font-weight:600; font-size:19px;}
  .mixer-artist{color:var(--muted); font-size:13px; margin-top:2px;}
  .bpm{
    font-family:var(--mono); text-align:right; font-size:12px; color:var(--muted-dim);
  }
  .bpm b{display:block; font-size:22px; color:var(--text); font-weight:700;}

  .eq{
    display:flex; align-items:flex-end; gap:3px; height:56px; margin:20px 0 16px;
  }
  .eq span{
    flex:1; background:var(--grad); border-radius:2px; opacity:0.85;
    animation: bounce 1.1s ease-in-out infinite; animation-play-state:paused;
    height:20%;
  }
  .mixer.playing .eq span{ animation-play-state:running; }
  .eq span:nth-child(odd){ animation-duration:0.9s; }
  .eq span:nth-child(3n){ animation-duration:1.3s; }
  @keyframes bounce{
    0%,100%{ height:15%; }
    50%{ height:90%; }
  }

  .transport{ display:flex; align-items:center; gap:18px; }
  .play-btn{
    width:52px; height:52px; border-radius:50%; background:var(--grad); border:none;
    display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
    color:#fff;
  }
  .transport-side{color:var(--muted); font-size:18px; cursor:pointer; opacity:0.7;}
  .transport-side:hover{opacity:1;}
  .crossfader{ flex:1; }
  .crossfader-track{
    position:relative; height:4px; background:rgba(255,255,255,0.12); border-radius:2px;
  }
  .crossfader-fill{ position:absolute; left:0; top:0; bottom:0; width:38%; background:var(--grad); border-radius:2px; }
  .crossfader-handle{
    position:absolute; top:50%; left:38%; width:14px; height:14px; border-radius:50%;
    background:#fff; transform:translate(-50%,-50%); box-shadow:0 0 0 4px rgba(255,46,136,0.25);
  }
  .crossfader-labels{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; color:var(--muted-dim); margin-top:6px; letter-spacing:0.1em; }

  /* ===== SECTION HEADERS ===== */
  .section-head{ text-align:center; max-width:600px; margin:0 auto 56px; }
  .section-eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:0.28em; color:var(--pink); text-transform:uppercase; margin-bottom:14px; }
  .section-head h2{ font-family:var(--display); font-weight:700; font-size:clamp(28px,4vw,42px); line-height:1.15; }
  .section-head p{ color:var(--muted); margin-top:16px; font-size:15px; }

  /* ===== SERVICES ===== */
  .services{ padding:20px 0 110px; }
  .service-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  }
  @media(max-width:900px){ .service-grid{grid-template-columns:repeat(2,1fr);} }
  @media(max-width:520px){ .service-grid{grid-template-columns:1fr;} }
  .service-card{
    background:var(--card); border:1px solid var(--card-border); border-radius:18px;
    padding:26px 22px; transition:transform 0.25s ease, border-color 0.25s ease;
  }
  .service-card:hover{ transform:translateY(-5px); border-color:rgba(255,46,136,0.4); }
  .service-icon{
    width:44px; height:44px; border-radius:12px; background:var(--grad);
    display:flex; align-items:center; justify-content:center; margin-bottom:18px; font-size:19px;
  }
  .service-card h3{ font-family:var(--display); font-size:16px; font-weight:600; margin-bottom:8px; }
  .service-card p{ color:var(--muted); font-size:13.5px; }

  /* ===== STATS ===== */
  .stats{ padding:0 0 110px; }
  .stats-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
    border-top:1px solid var(--card-border); border-bottom:1px solid var(--card-border);
    padding:40px 0;
  }
  @media(max-width:760px){ .stats-grid{grid-template-columns:repeat(2,1fr); row-gap:36px;} }
  .stat{ text-align:center; }
  .stat b{ display:block; font-family:var(--mono); font-size:30px; color:var(--text); }
  .stat span{ display:block; color:var(--muted); font-size:12.5px; margin-top:6px; }

  /* ===== UPLOAD ===== */
  .upload{ padding:0 0 120px; }
  .upload-card{
    max-width:700px; margin:0 auto;
    background:var(--card); border:1px solid var(--card-border); border-radius:22px;
    padding:44px; text-align:center;
  }
  .dropzone{
    border:2px dashed rgba(255,46,136,0.4); border-radius:16px;
    padding:44px 20px; cursor:pointer; transition:background 0.2s ease, border-color 0.2s ease;
  }
  .dropzone:hover, .dropzone.drag{ background:rgba(255,46,136,0.06); border-color:var(--pink); }
  .dropzone .dz-icon{ font-size:30px; margin-bottom:14px; }
  .dropzone p{ color:var(--muted); font-size:14px; }
  .dropzone strong{ color:var(--text); font-family:var(--display); font-size:15px; display:block; margin-bottom:8px; }
  #fileInput{ display:none; }
  .file-list{ margin-top:22px; text-align:left; }
  .file-row{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    background:rgba(255,255,255,0.04); border:1px solid var(--card-border);
    border-radius:10px; padding:12px 16px; margin-bottom:10px; font-size:13px;
  }
  .file-row span.name{ font-weight:600; }
  .file-row audio{ height:32px; max-width:180px; }
  .upload-note{ margin-top:22px; color:var(--muted-dim); font-size:12.5px; }

  /* ===== ABOUT TEASER ===== */
  .about{ padding:0 0 120px; }
  .about-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
  }
  @media(max-width:860px){ .about-grid{grid-template-columns:1fr; gap:36px;} }
  .about-copy .section-eyebrow{ text-align:left; }
  .about-copy h2{ font-family:var(--display); font-weight:700; font-size:clamp(26px,4vw,36px); margin-bottom:18px; text-align:left; }
  .about-copy p{ color:var(--muted); font-size:14.5px; margin-bottom:14px; }
  .about-copy a.about-link{ color:var(--pink); font-weight:700; font-size:14px; }
  .people{ display:grid; gap:16px; }
  .person-card{
    background:var(--card); border:1px solid var(--card-border); border-radius:16px; padding:20px 22px;
    display:flex; gap:16px; align-items:flex-start;
  }
  .avatar{
    width:46px; height:46px; border-radius:50%; background:var(--grad); flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:700; font-size:15px;
  }
  .person-card h3{ font-family:var(--display); font-size:15px; margin-bottom:4px; }
  .person-card p{ color:var(--muted); font-size:13px; }

  /* ===== CTA BANNER ===== */
  .cta-banner{ padding:0 0 90px; }
  .cta-inner{
    border-radius:26px; overflow:hidden; position:relative;
    background:linear-gradient(120deg, rgba(255,46,136,0.18), rgba(139,47,224,0.18));
    border:1px solid rgba(255,46,136,0.3);
    padding:64px 40px; text-align:center;
  }
  .cta-inner h2{ font-family:var(--display); font-weight:700; font-size:clamp(26px,4.5vw,40px); margin-bottom:14px; }
  .cta-inner .grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .cta-inner p{ color:var(--muted); max-width:480px; margin:0 auto 30px; font-size:14.5px; }

  /* ===== FOOTER ===== */
  footer{ border-top:1px solid var(--card-border); padding:40px 0; }
  .footer-row{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;
  }
  .footer-brand{ display:flex; align-items:center; gap:12px; }
  .footer-brand p{ color:var(--muted-dim); font-size:12.5px; }
  .footer-social{ display:flex; gap:14px; }
  .footer-social a{
    width:36px; height:36px; border-radius:50%; border:1px solid var(--card-border);
    display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--muted);
  }
  .footer-social a:hover{ border-color:var(--pink); color:var(--text); }
  .footer-bottom{ margin-top:26px; text-align:center; color:var(--muted-dim); font-size:12px; }

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

  /* ===== INNER PAGE HERO (About / Contact) ===== */
  .page-hero{
    padding:150px 0 70px; text-align:center; position:relative; overflow:hidden;
  }
  .page-hero h1{
    font-family:var(--display); font-weight:700; font-size:clamp(32px,6vw,56px);
    line-height:1.08; position:relative; z-index:1;
  }
  .page-hero h1 .grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .page-hero p{ max-width:520px; margin:20px auto 0; color:var(--muted); font-size:15px; position:relative; z-index:1; }

  /* ===== TIMELINE (About) ===== */
  .timeline{ padding:0 0 110px; }
  .timeline-list{ max-width:760px; margin:0 auto; display:grid; gap:18px; }
  .timeline-item{
    display:grid; grid-template-columns:70px 1fr; gap:22px;
    background:var(--card); border:1px solid var(--card-border); border-radius:16px; padding:22px 24px;
  }
  .timeline-year{ font-family:var(--mono); color:var(--pink); font-weight:700; font-size:14px; }
  .timeline-item h3{ font-family:var(--display); font-size:16px; margin-bottom:6px; }
  .timeline-item p{ color:var(--muted); font-size:13.5px; }

  /* ===== QUOTE BLOCK ===== */
  .quote-block{ padding:0 0 110px; }
  .quote-inner{
    max-width:720px; margin:0 auto; text-align:center;
    border-left:3px solid var(--pink); padding:6px 0 6px 26px; text-align:left;
  }
  .quote-inner p{ font-family:var(--display); font-weight:400; font-size:clamp(18px,2.6vw,24px); line-height:1.5; color:var(--text); }
  .quote-inner span{ display:block; margin-top:16px; color:var(--muted-dim); font-size:13px; font-family:var(--mono); }

  /* ===== CONTACT FORM ===== */
  .contact-layout{
    display:grid; grid-template-columns:1fr 1.1fr; gap:50px; align-items:flex-start; padding:0 0 120px;
  }
  @media(max-width:900px){ .contact-layout{grid-template-columns:1fr; gap:36px;} }
  .contact-info h2{ font-family:var(--display); font-weight:700; font-size:26px; margin-bottom:16px; }
  .contact-info p{ color:var(--muted); font-size:14.5px; margin-bottom:22px; }
  .contact-detail{ display:flex; gap:14px; align-items:flex-start; margin-bottom:18px; }
  .contact-detail .ico{
    width:38px; height:38px; border-radius:10px; background:var(--grad); flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:15px;
  }
  .contact-detail h4{ font-family:var(--display); font-size:14px; margin-bottom:2px; }
  .contact-detail span{ color:var(--muted); font-size:13.5px; }

  .contact-form{
    background:var(--card); border:1px solid var(--card-border); border-radius:20px; padding:34px;
  }
  .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  @media(max-width:520px){ .form-row{grid-template-columns:1fr;} }
  .field{ margin-bottom:18px; }
  .field label{ display:block; font-size:12.5px; color:var(--muted); margin-bottom:8px; font-weight:600; }
  .field input, .field select, .field textarea{
    width:100%; background:rgba(255,255,255,0.04); border:1px solid var(--card-border);
    border-radius:10px; padding:12px 14px; color:var(--text); font-family:var(--body); font-size:14px;
  }
  .field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--pink); outline:none; }
  .field textarea{ resize:vertical; min-height:110px; }
  .submit-btn{
    background:var(--grad); color:#fff; font-weight:700; font-size:14px; border:none;
    padding:15px 30px; border-radius:999px; cursor:pointer; width:100%;
  }
  .form-note{ margin-top:14px; font-size:12.5px; color:var(--muted-dim); text-align:center; }
  .form-success{
    display:none; text-align:center; padding:40px 10px;
  }
  .form-success.show{ display:block; }
  .form-success .check{ font-size:40px; margin-bottom:14px; }
  .form-success h3{ font-family:var(--display); font-size:18px; margin-bottom:8px; }
  .form-success p{ color:var(--muted); font-size:13.5px; }

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