:root{
    --bg: #120E1A;
    --panel: #1C1526;
    --panel-2: #211934;
    --ink: #F3ECDD;
    --ink-dim: #C9BFAE;
    --gold: #E7A93C;
    --coral: #FF6B5B;
    --teal: #3FA796;
    --line: rgba(243,236,221,0.14);
    --radius: 4px;
    --maxw: 1180px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Manrope',sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'Anton',sans-serif;
    font-weight:400;
    letter-spacing:0.01em;
    margin:0;
  }
  p{margin:0;}
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  .wrap{
    max-width:var(--maxw);
    margin:0 auto;
    padding:0 24px;
  }
  section{padding:96px 0;}
  @media (max-width:640px){
    section{padding:64px 0;}
  }

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

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

  /* ---------- Nav ---------- */
  header{
    position:sticky;
    top:0;
    z-index:100;
    background:transparent;
    transition:background 0.3s ease, border-color 0.3s ease;
    border-bottom:1px solid transparent;
  }
  header.scrolled{
    background:rgba(18,14,26,0.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  nav.wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:84px;
  }
  .logo{
    font-family:'Anton',sans-serif;
    font-size:1.5rem;
    letter-spacing:0.02em;
    color:var(--ink);
  }
  .logo span{color:var(--gold);}
  .nav-links{
    display:flex;
    gap:36px;
    list-style:none;
    margin:0;
    padding:0;
  }
  .nav-links a{
    font-weight:600;
    font-size:0.95rem;
    color:var(--ink-dim);
    position:relative;
    padding:6px 0;
    transition:color 0.2s ease;
  }
  .nav-links a:hover{color:var(--ink);}
  .nav-links a::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:2px;
    background:var(--gold);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 0.25s ease;
  }
  .nav-links a:hover::after{transform:scaleX(1);}

  .nav-toggle{
    display:none;
    background:none;
    border:1px solid var(--line);
    border-radius:var(--radius);
    width:44px;
    height:44px;
    color:var(--ink);
    font-size:1.3rem;
    cursor:pointer;
  }

  @media (max-width:820px){
    .nav-links{
      position:fixed;
      top:84px; left:0; right:0;
      background:var(--panel);
      flex-direction:column;
      gap:0;
      max-height:0;
      overflow:hidden;
      transition:max-height 0.3s ease;
      border-bottom:1px solid var(--line);
    }
    .nav-links.open{max-height:320px;}
    .nav-links li{width:100%;}
    .nav-links a{
      display:block;
      padding:16px 24px;
      border-top:1px solid var(--line);
    }
    .nav-links a::after{display:none;}
    .nav-toggle{display:block;}
  }

  /* ---------- Hero ---------- */
  .hero{
    padding:100px 0 120px;
    overflow:hidden;
  }
  .hero .wrap{
    display:grid;
    grid-template-columns:1.2fr 0.8fr;
    gap:48px;
    align-items:center;
  }
  .hero-copy{
    opacity:0;
    transform:translateY(18px);
    animation:rise 0.8s ease forwards 0.15s;
  }
  @keyframes rise{
    to{opacity:1; transform:translateY(0);}
  }
  .hero-title{
    font-size:clamp(3rem, 9vw, 6.5rem);
    line-height:0.92;
    color:var(--ink);
  }
  .hero-tagline{
    margin-top:22px;
    font-size:1.05rem;
    font-weight:700;
    letter-spacing:0.06em;
    color:var(--gold);
  }
  .hero-desc{
    margin-top:20px;
    max-width:46ch;
    color:var(--ink-dim);
    font-size:1.05rem;
  }
  .btn{
    display:inline-block;
    margin-top:36px;
    padding:16px 34px;
    background:var(--coral);
    color:#1A0F0D;
    font-weight:800;
    font-size:1rem;
    border:none;
    border-radius:var(--radius);
    cursor:pointer;
    transition:transform 0.15s ease, background 0.2s ease;
  }
  .btn:hover{background:#ff7f71; transform:translateY(-2px);}
  .btn.ghost{
    background:transparent;
    color:var(--ink);
    border:1.5px solid var(--line);
  }
  .btn.ghost:hover{border-color:var(--gold); color:var(--gold); background:transparent;}

  .hero-disc{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    max-width:380px;
    margin:0 auto;
  }
  .hero-disc svg{
    width:100%;
    height:100%;
    animation:spin 14s linear infinite;
  }
  @keyframes spin{
    to{transform:rotate(360deg);}
  }
  @media (max-width:820px){
    .hero .wrap{grid-template-columns:1fr;}
    .hero-disc{max-width:240px;}
  }

  /* ---------- Section headings ---------- */
  .section-head{
    max-width:56ch;
    margin-bottom:48px;
  }
  .section-head h2{
    font-size:clamp(2rem, 4.5vw, 2.9rem);
  }
  .section-head p{
    margin-top:14px;
    color:var(--ink-dim);
    font-size:1.05rem;
  }

  /* ---------- About ---------- */
  .about{background:var(--panel);}
  .about .wrap{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:56px;
    align-items:center;
  }
  .about-figure{
    border-radius:var(--radius);
    background:linear-gradient(155deg, var(--panel-2), #14101d 70%);
    border:1px solid var(--line);
    aspect-ratio:4/5;
    display:flex;
    align-items:flex-end;
    padding:28px;
  }
  .about-figure .stat{
    display:flex;
    gap:28px;
  }
  .about-figure .stat div strong{
    display:block;
    font-family:'Anton',sans-serif;
    font-size:2rem;
    color:var(--gold);
  }
  .about-figure .stat div span{
    font-size:0.82rem;
    color:var(--ink-dim);
  }
  .about-text h2{
    font-size:clamp(1.9rem, 4vw, 2.6rem);
    margin-bottom:20px;
  }
  .about-text p{
    color:var(--ink-dim);
    font-size:1.05rem;
    max-width:60ch;
  }
  .about-text p + p{margin-top:16px;}
  @media (max-width:820px){
    .about .wrap{grid-template-columns:1fr;}
  }

  /* ---------- Mix player ---------- */
  .mix{background:var(--bg);}
  .player{
    background:var(--panel-2);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:36px;
    /* display:grid;  */
    align-items:center; 
    text-align: center;
    
    
   
  }
  .player iframe { width: 100%; height: 200px; border-radius: 8px; border: none; }
  .btn2{
   
   display: block;
   width: fit-content;
    margin-top:36px auto 0;
    padding:14px 28px;
    background:var(--coral);
    color:#1A0F0D;
    font-weight:800;
    font-size:1rem;
    border:none;
    border-radius:var(--radius);
    cursor:pointer;
   
    transition:transform 0.15s ease, background 0.2s ease;
  }
  .btn2:hover{background:#ff7f71; transform:translateY(-2px);}
  
 
  @media (max-width:640px){
    .player{grid-template-columns:1fr; text-align:center;}
    .play-btn{margin:0 auto;}
    .track-meta{justify-content:center;}
  } */

  /* ---------- Services ---------- */
  .services{background:var(--panel);}
  .service-list{
    border-top:1px solid var(--line);
  }
  .service-row{
    display:grid;
    grid-template-columns:64px 1fr auto;
    gap:24px;
    align-items:center;
    padding:26px 0;
    border-bottom:1px solid var(--line);
    transition:background 0.2s ease;
  }
  .service-row:hover{background:rgba(231,169,60,0.05);}
  .service-num{
    font-family:'Anton',sans-serif;
    font-size:1.6rem;
    color:var(--gold);
  }
  .service-row h3{
    font-family:'Manrope',sans-serif;
    font-weight:800;
    font-size:1.2rem;
    color:var(--ink);
  }
  .service-row p{
    color:var(--ink-dim);
    font-size:0.95rem;
    margin-top:4px;
  }
  .service-arrow{
    color:var(--ink-dim);
    font-size:1.3rem;
  }
  @media (max-width:640px){
    .service-row{grid-template-columns:44px 1fr; row-gap:4px;}
    .service-arrow{display:none;}
  }

  /* ---------- Events ---------- */
  .events{background:var(--bg);}
  .event-row{
    display:grid;
    grid-template-columns:130px 1fr auto;
    gap:28px;
    align-items:center;
    padding:28px 0;
    border-bottom:1px solid var(--line);
  }
  .event-row:first-of-type{border-top:1px solid var(--line);}
  .event-date{
    text-align:center;
    background:var(--panel-2);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:14px 8px;
  }
  .event-date .month{
    display:block;
    font-size:0.78rem;
    letter-spacing:0.08em;
    color:var(--gold);
    font-weight:700;
  }
  .event-date .day{
    display:block;
    font-family:'Anton',sans-serif;
    font-size:2rem;
    line-height:1;
    margin-top:4px;
    color:var(--ink);
  }
  .event-info h3{
    font-family:'Manrope',sans-serif;
    font-weight:800;
    font-size:1.25rem;
    color:var(--ink);
  }
  .event-info p{
    color:var(--ink-dim);
    font-size:0.95rem;
    margin-top:4px;
  }
  @media (max-width:640px){
    .event-row{grid-template-columns:80px 1fr; row-gap:14px;}
    .event-row .btn.ghost{grid-column:1/-1; text-align:center;}
  }

  /* ---------- Contact ---------- */
  .contact{background:var(--panel);}
  .contact .wrap{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
  }
  .contact-info h2{
    font-size:clamp(1.9rem, 4vw, 2.6rem);
  }
  .contact-info p{
    color:var(--ink-dim);
    margin-top:16px;
    max-width:42ch;
  }
  .contact-info .booking-email{
    display:inline-block;
    margin-top:24px;
    color:var(--gold);
    font-weight:700;
    border-bottom:1px solid var(--gold);
  }
  form{display:flex; flex-direction:column; gap:18px;}
  label{
    font-size:0.85rem;
    font-weight:700;
    color:var(--ink-dim);
    margin-bottom:6px;
    display:block;
  }
  input, textarea{
    width:100%;
    background:var(--panel-2);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:14px 16px;
    color:var(--ink);
    font-family:'Manrope',sans-serif;
    font-size:0.98rem;
  }
  input::placeholder, textarea::placeholder{color:#7d7285;}
  textarea{resize:vertical; min-height:120px;}
  input:focus, textarea:focus{border-color:var(--gold); outline:none;}
  .contact form .btn{align-self:flex-start;}
  @media (max-width:820px){
    .contact .wrap{grid-template-columns:1fr;}
  }

  /* ---------- Footer ---------- */
  footer{
    background:#0D0A13;
    border-top:1px solid var(--line);
    padding:56px 0 32px;
  }
  .footer-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:24px;
    padding-bottom:32px;
    border-bottom:1px solid var(--line);
  }
  .footer-logo{
    font-family:'Anton',sans-serif;
    font-size:1.3rem;
  }
  .footer-logo span{color:var(--gold);}
  .social-links{
    display:flex;
    gap:22px;
    list-style:none;
    margin:0; padding:0;
  }
  .social-links a{
    color:var(--ink-dim);
    font-weight:700;
    font-size:0.92rem;
    transition:color 0.2s ease;
  }
  .social-links a:hover{color:var(--coral);}
  .footer-bottom{
    padding-top:24px;
    font-size:0.82rem;
    color:#7d7285;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
  }