@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  --primary:#223628;
  --on-primary:#ffffff;
  --background:#ffffff;
  --surface:#f3f6f3;
  --border:#dde4df;
  --text:#223628;
  --text-muted:#455e4e;
  --accent:#455e4e;
  --radius-sm:7px;
  --radius-md:10px;
  --radius-lg:14px;
  --radius-xl:20px;
  --shadow-card: rgba(255,255,255,0.7) 0px 1px 0px 0px inset, rgba(0,0,0,0.07) 0px 4px 16px 0px;
  --dur-fast:120ms;
  --dur-base:1100ms;
  --easing:cubic-bezier(0.22,1,0.36,1);
}

*{box-sizing:border-box; margin:0; padding:0;}

body{
  background:var(--background);
  color:var(--text);
  font-family:'Space Grotesk','Hanken Grotesk',system-ui,sans-serif;
  font-size:15px;
  font-weight:600;
  line-height:1.1;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit; text-decoration:none;}

.wrap{max-width:1120px; margin:0 auto; padding:0 32px;}

/* ---------- NAV ---------- */
header{
  border-bottom:1px solid var(--border);
  position:sticky; top:0; background:var(--background); z-index:10;
}
nav.wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.logo{
  font-weight:700; font-size:19px; letter-spacing:-0.3px;
  display:flex; align-items:center; gap:8px;
}
.logo-mark{
  width:10px; height:10px; border-radius:2px;
  background:var(--primary);
  transform:rotate(45deg);
}
.nav-links{display:flex; gap:36px; font-size:14px; color:var(--text-muted);}
.nav-links a:hover{color:var(--text);}
.nav-links a.active{color:var(--text); font-weight:700;}
.nav-cta{
  background:var(--primary); color:var(--on-primary);
  padding:10px 20px; border-radius:var(--radius-pill, 9999px);
  font-size:14px;
}

/* ---------- HERO ---------- */
.hero{padding:88px 0 64px; border-bottom:1px solid var(--border);}
.eyebrow-mono{
  font-family:'Space Mono',monospace; font-size:12px; font-weight:700;
  letter-spacing:0.72px; color:var(--accent); margin-bottom:20px; display:block;
}
h1.display{
  font-size:76px; font-weight:700; line-height:1.02; letter-spacing:-1.52px;
  color:var(--text); margin-bottom:24px;
}
.hero p.lede{
  font-size:17px; font-weight:600; color:var(--text-muted); max-width:46ch; line-height:1.45;
  margin-bottom:32px;
}
.hero-actions{display:flex; gap:14px;}
.btn-primary{
  background:var(--primary); color:var(--on-primary);
  padding:15px 26px; border-radius:var(--radius-md); font-size:15px; font-weight:600;
  border:none; cursor:pointer; transition:transform var(--dur-fast) var(--easing);
}
.btn-primary:hover{transform:translateY(-1px);}
.btn-ghost{
  padding:15px 26px; border-radius:var(--radius-md); font-size:15px; font-weight:600;
  border:1px solid var(--border); color:var(--text);
}

/* ---------- SECTIONS ---------- */
section{padding:80px 0;}
.section-head{max-width:60ch; margin-bottom:48px;}
h2.heading{
  font-size:40px; font-weight:700; line-height:1.1; letter-spacing:-0.8px;
  margin-bottom:14px;
}
.section-head p{color:var(--text-muted); font-size:16px; line-height:1.5;}

/* ---------- WHAT IS A SYBIL ---------- */
.explainer{background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.explainer-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;}
.explainer-copy h2{margin-bottom:18px;}
.explainer-copy p{color:var(--text-muted); font-size:15px; line-height:1.6; margin-bottom:16px;}
.explainer-copy p strong{color:var(--text); font-weight:700;}
.why-list{display:flex; flex-direction:column; gap:16px; margin-top:8px;}
.why-card{
  background:var(--background); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:22px 24px;
}
.why-card h3{font-size:16px; margin-bottom:8px; letter-spacing:-0.2px;}
.why-card p{color:var(--text-muted); font-size:14px; line-height:1.55; font-weight:600; margin:0;}

/* ---------- HOW IT WORKS ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.step{
  border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px;
  background:var(--background);
}
.step-index{
  font-family:'Space Mono',monospace; font-size:12px; color:var(--accent);
  letter-spacing:0.72px; margin-bottom:16px; display:block;
}
.step h3{font-size:19px; margin-bottom:10px; letter-spacing:-0.2px;}
.step p{color:var(--text-muted); font-size:14px; line-height:1.5; font-weight:600;}

/* ---------- DOSSIER FORM ---------- */
.dossier{background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.dossier-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px;}
.dossier-copy h2{margin-bottom:16px;}
.dossier-copy p{color:var(--text-muted); font-size:15px; line-height:1.55; margin-bottom:20px;}
.checklist{display:flex; flex-direction:column; gap:12px; margin-top:24px;}
.checklist li{list-style:none; display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--text);}
.check-dot{
  width:6px; height:6px; border-radius:50%; background:var(--primary); margin-top:6px; flex-shrink:0;
}

form.card{
  background:var(--background); border:1px solid var(--border); border-radius:var(--radius-xl);
  padding:32px; box-shadow:var(--shadow-card);
}
.field{margin-bottom:18px;}
.field label{
  display:block; font-size:13px; color:var(--text-muted); margin-bottom:8px; font-weight:600;
}
.field input, .field textarea, .field select{
  width:100%; border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:12px 14px; font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:600;
  color:var(--text); background:var(--surface);
  transition:border-color var(--dur-fast) var(--easing);
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--primary); background:var(--background);
}
.field textarea{resize:vertical; min-height:100px; font-family:'Space Mono',monospace; font-size:13px; font-weight:400;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.submit-btn{
  width:100%; background:var(--primary); color:var(--on-primary);
  padding:15px; border:none; border-radius:var(--radius-md); font-size:15px; font-weight:600;
  cursor:pointer; margin-top:8px;
}
.form-note{font-size:12px; color:var(--text-muted); margin-top:14px; line-height:1.5;}

/* ---------- TRAITS ---------- */
.traits{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.trait{
  border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px;
  background:var(--background);
}
.trait-num{
  font-family:'Space Mono',monospace; font-size:22px; font-weight:700;
  color:var(--primary); display:block; margin-bottom:14px;
}
.trait h3{font-size:19px; margin-bottom:10px; letter-spacing:-0.2px;}
.trait p{color:var(--text-muted); font-size:14px; line-height:1.55; font-weight:600;}

/* ---------- CASE STUDY ---------- */
.case-study{background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.cs-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:40px;}
.cs-stat{
  background:var(--background); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px; box-shadow:var(--shadow-card);
}
.cs-stat .num{
  font-family:'Space Mono',monospace; font-size:32px; font-weight:700; letter-spacing:0.4px;
  color:var(--primary); display:block; margin-bottom:8px;
}
.cs-stat .label{font-size:14px; color:var(--text); font-weight:600; line-height:1.35;}
.cs-stat .sub{font-family:'Space Mono',monospace; font-size:11.5px; color:var(--text-muted); margin-top:6px; display:block;}

.methods{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:40px;}
.method{
  background:var(--background); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:26px;
}
.method-tag{
  display:inline-block; font-family:'Space Mono',monospace; font-size:11px;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--accent);
  border:1px solid var(--border); border-radius:999px; padding:4px 12px; margin-bottom:16px;
}
.method .addr{
  font-family:'Space Mono',monospace; font-size:30px; font-weight:700; color:var(--text);
  display:block; margin-bottom:4px;
}
.method .addr-label{
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--text-muted); display:block; margin-bottom:12px;
}
.method p{color:var(--text-muted); font-size:14px; line-height:1.55; font-weight:600;}

/* ---------- FAQ ---------- */
.faq{max-width:820px;}
.faq-item{border-bottom:1px solid var(--border); padding:22px 0;}
.faq-item:last-child{border-bottom:none;}
.faq-item h3{font-size:18px; margin-bottom:10px; letter-spacing:-0.2px;}
.faq-item p{color:var(--text-muted); font-size:15px; line-height:1.6; font-weight:500;}

/* ---------- FOOTER ---------- */
footer{padding:48px 0; border-top:1px solid var(--border);}
.footer-grid{display:flex; justify-content:space-between; align-items:center;}
footer .foot-links{display:flex; gap:28px; font-size:13px; color:var(--text-muted);}
footer .foot-links a:hover{color:var(--text);}
.foot-note{font-size:12px; color:var(--text-muted); margin-top:8px;}

@media (max-width:860px){
  .dossier-grid, .explainer-grid{grid-template-columns:1fr;}
  .steps, .traits, .cs-stats, .methods{grid-template-columns:1fr;}
  h1.display{font-size:44px; letter-spacing:-0.8px;}
  h2.heading{font-size:30px;}
  .field-row{grid-template-columns:1fr;}
  .nav-links{display:none;}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important;}
}