/* Clean Modern look: crisp white, confident blue, soft rounded shapes. */
:root {
  --page: #FFFFFF;
  --ink: #0E1A2B; --text: #44526A; --muted: #66748A;
  --accent: #0B5FD9; --accent-dark: #0848A8; --on-accent: #FFFFFF;
  --green: #0B5FD9; --forest: #0C1B33; --amber: #7FD3FF;
  --cream: #F2F6FB; --tint: #F2F6FB; --sage: #E6F0FD; --line: #E2E8F0;
  --radius: 20px;
  --head: 'Plus Jakarta Sans', system-ui, sans-serif;
  --body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --hero-bg: linear-gradient(180deg, #F2F7FF 0%, #FFFFFF 85%);
  --page-hero-bg: linear-gradient(180deg, #EDF4FF 0%, #F7FAFE 100%);
  --ph-a: #E9F1FC; --ph-b: #DFEAF9; --ph-ink: #4A6386;
  --pulse: #22B35E;
}
body { font-size: 17px; }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; }
h1 { font-size: clamp(42px, 5.4vw, 68px); }
h2 { font-size: clamp(32px, 3.8vw, 48px); }
h3 { letter-spacing: -0.02em; }
.s-hero h1 { font-size: clamp(44px, 6vw, 74px); line-height: 1.02; }
.s-hero h1 em { font-style: normal; color: var(--accent); }
.eyebrow { letter-spacing: .08em; font-size: 13px; color: var(--accent); }
.btn { border-radius: 999px; font-weight: 700; }
.btn-outline { border-color: var(--line); color: var(--ink); background: #fff; }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); background: #fff; }

/* Top bar + header */
.topbar { background: var(--forest); font-size: 14px; }
.topbar .dot { background: #4ADE80; }
.site-header { background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(10px); border-bottom-color: var(--line); }
.logo-name { font-family: var(--head); font-weight: 800; font-size: 22px; color: var(--ink); }
.logo-tag { font-family: var(--body); font-weight: 600; font-size: 13px; color: var(--muted); }
.main-nav a { border-radius: 999px; font-weight: 600; }
.main-nav a[aria-current="page"] { background: var(--sage); color: var(--accent); }

/* Hero */
.hero-badge { background: #E7F7EE; color: #0D5A31; }
.qq-inline .qq-form { background: #EEF3F9; border-radius: 22px; }
.hero-photo { border-radius: 32px; aspect-ratio: 4 / 4.6; box-shadow: 0 40px 80px -48px rgba(11, 60, 140, .55); }
.float-card { border-radius: 18px; }
.float-a { background: var(--accent); }
.float-a strong { color: #fff; } .float-a span { color: rgba(255,255,255,.8); }

/* Sections */
.trust { border-bottom: 0; }
.trust-icon { border-radius: 14px; background: var(--sage); color: var(--accent); }
.card { border-color: var(--line); border-radius: 22px; }
.card-img { height: 210px; }
.chip { background: var(--tint); }
.chip-white { border-radius: 999px; border-color: var(--line); }
.ba { border-radius: 24px; }
.ba figcaption { border-radius: 999px; padding: 5px 12px; }
.ba figure:last-child figcaption { background: var(--accent); }
.owner-photo { border-radius: 32px; }
.review { border: 1px solid var(--line); border-radius: 22px; }
.avatar { background: var(--sage); color: var(--accent); }
.step-num { background: var(--accent); color: #fff; font-family: var(--head); }
.steps li { border-radius: 18px; }
.step-card { border-radius: 22px; border: 1px solid var(--line); }
.value-card { border-top-color: var(--accent); border-radius: 22px; }
.faq details { border-radius: 16px; border-color: var(--line); }
.faq summary::after { background: var(--sage); color: var(--accent); }
.form-card, .side-card { border-radius: 24px; }
.field input, .field select, .field textarea { border-radius: 12px; border-color: var(--line); background: #F7F9FC; }
.chip-btn { border-color: var(--line); }
.chip-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
.photo, .map { border-radius: 22px; }
.rating-card { border: 1px solid var(--line); border-radius: 24px; }
.season-card { border-top-color: var(--accent); }
.stat strong { color: var(--accent); font-family: var(--head); letter-spacing: -0.03em; }

/* CTA band + footer */
.cta-band { background: linear-gradient(120deg, var(--accent) 0%, var(--accent-dark) 100%); }
.cta-band .btn-white { color: var(--accent); }
.site-footer { background: var(--forest); color: #B6C2D6; }
.site-footer a { color: #B6C2D6; }
.footer-bottom { color: #8A98B0; }
.site-footer .socials a { background: rgba(255,255,255,.08); }

@media (max-width: 760px) {
  .mobile-bar a { background: var(--tint); border-radius: 999px; }
  .mobile-bar a.is-main { background: var(--accent); }
}