:root{
    --bg: #0B0A12;
    --surface: #14111F;
    --surface-2: #1C1730;
    --line: rgba(244,242,248,0.09);
    --text: #F4F2F8;
    --muted: #948CA8;
    --magenta: #F5A0F2;
    --cyan: #9B6AE8;
    --magenta-dim: rgba(245,160,242,0.14);
    --cyan-dim: rgba(155,106,232,0.16);
  }

  *{ margin:0; padding:0; box-sizing:border-box; }

  html{
    width:100%;
    scroll-behavior:smooth;
  }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
  }

  body{
    width:100%;
    max-width:100%;
    background:var(--bg);
    color:var(--text);
    font-family:'Inter', sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  #mainContent{
    display:block;
    width:100%;
    max-width:none;
    min-width:0;
  }

  a{ color:inherit; text-decoration:none; }
  ul{ list-style:none; }
  img{ max-width:100%; display:block; }

  ::selection{ background:var(--magenta); color:#0B0A12; }

  :focus-visible{
    outline:2px solid var(--cyan);
    outline-offset:3px;
  }

  .wrap{
    width:100%;
    max-width:1180px;
    margin:0 auto;
    padding:0 32px;
  }

  .eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size:12px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--cyan);
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
  }
  .eyebrow::before{
    content:"";
    width:22px;
    height:1px;
    background:var(--cyan);
  }

  h1,h2,h3{
    font-family:'Unbounded', sans-serif;
    line-height:1.05;
  }

  /* ---------- NAV ---------- */
  header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:100;
    background:transparent;
    backdrop-filter: none;
    border-bottom:1px solid transparent;
    transition: background .3s ease, backdrop-filter .3s ease, border-color .3s ease;
  }
  header.scrolled{
    background:rgba(11,10,18,0.72);
    backdrop-filter: blur(14px);
    border-bottom:1px solid var(--line);
  }
  nav.wrap{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
    height:104px;
  }
  .nav-side{
    display:flex;
    align-items:center;
    gap:40px;
  }
  .nav-side.nav-side-left{ justify-content:flex-start; }
  .nav-side.nav-side-right{ justify-content:flex-end; }
  .logo{
    font-family:'Unbounded', sans-serif;
    font-weight:900;
    font-size:22px;
    letter-spacing:0.02em;
    display:flex;
    align-items:center;
    align-self:start;
  }
  .logo span{ color:var(--magenta); }
  .logo-img{
    height:132px;
    width:auto;
    display:block;
  }
  header .logo-img{
    filter:none;
  }
  .footer-brand .logo-img{ height:44px; }

  .nav-links{
    display:flex;
    gap:40px;
    font-size:13px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    font-weight:600;
  }
  .nav-links a{
    position:relative;
    padding:6px 0;
    color:var(--text);
    opacity:0.75;
    transition:opacity .2s;
  }
  .nav-links a:hover{ opacity:1; }
  .nav-links a::after{
    content:"";
    position:absolute;
    bottom:0; left:0;
    width:0%; height:2px;
    background:linear-gradient(90deg, var(--magenta), var(--cyan));
    transition:width .25s ease;
  }
  .nav-links a:hover::after{ width:100%; }

  .nav-cta{
    border:1px solid var(--line);
    padding:10px 20px;
    border-radius:100px;
    font-size:13px;
    font-weight:600;
    letter-spacing:0.06em;
    text-transform:uppercase;
    transition: border-color .2s, background .2s;
  }
  .nav-cta:hover{ border-color:var(--magenta); background:var(--magenta-dim); }

  .burger{
    display:none;
    flex-direction:column;
    gap:5px;
    background:none;
    border:none;
    cursor:pointer;
    padding:8px;
  }
  .burger span{
    width:24px; height:2px;
    background:var(--text);
    border-radius:2px;
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding-top:104px;
    overflow:hidden;
  }

  .hero-photo{
    position:absolute;
    inset:0;
    z-index:0;
  }
  .hero-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:50% 0%;
    filter:saturate(1.05);
  }
  .hero-photo::after{
    content:"";
    position:absolute;
    inset:0;
    background:
      linear-gradient(0deg, var(--bg) 0%, rgba(11,10,18,0.75) 22%, rgba(11,10,18,0.25) 48%, rgba(11,10,18,0.55) 100%),
      linear-gradient(90deg, rgba(11,10,18,0.92) 0%, rgba(11,10,18,0.35) 45%, rgba(11,10,18,0.55) 100%);
  }

  .hero-glow{
    position:absolute;
    inset:0;
    z-index:1;
    background:
      radial-gradient(50% 40% at 12% 15%, var(--magenta-dim), transparent 60%),
      radial-gradient(45% 35% at 92% 85%, var(--cyan-dim), transparent 60%);
    animation: driftGlow 16s ease-in-out infinite alternate;
    pointer-events:none;
    mix-blend-mode:screen;
  }
  @keyframes driftGlow{
    0%{ transform: translate3d(0,0,0) scale(1); }
    100%{ transform: translate3d(2%, -2%, 0) scale(1.06); }
  }

  .hero-inner{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap:48px;
    align-items:end;
    padding-bottom:72px;
  }

  .now-playing-card{
    display:none;
    background:rgba(20,17,31,0.6);
    border:1px solid var(--line);
    backdrop-filter:blur(10px);
    border-radius:16px;
    padding:22px 22px 18px;
  }
  .now-playing-card.is-playing{ display:block; }

  .hero h1{
    font-size:clamp(56px, 8.2vw, 116px);
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:-0.01em;
  }
  .hero h1 .accent{
    color: #2DE8D4;
    -webkit-text-fill-color: #2DE8D4;
  }

  .hero-sub{
    margin-top:24px;
    max-width:520px;
    font-size:17px;
    color:var(--muted);
    line-height:1.6;
  }

  .hero-actions{
    display:flex;
    gap:16px;
    margin-top:36px;
    flex-wrap:wrap;
  }
  .btn{
    padding:15px 28px;
    border-radius:100px;
    font-weight:600;
    font-size:14px;
    letter-spacing:0.04em;
    text-transform:uppercase;
    display:inline-flex;
    align-items:center;
    gap:10px;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .btn-primary{
    background:linear-gradient(90deg, var(--cyan), var(--magenta));
    color:#0B0A12;
  }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 30px -8px rgba(155,106,232,0.55); }
  .btn-ghost{
    border:1px solid var(--line);
    color:var(--text);
  }
  .btn-ghost:hover{ border-color:var(--cyan); color:var(--cyan); }

  /* Signature element: equalizer */
  .eq{
    display:flex;
    align-items:flex-end;
    gap:6px;
    height:90px;
    justify-content:flex-start;
  }
  .eq span{
    width:10px;
    border-radius:4px 4px 0 0;
    background:linear-gradient(180deg, var(--cyan), var(--magenta));
    animation: bounce 1.4s ease-in-out infinite;
  }
  .eq span:nth-child(1){ height:40%; animation-delay:-1.1s; }
  .eq span:nth-child(2){ height:70%; animation-delay:-0.9s; }
  .eq span:nth-child(3){ height:100%; animation-delay:-0.7s; }
  .eq span:nth-child(4){ height:55%; animation-delay:-0.5s; }
  .eq span:nth-child(5){ height:85%; animation-delay:-0.3s; }
  .eq span:nth-child(6){ height:35%; animation-delay:-0.15s; }
  .eq span:nth-child(7){ height:65%; animation-delay:0s; }
  @keyframes bounce{
    0%, 100%{ transform:scaleY(0.35); }
    50%{ transform:scaleY(1); }
  }
  .eq-label{
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    color:var(--muted);
    text-align:left;
    margin-top:12px;
    letter-spacing:0.1em;
  }

  .scroll-cue{
    position:absolute;
    bottom:28px; left:32px;
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    color:var(--muted);
    letter-spacing:0.15em;
    text-transform:uppercase;
    display:flex;
    align-items:center;
    gap:10px;
    z-index:2;
  }
  .scroll-cue .line{
    width:1px; height:36px;
    background:linear-gradient(180deg, var(--cyan), transparent);
    animation: scrollLine 2s ease-in-out infinite;
  }
  @keyframes scrollLine{
    0%,100%{ opacity:0.3; }
    50%{ opacity:1; }
  }

  /* ---------- SECTION GENERIC ---------- */
  section{
    padding:120px 0;
    position:relative;
  }
  .section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:56px;
    gap:24px;
    flex-wrap:wrap;
  }
  .section-head h2{
    font-size:clamp(32px, 4vw, 48px);
    text-transform:uppercase;
  }
  .section-note{
    max-width:320px;
    color:var(--muted);
    font-size:14px;
    line-height:1.6;
  }

  /* ---------- BIO ---------- */
  .bio{
    display:grid;
    grid-template-columns: 0.68fr 1.32fr;
    gap:64px;
    align-items:center;
  }
  .bio-visual{
    aspect-ratio: 1/1;
    max-width:340px;
    border-radius:18px;
    border:1px solid var(--line);
    position:relative;
    overflow:hidden;
    display:block;
  }
  .bio-visual .bio-photo{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:50% 50%;
    display:block;
  }
  .bio-visual::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, transparent 0%, transparent 78%, rgba(11,10,18,0.55) 100%);
    pointer-events:none;
  }
  .bio-visual::before{
    content:"";
    position:absolute;
    width:220%; height:60%;
    background:linear-gradient(90deg, transparent, rgba(155,106,232,0.14), transparent);
    animation: sweep 9s linear infinite;
    top:20%;
    z-index:1;
    pointer-events:none;
  }
  .bio-badge{
    position:absolute;
    top:18px; left:18px;
    z-index:2;
    width:56px;
    height:56px;
    filter:drop-shadow(0 8px 20px rgba(133,80,218,0.5));
    animation: floatLogo 5s ease-in-out infinite;
  }
  @keyframes floatLogo{
    0%,100%{ transform:translateY(0) rotate(0deg); }
    50%{ transform:translateY(-8px) rotate(4deg); }
  }
  .bio-text p{
    color:var(--muted);
    font-size:16px;
    line-height:1.8;
    margin-bottom:18px;
  }
  .bio-text strong{ color:var(--text); }

  .bio-stats{
    display:flex;
    gap:36px;
    margin-top:32px;
    flex-wrap:wrap;
  }
  .stat-num{
    font-family:'Unbounded', sans-serif;
    font-size:32px;
    font-weight:800;
    background:linear-gradient(90deg, var(--magenta), var(--cyan));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .stat-label{
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--muted);
  }

  /* ---------- MUSIQUE / TRACKLIST ---------- */
  .mini-player{
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:16px;
    padding:18px 24px;
    margin-bottom:8px;
  }
  .mini-player-info{
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .mini-player-eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--cyan);
  }
  .mini-player-title{
    font-family:'Unbounded', sans-serif;
    font-size:16px;
    font-weight:600;
  }
  .mini-player-controls{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .player-btn{
    background:none;
    border:none;
    padding:6px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    transition: filter .2s, transform .2s, background .2s;
  }
  .player-btn img{
    width:40px;
    height:40px;
    display:block;
  }
  .player-btn:hover{
    background:var(--magenta-dim);
    transform:translateY(-1px);
  }
  #nextBtn img{ width:34px; height:34px; }

  .tracklist{
    border-top:1px solid var(--line);
  }
  .tracklist.is-scrollable{
    overflow-y:auto;
    overscroll-behavior-y:contain;
    scrollbar-width:thin;
    scrollbar-color:var(--cyan) var(--surface);
    -webkit-overflow-scrolling:touch;
  }
  .tracklist.is-scrollable::-webkit-scrollbar{ width:8px; }
  .tracklist.is-scrollable::-webkit-scrollbar-track{
    background:var(--surface);
    border-radius:10px;
  }
  .tracklist.is-scrollable::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg, var(--cyan), var(--magenta));
    border:2px solid var(--surface);
    border-radius:10px;
  }
  .track{
    display:grid;
    grid-template-columns: 48px 1fr auto 32px;
    align-items:center;
    gap:20px;
    padding:18px 12px;
    border-bottom:1px solid var(--line);
    cursor:pointer;
    transition:background .2s;
  }
  .track:hover, .track.playing{
    background:var(--surface);
  }
  .track-num{
    font-family:'JetBrains Mono', monospace;
    color:var(--muted);
    font-size:13px;
  }
  .track.playing .track-num{ color:var(--cyan); }
  .track-title{
    font-weight:600;
    font-size:15px;
  }
  .track-sub{
    font-size:13px;
    color:var(--muted);
    margin-top:3px;
    font-weight:400;
  }
  .track-tag{
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    color:var(--muted);
    letter-spacing:0.05em;
    white-space:nowrap;
  }
  .track-play{
    width:32px; height:32px;
    border-radius:50%;
    border:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    color:var(--text);
    transition: border-color .2s, background .2s, color .2s;
  }
  .track:hover .track-play{
    border-color:var(--magenta);
    background:var(--magenta);
    color:#0B0A12;
  }

  .audio-note{
    margin-top:20px;
    font-size:12px;
    color:var(--muted);
    font-family:'JetBrains Mono', monospace;
  }

  /* ---------- CLIPS ---------- */
  .clips-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
  }
  .clip-card{
    border-radius:14px;
    overflow:hidden;
    border:1px solid var(--line);
    background:var(--surface);
  }
  .clip-frame{
    aspect-ratio:16/9;
    width:100%;
    border:0;
    display:block;
  }
  .clip-thumb-wrap{
    aspect-ratio:16/9;
    width:100%;
    position:relative;
    cursor:pointer;
    overflow:hidden;
    background:var(--surface-2);
  }
  .clip-thumb-wrap img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .4s ease, filter .4s ease;
    filter:saturate(0.9) brightness(0.85);
  }
  .clip-thumb-wrap:hover img{
    transform:scale(1.06);
    filter:saturate(1) brightness(0.7);
  }
  .clip-thumb-wrap::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(0deg, rgba(11,10,18,0.55) 0%, rgba(11,10,18,0.05) 45%);
  }
  .clip-play{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:60px; height:60px;
    border-radius:50%;
    background:rgba(20,17,31,0.55);
    border:1px solid rgba(244,242,248,0.35);
    backdrop-filter:blur(4px);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:1;
    transition: background .2s, border-color .2s, transform .2s;
  }
  .clip-thumb-wrap:hover .clip-play{
    background:var(--magenta);
    border-color:var(--magenta);
    transform:translate(-50%,-50%) scale(1.08);
  }
  .clip-play svg{
    width:18px; height:18px;
    fill:#F4F2F8;
    margin-left:3px;
  }
  .clip-thumb-wrap:hover .clip-play svg{ fill:#0B0A12; }
  .clip-meta{
    padding:16px 18px;
  }
  .clip-meta .eyebrow{ margin-bottom:8px; }
  .clip-meta h3{
    font-size:16px;
    font-weight:600;
    font-family:'Inter', sans-serif;
  }

  /* ---------- CONTACT ---------- */
  #contact{
    position:relative;
    background:
      linear-gradient(90deg, rgba(11,10,18,0.35) 0%, var(--bg) 62%),
      linear-gradient(0deg, var(--bg) 0%, rgba(11,10,18,0.55) 15%, rgba(11,10,18,0.55) 85%, var(--bg) 100%),
      url("assets/contact.jpg");
    background-size: cover, cover, cover;
    background-position: center, center, left center;
    background-repeat: no-repeat;
  }
  .contact-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:64px;
    align-items:start;
  }
  .contact-info dl{
    display:grid;
    gap:22px;
  }
  .contact-info dt{
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.1em;
    color:var(--muted);
    margin-bottom:6px;
  }
  .contact-info dd{
    font-size:18px;
    font-weight:600;
  }
  .contact-info a:hover{ color:var(--cyan); }

  form{ display:grid; gap:16px; }
  form input, form textarea{
    width:100%;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:10px;
    padding:15px 16px;
    color:var(--text);
    font-family:'Inter', sans-serif;
    font-size:14px;
  }
  form textarea{ min-height:120px; resize:vertical; }
  form input::placeholder, form textarea::placeholder{ color:var(--muted); }
  form input:focus, form textarea:focus{ border-color:var(--magenta); outline:none; }

  form select{
    width:100%;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:10px;
    padding:15px 44px 15px 16px;
    color:var(--text);
    font-family:'Inter', sans-serif;
    font-size:14px;
    appearance:none;
    -webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23948CA8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 16px center;
    background-size:16px;
    cursor:pointer;
  }
  form select:focus{ border-color:var(--magenta); outline:none; }
  form select option{ background:var(--surface); color:var(--text); }
  form select:invalid{ color:var(--muted); }

  .recaptcha-box{
    display:flex;
    align-items:center;
    gap:14px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:10px;
    padding:14px 18px;
  }
  .recaptcha-check{
    position:relative;
    width:26px; height:26px;
    flex-shrink:0;
  }
  .recaptcha-check input{
    position:absolute;
    inset:0;
    width:26px; height:26px;
    opacity:0;
    cursor:pointer;
    margin:0;
  }
  .recaptcha-mark{
    position:absolute;
    inset:0;
    border:2px solid var(--muted);
    border-radius:4px;
    background:var(--bg);
    transition: border-color .2s, background .2s;
    pointer-events:none;
  }
  .recaptcha-mark::after{
    content:"";
    position:absolute;
    left:7px; top:3px;
    width:6px; height:12px;
    border:solid #0B0A12;
    border-width:0 2px 2px 0;
    transform:rotate(45deg) scale(0);
    transition: transform .15s ease;
  }
  .recaptcha-check input:checked + .recaptcha-mark{
    background:var(--cyan);
    border-color:var(--cyan);
  }
  .recaptcha-check input:checked + .recaptcha-mark::after{ transform:rotate(45deg) scale(1); }
  .recaptcha-check input:focus-visible + .recaptcha-mark{ outline:2px solid var(--cyan); outline-offset:2px; }

  .recaptcha-text{
    display:flex;
    flex-direction:column;
    gap:2px;
    flex:1;
  }
  .recaptcha-text span{ font-size:14px; font-weight:500; }
  .recaptcha-text small{
    font-family:'JetBrains Mono', monospace;
    font-size:10px;
    color:var(--muted);
    letter-spacing:0.02em;
  }
  .recaptcha-logo{
    width:28px; height:28px;
    fill:var(--muted);
    flex-shrink:0;
  }

  .form-note{
    font-size:11px;
    color:var(--muted);
    font-family:'JetBrains Mono', monospace;
    line-height:1.6;
  }

  /* ---------- FOOTER / PLATEFORMES ---------- */
  footer{
    border-top:1px solid var(--line);
    padding:64px 0 32px;
  }
  .footer-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:28px;
    margin-bottom:48px;
  }
  .footer-brand{
    display:flex;
    align-items:center;
    gap:16px;
  }
  .footer-logo-round{
    width:52px;
    height:52px;
    border-radius:50%;
    flex-shrink:0;
    display:block;
  }
  .footer-brand-text{
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .footer-brand-name{
    font-family:'Unbounded', sans-serif;
    font-weight:900;
    font-size:18px;
    color:var(--text);
  }
  .footer-tagline{
    color:var(--muted);
    font-size:13px;
    max-width:280px;
  }

  .platforms{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
  }
  /* Les logos fournis (Spotify, Deezer, Apple Music...) sont dessinés pour un fond clair.
     On les pose sur une pastille claire pour respecter leurs couleurs officielles
     sans les modifier. */
  .platform-link{
    display:flex;
    align-items:center;
    padding:12px 20px;
    border-radius:100px;
    background:#F4F2F8;
    border:1px solid transparent;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .platform-link:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 24px -10px rgba(59,242,224,0.35);
  }
  .platform-link img{
    height:22px;
    width:auto;
    display:block;
  }

  .footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
    padding-top:28px;
    border-top:1px solid var(--line);
    font-size:12px;
    color:var(--muted);
    font-family:'JetBrains Mono', monospace;
  }
  .footer-bottom a:hover{ color:var(--cyan); }
  .socials{ display:flex; gap:16px; }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 900px){
    #mainContent,
    #mainContent > section,
    footer{
      display:block;
      width:100% !important;
      max-width:none !important;
      min-width:100% !important;
      margin-left:0 !important;
      margin-right:0 !important;
      flex:0 0 100%;
      align-self:stretch;
    }
    .wrap{
      width:100% !important;
      max-width:100% !important;
      min-width:0 !important;
      margin-left:0 !important;
      margin-right:0 !important;
    }
    .section-head,
    .mini-player,
    .tracklist,
    .clips-grid,
    .contact-grid{
      width:100%;
      max-width:none;
      min-width:0;
    }
    .hero-inner{ grid-template-columns:1fr; }
    .eq{ justify-content:flex-start; margin-top:32px; }
    .eq-label{ text-align:left; }
    .bio{ grid-template-columns:1fr; }
    .clips-grid{
      display:flex;
      gap:16px;
      overflow-x:auto;
      padding-bottom:8px;
      scroll-behavior:smooth;
      scroll-snap-type:x mandatory;
      overscroll-behavior-inline:contain;
      scrollbar-width:none;
      -webkit-overflow-scrolling:touch;
    }
    .clips-grid::-webkit-scrollbar{ display:none; }
    .clips-grid .clip-card{
      flex:0 0 100%;
      scroll-snap-align:start;
      scroll-snap-stop:always;
    }
    .clips-grid .empty-state{ flex:1 0 100%; }
    .contact-grid{ grid-template-columns:1fr; }
  }

  @media (max-width: 720px){
    .nav-links, .nav-cta{ display:none; }
    .nav-side{ display:none; }
    nav.wrap{
      position:relative;
      display:flex;
      justify-content:center;
      height:76px;
    }
    nav.wrap .logo{
      position:absolute;
      top:0;
      left:50%;
      transform:translateX(-50%);
    }
    header .logo-img{
      height:108px;
      max-width:calc(100vw - 112px);
    }
    .burger{
      position:absolute;
      top:50%;
      right:20px;
      display:flex;
      height:44px;
      padding:0;
      align-items:center;
      transform:translateY(-50%);
    }
    .wrap{ padding:0 20px; }
    section{ padding:80px 0; }
    .track{ grid-template-columns: 32px 1fr 28px; }
    .track-tag{ display:none; }
    .mobile-menu{ inset:76px 0 0 0; }
    .hero{ padding-top:124px; }
  }

  .mobile-menu{
    display:none;
    position:fixed;
    inset:104px 0 0 0;
    background:var(--bg);
    z-index:99;
    padding:32px;
  }
  .mobile-menu.open{ display:block; }
  .mobile-menu a{
    display:block;
    font-family:'Unbounded', sans-serif;
    font-size:28px;
    text-transform:uppercase;
    padding:16px 0;
    border-bottom:1px solid var(--line);
  }

/* Laravel integration */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.hero{ padding-bottom:0; }
.hero-sub{ min-height:81.6px; }
.hero-slider{ isolation:isolate; }
.hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  transition:opacity .8s ease, visibility .8s ease;
}
.hero-slide.active{
  opacity:1;
  visibility:visible;
}
.hero-slide img,
.hero-video,
.hero-video iframe,
.hero-video video{
  width:100%;
  height:100%;
  object-fit:cover;
  border:0;
}
.hero-video{ overflow:hidden; background:var(--surface); }
.hero-video iframe{
  pointer-events:none;
  transform:scale(1.35);
}
.hero-dots{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:28px;
  display:flex;
  gap:10px;
  transform:translateX(-50%);
}
.hero-dot{
  width:30px;
  height:4px;
  border:0;
  border-radius:10px;
  background:rgba(244,242,248,.35);
  cursor:pointer;
  transition:background .2s, transform .2s;
}
.hero-dot:hover,
.hero-dot:focus-visible{ transform:scaleY(1.8); }
.hero-dot.active{ background:var(--magenta); }

.bio-text h2,
.contact-info h2{
  margin-bottom:24px;
  font-size:clamp(28px,3.4vw,40px);
  text-transform:uppercase;
}
.bio-cms-title{
  margin-bottom:14px;
  font-size:16px;
  color:var(--magenta);
}
.bio-copy p + p{ margin-top:14px; }

.mini-player audio{ display:none; }
.mini-player.is-disabled{ opacity:.58; }
.player-btn:disabled{ cursor:not-allowed; opacity:.45; }
.track{
  width:100%;
  background:transparent;
  border-top:0;
  border-right:0;
  border-left:0;
  border-radius:0;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.track > span:nth-child(2){ display:block; min-width:0; }
.track-title,
.track-sub{ display:block; }
.track-play img{
  width:12px;
  height:12px;
  object-fit:contain;
  filter:brightness(0) invert(1);
}
.empty-state{
  grid-column:1 / -1;
  padding:32px;
  border:1px solid var(--line);
  color:var(--muted);
  text-align:center;
}

.clip-play img{
  width:26px;
  height:26px;
  object-fit:contain;
  filter:brightness(0) invert(1);
  transition:filter .25s ease;
}
.clip-thumb-wrap:hover .clip-play img{ filter:none; }
.clip-frame{
  width:100%;
  aspect-ratio:16 / 9;
  border:0;
  border-radius:12px;
}

#contact{
  background-image:
    linear-gradient(90deg, rgba(11,10,18,.98) 0%, rgba(11,10,18,.88) 48%, rgba(11,10,18,.68) 100%),
    var(--contact-image, url('../images/homepage-v2/contact.jpg'));
}
.contact-description{ margin:0 0 28px; color:var(--muted); line-height:1.75; }
.contact-form .btn{
  width:100%;
  justify-content:center;
  border:0;
  cursor:pointer;
}
.captcha-panel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:18px;
  overflow:hidden;
  background:linear-gradient(135deg, var(--surface), var(--surface-2));
  border:1px solid var(--line);
  border-radius:12px;
}
.captcha-panel-copy{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.captcha-panel-copy span{
  color:var(--text);
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.captcha-panel-copy small{
  max-width:220px;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}
.g-recaptcha{
  min-width:304px;
  min-height:78px;
  flex:0 0 304px;
}
.form-feedback{
  padding:12px 14px;
  border-radius:8px;
  font-size:14px;
  line-height:1.45;
}
.form-feedback p + p{ margin-top:4px; }
.form-feedback-error{
  color:#ffd5db;
  background:rgba(190,35,65,.2);
  border:1px solid rgba(255,105,135,.32);
}
.form-feedback-success{
  color:#d8ffe9;
  background:rgba(36,155,95,.2);
  border:1px solid rgba(90,225,155,.3);
}

@media (prefers-reduced-motion: reduce){
  .hero-slide{ transition:none; }
  .clips-grid{ scroll-behavior:auto; }
}

@media (max-width:720px){
  .hero-sub{ min-height:108.8px; }
  .hero-dots{ bottom:18px; }
  .hero-dot{ width:22px; }
  .captcha-panel{
    align-items:flex-start;
    flex-direction:column;
    gap:14px;
    padding:16px;
  }
  .g-recaptcha{
    width:304px;
    max-width:100%;
    min-width:0;
    flex-basis:auto;
    transform-origin:left top;
  }
}