/* Base styles for GFExile — responsive + effects */
:root{
  --bg:#0f1117;--panel:#0d0f14;--panel-2:#131726;--ink:#e9edf3;--muted:#b7c0cd;
  --brand:#ffd054;--brand-2:#9faaff;--ring:#2a3048;--accent:#ffd054;
  --wrap:1100px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:radial-gradient(1600px 800px at 50% -20%,#3b3f66 0,#191c2b 55%,#0f1115 100%);
  color:var(--ink);font:16px/1.6 system-ui,Segoe UI,Inter,Roboto,Arial,sans-serif;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:min(var(--wrap),100%);margin-inline:auto;padding-inline:18px}
.skip{position:absolute;left:-9999px}
h1,h2,h3{margin:0 0 10px}
h2{font-size:clamp(20px,3vw,28px)}
.lead{color:var(--muted)}
.accent{color:var(--accent);text-shadow:0 2px 0 #000}
.grid{display:grid}
.cols-2{grid-template-columns:1.2fr .8fr}
.cols-3{grid-template-columns:repeat(3,1fr)}
.gap{gap:16px}
@media (max-width:980px){.cols-2,.cols-3{grid-template-columns:1fr}}

/* Nav */
.nav{position:sticky;top:0;z-index:50;border-bottom:1px solid #1c2134;background:#0b0e13aa;backdrop-filter:blur(10px)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:12px;height:56px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand__logo{width:28px;height:28px;object-fit:contain}
.brand__word{white-space:nowrap;overflow:visible;text-overflow:clip;font-weight:700}
.menu{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.menu a{opacity:.9;padding:.35rem .6rem;border-radius:.6rem}
.menu a[aria-current="page"],.menu a:hover{background:#141927;border:1px solid var(--ring)}
.burger{display:none;background:#141927;border:1px solid var(--ring);color:var(--ink);padding:.4rem .6rem;border-radius:.6rem}
@media (max-width:860px){
  .menu{display:none;position:absolute;left:0;right:0;top:56px;background:#0d0f14;border-bottom:1px solid var(--ring);padding:10px}
  .menu.open{display:flex;flex-wrap:wrap}
  .burger{display:block}
}

/* Hero */
.hero{
  position:relative;min-height:64svh;display:grid;place-items:center;overflow:hidden;
  background: radial-gradient(1200px 500px at 50% -10%,#273055 0,#0f1117 65%,#0b0e13 100%);
}
.hero::before{
  content:"";position:absolute;inset:-10% -10% 0 -10%;
  background:var(--crest) center/contain no-repeat;
  opacity:.25;filter:blur(0.6px) saturate(1.05);
  transform:translateY(var(--bgY,0px));transition:transform .1s;
}
.hero::after{
  content:"";position:absolute;inset:-30% -10% -20% -10%;
  background:var(--bg) center/cover no-repeat;opacity:.08;
}
.hero__in{position:relative;text-align:center;padding:64px 0}
.display{font-size:clamp(34px,6vw,64px);letter-spacing:.02em;text-shadow:0 2px 0 #000}
.cta{margin-top:16px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Cards / Feats */
.card{background:linear-gradient(180deg,#0b0e13,#0d1119);border:1px solid var(--ring);border-radius:16px;padding:14px;box-shadow:0 1px 0 #000a}
.card h3{margin:0 0 6px}
.feat{min-height:128px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border-radius:.8rem;background:#141927;border:1px solid var(--ring);color:var(--ink);cursor:pointer}
.btn.primary{background:linear-gradient(180deg,#ffdb7a,#ffd054);color:#1d1a0f;font-weight:800;box-shadow:0 8px 20px #ffd05430}
.btn.primary:hover{filter:saturate(1.05)}
.btn:hover{transform:translateY(-1px)}

/* Status */
.status-list{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.dot{display:inline-block;width:.66rem;height:.66rem;border-radius:999px;background:#666;margin-right:.4rem;box-shadow:0 0 10px #0}
.dot.online{background:#1fef7b;box-shadow:0 0 12px #1fef7b55}

/* Steps */
.steps{margin:0;padding:0 1rem;display:grid;gap:8px}

/* Footer */
.footer{border-top:1px solid #1c2134;background:#0b0e13;margin-top:40px}
.footer .wrap{padding:18px}

/* ===== Quick-win FX pack ===== */
.btn.primary{position:relative;overflow:hidden}
.btn.primary::after{content:"";position:absolute;inset:-2px;border-radius:.8rem;pointer-events:none;background: radial-gradient(120px 30px at var(--sx,-20%) 50%,rgba(255,255,255,.35),transparent 60%), linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);transform:translateX(var(--t,-140%));animation:btn-shimmer 3.4s ease-in-out infinite}
@keyframes btn-shimmer{0%{--t:-140%}60%{--t:150%}100%{--t:150%}}
.btn.primary{box-shadow:0 0 0 0 rgba(255,208,84,.0);animation:btn-pulse 2.8s ease-in-out infinite}
@keyframes btn-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,208,84,.0)}50%{box-shadow:0 0 24px 8px rgba(255,208,84,.25)}}

.section h2{position:relative;display:inline-block;padding:0 10px}
.section h2::before{content:"";position:absolute;inset:-6px -12px;border-radius:12px;pointer-events:none;background: radial-gradient(120px 60px at 10% 50%,rgba(255,208,84,.14),transparent 60%), radial-gradient(120px 60px at 90% 50%,rgba(159,170,255,.14),transparent 60%);box-shadow:0 0 0 1px #2c3350,0 0 18px rgba(88,130,255,.25),inset 0 0 24px rgba(255,208,84,.12)}
.section h2::after{content:"";display:block;width:160px;height:14px;margin:12px auto 0;opacity:.75;background: radial-gradient(circle at 8px 50%,rgba(255,208,84,.8) 0 3px,transparent 3px) left center/20px 14px no-repeat, linear-gradient(90deg,transparent,rgba(255,208,84,.35),transparent);filter:drop-shadow(0 0 6px rgba(255,208,84,.3))}
.hero{background-position:center var(--bgY,0px)}
.tilt{position:relative;transform-style:preserve-3d;transition:transform .15s ease,box-shadow .2s ease}
.tilt::after{content:"";position:absolute;inset:-1px;border-radius:16px;pointer-events:none;opacity:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.06),transparent);transition:opacity .2s ease}
.tilt:hover::after{opacity:1}
.tilt:hover{box-shadow:0 10px 30px #0007}
.btn{position:relative;overflow:hidden}
.spark{--dx:0px;--dy:0px;position:absolute;width:6px;height:6px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#ffd054,#ff9f43 70%,transparent 71%);animation:spark-fly .6s ease-out forwards}
@keyframes spark-fly{to{transform:translate(var(--dx),var(--dy)) scale(.5);opacity:0}}
.section{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.section.show{opacity:1;transform:none}
.glass{backdrop-filter:blur(10px) saturate(120%)}
.card .spot{position:absolute;inset:auto auto 0 0;width:120px;height:6px;background:radial-gradient(90px 4px at 12px 50%,#ffd05488,transparent 60%);opacity:.45;border-radius:999px}
.muted{color:var(--muted)}