/* =====================================================================
   R2Win — Premium Polish Layer v2
   Loads LAST. Dramatic typography, animated gradient mesh background,
   floating orbs, marquee strip, 3D tilt cards, magnetic buttons,
   vertical sun/moon theme toggle, full light-mode support.
   ===================================================================== */

:root {
    /* Brand */
    --r2-gold         : #FBC549;
    --r2-gold-soft    : #FFE082;
    --r2-gold-deep   : #E0A800;
    --r2-magenta      : #FF3D81;
    --r2-violet       : #6C5CFF;
    --r2-cyan         : #22D3EE;

    /* Surfaces (dark default) */
    --r2-ink          : #08080B;
    --r2-ink-2        : #11121A;
    --r2-surface      : rgba(255, 255, 255, 0.03);
    --r2-surface-2    : rgba(255, 255, 255, 0.06);
    --r2-glass        : rgba(15, 15, 22, 0.55);
    --r2-text         : #F5F5F4;
    --r2-text-dim     : rgba(245, 245, 244, 0.72);
    --r2-line         : rgba(255, 255, 255, 0.08);
    --r2-line-strong  : rgba(255, 255, 255, 0.18);

    /* Gradients */
    --r2-grad-gold    : linear-gradient(135deg, #FFE082 0%, #FBC549 45%, #E0A800 100%);
    --r2-grad-aurora  : linear-gradient(120deg, #FBC549 0%, #FF3D81 35%, #6C5CFF 65%, #22D3EE 100%);
    --r2-grad-sheen   : linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);

    /* Shadows */
    --r2-shadow-sm    : 0 4px 12px rgba(0,0,0,0.20);
    --r2-shadow-md    : 0 14px 40px -10px rgba(0,0,0,0.45);
    --r2-shadow-lg    : 0 30px 80px -20px rgba(0,0,0,0.55), 0 10px 30px -10px rgba(0,0,0,0.35);
    --r2-glow-gold    : 0 0 0 1px rgba(251,197,73,0.25), 0 18px 48px -16px rgba(251,197,73,0.55);
    --r2-glow-aurora  : 0 0 0 1px rgba(255,255,255,0.10), 0 18px 60px -10px rgba(108,92,255,0.45);

    /* Motion */
    --r2-ease         : cubic-bezier(0.22, 1, 0.36, 1);
    --r2-ease-spring  : cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- LIGHT MODE ---------- */
body.light-mode {
    --r2-ink          : #F7F6F1;
    --r2-ink-2        : #FFFFFF;
    --r2-surface      : rgba(11, 11, 14, 0.03);
    --r2-surface-2    : rgba(11, 11, 14, 0.06);
    --r2-glass        : rgba(255, 255, 255, 0.65);
    --r2-text         : #131321;
    --r2-text-dim     : rgba(19, 19, 33, 0.7);
    --r2-line         : rgba(11, 11, 14, 0.08);
    --r2-line-strong  : rgba(11, 11, 14, 0.18);

    background: var(--r2-ink) !important;
    color: var(--r2-text) !important;
}
body.light-mode,
body.light-mode .hero,
body.light-mode section,
body.light-mode .main-header .header-sticky,
body.light-mode .footer,
body.light-mode .main-footer,
body.light-mode footer.footer { color: var(--r2-text) !important; }

body.light-mode .hero { background: linear-gradient(180deg, #FFF7E0, #F7F6F1) !important; }
body.light-mode .hero::before {
    background:
        radial-gradient(60% 50% at 20% 30%, rgba(251,197,73,0.30) 0%, transparent 60%),
        radial-gradient(50% 40% at 80% 70%, rgba(108,92,255,0.18) 0%, transparent 65%),
        linear-gradient(180deg, rgba(255,255,255,0.0), rgba(255,255,255,0.0)) !important;
}
body.light-mode .hero-content .section-title h1,
body.light-mode .hero-content .section-title h2,
body.light-mode .hero-content p,
body.light-mode .hero-description {
    color: var(--r2-text) !important;
    text-shadow: none !important;
}
body.light-mode .section-title h1,
body.light-mode .section-title h2,
body.light-mode .section-title p,
body.light-mode h1, body.light-mode h2, body.light-mode h3,
body.light-mode h4, body.light-mode h5, body.light-mode h6,
body.light-mode p, body.light-mode li, body.light-mode a { color: var(--r2-text); }
body.light-mode section { background: var(--r2-ink) !important; }
body.light-mode .footer,
body.light-mode .main-footer,
body.light-mode footer.footer { background: linear-gradient(180deg, #FFFFFF, #F1EFE6) !important; }
body.light-mode .navbar-nav .nav-link { color: var(--r2-text) !important; }
body.light-mode .navbar-nav .submenu > ul {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: var(--r2-line);
}
body.light-mode .navbar-nav .submenu > ul li a { color: var(--r2-text) !important; }
body.light-mode .form-control,
body.light-mode input, body.light-mode textarea, body.light-mode select {
    background: rgba(11,11,14,0.04) !important;
    color: var(--r2-text) !important;
    border-color: var(--r2-line-strong) !important;
}
body.light-mode ::placeholder { color: rgba(19,19,33,0.45) !important; }
body.light-mode ::-webkit-scrollbar-track { background: #ece9dc; }
body.light-mode body::before { opacity: 0.6; }
body.light-mode .preloader { background: radial-gradient(circle at center, #fff7e0, #f7f6f1 80%) !important; }

/* ---------- Global rhythm & smoothing ---------- */
html { scroll-behavior: smooth; }
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: 0.005em;
    transition: background 0.6s var(--r2-ease), color 0.6s var(--r2-ease);
}
*, *::before, *::after { transition-timing-function: var(--r2-ease); }

::selection      { background: var(--r2-gold); color: #0B0B0E; }
::-moz-selection { background: var(--r2-gold); color: #0B0B0E; }

::-webkit-scrollbar              { width: 10px; height: 10px; }
::-webkit-scrollbar-track        { background: #0a0a0d; }
::-webkit-scrollbar-thumb        { background: linear-gradient(180deg, var(--r2-gold), var(--r2-magenta)); border-radius: 10px; border: 2px solid #0a0a0d; }
::-webkit-scrollbar-thumb:hover  { background: linear-gradient(180deg, var(--r2-gold-soft), var(--r2-gold)); }

a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--r2-gold);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ---------- Ambient animated gradient mesh (fixed behind everything) ---------- */
body::before {
    content: "";
    position: fixed;
    inset: -10%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(40% 30% at 15% 20%, rgba(251,197,73,0.18), transparent 60%),
        radial-gradient(38% 28% at 85% 25%, rgba(255,61,129,0.14), transparent 60%),
        radial-gradient(45% 35% at 50% 90%, rgba(108,92,255,0.16), transparent 60%),
        radial-gradient(35% 25% at 80% 75%, rgba(34,211,238,0.10), transparent 60%);
    animation: r2-mesh 22s linear infinite;
    filter: blur(20px);
    opacity: 0.9;
}
@keyframes r2-mesh {
    0%   { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
    50%  { transform: translate3d(2%,-2%,0) rotate(180deg) scale(1.1); }
    100% { transform: translate3d(0,0,0) rotate(360deg) scale(1); }
}

/* Grain overlay for texture (SVG noise) */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: 0.35;
    mix-blend-mode: overlay;
}
body.light-mode::after { opacity: 0.15; mix-blend-mode: multiply; }

/* Keep page content above ambient layers */
.preloader, .main-header, main, section, footer, .footer, .main-footer { position: relative; z-index: 2; }

/* ---------- Floating orbs (decoration) ---------- */
.r2-orbs {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.r2-orb {
    position: absolute;
    width: 380px; height: 380px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    will-change: transform;
}
.r2-orb.o1 { top: -120px; left: -120px; background: radial-gradient(circle, #FBC549, transparent 70%); animation: r2-float-a 18s ease-in-out infinite; }
.r2-orb.o2 { top: 30%; right: -160px; background: radial-gradient(circle, #FF3D81, transparent 70%); animation: r2-float-b 24s ease-in-out infinite; }
.r2-orb.o3 { bottom: -180px; left: 25%; background: radial-gradient(circle, #6C5CFF, transparent 70%); animation: r2-float-c 28s ease-in-out infinite; }
@keyframes r2-float-a { 0%,100%{transform:translate(0,0)} 50%{transform:translate(60px,80px)} }
@keyframes r2-float-b { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-80px,40px)} }
@keyframes r2-float-c { 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,-100px)} }

/* ---------- Headings: dramatic typography ---------- */
h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.02em;
    font-weight: 800;
}
h1 { line-height: 1.02; font-size: clamp(2.6rem, 6.4vw, 5.8rem); }
h2 { line-height: 1.08; font-size: clamp(2.0rem, 4.4vw, 3.8rem); }
h3 { line-height: 1.18; }

.section-title { position: relative; }

/* Eyebrow chip */
.section-title h3 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px 9px 28px;
    border: 1px solid var(--r2-line-strong);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 12.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    position: relative;
    overflow: hidden;
}
.section-title h3::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--r2-grad-sheen);
    transform: translateX(-120%) skewX(-22deg);
    animation: r2-chip-sheen 4.5s var(--r2-ease) infinite;
}
@keyframes r2-chip-sheen {
    0%, 60%   { transform: translateX(-120%) skewX(-22deg); }
    100%      { transform: translateX(120%)  skewX(-22deg); }
}

/* Animated aurora gradient text on highlighted spans */
.section-title h1 span,
.section-title h2 span,
.hero-content .section-title h1 span,
.hero-content .section-title h2 span,
.text-gradient {
    background: var(--r2-grad-aurora);
    background-size: 280% 280%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
    animation: r2-aurora-flow 8s var(--r2-ease) infinite;
    filter: drop-shadow(0 6px 28px rgba(251, 197, 73, 0.18));
}
@keyframes r2-aurora-flow {
    0%   { background-position:   0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position:   0% 50%; }
}

/* Decorative underline on H2 inside section-title */
.section-title h2::after {
    content: "";
    display: block;
    width: 0;
    height: 4px;
    margin-top: 14px;
    background: var(--r2-grad-aurora);
    background-size: 200% 200%;
    border-radius: 4px;
    animation: r2-aurora-flow 6s linear infinite, r2-draw-line 1.4s var(--r2-ease) forwards 0.2s;
    transform-origin: left center;
}
.section-title.text-center h2::after { margin-left: auto; margin-right: auto; }
@keyframes r2-draw-line {
    from { width: 0; }
    to   { width: 92px; }
}

/* Letter-by-letter hover wave on big titles (opt-in via .r2-split) */
.r2-split .r2-char {
    display: inline-block;
    transition: transform 0.4s var(--r2-ease-spring), color 0.4s var(--r2-ease);
}
.r2-split:hover .r2-char:nth-child(odd)  { transform: translateY(-6px) rotate(-2deg); color: var(--r2-gold); }
.r2-split:hover .r2-char:nth-child(even) { transform: translateY(-3px) rotate(2deg); color: var(--r2-magenta); }

/* ---------- Premium buttons (gradient + sheen + spring) ---------- */
.btn-default {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: 999px;
    padding: 16px 36px;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: var(--r2-grad-gold);
    color: #0B0B0E !important;
    border: 0;
    box-shadow: var(--r2-shadow-md), inset 0 1px 0 rgba(255,255,255,0.4);
    transition: transform 0.45s var(--r2-ease-spring),
                box-shadow 0.45s var(--r2-ease),
                filter 0.3s var(--r2-ease);
}
.btn-default:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: var(--r2-glow-gold), 0 24px 60px -18px rgba(251, 197, 73, 0.6);
    filter: saturate(1.1);
}
.btn-default::after {
    content: "";
    position: absolute;
    top: 0; left: -120%;
    width: 60%;
    height: 100%;
    background: var(--r2-grad-sheen);
    transform: skewX(-22deg);
    z-index: -1;
    transition: left 0.7s var(--r2-ease);
}
.btn-default:hover::after { left: 130%; }

/* Header CTA pulse */
.btn-popup,
.header-btn .btn-popup {
    transition: transform 0.4s var(--r2-ease-spring), box-shadow 0.4s var(--r2-ease);
    box-shadow: var(--r2-shadow-sm), 0 0 0 0 rgba(251,197,73, 0.6);
    animation: r2-pulse 2.4s var(--r2-ease) infinite;
}
@keyframes r2-pulse {
    0%   { box-shadow: var(--r2-shadow-sm), 0 0 0 0 rgba(251,197,73, 0.55); }
    70%  { box-shadow: var(--r2-shadow-sm), 0 0 0 14px rgba(251,197,73, 0); }
    100% { box-shadow: var(--r2-shadow-sm), 0 0 0 0 rgba(251,197,73, 0); }
}
.btn-popup:hover { transform: rotate(12deg) scale(1.12); }

/* ---------- Header: dramatic, animated, glassmorphic ---------- */
.main-header { z-index: 100 !important; }
.main-header .header-sticky {
    position: relative;
    transition: background 0.4s var(--r2-ease), backdrop-filter 0.4s var(--r2-ease), box-shadow 0.4s var(--r2-ease), padding 0.4s var(--r2-ease);
}
.main-header .header-sticky::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--r2-glass);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s var(--r2-ease);
}
.main-header .header-sticky::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--r2-gold), var(--r2-magenta), var(--r2-violet), transparent);
    background-size: 200% 100%;
    animation: r2-aurora-flow 10s linear infinite;
    opacity: 0;
    transition: opacity 0.4s var(--r2-ease);
}
.main-header.sticky .header-sticky::before,
.main-header.sticky .header-sticky::after,
.main-header .header-sticky.sticky::before,
.main-header .header-sticky.sticky::after,
.main-header .header-sticky.is-sticky::before,
.main-header .header-sticky.is-sticky::after,
body.is-scrolled .main-header .header-sticky::before,
body.is-scrolled .main-header .header-sticky::after { opacity: 1; }

body.is-scrolled .main-header .header-sticky { box-shadow: 0 12px 30px -14px rgba(0,0,0,0.55); }

/* Logo zoom on hover */
.main-header .navbar-brand img {
    transition: transform 0.5s var(--r2-ease-spring), filter 0.5s var(--r2-ease);
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35));
}
.main-header .navbar-brand:hover img { transform: scale(1.08) rotate(-2deg); filter: drop-shadow(0 8px 22px rgba(251,197,73,0.45)); }

/* Nav links — animated underline + glow */
.navbar-nav .nav-link {
    position: relative;
    padding: 12px 4px !important;
    margin: 0 14px;
    font-weight: 600;
    transition: color 0.3s var(--r2-ease), letter-spacing 0.3s var(--r2-ease);
}
.navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 50%; right: 50%;
    bottom: 4px;
    height: 2px;
    background: var(--r2-grad-aurora);
    background-size: 200% 200%;
    border-radius: 2px;
    transition: left 0.4s var(--r2-ease), right 0.4s var(--r2-ease);
    animation: r2-aurora-flow 6s linear infinite;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-item.active > .nav-link { color: var(--r2-gold) !important; letter-spacing: 0.04em; }
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-item.active > .nav-link::after { left: 0; right: 0; }

/* Products submenu — glass card */
.navbar-nav .submenu > ul {
    background: rgba(15, 15, 22, 0.94) !important;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid var(--r2-line);
    border-radius: 16px !important;
    box-shadow: var(--r2-shadow-lg);
    padding: 10px !important;
    overflow: hidden;
    min-width: 280px !important;
    width: max-content !important;
    white-space: nowrap;
    transform: translateY(8px);
    opacity: 0;
    transition: opacity 0.25s var(--r2-ease), transform 0.3s var(--r2-ease);
}
.navbar-nav .submenu > ul li { white-space: nowrap; }
.navbar-nav .submenu > ul li a { white-space: nowrap !important; }
body.light-mode .navbar-nav .submenu > ul { background: rgba(255,255,255,0.98) !important; }
.navbar-nav .submenu:hover > ul,
.navbar-nav .submenu > ul:hover {
    opacity: 1;
    transform: translateY(0);
}
.navbar-nav .submenu > ul li a {
    border-radius: 10px;
    padding: 10px 14px !important;
    transition: background 0.25s var(--r2-ease), color 0.25s var(--r2-ease), transform 0.25s var(--r2-ease), padding-left 0.25s var(--r2-ease);
}
.navbar-nav .submenu > ul li a:hover {
    background: linear-gradient(135deg, rgba(251,197,73,0.18), rgba(255,61,129,0.08));
    color: var(--r2-gold) !important;
    transform: translateX(6px);
    padding-left: 20px !important;
}

/* Top marquee strip (announcement bar) */
.r2-marquee {
    position: relative;
    display: flex;
    overflow: hidden;
    padding: 10px 0;
    background: linear-gradient(90deg, rgba(251,197,73,0.10), rgba(108,92,255,0.10), rgba(255,61,129,0.10));
    border-bottom: 1px solid var(--r2-line);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 12px;
    z-index: 99;
}
.r2-marquee__track {
    display: flex;
    gap: 48px;
    flex-shrink: 0;
    animation: r2-marquee 32s linear infinite;
    padding-right: 48px;
    white-space: nowrap;
}
.r2-marquee__track span { color: var(--r2-text-dim); }
.r2-marquee__track .dot { color: var(--r2-gold); }
.r2-marquee:hover .r2-marquee__track { animation-play-state: paused; }
@keyframes r2-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ---------- Hero polish ---------- */
.hero::before {
    background:
        radial-gradient(60% 50% at 20% 30%, rgba(251,197,73,0.20) 0%, transparent 60%),
        radial-gradient(50% 40% at 80% 70%, rgba(255,61,129,0.14) 0%, transparent 65%),
        radial-gradient(40% 30% at 50% 100%, rgba(108,92,255,0.16) 0%, transparent 65%),
        linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.85)) !important;
}
.hero-content .section-title h1 {
    text-shadow: 0 8px 60px rgba(0, 0, 0, 0.45);
}
.hero-image img {
    border-radius: 24px;
    box-shadow: var(--r2-shadow-lg);
    transition: transform 0.7s var(--r2-ease), box-shadow 0.7s var(--r2-ease);
}
.hero-image:hover img {
    transform: scale(1.04) translateY(-4px);
    box-shadow: var(--r2-glow-aurora), var(--r2-shadow-lg);
}
.hero-image-tag-1,
.hero-image-tag-2 a {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--r2-line-strong);
    box-shadow: var(--r2-shadow-sm);
    transition: transform 0.4s var(--r2-ease-spring), box-shadow 0.4s var(--r2-ease);
}
.hero-image-tag-1:hover,
.hero-image-tag-2 a:hover {
    transform: translateY(-4px) scale(1.06);
    box-shadow: var(--r2-glow-gold);
}
.hero-description {
    font-size: 18px;
    line-height: 1.65;
    max-width: 620px;
    color: rgba(255, 255, 255, 0.85);
}
body.light-mode .hero-description { color: var(--r2-text-dim); }

/* Mouse-tracked spotlight on hero (uses --mx / --my set by JS) */
.hero { --mx: 50%; --my: 50%; }
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(280px circle at var(--mx) var(--my), rgba(251,197,73,0.18), transparent 60%);
    transition: opacity 0.4s var(--r2-ease);
    opacity: 0;
    z-index: 1;
}
.hero:hover::after { opacity: 1; }

/* ---------- 3D tilt cards ---------- */
.service-item,
.service-item-list,
.about-image-box,
.team-item,
.blog-item,
.pricing-box,
.fun-fact-item,
.testimonial-item {
    position: relative;
    border-radius: 22px !important;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border: 1px solid var(--r2-line);
    box-shadow: var(--r2-shadow-sm);
    transform-style: preserve-3d;
    transition: transform 0.5s var(--r2-ease),
                border-color 0.45s var(--r2-ease),
                box-shadow 0.55s var(--r2-ease),
                background 0.55s var(--r2-ease);
}
body.light-mode .service-item,
body.light-mode .service-item-list,
body.light-mode .about-image-box,
body.light-mode .team-item,
body.light-mode .blog-item,
body.light-mode .pricing-box,
body.light-mode .fun-fact-item,
body.light-mode .testimonial-item {
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(247,246,241,1));
    border-color: var(--r2-line);
    box-shadow: 0 10px 36px -16px rgba(11,11,14,0.18);
}

.service-item:hover,
.service-item-list:hover,
.about-image-box:hover,
.team-item:hover,
.blog-item:hover,
.pricing-box:hover,
.fun-fact-item:hover,
.testimonial-item:hover {
    transform: translateY(-12px) rotateX(2deg) rotateY(-2deg);
    border-color: rgba(251, 197, 73, 0.45);
    box-shadow: var(--r2-glow-gold), var(--r2-shadow-md);
    background: linear-gradient(180deg, rgba(251,197,73,0.08), rgba(108,92,255,0.04));
}
body.light-mode .service-item:hover,
body.light-mode .team-item:hover,
body.light-mode .blog-item:hover {
    background: linear-gradient(180deg, #FFF7E0, #FFFFFF);
}

/* Aurora top edge that draws in */
.service-item::after,
.team-item::after,
.blog-item::after,
.pricing-box::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    height: 3px;
    width: 0;
    background: var(--r2-grad-aurora);
    background-size: 200% 200%;
    animation: r2-aurora-flow 5s linear infinite;
    transition: width 0.65s var(--r2-ease);
}
.service-item:hover::after,
.team-item:hover::after,
.blog-item:hover::after,
.pricing-box:hover::after { width: 100%; }

/* Service icon polish */
.service-body .icon-box {
    width: 68px;
    height: 68px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, rgba(251,197,73,0.18), rgba(108,92,255,0.06));
    border: 1px solid rgba(251,197,73,0.25);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    transition: transform 0.5s var(--r2-ease-spring), background 0.5s var(--r2-ease);
}
.service-item:hover .service-body .icon-box {
    transform: rotate(-8deg) scale(1.1);
    background: linear-gradient(160deg, rgba(251,197,73,0.32), rgba(255,61,129,0.10));
}

/* Fun fact */
.fun-facts img,
.fun-fact-item img {
    max-width: 80px;
    margin-bottom: 18px;
    filter: drop-shadow(0 8px 20px rgba(251, 197, 73, 0.35));
    transition: transform 0.5s var(--r2-ease-spring);
}
.fun-fact-item:hover img { transform: translateY(-8px) scale(1.1) rotate(-6deg); }

/* ---------- Forms ---------- */
.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid var(--r2-line-strong) !important;
    border-radius: 14px !important;
    color: #fff !important;
    padding: 14px 18px !important;
    transition: border-color 0.3s var(--r2-ease), background 0.3s var(--r2-ease), box-shadow 0.3s var(--r2-ease);
}
.form-control:focus,
input:focus, textarea:focus, select:focus {
    border-color: var(--r2-gold) !important;
    background: rgba(251,197,73,0.05) !important;
    box-shadow: 0 0 0 4px rgba(251,197,73,0.18) !important;
    outline: none !important;
}
::placeholder { color: rgba(255,255,255,0.45) !important; }

/* ---------- Footer ---------- */
.footer, .main-footer, footer.footer {
    position: relative;
    background: linear-gradient(180deg, #0a0a0d 0%, #050507 100%) !important;
    border-top: 1px solid var(--r2-line);
}
.footer::before, .main-footer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--r2-gold), var(--r2-magenta), var(--r2-violet), transparent);
    background-size: 200% 100%;
    animation: r2-aurora-flow 8s linear infinite;
    opacity: 0.7;
}
.footer a, .main-footer a, footer a {
    transition: color 0.3s var(--r2-ease), transform 0.3s var(--r2-ease);
    display: inline-block;
}
.footer a:hover, .main-footer a:hover, footer a:hover {
    color: var(--r2-gold) !important;
    transform: translateX(4px);
}

/* Social icons */
.header-social-links ul li a,
.footer .social-links a,
.sidebar-social-links ul li a {
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--r2-line-strong);
    transition: transform 0.4s var(--r2-ease-spring), background 0.4s var(--r2-ease), color 0.4s var(--r2-ease), border-color 0.4s var(--r2-ease);
}
.header-social-links ul li a:hover,
.footer .social-links a:hover,
.sidebar-social-links ul li a:hover {
    background: var(--r2-grad-gold);
    color: #0B0B0E !important;
    border-color: transparent;
    transform: translateY(-4px) rotate(-10deg) scale(1.08);
    box-shadow: var(--r2-glow-gold);
}

/* Section divider */
section { position: relative; }
section + section::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    width: 220px;
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--r2-line-strong), transparent);
    pointer-events: none;
}

/* Preloader */
.preloader { background: radial-gradient(circle at center, #15151b 0%, #050507 80%) !important; }

/* Scroll reveal */
@media (prefers-reduced-motion: no-preference) {
    [data-reveal] {
        opacity: 0;
        transform: translateY(28px);
        transition: opacity 0.9s var(--r2-ease), transform 0.9s var(--r2-ease);
    }
    [data-reveal].in-view { opacity: 1; transform: none; }
}

/* Image polish */
img { image-rendering: -webkit-optimize-contrast; }
.about-image img,
.service-image img,
.team-image img,
.blog-image img {
    border-radius: 18px;
    transition: transform 0.7s var(--r2-ease), filter 0.7s var(--r2-ease);
}
.service-item:hover .service-image img,
.team-item:hover .team-image img,
.blog-item:hover .blog-image img {
    transform: scale(1.08);
    filter: saturate(1.15) contrast(1.05);
}

/* ============================================================
   VERTICAL THEME TOGGLE — sun/moon pill on the right edge
   ============================================================ */
.r2-theme-toggle {
    position: fixed;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    z-index: 9999;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    width: 56px;
    height: 124px;
    border-radius: 36px;
    background: linear-gradient(180deg, #1a1a26, #0a0a10);
    border: 1px solid var(--r2-line-strong);
    box-shadow: var(--r2-shadow-md), inset 0 1px 0 rgba(255,255,255,0.06);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    overflow: hidden;
    transition: transform 0.5s var(--r2-ease-spring), box-shadow 0.4s var(--r2-ease), border-color 0.4s var(--r2-ease);
}
.r2-theme-toggle:hover {
    transform: translateY(-50%) scale(1.06);
    box-shadow: var(--r2-glow-gold), var(--r2-shadow-md);
    border-color: var(--r2-gold);
}
.r2-theme-toggle.is-dragging {
    cursor: grabbing !important;
    transition: none !important;
    box-shadow: var(--r2-glow-gold), 0 30px 60px -16px rgba(0,0,0,0.6) !important;
    border-color: var(--r2-gold) !important;
}
.r2-theme-toggle.is-dragging * { pointer-events: none; }
/* When dragged (custom transform applied), neutralise the hover translateY */
.r2-theme-toggle[style*="left"]:hover { transform: none !important; }
.r2-theme-toggle::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 30px;
    background: radial-gradient(circle at 50% 20%, rgba(108,92,255,0.20), transparent 60%),
                radial-gradient(circle at 50% 80%, rgba(251,197,73,0.20), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.r2-theme-toggle .r2-tt-track {
    position: absolute;
    inset: 8px;
    border-radius: 32px;
    background: linear-gradient(180deg, rgba(108,92,255,0.10), rgba(251,197,73,0.10));
    z-index: 0;
}
.r2-theme-toggle .r2-tt-thumb {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 8px;
    height: 40px;
    border-radius: 50%;
    background: var(--r2-grad-aurora);
    background-size: 200% 200%;
    animation: r2-aurora-flow 6s linear infinite;
    box-shadow: 0 8px 22px rgba(251,197,73,0.45), inset 0 1px 0 rgba(255,255,255,0.4);
    transition: transform 0.6s var(--r2-ease-spring), background-position 0.6s var(--r2-ease);
    z-index: 2;
}
.r2-theme-toggle .r2-tt-icon {
    width: 20px; height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.6);
    z-index: 1;
    transition: color 0.4s var(--r2-ease), transform 0.5s var(--r2-ease);
}
.r2-theme-toggle .r2-tt-icon svg { width: 18px; height: 18px; display: block; }
.r2-theme-toggle .r2-tt-icon.sun  { margin-top: 6px; }
.r2-theme-toggle .r2-tt-icon.moon { margin-bottom: 6px; }

/* States */
body:not(.light-mode) .r2-theme-toggle .r2-tt-thumb { transform: translateY(60px); }
body:not(.light-mode) .r2-theme-toggle .r2-tt-icon.moon { color: #0B0B0E; transform: scale(1.15); }
body:not(.light-mode) .r2-theme-toggle .r2-tt-icon.sun  { color: rgba(255,255,255,0.45); }

body.light-mode .r2-theme-toggle {
    background: linear-gradient(180deg, #ffffff, #f1efe6);
    border-color: rgba(11,11,14,0.15);
}
body.light-mode .r2-theme-toggle .r2-tt-thumb { transform: translateY(0); }
body.light-mode .r2-theme-toggle .r2-tt-icon.sun  { color: #0B0B0E; transform: scale(1.15); }
body.light-mode .r2-theme-toggle .r2-tt-icon.moon { color: rgba(11,11,14,0.40); }

/* Vertical label */
.r2-theme-toggle .r2-tt-label {
    position: absolute;
    left: -52px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: right center;
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--r2-text-dim);
    opacity: 0;
    transition: opacity 0.4s var(--r2-ease), transform 0.5s var(--r2-ease);
    pointer-events: none;
    white-space: nowrap;
}
.r2-theme-toggle:hover .r2-tt-label {
    opacity: 1;
    transform: translateY(-50%) rotate(-90deg) translateX(-6px);
}

@media (max-width: 640px) {
    .r2-theme-toggle { right: 10px; width: 48px; height: 108px; }
    .r2-theme-toggle .r2-tt-thumb { height: 34px; }
    body:not(.light-mode) .r2-theme-toggle .r2-tt-thumb { transform: translateY(54px); }
    .r2-theme-toggle .r2-tt-label { display: none; }
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 991px) {
    .navbar-nav .nav-link { margin: 0 6px; }
    .btn-default { padding: 14px 26px; }
    .r2-orb { width: 280px; height: 280px; filter: blur(60px); }
}
@media (max-width: 768px) {
    h1 { font-size: clamp(2rem, 8vw, 3rem); }
    .section-title h3 { font-size: 11.5px; padding: 7px 14px 7px 22px; }
    .hero-description { font-size: 16px; }
    .service-item, .team-item, .blog-item { border-radius: 16px !important; }
    body::before { filter: blur(40px); }
}

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

/* =====================================================================
   HEADER v2 — taller marquee, glassy bar always-on, logo halo,
   pill-hover nav, gold-gradient CTA, refined social icons
   ===================================================================== */

/* --- Marquee strip: taller, deeper, more premium --- */
.r2-marquee {
    padding: 12px 0;
    background:
        radial-gradient(50% 100% at 0% 50%, rgba(251,197,73,0.18), transparent 80%),
        radial-gradient(50% 100% at 100% 50%, rgba(255,61,129,0.18), transparent 80%),
        linear-gradient(90deg, #0a0a12, #11111c, #0a0a12);
    font-size: 12.5px;
    letter-spacing: 0.26em;
    border-top: 1px solid var(--r2-line);
    border-bottom: 1px solid var(--r2-line);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.04), inset 0 1px 0 rgba(255,255,255,0.04);
}
.r2-marquee::before,
.r2-marquee::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 120px;
    pointer-events: none;
    z-index: 2;
}
.r2-marquee::before { left: 0;  background: linear-gradient(90deg, #0a0a12, transparent); }
.r2-marquee::after  { right: 0; background: linear-gradient(270deg, #0a0a12, transparent); }
.r2-marquee__track span:not(.dot) {
    background: linear-gradient(90deg, #ffffff 0%, #ffe082 50%, #ffffff 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 800;
}
.r2-marquee__track .dot {
    color: var(--r2-gold);
    filter: drop-shadow(0 0 6px rgba(251,197,73,0.7));
    transform: translateY(-1px);
    font-size: 14px;
}
body.light-mode .r2-marquee {
    background:
        radial-gradient(50% 100% at 0% 50%, rgba(251,197,73,0.22), transparent 80%),
        radial-gradient(50% 100% at 100% 50%, rgba(108,92,255,0.18), transparent 80%),
        linear-gradient(90deg, #fffaee, #fff7e0, #fffaee);
}
body.light-mode .r2-marquee::before { background: linear-gradient(90deg, #fffaee, transparent); }
body.light-mode .r2-marquee::after  { background: linear-gradient(270deg, #fffaee, transparent); }
body.light-mode .r2-marquee__track span:not(.dot) {
    background: linear-gradient(90deg, #131321 0%, #6C5CFF 50%, #131321 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- Header bar: glassy by default, not just on scroll --- */
.main-header .header-sticky {
    background: linear-gradient(180deg, rgba(11, 11, 18, 0.72), rgba(11, 11, 18, 0.55)) !important;
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow: 0 4px 20px -8px rgba(0,0,0,0.45);
    padding: 6px 0;
}
body.is-scrolled .main-header .header-sticky {
    background: linear-gradient(180deg, rgba(11, 11, 18, 0.88), rgba(11, 11, 18, 0.78)) !important;
    box-shadow: 0 14px 36px -16px rgba(0,0,0,0.65);
}
body.light-mode .main-header .header-sticky {
    background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.65)) !important;
    box-shadow: 0 4px 20px -8px rgba(11,11,14,0.18);
}
body.light-mode.is-scrolled .main-header .header-sticky {
    background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.86)) !important;
}

/* Aurora hairline under header — always on, brightens on scroll */
.main-header .header-sticky::after { opacity: 0.55 !important; }
body.is-scrolled .main-header .header-sticky::after { opacity: 1 !important; }

/* --- Logo: halo + frame --- */
.main-header .navbar-brand {
    position: relative;
    padding: 6px 14px !important;
    border-radius: 14px;
    transition: background 0.4s var(--r2-ease);
}
.main-header .navbar-brand::before {
    content: "";
    position: absolute;
    inset: -4px -10px;
    background: radial-gradient(60% 80% at 30% 50%, rgba(251,197,73,0.18), transparent 70%);
    filter: blur(10px);
    z-index: -1;
    opacity: 0.6;
    pointer-events: none;
}
.main-header .navbar-brand img {
    max-width: 140px !important;
    width: auto !important;
    height: 62px !important;
    object-fit: contain;
}
body.is-scrolled .main-header .navbar-brand img { height: 50px !important; }

/* --- Nav: no wrapping, pill hover, comfy spacing --- */
.navbar-nav { gap: 4px; align-items: center; }
.navbar-nav .nav-item { display: flex; align-items: center; }
.navbar-nav .nav-link {
    white-space: nowrap !important;
    padding: 10px 16px !important;
    margin: 0 !important;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    color: rgba(255,255,255,0.86) !important;
    transition: color 0.3s var(--r2-ease), background 0.3s var(--r2-ease);
}
body.light-mode .navbar-nav .nav-link { color: rgba(19,19,33,0.82) !important; }

.navbar-nav .nav-link:hover {
    background: linear-gradient(135deg, rgba(251,197,73,0.14), rgba(255,61,129,0.08));
    color: var(--r2-gold) !important;
}
body.light-mode .navbar-nav .nav-link:hover {
    background: linear-gradient(135deg, rgba(251,197,73,0.22), rgba(108,92,255,0.10));
    color: #131321 !important;
}

/* Aurora underline tucks inside the pill */
.navbar-nav .nav-link::after { bottom: 6px !important; height: 2px; }

/* Submenu caret: theme already renders one — don't add our own */
.navbar-nav .submenu > .nav-link::before { content: none !important; display: none !important; }

/* Restore the theme's FontAwesome chevron INLINE next to "Products"
   (my .nav-link::after underline overrides killed it; re-render it just
   for submenu triggers, and keep the underline for everyone else.) */
.navbar-nav .submenu > .nav-link::after {
    content: "\f107" !important;
    font-family: "FontAwesome", "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    display: inline-block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 0 8px !important;
    padding: 0 !important;
    background: none !important;
    color: inherit !important;
    transform: none !important;
    transition: transform 0.35s var(--r2-ease), color 0.3s var(--r2-ease) !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    border-radius: 0 !important;
    animation: none !important;
}
.navbar-nav .submenu:hover > .nav-link::after,
.navbar-nav .submenu:focus-within > .nav-link::after {
    transform: rotate(180deg) !important;
}

/* --- Header social cluster --- */
.header-social-box { gap: 14px; align-items: center; }
.header-social-links ul {
    display: flex;
    gap: 10px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    align-items: center;
}
.header-social-links ul li { margin: 0 !important; }
.header-social-links ul li a {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--r2-line-strong);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.85) !important;
    font-size: 14px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s var(--r2-ease-spring), background 0.4s var(--r2-ease), color 0.4s var(--r2-ease), border-color 0.4s var(--r2-ease), box-shadow 0.4s var(--r2-ease);
}
body.light-mode .header-social-links ul li a {
    background: rgba(11,11,14,0.04);
    color: rgba(19,19,33,0.85) !important;
    border-color: rgba(11,11,14,0.18);
}
.header-social-links ul li a:hover {
    background: var(--r2-grad-gold);
    color: #0B0B0E !important;
    border-color: transparent;
    transform: translateY(-3px) rotate(-10deg) scale(1.08);
    box-shadow: var(--r2-glow-gold);
}

/* --- CTA popup button: real gold gradient circle, no plain dark dot --- */
.header-btn .btn-popup {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--r2-grad-gold) !important;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0B0B0E !important;
    margin-left: 6px;
    box-shadow: 0 10px 24px -8px rgba(251,197,73,0.55), inset 0 1px 0 rgba(255,255,255,0.4), 0 0 0 0 rgba(251,197,73, 0.55);
    position: relative;
    overflow: hidden;
}
.header-btn .btn-popup::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(255,255,255,0.5), transparent 40%);
    mix-blend-mode: overlay;
    animation: r2-spin 6s linear infinite;
    pointer-events: none;
}
.header-btn .btn-popup img { width: 16px; height: 16px; filter: brightness(0); position: relative; z-index: 1; }
@keyframes r2-spin { to { transform: rotate(360deg); } }
.header-btn .btn-popup:hover { transform: rotate(90deg) scale(1.10); }

/* --- Subtle vertical divider between social cluster and CTA --- */
.header-social-box::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 22px;
    background: linear-gradient(180deg, transparent, var(--r2-line-strong), transparent);
    margin: 0 4px;
    align-self: center;
}

/* Header layout: nav centered, sockets balanced, wider container */
.main-header .navbar > .container,
.main-header > .header-sticky > .navbar > .container,
.main-header .container {
    max-width: 1480px !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
    align-items: center;
    gap: 24px;
}
.main-menu .navbar-nav { margin: 0 auto !important; gap: 6px; }
.navbar-nav .nav-link { padding: 10px 18px !important; font-size: 15.5px; }

@media (min-width: 1600px) {
    .main-header .navbar > .container,
    .main-header .container { max-width: 1600px !important; }
}
@media (max-width: 1199px) {
    .main-header .navbar > .container,
    .main-header .container { padding-left: 18px !important; padding-right: 18px !important; }
    .navbar-nav .nav-link { padding: 8px 12px !important; font-size: 14.5px; }
}

/* --- Sticky bar height --- */
.main-header .header-sticky { padding: 0 !important; }
.main-header .navbar { min-height: 88px; padding: 14px 0 !important; }
body.is-scrolled .main-header .navbar { min-height: 70px; padding: 10px 0 !important; }

/* --- Mobile tightening for header v2 --- */
@media (max-width: 1199px) {
    .navbar-nav .nav-link { padding: 8px 12px !important; font-size: 14px; }
    .header-btn .btn-popup { width: 44px; height: 44px; }
    .header-social-links ul li a { width: 36px; height: 36px; }
}
@media (max-width: 991px) {
    .main-header .navbar-brand img { max-width: 140px !important; }
}

/* =====================================================================
   LIGHT-MODE CONTRAST FIXES
   Force every text node to dark ink so nothing disappears on cream bg.
   Preserves gradient-text spans (they use background-clip + transparent
   fill — we ONLY target text-fill-color where it's currently `currentColor`).
   ===================================================================== */
body.light-mode,
body.light-mode p,
body.light-mode span,
body.light-mode li,
body.light-mode td,
body.light-mode label,
body.light-mode small,
body.light-mode blockquote,
body.light-mode .nav-link,
body.light-mode .footer-link,
body.light-mode .service-body p,
body.light-mode .service-body h2,
body.light-mode .service-body h3,
body.light-mode .service-body h4,
body.light-mode .about-content,
body.light-mode .about-content p,
body.light-mode .about-content h2,
body.light-mode .hero-description,
body.light-mode .hero-content p,
body.light-mode .footer h1, body.light-mode .footer h2,
body.light-mode .footer h3, body.light-mode .footer h4,
body.light-mode .footer p,  body.light-mode .footer li,
body.light-mode .footer a,
body.light-mode .main-footer h1, body.light-mode .main-footer h2,
body.light-mode .main-footer h3, body.light-mode .main-footer h4,
body.light-mode .main-footer p,  body.light-mode .main-footer li,
body.light-mode .main-footer a,
body.light-mode footer.footer h1, body.light-mode footer.footer h2,
body.light-mode footer.footer h3, body.light-mode footer.footer h4,
body.light-mode footer.footer p,  body.light-mode footer.footer li,
body.light-mode footer.footer a,
body.light-mode .fun-fact-item, body.light-mode .fun-fact-item *,
body.light-mode .service-item, body.light-mode .service-item *,
body.light-mode .testimonial-item, body.light-mode .testimonial-item *,
body.light-mode .team-item, body.light-mode .team-item *,
body.light-mode .blog-item, body.light-mode .blog-item *,
body.light-mode .pricing-box, body.light-mode .pricing-box *,
body.light-mode .header-contact-box, body.light-mode .header-contact-box * {
    color: #13131F !important;
}

/* Dim/sub-text in light mode stays softer */
body.light-mode .text-muted,
body.light-mode .hero-description,
body.light-mode .service-body p,
body.light-mode .about-content p,
body.light-mode .footer p,
body.light-mode .footer li,
body.light-mode .main-footer p,
body.light-mode .main-footer li,
body.light-mode footer.footer p,
body.light-mode footer.footer li {
    color: rgba(19, 19, 31, 0.72) !important;
}

/* Brand/accent items stay gold in light mode */
body.light-mode .nav-link:hover,
body.light-mode .footer a:hover,
body.light-mode .main-footer a:hover,
body.light-mode footer.footer a:hover,
body.light-mode .section-title h3 {
    color: var(--r2-gold-deep) !important;
}

/* Gradient-text spans must NOT be overridden (keep transparent fill) */
body.light-mode .section-title h1 span,
body.light-mode .section-title h2 span,
body.light-mode .hero-content .section-title h1 span,
body.light-mode .hero-content .section-title h2 span,
body.light-mode .text-gradient,
body.light-mode .r2-marquee__track span:not(.dot) {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

/* Eyebrow chip — re-skin for light bg */
body.light-mode .section-title h3 {
    background: linear-gradient(180deg, #ffffff, #f6f3e6) !important;
    border-color: rgba(11,11,14,0.12) !important;
    color: #6a4a00 !important;
}

/* Buttons stay readable */
body.light-mode .btn-default { color: #0B0B0E !important; }
body.light-mode .header-btn .btn-popup img { filter: brightness(0) !important; }

/* Inputs */
body.light-mode .form-control,
body.light-mode input, body.light-mode textarea, body.light-mode select {
    color: #13131F !important;
}

/* Hero overlay should be lighter in light mode so the foreground doesn't go grey */
body.light-mode .hero { background-image: none !important; }
body.light-mode .hero::before {
    background:
        radial-gradient(60% 50% at 20% 30%, rgba(251,197,73,0.35) 0%, transparent 60%),
        radial-gradient(50% 40% at 80% 70%, rgba(108,92,255,0.20) 0%, transparent 65%) !important;
}
body.light-mode .hero, body.light-mode .hero * { text-shadow: none !important; }

/* =====================================================================
   CLEANUPS (user-reported)
   1) Empty eyebrow chips should not render a floating pill.
   2) Remove the aurora hairline under the header (looked awkward).
   3) Hide the responsive/slicknav submenu on desktop so only one dropdown
      shows when hovering "Products".
   ===================================================================== */

/* 1) Hide empty <h3> in section titles (e.g. <h3 class="wow fadeInUp"></h3>) */
.section-title h3:empty { display: none !important; }
.section-title h3 {
    /* if there's no text content, no chip border / no sheen */
    min-height: 0;
}

/* Stop the chip sheen animation completely if h3 has no text */
.section-title h3:empty::after { display: none !important; }

/* 2) No more line/shadow under the navbar — keep header surface seamless */
.main-header .header-sticky::after { display: none !important; }
.main-header .header-sticky { box-shadow: none !important; }
body.is-scrolled .main-header .header-sticky {
    box-shadow: 0 6px 18px -14px rgba(0,0,0,0.45) !important;
}

/* 3) Only one Products dropdown — hide responsive/slicknav clones on desktop */
@media (min-width: 992px) {
    .responsive-menu,
    .slicknav_menu,
    .slicknav_nav,
    .navbar-toggle { display: none !important; }
}

/* And make sure submenu opens/closes from a single source */
.navbar-nav .submenu > ul {
    pointer-events: none;
    visibility: hidden;
}
.navbar-nav .submenu:hover > ul,
.navbar-nav .submenu:focus-within > ul {
    pointer-events: auto;
    visibility: visible;
}

/* =====================================================================
   LIGHT-MODE: COMPONENT-LEVEL CONTRAST FIXES
   - Pricing/service/about cards: light surface + dark text inside
   - Offcanvas sidebar: stay dark in both modes (contrast component)
   - Hero text: dark, readable
   ===================================================================== */

/* Pricing cards (the WhatsApp Chat Bot / QR Code panels) */
body.light-mode .pricing-item,
body.light-mode .pricing-box {
    background: linear-gradient(180deg, #FFFFFF 0%, #F7F6F1 100%) !important;
    border: 1px solid rgba(11,11,14,0.10) !important;
    box-shadow: 0 12px 36px -16px rgba(11,11,14,0.18) !important;
}
body.light-mode .pricing-item *,
body.light-mode .pricing-box * { color: #13131F !important; }

/* The dark inner list block (.pricing-body) — re-skin for light bg */
body.light-mode .pricing-item .pricing-body,
body.light-mode .pricing-box .pricing-body {
    background: rgba(11,11,14,0.04) !important;
    border: 1px solid rgba(11,11,14,0.08) !important;
    border-radius: 16px !important;
}
body.light-mode .pricing-item .pricing-body ul li,
body.light-mode .pricing-box .pricing-body ul li {
    color: #13131F !important;
    border-bottom-color: rgba(11,11,14,0.10) !important;
}
body.light-mode .pricing-item .pricing-header,
body.light-mode .pricing-item .pricing-title,
body.light-mode .pricing-item .pricing-title h3,
body.light-mode .pricing-item .pricing-price h2 { color: #13131F !important; }

/* Pricing header icon-box: keep gold tint visible on light card */
body.light-mode .pricing-item .icon-box,
body.light-mode .service-item .icon-box {
    background: linear-gradient(160deg, rgba(251,197,73,0.22), rgba(251,197,73,0.06)) !important;
    border: 1px solid rgba(251,197,73,0.35) !important;
}

/* The "Learn More" / btn-highlighted on light cards */
body.light-mode .btn-highlighted,
body.light-mode .pricing-btn a {
    color: #0B0B0E !important;
    background: var(--r2-grad-gold) !important;
}

/* Service-item cards (homepage 3-up) — same light treatment */
body.light-mode .service-item {
    background: linear-gradient(180deg, #FFFFFF 0%, #F7F6F1 100%) !important;
    border: 1px solid rgba(11,11,14,0.10) !important;
    box-shadow: 0 12px 36px -16px rgba(11,11,14,0.18) !important;
}
body.light-mode .service-item .service-content h3,
body.light-mode .service-item .service-content h3 a,
body.light-mode .service-item .service-content p,
body.light-mode .service-item .service-btn a { color: #13131F !important; }
body.light-mode .service-item .service-btn a:hover { color: var(--r2-gold-deep) !important; }

/* =====================================================================
   OFFCANVAS / SIDEBAR — stay DARK in both themes (intentional contrast)
   Overrides the global light-mode text-darkening, so labels stay readable.
   ===================================================================== */
/* (older "always-dark sidebar" overrides removed — panel now flips with theme) */
.offcanvas-body { color: #F5F5F4; }

body.light-mode .offcanvas *,
body.light-mode .offcanvas-body *,
body.light-mode .offcanvas .header-contact-box,
body.light-mode .offcanvas .header-contact-box *,
body.light-mode .offcanvas .header-contact-box-content,
/* (removed: was forcing white text in light mode — handled by per-element rules below) */

/* Brand-tinted labels stay gold in sidebar (Phone / Email / Address / stay connected) */
.offcanvas .header-contact-box-content h3,
body.light-mode .offcanvas .header-contact-box-content h3,
.offcanvas .sidebar-social-links h3,
body.light-mode .offcanvas .sidebar-social-links h3 {
    color: var(--r2-gold) !important;
}

/* =====================================================================
   SIDEBAR (offcanvas) v3 — premium animated panel with hero header,
   rotating decorative ring, stagger-in cards on .show
   ===================================================================== */

/* Panel container — fixed, full viewport height, internal scroll only */
#offcanvasRight,
#offcanvasRight-end,
.offcanvas.offcanvas-end {
    position: fixed !important;
    width: 100% !important;
    max-width: 420px !important;
    right: 0 !important;
    left: auto !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    max-height: 100vh !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: -30px 0 80px -20px rgba(0,0,0,0.6) !important;
    background:
        radial-gradient(60% 40% at 100% 0%, rgba(251,197,73,0.22), transparent 60%),
        radial-gradient(60% 40% at 0% 100%, rgba(108,92,255,0.20), transparent 60%),
        radial-gradient(50% 30% at 50% 50%, rgba(255,61,129,0.10), transparent 60%),
        linear-gradient(180deg, #0A0A12, #0F0F18) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transition: background 0.6s var(--r2-ease), color 0.6s var(--r2-ease) !important;
}

/* LIGHT MODE — flip the sidebar to a cream/white surface */
body.light-mode #offcanvasRight,
body.light-mode #offcanvasRight-end,
body.light-mode .offcanvas.offcanvas-end {
    background:
        radial-gradient(60% 40% at 100% 0%, rgba(251,197,73,0.35), transparent 60%),
        radial-gradient(60% 40% at 0% 100%, rgba(108,92,255,0.20), transparent 60%),
        radial-gradient(50% 30% at 50% 50%, rgba(255,61,129,0.10), transparent 60%),
        linear-gradient(180deg, #FFFFFF, #F7F4EA) !important;
    box-shadow: -30px 0 80px -20px rgba(11,11,14,0.20) !important;
}
body.light-mode .offcanvas,
body.light-mode .offcanvas-end,
body.light-mode .offcanvas-body { color: #13131F !important; }
@media (max-width: 480px) {
    #offcanvasRight,
    #offcanvasRight-end,
    .offcanvas.offcanvas-end { max-width: 92vw !important; }
}

/* Animated gradient hairline along the left edge */
.offcanvas::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: 0;
    width: 2px;
    background: linear-gradient(180deg, transparent, var(--r2-gold), var(--r2-magenta), var(--r2-violet), transparent);
    background-size: 100% 200%;
    animation: r2-side-glow 6s linear infinite;
    z-index: 3;
}
@keyframes r2-side-glow {
    0%   { background-position: 0% 0%; }
    100% { background-position: 0% 200%; }
}

/* Subtle noise overlay for depth */
.offcanvas::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: 0.35;
    pointer-events: none;
    z-index: 1;
}

/* Body — own scroll container, fills the panel vertically */
.offcanvas .offcanvas-body,
#offcanvasRight .offcanvas-body,
.navbar-expand-lg .offcanvas .offcanvas-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 24px 26px 32px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    position: relative;
    z-index: 2;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.offcanvas .offcanvas-body::-webkit-scrollbar { width: 6px; }
.offcanvas .offcanvas-body::-webkit-scrollbar-thumb { background: rgba(251,197,73,0.4); border-radius: 6px; }

/* =====================  HERO HEADER (injected by JS)  ===================== */
.r2-side-hero {
    position: relative;
    padding: 28px 4px 24px;
    margin-bottom: 4px;
    isolation: isolate;
}
.r2-side-badge {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid rgba(251,197,73,0.40);
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: 0.32em;
    font-weight: 800;
    color: var(--r2-gold);
    background: linear-gradient(180deg, rgba(251,197,73,0.10), transparent);
    margin-bottom: 14px;
}
.r2-side-title {
    margin: 0 0 10px !important;
    font-size: 42px !important;
    line-height: 1.02 !important;
    font-weight: 800 !important;
    color: #F5F5F4 !important;
    letter-spacing: -0.02em !important;
}
.r2-side-title span {
    background: linear-gradient(120deg, #FFE082 0%, #FBC549 25%, #FF3D81 55%, #6C5CFF 85%, #22D3EE 100%);
    background-size: 280% 280%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: r2-aurora-flow 7s ease infinite;
}
.r2-side-sub {
    margin: 0 !important;
    color: rgba(245,245,244,0.62) !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    max-width: 30ch;
}

/* Rotating decorative ring (top-right of hero) */
.r2-side-deco {
    position: absolute;
    top: -10px;
    right: -30px;
    width: 160px;
    height: 160px;
    opacity: 0.35;
    pointer-events: none;
    z-index: -1;
}
.r2-side-deco svg {
    width: 100%;
    height: 100%;
    color: var(--r2-gold);
    fill: currentColor;
    animation: r2-spin 22s linear infinite;
}
.r2-side-pulse {
    position: absolute;
    top: 50%; left: 50%;
    width: 14px; height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: var(--r2-gold);
    box-shadow: 0 0 0 0 rgba(251,197,73,0.7);
    animation: r2-pulse-dot 2.6s ease-out infinite;
}
@keyframes r2-pulse-dot {
    0%   { box-shadow: 0 0 0 0 rgba(251,197,73,0.7); transform: scale(1); }
    70%  { box-shadow: 0 0 0 28px rgba(251,197,73,0); transform: scale(0.9); }
    100% { box-shadow: 0 0 0 0 rgba(251,197,73,0); transform: scale(1); }
}

/* Each contact row: horizontal layout, no double-box look */
.offcanvas .header-contact-box {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 14px !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 16px !important;
    padding: 16px 16px !important;
    margin: 0 !important;
    box-shadow: none !important;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateX(40px);
    animation: r2-side-cardin 0.65s var(--r2-ease) forwards;
    transition: background 0.3s var(--r2-ease), border-color 0.3s var(--r2-ease);
}
.offcanvas .header-contact-box:nth-of-type(1) { animation-delay: 0.20s; }
.offcanvas .header-contact-box:nth-of-type(2) { animation-delay: 0.30s; }
.offcanvas .header-contact-box:nth-of-type(3) { animation-delay: 0.40s; }
.offcanvas .r2-side-hero      { animation: r2-side-fade 0.7s var(--r2-ease) both 0.05s; }
.offcanvas .sidebar-social-links { animation: r2-side-rise 0.7s var(--r2-ease) both 0.50s; }

@keyframes r2-side-cardin { to { opacity: 1; transform: translateX(0); } }
@keyframes r2-side-fade   { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes r2-side-rise   { from { opacity: 0; transform: translateY(20px); }  to { opacity: 1; transform: none; } }

/* Gradient sheen sweep on hover */
.offcanvas .header-contact-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(251,197,73,0.10) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.7s var(--r2-ease);
    pointer-events: none;
}
.offcanvas .header-contact-box:hover {
    border-color: rgba(251,197,73,0.45) !important;
    background: linear-gradient(135deg, rgba(251,197,73,0.10), rgba(108,92,255,0.05)) !important;
    transform: translateX(-4px) !important;
}
.offcanvas .header-contact-box:hover::before { transform: translateX(100%); }

/* Pulse ring on the icon circle */
.offcanvas .header-contact-box .icon-box {
    position: relative;
}
.offcanvas .header-contact-box .icon-box::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid rgba(251,197,73,0.40);
    opacity: 0;
    transition: opacity 0.4s var(--r2-ease), transform 0.6s var(--r2-ease);
    transform: scale(0.85);
}
.offcanvas .header-contact-box:hover .icon-box::before {
    opacity: 1;
    transform: scale(1.1);
}

/* Compact icon circle (no more full-width bar) */
.offcanvas .header-contact-box .icon-box {
    flex: 0 0 auto !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(160deg, rgba(251,197,73,0.22), rgba(251,197,73,0.06)) !important;
    border: 1px solid rgba(251,197,73,0.35) !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
.offcanvas .header-contact-box .icon-box img {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    object-fit: contain !important;
    margin: 0 !important;
}

/* Text block to the right of the circle */
.offcanvas .header-contact-box .header-contact-box-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
.offcanvas .header-contact-box-content h3 {
    font-size: 12px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    margin: 0 0 6px !important;
    color: var(--r2-gold) !important;
    line-height: 1 !important;
}
.offcanvas .header-contact-box-content p {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: rgba(245,245,244,0.9) !important;
    word-break: break-word;
}

/* Stay connected section */
.offcanvas .sidebar-social-links {
    margin-top: 6px !important;
    padding: 18px !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 16px !important;
}
.offcanvas .sidebar-social-links h3 {
    font-size: 12px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    margin: 0 0 14px !important;
    color: var(--r2-gold) !important;
}
.offcanvas .sidebar-social-links ul {
    display: flex !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}
.offcanvas .sidebar-social-links ul li { margin: 0 !important; }
.offcanvas .sidebar-social-links ul li a {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    background: rgba(255,255,255,0.04) !important;
    color: #F5F5F4 !important;
}
.offcanvas .sidebar-social-links ul li a:hover {
    background: var(--r2-grad-gold) !important;
    color: #0B0B0E !important;
    border-color: transparent !important;
    transform: translateY(-2px) rotate(-6deg);
}

/* Close button: floating top-right (beat #offcanvasRight .btn-close) */
#offcanvasRight .btn-close,
.offcanvas .btn-close {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    background-color: rgba(255,255,255,0.04) !important;
    z-index: 5;
    transition: background 0.3s var(--r2-ease), transform 0.3s var(--r2-ease), filter 0.3s var(--r2-ease);
}
#offcanvasRight .btn-close:hover,
.offcanvas .btn-close:hover {
    background-color: var(--r2-gold) !important;
    transform: rotate(90deg) scale(1.05);
}

/* LIGHT MODE — sidebar text, cards, social, close button */
body.light-mode .r2-side-title { color: #13131F !important; }
body.light-mode .r2-side-sub   { color: rgba(19,19,33,0.65) !important; }
body.light-mode .r2-side-badge {
    color: #7a5300 !important;
    border-color: rgba(251,197,73,0.55) !important;
    background: linear-gradient(180deg, rgba(251,197,73,0.18), transparent) !important;
}
body.light-mode .r2-side-deco { opacity: 0.25; }

body.light-mode .offcanvas .header-contact-box {
    background: linear-gradient(135deg, rgba(11,11,14,0.04), rgba(11,11,14,0.01)) !important;
    border-color: rgba(11,11,14,0.10) !important;
}
body.light-mode .offcanvas .header-contact-box:hover {
    background: linear-gradient(135deg, rgba(251,197,73,0.18), rgba(108,92,255,0.06)) !important;
    border-color: rgba(251,197,73,0.55) !important;
}
body.light-mode .offcanvas .header-contact-box-content h3 {
    color: var(--r2-gold-deep) !important;
}
body.light-mode .offcanvas .header-contact-box-content p {
    color: rgba(19,19,33,0.78) !important;
}

body.light-mode .offcanvas .sidebar-social-links {
    background: rgba(11,11,14,0.03) !important;
    border-color: rgba(11,11,14,0.10) !important;
}
body.light-mode .offcanvas .sidebar-social-links h3 {
    color: var(--r2-gold-deep) !important;
}
body.light-mode .offcanvas .sidebar-social-links ul li a {
    border-color: rgba(11,11,14,0.20) !important;
    background: rgba(11,11,14,0.04) !important;
    color: #13131F !important;
}

body.light-mode #offcanvasRight .btn-close,
body.light-mode .offcanvas .btn-close {
    border-color: rgba(11,11,14,0.30) !important;
    background-color: rgba(11,11,14,0.05) !important;
    filter: invert(1);
}
body.light-mode #offcanvasRight .btn-close:hover,
body.light-mode .offcanvas .btn-close:hover {
    filter: invert(0);
    background-color: var(--r2-gold) !important;
}

/* Scrollbar inside the panel — light variant */
body.light-mode .offcanvas .offcanvas-body::-webkit-scrollbar-thumb {
    background: rgba(251,197,73,0.5);
}

/* Aurora hairline + noise overlay tone down for light surface */
body.light-mode .offcanvas::after { opacity: 0.18; mix-blend-mode: multiply; }

/* =====================================================================
   HERO HEADINGS — keep visible on light/dark hero overlays
   ===================================================================== */
body.light-mode .hero-content .section-title h1,
body.light-mode .hero-content .section-title h2,
body.light-mode .hero-content .section-title p,
body.light-mode .hero-content p { color: #13131F !important; }

/* Gradient spans on light hero use a darker palette for legibility */
body.light-mode .hero-content .section-title h1 span,
body.light-mode .hero-content .section-title h2 span {
    background: linear-gradient(120deg, #B8860B 0%, #C71585 40%, #4B0082 75%, #0E7C86 100%) !important;
    background-size: 280% 280% !important;
    -webkit-background-clip: text !important;
            background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* =====================================================================
   FAQ ACCORDION — flip to light cards in light mode so answers are visible
   ===================================================================== */
body.light-mode .faq-accordion .accordion-item,
body.light-mode .accordion-item {
    background: linear-gradient(180deg, #FFFFFF, #FAF7EE) !important;
    border: 1px solid rgba(11,11,14,0.10) !important;
    box-shadow: 0 8px 24px -14px rgba(11,11,14,0.18) !important;
    border-radius: 16px !important;
}
body.light-mode .accordion-item *,
body.light-mode .accordion-item .accordion-button,
body.light-mode .accordion-item .accordion-header,
body.light-mode .accordion-item .accordion-body,
body.light-mode .accordion-item .accordion-body * { color: #13131F !important; }
body.light-mode .accordion-item .accordion-button { background: transparent !important; }
body.light-mode .accordion-item .accordion-button:not(.collapsed) { color: var(--r2-gold-deep) !important; }
body.light-mode .accordion-item .accordion-body { color: rgba(19,19,33,0.78) !important; }
body.light-mode .accordion-item .accordion-button::after { filter: brightness(0) saturate(1) !important; }

/* =====================================================================
   HERO TICKER — tone down the giant scrolling text (was 11.979vw)
   ===================================================================== */
.hero-ticker-box {
    bottom: 12px !important;
    opacity: 0.9;
    --gap: 28px !important;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    pointer-events: none;
}
.hero-scrolling-content { animation-duration: 42s !important; }
.hero-scrolling-content h2 {
    font-size: clamp(28px, 4.2vw, 64px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.01em !important;
    font-weight: 800 !important;
    opacity: 1 !important;
    background: linear-gradient(120deg,
        rgba(251,197,73,0.35) 0%,
        rgba(255,61,129,0.22) 35%,
        rgba(108,92,255,0.22) 65%,
        rgba(34,211,238,0.22) 100%) !important;
    background-size: 240% 240% !important;
    -webkit-background-clip: text !important;
            background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    padding: 0 6px !important;
    text-shadow: none !important;
    animation: r2-aurora-flow 14s linear infinite !important;
    white-space: nowrap !important;
}

/* Star separator between ticker items */
.hero-scrolling-content h2 + h2::before {
    content: "✦";
    display: inline-block;
    margin-right: 22px;
    font-size: 0.5em;
    vertical-align: middle;
    -webkit-text-fill-color: rgba(251,197,73,0.6) !important;
            background: none !important;
}

/* Light mode: darker tint so it reads on cream bg */
body.light-mode .hero-scrolling-content h2 {
    background: linear-gradient(120deg,
        rgba(184,134,11,0.45) 0%,
        rgba(199,21,133,0.32) 35%,
        rgba(75,0,130,0.32) 65%,
        rgba(14,124,134,0.32) 100%) !important;
    -webkit-background-clip: text !important;
            background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

@media (max-width: 768px) {
    .hero-scrolling-content h2 { font-size: clamp(22px, 8vw, 38px) !important; }
    .hero-ticker-box { bottom: 8px !important; --gap: 18px !important; }
}