/* Base (light green theme) */
:root{--bg:#ffffff;--card:#ffffff;--muted:#6b7280;--text:#0b1220;--brand:#16a34a;--brand-700:#15803d;--ok:#16a34a;--warn:#f59e0b;--danger:#ef4444;--border:#e5e7eb;--shadow:0 6px 20px rgba(0,0,0,.06)}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:linear-gradient(180deg,#f8fafc 0%,#ffffff 100%);color:var(--text);line-height:1.6}
.container{width:min(1100px,92%);margin:0 auto}

/* Header */
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);transition:opacity .35s ease, transform .35s ease}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.logo-circle{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;box-shadow:var(--shadow)}
.brand-name{letter-spacing:.5px}
.nav a{color:#111827;text-decoration:none;margin-left:18px}
.nav a:hover{color:var(--text)}

/* Hero */
.hero{padding:72px 0 56px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#ecfdf5 0%,#ffffff 100%);transition:opacity .35s ease, transform .35s ease}
.hero-inner{max-width:760px}
.hero h1{margin:0 0 12px;font-size:40px;line-height:1.15}
.hero p{margin:0 0 20px;color:#374151}

/* Sections */
.section{padding:56px 0;transition:opacity .35s ease, transform .35s ease}
.section-alt{background:linear-gradient(180deg,#f0fdf4 0%,#ffffff 100%)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.step{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:var(--shadow)}
.step-num{width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;margin-bottom:6px;box-shadow:var(--shadow)}

/* Survey */
.survey .card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.question{min-height:140px}
.controls{display:flex;align-items:center;gap:12px}
.spacer{flex:1}
.progress{height:12px;background:#eef2ff;border-radius:999px;margin-bottom:16px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow)}
.progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--brand-700));transition:width .45s cubic-bezier(.22,.61,.36,1);will-change:width}

/* Inputs */
input[type="text"],input[type="email"],input[type="date"],textarea,select{width:100%;background:#ffffff;color:#0b1220;border:1px solid var(--border);border-radius:12px;padding:12px 14px;outline:none;box-shadow:var(--shadow)}
textarea{min-height:96px;resize:vertical}
.options{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:8px}
.option{border:1px solid var(--border);background:#ffffff;border-radius:12px;padding:10px 12px;cursor:pointer;color:#0b1220;text-align:center;box-shadow:var(--shadow)}
.option.active{outline:2px solid var(--brand);background:#f0fdf4}

/* Hints and messages */
.field-hint{color:#374151;margin-top:8px}
.success-box{background:#f0fdf4;border:1px solid #86efac;color:#065f46;border-radius:12px;padding:12px 14px;margin-top:10px}
.error-box{background:#fff7ed;border:1px solid #fdba74;color:#9a3412;border-radius:12px;padding:12px 14px;margin-top:10px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:12px;border:1px solid transparent;cursor:pointer;font-weight:600;text-decoration:none}
.btn-primary{background:var(--brand);color:#fff;box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--brand-700)}
.btn-secondary{background:#ffffff;color:#0b1220;border-color:var(--border);box-shadow:var(--shadow)}
.btn-secondary:hover{border-color:#3a4360}
.btn-ghost{background:transparent;color:var(--muted)}

/* Footer */
.site-footer{border-top:1px solid var(--border);padding:18px 0;color:#374151;background:#ffffff;transition:opacity .35s ease, transform .35s ease}
.footer-inner{display:flex;align-items:center;justify-content:space-between}
.footer-links a{color:#374151;text-decoration:none;margin-left:16px}
.footer-links a:hover{color:var(--text)}

/* Responsive */
@media (max-width:720px){
  .hero h1{font-size:28px}
  .nav{display:none}
}

/* Survey-only mode */
body.survey-mode .site-header,
body.survey-mode .hero,
body.survey-mode #about,
body.survey-mode #how,
body.survey-mode .site-footer{opacity:0;transform:translateY(-8px);pointer-events:none}
body.survey-hidden .site-header,
body.survey-hidden .hero,
body.survey-hidden #about,
body.survey-hidden #how,
body.survey-hidden .site-footer{display:none}
body.survey-mode #survey{padding-top:24px}

/* Question fade */
.question{transition:opacity .25s ease}
.question.fade-in{opacity:0}
.question.fade-in.active{opacity:1}

/* Overlay survey */
.overlay{position:fixed;inset:0;background:rgba(17,24,39,.4);backdrop-filter:blur(6px);display:none;opacity:0;transition:opacity .35s ease;z-index:40}
.overlay.active{display:block;opacity:1}
.overlay-inner{position:absolute;top:72px;left:0;right:0;bottom:16px;overflow:auto}
.overlay-top{position:absolute;top:16px;left:0;right:0;display:flex;justify-content:flex-end;padding:0 max(12px,calc((100vw-1100px)/2));pointer-events:none}
.overlay-top .btn{pointer-events:auto}
.overlay .survey{width:min(1100px,92%);}
.overlay .survey .card{box-shadow:var(--shadow)}