/* =====================================================================
   Hypogen v2 — header & footer ("chrome") on v2 pages.
   Loaded instead of connect-page.css, so it re-declares the --cp-* tokens
   cp-header.css relies on. Restyles the existing header.php/footer.php
   markup (menus, popups and JS stay untouched).
   ===================================================================== */

:root {
    --cp-bg: #0B0D0F;
    --cp-text: #F7F7F7;
    --cp-accent: #FF9626;
    --cp-muted: rgba(247, 247, 247, 0.55);
    --cp-border: rgba(247, 247, 247, 0.12);
    --cp-node-bg: rgba(247, 247, 247, 0.06);
    --cp-font: "SFUIDisplay", "SF UI Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

html { height: auto !important; overflow: auto !important; }
body { height: auto !important; overflow: visible !important; background: #0B0D0F; font-size: 16px; line-height: 1.5; }

/* ---------- Header: glassy pill, white nav, orange accents ---------- */
.cp-header { top: 16px; }
.cp-header__inner {
    max-width: 1360px;
    margin: 0 auto;
    height: 60px;
    background: rgba(18, 21, 24, .72);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border-color: rgba(247, 247, 247, .10);
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
    transition: background-color .25s, border-color .25s;
}
.cp-header.is-scrolled .cp-header__inner,
.cp-header.is-open .cp-header__inner { background: rgba(18, 21, 24, .94); }
.cp-header__menu li a { color: rgba(247, 247, 247, .78); font-weight: 400; transition: color .2s; }
.cp-header__menu li a:hover,
.cp-header__menu li.current-menu-item > a,
.cp-header__menu li.current-menu-ancestor > a { color: var(--cp-accent); }

/* Header CTA pill (its rules live in connect-page.css, which v2 pages don't load) */
.cp-header__btn.cp-btn--accent {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 12px;
    max-height: 44px; padding: 4px 4px 4px 16px; border-radius: 999px;
    background: var(--cp-accent); color: #0B0D0F; font-family: var(--cp-font); font-size: 14px; font-weight: 500; line-height: 1;
    text-decoration: none; white-space: nowrap; transition: background-color .2s;
}
.cp-header__btn.cp-btn--accent:hover { background: #FFB35F; }
.cp-header__btn-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #0B0D0F; transition: transform .3s; }
.cp-header__btn.cp-btn--accent:hover .cp-header__btn-icon { transform: rotate(45deg); }

/* ---------- Footer: CTA as a rounded band, compact dark footer below ---------- */
.site-footer { background: #0B0D0F; border-radius: 0; margin: 0; padding-top: clamp(72px, 9vw, 128px); overflow: hidden; font-family: var(--cp-font); }
.footer__cta { padding: 0 clamp(8px, 1.4vw, 20px); }
.footer__cta-inner {
    position: relative; overflow: hidden; max-width: 1880px; gap: 24px;
    padding: clamp(64px, 8vw, 120px) clamp(20px, 4vw, 40px);
    border-radius: 28px;
    background: radial-gradient(90% 120% at 50% 120%, #EC670E 0%, #CF2201 38%, rgba(207, 34, 1, .35) 62%, transparent 80%), #121518;
    border: 1px solid rgba(247, 247, 247, .08);
}
.footer__cta-inner > * { position: relative; z-index: 1; }
.footer__cta-heading { font-size: clamp(36px, 5.4vw, 72px); line-height: 1.05; letter-spacing: -.03em; font-weight: 500; }
.footer__cta-desc { max-width: 640px; font-size: 18px; line-height: 1.55; color: rgba(247, 247, 247, .78); }
.footer__main { padding: clamp(56px, 6vw, 80px) 0 40px; }
.footer__watermark {
    position: absolute; right: -0.04em; bottom: -0.22em; margin: 0;
    font-size: clamp(120px, 20vw, 300px); font-weight: 700; letter-spacing: -.05em; line-height: 1;
    background: none; -webkit-text-fill-color: transparent; color: transparent;
    -webkit-text-stroke: 1px rgba(255, 150, 38, .16);
}
.footer__top-inner { max-width: 1360px; padding: 0 clamp(16px, 4vw, 40px); gap: 32px; }
.footer__col-label { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #FF9626; font-weight: 500; margin-bottom: 12px; }
.footer__col-label::before { content: "// "; opacity: .6; }
.footer__menu li a { font-size: 15px; padding: 6px 0; color: rgba(247, 247, 247, .74); }
.footer__menu li a:hover, .footer__contact-link:hover { color: #FF9626; }
.footer__contact-sublabel { color: rgba(247, 247, 247, .46); }
.footer__contact-link { font-size: 15px; color: #F7F7F7; }
.footer__bottom { padding: 0 0 32px; }
.footer__bottom-inner { max-width: 1360px; padding: 24px clamp(16px, 4vw, 40px) 0; border-top: 1px solid rgba(247, 247, 247, .08); }
.footer__copy, .footer__bottom-links li a, .footer-company { color: rgba(247, 247, 247, .56); }
.footer__social-link { border-color: rgba(247, 247, 247, .14); }
.footer__social-link:hover { border-color: #FF9626; background: rgba(255, 150, 38, .1); }
@media (max-width: 768px) {
    .site-footer { margin: 0; border-radius: 0; }
    .footer__watermark { font-size: 96px; }
    .footer__col-label::before { content: none; }
    .footer__col-label { margin-bottom: 0; }
    .footer__col-toggle { padding: 16px 0; }
}