/* ═══════════════════════════════════════════════════════
   CYBERFAR.DK — Main Stylesheet v1.0
   "Din medforælder i den digitale virkelighed"
   ═══════════════════════════════════════════════════════ */

/* ─── 0. CSS CUSTOM PROPERTIES ─────────────────────── */
:root {
    /* ── HUD Core Palette ────────────────────────── */
    --cf-dark:         #050d15;         /* deep space bg */
    --cf-navy:         #091624;         /* panel surface */
    --cf-blue:         #0d2135;         /* elevated panel */
    --cf-blue-light:   #142c47;         /* highlighted panel */

    /* ── Neon Accents ────────────────────────────── */
    --cf-cyan:         #00e5ff;         /* primary HUD teal */
    --cf-cyan-dim:     rgba(0,229,255,.3);
    --cf-orange:       #c95200;         /* action / alert */
    --cf-orange-hover: #a84300;
    --cf-orange-light: rgba(201,82,0,.12);
    --cf-teal:         #00e5ff;         /* alias = cyan */
    --cf-teal-light:   rgba(0,229,255,.1);
    --cf-green:        #39ff14;         /* status / online */

    /* ── Text ────────────────────────────────────── */
    --cf-light:        #091624;         /* dark panel surface (misnamed — kept for compatibility) */
    --cf-white:        #091624;         /* dark panel (misnamed — kept for compatibility) */
    --cf-text:         #c8e6f0;
    --cf-text-light:   #6aa8be;
    --cf-text-xlight:  #335566;

    /* ── Borders / Shadows ───────────────────────── */
    --cf-border:       rgba(0,229,255,.14);
    --cf-shadow-sm:    0 0 0 1px rgba(0,229,255,.08), 0 2px 10px rgba(0,0,0,.5);
    --cf-shadow:       0 0 0 1px rgba(0,229,255,.1),  0 4px 24px rgba(0,0,0,.6);
    --cf-shadow-lg:    0 0 0 1px rgba(0,229,255,.12), 0 8px 40px rgba(0,0,0,.7);

    /* ── Shape ───────────────────────────────────── */
    --cf-radius-sm:    2px;
    --cf-radius:       3px;
    --cf-radius-lg:    4px;
    --cf-radius-xl:    6px;

    /* ── Typography ──────────────────────────────── */
    --cf-transition:   .18s ease;
    --cf-font-head:    'Exo 2', 'Segoe UI', system-ui, sans-serif;
    --cf-font-body:    'DM Sans', 'Segoe UI', system-ui, sans-serif;
    --cf-font-mono:    'JetBrains Mono', 'Courier New', monospace;
    --cf-max-width:    1200px;
}

/* ─── 1. RESET & BASE ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    font-family: var(--cf-font-body);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--cf-text);
    background-color: var(--cf-dark);
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,.055) 2px,
        rgba(0,0,0,.055) 4px
    );
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--cf-orange); text-decoration: none; transition: color var(--cf-transition); }
a:hover { color: var(--cf-orange-hover); }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
h1,h2,h3,h4,h5,h6 {
    font-family: var(--cf-font-head);
    font-weight: 700;
    line-height: 1.2;
    color: #ddeef5;
}
.screen-reader-text {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}
.skip-link:focus {
    position: static; width: auto; height: auto;
    clip: auto; overflow: visible; padding: .5rem 1rem;
    background: var(--cf-orange); color: #fff;
    font-weight: 600; z-index: 9999;
}

/* ─── 2. LAYOUT UTILITIES ───────────────────────────── */
.cf-container {
    width: 100%;
    max-width: var(--cf-max-width);
    margin-inline: auto;
    padding-inline: 1.5rem;
}
.cf-section {
    padding-block: 5rem;
}
.cf-section--dark {
    background: var(--cf-dark);
    color: #fff;
}
.cf-section--dark h1,
.cf-section--dark h2,
.cf-section--dark h3,
.cf-section--dark h4 { color: #fff; }
.cf-section--navy {
    background: var(--cf-navy);
    color: #fff;
}
.cf-section--navy h1,
.cf-section--navy h2,
.cf-section--navy h3 { color: #fff; }
.cf-section--light { background: var(--cf-light); }
.cf-section--orange {
    background: linear-gradient(135deg, var(--cf-orange) 0%, #f59c40 100%);
    color: #fff;
}
.cf-section--orange h2,
.cf-section--orange p { color: #fff; }
.cf-section-header {
    text-align: center;
    margin-bottom: 3.5rem;
}
.cf-section-header h2 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    margin-bottom: .75rem;
}
.cf-section-header p {
    font-size: 1.1rem;
    color: var(--cf-text-light);
    max-width: 640px;
    margin-inline: auto;
}
.cf-section--dark .cf-section-header p,
.cf-section--navy .cf-section-header p { color: rgba(255,255,255,.7); }

.cf-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.cf-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.cf-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.cf-flex-center { display: flex; align-items: center; justify-content: center; }
.cf-text-center { text-align: center; }
.cf-mt-1 { margin-top: .5rem; }
.cf-mt-2 { margin-top: 1rem; }
.cf-mt-3 { margin-top: 1.5rem; }
.cf-mt-4 { margin-top: 2rem; }

/* ─── 3. TOPBAR ─────────────────────────────────────── */
.cf-topbar {
    background: var(--cf-dark);
    color: rgba(255,255,255,.85);
    font-size: .82rem;
    padding: .45rem 0;
    position: relative;
    z-index: 200;
}
.cf-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.cf-topbar__msg { display: flex; align-items: center; gap: .5rem; }
.cf-topbar__dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #4ade80; flex-shrink: 0;
    box-shadow: 0 0 6px #4ade80;
    animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
    0%,100% { opacity: 1; }
    50% { opacity: .4; }
}
.cf-topbar__cta {
    color: var(--cf-orange);
    font-weight: 600;
    white-space: nowrap;
    transition: color var(--cf-transition);
}
.cf-topbar__cta:hover { color: #fff; }

/* ─── 4. HEADER & NAV ───────────────────────────────── */
.cf-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(13,27,46,.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,.07);
    transition: background var(--cf-transition), box-shadow var(--cf-transition);
}
.cf-header.scrolled {
    background: rgba(13,27,46,.99);
    box-shadow: var(--cf-shadow);
}
.cf-header__inner {
    display: flex;
    align-items: center;
    gap: 2rem;
    height: 80px;
}
.cf-logo { display: flex; align-items: center; flex-shrink: 0; }
.cf-logo__img,
.custom-logo { height: 60px; width: auto; display: block; }
.cf-logo__text {
    font-family: var(--cf-font-head);
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
}
.cf-nav { flex: 1; }
.cf-nav__list {
    display: flex;
    align-items: center;
    gap: .25rem;
}
.cf-nav__list .menu-item a {
    color: rgba(255,255,255,.82);
    font-size: .9rem;
    font-weight: 500;
    padding: .5rem .75rem;
    border-radius: var(--cf-radius-sm);
    transition: color var(--cf-transition), background var(--cf-transition);
}
.cf-nav__list .menu-item a:hover,
.cf-nav__list .menu-item.current-menu-item a {
    color: #fff;
    background: rgba(255,255,255,.08);
}
.cf-nav__list .menu-item.current-menu-item a { color: var(--cf-orange); }
.cf-header__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}
.cf-burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: .5rem;
    border-radius: var(--cf-radius-sm);
}
.cf-burger span {
    display: block; width: 22px; height: 2px;
    background: #fff; border-radius: 2px;
    transition: transform .3s, opacity .3s;
}
.cf-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cf-burger.open span:nth-child(2) { opacity: 0; }
.cf-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav overlay */
.cf-nav-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 98;
}
.cf-nav-overlay.active { display: block; }

/* ─── 5. BUTTONS ────────────────────────────────────── */
.cf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem 1.75rem;
    border-radius: 50px;
    font-family: var(--cf-font-head);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1;
    transition: background var(--cf-transition), color var(--cf-transition), box-shadow var(--cf-transition), transform var(--cf-transition);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}
.cf-btn:active { transform: translateY(1px); }
.cf-btn--primary {
    background: var(--cf-orange);
    color: #fff;
    box-shadow: 0 4px 14px rgba(232,99,10,.35);
}
.cf-btn--primary:hover {
    background: var(--cf-orange-hover);
    color: #fff;
    box-shadow: 0 6px 20px rgba(232,99,10,.45);
    transform: translateY(-1px);
}
.cf-btn--secondary {
    background: var(--cf-teal);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,180,197,.25);
}
.cf-btn--secondary:hover {
    background: #009eae;
    color: #fff;
    transform: translateY(-1px);
}
.cf-btn--ghost {
    background: transparent;
    color: var(--cf-orange);
    border: 2px solid var(--cf-orange);
}
.cf-btn--ghost:hover {
    background: var(--cf-orange);
    color: #fff;
}
.cf-btn--ghost-white {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,.5);
}
.cf-btn--ghost-white:hover {
    background: rgba(255,255,255,.12);
    color: #fff;
    border-color: rgba(255,255,255,.8);
}
.cf-btn--lg { padding: 1rem 2.5rem; font-size: 1.05rem; }
.cf-btn--sm { padding: .5rem 1.25rem; font-size: .85rem; }
.cf-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

/* ─── 6. HERO ───────────────────────────────────────── */
.cf-hero {
    position: relative;
    min-height: 88vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--cf-dark) 0%, #0f2d56 60%, #1a4480 100%);
    overflow: hidden;
    padding-block: 5rem;
}
.cf-hero::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 60% at 80% 30%, rgba(0,180,197,.12) 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 15% 70%, rgba(232,99,10,.10) 0%, transparent 65%);
    pointer-events: none;
}
.cf-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}
.cf-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50px;
    padding: .4rem 1rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--cf-teal);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 1.5rem;
}
.cf-hero__badge-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--cf-teal);
    box-shadow: 0 0 8px var(--cf-teal);
}
.cf-hero__title {
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 1.25rem;
}
.cf-hero__title span { color: var(--cf-orange); }
.cf-hero__subtitle {
    font-size: 1.15rem;
    color: rgba(255,255,255,.75);
    margin-bottom: 2rem;
    max-width: 520px;
}
.cf-hero__stats {
    display: flex;
    gap: 2rem;
    margin-top: 2.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(255,255,255,.1);
}
.cf-hero__stat-num {
    font-family: var(--cf-font-head);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--cf-orange);
    display: block;
}
.cf-hero__stat-label {
    font-size: .8rem;
    color: rgba(255,255,255,.6);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.cf-hero__image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cf-hero__image img {
    max-height: 420px;
    border-radius: var(--cf-radius-lg);
    box-shadow: var(--cf-shadow-lg);
    position: relative;
    z-index: 1;
}
.cf-hero__wireframe {
    width: 100%;
    max-width: 420px;
    height: auto;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 28px rgba(0,180,197,.18));
}
.cf-hero__image-glow {
    position: absolute;
    width: 70%; height: 70%;
    background: radial-gradient(circle, rgba(232,99,10,.3) 0%, transparent 70%);
    filter: blur(40px);
    z-index: 0;
}
/* Scroll indicator */
.cf-scroll-hint {
    position: absolute;
    bottom: 2rem; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: .4rem;
    color: rgba(255,255,255,.4); font-size: .75rem;
    animation: bounce 2.5s infinite;
}
.cf-scroll-hint svg { opacity: .6; }
@keyframes bounce {
    0%,100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(8px); }
}

/* ─── 7. FEATURE CARDS ──────────────────────────────── */
.cf-features { background: var(--cf-light); }
.cf-feature-card {
    background: var(--cf-white);
    border-radius: var(--cf-radius);
    padding: 2rem;
    box-shadow: var(--cf-shadow-sm);
    border: 1px solid var(--cf-border);
    transition: transform var(--cf-transition), box-shadow var(--cf-transition);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.cf-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--cf-shadow);
}
.cf-feature-card__icon {
    width: 56px; height: 56px;
    border-radius: var(--cf-radius);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
}
.cf-feature-card__icon--orange { background: var(--cf-orange-light); }
.cf-feature-card__icon--teal   { background: var(--cf-teal-light); }
.cf-feature-card__icon--blue   { background: #eff3fe; }
.cf-feature-card h3 { font-size: 1.1rem; margin-bottom: .25rem; }
.cf-feature-card p { color: var(--cf-text-light); font-size: .95rem; flex: 1; }

/* ─── 8. MEMBERSHIP SECTION ─────────────────────────── */
.cf-membership-card {
    background: var(--cf-white);
    border-radius: var(--cf-radius-lg);
    overflow: hidden;
    box-shadow: var(--cf-shadow-lg);
    border: 1px solid var(--cf-border);
    position: relative;
}
.cf-membership-card--featured {
    border-color: var(--cf-orange);
    box-shadow: 0 0 0 3px rgba(232,99,10,.18), var(--cf-shadow-lg);
}
.cf-membership-badge {
    position: absolute; top: 1.25rem; right: 1.25rem;
    background: var(--cf-orange);
    color: #fff;
    padding: .25rem .75rem;
    border-radius: 50px;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.cf-membership-card__header {
    background: linear-gradient(135deg, var(--cf-dark), var(--cf-navy));
    padding: 2rem;
    color: #fff;
    text-align: center;
}
.cf-membership-card__header h3 { color: #fff; font-size: 1.4rem; margin-bottom: .5rem; }
.cf-membership-price {
    font-family: var(--cf-font-head);
    font-size: 3rem;
    font-weight: 800;
    color: var(--cf-orange);
    line-height: 1;
}
.cf-membership-price small {
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255,255,255,.6);
}
.cf-membership-card__body { padding: 2rem; }
.cf-membership-features {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 2rem;
}
.cf-membership-features li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    font-size: .95rem;
}
.cf-membership-features li::before {
    content: '✓';
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #dcfce7;
    color: #16a34a;
    font-size: .75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: .15rem;
}

/* Tabs (For FORÆLDRE / For BØRNENE) */
.cf-tabs { max-width: 900px; margin-inline: auto; }
.cf-tabs__nav {
    display: flex;
    background: var(--cf-light);
    border-radius: var(--cf-radius);
    padding: .35rem;
    gap: .35rem;
    margin-bottom: 2rem;
    border: 1px solid var(--cf-border);
}
.cf-tab-btn {
    flex: 1;
    padding: .75rem 1rem;
    border-radius: calc(var(--cf-radius) - 2px);
    font-family: var(--cf-font-head);
    font-size: .95rem;
    font-weight: 600;
    color: var(--cf-text-light);
    transition: all var(--cf-transition);
    text-align: center;
}
.cf-tab-btn.active {
    background: var(--cf-white);
    color: var(--cf-dark);
    box-shadow: var(--cf-shadow-sm);
}
.cf-tab-btn--orange.active { color: var(--cf-orange); }
.cf-tab-btn--teal.active   { color: var(--cf-teal); }
.cf-tab-panel { display: none; }
.cf-tab-panel.active { display: block; animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cf-tab-content-box {
    background: var(--cf-white);
    border-radius: var(--cf-radius-lg);
    padding: 2.5rem;
    box-shadow: var(--cf-shadow);
    border: 1px solid var(--cf-border);
}
.cf-tab-content-box h3 { font-size: 1.3rem; margin-bottom: 1rem; }
.cf-tab-list {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-bottom: 1.5rem;
}
.cf-tab-list li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    font-size: .95rem;
    color: var(--cf-text);
}
.cf-tab-list li::before {
    content: '→';
    color: var(--cf-orange);
    font-weight: 700;
    flex-shrink: 0;
}
.cf-note {
    font-size: .85rem;
    color: var(--cf-text-light);
    background: var(--cf-light);
    border-left: 3px solid var(--cf-teal);
    padding: .75rem 1rem;
    border-radius: 0 var(--cf-radius-sm) var(--cf-radius-sm) 0;
}
.cf-note strong { color: var(--cf-dark); }

/* ─── 9. ACCORDION (FAQ) ─────────────────────────────── */
.cf-accordion { display: flex; flex-direction: column; gap: .75rem; }
.cf-accordion-item {
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius);
    overflow: hidden;
    transition: box-shadow var(--cf-transition);
}
.cf-accordion-item.open {
    box-shadow: var(--cf-shadow);
    border-color: var(--cf-orange);
}
.cf-accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--cf-white);
    text-align: left;
    font-family: var(--cf-font-head);
    font-size: 1rem;
    font-weight: 600;
    color: var(--cf-dark);
    transition: background var(--cf-transition), color var(--cf-transition);
    cursor: pointer;
    border: none;
}
.cf-accordion-trigger:hover { background: var(--cf-light); }
.cf-accordion-item.open .cf-accordion-trigger {
    background: var(--cf-orange);
    color: #fff;
}
.cf-accordion-icon {
    width: 24px; height: 24px; flex-shrink: 0;
    border: 2px solid currentColor;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem;
    transition: transform .3s;
}
.cf-accordion-item.open .cf-accordion-icon { transform: rotate(45deg); }
.cf-accordion-body {
    display: none;
    padding: 1.25rem 1.5rem;
    background: var(--cf-white);
    color: var(--cf-text);
    font-size: .95rem;
    line-height: 1.8;
    border-top: 1px solid var(--cf-border);
}
.cf-accordion-item.open .cf-accordion-body { display: block; animation: fadeIn .2s ease; }

/* ─── 10. APP DOWNLOAD SECTION ──────────────────────── */
.cf-app-section {
    background: linear-gradient(135deg, var(--cf-dark) 0%, var(--cf-navy) 100%);
    position: relative;
    overflow: hidden;
}
.cf-app-section::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 50% 80% at 80% 50%, rgba(0,180,197,.12) 0%, transparent 70%);
    pointer-events: none;
}
.cf-app-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}
.cf-app-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}
.cf-app-badge {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--cf-radius);
    padding: .75rem 1.25rem;
    color: #fff;
    transition: background var(--cf-transition), border-color var(--cf-transition);
    min-width: 160px;
}
.cf-app-badge:hover {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.4);
    color: #fff;
}
.cf-app-badge__icon { flex-shrink: 0; }
.cf-app-badge span { display: flex; flex-direction: column; line-height: 1.2; }
.cf-app-badge span small { font-size: .7rem; opacity: .7; }
.cf-app-badge span strong { font-size: .95rem; }
.cf-app-coming-soon {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255,255,255,.05);
    border: 1px dashed rgba(255,255,255,.25);
    border-radius: var(--cf-radius);
    padding: .5rem 1rem;
    font-size: .82rem;
    color: rgba(255,255,255,.55);
    margin-top: .75rem;
}
.cf-app-mockup {
    width: 260px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 32px;
    padding: 1.5rem;
    aspect-ratio: 9/18;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
}
.cf-app-mockup__inner {
    width: 100%;
    background: rgba(255,255,255,.06);
    border-radius: 20px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cf-app-mockup__placeholder {
    font-size: .8rem;
    color: rgba(255,255,255,.3);
    text-align: center;
}

/* ─── 12. CONTACT FORM ──────────────────────────────── */
.cf-form { display: flex; flex-direction: column; gap: 1.25rem; }
.cf-form-group { display: flex; flex-direction: column; gap: .4rem; }
.cf-form-group label {
    font-size: .875rem;
    font-weight: 600;
    color: var(--cf-dark);
}
.cf-form-group label span { color: var(--cf-orange); }
.cf-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.cf-input,
.cf-select,
.cf-textarea {
    width: 100%;
    padding: .8rem 1rem;
    border: 1.5px solid var(--cf-border);
    border-radius: var(--cf-radius-sm);
    font-family: var(--cf-font-body);
    font-size: .95rem;
    color: var(--cf-dark);
    background: var(--cf-white);
    transition: border-color var(--cf-transition), box-shadow var(--cf-transition);
    outline: none;
}
.cf-input:focus,
.cf-select:focus,
.cf-textarea:focus {
    border-color: var(--cf-orange);
    box-shadow: 0 0 0 3px rgba(232,99,10,.12);
}
.cf-textarea { resize: vertical; min-height: 130px; }
.cf-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23718096' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
.cf-form__msg {
    padding: .75rem 1rem;
    border-radius: var(--cf-radius-sm);
    font-size: .9rem;
    font-weight: 500;
    display: none;
}
.cf-form__msg--success { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; display: block; }
.cf-form__msg--error   { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; display: block; }

/* ─── 13. EVENTS CAROUSEL ───────────────────────────── */
.cf-carousel { position: relative; overflow: hidden; }
.cf-carousel__track {
    display: flex;
    gap: 1.5rem;
    transition: transform .45s ease;
}
.cf-carousel__slide {
    flex: 0 0 calc(33.333% - 1rem);
    min-width: 280px;
}
.cf-event-card {
    background: var(--cf-white);
    border-radius: var(--cf-radius);
    overflow: hidden;
    box-shadow: var(--cf-shadow-sm);
    border: 1px solid var(--cf-border);
    transition: transform var(--cf-transition), box-shadow var(--cf-transition);
}
.cf-event-card:hover { transform: translateY(-4px); box-shadow: var(--cf-shadow); }
.cf-event-card__img {
    height: 180px;
    background: linear-gradient(135deg, var(--cf-navy), var(--cf-blue));
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem;
}
.cf-event-card__body { padding: 1.25rem; }
.cf-event-card__date {
    font-size: .8rem;
    font-weight: 600;
    color: var(--cf-orange);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .4rem;
}
.cf-event-card h3 { font-size: 1rem; margin-bottom: .4rem; }
.cf-event-card p { font-size: .875rem; color: var(--cf-text-light); }
.cf-carousel__btn {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--cf-white);
    box-shadow: var(--cf-shadow);
    border: 1px solid var(--cf-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    color: var(--cf-dark);
    z-index: 2;
    transition: background var(--cf-transition), color var(--cf-transition);
}
.cf-carousel__btn:hover { background: var(--cf-orange); color: #fff; border-color: var(--cf-orange); }
.cf-carousel__btn--prev { left: -22px; }
.cf-carousel__btn--next { right: -22px; }
.cf-carousel__dots {
    display: flex; justify-content: center; gap: .5rem; margin-top: 1.5rem;
}
.cf-carousel__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--cf-border);
    transition: background var(--cf-transition), transform var(--cf-transition);
    cursor: pointer;
}
.cf-carousel__dot.active {
    background: var(--cf-orange);
    transform: scale(1.3);
}

/* ─── 14. PAGE HERO (inner pages) ─────────────────────── */
.cf-page-hero {
    background: linear-gradient(135deg, var(--cf-dark) 0%, var(--cf-navy) 100%);
    padding: 5rem 0 4rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cf-page-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(0,180,197,.1) 0%, transparent 70%);
    pointer-events: none;
}
.cf-page-hero .cf-container { position: relative; z-index: 1; }
.cf-page-hero__eyebrow {
    display: inline-block;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    color: var(--cf-teal);
    border-radius: 50px;
    padding: .35rem 1rem;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 1rem;
}
.cf-page-hero h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    color: #fff;
    margin-bottom: 1rem;
}
.cf-page-hero p {
    font-size: 1.1rem;
    color: rgba(255,255,255,.7);
    max-width: 600px;
    margin-inline: auto;
}

/* ─── 15. RESOURCE CARDS ─────────────────────────────── */
.cf-resource-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.25rem;
    background: var(--cf-white);
    border-radius: var(--cf-radius);
    border: 1px solid var(--cf-border);
    box-shadow: var(--cf-shadow-sm);
    transition: transform var(--cf-transition), box-shadow var(--cf-transition);
}
.cf-resource-card:hover { transform: translateY(-3px); box-shadow: var(--cf-shadow); }
.cf-resource-card__icon {
    width: 48px; height: 48px; flex-shrink: 0;
    border-radius: var(--cf-radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
}
.cf-resource-card h4 { font-size: 1rem; margin-bottom: .25rem; }
.cf-resource-card p { font-size: .875rem; color: var(--cf-text-light); }
.cf-resource-card a { font-size: .85rem; font-weight: 600; }

/* ─── 16. TRUST BAR ─────────────────────────────────── */
.cf-trust-bar {
    background: var(--cf-light);
    border-top: 1px solid var(--cf-border);
    border-bottom: 1px solid var(--cf-border);
    padding: 1.5rem 0;
}
.cf-trust-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
}
.cf-trust-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--cf-text);
}
.cf-trust-item span { font-size: 1.2rem; }

/* ─── 17. NEWSLETTER BANNER ─────────────────────────── */
.cf-newsletter {
    background: linear-gradient(135deg, var(--cf-blue) 0%, var(--cf-dark) 100%);
    padding: 3.5rem 0;
}
.cf-newsletter__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}
.cf-newsletter__text h3 { color: #fff; font-size: 1.4rem; margin-bottom: .4rem; }
.cf-newsletter__text p { color: rgba(255,255,255,.7); font-size: .95rem; max-width: 420px; }
.cf-newsletter__form {
    flex-shrink: 0;
    width: 340px;
    max-width: 100%;
}
.cf-newsletter__form input {
    padding: .75rem 1.25rem;
    border-radius: 50px;
    border: 1.5px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: .95rem;
    width: 280px;
    outline: none;
    transition: border-color var(--cf-transition);
}
.cf-newsletter__form input::placeholder { color: rgba(255,255,255,.45); }
.cf-newsletter__form input:focus { border-color: rgba(255,255,255,.5); }

/* ─── 18. FOOTER ─────────────────────────────────────── */
.cf-footer {
    background: var(--cf-dark);
    color: rgba(255,255,255,.75);
    padding: 4rem 0 0;
}
.cf-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.cf-footer__brand { max-width: 300px; }
.cf-footer__tagline {
    font-size: .9rem;
    color: rgba(255,255,255,.55);
    margin: 1rem 0;
    line-height: 1.7;
}
.cf-footer__heading {
    font-family: var(--cf-font-head);
    font-size: .85rem;
    font-weight: 700;
    color: rgba(255,255,255,.4);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 1.25rem;
}
.cf-footer__links { display: flex; flex-direction: column; gap: .6rem; }
.cf-footer__links a {
    color: rgba(255,255,255,.65);
    font-size: .9rem;
    transition: color var(--cf-transition);
}
.cf-footer__links a:hover { color: #fff; }
.cf-footer__social { display: flex; gap: .75rem; margin-top: 1.25rem; }
.cf-social-icon {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.7);
    transition: background var(--cf-transition), color var(--cf-transition);
}
.cf-social-icon:hover { color: #fff; }
.cf-social-icon--facebook:hover { background: #1877f2; border-color: #1877f2; }
.cf-social-icon--linkedin:hover { background: #0a66c2; border-color: #0a66c2; }
.cf-social-icon--youtube:hover  { background: #ff0000; border-color: #ff0000; }
.cf-footer__app-text { font-size: .85rem; color: rgba(255,255,255,.5); margin-bottom: .75rem; }
.cf-footer__app-btns { display: flex; flex-direction: column; gap: .6rem; }
.cf-footer__app-btns .cf-app-badge {
    min-width: 0;
    font-size: .85rem;
}
.cf-footer__coming-soon {
    font-size: .75rem;
    color: rgba(255,255,255,.35);
    margin-top: .75rem;
    font-style: italic;
}
.cf-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 0;
    font-size: .83rem;
    color: rgba(255,255,255,.35);
    flex-wrap: wrap;
    gap: 1rem;
}
.cf-footer__bottom-links { display: flex; gap: 1rem; }
.cf-footer__bottom-links a { color: rgba(255,255,255,.4); transition: color var(--cf-transition); }
.cf-footer__bottom-links a:hover { color: rgba(255,255,255,.8); }

/* ─── 19. COOKIE BANNER ─────────────────────────────── */
.cf-cookie-banner {
    position: fixed;
    bottom: 1.5rem; left: 50%; transform: translateX(-50%);
    z-index: 9999;
    max-width: 680px; width: calc(100% - 2rem);
}
.cf-cookie-banner__inner {
    background: var(--cf-dark);
    color: rgba(255,255,255,.85);
    border: 1px solid rgba(255,255,255,.12);
    border-top: 2px solid var(--cf-primary);
    border-radius: var(--cf-radius);
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    box-shadow: var(--cf-shadow-lg);
}
.cf-cookie-banner__head {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.cf-cookie-banner__inner p { font-size: .88rem; line-height: 1.6; margin: 0; }
.cf-cookie-banner__inner a { color: var(--cf-teal); }
.cf-cookie-banner__btns { display: flex; gap: .75rem; flex-wrap: wrap; }

/* Floating manage-cookies tab */
.cf-cookie-manage {
    position: fixed;
    z-index: 9998;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .9rem;
    background: var(--cf-dark);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--cf-radius);
    color: rgba(255,255,255,.6);
    font-size: .72rem;
    font-family: inherit;
    letter-spacing: .04em;
    transition: all var(--cf-transition);
    /* Desktop: bottom-right */
    bottom: 1.5rem;
    right: 1.5rem;
}
.cf-cookie-manage:hover {
    border-color: rgba(255,255,255,.4);
    color: rgba(255,255,255,.9);
}
.cf-cookie-manage__icon { font-size: .9rem; }

@media (max-width: 768px) {
    .cf-cookie-manage {
        /* Right-side vertical tab */
        bottom: auto;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        flex-direction: column;
        gap: .3rem;
        padding: .9rem .5rem;
        border-radius: 4px 0 0 4px;
        border-right: none;
    }
    .cf-cookie-manage__label {
        writing-mode: vertical-lr;
        text-orientation: mixed;
        font-size: .68rem;
        letter-spacing: .06em;
    }
    .cf-cookie-manage__icon { font-size: 1rem; }
}

/* ─── 20. LEGAL PAGES ────────────────────────────────── */
.cf-legal-content {
    max-width: 820px;
    margin-inline: auto;
}
.cf-legal-content h2 {
    font-size: 1.4rem;
    margin: 2.5rem 0 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--cf-border);
    color: var(--cf-dark);
}
.cf-legal-content h2:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.cf-legal-content h3 { font-size: 1.1rem; margin: 1.5rem 0 .6rem; }
.cf-legal-content p { margin-bottom: 1rem; color: var(--cf-text); }
.cf-legal-content ul { margin: .75rem 0 1rem 1.5rem; list-style: disc; }
.cf-legal-content ul li { margin-bottom: .4rem; color: var(--cf-text); }
.cf-legal-content table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: .9rem; }
.cf-legal-content th {
    background: var(--cf-light);
    font-weight: 700;
    text-align: left;
    padding: .75rem 1rem;
    border: 1px solid var(--cf-border);
}
.cf-legal-content td { padding: .75rem 1rem; border: 1px solid var(--cf-border); vertical-align: top; }
.cf-legal-content tr:nth-child(even) td { background: var(--cf-light); }
.cf-last-updated {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--cf-light);
    border: 1px solid var(--cf-border);
    border-radius: 50px;
    padding: .4rem 1rem;
    font-size: .82rem;
    color: var(--cf-text-light);
    margin-bottom: 2rem;
}

/* ─── 21. ABOUT PAGE ─────────────────────────────────── */
.cf-quote {
    background: linear-gradient(135deg, var(--cf-navy), var(--cf-dark));
    border-left: 4px solid var(--cf-orange);
    border-radius: 0 var(--cf-radius) var(--cf-radius) 0;
    padding: 1.5rem 2rem;
    margin: 2rem 0;
    color: rgba(255,255,255,.85);
    font-size: 1.05rem;
    font-style: italic;
}
.cf-quote footer {
    margin-top: .75rem;
    font-style: normal;
    font-size: .85rem;
    color: var(--cf-orange);
    font-weight: 600;
}
.cf-vision-box {
    background: var(--cf-light);
    border-radius: var(--cf-radius-lg);
    padding: 2.5rem;
    border: 1px solid var(--cf-border);
}
.cf-vision-box h3 { font-size: 1.3rem; margin-bottom: 1rem; }
.cf-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}
.cf-value-card {
    background: var(--cf-white);
    border-radius: var(--cf-radius);
    padding: 1.75rem;
    border: 1px solid var(--cf-border);
    box-shadow: var(--cf-shadow-sm);
    text-align: center;
}
.cf-value-card__emoji { font-size: 2.5rem; margin-bottom: .75rem; }
.cf-value-card h4 { font-size: 1rem; margin-bottom: .4rem; }
.cf-value-card p { font-size: .875rem; color: var(--cf-text-light); }

/* ─── 22. PRICING PAGE ──────────────────────────────── */
.cf-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    align-items: start;
}
.cf-pricing-card {
    background: var(--cf-white);
    border-radius: var(--cf-radius-lg);
    overflow: hidden;
    box-shadow: var(--cf-shadow);
    border: 2px solid var(--cf-border);
    transition: transform var(--cf-transition), box-shadow var(--cf-transition);
}
.cf-pricing-card:hover { transform: translateY(-6px); }
.cf-pricing-card--featured {
    border-color: var(--cf-orange);
    transform: scale(1.03);
    box-shadow: 0 0 0 4px rgba(232,99,10,.15), var(--cf-shadow-lg);
}
.cf-pricing-card--featured:hover { transform: scale(1.03) translateY(-4px); }
.cf-pricing-header {
    background: linear-gradient(135deg, var(--cf-dark), var(--cf-navy));
    padding: 2rem;
    text-align: center;
    color: #fff;
}
.cf-pricing-header h3 { color: #fff; font-size: 1.2rem; margin-bottom: .5rem; }
.cf-pricing-price {
    font-family: var(--cf-font-head);
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--cf-orange);
    line-height: 1;
    margin: .75rem 0 .25rem;
}
.cf-pricing-price span { font-size: 1rem; font-weight: 500; color: rgba(255,255,255,.5); }
.cf-pricing-price small { font-size: .85rem; }
.cf-pricing-desc { font-size: .85rem; color: rgba(255,255,255,.55); }
.cf-pricing-body { padding: 2rem; }
.cf-pricing-features {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 2rem;
}
.cf-pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    font-size: .9rem;
    color: var(--cf-text);
}
.cf-pricing-features li .check {
    width: 20px; height: 20px; flex-shrink: 0;
    border-radius: 50%; background: #dcfce7; color: #16a34a;
    font-size: .7rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    margin-top: .15rem;
}
.cf-pricing-features li .cross {
    width: 20px; height: 20px; flex-shrink: 0;
    border-radius: 50%; background: var(--cf-light); color: var(--cf-text-xlight);
    font-size: .8rem;
    display: flex; align-items: center; justify-content: center;
    margin-top: .15rem;
}
.cf-pricing-features li.dimmed { color: var(--cf-text-xlight); }

/* ─── 22b. SINGLE MEMBERSHIP CARD ───────────────────── */
.cf-membership-single {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 0;
    background: linear-gradient(135deg, var(--cf-dark) 0%, #0f2540 100%);
    border-radius: var(--cf-radius-lg);
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(232,99,10,.3), var(--cf-shadow-lg);
    max-width: 1000px;
    margin-inline: auto;
}
/* Left column */
.cf-membership-single__left {
    background: linear-gradient(160deg, #0d1b2e 0%, #0a1628 100%);
    border-right: 1px solid rgba(232,99,10,.2);
    padding: 2.75rem 2.25rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}
.cf-membership-single__badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(232,99,10,.15);
    border: 1px solid rgba(232,99,10,.4);
    color: var(--cf-orange);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .35rem .85rem;
    border-radius: 999px;
}
.cf-membership-single__badge::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--cf-orange);
    animation: pulse-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%,100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .4; transform: scale(.6); }
}
.cf-membership-single__price-block { width: 100%; }
.cf-membership-single__price {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    margin-bottom: .6rem;
}
.cf-membership-single__amount {
    font-family: var(--cf-font-head);
    font-size: 4rem;
    font-weight: 800;
    color: var(--cf-orange);
    line-height: 1;
}
.cf-membership-single__unit {
    font-size: .95rem;
    color: rgba(255,255,255,.45);
    font-weight: 500;
    line-height: 1.3;
    padding-bottom: .4rem;
}
.cf-membership-single__unit small {
    display: block;
    font-size: .8rem;
}
.cf-membership-single__tagline {
    font-size: .88rem;
    color: rgba(255,255,255,.55);
    line-height: 1.5;
}
.cf-membership-single__cta {
    width: 100%;
    justify-content: center;
    font-size: 1rem;
}
.cf-membership-single__trial {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .83rem;
    color: var(--cf-teal);
}
.cf-membership-single__trial strong { color: #fff; }
.cf-membership-single__meta {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    font-size: .78rem;
    color: rgba(255,255,255,.35);
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,.07);
    width: 100%;
}
.cf-membership-single__meta span { display: flex; align-items: center; gap: .4rem; }

/* Right column */
.cf-membership-single__right {
    padding: 2.75rem 2.5rem;
}
.cf-membership-single__benefits-title {
    font-size: 1rem;
    font-weight: 700;
    color: rgba(255,255,255,.5);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 1.5rem;
}
.cf-membership-single__benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.cf-membership-single__benefits li {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    color: rgba(255,255,255,.85);
}
.cf-msb__icon {
    width: 38px; height: 38px;
    flex-shrink: 0;
    border-radius: var(--cf-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-top: .1rem;
}
.cf-membership-single__benefits li div {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.cf-membership-single__benefits li strong {
    font-size: .9rem;
    color: #fff;
    font-weight: 600;
}
.cf-membership-single__benefits li span {
    font-size: .78rem;
    color: rgba(255,255,255,.45);
    line-height: 1.45;
}

/* ─── 22c. BOOK CYBERFAR PAGE ───────────────────────── */

/* Audience cards */
.cf-book-audience-card {
    background: var(--cf-white);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-lg);
    padding: 2rem 1.75rem;
    transition: transform var(--cf-transition), box-shadow var(--cf-transition);
}
.cf-book-audience-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--cf-shadow-lg);
}
.cf-book-audience-card__icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    display: block;
}
.cf-book-audience-card h3 {
    font-size: 1.05rem;
    margin-bottom: .6rem;
    color: var(--cf-dark);
}
.cf-book-audience-card p {
    font-size: .875rem;
    color: var(--cf-text-light);
    line-height: 1.6;
    margin: 0;
}

/* Topic rows */
.cf-book-topic {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    background: var(--cf-white);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-lg);
    padding: 1.75rem;
    transition: box-shadow var(--cf-transition);
}
.cf-book-topic:hover { box-shadow: var(--cf-shadow); }
.cf-book-topic__num {
    font-family: var(--cf-font-head);
    font-size: 1.1rem;
    font-weight: 800;
    width: 44px; height: 44px;
    flex-shrink: 0;
    border-radius: var(--cf-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: .02em;
}
.cf-book-topic h3 {
    font-size: 1rem;
    margin-bottom: .5rem;
    color: var(--cf-dark);
}
.cf-book-topic p {
    font-size: .875rem;
    color: var(--cf-text-light);
    line-height: 1.65;
    margin: 0;
}

/* Practical info cards (dark bg) */
.cf-book-info-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--cf-radius-lg);
    padding: 1.75rem 1.5rem;
    text-align: center;
}
.cf-book-info-card__icon {
    font-size: 1.75rem;
    margin-bottom: .75rem;
    display: block;
}
.cf-book-info-card h4 {
    color: #fff;
    font-size: .95rem;
    margin-bottom: .5rem;
}
.cf-book-info-card p {
    font-size: .825rem;
    color: rgba(255,255,255,.5);
    line-height: 1.6;
    margin: 0;
}

/* CTA box */
.cf-book-cta-box {
    background: var(--cf-white);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-lg);
    box-shadow: var(--cf-shadow-lg);
    padding: 3.5rem 3rem;
    text-align: center;
}
.cf-book-cta-box__icon {
    font-size: 2.5rem;
    margin-bottom: 1.25rem;
    display: block;
}
.cf-book-cta-box h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: 1rem;
}
.cf-book-cta-box > p {
    color: var(--cf-text-light);
    font-size: .95rem;
    line-height: 1.7;
    max-width: 520px;
    margin: 0 auto 2rem;
}
.cf-book-cta-box__details {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
    padding: 1.5rem;
    background: var(--cf-light);
    border-radius: var(--cf-radius);
}
.cf-book-cta-box__details div {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    color: var(--cf-text);
    font-weight: 500;
}

/* ─── 23. RESPONSIVE ─────────────────────────────────── */
@media (max-width: 1024px) {
    .cf-hero__grid      { grid-template-columns: 1fr; text-align: center; }
    .cf-hero__subtitle  { margin-inline: auto; }
    .cf-hero__stats     { justify-content: center; }
    .cf-hero__image     { display: none; }
    .cf-grid-4          { grid-template-columns: repeat(2, 1fr); }
    .cf-footer__grid    { grid-template-columns: 1fr 1fr; }
    .cf-app-grid        { grid-template-columns: 1fr; }
    .cf-app-mockup      { display: none; }
    .cf-pricing-grid    { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
    .cf-pricing-card--featured { transform: none; }
    .cf-values-grid     { grid-template-columns: repeat(2, 1fr); }
    .cf-membership-single { grid-template-columns: 1fr; }
    .cf-membership-single__left { border-right: none; border-bottom: 1px solid rgba(232,99,10,.2); }
    .cf-membership-single__benefits { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .cf-section         { padding-block: 3.5rem; }
    .cf-grid-2,
    .cf-grid-3          { grid-template-columns: 1fr; }
    .cf-form-row        { grid-template-columns: 1fr; }
    .cf-footer__grid    { grid-template-columns: 1fr; gap: 2rem; }
    .cf-footer__brand   { max-width: 100%; }
    .cf-newsletter__inner { flex-direction: column; text-align: center; }
    .cf-newsletter__form { width: 100%; justify-content: center; }
    .cf-newsletter__form input { width: 100%; max-width: 320px; }
    .cf-footer__bottom  { flex-direction: column; text-align: center; }
    .cf-carousel__btn--prev { left: 0; }
    .cf-carousel__btn--next { right: 0; }
    .cf-carousel__slide { flex: 0 0 calc(100% - 0px); }
    .cf-values-grid     { grid-template-columns: 1fr; }
    .cf-membership-single__benefits { grid-template-columns: 1fr; }
    .cf-membership-single__amount   { font-size: 3rem; }
    .cf-membership-single__left     { padding: 1.75rem 1.25rem; }
    .cf-membership-single__right    { padding: 1.75rem 1.25rem; }
    .cf-membership-single           { overflow: visible; }
    .cf-membership-single__benefits li { gap: .65rem; }
    .cf-msb__icon                   { width: 32px; height: 32px; font-size: 1rem; flex-shrink: 0; }
    .cf-membership-single__benefits li strong { font-size: .85rem; }
    .cf-membership-single__benefits li span   { font-size: .75rem; }
    .cf-trial-note                  { font-size: .75rem; word-break: break-word; }
    .cf-steps { grid-template-columns: 1fr; }
    .cf-onboarding-card             { padding: 1.25rem; }
    .cf-onboarding-card__header     { flex-direction: column; gap: .75rem; }

    /* Mobile nav */
    .cf-burger { display: flex; }
    .cf-nav {
        position: fixed;
        top: 80px; left: 0;
        width: min(320px, 85vw);
        height: calc(100vh - 80px);
        background: var(--cf-dark);
        border-right: 1px solid rgba(255,255,255,.08);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .3s ease, visibility 0s .3s;
        z-index: 999;
        overflow-y: auto;
        padding: 1.5rem;
    }
    .cf-nav.open {
        transform: none;
        visibility: visible;
        transition: transform .3s ease, visibility 0s;
    }
    .cf-nav__list { flex-direction: column; gap: .25rem; }
    .cf-nav__list .menu-item a {
        display: block;
        font-size: 1rem;
        padding: .85rem 1rem;
    }
}

@media (max-width: 480px) {
    .cf-hero        { min-height: auto; }
    .cf-btn--lg     { width: 100%; }
    .cf-btn-group   { flex-direction: column; }
    .cf-tabs__nav   { flex-direction: column; }
    .cf-topbar__cta { display: none; }
}

/* ─── 24. MISC UTILITIES ─────────────────────────────── */
.cf-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .75rem;
    border-radius: 50px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.cf-badge--orange { background: var(--cf-orange-light); color: var(--cf-orange); }
.cf-badge--teal   { background: var(--cf-teal-light);   color: #007a87; }
.cf-badge--dark   { background: rgba(255,255,255,.1);    color: rgba(255,255,255,.8); }
.cf-divider {
    height: 1px; background: var(--cf-border);
    margin: 2rem 0; border: none;
}
.cf-highlight { color: var(--cf-orange); }
.cf-teal      { color: var(--cf-teal); }
.wp-block-image { margin: 1.5rem 0; }
.alignwide  { width: 100%; }

/* ── Fluxer onboarding card ── */
.cf-onboarding-card {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(232,99,10,.35);
    border-radius: var(--cf-radius-lg);
    padding: 2.5rem;
    max-width: 900px;
    margin-inline: auto;
}
.cf-onboarding-card__badge {
    display: inline-flex;
    margin-bottom: 1.5rem;
}
.cf-onboarding-card__badge span {
    background: rgba(232,99,10,.15);
    color: var(--cf-orange);
    border: 1px solid rgba(232,99,10,.4);
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    padding: .3rem .9rem;
    letter-spacing: .02em;
}
.cf-onboarding-card__header {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    margin-bottom: 2rem;
}
.cf-onboarding-card__icon {
    font-size: 2.5rem;
    flex-shrink: 0;
    margin-top: .1rem;
}
.cf-onboarding-card__title {
    color: #fff;
    font-size: clamp(1.25rem, 2.5vw, 1.6rem);
    margin-bottom: .6rem;
}
.cf-onboarding-card__lead {
    color: rgba(255,255,255,.7);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
}
.cf-onboarding-points {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.cf-onboarding-point {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.cf-onboarding-point__icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-top: .1rem;
}
.cf-onboarding-point strong {
    display: block;
    color: #fff;
    font-size: .95rem;
    margin-bottom: .3rem;
}
.cf-onboarding-point p {
    color: rgba(255,255,255,.6);
    font-size: .875rem;
    line-height: 1.65;
    margin: 0;
}
.cf-onboarding-card__note {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    background: rgba(0,180,197,.08);
    border: 1px solid rgba(0,180,197,.25);
    border-radius: var(--cf-radius);
    padding: 1rem 1.25rem;
    color: rgba(255,255,255,.55);
}
.cf-onboarding-card__note svg { color: var(--cf-teal); }
.cf-onboarding-card__note p {
    font-size: .875rem;
    line-height: 1.65;
    margin: 0;
}
@media (max-width: 600px) {
    .cf-onboarding-card { padding: 1.5rem; }
    .cf-onboarding-card__header { flex-direction: column; gap: .75rem; }
    .cf-onboarding-points { grid-template-columns: 1fr; }
}

/* ── Trial breakdown ── */
.cf-trial-breakdown {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem 1rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--cf-border);
}
.cf-trial-col__label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cf-text-xlight);
    margin-bottom: .5rem;
}
.cf-trial-col ul {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.cf-trial-col ul li {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    font-size: .82rem;
    color: var(--cf-text);
    line-height: 1.4;
}
.cf-trial-yes {
    color: var(--cf-green);
    font-weight: 700;
    flex-shrink: 0;
}
.cf-trial-no {
    color: var(--cf-text-xlight);
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Steps (Medlemskab page) ── */
.cf-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    margin-top: 2.5rem;
}
.cf-step {
    background: var(--cf-white);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-lg);
    padding: 2rem 1.5rem;
    text-align: center;
    position: relative;
    box-shadow: var(--cf-shadow-sm);
    transition: box-shadow .2s;
}
.cf-step:hover { box-shadow: var(--cf-shadow-md); }
.cf-step__number {
    position: absolute;
    top: -1rem;
    left: 1.5rem;
    width: 2rem;
    height: 2rem;
    background: var(--cf-orange);
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
    font-size: .875rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cf-step__icon {
    font-size: 2.5rem;
    margin-bottom: .75rem;
}
.cf-step h3 {
    font-size: 1.05rem;
    margin-bottom: .5rem;
    color: var(--cf-navy);
}
.cf-step p {
    font-size: .9rem;
    color: var(--cf-text-light);
    line-height: 1.6;
}
.alignfull  { width: 100vw; margin-left: calc(50% - 50vw); }

/* ═══════════════════════════════════════════════════════
   CYBERFAR HUD — SCI-FI SYSTEM OVERRIDES v2.0
   ═══════════════════════════════════════════════════════ */

/* ── TOPBAR: SYSTEM STATUS BAR ── */
.cf-topbar {
    background: rgba(5,13,21,.99);
    border-bottom: 1px solid rgba(0,229,255,.18);
    font-family: var(--cf-font-mono);
    font-size: .72rem;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.cf-topbar__dot {
    background: var(--cf-green);
    box-shadow: 0 0 8px var(--cf-green);
}
.cf-topbar__msg strong { color: var(--cf-orange); }

/* ── HEADER: HUD PANEL ── */
.cf-header {
    background: rgba(5,13,21,.97);
    border-bottom: 1px solid rgba(0,229,255,.18);
    box-shadow: 0 1px 0 rgba(0,229,255,.06), 0 4px 30px rgba(0,0,0,.7);
}
.cf-header.scrolled {
    background: rgba(5,13,21,1);
    box-shadow: 0 1px 0 rgba(0,229,255,.12), 0 4px 30px rgba(0,0,0,.9);
}

/* ── NAV: MONOSPACE COMMAND LINKS ── */
.cf-nav__list .menu-item a {
    font-family: var(--cf-font-mono);
    font-size: .76rem;
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .45rem .8rem;
    border-radius: 0;
    color: rgba(180,220,235,.55);
    border: 1px solid transparent;
    transition: all var(--cf-transition);
}
.cf-nav__list .menu-item a:hover,
.cf-nav__list .menu-item.current-menu-item a {
    color: var(--cf-cyan);
    background: rgba(0,229,255,.06);
    border-color: rgba(0,229,255,.2);
    text-shadow: 0 0 12px rgba(0,229,255,.5);
}
.cf-nav__list .menu-item.current-menu-item a::after {
    content: '_';
    margin-left: 2px;
    animation: hud-blink 1.2s step-end infinite;
    color: var(--cf-cyan);
}
@keyframes hud-blink {
    0%,100% { opacity: 1; }
    50%      { opacity: 0; }
}

/* ── BUTTONS: ANGULAR HUD STYLE ── */
.cf-btn {
    border-radius: 0;
    letter-spacing: .07em;
    font-family: var(--cf-font-mono);
    font-size: .82rem;
    text-transform: uppercase;
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
    box-shadow: none;
}
@keyframes cf-btn-breathe {
    0%,100% { filter: drop-shadow(0 0 8px rgba(255,107,26,.45)); }
    50%      { filter: drop-shadow(0 0 16px rgba(255,107,26,.7)); }
}
.cf-btn--primary {
    background: var(--cf-orange);
    box-shadow: none;
    animation: cf-btn-breathe 2.8s ease-in-out infinite;
}
.cf-btn--primary:hover {
    background: var(--cf-orange-hover);
    color: #fff;
    box-shadow: none;
    animation: none;
    filter: drop-shadow(0 0 24px rgba(255,107,26,.9));
    transform: translateY(-1px);
}
.cf-btn--secondary {
    background: var(--cf-cyan);
    color: var(--cf-dark);
    box-shadow: none;
    filter: drop-shadow(0 0 8px rgba(0,229,255,.4));
}
.cf-btn--secondary:hover {
    background: #1af0ff;
    color: var(--cf-dark);
    box-shadow: none;
    filter: drop-shadow(0 0 18px rgba(0,229,255,.7));
}
.cf-btn--ghost {
    border: 1px solid rgba(255,107,26,.5);
    color: var(--cf-orange);
    background: transparent;
}
.cf-btn--ghost:hover {
    background: rgba(255,107,26,.1);
    border-color: var(--cf-orange);
    color: var(--cf-orange);
    filter: drop-shadow(0 0 10px rgba(255,107,26,.35));
}
.cf-btn--ghost-white {
    border: 1px solid rgba(0,229,255,.3);
    color: var(--cf-cyan);
    background: transparent;
}
.cf-btn--ghost-white:hover {
    background: rgba(0,229,255,.07);
    border-color: var(--cf-cyan);
    color: var(--cf-cyan);
    filter: drop-shadow(0 0 10px rgba(0,229,255,.3));
}
.cf-btn--sm { font-size: .72rem; }
.cf-btn--lg { font-size: .88rem; }

/* ── SECTION HEADER DECORATION ── */
.cf-section-header h2 { color: #ddeef5; }
.cf-section-header h2::before {
    content: '// ';
    color: var(--cf-cyan);
    font-family: var(--cf-font-mono);
    font-size: .75em;
    letter-spacing: 0;
    opacity: .7;
}
.cf-section-header p { color: var(--cf-text-light); }
.cf-section--light .cf-section-header p,
.cf-section--dark .cf-section-header p  { color: var(--cf-text-light); }

/* ── SECTION VARIANTS ── */
.cf-section--dark {
    position: relative;
    overflow: hidden;
}
.cf-section--dark::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0,229,255,.012) 3px,
        rgba(0,229,255,.012) 4px
    );
    pointer-events: none;
    z-index: 0;
}
.cf-section--dark > * { position: relative; z-index: 1; }
.cf-section--light {
    background: var(--cf-navy);
    position: relative;
}
.cf-section--light::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cf-cyan-dim), transparent);
    pointer-events: none;
}
.cf-section--light::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cf-cyan-dim), transparent);
    pointer-events: none;
}
.cf-section--orange {
    background: linear-gradient(135deg, #8a2e00, #c04810 40%, var(--cf-orange));
    position: relative;
    overflow: hidden;
}
.cf-section--orange::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
        45deg, transparent, transparent 18px,
        rgba(0,0,0,.06) 18px, rgba(0,0,0,.06) 19px
    );
    pointer-events: none;
}

/* ── FEATURES SECTION ── */
.cf-features { background: var(--cf-navy); }

/* ── FEATURE CARDS: HUD PANELS ── */
.cf-feature-card {
    background: var(--cf-dark);
    border: 1px solid var(--cf-border);
    border-radius: 0;
    position: relative;
}
.cf-feature-card::before,
.cf-feature-card::after {
    content: '';
    position: absolute;
    width: 12px; height: 12px;
    border-color: var(--cf-cyan);
    border-style: solid;
    opacity: .4;
    transition: opacity var(--cf-transition);
    pointer-events: none;
}
.cf-feature-card::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.cf-feature-card::after  { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.cf-feature-card:hover {
    border-color: rgba(0,229,255,.35);
    box-shadow: 0 0 0 1px rgba(0,229,255,.08), 0 0 28px rgba(0,229,255,.07);
    transform: translateY(-3px);
}
.cf-feature-card:hover::before,
.cf-feature-card:hover::after { opacity: 1; }
.cf-feature-card h3 { color: #ddeef5; }
.cf-feature-card p  { color: var(--cf-text-light); }
.cf-feature-card__icon--orange { background: rgba(255,107,26,.1); }
.cf-feature-card__icon--teal   { background: rgba(0,229,255,.08); }
.cf-feature-card__icon--blue   { background: rgba(0,229,255,.05); }

/* ── TRUST BAR: HUD STATUS STRIP ── */
.cf-trust-bar {
    background: var(--cf-dark);
    border-top: 1px solid rgba(0,229,255,.1);
    border-bottom: 1px solid rgba(0,229,255,.1);
}
.cf-trust-item {
    color: var(--cf-text-light);
    font-family: var(--cf-font-mono);
    font-size: .74rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* ── HERO ── */
.cf-hero {
    background: linear-gradient(135deg, var(--cf-dark) 0%, #030d1c 55%, #050f20 100%);
}
.cf-hero::before {
    background:
        radial-gradient(ellipse 50% 35% at 50% 0%,  rgba(0,229,255,.06) 0%, transparent 70%),
        radial-gradient(ellipse 60% 60% at 80% 30%, rgba(0,229,255,.09) 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 15% 70%, rgba(255,107,26,.09) 0%, transparent 65%);
}
.cf-hero__badge {
    border-radius: 0;
    border-color: rgba(0,229,255,.25);
    font-family: var(--cf-font-mono);
    font-size: .7rem;
    color: var(--cf-cyan);
    background: rgba(0,229,255,.05);
}
.cf-hero__badge-dot {
    background: var(--cf-cyan);
    box-shadow: 0 0 8px var(--cf-cyan);
}
.cf-hero__stat-num  { color: var(--cf-cyan); font-family: var(--cf-font-mono); }
.cf-hero__stat-label { font-family: var(--cf-font-mono); letter-spacing: .06em; }

/* ── HERO: PAGE-LOAD STAGGER ── */
@keyframes cf-fade-up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cf-hero__badge    { animation: cf-fade-up .55s cubic-bezier(.22,1,.36,1) both; animation-delay: 0ms; }
.cf-hero__title    { animation: cf-fade-up .6s  cubic-bezier(.22,1,.36,1) both; animation-delay: 120ms; }
.cf-hero__subtitle { animation: cf-fade-up .6s  cubic-bezier(.22,1,.36,1) both; animation-delay: 240ms; }
.cf-btn-group      { animation: cf-fade-up .6s  cubic-bezier(.22,1,.36,1) both; animation-delay: 360ms; }
.cf-hero__stats    { animation: cf-fade-up .6s  cubic-bezier(.22,1,.36,1) both; animation-delay: 460ms; }
.cf-hero__image    { animation: cf-fade-up .8s  cubic-bezier(.22,1,.36,1) both; animation-delay: 200ms; }
@media (prefers-reduced-motion: reduce) {
    .cf-hero__badge, .cf-hero__title, .cf-hero__subtitle,
    .cf-btn-group, .cf-hero__stats, .cf-hero__image { animation: none; }
}

/* ── ACCORDION: HUD PANELS ── */
.cf-accordion-item {
    background: var(--cf-navy);
    border-color: var(--cf-border);
    border-radius: 0;
}
.cf-accordion-item.open {
    border-color: rgba(0,229,255,.28);
    box-shadow: 0 0 16px rgba(0,229,255,.05);
}
.cf-accordion-trigger {
    background: var(--cf-navy);
    color: var(--cf-text);
    font-family: var(--cf-font-mono);
    font-size: .88rem;
    letter-spacing: .03em;
    border-radius: 0;
}
.cf-accordion-trigger:hover { background: var(--cf-blue); color: var(--cf-text); }
.cf-accordion-item.open .cf-accordion-trigger {
    background: rgba(0,229,255,.07);
    color: var(--cf-cyan);
}
.cf-accordion-body {
    background: rgba(5,13,21,.7);
    border-top-color: var(--cf-border);
    color: var(--cf-text);
}

/* ── TABS: HUD INTERFACE ── */
.cf-tabs__nav {
    background: var(--cf-dark);
    border-color: var(--cf-border);
    border-radius: 0;
}
.cf-tab-btn {
    border-radius: 0;
    font-family: var(--cf-font-mono);
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--cf-text-xlight);
}
.cf-tab-btn.active {
    background: var(--cf-navy);
    color: var(--cf-text);
    box-shadow: none;
    border: 1px solid var(--cf-border);
}
.cf-tab-btn--orange.active { color: var(--cf-orange); border-color: rgba(255,107,26,.3); }
.cf-tab-btn--teal.active   { color: var(--cf-cyan);   border-color: rgba(0,229,255,.3); }
.cf-tab-content-box {
    background: var(--cf-navy);
    border-color: var(--cf-border);
    border-radius: 0;
}
.cf-tab-content-box h3  { color: #ddeef5; }
.cf-tab-list li         { color: var(--cf-text); }
.cf-tab-list li::before { color: var(--cf-cyan); }
.cf-note {
    background: rgba(0,229,255,.04);
    border-left-color: var(--cf-cyan);
    color: var(--cf-text-light);
}
.cf-note strong { color: var(--cf-cyan) !important; }

/* ── FORM INPUTS: HUD TERMINALS ── */
.cf-input,
.cf-select,
.cf-textarea {
    background: rgba(5,13,21,.8);
    border-color: var(--cf-border);
    border-radius: 0;
    color: var(--cf-text);
    font-family: var(--cf-font-mono);
    font-size: .88rem;
}
.cf-input::placeholder,
.cf-textarea::placeholder { color: var(--cf-text-xlight); }
.cf-input:focus,
.cf-select:focus,
.cf-textarea:focus {
    border-color: var(--cf-cyan);
    box-shadow: 0 0 0 2px rgba(0,229,255,.1), 0 0 10px rgba(0,229,255,.07);
}
.cf-form-group label {
    color: var(--cf-text-light);
    font-family: var(--cf-font-mono);
    font-size: .76rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.cf-form__msg--success { background: rgba(57,255,20,.08);  color: var(--cf-green); border-color: rgba(57,255,20,.2);  border-radius: 0; }
.cf-form__msg--error   { background: rgba(255,80,80,.08);  color: #ff6b6b;         border-color: rgba(255,80,80,.2);  border-radius: 0; }

/* ── PRICING CARDS: HUD PANELS ── */
.cf-pricing-card {
    background: var(--cf-navy);
    border-color: var(--cf-border);
    border-radius: 0;
    position: relative;
}
.cf-pricing-card--featured {
    border-color: rgba(255,107,26,.35);
    box-shadow: 0 0 0 1px rgba(255,107,26,.15), 0 0 30px rgba(255,107,26,.07);
}
.cf-pricing-card:hover {
    border-color: rgba(0,229,255,.28);
    box-shadow: 0 0 20px rgba(0,229,255,.07);
}
.cf-pricing-body { background: var(--cf-navy); }
.cf-pricing-features li { color: var(--cf-text); }
.cf-pricing-features li.dimmed { color: var(--cf-text-xlight); }
.cf-pricing-features li .check {
    background: rgba(57,255,20,.1);
    color: var(--cf-green);
    border-radius: 0;
}
.cf-pricing-features li .cross {
    background: rgba(255,255,255,.05);
    color: var(--cf-text-xlight);
    border-radius: 0;
}

/* ── EVENT CARDS: HUD PANELS ── */
.cf-event-card {
    background: var(--cf-navy);
    border-color: var(--cf-border);
    border-radius: 0;
}
.cf-event-card:hover {
    border-color: rgba(0,229,255,.28);
    box-shadow: 0 0 20px rgba(0,229,255,.06);
}
.cf-event-card h3 { color: #ddeef5; }
.cf-event-card p  { color: var(--cf-text-light); }
.cf-carousel__btn {
    background: var(--cf-navy);
    border-color: var(--cf-border);
    color: var(--cf-text);
    border-radius: 0;
}
.cf-carousel__btn:hover { background: var(--cf-orange); border-color: var(--cf-orange); color: #fff; }
.cf-carousel__dot        { background: var(--cf-border); }
.cf-carousel__dot.active { background: var(--cf-orange); }

/* ── RESOURCE CARDS ── */
.cf-resource-card {
    background: var(--cf-navy);
    border-color: var(--cf-border);
    border-radius: 0;
}
.cf-resource-card:hover {
    border-color: rgba(0,229,255,.28);
    box-shadow: 0 0 16px rgba(0,229,255,.06);
}
.cf-resource-card h4 { color: #ddeef5; }
.cf-resource-card p  { color: var(--cf-text-light); }

/* ── VALUE / ABOUT CARDS ── */
.cf-value-card {
    background: var(--cf-navy);
    border-color: var(--cf-border);
    border-radius: 0;
}
.cf-value-card h4 { color: #ddeef5; }
.cf-value-card p  { color: var(--cf-text-light); }
.cf-vision-box {
    background: var(--cf-navy);
    border-color: var(--cf-border);
    border-radius: 0;
}
.cf-vision-box h3 { color: #ddeef5; }

/* ── BOOK PAGE CARDS ── */
.cf-book-audience-card {
    background: var(--cf-navy);
    border-color: var(--cf-border);
    border-radius: 0;
}
.cf-book-audience-card:hover {
    box-shadow: 0 0 16px rgba(0,229,255,.06);
    border-color: rgba(0,229,255,.28);
}
.cf-book-audience-card h3 { color: #ddeef5; }
.cf-book-audience-card p  { color: var(--cf-text-light); }
.cf-book-topic {
    background: var(--cf-navy);
    border-color: var(--cf-border);
    border-radius: 0;
}
.cf-book-topic:hover {
    box-shadow: 0 0 16px rgba(0,229,255,.06);
    border-color: rgba(0,229,255,.28);
}
.cf-book-topic h3 { color: #ddeef5; }
.cf-book-topic p  { color: var(--cf-text-light); }
.cf-book-cta-box {
    background: var(--cf-navy);
    border-color: var(--cf-border);
    border-radius: 0;
    box-shadow: 0 0 0 1px var(--cf-border), var(--cf-shadow-lg);
}
.cf-book-cta-box h2    { color: #ddeef5; }
.cf-book-cta-box > p   { color: var(--cf-text-light); }
.cf-book-cta-box__details {
    background: rgba(0,0,0,.25);
    border-radius: 0;
}
.cf-book-cta-box__details div { color: var(--cf-text); }

/* ── MEMBERSHIP CARDS ── */
.cf-membership-card {
    background: var(--cf-navy);
    border-color: var(--cf-border);
    border-radius: 0;
}
.cf-membership-card--featured {
    border-color: rgba(255,107,26,.35);
    box-shadow: 0 0 0 2px rgba(255,107,26,.12), var(--cf-shadow-lg);
}
.cf-membership-card__body { background: var(--cf-navy); }
.cf-membership-features li::before {
    background: rgba(57,255,20,.1);
    color: var(--cf-green);
    border-radius: 0;
}
.cf-membership-single    { border-radius: 0; }
.cf-membership-single__badge { border-radius: 0; }

/* ── STEPS ── */
.cf-step {
    background: var(--cf-navy);
    border-color: var(--cf-border);
    border-radius: 0;
}
.cf-step h3 { color: #ddeef5; }
.cf-step p  { color: var(--cf-text-light); }
.cf-step__number {
    border-radius: 0;
    background: var(--cf-orange);
    filter: drop-shadow(0 0 6px rgba(255,107,26,.5));
}

/* ── NEWSLETTER: HUD SIGNUP ── */
.cf-newsletter {
    background: linear-gradient(135deg, var(--cf-navy), var(--cf-dark));
    border-top: 1px solid rgba(0,229,255,.1);
    border-bottom: 1px solid rgba(0,229,255,.1);
}
.cf-newsletter__form input {
    border-radius: 0;
    border-color: rgba(0,229,255,.2);
    background: rgba(0,229,255,.04);
}
.cf-newsletter__form input:focus { border-color: var(--cf-cyan); }

/* ── APP SECTION ── */
.cf-app-badge { border-radius: 0; border-color: rgba(0,229,255,.2); }
.cf-app-badge:hover { border-color: rgba(0,229,255,.5); filter: drop-shadow(0 0 8px rgba(0,229,255,.15)); }
.cf-app-coming-soon { border-radius: 0; }

/* ── BADGES ── */
.cf-badge {
    border-radius: 0;
    font-family: var(--cf-font-mono);
    font-size: .68rem;
    letter-spacing: .09em;
}
.cf-badge--orange { background: rgba(255,107,26,.1);  color: var(--cf-orange); border: 1px solid rgba(255,107,26,.3); }
.cf-badge--teal   { background: rgba(0,229,255,.07);  color: var(--cf-cyan);   border: 1px solid rgba(0,229,255,.25); }
.cf-badge--dark   { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }

/* ── FOOTER: HUD GRID ── */
.cf-footer { border-top: 1px solid rgba(0,229,255,.12); }
.cf-footer__grid { border-bottom-color: rgba(0,229,255,.08); }
.cf-footer__heading {
    font-family: var(--cf-font-mono);
    color: rgba(0,229,255,.38);
    letter-spacing: .14em;
}
.cf-footer__links a:hover { color: var(--cf-cyan); text-shadow: 0 0 8px rgba(0,229,255,.4); }
.cf-footer__bottom { border-top: 1px solid rgba(0,229,255,.06); }
.cf-footer__bottom-links a:hover { color: var(--cf-cyan); }
.cf-social-icon {
    border-radius: 0;
    border-color: rgba(0,229,255,.1);
    background: rgba(0,229,255,.04);
}

/* ── COOKIE BANNER ── */
.cf-cookie-banner__inner {
    background: var(--cf-navy);
    border-color: rgba(0,229,255,.2);
    border-top-color: var(--cf-cyan);
    border-radius: 0;
    box-shadow: 0 0 40px rgba(0,229,255,.1), var(--cf-shadow-lg);
}
.cf-cookie-banner__head {
    color: var(--cf-cyan);
    font-family: var(--cf-font-mono);
}
.cf-cookie-banner__inner a { color: var(--cf-cyan); }

/* ── MANAGE COOKIES BUTTON ── */
.cf-cookie-manage {
    background: var(--cf-navy);
    border-color: rgba(0,229,255,.25);
    border-radius: 0;
    color: rgba(255,255,255,.6);
    font-family: var(--cf-font-mono);
    letter-spacing: .05em;
}
.cf-cookie-manage:hover {
    border-color: var(--cf-cyan);
    color: var(--cf-cyan);
    box-shadow: -4px 0 20px rgba(0,229,255,.15);
}
@media (max-width: 768px) {
    .cf-cookie-manage { border-right: none; border-radius: 0; }
}

/* ── PAGE HERO (inner pages) ── */
.cf-page-hero { background: linear-gradient(160deg, var(--cf-dark) 0%, var(--cf-navy) 100%); }
.cf-page-hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cf-cyan-dim), transparent);
    pointer-events: none;
}
.cf-page-hero__eyebrow {
    border-radius: 0;
    font-family: var(--cf-font-mono);
    font-size: .7rem;
    letter-spacing: .12em;
    color: var(--cf-cyan);
    border-color: rgba(0,229,255,.2);
    background: rgba(0,229,255,.05);
}

/* ── LEGAL PAGES ── */
.cf-legal-content h2 {
    border-top-color: var(--cf-border);
    color: #ddeef5;
}
.cf-legal-content h3 { color: var(--cf-cyan); }
.cf-legal-content p,
.cf-legal-content ul li { color: var(--cf-text); }
.cf-legal-content th {
    background: var(--cf-blue);
    color: var(--cf-cyan);
    border-color: var(--cf-border);
}
.cf-legal-content td {
    color: var(--cf-text);
    border-color: var(--cf-border);
}
.cf-legal-content tr:nth-child(even) td { background: rgba(0,229,255,.03); }
.cf-last-updated {
    background: var(--cf-navy);
    border-color: var(--cf-border);
    border-radius: 0;
    color: var(--cf-text-light);
}

/* ── BLOCKQUOTE ── */
blockquote { border-left-color: var(--cf-cyan) !important; color: var(--cf-text-light) !important; }
blockquote footer { color: var(--cf-orange) !important; }

/* ── QUOTE BOX (about page) ── */
.cf-quote { border-left-color: var(--cf-orange); border-radius: 0; }
.cf-quote footer { color: var(--cf-orange); }

/* ── DIVIDER ── */
.cf-divider { background: var(--cf-border); }

/* ── ONBOARDING CARD ── */
.cf-onboarding-card { border-color: rgba(255,107,26,.25); border-radius: 0; }
.cf-onboarding-card__note {
    background: rgba(0,229,255,.05);
    border-color: rgba(0,229,255,.2);
    border-radius: 0;
}

/* ── STEP CARDS: fix text color (was var(--cf-navy) → dark-on-dark) ── */
.cf-step h3 { color: #ddeef5 !important; }

/* ═══════════════════════════════════════════════════════
   HUD MISSION SECTION
   ═══════════════════════════════════════════════════════ */
.cf-hud-mission {
    background: var(--cf-dark);
    position: relative;
    overflow: hidden;
    padding-block: 6rem;
}
/* Subtle dot grid */
.cf-hud-mission::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(0,229,255,.055) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}
/* Horizontal glow borders */
.cf-hud-mission::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,229,255,.3), transparent);
    pointer-events: none;
}

/* Scanning sweep line */
.cf-hud-mission__scanline {
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(0,229,255,.18) 30%, rgba(0,229,255,.5) 50%, rgba(0,229,255,.18) 70%, transparent 100%);
    animation: hud-scanline 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
}
@keyframes hud-scanline {
    0%   { top: 0;    opacity: 0; }
    5%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* Inner wrapper */
.cf-hud-mission__inner {
    max-width: 860px;
    margin-inline: auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* System status line */
.cf-hud-mission__sysline {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    font-family: var(--cf-font-mono);
    font-size: .67rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 2.5rem;
    padding: .4rem 1.25rem;
    border: 1px solid rgba(0,229,255,.12);
    background: rgba(0,229,255,.025);
}
.cf-hud-mission__sysline-tag    { color: var(--cf-cyan); }
.cf-hud-mission__sysline-sep    { color: rgba(0,229,255,.25); }
.cf-hud-mission__sysline-status {
    color: var(--cf-green);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.cf-hud-mission__sysline-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--cf-green);
    box-shadow: 0 0 6px var(--cf-green);
    animation: pulse-dot 1.8s ease-in-out infinite;
}
.cf-hud-mission__sysline-module { color: rgba(0,229,255,.25); }

/* Title */
.cf-hud-mission__title {
    font-size: clamp(1.9rem, 4.5vw, 3rem);
    color: #fff;
    margin-bottom: 1.75rem;
    line-height: 1.15;
    text-shadow: 0 0 60px rgba(0,229,255,.08);
}

/* Typewriter line */
.cf-hud-mission__tw {
    display: inline-flex;
    align-items: baseline;
    font-family: var(--cf-font-mono);
    font-size: .92rem;
    letter-spacing: .09em;
    color: var(--cf-cyan);
    margin-bottom: 2.5rem;
    min-height: 1.6em;
}
.cf-hud-mission__tw-prompt { color: rgba(0,229,255,.38); margin-right: 2px; }
.cf-hud-mission__tw-cur {
    color: var(--cf-cyan);
    animation: hud-blink .85s step-end infinite;
    margin-left: 1px;
}

/* HUD divider */
.cf-hud-mission__divider {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 2.5rem;
    font-family: var(--cf-font-mono);
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.cf-hud-mission__divider > span:first-child {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,229,255,.2));
}
.cf-hud-mission__divider > span:last-child {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(0,229,255,.2), transparent);
}
.cf-hud-mission__divider-label { color: rgba(0,229,255,.28); white-space: nowrap; }

/* Lead text */
.cf-hud-mission__lead {
    font-size: 1.05rem;
    color: rgba(200,230,240,.72);
    line-height: 1.95;
    margin-bottom: 1.25rem;
    max-width: 700px;
    margin-inline: auto;
}
.cf-hud-mission__subtext {
    font-family: var(--cf-font-mono);
    font-size: .82rem;
    color: rgba(0,229,255,.35);
    letter-spacing: .05em;
    margin-bottom: 3.5rem;
}

/* HUD protocol nodes */
.cf-hud-mission__nodes {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}
.cf-hud-mission__node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.75rem 1.5rem;
    min-width: 190px;
    flex: 1;
    max-width: 240px;
    border: 1px solid rgba(0,229,255,.1);
    background: rgba(0,229,255,.025);
    position: relative;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
/* Corner bracket decorations */
.cf-hud-mission__node::before,
.cf-hud-mission__node::after {
    content: '';
    position: absolute;
    width: 10px; height: 10px;
    border-color: rgba(0,229,255,.3);
    border-style: solid;
    transition: border-color .18s ease;
}
.cf-hud-mission__node::before { top: -1px;    left: -1px;  border-width: 1px 0 0 1px; }
.cf-hud-mission__node::after  { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
.cf-hud-mission__node:hover {
    border-color: rgba(0,229,255,.25);
    background: rgba(0,229,255,.05);
    transform: translateY(-3px);
}
.cf-hud-mission__node:hover::before,
.cf-hud-mission__node:hover::after { border-color: rgba(0,229,255,.6); }

.cf-hud-mission__node-icon {
    color: var(--cf-cyan);
    opacity: .75;
    transition: opacity .18s ease, filter .18s ease;
}
.cf-hud-mission__node:hover .cf-hud-mission__node-icon {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(0,229,255,.5));
}
.cf-hud-mission__node-body { text-align: center; }
.cf-hud-mission__node-body strong {
    display: block;
    color: #e8f4f8;
    font-family: var(--cf-font-mono);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    margin-bottom: .4rem;
}
.cf-hud-mission__node-body span {
    font-size: .8rem;
    color: rgba(170,210,225,.4);
    line-height: 1.5;
}

@media (max-width: 600px) {
    .cf-hud-mission__nodes { flex-direction: column; align-items: center; }
    .cf-hud-mission__node  { width: 100%; max-width: 320px; }
    .cf-hud-mission__sysline { flex-wrap: wrap; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════
   HUD FAR-PERSPEKTIVET SECTION
   ═══════════════════════════════════════════════════════ */
.cf-hud-perspective { background: var(--cf-dark); }

/* Image frame with corner brackets */
.cf-hud-img-frame {
    position: relative;
    padding: 12px;
    border: 1px solid rgba(0,229,255,.12);
    background: rgba(0,229,255,.02);
}
.cf-hud-img-frame::before,
.cf-hud-img-frame::after {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    border-color: var(--cf-cyan);
    border-style: solid;
    opacity: .55;
    transition: opacity .2s ease;
}
.cf-hud-img-frame::before { top: -1px;    left: -1px;  border-width: 2px 0 0 2px; }
.cf-hud-img-frame::after  { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.cf-hud-img-frame:hover::before,
.cf-hud-img-frame:hover::after { opacity: 1; }
/* Extra bracket corners via inner pseudo-elements on the img */
.cf-hud-img-frame img { display: block; width: 100%; }

/* Section label (replaces orange badge) */
.cf-hud-perspective__label {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--cf-font-mono);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cf-orange);
    border: 1px solid rgba(255,107,26,.3);
    background: rgba(255,107,26,.07);
    padding: .35rem .9rem;
    margin-bottom: 1.25rem;
}
.cf-hud-perspective__label-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--cf-orange);
    box-shadow: 0 0 6px rgba(255,107,26,.7);
    flex-shrink: 0;
}

/* HUD quote terminal block */
.cf-hud-quote {
    position: relative;
    border-left: 2px solid var(--cf-orange);
    background: rgba(255,107,26,.04);
    padding: 1.25rem 1.25rem 1.25rem 1.5rem;
    margin: 1.75rem 0;
}
.cf-hud-quote__prefix {
    display: block;
    font-family: var(--cf-font-mono);
    font-size: .65rem;
    letter-spacing: .12em;
    color: rgba(255,107,26,.45);
    text-transform: uppercase;
    margin-bottom: .6rem;
}
.cf-hud-quote p {
    font-style: italic;
    color: var(--cf-text-light);
    font-size: .97rem;
    line-height: 1.75;
    margin: 0 0 .6rem;
}
.cf-hud-quote footer {
    font-family: var(--cf-font-mono);
    font-size: .8rem;
    font-weight: 700;
    color: var(--cf-orange);
    font-style: normal;
    letter-spacing: .04em;
}

/* ── MOBILE NAV: HUD DRAWER ── */
@media (max-width: 768px) {
    /* Remove backdrop-filter so position:fixed children aren't trapped
       inside the header's containing block (browser spec behaviour) */
    .cf-header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(5,13,21,.99); /* compensate with solid bg */
    }
    .cf-header.scrolled {
        background: rgba(5,13,21,1);
    }
    .cf-nav {
        background: rgba(5,13,21,.99);
        border-right: 1px solid rgba(0,229,255,.15);
        border-radius: 0;
    }
}

/* ── ZK NEWSLETTER PLUGIN — HUD THEME OVERRIDES ── */

/* Wrapper — stack fields cleanly */
.cf-newsletter__form form,
.zk-newsletter-form,
.zk_newsletter_form {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    width: 340px;
    max-width: 100%;
}

/* Hide labels — inputs have placeholders */
.cf-newsletter__form label,
.zk-newsletter-form label,
.zk_newsletter_form label {
    display: none;
}

/* Text + email inputs */
.cf-newsletter__form input[type="text"],
.cf-newsletter__form input[type="email"],
.zk-newsletter-form input[type="text"],
.zk-newsletter-form input[type="email"],
.zk_newsletter_form input[type="text"],
.zk_newsletter_form input[type="email"] {
    width: 100%;
    background: rgba(0,229,255,.05);
    border: 1px solid rgba(0,229,255,.2);
    border-radius: 0;
    color: var(--cf-text);
    font-family: var(--cf-font-sans);
    font-size: .95rem;
    padding: .7rem 1rem;
    outline: none;
    transition: border-color .2s;
    box-sizing: border-box;
}
.cf-newsletter__form input[type="text"]::placeholder,
.cf-newsletter__form input[type="email"]::placeholder,
.zk-newsletter-form input::placeholder,
.zk_newsletter_form input::placeholder {
    color: rgba(0,229,255,.3);
}
.cf-newsletter__form input:focus,
.zk-newsletter-form input:focus,
.zk_newsletter_form input:focus {
    border-color: var(--cf-cyan);
    background: rgba(0,229,255,.08);
}

/* Checkbox row */
.cf-newsletter__form .zk-gdpr,
.zk-newsletter-form .zk-gdpr,
.zk_newsletter_form .zk-gdpr,
.cf-newsletter__form p:has(input[type="checkbox"]),
.zk-newsletter-form p:has(input[type="checkbox"]) {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}
.cf-newsletter__form input[type="checkbox"],
.zk-newsletter-form input[type="checkbox"],
.zk_newsletter_form input[type="checkbox"] {
    accent-color: var(--cf-cyan);
    margin-top: 3px;
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    cursor: pointer;
}
.cf-newsletter__form .zk-gdpr label,
.zk-newsletter-form .zk-gdpr label,
.zk_newsletter_form .zk-gdpr label,
.cf-newsletter__form p:has(input[type="checkbox"]) label {
    display: block;
    font-size: .8rem;
    color: var(--cf-text-light);
    line-height: 1.4;
    cursor: pointer;
}

/* Submit button */
.cf-newsletter__form button[type="submit"],
.cf-newsletter__form input[type="submit"],
.zk-newsletter-form button[type="submit"],
.zk-newsletter-form input[type="submit"],
.zk_newsletter_form button[type="submit"],
.zk_newsletter_form input[type="submit"] {
    align-self: flex-start;
    background: var(--cf-orange);
    border: none;
    border-radius: 0;
    clip-path: polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);
    color: #fff;
    cursor: pointer;
    font-family: var(--cf-font-sans);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: .7rem 2rem;
    text-transform: uppercase;
    transition: background .2s, filter .2s;
    width: 100%;
    box-sizing: border-box;
}
.cf-newsletter__form button[type="submit"]:hover,
.cf-newsletter__form input[type="submit"]:hover,
.zk-newsletter-form button[type="submit"]:hover,
.zk-newsletter-form input[type="submit"]:hover,
.zk_newsletter_form button[type="submit"]:hover,
.zk_newsletter_form input[type="submit"]:hover {
    background: var(--cf-orange-hover);
    filter: drop-shadow(0 0 8px rgba(255,107,26,.4));
}

/* Success / error messages */
.zk-newsletter-success,
.zk-newsletter-form .zk-success,
.zk_newsletter_form .zk-success {
    color: #39ff14;
    font-size: .85rem;
    padding: .5rem 0;
}
.zk-newsletter-error,
.zk-newsletter-form .zk-error,
.zk_newsletter_form .zk-error {
    color: #ff5c5c;
    font-size: .85rem;
    padding: .5rem 0;
}

/* Mobile: full-width stack */
@media (max-width: 767px) {
    .cf-newsletter__form form,
    .zk-newsletter-form,
    .zk_newsletter_form { width: 100%; }
    .cf-newsletter__form button[type="submit"],
    .zk-newsletter-form button[type="submit"],
    .zk_newsletter_form button[type="submit"] { align-self: stretch; }
}

/* ═══════════════════════════════════════════════════════
   MOBILE / TABLET COMPATIBILITY FIXES
   ═══════════════════════════════════════════════════════ */

/* 1. Hide header CTA on mobile — all links are in the burger drawer */
@media (max-width: 768px) {
    .cf-header__actions .cf-btn { display: none; }
}

/* 2. Shrink logo on very small phones to keep header clean */
@media (max-width: 380px) {
    .cf-logo__img, .custom-logo { height: 44px; }
    .cf-header__inner { gap: 1rem; }
}

/* 3. Topbar: allow wrapping and shrink text on narrow phones */
@media (max-width: 480px) {
    .cf-topbar__inner {
        flex-wrap: wrap;
        gap: .3rem;
        justify-content: center;
        text-align: center;
    }
    .cf-topbar__msg { font-size: .68rem; }
}

/* 4. Perspective section: override inline gap when stacked */
@media (max-width: 768px) {
    .cf-hud-perspective .cf-grid-2 { gap: 2rem !important; }
    .cf-hud-img-frame               { max-width: 300px; margin-inline: auto; }
}

/* 5. Trial breakdown: stack to single column on small phones */
@media (max-width: 480px) {
    .cf-trial-breakdown { grid-template-columns: 1fr; }
}

/* 6. Reduce oversized padding on mobile */
@media (max-width: 768px) {
    .cf-hud-mission    { padding-block: 4rem; }
    .cf-page-hero      { padding-block: 3rem 2.5rem; }
    .cf-section--orange { padding-block: 3rem; }
}

/* 7. Prevent horizontal scroll without breaking position:fixed */
html { overflow-x: clip; }
@media (max-width: 768px) {
    .cf-container { max-width: 100%; }
}

/* 7b. Hide topbar extras on mobile — keep only the green dot + SYS:ONLINE */
@media (max-width: 600px) {
    .cf-topbar__extra { display: none; }
}

/* 8. Tabs: ensure tab panels don't overflow on mobile */
@media (max-width: 480px) {
    .cf-tabs { overflow: hidden; }
    .cf-tab-panel { padding: 0; }
}

/* 9. Event and guide cards: full width on mobile */
@media (max-width: 480px) {
    .cf-next-event-card { padding: 1.25rem; }
    .cf-next-event-card__emoji { font-size: 2.5rem; }
}

/* 10. HUD quote: reduce padding on mobile */
@media (max-width: 480px) {
    .cf-hud-quote { padding: 1rem 1.25rem; }
}

/* 11. Form rows already collapse to 1col at 768px but ensure inputs don't overflow */
@media (max-width: 768px) {
    .cf-input, .cf-select, input[type="text"],
    input[type="email"], textarea, select {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* 12. Hero CTA buttons: stack early and reduce padding so long labels don't overflow */
@media (max-width: 768px) {
    .cf-btn-group {
        flex-direction: column;
        align-items: flex-start;
    }
    .cf-btn--lg {
        padding: .7rem 1.5rem;
        font-size: .85rem;
    }
}

/* 13. Hide manage-cookies tab on mobile — too intrusive after accept/decline */
@media (max-width: 768px) {
    .cf-cookie-manage { display: none; }
}

/* 14. Cookie policy: mobile layout — show/hide elements per breakpoint */
.cf-cookies-mobile-top,
.cf-cookies-mobile-bottom { display: none; }

.cf-cookies-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 4rem;
    align-items: start;
}

.cf-cookies-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .cf-cookies-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .cf-cookies-sidebar { display: none; }
    .cf-cookies-mobile-top,
    .cf-cookies-mobile-bottom { display: block; }
}

/* 15. Legal pages: make tables scrollable on mobile instead of breaking layout */
@media (max-width: 768px) {
    .cf-legal-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════
   CYBERFAR SVG ICON SYSTEM
   ═══════════════════════════════════════════════════════ */

/* ── BASE ── */
.cf-icon {
    display: block;
    flex-shrink: 0;
}

/* ── FEATURE CARD ICONS ── */
.cf-feature-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.cf-feature-card__icon .cf-icon {
    width: 28px;
    height: 28px;
}
.cf-feature-card__icon--orange .cf-icon { color: var(--cf-orange); }
.cf-feature-card__icon--teal   .cf-icon { color: var(--cf-cyan); }
.cf-feature-card__icon--blue   .cf-icon { color: var(--cf-cyan); opacity: .8; }

/* Shield scanline */
@keyframes cf-scan-down {
    0%   { transform: translateY(-6px); opacity: 0; }
    15%  { opacity: .9; }
    85%  { opacity: .9; }
    100% { transform: translateY(6px);  opacity: 0; }
}
.cf-icon--shield .cf-icon__scan {
    animation: cf-scan-down 2.8s ease-in-out infinite;
}

/* Gamepad buttons staggered pulse */
@keyframes cf-btn-pop {
    0%,100% { opacity: .25; }
    50%     { opacity: 1;   }
}
.cf-icon--gamepad .cf-icon__btn                        { animation: cf-btn-pop 1.8s ease-in-out infinite; }
.cf-icon--gamepad .cf-icon__btn:nth-child(2)           { animation-delay: .35s; }
.cf-icon--gamepad .cf-icon__btn:nth-child(3)           { animation-delay: .7s;  }

/* Network node pulse */
@keyframes cf-node-pulse {
    0%,100% { r: 1.5;  opacity: .4; }
    50%     { r: 3;    opacity: 1;  }
}
.cf-icon--network .cf-icon__pulse {
    animation: cf-node-pulse 1.6s ease-in-out infinite;
}

/* ── TRUST BAR ICONS ── */
.cf-trust-item .cf-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    margin-right: .3rem;
    flex-shrink: 0;
}
.cf-trust-item { display: inline-flex; align-items: center; }

/* ── TAB BUTTON ICONS ── */
.cf-tab-btn .cf-icon {
    width: 15px;
    height: 15px;
    display: inline-block;
    vertical-align: middle;
    margin-right: .35rem;
}

/* ── VALUE CARD ICONS ── */
.cf-value-card__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,229,255,.07);
    border: 1px solid rgba(0,229,255,.15);
    border-radius: 0;
    margin-bottom: 1rem;
    color: var(--cf-cyan);
    transition: background var(--cf-transition), border-color var(--cf-transition), color var(--cf-transition);
}
.cf-value-card__icon .cf-icon { width: 22px; height: 22px; }
.cf-value-card:hover .cf-value-card__icon {
    background: rgba(0,229,255,.14);
    border-color: rgba(0,229,255,.35);
    color: var(--cf-cyan);
}

/* Draw-on-hover for value icons */
.cf-value-card .cf-icon path,
.cf-value-card .cf-icon circle,
.cf-value-card .cf-icon line,
.cf-value-card .cf-icon polyline,
.cf-value-card .cf-icon polygon,
.cf-value-card .cf-icon rect {
    stroke-dasharray: 80;
    stroke-dashoffset: 80;
    transition: stroke-dashoffset .55s cubic-bezier(.22,1,.36,1);
}
.cf-value-card:hover .cf-icon path,
.cf-value-card:hover .cf-icon circle,
.cf-value-card:hover .cf-icon line,
.cf-value-card:hover .cf-icon polyline,
.cf-value-card:hover .cf-icon polygon,
.cf-value-card:hover .cf-icon rect {
    stroke-dashoffset: 0;
}

/* ── BOOK CYBERFAR ── */
.cf-book-audience-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    color: var(--cf-orange);
}
.cf-book-audience-card__icon .cf-icon { width: 28px; height: 28px; }

.cf-book-info-card__icon {
    font-size: 0;
    color: var(--cf-cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .5rem;
}
.cf-book-info-card__icon .cf-icon { width: 26px; height: 26px; }

.cf-book-cta-box__icon {
    font-size: 0;
    margin-bottom: 1rem;
    color: var(--cf-cyan);
    display: flex;
    justify-content: center;
}
.cf-book-cta-box__icon .cf-icon { width: 36px; height: 36px; }

.cf-book-cta-box__details span:first-child {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--cf-cyan);
}
.cf-book-cta-box__details .cf-icon { width: 16px; height: 16px; }

/* ── VISION BOX ── */
.cf-vision-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    color: var(--cf-orange);
}
.cf-vision-icon .cf-icon { width: 36px; height: 36px; }

/* ── RESOURCE CARDS ── */
.cf-resource-card__icon .cf-icon { width: 26px; height: 26px; }
.cf-resource-card__icon { font-size: 0; display: flex; align-items: center; justify-content: center; }

.cf-section-header .cf-section-icon {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--cf-cyan);
}
.cf-section-header .cf-section-icon .cf-icon { width: 26px; height: 26px; }

/* Mic ripple animation */
@keyframes cf-mic-ripple {
    0%   { stroke-dashoffset: 0; opacity: .5; }
    100% { stroke-dashoffset: -28; opacity: 0; }
}

/* ── MEMBERSHIP STEPS ── */
.cf-step__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    color: var(--cf-orange);
    margin-bottom: .5rem;
}
.cf-step__icon .cf-icon { width: 28px; height: 28px; }

/* ── ONBOARDING ── */
.cf-onboarding-card__icon {
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cf-cyan);
    background: rgba(0,229,255,.08);
    border: 1px solid rgba(0,229,255,.2);
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}
.cf-onboarding-card__icon .cf-icon { width: 28px; height: 28px; }

.cf-onboarding-point__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    color: var(--cf-cyan);
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}
.cf-onboarding-point__icon .cf-icon { width: 20px; height: 20px; }

.cf-onboarding-card__badge span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.cf-onboarding-card__badge .cf-icon { width: 14px; height: 14px; }

/* App coming soon / mockup */
.cf-app-coming-soon .cf-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    margin-right: .25rem;
}
.cf-app-mockup__placeholder .cf-icon {
    width: 36px;
    height: 36px;
    margin-inline: auto;
    margin-bottom: .5rem;
    color: var(--cf-cyan);
    opacity: .5;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .cf-icon--shield .cf-icon__scan,
    .cf-icon--gamepad .cf-icon__btn,
    .cf-icon--network .cf-icon__pulse { animation: none; }
    .cf-value-card .cf-icon path,
    .cf-value-card .cf-icon circle,
    .cf-value-card .cf-icon line,
    .cf-value-card .cf-icon polyline,
    .cf-value-card .cf-icon polygon,
    .cf-value-card .cf-icon rect { stroke-dasharray: none; stroke-dashoffset: 0; }
}