:root {
    --accent: #00D9FF;
}

/* ========================= */
/* Theme Toggle Button */
/* ========================= */

.theme-toggle {
    position: fixed;
    top: 25px;
    left: 25px;
    z-index: 250;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .05);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .35s;
    color: #00D9FF;
}

.theme-toggle:hover {
    border-color: #00D9FF;
    box-shadow: 0 0 25px rgba(0, 217, 255, .4);
    transform: translateY(-4px) scale(1.05);
}

.theme-toggle svg {
    width: 22px;
    height: 22px;
    transition: .4s;
}

.theme-toggle .icon-moon {
    display: block;
}

.theme-toggle .icon-sun {
    display: none;
}

html[data-theme="light"] .theme-toggle .icon-moon {
    display: none;
}

html[data-theme="light"] .theme-toggle .icon-sun {
    display: block;
}

@media (max-width: 700px) {
    .theme-toggle {
        top: 16px;
        left: 16px;
        width: 44px;
        height: 44px;
    }
    .theme-toggle svg {
        width: 19px;
        height: 19px;
    }
}

/* ========================= */
/* LIGHT MODE OVERRIDES      */
/* ========================= */

html[data-theme="light"] {
    --accent: #007A9E;
}

html[data-theme="light"] body {
    background: #C5D0D8;
    color: #0B1524;
}

html[data-theme="light"] .background {
    background:
        radial-gradient(circle at top, rgba(0, 122, 158, 0.20) 0%, transparent 45%),
        radial-gradient(circle at bottom, rgba(91, 75, 255, 0.15) 0%, transparent 45%),
        #C5D0D8;
}

html[data-theme="light"] .aurora {
    background:
        radial-gradient(circle at 20% 20%, rgba(0, 122, 158, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(94, 92, 255, 0.12) 0%, transparent 40%);
    animation: auroraMove 12s ease-in-out infinite alternate;
}

html[data-theme="light"] .grid {
    background-image:
        linear-gradient(rgba(11, 21, 36, 0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11, 21, 36, 0.10) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.5;
    mask-image: radial-gradient(circle, white 35%, transparent 85%);
}

html[data-theme="light"] .crt-lines {
    background: repeating-linear-gradient(
        0deg,
        rgba(11, 21, 36, 0.04) 0px,
        rgba(11, 21, 36, 0.04) 1px,
        transparent 1px,
        transparent 3px
    );
}

html[data-theme="light"] .noise {
    opacity: 0.03;
}

html[data-theme="light"] a {
    color: #0B1524;
}

html[data-theme="light"] a:hover {
    color: var(--accent);
}

/* ========================= */
/* Navigation bar - fixed for full consistency */
/* ========================= */

html[data-theme="light"] nav {
    background: rgba(197, 208, 216, 0.85); /* Matches page background with slight transparency */
    border: 1px solid rgba(11, 21, 36, 0.10);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(11, 21, 36, 0.06);
}

html[data-theme="light"] nav.active {
    background: rgba(197, 208, 216, 0.70); /* Slightly darker when scrolling */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .hero-photo-dark {
    display: none;
}

html[data-theme="light"] .hero-photo-light {
    display: block;
}

html[data-theme="light"] .hero-overlay {
    background: linear-gradient(180deg, rgba(197, 208, 216, .35) 0%, rgba(197, 208, 216, .65) 100%);
}

html[data-theme="light"] .logo {
    color: var(--accent);
}

html[data-theme="light"] .nav-toggle span {
    background: #0B1524;
}

@media (max-width: 750px) {
    html[data-theme="light"] .nav-links {
        background: rgba(197, 208, 216, 0.90);
        border: 1px solid rgba(0, 0, 0, 0.08);
        backdrop-filter: blur(13px);
    }
}

html[data-theme="light"] .dropdown-menu {
    background: rgba(197, 208, 216, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .dropdown-menu a:hover {
    background: rgba(0, 122, 158, 0.10);
    color: var(--accent);
}

html[data-theme="light"] .hero span,
html[data-theme="light"] .about h3,
html[data-theme="light"] .plan-card h4,
html[data-theme="light"] .plan-price,
html[data-theme="light"] .plans-header span,
html[data-theme="light"] #typewriter,
html[data-theme="light"] .info-card h3,
html[data-theme="light"] .error-code,
html[data-theme="light"] .footer-column h3,
html[data-theme="light"] .site-footer .designer span {
    color: var(--accent);
}

html[data-theme="light"] .btn-secondary {
    color: var(--accent);
    border-color: var(--accent);
}

html[data-theme="light"] .card,
html[data-theme="light"] .feature-card,
html[data-theme="light"] .info-card,
html[data-theme="light"] .contact-card,
html[data-theme="light"] .faq-item,
html[data-theme="light"] .tab-btn,
html[data-theme="light"] .plan-card,
html[data-theme="light"] .site-footer,
html[data-theme="light"] .footer,
html[data-theme="light"] .ping-widget,
html[data-theme="light"] .scroll-top-btn,
html[data-theme="light"] .brand-box-inner {
    background: rgba(255, 255, 255, 0.60);
    border-color: rgba(11, 21, 36, 0.10);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 30px rgba(0, 122, 158, 0.08);
}

html[data-theme="light"] .plan-card {
    background:
        linear-gradient(rgba(255, 255, 255, 0.60), rgba(255, 255, 255, 0.60)),
        repeating-linear-gradient(0deg, rgba(0, 122, 158, 0.04) 0px, rgba(0, 122, 158, 0.04) 1px, transparent 1px, transparent 26px);
}

html[data-theme="light"] .feature-card:hover,
html[data-theme="light"] .info-card:hover,
html[data-theme="light"] .contact-card:hover,
html[data-theme="light"] .card:hover,
html[data-theme="light"] .plan-card:hover {
    border-color: var(--accent);
    box-shadow: 0 0 30px rgba(0, 122, 158, 0.20);
}

html[data-theme="light"] .plan-spec,
html[data-theme="light"] .plan-features li {
    border-bottom: 1px solid rgba(11, 21, 36, 0.06);
}

html[data-theme="light"] .footer-bottom {
    border-top: 1px solid rgba(11, 21, 36, 0.06);
}

html[data-theme="light"] .scroll-indicator span {
    border-color: rgba(11, 21, 36, 0.25);
}

html[data-theme="light"] ::-webkit-scrollbar-track {
    background: #d2dbe2;
}

html[data-theme="light"] {
    scrollbar-color: #007A9E #d2dbe2;
}

/* ========================= */
/* Navbar theme toggle button */
/* ========================= */

html[data-theme="light"] .theme-toggle-nav {
    background: rgba(11, 21, 36, 0.12);
    border: 1px solid rgba(0, 122, 158, 0.3);
    color: #007A9E;
}

html[data-theme="light"] .theme-toggle-nav:hover {
    background: rgba(0, 122, 158, 0.15);
    border-color: #007A9E;
    box-shadow: 0 0 25px rgba(0, 122, 158, 0.3);
}

/* ========================= */
/* Tab Buttons */
/* ========================= */

html[data-theme="light"] .tab-btn {
    background: rgba(11, 21, 36, 0.08);
    color: #0B1524;
    border: 1px solid rgba(11, 21, 36, 0.12);
}

html[data-theme="light"] .tab-btn:hover {
    background: rgba(0, 122, 158, 0.10);
    border-color: var(--accent);
}

html[data-theme="light"] .tab-btn.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 0 35px rgba(0, 122, 158, 0.35);
}

/* ========================= */
/* Emoji Icon Tinting -> site accent (cyan) */
/* ========================= */

.icon,
.ico-inline {
    filter: grayscale(1) brightness(1.3) sepia(1) hue-rotate(150deg) saturate(4.5);
}

.ico-inline {
    display: inline-block;
}

/* ========================= */
/* Aqaye Pardakht - theme switching */
/* ========================= */

html[data-theme="light"] .aqaye-pardakht-dark {
    display: none !important;
}

html[data-theme="light"] .aqaye-pardakht-light {
    display: inline-block !important;
}

html[data-theme="dark"] .aqaye-pardakht-dark {
    display: inline-block !important;
}

html[data-theme="dark"] .aqaye-pardakht-light {
    display: none !important;
}