:root{
  --bg:#ffffff;
  --paper:#fbfbf8;
  --card:#ffffff;
  --ink:#101828;
  --muted:#5f6c7b;
  --line:#e7e7e2;
  --accent:#16324f;
  --accent-2:#d8b36a;
  --soft:#f3f0ea;
  --shadow:0 10px 30px rgba(16,24,40,.08);
  --radius:24px;
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.container{width:min(var(--max), calc(100% - 32px)); margin-inline:auto}
.topbar{
  position:sticky; top:0; z-index:40; background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:78px}
.brand{font-weight:900; letter-spacing:.02em; color:var(--ink); font-size:1.16rem}
.brand span{color:var(--accent)}
.nav{display:flex; gap:18px; flex-wrap:wrap; align-items:center}
.nav a{font-weight:700; color:#1f2937}
.nav a.active{color:var(--accent)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border-radius:999px; padding:15px 24px; font-weight:800; border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn-primary{background:var(--accent); color:#fff; box-shadow:var(--shadow)}
.btn-primary:hover{background:#0f2741}
.btn-secondary{background:#fff; color:var(--ink); border-color:var(--line)}
.btn-secondary:hover{background:var(--paper)}
.hero{
  position:relative; min-height:82vh; display:grid; align-items:center; overflow:hidden; background:#0d1014;
}
.hero video, .hero .hero-fallback{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.hero::after{
  content:""; position:absolute; inset:0; 
  background:linear-gradient(90deg, rgba(8,12,17,.72) 0%, rgba(8,12,17,.44) 45%, rgba(8,12,17,.35) 100%);
}
.hero-content{position:relative; z-index:1; color:#fff; padding:86px 0 72px}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; padding:8px 14px; border-radius:999px;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.2); font-weight:700; font-size:.94rem;
}
.hero h1{font-size:clamp(2.4rem, 5vw, 4.8rem); line-height:1.03; margin:18px 0 16px; letter-spacing:-.03em; max-width:900px}
.hero p{font-size:clamp(1rem, 1.6vw, 1.22rem); max-width:780px; color:rgba(255,255,255,.9); margin:0 0 26px}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px}
.hero .btn-secondary{background:rgba(255,255,255,.92); border-color:transparent}
.hero-points{
  margin-top:28px; display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:14px; max-width:880px;
}
.hero-point{
  padding:14px 16px; border-radius:18px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14);
  font-weight:700;
}
.section{padding:72px 0}
.section-alt{background:linear-gradient(180deg, #fff 0%, #faf8f4 100%)}
.section h2{font-size:clamp(1.7rem, 3vw, 2.8rem); line-height:1.1; margin:0 0 18px; letter-spacing:-.02em}
.lead{font-size:1.1rem; color:var(--muted); max-width:900px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:26px;
}
.card h3{margin:0 0 12px; font-size:1.25rem}
.card p{margin:0; color:var(--muted)}
.keyword-band{
  background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.keyword-list{display:flex; flex-wrap:wrap; gap:12px; padding:18px 0}
.keyword{padding:10px 14px; border:1px solid var(--line); border-radius:999px; background:#fff; font-weight:700; color:#243040}
.city-slider{
  overflow:hidden; position:relative; margin-top:30px;
}
.city-track{display:flex; gap:18px; width:max-content; animation:marquee 42s linear infinite}
.city-slider:hover .city-track{animation-play-state:paused}
.city-item{width:138px; flex:0 0 auto; text-align:center}
.city-item img{
  width:112px; height:112px; border-radius:50%; object-fit:cover; margin:0 auto 10px; border:4px solid #fff; box-shadow:var(--shadow);
}
.city-item span{font-weight:800}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.split{display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:start}
.feature-list{display:grid; gap:14px; margin-top:18px}
.feature{
  padding:18px 20px; border:1px solid var(--line); border-radius:18px; background:#fff;
}
.country-links, .city-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:26px;
}
.country-card, .city-link{
  display:block; padding:22px; border:1px solid var(--line); border-radius:22px; background:#fff; color:var(--ink);
  box-shadow:var(--shadow); min-height:100%;
}
.country-card:hover, .city-link:hover{text-decoration:none; transform:translateY(-1px)}
.country-card h3, .city-link strong{display:block; margin-bottom:8px}
.copy-columns{
  display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:28px;
}
.copy-box{
  background:#fff; border:1px solid var(--line); border-radius:24px; padding:24px; box-shadow:var(--shadow);
}
.copy-box h3{margin-top:0}
.faq{display:grid; gap:16px; margin-top:26px}
details{
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:18px 20px; box-shadow:var(--shadow);
}
summary{font-weight:800; cursor:pointer}
.summary-body{padding-top:10px; color:var(--muted)}
.cta-banner{
  padding:34px; border-radius:30px; background:linear-gradient(135deg, #fff 0%, #f5efe2 100%);
  border:1px solid var(--line); box-shadow:var(--shadow); display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap;
}
.footer{
  background:#121821; color:#d2d9e4; padding:42px 0; margin-top:24px;
}
.footer a{color:#fff}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:24px}
.badge{
  display:inline-block; padding:7px 12px; border-radius:999px; background:#fff4db; color:#7a5717; font-weight:800; font-size:.88rem;
}
.breadcrumbs{font-size:.95rem; color:var(--muted); margin-bottom:18px}
.breadcrumbs a{color:var(--muted)}
.stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:24px}
.stat{
  background:#fff; border:1px solid var(--line); border-radius:22px; padding:22px; box-shadow:var(--shadow)
}
.stat strong{display:block; font-size:1.85rem; line-height:1; margin-bottom:8px}
.text-block{max-width:960px}
.note{font-size:.95rem; color:var(--muted)}
@media (max-width: 1080px){
  .grid-3,.grid-4,.country-links,.city-grid,.copy-columns,.footer-grid,.stat-row{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .nav{display:none}
  .grid-3,.grid-4,.country-links,.city-grid,.copy-columns,.footer-grid,.stat-row{grid-template-columns:1fr}
  .topbar-inner{min-height:72px}
  .hero{min-height:74vh}
}