:root{
  --bg:#f6f9fc;
  --surface:#ffffff;
  --surface-2:#f1f6fb;
  --text:#16273b;
  --muted:#60738e;
  --line:#d8e2ee;
  --primary:#0d5bd7;
  --primary-dark:#0a3d8f;
  --accent:#13b8b1;
  --hero:#081427;
  --gold:#d4a83e;
  --radius-xl:30px;
  --radius:22px;
  --shadow:0 18px 48px rgba(12,25,53,.12);
  --max:1280px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Arial,Helvetica,sans-serif;
  background:var(--bg);
  color:var(--text);
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.container{max-width:var(--max);margin:0 auto;padding:0 22px}
.header{
  position:sticky;top:0;z-index:50;
  background:rgba(8,20,39,.88);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{
  min-height:80px;display:flex;justify-content:space-between;align-items:center;gap:20px
}
.brand{
  display:flex;align-items:center;gap:14px;color:#fff
}
.brand-badge{
  width:52px;height:52px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;
  background:linear-gradient(135deg,#21d4fd 0%,#2563eb 100%);
  box-shadow:0 12px 26px rgba(37,99,235,.28);
}
.brand small{display:block;color:#c8d7ef}
.nav nav{display:flex;gap:18px;flex-wrap:wrap}
.nav nav a{font-weight:800;color:#eef4ff}
.hero{
  background:
    radial-gradient(circle at 18% 0%, rgba(33,212,253,.18), transparent 28%),
    radial-gradient(circle at 85% 0%, rgba(37,99,235,.2), transparent 30%),
    linear-gradient(180deg,#081427 0%,#0c1d35 100%);
  color:#fff;
  padding:86px 0 72px;
}
.hero-grid{
  display:grid;grid-template-columns:1.08fr .92fr;gap:28px;align-items:center
}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.14);
  font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
.hero h1{
  margin:18px 0 14px;
  font-size:clamp(40px,5vw,72px);
  line-height:1.02;
  letter-spacing:-0.03em;
}
.hero p{
  margin:0;
  color:#dce8fb;
  font-size:18px;
  line-height:1.85;
  max-width:780px;
}
.hero-panel{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.hero-panel-inner{padding:26px}
.hero-stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}
.hero-stat{
  padding:18px;border-radius:20px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)
}
.hero-stat .label{font-size:13px;color:#d6e6fb;font-weight:700}
.hero-stat .value{font-size:32px;font-weight:900;margin-top:6px}
.search-shell{
  margin-top:28px;background:#fff;border-radius:24px;padding:14px;box-shadow:var(--shadow)
}
.search-grid{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px}
.search-grid input,.search-grid select,.toolbar input,.toolbar select{
  width:100%;padding:14px 14px;border-radius:16px;border:1px solid var(--line);font:inherit;background:#fff
}
button,.btn{
  appearance:none;border:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 20px;border-radius:16px;font-weight:900;font-size:15px;
}
.btn-primary,button.primary{background:linear-gradient(135deg,#21d4fd 0%,#2563eb 100%);color:#071322}
.btn-dark{background:var(--primary-dark);color:#fff}
.btn-light{background:#ffffff12;color:#fff;border:1px solid #ffffff1a}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.section{padding:74px 0}
.section.alt{background:#fff}
.section-head{
  display:flex;justify-content:space-between;gap:20px;align-items:end;flex-wrap:wrap;margin-bottom:24px
}
.section h2,.page-hero h1{
  margin:12px 0 8px;font-size:clamp(30px,4vw,46px);letter-spacing:-0.02em
}
.lead,.muted,.section p,.page-hero p{
  color:var(--muted);line-height:1.85
}
.surface,.panel,.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.layout{display:grid;grid-template-columns:1.18fr .82fr;gap:24px}
.map-wrap{overflow:hidden}
#map{
  min-height:650px;
  width:100%;
}
.cards{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px
}
.card{overflow:hidden}
.card .content{padding:18px}
.card h3{margin:0 0 8px;font-size:22px;line-height:1.2}
.card p{margin:0}
.cover{
  height:240px;width:100%;object-fit:cover;background:linear-gradient(135deg,#c7d7ea,#eaf1f9)
}
.price{
  font-size:30px;font-weight:900;color:var(--primary-dark);line-height:1
}
.price small{
  display:block;font-size:12px;color:var(--muted);font-weight:700;margin-top:6px
}
.row{
  display:flex;justify-content:space-between;gap:12px;align-items:flex-start
}
.badges,.meta,.toolbar,.rating-line,.feature-list{
  display:flex;gap:10px;flex-wrap:wrap
}
.badge,.meta span{
  display:inline-flex;align-items:center;
  padding:7px 10px;border-radius:999px;font-size:12px;font-weight:800
}
.badge{background:#eef5ff;color:#0b5ed7}
.badge.green{background:#e9fbf7;color:#0e766e}
.badge.gold{background:#fff6de;color:#9a6c00}
.meta span{background:#f5f8fc;border:1px solid var(--line);color:#2c4460}
.toolbar{margin-top:16px}
.toolbar .btn,.toolbar a{
  flex:1 1 180px
}
.list{display:flex;flex-direction:column;gap:12px;max-height:640px;overflow:auto;padding:4px}
.place-item{
  padding:16px;border:1px solid var(--line);border-radius:18px;background:#fff
}
.place-item h4{margin:0 0 8px}
.place-item p{margin:0}
.stats-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:24px
}
.stat-card{
  padding:18px;border-radius:20px;background:#fff;border:1px solid rgba(255,255,255,.12)
}
.stat-card .label{font-size:13px;color:#dce8fb}
.stat-card .value{font-size:30px;font-weight:900;margin-top:6px}
.page-hero{padding:48px 0 20px}
.breadcrumbs{font-size:14px;color:var(--muted);margin:10px 0 20px}
.breadcrumbs a{color:var(--primary-dark)}
.content-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px}
.content-card{padding:24px}
.faq-item{padding:16px 0;border-top:1px solid var(--line)}
.faq-item:first-child{border-top:0}
.detail-grid{display:grid;grid-template-columns:1.22fr .78fr;gap:24px}
.detail-image{
  border-radius:28px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)
}
.detail-cover{height:420px;object-fit:cover;width:100%}
.highlight-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}
.highlight{
  padding:16px;border-radius:18px;border:1px solid var(--line);background:#f9fbfe
}
.sticky{position:sticky;top:100px}
.notice{
  padding:14px 16px;border-radius:16px;background:#eef6ff;border:1px solid #cfe1ff;color:#16448f
}
.footer{
  padding:36px 0;background:#081427;color:#d8e4f7;margin-top:40px
}
.footer-inner{
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap
}
.footer-links{display:flex;gap:14px;flex-wrap:wrap}
.empty{
  padding:28px;border-radius:20px;border:1px dashed var(--line);color:var(--muted);background:#fbfdff
}
.loading{
  display:flex;align-items:center;gap:14px;padding:22px;border-radius:20px;background:#f8fbff;border:1px solid var(--line)
}
.spinner{
  width:20px;height:20px;border-radius:50%;
  border:3px solid #d6e3f5;border-top-color:#2563eb;animation:spin 1s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}
.hidden{display:none !important}
.hero-wave{
  min-height:420px;
  background:
    radial-gradient(circle at 80% 16%, rgba(255,255,255,.25), transparent 12%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)),
    linear-gradient(135deg,#1e3a5f,#13b2b0);
  position:relative;
}
.hero-wave::before,
.hero-wave::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:42%;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.06));
}
.hero-wave::after{
  height:28%;
  clip-path:path("M0 120 C220 20 360 160 580 110 C760 70 930 170 1140 110 C1300 60 1440 70 1600 130 L1600 300 L0 300 Z");
}
.hero-tiles{
  position:absolute;inset:auto 22px 22px 22px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px
}
.hero-tile{
  padding:16px;border-radius:18px;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px);color:#fff
}
.icon-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px
}
.icon-card{
  padding:18px;border-radius:20px;background:#fff;border:1px solid var(--line);text-align:center;box-shadow:var(--shadow)
}
.icon-card .icon{
  width:56px;height:56px;border-radius:18px;margin:0 auto 12px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#21d4fd,#2563eb);color:#071322;font-weight:900
}
@media (max-width:1100px){
  .hero-grid,.layout,.cards,.content-grid,.detail-grid,.stats-grid,.search-grid,.highlight-grid,.icon-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .nav{flex-direction:column;align-items:flex-start;padding:14px 0}
  .hero{padding-top:48px}
}