:root{
  --bg:#0a0c12;
  --surface:#0f121a;
  --ink:#e7ecf6;
  --muted:#9aa6ba;
  --edge:#1a2130;
  --accent:#7be0b0;    /* mint */
  --accent-2:#6aa9ff;  /* blue */
  --radius:18px;
  --shadow: 0 6px 24px rgba(0,0,0,.35);
  --container:1200px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family: ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--ink);
  background: radial-gradient(900px 600px at 0% 0%, #101521 0%, transparent 60%),
              radial-gradient(900px 600px at 100% 100%, #0e1825 0%, transparent 60%),
              var(--bg);
  line-height:1.65;
}

img,svg{max-width:100%;display:block;height:auto}
a{color:var(--accent-2);text-decoration:none}
a:hover{text-decoration:underline}
p{margin:0 0 12px}
h1{margin:0 0 12px;font-size:clamp(30px,7vw,64px);letter-spacing:-.02em}
h2{margin:0 0 10px;font-size:clamp(22px,4.5vw,34px)}
h3{margin:0 0 6px;font-size:clamp(18px,3vw,22px)}
.lede{color:var(--muted);font-size:1.05rem}

.container{width:min(100% - 2rem, var(--container));margin-inline:auto}
.section{padding:72px 0;border-bottom:1px solid var(--edge)}
.block{background:var(--surface);border:1px solid var(--edge);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}

/* Top navigation */
.header{position:sticky;top:0;z-index:50;background:rgba(15,18,26,.86);backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--edge)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-weight:900;letter-spacing:.02em}
.brand img{
  height: clamp(100px, 6vw, 56px); /* scales with viewport but never tiny */
  width: auto;
}
.links{display:none;gap:22px;align-items:center}
.links a{color:var(--ink);opacity:.88;font-weight:800}
.links a:hover{opacity:1}
/* Mobile nav */
details.navdrop{margin-left:auto}
details.navdrop summary{
  list-style:none;cursor:pointer;border:1px solid var(--edge);border-radius:12px;padding:10px 12px;
  font-weight:800;color:var(--ink);background:#0f1522
}
details.navdrop[open] summary{background:#0d1424}
.drawer{margin-top:10px;border:1px solid var(--edge);border-radius:14px;padding:12px;background:#0f121a;display:grid;gap:10px}
.drawer a{color:var(--ink)}

/* Buttons */
.btn{appearance:none;border:1px solid #1a2537;border-radius:12px;padding:12px 18px;font-weight:800;cursor:pointer;background:#0f1522;color:var(--ink);box-shadow:0 2px 3px rgba(0,0,0,.25);transition:.15s transform,.2s box-shadow,.2s background,.2s color}
.btn:focus{outline:none;box-shadow:0 0 0 4px rgba(106,169,255,.22)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(135deg, var(--accent-2), #8dbbff);color:#061225;border-color:transparent}
.btn-mint{background:linear-gradient(135deg, var(--accent), #b8f2d7);color:#072115;border-color:transparent}
.btn-ghost{background:transparent;color:var(--muted);border-color:#1a2537}

/* Lists, grid, pricing */
.grid{display:grid;gap:18px}
.cols-2{grid-template-columns:1fr}
.cols-3{grid-template-columns:1fr}
@media (min-width:840px){
  .links{display:flex}
  details.navdrop{display:none}
  .cols-2{grid-template-columns:1fr 1fr}
  .cols-3{grid-template-columns:repeat(3,1fr)}
}

.checks{list-style:none;padding:0;margin:0}
.checks li{position:relative;padding-left:28px;margin:10px 0;color:var(--muted)}
.checks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent);font-weight:900}

.banner{
  background: linear-gradient(135deg, #1b2436, #111826);
  border:1px solid var(--edge);
  border-radius:22px;
  padding:28px;
  box-shadow: var(--shadow);
}

/* HERO tighten spacing: paste at END of your CSS */
.hero-title { margin-bottom: 0 !important; line-height: 1.05; }        /* the H1 */
.hero-title + p,
.tagline { 
	  margin-top: 4px !important; 
	  margin-bottom: 4px !important;
} /* the line under it */

.banner, .hero, .hero-card { gap: 4px; row-gap: 4px; }                 /* if parent uses flex/gap */


.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.badge{padding:6px 10px;border-radius:999px;background:#0c1624;border:1px solid #1e2a3d;color:#a2c6ff;font-size:.82rem}

.pricing{display:grid;gap:18px}
.tier{border:1px solid var(--edge);border-radius:18px;overflow:hidden;background:#0c121c;box-shadow:var(--shadow)}
.tier .head{padding:16px 18px;background:linear-gradient(180deg,#0f1728,#0b1120);border-bottom:1px solid var(--edge)}
.tier .price{font-size:clamp(26px,5vw,40px);font-weight:900}
.tier .body{padding:18px}
.tier ul{list-style:none;padding:0;margin:12px 0 0}
.tier li{margin:10px 0;color:var(--muted)}
.tier .cta{padding:18px;border-top:1px solid var(--edge)}
.ribbon{display:inline-block;padding:6px 10px;border-radius:999px;background:#17233a;border:1px solid #26365a;color:#a5c7ff;font-size:.8rem}

/* Footer */
.footer{padding:48px 0;color:var(--muted)}
.footer a{color:var(--muted)}

/* --- Pricing layout override --- */
.pricing {
  display: grid !important;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important; /* 3 across */
  align-items: stretch;
}
.tier { display: flex; flex-direction: column; height: 100%; }
.tier .body { flex: 1; }

/* Make it responsive under narrower viewports */
@media (max-width: 900px) {
  .pricing { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
  .pricing { grid-template-columns: 1fr !important; }
}



/* Product icons row: force horizontal and kill the default ✓ bullets */
#product .checks#vxn-no-icons { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
#product .checks#vxn-no-icons li { list-style:none; margin:0; padding:0; }
#product .checks#vxn-no-icons li::before { content:none !important; }
#product .checks#vxn-no-icons img { width:32px; height:32px; display:block; }

/* Product icons row: horizontal, captions, light text */
#product .checks#vxn-no-icons { 
  display: flex; flex-wrap: wrap; gap: 64px; align-items: flex-start;
}
#product .checks#vxn-no-icons li { list-style: none; margin: 0; padding: 0; }
#product .checks#vxn-no-icons li::before { content: none !important; } /* remove ✓ */

#product .vxn-icon { 
  display: flex; flex-direction: column; align-items: center; gap: 6px; 
  min-width: 64px; /* keeps nice wrapping */
}
#product .vxn-icon img { width: 34px; height: 34px; display: block; }




/* knobs */
:root {
  --icon-size: 100px;   /* shrink until all 6 fit */
  --icon-gap: 1px;      /* exact spacing between icons */
}

/* one line, controlled spacing */
#product #vxn-no-icons{
  display:flex;
  flex-wrap:nowrap;                      /* single row */
  justify-content:flex-start !important; /* kill space-between */
  column-gap:var(--icon-gap) !important; /* Safari-safe gap */
  row-gap:0;
}

#product #vxn-no-icons > li{
  list-style:none;
  margin:0 !important;                   /* nuke theme margins */
  padding:0;
}

#product #vxn-no-icons .vxn-icon{
  width:var(--icon-size);
  display:flex; flex-direction:column; align-items:center; text-align:center;
}

#product #vxn-no-icons .vxn-icon img{
  width:var(--icon-size); height:var(--icon-size); display:block;
}

#product #vxn-no-icons .vxn-icon figcaption{
  margin-top:6px; color:rgba(255,255,255,.72); font-size:.95rem; line-height:1.2;
}


:root {
  --vxn-yes-size: 48px;   /* icon + caption width */
  --vxn-yes-gap: 10px;    /* spacing between icons */
  --vxn-yes-color: rgba(255,255,255,0.75);
}

#vxn-yes-icons {
  display:flex; flex-wrap:wrap; gap:var(--vxn-yes-gap); align-items:flex-start;
}
#vxn-yes-icons li { list-style:none; margin:0; padding:0; }
#vxn-yes-icons li::before { content:none !important; }  /* remove ✓ bullets */

#vxn-yes-icons .vxn-icon {
  width:var(--vxn-yes-size);
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
#vxn-yes-icons .vxn-icon img {
  width:var(--vxn-yes-size); height:var(--vxn-yes-size); display:block;
}
#vxn-yes-icons .vxn-icon figcaption {
  margin-top:6px; font-size:.85rem; line-height:1.2; color:var(--vxn-yes-color);
}

 .message-box {
      background-color: #d4eaff;
      border-radius: 16px;
      padding: 25px;
      max-width: 600px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .message-box p {
      font-size: 1.2rem;
      color: #222;
      line-height: 0.9;
      margin-bottom: 1.5em;
    }

    .message-box p:last-child {
      margin-bottom: 0;
    }




.tier { position: relative; }

.tier.is-coming {
  filter: grayscale(5) opacity(.5);
  pointer-events: none;          /* block all interactions */
  user-select: none;             /* optional: prevent text selection */
}

/* Soft overlay + label */
.tier.is-coming::after {
  content: "Coming soon";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 1rem/1.2 system-ui, sans-serif;
  letter-spacing: .02em;
  text-transform: uppercase;
  pointer-events: none;          /* overlay itself doesn’t absorb clicks (card already disabled) */
}


/* 3rd box in price row. Optional: subtle blur (comment out if you prefer crisp text) */
.tier.is-coming::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(2px);    /* graceful fallback where unsupported */
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
}

/* VXN brand initials */
.hero-title .vxn { 
  display: inline-flex; 
  gap: 0; 
  margin-right: .5ch; 
  font-weight: 800; 
  font-size: 40px;
}
.hero-title .vxn .v { color: #fff; }         /* V = white */
.hero-title .vxn .x { color: #3b82f6; }      /* X = blue */
.hero-title .vxn.vxn--green .n { color: #48B256; } 









/* === Auth forms === */
.auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 40px;
}

.auth-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  overflow: hidden;
}

.auth-head {
  background: #0073e6;
  color: #fff;
  font-weight: bold;
  padding: 12px;
  text-align: center;
}

.auth-body {
  padding: 20px;
}

.auth-body form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-body input[type="text"],
.auth-body input[type="password"] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.auth-body button {
  background: #28a745;
  color: #fff;
  border: none;
  padding: 10px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.auth-body button:hover {
  background: #218838;
}

.error {
  color: red;
  font-size: 13px;
}


/* === VELIXNET AUTH FORMS (added) ========================================= */
.auth-section{ padding:40px 0; }
.auth-grid{ display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width: 980px){ .auth-grid{ grid-template-columns:1fr 1fr; } }

.auth-card{
  background:#ffffff;
  border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  overflow:hidden;
}
:root.dark .auth-card{ background:#f7f8fb; } /* if the theme toggles */

.auth-head{
  background:#0e79ef; /* theme blue */
  color:#fff;
  padding:16px 20px;
  text-align:center;
  font-weight:800;
  font-size:20px;
}
.auth-body{ padding:22px 22px 18px; }

.auth-field{ margin-bottom:14px; }
.auth-label{ display:inline-block; width:120px; font-weight:700; color:#222; }
.auth-input{
  width:100%;
  max-width:520px;
  padding:12px 14px;
  border:1px solid #cfd6e4;
  border-radius:8px;
  outline:none;
  font-size:16px;
}
.auth-input:focus{ border-color:#0e79ef; box-shadow:0 0 0 3px rgba(14,121,239,.15); }

.auth-actions{ margin-top:10px; }
.btn-green{
  display:inline-block;
  padding:12px 18px;
  background:#48B256;
  color:#fff;
  border:none;
  border-radius:8px;
  font-weight:800;
  cursor:pointer;
}
.btn-green:disabled{ opacity:.7; cursor:not-allowed; }
.btn-green:hover{ filter:brightness(1.05); }

.form-error{
  margin-top:8px;
  color:#d2333a;
  font-weight:700;
  display:none;
}
/* ======================================================================== */


/* === VELIXNET THEME EXTENSIONS (auth, hero, sections) =====================
   Uses site dark bg #0B1220 with blue/green accents.
   No existing rules removed; these override when loaded by login.html.
=========================================================================== */
:root{
  --bg:#0B1220;
  --surface:#0f1624;
  --panel:#0c121c;
  --edge:#1e2a3d;
  --ink:#dbe7ff;
  --muted:#94a3b8;
  --blue:#2b8cff;    /* accent */
  --green:#48B256;   /* brand green */
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
body{ background:var(--bg); color:var(--ink); }

/* Hero */
.hero{
  padding:40px 0 10px;
  background:linear-gradient(180deg, rgba(20,29,47,.55), rgba(11,18,32,0));
  border-bottom:1px solid var(--edge);
}
.hero .title{ font-size:clamp(28px,5vw,48px); margin:0 0 6px; font-weight:900; letter-spacing:.2px; }
.hero .tag{ color:var(--muted); margin:0 0 14px; }
.badges{ display:flex; gap:10px; flex-wrap:wrap; }
.badge{ padding:8px 12px; border-radius:999px; background:#0c1624; border:1px solid var(--edge); color:#aac6ff; font-weight:700; font-size:.9rem; }

/* Auth grid and cards (dark theme, identical structure for both) */
.auth-section{ padding:26px 0 34px; }
.auth-grid{ display:grid; grid-template-columns:1fr; gap:22px; }
@media (min-width: 980px){ .auth-grid{ grid-template-columns:1fr 1fr; } }

.auth-card{
  background:var(--panel);
  border:1px solid var(--edge);
  border-radius:20px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.auth-head{
  background:linear-gradient(90deg, var(--blue), #31aafc 50%, var(--green));
  color:#fff;
  padding:14px 18px;
  text-align:center;
  font-size:20px;
  font-weight:900;
  letter-spacing:.3px;
}
.auth-body{ padding:20px; }

.auth-field{ margin:0 0 14px; display:flex; align-items:center; gap:14px; }
.auth-label{ width:120px; font-weight:800; color:#cfe3ff; }
.auth-input{
  flex:1 1 auto;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #20304a;
  background:#0f1522;
  color:var(--ink);
  outline:none;
  font-size:16px;
}
.auth-input:focus{ border-color:#2b8cff; box-shadow:0 0 0 3px rgba(43,140,255,.2); }

.auth-actions{ margin-top:10px; display:flex; align-items:center; gap:10px; }
.btn-green{
  appearance:none;
  border:none;
  padding:12px 18px;
  background:var(--green);
  color:#08130c;
  border-radius:12px;
  font-weight:900;
  cursor:pointer;
}
.btn-green:hover{ filter:brightness(1.06); }
.btn-ghost{
  background:transparent;
  border:1px solid var(--edge);
  padding:12px 14px;
  border-radius:12px;
  color:var(--ink);
}

.form-error{ margin-top:6px; color:#ff6b7a; font-weight:800; display:none; }

/* Flavor sections */
.tiles{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:980px){ .tiles{ grid-template-columns: repeat(3,1fr);} }
.tile{
  background:var(--surface);
  border:1px solid var(--edge);
  border-radius:18px;
  padding:16px;
  box-shadow:var(--shadow);
}
.tile h3{ margin-top:0; }
.small{ color:var(--muted); font-size:.95rem; }

/* Footer tint */
.footer{ border-top:1px solid var(--edge); }


/* === Overrides per request (solid headers, light-gray inputs, blended buttons) === */
.auth-head{
  background: var(--blue); /* solid header color */
}

.auth-input{
  border-color: #cfd6e4;   /* light gray border */
  background: #0f1522;
}
.auth-input:focus{
  border-color: #aab6c8;
  box-shadow: 0 0 0 3px rgba(43,140,255,.18);
}

/* Buttons: blend into dark background with subtle green accent */
.btn-green{
  background: #0f1522;          /* blends with page surface */
  border: 1px solid #2f8e4a;    /* green accent border */
  color: #d7f1df;               /* soft greenish text */
}
.btn-green:hover{
  background: #122130;          /* slight lift, still blended */
  filter: none;
}

/* === VXN success page helpers ============================================ */
.success-section{ padding:30px 0 40px; }
.success-card{
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 22px 20px;
  text-align: center;
}
.success-card h2{ margin: 0 0 8px; font-size: clamp(22px, 4vw, 28px); }
.success-desc{ color: var(--muted); margin: 0 0 14px; }
.success-code{
  display:inline-block;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px dashed #2b3b55;
  background:#0f1522;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 900;
  letter-spacing: 1px;
  font-size: clamp(18px, 3.8vw, 24px);
  color: #dbe7ff;
}
.cta-row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:14px; }
.notice{ margin-top: 8px; color: #a2c6ff; font-size: .95rem; }
.rules{ color: var(--muted); font-size: .95rem; }
.rules strong{ color:#e7f0ff; }
/* ======================================================================== */