/* ========================================
   0TS.IR - TeamSpeak Template
   Modular, Offline, RTL — Day (Blue/White) & Night (Blue/Black) Themes
   ======================================== */

:root {
    /* ===== DAY THEME — Formal White & Blue ===== */
    --primary: #0d47a1;
    --primary-dark: #002171;
    --primary-light: #5472d3;
    --accent: #1565c0;
    --accent-2: #0d47a1;
    --bg: #ffffff;
    --bg-alt: #f5f8fc;
    --bg-section: #e8f0fe;
    --bg-card: #ffffff;
    --text: #1a1a2e;
    --text-muted: #5a6a7a;
    --border: #d0dce8;
    --white: #ffffff;
    --shadow: 0 4px 20px rgba(13, 71, 161, 0.08);
    --shadow-hover: 0 8px 30px rgba(13, 71, 161, 0.15);
    --radius: 12px;
    --radius-lg: 20px;
    --transition: all 0.3s ease;
    --header-bg: rgba(255, 255, 255, 0.92);
    --glow-soft: 0 0 0 rgba(0,0,0,0);
    --radar-ring: rgba(13, 71, 161, 0.35);
    --radar-glow: rgba(21, 101, 192, 0.35);
    --radar-dot: var(--primary);
    --radar-dot-glow: rgba(21, 101, 192, 0.55);
    --success: #1b8a5a;
    --danger: #c0392b;
    --footer-bg: #002171;
    --footer-text: rgba(255, 255, 255, 0.85);

    /* Globe / matrix panel (subtle, formal in day theme) */
    --globe-line: rgba(13, 71, 161, 0.08);
    --globe-core: rgba(21, 101, 192, 0.10);
    --globe-glow: rgba(21, 101, 192, 0.12);
    --matrix-a: 59, 130, 246;
    --matrix-b: 27, 138, 90;
    --matrix-opacity: 0.05;
    --matrix-bg-opacity: 0;

    /* HUD accents — corner brackets, scanline, beams (proportional per theme) */
    --hud-corner-opacity: 0.35;
    --hud-scanline-opacity: 0.06;
    --hud-beam-width: 1px;
    --hud-scan-opacity: 0;
    --panel-section-bg: transparent;
    --panel-radar-max: 340px;
    --panel-corner-len: clamp(12px, 2vw, 16px);
    --panel-corner-thick: 1.5px;
    --panel-corner-inset: 6px;
}

[data-theme="dark"] {
    /* ===== NIGHT THEME — Deep Blue-Black + Electric Cyan-Blue ===== */
    --primary: #3b82f6;
    --primary-dark: #1d4ed8;
    --primary-light: #7dd3fc;
    --accent: #22d3ee;
    --accent-2: #6366f1;
    --bg: #05070d;
    --bg-alt: #080b14;
    --bg-section: #0c111d;
    --bg-card: #0b101c;
    --text: #eaf1fb;
    --text-muted: #8b9bb4;
    --border: #1b2436;
    --white: #ffffff;
    --shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    --shadow-hover: 0 16px 50px rgba(59, 130, 246, 0.18);
    --header-bg: rgba(5, 7, 13, 0.85);
    --glow-soft: 0 0 24px rgba(59, 130, 246, 0.25);
    --radar-ring: rgba(125, 211, 252, 0.45);
    --radar-glow: rgba(59, 130, 246, 0.55);
    --radar-dot: #ff4d5e;
    --radar-dot-glow: rgba(255, 77, 94, 0.65);
    --success: #34d399;
    --danger: #f87171;
    --footer-bg: #03050a;
    --footer-text: rgba(234, 241, 251, 0.75);

    /* Globe / matrix panel — full neon-glass HUD treatment at night */
    --globe-line: rgba(125, 211, 252, 0.24);
    --globe-core: rgba(59, 130, 246, 0.32);
    --globe-glow: rgba(34, 211, 238, 0.5);
    --matrix-a: 34, 211, 238;
    --matrix-b: 59, 130, 246;
    --matrix-opacity: 0.72;
    --matrix-bg-opacity: 0.38;

    /* HUD accents — brighter, glowing at night (tuned to reference 3.jpg) */
    --hud-corner-opacity: 0.95;
    --hud-scanline-opacity: 0.08;
    --hud-beam-width: 2px;
    --hud-scan-opacity: 0.12;
    --panel-section-bg: #05070d;
    --panel-radar-max: 420px;
    --panel-corner-len: clamp(12px, 2.2vw, 20px);
    --panel-corner-thick: 2px;
    --panel-corner-inset: 7px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Force Vazirmatn everywhere — form controls & buttons don't inherit by
   default in most browsers, which is why some buttons looked font-less */
button,
input,
select,
textarea,
.btn,
.nav-cta,
.copy-chip,
.faq-question,
.theme-toggle {
    font-family: 'Vazirmatn', Tahoma, sans-serif;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

body {
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    background-color: var(--bg);
    color: var(--text);
    line-height: 1.7;
    direction: rtl;
    text-align: right;
    overflow-x: hidden;
    transition: background-color 0.45s ease, color 0.45s ease;
    position: relative;
}

/* Day theme — professional soft blueprint grid across the whole page
   (index + about share this stylesheet). Subtle, not noisy. */
html:not([data-theme="dark"]) body,
[data-theme="light"] body {
    background-color: #f5f8fc;
    background-image:
        linear-gradient(rgba(13, 71, 161, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13, 71, 161, 0.045) 1px, transparent 1px),
        linear-gradient(rgba(13, 71, 161, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13, 71, 161, 0.025) 1px, transparent 1px);
    background-size:
        80px 80px,
        80px 80px,
        16px 16px,
        16px 16px;
    background-position: center top;
    background-attachment: fixed;
}

[data-theme="dark"] body {
    background-color: var(--bg);
    background-image: none;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Firefly ambient canvas — dark mode only, built by js/theme.js */
#fireflyCanvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    display: none;
    mix-blend-mode: screen;
}

.header, .hero, .section, .footer {
    position: relative;
    z-index: 1;
}

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

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ========== HEADER ========== */
.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--header-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid var(--border);
    transition: background-color 0.45s ease, border-color 0.45s ease;
}

.header-top {
    background: var(--primary);
    color: var(--white);
    font-size: 0.85rem;
    padding: 6px 0;
}

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

.header-top a {
    color: var(--white);
    opacity: 0.9;
}

.header-top a:hover {
    opacity: 1;
}

.login-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.15);
    padding: 4px 14px;
    border-radius: 20px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.login-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.header-main {
    padding: 12px 0;
}

.header-main .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.logo-img-wrap {
    position: relative;
    width: clamp(40px, 6vw, 52px);
    height: clamp(40px, 6vw, 52px);
    flex-shrink: 0;
}

.logo-img-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Day / night logo swap — driven purely by [data-theme], set on <html>
   before first paint, so there's never a flash of the wrong logo.
   Light theme = logoday.png only. Dark theme = logonight.png only.
   (minilogo.png is used site-wide for favicon / apple-touch-icon / tile,
   see <head> in index.html and about.html — do not change there.) */
.logo-img-dark,
[data-theme="dark"] .logo-img-light {
    display: none;
}

[data-theme="dark"] .logo-img-dark {
    display: block;
}

.logo-text {
    font-size: clamp(1.15rem, 1vw + 0.95rem, 1.5rem);
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -0.5px;
    white-space: nowrap;
}

.logo-text span {
    color: var(--text);
}

.nav {
    display: flex;
    align-items: center;
    gap: clamp(2px, 0.4vw, 8px);
}

.nav-link {
    padding: 8px clamp(10px, 1vw, 16px);
    border-radius: 8px;
    font-weight: 500;
    font-size: clamp(0.85rem, 0.25vw + 0.8rem, 0.95rem);
    color: var(--text);
    white-space: nowrap;
    position: relative;
}

.nav-link:hover,
.nav-link.active {
    color: var(--primary);
    background: var(--bg-section);
}

.nav-cta {
    background: var(--primary);
    color: var(--white) !important;
    padding: 10px 22px;
    border-radius: 8px;
    font-weight: 500;
}

.nav-cta:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

/* ========== THEME TOGGLE ========== */
.theme-toggle-header {
    order: 2;
}

.theme-toggle {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-alt);
    color: var(--primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition);
}

.theme-toggle:hover {
    border-color: var(--primary);
    background: var(--bg-section);
    transform: translateY(-1px);
}

.theme-toggle svg {
    width: 20px;
    height: 20px;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.theme-toggle .icon-sun {
    position: absolute;
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.theme-toggle .icon-moon {
    position: absolute;
    opacity: 0;
    transform: scale(0.4) rotate(-90deg);
}

[data-theme="dark"] .theme-toggle .icon-sun {
    opacity: 0;
    transform: scale(0.4) rotate(90deg);
}

[data-theme="dark"] .theme-toggle .icon-moon {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* Mobile menu toggle */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-direction: column;
    gap: 5px;
}

.menu-toggle span {
    display: block;
    width: 24px;
    height: 2.5px;
    background: var(--primary);
    border-radius: 2px;
    transition: var(--transition);
}

/* ========== HERO ========== */
.hero {
    background: linear-gradient(135deg, var(--bg-section) 0%, var(--bg) 60%);
    padding: 80px 0 100px;
    position: relative;
    overflow: hidden;
    transition: background-color 0.45s ease;
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--radar-glow) 0%, transparent 70%);
    opacity: 0.35;
    pointer-events: none;
}

.hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.hero-content h1 {
    font-size: clamp(1.8rem, 1.1rem + 2.8vw, 2.8rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--primary-dark);
    margin-bottom: 20px;
}

.hero-content h1 span {
    color: var(--primary);
}

.hero-content p {
    font-size: 1.15rem;
    color: var(--text-muted);
    margin-bottom: 32px;
    max-width: 480px;
}

.hero-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 10px;
    font-weight: 500;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.btn-primary {
    background: var(--primary);
    color: var(--white);
}

.btn-primary:hover {
    background: var(--primary-dark);
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
}

.btn-outline:hover {
    background: var(--primary);
    color: var(--white);
}

.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-logo-box {
    background: var(--bg-card);
    border-radius: 24px;
    padding: 40px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    transition: background-color 0.45s ease, border-color 0.45s ease;
}

.hero-logo-box img {
    width: 220px;
    height: 220px;
    object-fit: contain;
}

/* ========== SECTIONS ========== */
.section {
    padding: 80px 0;
}

.section-alt {
    background: var(--bg-alt);
}

.section-title {
    text-align: center;
    margin-bottom: 50px;
}

.section-title h2 {
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 12px;
}

.section-title p {
    color: var(--text-muted);
    font-size: 1.05rem;
    max-width: 560px;
    margin: 0 auto;
}

/* Features */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 28px;
    text-align: center;
    transition: var(--transition), background-color 0.45s ease, border-color 0.45s ease;
    box-shadow: var(--shadow);
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
    border-color: var(--primary-light);
}

.feature-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    background: var(--bg-section);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--primary);
}

.feature-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--primary-dark);
}

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

/* About */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.about-content h2 {
    font-size: 1.9rem;
    color: var(--primary-dark);
    margin-bottom: 18px;
}

.about-content p {
    color: var(--text-muted);
    margin-bottom: 16px;
}

.about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 28px;
}

.stat-box {
    background: var(--bg-section);
    border-radius: 10px;
    padding: 18px 12px;
    text-align: center;
}

.stat-box .num {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary);
}

.stat-box .label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.about-visual {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 30px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    text-align: center;
    transition: background-color 0.45s ease, border-color 0.45s ease;
}

.about-visual img {
    width: 180px;
    margin: 0 auto 16px;
}

/* Services / Pricing-like */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.service-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 36px 28px;
    text-align: center;
    transition: var(--transition), background-color 0.45s ease, border-color 0.45s ease;
    position: relative;
    overflow: hidden;
}

.service-card.popular {
    border-color: var(--primary);
    box-shadow: var(--shadow-hover);
}

.service-card.popular::before {
    content: 'پیشنهادی';
    position: absolute;
    top: 16px;
    left: -30px;
    background: var(--primary);
    color: white;
    font-size: 0.75rem;
    padding: 4px 40px;
    transform: rotate(-45deg);
}

.service-card h3 {
    font-size: 1.3rem;
    color: var(--primary-dark);
    margin-bottom: 8px;
}

.service-card .price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    margin: 16px 0;
}

.service-card .price span {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-muted);
}

.service-card ul {
    text-align: right;
    margin: 20px 0 28px;
}

.service-card li {
    padding: 8px 0;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    font-size: 0.95rem;
}

.service-card li:last-child {
    border-bottom: none;
}

/* Contact */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.contact-info h3 {
    font-size: 1.3rem;
    color: var(--primary-dark);
    margin-bottom: 16px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}

.contact-item .icon {
    width: 44px;
    height: 44px;
    background: var(--bg-section);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    flex-shrink: 0;
}

.contact-item strong {
    display: block;
    margin-bottom: 2px;
}

.contact-item span {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.contact-form {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
    box-shadow: var(--shadow);
    transition: background-color 0.45s ease, border-color 0.45s ease;
}

.contact-form-locked {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 280px;
}

.contact-lock-icon {
    font-size: 2.4rem;
    margin-bottom: 12px;
    line-height: 1;
}

.contact-form-title {
    font-size: 1.25rem;
    color: var(--primary-dark);
    margin: 0 0 12px;
    font-weight: 600;
}

.contact-form-desc {
    color: var(--text);
    font-size: 0.98rem;
    line-height: 1.7;
    margin: 0 0 12px;
    max-width: 360px;
}

.contact-form-note {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.6;
    margin: 0 0 20px;
    max-width: 360px;
}

.contact-panel-btn {
    width: 100%;
    max-width: 320px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.contact-form-hint {
    margin: 16px 0 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.contact-form-hint a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.contact-form-hint a:hover {
    text-decoration: underline;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 0.95rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--text);
    transition: var(--transition);
    background: var(--bg-alt);
}

.form-group input:focus-visible,
.form-group textarea:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--primary);
    background: var(--bg-card);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* ========== FOOTER ========== */
.footer {
    background: var(--footer-bg, var(--primary-dark));
    color: var(--footer-text, rgba(255, 255, 255, 0.85));
    padding: 60px 0 0;
    transition: background-color 0.45s ease;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand .logo-text {
    color: var(--white);
    margin-bottom: 14px;
    display: block;
}

.footer-brand p {
    font-size: 0.95rem;
    line-height: 1.7;
    opacity: 0.8;
}

.footer h4 {
    color: var(--white);
    font-size: 1.1rem;
    margin-bottom: 18px;
    font-weight: 600;
}

.footer-links a {
    display: block;
    padding: 6px 0;
    opacity: 0.8;
    font-size: 0.95rem;
}

.footer-links a:hover {
    opacity: 1;
    color: var(--primary-light);
}

.trust-symbols {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

.trust-symbols a {
    display: block;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    border: 1px dashed rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    text-align: center;
    padding: 8px;
    opacity: 0.7;
}

.trust-symbols a:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.15);
}

.footer-bottom {
    padding: 20px 0;
    text-align: center;
    font-size: 0.9rem;
    opacity: 0.7;
}

/* ========== RESPONSIVE ========== */
/* Medium desktop: keep 3 columns but allow radar to shrink */
@media (max-width: 1200px) and (min-width: 1101px) {
    .panel-grid {
        grid-template-columns: minmax(0, 1fr) minmax(220px, 320px) minmax(0, 1fr);
        gap: 14px;
    }
    .panel-radar {
        max-width: 300px;
    }
    .panel-card {
        padding: 16px 18px;
    }
}

/* Tablet & mobile: ONE column — radar on top, cards stacked below.
   Breakpoint raised to 1100px so narrow desktop windows never squeeze
   the 3-col grid into unreadable vertical text. */
@media (max-width: 1100px) {
    .hero .container,
    .about-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .hero-visual {
        order: -1;
    }

    .features-grid,
    .services-grid {
        grid-template-columns: 1fr 1fr;
    }

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

    .panel-grid {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        grid-template-columns: none !important;
        max-width: 480px;
        width: 100%;
        margin: 0 auto;
        gap: 16px;
    }

    /* Radar always first, full width of the column, never collapsed */
    .panel-radar-wrap {
        order: -1 !important;
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 8px !important;
        flex: 0 0 auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        overflow: visible !important;
        writing-mode: horizontal-tb !important;
    }

    .panel-radar {
        display: flex !important;
        visibility: visible !important;
        position: relative !important;
        max-width: min(320px, 85vw) !important;
        width: 100% !important;
        min-width: 200px !important;
        min-height: 200px !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        margin: 0 auto 8px !important;
        flex: 0 0 auto !important;
        overflow: hidden !important;
    }

    /* Side stacks become normal vertical blocks under the radar */
    .panel-stack {
        order: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        gap: 14px;
        writing-mode: horizontal-tb !important;
    }

    .panel-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        writing-mode: horizontal-tb !important;
        overflow: visible !important;
    }

    .panel-mini-row,
    .panel-card-head,
    .panel-location-list li,
    .panel-log li,
    .panel-bar-row {
        writing-mode: horizontal-tb !important;
        white-space: normal !important;
    }
}

@media (max-width: 768px) {
    .menu-toggle {
        display: flex;
    }

    .nav {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        background: var(--header-bg);
        backdrop-filter: blur(14px);
        flex-direction: column;
        padding: 16px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        border-top: 1px solid var(--border);
    }

    .nav.open {
        display: flex;
    }

    .nav-link {
        width: 100%;
        text-align: center;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .features-grid,
    .services-grid,
    .about-stats {
        grid-template-columns: 1fr;
    }

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

    .header-top .container {
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 50px 0 60px;
    }

    .section {
        padding: 50px 0;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .btn {
        width: 100%;
    }

    .panel-card {
        padding: 16px 18px;
    }

    .panel-stack {
        gap: 16px;
    }

    /* Keep HUD corners inside small cards on phones */
    :root,
    [data-theme="dark"] {
        --panel-corner-len: 12px;
        --panel-corner-inset: 5px;
        --panel-corner-thick: 1.5px;
    }
}

/* Utility */
.text-center {
    text-align: center;
}

.mt-20 {
    margin-top: 20px;
}

/* ========================================
   LIVE STATUS RADAR — signature component
   ======================================== */

.radar-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
    box-shadow: var(--shadow);
    max-width: 400px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    transition: background-color 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease;
}

[data-theme="dark"] .radar-card {
    box-shadow: var(--shadow), 0 0 0 1px rgba(59, 130, 246, 0.08) inset;
}

.radar-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary-light), transparent);
    opacity: 0;
    transition: opacity 0.45s ease;
}

[data-theme="dark"] .radar-card::before {
    opacity: 0.6;
}

.radar-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.radar-card-title {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
}

.radar-card-title svg {
    width: 15px;
    height: 15px;
    color: var(--primary);
}

/* Status pill */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(27, 138, 90, 0.1);
    color: var(--success);
    border: 1px solid rgba(27, 138, 90, 0.25);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 600;
}

.status-pill .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.status-pill.is-online .dot {
    animation: pulse-dot 1.8s ease-in-out infinite;
}

.status-pill.is-offline {
    color: var(--danger);
    background: rgba(192, 57, 43, 0.1);
    border-color: rgba(192, 57, 43, 0.25);
}

.status-pill.is-loading {
    color: var(--text-muted);
    background: var(--bg-alt);
    border-color: var(--border);
}

@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
    50% { box-shadow: 0 0 0 5px transparent; opacity: 0.6; }
}

/* Radar rings */
.radar-scope {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Radar rings (shared hero + panel) ---- */
.radar-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--radar-ring);
    pointer-events: none;
}

.radar-ring.r1 { inset: 0; }
.radar-ring.r2 { inset: 18%; }
.radar-ring.r3 { inset: 34%; }
.radar-ring.r4 { inset: 50%; }
.radar-ring.r5 { inset: 66%; }

/* Soft trail cone — sits BEHIND the laser (lower z-index).
   Trail fades toward 0deg; leading edge is at higher degrees so
   when spinning clockwise the laser leads and the halo follows. */
.radar-sweep {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 8deg,
        var(--radar-glow) 28deg,
        transparent 52deg
    );
    animation: radar-spin 5.5s linear infinite;
    opacity: 0.8;
    pointer-events: none;
    will-change: transform;
    z-index: 1;
}

/* Sharp laser LEADING edge — in front of the trail halo */
.radar-sweep-beam {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 48deg,
        rgba(180, 255, 220, 0.95) 50.5deg,
        rgba(52, 211, 153, 0.7) 52deg,
        transparent 54deg
    );
    animation: radar-spin 5.5s linear infinite;
    opacity: 0;
    pointer-events: none;
    will-change: transform;
    z-index: 2;
}

@keyframes radar-spin {
    to { transform: rotate(360deg); }
}

.radar-center {
    position: relative;
    z-index: 3;
    text-align: center;
}

.radar-online-number {
    font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.4rem);
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    transition: text-shadow 0.45s ease, color 0.45s ease;
}

[data-theme="dark"] .radar-online-number {
    color: #eafcff;
    text-shadow: 0 0 12px rgba(34, 211, 238, 0.75), 0 0 32px rgba(59, 130, 246, 0.45);
}

.panel-radar .radar-online-number {
    font-size: clamp(2.5rem, 1.7rem + 3.2vw, 3.6rem);
    letter-spacing: -0.02em;
}

[data-theme="dark"] .panel-radar .radar-online-number {
    color: #f0fff8;
    text-shadow:
        0 0 16px rgba(52, 211, 153, 0.95),
        0 0 36px rgba(34, 211, 238, 0.65),
        0 0 60px rgba(16, 185, 129, 0.35);
}

[data-theme="dark"] .panel-radar .radar-online-label {
    color: rgba(167, 243, 208, 0.9);
    letter-spacing: 0.5px;
    text-shadow: 0 0 12px rgba(34, 211, 238, 0.4);
}

/* Dark panel radar — trail BEHIND laser (halo follows the blade) */
[data-theme="dark"] .panel-radar .radar-sweep {
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(34, 211, 238, 0.04) 10deg,
        rgba(34, 211, 238, 0.12) 22deg,
        rgba(52, 211, 153, 0.35) 38deg,
        rgba(52, 211, 153, 0.55) 48deg,
        transparent 53deg
    );
    opacity: 1;
    filter: drop-shadow(0 0 12px rgba(52, 211, 153, 0.4));
    animation-duration: 5.5s;
    animation-timing-function: linear;
    z-index: 1;
}

/* Sharp laser LEADING edge — in front of trail, same spin direction */
[data-theme="dark"] .panel-radar .radar-sweep-beam {
    opacity: 1;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 49deg,
        rgba(240, 255, 250, 1) 50.8deg,
        rgba(110, 231, 183, 0.95) 51.8deg,
        rgba(52, 211, 153, 0.55) 53deg,
        transparent 54.5deg
    );
    animation-duration: 5.5s;
    animation-timing-function: linear;
    filter: drop-shadow(0 0 4px rgba(240, 255, 250, 1)) drop-shadow(0 0 12px rgba(52, 211, 153, 0.9));
    z-index: 2;
}

[data-theme="dark"] .panel-radar .radar-ring {
    border-color: rgba(52, 211, 153, 0.4);
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.18);
}

[data-theme="dark"] .panel-radar .radar-ring.r1 {
    border-color: rgba(110, 231, 183, 0.55);
    box-shadow: 0 0 18px rgba(52, 211, 153, 0.3), inset 0 0 24px rgba(34, 211, 238, 0.08);
}

[data-theme="dark"] .panel-radar .radar-ring.r2 {
    border-color: rgba(52, 211, 153, 0.35);
}

[data-theme="dark"] .panel-radar .radar-ring.r3 {
    border-color: rgba(34, 211, 238, 0.3);
}

[data-theme="dark"] .panel-radar .radar-ring.r4 {
    border-color: rgba(52, 211, 153, 0.25);
}

[data-theme="dark"] .panel-radar .radar-ring.r5 {
    border-color: rgba(34, 211, 238, 0.2);
}

/* Degree scale labels (Latin numbers only) */
.radar-scale {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    font-family: "Courier New", Courier, monospace;
    font-size: clamp(0.55rem, 1.4vw, 0.68rem);
    font-weight: 600;
    color: rgba(125, 211, 252, 0.55);
    letter-spacing: 0.02em;
}

.radar-scale .rs {
    position: absolute;
    transform: translate(-50%, -50%);
    text-shadow: 0 0 6px rgba(34, 211, 238, 0.35);
}

.radar-scale .rs-n  { top: 4%;  left: 50%; }
.radar-scale .rs-ne { top: 16%; left: 82%; }
.radar-scale .rs-e  { top: 50%; left: 96%; }
.radar-scale .rs-se { top: 84%; left: 82%; }
.radar-scale .rs-s  { top: 96%; left: 50%; }
.radar-scale .rs-sw { top: 84%; left: 18%; }
.radar-scale .rs-w  { top: 50%; left: 4%;  }
.radar-scale .rs-nw { top: 16%; left: 18%; }

[data-theme="dark"] .radar-scale {
    color: rgba(110, 231, 183, 0.55);
}

/* Radial tick marks via repeating conic gradient */
.radar-ticks {
    position: absolute;
    inset: 2%;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    background: repeating-conic-gradient(
        from 0deg,
        rgba(125, 211, 252, 0.22) 0deg 0.4deg,
        transparent 0.4deg 15deg
    );
    -webkit-mask-image: radial-gradient(circle, transparent 62%, #000 64%, #000 98%, transparent 100%);
            mask-image: radial-gradient(circle, transparent 62%, #000 64%, #000 98%, transparent 100%);
    opacity: 0.55;
}

[data-theme="dark"] .radar-ticks {
    background: repeating-conic-gradient(
        from 0deg,
        rgba(52, 211, 153, 0.35) 0deg 0.35deg,
        transparent 0.35deg 15deg
    );
    opacity: 0.7;
}

/* Crosshair axes */
.radar-cross {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    background:
        linear-gradient(90deg, transparent 49.5%, rgba(125, 211, 252, 0.18) 49.5%, rgba(125, 211, 252, 0.18) 50.5%, transparent 50.5%),
        linear-gradient(0deg,  transparent 49.5%, rgba(125, 211, 252, 0.18) 49.5%, rgba(125, 211, 252, 0.18) 50.5%, transparent 50.5%);
    opacity: 0.7;
}

[data-theme="dark"] .radar-cross {
    background:
        linear-gradient(90deg, transparent 49.6%, rgba(52, 211, 153, 0.22) 49.6%, rgba(52, 211, 153, 0.22) 50.4%, transparent 50.4%),
        linear-gradient(0deg,  transparent 49.6%, rgba(52, 211, 153, 0.22) 49.6%, rgba(52, 211, 153, 0.22) 50.4%, transparent 50.4%);
}

.radar-online-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.radar-bot-note {
    text-align: center;
    font-size: 0.76rem;
    color: var(--text-muted);
    margin: -8px 0 16px;
    opacity: 0.85;
}

.radar-bot-note span {
    color: var(--radar-dot);
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    .radar-sweep,
    .radar-sweep-beam {
        animation: none !important;
    }
}

.radar-cluster {
    position: absolute;
    inset: 0;
}

.radar-dot {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--radar-dot);
    box-shadow: 0 0 6px var(--radar-dot-glow);
    transform: translate(-50%, -50%);
    animation: radar-blip 2.4s ease-in-out infinite;
    transition: background-color 0.45s ease;
}

.radar-dot:nth-child(3n) {
    width: 4px;
    height: 4px;
}

.radar-dot:nth-child(5n) {
    width: 6px;
    height: 6px;
}

@keyframes radar-blip {
    0%, 100% { opacity: 0.35; transform: translate(-50%, -50%) scale(0.8); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}

/* Address row */
.radar-address-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
    gap: 12px;
    transition: background-color 0.45s ease, border-color 0.45s ease;
}

.radar-address-row .info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.radar-address-row .info .label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.radar-address-row .info .value {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--primary);
    direction: ltr;
    text-align: right;
    letter-spacing: 0.3px;
}

.copy-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-section);
    color: var(--primary);
    border: 1px solid var(--border);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
}

.copy-chip:hover {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

.copy-chip.copied {
    background: var(--success);
    color: var(--white);
    border-color: var(--success);
}

.copy-chip svg {
    width: 14px;
    height: 14px;
}

/* Capacity bar */
.radar-capacity {
    margin-top: 4px;
}

.radar-capacity-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.radar-capacity-track {
    width: 100%;
    height: 6px;
    background: var(--bg-section);
    border-radius: 50px;
    overflow: hidden;
}

.radar-capacity-fill {
    height: 100%;
    width: 8%;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border-radius: 50px;
    transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Compact status card (used on TeamSpeak page) */
.status-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    max-width: 340px;
    box-shadow: var(--shadow);
    transition: background-color 0.45s ease, border-color 0.45s ease;
}

.status-card-title {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 16px;
}

.status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.status-row:last-of-type {
    border-bottom: none;
}

.status-row .k {
    color: var(--text-muted);
    font-size: 0.92rem;
}

.status-row .v {
    font-weight: 700;
    font-size: 1.02rem;
}

.status-row .v.success {
    color: var(--success);
}

/* ========================================
   TEAMSPEAK PAGE — connect steps, quick connect
   ======================================== */

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 14px;
}

.eyebrow::before {
    content: '';
    width: 26px;
    height: 1px;
    background: var(--primary);
}

.history-title::before {
    display: none !important;
}

.steps-list {
    max-width: 820px;
    margin: 0 auto;
}

.step-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 20px;
    padding: 28px 0;
    border-bottom: 1px solid var(--border);
}

.step-item:last-child {
    border-bottom: none;
}

.step-item-content h3 {
    font-size: 1.15rem;
    margin-bottom: 8px;
    color: var(--text);
}

.step-item-content p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 14px;
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-section);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.step-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.step-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    font-size: 0.88rem;
    transition: var(--transition);
}

.step-chip:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.code-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    font-family: 'Courier New', monospace;
    font-size: 0.92rem;
    direction: ltr;
}

/* Quick connect box */
.connect-box {
    background: linear-gradient(135deg, var(--bg-section) 0%, var(--bg-card) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 50px 30px;
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    box-shadow: var(--shadow);
    transition: background-color 0.45s ease, border-color 0.45s ease;
}

.connect-box h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: var(--primary-dark);
}

.connect-box p {
    color: var(--text-muted);
    margin-bottom: 24px;
}

.big-address {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: 1px;
    margin-bottom: 22px;
    direction: ltr;
    display: inline-block;
}

/* Timeline (history) */
.timeline {
    position: relative;
    max-width: 780px;
    margin: 0 auto;
}

.timeline::before {
    content: '';
    position: absolute;
    right: 19px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: var(--border);
}

.timeline-item {
    position: relative;
    padding-right: 56px;
    margin-bottom: 32px;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-item::before {
    content: '';
    position: absolute;
    right: 12px;
    top: 4px;
    width: 16px;
    height: 16px;
    background: var(--primary);
    border-radius: 50%;
    border: 3px solid var(--bg);
    box-shadow: 0 0 0 3px var(--radar-glow);
}

.timeline-year {
    font-weight: 700;
    color: var(--primary);
    font-size: 1rem;
    margin-bottom: 4px;
}

.timeline-item h4 {
    margin-bottom: 6px;
    color: var(--text);
}

.timeline-item p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* Testimonials */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.testimonial-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    transition: background-color 0.45s ease, border-color 0.45s ease;
}

.testimonial-card .quote {
    color: var(--text-muted);
    font-size: 0.96rem;
    margin-bottom: 20px;
}

.testimonial-card .author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.author-avatar {
    width: 42px;
    height: 42px;
    background: var(--bg-section);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--primary);
    flex-shrink: 0;
}

.author-info strong {
    display: block;
    font-size: 0.94rem;
}

.author-info span {
    color: var(--text-muted);
    font-size: 0.84rem;
}

/* FAQ accordion */
.faq-list {
    max-width: 780px;
    margin: 0 auto;
}

.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: background-color 0.45s ease, border-color 0.45s ease;
}

.faq-question {
    width: 100%;
    background: none;
    border: none;
    color: var(--text);
    padding: 18px 22px;
    text-align: right;
    font-size: 1.02rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.faq-question .icon {
    font-size: 1.2rem;
    color: var(--primary);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.faq-item.active .faq-question .icon {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.faq-item.active .faq-answer {
    max-height: 240px;
}

.faq-answer-inner {
    padding: 0 22px 20px;
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* ========================================
   LIVE CONTROL PANEL — radar dashboard section
   (inspired by HUD-style monitoring dashboards)
   ======================================== */

.panel-section {
    position: relative;
    overflow-x: hidden;
    overflow-y: visible;
    isolation: isolate;
    background: var(--panel-section-bg);
    padding-top: 100px;
    padding-bottom: 110px;
    transition: background 0.6s ease, background-image 0.6s ease;
}

/* Dark theme: full-bleed radar2.png Earth backdrop (reference 3.jpg).
   Flat linear wash only — NO radial/oval halo behind title or cards. */
[data-theme="dark"] .panel-section {
    background-color: #03050a;
    background-image:
        linear-gradient(
            180deg,
            rgba(3, 5, 10, 0.55) 0%,
            rgba(3, 5, 10, 0.22) 18%,
            rgba(3, 5, 10, 0.08) 42%,
            rgba(3, 5, 10, 0.18) 70%,
            rgba(3, 5, 10, 0.7) 100%
        ),
        url("../images/radar2.png");
    background-size: cover, cover;
    background-position: center center, center 55%;
    background-repeat: no-repeat, no-repeat;
    background-attachment: scroll, scroll;
}

/* Full-bleed matrix-rain backdrop — ambient depth layer only.
   Softened so it never fights the Earth image or card readability. */
.panel-bg-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    opacity: var(--matrix-bg-opacity, 0);
    mix-blend-mode: screen;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 78%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 78%, transparent 100%);
    pointer-events: none;
    transition: opacity 0.6s ease;
}

/* Slow vertical "scanner" beam sweeping down the whole panel — a single
   orchestrated motion (per the HUD reference) rather than scattered
   effects. Invisible by day via --hud-scan-opacity: 0. */
.panel-scan {
    position: absolute;
    inset: -5% 0 auto 0;
    z-index: 0;
    height: 46%;
    pointer-events: none;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(34, 211, 238, 0.05) 35%,
        rgba(34, 211, 238, 0.16) 50%,
        rgba(34, 211, 238, 0.05) 65%,
        transparent 100%);
    opacity: var(--hud-scan-opacity, 0);
    animation: panel-scan-sweep 9s ease-in-out infinite;
}

@keyframes panel-scan-sweep {
    0%   { transform: translateY(-10%); }
    50%  { transform: translateY(135%); }
    100% { transform: translateY(-10%); }
}

@media (prefers-reduced-motion: reduce) {
    .panel-scan { animation: none; opacity: 0; }
}

@media (max-width: 768px) {
    .panel-section {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .radar-scale {
        font-size: 0.5rem;
        opacity: 0.7;
    }
}

@media (max-width: 480px) {
    .radar-scale {
        display: none;
    }
}

/* ---- Hemisphere / globe backdrop ----
   Day theme: synthetic grid hemisphere for formal depth.
   Dark theme: the real Earth comes from radar2.png background-image;
   this element is toned down to a soft neon limb + light accents only
   so it never fights the photo. */
.panel-globe {
    position: absolute;
    z-index: 0;
    left: 50%;
    bottom: -78%;
    width: min(1500px, 175vw);
    aspect-ratio: 1 / 1;
    transform: translateX(-50%);
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 18%, var(--globe-core), transparent 55%),
        repeating-linear-gradient(0deg, var(--globe-line) 0 1px, transparent 1px 46px),
        repeating-linear-gradient(90deg, var(--globe-line) 0 1px, transparent 1px 46px);
    -webkit-mask-image: radial-gradient(circle at 50% 18%, #000 0%, #000 46%, transparent 72%);
            mask-image: radial-gradient(circle at 50% 18%, #000 0%, #000 46%, transparent 72%);
    animation: globe-drift 46s linear infinite;
    transition: opacity 0.45s ease, filter 0.45s ease;
}

.panel-globe::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-radial-gradient(circle at 50% 18%,
        transparent 0, transparent 42px,
        var(--globe-line) 43px, transparent 44px);
    opacity: 0.7;
    mix-blend-mode: screen;
    animation: globe-pulse 7s ease-in-out infinite;
}

.panel-globe::after {
    content: '';
    position: absolute;
    inset: -2%;
    border-radius: 50%;
    background: conic-gradient(from 0deg at 50% 18%,
        transparent 0deg,
        var(--globe-glow) 40deg,
        transparent 100deg,
        transparent 260deg,
        var(--globe-glow) 320deg,
        transparent 360deg);
    opacity: 0.55;
    filter: blur(2px);
    animation: globe-drift 22s linear infinite reverse;
}

/* Hide synthetic rotating globe in BOTH themes — day had a spinning
   grid circle behind the live panel; dark uses radar2.png instead. */
.panel-globe,
.panel-globe::before,
.panel-globe::after,
.panel-globe-lights {
    display: none !important;
    opacity: 0 !important;
    animation: none !important;
    pointer-events: none !important;
}

.panel-section > .container {
    position: relative;
    z-index: 1;
}

/* Title block over the Earth backdrop — soft neon in dark mode */
[data-theme="dark"] .panel-section .section-title h2 {
    color: #e8fff6;
    text-shadow:
        0 0 18px rgba(52, 211, 153, 0.55),
        0 0 40px rgba(34, 211, 238, 0.3);
}

[data-theme="dark"] .panel-section .section-title p {
    color: rgba(186, 230, 220, 0.78);
}

[data-theme="dark"] .panel-section .eyebrow {
    color: rgba(52, 211, 153, 0.9);
}

/* Fine HUD scanline texture over the whole panel — barely-there paper
   grain by day, a proper glass-screen scanline at night. Proportional
   to theme via --hud-scanline-opacity. */
.panel-section::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(180deg,
        rgba(255, 255, 255, 0.06) 0 1px,
        transparent 1px 3px);
    mix-blend-mode: overlay;
    opacity: var(--hud-scanline-opacity);
}

.panel-globe-lights {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.panel-globe-lights span {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px 2px var(--globe-glow);
    opacity: 0;
    animation: city-light 5.5s ease-in-out infinite;
}

.panel-globe-lights span:nth-child(1)  { top: 62%; left: 18%; animation-delay: 0s; }
.panel-globe-lights span:nth-child(2)  { top: 74%; left: 32%; animation-delay: 0.9s; }
.panel-globe-lights span:nth-child(3)  { top: 80%; left: 50%; animation-delay: 1.8s; }
.panel-globe-lights span:nth-child(4)  { top: 73%; left: 67%; animation-delay: 2.6s; }
.panel-globe-lights span:nth-child(5)  { top: 61%; left: 81%; animation-delay: 3.4s; }
.panel-globe-lights span:nth-child(6)  { top: 68%; left: 42%; animation-delay: 1.3s; }
.panel-globe-lights span:nth-child(7)  { top: 70%; left: 58%; animation-delay: 4.1s; }
.panel-globe-lights span:nth-child(8)  { top: 58%; left: 27%; animation-delay: 2.2s; }
.panel-globe-lights span:nth-child(9)  { top: 65%; left: 73%; animation-delay: 0.5s; }
.panel-globe-lights span:nth-child(10) { top: 84%; left: 40%; animation-delay: 3.9s; }

/* Vertical "data beam" rising from each city light, like light columns
   shooting up off the globe. Uses the theme's own glow color, so it's
   naturally subtle by day and vivid neon by night. */
.panel-globe-lights span::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
    width: var(--hud-beam-width);
    height: 20px;
    background: linear-gradient(to top, var(--globe-glow), transparent 90%);
    opacity: 0;
    animation-name: beam-rise;
    animation-duration: 5.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: inherit;
}

@keyframes beam-rise {
    0%, 100% { opacity: 0; height: 16px; }
    45% { opacity: 0.9; height: 64px; }
    60% { opacity: 0.4; height: 74px; }
}

@keyframes city-light {
    0%, 100% { opacity: 0; transform: scale(0.8); }
    50% { opacity: 0.9; transform: scale(1.3); }
}

@keyframes globe-drift {
    to { transform: translateX(-50%) rotate(360deg); }
}

@keyframes globe-pulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
    .panel-globe,
    .panel-globe::before,
    .panel-globe::after,
    .panel-globe-lights span,
    .panel-globe-lights span::after,
    .panel-radar::after {
        animation: none !important;
    }
}

.panel-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 400px) minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
    width: 100%;
}

/* Radar is always the visual priority — never collapse */
.panel-radar-wrap {
    min-width: 0;
    width: 100%;
    justify-self: center;
}

.panel-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
}

.panel-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 22px;
    box-shadow: var(--shadow);
    transition: background-color 0.45s ease, border-color 0.45s ease;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.panel-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 16px;
    letter-spacing: 0.2px;
}

.panel-mini-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 0.92rem;
}

.panel-mini-row:last-child {
    border-bottom: none;
}

.panel-mini-row b {
    color: var(--primary);
    font-size: 1rem;
}

.panel-location-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.loc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 6px var(--radar-dot-glow);
    flex-shrink: 0;
}

.panel-radar-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 2vw, 22px);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
    border: 1px solid transparent;
    transition: border-color 0.45s ease, box-shadow 0.45s ease, background-color 0.45s ease;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

[data-theme="dark"] .panel-radar-wrap {
    border-color: rgba(34, 211, 238, 0.32);
    background: linear-gradient(180deg, rgba(6, 14, 28, 0.28), rgba(5, 7, 13, 0.1));
    backdrop-filter: blur(2px) saturate(3.15);
    -webkit-backdrop-filter: blur(2px) saturate(3.15);
    box-shadow:
        0 0 0 1px rgba(34, 211, 238, 0.12) inset,
        0 0 90px -10px rgba(34, 211, 238, 0.45),
        0 0 40px -8px rgba(16, 185, 129, 0.15);
    overflow: visible;
}

/* HUD corner brackets around the radar — same L-grammar as panel cards.
   Shared vars keep size/thickness/inset identical across the dashboard. */
.panel-radar-wrap::before {
    content: '';
    position: absolute;
    inset: var(--panel-corner-inset, 7px);
    pointer-events: none;
    z-index: 2;
    background-repeat: no-repeat;
    background-image:
        linear-gradient(var(--accent), var(--accent)),
        linear-gradient(var(--accent), var(--accent)),
        linear-gradient(var(--accent), var(--accent)),
        linear-gradient(var(--accent), var(--accent)),
        linear-gradient(var(--accent), var(--accent)),
        linear-gradient(var(--accent), var(--accent)),
        linear-gradient(var(--accent), var(--accent)),
        linear-gradient(var(--accent), var(--accent));
    background-size:
        var(--panel-corner-thick) var(--panel-corner-len),
        var(--panel-corner-len) var(--panel-corner-thick),
        var(--panel-corner-thick) var(--panel-corner-len),
        var(--panel-corner-len) var(--panel-corner-thick),
        var(--panel-corner-thick) var(--panel-corner-len),
        var(--panel-corner-len) var(--panel-corner-thick),
        var(--panel-corner-thick) var(--panel-corner-len),
        var(--panel-corner-len) var(--panel-corner-thick);
    background-position:
        0 0,
        0 0,
        100% 0,
        100% 0,
        0 100%,
        0 100%,
        100% 100%,
        100% 100%;
    opacity: var(--hud-corner-opacity);
    transition: opacity 0.5s ease, filter 0.5s ease;
}

[data-theme="dark"] .panel-radar-wrap::before {
    background-image:
        linear-gradient(#22d3ee, #22d3ee),
        linear-gradient(#22d3ee, #22d3ee),
        linear-gradient(#22d3ee, #22d3ee),
        linear-gradient(#22d3ee, #22d3ee),
        linear-gradient(#22d3ee, #22d3ee),
        linear-gradient(#22d3ee, #22d3ee),
        linear-gradient(#22d3ee, #22d3ee),
        linear-gradient(#22d3ee, #22d3ee);
    filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.8));
}

.panel-radar {
    position: relative;
    width: 100%;
    max-width: var(--panel-radar-max, 340px);
    min-width: 180px;
    min-height: 180px;
    aspect-ratio: 1 / 1;
    margin: 0 auto 12px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, var(--bg-section) 0%, transparent 72%);
    transition: box-shadow 0.5s ease, background-color 0.45s ease;
    flex-shrink: 0;
}

/* HD crystal-glass radar — more transparent, same blur/saturate ratio as cards */
[data-theme="dark"] .panel-radar {
    background:
        radial-gradient(circle at 50% 40%,
            rgba(10, 50, 44, 0.28) 0%,
            rgba(5, 22, 32, 0.4) 35%,
            rgba(2, 12, 20, 0.55) 68%,
            rgba(1, 6, 12, 0.65) 100%);
    box-shadow:
        0 0 0 1.5px rgba(110, 231, 183, 0.55),
        0 0 0 5px rgba(34, 211, 238, 0.1),
        0 0 40px 2px rgba(52, 211, 153, 0.35),
        0 0 90px 12px rgba(34, 211, 238, 0.2),
        0 0 140px 24px rgba(16, 185, 129, 0.1),
        inset 0 0 50px rgba(52, 211, 153, 0.12),
        inset 0 0 100px rgba(0, 0, 0, 0.25);
    animation: panel-radar-breathe 7s ease-in-out infinite;
    backdrop-filter: blur(2px) saturate(3.15);
    -webkit-backdrop-filter: blur(2px) saturate(3.15);
}

@keyframes panel-radar-breathe {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(52, 211, 153, 0.42),
            0 0 0 4px rgba(34, 211, 238, 0.06),
            0 0 45px 3px rgba(34, 211, 238, 0.24),
            0 0 90px 10px rgba(16, 185, 129, 0.1),
            inset 0 0 36px rgba(52, 211, 153, 0.08),
            inset 0 0 70px rgba(0, 0, 0, 0.32);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(110, 231, 183, 0.55),
            0 0 0 4px rgba(34, 211, 238, 0.12),
            0 0 65px 8px rgba(34, 211, 238, 0.34),
            0 0 120px 18px rgba(16, 185, 129, 0.16),
            inset 0 0 48px rgba(52, 211, 153, 0.14),
            inset 0 0 80px rgba(0, 0, 0, 0.28);
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-theme="dark"] .panel-radar { animation: none; }
}

/* Counter-rotating rim — DISABLED (was spinning opposite the laser) */
.panel-radar::after {
    content: none !important;
    display: none !important;
    animation: none !important;
    opacity: 0 !important;
}

/* Matrix-rain canvas inside radar — pure Latin glyphs, soft rim fade */
.matrix-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: var(--matrix-opacity, 0);
    mix-blend-mode: screen;
    -webkit-mask-image: radial-gradient(circle, #000 50%, transparent 90%);
            mask-image: radial-gradient(circle, #000 50%, transparent 90%);
    transition: opacity 0.6s ease;
    pointer-events: none;
    z-index: 0;
}

.panel-donut-row {
    display: flex;
    align-items: center;
    gap: 18px;
}

.panel-donut {
    --p: 80;
    width: 92px;
    height: 92px;
    flex-shrink: 0;
    border-radius: 50%;
    position: relative;
    background: conic-gradient(var(--primary) calc(var(--p) * 1%), var(--bg-section) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.6s ease;
}

.panel-donut::before {
    content: '';
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: var(--bg-card);
    transition: background-color 0.45s ease;
}

.panel-donut span {
    position: relative;
    z-index: 1;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--primary);
}

.panel-bars {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.panel-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.panel-bar-row span {
    width: 78px;
    flex-shrink: 0;
}

.panel-bar-row .bar {
    flex: 1;
    height: 6px;
    border-radius: 50px;
    background: var(--bg-section);
    overflow: hidden;
}

.panel-bar-row .bar i {
    display: block;
    height: 100%;
    border-radius: 50px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
}

.panel-log {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.panel-log li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.panel-log time {
    font-variant-numeric: tabular-nums;
    color: var(--primary);
    font-weight: 700;
    font-size: 0.78rem;
    flex-shrink: 0;
    direction: ltr;
}

.panel-card {
    position: relative;
}

[data-theme="dark"] .panel-card {
    background: linear-gradient(160deg, rgba(6, 16, 28, 0.32) 0%, rgba(4, 10, 18, 0.18) 100%);
    border-color: rgba(34, 211, 238, 0.28);
    backdrop-filter: blur(2px) saturate(3.15);
    -webkit-backdrop-filter: blur(2px) saturate(3.15);
    box-shadow:
        0 0 0 1px rgba(34, 211, 238, 0.1) inset,
        0 10px 32px -12px rgba(0, 0, 0, 0.5),
        0 0 48px -16px rgba(34, 211, 238, 0.22);
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease, background-color 0.45s ease;
    overflow: visible;
}

[data-theme="dark"] .panel-card:hover {
    transform: translateY(-2px);
    border-color: rgba(34, 211, 238, 0.5);
    box-shadow:
        0 0 0 1px rgba(34, 211, 238, 0.16) inset,
        0 16px 40px -14px rgba(0, 0, 0, 0.55),
        0 0 56px -10px rgba(34, 211, 238, 0.32);
}

/* HUD corner brackets — identical L-shapes on every card.
   Uses shared CSS vars so length/thickness/inset stay uniform
   across all boxes and responsive breakpoints. */
[data-theme="dark"] .panel-card::before {
    content: '';
    position: absolute;
    inset: var(--panel-corner-inset, 7px);
    pointer-events: none;
    z-index: 2;
    background-repeat: no-repeat;
    background-image:
        linear-gradient(#22d3ee, #22d3ee),
        linear-gradient(#22d3ee, #22d3ee),
        linear-gradient(#22d3ee, #22d3ee),
        linear-gradient(#22d3ee, #22d3ee),
        linear-gradient(#22d3ee, #22d3ee),
        linear-gradient(#22d3ee, #22d3ee),
        linear-gradient(#22d3ee, #22d3ee),
        linear-gradient(#22d3ee, #22d3ee);
    background-size:
        var(--panel-corner-thick) var(--panel-corner-len),
        var(--panel-corner-len) var(--panel-corner-thick),
        var(--panel-corner-thick) var(--panel-corner-len),
        var(--panel-corner-len) var(--panel-corner-thick),
        var(--panel-corner-thick) var(--panel-corner-len),
        var(--panel-corner-len) var(--panel-corner-thick),
        var(--panel-corner-thick) var(--panel-corner-len),
        var(--panel-corner-len) var(--panel-corner-thick);
    background-position:
        0 0,
        0 0,
        100% 0,
        100% 0,
        0 100%,
        0 100%,
        100% 100%,
        100% 100%;
    opacity: 0.9;
    filter: drop-shadow(0 0 5px rgba(34, 211, 238, 0.7));
}

[data-theme="dark"] .loc-dot {
    animation: city-light 3.2s ease-in-out infinite;
    background: #22d3ee;
    box-shadow: 0 0 8px rgba(34, 211, 238, 0.75);
}

[data-theme="dark"] .panel-bar-row .bar i {
    box-shadow: 0 0 8px rgba(34, 211, 238, 0.55);
}

[data-theme="dark"] .panel-donut {
    filter: drop-shadow(0 0 12px rgba(52, 211, 153, 0.4));
    background: conic-gradient(#34d399 calc(var(--p) * 1%), rgba(15, 30, 45, 0.9) 0);
}

[data-theme="dark"] .panel-log time {
    text-shadow: 0 0 8px rgba(34, 211, 238, 0.55);
    color: #22d3ee;
}

[data-theme="dark"] .panel-mini-row b {
    color: #7dd3fc;
    text-shadow: 0 0 10px rgba(34, 211, 238, 0.4);
}

[data-theme="dark"] .panel-card-head {
    color: rgba(186, 230, 253, 0.75);
}

/* Final CTA */
.final-cta {
    text-align: center;
    padding: 70px 20px;
    background: radial-gradient(ellipse at center, var(--bg-section) 0%, transparent 70%);
}

.final-cta h2 {
    font-size: 1.9rem;
    margin-bottom: 12px;
    color: var(--primary-dark);
}

.final-cta p {
    color: var(--text-muted);
    margin-bottom: 28px;
}

.cta-btn-group {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ========================================
   RESPONSIVE — new components
   ======================================== */
@media (max-width: 992px) {
    .step-item {
        grid-template-columns: 1fr;
    }
    .step-number {
        order: -1;
    }
    .testimonials-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
    .radar-scope {
        width: 170px;
        height: 170px;
    }
    .radar-online-number {
        font-size: 2rem;
    }
    .big-address {
        font-size: 1.4rem;
    }
    .panel-radar {
        max-width: min(280px, 82vw) !important;
        min-width: 180px !important;
        min-height: 180px !important;
    }
    .panel-donut-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .panel-bars {
        width: 100%;
    }
}

/* Extra-small phones */
@media (max-width: 380px) {
    .hero-content h1 {
        font-size: 1.65rem;
    }
    .radar-scope {
        max-width: 100%;
        width: 190px;
        height: 190px;
    }
    .panel-radar {
        max-width: min(240px, 88vw) !important;
        min-width: 160px !important;
        min-height: 160px !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }
    .status-card,
    .radar-card {
        padding: 18px;
    }
    .container {
        padding: 0 14px;
    }
    .logo-text {
        font-size: 1.2rem;
    }
    .btn {
        padding: 12px 20px;
        font-size: 0.92rem;
    }
}