:root { --ink:#162724; --muted:#66736f; --brand:#087f71; --brand-dark:#05685d; --mint:#e3f3ef; --cream:#f5f8f7; --white:#fff; --line:#dce8e5; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { width:min(1180px,calc(100% - 40px)); height:88px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:12px; font-size:20px; font-weight:750; }
.brand img { width:42px; height:42px; border-radius:12px; }
.brand strong,.header-link { color:var(--brand); }
.header-link { font-size:14px; font-weight:750; }
.hero { width:min(1180px,calc(100% - 40px)); min-height:650px; margin:0 auto; padding:70px 0 110px; display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:90px; }
.eyebrow { margin:0 0 16px; color:var(--brand); font-size:12px; font-weight:850; letter-spacing:.14em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(52px,7vw,88px); line-height:.98; letter-spacing:-.055em; }
h1 span { color:var(--brand); }
.intro { max-width:620px; margin:28px 0 0; color:var(--muted); font-size:19px; line-height:1.7; }
.actions { margin-top:34px; display:flex; gap:12px; flex-wrap:wrap; }
.button { padding:15px 22px; border-radius:13px; font-size:14px; font-weight:800; }
.button.primary { color:var(--white); background:var(--brand); box-shadow:0 15px 35px rgba(8,127,113,.22); }
.button.primary:hover { background:var(--brand-dark); }
.button.secondary { border:1px solid var(--line); background:rgba(255,255,255,.72); }
.note { margin:18px 0 0; color:var(--muted); font-size:12px; }
.hero-card { padding:28px; border:1px solid rgba(255,255,255,.8); border-radius:30px; background:rgba(255,255,255,.86); box-shadow:0 35px 90px rgba(31,70,62,.14); backdrop-filter:blur(16px); }
.card-head { display:flex; align-items:center; gap:14px; }
.card-head img { width:54px; height:54px; border-radius:16px; }
.card-head div,.reminder div { display:grid; gap:3px; }
.card-head span,.reminder span { color:var(--muted); font-size:13px; }
.status-grid { margin-top:28px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.status-grid article { min-height:120px; padding:20px; display:grid; align-content:space-between; border-radius:20px; background:var(--cream); }
.status-grid b { color:var(--brand); font-size:32px; }
.status-grid span { color:var(--muted); font-size:13px; }
.reminder { margin-top:12px; padding:17px; display:flex; align-items:center; gap:13px; border-radius:18px; background:var(--mint); }
.reminder-icon { width:38px; height:38px; display:grid; place-items:center; color:var(--white)!important; background:var(--brand); border-radius:50%; font-weight:900; }
.areas { padding:110px max(20px,calc((100vw - 1180px)/2)); background:var(--white); }
.areas h2 { max-width:720px; margin:0; font-size:clamp(36px,5vw,58px); line-height:1.08; letter-spacing:-.04em; }
.area-grid { margin-top:56px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.area-grid article { padding:26px; border:1px solid var(--line); border-radius:20px; }
.area-grid span { color:var(--brand); font-size:12px; font-weight:850; }
.area-grid h3 { margin:32px 0 10px; font-size:18px; }
.area-grid p { margin:0; color:var(--muted); font-size:14px; line-height:1.6; }
footer { width:min(1180px,calc(100% - 40px)); min-height:110px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; color:var(--muted); font-size:13px; }
footer nav { display:flex; gap:22px; }
.legal-main { width:min(860px,calc(100% - 40px)); margin:0 auto; padding:55px 0 100px; }
.legal-main h1 { font-size:clamp(38px,6vw,64px); }
.legal-lead { margin:18px 0 36px; color:var(--muted); font-size:18px; line-height:1.65; }
.legal-card { margin:0 0 16px; padding:24px; border:1px solid var(--line); border-radius:20px; background:var(--white); }
.legal-card h2 { margin:0 0 12px; font-size:20px; }
.legal-card p,.legal-card li { color:var(--muted); line-height:1.7; }
.legal-card a { color:var(--brand); font-weight:750; }
.legal-card .button { display:inline-block; color:var(--white); }
.legal-meta { margin-top:30px; color:var(--muted); font-size:13px; }
@media (max-width:900px) { .hero { grid-template-columns:1fr; gap:55px; padding-top:45px; } .area-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .site-header { height:74px; } .hero { padding-bottom:80px; } .hero-card { padding:18px; border-radius:24px; } .area-grid { grid-template-columns:1fr; } footer { padding:28px 0; align-items:flex-start; flex-direction:column; } }