/* Base */
:root {
  --bg: #0b1120;
  --bg-alt: #0f172a;
  --card: #0b1229;
  --text: #0b1229;
  --muted: #6b7280;
  --brand: #0ea5e9;
  --brand-700: #0284c7;
  --ok: #16a34a;
  --radius: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: #0f172a;
  background: #ffffff;
  line-height: 1.6;
}

.skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { left: 12px; top: 12px; width:auto; height:auto; background:#fff; padding:8px 12px; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.14); }

.container { width: min(1100px, 100% - 32px); margin-inline: auto; }

/* Header */
.site-header { position:sticky; top:0; z-index:50; background: rgba(255,255,255,.7); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(2, 132, 199, 0.08); }
.header-inner { display:flex; align-items:center; gap:16px; padding: 12px 0; }
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; color:#0f172a; font-weight:700; letter-spacing:.2px; }
.nav { margin-left:auto; }
.nav-toggle { display:none; background:transparent; border:1px solid rgba(2,132,199,.2); padding:6px 10px; border-radius:10px; }
.nav-list { display:flex; gap:18px; list-style:none; padding:0; margin:0; }
.nav-list a { text-decoration:none; color:#0f172a; padding:8px 10px; border-radius:10px; }
.nav-list a:hover { background: rgba(2,132,199,.08); }
.nav-item-has-children { position:relative; }
.nav-parent { background:transparent; border:0; font:inherit; color:#0f172a; padding:8px 10px; border-radius:10px; display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.nav-parent::after { content:"▾"; font-size:12px; transition: transform .2s ease; }
.nav-parent:focus { outline:2px solid rgba(2,132,199,.35); outline-offset:2px; }
.nav-parent:hover,
.nav-item-has-children.open .nav-parent { background: rgba(2,132,199,.08); }
.nav-item-has-children .nav-submenu { display:none; position:absolute; top:calc(100% + 8px); left:0; min-width:220px; list-style:none; padding:8px 0; margin:0; background:#ffffff; border:1px solid rgba(2,132,199,.12); border-radius:12px; box-shadow:0 12px 24px rgba(2,132,199,.12); }
.nav-item-has-children .nav-submenu li { width:100%; }
.nav-item-has-children .nav-submenu a { display:block; padding:8px 16px; color:#0f172a; border-radius:0; }
.nav-item-has-children .nav-submenu a:hover { background: rgba(2,132,199,.08); }
.nav-item-has-children.open .nav-submenu { display:flex; flex-direction:column; }
.nav-item-has-children.open .nav-parent::after { transform: rotate(180deg); }
.nav-item-has-children .nav-submenu a[aria-current="page"] { font-weight:700; color: var(--brand-700); }
.header-cta { margin-left:16px; }
.phone-link { margin-right:10px; font-weight:800; color:#0f172a; text-decoration:none; border:1px solid rgba(2,132,199,.2); padding:8px 10px; border-radius:10px; }
.phone-link:hover { background: rgba(2,132,199,.08); }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; padding:12px 16px; border-radius:12px; text-decoration:none; font-weight:600; border:1px solid transparent; transition:.2s ease; cursor:pointer; }
.btn-primary { background: var(--brand); color:#fff; }
.btn-primary:hover { background: var(--brand-700); }
.btn-secondary { background: transparent; color:#0f172a; border-color: rgba(2,132,199,.35); }
.btn-secondary:hover { background: rgba(2,132,199,.08); }

/* Hero */
.hero { background: radial-gradient(1200px 400px at 15% -10%, rgba(14,165,233,.18), transparent), radial-gradient(800px 300px at 90% 10%, rgba(59,130,246,.12), transparent), linear-gradient(#f8fafc, #ffffff 40%); border-bottom:1px solid rgba(2,132,199,.08); }
.hero-inner { display:grid; grid-template-columns: 1.2fr .8fr; gap:36px; padding: 42px 0 24px; align-items:center; }
.hero-text h1 { font-size: clamp(28px, 4.2vw, 44px); line-height:1.12; margin: 0 0 10px; letter-spacing: -.4px; }
.hero-text .lead { font-size: clamp(16px, 2.2vw, 18px); color:#334155; margin: 0 0 14px; }
.hero-note { margin: 0 0 18px; color:#475569; max-width:520px; }
.ticks { display:flex; flex-wrap:wrap; gap:10px 14px; padding:0; margin: 10px 0 18px; list-style:none; }
.ticks li { position:relative; padding-left:24px; }
.ticks li::before { content:"✓"; position:absolute; left:0; top:0; color: var(--ok); }
.hero-cta { display:flex; gap:10px; }
.hero-art { display:flex; flex-direction:column; align-items:center; justify-content:center; }
.hero-art .hero-photo { width: min(420px, 100%); aspect-ratio: 1; border-radius: 28px; object-fit: cover; box-shadow: 0 20px 40px rgba(2,132,199,.18); border:1px solid rgba(2,132,199,.12); }
.hero-phone { margin-top:18px; text-align:center; width:min(420px, 100%); }
.hero-phone a { display:block; width:100%; padding:12px 0; font-size:18px; font-weight:700; color: var(--brand-700); text-decoration:none; border:1px solid rgba(2,132,199,.2); border-radius:20px; background: rgba(14,165,233,.08); }
.hero-phone a:hover { background: rgba(14,165,233,.12); }
.hero-phone-note { display:block; margin-top:8px; font-size:14px; color:#475569; }

/* Sections */
.section { padding: 44px 0; }
.section h2 { margin: 0 0 16px; font-size: clamp(22px, 3vw, 30px); }
.section p { margin: 0 0 10px; }
.section-alt { background: linear-gradient(#ffffff, #f8fafc 80%, #ffffff); }
.longread { display:grid; gap:16px; max-width:720px; color:#334155; }
.marker-list { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.marker-list li { position:relative; padding-left:26px; color:#334155; }
.marker-list li::before { content:"•"; position:absolute; left:8px; top:3px; color: var(--brand-700); font-size:18px; line-height:1; }
.marker-list a { color: var(--brand-700); font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.marker-list a::after { content:"→"; font-size:14px; transition: transform .2s ease; }
.marker-list a:hover { color: var(--brand); }
.marker-list a:hover::after { transform: translateX(4px); }
.breadcrumbs { background:#f1f5f9; border-bottom:1px solid rgba(2,132,199,.08); }
.breadcrumbs .container { padding: 10px 0; display:flex; align-items:center; gap:8px; font-size:14px; color:#64748b; }
.breadcrumbs a { color: var(--brand-700); text-decoration:none; }
.breadcrumbs span { display:inline-flex; align-items:center; }

/* Cards */
.cards { display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.card { background: #ffffff; border: 1px solid rgba(2,132,199,.12); border-radius: var(--radius); padding: 18px; box-shadow: 0 10px 22px rgba(2,132,199,.06); transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(2,132,199,.12); }
.card h3 { margin: 0 0 6px; font-size: 18px; }
.card p { color:#425466; margin:0; }
.card h3 a { color: inherit; text-decoration:none; display:inline-flex; align-items:center; gap:8px; }
.card h3 a::after { content:"→"; font-size:16px; color: var(--brand-700); transition: transform .2s ease; }
.card:hover h3 a { color: var(--brand-700); }
.card:hover h3 a::after { transform: translateX(4px); }

/* Features */
.grid-4 { display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; }
.feature { background:#ffffff; border:1px solid rgba(2,132,199,.12); border-radius: var(--radius); padding: 18px; }
.feature .ico { font-size: 22px; }
.feature h3 { margin: 8px 0 6px; font-size: 17px; }
.feature p { color:#425466; margin:0; }

/* FAQ */
.faq details { background: #ffffff; border:1px solid rgba(2,132,199,.12); border-radius: 12px; padding: 12px 16px; margin: 10px 0; }
.faq summary { cursor:pointer; font-weight:600; }
.faq p { margin: 10px 0 0; color:#425466; }

/* CTA + Form */
.cta-section { background: radial-gradient(1200px 400px at 10% 0%, rgba(14,165,233,.12), transparent), linear-gradient(#f8fafc, #ffffff); }
.cta { display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:start; }
.cta-text h2 { margin: 0 0 8px; font-size: clamp(22px, 3.2vw, 30px); }
.contact-quick a { color: var(--brand-700); font-weight: 600; }
.form { background:#ffffff; border:1px solid rgba(2,132,199,.12); border-radius: var(--radius); padding: 16px; box-shadow: 0 10px 20px rgba(2,132,199,.06); }
.field { margin: 10px 0; }
.field label { display:block; font-weight:600; margin: 0 0 6px; }
.field input, .field select, .field textarea { width:100%; padding: 11px 12px; border-radius: 10px; border:1px solid #cbd5e1; font: inherit; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand-700); box-shadow: 0 0 0 3px rgba(14,165,233,.15); }
.policy { font-size: 12px; color:#6b7280; }
.status { margin-top:10px; min-height: 20px; font-size: 14px; }

/* Footer */
.site-footer { border-top:1px solid rgba(2,132,199,.08); background: #ffffff; }
.footer-inner { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:16px; padding: 20px 0; align-items:start; }
.footer-nav { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:16px; }
.footer-nav h3 { margin:0 0 8px; font-size:16px; color:#0f172a; }
.footer-nav ul { list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.footer-nav a { text-decoration:none; color:#425466; }
.footer-nav a:hover { color: var(--brand-700); }
.footer-address,
.footer-contact,
.footer-hours { margin-top:10px; display:flex; flex-direction:column; font-style:normal; color:#425466; gap:4px; }
.footer-address__label,
.footer-contact__label { font-weight:600; color:#0f172a; }
.footer-contact a { color: var(--brand-700); font-weight:600; text-decoration:none; }
.footer-contact a:hover { color: var(--brand); }
.footer-hours span { color:#475569; }
.copy { color:#64748b; font-size: 14px; text-align:right; }

/* Responsive */
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-art { order:-1; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .cta { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; text-align:center; }
  .footer-nav { grid-template-columns: 1fr; }
  .footer-nav h3 { margin-bottom:6px; }
  .footer-nav ul { justify-items:center; }
  .copy { text-align:center; }
}

@media (max-width: 680px) {
  .nav-toggle { display:inline-block; }
  .nav-list { display:none; position:absolute; right:16px; top:58px; background:#ffffff; border:1px solid rgba(2,132,199,.12); border-radius:12px; padding:8px; box-shadow:0 10px 20px rgba(2,132,199,.1); }
  .nav-list.show { display:flex; flex-direction:column; gap:6px; }
  .nav-item-has-children { width:100%; }
  .nav-parent { width:100%; justify-content:space-between; }
  .nav-item-has-children .nav-submenu { position:static; border:0; box-shadow:none; padding:0; margin-top:4px; background:transparent; display:none; }
  .nav-item-has-children.open .nav-submenu { display:grid; gap:4px; }
  .nav-item-has-children .nav-submenu a { padding:8px 10px; border-radius:8px; }
  .cards { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
}

@media (min-width: 681px) {
  .nav-item-has-children:hover .nav-submenu,
  .nav-item-has-children:focus-within .nav-submenu { display:flex; flex-direction:column; }
  .nav-item-has-children:hover .nav-parent::after,
  .nav-item-has-children:focus-within .nav-parent::after { transform: rotate(180deg); }
}

/* Story */
.story .steps { display:grid; gap:12px; }
.step { display:grid; grid-template-columns: 36px 1fr; gap:12px; align-items:start; background:#ffffff; border:1px solid rgba(2,132,199,.12); border-radius:14px; padding:12px; }
.step .num { width:36px; height:36px; border-radius:10px; background: rgba(14,165,233,.12); color:#0369a1; font-weight:700; display:flex; align-items:center; justify-content:center; }
.step .text { color:#334155; }

/* Pricing */
.muted { color:#64748b; }
.price-list { list-style:none; padding:0; margin: 12px 0 4px; border:1px solid rgba(2,132,199,.14); border-radius: 14px; overflow:hidden; }
.price-list li { display:grid; grid-template-columns: 1fr auto; gap:12px; padding:12px 14px; background:#fff; }
.price-list li:nth-child(odd) { background: #f8fafc; }
.price-list span:last-child { font-weight:700; color:#0f172a; }

/* Map */
.map-frame { position: relative; border:1px solid rgba(2,132,199,.14); border-radius: 14px; overflow:hidden; }
.map-frame iframe { width:100%; height: 380px; display:block; }
.map-link { position:absolute; right:10px; bottom:10px; background:#ffffff; color:#0f172a; padding:6px 10px; border-radius: 10px; border:1px solid rgba(2,132,199,.2); text-decoration:none; font-weight:600; }

@media (max-width: 960px) {}

/* Gallery */
.gallery { display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
.shot { margin:0; background:#fff; border:1px solid rgba(2,132,199,.12); border-radius:14px; overflow:hidden; box-shadow: 0 8px 16px rgba(2,132,199,.06); }
.shot img { width:100%; height: auto; display:block; }
.shot figcaption { padding:10px 12px; font-size: 14px; color:#334155; }

@media (max-width: 960px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .gallery { grid-template-columns: 1fr; } }

/* Carousel */
.carousel { position: relative; }
.carousel .track { display:grid; grid-auto-flow: column; grid-auto-columns: 100%; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; padding-bottom: 2px; }
.carousel .slide { scroll-snap-align: start; }
.carousel .caro-btn { position:absolute; top:50%; transform: translateY(-50%); width:38px; height:38px; border-radius:50%; border:1px solid rgba(2,132,199,.2); background:#fff; color:#0f172a; display:grid; place-items:center; box-shadow:0 6px 12px rgba(2,132,199,.14); cursor:pointer; }
.carousel .prev { left:-6px; }
.carousel .next { right:-6px; }
@media (min-width: 960px) { .carousel .track { grid-auto-columns: calc((100% - 24px)/3); } }
@media (max-width: 680px) { .carousel .caro-btn { display:none; } }

/* Sticky call (mobile) */
.sticky-call { position:fixed; left:0; right:0; bottom:0; z-index:60; display:none; align-items:center; justify-content:center; gap:8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0)); background: linear-gradient(180deg, rgba(255,255,255,.8), #ffffff); border-top:1px solid rgba(2,132,199,.12); box-shadow: 0 -8px 16px rgba(2,132,199,.06); font-weight:800; font-size:18px; color:#0f172a; text-decoration:none; }
@media (max-width: 680px) { .sticky-call.show { display:flex; } }

/* 404 error page */
.error-page { background-color:#0f172a; color:#ffffff; min-height:100vh; display:flex; flex-direction:column; }
.error-page .site-header { background: linear-gradient(90deg, rgba(15,23,42,0.95), rgba(30,41,59,0.9)); border-bottom:1px solid rgba(148, 163, 184, 0.18); }
.error-page .site-footer { background:transparent; border-top:1px solid rgba(148, 163, 184, 0.2); margin-top:auto; }
.error-main { flex:1; display:flex; align-items:center; padding: clamp(48px, 8vw, 96px) 0; background: radial-gradient(1200px 600px at 15% -10%, rgba(56,189,248,0.2), transparent), radial-gradient(900px 500px at 95% 10%, rgba(125,211,252,0.12), transparent); }
.error { display:flex; gap: clamp(2rem, 5vw, 6rem); align-items:center; flex-wrap:wrap; background: rgba(15,23,42,0.78); border:1px solid rgba(148,163,184,0.32); border-radius:32px; padding: clamp(2rem, 4vw, 3.5rem); box-shadow:0 28px 60px rgba(15,23,42,0.6); backdrop-filter: blur(18px); }
.error-content { max-width:520px; }
.error-code { font-size: clamp(3.5rem, 9vw, 6rem); margin:0; font-weight:700; color:#38bdf8; }
.error-content h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom:1rem; }
.error-content p { margin-bottom:1rem; color:rgba(255,255,255,.85); }
.error-art img { max-width: clamp(220px, 40vw, 360px); height:auto; border-radius:28px; box-shadow:0 30px 60px rgba(15,23,42,.6); border:1px solid rgba(148,163,184,0.18); }
.error-page .logo,
.error-page .logo span,
.error-page .nav-list a,
.error-page .nav-parent,
.error-page .nav-toggle,
.error-page .phone-link,
.error-page .site-footer,
.error-page .site-footer p,
.error-page .site-footer h3,
.error-page .site-footer a,
.error-page .copy { color:#e2e8f0; }
.error-page .nav-list a:hover,
.error-page .nav-parent:hover,
.error-page .nav-item-has-children.open .nav-parent { background: rgba(148, 163, 184, 0.18); }
.error-page .nav-parent::after { color:#e2e8f0; }
.error-page .nav-item-has-children .nav-submenu { background: rgba(15,23,42,0.95); border-color: rgba(148, 163, 184, 0.28); }
.error-page .nav-item-has-children .nav-submenu a { color:#e2e8f0; }
.error-page .nav-item-has-children .nav-submenu a:hover { background: rgba(148,163,184,0.18); }
.error-page .btn-secondary { color:#e0f2fe; border-color: rgba(148, 163, 184, 0.35); }
.error-page .btn-secondary:hover { background: rgba(148, 163, 184, 0.2); }
.error-page .marker-list li { color:rgba(255,255,255,.85); }
.error-page .marker-list li::before { color:#38bdf8; }
.error-page .marker-list a { color:#38bdf8; }
.error-page .marker-list a:hover { color:#7dd3fc; }
.error-page .sticky-call { background: rgba(15,23,42,0.92); color:#e2e8f0; border-top-color: rgba(148,163,184,0.25); }
.error-page .footer-nav h3 { color:#f8fafc; }
@media (max-width: 768px) {
  .error { justify-content:center; text-align:center; }
  .error-art { order:-1; }
}