/* GOLB 3-page smooth scroll site - English only */
:root{
  --bg:#07070c;
  --fg:#f4f4ff;
  --muted:rgba(244,244,255,.78);
  --stroke:rgba(255,255,255,.14);
  --glass:rgba(0,0,0,.30);
  --glass2:rgba(0,0,0,.46);
  --red:#ff2d3d;
  --lime:#7dff8a;
  --amber:#ffb84a;
  --shadow: 0 18px 70px rgba(0,0,0,.55);
  --r: 18px;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  background: radial-gradient(1200px 700px at 30% 10%, rgba(255,45,61,.10), transparent 60%),
              radial-gradient(900px 600px at 80% 60%, rgba(125,255,138,.08), transparent 55%),
              var(--bg);
  color:var(--fg);
  overflow:hidden;
}

/* Custom cursor */
.cursor{
  position:fixed;
  width:16px;height:16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  box-shadow: 0 0 30px rgba(255,45,61,.20);
  pointer-events:none;
  z-index:60;
  transform: translate(-50%,-50%);
  mix-blend-mode: screen;
}
@media (pointer:coarse){
  .cursor{display:none}
}

/* Grain overlay */
.grain{
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  opacity:.09;
  mix-blend-mode: overlay;
  pointer-events:none;
  z-index:1;
}

/* Embers canvas */
.embers{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:2;
  opacity:.65;
}

.topbar{
  position:fixed;
  inset:0 0 auto 0;
  height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
  z-index:50;
  background: linear-gradient(to bottom, rgba(0,0,0,.70), rgba(0,0,0,.08));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--fg);
  min-width: 220px;
}
.sigil{
  width:12px;height:12px;border-radius:999px;
  background: radial-gradient(circle at 35% 35%, #fff, var(--red));
  box-shadow: 0 0 18px rgba(255,45,61,.50);
}
.brandText{display:flex;flex-direction:column;gap:2px}
.brandName{
  font-weight:800;
  letter-spacing:.22em;
  font-size:14px;
}
.brandTag{
  font-size:12px;
  color: rgba(244,244,255,.70);
  letter-spacing:.06em;
}

.nav{
  display:flex;
  gap:10px;
  padding:8px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  border-radius:999px;
}
.navlink{
  position:relative;
  padding:10px 14px;
  border-radius:999px;
  color: rgba(244,244,255,.86);
  text-decoration:none;
  font-weight:700;
  letter-spacing:.06em;
  transition: background .14s ease, color .14s ease, transform .14s ease;
}
.navlink::after{
  content:"";
  position:absolute;
  left:12px; right:12px; bottom:7px;
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(255,45,61,.0), rgba(255,45,61,.75), rgba(125,255,138,.0));
  opacity:0;
  transform: scaleX(.7);
  transition: opacity .14s ease, transform .14s ease;
}
.navlink:hover{
  background: rgba(255,255,255,.07);
  transform: translateY(-1px);
}
.navlink.active{
  color: rgba(255,255,255,.98);
  background: rgba(255,45,61,.12);
  border: 1px solid rgba(255,45,61,.18);
}
.navlink.active::after{opacity:1;transform:scaleX(1)}

.actions{display:flex;gap:10px;align-items:center}

.btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.95);
  padding:11px 14px;
  border-radius:999px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.10em;
  cursor:pointer;
  user-select:none;
  transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 14px 44px rgba(0,0,0,.35);
}
.btn:active{transform: translateY(0)}
.btnIcon{opacity:.9}
.btnBuy{
  background: linear-gradient(135deg, rgba(255,45,61,.95), rgba(125,255,138,.18));
  border-color: rgba(255,45,61,.55);
  box-shadow: 0 18px 60px rgba(255,45,61,.15);
}
.btnBuy:hover{
  background: linear-gradient(135deg, rgba(255,45,61,1), rgba(125,255,138,.22));
  border-color: rgba(255,45,61,.75);
}
.btnGhost{background: rgba(0,0,0,.20)}
.w100{width:100%}

/* Side scroll hint */
.side{
  position:fixed;
  right:16px;
  top:50%;
  transform: translateY(-50%);
  z-index:40;
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:center;
  pointer-events:none;
}
.pill{
  pointer-events:none;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  display:flex;
  align-items:center;
  gap:10px;
  box-shadow: 0 18px 70px rgba(0,0,0,.35);
}
.pillDot{
  width:8px;height:8px;border-radius:999px;
  background: var(--lime);
  box-shadow: 0 0 18px rgba(125,255,138,.45);
  animation: pulse 1.6s ease-in-out infinite;
}
.pillText{
  font-size:12px;
  letter-spacing:.14em;
  font-weight:800;
  color: rgba(244,244,255,.75);
  text-transform:uppercase;
}
.ticks{display:flex;flex-direction:column;gap:8px;opacity:.75}
.ticks span{
  width:3px;height:18px;border-radius:999px;
  background: rgba(255,255,255,.18);
}
.ticks span:nth-child(2){background: rgba(255,45,61,.26)}
@keyframes pulse{
  0%,100%{transform:scale(1);opacity:.9}
  50%{transform:scale(1.45);opacity:.65}
}

/* Scroller */
.scroller{
  position:fixed;
  inset:74px 0 0 0;
  height: calc(100vh - 74px);
  overflow-y:auto;
  overflow-x:hidden;
  scroll-snap-type: y mandatory;
}

/* Panels */
.panel{
  position:relative;
  min-height: calc(100vh - 74px);
  scroll-snap-align: start;
  display:grid;
  align-items:center;
  padding: 34px 18px;
  background-size: cover;
  background-position: center;
  isolation:isolate;
}
.bg1{background-image:url("img/page1.png")}
.bg2{background-image:url("img/page2.png")}
.bg3{background-image:url("img/page3.jpg")}

.vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 18% 25%, rgba(255,45,61,.20), transparent 58%),
    radial-gradient(860px 560px at 78% 70%, rgba(125,255,138,.12), transparent 62%),
    radial-gradient(1200px 800px at 50% 55%, rgba(0,0,0,.25), rgba(0,0,0,.65)),
    linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.55));
  z-index:-1;
}

/* Decorative layers */
.shards, .goo, .flame{
  position:absolute; inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.95;
}
.shards{
  background:
    radial-gradient(12px 10px at 12% 35%, rgba(125,255,138,.85), transparent 65%),
    radial-gradient(14px 12px at 18% 55%, rgba(125,255,138,.70), transparent 70%),
    radial-gradient(10px 8px  at 28% 42%, rgba(125,255,138,.65), transparent 70%),
    radial-gradient(14px 12px at 78% 28%, rgba(125,255,138,.65), transparent 70%),
    radial-gradient(10px 8px  at 86% 62%, rgba(125,255,138,.75), transparent 70%);
  filter: blur(.2px);
  animation: floaty 6.5s ease-in-out infinite;
}
.goo{
  background:
    radial-gradient(420px 220px at 30% 70%, rgba(125,255,138,.12), transparent 60%),
    radial-gradient(520px 260px at 70% 35%, rgba(125,255,138,.10), transparent 60%);
  mix-blend-mode: screen;
  animation: breathe 5.5s ease-in-out infinite;
}
.flame{
  background:
    radial-gradient(520px 280px at 18% 88%, rgba(255,184,74,.18), transparent 62%),
    radial-gradient(560px 300px at 84% 92%, rgba(255,45,61,.18), transparent 62%);
  animation: breathe 4.8s ease-in-out infinite;
}
@keyframes floaty{
  0%,100%{transform: translateY(0)}
  50%{transform: translateY(-12px)}
}
@keyframes breathe{
  0%,100%{opacity:.75;transform: scale(1)}
  50%{opacity:1;transform: scale(1.02)}
}

.wrap{
  position:relative;
  width:min(1080px, 100%);
  margin:0 auto;
  z-index:2;
}

.heroCard, .miniLore, .card, .final{
  border-radius: var(--r);
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(0,0,0,.56), rgba(0,0,0,.34));
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

.heroCard{
  padding: 26px 24px;
}
.kicker{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: rgba(244,244,255,.78);
  margin-bottom: 10px;
}
.lead{
  margin: 0 0 18px 0;
  max-width: 66ch;
  color: var(--muted);
  font-size: clamp(14px, 1.35vw, 18px);
  line-height:1.6;
}

h1,h2,h3{margin:0 0 10px 0}
.title{
  font-size: clamp(34px, 4.4vw, 58px);
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1.02;
}
.titleSm{
  font-size: 18px;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom: 10px;
}
.glitch{
  font-size: clamp(46px, 7vw, 86px);
  letter-spacing:.18em;
  text-transform:uppercase;
  line-height:1;
  position:relative;
  display:inline-block;
  margin-bottom: 10px;
}
.glitch::before,
.glitch::after{
  content: attr(data-text);
  position:absolute;
  left:0; top:0;
  width:100%;
  overflow:hidden;
  opacity:.65;
}
.glitch::before{
  transform: translate(2px, -1px);
  color: rgba(125,255,138,.80);
  clip-path: inset(0 0 55% 0);
  animation: glitch 2.2s infinite linear;
}
.glitch::after{
  transform: translate(-2px, 1px);
  color: rgba(255,45,61,.85);
  clip-path: inset(45% 0 0 0);
  animation: glitch 2.6s infinite linear;
}
@keyframes glitch{
  0%{filter: blur(0px)}
  10%{clip-path: inset(10% 0 75% 0)}
  20%{clip-path: inset(60% 0 15% 0)}
  30%{clip-path: inset(35% 0 40% 0)}
  40%{clip-path: inset(75% 0 10% 0)}
  50%{clip-path: inset(25% 0 55% 0)}
  60%{clip-path: inset(55% 0 25% 0)}
  70%{clip-path: inset(18% 0 70% 0)}
  80%{clip-path: inset(66% 0 12% 0)}
  90%{clip-path: inset(42% 0 34% 0)}
  100%{clip-path: inset(0 0 55% 0)}
}

.ctaRow{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}

.caBox{
  margin-top: 16px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,.22);
  background: rgba(0,0,0,.22);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.caLeft{display:flex;flex-direction:column;gap:6px;min-width:0}
.caLabel{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(244,244,255,.70);
}
code{
  font-family: var(--mono);
  font-size: 13px;
  color: rgba(255,255,255,.90);
  white-space: nowrap;
  overflow:auto;
}
.chip{
  appearance:none;
  border:1px solid rgba(255,45,61,.28);
  background: rgba(255,45,61,.12);
  color: rgba(255,255,255,.95);
  padding: 10px 12px;
  border-radius: 999px;
  font-weight:900;
  letter-spacing:.12em;
  cursor:pointer;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
  user-select:none;
}
.chip:hover{
  transform: translateY(-1px);
  background: rgba(255,45,61,.16);
  border-color: rgba(255,45,61,.40);
}
.stats{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
}
.stat{
  padding: 12px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.statKey{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(244,244,255,.65);
}
.statVal{
  margin-top:6px;
  font-weight:800;
  letter-spacing:.06em;
}

.miniLore{
  margin-top: 14px;
  padding: 18px 20px;
}
.miniTitle{
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:8px;
  color: rgba(255,255,255,.92);
}
.miniLore p{
  margin:0;
  color: rgba(244,244,255,.76);
  line-height:1.65;
}

/* Section 2 layout */
.grid{
  display:grid;
  grid-template-columns: 1.35fr .95fr;
  gap:14px;
  align-items:start;
}
.card{
  padding: 22px 22px;
}
.cardAlt{
  background: linear-gradient(180deg, rgba(0,0,0,.50), rgba(0,0,0,.30));
  border-color: rgba(255,255,255,.12);
}
.quote{
  margin-top: 14px;
  padding: 14px 14px;
  border-radius: 14px;
  border:1px solid rgba(125,255,138,.18);
  background: rgba(125,255,138,.07);
  display:flex;
  gap:10px;
}
.quoteMark{
  font-size:26px;
  line-height:1;
  color: rgba(125,255,138,.90);
  font-weight:900;
}
.quoteText{
  color: rgba(244,244,255,.78);
  line-height:1.55;
}

.list{
  list-style:none;
  padding:0;margin:10px 0 0 0;
  display:flex;flex-direction:column;gap:10px;
  color: rgba(244,244,255,.78);
}
.list .dot{
  display:inline-block;
  width:8px;height:8px;border-radius:999px;
  background: rgba(255,45,61,.85);
  box-shadow: 0 0 14px rgba(255,45,61,.25);
  margin-right:10px;
  transform: translateY(-1px);
}
.divider{
  height:1px;
  background: rgba(255,255,255,.10);
  margin: 16px 0;
}
.mini{display:flex;flex-direction:column;gap:6px}
.miniKey{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(244,244,255,.65);
}
.miniVal{font-size:12px}

.roadTitle{
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color: rgba(244,244,255,.70);
  margin-bottom:10px;
  font-weight:900;
}
.steps{display:flex;flex-direction:column;gap:10px}
.step{
  display:flex;gap:10px;align-items:center;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.stepN{
  font-family: var(--mono);
  font-weight:800;
  color: rgba(255,45,61,.92);
}
.stepT{
  font-weight:800;
  letter-spacing:.06em;
}

/* Final */
.final{
  padding: 26px 24px;
}
.footerCard{
  margin-top:16px;
  padding: 14px 14px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
}
.footerRow{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.footerKey{
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color: rgba(244,244,255,.65);
  font-weight:900;
}
.footerVal{font-size:12px}
.fine{
  margin-top:10px;
  color: rgba(244,244,255,.62);
  font-size:12px;
  letter-spacing:.04em;
}

/* Reveal */
.reveal{
  opacity:0;
  transform: translateY(14px) scale(.99);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.in{
  opacity:1;
  transform: translateY(0) scale(1);
}

/* Toast */
.toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform: translateX(-50%);
  padding: 10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.70);
  backdrop-filter: blur(12px);
  color: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  z-index:70;
  letter-spacing:.10em;
  font-weight:900;
  font-size:12px;
  text-transform:uppercase;
}
.toast.show{
  opacity:1;
  transform: translateX(-50%) translateY(-4px);
}

/* Responsive */
@media (max-width: 980px){
  .grid{grid-template-columns: 1fr}
  .side{display:none}
}
@media (max-width: 560px){
  .topbar{height:auto; padding:10px 12px; gap:10px; flex-wrap:wrap}
  .brand{min-width: unset}
  .nav{order:3; width:100%; justify-content:center; flex-wrap:wrap}
  .scroller{inset: calc(74px + 44px) 0 0 0}
  .panel{min-height: calc(100vh - 118px)}
  .stats{grid-template-columns:1fr}
  code{font-size:12px}
}