/* ========== Fallout / Pip-Boy inspired theme ========== */
:root{
  --bg-0:#0b1510;      /* deep vault green black */
  --bg-1:#0e1a12;
  --grid:#103a25;
  --green:#96f7a2;     /* Pip-Boy green */
  --green-soft:#b6ffc0;
  --amber:#ffdc9a;     /* alt theme accent */
  --text:#d9ffea;
  --muted:#90b29f;
  --outline:#2a5a3d;
  --glow:0 0 12px rgba(150,247,162,.35), 0 0 32px rgba(150,247,162,.2);
  --radius:14px;
  --shadow:0 18px 40px rgba(0,0,0,.45);
}
.theme-amber{
  --green:var(--amber);
  --green-soft:#fff0c2;
  --text:#fff7e6;
  --muted:#c9b79b;
  --grid:#3c2f12;
  --outline:#6a5522;
  --bg-0:#1a1408;
  --bg-1:#231a0a;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family: Oxanium, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  background: radial-gradient(1200px 800px at 70% -10%, var(--bg-1) 0%, var(--bg-0) 60%, #000 100%), var(--bg-0);
  color:var(--text);
  line-height:1.6;
  letter-spacing:.2px;
  overflow-x:hidden;
}
.no-js body{opacity:1}

/* CRT scanlines + vignette */
.scanlines{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  background: repeating-linear-gradient(
    to bottom, rgba(0,0,0,.18) 0, rgba(0,0,0,.18) 2px, transparent 3px, transparent 4px
  );
  mix-blend-mode:multiply;
}
.vignette{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  background: radial-gradient(1200px 600px at 50% 10%, transparent 0%, transparent 55%, rgba(0,0,0,.55) 100%);
}

/* Containers */
.container{max-width:1120px; margin:0 auto; padding:0 20px; position:relative; z-index:2}

/* Header / Nav */
.site-header{
  position:sticky; top:0; z-index:10; backdrop-filter: blur(6px);
  background: linear-gradient(to bottom, rgba(10,22,15,.9), rgba(10,22,15,.4));
  border-bottom:1px solid var(--outline);
}
.nav{display:flex; align-items:center; justify-content:space-between; min-height:64px}
.brand{display:flex; align-items:center; gap:1px; text-decoration:none; color:var(--text)}
.logo{display:block; width:190px; height:62px; background:url("assets/Multisnap logo green.png") left center/contain no-repeat; mix-blend-mode:screen}
.menu{display:flex; align-items:center; gap:18px}
.menu a{color:var(--text); text-decoration:none; opacity:.9}
.menu a:hover{color:var(--green)}
.menu-cta{display:flex; gap:10px; margin-left:6px}
.nav-toggle{display:none; background:none; border:0; cursor:pointer}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--text); margin:5px 0}

@media (max-width: 960px){
  .nav-toggle{display:block}
  .menu{position:absolute; top:64px; right:20px; left:20px; padding:18px; border:1px solid var(--outline);
    background:rgba(12,26,18,.96); border-radius:12px; flex-direction:column; align-items:flex-start; display:none; box-shadow:var(--shadow)}
  .menu.open{display:flex}
}

/* Buttons */
.btn{display:inline-block; padding:10px 16px; border-radius:10px; border:1px solid var(--green);
  color:var(--text); text-decoration:none; transition: all .15s ease; background:transparent}
.btn:hover{box-shadow: var(--glow); transform: translateY(-1px)}
.btn.primary{background:linear-gradient(180deg, rgba(150,247,162,.2), rgba(150,247,162,.06)); color:var(--text)}
.btn.ghost{border-style:dashed; opacity:.9}
.btn.big{padding:14px 22px; font-weight:600}
.btn.tiny{padding:6px 10px; font-size:12px}

/* Hero (centered) */
.hero{padding:64px 20px 28px; text-align:center}
.crt-title{
  font-family: VT323, monospace; font-size:56px; line-height:1.1; margin:8px 0 12px;
  color:var(--green); text-shadow: var(--glow)
}
.lead{max-width:820px; margin:0 auto; opacity:.95}
.cta-row{display:flex; gap:12px; margin:18px 0 6px; justify-content:center; flex-wrap:wrap}
.hero-bullets{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; margin:16px auto 0; padding:0 0 0 18px; max-width:820px; text-align:left}
@media (max-width: 720px){
  .hero-bullets{grid-template-columns: 1fr}
}

/* Center sections with a readable line length */
.section-inner { max-width: 880px; margin: 0 auto; }
.section-center h2,
.section-center .lead,
.section-center .cta-row { text-align: center; }

/* Panels */
.panel{margin:36px 0 14px; padding:26px 22px; border:1px solid var(--outline); border-radius: var(--radius);
  background:linear-gradient(180deg, rgba(16,58,37,.25), rgba(16,58,37,.08))}
.panel h2{font-family: VT323, monospace; color:var(--green); font-size:36px; margin:0 0 8px; text-shadow: var(--glow)}
.panel h3{font-family: VT323, monospace; color:var(--green); font-size:26px; margin:24px 0 8px; text-shadow: var(--glow)}
.panel p, .panel li{color:var(--text); opacity:.95}

/* Cards */
.cards{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; margin-top:10px}
.card{border:1px dashed var(--outline); border-radius:12px; padding:18px; background:rgba(8,18,12,.6)}
.card h3{margin:2px 0 8px; color:var(--green)}
@media (max-width: 980px){ .cards{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 640px){ .cards{grid-template-columns: 1fr} }

/* Pricing */
#pricing .price-card{
  display:grid; justify-items:center; gap:10px; padding:26px; border:1px solid var(--outline); border-radius:14px;
  background:linear-gradient(180deg, rgba(150,247,162,.08), rgba(150,247,162,.02)); box-shadow: var(--shadow);
  max-width:520px; margin:0 auto;
}
.price-top{display:flex; align-items:baseline; gap:12px}
.price{font-family: VT323, monospace; font-size:64px; color:var(--green); text-shadow: var(--glow)}
.unit{font-size:18px; opacity:.9}
.price-bullets{list-style: none; padding:0; margin:6px 0 4px; text-align:left}
.price-bullets li{margin:4px 0}

/* Steps */
.steps{padding-left:18px}

/* Forms */
.form{display:grid; gap:12px; margin-top:8px}
.form label{display:grid; gap:6px; font-size:14px}
input, textarea{
  width:100%; padding:10px 12px; border-radius:8px; background:#0b1b12; color:var(--text);
  border:1px solid var(--outline); outline: none;
}
input:focus, textarea:focus{border-color:var(--green); box-shadow: var(--glow)}
.grid-2{display:grid; grid-template-columns: repeat(2, 1fr); gap:12px}
@media (max-width:720px){ .grid-2{grid-template-columns: 1fr} }
.hidden{display:none}

/* Footer */
.site-footer{margin:36px 0 14px; border-top:1px solid var(--outline); padding:14px 0}
.footer-inner{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px}
.site-footer nav a{margin-right:12px; color:var(--muted); text-decoration:none}
.site-footer nav a:hover{color:var(--green)}

/* To top button */
.to-top{
  position:fixed; right:18px; bottom:18px; z-index:5; border-radius:50%; width:44px; height:44px;
  display:grid; place-items:center; border:1px solid var(--green); background:rgba(8,18,12,.7); color:var(--text);
  box-shadow: var(--shadow); cursor:pointer; opacity:.85;
  display:none;
}
.to-top:hover{box-shadow: var(--glow)}

/* Grid backdrop (subtle) */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 800px at 30% -20%, rgba(150,247,162,.06) 0%, transparent 70%),
    linear-gradient(transparent 0, transparent calc(100% - 160px), rgba(150,247,162,.06) calc(100% - 160px), transparent 100%),
    repeating-linear-gradient(0deg, transparent 0, transparent 46px, rgba(16,58,37,.35) 47px, rgba(16,58,37,.35) 48px),
    repeating-linear-gradient(90deg, transparent 0, transparent 46px, rgba(16,58,37,.35) 47px, rgba(16,58,37,.35) 48px);
  opacity:.35;
}

/* Code look */
code{font-family: VT323, monospace; color:var(--green); background:rgba(14,26,18,.5); padding:2px 6px; border-radius:6px; border:1px solid var(--outline)}
/* --- Center each panel card and give it a readable width --- */
.panel.container {
  /* Narrow the panel itself to a readable width and center it */
  max-width: 920px;     /* tweak 880–980 to taste */
  margin-left: auto;
  margin-right: auto;
}

/* Optional: make Features grid still use full width within that centered panel */
#features .cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 980px) { #features .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { #features .cards { grid-template-columns: 1fr; } }