.site-frontend {
    --site-navy: #082a45;
    --site-navy-dark: #041b2c;
    --site-blue: #006eb5;
    --site-cyan: #24b9e8;
    --site-ice: #eaf7fc;
    --site-bg: #f7fafb;
    --site-text: #172630;
    --site-muted: #5b6972;
    --site-border: #cbd8de;
    min-width: 0;
    color: var(--site-text);
    background: #fff;
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    line-height: 1.65;
}

.site-frontend *, .site-frontend *::before, .site-frontend *::after { box-sizing: border-box; }
.site-frontend .row { --bs-gutter-x: 1.5rem; }
.site-frontend img { display: block; max-width: 100%; height: auto; }
.site-frontend a { text-underline-offset: 3px; }
.site-frontend h1, .site-frontend h2, .site-frontend h3 { color: var(--site-navy-dark); font-weight: 700; letter-spacing: -.03em; }
.site-frontend h1 { max-width: 700px; font-size: clamp(2.35rem, 5vw, 4.8rem); line-height: 1.04; }
.site-frontend h2 { margin-bottom: 20px; font-size: clamp(2rem, 3.5vw, 3.2rem); line-height: 1.1; }

.site-header { position: absolute; inset: 0 0 auto; z-index: 50; border-bottom: 1px solid rgba(255,255,255,.18); }
.site-header .navbar { min-height: 78px; }
.site-brand { display: inline-flex; align-items: center; gap: 11px; color: #fff; font-size: 18px; font-weight: 700; text-decoration: none; }
.site-brand:hover { color: #fff; }
.site-brand-mark { display: grid; width: 36px; height: 36px; place-items: center; color: var(--site-navy); background: #fff; border-radius: 50%; }
.site-header .nav-link { padding: 12px 14px !important; color: rgba(255,255,255,.82); font-size: 14px; font-weight: 600; }
.site-header .nav-link:hover, .site-header .nav-link:focus { color: #fff; }
.site-header .navbar-toggler { border-color: rgba(255,255,255,.4); }
.site-header .navbar-toggler-icon { filter: invert(1); }

.site-frontend .btn { min-height: 48px; padding: 11px 20px; border-radius: 8px; font-weight: 700; }
.site-frontend .btn-lg { min-height: 54px; padding: 14px 24px; font-size: 16px; }
.site-frontend .btn-primary { --bs-btn-bg: var(--site-blue); --bs-btn-border-color: var(--site-blue); --bs-btn-hover-bg: #00578f; --bs-btn-hover-border-color: #00578f; }
.site-frontend .btn-outline-light:hover { color: var(--site-navy); }

.hero { min-height: 760px; padding: 155px 0 90px; color: #fff; background: var(--site-navy-dark); overflow: hidden; }
.hero h1 { color: #fff; }
.hero-lead { max-width: 620px; margin: 26px 0 0; color: rgba(255,255,255,.78); font-size: clamp(1.08rem, 2vw, 1.3rem); }
.hero-visual { margin-right: -14%; }
.hero-visual img { width: 100%; filter: saturate(.85); }
.hero-facts { display: flex; flex-wrap: wrap; gap: 26px; margin: 44px 0 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.2); }
.hero-facts div { min-width: 120px; }
.hero-facts dt { color: #fff; font-size: 18px; font-weight: 700; }
.hero-facts dd { margin: 2px 0 0; color: rgba(255,255,255,.62); font-size: 12px; }

.section { padding: 96px 0; }
.section-lead { color: var(--site-navy); font-size: 19px; line-height: 1.6; }
.section-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.section-video { display: block; max-width: 420px; margin-inline: auto; aspect-ratio: 9 / 16; object-fit: cover; }
.benefit-list { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.benefit-list li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.benefit-list i { margin-top: 3px; color: var(--site-blue); font-size: 19px; }

.use-cases { background: var(--site-ice); }
.uses-list { border-top: 1px solid var(--site-border); }
.uses-list > div { display: grid; grid-template-columns: 42px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--site-border); }
.uses-list i { color: var(--site-blue); font-size: 24px; }
.uses-list strong { display: block; margin-bottom: 3px; color: var(--site-navy-dark); font-size: 18px; }
.uses-list span { color: var(--site-muted); }

.treatment-process { background: var(--site-bg); }
.device-photo-wrap { padding: 24px; background: var(--site-navy-dark); border-radius: 8px; }
.process-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.process-list li { display: grid; grid-template-columns: 42px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--site-border); }
.process-list li > span { display: grid; width: 32px; height: 32px; place-items: center; color: #fff; background: var(--site-blue); border-radius: 50%; font-size: 13px; font-weight: 700; }
.process-list strong { display: block; color: var(--site-navy-dark); font-size: 18px; }
.process-list p { margin: 4px 0 0; color: var(--site-muted); }

.evidence-section { background: #fff; }
.evidence-section .row p { color: var(--site-muted); }
.photo-pair { display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; }
.photo-pair img { width: 100%; height: 460px; object-fit: cover; border-radius: 8px; }
.photo-pair img:first-child { object-position: center; }
.source-note { margin: 14px 0 0; color: var(--site-muted); font-size: 13px; }

.faq-section { background: var(--site-bg); }
.faq-section .accordion { border-top: 1px solid var(--site-border); }
.faq-section .accordion-item { background: transparent; border-color: var(--site-border); }
.faq-section .accordion-button { padding: 22px 0; color: var(--site-navy-dark); background: transparent; box-shadow: none; font-weight: 700; }
.faq-section .accordion-button:not(.collapsed) { color: var(--site-blue); }
.faq-section .accordion-body { padding: 0 36px 22px 0; color: var(--site-muted); }

.contact-section { padding-top: 72px; background: #fff; }
.contact-panel { padding: clamp(28px, 6vw, 64px); color: #fff; background: var(--site-navy-dark); border-radius: 8px; }
.contact-panel h2 { color: #fff; }
.contact-panel p { color: rgba(255,255,255,.72); }
.contact-note { padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18); font-size: 13px; }
.contact-panel .form-label { color: rgba(255,255,255,.82); font-size: 13px; font-weight: 600; }
.contact-panel .form-control { min-height: 50px; color: #fff; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.35); border-radius: 6px; }
.contact-panel textarea.form-control { min-height: 112px; }
.contact-panel .form-control:focus { background: rgba(255,255,255,.1); border-color: var(--site-cyan); box-shadow: 0 0 0 3px rgba(36,185,232,.18); }
.form-hint { max-width: 330px; color: rgba(255,255,255,.55); font-size: 11px; line-height: 1.4; }

.site-footer { padding: 28px 0; color: rgba(255,255,255,.62); background: var(--site-navy-dark); border-top: 1px solid rgba(255,255,255,.14); font-size: 13px; }
.site-brand-footer { font-size: 15px; }
.site-brand-footer .site-brand-mark { width: 30px; height: 30px; }

@media (max-width: 991.98px) {
    .site-header { position: absolute; background: rgba(4,27,44,.96); }
    .site-header .navbar-collapse { padding: 14px 0 20px; }
    .site-header .nav-link { padding-right: 0 !important; padding-left: 0 !important; }
    .site-header .nav-item .btn { width: 100%; margin-top: 8px; }
    .hero { min-height: 0; padding-top: 130px; }
    .hero-visual { max-width: 680px; margin: 28px auto 0; }
    .section { padding: 72px 0; }
}

@media (max-width: 767.98px) {
    .hero { padding-bottom: 64px; }
    .hero h1 { font-size: 2.75rem; }
    .hero-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .hero-facts div { min-width: 0; }
    .hero-facts dt { font-size: 15px; }
    .photo-pair { grid-template-columns: 1fr; }
    .photo-pair img { height: 280px; }
    .contact-section { padding-top: 48px; }
}

@media (max-width: 575.98px) {
    .site-header .navbar { min-height: 68px; }
    .site-brand { font-size: 16px; }
    .site-brand-mark { width: 32px; height: 32px; }
    .hero { padding-top: 112px; }
    .hero h1 { font-size: 2.35rem; }
    .hero-facts { grid-template-columns: 1fr; }
    .hero-facts div { display: grid; grid-template-columns: 95px 1fr; align-items: baseline; }
    .section { padding: 58px 0; }
    .site-frontend h2 { font-size: 2rem; }
    .section-lead { font-size: 17px; }
    .uses-list > div { grid-template-columns: 34px 1fr; }
    .device-photo-wrap { padding: 12px; }
    .contact-panel { margin-right: -4px; margin-left: -4px; padding: 26px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .site-frontend { scroll-behavior: auto; }
}