/* ArtProtein — minimal, modern, responsive */
:root{
  --primary: #0a3d62;
  --accent: #00a8e8;
  --ink: #1a202c;
  --bg: #f6f8fb;
  --card: #ffffff;
}
*{box-sizing:border-box}
body{
  margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--ink); background:var(--bg);
}
/* Header */
.site-header{
  position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between;
  padding:10px 20px; background:var(--primary); color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.logo{ height:48px }
.main-nav a{
  color:#fff; text-decoration:none; margin:0 12px; font-weight:600; opacity:.95;
}
.main-nav a:hover{ opacity:1; text-decoration:underline }
.nav-toggle{ display:none; background:none; color:#fff; border:1px solid rgba(255,255,255,.4); padding:6px 10px; border-radius:8px }
/* Hero */
.hero{ padding:40px 20px; }
.hero-content{ max-width:1200px; margin:0 auto; display:grid; gap:28px; grid-template-columns:1.1fr .9fr; align-items:center; }
.hero h1{ font-size:40px; margin:.2em 0 }
.hero p{ font-size:18px; line-height:1.6 }
.hero img{ width:100%; height:auto; border-radius:16px; box-shadow:0 8px 24px rgba(10,61,98,.12) }
.btn{ display:inline-block; padding:12px 18px; border-radius:999px; font-weight:700; text-decoration:none; margin-right:12px; border:2px solid var(--primary) }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:#00233a }
.btn.ghost{ background:transparent; color:#fff; border-color:#fff }
/* Sections */
.container{ max-width:1100px; margin:32px auto; padding:0 20px }
.pillars .grid{ max-width:1100px; margin:24px auto; padding:0 20px; display:grid; gap:20px; grid-template-columns:repeat(4,1fr) }
.card{ background:var(--card); border-radius:16px; padding:18px; box-shadow:0 4px 16px rgba(0,0,0,.06) }
.card h3{ margin-top:0 }
.figure{ width:100%; height:auto; border-radius:14px; box-shadow:0 6px 18px rgba(10,61,98,.10) }
.split{ display:grid; gap:24px; grid-template-columns:1.1fr .9fr; align-items:start }
.two-col{ display:grid; gap:24px; grid-template-columns:1.1fr .9fr; align-items:start }
.check li::marker{ content:"✓ " }
.dash li::marker{ content:"— " }
/* Footer */
.site-footer{ text-align:center; padding:18px; background:#0a3d62; color:#fff; margin-top:40px }
/* Contact form */
.contact-form .row{ display:grid; gap:16px; grid-template-columns:1fr 1fr }
input, textarea{ width:100%; padding:12px 14px; border-radius:12px; border:1px solid #ccd6e0; background:#fff }
button{ cursor:pointer }
.form-note{ font-size:12px; color:#4a5568 }
/* Responsive */
@media (max-width: 980px){
  .hero-content, .split, .two-col, .pillars .grid{ grid-template-columns:1fr }
  .pillars .grid{ grid-template-columns:1fr 1fr }
}
@media (max-width: 640px){
  .pillars .grid{ grid-template-columns:1fr }
  .main-nav{ display:none; position:absolute; top:64px; right:12px; background:var(--primary); padding:10px 14px; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.15) }
  .main-nav a{ display:block; margin:8px 6px }
  .nav-toggle{ display:block }
  .hero h1{ font-size:32px }
}