/* ───────── Base / Theme ───────── */
:root{
  --bg:#0e1220; --bg2:#141a2a; --line:#2a3355; --ink:#e7f0ff; --muted:#9fb3ff;
  --btn:#1b2344; --btn-hover:#243060; --accent:#4aa3ff;
  --chip:#1b2344; --bar:#202a4a; --fill:#4aa3ff;
  --digital: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*{ box-sizing:border-box; }
html,body{ height:100%; max-width:100%; overflow-x:hidden; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif;
  background: radial-gradient(60% 60% at 50% 35%, #1a2240 0%, var(--bg) 65%);
  color:var(--ink);
  font-size:16px;
}

/* ───────── Layout ───────── */
.wrap{ min-height:100dvh; display:grid; place-items:center; padding:24px; }
.page,.container{ width:min(100%,960px); margin-inline:auto; padding-inline:16px; }

.card{
  width:100%; max-width:720px;
  background:var(--bg2);
  border:1px solid var(--line);
  border-radius:20px;
  padding:24px 20px;
  text-align:center;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
}

/* Home card a bit tighter */
body.home .card{ max-width:600px; padding:18px 16px; }

/* ───────── Hero / Type ───────── */
.hero{ padding:48px 16px 8px; text-align:center; }
.hero-logo{ width:220px; height:auto; margin:0 auto 8px; display:block; }
body.presale .hero-logo{ width:260px; margin-bottom:12px; }

.hero-title,
.card > h1{
  margin:6px 0 0;
  font-family:var(--digital); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:linear-gradient(180deg,#e7f0ff 0%,#bcd0ff 55%,#8fb6ff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 6px rgba(74,163,255,.22);
}
.hero-title{ font-size:42px; line-height:1.1; text-shadow:0 2px 4px rgba(0,0,0,.6); }
.card > h1{ margin-top:6px; margin-bottom:4px; font-size:26px; letter-spacing:.1em; }

h1{ margin:8px 0 6px; font-size:28px; }
p{ margin:6px 0 0; color:var(--muted); }
.small{ font-size:12px; opacity:.75; margin-top:10px; }

/* Optional glow for PNG logo */
.hero-logo--screen{
  mix-blend-mode:screen;
  filter:brightness(1.12) contrast(1.05)
          drop-shadow(0 0 18px rgba(0,255,120,.18))
          drop-shadow(0 0 36px rgba(0,255,120,.10));
}

/* ───────── Buttons ───────── */
.btn, button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; min-height:48px;
  border-radius:12px; border:1px solid rgba(255,255,255,.15);
  background:var(--btn); color:#fff; font-weight:600; text-decoration:none; cursor:pointer;
  transition:background .15s ease, transform .04s ease;
}
.btn:hover, button:hover{ background:var(--btn-hover); }
.btn:active, button:active{ transform:translateY(1px); }

.btn-icon .icon{ width:18px; height:18px; filter:invert(1); opacity:.95; }
.btn-icon:hover .icon{ opacity:1; }

.cta{ margin-top:16px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* Connect pill – NOT sticky anymore */
.connect-pill{ position:static; margin:0 auto 12px; }

/* ───────── Utilities / blocks ───────── */
.logo{ width:140px; height:auto; display:block; margin:0 auto 8px; }
.row{ display:flex; flex-wrap:wrap; gap:12px; margin:14px 0; }
.box{ background:var(--chip); border-radius:12px; padding:12px; flex:1 1 180px; min-width:180px; }

.bar{ height:10px; background:var(--bar); border-radius:999px; overflow:hidden; }
.fill{ height:100%; width:35%; background:var(--fill); }

select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:var(--btn); color:#fff; border:1px solid rgba(255,255,255,.15);
  padding:10px 36px 10px 12px; border-radius:12px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
}

/* ───────── Old-school terminal ───────── */
.terminal-os{ margin:16px auto 0; padding:0 16px; display:flex; justify-content:center; }
.terminal-os__screen{
  position:relative; width:100%; max-width:820px; min-height:280px;
  padding:16px 18px; border-radius:14px; border:2px solid #153015;
  background:#081208; color:#b6ffb6; text-align:left;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13.5px; line-height:1.6;
  text-shadow:0 0 6px rgba(120,255,120,.35), 0 0 18px rgba(120,255,120,.12);
  box-shadow:0 0 24px rgba(40,160,60,.18) inset, 0 16px 40px rgba(0,0,0,.45);
  overflow:hidden;
}
.terminal-os__screen .type{ display:inline; }
.terminal-os__screen::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,20,0,.18) 3px),
    radial-gradient(120% 80% at 50% -10%, rgba(0,0,0,.22), rgba(0,0,0,0) 45%),
    radial-gradient(140% 100% at 50% 120%, rgba(0,0,0,.25), rgba(0,0,0,0) 35%);
  mix-blend-mode:multiply;
}
.terminal-os__screen::after{
  content:""; position:absolute; left:0; right:0; top:-15%; height:30%;
  border-radius:inherit; pointer-events:none;
  background:linear-gradient(to bottom, rgba(180,255,180,.10), rgba(180,255,180,0));
  filter:blur(.5px); animation:crtSweep 4.5s linear infinite; will-change:top,opacity;
}
@keyframes crtSweep{ 0%{top:-15%;opacity:.28} 70%{top:100%;opacity:.10} 100%{top:100%;opacity:0} }
.cursor{ display:inline-block; margin-left:6px; animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0 } }

/* ───────── Presale: layout / UX ───────── */
body.presale .card{ text-align:left; max-width:780px; }
body.presale h1, body.presale .card > .muted{ text-align:center; }
body.presale .small{ opacity:.8; }

body.presale .box{
  background:#1a2240;
  border:1px solid rgba(255,255,255,.06);
  padding:16px;
}
body.presale .row{ gap:16px; margin:18px 0; }

/* Payment column */
.pay-stack{ display:flex; flex-direction:column; gap:12px; max-width:640px; margin:0 auto; }
.pay-field{ position:relative; max-width:640px; margin-top:6px; }
#payAddress{
  display:block; width:100%; overflow:auto;
  padding:10px 88px 10px 12px; border-radius:12px; background:#0f1630;
  border:1px solid rgba(255,255,255,.12);
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px; line-height:1.4;
  text-overflow:ellipsis; white-space:nowrap;
}
#copyPay{ position:absolute; right:6px; top:50%; transform:translateY(-50%); height:34px; line-height:34px; padding:0 12px; }

/* How to join */
body.presale ol{ max-width:640px; margin:18px auto 8px; padding-left:20px; }
body.presale ol li{ margin:14px 0; line-height:1.65; }
body.presale ol code{ background:#0f1630; }

/* Custom currency dropdown */
.dd{ position:relative; width:100%; max-width:320px; }
.dd-toggle{
  width:100%; display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.12);
  background:var(--btn); color:#fff; cursor:pointer; font-weight:600;
}
.dd-icon{ width:18px; height:18px; }
.dd-caret{ margin-left:auto; opacity:.8; }
.dd-list{
  position:absolute; top:100%; left:0; right:0; z-index:20;
  background:#0f1630; border:1px solid rgba(255,255,255,.12); border-radius:12px;
  margin-top:6px; padding:6px; box-shadow:0 12px 32px rgba(0,0,0,.45);
  display:none;
}
.dd.open .dd-list{ display:block; }
.dd-item{
  width:100%; display:flex; align-items:center; gap:10px;
  padding:10px 10px; border-radius:10px; background:transparent; color:#e7f0ff;
  border:none; text-align:left; cursor:pointer;
}
.dd-item:hover{ background:#182046; }
.dd-item img{ width:18px; height:18px; }

/* ───────── Responsive ───────── */
@media (max-width:600px){
  .wrap{ padding:16px; }
  .card{ padding:20px 16px; border-radius:14px; }
  .hero{ padding-top:32px; }
  .hero-title{ font-size:32px; }
  .cta{ gap:10px; }

  /* Presale: stack & full width inputs/buttons */
  body.presale .row{ flex-direction:column; }
  body.presale .box{ padding:14px; }
  body.presale .pay-stack{ max-width:100% !important; }
  body.presale .box .dd,
  body.presale .box .pay-field,
  #payAddress{ width:100% !important; max-width:100% !important; }
}

@media (max-width:480px){
  h1{ font-size:clamp(22px,6vw,28px); }
  .row{ gap:12px; }
  .box{ flex:1 1 100%; min-width:0; } /* boxes stack */
  .btn, button{ width:100%; }          /* full-width CTAs only on phones */
  #connectPill { width: auto !important; }
}

/* ========== Patch: layout fixes ========== */

/* 1) Keep everything inside the page on mobile (no sideways scroll) */
.wrap, .card { overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }

/* 2) Home link: pin truly top-left */
.back{
  position: fixed !important;
  top: 12px; left: 12px;
  z-index: 1002;
  color: white;
}

/* 3) Connect pill: tidy in the card header (desktop), not glued to frame */
.card{ position: relative; }
.connect-pill{
  position: static !important;    /* sits inside the card */
  top: 12px; right: 16px;
  margin: 0;
}
@media (max-width: 600px){
  .connect-pill{
    position: static !important ;   /* normal flow on mobile */
    margin: 0 0 12px 0;
    align-self: stretch;
  }
}

/* 4) Currency dropdown: left-aligned, not too wide */
.dd{ width: auto; max-width: 320px; }
.dd-list{
  left: 0; right: auto;                 /* anchor to left edge */
  width: max-content;                   /* size to content, but... */
  min-width: 100%;                      /* ...never narrower than toggle */
  max-width: min(320px, 92vw);          /* ...and never overflow viewport */
  text-align: left;
}
.dd-item{
  justify-content: flex-start;          /* kill centering */
  text-align: left;
}

/* 5) Address + Copy: grid so they never overlap */
.pay-field{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
}
#payAddress{
  grid-column: 1 / 2;
  width: 450px;
  padding-right: 12px !important;       /* no fake space for button */
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}


@media (max-width: 600px){
  .dd{ max-width: 100%; }
  .dd-list{ max-width: 96vw; }
  .pay-field{ grid-template-columns: 1fr auto; }
}

/* top-of-page connect button row */
.connect-wrap{
  display:flex;
  justify-content:flex-end;   /* push button to the right */
  padding:12px 16px;
}
.connect-wrap #connectPill{
  margin:0;
  position:static;            /* make sure it's not fixed/sticky */
  width:auto;                 /* not full width on desktop */
}

@media (max-width:600px){
  .connect-wrap{ padding:8px 12px; }
  .connect-wrap #connectPill{ width:100%; }  /* full width only on mobile */
}

/* --- Do NOT stretch the top connect pill on mobile --- */
.connect-wrap { display:flex; justify-content:flex-end; padding:8px 12px; }

/* override any global mobile rule */
#connectPill{
  width:auto !important;
  min-width:unset !important;
  flex:0 0 auto !important;   /* don't grow */
  align-self:flex-start;
  position:static !important;  /* just in case */
}

/* if you kept the per-card connect button, leave it alone */
.card #connectPill { /* no change */ }