:root{
  --bg:#0A0712;
  --bg2:#120B1E;
  --violet:#8A2BE2;
  --mag:#C71585;
  --cyan:#00FFFF;
  --text:#E9E4FF;
  --muted:#ACA3C7;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial}
a{color:var(--cyan);text-decoration:none}
.container{max-width:1080px;margin:0 auto;padding:24px}
.hidden{display:none}

/* Background texture and subtle grain */
.bg{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(900px 600px at 70% -10%, rgba(138,43,226,.12), transparent 60%),
    radial-gradient(900px 600px at 20% 110%, rgba(199,21,133,.10), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}
.bg:after{
  content:""; position:absolute; inset:0; opacity:.12; pointer-events:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width=\"160\" height=\"160\" viewBox=\"0 0 160 160\"><g fill=\"%23ffffff\" opacity=\"0.06\"><rect x=\"0\" y=\"0\" width=\"1\" height=\"160\"/><rect x=\"0\" y=\"0\" width=\"160\" height=\"1\"/></g></svg>');
  background-size:16px 16px; mix-blend-mode:overlay;
}

/* Boot overlay */
.boot{position:fixed; inset:0; background:#040108; display:flex; align-items:center; justify-content:center;
  z-index:9999; transition:opacity .6s ease; opacity:1}
.boot.hide{opacity:0; pointer-events:none}
.boot .box{border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:22px 26px;
  background:linear-gradient(180deg, rgba(138,43,226,.08), rgba(10,0,18,.55));
  box-shadow:0 10px 40px rgba(138,43,226,.25); text-align:center; min-width:300px}
.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#8A2BE2;margin-left:8px;
  box-shadow:0 0 0 0 rgba(138,43,226,.55); animation:pulseDot 2s ease-out infinite}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(138,43,226,.5)}70%{box-shadow:0 0 0 14px rgba(138,43,226,0)}100%{box-shadow:0 0 0 0 rgba(138,43,226,0)}}

/* Core layout - single screen */
.core{min-height:100vh; display:flex; flex-direction:column; justify-content:space-between}
.header{padding-top:28px}
.title{letter-spacing:.24em; text-transform:uppercase; color:var(--muted); font-size:12px}

.hero{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center; padding:24px}
.icon-wrap{position:relative; width:100%; max-width:540px; aspect-ratio:1; border-radius:28px;
  border:1px solid rgba(255,255,255,.08);
  background:radial-gradient(700px 480px at 50% 0%, rgba(0,255,255,.07), transparent 55%),
             linear-gradient(180deg, rgba(138,43,226,.10), rgba(5,0,8,.6));
  overflow:hidden; margin:0 auto}
.icon-wrap img{position:relative; z-index:1; width:86%; display:block; margin:7% auto; filter:drop-shadow(0 14px 34px rgba(138,43,226,.35))}
.ring{position:absolute; inset:0; pointer-events:none; mix-blend:screen; background:
  radial-gradient(closest-side, rgba(138,43,226,.18), transparent 70%)}
.ring:after{content:""; position:absolute; inset:10%; border-radius:50%; border:1px dashed rgba(138,43,226,.35); animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.breath{position:absolute; inset:12%; border-radius:50%; box-shadow:0 0 80px rgba(138,43,226,.25), inset 0 0 50px rgba(199,21,133,.22); animation:breathe 4.6s ease-in-out infinite}
@keyframes breathe{50%{box-shadow:0 0 120px rgba(138,43,226,.35), inset 0 0 80px rgba(199,21,133,.32)}}

.info{display:flex; flex-direction:column; gap:14px}
h1{font-size: clamp(32px, 5.2vw, 56px); margin:0; line-height:1.02;
  background: linear-gradient(90deg, var(--violet), var(--mag)); -webkit-background-clip:text; color:transparent}
.sub{color:#DAD4EF; margin-top:-6px}

.live{display:flex; gap:10px; flex-wrap:wrap}
.badge{border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:8px 12px; background:rgba(255,255,255,.02)}
.badge .k{color:var(--muted); font-size:12px}
.badge .v{font-weight:700}

.chart{margin-top:6px; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(255,255,255,.02); padding:6px}
canvas#spark{width:100%; height:72px}

.feed{display:flex; align-items:center; gap:8px; color:var(--muted); margin-top:4px}
.feed .live-dot{width:8px; height:8px; border-radius:50%; background:#7a6ea8}
.feed.active .live-dot{background:#19ffea; animation:pulseDot 2.2s ease-out infinite}
.feed .txt{font-size:12px}

.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.btn{padding:12px 18px; border-radius:12px; border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(138,43,226,.18), rgba(12,0,24,.28)); color:var(--text);
  transition:transform .15s ease, box-shadow .2s ease; display:inline-flex; align-items:center; gap:10px}
.btn.buy{ border-color:rgba(138,43,226,.35); animation:pulseBtn 2.8s ease-in-out infinite}
@keyframes pulseBtn{50%{box-shadow:0 0 28px rgba(138,43,226,.28)}}
.btn:hover{transform:translateY(-1px)}

.ca{display:flex; gap:8px; align-items:center; margin-top:8px}
.ca-field{flex:1; display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.02)}
.ca-val{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.copy{padding:12px 14px; border-radius:12px; border:1px solid rgba(0,255,255,.28); background:linear-gradient(180deg, rgba(0,255,255,.18), rgba(12,0,24,.3)); cursor:pointer}

.toast{position:fixed; right:16px; bottom:16px; padding:10px 14px; border-radius:12px; background:rgba(0,0,0,.7); border:1px solid rgba(0,255,255,.35); color:var(--text); opacity:0; transform:translateY(8px); transition:all .25s ease; z-index:5}
.toast.show{opacity:1; transform:translateY(0)}

/* System log strip */
.strip{border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02); }
.ticker{white-space:nowrap; overflow:hidden; position:relative}
.ticker .line{display:inline-block; padding:6px 0; animation:ticker 80s linear infinite}
@keyframes ticker{from{transform:translateX(100%)} to{transform:translateX(-100%)}}
.ticker .chunk{margin-right:60px; color:#CFC7E8; font-size:12px}

/* Signals */
.signals{padding:24px}
.signals h2{margin:0 0 8px}
.signal-line{font-size:18px}
.cursor{display:inline-block; width:10px; height:20px; background:var(--violet); margin-left:4px; animation:blink 1s steps(2,end) infinite}
@keyframes blink{50%{opacity:0}}

/* Footer */
.footer{padding:16px 24px; color:var(--muted); display:flex; justify-content:space-between; flex-wrap:wrap}
.footer a{color:var(--muted)}

/* Prevent horizontal scroll and keep layout framed */
html, body { overflow-x: hidden; }
img, canvas { max-width: 100%; }

/* Social buttons */
.socials{padding:24px}
.socials .btns{display:flex; gap:12px; flex-wrap:wrap}
.sbtn{display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(138,43,226,.14), rgba(12,0,24,.24));
  color:var(--text); transition:transform .15s ease, box-shadow .2s ease}
.sbtn:hover{transform:translateY(-1px); box-shadow:0 10px 34px rgba(138,43,226,.28)}

/* Roadmap */
.roadmap{padding:24px}
.road-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:16px}
.road-card{grid-column: span 6; position:relative; border:1px solid rgba(255,255,255,.10); border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); padding:16px}
.road-card:before{content:""; position:absolute; left:-1px; top:-1px; bottom:-1px; width:3px;
  background:linear-gradient(180deg, var(--violet), transparent)}
.road-card h3{margin:0 0 6px; font-size:18px}
.road-card p{margin:0; color:#DAD4EF}
.road-badge{font-size:12px; color:var(--muted)}
@media (max-width: 900px){
  .road-card{grid-column: span 12}
}

/* Footer legal disclaimer styled like system log */
.disclaimer{padding:16px 0; border-top:1px solid rgba(255,255,255,.06); margin-top:12px}
.disclaimer .code{font-size:12px; color:#CFC7E8; line-height:1.6}
.disclaimer .code .tag{color:#A99FD1}

/* No horizontal scroll anywhere */
html, body { overflow-x:hidden; width:100%; }

/* Mobile layout fixes */
@media (max-width: 820px){
  .container{padding:18px}
  .hero{grid-template-columns:1fr; gap:18px; padding:18px}
  .icon-wrap{max-width:360px; margin:0 auto}
  h1{font-size: clamp(28px, 9vw, 42px)}
  .live{gap:8px}
  .badge{flex: 1 1 calc(50% - 8px); min-width:140px}
  .actions .btn{flex:1 1 100%}
  .chart canvas#spark{height:64px}
  .feed{margin-top:6px}
  .strip .ticker .chunk{margin-right:40px}
  .road-grid{grid-template-columns:1fr}
  .road-card{grid-column: span 1}
  .footer{justify-content:center; text-align:center; gap:8px}
}

/* Extra small phones */
@media (max-width: 380px){
  .icon-wrap{max-width:300px}
  .badge{min-width:120px}
}

/* Fine-tune hero alignment */
.hero{align-items:start}
.info{align-items:flex-start}

/* Center specific section headings */
#about h2, .socials h2, .signals h2, .roadmap h2{
  text-align:center;
  margin-bottom:12px;
}

.footer { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  text-align: center; 
  gap: 8px;
}
.footer .code {
  text-align: center;
  font-size: 12px;
  color: #CFC7E8;
  line-height: 1.6;
}
.footer .code .tag { color: #A99FD1; }

@media (max-width: 820px){
  .hero h1, .hero p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .hero .info {
    align-items: center;
    text-align: center;
  }
}

/* --- Premium layout & typography --- */
.section-narrow p{max-width: 72ch}
h2.title-center{ text-align:center; margin-bottom:14px }

/* --- Cyber buttons (global .btn) --- */
.btn{
  position:relative; overflow:hidden;
  background: radial-gradient(120% 120% at 0% 0%, rgba(138,43,226,.35), rgba(199,21,133,.25)) , linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.btn:after{
  content:""; position:absolute; inset:-1px; pointer-events:none;
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(255,255,255,.25) 50%, rgba(0,0,0,0) 100%);
  transform: translateX(-120%); filter: blur(1px);
}
.btn:hover:after{ animation: sheen 1.2s ease }
@keyframes sheen{ to{ transform: translateX(120%) } }
.btn:before{
  content:""; position:absolute; inset:0; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.04), rgba(255,255,255,.04) 1px, transparent 1px, transparent 3px);
  opacity:.18; mix-blend-mode:overlay;
}
.btn.buy{ box-shadow: 0 8px 28px rgba(138,43,226,.35) }
.btn.buy:hover{ box-shadow: 0 14px 44px rgba(138,43,226,.45) }

/* --- About: cyber split layout --- */
.about{ padding: 28px 0 }
.about-wrap{ display:grid; grid-template-columns: 1.2fr .8fr; gap:24px; align-items:start }
.about .prose{ background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:18px; position:relative; overflow:hidden }
.about .prose:before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg, var(--violet), transparent) }
.about .keygrid{ display:grid; grid-template-columns:1fr; gap:14px }
.about .pill{ border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:14px 16px; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); position:relative }
.about .pill .tag{ font-size:12px; color:var(--muted) }
.about .pill h4{ margin:4px 0 6px }
.about .pill .icon{ width:10px; height:10px; border-radius:50%; background:var(--violet); display:inline-block; box-shadow:0 0 16px rgba(138,43,226,.6); margin-right:8px }
@media (min-width: 960px){ .about .keygrid{ grid-template-columns:1fr 1fr } }
@media (max-width: 820px){ .about-wrap{ grid-template-columns:1fr; } }

/* --- Roadmap: cyber cards with animated corner glyphs --- */
.road-grid{ position:relative }
.road-card{
  background: radial-gradient(140% 120% at 0% 0%, rgba(138,43,226,.08), rgba(255,255,255,.02)) , linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:16px; overflow:hidden;
  box-shadow: inset 0 0 30px rgba(138,43,226,.06), 0 8px 24px rgba(0,0,0,.25);
}
.road-card .corner{
  position:absolute; width:44px; height:44px; border:1px solid rgba(138,43,226,.45); border-radius:10px;
  top:10px; right:10px; opacity:.3; transform: rotate(45deg);
  animation: cornerPulse 6s ease-in-out infinite;
}
@keyframes cornerPulse{ 50%{ opacity:.6; transform: rotate(45deg) scale(1.06)} }
.road-card:after{
  content:""; position:absolute; left:-1px; top:-1px; bottom:-1px; width:3px;
  background: linear-gradient(180deg, var(--violet), transparent);
}

/* --- Connect buttons: elevate --- */



/* --- Section spacing polish --- */
.container.section-narrow{ padding-top: 18px; padding-bottom: 18px }
.signals{ padding-top: 18px; }

/* --- Small caps label style for minor headings --- */
.label-sm{ font-variant: all-small-caps; letter-spacing: .12em; color: var(--muted); font-size: 12px }


.buy-btn, .socials .sbtn, .copy{padding:12px 14px; border-radius:12px; border:1px solid rgba(0,255,255,.28); background:linear-gradient(180deg, rgba(0,255,255,.18), rgba(12,0,24,.3)); cursor:pointer}

}


/* === Gradient text for live values === */
.badge .v {
  background: linear-gradient(135deg, #00e0d6 0%, #007aff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


}


/* === BUY VLT: gradient ring overlay (no size change) === */
a.btn.buy, .btn.buy { position: relative; overflow: hidden; }
a.btn.buy::before, .btn.buy::before {
  content: "";
  position: absolute;
  inset: -2px; /* push ring outside */
  border-radius: inherit;
  padding: 2px; /* ring thickness */
  background: linear-gradient(135deg, #00e0d6 0%, #007aff 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: .95;
}
a.btn.buy:hover::before, .btn.buy:hover::before { opacity: 1; }
a.btn.buy:hover, .btn.buy:hover { box-shadow: 0 0 18px rgba(0, 224, 214, 0.25); }

/* Normalize action buttons sizing on mobile */
@media (max-width: 820px){
  .actions .btn{
    min-height: 56px;
    padding: 14px 18px;
  }
}


/* ===== MOBILE H-SCROLL GUARD ===== */
html, body { overflow-x: hidden; width: 100%; position: relative; }
*, *::before, *::after { box-sizing: border-box; }
img, svg, canvas, video { max-width: 100%; height: auto; display: block; }

.container { max-width: 1200px; width: 100%; margin-inline: auto; padding-inline: 16px; overflow-x: hidden; }

.strip, .ticker { overflow: hidden; }
.about, .about-wrap, .roadmap, .road-grid, .signals, .socials { overflow-x: hidden; }

/* Prevent elements from exceeding viewport on mobile */
@media (max-width: 820px) {
  .hero, .hero .info, .hero .icon-wrap, .actions { max-width: 100%; }
  .actions .btn { width: 100%; min-width: 0; }
  .road-card .corner { right: 10px; }
  .road-grid, .road-card { max-width: 100%; }
}

/* Ensure no 100vw traps */
.full-bleed { width: 100% !important; }


.signals .type { text-align: center; width: 100%; }
.signals .type .cursor { margin-left: 2px; }

/* Center Signals quotes */
.signals, .signals .type { text-align: center; }
.signals .type { margin: 0 auto; display: inline-block; max-width: 90%; }

/* BUY VLT subtle highlight (no size change) */
.btn.buy { position: relative; }
.btn.buy::after{
  content:""; position:absolute; inset:3px; border-radius:inherit;
  box-shadow: inset 0 0 14px rgba(0,224,214,0.14);
  pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .btn.buy{ animation: pvltPulse 3.8s ease-in-out infinite; }
  @keyframes pvltPulse{ 0%,100%{ filter:none } 50%{ filter: drop-shadow(0 0 10px rgba(0,224,214,.18)); } }
}

.chart-wrap{position:relative;border-radius:16px;overflow:hidden;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);margin:24px 0}
.chart-wrap .ratio{position:relative;width:100%;padding-top:56%}
.chart-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:480px){.chart-wrap .ratio{padding-top:150%}}
.live-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#6b7280;box-shadow:0 0 0 2px rgba(255,255,255,0.06)}
.live-dot.ok{background:#00e0d6;box-shadow:0 0 12px rgba(0,224,214,0.6)}

@media (max-width:380px){.chart-wrap .ratio{padding-top:170%}}

/* v2.26 overrides */
@media (max-width:480px){.chart-wrap .ratio{height:70vh !important;padding-top:0 !important}}
.chart-wrap iframe{height:100% !important}