/* 
        ══════════════════════════════════════════════════════════════════════════
        CSS ARCHITECTURE: MODULAR VARIABLE SYSTEM
        ══════════════════════════════════════════════════════════════════════════
        Change any variable here to globally update the entire site.
        This is your "control panel" for the website's appearance.
        */
        
        :root {
            /* ═══════════ BROWSER-UI COLOR SCHEME ═══════════ */
            /* The site is dark by default (--bg-dark below, and <meta name="theme-color">).
               Without color-scheme the browser still paints its OWN chrome in light mode on
               top of it: form-control widgets, autofill backgrounds and date pickers.
               accent-color themes the 16 checkbox/radio inputs on contact.html, which
               otherwise render in the browser's light-mode default on a dark form.
               (Firefox scrollbars are already handled by scrollbar-color on html.) */
            color-scheme: dark;
            accent-color: var(--accent-primary);

            /* ═══════════ COLOR SYSTEM ═══════════ */
            /* Primary Background Colors */
            --bg-void: #101116;           /* Deepest background */
            --bg-darker: #101116;         /* Alternating section bands — see note below */
            --bg-dark: #16171B;           /* Main background */
            --bg-medium: #1C1D22;         /* Card backgrounds */
            --bg-light: #24252B;          /* Elevated elements */
            --bg-hover: #2D2E35;          /* Hover states */

            /* NOTE (2026-08-02): --bg-darker was referenced 39 times across 9 pages
               (contact, about, services/*, terms, privacy) but had never been defined,
               so every "alternating band" section silently rendered transparent and the
               pages read as one flat slab. Defining it here restores the intended
               rhythm in one place. To revert the look, delete this line — nothing
               breaks, the bands simply go flat again. */
            
            /* Accent Colors - The "Cyber" Palette */
            --accent-primary: #6E8BFF;    /* Main green - success, primary actions */
            --accent-secondary: #B4B7BD;  /* Cyan - links, info */
            --accent-tertiary: #8FA8FF;   /* Magenta - warnings, highlights */
            --accent-warning: #E0A82E;    /* Orange - caution */
            --accent-danger: #E63950;     /* Red - errors, critical */
            --accent-purple: #8A8D93;     /* Purple - special elements */
            
            /* Text Colors */
            --text-bright: #F4F3EF;       /* Headlines, important text */
            --text-primary: #DCDBD5;      /* Main body text */
            --text-secondary: #A9ABB0;    /* Subdued text */
            --text-muted: #6B6D74;        /* Very subdued */
            --text-code: #9DB2FF;         /* Code/terminal text */
            
            /* Gradient Definitions */
            --gradient-cyber: linear-gradient(135deg, #3D5AC8 0%, #6E8BFF 50%, #9FD8E8 100%);
            --gradient-dark: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-void) 100%);
            --gradient-card: linear-gradient(145deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
            --gradient-glow: radial-gradient(circle at 50% 0%, rgba(110,139,255,0.14) 0%, transparent 50%);
            
            /* Border Colors */
            --border-subtle: rgba(255,255,255,0.05);
            --border-medium: rgba(255,255,255,0.1);
            --border-accent: rgba(110,139,255,0.35);

            /* ═══════════ BACKGROUND READABILITY (admin-adjustable knobs) ═══════════ */
            /* The centred tsuba emblem used to render as a bright grey disc that
               washed out any text scrolling over it. These variables control how
               strongly the emblem reads and how much the centre is deepened behind
               text, so readability can be tuned live (see admin appearance settings). */
            --hk-emblem-opacity: 0.15;       /* tsuba disc brightness (peak) — lower = darker centre = more readable text */
            --hk-emblem-opacity-min: 0.12;   /* breathing trough */
            --hk-scrim: 0.55;                /* central readability scrim strength 0..1 (0 = off) */
            --hk-text-halo: 0.70;            /* dark halo behind text that sits over the emblem */
            --hk-text-glow: 0;               /* soft light glow ("shine") on hero text 0..0.6 (0 = off) */
            --hk-inscription-opacity: 0.10;  /* 不動心 inscription at the foot of the background 0..0.45.
                                                Lowered from a hardcoded 0.42 on 2026-08-05 (owner: it should
                                                not be easily readable). 0 = fully hidden. Admin-adjustable. */
            /* Text brightness is applied by /api/appearance.php, which overrides
               --text-bright / --text-primary / --text-secondary with computed values.
               The base tokens below remain the fallback when that endpoint is absent. */

            /* ═══════════ TYPOGRAPHY SYSTEM ═══════════ */
            --font-display: 'Outfit', sans-serif;      /* Headlines */
            --font-body: 'Space Grotesk', sans-serif;  /* Body text */
            --font-mono: 'JetBrains Mono', monospace;  /* Code/terminal */
            
            /* Font Sizes - Fluid Typography Scale */
            --text-xs: clamp(0.7rem, 0.8vw, 0.75rem);
            --text-sm: clamp(0.8rem, 0.9vw, 0.875rem);
            --text-base: clamp(0.9rem, 1vw, 1rem);
            --text-lg: clamp(1rem, 1.2vw, 1.125rem);
            --text-xl: clamp(1.1rem, 1.5vw, 1.25rem);
            --text-2xl: clamp(1.3rem, 2vw, 1.5rem);
            --text-3xl: clamp(1.5rem, 2.5vw, 1.875rem);
            --text-4xl: clamp(1.8rem, 3vw, 2.25rem);
            --text-5xl: clamp(2.2rem, 4vw, 3rem);
            --text-6xl: clamp(2.8rem, 5vw, 3.75rem);
            --text-hero: clamp(3rem, 8vw, 6rem);
            
            /* ═══════════ SPACING SYSTEM ═══════════ */
            --space-xs: 0.25rem;
            --space-sm: 0.5rem;
            --space-md: 1rem;
            --space-lg: 1.5rem;
            --space-xl: 2rem;
            --space-2xl: 3rem;
            --space-3xl: 4rem;
            --space-4xl: 6rem;
            --space-5xl: 8rem;
            
            /* ═══════════ LAYOUT SYSTEM ═══════════ */
            --container-max: 1400px;
            --container-narrow: 900px;
            --sidebar-width: 280px;
            --header-height: 70px;
            
            /* ═══════════ EFFECTS ═══════════ */
            --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
            --shadow-md: 0 4px 20px rgba(0,0,0,0.4);
            --shadow-lg: 0 8px 40px rgba(0,0,0,0.5);
            /* --shadow-xl added 2026-08-02: referenced by the hero visual on all four
               service detail pages but never defined, so those heroes rendered flat.
               Continues the sm/md/lg progression. */
            --shadow-xl: 0 16px 60px rgba(0,0,0,0.6);
            --shadow-glow: 0 0 30px rgba(110,139,255,0.2);
            --shadow-glow-strong: 0 0 60px rgba(110,139,255,0.3);
            
            /* Border Radius */
            --radius-sm: 4px;
            --radius-md: 8px;
            --radius-lg: 12px;
            --radius-xl: 16px;
            --radius-full: 9999px;
            
            /* Transitions */
            --transition-fast: 0.15s ease;
            --transition-base: 0.25s ease;
            --transition-slow: 0.4s ease;
            --transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            
            /* Z-Index Scale */
            --z-base: 1;
            --z-dropdown: 100;
            --z-sticky: 200;
            --z-modal: 300;
            --z-tooltip: 400;
            --z-max: 9999;
        }
        
        /* 
        ══════════════════════════════════════════════════════════════════════════
        RESET & BASE STYLES
        ══════════════════════════════════════════════════════════════════════════
        */
        
        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        html {
            scroll-behavior: smooth;
            scrollbar-width: thin;
            scrollbar-color: var(--accent-primary) var(--bg-dark);
        }
        
        body {
            font-family: var(--font-body);
            font-size: var(--text-base);
            line-height: 1.7;
            color: var(--text-primary);
            background: var(--bg-dark);
            min-height: 100vh;
            overflow-x: hidden;
        }
        
        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: var(--bg-dark);
        }
        
        ::-webkit-scrollbar-thumb {
            background: var(--bg-light);
            border-radius: var(--radius-full);
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: var(--accent-primary);
        }
        
        /* Selection */
        ::selection {
            background: var(--accent-primary);
            color: var(--bg-dark);
        }
        
        /* Links Base */
        a {
            color: var(--accent-secondary);
            text-decoration: none;
            transition: color var(--transition-fast);
        }
        
        a:hover {
            color: var(--accent-primary);
        }
        
        /* Images */
        img {
            max-width: 100%;
            height: auto;
            display: block;
        }
        
        /* 
        ══════════════════════════════════════════════════════════════════════════
        ANIMATED BACKGROUND - CYBER GRID
        ══════════════════════════════════════════════════════════════════════════
        */
        
        .cyber-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
            background: radial-gradient(ellipse at 50% 40%, #17181d 0%, #101116 55%, #0b0c10 100%);
        }

        /* Central readability scrim: deepens the middle of the composition so text
           scrolling over the emblem keeps contrast. Sits ABOVE the emblem layers
           (z 1-3) but the whole .cyber-background is z-index:-1, so it stays behind
           all page content. Strength is admin-adjustable via --hk-scrim. */
        .cyber-background::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 4;
            pointer-events: none;
            background: radial-gradient(60vmin 60vmin at 50% 45%,
                rgba(11,12,16, var(--hk-scrim)) 0%,
                rgba(11,12,16, calc(var(--hk-scrim) * 0.5)) 42%,
                transparent 68%);
        }

        .cyber-grid {
            position: absolute;
            z-index: 2;
            top: 50%;
            left: 50%;
            width: 88vmin;
            height: 88vmin;
            margin: -44vmin 0 0 -44vmin;
            background: url('/emblem-orbits.svg') center / contain no-repeat;
            transform-origin: center center;
            animation: hk-orbit 320s linear infinite;
            will-change: transform;
        }
        
        @keyframes gridMove {
            0% { transform: perspective(500px) rotateX(60deg) translateY(0); }
            100% { transform: perspective(500px) rotateX(60deg) translateY(50px); }
        }
        
        /* .cyber-glow (center glow light) removed 2026-07-18 per request — backup: deploy/background-backup-2026-07-18/ */
        
        /* Floating particles effect */
        .particles {
            position: absolute;
            z-index: 1;
            inset: -6%;
            background: url('/emblem-stars.svg') center / cover no-repeat;
            opacity: 0.75;
            animation: hk-drift 150s ease-in-out infinite alternate;
        }
        
        .particle { display: none; }
        
        @keyframes float {
            0%, 100% { transform: translateY(100vh) scale(0); opacity: 0; }
            10% { opacity: 0.5; }
            90% { opacity: 0.5; }
            100% { transform: translateY(-100vh) scale(1); opacity: 0; }
        }
        
        /* 
        ══════════════════════════════════════════════════════════════════════════
        HEADER & NAVIGATION
        ══════════════════════════════════════════════════════════════════════════
        */
        
        .site-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: var(--header-height);
            background: rgba(10, 10, 15, 0.9);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--border-subtle);
            z-index: var(--z-sticky);
            transition: all var(--transition-base);
        }
        
        .site-header.scrolled {
            background: rgba(10, 10, 15, 0.98);
            box-shadow: var(--shadow-lg);
        }
        
        .header-container {
            max-width: var(--container-max);
            height: 100%;
            margin: 0 auto;
            padding: 0 var(--space-xl);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        /* Logo */
        .logo {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            font-family: var(--font-display);
            font-size: var(--text-2xl);
            font-weight: 700;
            color: var(--text-bright);
            text-decoration: none;
        }
        
        .logo-icon {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--gradient-cyber);
            border-radius: var(--radius-md);
            font-size: var(--text-xl);
        }
        
        .logo-text {
            background: var(--gradient-cyber);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        /* Main Navigation */
        .main-nav {
            display: flex;
            align-items: center;
            gap: var(--space-xs);
        }
        
        .nav-item {
            position: relative;
        }
        
        .nav-link {
            display: flex;
            align-items: center;
            gap: var(--space-xs);
            padding: var(--space-sm) var(--space-md);
            color: var(--text-secondary);
            font-weight: 500;
            border-radius: var(--radius-md);
            transition: all var(--transition-fast);
        }
        
        .nav-link:hover {
            color: var(--text-bright);
            background: var(--bg-hover);
        }
        
        .nav-link.active {
            color: var(--accent-primary);
            background: rgba(110,139,255,0.1);
        }
        
        .nav-arrow {
            transition: transform var(--transition-fast);
        }
        
        .nav-item:hover .nav-arrow {
            transform: rotate(180deg);
        }
        
        /* Dropdown Menus */
        .nav-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            min-width: 280px;
            padding: var(--space-sm);
            background: var(--bg-medium);
            border: 1px solid var(--border-medium);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-lg);
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: all var(--transition-fast);
        }
        
        .nav-item:hover .nav-dropdown {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        
        .dropdown-item {
            display: flex;
            align-items: center;
            gap: var(--space-md);
            padding: var(--space-md);
            color: var(--text-secondary);
            border-radius: var(--radius-md);
            transition: all var(--transition-fast);
        }
        
        .dropdown-item:hover {
            background: var(--bg-hover);
            color: var(--text-bright);
        }
        
        .dropdown-icon {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg-light);
            border-radius: var(--radius-md);
            font-size: var(--text-lg);
        }
        
        .dropdown-content {
            flex: 1;
        }
        
        .dropdown-title {
            font-weight: 600;
            color: var(--text-bright);
            margin-bottom: 2px;
        }
        
        .dropdown-desc {
            font-size: var(--text-sm);
            color: var(--text-muted);
        }
        
        /* Mega Menu for Categories */
        .mega-menu {
            position: fixed;
            top: var(--header-height);
            left: 0;
            right: 0;
            background: var(--bg-medium);
            border-bottom: 1px solid var(--border-medium);
            padding: var(--space-2xl);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-20px);
            transition: all var(--transition-base);
        }
        
        .nav-item.has-mega:hover .mega-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        
        .mega-container {
            max-width: var(--container-max);
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: var(--space-2xl);
        }
        
        .mega-column h4 {
            font-family: var(--font-display);
            font-size: var(--text-sm);
            font-weight: 700;
            color: var(--accent-primary);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: var(--space-md);
            padding-bottom: var(--space-sm);
            border-bottom: 1px solid var(--border-subtle);
        }
        
        .mega-link {
            display: block;
            padding: var(--space-sm) 0;
            color: var(--text-secondary);
            font-size: var(--text-sm);
            transition: all var(--transition-fast);
        }
        
        .mega-link:hover {
            color: var(--accent-primary);
            padding-left: var(--space-sm);
        }
        
        /* Header Actions */
        .header-actions {
            display: flex;
            align-items: center;
            gap: var(--space-md);
        }
        
        /* ─────────────────────────────────────────────────────────────────
           MEMBER LINK — added 2026-09-07 with the member system.
           
           A TEXT LINK, deliberately not a second button. Two primary buttons
           side by side compete and both lose weight, and the button beside it
           ("View Services") is the revenue path. Membership is free and
           currently grants only an account, so it gets visibility without
           displacing the commercial call to action.
           
           It inherits the same focus ring as every other interactive element
           (the site-wide :focus-visible rule added for WCAG 2.4.7 in G1).
           ───────────────────────────────────────────────────────────────── */
        .header-join {
            color: var(--text-secondary);
            text-decoration: none;
            font-size: var(--text-sm);
            font-weight: 600;
            white-space: nowrap;
            padding: var(--space-xs) 0;
            transition: color var(--transition-fast);
        }
        
        .header-join:hover {
            color: var(--accent-primary);
        }
        
        /* Search Button */
        .search-trigger {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: 1px solid var(--border-medium);
            border-radius: var(--radius-md);
            color: var(--text-secondary);
            cursor: pointer;
            transition: all var(--transition-fast);
        }
        
        .search-trigger:hover {
            border-color: var(--accent-primary);
            color: var(--accent-primary);
            background: rgba(110,139,255,0.1);
        }
        
        /* Theme Toggle */
        .theme-toggle {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: 1px solid var(--border-medium);
            border-radius: var(--radius-md);
            color: var(--text-secondary);
            cursor: pointer;
            transition: all var(--transition-fast);
        }
        
        .theme-toggle:hover {
            border-color: var(--accent-secondary);
            color: var(--accent-secondary);
            background: rgba(180,183,189,0.1);
        }
        
        /* CTA Button */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-sm);
            padding: var(--space-sm) var(--space-lg);
            font-family: var(--font-body);
            font-size: var(--text-sm);
            font-weight: 600;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all var(--transition-fast);
            border: none;
        }
        
        .btn-primary {
            background: var(--accent-primary);
            color: var(--bg-dark);
        }
        
        .btn-primary:hover {
             background: var(--text-bright);
             box-shadow: var(--shadow-glow);
             transform: translateY(-2px);
             color: var(--bg-dark);
        }

        .btn-cyan:hover {
            color: var(--bg-dark);
        }
        .btn-blue:hover {
            color: var(--bg-dark);
        }
        .btn-gold:hover {
            color: var(--bg-dark);
        }
        .btn-purple:hover {
            color: var(--bg-dark);
        }
        .btn-secondary {
            background: transparent;
            color: var(--text-primary);
            border: 1px solid var(--border-medium);
        }
        
        .btn-secondary:hover {
            border-color: var(--accent-primary);
            color: var(--accent-primary);
        }
        
        /* `.btn-lg` is an alias for `.btn-large`, added 2026-08-03.
           Reason: 32 CTA buttons across 8 files (index.html, about.html, all four
           services pages, and the tutorial funnel CTA in js/tutorials-components.js)
           were written with `btn-lg`, which was never defined — so every one of them
           silently rendered at default size. Defining the alias is a one-rule fix
           that makes the existing markup do what its author intended; renaming 32
           call sites would touch eight deployed files for no functional gain. */
        .btn-large,
        .btn-lg {
            padding: var(--space-md) var(--space-xl);
            font-size: var(--text-base);
        }

        /* Mobile Menu Toggle */
        .mobile-menu-toggle {
            display: none;
            width: 40px;
            height: 40px;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 5px;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 0;
        }
        
        .mobile-menu-toggle span {
            display: block;
            width: 24px;
            height: 2px;
            background: var(--text-primary);
            transition: all var(--transition-fast);
        }
        
        /*
        ══════════════════════════════════════════════════════════════════════════
        SEARCH MODAL
        ══════════════════════════════════════════════════════════════════════════
        */

        .search-modal {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.8);
            backdrop-filter: blur(10px);
            z-index: var(--z-modal);
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding-top: 12vh;
            opacity: 0;
            visibility: hidden;
            transition: all var(--transition-base);
        }

        .search-modal.active {
            opacity: 1;
            visibility: visible;
        }

        .search-container {
            width: 100%;
            max-width: 640px;
            margin: 0 var(--space-xl);
            background: var(--bg-medium);
            border: 1px solid var(--border-medium);
            border-radius: var(--radius-xl);
            overflow: hidden;
            transform: translateY(-20px) scale(0.95);
            transition: all var(--transition-base);
            box-shadow: 0 25px 60px rgba(0,0,0,0.5);
        }

        .search-modal.active .search-container {
            transform: translateY(0) scale(1);
        }

        .search-input-wrapper {
            display: flex;
            align-items: center;
            padding: var(--space-md) var(--space-lg);
            border-bottom: 1px solid var(--border-subtle);
            gap: var(--space-sm);
        }

        .search-icon {
            color: var(--text-muted);
            flex-shrink: 0;
        }

        .search-input {
            flex: 1;
            background: transparent;
            border: none;
            outline: none;
            font-family: var(--font-body);
            font-size: var(--text-lg);
            color: var(--text-bright);
            min-width: 0;
        }

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

        .search-kbd {
            padding: 2px 8px;
            background: var(--bg-light);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
            font-family: var(--font-mono);
            font-size: var(--text-xs);
            color: var(--text-muted);
            flex-shrink: 0;
            line-height: 1.6;
        }

        .search-results {
            max-height: 60vh;
            overflow-y: auto;
            padding: var(--space-sm);
            scrollbar-width: thin;
            scrollbar-color: var(--border-medium) transparent;
        }

        .search-results::-webkit-scrollbar {
            width: 6px;
        }
        .search-results::-webkit-scrollbar-track {
            background: transparent;
        }
        .search-results::-webkit-scrollbar-thumb {
            background: var(--border-medium);
            border-radius: 3px;
        }

        /* Results header (count) */
        .search-results-header {
            padding: var(--space-xs) var(--space-md);
            margin-bottom: var(--space-xs);
        }
        .search-results-count {
            font-size: var(--text-xs);
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        /* Result groups */
        .search-group {
            margin-bottom: var(--space-sm);
        }
        .search-group-header {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            padding: var(--space-xs) var(--space-md);
            margin-bottom: 2px;
        }
        .search-group-icon {
            color: var(--accent-primary);
            display: flex;
            align-items: center;
        }
        .search-group-label {
            font-size: var(--text-xs);
            font-weight: 600;
            color: var(--accent-primary);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        .search-group-count {
            font-size: var(--text-xs);
            color: var(--text-muted);
            margin-left: auto;
        }
        .search-group-more {
            padding: var(--space-xs) var(--space-md);
            font-size: var(--text-xs);
            color: var(--text-muted);
            text-align: center;
            font-style: italic;
        }

        /* Individual result items */
        .search-result-item {
            display: flex;
            align-items: flex-start;
            gap: var(--space-md);
            padding: var(--space-sm) var(--space-md);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all var(--transition-fast);
            text-decoration: none;
            color: inherit;
        }

        .search-result-item:hover,
        .search-result-item.search-result-selected {
            background: var(--bg-hover);
        }
        .search-result-item.search-result-selected {
            outline: 1px solid var(--accent-primary);
            outline-offset: -1px;
        }

        .search-result-icon {
            flex-shrink: 0;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            background: var(--bg-light);
            border-radius: var(--radius-md);
            margin-top: 2px;
        }
        .search-result-body {
            flex: 1;
            min-width: 0;
        }
        .search-result-title {
            font-size: var(--text-sm);
            font-weight: 600;
            color: var(--text-bright);
            line-height: 1.3;
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            flex-wrap: wrap;
        }
        .search-result-desc {
            font-size: var(--text-xs);
            color: var(--text-secondary);
            line-height: 1.4;
            margin-top: 2px;
        }
        .search-result-meta {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            margin-top: 4px;
            flex-wrap: wrap;
        }
        .search-result-category,
        .search-result-subcategory {
            font-size: 0.65rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .search-result-subcategory::before {
            content: ">";
            margin-right: var(--space-xs);
            opacity: 0.5;
        }
        .search-result-arrow {
            flex-shrink: 0;
            color: var(--text-muted);
            opacity: 0;
            transition: opacity var(--transition-fast);
            margin-top: 6px;
        }
        .search-result-item:hover .search-result-arrow,
        .search-result-item.search-result-selected .search-result-arrow {
            opacity: 1;
        }

        /* Difficulty badges in results */
        .search-difficulty {
            font-size: 0.6rem;
            padding: 1px 6px;
            border-radius: 8px;
            font-weight: 600;
            text-transform: capitalize;
        }
        .search-difficulty-beginner { background: rgba(74,222,128,0.15); color: #4ade80; }
        .search-difficulty-easy     { background: rgba(96,165,250,0.15); color: #60a5fa; }
        .search-difficulty-medium   { background: rgba(251,191,36,0.15); color: #fbbf24; }
        .search-difficulty-hard     { background: rgba(249,115,22,0.15); color: #f97316; }
        .search-difficulty-advanced { background: rgba(168,85,247,0.15); color: #a855f7; }
        .search-difficulty-expert   { background: rgba(239,68,68,0.15);  color: #ef4444; }

        /* Coming soon badge */
        .search-badge-soon {
            font-size: 0.6rem;
            padding: 1px 6px;
            border-radius: 8px;
            background: rgba(255,255,255,0.08);
            color: var(--text-muted);
            font-weight: 500;
        }

        /* Highlighted match text */
        .search-results mark {
            background: rgba(110,139,255,0.2);
            color: var(--accent-primary);
            border-radius: 2px;
            padding: 0 1px;
        }

        /* No results state */
        .search-no-results {
            text-align: center;
            padding: var(--space-xl) var(--space-md);
        }
        .search-no-results-icon {
            margin-bottom: var(--space-md);
            color: var(--text-muted);
        }
        .search-no-results-text {
            font-size: var(--text-sm);
            color: var(--text-secondary);
            margin-bottom: var(--space-xs);
        }
        .search-no-results-hint {
            font-size: var(--text-xs);
            color: var(--text-muted);
        }

        /* Initial state: recent searches + quick links */
        .search-section {
            margin-bottom: var(--space-sm);
        }
        .search-section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--space-xs) var(--space-md);
            font-size: var(--text-xs);
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        .search-clear-recent {
            background: none;
            border: none;
            font-size: var(--text-xs);
            color: var(--text-muted);
            cursor: pointer;
            padding: 2px 6px;
            border-radius: var(--radius-sm);
            transition: color var(--transition-fast);
        }
        .search-clear-recent:hover {
            color: var(--accent-primary);
        }
        .search-recent-item {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            padding: var(--space-xs) var(--space-md);
            font-size: var(--text-sm);
            color: var(--text-secondary);
            cursor: pointer;
            border-radius: var(--radius-md);
            transition: all var(--transition-fast);
        }
        .search-recent-item:hover {
            background: var(--bg-hover);
            color: var(--text-bright);
        }
        .search-quick-link {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            padding: var(--space-xs) var(--space-md);
            font-size: var(--text-sm);
            color: var(--text-secondary);
            text-decoration: none;
            border-radius: var(--radius-md);
            transition: all var(--transition-fast);
        }
        .search-quick-link:hover {
            background: var(--bg-hover);
            color: var(--text-bright);
        }
        .search-quick-icon {
            font-size: 1rem;
        }
        .search-popular-badge {
            margin-left: auto;
            font-size: var(--text-xs);
            color: var(--text-muted);
            opacity: 0.6;
        }

        /* Filter bar */
        .search-filter-bar {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: var(--space-sm) var(--space-md);
            border-bottom: 1px solid var(--border-subtle);
            overflow-x: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        .search-filter-bar::-webkit-scrollbar {
            display: none;
        }
        .search-filter-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 12px;
            background: var(--bg-light);
            border: 1px solid var(--border-subtle);
            border-radius: 100px;
            font-family: var(--font-body);
            font-size: var(--text-xs);
            color: var(--text-secondary);
            cursor: pointer;
            white-space: nowrap;
            transition: all var(--transition-fast);
        }
        .search-filter-chip:hover {
            border-color: var(--accent-primary);
            color: var(--text-bright);
        }
        .search-filter-chip.active {
            background: rgba(110,139,255,0.12);
            border-color: var(--accent-primary);
            color: var(--accent-primary);
            font-weight: 600;
        }
        .search-filter-count {
            font-size: 0.6rem;
            opacity: 0.7;
        }

        /* Show more / Show less buttons */
        .search-show-more,
        .search-show-less {
            display: block;
            width: 100%;
            padding: var(--space-xs) var(--space-md);
            background: none;
            border: none;
            font-family: var(--font-body);
            font-size: var(--text-xs);
            color: var(--accent-primary);
            cursor: pointer;
            text-align: center;
            border-radius: var(--radius-md);
            transition: all var(--transition-fast);
        }
        .search-show-more:hover,
        .search-show-less:hover {
            background: rgba(110,139,255,0.08);
        }

        /* Autocomplete suggestions */
        .search-suggestions {
            padding: var(--space-xs) var(--space-sm);
            border-bottom: 1px solid var(--border-subtle);
        }
        .search-suggestion-item {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            padding: 6px var(--space-md);
            border-radius: var(--radius-md);
            text-decoration: none;
            color: inherit;
            transition: background var(--transition-fast);
        }
        .search-suggestion-item:hover {
            background: var(--bg-hover);
        }
        .search-suggestion-icon {
            flex-shrink: 0;
            font-size: 0.9rem;
        }
        .search-suggestion-title {
            flex: 1;
            font-size: var(--text-sm);
            color: var(--text-bright);
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .search-suggestion-type {
            flex-shrink: 0;
            font-size: 0.6rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.04em;
            padding: 2px 6px;
            background: var(--bg-light);
            border-radius: 8px;
        }

        /* Loading hint between suggestions and full results */
        .search-loading-hint {
            padding: var(--space-md);
            text-align: center;
            font-size: var(--text-xs);
            color: var(--text-muted);
            font-style: italic;
        }

        /* Keyboard hints at bottom */
        .search-keyboard-hints {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-lg);
            padding: var(--space-sm) var(--space-md);
            border-top: 1px solid var(--border-subtle);
            font-size: var(--text-xs);
            color: var(--text-muted);
        }
        .search-keyboard-hints kbd {
            display: inline-block;
            padding: 1px 5px;
            background: var(--bg-light);
            border: 1px solid var(--border-subtle);
            border-radius: 3px;
            font-family: var(--font-mono);
            font-size: 0.65rem;
            line-height: 1.4;
            margin: 0 2px;
        }
        
        /* 
        ══════════════════════════════════════════════════════════════════════════
        HERO SECTION
        ══════════════════════════════════════════════════════════════════════════
        */
        
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: calc(var(--header-height) + var(--space-4xl)) var(--space-xl) var(--space-4xl);
            position: relative;
            overflow: hidden;
        }
        
        .hero-content {
            max-width: var(--container-narrow);
            text-align: center;
            position: relative;
            z-index: var(--z-base);
        }
        
        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: var(--space-sm);
            padding: var(--space-xs) var(--space-md);
            background: rgba(110,139,255,0.1);
            border: 1px solid rgba(110,139,255,0.3);
            border-radius: var(--radius-full);
            font-size: var(--text-sm);
            color: var(--accent-primary);
            margin-bottom: var(--space-xl);
            animation: fadeInDown 0.8s ease;
        }
        
        .hero-badge-dot {
            width: 8px;
            height: 8px;
            background: var(--accent-primary);
            border-radius: 50%;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(1.2); }
        }
        
        @keyframes fadeInDown {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .hero-title {
            font-family: var(--font-display);
            /* Sized down from var(--text-hero) — clamp(3rem, 8vw, 6rem) — on 2026-08-03.
               The commercial headline is 44 characters ("Fast, Secure Websites Built
               Without Trackers") against the previous 28 ("Master Your Digital Security"),
               so at 96px it overflowed and orphaned the single word "Trackers" on a second
               line at 100% zoom on a 1920px display.
               Measured from that render: this display face occupies ~0.522 × font-size in
               width per character. 44 chars therefore need font-size <= (viewport - 64px
               of .hero padding) / 44 / 0.522 to stay on one line — 81px at 1920, 60px at
               1440, 53px at 1280. The clamp below satisfies all three and wraps only below
               ~1200px, where two lines are correct anyway.
               NOTE: .hero-title is used ONLY by index.html (the landing pages use
               .sl-hero-title), so this is homepage-scoped despite living in cwzero.css.
               --text-hero is left untouched; nothing else references it. */
            font-size: clamp(2.25rem, 4.1vw, 4.75rem);
            font-weight: 800;
            line-height: 1.1;
            color: var(--text-bright);
            margin-bottom: var(--space-xl);
            animation: fadeInUp 0.8s ease 0.2s backwards;
        }
        
        .hero-title-highlight {
            background: var(--gradient-cyber);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .hero-description {
            font-size: var(--text-xl);
            color: var(--text-primary);
            max-width: 600px;
            margin: 0 auto var(--space-2xl);
            animation: fadeInUp 0.8s ease 0.4s backwards;
        }

        /* Legibility halo for hero text that sits directly over the centred emblem.
           A soft dark shadow is invisible against the plain dark background but keeps
           glyph edges crisp where they cross the brighter emblem. */
        .hero-title,
        .hero-description,
        .hero .stat-value,
        .hero .stat-label,
        .hero-badge {
            text-shadow: 0 1px 12px rgba(11,12,16, var(--hk-text-halo)),
                         0 0 3px rgba(11,12,16, calc(var(--hk-text-halo) * 0.7)),
                         0 0 18px rgba(244,243,239, var(--hk-text-glow));
        }

        /* Text shine, SITE-WIDE: apply the light glow to headings on every page.
           The hero rule above keeps its own halo + glow (its class selectors out-specify
           these element selectors, so hero is unchanged). At --hk-text-glow: 0 the shadow
           is fully transparent = no effect until the admin turns shine up. */
        h1, h2, h3,
        .section-title, .section-description {
            text-shadow: 0 0 18px rgba(244,243,239, var(--hk-text-glow));
        }
        
        .hero-actions {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-md);
            flex-wrap: wrap;
            animation: fadeInUp 0.8s ease 0.6s backwards;
        }
        
        .hero-stats {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: var(--space-2xl) var(--space-3xl);
            margin-top: var(--space-4xl);
            animation: fadeInUp 0.8s ease 0.8s backwards;
        }
        
        .hero-stat {
            text-align: center;
        }
        
        .hero-stat-value {
            font-family: var(--font-display);
            font-size: var(--text-4xl);
            font-weight: 700;
            color: var(--accent-primary);
            line-height: 1;
        }
        
        .hero-stat-label {
            font-size: var(--text-sm);
            color: var(--text-muted);
            margin-top: var(--space-xs);
        }
        
        /* Floating decoration elements */
        .hero-decor {
            position: absolute;
            pointer-events: none;
        }
        
        .hero-decor-1 {
            top: 20%;
            left: 5%;
            width: 150px;
            height: 150px;
            border: 1px solid rgba(110,139,255,0.2);
            border-radius: 50%;
            animation: float1 8s ease-in-out infinite;
        }
        
        .hero-decor-2 {
            bottom: 20%;
            right: 10%;
            width: 100px;
            height: 100px;
            border: 1px solid rgba(180,183,189,0.2);
            transform: rotate(45deg);
            animation: float2 10s ease-in-out infinite;
        }
        
        .hero-decor-3 {
            top: 30%;
            right: 15%;
            font-family: var(--font-mono);
            font-size: var(--text-sm);
            color: var(--accent-primary);
            opacity: 0.3;
            animation: float3 12s ease-in-out infinite;
        }
        
        @keyframes float1 {
            0%, 100% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(20px, -30px) scale(1.1); }
        }
        
        @keyframes float2 {
            0%, 100% { transform: rotate(45deg) translate(0, 0); }
            50% { transform: rotate(45deg) translate(-20px, 20px); }
        }
        
        @keyframes float3 {
            0%, 100% { transform: translateY(0); opacity: 0.3; }
            50% { transform: translateY(-20px); opacity: 0.5; }
        }
        
        /* 
        ══════════════════════════════════════════════════════════════════════════
        MAIN CONTENT AREA
        ══════════════════════════════════════════════════════════════════════════
        */
        
        .main-content {
            position: relative;
            z-index: var(--z-base);
        }
        
        /* Section Base Styles */
        section {
            padding: var(--space-5xl) var(--space-xl);
        }
        
        .section-container {
            max-width: var(--container-max);
            margin: 0 auto;
        }
        
        .section-header {
            text-align: center;
            max-width: var(--container-narrow);
            margin: 0 auto var(--space-3xl);
        }
        
        .section-badge {
            display: inline-flex;
            align-items: center;
            gap: var(--space-sm);
            padding: var(--space-xs) var(--space-md);
            background: var(--bg-light);
            border-radius: var(--radius-full);
            font-family: var(--font-mono);
            font-size: var(--text-xs);
            color: var(--accent-primary);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: var(--space-md);
        }
        
        .section-title {
            font-family: var(--font-display);
            font-size: var(--text-5xl);
            font-weight: 700;
            color: var(--text-bright);
            margin-bottom: var(--space-md);
        }
        
        .section-description {
            font-size: var(--text-lg);
            color: var(--text-secondary);
        }
        
        /* 
        ══════════════════════════════════════════════════════════════════════════
        CATEGORY CARDS SECTION
        ══════════════════════════════════════════════════════════════════════════
        */
        
        .categories-section {
            background: var(--gradient-dark);
        }
        
        .categories-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: var(--space-xl);
        }
        
        /* 
        ═══════════════════════════════════════════════════════════════
        CATEGORY CARD TEMPLATE
        ═══════════════════════════════════════════════════════════════
        Duplicate this block to add new categories.
        Change: icon, title, description, link, and accent color
        */
        .category-card {
            position: relative;
            padding: var(--space-2xl);
            background: var(--gradient-card);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-xl);
            overflow: hidden;
            transition: all var(--transition-base);
        }
        
        .category-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--card-accent, var(--accent-primary));
            transform: scaleX(0);
            transition: transform var(--transition-base);
        }
        
        .category-card:hover {
            transform: translateY(-5px);
            border-color: var(--border-accent);
            box-shadow: var(--shadow-glow);
        }
        
        .category-card:hover::before {
            transform: scaleX(1);
        }
        
        .category-icon {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(110,139,255,0.1);
            border-radius: var(--radius-lg);
            font-size: var(--text-3xl);
            margin-bottom: var(--space-lg);
        }
        
        .category-card[data-category="linux"] .category-icon { background: rgba(255,170,0,0.1); }
        .category-card[data-category="windows"] .category-icon { background: rgba(180,183,189,0.1); }
        .category-card[data-category="privacy"] .category-icon { background: rgba(138,141,147,0.1); }
        .category-card[data-category="tools"] .category-icon { background: rgba(143,168,255,0.1); }
        .category-card[data-category="mobile"] .category-icon { background: rgba(110,139,255,0.1); }
        .category-card[data-category="network"] .category-icon { background: rgba(255,51,85,0.1); }
        .category-card[data-category="websecurity"] .category-icon { background: rgba(13,148,136,0.1); }
        .category-card[data-category="ethicalhacking"] .category-icon { background: rgba(234,179,8,0.1); }
        .category-card[data-category="awareness"] .category-icon { background: rgba(99,102,241,0.1); }

        .category-card[data-category="linux"] { --card-accent: var(--accent-warning); }
        .category-card[data-category="windows"] { --card-accent: var(--accent-secondary); }
        .category-card[data-category="privacy"] { --card-accent: var(--accent-purple); }
        .category-card[data-category="tools"] { --card-accent: var(--accent-tertiary); }
        .category-card[data-category="mobile"] { --card-accent: var(--accent-primary); }
        .category-card[data-category="network"] { --card-accent: var(--accent-danger); }
        .category-card[data-category="websecurity"] { --card-accent: #0d9488; }
        .category-card[data-category="ethicalhacking"] { --card-accent: #eab308; }
        .category-card[data-category="awareness"] { --card-accent: #6366f1; }
        
        .category-title {
            font-family: var(--font-display);
            font-size: var(--text-2xl);
            font-weight: 700;
            color: var(--text-bright);
            margin-bottom: var(--space-sm);
        }
        
        .category-description {
            color: var(--text-secondary);
            margin-bottom: var(--space-lg);
            line-height: 1.6;
        }
        
        .category-topics {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-sm);
            margin-bottom: var(--space-lg);
        }
        
        .category-topic {
            padding: var(--space-xs) var(--space-sm);
            background: var(--bg-light);
            border-radius: var(--radius-sm);
            font-size: var(--text-xs);
            color: var(--text-muted);
        }
        
        .category-link {
            display: inline-flex;
            align-items: center;
            gap: var(--space-sm);
            color: var(--card-accent, var(--accent-primary));
            font-weight: 600;
        }
        
        .category-link-arrow {
            transition: transform var(--transition-fast);
        }
        
        .category-card:hover .category-link-arrow {
            transform: translateX(5px);
        }
        /* END CATEGORY CARD TEMPLATE */
        
        /* 
        ══════════════════════════════════════════════════════════════════════════
        FEATURED TUTORIALS SECTION
        ══════════════════════════════════════════════════════════════════════════
        */
        
        .tutorials-section {
            background: var(--bg-void);
        }
        
        .tutorials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: var(--space-xl);
        }
        
        /* 
        ═══════════════════════════════════════════════════════════════
        TUTORIAL CARD TEMPLATE
        ═══════════════════════════════════════════════════════════════
        Duplicate this block to add new tutorials/articles.
        */
        .tutorial-card {
            display: flex;
            flex-direction: column;
            background: var(--bg-medium);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-xl);
            overflow: hidden;
            transition: all var(--transition-base);
        }
        
        .tutorial-card:hover {
            transform: translateY(-5px);
            border-color: var(--border-accent);
            box-shadow: var(--shadow-lg);
        }
        
        .tutorial-image {
            position: relative;
            height: 200px;
            background: var(--bg-light);
            overflow: hidden;
        }
        
        .tutorial-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform var(--transition-slow);
        }
        
        .tutorial-card:hover .tutorial-image img {
            transform: scale(1.05);
        }
        
        .tutorial-image-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, var(--bg-medium), transparent);
        }
        
        .tutorial-level {
            position: absolute;
            top: var(--space-md);
            left: var(--space-md);
            padding: var(--space-xs) var(--space-sm);
            background: var(--bg-dark);
            border-radius: var(--radius-sm);
            font-size: var(--text-xs);
            font-weight: 600;
            text-transform: uppercase;
        }
        
        .tutorial-level[data-level="beginner"] { color: var(--accent-primary); }
        .tutorial-level[data-level="intermediate"] { color: var(--accent-warning); }
        .tutorial-level[data-level="advanced"] { color: var(--accent-danger); }
        .tutorial-level[data-level="expert"] { color: var(--accent-purple); }
        
        .tutorial-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: var(--space-xl);
        }
        
        .tutorial-meta {
            display: flex;
            align-items: center;
            gap: var(--space-md);
            margin-bottom: var(--space-md);
            font-size: var(--text-sm);
            color: var(--text-muted);
        }
        
        .tutorial-meta-item {
            display: flex;
            align-items: center;
            gap: var(--space-xs);
        }
        
        .tutorial-title {
            font-family: var(--font-display);
            font-size: var(--text-xl);
            font-weight: 700;
            color: var(--text-bright);
            margin-bottom: var(--space-sm);
            line-height: 1.3;
        }
        
        .tutorial-card:hover .tutorial-title {
            color: var(--accent-primary);
        }
        
        .tutorial-excerpt {
            flex: 1;
            color: var(--text-secondary);
            font-size: var(--text-sm);
            line-height: 1.6;
            margin-bottom: var(--space-lg);
        }
        
        .tutorial-tags {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-sm);
            margin-bottom: var(--space-lg);
        }
        
        .tutorial-tag {
            padding: var(--space-xs) var(--space-sm);
            background: var(--bg-light);
            border-radius: var(--radius-sm);
            font-size: var(--text-xs);
            color: var(--text-secondary);
        }
        
        .tutorial-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: var(--space-md);
            border-top: 1px solid var(--border-subtle);
        }
        
        .tutorial-author {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }
        
        .tutorial-author-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--bg-light);
        }
        
        .tutorial-author-name {
            font-size: var(--text-sm);
            font-weight: 500;
            color: var(--text-primary);
        }
        
        .tutorial-read-link {
            font-size: var(--text-sm);
            font-weight: 600;
            color: var(--accent-primary);
        }
        /* END TUTORIAL CARD TEMPLATE */
        
        /* 
        ══════════════════════════════════════════════════════════════════════════
        LEARNING PATHS SECTION
        ══════════════════════════════════════════════════════════════════════════
        */
        
        .paths-section {
            background: var(--gradient-dark);
        }
        
        .paths-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: var(--space-xl);
        }
        
        /* 
        ═══════════════════════════════════════════════════════════════
        LEARNING PATH CARD TEMPLATE
        ═══════════════════════════════════════════════════════════════
        */
        .path-card {
            position: relative;
            padding: var(--space-2xl);
            background: var(--bg-medium);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-xl);
            overflow: hidden;
        }
        
        .path-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--gradient-cyber);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform var(--transition-base);
        }
        
        .path-card:hover::after {
            transform: scaleX(1);
        }
        
        .path-number {
            position: absolute;
            top: var(--space-lg);
            right: var(--space-lg);
            font-family: var(--font-display);
            font-size: var(--text-5xl);
            font-weight: 800;
            color: var(--bg-light);
            line-height: 1;
        }
        
        .path-icon {
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--gradient-cyber);
            border-radius: var(--radius-md);
            font-size: var(--text-2xl);
            margin-bottom: var(--space-lg);
        }
        
        .path-title {
            font-family: var(--font-display);
            font-size: var(--text-2xl);
            font-weight: 700;
            color: var(--text-bright);
            margin-bottom: var(--space-sm);
        }
        
        .path-description {
            color: var(--text-secondary);
            margin-bottom: var(--space-xl);
        }
        
        .path-modules {
            margin-bottom: var(--space-xl);
        }
        
        .path-module {
            display: flex;
            align-items: center;
            gap: var(--space-md);
            padding: var(--space-sm) 0;
            border-bottom: 1px solid var(--border-subtle);
        }
        
        .path-module:last-child {
            border-bottom: none;
        }
        
        .path-module-check {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid var(--border-medium);
            border-radius: 50%;
            font-size: var(--text-xs);
            color: transparent;
        }
        
        .path-module.completed .path-module-check {
            background: var(--accent-primary);
            border-color: var(--accent-primary);
            color: var(--bg-dark);
        }
        
        .path-module-title {
            flex: 1;
            font-size: var(--text-sm);
            color: var(--text-secondary);
        }
        
        .path-module.completed .path-module-title {
            color: var(--text-primary);
        }
        
        .path-meta {
            display: flex;
            align-items: center;
            gap: var(--space-lg);
            font-size: var(--text-sm);
            color: var(--text-muted);
        }
        
        .path-meta-item {
            display: flex;
            align-items: center;
            gap: var(--space-xs);
        }
        /* END LEARNING PATH TEMPLATE */
        
        /* 
        ══════════════════════════════════════════════════════════════════════════
        TOOLS & RESOURCES SECTION
        ══════════════════════════════════════════════════════════════════════════
        */
        
        .tools-section {
            background: var(--bg-void);
        }
        
        .tools-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: var(--space-lg);
        }
        
        /* 
        ═══════════════════════════════════════════════════════════════
        TOOL CARD TEMPLATE
        ═══════════════════════════════════════════════════════════════
        */
        .tool-card {
            display: flex;
            align-items: center;
            gap: var(--space-md);
            padding: var(--space-lg);
            background: var(--bg-medium);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-lg);
            transition: all var(--transition-fast);
        }
        
        .tool-card:hover {
            border-color: var(--border-accent);
            background: var(--bg-light);
        }
        
        .tool-icon {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg-light);
            border-radius: var(--radius-md);
            font-size: var(--text-xl);
        }
        
        .tool-info {
            flex: 1;
        }
        
        .tool-name {
            font-weight: 600;
            color: var(--text-bright);
            margin-bottom: 2px;
        }
        
        .tool-category {
            font-size: var(--text-xs);
            color: var(--text-muted);
        }
        /* END TOOL CARD TEMPLATE */
        
        /* 
        ══════════════════════════════════════════════════════════════════════════
        NEWSLETTER / CTA SECTION
        ══════════════════════════════════════════════════════════════════════════
        */
        
        .newsletter-section {
            padding: var(--space-5xl) var(--space-xl);
            background: var(--bg-dark);
        }
        
        .newsletter-container {
            max-width: var(--container-narrow);
            margin: 0 auto;
            text-align: center;
            padding: var(--space-4xl);
            background: var(--gradient-card);
            border: 1px solid var(--border-medium);
            border-radius: var(--radius-xl);
            position: relative;
            overflow: hidden;
        }
        
        .newsletter-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--gradient-cyber);
        }
        
        .newsletter-title {
            font-family: var(--font-display);
            font-size: var(--text-4xl);
            font-weight: 700;
            color: var(--text-bright);
            margin-bottom: var(--space-md);
        }
        
        .newsletter-description {
            color: var(--text-secondary);
            margin-bottom: var(--space-2xl);
        }
        
        .newsletter-form {
            display: flex;
            gap: var(--space-md);
            max-width: 450px;
            margin: 0 auto;
        }
        
        .newsletter-input {
            flex: 1;
            padding: var(--space-md) var(--space-lg);
            background: var(--bg-dark);
            border: 1px solid var(--border-medium);
            border-radius: var(--radius-md);
            font-family: var(--font-body);
            font-size: var(--text-base);
            color: var(--text-primary);
            outline: none;
            transition: all var(--transition-fast);
        }
        
        .newsletter-input:focus {
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 3px rgba(110,139,255,0.1);
        }
        
        .newsletter-input::placeholder {
            color: var(--text-muted);
        }
        
        /* 
        ══════════════════════════════════════════════════════════════════════════
        SIDEBAR (For Tutorial/Article Pages)
        ══════════════════════════════════════════════════════════════════════════
        */
        
        .page-with-sidebar {
            display: grid;
            grid-template-columns: var(--sidebar-width) 1fr;
            gap: var(--space-2xl);
            max-width: var(--container-max);
            margin: 0 auto;
            padding: calc(var(--header-height) + var(--space-2xl)) var(--space-xl) var(--space-4xl);
        }
        
        .sidebar {
            position: sticky;
            top: calc(var(--header-height) + var(--space-xl));
            height: fit-content;
            max-height: calc(100vh - var(--header-height) - var(--space-2xl));
            overflow-y: auto;
        }
        
        .sidebar-section {
            margin-bottom: var(--space-xl);
        }
        
        .sidebar-title {
            font-family: var(--font-display);
            font-size: var(--text-sm);
            font-weight: 700;
            color: var(--accent-primary);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: var(--space-md);
            padding-bottom: var(--space-sm);
            border-bottom: 1px solid var(--border-subtle);
        }
        
        /* 
        ═══════════════════════════════════════════════════════════════
        SIDEBAR NAVIGATION TREE TEMPLATE
        ═══════════════════════════════════════════════════════════════
        Supports infinite nesting for category trees
        */
        .sidebar-nav {
            list-style: none;
        }
        
        .sidebar-nav-item {
            margin-bottom: var(--space-xs);
        }
        
        .sidebar-nav-link {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            padding: var(--space-sm) var(--space-md);
            color: var(--text-secondary);
            font-size: var(--text-sm);
            border-radius: var(--radius-md);
            transition: all var(--transition-fast);
        }
        
        .sidebar-nav-link:hover {
            background: var(--bg-hover);
            color: var(--text-bright);
        }
        
        .sidebar-nav-link.active {
            background: rgba(110,139,255,0.1);
            color: var(--accent-primary);
        }
        
        /* Nested navigation levels */
        .sidebar-nav .sidebar-nav {
            margin-left: var(--space-lg);
            padding-left: var(--space-md);
            border-left: 1px solid var(--border-subtle);
            margin-top: var(--space-xs);
        }
        
        /* Collapsible navigation */
        .sidebar-nav-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: var(--space-sm) var(--space-md);
            background: transparent;
            border: none;
            color: var(--text-secondary);
            font-family: var(--font-body);
            font-size: var(--text-sm);
            text-align: left;
            cursor: pointer;
            border-radius: var(--radius-md);
            transition: all var(--transition-fast);
        }
        
        .sidebar-nav-toggle:hover {
            background: var(--bg-hover);
            color: var(--text-bright);
        }
        
        .sidebar-nav-toggle .toggle-icon {
            transition: transform var(--transition-fast);
        }
        
        .sidebar-nav-toggle.expanded .toggle-icon {
            transform: rotate(90deg);
        }
        
        /* Table of Contents */
        .toc-link {
            display: block;
            padding: var(--space-xs) var(--space-md);
            color: var(--text-muted);
            font-size: var(--text-sm);
            border-left: 2px solid transparent;
            transition: all var(--transition-fast);
        }
        
        .toc-link:hover {
            color: var(--text-primary);
            border-left-color: var(--border-medium);
        }
        
        .toc-link.active {
            color: var(--accent-primary);
            border-left-color: var(--accent-primary);
        }
        
        .toc-link.level-2 {
            padding-left: var(--space-xl);
        }
        
        .toc-link.level-3 {
            padding-left: var(--space-2xl);
        }
        /* END SIDEBAR NAV TEMPLATE */
        
        /* 
        ══════════════════════════════════════════════════════════════════════════
        ARTICLE/TUTORIAL CONTENT STYLES
        ══════════════════════════════════════════════════════════════════════════
        */
        
        .article-content {
            max-width: var(--container-narrow);
        }
        
        .article-header {
            margin-bottom: var(--space-3xl);
        }
        
        .article-breadcrumb {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            margin-bottom: var(--space-lg);
            font-size: var(--text-sm);
            color: var(--text-muted);
        }
        
        .article-breadcrumb a {
            color: var(--text-secondary);
        }
        
        .article-breadcrumb a:hover {
            color: var(--accent-primary);
        }
        
        .article-breadcrumb-separator {
            color: var(--text-muted);
        }
        
        .article-title {
            font-family: var(--font-display);
            font-size: var(--text-5xl);
            font-weight: 800;
            color: var(--text-bright);
            line-height: 1.2;
            margin-bottom: var(--space-lg);
        }
        
        .article-meta {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: var(--space-lg);
            color: var(--text-secondary);
            font-size: var(--text-sm);
        }
        
        .article-meta-item {
            display: flex;
            align-items: center;
            gap: var(--space-xs);
        }
        
        /* Article body typography */
        .article-body {
            font-size: var(--text-lg);
            line-height: 1.8;
        }
        
        .article-body h2 {
            font-family: var(--font-display);
            font-size: var(--text-3xl);
            font-weight: 700;
            color: var(--text-bright);
            margin-top: var(--space-3xl);
            margin-bottom: var(--space-lg);
            padding-top: var(--space-lg);
            border-top: 1px solid var(--border-subtle);
        }
        
        .article-body h3 {
            font-family: var(--font-display);
            font-size: var(--text-2xl);
            font-weight: 600;
            color: var(--text-bright);
            margin-top: var(--space-2xl);
            margin-bottom: var(--space-md);
        }
        
        .article-body h4 {
            font-family: var(--font-display);
            font-size: var(--text-xl);
            font-weight: 600;
            color: var(--text-bright);
            margin-top: var(--space-xl);
            margin-bottom: var(--space-md);
        }
        
        .article-body p {
            margin-bottom: var(--space-lg);
        }
        
        .article-body ul,
        .article-body ol {
            margin-bottom: var(--space-lg);
            padding-left: var(--space-xl);
        }
        
        .article-body li {
            margin-bottom: var(--space-sm);
        }
        
        .article-body a {
            color: var(--accent-secondary);
            text-decoration: underline;
            text-decoration-color: rgba(180,183,189,0.3);
            text-underline-offset: 3px;
        }
        
        .article-body a:hover {
            color: var(--accent-primary);
            text-decoration-color: var(--accent-primary);
        }
        
        .article-body strong {
            color: var(--text-bright);
            font-weight: 600;
        }
        
        .article-body blockquote {
            margin: var(--space-xl) 0;
            padding: var(--space-lg) var(--space-xl);
            background: var(--bg-light);
            border-left: 4px solid var(--accent-primary);
            border-radius: 0 var(--radius-md) var(--radius-md) 0;
            font-style: italic;
            color: var(--text-secondary);
        }
        
        .article-body blockquote p:last-child {
            margin-bottom: 0;
        }
        
        /* Code blocks */
        .article-body code {
            font-family: var(--font-mono);
            font-size: 0.9em;
            padding: 0.2em 0.4em;
            background: var(--bg-light);
            border-radius: var(--radius-sm);
            color: var(--text-code);
        }
        
        .article-body pre {
            margin: var(--space-xl) 0;
            padding: var(--space-lg);
            background: var(--bg-void);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-lg);
            overflow-x: auto;
        }
        
        .article-body pre code {
            padding: 0;
            background: transparent;
            font-size: var(--text-sm);
            line-height: 1.6;
        }
        
        /* Code block header */
        .code-block {
            margin: var(--space-xl) 0;
            border-radius: var(--radius-lg);
            overflow: hidden;
            border: 1px solid var(--border-subtle);
        }
        
        .code-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--space-sm) var(--space-md);
            background: var(--bg-light);
            border-bottom: 1px solid var(--border-subtle);
        }
        
        .code-language {
            font-family: var(--font-mono);
            font-size: var(--text-xs);
            color: var(--accent-primary);
            text-transform: uppercase;
        }
        
        .code-copy-btn {
            padding: var(--space-xs) var(--space-sm);
            background: transparent;
            border: 1px solid var(--border-medium);
            border-radius: var(--radius-sm);
            color: var(--text-muted);
            font-size: var(--text-xs);
            cursor: pointer;
            transition: all var(--transition-fast);
        }
        
        .code-copy-btn:hover {
            border-color: var(--accent-primary);
            color: var(--accent-primary);
        }
        
        .code-block pre {
            margin: 0;
            border: none;
            border-radius: 0;
        }
        
        /* Info/Warning boxes */
        .info-box {
            margin: var(--space-xl) 0;
            padding: var(--space-lg);
            border-radius: var(--radius-lg);
            display: flex;
            gap: var(--space-md);
        }
        
        .info-box-icon {
            flex-shrink: 0;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: var(--text-sm);
        }
        
        .info-box-content {
            flex: 1;
        }
        
        .info-box-title {
            font-weight: 600;
            margin-bottom: var(--space-xs);
        }
        
        .info-box.tip {
            background: rgba(110,139,255,0.1);
            border: 1px solid rgba(110,139,255,0.2);
        }
        
        .info-box.tip .info-box-icon {
            background: var(--accent-primary);
            color: var(--bg-dark);
        }
        
        .info-box.tip .info-box-title {
            color: var(--accent-primary);
        }
        
        .info-box.warning {
            background: rgba(255,170,0,0.1);
            border: 1px solid rgba(255,170,0,0.2);
        }
        
        .info-box.warning .info-box-icon {
            background: var(--accent-warning);
            color: var(--bg-dark);
        }
        
        .info-box.warning .info-box-title {
            color: var(--accent-warning);
        }
        
        .info-box.danger {
            background: rgba(255,51,85,0.1);
            border: 1px solid rgba(255,51,85,0.2);
        }
        
        .info-box.danger .info-box-icon {
            background: var(--accent-danger);
            color: var(--bg-dark);
        }
        
        .info-box.danger .info-box-title {
            color: var(--accent-danger);
        }
        
        .info-box.note {
            background: rgba(180,183,189,0.1);
            border: 1px solid rgba(180,183,189,0.2);
        }
        
        .info-box.note .info-box-icon {
            background: var(--accent-secondary);
            color: var(--bg-dark);
        }
        
        .info-box.note .info-box-title {
            color: var(--accent-secondary);
        }
        
        /* Images in articles */
        .article-body img {
            margin: var(--space-xl) 0;
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-subtle);
        }
        
        .article-body figure {
            margin: var(--space-xl) 0;
        }
        
        .article-body figure img {
            margin: 0;
        }
        
        .article-body figcaption {
            margin-top: var(--space-sm);
            font-size: var(--text-sm);
            color: var(--text-muted);
            text-align: center;
        }
        
        /* Tables */
        .article-body table {
            width: 100%;
            margin: var(--space-xl) 0;
            border-collapse: collapse;
            font-size: var(--text-sm);
        }
        
        .article-body th,
        .article-body td {
            padding: var(--space-md);
            text-align: left;
            border-bottom: 1px solid var(--border-subtle);
        }
        
        .article-body th {
            background: var(--bg-light);
            font-weight: 600;
            color: var(--text-bright);
        }
        
        .article-body tr:hover td {
            background: var(--bg-hover);
        }
        
        /* 
        ══════════════════════════════════════════════════════════════════════════
        FOOTER
        ══════════════════════════════════════════════════════════════════════════
        */
        
        .site-footer {
            background: var(--bg-void);
            border-top: 1px solid var(--border-subtle);
            padding: var(--space-5xl) var(--space-xl) var(--space-2xl);
        }
        
        .footer-container {
            max-width: var(--container-max);
            margin: 0 auto;
        }
        
        .footer-grid {
            display: grid;
            grid-template-columns: 2fr repeat(4, 1fr);
            gap: var(--space-3xl);
            margin-bottom: var(--space-4xl);
        }
        
        .footer-brand {
            max-width: 300px;
        }
        
        .footer-logo {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            font-family: var(--font-display);
            font-size: var(--text-xl);
            font-weight: 700;
            color: var(--text-bright);
            margin-bottom: var(--space-lg);
        }
        
        .footer-description {
            color: var(--text-secondary);
            font-size: var(--text-sm);
            line-height: 1.7;
            margin-bottom: var(--space-lg);
        }
        
        .footer-social {
            display: flex;
            gap: var(--space-md);
        }
        
        .social-link {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg-light);
            border-radius: var(--radius-md);
            color: var(--text-secondary);
            transition: all var(--transition-fast);
        }
        
        .social-link:hover {
            background: var(--accent-primary);
            color: var(--bg-dark);
        }
        
        .footer-column h4 {
            font-family: var(--font-display);
            font-size: var(--text-sm);
            font-weight: 700;
            color: var(--text-bright);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: var(--space-lg);
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: var(--space-sm);
        }
        
        .footer-links a {
            color: var(--text-secondary);
            font-size: var(--text-sm);
            transition: color var(--transition-fast);
        }
        
        .footer-links a:hover {
            color: var(--accent-primary);
        }
        
        .footer-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: var(--space-2xl);
            border-top: 1px solid var(--border-subtle);
        }
        
        .footer-copyright {
            font-size: var(--text-sm);
            color: var(--text-muted);
        }
        
        .footer-legal {
            display: flex;
            gap: var(--space-xl);
        }
        
        .footer-legal a {
            font-size: var(--text-sm);
            color: var(--text-muted);
        }
        
        .footer-legal a:hover {
            color: var(--accent-primary);
        }
        
        /* 
        ══════════════════════════════════════════════════════════════════════════
        UTILITY CLASSES
        ══════════════════════════════════════════════════════════════════════════
        */
        
        .text-center { text-align: center; }
        .text-left { text-align: left; }
        .text-right { text-align: right; }
        
        .text-bright { color: var(--text-bright); }
        .text-primary { color: var(--text-primary); }
        .text-secondary { color: var(--text-secondary); }
        .text-muted { color: var(--text-muted); }
        .text-accent { color: var(--accent-primary); }
        
        .bg-dark { background: var(--bg-dark); }
        .bg-void { background: var(--bg-void); }
        .bg-medium { background: var(--bg-medium); }
        
        .mb-0 { margin-bottom: 0; }
        .mb-sm { margin-bottom: var(--space-sm); }
        .mb-md { margin-bottom: var(--space-md); }
        .mb-lg { margin-bottom: var(--space-lg); }
        .mb-xl { margin-bottom: var(--space-xl); }
        
        .mt-0 { margin-top: 0; }
        .mt-sm { margin-top: var(--space-sm); }
        .mt-md { margin-top: var(--space-md); }
        .mt-lg { margin-top: var(--space-lg); }
        .mt-xl { margin-top: var(--space-xl); }
        
        .hidden { display: none; }
        .visible { display: block; }
        
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        /* ══════════════════════════════════════════════════════════════════════
           NO-JAVASCRIPT FALLBACK
           The hub pages (tutorial/path/guide/glossary indexes) build their whole
           body from JS configs at runtime. Without JS they rendered as literally
           empty documents — /paths/index.html exposed 7 words. Each now carries a
           <noscript> block with the real links and descriptions, styled here so it
           reads as a deliberate page rather than raw unstyled markup.
           ══════════════════════════════════════════════════════════════════════ */
        .noscript-fallback {
            max-width: 900px;
            margin: 0 auto;
            padding: calc(var(--header-height, 70px) + var(--space-2xl)) var(--space-xl) var(--space-3xl);
            color: var(--text-primary);
            line-height: 1.7;
        }

        .noscript-fallback h1 {
            font-family: var(--font-display);
            font-size: var(--text-4xl);
            color: var(--text-bright);
            margin-bottom: var(--space-md);
        }

        .noscript-fallback h2 {
            font-family: var(--font-display);
            font-size: var(--text-2xl);
            color: var(--text-bright);
            margin: var(--space-2xl) 0 var(--space-md);
            padding-bottom: var(--space-sm);
            border-bottom: 1px solid var(--border-medium);
        }

        .noscript-fallback p { margin-bottom: var(--space-lg); color: var(--text-secondary); }

        .noscript-fallback ul,
        .noscript-fallback ol { margin: 0 0 var(--space-xl) var(--space-lg); }

        .noscript-fallback li { margin-bottom: var(--space-sm); }

        .noscript-fallback dt {
            font-weight: 700;
            color: var(--text-bright);
            margin-top: var(--space-lg);
        }

        .noscript-fallback dd {
            margin: 0 0 var(--space-sm);
            color: var(--text-secondary);
        }

        .noscript-fallback a { color: var(--accent-secondary); text-decoration: underline; }
        .noscript-fallback a:hover { color: var(--accent-primary); }

        /* Skip link — off-screen until keyboard-focused, then anchored top-left.
           First tab stop on every page; lets keyboard and screen-reader users jump
           past the header/nav straight to #main-content. */
        .skip-to-content {
            position: absolute;
            top: -100px;
            left: var(--space-md);
            z-index: 10000;
            padding: 0.75rem 1.25rem;
            background: var(--accent-primary);
            color: #16171B;
            font-weight: 600;
            text-decoration: none;
            border-radius: var(--radius-md);
            transition: top 0.15s ease-in-out;
        }

        .skip-to-content:focus {
            top: var(--space-md);
            outline: 2px solid var(--text-primary);
            outline-offset: 2px;
        }

        /* 
        ══════════════════════════════════════════════════════════════════════════
        RESPONSIVE DESIGN
        ══════════════════════════════════════════════════════════════════════════
        */
        
        @media (max-width: 1200px) {
            .footer-grid {
                grid-template-columns: 1fr 1fr;
            }
            
            .footer-brand {
                grid-column: span 2;
            }
            
            .mega-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 1024px) {
            .page-with-sidebar {
                grid-template-columns: 1fr;
            }
            
            .sidebar {
                display: none;
            }
            
            .paths-grid {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 768px) {
            :root {
                --header-height: 60px;
            }
            
            .main-nav,
            .header-actions .btn,
            /* The member link hides with the button it sits beside. Below 768px both are
               replaced by .mobile-nav-cta inside the menu, which is where a phone visitor
               can actually reach them. */
            .header-join {
                display: none;
            }
            
            .mobile-menu-toggle {
                display: flex;
            }
            
            .hero {
                padding-top: calc(var(--header-height) + var(--space-2xl));
            }
            
            .hero-stats {
                flex-direction: column;
                gap: var(--space-xl);
            }
            
            .categories-grid,
            .tutorials-grid {
                grid-template-columns: 1fr;
            }
            
            .newsletter-form {
                flex-direction: column;
            }
            
            .footer-grid {
                grid-template-columns: 1fr;
                text-align: center;
            }
            
            .footer-brand {
                max-width: none;
            }
            
            .footer-social {
                justify-content: center;
            }
            
            .footer-bottom {
                flex-direction: column;
                gap: var(--space-lg);
                text-align: center;
            }
            
            section {
                padding: var(--space-3xl) var(--space-md);
            }

            /* Search modal mobile adjustments */
            .search-modal {
                padding-top: 5vh;
            }
            .search-container {
                margin: 0 var(--space-md);
                max-width: none;
                border-radius: var(--radius-lg);
            }
            .search-results {
                max-height: 55vh;
            }
            .search-keyboard-hints {
                display: none;
            }
        }

        @media (max-width: 480px) {
            .tools-grid {
                grid-template-columns: 1fr;
            }
            
            .hero-actions {
                flex-direction: column;
                width: 100%;
            }
            
            .hero-actions .btn {
                width: 100%;
            }
        }
        
        /* 
        ══════════════════════════════════════════════════════════════════════════
        PRINT STYLES
        ══════════════════════════════════════════════════════════════════════════
        */
        
        @media print {
            .site-header,
            .site-footer,
            .sidebar,
            .cyber-background {
                display: none;
            }
            
            body {
                background: white;
                color: black;
            }
            
            .article-content {
                max-width: 100%;
            }
        }


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE MENU - COMPLETE FIX
   The menu is inside header, so we need to break out of header's constraints
   ═══════════════════════════════════════════════════════════════════════════ */

/* Allow header to show overflow when menu is open */
body.menu-open .site-header {
    overflow: visible !important;
    height: auto !important;
    min-height: var(--header-height, 60px) !important;
}

/* Body scroll lock */
body.menu-open {
    overflow: hidden !important;
}

/* Mobile menu - positioned below header */
.mobile-menu {
    display: none;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    height: calc(100vh - 60px) !important;
    background: #101116 !important;
    z-index: 9999 !important;
    overflow-y: auto !important;
}

/* Show menu when active */
.mobile-menu.active {
    display: block !important;
}

/* Mobile nav container */
.mobile-nav {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
}

/* Nav links */
/* ─────────────────────────────────────────────────────────────────
   MOBILE CALL TO ACTION — added 2026-09-07.
   
   The mobile menu previously had NO call to action of any kind:
   `.header-actions .btn` is display:none below 768px, so a phone
   visitor could browse the entire site without ever being shown an
   action to take. Both CTAs live here now.
   ───────────────────────────────────────────────────────────────── */
.mobile-nav-cta {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md) 0 var(--space-lg);
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-subtle);
}

.mobile-nav-cta .btn {
    width: 100%;
    text-align: center;
}

.mobile-nav-link {
    display: block !important;
    padding: 1rem 1.5rem !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    font-size: 1.1rem !important;
}

.mobile-nav-link:hover,
.mobile-nav-link:active {
    background: rgba(180,183,189, 0.1) !important;
    color: #B4B7BD !important;
}

/* Nav sections */
.mobile-nav-section {
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

/* Section toggle buttons */
.mobile-nav-toggle {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 1rem 1.5rem !important;
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 1.1rem !important;
    cursor: pointer !important;
    text-align: left !important;
    font-family: inherit !important;
}

.mobile-nav-toggle:hover,
.mobile-nav-toggle:active {
    background: rgba(180,183,189, 0.05) !important;
    color: #B4B7BD !important;
}

.toggle-icon {
    color: #B4B7BD !important;
    font-size: 1.3rem !important;
    font-weight: bold !important;
}

/* Submenus - hidden by default */
.mobile-nav-submenu {
    display: none !important;
    background: rgba(0,0,0,0.4) !important;
    padding: 0.5rem 0 !important;
}

/* Submenus - show when active */
.mobile-nav-submenu.active {
    display: block !important;
}

/* Submenu links */
.mobile-nav-sublink {
    display: block !important;
    padding: 0.75rem 1.5rem 0.75rem 2.5rem !important;
    color: #a0a0b0 !important;
    text-decoration: none !important;
    font-size: 1rem !important;
}

.mobile-nav-sublink:hover,
.mobile-nav-sublink:active {
    color: #B4B7BD !important;
    background: rgba(180,183,189, 0.1) !important;
}

/* Services section special color */
.mobile-nav-services .mobile-nav-toggle {
    color: #4ade80 !important;
}

/* Hamburger to X animation */
.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px) !important;
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0 !important;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px) !important;
}
/* ═══════════════════════════════════════════════════════════════════════
   FINKATANA DESIGN LANGUAGE — Phase 2: "cut by the blade"
   45° cuts as a system motif · crimson used like a seal · blade geometry.
   Additive layer: only introduces new properties / hover refinements so it
   composes with (never fights) component styles in later-loading sheets.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --cut: 14px;                              /* card corner cut */
    --cut-sm: 8px;                            /* button / tag corner cut */
    --seal: var(--accent-primary);            /* the crimson seal */
    --seam: linear-gradient(90deg, transparent, rgba(159,216,232,0.50) 28%, rgba(180,183,189,0.38) 72%, transparent);
}

/* ── The cut corner — every card is sliced once, top-right ─────────────── */
.category-card,
.tutorial-card,
.subject-card,
.branch-card,
.path-card,
.guide-card,
.glossary-card,
.toc-card {
    clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}

/* blade-light glint from the cut on hover (inset — pseudo-elements are taken) */
.category-card:hover,
.tutorial-card:hover,
.subject-card:hover,
.branch-card:hover,
.path-card:hover,
.guide-card:hover,
.glossary-card:hover {
    box-shadow: var(--shadow-lg),
                inset -12px 12px 28px -20px rgba(159,216,232,0.60);
    border-color: rgba(110,139,255,0.40);
}

/* ── Section badges: pill → blade tag (parallelogram + seal edge) ──────── */
.section-badge {
    border-radius: 0;
    clip-path: polygon(var(--cut-sm) 0, 100% 0, calc(100% - var(--cut-sm)) 100%, 0 100%);
    border-left: 2px solid var(--seal);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

/* ── Section titles: the seal-slash under the headline ─────────────────── */
.section-title {
    position: relative;
}
.section-title::after {
    content: '';
    display: block;
    width: 64px;
    height: 3px;
    margin: var(--space-md) auto 0;
    background: linear-gradient(90deg, var(--seal), rgba(143,168,255,0.35), transparent);
    transform: skewX(-32deg);
}

/* ── Seams: every section boundary is a skewed hairline cut ────────────── */
.categories-section,
.tutorials-section,
.paths-section,
.tools-section,
.site-footer {
    position: relative;
}
.categories-section::before,
.tutorials-section::before,
.paths-section::before,
.tools-section::before,
.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: min(92%, var(--container-max));
    height: 1px;
    background: var(--seam);
    transform: translateX(-50%) skewY(-1.4deg);
    pointer-events: none;
}

/* hero closes with its own blade line */
.hero::after {
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: var(--space-2xl);
    height: 1px;
    background: var(--seam);
    transform: skewY(-1.2deg);
    pointer-events: none;
}

/* ── Buttons: one cut corner + blade-sheen sweep on primary ────────────── */
.btn,
.filter-btn {
    clip-path: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, 0 100%);
}
.btn-primary {
    position: relative;
    overflow: hidden;
}
.btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -45%;
    width: 32%;
    background: linear-gradient(105deg, transparent, rgba(244,243,239,0.38), transparent);
    transform: skewX(-22deg);
    transition: left 0.5s ease;
    pointer-events: none;
}
.btn-primary:hover::after {
    left: 115%;
}
.btn-primary:hover {
    background: var(--accent-tertiary);   /* stays crimson — brightens like a fresh edge */
    color: var(--text-bright);
}

/* ── Nav: active link carries the seal as an inset under-edge ──────────── */
.nav-link.active {
    box-shadow: inset 0 -2px 0 var(--seal);
}
.nav-link:hover {
    box-shadow: inset 0 -2px 0 rgba(180,183,189,0.5);
}

/* ── Brand cohesion: selection, focus, scrollbar ───────────────────────── */
::selection {
    background: var(--seal);
    color: var(--text-bright);
}
/* Keyboard focus must be VISIBLE on every interactive control (WCAG 2.4.7, AA).
   Form controls were missing from this list until 2026-09-06, and `.search-input` — the
   site-wide search box — carried `border: none; outline: none` with NO :focus rule anywhere,
   so keyboard focus on it was completely invisible. Found by the 2026-09-06 re-audit's
   ACC-003. :focus-visible keeps the ring off mouse clicks, which is why it is safe to apply
   broadly. Specificity note: `input:focus-visible` (0,1,1) beats a bare `.some-input`
   (0,1,0), so it re-enables the outline every base rule had switched off. */
a:focus-visible,
.btn:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--seal);
    outline-offset: 2px;
}
html {
    scrollbar-color: #4A4C55 var(--bg-void);
}
body::-webkit-scrollbar {
    width: 10px;
}
body::-webkit-scrollbar-track {
    background: var(--bg-void);
}
body::-webkit-scrollbar-thumb {
    background: #4A4C55;
    border-radius: 0;
}
body::-webkit-scrollbar-thumb:hover {
    background: var(--seal);
}

/* ── Respect reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .btn-primary::after {
        transition: none;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   FINKATANA LIVING BACKGROUND — the tsuba (logo) still in balanced deep
   space; orbits turn imperceptibly slowly; the 不動心 (Fudōshin, "immovable
   mind") inscription rests quietly at the foot of the composition.
   sharp · balance · calm · danger
   ═══════════════════════════════════════════════════════════════════════════ */
.cyber-background .floating-orb {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 54vmin;
    height: 54vmin;
    z-index: 3;
    filter: none;
    border-radius: 0;
    transform: translate(-50%, -50%);
    background: url('/emblem-tsuba.svg') center / contain no-repeat;
    opacity: var(--hk-emblem-opacity);   /* base level — also the value when reduced-motion disables the breathe animation */
    animation: hk-breathe 15s ease-in-out infinite;
}
.cyber-background .hk-inscription {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 8vmin;
    width: 44vmin;
    height: 4.7vmin;
    transform: translateX(-50%);
    background: url('/emblem-inscription.svg') center / contain no-repeat;
    opacity: var(--hk-inscription-opacity);   /* admin-adjustable — /modir/appearance.php */
    pointer-events: none;
}
@keyframes hk-orbit { to { transform: rotate(360deg); } }
/* @keyframes hk-glow removed 2026-07-18 (center glow light) */
@keyframes hk-drift {
    from { transform: translate(0, 0); }
    to   { transform: translate(2%, -1.4%); }
}
@keyframes hk-breathe {
    0%, 100% { opacity: var(--hk-emblem-opacity-min); }
    50%      { opacity: var(--hk-emblem-opacity); }
}
@media (prefers-reduced-motion: reduce) {
    .cyber-grid, .particles, .cyber-background .floating-orb { animation: none; }
}