/* ---------- Tokens ---------- */
:root{
  --ink-dark: #161B25;
  --ink-panel: #1F2733;
  --blue: #3E7CFA;
  --blue-deep: #2A5BD1;
  --amber: #F2A93B;
  --paper: #F6F7F9;
  --paper-alt: #ECEFF3;
  --white: #FFFFFF;
  --text: #1B2029;
  --text-soft: #565E6C;
  --line: #DEE2E8;
  --radius: 4px;
  --display: 'Space Grotesk', 'Inter', sans-serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --container: 1180px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--sans);
  color: var(--text);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3{
  font-family: var(--display);
  color: var(--ink-dark);
  line-height: 1.15;
  margin: 0 0 0.5em;
  font-weight: 600;
  letter-spacing: -0.01em;
}
p{ margin: 0 0 1em; color: var(--text-soft); max-width: 60ch; }
a{ color: var(--blue-deep); }
img,svg{ display:block; max-width:100%; }
.wrap{ max-width: var(--container); margin: 0 auto; padding: 0 28px; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--ink-dark); color:#fff;
  padding:10px 16px; z-index: 200;
}
.skip-link:focus{ left: 12px; top: 12px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.96rem;
  padding: 13px 26px;
  border-radius: var(--radius);
  text-decoration:none;
  border: 1.5px solid transparent;
  cursor:pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn-primary{ background: var(--amber); color: var(--ink-dark); }
.btn-primary:hover{ background: #FFC266; transform: translateY(-1px); }
.btn-ghost{ border-color: var(--ink-dark); color: var(--ink-dark); }
.btn-ghost:hover{ background: var(--ink-dark); color: #fff; }
.btn-block{ width:100%; text-align:center; font-size:1.0rem; }

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(246,247,249,0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height: 76px;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color: var(--ink-dark); }
.brand-mark{ color: var(--blue); display:flex; }
.brand-name{
  font-family: var(--display); font-weight:700; font-size:1.14rem; color: var(--ink-dark);
  display:flex; flex-direction:column; line-height:1.15;
}
.brand-sub{ font-family: var(--sans); font-weight:600; font-size:0.65rem; letter-spacing:.06em; text-transform:uppercase; color: var(--blue-deep); }
.main-nav{ display:flex; align-items:center; gap:28px; }
.main-nav a{ color: var(--text); text-decoration:none; font-weight:600; font-size:0.94rem; }
.main-nav a:hover{ color: var(--blue-deep); }
.nav-cta{
  background: var(--ink-dark); color:#fff !important; padding:10px 18px; border-radius: var(--radius);
}
.nav-cta:hover{ background: var(--blue-deep) !important; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding: 8px; }
.nav-toggle span{ width:24px; height:2px; background: var(--ink-dark); display:block; }
.mobile-menu{ display:none; }

/* ---------- Hero ---------- */
.hero{ background: var(--paper); padding: 60px 0 0; }
.hero-grid{
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 52px; align-items:center;
  padding-bottom: 60px;
}
.eyebrow{ color: var(--blue-deep); font-weight:700; font-size:0.82rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:14px; }
.eyebrow-light{ color: var(--amber); }
.hero h1{ font-size: clamp(2.0rem, 3.4vw, 2.9rem); max-width: 16ch; }
.hero-lead{ font-size:1.06rem; max-width:48ch; }
.hero-actions{ display:flex; gap:14px; margin: 24px 0 32px; flex-wrap:wrap; }
.hero-stats{ list-style:none; padding:0; margin:0; display:flex; gap:28px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:20px; }
.hero-stats li{ display:flex; flex-direction:column; gap:2px; }
.hero-stats strong{ font-family: var(--display); font-size:1.4rem; color: var(--ink-dark); }
.hero-stats span{ font-size:0.82rem; color: var(--text-soft); max-width:16ch; }
.hero-art{ border-radius: 6px; overflow:hidden; }

/* ---------- Trust strip ---------- */
.trust-strip{ background: var(--ink-dark); padding: 16px 0; }
.trust-inner{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:center;
  color:#C9CFD9; font-size:0.86rem; font-weight:600;
}
.trust-inner .dot{ color: var(--amber); }

/* ---------- Section shared ---------- */
section{ padding: 84px 0; }
.section-head{ max-width: 640px; margin: 0 auto 48px; text-align:center; }
.section-head h2{ font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.section-head p{ margin-left:auto; margin-right:auto; }

/* ---------- Overview ---------- */
.overview{ background: var(--paper); }
.overview-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
.overview-card{
  background: var(--white); border: 1px solid var(--line); border-radius: 6px;
  padding: 34px; text-decoration:none; display:flex; flex-direction:column; gap:10px;
  transition: border-color .15s ease, transform .12s ease;
}
.overview-card:hover{ border-color: var(--blue); transform: translateY(-3px); }
.overview-icon{ color: var(--blue-deep); margin-bottom:6px; }
.overview-card h3{ font-size:1.3rem; color: var(--ink-dark); }
.overview-card p{ font-size:0.96rem; }
.link-arrow{ color: var(--blue-deep); font-weight:700; font-size:0.9rem; margin-top:auto; }
.link-arrow::after{ content:" →"; }

/* ---------- Detail sections ---------- */
.detail-grid{ display:grid; grid-template-columns: 1.3fr 0.7fr; gap: 50px; align-items:start; }
.detail-grid-reverse{ grid-template-columns: 0.7fr 1.3fr; }
.detail-grid-reverse .detail-panel{ order: -1; }
.detail-list{ list-style:none; padding:0; margin: 24px 0 0; display:flex; flex-direction:column; gap:18px; }
.detail-list li{ display:flex; flex-direction:column; gap:2px; border-left: 2px solid var(--line); padding-left:16px; }
.detail-list strong{ font-family: var(--display); font-size:1.02rem; color: var(--ink-dark); }
.detail-list span{ font-size:0.92rem; color: var(--text-soft); }

.detail-dark{ background: var(--ink-dark); }
.detail-dark h2{ color: #fff; }
.detail-dark p{ color: #B9C0CC; }
.detail-dark .detail-list li{ border-left-color:#2E3A4C; }
.detail-dark .detail-list strong{ color:#fff; }
.detail-dark .detail-list span{ color:#9CA6B4; }

.detail-panel{
  background: var(--ink-panel); color:#fff; padding:30px; border-radius:6px;
  position: sticky; top: 100px;
}
.detail-panel h3{ color:#fff; font-size:1.15rem; }
.detail-panel p{ color:#B9C0CC; font-size:0.92rem; }
.detail-panel-light{ background: var(--white); border:1px solid var(--line); }
.detail-panel-light h3{ color: var(--ink-dark); }
.detail-panel-light p{ color: var(--text-soft); }

/* ---------- Why ---------- */
.why{ background: var(--paper-alt); }
.why-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 26px; }
.why-card{ background: var(--white); border:1px solid var(--line); border-radius:6px; padding:26px; }
.why-num{ font-family: var(--display); font-size:1.3rem; color: var(--amber); font-weight:700; }
.why-card h3{ font-size:1.05rem; margin-top:10px; }
.why-card p{ font-size:0.9rem; }

/* ---------- Contact ---------- */
.contact{ background: var(--paper); }
.contact-inner{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; }
.contact-details{ margin-top: 24px; display:grid; gap:16px; }
.contact-details dt{ font-weight:700; color: var(--ink-dark); font-size:0.8rem; margin-bottom:2px; }
.contact-details dd{ margin:0; color: var(--text-soft); }
.contact-form{
  background: var(--white); border:1px solid var(--line); border-radius:6px; padding: 32px;
}
.form-row{ margin-bottom:18px; display:flex; flex-direction:column; gap:6px; }
.form-row label{ font-weight:600; font-size:0.88rem; color: var(--ink-dark); }
.form-row input, .form-row select, .form-row textarea{
  font-family: var(--sans); font-size:0.96rem; padding:11px 13px; border:1px solid var(--line);
  border-radius: var(--radius); background: var(--paper); color: var(--text);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  outline: 2px solid var(--blue); outline-offset:1px;
}
.form-note{ font-size:0.78rem; color: var(--text-soft); margin: 14px 0 0; max-width: none; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--ink-dark); color: #C9CFD6; padding: 44px 0 30px; }
.footer-inner{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; align-items:flex-start; }
.footer-brand{ color:#fff; font-size:1.05rem; }
.footer-inner p{ color:#9FA9B3; font-size:0.9rem; margin-top:6px; }
.site-footer nav{ display:flex; gap:22px; flex-wrap:wrap; }
.site-footer nav a{ color:#C9CFD6; text-decoration:none; font-size:0.92rem; }
.site-footer nav a:hover{ color: var(--amber); }
.footer-legal{ width:100%; border-top:1px solid #2E3A4C; padding-top:20px; margin-top:8px; font-size:0.78rem; color:#7C879593; max-width:none; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero-grid, .contact-inner{ grid-template-columns: 1fr; }
  .hero-art{ order:-1; max-width: 420px; }
  .overview-grid, .why-grid{ grid-template-columns: repeat(2,1fr); }
  .detail-grid, .detail-grid-reverse{ grid-template-columns: 1fr; }
  .detail-grid-reverse .detail-panel{ order: 0; }
  .detail-panel{ position: static; }
}
@media (max-width: 760px){
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }
  .mobile-menu{
    display:none; flex-direction:column; padding: 14px 28px 20px; gap:4px;
    border-top:1px solid var(--line); background: var(--paper);
  }
  .mobile-menu.is-open{ display:flex; }
  .mobile-menu a{ padding:10px 0; text-decoration:none; color: var(--ink-dark); font-weight:600; border-bottom:1px solid var(--line); }
  .overview-grid, .why-grid{ grid-template-columns: 1fr; }
  section{ padding: 56px 0; }
}