/* Recens Host — foundation, shared chrome, footer.
   Brand colors fall back to defaults but are overridden at runtime by the
   DB-driven /theme.css (--theme-color / --accent-color). */
:root{
  --ink:#0B1220;
  --ink-soft:#141C2C;
  --frost:#EEF3F5;
  --frost-dim:#DCE3E7;
  --amber:var(--theme-color, #E8A33D);
  --amber-soft:#F3C179;
  --mint:var(--accent-color, #3ED9A0);
  --slate:#5B6472;
  --slate-light:#8B93A1;
  --white:#FFFFFF;
  --radius:10px;
  --shadow-sm:0 1px 2px rgba(11,18,32,0.04), 0 1px 3px rgba(11,18,32,0.06);
  --shadow-md:0 8px 24px -12px rgba(11,18,32,0.18);
  --shadow-lg:0 24px 60px -24px rgba(11,18,32,0.35);
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:var(--font-body);
  background:var(--frost);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
::selection{background:var(--amber); color:var(--ink);}
:focus-visible{outline:2px solid var(--amber); outline-offset:2px; border-radius:4px;}

/* NAV / HEADER (shared marketing + checkout chrome) */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(238,243,245,0.82);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--frost-dim);
}
nav.wrap{display:flex; align-items:center; justify-content:space-between; height:72px;}
.nav-right{display:flex; align-items:center; gap:40px;}
.nav-links{display:flex; gap:34px; align-items:center;}
.nav-links a{font-size:14.5px; font-weight:500; color:var(--slate); transition:color 0.15s ease;}
.nav-links a:hover, .nav-links a.active{color:var(--ink);}
.nav-actions{display:flex; gap:12px; align-items:center;}

/* LOGO LOCKUP */
.logo{display:inline-flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:-0.01em;}
.logo-mark{display:inline-flex; filter:drop-shadow(0 4px 10px rgba(232,163,61,0.28));}
.logo-mark svg{display:block; border-radius:9px;}
.logo-word{color:var(--ink);}
.logo-word-alt{color:var(--amber);}
.sidebar .logo-word{color:var(--frost);}

/* BUTTONS */
.btn{
  font-family:var(--font-body); font-weight:600; font-size:14px;
  padding:10px 20px; border-radius:9px; border:1px solid transparent; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:transform 0.14s ease, background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.btn:active{transform:translateY(1px);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--frost-dim);}
.btn-ghost:hover{background:var(--white); box-shadow:var(--shadow-sm);}
.btn-primary{background:var(--ink); color:var(--frost);}
.btn-primary:hover{background:var(--ink-soft); box-shadow:var(--shadow-md);}
.btn-amber{background:var(--amber); color:var(--ink); box-shadow:0 6px 18px -8px rgba(232,163,61,0.6);}
.btn-amber:hover{background:var(--amber-soft);}
.btn-lg{padding:14px 26px; font-size:15px; border-radius:11px;}
.btn-plain{background:transparent; color:var(--slate); border-color:transparent; padding:10px 6px;}
.btn-plain:hover{color:var(--ink);}

/* BADGES / EYEBROWS (shadcn-style) */
.badge{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.02em;
  padding:5px 11px; border-radius:100px; border:1px solid var(--frost-dim); background:var(--white); color:var(--slate);
}
.badge .live{width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px rgba(62,217,160,0.16);}
.eyebrow{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.06em;
  color:var(--slate); text-transform:uppercase; display:flex; align-items:center; gap:8px;
  margin-bottom:14px;
}

/* SECTION HEADS */
section{padding:80px 0;}
.section-head{margin-bottom:44px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head.center .eyebrow{justify-content:center;}
h2{font-family:var(--font-display); font-weight:700; font-size:clamp(26px,3vw,34px); letter-spacing:-0.015em; margin-bottom:14px; line-height:1.12;}
.section-head p{color:var(--slate); font-size:15.5px;}

/* STAT BAND (shared) */
.stat-band{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--frost-dim); border:1px solid var(--frost-dim); border-radius:14px; overflow:hidden;}
.stat-cell{background:var(--white); padding:26px 24px;}
.stat-cell .num{font-family:var(--font-display); font-weight:700; font-size:30px; letter-spacing:-0.02em;}
.stat-cell .lbl{font-family:var(--font-mono); font-size:12px; color:var(--slate); margin-top:4px;}

/* FOOTER (full grid) */
footer{border-top:1px solid var(--frost-dim); padding:56px 0 32px; background:var(--white);}
footer .logo{margin-bottom:14px;}
.footer-about{color:var(--slate); font-size:13.5px; max-width:260px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:48px;}
.footer-col h4{font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:0.05em; color:var(--slate); margin-bottom:16px;}
.footer-col a{display:block; font-size:13.5px; color:var(--ink); margin-bottom:10px; transition:color 0.15s ease;}
.footer-col a:hover{color:var(--amber);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:24px; border-top:1px solid var(--frost-dim);
  font-family:var(--font-mono); font-size:12px; color:var(--slate-light);
}

@media(max-width:900px){
  .nav-links{display:none;}
  .stat-band{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
}