:root{
    --bg: #0B0D0A;
    --bg-raised: #14170F;
    --bg-card: #171B12;
    --line: #2B3122;
    --text: #ECEEE6;
    --text-muted: #93998A;
    --accent: #94C63D;
    --accent-dim: #4C6B22;
    --accent-2: #B6B6B6;
    --focus: #94C63D;
  }
  :root:not([data-theme="light"]){
    --bg: #0B0D0A; --bg-raised:#14170F; --bg-card:#171B12; --line:#2B3122;
    --text:#ECEEE6; --text-muted:#93998A; --accent:#94C63D; --accent-dim:#4C6B22; --accent-2:#B6B6B6;
  }
  :root[data-theme="light"]{
    --bg: #0B0D0A; --bg-raised:#14170F; --bg-card:#171B12; --line:#2B3122;
    --text:#ECEEE6; --text-muted:#93998A; --accent:#94C63D; --accent-dim:#4C6B22; --accent-2:#B6B6B6;
  }
  @media (prefers-color-scheme: light){
    :root:not([data-theme="dark"]){
      --bg: #0B0D0A; --bg-raised:#14170F; --bg-card:#171B12; --line:#2B3122;
      --text:#ECEEE6; --text-muted:#93998A; --accent:#94C63D; --accent-dim:#4C6B22; --accent-2:#B6B6B6;
    }
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  ::selection{ background: var(--accent); color: #071410; }
  a{ color: inherit; }
  img{ max-width:100%; display:block; }
  :focus-visible{ outline: 2px solid var(--focus); outline-offset: 3px; }
  .wrap{ max-width: 1160px; margin: 0 auto; padding: 0 28px; }
  @media (max-width: 640px){ .wrap{ padding: 0 20px; } }

  .mono{ font-family:'IBM Plex Mono', monospace; }
  .display{ font-family:'Fraunces', serif; font-optical-sizing:auto; }

  /* ---------- NAV ---------- */
  header{
    position: sticky; top:0; z-index: 50;
    background: rgba(10,14,23,0.82);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  nav{
    display:flex; align-items:center; justify-content:space-between;
    padding: 18px 0;
  }
  .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
  .brand-mark{ width:34px; height:34px; flex-shrink:0; }
  .brand-name{ font-family:'Fraunces', serif; font-size: 1.15rem; letter-spacing: 0.01em; }
  .brand-name b{ color: var(--accent); font-weight:600; }
  .brand-sub{ font-size:0.68rem; color: var(--text-muted); font-family:'IBM Plex Mono',monospace; letter-spacing:0.06em; margin-top:1px; }

  .nav-links{ display:flex; gap: 34px; list-style:none; }
  .nav-links a{ text-decoration:none; color: var(--text-muted); font-size:0.94rem; transition: color .2s; }
  .nav-links a:hover{ color: var(--text); }
  .nav-cta{
    background: var(--accent); color:#07130F; padding: 10px 20px; border-radius: 3px;
    text-decoration:none; font-size:0.9rem; font-weight:600; transition: transform .15s, background .2s;
    white-space:nowrap;
  }
  .nav-cta:hover{ background:#6EF0D0; }
  .nav-toggle{ display:none; background:none; border:none; color:var(--text); font-size:1.6rem; cursor:pointer; }
  @media (max-width: 820px){
    .nav-links{ display:none; }
    .nav-toggle{ display:block; }
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    padding: 110px 0 90px;
    overflow:hidden;
    border-bottom: 1px solid var(--line);
  }
  .hero-waves{
    position:absolute; inset:0; z-index:0; opacity:0.55; pointer-events:none;
  }
  .hero-inner{ position:relative; z-index:1; max-width: 760px; margin:0 auto; text-align:center; }
  .hero-logo{ max-width: 420px; width: 78%; height:auto; margin: 0 auto 36px; }
  @media (max-width: 640px){ .hero-logo{ max-width: 280px; margin-bottom: 26px; } }
  .eyebrow-freq{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color: var(--accent);
    border:1px solid var(--accent-dim); padding: 6px 14px; border-radius: 20px;
    margin-bottom: 28px;
  }
  .eyebrow-freq .dot{ width:6px; height:6px; border-radius:50%; background: var(--accent); animation: pulse 1.8s ease-in-out infinite; }
  @keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(0.7);} }

  .hero h1{
    font-family:'Fraunces', serif; font-weight:500;
    font-size: clamp(2.4rem, 5.4vw, 4.1rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin-bottom: 26px;
  }
  .hero h1 .glow{ color: var(--accent); }
  .hero p.lede{
    font-size: 1.15rem; color: var(--text-muted); max-width: 560px; margin: 0 auto 40px;
  }
  .hero-ctas{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
  .btn-primary{
    background: var(--accent); color:#07130F; padding: 15px 30px; border-radius: 3px;
    text-decoration:none; font-weight:600; font-size:0.98rem; display:inline-block;
    transition: background .2s, transform .15s;
  }
  .btn-primary:hover{ background:#6EF0D0; transform: translateY(-1px); }
  .btn-secondary{
    border: 1px solid var(--line); color: var(--text); padding: 15px 30px; border-radius:3px;
    text-decoration:none; font-size:0.98rem; display:inline-block; transition: border-color .2s, background .2s;
  }
  .btn-secondary:hover{ border-color: var(--accent); background: var(--bg-raised); }

  .hero-stats{
    display:flex; justify-content:center; gap: 56px; margin-top: 76px; flex-wrap:wrap;
  }
  .stat{ text-align:center; }
  .stat .num{ font-family:'IBM Plex Mono', monospace; font-size:1.7rem; color: var(--accent); }
  .stat .lbl{ font-size:0.82rem; color: var(--text-muted); margin-top: 4px; }

  /* ---------- SECTION HEADERS ---------- */
  .section{ padding: 100px 0; border-bottom: 1px solid var(--line); }
  .section-head{ max-width: 620px; margin-bottom: 56px; }
  .section-head h2{
    font-family:'Fraunces', serif; font-weight:500; font-size: clamp(1.8rem, 3vw, 2.5rem);
    margin-bottom: 16px; line-height:1.15;
  }
  .section-head p{ color: var(--text-muted); font-size: 1.03rem; }

  /* ---------- ABOUT / CONCEPT ---------- */
  .concept-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items:center; }
  @media (max-width: 860px){ .concept-grid{ grid-template-columns: 1fr; gap:40px; } }
  .concept-text p{ color: var(--text-muted); margin-bottom: 18px; font-size:1.02rem; }
  .concept-text strong{ color: var(--text); font-weight:600; }
  .freq-orb{
    position:relative; aspect-ratio: 1/1; border-radius:50%;
    background: radial-gradient(circle at 32% 28%, rgba(85,230,193,0.16), transparent 60%),
                radial-gradient(circle at 68% 72%, rgba(183,156,255,0.14), transparent 60%),
                var(--bg-card);
    border: 1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
  }
  .freq-orb svg{ width:76%; height:76%; }
  .freq-orb-num{
    position:absolute; bottom: 14%; left:50%; transform:translateX(-50%);
    font-family:'IBM Plex Mono', monospace; color: var(--accent); font-size:0.85rem;
    letter-spacing:0.08em;
  }

  /* ---------- LIBRARY / TRACKLIST ---------- */
  .category-nav{
    display:flex; flex-wrap:wrap; gap:10px; margin-bottom:48px;
    padding-bottom:28px; border-bottom:1px solid var(--line);
  }
  .category-nav a{
    font-family:'IBM Plex Mono', monospace; font-size:0.8rem; color: var(--text-muted);
    text-decoration:none; border:1px solid var(--line); padding:7px 14px; border-radius:16px;
    transition: border-color .2s, color .2s;
  }
  .category-nav a:hover{ border-color: var(--accent); color: var(--text); }
  .category-block{ margin-bottom: 52px; scroll-margin-top: 90px; }
  .category-block:last-child{ margin-bottom:0; }
  .category-head{
    display:flex; align-items:baseline; gap:14px; margin-bottom:18px;
  }
  .category-head h3{
    font-family:'Fraunces', serif; font-weight:500; font-size:1.4rem;
  }
  .category-head span{
    font-family:'IBM Plex Mono', monospace; font-size:0.76rem; color: var(--accent);
    border:1px solid var(--accent-dim); padding:3px 10px; border-radius:12px;
  }
  .tracklist{ display:flex; flex-direction:column; border-top:1px solid var(--line); }

  /* ---------- MEGA LIBRARY (11 categories x 10 subcategories) ---------- */
  .library-index-grid{
    display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:14px;
  }
  .library-index-card{
    display:flex; flex-direction:column; gap:6px; text-decoration:none;
    background: var(--bg-card); border:1px solid var(--line); border-radius:4px;
    padding: 20px 18px; transition: border-color .2s, transform .15s;
  }
  .library-index-card:hover{ border-color: var(--accent); transform: translateY(-2px); }
  .lic-num{ font-family:'IBM Plex Mono', monospace; color: var(--accent); font-size:0.78rem; }
  .lic-title{ font-family:'Fraunces', serif; font-weight:500; font-size:1.08rem; color: var(--text); }
  .lic-sub{ font-size:0.82rem; color: var(--text-muted); }

  .category-main{ padding-top: 70px; }
  .subcat-nav{
    display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px;
  }
  .subcat-nav a{
    font-family:'IBM Plex Mono', monospace; font-size:0.74rem; color: var(--text-muted);
    text-decoration:none; border:1px solid var(--line); padding:5px 12px; border-radius:14px;
    transition: border-color .2s, color .2s;
  }
  .subcat-nav a:hover{ border-color: var(--accent); color: var(--text); }

  .subcat-list{ display:flex; flex-direction:column; gap:10px; }
  .subcat{
    border:1px solid var(--line); border-radius:4px; background: var(--bg-raised);
    scroll-margin-top: 90px; overflow:hidden;
  }
  .subcat summary{
    cursor:pointer; list-style:none; padding:16px 20px; display:flex; align-items:center;
    justify-content:space-between; font-family:'Fraunces', serif; font-weight:500; font-size:1.02rem;
  }
  .subcat summary::-webkit-details-marker{ display:none; }
  .subcat summary::after{
    content:"+"; font-family:'IBM Plex Mono', monospace; color: var(--accent); font-size:1.1rem; margin-left:12px;
  }
  .subcat[open] summary::after{ content:"–"; }
  .subcat-count{
    font-family:'IBM Plex Mono', monospace; font-size:0.7rem; color: var(--text-muted); font-weight:400;
  }
  .mini-list{ border-top:1px solid var(--line); }
  .mini-item{
    display:grid; grid-template-columns: 28px 1fr auto; align-items:center; gap:14px;
    padding: 12px 20px; border-bottom:1px solid var(--line); font-size:0.92rem;
  }
  .mini-item:last-child{ border-bottom:none; }
  .mini-idx{ font-family:'IBM Plex Mono', monospace; color: var(--text-muted); font-size:0.78rem; }
  .mini-name{ color: var(--text); }
  .mini-tag{ font-size:0.72rem; color: var(--text-muted); }
  .mini-link{
    font-family:'IBM Plex Mono', monospace; font-size:0.74rem; color: var(--accent);
    text-decoration:none; white-space:nowrap;
  }
  .mini-link:hover{ text-decoration:underline; }
  .mini-item-service{ grid-template-columns: 1fr; row-gap:6px; }
  .mini-desc{ color: var(--text-muted); font-size:0.85rem; }
  @media (max-width: 640px){
    .mini-item{ grid-template-columns: 1fr; row-gap:4px; }
    .mini-idx{ display:none; }
  }
  .track{
    display:grid; grid-template-columns: 44px 1fr auto auto; align-items:center; gap: 22px;
    padding: 22px 18px; border-bottom: 1px solid var(--line);
    transition: background .18s;
  }
  .track:hover{ background: var(--bg-raised); }
  .track-idx{ font-family:'IBM Plex Mono', monospace; color: var(--text-muted); font-size:0.85rem; }
  .track-info h3{ font-family:'Fraunces', serif; font-weight:500; font-size:1.12rem; margin-bottom:4px; }
  .track-info span{ font-size:0.86rem; color: var(--text-muted); }
  .track-wave{ display:flex; align-items:flex-end; gap:3px; height:26px; }
  .track-wave i{
    display:block; width:3px; background: var(--accent-dim); border-radius:2px;
    animation: bar 1.4s ease-in-out infinite;
  }
  .track:hover .track-wave i{ background: var(--accent); }
  .track-wave i:nth-child(1){ height:40%; animation-delay:0s; }
  .track-wave i:nth-child(2){ height:80%; animation-delay:.15s; }
  .track-wave i:nth-child(3){ height:55%; animation-delay:.3s; }
  .track-wave i:nth-child(4){ height:95%; animation-delay:.45s; }
  .track-wave i:nth-child(5){ height:35%; animation-delay:.6s; }
  .track-wave i:nth-child(6){ height:70%; animation-delay:.75s; }
  @keyframes bar{ 0%,100%{ transform:scaleY(0.4);} 50%{ transform:scaleY(1);} }
  .track-link{
    font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color: var(--accent);
    text-decoration:none; border:1px solid var(--accent-dim); padding:8px 14px; border-radius:3px;
    white-space:nowrap; transition: background .2s, color .2s;
  }
  .track-link:hover{ background: var(--accent); color:#07130F; }
  .featured-badge{
    display:inline-block; margin-left:10px; font-size:0.68rem; font-family:'IBM Plex Mono',monospace;
    color:#07130F; background: var(--accent); padding:2px 8px; border-radius:10px; vertical-align:middle;
  }
  @media (max-width: 700px){
    .track{ grid-template-columns: 32px 1fr; row-gap:14px; }
    .track-wave, .track-link{ grid-column: 2; }
  }

  /* ---------- HOW IT WORKS ---------- */
  .steps{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
  @media (max-width: 820px){ .steps{ grid-template-columns:1fr; } }
  .step{ border-top: 2px solid var(--accent-dim); padding-top: 22px; }
  .step-n{ font-family:'IBM Plex Mono', monospace; color: var(--accent); font-size:0.85rem; margin-bottom:14px; }
  .step h3{ font-family:'Fraunces', serif; font-weight:500; font-size:1.25rem; margin-bottom:12px; }
  .step p{ color: var(--text-muted); font-size:0.98rem; }

  /* ---------- SEO CONTENT BLOCK ---------- */
  .seo-block{ display:grid; grid-template-columns: 1fr 1fr; gap: 64px; }
  @media (max-width: 860px){ .seo-block{ grid-template-columns:1fr; gap:36px; } }
  .seo-block h3{ font-family:'Fraunces', serif; font-weight:500; font-size:1.2rem; margin-bottom:14px; }
  .seo-block p{ color: var(--text-muted); font-size:0.98rem; margin-bottom:14px; }
  .tag-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
  .tag{
    font-family:'IBM Plex Mono', monospace; font-size:0.76rem; color: var(--text-muted);
    border:1px solid var(--line); padding:6px 12px; border-radius:14px;
  }

  /* ---------- CTA BAND ---------- */
  .cta-band{
    padding: 90px 0; text-align:center; position:relative; overflow:hidden;
    background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(85,230,193,0.08), transparent 70%);
  }
  .cta-band h2{
    font-family:'Fraunces', serif; font-weight:500; font-size: clamp(1.8rem, 3.4vw, 2.7rem);
    margin-bottom: 20px; max-width:640px; margin-left:auto; margin-right:auto;
  }
  .cta-band p{ color: var(--text-muted); margin-bottom: 34px; }

  /* ---------- FOOTER ---------- */
  footer{ padding: 56px 0 40px; }
  .footer-grid{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:40px; }
  .footer-brand p{ color: var(--text-muted); font-size:0.9rem; max-width:280px; margin-top:12px; }
  .footer-cols{ display:flex; gap:64px; flex-wrap:wrap; }
  .footer-col h4{ font-size:0.82rem; color: var(--text-muted); font-family:'IBM Plex Mono',monospace; margin-bottom:14px; font-weight:400;}
  .footer-col a{ display:block; text-decoration:none; color: var(--text); font-size:0.92rem; margin-bottom:10px; opacity:0.85; }
  .footer-col a:hover{ opacity:1; color: var(--accent); }
  .footer-bottom{
    border-top:1px solid var(--line); padding-top:24px; display:flex; justify-content:space-between;
    color: var(--text-muted); font-size:0.82rem; flex-wrap:wrap; gap:10px;
  }

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

  /* ---------- QUOTE BAND ---------- */
  .quote-band{ padding:70px 0; text-align:center; border-bottom:1px solid var(--line); background:var(--bg-raised); }
  .quote-tabs{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:28px; }
  .quote-tab{ background:transparent; color:var(--text-muted); border:1px solid var(--line); border-radius:999px; padding:7px 18px; font:inherit; font-size:.88rem; cursor:pointer; }
  .quote-tab[aria-selected="true"]{ color:#07130F; background:var(--accent); border-color:var(--accent); }
  .quote-tab:focus-visible, .quote-copy:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
  .quote-text{ font-family:'Fraunces', serif; font-size:clamp(1.25rem,2.6vw,1.8rem); line-height:1.5; max-width:760px; margin:0 auto 18px; min-height:3.2em; transition:opacity .4s; }
  .quote-text.fade{ opacity:0; }
  .quote-copy{ background:none; border:1px solid var(--line); color:var(--text-muted); padding:6px 16px; border-radius:3px; font:inherit; font-size:.82rem; cursor:pointer; }
  .quote-note{ color:var(--text-muted); font-size:.78rem; margin-top:14px; }
  /* ---------- SERIES + ACCESS ---------- */
  .series-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin-bottom:40px; }
  .series-card{ background:var(--bg-card); border:1px solid var(--line); border-radius:4px; padding:22px 20px; }
  .series-card h3{ font-family:'Fraunces',serif; font-weight:500; font-size:1.15rem; margin-bottom:6px; }
  .series-card p{ color:var(--text-muted); font-size:.9rem; margin-bottom:12px; }
  .series-card ul{ list-style:none; font-size:.88rem; }
  .series-card li{ padding:6px 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:10px; }
  .series-card li span:first-child{ font-family:'IBM Plex Mono',monospace; color:var(--accent); }
  .soon{ display:inline-block; font-size:.72rem; letter-spacing:.06em; color:var(--text-muted); border:1px solid var(--line); border-radius:3px; padding:2px 8px; margin-left:8px; vertical-align:middle; }
  .access-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; }
  .access-card{ border:1px solid var(--line); border-radius:4px; padding:22px 20px; background:var(--bg-raised); }
  .access-card.featured{ border-color:var(--accent-dim); }
  .access-card h3{ font-family:'Fraunces',serif; font-weight:500; font-size:1.15rem; margin-bottom:8px; }
  .access-card p{ color:var(--text-muted); font-size:.9rem; margin-bottom:14px; }
  .timer-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
  .timer-chips span{ font-size:.78rem; border:1px solid var(--line); border-radius:999px; padding:3px 12px; color:var(--text-muted); }
  .disclaimer{ margin-top:28px; color:var(--text-muted); font-size:.82rem; border-left:2px solid var(--accent-dim); padding-left:14px; }

/* ===== หน้าใหม่ / ฟอร์ม ===== */
.page-head{padding:56px 0 8px}.page-head h1{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.25;margin-bottom:10px}
.page-head p{color:var(--text-muted);max-width:720px}
.cardgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:24px 0}
.card{background:var(--bg-card);border:1px solid var(--line);border-radius:4px;padding:20px}
.card h3{font-family:'Fraunces',serif;font-weight:500;font-size:1.1rem;margin-bottom:6px}.card p{color:var(--text-muted);font-size:.9rem}
.card.ph{border-style:dashed;border-color:var(--accent-dim)}
.prod-img{aspect-ratio:4/3;background:var(--bg-raised);border-radius:3px;display:grid;place-items:center;color:var(--text-muted);font-size:.8rem;margin-bottom:12px}
.video{aspect-ratio:16/9;background:var(--bg-raised);border-radius:3px;display:grid;place-items:center;color:var(--text-muted);font-size:.85rem;margin-bottom:12px}.video iframe{width:100%;height:100%;border:0}
.form{display:grid;gap:14px;max-width:640px;margin-top:20px}.form label{display:grid;gap:6px;font-size:.9rem}
.form input,.form select,.form textarea{background:var(--bg-raised);color:var(--text);border:1px solid var(--line);border-radius:3px;padding:10px 12px;font:inherit}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.form .chk{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;color:var(--text-muted)}.form .chk input{margin-top:5px}
.form button{justify-self:start;cursor:pointer;font:inherit}.hp{display:none}
.notice{border-left:2px solid var(--accent-dim);padding-left:14px;color:var(--text-muted);font-size:.88rem;margin:18px 0}
.page-body h2{font-family:'Fraunces',serif;font-weight:500;font-size:1.5rem;margin:40px 0 8px}.page-body p,.page-body li{color:var(--text-muted)}.page-body ul{padding-left:20px}
@media(max-width:820px){header nav{flex-wrap:wrap;row-gap:10px}.nav-links{display:flex!important;order:3;width:100%;gap:18px;overflow-x:auto;white-space:nowrap}}

.wave .wave-body{padding:4px 20px 20px;border-top:1px solid var(--line)}.wave-desc{color:var(--text-muted);font-size:.9rem;margin:14px 0}
.wave .subcat{background:var(--bg-card)}.wave .subcat-nav{margin-bottom:16px}.wave-empty{color:var(--text-muted);font-size:.88rem;padding:6px 0}