/* ═══════════════════════════════════════════
   Kèo Quỷ — Premium Landing Page 2025
   ═══════════════════════════════════════════ */

/* ── CSS Custom Properties for Gradient Animation ── */
@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@property --mesh-x {
  syntax: '<percentage>';
  initial-value: 30%;
  inherits: false;
}
@property --mesh-y {
  syntax: '<percentage>';
  initial-value: 20%;
  inherits: false;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --fire:#ff4a1c;--ember:#ff7a2e;--gold:#ffc844;--lava:#ff2a00;
  --bg:#f5f0ec;--bg2:#ebe4dd;
  --glass:rgba(255,250,245,.72);
  --tx:#1a1210;--tx2:#5a4a3e;--tx3:#8a7a6e;--tx4:#b0a090;
  --bdr:rgba(180,140,100,.12);--bdr2:rgba(180,140,100,.2);
  --card:#ffffff;--card2:#f8f4f0;
  --inp-bg:rgba(0,0,0,.03);--inp-bdr:rgba(180,140,100,.2);
  --ff:'Plus Jakarta Sans',system-ui,sans-serif;
  --e:cubic-bezier(.16,1,.3,1);
  --e2:cubic-bezier(.34,1.56,.64,1);
  color-scheme:light;
}

html{scroll-behavior:smooth}
body{font-family:var(--ff);background:var(--bg);color:var(--tx);-webkit-font-smoothing:antialiased;min-height:100dvh;overflow-x:hidden}
a{text-decoration:none;color:inherit}img{display:block;max-width:100%}
::selection{background:rgba(255,74,28,.18);color:var(--tx)}

/* ── Noise Texture Overlay ── */
body::before{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:180px 180px;
}

/* ── AMBIENT ORBS ── */
.amb{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.amb div{position:absolute;border-radius:50%;filter:blur(120px);will-change:transform;opacity:.12}
.amb .a1{width:600px;height:600px;background:radial-gradient(circle,rgba(255,74,28,.12),rgba(255,122,46,.04) 70%);top:-250px;left:-150px;animation:am1 20s ease-in-out infinite}
.amb .a2{width:500px;height:500px;background:radial-gradient(circle,rgba(255,200,68,.08),rgba(255,160,60,.02) 70%);bottom:-150px;right:-200px;animation:am2 24s ease-in-out infinite}
@keyframes am1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-50px) scale(1.08)}66%{transform:translate(-20px,30px) scale(.94)}}
@keyframes am2{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(-30px,40px) scale(1.06)}70%{transform:translate(25px,-35px) scale(.96)}}

/* ═══ NAV ═══ */
.nav{position:sticky;top:0;z-index:100;padding:10px 16px}
.nav-bar{
  max-width:1080px;margin:0 auto;height:52px;
  display:flex;align-items:center;gap:8px;
  padding:0 8px 0 16px;
  background:var(--glass);
  backdrop-filter:blur(28px) saturate(1.8);-webkit-backdrop-filter:blur(28px) saturate(1.8);
  border:1px solid rgba(255,255,255,.35);
  border-radius:100px;
  box-shadow:0 1px 3px rgba(0,0,0,.04),0 8px 32px rgba(0,0,0,.03);
}
.n-logo{display:flex;align-items:center;gap:8px;margin-right:auto}
.n-logo img{width:28px;height:28px;border-radius:8px}
.n-logo b{font-size:.9rem;font-weight:800;letter-spacing:-.3px}
.n-logo em{font-style:normal;color:var(--fire)}
.n-pills{display:flex;gap:3px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;flex:1;min-width:0}
.n-pills::-webkit-scrollbar{display:none}
.n-p{font-size:.76rem;font-weight:700;color:var(--tx3);padding:8px 16px;border-radius:100px;transition:all .25s var(--e);white-space:nowrap}
.n-p:hover{color:var(--tx2);background:rgba(255,120,46,.06)}
.n-p.on{color:#fff;background:linear-gradient(135deg,var(--fire),var(--ember));box-shadow:0 2px 16px rgba(255,74,28,.3),inset 0 1px 0 rgba(255,255,255,.15)}

/* ═══ WRAP ═══ */
.wrap{max-width:1080px;margin:0 auto;padding:16px 16px 56px;position:relative;z-index:1}

/* ═══ HERO ═══ */
.hero{position:relative;border-radius:32px;overflow:hidden;margin-bottom:32px}

/* Animated gradient mesh background */
.hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at var(--mesh-x) var(--mesh-y), rgba(255,74,28,.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(255,200,68,.06) 0%, transparent 45%),
    radial-gradient(ellipse at 10% 90%, rgba(255,122,46,.04) 0%, transparent 40%),
    linear-gradient(160deg,#f0e6dc 0%,#ebe0d4 30%,#f5f0ec 100%);
  animation:meshMove 12s ease-in-out infinite;
}
@keyframes meshMove{
  0%,100%{--mesh-x:30%;--mesh-y:20%}
  33%{--mesh-x:60%;--mesh-y:35%}
  66%{--mesh-x:40%;--mesh-y:60%}
}
.hero-bg::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 70% 15%,rgba(255,74,28,.07),transparent 55%),
    radial-gradient(ellipse at 20% 80%,rgba(255,200,68,.05),transparent 45%);
}

/* Hero glow behind mascot */
.hero-glow{
  position:absolute;top:30px;left:50%;transform:translateX(-50%);
  width:200px;height:200px;
  background:radial-gradient(circle,rgba(255,74,28,.12) 0%,rgba(255,200,68,.06) 40%,transparent 70%);
  z-index:1;pointer-events:none;
  animation:glowPulse 5s ease-in-out infinite;
  filter:blur(30px);
}
@keyframes glowPulse{0%,100%{opacity:1;transform:translateX(-50%) scale(1)}50%{opacity:.65;transform:translateX(-50%) scale(1.15)}}

.hero-bdr{position:absolute;inset:0;border-radius:32px;border:1px solid rgba(255,255,255,.25);z-index:3;pointer-events:none}
.hero-bdr::after{
  content:'';position:absolute;inset:0;border-radius:32px;
  border:1px solid rgba(180,140,100,.08);
}

.hero-c{position:relative;z-index:2;padding:40px 24px 36px;display:flex;flex-direction:column;align-items:center;text-align:center}

/* Mascot with glow */
.hero-mascot{
  width:160px;height:auto;margin-bottom:16px;
  filter:drop-shadow(0 12px 32px rgba(255,74,28,.25)) drop-shadow(0 0 60px rgba(255,200,68,.1));
  animation:mascotFloat 4s ease-in-out infinite;
}
@keyframes mascotFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-8px) rotate(.5deg)}}

/* Badge */
.hero-badge{
  display:inline-flex;align-items:center;gap:7px;
  background:linear-gradient(135deg,var(--fire),var(--ember));
  padding:7px 20px;border-radius:100px;
  font-size:.62rem;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;color:#fff;
  margin-bottom:20px;
  box-shadow:0 2px 16px rgba(255,74,28,.3),inset 0 1px 0 rgba(255,255,255,.15);
}
.hero-badge i{width:6px;height:6px;border-radius:50%;background:#fff;animation:blink 1.5s ease infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* Title */
.hero-title{
  font-weight:800;font-size:2.4rem;
  letter-spacing:-1.5px;line-height:1.05;
  margin-bottom:14px;
}
.hero-title em{
  font-style:normal;
  background:linear-gradient(135deg,var(--gold) 0%,var(--ember) 50%,var(--fire) 100%);
  background-size:200% 200%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  animation:titleShimmer 6s ease-in-out infinite;
}
@keyframes titleShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.hero-sub{font-size:.92rem;color:var(--tx2);line-height:1.75;max-width:480px;margin-bottom:8px}

/* CTA Button */
.hero-cta{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.88rem;font-weight:700;color:#fff;font-family:var(--ff);
  background:linear-gradient(135deg,var(--fire),var(--ember));
  padding:14px 32px;border-radius:100px;
  margin-top:12px;cursor:pointer;
  box-shadow:0 4px 24px rgba(255,74,28,.3),inset 0 1px 0 rgba(255,255,255,.15);
  transition:all .3s var(--e);
  text-decoration:none;
  border:none;
  position:relative;overflow:hidden;
}
.hero-cta::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.15),transparent 60%);
  border-radius:100px;
}
.hero-cta:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 8px 36px rgba(255,74,28,.4),inset 0 1px 0 rgba(255,255,255,.2);
}
.hero-cta svg{width:16px;height:16px;transition:transform .25s var(--e)}
.hero-cta:hover svg{transform:translateX(3px)}

/* ═══ STAT ROW (glassmorphism pills) ═══ */
.stat-row{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap;justify-content:center}
.sp{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.5);
  border-radius:100px;padding:10px 20px 10px 12px;
  transition:all .3s var(--e);
  box-shadow:0 2px 8px rgba(0,0,0,.03);
}
.sp:hover{
  background:rgba(255,255,255,.7);
  border-color:rgba(255,255,255,.65);
  box-shadow:0 4px 16px rgba(0,0,0,.05);
  transform:translateY(-2px);
}
.sp-ico{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.78rem;flex-shrink:0}
.sp-c{display:flex;flex-direction:column}
.sp-v{font-weight:800;font-size:.92rem;letter-spacing:-.3px;line-height:1}
.sp-l{font-size:.55rem;font-weight:600;color:var(--tx3);letter-spacing:.5px;margin-top:3px}
.sp-live{position:relative}
.sp-live::after{content:'';position:absolute;top:0;right:0;width:7px;height:7px;border-radius:50%;background:#16a34a;box-shadow:0 0 8px #16a34a;animation:blink 2s ease infinite}

/* ── Skeleton Loading ── */
.skeleton{
  background:linear-gradient(90deg,rgba(0,0,0,.04) 25%,rgba(0,0,0,.08) 50%,rgba(0,0,0,.04) 75%);
  background-size:200% 100%;animation:skeleton-pulse 1.5s ease-in-out infinite;
  border-radius:4px;display:inline-block;min-width:40px;color:transparent !important;
}
@keyframes skeleton-pulse{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ═══ SECTION ═══ */
.sec{margin-bottom:32px}
.sec-h{
  font-size:.72rem;font-weight:800;color:var(--tx2);
  text-transform:uppercase;letter-spacing:3px;
  margin:0 0 16px 4px;
  display:flex;align-items:center;gap:10px;
}
.sec-h::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,var(--bdr),transparent 80%);
}

/* ═══ FLASH SALE ERROR/RETRY ═══ */
.fs-error{text-align:center;padding:20px 0}
.fs-error-msg{color:var(--tx3);font-size:.85rem;margin-bottom:12px}
.fs-error-retry{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;color:var(--fire);background:rgba(255,74,28,.08);border:1px solid rgba(255,74,28,.15);padding:10px 22px;border-radius:100px;cursor:pointer;transition:all .25s var(--e);font-family:var(--ff)}
.fs-error-retry:hover{background:rgba(255,74,28,.14);border-color:rgba(255,74,28,.25)}

/* ═══ TOOL CARDS — BENTO GRID ═══ */
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tc{
  position:relative;border-radius:24px;overflow:hidden;
  transition:all .4s var(--e);cursor:pointer;display:flex;flex-direction:column;
}
.tc:hover{transform:translateY(-6px) scale(1.01)}

.tc-bg{position:absolute;inset:0;z-index:0;transition:all .4s var(--e)}
.tc-bdr{
  position:absolute;inset:0;border-radius:24px;z-index:1;pointer-events:none;
  border:1px solid rgba(180,140,100,.08);
  transition:all .4s var(--e);
}
.tc-glow{
  position:absolute;width:160px;height:160px;border-radius:50%;
  filter:blur(60px);opacity:0;transition:opacity .5s var(--e);
  pointer-events:none;z-index:0;top:-50px;right:-40px;
}
.tc:hover .tc-glow{opacity:.5}

/* Card themes */
.tc:nth-child(1) .tc-bg{background:linear-gradient(155deg,#f0fdf4 0%,#ecfdf5 50%,#dcfce7 100%)}
.tc:nth-child(1):hover .tc-bdr{border-color:rgba(16,185,129,.25);box-shadow:0 20px 60px rgba(16,185,129,.1),0 2px 8px rgba(16,185,129,.05)}
.tc:nth-child(1) .tc-glow{background:rgba(16,185,129,.15)}
.tc:nth-child(1) .tc-ico{background:rgba(16,185,129,.1)}
.tc:nth-child(1) .tc-btn{color:#059669;background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.12)}

.tc:nth-child(2) .tc-bg{background:linear-gradient(155deg,#fef2f2 0%,#fff7ed 50%,#fef2f2 100%)}
.tc:nth-child(2):hover .tc-bdr{border-color:rgba(255,74,28,.25);box-shadow:0 20px 60px rgba(255,74,28,.1),0 2px 8px rgba(255,74,28,.05)}
.tc:nth-child(2) .tc-glow{background:rgba(255,74,28,.15)}
.tc:nth-child(2) .tc-ico{background:rgba(255,74,28,.1)}
.tc:nth-child(2) .tc-btn{color:#dc2626;background:rgba(255,74,28,.08);border:1px solid rgba(255,74,28,.12)}

.tc:nth-child(3) .tc-bg{background:linear-gradient(155deg,#eff6ff 0%,#eef2ff 50%,#dbeafe 100%)}
.tc:nth-child(3):hover .tc-bdr{border-color:rgba(59,130,246,.25);box-shadow:0 20px 60px rgba(59,130,246,.1),0 2px 8px rgba(59,130,246,.05)}
.tc:nth-child(3) .tc-glow{background:rgba(59,130,246,.15)}
.tc:nth-child(3) .tc-ico{background:rgba(59,130,246,.1)}
.tc:nth-child(3) .tc-btn{color:#2563eb;background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.12)}

.tc:nth-child(4) .tc-bg{background:linear-gradient(155deg,#fffbeb 0%,#fef3c7 50%,#fde68a40 100%)}
.tc:nth-child(4):hover .tc-bdr{border-color:rgba(245,158,11,.25);box-shadow:0 20px 60px rgba(245,158,11,.1),0 2px 8px rgba(245,158,11,.05)}
.tc:nth-child(4) .tc-glow{background:rgba(245,158,11,.15)}
.tc:nth-child(4) .tc-ico{background:rgba(245,158,11,.1)}
.tc:nth-child(4) .tc-btn{color:#d97706;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.12)}

.tc:nth-child(5) .tc-bg{background:linear-gradient(155deg,#fefce8 0%,#fef9c3 50%,#fef08a40 100%)}
.tc:nth-child(5):hover .tc-bdr{border-color:rgba(234,179,8,.25);box-shadow:0 20px 60px rgba(234,179,8,.1),0 2px 8px rgba(234,179,8,.05)}
.tc:nth-child(5) .tc-glow{background:rgba(234,179,8,.15)}
.tc:nth-child(5) .tc-ico{background:rgba(234,179,8,.1)}
.tc:nth-child(5) .tc-btn{color:#ca8a04;background:rgba(234,179,8,.08);border:1px solid rgba(234,179,8,.12)}

.tc:nth-child(6) .tc-bg{background:linear-gradient(155deg,#faf5ff 0%,#f3e8ff 50%,#e9d5ff40 100%)}
.tc:nth-child(6):hover .tc-bdr{border-color:rgba(168,85,247,.25);box-shadow:0 20px 60px rgba(168,85,247,.1),0 2px 8px rgba(168,85,247,.05)}
.tc:nth-child(6) .tc-glow{background:rgba(168,85,247,.15)}
.tc:nth-child(6) .tc-ico{background:rgba(168,85,247,.1)}
.tc:nth-child(6) .tc-btn{color:#9333ea;background:rgba(168,85,247,.08);border:1px solid rgba(168,85,247,.12)}

.tc:nth-child(7) .tc-bg{background:linear-gradient(155deg,#ecfeff 0%,#e0f2fe 50%,#bae6fd40 100%)}
.tc:nth-child(7):hover .tc-bdr{border-color:rgba(6,182,212,.25);box-shadow:0 20px 60px rgba(6,182,212,.1),0 2px 8px rgba(6,182,212,.05)}
.tc:nth-child(7) .tc-glow{background:rgba(6,182,212,.15)}
.tc:nth-child(7) .tc-ico{background:rgba(6,182,212,.1)}
.tc:nth-child(7) .tc-btn{color:#0891b2;background:rgba(6,182,212,.08);border:1px solid rgba(6,182,212,.12)}

/* Gold mini ticker */
.tc-gold-mini{display:flex;flex-direction:column;gap:5px;margin:4px 0}
.tc-gold-row{display:flex;justify-content:space-between;align-items:center;font-size:.72rem}
.tc-gold-label{color:var(--tx3);font-weight:600}
.tc-gold-val{font-weight:800;font-size:.72rem;color:var(--tx);font-variant-numeric:tabular-nums}
.tc-gold-val.up{color:#22c55e}
.tc-gold-val.down{color:#ef4444}

.tc-c{
  position:relative;z-index:2;
  padding:28px 22px;
  display:flex;flex-direction:column;gap:10px;flex:1;
}
.tc-ico{
  width:52px;height:52px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;
  transition:transform .4s var(--e2);
}
.tc:hover .tc-ico{transform:scale(1.08) rotate(-2deg)}
.tc-name{font-weight:800;font-size:1.1rem;letter-spacing:-.4px}
.tc-desc{font-size:.78rem;color:var(--tx2);line-height:1.7}
.tc-btn{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.7rem;font-weight:700;
  padding:9px 18px;border-radius:100px;
  margin-top:auto;width:fit-content;
  transition:all .3s var(--e);
}
.tc:hover .tc-btn{gap:10px;filter:brightness(1.05)}
.tc-btn svg{width:12px;height:12px;transition:transform .3s var(--e)}
.tc:hover .tc-btn svg{transform:translateX(4px)}

/* ═══ CHANNELS ═══ */
.chs{display:flex;flex-direction:column;gap:12px}
.ch{
  position:relative;border-radius:20px;overflow:hidden;
  display:flex;align-items:center;gap:16px;padding:20px 22px;
  transition:all .35s var(--e);cursor:pointer;
}
.ch-bg{position:absolute;inset:0;z-index:0;transition:all .4s var(--e)}
.ch:nth-child(1) .ch-bg{background:linear-gradient(135deg,rgba(37,99,235,.06),rgba(99,102,241,.03))}
.ch:nth-child(2) .ch-bg{background:linear-gradient(135deg,rgba(8,145,178,.06),rgba(34,211,238,.03))}
.ch-bdr{
  position:absolute;inset:0;border-radius:20px;
  border:1px solid rgba(180,140,100,.1);
  z-index:1;pointer-events:none;transition:all .35s var(--e);
}
.ch:hover{transform:translateY(-4px)}
.ch:nth-child(1):hover .ch-bg{background:linear-gradient(135deg,rgba(37,99,235,.09),rgba(99,102,241,.04))}
.ch:nth-child(1):hover .ch-bdr{border-color:rgba(96,165,250,.2);box-shadow:0 16px 48px rgba(59,130,246,.08)}
.ch:nth-child(2):hover .ch-bg{background:linear-gradient(135deg,rgba(8,145,178,.09),rgba(34,211,238,.04))}
.ch:nth-child(2):hover .ch-bdr{border-color:rgba(34,211,238,.2);box-shadow:0 16px 48px rgba(6,182,212,.08)}

.ch-ico{
  width:48px;height:48px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;position:relative;z-index:2;
  transition:transform .35s var(--e2);
}
.ch:hover .ch-ico{transform:scale(1.06)}
.ch:nth-child(1) .ch-ico{background:linear-gradient(135deg,#1d4ed8,#3b82f6);box-shadow:0 6px 20px rgba(59,130,246,.25)}
.ch:nth-child(2) .ch-ico{background:linear-gradient(135deg,#0e7490,#22d3ee);box-shadow:0 6px 20px rgba(6,182,212,.25)}
.ch-ico svg{width:20px;height:20px}
.ch-dot{width:7px;height:7px;border-radius:50%;position:relative;z-index:2;flex-shrink:0;animation:blink 2s ease infinite}
.ch:nth-child(1) .ch-dot{background:#60a5fa;box-shadow:0 0 12px rgba(96,165,250,.6)}
.ch:nth-child(2) .ch-dot{background:#22d3ee;box-shadow:0 0 12px rgba(34,211,238,.6)}
.ch-t{flex:1;position:relative;z-index:2}
.ch-name{font-weight:800;font-size:.95rem;letter-spacing:-.2px}
.ch-sub{font-size:.7rem;color:var(--tx3);margin-top:3px;line-height:1.5}
.ch-arr{
  position:relative;z-index:2;
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.06);
  flex-shrink:0;transition:all .35s var(--e);
}
.ch-arr svg{width:14px;height:14px;color:var(--tx3);transition:all .35s var(--e)}
.ch:hover .ch-arr{background:rgba(0,0,0,.07);border-color:rgba(0,0,0,.1);transform:translateX(4px)}
.ch:hover .ch-arr svg{color:var(--tx2)}

/* ═══ FOOTER ═══ */
.foot{
  text-align:center;font-size:.65rem;color:var(--tx4);
  letter-spacing:.5px;padding:24px 0 12px;margin-top:12px;
  border-top:1px solid rgba(180,140,100,.08);
}

/* ═══ FLASH SALE TIMELINE ═══ */
.fs-box{position:relative;border-radius:28px;overflow:hidden}
.fs-box-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.fs-box-bg-grad{
  position:absolute;inset:0;
  background:linear-gradient(160deg,#f8f0e8 0%,#f2ebe4 40%,#f5f0ec 100%);
}
.fs-box-bg-orb1{
  position:absolute;width:350px;height:350px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,74,28,.07),transparent 65%);
  top:-140px;right:-80px;filter:blur(50px);
  animation:orbFloat 8s ease-in-out infinite;
}
.fs-box-bg-orb2{
  position:absolute;width:250px;height:250px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,200,68,.05),transparent 65%);
  bottom:-100px;left:-60px;filter:blur(50px);
  animation:orbFloat 10s ease-in-out infinite reverse;
}
@keyframes orbFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(15px,-15px)}}

.fs-box-bdr{position:absolute;inset:0;border-radius:28px;border:1px solid rgba(255,255,255,.2);z-index:2;pointer-events:none}
.fs-box-bdr::after{content:'';position:absolute;inset:0;border-radius:28px;border:1px solid rgba(180,140,100,.08)}
.fs-box-c{position:relative;z-index:1;padding:28px 22px 24px}

.fs-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.fs-title{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.05rem}
.fs-title-icon{
  width:36px;height:36px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;font-size:1rem;
  background:linear-gradient(135deg,rgba(255,74,28,.2),rgba(255,122,46,.08));
  border:1px solid rgba(255,74,28,.12);
}
.fs-live-tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.6rem;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;padding:6px 14px;border-radius:100px;
}
.fs-live-tag.live{color:#4ade80;background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.15)}
.fs-live-tag.live i{width:6px;height:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 10px rgba(74,222,128,.6);animation:blink 1.5s ease infinite}
.fs-live-tag.upcoming{color:var(--gold);background:rgba(255,200,68,.08);border:1px solid rgba(255,200,68,.12)}
.fs-live-tag.upcoming i{width:6px;height:6px;border-radius:50%;background:var(--gold)}
.fs-live-tag.ended{color:var(--tx3);background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.06)}

/* Countdown */
.fs-cd-block{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:24px}
.fs-cd-label{font-size:.72rem;color:var(--tx3);font-weight:600;text-transform:uppercase;letter-spacing:1.8px}
.fs-cd-time{display:flex;gap:8px;align-items:center}
.fs-cd-unit{
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.5);
  border-radius:14px;padding:14px 0;min-width:60px;text-align:center;
  position:relative;overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.fs-cd-unit::before{content:'';position:absolute;top:0;left:0;right:0;height:50%;background:rgba(255,255,255,.4);pointer-events:none}
.fs-cd-unit b{
  font-size:1.6rem;font-weight:800;color:var(--tx);
  display:block;line-height:1;letter-spacing:-.5px;font-variant-numeric:tabular-nums;
}
.fs-cd-unit small{font-size:.48rem;color:var(--tx3);font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-top:5px;display:block}
.fs-cd-sep{font-size:1.2rem;font-weight:800;color:var(--fire);opacity:.5;line-height:1;margin-top:-6px;animation:sepPulse 1s ease infinite}
@keyframes sepPulse{0%,100%{opacity:.5}50%{opacity:.2}}
.fs-cd-cta{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.82rem;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--fire),var(--ember));
  padding:13px 30px;border-radius:100px;margin-top:8px;
  box-shadow:0 4px 24px rgba(255,74,28,.3),inset 0 1px 0 rgba(255,255,255,.12);
  transition:all .3s var(--e);position:relative;overflow:hidden;
}
.fs-cd-cta::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.12),transparent 60%);
  border-radius:100px;
}
.fs-cd-cta:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(255,74,28,.4)}
.fs-cd-cta svg{width:14px;height:14px;transition:transform .25s var(--e)}
.fs-cd-cta:hover svg{transform:translateX(4px)}

/* Timeline */
.fs-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(180,140,100,.15),transparent);margin-bottom:20px}
.fs-timeline-label{font-size:.58rem;font-weight:700;color:var(--tx4);text-transform:uppercase;letter-spacing:2px;margin-bottom:12px;text-align:center}
.fs-slots{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding-bottom:2px}
.fs-slot{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:12px 16px;border-radius:14px;
  background:rgba(255,255,255,.4);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.4);
  min-width:72px;transition:all .3s var(--e);cursor:pointer;
  text-decoration:none;position:relative;
}
.fs-slot:hover{background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.5);transform:translateY(-3px);box-shadow:0 4px 16px rgba(0,0,0,.04)}
.fs-slot.active{
  background:linear-gradient(145deg,rgba(255,74,28,.14),rgba(255,74,28,.06));
  border-color:rgba(255,74,28,.3);
  box-shadow:0 4px 24px rgba(255,74,28,.12);
}
.fs-slot.active::before{content:'';position:absolute;top:-1px;left:15%;right:15%;height:2px;background:linear-gradient(90deg,transparent,var(--fire),transparent);border-radius:2px}
.fs-slot.past{opacity:.3}
.fs-slot-time{font-size:.78rem;font-weight:800;color:var(--tx);white-space:nowrap;font-variant-numeric:tabular-nums}
.fs-slot.past .fs-slot-time{text-decoration:line-through;color:var(--tx3)}
.fs-slot-status{font-size:.52rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.fs-slot.active .fs-slot-status{color:#4ade80}
.fs-slot.past .fs-slot-status{color:var(--tx4)}
.fs-slot:not(.active):not(.past) .fs-slot-status{color:var(--tx3)}

/* ═══════════════════════════════════════════
   RESPONSIVE — TABLET (640px+)
   ═══════════════════════════════════════════ */
@media(min-width:640px){
  .nav{padding:12px 24px}
  .nav-bar{height:56px;padding:0 10px 0 20px}
  .n-logo img{width:32px;height:32px}
  .n-logo b{font-size:1rem}
  .n-p{font-size:.82rem;padding:9px 20px}
  .wrap{padding:24px 24px 64px}
  .hero{border-radius:36px;margin-bottom:40px}
  .hero-bdr,.hero-bdr::after{border-radius:36px}
  .hero-c{padding:52px 44px 44px}
  .hero-mascot{width:200px}
  .hero-glow{width:280px;height:280px;top:20px}
  .hero-title{font-size:2.8rem;letter-spacing:-1.5px}
  .hero-sub{font-size:1rem}
  .hero-cta{font-size:.92rem;padding:15px 36px}
  .stat-row{gap:12px;margin-top:28px}
  .sp{padding:10px 22px 10px 12px}
  .sp-ico{width:36px;height:36px;font-size:.85rem}
  .sp-v{font-size:1rem}
  .sp-l{font-size:.58rem}
  .sec{margin-bottom:40px}
  .sec-h{font-size:.78rem;margin-bottom:20px;letter-spacing:3.5px}
  .tgrid{gap:16px}
  .tc{border-radius:26px}
  .tc-bdr{border-radius:26px}
  .tc-c{padding:32px 28px}
  .tc-ico{width:58px;height:58px;font-size:1.6rem}
  .tc-name{font-size:1.2rem}
  .tc-desc{font-size:.82rem}
  .tc-btn{font-size:.75rem;padding:10px 22px}
  .chs{gap:14px}
  .ch{padding:24px 28px;gap:18px;border-radius:22px}
  .ch-bdr{border-radius:22px}
  .ch-ico{width:52px;height:52px;border-radius:15px}
  .ch-ico svg{width:24px;height:24px}
  .ch-name{font-size:1.05rem}
  .ch-sub{font-size:.75rem}
  .ch-arr{width:38px;height:38px}
  .fs-box{border-radius:32px}
  .fs-box-bdr,.fs-box-bdr::after{border-radius:32px}
  .fs-box-c{padding:32px 32px 28px}
  .fs-title{font-size:1.15rem}
  .fs-title-icon{width:40px;height:40px;border-radius:12px;font-size:1.1rem}
  .fs-live-tag{font-size:.65rem;padding:7px 16px}
  .fs-cd-label{font-size:.78rem}
  .fs-cd-unit{min-width:68px;padding:16px 0;border-radius:16px}
  .fs-cd-unit b{font-size:1.7rem}
  .fs-cd-unit small{font-size:.52rem;margin-top:5px}
  .fs-cd-sep{font-size:1.3rem}
  .fs-cd-time{gap:10px}
  .fs-cd-cta{font-size:.88rem;padding:14px 34px}
  .fs-timeline-label{font-size:.65rem}
  .fs-slot{min-width:84px;padding:14px 18px;border-radius:16px}
  .fs-slot-time{font-size:.85rem}
  .fs-slot-status{font-size:.56rem}
  .fs-slots{gap:10px}
  .foot{font-size:.68rem;padding:28px 0 14px}
}

/* ═══════════════════════════════════════════
   RESPONSIVE — DESKTOP (900px+)
   ═══════════════════════════════════════════ */
@media(min-width:900px){
  .nav{padding:14px 32px}
  .nav-bar{height:60px;padding:0 14px 0 24px}
  .n-logo img{width:36px;height:36px;border-radius:10px}
  .n-logo b{font-size:1.1rem}
  .n-p{font-size:.88rem;padding:10px 24px}
  .wrap{padding:32px 32px 72px}
  .hero{margin-bottom:48px}
  .hero-c{padding:60px 52px 52px}
  .hero-mascot{width:240px}
  .hero-glow{width:340px;height:340px;top:10px}
  .hero-title{font-size:3.4rem;letter-spacing:-2px}
  .hero-sub{font-size:1.1rem;max-width:540px}
  .hero-cta{font-size:.95rem;padding:16px 40px}
  .stat-row{gap:14px;margin-top:32px}
  .sp{padding:12px 26px 12px 14px;gap:10px}
  .sp-ico{width:40px;height:40px;font-size:1rem}
  .sp-v{font-size:1.1rem}
  .sp-l{font-size:.6rem}
  .sec{margin-bottom:48px}
  .sec-h{font-size:.85rem;margin-bottom:24px;letter-spacing:4px}

  /* Bento grid on desktop: first 2 cards span wider */
  .tgrid{gap:20px;grid-template-columns:repeat(3,1fr)}
  .tc:nth-child(1){grid-column:span 2}
  .tc:nth-child(1) .tc-c{flex-direction:row;align-items:center;gap:24px}
  .tc:nth-child(1) .tc-ico{width:72px;height:72px;font-size:2rem;flex-shrink:0}

  .tc-c{padding:32px 28px;gap:12px}
  .tc-ico{width:62px;height:62px;border-radius:18px;font-size:1.8rem}
  .tc-name{font-size:1.25rem}
  .tc-desc{font-size:.86rem;line-height:1.7}
  .tc-btn{font-size:.78rem;padding:11px 24px}
  .chs{gap:16px}
  .ch{padding:26px 32px;gap:20px;border-radius:24px}
  .ch-bdr{border-radius:24px}
  .ch-ico{width:56px;height:56px;border-radius:16px}
  .ch-ico svg{width:26px;height:26px}
  .ch-name{font-size:1.15rem}
  .ch-sub{font-size:.8rem}
  .ch-arr{width:42px;height:42px}
  .ch-arr svg{width:16px;height:16px}
  .fs-box{border-radius:36px}
  .fs-box-bdr,.fs-box-bdr::after{border-radius:36px}
  .fs-box-c{padding:40px 48px 36px}
  .fs-head{margin-bottom:28px}
  .fs-title{font-size:1.35rem;gap:12px}
  .fs-title-icon{width:44px;height:44px;border-radius:13px;font-size:1.2rem}
  .fs-live-tag{font-size:.68rem;padding:8px 18px;gap:7px}
  .fs-cd-block{gap:14px;margin-bottom:28px}
  .fs-cd-label{font-size:.85rem;letter-spacing:2px}
  .fs-cd-unit{min-width:84px;padding:18px 0;border-radius:18px}
  .fs-cd-unit b{font-size:2rem}
  .fs-cd-unit small{font-size:.56rem;margin-top:6px;letter-spacing:1.2px}
  .fs-cd-sep{font-size:1.5rem}
  .fs-cd-time{gap:12px}
  .fs-cd-cta{font-size:.95rem;padding:16px 42px;gap:10px}
  .fs-cd-cta svg{width:16px;height:16px}
  .fs-divider{margin-bottom:24px}
  .fs-timeline-label{font-size:.7rem;letter-spacing:2.5px;margin-bottom:16px}
  .fs-slots{gap:12px}
  .fs-slot{min-width:100px;padding:16px 22px;border-radius:18px;gap:6px}
  .fs-slot-time{font-size:.95rem}
  .fs-slot-status{font-size:.6rem}
  .fs-box-bg-orb1{width:500px;height:500px;top:-200px;right:-120px}
  .fs-box-bg-orb2{width:350px;height:350px;bottom:-140px;left:-100px}
  .foot{font-size:.72rem;padding:36px 0 20px;margin-top:20px}
}

/* ═══════════════════════════════════════════
   RESPONSIVE — WIDE (1200px+)
   ═══════════════════════════════════════════ */
@media(min-width:1200px){
  .hero-c{padding:72px 64px 64px}
  .hero-mascot{width:260px}
  .hero-title{font-size:3.8rem;letter-spacing:-2.5px}
  .hero-sub{font-size:1.2rem;max-width:580px;line-height:1.8}
  .hero-badge{font-size:.65rem;padding:8px 24px}
  .hero-cta{font-size:1rem;padding:17px 44px}
  .sp-v{font-size:1.2rem}
  .sp-l{font-size:.65rem}

  /* Bento: wider layout */
  .tgrid{grid-template-columns:repeat(3,1fr);gap:22px}
  .tc-c{padding:30px 24px}
  .tc-ico{width:56px;height:56px;font-size:1.6rem}
  .tc-name{font-size:1.1rem}
  .tc-desc{font-size:.84rem}

  .chs{flex-direction:row;gap:18px}
  .ch{flex:1}
  .fs-cd-unit{min-width:96px;padding:22px 0}
  .fs-cd-unit b{font-size:2.4rem}
  .fs-cd-cta{font-size:1rem;padding:17px 48px}
  .fs-slot{min-width:115px;padding:18px 26px}
  .fs-slot-time{font-size:1rem}
}

/* ═══ ENTRANCE ANIMATIONS ═══ */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
.hero{animation:fadeUp .7s var(--e) both}
.sec:nth-child(2){animation:fadeUp .7s var(--e) .15s both}
.sec:nth-child(3){animation:fadeUp .7s var(--e) .25s both}
.sec:nth-child(4){animation:fadeUp .7s var(--e) .35s both}
.foot{animation:fadeUp .7s var(--e) .45s both}