:root {
  --ink: #170d0b;
  --ink-soft: #2c1713;
  --red: #e72d0d;
  --lava: #ff5b0b;
  --amber: #ffc319;
  --cream: #fff3d6;
  --white: #fffaf0;
  --line: rgba(255, 242, 211, 0.2);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--cream);
  background: var(--ink);
  font-family: "Manrope", sans-serif;
  overflow-x: hidden;
}

body::before {
  position: fixed;
  z-index: -2;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 92% 4%, rgba(231, 45, 13, 0.32), transparent 21rem),
    radial-gradient(circle at 0 54%, rgba(255, 91, 11, 0.13), transparent 26rem),
    linear-gradient(125deg, #1b0d0a 0%, #170d0b 41%, #24100c 100%);
}

body::after {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: .13;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }

.page-glow { position: fixed; z-index: -1; border-radius: 50%; pointer-events: none; filter: blur(55px); }
.glow-one { width: 16rem; height: 16rem; right: -7rem; top: 32rem; background: rgba(231, 45, 13, .16); }
.glow-two { width: 13rem; height: 13rem; left: -7rem; bottom: 4rem; background: rgba(255, 195, 25, .12); }

.site-header, .section-shell, .site-footer { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }

.site-header {
  width: 100%;
  min-height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding-inline: max(24px, calc((100% - 1180px) / 2));
  background: var(--ink);
}

.brand { display: inline-flex; align-items: center; gap: 10px; font-family: "Unbounded", sans-serif; font-size: 1.06rem; font-weight: 900; letter-spacing: -.08em; }
.brand img { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; border: 2px solid var(--amber); box-shadow: 0 0 0 3px rgba(255, 91, 11, .25); }

.main-nav { display: flex; align-items: center; gap: clamp(17px, 3.1vw, 44px); margin-left: 9.5rem; }
.main-nav a, .back-to-top { font-size: .67rem; font-weight: 800; letter-spacing: .11em; transition: color .2s ease; }
.main-nav a:hover, .back-to-top:hover { color: var(--amber); }

.header-buy, .outline-link {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  padding: 13px 18px;
  color: var(--ink);
  background: var(--amber);
  font-size: .71rem;
  font-weight: 900;
  letter-spacing: .08em;
  box-shadow: 4px 4px 0 var(--red);
  transition: transform .2s ease, box-shadow .2s ease;
}

.header-buy:hover, .outline-link:hover { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--red); }

.hero { width: 100%; min-height: calc(100svh - 94px); position: relative; display: block; isolation: isolate; padding: 76px 0; background: linear-gradient(90deg, rgba(23, 13, 11, .12) 0%, rgba(23, 13, 11, .02) 52%, rgba(23, 13, 11, .06) 100%), url("assets/guba-hero-background.png") right center / cover no-repeat; }
.hero-copy { position: relative; z-index: 1; max-width: 462px; }
.eyebrow { display: flex; gap: 9px; align-items: center; margin: 0 0 16px; color: var(--amber); font-size: .65rem; font-weight: 800; letter-spacing: .16em; }
.eyebrow span { display: inline-block; width: 22px; height: 2px; background: currentColor; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { margin-bottom: 19px; font-family: "Unbounded", sans-serif; font-weight: 900; letter-spacing: -.085em; line-height: .91; }
h1 { font-size: clamp(3.25rem, 6.6vw, 6.8rem); }
h2 { font-size: clamp(2.1rem, 5vw, 4.6rem); }
h1 em, h2 em { color: var(--red); font-style: normal; text-shadow: 3px 3px 0 rgba(255, 195, 25, .88); }
.hero-lede { max-width: 440px; margin-bottom: 29px; color: rgba(255, 243, 214, .75); font-size: .96rem; font-weight: 600; line-height: 1.65; }

.social-stack { width: min(100%, 420px); display: grid; gap: 10px; }
.action-card { --platform: var(--cream); min-height: 62px; position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 44px 1fr 26px; align-items: center; gap: 13px; padding: 8px 16px 8px 8px; border: 1px solid rgba(255, 243, 214, .23); border-left: 3px solid var(--platform); background: linear-gradient(105deg, rgba(74, 32, 22, .92), rgba(30, 15, 12, .82)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 7px 15px rgba(0, 0, 0, .18); transition: border-color .22s ease, background .22s ease, box-shadow .22s ease, transform .22s ease; }
.action-card::before { position: absolute; z-index: -1; top: -100%; right: -18%; width: 48%; height: 300%; content: ""; opacity: .38; background: radial-gradient(ellipse, var(--platform) 0%, transparent 67%); transform: rotate(19deg); transition: opacity .22s ease, right .3s ease; }
.action-card:hover { transform: translateX(8px) translateY(-1px); border-color: var(--platform); background: linear-gradient(105deg, rgba(102, 38, 18, .96), rgba(35, 15, 11, .91)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 24px rgba(0, 0, 0, .3), -4px 0 16px color-mix(in srgb, var(--platform) 32%, transparent); }
.action-card:hover::before { right: -7%; opacity: .65; }
.platform-icon { width: 44px; height: 44px; display: grid; place-items: center; color: var(--platform); border: 1px solid color-mix(in srgb, var(--platform) 50%, transparent); background: rgba(16, 10, 9, .65); box-shadow: inset 0 0 15px color-mix(in srgb, var(--platform) 13%, transparent); clip-path: polygon(13% 0, 87% 0, 100% 13%, 100% 87%, 87% 100%, 13% 100%, 0 87%, 0 13%); }
.platform-icon img { width: 23px; height: 23px; display: block; object-fit: contain; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--platform) 55%, transparent)); }
.social-x { --platform: #fff7e9; }.social-dex { --platform: #cefd40; }.social-telegram { --platform: #47c5ff; }
.social-dex .platform-icon, .social-telegram .platform-icon { background: var(--cream); }
.card-label { font-size: .77rem; font-weight: 900; letter-spacing: .11em; }.card-label small { color: rgba(255, 243, 214, .53); font-size: .59rem; font-weight: 800; letter-spacing: .06em; }.arrow { color: var(--platform); font-size: 1.12rem; font-weight: 800; text-align: right; transition: transform .2s ease; }.action-card:hover .arrow { transform: translate(3px, -3px); }
.buy-card { --platform: var(--ink); color: var(--ink); border-color: var(--amber); border-left-color: var(--ink); background: linear-gradient(105deg, #ffda4a, var(--amber)); box-shadow: 5px 5px 0 var(--red), inset 0 1px 0 rgba(255, 255, 255, .45); }.buy-card::before { --platform: var(--white); opacity: .42; }.buy-card .platform-icon { background: var(--cream); color: var(--amber); border-color: var(--ink); box-shadow: none; }.buy-card .platform-icon img { filter: none; }.buy-card .arrow { color: var(--ink); }.buy-card:hover { border-color: var(--cream); background: linear-gradient(105deg, #ffe475, #ffc319); box-shadow: 3px 3px 0 var(--red), inset 0 1px 0 rgba(255, 255, 255, .55); }

.roadmap, .chart { width: 100%; min-height: 100svh; position: relative; isolation: isolate; padding: 110px 0; scroll-margin-top: 30px; }
.roadmap::before, .chart::before { position: absolute; z-index: 2; top: -42px; left: 0; width: 100%; height: 78px; content: ""; pointer-events: none; background: linear-gradient(180deg, transparent 0 28%, rgba(255, 195, 25, .9) 34%, var(--lava) 38%, var(--red) 43%, var(--ink) 49% 61%, transparent 64%); clip-path: polygon(0 25%, 5% 45%, 10% 31%, 16% 51%, 23% 27%, 30% 47%, 37% 32%, 44% 53%, 52% 29%, 60% 46%, 67% 25%, 75% 50%, 82% 32%, 90% 48%, 96% 26%, 100% 41%, 100% 66%, 95% 52%, 89% 67%, 81% 49%, 74% 70%, 66% 47%, 59% 65%, 51% 48%, 43% 69%, 36% 46%, 29% 65%, 22% 48%, 15% 69%, 9% 49%, 3% 63%, 0 47%); filter: drop-shadow(0 8px 11px rgba(0, 0, 0, .65)); }
.roadmap { position: relative; background: linear-gradient(rgba(23, 13, 11, .56), rgba(23, 13, 11, .72)), url("assets/guba-roadmap-magma.png") center / cover no-repeat; }
.roadmap-inner, .chart-inner { position: relative; z-index: 1; }
.section-heading { max-width: 615px; margin: 0 auto 45px; text-align: center; }.section-heading .eyebrow { justify-content: center; }.section-heading > p:last-child { max-width: 455px; margin-inline: auto; color: rgba(255, 243, 214, .65); line-height: 1.65; }
.roadmap-grid { width: min(100%, 1040px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-inline: auto; }
.roadmap-card { min-height: 315px; position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 23px; border: 1px solid var(--line); background: linear-gradient(148deg, rgba(61, 29, 20, .94), rgba(27, 14, 11, .86)); transition: transform .25s ease, border-color .25s ease; }
.roadmap-card::after { position: absolute; right: -1.7rem; bottom: -4.8rem; width: 9rem; height: 9rem; content: ""; border-radius: 50%; background: rgba(231, 45, 13, .1); }
.roadmap-card:hover { transform: translateY(-8px); border-color: rgba(255, 195, 25, .7); }.roadmap-card.is-live { border-color: var(--red); background: linear-gradient(148deg, #7b2111, #250f0d 88%); }
.phase-number { margin-bottom: 23px; color: rgba(255, 243, 214, .2); font-family: "Unbounded", sans-serif; font-size: 2.8rem; font-weight: 900; letter-spacing: -.13em; }.phase-tag { margin-bottom: 10px; color: var(--amber); font-size: .59rem; font-weight: 800; letter-spacing: .13em; }.roadmap-card h3 { margin-bottom: 15px; font-family: "Unbounded", sans-serif; font-size: 1.05rem; letter-spacing: -.07em; line-height: 1.16; }.roadmap-card > p:not(.phase-tag) { color: rgba(255, 243, 214, .65); font-size: .78rem; font-weight: 600; line-height: 1.65; }.status { width: max-content; margin-top: auto; padding: 5px 7px; border: 1px solid rgba(255, 243, 214, .24); color: rgba(255, 243, 214, .8); font-size: .55rem; font-weight: 900; letter-spacing: .12em; }.is-live .status { border-color: var(--amber); color: var(--amber); }.final-phase::after { background: rgba(255, 195, 25, .11); }

.chart { min-height: 100vh; min-height: 100svh; padding: 34px 0; background: linear-gradient(rgba(23, 13, 11, .08), rgba(23, 13, 11, .14)), url("assets/guba-chart-magma.png") center / cover no-repeat; }
.chart-inner { height: max(520px, calc(100vh - 68px)); height: max(520px, calc(100svh - 68px)); }
.chart-frame { height: max(520px, calc(100vh - 68px)); height: max(520px, calc(100svh - 68px)); position: relative; overflow: hidden; border: 1px solid rgba(255, 243, 214, .25); background: #120c0a; box-shadow: 11px 11px 0 rgba(231, 45, 13, .42); }.chart-frame iframe { display: block; width: 100%; height: 100%; min-height: 520px; border: 0; }

.site-footer { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 25px; min-height: 127px; padding-inline: max(24px, calc((100% - 1180px) / 2)); border-top: 1px solid rgba(255, 243, 214, .15); background: var(--ink); }.site-footer p { margin: 0; color: rgba(255, 243, 214, .55); font-size: .62rem; font-weight: 800; letter-spacing: .1em; }.site-footer p span { color: rgba(255, 243, 214, .28); margin-left: 8px; }

@media (max-width: 840px) { .main-nav { margin-left: 0; }.hero { min-height: calc(100svh - 94px); padding-top: 58px; background-position: right center; }.roadmap-grid { grid-template-columns: repeat(2, 1fr); }.roadmap-card { min-height: 265px; } }
@media (max-width: 600px) { .site-header, .section-shell, .site-footer { width: min(100% - 30px, 1180px); }.site-header { min-height: 75px; }.brand { font-size: .91rem; }.brand img { width: 34px; height: 34px; }.main-nav { display: none; }.header-buy { padding: 11px 13px; font-size: .62rem; }.hero { min-height: calc(100svh - 75px); padding: 34px 0 40px; background-position: right center; }.hero-copy { max-width: 325px; }.hero-lede { font-size: .89rem; }.roadmap { padding: 75px 0; }.roadmap-grid { grid-template-columns: 1fr; gap: 9px; }.roadmap-card { min-height: 227px; }.phase-number { margin-bottom: 11px; }.chart { padding: 16px 0; }.chart-inner, .chart-frame { height: max(460px, calc(100vh - 32px)); height: max(460px, calc(100svh - 32px)); }.chart-frame iframe { min-height: 460px; }.site-footer { min-height: 165px; flex-wrap: wrap; padding: 25px 0; }.site-footer p { order: 3; width: 100%; }.site-footer p span { display: block; margin: 6px 0 0; } }

@media (max-width: 600px) { .site-header, .site-footer { width: 100%; padding-inline: 15px; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }

.chart-placeholder { min-height: 100%; display: grid; place-items: center; margin: 0; padding: 24px; color: rgba(255, 243, 214, .72); font-weight: 800; letter-spacing: .08em; text-align: center; }

.contract-address { display: grid; gap: 8px; margin: 20px 0 0; color: rgba(255, 243, 214, .64); font-size: .62rem; font-weight: 800; letter-spacing: .12em; }
.contract-address code { width: fit-content; max-width: 100%; color: var(--cream); font-family: "Manrope", sans-serif; font-size: .74rem; letter-spacing: .02em; overflow-wrap: anywhere; }

[hidden] { display: none !important; }