/* ==========================================================================
   YAZATA STYLESHEET
   Design System: Obsidian Cyberpunk (Dark Premium Hardware Theme)
   Inspired by UI.com & Cisco Enterprise aesthetics
   ========================================================================== */

/* ==========================================================================
   THEME SYSTEM
   Dark "Obsidian Cyberpunk" = default (chart-topping enterprise look)
   Light "Warm Graphite" = soft, non-glaring warm-grey daytime palette
   Both themes are driven by the SAME token names, so every component
   inherits the correct colours automatically. Toggle via [data-theme].
   ========================================================================== */

/* --- CSS Variables & Design Tokens (DARK = default) --- */
:root {
    color-scheme: dark;
    --bg-base: #0a0b0d;
    --bg-deepest: #030407;
    --code-bg: #0b0c10;
    --bg-surface: #181b22;
    --bg-surface-elevated: #232732;
    --bg-surface-glass: rgba(24, 27, 34, 0.75);

    --primary: #decbb7;
    --primary-rgb: 222, 203, 183;
    --primary-glow: rgba(222, 203, 183, 0.25);
    --secondary: #a89a89;
    --secondary-glow: rgba(168, 154, 137, 0.15);

    --accent-blue: #786b5c;
    --accent-green: #00e676;
    --accent-red: #ff4d4d;
    --accent-orange: #ff9100;

    --text-primary: #decbb7;
    --text-secondary: #a89a89;
    --text-muted: #786b5c;

    --border-color: rgba(255, 255, 255, 0.09);
    --border-glowing: rgba(222, 203, 183, 0.25);

    /* --- Adaptive overlay/lego channels (theme-aware) ---
       In dark mode subtle overlays are WHITE; in light mode they become
       near-BLACK graphite. Using rgb channels lets rgba(var(--x), a)
       flip automatically without editing every single rule. */
    --overlay-rgb: 255, 255, 255;   /* borders, hairlines, subtle fills */
    --shadow-rgb: 0, 0, 0;          /* drop shadows */
    --scrim-rgb: 0, 0, 0;           /* dark scrims / backdrops */
    --surface-veil-rgb: 10, 11, 13; /* translucent dark surface fills */

    /* Semantic surface tints (glass, cards, chips) */
    --surface-tint: rgba(255, 255, 255, 0.04);
    --surface-tint-strong: rgba(255, 255, 255, 0.08);
    --deep-rgb: 6, 8, 15;       /* header/hero backdrop */
    --elev-rgb: 24, 27, 34;     /* elevated glass panels */
    --veil-rgb: 10, 11, 13;     /* translucent dark veils */
    --abyss-rgb: 3, 4, 7;       /* deep modal scrims */

    /* --- Brand / trust accents (kept vivid in BOTH themes) --- */
    --brand-indigo: #818cf8;
    --brand-blue: #3b82f6;
    --brand-cyan: #38bdf8;

    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: 'Fira Code', monospace;

    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease;
    --border-radius: 12px;
    --container-width: 1200px;
}

/* --- LIGHT THEME: "Warm Graphite" ---
   A calm, warm-grey palette: never pure white (no glare), soft layered
   greys with a warm stone tint for a trustworthy, premium daylight feel. */
:root[data-theme="light"] {
    color-scheme: light;
    --bg-base: #e9e7e2;            /* warm light grey base (NOT white) */
    --bg-deepest: #ddd9d1;        /* footer / deep panels (light) */
    --code-bg: #e3e0d9;           /* code blocks (light) */
    --bg-surface: #f2f0ec;        /* soft warm card surface */
    --bg-surface-elevated: #fbfaf8;/* gently raised surface */
    --bg-surface-glass: rgba(242, 240, 236, 0.78);

    --primary: #2f3542;           /* deep slate headings */
    --primary-rgb: 47, 53, 66;
    --primary-glow: rgba(120, 113, 108, 0.18);
    --secondary: #57606f;         /* secondary graphite */
    --secondary-glow: rgba(120, 113, 108, 0.12);

    --accent-blue: #6d7b8d;
    --accent-green: #0f9d58;
    --accent-red: #d84343;
    --accent-orange: #c9770b;

    --text-primary: #2b2f36;      /* warm near-black text */
    --text-secondary: #525862;    /* readable secondary */
    --text-muted: #8a8578;        /* warm stone muted */

    --border-color: rgba(0, 0, 0, 0.12);
    --border-glowing: rgba(120, 113, 108, 0.30);

    /* Adaptive overlays flip to DARK in light mode */
    --overlay-rgb: 0, 0, 0;       /* subtle borders/fills become graphite */
    --shadow-rgb: 40, 35, 28;     /* warm soft shadows */
    --scrim-rgb: 60, 56, 48;      /* warm scrim, not pure black */
    --surface-veil-rgb: 233, 231, 226;

    --surface-tint: rgba(0, 0, 0, 0.035);
    --surface-tint-strong: rgba(0, 0, 0, 0.065);
    --deep-rgb: 248, 247, 244;  /* light header/hero backdrop */
    --elev-rgb: 251, 250, 248;  /* light elevated glass panels */
    --veil-rgb: 242, 240, 236;  /* light translucent veils */
    --abyss-rgb: 225, 222, 216; /* light warm scrim */

    /* Slightly deeper brand accents so they stay legible on light bg */
    --brand-indigo: #4f56d6;
    --brand-blue: #2563eb;
    --brand-cyan: #0284c7;
}

/* Smooth theme transition */
body {
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* --- Reset & Base Styles --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
    background-color: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

/* Anchored sections sit clear of the sticky header (offset handled by html { scroll-padding-top }) */


body {
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.25;
}

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

ul {
    list-style: none;
}

/* --- Layout Utility Classes --- */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.section {
    padding: 7rem 0;
    position: relative;
}

.grid {
    display: grid;
    gap: 2rem;
}

.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.align-center {
    align-items: center;
}

.text-center {
    text-align: center;
}

.gradient-text {
    background: linear-gradient(135deg, #818cf8 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.accent-text {
    color: #60a5fa;
}

.text-muted {
    color: var(--text-muted) !important;
}

.text-success {
    color: var(--accent-green) !important;
}

.text-info {
    color: #60a5fa !important;
}

.text-danger {
    color: var(--accent-red) !important;
}

/* --- Common Components (Buttons, Badges) --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.8rem;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition-smooth);
    border: 1px solid transparent;
}

.btn-primary {
    background: linear-gradient(135deg, #818cf8 0%, #3b82f6 100%);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3), inset 0 1px 0 rgba(var(--overlay-rgb), 0.4);
}

.btn-primary:hover {
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
    transform: translateY(-2px);
}

.btn-secondary {
    background: rgba(var(--overlay-rgb), 0.04);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.btn-secondary:hover {
    background: rgba(var(--overlay-rgb), 0.08);
    border-color: var(--primary);
    transform: translateY(-2px);
}

.btn-sm {
    padding: 0.5rem 1.2rem;
    font-size: 0.85rem;
    border-radius: 8px;
}

.tagline-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(var(--overlay-rgb), 0.04);
    border: 1px solid rgba(var(--overlay-rgb), 0.1);
    color: var(--primary);
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.badge-dot {
    width: 6px;
    height: 6px;
    background-color: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--primary);
    animation: blink 2s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* --- Sticky Glassmorphic Header --- */
.mobile-nav-toggle-checkbox {
    display: none;
}

@keyframes headerScroll {
    to {
        background-color: rgba(var(--deep-rgb), 0.9);
        padding: 0.5rem 0;
        box-shadow: 0 8px 30px rgba(var(--shadow-rgb), 0.5);
    }
}

.main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: var(--bg-surface-glass);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid rgba(var(--overlay-rgb), 0.06);
    box-shadow: 0 4px 24px rgba(var(--shadow-rgb), 0.35);
    transition: var(--transition-smooth);
    
    /* Scroll-driven background/shadow transition */
    animation: headerScroll linear both;
    animation-timeline: scroll();
    animation-range: 0 50px;
}

/* Subtle top highlight line for a premium glassmorphic feel */
.main-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--overlay-rgb), 0.08) 35%,
        rgba(var(--overlay-rgb), 0.14) 50%,
        rgba(var(--overlay-rgb), 0.08) 65%,
        transparent 100%);
    pointer-events: none;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px;
    gap: 2rem;
}

.logo-container {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.brand-logo {
    height: 30px;
    width: auto;
    filter: brightness(0) invert(1);
    transition: var(--transition-smooth);
}

.logo-container:hover .brand-logo {
    filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(var(--overlay-rgb), 0.3));
}

.brand-logo-sm {
    height: 24px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.85;
    transition: var(--transition-smooth);
}

.brand-logo-sm:hover {
    opacity: 1;
    filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(var(--overlay-rgb), 0.2));
}

/* Light theme: the logo SVG is authored black, so drop the invert filter
   (which turns it white for dark mode) to keep it legible on light bg. */
:root[data-theme="light"] .brand-logo,
:root[data-theme="light"] .brand-logo-sm {
    filter: none;
}
:root[data-theme="light"] .logo-container:hover .brand-logo {
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.15));
}
:root[data-theme="light"] .brand-logo-sm:hover {
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.12));
}

.main-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.6rem, 1.6vw, 1.5rem);
    flex: 1 1 auto;
}

.nav-link {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 0.82rem;
    line-height: 1.3;
    letter-spacing: 0.01em;
    white-space: nowrap;
    color: var(--text-secondary);
    position: relative;
    padding: 0.5rem 0.1rem;
    transition: color 0.2s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover {
    color: var(--text-primary);
}

.nav-link:hover::after {
    width: 60%;
}

/* Active menu item highlighting */
.nav-link.active {
    color: var(--text-primary);
}

.nav-link.active::after {
    width: 60%;
    background: linear-gradient(90deg, #f5ebe1, var(--primary));
}

/* Page-nav links (subpage internal navigation) — same active underline as .nav-link */
.page-nav-link {
    position: relative;
    padding: 0.5rem 0.1rem;
}

.page-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-nav-link:hover::after {
    width: 60%;
}

.page-nav-link.active {
    color: var(--text-primary);
}

.page-nav-link.active::after {
    width: 60%;
    background: linear-gradient(90deg, #f5ebe1, var(--primary));
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

/* Header CTA button refinement */
.header-actions .btn-sm {
    white-space: nowrap;
    padding: 0.55rem 1.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 50px;
    border: 1px solid rgba(var(--overlay-rgb), 0.18);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.32), inset 0 1px 0 rgba(var(--overlay-rgb), 0.35);
}

.header-actions .btn-sm:hover {
    box-shadow: 0 6px 24px rgba(59, 130, 246, 0.55), inset 0 1px 0 rgba(var(--overlay-rgb), 0.4);
    transform: translateY(-2px);
}

/* --- Theme Toggle Button: clean, minimal, no circle around the icon --- */
.theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    -webkit-tap-highlight-color: transparent;
}

.theme-toggle:hover {
    color: var(--text-primary);
    transform: translateY(-1px);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: 2px;
}

/* Kattintáskor "cyber pop" */
.theme-toggle:active {
    transform: scale(0.9);
}
/* Ikonok egymáson: forgással + méretezéssel úsznak át */
.theme-toggle .theme-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 19px;
    height: 19px;
    margin: -9.5px 0 0 -9.5px;
    display: block;
    transform-origin: center center;
    transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.4s ease;
    will-change: transform, opacity;
}

/* Dark mode (alap): nap látszik, hold kiforog/eltűnik */
.theme-toggle .theme-icon-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}
.theme-toggle .theme-icon-moon {
    opacity: 0;
    transform: rotate(-90deg) scale(0.3);
}

/* Light mode: nap kiforog, hold beúszik */
:root[data-theme="light"] .theme-toggle .theme-icon-sun {
    opacity: 0;
    transform: rotate(90deg) scale(0.3);
}
:root[data-theme="light"] .theme-toggle .theme-icon-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Hoverre az aktív ikon kicsit felélénkül */
.theme-toggle:hover .theme-icon-sun { transform: rotate(35deg) scale(1.08); }
:root[data-theme="light"] .theme-toggle:hover .theme-icon-moon { transform: rotate(-25deg) scale(1.08); }


/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .theme-toggle .theme-icon { transition-duration: 0.01ms; }
    .theme-icon { animation: none; }
}

/* Keep header actions tidy on small screens */
@media (max-width: 560px) {
    .theme-toggle { width: 36px; height: 36px; }
    .theme-toggle .theme-icon { width: 17px; height: 17px; margin: -8.5px 0 0 -8.5px; }
}

/* Body scroll lock when menu is open */
body:has(#mobile-nav-toggle-checkbox:checked) {
    overflow: hidden;
}

/* Mobile Toggle */
.mobile-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
}

.mobile-nav-toggle span {
    width: 100%;
    height: 2px;
    background-color: var(--text-primary);
    transition: var(--transition-smooth);
    transform-origin: left center;
}

#mobile-nav-toggle-checkbox:checked ~ .main-header .mobile-nav-toggle span:nth-child(1) {
    transform: rotate(45deg);
}

#mobile-nav-toggle-checkbox:checked ~ .main-header .mobile-nav-toggle span:nth-child(2) {
    opacity: 0;
}

#mobile-nav-toggle-checkbox:checked ~ .main-header .mobile-nav-toggle span:nth-child(3) {
    transform: rotate(-45deg);
}

/* Mobile Drawer */
.mobile-drawer {
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-base);
    z-index: 999;
    padding: 2rem;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-smooth);
    border-top: 1px solid var(--border-color);
    /* Allow the menu to scroll when it is taller than the viewport */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    max-height: calc(100vh - 76px);
    max-height: calc(100dvh - 76px);
}

#mobile-nav-toggle-checkbox:checked ~ .mobile-drawer {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

/* On desktop, the mobile drawer & toggle must never show, even if the
   checkbox is left checked after resizing the browser window. */
@media (min-width: 1025px) {
    .mobile-drawer {
        display: none !important;
    }

    .mobile-nav-toggle {
        display: none !important;
    }

    body:has(#mobile-nav-toggle-checkbox:checked) {
        overflow: visible;
    }
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mobile-link {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(var(--overlay-rgb), 0.04);
}

.mobile-cta {
    margin-top: 1rem;
    width: 100%;
}

/* --- Hero Section --- */
.hero-section {
    padding-top: 8.5rem;
    padding-bottom: 5rem;
    min-height: 88vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
    background:
        radial-gradient(ellipse 90% 60% at 50% -10%, rgba(var(--primary-rgb), 0.04), transparent 70%);
}

/* Subtle sci-fi grid + dot matrix overlay for depth */
.site-grid-overlay {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(var(--primary-rgb), 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--primary-rgb), 0.028) 1px, transparent 1px),
        radial-gradient(rgba(var(--primary-rgb), 0.05) 1px, transparent 1px);
    background-size: 64px 64px, 64px 64px, 16px 16px;
    background-position: center center;
    -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 40%, #000 0%, #000 60%, transparent 100%);
    mask-image: radial-gradient(ellipse 90% 90% at 50% 40%, #000 0%, #000 60%, transparent 100%);
}

/* --- Slogan Bar at top of Hero Section --- */
.hero-slogan-bar {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(var(--overlay-rgb), 0.02);
    border: 1px solid rgba(var(--overlay-rgb), 0.07);
    padding: 0.4rem 1.2rem;
    border-radius: 50px;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: var(--transition-smooth);
    box-shadow: 0 4px 12px rgba(var(--shadow-rgb), 0.15);
}

.hero-slogan-bar:hover {
    border-color: var(--border-glowing);
    box-shadow: 0 4px 20px rgba(var(--primary-rgb), 0.1);
    transform: translateY(-1px);
}

.slogan-divider {
    color: rgba(var(--primary-rgb), 0.25);
    font-size: 0.75rem;
    user-select: none;
}

.slogan-segment {
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (max-width: 768px) {
    .hero-slogan-bar {
        display: flex;
        justify-content: center;
        margin: 0 auto 1.5rem auto;
        max-width: fit-content;
        font-size: 0.75rem;
        gap: 0.5rem;
        padding: 0.35rem 1rem;
    }
}

.hero-glow-1 {
    position: absolute;
    width: 600px;
    height: 600px;
    top: -150px;
    right: -100px;
    background: radial-gradient(circle, rgba(var(--primary-rgb), 0.04) 0%, rgba(var(--primary-rgb), 0.005) 60%, rgba(var(--shadow-rgb), 0) 100%);
    z-index: 0;
    pointer-events: none;
}

.hero-glow-2 {
    position: absolute;
    width: 500px;
    height: 500px;
    bottom: -100px;
    left: -100px;
    background: radial-gradient(circle, rgba(var(--primary-rgb), 0.03) 0%, rgba(var(--primary-rgb), 0.002) 50%, rgba(var(--shadow-rgb), 0) 100%);
    z-index: 0;
    pointer-events: none;
}

.hero-container {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 3rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-top-full-width {
    grid-column: 1 / -1;
    margin-bottom: 1.75rem;
    width: 100%;
}

.huge-hero-top-title {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(2.2rem, 8vw, 5rem);
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin: 0;
}

@media (max-width: 768px) {
    .huge-hero-top-title {
        text-align: center;
    }
    .hero-top-full-width {
        margin-bottom: 1.5rem;
    }
}

.hero-title {
    font-size: clamp(2rem, 6vw, 3.5rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
}

.hero-subtitle {
    font-size: 1.15rem;
    color: var(--text-secondary);
    max-width: 540px;
    margin-bottom: 2.5rem;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
}

.hero-visual {
    width: 100%;
    display: block;
    align-self: stretch;   /* fill the full height of the hero row */
}

/* --- Companies Protected by Yazata (trusted company badges) --- */
.trusted-companies {
    margin-bottom: 1.5rem;
    text-align: center;
}

.trusted-rotator {
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    min-height: 2rem;
}

.trusted-rotator .trusted-badge {
    grid-area: 1 / 1;
    opacity: 0;
    /* 8 companies x 7s = 56s for one full cycle (see the delays below) */
    animation: trusted-rotate 56s linear infinite;
}

/* 1 step = 7s = 12.5% of the cycle */
.trusted-rotator .trusted-badge:nth-child(1) { animation-delay: 0s; }
.trusted-rotator .trusted-badge:nth-child(2) { animation-delay: 7s; }
.trusted-rotator .trusted-badge:nth-child(3) { animation-delay: 14s; }
.trusted-rotator .trusted-badge:nth-child(4) { animation-delay: 21s; }
.trusted-rotator .trusted-badge:nth-child(5) { animation-delay: 28s; }
.trusted-rotator .trusted-badge:nth-child(6) { animation-delay: 35s; }
.trusted-rotator .trusted-badge:nth-child(7) { animation-delay: 42s; }
.trusted-rotator .trusted-badge:nth-child(8) { animation-delay: 49s; }

/* Each company fades in (0.5s), holds for 6s, then fades out (0.5s). */
@keyframes trusted-rotate {
    0%    { opacity: 0; transform: translateY(6px); }
    0.9%  { opacity: 1; transform: translateY(0); }
    10.7% { opacity: 1; transform: translateY(0); }
    12.5% { opacity: 0; transform: translateY(-6px); }
    100%  { opacity: 0; transform: translateY(6px); }
}

@keyframes trusted-rotate-flat {
    0%    { opacity: 0; }
    0.9%  { opacity: 1; }
    10.7% { opacity: 1; }
    12.5% { opacity: 0; }
    100%  { opacity: 0; }
}

/* The OS/browser may request reduced motion (e.g. Windows "Animation effects" = off),
   which would otherwise freeze the rotation on the first company forever. In that
   case keep the company rotation but drop the vertical slide, using a plain cross-fade. */
@media (prefers-reduced-motion: reduce) {
    .trusted-rotator .trusted-badge {
        animation-name: trusted-rotate-flat;
    }
}

.trusted-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    background: rgba(var(--overlay-rgb), 0.04);
    border: 1px solid rgba(var(--overlay-rgb), 0.1);
    border-radius: 50px;
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--text-secondary);
    white-space: nowrap;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: var(--transition-fast);
}

.trusted-badge svg {
    flex-shrink: 0;
    color: var(--accent-green);
}

.trusted-badge:hover {
    border-color: rgba(var(--overlay-rgb), 0.2);
    background: rgba(var(--overlay-rgb), 0.07);
    color: var(--text-primary);
    transform: translateY(-1px);
}

/* ==========================================================================
   HERO TRUST PANEL
   The embedded hero video was removed, which left the right-hand hero column
   almost empty. This panel fills that space with content that already exists
   on the page (the protected-companies rotator plus the four key metrics moved
   up from the sub-hero summary strip) and deliberately reuses the look and the
   hover effects of the "System Traffic Telemetry" cards (.net-card):
   elevated flat surface, hairline border, a glow line that fades in along the
   top edge, and a small lift on hover.
   ========================================================================== */

.hero-trust-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.3rem;
    height: 100%;
    padding: 1.5rem;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: var(--transition-smooth);
}

/* Top-edge glow line, revealed on hover (mirrors .net-card::before) */
.hero-trust-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.3), transparent);
    opacity: 0;
    transition: var(--transition-smooth);
}

.hero-trust-panel:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--primary-rgb), 0.3);
    box-shadow: 0 10px 30px rgba(var(--shadow-rgb), 0.4);
}

.hero-trust-panel:hover::before {
    opacity: 1;
}

/* --- Panel header (mirrors the .network-stats-header grouping) --- */
.hero-panel-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-align: center;
}

.hero-panel-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.3;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* The panel owns the vertical rhythm, so drop the standalone margin and stack
   the header + rotator as one unit */
.hero-trust-panel .trusted-companies {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 0;
    text-align: left;
}

.hero-trust-panel .trusted-rotator {
    justify-items: center;
}

/* Company chips read as elevated telemetry chips */
.hero-trust-panel .trusted-badge {
    gap: 0.5rem;
    padding: 0.45rem 1rem;
    font-size: 0.9rem;
    background: var(--bg-surface);
}

.hero-trust-panel .trusted-badge svg {
    width: 16px;
    height: 16px;
}

/* Dashed hairline, echoing the .net-card-footer separator */
.hero-panel-divider {
    display: block;
    height: 0;
    border-top: 1px dashed rgba(var(--overlay-rgb), 0.08);
}

/* --- Key metric tiles: miniature .net-card clones --- */
.hero-panel-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    text-align: left;
}

.hero-panel-metric {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.85rem 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    transition: var(--transition-smooth);
}

/* Same top-edge glow line as the parent panel / .net-card */
.hero-panel-metric::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.3), transparent);
    opacity: 0;
    transition: var(--transition-smooth);
}

.hero-panel-metric:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--primary-rgb), 0.3);
    box-shadow: 0 10px 30px rgba(var(--shadow-rgb), 0.4);
}

.hero-panel-metric:hover::before {
    opacity: 1;
}

.hero-panel-metric-value {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1.15;
    background: linear-gradient(135deg, #93c5fd 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Per-tile accents, mirroring the telemetry cards (blue / violet / emerald / blue) */
.hero-panel-metric:nth-child(2) .hero-panel-metric-value {
    background: linear-gradient(135deg, #c4b5fd 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-panel-metric:nth-child(3) .hero-panel-metric-value {
    background: linear-gradient(135deg, #6ee7b7 0%, #10b981 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Light theme: deepen the accents so they stay legible on light tiles */
:root[data-theme="light"] .hero-panel-metric-value {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

:root[data-theme="light"] .hero-panel-metric:nth-child(2) .hero-panel-metric-value {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

:root[data-theme="light"] .hero-panel-metric:nth-child(3) .hero-panel-metric-value {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-panel-metric-value--sm {
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}

.hero-panel-metric-label {
    font-size: 0.76rem;
    line-height: 1.35;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .hero-trust-panel {
        padding: 1.25rem;
        gap: 1.15rem;
    }

    .hero-panel-metrics {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/* Hero Interactive Threat Shield Visual */
.hero-interactive-shield {
    position: relative;
    width: 100%;
    max-width: 550px;
    height: 480px;
    background: rgba(11, 15, 25, 0.4);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(var(--shadow-rgb), 0.6), inset 0 1px 0 rgba(var(--overlay-rgb), 0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--transition-smooth);
}

/* Light theme: lighten the interactive shield panel so it blends with the page */
:root[data-theme="light"] .hero-interactive-shield {
    background: rgba(255, 255, 255, 0.6);
}

.hero-interactive-shield:hover {
    border-color: rgba(var(--primary-rgb), 0.2);
    box-shadow: 0 25px 60px rgba(129, 140, 248, 0.1), inset 0 1px 0 rgba(var(--overlay-rgb), 0.08);
}

.hero-interactive-shield canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    cursor: crosshair;
}

/* --- Summary Metrics Section --- */
.summary-section {
    background-color: rgba(var(--elev-rgb), 0.9);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 2.5rem 0;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.metric-card {
    text-align: center;
    border-right: 1px solid var(--border-color);
}

.metric-card:last-child {
    border-right: none;
}

.metric-value {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 2.2rem;
    color: var(--text-primary);
    background: linear-gradient(135deg, #818cf8 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.25rem;
}

.metric-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

/* --- Hero Live Telemetry Badge --- */
.hero-live-telemetry-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.85rem;
    background: rgba(var(--elev-rgb), 0.85);
    border: 1px solid rgba(129, 140, 248, 0.3);
    border-radius: 20px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 15px rgba(var(--shadow-rgb), 0.3);
}

.live-dot-mini {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--accent-green);
    box-shadow: 0 0 10px var(--accent-green);
    animation: livePulse 2s infinite ease-in-out;
}

.hero-badge-label {
    font-weight: 500;
    color: var(--text-secondary);
}

.hero-badge-value {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--text-primary);
}

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

/* --- Network Stats Telemetry Section (Sub-Hero Summary) --- */
.network-stats-container {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(var(--overlay-rgb), 0.06);
}

/* The metrics strip moved up into the hero trust panel, so in this section the
   telemetry block is now the first element. Drop the separator that used to
   divide it from the metrics grid above. */
.summary-section > .container > .network-stats-container:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.network-stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.network-stats-title-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.live-pulse-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--accent-green);
    box-shadow: 0 0 12px var(--accent-green);
    animation: livePulse 1.8s infinite ease-in-out;
}

.network-stats-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.network-stats-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    background: rgba(0, 230, 118, 0.08);
    border: 1px solid rgba(0, 230, 118, 0.25);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-green);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.network-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.net-card {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    transition: var(--transition-smooth);
}

.net-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.3), transparent);
    opacity: 0;
    transition: var(--transition-smooth);
}

.net-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--primary-rgb), 0.3);
    box-shadow: 0 10px 30px rgba(var(--shadow-rgb), 0.4);
}

.net-card:hover::before {
    opacity: 1;
}

.net-card-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.net-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(var(--overlay-rgb), 0.05);
    color: var(--primary);
}

.net-card-recv .net-icon {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.12);
}

.net-card-sent .net-icon {
    color: #a78bfa;
    background: rgba(167, 139, 250, 0.12);
}

.net-card-total .net-icon {
    color: #34d399;
    background: rgba(52, 211, 153, 0.12);
}

.net-card-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.net-card-value-wrapper {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.net-value {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 2.2rem;
    line-height: 1;
    color: var(--text-primary);
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

.net-card-recv .net-value {
    background: linear-gradient(135deg, #93c5fd 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.net-card-sent .net-value {
    background: linear-gradient(135deg, #c4b5fd 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.net-card-total .net-value {
    background: linear-gradient(135deg, #6ee7b7 0%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Light theme: deepen the metric gradients so they stay legible on light cards */
:root[data-theme="light"] .net-card-recv .net-value {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
:root[data-theme="light"] .net-card-sent .net-value {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
:root[data-theme="light"] .net-card-total .net-value {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.net-unit {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-secondary);
}

.net-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.75rem;
    border-top: 1px dashed rgba(var(--overlay-rgb), 0.08);
    font-size: 0.78rem;
}

.net-sublabel {
    color: var(--text-muted);
}

.net-rate {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text-secondary);
}

@media (max-width: 992px) {
    .network-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .network-stats-grid {
        grid-template-columns: 1fr;
    }
    .net-value {
        font-size: 1.8rem;
    }
}

/* --- Section Headers --- */
.section-header {
    max-width: 600px;
    margin: 0 auto 4.5rem auto;
}

.section-title {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    letter-spacing: -0.01em;
    margin-bottom: 1rem;
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
}

.section-tag {
    font-family: var(--font-heading);
    color: var(--primary);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 0.75rem;
}

.section-desc {
    color: var(--text-secondary);
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

/* --- Features Section --- */
.features-section {
    background-color: rgba(var(--veil-rgb), 0.72);
}

.feature-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    transition: var(--transition-smooth);
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: var(--border-glowing);
    box-shadow: 0 10px 30px rgba(var(--overlay-rgb), 0.02);
}

.card-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(400px circle at center, rgba(var(--primary-rgb), 0.04), transparent 60%);
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.feature-card:hover .card-glow {
    opacity: 1;
}

.feature-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(var(--overlay-rgb), 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    margin-bottom: 1.5rem;
    border: 1px solid rgba(var(--overlay-rgb), 0.1);
    position: relative;
    z-index: 1;
}

.feature-icon {
    width: 24px;
    height: 24px;
}

.feature-card-title {
    font-size: 1.3rem;
    margin-bottom: 0.75rem;
    position: relative;
    z-index: 1;
}

.feature-card-desc {
    color: var(--text-secondary);
    font-size: 0.95rem;
    position: relative;
    z-index: 1;
}

/* --- Layer 2 / Architecture Section --- */
.architecture-section {
    background-color: rgba(var(--elev-rgb), 0.9);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.features-list {
    margin-top: 2rem;
}

.features-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.bullet-icon {
    width: 20px;
    height: 20px;
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.features-list li span {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.features-list li span strong {
    color: var(--text-primary);
}

/* Generic "More Information" CTA — used under section text blocks
   (Layer 2 architecture section, Threat Intelligence data flow panel). */
.more-info-cta {
    display: flex;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.more-info-cta .btn {
    gap: 0.5rem;
}

.more-info-cta .btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.more-info-cta .btn:hover svg {
    transform: translateX(4px);
}

/* Adaptability tabs: keep the pane-feature spacing rhythm unchanged
   (the trailing CTA re-enables .pane-feature's 1.5rem bottom margin) */
.tab-pane-text .more-info-cta {
    margin-top: 0.5rem;
}

/* CTA inside a centered text block (.section-header.text-center etc.) —
   text-align does not affect a flex container, so center it explicitly */
.text-center .more-info-cta {
    justify-content: center;
}

/* Interactive Network Diagram styling */
.architecture-diagram-container {
    background-color: var(--bg-base);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 15px 40px rgba(var(--shadow-rgb), 0.3);
}

.diagram-title {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.diagram-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
}

.network-diagram {
    position: relative;
    height: 280px;
    margin: 2.5rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: rgba(var(--abyss-rgb), 0.4);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.5rem;
    box-shadow: inset 0 2px 10px rgba(var(--shadow-rgb), 0.5);
}

.diagram-column {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 10;
}

.diagram-connector {
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 15px;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    z-index: 5;
}

.cable-line {
    height: 2px;
    width: 100%;
    background-color: var(--border-color);
}

.branch-connector {
    width: 50px;
    height: 190px;
    flex-shrink: 0;
    position: relative;
    align-self: center;
}

.branch-svg {
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.8;
}

.branch-svg path {
    stroke: var(--border-color);
    stroke-width: 2px;
    transition: var(--transition-smooth);
}

.network-diagram:hover .branch-svg path {
    stroke: rgba(var(--overlay-rgb), 0.1);
}

.device-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: flex-start;
    flex-shrink: 0;
    z-index: 10;
}

.network-node {
    width: 60px;
    height: 60px;
    background-color: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
    cursor: help;
    transition: var(--transition-smooth);
}

.network-node:hover {
    border-color: var(--primary);
    box-shadow: 0 0 15px rgba(var(--overlay-rgb), 0.1);
    transform: translateY(-2px);
}

.node-icon {
    width: 26px;
    height: 26px;
    color: var(--text-secondary);
    transition: var(--transition-smooth);
}

.network-node:hover .node-icon {
    color: var(--primary);
}

.node-name {
    position: absolute;
    bottom: -22px;
    font-size: 0.65rem;
    color: var(--text-secondary);
    white-space: nowrap;
    font-family: var(--font-heading);
    font-weight: 600;
}

/* Glowing Custom Yazata Node */
.node-yazata {
    width: 70px;
    height: 70px;
    background-color: var(--bg-base);
    border: 1px solid rgba(var(--primary-rgb), 0.3);
    border-radius: 16px;
    box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.1);
}

.node-yazata.glowing {
    animation: yazataPulse 3s infinite alternate;
}

@keyframes yazataPulse {
    0% {
        box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.1), inset 0 0 10px rgba(var(--primary-rgb), 0.05);
        border-color: rgba(var(--primary-rgb), 0.2);
    }
    100% {
        box-shadow: 0 0 25px rgba(var(--primary-rgb), 0.3), inset 0 0 15px rgba(var(--primary-rgb), 0.15);
        border-color: rgba(var(--primary-rgb), 0.7);
    }
}

.node-icon-custom {
    width: 34px;
    height: 34px;
}

.badge-yazata {
    background: linear-gradient(135deg, #818cf8 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    font-size: 0.7rem;
    bottom: -22px;
}

/* Packets Flowing */
.packet-flow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.packet-flow::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--accent-green);
    box-shadow: 0 0 8px var(--accent-green);
    animation: flowGreen 2s infinite linear;
}

/* Mixed flow (includes threats before Yazata) */
.flow-mixed::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--accent-red);
    box-shadow: 0 0 8px var(--accent-red);
    animation: flowRed 2.5s infinite linear 0.7s;
}

@keyframes flowGreen {
    0% { left: 0%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

@keyframes flowRed {
    0% { left: 0%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

/* Dynamic custom threat packets */
.temp-threat-packet {
    position: absolute;
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--accent-red);
    box-shadow: 0 0 10px var(--accent-red);
    z-index: 100;
    pointer-events: none;
    opacity: 0;
}

/* Second branch packet (splits from the Switch toward the Wired LAN) */
.temp-threat-packet.temp-threat-packet-2 {
    background-color: #ff6b35;
    box-shadow: 0 0 10px #ff6b35;
}



.device-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background-color: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    width: 145px;
    transition: var(--transition-smooth);
    cursor: help;
    position: relative;
}

.device-item:hover {
    border-color: var(--accent-blue);
    box-shadow: 0 0 10px rgba(26, 140, 255, 0.15);
    transform: translateX(2px);
}

/* Compromised / Infected State for internal devices */
.device-item.compromised {
    border-color: rgba(255, 77, 77, 0.6) !important;
    background-color: rgba(255, 77, 77, 0.04) !important;
    box-shadow: 0 0 20px rgba(255, 77, 77, 0.35) !important;
    animation: deviceCompromisedPulse 1s infinite alternate;
}

.device-item.compromised .device-icon {
    color: var(--accent-red) !important;
}

.device-item.compromised span {
    color: var(--accent-red) !important;
}

@keyframes deviceCompromisedPulse {
    0% {
        border-color: rgba(255, 77, 77, 0.4);
        box-shadow: 0 0 10px rgba(255, 77, 77, 0.15);
    }
    100% {
        border-color: var(--accent-red);
        box-shadow: 0 0 25px rgba(255, 77, 77, 0.5);
    }
}

.device-icon {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: var(--transition-smooth);
}

.device-item:hover .device-icon {
    color: var(--primary);
}

.device-item span {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    font-family: var(--font-heading);
    white-space: nowrap;
    transition: var(--transition-smooth);
}

.device-item:hover span {
    color: var(--text-primary);
}

/* Tooltip Styling */
[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background-color: rgba(var(--deep-rgb), 0.95);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.5rem 0.8rem;
    border-radius: 6px;
    font-size: 0.75rem;
    white-space: normal;
    width: max-content;
    max-width: 240px;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-smooth);
    box-shadow: 0 5px 15px rgba(var(--shadow-rgb), 0.5);
}

[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.diagram-controls {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}

.control-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.shield-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.toggle-label {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.btn-shield-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(var(--overlay-rgb), 0.03);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 0.4rem 1rem;
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.btn-shield-toggle:hover {
    border-color: rgba(var(--overlay-rgb), 0.2);
    background: rgba(var(--overlay-rgb), 0.06);
}

.shield-toggle-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--text-muted);
    box-shadow: 0 0 6px rgba(var(--overlay-rgb), 0.1);
    transition: var(--transition-smooth);
}

/* Shield Active state */
.btn-shield-toggle.active {
    border-color: rgba(0, 230, 118, 0.3);
    background: rgba(0, 230, 118, 0.06);
    color: #ffffff;
    box-shadow: 0 0 15px rgba(0, 230, 118, 0.05);
}

.btn-shield-toggle.active:hover {
    border-color: rgba(0, 230, 118, 0.5);
    background: rgba(0, 230, 118, 0.1);
}

.btn-shield-toggle.active .shield-toggle-indicator {
    background-color: var(--accent-green);
    box-shadow: 0 0 10px var(--accent-green);
}

/* Shield Disabled / Bypassed state */
.btn-shield-toggle.bypassed {
    border-color: rgba(255, 145, 0, 0.3);
    background: rgba(255, 145, 0, 0.06);
    color: #ffffff;
    box-shadow: 0 0 15px rgba(255, 145, 0, 0.05);
}

.btn-shield-toggle.bypassed:hover {
    border-color: rgba(255, 145, 0, 0.5);
    background: rgba(255, 145, 0, 0.1);
}

.btn-shield-toggle.bypassed .shield-toggle-indicator {
    background-color: var(--accent-orange);
    box-shadow: 0 0 10px var(--accent-orange);
}

/* Light theme: the shield toggle text must switch to a dark, legible colour
   (the base rules hard-code white, which vanishes on the light tinted pill) */
:root[data-theme="light"] .btn-shield-toggle.active {
    color: #065f46;
    border-color: rgba(5, 150, 105, 0.45);
    background: rgba(16, 185, 129, 0.12);
}
:root[data-theme="light"] .btn-shield-toggle.active:hover {
    border-color: rgba(5, 150, 105, 0.7);
    background: rgba(16, 185, 129, 0.18);
}
:root[data-theme="light"] .btn-shield-toggle.bypassed {
    color: #92400e;
    border-color: rgba(217, 119, 6, 0.45);
    background: rgba(245, 158, 11, 0.12);
}
:root[data-theme="light"] .btn-shield-toggle.bypassed:hover {
    border-color: rgba(217, 119, 6, 0.7);
    background: rgba(245, 158, 11, 0.18);
}

/* Bypassed Yazata Node visual styling */
.node-yazata.bypassed {
    animation: none !important;
    border-color: rgba(var(--overlay-rgb), 0.15) !important;
    box-shadow: none !important;
    opacity: 0.45;
}

.node-yazata.bypassed svg path {
    stroke: var(--text-muted) !important;
    fill: rgba(var(--overlay-rgb), 0.02) !important;
}

.node-yazata.bypassed svg circle {
    fill: var(--text-muted) !important;
}

.node-yazata.bypassed .badge-yazata {
    background: none !important;
    -webkit-text-fill-color: var(--text-muted) !important;
    color: var(--text-muted) !important;
}

/* Show red threat packets on Connector 3 when Yazata is bypassed */
.network-diagram.yazata-bypassed .connector-3 .packet-flow::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--accent-red);
    box-shadow: 0 0 8px var(--accent-red);
    animation: flowRed 2.5s infinite linear 0.7s;
}

#diagramStatusMessage {
    display: block;
}

.status-msg {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    display: block;
    opacity: 1;
    transition: color 0.3s ease, opacity 0.3s ease;
}

.status-normal {
    color: var(--accent-green);
}

.status-simulating {
    color: var(--accent-orange);
}

.status-blocked {
    color: var(--accent-green);
}

.status-bypassed {
    color: var(--accent-orange);
}

.status-breached {
    color: var(--accent-red);
    font-weight: 600;
    animation: statusBreachedBlink 1s infinite alternate;
}

@keyframes statusBreachedBlink {
    0% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* Active threat simulation flashing Yazata Node Red */
.network-diagram.simulating-active #yazataNode {
    animation: flashBlocked 2.4s forwards;
}

@keyframes flashBlocked {
    0%, 45% {
        border-color: rgba(var(--primary-rgb), 0.3);
        box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.1);
    }
    50% {
        border-color: var(--accent-red);
        box-shadow: 0 0 35px var(--accent-red), inset 0 0 20px var(--accent-red);
    }
    65% {
        box-shadow: 0 0 50px var(--accent-red), inset 0 0 30px var(--accent-red);
    }
    80% {
        border-color: var(--accent-red);
        box-shadow: 0 0 35px var(--accent-red), inset 0 0 20px var(--accent-red);
    }
    85%, 100% {
        border-color: rgba(var(--primary-rgb), 0.7);
        box-shadow: 0 0 25px rgba(var(--primary-rgb), 0.3);
    }
}

/* --- Threat Intelligence Section --- */
.threat-intel-section {
    background-color: rgba(var(--veil-rgb), 0.72);
    position: relative;
    overflow: hidden;
}

.threat-intel-section .section-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    top: 50%;
    left: -200px;
    transform: translateY(-50%);
    background: radial-gradient(circle, rgba(var(--overlay-rgb), 0.01) 0%, rgba(var(--shadow-rgb), 0) 70%);
    z-index: 0;
    pointer-events: none;
}

.threat-intel-centered {
    max-width: 750px;
    margin: 0 auto;
}

.threat-intel-centered .section-desc {
    max-width: 650px;
    margin: 0 auto 2.5rem auto;
}

/* Accordion Component */
.accordion {
    margin-top: 2rem;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

.accordion-item {
    border-bottom: 1px solid var(--border-color);
    padding: 1.25rem 0;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--text-primary);
    transition: var(--transition-fast);
}

.accordion-header:hover {
    color: var(--primary);
}

.accordion-arrow {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
    transition: transform 0.3s ease;
}

details.accordion-item summary {
    list-style: none;
    outline: none;
}

details.accordion-item summary::-webkit-details-marker {
    display: none;
}

details.accordion-item[open] .accordion-arrow {
    transform: rotate(180deg);
    color: var(--primary);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

details.accordion-item[open] .accordion-content {
    max-height: 150px;
    margin-top: 0.75rem;
}

.accordion-content p {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* Information Callout */
.info-callout {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--primary);
    border-radius: var(--border-radius);
    padding: 2rem;
    margin-top: 5rem;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.info-callout-icon {
    width: 32px;
    height: 32px;
    color: var(--primary);
    flex-shrink: 0;
}

.info-callout-content h4 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.info-callout-content p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* --- User Experience Section --- */
.ux-section {
    background-color: rgba(var(--elev-rgb), 0.9);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.ux-card {
    background-color: var(--bg-base);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 3rem;
    transition: var(--transition-smooth);
}

.ux-card:hover {
    border-color: rgba(var(--overlay-rgb), 0.15);
    box-shadow: 0 15px 40px rgba(var(--shadow-rgb), 0.4);
}

.ux-card-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.ux-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-icon {
    background-color: rgba(155, 93, 229, 0.08);
    color: var(--secondary);
    border: 1px solid rgba(155, 93, 229, 0.15);
}

.user-icon {
    background-color: rgba(26, 140, 255, 0.08);
    color: var(--accent-blue);
    border: 1px solid rgba(26, 140, 255, 0.15);
}

.ux-card-header h3 {
    font-size: 1.4rem;
}

.ux-card-lead {
    color: var(--text-primary);
    font-size: 1.05rem;
    margin-bottom: 2rem;
    font-weight: 500;
}

.ux-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.ux-list li:last-child {
    margin-bottom: 0;
}

.ux-list .tick {
    width: 18px;
    height: 18px;
    color: var(--accent-green);
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.ux-list span {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.ux-list span strong {
    color: var(--text-primary);
}

/* --- Adaptability Tabbed Section --- */
.adapt-section {
    background-color: rgba(var(--veil-rgb), 0.72);
}

.tabs-container {
    max-width: 900px;
    margin: 0 auto;
}

.tabs-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.tab-btn {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 1.25rem;
    border-radius: var(--border-radius);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.05rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    transition: var(--transition-smooth);
}

.tab-btn:hover {
    color: var(--text-primary);
    border-color: rgba(var(--overlay-rgb), 0.15);
    background-color: var(--bg-surface-elevated);
}

.tab-radio {
    display: none;
}

#tab-it-radio:checked ~ .tabs-nav .btn-it,
#tab-no-it-radio:checked ~ .tabs-nav .btn-no-it {
    color: var(--primary);
    border-color: var(--primary);
    background-color: rgba(var(--overlay-rgb), 0.03);
    box-shadow: 0 0 15px rgba(var(--overlay-rgb), 0.02);
}

.tab-icon {
    width: 22px;
    height: 22px;
}

.tabs-content-wrapper {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 3rem;
    box-shadow: 0 15px 40px rgba(var(--shadow-rgb), 0.3);
    min-height: 400px;
}

.tab-content {
    display: none;
    animation: fadeIn 0.4s ease-out;
}

#tab-it-radio:checked ~ .tabs-content-wrapper .pane-it,
#tab-no-it-radio:checked ~ .tabs-content-wrapper .pane-no-it {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.tab-pane-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 3rem;
    align-items: center;
}

.pane-title {
    font-size: 1.75rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.pane-desc {
    color: var(--text-secondary);
    font-size: 1.05rem;
    margin-bottom: 2rem;
}

.pane-feature {
    margin-bottom: 1.5rem;
}

.pane-feature:last-child {
    margin-bottom: 0;
}

.pane-feat-title {
    font-size: 1.1rem;
    margin-bottom: 0.4rem;
    color: var(--text-primary);
}

.pane-feature p {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* Tab visual blocks (Code card & Plug and Play Card) */
.flow-code-card {
    background-color: var(--bg-deepest);
    border: 1px solid rgba(var(--overlay-rgb), 0.05);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(var(--shadow-rgb), 0.4);
}

/* Gallery Layout */
.dashboard-gallery {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.dashboard-main-view {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: 0 15px 35px rgba(var(--shadow-rgb), 0.4);
    background-color: var(--bg-surface);
    cursor: zoom-in;
    transition: var(--transition-smooth);
}

.gallery-main-image {
    width: 100%;
    height: auto;
    display: block;
    transition: var(--transition-smooth);
}

.gallery-zoom-overlay {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background-color: rgba(var(--deep-rgb), 0.85);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    opacity: 0;
    transform: scale(0.9);
    transition: var(--transition-smooth);
    pointer-events: none;
    backdrop-filter: blur(4px);
}

.dashboard-main-view:hover {
    border-color: rgba(var(--overlay-rgb), 0.15);
    transform: translateY(-2px);
    box-shadow: 0 20px 45px rgba(var(--shadow-rgb), 0.5);
}

.dashboard-main-view:hover .gallery-main-image {
    transform: scale(1.02);
}

.dashboard-main-view:hover .gallery-zoom-overlay {
    opacity: 1;
    transform: scale(1);
}

.zoom-icon {
    width: 18px;
    height: 18px;
}

/* Thumbnail Navigation */
.gallery-thumbnails {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 0.5rem;
    width: 100%;
}

.thumb-btn {
    background-color: var(--bg-base);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 2px;
    cursor: pointer;
    overflow: hidden;
    transition: var(--transition-smooth);
    aspect-ratio: 16 / 10;
}

.thumb-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    opacity: 0.5;
    transition: var(--transition-smooth);
}

.thumb-btn:hover {
    border-color: rgba(var(--overlay-rgb), 0.15);
}

.thumb-btn:hover img {
    opacity: 0.8;
}

.thumb-btn.active {
    border-color: var(--primary);
    box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.2);
}

.thumb-btn.active img {
    opacity: 1;
}

.code-card-header {
    background-color: var(--code-bg);
    padding: 0.6rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-muted);
    border-bottom: 1px solid rgba(var(--overlay-rgb), 0.03);
}

.flow-code-card pre {
    padding: 1.5rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.5;
    margin: 0;
    overflow-x: auto;
}

.c-key { color: #80cbc4; }
.c-val { color: #c3e88d; }

/* Light theme: code syntax colours must be dark enough for the light card */
:root[data-theme="light"] .c-key { color: #0f766e; }
:root[data-theme="light"] .c-val { color: #3f6212; }

.plug-play-card {
    background-color: var(--bg-base);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 10px 30px rgba(var(--shadow-rgb), 0.3);
}

.step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--text-muted);
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

.step-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    max-width: 180px;
}

.step-text strong {
    color: var(--text-primary);
}

.step-arrow {
    font-size: 1.25rem;
    color: var(--text-muted);
    margin: 0.5rem 0;
}

.step-glowing {
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.2);
    animation: stepGlowPulse 2s infinite alternate;
}

@keyframes stepGlowPulse {
    from { box-shadow: 0 0 5px rgba(var(--primary-rgb), 0.1); }
    to { box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.35); }
}

.text-glow {
    color: var(--primary) !important;
    font-weight: 600;
}

/* --- Call to Action Section --- */
.cta-section {
    background-color: rgba(var(--veil-rgb), 0.72);
    overflow: hidden;
}

.cta-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    bottom: -150px;
    right: -100px;
    background: radial-gradient(circle, rgba(var(--overlay-rgb), 0.02) 0%, rgba(var(--overlay-rgb), 0.005) 50%, rgba(var(--shadow-rgb), 0) 100%);
    pointer-events: none;
    z-index: 0;
}

.cta-card {
    background: radial-gradient(circle at 100% 100%, rgba(var(--overlay-rgb), 0.01) 0%, rgba(var(--shadow-rgb), 0) 60%), 
                radial-gradient(circle at 0% 0%, rgba(var(--overlay-rgb), 0.02) 0%, rgba(var(--shadow-rgb), 0) 50%),
                var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 5rem 3rem;
    text-align: center;
    position: relative;
    z-index: 1;
    box-shadow: 0 20px 60px rgba(var(--shadow-rgb), 0.5);
    overflow: hidden;
}

.cta-card-content {
    max-width: 650px;
    margin: 0 auto;
}

.cta-title {
    font-size: clamp(1.75rem, 6vw, 3rem);
    line-height: 1.15;
    margin-bottom: 1rem;
}

.cta-desc {
    font-size: 1.15rem;
    color: var(--text-secondary);
    margin-bottom: 3rem;
}

.cta-action-container {
    display: flex;
    justify-content: center;
    margin: 0 auto 1.5rem auto;
}

.cta-input {
    flex: 1;
    background-color: rgba(var(--deep-rgb), 0.8);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0 1.5rem;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.95rem;
    transition: var(--transition-smooth);
}

.cta-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 10px rgba(var(--overlay-rgb), 0.1);
}

.form-subtext {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* --- Footer --- */
.main-footer {
    background-color: var(--bg-deepest);
    border-top: 1px solid var(--border-color);
    padding: 5rem 0 3rem 0;
}

.footer-container {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.logo-icon-sm {
    width: 28px;
    height: 28px;
}

.footer-tagline {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.copyright-text {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.footer-email {
    color: var(--text-primary);
    transition: var(--transition-fast);
}

.footer-email:hover {
    color: var(--primary);
    text-decoration: underline;
}

.footer-link-illutrium {
    color: #818cf8;
    font-weight: 500;
    transition: var(--transition-fast);
}

.footer-link-illutrium:hover {
    color: #3b82f6;
    text-decoration: underline;
}

.cloudflare-logo {
    display: inline-block;
    margin-left: 0.5rem;
    vertical-align: middle;
    height: 24px; /* match other footer icons */
    filter: none; /* keep original colors */
    opacity: 0.85;
}


.footer-col h4 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.footer-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 1.5rem;
    line-height: 1.6;
}

.footer-contact-wrapper {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.cloudflare-logo-standalone {
    height: 38px;
    opacity: 0.85;
    filter: none;
}

.footer-links-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.footer-col a {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.8rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-col a:hover {
    color: var(--primary);
}

/* 'Company info' footer link - uses the same indigo-blue gradient
   as the hero 'Threat Shield' title. */
.footer-company-link-wrap {
    margin: 0.35rem 0 0.9rem 0;
}
a.footer-link-gradient {
    display: inline-block;
    font-weight: 600;
    background: linear-gradient(135deg, #818cf8 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #3b82f6;
    text-decoration: none;
}

a.footer-link-gradient:hover {
    background: linear-gradient(135deg, #a5b4fc 0%, #60a5fa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #60a5fa;
}

/* Light theme: deepen footer gradient link for legibility on light bg */
:root[data-theme="light"] a.footer-link-gradient {
    background: linear-gradient(135deg, #4f46e5 0%, #2563eb 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
:root[data-theme="light"] a.footer-link-gradient:hover {
    background: linear-gradient(135deg, #4338ca 0%, #1d4ed8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- Deep DNS Filtering Section --- */
.dns-filtering-section {
    background-color: rgba(var(--elev-rgb), 0.9);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

/* Quote Card */
.dns-quote-card {
    background: linear-gradient(135deg, rgba(var(--overlay-rgb), 0.015) 0%, rgba(var(--overlay-rgb), 0.002) 100%), var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2.25rem;
    position: relative;
    margin-bottom: 0;
    box-shadow: 0 15px 35px rgba(var(--shadow-rgb), 0.3);
    overflow: hidden;
}

.quote-glow {
    position: absolute;
    width: 150px;
    height: 150px;
    top: -75px;
    right: -75px;
    background: radial-gradient(circle, rgba(129, 140, 248, 0.05) 0%, rgba(var(--shadow-rgb), 0) 70%);
    pointer-events: none;
}

.quote-icon {
    width: 28px;
    height: 28px;
    color: var(--primary-glow);
    margin-bottom: 1rem;
    opacity: 0.4;
}

.dns-quote-card blockquote {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-style: italic;
    color: var(--primary);
    line-height: 1.6;
    font-weight: 400;
}

/* Video Wrapper for responsive iframe */
.hero-video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 40px rgba(var(--shadow-rgb), 0.5), inset 0 1px 0 rgba(var(--overlay-rgb), 0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: var(--transition-smooth);
}

.hero-video-wrapper:hover {
    border-color: var(--border-glowing);
    box-shadow: 0 25px 50px rgba(129, 140, 248, 0.1), inset 0 1px 0 rgba(var(--overlay-rgb), 0.08);
}

.hero-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- Email Sentry & Incident Support Sections --- */
.email-sentry-section {
    background-color: rgba(var(--veil-rgb), 0.72);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.incident-support-section {
    background-color: rgba(var(--elev-rgb), 0.9);
    border-bottom: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.feature-visual-frame {
    position: relative;
    width: 100%;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid var(--border-color);
    background-color: var(--bg-surface-elevated);
    box-shadow: 0 20px 45px rgba(var(--shadow-rgb), 0.5), inset 0 1px 0 rgba(var(--overlay-rgb), 0.04);
    transition: var(--transition-smooth);
}

.feature-visual-frame::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.35), transparent);
    opacity: 0;
    transition: var(--transition-smooth);
    z-index: 2;
}

.feature-visual-frame:hover {
    border-color: var(--border-glowing);
    transform: translateY(-3px);
    box-shadow: 0 25px 55px rgba(var(--shadow-rgb), 0.6), 0 0 25px rgba(var(--primary-rgb), 0.08);
}

.feature-visual-frame:hover::before {
    opacity: 1;
}

.feature-visual-image {
    width: 100%;
    height: auto;
    display: block;
    transition: var(--transition-smooth);
}

.feature-visual-frame:hover .feature-visual-image {
    transform: scale(1.015);
}

/* Accreditations Block */
.accreditations-block {
    margin-top: 2rem;
    padding: 1.5rem;
    background-color: var(--bg-base);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--primary);
    border-radius: var(--border-radius);
}

.accreditations-title {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
    margin-bottom: 1rem;
}

.accreditations-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.accreditations-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.accreditation-icon {
    width: 18px;
    height: 18px;
    color: var(--accent-green);
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.accreditations-list li span {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .incident-support-visual {
        order: -1;
    }
}

/* --- Image Zoom Modal (Email Sentry / Incident Support) --- */
.zoomable-image {
    cursor: pointer;
}

.image-modal-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(var(--deep-rgb), 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 3000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 2rem;
}

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

.image-modal-overlay .modal-content {
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--border-glowing);
    box-shadow: 0 0 25px rgba(0, 200, 255, 0.2), 0 20px 60px rgba(var(--shadow-rgb), 0.7);
    object-fit: contain;
    transform: scale(0.92);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
    background-color: var(--bg-surface);
}

.image-modal-overlay.active .modal-content {
    transform: scale(1);
    opacity: 1;
}

.image-modal-overlay .close-modal {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    font-size: 3rem;
    line-height: 1;
    font-weight: 300;
    color: var(--text-secondary);
    cursor: pointer;
    z-index: 3100;
    transition: var(--transition-fast);
    user-select: none;
}

.image-modal-overlay .close-modal:hover {
    color: var(--text-primary);
    transform: scale(1.1);
}

.image-modal-overlay #caption {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 500;
    color: var(--primary);
    letter-spacing: 0.02em;
    text-align: center;
    max-width: 80vw;
    padding: 0.5rem 1.25rem;
    background-color: rgba(var(--elev-rgb), 0.85);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

@media (max-width: 768px) {
    .image-modal-overlay {
        padding: 1rem;
    }
    .image-modal-overlay .close-modal {
        top: 0.75rem;
        right: 1rem;
        font-size: 2.5rem;
    }
    .image-modal-overlay #caption {
        bottom: 1rem;
        font-size: 0.85rem;
        padding: 0.4rem 1rem;
    }
}

/* Hide the subpage logo badge on compact/mobile headers for a cleaner look */
@media (max-width: 868px) {
    .logo-badge {
        display: none;
    }
}

/* --- Responsive Media Queries --- */
@media (max-width: 1024px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 1rem;
    }
    
    .metric-card {
        border-right: none;
    }
    
    .metric-card:nth-child(odd) {
        border-right: 1px solid var(--border-color);
    }
    
    .network-diagram {
        justify-content: space-around;
    }
    
    .branch-connector, .device-column {
        display: none; /* Hide device components on smaller screens to prevent crowding */
    }

    /* Collapse the dense desktop nav into the mobile drawer earlier,
       so the menu items never wrap or crowd */
    .main-nav {
        display: none;
    }

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

@media (max-width: 768px) {
    .section {
        padding: 5rem 0;
    }
    
    .grid-2 {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .hero-subtitle {
        margin-left: auto;
        margin-right: auto;
    }
    
    .hero-buttons {
        justify-content: center;
    }
    
    .hero-interactive-shield {
        margin: 0 auto;
        height: 380px;
        max-width: 100%;
    }
    
    .hardware-container {
        margin: 0 auto;
    }
    
    .main-nav {
        display: none;
    }
    
    .mobile-nav-toggle {
        display: flex;
    }
    
    .tabs-nav {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .tab-pane-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .tab-pane-visual {
        order: -1;
    }
    
    .tabs-content-wrapper {
        padding: 2rem;
    }
    
    .footer-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .footer-links-group {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-3 {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .grid-4 {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 480px) {
    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .hero-buttons .btn {
        width: 100%;
    }
    
    .metrics-grid {
        grid-template-columns: 1fr;
    }
    
    .metric-card {
        border-right: none !important;
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 1rem;
    }
    
    .metric-card:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    
    
    
    .cta-input {
        height: 50px;
    }
    
    .footer-links-group {
        grid-template-columns: 1fr;
    }
}

/* --- Success Modal (CSS-only) --- */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(var(--deep-rgb), 0.95);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay:target {
    display: flex;
    opacity: 1;
}

.modal-content {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-glowing);
    border-radius: var(--border-radius);
    padding: 3rem;
    max-width: 450px;
    width: 90%;
    position: relative;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 240, 255, 0.15);
    transform: translateY(-20px);
    transition: transform 0.3s ease;
}

.modal-overlay:target .modal-content {
    transform: translateY(0);
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 2.2rem;
    color: var(--text-muted);
    line-height: 1;
    font-weight: 300;
}

.modal-close:hover {
    color: var(--text-primary);
}

.success-icon-wrapper {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: rgba(0, 230, 118, 0.08);
    color: var(--accent-green);
    border: 1px solid rgba(0, 230, 118, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem auto;
}

.success-icon {
    width: 32px;
    height: 32px;
}

.modal-title {
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.modal-desc {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.modal-btn-close {
    width: 100%;
}

/* --- Ultra-mobile adjustments for narrow screens --- */
@media (max-width: 360px) {
    .network-diagram {
        padding: 0.85rem;
    }
    .network-node {
        width: 50px;
        height: 50px;
    }
    .node-yazata {
        width: 60px;
        height: 60px;
    }
    .node-icon {
        width: 22px;
        height: 22px;
    }
    .node-icon-custom {
        width: 28px;
        height: 28px;
    }
    .node-name {
        font-size: 0.6rem;
        bottom: -20px;
    }
    .badge-yazata {
        font-size: 0.65rem;
        bottom: -20px;
    }
}

/* Lightbox Modal */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--deep-rgb), 0.98);
    backdrop-filter: blur(12px);
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    background: transparent;
    border: none;
    font-size: 3rem;
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1;
    z-index: 2600;
    transition: var(--transition-fast);
}

.lightbox-close:hover {
    color: var(--text-primary);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(var(--overlay-rgb), 0.02);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2600;
    transition: var(--transition-smooth);
    user-select: none;
}

.lightbox-nav:hover {
    background: rgba(var(--overlay-rgb), 0.08);
    color: var(--text-primary);
    border-color: rgba(var(--overlay-rgb), 0.2);
}

.lightbox-prev {
    left: 2rem;
}

.lightbox-next {
    right: 2rem;
}

.lightbox-content {
    max-width: 85%;
    max-height: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.lightbox-img {
    max-width: 100%;
    max-height: 70vh;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 50px rgba(var(--shadow-rgb), 0.6);
    object-fit: contain;
}

.lightbox-caption {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--primary);
    letter-spacing: 0.02em;
    text-align: center;
}

@media (max-width: 768px) {
    .lightbox-prev {
        left: 0.5rem;
    }
    .lightbox-next {
        right: 0.5rem;
    }
    .lightbox-nav {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }
    .lightbox-content {
        max-width: 90%;
    }
    .gallery-thumbnails {
        gap: 0.35rem;
    }
}

/* ==========================================================================
   STATIC TECHNICAL DIAGRAM (ASCII FLOW BOX)
   ========================================================================== */

.terminal-diagram {
    background: var(--bg-base);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.8;
    color: var(--text-secondary);
    overflow-x: auto;
    box-shadow: 0 15px 40px rgba(var(--shadow-rgb), 0.3);
    margin: 2.5rem 0;
    transition: var(--transition-smooth);
}

.terminal-diagram:hover {
    border-color: rgba(var(--overlay-rgb), 0.15);
    box-shadow: 0 15px 40px rgba(var(--shadow-rgb), 0.4);
    transform: translateY(-2px);
}

.terminal-diagram strong {
    color: var(--primary);
}

.diagram-accent {
    color: var(--accent-orange);
}

/* Light theme: the ASCII data pipeline must read as a clean technical sheet
   ("off-white" broken white), NOT as the warm beige page base. */
:root[data-theme="light"] .terminal-diagram {
    background: #f7f8f8;
    border-color: rgba(0, 0, 0, 0.14);
    box-shadow: 0 15px 40px rgba(var(--shadow-rgb), 0.16);
}

:root[data-theme="light"] .terminal-diagram:hover {
    border-color: rgba(0, 0, 0, 0.22);
    box-shadow: 0 20px 45px rgba(var(--shadow-rgb), 0.22);
}

/* ==========================================================================
   THREAT INTELLIGENCE DIAGRAM PANEL (HEADER + STATIC FLOW BOX)
   ========================================================================== */

.intel-flowchart-wrapper {
    margin-top: 4.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 20px 45px rgba(var(--shadow-rgb), 0.5), inset 0 1px 0 rgba(var(--overlay-rgb), 0.02);
    position: relative;
    overflow: hidden;
}

.flowchart-header {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 3.5rem;
    text-align: left;
}

.flowchart-header-text {
    max-width: 560px;
}

.flowchart-title {
    font-size: 1.8rem;
    margin-bottom: 0.85rem;
    font-family: var(--font-heading);
    color: var(--text-primary);
}

.flowchart-description {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0;
}

/* Stylized image beside the diagram header text */
.flowchart-header-image {
    position: relative;
    margin: 0;
    justify-self: end;
    width: 100%;
    max-width: 380px;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid var(--border-color);
    background-color: var(--bg-surface-elevated);
    box-shadow: 0 20px 45px rgba(var(--shadow-rgb), 0.5), inset 0 1px 0 rgba(var(--overlay-rgb), 0.04);
    transition: var(--transition-smooth);
}

.flowchart-header-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.35), transparent);
    opacity: 0;
    transition: var(--transition-smooth);
    z-index: 2;
}

.flowchart-header-image:hover {
    border-color: var(--border-glowing);
    transform: translateY(-3px);
    box-shadow: 0 25px 55px rgba(var(--shadow-rgb), 0.6), 0 0 25px rgba(var(--primary-rgb), 0.08);
}

.flowchart-header-image:hover::before {
    opacity: 1;
}

.flowchart-header-image img {
    display: block;
    width: 100%;
    height: auto;
    transition: var(--transition-smooth);
}

.flowchart-header-image:hover img {
    transform: scale(1.02);
}

/* Responsive layout for the diagram panel */
@media (max-width: 1024px) {
    .flowchart-header {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .flowchart-header-text {
        max-width: 650px;
        margin: 0 auto;
    }

    .flowchart-header-text .more-info-cta {
        justify-content: center;
    }

    .flowchart-header-image {
        justify-self: center;
    }
}

@media (max-width: 768px) {
    .intel-flowchart-wrapper {
        padding: 1.5rem;
    }
}


/* ===== homepage inline styles (index.html) ===== */

                        .diagram-header-bar {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            flex-wrap: wrap;
                            gap: 0.75rem;
                            margin-bottom: 1.25rem;
                            padding-bottom: 0.75rem;
                            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
                        }
                        .diagram-tag-badge {
                            font-family: var(--font-mono, 'Fira Code', monospace);
                            font-size: 0.72rem;
                            padding: 0.25rem 0.6rem;
                            border-radius: 6px;
                            background: rgba(59, 130, 246, 0.12);
                            border: 1px solid rgba(59, 130, 246, 0.3);
                            color: #60a5fa;
                            display: inline-flex;
                            align-items: center;
                            gap: 0.4rem;
                        }
                        .pulse-mini {
                            width: 6px;
                            height: 6px;
                            border-radius: 50%;
                            background: #10b981;
                            box-shadow: 0 0 8px #10b981;
                        }
                        .modern-net-flow {
                            display: grid;
                            /* 4 device columns in row 1; endpoints drop to row 2 */
                            grid-template-columns: repeat(4, minmax(0, 1fr));
                            gap: 0.75rem;
                            align-items: center;
                            position: relative;
                            padding: 0.5rem 0;
                            row-gap: 2.1rem;
                        }
                        /* Endpoints (Wi-Fi AP + Wired LAN) sit in the 2nd row,
                           starting under the Yazata/Switch columns, so the four
                           main nodes always fit side-by-side without overflow. */
                        .modern-net-flow .flow-endpoints-column {
                            grid-column: 3 / 5;
                            grid-row: 3;
                            flex-direction: row;
                            gap: 0.65rem;
                        }
                        /* Branch wire dropping from the Switch down to the two endpoints.
                           It spans the Yazata + Switch columns so the horizontal bus can
                           reach the centre of BOTH endpoint cards (Wi-Fi AP & Wired LAN). */
                        .modern-net-flow .switch-branch {
                            grid-column: 3 / 5;
                            grid-row: 2;
                            position: relative;
                            align-self: stretch;
                            min-height: 52px;
                            pointer-events: none;
                            overflow: visible;
                        }
                        /* Vertical stem: from the Switch (column 4 centre) down to the bus */
                        .modern-net-flow .switch-branch::before {
                            content: '';
                            position: absolute;
                            top: calc(-2.1rem - 4px);
                            left: 75%;
                            transform: translateX(-50%);
                            width: 2px;
                            height: calc(50% + 2.1rem + 4px);
                            background: linear-gradient(180deg, rgba(222, 203, 183, 0.6) 0%, rgba(222, 203, 183, 0.35) 100%);
                        }
                        /* Horizontal bus connecting the centre of both endpoint cards */
                        .modern-net-flow .switch-branch::after {
                            content: '';
                            position: absolute;
                            top: 50%;
                            left: 25%;
                            right: 25%;
                            height: 2px;
                            background: rgba(222, 203, 183, 0.4);
                            border-radius: 2px;
                        }
                        /* Two vertical drops: from the bus down to each endpoint card's top edge,
                           crossing the grid row-gap so the cable visibly plugs into the cards. */
                        .modern-net-flow .switch-branch .branch-leg {
                            position: absolute;
                            top: 50%;
                            width: 2px;
                            height: calc(50% + 2.1rem + 1px);
                            background: rgba(222, 203, 183, 0.45);
                        }
                        .modern-net-flow .switch-branch .branch-leg.left { left: 25%; }
                        .modern-net-flow .switch-branch .branch-leg.right { left: 75%; }
                        /* Small connector dots where the cable plugs into each endpoint card */
                        .modern-net-flow .switch-branch .branch-leg::after {
                            content: '';
                            position: absolute;
                            bottom: -3px;
                            left: 50%;
                            transform: translateX(-50%);
                            width: 8px;
                            height: 8px;
                            border-radius: 50%;
                            background: #decbb7;
                            box-shadow: 0 0 8px rgba(222, 203, 183, 0.85);
                        }
                        .modern-net-flow .flow-endpoints-column .endpoint-subcard {
                            flex: 1 1 0;
                            min-width: 0;
                        }
                        .modern-net-flow .flow-endpoints-column .endpoint-meta {
                            min-width: 0;
                        }
                        .modern-net-flow .flow-endpoints-column .endpoint-name,
                        .modern-net-flow .flow-endpoints-column .endpoint-info {
                            white-space: normal;
                            overflow-wrap: anywhere;
                        }
                        .flow-step-card {
                            background: rgba(22, 27, 38, 0.65);
                            border: 1px solid rgba(255, 255, 255, 0.07);
                            border-radius: 12px;
                            padding: 1rem 0.65rem;
                            text-align: center;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            gap: 0.6rem;
                            position: relative;
                            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                        }
                        .flow-step-card:hover {
                            border-color: rgba(96, 165, 250, 0.35);
                            transform: translateY(-2px);
                            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
                        }
                        .flow-icon-wrap {
                            width: 44px;
                            height: 44px;
                            border-radius: 10px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            background: rgba(255, 255, 255, 0.03);
                            border: 1px solid rgba(255, 255, 255, 0.08);
                            color: #94a3b8;
                            position: relative;
                        }
                        .flow-node-title {
                            font-family: var(--font-heading, 'Outfit', sans-serif);
                            font-size: 0.88rem;
                            font-weight: 600;
                            color: #f1f5f9;
                            line-height: 1.2;
                        }
                        .flow-node-subtitle {
                            font-family: var(--font-mono, 'Fira Code', monospace);
                            font-size: 0.68rem;
                            color: #64748b;
                            text-transform: uppercase;
                            letter-spacing: 0.04em;
                        }
                        .flow-step-card.node-yazata-hero {
                            background: linear-gradient(145deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%);
                            border: 1px solid rgba(129, 140, 248, 0.45);
                            box-shadow: 0 0 24px rgba(99, 102, 241, 0.25);
                        }
                        .flow-step-card.node-yazata-hero .flow-icon-wrap {
                            background: rgba(99, 102, 241, 0.15);
                            border-color: rgba(129, 140, 248, 0.5);
                            color: #818cf8;
                            box-shadow: 0 0 16px rgba(99, 102, 241, 0.4);
                        }
                        .flow-step-card.node-yazata-hero.bypassed {
                            border-color: rgba(239, 68, 68, 0.4);
                            box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
                        }
                        .flow-step-card.node-yazata-hero.bypassed .flow-icon-wrap {
                            border-color: rgba(239, 68, 68, 0.5);
                            color: #ef4444;
                            box-shadow: 0 0 14px rgba(239, 68, 68, 0.3);
                        }
                        .switch-leds {
                            display: flex;
                            gap: 3px;
                            position: absolute;
                            bottom: 6px;
                        }
                        .switch-led {
                            width: 3px;
                            height: 3px;
                            border-radius: 50%;
                            background: #10b981;
                            animation: ledBlink 1.4s infinite alternate;
                        }
                        .switch-led:nth-child(2) { animation-delay: 0.3s; }
                        .switch-led:nth-child(3) { animation-delay: 0.7s; }
                        @keyframes ledBlink {
                            0% { opacity: 0.3; }
                            100% { opacity: 1; box-shadow: 0 0 4px #10b981; }
                        }
                        .wifi-pulse-ring {
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            width: 32px;
                            height: 32px;
                            border-radius: 50%;
                            border: 1px solid rgba(6, 182, 212, 0.4);
                            animation: wifiRing 2.4s cubic-bezier(0.1, 0.4, 0.8, 1) infinite;
                            pointer-events: none;
                        }
                        @keyframes wifiRing {
                            0% { width: 28px; height: 28px; opacity: 0.8; }
                            100% { width: 56px; height: 56px; opacity: 0; }
                        }
                        .flow-endpoints-column {
                            display: flex;
                            flex-direction: column;
                            gap: 0.65rem;
                        }
                        .endpoint-subcard {
                            background: rgba(18, 23, 34, 0.85);
                            border: 1px solid rgba(255, 255, 255, 0.06);
                            border-radius: 10px;
                            padding: 0.65rem 0.75rem;
                            display: flex;
                            align-items: center;
                            gap: 0.6rem;
                            transition: all 0.25s ease;
                        }
                        .endpoint-subcard.wifi-clients { border-left: 3px solid #06b6d4; }
                        .endpoint-subcard.lan-clients { border-left: 3px solid #8b5cf6; }
                        .endpoint-subcard.compromised {
                            border-color: #ef4444 !important;
                            background: rgba(239, 68, 68, 0.15) !important;
                            box-shadow: 0 0 15px rgba(239, 68, 68, 0.35);
                            animation: shake 0.4s ease-in-out;
                        }
                        @keyframes shake {
                            0%, 100% { transform: translateX(0); }
                            20%, 60% { transform: translateX(-3px); }
                            40%, 80% { transform: translateX(3px); }
                        }
                        .endpoint-icon {
                            width: 28px;
                            height: 28px;
                            border-radius: 6px;
                            background: rgba(255, 255, 255, 0.04);
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            color: #94a3b8;
                            flex-shrink: 0;
                        }
                        .endpoint-meta {
                            display: flex;
                            flex-direction: column;
                            text-align: left;
                            min-width: 0;
                        }
                        .endpoint-name {
                            font-size: 0.78rem;
                            font-weight: 600;
                            color: #e2e8f0;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                        .endpoint-info {
                            font-family: var(--font-mono, monospace);
                            font-size: 0.66rem;
                            color: #64748b;
                        }
                        @media (max-width: 1180px) {
                            .modern-net-flow {
                                grid-template-columns: 1fr;
                                gap: 1.25rem;
                                row-gap: 1.25rem;
                            }
                            .modern-net-flow .switch-branch { display: none; }
                            .flow-step-card {
                                padding: 1rem;
                                flex-direction: row;
                                text-align: left;
                                justify-content: flex-start;
                                gap: 1rem;
                            }
                            .flow-step-card::after {
                                content: '↓';
                                position: absolute;
                                bottom: -1.1rem;
                                left: 50%;
                                transform: translateX(-50%);
                                font-size: 0.85rem;
                                color: rgba(96, 165, 250, 0.4);
                                font-family: var(--font-mono, monospace);
                            }
                            /* Single-column layout: reset the row 2 placement so all
                               nodes (incl. endpoints) stack naturally top-to-bottom. */
                            .modern-net-flow .flow-endpoints-column {
                                grid-column: auto;
                                grid-row: auto;
                                margin-top: 0.5rem;
                            }
                        }
                        /* ===== Light-theme fixes for the interactive network diagram ===== */
                        :root[data-theme="light"] .diagram-header-bar { border-bottom-color: rgba(0, 0, 0, 0.1); }
                        :root[data-theme="light"] .flow-step-card { background: rgba(255, 255, 255, 0.9); border-color: rgba(0, 0, 0, 0.1); }
                        :root[data-theme="light"] .flow-step-card:hover { box-shadow: 0 8px 20px rgba(40, 35, 28, 0.18); }
                        :root[data-theme="light"] .flow-icon-wrap { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.08); }
                        :root[data-theme="light"] .flow-node-title { color: var(--text-primary); }
                        :root[data-theme="light"] .flow-node-subtitle { color: var(--text-muted); }
                        :root[data-theme="light"] .flow-step-card.node-yazata-hero { background: linear-gradient(145deg, rgba(224, 231, 255, 0.95) 0%, rgba(238, 242, 255, 0.98) 100%); border-color: rgba(79, 70, 229, 0.45); box-shadow: 0 0 24px rgba(79, 70, 229, 0.2); }
                        :root[data-theme="light"] .flow-step-card.node-yazata-hero .flow-icon-wrap { background: rgba(99, 102, 241, 0.12); border-color: rgba(79, 70, 229, 0.5); box-shadow: 0 0 16px rgba(99, 102, 241, 0.25); }
                        :root[data-theme="light"] .flow-step-card.node-yazata-hero .flow-node-title { color: #3730a3 !important; }
                        :root[data-theme="light"] .flow-step-card.node-yazata-hero .flow-node-subtitle { color: #4f46e5 !important; }
                        :root[data-theme="light"] .endpoint-subcard { background: rgba(255, 255, 255, 0.95); border-color: rgba(0, 0, 0, 0.1); }
                        :root[data-theme="light"] .endpoint-icon { background: rgba(0, 0, 0, 0.05); }
                        :root[data-theme="light"] .endpoint-name { color: var(--text-primary); }
                        :root[data-theme="light"] .endpoint-info { color: var(--text-muted); }
                        :root[data-theme="light"] .diagram-tag-badge { color: #2563eb; }
                    

/* ==========================================================================
   YAZATASEC.DK ADDITIONS — components that only exist on the Danish site
   (pricing, comparison table, FAQ, order/contact forms, legal prose, docs hub).
   Written against the Yazata design tokens so they inherit both themes.
   ========================================================================== */

/* --- Logo group with country/page badge (used in every header) --- */
.logo-group { display: flex; align-items: center; gap: 0.75rem; }
.logo-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    background: rgba(var(--overlay-rgb), 0.05);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.25rem 0.55rem;
    white-space: nowrap;
}
@media (max-width: 1024px) { .logo-badge { display: none; } }

/* --- Pricing --- */
.pricing-section { background-color: rgba(var(--veil-rgb), 0.72); }
.pricing-card {
    max-width: 640px;
    margin: 0 auto;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-glowing);
    border-radius: 24px;
    padding: 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(var(--shadow-rgb), 0.12);
}
.pricing-label {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--primary);
    font-weight: 700;
}
.pricing-amount {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 8vw, 4.25rem);
    font-weight: 800;
    line-height: 1;
    margin: 1rem 0 0.4rem;
    background: linear-gradient(135deg, #818cf8 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.pricing-amount small {
    font-size: 1.1rem;
    font-weight: 500;
    -webkit-text-fill-color: var(--text-secondary);
}
.pricing-terms { color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 2rem; }
.pricing-card .features-list { text-align: left; margin: 0 0 2rem; }
.pricing-card .features-list li { margin-bottom: 0.9rem; }
.pricing-card .btn { width: 100%; }
.pricing-note { font-size: 0.85rem; color: var(--text-muted); margin-top: 1.25rem; line-height: 1.6; }
.pricing-note a { color: var(--brand-blue); }

/* --- Comparison / data tables --- */
.compare-wrap { overflow-x: auto; margin-top: 3.5rem; }
.compare-table, .data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.95rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
}
.compare-table th, .compare-table td, .data-table th, .data-table td {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    vertical-align: top;
}
.compare-table tr:last-child td, .data-table tr:last-child td { border-bottom: none; }
.compare-table th, .data-table th {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--text-primary);
    background: rgba(var(--overlay-rgb), 0.04);
}
.compare-table td, .data-table td { color: var(--text-secondary); }
.compare-table td:first-child, .data-table td:first-child { color: var(--text-primary); font-weight: 500; }
.compare-table td.yes { color: var(--accent-green); font-weight: 600; }
.compare-table td.no { color: var(--accent-red); }
.data-table a { color: var(--brand-blue); }

/* --- FAQ --- */
.faq-section .accordion { max-width: 780px; }
.faq-section details.accordion-item[open] .accordion-content { max-height: 900px; }
.accordion-content p { color: var(--text-secondary); font-size: 0.98rem; line-height: 1.7; }
.accordion-content a { color: var(--brand-blue); }

/* --- Forms (order + contact) --- */
.dk-form {
    display: grid;
    gap: 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(var(--shadow-rgb), 0.06);
}
.dk-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.dk-form label { display: grid; gap: 0.4rem; font-size: 0.85rem; color: var(--text-secondary); font-weight: 500; }
.dk-form input, .dk-form select, .dk-form textarea {
    width: 100%;
    background-color: rgba(var(--deep-rgb), 0.8);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0.8rem 1rem;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.95rem;
    transition: var(--transition-smooth);
}
.dk-form input:focus, .dk-form select:focus, .dk-form textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 10px rgba(var(--overlay-rgb), 0.1);
}
.dk-form .check { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; color: var(--text-secondary); }
.dk-form .check input { width: auto; margin-top: 0.3rem; }
.dk-form .check a { color: var(--brand-blue); }
.dk-form .btn { justify-self: start; }
.dk-form fieldset { border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 1rem 1.25rem; display: grid; gap: 0.6rem; }
.dk-form legend { padding: 0 0.5rem; font-family: var(--font-heading); font-weight: 600; color: var(--text-primary); font-size: 0.95rem; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 4rem; align-items: start; }
.contact-meta p { color: var(--text-secondary); margin-bottom: 1rem; }
.contact-meta a { color: var(--brand-blue); }

/* --- Article / legal prose pages --- */
.page-hero { padding: 8.5rem 0 3.5rem; text-align: center; }
.page-hero .section-title { font-size: clamp(2rem, 5.5vw, 3.2rem); }
.page-hero .section-subtitle { max-width: 760px; margin: 0 auto; }
.prose { max-width: 820px; margin: 0 auto; }
.prose h1 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); margin-bottom: 1.5rem; }
.prose h2 { font-size: 1.5rem; margin: 2.75rem 0 0.85rem; }
.prose h3 { font-size: 1.15rem; margin: 1.75rem 0 0.5rem; }
.prose p, .prose li { color: var(--text-secondary); font-size: 1.02rem; line-height: 1.75; margin-bottom: 1rem; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li { margin-bottom: 0.5rem; }
.prose a { color: var(--brand-blue); }
.prose strong { color: var(--text-primary); }
.prose .data-table { margin: 1.5rem 0 2rem; }
.prose .data-table td, .prose .data-table th { font-size: 0.95rem; }
.prose .features-list { padding-left: 0; list-style: none; }
.prose .info-callout { margin-top: 2rem; }

/* --- Documentation hub --- */
.doc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.doc-card {
    display: block;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.75rem 2rem;
    text-decoration: none;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}
.doc-card:hover { transform: translateY(-4px); border-color: var(--border-glowing); box-shadow: 0 10px 30px rgba(var(--shadow-rgb), 0.08); }
.doc-card h3 { font-size: 1.1rem; margin-bottom: 0.5rem; color: var(--text-primary); }
.doc-card p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; }
.doc-card .doc-cta { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1rem; color: var(--brand-blue); font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem; }
.doc-card .doc-cta svg { width: 14px; height: 14px; }

/* --- Status pills --- */
.st {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: 50px;
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    margin-right: 0.4rem;
    white-space: nowrap;
}
.st.ok { color: var(--accent-green); border-color: rgba(15, 157, 88, 0.45); }
.st.open { color: var(--brand-blue); border-color: rgba(37, 99, 235, 0.45); }
.st.part { color: var(--accent-orange); border-color: rgba(201, 119, 11, 0.45); }

/* --- Small helpers --- */
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* --- Responsive --- */
@media (max-width: 900px) {
    .dk-form .row { grid-template-columns: 1fr; }
    .pricing-card { padding: 2rem 1.5rem; }
    .contact-grid, .doc-grid { grid-template-columns: 1fr; gap: 2rem; }
    .page-hero { padding-top: 7rem; }
}