:root{
  color-scheme:dark;
  --page-bg:#02040b;
  --text:#fff;
  --muted:#a8adbc;
  --purple:#ad19ff;
  --violet:#7548ff;
    --gutter:40px;
}
*{box-sizing:border-box}
html{min-width:320px;background:var(--page-bg);overflow-x:hidden}
body{
  margin:0;
  min-width:320px;
  min-height:100svh;
  overflow-x:hidden;
  background:var(--page-bg);
  color:var(--text);
  font-family:Inter,"Noto Sans Thai","Segoe UI",system-ui,-apple-system,sans-serif;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img{display:block;max-width:100%}

.home-page{
  position:relative;
  isolation:isolate;
  min-height:max(720px,100svh);
  overflow:hidden;
  background:#050714;
}

/* Single visual source: user-provided background.png. */
.hero-visuals{
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  overflow:hidden;
  background-image:url("../assets/home/background.png");
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center top;
}
.hero-visuals::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(4,6,18,.28) 0%,rgba(4,6,18,.16) 28%,rgba(4,6,18,0) 55%),
    linear-gradient(180deg,rgba(4,6,18,.04),rgba(4,6,18,.06));
}

/* Header uses grid/flex instead of x/y coordinates. */
.site-header{
  position:relative;
  z-index:20;
  padding-top:18px;
}
.header-inner{
  width:calc(100% - (var(--gutter) * 2));
  min-height:62px;
  margin-inline:auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:start;
  gap:24px;
}
.brand{
  justify-self:start;
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding-top:10px;
  font-size:22px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}
.brand img{width:38px;height:38px;border-radius:50%;object-fit:cover}
.main-nav{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:clamp(28px,3.25vw,47px);
  padding-top:19px;
}
.main-nav a{
  position:relative;
  padding-bottom:12px;
  color:#c4c7d5;
  font-size:13px;
  font-weight:400;
  line-height:1;
  white-space:nowrap;
}
.main-nav a.active{color:#fff;font-weight:600}
.main-nav a.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  border-radius:2px;
  background:#9e57ff;
}
.header-actions{
  justify-self:end;
  display:flex;
  gap:19px;
  padding-top:12px;
}
.header-btn{
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  font-size:13px;
  font-weight:600;
}
.header-login{
  width:118px;
  border:1px solid #3a355f;
  background:rgba(10,14,29,.78);
}
.header-start{
  width:128px;
  border:1px solid #a66aff;
  background:linear-gradient(90deg,var(--purple),var(--violet));
}

/* Main layout is responsive flow. */
.hero{
  position:relative;
  z-index:2;
  min-height:calc(max(720px,100svh) - 80px);
}
.hero-inner{
  width:calc(100% - (var(--gutter) * 2));
  margin-inline:auto;
}
.hero-copy{
  width:min(560px,44vw);
  padding-top:clamp(92px,11.8vh,110px);
  padding-left:40px;
}
.hero-title{
  margin:0;
  color:#f7f4ff;
  font-size:clamp(58px,5vw,72px);
  font-weight:700;
  line-height:.98;
  letter-spacing:-.035em;
}
.hero-subtitle{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin:12px 0 0;
  white-space:nowrap;
  font-size:clamp(28px,2.36vw,34px);
  font-weight:700;
  line-height:1.08;
}
.hero-subtitle .accent{color:#d980ff}
.hero-description{
  margin:14px 0 0;
  color:#d1d2de;
  font-size:clamp(15px,1.18vw,17px);
  font-weight:400;
  line-height:1.58;
}
.hero-description span{display:block}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:17px;
  margin-top:46px;
}
.cta{
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  font-size:14px;
  font-weight:600;
}
.cta.primary{
  width:195px;
  border:1px solid rgba(166,106,255,.9);
  background:linear-gradient(90deg,var(--purple),var(--violet));
}
.cta.secondary{
  width:165px;
  border:1px solid rgba(58,53,95,.9);
  background:rgba(10,14,29,.78);
}
.stats{
  display:grid;
  grid-template-columns:repeat(4,125px);
  gap:20px;
  margin-top:88px;
}
.stat{min-width:0}
.stat strong{
  display:block;
  font-size:26px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}
.stat span{
  display:block;
  margin-top:12px;
  color:var(--muted);
  font-size:12px;
  line-height:1.2;
  white-space:nowrap;
}

/* Floating player remains positioned because it is a floating design element. */
.player{
  position:absolute;
  right:clamp(40px,5vw,96px);
  bottom:clamp(30px,5.8vh,64px);
  width:clamp(420px,33.7vw,485px);
  height:155px;
  overflow:hidden;
  border:1px solid rgba(120,82,206,.85);
  border-radius:14px;
  background:rgba(9,13,29,.88);
  box-shadow:0 18px 50px rgba(0,0,0,.28);
  backdrop-filter:blur(16px);
}
.player-cover{
  position:absolute;
  left:15px;
  top:13px;
  width:62px;
  height:62px;
  overflow:hidden;
  border-radius:8px;
}
.player-cover img{width:100%;height:100%;object-fit:cover}
.player-eyebrow{position:absolute;left:91px;top:14px;margin:0;color:#8f95a8;font-size:9px}
.player-track{position:absolute;left:91px;top:31px;margin:0;font-size:15px;font-weight:600}
.player-artist{position:absolute;left:91px;top:53px;margin:0;color:#c3c7d2;font-size:11px}
.wave{
  position:absolute;
  left:314px;
  top:26px;
  width:128px;
  height:44px;
  display:flex;
  align-items:flex-end;
  gap:2px;
}
.wave i{
  flex:0 0 2px;
  border-radius:1px;
  background:#ef5dc8;
}
.wave i:nth-child(3n+1){background:#d77cff}
.player-progress{
  position:absolute;
  left:15px;
  right:16px;
  top:87px;
  height:4px;
  overflow:hidden;
  border-radius:2px;
  background:#2b3047;
}
.player-progress::after{
  content:"";
  display:block;
  width:45.25%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#eb65d7,#9657ff);
}
.player-controls{
  position:absolute;
  left:20px;
  right:20px;
  bottom:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.control{
  margin:0;
  padding:0;
  border:0;
  background:none;
  color:#f1f2f7;
  font-size:16px;
  line-height:1;
}
.pause{
  position:relative;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
}
.pause img{position:absolute;inset:0;width:30px;height:30px}
.pause span{position:relative;z-index:1;color:#0a0c16;font-size:12px;font-weight:700}

/* Medium desktop/tablet */
@media (max-width:1180px){
  :root{--gutter:28px}
  .main-nav{gap:22px}
  .hero-copy{width:min(530px,52vw);padding-left:20px}
  .player{right:28px;width:430px}
  .stats{grid-template-columns:repeat(4,110px);gap:14px}
}

/* Mobile/tablet switches to a real mobile composition rather than scaling desktop. */
@media (max-width:820px){
  :root{--gutter:18px}
  .hero-visuals{
    background-image:url("../assets/home/background-MB.png");
    background-size:cover;
    background-position:center top;
  }
  .home-page{min-height:100svh}
  .header-inner{grid-template-columns:1fr auto}
  .main-nav,.header-login{display:none}
  .header-actions{grid-column:2;padding-top:10px}
  .header-start{width:112px}
  .hero{min-height:calc(100svh - 80px)}
  .hero-copy{
    width:min(100%,600px);
    padding-top:64px;
    padding-left:0;
  }
  .hero-title{font-size:clamp(48px,14vw,72px)}
  .hero-subtitle{
    display:block;
    white-space:normal;
    font-size:clamp(28px,8vw,38px);
  }
  .hero-subtitle .accent{display:block}
  .hero-description{font-size:15px;max-width:520px}
  .hero-actions{margin-top:30px}
  .stats{display:none}
  .player{display:none}
}

@media (max-width:480px){
  .brand{font-size:18px;gap:9px}
  .brand img{width:32px;height:32px}
  .header-start{width:100px;height:36px;font-size:12px}
  .hero-copy{padding-top:48px}
  .hero-actions{gap:10px}
  .cta.primary,.cta.secondary{width:auto;min-width:0;padding-inline:18px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}