:root{
  /* === Palette from your GIF === */
  --navy-900:#081223;      /* deep background */
  --navy-800:#0b182c;
  --navy-glass: 10, 22, 44;/* rgb for glass background */
  --cyan:#47d7ff;          /* main electric cyan */
  --cyan-2:#64f0ff;        /* lighter cyan glow */
  --blue:#00a3ff;          /* electric blue accents */
  --violet:#6b5bff;        /* subtle violet accent from scanlines */
  --txt:#daf6ff;

  --stroke: rgba(88,210,255,.45);

  /* glass */
  --glass-a:.56;
  --blur:14px; --sat:1.25;
  
  scrollbar-color: #64f0ff rgba(16, 24, 16, 0.6);  /* thumb, track */
  scrollbar-width: thin;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
	*::-webkit-scrollbar-track { background: #0b0b0b; }
	*::-webkit-scrollbar-thumb {
	  background: #64f0ff;
	  border-radius: 8px;
	  border: 2px solid #0b0b0b;
	}
	*::-webkit-scrollbar-corner { background: #0b0b0b; }

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(120vh 100vh at 10% 0%, rgba(30,90,140,.18), transparent 60%),
    linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 60%, #061021 100%);
  color:var(--txt);
  font:16px/1.52 "Share Tech Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* ================= HERO ================= */
.hero{
  position:relative; min-height:60vh; display:grid; place-items:center;
  padding:clamp(26px,6vw,70px) 16px;
  overflow:hidden;
}
.hero__wrap{
  position:relative; width:min(1200px,92vw); display:grid;
  grid-template-columns: 1.15fr 1fr; gap:clamp(18px,4vw,42px);
  align-items:center;
}

/* GIF frame */
.hero__frame{
  position:relative; margin:0;
  border-radius:18px; overflow:hidden;
  border:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(var(--navy-glass), calc(var(--glass-a)+.06)), rgba(var(--navy-glass), calc(var(--glass-a)-.08)));
  backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 28px 120px rgba(70,190,255,.16);
  aspect-ratio: 4/3;
}
.hero__gif{
  width:100%; height:100%; object-fit:cover; display:block;
  transform: scale(1.02);
  filter: saturate(1.12) contrast(1.05);
  animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift{
  0%{ transform: scale(1.02) translate3d(0,0,0) }
  100%{ transform: scale(1.05) translate3d(1.2%, -1.2%, 0) }
}

/* scanlines overlay on the frame */
.hero__scan{
  pointer-events:none; position:absolute; inset:0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(100,240,255,.06) 0 2px,
      rgba(0,0,0,0) 3px 5px
    );
  mix-blend-mode: screen; opacity:.35;
  animation: scanScroll 9s linear infinite;
}
@keyframes scanScroll{ 0%{ background-position-y:0 } 100%{ background-position-y:140px } }

/* text side */
.hero__text{ text-align:left; }
.hero__brand{
  margin:0 0 .2em; font-size: clamp(42px, 9vw, 140px);
  color: var(--cyan-2);
  text-shadow: 0 0 14px rgba(71,215,255,.45), 0 0 60px rgba(71,215,255,.25);
  letter-spacing:.08em;
}
.hero__sub{
  margin:0 0 1em; color:#bfeaff; opacity:.92; letter-spacing:.06em
}
.hero__cta{
  display:inline-grid; place-items:center; width:180px; height:44px; border-radius:14px;
  color:#dbf8ff; text-decoration:none; border:1px solid var(--stroke);
  background:rgba(7,16,32,.84);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 16px 60px rgba(70,190,255,.18);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  cursor:pointer;
}
.hero__cta:hover{
  transform:translateY(-2px);
  border-color:#d6f3ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 80px rgba(70,190,255,.28)
}

/* background noise for hero */
.hero__noise{
  position:absolute; inset:-20%;
  opacity:.08; pointer-events:none;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.02) 0 40%, transparent 41%),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,.04) 0 34%, transparent 35%),
    radial-gradient(circle at 40% 60%, rgba(255,255,255,.03) 0 27%, transparent 28%);
  animation: noiseShift 2.4s steps(4) infinite;
}
@keyframes noiseShift{
  0%,100%{ transform: translate3d(0,0,0) }
  25%{ transform: translate3d(-10px, 6px, 0) }
  50%{ transform: translate3d(12px, -8px, 0) }
  75%{ transform: translate3d(-6px, 4px, 0) }
}

/* ================= SECTIONS / CARDS ================= */
.section{ padding: clamp(15px, 1vw, 3px) 16px; display:grid; place-items:center; }
.card{
  position:relative;
  width:min(1100px, 92vw);
  border-radius:16px; overflow:hidden;
  background: linear-gradient(180deg, rgba(var(--navy-glass), calc(var(--glass-a)+.04)), rgba(var(--navy-glass), calc(var(--glass-a)-.06)));
  border:1px solid var(--stroke);
  backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 26px 110px rgba(70,190,255,.16);
}

/* Split card (media + text) */
.card--split{ display:grid; grid-template-columns: 1.1fr 1.3fr; gap: clamp(14px, 3vw, 28px); padding: clamp(16px, 3vw, 28px); align-items:center; }
.card__media img{ width:100%; height:auto; display:block; border-radius:12px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) }
.card__body{ padding: clamp(6px, 1vw, 10px); }
.title{ margin:0 0 .6em; color:var(--cyan); letter-spacing:.06em; font-size: clamp(16px, 2vw, 20px) }
.lore{ margin:0; color:#e1f6ff; opacity:.96 }

/* Terminal card */
.card--terminal{ padding: clamp(16px, 3vw, 28px); }
.term{
  position:relative;
  border-radius:12px; padding: clamp(14px, 2vw, 18px);
  border:1px solid rgba(88,210,255,.35);
  background: rgba(5,14,28,.88);
  min-height: 240px;
  overflow:hidden;
}
.term__line{ display:none; color:#d6f2ff; margin:.25em 0; }
.term__line a.link{ color:#9bdfff; text-decoration: none; border-bottom:1px dashed rgba(155,223,255,.45) }
.term__cursor{ margin-top:.4em; color:#9bdfff; animation: blink 1s steps(1,end) infinite; display:none }
@keyframes blink{ 50%{ opacity:0 } }

/* Actions grid */
.grid{
  display:grid; gap: clamp(12px, 2vw, 18px);
  grid-template-columns: repeat( auto-fit, minmax(260px, 1fr) );
  width:min(1100px, 92vw);
}
.card--action{ text-decoration:none; color:inherit; cursor:pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card--action .card__body{ padding: clamp(18px, 3vw, 24px); }
.card--action:hover{
  transform: translateY(-3px);
  border-color: rgba(180,235,255,.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 26px 120px rgba(70,190,255,.24)
}
.title.sm{ font-size: clamp(14px, 1.6vw, 16px); margin:0 0 .3em }

/* Connect */
.card--connect{ padding: clamp(16px, 3vw, 28px); }
.list{ margin:0; padding-left:1em }
.list li{ margin:.35em 0 }
.link{ color:#9bdfff; text-decoration:none; border-bottom:1px dashed rgba(155,223,255,.45) }

/* Footer */
.footer{ text-align:center; padding: 2.2rem 1rem; color:#bfe7ff; opacity:.9 }

/* Responsive */
@media (max-width: 980px){
  .hero__wrap{ grid-template-columns: 1fr; }
  .hero__text{ text-align:center; }
}

/* ===== GL1TCH PROTOCOL (Archive-style Dossier + Mission Loop) ===== */
.proto{
  padding: clamp(18px, 3vw, 28px);
}
.proto__head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: clamp(14px, 2.4vw, 22px);
}
.proto__tag{
  font-size: 12px; letter-spacing:.08em; color:#bfe7ff;
  padding:6px 10px; border:1px solid var(--stroke); border-radius:10px;
  background: rgba(7,16,32,.65);
}

.proto__grid{
  display:grid; gap: clamp(16px, 3vw, 28px);
  grid-template-columns: 1.2fr 1fr;
}

/* Dossier (left) */
.dossier{
  position:relative;
  border:1px solid var(--stroke);
  border-radius:14px; overflow:hidden;
  background: linear-gradient(180deg, rgba(var(--navy-glass), calc(var(--glass-a)+.04)), rgba(var(--navy-glass), calc(var(--glass-a)-.08)));
  padding: clamp(14px, 2vw, 18px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.35);
}
.dossier__title{
  color: var(--cyan);
  margin-bottom: .8rem; letter-spacing:.06em;
}

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 12px; }
.chip{
  font-size:12px; color:#d7f3ff; letter-spacing:.04em;
  padding:6px 10px; border-radius:10px; border:1px dashed rgba(120,210,255,.45);
  background: rgba(7,16,32,.55);
}

.kv{ margin:0 }
.kv__row{
  display:grid; grid-template-columns: 140px 1fr; gap:12px;
  padding:10px 0; border-top:1px solid rgba(120,210,255,.18);
}
.kv__row:first-child{ border-top:0 }
.kv dt{ color:#9bdfff; opacity:.9 }
.kv dd{ margin:0; color:#e1f6ff }
.kv code{
  background: rgba(7,16,32,.55); border:1px solid rgba(120,210,255,.3);
  border-radius:8px; padding:3px 6px; color:#bfe7ff;
}
.copybtn{
  margin-left:8px; height:26px; padding:0 8px;
  font: inherit; cursor:pointer; color:#bfe7ff;
  background: rgba(7,16,32,.8); border:1px solid rgba(120,210,255,.4); border-radius:8px;
}
.copybtn:hover{ border-color:#d6f3ff }

/* subtle scanlines inside dossier */
.scanlines{
  position:absolute; inset:-25% -10%;
  pointer-events:none; opacity:.28; mix-blend-mode:screen;
  background: repeating-linear-gradient(to bottom, rgba(100,240,255,.06) 0 2px, rgba(0,0,0,0) 3px 5px);
  animation: scanScroll 9s linear infinite;
}

/* Loop (right) */
.loop{
  position:relative; list-style:none; margin:0; padding: clamp(14px, 2vw, 18px);
  border:1px solid var(--stroke); border-radius:14px; overflow:hidden;
  background: linear-gradient(180deg, rgba(var(--navy-glass), calc(var(--glass-a)+.03)), rgba(var(--navy-glass), calc(var(--glass-a)-.08)));
}
.loop__title{ color:var(--cyan); margin-bottom:.8rem; letter-spacing:.06em }

.step{ position:relative; display:grid; grid-template-columns: 24px 1fr; gap:12px; padding:14px 0; }
.step + .step{ border-top:1px solid rgba(120,210,255,.18) }
.dot{
  width:10px; height:10px; margin-top:.35rem; border-radius:50%;
  box-shadow: 0 0 14px rgba(71,215,255,.6), 0 0 40px rgba(71,215,255,.35);
  background: radial-gradient(circle at 35% 35%, var(--cyan-2) 0 40%, var(--blue) 41% 100%);
}
.step__head{ color:#def4ff; margin-bottom:.25rem }
.step p{ color:#cfeaff; opacity:.96; margin:0 }

/* end marker */
.loop__end{
  margin-top:12px; padding-top:12px; border-top:1px solid rgba(120,210,255,.18);
  color:#9bdfff; text-align:right; opacity:.9
}

/* tiny entrance animation */
.proto .dossier, .proto .loop{
  transform: translateY(8px); opacity:0; animation: protoIn .6s ease forwards;
}
.proto .loop{ animation-delay:.12s }
@keyframes protoIn{
  to { transform:none; opacity:1 }
}

/* Responsive */
@media (max-width: 980px){
  .proto__grid{ grid-template-columns: 1fr; }
}

/* ===== ON-CHAIN PULSE + BUY ===== */
.pulsegrid{
  padding: clamp(8px, 3vw, 8px);
  display:grid; gap: clamp(12px, 3vw, 14px);
  grid-template-columns: 1.6fr 0.8fr;
}

.pulse{
  border:1px solid var(--stroke);
  border-radius:14px;
  /* keep background/glass etc. */
}

/* Remove box for BUY */
.buy{
  border:none !important;
  background:none !important;
  box-shadow:none !important;
  padding:0 !important;
}


/* KPIs */
.kpis{
  display:grid; gap:12px;
  grid-template-columns: repeat(3, 1fr);
}
.kpi{
  background: rgba(7,16,32,.55);
  border:1px dashed rgba(120,210,255,.35);
  border-radius:10px; padding:10px 12px;
}
.kpi__label{ font-size:12px; color:#9bdfff; opacity:.9; letter-spacing:.04em }
.kpi__val{ font-size:20px; color:#e1f6ff; margin-top:.15rem }

/* update line */
.update{ margin-top:.6rem; color:#9bdfff; opacity:.9; font-size:12px }

/* BUY */
.buy .buy__sub{ margin:.2rem 0 1rem; color:#bfeaff; opacity:.92 }
.btns{ display:flex; flex-wrap:wrap; gap:10px; }
.btn{
  display:inline-grid; place-items:center; height:44px; padding:0 16px;
  border-radius:12px; color:#dbf8ff; text-decoration:none;
  border:1px solid var(--stroke); background:rgba(7,16,32,.84);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 16px 60px rgba(70,190,255,.18);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.btn:hover{ transform:translateY(-2px); border-color:#d6f3ff; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 80px rgba(70,190,255,.28) }
.btn.ghost{ background: transparent }

.addr{ margin:14px 0 8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.addr__label{ color:#9bdfff; opacity:.9; font-size:12px }
.addr code{
  background: rgba(7,16,32,.55); border:1px solid rgba(120,210,255,.3);
  border-radius:8px; padding:4px 8px; color:#bfe7ff;
}
.copybtn{
  height:28px; padding:0 10px; font:inherit; cursor:pointer; color:#bfe7ff;
  background: rgba(7,16,32,.8); border:1px solid rgba(120,210,255,.4); border-radius:8px;
}
.copybtn:hover{ border-color:#d6f3ff }

.mini{ margin:.4rem 0 0 .2rem; padding-left:1em; color:#cfeaff; opacity:.9 }
.mini li{ margin:.25rem 0 }

/* Responsive */
@media (max-width: 1020px){
  .pulsegrid{ grid-template-columns: 1fr; }
  .kpis{ grid-template-columns: repeat(2, 1fr); }
}
/* ===== HERO ANOMALY FX ===== */
.hero{ position:relative; overflow:hidden; }
.hero__wrap{ position:relative; }
.hero__fx{
  position:absolute; inset:0;
  pointer-events:none;
  overflow:hidden;
  /* soft vignette so effects fade at edges */
  -webkit-mask-image: radial-gradient(90% 70% at 50% 45%, #000 70%, transparent 100%);
          mask-image: radial-gradient(90% 70% at 50% 45%, #000 70%, transparent 100%);
}

/* 2. Matrix drift (vertical code rain, very subtle) */
.matrix{
  position:absolute; inset:0;
  opacity:.12;
  mix-blend-mode:screen;
  font-family:"Share Tech Mono", ui-monospace, monospace;
  color: var(--cyan);
  display:grid;
  grid-template-columns: repeat(40, 1fr);
  column-gap: 6px;
  padding-inline: min(6vw, 70px);
}
.matrix .col{
  overflow:hidden;
  filter: blur(.25px);
}
.matrix .stream{
  white-space:pre;
  transform: translateY(-110%);
  animation: mxFall var(--spd, 12s) linear infinite;
  opacity: .85;
}
@keyframes mxFall{
  to { transform: translateY(110%); }
}

/* 2b. Ripple burst (rare), behind text */
.ripple{
  position:absolute; inset:0; display:grid; place-items:center;
  opacity:0; transform: scale(.9);
}
.ripple::before{
  content:"";
  width: clamp(220px, 40vw, 720px);
  height: clamp(220px, 40vw, 720px);
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(100,240,255,.35) 0 8%, rgba(100,240,255,.15) 9% 14%, transparent 15% 100%),
    radial-gradient(circle at 50% 50%, rgba(100,240,255,.08), transparent 60%);
  filter: blur(3px);
}
.ripple.boom{ animation: rip 1.2s ease-out forwards; }
@keyframes rip{
  0%   { opacity:.0; transform: scale(.8); }
  20%  { opacity:.25; transform: scale(1.02); filter: saturate(1.2); }
  100% { opacity:0;   transform: scale(1.25); }
}

/* 3. Code fragments (edge whispers) */
.frags{ position:absolute; inset:0; }
.frag{
  position:absolute;
  font-family:"Share Tech Mono", ui-monospace, monospace;
  color:#bfe7ff;
  opacity:0; font-size: clamp(10px, 1.2vw, 13px);
  letter-spacing:.06em;
  mix-blend-mode:screen;
  text-shadow: 0 0 10px rgba(100,240,255,.25);
  animation: fragInOut 2.8s ease forwards;
}
@keyframes fragInOut{
  0%   { opacity:0; transform: translateY(4px) }
  15%  { opacity:.75; transform:none }
  85%  { opacity:.75 }
  100% { opacity:0; transform: translateY(-3px) }
}

/* 1. Brand glitch */
#glBrand{ position:relative; }
#glBrand.glitch{
  animation: gJitter .18s steps(2,end) 3;
  text-shadow:
    1px 0 0 rgba(100,240,255,.9),
   -1px 0 0 rgba(107,91,255,.65),
    0 0 22px rgba(71,215,255,.45);
  filter: contrast(115%) saturate(120%);
}
#glBrand.glitch::before,
#glBrand.glitch::after{
  content: attr(data-txt);
  position:absolute; inset:0;
  clip-path: inset(0 0 0 0);
  mix-blend-mode:screen;
}
#glBrand.glitch::before{
  color:#64f0ff; transform: translate(1px, 0);
}
#glBrand.glitch::after{
  color:#6b5bff; transform: translate(-1px, 0);
}
@keyframes gJitter{
  50% { transform: translate(-1px, 0); }
  100%{ transform: translate(1px, 0);  }
}
/* Put content above the global FX */
header, main, footer { position: relative; z-index: 1; }

/* Force brand to stay on a single line */
#glBrand { white-space: nowrap; display: inline-block; }

/* ===== Global background anomaly ===== */
#siteFx{
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0; overflow: hidden;
  /* gentle vignette so edges fade */
  -webkit-mask-image: radial-gradient(115% 85% at 50% 45%, #000 75%, transparent 100%);
          mask-image: radial-gradient(115% 85% at 50% 45%, #000 75%, transparent 100%);
}

/* Matrix (full-page) */
.matrix{
  position:absolute; inset:0;
  opacity:.10;                     /* slightly lighter than hero version */
  mix-blend-mode:screen;
  font-family:"Share Tech Mono", ui-monospace, monospace;
  color: var(--cyan);
  display:grid;
  grid-template-columns: repeat(40, 1fr);
  column-gap: 6px;
  padding-inline: min(6vw, 70px);
}
.matrix .col{ overflow:hidden; filter: blur(.25px); }
.matrix .stream{
  white-space:pre;
  transform: translateY(-110%);
  animation: mxFall var(--spd, 12s) linear infinite;
  opacity: .85;
}
@keyframes mxFall{ to { transform: translateY(110%); } }

/* Rare ripple pulse (still behind everything) */
.ripple{
  position:absolute; inset:0; display:grid; place-items:center;
  opacity:0; transform: scale(.9);
}
.ripple::before{
  content:"";
  width: clamp(260px, 48vw, 880px);
  height: clamp(260px, 48vw, 880px);
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(100,240,255,.28) 0 8%, rgba(100,240,255,.12) 9% 14%, transparent 15% 100%),
    radial-gradient(circle at 50% 50%, rgba(100,240,255,.06), transparent 60%);
  filter: blur(3px);
}
.ripple.boom{ animation: rip 1.2s ease-out forwards; }
@keyframes rip{
  0%   { opacity:.0; transform: scale(.8); }
  20%  { opacity:.22; transform: scale(1.02); filter: saturate(1.2); }
  100% { opacity:0;   transform: scale(1.25); }
}

/* Edge code fragments (single line) */
.frags{ position:absolute; inset:0; }
.frag{
  position:absolute;
  font-family:"Share Tech Mono", ui-monospace, monospace;
  color:#bfe7ff;
  white-space: nowrap;             /* one line only */
  opacity:0; font-size: clamp(10px, 1.2vw, 13px);
  letter-spacing:.06em;
  mix-blend-mode:screen;
  text-shadow: 0 0 10px rgba(100,240,255,.25);
  animation: fragInOut 2.8s ease forwards;
}
@keyframes fragInOut{
  0%   { opacity:0; transform: translateY(4px) }
  15%  { opacity:.75; transform:none }
  85%  { opacity:.75 }
  100% { opacity:0; transform: translateY(-3px) }
}

/* Brand glitch look (kept if you used it before) */
#glBrand.glitch{
  animation: gJitter .18s steps(2,end) 3;
  text-shadow:
    1px 0 0 rgba(100,240,255,.9),
   -1px 0 0 rgba(107,91,255,.65),
    0 0 22px rgba(71,215,255,.45);
  filter: contrast(115%) saturate(120%);
}
#glBrand.glitch::before,
#glBrand.glitch::after{
  content: attr(data-txt);
  position:absolute; inset:0;
  mix-blend-mode:screen;
}
#glBrand.glitch::before{ color:#64f0ff; transform: translate(1px, 0); }
#glBrand.glitch::after { color:#6b5bff; transform: translate(-1px, 0); }
@keyframes gJitter{ 50%{ transform: translate(-1px,0) } 100%{ transform: translate(1px,0) } }