:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.08);
  --shadow-md: 0 6px 24px rgba(0,0,0,.12);
  --font-display: 'Space Grotesk', 'Arial', sans-serif;
  --font-body: 'Inter', 'Arial', sans-serif;
}

:root, [data-theme="light"] {
  --color-bg: #f7f6f2;
  --color-surface: #f9f8f5;
  --color-surface-2: #ffffff;
  --color-border: #d7d2c9;
  --color-text: #1e1d1a;
  --color-muted: #5f5b53;
  --color-primary: #01696f;
  --color-primary-hover: #0c4e54;
  --color-accent: #0b6ef3;
  --color-hero: linear-gradient(135deg, #0f172a 0%, #0d5f63 45%, #dff2f2 100%);
}

[data-theme="dark"] {
  --color-bg: #141311;
  --color-surface: #1b1a18;
  --color-surface-2: #22211e;
  --color-border: #393632;
  --color-text: #f3efe8;
  --color-muted: #bdb6ab;
  --color-primary: #58aeb3;
  --color-primary-hover: #7bc2c7;
  --color-accent: #82b3ff;
  --color-hero: linear-gradient(135deg, #050816 0%, #0c3c42 50%, #16212c 100%);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:1.7;
  color:var(--color-text);
  background:var(--color-bg);
}
a{color:var(--color-accent);text-decoration:none}
a:hover{text-decoration:underline}
img,svg{display:block;max-width:100%;height:auto}
.skip-link{position:absolute;left:-9999px;top:auto}.skip-link:focus{left:1rem;top:1rem;background:#fff;color:#000;padding:.75rem 1rem;z-index:1000}
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--color-surface) 92%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-border)}
.topbar{max-width:1200px;margin:0 auto;padding:var(--space-4);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.brand{display:flex;align-items:center;gap:.9rem;color:var(--color-text);font-weight:700}
.brand svg{width:42px;height:42px;color:var(--color-primary)}
.brand-name{font-family:var(--font-display);font-size:var(--text-lg);letter-spacing:-.03em}
.nav-links{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.nav-links a{padding:.55rem .8rem;border-radius:999px;color:var(--color-text)}
.nav-links a.active,.nav-links a:hover{background:var(--color-primary);color:#fff;text-decoration:none}
.theme-toggle{min-width:44px;min-height:44px;border:1px solid var(--color-border);border-radius:999px;background:var(--color-surface-2);color:var(--color-text)}
.container{max-width:1200px;margin:0 auto;padding:0 var(--space-4)}
.hero{background:var(--color-hero);color:white;padding:clamp(4rem,8vw,8rem) 0}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-8);align-items:center}
.kicker{display:inline-block;margin-bottom:var(--space-4);padding:.45rem .8rem;border:1px solid rgba(255,255,255,.25);border-radius:999px;background:rgba(255,255,255,.08);font-size:var(--text-sm)}
.hero h1{font-family:var(--font-display);font-size:clamp(2.7rem,7vw,5.8rem);line-height:1.02;letter-spacing:-.05em;max-width:10ch;margin-bottom:var(--space-4)}
.hero p{max-width:62ch;margin-bottom:var(--space-6);color:rgba(255,255,255,.9)}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.9rem 1.2rem;border-radius:999px;font-weight:700;border:1px solid transparent}
.btn-primary{background:#fff;color:#0f172a}.btn-primary:hover{text-decoration:none;background:#eaf6f6}
.btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn-secondary:hover{text-decoration:none;background:rgba(255,255,255,.08)}
.hero-card,.card{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-md)}
.hero-card{padding:var(--space-6);color:var(--color-text)}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4);margin-top:var(--space-4)}
.stat{padding:var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg)}
.stat strong{display:block;font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-primary)}
.section{padding:clamp(3rem,6vw,6rem) 0}
.section-title{font-family:var(--font-display);font-size:var(--text-2xl);letter-spacing:-.04em;margin-bottom:var(--space-4)}
.section-intro{max-width:70ch;color:var(--color-muted);margin-bottom:var(--space-8)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6)}
.card{padding:var(--space-6);height:100%}
.card h3{font-family:var(--font-display);font-size:var(--text-lg);margin-bottom:.75rem}
.icon-badge{width:52px;height:52px;border-radius:14px;background:color-mix(in srgb, var(--color-primary) 12%, var(--color-surface-2));display:grid;place-items:center;margin-bottom:1rem;color:var(--color-primary)}
.feature-list, .ordered-list{padding-left:1.2rem}
.feature-list li,.ordered-list li{margin-bottom:.65rem}
.info-table{overflow-x:auto}
.info-table table{width:100%;border-collapse:collapse;background:var(--color-surface-2)}
.info-table caption{caption-side:top;text-align:left;font-weight:700;margin-bottom:.8rem;color:var(--color-muted)}
.info-table th,.info-table td{border:1px solid var(--color-border);padding:1rem;vertical-align:top;text-align:left}
.info-table th{background:color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));}
.quote{padding:var(--space-6);border-left:4px solid var(--color-primary);background:var(--color-surface);border-radius:0 var(--radius-lg) var(--radius-lg) 0;color:var(--color-muted)}
.banner{padding:var(--space-6);border-radius:var(--radius-xl);background:linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)) 0%, var(--color-surface-2) 100%);border:1px solid var(--color-border)}
.timeline{display:grid;gap:var(--space-4)}
.timeline-item{padding:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface-2)}
.reference-list p{margin-bottom:1rem}
.site-footer{padding:var(--space-8) 0;background:#0d1117;color:#e5edf5;margin-top:var(--space-12)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--space-6)}
.footer-grid a{color:#b7dcff}
.small{font-size:var(--text-sm)}
.center{text-align:center}
.right{text-align:right}
.indent{margin-left:2rem}
.thumb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.thumb{border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface-2)}
.thumb svg{width:100%;height:170px}
.contact-box{padding:var(--space-6);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl)}
@media (max-width: 900px){
  .hero-grid,.grid-3,.grid-2,.footer-grid,.thumb-grid{grid-template-columns:1fr}
  .nav-links{display:none}
}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}