@font-face {
    font-family: 'Agrandir';
    src: url('../fonts/Agrandir-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --hes-font: 'Agrandir', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --hes-blue: #1f7fc4;
    --hes-green: #4caf50;
    --hes-orange: #f39c12;
    --hes-orange-dark: #c97d05;
    --hes-ink: #1d2f45;
    --hes-navbar: #4b4b5c;
}

body.hes-landing-page {
    font-family: var(--hes-font);
    color: var(--hes-ink);
    background: #f3f6f8;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Navbar: shared component, styled in resources/views/components/site-nav.blade.php */

/* --- Hero --- */
/* The gradient runs from the symbol's health blue (bottom right) through a
   soft environment green into a pale floor (top left). */
.hes-hero {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    padding: 3rem 0 4rem;
    background: #f0f0f0;
}

.hes-title {
    font-size: 3.25rem;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: #4d4c5c;
    margin-bottom: 1.75rem;
}

.hes-subtitle {
    font-size: 1.35rem;
    font-weight: 500;
    color: #4d4c5c;
}

/* No card: the symbol's own transparent background sits straight on the
   page gradient. */
.hes-image-card {
    display: inline-block;
    width: 100%;
    max-width: 480px;
}

.hes-image-card img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Buttons --- */
.hes-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.btn-hes,
.btn-hes-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 8px;
    padding: 0.65rem 1.5rem;
    font-weight: 600;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-hes {
    color: var(--hes-ink);
    background: #dedede;
    border: 2px solid var(--hes-orange);
}

.btn-hes:hover,
.btn-hes:focus-visible {
    color: var(--hes-orange);
    background: var(--hes-navbar);
    border-color: var(--hes-orange);
    transform: translateY(-2px);
}

.btn-hes-outline {
    color: var(--hes-ink);
    background: transparent;
    border: 2px solid rgba(29, 47, 69, 0.35);
}

.btn-hes-outline:hover,
.btn-hes-outline:focus-visible {
    color: var(--hes-orange-dark);
    border-color: var(--hes-orange);
    transform: translateY(-2px);
}

/* --- Entrance animation --- */
@keyframes hes-rise {
    from { opacity: 0; transform: translateY(var(--rise, 40px)); }
    to   { opacity: 1; transform: none; }
}

.hes-rise {
    animation: hes-rise var(--dur, 1.2s) ease-out var(--delay, 0s) both;
}

@media (prefers-reduced-motion: reduce) {
    .hes-rise { animation: none; }
    .btn-hes, .btn-hes-outline { transition: none; }
}

/* Beside the picture the text reads left-aligned; stacked it centres. */
@media (min-width: 992px) {
    .hes-hero-text { text-align: left; }
    .hes-buttons { justify-content: flex-start; }
}

@media (max-width: 991.98px) {
    .hes-hero { text-align: center; }
    .hes-image-card { max-width: 340px; }
}

@media (max-width: 575.98px) {
    .hes-title { font-size: 2.3rem; }
    .hes-subtitle { font-size: 1.1rem; }
}