/* Theme variables */
    :root { --bg: #07111f; --bg-alt: #0f1d31; --txt: #e6eefb; --primary: #8ec5ff; --accent: #49f2c2; --accent-alt: #ffc857; --muted: #9db3cf; --radius: 1rem; --shadow: 0 18px 45px rgba(0, 0, 0, 0.28); --bg-light: #eef3fb; --bg-alt-light: #ffffff; --txt-light: #142033; }
    body.light { --bg: var(--bg-light); --bg-alt: var(--bg-alt-light); --txt: var(--txt-light); --muted: #57677f; --shadow: 0 14px 30px rgba(20, 32, 51, 0.12); }
    *,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-padding-top: 6rem; color-scheme: dark; }
    body { font-family: 'Fira Code', monospace; background: radial-gradient(circle at top, rgba(73, 242, 194, 0.08), transparent 28%), linear-gradient(180deg, #06101d 0%, var(--bg) 20%, var(--bg) 100%); color: var(--txt); line-height: 1.6; scroll-behavior: smooth; transition: background 0.3s, color 0.3s; position: relative; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
    body.light { background: linear-gradient(180deg, #f7fbff 0%, var(--bg-light) 100%); color-scheme: light; }
    body::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(rgba(142,197,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(142,197,255,0.06) 1px, transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(180deg, rgba(0,0,0,0.4), transparent 85%); pointer-events: none; z-index: -2; }
    body::after { content: ''; position: fixed; width: 36rem; height: 36rem; right: -12rem; top: 8rem; background: radial-gradient(circle, rgba(255,200,87,0.16), transparent 62%); pointer-events: none; filter: blur(18px); z-index: -2; }
    button, input, textarea, select { font: inherit; }
    a { color: var(--accent); text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; }
    img { max-width: 100%; height: auto; border-radius: var(--radius); }
    main { display: block; }
    .skip-link { position: fixed; left: 1rem; top: 1rem; z-index: 1200; padding: 0.75rem 1rem; border-radius: 0.85rem; background: rgba(7,17,31,0.96); color: #f7fbff; border: 1px solid rgba(73,242,194,0.4); transform: translateY(-180%); transition: transform 0.2s ease; }
    .skip-link:focus { transform: translateY(0); }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
    :focus-visible { outline: 2px solid rgba(73,242,194,0.92); outline-offset: 3px; }
    .centered-text { max-width: 780px; margin-inline: auto; text-align: center; }
    header { position: fixed; inset: 0 auto auto 0; width: 100%; background: rgba(7,17,31,0.76); backdrop-filter: blur(14px); padding: 0.95rem clamp(1rem, 2vw, 2rem); display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-bottom: 1px solid rgba(142,197,255,0.12); transition: background 0.3s, border-color 0.3s; z-index: 999; }
    body.light header { background: rgba(255,255,255,0.88); }
    .logo { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 1.25rem; letter-spacing: 1px; }
    .logo .cmd { color: var(--muted); }
    .logo .file { color: var(--primary); }
    nav { flex: 1; display: flex; justify-content: center; align-items: center; gap: 1rem; }
    nav ul { list-style: none; display: flex; gap: 1.25rem; flex-wrap: wrap; justify-content: center; align-items: center; }
    nav a { position: relative; font-size: 0.9rem; letter-spacing: 0.03em; }
    nav a::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px; background: var(--accent); transition: width 0.3s; }
    nav a:hover::after, nav a.active::after { width: 100%; }
    .nav-pane-shell { position: relative; display: flex; align-items: center; }
    .nav-pane-toggle { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.8rem; padding: 0.65rem 0.95rem; border-radius: 0.95rem; border: 1px solid rgba(142,197,255,0.14); background: rgba(255,255,255,0.04); color: var(--txt); cursor: pointer; transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; }
    .nav-pane-toggle:hover, .nav-pane-shell.is-open .nav-pane-toggle { transform: translateY(-1px); border-color: rgba(73,242,194,0.34); background: rgba(255,255,255,0.08); box-shadow: 0 14px 28px rgba(0,0,0,0.18); }
    .nav-pane-toggle i { font-size: 0.72rem; transition: transform 0.2s ease; }
    .nav-pane-shell.is-open .nav-pane-toggle i { transform: rotate(180deg); }
    .nav-pane[hidden] { display: none; }
    .nav-pane { position: absolute; top: calc(100% + 0.9rem); left: 50%; width: min(74rem, calc(100vw - 3rem)); transform: translateX(-50%) translateY(10px) scale(0.985); transform-origin: top center; padding: 1rem; border-radius: 1.35rem; border: 1px solid rgba(142,197,255,0.14); background: linear-gradient(180deg, rgba(12,23,38,0.98), rgba(8,16,28,0.98)); box-shadow: 0 30px 60px rgba(0,0,0,0.34); backdrop-filter: blur(18px); opacity: 0; pointer-events: none; transition: opacity 0.22s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform, opacity; contain: layout paint; }
    .nav-pane::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 22%); pointer-events: none; }
    .nav-pane-shell.is-open .nav-pane { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); }
    .nav-pane-topbar { display: inline-flex; align-items: center; gap: 0.45rem; margin-bottom: 0.95rem; padding: 0.28rem; border-radius: 999px; border: 1px solid rgba(142,197,255,0.1); background: rgba(255,255,255,0.03); }
    .nav-pane-tab { min-height: 2.3rem; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
    .nav-pane-tab:hover, .nav-pane-tab:focus-visible { color: var(--txt); transform: translateY(-1px); }
    .nav-pane-tab.is-active { color: #f7fbff; background: rgba(255,255,255,0.08); border-color: rgba(142,197,255,0.12); }
    .nav-pane-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.9fr); gap: 0.95rem; align-items: stretch; }
    .nav-pane-panels { position: relative; min-height: 21rem; }
    .nav-pane-panel[hidden] { display: none; }
    .nav-pane-panel { height: 100%; opacity: 0; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.24s ease; will-change: transform, opacity; }
    .nav-pane-panel.is-active { opacity: 1; transform: translateY(0); }
    .nav-pane-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; height: 100%; }
    .nav-pane-column { position: relative; display: grid; align-content: start; gap: 0.25rem; padding: 1rem 1.1rem; min-height: 100%; }
    .nav-pane-column + .nav-pane-column::before { content: ''; position: absolute; left: 0; top: 0.75rem; bottom: 0.75rem; width: 1px; background: linear-gradient(180deg, transparent, rgba(142,197,255,0.18), transparent); }
    .nav-pane-kicker { color: var(--muted); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.45rem; }
    .nav-pane-column h2 { font-family: 'Orbitron', sans-serif; font-size: 0.95rem; color: #f7fbff; margin-bottom: 0.4rem; }
    .nav-pane-link { display: grid; gap: 0.15rem; padding: 0.72rem 0.8rem; border-radius: 0.95rem; border: 1px solid transparent; color: var(--txt); }
    .nav-pane-link::after { display: none; }
    .nav-pane-link span { color: var(--muted); font-size: 0.8rem; }
    .nav-pane-link strong { color: #f7fbff; font-size: 0.94rem; line-height: 1.4; font-weight: 600; }
    .nav-pane-link:hover, .nav-pane-link:focus-visible { border-color: rgba(73,242,194,0.24); background: rgba(255,255,255,0.05); transform: translateY(-1px); }
    .nav-pane-preview { border-left: 1px solid rgba(142,197,255,0.12); padding: 1rem 1.2rem 1rem 1.35rem; display: grid; align-content: start; }
    .nav-pane-preview-card { position: relative; min-height: 100%; padding: 1.2rem; border-radius: 1.15rem; border: 1px solid rgba(142,197,255,0.12); background: linear-gradient(180deg, rgba(16,30,49,0.92), rgba(11,21,35,0.92)); overflow: hidden; }
    .nav-pane-preview-card::before { content: ''; position: absolute; inset: auto -3rem -4rem auto; width: 10rem; height: 10rem; background: radial-gradient(circle, rgba(73,242,194,0.22), transparent 68%); pointer-events: none; transition: background 0.24s ease; }
    .nav-pane-preview-card[data-nav-pane-preview-tone="vikops"]::before { background: radial-gradient(circle, rgba(255,200,87,0.22), transparent 68%); }
    .nav-pane-preview-card[data-nav-pane-preview-tone="profiles"]::before { background: radial-gradient(circle, rgba(142,197,255,0.22), transparent 68%); }
    .nav-pane-preview-pill { display: inline-flex; width: fit-content; padding: 0.32rem 0.62rem; border-radius: 999px; border: 1px solid rgba(142,197,255,0.16); background: rgba(255,255,255,0.05); color: var(--muted); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.9rem; }
    .nav-pane-preview-card h2 { font-family: 'Orbitron', sans-serif; font-size: 1.25rem; color: #f7fbff; margin-bottom: 0.7rem; }
    .nav-pane-preview-card p { color: var(--txt); line-height: 1.75; max-width: 24rem; }
    .nav-pane-preview-signal { display: flex; align-items: flex-end; gap: 0.45rem; margin-top: 1.25rem; }
    .nav-pane-preview-signal span { width: 0.52rem; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(73,242,194,0.72)); animation: navPanePulse 2.8s ease-in-out infinite; }
    .nav-pane-preview-signal span:nth-child(1) { height: 2.5rem; animation-delay: -0.35s; }
    .nav-pane-preview-signal span:nth-child(2) { height: 3.5rem; animation-delay: -0.15s; }
    .nav-pane-preview-signal span:nth-child(3) { height: 2rem; animation-delay: -0.6s; }
    body.light .nav-pane-toggle { background: rgba(255,255,255,0.84); border-color: rgba(20,32,51,0.12); color: #17314a; box-shadow: 0 12px 24px rgba(20,32,51,0.08); }
    body.light .nav-pane-toggle:hover, body.light .nav-pane-shell.is-open .nav-pane-toggle { background: #ffffff; border-color: rgba(73,242,194,0.32); }
    body.light .nav-pane { background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(243,247,252,0.98)); border-color: rgba(20,32,51,0.1); box-shadow: 0 24px 48px rgba(20,32,51,0.14); }
    body.light .nav-pane-topbar { background: rgba(20,32,51,0.03); border-color: rgba(20,32,51,0.08); }
    body.light .nav-pane-tab.is-active { color: #142033; background: rgba(20,32,51,0.06); border-color: rgba(20,32,51,0.08); }
    body.light .nav-pane-column + .nav-pane-column::before { background: linear-gradient(180deg, transparent, rgba(20,32,51,0.12), transparent); }
    body.light .nav-pane-column h2, body.light .nav-pane-link strong { color: #142033; }
    body.light .nav-pane-link:hover, body.light .nav-pane-link:focus-visible { background: rgba(20,32,51,0.05); border-color: rgba(73,242,194,0.2); }
    body.light .nav-pane-preview { border-left-color: rgba(20,32,51,0.08); }
    body.light .nav-pane-preview-card { background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(244,248,253,0.98)); border-color: rgba(20,32,51,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); }
    body.light .nav-pane-preview-card h2 { color: #142033; }
    body.light .nav-pane-preview-card p { color: #29415b; }
    body.light .nav-pane-preview-pill { background: rgba(20,32,51,0.05); border-color: rgba(20,32,51,0.08); }
    .header-actions { display: inline-flex; align-items: center; gap: 0.65rem; }
    .nav-toggle { display: none; width: 2.75rem; height: 2.75rem; place-items: center; gap: 0.24rem; padding: 0.65rem; border-radius: 0.9rem; border: 1px solid rgba(142,197,255,0.14); background: rgba(255,255,255,0.04); color: var(--txt); cursor: pointer; transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease; }
    .nav-toggle:hover { transform: translateY(-1px); border-color: rgba(73,242,194,0.34); background: rgba(255,255,255,0.08); }
    .nav-toggle-line { display: block; width: 100%; height: 2px; border-radius: 999px; background: currentColor; transition: transform 0.2s ease, opacity 0.2s ease; }
    header.nav-open .nav-toggle-line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    header.nav-open .nav-toggle-line:nth-child(2) { opacity: 0; }
    header.nav-open .nav-toggle-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
    .theme-toggle { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; cursor: pointer; font-size: 1.05rem; color: var(--accent); margin-left: 0; border-radius: 0.9rem; border: 1px solid rgba(142,197,255,0.14); background: rgba(255,255,255,0.04); transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease; }
    .theme-toggle:hover { transform: translateY(-1px) rotate(8deg) scale(1.02); border-color: rgba(73,242,194,0.4); background: rgba(255,255,255,0.08); }
    body.light .theme-toggle { background: rgba(255,255,255,0.72); border-color: rgba(20, 32, 51, 0.12); }
    body.light .nav-toggle { background: rgba(255,255,255,0.72); border-color: rgba(20, 32, 51, 0.12); color: #17314a; }

    .hero { min-height: 86vh; padding: 7.5rem 2rem 3.25rem; background: var(--hero-wallpaper-fallback) center/cover no-repeat; background-image: var(--hero-wallpaper-desktop-set); position: relative; display: flex; align-items: center; justify-content: center; text-align: center; }
    .hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,17,31,0.76), rgba(7,17,31,0.94)); transition: background 0.3s; }
    body.light .hero::before { background: linear-gradient(180deg, rgba(246,250,255,0.78), rgba(229,236,244,0.96)); }
    .hero-content { position: relative; max-width: 1240px; width: 100%; padding: 3.35rem 2.45rem 2.55rem; border: 1px solid rgba(142,197,255,0.14); border-radius: 1.4rem; background: rgba(10, 22, 39, 0.56); box-shadow: var(--shadow); overflow: hidden; backdrop-filter: blur(12px); }
    body.light .hero-content { background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(243,247,252,0.95)); border-color: rgba(20, 32, 51, 0.14); box-shadow: 0 24px 54px rgba(20, 32, 51, 0.14), inset 0 1px 0 rgba(255,255,255,0.76); }
    .hero-content::before { content: ''; position: absolute; inset: auto -4rem -6rem auto; width: 18rem; height: 18rem; background: radial-gradient(circle, rgba(73,242,194,0.18), transparent 68%); pointer-events: none; }
    .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 408px); gap: clamp(2.4rem, 4vw, 4.4rem); align-items: start; position: relative; z-index: 1; }
    .hero-copy { text-align: left; max-width: 40rem; display: grid; align-content: center; }
    .hero-copy .centered-text { margin-inline: 0; text-align: left; max-width: 35rem; }
    .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; width: fit-content; padding: 0.52rem 0.82rem; border: 1px solid rgba(255, 200, 87, 0.45); border-radius: 0.85rem; background: linear-gradient(135deg, rgba(255, 200, 87, 0.14), rgba(73, 242, 194, 0.12)); color: #f7fbff; font-family: 'Orbitron', sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1rem; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); text-shadow: 0 0 18px rgba(255, 200, 87, 0.18); }
    body.light .eyebrow { color: #142033; background: linear-gradient(135deg, rgba(255, 200, 87, 0.24), rgba(73, 242, 194, 0.18)); }
    .hero h1 { font-family: 'Orbitron', sans-serif; font-size: clamp(2.65rem, 4.2vw, 3.75rem); margin-bottom: 0.85rem; max-width: 14.6ch; line-height: 1.05; text-wrap: balance; }
    .typed-wrap { display: block; max-width: inherit; color: var(--accent); font-weight: 600; white-space: normal; overflow-wrap: normal; background: linear-gradient(115deg, #49f2c2 0%, #93d4ff 22%, #f8ffff 40%, #ffc857 58%, #84f4da 76%, #49f2c2 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 24px rgba(73,242,194,0.16); animation: holoShift 11s linear infinite, holoPulse 6.5s ease-in-out infinite; position: relative; }
    .typed-wrap::after { content: ''; position: absolute; inset: 0 auto 0 -8%; width: 34%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.72), transparent); mix-blend-mode: screen; opacity: 0.32; filter: blur(8px); transform: skewX(-18deg); animation: holoSweep 6.2s ease-in-out infinite; pointer-events: none; }
    .hero p { color: var(--txt); }
    .hero-copy > p:not(.eyebrow) { max-width: 34rem; font-size: 0.98rem; line-height: 1.72; }
    .hero-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; width: 100%; max-width: 39rem; margin: 1.15rem 0 0.25rem; }
    .hero-proof-item { padding: 0.95rem 1rem; border-radius: 1rem; border: 1px solid rgba(142,197,255,0.14); background: rgba(255,255,255,0.04); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
    .hero-proof-item strong { display: block; color: var(--accent-alt); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.45rem; }
    .hero-proof-item span { display: block; color: var(--txt); font-size: 0.82rem; line-height: 1.55; }
    .hero-cert-list { display: grid; gap: 0.45rem; }
    .hero-cert-link { --cert-accent: rgba(142,197,255,0.42); --cert-surface: rgba(142,197,255,0.1); --cert-ring: rgba(142,197,255,0.26); --cert-light-surface: rgba(232,242,255,0.86); display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 0.35rem; padding: 0.58rem 0.82rem; border-radius: 0.82rem; border: 1px solid rgba(142,197,255,0.12); background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); color: var(--txt); transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, color 0.22s ease; }
    .hero-cert-link span { color: inherit; font-size: 0.83rem; font-weight: 600; letter-spacing: 0.02em; }
    .hero-cert-link:hover, .hero-cert-link:focus-visible, .hero-cert-link.is-active { transform: translateX(0.18rem); border-color: var(--cert-accent); background: linear-gradient(180deg, var(--cert-surface), rgba(255,255,255,0.03)); box-shadow: 0 10px 22px rgba(0,0,0,0.16), 0 0 0 1px var(--cert-ring); }
    .hero-cert-link[data-cert-target="pentest-plus"] { --cert-accent: rgba(255, 91, 111, 0.62); --cert-surface: rgba(255, 91, 111, 0.12); --cert-ring: rgba(255, 91, 111, 0.28); --cert-light-surface: rgba(255, 232, 236, 0.92); color: #ff8c9b; }
    .hero-cert-link[data-cert-target="security-plus"] { --cert-accent: rgba(255, 165, 66, 0.62); --cert-surface: rgba(255, 165, 66, 0.12); --cert-ring: rgba(255, 165, 66, 0.28); --cert-light-surface: rgba(255, 243, 228, 0.92); color: #ffbf72; }
    .hero-cert-link[data-cert-target="network-plus"] { --cert-accent: rgba(177, 115, 255, 0.62); --cert-surface: rgba(177, 115, 255, 0.12); --cert-ring: rgba(177, 115, 255, 0.28); --cert-light-surface: rgba(244, 236, 255, 0.92); color: #c99bff; }
    .hero-cert-link[data-cert-target="a-plus"] { --cert-accent: rgba(93, 224, 146, 0.62); --cert-surface: rgba(93, 224, 146, 0.12); --cert-ring: rgba(93, 224, 146, 0.28); --cert-light-surface: rgba(232, 251, 239, 0.92); color: #8ef2b4; }
    .hero-list { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 0.68rem; margin: 1.1rem 0 1.35rem; max-width: 36rem; }
    .hero-list span { border: 1px solid rgba(142,197,255,0.18); background: rgba(255,255,255,0.04); padding: 0.48rem 0.78rem; border-radius: 999px; color: var(--muted); font-size: 0.81rem; line-height: 1.3; }
    .hero-copy .button-row { justify-content: flex-start; margin-top: 0; }
    .hero-copy .button-row .btn { padding-inline: 1.65rem; }
    .btn { display: inline-block; background: linear-gradient(135deg, var(--accent), #8ef8da); color: #031218; padding: 0.8rem 2rem; border-radius: var(--radius); font-weight: 600; box-shadow: var(--shadow); transition: transform 0.2s; border: none; cursor: pointer; }
    .btn:hover { transform: translateY(-4px); }
    .btn.secondary { background: transparent; color: var(--txt); border: 1px solid rgba(142,197,255,0.2); }
    .hero-visual { position: relative; min-height: auto; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 1rem; width: 100%; max-width: 25rem; margin-left: auto; padding-top: 0.35rem; }
    .orbit-stage { position: relative; width: min(100%, 16.5rem); min-height: 12.8rem; display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(6.25rem, 6.65rem) minmax(0, 0.72fr); grid-template-rows: auto minmax(6rem, 1fr) auto; grid-template-areas: ". top ." "left core right" ". bottom ."; align-items: center; justify-items: center; gap: 0.46rem 0.5rem; padding: 0.1rem 0 0; margin-inline: auto; }
    .signal-core { grid-area: core; width: 6.65rem; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: 0.72rem; background: radial-gradient(circle at top, rgba(255,200,87,0.22), rgba(73,242,194,0.08) 45%, rgba(7,17,31,0.92) 80%); border: 1px solid rgba(142,197,255,0.18); box-shadow: 0 0 0 10px rgba(73,242,194,0.03), 0 0 0 20px rgba(142,197,255,0.03), var(--shadow); animation: pulse 6s ease-in-out infinite; z-index: 1; }
    .signal-core i { display: block; font-size: 1.82rem; color: var(--accent-alt); margin-bottom: 0.58rem; }
    .signal-core strong { display: block; font-size: 0.86rem; color: var(--accent); margin-bottom: 0.25rem; }
    .orbit-link { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; max-width: 100%; padding: 0.5rem 0.72rem; border-radius: 999px; border: 1px solid rgba(142,197,255,0.16); background: rgba(9,17,27,0.84); color: var(--txt); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24); animation: floatTag 12s ease-in-out infinite; transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease; white-space: nowrap; font-size: 0.74rem; }
    body.light .orbit-link { background: rgba(255,255,255,0.94); border-color: rgba(20, 32, 51, 0.12); color: #17314a; box-shadow: 0 18px 32px rgba(20, 32, 51, 0.1); }
    .orbit-link:hover { transform: translateY(-4px) scale(1.02); border-color: rgba(73,242,194,0.45); background: rgba(12,23,38,0.95); }
    body.light .orbit-link:hover { background: #ffffff; }
    .orbit-link i { color: var(--accent-alt); }
    .orbit-top { grid-area: top; justify-self: end; align-self: end; animation-delay: -0.6s; }
    .orbit-left { grid-area: left; justify-self: start; align-self: center; animation-delay: -1.6s; }
    .orbit-bottom { grid-area: bottom; justify-self: center; align-self: start; animation-delay: -2.6s; }
    .orbit-right { grid-area: right; justify-self: end; align-self: start; animation-delay: -3.3s; max-width: 6.7rem; white-space: normal; text-align: center; line-height: 1.22; margin-top: 0.55rem; margin-right: -0.15rem; }
    .cert-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; width: 100%; margin-top: 0.25rem; align-items: start; }
    .cert-stack { display: grid; gap: 0.85rem; width: 100%; }
    .cert-bubble { display: grid; grid-template-columns: 3.2rem 1fr; align-items: center; gap: 0.95rem; padding: 0.95rem 1rem; border-radius: 1.05rem; border: 1px solid rgba(142,197,255,0.14); background: rgba(9,17,27,0.8); color: var(--txt); box-shadow: var(--shadow); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; min-height: 5.5rem; }
    body.light .hero-content::before { background: radial-gradient(circle, rgba(73,242,194,0.12), transparent 68%); opacity: 0.62; }
    body.light .hero h1 { color: #112d45; text-shadow: 0 10px 20px rgba(255,255,255,0.22); }
    body.light .hero-copy > p:not(.eyebrow) { color: #1b2f47; }
    body.light .hero-proof-item { background: rgba(255,255,255,0.88); border-color: rgba(20, 32, 51, 0.12); box-shadow: 0 14px 28px rgba(20, 32, 51, 0.06); }
    body.light .hero-proof-item span { color: #29415b; }
    body.light .hero-cert-link { background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(248,250,253,0.88)); border-color: rgba(20,32,51,0.1); }
    body.light .hero-cert-link:hover, body.light .hero-cert-link:focus-visible, body.light .hero-cert-link.is-active { background: linear-gradient(180deg, var(--cert-light-surface), rgba(255,255,255,0.94)); border-color: var(--cert-accent); box-shadow: 0 14px 28px rgba(20,32,51,0.08), 0 0 0 1px var(--cert-ring); }
    body.light .hero-list span { background: rgba(255,255,255,0.88); border-color: rgba(20, 32, 51, 0.12); color: #36506a; box-shadow: 0 10px 24px rgba(20, 32, 51, 0.05); }
    body.light .btn.secondary { background: rgba(255,255,255,0.9); border-color: rgba(20, 32, 51, 0.16); color: #16314a; }
    body.light .signal-core { background: radial-gradient(circle at top, rgba(255,200,87,0.34), rgba(73,242,194,0.12) 38%, rgba(16,29,45,0.94) 76%); border-color: rgba(86, 118, 158, 0.22); box-shadow: 0 0 0 10px rgba(73,242,194,0.05), 0 0 0 20px rgba(142,197,255,0.05), 0 24px 44px rgba(20, 32, 51, 0.16); }
    body.light .signal-core strong { color: #6ff2cf; }
    body.light .cert-bubble { background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(243,247,252,0.97)); border-color: rgba(20, 32, 51, 0.12); box-shadow: 0 18px 34px rgba(20, 32, 51, 0.08); }
    body.light .cert-bubble strong { color: #18b59a; }
    body.light .cert-bubble span { color: #405974; }
    .cert-bubble:hover { transform: translateY(-2px); border-color: rgba(73,242,194,0.4); box-shadow: 0 22px 38px rgba(0, 0, 0, 0.26); }
    .cert-bubble[data-cert-badge] { position: relative; }
    .cert-bubble[data-cert-badge]::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid transparent; opacity: 0; transition: opacity 0.24s ease, border-color 0.24s ease; pointer-events: none; }
    .cert-bubble[data-cert-badge].is-active { transform: translateY(-3px) scale(1.015); border-color: rgba(73,242,194,0.48); box-shadow: 0 24px 40px rgba(0,0,0,0.3), 0 0 0 1px rgba(73,242,194,0.18); }
    .cert-bubble[data-cert-badge].is-active::after { opacity: 1; border-color: rgba(255,200,87,0.56); }
    .cert-bubble img { width: 100%; height: 2.85rem; object-fit: contain; object-position: center; border-radius: 0; justify-self: center; }
    .cert-bubble img.cert-mark { width: 2.9rem; height: 2.9rem; }
    .cert-bubble strong { display: block; font-size: 1rem; line-height: 1.28; color: var(--accent); }
    .cert-bubble span { display: block; font-size: 0.8rem; line-height: 1.5; color: var(--muted); }
    body.light .cert-bubble[data-cert-badge].is-active { box-shadow: 0 22px 40px rgba(20,32,51,0.12), 0 0 0 1px rgba(26,183,155,0.14); border-color: rgba(26,183,155,0.32); }

    section { padding: 6rem 2rem; scroll-margin-top: 6rem; }
    .container { width: min(100%, 1360px); max-width: 1360px; margin: auto; }
    .section-title { font-family: 'Orbitron', sans-serif; font-size: 2rem; text-align: center; color: var(--primary); margin-bottom: 1rem; text-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); }
    .section-intro { max-width: 940px; margin: 0 auto 2rem; text-align: center; color: var(--muted); line-height: 1.8; }
    .section-intro:last-of-type { margin-bottom: 2.4rem; }
    .reveal { opacity: 1; transform: translateY(0); transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
    .reveal.is-pending { opacity: 1; transform: translateY(24px); }
    .reveal.is-visible { opacity: 1; transform: translateY(0); }
    .grid { display: grid; gap: 2.25rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
    .card { background: linear-gradient(180deg, rgba(16, 31, 51, 0.96), rgba(12, 23, 38, 0.96)); border: 1px solid rgba(142,197,255,0.12); border-radius: var(--radius); padding: 1.7rem; position: relative; box-shadow: var(--shadow); transition: background 0.3s, transform 0.2s; }
    .card:hover { transform: translateY(-4px); }
    body.light .card { background: var(--bg-alt-light); box-shadow: var(--shadow); }
    .card h3 { color: var(--accent); margin-bottom: 0.75rem; font-size: 1.05rem; }
    .card p { color: var(--txt); }
    .feature-heading { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.9rem; }
    .feature-heading h3 { margin-bottom: 0; }
    .feature-glyph { display: inline-grid; place-items: center; width: 2.65rem; height: 2.65rem; border-radius: 0.95rem; color: var(--accent); background: linear-gradient(180deg, rgba(73,242,194,0.1), rgba(142,197,255,0.08)); border: 1px solid rgba(142,197,255,0.16); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); flex: 0 0 auto; }
    .feature-glyph svg { width: 1.15rem; height: 1.15rem; display: block; }
    .centered-text .feature-heading { justify-content: center; }
    .webhook-card .feature-heading { margin-bottom: 1.1rem; }
    body.light .feature-glyph { background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(241,246,252,0.96)); border-color: rgba(20,32,51,0.1); color: #1cae94; box-shadow: 0 12px 24px rgba(20,32,51,0.06); }
    .workflow-card { grid-column: 1 / -1; }
    .workflow-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.25rem; }
    .workflow-panel { position: relative; padding: 1.15rem; border-radius: 1rem; border: 1px solid rgba(142,197,255,0.12); background: rgba(7, 17, 31, 0.42); min-height: 100%; }
    body.light .workflow-panel { background: rgba(244,248,253,0.88); border-color: rgba(20, 32, 51, 0.1); }
    .workflow-panel h4 { color: var(--accent-alt); font-family: 'Orbitron', sans-serif; font-size: 1rem; margin-bottom: 0.55rem; }
    .workflow-lead { color: var(--txt); font-size: 0.95rem; line-height: 1.75; }
    body.light .workflow-lead { color: #1b2b40; }
    .workflow-panel .tag-list { margin-top: 1rem; }
    .workflow-panel .copy { top: 1rem; right: 1rem; }
    .workflow-panel-inline { margin-top: 0.95rem; }
    .workflow-compare { margin-top: 1.25rem; padding: 1.15rem; border-radius: 1rem; border: 1px solid rgba(142,197,255,0.12); background: rgba(7, 17, 31, 0.36); }
    body.light .workflow-compare { background: rgba(244,248,253,0.88); border-color: rgba(20, 32, 51, 0.1); }
    .workflow-compare h4 { color: var(--accent-alt); font-family: 'Orbitron', sans-serif; font-size: 0.95rem; margin-bottom: 0.45rem; }
    .workflow-compare h4.workflow-title-network { color: #8f6bff; text-shadow: 0 0 18px rgba(143, 107, 255, 0.16); }
    .workflow-compare h4.workflow-title-zap { color: #ff6f7d; text-shadow: 0 0 18px rgba(255, 111, 125, 0.14); }
    body.light .workflow-compare h4.workflow-title-network { color: #5f43c6; text-shadow: none; }
    body.light .workflow-compare h4.workflow-title-zap { color: #c2414b; text-shadow: none; }
    .workflow-compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 0.95rem; }
    .workflow-compare-item { padding: 0.95rem 1rem; border-radius: 0.9rem; border: 1px solid rgba(142,197,255,0.1); background: rgba(9, 17, 27, 0.64); }
    body.light .workflow-compare-item { background: rgba(255,255,255,0.84); border-color: rgba(20, 32, 51, 0.08); }
    .workflow-compare-item strong { display: block; margin-bottom: 0.55rem; color: var(--txt); }
    body.light .workflow-compare-item strong { color: #15283d; }
    .workflow-compare-item code { display: inline-block; margin-bottom: 0.7rem; padding: 0.35rem 0.5rem; border-radius: 0.55rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(142,197,255,0.1); color: #d7f3ea; font-size: 0.82rem; word-break: break-all; }
    body.light .workflow-compare-item code { background: rgba(20,32,51,0.05); border-color: rgba(20,32,51,0.08); color: #21405f; }
    .workflow-compare-item p { margin: 0; color: var(--txt); font-size: 0.9rem; line-height: 1.7; }
    body.light .workflow-compare-item p { color: #314a64; }
    .workflow-script-preview { margin-top: 0.95rem; }
    .workflow-script-head { display: flex; justify-content: space-between; align-items: center; gap: 0.85rem; margin-bottom: 0.8rem; color: var(--txt); }
    .workflow-script-head strong { color: var(--txt); }
    body.light .workflow-script-head strong { color: #15283d; }
    .workflow-script-drawer { margin-top: 0.9rem; border: 1px solid rgba(142,197,255,0.12); border-radius: 1rem; background: rgba(7,17,31,0.32); overflow: hidden; }
    body.light .workflow-script-drawer { background: rgba(244,248,253,0.84); border-color: rgba(20,32,51,0.1); }
    .workflow-script-drawer summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.95rem 1.1rem; color: var(--txt); font-family: 'Orbitron', sans-serif; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; }
    .workflow-script-drawer summary::-webkit-details-marker { display: none; }
    .workflow-script-hint { color: var(--muted); font-family: inherit; font-size: 0.72rem; letter-spacing: 0.02em; text-transform: none; }
    .workflow-script-drawer .workflow-panel { margin: 0; border: 0; border-top: 1px solid rgba(142,197,255,0.1); border-radius: 0; background: transparent; }
    body.light .workflow-script-drawer .workflow-panel { border-top-color: rgba(20,32,51,0.08); }
    .workflow-patterns { margin-top: 1rem; }
    .workflow-pattern-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 0.95rem; }
    .workflow-pattern-item { padding: 0.95rem 1rem; border-radius: 0.9rem; border: 1px solid rgba(142,197,255,0.1); background: rgba(9, 17, 27, 0.64); }
    body.light .workflow-pattern-item { background: rgba(255,255,255,0.84); border-color: rgba(20, 32, 51, 0.08); }
    .workflow-pattern-item strong { display: block; margin-bottom: 0.55rem; color: var(--txt); }
    body.light .workflow-pattern-item strong { color: #15283d; }
    .workflow-pattern-item code { display: inline-block; margin-bottom: 0.7rem; padding: 0.35rem 0.5rem; border-radius: 0.55rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(142,197,255,0.1); color: #d7f3ea; font-size: 0.82rem; word-break: break-word; }
    body.light .workflow-pattern-item code { background: rgba(20,32,51,0.05); border-color: rgba(20,32,51,0.08); color: #21405f; }
    .workflow-pattern-item p { margin: 0; color: var(--txt); font-size: 0.9rem; line-height: 1.7; }
    body.light .workflow-pattern-item p { color: #314a64; }
    .webhook-card { grid-column: 1 / -1; overflow: hidden; position: relative; }
    .webhook-card::before { content: ''; position: absolute; inset: auto -8% -35% 48%; width: 26rem; height: 26rem; background: radial-gradient(circle, rgba(73,242,194,0.16), transparent 70%); pointer-events: none; }
    .webhook-shell { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr); gap: 1.9rem; align-items: center; position: relative; z-index: 1; }
    .webhook-copy { text-align: left; }
    .webhook-copy p { line-height: 1.8; max-width: 100%; }
    .webhook-gallery { position: relative; min-height: 23rem; }
    .webhook-shot { position: absolute; overflow: hidden; isolation: isolate; border-radius: 1.2rem; border: 1px solid rgba(142,197,255,0.18); box-shadow: 0 24px 54px rgba(0, 0, 0, 0.28); background: rgba(7, 17, 31, 0.94); }
    .webhook-shot::before, .showcase-screen::before { content: ''; position: absolute; inset: 0 0 auto; height: 2.4rem; background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.01)); border-bottom: 1px solid rgba(142,197,255,0.14); pointer-events: none; z-index: 1; }
    .webhook-shot::after, .showcase-screen::after { content: ''; position: absolute; left: 1rem; top: 0.88rem; width: 3rem; height: 0.56rem; border-radius: 999px; background: radial-gradient(circle at 0.28rem center, rgba(255,200,87,0.9) 0 0.24rem, transparent 0.25rem), radial-gradient(circle at 1.5rem center, rgba(73,242,194,0.9) 0 0.24rem, transparent 0.25rem), radial-gradient(circle at 2.72rem center, rgba(142,197,255,0.9) 0 0.24rem, transparent 0.25rem); opacity: 0.9; pointer-events: none; z-index: 2; }
    .webhook-shot img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transform: translateZ(0); backface-visibility: hidden; }
    .webhook-shot figcaption { position: absolute; left: 0.9rem; bottom: 0.9rem; padding: 0.35rem 0.7rem; border-radius: 999px; background: rgba(7, 17, 31, 0.78); border: 1px solid rgba(142,197,255,0.16); color: #eef5ff; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; backdrop-filter: blur(10px); }
    .webhook-shot.desktop { left: 0; top: 0; width: 82%; aspect-ratio: 16 / 10; }
    .webhook-shot.phone { right: 0; bottom: 0; width: 28%; aspect-ratio: 9 / 16; transform: rotate(4deg); }
    body.light .webhook-shot { background: rgba(255,255,255,0.94); border-color: rgba(20, 32, 51, 0.1); box-shadow: 0 20px 48px rgba(20, 32, 51, 0.14); }
    .project-showcase { grid-column: 1 / -1; overflow: hidden; background: linear-gradient(145deg, rgba(12, 26, 44, 0.98), rgba(7, 17, 31, 0.98)); border: 2px solid rgba(255, 200, 87, 0.42); box-shadow: 0 0 0 1px rgba(255, 200, 87, 0.14), 0 28px 60px rgba(0, 0, 0, 0.32); }
    body.light .project-showcase { background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(238,243,251,0.98)); }
    .project-showcase::before { content: ''; position: absolute; inset: -20% auto auto -10%; width: 18rem; height: 18rem; background: radial-gradient(circle, rgba(73,242,194,0.18), transparent 72%); pointer-events: none; }
    .project-shell { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr); gap: 2rem; align-items: center; position: relative; z-index: 1; }
    .project-copy { text-align: left; color: #eef5ff; position: relative; z-index: 2; padding: 1.35rem 1.45rem; border-radius: 1.2rem; background: linear-gradient(180deg, rgba(5, 12, 22, 0.86), rgba(10, 20, 34, 0.72)); border: 1px solid rgba(142,197,255,0.14); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
    body.light .project-copy { color: #142033; background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(244,248,253,0.9)); border-color: rgba(20, 32, 51, 0.1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); }
    .project-label { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.85rem; border-radius: 999px; background: rgba(255, 200, 87, 0.18); border: 1px solid rgba(255, 200, 87, 0.45); color: #ffd36e; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1rem; }
    body.light .project-label { color: #7a4b00; background: rgba(255, 200, 87, 0.3); }
    .project-showcase h3 { font-family: 'Orbitron', sans-serif; font-size: 2.35rem; color: #f7fbff; margin-bottom: 0.9rem; text-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
    body.light .project-showcase h3 { color: #142033; }
    .project-copy p { max-width: 100%; color: #eef5ff; font-size: 1.02rem; line-height: 1.8; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.24); }
    body.light .project-copy p { color: #1b2b40; }
    .project-meta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.2rem; }
    .project-meta span { padding: 0.48rem 0.8rem; border-radius: 999px; border: 1px solid rgba(142,197,255,0.24); background: rgba(255,255,255,0.1); color: #f1f7ff; font-size: 0.82rem; }
    body.light .project-meta span { background: rgba(20, 32, 51, 0.06); color: #24374f; border-color: rgba(20, 32, 51, 0.14); }
    .project-visual { display: grid; place-items: center; }
    .project-gallery { position: relative; width: min(100%, 34rem); min-height: 29rem; display: grid; place-items: center; }
    .project-gallery::before { content: ''; position: absolute; inset: 14% 10% 12% 8%; border-radius: 2rem; background: radial-gradient(circle at top, rgba(73,242,194,0.24), rgba(12, 26, 44, 0.08) 42%, transparent 78%); filter: blur(26px); }
    .project-shot { position: absolute; overflow: hidden; border-radius: 1.35rem; border: 1px solid rgba(142,197,255,0.18); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32); background: rgba(6, 15, 27, 0.92); }
    .project-shot img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
    .project-shot figcaption { position: absolute; left: 1rem; bottom: 1rem; padding: 0.35rem 0.7rem; border-radius: 999px; background: rgba(7, 17, 31, 0.78); border: 1px solid rgba(142,197,255,0.16); color: #eef5ff; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; backdrop-filter: blur(10px); }
    .project-shot.main { width: 82%; aspect-ratio: 16 / 9; top: 0; left: 2%; z-index: 2; transform: rotate(-3deg); }
    .project-shot.secondary { width: 49%; aspect-ratio: 16 / 9; right: 0; top: 16%; z-index: 3; transform: rotate(6deg); }
    .project-shot.tertiary { width: 58%; aspect-ratio: 16 / 9; left: 12%; bottom: 2%; z-index: 4; transform: rotate(-1.5deg); }
    body.light .project-shot { background: rgba(255,255,255,0.92); border-color: rgba(20, 32, 51, 0.1); box-shadow: 0 20px 48px rgba(20, 32, 51, 0.16); }
    .tv-mock { width: min(100%, 28rem); padding: 1rem; border-radius: 1.4rem; background: linear-gradient(180deg, rgba(6, 15, 27, 0.98), rgba(11, 24, 40, 0.98)); border: 1px solid rgba(142,197,255,0.18); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.28); }
    body.light .tv-mock { background: linear-gradient(180deg, #f9fbfe, #edf3fb); }
    .tv-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.9rem; color: var(--txt); font-size: 0.84rem; }
    .tv-header strong { font-family: 'Orbitron', sans-serif; color: var(--primary); }
    .tv-status { padding: 0.32rem 0.65rem; border-radius: 999px; background: rgba(73,242,194,0.14); border: 1px solid rgba(73,242,194,0.35); color: var(--accent); font-weight: 700; }
    .tv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
    .tv-tile { min-height: 6.2rem; padding: 0.95rem; border-radius: 1rem; background: linear-gradient(180deg, rgba(18, 36, 58, 0.98), rgba(10, 22, 39, 0.98)); border: 1px solid rgba(142,197,255,0.14); color: var(--txt); display: flex; flex-direction: column; justify-content: space-between; }
    body.light .tv-tile { background: rgba(255,255,255,0.92); }
    .tv-tile.featured { background: linear-gradient(135deg, rgba(255, 200, 87, 0.24), rgba(73, 242, 194, 0.18), rgba(12, 26, 44, 0.96)); border-color: rgba(255, 200, 87, 0.34); }
    body.light .tv-tile.featured { background: linear-gradient(135deg, rgba(255, 200, 87, 0.28), rgba(73, 242, 194, 0.18), rgba(255,255,255,0.96)); }
    .tv-tile strong { font-size: 0.98rem; color: #f7fbff; }
    body.light .tv-tile strong { color: #142033; }
    .tv-tile span { color: var(--muted); font-size: 0.78rem; }
    .tv-meter { height: 0.45rem; border-radius: 999px; background: rgba(255,255,255,0.12); overflow: hidden; }
    .tv-meter::after { content: ''; display: block; height: 100%; width: var(--fill, 50%); border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-alt)); }
    .copy { position: absolute; top: 1rem; right: 1rem; background: transparent; border: 1px solid var(--accent); color: var(--accent); padding: 0.3rem 0.6rem; font-size: 0.75rem; cursor: pointer; border-radius: 999px; }
    .copy:hover { background: var(--accent); color: #000; }
    pre { background: #09111b; padding: 1rem; border-radius: 0.5rem; max-height: 220px; overflow: auto; font-size: 0.85rem; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid rgba(142,197,255,0.12); }
    pre code { display: block; color: #d6e4f7; }
    body.light pre code { color: #17314a; }
    .contact-form { max-width: 760px; margin: auto; display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border-radius: 1.25rem; border: 1px solid rgba(142,197,255,0.14); background: linear-gradient(180deg, rgba(13, 26, 43, 0.9), rgba(10, 20, 34, 0.92)); box-shadow: 0 24px 56px rgba(0, 0, 0, 0.22); }
    body.light .contact-form { background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,248,253,0.96)); border-color: rgba(20, 32, 51, 0.1); box-shadow: 0 18px 44px rgba(20, 32, 51, 0.1); }
    .contact-form label { color: var(--muted); font-size: 0.84rem; letter-spacing: 0.05em; text-transform: uppercase; }
    .contact-form input, .contact-form textarea { background: #09111b; color: var(--txt); border: 1px solid rgba(142,197,255,0.16); padding: 0.75rem; border-radius: var(--radius); font-family: inherit; transition: background 0.3s, color 0.3s; }
    body.light .contact-form input, body.light .contact-form textarea { background: #f4f5fa; color: #151528; border: 1px solid #c7d2e3; }
    .turnstile-wrap { display: flex; justify-content: center; margin-top: 0.25rem; }
    .turnstile-wrap .cf-turnstile { min-height: 65px; }
    .contact-note { max-width: 600px; margin: 0 auto 1rem; color: var(--muted); text-align: center; font-size: 0.9rem; }
    .contact-status { max-width: 600px; margin: 1rem auto 0; padding: 0.85rem 1rem; border-radius: 0.9rem; border: 1px solid rgba(142,197,255,0.14); background: rgba(255,255,255,0.03); color: var(--txt); text-align: center; font-size: 0.9rem; min-height: 3.2rem; display: grid; place-items: center; opacity: 0; transform: translateY(10px); transition: opacity 0.25s ease, transform 0.25s ease; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
    body.light .contact-status { background: rgba(255,255,255,0.92); border-color: rgba(20, 32, 51, 0.1); color: #183149; }
    .contact-status.is-visible { opacity: 1; transform: translateY(0); }
    .contact-status.is-success { border-color: rgba(73,242,194,0.32); color: #dffff4; }
    .contact-status.is-error { border-color: rgba(255,122,122,0.28); color: #ffd5d5; }
    .contact-form .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
    .quick-facts { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: 2rem; }
    .fact { padding: 1.15rem 1rem; border-radius: var(--radius); border: 1px solid rgba(73, 242, 194, 0.14); background: linear-gradient(180deg, rgba(17, 33, 54, 0.88), rgba(10, 22, 37, 0.82)); text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
    body.light .fact { background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(242,247,252,0.96)); border-color: rgba(20, 32, 51, 0.1); box-shadow: 0 14px 32px rgba(20, 32, 51, 0.06); }
    .fact strong { display: block; color: var(--accent-alt); font-size: 1.05rem; margin-bottom: 0.25rem; }
    .fact span { color: var(--muted); line-height: 1.6; }
    body.light .fact span { color: #46617d; }
    .tag-list { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1rem; }
    .tag-list span { padding: 0.45rem 0.8rem; border-radius: 999px; background: rgba(255,255,255,0.04); border: 1px solid rgba(142,197,255,0.14); color: var(--muted); font-size: 0.82rem; }
    body.light .tag-list span { background: rgba(20, 32, 51, 0.05); border-color: rgba(20, 32, 51, 0.1); color: #45617d; }
    .button-row { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 1.5rem; }
    .link-grid { display: grid; gap: 1.35rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
    .link-card { display: flex; align-items: flex-start; gap: 0.95rem; padding: 1.25rem 1.2rem; border-radius: 1.15rem; border: 1px solid rgba(142,197,255,0.14); background: linear-gradient(180deg, rgba(15, 29, 48, 0.9), rgba(9, 19, 32, 0.9)); color: var(--txt); transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s ease; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16); }
    .link-card:hover { transform: translateY(-3px); border-color: rgba(73, 242, 194, 0.35); box-shadow: 0 24px 46px rgba(0, 0, 0, 0.22); }
    body.light .link-card { background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(243,247,252,0.97)); border-color: rgba(20, 32, 51, 0.1); box-shadow: 0 16px 34px rgba(20, 32, 51, 0.08); }
    .link-card strong { display: block; color: var(--accent); margin-bottom: 0.35rem; }
    .link-card span { color: var(--muted); font-size: 0.9rem; }
    body.light .link-card span { color: #4a647f; }
    .link-icon { width: 2.7rem; height: 2.7rem; object-fit: contain; flex: 0 0 auto; border-radius: 0.8rem; background: rgba(255,255,255,0.05); padding: 0.35rem; border: 1px solid rgba(142,197,255,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }
    body.light .link-icon { background: rgba(20, 32, 51, 0.05); border-color: rgba(20, 32, 51, 0.08); }
    .link-fa { display: inline-grid; place-items: center; color: var(--accent-alt); font-size: 1rem; }
    .link-card-body { min-width: 0; }
    .env-shell { max-width: none; margin: 0 auto; }
    .env-trigger-wrap { display: flex; justify-content: center; margin-bottom: 1rem; }
    .env-trigger { min-width: 15rem; font-family: 'Orbitron', sans-serif; font-size: 0.92rem; letter-spacing: 0.12em; text-transform: uppercase; color: #f4fbff; background: linear-gradient(135deg, rgba(8, 20, 36, 0.92), rgba(16, 34, 58, 0.94)); border: 1px solid rgba(142,197,255,0.22); box-shadow: 0 0 0 1px rgba(73,242,194,0.08), 0 16px 38px rgba(0, 0, 0, 0.24); }
    .env-trigger:hover { border-color: rgba(73,242,194,0.46); background: linear-gradient(135deg, rgba(10, 28, 48, 0.96), rgba(18, 40, 66, 0.98)); }
    .env-trigger.is-pending { background: linear-gradient(135deg, rgba(15, 58, 68, 0.88), rgba(18, 39, 74, 0.92)); border-color: rgba(73,242,194,0.5); color: #eefcff; box-shadow: 0 0 0 1px rgba(73,242,194,0.2), 0 0 28px rgba(73,242,194,0.16); }
    .env-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.85fr); gap: 1.25rem; align-items: start; }
    .env-toolbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; padding: 1.35rem 1.45rem; }
    .env-kicker { color: var(--accent-alt); font-family: 'Orbitron', sans-serif; text-transform: uppercase; letter-spacing: 0.13em; font-size: 0.78rem; margin-bottom: 0.35rem; }
    .env-toolbar h3 { color: var(--txt); font-family: 'Orbitron', sans-serif; font-size: 1.25rem; margin-bottom: 0.35rem; }
    .env-lead { color: var(--muted); max-width: 52rem; line-height: 1.75; }
    .env-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; }
    .env-actions .btn { white-space: nowrap; }
    .env-card { position: relative; overflow: hidden; }
    .env-card { max-height: 0; opacity: 0; transform: translateY(18px) scale(0.98); pointer-events: none; transition: max-height 0.75s ease, opacity 0.35s ease, transform 0.45s ease; }
    .env-card.is-open { max-height: 80rem; opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
    .env-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,200,87,0.08), transparent 42%, rgba(73,242,194,0.12)); pointer-events: none; }
    .env-card::after { content: ''; position: absolute; inset: auto -10% -50% 45%; width: 22rem; height: 22rem; background: radial-gradient(circle, rgba(73,242,194,0.16), transparent 70%); filter: blur(12px); pointer-events: none; }
    .env-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; position: relative; z-index: 1; }
    .env-stat { position: relative; padding: 1.15rem; border-radius: 1.05rem; background: linear-gradient(180deg, rgba(10, 24, 40, 0.92), rgba(12, 27, 46, 0.84)); border: 1px solid rgba(142,197,255,0.16); min-height: 9rem; display: flex; flex-direction: column; justify-content: space-between; gap: 0.7rem; opacity: 0; transform: translateY(14px); transition: opacity 0.45s ease, transform 0.45s ease, border-color 0.3s ease, box-shadow 0.3s ease; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); overflow: hidden; }
    .env-stat::after { content: ''; position: absolute; top: 0; bottom: 0; width: 42%; left: -55%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); transform: skewX(-18deg); opacity: 0; }
    body.light .env-stat { background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(241,246,252,0.96)); border-color: rgba(20, 32, 51, 0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8); }
    .env-stat:nth-child(1) { border-color: rgba(73,242,194,0.28); background: linear-gradient(180deg, rgba(7, 34, 31, 0.96), rgba(10, 28, 38, 0.88)); box-shadow: inset 0 1px 0 rgba(170,255,229,0.05), 0 0 0 1px rgba(73,242,194,0.06); }
    .env-stat:nth-child(2) { border-color: rgba(173,118,255,0.28); background: linear-gradient(180deg, rgba(31, 17, 52, 0.96), rgba(16, 24, 44, 0.88)); box-shadow: inset 0 1px 0 rgba(218,197,255,0.05), 0 0 0 1px rgba(173,118,255,0.06); }
    .env-stat:nth-child(3) { border-color: rgba(255,184,77,0.3); background: linear-gradient(180deg, rgba(52, 28, 7, 0.96), rgba(27, 21, 34, 0.88)); box-shadow: inset 0 1px 0 rgba(255,224,182,0.05), 0 0 0 1px rgba(255,184,77,0.06); }
    body.light .env-stat:nth-child(1) { background: linear-gradient(180deg, rgba(241,255,250,0.98), rgba(232,248,243,0.96)); border-color: rgba(26,132,99,0.18); }
    body.light .env-stat:nth-child(2) { background: linear-gradient(180deg, rgba(248,244,255,0.98), rgba(240,236,252,0.96)); border-color: rgba(114,79,180,0.2); }
    body.light .env-stat:nth-child(3) { background: linear-gradient(180deg, rgba(255,248,238,0.98), rgba(251,241,229,0.96)); border-color: rgba(191,118,23,0.2); }
    .env-card.is-open .env-stat { opacity: 1; transform: translateY(0); }
    .env-card.is-open .env-stat:nth-child(2) { transition-delay: 0.08s; }
    .env-card.is-open .env-stat:nth-child(3) { transition-delay: 0.16s; }
    .env-card.is-loading .env-stat::after { opacity: 1; animation: scanSweep 1.25s ease-in-out infinite; }
    .env-card.is-loading .env-stat:nth-child(2)::after { animation-delay: 0.16s; }
    .env-card.is-loading .env-stat:nth-child(3)::after { animation-delay: 0.32s; }
    .env-label { color: #8ec5ff; font-family: 'Orbitron', sans-serif; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.14em; }
    .env-stat:nth-child(1) .env-label { color: #7bf6d3; }
    .env-stat:nth-child(2) .env-label { color: #c8a3ff; }
    .env-stat:nth-child(3) .env-label { color: #ffbf6f; }
    body.light .env-label { color: #30507a; }
    body.light .env-stat:nth-child(1) .env-label { color: #157d5c; }
    body.light .env-stat:nth-child(2) .env-label { color: #754ab6; }
    body.light .env-stat:nth-child(3) .env-label { color: #bd6e13; }
    .env-value { font-size: 1.08rem; color: #f7fbff; word-break: break-word; }
    .env-copy { position: absolute; top: 1rem; right: 1rem; }
    .env-stat:nth-child(1) .env-value { color: #dffff4; text-shadow: 0 0 20px rgba(73,242,194,0.14); }
    .env-stat:nth-child(2) .env-value { color: #f0e4ff; text-shadow: 0 0 20px rgba(173,118,255,0.16); }
    .env-stat:nth-child(3) .env-value { color: #fff0da; text-shadow: 0 0 20px rgba(255,184,77,0.14); }
    body.light .env-value { color: #15263b; text-shadow: none; }
    .env-decode { font-family: 'Orbitron', sans-serif; letter-spacing: 0.04em; }
    .env-note { margin-top: 1rem; color: var(--muted); font-size: 0.88rem; text-align: left; position: relative; z-index: 1; }
    .env-drawer { padding: 1.35rem; display: flex; flex-direction: column; gap: 1rem; }
    .tech-drawer { border: 1px solid rgba(142,197,255,0.12); border-radius: 1rem; background: rgba(7,17,31,0.35); padding: 0.1rem 0.9rem 0.9rem; }
    body.light .tech-drawer { background: rgba(244,248,253,0.85); border-color: rgba(20, 32, 51, 0.1); }
    .tech-drawer summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.9rem 0.2rem; color: var(--txt); font-family: 'Orbitron', sans-serif; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.12em; }
    .tech-drawer summary::-webkit-details-marker { display: none; }
    .tech-hint { color: var(--muted); font-family: inherit; font-size: 0.72rem; text-transform: none; letter-spacing: 0.02em; }
    .tech-json { margin: 0; max-height: 28rem; font-size: 0.82rem; }
    [hidden] { display: none !important; }
    .env-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(73,242,194,0.6); margin-right: 0.45rem; vertical-align: middle; }
    .contact-direct { text-align: center; margin-top: 1.5rem; color: var(--muted); }
    .contact-direct a { color: var(--accent); }
    footer { background: rgba(8, 17, 29, 0.84); padding: 2rem 0; text-align: center; font-size: 0.85rem; border-top: 1px solid rgba(142,197,255,0.1); transition: background 0.3s; }
    body.light footer { background: var(--bg-alt-light); border-top: 1px solid #d8e0eb; }
    .socials { display: flex; justify-content: center; gap: 0.75rem; margin-top: 1rem; flex-wrap: wrap; }
    .socials a { min-height: 40px; padding: 0.45rem 0.8rem; border: 1px solid var(--accent); display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; border-radius: 999px; color: var(--accent); transition: background 0.3s, color 0.3s, transform 0.2s; }
    .socials a:hover { background: var(--accent); color: #000; transform: translateY(-2px); }
    .socials a img { width: 18px; height: 18px; object-fit: contain; display: block; }
    .socials a span { font-size: 0.78rem; line-height: 1; }
    body.light .socials a { background: rgba(255,255,255,0.84); border-color: rgba(28, 168, 144, 0.3); color: #1ca893; box-shadow: 0 12px 26px rgba(20, 32, 51, 0.06); }
    body.light .socials a:hover { color: #051319; }
    /* Premium showcase module */
    .showcase-module { --showcase-stage-height: min(84vh, 48rem); --showcase-stage-top: 7.2rem; --showcase-step-height: 74vh; --showcase-stack-height: 31rem; --showcase-depth: 0px; --showcase-progress: 0.25; --showcase-glow-strength: 0.34; position: relative; margin: 3rem 0 4rem; padding: 2rem 0 0.5rem; }
    .showcase-module::before, .showcase-module::after { content: ''; position: absolute; pointer-events: none; filter: blur(18px); z-index: 0; }
    .showcase-module::before { width: 20rem; height: 20rem; left: -4rem; top: 4rem; background: radial-gradient(circle, rgba(73, 242, 194, calc(var(--showcase-glow-strength) * 0.55)), transparent 68%); }
    .showcase-module::after { width: 24rem; height: 24rem; right: -4rem; bottom: 0; background: radial-gradient(circle, rgba(255, 200, 87, calc(var(--showcase-glow-strength) * 0.45)), transparent 72%); }
    .showcase-shell { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr); gap: clamp(1.5rem, 3vw, 2.75rem); align-items: start; }
    .showcase-stage { position: sticky; top: var(--showcase-stage-top); min-height: var(--showcase-stage-height); padding: 1.6rem; border-radius: 1.5rem; overflow: hidden; isolation: isolate; background: radial-gradient(circle at top left, rgba(73, 242, 194, 0.12), transparent 28%), radial-gradient(circle at bottom right, rgba(255, 200, 87, 0.12), transparent 32%), linear-gradient(180deg, rgba(10, 21, 36, 0.98), rgba(7, 17, 31, 0.98)); border: 1px solid rgba(142, 197, 255, 0.14); box-shadow: 0 34px 80px rgba(0, 0, 0, 0.34); display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 1.35rem; }
    .showcase-stage::before { content: ''; position: absolute; inset: 0; background: linear-gradient(130deg, rgba(255,255,255,0.045), transparent 24%, transparent 58%, rgba(142,197,255,0.06)); pointer-events: none; z-index: -1; }
    .showcase-header { display: grid; gap: 1rem; position: relative; z-index: 2; align-content: start; }
    .showcase-kicker { display: inline-flex; align-items: center; gap: 0.55rem; width: fit-content; padding: 0.48rem 0.8rem; border-radius: 999px; border: 1px solid rgba(255, 200, 87, 0.34); background: rgba(255, 200, 87, 0.09); color: #ffd36e; font-family: 'Orbitron', sans-serif; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; }
    .showcase-kicker::before { content: ''; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px rgba(73, 242, 194, 0.7); }
    .showcase-title-row { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
    .showcase-title-row h3 { font-family: 'Orbitron', sans-serif; font-size: clamp(1.85rem, 2.4vw, 2.85rem); line-height: 1.14; color: #f7fbff; max-width: 12ch; margin-bottom: 0.7rem; text-wrap: balance; }
    .showcase-lead { max-width: 46rem; color: var(--muted); line-height: 1.85; }
    .showcase-counter { min-width: 6.5rem; text-align: right; color: var(--muted); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; }
    .showcase-counter strong { display: block; color: var(--accent-alt); font-family: 'Orbitron', sans-serif; font-size: 2.2rem; line-height: 1; margin-bottom: 0.25rem; }
    .showcase-progress-track { width: 100%; height: 3px; border-radius: 999px; background: rgba(142, 197, 255, 0.14); overflow: hidden; margin-top: 0.45rem; }
    .showcase-progress-fill { width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-alt)); transform: scaleX(var(--showcase-progress)); transform-origin: left center; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
    .showcase-stage-meta { display: flex; flex-wrap: wrap; gap: 0.75rem; color: var(--muted); font-size: 0.85rem; }
    .showcase-stage-meta span { padding: 0.42rem 0.78rem; border-radius: 999px; border: 1px solid rgba(142, 197, 255, 0.16); background: rgba(255,255,255,0.04); }
    .showcase-stack { position: relative; min-height: var(--showcase-stack-height); height: var(--showcase-stack-height); transform: translateY(var(--showcase-depth)); transition: transform 0.4s ease-out; }
    .showcase-panel { position: absolute; inset: 0; min-height: 100%; height: 100%; padding: 1.2rem; border-radius: 1.35rem; border: 1px solid rgba(142, 197, 255, 0.14); background: linear-gradient(180deg, rgba(11, 24, 41, 0.98), rgba(7, 17, 31, 0.96)); box-shadow: 0 28px 62px rgba(0, 0, 0, 0.34); display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 1rem; opacity: var(--showcase-opacity, 0.2); transform: translate3d(0, var(--showcase-translate, 70px), 0) scale(var(--showcase-scale, 0.92)) rotateX(var(--showcase-rotate, -6deg)); filter: blur(var(--showcase-blur, 0)); transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.42s ease, filter 0.42s ease, border-color 0.42s ease, box-shadow 0.42s ease; will-change: transform, opacity, filter; transform-origin: center top; overflow: hidden; }
    .showcase-panel.is-active { border-color: rgba(142, 197, 255, 0.26); box-shadow: 0 30px 72px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(142, 197, 255, 0.08); }
    .showcase-panel::before { content: ''; position: absolute; inset: 0; background: linear-gradient(140deg, rgba(255,255,255,0.05), transparent 30%, transparent 65%, rgba(73,242,194,0.08)); pointer-events: none; }
    .showcase-panel-head, .showcase-panel-copy, .showcase-panel-visual { position: relative; z-index: 1; }
    .showcase-panel-head, .showcase-panel-copy, .showcase-panel-visual, .showcase-panel-badge { transition: opacity 0.4s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s ease; }
    .showcase-panel-label { transition: opacity 0.32s ease; }
    .showcase-panel.is-active .showcase-panel-copy,
    .showcase-panel.is-active .showcase-panel-visual,
    .showcase-panel.is-active .showcase-panel-badge,
    .showcase-panel.is-active .showcase-panel-head { opacity: 1; visibility: visible; transform: none; filter: none; }
    .showcase-panel.is-past .showcase-panel-copy,
    .showcase-panel.is-future .showcase-panel-copy { opacity: 0; visibility: hidden; transform: translateY(1.2rem); }
    .showcase-panel.is-past .showcase-panel-visual,
    .showcase-panel.is-future .showcase-panel-visual { opacity: 0.22; transform: scale(0.985); filter: saturate(0.72); }
    .showcase-panel.is-past .showcase-panel-badge,
    .showcase-panel.is-future .showcase-panel-badge { opacity: 0; transform: translateY(-0.65rem); }
    .showcase-panel.is-past .showcase-panel-head,
    .showcase-panel.is-future .showcase-panel-head { opacity: 0.42; }
    .showcase-panel.is-past .showcase-panel-label,
    .showcase-panel.is-future .showcase-panel-label { opacity: 0.82; }
    .showcase-panel-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
    .showcase-panel-label { font-family: 'Orbitron', sans-serif; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: #ffd36e; }
    .showcase-panel-badge { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.7rem; border-radius: 999px; background: rgba(73,242,194,0.1); border: 1px solid rgba(73,242,194,0.24); color: #dffff4; font-size: 0.76rem; white-space: nowrap; }
    .showcase-panel-copy { display: grid; gap: 0.85rem; align-content: start; }
    .showcase-panel-copy h4 { font-family: 'Orbitron', sans-serif; font-size: 1.5rem; color: #f7fbff; text-wrap: balance; }
    .showcase-panel-copy p { color: #d6e4f7; line-height: 1.78; max-width: 58ch; }
    .showcase-panel-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; }
    .showcase-panel-tags span, .showcase-step-pills span, .showcase-cert-item, .showcase-checklist span { padding: 0.45rem 0.78rem; border-radius: 999px; border: 1px solid rgba(142, 197, 255, 0.14); background: rgba(255,255,255,0.04); color: var(--muted); font-size: 0.8rem; }
    .showcase-panel-visual { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(190px, 0.88fr); gap: 1rem; align-items: stretch; min-height: 0; }
    .showcase-screen { position: relative; overflow: hidden; isolation: isolate; min-height: 15rem; height: 100%; border-radius: 1.1rem; border: 1px solid rgba(142, 197, 255, 0.16); background: rgba(7, 17, 31, 0.92); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
    .showcase-screen img { width: 100%; height: 100%; object-fit: cover; display: block; transform: translateZ(0); backface-visibility: hidden; }
    .showcase-screen figcaption { position: absolute; left: 1rem; bottom: 1rem; z-index: 2; padding: 0.38rem 0.72rem; border-radius: 999px; background: rgba(7, 17, 31, 0.82); border: 1px solid rgba(142, 197, 255, 0.16); color: #eef5ff; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; backdrop-filter: blur(10px); }
    .showcase-sidegrid, .showcase-mini-stack, .showcase-checklist, .showcase-cert-grid { display: grid; gap: 0.85rem; align-content: start; }
    .showcase-statcard, .showcase-mini-card, .showcase-command, .showcase-cert-card { border-radius: 1rem; border: 1px solid rgba(142, 197, 255, 0.14); background: linear-gradient(180deg, rgba(16, 31, 51, 0.94), rgba(10, 21, 36, 0.92)); padding: 0.95rem 1rem; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
    .showcase-statcard strong, .showcase-mini-card strong, .showcase-cert-card strong { display: block; color: #f7fbff; margin-bottom: 0.28rem; font-size: 0.9rem; }
    .showcase-statcard span, .showcase-mini-card span, .showcase-cert-card span { color: var(--muted); font-size: 0.8rem; line-height: 1.55; }
    .showcase-mini-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .showcase-split-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }
    .showcase-command { position: relative; min-height: 100%; display: grid; gap: 0.9rem; font-size: 0.82rem; color: #dce8fa; overflow: hidden; align-content: start; }
    .showcase-command::before { content: '$ deployment-sync --targets edge tvos home-lab'; display: block; color: var(--accent); font-family: 'Orbitron', sans-serif; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.1rem; }
    .showcase-command code { display: block; white-space: pre-wrap; color: #dce8fa; }
    .showcase-command strong { color: var(--accent-alt); margin-bottom: 0.1rem; }
    .showcase-checklist span { text-align: center; }
    .showcase-cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .showcase-cert-item { text-align: center; color: #eef5ff; background: rgba(255,255,255,0.06); }
    .showcase-steps { display: grid; align-content: start; gap: 0.4rem; padding-top: 1.2rem; }
    .showcase-step { min-height: var(--showcase-step-height); display: flex; flex-direction: column; justify-content: center; gap: 0.9rem; padding: 1.1rem 0 1.65rem; border-bottom: 1px solid rgba(142, 197, 255, 0.1); transition: opacity 0.35s ease, transform 0.35s ease; }
    .showcase-step:last-child { border-bottom: none; }
    .showcase-step-trigger { background: none; border: none; padding: 0; color: inherit; text-align: left; cursor: pointer; display: grid; gap: 0.7rem; width: 100%; }
    .showcase-step-index { font-family: 'Orbitron', sans-serif; font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-alt); }
    .showcase-step-title { font-family: 'Orbitron', sans-serif; font-size: clamp(1.3rem, 1.55vw, 1.7rem); line-height: 1.28; color: #a9bed8; transition: color 0.3s ease, transform 0.3s ease; text-wrap: balance; }
    .showcase-step-subtitle { color: #dce8fa; font-size: 0.88rem; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.82; }
    .showcase-step-copy { color: var(--muted); line-height: 1.85; max-width: 36rem; }
    .showcase-step-pills { display: flex; flex-wrap: wrap; gap: 0.6rem; }
    .showcase-step:not(.is-active) { opacity: 0.56; }
    .showcase-step.is-active { opacity: 1; }
    .showcase-step.is-active .showcase-step-title { color: #f7fbff; transform: translateX(0.18rem); }
    .showcase-step-trigger:focus-visible { outline: 2px solid rgba(73, 242, 194, 0.7); outline-offset: 0.45rem; border-radius: 0.45rem; }
    body.light .showcase-stage { background: radial-gradient(circle at top left, rgba(73, 242, 194, 0.14), transparent 28%), radial-gradient(circle at bottom right, rgba(255, 200, 87, 0.16), transparent 32%), linear-gradient(180deg, rgba(255,255,255,0.98), rgba(239,244,251,0.98)); border-color: rgba(20, 32, 51, 0.1); box-shadow: 0 24px 58px rgba(20, 32, 51, 0.14); }
    body.light .showcase-title-row h3, body.light .showcase-panel-copy h4, body.light .showcase-statcard strong, body.light .showcase-mini-card strong, body.light .showcase-cert-card strong, body.light .showcase-cert-item { color: #142033; }
    body.light .showcase-panel, body.light .showcase-screen, body.light .showcase-statcard, body.light .showcase-mini-card, body.light .showcase-command, body.light .showcase-cert-card { background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(241,246,252,0.96)); border-color: rgba(20, 32, 51, 0.1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.84); }
    body.light .showcase-screen::before, body.light .webhook-shot::before { background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.08)); border-bottom-color: rgba(20, 32, 51, 0.08); }
    .remote-media.is-media-fallback { filter: saturate(0.96) contrast(1.02); }
    .remote-media.is-media-missing { opacity: 0.72; }
    .webhook-shot.phone img { object-position: center top; }
    body.light .showcase-panel-copy p, body.light .showcase-command code, body.light .showcase-step-subtitle { color: #20344f; }
    body.light .showcase-panel-tags span, body.light .showcase-step-pills span, body.light .showcase-cert-item, body.light .showcase-checklist span { background: rgba(20, 32, 51, 0.05); border-color: rgba(20, 32, 51, 0.1); color: #36526f; }
    body.light .showcase-step-title { color: #4c627f; }
    body.light .showcase-step.is-active .showcase-step-title { color: #142033; }
    body.light .showcase-progress-track { background: rgba(20, 32, 51, 0.1); }
    .homeontv-feature { margin: 0 0 3rem; overflow: hidden; }
    .homeontv-shell { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(320px, 1.08fr); gap: 1.8rem; align-items: center; }
    .homeontv-copy { text-align: left; }
    .homeontv-copy h3 { font-size: 1.35rem; margin-bottom: 0.8rem; }
    .homeontv-copy p { line-height: 1.8; max-width: 62ch; }
    .homeontv-actions { justify-content: flex-start; margin-top: 1.2rem; }
    .homeontv-figure { margin: 0; position: relative; border-radius: 1.2rem; overflow: hidden; border: 1px solid rgba(142,197,255,0.16); background: rgba(7,17,31,0.72); box-shadow: 0 24px 54px rgba(0,0,0,0.28); }
    .homeontv-figure::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2.2rem; background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0)); border-bottom: 1px solid rgba(142,197,255,0.1); z-index: 1; }
    .homeontv-figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
    .homeontv-figure figcaption { padding: 0.95rem 1rem; color: #9db3cf; font-size: 0.82rem; border-top: 1px solid rgba(142,197,255,0.1); background: rgba(7,17,31,0.84); }
    body.light .homeontv-figure { background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(241,246,252,0.96)); border-color: rgba(20,32,51,0.1); box-shadow: 0 18px 40px rgba(20,32,51,0.08); }
    body.light .homeontv-figure::before { background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.08)); border-bottom-color: rgba(20,32,51,0.08); }
    body.light .homeontv-figure figcaption { color: #4a647f; background: rgba(255,255,255,0.92); border-top-color: rgba(20,32,51,0.08); }
    .ops-project { margin: 0 0 3rem; overflow: hidden; }
    .ops-project-shell { display: grid; grid-template-columns: minmax(0, 0.94fr) minmax(340px, 1.06fr); gap: 1.6rem; align-items: start; }
    .ops-project-copy { text-align: left; }
    .ops-project-copy h3 { font-size: 1.4rem; margin-bottom: 0.8rem; }
    .ops-project-copy p { max-width: 66ch; line-height: 1.8; }
    .ops-project-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; margin-top: 1.15rem; }
    .ops-project-note { margin-top: 1rem; color: var(--muted); font-size: 0.82rem; }
    .ops-project-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; align-items: stretch; }
    .ops-project-gallery-main { grid-column: 1 / -1; min-height: 13.5rem; }
    .ops-project-gallery .showcase-screen { min-height: 13rem; }
    .ops-project-gallery .showcase-screen img { object-position: center top; }
    .ops-project-gallery-main.showcase-screen img { object-position: left top; }
    body.light .ops-project-note { color: #405974; }
    .vikops-script-library { margin: 0 0 3rem; overflow: hidden; }
    .vikops-script-library-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.2rem; margin-bottom: 1rem; }
    .vikops-script-library-head h3 { font-size: 1.4rem; margin-bottom: 0.7rem; }
    .vikops-script-library-head .project-meta { margin-top: 0; justify-content: flex-end; }
    .vikops-script-group { border: 1px solid rgba(142,197,255,0.12); border-radius: 1.05rem; background: rgba(7,17,31,0.34); overflow: hidden; }
    .vikops-script-group + .vikops-script-group { margin-top: 1rem; }
    .vikops-script-group summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.1rem; color: var(--txt); font-family: 'Orbitron', sans-serif; font-size: 0.86rem; letter-spacing: 0.12em; text-transform: uppercase; }
    .vikops-script-group summary::-webkit-details-marker { display: none; }
    .vikops-script-group[open] summary { border-bottom: 1px solid rgba(142,197,255,0.1); }
    .vikops-script-group-body { padding: 1.1rem; }
    body.light .vikops-script-group { background: rgba(244,248,253,0.88); border-color: rgba(20,32,51,0.1); }
    body.light .vikops-script-group[open] summary { border-bottom-color: rgba(20,32,51,0.08); }
    .lab-track { --lab-stage-top: 7.2rem; --lab-step-height: 58vh; --lab-stage-progress: 0.25; position: relative; margin: 1rem 0 3rem; padding: 1.25rem 0 0.25rem; }
    .lab-track::before { content: ''; position: absolute; inset: 4rem auto auto -3rem; width: 18rem; height: 18rem; background: radial-gradient(circle, rgba(142,197,255,0.12), transparent 70%); filter: blur(18px); pointer-events: none; }
    .lab-track-header { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr); gap: 1.25rem; align-items: start; margin-bottom: 1.4rem; }
    .lab-track-kicker { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0.7rem; color: #9db3cf; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; }
    .lab-track-kicker::before { content: ''; width: 0.48rem; height: 0.48rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px rgba(73,242,194,0.58); }
    .lab-track-header h3 { font-family: 'Orbitron', sans-serif; font-size: clamp(1.55rem, 2vw, 2.2rem); line-height: 1.18; color: #f7fbff; max-width: 16ch; margin-bottom: 0.8rem; text-wrap: balance; }
    .lab-track-lead { max-width: 58rem; color: var(--muted); line-height: 1.82; }
    .lab-track-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; }
    .lab-summary-card { padding: 1rem; border-radius: 1rem; border: 1px solid rgba(142,197,255,0.12); background: linear-gradient(180deg, rgba(15,28,47,0.88), rgba(10,20,35,0.9)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
    .lab-summary-card span { display: block; color: var(--accent-alt); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.45rem; }
    .lab-summary-card strong { display: block; color: #e9f1fb; font-size: 0.9rem; line-height: 1.55; }
    .lab-track-shell { display: grid; grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr); gap: clamp(1.2rem, 2.5vw, 2.2rem); align-items: start; }
    .lab-steps { position: relative; display: grid; gap: 0.35rem; padding-left: 1.55rem; }
    .lab-steps::before { content: ''; position: absolute; left: 0.32rem; top: 0.6rem; bottom: 0.6rem; width: 1px; background: linear-gradient(180deg, rgba(142,197,255,0.08), rgba(73,242,194,0.28), rgba(142,197,255,0.08)); }
    .lab-step { position: relative; min-height: var(--lab-step-height); display: flex; flex-direction: column; justify-content: center; gap: 0.85rem; padding: 1.1rem 0 1.45rem; opacity: 0.48; transition: opacity 0.32s ease, transform 0.32s ease; }
    .lab-step::before { content: ''; position: absolute; left: -1.55rem; top: calc(50% - 0.38rem); width: 0.78rem; height: 0.78rem; border-radius: 50%; border: 1px solid rgba(142,197,255,0.3); background: rgba(7,17,31,0.95); box-shadow: 0 0 0 0 rgba(73,242,194,0); transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; }
    .lab-step.is-active { opacity: 1; transform: translateX(0.16rem); }
    .lab-step.is-active::before { background: var(--accent); border-color: rgba(73,242,194,0.7); box-shadow: 0 0 0 7px rgba(73,242,194,0.09); transform: scale(1.05); }
    .lab-step-trigger { display: grid; gap: 0.6rem; background: none; border: none; padding: 0; color: inherit; text-align: left; cursor: pointer; width: 100%; }
    .lab-step-index { color: var(--accent-alt); font-family: 'Orbitron', sans-serif; font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; }
    .lab-step-title { color: #acc0d9; font-family: 'Orbitron', sans-serif; font-size: clamp(1.18rem, 1.55vw, 1.55rem); line-height: 1.3; text-wrap: balance; transition: color 0.3s ease, transform 0.3s ease; }
    .lab-step.is-active .lab-step-title { color: #f7fbff; transform: translateX(0.18rem); }
    .lab-step-subtitle { color: #dce8fa; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.76; }
    .lab-step-copy { color: var(--muted); line-height: 1.82; max-width: 32rem; }
    .lab-step-pills { display: flex; flex-wrap: wrap; gap: 0.55rem; }
    .lab-step-pills span { padding: 0.42rem 0.72rem; border-radius: 999px; border: 1px solid rgba(142,197,255,0.12); background: rgba(255,255,255,0.04); color: var(--muted); font-size: 0.78rem; }
    .lab-step-trigger:focus-visible { outline: 2px solid rgba(73,242,194,0.7); outline-offset: 0.45rem; border-radius: 0.45rem; }
    .lab-stage { position: sticky; top: var(--lab-stage-top); padding: 1.25rem; border-radius: 1.45rem; overflow: hidden; background: linear-gradient(180deg, rgba(11,22,37,0.98), rgba(7,17,31,0.98)); border: 1px solid rgba(142,197,255,0.14); box-shadow: 0 30px 72px rgba(0,0,0,0.34); }
    .lab-stage:hover { transform: none; }
    .lab-stage::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.04), transparent 26%, transparent 70%, rgba(73,242,194,0.07)); pointer-events: none; }
    .lab-stage-topbar { display: flex; align-items: center; gap: 0.45rem; padding-bottom: 0.9rem; border-bottom: 1px solid rgba(142,197,255,0.1); color: #8ea7c2; font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; }
    .lab-stage-dot { width: 0.52rem; height: 0.52rem; border-radius: 50%; background: rgba(255,255,255,0.18); }
    .lab-stage-dot:first-child { background: rgba(255,120,120,0.9); }
    .lab-stage-dot:nth-child(2) { background: rgba(255,200,87,0.9); }
    .lab-stage-dot:nth-child(3) { background: rgba(73,242,194,0.9); }
    .lab-stage-path { margin-left: 0.4rem; }
    .lab-stage-head { display: grid; gap: 0.9rem; padding: 1rem 0 1.1rem; position: relative; z-index: 1; }
    .lab-stage-kicker { color: #9db3cf; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.4rem; }
    .lab-stage-title-row { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
    .lab-stage-title-row h4 { font-family: 'Orbitron', sans-serif; font-size: clamp(1.35rem, 2vw, 1.9rem); color: #f7fbff; }
    .lab-stage-counter { min-width: 7rem; text-align: right; color: #8ea7c2; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }
    .lab-stage-counter strong { display: block; color: var(--accent-alt); font-family: 'Orbitron', sans-serif; font-size: 2rem; line-height: 1; margin-bottom: 0.2rem; }
    .lab-stage-progress { width: 100%; height: 3px; border-radius: 999px; background: rgba(142,197,255,0.12); overflow: hidden; }
    .lab-stage-progress-fill { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-alt)); transform: scaleX(var(--lab-stage-progress)); transform-origin: left center; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
    .lab-panels { position: relative; min-height: 34rem; height: 34rem; }
    .lab-panel { position: absolute; inset: 0; padding: 1rem; border-radius: 1.15rem; border: 1px solid rgba(142,197,255,0.12); background: linear-gradient(180deg, rgba(15,28,47,0.98), rgba(9,19,33,0.96)); opacity: var(--lab-opacity, 0.14); transform: translate3d(0, var(--lab-translate, 56px), 0) scale(var(--lab-scale, 0.94)); filter: blur(var(--lab-blur, 0)); transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.38s ease, filter 0.38s ease, border-color 0.38s ease; box-shadow: 0 22px 52px rgba(0,0,0,0.28); overflow: hidden; }
    .lab-panel::before { content: ''; position: absolute; inset: 0; background: linear-gradient(140deg, rgba(255,255,255,0.045), transparent 30%, transparent 70%, rgba(142,197,255,0.05)); pointer-events: none; }
    .lab-panel.is-active { border-color: rgba(142,197,255,0.26); }
    .lab-panel-head, .lab-panel-copy, .lab-panel-grid { position: relative; z-index: 1; }
    .lab-panel-head { display: flex; justify-content: space-between; gap: 0.9rem; align-items: flex-start; margin-bottom: 0.9rem; }
    .lab-panel-label { color: #ffd36e; font-family: 'Orbitron', sans-serif; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; }
    .lab-panel-badge { display: inline-flex; align-items: center; padding: 0.4rem 0.72rem; border-radius: 999px; background: rgba(73,242,194,0.1); border: 1px solid rgba(73,242,194,0.22); color: #dffff4; font-size: 0.75rem; white-space: nowrap; }
    .lab-panel-copy { display: grid; gap: 0.7rem; margin-bottom: 1rem; }
    .lab-panel-copy h5 { font-family: 'Orbitron', sans-serif; font-size: 1.35rem; line-height: 1.25; color: #f7fbff; text-wrap: balance; }
    .lab-panel-copy p { color: #d6e4f7; line-height: 1.78; max-width: 62ch; }
    .lab-panel-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(210px, 0.85fr); gap: 0.95rem; align-items: start; }
    .lab-terminal, .lab-meta-card { border-radius: 1rem; border: 1px solid rgba(142,197,255,0.12); background: rgba(7,17,31,0.74); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
    .lab-terminal { overflow: hidden; }
    .lab-terminal-label { display: block; padding: 0.85rem 1rem; border-bottom: 1px solid rgba(142,197,255,0.1); color: #9db3cf; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; }
    .lab-terminal pre { margin: 0; padding: 1rem; max-height: 18.75rem; overflow: auto; font-size: 0.78rem; line-height: 1.65; color: #d7f3ea; }
    .lab-terminal code { display: block; white-space: pre-wrap; }
    .lab-meta-grid { display: grid; gap: 0.85rem; }
    .lab-meta-card { padding: 0.95rem 1rem; background: linear-gradient(180deg, rgba(16,31,51,0.94), rgba(10,21,36,0.92)); }
    .lab-meta-card span { display: block; color: var(--accent-alt); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.45rem; }
    .lab-meta-card strong { display: block; color: #e7eef8; font-size: 0.86rem; line-height: 1.65; font-weight: 500; }
    body.light .lab-track-header h3, body.light .lab-stage-title-row h4, body.light .lab-panel-copy h5 { color: #142033; }
    body.light .lab-step-title { color: #56708b; }
    body.light .lab-step.is-active .lab-step-title { color: #142033; }
    body.light .lab-stage, body.light .lab-panel, body.light .lab-summary-card, body.light .lab-terminal, body.light .lab-meta-card { background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(241,246,252,0.96)); border-color: rgba(20,32,51,0.1); box-shadow: 0 18px 40px rgba(20,32,51,0.08); }
    body.light .lab-track-kicker, body.light .lab-stage-kicker, body.light .lab-stage-path { color: #58718d; }
    body.light .lab-track-lead, body.light .lab-step-copy { color: #415a74; }
    body.light .lab-summary-card strong, body.light .lab-meta-card strong, body.light .lab-panel-copy p { color: #23364d; }
    body.light .lab-step-pills span { background: rgba(20,32,51,0.05); border-color: rgba(20,32,51,0.1); color: #3f5c78; }
    body.light .lab-steps::before { background: linear-gradient(180deg, rgba(20,32,51,0.08), rgba(28,168,144,0.28), rgba(20,32,51,0.08)); }
    body.light .lab-step::before { background: #f6fbff; border-color: rgba(20,32,51,0.16); }
    body.light .lab-step.is-active::before { background: #1ab79b; border-color: rgba(26,183,155,0.5); box-shadow: 0 0 0 7px rgba(26,183,155,0.1); }
    body.light .lab-stage-progress { background: rgba(20,32,51,0.08); }
    .vikops-surfaces { --vikops-progress: 0.2; position: relative; margin: 1.5rem 0 4rem; padding: 1rem 0 0.35rem; }
    .vikops-surfaces::before { content: ''; position: absolute; inset: auto -2rem -2rem auto; width: 20rem; height: 20rem; background: radial-gradient(circle, rgba(73,242,194,0.12), transparent 72%); filter: blur(22px); pointer-events: none; }
    .vikops-surfaces-header { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr); gap: 1.25rem; align-items: start; margin-bottom: 1.5rem; }
    .vikops-surfaces-kicker { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0.7rem; color: #9db3cf; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; }
    .vikops-surfaces-kicker::before { content: ''; width: 0.48rem; height: 0.48rem; border-radius: 50%; background: #ffb84d; box-shadow: 0 0 14px rgba(255,184,77,0.58); }
    .vikops-surfaces-header h3 { font-family: 'Orbitron', sans-serif; font-size: clamp(1.6rem, 2.1vw, 2.4rem); line-height: 1.16; color: #f7fbff; max-width: 18ch; margin-bottom: 0.78rem; text-wrap: balance; }
    .vikops-surfaces-lead { color: var(--muted); line-height: 1.82; max-width: 60rem; }
    .vikops-surfaces-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; }
    .vikops-summary-card { padding: 1rem; border-radius: 1rem; border: 1px solid rgba(142,197,255,0.12); background: linear-gradient(180deg, rgba(17,29,49,0.9), rgba(10,20,35,0.92)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
    .vikops-summary-card span { display: block; color: #ffcf73; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.45rem; }
    .vikops-summary-card strong { display: block; color: #eaf1fb; font-size: 0.9rem; line-height: 1.58; }
    .vikops-surfaces-shell { display: grid; grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr); gap: clamp(1.25rem, 2.8vw, 2.35rem); align-items: start; }
    .vikops-nav { display: grid; gap: 0.75rem; }
    .vikops-nav-item { position: relative; display: grid; gap: 0.35rem; width: 100%; padding: 1rem 1.05rem; text-align: left; border-radius: 1.1rem; border: 1px solid rgba(142,197,255,0.12); background: linear-gradient(180deg, rgba(15,28,47,0.88), rgba(9,19,33,0.94)); color: inherit; cursor: pointer; transition: transform 0.26s ease, border-color 0.26s ease, box-shadow 0.26s ease, background 0.26s ease; overflow: hidden; }
    .vikops-nav-item::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.04), transparent 28%, transparent 72%, rgba(73,242,194,0.06)); pointer-events: none; }
    .vikops-nav-item:hover, .vikops-nav-item:focus-visible, .vikops-nav-item.is-active { transform: translateX(0.2rem); border-color: rgba(73,242,194,0.34); box-shadow: 0 18px 40px rgba(0,0,0,0.22), 0 0 0 1px rgba(73,242,194,0.08); background: linear-gradient(180deg, rgba(17,31,53,0.96), rgba(10,22,38,0.98)); }
    .vikops-nav-item:focus-visible { outline: 2px solid rgba(73,242,194,0.7); outline-offset: 0.3rem; }
    .vikops-nav-label { color: #ffcf73; font-family: 'Orbitron', sans-serif; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
    .vikops-nav-title { color: #f7fbff; font-size: 1rem; }
    .vikops-nav-subtitle { color: #d7e5f8; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.78; }
    .vikops-nav-summary { color: var(--muted); font-size: 0.86rem; line-height: 1.65; }
    .vikops-stage { position: sticky; top: 7.2rem; padding: 1.25rem; border-radius: 1.45rem; overflow: hidden; background: radial-gradient(circle at top left, rgba(73,242,194,0.12), transparent 28%), radial-gradient(circle at bottom right, rgba(255,184,77,0.12), transparent 30%), linear-gradient(180deg, rgba(10,21,36,0.98), rgba(7,17,31,0.98)); border: 1px solid rgba(142,197,255,0.14); box-shadow: 0 30px 72px rgba(0,0,0,0.34); }
    .vikops-stage:hover { transform: none; }
    .vikops-stage::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.04), transparent 28%, transparent 72%, rgba(255,200,87,0.05)); pointer-events: none; }
    .vikops-stage-topbar { display: flex; align-items: center; gap: 0.45rem; padding-bottom: 0.9rem; border-bottom: 1px solid rgba(142,197,255,0.1); color: #8ea7c2; font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; }
    .vikops-stage-dot { width: 0.52rem; height: 0.52rem; border-radius: 50%; background: rgba(255,255,255,0.18); }
    .vikops-stage-dot:first-child { background: rgba(255,120,120,0.9); }
    .vikops-stage-dot:nth-child(2) { background: rgba(255,200,87,0.9); }
    .vikops-stage-dot:nth-child(3) { background: rgba(73,242,194,0.9); }
    .vikops-stage-path { margin-left: 0.4rem; }
    .vikops-stage-head { display: grid; gap: 0.9rem; padding: 1rem 0 1.1rem; position: relative; z-index: 1; }
    .vikops-stage-kicker { color: #9db3cf; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.4rem; }
    .vikops-stage-title-row { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
    .vikops-stage-title-row h4 { font-family: 'Orbitron', sans-serif; font-size: clamp(1.35rem, 2vw, 1.9rem); color: #f7fbff; }
    .vikops-stage-counter { min-width: 7rem; text-align: right; color: #8ea7c2; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }
    .vikops-stage-counter strong { display: block; color: #ffcf73; font-family: 'Orbitron', sans-serif; font-size: 2rem; line-height: 1; margin-bottom: 0.2rem; }
    .vikops-stage-progress { width: 100%; height: 3px; border-radius: 999px; background: rgba(142,197,255,0.12); overflow: hidden; }
    .vikops-stage-progress-fill { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--accent), #ffcf73); transform: scaleX(var(--vikops-progress)); transform-origin: left center; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
    .vikops-pulse { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1rem; position: relative; z-index: 1; }
    .vikops-pulse-card { padding: 0.85rem 0.9rem; border-radius: 0.95rem; border: 1px solid rgba(142,197,255,0.12); background: rgba(7,17,31,0.52); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
    .vikops-pulse-card span { display: block; color: #8ea7c2; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.36rem; }
    .vikops-pulse-card strong { display: block; color: #f7fbff; font-size: 0.86rem; line-height: 1.55; }
    .vikops-panels { position: relative; min-height: 34rem; }
    .vikops-panel { position: absolute; inset: 0; padding: 1rem; border-radius: 1.15rem; border: 1px solid rgba(142,197,255,0.12); background: linear-gradient(180deg, rgba(15,28,47,0.98), rgba(9,19,33,0.96)); box-shadow: 0 22px 52px rgba(0,0,0,0.28); opacity: 0; transform: translateY(1rem) scale(0.985); filter: blur(6px); transition: opacity 0.36s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), filter 0.36s ease, border-color 0.36s ease; overflow: hidden; pointer-events: none; }
    .vikops-panel::before { content: ''; position: absolute; inset: 0; background: linear-gradient(140deg, rgba(255,255,255,0.045), transparent 30%, transparent 70%, rgba(142,197,255,0.05)); pointer-events: none; }
    .vikops-panel.is-active { opacity: 1; transform: none; filter: none; border-color: rgba(142,197,255,0.24); pointer-events: auto; }
    .vikops-panel-head, .vikops-panel-copy, .vikops-panel-grid, .vikops-panel-footer { position: relative; z-index: 1; }
    .vikops-panel-head { display: flex; justify-content: space-between; gap: 0.9rem; align-items: flex-start; margin-bottom: 0.9rem; }
    .vikops-panel-label { color: #ffcf73; font-family: 'Orbitron', sans-serif; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; }
    .vikops-panel-badge { display: inline-flex; align-items: center; padding: 0.4rem 0.72rem; border-radius: 999px; background: rgba(73,242,194,0.1); border: 1px solid rgba(73,242,194,0.22); color: #dffff4; font-size: 0.75rem; white-space: nowrap; }
    .vikops-panel-copy { display: grid; gap: 0.7rem; margin-bottom: 1rem; }
    .vikops-panel-copy h5 { font-family: 'Orbitron', sans-serif; font-size: 1.34rem; line-height: 1.25; color: #f7fbff; text-wrap: balance; }
    .vikops-panel-copy p { color: #d6e4f7; line-height: 1.78; max-width: 64ch; }
    .vikops-panel-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(220px, 0.88fr); gap: 0.95rem; align-items: start; }
    .vikops-terminal, .vikops-meta-card { border-radius: 1rem; border: 1px solid rgba(142,197,255,0.12); background: rgba(7,17,31,0.74); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
    .vikops-terminal { overflow: hidden; }
    .vikops-terminal-label { display: block; padding: 0.85rem 1rem; border-bottom: 1px solid rgba(142,197,255,0.1); color: #9db3cf; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; }
    .vikops-terminal pre { margin: 0; padding: 1rem; max-height: 18rem; overflow: auto; font-size: 0.78rem; line-height: 1.65; color: #d7f3ea; }
    .vikops-terminal code { display: block; white-space: pre-wrap; }
    .vikops-meta-grid { display: grid; gap: 0.85rem; }
    .vikops-meta-card { padding: 0.95rem 1rem; background: linear-gradient(180deg, rgba(16,31,51,0.94), rgba(10,21,36,0.92)); }
    .vikops-meta-card span { display: block; color: var(--accent-alt); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.45rem; }
    .vikops-meta-card strong { display: block; color: #e7eef8; font-size: 0.86rem; line-height: 1.65; font-weight: 500; }
    .vikops-live-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; margin-top: 1rem; }
    .vikops-live-placeholder { padding: 0.95rem 1rem; border-radius: 1rem; border: 1px dashed rgba(142,197,255,0.16); background: rgba(7,17,31,0.5); color: #8ea7c2; }
    .vikops-service-card { padding: 0.95rem 1rem; border-radius: 1rem; border: 1px solid rgba(142,197,255,0.12); background: rgba(7,17,31,0.62); }
    .vikops-service-card.is-healthy { border-color: rgba(73,242,194,0.28); }
    .vikops-service-card.is-protected { border-color: rgba(255,207,115,0.28); }
    .vikops-service-card.is-degraded, .vikops-service-card.is-offline { border-color: rgba(255,122,122,0.28); }
    .vikops-service-head { display: flex; justify-content: space-between; gap: 0.8rem; align-items: center; margin-bottom: 0.55rem; }
    .vikops-service-head strong { color: #f7fbff; font-size: 0.92rem; }
    .vikops-service-head span { color: #ffcf73; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
    .vikops-service-card p { color: #d6e4f7; line-height: 1.62; margin-bottom: 0.7rem; }
    .vikops-service-meta { display: flex; flex-wrap: wrap; gap: 0.55rem; }
    .vikops-service-meta span { padding: 0.32rem 0.55rem; border-radius: 999px; border: 1px solid rgba(142,197,255,0.12); background: rgba(255,255,255,0.03); color: #8ea7c2; font-size: 0.72rem; }
    .vikops-topology { display: grid; grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1fr); gap: 0.9rem; margin-top: 1rem; }
    .vikops-topology-nodes { display: grid; gap: 0.7rem; }
    .vikops-topology-node { display: grid; gap: 0.3rem; width: 100%; padding: 0.95rem 1rem; text-align: left; border-radius: 1rem; border: 1px solid rgba(142,197,255,0.12); background: rgba(7,17,31,0.62); color: inherit; transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease; }
    .vikops-topology-node:hover, .vikops-topology-node:focus-visible, .vikops-topology-node.is-active { transform: translateX(0.15rem); border-color: rgba(73,242,194,0.28); background: rgba(13,25,42,0.86); }
    .vikops-topology-node span { color: #8ea7c2; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; }
    .vikops-topology-node strong { color: #f7fbff; font-size: 0.9rem; }
    .vikops-topology-detail { padding: 1rem; border-radius: 1rem; border: 1px solid rgba(142,197,255,0.12); background: rgba(7,17,31,0.62); color: #d6e4f7; line-height: 1.7; }
    .vikops-topology-detail-label { display: block; color: #ffcf73; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.38rem; }
    .vikops-topology-detail strong { display: block; color: #f7fbff; font-size: 1rem; margin-bottom: 0.55rem; }
    .vikops-topology-detail p + p { margin-top: 0.6rem; }
    .vikops-topology-detail .vikops-action-link { display: inline-flex; margin-top: 0.75rem; }
    .vikops-panel-footer { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-top: 1rem; }
    .vikops-chip-row, .vikops-action-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
    .vikops-chip-row span, .vikops-action-link { padding: 0.44rem 0.76rem; border-radius: 999px; border: 1px solid rgba(142,197,255,0.12); background: rgba(255,255,255,0.04); color: var(--muted); font-size: 0.79rem; }
    .vikops-action-link { color: #dffff4; background: rgba(73,242,194,0.08); border-color: rgba(73,242,194,0.24); transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease; }
    .vikops-action-link:hover { transform: translateY(-2px); background: rgba(73,242,194,0.14); border-color: rgba(73,242,194,0.36); }
    body.light .vikops-surfaces-header h3, body.light .vikops-stage-title-row h4, body.light .vikops-panel-copy h5, body.light .vikops-nav-title { color: #142033; }
    body.light .vikops-stage, body.light .vikops-panel, body.light .vikops-summary-card, body.light .vikops-terminal, body.light .vikops-meta-card, body.light .vikops-nav-item, body.light .vikops-pulse-card, body.light .vikops-service-card, body.light .vikops-topology-node, body.light .vikops-topology-detail { background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(241,246,252,0.96)); border-color: rgba(20,32,51,0.1); box-shadow: 0 18px 40px rgba(20,32,51,0.08); }
    body.light .vikops-surfaces-kicker, body.light .vikops-stage-kicker, body.light .vikops-stage-path { color: #58718d; }
    body.light .vikops-surfaces-lead, body.light .vikops-nav-summary { color: #415a74; }
    body.light .vikops-nav-subtitle, body.light .vikops-panel-copy p { color: #23364d; }
    body.light .vikops-pulse-card strong, body.light .vikops-service-head strong, body.light .vikops-topology-node strong, body.light .vikops-topology-detail strong { color: #142033; }
    body.light .vikops-service-card p, body.light .vikops-topology-detail { color: #23364d; }
    body.light .vikops-service-meta span, body.light .vikops-live-placeholder { background: rgba(20,32,51,0.04); border-color: rgba(20,32,51,0.08); color: #58718d; }
    body.light .vikops-chip-row span { background: rgba(20,32,51,0.05); border-color: rgba(20,32,51,0.1); color: #3f5c78; }
    body.light .vikops-action-link { color: #157d5c; background: rgba(26,183,155,0.08); border-color: rgba(26,183,155,0.22); }
    body.light .vikops-action-link:hover { background: rgba(26,183,155,0.14); border-color: rgba(26,183,155,0.32); }
    body.light .lab-terminal pre { color: #17314a; }
    body.light .lab-terminal-label { color: #58718d; border-bottom-color: rgba(20,32,51,0.08); }
    body.light .lab-stage-topbar { border-bottom-color: rgba(20,32,51,0.08); color: #58718d; }
    @keyframes pulse {
      0%, 100% { transform: scale(1); box-shadow: 0 0 0 18px rgba(73,242,194,0.03), 0 0 0 36px rgba(142,197,255,0.03), var(--shadow); }
      50% { transform: scale(1.03); box-shadow: 0 0 0 24px rgba(73,242,194,0.05), 0 0 0 48px rgba(142,197,255,0.04), var(--shadow); }
    }
    @keyframes floatTag {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-2px); }
    }
    @keyframes scanSweep {
      0% { left: -55%; }
      100% { left: 120%; }
    }
    @keyframes holoShift {
      0% { background-position: 0% 50%; }
      100% { background-position: 200% 50%; }
    }
    @keyframes holoSweep {
      0%, 100% { transform: translateX(-28%) skewX(-18deg); opacity: 0; }
      18% { opacity: 0.18; }
      45% { transform: translateX(255%) skewX(-18deg); opacity: 0.42; }
      60% { opacity: 0; }
    }
    @keyframes holoPulse {
      0%, 100% { filter: drop-shadow(0 0 16px rgba(73,242,194,0.12)); }
      50% { filter: drop-shadow(0 0 24px rgba(142,197,255,0.2)); }
    }
    @media(min-width:981px) and (prefers-reduced-motion: no-preference){
      .hero { background-attachment: fixed; }
    }
    @media(max-width:1320px){
      .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(332px, 372px); gap: 2rem; }
      .hero-copy { max-width: 37rem; }
      .hero h1 { max-width: 13.2ch; }
      .hero-copy .centered-text, .hero-list { max-width: 33rem; }
      .hero-visual { max-width: 23rem; }
      .orbit-stage { width: min(100%, 14.2rem); }
      .signal-core { width: 6.2rem; }
    }
    @media(max-width:1080px){
      .showcase-shell { grid-template-columns: 1fr; }
      .showcase-stage { position: relative; top: auto; min-height: auto; }
      .showcase-stack { min-height: auto; height: auto; transform: none !important; display: grid; gap: 0.9rem; }
      .showcase-panel { position: relative; inset: auto; min-height: auto; height: auto; opacity: 1; transform: none !important; filter: none !important; }
      .showcase-panel:not(.is-active) { display: none; }
      .showcase-step { min-height: auto; padding: 1.15rem 0 1.45rem; opacity: 1; }
      .showcase-panel-visual { grid-template-columns: 1fr; }
      .showcase-counter { text-align: left; min-width: 0; }
      .showcase-title-row { flex-direction: column; }
      .lab-track-header, .lab-track-shell { grid-template-columns: 1fr; }
      .vikops-surfaces-header, .vikops-surfaces-shell, .vikops-panel-grid, .vikops-topology, .vikops-live-services { grid-template-columns: 1fr; }
      .lab-stage { position: relative; top: auto; }
      .vikops-stage { position: relative; top: auto; }
      .vikops-pulse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .lab-panels { min-height: auto; height: auto; display: grid; gap: 0.9rem; }
      .vikops-panels { min-height: auto; display: grid; gap: 0.9rem; }
      .lab-panel { position: relative; inset: auto; opacity: 1; transform: none !important; filter: none !important; }
      .vikops-panel { position: relative; inset: auto; opacity: 1; transform: none !important; filter: none !important; }
      .lab-panel:not(.is-active) { display: none; }
      .vikops-panel:not(.is-active) { display: none; }
      .lab-step { min-height: auto; padding: 1rem 0 1.35rem; opacity: 1; }
      .lab-panel-grid { grid-template-columns: 1fr; }
      .lab-stage-title-row { flex-direction: column; }
      .lab-stage-counter { text-align: left; min-width: 0; }
      .vikops-stage-title-row { flex-direction: column; }
      .vikops-stage-counter { text-align: left; min-width: 0; }
      .vikops-panel-footer { flex-direction: column; }
    }
    @media(max-width:1180px){
      .hero { min-height: auto; }
      .hero-content { padding: 3rem 2rem 2.3rem; }
      .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 336px); gap: 1.75rem; }
      .hero-copy { max-width: 35rem; }
      .hero h1 { max-width: 12.6ch; }
      .hero-list { max-width: 30rem; }
      .hero-visual { max-width: 21rem; }
      .orbit-stage { width: min(100%, 13.2rem); grid-template-columns: minmax(0, 0.18fr) minmax(5.7rem, 6rem) minmax(0, 0.65fr); min-height: 10.75rem; }
      .signal-core { width: 5.85rem; }
    }
    @media(max-width:1120px){
      .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
      .hero-copy { max-width: 100%; text-align: center; justify-items: center; }
      .hero-copy .centered-text { margin-inline: auto; text-align: center; max-width: 38rem; }
      .hero-copy > p:not(.eyebrow) { max-width: 38rem; }
      .eyebrow { justify-self: center; }
      .hero-proof { max-width: 44rem; }
      .hero-list, .hero-copy .button-row { justify-content: center; }
      .hero-visual { max-width: 100%; width: min(100%, 38rem); margin-inline: auto; align-items: center; }
      .cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 38rem); }
      .cert-stack { gap: 0.75rem; }
      .orbit-stage { width: min(100%, 22rem); min-height: auto; grid-template-columns: 1fr; grid-template-rows: auto auto auto auto auto; grid-template-areas: "core" "top" "left" "right" "bottom"; gap: 0.8rem; padding-block: 0.45rem 0; }
      .orbit-top, .orbit-left, .orbit-right, .orbit-bottom { justify-self: center; align-self: auto; }
      .orbit-link { width: fit-content; max-width: 100%; }
    }
    @media(max-width:980px){
      .hero-visual { width: min(100%, 28rem); }
    }
    @media(max-width:920px){
      header { padding: 0.9rem 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
      .nav-pane-shell { display: none; }
      nav { order: 3; flex-basis: 100%; display: block; max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.2s ease; }
      header.nav-open nav { max-height: 22rem; opacity: 1; margin-top: 0.4rem; pointer-events: auto; }
      nav ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.6rem; width: 100%; }
      nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 2.8rem; padding: 0.55rem 0.7rem; border-radius: 0.9rem; border: 1px solid rgba(142,197,255,0.12); background: rgba(255,255,255,0.04); }
      nav a::after { display: none; }
      header.nav-open nav a.active, nav a:hover { border-color: rgba(73,242,194,0.28); background: rgba(255,255,255,0.08); }
      body.light nav a { background: rgba(255,255,255,0.9); border-color: rgba(20, 32, 51, 0.08); }
      .nav-toggle { display: inline-grid; }
    }
    @media(max-width:768px){
      .hero { background-attachment: scroll; padding-inline: 1rem; background-image: var(--hero-wallpaper-mobile-set); }
      .hero-content { padding: 3.15rem 1.2rem 2rem; }
      .hero-grid { grid-template-columns: 1fr; }
      .project-shell { grid-template-columns: 1fr; }
      .webhook-shell { grid-template-columns: 1fr; }
      .hero-copy { text-align: center; justify-items: stretch; }
      .hero-copy .centered-text { margin-inline: auto; text-align: center; }
      .hero-proof { grid-template-columns: 1fr; max-width: 100%; }
      .eyebrow { font-size: 0.64rem; letter-spacing: 0.11em; padding: 0.48rem 0.72rem; margin-inline: auto; }
      .hero h1 { font-size: 2.1rem; }
      .hero-list, .button-row { justify-content: center; }
      .hero-copy > p:not(.eyebrow) { max-width: 100%; }
      .hero-visual { min-height: 18rem; width: 100%; }
      .orbit-stage { width: 100%; min-height: auto; }
      .orbit-link { position: static; margin: 0.35rem auto; width: fit-content; }
      .cert-grid { grid-template-columns: 1fr; width: 100%; }
      .cert-stack { width: 100%; }
      .hero-cert-link:hover, .hero-cert-link:focus-visible, .hero-cert-link.is-active { transform: none; }
      .workflow-grid, .workflow-compare-grid, .workflow-pattern-grid { grid-template-columns: 1fr; }
      .env-layout { grid-template-columns: 1fr; }
      .env-grid { grid-template-columns: 1fr; }
      .env-toolbar { flex-direction: column; }
      .env-actions { justify-content: flex-start; }
      .section-title { font-size: 1.7rem; }
      .contact-form { padding: 1.1rem; }
      .project-copy { text-align: center; }
      .project-copy p { margin-inline: auto; }
      .project-meta { justify-content: center; }
      .webhook-copy { text-align: center; }
      .webhook-gallery { min-height: auto; display: grid; gap: 1rem; }
      .webhook-shot { position: relative; width: 100%; transform: none !important; }
      .webhook-shot.desktop, .webhook-shot.phone { width: 100%; inset: auto; aspect-ratio: 16 / 10; }
      .project-gallery { min-height: auto; width: 100%; gap: 1rem; }
      .project-gallery::before { display: none; }
      .project-shot { position: relative; width: 100%; transform: none !important; }
      .project-shot.main, .project-shot.secondary, .project-shot.tertiary { width: 100%; inset: auto; aspect-ratio: 16 / 9; }
      .tv-grid { grid-template-columns: 1fr; }
      .showcase-module { --showcase-stage-height: auto; --showcase-step-height: auto; margin-top: 2rem; }
      .showcase-stage { padding: 1.15rem; }
      .showcase-mini-stack, .showcase-cert-grid, .showcase-split-grid { grid-template-columns: 1fr; }
      .homeontv-shell { grid-template-columns: 1fr; }
      .homeontv-copy { text-align: center; }
      .homeontv-copy p { margin-inline: auto; }
      .homeontv-actions { justify-content: center; }
      .ops-project-shell { grid-template-columns: 1fr; }
      .ops-project-copy { text-align: center; }
      .ops-project-copy p { margin-inline: auto; }
      .ops-project-summary, .ops-project-gallery { grid-template-columns: 1fr; }
      .ops-project-gallery-main { grid-column: auto; }
      .vikops-script-library-head { flex-direction: column; }
      .vikops-script-library-head .project-meta { justify-content: flex-start; }
      .showcase-steps { padding-top: 0.5rem; gap: 0.2rem; }
      .showcase-step { min-height: auto; padding: 1rem 0 1.25rem; opacity: 1; }
      .showcase-step-title { font-size: 1.2rem; }
      .showcase-stage-meta { gap: 0.55rem; }
      .lab-track { --lab-step-height: auto; margin-top: 1.8rem; }
      .lab-track-header h3 { max-width: none; }
      .lab-track-summary { grid-template-columns: 1fr; }
      .vikops-surfaces { margin-top: 1.8rem; }
      .vikops-surfaces-header h3 { max-width: none; }
      .vikops-surfaces-summary { grid-template-columns: 1fr; }
      .vikops-pulse { grid-template-columns: 1fr; }
      .lab-steps { padding-left: 1.25rem; }
      .lab-step::before { left: -1.24rem; }
      .lab-stage { padding: 1rem; }
      .lab-stage-topbar { font-size: 0.7rem; }
      .lab-panel { padding: 0.9rem; }
      .lab-panel-head { flex-direction: column; }
      .vikops-stage { padding: 1rem; }
      .vikops-stage-topbar { font-size: 0.7rem; }
      .vikops-panel { padding: 0.9rem; }
      .vikops-panel-head { flex-direction: column; }
      .vikops-nav-item { padding: 0.95rem; }
      .vikops-terminal pre { max-height: none; font-size: 0.76rem; }
      .lab-terminal pre { max-height: none; font-size: 0.76rem; }
    }
    @media (prefers-reduced-motion: reduce) {
      .nav-pane,
      .nav-pane-panel,
      .nav-pane-toggle,
      .nav-pane-tab,
      .nav-pane-link { transition: none; }
      .nav-pane-preview-signal span { animation: none; }
    }
    @keyframes navPanePulse {
      0%, 100% { opacity: 0.45; transform: translateY(0); }
      50% { opacity: 1; transform: translateY(-2px); }
    }
    @media (prefers-reduced-motion: reduce) {
      .reveal, .reveal.is-pending { opacity: 1; transform: none; transition: none; }
      .showcase-stack { transform: none !important; transition: none; }
      .showcase-panel { transition: none; transform: none !important; filter: none !important; }
      .showcase-progress-fill, .showcase-step, .showcase-step-title { transition: none !important; }
      .lab-panel, .lab-stage-progress-fill, .lab-step, .lab-step-title { transition: none !important; transform: none !important; filter: none !important; }
      .vikops-panel, .vikops-stage-progress-fill, .vikops-nav-item { transition: none !important; transform: none !important; filter: none !important; }
      .orbit-link, .signal-core, .btn, .theme-toggle, .typed-wrap, .typed-wrap::after { animation: none !important; transition: none !important; }
    }