/* SUPER INTELLIGENCE PEPE — chrome, signal, and deep space */
:root {
  --ink: #05070b;
  --panel: #0b1019;
  --line: rgba(203, 219, 237, .17);
  --text: #f2f6fb;
  --muted: #a1aebd;
  --blue: #4c96ff;
  --amber: #ffb866;
  --green: #b5f16b;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; overflow-x: hidden; background: var(--ink); color: var(--text); font-family: Manrope, sans-serif; }
body::selection { background: var(--blue); color: #031020; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 2px solid var(--green); outline-offset: 5px; }
img { max-width: 100%; }
.page-width { width: calc(100% - 120px); max-width: 1460px; margin-left: auto; margin-right: auto; }
.section { position: relative; scroll-margin-top: 110px; }

.site-header { position: fixed; z-index: 100; top: 18px; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; width: calc(100% - 48px); max-width: 1512px; min-height: 76px; padding: 10px 14px 10px 19px; border: 1px solid rgba(212, 231, 255, .19); border-radius: 18px; background: rgba(6, 9, 15, .79); box-shadow: 0 12px 45px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .065); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; }
.brand img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(77, 148, 255, .27)); }
.brand-name { display: block; width: 136px; font: 700 15px/1.03 'Chakra Petch', sans-serif; letter-spacing: .105em; }
.brand-name span { color: var(--green); }
.main-nav { display: flex; align-items: center; gap: 7px; padding: 5px; border: 1px solid rgba(185, 203, 226, .13); border-radius: 100px; background: rgba(255, 255, 255, .035); }
.main-nav a { padding: 10px 19px; border-radius: 100px; color: #b7c1ce; font: 700 11px/1 'Chakra Petch', sans-serif; letter-spacing: .13em; text-transform: uppercase; transition: color .2s, background .2s; white-space: nowrap; }
.main-nav a:hover, .main-nav a.active { color: #fff; background: rgba(115, 151, 202, .17); }
.header-buy { justify-self: end; display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 5px 15px 5px 7px; border: 1px solid rgba(255, 255, 255, .63); border-radius: 10px; background: linear-gradient(135deg, #f8fbff 0%, #9da9b9 45%, #fff 100%); box-shadow: 0 0 27px rgba(172, 197, 228, .2), inset 0 1px 1px #fff; color: #101821; font: 800 13px/1 'Chakra Petch', sans-serif; letter-spacing: .08em; transition: transform .22s, box-shadow .22s; white-space: nowrap; }
.header-buy img { width: 34px; height: 34px; object-fit: contain; }
.header-buy:hover { transform: translateY(-2px); box-shadow: 0 4px 30px rgba(196, 218, 251, .4); }
.button-arrow { margin-left: 12px; font-size: 19px; font-weight: 400; }

.hero { display: flex; align-items: center; min-height: 100vh; overflow: hidden; background: #020408; }
.hero-art, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-art { object-fit: cover; object-position: center center; }
.hero-shade { background: linear-gradient(90deg, rgba(2, 5, 10, .98) 0%, rgba(2, 5, 10, .9) 22%, rgba(2, 5, 10, .62) 44%, rgba(2, 5, 10, .02) 72%), linear-gradient(0deg, rgba(2, 4, 8, .92) 0%, transparent 20%, transparent 76%, rgba(2, 4, 8, .27) 100%); }
.hero::after { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(123, 167, 231, .65), transparent); content: ''; }
.hero-content { position: relative; z-index: 2; padding-top: 126px; padding-bottom: 56px; }
.hero-topline, .hero-kicker, .hero-bottom, .section-index, .phase-number, .phase-foot, .toolbar-left, .toolbar-right, .chart-status, .placeholder-eyebrow { font-family: 'Chakra Petch', sans-serif; letter-spacing: .17em; }
.hero-topline { display: flex; align-items: center; gap: 12px; width: fit-content; color: #d2dce8; font-size: 10px; font-weight: 700; }
.signal-dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(181, 241, 107, .1), 0 0 13px var(--green); animation: signal 2.4s ease-in-out infinite; }
.topline-rule { width: 27px; height: 1px; margin-inline: 2px; background: #8da0b6; }
.hero-kicker { margin: 54px 0 13px; color: var(--amber); font-size: 11px; font-weight: 700; }
.hero h1 { width: max-content; max-width: 100%; margin: 0; font-family: 'Chakra Petch', sans-serif; font-size: 5.75vw; font-size: clamp(58px, 5.75vw, 104px); font-weight: 700; line-height: .89; letter-spacing: -.078em; text-transform: uppercase; }
.hero h1 > span { display: block; width: fit-content; padding-right: .1em; background: linear-gradient(178deg, #fff 3%, #aeb9c6 26%, #faffff 46%, #546473 57%, #fbffff 75%, #8a9caf 92%); color: transparent; -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .8)); }
.hero h1 > span:nth-child(2) { letter-spacing: -.09em; }
.title-period, .section-stop { color: var(--blue); -webkit-text-fill-color: var(--blue); }
.hero-description { max-width: 500px; margin: 30px 0 26px; color: #c4cedb; font-size: 14px; font-weight: 500; line-height: 1.8; }
.hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 232px)); gap: 10px; max-width: 475px; }
.action { display: flex; align-items: center; gap: 9px; min-height: 67px; padding: 9px 10px; border: 1px solid rgba(198, 216, 236, .28); border-radius: 9px; background: linear-gradient(120deg, rgba(21, 31, 44, .88), rgba(8, 14, 24, .88)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 8px 26px rgba(0, 0, 0, .15); transition: border-color .2s, transform .2s, background .2s; }
.action:hover { transform: translateY(-3px); border-color: rgba(183, 234, 255, .7); background: linear-gradient(120deg, rgba(35, 51, 69, .95), rgba(12, 19, 29, .95)); }
.action-primary { border-color: rgba(255, 255, 255, .72); background: linear-gradient(130deg, #e1ebf3, #8a9cab 43%, #e9f1f8 87%); color: #08111b; }
.action-primary:hover { border-color: #fff; background: linear-gradient(130deg, #fff, #afc0cf 50%, #fff); }
.action-icon { display: grid; flex: none; place-items: center; width: 43px; height: 43px; border: 1px solid rgba(215, 231, 252, .14); border-radius: 7px; background: rgba(255, 255, 255, .07); }
.action-primary .action-icon { border-color: rgba(7, 21, 31, .11); background: rgba(255, 255, 255, .29); }
.action-icon img { display: block; object-fit: contain; }
.social-icon img { filter: invert(1); }
.action-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.action-text strong { font: 700 12px/1 'Chakra Petch', sans-serif; letter-spacing: .1em; white-space: nowrap; }
.action-text small { overflow: hidden; color: #91a0b2; font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.action-primary .action-text small { color: #3d4c5a; }
.action-arrow { align-self: flex-start; margin-left: auto; color: #afbed0; font-size: 16px; }
.action-primary .action-arrow { color: #172430; }
.hero-bottom { display: flex; align-items: center; gap: 14px; margin-top: 55px; color: #9baec5; font-size: 10px; font-weight: 700; }
.scroll-line { width: 58px; height: 1px; background: linear-gradient(90deg, var(--blue), transparent); }
.hero-bottom-star { margin-inline: 4px; color: var(--amber); }
.hero-side-label { position: absolute; z-index: 2; right: 25px; bottom: 35px; color: rgba(217, 230, 248, .59); font: 700 10px/1 'Chakra Petch', sans-serif; letter-spacing: .2em; writing-mode: vertical-rl; }

.roadmap { padding-block: 127px 139px; overflow: hidden; background: radial-gradient(ellipse at 1% 80%, rgba(28, 91, 162, .18), transparent 37%), radial-gradient(ellipse at 92% 15%, rgba(197, 120, 48, .08), transparent 36%), #080c13; }
.roadmap::before, .market::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(154, 187, 223, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(154, 187, 223, .045) 1px, transparent 1px); background-size: 78px 78px; mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); pointer-events: none; content: ''; }
.roadmap-glow { position: absolute; top: 25%; left: -140px; width: 360px; height: 360px; border-radius: 50%; background: rgba(40, 113, 209, .1); filter: blur(80px); }
.roadmap-layout { position: relative; display: grid; grid-template-columns: minmax(240px, .86fr) minmax(0, 1.55fr); gap: clamp(42px, 7vw, 120px); }
.section-index { margin: 0 0 23px; color: #aebed2; font-size: 11px; font-weight: 700; }
.section-index span { margin-right: 9px; color: var(--green); }
.section-intro h2, .market h2 { margin: 0; font-family: 'Chakra Petch', sans-serif; font-size: 5.4vw; font-size: clamp(50px, 5.4vw, 88px); font-weight: 700; line-height: .94; letter-spacing: -.078em; text-transform: uppercase; }
.section-intro h2 em, .market h2 em { display: block; color: #b8c6d4; font-style: normal; }
.section-intro > p:not(.section-index) { max-width: 348px; margin-top: 26px; color: var(--muted); font-size: 14px; line-height: 1.85; }
.intro-seal { display: flex; align-items: center; justify-content: space-between; width: 230px; margin-top: 69px; padding: 13px 16px; border: 1px solid rgba(179, 212, 250, .24); transform: rotate(-5deg); color: #d3dfeb; font: 700 14px/1.05 'Chakra Petch', sans-serif; letter-spacing: .11em; box-shadow: 6px 6px 0 rgba(77, 151, 255, .13); }
.intro-seal b { color: var(--green); font-size: 43px; font-weight: 400; line-height: 1; }
.roadmap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.phase { position: relative; display: flex; flex-direction: column; min-height: 263px; padding: 24px 24px 21px; overflow: hidden; border: 1px solid rgba(180, 206, 237, .18); border-radius: 5px; background: linear-gradient(155deg, rgba(20, 31, 44, .86), rgba(8, 13, 21, .92)); transition: transform .25s, border-color .25s, box-shadow .25s; }
.phase::after { position: absolute; right: -80px; bottom: -130px; width: 240px; height: 240px; border: 1px solid rgba(132, 179, 236, .1); border-radius: 50%; box-shadow: 0 0 0 35px rgba(125, 177, 246, .025), 0 0 0 70px rgba(125, 177, 246, .018); content: ''; }
.phase:hover { transform: translateY(-5px); border-color: rgba(151, 197, 255, .52); box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.phase-number { color: var(--green); font-size: 10px; font-weight: 700; }
.phase-icon { position: absolute; top: 15px; right: 21px; color: #7eaaff; font-size: 29px; line-height: 1; }
.phase h3 { position: relative; z-index: 1; margin: 40px 0 11px; font: 700 22px/1.08 'Chakra Petch', sans-serif; letter-spacing: -.02em; }
.phase p { position: relative; z-index: 1; max-width: 280px; margin: 0; color: #a8b4c2; font-size: 12px; line-height: 1.7; }
.phase-foot { position: relative; z-index: 1; margin-top: auto; padding-top: 20px; color: #6b7f97; font-size: 9px; font-weight: 700; }

.market { padding: 116px 0 132px; background: radial-gradient(ellipse at 50% -15%, rgba(47, 95, 170, .2), transparent 46%), #05080e; }
.market .page-width { position: relative; }
.market-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 35px; }
.market h2 { font-size: 5.2vw; font-size: clamp(48px, 5.2vw, 82px); }
.market h2 em { display: inline; }
.market-external { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 47px; padding: 0 14px 0 8px; border: 1px solid rgba(187, 218, 251, .34); border-radius: 4px; color: #e1ebf5; font: 700 11px/1 'Chakra Petch', sans-serif; letter-spacing: .1em; white-space: nowrap; transition: border-color .2s, background .2s; }
.market-external img { width: 27px; height: 27px; object-fit: contain; }
.market-external:hover { border-color: #bde4ff; background: rgba(97, 157, 241, .14); }
.market-external span { color: var(--green); font-size: 18px; }
.chart-frame { overflow: hidden; border: 1px solid rgba(178, 213, 253, .3); border-radius: 8px; background: #080d15; box-shadow: 0 35px 70px rgba(0, 0, 0, .35), 0 0 60px rgba(55, 116, 205, .1), inset 0 1px 0 rgba(255, 255, 255, .09); }
.chart-toolbar, .chart-status { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 47px; padding: 0 20px; background: linear-gradient(90deg, #111b2a, #0a1019); color: #9bacc0; font-size: 10px; font-weight: 700; }
.chart-toolbar { border-bottom: 1px solid rgba(172, 205, 241, .16); }
.toolbar-left { display: flex; align-items: center; gap: 17px; }
.toolbar-live { display: flex; align-items: center; gap: 11px; color: #e2ebf6; white-space: nowrap; }
.toolbar-live .signal-dot { width: 6px; height: 6px; }
.toolbar-divider { width: 1px; height: 18px; background: rgba(255, 255, 255, .17); }
.toolbar-right { color: #6d839d; white-space: nowrap; }
.chart-body { position: relative; height: 650px; height: clamp(490px, 52vw, 650px); }
#dex-chart { display: block; width: 100%; height: 100%; border: 0; background: #080c13; }
#dex-chart[hidden], .chart-placeholder[hidden] { display: none; }
.chart-placeholder { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: hidden; text-align: center; background: radial-gradient(ellipse at 50% 78%, rgba(62, 131, 217, .14), transparent 50%), #070c14; }
.chart-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(119, 160, 205, .075) 1px, transparent 1px), linear-gradient(90deg, rgba(119, 160, 205, .075) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(0deg, #000, transparent 95%); }
.chart-scan { position: absolute; right: 0; left: 0; top: 54%; height: 1px; background: linear-gradient(90deg, transparent, rgba(90, 164, 248, .38), transparent); box-shadow: 0 0 23px rgba(49, 135, 245, .35); }
.chart-placeholder > img { position: relative; width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 0 27px rgba(57, 119, 213, .36)); }
.placeholder-eyebrow { position: relative; margin: 28px 0 10px; color: var(--green); font-size: 10px; font-weight: 700; }
.chart-placeholder h3 { position: relative; margin: 0; font-family: 'Chakra Petch', sans-serif; font-size: 3vw; font-size: clamp(26px, 3vw, 42px); font-weight: 700; line-height: 1.1; letter-spacing: -.05em; }
.chart-placeholder h3 span { color: var(--blue); }
.chart-placeholder p:last-child { position: relative; margin: 14px 20px 0; color: #9eacbd; font-size: 13px; }
.chart-status { min-height: 41px; border-top: 1px solid rgba(172, 205, 241, .13); background: #0a111c; font-size: 9px; }
.chart-status b { color: var(--amber); font-weight: 700; }
.toast { position: fixed; z-index: 200; right: 24px; bottom: 24px; max-width: min(340px, calc(100vw - 48px)); padding: 13px 18px; border: 1px solid rgba(184, 222, 255, .3); border-radius: 7px; background: #121d2b; box-shadow: 0 12px 35px #0008; color: #e5eef8; font-size: 12px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s, transform .2s; }
.toast.visible { opacity: 1; transform: translateY(0); }

@keyframes signal { 50% { opacity: .4; box-shadow: 0 0 0 6px rgba(181, 241, 107, .05), 0 0 7px var(--green); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

@media (max-width: 1080px) {
  .page-width { width: calc(100% - 72px); }
  .site-header { grid-template-columns: 1fr auto; }
  .main-nav { grid-row: 2; grid-column: 1 / -1; justify-self: center; }
  .header-buy { grid-column: 2; grid-row: 1; }
  .hero-content { padding-top: 180px; }
  .roadmap-layout { gap: 40px; grid-template-columns: .75fr 1.4fr; }
  .phase { min-height: 275px; padding: 20px; }
  .phase h3 { font-size: 19px; }
}

@media (max-width: 720px) {
  .page-width { width: calc(100% - 36px); max-width: 600px; }
  .site-header { top: 9px; width: calc(100% - 18px); min-height: 108px; gap: 7px; padding: 8px 10px; border-radius: 12px; }
  .brand { gap: 5px; }
  .brand img { width: 39px; height: 39px; }
  .brand-name { width: 100px; font-size: 11px; }
  .header-buy { min-height: 39px; padding: 4px 9px 4px 4px; font-size: 10px; }
  .header-buy img { width: 29px; height: 29px; }
  .button-arrow { margin-left: 0; font-size: 14px; }
  .main-nav { width: 100%; justify-content: center; gap: 0; padding: 3px; }
  .main-nav a { flex: 1; padding: 9px 5px; text-align: center; font-size: 9px; letter-spacing: .06em; }
  .hero { display: block; min-height: 1010px; }
  .hero-art { top: 118px; height: 500px; object-position: 89% center; }
  .hero-shade { background: linear-gradient(0deg, #05070b 9%, rgba(5, 7, 11, .96) 24%, rgba(5, 7, 11, .35) 57%, rgba(5, 7, 11, .08) 80%, #05070b 100%), linear-gradient(90deg, rgba(5, 7, 11, .14), transparent 80%); }
  .hero-content { padding-top: 465px; padding-bottom: 44px; }
  .hero-topline { font-size: 8px; gap: 8px; }
  .topline-rule { width: 13px; }
  .hero-kicker { margin-top: 30px; font-size: 9px; line-height: 1.5; }
  .hero h1 { font-size: 11vw; font-size: clamp(41px, 11vw, 75px); }
  .hero-description { margin: 22px 0; font-size: 12px; line-height: 1.7; }
  .hero-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; gap: 8px; }
  .action { min-height: 66px; gap: 6px; padding: 6px; }
  .action-icon { width: 38px; height: 38px; }
  .action-icon img { max-width: 29px; max-height: 29px; }
  .action-text strong { font-size: 10px; letter-spacing: .02em; }
  .action-text small { font-size: 8px; }
  .action-arrow { font-size: 12px; }
  .hero-bottom { margin-top: 31px; font-size: 8px; gap: 7px; }
  .scroll-line { width: 23px; }
  .hero-side-label { display: none; }
  .roadmap { padding-block: 90px; }
  .roadmap-layout { grid-template-columns: 1fr; gap: 38px; }
  .section-intro h2, .market h2 { font-size: 11vw; font-size: clamp(48px, 11vw, 70px); }
  .section-intro > p:not(.section-index) { font-size: 13px; }
  .intro-seal { display: none; }
  .roadmap-grid { gap: 9px; }
  .phase { min-height: 245px; padding: 17px; }
  .phase-number { font-size: 8px; }
  .phase-icon { top: 16px; right: 14px; font-size: 20px; }
  .phase h3 { margin-top: 34px; font-size: 17px; }
  .phase p { font-size: 11px; line-height: 1.55; }
  .phase-foot { font-size: 8px; }
  .market { padding-block: 85px 90px; }
  .market-heading { align-items: start; flex-direction: column; }
  .market-external { min-height: 42px; }
  .chart-body { height: 480px; }
  .toolbar-right, .toolbar-divider, .toolbar-left > span:last-child { display: none; }
  .chart-toolbar, .chart-status { padding-inline: 13px; }
  .chart-status { font-size: 8px; letter-spacing: .04em; }
  .chart-status > span:last-child { display: none; }
  .chart-placeholder h3 { max-width: 280px; font-size: 29px; }
}

@media (max-width: 390px) {
  .hero h1 { font-size: 39px; }
  .action-text strong { font-size: 9px; }
  .action-arrow { display: none; }
  .phase { min-height: 260px; padding: 13px; }
  .phase h3 { font-size: 15px; }
  .phase p { font-size: 10px; }
}

@media (max-width: 540px) {
  .roadmap-grid { grid-template-columns: 1fr; }
  .phase { min-height: 205px; padding: 21px; }
  .phase h3 { margin-top: 28px; font-size: 21px; }
  .phase p { max-width: 310px; font-size: 12px; }
}

[hidden] { display: none !important; }