:root {
      --bg:            #0D0B1A;
      --bg-surface:    #131027;
      --bg-card:       #1A1735;
      --gold:          #F0B429;
      --gold-light:    #FFD166;
      --gold-dim:      rgba(240,180,41,0.12);
      --purple:        #8B5CF6;
      --purple-light:  #C4B5FD;
      --purple-dim:    rgba(139,92,246,0.15);
      --border:        rgba(139,92,246,0.18);
      --border-gold:   rgba(240,180,41,0.35);
      --text:          #F0ECFF;
      --text-2:        #9D93C4;
      --text-3:        #4A4768;
      --r-sm:          10px;
      --r-md:          16px;
      --r-lg:          24px;
    }

    /* =============================================
       RESET & BASE
    ============================================= */
    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body {
      font-family:'DM Sans', sans-serif;
      background:var(--bg);
      color:var(--text);
      line-height:1.6;
      overflow-x:hidden;
    }
    img  { display:block; max-width:100%; height:auto; }
    a    { text-decoration:none; color:inherit; }
    ul   { list-style:none; }

    /* =============================================
       LAYOUT
    ============================================= */
    .container {
      max-width:1120px;
      margin:0 auto;
      padding:0 32px;
    }

    /* =============================================
       BUTTONS
    ============================================= */
    .btn-primary {
      display:inline-flex; align-items:center; gap:8px;
      background:var(--gold);
      color:#0D0B1A;
      font-family:'DM Sans', sans-serif;
      font-weight:600; font-size:0.9rem;
      padding:13px 28px; border-radius:50px; border:none; cursor:pointer;
      transition:background .2s, transform .2s, box-shadow .2s;
      letter-spacing:.01em;
    }
    .btn-primary:hover {
      background:var(--gold-light);
      transform:translateY(-2px);
      box-shadow:0 12px 36px rgba(240,180,41,.4);
    }
    .btn-secondary {
      display:inline-flex; align-items:center; gap:8px;
      background:transparent; color:var(--text);
      font-family:'DM Sans', sans-serif;
      font-weight:500; font-size:0.9rem;
      padding:12px 28px; border-radius:50px;
      border:1.5px solid var(--border); cursor:pointer;
      transition:border-color .2s, color .2s, transform .2s;
    }
    .btn-secondary:hover {
      border-color:var(--purple-light); color:var(--purple-light);
      transform:translateY(-2px);
    }

    /* =============================================
       NAVBAR
    ============================================= */
    .navbar {
      position:fixed; inset:0 0 auto 0; z-index:200;
      display:flex; align-items:center; justify-content:space-between;
      padding:16px 40px;
      background:rgba(13,11,26,.8);
      backdrop-filter:blur(20px);
      -webkit-backdrop-filter:blur(20px);
      border-bottom:1px solid rgba(139,92,246,.1);
    }
    .nav-logo { display:flex; align-items:center; gap:12px; }
    .nav-logo img {
      width:150px; height:80px; border-radius:9px; object-fit:cover;
    }
    .nav-logo span {
      font-family:'Playfair Display', serif;
      font-size:1.25rem; font-weight:700; color:var(--text);
    }
    .nav-links { display:flex; align-items:center; gap:28px; }
    .nav-links > a {
      font-size:.88rem; font-weight:500; color:var(--text-2);
      transition:color .2s;
    }
    .nav-links > a:hover { color:var(--text); }

    /* =============================================
       HERO
    ============================================= */
    .hero {
      position:relative;
      min-height:100vh;
      display:flex; flex-direction:column;
      align-items:center; justify-content:center;
      text-align:center;
      padding:140px 24px 88px;
      overflow:hidden;
    }
    /* Atmospheric glow */
    .hero-glow {
      position:absolute; inset:0; pointer-events:none;
      background:
        radial-gradient(ellipse 90% 60% at 50% -5%,  rgba(139,92,246,.28) 0%, transparent 65%),
        radial-gradient(ellipse 45% 35% at 10% 85%,  rgba(240,180,41,.07) 0%, transparent 60%),
        radial-gradient(ellipse 45% 35% at 90% 75%,  rgba(139,92,246,.1)  0%, transparent 60%);
      animation:heroPulse 9s ease-in-out infinite alternate;
    }
    @keyframes heroPulse { from{opacity:.75} to{opacity:1} }

    .hero-content { position:relative; z-index:1; max-width:800px; }

    .hero-badge {
      display:inline-flex; align-items:center; gap:8px;
      background:rgba(139,92,246,.15);
      border:1px solid rgba(139,92,246,.3);
      color:var(--purple-light);
      font-size:.75rem; font-weight:700;
      letter-spacing:.1em; text-transform:uppercase;
      padding:7px 18px; border-radius:50px;
      margin-bottom:36px;
    }
    .hero h1 {
      font-family:'Playfair Display', serif;
      font-size:clamp(2.8rem, 6vw, 5.2rem);
      font-weight:800; line-height:1.07;
      letter-spacing:-.025em; margin-bottom:28px;
    }
    .hero h1 em { font-style:italic; color:var(--gold); }
    .hero-sub {
      font-size:1.1rem; color:var(--text-2);
      max-width:540px; margin:0 auto 48px; line-height:1.8;
    }
    .hero-btns {
      display:flex; align-items:center; justify-content:center;
      gap:14px; flex-wrap:wrap;
    }

    /* =============================================
       PIANO KEY DIVIDER  ★ Signature Element
    ============================================= */
    .piano-divider {
      position:absolute; bottom:0; left:0; right:0; z-index:2;
      overflow:hidden; line-height:0;
    }
    .piano-divider svg { display:block; width:100%; }

    /* =============================================
       STATS STRIP
    ============================================= */
    .stats-strip {
      background:var(--bg-surface);
      border-top:1px solid var(--border);
      border-bottom:1px solid var(--border);
      padding:52px 32px;
    }
    .stats-inner {
      max-width:1120px; margin:0 auto;
      display:flex; justify-content:center;
      align-items:stretch; flex-wrap:wrap;
    }
    .stat-item {
      flex:1; min-width:160px; text-align:center; padding:4px 32px;
    }
    .stat-item + .stat-item {
      border-left:1px solid var(--border);
    }
    .stat-num {
      display:block;
      font-family:'Playfair Display', serif;
      font-size:2.8rem; font-weight:700;
      color:var(--gold); line-height:1; margin-bottom:8px;
    }
    .stat-lbl {
      font-size:.75rem; font-weight:700;
      color:var(--text-3); text-transform:uppercase; letter-spacing:.12em;
    }

    /* =============================================
       INTRO
    ============================================= */
    .intro { padding:100px 32px; text-align:center; }
    .intro h2 {
      font-family:'Playfair Display', serif;
      font-size:clamp(1.8rem,3.5vw,2.8rem); font-weight:700;
      margin-bottom:24px;
    }
    .intro p {
      font-size:1.05rem; color:var(--text-2);
      max-width:600px; margin:0 auto 16px; line-height:1.85;
    }

    /* =============================================
       SHARED LABELS
    ============================================= */
    .eyebrow {
      display:inline-block; font-size:.72rem; font-weight:700;
      color:var(--gold); text-transform:uppercase;
      letter-spacing:.18em; margin-bottom:14px;
    }
    .section-hed {
      font-family:'Playfair Display', serif;
      font-size:clamp(2rem,3.5vw,2.9rem); font-weight:700;
      line-height:1.15; color:var(--text);
    }

    /* =============================================
       FEATURES
    ============================================= */
    .features-wrap { padding:100px 0 20px; }
    .features-hd   { text-align:center; margin-bottom:80px; padding:0 32px; }

    .feature-rows { display:flex; flex-direction:column; gap:0; }

    .feature-row {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:80px; align-items:center;
      padding:52px 32px;
      max-width:1120px; margin:0 auto;
      width:100%;
    }

    .feature-img img {
      width: 250px;
      height : 550px;
      border-radius:var(--r-lg);
      box-shadow:0 32px 80px rgba(0,0,0,.65), 0 0 0 1px rgba(139,92,246,.15);
    }

    .freestyle_piano_horizontal img{
      width: 600px;
      height : 150px;
      border-radius:var(--r-lg);
      box-shadow:0 32px 80px rgba(0,0,0,.65), 0 0 0 1px rgba(139,92,246,.15);
    }

    .feature-tag {
      display:inline-block; font-size:.7rem; font-weight:700;
      color:var(--purple-light); text-transform:uppercase;
      letter-spacing:.14em; margin-bottom:14px;
    }
    .feature-text h3 {
      font-family:'Playfair Display', serif;
      font-size:clamp(1.55rem,2.2vw,2.1rem); font-weight:700;
      margin-bottom:20px; line-height:1.2;
    }
    .feature-text p {
      font-size:.97rem; color:var(--text-2); line-height:1.82; margin-bottom:12px;
    }
    .feature-list { margin-top:22px; display:flex; flex-direction:column; gap:10px; }
    .feature-list li {
      display:flex; align-items:center; gap:12px;
      font-size:.88rem; color:var(--text-2); font-weight:500;
    }
    .feature-list li::before {
      content:''; width:5px; height:5px; border-radius:50%;
      background:var(--gold); flex-shrink:0;
    }

    /* Reverse swap — desktop only */
    @media (min-width:769px) {
      .feature-row.rev .feature-img { order:2; }
      .feature-row.rev .feature-text { order:1; }
    }

    /* =============================================
       DIFFERENTIATORS
    ============================================= */
    .diff-wrap {
      background:var(--bg-surface);
      border-top:1px solid var(--border);
      border-bottom:1px solid var(--border);
      padding:100px 32px;
    }
    .diff-hd { text-align:center; margin-bottom:56px; }
    .diff-grid {
      display:grid; grid-template-columns:repeat(4,1fr);
      gap:14px; max-width:1120px; margin:0 auto;
    }
    .diff-card {
      background:var(--bg-card);
      border:1px solid var(--border);
      border-radius:var(--r-md);
      padding:30px 20px; text-align:center;
      transition:border-color .2s, background .2s, transform .2s;
      cursor:default;
    }
    .diff-card:hover {
      border-color:var(--border-gold);
      background:var(--gold-dim);
      transform:translateY(-4px);
    }
    .diff-icon  { font-size:1.75rem; display:block; margin-bottom:10px; }
    .diff-label { font-size:.84rem; font-weight:600; color:var(--text); }

    /* =============================================
       MEET THE CREATOR
    ============================================= */
    .creator-wrap {
      background:var(--bg-surface);
      border-top:1px solid var(--border);
      border-bottom:1px solid var(--border);
      padding:100px 32px;
    }
    .creator-card {
      max-width:1000px; margin:0 auto;
      display:grid; grid-template-columns:280px 1fr;
      gap:72px; align-items:start;
    }

    /* — Avatar column — */
    .creator-avatar-col {
      display:flex; flex-direction:column; align-items:center; gap:20px;
    }
    .creator-avatar {
      position:relative;
      width:180px; height:180px;
      border-radius:50%;
      background:linear-gradient(135deg, rgba(139,92,246,.35) 0%, rgba(240,180,41,.18) 100%);
      border:1.5px solid var(--border-gold);
      display:flex; align-items:center; justify-content:center;
      flex-shrink:0;
    }



    .creator-avatar img{
        width:100%;
        height:100%;
        border-radius:50%;
        object-fit:cover;
        display:block;
    }
    /* Pulsing ring */
    .creator-avatar::before, .creator-avatar::after {
      content:''; position:absolute; inset:-14px;
      border-radius:50%;
      border:1px solid rgba(139,92,246,.18);
      animation:creatorRing 3.6s ease-in-out infinite;
    }
    .creator-avatar::after {
      inset:-28px;
      border-color:rgba(240,180,41,.1);
      animation-delay:.9s;
    }
    @keyframes creatorRing {
      0%,100%{opacity:.4;transform:scale(1)}
      50%{opacity:1;transform:scale(1.03)}
    }
    .creator-note-icon {
      font-size:3.6rem; line-height:1;
      filter:drop-shadow(0 0 18px rgba(240,180,41,.55));
    }

    /* — Dev badge — */
    .creator-dev-badge {
      display:flex; align-items:center; gap:12px;
      background:var(--bg-card);
      border:1px solid var(--border);
      border-radius:var(--r-md);
      padding:14px 18px; width:100%;
      transition:border-color .2s;
    }
    .creator-dev-badge:hover { border-color:var(--border-gold); }
    .creator-dev-badge .badge-icon { font-size:1.6rem; flex-shrink:0; }
    .creator-dev-badge strong {
      display:block; font-size:.85rem; font-weight:600; color:var(--text);
    }
    .creator-dev-badge small {
      display:block; font-size:.72rem; color:var(--gold);
      font-weight:600; letter-spacing:.07em; margin-top:2px;
    }

    /* — Creator info — */
    .creator-info { display:flex; flex-direction:column; gap:0; }
    .creator-info .section-hed { margin-bottom:18px; }
    .creator-info > p {
      font-size:.97rem; color:var(--text-2); line-height:1.85; margin-bottom:14px;
    }
    .creator-divider {
      width:48px; height:2px;
      background:linear-gradient(90deg, var(--gold), transparent);
      border-radius:2px; margin:10px 0 22px;
    }

    /* — Instruments grid — */
    .creator-instruments { margin-top:28px; }
    .creator-instruments .eyebrow { display:block; margin-bottom:14px; }
    .instrument-grid {
      display:flex; flex-wrap:wrap; gap:10px;
    }
    .instrument-chip {
      display:inline-flex; align-items:center; gap:9px;
      background:var(--bg-card);
      border:1px solid var(--border);
      border-radius:50px;
      padding:10px 18px;
      font-size:.85rem; font-weight:500; color:var(--text-2);
      transition:border-color .2s, color .2s, background .2s, transform .15s;
      cursor:default;
    }
    .instrument-chip .chip-emoji { font-size:1.1rem; }
    .instrument-chip:hover {
      border-color:var(--border-gold);
      background:var(--gold-dim);
      color:var(--text);
      transform:translateY(-2px);
    }

    /* Responsive */
    @media (max-width:768px) {
      .creator-card {
        grid-template-columns:1fr; gap:40px;
      }
      .creator-avatar-col { flex-direction:row; align-items:center; flex-wrap:wrap; }
      .creator-dev-badge { flex:1; min-width:200px; }
    }
    @media (max-width:480px) {
      .creator-avatar-col { flex-direction:column; }
    }

    /* =============================================
       COMING SOON
    ============================================= */
    .coming-wrap { padding:100px 32px; text-align:center; }
    .coming-wrap h2 {
      font-family:'Playfair Display', serif;
      font-size:clamp(2rem,3.5vw,2.8rem); font-weight:700; margin-bottom:16px;
    }
    .coming-sub {
      color:var(--text-2); font-size:1rem; margin-bottom:52px;
      max-width:460px; margin-left:auto; margin-right:auto;
      margin-top:0; line-height:1.7;
    }
    .songs-grid {
      display:grid; grid-template-columns:repeat(3,1fr);
      gap:14px; max-width:840px; margin:0 auto;
    }
    .song-card {
      background:var(--bg-card); border:1px solid var(--border);
      border-radius:var(--r-md); padding:22px 18px;
      display:flex; align-items:center; gap:12px;
      font-size:.9rem; font-weight:500; color:var(--text-2);
      transition:border-color .2s, color .2s, transform .2s;
    }
    .song-card:hover {
      border-color:rgba(139,92,246,.45); color:var(--text);
      transform:translateY(-3px);
    }
    .song-icon { font-size:1.3rem; }

    /* =============================================
       CTA
    ============================================= */
    .cta-wrap {
      padding:120px 32px; text-align:center;
      position:relative; overflow:hidden;
    }
    .cta-wrap::before {
      content:''; position:absolute; inset:0; pointer-events:none;
      background:radial-gradient(ellipse 70% 80% at 50% 50%, rgba(139,92,246,.12) 0%, transparent 70%);
    }
    .cta-wrap h2 {
      font-family:'Playfair Display', serif;
      font-size:clamp(2.2rem,4vw,3.5rem); font-weight:700;
      margin-bottom:20px; position:relative;
    }
    .cta-wrap p { color:var(--text-2); font-size:1rem; margin-bottom:40px; position:relative; }
    .cta-wrap .btn-primary { position:relative; font-size:1rem; padding:16px 38px; }

    /* =============================================
       FOOTER
    ============================================= */
    footer {
      background:var(--bg-surface);
      border-top:1px solid var(--border);
      padding:52px 32px; text-align:center;
    }
    .footer-brand {
      display:flex; align-items:center; justify-content:center;
      gap:10px; margin-bottom:20px;
    }
    .footer-brand img { width:28px; height:28px; border-radius:7px; object-fit:cover; }
    .footer-brand span {
      font-family:'Playfair Display', serif; font-size:1.1rem; color:var(--text);
    }
    footer p { font-size:.8rem; color:var(--text-3); line-height:1.7; }

    /* =============================================
       SCROLL REVEAL
    ============================================= */
    .reveal {
      opacity:0; transform:translateY(28px);
      transition:opacity .7s ease, transform .7s ease;
    }
    .reveal.visible { opacity:1; transform:none; }

    /* =============================================
       RESPONSIVE
    ============================================= */
    @media (max-width:960px) {
      .diff-grid { grid-template-columns:repeat(2,1fr); }
    }
    @media (max-width:768px) {
      .navbar { padding:14px 20px; }
      .nav-links { display:none; }
      .feature-row {
        grid-template-columns:1fr; gap:32px; padding:40px 20px;
      }
      .songs-grid { grid-template-columns:1fr; }
      .stat-item + .stat-item { border-left:none; border-top:1px solid var(--border); padding-top:24px; margin-top:20px; }
      .stats-inner { flex-direction:column; align-items:center; }
    }
    @media (max-width:480px) {
      .container, .diff-wrap, .coming-wrap, .intro, .cta-wrap { padding-left:16px; padding-right:16px; }
      .diff-grid { grid-template-columns:repeat(2,1fr); }
    }
    @media (prefers-reduced-motion:reduce) {
      *, *::before, *::after { transition:none !important; animation:none !important; }
      html { scroll-behavior:auto; }
      .reveal { opacity:1; transform:none; }
    }