/* ═══════════════════════════════════════════════
   FORTIS ENTERTAINMENT — STYLESHEET
   Palette: Deep Navy / Electric Cyan / Violet
   ═══════════════════════════════════════════════ */

:root {
  /* Core palette */
  --black:    #000000;
  --dark:     #050505;
  --dark2:    #0a0a0a;
  --dark3:    #0f0f0f;
  --card:     #080808;

  --cyan:     #00D4FF;
  --cyan2:    #00AADD;
  --violet:   #7B2FFF;
  --violet2:  #5B0FDF;
  --pink:     #FF3CAC;

  --white:    #FFFFFF;
  --w90:      rgba(255,255,255,.90);
  --w60:      rgba(255,255,255,.60);
  --w30:      rgba(255,255,255,.30);
  --w10:      rgba(255,255,255,.07);
  --w05:      rgba(255,255,255,.04);

  --grad:     linear-gradient(135deg, var(--cyan) 0%, var(--violet) 100%);
  --grad-r:   linear-gradient(135deg, var(--violet) 0%, var(--cyan) 100%);
  --grad-card:linear-gradient(145deg, #0a0a0a 0%, #101010 100%);

  --glow-c:   0 0 40px rgba(0,212,255,.25), 0 0 80px rgba(123,47,255,.15);
  --glow-v:   0 0 40px rgba(123,47,255,.3);
  --shadow:   0 8px 40px rgba(0,0,0,.5);

  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --ease: cubic-bezier(.4,0,.2,1);
  --spring: cubic-bezier(.16,1,.3,1);

  --font-body:    'Outfit', sans-serif;
  --font-head:    'Syne', sans-serif;
  --font-display: 'Bebas Neue', sans-serif;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
  line-height: 1.6;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
em { font-style: normal; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb { background: var(--grad); border-radius: 3px; }

/* ── Helpers ── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.section { padding: 110px 0; }
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section-tag {
  display: inline-block;
  font-family: var(--font-head);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(0,212,255,.08);
  border: 1px solid rgba(0,212,255,.2);
  padding: 6px 18px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 400;
  letter-spacing: .06em;
  line-height: 1.05;
  color: var(--white);
  margin-bottom: 0;
}
.section-header { text-align: center; margin-bottom: 64px; }
.section-header .section-title { margin-top: 0; }

/* ── Reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════ CURSOR ══════════ */
.cursor {
  position: fixed;
  width: 36px; height: 36px;
  border: 1px solid rgba(0,212,255,.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%,-50%);
  transition: transform .12s var(--ease), width .2s, height .2s, opacity .3s;
  mix-blend-mode: difference;
}
.cursor-dot {
  position: fixed;
  width: 6px; height: 6px;
  background: var(--cyan);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  transition: transform .05s;
}
body:not(:hover) .cursor,
body:not(:hover) .cursor-dot { opacity: 0; }

/* ══════════ LOADER ══════════ */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.loader-noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: .5;
}
.loader-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.loader-lines span {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent 0%, rgba(0,212,255,.12) 50%, transparent 100%);
  animation: lline 2.5s var(--ease) infinite;
}
.loader-lines span:nth-child(1){left:12%;animation-delay:0s}
.loader-lines span:nth-child(2){left:25%;animation-delay:.3s}
.loader-lines span:nth-child(3){left:38%;animation-delay:.6s}
.loader-lines span:nth-child(4){left:62%;animation-delay:.5s}
.loader-lines span:nth-child(5){left:75%;animation-delay:.2s}
.loader-lines span:nth-child(6){left:88%;animation-delay:.7s}
@keyframes lline {
  0%,100%{opacity:0;transform:scaleY(0);transform-origin:top}
  50%{opacity:1;transform:scaleY(1)}
}
.loader-center {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
/* Vinyl in loader */
.loader-vinyl {
  width: 100px; height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle at 50%, #141414 30%, #000000 100%);
  border: 2px solid rgba(0,212,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: lvspin 3s linear infinite;
  box-shadow: 0 0 40px rgba(0,212,255,.3), 0 0 80px rgba(123,47,255,.15);
}
@keyframes lvspin { to { transform: rotate(360deg); } }
.loader-vinyl-inner {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0,212,255,.1);
}
.loader-vinyl-inner::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 1px solid rgba(123,47,255,.1);
}
.loader-vinyl-dot {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--grad);
  position: relative;
  z-index: 1;
  box-shadow: 0 0 16px rgba(0,212,255,.6);
}

.loader-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.loader-fortis {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 10vw, 5rem);
  font-weight: 400;
  letter-spacing: .3em;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: brandIn .9s var(--spring) .2s both;
  filter: drop-shadow(0 0 20px rgba(0,212,255,.4));
}
.loader-ent {
  font-family: var(--font-display);
  font-size: clamp(.9rem, 3vw, 1.4rem);
  font-weight: 400;
  letter-spacing: .5em;
  color: var(--w60);
  animation: brandIn .9s var(--spring) .4s both;
}
@keyframes brandIn {
  from { opacity:0; transform: translateY(24px); letter-spacing: .6em; }
  to   { opacity:1; transform: translateY(0); }
}

.loader-progress-wrap {
  width: clamp(180px, 35vw, 280px);
  height: 2px;
  background: var(--w10);
  border-radius: 999px;
  overflow: hidden;
}
.loader-progress {
  height: 100%;
  width: 0%;
  background: var(--grad);
  border-radius: 999px;
  transition: width .04s linear;
  box-shadow: 0 0 10px var(--cyan);
}
.loader-sub {
  font-family: var(--font-head);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--w30);
  animation: brandIn .8s var(--ease) .6s both;
}
.loader.exit {
  animation: loaderOut .9s var(--ease) forwards;
}
@keyframes loaderOut {
  0%  { opacity:1; transform: scale(1); clip-path: inset(0 0 0 0); }
  100%{ opacity:0; transform: scale(1.06); clip-path: inset(0 50% 0 50%); }
}

/* ══════════ NAVBAR ══════════ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 22px 0;
  transition: all .35s var(--ease);
}
.nav.stuck {
  padding: 14px 0;
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--w10);
}
.nav-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 48px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: .14em;
  white-space: nowrap;
}
/* ── Brand box (logo navbar & footer) ── */
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.brand-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,212,255,.06);
  border: 1px solid rgba(0,212,255,.2);
  border-radius: 10px;
  padding: 7px 14px 7px 10px;
  transition: all .25s;
}
.brand-box:hover {
  background: rgba(0,212,255,.1);
  border-color: rgba(0,212,255,.4);
  box-shadow: 0 0 20px rgba(0,212,255,.12);
}
.brand-svg {
  width: 22px; height: 22px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(0,212,255,.5));
}
.brand-text-wrap {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 2px;
}
.brand-top {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: .22em;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.brand-bot {
  font-family: var(--font-head);
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--w30);
}

.brand-icon {
  font-size: 1.5rem;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.brand-accent { color: var(--cyan); }
.nav-menu {
  display: flex;
  align-items: center;
  gap: 32px;
  flex: 1;
}
.nav-menu a {
  font-family: var(--font-head);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--w60);
  transition: color .25s;
  position: relative;
}
.nav-menu a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1px;
  background: var(--grad);
  transition: width .3s var(--ease);
}
.nav-menu a:hover { color: var(--white); }
.nav-menu a:hover::after { width: 100%; }

.nav-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--w10);
  border: 1px solid var(--w10);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  color: var(--w60);
  font-size: .8rem;
  font-weight: 700;
  font-family: var(--font-head);
  letter-spacing: .06em;
  transition: all .25s;
}
.lang-btn:hover { border-color: var(--cyan); color: var(--white); }
.nav-cta {
  background: var(--grad);
  color: var(--white);
  padding: 10px 22px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: all .25s;
  white-space: nowrap;
}
.nav-cta:hover { opacity: .85; transform: translateY(-1px); box-shadow: var(--glow-c); }
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.burger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: all .3s var(--ease);
}

/* ══════════ HERO ══════════ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 130px 0 100px;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .3;
}
.g1 { width: 600px; height: 600px; background: var(--cyan2); top: -150px; left: -150px; animation: gf 10s ease-in-out infinite alternate; }
.g2 { width: 500px; height: 500px; background: var(--violet); top: 100px; right: -100px; animation: gf 12s ease-in-out infinite alternate-reverse; }
.g3 { width: 350px; height: 350px; background: var(--pink); bottom: -80px; left: 40%; opacity: .15; animation: gf 8s ease-in-out infinite alternate; }
@keyframes gf {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(30px,-30px) scale(1.12); }
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,212,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,.03) 1px, transparent 1px);
  background-size: 64px 64px;
}
/* Vinyl bg rings */
.hero-vinyl-bg { position: absolute; right: -60px; top: 50%; transform: translateY(-50%); z-index: 0; }
.hv-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0,212,255,.06);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}
.hv-r1 { width: 700px; height: 700px; animation: hvSpin 40s linear infinite; }
.hv-r2 { width: 520px; height: 520px; animation: hvSpin 30s linear infinite reverse; border-color: rgba(123,47,255,.06); }
.hv-r3 { width: 360px; height: 360px; animation: hvSpin 20s linear infinite; }
@keyframes hvSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }

.hero-body {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
  width: 100%;
}

/* Hero left */
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,212,255,.08);
  border: 1px solid rgba(0,212,255,.25);
  padding: 8px 18px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 20px;
}
.pill-dot {
  width: 7px; height: 7px;
  background: var(--cyan);
  border-radius: 50%;
  animation: pdot 2s ease-in-out infinite;
  box-shadow: 0 0 8px var(--cyan);
}
@keyframes pdot { 0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.4)} }

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 7vw, 6rem);
  font-weight: 400;
  line-height: .98;
  letter-spacing: .04em;
  color: var(--white);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.ht-line { display: block; }
.ht-accent {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 20px rgba(0,212,255,.3));
}
.hero-desc {
  font-size: 1rem;
  color: var(--w60);
  max-width: 460px;
  margin-bottom: 36px;
  line-height: 1.75;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 52px; }
.btn-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--grad);
  color: var(--white);
  padding: 14px 28px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: all .25s var(--ease);
  position: relative;
  overflow: hidden;
}
.btn-main::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.12);
  opacity: 0;
  transition: opacity .25s;
}
.btn-main:hover { transform: translateY(-2px); box-shadow: var(--glow-c); }
.btn-main:hover::before { opacity: 1; }
.btn-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--w60);
  padding: 14px 28px;
  border-radius: 999px;
  border: 1px solid var(--w30);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: all .25s var(--ease);
}
.btn-line:hover { border-color: var(--cyan); color: var(--white); transform: translateY(-2px); }

.hero-stats { display: flex; align-items: center; gap: 28px; }
.hs-item { text-align: center; }
.hs-num {
  font-family: var(--font-display);
  font-size: 2.2rem;
  letter-spacing: .05em;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hs-plus {
  font-family: var(--font-display);
  font-size: 1.5rem;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hs-label {
  display: block;
  font-size: .7rem;
  font-family: var(--font-head);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--w30);
  margin-top: 3px;
}
.hs-div { width: 1px; height: 36px; background: var(--w10); }

/* Hero right — Release frame */
.hero-right { position: relative; display: flex; justify-content: center; align-items: center; }
.release-frame { position: relative; width: 320px; height: 400px; }

.release-card {
  position: absolute;
  background: var(--grad-card);
  border: 1px solid rgba(0,212,255,.15);
  border-radius: var(--r-lg);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow);
}
.rc-main {
  bottom: 0; left: 0; right: 0;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 2;
  animation: rfloat 5s ease-in-out infinite;
}
@keyframes rfloat { 0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)} }

.rc-cover {
  width: 72px; height: 72px;
  border-radius: 10px;
  background: radial-gradient(circle at 40% 40%, #1e1e50, #080820);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid rgba(0,212,255,.2);
}
.rc-vinyl {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle, #141414 30%, #000000 100%);
  border: 1px solid rgba(0,212,255,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: lvspin 4s linear infinite;
  position: relative;
}
.rc-vinyl-groove {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px solid rgba(0,212,255,.08);
}
.rc-vinyl-center {
  font-size: .9rem;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  z-index: 1;
}

.rc-info { flex: 1; min-width: 0; }
.rc-tag {
  font-family: var(--font-head);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(0,212,255,.1);
  padding: 2px 10px;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 6px;
}
.rc-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: .08em;
  color: var(--white);
}
.rc-artist { font-size: .75rem; color: var(--w60); margin-top: 2px; }
.rc-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 8px;
  height: 20px;
}
.rc-wave span {
  width: 3px;
  background: var(--grad);
  border-radius: 2px;
  animation: rwave 1s ease-in-out infinite;
}
.rc-wave span:nth-child(1){height:8px;animation-delay:0s}
.rc-wave span:nth-child(2){height:14px;animation-delay:.1s}
.rc-wave span:nth-child(3){height:18px;animation-delay:.2s}
.rc-wave span:nth-child(4){height:12px;animation-delay:.3s}
.rc-wave span:nth-child(5){height:20px;animation-delay:.4s}
.rc-wave span:nth-child(6){height:12px;animation-delay:.5s}
.rc-wave span:nth-child(7){height:18px;animation-delay:.4s}
.rc-wave span:nth-child(8){height:14px;animation-delay:.3s}
.rc-wave span:nth-child(9){height:8px;animation-delay:.2s}
.rc-wave span:nth-child(10){height:10px;animation-delay:.1s}
@keyframes rwave { 0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.6)} }

/* Platform badges */
.plat-badge {
  position: absolute;
  background: rgba(0,0,0,.92);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 8px 14px;
  font-size: .72rem;
  font-weight: 700;
  font-family: var(--font-head);
  display: flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(16px);
  color: var(--w90);
  white-space: nowrap;
  animation: pb 4s ease-in-out infinite;
  letter-spacing: .04em;
}
.plat-svg {
  width: 18px; height: 18px;
  flex-shrink: 0;
}
.pb-1 { top: 8%;  left: -18%;  animation-delay: 0s; }
.pb-2 { top: 22%; right: -22%; animation-delay: -.8s; }
.pb-3 { bottom: 36%; left: -24%; animation-delay: -1.6s; }
.pb-4 { bottom: 20%; right: -16%;animation-delay: -2.4s; }
@keyframes pb { 0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)} }

/* Mini stats */
.release-stat {
  position: absolute;
  background: rgba(15,15,42,.92);
  border: 1px solid rgba(123,47,255,.25);
  border-radius: 12px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  backdrop-filter: blur(12px);
  animation: pb 4s ease-in-out infinite;
}
.rs-1 { top: 6%;   right: -8%;  animation-delay: -.4s; }
.rs-2 { top: 40%;  left: -16%; animation-delay: -1.2s; }
.rs-icon { font-size: 1.2rem; }
.rs-num {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: .06em;
  color: var(--cyan);
}
.rs-lbl { font-size: .65rem; color: var(--w60); font-family: var(--font-head); letter-spacing: .08em; text-transform: uppercase; }

/* Scroll hint */
.scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--w30);
  font-family: var(--font-head);
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  z-index: 1;
}
.sh-line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, var(--cyan), transparent);
  animation: shpulse 2s ease-in-out infinite;
}
@keyframes shpulse { 0%,100%{opacity:.3}50%{opacity:1} }

/* ══════════ MARQUEE ══════════ */
.marquee-wrap {
  padding: 18px 0;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,.04), transparent);
  border-top: 1px solid var(--w10);
  border-bottom: 1px solid var(--w10);
  overflow: hidden;
}
.marquee-inner { display: flex; overflow: hidden; }
.marquee-track {
  display: flex;
  gap: 0;
  animation: mq 32s linear infinite;
  white-space: nowrap;
  flex-shrink: 0;
}
.mq-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 28px;
  font-family: var(--font-head);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--w40, rgba(255,255,255,.4));
  position: relative;
  transition: color .3s;
}
.mq-item:hover { color: var(--white); }
.mq-item::after {
  content: '';
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(0,212,255,.3);
}
.mq-item svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
  transition: filter .3s;
}
.mq-item:hover svg { filter: drop-shadow(0 0 4px currentColor); }
@keyframes mq { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ══════════ ABOUT ══════════ */
.about { background: var(--dark); }
.about-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.about-left .section-title { margin-bottom: 24px; }
.about-p { color: var(--w60); line-height: 1.8; margin-bottom: 16px; font-size: .95rem; }
.about-list { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.about-list li { display: flex; align-items: center; gap: 12px; color: var(--w90); font-size: .9rem; }
.al-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--grad);
  flex-shrink: 0;
  box-shadow: 0 0 8px var(--cyan);
}

/* Album stack card */
.about-card-wrap { display: flex; justify-content: center; }
.about-card {
  background: var(--grad-card);
  border: 1px solid rgba(0,212,255,.12);
  border-radius: var(--r-xl);
  padding: 40px 36px;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow);
}
.ac-glow {
  position: absolute;
  top: -60px; left: -60px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(0,212,255,.1), transparent 70%);
  animation: acgpulse 4s ease-in-out infinite alternate;
}
@keyframes acgpulse { 0%{opacity:.5}100%{opacity:1;transform:scale(1.2)} }

/* Album stack */
.album-stack {
  position: relative;
  height: 180px;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.album {
  position: absolute;
  border-radius: var(--r-md);
  border: 1px solid rgba(0,212,255,.12);
}
.a3 { width: 120px; height: 120px; background: linear-gradient(135deg,#1a0a3e,#0a0a2e); transform: rotate(-12deg) translate(-20px,10px); opacity: .5; }
.a2 { width: 130px; height: 130px; background: linear-gradient(135deg,#0a1e3e,#0a0a2e); transform: rotate(-5deg) translate(10px,5px); opacity: .7; }
.a1 {
  width: 150px; height: 150px;
  background: radial-gradient(circle at 40% 40%, #1e1040, #000000);
  transform: rotate(3deg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  box-shadow: 0 0 30px rgba(0,212,255,.2);
}
.a1-vinyl {
  width: 110px; height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, #141414 30%, #000000 100%);
  border: 1px solid rgba(0,212,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: lvspin 6s linear infinite;
  position: relative;
}
.a1-v-inner {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0,212,255,.08);
}
.a1-v-dot {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--grad);
  position: relative;
  z-index: 1;
}

.ac-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  position: relative;
  z-index: 1;
}
.ac-stat { text-align: center; }
.acs-num {
  font-family: var(--font-display);
  font-size: 1.8rem;
  letter-spacing: .06em;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.acs-lbl {
  display: block;
  font-family: var(--font-head);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--w30);
  margin-top: 2px;
}
.ac-div { width: 1px; height: 32px; background: var(--w10); }

/* ══════════ HOW IT WORKS ══════════ */
.hiw { background: var(--black); }
.hiw-grid {
  display: flex;
  align-items: center;
  gap: 0;
}
.hiw-card {
  flex: 1;
  background: var(--grad-card);
  border: 1px solid var(--w10);
  border-radius: var(--r-lg);
  padding: 40px 32px;
  position: relative;
  transition: all .3s var(--ease);
  text-align: center;
}
.hiw-card:hover {
  border-color: rgba(0,212,255,.3);
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0,212,255,.08);
}
.hiw-num {
  font-family: var(--font-display);
  font-size: 4rem;
  letter-spacing: .06em;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: .25;
  margin-bottom: 12px;
  line-height: 1;
}
.hiw-icon { font-size: 2rem; margin-bottom: 16px; filter: drop-shadow(0 0 8px rgba(0,212,255,.5)); }
.hiw-card h3 {
  font-family: var(--font-head);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: var(--white);
}
.hiw-card p { font-size: .85rem; color: var(--w60); line-height: 1.7; }
.hiw-arrow {
  font-size: 1.8rem;
  color: rgba(0,212,255,.3);
  padding: 0 20px;
  flex-shrink: 0;
  font-family: var(--font-display);
}

/* ══════════ SERVICES ══════════ */
.services { background: var(--dark); }
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.svc-card {
  background: var(--grad-card);
  border: 1px solid var(--w10);
  border-radius: var(--r-lg);
  padding: 36px 28px;
  position: relative;
  transition: all .3s var(--ease);
  overflow: hidden;
}
.svc-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad);
  opacity: 0;
  transition: opacity .3s;
}
.svc-card:hover {
  border-color: rgba(0,212,255,.25);
  transform: translateY(-5px);
  box-shadow: 0 16px 48px rgba(0,212,255,.08);
}
.svc-card:hover::after { opacity: 1; }
.svc-icon-wrap { margin-bottom: 20px; }
.svc-icon { font-size: 2rem; filter: drop-shadow(0 0 8px rgba(0,212,255,.4)); }
.svc-card h3 {
  font-family: var(--font-head);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: var(--white);
}
.svc-card p { font-size: .85rem; color: var(--w60); line-height: 1.7; }
.svc-line {
  position: absolute;
  bottom: 0; left: 28px; right: 28px;
  height: 1px;
  background: var(--grad);
  opacity: .1;
}

/* ══════════ PRICING ══════════ */
.pricing { background: var(--black); }
.pr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}
.pr-card {
  background: var(--grad-card);
  border: 1px solid var(--w10);
  border-radius: var(--r-xl);
  padding: 36px 28px;
  position: relative;
  transition: all .3s var(--ease);
}
.pr-card:not(.featured):hover { transform: translateY(-4px); border-color: rgba(0,212,255,.2); }
.pr-card.featured {
  background: linear-gradient(145deg, #0f1050, #1a0a48);
  border-color: rgba(0,212,255,.35);
  box-shadow: 0 0 60px rgba(0,212,255,.12), 0 0 120px rgba(123,47,255,.08);
}
.prc-popular {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: var(--grad);
  color: var(--white);
  font-family: var(--font-display);
  font-size: .85rem;
  letter-spacing: .12em;
  padding: 4px 20px;
  border-radius: 999px;
}
.prc-head { margin-bottom: 28px; }
.prc-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: .14em;
  color: var(--w60);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.prc-price { display: flex; align-items: baseline; gap: 4px; }
.prc-rp { font-size: .85rem; color: var(--w60); }
.prc-num {
  font-family: var(--font-display);
  font-size: 3.2rem;
  letter-spacing: .04em;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.prc-per { font-size: .8rem; color: var(--w60); }
.prc-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.prc-list li { display: flex; align-items: center; gap: 10px; font-size: .85rem; }
.prc-list li.on  { color: var(--w90); }
.prc-list li.off { color: var(--w30); }
.prc-list li.on  span:first-child { color: var(--cyan); font-weight: 700; }
.prc-list li.off span:first-child { color: var(--w30); }

.prc-btn-main {
  display: flex;
  justify-content: center;
  background: var(--grad);
  color: var(--white);
  padding: 13px 24px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: all .25s;
}
.prc-btn-main:hover { opacity: .85; transform: translateY(-1px); }
.prc-btn-line {
  display: flex;
  justify-content: center;
  background: transparent;
  color: var(--cyan);
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid rgba(0,212,255,.35);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: all .25s;
}
.prc-btn-line:hover { background: rgba(0,212,255,.08); transform: translateY(-1px); }

/* ══════════ CONTACT CTA ══════════ */
.contact { background: var(--dark); }
.cta-block {
  background: var(--grad-card);
  border: 1px solid rgba(0,212,255,.12);
  border-radius: var(--r-xl);
  padding: 80px 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-bg-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 500px; height: 300px;
  background: radial-gradient(ellipse, rgba(0,212,255,.06) 0%, rgba(123,47,255,.04) 50%, transparent 100%);
  pointer-events: none;
}
.cta-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.8rem);
  letter-spacing: .06em;
  margin: 16px 0 20px;
  position: relative;
}
.cta-desc { color: var(--w60); max-width: 460px; margin: 0 auto 36px; line-height: 1.8; font-size: .95rem; position: relative; }
.btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #25D366;
  color: var(--white);
  padding: 16px 36px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: all .25s;
  box-shadow: 0 8px 32px rgba(37,211,102,.3);
  position: relative;
}
.btn-wa:hover { transform: translateY(-2px); box-shadow: 0 16px 48px rgba(37,211,102,.4); background: #20bc5a; }

/* ══════════ FOOTER ══════════ */
.footer {
  background: var(--dark2);
  border-top: 1px solid var(--w10);
  padding: 60px 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 48px;
}
.footer-brand .brand { margin-bottom: 14px; }
.footer-brand p { color: var(--w60); font-size: .85rem; line-height: 1.7; max-width: 280px; }
.footer-col h4 {
  font-family: var(--font-display);
  font-size: .95rem;
  letter-spacing: .16em;
  color: var(--w60);
  margin-bottom: 20px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col a { color: var(--w60); font-size: .85rem; transition: color .25s; }
.footer-col a:hover { color: var(--cyan); }
.footer-bottom {
  border-top: 1px solid var(--w10);
  padding: 22px 0;
  text-align: center;
}
.footer-bottom p { color: var(--w30); font-size: .78rem; letter-spacing: .04em; }

/* ══════════ WA FLOAT ══════════ */
.wa-float {
  position: fixed;
  bottom: 28px; right: 28px;
  z-index: 900;
  width: 58px; height: 58px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  box-shadow: 0 8px 32px rgba(37,211,102,.4);
  transition: all .25s;
  animation: wab 3s ease-in-out infinite;
}
.wa-float:hover { transform: scale(1.1); animation: none; box-shadow: 0 12px 48px rgba(37,211,102,.5); }
.wa-tip {
  position: absolute;
  right: 68px;
  background: var(--dark2);
  color: var(--white);
  font-family: var(--font-head);
  font-size: .72rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
  border: 1px solid rgba(0,212,255,.2);
}
.wa-float:hover .wa-tip { opacity: 1; }
@keyframes wab { 0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.05) translateY(-4px)} }

/* ══════════ RESPONSIVE ══════════ */
/* ≥1280px */
@media (min-width: 1280px) {
  .container { max-width: 1280px; }
}

/* ≤1023px — Tablet landscape */
@media (max-width: 1023px) {
  .nav-menu {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.97);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 36px;
    z-index: 999;
  }
  .nav-menu.open { display: flex; }
  .nav-menu a { font-size: 1.3rem; }
  .burger { display: flex; }
  .burger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
  .burger.open span:nth-child(2) { opacity: 0; }
  .burger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

  .hero-body { grid-template-columns: 1fr; gap: 48px; padding: 0 28px; }
  .hero-left { text-align: center; }
  .hero-desc { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-right { margin-top: 20px; }
  .plat-badge { display: none; }
  .pb-1,.pb-2 { display: flex; }
  .release-stat { display: none; }
  .rs-1 { display: flex; }

  .about-wrap { grid-template-columns: 1fr; gap: 48px; }
  .svc-grid { grid-template-columns: repeat(2,1fr); }
  .pr-grid { grid-template-columns: repeat(2,1fr); }
  .pr-card.featured { grid-column: 1 / -1; max-width: 360px; margin: 0 auto; width: 100%; }
  .hiw-grid { flex-direction: column; gap: 0; }
  .hiw-arrow { transform: rotate(90deg); padding: 10px 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ≤767px — Mobile */
@media (max-width: 767px) {
  .section { padding: 80px 0; }
  .container { padding: 0 20px; }
  .nav-wrap { padding: 0 20px; gap: 12px; }
  .nav-cta { display: none; }

  .hero { padding: 100px 0 80px; min-height: auto; }
  .hero-title { font-size: clamp(2.8rem, 9vw, 4rem); }
  .hero-desc { font-size: .9rem; }
  .hero-actions { gap: 10px; }
  .hs-div { display: none; }
  .hero-stats { gap: 16px; flex-wrap: wrap; justify-content: center; }
  .release-frame { width: 260px; height: 320px; }
  .rc-main { padding: 14px; gap: 12px; }
  .rc-cover { width: 58px; height: 58px; }

  .svc-grid { grid-template-columns: 1fr; }
  .pr-grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
  .pr-card.featured { grid-column: auto; }
  .cta-block { padding: 48px 24px; border-radius: var(--r-lg); }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-brand { grid-column: auto; }
}

/* ≤479px — Small mobile */
@media (max-width: 479px) {
  .container { padding: 0 16px; }
  .section { padding: 60px 0; }
  .hero { padding: 90px 0 60px; }
  .hero-title { font-size: clamp(2.4rem, 10vw, 3.2rem); }
  .hero-actions { flex-direction: column; align-items: center; }
  .btn-main,.btn-line { width: 100%; justify-content: center; }
  .section-title { font-size: clamp(2rem, 8vw, 2.8rem); }
  .hiw-card { padding: 28px 20px; }
  .svc-card { padding: 28px 20px; }
  .pr-card { padding: 28px 20px; }
  .cta-block { padding: 40px 16px; }
  .btn-wa { width: 100%; justify-content: center; }
  .wa-float { width: 50px; height: 50px; bottom: 20px; right: 16px; }
  .wa-tip { display: none; }
}


/* ══════════ REFINEMENT ══════════ */
.ico { width: 1em; height: 1em; display: block; }
.hiw-icon .ico, .svc-icon .ico { width: 2rem; height: 2rem; color: var(--cyan); }
.svc-icon, .hiw-icon { display: inline-block; filter: none; }
.hiw-icon .ico, .svc-icon .ico { filter: drop-shadow(0 0 8px rgba(0,212,255,.4)); }
.rs-icon { display: inline-flex; }
.rs-icon .ico { width: 1.3rem; height: 1.3rem; color: var(--cyan); }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; }
.lang-btn .ico { width: 16px; height: 16px; }

/* Marquee: wordmark seragam */
.mq-item svg { display: none; }
.mq-item {
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
@media (hover: none), (pointer: coarse) { .cursor, .cursor-dot { display: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}


/* ══════════ PREMIUM POLISH ══════════ */
::selection { background: var(--violet); color: #fff; }
.section { padding: 128px 0; }
.section-header { margin-bottom: 72px; }
.section-title { letter-spacing: .03em; line-height: 1; }
.hero-title { line-height: .92; letter-spacing: .02em; }
.hs-num, .prc-num, .acs-num { font-variant-numeric: tabular-nums; }

/* Marquee: tepi memudar */
.marquee-inner {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

/* Kartu: satu bahasa visual, garis tipis, tanpa bayangan berat */
.svc-card, .pr-card, .hiw-card {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  box-shadow: none;
  transition: opacity .7s var(--ease), transform .5s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.svc-card:hover, .hiw-card:hover {
  border-color: rgba(0,212,255,.35);
  background: linear-gradient(180deg, rgba(0,212,255,.07), rgba(123,47,255,.02));
  transform: translateY(-4px);
}
.svc-icon-wrap {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border: 1px solid rgba(0,212,255,.22);
  border-radius: 14px;
  background: rgba(0,212,255,.05);
}

/* Harga */
.prc-num { font-family: var(--font-display); font-size: 3.6rem; letter-spacing: .02em; line-height: 1; }
.pr-card.featured {
  border: 1px solid transparent;
  background: linear-gradient(var(--dark2), var(--dark2)) padding-box, var(--grad) border-box;
  box-shadow: 0 24px 70px rgba(123,47,255,.22);
}
.pr-card:not(.featured):hover { border-color: rgba(255,255,255,.18); transform: translateY(-4px); }

/* Tombol & CTA */
.btn-main, .btn-line, .nav-cta, .prc-btn-main, .prc-btn-line, .btn-wa { border-radius: 999px; }
.cta-block { border: 1px solid rgba(0,212,255,.18); border-radius: var(--r-xl); }
.footer { border-top: 1px solid rgba(255,255,255,.08); }

@media (max-width: 768px) {
  .section { padding: 88px 0; }
  .section-header { margin-bottom: 48px; }
  .prc-num { font-size: 3rem; }
}


/* ══════════ BLACK-DOMINANT THEME ══════════ */
:root { --black:#000; --dark:#050505; --dark2:#0a0a0a; --dark3:#0f0f0f; --card:#080808; }
body { background: #000; }
.hero-glow { opacity: .35; }


/* ══════════ WORDMARK LOGO (gaya MatchMusic) ══════════ */
.brand { text-decoration: none; letter-spacing: normal; }
.brand-word {
  display: inline-flex;
  font-family: var(--font-body);
  font-size: 1.6rem;
  letter-spacing: -.015em;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}
.bw-light { font-weight: 300; }
.bw-bold  { font-weight: 700; }
.nav-cta {
  background: #fff; color: #000;
  border: 0; box-shadow: none;
  border-radius: 999px; font-weight: 600;
}
.nav-cta:hover { background: #e9e9e9; color: #000; }
@media (max-width: 768px) { .brand-word { font-size: 1.2rem; } }

/* Marquee: logo + nama */
.mq-item { display: inline-flex; align-items: center; gap: 10px; }
.mq-item img { height: 20px; width: auto; max-width: 28px; opacity: .8; transition: opacity .25s; }
.mq-item:hover img { opacity: 1; }


/* ══════════ GABUNGAN REFERENSI (MatchMusic · Miracle · Zinetic) ══════════ */
/* Hero: tipografi besar, fokus pada pesan, siap foto latar (hero.jpg) */
.hero-right, .hero-vinyl-bg, .hero-grid, .hero-glow { display: none; }
.hero-bg { background: linear-gradient(90deg, rgba(0,0,0,.88), rgba(0,0,0,.4)), url('hero.jpg') center/cover no-repeat, #000; }
.hero-body { display: block; }
.hero-left { max-width: 920px; }
.hero-title { font-family: var(--font-body); font-weight: 800; font-size: clamp(3.2rem, 8.5vw, 7rem); letter-spacing: -.03em; line-height: .98; text-transform: none; }
.ht-line { display: block; }
.ht-accent, .section-title .grad-text, .cta-title .grad-text { background: none; -webkit-text-fill-color: currentColor; color: rgba(255,255,255,.5); }
.hero .btn-main { background: #fff; color: #000; border-radius: 999px; box-shadow: none; }
.hero .btn-line { border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 999px; background: transparent; }
.section-title, .cta-title { font-family: var(--font-body); font-weight: 700; letter-spacing: -.025em; text-transform: none; font-size: clamp(2.2rem, 4.6vw, 3.6rem); }

/* FAQ */
.faq-wrap { max-width: 820px; }
.faq-list details { border-bottom: 1px solid rgba(255,255,255,.1); padding: 22px 0; }
.faq-list summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 24px; font-weight: 600; font-size: 1.1rem; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; color: var(--cyan); font-size: 1.4rem; line-height: 1; }
.faq-list details[open] summary::after { content: '\2212'; }
.faq-list p { margin-top: 14px; color: var(--w60); max-width: 62ch; }

/* Footer 4 kolom */
.footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* Kartu cookie */
.cookie { position: fixed; right: 24px; bottom: 24px; z-index: 1200; max-width: 460px; display: flex; gap: 20px; align-items: center;
  background: #fff; color: #000; border-radius: 18px; padding: 18px 20px; box-shadow: 0 18px 60px rgba(0,0,0,.5); }
.cookie[hidden] { display: none; }
.ck-t { font-weight: 700; margin-bottom: 4px; }
.ck-d { font-size: .85rem; color: #555; line-height: 1.45; }
.ck-btns { display: flex; flex-direction: column; gap: 6px; }
.ck-btns button { font: inherit; font-weight: 600; border: 0; cursor: pointer; border-radius: 999px; padding: 9px 20px; }
.ck-ok { background: #000; color: #fff; }
.ck-no { background: transparent; color: #444; }
@media (max-width: 560px) { .cookie { left: 12px; right: 12px; bottom: 12px; flex-direction: column; align-items: stretch; } .ck-btns { flex-direction: row; } .ck-btns button { flex: 1; } }


/* ══════════ INTRO EKSEKUTIF ══════════ */
.loader { background: #000; }
.loader-noise { opacity: .35; }
.loader-lines, .loader-vinyl, .loader-sub { display: none; }
.loader-center { gap: 36px; }
.loader-mark { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.loader-fortis {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: clamp(2.8rem, 11vw, 6.6rem);
  line-height: 1;
  letter-spacing: .34em;
  margin-right: -.34em;
  text-transform: uppercase;
  color: #fff;
  background: none;
  -webkit-text-fill-color: #fff;
  filter: none;
  animation: ldTitle 1.5s var(--spring) .35s both;
}
.loader-rule {
  display: block;
  width: clamp(120px, 22vw, 220px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  transform: scaleX(0);
  animation: ldRule 1.2s var(--ease) .9s forwards;
}
.loader-ent {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(.7rem, 1.6vw, .95rem);
  letter-spacing: .62em;
  margin-right: -.62em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  animation: ldFade 1.1s var(--ease) 1.2s both;
}
.loader-progress-wrap { width: clamp(160px, 24vw, 240px); height: 1px; background: rgba(255,255,255,.14); border-radius: 0; }
.loader-progress { background: #fff; box-shadow: none; border-radius: 0; }
.loader-pct {
  position: absolute;
  right: clamp(20px, 4vw, 48px);
  bottom: clamp(20px, 4vw, 40px);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .8rem;
  letter-spacing: .2em;
  color: rgba(255,255,255,.45);
  font-variant-numeric: tabular-nums;
}
@keyframes ldTitle {
  from { opacity: 0; filter: blur(12px); letter-spacing: .6em; transform: translateY(8px); }
  to   { opacity: 1; filter: blur(0);    letter-spacing: .34em; transform: none; }
}
@keyframes ldRule { to { transform: scaleX(1); } }
@keyframes ldFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.loader.exit { animation: ldWipe .95s cubic-bezier(.77,0,.18,1) forwards; }
.loader.exit .loader-center, .loader.exit .loader-pct { opacity: 0; transition: opacity .35s; }
@keyframes ldWipe { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }


/* ══════════ DESAIN INTERIOR: EXECUTIVE NOIR ══════════
   Sistem: hitam pekat · putih · biru es (aksen tunggal)
   Tipografi: Cormorant Garamond (judul, angka) + Outfit (isi)
   Elemen khas: cahaya sorot mengikuti kursor pada kartu & baris layanan */
:root { --cyan: #bcd7e6; --cyan2: #98b8c9; --serif: 'Cormorant Garamond', Georgia, serif; }

/* Tekstur film halus di seluruh halaman */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Gerak lebih tenang */
.reveal { transform: translateY(16px); transition: opacity .9s var(--ease), transform .9s var(--ease); }

/* Judul: serif eksekutif */
.hero-title, .section-title, .cta-title { font-family: var(--serif); font-weight: 500; text-transform: none; }
.hero-title { font-size: clamp(3.6rem, 10vw, 8.6rem); letter-spacing: -.02em; line-height: .92; }
.section-title, .cta-title { font-size: clamp(2.6rem, 5.4vw, 4.6rem); letter-spacing: -.01em; line-height: 1.02; }
.hs-num, .acs-num, .prc-num { font-family: var(--serif); font-weight: 500; }
.hs-num { font-size: 3.2rem; }
.prc-name { font-family: var(--serif); font-size: 1.7rem; font-weight: 500; }
.about-p { max-width: 60ch; }

/* Label kecil: teks polos dengan garis tipis, bukan pil */
.section-tag, .hero-pill {
  background: none; border: 0; padding: 0; border-radius: 0;
  font-family: var(--font-body); font-size: .8rem; font-weight: 400;
  letter-spacing: .06em; text-transform: none; color: rgba(255,255,255,.6);
}
.section-tag::before { content: ''; display: inline-block; width: 28px; height: 1px; margin-right: 14px; vertical-align: middle; background: currentColor; }
.section-header .section-tag::after { content: ''; display: inline-block; width: 28px; height: 1px; margin-left: 14px; vertical-align: middle; background: currentColor; }

/* Statistik hero: garis pemisah tipis */
.hero-stats { border-top: 1px solid rgba(255,255,255,.14); padding-top: 28px; margin-top: 56px; }
.hs-div { background: rgba(255,255,255,.14); }

/* Layanan: daftar editorial bergaris, bukan kotak-kotak kartu */
.svc-grid { gap: 0 48px; }
.svc-card { border: 0; border-top: 1px solid rgba(255,255,255,.14); border-radius: 0; background: none; padding: 40px 8px 44px 0; }
.svc-card:hover { transform: none; border-top-color: var(--cyan); background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.06), transparent 45%); }
.svc-icon-wrap { border: 0; background: none; width: auto; height: auto; display: block; margin-bottom: 22px; }
.svc-icon .ico { width: 1.9rem; height: 1.9rem; }

/* Cahaya sorot pada kartu lain */
.hiw-card:hover, .pr-card:not(.featured):hover {
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.07), transparent 45%), linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
}
.cta-block { background: #000; border-color: rgba(255,255,255,.16); }


/* ══════════ INTRO: LATAR PLATFORM BERJALAN + LOGO + PERSEN ══════════ */
.loader-center { gap: 28px; }
.loader-count {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem); line-height: 1;
  color: #fff; letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  min-width: 4ch; text-align: center;
  animation: ldFade 1s var(--ease) .9s both;
}
.loader-count-sign { font-size: .75em; margin-left: .1em; color: rgba(255,255,255,.55); vertical-align: baseline; }
.loader-pct { position: static; }


/* ══════════ BAHASA MANDARIN (font CJK) ══════════ */
html[lang="zh"] { --font-body: 'Outfit', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif; --serif: 'Cormorant Garamond', 'Noto Serif SC', 'Songti SC', serif; }
html[lang="zh"] .hero-title, html[lang="zh"] .section-title, html[lang="zh"] .cta-title { letter-spacing: 0; line-height: 1.15; }
html[lang="zh"] .prc-name, html[lang="zh"] .section-tag { letter-spacing: .08em; }


/* ══════════ COPYWRITING BARU ══════════ */
.hero-title { font-size: clamp(2.5rem, 6.4vw, 5.4rem); line-height: 1.04; }
.hero-tagline { margin: -6px 0 30px; font-size: clamp(.78rem, 1.3vw, .9rem); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--cyan); }
.about-left .section-title { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.12; }
.about-p strong { color: #fff; font-weight: 600; letter-spacing: .02em; }
.about-statement { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.25; color: #fff; margin: 26px 0 28px; padding-left: 18px; border-left: 2px solid var(--cyan); }
html[lang="zh"] .about-statement { font-style: normal; }
html[lang="zh"] .hero-tagline { letter-spacing: .12em; }

/* Footer bawah */
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 28px; }
.footer-legal { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 0; margin: 0; padding: 0; }
.footer-legal li + li::before { content: '|'; margin: 0 14px; color: var(--w30); }
.footer-legal a { color: var(--w30); font-size: .78rem; letter-spacing: .04em; text-decoration: none; transition: color .25s; }
.footer-legal a:hover { color: #fff; }


/* ══════════ LOGO MEREK (navbar & footer) ══════════ */
.brand-logo { display: block; height: 64px; width: auto; }
.footer-brand .brand-logo { height: 108px; }
.nav.stuck .brand-logo { height: 54px; transition: height .3s var(--ease); }
@media (max-width: 768px) { .brand-logo { height: 52px; } .nav.stuck .brand-logo { height: 46px; } .footer-brand .brand-logo { height: 88px; } }


/* ══════════ PILIHAN BAHASA (dropdown ID / ENG / CH) ══════════ */
.lang-wrap { position: relative; }
.lang-caret { width: 12px; height: 12px; transition: transform .25s var(--ease); }
.lang-btn[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }
.lang-btn[aria-expanded="true"] { border-color: var(--cyan); color: #fff; }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 1100;
  min-width: 168px; margin: 0; padding: 6px; list-style: none;
  background: rgba(10,10,10,.96); border: 1px solid rgba(255,255,255,.14); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.6); backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.lang-menu.open { opacity: 1; visibility: visible; transform: none; }
.lang-menu li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; color: var(--w60); font-size: .85rem; transition: background .2s, color .2s; }
.lang-menu li:hover { background: rgba(255,255,255,.08); color: #fff; }
.lang-menu li.active { color: #fff; }
.lang-menu li.active::after { content: '✓'; margin-left: auto; color: var(--cyan); }
.lm-code { font-weight: 700; letter-spacing: .08em; min-width: 34px; }
.lm-name { font-weight: 400; }

/* Judul hero huruf kapital semua */
.hero-left { max-width: 1120px; }
.hero-title { text-transform: uppercase; font-size: clamp(1.9rem, 4.5vw, 4rem); letter-spacing: .01em; line-height: 1.08; }
html[lang="zh"] .hero-title { text-transform: none; }


/* ══════════ HERO: 3 BARIS JUDUL + GRAFIK ANALITIK ══════════ */
.hero-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 40px; max-width: 1240px; }
.hero-left { max-width: none; }
.hero-title { font-size: clamp(1.8rem, 3.1vw, 2.8rem); line-height: 1.1; }
@media (min-width: 981px) { .hero-title .ht-line { white-space: nowrap; } }
.hero-right { display: flex; justify-content: flex-end; align-items: center; position: relative; }

.dash-frame {
  position: relative; width: 100%; max-width: 640px; aspect-ratio: 1.34 / 1;
  border-radius: 28px; overflow: visible;
}
.dash-frame::before {                     /* bingkai ungu → hitam, kontras dengan tema gelap */
  content: ''; position: absolute; inset: 0; border-radius: 28px;
  background: linear-gradient(115deg, #4b1a99 0%, #7a14e0 38%, #2a0f55 70%, #0b0b0b 100%);
  box-shadow: 0 30px 90px rgba(122,20,224,.35), inset 0 0 0 1px rgba(255,255,255,.1);
}
.dash-frame::after {                      /* cahaya ungu di belakang */
  content: ''; position: absolute; inset: -12% -8% -8% 8%; z-index: -1;
  background: radial-gradient(closest-side, rgba(124,58,237,.35), transparent 72%); filter: blur(30px);
}
.dash-panel {
  position: absolute; left: 11%; top: 13%; right: -6%; bottom: -9%;
  background: #fff; color: #0b0b0b; border-radius: 22px 0 0 0;
  padding: 5.5% 5% 0 5%; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  font-family: var(--font-body);
}
.dash-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3.5%; }
.dash-head h3 { display: flex; align-items: center; gap: 10px; font-size: clamp(1.1rem, 2.1vw, 1.55rem); font-weight: 700; letter-spacing: -.02em; margin: 0; text-transform: none; color: #0b0b0b; }
.dash-head h3 i { font-style: normal; font-size: .62em; width: 1.7em; height: 1.7em; border-radius: 50%; background: #eee; display: grid; place-items: center; font-weight: 600; }
.dash-pill { background: #f1f1f2; border-radius: 999px; padding: 7px 14px; font-size: clamp(.62rem, 1vw, .78rem); font-weight: 600; color: #222; white-space: nowrap; }
.dash-pill-sm { padding: 6px 12px; }
.dash-card { border: 1px solid #e6e6e8; border-bottom: 0; border-radius: 16px 0 0 0; padding: 4% 4.5% 0; height: 100%; }
.dash-card-top { display: flex; justify-content: space-between; align-items: center; }
.dash-card h4 { margin: 0; font-size: clamp(.95rem, 1.6vw, 1.2rem); font-weight: 700; letter-spacing: -.01em; text-transform: none; color: #0b0b0b; }
.dash-nums { display: flex; gap: clamp(22px, 5vw, 56px); margin: 3.5% 0 2%; }
.dn-l { display: block; font-size: clamp(.6rem, .95vw, .75rem); font-weight: 500; color: #333; margin-bottom: 2px; }
.dash-nums strong { font-size: clamp(1.4rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: #0b0b0b; font-variant-numeric: tabular-nums; }
.dash-chart { position: relative; margin: 0 -4.5%; height: 46%; }
.dash-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.dc-grid line { stroke: #eee; stroke-width: 1; vector-effect: non-scaling-stroke; }
.dc-area { opacity: 0; }
.a-ap { fill: rgba(99,102,241,.10); } .a-sp { fill: rgba(34,181,115,.09); } .a-yt { fill: rgba(239,71,111,.09); }
.dc-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.l-ap { stroke: #5b4de0; } .l-sp { stroke: #22b573; } .l-yt { stroke: #ef476f; }
.dc-cursor { stroke: #cfcfd4; stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; opacity: 0; }
.dc-dot { fill: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; }
.d-ap { stroke: #5b4de0; } .d-sp { stroke: #f0a020; } .d-yt { stroke: #ef476f; }

.dash-tip {
  position: absolute; top: 4%; transform: translateX(8%) translateY(8px); opacity: 0;
  background: #fff; border-radius: 10px; box-shadow: 0 10px 34px rgba(0,0,0,.22);
  min-width: 36%; overflow: hidden; font-size: clamp(.58rem, .95vw, .78rem);
}
.dash-tip p { margin: 0; padding: 8px 12px; background: #f1f1f2; font-weight: 700; color: #111; }
.dash-tip ul { list-style: none; margin: 0; padding: 6px 12px 8px; }
.dash-tip li { display: flex; align-items: center; gap: 8px; padding: 4px 0; color: #222; }
.dash-tip li span { flex: 1; }
.dash-tip li b { font-weight: 700; font-variant-numeric: tabular-nums; }
.dash-tip i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid; background: #fff; flex: none; }
.c-ap { border-color: #5b4de0 !important; } .c-sp { border-color: #22b573 !important; } .c-yt { border-color: #ef476f !important; }

.dash-chip {
  position: absolute; left: -4%; bottom: 9%; z-index: 3; display: flex; align-items: center; gap: 12px;
  padding: 12px 18px 12px 12px; border-radius: 16px; color: #fff;
  background: rgba(14,14,16,.82); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(14px);
  box-shadow: 0 18px 44px rgba(0,0,0,.55); opacity: 0; transform: translateY(14px);
}
.dash-chip-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(135deg, #7c3aed, #5b4de0); }
.dash-chip-ico svg { width: 20px; height: 20px; }
.dash-chip b { display: block; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.dash-chip span:not(.dash-chip-ico) { font-size: .7rem; color: rgba(255,255,255,.6); letter-spacing: .02em; }

/* animasi masuk (aktif saat hero tampil) */
.hero-right.in .dc-line { animation: dcDraw 1.8s var(--ease) forwards; }
.hero-right.in .l-sp { animation-delay: .15s; } .hero-right.in .l-yt { animation-delay: .3s; }
.hero-right.in .dc-area { animation: dcFade 1.2s var(--ease) .9s forwards; }
.hero-right.in .dc-cursor, .hero-right.in .dc-dot { animation: dcFade .5s var(--ease) 1.7s forwards; }
.hero-right.in .dash-tip { animation: dcTip .7s var(--spring) 1.9s forwards, dcFloat 5s ease-in-out 2.6s infinite; }
.hero-right.in .dash-chip { animation: dcChip .8s var(--spring) 1.2s forwards, dcFloat 6s ease-in-out 2.2s infinite; }
@keyframes dcDraw { to { stroke-dashoffset: 0; } }
@keyframes dcFade { to { opacity: 1; } }
@keyframes dcTip { to { opacity: 1; transform: translateX(8%) translateY(0); } }
@keyframes dcChip { to { opacity: 1; transform: none; } }
@keyframes dcFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@media (prefers-reduced-motion: reduce) { .dc-line { stroke-dashoffset: 0; } .dc-area, .dc-cursor, .dc-dot, .dash-tip, .dash-chip { opacity: 1; transform: none; animation: none !important; } }

@media (max-width: 980px) {
  .hero-body { grid-template-columns: 1fr; gap: 40px; }
  .hero-left { text-align: left; }
  .hero-right { justify-content: center; }
  .hero-title { font-size: clamp(2rem, 7.4vw, 3rem); }
}
@media (max-width: 560px) {
  .dash-chip { display: none; }
  .dash-frame { aspect-ratio: 1 / 1; }
  .dash-panel { left: 6%; right: -3%; top: 10%; bottom: -8%; padding-top: 6%; }
  .dash-tip { min-width: 44%; left: auto !important; right: 8%; transform: translateY(8px); }
  .hero-right.in .dash-tip { animation: dcTipM .7s var(--spring) 1.9s forwards, dcFloat 5s ease-in-out 2.6s infinite; }
}
@keyframes dcTipM { to { opacity: 1; transform: none; } }
html[lang="zh"] .dash-head h3, html[lang="zh"] .dash-card h4 { letter-spacing: 0; }


/* ══════════ REVISI 23 OKT: judul hero, ukuran dashboard, daftar & visual About ══════════ */

/* Judul hero: Bodoni Moda (kontras tinggi, senada monogram logo), sedikit lebih besar */
.hero-title {
  font-family: 'Bodoni Moda', 'Noto Serif SC', 'Songti SC', Georgia, serif;
  font-weight: 500; letter-spacing: .03em; line-height: 1.12;
  font-size: clamp(2.1rem, 7.8vw, 3.2rem);
}
@media (min-width: 981px) {
  .hero-title { font-size: clamp(2rem, 3.4vw, 3rem); }
  .hero-title .ht-line { white-space: normal; text-wrap: balance; }
  /* kolom kiri sedikit lebih lebar, dashboard di kanan sedikit lebih kecil */
  .hero-body { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
}

/* About: daftar 8 poin (judul tebal + keterangan) */
.about-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; margin-top: 30px; }
.about-list li { align-items: flex-start; gap: 14px; }
.about-list .al-dot { margin-top: .5em; }
.al-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.al-text strong { color: #fff; font-weight: 600; font-size: .95rem; line-height: 1.35; }
.al-text span { color: var(--w60); font-size: .82rem; line-height: 1.55; }
@media (max-width: 640px) { .about-list { grid-template-columns: 1fr; gap: 16px; } }

/* About: kartu visual (gambar kredit artis) */
.about-card { padding: 0; max-width: 480px; }
.about-visual-wrap { position: relative; z-index: 1; background: #f7f7f7; line-height: 0; }
.about-visual { display: block; width: 100%; height: auto; }
.about-card .ac-stats { padding: 26px 28px 30px; }


/* ══════════ REVISI 23 OKT (2): huruf tegas & seragam, harga, footer, konsistensi layar ══════════ */

/* Cegah browser HP memperbesar/mengecilkan teks sendiri (penyebab layout "lari" saat mode desktop) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* Satu keluarga huruf untuk semua judul: Bodoni Moda Bold (senada monogram logo) */
:root { --display-serif: 'Bodoni Moda', 'Noto Serif SC', 'Songti SC', Georgia, serif; }
.hero-title, .section-title, .cta-title {
  font-family: var(--display-serif);
  font-weight: 700;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
}
.hero-title { text-transform: uppercase; letter-spacing: .02em; line-height: 1.12; }
html[lang="zh"] .hero-title { text-transform: none; letter-spacing: .02em; }
.section-title, .cta-title { letter-spacing: .005em; line-height: 1.1; }
.about-left .section-title { font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.14; }
.section-title, .cta-title { font-size: clamp(2.2rem, 4.6vw, 3.8rem); }
.about-left .section-title { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }

/* Baris kedua judul: tetap berbeda tapi jelas terbaca (sebelumnya terlalu redup) */
.ht-accent,
.section-title .grad-text,
.cta-title .grad-text {
  color: rgba(255,255,255,.74);
  -webkit-text-fill-color: currentColor;
  font-style: normal;
  font-weight: 700;
}

/* Judul bagian lain ikut tegas & seragam */
.prc-name { font-family: var(--display-serif); font-weight: 700; letter-spacing: .12em; }
.svc-card h3, .hiw-card h3 { font-weight: 700; }
.al-text strong { font-weight: 700; }

/* Hapus garis kecil di samping label "Tentang Kami" & "Hubungi Kami" */
.about-left .section-tag::before,
.cta-block .section-tag::before { content: none; display: none; }

/* Harga: jarak antar bagian lebih lega, label masa layanan di samping harga */
.prc-head { margin-bottom: 22px; }
.prc-price { flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 4px; }
.prc-per { font-size: .85rem; color: var(--w60); white-space: nowrap; letter-spacing: .02em; }
.prc-desc { margin: 0 0 32px; line-height: 1.75; font-size: .9rem; color: var(--w90); }
.prc-list { gap: 14px; margin-bottom: 32px; }
.prc-list li { align-items: flex-start; line-height: 1.5; }
.prc-list li span:first-child { flex: 0 0 auto; }

/* Layanan: kartu Sample Pack mengikuti gaya kartu lain */
.svc-card p { font-size: .85rem; line-height: 1.7; color: var(--w60); }

/* Footer: paragraf rapi, per kalimat, eksekutif */
.footer-brand .footer-claim {
  margin: 22px 0 14px; max-width: 340px;
  color: #fff; font-weight: 700; font-size: .8rem; letter-spacing: .1em; line-height: 1.6;
  text-wrap: balance;
}
.footer-brand .footer-desc {
  max-width: 340px; margin: 0 0 10px;
  color: var(--w60); font-size: .86rem; line-height: 1.85;
  text-wrap: pretty;
}
.footer-brand .footer-desc:last-child { margin-bottom: 0; }
html[lang="zh"] .footer-brand .footer-claim { letter-spacing: .04em; }

/* Konsisten di HP, tablet, dan mode desktop di HP */
img, svg { max-width: 100%; }
.pr-card, .svc-card, .about-card, .cta-block { min-width: 0; }
@media (max-width: 767px) {
  .hero-title { font-size: clamp(1.9rem, 8vw, 2.8rem); }
  .section-title, .cta-title { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .about-left .section-title { font-size: clamp(1.7rem, 7vw, 2.3rem); }
  .prc-num { font-size: 2.8rem; }
  .footer-brand .footer-claim, .footer-brand .footer-desc { max-width: none; }
}

/* Harga: label masa layanan selalu satu baris di bawah angka, di semua kartu (sejajar & rapi) */
.prc-num { font-size: clamp(2.6rem, 4vw, 3.4rem); }
.prc-per { flex: 0 0 100%; margin-top: 4px; }
@media (max-width: 767px) { .prc-num { font-size: 2.8rem; } }

/* HP: judul hero 3 baris tidak patah */
@media (max-width: 767px) { .hero-title { font-size: clamp(1.45rem, 6.3vw, 2.4rem); letter-spacing: .01em; } }


/* ══════════ REVISI 23 OKT (3) ══════════ */

/* Hapus semua garis strip di label section */
.section-tag::before, .section-tag::after,
.section-header .section-tag::before, .section-header .section-tag::after { content: none !important; display: none !important; }

/* Tagline hero digarisbawahi */
.hero-pill span:last-child { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: rgba(255,255,255,.7); }

/* Deskripsi hero dengan pemisah | */
.hero-desc { max-width: 60ch; text-wrap: pretty; }

/* Statistik kartu About: tidak terpotong di layar sempit */
.ac-stats { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ac-stat { flex: 1 1 0; min-width: 0; text-align: center; }
.acs-num { font-size: clamp(1.4rem, 5.2vw, 2rem); white-space: nowrap; }
.acs-lbl { font-size: clamp(.6rem, 2.2vw, .75rem); letter-spacing: .08em; }

/* Tombol CTA di menu mobile (menu tablet/HP) */
.nav-menu-cta { display: none; }
@media (max-width: 1023px) {
  .nav-menu-cta { display: block; }
  .nav-menu .nav-cta { display: inline-flex; font-size: .9rem; padding: 14px 32px; }
}

/* ===== Tata letak tablet / mode desktop di HP (768–1023px) dan semua layar kecil ===== */
@media (max-width: 1023px) {
  .hero-body { padding: 0 28px; }
  .hero-left { text-align: left; }
  .hero-desc, .hero-tagline { margin-left: 0; margin-right: 0; }
  .hero-actions { justify-content: flex-start; }
  .hero-stats { justify-content: flex-start; }
  .hero-right { justify-content: center; width: 100%; }
  .dash-frame { max-width: 560px; margin: 0 auto; }

  .pr-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; gap: 28px; }
  .pr-card.featured { grid-column: auto; max-width: none; margin: 0; width: 100%; }
  .about-card { margin: 0 auto; }
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
  .container { padding-left: 28px; padding-right: 28px; }
}
@media (max-width: 767px) {
  .container { padding-left: 20px; padding-right: 20px; }
  .hero-body { padding: 0 20px; }
  .svc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 479px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .hero-body { padding: 0 16px; }
}

/* ══════════ FONT SERAGAM: tebal & executive (satu keluarga huruf untuk seluruh situs) ══════════ */
:root { --font-all: 'Plus Jakarta Sans', 'Noto Sans SC', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
html body, html body *:not(svg):not(svg *) { font-family: var(--font-all) !important; font-style: normal !important; }
body { font-weight: 500; }
h1, h2, h3, h4, strong, b, .hero-title, .section-title, .cta-title, .prc-name, .prc-num, .hs-num, .acs-num,
.about-statement, .svc-card h3, .hiw-card h3, .footer-col h4, .al-text strong { font-weight: 800; }
.hero-title, .section-title, .cta-title { letter-spacing: -.01em; line-height: 1.12; }
.hero-title { text-transform: uppercase; font-size: clamp(1.6rem, 3.1vw, 2.7rem); }
@media (max-width: 1023px) { .hero-title { font-size: clamp(1.7rem, 6.2vw, 2.8rem); } }
.about-statement { font-weight: 700; letter-spacing: 0; font-size: clamp(1.1rem, 2vw, 1.5rem); }
.section-title, .cta-title { font-size: clamp(2rem, 4.2vw, 3.4rem); }
.about-left .section-title { font-size: clamp(1.7rem, 3.2vw, 2.7rem); }
@media (max-width: 767px) { .section-title, .cta-title { font-size: clamp(1.7rem, 7vw, 2.4rem); } .about-left .section-title { font-size: clamp(1.6rem, 6.4vw, 2.1rem); } }
.about-p, .svc-card p, .hiw-card p, .prc-desc, .prc-list li, .al-text span, .footer-desc, .faq-list p, .hero-desc { font-weight: 500; }
.prc-list li, .svc-card p, .about-p { font-weight: 500; }
.nav-menu a, .btn-main, .btn-line, .nav-cta, .prc-btn-main, .prc-btn-line, .btn-wa, .section-tag, .hero-tagline { font-weight: 700; }
.prc-num { letter-spacing: -.01em; }

/* ══════════ Gaya tipografi mengikuti rilismusik.com ══════════ */
.section-title, .cta-title { letter-spacing: -.03em; line-height: 1.08; font-weight: 800; }
.hero-title { letter-spacing: -.015em; font-weight: 800; }
.svc-card h3, .hiw-card h3, .al-text strong, .faq-list summary { letter-spacing: -.02em; font-weight: 700; }
.prc-num { letter-spacing: -.03em; }
/* label kecil: kapital, jarak huruf lebar */
.section-tag, .hero-pill { text-transform: uppercase; letter-spacing: .22em; font-size: .72rem; font-weight: 700; }
.hero-pill { text-transform: none; letter-spacing: .02em; font-size: .8rem; font-weight: 600; }
html[lang="zh"] .section-tag { letter-spacing: .12em; }
/* paragraf reguler */
.about-p, .svc-card p, .hiw-card p, .prc-desc, .al-text span, .footer-desc, .faq-list p, .hero-desc, .cta-desc { font-weight: 400; }
.prc-list li { font-weight: 500; }

/* ══════════ LOADING SCREEN: font dikembalikan seperti semula ══════════ */
html body .loader .loader-fortis, html body .loader .loader-count, html body .loader .loader-count * {
  font-family: 'Cormorant Garamond', Georgia, serif !important; font-weight: 500 !important; letter-spacing: inherit;
}
html body .loader .loader-fortis { letter-spacing: .34em !important; }
html body .loader .loader-count { letter-spacing: .12em !important; }
html body .loader .loader-ent { font-family: 'Outfit', var(--font-all) !important; font-weight: 300 !important; letter-spacing: .62em !important; }
html[lang="zh"] body .loader .loader-fortis, html[lang="zh"] body .loader .loader-count { font-family: 'Cormorant Garamond', 'Noto Serif SC', 'Songti SC', serif !important; }

/* CTA bagian kontak: Mulai Sekarang + WhatsApp */
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; }
@media (max-width: 479px) { .cta-actions { flex-direction: column; width: 100%; } .cta-actions .btn-main, .cta-actions .btn-wa { width: 100%; justify-content: center; } }


/* ══════════ REVISI 23 OKT (4): hero rapi tanpa ruang kosong, badge oval, judul lebih tebal ══════════ */

/* 1) Tinggi hero: jangan memaksa 100vh (di HP mode desktop viewport-nya sangat tinggi → ruang kosong atas & bawah) */
.hero { min-height: min(100vh, 920px); }
@media (max-width: 1100px) {
  .hero { min-height: 0; padding: 116px 0 64px; align-items: flex-start; }
  .scroll-hint { display: none; }
  .hero-actions { margin-bottom: 28px; }
  .hero-stats { margin-top: 32px; padding-top: 22px; }
  .hero-desc { margin-bottom: 22px; }
  .hero-tagline { margin: 0 0 22px; }
}

/* Layar menengah & HP mode desktop (±768–1100px): dua kolom — teks kiri, dashboard kanan, seperti rilismusik.com */
@media (min-width: 768px) and (max-width: 1100px) {
  .hero-body { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 28px; align-items: center; padding: 0 28px; }
  .hero-left { text-align: left; }
  .hero-right { justify-content: center; margin-top: 0; }
  .hero-right .dash-frame { max-width: 94%; margin-right: 4%; }
  .hero .hero-title { font-size: clamp(1.4rem, 3.4vw, 2.5rem); }
  .hero .hero-title .ht-line { white-space: nowrap; }
  .hero-stats { gap: 18px; flex-wrap: nowrap; }
  .hs-num { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
  .hero-actions { flex-wrap: wrap; }
}

/* HP biasa (satu kolom): padat dan berurutan */
@media (max-width: 767px) {
  .hero { padding: 96px 0 48px; }
  .hero-body { gap: 28px; }
  .hero-right { margin-top: 0; }
}

/* 2) Badge hero: latar oval + bingkai tipis + ikon kilau (mengikuti referensi) */
.hero .hero-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 20px 10px 16px; margin-bottom: 26px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  font-size: clamp(.78rem, 1.6vw, .95rem); font-weight: 600; letter-spacing: 0;
  color: rgba(255,255,255,.92);
  box-shadow: 0 0 24px rgba(188,215,230,.06);
}
.hero .hero-pill .pill-ico { width: 18px; height: 18px; flex: none; color: var(--cyan); filter: drop-shadow(0 0 6px rgba(188,215,230,.55)); }
.hero .hero-pill span:last-child { text-decoration: none; }

/* 3) Judul hero lebih tebal & rapat (ExtraBold seperti referensi); baris ke-3 sebelumnya hanya 700 */
.hero .hero-title { font-weight: 800; letter-spacing: -.02em; line-height: 1.08; -webkit-text-stroke: .035em currentColor; paint-order: stroke fill; }
.hero .hero-title .ht-line,
.hero .hero-title .ht-accent { font-weight: 800; }
.hero .hero-title .ht-accent { color: rgba(255,255,255,.78); }
html[lang="zh"] .hero .hero-title { letter-spacing: 0; -webkit-text-stroke-width: .02em; }

/* HP kecil: tiga statistik tetap satu baris */
@media (max-width: 560px) {
  .hero-stats { flex-wrap: nowrap; gap: 12px; justify-content: space-between; }
  .hero-stats .hs-item { flex: 1 1 0; min-width: 0; text-align: left; }
  .hs-num { font-size: clamp(1.5rem, 8vw, 2rem); }
  .hs-label { font-size: .58rem; letter-spacing: .08em; }
  .hero-actions { flex-direction: row; flex-wrap: wrap; }
  .hero-actions .btn-main, .hero-actions .btn-line { flex: 1 1 140px; text-align: center; justify-content: center; }
}
@media (max-width: 560px) {
  .hero-actions .btn-main, .hero-actions .btn-line { white-space: nowrap; padding-left: 14px; padding-right: 14px; font-size: .74rem; letter-spacing: .08em; }
}

/* ══════════ BAHASA HINDI & SPANYOL ══════════ */
/* Devanagari: font cadangan yang benar, tanpa jarak antarhuruf (merusak garis atas huruf) */
html[lang="hi"] { --font-all: 'Plus Jakarta Sans', 'Noto Sans Devanagari', 'Nirmala UI', 'Mangal', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
html[lang="hi"] body, html[lang="hi"] body * { letter-spacing: 0 !important; }
html[lang="hi"] .hero .hero-title { -webkit-text-stroke: 0; line-height: 1.32; }
html[lang="hi"] .section-title, html[lang="hi"] .cta-title { line-height: 1.3; }
html[lang="hi"] .hero-tagline, html[lang="hi"] .section-tag, html[lang="hi"] .prc-eyebrow { text-transform: none; }
html[lang="hi"] .hero-desc, html[lang="hi"] .about-p, html[lang="hi"] .prc-desc, html[lang="hi"] .svc-card p,
html[lang="hi"] .hiw-card p, html[lang="hi"] .al-text span, html[lang="hi"] .faq-list p, html[lang="hi"] .footer-desc { line-height: 1.8; }
html[lang="hi"] .prc-list li, html[lang="hi"] .al-text strong, html[lang="hi"] .faq-list summary { line-height: 1.6; }

/* Judul hero Hindi/Spanyol lebih panjang: boleh turun baris, tetap seimbang */
html[lang="hi"] .hero .hero-title .ht-line,
html[lang="es"] .hero .hero-title .ht-line { white-space: normal; text-wrap: balance; }
html[lang="es"] .hero .hero-title { font-size: clamp(1.4rem, 3vw, 2.3rem); }
@media (min-width: 1101px) { html[lang="es"] .hero .hero-title { font-size: clamp(1.8rem, 2.9vw, 2.6rem); } }

/* Teks lebih panjang: cegah meluber di tombol, menu, kartu harga */
.nav-cta, .btn-main, .btn-line, .prc-btn-main, .prc-btn-line, .btn-wa { text-align: center; }
html[lang="es"] .nav-menu a, html[lang="hi"] .nav-menu a { white-space: nowrap; }
.prc-list li span:last-child, .al-text, .svc-card p, .faq-list summary { overflow-wrap: anywhere; }
.lang-menu { min-width: 170px; }


/* ══════════ REVISI 23 OKT (5): tata letak rapat tanpa ruang kosong, badge paket, tombol navbar, footer rata ══════════ */

/* 1) Jarak antar bagian dirapatkan di semua ukuran layar */
.section { padding: 48px 0; }
.section-header { margin-bottom: 32px; }
.hero { min-height: 0; padding: 108px 0 40px; align-items: center; }
.hero .scroll-hint { display: none; }
.hero-body { gap: 32px; }
.hero-stats { margin-top: 28px; padding-top: 20px; }
.hero-actions { margin-bottom: 0; }
.hero-desc { margin-bottom: 18px; }
.hero-tagline { margin: 0 0 22px; }
.hero .hero-pill { margin-bottom: 18px; }
.hero-title { margin-bottom: 16px; }
.marquee-wrap { padding: 14px 0; }

.about-wrap { gap: 40px; align-items: center; }
.about-left .section-title { margin-bottom: 16px; }
.about-p { margin-bottom: 12px; }
.about-statement { margin: 18px 0 18px; }
.about-list { margin-top: 18px; gap: 14px 28px; }
.about-card { max-width: 560px; width: 100%; }
.about-card .ac-stats { padding: 18px 24px 22px; }
.about-visual-wrap { background: transparent; }

.hiw-card { padding: 28px 24px; }
.hiw-num { margin-bottom: 6px; }
.hiw-icon { margin-bottom: 10px; }
.hiw-card h3 { margin-bottom: 8px; }
.hiw-arrow { padding: 0 14px; }

.svc-grid { gap: 0 40px; }
.svc-card { padding: 26px 8px 28px 0; }
.svc-icon-wrap { margin-bottom: 12px; }
.svc-card h3 { margin-bottom: 8px; }
.svc-line { display: none; }

.pr-grid { gap: 18px; align-items: stretch; }
.pr-card { padding: 28px 24px; display: flex; flex-direction: column; scroll-margin-top: 92px; }
.prc-head { margin-bottom: 14px; }
.prc-desc { margin: 0 0 18px; }
.prc-list { gap: 10px; margin-bottom: 22px; flex: 1 1 auto; }
.pr-card .prc-btn-main, .pr-card .prc-btn-line { margin-top: auto; }

.faq-list details { padding: 16px 0; }
.faq-list p { margin-top: 10px; }
.cta-block { padding: 48px 40px; }
.cta-title { margin-bottom: 12px; }
.cta-desc { margin-bottom: 22px; }

/* 2) Badge paket: bentuk oval berbingkai (TELETUBBIES / ULTRAMAN / THE AVENGERS) */
.prc-eyebrow {
  display: inline-flex; align-items: center; align-self: flex-start;
  margin: 0 0 16px; padding: 6px 16px;
  border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
  background: rgba(255,255,255,.05);
  font-family: var(--font-head); font-size: .7rem; font-weight: 700;
  letter-spacing: .16em; line-height: 1.2; text-transform: uppercase;
  color: rgba(255,255,255,.88);
}
.pr-card.featured .prc-eyebrow { border-color: rgba(167,139,250,.6); background: rgba(123,47,255,.16); }

/* sorotan singkat pada kartu Core setelah tombol "Mulai Sekarang" ditekan */
@keyframes coreGlow {
  0%   { box-shadow: 0 0 0 0 rgba(167,139,250,0); }
  25%  { box-shadow: 0 0 0 3px rgba(167,139,250,.85), 0 0 46px rgba(123,47,255,.55); }
  100% { box-shadow: 0 0 0 0 rgba(167,139,250,0); }
}
.pr-card.is-target { animation: coreGlow 2.2s ease-out; }

/* 3) Tombol "Mulai Sekarang" di navbar */
.nav-right .nav-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 20px; font-size: .74rem; line-height: 1; white-space: nowrap;
  color: #fff; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, #7b2fff, #a78bfa);
  box-shadow: 0 6px 22px rgba(123,47,255,.35);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s;
}
.nav-right .nav-cta:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 10px 28px rgba(123,47,255,.5); }
.nav-right .nav-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* 4) Footer: teks rata (justify) dan kolom mengisi lebar penuh */
.footer { padding: 36px 0 0; }
.footer-grid { grid-template-columns: minmax(0, 1.7fr) repeat(3, auto); gap: 32px 56px; margin-bottom: 24px; justify-content: space-between; align-items: start; }
.footer-brand .footer-claim, .footer-brand .footer-desc { max-width: none; text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; text-wrap: auto; }
.footer-brand .footer-claim { margin: 14px 0 10px; text-align: left; }
.footer-brand .footer-desc { margin: 0 0 8px; line-height: 1.75; }
.footer-brand .brand-logo { height: 96px; }
.footer-col h4 { margin-bottom: 14px; }
.footer-col ul { gap: 9px; }
.footer-bottom { padding: 16px 0; justify-content: space-between; }

/* ── Tablet ── */
@media (max-width: 1023px) {
  .section { padding: 40px 0; }
  .section-header { margin-bottom: 26px; }
  .hero { padding: 96px 0 32px; }
  .about-wrap { gap: 28px; }
  .about-card { max-width: 520px; }
  .pr-grid { gap: 16px; }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 24px; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ── HP ── */
@media (max-width: 767px) {
  .section { padding: 32px 0; }
  .section-header { margin-bottom: 22px; }
  .hero { padding: 84px 0 26px; }
  .hero-body { gap: 20px; }
  .hero-stats { margin-top: 20px; padding-top: 16px; }
  .marquee-wrap { padding: 10px 0; }
  .about-wrap { gap: 22px; }
  .about-list { margin-top: 14px; gap: 12px; }
  .hiw-card { padding: 22px 18px; }
  .hiw-arrow { padding: 4px 0; }
  .svc-card { padding: 20px 4px 22px 0; }
  .pr-grid { gap: 14px; max-width: 100%; }
  .pr-card { padding: 22px 18px; }
  .prc-desc { margin-bottom: 14px; }
  .prc-list { margin-bottom: 18px; }
  .faq-list details { padding: 14px 0; }
  .faq-list summary { font-size: 1rem; }
  .cta-block { padding: 32px 18px; }
  .footer { padding: 28px 0 0; }
  .footer-grid { gap: 18px 14px; margin-bottom: 14px; }
  .footer-brand .brand-logo { height: 76px; }
  .footer-col h4 { margin-bottom: 10px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 0; }
  .footer-legal { padding-right: 64px; }       /* tidak tertutup tombol WhatsApp */
  .footer-bottom p { padding-right: 64px; }
  .nav-wrap { gap: 8px; }
  .nav-right { gap: 8px; }
  .nav-right .nav-cta { padding: 8px 12px; font-size: .66rem; letter-spacing: .05em; }
}
@media (max-width: 479px) {
  .section { padding: 28px 0; }
  .hero { padding: 80px 0 22px; }
  .pr-card { padding: 20px 16px; }
  .cta-block { padding: 28px 16px; }
}
@media (max-width: 359px) {
  .nav-right .nav-cta { padding: 7px 9px; font-size: .6rem; }
}
@media (prefers-reduced-motion: reduce) { .pr-card.is-target { animation: none; outline: 2px solid #a78bfa; } }

/* footer HP: tiga kolom sama lebar, judul tidak bertabrakan */
@media (max-width: 767px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-col h4 { font-size: .8rem; letter-spacing: .06em; }
  .footer-col a { font-size: .82rem; }
  .footer-bottom, .footer-bottom p, .footer-legal { text-align: left; }
  .footer-legal li + li::before { margin: 0 10px; }
  .hero { padding-top: 90px; }
}
@media (max-width: 767px) {
  .footer-legal { gap: 6px 18px; }
  .footer-legal li + li::before { display: none; }
}

/* Kartu harga: badge, nama paket, harga, dan deskripsi rata tengah */
.pr-card .prc-eyebrow { align-self: center; }
.pr-card .prc-head { text-align: center; }
.pr-card .prc-name { display: block; text-align: center; }
.pr-card .prc-price { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; text-align: center; }
.pr-card .prc-per { text-align: center; }
.pr-card .prc-desc { text-align: center; }

/* ══════════ REVISI 23 OKT (6): deskripsi paket PRIME & SIGNATURE rata kiri ══════════ */
.pr-grid .pr-card:nth-child(2) .prc-desc,
.pr-grid .pr-card:nth-child(3) .prc-desc { text-align: left; }

/* ══════════ REVISI 24 OKT: alamat email di footer ══════════ */
.footer-col a.footer-email { overflow-wrap: anywhere; word-break: break-word; }


/* ══════════ REVISI 24 OKT: menu mobile tidak lagi menimpa konten saat scroll ══════════
   Penyebab: backdrop-filter pada .nav.stuck membuat elemen "fixed" di dalamnya (.nav-menu)
   mengikuti tinggi bar atas, bukan tinggi layar. Blur dipindah ke lapisan terpisah (::before). */
.nav.stuck {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0,0,0,.88);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease);
}
.nav.stuck::before { opacity: 1; }

@media (max-width: 1023px) {
  .nav-menu {
    height: 100vh;
    height: 100dvh;           /* pas di layar HP meski bar browser naik-turun */
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 90px 24px 40px;
    background: #000;
  }
  .nav-right, .brand { position: relative; z-index: 1000; }   /* logo, bahasa & tombol X tetap di atas menu */
}


/* ══════════ REVISI 24 OKT: footer — urutan teks & baris hak cipta/legal lebih rapi ══════════ */
.footer-brand .footer-desc  { margin: 6px 0 16px; }     /* kalimat pembuka (di bawah logo) */
.footer-brand .footer-claim { margin: 0; }              /* judul tegas di bawah kalimat pembuka */

@media (max-width: 767px) {
  .footer-bottom { align-items: stretch; gap: 0; padding: 18px 0 92px; }   /* ruang bawah agar tombol WhatsApp tidak menutupi tautan */
  .footer-bottom p { padding: 0 0 14px; font-size: .78rem; line-height: 1.6; letter-spacing: .02em; }
  .footer-legal { flex-direction: column; flex-wrap: nowrap; gap: 0; padding: 0; width: 100%; }
  .footer-legal li { border-top: 1px solid rgba(255,255,255,.08); }
  .footer-legal li + li::before { display: none; }
  .footer-legal a { display: block; padding: 13px 0; font-size: .82rem; letter-spacing: .02em; color: var(--w60); }
}