:root{
  --bg: #f7f7f8;
  --card: #ffffff;
  --ink: #161616;
  --muted:#6b7280;
  --line:#e5e7eb;
  --brand:#0ea5e9;
  --brand-ink:#0b6b8e;
  --radius:14px;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif; color:var(--ink); background:var(--bg); line-height:1.6}
a{color:var(--brand-ink); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px; margin:0 auto; padding:0 16px}

.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; background:#fff; border:2px solid var(--brand); padding:6px 10px; border-radius:8px}

.site-header{position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--line)}
.header-inner{display:flex; align-items:center; justify-content:space-between; min-height:56px}
.brand{font-weight:800; text-transform:lowercase; letter-spacing:.2px; padding:8px 0}
.top-nav a{margin-left:14px; color:var(--muted)}
.top-nav a:hover{color:var(--ink)}

.hero{padding:32px 0 18px; background:linear-gradient(180deg,#fff, #fafafa)}
.hero h1{margin:0 0 6px; font-size:clamp(30px,3.8vw,44px); text-transform:lowercase}
.hero .lead{margin:0 0 10px; color:var(--muted)}
.note{background:#fffbeb; border:1px solid #fde68a; padding:10px 12px; border-radius:12px; color:#7c6f37; margin:8px 0 14px}

.search-wrap{margin-top:6px}
.search{width:100%; max-width:560px; padding:12px 14px; border:1px solid var(--line); border-radius:999px; background:#fff; outline:none}
.search:focus{border-color:#bae6fd; box-shadow:0 0 0 4px #e0f2fe}

.country-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px 14px; padding:18px 0 26px}
.country-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; display:flex; flex-direction:column; min-height:160px}
.country-card h2{margin:0 0 8px; font-size:18px; font-weight:750; text-transform:lowercase}
.country-card .desc{margin:0 0 12px; color:var(--muted)}
.btn{display:inline-block; align-self:flex-start; padding:10px 14px; border:1px solid #06b6d4; border-radius:999px; background:#ecfeff; color:#0e7490; font-weight:600; text-decoration:none}
.btn:hover{background:#e0f2fe}
.btn:focus{outline:2px solid #bae6fd; outline-offset:2px}

.site-footer{border-top:1px solid var(--line); background:#fff; margin-top:12px}
.footer-inner{display:flex; align-items:center; justify-content:space-between; min-height:64px; color:var(--muted); font-size:14px; flex-wrap:wrap; gap:10px}

.back-to-top{position:fixed; right:14px; bottom:14px; padding:10px 12px; border-radius:999px; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .2s ease}
.back-to-top.show{opacity:1; pointer-events:auto}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}