/* ── Fonts ───────────────────────────────────────────────────────── */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('/site/fonts/poppins-300-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('/site/fonts/poppins-300.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/site/fonts/poppins-400-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/site/fonts/poppins-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/site/fonts/poppins-500-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/site/fonts/poppins-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/site/fonts/poppins-600-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/site/fonts/poppins-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/site/fonts/poppins-700-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/site/fonts/poppins-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ── Variables ───────────────────────────────────────────────────── */
:root {
    --color-primary:     #69A8BB;
    --color-secondary:   #39535E;
    --color-text:        #393C40;
    --color-accent:      #85A869;
    --color-muted:       #979EA7;
    --color-border:      #C8D0DB;
    --color-section-alt: #C8D0DB;
    --color-white:       #FFFFFF;

    --font: 'Poppins', sans-serif;
    --max-w: 1200px;
    --section-pad: 64px;
}

/* ── Reset ───────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font);
    color: var(--color-text);
    background: var(--color-white);
    line-height: 1.6;
    font-size: 16px;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { line-height: 1.25; font-weight: 600; }

/* ── Header / Nav ────────────────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 32px;
    height: 64px;
    display: flex;
    align-items: center;
    gap: 32px;
}

.site-logo {
    display: flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
}
.site-logo img {
    height: 36px;
    width: auto;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.site-nav__link {
    padding: 6px 12px;
    color: var(--color-text);
    font-size: 0.9rem;
    border-radius: 6px;
    transition: color 0.15s;
}
.site-nav__link:hover { color: var(--color-primary); }

.site-nav__btn {
    background: var(--color-primary);
    color: var(--color-white);
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 0.9rem;
    margin-left: 4px;
    transition: background 0.15s;
}
.site-nav__btn:hover {
    background: var(--color-secondary);
    color: var(--color-white);
}

/* ── Hero ────────────────────────────────────────────────────────── */
@keyframes hero-slide {
    0%   { opacity: 1; }
    28%  { opacity: 1; }
    33%  { opacity: 0; }
    95%  { opacity: 0; }
    100% { opacity: 1; }
}

.hero {
    min-height: 66vh;
    position: relative;
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 8%;
    gap: 20px;
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    animation: hero-slide 15s infinite;
}
.hero__bg:nth-child(1) { background-image: url('/site/images/hero-1.jpg'); animation-delay: 0s; }
.hero__bg:nth-child(2) { background-image: url('/site/images/hero-2.jpg'); animation-delay: -5s; }
.hero__bg:nth-child(3) { background-image: url('/site/images/hero-3.jpg'); animation-delay: -10s; }

.hero__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(105, 168, 187, 0.82);
    mix-blend-mode: multiply;
}

.hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.hero__eyebrow {
    font-size: 0.8rem;
    font-weight: 300;
    letter-spacing: 10px;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 0;
}

.hero h1 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    max-width: 720px;
    font-weight: 600;
}

.hero p {
    font-size: 1.1rem;
    max-width: 560px;
    opacity: 0.92;
    margin-bottom: 0;
}

.btn {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 6px;
    padding: 10px 32px;
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 500;
    transition: background 0.15s;
    cursor: pointer;
}
.btn:hover {
    background: var(--color-secondary);
    color: var(--color-white);
}

/* ── Section base ────────────────────────────────────────────────── */
section[id] { scroll-margin-top: 64px; }

.section-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: var(--section-pad) 64px;
}

/* ── What is ─────────────────────────────────────────────────────── */
.what-is { background: var(--color-white); }
.what-is .section-inner {
    display: flex;
    gap: 5vw;
    flex-direction: row;
    align-items: flex-start;
}
.what-is__text { flex: 1; min-width: 0; }
.what-is__image { flex-shrink: 0; width: 42%; }
.what-is__image img {
    width: 100%;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35), 0 1px 4px rgba(0,0,0,0.25);
}
.what-is h2 { font-size: 1.75rem; margin-bottom: 12px; color: var(--color-secondary); }
.what-is__intro { font-size: 1.1rem; font-weight: 500; color: var(--color-secondary); opacity: 0.8; margin-bottom: 20px; max-width: 60ch; }
.what-is__body { margin-top: 28px; }
.what-is h3 { font-size: 1.1rem; margin: 28px 0 10px; color: var(--color-secondary); }
.what-is p { color: var(--color-text); max-width: 60ch; }
.what-is .btn { margin-top: 24px; }

/* ── Features ────────────────────────────────────────────────────── */
.features { background: var(--color-section-alt); }
.features .section-inner { text-align: center; }
.features h2 { font-size: 1.75rem; margin-bottom: 32px; color: var(--color-secondary); }

.features__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2vw;
    text-align: left;
}

.feature {
    background: var(--color-white);
    border-radius: 8px;
    padding: 36px 24px;
}
.feature__icon { margin-bottom: 16px; }
.feature__icon i { font-size: 2rem; color: var(--color-primary); }
.feature__icon svg { width: 2rem; height: 2rem; color: var(--color-primary); }
.feature h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--color-secondary);
}
.feature p { font-size: 0.9rem; color: var(--color-text); margin-bottom: 0; }

/* ── Pricing ─────────────────────────────────────────────────────── */
.pricing { background: var(--color-white); }
.pricing .section-inner { text-align: center; max-width: 720px; }
.pricing h2 { font-size: 1.75rem; margin-bottom: 24px; color: var(--color-secondary); }
.pricing p { font-size: 1.05rem; margin-bottom: 20px; }
.pricing .btn { margin-top: 8px; }

/* ── Testimonials ────────────────────────────────────────────────── */
.testimonials { background: var(--color-section-alt); }
.testimonials__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2vw;
}
.testimonial {
    background: var(--color-white);
    border-radius: 8px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.testimonial p { font-size: 1rem; font-style: italic; color: var(--color-text); margin-bottom: 0; }
.testimonial footer { display: flex; flex-direction: column; gap: 2px; }
.testimonial strong { font-size: 0.9rem; color: var(--color-secondary); }
.testimonial span { font-size: 0.8rem; color: var(--color-muted); }

/* ── Text page ───────────────────────────────────────────────────── */
.text-page { background: var(--color-white); }
.text-page .section-inner { max-width: 800px; }
.text-page h1 { font-size: 2rem; margin-bottom: 24px; color: var(--color-secondary); }
.text-page h2 { font-size: 1.3rem; margin: 32px 0 12px; color: var(--color-secondary); }
.text-page p { line-height: 1.75; color: var(--color-text); }
.text-page a { color: var(--color-primary); text-decoration: underline; }
.text-page .btn { color: var(--color-white); text-decoration: none; margin-top: 32px; }
.text-page .btn:hover { color: var(--color-white); }

/* ── Footer ──────────────────────────────────────────────────────── */
.site-footer {
    background: var(--color-secondary);
    color: rgba(255,255,255,0.7);
    font-size: 0.85rem;
}
.site-footer__inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 24px 32px;
    display: flex;
    justify-content: center;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .features__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    :root { --section-pad: 40px; }

    .site-header__inner { padding: 0 16px; gap: 16px; }

    .site-nav { gap: 4px; }
    .site-nav__link { padding: 6px 8px; font-size: 0.82rem; }

    .hero { padding: 60px 5%; }

    .section-inner { padding: var(--section-pad) 16px !important; }

    .what-is .section-inner { flex-direction: column; }
    .what-is__image { width: 100%; }

    .features__grid { gap: 12px; grid-template-columns: repeat(2, 1fr); }

    .testimonials__grid { gap: 12px; }
}

@media (max-width: 480px) {
    .features__grid { grid-template-columns: 1fr; }
}