:root{
  --ink:#e2e8f0;
  --muted:#94a3b8;
  --panel:#0b1220;
  --brand1:#4f46e5;
  --brand2:#06b6d4;
  --nav:#020617;
  --bg:#0a1222;
  --input:#0f172a;
  --input-border:rgba(148,163,184,.22);

  /* NEW: global page gutter (≥ 1/4 inch) */
  --gutter: max(24px, 3.5vw);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial;
  color:var(--ink);
  background: linear-gradient(180deg, #0a0f1e 0%, #0a1222 60%, #0b1428 100%);
}

/* Nav */
.nav{
  position:sticky; top:0; z-index:50;
  background:var(--nav);
  border-bottom:1px solid rgba(148,163,184,.15)
}
.nav .nav-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  /* was: padding:10px 16px;  -> use page gutter + safe areas */
  padding:10px calc(var(--gutter) + env(safe-area-inset-right)) 10px calc(var(--gutter) + env(safe-area-inset-left));
  max-width:1200px; margin:0 auto;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-weight:800}
.brand img{height:28px; width:auto}
.nav-links{display:flex; gap:10px; align-items:center}
.nav-links a{color:var(--ink); text-decoration:none; padding:8px 12px; border-radius:10px; border:1px solid rgba(148,163,184,.15); background:rgba(2,6,23,.45)}
.nav-links a.cta{background:linear-gradient(135deg,var(--brand1),var(--brand2)); border:none; color:#fff; font-weight:700}
.nav-links a:hover{filter:brightness(1.08)}

/* Containers */
.container{
  max-width:1200px; margin:0 auto;
  /* was: padding:0 16px; -> use page gutter + safe areas */
  padding-left: calc(var(--gutter) + env(safe-area-inset-left));
  padding-right: calc(var(--gutter) + env(safe-area-inset-right));
}
.section{padding:22px 0}


/* Global edge padding fix */
body, main, header, footer, section, article {
  padding-left: 12px;
  padding-right: 12px;
}

.container {
  padding-left: 20px;
  padding-right: 20px;
}

.section {
  padding-left: 20px;
  padding-right: 20px;
}
/* Panels / Cards */
.panel{
  background:var(--panel);
  border:1px solid rgba(148,163,184,.15);
  border-radius:14px;
  padding:14px;
  box-shadow:0 10px 25px rgba(0,0,0,.35);
}
.card .title{margin:0 0 4px}

/* Inputs */
.input{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--input-border);
  background:var(--input);
  color:var(--ink);
  outline:none;
}
.input:focus{border-color:#60a5fa; box-shadow:0 0 0 3px rgba(96,165,250,.25)}

/* Buttons */
.btn{display:inline-block;padding:12px 16px;border-radius:12px;font-weight:700;background:linear-gradient(135deg,var(--brand1),var(--brand2));color:white;box-shadow:0 8px 20px rgba(0,0,0,.35);text-decoration:none;border:none;cursor:pointer}
.btn.secondary{background:rgba(2,6,23,.6);border:1px solid rgba(148,163,184,.18);color:var(--ink)}

/* Hero */
.hero{padding:30px 0}
.hero h1{font-size: clamp(22px, 3vw, 34px); margin:0 0 8px}
.hero .hero-sub{color:#9fb3ca; margin:8px 0 0}
.hero .links{margin-top:10px; color:var(--muted)}
.hero .links a{color:#c7d2fe; text-decoration:underline}

/* Grid */
.grid-3{display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width: 900px){ .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 640px){ .grid-3{grid-template-columns:1fr} }

/* Text utils */
.lead{color:#9fb3ca}
.muted{color:var(--muted)}

/* Footer */
.footer{
  /* ensure footer content keeps gutter too */
  padding:24px calc(var(--gutter) + env(safe-area-inset-right)) 24px calc(var(--gutter) + env(safe-area-inset-left));
  text-align:center; color:var(--muted)
}

/* Splash */
.splash{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  background:#000;
  transition:opacity .45s ease;
}
.splash.hidden{opacity:0; pointer-events:none}
.splash .layer{position:absolute; inset:0; display:flex; align-items:center; justify-content:center}
.splash .gif-layer img{height:100vh; width:auto; object-fit:contain}
.splash .logo-layer{opacity:0; transition:opacity .4s ease}
.splash .logo-layer.show{opacity:1}
.splash .logo-layer img{max-width:80vw; max-height:80vh; width:auto; height:auto}
.splash .skip{
  position:absolute; right:14px; bottom:14px;
  background:rgba(13,34,66,.55);
  color:#cbd5e1;
  border:1px solid rgba(148,163,184,.25);
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
}

/* Portfolio grid style tweaks */
.grid{display:grid; gap:14px}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){ .grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .grid.cols-3{grid-template-columns:1fr} }

/* Table style (estimator schedule etc.) */
table{width:100%; border-collapse:collapse}
th,td{padding:6px 4px; border-bottom:1px solid rgba(148,163,184,.18)}
tfoot td{border-top:2px solid rgba(255,255,255,.65)}

/* --- Safety net for full-bleed sections (rare) ---
   If a page forgets to wrap something in .container,
   this prevents edge-cling without double-padding normal sections. */
body > main:not(.container):not(:has(.container)),
body > header:not(:has(.container)),
body > footer:not(:has(.container)) {
  padding-left: calc(var(--gutter) + env(safe-area-inset-left));
  padding-right: calc(var(--gutter) + env(safe-area-inset-right));
}