/* ==========================================================================
   FHub Elite Design System & Stylesheet
   Architecture: Pure Vanilla CSS — Shadcn Zinc / Linear Craft
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens & CSS Custom Properties
   -------------------------------------------------------------------------- */
:root {
    /* Color Palette — Shadcn Zinc Dark */
    --bg-base: #08080a;
    --bg-elevated: #0d0e12;
    --surface: #121318;
    --surface-hover: #181920;
    --surface-active: #1f202a;
    
    /* Card Glass Surface System (Linear / Vercel Craft) */
    --card-bg: rgba(13, 15, 22, 0.75);
    --card-border: rgba(255, 255, 255, 0.08);
    --card-border-hover: rgba(165, 180, 252, 0.28);
    --card-top-bevel: inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
    --card-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.6), 0 4px 12px -2px rgba(0, 0, 0, 0.3);
    --card-shadow-hover: 0 20px 40px -8px rgba(0, 0, 0, 0.7), 0 0 24px -4px rgba(165, 180, 252, 0.08);

    /* Precision Hairlines & Borders */
    --border-subtle: rgba(255, 255, 255, 0.07);
    --border-medium: rgba(255, 255, 255, 0.12);
    --border-highlight: rgba(255, 255, 255, 0.2);

    /* Unified Signature Accents (Metallic White -> Soft Lavender/Ice Glow) */
    --accent-lavender: #a5b4fc;
    --accent-lavender-light: #c7d2fe;
    --accent-ice: #dbe4ff;
    --accent-glow: rgba(165, 180, 252, 0.14);
    --accent-surface: rgba(165, 180, 252, 0.05);
    --accent-border: rgba(165, 180, 252, 0.2);

    /* Semantic Brand Accents */
    --fcord-primary: #5865F2;
    --fcord-hover: #4752C4;
    --fcord-cyan: #38BDF8;
    --fcord-purple: #8B5CF6;

    --opsec-emerald: #10B981;
    --opsec-emerald-hover: #059669;
    --opsec-amber: #F59E0B;

    /* Syntax Highlighting */
    --syn-kw: #f43f5e;
    --syn-str: #38bdf8;
    --syn-fn: #a78bfa;
    --syn-var: #fbbf24;
    --syn-com: #94a3b8;
    --syn-prop: #34d399;
    --syn-val: #f472b6;

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
    
    /* Text Hierarchy (Enhanced Contrast WCAG AA / AAA Compliant) */
    --text-pure: #ffffff;
    --text-normal: #f4f4f5;
    --text-muted: #cbd5e1;
    --text-dim: #94a3b8;
    --text-subtle: #94a3b8;

    /* Radius System */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 18px;
    --radius-2xl: 24px;
    --radius-pill: 9999px;

    /* Focus Ring */
    --focus-ring: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent-lavender);

    /* Layout */
    --container-max: 1180px;
    --container-narrow: 840px;

    /* Transitions & Easing */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: 0.15s var(--ease-out);
    --transition-base: 0.25s var(--ease-out);
    --transition-slow: 0.5s var(--ease-out);
}

/* --------------------------------------------------------------------------
   2. Reset & Accessibility Standards
   -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

[hidden] {
    display: none !important;
}

html {
    background: var(--bg-base);
    color: var(--text-normal);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    overflow-x: clip;
    max-width: 100vw;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: clip;
    max-width: 100vw;
}

img, svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.link-inline,
.inline-link {
    color: var(--accent-lavender-light);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition-fast);
}
.link-inline:hover,
.inline-link:hover {
    color: #fff;
}

button, input {
    font: inherit;
    border: none;
    background: none;
}

button {
    cursor: pointer;
}

/* Accessible Focus-Visible System (WCAG 2.4.7 Compliant) */
:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
[role="tab"]:focus-visible,
summary:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.plugin-switch input:focus-visible + .switch-slider {
    box-shadow: var(--focus-ring);
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 20px;
    background: var(--fcord-primary);
    color: #fff;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    z-index: 10000;
    font-weight: 600;
    transition: top 0.2s;
}
.skip-link:focus {
    top: 20px;
}

/* Screen-reader only utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* --------------------------------------------------------------------------
   3. Technical Background Grid & Ambient Vignette
   -------------------------------------------------------------------------- */
.bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.bg-grid {
    position: absolute;
    inset: 0;
    background-size: 48px 48px;
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 80%);
}

.bg-vignette {
    position: absolute;
    top: -180px;
    left: 50%;
    transform: translateX(-50%);
    width: min(960px, 100vw);
    height: 440px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(88, 101, 242, 0.1) 0%, rgba(56, 189, 248, 0.03) 50%, transparent 100%);
    opacity: 0.8;
}

/* --------------------------------------------------------------------------
   4. Layout Containers
   -------------------------------------------------------------------------- */
.container {
    width: min(var(--container-max), calc(100% - 48px));
    margin-inline: auto;
    position: relative;
    z-index: 1;
}

.container--narrow {
    width: min(var(--container-narrow), calc(100% - 48px));
}

.section {
    padding-block: 80px;
    position: relative;
    z-index: 1;
    scroll-margin-top: 120px;
}

#plugins,
.plugin-explorer {
    scroll-margin-top: 120px;
}

.section-head {
    margin-bottom: 44px;
}
.text-center {
    text-align: center;
}

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent-lavender);
    background: rgba(165, 180, 252, 0.08);
    border: 1px solid rgba(165, 180, 252, 0.2);
    padding: 4px 14px;
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
    box-shadow: 0 0 16px -4px rgba(165, 180, 252, 0.15);
}

.section-eyebrow--cyan { 
    color: #38bdf8; 
    background: rgba(56, 189, 248, 0.08);
    border-color: rgba(56, 189, 248, 0.22);
    box-shadow: 0 0 16px -4px rgba(56, 189, 248, 0.18);
}
.section-eyebrow--fcord { 
    color: var(--accent-lavender); 
    background: rgba(165, 180, 252, 0.08);
    border-color: rgba(165, 180, 252, 0.22);
    box-shadow: 0 0 16px -4px rgba(165, 180, 252, 0.18);
}
.section-eyebrow--opsec { 
    color: var(--opsec-emerald); 
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.22);
    box-shadow: 0 0 16px -4px rgba(16, 185, 129, 0.18);
}

.section-title {
    font-size: clamp(2rem, 3.8vw, 2.75rem);
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -0.035em;
    color: var(--text-pure);
    margin-bottom: 16px;
    text-wrap: balance;
}

.section-desc {
    font-size: 1.02rem;
    color: #cbd5e1;
    max-width: 680px;
    margin-inline: auto;
    line-height: 1.65;
}

/* Atmospheric Section Meshes */
.ecosystem-section {
    background: radial-gradient(800px 500px at 50% 15%, rgba(88, 101, 242, 0.06) 0%, transparent 70%),
                radial-gradient(600px 400px at 85% 85%, rgba(16, 185, 129, 0.05) 0%, transparent 70%);
}

.architecture-section {
    background: radial-gradient(900px 500px at 50% 20%, rgba(56, 189, 248, 0.06) 0%, transparent 70%);
}

.product-section {
    background: radial-gradient(1000px 600px at 50% 10%, rgba(165, 180, 252, 0.05) 0%, transparent 70%);
}

.compare-section {
    background: radial-gradient(850px 500px at 50% 25%, rgba(56, 189, 248, 0.05) 0%, transparent 70%);
}

.quickstart-section {
    background: radial-gradient(900px 500px at 50% 25%, rgba(139, 92, 246, 0.05) 0%, transparent 70%);
}

.opsec-section {
    background: radial-gradient(950px 600px at 50% 20%, rgba(16, 185, 129, 0.06) 0%, transparent 75%);
}

.security-section {
    background: radial-gradient(800px 500px at 35% 30%, rgba(99, 102, 241, 0.05) 0%, transparent 70%);
}

.creator-section {
    background: radial-gradient(800px 500px at 30% 30%, rgba(165, 180, 252, 0.05) 0%, transparent 70%),
                radial-gradient(600px 400px at 75% 75%, rgba(56, 189, 248, 0.04) 0%, transparent 70%);
}

.community-section {
    background: radial-gradient(850px 500px at 50% 50%, rgba(88, 101, 242, 0.1) 0%, transparent 75%);
}

.max-w-2xl { max-width: 42rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
   5. Equicord-Style Navbar & Dynamic Floating Island on Scroll
   -------------------------------------------------------------------------- */
.header-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    padding: 18px 0;
    pointer-events: none;
    transition: padding 0.35s var(--ease-out);
}

.header-wrapper.is-scrolled {
    padding: 10px 0;
}

.site-header {
    width: min(var(--container-max), calc(100% - 36px));
    margin-inline: auto;
    pointer-events: auto;
    background: rgba(8, 8, 10, 0.82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    padding: 2px 10px;
    transition: all 0.35s var(--ease-out);
}

.header-wrapper.is-scrolled .site-header {
    width: min(1140px, calc(100% - 24px));
    background: rgba(13, 14, 18, 0.94);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-color: var(--border-highlight);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.nav-shell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 52px;
    padding-inline: 8px;
}

/* Brand */
.brand-group {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    color: var(--text-pure);
    font-size: 1.1rem;
    letter-spacing: -0.02em;
    user-select: none;
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}
.brand:hover { transform: scale(1.02); }
.brand:active { transform: scale(0.97); }

.brand-logo-img {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    object-fit: cover;
}

.brand-text {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.brand-submark {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-dim);
}

.nav-vertical-divider {
    width: 1px;
    height: 20px;
    background: var(--border-medium);
}

/* Desktop Navigation */
.site-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}
.nav-dropdown-trigger:hover,
.nav-dropdown.is-open .nav-dropdown-trigger {
    color: var(--text-pure);
    background: rgba(255, 255, 255, 0.05);
}

.nav-chevron {
    transition: transform var(--transition-fast);
}
.nav-dropdown.is-open .nav-chevron {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 290px;
    max-width: 340px;
    background: rgba(14, 16, 23, 0.88);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-lg);
    box-shadow:
        0 24px 56px -8px rgba(0, 0, 0, 0.85),
        0 4px 16px -2px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.12);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), visibility 0.2s;
    z-index: 1100;
    list-style: none;
}

.nav-dropdown.is-open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

@media (hover: hover) and (min-width: 992px) {
    .nav-dropdown:hover .nav-dropdown-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }
    .nav-dropdown:hover .nav-chevron {
        transform: rotate(180deg);
    }
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast);
}
.dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.dropdown-item-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-dim);
    background: transparent;
    border: none;
    transition: color var(--transition-fast), transform var(--transition-fast);
}
.dropdown-item:hover .dropdown-item-icon {
    color: #ffffff;
}
.dropdown-item-icon--logo {
    width: 24px;
    height: 24px;
}
.dropdown-item-icon--blue,
.dropdown-item-icon--purple,
.dropdown-item-icon--cyan,
.dropdown-item-icon--amber,
.dropdown-item-icon--green,
.dropdown-item-icon--dark {
    background: transparent;
    border: none;
}

.dropdown-logo-img {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    object-fit: contain;
}

.dropdown-item-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.dropdown-item-text strong {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-pure);
}
.dropdown-item-text span {
    font-size: 0.78rem;
    color: #94a3b8;
    line-height: 1.4;
}

.nav-direct-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}
.nav-direct-link:hover {
    color: var(--text-pure);
    background: rgba(255, 255, 255, 0.05);
}

/* Quick Search Button in Header */
.nav-search-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.nav-search-trigger:hover {
    border-color: var(--accent-border);
    color: var(--text-pure);
    background: rgba(165, 180, 252, 0.06);
    box-shadow: 0 0 12px -2px var(--accent-glow);
}
.nav-search-trigger:focus-visible {
    outline: 2px solid var(--accent-lavender);
    outline-offset: 2px;
}

.kbd-badge {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border-medium);
    color: var(--accent-lavender-light);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-download-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    background: #ffffff;
    color: #09090b;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    box-shadow: 0 4px 14px rgba(255, 255, 255, 0.12);
    transition: all var(--transition-fast);
    flex-shrink: 0;
}
.nav-download-pill:hover {
    background: #e4e4e7;
    transform: translateY(-1px);
}
.nav-download-pill:active {
    transform: scale(0.96);
}

.menu-toggle {
    display: none;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    color: var(--text-pure);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   6. Mobile Slide-Over Drawer Navigation
   -------------------------------------------------------------------------- */
.mobile-drawer {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: 100vw;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: opacity 0.3s var(--ease-out), visibility 0.3s;
}

.mobile-drawer.is-open {
    transition: opacity 0.3s var(--ease-out), visibility 0s;
    opacity: 1;
    visibility: visible;
}

.mobile-drawer-inner {
    position: absolute;
    top: 0;
    right: 0;
    width: min(340px, 85vw);
    height: 100%;
    background: #0d0e14;
    border-left: 1px solid var(--border-medium);
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transform: translateX(100%);
    transition: transform 0.35s var(--ease-out);
    overflow-y: auto;
}

.mobile-drawer.is-open .mobile-drawer-inner {
    transform: translateX(0);
}

.mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-subtle);
}

.mobile-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    padding: 8px;
    border-radius: var(--radius-md);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast);
}
.mobile-drawer-close:hover {
    color: var(--text-pure);
    background: rgba(255, 255, 255, 0.08);
}

.mobile-drawer-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 24px;
}

.mobile-group-title {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    margin-top: 12px;
    margin-bottom: 4px;
    padding-left: 8px;
}

.mobile-link {
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-normal);
    transition: background-color var(--transition-fast);
}
.mobile-link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-pure);
}

/* --------------------------------------------------------------------------
   7. Buttons & Micro-Interactions
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 600;
    font-size: 0.92rem;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    text-align: left;
    white-space: nowrap;
}
.btn:active { transform: scale(0.97); }

.btn-text-group {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.btn-main-text { font-weight: 700; }
.btn-sub-text {
    font-size: 0.72rem;
    opacity: 0.85;
    font-weight: 400;
    font-family: var(--font-sans);
}

.btn-logo-inline {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.btn--primary {
    background: #ffffff;
    color: #09090b;
    border: 1px solid #ffffff;
    box-shadow: 0 4px 18px rgba(255, 255, 255, 0.12);
}
.btn--primary:hover {
    background: #e4e4e7;
    transform: translateY(-2px);
}

.btn--secondary {
    background: var(--surface);
    color: var(--text-pure);
    border: 1px solid var(--border-medium);
}
.btn--secondary:hover {
    background: var(--surface-hover);
    border-color: var(--border-highlight);
    transform: translateY(-2px);
}

.btn--emerald {
    background: var(--opsec-emerald);
    color: #022c22;
    font-weight: 700;
    border: 1px solid var(--opsec-emerald);
}
.btn--emerald:hover {
    background: #34d399;
    transform: translateY(-2px);
}

.btn--discord {
    background: var(--fcord-primary);
    color: #ffffff;
    border: 1px solid var(--fcord-primary);
}
.btn--discord:hover {
    background: var(--fcord-hover);
    transform: translateY(-2px);
}

.btn--ghost {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
}
.btn--ghost:hover {
    color: var(--text-pure);
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border-medium);
}

.btn--outline {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-pure);
    border: 1px solid var(--border-medium);
}
.btn--outline:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--border-highlight);
}

.btn--sm {
    padding: 6px 14px;
    font-size: 0.8125rem;
    gap: 6px;
    border-radius: var(--radius-sm);
}

.btn--lg {
    padding: 12px 24px;
    font-size: 0.95rem;
    border-radius: var(--radius-lg);
}

.btn--xl {
    padding: 14px 28px;
    font-size: 1.02rem;
    border-radius: var(--radius-lg);
}

.btn--full { width: 100%; }

.btn--glow {
    box-shadow: 0 0 20px -2px rgba(165, 180, 252, 0.4), 0 4px 18px rgba(255, 255, 255, 0.15);
}
.btn--glow:hover {
    box-shadow: 0 0 28px 0 rgba(165, 180, 252, 0.55), 0 6px 22px rgba(255, 255, 255, 0.2);
}

/* Icons */
.icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}
.icon--xxs { width: 12px; height: 12px; }
.icon--xs { width: 14px; height: 14px; }
.icon--sm { width: 18px; height: 18px; }
.icon--lg { width: 28px; height: 28px; }
.icon--windows { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.icon--green { color: var(--opsec-emerald); }
.icon--blue { color: #818cf8; }
.icon--amber { color: var(--opsec-amber); }
.icon--emerald { color: var(--opsec-emerald); }
.icon--cyan,
.text-cyan { color: var(--accent-lavender-light); }

/* --------------------------------------------------------------------------
   8. Hero Section & Dual-Mode Terminal
   -------------------------------------------------------------------------- */
.hero-section {
    padding-top: 88px;
    padding-bottom: 72px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-content {
    width: 100%;
    max-width: 1040px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-capsule {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 0.72rem;
    margin-bottom: 24px;
    max-width: 100%;
    backdrop-filter: blur(8px);
}

.capsule-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.capsule-tag { font-weight: 700; color: var(--text-pure); }
.capsule-sep { color: var(--text-dim); }
.capsule-text { color: var(--text-muted); }

.hero-title {
    font-size: clamp(1.9rem, 5.2vw, 3.8rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.035em;
    color: var(--text-pure);
    margin-bottom: 18px;
    word-break: break-word;
    max-width: 100%;
}

/* Linear-style Metallic Highlight (Replaces rainbow AI gradient) */
.text-highlight {
    background: linear-gradient(180deg, #ffffff 0%, #a5b4fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(165, 180, 252, 0.25);
}

.hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.15rem);
    color: var(--text-muted);
    width: 100%;
    max-width: 740px;
    line-height: 1.65;
    margin-bottom: 32px;
}

.hero-subtitle strong { color: var(--text-pure); font-weight: 600; }

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-bottom: 28px;
    width: 100%;
}

.hero-direct-link {
    margin-top: -16px;
    margin-bottom: 24px;
    font-size: 0.84rem;
    color: var(--text-muted, #94a3b8);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.hero-direct-link .link-inline {
    color: var(--fcord-cyan, #38bdf8);
    text-decoration: underline;
}

/* ==========================================================================
   FCord Multiplatform Download Hub (Equicord UX with FHUB Linear Craft)
   ========================================================================== */
.fcord-download-hub {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fcord-download-hub {
    width: 100%;
    scroll-margin-top: 110px;
}

.fcord-os-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
    margin-bottom: 22px;
}

.os-card {
    background: rgba(13, 15, 22, 0.72);
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-xl, 18px);
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.6), inset 0 1px 0 0 rgba(255, 255, 255, 0.07);
    transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
    text-align: left;
}

.os-card:hover {
    border-color: rgba(165, 180, 252, 0.28);
    transform: translateY(-2px);
    box-shadow: 0 20px 42px -8px rgba(0, 0, 0, 0.7), inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
}

/* Visually highlighted card for detected user OS */
.os-card.is-detected {
    background: radial-gradient(360px 160px at 50% 0%, rgba(99, 102, 241, 0.14) 0%, transparent 100%), rgba(14, 17, 26, 0.94);
    border-color: rgba(165, 180, 252, 0.38);
    box-shadow: 0 22px 50px -10px rgba(0, 0, 0, 0.8), 0 0 36px -4px rgba(139, 92, 246, 0.18), inset 0 1px 0 0 rgba(255, 255, 255, 0.16);
}

.os-card.is-detected::before {
    content: "";
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(165, 180, 252, 0.7), transparent);
    pointer-events: none;
}

.os-card-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.os-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 28px;
    flex-wrap: wrap;
}

.os-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: max-content;
    flex-shrink: 0;
}

.os-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--text-pure, #ffffff);
}

.os-titles {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.os-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-pure, #ffffff);
    letter-spacing: -0.015em;
    line-height: 1.2;
    white-space: nowrap;
}

.os-version-meta {
    font-size: 0.76rem;
    color: var(--text-dim, #94a3b8);
    line-height: 1.3;
}

.os-badge-slot {
    min-height: 24px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
}

.os-device-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2.5px 8px;
    border-radius: var(--radius-pill, 9999px);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    background: rgba(139, 92, 246, 0.16);
    border: 1px solid rgba(165, 180, 252, 0.35);
    color: #e0e7ff;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.2);
    white-space: nowrap;
    animation: osBadgeFadeIn 0.3s ease-out;
}

.os-device-badge[hidden] {
    display: none !important;
}

@keyframes osBadgeFadeIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

.os-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.os-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--radius-md, 10px);
    text-decoration: none;
    font-family: var(--font-sans);
    transition: all var(--transition-fast);
    outline: none;
    box-sizing: border-box;
}

.os-btn:focus-visible {
    box-shadow: var(--focus-ring);
}

.os-btn .icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.os-btn-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    text-align: left;
}

.os-btn-main {
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.25;
}

.os-btn-sub {
    font-size: 0.72rem;
    line-height: 1.35;
    margin-top: 2px;
    white-space: normal;
    word-break: break-word;
}

.os-btn-tag {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    padding: 1px 4px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.15);
}

/* Primary OS Button */
.os-btn--primary {
    background: #ffffff;
    color: #09090b;
    border: 1px solid #ffffff;
    box-shadow: 0 4px 14px rgba(255, 255, 255, 0.12);
}

.os-btn--primary .icon {
    color: #09090b;
}

.os-btn--primary .os-btn-main {
    color: #09090b;
}

.os-btn--primary .os-btn-sub {
    color: #3f3f46;
    font-weight: 500;
}

.os-btn--primary:hover {
    background: #e4e4e7;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2);
}

/* Secondary OS Button */
.os-btn--secondary {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-pure, #ffffff);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.os-btn--secondary .icon {
    color: var(--accent-lavender, #a5b4fc);
}

.os-btn--secondary .os-btn-main {
    color: var(--text-pure, #ffffff);
}

.os-btn--secondary .os-btn-sub {
    color: var(--text-dim, #94a3b8);
}

.os-btn--secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(165, 180, 252, 0.3);
    transform: translateY(-1px);
}

/* Fallback button when build not yet in release */
.os-btn--fallback {
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.14);
    color: var(--text-dim, #94a3b8);
}

.os-btn--fallback .icon {
    color: var(--text-dim, #94a3b8);
}

.os-btn--fallback .os-btn-main {
    color: var(--text-muted, #cbd5e1);
}

.os-btn--fallback .os-btn-sub {
    color: var(--text-dim, #94a3b8);
}

.os-btn--fallback:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(165, 180, 252, 0.28);
    color: var(--text-pure, #ffffff);
}

/* OS Card Footer */
.os-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    min-height: 32px;
}

.os-status-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.73rem;
    color: var(--text-dim, #94a3b8);
    line-height: 1.3;
}

.status-indicator-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 6px #38bdf8;
    flex-shrink: 0;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.status-indicator-dot.is-available {
    background: #10b981;
    box-shadow: 0 0 6px #10b981;
}

.status-indicator-dot.is-pending {
    background: #38bdf8;
    box-shadow: 0 0 6px #38bdf8;
}

.os-footnote-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-dim, #94a3b8);
    font-size: 0.74rem;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color var(--transition-fast);
}

.os-footnote-link:hover {
    color: var(--fcord-cyan, #38bdf8);
}

.fcord-download-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.84rem;
    color: var(--text-muted, #94a3b8);
    margin-bottom: 20px;
    text-align: center;
}

.fcord-download-meta .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.fcord-download-meta .meta-separator {
    color: var(--border-medium, rgba(255, 255, 255, 0.2));
}

.fcord-download-meta .meta-link {
    color: var(--fcord-cyan, #38bdf8);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition-fast);
}

.fcord-download-meta .meta-link:hover {
    color: #7dd3fc;
}

@media (max-width: 960px) {
    .fcord-os-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin-inline: auto;
    }
}

/* Multiplatform Technical & Security Notes Box */
.multiplatform-security-box,
.hero-security-box {
    width: 100%;
    max-width: 100%;
    background: rgba(13, 15, 22, 0.75);
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-lg, 14px);
    padding: 20px 22px;
    margin-bottom: 24px;
    text-align: left;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
}

.sec-box-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text-pure, #ffffff);
    margin-bottom: 8px;
}

.sec-box-header .icon {
    width: 16px;
    height: 16px;
    color: var(--fcord-cyan, #38bdf8);
    flex-shrink: 0;
}

.sec-box-summary {
    font-size: 0.8rem;
    color: var(--text-muted, #94a3b8);
    line-height: 1.5;
    margin-bottom: 12px;
}

.sec-box-summary strong {
    color: var(--text-pure, #ffffff);
}

.sec-box-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sec-box-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.76rem;
    color: var(--text-muted, #94a3b8);
    line-height: 1.45;
}

.sec-box-item p {
    margin: 0;
    min-width: 0;
    flex: 1;
}

.sec-box-item code {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    padding: 1px 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    color: #e0e7ff;
}

.sec-box-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(165, 180, 252, 0.1);
    border: 1px solid rgba(165, 180, 252, 0.2);
    color: var(--accent-lavender, #a5b4fc);
    flex-shrink: 0;
    margin-top: 1px;
}

@media (max-width: 768px) {
    .sec-box-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* Dual Terminal with Overflow Protection */
.hero-terminal {
    width: min(680px, 100%);
    max-width: 100%;
    min-width: 0;
    background: #0d0e14;
    border: 1px solid var(--border-highlight);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 36px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.terminal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--border-subtle);
    padding: 4px 8px;
    gap: 8px;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.terminal-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
    min-width: 0;
    max-width: 100%;
}
.terminal-tabs::-webkit-scrollbar {
    display: none;
}

.term-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-dim);
    transition: all var(--transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
}
.term-tab:hover { color: var(--text-normal); }
.term-tab.is-active {
    color: var(--text-pure);
    background: rgba(255, 255, 255, 0.06);
    font-weight: 600;
}

.terminal-copy-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    transition: all var(--transition-fast);
    flex-shrink: 0;
}
.terminal-copy-action:hover {
    color: var(--text-pure);
    background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 600px) {
    .terminal-header {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .terminal-tabs {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }
    .terminal-copy-action {
        width: 100%;
        justify-content: center;
    }
    .term-tab {
        padding: 5px 8px;
        font-size: 0.68rem;
    }
    .term-body {
        padding: 10px 12px;
        font-size: 0.74rem;
        max-width: 100%;
        overflow-x: auto;
    }
}

.term-body {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    text-align: left;
    overflow-x: auto;
    white-space: nowrap;
    max-width: 100%;
}
.term-body.is-active {
    display: flex;
}

.term-prompt {
    color: var(--fcord-cyan);
    font-weight: 700;
    user-select: none;
    flex-shrink: 0;
}

.term-code {
    color: var(--text-pure);
    flex: 1;
}

/* --------------------------------------------------------------------------
   9. Unified Bento Stats Grid (Premium Glassmorphism & Metallic Glow)
   -------------------------------------------------------------------------- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: rgba(11, 13, 18, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    box-shadow:
        0 24px 48px -12px rgba(0, 0, 0, 0.65),
        0 4px 16px -4px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 0 rgba(0, 0, 0, 0.4);
    overflow: hidden;
    width: 100%;
    margin-bottom: 36px;
    position: relative;
}

/* Subtle ambient lavender light catch from top */
.stats-grid::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 50% at 50% -15%, rgba(165, 180, 252, 0.07) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.stat-card {
    position: relative;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.015) 0%, rgba(255, 255, 255, 0.003) 100%);
    padding: 26px 22px;
    text-align: left;
    transition: background var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
    z-index: 2;
}

/* Elegant vertical fading divider (fades to transparent at top & bottom) */
.stat-card:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 18%;
    bottom: 18%;
    right: 0;
    width: 1px;
    background: linear-gradient(
        180deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.09) 30%, 
        rgba(255, 255, 255, 0.09) 70%, 
        transparent 100%
    );
    pointer-events: none;
    transition: opacity var(--transition-base);
}

.stat-card:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.18);
}

/* Key numerical figures with white -> lavender metallic gradient & diffuse glow */
.stat-num {
    font-size: clamp(1.85rem, 2.25vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.1;
    margin-bottom: 8px;
    background: linear-gradient(180deg, #ffffff 10%, #dbe4ff 55%, #a5b4fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 14px rgba(165, 180, 252, 0.25));
    font-variant-numeric: tabular-nums;
    transition: filter var(--transition-base), transform var(--transition-base);
    display: inline-block;
}

.stat-card:hover .stat-num {
    filter: drop-shadow(0 2px 22px rgba(165, 180, 252, 0.48));
    transform: translateY(-1px);
}

.stat-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: #f4f4f6;
    letter-spacing: -0.01em;
    margin-bottom: 3px;
    line-height: 1.3;
}

.stat-desc {
    font-size: 0.75rem;
    color: #94a3b8;
    line-height: 1.45;
}

/* --------------------------------------------------------------------------
   10. Interactive Living App Preview Frame
   -------------------------------------------------------------------------- */
.hero-preview-frame {
    width: 100%;
    border-radius: var(--radius-2xl);
    background: linear-gradient(180deg, rgba(16, 20, 32, 0.9) 0%, rgba(9, 12, 19, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 32px 80px -16px rgba(0, 0, 0, 0.85), 0 0 48px -12px rgba(99, 102, 241, 0.16), inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
    overflow: hidden;
    position: relative;
    margin-bottom: 48px;
}

.preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: rgba(12, 16, 25, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    gap: 12px;
}

.preview-dots {
    display: flex;
    gap: 7px;
    flex-shrink: 0;
}
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot--red { background: #ff5f56; box-shadow: 0 0 8px rgba(255, 95, 86, 0.5); }
.dot--yellow { background: #ffbd2e; box-shadow: 0 0 8px rgba(255, 189, 46, 0.5); }
.dot--green { background: #27c93f; box-shadow: 0 0 8px rgba(39, 201, 63, 0.5); }

.preview-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
}

.preview-controls-bar {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.mockup-btn {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
    transition: all var(--transition-fast);
    cursor: pointer;
}
.mockup-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.16);
}
.mockup-btn.is-active {
    background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%);
    color: #ffffff;
    border-color: #6366f1;
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.4), inset 0 1px 0 0 rgba(255, 255, 255, 0.25);
}

.preview-screen {
    position: relative;
    background: #000;
    overflow: hidden;
}
.preview-screen img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.preview-overlay-badge {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: rgba(13, 14, 20, 0.88);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-highlight);
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-pure);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);
}

.badge--top-right { top: 18px; right: 18px; }
.badge--bottom-left { bottom: 18px; left: 18px; }

.badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-lavender);
    display: inline-block;
    flex-shrink: 0;
}
.badge-dot--green { background: var(--opsec-emerald); }
.badge-dot--blue { background: var(--fcord-cyan); }
.badge-dot--pulse {
    background: var(--accent-lavender);
    box-shadow: 0 0 8px var(--accent-lavender);
    animation: pulseGlow 2s infinite ease-in-out;
}

@keyframes pulseGlow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.85); }
}

/* --------------------------------------------------------------------------
   11. Architecture Engineering Blueprint & Telemetry Pipeline
   -------------------------------------------------------------------------- */
.arch-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
    margin-bottom: 40px;
}

.arch-header-main {
    max-width: 680px;
}

.arch-telemetry-bar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 24px;
    background: rgba(14, 18, 26, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    padding: 16px 22px;
    flex-shrink: 0;
    box-shadow: 0 10px 28px -6px rgba(0, 0, 0, 0.6);
}

.arch-telemetry-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.arch-telemetry-label {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.arch-telemetry-val {
    font-family: var(--font-mono);
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-pure);
}

.arch-blueprint {
    background: #090b12;
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 24px 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-2xl);
    padding: 36px 30px;
    box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.8), inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
    position: relative;
    margin-bottom: 32px;
    overflow-x: auto;
}

.arch-pipeline-track {
    position: absolute;
    top: 50%;
    left: 40px;
    right: 40px;
    height: 2px;
    background: linear-gradient(90deg, #38bdf8 0%, #818cf8 50%, #c084fc 100%);
    opacity: 0.25;
    pointer-events: none;
    z-index: 0;
}

.arch-stages-grid {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.arch-stage-card {
    flex: 1;
    min-width: 0;
    background: rgba(14, 17, 26, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-xl);
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.6), inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.arch-stage-card:hover {
    transform: translateY(-3px);
    border-color: rgba(56, 189, 248, 0.4);
    box-shadow: 0 20px 44px -8px rgba(0, 0, 0, 0.8), 0 0 24px -4px rgba(56, 189, 248, 0.2);
}

.arch-stage-card--highlight {
    background: rgba(16, 22, 36, 0.95);
    border-color: rgba(56, 189, 248, 0.35);
    box-shadow: 0 14px 32px -6px rgba(0, 0, 0, 0.7), 0 0 20px -6px rgba(56, 189, 248, 0.2), inset 0 1px 0 0 rgba(56, 189, 248, 0.25);
}

.arch-stage-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.arch-stage-num {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--text-dim);
}

.arch-stage-num--blue {
    color: #38bdf8;
}

.arch-stage-num--purple {
    color: #c084fc;
}

.arch-stage-type {
    font-family: var(--font-sans);
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--text-dim);
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.arch-stage-type--blue {
    color: #7dd3fc;
}

.arch-stage-type--purple {
    color: #d8b4fe;
}

.arch-stage-title {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--text-pure);
    line-height: 1.25;
}

.arch-stage-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

.arch-stage-desc code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 4px;
    border-radius: 3px;
    color: var(--accent-lavender-light);
}

.arch-stage-footer {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.arch-stage-tag {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    color: var(--text-dim);
}

.arch-stage-tag--blue {
    color: #38bdf8;
}

.arch-stage-tag--purple {
    color: #c084fc;
}

.arch-stage-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
}

.arch-stage-arrow {
    width: 18px;
    height: 18px;
    color: #38bdf8;
}

.arch-stage-chip {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 700;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.25);
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

/* Technical Contrast Strip */
.arch-contrast-strip {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 24px;
    align-items: center;
}

.arch-contrast-col {
    background: linear-gradient(180deg, rgba(16, 20, 32, 0.75) 0%, rgba(9, 12, 19, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.6), inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
}

.arch-contrast-col--legacy {
    border-color: rgba(239, 68, 68, 0.25);
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.05) 0%, rgba(16, 11, 16, 0.85) 100%);
    box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.6), inset 0 1px 0 0 rgba(239, 68, 68, 0.15);
}

.arch-contrast-col--modern {
    border-color: rgba(16, 185, 129, 0.3);
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.06) 0%, rgba(9, 16, 14, 0.85) 100%);
    box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.6), 0 0 30px -8px rgba(16, 185, 129, 0.12), inset 0 1px 0 0 rgba(16, 185, 129, 0.2);
}

.arch-contrast-head {
    display: flex;
    align-items: center;
}

.arch-contrast-tag {
    font-family: var(--font-sans);
    font-size: 0.76rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
}

.arch-contrast-tag--warn {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.arch-contrast-tag--success {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.arch-contrast-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
    padding: 0;
}

.arch-contrast-list li {
    position: relative;
    padding-left: 22px;
}

.arch-contrast-list code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 5px;
    border-radius: 3px;
    color: var(--accent-ice);
}

.arch-contrast-col--legacy .arch-contrast-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 14px;
    height: 14px;
    background-color: #f87171;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") no-repeat center / contain;
}

.arch-contrast-col--modern .arch-contrast-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 14px;
    height: 14px;
    background-color: #34d399;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain;
}

.arch-contrast-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(180deg, #1e2434 0%, #0d1018 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--text-pure);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 14px rgba(255, 255, 255, 0.06);
}

/* Backward compatibility for arch-diagram */
.arch-diagram {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-2xl);
    padding: 36px 30px;
}
.arch-node {
    flex: 1;
    min-width: 220px;
    background: rgba(18, 20, 28, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    padding: 24px 20px;
}
.arch-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.arch-speed {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--accent-lavender);
    background: rgba(165, 180, 252, 0.1);
    border: 1px solid rgba(165, 180, 252, 0.2);
    padding: 2px 7px;
    border-radius: var(--radius-pill);
}

/* --------------------------------------------------------------------------
   12. Ecosystem Dual Grid (Clear Separation)
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   12. Product Showcase (Asymmetric Dual Editorial Spread)
   -------------------------------------------------------------------------- */
.eco-showcase-flow {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.eco-product-stage {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 48px;
    align-items: center;
    background: linear-gradient(180deg, rgba(20, 24, 34, 0.75) 0%, rgba(11, 13, 19, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-2xl);
    padding: 44px;
    box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.7), inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.eco-product-stage--opsec {
    grid-template-columns: 7fr 5fr;
}

.eco-product-stage--fcord::before {
    content: '';
    position: absolute;
    top: -120px;
    left: -120px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.12) 0%, transparent 70%);
    pointer-events: none;
}

.eco-product-stage--opsec::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.12) 0%, transparent 70%);
    pointer-events: none;
}

.eco-product-stage--fcord:hover {
    border-color: rgba(56, 189, 248, 0.3);
    box-shadow: 0 32px 72px -16px rgba(0, 0, 0, 0.8), 0 0 32px -8px rgba(56, 189, 248, 0.15), inset 0 1px 0 0 rgba(255, 255, 255, 0.12);
}

.eco-product-stage--opsec:hover {
    border-color: rgba(16, 185, 129, 0.3);
    box-shadow: 0 32px 72px -16px rgba(0, 0, 0, 0.8), 0 0 32px -8px rgba(16, 185, 129, 0.15), inset 0 1px 0 0 rgba(255, 255, 255, 0.12);
}

.eco-product-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 1;
}

.eco-product-badge-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.eco-badge {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.eco-badge--fcord {
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.28);
}

.eco-badge--opsec {
    background: rgba(16, 185, 129, 0.12);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.28);
}

.eco-meta-pill {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    color: var(--text-dim);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 3px 9px;
    border-radius: var(--radius-pill);
}

.eco-brand-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.eco-brand-logo {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 6px;
    object-fit: contain;
    flex-shrink: 0;
    box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
}

.eco-title {
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text-pure);
    line-height: 1.15;
    margin-bottom: 3px;
}

.eco-subtitle {
    font-size: 0.84rem;
    color: var(--text-dim);
    font-family: var(--font-sans);
}

.eco-lead {
    font-size: 0.98rem;
    color: var(--text-muted);
    line-height: 1.65;
}

.eco-specs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 4px 0 8px 0;
}

.eco-spec-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.04);
}
.eco-spec-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    transform: translateX(4px);
    box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.4), inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
}

.eco-spec-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
    background: transparent;
    border: none;
    color: var(--accent-lavender-light);
}

.eco-spec-icon--cyan {
    background: transparent;
    color: #38bdf8;
    border: none;
}

.eco-spec-icon--emerald {
    background: transparent;
    color: #34d399;
    border: none;
}

.eco-spec-text strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-pure);
    margin-bottom: 2px;
}

.eco-spec-text p {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.45;
    margin: 0;
}

.eco-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* Expansive Media Window Frame */
.eco-product-media {
    position: relative;
    width: 100%;
    z-index: 1;
}

.eco-window-frame {
    background: #080a0f;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.85), inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
    transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.eco-product-stage--fcord .eco-window-frame {
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.85), 0 0 50px -10px rgba(56, 189, 248, 0.25), inset 0 1px 0 0 rgba(255, 255, 255, 0.12);
}

.eco-product-stage--opsec .eco-window-frame {
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.85), 0 0 50px -10px rgba(16, 185, 129, 0.22), inset 0 1px 0 0 rgba(255, 255, 255, 0.12);
}

.eco-window-frame--tactical {
    border-color: rgba(16, 185, 129, 0.25);
}

.eco-window-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.eco-window-app-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.eco-app-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 8px #38bdf8;
}

.eco-app-dot--pulse {
    animation: profileLivePulse 2.4s infinite;
}

.eco-app-dot--emerald {
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
}

.eco-window-title {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    color: var(--text-dim);
    letter-spacing: 0.02em;
}

.eco-status-tag {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

.eco-status-tag--cyan {
    background: rgba(56, 189, 248, 0.12);
    color: #7dd3fc;
    border: 1px solid rgba(56, 189, 248, 0.25);
}

.eco-status-tag--emerald {
    background: rgba(16, 185, 129, 0.12);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.eco-window-viewport {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #040507;
}

.eco-window-viewport img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity var(--transition-base);
}

.eco-product-stage:hover .eco-window-viewport img {
    transform: scale(1.02);
}

/* Backwards compatibility for showcase-grid */
.showcase-grid {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.showcase-card {
    border-radius: var(--radius-2xl);
}

/* --------------------------------------------------------------------------
   13. Flagship Plugin Spotlight (Editorial High-Impact Features)
   -------------------------------------------------------------------------- */
.plugin-spotlight-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 20px;
    margin-bottom: 36px;
    align-items: stretch;
}

.plugin-spotlight-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.plugin-spotlight-card {
    background: linear-gradient(180deg, rgba(20, 24, 36, 0.85) 0%, rgba(11, 14, 22, 0.96) 100%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-2xl);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.75), inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.plugin-spotlight-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
}

.plugin-spotlight-card--hero {
    padding: 32px 28px;
    gap: 16px;
}

.spotlight-telemetry-hud {
    background: rgba(5, 8, 14, 0.7);
    border: 1px solid rgba(16, 185, 129, 0.22);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 8px 0;
    box-shadow: inset 0 0 24px -8px rgba(16, 185, 129, 0.08), 0 6px 20px -4px rgba(0, 0, 0, 0.45);
    position: relative;
}

.spotlight-telemetry-hud::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    height: 2px;
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
}

.telemetry-hud-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hud-label {
    color: var(--text-dim);
    font-family: var(--font-sans);
    font-size: 0.76rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hud-val {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text-pure);
    font-size: 0.8rem;
}

@media (max-width: 900px) {
    .plugin-spotlight-grid {
        grid-template-columns: 1fr;
    }
}

.plugin-spotlight-card:hover {
    transform: translateY(-3px);
}

.plugin-spotlight-card--privacy:hover {
    border-color: rgba(16, 185, 129, 0.45);
    box-shadow: 0 24px 52px -10px rgba(0, 0, 0, 0.85), 0 0 28px -6px rgba(16, 185, 129, 0.22);
}

.plugin-spotlight-card--audio:hover {
    border-color: rgba(56, 189, 248, 0.45);
    box-shadow: 0 24px 52px -10px rgba(0, 0, 0, 0.85), 0 0 28px -6px rgba(56, 189, 248, 0.22);
}

.plugin-spotlight-card--ui:hover {
    border-color: rgba(192, 132, 252, 0.45);
    box-shadow: 0 24px 52px -10px rgba(0, 0, 0, 0.85), 0 0 28px -6px rgba(192, 132, 252, 0.22);
}

.spotlight-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.spotlight-badge {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.spotlight-badge--emerald {
    background: rgba(16, 185, 129, 0.12);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.spotlight-badge--blue {
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.25);
}

.spotlight-badge--purple {
    background: rgba(192, 132, 252, 0.12);
    color: #c084fc;
    border: 1px solid rgba(192, 132, 252, 0.25);
}

.spotlight-status {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    color: var(--text-dim);
}

.spotlight-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-pure);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.spotlight-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
}

.spotlight-features {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.spotlight-tag {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    color: var(--text-dim);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 3px 8px;
    border-radius: var(--radius-pill);
}

/* --------------------------------------------------------------------------
   13. Plugin Marketplace (High-Density Explorer)
   -------------------------------------------------------------------------- */
.plugin-explorer {
    background: linear-gradient(180deg, rgba(16, 19, 28, 0.8) 0%, rgba(10, 12, 17, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-2xl);
    box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.75), inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
    padding: 36px;
    margin-bottom: 40px;
}

.plugin-explorer-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.explorer-intro h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-pure);
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}

.explorer-intro p {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.explorer-badge {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--accent-lavender);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.explorer-search-wrap {
    position: relative;
    width: min(380px, 100%);
    flex-shrink: 0;
    max-width: 100%;
}

.explorer-search-icon {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: var(--text-dim);
    pointer-events: none;
    transition: color var(--transition-fast);
}
.explorer-search-wrap:focus-within .explorer-search-icon {
    color: var(--accent-lavender);
}

.explorer-search-input {
    width: 100%;
    background: rgba(13, 15, 22, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-pill);
    padding: 11px 48px 11px 42px;
    color: var(--text-pure);
    font-size: 0.875rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
    min-height: 44px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
.explorer-search-input::placeholder {
    color: var(--text-dim);
    font-size: 0.84rem;
}
.explorer-search-input:hover {
    border-color: var(--card-border-hover);
}
.explorer-search-input:focus {
    background: rgba(18, 21, 32, 0.95);
    border-color: var(--accent-lavender);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(165, 180, 252, 0.2), 0 0 20px -4px var(--accent-glow);
    outline: none;
}

.explorer-search-clear {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    color: var(--text-dim);
    font-size: 1.25rem;
    line-height: 1;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast);
}
.explorer-search-clear:hover {
    color: var(--text-pure);
    background: rgba(255, 255, 255, 0.08);
}
.explorer-search-clear:focus-visible {
    outline: 2px solid var(--accent-lavender);
    outline-offset: -2px;
}

.filter-tabs-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-subtle);
}

.tab-pill {
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all var(--transition-fast);
    min-height: 44px;
}
.tab-pill:hover {
    color: var(--text-pure);
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.16);
}
.tab-pill.is-active {
    background: #ffffff;
    color: #09090b;
    border-color: #ffffff;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.2);
}

.plugin-results-counter {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--text-dim);
    margin-bottom: 16px;
}

.plugin-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 14px;
}

.plugin-card {
    background: linear-gradient(180deg, rgba(18, 22, 32, 0.82) 0%, rgba(10, 13, 19, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 3px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    min-width: 0;
    overflow: hidden;
    position: relative;
}

.plugin-card[data-category="privacy"] {
    border-left-color: #34d399;
}
.plugin-card[data-category="media"] {
    border-left-color: #38bdf8;
}
.plugin-card[data-category="ui"] {
    border-left-color: #c084fc;
}
.plugin-card[data-category="utility"] {
    border-left-color: #fbbf24;
}
.plugin-card[data-category="dev"] {
    border-left-color: #94a3b8;
}

.plugin-card:hover {
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 18px 40px -8px rgba(0, 0, 0, 0.75), inset 0 1px 0 0 rgba(255, 255, 255, 0.14);
    transform: translateY(-2px);
}
.plugin-card[data-category="privacy"]:hover {
    border-left-color: #10b981;
    box-shadow: 0 18px 40px -8px rgba(0, 0, 0, 0.75), 0 0 20px -4px rgba(16, 185, 129, 0.25);
}
.plugin-card[data-category="media"]:hover {
    border-left-color: #38bdf8;
    box-shadow: 0 18px 40px -8px rgba(0, 0, 0, 0.75), 0 0 20px -4px rgba(56, 189, 248, 0.25);
}
.plugin-card[data-category="ui"]:hover {
    border-left-color: #c084fc;
    box-shadow: 0 18px 40px -8px rgba(0, 0, 0, 0.75), 0 0 20px -4px rgba(192, 132, 252, 0.25);
}
.plugin-card[data-category="utility"]:hover {
    border-left-color: #f59e0b;
    box-shadow: 0 18px 40px -8px rgba(0, 0, 0, 0.75), 0 0 20px -4px rgba(245, 158, 11, 0.25);
}
.plugin-card[data-category="dev"]:hover {
    border-left-color: #cbd5e1;
    box-shadow: 0 18px 40px -8px rgba(0, 0, 0, 0.75), 0 0 20px -4px rgba(203, 213, 225, 0.2);
}

.plugin-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    width: 100%;
    min-width: 0;
}

.plugin-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
}

.plugin-name {
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--text-pure);
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.35;
    margin: 0;
    hyphens: auto;
}

.plugin-tag {
    align-self: flex-start;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.04);
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow-wrap: anywhere;
    max-width: 100%;
}
.plugin-tag--green { color: #6ee7b7; background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.2); }
.plugin-tag--blue, .plugin-tag--purple, .plugin-tag--cyan { color: #c7d2fe; background: rgba(165, 180, 252, 0.08); border-color: rgba(165, 180, 252, 0.2); }
.plugin-tag--amber { color: #fde68a; background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.2); }

/* Interactive Toggle Switch */
.plugin-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    margin-top: -8px;
}
.plugin-switch input {
    opacity: 0;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
}
.switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 13px 5px;
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-pill);
    transition: 0.22s var(--ease-out);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
.switch-slider::before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 2px;
    bottom: 2px;
    background-color: var(--text-pure);
    border-radius: 50%;
    transition: 0.22s var(--ease-out);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.plugin-switch input:checked + .switch-slider {
    background-color: #38bdf8;
    border-color: #38bdf8;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.45);
}
.plugin-switch input:checked + .switch-slider::before {
    transform: translateX(17px);
    background-color: #060910;
}

.plugin-desc {
    font-size: 0.82rem;
    color: #94a3b8;
    line-height: 1.5;
    margin-bottom: 14px;
}

.plugin-footer {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--text-dim);
    border-top: 1px solid var(--border-subtle);
    padding-top: 8px;
    margin-top: auto;
    gap: 12px;
    flex-wrap: wrap;
}

.plugin-no-results {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 0.92rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.plugin-load-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

/* --------------------------------------------------------------------------
   14. Opsec PRO Section & Pricing
   -------------------------------------------------------------------------- */
.opsec-overview-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 36px;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-2xl);
    padding: 40px;
    margin-bottom: 72px;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.opsec-overview-text,
.opsec-overview-media {
    min-width: 0;
    max-width: 100%;
}

.tactical-badge {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--opsec-emerald);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.opsec-overview-text h3 {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-pure);
    margin-bottom: 12px;
}

.opsec-overview-text p {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 22px;
}

.opsec-feature-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 26px;
}

.opsec-fitem {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.fitem-icon {
    width: 24px;
    height: 24px;
    color: var(--opsec-emerald);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent;
    border: none;
}

.fitem-body strong {
    display: block;
    font-size: 0.9rem;
    color: var(--text-pure);
    margin-bottom: 2px;
}

.fitem-body p {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.opsec-direct-action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 100%;
}
.opsec-direct-action .btn {
    max-width: 100%;
    text-align: center;
    justify-content: center;
}

.opsec-license-note {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    color: var(--text-dim);
}

.opsec-media-frame {
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--border-medium);
    background: #08090d;
}
.opsec-media-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Opsec PRO 4-Hubs Grid */
/* Opsec PRO 4-Hubs Visual Grid */
.opsec-hubs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 36px;
    margin-bottom: 56px;
}

.opsec-hub-card {
    background: linear-gradient(180deg, rgba(16, 20, 30, 0.8) 0%, rgba(10, 13, 19, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.7), inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.opsec-hub-card:hover {
    border-color: rgba(16, 185, 129, 0.35);
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.8), 0 0 24px -4px rgba(16, 185, 129, 0.15), inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
    transform: translateY(-3px);
}

.opsec-hub-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.opsec-hub-icon {
    width: 28px;
    height: 28px;
    color: var(--opsec-emerald);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent;
    border: none;
    transition: color var(--transition-fast), transform var(--transition-fast);
}
.opsec-hub-card:hover .opsec-hub-icon {
    color: #34d399;
    transform: scale(1.05);
}

.opsec-hub-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.opsec-hub-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-pure);
    letter-spacing: -0.01em;
}

.opsec-hub-tag {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    width: fit-content;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}
.opsec-hub-tag--emerald { background: rgba(16, 185, 129, 0.12); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.25); }
.opsec-hub-tag--cyan { background: rgba(56, 189, 248, 0.12); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.25); }
.opsec-hub-tag--amber { background: rgba(245, 158, 11, 0.12); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.25); }
.opsec-hub-tag--purple { background: rgba(192, 132, 252, 0.12); color: #c084fc; border: 1px solid rgba(192, 132, 252, 0.25); }

.opsec-hub-media {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #080a0f;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
    aspect-ratio: 16 / 9;
}
.opsec-hub-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-base);
}
.opsec-hub-card:hover .opsec-hub-media img {
    transform: scale(1.02);
}

.opsec-hub-desc {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.opsec-hub-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.opsec-hub-list li {
    font-size: 0.84rem;
    color: #cbd5e1;
    position: relative;
    padding-left: 16px;
    line-height: 1.45;
}
.opsec-hub-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--opsec-emerald);
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

/* Asymmetric Editorial Pricing Showcase */
.opsec-pricing-showcase {
    display: grid;
    grid-template-columns: 1.35fr 0.95fr;
    gap: 36px;
    align-items: center;
    background: linear-gradient(135deg, rgba(16, 24, 36, 0.9) 0%, rgba(9, 13, 20, 0.98) 100%);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: var(--radius-2xl);
    padding: 44px 48px;
    box-shadow: 0 32px 80px -16px rgba(0, 0, 0, 0.8), 0 0 32px -8px rgba(16, 185, 129, 0.12), inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.opsec-pricing-showcase::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.pricing-badge-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.pricing-badge--emerald {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pricing-meta-tag {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    color: var(--text-dim);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 3px 8px;
    border-radius: var(--radius-pill);
}

.pricing-showcase-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.pricing-showcase-title {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--text-pure);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.pricing-showcase-amount {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.showcase-currency {
    font-size: 1.3rem;
    font-weight: 700;
    color: #34d399;
}

.showcase-val {
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.03em;
    line-height: 1;
}

.showcase-period {
    font-size: 0.78rem;
    font-family: var(--font-sans);
    color: var(--text-dim);
    margin-left: 6px;
}

.pricing-showcase-lead {
    font-size: 0.95rem;
    color: #94a3b8;
    line-height: 1.6;
    margin-bottom: 24px;
}

.pricing-perks-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 24px;
    margin-bottom: 32px;
}

.pricing-perk-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.pricing-perk-item svg {
    flex-shrink: 0;
    margin-top: 3px;
}

.pricing-perk-item strong {
    display: block;
    font-size: 0.88rem;
    color: #f1f5f9;
    font-weight: 600;
    margin-bottom: 2px;
}

.pricing-perk-item p {
    font-size: 0.8rem;
    color: #94a3b8;
    line-height: 1.45;
}

.pricing-showcase-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.pricing-security-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-family: var(--font-sans);
    color: var(--text-dim);
}

.pricing-card-frame {
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid rgba(16, 185, 129, 0.3);
    background: #080b11;
    box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.8), 0 0 24px -4px rgba(16, 185, 129, 0.2);
    position: relative;
}

.pricing-card-header-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(6, 8, 12, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-family: var(--font-sans);
    font-size: 0.72rem;
    color: #34d399;
    letter-spacing: 0.06em;
}

.pricing-card-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
}

.pricing-card-frame img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform var(--transition-base);
}

.opsec-pricing-showcase:hover .pricing-card-frame img {
    transform: scale(1.02);
}

@media (max-width: 960px) {
    .opsec-hubs-grid {
        grid-template-columns: 1fr;
    }
    .opsec-pricing-showcase {
        grid-template-columns: 1fr;
        padding: 32px 24px;
        gap: 28px;
    }
    .pricing-perks-grid {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   15. Developer Console & IDE Studio Workbench
   -------------------------------------------------------------------------- */
.quickstart-hub {
    background: linear-gradient(180deg, rgba(14, 17, 26, 0.95) 0%, rgba(9, 11, 17, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: 0 32px 80px -16px rgba(0, 0, 0, 0.8), inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
}

.dev-window-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #080b11;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
}

.dev-window-app-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}
.dev-window-app-meta::before {
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 14px 0 0 #f59e0b, 28px 0 0 #10b981;
    margin-right: 24px;
    flex-shrink: 0;
}

.dev-app-dot {
    display: none;
}

.dev-window-title {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    color: #cbd5e1;
    letter-spacing: 0.03em;
}
.dev-window-sep {
    color: rgba(56, 189, 248, 0.5);
    margin-inline: 4px;
}

.dev-runtime-pill {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.2);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
}

.dev-window-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 18px;
    background: #06080d;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-family: var(--font-sans);
    font-size: 0.7rem;
    color: #64748b;
}
.dev-status-left,
.dev-status-right {
    display: flex;
    align-items: center;
    gap: 16px;
}
.dev-status-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.dev-status-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}
@media (max-width: 768px) {
    .dev-window-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

.quickstart-workbench {
    display: grid;
    grid-template-columns: 290px 1fr;
    min-height: 520px;
}

.quickstart-sidebar {
    background: rgba(10, 13, 19, 0.7);
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    flex-direction: column;
    padding: 20px 16px;
    gap: 20px;
}

.quickstart-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 6px;
}

.quickstart-sidebar-label {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    font-weight: 700;
}

.quickstart-sidebar-badge {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
}

.quickstart-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.doc-tab-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    text-align: left;
    transition: all var(--transition-fast);
}

.doc-tab-btn:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

.doc-tab-btn.is-active {
    background: rgba(56, 189, 248, 0.08);
    border-color: rgba(56, 189, 248, 0.25);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05), 0 0 16px -4px rgba(56, 189, 248, 0.12);
    position: relative;
}
.doc-tab-btn.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: #38bdf8;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.8);
}

.doc-file-tag {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}
.doc-file-tag--ts { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }
.doc-file-tag--js { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.doc-file-tag--css { background: rgba(192, 132, 252, 0.15); color: #c084fc; }

.doc-tab-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.doc-tab-filename {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-pure);
}

.doc-tab-sub {
    font-size: 0.72rem;
    color: var(--text-dim);
}

.doc-tab-btn.is-active .doc-tab-filename {
    color: #38bdf8;
}

.quickstart-cheatsheet {
    margin-top: auto;
    background: rgba(6, 8, 12, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cheatsheet-heading {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    font-weight: 700;
}

.cheatsheet-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cheatsheet-key {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.cheatsheet-val {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.04);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    word-break: break-all;
}

.quickstart-content {
    padding: 32px;
    display: flex;
    flex-direction: column;
}

.doc-pane { display: none; }
.doc-pane.is-active {
    display: block;
    animation: fadeIn 0.22s var(--ease-out);
}

.doc-pane-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.doc-pane-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-dim);
}

.breadcrumb-sep { color: rgba(255, 255, 255, 0.2); }
.breadcrumb-file { font-weight: 600; }

.doc-pane-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-pure);
    letter-spacing: -0.02em;
    line-height: 1.35;
    margin-bottom: 8px;
}

.doc-badge {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: rgba(56, 189, 248, 0.08);
    color: #7dd3fc;
    border: 1px solid rgba(56, 189, 248, 0.2);
}

.doc-pane p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    line-height: 1.6;
}

.doc-pane p code {
    font-family: var(--font-mono);
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
    color: #7dd3fc;
    font-size: 0.84em;
}

@media (max-width: 900px) {
    .quickstart-workbench {
        grid-template-columns: 1fr;
    }
    .quickstart-sidebar {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }
    .quickstart-nav {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .doc-tab-btn {
        flex: 1 1 calc(33.333% - 6px);
    }
    .quickstart-cheatsheet {
        display: none;
    }
}
@media (max-width: 600px) {
    .quickstart-nav {
        flex-direction: column;
    }
    .doc-tab-btn {
        flex: 1 1 100%;
    }
    .quickstart-content {
        padding: 20px 16px;
    }
}

.code-block {
    background: rgba(8, 9, 14, 0.96);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 16px;
    width: 100%;
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
}

.code-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.025);
    border-bottom: 1px solid var(--border-subtle);
}

.code-lang {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent-lavender-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.code-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
    transition: all var(--transition-fast);
    min-height: 36px;
    cursor: pointer;
}
.code-copy-btn:hover {
    color: var(--text-pure);
    background: rgba(165, 180, 252, 0.1);
    border-color: rgba(165, 180, 252, 0.25);
}
.code-copy-btn:focus-visible {
    outline: 2px solid var(--accent-lavender);
    outline-offset: 1px;
}

.code-block pre {
    padding: 18px 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-family: var(--font-mono);
    font-size: 0.84rem;
    line-height: 1.65;
    color: #e4e4e7;
    max-width: 100%;
}
.code-block pre:focus-visible {
    outline: 2px solid var(--accent-lavender);
    outline-offset: -2px;
}

/* Syntax Highlighting Tokens */
.syn-kw { color: var(--syn-kw); font-weight: 600; }
.syn-str { color: var(--syn-str); }
.syn-fn { color: var(--syn-fn); }
.syn-var { color: var(--syn-var); }
.syn-com { color: var(--syn-com); font-style: italic; }
.syn-prop { color: var(--syn-prop); }
.syn-val { color: var(--syn-val); }
.syn-sel { color: var(--accent-lavender-light); }

/* --------------------------------------------------------------------------
   16. Honest Security & ToS Transparency Hub
   -------------------------------------------------------------------------- */
.security-editorial-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 48px;
    align-items: flex-start;
}

.security-editorial-intro {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 100px;
}

.security-trust-badge {
    margin-top: 12px;
    padding: 16px 20px;
    background: rgba(16, 185, 129, 0.06);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.security-trust-dossier {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(8, 12, 20, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.6), inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
}
.sec-dossier-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    gap: 12px;
}
.sec-dossier-label {
    font-family: var(--font-sans);
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.72rem;
}
.sec-dossier-val {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.75rem;
}

.security-pillars-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.security-pillar-card {
    background: linear-gradient(180deg, rgba(14, 18, 28, 0.92) 0%, rgba(9, 12, 20, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-xl);
    padding: 26px 30px;
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.75), inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    position: relative;
    overflow: hidden;
}
.security-pillar-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    opacity: 0.9;
}
.security-pillar-card--tos::before { background: linear-gradient(90deg, #f59e0b, rgba(245, 158, 11, 0.1), transparent); }
.security-pillar-card--storage::before { background: linear-gradient(90deg, #38bdf8, rgba(56, 189, 248, 0.1), transparent); }
.security-pillar-card--builds::before { background: linear-gradient(90deg, #10b981, rgba(16, 185, 129, 0.1), transparent); }

.security-pillar-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 24px 52px -12px rgba(0, 0, 0, 0.85), inset 0 1px 0 0 rgba(255, 255, 255, 0.12);
}

.pillar-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pillar-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.pillar-clause-idx {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    color: #64748b;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.pillar-clause-badge {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    letter-spacing: 0.02em;
}
.pillar-clause-badge--amber {
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}
.pillar-clause-badge--cyan {
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.3);
}
.pillar-clause-badge--emerald {
    background: rgba(16, 185, 129, 0.12);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.pillar-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-pure);
    letter-spacing: -0.01em;
}

.pillar-body {
    font-size: 0.9rem;
    color: #94a3b8;
    line-height: 1.6;
}
.pillar-body strong { color: #f1f5f9; }
.pillar-body em { color: #cbd5e1; font-style: normal; }
.pillar-body code {
    font-family: var(--font-mono);
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
    color: #7dd3fc;
    font-size: 0.84em;
}

/* --------------------------------------------------------------------------
   17. Easy 1-Click Uninstallation & Rollback Guide
   -------------------------------------------------------------------------- */
.uninstall-split-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 40px;
    align-items: stretch;
}

.uninstall-terminal-card {
    background: linear-gradient(180deg, #090e18 0%, #060910 100%);
    border: 1px solid rgba(56, 189, 248, 0.22);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.85), 0 0 40px -10px rgba(56, 189, 248, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
}

.uninstall-term-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: #080c14;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.term-app-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}
.term-app-meta::before {
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 14px 0 0 #f59e0b, 28px 0 0 #10b981;
    margin-right: 24px;
    flex-shrink: 0;
}

.term-app-dot {
    display: none;
}

.term-title {
    font-family: var(--font-sans);
    font-size: 0.76rem;
    font-weight: 600;
    color: #cbd5e1;
    letter-spacing: 0.03em;
}

.term-tag {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.25);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

.uninstall-term-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}

.term-instruction {
    font-size: 0.86rem;
    color: var(--text-muted);
}

.term-simulated-output {
    margin-top: auto;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(56, 189, 248, 0.15);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6);
}

.uninstall-guarantee-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.uninstall-manual-box {
    background: rgba(18, 22, 32, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.manual-box-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.manual-box-header strong {
    font-size: 0.92rem;
    color: var(--text-pure);
}

.manual-badge {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    color: var(--text-dim);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

.uninstall-manual-box p {
    font-size: 0.84rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.uninstall-manual-box code {
    font-family: var(--font-mono);
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 6px;
    border-radius: 4px;
    color: #38bdf8;
}

.uninstall-checklist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.uninstall-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.86rem;
    color: #cbd5e1;
    line-height: 1.45;
}
.uninstall-checklist li svg {
    flex-shrink: 0;
    margin-top: 3px;
}

@media (max-width: 960px) {
    .security-editorial-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .security-editorial-intro {
        position: static;
    }
    .uninstall-split-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* --------------------------------------------------------------------------
   18. FAQ Editorial Layout
   -------------------------------------------------------------------------- */
.faq-section {
    position: relative;
    padding: 80px 0;
}

.faq-editorial-layout {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

.faq-editorial-sidebar {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-editorial-sidebar .section-title {
    text-align: left;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: var(--text-pure);
    margin: 0;
}

.faq-editorial-sidebar .section-eyebrow {
    text-align: left;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
}

.faq-editorial-sidebar .section-desc {
    text-align: left;
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 8px 0;
}

.faq-support-box {
    background: rgba(14, 18, 26, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.faq-support-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    color: var(--accent-lavender-light);
    letter-spacing: 0.04em;
}

.faq-support-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-pure);
    margin: 0;
}

.faq-support-text {
    font-size: 0.84rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

.faq-support-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

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

.faq-item {
    background: rgba(13, 16, 24, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
    box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.45), inset 0 1px 0 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.faq-item:hover {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(16, 21, 32, 0.88);
}
.faq-item[open] {
    border-color: rgba(56, 189, 248, 0.4);
    background: linear-gradient(180deg, rgba(14, 20, 32, 0.95) 0%, rgba(9, 13, 22, 0.98) 100%);
    box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.7), 0 0 28px -4px rgba(56, 189, 248, 0.16), inset 0 1px 0 0 rgba(56, 189, 248, 0.2);
}

.faq-question {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--text-pure);
    cursor: pointer;
    user-select: none;
    transition: color var(--transition-fast);
}
.faq-question:hover {
    color: #ffffff;
}
.faq-question::-webkit-details-marker { display: none; }

.faq-question-text {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.faq-num {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    color: #38bdf8;
    opacity: 0.9;
    flex-shrink: 0;
}

.faq-icon {
    transition: transform var(--transition-fast), color var(--transition-fast);
    color: var(--text-dim);
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}
.faq-item[open] .faq-icon {
    transform: rotate(180deg);
    color: #38bdf8;
}

.faq-answer {
    padding: 0 24px 22px 48px;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.65;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    margin-top: 4px;
    padding-top: 16px;
}
.faq-answer p:not(:last-child) {
    margin-bottom: 12px;
}
.faq-answer ul {
    margin: 10px 0 0 18px;
    padding: 0;
}
.faq-answer li {
    margin-bottom: 8px;
}
.faq-answer li:last-child {
    margin-bottom: 0;
}
.faq-answer code {
    font-family: var(--font-mono);
    background: rgba(165, 180, 252, 0.08);
    border: 1px solid rgba(165, 180, 252, 0.16);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--accent-ice);
    overflow-wrap: anywhere;
    font-size: 0.84em;
}

@media (max-width: 960px) {
    .faq-editorial-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .faq-editorial-sidebar {
        position: static;
    }
    .faq-answer {
        padding-left: 24px;
    }
}

/* --------------------------------------------------------------------------
   19. Community Banner
   -------------------------------------------------------------------------- */
.community-section {
    position: relative;
    padding: 60px 0 80px;
}

.community-banner {
    position: relative;
    background: radial-gradient(circle at 85% 30%, rgba(99, 102, 241, 0.25), transparent 55%),
                radial-gradient(circle at 15% 80%, rgba(56, 189, 248, 0.15), transparent 50%),
                linear-gradient(180deg, rgba(14, 18, 28, 0.9) 0%, rgba(9, 11, 18, 0.98) 100%);
    border: 1px solid rgba(165, 180, 252, 0.25);
    border-radius: var(--radius-2xl);
    padding: 48px 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.85),
                0 0 40px -4px rgba(99, 102, 241, 0.15),
                inset 0 1px 0 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow: hidden;
}

.community-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(600px circle at 80% 50%, rgba(99, 102, 241, 0.08), transparent 70%);
}

.community-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--accent-lavender-light);
    letter-spacing: 0.05em;
    padding: 4px 12px;
    background: rgba(165, 180, 252, 0.08);
    border: 1px solid rgba(165, 180, 252, 0.2);
    border-radius: var(--radius-pill);
    margin-bottom: 14px;
}

.community-title {
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    font-weight: 800;
    color: var(--text-pure);
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin-bottom: 12px;
}

.community-desc {
    font-size: 0.95rem;
    color: var(--text-muted);
    max-width: 540px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.community-perks {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.community-perk-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    color: #cbd5e1;
    font-weight: 500;
}

.community-action-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.community-action-box .btn--discord {
    padding: 16px 28px;
    font-size: 0.96rem;
    font-weight: 700;
    box-shadow: 0 12px 32px -4px rgba(88, 101, 242, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.25);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.community-action-box .btn--discord:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -4px rgba(88, 101, 242, 0.65), inset 0 1px 0 0 rgba(255, 255, 255, 0.35);
}

.community-hint {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    color: var(--text-dim);
    letter-spacing: 0.02em;
}

@media (max-width: 960px) {
    .community-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 36px 28px;
        gap: 28px;
    }
    .community-action-box {
        width: 100%;
        align-items: stretch;
    }
    .community-action-box .btn {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   20. Footer
   -------------------------------------------------------------------------- */
.site-footer {
    background: #06070a;
    border-top: 1px solid var(--card-border);
    padding-top: 60px;
    padding-bottom: 36px;
    margin-top: 0;
    position: relative;
    z-index: 1;
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.04);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr));
    gap: 32px;
    margin-bottom: 36px;
}

.footer-col-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.footer-tagline {
    font-size: 0.86rem;
    color: var(--text-dim);
    max-width: 300px;
    line-height: 1.55;
}

.footer-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: rgba(165, 180, 252, 0.04);
    border: 1px solid rgba(165, 180, 252, 0.16);
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    color: var(--accent-lavender-light);
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--opsec-emerald);
}

.footer-col-title {
    font-family: var(--font-sans);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-lavender-light);
    margin-bottom: 16px;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-links a {
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: color var(--transition-fast), transform var(--transition-fast);
    display: inline-flex;
    align-items: center;
}
.footer-links a:hover {
    color: var(--text-pure);
    transform: translateX(2px);
}
.footer-links a:focus-visible {
    outline: 2px solid var(--accent-lavender);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.76rem;
    color: var(--text-dim);
}

.footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.footer-bottom-links a {
    color: var(--text-dim);
    transition: color var(--transition-fast);
}
.footer-bottom-links a:hover {
    color: var(--accent-lavender-light);
}
.footer-bottom-links a:focus-visible {
    outline: 2px solid var(--accent-lavender);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   21. Toast Notification
   -------------------------------------------------------------------------- */
.copy-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    z-index: 10000;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    background: #14141c;
    border: 1px solid var(--border-highlight);
    border-radius: var(--radius-pill);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-pure);
    animation: toastPop 0.25s var(--ease-out) forwards;
}

@keyframes toastPop {
    from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(0.96); }
    to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* --------------------------------------------------------------------------
   22. Optimized Scroll Reveal Animations
   -------------------------------------------------------------------------- */
html.js-enabled [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

html.js-enabled [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* --------------------------------------------------------------------------
   23. Responsive Breakpoints (320px to 1440px Zero-Overflow Guarantee)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .site-nav,
    .nav-search-trigger {
        display: none;
    }
    .menu-toggle {
        display: flex;
    }
    .arch-diagram {
        flex-direction: column;
        align-items: stretch;
    }
    .arch-connector {
        transform: rotate(90deg);
        margin: 6px 0;
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .stat-card:not(:last-child)::after {
        display: none;
    }
    .stat-card {
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }
    .stat-card:nth-child(odd) {
        border-right: 1px solid rgba(255, 255, 255, 0.07);
    }
    .stat-card:last-child {
        grid-column: span 2;
        border-bottom: none;
    }
    .pricing-grid {
        grid-template-columns: 1fr;
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 960px) {
    .eco-product-stage,
    .eco-product-stage--opsec {
        grid-template-columns: 1fr;
        padding: 30px 24px;
        gap: 32px;
    }
    .eco-product-stage--opsec .eco-product-media {
        order: 2;
    }
    .eco-product-stage--opsec .eco-product-content {
        order: 1;
    }
    .arch-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
    .arch-telemetry-bar {
        width: 100%;
    }
    .arch-stages-grid {
        flex-direction: column;
        align-items: stretch;
    }
    .arch-stage-flow {
        transform: rotate(90deg);
        margin: 6px 0;
    }
    .arch-contrast-strip {
        grid-template-columns: 1fr;
    }
    .arch-contrast-divider {
        margin-inline: auto;
    }
}

@media (max-width: 860px) {
    .showcase-grid {
        grid-template-columns: 1fr;
    }
    .opsec-overview-grid {
        grid-template-columns: 1fr;
    }
    .community-banner {
        flex-direction: column;
        align-items: flex-start;
    }
    .community-btn-wrap {
        width: 100%;
        align-items: stretch;
    }
    .community-btn-wrap .btn {
        width: 100%;
    }
    .quickstart-nav {
        flex-direction: column;
    }
    .doc-tab-btn {
        justify-content: flex-start;
        border-bottom: none;
        border-left: 2px solid transparent;
    }
    .doc-tab-btn.is-active {
        border-left-color: var(--accent-lavender);
        border-bottom-color: transparent;
    }
}

@media (max-width: 768px) {
    .hero-actions {
        flex-direction: column;
        width: 100%;
    }
    .hero-actions .btn {
        width: 100%;
    }

    .plugin-explorer-header {
        flex-direction: column;
        align-items: stretch;
    }
    .explorer-search-wrap {
        width: 100%;
    }

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

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 640px) {
    .preview-header {
        flex-wrap: wrap;
    }
    .preview-title {
        order: 3;
        width: 100%;
        font-size: 0.72rem;
    }
    .showcase-header {
        flex-wrap: wrap;
    }
    .showcase-actions {
        flex-direction: column;
    }
    .showcase-actions .btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .container {
        width: calc(100% - 24px);
    }
    .stats-grid {
        grid-template-columns: 1fr;
    }
    .stat-card:nth-child(odd) {
        border-right: none;
    }
    .stat-card:last-child {
        grid-column: span 1;
        border-bottom: none;
    }
    .hero-title {
        font-size: 1.85rem;
        line-height: 1.16;
    }
    .hero-break {
        display: none;
    }
    .hero-subtitle {
        font-size: 0.95rem;
    }
    .showcase-body {
        padding: 22px 18px;
    }
    .showcase-img-crop {
        height: 140px;
    }
    .opsec-overview-grid {
        padding: 22px 16px;
        margin-bottom: 40px;
    }
    .opsec-overview-text h3 {
        font-size: 1.35rem;
    }
    .opsec-fitem {
        gap: 12px;
    }
    .code-block pre,
    .code-block code {
        max-width: 100%;
        overflow-x: auto;
    }
    .plugin-explorer {
        padding: 22px 16px;
    }
    .quickstart-content {
        padding: 22px 16px;
    }
    .community-banner {
        padding: 28px 20px;
    }
    .nav-vertical-divider,
    .brand-submark {
        display: none;
    }
    .nav-download-pill span {
        display: none;
    }
    .nav-download-pill {
        padding: 7px 10px;
    }
    .badge--top-right,
    .badge--bottom-left {
        position: static;
        margin: 8px;
        display: flex;
        font-size: 0.72rem;
    }
}


/* =========================================================================
   14. Solo Creator Section & Lanyard Live Profile Card
   ========================================================================= */
.creator-section {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
}

.creator-grid {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    margin-top: 36px;
}

/* Profile Card (Lanyard Glassmorphism) */
.creator-profile-card {
    background: linear-gradient(180deg, rgba(18, 21, 31, 0.9) 0%, rgba(11, 13, 20, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl, 24px);
    overflow: hidden;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 32px rgba(165, 180, 252, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.creator-profile-card:hover {
    transform: translateY(-4px);
    border-color: rgba(165, 180, 252, 0.35);
    box-shadow: 0 32px 72px rgba(0, 0, 0, 0.8), 0 0 44px rgba(165, 180, 252, 0.18), inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
}

.profile-card-banner {
    height: 96px;
    background: linear-gradient(135deg, rgba(165, 180, 252, 0.28) 0%, rgba(99, 102, 241, 0.32) 50%, rgba(168, 85, 247, 0.22) 100%);
    position: relative;
    padding: 12px 16px;
    display: flex;
    justify-content: flex-end;
    box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.08);
}

.profile-presence-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(10, 12, 18, 0.75);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #cbd5e1;
}

.profile-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
    flex-shrink: 0;
}

.profile-status-text {
    font-size: 0.75rem;
    color: #cbd5e1;
    font-weight: 500;
}

.profile-card-body {
    padding: 0 20px 22px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.profile-avatar-wrapper {
    position: relative;
    width: 84px;
    height: 84px;
    margin-top: -42px;
}

.profile-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3.5px solid #12151f;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    background: #1e293b;
    object-fit: cover;
    display: block;
}

.profile-status-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid #12151f;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #80848e;
    transition: background-color 0.25s ease;
}

.profile-status-badge.status-online {
    background: #23a55a;
    box-shadow: 0 0 10px rgba(35, 165, 90, 0.6);
}

.profile-status-badge.status-idle {
    background: #f0b232;
    box-shadow: 0 0 10px rgba(240, 178, 50, 0.6);
}

.profile-status-badge.status-dnd {
    background: #f23f43;
    box-shadow: 0 0 10px rgba(242, 63, 67, 0.6);
}

.profile-status-badge.status-offline {
    background: #80848e;
}

.profile-identity {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.profile-display-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.02em;
}

.profile-role-badge {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(165, 180, 252, 0.12);
    border: 1px solid rgba(165, 180, 252, 0.25);
    color: var(--accent-lavender-light);
    letter-spacing: 0.05em;
}

.profile-handle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted, #94a3b8);
    font-size: 0.84rem;
    flex-wrap: wrap;
}

.profile-username {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    color: #94a3b8;
}

.profile-role-title {
    font-size: 0.82rem;
    color: #cbd5e1;
    font-weight: 500;
}

.profile-bio-text {
    font-size: 0.82rem;
    line-height: 1.5;
    color: #94a3b8;
    margin: 4px 0 0;
}

.profile-dot-sep {
    opacity: 0.4;
}

/* Activity Card inside Profile */
.profile-activity-card {
    background: rgba(10, 13, 20, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.activity-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.activity-eyebrow {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
}

.activity-platforms {
    display: flex;
    align-items: center;
    gap: 6px;
}

.platform-icon {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    transition: all 0.2s ease;
}

.platform-icon.is-active {
    color: var(--accent-lavender-light);
    background: rgba(165, 180, 252, 0.14);
    border-color: rgba(165, 180, 252, 0.3);
}

.activity-status-text {
    font-size: 0.86rem;
    color: #e2e8f0;
    line-height: 1.45;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* Spotify Rich Card */
.spotify-live-card {
    display: flex;
    gap: 10px;
    align-items: center;
}

.spotify-live-art {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.spotify-live-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.spotify-song-title {
    font-size: 0.84rem;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spotify-song-artist {
    font-size: 0.76rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spotify-bar-track {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    margin-top: 4px;
}

.spotify-bar-fill {
    height: 100%;
    background: #1db954;
    border-radius: 2px;
    transition: width 1s linear;
}

.profile-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    width: 100%;
}

.profile-actions-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
}

.profile-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    font-size: 0.82rem;
    padding: 9px 12px;
    border-radius: var(--radius-md, 8px);
}

.profile-actions .btn--full {
    width: 100%;
}

/* Right: Manifesto Card */
.creator-manifesto {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.manifesto-card {
    background: rgba(18, 21, 31, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl, 24px);
    padding: 32px 36px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.manifesto-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-lavender-light);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}

.manifesto-title {
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
    font-weight: 800;
    line-height: 1.25;
    color: #ffffff;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
}

.manifesto-p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-muted, #94a3b8);
    margin: 0 0 14px;
}

.manifesto-p:last-child {
    margin-bottom: 0;
}

/* Integrated Telemetry Ribbon */
.creator-telemetry-ribbon {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: rgba(10, 13, 20, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    margin: 28px 0 24px;
    overflow: hidden;
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
}

.telemetry-cell {
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    transition: background-color var(--transition-fast);
}

.telemetry-cell:last-child {
    border-right: none;
}

.telemetry-cell:hover {
    background: rgba(255, 255, 255, 0.02);
}

.telemetry-num {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
    font-family: var(--font-mono);
    letter-spacing: -0.02em;
}

.telemetry-label {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text-pure);
    margin-top: 2px;
}

.telemetry-sub {
    font-size: 0.74rem;
    color: var(--text-dim);
    font-family: var(--font-sans);
}

.creator-skills-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.skills-label {
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.creator-skills-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
}

.skill-tag {
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: #cbd5e1;
    transition: all 0.15s ease;
}

.skill-tag:hover {
    background: rgba(165, 180, 252, 0.12);
    border-color: rgba(165, 180, 252, 0.3);
    color: var(--accent-lavender-light);
    transform: translateY(-1px);
}

@media (max-width: 900px) {
    .creator-grid {
        grid-template-columns: 1fr;
    }
    .creator-profile-card {
        max-width: 480px;
        margin: 0 auto;
        width: 100%;
    }
    .creator-telemetry-ribbon {
        grid-template-columns: repeat(2, 1fr);
    }
    .telemetry-cell:nth-child(2) {
        border-right: none;
    }
    .telemetry-cell:nth-child(-n+2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
}

@media (max-width: 600px) {
    .creator-telemetry-ribbon {
        grid-template-columns: 1fr;
    }
    .telemetry-cell {
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .telemetry-cell:last-child {
        border-bottom: none;
    }
    .manifesto-card {
        padding: 24px 20px;
    }
}


/* =========================================================================
   15. Comparative Table Section & Styles
   ========================================================================= */
.compare-section {
    position: relative;
    padding: 80px 0;
}

.compare-table-wrapper {
    margin-top: 36px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(56, 189, 248, 0.16);
    background: linear-gradient(180deg, rgba(12, 17, 28, 0.9) 0%, rgba(7, 10, 17, 0.95) 100%);
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.75), 0 0 40px -10px rgba(56, 189, 248, 0.07);
    position: relative;
}
.compare-table-wrapper:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: -1px;
}

.compare-mobile-tip {
    display: none;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 16px;
    font-size: 0.78rem;
    font-family: var(--font-sans);
    color: var(--text-dim, #64748b);
    letter-spacing: 0.04em;
}
.compare-mobile-tip span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.2);
    color: #7dd3fc;
    font-size: 0.8125rem;
}
@media (max-width: 900px) {
    .compare-mobile-tip {
        display: block;
    }
}

.compare-table {
    width: 100%;
    min-width: 820px;
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
    font-size: 0.88rem;
}

.compare-table th,
.compare-table td {
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: middle;
}

.compare-table tbody tr {
    transition: background-color var(--transition-fast);
}
.compare-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.018);
}
.compare-table tbody tr:hover .compare-val-fcord {
    background: rgba(56, 189, 248, 0.095);
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
    border-bottom: none;
}

.compare-table thead th {
    background: #080b12;
    font-size: 0.72rem;
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    border-bottom: 2px solid rgba(255, 255, 255, 0.08);
    padding-top: 20px;
    padding-bottom: 20px;
}

.compare-th-feature {
    width: 32%;
    min-width: 240px;
    color: #94a3b8 !important;
}

.compare-th-fcord {
    width: 26%;
    min-width: 200px;
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.15) 0%, rgba(56, 189, 248, 0.06) 100%) !important;
    border-left: 2px solid rgba(56, 189, 248, 0.4);
    border-right: 2px solid rgba(56, 189, 248, 0.4);
    border-top: 3px solid #38bdf8;
    box-shadow: inset 0 2px 12px rgba(56, 189, 248, 0.15);
}

.compare-th-other {
    width: 14%;
    min-width: 120px;
    color: #64748b !important;
}

.compare-col-header {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #38bdf8 !important;
    font-weight: 800;
    font-size: 0.88rem;
    letter-spacing: 0.03em;
    flex-wrap: wrap;
}

.compare-col-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.5));
}

.compare-badge-recommended {
    font-size: 0.65rem;
    background: rgba(56, 189, 248, 0.2);
    border: 1px solid rgba(56, 189, 248, 0.45);
    color: #7dd3fc;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    box-shadow: 0 0 10px -1px rgba(56, 189, 248, 0.4);
}

.compare-feature-cell strong {
    display: block;
    color: #f1f5f9;
    font-size: 0.92rem;
    font-weight: 600;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}

.compare-feature-cell small {
    display: block;
    color: #94a3b8;
    font-size: 0.8125rem;
    line-height: 1.45;
    font-weight: 400;
}

.compare-val-fcord {
    background: rgba(56, 189, 248, 0.04);
    border-left: 2px solid rgba(56, 189, 248, 0.3);
    border-right: 2px solid rgba(56, 189, 248, 0.3);
    font-weight: 600;
    color: #f0f9ff;
    transition: background-color var(--transition-fast);
}

.cmp-badge-yes {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #34d399;
    font-weight: 600;
    font-size: 0.86rem;
    text-shadow: 0 0 10px rgba(52, 211, 153, 0.3);
}

.cmp-badge-no {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #475569;
    font-weight: 400;
    font-size: 0.84rem;
}

.cmp-badge-neutral {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #94a3b8;
    font-weight: 500;
    font-size: 0.84rem;
}

.cmp-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    stroke-width: 2.2;
    fill: none;
    stroke: currentColor;
}

.cmp-text-highlight {
    color: #38bdf8;
    font-weight: 700;
    display: block;
    font-size: 0.95rem;
    text-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
}

.cmp-sub-info {
    display: block;
    font-size: 0.78rem;
    color: #94a3b8;
    font-weight: 400;
    margin-top: 2px;
}

.compare-val-other {
    color: #64748b;
    font-size: 0.84rem;
}

.compare-footer-notice {
    margin-top: 24px;
    background: rgba(165, 180, 252, 0.04);
    border: 1px solid rgba(165, 180, 252, 0.16);
    border-radius: var(--radius-lg, 14px);
    padding: 16px 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
}

.compare-notice-icon {
    flex-shrink: 0;
    color: var(--accent-lavender-light);
    margin-top: 2px;
}

.compare-notice-text {
    font-size: 0.84rem;
    line-height: 1.55;
    color: #cbd5e1;
}

.compare-notice-text strong {
    color: var(--accent-lavender-light);
}

.compare-notice-text code {
    background: rgba(165, 180, 252, 0.08);
    border: 1px solid rgba(165, 180, 252, 0.16);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.84em;
    color: var(--accent-ice);
}

.compare-notice-icon svg {
    color: var(--accent-lavender-light);
}

/* =========================================================================
   16. Creator Activity Strip (Live GitHub Commits Feed)
   ========================================================================= */
.creator-activity-strip {
    margin-top: 36px;
    background: rgba(14, 17, 26, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl, 20px);
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.activity-strip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.activity-strip-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.activity-strip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px #22c55e;
    animation: profileLivePulse 2s infinite;
}

.activity-strip-title {
    font-size: 0.86rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.activity-strip-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-sans);
    font-size: 0.74rem;
    color: var(--accent-lavender-light);
    text-decoration: none;
    transition: color 0.15s ease;
}

.activity-strip-link:hover {
    color: #7dd3fc;
    text-decoration: underline;
}

.activity-commits-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.activity-commit-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 0.84rem;
    transition: background 0.15s ease;
}

.activity-commit-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.commit-sha {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--accent-lavender-light);
    background: rgba(165, 180, 252, 0.12);
    padding: 2px 7px;
    border-radius: 4px;
    flex-shrink: 0;
}

.commit-msg {
    color: #e2e8f0;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.83rem;
}

.commit-time {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    color: var(--text-dim);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .compare-table-wrapper {
        margin-left: -16px;
        margin-right: -16px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    .commit-time {
        display: none;
    }
}

@media (max-width: 480px) {
    .compare-table-wrapper {
        margin-left: -12px;
        margin-right: -12px;
    }
}


/* Text Gradient Utilities for Metrics */
.text-gradient-purple {
    background: linear-gradient(135deg, #ffffff 0%, #dbe4ff 55%, #a5b4fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.text-gradient-cyan {
    background: linear-gradient(135deg, #ffffff 0%, #dbe4ff 55%, #a5b4fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.text-gradient-blue {
    background: linear-gradient(135deg, #ffffff 0%, #dbe4ff 55%, #a5b4fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.text-gradient-green {
    background: linear-gradient(135deg, #ffffff 0%, #dbe4ff 55%, #a5b4fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* --------------------------------------------------------------------------
   SmartScreen & Windows 11 Smart App Control (SAC) Guide
   -------------------------------------------------------------------------- */
.hero-security-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    margin: 14px 0 22px;
    border-radius: var(--radius-full, 9999px);
    background: rgba(165, 180, 252, 0.06);
    border: 1px solid rgba(165, 180, 252, 0.2);
    font-size: 0.82rem;
    color: #cbd5e1;
    line-height: 1.45;
    text-align: left;
}
.hero-security-pill strong {
    color: #ffffff;
}
.hero-security-pill svg {
    flex-shrink: 0;
}

.sec-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
}
.security-card {
    background: linear-gradient(180deg, rgba(16, 20, 32, 0.88) 0%, rgba(10, 13, 22, 0.96) 100%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-2xl);
    padding: 36px 40px;
    box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.8), inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
    width: 100%;
    text-align: left;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    margin-bottom: 36px;
    position: relative;
    overflow: hidden;
}

.security-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.sec-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.015em;
}
.sec-badge svg {
    color: #38bdf8;
    flex-shrink: 0;
}

.sec-license {
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-dim);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    letter-spacing: 0.02em;
}

.security-card--smartscreen {
    margin-top: 0;
    border-color: rgba(56, 189, 248, 0.16);
    box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.8), 0 0 40px -10px rgba(56, 189, 248, 0.06), inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
}

.smartscreen-alert-banner {
    display: flex;
    gap: 16px;
    padding: 20px 24px;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.06) 0%, rgba(14, 18, 28, 0.8) 100%);
    border: 1px solid rgba(56, 189, 248, 0.18);
    border-left: 3px solid #38bdf8;
    margin-bottom: 24px;
    box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.5);
}
.alert-icon-wrap {
    flex-shrink: 0;
    margin-top: 2px;
    color: #38bdf8;
}
.alert-text strong {
    font-size: 0.98rem;
    color: #ffffff;
    display: block;
    margin-bottom: 6px;
}
.alert-text p {
    font-size: 0.88rem;
    color: #cbd5e1;
    line-height: 1.6;
    margin: 0 0 10px;
}
.alert-text p:last-child {
    margin-bottom: 0;
}
.alert-text code {
    font-family: var(--font-mono);
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
    color: #7dd3fc;
}

.smartscreen-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 768px) {
    .smartscreen-grid {
        grid-template-columns: 1fr;
    }
}
.smartscreen-box {
    background: linear-gradient(180deg, rgba(14, 18, 28, 0.85) 0%, rgba(9, 12, 20, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    padding: 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.6), inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.smartscreen-box:hover {
    border-color: rgba(56, 189, 248, 0.25);
    transform: translateY(-2px);
}

.status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    margin-right: 7px;
    vertical-align: middle;
}
.status-dot--emerald {
    background: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.7);
}
.status-dot--cyan {
    background: #38bdf8;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.7);
}
.profile-dot-sep {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--text-dim);
    margin: 0 6px;
    vertical-align: middle;
}
.box-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.box-tag {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: rgba(165, 180, 252, 0.12);
    border: 1px solid rgba(165, 180, 252, 0.25);
    color: var(--accent-lavender-light);
}
.box-tag--purple {
    background: var(--accent-surface);
    border-color: var(--accent-border);
    color: var(--accent-lavender-light);
}
.box-header h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}
.smartscreen-box p {
    font-size: 0.84rem;
    color: #94a3b8;
    margin: 0;
    line-height: 1.5;
}
.step-guide {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}
.step-line {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.83rem;
    color: #cbd5e1;
    line-height: 1.5;
}
.step-line code {
    font-family: var(--font-mono);
    background: rgba(255, 255, 255, 0.08);
    padding: 1px 5px;
    border-radius: 3px;
    color: var(--accent-lavender-light);
}
.step-badge {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(165, 180, 252, 0.15);
    border: 1px solid rgba(165, 180, 252, 0.3);
    color: var(--accent-lavender-light);
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

/* Completion of the existing polish pass: intrinsic layout and disclosure states. */
.pricing-perks li > svg { flex-shrink: 0; margin-top: 3px; }
.pricing-perks li > span { min-width: 0; }
.plugin-footer > span { overflow-wrap: anywhere; }
.plugin-tag--green, .plugin-tag--blue, .plugin-tag--purple,
.plugin-tag--amber, .plugin-tag--cyan {
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--card-border);
}
.hero-section .security-card { text-align: left; }
.faq-question:focus-visible { outline: 2px solid var(--accent-lavender); outline-offset: -4px; }
@supports (interpolate-size: allow-keywords) {
    .faq-item { interpolate-size: allow-keywords; }
    .faq-item::details-content {
        height: 0;
        overflow: clip;
        transition: height var(--transition-base), content-visibility var(--transition-base) allow-discrete;
    }
    .faq-item[open]::details-content { height: auto; }
}
@media (max-width: 768px) {
    .section, .compare-section, .creator-section { padding-block: 56px; }
    .plugin-explorer { margin-bottom: 0; }
    .security-card { padding: 24px 20px; }
    .security-card-header { flex-wrap: wrap; }
    .smartscreen-alert-banner { padding: 18px 16px; gap: 12px; }
    .footer-grid { gap: 28px; }
    .footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
    .footer-links { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    .faq-item::details-content { transition: none; }
}

/* SmartScreen Accessible Heading Hierarchy */
.sec-badge-title {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    margin: 0;
    line-height: inherit;
    display: inline;
}
.box-header h3,
.box-header h4,
.box-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
}

/* Compact Code Block */
.code-block--compact {
    margin-bottom: 0;
}
.code-block--compact pre {
    padding: 12px 16px;
    font-size: 0.82rem;
}

/* Pricing Card Footer */
.pricing-card-footer {
    margin-top: 24px;
}

/* Mobile Drawer Pinned Footer */
.mobile-drawer-footer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

/* Section Header & Badges */
.section-header { margin-bottom: 36px; }
.badge,
.badge--cyan,
.section-header > .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    margin-bottom: 12px;
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-pill);
    background: var(--accent-surface);
    color: var(--accent-lavender-light);
    font-size: 0.8125rem;
    font-weight: 500;
}

/* Plugin Metadata & Footer Columns */
.plugin-meta {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--text-dim);
}
.footer-col {
    display: flex;
    flex-direction: column;
}

.plugin-switch input:checked + .switch-slider::before { background-color: var(--bg-base); }
.menu-toggle, .mobile-drawer-close { min-width: 44px; min-height: 44px; }
.mobile-link { min-height: 44px; }