/* ==========================================================================
   Base Reset & Typography
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; color: var(--text-color-primary); line-height: 1.6; background-color: var(--body-bg-color, #F8F9FF); transition: background-color 0.3s ease, color 0.3s ease; }
body.dark-mode { background-color: var(--dm-body-bg-color); color: var(--dm-text-color-primary); }

/* Gradient Blue Background Pattern with Particles */
.gradient-blue-bg { background: linear-gradient(135deg, #1e40af 0%, #2563eb 50%, #0369a1 100%); color: #fff; position: relative; overflow: hidden; }
body.dark-mode .gradient-blue-bg { background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #0c4a6e 100%); }

.gradient-blue-bg::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image:
  radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0.5px, transparent 0.5px),
  radial-gradient(circle at 60% 70%, rgba(255,255,255,0.08) 0.5px, transparent 0.5px),
  radial-gradient(circle at 50% 30%, rgba(255,255,255,0.12) 0.5px, transparent 0.5px),
  radial-gradient(circle at 80% 10%, rgba(255,255,255,0.09) 0.5px, transparent 0.5px),
  radial-gradient(circle at 10% 90%, rgba(255,255,255,0.11) 0.5px, transparent 0.5px),
  radial-gradient(circle at 90% 60%, rgba(255,255,255,0.1) 0.5px, transparent 0.5px),
  radial-gradient(circle at 40% 80%, rgba(255,255,255,0.08) 0.5px, transparent 0.5px),
  radial-gradient(circle at 70% 40%, rgba(255,255,255,0.09) 0.5px, transparent 0.5px);
background-size: 200% 200%;
background-position: 0 0;
pointer-events: none;
}

.gradient-blue-bg > * { position: relative; z-index: 1; }
.gradient-blue-bg h2, .gradient-blue-bg h3, .gradient-blue-bg h4 { color: #fff; }
.gradient-blue-bg p { color: rgba(255,255,255,0.95); }
.gradient-blue-bg .text-color-secondary { color: rgba(255,255,255,0.85) !important; }
body.dark-mode h1,body.dark-mode h2,body.dark-mode h3,body.dark-mode h4,body.dark-mode h5,body.dark-mode h6 { color: var(--dm-text-color-headings); }
body.dark-mode .component-card { background-color: var(--dm-component-bg-color); border-color: #333; }
h1,h2,h3,h4,h5,h6 { color: var(--text-color-headings); font-weight: 700; margin-bottom: 0.75em; line-height: 1.2; }
p { margin-bottom: 1em; }
a { color: var(--primary-color); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--secondary-color); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style-position: inside; padding-left: 1.5em; }
.page-section { padding: 5rem 1.5rem; }
@media (min-width: 768px) { .page-section { padding: 6rem 1.5rem; } }

/* ==========================================================================
   Font Awesome Icons — Visibility
   ========================================================================== */
/* White icons on colored backgrounds */
.contact-info-card i,
.btn i,
.hero-badge i,
.option-card__icon-wrap i,
.addon-card__icon i,
.accreditation-point__icon i,
.sdwan-feature__icon i,
.contact-demo-link i { color: #fff !important; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: 'Inter', sans-serif; font-weight: 600; text-align: center; cursor: pointer; border: 2px solid transparent; padding: 0.75rem 1.5rem; font-size: 0.95rem; border-radius: 8px; transition: all 0.2s ease; text-decoration: none; line-height: 1.4; white-space: nowrap; }
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn--primary { background: var(--primary-color); color: #fff; border-color: transparent; box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.4); }
.btn--primary:hover { background: var(--primary-color); filter: brightness(0.88); color: #fff; box-shadow: 0 6px 20px rgba(var(--primary-color-rgb), 0.5); }
.btn--secondary { background: rgba(0,0,0,0.06); color: var(--text-color-headings); border-color: rgba(0,0,0,0.08); }
.btn--secondary:hover { background: rgba(0,0,0,0.1); }
body.dark-mode .btn--secondary { color: var(--dm-text-color-primary); background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); }
body.dark-mode .btn--secondary:hover { background: rgba(255,255,255,0.14); }
.btn--outline-primary { background: transparent; color: var(--primary-color); border-color: var(--primary-color); }
.btn--outline-primary:hover { background: var(--primary-color); color: #fff; }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); }
.btn--outline-light:hover { background: #fff; color: var(--secondary-color); border-color: #fff; }
.btn--lg { padding: 0.9rem 2rem; font-size: 1.05rem; border-radius: 10px; }
.btn--xl { padding: 1rem 2.5rem; font-size: 1.1rem; border-radius: 10px; }
.btn--sm { padding: 0.45rem 1rem; font-size: 0.875rem; border-radius: 6px; }

/* ==========================================================================
   Navbar
   ========================================================================== */
.app-logo-avatar { display: none !important; }
.modern-navbar { padding: 0.9rem 1.5rem; position: sticky; top: 0; z-index: 1000; background-color: rgba(var(--body-bg-color-rgb, 248, 249, 255), 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(0,0,0,0.06); transition: box-shadow 0.3s ease; }
.modern-navbar.is-sticky { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
body.dark-mode .modern-navbar { background-color: rgba(18,18,18,0.92); border-bottom-color: rgba(255,255,255,0.08); }
body.dark-mode .modern-navbar.is-sticky { box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.modern-navbar__container { display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; position: relative; }
.modern-navbar__left { display: flex; align-items: center; z-index: 1001; }
.modern-navbar__left .logo img { max-height: 40px; width: auto; }
.modern-navbar__right { display: flex; align-items: center; gap: 0.75rem; }
.desktop-only { display: flex; align-items: center; }
.mobile-only { display: none; }
@media (max-width: 991px) { .desktop-only { display: none !important; } .mobile-only { display: flex; } }
.modern-navbar__center { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; }
@media (max-width: 991px) { .modern-navbar__center { position: static; transform: none; justify-content: center; width: 100%; } }
.modern-navbar__links, .modern-navbar__actions { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: 0.15rem; }
.modern-navbar__links a { text-decoration: none; color: var(--text-color-primary); font-weight: 500; font-size: 0.9rem; transition: all 0.2s ease; padding: 0.45rem 0.75rem; border-radius: 6px; display: block; }
.modern-navbar__links a:hover { color: var(--primary-color); background: rgba(var(--primary-color-rgb), 0.07); }
body.dark-mode .modern-navbar__links a { color: var(--dm-text-color-primary); }
body.dark-mode .modern-navbar__links a:hover { color: var(--primary-color); }
.modern-navbar__cta { padding: 0.45rem 1rem !important; font-size: 0.875rem; border-radius: 7px; font-weight: 600; transition: all 0.2s ease; display: inline-block; }
.modern-navbar__cta--primary { background: var(--primary-color); color: #fff !important; border: none; box-shadow: 0 2px 8px rgba(var(--primary-color-rgb), 0.35); }
.modern-navbar__cta--primary:hover { color: #fff !important; box-shadow: 0 4px 14px rgba(var(--primary-color-rgb), 0.5); transform: translateY(-1px); }
.modern-navbar__cta--secondary { background: transparent; color: var(--text-color-primary); border: 1.5px solid rgba(0,0,0,0.12); padding: 0.42rem 1rem !important; }
.modern-navbar__cta--secondary:hover { border-color: var(--primary-color); color: var(--primary-color); }
body.dark-mode .modern-navbar__cta--secondary { color: var(--dm-text-color-primary); border-color: rgba(255,255,255,0.2); }
body.dark-mode .modern-navbar__cta--secondary:hover { color: var(--primary-color); border-color: var(--primary-color); }

/* Dropdown */
.has-dropdown { position: relative; }
.modern-navbar__dropdown { list-style: none; position: absolute; top: calc(100% + 8px); left: 0; background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 10px; padding: 0.5rem; min-width: 200px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: all 0.2s ease; box-shadow: 0 10px 30px rgba(0,0,0,0.12); }
body.dark-mode .modern-navbar__dropdown { background: var(--dm-component-bg-color); border-color: rgba(255,255,255,0.1); }
.has-dropdown:hover .modern-navbar__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.modern-navbar__dropdown a { display: block; padding: 0.5rem 0.75rem; border-radius: 6px; color: var(--text-color-primary); font-size: 0.875rem; white-space: nowrap; }
.modern-navbar__dropdown a:hover { background: rgba(var(--primary-color-rgb), 0.08); color: var(--primary-color); }
body.dark-mode .modern-navbar__dropdown a { color: var(--dm-text-color-primary); }

/* Theme toggle */
.modern-navbar__theme-switch-container { display: flex; align-items: center; }
#themeSwitchCheckbox, #themeSwitchMobileNav { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.theme-switch { cursor: pointer; display: flex; align-items: center; }
.slider { display: flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 20px; border: 1.5px solid rgba(0,0,0,0.12); font-size: 0.82rem; color: var(--text-color-secondary); transition: all 0.2s ease; }
.slider:hover { border-color: var(--primary-color); color: var(--primary-color); }
body.dark-mode .slider { border-color: rgba(255,255,255,0.2); color: var(--dm-text-color-secondary); }
.sun-icon { display: none; } .moon-icon { display: inline-block; }
body.dark-mode .sun-icon { display: inline-block; } body.dark-mode .moon-icon { display: none; }

/* Mobile toggle */
/* Hamburger button — clean & visible on all backgrounds */
/* ==========================================================================
   Hero — Bold Gradient
   ========================================================================== */
.hero-section-modern {
    position: relative;
    padding: 5rem 1.5rem 6rem;
    min-height: 88vh;
    display: flex; align-items: center; justify-content: center; text-align: center;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 15% 85%, rgba(var(--primary-color-rgb), 0.2) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 15%, rgba(var(--primary-color-rgb), 0.1) 0%, transparent 45%),
        linear-gradient(150deg, var(--secondary-color) 0%, var(--secondary-color) 100%);
    background-size: cover; background-position: center;
}
.hero-section-modern[style*="background-image"] { background: none; }
.hero-section-modern__overlay { position: absolute; inset: 0; background: linear-gradient(150deg, rgba(1,21,48,0.87) 0%, rgba(1,21,48,0.6) 100%); z-index: 1; display: none; }
.hero-section-modern[style*="background-image"] .hero-section-modern__overlay { display: block; }
.hero-section-modern__container { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; }

.hero-badge { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.88); padding: 0.4rem 1rem; border-radius: 50px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; margin-bottom: 1.5rem; backdrop-filter: blur(4px); }
.hero-badge__dot { width: 6px; height: 6px; background: var(--primary-color); border-radius: 50%; display: inline-block; animation: pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.5; transform:scale(1.5); } }

.hero-section-modern__title { font-size: 2.9rem; font-weight: 800; color: #ffffff; line-height: 1.1; margin-bottom: 1.25rem; letter-spacing: -0.025em; }
.hero-section-modern__title .accent { color: var(--primary-color); }
.hero-section-modern__description { font-size: 1.15rem; line-height: 1.8; color: rgba(255,255,255,0.78); margin-bottom: 2.25rem; max-width: 640px; margin-left: auto; margin-right: auto; }
.hero-section-modern__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: center; }
.hero-section-modern__trust { margin-top: 2.5rem; font-size: 0.82rem; color: rgba(255,255,255,0.45); display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.hero-section-modern__trust span { display: flex; align-items: center; gap: 0.3rem; }

@media (min-width: 768px) { .hero-section-modern { padding: 7rem 1.5rem 8rem; } .hero-section-modern__title { font-size: 3.75rem; } }
@media (min-width: 1100px) { .hero-section-modern__title { font-size: 4.5rem; } }

/* ==========================================================================
   Features
   ========================================================================== */
.modern-features-section { padding: 5rem 1.5rem; background: var(--primary-color); text-align: center; color: #fff; position: relative; overflow: hidden; }
.modern-features-section::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; }
.modern-features-section__container { position: relative; z-index: 1; }
body.dark-mode .modern-features-section { background: radial-gradient(ellipse at 15% 85%, rgba(var(--primary-color-rgb), 0.1) 0%, transparent 50%), linear-gradient(150deg, #080c14 0%, #0d1117 100%); }
.modern-features-section__container { max-width: 1200px; margin: 0 auto; }
.modern-features-section__super-title { display: block; margin-bottom: 0.75rem; }
.modern-features-section__super-title span { display: inline-block; padding: 0.35rem 1rem; background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.3); border-radius: 50px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.modern-features-section__title { font-size: 2.25rem; font-weight: 800; color: #fff; margin-bottom: 1rem; letter-spacing: -0.02em; }
@media (min-width: 768px) { .modern-features-section__title { font-size: 2.75rem; } }
.modern-features-section__description { font-size: 1.05rem; color: rgba(255,255,255,0.9); max-width: 680px; margin: 0 auto 3rem; line-height: 1.8; }
.modern-features-section__grid { display: grid; gap: 1.5rem; }
@media (min-width: 576px) { .modern-features-section__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .modern-features-section__grid { grid-template-columns: repeat(4, 1fr); } }

.modern-feature-item { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); border-radius: 16px; padding: 1.75rem; text-align: left; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; box-shadow: 0 8px 32px rgba(0,0,0,0.15); position: relative; overflow: hidden; backdrop-filter: blur(10px); }
.modern-feature-item::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; }
.modern-feature-item:hover { transform: translateY(-6px); box-shadow: 0 14px 38px rgba(0,0,0,0.25); border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.18); }
.modern-feature-item:hover::after { transform: scaleX(1); }
.modern-feature-item__icon { width: 50px; height: 50px; border-radius: 12px; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; color: #fff; margin-bottom: 1.25rem; }
.modern-feature-item__title { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 0.5rem; }
.modern-feature-item__description { font-size: 0.875rem; color: rgba(255,255,255,0.85); line-height: 1.65; margin: 0; }

/* ==========================================================================
   Industries
   ========================================================================== */
.modern-industries-section { padding: 5rem 1.5rem; background: #fff; text-align: center; }
body.dark-mode .modern-industries-section { background: rgba(255,255,255,0.015); }
.modern-industries-section__container { max-width: 1200px; margin: 0 auto; }
.modern-industries-section__super-title { display: block; margin-bottom: 0.75rem; }
.modern-industries-section__super-title span { display: inline-block; padding: 0.35rem 1rem; background: rgba(var(--primary-color-rgb), 0.1); color: var(--primary-color); border: 1px solid rgba(var(--primary-color-rgb), 0.22); border-radius: 50px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
body.dark-mode .modern-industries-section__super-title span { background: rgba(var(--primary-color-rgb), 0.2); }
.modern-industries-section__title { font-size: 2.25rem; font-weight: 800; color: var(--text-color-headings); margin-bottom: 1rem; letter-spacing: -0.02em; }
@media (min-width: 768px) { .modern-industries-section__title { font-size: 2.75rem; } }
.modern-industries-section__description { font-size: 1.05rem; color: var(--text-color-secondary); max-width: 680px; margin: 0 auto 3rem; line-height: 1.8; }
body.dark-mode .modern-industries-section__description { color: var(--dm-text-color-secondary); }
.modern-industries-section__grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .modern-industries-section__grid { grid-template-columns: repeat(2, 1fr); } }
.modern-industry-item { background: var(--body-bg-color, #F8F9FF); border: 1px solid rgba(0,0,0,0.06); border-radius: 16px; padding: 1.75rem; text-align: left; display: flex; align-items: flex-start; gap: 1.25rem; transition: transform 0.25s ease, box-shadow 0.25s ease; box-shadow: 0 2px 12px rgba(0,0,0,0.03); }
.modern-industry-item:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
body.dark-mode .modern-industry-item { background: var(--dm-component-bg-color); border-color: rgba(255,255,255,0.08); }
.modern-industry-item__icon { font-size: 1.75rem; color: var(--primary-color); flex-shrink: 0; margin-top: 0.1rem; }
.modern-industry-item__title { font-size: 1.05rem; font-weight: 700; color: var(--text-color-headings); margin-bottom: 0.4rem; }
.modern-industry-item__description { font-size: 0.875rem; color: var(--text-color-secondary); line-height: 1.65; margin: 0; }
body.dark-mode .modern-industry-item__description { color: var(--dm-text-color-secondary); }
.modern-industries-section__actions { margin-top: 3rem; }

/* ==========================================================================
   Statistics
   ========================================================================== */
.modern-stats-section {
    padding: 5rem 1.5rem;
    background:
        radial-gradient(ellipse at 10% 90%, rgba(var(--primary-color-rgb), 0.14) 0%, transparent 50%),
        var(--secondary-color);
    color: #fff; text-align: center;
}
body.dark-mode .modern-stats-section { background: var(--dm-body-bg-color); }
.modern-stats-section__container { max-width: 1200px; margin: 0 auto; }
.modern-stats-section__super-title { display: block; margin-bottom: 0.75rem; }
.modern-stats-section__super-title span { display: inline-block; padding: 0.35rem 1rem; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); border-radius: 50px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.88); }
body.dark-mode .modern-stats-section__super-title span { background: rgba(var(--primary-color-rgb), 0.2); border-color: rgba(var(--primary-color-rgb), 0.3); color: var(--primary-color); }
.modern-stats-section__title { font-size: 2.25rem; font-weight: 800; color: #fff; margin-bottom: 1rem; letter-spacing: -0.02em; }
@media (min-width: 768px) { .modern-stats-section__title { font-size: 2.75rem; } }
body.dark-mode .modern-stats-section__title { color: var(--dm-text-color-headings); }
.modern-stats-section__description { font-size: 1.05rem; color: rgba(255,255,255,0.7); max-width: 680px; margin: 0 auto 3rem; line-height: 1.8; }
body.dark-mode .modern-stats-section__description { color: var(--dm-text-color-secondary); }
.modern-stats-section__grid { display: grid; gap: 1.5rem; }
@media (min-width: 576px) { .modern-stats-section__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .modern-stats-section__grid { grid-template-columns: repeat(4, 1fr); } }
.modern-stat-item { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 2rem 1.5rem; transition: background 0.25s ease, transform 0.25s ease; }
.modern-stat-item:hover { background: rgba(255,255,255,0.12); transform: translateY(-3px); }
body.dark-mode .modern-stat-item { background: var(--dm-component-bg-color); border-color: rgba(255,255,255,0.1); }
.modern-stat-item__number { font-size: 3rem; font-weight: 800; color: var(--primary-color); line-height: 1.1; margin-bottom: 0.5rem; letter-spacing: -0.02em; }
@media (min-width: 768px) { .modern-stat-item__number { font-size: 3.5rem; } }
.modern-stat-item__label { font-size: 0.9rem; color: rgba(255,255,255,0.7); line-height: 1.5; margin: 0; font-weight: 500; }
body.dark-mode .modern-stat-item__label { color: var(--dm-text-color-secondary); }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.modern-testimonial-section { padding: 5rem 1.5rem; background: var(--body-bg-color, #F8F9FF); text-align: center; }
body.dark-mode .modern-testimonial-section { background: var(--dm-body-bg-color); }
.modern-testimonial-section__container { max-width: 1200px; margin: 0 auto; }
.modern-testimonial-section__super-title { display: block; margin-bottom: 0.75rem; }
.modern-testimonial-section__super-title span { display: inline-block; padding: 0.35rem 1rem; background: rgba(var(--primary-color-rgb), 0.1); color: var(--primary-color); border: 1px solid rgba(var(--primary-color-rgb), 0.22); border-radius: 50px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
body.dark-mode .modern-testimonial-section__super-title span { background: rgba(var(--primary-color-rgb), 0.2); }
.modern-testimonial-section__title { font-size: 2.25rem; font-weight: 800; color: var(--text-color-headings); margin-bottom: 1rem; letter-spacing: -0.02em; }
@media (min-width: 768px) { .modern-testimonial-section__title { font-size: 2.75rem; } }
.modern-testimonial-section__description { font-size: 1.05rem; color: var(--text-color-secondary); max-width: 680px; margin: 0 auto 3rem; line-height: 1.8; }
body.dark-mode .modern-testimonial-section__description { color: var(--dm-text-color-secondary); }
.modern-testimonial-section__grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .modern-testimonial-section__grid { grid-template-columns: repeat(1, 1fr); max-width: 700px; margin-left: auto; margin-right: auto; } }
@media (min-width: 992px) { .modern-testimonial-section__grid { grid-template-columns: repeat(3, 1fr); max-width: 1200px; } }
.testimonials-swiper .swiper-slide { text-align: center; background: transparent; display: flex; justify-content: center; align-items: stretch; height: auto; }
.modern-testimonial-item { background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 16px; padding: 2rem; text-align: left; box-shadow: 0 4px 20px rgba(0,0,0,0.05); display: flex; flex-direction: column; width: 100%; height: 100%; transition: transform 0.25s ease, box-shadow 0.25s ease; position: relative; overflow: hidden; }
.modern-testimonial-item::before { content: '\201C'; font-family: Georgia, serif; font-size: 5rem; color: var(--primary-color); opacity: 0.12; position: absolute; top: 0.25rem; left: 1rem; line-height: 1; pointer-events: none; }
.modern-testimonial-item:hover { transform: translateY(-4px); box-shadow: 0 14px 38px rgba(0,0,0,0.1); }
body.dark-mode .modern-testimonial-item { background: var(--dm-component-bg-color); border-color: rgba(255,255,255,0.08); }
.modern-testimonial-item__rating { color: var(--primary-color); font-size: 0.95rem; margin-bottom: 0.75rem; letter-spacing: 0.08em; }
.modern-testimonial-item__quote { font-size: 0.925rem; font-style: italic; color: var(--text-color-secondary); line-height: 1.75; margin-bottom: 1.5rem; flex-grow: 1; }
body.dark-mode .modern-testimonial-item__quote { color: var(--dm-text-color-secondary); }
.modern-testimonial-item__author-info { display: flex; align-items: center; gap: 0.75rem; margin-top: auto; }
.modern-testimonial-item__avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(var(--primary-color-rgb), 0.3); flex-shrink: 0; }
.modern-testimonial-item__author-name { font-weight: 700; color: var(--text-color-headings); font-size: 0.875rem; margin: 0; }
.modern-testimonial-item__author-title { font-size: 0.78rem; color: var(--text-color-secondary); margin: 0; }
body.dark-mode .modern-testimonial-item__author-name { color: var(--dm-text-color-primary); }
body.dark-mode .modern-testimonial-item__author-title { color: var(--dm-text-color-secondary); }
.swiper-button-next,.swiper-button-prev { color: var(--primary-color) !important; }
.swiper-pagination-bullet-active { background: var(--primary-color) !important; }

/* ==========================================================================
   Pricing Teaser
   ========================================================================== */
/* ==========================================================================
   API Integrations Section
   ========================================================================== */
.modern-integrations-section { padding: 5rem 1.5rem; background: var(--primary-color); color: #fff; position: relative; overflow: hidden; }
.modern-integrations-section::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; }
.modern-integrations__container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.modern-integrations__header { text-align: center; margin-bottom: 3.5rem; }
.modern-integrations__super-title { display: block; margin-bottom: 0.75rem; }
.modern-integrations__super-title span { display: inline-block; padding: 0.35rem 1rem; background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.3); border-radius: 50px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.modern-integrations__title { font-size: 2.25rem; font-weight: 800; color: #fff; margin-bottom: 0.5rem; letter-spacing: -0.02em; }
@media (min-width: 768px) { .modern-integrations__title { font-size: 2.75rem; } }
.modern-integrations__description { font-size: 1.05rem; color: rgba(255,255,255,0.9); max-width: 600px; margin: 0 auto; line-height: 1.75; }
body.dark-mode .modern-integrations-section { background: radial-gradient(ellipse at 15% 85%, rgba(var(--primary-color-rgb), 0.1) 0%, transparent 50%), linear-gradient(150deg, #080c14 0%, #0d1117 100%); }

.integrations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem; }
@media (min-width: 768px) { .integrations-grid { grid-template-columns: repeat(4, 1fr); gap: 2.5rem; } }

.integration-card { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); border-radius: 16px; padding: 2rem 1.5rem; text-align: center; transition: all 0.3s ease; backdrop-filter: blur(10px); }
.integration-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.25); background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.3); }

.integration-card__logo { height: 100px; width: 100px; margin: 0 auto 1.5rem; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 50%; }
.integration-card__logo img { height: 70px; width: 70px; object-fit: contain; }
body.dark-mode .integration-card__logo { background: #fff; }
.integration-card__logo i { font-size: 2.5rem; color: var(--primary-color); }
body.dark-mode .integration-card__logo i { color: #fff; }

.integration-card h4 { font-size: 1.1rem; font-weight: 700; color: #fff; margin-bottom: 0.5rem; }

.integration-card p { font-size: 0.9rem; color: rgba(255,255,255,0.85); line-height: 1.6; margin: 0; }

.modern-pricing-teaser { padding: 5rem 1.5rem; background: #fff; text-align: center; }
body.dark-mode .modern-pricing-teaser { background: rgba(255,255,255,0.015); }
.modern-pricing-teaser__container { max-width: 1100px; margin: 0 auto; }
.modern-pricing-teaser__super-title { display: block; margin-bottom: 0.75rem; }
.modern-pricing-teaser__super-title span { display: inline-block; padding: 0.35rem 1rem; background: rgba(var(--primary-color-rgb), 0.1); color: var(--primary-color); border: 1px solid rgba(var(--primary-color-rgb), 0.22); border-radius: 50px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
body.dark-mode .modern-pricing-teaser__super-title span { background: rgba(var(--primary-color-rgb), 0.2); }
.modern-pricing-teaser__title { font-size: 2.25rem; font-weight: 800; color: var(--text-color-headings); margin-bottom: 1rem; letter-spacing: -0.02em; }
@media (min-width: 768px) { .modern-pricing-teaser__title { font-size: 2.75rem; } }
body.dark-mode .modern-pricing-teaser__title { color: var(--dm-text-color-headings); }
.modern-pricing-teaser__description { font-size: 1.05rem; color: var(--text-color-secondary); max-width: 680px; margin: 0 auto 3rem; line-height: 1.8; }
body.dark-mode .modern-pricing-teaser__description { color: var(--dm-text-color-secondary); }
.pricing-vat-note { font-size: 0.9rem; color: var(--text-color-secondary); margin-top: 2rem; text-align: center; margin-bottom: 0; }
body.dark-mode .pricing-vat-note { color: rgba(255,255,255,0.75); }
.modern-pricing-teaser__grid { display: grid; gap: 1.5rem; max-width: 950px; margin: 0 auto; }
@media (min-width: 768px) { .modern-pricing-teaser__grid { grid-template-columns: repeat(3, 1fr); align-items: center; } }

.pricing-card { background: var(--body-bg-color, #F8F9FF); border: 1.5px solid rgba(0,0,0,0.07); border-radius: 18px; padding: 2.25rem 1.75rem; text-align: center; transition: transform 0.25s ease, box-shadow 0.25s ease; position: relative; }
.pricing-card:hover { transform: translateY(-4px); box-shadow: 0 14px 38px rgba(0,0,0,0.09); }
body.dark-mode .pricing-card { background: var(--dm-component-bg-color); border-color: rgba(255,255,255,0.1); }
.pricing-card--featured { background: var(--secondary-color); border-color: transparent; color: #fff; transform: scale(1.05); box-shadow: 0 20px 50px rgba(0,0,0,0.22); }
.pricing-card--featured:hover { transform: scale(1.05) translateY(-4px); box-shadow: 0 28px 60px rgba(0,0,0,0.28); }
body.dark-mode .pricing-card--featured { background: radial-gradient(ellipse at 15% 85%, rgba(var(--primary-color-rgb), 0.1) 0%, transparent 50%), linear-gradient(150deg, #080c14 0%, #0d1117 100%); }

.pricing-card__badge { position: absolute; top: -0.8rem; left: 50%; transform: translateX(-50%); background: var(--primary-color); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.28rem 0.9rem; border-radius: 50px; white-space: nowrap; box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.4); }

.pricing-card__name { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-color-secondary); margin-bottom: 1rem; }
.pricing-card--featured .pricing-card__name { color: rgba(255,255,255,0.55); }
body.dark-mode .pricing-card__name { color: var(--dm-text-color-secondary); }

.pricing-card__price { font-size: 2.75rem; font-weight: 800; color: var(--text-color-headings); line-height: 1; margin-bottom: 0.25rem; letter-spacing: -0.03em; }
.pricing-card--featured .pricing-card__price { color: #fff; }
body.dark-mode .pricing-card__price { color: var(--dm-text-color-headings); }
.pricing-card__period { font-size: 0.82rem; color: var(--text-color-secondary); margin-bottom: 1.75rem; }
.pricing-card--featured .pricing-card__period { color: rgba(255,255,255,0.55); }
body.dark-mode .pricing-card__period { color: var(--dm-text-color-secondary); }

.pricing-card__features { list-style: none; padding: 0; margin: 0 0 2rem; text-align: left; }
.pricing-card__features li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.875rem; color: var(--text-color-secondary); padding: 0.45rem 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
.pricing-card__features li:last-child { border-bottom: none; }
.pricing-card--featured .pricing-card__features li { color: rgba(255,255,255,0.8); border-bottom-color: rgba(255,255,255,0.08); }
.pricing-card__features li i { color: var(--primary-color); font-size: 0.8rem; flex-shrink: 0; }
body.dark-mode .pricing-card__features li { color: var(--dm-text-color-secondary); }

.pricing-card__cta { width: 100%; display: block; justify-content: center; }

.modern-pricing-teaser__cta { margin-top: 3rem; }
.modern-pricing-teaser__cta p { font-size: 0.9rem; color: var(--text-color-secondary); margin-bottom: 0.75rem; }
body.dark-mode .modern-pricing-teaser__cta p { color: var(--dm-text-color-secondary); }

/* ==========================================================================
   CTA Section — Bold Gradient
   ========================================================================== */
.modern-cta-section {
    padding: 6rem 1.5rem 5rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, #1e40af 50%, #0369a1 100%);
    color: #fff; text-align: center; position: relative; overflow: hidden;
}
.modern-cta-section::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E"); }
body.dark-mode .modern-cta-section { background: radial-gradient(ellipse at 15% 85%, rgba(var(--primary-color-rgb), 0.1) 0%, transparent 50%), linear-gradient(150deg, #080c14 0%, #0d1117 100%); }
.modern-cta-section__container { max-width: 800px; margin: 0 auto; position: relative; z-index: 1; }
.modern-cta-section__title { font-size: 2.25rem; font-weight: 800; color: #fff; margin-bottom: 0.75rem; letter-spacing: -0.02em; }
@media (min-width: 768px) { .modern-cta-section__title { font-size: 3rem; } }
.modern-cta-section__description { font-size: 1.1rem; line-height: 1.75; color: rgba(255,255,255,0.88); margin-bottom: 2rem; }
.modern-cta-section__content { margin-bottom: 1.5rem; }
.modern-cta-section__actions { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; align-items: center; }
.cta-btn, .hero-btn { display: inline-block !important; padding: 0.9rem 2.5rem !important; border: 2px solid #fff !important; color: #fff !important; text-decoration: none !important; border-radius: 10px !important; font-weight: 700 !important; font-size: 1rem !important; transition: all 0.3s ease !important; background: transparent !important; }
.cta-btn:hover, .hero-btn:hover { background: #fff !important; color: var(--secondary-color) !important; border-color: #fff !important; }
.modern-cta-section .btn--primary:hover { background: rgba(255,255,255,0.92); transform: translateY(-2px); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.modern-faq-section { padding: 5rem 1.5rem; background: var(--primary-color); color: #fff; position: relative; overflow: hidden; }
.modern-faq-section::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; }
.modern-faq-section__container { max-width: 800px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
body.dark-mode .modern-faq-section { background: radial-gradient(ellipse at 15% 85%, rgba(var(--primary-color-rgb), 0.1) 0%, transparent 50%), linear-gradient(150deg, #080c14 0%, #0d1117 100%); }
.modern-faq-section__super-title { display: block; margin-bottom: 0.75rem; }
.modern-faq-section__super-title span { display: inline-block; padding: 0.35rem 1rem; background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.3); border-radius: 50px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.modern-faq-section__title { font-size: 2.25rem; font-weight: 800; color: #fff; margin-bottom: 1rem; letter-spacing: -0.02em; }
@media (min-width: 768px) { .modern-faq-section__title { font-size: 2.75rem; } }
.modern-faq-section__description { font-size: 1.05rem; color: rgba(255,255,255,0.9); max-width: 680px; margin: 0 auto 3rem; line-height: 1.8; }
.modern-faq-section__list { text-align: left; }
.modern-faq-item { border-bottom: 1px solid rgba(255,255,255,0.15); }
.modern-faq-item__question { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 0; cursor: pointer; font-size: 1rem; font-weight: 600; color: #fff; list-style: none; transition: color 0.2s ease; }
.modern-faq-item__question::-webkit-details-marker,.modern-faq-item__question::marker { display: none; }
.modern-faq-item[open] .modern-faq-item__question { color: #fff; }
.modern-faq-item__icon { width: 20px; height: 20px; flex-shrink: 0; margin-left: 1rem; position: relative; border: 1.5px solid rgba(255,255,255,0.6); border-radius: 50%; opacity: 0.8; transition: all 0.25s ease; color: rgba(255,255,255,0.6); }
.modern-faq-item[open] .modern-faq-item__icon { opacity: 1; border-color: #fff; color: #fff; }
.modern-faq-item__icon::before { content: ''; position: absolute; top: 50%; left: 20%; width: 60%; height: 2px; background: currentColor; transform: translateY(-50%); }
.modern-faq-item__icon::after { content: ''; position: absolute; left: 50%; top: 20%; width: 2px; height: 60%; background: currentColor; transform: translateX(-50%); transition: transform 0.25s ease; }
.modern-faq-item[open] .modern-faq-item__icon::after { transform: translateX(-50%) rotate(90deg); }
.modern-faq-item__answer { padding: 0 0 1.25rem; color: rgba(255,255,255,0.8); line-height: 1.78; font-size: 0.95rem; }
.modern-faq-item__answer p:last-child { margin-bottom: 0; }
.modern-faq-section__cta { margin-top: 3rem; text-align: center; }

/* ==========================================================================
   Page Header (Blog, Contact, etc.)
   ========================================================================== */
.modern-page-header { padding: 3.5rem 1.5rem; background: var(--secondary-color); text-align: center; color: #fff; }
body.dark-mode .modern-page-header { background: var(--dm-component-bg-color); }
.modern-page-header__container { max-width: 1000px; margin: 0 auto; }
.modern-page-header__title { font-size: 2.5rem; font-weight: 800; color: #fff; margin-bottom: 0.5rem; letter-spacing: -0.02em; }
body.dark-mode .modern-page-header__title { color: var(--dm-text-color-headings); }
@media (min-width: 768px) { .modern-page-header__title { font-size: 3rem; } }
.modern-page-header__subtitle { font-size: 1.1rem; color: rgba(255,255,255,0.78); max-width: 600px; margin: 0 auto; line-height: 1.65; }
body.dark-mode .modern-page-header__subtitle { color: var(--dm-text-color-secondary); }

/* ==========================================================================
   Blog Index
   ========================================================================== */
.modern-blog-index-section { padding: 3rem 1.5rem; }
.modern-blog-index-section__container { max-width: 1200px; margin: 0 auto; }
.modern-blog-index-section__grid { display: grid; gap: 2rem; }
@media (min-width: 768px) { .modern-blog-index-section__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .modern-blog-index-section__grid { grid-template-columns: repeat(3, 1fr); } }
.modern-blog-card { background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 14px; box-shadow: 0 2px 12px rgba(0,0,0,0.04); display: flex; flex-direction: column; transition: box-shadow 0.25s ease, transform 0.25s ease; overflow: hidden; }
.modern-blog-card:hover { transform: translateY(-5px); box-shadow: 0 14px 38px rgba(0,0,0,0.1); }
body.dark-mode .modern-blog-card { background: var(--dm-component-bg-color); border-color: rgba(255,255,255,0.08); }
.modern-blog-card__image-link { display: block; }
.modern-blog-card__image { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.modern-blog-card__content { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; }
.modern-blog-card__category { display: inline-block; font-size: 0.75rem; font-weight: 700; color: var(--primary-color); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.6rem; }
.modern-blog-card__title { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.75rem; line-height: 1.4; }
.modern-blog-card__title a { color: var(--text-color-headings); }
.modern-blog-card__title a:hover { color: var(--primary-color); }
body.dark-mode .modern-blog-card__title a { color: var(--dm-text-color-headings); }
.modern-blog-card__excerpt { font-size: 0.875rem; color: var(--text-color-secondary); line-height: 1.65; margin-bottom: 1rem; flex-grow: 1; }
body.dark-mode .modern-blog-card__excerpt { color: var(--dm-text-color-secondary); }
.modern-blog-card__meta { font-size: 0.78rem; color: #888; margin-bottom: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
body.dark-mode .modern-blog-card__meta { color: var(--dm-text-color-secondary); opacity: 0.8; }
.modern-blog-card__author-avatar { width: 22px; height: 22px; border-radius: 50%; margin-right: 0.4rem; }
.modern-blog-card__read-more.btn--sm { align-self: flex-start; }
.modern-blog-index-section__no-posts { text-align: center; font-size: 1.1rem; color: var(--text-color-secondary); padding: 3rem 0; }
.modern-pagination { margin-top: 3rem; display: flex; justify-content: center; }
.modern-pagination .pagination { list-style: none; padding: 0; margin: 0; display: flex; gap: 0.4rem; }
.modern-pagination .page-item .page-link { color: var(--primary-color); border: 1.5px solid rgba(0,0,0,0.1); padding: 0.45rem 0.85rem; font-weight: 600; border-radius: 8px; transition: all 0.2s ease; font-size: 0.875rem; }
.modern-pagination .page-item .page-link:hover { background: rgba(var(--primary-color-rgb), 0.07); border-color: var(--primary-color); }
.modern-pagination .page-item.active .page-link { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.modern-pagination .page-item.disabled .page-link { color: #999; pointer-events: none; background: #fff; border-color: rgba(0,0,0,0.08); }
body.dark-mode .modern-pagination .page-item .page-link { background: var(--dm-component-bg-color); border-color: rgba(255,255,255,0.15); color: var(--primary-color); }
body.dark-mode .modern-pagination .page-item.active .page-link { background: var(--primary-color); color: #000; }

/* ==========================================================================
   Blog Article
   ========================================================================== */
.modern-blog-show-section { padding: 2rem 1.5rem; }
.modern-blog-article { max-width: 800px; margin: 0 auto; background: #fff; padding: 2.5rem; border-radius: 16px; box-shadow: 0 4px 25px rgba(0,0,0,0.06); }
body.dark-mode .modern-blog-article { background: var(--dm-component-bg-color); }
.modern-blog-article__header { margin-bottom: 2rem; text-align: center; border-bottom: 1px solid rgba(0,0,0,0.06); padding-bottom: 1.5rem; }
body.dark-mode .modern-blog-article__header { border-bottom-color: rgba(255,255,255,0.08); }
.modern-blog-article__category { display: inline-block; font-size: 0.78rem; font-weight: 700; color: var(--primary-color); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.75rem; }
.modern-blog-article__title { font-size: 2.2rem; font-weight: 800; color: var(--text-color-headings); line-height: 1.2; margin-bottom: 1rem; letter-spacing: -0.02em; }
body.dark-mode .modern-blog-article__title { color: var(--dm-text-color-headings); }
@media (min-width: 768px) { .modern-blog-article__title { font-size: 2.75rem; } }
.modern-blog-article__meta { font-size: 0.875rem; color: #888; }
.modern-blog-article__meta span { margin-right: 1rem; }
body.dark-mode .modern-blog-article__meta { color: var(--dm-text-color-secondary); }
.modern-blog-article__featured-image { margin: 0 0 2rem; }
.modern-blog-article__featured-image img { width: 100%; border-radius: 12px; }
.modern-blog-article__content.prose { font-size: 1.05rem; line-height: 1.8; color: var(--text-color-primary); }
body.dark-mode .modern-blog-article__content.prose { color: var(--dm-text-color-primary); }
.prose h2 { font-size: 1.6em; margin-top: 2em; margin-bottom: 0.75em; } .prose h3 { font-size: 1.35em; margin-top: 1.75em; margin-bottom: 0.5em; }
.prose p { margin-bottom: 1.25em; } .prose ul,.prose ol { margin-bottom: 1.25em; padding-left: 1.5em; } .prose li { margin-bottom: 0.5em; }
.prose blockquote { font-style: italic; color: var(--text-color-secondary); padding: 1rem 1.5rem; margin: 1.5rem 0; border-left: 4px solid var(--primary-color); background: rgba(var(--primary-color-rgb), 0.06); border-radius: 0 8px 8px 0; }
.prose a { color: var(--primary-color); text-decoration: underline; } .prose img { border-radius: 10px; margin: 1.5em 0; }
.prose pre { background: #f5f5f5; color: #333; padding: 1em; border-radius: 8px; overflow-x: auto; font-size: 0.9em; }
body.dark-mode .prose pre { background: #2d2d2d; color: #ccc; }
.prose code { background: rgba(var(--primary-color-rgb), 0.08); color: var(--primary-color); padding: 0.2em 0.4em; border-radius: 4px; font-size: 0.9em; }
.modern-blog-article__tags { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(0,0,0,0.06); }
body.dark-mode .modern-blog-article__tags { border-top-color: rgba(255,255,255,0.08); }
.modern-blog-article__tags h4 { font-size: 1rem; margin-bottom: 0.75rem; }
.modern-blog-article__tags a { display: inline-block; background: rgba(0,0,0,0.05); color: #555; padding: 0.3rem 0.75rem; border-radius: 6px; margin-right: 0.5rem; margin-bottom: 0.5rem; font-size: 0.85rem; transition: all 0.2s ease; }
.modern-blog-article__tags a:hover { background: var(--primary-color); color: #fff; }
body.dark-mode .modern-blog-article__tags a { background: rgba(255,255,255,0.08); color: var(--dm-text-color-secondary); }

/* ==========================================================================
   Contact Page
   ========================================================================== */
.modern-contact-section { padding: 3rem 1.5rem; }
.modern-contact-section__container { max-width: 1100px; margin: 0 auto; }
.modern-contact-section__grid { display: grid; gap: 3rem; }
@media (min-width: 992px) { .modern-contact-section__grid { grid-template-columns: 2fr 1fr; } }
.modern-contact-section__form-title,.modern-contact-section__details-title { font-size: 1.6rem; font-weight: 700; color: var(--text-color-headings); margin-bottom: 1.5rem; }
body.dark-mode .modern-contact-section__form-title,body.dark-mode .modern-contact-section__details-title { color: var(--dm-text-color-headings); }
.modern-contact-form .form-group { margin-bottom: 1.25rem; }
.modern-contact-form .form-control { display: block; width: 100%; padding: 0.8rem 1rem; font-size: 0.95rem; color: var(--text-color-primary); background: #fff; border: 1.5px solid rgba(0,0,0,0.1); border-radius: 10px; transition: border-color 0.15s ease, box-shadow 0.15s ease; appearance: none; }
body.dark-mode .modern-contact-form .form-control { background: var(--dm-component-bg-color); border-color: rgba(255,255,255,0.15); color: var(--dm-text-color-primary); }
.modern-contact-form .form-control:focus { border-color: var(--primary-color); outline: 0; box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.18); }
.modern-contact-form textarea.form-control { min-height: 140px; resize: vertical; }
.modern-contact-form .alert { margin-top: 1.25rem; padding: 0.8rem 1rem; border-radius: 8px; font-size: 0.9rem; }
.modern-contact-form .alert-primary { background: rgba(var(--primary-color-rgb), 0.1); color: var(--primary-color); border: 1px solid rgba(var(--primary-color-rgb), 0.2); }
.modern-contact-form .alert-danger { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.modern-contact-form .error-message { color: #dc3545; font-size: 0.85em; margin-top: 0.25rem; display: block; }
.modern-contact-detail-group { margin-bottom: 2rem; }
.modern-contact-detail-group__title { font-size: 1.1rem; font-weight: 700; color: var(--text-color-headings); margin-bottom: 1rem; }
body.dark-mode .modern-contact-detail-group__title { color: var(--dm-text-color-headings); }
.modern-contact-detail { font-size: 0.95rem; color: var(--text-color-secondary); margin-bottom: 0.75rem; display: flex; align-items: flex-start; line-height: 1.6; }
body.dark-mode .modern-contact-detail { color: var(--dm-text-color-secondary); }
.modern-contact-detail strong { color: var(--text-color-headings); font-weight: 600; }
body.dark-mode .modern-contact-detail strong { color: var(--dm-text-color-primary); }
.modern-contact-detail a { color: var(--primary-color); }
.modern-contact-detail a:hover { text-decoration: underline; }
.modern-contact-detail__icon { color: var(--primary-color); margin-right: 0.75rem; margin-top: 0.2em; width: 1.2em; text-align: center; flex-shrink: 0; }

/* ==========================================================================
   Custom Page
   ========================================================================== */
.modern-custom-page-section { padding: 2rem 1.5rem; }
.modern-custom-page-section__container { max-width: 800px; margin: 0 auto; background: #fff; padding: 2.5rem; border-radius: 16px; box-shadow: 0 4px 25px rgba(0,0,0,0.06); }
body.dark-mode .modern-custom-page-section__container { background: var(--dm-component-bg-color); }
.modern-custom-page__featured-image { margin: 0 0 2rem; }
.modern-custom-page__featured-image img { width: 100%; border-radius: 12px; }
.modern-custom-page__content.prose { font-size: 1rem; line-height: 1.75; }

/* ==========================================================================
   Footer
   ========================================================================== */
.modern-footer {
    background: var(--secondary-color);
    color: rgba(255,255,255,0.6);
    padding: 1.25rem 1.5rem;
    font-size: 0.8rem;
}
body.dark-mode .modern-footer { background: var(--dm-body-bg-color); border-top: 1px solid rgba(255,255,255,0.07); }
.modern-footer__container { max-width: 1200px; margin: 0 auto; }
.modern-footer__content { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; }
.modern-footer__logo-section { flex-shrink: 0; }
.modern-footer__logo-section .logo img { max-height: 28px; width: auto; }
.modern-footer__logo-section .dark-mode-logo-footer { max-height: 28px; }
.modern-footer__links-compact { display: flex; gap: 3rem; flex-wrap: wrap; }
@media (max-width: 768px) { .modern-footer__links-compact { flex-basis: 100%; order: 3; } }
.modern-footer__link-group { display: flex; flex-direction: column; gap: 0.3rem; }
.modern-footer__link-group h4 { color: #fff; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 0.35rem 0; }
.modern-footer__link-group ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 1rem; }
@media (max-width: 768px) { .modern-footer__link-group ul { flex-direction: column; gap: 0.2rem; } }
.modern-footer__link-group ul li { margin: 0; }
.modern-footer__link-group ul a { color: rgba(255,255,255,0.65); text-decoration: none; transition: color 0.2s ease; font-size: 0.75rem; }
.modern-footer__link-group ul a:hover { color: var(--primary-color); }
.modern-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; flex-basis: 100%; order: 4; }
@media (min-width: 768px) { .modern-footer__bottom { flex-basis: auto; order: unset; } }
.modern-footer__copyright { margin: 0; color: rgba(255,255,255,0.4); font-size: 0.7rem; line-height: 1.4; }
.modern-footer__copyright a { color: rgba(255,255,255,0.65); text-decoration: none; transition: color 0.2s ease; }
.modern-footer__copyright a:hover { color: var(--primary-color); }
.modern-footer__socials { display: flex; gap: 0.3rem; align-items: center; }
.modern-footer__socials a { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; color: rgba(255,255,255,0.6); font-size: 0.65rem; transition: all 0.2s ease; }
.modern-footer__socials a:hover { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }

/* ==========================================================================
   Top Bar (Language selector)
   ========================================================================== */
.cms-topbar {
    background: var(--secondary-color);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    font-size: 0.78rem;
    color: rgba(255,255,255,0.6);
}
body.dark-mode .cms-topbar { background: rgba(0,0,0,0.3); }
.cms-topbar__inner { max-width: 1200px; margin: 0 auto; padding: 0.35rem 1.5rem; display: flex; justify-content: flex-end; align-items: center; }
.cms-topbar__lang { position: relative; }
.topbar-lang-wrap { position: relative; }
.topbar-lang-btn { background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 0.4rem; color: rgba(255,255,255,0.65); font-size: 0.78rem; font-weight: 500; padding: 0.2rem 0.4rem; border-radius: 4px; transition: color 0.2s ease; }
.topbar-lang-btn:hover { color: #fff; }
.topbar-lang-dropdown { position: absolute; top: calc(100% + 6px); right: 0; background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 8px; padding: 0.4rem; min-width: 140px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); display: none; z-index: 2000; }
.topbar-lang-dropdown.is-open { display: block; }
body.dark-mode .topbar-lang-dropdown { background: var(--dm-component-bg-color); border-color: rgba(255,255,255,0.1); }
.topbar-lang-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem; border-radius: 5px; color: var(--text-color-primary); font-size: 0.82rem; white-space: nowrap; transition: background 0.15s ease; }
.topbar-lang-item:hover { background: rgba(var(--primary-color-rgb), 0.08); color: var(--primary-color); }
body.dark-mode .topbar-lang-item { color: var(--dm-text-color-primary); }

/* ==========================================================================
   Cloud vs On-Premise Section
   ========================================================================== */
.modern-options-section { padding: 5rem 1.5rem; background: var(--body-bg-color, #F8F9FF); text-align: center; }
body.dark-mode .modern-options-section { background: var(--dm-body-bg-color); }
.modern-options__container { max-width: 1100px; margin: 0 auto; }
.modern-options__super-title { display: block; margin-bottom: 0.75rem; }
.modern-options__super-title span { display: inline-block; padding: 0.35rem 1rem; background: rgba(var(--primary-color-rgb), 0.1); color: var(--primary-color); border: 1px solid rgba(var(--primary-color-rgb), 0.22); border-radius: 50px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.modern-options__title { font-size: 2.25rem; font-weight: 800; color: var(--text-color-headings); margin-bottom: 1rem; letter-spacing: -0.02em; }
@media (min-width: 768px) { .modern-options__title { font-size: 2.75rem; } }
body.dark-mode .modern-options__title { color: var(--dm-text-color-headings); }
.modern-options__description { font-size: 1.05rem; color: var(--text-color-secondary); max-width: 680px; margin: 0 auto 3rem; line-height: 1.8; }
body.dark-mode .modern-options__description { color: var(--dm-text-color-secondary); }

.modern-options__grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 2rem; align-items: center; margin-bottom: 3rem; }
@media (max-width: 767px) { .modern-options__grid { grid-template-columns: 1fr; gap: 3.5rem; } }

.option-card { background: #fff; border: 1.5px solid rgba(0,0,0,0.07); border-radius: 20px; padding: 2.5rem 2rem; text-align: left; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.option-card:hover { transform: translateY(-5px); box-shadow: 0 14px 40px rgba(0,0,0,0.1); }
body.dark-mode .option-card { background: var(--dm-component-bg-color); border-color: rgba(255,255,255,0.1); }

.option-card--cloud { border-top: 4px solid var(--primary-color); }
.option-card--onpremise { border-top: 4px solid var(--secondary-color); }
body.dark-mode .option-card--onpremise { border-top-color: rgba(255,255,255,0.3); }

.option-card__icon-wrap { width: 56px; height: 56px; border-radius: 14px; background: var(--primary-color); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; margin-bottom: 1.25rem; }
.option-card--onpremise .option-card__icon-wrap { background: var(--primary-color); }

.option-card__title { font-size: 1.3rem; font-weight: 800; color: var(--text-color-headings); margin-bottom: 1.25rem; }
body.dark-mode .option-card__title { color: var(--dm-text-color-headings); }

.option-card__features { list-style: none; padding: 0; margin: 0 0 2rem; }
.option-card__features li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.875rem; color: var(--text-color-secondary); padding: 0.45rem 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
.option-card__features li:last-child { border-bottom: none; }
.option-card__features li i { color: var(--primary-color); flex-shrink: 0; margin-top: 0.1rem; }
body.dark-mode .option-card__features li { color: var(--dm-text-color-secondary); border-bottom-color: rgba(255,255,255,0.06); }

.option-card__cta { width: 100%; justify-content: center; }
.option-card__vs { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.option-card__vs span { width: 44px; height: 44px; border-radius: 50%; background: var(--secondary-color); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.05em; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
@media (max-width: 767px) { .option-card__vs { display: none; } }

.modern-options__addons { display: grid; gap: 1.5rem; max-width: 700px; margin: 0 auto; }
@media (min-width: 768px) { .modern-options__addons { grid-template-columns: repeat(2, 1fr); } }

.addon-card { background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 14px; padding: 1.5rem; display: flex; align-items: flex-start; gap: 1rem; box-shadow: 0 2px 12px rgba(0,0,0,0.03); }
body.dark-mode .addon-card { background: var(--dm-component-bg-color); border-color: rgba(255,255,255,0.08); }
.addon-card__icon { width: 60px; height: 60px; border-radius: 14px; background: rgba(var(--primary-color-rgb), 0.4); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.5rem; flex-shrink: 0; }
body.dark-mode .addon-card__icon { background: rgba(var(--primary-color-rgb), 0.5); }
.addon-card__text strong { display: block; font-size: 0.925rem; font-weight: 700; color: var(--text-color-headings); margin-bottom: 0.3rem; }
.addon-card__text p { font-size: 0.82rem; color: var(--text-color-secondary); line-height: 1.6; margin: 0; }
body.dark-mode .addon-card__text strong { color: var(--dm-text-color-headings); }
body.dark-mode .addon-card__text p { color: var(--dm-text-color-secondary); }

/* ==========================================================================
   FRCS Accreditation Section
   ========================================================================== */
.modern-accreditation-section { padding: 5rem 1.5rem; background: #fff; }
body.dark-mode .modern-accreditation-section { background: rgba(255,255,255,0.015); }
.modern-accreditation__container { max-width: 1100px; margin: 0 auto; display: grid; gap: 4rem; align-items: center; }
@media (min-width: 900px) { .modern-accreditation__container { grid-template-columns: 280px 1fr; } }

.accreditation-badge-card { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); border-radius: 20px; padding: 2rem; text-align: center; }
body.dark-mode .accreditation-badge-card { background: var(--dm-component-bg-color); border-color: rgba(255,255,255,0.1); }
.accreditation-badge-card__top { margin-bottom: 1.5rem; }
.accreditation-badge-card__label { display: inline-block; padding: 0.3rem 0.9rem; background: var(--primary-color); color: #fff; border-radius: 50px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }

.accreditation-seal { display: flex; justify-content: center; margin-bottom: 1.5rem; }
.accreditation-seal__ring { width: 130px; height: 130px; border-radius: 50%; border: 5px solid var(--primary-color); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.3); }
.accreditation-seal__inner { text-align: center; }
.accreditation-seal__acronym { display: block; font-size: 1.6rem; font-weight: 800; color: var(--primary-color); line-height: 1; }
.accreditation-seal__sub { display: block; font-size: 0.7rem; font-weight: 700; color: rgba(255,255,255,0.7); letter-spacing: 0.1em; }
.accreditation-seal__accredited { display: block; font-size: 0.58rem; font-weight: 700; color: rgba(255,255,255,0.5); letter-spacing: 0.15em; text-transform: uppercase; margin-top: 2px; }
body.dark-mode .accreditation-seal__sub,body.dark-mode .accreditation-seal__accredited { color: var(--dm-text-color-secondary); }

.accreditation-badge-card__body { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1rem; }
.accreditation-badge-card__system { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 0.25rem; }
.accreditation-badge-card__id { font-size: 0.875rem; color: #fff; margin-bottom: 0.5rem; }
.accreditation-badge-card__id strong { color: #fff; font-weight: 700; }
.accreditation-badge-card__issuer { font-size: 0.75rem; color: rgba(255,255,255,0.45); margin: 0; }
body.dark-mode .accreditation-badge-card__system { color: var(--dm-text-color-headings); }
body.dark-mode .accreditation-badge-card__id,.body.dark-mode .accreditation-badge-card__issuer { color: var(--dm-text-color-secondary); }

.modern-accreditation__super-title { display: block; margin-bottom: 0.75rem; }
.modern-accreditation__super-title span { display: inline-block; padding: 0.35rem 1rem; background: rgba(var(--primary-color-rgb), 0.1); color: var(--primary-color); border: 1px solid rgba(var(--primary-color-rgb), 0.22); border-radius: 50px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
body.dark-mode .modern-accreditation__super-title span { background: rgba(var(--primary-color-rgb), 0.2); }
.modern-accreditation__title { font-size: 2rem; font-weight: 800; color: var(--text-color-headings); margin-bottom: 0.5rem; letter-spacing: -0.02em; }
@media (min-width: 768px) { .modern-accreditation__title { font-size: 2.5rem; } }
body.dark-mode .modern-accreditation__title { color: var(--dm-text-color-headings); }
.modern-accreditation__subtitle { font-size: 0.95rem; color: var(--text-color-primary); font-weight: 600; margin-bottom: 1.25rem; }
.modern-accreditation__body { font-size: 1rem; color: var(--text-color-secondary); line-height: 1.8; margin-bottom: 2rem; opacity: 1; }
body.dark-mode .modern-accreditation__body { color: var(--dm-text-color-secondary); }

.accreditation-points { display: flex; flex-direction: column; gap: 1.25rem; }
.accreditation-point { display: flex; align-items: flex-start; gap: 1rem; }
.accreditation-point__icon { width: 42px; height: 42px; border-radius: 10px; background: rgba(var(--primary-color-rgb), 0.4); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; flex-shrink: 0; font-weight: 600; }
.accreditation-point strong { display: block; font-size: 0.925rem; font-weight: 700; color: var(--text-color-headings); margin-bottom: 0.2rem; }
.accreditation-point p { font-size: 0.82rem; color: var(--text-color-secondary); opacity: 1; line-height: 1.6; margin: 0; }
body.dark-mode .accreditation-point__icon { background: rgba(var(--primary-color-rgb), 0.5); color: #fff; }
body.dark-mode .accreditation-point strong { color: var(--dm-text-color-primary); }
body.dark-mode .accreditation-point p { color: var(--dm-text-color-secondary); }

/* ==========================================================================
   SDWAN / Access From Anywhere Section
   ========================================================================== */
.modern-sdwan-section { padding: 5rem 1.5rem; background: var(--primary-color); color: #fff; position: relative; overflow: hidden; }
.modern-sdwan-section::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; }
body.dark-mode .modern-sdwan-section { background: radial-gradient(ellipse at 15% 85%, rgba(var(--primary-color-rgb), 0.1) 0%, transparent 50%), linear-gradient(150deg, #080c14 0%, #0d1117 100%); }
.modern-sdwan__container { max-width: 1100px; margin: 0 auto; display: grid; gap: 4rem; align-items: center; position: relative; z-index: 1; }
@media (min-width: 900px) { .modern-sdwan__container { grid-template-columns: 1fr 360px; } }

.modern-sdwan__super-title { display: block; margin-bottom: 0.75rem; }
.modern-sdwan__super-title span { display: inline-block; padding: 0.35rem 1rem; background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.3); border-radius: 50px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.modern-sdwan__title { font-size: 2rem; font-weight: 800; color: #fff; margin-bottom: 1rem; letter-spacing: -0.02em; }
@media (min-width: 768px) { .modern-sdwan__title { font-size: 2.5rem; } }
.modern-sdwan__body { font-size: 1rem; color: rgba(255,255,255,0.9); line-height: 1.8; margin-bottom: 2rem; }

.sdwan-features { display: flex; flex-direction: column; gap: 1.25rem; }
.sdwan-feature { display: flex; align-items: flex-start; gap: 1rem; }
.sdwan-feature__icon { width: 42px; height: 42px; border-radius: 10px; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; flex-shrink: 0; }
.sdwan-feature__text strong { display: block; font-size: 0.925rem; font-weight: 700; color: #fff; margin-bottom: 0.2rem; }
.sdwan-feature__text p { font-size: 0.82rem; color: rgba(255,255,255,0.85); line-height: 1.6; margin: 0; }

.sdwan-visual-card { background: var(--secondary-color); border-radius: 20px; padding: 2rem; text-align: center; }
.sdwan-visual-card__icon { font-size: 2.5rem; color: #fff; margin-bottom: 1.5rem; }
.sdwan-visual-card__items { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.sdwan-node { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); border-radius: 12px; padding: 1rem 0.75rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; transition: background 0.2s ease; }
.sdwan-node:hover { background: rgba(255,255,255,0.18); }
.sdwan-node i { font-size: 1.5rem; color: #fff; }
.sdwan-node span { font-size: 0.72rem; color: #fff; font-weight: 600; text-align: center; }
.sdwan-visual-card__label { font-size: 0.78rem; color: #fff; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

/* Certificate image frame */
.accreditation-cert-frame { border-radius: 16px; overflow: hidden; box-shadow: 0 8px 40px rgba(0,0,0,0.35); background: #fff; }
.accreditation-cert-img { width: 100%; height: auto; display: block; }
.accreditation-cert-caption { background: var(--primary-color); color: #fff; text-align: center; padding: 0.75rem 1rem; font-size: 0.8rem; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.accreditation-badge-card__upload-hint { font-size: 0.72rem; color: rgba(255,255,255,0.4); margin-top: 0.75rem; line-height: 1.5; }
.accreditation-badge-card__upload-hint code { background: rgba(255,255,255,0.1); padding: 0.1rem 0.3rem; border-radius: 3px; font-size: 0.68rem; }

/* Active nav link */
/* Active nav link — just color + underline, no background box */
.modern-navbar__links a.is-active {
    color: var(--primary-color) !important;
    background: none !important;
    position: relative;
}
.modern-navbar__links a.is-active::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 50%;
    transform: translateX(-50%);
    width: 20px; height: 2px;
    background: var(--primary-color);
    border-radius: 2px;
}

/* ==========================================================================
   Inline Contact Section
   ========================================================================== */
.modern-contact-inline-section { padding: 5rem 1.5rem; background: #fff; }
body.dark-mode .modern-contact-inline-section { background: var(--dm-body-bg-color); }
.modern-contact-inline__header { text-align: center; margin-bottom: 3.5rem; max-width: 800px; margin-left: auto; margin-right: auto; }
.modern-contact-inline__title { color: var(--text-color-headings) !important; }
.modern-contact-inline__description { color: var(--text-color-secondary) !important; }
.contact-box { background: var(--secondary-color); border-radius: 20px; padding: 2.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2.5rem; max-width: 1300px; margin: 0 auto; }
body.dark-mode .contact-box { background: var(--dm-component-bg-color); }
.contact-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2.5rem; max-width: 1300px; margin: 0 auto; }
.modern-contact-inline__super-title { display: block; margin-bottom: 0.75rem; }
.modern-contact-inline__super-title span { display: inline-block; padding: 0.35rem 1rem; background: rgba(var(--primary-color-rgb), 0.1); color: var(--primary-color); border: 1px solid rgba(var(--primary-color-rgb), 0.22); border-radius: 50px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.modern-contact-inline__title { font-size: 2.25rem; font-weight: 800; color: var(--text-color-headings); margin-bottom: 0.5rem; letter-spacing: -0.02em; }
@media (min-width: 768px) { .modern-contact-inline__title { font-size: 2.75rem; } }
body.dark-mode .modern-contact-inline__title { color: var(--dm-text-color-headings); }
.modern-contact-inline__description { font-size: 1.05rem; color: var(--text-color-secondary); max-width: 600px; margin: 0 auto; line-height: 1.75; }
body.dark-mode .modern-contact-inline__description { color: var(--dm-text-color-secondary); }

.modern-contact-inline__grid { display: grid; gap: 3rem; justify-content: center; max-width: 100%; margin: 0 auto; }

.modern-contact-inline__details-col { margin: 0 auto; width: 100%; }

.contact-item { display: flex; align-items: flex-start; gap: 1.25rem; }
.contact-box .contact-item { }
.contact-item__icon { width: 50px; height: 50px; border-radius: 12px; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.3rem; flex-shrink: 0; }
.contact-box .contact-item__icon { background: rgba(255,255,255,0.2); color: #fff; }
.contact-item__content strong { display: block; color: var(--text-color-headings); margin-bottom: 0.5rem; font-size: 0.95rem; font-weight: 700; }
.contact-box .contact-item__content strong { color: #fff; }
.contact-item__content p { margin: 0.3rem 0; color: var(--text-color-secondary); font-size: 0.9rem; }
.contact-box .contact-item__content p { color: #fff; opacity: 0.9; }
.contact-item__content a { color: var(--primary-color); text-decoration: underline; }
.contact-box .contact-item__content a { color: #fff; text-decoration: underline; }

.contact-socials { display: flex; gap: 0.8rem; justify-content: center; margin-top: 1rem; }
.contact-socials a { width: 40px; height: 40px; border-radius: 10px; background: rgba(var(--primary-color-rgb), 0.1); border: 1.5px solid rgba(var(--primary-color-rgb), 0.25); color: var(--primary-color); display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; }
.contact-socials a:hover { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }

.contact-info-card { background: var(--secondary-color); border-radius: 18px; padding: 2rem; display: flex; flex-direction: column; gap: 1.5rem; flex: 1; max-width: 100%; }
body.dark-mode .contact-info-card { background: var(--dm-component-bg-color); }
.contact-info-card__item { display: flex; align-items: flex-start; gap: 1rem; }
.contact-info-card__icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; flex-shrink: 0; }
.contact-info-card__icon i { color: #fff !important; }
.contact-info-card__item strong { display: block; font-size: 0.875rem; font-weight: 700; color: #fff; margin-bottom: 0.35rem; }
body.dark-mode .contact-info-card__item strong { color: var(--dm-text-color-headings); }
.contact-info-card__item p { font-size: 0.875rem; color: #fff; margin: 0 0 0.15rem; opacity: 0.9; }
body.dark-mode .contact-info-card__item p { color: var(--dm-text-color-secondary); opacity: 1; }
.contact-info-card__item a { color: #fff; font-size: 0.875rem; font-weight: 600; }
.contact-info-card__item a:hover { color: #fff; text-decoration: underline; }
.contact-demo-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; font-size: 0.82rem; font-weight: 600; color: #fff !important; background: rgba(255,255,255,0.18); padding: 0.4rem 0.9rem; border-radius: 6px; border: 1px solid rgba(255,255,255,0.3); }
.contact-demo-link:hover { background: rgba(255,255,255,0.25); }
.contact-info-card__socials { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.contact-info-card__socials a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: rgba(255,255,255,0.15); border: 1.5px solid rgba(255,255,255,0.25); border-radius: 8px; color: #fff; font-size: 0.85rem; transition: all 0.2s ease; }
.contact-info-card__socials a:hover { background: #fff; border-color: #fff; color: var(--secondary-color); }

/* ==========================================================================
   Certificate Lightbox
   ========================================================================== */
.cert-lightbox { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.85); align-items: center; justify-content: center; padding: 1.5rem; }
.cert-lightbox.is-open { display: flex; }
.cert-lightbox__inner { position: relative; max-width: 860px; width: 100%; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,0.5); animation: lightboxIn 0.2s ease; }
@keyframes lightboxIn { from { opacity:0; transform:scale(0.94); } to { opacity:1; transform:scale(1); } }
.cert-lightbox__inner img { width: 100%; height: auto; display: block; }
.cert-lightbox__close { position: absolute; top: 0.75rem; right: 0.75rem; width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: background 0.2s ease; z-index: 1; }
.cert-lightbox__close:hover { background: rgba(0,0,0,0.8); }
.cert-lightbox__caption { text-align: center; padding: 1rem 1.5rem; font-size: 0.82rem; color: #555; line-height: 1.6; background: #f8f8f8; margin: 0; }

/* ==========================================================================
   Hero — Split Layout
   ========================================================================== */
.hero-section-modern--split {
    min-height: 92vh;
    padding: 5rem 2rem 5rem;
    text-align: left;
    align-items: center;
}
.hero-split__container {
    position: relative; z-index: 2;
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 4rem; align-items: center;
}
@media (max-width: 900px) {
    .hero-section-modern--split { text-align: center; padding: 4rem 1.5rem; }
    .hero-split__container { grid-template-columns: 1fr; gap: 3rem; }
    .hero-split__right { order: -1; }
    .hero-section-modern__actions { justify-content: center; }
    .hero-section-modern__trust { justify-content: center; }
}
.hero-split__left .hero-badge { display: inline-flex; }

/* Hero gradient — light mode */
.hero-section-modern:not([style*="background-image"]) {
    background:
        radial-gradient(ellipse at 15% 85%, rgba(var(--primary-color-rgb), 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 15%, rgba(var(--primary-color-rgb), 0.08) 0%, transparent 45%),
        linear-gradient(150deg, var(--secondary-color) 0%, #0a1628 100%);
}
/* Hero gradient — dark mode: much darker to match the dark navbar */
body.dark-mode .hero-section-modern:not([style*="background-image"]) {
    background:
        radial-gradient(ellipse at 15% 85%, rgba(var(--primary-color-rgb), 0.1) 0%, transparent 50%),
        linear-gradient(150deg, #080c14 0%, #0d1117 100%);
}
/* Text always white on hero */
.hero-section-modern__title,
.hero-section-modern__description { color: #fff !important; }

/* Hero buttons — adjust for dark mode since bg is very dark now */
body.dark-mode .hero-section-modern .btn--primary {
    background: var(--primary-color);
    color: #fff !important;
}
body.dark-mode .hero-section-modern .btn--outline-light {
    border-color: rgba(255,255,255,0.35);
    color: rgba(255,255,255,0.85);
}
body.dark-mode .hero-section-modern .btn--outline-light:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

/* ==========================================================================
   Dashboard Mockup
   ========================================================================== */
.hero-mockup {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.08);
    transform: perspective(1000px) rotateY(-4deg) rotateX(2deg);
    transition: transform 0.4s ease;
}
.hero-mockup:hover { transform: perspective(1000px) rotateY(0deg) rotateX(0deg); }
.hero-mockup--img img { width: 100%; height: auto; display: block; border-radius: 14px; }

.hero-mockup__bar {
    background: #f0f2f5; border-bottom: 1px solid #e2e5ea;
    padding: 0.55rem 1rem; display: flex; align-items: center; gap: 0.4rem;
}
.hero-mockup__dot { width: 10px; height: 10px; border-radius: 50%; }
.hero-mockup__dot--r { background: #ff5f57; }
.hero-mockup__dot--y { background: #febc2e; }
.hero-mockup__dot--g { background: #28c840; }
.hero-mockup__url { font-size: 0.72rem; color: #888; margin-left: 0.5rem; background: #e2e5ea; padding: 0.15rem 0.6rem; border-radius: 4px; flex: 1; text-align: center; }

.hero-mockup__body { padding: 1.25rem; background: #f8f9ff; }

.hm-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.hm-logo { font-weight: 800; font-size: 1rem; color: var(--secondary-color); }
.hm-greeting { font-size: 0.78rem; color: #666; }

.hm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1rem; }
.hm-stat { background: #fff; border-radius: 10px; padding: 0.75rem; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.hm-stat__label { display: block; font-size: 0.65rem; color: #999; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.2rem; }
.hm-stat__value { display: block; font-size: 1.05rem; font-weight: 800; color: var(--secondary-color); line-height: 1; margin-bottom: 0.25rem; }
.hm-stat__badge { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.65rem; font-weight: 600; padding: 0.15rem 0.4rem; border-radius: 4px; }
.hm-stat__badge--up { background: #dcfce7; color: #16a34a; }
.hm-stat__badge--neutral { background: #f1f5f9; color: #64748b; }

.hm-chart-label { font-size: 0.68rem; font-weight: 600; color: #999; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.hm-chart { display: flex; align-items: flex-end; gap: 4px; height: 60px; background: #fff; border-radius: 8px; padding: 0.5rem; }
.hm-bar { flex: 1; background: rgba(var(--primary-color-rgb), 0.2); border-radius: 3px 3px 0 0; transition: background 0.2s; }
.hm-bar--today { background: var(--primary-color); }
.hm-chart:hover .hm-bar { background: rgba(var(--primary-color-rgb), 0.35); }
.hm-chart:hover .hm-bar--today { background: var(--primary-color); }

.hm-footer { display: flex; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap; }
.hm-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.68rem; font-weight: 600; padding: 0.25rem 0.6rem; border-radius: 6px; }
.hm-badge--green { background: #dcfce7; color: #15803d; }
.hm-badge--blue { background: #dbeafe; color: #1d4ed8; }

.hero-mockup__upload-hint { font-size: 0.68rem; color: rgba(255,255,255,0.3); text-align: center; margin-top: 0.75rem; }
.hero-mockup__upload-hint code { background: rgba(255,255,255,0.1); padding: 0.1rem 0.3rem; border-radius: 3px; font-size: 0.65rem; }


/* ==========================================================================
   Hero dual screenshots
   ========================================================================== */
.hero-screenshots { position: relative; height: 380px; }
.hero-screenshot { position: absolute; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.5); transition: transform 0.3s ease; }
.hero-screenshot--dashboard { width: 90%; top: 0; left: 0; z-index: 2; transform: perspective(800px) rotateY(-3deg) rotateX(2deg); }
.hero-screenshot--pos { width: 75%; bottom: 0; right: 0; z-index: 3; transform: perspective(800px) rotateY(-2deg) rotateX(1deg) translateY(10px); box-shadow: 0 25px 70px rgba(0,0,0,0.6); }
.hero-screenshot:hover { transform: perspective(800px) rotateY(0deg) rotateX(0deg) translateY(0) !important; z-index: 4; }
.hero-screenshot__frame { background: #fff; border-radius: 12px; overflow: hidden; }
.hero-screenshot__bar { background: #f0f2f5; border-bottom: 1px solid #e2e5ea; padding: 0.45rem 0.75rem; display: flex; align-items: center; gap: 0.35rem; }
.hero-screenshot img { width: 100%; height: auto; display: block; }
@media (max-width: 900px) {
    .hero-screenshots { height: 280px; }
    .hero-screenshot--dashboard { width: 88%; }
    .hero-screenshot--pos { width: 72%; }
}

/* ==========================================================================
   Laptop Mockup
   ========================================================================== */
.laptop-wrap {
    position: relative;
    filter: drop-shadow(0 30px 60px rgba(0,0,0,0.5));
}

.laptop {
    position: relative;
    transform: perspective(1200px) rotateX(2deg) rotateY(-6deg);
    transition: transform 0.5s ease;
}
.laptop-wrap:hover .laptop {
    transform: perspective(1200px) rotateX(0deg) rotateY(-2deg);
}

/* Screen lid — silver aluminum to contrast with dark hero */
.laptop__screen {
    background: linear-gradient(160deg, #e5e7eb 0%, #d1d5db 100%);
    border-radius: 12px 12px 0 0;
    padding: 10px 10px 6px;
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(0,0,0,0.15);
}
/* Camera dot */
.laptop__camera {
    width: 6px; height: 6px;
    background: #374151;
    border-radius: 50%;
    margin: 0 auto 6px;
    box-shadow: 0 0 0 1.5px rgba(0,0,0,0.2), inset 0 0 0 1.5px rgba(0,0,0,0.3);
}
/* Screen content — no fixed aspect ratio, image determines height */
.laptop__display {
    background: #fff;
    border-radius: 3px;
    overflow: hidden;
    line-height: 0;
}
.laptop__display img {
    width: 100%;
    height: auto;
    display: block;
}

/* Hinge */
.laptop__hinge {
    height: 4px;
    background: linear-gradient(to bottom, #2a2a2c, #3a3a3c);
    margin: 0 1.5%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* Keyboard body — slim */
.laptop__body {
    background: linear-gradient(160deg, #e8e8ea 0%, #d4d4d6 40%, #c8c8ca 100%);
    border-radius: 0 0 8px 8px;
    padding: 8px 14px 8px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.5),
        0 4px 0 rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* Keyboard rows (CSS only) */
.laptop__keyboard-area { width: 100%; }
.laptop__keys {
    height: 32px;
    width: 100%;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(0,0,0,0.08) 0px,
            rgba(0,0,0,0.08) 22px,
            transparent 22px,
            transparent 26px
        ),
        repeating-linear-gradient(
            180deg,
            rgba(0,0,0,0.06) 0px,
            rgba(0,0,0,0.06) 11px,
            transparent 11px,
            transparent 14px
        );
    border-radius: 4px;
    background-color: rgba(0,0,0,0.04);
}

/* Touchpad */
.laptop__touchpad {
    width: 36%;
    height: 14px;
    background: rgba(0,0,0,0.08);
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.06);
}

/* Feet */
.laptop__foot {
    position: absolute;
    bottom: -3px;
    width: 12%;
    height: 4px;
    background: #a0a0a2;
    border-radius: 0 0 4px 4px;
}
.laptop__foot--l { left: 4%; }
.laptop__foot--r { right: 4%; }

/* Optional phone overlay for POS screenshot */
.laptop-phone-overlay {
    position: absolute;
    bottom: -10px;
    right: -30px;
    z-index: 10;
    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.5));
}
.phone-mockup {
    background: #1c1c1e;
    border-radius: 22px;
    padding: 10px 8px;
    width: 140px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
    transform: perspective(800px) rotateY(5deg) rotateX(-2deg);
}
.phone-mockup__screen {
    background: #000;
    border-radius: 14px;
    overflow: hidden;
    line-height: 0;
}
.phone-mockup__screen img { width: 100%; display: block; }

/* Remove old screenshot styles */
.hero-screenshots { display: none; }

/* ==========================================================================
   Interactive Laptop — Demo states
   ========================================================================== */

/* Browser chrome bar (hidden by default, slides in on demo launch) */
.laptop__browser-chrome {
    display: flex; align-items: center; gap: 0.5rem;
    background: #2a2a2c;
    padding: 5px 10px;
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}
.laptop__browser-chrome.is-visible {
    max-height: 32px; opacity: 1;
}
.laptop__chrome-dots { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.lcd--red, .lcd--yellow, .lcd--green {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.lcd--red    { background: #ff5f57; cursor: pointer; }
.lcd--red:hover { filter: brightness(1.2); }
.lcd--yellow { background: #febc2e; }
.lcd--green  { background: #28c840; }

.laptop__chrome-url {
    flex: 1; background: #3a3a3c; border-radius: 4px;
    padding: 2px 8px; display: flex; align-items: center; gap: 5px;
    font-size: 0.65rem; color: rgba(255,255,255,0.75); font-family: monospace;
    min-height: 18px;
}
.laptop__chrome-newtab {
    color: rgba(255,255,255,0.45); font-size: 0.65rem;
    flex-shrink: 0; padding: 2px 4px; border-radius: 3px;
    transition: color 0.2s;
}
.laptop__chrome-newtab:hover { color: rgba(255,255,255,0.9); }

/* Display states */
.laptop__display { position: relative; background: #fff; }
.laptop__state { display: none; width: 100%; }
.laptop__state.is-active { display: block; }
.laptop__state--loading.is-active { display: flex; }
.laptop__state--demo.is-active { display: flex; flex-direction: column; }

/* Static state */
#stateStatic { position: relative; cursor: pointer; }
#stateStatic.is-active { display: block; }
#stateStatic img { width: 100%; height: auto; display: block; }

/* Play button overlay */
.laptop__overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.3s ease;
    text-decoration: none;
}
.laptop__display:hover .laptop__overlay { background: rgba(0,0,0,0.4); }
.laptop__play-btn {
    display: inline-flex; align-items: center; gap: 0.6rem;
    background: var(--primary-color);
    color: #fff !important; text-decoration: none;
    padding: 0.65rem 1.25rem; border-radius: 50px;
    font-size: 0.82rem; font-weight: 700;
    box-shadow: 0 6px 24px rgba(0,0,0,0.4);
    opacity: 0; transform: scale(0.85);
    transition: opacity 0.25s ease, transform 0.25s ease, filter 0.2s ease;
}
.laptop__display:hover .laptop__play-btn { opacity: 1; transform: scale(1); }
.laptop__play-btn:hover { filter: brightness(1.12); color: #fff !important; }

/* Loading state */
.laptop__state--loading { align-items: center; justify-content: center;
    background: #0d1117; min-height: 200px; }
.laptop__loading-screen { text-align: center; width: 80%; }
.laptop__loading-bar {
    height: 3px; background: rgba(255,255,255,0.1);
    border-radius: 2px; overflow: hidden; margin-bottom: 1rem;
}
.laptop__loading-bar > div {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--primary-color), #60a5fa);
    border-radius: 2px; transition: width 0.1s linear;
}
#loadingText { font-size: 0.72rem; color: rgba(255,255,255,0.5); font-family: monospace; }

/* Demo / iframe state */
.laptop__state--demo { min-height: 320px; background: #fff; position: relative; }
#demoFrame { width: 100%; flex: 1; min-height: 360px; border: none; display: block; }

/* Blocked fallback — polished */
.laptop__blocked {
    display: none; flex-direction: column;
    align-items: center; justify-content: center;
    background: linear-gradient(150deg, var(--secondary-color), #0a1628);
    min-height: 300px; position: absolute; inset: 0; padding: 2rem;
}
.laptop__blocked-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; max-width: 280px; }
.laptop__blocked-icon { width: 56px; height: 56px; border-radius: 14px; background: rgba(var(--primary-color-rgb), 0.2); border: 1px solid rgba(var(--primary-color-rgb), 0.35); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--primary-color); margin-bottom: 0.25rem; }
.laptop__blocked-inner h4 { font-size: 1rem; font-weight: 700; color: #fff; margin: 0; }
.laptop__blocked-inner p { font-size: 0.78rem; color: rgba(255,255,255,0.6); line-height: 1.6; margin: 0; }
.laptop__blocked-inner .btn { font-size: 0.85rem; padding: 0.65rem 1.4rem; }
.laptop__blocked-creds { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; font-size: 0.68rem; color: rgba(255,255,255,0.4); }
.laptop__blocked-creds span { display: flex; align-items: center; gap: 0.3rem; }

/* ==========================================================================
   Laptop overlay — two buttons
   ========================================================================== */
.laptop__overlay-btns { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; opacity: 0; transform: scale(0.9); transition: opacity 0.25s ease, transform 0.25s ease; }
#stateStatic:hover .laptop__overlay-btns { opacity: 1; transform: scale(1); }
.laptop__demo-link { font-size: 0.72rem; color: rgba(255,255,255,0.75); text-decoration: none; display: flex; align-items: center; gap: 0.3rem; background: rgba(255,255,255,0.12); padding: 0.3rem 0.8rem; border-radius: 20px; border: 1px solid rgba(255,255,255,0.2); transition: all 0.2s ease; }
.laptop__demo-link:hover { color: #fff; background: rgba(255,255,255,0.22); }

/* ==========================================================================
   Mini POS Game
   ========================================================================== */
.minipos { display: flex; flex-direction: column; height: 100%; background: #f0f2f7; font-family: 'Inter', sans-serif; font-size: 12px; user-select: none; }

/* Header */
.minipos__header { background: var(--secondary-color); color: #fff; padding: 6px 10px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.minipos__header-left { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 11px; }
.minipos__header-left i { color: var(--primary-color); }
.minipos__loc { font-weight: 400; opacity: 0.65; font-size: 10px; }
.minipos__header-right { display: flex; align-items: center; gap: 8px; font-size: 10px; opacity: 0.75; }
.minipos__badge { background: rgba(var(--primary-color-rgb), 0.25); color: var(--primary-color); padding: 1px 6px; border-radius: 4px; font-size: 9px; font-weight: 700; }

/* Body layout */
.minipos__body { display: flex; flex: 1; overflow: hidden; }

/* Products panel */
.minipos__products-panel { flex: 1.4; display: flex; flex-direction: column; border-right: 1px solid #dde1ea; overflow: hidden; }
.minipos__search { background: #fff; padding: 5px 8px; display: flex; align-items: center; gap: 6px; color: #999; font-size: 10px; border-bottom: 1px solid #eee; flex-shrink: 0; }
.minipos__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 6px; overflow-y: auto; flex: 1; }

.pos-product { background: #fff; border: 1.5px solid #e8eaf0; border-radius: 8px; padding: 6px 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: all 0.15s ease; position: relative; }
.pos-product:hover { border-color: var(--primary-color); background: rgba(var(--primary-color-rgb), 0.04); transform: scale(1.02); }
.pos-product--active { border-color: var(--primary-color); background: rgba(var(--primary-color-rgb), 0.07); }
.pos-product__icon { font-size: 18px; line-height: 1; }
.pos-product__name { font-size: 9px; font-weight: 600; color: #333; text-align: center; line-height: 1.2; }
.pos-product__price { font-size: 9px; color: var(--primary-color); font-weight: 700; }
.pos-product__qty { position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; background: var(--primary-color); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 800; }

/* Cart panel */
.minipos__cart-panel { width: 160px; flex-shrink: 0; display: flex; flex-direction: column; background: #fff; }
.minipos__cart-header { padding: 6px 8px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; font-weight: 700; font-size: 11px; color: var(--secondary-color); flex-shrink: 0; }
.minipos__clear { background: none; border: none; cursor: pointer; font-size: 9px; color: #999; padding: 2px 4px; border-radius: 3px; }
.minipos__clear:hover { background: #fee2e2; color: #dc2626; }

.minipos__cart-list { flex: 1; overflow-y: auto; padding: 4px; }
.minipos__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 80px; color: #ccc; gap: 4px; font-size: 10px; }
.minipos__empty i { font-size: 18px; }

.pos-cart-item { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 5px 4px; border-bottom: 1px solid #f5f5f5; gap: 4px; row-gap: 2px; }
.pos-ci__name { font-size: 9px; color: #333; font-weight: 500; grid-column: 1; }
.pos-ci__controls { display: flex; align-items: center; gap: 3px; grid-column: 2; }
.pos-ci__controls button { width: 16px; height: 16px; border-radius: 50%; border: 1px solid #e0e0e0; background: #f8f8f8; cursor: pointer; font-size: 10px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.pos-ci__controls button:hover { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.pos-ci__controls span { font-size: 10px; font-weight: 700; min-width: 14px; text-align: center; }
.pos-ci__line { font-size: 9px; color: var(--primary-color); font-weight: 700; grid-column: 1 / -1; text-align: right; }

/* Cart footer */
.minipos__cart-footer { border-top: 1px solid #eee; padding: 6px; flex-shrink: 0; }
.minipos__summary { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.minipos__summary > div { display: flex; justify-content: space-between; font-size: 9px; color: #666; }
.minipos__total-row { display: flex; justify-content: space-between; font-size: 11px; font-weight: 800; color: var(--secondary-color); padding: 4px 0; border-top: 1.5px solid #eee; margin-bottom: 6px; }
.minipos__pay-row { display: flex; gap: 4px; }
.minipos__pay { flex: 1; padding: 6px 4px; border: none; border-radius: 6px; cursor: pointer; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 3px; transition: all 0.15s ease; }
.minipos__pay:hover { transform: translateY(-1px); filter: brightness(1.08); }
.minipos__pay--cash { background: #16a34a; color: #fff; }
.minipos__pay--card { background: var(--secondary-color); color: #fff; }

/* Receipt overlay */
.minipos__receipt-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.55); display: none; align-items: center; justify-content: center; z-index: 10; backdrop-filter: blur(2px); }
.minipos__receipt-overlay.is-visible { display: flex; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from{opacity:0;transform:scale(0.9)} to{opacity:1;transform:scale(1)} }

.minipos__receipt { background: #fff; width: 130px; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.minipos__receipt-check { background: #16a34a; color: #fff; text-align: center; padding: 8px; font-size: 20px; }
.minipos__receipt-brand { text-align: center; font-size: 9px; font-weight: 700; color: var(--secondary-color); padding: 5px; border-bottom: 1px dashed #ddd; }
.minipos__receipt-items { padding: 4px 6px; max-height: 100px; overflow-y: auto; }
.rline { display: flex; justify-content: space-between; font-size: 8px; color: #333; padding: 2px 0; }
.minipos__receipt-divider { border-top: 1px dashed #ddd; margin: 2px 6px; }
.minipos__receipt-total { padding: 3px 6px; display: grid; grid-template-columns: 1fr auto; gap: 2px; font-size: 8px; }
.r-total { font-weight: 800; font-size: 10px; color: var(--secondary-color); }
.minipos__receipt-method { text-align: center; font-size: 8px; color: #16a34a; font-weight: 600; padding: 3px; }
.minipos__receipt-footer { text-align: center; font-size: 7px; color: #999; padding: 4px; border-top: 1px dashed #ddd; line-height: 1.5; }
.minipos__new-sale { width: 100%; padding: 7px; background: var(--primary-color); color: #fff; border: none; cursor: pointer; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 4px; transition: filter 0.2s; }
.minipos__new-sale:hover { filter: brightness(1.1); }

/* ==========================================================================
   Partners Section
   ========================================================================== */
.modern-partners-section { padding: 5rem 1.5rem; background: #fff; }
body.dark-mode .modern-partners-section { background: rgba(255,255,255,0.015); }
.modern-partners__container { max-width: 1200px; margin: 0 auto; }
.modern-partners__header { text-align: center; margin-bottom: 3.5rem; }
.modern-partners__super-title { display: block; margin-bottom: 0.75rem; }
.modern-partners__super-title span { display: inline-block; padding: 0.35rem 1rem; background: rgba(var(--primary-color-rgb), 0.1); color: var(--primary-color); border: 1px solid rgba(var(--primary-color-rgb), 0.22); border-radius: 50px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
body.dark-mode .modern-partners__super-title span { background: rgba(var(--primary-color-rgb), 0.2); }
.modern-partners__title { font-size: 2.25rem; font-weight: 800; color: var(--text-color-headings); margin-bottom: 0.5rem; letter-spacing: -0.02em; }
@media (min-width: 768px) { .modern-partners__title { font-size: 2.75rem; } }
body.dark-mode .modern-partners__title { color: var(--dm-text-color-headings); }
.modern-partners__description { font-size: 1.05rem; color: var(--text-color-secondary); max-width: 600px; margin: 0 auto; line-height: 1.75; }
body.dark-mode .modern-partners__description { color: var(--dm-text-color-secondary); }

.partners-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; max-width: 700px; margin: 0 auto; }
@media (min-width: 768px) { .partners-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; } }
@media (min-width: 1200px) { .partners-grid { grid-template-columns: repeat(2, 1fr); } }

.partner-card { background: #f8f9ff; border: 1px solid rgba(0,0,0,0.06); border-radius: 16px; padding: 2rem 1.5rem; text-align: center; transition: all 0.3s ease; position: relative; }
body.dark-mode .partner-card { background: var(--dm-component-bg-color); border-color: rgba(255,255,255,0.08); }
.partner-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); }
body.dark-mode .partner-card:hover { box-shadow: 0 12px 30px rgba(0,0,0,0.3); }

.partner-badge { position: absolute; top: 12px; right: -40px; width: 180px; padding: 0.6rem; text-align: center; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.5px; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transform: rotate(45deg); z-index: 10; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
.partner-badge { background: linear-gradient(to bottom, #FCD34D 0%, #F59E0B 100%); color: #7C2D12; }
.partner-badge::before { content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: rgba(0, 0, 0, 0.15); z-index: 0; }
.partner-badge::after { content: ''; position: absolute; right: -8px; top: 0; width: 8px; height: 100%; background: linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent); z-index: -1; }
.partner-badge i { font-size: 0.65rem; position: relative; z-index: 2; }
.partner-badge-text { position: relative; z-index: 2; }

.partner-card__logo { height: 80px; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: center; }
.partner-card__logo--icon { width: 80px; height: 80px; margin: 0 auto 1.5rem; background: var(--primary-color); border-radius: 16px; font-size: 2rem; color: #fff; }
body.dark-mode .partner-card__logo--icon { background: var(--primary-color); }
.partner-logo-placeholder { width: 80px; height: 80px; border-radius: 12px; background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.1), rgba(var(--primary-color-rgb), 0.05)); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 700; color: var(--primary-color); }

.partner-card h4 { font-size: 1.1rem; font-weight: 700; color: var(--text-color-headings); margin-bottom: 0.5rem; }
body.dark-mode .partner-card h4 { color: var(--dm-text-color-headings); }

.partner-card__role { font-size: 0.85rem; color: var(--primary-color); font-weight: 600; margin-bottom: 0.75rem; }

.partner-card__description { font-size: 0.9rem; color: var(--text-color-secondary); line-height: 1.6; margin-bottom: 1.5rem; }
body.dark-mode .partner-card__description { color: var(--dm-text-color-secondary); }

.partner-card__contact { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; }
.partner-link { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.6rem 1rem; background: rgba(var(--primary-color-rgb), 0.1); color: var(--primary-color); border-radius: 8px; font-size: 0.85rem; font-weight: 600; transition: all 0.2s ease; text-decoration: none; }
.partner-link:hover { background: rgba(var(--primary-color-rgb), 0.2); }
body.dark-mode .partner-link { background: rgba(var(--primary-color-rgb), 0.2); color: #fff; }
body.dark-mode .partner-link:hover { background: rgba(var(--primary-color-rgb), 0.3); }

/* Partner CTA Card */
.partner-card--cta { background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.08), rgba(var(--primary-color-rgb), 0.04)); border: 2px dashed rgba(var(--primary-color-rgb), 0.3); }
body.dark-mode .partner-card--cta { background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.15), rgba(var(--primary-color-rgb), 0.08)); border-color: rgba(var(--primary-color-rgb), 0.4); }
.partner-card--cta .partner-card__logo i { font-size: 3rem; color: var(--primary-color); }
body.dark-mode .partner-card--cta .partner-card__logo i { color: #fff; }
.partner-card--cta .partner-card__role { color: var(--primary-color); font-weight: 700; }