/* ============================================================
   Healthcare Tech Solutions — Stylesheet
   ============================================================ */

/* -------- Design Tokens (Light theme defaults) -------- */
:root {
    --brand: #9a0011;
    --brand-strong: #7a000d;
    --brand-soft: #c2173b;
    --accent: #e0a800;

    --bg: #f5f5f7;
    --bg-elev: #ffffff;
    --bg-muted: #ececef;
    --text: #1d1d1f;
    --text-muted: #555;
    --border: #e2e2e6;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08), 0 20px 40px rgba(0, 0, 0, 0.08);

    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 20px;

    --container: 1140px;
    --container-narrow: 820px;

    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif;

    --header-h: 72px;
    --transition: 200ms ease;
}

/* -------- Dark theme (auto + manual toggle) -------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        --bg: #0e0e10;
        --bg-elev: #1a1a1d;
        --bg-muted: #232327;
        --text: #f1f1f3;
        --text-muted: #b0b0b7;
        --border: #2c2c30;
        --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5), 0 20px 40px rgba(0, 0, 0, 0.5);
        --brand-soft: #e63956;
    }
}

:root[data-theme='dark'] {
    --bg: #0e0e10;
    --bg-elev: #1a1a1d;
    --bg-muted: #232327;
    --text: #f1f1f3;
    --text-muted: #b0b0b7;
    --border: #2c2c30;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5), 0 20px 40px rgba(0, 0, 0, 0.5);
    --brand-soft: #e63956;
}

/* -------- Base reset -------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    color-scheme: light dark;
    /* Reserve space for the vertical scrollbar permanently. Without this,
       when Zammad's chat panel opens it sets overflow:hidden on the body,
       the scrollbar disappears, and the whole page reflows ~15px to the
       right. With scrollbar-gutter: stable the gutter stays in place even
       when there's no scrollbar — no layout shift. */
    scrollbar-gutter: stable;
    /* Fallback for browsers without scrollbar-gutter (Safari < 16, etc.):
       force a scrollbar to always be present so it can never disappear. */
    overflow-y: scroll;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg);
    color: var(--text);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--transition), color var(--transition);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--brand-soft);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--brand);
    text-decoration: underline;
}

:root[data-theme='dark'] a:hover {
    color: #ff7a8a;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) a:hover {
        color: #ff7a8a;
    }
}

h1, h2, h3, h4 {
    line-height: 1.25;
    color: var(--text);
}

h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 1.2rem; font-weight: 700; }

p { color: var(--text); }

ul, ol { padding-left: 1.25rem; }

/* -------- Layout helpers -------- */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 1.25rem;
}

.container-narrow {
    max-width: var(--container-narrow);
    margin: 0 auto;
    padding: 0 1.25rem;
}

section {
    padding: clamp(2.5rem, 5vw, 4.5rem) 1.25rem;
}

/* -------- Header & Navigation -------- */
header {
    background-color: var(--brand);
    color: white;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: var(--shadow);
}

.nav-wrap {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0.75rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.logo {
    width: 200px;
    height: 52px;
    border-radius: 12px;
    object-fit: contain;
    background-color: rgba(255, 255, 255, 0.04);
}

nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    margin: 0;
}

nav ul li a {
    color: white;
    font-weight: 600;
    padding: 0.5rem 0.9rem;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition);
}

nav ul li a:hover {
    background-color: rgba(255, 255, 255, 0.12);
    text-decoration: none;
}

nav ul li a.active {
    background-color: rgba(0, 0, 0, 0.25);
}

/* Theme toggle button */
.theme-toggle {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.5rem;
    transition: background-color var(--transition);
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
}

.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme='dark'] .theme-toggle .icon-sun { display: block; }
:root[data-theme='dark'] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) .theme-toggle .icon-sun { display: block; }
    :root:not([data-theme='light']) .theme-toggle .icon-moon { display: none; }
}

/* Mobile menu */
.menu-toggle {
    display: none;
    background: transparent;
    border: 0;
    color: white;
    cursor: pointer;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
}

.menu-toggle svg { width: 26px; height: 26px; }

@media (max-width: 820px) {
    .menu-toggle { display: inline-flex; }
    nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--brand-strong);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--transition);
    }
    nav.open { max-height: 400px; }
    nav ul {
        flex-direction: column;
        align-items: stretch;
        padding: 0.5rem 1rem 1rem;
        gap: 0.25rem;
    }
    nav ul li a {
        display: block;
        padding: 0.85rem 1rem;
    }
}

/* -------- Hero -------- */
.hero {
    position: relative;
    min-height: 480px;
    background:
        linear-gradient(135deg, rgba(154, 0, 17, 0.85) 0%, rgba(40, 0, 5, 0.7) 100%),
        url('../images/hero.png') center center / cover no-repeat;
    display: flex;
    align-items: center;
    color: white;
    padding: 4rem 1.25rem;
    overflow: hidden;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top right, rgba(255, 255, 255, 0.08), transparent 60%);
    pointer-events: none;
}

.hero-text {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    z-index: 1;
}

.hero-text h1 {
    color: white;
    margin-bottom: 1rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.hero-text p {
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    margin: 0.5rem 0;
}

.hero-text .eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.8rem;
    background: rgba(255, 255, 255, 0.15);
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    margin-bottom: 1rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.btn {
    display: inline-block;
    background-color: white;
    color: var(--brand);
    border: 2px solid transparent;
    padding: 0.85rem 1.6rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: transform var(--transition), background-color var(--transition), color var(--transition);
    text-decoration: none;
}

.btn:hover {
    background-color: #f5f5f5;
    transform: translateY(-1px);
    text-decoration: none;
    color: var(--brand);
}

.btn-secondary {
    background-color: transparent;
    color: white;
    border-color: rgba(255, 255, 255, 0.6);
}

.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.12);
    color: white;
}

.btn-row {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

/* -------- Section headers -------- */
.section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 2.5rem;
}

.section-head .eyebrow {
    display: inline-block;
    color: var(--brand-soft);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

.section-head p {
    color: var(--text-muted);
    margin-top: 0.6rem;
}

/* -------- Stat strip -------- */
.stats {
    background: var(--bg-elev);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 2.25rem 1.25rem;
}

.stats-grid {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: center;
}

.stat .num {
    display: block;
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    font-weight: 800;
    color: var(--brand-soft);
    line-height: 1;
}

.stat .label {
    display: block;
    margin-top: 0.4rem;
    color: var(--text-muted);
    font-size: 0.95rem;
}

@media (max-width: 720px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

/* -------- Service cards -------- */
.services {
    background: var(--bg);
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    max-width: var(--container);
    margin: 0 auto;
}

.service-item {
    background: var(--bg-elev);
    padding: 1.75rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    transition: transform var(--transition), box-shadow var(--transition);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.service-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.service-item .icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-soft) 100%);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.service-item .icon svg { width: 22px; height: 22px; }

.service-item h3 {
    color: var(--text);
}

.service-item p {
    color: var(--text-muted);
    font-size: 0.97rem;
}

/* -------- HIPAA & Training cards -------- */
.hipaa, .training {
    background: var(--bg-elev);
    padding: clamp(2rem, 4vw, 3rem);
    border-radius: var(--radius);
    margin: 2rem auto;
    max-width: var(--container-narrow);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

.hipaa h2, .training h2 {
    color: var(--brand-soft);
    margin-bottom: 0.5rem;
}

.hipaa h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.hipaa ul, .training ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
}

.hipaa ul li, .training ul li {
    position: relative;
    padding: 0.6rem 0 0.6rem 2rem;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}

.hipaa ul li:last-child, .training ul li:last-child {
    border-bottom: 0;
}

.hipaa ul li::before, .training ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.85rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--brand-soft);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path d='M13.485 4.43a1 1 0 0 1 0 1.414l-6.364 6.364a1 1 0 0 1-1.414 0L2.515 8.515a1 1 0 1 1 1.414-1.414l3.171 3.171 5.657-5.657a1 1 0 0 1 1.414 0z'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
}

/* -------- Highlight callout -------- */
.callout {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%);
    color: white;
    padding: clamp(2rem, 4vw, 3rem);
    border-radius: var(--radius-lg);
    text-align: center;
    margin: 2rem auto;
    max-width: var(--container);
    box-shadow: var(--shadow-lg);
}

.callout h2 { color: white; }
.callout p { color: rgba(255, 255, 255, 0.92); margin: 0.75rem auto; max-width: 600px; }

.callout .btn {
    margin-top: 1rem;
}

.callout a:not(.btn) {
    color: var(--accent);
    font-weight: 700;
}

/* -------- Footer -------- */
footer {
    background-color: #1a1a1d;
    color: #d0d0d6;
    padding: 2.5rem 1.25rem 1.5rem;
    margin-top: 3rem;
}

.footer-grid {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #2a2a2e;
}

.footer-grid h4 {
    color: white;
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

.footer-grid a {
    color: #b0b0b7;
    text-decoration: none;
    display: block;
    padding: 0.2rem 0;
}

.footer-grid a:hover {
    color: white;
}

.footer-bottom {
    max-width: var(--container);
    margin: 0 auto;
    padding-top: 1.25rem;
    text-align: center;
    color: #888;
    font-size: 0.9rem;
}

@media (max-width: 720px) {
    .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* -------- Projects -------- */
#projects-container {
    display: grid;
    gap: 2rem;
    max-width: var(--container);
    margin: 2rem auto;
    padding: 0 1.25rem;
}

.project {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 2rem;
    align-items: center;
    background: var(--bg-elev);
    padding: 1.75rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    transition: transform var(--transition), box-shadow var(--transition);
}

.project:hover {
    box-shadow: var(--shadow-lg);
}

.project img {
    width: 100%;
    height: 100%;
    max-height: 360px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

.project:nth-child(even) {
    direction: rtl;
}

.project:nth-child(even) > * {
    direction: ltr;
}

.project-content { padding: 0.5rem 0; }

.project-content h2 {
    margin-bottom: 0.5rem;
    color: var(--text);
}

.project-content .company {
    display: inline-block;
    color: var(--brand-soft);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.75rem;
}

.project-content p {
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.project-content p:last-of-type {
    margin-bottom: 0.5rem;
}

.project-content .view-link {
    display: inline-block;
    margin-top: 0.5rem;
    color: var(--brand-soft);
    font-weight: 600;
}

.project-loading,
.project-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 3rem 1rem;
}

.project-loading .spinner {
    display: inline-block;
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--brand-soft);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 0.75rem;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 820px) {
    .project {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .project:nth-child(even) {
        direction: ltr;
    }
}

/* -------- Contact page -------- */
.page-hero {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%);
    color: white;
    padding: clamp(2.5rem, 5vw, 4rem) 1.25rem;
    text-align: center;
}

.page-hero h1 { color: white; }
.page-hero p { color: rgba(255, 255, 255, 0.9); margin-top: 0.5rem; }

.contact-grid {
    max-width: var(--container);
    margin: -2rem auto 3rem;
    padding: 0 1.25rem;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 2rem;
    align-items: start;
}

.contact-info-card,
.contact-form-card {
    background: var(--bg-elev);
    padding: 2rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

.contact-info-card h2 { margin-bottom: 1rem; }

.contact-info-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}

.contact-info-row:last-of-type {
    border-bottom: 0;
}

.contact-info-row .icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--bg-muted);
    color: var(--brand-soft);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.contact-info-row .icon svg { width: 18px; height: 18px; }

.contact-info-row .label {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.contact-info-row .value {
    color: var(--text);
    font-weight: 600;
}

.contact-info-row .value a {
    color: var(--text);
}

.contact-info-row .value a:hover {
    color: var(--brand-soft);
}

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

/* -------- Forms -------- */
form { display: block; }

form label {
    font-weight: 600;
    display: block;
    margin: 0.85rem 0 0.4rem;
    color: var(--text);
    font-size: 0.95rem;
}

form input,
form textarea,
form select {
    width: 100%;
    padding: 0.75rem 0.85rem;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}

form input:focus,
form textarea:focus,
form select:focus {
    outline: none;
    border-color: var(--brand-soft);
    box-shadow: 0 0 0 3px rgba(194, 23, 59, 0.15);
}

form textarea { resize: vertical; min-height: 130px; }

form button {
    width: 100%;
    padding: 0.95rem;
    margin-top: 1rem;
    background-color: var(--brand);
    color: white;
    border: none;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition), transform var(--transition);
}

form button:hover {
    background-color: var(--brand-strong);
    transform: translateY(-1px);
}

form button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

#form-status {
    margin-top: 1rem;
    font-weight: 600;
    text-align: center;
    min-height: 1.5em;
}

#form-status.success { color: #1a7f37; }
#form-status.error { color: var(--brand); }

/* -------- Who We Are page -------- */
.intro {
    background: var(--bg-elev);
    padding: clamp(2rem, 4vw, 3rem);
    border-radius: var(--radius);
    margin: 2rem auto;
    max-width: var(--container-narrow);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

.intro p { margin-bottom: 1rem; color: var(--text-muted); }
.intro p:last-child { margin-bottom: 0; }
.intro p strong { color: var(--text); }

.founder-message {
    background: linear-gradient(135deg, var(--bg-muted) 0%, var(--bg-elev) 100%);
    padding: clamp(2rem, 4vw, 3rem);
    border-radius: var(--radius);
    margin: 2rem auto;
    max-width: var(--container-narrow);
    border-left: 4px solid var(--brand-soft);
    box-shadow: var(--shadow);
}

.founder-message h2 { margin-bottom: 1rem; }

.founder-message p {
    font-style: italic;
    color: var(--text);
    margin-bottom: 0.75rem;
    line-height: 1.75;
}

.founder-signature {
    margin-top: 1rem;
    font-style: normal;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.industries,
.why-choose-us {
    background: var(--bg-elev);
    padding: clamp(2rem, 4vw, 3rem);
    border-radius: var(--radius);
    margin: 2rem auto;
    max-width: var(--container-narrow);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

.industries p { color: var(--text-muted); margin-bottom: 1rem; }
.industries p:last-child { margin-bottom: 0; }
.industries p strong { color: var(--text); }

.why-choose-us ul {
    list-style: none;
    padding: 0;
    margin-top: 1rem;
}

.why-choose-us ul li {
    position: relative;
    padding: 0.85rem 0 0.85rem 2.25rem;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}

.why-choose-us ul li:last-child {
    border-bottom: 0;
}

.why-choose-us ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.05rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--brand-soft);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path d='M13.485 4.43a1 1 0 0 1 0 1.414l-6.364 6.364a1 1 0 0 1-1.414 0L2.515 8.515a1 1 0 1 1 1.414-1.414l3.171 3.171 5.657-5.657a1 1 0 0 1 1.414 0z'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
}

.why-choose-us ul li strong { color: var(--text); }

/* -------- 404 page -------- */
.error-page {
    text-align: center;
    padding: 5rem 1.25rem;
    max-width: 600px;
    margin: 0 auto;
}

.error-page .code {
    font-size: 8rem;
    font-weight: 900;
    color: var(--brand-soft);
    line-height: 1;
    margin-bottom: 1rem;
}

.error-page h1 { margin-bottom: 1rem; }
.error-page p { color: var(--text-muted); margin-bottom: 1.5rem; }

/* -------- Utility -------- */
.text-center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.mb-2 { margin-bottom: 2rem; }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--brand);
    color: white;
    padding: 0.75rem 1rem;
    text-decoration: none;
    z-index: 100;
}

.skip-link:focus {
    left: 1rem;
    top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* -------- Floating Chat (Zammad) -------- */
/* Targets the basic <button class="open-zammad-chat"> that sits right before
   </body> on every page. Zammad attaches its own click handler to that
   element — we just restyle it from "tiny default browser button" into a
   proper floating action button. */
body > button.open-zammad-chat,
.chat-fab {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1.15rem;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%);
    color: white;
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(154, 0, 17, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
    -webkit-appearance: none;
    appearance: none;
}

body > button.open-zammad-chat:hover,
.chat-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(154, 0, 17, 0.45), 0 4px 10px rgba(0, 0, 0, 0.25);
}

body > button.open-zammad-chat:focus-visible,
.chat-fab:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
}

/* Chat-bubble icon rendered via CSS mask, so the basic Zammad snippet HTML
   doesn't need any inline SVG to look the part. */
body > button.open-zammad-chat::before {
    content: '';
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>") center / contain no-repeat;
}

.chat-fab svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.chat-fab-label { white-space: nowrap; }

/* On narrow screens collapse to icon-only — keeps the FAB out of the way */
@media (max-width: 520px) {
    body > button.open-zammad-chat,
    .chat-fab {
        padding: 0.9rem;
        right: 1rem;
        bottom: 1rem;
        font-size: 0;        /* hides the "Chat with us" text on the basic button */
        gap: 0;
    }
    body > button.open-zammad-chat::before {
        width: 22px;
        height: 22px;
    }
    .chat-fab-label { display: none; }
}

/* Zammad's own chat window — small theming so it doesn't clash */
.zammad-chat {
    font-family: var(--font-sans) !important;
    z-index: 95 !important;
}
.zammad-chat .zammad-chat-header {
    background-color: var(--brand) !important;
}

/* -------- Always show the chat trigger -------- */
/* By default Zammad hides .open-zammad-chat (via inline style="display:none")
   when no agents are online. Raffi still wants the button visible because
   clicking it pings him via desktop notification regardless. Force the
   button to stay visible with !important rules that beat Zammad's inline
   styles. We scope to `body >` so we only override OUR trigger button,
   not anything Zammad might create internally with the same class. */
body > button.open-zammad-chat,
body > button.open-zammad-chat.hide,
body > button.open-zammad-chat[style*="display"] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* -------- Fix the squished input area -------- */
/* Zammad's default layout puts the textarea and Send button on the same
   row, with the textarea getting almost no width. Force a stacked layout:
   textarea full-width on top, Send button full-width below. Selectors
   target multiple class patterns since Zammad's class names vary by
   library version. */

.zammad-chat .zammad-chat-input,
.zammad-chat .zammad-chat-control,
.zammad-chat .zammad-chat-controls,
.zammad-chat-modal-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
    padding: 0.6rem !important;
}

.zammad-chat textarea,
.zammad-chat .zammad-chat-input-message,
.zammad-chat .zammad-chat-message {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 64px !important;
    max-height: 140px !important;
    box-sizing: border-box !important;
    padding: 0.6rem 0.75rem !important;
    font-family: inherit !important;
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    border: 1px solid #d4d4d8 !important;
    border-radius: 8px !important;
    resize: none !important;
    flex: 0 0 auto !important;
}

.zammad-chat .zammad-chat-button-send,
.zammad-chat .zammad-chat-input-send,
.zammad-chat .zammad-chat-control-send,
.zammad-chat button[type="submit"],
.zammad-chat input[type="submit"],
.zammad-chat .js-send {
    width: 100% !important;
    padding: 0.65rem 1rem !important;
    min-height: 42px !important;
    font-size: 0.95rem !important;
    flex: 0 0 auto !important;
}

/* -------- Feature band (image-backed visual interlude) -------- */
.feature-band {
    position: relative;
    margin: 3rem auto;
    max-width: var(--container);
    width: calc(100% - 2.5rem);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    isolation: isolate;
    background:
        linear-gradient(135deg, rgba(154, 0, 17, 0.78) 0%, rgba(20, 0, 3, 0.85) 100%),
        url('../images/hero.png') center center / cover no-repeat;
    color: white;
    padding: clamp(2.25rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
}

.feature-band::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top right, rgba(255, 255, 255, 0.10), transparent 60%);
    pointer-events: none;
    z-index: -1;
}

.feature-band h2 {
    color: white;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.feature-band .eyebrow {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0.5rem;
}

.feature-band-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.feature-band-item {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    padding: 1.25rem;
    backdrop-filter: blur(2px);
}

.feature-band-item h3 {
    color: white;
    font-size: 1.05rem;
    margin: 0 0 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.feature-band-item h3 svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.95);
}

.feature-band-item p {
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.55;
}

/* -------- Scroll-reveal animations -------- */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 600ms ease, transform 600ms ease;
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children when the parent gets revealed */
.reveal-stagger.is-visible > * {
    animation: revealRise 600ms ease forwards;
    opacity: 0;
}
.reveal-stagger.is-visible > *:nth-child(1) { animation-delay: 60ms; }
.reveal-stagger.is-visible > *:nth-child(2) { animation-delay: 120ms; }
.reveal-stagger.is-visible > *:nth-child(3) { animation-delay: 180ms; }
.reveal-stagger.is-visible > *:nth-child(4) { animation-delay: 240ms; }
.reveal-stagger.is-visible > *:nth-child(5) { animation-delay: 300ms; }
.reveal-stagger.is-visible > *:nth-child(6) { animation-delay: 360ms; }
.reveal-stagger.is-visible > *:nth-child(7) { animation-delay: 420ms; }
.reveal-stagger.is-visible > *:nth-child(8) { animation-delay: 480ms; }

@keyframes revealRise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-stagger.is-visible > * {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
}