/* ============================================
   VIZROOTS — Design System v2 (Handoff Spec)
   ============================================ */
:root{
  --cream:       #f6f4ee;
  --ink:         #16202b;
  --muted:       #56626e;
  --nav-link:    #16324c;
  --navy:        #13293f;
  --navy-surface:#13293f;
  --navy-surface2:#1c3a55;
  --navy-border: #2b445f;
  --navy-footer: #0f2233;
  --panel:       #eceded;
  --border:      #e0e1e4;
  --clay:        #c47a3c;
  --clay-light:  #e0b483;
  --clay-dark:   #1b120a;
  --clay-tint:   #f2e3d4;
  --green:       #3f7d5f;
  --green-deep:  #2f7a55;
  --green-check: #7fb79a;
  --neg:         #b4593a;
  --neg-tint:    #f7e8e2;
  --light-on-dark: #c3d0dc;
  --eyebrow-on-dark: #9db3c6;
  --cream-on-dark: #f0efe6;
  --footer-text: #9aa9ba;
  --footer-muted: #6a7a8c;
  --input-border: #d3d6dc;
  --success-bg: #eaf3ee;
  --success-border: #bcdccb;
  --link: #16324c;
  --link-hover: #c47a3c;

  --font-display: 'Newsreader', Georgia, serif;
  --font-body: 'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --maxw: 1120px;
  --maxw-narrow: 1000px;
  --radius-card: 14px;
  --radius-btn: 10px;
  --shadow-dash: 0 30px 60px -30px rgba(19,41,63,0.4);

  /* Spacing scale (brand kit) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 88px;
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }

body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }
a{ color: var(--link); text-decoration: none; transition: color 0.15s ease; }
a:hover{ color: var(--link-hover); }
ul{ list-style:none; }

.container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
}
.container-narrow{
  max-width: var(--maxw-narrow);
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- Typography ---------- */
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(40px, 6vw, 68px); line-height:1.05; letter-spacing:-0.015em; }
h2{ font-size: clamp(30px, 4vw, 42px); line-height:1.1; }
h3{ font-size: clamp(20px, 2.2vw, 22px); font-weight:700; font-family: var(--font-body); line-height:1.2; }
p{ color: var(--muted); }
.lede{ font-size: clamp(18px,2vw,20px); line-height: 1.55; max-width: 58ch; color: var(--muted); }

.eyebrow{
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 700;
  display: inline-block;
  margin-bottom: 18px;
}
.eyebrow.on-dark{ color: var(--eyebrow-on-dark); }

.italic-accent{ font-style: italic; color: var(--clay-light); }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: var(--radius-btn);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  border: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  font-family: var(--font-body);
  white-space: nowrap;
}
.btn-primary{
  background: var(--clay);
  color: var(--clay-dark);
}
.btn-primary:hover{ background: #b56b30; transform: translateY(-2px); }
.btn-cream{
  background: var(--cream);
  color: var(--navy-surface);
}
.btn-cream:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.18); }
.btn-outline{
  background: transparent;
  color: var(--cream-on-dark);
  border: 1.5px solid rgba(240,239,230,0.4);
}
.btn-outline:hover{ border-color: var(--cream-on-dark); }
.btn-navy{
  background: var(--navy);
  color: var(--cream);
  padding: 10px 18px;
  font-size: 15px;
}
.btn-navy:hover{ background: var(--navy-surface); color: var(--cream); }
.nav-links .btn-primary{ padding: 10px 18px; font-size: 15px; }

/* ---------- Header / Nav ---------- */
header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(246,244,238,0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 16px 32px;
  max-width: 1200px;
  margin: 0 auto;
  gap: 24px;
}
.logo{
  display:flex;
  align-items:center;
  gap: 11px;
  color: var(--ink);
}
.logo img{ width:36px; height:36px; flex:none; border-radius:9px; }
.logo-text{ display:flex; flex-direction:column; line-height:1; }
.logo-name{ font-weight:700; font-size:19px; letter-spacing:-0.02em; font-family: var(--font-body); color: var(--ink); }
.logo-tag{ font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color:#7a8694; font-weight:600; margin-top:4px; }

.nav-links{
  display:flex;
  align-items:center;
  gap: 32px;
  font-size: 15px;
  font-weight: 500;
}
.nav-links a{ color: var(--nav-link); }
.nav-links a.active{ color: var(--navy); font-weight:700; }
.nav-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  flex-direction:column;
  gap:5px;
  padding: 8px;
}
.nav-toggle span{
  width:24px; height:2px; background:var(--ink); display:block; border-radius:2px;
}

@media (max-width: 860px){
  .nav-links{
    position: fixed;
    top: 68px; left:0; right:0;
    background: var(--cream);
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    gap: 20px;
    border-bottom: 1px solid var(--border);
    transform: translateY(-130%);
    transition: transform 0.25s ease;
  }
  .nav-links.open{ transform: translateY(0); }
  .nav-toggle{ display:flex; }
}

/* ---------- Sections ---------- */
section{ padding: 88px 0; }
.section-navy{ background: var(--navy-surface); color: var(--cream-on-dark); }
.section-navy-gradient{ background: linear-gradient(180deg, var(--navy-surface) 0%, var(--navy-surface2) 100%); color: var(--cream-on-dark); }
.section-panel{ background: var(--panel); }
.section-head{ max-width: 640px; margin-bottom: 48px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-navy p{ color: var(--light-on-dark); }

/* ---------- Guarantee block ---------- */
.guarantee-block{
  background: var(--clay);
  color: var(--clay-dark);
  border-radius: 16px;
  padding: 22px 26px;
  margin: 26px 0;
  width: 100%;
}
.guarantee-block .label{ font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; opacity:0.72; margin-bottom:8px; }
.guarantee-block .text{ font-family: var(--font-display); font-size:18px; line-height:1.3; }

.guarantee-explainer{
  background: rgba(28,58,85,0.55);
  border: 1px solid rgba(224,180,131,0.25);
  border-radius: 14px;
  padding: 20px 26px;
  margin: 24px auto;
  max-width: 620px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--clay-light);
}
.guarantee-explainer strong{ color: var(--cream-on-dark); }

/* ---------- Hero actions ---------- */
.hero-actions{ display:flex; gap:16px; margin-top:32px; flex-wrap:wrap; }
.hero-micro{ display:flex; align-items:center; gap:9px; margin-top:32px; font-size:14px; color: var(--eyebrow-on-dark); }
.hero-micro .dot{ width:8px; height:8px; border-radius:50%; background: var(--green-check); flex:none; }

/* ---------- Cards ---------- */
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-4{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.card{
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 28px;
}
.card-dark{
  background: var(--navy-surface);
  border: 1px solid var(--navy-border);
  border-radius: var(--radius-card);
  padding: 28px;
  color: var(--cream-on-dark);
}
.card-dark p{ color: var(--light-on-dark); }
.card-leftborder{
  background: var(--cream);
  border-left: 3px solid var(--clay);
  border-radius: 8px;
  padding: 22px 24px;
}
.card .num, .card-dark .num{
  font-family: var(--font-display);
  color: var(--clay);
  font-size: 22px;
  margin-bottom: 14px;
  display:block;
}
.card-dark .num{ color: var(--clay-light); }
.card h3, .card-dark h3{ margin-bottom: 10px; font-size:17px; }
.card p, .card-dark p{ font-size: 14.5px; margin: 0; }

.icon-badge{
  width: 44px; height:44px;
  border-radius: 10px;
  background: var(--clay-tint);
  color: var(--clay);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 18px;
  flex-shrink:0;
}

/* ---------- Dashboard mock ---------- */
.dash-frame{
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow-dash);
  overflow: hidden;
  margin-top: 40px;
}
.dash-titlebar{
  background: var(--navy-surface);
  color: var(--cream-on-dark);
  padding: 14px 20px;
  display:flex;
  align-items:center;
  gap:14px;
}
.dash-dots{ display:flex; gap:6px; }
.dash-dots span{ width:10px; height:10px; border-radius:50%; display:block; }
.dash-dots span:nth-child(1){ background:#e0705f; }
.dash-dots span:nth-child(2){ background:#e6bd57; }
.dash-dots span:nth-child(3){ background:#7fb79a; }
.dash-title{ font-size:13px; font-weight:600; }
.dash-illustrative{ margin-left:auto; font-size:12px; color: var(--eyebrow-on-dark); }
.dash-body{ padding: 28px; }

.toggle-control{
  display:inline-flex;
  background: var(--panel);
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
  margin-top: 20px;
}
.toggle-control button{
  border:none;
  background:transparent;
  padding: 9px 22px;
  border-radius: 7px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  cursor:pointer;
  color: var(--muted);
  transition: background 0.15s ease, color 0.15s ease;
}
.toggle-control button.active{ background: var(--navy); color: var(--cream); }

.kpi-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; margin-bottom:28px; }
.kpi-tile{ background: var(--panel); border-radius: 12px; padding:18px; }
.kpi-tile.dark{ background: var(--navy-surface); color: var(--cream-on-dark); }
.kpi-label{ font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color: var(--muted); font-weight:700; margin-bottom:8px; }
.kpi-tile.dark .kpi-label{ color: var(--eyebrow-on-dark); }
.kpi-value{ font-family: var(--font-display); font-size:26px; color: var(--ink); }
.kpi-tile.dark .kpi-value{ color: var(--cream-on-dark); }
.kpi-sub{ font-size:12.5px; margin-top:6px; color: var(--muted); }
.kpi-sub.positive{ color: var(--green-deep); font-weight:600; }
.kpi-sub.warn{ color: var(--neg); font-weight:600; }
.kpi-tile.dark .kpi-sub{ color: var(--light-on-dark); }

.bar-row{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.bar-label{ width:90px; font-size:13.5px; font-weight:600; flex-shrink:0; }
.bar-track{ flex:1; background: var(--panel); border-radius:6px; height:26px; overflow:hidden; }
.bar-fill{ height:100%; border-radius:6px; background: var(--green); transform-origin: left; transition: transform 0.7s cubic-bezier(0.2,0.7,0.2,1); }
.bar-fill.warn{ background: var(--clay); }
.bar-value{ width:110px; text-align:right; font-size:13px; color: var(--muted); flex-shrink:0; }

.before-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap:14px; }
.before-card{ border: 1.5px dashed var(--border); border-radius:12px; padding:16px; }
.before-card .loc{ font-weight:700; font-size:14px; margin-bottom:4px; }
.before-card .sys{ font-size:12.5px; color: var(--muted); margin-bottom:10px; }
.flag-chip{ display:inline-block; background: var(--neg-tint); color: var(--neg); font-size:11.5px; font-weight:600; padding:5px 10px; border-radius:6px; }
.before-footer{ grid-column: 1 / -1; display:flex; align-items:center; justify-content:space-between; margin-top:6px; font-family: var(--font-display); font-style:italic; font-size:16px; flex-wrap:wrap; gap:10px; }

/* ---------- Process ---------- */
.process{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.process-step{ position:relative; padding-top: 18px; border-top: 2px solid var(--border); }
.process-step .step-num{ font-family: var(--font-display); color: var(--clay); font-size: 20px; }
.process-step h4{ margin: 10px 0 8px; font-family: var(--font-body); font-weight:700; font-size:16px; }
.process-step p{ font-size: 14px; }

/* ---------- Forms ---------- */
.form-group{ margin-bottom: 18px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-group label{ display:flex; flex-direction:column; gap:7px; font-size:13px; font-weight:600; color: var(--nav-link); }
.form-group input,
.form-group textarea,
.form-group select{
  padding: 12px 14px;
  border: 1px solid var(--input-border);
  border-radius: 9px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: #fff;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{ outline: none; border-color: var(--navy); }
.form-group input[type="radio"],
.form-group input[type="checkbox"]{
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1.5px solid var(--input-border);
  accent-color: var(--navy);
  flex-shrink: 0;
}
.form-group textarea{ resize: vertical; min-height: 100px; }
.form-note{ font-size: 13px; color: #7a8694; margin-top: 4px; }
.form-status{ margin-top: 16px; padding: 12px 16px; border-radius:8px; font-size:0.9rem; display:none; }
.form-status.show{ display:block; }
.form-status.error{ background:#f7e8e2; color:#b4593a; }
.success-panel{ background: var(--success-bg); border:1px solid var(--success-border); border-radius:14px; padding:28px; }
.success-panel .headline{ font-family: var(--font-display); font-size:24px; color: var(--navy); margin-bottom:8px; }

/* ---------- Founder / bio ---------- */
.founder{ display:grid; grid-template-columns: 260px 1fr; gap: 48px; align-items:start; }
.founder-photo{ width:100%; aspect-ratio:1; border-radius:16px; overflow:hidden; box-shadow: 0 12px 40px rgba(18,40,63,0.12); }
.founder-photo img{ width:100%; height:100%; object-fit:cover; }
.founder-name{ font-family: var(--font-display); font-size:20px; margin-top:16px; color: var(--ink); }
.founder-title{ font-family: var(--font-body); font-size:12px; letter-spacing:0.08em; color: var(--clay); text-transform:uppercase; font-weight:700; margin-top:4px; }
.founder-bio p{ margin-bottom: 16px; font-size:16px; color: var(--muted); }
.founder-bio p:last-child{ margin-bottom:0; }

@media (max-width: 720px){
  .founder{ grid-template-columns: 1fr; }
  .founder-photo{ max-width: 200px; }
}

/* ---------- Footer ---------- */
footer{ background: var(--navy-footer); color: var(--footer-text); padding: 56px 0 40px; }
.footer-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 36px; }
.footer-grid h4{ color: var(--cream-on-dark); font-size:14px; font-weight:700; margin-bottom:14px; }
.footer-grid a{ display:block; font-size:14px; margin-bottom:10px; color: var(--footer-text); }
.footer-grid a:hover{ color: var(--clay); }
.footer-logo{ display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.footer-logo img{ width:34px; height:34px; border-radius:9px; }
.footer-logo-name{ color: var(--cream-on-dark); font-weight:700; font-size:19px; letter-spacing:-0.02em; }
.footer-slogan{ font-family: var(--font-display); font-style:italic; font-size:17px; color: var(--light-on-dark); margin-bottom:10px; }
.footer-linkedin{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; color: var(--footer-text); font-size:14px; font-weight:600; }
.footer-linkedin .badge{ width:20px; height:20px; border-radius:4px; background: var(--navy); display:inline-flex; align-items:center; justify-content:center; color: var(--cream); font-size:11px; font-weight:700; }
.footer-bottom{ max-width: var(--maxw); margin:0 auto; padding-top:22px; border-top:1px solid var(--navy-surface2); font-size:13px; color: var(--footer-muted); }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in{ opacity:1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .grid-3, .grid-4{ grid-template-columns: 1fr 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
  .process{ grid-template-columns: 1fr 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .kpi-grid{ grid-template-columns: 1fr 1fr; }
  .form-row{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  section{ padding: 60px 0; }
  .grid-3, .grid-4{ grid-template-columns: 1fr; }
  .process{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .kpi-grid{ grid-template-columns: 1fr 1fr; }
  .bar-label{ width:70px; font-size:12px; }
  .bar-value{ width:80px; font-size:11.5px; }
}