/*
 * Element 6 — main.css
 *
 * Phase 2: Component styles (header, footer, navigation, search,
 * bot status indicator, mobile menu)
 *
 * Design tokens are in style.css (loaded first).
 */

/* ==========================================================================
   GLOBAL LAYOUT (used by templates throughout)
   ========================================================================== */
.e6-main {
    min-height: calc(100vh - 400px);
    padding-top: var(--e6-nav-height);
    padding-bottom: var(--e6-space-12);
}

/* Front page: hero is full-bleed and handles its own top spacing */
body.home .e6-main,
body.page-template-front-page .e6-main {
    padding-top: 0;
    padding-bottom: 0;
}

/* Default container behavior for content directly inside .e6-main
   (article, .page-header, etc.) — prevents content from bleeding edge-to-edge */
.e6-main > article,
.e6-main > .page-header,
.e6-main > nav,
.e6-main > div:not(.e6-container):not(.e6-container-wide):not(.e6-section):not(.e6-hero) {
    max-width: var(--e6-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--e6-space-6);
    padding-right: var(--e6-space-6);
    box-sizing: border-box;
}

/* Front page sections are full-bleed, not constrained by the .e6-main rules above */
body.home .e6-main > *,
body.page-template-front-page .e6-main > * {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.e6-container {
    max-width: var(--e6-max-width);
    margin: 0 auto;
    padding: 0 var(--e6-space-6);
}

.e6-container-wide {
    max-width: var(--e6-max-width-wide);
    margin: 0 auto;
    padding: 0 var(--e6-space-6);
}

/* Page header (used on archives, single posts/pages) */
.page-header {
    padding: var(--e6-space-12) var(--e6-space-6);
    text-align: center;
    border-bottom: 1px solid var(--e6-border);
    margin-bottom: var(--e6-space-8);
}

.page-title {
    font-family: var(--e6-font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    margin: 0 0 var(--e6-space-3);
    letter-spacing: 0.02em;
    background: linear-gradient(180deg, var(--e6-white) 0%, var(--e6-silver) 60%, var(--e6-slate-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.brace {
    color: var(--e6-signal);
    background: linear-gradient(180deg, var(--e6-signal-bright), var(--e6-signal));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.e6-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--e6-z-nav);
    background: linear-gradient(180deg,
        rgba(11, 13, 15, 0.98) 0%,
        rgba(11, 13, 15, 0.92) 70%,
        rgba(11, 13, 15, 0.75) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--e6-border);
    transition: all var(--e6-transition);
    /* No overflow clipping here. Two things are children of <header> and are
       *meant* to escape it: the nav dropdown and the search slideout. The old
       "nothing can escape the header" rule clipped both -- the Bots dropdown
       rendered as an empty sliver because only the couple of pixels still
       inside the header's box survived. */
}

/* Subtle glow line at the bottom of the header */
.e6-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--e6-signal-glow-soft) 30%,
        var(--e6-signal) 50%,
        var(--e6-signal-glow-soft) 70%,
        transparent 100%);
    opacity: 0.4;
}

.e6-header-inner {
    max-width: var(--e6-max-width-wide);
    margin: 0 auto;
    padding: 0 var(--e6-space-6);
    height: var(--e6-nav-height);
    display: flex;
    align-items: center;
    gap: var(--e6-space-8);
}

/* ----- Brand / Logo ----- */
.e6-header-brand {
    flex-shrink: 0;
    overflow: hidden;
    max-width: 50%;
}

.e6-brand-link {
    display: flex;
    align-items: center;
    gap: var(--e6-space-3);
    text-decoration: none;
    transition: opacity var(--e6-transition-fast);
    overflow: hidden;
}

.e6-brand-link:hover {
    opacity: 0.92;
}

/* Logo image — bulletproof sizing for any of these:
   1. <img class="e6-brand-mark"> — our bundled fallback
   2. <img class="custom-logo"> — WP custom logo (if rendered directly)
   3. <a class="custom-logo-link"><img class="custom-logo"> — legacy fallback
   4. Any <img> inside .e6-brand-link as ultimate safety net */
/* WordPress's admin bar is fixed at the top of the viewport for logged-in
   users. The site header is fixed too, at top:0, so the bar sat over it and
   clipped the logo. Only admins ever saw this. */
body.admin-bar .e6-site-header,
body.admin-bar .e6-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .e6-site-header,
    body.admin-bar .e6-header {
        top: 46px;
    }
}

/* The bundled mark is now an inline SVG lockup (tile + "lement 6" + tagline),
   not a square tile. The 56px square clamp below is for raster logos only --
   applying it here squashed the wordmark to about 17px tall. */
.e6-brand-link svg.e6-brand-mark {
    width: auto !important;
    height: 58px !important;
    max-width: none !important;
    max-height: 58px !important;
    border-radius: 0;
    filter: none;
}

.e6-brand-link .e6-brand-mark,
.e6-brand-link .custom-logo,
.e6-brand-link .custom-logo-link,
.e6-brand-link .custom-logo-link img,
.e6-brand-link img {
    width: 56px !important;
    height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    border-radius: var(--e6-radius-md);
    object-fit: contain;
    filter: drop-shadow(0 0 12px var(--e6-signal-glow-soft));
    flex-shrink: 0;
    display: inline-block;
}

/* If WP custom-logo-link wrapper somehow appears, normalize it */
.e6-brand-link .custom-logo-link {
    padding: 0;
    margin: 0;
    background: none;
    border: none;
}

.e6-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.e6-brand-name {
    font-family: var(--e6-font-display);
    font-weight: 500;                        /* Inter Medium, per the brand spec */
    font-size: 1.15rem;
    letter-spacing: var(--e6-track-wordmark); /* 0.05em — the number that matters */
    color: var(--e6-white);
    white-space: nowrap;
}

.e6-brand-tag {
    font-family: var(--e6-font-mono);
    font-size: 0.65rem;
    color: var(--e6-text-muted);
    letter-spacing: 0.18em;
    margin-top: 5px;
    text-transform: uppercase;
}

/* ----- Primary Nav ----- */
.e6-header-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.e6-nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--e6-space-8);
    align-items: center;
}

.e6-nav-menu > li {
    position: relative;
}

.e6-nav-menu > li > a {
    color: var(--e6-text);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: color var(--e6-transition-fast);
    padding: var(--e6-space-2) 0;
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
}

.e6-nav-menu > li > a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--e6-signal);
    box-shadow: 0 0 8px var(--e6-signal-glow);
    transition: width var(--e6-transition);
}

.e6-nav-menu > li > a:hover,
.e6-nav-menu > li.e6-is-current > a,
.e6-nav-menu > li.current-menu-item > a,
.e6-nav-menu > li.current-menu-parent > a {
    color: var(--e6-signal-bright);
}

.e6-nav-menu > li > a:hover::after,
.e6-nav-menu > li.e6-is-current > a::after,
.e6-nav-menu > li.current-menu-item > a::after,
.e6-nav-menu > li.current-menu-parent > a::after {
    width: 100%;
}

.e6-dropdown-arrow {
    display: inline-block;
    font-size: 0.6rem;
    transition: transform var(--e6-transition);
    margin-left: 2px;
    opacity: 0.7;
}

.e6-nav-menu > li.e6-has-dropdown:hover > a .e6-dropdown-arrow,
.e6-nav-menu > li.e6-has-dropdown:focus-within > a .e6-dropdown-arrow {
    transform: rotate(-180deg);
}

/* ----- Submenu / Dropdown ----- */
.e6-submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    list-style: none;
    margin: 0;
    padding: var(--e6-space-2) 0;
    min-width: 220px;
    background: rgba(30, 32, 34, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--e6-border-hover);
    border-radius: var(--e6-radius-md);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), var(--e6-shadow-glow);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--e6-transition), transform var(--e6-transition), visibility var(--e6-transition);
    z-index: var(--e6-z-dropdown);
}

.e6-submenu::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--e6-signal), transparent);
}

.e6-nav-menu > li.e6-has-dropdown:hover > .e6-submenu,
.e6-nav-menu > li.e6-has-dropdown:focus-within > .e6-submenu,
.e6-nav-menu > li.e6-has-dropdown.is-open > .e6-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.e6-submenu li {
    display: block;
}

.e6-submenu li a {
    display: block;
    padding: var(--e6-space-3) var(--e6-space-4);
    color: var(--e6-text);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    transition: all var(--e6-transition-fast);
    border-left: 2px solid transparent;
}

.e6-submenu li a:hover,
.e6-submenu li.current-menu-item a {
    background: rgba(163, 174, 208, 0.08);
    color: var(--e6-signal-bright);
    border-left-color: var(--e6-signal);
    padding-left: calc(var(--e6-space-4) + 4px);
}

/* ----- Header right-side actions ----- */
.e6-header-actions {
    display: flex;
    align-items: center;
    gap: var(--e6-space-3);
    flex-shrink: 0;
}

/* Search toggle button */
.e6-search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid var(--e6-border);
    border-radius: 50%;
    color: var(--e6-text);
    cursor: pointer;
    transition: all var(--e6-transition);
    padding: 0;
}

.e6-search-toggle:hover,
.e6-search-toggle[aria-expanded="true"] {
    border-color: var(--e6-signal);
    color: var(--e6-signal-bright);
    box-shadow: 0 0 16px var(--e6-signal-glow-soft);
}

/* ----- Bot Status Indicator ----- */
.e6-bot-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 12px;
    background: rgba(30, 32, 34, 0.6);
    border: 1px solid rgba(242, 100, 25, 0.3);
    border-radius: var(--e6-radius-pill);
    font-size: 0.75rem;
    text-decoration: none;
    color: var(--e6-text);
    transition: all var(--e6-transition);
    cursor: pointer;
    white-space: nowrap;
}

.e6-bot-status:hover {
    border-color: rgba(242, 100, 25, 0.6);
    background: rgba(242, 100, 25, 0.08);
    transform: translateY(-1px);
    color: var(--e6-text);
}

.e6-bot-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--e6-online);
    box-shadow: 0 0 8px var(--e6-online-glow);
    animation: e6-pulse-dot 2s ease-in-out infinite;
    position: relative;
    flex-shrink: 0;
}

.e6-bot-status-dot::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: var(--e6-online);
    opacity: 0.3;
    animation: e6-pulse-ring 2s ease-out infinite;
}

@keyframes e6-pulse-dot {
    0%, 100% { box-shadow: 0 0 8px var(--e6-online-glow); }
    50% { box-shadow: 0 0 16px var(--e6-online-glow); }
}

@keyframes e6-pulse-ring {
    0% { transform: scale(1); opacity: 0.4; }
    100% { transform: scale(2); opacity: 0; }
}

.e6-bot-status-label {
    font-family: var(--e6-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: var(--e6-text-muted);
}

.e6-bot-status-name {
    font-weight: 600;
    color: var(--e6-text);
    font-size: 0.75rem;
}

.e6-bot-status-arrow {
    color: var(--e6-signal);
    font-size: 0.85rem;
    transition: transform var(--e6-transition);
}

.e6-bot-status:hover .e6-bot-status-arrow {
    transform: translateX(2px);
}

/* Offline state */
.e6-bot-status.is-offline {
    border-color: rgba(163, 174, 208, 0.25);
}
.e6-bot-status.is-offline .e6-bot-status-dot {
    background: var(--e6-offline);
    box-shadow: none;
    animation: none;
}
.e6-bot-status.is-offline .e6-bot-status-dot::before {
    display: none;
}
.e6-bot-status.is-offline .e6-bot-status-arrow {
    color: var(--e6-text-muted);
}
.e6-bot-status.is-offline:hover {
    border-color: rgba(163, 174, 208, 0.4);
    background: rgba(163, 174, 208, 0.05);
}

/* Loading state */
.e6-bot-status.is-loading .e6-bot-status-dot {
    background: var(--e6-text-muted);
    animation: e6-pulse-loading 1s ease-in-out infinite;
}
.e6-bot-status.is-loading .e6-bot-status-dot::before {
    display: none;
}

@keyframes e6-pulse-loading {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* ----- Mobile menu toggle ----- */
.e6-mobile-toggle {
    display: none;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid var(--e6-border);
    border-radius: 50%;
    cursor: pointer;
    padding: 10px 8px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    transition: all var(--e6-transition);
}

.e6-mobile-toggle:hover {
    border-color: var(--e6-signal);
}

.e6-mobile-toggle-line {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--e6-text);
    border-radius: 1px;
    transition: all var(--e6-transition);
}

.e6-mobile-toggle[aria-expanded="true"] .e6-mobile-toggle-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.e6-mobile-toggle[aria-expanded="true"] .e6-mobile-toggle-line:nth-child(2) {
    opacity: 0;
}
.e6-mobile-toggle[aria-expanded="true"] .e6-mobile-toggle-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   SLIDE-OUT SEARCH BAR
   ========================================================================== */
.e6-search-bar {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(30, 32, 34, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--e6-border-hover);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all var(--e6-transition);
    z-index: var(--e6-z-dropdown);
}

.e6-search-bar.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.e6-search-bar-inner {
    max-width: var(--e6-max-width-wide);
    margin: 0 auto;
    padding: var(--e6-space-6);
}

.e6-search-form {
    display: flex;
    align-items: center;
    gap: var(--e6-space-3);
    position: relative;
}

.e6-search-form-icon {
    color: var(--e6-signal);
    flex-shrink: 0;
    filter: drop-shadow(0 0 4px var(--e6-signal-glow-soft));
}

.e6-search-input {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--e6-border-hover);
    color: var(--e6-text);
    font-family: var(--e6-font-body);
    font-size: 1.25rem;
    padding: var(--e6-space-3) 0;
    outline: none;
    transition: border-color var(--e6-transition);
}

.e6-search-input::placeholder {
    color: var(--e6-text-dim);
}

.e6-search-input:focus {
    border-bottom-color: var(--e6-signal);
}

.e6-search-close {
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid var(--e6-border);
    border-radius: 50%;
    color: var(--e6-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--e6-transition);
    flex-shrink: 0;
    padding: 0;
}

.e6-search-close:hover {
    border-color: var(--e6-signal);
    color: var(--e6-signal);
}

.e6-search-suggestions {
    margin-top: var(--e6-space-4);
    /* Phase 4 will populate this */
}

.e6-search-suggestions:empty {
    display: none;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.e6-footer {
    background: linear-gradient(180deg, var(--e6-charcoal) 0%, var(--e6-charcoal-alt) 100%);
    border-top: 1px solid var(--e6-border);
    margin-top: var(--e6-space-16);
    position: relative;
}

.e6-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--e6-signal-glow-soft) 30%,
        var(--e6-signal) 50%,
        var(--e6-signal-glow-soft) 70%,
        transparent 100%);
    opacity: 0.4;
}

.e6-footer-inner {
    max-width: var(--e6-max-width-wide);
    margin: 0 auto;
    padding: var(--e6-space-16) var(--e6-space-6) var(--e6-space-8);
}

.e6-footer-top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--e6-space-12);
    margin-bottom: var(--e6-space-12);
    padding-bottom: var(--e6-space-8);
    border-bottom: 1px solid var(--e6-border);
}

.e6-footer-col {
    min-width: 0;
}

/* Brand column */
.e6-footer-brand-col {
    max-width: 360px;
}

.e6-footer-brand-link {
    display: inline-block;
    margin-bottom: var(--e6-space-3);
    text-decoration: none;
}

.e6-footer-logo {
    width: auto;
    height: 86px;
    max-width: 100%;
    border-radius: 0;
    filter: none;
}

.e6-footer-brand-name {
    font-family: var(--e6-font-display);
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.12em;
    color: var(--e6-white);
    margin-bottom: var(--e6-space-2);
}

.e6-footer-tagline {
    font-family: var(--e6-font-mono);
    font-size: 0.75rem;
    color: var(--e6-text-muted);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: var(--e6-space-4);
}

.e6-footer-blurb {
    font-size: 0.9rem;
    color: var(--e6-text-soft);
    line-height: 1.7;
    margin: 0;
}

/* Footer headings */
.e6-footer-heading {
    font-family: var(--e6-font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--e6-text-soft);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin: 0 0 var(--e6-space-4);
    padding-bottom: var(--e6-space-2);
    border-bottom: 1px solid var(--e6-border);
}

/* Footer menu (the wp_nav_menu output) */
.e6-footer-menu,
.e6-footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.e6-footer-menu li,
.e6-footer-list li {
    margin-bottom: var(--e6-space-2);
}

.e6-footer-menu a,
.e6-footer-list a {
    color: var(--e6-text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    transition: all var(--e6-transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.e6-footer-menu a:hover,
.e6-footer-list a:hover {
    color: var(--e6-signal);
    transform: translateX(2px);
}

.e6-footer-icon {
    color: var(--e6-signal);
    font-size: 0.7rem;
    opacity: 0.6;
    transition: opacity var(--e6-transition-fast);
}

.e6-footer-list a:hover .e6-footer-icon {
    opacity: 1;
}

.e6-footer-empty {
    color: var(--e6-text-dim);
    font-size: 0.85rem;
}

/* Footer email link */
.e6-footer-email a {
    color: var(--e6-text);
    text-decoration: none;
    font-size: 0.875rem;
    border-bottom: 1px solid transparent;
    transition: all var(--e6-transition-fast);
}

.e6-footer-email a:hover {
    color: var(--e6-signal);
    border-bottom-color: var(--e6-signal);
}

/* Social icons */
.e6-social-list {
    display: flex;
    gap: var(--e6-space-3);
    list-style: none;
    margin: var(--e6-space-3) 0 0;
    padding: 0;
}

.e6-social-list a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--e6-border);
    border-radius: 50%;
    color: var(--e6-text);
    transition: all var(--e6-transition);
}

.e6-social-list a:hover {
    border-color: var(--e6-signal);
    color: var(--e6-signal);
    transform: translateY(-2px);
    box-shadow: 0 0 16px var(--e6-signal-glow-soft);
}

.e6-social-list svg {
    width: 16px;
    height: 16px;
}

/* Footer bottom (copyright + small text) */
.e6-footer-bottom {
    text-align: center;
    color: var(--e6-text-muted);
    font-size: 0.82rem;
}

.e6-footer-copyright {
    margin: 0 0 var(--e6-space-2);
}

.e6-footer-meta {
    margin: 0;
    font-size: 0.74rem;
    color: var(--e6-text-dim);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   PHASE 1 NOTICE — Removed in Phase 2 — but keep class for backward compat
   ========================================================================== */
.e6-phase1-notice,
.e6-phase1-header,
.e6-phase1-main,
.e6-phase1-footer,
.e6-phase1-brand,
.e6-phase1-nav {
    display: none;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
    .e6-footer-top {
        grid-template-columns: 1fr 1fr;
        gap: var(--e6-space-8);
    }
    .e6-footer-brand-col {
        grid-column: span 2;
        max-width: none;
    }
}

@media (max-width: 900px) {
    .e6-brand-tag {
        display: none;
    }
    .e6-bot-status-label {
        display: none;
    }
}

@media (max-width: 768px) {
    .e6-header-inner {
        gap: var(--e6-space-4);
    }

    .e6-header-nav {
        position: fixed;
        top: var(--e6-nav-height);
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(11, 13, 15, 0.98);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        flex-direction: column;
        justify-content: flex-start;
        padding: var(--e6-space-6);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all var(--e6-transition);
        overflow-y: auto;
    }

    .e6-header-nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .e6-nav-menu {
        flex-direction: column;
        gap: 0;
        width: 100%;
        align-items: stretch;
    }

    .e6-nav-menu > li {
        width: 100%;
        border-bottom: 1px solid var(--e6-border);
    }

    .e6-nav-menu > li > a {
        padding: var(--e6-space-4) 0;
        font-size: 1rem;
    }

    /* Submenus on mobile: always visible, indented */
    .e6-submenu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        background: transparent;
        box-shadow: none;
        border: none;
        padding: 0 0 var(--e6-space-3) var(--e6-space-4);
        min-width: 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .e6-submenu::before {
        display: none;
    }

    .e6-submenu li a {
        padding: var(--e6-space-2) 0;
        border-left: none;
    }

    .e6-submenu li a:hover {
        background: transparent;
        padding-left: var(--e6-space-2);
    }

    .e6-mobile-toggle {
        display: flex;
    }

    .e6-bot-status-name,
    .e6-bot-status-arrow {
        display: none;
    }

    .e6-bot-status {
        padding: 8px 10px;
    }

    .e6-search-input {
        font-size: 1rem;
    }

    .e6-footer-top {
        grid-template-columns: 1fr;
    }

    .e6-footer-brand-col {
        grid-column: span 1;
    }

    .e6-footer-inner {
        padding: var(--e6-space-12) var(--e6-space-6) var(--e6-space-6);
    }
}

@media (max-width: 480px) {
    .e6-brand-text {
        display: none;
    }

    .e6-brand-link img {
        width: 44px;
        height: 44px;
    }

    .e6-header-inner {
        padding: 0 var(--e6-space-4);
    }
}

/* ==========================================================================
   PHASE 3: HOME PAGE — HERO SLIDER + SECTIONS
   ========================================================================== */

/* ---------- Section helpers ---------- */
.e6-section {
    position: relative;
    padding: var(--e6-space-16) var(--e6-space-6);
    overflow: hidden;
}

.e6-section-inner {
    max-width: var(--e6-max-width-wide);
    margin: 0 auto;
}

.e6-section-header {
    text-align: center;
    margin-bottom: var(--e6-space-12);
}

.e6-section-eyebrow {
    display: inline-block;
    font-family: var(--e6-font-mono);
    font-size: 0.78rem;
    color: var(--e6-signal);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: var(--e6-space-3);
    opacity: 0.92;
    display: block;   /* was inline-block: it could sit beside the title */
}

.e6-section-title {
    font-family: var(--e6-font-display);
    font-size: clamp(1.45rem, 2.7vw, 2.05rem);
    font-weight: 500;
    margin: 0 0 var(--e6-space-4);
    letter-spacing: 0.01em;
    background: linear-gradient(180deg, var(--e6-white) 0%, var(--e6-silver) 60%, var(--e6-slate-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1.15;
}

.e6-section-subtitle {
    color: var(--e6-text-soft);
    font-size: 1.075rem;
    line-height: 1.6;
    max-width: 720px;
    margin: 0 auto;
}

.e6-section-footer {
    text-align: center;
    margin-top: var(--e6-space-10);
}

.e6-section-empty {
    text-align: center;
    color: var(--e6-text-soft);
    padding: var(--e6-space-10) var(--e6-space-6);
    border: 1px dashed var(--e6-border);
    border-radius: var(--e6-radius-md);
    background: rgba(30, 32, 34, 0.3);
}

.e6-section-empty-hint a {
    color: var(--e6-signal);
    text-decoration: none;
    border-bottom: 1px dotted var(--e6-signal);
}

/* ==========================================================================
   HERO SLIDER
   ========================================================================== */
.e6-hero-slider {
    position: relative;
    min-height: 92vh;
    width: 100%;
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 60% at 50% 50%, rgba(30, 32, 34, 0.9) 0%, transparent 70%),
        radial-gradient(ellipse 60% 80% at 50% 100%, rgba(163, 174, 208, 0.12) 0%, transparent 60%),
        var(--e6-charcoal-deep);
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Atmosphere: one graphene sheet, drawn in JS (initHeroLattice) */
.e6-hero-lattice {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.e6-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(163, 174, 208, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(163, 174, 208, 0.04) 1px, transparent 1px);
    background-size: 80px 80px;
    background-position: center center;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 0%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 0%, transparent 80%);
    z-index: 3;
    pointer-events: none;
}

.e6-hero-vignette {
    position: absolute;
    inset: 0;
    z-index: 4;
    background: radial-gradient(ellipse 100% 80% at 50% 50%, transparent 40%, rgba(11, 13, 15, 0.7) 100%);
    pointer-events: none;
}

/* Slides container */
.e6-hero-slides {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: var(--e6-max-width-wide);
    margin: 0 auto;
    padding: 0 var(--e6-space-6);
}

.e6-hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 800ms ease, visibility 0s linear 800ms;
    padding: 0 var(--e6-space-6);
}

.e6-hero-slide.is-active {
    position: relative;
    opacity: 1;
    visibility: visible;
    transition: opacity 800ms ease, visibility 0s;
}

/* Slide content */
.e6-hero-content {
    text-align: center;
    max-width: 920px;
    margin: 0 auto;
    padding: var(--e6-space-12) 0;
}

.e6-hero-eyebrow {
    display: inline-block;
    font-family: var(--e6-font-mono);
    font-size: 0.78rem;
    color: var(--e6-signal);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: var(--e6-space-6);
    padding: var(--e6-space-2) var(--e6-space-4);
    border: 1px solid rgba(163, 174, 208, 0.3);
    border-radius: 999px;
    background: rgba(163, 174, 208, 0.05);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: e6-fade-up 700ms ease 100ms both;
}

/* Animated mark (chrome braces + electric plus) */
.e6-hero-mark {
    position: relative;
    width: 240px;
    height: 240px;
    margin: 0 auto var(--e6-space-6);
}

.e6-hero-mark-glow {
    position: absolute;
    inset: -40px;
    background: radial-gradient(circle, var(--e6-signal-glow) 0%, transparent 60%);
    filter: blur(20px);
    z-index: -1;
    animation: e6-mark-pulse 4s ease-in-out infinite;
}

.e6-hero-mark svg {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Brace path animation - draws in */
.e6-mark-brace {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: e6-brace-draw 1.4s cubic-bezier(0.65, 0, 0.35, 1) 200ms both;
}

.e6-mark-brace-right {
    animation-delay: 350ms;
}

.e6-mark-plus {
    opacity: 0;
    transform: scale(0.4);
    transform-origin: center;
    animation: e6-plus-pop 800ms cubic-bezier(0.34, 1.56, 0.64, 1) 1100ms both;
}

@keyframes e6-brace-draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes e6-plus-pop {
    0% { opacity: 0; transform: scale(0.4); }
    60% { opacity: 1; transform: scale(1.15); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes e6-mark-pulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.08); }
}

/* Hero typography */
.e6-hero-title {
    font-family: var(--e6-font-display);
    font-size: clamp(2.4rem, 6.5vw, 5rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: 0.005em;
    margin: 0 0 var(--e6-space-4);
    background: linear-gradient(180deg, var(--e6-white) 0%, var(--e6-silver) 60%, var(--e6-slate-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: e6-fade-up 800ms ease 1500ms both;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.e6-hero-tagline {
    font-family: var(--e6-font-display);
    font-size: clamp(1.05rem, 1.8vw, 1.4rem);
    color: var(--e6-text-soft);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 var(--e6-space-6);
    animation: e6-fade-up 800ms ease 1700ms both;
}

.e6-hero-tagline span {
    color: var(--e6-signal-bright);
    font-weight: 600;
}

.e6-hero-subtitle {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.65;
    color: var(--e6-text-soft);
    max-width: 680px;
    margin: 0 auto var(--e6-space-8);
    animation: e6-fade-up 800ms ease 1900ms both;
}

.e6-hero-cta-row {
    display: flex;
    gap: var(--e6-space-4);
    justify-content: center;
    flex-wrap: wrap;
    animation: e6-fade-up 800ms ease 2100ms both;
}

@keyframes e6-fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Slider arrow controls */
.e6-hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 48px;
    height: 48px;
    background: rgba(30, 32, 34, 0.6);
    border: 1px solid var(--e6-border);
    border-radius: 50%;
    color: var(--e6-silver);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--e6-transition);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.e6-hero-arrow:hover {
    background: rgba(163, 174, 208, 0.15);
    border-color: var(--e6-signal);
    color: var(--e6-signal-bright);
    transform: translateY(-50%) scale(1.05);
}

.e6-hero-arrow-prev {
    left: var(--e6-space-6);
}

.e6-hero-arrow-next {
    right: var(--e6-space-6);
}

/* Slider dots */
.e6-hero-dots {
    position: absolute;
    bottom: var(--e6-space-8);
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    gap: var(--e6-space-3);
}

.e6-hero-dot {
    width: 36px;
    height: 4px;
    background: rgba(163, 174, 208, 0.25);
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: all var(--e6-transition);
    padding: 0;
}

.e6-hero-dot.is-active {
    background: var(--e6-signal);
    box-shadow: 0 0 12px rgba(163, 174, 208, 0.6);
}

.e6-hero-dot:hover {
    background: rgba(163, 174, 208, 0.6);
}

/* Scroll cue */
.e6-hero-scroll-cue {
    position: absolute;
    bottom: var(--e6-space-4);
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--e6-space-2);
    color: var(--e6-text-soft);
    font-family: var(--e6-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.6;
    pointer-events: none;
    animation: e6-fade-up 800ms ease 2400ms both;
}

.e6-hero-scroll-cue-line {
    width: 1px;
    height: 24px;
    background: linear-gradient(to bottom, var(--e6-signal), transparent);
    animation: e6-scroll-pulse 2s ease-in-out infinite;
}

@keyframes e6-scroll-pulse {
    0%, 100% { opacity: 0.4; transform: scaleY(0.7); }
    50% { opacity: 1; transform: scaleY(1); }
}

/* ==========================================================================
   BOT SHOWCASE GRID
   ========================================================================== */
.e6-section-bots {
    background: linear-gradient(180deg, var(--e6-charcoal-deep) 0%, var(--e6-charcoal) 100%);
}

.e6-bot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--e6-space-6);
}

.e6-bot-card {
    --e6-bot-accent: var(--e6-signal);
    position: relative;
    background: linear-gradient(180deg, rgba(30, 32, 34, 0.6) 0%, rgba(11, 13, 15, 0.8) 100%);
    border: 1px solid var(--e6-border);
    border-radius: var(--e6-radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: all var(--e6-transition);
    display: flex;
    flex-direction: column;
}

.e6-bot-card:hover {
    border-color: var(--e6-bot-accent);
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4),
                0 0 24px color-mix(in srgb, var(--e6-bot-accent) 25%, transparent);
}

.e6-bot-card-image {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--e6-screen);
    overflow: hidden;
    border-bottom: 1px solid var(--e6-border);
}

.e6-bot-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--e6-transition-slow);
}

.e6-bot-card:hover .e6-bot-card-image img {
    transform: scale(1.04);
}

.e6-bot-card-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--e6-bot-accent);
}

.e6-bot-card-placeholder svg {
    width: 100px;
    height: 100px;
    opacity: 0.7;
}

.e6-bot-card-status {
    position: absolute;
    top: var(--e6-space-3);
    right: var(--e6-space-3);
    font-family: var(--e6-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(11, 13, 15, 0.85);
    border: 1px solid var(--e6-bot-accent);
    color: var(--e6-bot-accent);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.e6-bot-card-coming .e6-bot-card-status,
.e6-bot-card-dev .e6-bot-card-status {
    --e6-bot-accent: #8E95A5;
}

.e6-bot-card-beta .e6-bot-card-status {
    --e6-bot-accent: #A3AED0;
}

.e6-bot-card-body {
    padding: var(--e6-space-6);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.e6-bot-card-title {
    font-family: var(--e6-font-display);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 var(--e6-space-2);
    color: var(--e6-white);
}

.e6-bot-card-tagline {
    color: var(--e6-text-soft);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 0 var(--e6-space-4);
    flex: 1;
}

.e6-bot-card-price {
    margin: 0 0 var(--e6-space-3);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.e6-bot-card-price-label {
    font-family: var(--e6-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--e6-text-faded);
}

.e6-bot-card-price strong {
    font-family: var(--e6-font-display);
    font-size: 1.2rem;
    color: var(--e6-bot-accent);
}

.e6-bot-card-link {
    color: var(--e6-signal);
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: var(--e6-space-2);
}

/* ==========================================================================
   PRODUCT SPOTLIGHT
   ========================================================================== */
.e6-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--e6-space-5);
}

.e6-product-card {
    background: linear-gradient(180deg, rgba(30, 32, 34, 0.6) 0%, rgba(11, 13, 15, 0.8) 100%);
    border: 1px solid var(--e6-border);
    border-radius: var(--e6-radius-md);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: all var(--e6-transition);
}

.e6-product-card:hover {
    border-color: var(--e6-signal);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.e6-product-card-image {
    aspect-ratio: 1 / 1;
    background: var(--e6-screen);
    overflow: hidden;
}

.e6-product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.e6-product-card-body {
    padding: var(--e6-space-4);
}

.e6-product-card-title {
    font-family: var(--e6-font-display);
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 var(--e6-space-2);
    color: var(--e6-white);
}

.e6-product-card-price {
    color: var(--e6-signal);
    font-family: var(--e6-font-display);
    font-weight: 600;
    margin: 0 0 var(--e6-space-2);
    font-size: 1.05rem;
}

.e6-product-card-location {
    display: inline-block;
    font-family: var(--e6-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--e6-text-faded);
    padding: 3px 8px;
    background: rgba(163, 174, 208, 0.08);
    border-radius: var(--e6-radius-sm);
    border: 1px solid rgba(163, 174, 208, 0.2);
}

/* ==========================================================================
   WHY ELEMENT 6
   ========================================================================== */
.e6-section-why {
    background:
        radial-gradient(ellipse at top, rgba(163, 174, 208, 0.06) 0%, transparent 50%),
        var(--e6-charcoal);
}

.e6-why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--e6-space-6);
}

.e6-why-card {
    text-align: center;
    padding: var(--e6-space-8) var(--e6-space-5);
    background: rgba(30, 32, 34, 0.4);
    border: 1px solid var(--e6-border);
    border-radius: var(--e6-radius-lg);
    transition: all var(--e6-transition);
}

.e6-why-card:hover {
    border-color: var(--e6-signal);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.e6-why-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--e6-space-5);
    color: var(--e6-signal);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(163, 174, 208, 0.08);
    border: 1px solid rgba(163, 174, 208, 0.25);
    border-radius: var(--e6-radius-md);
    box-shadow: 0 0 20px rgba(163, 174, 208, 0.1);
}

.e6-why-icon svg {
    width: 28px;
    height: 28px;
}

.e6-why-title {
    font-family: var(--e6-font-display);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 var(--e6-space-3);
    color: var(--e6-white);
}

.e6-why-desc {
    color: var(--e6-text-soft);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0;
}

/* ==========================================================================
   FAQ TEASER
   ========================================================================== */
.e6-faq-list {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--e6-space-3);
}

.e6-faq-item {
    background: rgba(30, 32, 34, 0.4);
    border: 1px solid var(--e6-border);
    border-radius: var(--e6-radius-md);
    transition: all var(--e6-transition);
    overflow: hidden;
}

.e6-faq-item:hover {
    border-color: rgba(163, 174, 208, 0.4);
}

.e6-faq-item[open] {
    border-color: var(--e6-signal);
    background: rgba(30, 32, 34, 0.6);
}

.e6-faq-question {
    list-style: none;
    cursor: pointer;
    padding: var(--e6-space-5) var(--e6-space-6);
    font-family: var(--e6-font-display);
    font-weight: 600;
    color: var(--e6-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e6-space-4);
    user-select: none;
}

.e6-faq-question::-webkit-details-marker {
    display: none;
}

.e6-faq-toggle {
    color: var(--e6-signal);
    font-size: 1.4rem;
    line-height: 1;
    transition: transform var(--e6-transition);
    flex-shrink: 0;
}

.e6-faq-item[open] .e6-faq-toggle {
    transform: rotate(45deg);
}

.e6-faq-answer {
    padding: 0 var(--e6-space-6) var(--e6-space-5);
    color: var(--e6-text-soft);
    line-height: 1.65;
}

.e6-faq-answer p {
    margin: 0;
}

/* ==========================================================================
   NEWSLETTER
   ========================================================================== */
.e6-section-newsletter {
    padding: var(--e6-space-12) var(--e6-space-6);
}

.e6-newsletter-card {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--e6-space-12) var(--e6-space-8);
    background:
        radial-gradient(ellipse at top right, rgba(163, 174, 208, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, rgba(30, 32, 34, 0.8) 0%, rgba(11, 13, 15, 0.95) 100%);
    border: 1px solid var(--e6-border);
    border-radius: var(--e6-radius-xl);
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.e6-newsletter-title {
    font-family: var(--e6-font-display);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 600;
    margin: 0 0 var(--e6-space-3);
    background: linear-gradient(180deg, var(--e6-white) 0%, var(--e6-silver) 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.e6-newsletter-subtitle {
    color: var(--e6-text-soft);
    margin: 0 0 var(--e6-space-8);
}

.e6-newsletter-form {
    display: flex;
    gap: var(--e6-space-3);
    max-width: 520px;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
}

.e6-newsletter-form input[type="email"] {
    flex: 1;
    min-width: 220px;
    padding: var(--e6-space-4) var(--e6-space-5);
    background: rgba(11, 13, 15, 0.6);
    border: 1px solid var(--e6-border);
    border-radius: var(--e6-radius-md);
    color: var(--e6-white);
    font-family: var(--e6-font-body);
    font-size: 1rem;
    transition: all var(--e6-transition);
}

.e6-newsletter-form input[type="email"]:focus {
    outline: none;
    border-color: var(--e6-signal);
    box-shadow: 0 0 0 3px rgba(163, 174, 208, 0.15);
    background: rgba(11, 13, 15, 0.85);
}

.e6-newsletter-form input[type="email"]::placeholder {
    color: var(--e6-text-faded);
}

.e6-newsletter-alt {
    color: var(--e6-text-soft);
    font-size: 1.05rem;
    margin: 0;
}

.e6-newsletter-alt a {
    color: var(--e6-signal);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px dotted var(--e6-signal);
}

.e6-newsletter-alt a:hover {
    color: var(--e6-signal-bright);
}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.e6-section-cta {
    padding: var(--e6-space-16) var(--e6-space-6);
    background:
        radial-gradient(ellipse at center, rgba(163, 174, 208, 0.08) 0%, transparent 70%),
        var(--e6-charcoal-deep);
}

.e6-cta-band {
    text-align: center;
    max-width: 820px;
    margin: 0 auto;
}

.e6-cta-title {
    font-family: var(--e6-font-display);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 600;
    margin: 0 0 var(--e6-space-3);
    background: linear-gradient(180deg, var(--e6-white) 0%, var(--e6-silver) 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1.15;
}

.e6-cta-subtitle {
    color: var(--e6-text-soft);
    font-size: 1.075rem;
    margin: 0 0 var(--e6-space-8);
    line-height: 1.5;
}

.e6-cta-buttons {
    display: flex;
    gap: var(--e6-space-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* ==========================================================================
   PHASE 3: RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
    .e6-section {
        padding: var(--e6-space-12) var(--e6-space-4);
    }

    .e6-hero-slider {
        min-height: 88vh;
    }

    .e6-hero-mark {
        width: 130px;
        height: 130px;
        margin-bottom: var(--e6-space-4);
    }

    .e6-hero-content {
        padding: var(--e6-space-8) 0;
    }

    .e6-hero-arrow {
        width: 40px;
        height: 40px;
    }

    .e6-hero-arrow-prev {
        left: var(--e6-space-3);
    }

    .e6-hero-arrow-next {
        right: var(--e6-space-3);
    }

    .e6-hero-cta-row {
        flex-direction: column;
        align-items: stretch;
        max-width: 280px;
        margin: 0 auto;
    }

    .e6-hero-cta-row .e6-btn {
        justify-content: center;
    }

    .e6-newsletter-card {
        padding: var(--e6-space-8) var(--e6-space-5);
    }

    .e6-newsletter-form {
        flex-direction: column;
    }

    .e6-newsletter-form input[type="email"] {
        min-width: 0;
        width: 100%;
    }

    .e6-cta-buttons {
        flex-direction: column;
        align-items: stretch;
        max-width: 280px;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .e6-hero-dots {
        bottom: var(--e6-space-5);
    }

    .e6-hero-scroll-cue {
        display: none;
    }
}

/* ==========================================================================
   PHASE 4: PRODUCT SYSTEM
   ========================================================================== */

/* ---------- Archive layout ---------- */
.e6-archive {
    padding: var(--e6-space-12) var(--e6-space-6);
    min-height: 60vh;
}

.e6-archive-inner {
    max-width: var(--e6-max-width-wide);
    margin: 0 auto;
}

.e6-archive-header {
    text-align: center;
    margin-bottom: var(--e6-space-10);
}

.e6-archive-eyebrow {
    display: inline-block;
    font-family: var(--e6-font-mono);
    font-size: 0.78rem;
    color: var(--e6-signal);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: var(--e6-space-3);
}

.e6-archive-title {
    font-family: var(--e6-font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    margin: 0 0 var(--e6-space-4);
    background: linear-gradient(180deg, var(--e6-white) 0%, var(--e6-silver) 60%, var(--e6-slate-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.e6-archive-subtitle {
    color: var(--e6-text-soft);
    font-size: 1.05rem;
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ---------- Toolbar (filters + sort + count) ---------- */
.e6-archive-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--e6-space-4);
    padding: var(--e6-space-5) var(--e6-space-5);
    margin-bottom: var(--e6-space-8);
    background: rgba(30, 32, 34, 0.4);
    border: 1px solid var(--e6-border);
    border-radius: var(--e6-radius-md);
}

.e6-archive-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e6-space-2);
}

.e6-archive-filter {
    display: inline-block;
    padding: 6px 14px;
    font-family: var(--e6-font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--e6-text-soft);
    background: transparent;
    border: 1px solid var(--e6-border);
    border-radius: 999px;
    text-decoration: none;
    transition: all var(--e6-transition);
}

.e6-archive-filter:hover {
    color: var(--e6-signal);
    border-color: var(--e6-signal);
    background: rgba(163, 174, 208, 0.06);
}

.e6-archive-filter.is-active {
    color: var(--e6-charcoal);
    background: var(--e6-signal);
    border-color: var(--e6-signal);
    font-weight: 600;
}

.e6-archive-controls {
    display: flex;
    align-items: center;
    gap: var(--e6-space-4);
    flex-wrap: wrap;
}

.e6-archive-count {
    font-family: var(--e6-font-mono);
    font-size: 0.85rem;
    color: var(--e6-text-faded);
}

.e6-archive-sort select {
    padding: 6px 30px 6px 12px;
    background: rgba(11, 13, 15, 0.6);
    color: var(--e6-white);
    border: 1px solid var(--e6-border);
    border-radius: var(--e6-radius-sm);
    font-family: var(--e6-font-body);
    font-size: 0.875rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ab8ff' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
}

.e6-archive-sort select:focus {
    outline: none;
    border-color: var(--e6-signal);
    box-shadow: 0 0 0 3px rgba(163, 174, 208, 0.15);
}

/* ---------- Archive grid (uses centralized .e6-product-card) ---------- */
.e6-archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--e6-space-5);
}

/* ---------- Empty state ---------- */
.e6-archive-empty {
    text-align: center;
    padding: var(--e6-space-12) var(--e6-space-6);
    color: var(--e6-text-soft);
}

.e6-archive-empty p {
    margin-bottom: var(--e6-space-6);
}

/* ---------- Pagination ---------- */
.e6-archive-pagination {
    margin-top: var(--e6-space-10);
    display: flex;
    justify-content: center;
}

.e6-archive-pagination .nav-links {
    display: flex;
    gap: var(--e6-space-2);
    align-items: center;
}

.e6-archive-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    color: var(--e6-text-soft);
    background: transparent;
    border: 1px solid var(--e6-border);
    border-radius: var(--e6-radius-sm);
    text-decoration: none;
    font-family: var(--e6-font-mono);
    font-size: 0.875rem;
    transition: all var(--e6-transition);
}

.e6-archive-pagination .page-numbers:hover {
    color: var(--e6-signal);
    border-color: var(--e6-signal);
    background: rgba(163, 174, 208, 0.06);
}

.e6-archive-pagination .page-numbers.current {
    color: var(--e6-charcoal);
    background: var(--e6-signal);
    border-color: var(--e6-signal);
    font-weight: 600;
}

.e6-archive-pagination .page-numbers.dots {
    border-color: transparent;
    background: transparent;
}

/* ==========================================================================
   PHASE 4: PRODUCT CARD (centralized — used in archive + home spotlight)
   ========================================================================== */
.e6-product-card {
    position: relative;
    background: linear-gradient(180deg, rgba(30, 32, 34, 0.6) 0%, rgba(11, 13, 15, 0.8) 100%);
    border: 1px solid var(--e6-border);
    border-radius: var(--e6-radius-md);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: all var(--e6-transition);
    display: flex;
    flex-direction: column;
}

.e6-product-card:hover {
    border-color: var(--e6-signal);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 20px rgba(163, 174, 208, 0.15);
}

.e6-product-card-image {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--e6-screen);
    overflow: hidden;
    border-bottom: 1px solid var(--e6-border);
}

.e6-product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--e6-transition-slow);
}

.e6-product-card:hover .e6-product-card-image img {
    transform: scale(1.04);
}

.e6-product-card-no-image {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--e6-text-faded);
    opacity: 0.4;
}

.e6-product-card-no-image svg {
    width: 48px;
    height: 48px;
}

.e6-product-card-badge {
    position: absolute;
    top: var(--e6-space-3);
    right: var(--e6-space-3);
    font-family: var(--e6-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(142, 149, 165, 0.15);
    border: 1px solid rgba(142, 149, 165, 0.5);
    color: #A3AED0;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.e6-product-card-coming .e6-product-card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 50%, rgba(142, 149, 165, 0.1) 100%);
    pointer-events: none;
}

.e6-product-card-body {
    padding: var(--e6-space-4) var(--e6-space-5);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--e6-space-2);
}

.e6-product-card-cat {
    font-family: var(--e6-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--e6-signal);
    opacity: 0.75;
}

.e6-product-card-title {
    font-family: var(--e6-font-display);
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    color: var(--e6-white);
    line-height: 1.3;
}

.e6-product-card-price {
    color: var(--e6-signal);
    font-family: var(--e6-font-display);
    font-weight: 600;
    margin: 0;
    font-size: 1.05rem;
}

.e6-product-card-price-tba {
    color: var(--e6-text-faded);
    font-size: 0.9rem;
    font-weight: 500;
}

.e6-product-card-location {
    display: inline-block;
    align-self: flex-start;
    font-family: var(--e6-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--e6-text-faded);
    padding: 3px 8px;
    background: rgba(163, 174, 208, 0.08);
    border-radius: var(--e6-radius-sm);
    border: 1px solid rgba(163, 174, 208, 0.2);
    margin-top: auto;
}

/* ==========================================================================
   PHASE 4: PRODUCT DETAIL PAGE
   ========================================================================== */
.e6-product-single {
    padding: var(--e6-space-12) var(--e6-space-6);
}

.e6-product-detail-inner {
    max-width: var(--e6-max-width-wide);
    margin: 0 auto;
}

/* ---------- Breadcrumbs ---------- */
.e6-product-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e6-space-2);
    font-family: var(--e6-font-mono);
    font-size: 0.78rem;
    color: var(--e6-text-faded);
    margin-bottom: var(--e6-space-8);
    letter-spacing: 0.05em;
}

.e6-product-breadcrumbs a {
    color: var(--e6-text-soft);
    text-decoration: none;
    transition: color var(--e6-transition-fast);
}

.e6-product-breadcrumbs a:hover {
    color: var(--e6-signal);
}

.e6-breadcrumb-sep {
    color: var(--e6-text-faded);
    opacity: 0.6;
}

.e6-breadcrumb-current {
    color: var(--e6-white);
}

/* ---------- Detail grid: gallery left, info right ---------- */
.e6-product-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e6-space-10);
    align-items: start;
}

@media (max-width: 900px) {
    .e6-product-detail-grid {
        grid-template-columns: 1fr;
        gap: var(--e6-space-8);
    }
}

/* ---------- Gallery column ---------- */
.e6-product-gallery {
    position: sticky;
    top: calc(var(--e6-nav-height) + var(--e6-space-6));
}

.e6-product-gallery-main {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--e6-screen);
    border: 1px solid var(--e6-border);
    border-radius: var(--e6-radius-md);
    overflow: hidden;
    margin-bottom: var(--e6-space-3);
}

.e6-product-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity var(--e6-transition);
}

.e6-product-coming-badge {
    position: absolute;
    top: var(--e6-space-4);
    right: var(--e6-space-4);
    z-index: 2;
    font-family: var(--e6-font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(142, 149, 165, 0.15);
    border: 1px solid rgba(142, 149, 165, 0.6);
    color: #A3AED0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 0 20px rgba(142, 149, 165, 0.2);
}

.e6-product-no-image {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--e6-space-3);
    color: var(--e6-text-faded);
}

.e6-product-no-image svg {
    width: 64px;
    height: 64px;
    opacity: 0.5;
}

.e6-product-no-image span {
    font-family: var(--e6-font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.e6-product-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--e6-space-2);
}

@media (max-width: 600px) {
    .e6-product-gallery-thumbs {
        grid-template-columns: repeat(4, 1fr);
    }
}

.e6-product-thumb {
    aspect-ratio: 1 / 1;
    background: var(--e6-screen);
    border: 2px solid var(--e6-border);
    border-radius: var(--e6-radius-sm);
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    transition: all var(--e6-transition-fast);
}

.e6-product-thumb:hover {
    border-color: rgba(163, 174, 208, 0.5);
}

.e6-product-thumb.is-active {
    border-color: var(--e6-signal);
    box-shadow: 0 0 0 1px var(--e6-signal);
}

.e6-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------- Info column ---------- */
.e6-product-info-col {
    padding-top: var(--e6-space-2);
}

.e6-product-categories {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e6-space-2);
    margin-bottom: var(--e6-space-4);
}

.e6-product-cat-tag {
    display: inline-block;
    font-family: var(--e6-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--e6-signal);
    padding: 4px 10px;
    background: rgba(163, 174, 208, 0.06);
    border: 1px solid rgba(163, 174, 208, 0.25);
    border-radius: 999px;
    text-decoration: none;
    transition: all var(--e6-transition-fast);
}

.e6-product-cat-tag:hover {
    background: rgba(163, 174, 208, 0.15);
    border-color: var(--e6-signal);
}

.e6-product-title {
    font-family: var(--e6-font-display);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 600;
    margin: 0 0 var(--e6-space-3);
    line-height: 1.15;
    background: linear-gradient(180deg, var(--e6-white) 0%, var(--e6-silver) 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.e6-product-excerpt {
    font-size: 1.075rem;
    color: var(--e6-text-soft);
    line-height: 1.6;
    margin: 0 0 var(--e6-space-6);
}

.e6-product-price-block {
    display: flex;
    align-items: baseline;
    gap: var(--e6-space-3);
    padding: var(--e6-space-4) var(--e6-space-5);
    background: rgba(163, 174, 208, 0.05);
    border: 1px solid rgba(163, 174, 208, 0.25);
    border-radius: var(--e6-radius-md);
    margin-bottom: var(--e6-space-6);
}

.e6-product-price-label {
    font-family: var(--e6-font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--e6-text-faded);
}

.e6-product-price {
    font-family: var(--e6-font-display);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--e6-signal-bright);
}

.e6-product-description {
    color: var(--e6-text-soft);
    line-height: 1.7;
    margin-bottom: var(--e6-space-6);
}

.e6-product-description p {
    margin: 0 0 var(--e6-space-4);
}

.e6-product-description p:last-child {
    margin-bottom: 0;
}

/* ---------- Features list ---------- */
.e6-product-features {
    margin-bottom: var(--e6-space-6);
}

.e6-product-features-heading {
    font-family: var(--e6-font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--e6-white);
    margin: 0 0 var(--e6-space-3);
    letter-spacing: 0.02em;
}

.e6-product-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--e6-space-2);
}

.e6-product-features-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--e6-space-3);
    color: var(--e6-text-soft);
    line-height: 1.5;
}

.e6-feature-check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(163, 174, 208, 0.12);
    border: 1px solid rgba(163, 174, 208, 0.3);
    border-radius: 50%;
    color: var(--e6-signal);
    margin-top: 2px;
}

.e6-feature-check svg {
    width: 12px;
    height: 12px;
}

/* ---------- Purchase block ---------- */
.e6-product-purchase {
    padding: var(--e6-space-6) var(--e6-space-5);
    background:
        radial-gradient(ellipse at top, rgba(163, 174, 208, 0.06) 0%, transparent 50%),
        rgba(30, 32, 34, 0.5);
    border: 1px solid var(--e6-border);
    border-radius: var(--e6-radius-md);
}

.e6-product-purchase-heading {
    font-family: var(--e6-font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--e6-white);
    margin: 0 0 var(--e6-space-4);
}

.e6-product-purchase-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--e6-space-3);
}

.e6-product-purchase-buttons .e6-btn {
    justify-content: flex-start;
    text-align: left;
}

.e6-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: var(--e6-space-2);
}

.e6-btn-icon svg {
    width: 18px;
    height: 18px;
}

.e6-product-purchase-note {
    margin-top: var(--e6-space-4);
    font-size: 0.85rem;
    color: var(--e6-text-faded);
    text-align: center;
}

.e6-product-purchase-coming {
    border-color: rgba(142, 149, 165, 0.4);
    background:
        radial-gradient(ellipse at top, rgba(142, 149, 165, 0.06) 0%, transparent 50%),
        rgba(30, 32, 34, 0.5);
}

.e6-product-purchase-coming .e6-product-purchase-heading {
    color: #A3AED0;
}

.e6-product-purchase-coming p {
    color: var(--e6-text-soft);
    line-height: 1.6;
    margin: 0 0 var(--e6-space-4);
}

/* ==========================================================================
   PHASE 4: RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
    .e6-archive {
        padding: var(--e6-space-8) var(--e6-space-4);
    }

    .e6-archive-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .e6-archive-controls {
        justify-content: space-between;
    }

    .e6-product-single {
        padding: var(--e6-space-8) var(--e6-space-4);
    }

    .e6-product-gallery {
        position: static;
    }
}

/* ==========================================================================
   PHASE 5: BOT ARCHIVE + DETAIL
   ========================================================================== */

/* ---------- Bot archive grid ---------- */
.e6-bot-archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--e6-space-5);
}

/* Override archive bot card to use the larger format */
.e6-bot-archive-grid .e6-bot-card {
    background: linear-gradient(180deg, rgba(30, 32, 34, 0.6) 0%, rgba(11, 13, 15, 0.8) 100%);
    border: 1px solid var(--e6-border);
    border-radius: var(--e6-radius-md);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: all var(--e6-transition);
    display: flex;
    flex-direction: column;
    position: relative;
}

.e6-bot-archive-grid .e6-bot-card:hover {
    border-color: var(--e6-signal);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 20px rgba(163, 174, 208, 0.15);
}

.e6-bot-archive-grid .e6-bot-card-image {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--e6-screen);
    overflow: hidden;
    border-bottom: 1px solid var(--e6-border);
}

.e6-bot-archive-grid .e6-bot-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.e6-bot-archive-grid .e6-bot-card-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.e6-bot-archive-grid .e6-bot-card-placeholder svg {
    width: 50%;
    height: auto;
    max-width: 120px;
}

.e6-bot-card-status-badge {
    position: absolute;
    top: var(--e6-space-3);
    right: var(--e6-space-3);
    font-family: var(--e6-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.e6-bot-status-available {
    background: rgba(242, 100, 25, 0.15);
    border: 1px solid rgba(242, 100, 25, 0.5);
    color: #F26419;
}

.e6-bot-status-beta {
    background: rgba(163, 174, 208, 0.15);
    border: 1px solid rgba(163, 174, 208, 0.5);
    color: #A3AED0;
}

.e6-bot-status-coming, .e6-bot-status-dev {
    background: rgba(142, 149, 165, 0.15);
    border: 1px solid rgba(142, 149, 165, 0.5);
    color: #A3AED0;
}

.e6-bot-archive-grid .e6-bot-card-body {
    padding: var(--e6-space-5);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--e6-space-2);
}

.e6-bot-card-type {
    font-family: var(--e6-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--e6-signal);
    opacity: 0.75;
}

.e6-bot-archive-grid .e6-bot-card-title {
    font-family: var(--e6-font-display);
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0;
    color: var(--e6-white);
    line-height: 1.2;
}

.e6-bot-card-tagline {
    color: var(--e6-text-soft);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
    flex: 1;
}

.e6-bot-card-price {
    display: flex;
    align-items: baseline;
    gap: var(--e6-space-2);
    margin: 0;
    margin-top: auto;
    padding-top: var(--e6-space-2);
}

.e6-bot-card-price-label {
    font-family: var(--e6-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--e6-text-faded);
}

.e6-bot-card-price-value {
    font-family: var(--e6-font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--e6-signal);
}

/* ---------- Bot detail page ---------- */
.e6-bot-single {
    padding: var(--e6-space-12) var(--e6-space-6);
}

.e6-bot-detail-inner {
    max-width: var(--e6-max-width-wide);
    margin: 0 auto;
}

/* Bot hero */
.e6-bot-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e6-space-10);
    align-items: center;
    padding: var(--e6-space-10) 0;
    margin-bottom: var(--e6-space-10);
    border-bottom: 1px solid var(--e6-border);
}

@media (max-width: 900px) {
    .e6-bot-hero {
        grid-template-columns: 1fr;
        gap: var(--e6-space-8);
        text-align: center;
    }
}

.e6-bot-hero-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    font-family: var(--e6-font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: var(--e6-space-4);
}

.e6-bot-hero-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}

.e6-bot-hero-title {
    font-family: var(--e6-font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 600;
    line-height: 1.05;
    margin: 0 0 var(--e6-space-4);
    background: linear-gradient(180deg, var(--e6-white) 0%, var(--e6-silver) 60%, var(--e6-slate-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.e6-bot-hero-tagline {
    font-family: var(--e6-font-mono);
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    color: var(--e6-signal);
    margin: 0 0 var(--e6-space-5);
}

.e6-bot-hero-excerpt {
    font-size: 1.075rem;
    color: var(--e6-text-soft);
    line-height: 1.6;
    margin: 0 0 var(--e6-space-6);
    max-width: 540px;
}

@media (max-width: 900px) {
    .e6-bot-hero-excerpt { margin-left: auto; margin-right: auto; }
}

.e6-bot-hero-price-block {
    display: inline-flex;
    align-items: baseline;
    gap: var(--e6-space-3);
    padding: var(--e6-space-3) var(--e6-space-5);
    background: rgba(163, 174, 208, 0.05);
    border: 1px solid rgba(163, 174, 208, 0.25);
    border-radius: var(--e6-radius-md);
    margin-bottom: var(--e6-space-6);
}

.e6-bot-hero-price-label {
    font-family: var(--e6-font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--e6-text-faded);
}

.e6-bot-hero-price {
    font-family: var(--e6-font-display);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--e6-signal-bright);
}

.e6-bot-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e6-space-3);
}

@media (max-width: 900px) {
    .e6-bot-hero-actions { justify-content: center; }
}

/* Bot hero visual */
.e6-bot-hero-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.e6-bot-hero-visual img {
    max-width: 100%;
    border-radius: var(--e6-radius-md);
    border: 1px solid var(--e6-border);
}

.e6-bot-hero-mark {
    position: relative;
    width: 280px;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.e6-bot-hero-mark svg {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.e6-bot-hero-mark-glow {
    position: absolute;
    inset: -50px;
    background: radial-gradient(circle, var(--e6-signal-glow) 0%, transparent 60%);
    filter: blur(24px);
    z-index: 0;
    animation: e6-mark-pulse 4s ease-in-out infinite;
}

/* Bot sections */
.e6-bot-section {
    padding: var(--e6-space-8) 0;
    border-bottom: 1px solid var(--e6-border);
}

.e6-bot-section:last-of-type {
    border-bottom: none;
}

.e6-bot-section-title {
    font-family: var(--e6-font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--e6-white);
    margin: 0 0 var(--e6-space-5);
}

.e6-bot-content {
    color: var(--e6-text-soft);
    line-height: 1.7;
    max-width: 720px;
}

.e6-bot-content p {
    margin: 0 0 var(--e6-space-4);
}

.e6-bot-features-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--e6-space-3) var(--e6-space-5);
}

.e6-bot-feature-item {
    display: flex;
    align-items: flex-start;
    gap: var(--e6-space-3);
    color: var(--e6-text-soft);
    line-height: 1.5;
}

/* Bot CTA band */
.e6-bot-cta-band {
    text-align: center;
    padding: var(--e6-space-10) var(--e6-space-6);
    margin-top: var(--e6-space-10);
    background:
        radial-gradient(ellipse at center, rgba(163, 174, 208, 0.08) 0%, transparent 60%),
        rgba(30, 32, 34, 0.5);
    border: 1px solid var(--e6-border);
    border-radius: var(--e6-radius-md);
}

.e6-bot-cta-heading {
    font-family: var(--e6-font-display);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--e6-white);
    margin: 0 0 var(--e6-space-3);
}

.e6-bot-cta-text {
    color: var(--e6-text-soft);
    margin: 0 0 var(--e6-space-6);
    line-height: 1.6;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}

.e6-bot-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e6-space-3);
    justify-content: center;
}

/* ==========================================================================
   PHASE 5: PAGE HERO (used by About, Contact, FAQ)
   ========================================================================== */
.e6-page-hero {
    padding: var(--e6-space-12) var(--e6-space-6) var(--e6-space-10);
    background:
        radial-gradient(ellipse 60% 80% at 50% 100%, rgba(163, 174, 208, 0.08) 0%, transparent 60%),
        var(--e6-charcoal-deep);
    border-bottom: 1px solid var(--e6-border);
    text-align: center;
}

.e6-page-hero-inner {
    max-width: 900px;
    margin: 0 auto;
}

.e6-page-eyebrow {
    display: inline-block;
    font-family: var(--e6-font-mono);
    font-size: 0.78rem;
    color: var(--e6-signal);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: var(--e6-space-3);
}

.e6-page-title {
    font-family: var(--e6-font-display);
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 600;
    margin: 0 0 var(--e6-space-4);
    line-height: 1.05;
    background: linear-gradient(180deg, var(--e6-white) 0%, var(--e6-silver) 60%, var(--e6-slate-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.e6-page-subtitle {
    color: var(--e6-text-soft);
    font-size: 1.075rem;
    line-height: 1.6;
    max-width: 640px;
    margin: 0 auto;
}

.e6-page-subtitle p {
    margin: 0 0 var(--e6-space-3);
}

.e6-page-subtitle p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   PHASE 5: ABOUT PAGE
   ========================================================================== */
.e6-page-content {
    padding: var(--e6-space-12) var(--e6-space-6);
}

.e6-page-content-inner {
    max-width: 760px;
    margin: 0 auto;
    color: var(--e6-text-soft);
    line-height: 1.7;
    font-size: 1.05rem;
}

.e6-page-content-inner p {
    margin: 0 0 var(--e6-space-4);
}

.e6-page-content-inner h2 {
    font-family: var(--e6-font-display);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--e6-white);
    margin: var(--e6-space-8) 0 var(--e6-space-4);
}

.e6-page-content-inner h3 {
    font-family: var(--e6-font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--e6-white);
    margin: var(--e6-space-6) 0 var(--e6-space-3);
}

.e6-page-content-inner ul,
.e6-page-content-inner ol {
    margin: 0 0 var(--e6-space-4) 0;
    padding-left: var(--e6-space-6);
}

.e6-page-content-inner li {
    margin-bottom: var(--e6-space-2);
}

.e6-page-content-inner a {
    color: var(--e6-signal);
    text-decoration: none;
    border-bottom: 1px solid rgba(163, 174, 208, 0.4);
    transition: all var(--e6-transition-fast);
}

.e6-page-content-inner a:hover {
    color: var(--e6-signal-bright);
    border-bottom-color: var(--e6-signal);
}

.e6-page-content-inner strong {
    color: var(--e6-white);
    font-weight: 600;
}

/* About page specific layout — wider for sections */
.e6-page-content-about {
    padding: var(--e6-space-10) var(--e6-space-6);
}

.e6-page-about .e6-bot-cta-band {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   PHASE 5: CONTACT PAGE
   ========================================================================== */
.e6-contact-grid-wrap {
    padding: var(--e6-space-10) var(--e6-space-6);
}

.e6-contact-grid {
    max-width: var(--e6-max-width-wide);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--e6-space-10);
    align-items: start;
}

@media (max-width: 900px) {
    .e6-contact-grid {
        grid-template-columns: 1fr;
        gap: var(--e6-space-8);
    }
}

.e6-contact-section-title {
    font-family: var(--e6-font-display);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--e6-white);
    margin: 0 0 var(--e6-space-5);
}

/* ---------- Contact form ---------- */
.e6-contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--e6-space-4);
}

.e6-contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e6-space-4);
}

@media (max-width: 600px) {
    .e6-contact-form-row { grid-template-columns: 1fr; }
}

.e6-contact-field {
    display: flex;
    flex-direction: column;
    gap: var(--e6-space-2);
}

.e6-contact-field label {
    font-family: var(--e6-font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--e6-text-faded);
}

.e6-contact-required {
    color: var(--e6-signal);
}

.e6-contact-field input,
.e6-contact-field textarea {
    padding: 12px 14px;
    background: rgba(11, 13, 15, 0.6);
    color: var(--e6-white);
    border: 1px solid var(--e6-border);
    border-radius: var(--e6-radius-sm);
    font-family: var(--e6-font-body);
    font-size: 0.95rem;
    transition: all var(--e6-transition-fast);
}

.e6-contact-field input:focus,
.e6-contact-field textarea:focus {
    outline: none;
    border-color: var(--e6-signal);
    background: rgba(30, 32, 34, 0.6);
    box-shadow: 0 0 0 3px rgba(163, 174, 208, 0.15);
}

.e6-contact-field textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 1.5;
}

/* Honeypot — hide visually, accessible to bots */
.e6-contact-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.e6-contact-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e6-space-4);
    margin-top: var(--e6-space-2);
}

.e6-contact-fallback {
    margin: 0;
    color: var(--e6-text-faded);
    font-size: 0.875rem;
}

.e6-contact-fallback a {
    color: var(--e6-signal);
    text-decoration: none;
}

.e6-contact-fallback a:hover {
    color: var(--e6-signal-bright);
    text-decoration: underline;
}

/* ---------- Contact notices ---------- */
.e6-contact-notice {
    padding: var(--e6-space-4) var(--e6-space-5);
    border-radius: var(--e6-radius-md);
    margin-bottom: var(--e6-space-5);
    border: 1px solid;
}

.e6-contact-notice strong {
    display: block;
    margin-bottom: var(--e6-space-2);
}

.e6-contact-notice p {
    margin: 0;
    line-height: 1.5;
}

.e6-contact-notice-success {
    background: rgba(242, 100, 25, 0.08);
    border-color: rgba(242, 100, 25, 0.4);
    color: #86efac;
}

.e6-contact-notice-success strong {
    color: #86efac;
}

.e6-contact-notice-error {
    background: rgba(248, 113, 113, 0.08);
    border-color: rgba(248, 113, 113, 0.4);
    color: #fca5a5;
}

.e6-contact-notice-error strong {
    color: #fca5a5;
}

.e6-contact-notice-error a {
    color: #fca5a5;
    text-decoration: underline;
}

/* ---------- Contact info cards ---------- */
.e6-contact-info-col {
    display: flex;
    flex-direction: column;
    gap: var(--e6-space-4);
}

.e6-contact-card {
    display: flex;
    gap: var(--e6-space-4);
    padding: var(--e6-space-5);
    background: linear-gradient(180deg, rgba(30, 32, 34, 0.6) 0%, rgba(11, 13, 15, 0.8) 100%);
    border: 1px solid var(--e6-border);
    border-radius: var(--e6-radius-md);
    transition: border-color var(--e6-transition-fast);
}

.e6-contact-card:hover {
    border-color: rgba(163, 174, 208, 0.5);
}

.e6-contact-card-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(163, 174, 208, 0.1);
    border: 1px solid rgba(163, 174, 208, 0.3);
    border-radius: var(--e6-radius-sm);
    color: var(--e6-signal);
}

.e6-contact-card-icon svg {
    width: 20px;
    height: 20px;
}

.e6-contact-card-body h3 {
    font-family: var(--e6-font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--e6-white);
    margin: 0 0 var(--e6-space-1);
}

.e6-contact-card-body p {
    margin: 0;
    line-height: 1.5;
}

.e6-contact-card-body p a {
    color: var(--e6-signal);
    text-decoration: none;
    word-break: break-word;
}

.e6-contact-card-body p a:hover {
    color: var(--e6-signal-bright);
    text-decoration: underline;
}

.e6-contact-card-note {
    margin-top: var(--e6-space-2) !important;
    color: var(--e6-text-faded) !important;
    font-size: 0.85rem;
}

/* ==========================================================================
   PHASE 5: FAQ PAGE
   ========================================================================== */
.e6-faq-wrap {
    padding: var(--e6-space-10) var(--e6-space-6);
}

.e6-faq-inner {
    max-width: 880px;
    margin: 0 auto;
}

/* Category nav pills */
.e6-faq-category-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e6-space-2);
    justify-content: center;
    margin-bottom: var(--e6-space-10);
    padding: var(--e6-space-4);
    background: rgba(30, 32, 34, 0.4);
    border: 1px solid var(--e6-border);
    border-radius: var(--e6-radius-md);
}

.e6-faq-cat-pill {
    display: inline-block;
    padding: 6px 14px;
    font-family: var(--e6-font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--e6-text-soft);
    background: transparent;
    border: 1px solid var(--e6-border);
    border-radius: 999px;
    text-decoration: none;
    transition: all var(--e6-transition);
}

.e6-faq-cat-pill:hover {
    color: var(--e6-signal);
    border-color: var(--e6-signal);
    background: rgba(163, 174, 208, 0.06);
}

/* FAQ section */
.e6-faq-section {
    margin-bottom: var(--e6-space-10);
    scroll-margin-top: calc(var(--e6-nav-height) + 40px);
}

.e6-faq-section-header {
    margin-bottom: var(--e6-space-5);
    padding-bottom: var(--e6-space-3);
    border-bottom: 1px solid var(--e6-border);
}

.e6-faq-section-title {
    font-family: var(--e6-font-display);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--e6-white);
    margin: 0;
}

.e6-faq-section-description {
    color: var(--e6-text-faded);
    font-size: 0.95rem;
    margin: var(--e6-space-2) 0 0;
}

/* Accordion items */
.e6-faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--e6-space-3);
}

.e6-faq-item {
    background: linear-gradient(180deg, rgba(30, 32, 34, 0.6) 0%, rgba(11, 13, 15, 0.8) 100%);
    border: 1px solid var(--e6-border);
    border-radius: var(--e6-radius-md);
    overflow: hidden;
    transition: border-color var(--e6-transition-fast);
}

.e6-faq-item[open] {
    border-color: rgba(163, 174, 208, 0.4);
}

.e6-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e6-space-4);
    padding: var(--e6-space-5);
    cursor: pointer;
    list-style: none;
    transition: background var(--e6-transition-fast);
}

.e6-faq-question::-webkit-details-marker { display: none; }

.e6-faq-question:hover {
    background: rgba(163, 174, 208, 0.04);
}

.e6-faq-q-text {
    font-family: var(--e6-font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--e6-white);
    line-height: 1.4;
}

.e6-faq-q-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--e6-signal);
    transition: transform var(--e6-transition);
}

.e6-faq-q-icon svg { width: 18px; height: 18px; }

.e6-faq-item[open] .e6-faq-q-icon {
    transform: rotate(180deg);
}

.e6-faq-answer {
    padding: 0 var(--e6-space-5) var(--e6-space-5);
    color: var(--e6-text-soft);
    line-height: 1.7;
    border-top: 1px solid var(--e6-border);
    padding-top: var(--e6-space-4);
    margin-top: var(--e6-space-1);
}

.e6-faq-answer p {
    margin: 0 0 var(--e6-space-3);
}

.e6-faq-answer p:last-child {
    margin-bottom: 0;
}

.e6-faq-answer a {
    color: var(--e6-signal);
    text-decoration: none;
    border-bottom: 1px solid rgba(163, 174, 208, 0.4);
}

.e6-faq-answer a:hover {
    color: var(--e6-signal-bright);
}

/* ==========================================================================
   PHASE 6: FLAIR PASS — Animations, Glassmorphism, Atmospheric Backdrops
   ========================================================================== */

/* ---------- Page load entrance ---------- */
body.e6-is-loading .e6-main { opacity: 0; }
body.e6-is-loaded .e6-main {
    opacity: 1;
    transition: opacity 600ms ease;
}

/* ---------- Scroll animations ---------- */
.e6-animate-hidden { opacity: 0; }

.e6-animate-fade-up {
    animation: e6-fadeUp 700ms cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes e6-fadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

.e6-animate-fade-down {
    animation: e6-fadeDown 700ms cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes e6-fadeDown {
    from { opacity: 0; transform: translateY(-28px); }
    to   { opacity: 1; transform: translateY(0); }
}

.e6-animate-fade-left {
    animation: e6-fadeLeft 800ms cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes e6-fadeLeft {
    from { opacity: 0; transform: translateX(28px); }
    to   { opacity: 1; transform: translateX(0); }
}

.e6-animate-fade-right {
    animation: e6-fadeRight 800ms cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes e6-fadeRight {
    from { opacity: 0; transform: translateX(-28px); }
    to   { opacity: 1; transform: translateX(0); }
}

.e6-animate-scale-up {
    animation: e6-scaleUp 700ms cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes e6-scaleUp {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .e6-animate-hidden { opacity: 1; }
    [class*="e6-animate-fade"], .e6-animate-scale-up {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ==========================================================================
   GLASSMORPHISM UTILITIES
   ========================================================================== */
.e6-glass {
    background: rgba(30, 32, 34, 0.45);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(244, 244, 246, 0.08);
    box-shadow:
        0 8px 32px rgba(11, 13, 15, 0.4),
        inset 0 1px 0 rgba(244, 244, 246, 0.04);
}

.e6-glass-soft {
    background: rgba(30, 32, 34, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(244, 244, 246, 0.05);
}

.e6-glass-electric {
    background: rgba(30, 32, 34, 0.45);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(163, 174, 208, 0.25);
    box-shadow:
        0 8px 32px rgba(11, 13, 15, 0.4),
        0 0 24px rgba(163, 174, 208, 0.1),
        inset 0 1px 0 rgba(163, 174, 208, 0.08);
}

/* ==========================================================================
   ATMOSPHERIC PAGE BACKDROPS
   ========================================================================== */

/* Page hero background — for About, Contact, FAQ heroes */
.e6-page-hero {
    position: relative;
    overflow: hidden;
}

.e6-page-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 60% at 50% 40%, rgba(30, 32, 34, 0.85) 0%, transparent 70%),
        radial-gradient(ellipse 60% 80% at 50% 100%, rgba(163, 174, 208, 0.10) 0%, transparent 60%);
}

.e6-page-hero-bg::before,
.e6-page-hero-bg::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    animation: e6-float-slow 12s ease-in-out infinite;
}

.e6-page-hero-bg::before {
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(163, 174, 208, 0.4) 0%, transparent 70%);
    top: -80px;
    left: 10%;
}

.e6-page-hero-bg::after {
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(163, 174, 208, 0.3) 0%, transparent 70%);
    bottom: -100px;
    right: 12%;
    animation-delay: -6s;
}

@keyframes e6-float-slow {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(40px, -30px) scale(1.05); }
}

.e6-page-hero-inner {
    position: relative;
    z-index: 1;
}

/* Subtle grid overlay on hero */
.e6-page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(163, 174, 208, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(163, 174, 208, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 0%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 0%, transparent 80%);
    pointer-events: none;
    z-index: 0;
}

/* Archive page atmospheric background (Bots / Products) */
.e6-archive { position: relative; }

.e6-archive-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(30, 32, 34, 0.5) 0%, transparent 70%),
        radial-gradient(circle 600px at 80% 30%, rgba(163, 174, 208, 0.06) 0%, transparent 70%),
        radial-gradient(circle 500px at 20% 70%, rgba(163, 174, 208, 0.05) 0%, transparent 70%);
}

.e6-archive-inner {
    position: relative;
    z-index: 1;
}

/* Bot detail page background */
.e6-bot-single { position: relative; overflow: hidden; }

.e6-bot-page-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 90% 60% at 50% 0%, rgba(30, 32, 34, 0.7) 0%, transparent 60%),
        radial-gradient(circle 700px at 90% 20%, rgba(163, 174, 208, 0.08) 0%, transparent 70%),
        radial-gradient(circle 500px at 10% 60%, rgba(163, 174, 208, 0.06) 0%, transparent 70%);
}

.e6-bot-detail-inner {
    position: relative;
    z-index: 1;
}

/* Product detail background */
.e6-product-single { position: relative; }
/* NOTE: no overflow:hidden here. It silently disables position:sticky on
   .e6-product-gallery, which strands the image at the top of long pages.
   The page background is clipped with inset+border-radius instead. */

.e6-product-page-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(30, 32, 34, 0.6) 0%, transparent 65%),
        radial-gradient(circle 600px at 70% 30%, rgba(163, 174, 208, 0.07) 0%, transparent 70%);
}

.e6-product-detail-inner {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   PHASE 6: REFINED CARD HOVER (with glow)
   ========================================================================== */

.e6-product-card,
.e6-bot-archive-grid .e6-bot-card,
.e6-contact-card {
    position: relative;
    transition: transform 350ms cubic-bezier(0.2, 0.8, 0.3, 1),
                border-color 250ms ease,
                box-shadow 350ms ease;
}

.e6-product-card::before,
.e6-bot-archive-grid .e6-bot-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(163, 174, 208, 0) 0%, rgba(163, 174, 208, 0.4) 50%, rgba(163, 174, 208, 0) 100%);
    opacity: 0;
    z-index: -1;
    transition: opacity 350ms ease;
    pointer-events: none;
}

.e6-product-card:hover::before,
.e6-bot-archive-grid .e6-bot-card:hover::before {
    opacity: 1;
}

.e6-product-card:hover,
.e6-bot-archive-grid .e6-bot-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 12px 32px rgba(11, 13, 15, 0.5),
        0 0 30px rgba(163, 174, 208, 0.2);
}

/* ==========================================================================
   PHASE 6: PRODUCT INFO COLUMN AS GLASS CARD (rebalance fix)
   ========================================================================== */

.e6-product-info-col.e6-glass {
    padding: var(--e6-space-6) var(--e6-space-6);
    border-radius: var(--e6-radius-md);
    position: relative;
    overflow: hidden;
}

/* Subtle gradient accent on top edge */
.e6-product-info-col.e6-glass::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(163, 174, 208, 0.6), transparent);
    z-index: 1;
}

/* Match gallery height visual weight */
.e6-product-detail-grid {
    align-items: stretch;
}

@media (min-width: 901px) {
    .e6-product-gallery-col {
        display: flex;
        flex-direction: column;
    }
    /* min-height removed: the rail is now width-capped so the image stays
       square. See "PRODUCT DETAIL: STICKY BUY RAIL" at the end of this file. */
}

/* ==========================================================================
   PHASE 6: PRODUCT DETAIL — purchase block as electric glass
   ========================================================================== */

.e6-product-purchase {
    position: relative;
    background:
        radial-gradient(ellipse at top, rgba(163, 174, 208, 0.10) 0%, transparent 60%),
        rgba(30, 32, 34, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(163, 174, 208, 0.25);
    box-shadow:
        0 8px 24px rgba(11, 13, 15, 0.3),
        inset 0 1px 0 rgba(163, 174, 208, 0.1);
}

/* ==========================================================================
   PHASE 6: BOT HERO PRICE BLOCK — glass treatment
   ========================================================================== */

.e6-bot-hero-price-block.e6-glass {
    background: rgba(163, 174, 208, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: rgba(163, 174, 208, 0.35);
}

/* ==========================================================================
   PHASE 6: BOT FEATURES — glass cards
   ========================================================================== */

.e6-bot-feature-item {
    padding: var(--e6-space-3) var(--e6-space-4);
    border-radius: var(--e6-radius-sm);
    transition: all 250ms ease;
}

.e6-bot-feature-item:hover {
    background: rgba(163, 174, 208, 0.06);
    border-color: rgba(163, 174, 208, 0.25);
    transform: translateX(4px);
}

/* ==========================================================================
   PHASE 6: CTA BAND glass enhancement
   ========================================================================== */

.e6-bot-cta-band.e6-glass {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(30, 32, 34, 0.5) 0%, rgba(20, 35, 70, 0.5) 100%);
}

.e6-bot-cta-band.e6-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(163, 174, 208, 0.12) 0%, transparent 60%);
    pointer-events: none;
}

.e6-bot-cta-band.e6-glass > * {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   PHASE 6: FORM FIELD FOCUS GLOW
   ========================================================================== */

.e6-contact-form.e6-glass {
    padding: var(--e6-space-6) var(--e6-space-6);
    border-radius: var(--e6-radius-md);
}

.e6-contact-field input,
.e6-contact-field textarea {
    transition: all 250ms ease;
    background: rgba(11, 13, 15, 0.7);
}

.e6-contact-field input:focus,
.e6-contact-field textarea:focus {
    background: rgba(30, 32, 34, 0.7);
    border-color: var(--e6-signal);
    box-shadow:
        0 0 0 3px rgba(163, 174, 208, 0.15),
        0 0 20px rgba(163, 174, 208, 0.15),
        inset 0 0 8px rgba(163, 174, 208, 0.05);
}

/* ==========================================================================
   PHASE 6: CONTACT CARDS — glass with hover lift
   ========================================================================== */

.e6-contact-card.e6-glass {
    transition: all 350ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

.e6-contact-card.e6-glass:hover {
    transform: translateY(-3px);
    border-color: rgba(163, 174, 208, 0.4);
    box-shadow:
        0 12px 32px rgba(11, 13, 15, 0.5),
        0 0 24px rgba(163, 174, 208, 0.12);
}

.e6-contact-card.e6-glass:hover .e6-contact-card-icon {
    background: rgba(163, 174, 208, 0.18);
    border-color: rgba(163, 174, 208, 0.5);
    transform: scale(1.05);
}

.e6-contact-card-icon {
    transition: all 250ms ease;
}

/* ==========================================================================
   PHASE 6: FAQ CATEGORY NAV — glass + glow on hover
   ========================================================================== */

.e6-faq-category-nav.e6-glass {
    border-color: rgba(244, 244, 246, 0.08);
}

.e6-faq-cat-pill {
    transition: all 250ms ease;
}

.e6-faq-cat-pill:hover {
    box-shadow: 0 0 16px rgba(163, 174, 208, 0.3);
    transform: translateY(-1px);
}

/* ==========================================================================
   PHASE 6: FAQ ITEMS — refined glass
   ========================================================================== */

.e6-faq-item {
    background: rgba(30, 32, 34, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(244, 244, 246, 0.06);
    transition: all 300ms ease;
}

.e6-faq-item:hover {
    border-color: rgba(163, 174, 208, 0.3);
    background: rgba(30, 32, 34, 0.5);
}

.e6-faq-item[open] {
    border-color: rgba(163, 174, 208, 0.45);
    background: rgba(30, 32, 34, 0.55);
    box-shadow: 0 0 24px rgba(163, 174, 208, 0.1);
}

/* ==========================================================================
   PHASE 6: SL GROUP JOIN BUTTON
   ========================================================================== */

.e6-sl-group-button {
    display: inline-flex;
    align-items: center;
    gap: var(--e6-space-3);
    padding: 12px 20px;
    margin: var(--e6-space-3) 0;
    background: rgba(163, 174, 208, 0.10);
    border: 1px solid rgba(163, 174, 208, 0.4);
    border-radius: 999px;
    color: var(--e6-signal-bright);
    font-family: var(--e6-font-mono);
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: all 250ms ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.e6-sl-group-button:hover {
    background: rgba(163, 174, 208, 0.18);
    border-color: var(--e6-signal);
    color: var(--e6-white);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(163, 174, 208, 0.25), 0 0 20px rgba(163, 174, 208, 0.15);
}

.e6-sl-group-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.e6-sl-group-icon svg {
    width: 18px;
    height: 18px;
}

.e6-sl-group-arrow {
    color: var(--e6-signal);
    transition: transform 250ms ease;
}

.e6-sl-group-button:hover .e6-sl-group-arrow {
    transform: translateX(3px);
}

/* ==========================================================================
   PHASE 6: ABOUT PAGE — content as glass
   ========================================================================== */

.e6-page-content-about {
    position: relative;
}

.e6-page-content-inner.e6-glass-soft {
    padding: var(--e6-space-8);
    border-radius: var(--e6-radius-md);
    max-width: 820px;
}

.e6-page-about .e6-bot-cta-band {
    max-width: 1080px;
    margin: var(--e6-space-10) auto var(--e6-space-12);
}

/* ==========================================================================
   PHASE 6: BUTTON HOVER POLISH (glow)
   ========================================================================== */

.e6-btn-primary {
    position: relative;
    overflow: hidden;
}

.e6-btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 600ms ease;
    pointer-events: none;
}

.e6-btn-primary:hover::before {
    left: 100%;
}

.e6-btn-primary:hover {
    box-shadow: 0 6px 24px rgba(163, 174, 208, 0.4), 0 0 24px rgba(163, 174, 208, 0.2);
}

.e6-btn-secondary:hover {
    background: rgba(163, 174, 208, 0.08);
    box-shadow: 0 0 16px rgba(163, 174, 208, 0.15);
}

/* ==========================================================================
   PHASE 6: BOT ARCHIVE PLACEHOLDER MARK — animated glow
   ========================================================================== */

.e6-bot-archive-grid .e6-bot-card-placeholder {
    position: relative;
}

.e6-bot-archive-grid .e6-bot-card-placeholder::before {
    content: '';
    position: absolute;
    inset: 25%;
    background: radial-gradient(circle, rgba(163, 174, 208, 0.4) 0%, transparent 70%);
    filter: blur(20px);
    z-index: 0;
    animation: e6-mark-pulse 4s ease-in-out infinite;
    pointer-events: none;
}

.e6-bot-archive-grid .e6-bot-card-placeholder svg {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   PHASE 6: GRADIENT TEXT for more headings
   ========================================================================== */

.e6-section-title,
.e6-bot-section-title,
.e6-faq-section-title,
.e6-contact-section-title {
    background: linear-gradient(180deg, var(--e6-white) 0%, var(--e6-silver) 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ==========================================================================
   PHASE 6: SEARCH BAR FIX
   ========================================================================== */
/* Ensure the search bar slideout has correct stacking and positioning */
.e6-search-bar {
    z-index: 200 !important;
}

.e6-search-toggle {
    position: relative;
    z-index: 110;
}

/* Make sure the search bar fully covers when open and is readable */
.e6-search-bar.is-open {
    background: rgba(11, 13, 15, 0.98);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
}

.e6-search-bar-inner {
    padding: var(--e6-space-5) var(--e6-space-6) !important;
}

/* ==========================================================================
   PALETTE, TITLES AND BANDING
   ========================================================================== */

/* ---------- Smooth scrolling ---------- */
html {
    scroll-behavior: smooth;
}

/* ---------- Branded scrollbar ---------- */
html {
    scrollbar-color: var(--e6-bezel) var(--e6-charcoal);
    scrollbar-width: thin;
}
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track {
    background: var(--e6-charcoal);
    border-left: 1px solid var(--e6-border);
}
::-webkit-scrollbar-thumb {
    background: var(--e6-bezel);
    border: 2px solid var(--e6-charcoal);
    border-radius: 8px;
    transition: background 250ms ease;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--e6-silver);
}
::-webkit-scrollbar-corner { background: var(--e6-charcoal); }

/* ---------- Body baseline ---------- */
body {
    background: var(--e6-charcoal);
}

/* ==========================================================================
   PHASE 7: WORDMARK D — Chrome braces, periwinkle plus
   ========================================================================== */

.e6-brand-name {
    display: inline-flex;
    align-items: center;
}

.e6-brand-word {
    background: linear-gradient(180deg, #ffffff 0%, #A3AED0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 600;
}

.e6-brand-mark-symbol {
    display: inline-flex;
    align-items: center;
    margin: 0 0.04em;
    position: relative;
}

.e6-brace {
    background: linear-gradient(180deg, #ffffff 0%, #b8c4dc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 600;
    line-height: 1;
}

.e6-plus {
    color: var(--e6-signal);
    font-weight: 600;
    text-shadow: 0 0 8px rgba(163, 174, 208, 0.55);
    margin: 0 0.02em;
    line-height: 1;
}

/* ==========================================================================
   PHASE 7: VERTICAL GRADIENT SECTION BANDING
   ========================================================================== */

.e6-section-light {
    background: linear-gradient(180deg, var(--e6-charcoal) 0%, var(--e6-charcoal-band) 100%);
    position: relative;
}

.e6-section-dark {
    background: linear-gradient(180deg, var(--e6-screen) 0%, #08101e 100%);
    position: relative;
}

/* ==========================================================================
   PHASE 7: POLISHED CHROME TITLE TREATMENT (Option 7 from mockups)
   ========================================================================== */

.e6-title-chrome,
.e6-page-title,
.e6-section-title,
.e6-archive-title,
.e6-hero-headline,
.e6-bot-hero-title,
.e6-product-title,
.e6-bot-section-title,
.e6-faq-section-title,
.e6-contact-section-title {
    /* Was white -> signal orange. That is decorative orange on a heading, which
       breaks the one brand rule: orange is for prices, buttons, active states
       and links. The gradient was periwinkle under the old brand and my colour
       sweep turned it orange, which made it worse rather than fixing it. It is
       now the polished metal it was always meant to be. */
    background: linear-gradient(180deg,
        #ffffff 0%,
        var(--e6-white) 30%,
        var(--e6-silver) 72%,
        var(--e6-bezel) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter:
        drop-shadow(0 1px 0 rgba(244, 244, 246, 0.3))
        drop-shadow(0 4px 8px rgba(163, 174, 208, 0.4))
        drop-shadow(0 8px 24px rgba(0, 0, 0, 0.5));
    position: relative;
    display: inline-block;
}

/* Subtle smaller treatment for less-dramatic headings */
.e6-title-chrome-soft {
    background: linear-gradient(180deg,
        var(--e6-white) 0%,
        var(--e6-silver) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 4px rgba(163, 174, 208, 0.25));
}


/* ==========================================================================
   PHASE 7: SCROLL-TO-TOP BUTTON
   ========================================================================== */

.e6-scroll-top {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--e6-signal-deep) 0%, var(--e6-signal) 100%);
    border: 1px solid rgba(163, 174, 208, 0.6);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 350ms cubic-bezier(0.2, 0.8, 0.3, 1);
    box-shadow: 0 8px 24px rgba(163, 174, 208, 0.45), 0 0 0 1px rgba(163, 174, 208, 0.15) inset;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.e6-scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.e6-scroll-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(163, 174, 208, 0.6), 0 0 24px rgba(163, 174, 208, 0.4);
}

.e6-scroll-top:active { transform: translateY(0); }

.e6-scroll-top svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 640px) {
    .e6-scroll-top {
        bottom: 20px;
        right: 20px;
        width: 44px;
        height: 44px;
    }
}

/* ==========================================================================
   PHASE 7: SPACING / BALANCE OVERHAUL
   ========================================================================== */

/* Bigger section padding everywhere */
.e6-section,
.e6-page-content,
.e6-bot-section,
.e6-faq-section,
.e6-contact-grid-wrap,
.e6-archive-inner,
.e6-bot-detail-inner,
.e6-product-detail-inner {
    padding-top: clamp(80px, 10vw, 140px);
    padding-bottom: clamp(80px, 10vw, 140px);
}

/* Page hero gets MORE breathing room */
.e6-page-hero {
    padding-top: clamp(100px, 12vw, 180px);
    padding-bottom: clamp(80px, 10vw, 140px);
    min-height: clamp(380px, 45vh, 520px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.e6-page-hero-inner {
    max-width: 800px;
    text-align: center;
    padding: 0 var(--e6-space-6);
}

/* Eyebrow with more breathing room */
.e6-page-eyebrow,
.e6-archive-eyebrow,
.e6-section-eyebrow {
    font-family: var(--e6-font-mono);
    font-size: 12px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--e6-signal);
    margin-bottom: var(--e6-space-4);
    display: block;   /* keep the eyebrow on its own line, above the title */
}

/* Page title with more weight and space */
.e6-page-title,
.e6-archive-title {
    font-size: clamp(48px, 7vw, 96px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: var(--e6-space-6);
}

/* Subtitle generous spacing */
.e6-page-subtitle,
.e6-archive-subtitle {
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.65;
    color: var(--e6-text-muted);
    max-width: 620px;
    margin: 0 auto;
}

/* Section title spacing */
.e6-section-title,
.e6-bot-section-title,
.e6-faq-section-title,
.e6-contact-section-title {
    font-size: clamp(32px, 4.5vw, 56px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.015em;
    margin-bottom: var(--e6-space-6);
}

/* Tighter content max-widths for readability */
.e6-page-content-inner,
.e6-bot-content {
    max-width: 760px;
    margin: 0 auto;
    line-height: 1.75;
    font-size: 16px;
}

.e6-page-content-about .e6-page-content-inner,
.e6-page-content .e6-page-content-inner {
    padding: var(--e6-space-8) var(--e6-space-7);
}

/* ==========================================================================
   PHASE 7: FAQ REBUILD (wider single column, plus icon, better spacing)
   ========================================================================== */

.e6-faq-layout {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 var(--e6-space-6);
}

.e6-faq-category-nav.e6-glass {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: var(--e6-space-3) var(--e6-space-5);
    margin-bottom: var(--e6-space-10);
    border-radius: 999px;
    background: rgba(30, 32, 34, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(163, 174, 208, 0.12);
}

.e6-faq-cat-pill {
    padding: 10px 20px;
    border-radius: 999px;
    font-family: var(--e6-font-mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--e6-text-muted);
    text-decoration: none;
    transition: all 250ms ease;
    border: 1px solid transparent;
}

.e6-faq-cat-pill:hover {
    color: var(--e6-white);
    background: rgba(163, 174, 208, 0.1);
    border-color: rgba(163, 174, 208, 0.3);
    box-shadow: 0 0 16px rgba(163, 174, 208, 0.2);
}

.e6-faq-section {
    margin-bottom: var(--e6-space-10);
}

.e6-faq-section-header {
    margin-bottom: var(--e6-space-6);
    text-align: center;
}

.e6-faq-section-title {
    font-size: clamp(28px, 3.5vw, 44px);
    margin-bottom: var(--e6-space-3);
}

.e6-faq-section-description {
    font-size: 15px;
    color: var(--e6-text-muted);
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto;
}

.e6-faq-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.e6-faq-item {
    background: rgba(30, 32, 34, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(163, 174, 208, 0.1);
    border-radius: 14px;
    overflow: hidden;
    transition: all 300ms ease;
}

.e6-faq-item:hover {
    border-color: rgba(163, 174, 208, 0.3);
    background: rgba(30, 32, 34, 0.6);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(11, 13, 15, 0.4);
}

.e6-faq-item[open] {
    border-color: rgba(163, 174, 208, 0.45);
    background: rgba(30, 32, 34, 0.7);
    box-shadow: 0 8px 24px rgba(11, 13, 15, 0.5), 0 0 24px rgba(163, 174, 208, 0.1);
}

.e6-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e6-space-4);
    padding: 24px 28px;
    cursor: pointer;
    list-style: none;
    font-family: var(--e6-font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--e6-white);
    line-height: 1.3;
    transition: color 200ms ease;
}

.e6-faq-question::-webkit-details-marker { display: none; }

.e6-faq-q-text {
    flex: 1;
}

.e6-faq-q-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(163, 174, 208, 0.1);
    border: 1px solid rgba(163, 174, 208, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--e6-signal);
    transition: all 300ms cubic-bezier(0.2, 0.8, 0.3, 1);
    position: relative;
}

/* Plus icon (NOT chevron) using pseudo-elements */
.e6-faq-q-icon::before,
.e6-faq-q-icon::after {
    content: '';
    position: absolute;
    background: currentColor;
    border-radius: 1px;
    transition: transform 300ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
.e6-faq-q-icon::before {
    width: 12px;
    height: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.e6-faq-q-icon::after {
    width: 2px;
    height: 12px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Hide the chevron SVG on existing markup */
.e6-faq-q-icon svg { display: none; }

.e6-faq-item[open] .e6-faq-q-icon {
    background: rgba(163, 174, 208, 0.2);
    border-color: rgba(163, 174, 208, 0.5);
    transform: rotate(45deg);
}

.e6-faq-item:hover .e6-faq-q-icon {
    background: rgba(163, 174, 208, 0.18);
    border-color: rgba(163, 174, 208, 0.45);
}

.e6-faq-answer {
    padding: 0 28px 28px;
    color: var(--e6-text-muted);
    font-size: 15px;
    line-height: 1.75;
}

.e6-faq-answer p { margin: 0 0 14px; }
.e6-faq-answer p:last-child { margin-bottom: 0; }

/* ==========================================================================
   PHASE 7: CONTACT REBUILD with What to Expect card
   ========================================================================== */

.e6-contact-grid-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: var(--e6-space-6);
    padding-right: var(--e6-space-6);
}

.e6-contact-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--e6-space-8);
    align-items: start;
}

@media (max-width: 900px) {
    .e6-contact-grid {
        grid-template-columns: 1fr;
        gap: var(--e6-space-6);
    }
}

.e6-contact-section-title {
    font-size: clamp(24px, 3vw, 32px);
    margin-bottom: var(--e6-space-5);
}

.e6-contact-form.e6-glass {
    padding: var(--e6-space-7) var(--e6-space-7);
    border-radius: 16px;
}

.e6-contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e6-space-4);
}

@media (max-width: 600px) {
    .e6-contact-form-row { grid-template-columns: 1fr; }
}

.e6-contact-field {
    margin-bottom: var(--e6-space-5);
}

.e6-contact-field label {
    display: block;
    font-family: var(--e6-font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--e6-signal);
    margin-bottom: 8px;
}

.e6-contact-required { color: var(--e6-signal-deep); margin-left: 2px; }

.e6-contact-field input,
.e6-contact-field textarea {
    width: 100%;
    padding: 14px 16px;
    background: rgba(11, 13, 15, 0.7);
    border: 1px solid rgba(163, 174, 208, 0.2);
    border-radius: 8px;
    color: var(--e6-white);
    font-family: var(--e6-font-body);
    font-size: 15px;
    transition: all 250ms ease;
}

.e6-contact-field input:focus,
.e6-contact-field textarea:focus {
    outline: none;
    background: rgba(30, 32, 34, 0.7);
    border-color: var(--e6-signal);
    box-shadow:
        0 0 0 3px rgba(163, 174, 208, 0.15),
        0 0 20px rgba(163, 174, 208, 0.15);
}

.e6-contact-field textarea {
    resize: vertical;
    min-height: 140px;
    font-family: var(--e6-font-body);
}

.e6-contact-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.e6-contact-actions {
    display: flex;
    align-items: center;
    gap: var(--e6-space-4);
    margin-top: var(--e6-space-6);
    flex-wrap: wrap;
}

.e6-contact-fallback {
    color: var(--e6-text-muted);
    font-size: 13px;
}
.e6-contact-fallback a {
    color: var(--e6-signal);
    text-decoration: none;
}
.e6-contact-fallback a:hover { color: var(--e6-signal-soft); }

.e6-contact-info-col {
    display: flex;
    flex-direction: column;
    gap: var(--e6-space-4);
}

.e6-contact-card.e6-glass {
    display: flex;
    align-items: flex-start;
    gap: var(--e6-space-4);
    padding: var(--e6-space-5);
    border-radius: 14px;
    transition: all 300ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

.e6-contact-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(163, 174, 208, 0.1);
    border: 1px solid rgba(163, 174, 208, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--e6-signal);
    transition: all 300ms ease;
}

.e6-contact-card-icon svg {
    width: 20px;
    height: 20px;
}

.e6-contact-card-body { flex: 1; min-width: 0; }

.e6-contact-card-title {
    font-family: var(--e6-font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--e6-white);
    margin: 0 0 6px;
    letter-spacing: 0.04em;
}

.e6-contact-card-body p { margin: 0 0 4px; font-size: 14px; }

.e6-contact-card-body a {
    color: var(--e6-signal);
    text-decoration: none;
    font-weight: 500;
    transition: color 200ms ease;
    word-break: break-word;
}

.e6-contact-card-body a:hover {
    color: var(--e6-signal-soft);
}

.e6-contact-card-note {
    font-size: 12px !important;
    color: var(--e6-text-dim);
    margin-top: 4px !important;
}

/* What to Expect card — numbered steps */
.e6-contact-expect-card {
    margin-top: var(--e6-space-2);
    padding: var(--e6-space-5);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(163, 174, 208, 0.08), rgba(30, 32, 34, 0.5));
    border: 1px solid rgba(163, 174, 208, 0.2);
}

.e6-contact-expect-title {
    font-family: var(--e6-font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--e6-white);
    margin: 0 0 var(--e6-space-4);
    letter-spacing: 0.04em;
}

.e6-contact-expect-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--e6-space-4);
}

.e6-contact-expect-step {
    display: flex;
    gap: var(--e6-space-3);
    align-items: flex-start;
}

.e6-contact-expect-num {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--e6-signal-deep), var(--e6-signal));
    color: #ffffff;
    font-family: var(--e6-font-mono);
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(163, 174, 208, 0.4);
}

.e6-contact-expect-step-body { flex: 1; }

.e6-contact-expect-step strong {
    display: block;
    color: var(--e6-white);
    font-size: 13px;
    margin-bottom: 2px;
    font-family: var(--e6-font-display);
    letter-spacing: 0.03em;
}

.e6-contact-expect-step span {
    color: var(--e6-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

/* Notice banner styling */
.e6-contact-notice {
    padding: var(--e6-space-4) var(--e6-space-5);
    border-radius: 10px;
    margin-bottom: var(--e6-space-4);
}
.e6-contact-notice-success {
    background: rgba(242, 100, 25, 0.1);
    border: 1px solid rgba(242, 100, 25, 0.4);
    color: #a7f3d0;
}
.e6-contact-notice-error {
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.4);
    color: #fecaca;
}
.e6-contact-notice strong { display: block; margin-bottom: 4px; }
.e6-contact-notice p { margin: 0; font-size: 14px; }

/* ==========================================================================
   PHASE 7: BUTTON GRADIENT REFRESH (real palette)
   ========================================================================== */

.e6-btn-primary {
    background: linear-gradient(135deg, var(--e6-signal-deep) 0%, var(--e6-signal) 100%);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 14px rgba(163, 174, 208, 0.35);
}

.e6-btn-primary:hover {
    background: linear-gradient(135deg, var(--e6-signal) 0%, var(--e6-signal-deep) 100%);
    box-shadow: 0 6px 24px rgba(163, 174, 208, 0.5), 0 0 24px rgba(163, 174, 208, 0.3);
    transform: translateY(-1px);
}

.e6-btn-secondary {
    border-color: rgba(163, 174, 208, 0.35);
}
.e6-btn-secondary:hover {
    border-color: var(--e6-signal);
    background: rgba(163, 174, 208, 0.08);
    box-shadow: 0 0 16px rgba(163, 174, 208, 0.18);
}

/* ==========================================================================
   PHASE 7: ACCENT PILL / EYEBROW polish
   ========================================================================== */

.e6-archive-eyebrow,
.e6-page-eyebrow {
    color: var(--e6-signal);
}


/* ==========================================================================
   TITLES — a lit rule, not a gradient
   A gradient-filled heading spends the accent on decoration. Element 6 keeps
   headings stark white and marks them with a short cell beneath, which is the
   same object as the scroll bar and the lid bar.
   ========================================================================== */

.e6-title {
    color: var(--e6-white);
}

.e6-title .e6-title-text {
    display: inline-block;
}

.e6-title--ruled {
    position: relative;
    padding-bottom: var(--e6-space-4);
}

.e6-title--ruled::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 2px;
    border-radius: 1px;
    background: var(--e6-signal);
    box-shadow: 0 0 12px var(--e6-signal-glow);
}

.e6-title--ruled.e6-text-center::after,
.e6-section-title.e6-title--ruled::after {
    left: 50%;
    transform: translateX(-50%);
}


/* ==========================================================================
   PHASE 7: ALTERNATING SECTION BACKGROUNDS (vertical gradient banding)
   ========================================================================== */

/* Each home section gets banding based on position */
.e6-section-bots {
    background: linear-gradient(180deg, var(--e6-charcoal) 0%, var(--e6-charcoal-band) 100%);
}

.e6-section-spotlight {
    background: linear-gradient(180deg, var(--e6-screen) 0%, #08101e 100%);
}

.e6-section-why {
    background: linear-gradient(180deg, var(--e6-charcoal) 0%, var(--e6-charcoal-band) 100%);
}

.e6-section-faq {
    background: linear-gradient(180deg, var(--e6-screen) 0%, #08101e 100%);
}

.e6-section-newsletter {
    background: linear-gradient(180deg, var(--e6-charcoal) 0%, var(--e6-charcoal-band) 100%);
}

.e6-section-cta-band {
    background: linear-gradient(180deg, var(--e6-screen) 0%, #08101e 100%);
}

/* Smooth transitions between sections */
.e6-section {
    position: relative;
}

/* Subtle dividing line between home page sections only — for visual rhythm */
.e6-home-page .e6-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    max-width: 800px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(163, 174, 208, 0.18) 50%,
        transparent 100%);
}

/* Skip the divider on the very first home section after hero */
.e6-home-page .e6-hero-slider + .e6-section::before { display: none; }


/* ==========================================================================
   PHASE 7: FAQ SECTION HEADER OVERRIDES (kill old border, center align)
   ========================================================================== */

.e6-faq-section-header {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    text-align: center;
}



/* ==========================================================================
   ELEMENT 6 — MOTION
   One clock for the whole brand. The breath below is lifted from
   [E6] Package.lsl, which drives the lit bar on the package lid:

       g = GLOW_MIN + (GLOW_MAX - GLOW_MIN) * 0.5 * (1 + sin(phase * 2PI / GLOW_PERIOD))
       GLOW_MIN 0.20 · GLOW_MAX 0.75 · GLOW_PERIOD 4.0s

   Sampled at eighths and run linear, so the curve is the sine rather than an
   ease that merely resembles one.

   THE RULE: motion must encode something — progress, charge, live state,
   hover, focus. And never animate a value: a quota bar whose width drifts is
   misreporting the quota. Width is the reading; the glow is the pulse.
   ========================================================================== */

@property --e6-g {
    syntax: '<number>';
    inherits: false;
    initial-value: 0.475;
}

@keyframes e6-breath {
    0%    { --e6-g: 0.475; }
    12.5% { --e6-g: 0.670; }
    25%   { --e6-g: 0.750; }
    37.5% { --e6-g: 0.670; }
    50%   { --e6-g: 0.475; }
    62.5% { --e6-g: 0.281; }
    75%   { --e6-g: 0.200; }
    87.5% { --e6-g: 0.281; }
    100%  { --e6-g: 0.475; }
}

.e6-breathes {
    animation: e6-breath var(--e6-breath-period) linear infinite;
    box-shadow: 0 0 calc(6px + 24px * var(--e6-g)) rgba(242, 100, 25, var(--e6-g));
}

/* ---------- The cell: a real reading, with a live glow ---------- */

.e6-cell {
    height: 6px;
    border-radius: 3px;
    background: rgba(163, 174, 208, 0.14);
    overflow: hidden;
}

.e6-cell > i {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--e6-signal);
    animation: e6-breath var(--e6-breath-period) linear infinite;
    box-shadow: 0 0 calc(4px + 18px * var(--e6-g)) rgba(242, 100, 25, var(--e6-g));
}

/* Scroll charge along the top of the page. Width is set from JS. */
.e6-charge-rail {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(163, 174, 208, 0.10);
    z-index: var(--e6-z-nav);
}

.e6-charge-fill {
    height: 100%;
    width: 0;
    background: var(--e6-signal);
    box-shadow: 0 0 12px rgba(242, 100, 25, 0.9);
}

/* ---------- Live status: the pill breathes on the same clock ---------- */

.e6-bot-status.is-online .e6-bot-status-dot {
    background: var(--e6-online);
    animation: e6-breath var(--e6-breath-period) linear infinite;
    box-shadow: 0 0 calc(3px + 12px * var(--e6-g)) rgba(242, 100, 25, var(--e6-g));
}

/* ---------- Charge-in: the reveal ----------
   Replaces fadeUp / fadeLeft / fadeRight. The block rises a little while its
   left edge lights and settles — one branded motion instead of four directions
   of fade. Elements are VISIBLE at rest; the class only animates them, so the
   page reads correctly with JS off or before the observer fires. */

.e6-charge-in {
    position: relative;
}

.e6-charge-in::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--e6-signal);
    box-shadow: 0 0 10px var(--e6-signal-glow);
    opacity: 0;
}

.e6-charge-in.is-visible {
    animation: e6-rise 0.62s cubic-bezier(0.22, 0.7, 0.3, 1) both;
}

.e6-charge-in.is-visible::before {
    animation: e6-edge 0.62s ease-out both;
}

@keyframes e6-rise {
    from { transform: translateY(10px); opacity: 0.55; }
    to   { transform: none; opacity: 1; }
}

@keyframes e6-edge {
    0%   { opacity: 1; transform: scaleY(0.2); }
    70%  { opacity: 1; transform: scaleY(1); }
    100% { opacity: 0; transform: scaleY(1); }
}

/* ---------- Panels built like the display boards ----------
   Charcoal body, one-pixel anodized-silver bezel, near-black screen face. */

.e6-board {
    background: var(--e6-panel);
    border: 1px solid var(--e6-border);
    border-radius: var(--e6-radius-lg);
    padding: 10px;
}

.e6-board > .e6-screen {
    background: var(--e6-screen);
    border: 1px solid var(--e6-bezel);
    border-radius: calc(var(--e6-radius-lg) - 3px);
    padding: var(--e6-space-6);
}

@media (prefers-reduced-motion: reduce) {
    .e6-breathes,
    .e6-cell > i,
    .e6-bot-status.is-online .e6-bot-status-dot,
    .e6-charge-in.is-visible,
    .e6-charge-in.is-visible::before {
        animation: none;
    }
    .e6-charge-in::before { opacity: 0; }
}


/* ==========================================================================
   THE TILE
   Drawn by element6_render_tile(). Radius and colours live in the SVG so the
   mark is correct even where CSS does not load.
   ========================================================================== */

.e6-tile {
    display: block;
    flex: none;
    border-radius: 13.5%;
}

.e6-brand-mark {
    margin-right: var(--e6-space-3);
}

/* The hero tile breathes on the packaging clock. */
.e6-hero-mark .e6-tile {
    margin: 0 auto;
}

/* Contact: "what to expect" is a single reassurance now, not a three-step list */
.e6-contact-expect-line {
    margin: 0;
    color: var(--e6-text-soft);
    font-size: 0.95rem;
    line-height: 1.65;
}


/* ==========================================================================
   PRODUCT DETAIL: STICKY BUY RAIL  (2.9.3)

   Long ad copy left the image stranded at the top with ~1400px of empty
   column beside it. The gallery already carried position:sticky; an
   overflow:hidden on .e6-product-single was silently disabling it. That is
   gone (see the note at .e6-product-single above), so the image now travels
   with the reader — and the price and buy button travel with it, instead of
   sitting 1900px down past the whole description.

   The same buy block is printed twice by element6_render_product_buybox():
   'rail' in the left column, 'flow' at the end of the copy column. Exactly
   one is visible at any width.
   ========================================================================== */

.e6-product-buybox-flow { display: none; }

@media (max-width: 900px) {
    .e6-product-buybox-rail { display: none; }
    .e6-product-buybox-flow { display: block; margin-top: var(--e6-space-8); }
}

@media (min-width: 901px) {

    /* Cap the rail so image + price + button clear the viewport together.
       Uncapped, a 556px square plus the buy block runs taller than a laptop
       window, and a sticky element taller than the viewport pins its top and
       never reveals its bottom — the button would be permanently off-screen.
       The floor keeps it from shrinking to nothing on very short windows. */
    .e6-product-gallery {
        /* width:100% is load-bearing. The parent is a column flex container, and
           auto margins on the cross axis cancel align-self:stretch — without an
           explicit width the rail falls back to fit-content and collapses to
           whatever the buy button happens to measure. */
        width: 100%;
        max-width: min(100%, max(380px, calc(100vh - 300px)));
        margin-left: auto;
        margin-right: auto;
    }

    .e6-product-buybox-rail {
        margin-top: var(--e6-space-5);
    }

    /* Tighter than the full-width version: this is a rail, not a section. */
    .e6-product-buybox-rail .e6-product-price-block {
        margin-bottom: var(--e6-space-3);
        padding: var(--e6-space-3) var(--e6-space-4);
    }

    .e6-product-buybox-rail .e6-product-price {
        font-size: 1.45rem;
    }

    .e6-product-buybox-rail .e6-product-purchase {
        padding: var(--e6-space-4) var(--e6-space-4);
    }

    .e6-product-buybox-rail .e6-product-purchase-heading {
        font-size: 0.78rem;
        font-family: var(--e6-font-mono);
        font-weight: 500;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--e6-slate);
        margin-bottom: var(--e6-space-3);
    }

    /* Redundant in the rail: the buttons say where they go. */
    .e6-product-buybox-rail .e6-product-purchase-note {
        display: none;
    }
}