/* ==========================================================================
   HiveHits — public marketing pages
   ==========================================================================
   Used by the contact page and by the language switcher on the landing page.
   Built on the design tokens in hivehits.css, which must be loaded first.

   The landing page keeps its own inline styles: they contain Blade directives
   and moving them is a refactor with no upside for this work. Everything here
   derives from the same tokens, so the two stay visually consistent without
   sharing a file.
   ========================================================================== */

.hh-marketing {
    background: var(--hh-bg);
    color: var(--hh-text);
    font-family: var(--hh-font);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.hh-marketing main { flex: 1; }

/* Language pill & regional modal -----------------------------------------
   These two blocks also load on the landing page, which is self-contained and
   never links hivehits.css. Every token below therefore carries a literal
   fallback — without them the pill renders with no colour at all on the one
   page most visitors see first. */

.hh-lang-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: var(--hh-space-2, 8px);
    padding: 5px 13px;
    border: 1px solid var(--hh-border-strong, #333C4C);
    border-radius: var(--hh-radius-pill, 999px);
    background: rgba(255, 255, 255, 0.06);
    color: var(--hh-text, #EEF2F8);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.5;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.hh-lang-pill:hover {
    background: rgba(var(--hh-honey-rgb, 245, 165, 36), 0.14);
    border-color: var(--hh-honey, #F5A524);
    transform: translateY(-1px);
}

.hh-lang-pill:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--hh-honey-rgb, 245, 165, 36), 0.35);
}

.hh-region-modal .modal-content {
    background: var(--hh-surface, #12161F);
    border: 1px solid var(--hh-border-strong, #333C4C);
    border-radius: var(--hh-radius-lg, 16px);
    color: var(--hh-text, #EEF2F8);
    box-shadow: var(--hh-shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.55));
}

.hh-region-modal .modal-header,
.hh-region-modal .modal-footer { border-color: var(--hh-border, #242B38); }

.hh-region-modal .modal-title { font-weight: 700; font-size: 1.05rem; }

.hh-region-modal__hint {
    color: var(--hh-text-muted, #97A3B6);
    font-size: .875rem;
    margin-bottom: var(--hh-space-4, 16px);
}

.hh-region-modal__label {
    display: block;
    margin-bottom: 6px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hh-text-subtle, #6A7486);
}

.hh-region-modal__note {
    margin: var(--hh-space-3, 12px) 0 0;
    font-size: .78rem;
    color: var(--hh-text-subtle, #6A7486);
}

/* The flag glyphs need a font that actually has them; Windows Chrome falls
   back to empty boxes without an explicit emoji family in the stack. */
.hh-region-select,
.hh-lang-pill {
    font-family: var(--hh-font, 'Plus Jakarta Sans', sans-serif),
                 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
}

.hh-region-select {
    background-color: var(--hh-surface-inset, #0D1017);
    border: 1px solid var(--hh-border, #242B38);
    color: var(--hh-text, #EEF2F8);
    border-radius: var(--hh-radius-sm, 8px);
    padding: 10px 12px;
}

.hh-region-select:focus {
    background-color: var(--hh-surface-inset, #0D1017);
    border-color: var(--hh-honey, #F5A524);
    color: var(--hh-text, #EEF2F8);
    box-shadow: 0 0 0 3px rgba(var(--hh-honey-rgb, 245, 165, 36), 0.18);
}

.hh-region-select option { background: var(--hh-surface-2, #181D28); color: var(--hh-text, #EEF2F8); }

/* Shared buttons --------------------------------------------------------- */

.hh-btn-gold {
    background: linear-gradient(135deg, var(--hh-honey-bright), var(--hh-honey));
    color: var(--hh-honey-ink);
    border: none;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: var(--hh-radius-pill);
    transition: filter var(--hh-transition), transform var(--hh-transition);
}

.hh-btn-gold:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
    color: var(--hh-honey-ink);
}

.hh-btn-ghost {
    background: transparent;
    border: 1px solid var(--hh-border-strong);
    color: var(--hh-text-muted);
    font-weight: 600;
    padding: 10px 22px;
    border-radius: var(--hh-radius-pill);
}

.hh-btn-ghost:hover { border-color: var(--hh-text-subtle); color: var(--hh-text); }

/* Contact page ----------------------------------------------------------- */

.hh-contact-hero {
    padding: var(--hh-space-7) 0 var(--hh-space-6);
    text-align: center;
}

.hh-contact-hero__eyebrow {
    display: inline-block;
    margin-bottom: var(--hh-space-3);
    padding: 5px 14px;
    border: 1px solid rgba(var(--hh-honey-rgb), 0.35);
    border-radius: var(--hh-radius-pill);
    background: rgba(var(--hh-honey-rgb), 0.10);
    color: var(--hh-honey-bright);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.hh-contact-hero__title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: var(--hh-space-3);
}

.hh-contact-hero__lead {
    max-width: 62ch;
    margin: 0 auto;
    color: var(--hh-text-muted);
    font-size: 1.03rem;
    line-height: 1.7;
}

.hh-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--hh-space-5);
    align-items: start;
    padding-bottom: var(--hh-space-7);
}

@media (max-width: 991px) {
    .hh-contact-grid { grid-template-columns: minmax(0, 1fr); }
}

.hh-contact-card {
    background: var(--hh-surface);
    border: 1px solid var(--hh-border);
    border-radius: var(--hh-radius-lg);
    padding: var(--hh-space-6);
    box-shadow: var(--hh-shadow-md);
}

.hh-contact-card__title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: var(--hh-space-5);
}

.hh-aside-card {
    background: var(--hh-surface);
    border: 1px solid var(--hh-border);
    border-radius: var(--hh-radius);
    padding: var(--hh-space-5);
    margin-bottom: var(--hh-space-4);
}

.hh-aside-card__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: var(--hh-space-3);
    border-radius: var(--hh-radius-sm);
    background: rgba(var(--hh-honey-rgb), 0.12);
    color: var(--hh-honey);
}

.hh-aside-card__title {
    font-size: .95rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.hh-aside-card__body {
    margin: 0;
    color: var(--hh-text-muted);
    font-size: .85rem;
    line-height: 1.65;
}

.hh-aside-card a { color: var(--hh-honey-bright); text-decoration: none; font-weight: 600; }
.hh-aside-card a:hover { text-decoration: underline; }

/* Form ------------------------------------------------------------------- */

.hh-field { margin-bottom: var(--hh-space-4); }

.hh-field__label {
    display: block;
    margin-bottom: 6px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--hh-text);
}

.hh-field__label .req { color: var(--hh-honey); margin-left: 2px; }

.hh-input,
.hh-select,
.hh-textarea {
    width: 100%;
    padding: 11px 14px;
    background: var(--hh-surface-inset);
    border: 1px solid var(--hh-border);
    border-radius: var(--hh-radius-sm);
    color: var(--hh-text);
    font-family: var(--hh-font);
    font-size: .9375rem;
    transition: border-color var(--hh-transition), box-shadow var(--hh-transition);
}

.hh-textarea { resize: vertical; min-height: 170px; line-height: 1.65; }

.hh-input::placeholder,
.hh-textarea::placeholder { color: var(--hh-text-subtle); }

.hh-input:focus,
.hh-select:focus,
.hh-textarea:focus {
    outline: none;
    border-color: var(--hh-honey);
    box-shadow: 0 0 0 3px rgba(var(--hh-honey-rgb), 0.16);
}

.hh-select option { background: var(--hh-surface-2); color: var(--hh-text); }

.hh-field__help {
    margin: 6px 0 0;
    font-size: .78rem;
    color: var(--hh-text-subtle);
}

.hh-field__error {
    margin: 6px 0 0;
    font-size: .8rem;
    color: var(--hh-danger);
}

.hh-input.is-invalid,
.hh-select.is-invalid,
.hh-textarea.is-invalid { border-color: var(--hh-danger); }

/* Honeypot: reachable by a bot parsing the DOM, invisible and unreachable
   for a person, including by keyboard. Not display:none — some bots skip
   those, and some fill them anyway. */
.hh-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.hh-sent {
    display: flex;
    align-items: flex-start;
    gap: var(--hh-space-4);
    padding: var(--hh-space-5);
    background: var(--hh-success-bg);
    border: 1px solid var(--hh-success);
    border-radius: var(--hh-radius);
    margin-bottom: var(--hh-space-5);
}

.hh-sent__icon { color: var(--hh-success); font-size: 1.3rem; line-height: 1.4; }
.hh-sent__title { font-weight: 700; margin-bottom: 4px; }
.hh-sent__body { margin: 0; color: var(--hh-text-muted); font-size: .9rem; }

/* Marketing nav & footer -------------------------------------------------- */

.hh-mk-nav {
    border-bottom: 1px solid var(--hh-border);
    background: rgba(11, 14, 20, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: var(--hh-space-3) 0;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.hh-mk-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--hh-text);
    font-weight: 800;
    letter-spacing: .04em;
}

.hh-mk-brand img { width: 34px; height: 34px; object-fit: contain; }
.hh-mk-brand span { color: var(--hh-honey); }

.hh-mk-nav .nav-link {
    color: var(--hh-text-muted);
    font-size: .9rem;
    font-weight: 500;
    padding: 6px 12px;
}

.hh-mk-nav .nav-link:hover,
.hh-mk-nav .nav-link.is-active { color: var(--hh-honey-bright); }

.hh-mk-footer {
    border-top: 1px solid var(--hh-border);
    padding: var(--hh-space-5) 0;
    color: var(--hh-text-subtle);
    font-size: .82rem;
}

.hh-mk-footer a { color: var(--hh-text-muted); text-decoration: none; }
.hh-mk-footer a:hover { color: var(--hh-honey-bright); }

/* About page -------------------------------------------------------------
   Same token vocabulary as the contact page. The gold accents here come from
   the homepage's --gold-* variables, which the marketing pages define inline,
   with token fallbacks so the block is not dependent on load order. */

.hh-about-hero {
    padding: var(--hh-space-7, 48px) 0 var(--hh-space-6, 32px);
    text-align: center;
}

.hh-about-hero__eyebrow {
    display: inline-block;
    margin-bottom: var(--hh-space-3, 12px);
    padding: 5px 14px;
    border: 1px solid rgba(var(--hh-honey-rgb, 245, 165, 36), 0.35);
    border-radius: var(--hh-radius-pill, 999px);
    background: rgba(var(--hh-honey-rgb, 245, 165, 36), 0.10);
    color: var(--hh-honey-bright, #FFC554);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.hh-about-hero__title {
    font-size: clamp(2.1rem, 5.5vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: var(--hh-space-4, 16px);
    color: var(--hh-text, #EEF2F8);
}

.hh-about-hero__lead {
    max-width: 68ch;
    margin: 0 auto;
    color: var(--hh-text-muted, #97A3B6);
    font-size: 1.05rem;
    line-height: 1.75;
}

/* Live figures band ------------------------------------------------------ */

.hh-stat-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--hh-space-4, 16px);
    padding: var(--hh-space-6, 32px) 0;
    border-top: 1px solid var(--hh-border, #242B38);
    border-bottom: 1px solid var(--hh-border, #242B38);
    margin-bottom: var(--hh-space-6, 32px);
}

.hh-stat {
    text-align: center;
    padding: var(--hh-space-2, 8px);
}

.hh-stat__value {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    background: linear-gradient(135deg, #FDE68A 0%, #F59E0B 55%, #D97706 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-variant-numeric: tabular-nums;
}

.hh-stat__label {
    margin-top: 6px;
    font-size: .8rem;
    color: var(--hh-text-muted, #97A3B6);
}

/* A number nobody can check is worth less than a number with its source
   named, so the band says where these come from. */
.hh-stat-note {
    text-align: center;
    font-size: .78rem;
    color: var(--hh-text-subtle, #6A7486);
    margin: calc(-1 * var(--hh-space-4, 16px)) 0 var(--hh-space-6, 32px);
}

/* Prose sections --------------------------------------------------------- */

.hh-about-section { padding: var(--hh-space-6, 32px) 0; }

.hh-about-section__title {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: var(--hh-space-3, 12px);
    color: var(--hh-text, #EEF2F8);
}

.hh-about-section__lead {
    max-width: 70ch;
    color: var(--hh-text-muted, #97A3B6);
    font-size: .98rem;
    line-height: 1.8;
    margin-bottom: var(--hh-space-5, 24px);
}

.hh-about-section__lead strong { color: var(--hh-text, #EEF2F8); font-weight: 650; }

/* Step cards ------------------------------------------------------------- */

.hh-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--hh-space-4, 16px);
}

.hh-step {
    position: relative;
    padding: var(--hh-space-5, 24px);
    background: var(--hh-surface, #12161F);
    border: 1px solid var(--hh-border, #242B38);
    border-radius: var(--hh-radius-lg, 16px);
}

.hh-step__num {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-bottom: var(--hh-space-3, 12px);
    border-radius: 50%;
    background: rgba(var(--hh-honey-rgb, 245, 165, 36), 0.14);
    color: var(--hh-honey-bright, #FFC554);
    font-weight: 800;
    font-size: .85rem;
}

.hh-step__title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--hh-text, #EEF2F8);
}

.hh-step__body {
    margin: 0;
    font-size: .875rem;
    line-height: 1.7;
    color: var(--hh-text-muted, #97A3B6);
}

/* Feature grid ----------------------------------------------------------- */

.hh-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--hh-space-5, 24px);
}

.hh-feature__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: var(--hh-space-3, 12px);
    border-radius: var(--hh-radius-sm, 8px);
    background: rgba(var(--hh-honey-rgb, 245, 165, 36), 0.12);
    color: var(--hh-honey, #F5A524);
}

.hh-feature__title {
    font-size: 1.02rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--hh-text, #EEF2F8);
}

.hh-feature__body {
    margin: 0;
    font-size: .875rem;
    line-height: 1.7;
    color: var(--hh-text-muted, #97A3B6);
}

/* Principles ------------------------------------------------------------- */

.hh-principle {
    display: flex;
    align-items: flex-start;
    gap: var(--hh-space-3, 12px);
    padding: var(--hh-space-4, 16px) 0;
    border-bottom: 1px solid var(--hh-border, #242B38);
}

.hh-principle:last-child { border-bottom: none; }

.hh-principle__mark {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--hh-success, #34D399);
}

.hh-principle__text {
    margin: 0;
    font-size: .92rem;
    line-height: 1.7;
    color: var(--hh-text-muted, #97A3B6);
}

.hh-principle__text strong { color: var(--hh-text, #EEF2F8); font-weight: 650; }

/* Closing call to action -------------------------------------------------- */

.hh-about-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--hh-space-4, 16px);
    margin: var(--hh-space-6, 32px) 0 var(--hh-space-7, 48px);
    padding: var(--hh-space-6, 32px);
    border: 1px solid rgba(var(--hh-honey-rgb, 245, 165, 36), 0.35);
    border-radius: var(--hh-radius-lg, 16px);
    background:
        radial-gradient(circle at 12% 50%, rgba(var(--hh-honey-rgb, 245, 165, 36), 0.14) 0%, transparent 60%),
        var(--hh-surface, #12161F);
}

.hh-about-cta__title {
    margin: 0 0 4px;
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    font-weight: 800;
    color: var(--hh-text, #EEF2F8);
}

.hh-about-cta__sub {
    margin: 0;
    font-size: .9rem;
    color: var(--hh-text-muted, #97A3B6);
}