@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Lato:wght@400;700&display=swap');

:root {
  --mobility-gradient: linear-gradient(135deg, #0284c7, #3b82f6);
  --joint-bg: #f8fafc;
  --bone-surface: #ffffff;
  --flex-ink: #0f172a;
  --flex-ink-light: #475569;
  --cartilage-tone: #e2e8f0;
  --cartilage-tone-hover: #cbd5e1;
  --font-display: 'Playfair Display', serif;
  --font-body: 'Lato', sans-serif;
  --radius-soft: 16px;
  --shadow-raised: 0 10px 25px rgba(0, 0, 0, 0.08);
  --pad-scale: 16dvh;
}

body { margin: 0; font-family: var(--font-body); background: var(--joint-bg); color: var(--flex-ink); line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0 0 1rem; color: var(--flex-ink); font-weight: 700; }
a { text-decoration: none; color: inherit; transition: 0.3s; }
img { max-width: 100%; height: auto; display: block; }
.bound-box { max-width: 1200px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.content-area { padding: var(--pad-scale) 5%; box-sizing: border-box; }

/* Preset F Header */
.top-masthead { background: var(--mobility-gradient); color: var(--bone-surface); padding: 1.5rem 5%; position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-raised); }
.masthead-inner { display: flex; justify-content: space-between; align-items: center; }
.brand-link { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--bone-surface); }
.brand-icon { width: 32px; height: 32px; }
.top-links { display: flex; gap: 2rem; }
.link-item { color: var(--bone-surface); font-weight: 700; position: relative; padding-bottom: 0.25rem; font-family: var(--font-body); }
.link-item.active::after, .link-item:hover::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--bone-surface); }
.hamburger-icon { display: none; cursor: pointer; flex-direction: column; gap: 5px; }
.hamburger-icon .bar { width: 25px; height: 3px; background: var(--bone-surface); transition: 0.3s; }

@media(max-width: 768px) {
  .hamburger-icon { display: flex; }
  .top-links { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: var(--mobility-gradient); flex-direction: column; padding: 2rem 5%; box-sizing: border-box; box-shadow: var(--shadow-raised); }
  #mobile-toggle:checked ~ .top-links { display: flex; }
}

/* Base Triggers */
.action-trigger { display: inline-flex; justify-content: center; align-items: center; background: var(--bone-surface); color: var(--flex-ink); padding: 1rem 2rem; border-radius: var(--radius-soft); font-weight: 700; border: none; cursor: pointer; transition: 0.3s; box-shadow: var(--shadow-raised); font-family: var(--font-body); }
.action-trigger:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(0,0,0,0.15); }
.dark-trigger { background: var(--flex-ink); color: var(--bone-surface); }

/* Index - Start Banner */
.start-banner { position: relative; background-size: cover; background-position: center; text-align: center; padding: calc(var(--pad-scale) + 3rem) 5% 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 80vh; }
.banner-inner { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-bottom: 4rem; }
.main-heading { font-size: clamp(2.5rem, 5vw, 4.5rem); color: var(--bone-surface); max-width: 900px; line-height: 1.1; }
.secondary-heading { font-size: 1.25rem; margin-bottom: 2.5rem; opacity: 0.9; color: var(--bone-surface); max-width: 700px; }
.banner-actions { margin-bottom: 3rem; }

.stats-strip { display: flex; gap: 4rem; justify-content: center; flex-wrap: wrap; color: var(--bone-surface); }
.stat-unit { display: flex; flex-direction: column; align-items: center; }
.stat-ticker { font-family: var(--font-display); font-size: 3.5rem; font-weight: 700; line-height: 1; }
.stat-label { font-size: 0.875rem; opacity: 0.85; margin-top: 0.5rem; text-transform: uppercase; letter-spacing: 1.5px; }

.trust-strip { background: rgba(255,255,255,0.08); backdrop-filter: blur(8px); border-top: 1px solid rgba(255,255,255,0.15); width: 100%; padding: 1.5rem 5%; margin-top: auto; box-sizing: border-box; }
.trust-inner { display: flex; justify-content: center; gap: 3rem; flex-wrap: wrap; font-weight: 700; color: var(--bone-surface); opacity: 0.9; font-family: var(--font-display); font-size: 1.1rem; }

/* Index - Insight Zone */
.insight-zone { background-size: cover; background-position: center; background-attachment: fixed; }
.scroll-track { display: flex; gap: 2rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 1rem 0; scrollbar-width: none; }
.scroll-track::-webkit-scrollbar { display: none; }
.insight-item { background: var(--bone-surface); color: var(--flex-ink); padding: 2.5rem; border-radius: var(--radius-soft); min-width: 320px; flex: 1; scroll-snap-align: start; box-shadow: var(--shadow-raised); }
.insight-icon { width: 48px; height: 48px; color: #0ea5e9; margin-bottom: 1.5rem; }
.insight-topic { font-size: 1.5rem; }
.insight-detail { color: var(--flex-ink-light); }
@media(min-width: 992px) { .scroll-track { overflow-x: visible; } .insight-item { min-width: 0; } }

/* Index - Benefits Zone */
.benefits-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
.benefit-item { background: var(--bone-surface); padding: 3rem 2rem; border-radius: var(--radius-soft); box-shadow: var(--shadow-raised); transition: 0.4s; text-align: center; }
.benefit-icon-wrap { width: 72px; height: 72px; margin: 0 auto 1.5rem; border-radius: 50%; background: var(--cartilage-tone); display: flex; align-items: center; justify-content: center; color: var(--flex-ink); transition: 0.4s; }
.benefit-icon-wrap svg { width: 36px; height: 36px; }
.benefit-name { margin-bottom: 1rem; }
.benefit-desc { color: var(--flex-ink-light); transition: 0.4s; }
.benefit-item:hover { background: var(--mobility-gradient); color: var(--bone-surface); }
.benefit-item:hover .benefit-icon-wrap { background: var(--bone-surface); color: #0ea5e9; }
.benefit-item:hover .benefit-name, .benefit-item:hover .benefit-desc { color: var(--bone-surface); }

/* Index - Process Zone */
.process-path { display: flex; justify-content: space-between; position: relative; gap: 3rem; margin-top: 4rem; }
.process-path::before { content: ''; position: absolute; top: 30px; left: 0; width: 100%; height: 2px; background: var(--cartilage-tone-hover); z-index: 0; }
.step-node { flex: 1; position: relative; z-index: 1; text-align: center; background: var(--joint-bg); padding: 0 1rem; }
.step-marker { width: 60px; height: 60px; border-radius: 50%; background: var(--mobility-gradient); color: var(--bone-surface); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; font-weight: 700; margin: 0 auto 1.5rem; border: 6px solid var(--joint-bg); font-family: var(--font-display); }
.step-topic { font-size: 1.25rem; margin-bottom: 0.5rem; }
.step-info { color: var(--flex-ink-light); }
@media(max-width: 768px) {
  .process-path { flex-direction: column; padding-left: 20px; }
  .process-path::before { left: 45px; top: 0; width: 2px; height: 100%; }
  .step-node { display: flex; align-items: flex-start; text-align: left; gap: 1.5rem; padding: 0; }
  .step-marker { margin: 0; flex-shrink: 0; border-width: 4px; }
}

/* Action Strip */
.action-layout { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.action-heading { color: var(--bone-surface); margin: 0; max-width: 650px; font-size: 2.25rem; }

/* Footer */
.bottom-masthead { background: var(--flex-ink); color: var(--bone-surface); padding: 5rem 5% 3rem; }
.footer-inner { display: flex; flex-direction: column; gap: 2.5rem; align-items: center; text-align: center; }
.footer-brand { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; }
.bottom-links { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center; font-weight: 700; }
.bottom-links a { color: var(--cartilage-tone); text-decoration: underline; }
.footer-legal { margin-top: 1rem; border-top: 1px solid var(--flex-ink-light); padding-top: 2.5rem; width: 100%; font-size: 0.875rem; color: var(--cartilage-tone); line-height: 1.8; }
.footer-legal p { margin: 0 0 0.5rem; }

/* Cookie Notice */
.cookie-notice { position: fixed; bottom: 0; left: 0; width: 100%; background: var(--bone-surface); padding: 1.5rem 5%; box-shadow: 0 -5px 25px rgba(0,0,0,0.1); z-index: 9999; display: none; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; box-sizing: border-box; border-top: 4px solid #0ea5e9; }
.cookie-notice p { margin: 0; font-weight: 700; color: var(--flex-ink); flex: 1; min-width: 250px; }
.cookie-actions { display: flex; gap: 1rem; }
.ghost-trigger { background: transparent; border: 2px solid var(--cartilage-tone-hover); color: var(--flex-ink); padding: 0.875rem 2rem; border-radius: var(--radius-soft); font-weight: 700; cursor: pointer; font-family: var(--font-body); transition: 0.3s; }
.ghost-trigger:hover { border-color: var(--flex-ink); }

/* Expert Page */
.top-banner-small { padding: calc(var(--pad-scale) / 1.5) 5%; }
.split-layout { display: flex; gap: 4rem; align-items: center; }
.split-visual { flex: 0 0 45%; border-radius: var(--radius-soft); overflow: hidden; box-shadow: var(--shadow-raised); }
.split-info { flex: 1; }
.reading-parag { font-size: 1.125rem; color: var(--flex-ink-light); margin-bottom: 1.5rem; }
@media(max-width: 900px) { .split-layout { flex-direction: column; } .split-visual { flex: 0 0 auto; width: 100%; } }

.stats-box-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; }
.stat-box { background: var(--bone-surface); padding: 2.5rem 2rem; border-radius: var(--radius-soft); text-align: center; box-shadow: var(--shadow-raised); border-bottom: 4px solid #0ea5e9; }
.box-number { display: block; font-size: 3rem; font-weight: 700; color: #0ea5e9; font-family: var(--font-display); margin-bottom: 0.5rem; }
.box-label { font-weight: 700; color: var(--flex-ink-light); }

/* Reserve Page */
.dual-layout { display: flex; gap: 5rem; align-items: flex-start; }
.reserve-sticky-info { flex: 1; position: sticky; top: 120px; }
.reserve-form-side { flex: 1; background: var(--bone-surface); padding: 3rem; border-radius: var(--radius-soft); box-shadow: var(--shadow-raised); }
@media(max-width: 992px) { .dual-layout { flex-direction: column; gap: 3rem; } .reserve-sticky-info { position: static; } .reserve-form-side { width: 100%; box-sizing: border-box; } }

.decorative-head { font-size: 3.5rem; color: #0ea5e9; text-shadow: 2px 2px 0px rgba(14, 165, 233, 0.1); line-height: 1.1; margin-bottom: 1.5rem; }
.trust-words { font-size: 1.125rem; color: var(--flex-ink-light); }

.info-packet { display: flex; flex-direction: column; gap: 1.5rem; margin: 2.5rem 0; }
.packet-item { background: var(--bone-surface); padding: 1.5rem 2rem; border-radius: var(--radius-soft); box-shadow: var(--shadow-raised); border-left: 4px solid #0ea5e9; }
.packet-item h4 { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0.5rem; font-size: 1.25rem; }
.packet-item h4 svg { color: #0ea5e9; }
.packet-item p { margin: 0 0 1rem; color: var(--flex-ink-light); }
.packet-list { list-style: none; padding: 0; margin: 0; }
.packet-list li { margin-bottom: 0.5rem; position: relative; padding-left: 1.75rem; font-weight: 700; font-size: 0.95rem; }
.packet-list li::before { content: ''; position: absolute; left: 0; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--mobility-gradient); }

.booking-form { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; }
.form-row { display: flex; flex-direction: column; gap: 0.5rem; }
.booking-form label { font-weight: 700; color: var(--flex-ink); }
.booking-form input[type="text"], .booking-form input[type="tel"], .booking-form textarea { width: 100%; padding: 1rem; border: 2px solid var(--cartilage-tone); border-radius: var(--radius-soft); font-family: inherit; font-size: 1rem; box-sizing: border-box; background: var(--joint-bg); transition: 0.3s; }
.booking-form input:focus, .booking-form textarea:focus { outline: none; border-color: #0ea5e9; background: var(--bone-surface); box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1); }
.check-group { display: flex; align-items: flex-start; gap: 0.75rem; margin-top: 0.5rem; }
.check-group input[type="checkbox"] { margin-top: 6px; transform: scale(1.2); }
.check-group label { font-weight: 400; color: var(--flex-ink-light); font-size: 0.9rem; }

.faq-accordion { display: flex; flex-direction: column; gap: 1rem; }
.faq-node { background: var(--bone-surface); padding: 2rem; border-radius: var(--radius-soft); box-shadow: var(--shadow-raised); }
.faq-quest { margin: 0 0 1rem; font-size: 1.25rem; color: var(--flex-ink); }
.faq-ans { margin: 0; color: var(--flex-ink-light); line-height: 1.7; }