/* ============================================================
   NGUYÊN GIỚI ONLINE — N.G.O 2026  •  Promo site stylesheet
   Visual DNA: graffiti-pop, halftone, neon shards, city skyline
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  --yellow:#FFCC18;  --gold:#F2A50C;   --gold-deep:#C97E00;
  --purple:#7A33C8;  --purple-deep:#3C1A6E;  --violet:#9B5BE8;
  --cyan:#1FC7D4;    --cyan-bright:#36E6EC;
  --pink:#FF5FA9;    --pink-light:#FF93C6;
  --green:#7BD64B;   --orange:#FF7A1A;  --red:#FF4326;
  --ink:#241544;     --ink-soft:#3a2a5e;
  --paper:#FFFFFF;   --paper-2:#EEF3F9;  --paper-3:#E3EAF3;
  --sky-1:#dff4fb;   --sky-2:#cfeaf6;
  --skyline:#C7CFDC; --muted:#7d8395;

  --shadow-card: 0 18px 40px -18px rgba(36,21,68,.45);
  --shadow-hard: 6px 6px 0 var(--ink);
  --r-lg:26px; --r-md:18px; --r-sm:12px;
  --maxw:1280px;

  --f-display:"Baloo 2", system-ui, sans-serif;
  --f-body:"Be Vietnam Pro", system-ui, sans-serif;
}

/* ---------- RESET ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul{list-style:none}
::selection{background:var(--pink);color:#fff}

/* custom scrollbar */
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--paper-2)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--purple),var(--cyan));border-radius:20px;border:2px solid var(--paper-2)}

/* ---------- TYPE UTILITIES ---------- */
.display{font-family:var(--f-display);font-weight:800;line-height:.98;letter-spacing:.01em}

/* chunky outlined banner-style title */
.pop{
  font-family:var(--f-display);font-weight:800;
  text-transform:uppercase;line-height:.95;
  color:#fff;
  -webkit-text-stroke:2.5px var(--ink);
  paint-order:stroke fill;
  text-shadow:4px 5px 0 rgba(36,21,68,.28);
}
.pop.yellow{color:var(--yellow)}
.pop.cyan{color:var(--cyan-bright)}
.pop.pink{color:var(--pink)}
.pop.green{color:var(--green)}

.kicker{
  font-family:var(--f-body);font-weight:800;
  text-transform:uppercase;letter-spacing:.28em;
  font-size:.82rem;color:var(--cyan);
  display:inline-flex;align-items:center;gap:.6em;
}
.kicker::before{content:"";width:26px;height:3px;border-radius:3px;background:var(--pink)}

/* ---------- LAYOUT ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(18px,4vw,48px)}
section{position:relative}

/* halftone + skyline decorative layers */
.halftone{
  background-image:radial-gradient(rgba(36,21,68,.16) 1.4px, transparent 1.5px);
  background-size:14px 14px;
}
.shard{position:absolute;pointer-events:none;z-index:0}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:120;
  display:flex;align-items:center;gap:24px;
  padding:14px clamp(18px,4vw,48px);
  transition:background .35s, box-shadow .35s, padding .35s;
}
.topbar.scrolled{
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px);
  box-shadow:0 6px 24px -12px rgba(36,21,68,.4);
  padding-block:9px;
}
.topbar .brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.topbar .brand img{height:46px;width:auto;filter:drop-shadow(0 4px 8px rgba(36,21,68,.3));transition:height .35s}
.topbar.scrolled .brand img{height:40px}

.nav{display:flex;gap:6px;margin-inline:auto}
.nav a{
  position:relative;padding:9px 16px;border-radius:11px;
  font-weight:700;font-size:.96rem;color:var(--ink);
  transition:color .2s, background .2s;
}
.nav a::after{
  content:"";position:absolute;left:16px;right:16px;bottom:5px;height:3px;
  background:linear-gradient(90deg,var(--pink),var(--cyan));
  border-radius:3px;transform:scaleX(0);transform-origin:left;transition:transform .25s;
}
.nav a:hover{color:var(--purple)}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1)}
.nav a.active{color:var(--purple)}

.topbar-cta{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.lang{
  display:flex;align-items:center;gap:6px;font-weight:700;font-size:.9rem;
  padding:8px 12px;border-radius:11px;border:2px solid var(--ink);
  transition:.2s;
}
.lang:hover{background:var(--ink);color:#fff}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--f-display);font-weight:800;text-transform:uppercase;
  letter-spacing:.03em;font-size:1.02rem;white-space:nowrap;
  padding:14px 30px;border-radius:14px;
  border:3px solid var(--ink);
  position:relative;overflow:hidden;
  transition:transform .15s, box-shadow .15s;
  will-change:transform;
}
.btn .ic{width:1.15em;height:1.15em;display:inline-block}
.btn-primary{background:var(--yellow);color:var(--ink);box-shadow:var(--shadow-hard)}
.btn-primary:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.btn-primary:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
/* shimmer sweep */
.btn-primary::after{
  content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.85),transparent);
  transform:skewX(-18deg);animation:sweep 3.4s ease-in-out infinite;
}
@keyframes sweep{0%,60%{left:-60%}100%{left:140%}}

.btn-ghost{background:#fff;color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.btn-ghost:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);background:var(--cyan-bright)}
.btn-pink{background:var(--pink);color:#fff;box-shadow:var(--shadow-hard)}
.btn-pink:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}

.btn-lg{font-size:1.3rem;padding:20px 46px;border-radius:18px}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:100vh;display:flex;align-items:center;
  padding-top:110px;padding-bottom:60px;
  position:relative;overflow:hidden;
  background:
    linear-gradient(180deg,var(--sky-1) 0%, #eaf7fc 42%, #fff 100%);
}
.hero-sky{position:absolute;inset:0;z-index:0;overflow:hidden}
/* big colour shards behind */
.hero-shard-c{position:absolute;top:-12%;right:-6%;width:62vw;height:120%;
  background:linear-gradient(135deg,var(--cyan-bright),var(--cyan));
  clip-path:polygon(38% 0,100% 0,100% 100%,12% 100%);
  opacity:.16;}
.hero-shard-p{position:absolute;top:-10%;right:8%;width:46vw;height:120%;
  background:var(--purple);
  clip-path:polygon(52% 0,100% 0,100% 100%,28% 100%);
  opacity:.10;}
.hero-skyline{position:absolute;left:0;right:0;bottom:0;height:42%;z-index:1;
  opacity:.5;background-position:bottom;background-repeat:repeat-x;background-size:auto 100%}
.hero-halftone{position:absolute;left:0;bottom:0;width:34%;height:46%;z-index:1;opacity:.5;
  -webkit-mask-image:linear-gradient(0deg,#000,transparent);mask-image:linear-gradient(0deg,#000,transparent)}

.hero-inner{position:relative;z-index:5;display:grid;grid-template-columns:1.05fr .95fr;
  align-items:center;gap:30px;width:100%}
.hero-copy{max-width:620px}
.hero-logo{width:min(440px,80%);margin-bottom:18px;filter:drop-shadow(0 14px 22px rgba(36,21,68,.32));
  animation:floatY 5s ease-in-out infinite}
.hero h1{font-family:var(--f-display);font-weight:800;font-size:clamp(2.1rem,4.4vw,3.5rem);
  line-height:1;color:var(--ink);text-transform:uppercase;margin-bottom:8px}
.hero h1 .tilt{display:inline-block;color:var(--purple)}
.hero .tagline{font-size:clamp(1rem,1.5vw,1.18rem);font-weight:600;color:var(--ink-soft);
  margin-bottom:22px;max-width:30ch}
.hero .tagline b{color:var(--pink)}

.server-chip{display:inline-flex;align-items:center;gap:10px;
  background:#fff;border:2.5px solid var(--ink);border-radius:999px;
  padding:8px 16px 8px 12px;font-weight:700;font-size:.92rem;margin-bottom:22px;
  box-shadow:4px 4px 0 var(--ink)}
.server-chip .dot{width:11px;height:11px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 0 rgba(123,214,75,.7);animation:pulse 1.8s infinite}
.server-chip .new{background:var(--pink);color:#fff;border-radius:7px;padding:2px 9px;font-size:.78rem;
  font-family:var(--f-display);text-transform:uppercase;letter-spacing:.04em}

.hero-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-bottom:26px}

.hero-stats{display:flex;gap:30px;flex-wrap:wrap}
.hero-stats .stat .num{font-family:var(--f-display);font-weight:800;font-size:1.9rem;color:var(--purple);line-height:1}
.hero-stats .stat .lbl{font-size:.82rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}

.hero-char{position:relative;height:78vh;min-height:520px}
.hero-char img{position:absolute;inset:0;margin:auto;height:100%;width:100%;object-fit:contain;
  filter:drop-shadow(0 26px 30px rgba(36,21,68,.35));animation:floatY 6s ease-in-out infinite}
.hero-char .ring{position:absolute;top:50%;left:50%;width:74%;aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);border:3px dashed rgba(122,51,200,.35);animation:spin 26s linear infinite}
.hero-char .ring.r2{width:90%;border-color:rgba(31,199,212,.3);animation-duration:40s;animation-direction:reverse}
.spark{position:absolute;width:34px;height:34px;z-index:6;
  background:var(--yellow);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  filter:drop-shadow(0 2px 0 var(--ink));animation:twinkle 2.6s ease-in-out infinite}

.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:8;
  display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--purple);font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.2em}
.scroll-cue .mouse{width:26px;height:42px;border:3px solid var(--purple);border-radius:14px;position:relative}
.scroll-cue .mouse::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;border-radius:3px;
  background:var(--purple);transform:translateX(-50%);animation:wheel 1.6s infinite}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.sec{padding-block:clamp(70px,9vw,120px)}
.sec-head{text-align:center;max-width:760px;margin:0 auto 54px}
.sec-head .pop{font-size:clamp(2rem,4.5vw,3.4rem)}
.sec-head p{margin-top:14px;font-size:1.05rem;color:var(--ink-soft);font-weight:500}

/* ============================================================
   FEATURES
   ============================================================ */
.features{background:linear-gradient(180deg,#fff, var(--paper-2))}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.feat{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:3px solid var(--ink);background:#fff;
  box-shadow:var(--shadow-card);
  transition:transform .25s, box-shadow .25s;
}
.feat:hover{transform:translateY(-8px);box-shadow:0 28px 50px -16px rgba(36,21,68,.5)}
.feat .img{aspect-ratio:16/9;overflow:hidden;background:var(--paper-3)}
.feat .img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.feat:hover .img img{transform:scale(1.06)}
.feat .body{padding:20px 22px 24px}
.feat .tag{display:inline-block;font-family:var(--f-display);font-weight:800;font-size:.74rem;
  text-transform:uppercase;letter-spacing:.06em;color:#fff;background:var(--purple);
  padding:4px 11px;border-radius:8px;margin-bottom:10px}
.feat h3{font-family:var(--f-display);font-weight:800;font-size:1.45rem;color:var(--ink);line-height:1;margin-bottom:8px}
.feat p{font-size:.96rem;color:var(--ink-soft);font-weight:500}
.feat .corner{position:absolute;top:0;right:0;width:54px;height:54px;background:var(--yellow);
  clip-path:polygon(100% 0,0 0,100% 100%);border-left:3px solid transparent}

/* color accents per feature */
.feat.c-pink .tag{background:var(--pink)} .feat.c-pink .corner{background:var(--pink)}
.feat.c-cyan .tag{background:var(--cyan)} .feat.c-cyan .corner{background:var(--cyan)}
.feat.c-green .tag{background:var(--green)} .feat.c-green .corner{background:var(--green)}
.feat.c-orange .tag{background:var(--orange)} .feat.c-orange .corner{background:var(--orange)}
.feat.c-gold .tag{background:var(--gold)} .feat.c-gold .corner{background:var(--gold)}

/* ============================================================
   CHARACTER SHOWCASE
   ============================================================ */
.chars{background:var(--ink);color:#fff;overflow:hidden}
.chars .sec-head .pop{color:#fff;-webkit-text-stroke:2.5px #000}
.chars .sec-head p{color:rgba(255,255,255,.75)}
.chars .halftone-d{position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.08) 1.4px,transparent 1.5px);background-size:16px 16px}

.char-stage{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center;min-height:560px}
.char-art{position:relative;height:600px}
.char-glow{position:absolute;top:50%;left:50%;width:560px;height:560px;transform:translate(-50%,-50%);
  border-radius:50%;filter:blur(60px);opacity:.55;transition:background .5s;z-index:0}
.char-bigtxt{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;
  font-family:var(--f-display);font-weight:800;font-size:13rem;color:rgba(255,255,255,.05);
  white-space:nowrap;letter-spacing:-.04em;pointer-events:none;transition:opacity .4s}
.char-art img{position:absolute;inset:0;margin:auto;height:100%;width:100%;object-fit:contain;z-index:2;
  filter:drop-shadow(0 30px 34px rgba(0,0,0,.5));
  opacity:0;transform:translateX(40px) scale(.96);transition:opacity .45s, transform .45s}
.char-art img.show{opacity:1;transform:none}

.char-info{position:relative;z-index:3}
.char-el{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-display);font-weight:800;
  text-transform:uppercase;letter-spacing:.08em;font-size:.9rem;padding:6px 14px;border-radius:999px;
  color:#fff;margin-bottom:14px;border:2px solid rgba(255,255,255,.25)}
.char-name{font-family:var(--f-display);font-weight:800;font-size:clamp(2.4rem,4.6vw,3.6rem);line-height:.95;
  text-transform:uppercase;margin-bottom:6px}
.char-role{font-size:1.05rem;font-weight:700;color:var(--cyan-bright);margin-bottom:18px}
.char-desc{font-size:1.02rem;color:rgba(255,255,255,.8);font-weight:500;max-width:46ch;margin-bottom:24px}
.char-bars{display:grid;gap:12px;max-width:380px;margin-bottom:10px}
.char-bars .bar{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:12px;font-weight:700;font-size:.86rem}
.char-bars .track{height:11px;border-radius:8px;background:rgba(255,255,255,.14);overflow:hidden}
.char-bars .fill{height:100%;border-radius:8px;width:0;transition:width .7s ease}

/* selector */
.char-picker{display:flex;gap:14px;justify-content:center;margin-top:46px;flex-wrap:wrap}
.char-pick{
  position:relative;width:86px;height:86px;border-radius:18px;overflow:hidden;
  border:3px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);
  transition:transform .2s, border-color .2s;flex:0 0 auto}
.char-pick img{width:150%;height:150%;max-width:none;object-fit:cover;object-position:center 18%;
  transform:translate(-16%,-6%)}
.char-pick:hover{transform:translateY(-5px)}
.char-pick.active{border-color:var(--yellow);transform:translateY(-5px) scale(1.05);box-shadow:0 0 0 3px var(--ink),0 12px 24px rgba(0,0,0,.5)}
.char-pick.active::after{content:"";position:absolute;inset:0;border:3px solid var(--yellow);border-radius:14px}

/* ============================================================
   EVENTS
   ============================================================ */
.events{background:linear-gradient(180deg,var(--paper-2),#fff)}
.event-hero{position:relative;border-radius:var(--r-lg);overflow:hidden;border:3px solid var(--ink);
  box-shadow:var(--shadow-card);margin-bottom:30px}
.event-hero img{width:100%;display:block}
.event-hero .ev-tag{position:absolute;top:18px;left:18px;background:var(--pink);color:#fff;
  font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  padding:7px 16px;border-radius:10px;border:2.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-size:.9rem}

.gift-row{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:stretch}
.giftbox{background:linear-gradient(135deg,var(--purple),var(--purple-deep));color:#fff;
  border-radius:var(--r-lg);border:3px solid var(--ink);box-shadow:var(--shadow-card);
  padding:30px;position:relative;overflow:hidden}
.giftbox .halftone-d{position:absolute;inset:0;opacity:.25;
  background-image:radial-gradient(rgba(255,255,255,.18) 1.4px,transparent 1.5px);background-size:14px 14px}
.giftbox h3{font-family:var(--f-display);font-weight:800;font-size:1.7rem;text-transform:uppercase;margin-bottom:6px;position:relative}
.giftbox p{color:rgba(255,255,255,.82);margin-bottom:20px;position:relative}
.code-field{display:flex;gap:10px;position:relative;flex-wrap:wrap}
.code-field .code{flex:1;min-width:180px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:rgba(255,255,255,.12);border:2px dashed rgba(255,255,255,.55);border-radius:12px;
  padding:14px 18px;font-family:var(--f-display);font-weight:800;font-size:1.25rem;letter-spacing:.06em}
.copy-btn{background:var(--yellow);color:var(--ink);border:3px solid var(--ink);border-radius:12px;
  font-family:var(--f-display);font-weight:800;text-transform:uppercase;padding:0 22px;box-shadow:3px 3px 0 var(--ink);
  transition:transform .15s, box-shadow .15s}
.copy-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.copy-btn.done{background:var(--green)}

.event-mini{display:grid;grid-template-rows:1fr 1fr;gap:24px}
.mini{display:flex;gap:16px;align-items:center;background:#fff;border:3px solid var(--ink);
  border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-card);transition:transform .2s}
.mini:hover{transform:translateX(6px)}
.mini .thumb{width:150px;flex:0 0 150px;align-self:stretch;overflow:hidden;background:var(--paper-3)}
.mini .thumb img{width:100%;height:100%;object-fit:cover}
.mini .mbody{padding:14px 18px}
.mini h4{font-family:var(--f-display);font-weight:800;font-size:1.2rem;line-height:1;margin-bottom:5px}
.mini p{font-size:.88rem;color:var(--ink-soft);font-weight:500}

/* ============================================================
   NEWS
   ============================================================ */
.news{background:var(--paper-2)}
.news-tabs{display:flex;gap:10px;justify-content:center;margin-bottom:34px;flex-wrap:wrap}
.news-tab{font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:.03em;
  font-size:.95rem;padding:10px 22px;border-radius:12px;border:3px solid var(--ink);background:#fff;color:var(--ink);
  transition:.18s}
.news-tab:hover{background:var(--cyan-bright)}
.news-tab.active{background:var(--ink);color:#fff}
.news-list{display:grid;gap:14px;max-width:920px;margin:0 auto}
.news-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;
  background:#fff;border:2.5px solid var(--ink);border-radius:var(--r-md);padding:16px 22px;
  box-shadow:0 8px 20px -14px rgba(36,21,68,.5);transition:transform .18s, box-shadow .18s}
.news-item:hover{transform:translateX(6px);box-shadow:0 14px 26px -14px rgba(36,21,68,.6)}
.news-item .cat{font-family:var(--f-display);font-weight:800;font-size:.74rem;text-transform:uppercase;
  letter-spacing:.05em;color:#fff;padding:5px 12px;border-radius:8px}
.cat.event{background:var(--pink)} .cat.update{background:var(--cyan)} .cat.maint{background:var(--orange)} .cat.guide{background:var(--green)}
.news-item .ttl{font-weight:700;font-size:1.05rem;color:var(--ink)}
.news-item .ttl small{display:block;font-weight:500;color:var(--muted);font-size:.85rem;margin-top:2px}
.news-item .date{font-weight:700;color:var(--muted);font-size:.9rem;white-space:nowrap}
.news-foot{text-align:center;margin-top:34px}

/* ============================================================
   COMMUNITY
   ============================================================ */
.community{background:linear-gradient(180deg,#fff,var(--sky-1))}
.social-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-bottom:46px}
.social{position:relative;border-radius:var(--r-lg);border:3px solid var(--ink);overflow:hidden;
  padding:30px 24px;color:#fff;box-shadow:var(--shadow-card);transition:transform .22s;
  display:flex;flex-direction:column;gap:8px;min-height:188px;justify-content:flex-end}
.social:hover{transform:translateY(-8px)}
.social .ic{width:46px;height:46px;margin-bottom:auto}
.social .ic svg{width:100%;height:100%;fill:#fff}
.social h4{font-family:var(--f-display);font-weight:800;font-size:1.4rem;line-height:1}
.social .meta{font-size:.9rem;font-weight:600;opacity:.85}
.social.fb{background:#1877F2} .social.dc{background:#5865F2}
.social.yt{background:#FF0033} .social.tt{background:#111}
.social .arrow{position:absolute;top:18px;right:18px;font-size:1.4rem;opacity:.7;transition:transform .2s}
.social:hover .arrow{transform:translate(4px,-4px)}

/* ============================================================
   FINAL CTA / FOOTER
   ============================================================ */
.finalcta{position:relative;overflow:hidden;padding-block:clamp(80px,10vw,130px);text-align:center;
  background:linear-gradient(135deg,var(--cyan),var(--purple));color:#fff}
.finalcta .halftone-d{position:absolute;inset:0;opacity:.3;
  background-image:radial-gradient(rgba(255,255,255,.2) 1.4px,transparent 1.5px);background-size:16px 16px}
.finalcta h2{font-family:var(--f-display);font-weight:800;font-size:clamp(2.2rem,5.5vw,4rem);line-height:.98;
  text-transform:uppercase;margin-bottom:14px;position:relative;
  -webkit-text-stroke:2.5px var(--ink);paint-order:stroke fill;text-shadow:5px 6px 0 rgba(36,21,68,.4)}
.finalcta p{font-size:1.15rem;font-weight:600;margin-bottom:30px;position:relative;opacity:.95}
.finalcta .hero-actions{justify-content:center;position:relative}

.footer{background:var(--ink);color:rgba(255,255,255,.7);padding-block:54px 30px}
.footer .ftop{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:40px}
.footer img.flogo{height:64px;width:auto;margin-bottom:14px}
.footer .fdesc{font-size:.92rem;max-width:34ch}
.footer h5{font-family:var(--f-display);font-weight:800;color:#fff;text-transform:uppercase;font-size:1.05rem;margin-bottom:14px;letter-spacing:.04em}
.footer ul li{margin-bottom:9px}
.footer ul a{font-size:.94rem;transition:color .15s}
.footer ul a:hover{color:var(--cyan-bright)}
.footer .fbottom{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.84rem}
.footer .disc{max-width:62ch;line-height:1.5}

/* ============================================================
   SIDE DOTS NAV
   ============================================================ */
.dots{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:90;
  display:flex;flex-direction:column;gap:14px}
.dots button{width:13px;height:13px;border-radius:50%;border:2.5px solid var(--ink);background:#fff;
  position:relative;transition:.2s}
.dots button:hover{transform:scale(1.25)}
.dots button.active{background:var(--purple);border-color:var(--purple);transform:scale(1.3)}
.dots button span{position:absolute;right:24px;top:50%;transform:translateY(-50%);white-space:nowrap;
  background:var(--ink);color:#fff;font-size:.74rem;font-weight:700;padding:4px 10px;border-radius:7px;
  opacity:0;pointer-events:none;transition:opacity .2s}
.dots button:hover span{opacity:1}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal{opacity:0;transform:translateY(38px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.4s}

@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes twinkle{0%,100%{transform:scale(.7) rotate(0);opacity:.5}50%{transform:scale(1.1) rotate(40deg);opacity:1}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(123,214,75,.7)}70%{box-shadow:0 0 0 9px rgba(123,214,75,0)}100%{box-shadow:0 0 0 0 rgba(123,214,75,0)}}
@keyframes wheel{0%{opacity:1;top:7px}100%{opacity:0;top:20px}}
@keyframes marquee{to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .nav{display:none}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .social-grid{grid-template-columns:repeat(2,1fr)}
  .footer .ftop{grid-template-columns:1fr 1fr}
}
@media (max-width:880px){
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .hero-copy{margin-inline:auto}
  .hero-logo{margin-inline:auto}
  .hero-actions,.hero-stats,.server-chip{justify-content:center}
  .hero-char{height:48vh;order:-1}
  .char-stage{grid-template-columns:1fr}
  .char-art{height:420px;order:-1}
  .char-bigtxt{font-size:7rem}
  .gift-row{grid-template-columns:1fr}
  .char-info{text-align:center}
  .char-bars{margin-inline:auto}
  .char-el{margin-inline:auto}
}
@media (max-width:560px){
  .feat-grid{grid-template-columns:1fr}
  .social-grid{grid-template-columns:1fr}
  .footer .ftop{grid-template-columns:1fr}
  .mini .thumb{flex-basis:110px;width:110px}
  .news-item{grid-template-columns:1fr;gap:8px}
  .news-item .date{order:-1}
  .dots{display:none}
  .topbar-cta .btn span{display:none}
}