/* Fonts: served from our own fonts/ folder (no Google Fonts). A browser only downloads the ones a page uses. */
  @font-face{font-family:'Fraunces';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/fraunces-v38-latin-300.woff2') format('woff2');}
  @font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/fraunces-v38-latin-regular.woff2') format('woff2');}
  @font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/fraunces-v38-latin-500.woff2') format('woff2');}
  @font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/fraunces-v38-latin-600.woff2') format('woff2');}
  @font-face{font-family:'Fraunces';font-style:italic;font-weight:300;font-display:swap;src:url('../fonts/fraunces-v38-latin-300italic.woff2') format('woff2');}
  @font-face{font-family:'Fraunces';font-style:italic;font-weight:500;font-display:swap;src:url('../fonts/fraunces-v38-latin-500italic.woff2') format('woff2');}
  @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-v20-latin-regular.woff2') format('woff2');}
  @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-v20-latin-500.woff2') format('woff2');}
  @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-v20-latin-600.woff2') format('woff2');}
  @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-v20-latin-700.woff2') format('woff2');}
  @font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/playfair-display-v40-latin-regular.woff2') format('woff2');}
  @font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/playfair-display-v40-latin-600.woff2') format('woff2');}
  @font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/playfair-display-v40-latin-700.woff2') format('woff2');}
  @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/plus-jakarta-sans-v12-latin-300.woff2') format('woff2');}
  @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/plus-jakarta-sans-v12-latin-regular.woff2') format('woff2');}
  @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/plus-jakarta-sans-v12-latin-600.woff2') format('woff2');}
  @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/plus-jakarta-sans-v12-latin-700.woff2') format('woff2');}

  /* Inline icon set (replaces Font Awesome CDN — same class names in the markup, zero network requests) */
  .fa-solid, .fas{ display:inline-block; width:1em; height:1em; background-color:currentColor; flex:none;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center;
    -webkit-mask-size:contain; mask-size:contain; vertical-align:-0.08em; }
  .fa-arrow-right{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
  .fa-chevron-down{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
  .fa-xmark{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
  .fa-music{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13M9 18a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM21 16a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13M9 18a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM21 16a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3C/svg%3E"); }

  :root{
    --bg: #0F0C09;
    --bg-panel: #17120C;
    --bg-panel-2: #1D170F;
    --gold: #E3A13D;
    --gold-soft: #F0C378;
    --rust: #C05B3B;
    --cream: #F3ECDE;
    --muted: #A99C87;
    --line: rgba(243,236,222,0.12);
    --line-strong: rgba(243,236,222,0.22);
    --display: 'Fraunces', serif;
    --body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --radius: 4px;
    --wrap: 1200px;
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  body{
    margin:0; background: var(--bg); color: var(--cream);
    font-family: var(--body); font-size: 16px; line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  img{ max-width:100%; display:block; }
  a{ color: inherit; text-decoration: none; }
  ul{ margin:0; padding:0; list-style:none; }
  h1,h2,h3,h4{ font-family: var(--display); font-weight: 600; margin:0; color: var(--cream); }
  p{ margin:0; }
  .wrap{ max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
  section{ position: relative; }
  ::selection{ background: var(--gold); color: #1a1206; }
  :focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }

  /* Grain Texture Overlay */
  .grain{
    position: fixed; inset:0; pointer-events:none; z-index: 99; opacity: .04; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* mood pairs, shared by the header equalizer/mood-rail and the sample cards */
  :root{
    --mood-0-a:255,158,181; --mood-0-b:255,209,169;   /* romantic  */
    --mood-1-a:255,210,74;  --mood-1-b:255,90,54;      /* electric  */
    --mood-2-a:240,195,120; --mood-2-b:192,91,59;      /* nostalgic */
    --mood-3-a:191,212,255; --mood-3-b:243,236,222;    /* tribute   */
    --mood-4-a:201,182,255; --mood-4-b:255,227,163;    /* lullaby   */
  }

  /* =========================================================================
     HEADER
     ========================================================================= */
  #site-header{position:sticky;top:0;z-index:100;width:100%;
    background:rgba(15,12,9,.72);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
    border-bottom:1px solid var(--line)}
  .mood-rail{height:2px;width:100%;
    background:linear-gradient(90deg,rgb(var(--mood-0-a)),rgb(var(--mood-1-a)),rgb(var(--mood-2-b)),rgb(var(--mood-3-a)),rgb(var(--mood-4-a)),rgb(var(--mood-0-a)));
    background-size:300% 100%;animation:railshift 14s linear infinite;opacity:.55}
  body.listening .mood-rail{animation-duration:5s;opacity:1;filter:saturate(1.4) brightness(1.15)}
  @keyframes railshift{to{background-position:300% 0}}

  .nav-row{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px}

  /* --- brand + equalizer --- */
  .brand{display:flex;align-items:center;gap:12px;min-width:0}
  .brand-mark{width:36px;height:36px;flex:none;color:var(--gold);font-size:22px;display:flex;align-items:center;justify-content:center;
    border-radius:50%;border:1px solid var(--line-strong);transition:box-shadow .3s ease,border-color .3s ease}
  .brand:hover .brand-mark{border-color:var(--gold);box-shadow:0 0 18px rgba(227,161,61,.45)}
  .eq{display:flex;align-items:flex-end;gap:3px;height:20px;flex:none}
  .eq i{display:block;width:3px;border-radius:2px;background:linear-gradient(180deg,var(--gold-soft),var(--rust));height:6px;transform-origin:bottom;transition:background .3s ease}
  .eq i:nth-child(1){animation:eqidle 1.6s ease-in-out infinite}
  .eq i:nth-child(2){animation:eqidle 1.6s ease-in-out infinite .12s}
  .eq i:nth-child(3){animation:eqidle 1.6s ease-in-out infinite .24s}
  .eq i:nth-child(4){animation:eqidle 1.6s ease-in-out infinite .36s}
  .eq i:nth-child(5){animation:eqidle 1.6s ease-in-out infinite .48s}
  @keyframes eqidle{0%,100%{height:5px}50%{height:14px}}
  body.listening .eq i{background:linear-gradient(180deg,var(--gold-soft),#FF3D7F);animation-duration:.5s;box-shadow:0 0 6px rgba(227,161,61,.6)}
  .brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
  .brand-text strong{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:.2px;white-space:nowrap}
  .brand-text small{font-size:11.5px;color:var(--muted);white-space:nowrap}

  /* --- primary nav --- */
  .primary-nav > ul{display:flex;align-items:center;gap:2px}
  .primary-nav > ul > li{position:relative}
  .primary-nav a,.dropdown-trigger{position:relative;display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:14.5px;color:var(--muted);
    padding:10px 14px;border-radius:var(--radius);background:none;border:0;cursor:pointer;transition:color .25s ease}
  .primary-nav a::after,.dropdown-trigger::after{content:'';position:absolute;left:14px;right:14px;bottom:6px;height:2px;border-radius:2px;
    background:linear-gradient(90deg,rgb(var(--m1,227,161,61)),rgb(var(--m2,192,91,59)));transform:scaleX(0);transform-origin:left;
    transition:transform .35s cubic-bezier(.22,.9,.3,1),filter .35s ease}
  .primary-nav a:hover,.primary-nav a:focus-visible,.primary-nav a.active,
  .has-dropdown:hover .dropdown-trigger,.has-dropdown.open .dropdown-trigger{color:var(--cream)}
  .primary-nav a:hover::after,.primary-nav a:focus-visible::after,.primary-nav a.active::after,
  .has-dropdown:hover .dropdown-trigger::after,.has-dropdown.open .dropdown-trigger::after{transform:scaleX(1);filter:drop-shadow(0 0 6px rgba(var(--m1,227,161,61),.7))}
  .dropdown-trigger i{font-size:9px;transition:transform .3s ease}
  .has-dropdown:hover .dropdown-trigger i,.has-dropdown.open .dropdown-trigger i{transform:rotate(180deg)}

  /* --- Custom Songs / Learn More dropdowns --- */
  .dropdown-panel{
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);
    width:420px;
    max-width:90vw;
    padding-top:14px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease,visibility 0s linear .2s;
  }
  .dropdown-panel.wide{
    width:720px;
    max-width:95vw;
  }
  .has-dropdown.open .dropdown-panel{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:opacity .2s ease;
  }
  .dropdown-panel-inner{
    position:relative;
    transform:translateY(-8px);
    transition:transform .3s cubic-bezier(.2,.8,.2,1);
    background:linear-gradient(180deg,rgba(23,18,12,.98),rgba(15,12,9,.98));
    border:1px solid var(--line-strong);
    border-radius:16px;
    padding:8px;
    box-shadow:0 30px 70px -20px rgba(0,0,0,.65);
    overflow:hidden;
    max-height:82vh;
    overflow-y:auto;
  }
  .dropdown-cols-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
  }
  /* three-column Custom Songs menu */
  .dropdown-panel.wide.cols3{ width:960px; max-width:96vw; }
  .dropdown-cols-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 10px; }
  .dropdown-panel-inner ul{
    display:flex;
    flex-direction:column;
  }
  .has-dropdown.open .dropdown-panel-inner{
    transform:translateY(0);
  }
  .dropdown-glow{
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.55;
    transition:background .4s ease;
    background:radial-gradient(circle at 30% 10%,rgba(var(--m1,255,210,74),.22),transparent 60%);
  }
  .dropdown-eyebrow{
    position:relative;
    padding:12px 14px 6px;
    font:11px ui-monospace,monospace;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--gold-soft);
  }
  .dropdown-item{
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    padding:9px 10px;
    border-radius:10px;
    transition:background .2s ease;
  }
  .dropdown-item:hover{
    background:rgba(243,236,222,.05);
  }
  .di-glyph{
    flex:none;
    width:32px;
    height:32px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:14px;
    color:#1B1206;
    background:linear-gradient(135deg,rgb(var(--m1, 227,161,61)),rgb(var(--m2, 192,91,59)));
    box-shadow:0 0 14px rgba(var(--m1, 227,161,61),.45);
  }
  .di-text{
    flex:1;
    min-width:0;
  }
  .di-text strong{
    display:block;
    font-family:var(--display);
    font-size:14.5px;
    font-weight:600;
    color:var(--cream);
    line-height:1.2;
  }
  .di-text small{
    display:block;
    margin-top:2px;
    font:italic 300 11.5px/1.3 var(--display);
    color:var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .dropdown-item:hover .di-text small{
    color:var(--gold-soft);
  }
  .dropdown-item .fa-arrow-right{
    margin-left:auto;
    flex:none;
    color:var(--muted);
    opacity:0;
    transform:translateX(-4px);
    transition:all .25s ease;
  }
  .dropdown-item:hover .fa-arrow-right{
    opacity:1;
    transform:translateX(0);
    color:rgb(var(--m1, 227,161,61));
  }

  .header-actions{display:flex;align-items:center;gap:14px;flex:none}

  /* --- CTA: Order Your Song (pulsing pill) --- */
  .nav-cta{position:relative;display:inline-flex;align-items:center;gap:9px;padding:11px 22px;border-radius:9999px;
    font-size:14px;font-weight:700;color:#1B1206;white-space:nowrap;
    background:linear-gradient(90deg,var(--gold),#FF5A36,var(--rust),var(--gold)) 0 0/300% 100%;
    animation:cta-shimmer 5s linear infinite;box-shadow:0 0 22px rgba(227,161,61,.4);
    transition:transform .25s ease,box-shadow .25s ease;z-index:1}
  .nav-cta:hover{transform:translateY(-1px) scale(1.03);box-shadow:0 0 34px rgba(255,90,54,.6)}
  /* paper-plane icon drawn as a built-in shape (no Font Awesome needed, so it shows on every page) */
  .nav-cta .btn-icon{display:inline-block;flex:none;width:14px;height:14px;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M22 2 2 10.5l7.2 2.8L20 4l-8.9 11 .1 7 3.6-4.7 4.8 2.7z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M22 2 2 10.5l7.2 2.8L20 4l-8.9 11 .1 7 3.6-4.7 4.8 2.7z'/%3E%3C/svg%3E") center/contain no-repeat}
  .nav-cta .btn-icon::before{content:none}
  @keyframes cta-shimmer{to{background-position:-300% 0}}
  .btn-pulse::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:9999px;
    background:rgba(227,161,61,.55);z-index:-1;animation:pulse 2.2s ease-out infinite}
  @keyframes pulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.18,1.32);opacity:0}100%{transform:scale(1);opacity:0}}
  @media (prefers-reduced-motion:reduce){.nav-cta,.btn-pulse::before{animation:none!important}}

  .hamburger{display:none;flex:none;width:40px;height:40px;border:1px solid var(--line-strong);border-radius:8px;background:transparent;position:relative;cursor:pointer}
  .hamburger span{position:absolute;left:9px;right:9px;height:2px;background:var(--cream);border-radius:2px;transition:transform .3s ease,opacity .2s ease}
  .hamburger span:nth-child(1){top:13px}
  .hamburger span:nth-child(2){top:19px}
  .hamburger span:nth-child(3){top:25px}
  .hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .hamburger.open span:nth-child(2){opacity:0}
  .hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  @media (prefers-reduced-motion:reduce){.mood-rail,.eq i{animation:none!important}}

  /* =========================================================================
     MOBILE OVERLAY (header menu)
     ========================================================================= */
  .nav-overlay{position:fixed;inset:0;z-index:99;background:radial-gradient(ellipse 90% 60% at 50% 0%,rgba(227,161,61,.12),transparent 60%),var(--bg);
    opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease;overflow-y:auto}
  .nav-overlay.open{opacity:1;visibility:visible;pointer-events:auto}
  .overlay-notes{position:fixed;inset:0;overflow:hidden;pointer-events:none}
  .overlay-notes span{position:absolute;top:-10%;font-size:22px;color:var(--gold-soft);opacity:.3;filter:drop-shadow(0 0 6px rgba(227,161,61,.5))}
  .nav-overlay.open .overlay-notes span{animation:overlayfall linear infinite}
  @keyframes overlayfall{to{transform:translateY(120vh)}}
  .overlay-nav{min-height:100%;display:flex;align-items:center;justify-content:center;padding:100px 24px 60px}
  .overlay-nav ul{display:flex;flex-direction:column;align-items:stretch;gap:2px;width:100%;max-width:420px}
  .overlay-nav > ul > li{opacity:0;transform:translateY(14px);filter:blur(4px)}
  .nav-overlay.open .overlay-nav > ul > li{animation:overlayrise .55s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--d) * 55ms)}
  @keyframes overlayrise{to{opacity:1;transform:none;filter:none}}
  .overlay-nav a,.overlay-toggle{font-family:var(--display);font-size:24px;font-weight:400;color:var(--cream);padding:12px 6px;display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:0;text-align:left;cursor:pointer}
  .overlay-nav a:hover,.overlay-toggle:hover{color:var(--gold-soft)}
  .overlay-toggle i{font-size:16px;color:var(--muted);transition:transform .3s ease}
  .overlay-accordion.open .overlay-toggle i{transform:rotate(180deg)}
  .overlay-submenu{max-height:0;overflow:hidden;transition:max-height .4s ease;padding-left:14px;border-left:1px solid var(--line)}
  .overlay-submenu li{display:flex;align-items:center;gap:10px;padding:4px 0}
  .overlay-submenu a{font-family:var(--body);font-size:16px;padding:9px 6px;color:var(--muted)}
  .overlay-submenu .di-glyph{width:26px;height:26px;font-size:11px}
  .overlay-subhead{font:600 11px/1.4 ui-monospace,monospace;letter-spacing:1.2px;text-transform:uppercase;color:var(--gold-soft);padding:14px 6px 4px}
  .overlay-submenu li:first-child .overlay-subhead{padding-top:2px}
  .overlay-close{position:absolute;top:22px;right:26px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);background:rgba(23,18,12,.6);color:var(--cream);font-size:18px;cursor:pointer;z-index:2}
  .overlay-close:hover{border-color:var(--gold);color:var(--gold-soft)}
  @media (prefers-reduced-motion:reduce){.overlay-notes span{animation:none!important}.overlay-nav>ul>li{animation:none!important;opacity:1;transform:none;filter:none}}

  @media (max-width:980px){
    .primary-nav{display:none}
    .header-actions .nav-cta .btn-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* hidden on phones but still read by screen readers */
    .header-actions .nav-cta{padding:11px 14px}
    .hamburger{display:block}
    .dropdown-cols-2 { grid-template-columns: 1fr; }
  }

  .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding: 14px 26px; border-radius: var(--radius); font-size: 15px; font-weight:600; cursor:pointer; border:1px solid transparent; transition:all .2s ease; }
  .btn-solid{ background: var(--gold); color:#1B1206; }
  .btn-solid:hover{ background: var(--gold-soft); transform:translateY(-1px); }
  .btn-line{ border-color: var(--line-strong); color: var(--cream); background:transparent; }
  .btn-line:hover{ border-color: var(--gold); color: var(--gold-soft); }

  /* Hero Section */
  .hero{
    padding: 80px 0 100px;
    background:
      radial-gradient(ellipse 900px 500px at 75% -10%, rgba(227,161,61,0.15), transparent 60%),
      radial-gradient(ellipse 700px 500px at 10% 40%, rgba(192,91,59,0.10), transparent 60%);
  }
  .hero-grid{ display:grid; grid-template-columns: 1.2fr 1fr; gap: 50px; align-items:center; }
  .quality-tag{ color: var(--gold-soft); font-size: 14px; margin-bottom: 16px; font-family: monospace; letter-spacing: 1px; text-transform: uppercase; }
  .hero h1{ font-size: clamp(38px, 4.5vw, 54px); line-height: 1.1; letter-spacing: -0.5px; margin-bottom: 20px; }
  .hero .subheading{ color: var(--muted); font-size: 17px; margin-bottom: 20px; display:flex; align-items:center; gap:10px; }
  .hero .guarantee{ font-size: 14.5px; color: var(--cream); background: var(--bg-panel); border: 1px solid var(--line); padding: 12px 18px; border-radius: var(--radius); display:inline-block; margin-bottom: 30px; }
  .hero .guarantee a{ color: var(--gold-soft); text-decoration: underline; }
  .hero-buttons{ display:flex; gap: 14px; flex-wrap: wrap; }
  .hero-img-box{ background: var(--bg-panel); border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; padding: 10px; }
  .hero-img-box img{ width: 100%; height: auto; border-radius: 4px; display:block; }

  /* Grid Layouts for Sections */
  .section{ padding: 90px 0; border-top: 1px solid var(--line); }
  .section-alt{ background: var(--bg-panel); }
  .section-head{ max-width: 700px; margin-bottom: 50px; }
  .section-head h2{ font-size: clamp(30px, 3.2vw, 40px); line-height: 1.15; margin-bottom: 14px; }
  .section-head p{ color: var(--muted); font-size: 16.5px; }

  .grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .card{ background: var(--bg-panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; display:flex; flex-direction:column; justify-content:space-between; transition: border-color .2s ease; }
  .card:hover{ border-color: var(--line-strong); }
  .card h3{ font-size: 19px; margin-bottom: 6px; }
  .card h4{ font-size: 13px; color: var(--gold-soft); margin-bottom: 14px; font-family: monospace; text-transform: uppercase; }
  .card p{ color: var(--muted); font-size: 14.5px; margin-bottom: 24px; line-height: 1.5; }
  .card p a{ color: var(--gold-soft); text-decoration: underline; }
  .card button{ align-self: flex-start; padding: 10px 18px; background: transparent; border: 1px solid var(--line-strong); color: var(--cream); border-radius: var(--radius); font-size: 13.5px; cursor: pointer; transition: all .2s; }
  .card button:hover{ background: var(--gold); border-color: var(--gold); color: #1B1206; font-weight: 600; }

  /* --- Services: emotional hook + hover lyric reveal + shimmering/pulsing CTAs (matches header nav-cta) --- */
  .emotion-intro{
    text-align:center; max-width:760px; margin:0 auto 56px;
    font-family:var(--display); font-style:italic; font-weight:300;
    font-size:clamp(19px,2.3vw,27px); line-height:1.55; color:var(--cream);
  }
  .emotion-intro .accent{ color:var(--gold-soft); font-style:normal; font-weight:600; }

  .card-story{ position:relative; overflow:hidden; }
  .card-lyric{
    font:italic 300 14px/1.55 var(--display); color:var(--gold-soft);
    opacity:0; max-height:0; overflow:hidden; margin-top:0;
    transition:opacity .4s ease, max-height .4s ease, margin-top .4s ease;
  }
  .card-story:hover .card-lyric{ opacity:1; max-height:70px; margin-top:12px; }
  .card-story:hover{ border-color:rgba(var(--m1,227,161,61),.5); box-shadow:0 20px 50px -25px rgba(var(--m1,227,161,61),.35); }

  .card-cta{
    position:relative; display:inline-flex; align-items:center; justify-content:center;
    align-self:flex-start; padding:11px 20px; border-radius:9999px; border:0;
    font-size:13.5px; font-weight:700; color:#1B1206; cursor:pointer; white-space:nowrap;
    background:linear-gradient(90deg,var(--gold),#FF5A36,var(--rust),var(--gold)) 0 0/300% 100%;
    animation:cta-shimmer 5s linear infinite;
    box-shadow:0 0 16px rgba(227,161,61,.35);
    transition:transform .25s ease, box-shadow .25s ease;
    z-index:1;
  }
  .card-cta:hover{ transform:translateY(-1px) scale(1.03); box-shadow:0 0 28px rgba(255,90,54,.55); }
  .card-cta::before{
    content:''; position:absolute; inset:0; border-radius:9999px;
    background:rgba(227,161,61,.55); z-index:-1; animation:pulse 2.2s ease-out infinite;
  }
  @media (prefers-reduced-motion:reduce){ .card-cta, .card-cta::before{ animation:none!important; } }

  /* --- EMOTION ENGINE PLAYER (mood light, falling notes, story captions) --- */
  .aura{--m1:227,161,61;--m2:192,91,59;--bass:0;position:fixed;inset:0;z-index:29;pointer-events:none;opacity:0;mix-blend-mode:screen;
    transition:opacity 1.2s ease;
    background:radial-gradient(ellipse 80% 60% at 50% 15%,rgba(var(--m1),calc(.14 + var(--bass)*.2)),transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 100%,rgba(var(--m2),.10),transparent 70%)}
  body.listening .aura{opacity:1}
  #notes{position:fixed;inset:0;z-index:30;pointer-events:none;width:100%;height:100%}

  @property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
  .samples-grid { grid-template-columns: repeat(3, 1fr); }
  .sc{--a:0deg;--bass:0;--p:0;position:relative;display:flex;flex-direction:column;gap:12px;padding:26px 24px 22px;border-radius:18px;
    border:1px solid transparent;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .6s ease,filter .6s ease,box-shadow .5s ease;
    background:linear-gradient(#120D0A,#120D0A) padding-box,conic-gradient(from var(--a),rgba(var(--m1),.35),rgba(var(--m2),.15),rgba(var(--m1),.35)) border-box}
  .sc:hover{transform:translateY(-4px)}
  body.listening .sc:not(.is-playing){opacity:.42;filter:saturate(.55)}
  .sc.is-playing{transform:translateY(-6px) scale(1.015);animation:sc-rot 4s linear infinite;
    background:linear-gradient(#120D0A,#120D0A) padding-box,conic-gradient(from var(--a),rgb(var(--m1)),rgb(var(--m2)),rgb(var(--m1))) border-box;
    box-shadow:0 0 calc(30px + var(--bass)*70px) rgba(var(--m1),calc(.18 + var(--bass)*.4)),0 30px 80px -30px rgba(var(--m2),.5)}
  .sc-top{display:flex;justify-content:space-between;align-items:center;gap:10px;font:11.5px ui-monospace,monospace;letter-spacing:1px;text-transform:uppercase}
  .sc-mood{display:flex;align-items:center;gap:8px;color:rgb(var(--m1))}
  .sc-mood::before{content:'';width:7px;height:7px;border-radius:50%;background:rgb(var(--m1));box-shadow:0 0 10px rgb(var(--m1))}
  .sc-dur{color:var(--muted);text-align:right}
  .sc h3{font:400 23px/1.15 var(--display);margin:2px 0 0}
  .sc-desc{color:var(--muted);font-size:13.5px;line-height:1.45;margin:0}
  .sc-line{min-height:48px;margin:0;font:italic 300 16px/1.45 var(--display);color:var(--muted)}
  .sc-line.in{color:var(--cream);animation:sc-rise .9s ease both}
  .sc-player{display:flex;align-items:center;gap:16px}
  .sc-main{flex:1;min-width:0}
  .sc-scrub{position:relative;height:60px;cursor:pointer;touch-action:none}
  canvas.wf{width:100%;height:100%;display:block}
  .sc-tip{position:absolute;top:-24px;transform:translateX(-50%);font:11px ui-monospace,monospace;background:rgb(var(--m1));color:#1B1206;padding:1px 6px;border-radius:3px;opacity:0;pointer-events:none;transition:opacity .15s}
  .sc-scrub:hover .sc-tip{opacity:1}
  .sc-time{display:flex;justify-content:space-between;margin-top:4px;font:12px ui-monospace,monospace;color:var(--muted);font-variant-numeric:tabular-nums}
  .sc-play{--h:1;flex:none;position:relative;width:64px;height:64px;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;color:#1B1206;padding:0;
    background:linear-gradient(135deg,rgb(var(--m1)),rgb(var(--m2)));box-shadow:0 0 28px rgba(var(--m1),.5);
    transform:scale(calc(var(--h)*(1 + var(--bass)*.16)));transition:box-shadow .25s}
  .sc-play:hover{--h:1.08;box-shadow:0 0 48px rgba(var(--m1),.8)}
  .sc-play:active{--h:.94}
  .sc-play svg{width:38%;height:38%;fill:currentColor}
  .sc-play .i-pause,.is-playing .i-play{display:none}.is-playing .i-pause{display:block}
  .sc-play::before{content:'';position:absolute;inset:0;border-radius:50%;border:1px solid rgb(var(--m1));animation:sc-ping 2.6s ease-out infinite}
  .is-playing .sc-play::before{animation:none;opacity:0}
  .sc-play::after{content:'';position:absolute;inset:-7px;border-radius:50%;border:2px solid transparent}
  .is-loading .sc-play::after{border-top-color:#fff;animation:sc-spin .8s linear infinite}
  .sc-cta{align-self:flex-start;padding:10px 18px;border-radius:99px;border:1px solid rgba(var(--m1),.45);font-size:13px;font-weight:600;
    color:rgb(var(--m1));text-decoration:none;transition:all .3s ease}
  .sc-cta:hover{box-shadow:0 0 22px rgba(var(--m1),.4);border-color:rgb(var(--m1))}
  .is-hot .sc-cta{color:#1B1206;border-color:transparent;background:linear-gradient(90deg,rgb(var(--m1)),rgb(var(--m2)),rgb(var(--m1))) 0 0/200% 100%;animation:sc-shimmer 2.2s linear infinite}
  .is-finale .sc-cta{transform:scale(1.06);box-shadow:0 0 34px rgba(var(--m1),.7)}
  @keyframes sc-spin{to{transform:rotate(360deg)}}
  @keyframes sc-rot{to{--a:360deg}}
  @keyframes sc-ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.8);opacity:0}}
  @keyframes sc-shimmer{to{background-position:-200% 0}}
  @keyframes sc-rise{from{opacity:0;transform:translateY(8px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
  @media (prefers-reduced-motion:reduce){.sc,.sc *{animation:none!important;transition:none!important}#notes{display:none}}

  /* Accordion FAQ */
  .accordion{ display:flex; flex-direction:column; gap: 12px; max-width: 800px; }
  .accordion-item{ background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
  .accordion-header{ padding: 18px 22px; font-family: var(--display); font-size: 17px; cursor: pointer; display:flex; justify-content:space-between; align-items:center; }
  .accordion-header::after{ content:'+'; font-size: 20px; color: var(--gold); }
  .accordion-content{ padding: 0 22px 18px; color: var(--muted); font-size: 15px; display:none; }
  .accordion-item.active .accordion-content{ display:block; }
  .accordion-item.active .accordion-header::after{ content:'-'; }

  /* Footer */
  footer{ background: #0A0805; border-top: 1px solid var(--line); padding: 60px 0 30px; }
  .footer-links{ display:flex; flex-wrap:wrap; gap: 16px 24px; margin-bottom: 30px; font-size: 14px; color: var(--muted); }
  .footer-links a:hover{ color: var(--gold-soft); }
  .contact-info{ font-size: 14px; color: var(--muted); margin-bottom: 20px; border-top: 1px solid var(--line); padding-top: 24px; }
  .contact-info a{ color: var(--cream); text-decoration: underline; }
  .footer-copy{ font-size: 13px; color: var(--muted-dim, #756A5A); }

  /* Footer: 4-column layout */
  .footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px 28px; margin-bottom: 8px; }
  .footer-col-brand p{ max-width: 320px; }
  .footer-col h4{ font-family: var(--display); font-size: 14.5px; font-weight:600; color: var(--gold-soft); letter-spacing: .3px; margin-bottom: 14px; }
  .footer-col ul{ display:flex; flex-direction:column; gap: 9px; }
  .footer-col a{ font-size: 13.5px; color: var(--muted); }
  .footer-col a:hover{ color: var(--gold-soft); }
  .footer-col-brand .brand{ display:inline-flex; }

  @media (max-width: 1024px){
    .samples-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid{ grid-template-columns: 1.3fr 1fr 1fr; }
    .footer-col-brand{ grid-column: 1 / -1; }
  }
  @media (max-width: 768px){
    .hero-grid{ grid-template-columns: 1fr; }
    .grid, .samples-grid{ grid-template-columns: 1fr; }
    .footer-grid{ grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 480px){
    .footer-grid{ grid-template-columns: 1fr; }
  }