/* ==========================================================================
   Futuristic theme (light): HUD details, glass panels and neon accents
   layered over the template. Loaded after main.css and custom.css;
   remove the <link> to revert.
   ========================================================================== */

:root {
    --body: #F4F5F9;
    --header: #0D0E14;
    --text: #4A4E5C;
    --bg: #ECEEF4;
    --neon: #93F203;          /* fills, glows and buttons */
    --neon-ink: #4A8500;      /* lime that stays readable as text on light */
    --neon2: #6805F1;
    --glass: rgba(255, 255, 255, .72);
    --glass-strong: rgba(255, 255, 255, .88);
    --glass-line: rgba(13, 14, 20, .09);
    --shadow-soft: 0 10px 30px rgba(22, 24, 40, .07);
    --shadow-lift: 0 24px 60px rgba(104, 5, 241, .14);
    --mono: 'JetBrains Mono', Consolas, 'Courier New', monospace;
}

html { background-color: var(--body); }
body { background-color: transparent; }
::selection { background: var(--neon); color: #0D0E14; }

/* Scrollbar */
html { scrollbar-color: #C9CCD8 var(--body); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--body); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--neon2), var(--neon)); border-radius: 10px; }

/* --------------------------------------------------------------------------
   Ambient background: canvas network + grid + glows
   -------------------------------------------------------------------------- */
#fx-bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(900px 600px at 85% -10%, rgba(104, 5, 241, .10), transparent 60%),
        radial-gradient(700px 500px at -10% 110%, rgba(147, 242, 3, .14), transparent 60%),
        linear-gradient(rgba(13, 14, 20, .035) 1px, transparent 1px) 0 0 / 56px 56px,
        linear-gradient(90deg, rgba(13, 14, 20, .035) 1px, transparent 1px) 0 0 / 56px 56px,
        var(--body);
}

/* Scroll progress bar */
#fx-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    transform-origin: 0 50%;
    transform: scaleX(0);
    z-index: 100000;
    background: linear-gradient(90deg, var(--neon2), var(--neon));
    box-shadow: 0 0 10px rgba(147, 242, 3, .7);
    pointer-events: none;
}

/* The template's dark bands become soft tinted panels */
.section-bg {
    background-color: rgba(255, 255, 255, .55);
    border-top: 1px solid var(--glass-line);
    border-bottom: 1px solid var(--glass-line);
}
.section-bg .text-white { color: var(--header) !important; }
.contact-section-3 { background: transparent; }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { color: var(--header); }
.section-title h2.style-3 { text-shadow: 0 0 40px rgba(104, 5, 241, .10); }

/* HUD eyebrow numbering on every section heading */
#smooth-content { counter-reset: fx-section; }
.section-title { counter-increment: fx-section; }
.section-title h2::before {
    content: "// " counter(fx-section, decimal-leading-zero);
    display: block;
    margin-bottom: 14px;
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 4px;
    line-height: 1;
    color: var(--neon-ink);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.header-main .logo, .site-logo { color: var(--header); }
.header-main .main-menu ul li a { color: #2E3140; }
.header-main .main-menu ul li .circle-menu-box {
    background-color: rgba(255, 255, 255, .7);
    border: 1px solid var(--glass-line);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: border-color .3s ease, color .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.header-main .main-menu ul li .circle-menu-box:hover,
.header-main .main-menu ul li.active .circle-menu-box {
    color: var(--header);
    background-color: var(--neon);
    border-color: var(--neon);
    box-shadow: 0 0 18px rgba(147, 242, 3, .45);
}
.sticky {
    background-color: rgba(244, 245, 249, .82) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 var(--glass-line), var(--shadow-soft) !important;
}
.header-main .sidebar__toggle span { background-color: var(--header); }

/* Mobile slide-out menu: the template paints it with var(--header); make it light glass */
.offcanvas__info {
    background: rgba(250, 251, 253, .97) !important;
    border: 1px solid var(--glass-line);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 30px 80px rgba(22, 24, 40, .18), 0 0 60px rgba(104, 5, 241, .08);
}
.offcanvas__wrapper .offcanvas__logo a,
.offcanvas__wrapper .logo { color: var(--header); }
.offcanvas__wrapper .offcanvas__close i { color: var(--header); }
.offcanvas__wrapper .text { color: var(--text); }
.mean-container .mean-nav ul li a {
    color: var(--header);
    border-bottom: 1px solid var(--glass-line) !important;
}
.mean-container .mean-nav ul li a:hover,
.mean-container .mean-nav ul li.active > a { color: var(--neon2); }
.offcanvas__wrapper .off-contact-info .info-title { color: var(--header); }
.offcanvas__wrapper .off-contact-info .contact-details .sub-info { color: var(--text); }
.offcanvas__wrapper .off-contact-info .contact-details p,
.offcanvas__wrapper .off-contact-info .contact-details p a { color: var(--header); }
.offcanvas__wrapper .off-contact-info .contact-details p a:hover { color: var(--neon2); }
.offcanvas__wrapper .social-icon-list .follow-title { color: var(--header); }
.offcanvas__wrapper .social-icon-list .social-icon a { color: var(--header); background: rgba(13, 14, 20, .06); }
.offcanvas__wrapper .social-icon-list .social-icon a:hover { color: var(--header); background: var(--neon); }
.offcanvas__overlay { background: rgba(13, 14, 20, .35); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.theme-btn {
    color: #0D0E14;
    box-shadow: 0 0 0 1px rgba(110, 180, 0, .45), 0 8px 24px rgba(147, 242, 3, .35);
    transition: box-shadow .35s ease, transform .35s ease;
}
.theme-btn:hover {
    box-shadow: 0 0 0 1px rgba(110, 180, 0, .8), 0 12px 32px rgba(147, 242, 3, .55);
    transform: translateY(-2px);
}
.header-1 .header-right .theme-btn { color: #fff; }
.hero-3 .hero-thumb-area .content .hero-btn-area .theme-btn.style-2 {
    background-color: var(--header);
    color: #fff;
    box-shadow: 0 8px 24px rgba(13, 14, 20, .2);
}
.hero-3 .hero-thumb-area .content .hero-btn-area .theme-btn.style-2:hover {
    box-shadow: 0 0 0 1px var(--neon2), 0 12px 32px rgba(104, 5, 241, .35);
}
.social-icon, .link-icon-area a { color: var(--header); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero-3 .hero-shape-1 img { opacity: .9; }
.hero-3 .hero-shape-2 img { opacity: .55; }
.hero-3 .hero-content .title {
    color: var(--header);
    text-shadow: 0 0 60px rgba(104, 5, 241, .12);
    position: relative;
}
.hero-3 .hero-content .title::after {
    /* scan line sweeping over the headline */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--neon2), var(--neon), transparent);
    box-shadow: 0 0 10px rgba(147, 242, 3, .7);
    opacity: .6;
    animation: fx-scan 5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes fx-scan {
    0%   { transform: translateY(0); opacity: 0; }
    10%  { opacity: .6; }
    90%  { opacity: .6; }
    100% { transform: translateY(var(--fx-scan-h, 220px)); opacity: 0; }
}

/* HUD line above the headline */
.fx-hud {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    padding: 8px 16px;
    font-family: var(--mono);
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--text);
    border: 1px solid var(--glass-line);
    border-radius: 30px;
    background: rgba(255, 255, 255, .75);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-soft);
    position: relative;
    z-index: 2;
}
.fx-hud .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--neon);
    box-shadow: 0 0 8px var(--neon);
    animation: fx-pulse 1.6s ease-in-out infinite;
}
.fx-hud .prefix { color: var(--neon-ink); font-weight: 600; }
.fx-hud .fx-typer { color: var(--header); font-weight: 600; }
.fx-hud .caret {
    display: inline-block;
    width: 8px;
    height: 16px;
    margin-left: 2px;
    background: var(--neon2);
    vertical-align: -2px;
    animation: fx-caret 1s steps(1) infinite;
}
@keyframes fx-pulse { 50% { opacity: .35; transform: scale(.8); } }
@keyframes fx-caret { 50% { opacity: 0; } }

/* Portrait: rotating neon ring */
.hero-3 .hero-content .hero-circle-img { isolation: isolate; }
.hero-3 .hero-content .hero-circle-img::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--neon), transparent 30%, var(--neon2) 55%, transparent 80%, var(--neon));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    animation: fx-spin 8s linear infinite;
    z-index: 1;
    pointer-events: none;
}
.hero-3 .hero-content .hero-circle-img::after {
    content: "";
    position: absolute;
    inset: -26px;
    border-radius: 50%;
    border: 1px dashed rgba(104, 5, 241, .35);
    animation: fx-spin 30s linear infinite reverse;
    pointer-events: none;
}
.hero-3 .hero-content .hero-circle-img img { box-shadow: 0 20px 50px rgba(104, 5, 241, .18); }
@keyframes fx-spin { to { transform: rotate(360deg); } }

.hero-3 .hero-thumb-area .hero-thumb img { box-shadow: 0 30px 70px rgba(22, 24, 40, .22); }
.hero-3 .hero-thumb-area .content .work-text { color: var(--neon-ink); font-family: var(--mono); letter-spacing: 2px; font-weight: 600; }
.hero-3 .hero-thumb-area .content p { color: var(--text); }

/* --------------------------------------------------------------------------
   Glass panels (shared)
   -------------------------------------------------------------------------- */
.fx-card {
    position: relative;
    --mx: 50%;
    --my: 50%;
}
.fx-card::after {
    /* mouse-follow spotlight, positioned by futuristic.js */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(420px circle at var(--mx) var(--my), rgba(147, 242, 3, .16), transparent 45%);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
    z-index: 0;
}
.fx-card:hover::after { opacity: 1; }

/* Expertise */
.comprehensive-wrapper .comprehensive-items { border-bottom: 1px solid var(--glass-line); }
.comprehensive-wrapper .comprehensive-items .title { color: var(--header); }
.comprehensive-wrapper .comprehensive-items p { color: var(--text); }
.comprehensive-items .expertise-icon { color: var(--neon-ink); }
.comprehensive-items .skill-tags span {
    color: var(--header);
    border: 1px solid rgba(74, 133, 0, .3) !important;
    background: rgba(147, 242, 3, .10);
    transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.comprehensive-items .skill-tags span:hover {
    color: #0D0E14;
    background: var(--neon);
    border-color: var(--neon) !important;
}

/* Work experience */
.work-positions-items {
    border-bottom: 1px solid var(--glass-line);
    padding-left: 24px;
    padding-right: 24px;
    border-radius: 12px;
    transition: background .4s ease;
}
.work-positions-items::before {
    /* replace the template's full-bleed purple fill with a light glass wash */
    left: 0;
    width: 100%;
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(147, 242, 3, .16), rgba(104, 5, 241, .07) 60%, rgba(255, 255, 255, .6));
    border: 1px solid rgba(74, 133, 0, .25);
    box-shadow: inset 3px 0 0 var(--neon), var(--shadow-soft);
}
.work-positions-items .year {
    color: var(--neon-ink);
    font-family: var(--mono);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 1px;
}
.work-positions-items .title { color: var(--header); }
.work-positions-items .content .title-2 { color: var(--header); }
.work-positions-items .content ul li { color: var(--text); }
.work-positions-items.active .content ul li,
.work-positions-items:hover .content ul li { color: #2A2D3A; }

/* Tools grid */
.brand-items .brand-image { border-color: var(--glass-line) !important; }
.brand-items.bb-right { border-right-color: var(--glass-line) !important; }
.brand-items .bb-bottom { border-bottom-color: var(--glass-line) !important; }
.brand-items .brand-image .brand-text { color: var(--header); opacity: .9; }
.brand-items .brand-image { transition: background .35s ease, box-shadow .35s ease; }

/* Process cards */
.process-box-items-3 {
    background-color: rgba(255, 255, 255, .92);
    border: 1px solid var(--glass-line);
    box-shadow: var(--shadow-soft);
}
.process-box-items-3 .content .title { color: var(--header); }
.process-box-items-3 .content p { color: var(--text); }

/* Certifications */
.cert-card {
    background-color: var(--glass-strong);
    border: 1px solid var(--glass-line);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-soft);
    transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.cert-card:hover {
    transform: translateY(-6px);
    border-color: rgba(74, 133, 0, .45);
    box-shadow: 0 0 0 1px rgba(147, 242, 3, .25), var(--shadow-lift);
}
.cert-card .cert-thumb {
    border-bottom: 1px solid var(--glass-line);
    background-color: #ECEEF4;
}
.cert-card .cert-body { position: relative; z-index: 1; }
.cert-card .issuer { color: var(--neon2); font-family: var(--mono); font-weight: 600; }
.cert-card .title { color: var(--header); }
.cert-card .meta { color: var(--text); }
.cert-card .verify { color: var(--header); }
.cert-card .verify:hover { color: var(--neon2); }
.cert-subtitle { color: var(--header); }
.cert-subtitle::before {
    content: "> ";
    color: var(--neon-ink);
    font-family: var(--mono);
}
.cert-list-item {
    background-color: var(--glass-strong);
    border: 1px solid var(--glass-line);
    box-shadow: var(--shadow-soft);
    transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.cert-list-item:hover {
    background-color: #fff;
    border-color: rgba(74, 133, 0, .45);
    box-shadow: 0 0 0 1px rgba(147, 242, 3, .25), var(--shadow-lift);
}
.cert-list-item h4 { color: var(--header); }
.cert-list-item p { color: var(--text); }
.cert-list-item img { border-color: var(--glass-line); }

/* Education */
.testimonial-box-items-3 {
    border: 1px solid var(--glass-line);
    background: var(--glass-strong);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-soft);
    transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.testimonial-box-items-3:hover {
    transform: translateY(-6px);
    border-color: rgba(104, 5, 241, .4);
    box-shadow: var(--shadow-lift);
}
.testimonial-box-items-3 .title { color: var(--header); }
.testimonial-box-items-3 .name { color: var(--neon-ink); }
.testimonial-box-items-3 .edu-icon { color: var(--neon2); }

/* Projects grid (structure lives in custom.css) */
.project-filter {
    color: var(--header);
    background: rgba(255, 255, 255, .8);
    border-color: var(--glass-line);
}
.project-filter .count { background: rgba(13, 14, 20, .07); }
.project-filter:hover { color: var(--neon2); border-color: rgba(104, 5, 241, .4); }
.project-filter.is-active { color: #0D0E14; }
.project-card {
    background: var(--glass-strong);
    border-color: var(--glass-line);
    box-shadow: var(--shadow-soft);
}
.project-card:hover {
    border-color: rgba(74, 133, 0, .45);
    box-shadow: 0 0 0 1px rgba(147, 242, 3, .25), var(--shadow-lift);
}
.project-thumb { border-color: var(--glass-line) !important; background: #ECEEF4; }
.project-cat { color: var(--neon-ink); font-weight: 600; }
.project-role { color: #2A2D3A; }
.project-desc { color: var(--text); }
.project-status { color: var(--text); border-color: var(--glass-line); }
.project-status.is-live { color: var(--neon-ink); border-color: rgba(74, 133, 0, .45); }
.project-status.is-progress { color: var(--neon2); border-color: rgba(104, 5, 241, .4); }
.project-tags span {
    color: var(--header);
    border-color: rgba(74, 133, 0, .3);
    background: rgba(147, 242, 3, .10);
}
.project-link, .project-link:hover { color: var(--neon2); }

/* Contact */
.contact-content-3 .select-service-area span { color: var(--header); }
.contact-content-3 .select-service-area .select-service .theme-btn {
    background-color: rgba(255, 255, 255, .85);
    color: var(--header);
    box-shadow: 0 0 0 1px var(--glass-line);
}
.contact-content-3 .select-service-area .select-service .theme-btn:hover,
.contact-content-3 .select-service-area .select-service .theme-btn.active,
.contact-content-3 .select-service-area .select-service .theme-btn.is-selected {
    background-color: var(--neon);
    color: #0D0E14;
    box-shadow: 0 8px 24px rgba(147, 242, 3, .4);
}
.contact-content-3 .contact-form-box .form-clt span { color: var(--header); }
.contact-content-3 .contact-form-box .form-clt input,
.contact-content-3 .contact-form-box .form-clt textarea {
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--glass-line);
    color: var(--header);
    transition: border-color .3s ease, box-shadow .3s ease;
}
.contact-content-3 .contact-form-box .form-clt input:focus,
.contact-content-3 .contact-form-box .form-clt textarea:focus {
    outline: none;
    border-color: rgba(104, 5, 241, .5);
    box-shadow: 0 0 0 3px rgba(104, 5, 241, .12);
}
.contact-content-3 .contact-form-box .form-clt input::placeholder,
.contact-content-3 .contact-form-box .form-clt textarea::placeholder { color: #8A8E9C; }
.contact-content-3 .contact-button p a { color: var(--header); }
.contact-thumb-3 img { border-radius: 14px; box-shadow: 0 30px 70px rgba(22, 24, 40, .18); }

/* Footer stays dark as the page's base; its headings use white explicitly */
.footer-section { background-color: #0F1016 !important; }
.footer-section h1, .footer-section h2, .footer-section h3, .footer-section h4 { color: #fff; }
.footer-widget-wrapper .footer-widget-items .social-list .social-icon-area .social-icon {
    border-color: rgba(255, 255, 255, .15);
}

/* Cursor */
.cursor-inner { background-color: var(--neon2); }
.cursor-outer { border-color: var(--neon2); background-color: rgba(104, 5, 241, .12); }

/* Back to top */
.back-to-top { box-shadow: 0 8px 24px rgba(104, 5, 241, .3); }

/* --------------------------------------------------------------------------
   Reveal-on-scroll for elements without the template's own animation
   -------------------------------------------------------------------------- */
.fx-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.fx-reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Reduced motion: keep the look, drop the movement
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .hero-3 .hero-content .title::after,
    .hero-3 .hero-content .hero-circle-img::before,
    .hero-3 .hero-content .hero-circle-img::after,
    .fx-hud .dot,
    .fx-hud .caret { animation: none; }
    .fx-reveal { opacity: 1; transform: none; transition: none; }
    .cert-card:hover, .testimonial-box-items-3:hover, .theme-btn:hover { transform: none; }
}

@media (max-width: 767px) {
    .fx-hud { font-size: 12px; padding: 6px 12px; gap: 8px; }
    .work-positions-items { padding-left: 12px; padding-right: 12px; }
}

/* --------------------------------------------------------------------------
   WhatsApp: floating chat button + contact button
   -------------------------------------------------------------------------- */
.whatsapp-float {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 1000;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #25D366;
    color: #fff;
    font-size: 30px;
    box-shadow: 0 10px 30px rgba(37, 211, 102, .45);
    transition: transform .3s ease, box-shadow .3s ease;
}
.whatsapp-float::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #25D366;
    animation: wa-ring 2.4s ease-out infinite;
    pointer-events: none;
}
.whatsapp-float:hover,
.whatsapp-float:focus-visible {
    color: #fff;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 14px 40px rgba(37, 211, 102, .6);
}
.whatsapp-float-label {
    position: absolute;
    right: calc(100% + 14px);
    top: 50%;
    transform: translate(8px, -50%);
    white-space: nowrap;
    padding: 8px 14px;
    border-radius: 20px;
    font-family: var(--mono);
    font-size: 13px;
    color: #fff;
    background: rgba(13, 14, 20, .9);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease;
}
.whatsapp-float:hover .whatsapp-float-label,
.whatsapp-float:focus-visible .whatsapp-float-label {
    opacity: 1;
    transform: translate(0, -50%);
}
@keyframes wa-ring {
    0% { transform: scale(1); opacity: .7; }
    100% { transform: scale(1.6); opacity: 0; }
}
/* back-to-top sits above the WhatsApp button */
.back-to-top { bottom: 102px; }

.contact-button .whatsapp-btn {
    background-color: #25D366;
    color: #0D0E14;
    box-shadow: 0 8px 24px rgba(37, 211, 102, .35);
}
.contact-button .whatsapp-btn:hover {
    color: #0D0E14;
    box-shadow: 0 12px 32px rgba(37, 211, 102, .55);
}
.contact-button .whatsapp-btn i { font-size: 20px; margin-right: 6px; vertical-align: -2px; }

@media (max-width: 767px) {
    .whatsapp-float { right: 18px; bottom: 18px; width: 54px; height: 54px; font-size: 28px; }
    .back-to-top { bottom: 84px; right: 20px; }
    .whatsapp-float-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .whatsapp-float::before { animation: none; }
}
.contact-content-3 .contact-form-box .contact-button { flex-wrap: wrap; gap: 16px; justify-content: flex-start; }
.contact-content-3 .contact-form-box .contact-button p { flex-basis: 100%; }
.contact-button .whatsapp-btn { padding: 0 40px; }

/* --------------------------------------------------------------------------
   Tools & Technologies: each icon in its brand colour (set inline as --c)
   -------------------------------------------------------------------------- */
.brand-items .brand-image .tech-icon {
    background-color: var(--c, var(--header));
    opacity: 1;
}
.brand-items .brand-image:hover .tech-icon {
    background-color: var(--c, var(--neon2));
    filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--c, #6805F1) 45%, transparent));
}
.brand-items .brand-image:hover .brand-text { color: var(--c, var(--neon2)); }
.brand-items .brand-image:hover {
    background: color-mix(in srgb, var(--c, #93F203) 8%, transparent);
    box-shadow: inset 0 0 30px color-mix(in srgb, var(--c, #93F203) 10%, transparent);
}

/* Certificate badges (no scan available) stay dark so their white label reads */
.cert-card .cert-badge {
    background:
        radial-gradient(circle at 85% 10%, rgba(104, 5, 241, .55), transparent 60%),
        radial-gradient(circle at 10% 100%, rgba(147, 242, 3, .22), transparent 55%),
        #0D0E14;
}

/* Highlighted job: the template forces white text for its purple fill */
.work-positions-items.active .year { color: var(--neon-ink); }
.work-positions-items.active .title,
.work-positions-items.active .content .title-2 { color: var(--header); }
.work-positions-items.active .content ul li { color: #2A2D3A; }

/* --------------------------------------------------------------------------
   Light / dark toggle button
   -------------------------------------------------------------------------- */
.fx-theme-toggle {
    position: relative;
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    margin-right: 12px;
    border-radius: 50%;
    border: 1px solid var(--glass-line);
    background: var(--glass-strong);
    color: var(--header);
    font-size: 17px;
    line-height: 1;
    overflow: hidden;
    cursor: pointer;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-soft);
    transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease, color .3s ease;
}
.fx-theme-toggle:hover {
    border-color: var(--neon2);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--neon2) 18%, transparent);
}
.fx-theme-toggle:focus-visible {
    outline: 2px solid var(--neon2);
    outline-offset: 2px;
}
.fx-theme-toggle i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform .4s ease, opacity .3s ease;
}
/* Shows the mode you would switch to: a moon on light, a sun on dark */
.fx-theme-toggle .fa-sun { opacity: 0; transform: translate(-50%, 120%) rotate(-90deg); }
html[data-theme="dark"] .fx-theme-toggle { color: var(--neon); }
html[data-theme="dark"] .fx-theme-toggle .fa-moon { opacity: 0; transform: translate(-50%, -220%) rotate(90deg); }
html[data-theme="dark"] .fx-theme-toggle .fa-sun { opacity: 1; transform: translate(-50%, -50%); }
@media (max-width: 1199px) {
    .fx-theme-toggle { margin-right: 14px; }
}

/* Cross-fade colours only while switching, so normal hover timings are unaffected */
html.fx-theme-fading,
html.fx-theme-fading *:not(canvas) {
    transition: background-color .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease !important;
}

/* --------------------------------------------------------------------------
   Dark theme: light is the default; these apply when the toggle is on
   -------------------------------------------------------------------------- */
html[data-theme="dark"] {
    color-scheme: dark;
    --body: #05060A;
    --header: #F3F4F7;
    --text: #A3A6B5;
    --bg: #090A10;
    --neon-ink: #93F203;
    --neon2: #9B5CFF;
    --glass: rgba(255, 255, 255, .035);
    --glass-strong: rgba(12, 13, 20, .78);
    --glass-line: rgba(255, 255, 255, .09);
    --shadow-soft: 0 14px 40px rgba(0, 0, 0, .4);
    --shadow-lift: 0 24px 60px rgba(139, 61, 255, .25);
    scrollbar-color: #2A2B35 var(--body);
}
html[data-theme="dark"] body::before {
    background:
        radial-gradient(900px 600px at 85% -10%, rgba(139, 61, 255, .22), transparent 60%),
        radial-gradient(700px 500px at -10% 110%, rgba(147, 242, 3, .10), transparent 60%),
        linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 56px 56px,
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 56px 56px,
        var(--body);
}
html[data-theme="dark"] .section-bg { background-color: rgba(9, 10, 16, .55); }
html[data-theme="dark"] .section-title h2.style-3 { text-shadow: 0 0 40px rgba(139, 61, 255, .35); }

/* Header and mobile menu */
html[data-theme="dark"] .header-main .main-menu ul li a { color: #C9CBD6; }
html[data-theme="dark"] .header-main .main-menu ul li .circle-menu-box { background-color: rgba(255, 255, 255, .04); }
html[data-theme="dark"] .header-main .main-menu ul li .circle-menu-box:hover,
html[data-theme="dark"] .header-main .main-menu ul li.active .circle-menu-box {
    color: var(--neon);
    background-color: rgba(147, 242, 3, .06);
    border-color: rgba(147, 242, 3, .5);
    box-shadow: 0 0 18px rgba(147, 242, 3, .18) inset, 0 0 14px rgba(147, 242, 3, .15);
}
html[data-theme="dark"] .sticky {
    background-color: rgba(5, 6, 10, .72) !important;
    box-shadow: 0 1px 0 var(--glass-line), 0 10px 30px rgba(0, 0, 0, .45) !important;
}
html[data-theme="dark"] .offcanvas__info {
    background: rgba(9, 10, 16, .94) !important;
    box-shadow: 0 0 0 1px rgba(147, 242, 3, .08), 0 30px 80px rgba(0, 0, 0, .6), 0 0 60px rgba(139, 61, 255, .2);
}
html[data-theme="dark"] .offcanvas__wrapper .social-icon-list .social-icon a { background: rgba(255, 255, 255, .07); }
html[data-theme="dark"] .offcanvas__wrapper .social-icon-list .social-icon a:hover { color: #05060A; background: var(--neon); }
html[data-theme="dark"] .mean-container .mean-nav ul li.active > a,
html[data-theme="dark"] .mean-container .mean-nav ul li a:hover,
html[data-theme="dark"] .offcanvas__wrapper .off-contact-info .contact-details p a:hover { color: var(--neon); }
html[data-theme="dark"] .offcanvas__overlay { background: rgba(5, 6, 10, .6); }

/* The template fills these with var(--header), which is light in this theme */
html[data-theme="dark"] .header-1 .header-right .theme-btn::before { background-color: #2A1660; }
html[data-theme="dark"] .back-to-top:hover { background-color: var(--neon); color: #05060A; }
html[data-theme="dark"] .process-box-items-3:not(.style-2):not(.style-4) .thumb { background-color: #0B0C12; }

/* Buttons */
html[data-theme="dark"] .hero-3 .hero-thumb-area .content .hero-btn-area .theme-btn.style-2 {
    background-color: transparent;
    color: var(--header);
    box-shadow: 0 0 0 1px rgba(139, 61, 255, .7), 0 0 24px rgba(139, 61, 255, .3);
}
html[data-theme="dark"] .hero-3 .hero-thumb-area .content .hero-btn-area .theme-btn.style-2:hover {
    box-shadow: 0 0 0 1px var(--neon2), 0 0 34px rgba(139, 61, 255, .6);
}

/* Hero */
html[data-theme="dark"] .hero-3 .hero-shape-1 img {
    opacity: .55;
    filter: blur(2px) saturate(1.3) hue-rotate(-10deg);
}
html[data-theme="dark"] .hero-3 .hero-shape-2 img {
    opacity: .08;
    filter: sepia(1) saturate(6) hue-rotate(220deg) brightness(1.2);
}
html[data-theme="dark"] .hero-3 .hero-content .title { text-shadow: 0 0 60px rgba(139, 61, 255, .35); }
html[data-theme="dark"] .hero-3 .hero-thumb-area .content p { color: #C3C5D0; }
html[data-theme="dark"] .hero-3 .hero-thumb-area .hero-thumb img { box-shadow: 0 0 0 1px var(--glass-line), 0 30px 80px rgba(139, 61, 255, .25); }
html[data-theme="dark"] .fx-hud { background: rgba(255, 255, 255, .03); box-shadow: none; }

/* Skills and work experience */
html[data-theme="dark"] .comprehensive-items .expertise-icon i { filter: drop-shadow(0 0 10px rgba(147, 242, 3, .6)); }
html[data-theme="dark"] .comprehensive-items .skill-tags span {
    border-color: rgba(147, 242, 3, .25) !important;
    background: rgba(147, 242, 3, .04);
}
html[data-theme="dark"] .comprehensive-items .skill-tags span:hover {
    color: #05060A;
    background: var(--neon);
    border-color: var(--neon) !important;
}
html[data-theme="dark"] .work-positions-items::before {
    background: linear-gradient(90deg, rgba(147, 242, 3, .10), rgba(139, 61, 255, .16) 60%, rgba(139, 61, 255, .05));
    border-color: rgba(147, 242, 3, .25);
    box-shadow: inset 3px 0 0 var(--neon), 0 0 40px rgba(139, 61, 255, .15);
}
html[data-theme="dark"] .work-positions-items .content ul li { color: #B5B8C5; }
html[data-theme="dark"] .work-positions-items:hover .content ul li,
html[data-theme="dark"] .work-positions-items.active .content ul li { color: #D9DBE3; }

/* Tool icons whose light-theme shades would vanish on a dark page */
html[data-theme="dark"] .brand-image[style*="#607078"] { --c: #8FA4AE !important; }
html[data-theme="dark"] .brand-image[style*="#1F2328"] { --c: #FCC624 !important; }
html[data-theme="dark"] .brand-image[style*="#E8C900"] { --c: #F7DF1E !important; }
html[data-theme="dark"] .brand-image[style*="#087EA4"] { --c: #61DAFB !important; }
html[data-theme="dark"] .brand-items .brand-image:hover .tech-icon { filter: drop-shadow(0 0 14px var(--c, var(--neon))); }

/* Cards */
html[data-theme="dark"] .process-box-items-3 { background-color: rgba(12, 13, 20, .9); }
html[data-theme="dark"] .cert-card .cert-thumb,
html[data-theme="dark"] .project-thumb { background: #0B0C12; }
html[data-theme="dark"] .cert-card .issuer { color: var(--neon); }
html[data-theme="dark"] .cert-card .verify:hover { color: var(--neon); }
html[data-theme="dark"] .cert-list-item:hover {
    background-color: rgba(147, 242, 3, .06);
    border-color: rgba(147, 242, 3, .45);
    box-shadow: 0 0 24px rgba(147, 242, 3, .12);
}
html[data-theme="dark"] .project-filter { background: rgba(255, 255, 255, .04); color: #C9CBD6; }
html[data-theme="dark"] .project-filter .count { background: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .project-filter:hover { color: var(--neon); border-color: rgba(147, 242, 3, .5); }
html[data-theme="dark"] .project-filter.is-active { color: #05060A; background: var(--neon); border-color: var(--neon); }
html[data-theme="dark"] .project-filter.is-active .count { background: rgba(0, 0, 0, .15); }
html[data-theme="dark"] .project-card:hover,
html[data-theme="dark"] .cert-card:hover { border-color: rgba(147, 242, 3, .45); }
html[data-theme="dark"] .project-role { color: #D9DBE3; }
html[data-theme="dark"] .project-status.is-progress { color: #B98CFF; border-color: rgba(139, 61, 255, .5); }
html[data-theme="dark"] .project-tags span {
    color: #C9CBD6;
    border-color: rgba(147, 242, 3, .25);
    background: rgba(147, 242, 3, .04);
}
html[data-theme="dark"] .project-link,
html[data-theme="dark"] .project-link:hover { color: var(--neon); }

/* Contact */
html[data-theme="dark"] .contact-content-3 .select-service-area .select-service .theme-btn {
    background-color: rgba(255, 255, 255, .04);
    color: #C9CBD6;
}
html[data-theme="dark"] .contact-content-3 .select-service-area .select-service .theme-btn:hover,
html[data-theme="dark"] .contact-content-3 .select-service-area .select-service .theme-btn.active,
html[data-theme="dark"] .contact-content-3 .select-service-area .select-service .theme-btn.is-selected {
    background-color: var(--neon);
    color: #05060A;
}
html[data-theme="dark"] .contact-content-3 .contact-form-box .form-clt input,
html[data-theme="dark"] .contact-content-3 .contact-form-box .form-clt textarea { background: rgba(255, 255, 255, .04); }
html[data-theme="dark"] .contact-content-3 .contact-form-box .form-clt input::placeholder,
html[data-theme="dark"] .contact-content-3 .contact-form-box .form-clt textarea::placeholder { color: #6E7180; }
html[data-theme="dark"] .contact-thumb-3 img { box-shadow: 0 0 0 1px var(--glass-line), 0 30px 80px rgba(139, 61, 255, .2); }

/* Cursor and back to top */
html[data-theme="dark"] .cursor-inner { background-color: var(--neon); box-shadow: 0 0 10px var(--neon); }
html[data-theme="dark"] .cursor-outer { border-color: var(--neon); background-color: rgba(147, 242, 3, .15); }
html[data-theme="dark"] .back-to-top { box-shadow: 0 0 20px rgba(147, 242, 3, .35); }

@media (prefers-reduced-motion: reduce) {
    .fx-theme-toggle i { transition: none; }
}