/* CRUCIBLE — landing page styles. Dependency-free, no build step. */

:root{
  --navy-0:#0a0e1c; --navy-1:#11162b; --navy-2:#151b30;
  --blue:#5b8cff; --blue-deep:#3a63d0;
  --green:#36d399; --gold:#f5b941;
  --ink:#eef2fc; --muted:#9aa6c4; --line:#2a3358;

  --maxw:1120px;
  --radius:14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:"Segoe UI",Inter,system-ui,-apple-system,sans-serif;
  color:var(--ink);
  line-height:1.55;
  background:
    radial-gradient(1100px 760px at 16% 8%, rgba(91,140,255,.16), transparent 60%),
    radial-gradient(900px 700px at 100% 30%, rgba(54,211,153,.09), transparent 55%),
    linear-gradient(160deg, var(--navy-0) 0%, var(--navy-1) 60%, var(--navy-2) 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

/* faint grid texture behind the page top, masked so it fades out */
.bg-grid{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:.05;
  background-image:
    linear-gradient(rgba(154,166,196,.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154,166,196,.6) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(900px 620px at 25% 12%, #000 25%, transparent 78%);
          mask-image:radial-gradient(900px 620px at 25% 12%, #000 25%, transparent 78%);
}

.container{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px}
.container.narrow{max-width:760px}
.center{text-align:center}

a{color:var(--blue)}
img{max-width:100%; height:auto; display:block}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(140%) blur(8px);
  background:rgba(10,14,28,.72);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink)}
.hex{filter:drop-shadow(0 4px 14px rgba(91,140,255,.4))}
.wordmark{font-weight:800; letter-spacing:.16em; font-size:18px; color:#fff}
.header-nav{display:flex; gap:26px}
.header-nav a{color:var(--muted); text-decoration:none; font-weight:600; font-size:15px; letter-spacing:.01em}
.header-nav a:hover{color:var(--ink)}

/* ---------- Hero ---------- */
.hero{padding:96px 0 72px}
.hero-inner{max-width:880px}
.hero-brand{display:flex; align-items:center; gap:18px; margin-bottom:34px}
.hex-lg{filter:drop-shadow(0 8px 22px rgba(91,140,255,.45))}
.wordmark-lg{font-size:34px; letter-spacing:.2em}

.headline{
  font-size:clamp(2.2rem, 5.4vw, 3.6rem);
  line-height:1.07; font-weight:800; letter-spacing:-.015em;
  margin:0 0 22px; max-width:16ch;
}
.headline .accent{color:var(--blue)}
.subhead{
  font-size:clamp(1.05rem, 1.9vw, 1.3rem);
  color:var(--muted); font-weight:500; max-width:56ch; margin:0 0 32px;
}

.hero-cta{margin:0 0 30px}
.hero-chips{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px;
}
.chip{
  font-size:.86rem; font-weight:600; letter-spacing:.02em;
  padding:7px 14px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.03); color:#cdd6ee;
}
.chip-b{border-color:rgba(91,140,255,.55); color:#bcd0ff}
.chip-g{border-color:rgba(54,211,153,.5); color:#a9f0d4}
.chip-a{border-color:rgba(245,185,65,.5); color:#f3d79a}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; text-decoration:none; font-weight:700;
  padding:13px 26px; border-radius:10px; letter-spacing:.01em;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn-primary{
  color:#fff;
  background:linear-gradient(180deg, var(--blue) 0%, var(--blue-deep) 100%);
  box-shadow:0 8px 24px rgba(58,99,208,.4), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 12px 30px rgba(58,99,208,.5)}
.btn-primary:focus-visible{outline:3px solid #bcd0ff; outline-offset:2px}

/* ---------- Sections ---------- */
.section{padding:72px 0; border-top:1px solid var(--line)}
.eyebrow{
  text-transform:uppercase; letter-spacing:.18em; font-size:.78rem;
  font-weight:700; color:var(--blue); margin:0 0 12px;
}
.section-lead{
  font-size:clamp(1.6rem, 3.2vw, 2.2rem); font-weight:800; letter-spacing:-.01em;
  margin:0 0 36px; max-width:24ch;
}
.section-why .section-lead, .section-contact .section-lead{margin-bottom:20px}
.section-contact .section-lead{margin-left:auto; margin-right:auto}

.prose{font-size:1.12rem; color:var(--muted); max-width:62ch; margin:0 auto}
.section-why .prose{margin:0}

/* ---------- Cards ---------- */
.cards{
  display:grid; gap:20px;
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
@media (max-width:640px){
  .cards{grid-template-columns:1fr}
}
.card{
  background:linear-gradient(180deg, rgba(21,27,48,.85), rgba(17,22,43,.7));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
  transition:border-color .15s ease, transform .15s ease;
}
.card:hover{border-color:rgba(91,140,255,.5); transform:translateY(-2px)}
.card h3{margin:0 0 10px; font-size:1.18rem; font-weight:700; color:var(--ink)}
.card p{margin:0; color:var(--muted); font-size:1rem}

/* ---------- Contact ---------- */
.section-contact{text-align:center}
.contact-cta{margin:28px 0 0}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line); padding:28px 0}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.footer-mark{display:flex; align-items:center; gap:9px; font-weight:800; letter-spacing:.16em; font-size:14px; color:#cdd6ee}
.site-footer small{color:var(--muted)}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .header-nav{display:none}
  .hero{padding:64px 0 56px}
  .hero-brand{gap:14px; margin-bottom:26px}
  .wordmark-lg{font-size:26px}
  .section{padding:56px 0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.card{transition:none}
}