/* ColdBoard site styles */
/* ========= Variables & Base ========= */
:root{
  --bg:#0a0f1f; --bg-alt:#0d1328; --text:#f6f8ff; --muted:#c9d1d9;
  --ink:#10131a; --ink-2:#252b3a; --brand:#1f6feb; --brand-2:#00d4ff;
  --accent:#4fe3c1; --ring: rgba(31,111,235,.35);
  --wrap: min(1140px, 90vw);
  --header-h: 96px;      /* taller so logo never clips */
  --footer-pad-y: 22px;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#ffffff; --bg-alt:#f6f8ff; --text:#10131a; --muted:#333; --ink:#10131a; --ink-2:#2a2f3d; }
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; background:var(--bg); color:var(--text); line-height:1.6; }
img{ max-width:100%; display:block; vertical-align:middle; }
a{ color:var(--brand-2); text-decoration:none; }
a:hover{ text-decoration:underline; }
.wrap{ width:var(--wrap); margin-inline:auto; }
.section{ padding:4.5rem 0; }
.section.alt{ background:var(--bg-alt); }
.lead{ font-size:1.25rem; opacity:.9; }
.skip-link{ position:absolute; left:-9999px; }
.skip-link:focus{ left:12px; top:12px; background:#fff; color:#000; padding:.5rem .75rem; border-radius:.5rem; z-index:1000; }
.btn{ display:inline-block; padding:.8rem 1.1rem; border-radius:.7rem; border:1px solid transparent; font-weight:600; text-decoration:none; }
.btn-primary{ background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#001422; }
.btn-ghost{ border-color:rgba(255,255,255,.25); color:var(--text); }

/* ========= Header ========= */
/* Default dark header */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(10,15,31,.7);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.site-header .wrap{
  display:flex; align-items:center; gap:1rem;
  min-height: var(--header-h);
  padding-block: 14px;
}
.brand{ display:flex; align-items:center; }
.brand img{
  display:block; height:auto; width:auto; object-fit:contain;
  max-height: calc(var(--header-h) - 28px);
  max-width: 260px;
  margin:0;
}
.site-nav ul{ display:flex; gap:1rem; list-style:none; margin:0; padding:0; }
.site-nav a{ padding:.5rem .7rem; border-radius:.5rem; }
.site-nav a:hover{ background:rgba(255,255,255,.06); text-decoration:none; }
.nav-toggle{
  margin-left:auto; display:none;
  background:transparent; border:1px solid rgba(255,255,255,.2);
  color:inherit; padding:.5rem .7rem; border-radius:.5rem;
}

/* Light header variant */
.site-header.light{
  background: rgba(246,248,255,0.95);
  border-bottom: 1px solid rgba(0,0,0,.08);
  color: var(--ink);
}
.site-header.light a{ color: var(--ink); }
.site-header.light .site-nav a:hover{ background: rgba(0,0,0,.06); }
.site-header.light .nav-toggle{ border-color: rgba(0,0,0,.18); color: var(--ink); }

@media (max-width:800px){
  .nav-toggle{ display:block; }
  .site-nav{
    display:none; position:absolute; right:1rem; top:var(--header-h);
    background:var(--bg); padding:1rem; border:1px solid rgba(255,255,255,.12); border-radius:.8rem;
  }
  .site-header.light .site-nav{
    background:#fff; border-color: rgba(0,0,0,.1);
  }
  .site-nav.open{ display:block; }
}

/* ========= Hero ========= */
.hero{ position:relative; overflow:hidden; }
.hero-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(0,212,255,.18), transparent 60%),
    radial-gradient(800px 500px at -10% 10%, rgba(31,111,235,.22), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.2), transparent 60%);
  pointer-events:none;
}
.hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem; padding:4.5rem 0 3rem; }
@media (max-width:1100px){ .hero-grid{ grid-template-columns:1fr; } }

.hero-copy h1{ font-size: clamp(2rem, 1rem + 4vw, 3.4rem); line-height:1.15; margin:0 0 1rem; }
.cta-row{ display:flex; gap:1rem; margin-top:1rem; }
.trust-points{ margin:1.2rem 0 0; padding:0; list-style:none; display:grid; gap:.4rem; }
.trust-points li::before{ content:"✓"; margin-right:.5rem; color:var(--accent); }

/* Hero image sizing (never too tall or tiny) */
.hero-art{
  position:relative; width:100%;
  border-radius:1.2rem; overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  background:linear-gradient(135deg, rgba(31,111,235,.15), rgba(0,212,255,.08));
  height: clamp(260px, 48vw, 680px);
  margin:0 auto;
}
.hero-art .hero-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  border-radius:inherit; display:block;
}
@media (max-width:640px){ .hero-art{ height: clamp(220px, 62vw, 420px); } }
.chip{ display:none !important; } /* Hide old placeholder */

/* ========= Grids & Sections ========= */
.grid{ display:grid; gap:1.25rem; grid-template-columns: repeat(4, 1fr); }
.features article, .licensing article{
  background:rgba(255,255,255,.04); padding:1rem;
  border:1px solid rgba(255,255,255,.08); border-radius:.8rem;
}
.features article h3, .licensing article h3{ margin-top:.2rem; }
.sectors{ grid-template-columns: repeat(4, 1fr); }
@media (max-width:1100px){ .grid{ grid-template-columns: repeat(2, 1fr); } .sectors{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:580px){ .grid{ grid-template-columns: 1fr; } }

/* ========= Benefits ========= */
.benefits-list{ display:grid; gap:.5rem; margin:0; padding:0; list-style:none; }
.benefits-list li{ background:rgba(255,255,255,.04); padding:1rem; border-radius:.8rem; border:1px solid rgba(255,255,255,.08); }
.note{ opacity:.8; font-size:.95rem; margin-top:1rem; }

/* ========= Form (always white) ========= */
.contact-form{ display:grid; gap:.9rem; max-width:680px; }
.field{ display:grid; gap:.35rem; }
.field.inline{ grid-template-columns: auto 1fr; align-items:center; gap:.6rem; }

input, textarea, select{
  background:#ffffff !important;
  color:#10131a !important;
  border:1px solid rgba(0,0,0,.22) !important;
  padding:.75rem .9rem !important;
  border-radius:.6rem !important;
  outline:none !important;
  -webkit-appearance:none; appearance:none; background-clip:padding-box;
}
input::placeholder, textarea::placeholder{ color:rgba(0,0,0,.45) !important; }
input:focus, textarea:focus, select:focus{
  border-color: var(--brand-2) !important;
  box-shadow: 0 0 0 .2rem var(--ring) !important;
}
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
  -webkit-text-fill-color:#10131a !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* ========= Footer ========= */
.site-footer{ border-top:1px solid rgba(255,255,255,.08); padding-block: var(--footer-pad-y); }
.footer-grid{
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  min-height: calc(48px + var(--footer-pad-y)*2); /* space for logo */
}
.f-brand{ display:flex; align-items:center; gap:.8rem; }
.f-brand img{
  display:block; height:auto; width:auto; object-fit:contain;
  max-height:48px; max-width:240px;
}

/* ========= Utilities ========= */
.top{ position:fixed; right:1rem; bottom:1rem; padding:.6rem .7rem; border-radius:.6rem; border:1px solid rgba(255,255,255,.2); background:rgba(10,15,31,.7); color:var(--text); display:none; }
.doc .prose{ padding:3rem 0; }
.prose h1{ margin-top:0; }
.doc-footer{ display:flex; justify-content:space-between; align-items:center; padding:2rem 0 3rem; }
:focus-visible{ outline:2px solid var(--brand-2); outline-offset:2px; border-radius:.2rem; }