/* ==========================================================================
   KARATIME — karatime.my
   Malaysia's Premium Smart Karaoke System
   Design system derived from the 20251212 website-karatime.my artwork.
   ========================================================================== */

:root{
  /* Surfaces — the artwork is a deep navy that fades to near-black */
  --ink:#02030c;
  --ink-2:#060a1e;
  --ink-3:#0b1030;
  --panel:rgba(255,255,255,.045);
  --panel-2:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.22);

  /* Brand light — the streak gradient runs cyan → blue → violet → magenta */
  --cyan:#2ee6ff;
  --blue:#3b74ff;
  --violet:#8b5cf6;
  --magenta:#e948ff;
  --gold:#e8b96a;

  --text:#ffffff;
  --muted:rgba(255,255,255,.66);
  --muted-2:rgba(255,255,255,.45);

  --grad:linear-gradient(90deg,var(--cyan),var(--blue) 38%,var(--violet) 68%,var(--magenta));
  --grad-soft:linear-gradient(135deg,rgba(46,230,255,.18),rgba(139,92,246,.18));

  --shell:1240px;
  --pad:clamp(20px,5vw,48px);
  --r:18px;
  --r-lg:26px;

  --f-display:"Poppins","Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-body:"Inter","Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:var(--f-body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;line-height:1.1;margin:0;letter-spacing:-.02em}
p{margin:0}

/* Skip link — keyboard users land on the nav first otherwise */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:#fff;color:#000;padding:12px 18px;border-radius:0 0 10px 0}
.skip:focus{left:0}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.shell{width:100%;max-width:var(--shell);margin:0 auto;padding-inline:var(--pad)}
.section{position:relative;padding:clamp(64px,9vw,120px) 0}
.section--tight{padding:clamp(48px,6vw,80px) 0}

/* Every dark band gets its own streak wash so the page reads as one artwork
   instead of a stack of flat boxes. */
.band{position:relative;isolation:isolate;overflow:hidden}
.band::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(120% 90% at 50% 0%,#0d1440 0%,#050a22 45%,#02030c 100%);
}
.band--streak::after{
  content:"";position:absolute;inset:-20% -10%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(52% 38% at 12% 28%,rgba(233,72,255,.20),transparent 70%),
    radial-gradient(48% 40% at 88% 22%,rgba(46,230,255,.20),transparent 70%),
    radial-gradient(70% 55% at 50% 108%,rgba(59,116,255,.28),transparent 72%);
  filter:blur(6px);
}
.band--flat::before{background:linear-gradient(180deg,#02030c,#04061a)}

/* ── Type ───────────────────────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--f-display);font-weight:700;font-size:.74rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--cyan);margin:0 0 14px
}
.h1{font-size:clamp(2.4rem,6.4vw,4.6rem)}
.h2{font-size:clamp(1.9rem,4.4vw,3.2rem)}
.h3{font-size:clamp(1.25rem,2.4vw,1.7rem)}
.lede{font-size:clamp(1rem,1.6vw,1.16rem);color:var(--muted);max-width:62ch}
.centered{text-align:center}
.centered .lede{margin-inline:auto}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}


/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-display);font-weight:700;font-size:.95rem;letter-spacing:.01em;
  padding:14px 26px;border-radius:999px;border:1px solid transparent;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
.btn svg{width:18px;height:18px;flex:none}
.btn--primary{background:var(--grad);color:#04061a;box-shadow:0 12px 34px -14px rgba(59,116,255,.9)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 18px 44px -14px rgba(139,92,246,.95)}
.btn--ghost{border-color:var(--line-2);background:rgba(255,255,255,.04);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;transform:translateY(-2px)}
.btn--wa{background:#25d366;color:#04220f}
.btn--wa:hover{transform:translateY(-2px);box-shadow:0 16px 36px -16px rgba(37,211,102,.9)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.centered .btn-row{justify-content:center}

/* ── Header ─────────────────────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:80;transition:background .25s ease,border-color .25s ease,backdrop-filter .25s}
.hdr::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(2,3,12,0);transition:background .25s ease}
.hdr.is-stuck::after{background:rgba(2,3,12,.82);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:20px;height:76px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand img.lockup{height:44px;width:auto}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{
  font-family:var(--f-display);font-weight:600;font-size:.88rem;padding:9px 15px;border-radius:999px;
  color:var(--muted);transition:color .18s,background .18s;white-space:nowrap
}
.nav a:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.1)}
.hdr-cta{display:flex;align-items:center;gap:10px;flex:none}
.lang{
  display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;flex:none;
  background:rgba(255,255,255,.04)
}
.lang button{
  background:none;border:0;padding:7px 13px;font-family:var(--f-display);font-weight:700;font-size:.76rem;
  color:var(--muted-2);cursor:pointer;transition:background .18s,color .18s
}
.lang button[aria-pressed="true"]{background:var(--grad);color:#04061a}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.04);cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:18px;height:2px;background:#fff;position:relative;transition:background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:#fff;transition:transform .22s ease}
.burger span::before{top:-6px}.burger span::after{top:6px}
.hdr.is-open .burger span{background:transparent}
.hdr.is-open .burger span::before{transform:translateY(6px) rotate(45deg)}
.hdr.is-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:960px){
  .burger{display:inline-flex}
  .nav{
    position:fixed;inset:76px 0 auto;flex-direction:column;align-items:stretch;gap:2px;
    background:rgba(3,5,20,.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--line);
    padding:14px var(--pad) 26px;margin:0;
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s
  }
  .hdr.is-open .nav{transform:none;opacity:1;pointer-events:auto}
  .nav a{padding:14px 12px;font-size:1rem;border-radius:12px}
  .hdr-cta .btn{display:none}
  .hdr-cta{margin-left:auto}
  .hdr-in{gap:12px}
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;padding:clamp(28px,6vw,86px) 0 clamp(40px,7vw,96px)}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(60% 44% at 50% 0%,#1a2470 0%,transparent 68%),
    radial-gradient(100% 70% at 50% 100%,rgba(59,116,255,.18) 0%,transparent 70%),
    linear-gradient(180deg,#050b24,#02030c 78%);
}
.hero-streaks{
  position:absolute;inset:-15% -12% auto;height:120%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(46% 30% at 8% 42%,rgba(233,72,255,.30),transparent 70%),
    radial-gradient(44% 28% at 92% 38%,rgba(46,230,255,.28),transparent 70%),
    radial-gradient(60% 34% at 50% 96%,rgba(59,116,255,.36),transparent 72%);
  filter:blur(8px);
  animation:drift 18s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:translate3d(-1.5%,0,0) scale(1)}to{transform:translate3d(1.5%,-2%,0) scale(1.04)}}
.stroke-text{
  font-family:var(--f-display);font-weight:800;font-style:italic;
  -webkit-text-stroke:1px rgba(255,255,255,.13);color:transparent;
}
.hero-word{
  position:absolute;top:clamp(10px,4vw,44px);left:50%;transform:translateX(-50%);
  font-size:clamp(4rem,15vw,11rem);white-space:nowrap;z-index:-1;pointer-events:none;user-select:none
}
/* On a phone it lands straight on top of the wordmark, so it only runs where
   there is room for it to read as depth. */
@media (max-width:900px){.hero-word{display:none}}
.hero-in{position:relative;text-align:center;display:grid;justify-items:center;gap:clamp(14px,2.4vw,22px)}
.hero-in .btn-row{justify-content:center}
.hero-logo{width:min(340px,58vw)}
.hero-tag{
  font-family:var(--f-display);font-weight:600;font-size:clamp(.95rem,2vw,1.25rem);
  color:rgba(255,255,255,.86);letter-spacing:.02em;
  line-height:1.65;margin:0
}
h1.hero-tag,html[lang="zh"] h1.hero-tag{letter-spacing:.02em}
.hero-shot{width:min(1100px,100%);margin-top:6px;filter:drop-shadow(0 40px 70px rgba(0,0,0,.6))}

/* ── Cards / grids ──────────────────────────────────────────────────────── */
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}

.card{
  position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 24px;transition:transform .22s ease,border-color .22s ease,background .22s ease;
}
.card:hover{transform:translateY(-4px);border-color:var(--line-2);background:var(--panel-2)}
.card h3{font-size:1.08rem;margin-bottom:8px}
.card p{color:var(--muted);font-size:.94rem}
.card-num{
  font-family:var(--f-display);font-weight:800;font-size:2.1rem;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:6px
}
.icon-badge{
  position:relative;
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;
  background:var(--grad-soft);border:1px solid var(--line);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s
}
/* A slow breath of light behind the icon, so a page of point cards is never
   completely still without ever being busy. */
.icon-badge::after{
  content:"";position:absolute;inset:-6px;border-radius:18px;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(46,230,255,.4),transparent 70%);
  opacity:0;animation:badgeBreath 4.2s ease-in-out infinite
}
@keyframes badgeBreath{0%,100%{opacity:0;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
.card:hover .icon-badge{transform:translateY(-2px) scale(1.06);border-color:var(--line-2)}
.icon-badge svg{width:22px;height:22px;stroke:var(--cyan);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Spec chips inside the "why us" cards */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{
  font-family:var(--f-display);font-weight:700;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;border:1px solid var(--line-2);color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.05)
}

/* ── Split feature rows ─────────────────────────────────────────────────── */
.split{display:grid;gap:clamp(28px,5vw,64px);align-items:center;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.split--flip .split-media{order:-1}
@media (max-width:800px){.split--flip .split-media{order:0}}
.split-media img{width:100%;border-radius:var(--r-lg)}
.split-media.is-plain img{border-radius:0;filter:drop-shadow(0 30px 50px rgba(0,0,0,.55));max-height:440px;width:auto;max-width:100%;margin-inline:auto}
.split-copy h2{margin-bottom:16px}
.split-copy .lede{margin-bottom:22px}

/* Bullet list with a gradient tick */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ticks li{display:flex;gap:12px;align-items:flex-start;color:var(--muted);font-size:.96rem}
.ticks li::before{
  content:"";flex:none;width:20px;height:20px;margin-top:2px;border-radius:50%;
  background:var(--grad);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}

/* ── Big stat ───────────────────────────────────────────────────────────── */
.stat{font-family:var(--f-display);font-weight:800;font-size:clamp(3rem,10vw,6.4rem);line-height:.95;letter-spacing:-.04em}
.stat-sub{font-family:var(--f-display);font-weight:700;font-size:clamp(1.2rem,3.4vw,2.2rem);color:rgba(255,255,255,.9)}
.wave{display:flex;align-items:flex-end;justify-content:center;gap:5px;height:64px;margin:26px 0 22px}
.wave i{display:block;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--cyan),var(--violet));opacity:.85;animation:bounce 1.6s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){
  .wave i,.hero-streaks{animation:none}
  html{scroll-behavior:auto}
}

/* ── Language pills (song languages) ────────────────────────────────────── */
.pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.pills b{font-weight:600;margin-left:4px;opacity:.6;font-variant-numeric:tabular-nums}
.lib-asof{margin-top:18px;font-size:.84rem;color:var(--muted-2)}
/* ── Searching the song list (js/songsearch.js) ─────────────────────────── */
.ss-box{display:flex;gap:10px;align-items:stretch}
.ss-box input{flex:1;min-width:0;padding:14px 18px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid var(--line-2);
  color:#fff;font:inherit;font-size:1rem;transition:border-color .18s,background .18s}
.ss-box input:focus{outline:none;border-color:var(--cyan);background:rgba(255,255,255,.1);box-shadow:0 0 0 3px rgba(46,230,255,.16)}
.ss-box input::placeholder{color:rgba(255,255,255,.38)}
.ss-box .btn{flex:none}
.ss-box--home{max-width:560px;margin:26px auto 0}
.ss-note{margin:18px 2px 10px;color:var(--muted);font-size:.92rem}
.ss-note small{display:block;margin-top:4px;color:var(--muted-2);font-size:.8rem}
.ss-note a{color:var(--cyan);text-decoration:underline}
.ss-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ss-song{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-radius:12px;border:1px solid var(--line);background:var(--panel);text-align:left}
.ss-song>div{flex:1;min-width:0}
.ss-song b{display:block;font-weight:600;overflow-wrap:anywhere}
.ss-meta{display:block;margin-top:3px;font-size:.85rem;color:var(--muted);overflow-wrap:anywhere}
.ss-no,.ss-date{color:var(--muted-2);font-variant-numeric:tabular-nums}
button.ss-no{all:unset;cursor:copy;color:var(--muted-2);font-variant-numeric:tabular-nums;border-bottom:1px dotted rgba(255,255,255,.25)}
button.ss-no:hover,button.ss-no:focus-visible{color:var(--cyan);border-bottom-color:var(--cyan)}
button.ss-no.is-copied{color:#6ee7b7;border-bottom-color:transparent}
.ss-rank{flex:none;width:30px;height:30px;margin-top:1px;border-radius:9px;display:grid;place-items:center;font-style:normal;
  font-family:var(--f-display);font-weight:700;font-size:.82rem;background:rgba(255,255,255,.07);color:var(--muted);font-variant-numeric:tabular-nums}
.ss-song:nth-child(-n+3) .ss-rank{background:var(--grad);color:#04061a}
.ss-singer,.ss-link{all:unset;cursor:pointer;color:rgba(255,255,255,.88);border-bottom:1px dotted rgba(255,255,255,.35)}
.ss-singer:hover,.ss-link:hover,.ss-singer:focus-visible,.ss-link:focus-visible{color:var(--cyan);border-bottom-color:var(--cyan)}
.ss-link{color:var(--cyan)}
/* Songs page: one chip per language, then Popular / Just added */
.ss-langs{margin-top:18px}
.ss-langs .chip{text-transform:none;letter-spacing:0;font-size:.8rem}
.ss-tabs{display:flex;gap:8px;margin-top:10px}
.ss-tabs .chip{text-transform:none;letter-spacing:0;font-size:.86rem;padding:8px 16px}
.ss-tabs[hidden]{display:none}
.ss-chip-more{border-style:dashed}
.ss-results[aria-busy]{opacity:.55;transition:opacity .2s}
.ss-more-row{text-align:center;margin-top:16px}
.ss-more-row .btn[hidden]{display:none}
@media (max-width:560px){
  /* One row to swipe, so the songs start above the fold */
  .ss-langs{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1 * var(--pad));padding:2px var(--pad);scrollbar-width:none}
  .ss-langs::-webkit-scrollbar{display:none}
  .ss-langs .chip{flex:none}
  .ss-song{padding:11px 13px;gap:10px}
}
/* Home: "Do we have your song?" — answered in place, with the time it took */
.hc{max-width:620px;margin:34px auto 0;padding:clamp(18px,3vw,28px);border-radius:var(--r-lg,22px);
  border:1px solid var(--line-2);background:linear-gradient(140deg,rgba(255,255,255,.07),rgba(255,255,255,.02))}
.hc-q{font-family:var(--f-display);font-weight:800;font-size:clamp(1.3rem,3vw,1.7rem);margin-bottom:14px}
.hc .ss-box--home{margin:0}
.ss-try{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin-top:12px;font-size:.84rem;color:var(--muted-2)}
.ss-try .chip{text-transform:none;letter-spacing:0;font-size:.8rem}
.hc-out{margin-top:18px;text-align:left;transition:opacity .2s}
.hc-out.is-busy{opacity:.5}
.hc-yes,.hc-no{font-family:var(--f-display);font-weight:800;font-size:1.5rem;line-height:1.2}
.hc-yes{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hc-sub{margin:4px 0 12px;color:var(--muted);font-size:.92rem}
.hc-all{display:inline-block;margin-top:12px;color:var(--cyan);font-weight:600;text-decoration:none}
.hc-all:hover{text-decoration:underline}
.hc-req{margin-top:4px}
.hc-speed{display:flex;align-items:baseline;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);font-size:.86rem}
.hc-speed b{flex:none;font-family:var(--f-display);font-weight:800;font-size:1.7rem;line-height:1;font-variant-numeric:tabular-nums;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Home: adding a song — our own team on a Malaysian server vs a library on an overseas
   server. Our figure is measured (ktPublic/requests); the other side carries none. */
.vs{max-width:760px;margin:30px auto 0}
.vs-q{font-family:var(--f-display);font-weight:800;font-size:clamp(1.2rem,2.6vw,1.5rem);margin-bottom:14px}
.vs-grid{display:grid;grid-template-columns:1fr auto 1.25fr;gap:12px;align-items:stretch;text-align:left}
.vs-side{padding:20px;border-radius:20px;border:1px solid var(--line)}
.vs-them{background:rgba(255,255,255,.03);color:var(--muted)}
.vs-us{border-color:transparent;background:linear-gradient(#0a0c22,#0a0c22) padding-box,var(--grad) border-box;box-shadow:0 18px 50px -28px rgba(59,116,255,.8)}
.vs-mid{align-self:center;justify-self:center;font-family:var(--f-display);font-weight:800;font-size:.85rem;letter-spacing:.1em;color:var(--muted-2)}
.vs-ic{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.vs-us .vs-ic{stroke:var(--cyan)}
.vs-who{font-family:var(--f-display);font-weight:700;margin:10px 0 6px}
.vs-us .vs-who{color:#fff}
.vs-how{font-size:.9rem;line-height:1.55}
.vs-us .vs-how{color:var(--muted)}
.vs-steps{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:.76rem;font-weight:600}
.vs-steps>span{padding:5px 10px;border-radius:999px;background:rgba(46,230,255,.1);color:#bdf4ff;white-space:nowrap}
.vs-steps i{flex:1;min-width:10px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--cyan),transparent) 0 0/200% 100%;animation:vsFlow 2.4s linear infinite}
@keyframes vsFlow{from{background-position:100% 0}to{background-position:-100% 0}}
.vs-fig{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.vs-big{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:.86rem}
.vs-big b{font-family:var(--f-display);font-weight:800;font-size:2rem;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.vs-recent{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:4px;font-size:.8rem;color:var(--muted-2)}
.vs-recent b{color:rgba(255,255,255,.85);font-weight:600}
.vs-cta{margin-top:18px}
/* Home: fast song updates — words and the two lists that show it */
.upd{margin:16px 0 0;padding:18px 20px;border-radius:20px;border:1px solid rgba(46,230,255,.28);text-align:left;
  background:linear-gradient(140deg,rgba(46,230,255,.08),rgba(139,92,246,.06))}
.upd-h{font-family:var(--f-display);font-weight:800;font-size:1.15rem;letter-spacing:.02em;margin-bottom:12px;text-align:center}
.upd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.upd-t{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:16px;background:rgba(0,0,0,.18);text-decoration:none;color:inherit;
  transition:background .18s}
.upd-t:hover{background:rgba(255,255,255,.06)}
.upd-t .vs-ic{stroke:var(--cyan)}
.upd-t b{font-family:var(--f-display);font-weight:700;font-size:1.02rem}
.upd-go{color:var(--cyan);font-weight:600;font-size:.86rem}
.upd-new{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.upd-new[hidden]{display:none}
.upd-new-l{font-size:.78rem;font-weight:700;letter-spacing:.06em;color:#bdf4ff;margin-right:2px}
.upd-new a{display:inline-flex;align-items:baseline;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.06);
  color:#fff;text-decoration:none;font-size:.82rem;max-width:100%}
.upd-new a b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upd-new a small{color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.upd-new a:hover{background:rgba(46,230,255,.14)}
.lib-speed{margin:-12px auto 24px;max-width:520px;text-align:center;color:#bdf4ff;font-weight:600}
/* Request page: the request's number, and where a request has got to */
.req-no{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;margin:6px auto 22px;padding:14px 18px;
  max-width:520px;border-radius:16px;border:1px dashed rgba(46,230,255,.45);background:rgba(46,230,255,.06)}
.req-no[hidden]{display:none}
.req-no-l{width:100%;text-align:center;font-size:.82rem;color:var(--muted)}
.req-no b{font-family:var(--f-display);font-weight:800;font-size:1.45rem;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.req-no .chip{text-transform:none;letter-spacing:0}
.req-no-go{width:100%;text-align:center;font-size:.86rem;color:var(--cyan);text-decoration:none}
.req-no-go:hover{text-decoration:underline}
.req-tell{margin:-8px auto 22px;max-width:520px;text-align:center;color:var(--muted);font-size:.92rem}
.req-status{margin-top:22px}
.req-status .ss-box{margin-top:12px}
.req-status input{text-transform:uppercase;letter-spacing:.04em}
.req-status input::placeholder{text-transform:none;letter-spacing:0}
.req-out{margin-top:18px}
.req-what{font-size:1.02rem}
.req-what span{display:block;margin-top:2px;font-size:.82rem;color:var(--muted-2)}
.req-steps{list-style:none;display:flex;gap:6px;margin:14px 0 12px;padding:0;counter-reset:st}
.req-steps li{flex:1;position:relative;padding-top:12px;font-size:.78rem;font-weight:600;color:var(--muted-2);text-align:center}
.req-steps li::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;border-radius:5px;background:rgba(255,255,255,.1)}
.req-steps li.is-done{color:#fff}
.req-steps li.is-done::before{background:var(--grad)}
.req-steps li.is-now{color:#bdf4ff}
.req-steps li.is-now::before{background:linear-gradient(90deg,var(--cyan),rgba(46,230,255,.15));animation:stepPulse 1.6s ease-in-out infinite}
@keyframes stepPulse{50%{opacity:.45}}
.req-msg{margin:6px 0 10px;font-size:.95rem}
.req-msg.is-ok{color:#6ee7b7;font-weight:600}
.req-msg.is-err{color:#fca5a5}
.req-msg a{color:var(--cyan);text-decoration:underline}
.req-sub{margin-top:10px;font-size:.86rem;color:var(--muted)}
@media (prefers-reduced-motion:reduce){ .req-steps li.is-now::before{animation:none} }
@media (max-width:640px){ .vs-grid{grid-template-columns:1fr} .vs-mid{padding:2px 0} }
@media (prefers-reduced-motion:reduce){ .vs-steps i{animation:none;background:rgba(46,230,255,.5)} }
.ss-have{margin:-6px 0 22px;padding:16px 18px;border-radius:16px;border:1px solid rgba(46,230,255,.35);background:rgba(46,230,255,.07)}
.ss-have .ss-head{font-weight:600;margin-bottom:10px}
.ss-have .ss-song{background:rgba(0,0,0,.18)}
.ss-have .ss-more,.ss-have .ss-foot{margin-top:10px;font-size:.88rem;color:var(--muted)}
@media (max-width:560px){ .ss-box input{font-size:16px} .ss-box .btn{padding-inline:16px} }
.pills>span,.pills>a{
  font-family:var(--f-display);font-weight:600;font-size:.86rem;padding:9px 18px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:rgba(255,255,255,.85)
}
.pills>a{text-decoration:none;transition:background .18s,border-color .18s}
.pills>a:hover{background:rgba(255,255,255,.12);border-color:var(--line-2)}

/* ── Product cards ──────────────────────────────────────────────────────── */
.prod{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,54px);align-items:center;
  border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3.4vw,44px);
  background:linear-gradient(140deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  position:relative;overflow:hidden
}
.prod::after{
  content:"";position:absolute;inset:auto -20% -60% auto;width:70%;height:120%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(59,116,255,.22),transparent 72%);
}
.prod > *{position:relative;z-index:1}
.prod--flip .prod-shot{order:-1}
@media (max-width:860px){
  .prod{grid-template-columns:1fr}
  .prod--flip .prod-shot{order:0}
}
.prod-shot{display:grid;place-items:center;min-height:200px}
.prod-shot img{width:100%;max-width:520px;filter:drop-shadow(0 26px 44px rgba(0,0,0,.55))}
.prod-tag{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--f-display);font-weight:700;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);
  border:1px solid rgba(46,230,255,.35);background:rgba(46,230,255,.08);
  padding:6px 14px;border-radius:999px;margin-bottom:16px
}
.prod h3{font-size:clamp(1.7rem,3.6vw,2.5rem);margin-bottom:6px}
.prod-sub{font-family:var(--f-display);font-weight:600;color:rgba(255,255,255,.8);margin-bottom:16px}
.spec{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.spec li{display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.92rem}
@media (max-width:520px){.spec li{flex-direction:column;gap:4px}.spec span{text-align:left}}
.spec b{font-family:var(--f-display);font-weight:600;color:var(--muted-2);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;flex:none}
.spec span{text-align:right;color:rgba(255,255,255,.92);overflow-wrap:break-word;min-width:0}

/* ── Trust strip ────────────────────────────────────────────────────────── */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.trust-item{
  display:flex;gap:16px;align-items:flex-start;padding:22px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--panel)
}
.trust-item img{width:52px;flex:none}
.trust-item h4{font-size:1rem;margin-bottom:5px}
.trust-item p{font-size:.9rem;color:var(--muted)}

/* ── Forms ──────────────────────────────────────────────────────────────── */
.form{
  background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3.6vw,44px)
}
.field{margin-bottom:22px}
.field:last-of-type{margin-bottom:0}
.field > label{display:block;font-family:var(--f-display);font-weight:600;font-size:.92rem;margin-bottom:8px}
.field .req{color:var(--magenta);margin-left:3px}
.field .hint{display:block;font-size:.82rem;color:var(--muted-2);margin-top:-2px;margin-bottom:9px;font-weight:400}
/* Every input except the ones that are boxes to tick. Listing the types by
   name meant the password field on the staff sign-in matched nothing and fell
   back to the browser's own narrow box with its blue focus ring, next to a
   full-width email field. */
.field input:not([type=checkbox]):not([type=radio]),.field textarea,.field select{
  width:100%;padding:13px 16px;border-radius:12px;background:rgba(255,255,255,.06);
  border:1px solid var(--line);color:#fff;font:inherit;font-size:.96rem;transition:border-color .18s,background .18s
}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--cyan);background:rgba(255,255,255,.09);
  box-shadow:0 0 0 3px rgba(46,230,255,.16)
}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.32)}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.opt{
  display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;cursor:pointer;
  border:1px solid var(--line);background:rgba(255,255,255,.04);transition:border-color .18s,background .18s;
  font-size:.93rem
}
.opt:hover{border-color:var(--line-2);background:rgba(255,255,255,.07)}
.opt input{accent-color:#3b74ff;width:16px;height:16px;flex:none;margin:0}
.opt:has(input:checked){border-color:var(--cyan);background:rgba(46,230,255,.1)}
/* The request form's languages as pills that wrap (Rui, 3 Oct, a phone screenshot: "很长" —
   eight full-width rows): three or four to a row on a phone instead of one. */
#song-form .opts{display:flex;flex-wrap:wrap;gap:8px}
#song-form .opt{flex:0 0 auto;padding:9px 14px;border-radius:999px;gap:8px;font-size:.9rem}
#song-form .opt input{width:15px;height:15px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:.84rem;color:var(--muted-2);margin-top:16px}
.form-msg{
  margin-top:18px;padding:14px 18px;border-radius:12px;font-size:.93rem;display:none;
  border:1px solid var(--line);background:rgba(255,255,255,.05)
}
.form-msg.is-on{display:block}
.form-msg.is-ok{border-color:rgba(46,230,255,.45);background:rgba(46,230,255,.1)}
.form-msg.is-err{border-color:rgba(233,72,255,.5);background:rgba(233,72,255,.1)}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none!important}

/* Submitted state — replaces the form with the designer's thank-you copy */
.thanks{display:none;text-align:center;padding:clamp(28px,5vw,54px) 0}
.thanks.is-on{display:block}
.thanks .tick{
  width:74px;height:74px;border-radius:50%;margin:0 auto 22px;display:grid;place-items:center;
  background:var(--grad-soft);border:1px solid rgba(46,230,255,.4)
}
.thanks .tick svg{width:34px;height:34px;stroke:var(--cyan);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ── Contact ────────────────────────────────────────────────────────────── */
.showroom{border:1px solid var(--line);border-radius:var(--r);padding:26px;background:var(--panel)}
.showroom h3{font-size:1.15rem;margin-bottom:4px}
.showroom .city{font-family:var(--f-display);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);margin-bottom:12px}
.showroom address{font-style:normal;color:var(--muted);font-size:.95rem;margin-bottom:16px}
.contact-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.contact-list li{display:flex;gap:14px;align-items:flex-start}
.contact-list svg{width:20px;height:20px;flex:none;margin-top:3px;stroke:var(--cyan);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.contact-list a:hover{color:var(--cyan)}
.contact-list span{color:var(--muted)}

/* ── CTA band ───────────────────────────────────────────────────────────── */
.cta{
  border-radius:var(--r-lg);border:1px solid var(--line);text-align:center;
  padding:clamp(36px,6vw,72px) clamp(20px,4vw,48px);position:relative;overflow:hidden;
  background:linear-gradient(140deg,rgba(59,116,255,.18),rgba(233,72,255,.14))
}
.cta::after{
  content:"";position:absolute;inset:-40% -10% auto;height:160%;z-index:0;pointer-events:none;
  background:radial-gradient(50% 40% at 50% 0%,rgba(46,230,255,.22),transparent 70%)
}
.cta > *{position:relative;z-index:1}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.ftr{border-top:1px solid var(--line);background:#01020a;padding:clamp(44px,6vw,72px) 0 30px}
.ftr-grid{display:grid;gap:36px;grid-template-columns:1.4fr 1fr 1fr 1.2fr}
@media (max-width:880px){.ftr-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ftr-grid{grid-template-columns:1fr}}
.ftr h4{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);margin-bottom:16px;font-weight:700}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ftr a{color:var(--muted);font-size:.93rem;transition:color .18s}
.ftr a:hover{color:#fff}
.ftr-brand img.lockup{height:60px;width:auto;margin-bottom:20px}
.ftr-brand p{color:var(--muted);font-size:.93rem;max-width:34ch}
.socials{display:flex;gap:10px;margin-top:18px}
.socials a{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);display:grid;place-items:center;transition:border-color .18s,background .18s}
.socials a:hover{border-color:var(--line-2);background:rgba(255,255,255,.07)}
.socials svg{width:17px;height:17px;fill:rgba(255,255,255,.8)}
.ftr-bottom{
  margin-top:38px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-size:.85rem;color:var(--muted-2)
}

/* Floating WhatsApp — the fastest route to a salesperson on a phone */
.wa-float{
  position:fixed;right:18px;bottom:18px;z-index:70;width:56px;height:56px;border-radius:50%;
  background:#25d366;display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(37,211,102,.7);
  transition:transform .2s ease
}
.wa-float:hover{transform:scale(1.07)}
.wa-float svg{width:29px;height:29px;fill:#04220f}

/* ── Reveal on scroll ───────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.is-in{opacity:1;transform:none}
.rv[style*='--d']{transition-delay:var(--d)}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ── Language switching ─────────────────────────────────────────────────── */
[data-zh]{display:none}
html[lang="zh"] [data-en]{display:none}
html[lang="zh"] [data-zh]{display:inline}
html[lang="zh"] p[data-zh],html[lang="zh"] div[data-zh],html[lang="zh"] li[data-zh],
html[lang="zh"] h1[data-zh],html[lang="zh"] h2[data-zh],html[lang="zh"] h3[data-zh],
html[lang="zh"] h4[data-zh],html[lang="zh"] span.blk[data-zh]{display:block}
html[lang="zh"] body{font-family:"Noto Sans SC","Inter",-apple-system,sans-serif}
html[lang="zh"] h1,html[lang="zh"] h2,html[lang="zh"] h3,html[lang="zh"] h4{letter-spacing:0}

/* ── Page hero for interior pages ───────────────────────────────────────── */
.phero{position:relative;overflow:hidden;padding:clamp(56px,8vw,110px) 0 clamp(40px,5vw,70px);text-align:center}
.phero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(70% 60% at 50% 0%,#16205e 0%,#060a24 55%,#02030c 100%)
}
.phero::after{
  content:"";position:absolute;inset:-30% -10% auto;height:150%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(40% 34% at 14% 46%,rgba(233,72,255,.26),transparent 70%),
    radial-gradient(40% 32% at 86% 40%,rgba(46,230,255,.24),transparent 70%),
    radial-gradient(60% 40% at 50% 100%,rgba(59,116,255,.32),transparent 74%);
  filter:blur(8px)
}
.phero h1{font-size:clamp(2.2rem,6vw,3.9rem);margin-bottom:16px}

/* ── Admin inbox (staff only) ───────────────────────────────────────────── */
.req-row{border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;background:var(--panel);margin-bottom:14px}
.req-row .top{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;justify-content:space-between}
.req-row .song{font-family:var(--f-display);font-weight:700;font-size:1.1rem}
.req-row .when{font-size:.82rem;color:var(--muted-2)}
.req-row .meta{color:var(--muted);font-size:.92rem;margin-top:6px}
.req-row .acts{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.pill-btn{
  font-family:var(--f-display);font-weight:600;font-size:.8rem;padding:7px 14px;border-radius:999px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.05);cursor:pointer;transition:background .18s
}
.pill-btn:hover{background:rgba(255,255,255,.12)}
.pill-btn.is-on{background:var(--grad);color:#04061a;border-color:transparent}
.status-tag{font-family:var(--f-display);font-weight:700;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid var(--line-2);color:var(--muted)}
.status-tag.new{color:var(--cyan);border-color:rgba(46,230,255,.4);background:rgba(46,230,255,.1)}
.status-tag.added{color:#4ade80;border-color:rgba(74,222,128,.4);background:rgba(74,222,128,.1)}
.empty{text-align:center;color:var(--muted);padding:60px 20px;border:1px dashed var(--line);border-radius:var(--r)}

/* ── Agent finder ───────────────────────────────────────────────────────── */
.agent-search{
  flex:1;min-width:220px;padding:12px 16px;border-radius:12px;background:rgba(255,255,255,.06);
  border:1px solid var(--line);color:#fff;font:inherit;font-size:.95rem
}
.agent-search:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(46,230,255,.16)}
.agent-search::placeholder{color:rgba(255,255,255,.32)}
button.chip{cursor:pointer;font-family:var(--f-display);transition:background .18s,border-color .18s,color .18s}
button.chip:hover{background:rgba(255,255,255,.12)}
button.chip.is-on{background:var(--grad);color:#04061a;border-color:transparent}
#agent-list .showroom{display:flex;flex-direction:column}
#agent-list .showroom .btn-row{margin-top:auto}

/* ── Jalur Gemilang ─────────────────────────────────────────────────────── */
/* The flag is a national symbol: it is shown whole, at its exact 2:1 ratio,
   with nothing laid over it and no colour filter. The frame is around it. */
.flag-shot{margin:0;width:100%}
.flag-shot img{
  width:100%;height:auto;aspect-ratio:2/1;display:block;
  border-radius:10px;border:1px solid var(--line);
  box-shadow:0 26px 54px -22px rgba(0,0,0,.85)
}
.flag-shot figcaption{
  margin-top:12px;text-align:center;font-family:var(--f-display);font-weight:600;
  font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2)
}
html[lang="zh"] .flag-shot figcaption{letter-spacing:.12em}

/* ═══════════════════════════════════════════════════════════════════════════
   Motion & depth
   The brand artwork is light streaking through dark space; these are the
   moving parts of that idea. Everything here is decorative and every piece
   is switched off under prefers-reduced-motion at the bottom of this block.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Floating orbs ──────────────────────────────────────────────────────── */
.orbs{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;will-change:transform}
.orb-c{background:radial-gradient(circle,rgba(46,230,255,.55),transparent 70%)}
.orb-v{background:radial-gradient(circle,rgba(139,92,246,.55),transparent 70%)}
.orb-m{background:radial-gradient(circle,rgba(233,72,255,.45),transparent 70%)}
.orb-b{background:radial-gradient(circle,rgba(59,116,255,.5),transparent 70%)}
@keyframes orbFloat{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  25%{transform:translate3d(34px,-26px,0) scale(1.07)}
  50%{transform:translate3d(-24px,18px,0) scale(.94)}
  75%{transform:translate3d(18px,28px,0) scale(1.03)}
}
.orb{animation:orbFloat 22s ease-in-out infinite}

/* ── Cursor spotlight on cards ──────────────────────────────────────────── */
.spot{position:relative;overflow:hidden}
.spot::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .35s ease;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(46,230,255,.14),transparent 62%);
}
.spot:hover::before{opacity:1}

/* ── 3D tilt ────────────────────────────────────────────────────────────── */
.tilt{transform-style:preserve-3d;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.tilt-wrap{perspective:1000px}

/* ── Animated gradient border ───────────────────────────────────────────── */
@property --kt-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes borderSpin{to{--kt-angle:360deg}}
.gborder{position:relative;isolation:isolate}
.gborder::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--kt-angle),transparent 0deg,var(--cyan) 70deg,var(--violet) 150deg,var(--magenta) 210deg,transparent 300deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:borderSpin 8s linear infinite;
}

/* ── Shimmering headline ────────────────────────────────────────────────── */
@keyframes textShine{0%,100%{background-position:180% 50%}50%{background-position:-80% 50%}}
.shine{
  background:linear-gradient(100deg,#fff 20%,var(--cyan) 38%,var(--violet) 50%,var(--magenta) 62%,#fff 80%);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:textShine 7s ease-in-out infinite;
}

/* ── Glowing divider ────────────────────────────────────────────────────── */
@keyframes glowSlide{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.glow-line{
  height:1px;width:100%;border:0;margin:0;
  background:linear-gradient(90deg,transparent,rgba(46,230,255,.7),rgba(139,92,246,.7),rgba(233,72,255,.5),transparent);
  background-size:200% 100%;animation:glowSlide 5s linear infinite;
}

/* ── Marquee ────────────────────────────────────────────────────────────── */
.marquee{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:14px;width:max-content;animation:marqueeScroll 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marqueeScroll{to{transform:translateX(-50%)}}
.marquee .chip{white-space:nowrap}

/* ── Media ──────────────────────────────────────────────────────────────── */
.zoom{overflow:hidden;border-radius:var(--r-lg)}
.zoom img{transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.zoom:hover img{transform:scale(1.05)}
.flag-wave img{animation:flagSway 9s ease-in-out infinite;transform-origin:left center}
@keyframes flagSway{0%,100%{transform:rotate(-.6deg) translateY(0)}50%{transform:rotate(.6deg) translateY(-8px)}}

/* ── Counter band ───────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px}
.stat-tile{
  text-align:center;padding:28px 18px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--panel);position:relative;overflow:hidden
}
.stat-tile .n{
  font-family:var(--f-display);font-weight:800;font-size:clamp(1.9rem,4.6vw,3rem);line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent
}
.stat-tile .l{
  display:block;margin-top:10px;font-family:var(--f-display);font-weight:600;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)
}
html[lang="zh"] .stat-tile .l{letter-spacing:.06em;text-transform:none;font-size:.88rem}

/* ── USP tiles ──────────────────────────────────────────────────────────── */
.usp{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.usp-tile{
  position:relative;padding:24px 22px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--panel);
  transition:transform .25s ease,border-color .25s ease,background .25s ease
}
.usp-tile:hover{transform:translateY(-5px);border-color:var(--line-2);background:var(--panel-2)}
.usp-tile h3{font-size:1rem;margin-bottom:7px}
.usp-tile p{font-size:.9rem;color:var(--muted)}
.usp-ico{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:14px;
  background:var(--grad-soft);border:1px solid var(--line)
}
.usp-ico svg{width:21px;height:21px;stroke:var(--cyan);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ── Reveal variants ────────────────────────────────────────────────────── */
.rv-l{opacity:0;transform:translateX(-30px)}
.rv-r{opacity:0;transform:translateX(30px)}
.rv-s{opacity:0;transform:scale(.94)}
.rv-l,.rv-r,.rv-s{transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.rv-l.is-in,.rv-r.is-in,.rv-s.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .orb,.shine,.glow-line,.marquee-track,.flag-wave img,
  .gborder::before,.icon-badge::after{animation:none!important}
  .tilt{transition:none}
  .rv-l,.rv-r,.rv-s{opacity:1;transform:none;transition:none}
  .zoom img,.shot img{transition:none}
}


/* ── Range cards ────────────────────────────────────────────────────────── */
.prod-card{display:flex;flex-direction:column;padding:0;overflow:hidden}
.prod-card .shot-box{
  aspect-ratio:16/10;display:grid;place-items:center;padding:20px;overflow:hidden;
  background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.015));
  border-bottom:1px solid var(--line)
}
.prod-card .shot-box img{
  max-width:100%;max-height:100%;width:auto;object-fit:contain;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)
}
.prod-card:hover .shot-box img{transform:scale(1.06)}
.prod-card .body{padding:22px 22px 26px;display:flex;flex-direction:column;flex:1}
.prod-card h3{font-size:1.1rem;margin-bottom:4px}
.prod-card .k{
  color:var(--cyan);font-size:.82rem;font-family:var(--f-display);font-weight:600;margin-bottom:10px
}
@media (prefers-reduced-motion:reduce){.prod-card .shot-box img{transition:none}}

/* ═══════════════════════════════════════════════════════════════════════════
   More motion — all of it on the light and on what the visitor is doing.
   Nothing here moves a product photo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Scroll progress ────────────────────────────────────────────────────── */
.progress{
  position:fixed;top:0;left:0;z-index:100;height:2px;width:100%;
  transform:scaleX(0);transform-origin:0 50%;background:var(--grad);
  pointer-events:none;will-change:transform
}

/* ── A beam crossing the hero, like the streaks in the artwork ──────────── */
.hero::after{
  content:"";position:absolute;top:0;left:-45%;width:45%;height:100%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(46,230,255,.09),rgba(233,72,255,.07),transparent);
  transform:skewX(-14deg);animation:heroBeam 11s ease-in-out infinite
}
@keyframes heroBeam{0%{left:-45%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:125%;opacity:0}}

/* ── Primary buttons catch the light on hover ───────────────────────────── */
.btn--primary{position:relative;overflow:hidden}
.btn--primary > *{position:relative;z-index:1}
.btn--primary::after{
  content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);opacity:0
}
.btn--primary:hover::after{animation:btnShine .85s cubic-bezier(.3,.7,.4,1)}
@keyframes btnShine{0%{left:-70%;opacity:1}100%{left:130%;opacity:0}}

/* ── Card edges light up under the cursor ───────────────────────────────── */
.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,var(--cyan),var(--violet) 50%,var(--magenta));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0;transition:opacity .4s ease
}
.card:hover::after{opacity:.55}

/* ── Language pills arrive one after another ────────────────────────────── */
.rv .pills>*{opacity:0;transform:translateY(10px)}
.rv.is-in .pills>*{animation:pillIn .5s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes pillIn{to{opacity:1;transform:none}}
.pills>:nth-child(1){animation-delay:.05s}.pills>:nth-child(2){animation-delay:.1s}
.pills>:nth-child(3){animation-delay:.15s}.pills>:nth-child(4){animation-delay:.2s}
.pills>:nth-child(5){animation-delay:.25s}.pills>:nth-child(6){animation-delay:.3s}
.pills>:nth-child(7){animation-delay:.35s}.pills>:nth-child(8){animation-delay:.4s}
.pills>:nth-child(9){animation-delay:.45s}.pills>:nth-child(10){animation-delay:.5s}
.pills>:nth-child(n+11){animation-delay:.55s}

/* ── Section seams ──────────────────────────────────────────────────────── */
.seam{height:1px;width:100%;border:0;margin:0;position:relative;z-index:1}

@media (prefers-reduced-motion:reduce){
  .hero::after,.btn--primary:hover::after{animation:none!important}
  .rv .pills>*,.rv.is-in .pills>*{opacity:1;transform:none;animation:none}
  .progress{display:none}
}

/* ── Comparison cards ───────────────────────────────────────────────────── */
/* Same shape as the product cards, because that is the component on this site
   that actually looks like the brand: a real image on top, the claim below. */
.cmp-card .shot-box{padding:26px}
/* Four cards, so the row is fixed at two rather than left to auto-fit, which
   would drop the fourth onto a line of its own. */
.cmp-grid{grid-template-columns:1fr}
@media (min-width:760px){.cmp-grid{grid-template-columns:1fr 1fr}}
.cmp-ask{
  font-family:var(--f-display);font-weight:600;font-size:.76rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:9px;
  line-height:1.35;min-height:2.7em;display:flex;align-items:flex-end
}
@media (max-width:520px){.cmp-ask{min-height:0}}
html[lang="zh"] .cmp-ask{letter-spacing:.04em;text-transform:none;font-size:.85rem}
.cmp-head{
  display:flex;align-items:flex-start;gap:10px;
  font-size:1.18rem!important;line-height:1.25;margin-bottom:10px!important
}
.cmp-tick{
  flex:none;width:21px;height:21px;margin-top:1px;border-radius:50%;padding:3px;
  background:var(--grad);stroke:#04061a;fill:none;stroke-width:3.2;
  stroke-linecap:round;stroke-linejoin:round
}

/* Buying guide (guide.html): numbered cards, two across on a computer */
.gd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;max-width:1040px}
.gd-card{position:relative;padding:24px 24px 22px;border-radius:var(--r-lg);border:1px solid var(--line);
  background:linear-gradient(140deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
.gd-n{display:block;font-family:var(--f-display);font-weight:800;font-size:1.6rem;line-height:1;margin-bottom:10px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.gd-h{font-family:var(--f-display);font-weight:700;font-size:1.12rem;line-height:1.35;margin-bottom:8px}
.gd-card p{color:var(--muted);font-size:.94rem;line-height:1.65}
.gd-go{display:inline-block;margin-top:12px;color:var(--cyan);font-weight:600;font-size:.9rem;text-decoration:none}
.gd-go:hover{text-decoration:underline}