:root{--teal:#005461;--deep:#00434f;--ink:#152f3a;--muted:#536873;--line:#d5e0e5;--paper:#f4f7f9;--card:#fff;--accent:#b88b43;
  --serif:Merriweather,Georgia,"Times New Roman",serif;--sans:Outfit,"Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.55}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--paper)}
.wrap{width:100%;max-width:1140px;margin:0 auto;padding:0 32px}
a{color:inherit}
a:focus-visible{outline:3px solid #80bdcf;outline-offset:3px;border-radius:4px}

.top{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;max-width:1140px;margin:0 auto;padding:26px 32px}
.brand img{display:block;height:38px;width:auto}
.back{font-size:15px;color:var(--deep);text-decoration:none;letter-spacing:.04em}
.back:hover{text-decoration:underline}

.hero{color:#fff;background:radial-gradient(circle at 88% -10%,rgba(255,255,255,.16) 0,transparent 42%),linear-gradient(135deg,var(--teal),var(--deep));padding:72px 0 104px}
.eyebrow{margin:0 0 18px;font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#acd7e4}
h1{margin:0 0 18px;max-width:17em;font-family:var(--serif);font-weight:700;font-size:clamp(30px,4.4vw,50px);line-height:1.15;letter-spacing:-.01em;text-wrap:balance}
.lead{margin:0 0 28px;max-width:34em;font-size:clamp(17px,1.6vw,20px);font-weight:300;color:#dcebef}
.privacy{display:inline-flex;align-items:center;gap:10px;margin:0;padding:9px 16px;border:1px solid rgba(255,255,255,.28);border-radius:99px;font-size:14px;color:#eaf4f6}
.dot{flex:none;width:8px;height:8px;border-radius:50%;background:#8fdcb4}

main.wrap{flex:1;margin-top:-64px;padding-bottom:64px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px;color:#fff}
h2{margin:0;font-family:var(--serif);font-weight:300;font-size:22px}
.count{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#c2d8e1}

.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.grid li{display:flex}
.card{position:relative;flex:1;display:flex;flex-direction:column;padding:30px 28px 24px;background:var(--card);border:1px solid var(--line);border-radius:10px;text-decoration:none;box-shadow:0 14px 40px rgba(0,67,79,.08);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;overflow:hidden}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.card:hover,.card:focus-visible{transform:translateY(-4px);border-color:#9fc3cc;box-shadow:0 22px 54px rgba(0,67,79,.16)}
.card:hover::before,.card:focus-visible::before{transform:scaleX(1)}
.num{font-family:var(--serif);font-size:15px;color:var(--accent);letter-spacing:.08em;margin-bottom:14px}
h3{margin:0 0 10px;font-family:var(--serif);font-weight:700;font-size:23px;line-height:1.25;color:var(--deep)}
.card p{margin:0 0 24px;font-size:16px;font-weight:300;color:var(--muted)}
.foot{margin-top:auto;padding-top:16px;border-top:1px solid #e4ecef;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px}
.go{font-weight:600;color:var(--teal)}
.go span{display:inline-block;transition:transform .18s ease}
.card:hover .go span{transform:translateX(4px)}
time{color:#7a8c95;font-size:13px;white-space:nowrap}

.empty{padding:40px;background:var(--card);border:1px dashed var(--line);border-radius:10px;color:var(--muted)}
.note{margin:36px 0 0;font-size:14px;color:var(--muted)}

footer{border-top:1px solid var(--line);background:#fff;font-size:14px;color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-top:22px;padding-bottom:22px}
footer nav{display:flex;gap:22px;flex-wrap:wrap}
footer a{color:var(--deep);text-decoration:none;text-transform:uppercase;letter-spacing:.08em;font-size:13px}
footer a:hover{text-decoration:underline}

@media(max-width:640px){
  .wrap,.top{padding-left:18px;padding-right:18px}
  .brand img{height:30px}
  .hero{padding:48px 0 88px}
  .privacy{border-radius:10px}
  .grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
