:root {
    --bg: #050d1a;
    --bg2: #080f20;
    --bg3: #0a1428;
    --surface: rgba(255,255,255,0.04);
    --surface2: rgba(255,255,255,0.07);
    --border: rgba(0,212,255,0.12);
    --border2: rgba(0,212,255,0.25);
    --accent: #00D4FF;
    --accent2: #0088aa;
    --accent-dim: rgba(0,212,255,0.15);
    --text: #e8f4f8;
    --text2: rgba(232,244,248,0.6);
    --text3: rgba(232,244,248,0.35);
    --nav-active-bg: #fff;
    --nav-active-text: #111;
}

body {
    background: var(--bg);
    color: var(--text);
}

::selection {
    background: var(--accent);
    color: #000;
}

::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }

.navbar.scrolled {
    background: rgba(5,13,26,0.85);
}
.navbar.scrolled {
    border-bottom: 1px solid var(--border);
}
.logo span { color: var(--accent); }
.nav-links a { color: var(--text2); }
.nav-links a:hover { color: var(--accent); }
.btn-theme {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text2);
}
.btn-theme:hover { border-color: var(--accent); color: var(--accent); }
.btn-cta {
    border: 1px solid var(--accent);
    color: var(--accent);
}
.btn-cta::before { background: var(--accent); }
.btn-cta:hover { color: #000; }

.hero-label {
    color: var(--accent);
    border: 1px solid var(--border2);
}
.hero-title em { color: var(--accent); }
.hero-sub { color: var(--text2); }
.btn-primary { background: var(--accent); color: #000; }
.btn-primary:hover { box-shadow: 0 12px 32px rgba(0,212,255,0.3); }
.btn-secondary {
    color: var(--text);
    border: 1px solid var(--border2);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.hero-scroll span { color: var(--text3); }
.scroll-line { background: var(--border2); }
.scroll-line::after { background: var(--accent); }

.stats-bar {
    background: var(--bg2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.stat-num { color: var(--accent); }
.stat-label { color: var(--text3); }

.section-tag { color: var(--accent); }
.section-title { color: var(--text); }
.section-desc { color: var(--text2); }

#services { background: var(--bg); }
.about-list li::before { background: var(--accent); }
.about-list li { color: var(--text); }
.about-banner-num { color: var(--text3); }
.about-banner-title { color: var(--text); }
.about-banner-desc { color: var(--text2); }

#calculator { background: var(--bg2); }
.calc-wrap {
    background: var(--bg3);
    border: 1px solid var(--border);
}
.calc-tabs { border-bottom: 1px solid var(--border); }
.calc-tab { color: var(--text3); }
.calc-tab.active { color: var(--accent); border-bottom-color: var(--accent); background: var(--surface); }
.calc-tab:hover:not(.active) { color: var(--text2); }
.field-group select,
.field-group input[type="number"] {
    background: #0d1a2e; border: 1px solid var(--border);
    color: var(--text);
}
.field-group select:hover,
.field-group input:hover,
.field-group select:focus,
.field-group input:focus { border-color: var(--accent); }
.range-val { color: var(--accent); }
.calc-result {
    background: var(--surface);
    border: 1px solid var(--border);
}
.result-label { color: var(--text3); }
.result-price { color: var(--accent); }
.result-note { color: var(--text3); }
.breakdown-item { border-bottom: 1px solid var(--border); }
.breakdown-item span:first-child { color: var(--text2); }
.breakdown-item span:last-child { color: var(--text); }
.btn-calc { background: var(--accent); color: #000; }
.btn-calc:hover { box-shadow: 0 8px 24px rgba(0,212,255,0.25); }

#tech { background: var(--bg); }
.tech-track-wrap::before { background: linear-gradient(to right, var(--bg), transparent); }
.tech-track-wrap::after { background: linear-gradient(to left, var(--bg), transparent); }
.tech-pill {
    background: var(--bg2);
    border: 1px solid var(--border);
    color: var(--text2);
}
.tech-pill:hover { border-color: var(--accent); color: var(--accent); }

#cases { background: var(--bg2); }
.cases-grid { border: 1px solid var(--border); }
.case-card { background: var(--bg3); }
.case-card:hover { background: var(--bg); }
.case-num { color: var(--accent); opacity: 0.6; }
.case-tag {
    color: var(--accent);
    border: 1px solid var(--border2);
}
.case-title { color: var(--text); }
.case-desc { color: var(--text2); }

#contact { background: #f0f4f8; }
#contact .section-tag { color: var(--accent); }
#contact .section-title { color: #111; }
#contact .section-desc { color: #444; }
#contact .contact-text { color: #333; }
#contact .contact-text strong { color: #111; }
#contact .contact-text a { color: var(--accent2); }
#contact .form-field label { color: #555; }
#contact .form-field input,
#contact .form-field select,
#contact .form-field textarea {
    background: #fff;
    border-color: #d0d5dd;
    color: #111;
}
#contact .form-field input:focus,
#contact .form-field select:focus,
#contact .form-field textarea:focus { border-color: var(--accent); }
#contact .form-checkbox { color: #444; }
#contact .form-success { color: var(--accent2); }
#contact .contact-icon { background: rgba(0,136,170,0.08); border-color: rgba(0,136,170,0.2); color: var(--accent2); }
#contact .btn-primary { background: var(--accent2); color: #fff; }
#contact .contact-form-wrap { background: #fff; border-color: #e0e4ea; }
.contact-icon {
    background: var(--accent-dim);
    border: 1px solid var(--border2);
    color: var(--accent);
}
.contact-text { color: var(--text2); }
.contact-text strong { color: var(--text); }
.form-field input,
.form-field select,
.form-field textarea {
    background: #0d1a2e;
    border: 1px solid var(--border);
    color: var(--text);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--accent); }
.form-field label { color: var(--text3); }
.form-success { color: var(--accent); }

#chat-btn { background: var(--accent); }
#chat-btn svg { color: #000; }
#chat-popup {
    background: var(--bg3);
    border: 1px solid var(--border2);
}
.chat-head { background: var(--surface2); border-bottom: 1px solid var(--border); }
.chat-avatar { background: var(--accent); color: #000; }
.chat-name { color: var(--text); }
.chat-status { color: #4ade80; }
.chat-msg { color: var(--text2); }
.chat-tg {
    background: rgba(42,171,238,0.12);
    border: 1px solid rgba(42,171,238,0.25);
    color: #2aabee;
}
.chat-tg:hover { background: rgba(42,171,238,0.2); }

footer { background: var(--bg2); border-top: 1px solid var(--border); }
.footer-copy { color: var(--text3); }
.footer-copy span { color: var(--accent); }

.cookie-banner {
    background: var(--bg3);
    border: 1px solid var(--border);
}
.cookie-banner p { color: var(--text2); }
.cookie-btn { background: var(--accent); color: #000; }
.cookie-btn:hover { box-shadow: 0 4px 16px rgba(0,212,255,0.3); }
.cookie-btn-outline { border: 1px solid var(--border2); color: var(--text2); }
.cookie-btn-outline:hover { border-color: var(--accent); color: var(--accent); }