/* =====================================================================
   KARIUX THEME (theme-four) — brand override + light/dark layer
   Sits on top of the base template style.css. Scoped under
   body.theme-kariux so it never affects the other themes.
   Brand accent is DYNAMIC: var(--button) (set from getOption('main_color')).
   Dark mode: body.theme-kariux.kx-dark (toggled by the header button, persisted).
   ===================================================================== */

/* ---------- Tokens ---------- */
:root { --kx-brand: var(--button, #ff521c); }
body.theme-kariux {
    --kx-brand: var(--button, #ff521c);
    --kx-ink: #0c1116;
    --kx-ink-soft: #5a6470;
    --kx-bg: #ffffff;
    --kx-bg-soft: #f6f8fb;
    --kx-card: #ffffff;
    --kx-line: #e8ecf1;
    --kx-dark-1: #0a0d12;   /* page bg (dark) */
    --kx-dark-2: #0d1117;   /* header/soft section (dark) */
    --kx-dark-3: #121821;   /* cards (dark) */
    --kx-dark-line: #20293a;
}
/* Dark palette */
body.theme-kariux.kx-dark {
    --kx-ink: #f3f6fa;
    --kx-ink-soft: #aab4c0;
    --kx-bg: var(--kx-dark-1);
    --kx-bg-soft: var(--kx-dark-2);
    --kx-card: var(--kx-dark-3);
    --kx-line: var(--kx-dark-line);
}

/* =====================================================================
   1. Brand color remap (template accent -> dynamic var(--button))
   ===================================================================== */
body.theme-kariux .primary-btn1,
body.theme-kariux .primary-btn2,
body.theme-kariux .explore-btn:hover,
body.theme-kariux .read-more-btn:hover,
body.theme-kariux .header-area .hotline-area .icon,
body.theme-kariux .slider-btn:hover,
body.theme-kariux .single-approach .dot { background: var(--kx-brand) !important; }

body.theme-kariux .section-title span,
body.theme-kariux .about-section-title span,
body.theme-kariux .banner-content > span,
body.theme-kariux .widget-title.two span,
body.theme-kariux .service-card .content h4 a:hover,
body.theme-kariux .blog-card h4 a:hover,
body.theme-kariux .menu-list > li > a:hover,
body.theme-kariux .menu-list > li.active > a,
body.theme-kariux .footer-widget .widget-list li a:hover,
body.theme-kariux .explore-btn,
body.theme-kariux .read-more-btn,
body.theme-kariux .single-approach .content h5:hover,
body.theme-kariux .about-countdown-area .number span { color: var(--kx-brand) !important; }

body.theme-kariux .section-title span svg,
body.theme-kariux .about-section-title span svg,
body.theme-kariux .banner-content > span svg,
body.theme-kariux .home1-banner-bottom .marquee_text svg { fill: var(--kx-brand); }

body.theme-kariux .primary-btn1, body.theme-kariux .primary-btn2 { border-color: var(--kx-brand) !important; }
body.theme-kariux .service-card:hover { border-color: var(--kx-brand) !important; box-shadow: 0 24px 60px rgba(0,0,0,.08); }
body.theme-kariux .banner-content .rating-area .star li i { color: #ffb800; }

/* =====================================================================
   2. Section backgrounds the base template referenced as images
      (replaced with on-brand gradients so nothing is "missing")
   ===================================================================== */
body.theme-kariux .home1-solution-section {
    background-image: radial-gradient(900px 380px at 95% 0%, color-mix(in srgb, var(--kx-brand) 12%, transparent), transparent 70%) !important;
    background-color: #fbfaf8;
}
body.theme-kariux .home1-testimonial-section {
    background-image: linear-gradient(180deg, #0b0c0c 0%, #14171a 100%) !important;
    background-color: #0b0c0c; border-radius: 28px; margin-inline: 12px;
}
body.theme-kariux .contact-section {
    background-image: radial-gradient(700px 380px at 10% 10%, color-mix(in srgb, var(--kx-brand) 28%, transparent), transparent 60%), linear-gradient(160deg,#0b0c0c,#15181c) !important;
    background-color: #0b0c0c;
}
body.theme-kariux .banner-with-case-study-slider-section .banner-area {
    background-image: linear-gradient(160deg, color-mix(in srgb, var(--kx-brand) 90%, #000), #0b0c0c) !important;
}

/* =====================================================================
   3. Layout polish
   ===================================================================== */
body.theme-kariux .home1-banner-section .banner-content h1 { font-weight: 800; }
body.theme-kariux .banner-img-slider img { border-radius: 18px 0px 0px 0px;}
body.theme-kariux .service-card,
body.theme-kariux .feature-card,
body.theme-kariux .blog-card { border-radius: 18px; transition: .25s; }
body.theme-kariux .feature-card .icon img,
body.theme-kariux .service-card .icon img { max-height: 54px; }
body.theme-kariux .eg-card { border-radius: 18px; overflow: hidden; }
body.theme-kariux .mb-110 { margin-bottom: 90px; }
body.theme-kariux .about-countdown-area { gap: 18px; }
body.theme-kariux .logo-area img { max-height: 38px; opacity: .65; filter: grayscale(1); transition:.2s; }
body.theme-kariux .logo-area img:hover { opacity: 1; filter: none; }

/* Brand wordmark (logo fallback when no image uploaded) */
.kx-wordmark { font-weight: 800; font-size: 26px; letter-spacing: -.5px; color: #0c1116; line-height: 1; }
.kx-wordmark.light { color: #fff; }
body.theme-kariux.kx-dark .company-logo .logo-dark .kx-wordmark { color: #fff; }

/* Theme toggle button */
#kxThemeToggle {
    position: fixed; right: 22px; bottom: 22px; z-index: 999;
    width: 50px; height: 50px; border-radius: 50%; border: none;
    background: var(--kx-brand); color: #fff; font-size: 20px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 26px rgba(0,0,0,.25); cursor: pointer; transition: transform .2s;
}
#kxThemeToggle:hover { transform: translateY(-3px) rotate(-8deg); }

/* =====================================================================
   4. DARK MODE (template classes)
   ===================================================================== */
body.theme-kariux.kx-dark { background: var(--kx-dark-1); color: #d7dde5; }
body.theme-kariux.kx-dark .header-area.sticky { background: var(--kx-dark-2) !important; }
body.theme-kariux.kx-dark .header-area { background-color: transparent; border-bottom: 1px solid rgba(170, 180, 192, 0.1);}
body.theme-kariux.kx-dark .menu-list > li > a,
body.theme-kariux.kx-dark .header-area .hotline-area .content h6 a,
body.theme-kariux.kx-dark .header-area .hotline-area .content span { color: #e7edf5 !important; }
body.theme-kariux.kx-dark .company-logo .logo-dark { display: none; }
body.theme-kariux.kx-dark .company-logo .logo-light { display: inline-block !important; }
body.theme-kariux.kx-dark .home1-about-section,
body.theme-kariux.kx-dark .home1-process-section,
body.theme-kariux.kx-dark .home1-approach-section,
body.theme-kariux.kx-dark .home1-blog-section,
body.theme-kariux.kx-dark .portfolio-section,
body.theme-kariux.kx-dark .logo-section,
body.theme-kariux.kx-dark .kx-pricing-section,
body.theme-kariux.kx-dark .kx-inner-section { background: var(--kx-dark-1) !important; }
body.theme-kariux.kx-dark .home1-solution-section { background: var(--kx-dark-2) !important; background-image: radial-gradient(900px 380px at 95% 0%, color-mix(in srgb, var(--kx-brand) 16%, transparent), transparent 70%) !important; }
body.theme-kariux.kx-dark h1, body.theme-kariux.kx-dark h2, body.theme-kariux.kx-dark h3,
body.theme-kariux.kx-dark h4, body.theme-kariux.kx-dark h5, body.theme-kariux.kx-dark h6,
body.theme-kariux.kx-dark .banner-content h1 { color: #f3f6fa !important; }
body.theme-kariux.kx-dark p, body.theme-kariux.kx-dark .kx-prose,
body.theme-kariux.kx-dark .service-card .content p,
body.theme-kariux.kx-dark .feature-card .content p,
body.theme-kariux.kx-dark .single-approach .content p,
body.theme-kariux.kx-dark .blog-card .card-content p { color: #aab4c0 !important; }
body.theme-kariux.kx-dark .service-card,
body.theme-kariux.kx-dark .feature-card,
body.theme-kariux.kx-dark .feature-card.two,
body.theme-kariux.kx-dark .blog-card,
body.theme-kariux.kx-dark .single-approach,
body.theme-kariux.kx-dark .kx-card,
body.theme-kariux.kx-dark .kx-price-card,
body.theme-kariux.kx-dark .contact-form-area,
body.theme-kariux.kx-dark .accordion-item { background: var(--kx-dark-3) !important; border-color: var(--kx-dark-line) !important; }
body.theme-kariux.kx-dark .accordion-button { background: var(--kx-dark-3) !important; color: #e7edf5 !important; }
body.theme-kariux.kx-dark .blog-card h4 a,
body.theme-kariux.kx-dark .service-card .content h4 a { color: #f3f6fa !important; }
body.theme-kariux.kx-dark .footer-section { background: #05070a !important; }
body.theme-kariux.kx-dark .form-inner input,
body.theme-kariux.kx-dark .form-inner textarea,
body.theme-kariux.kx-dark .contact-form-area input,
body.theme-kariux.kx-dark .contact-form-area textarea { background: var(--kx-dark-1) !important; border-color: var(--kx-dark-line) !important; color: #e7edf5 !important; }
body.theme-kariux.kx-dark .kx-pill { background: var(--kx-dark-3); border-color: var(--kx-dark-line); color: #aab4c0; }

/* =====================================================================
   5. Helper components used by inner pages / pricing / portfolio
   ===================================================================== */
/* Uniform inner-page header (modern, light + dark aware) */
body.theme-kariux .kx-inner-banner { position: relative; overflow: hidden; text-align: center; padding: 132px 0 66px; border-bottom: 1px solid var(--kx-line); background-color: var(--kx-bg-soft); background-image: radial-gradient(720px 300px at 50% -18%, color-mix(in srgb, var(--kx-brand) 14%, transparent), transparent 72%), radial-gradient(color-mix(in srgb, var(--kx-ink) 7%, transparent) 1px, transparent 1.5px); background-size: 100% 100%, 26px 26px; }
body.theme-kariux.kx-dark .kx-inner-banner { background-color: var(--kx-dark-2); background-image: radial-gradient(720px 300px at 50% -18%, color-mix(in srgb, var(--kx-brand) 22%, transparent), transparent 72%), radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.5px); }
body.theme-kariux .kx-inner-banner .container { position: relative; z-index: 1; display: flex; flex-direction: column-reverse; align-items: center; }
body.theme-kariux .kx-inner-banner h1 { font-weight: 800; font-size: 46px; line-height: 1.12; margin: 0; color: var(--kx-ink); }
body.theme-kariux .kx-inner-banner .breadcrumb-nav { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 8px 18px; border-radius: 30px; background: var(--kx-card); border: 1px solid var(--kx-line); font-size: 13px; font-weight: 600; color: var(--kx-ink-soft); box-shadow: 0 6px 18px rgba(12,17,22,.05); }
body.theme-kariux .kx-inner-banner .breadcrumb-nav a { color: var(--kx-ink-soft); text-decoration: none; transition: color .2s; }
body.theme-kariux .kx-inner-banner .breadcrumb-nav a:hover { color: var(--kx-brand); }
/* decorative brand orbs (pseudo-elements -> uniform on every inner page) */
body.theme-kariux .kx-inner-banner::before, body.theme-kariux .kx-inner-banner::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
body.theme-kariux .kx-inner-banner::before { width: 340px; height: 340px; top: -150px; right: -70px; background: radial-gradient(circle, color-mix(in srgb, var(--kx-brand) 18%, transparent), transparent 65%); }
body.theme-kariux .kx-inner-banner::after { width: 240px; height: 240px; bottom: -140px; left: -60px; background: radial-gradient(circle, color-mix(in srgb, var(--kx-brand) 12%, transparent), transparent 65%); }
@media (max-width: 575px) { body.theme-kariux .kx-inner-banner { padding: 110px 0 52px; } body.theme-kariux .kx-inner-banner h1 { font-size: 32px; } }
.kx-inner-section { padding: 80px 0; }
.kx-prose { font-size:16px; line-height:1.9; color:#3a4452; }
.kx-prose h2 { font-weight:800; font-size:26px; margin:28px 0 12px; color:#0c1116; }
.kx-prose h3 { font-weight:700; font-size:20px; margin:22px 0 10px; color:#0c1116; }
.kx-prose img { max-width:100%; border-radius:14px; margin:16px 0; }
.kx-prose ul { padding-left:20px; }
.kx-card { background:#fff; border:1px solid #e8ecf1; border-radius:16px; overflow:hidden; height:100%; }
.kx-card .pad { padding:22px; }
.kx-team-img img, .kx-feature-img img { width:100%; border-radius:14px; }
.company-logo img { max-height: 42px; }
.footer-logo-area .logo img { max-height: 60px; }

/* Pagination tidy */
.kx-inner-section .pagination, .home1-blog-section .pagination { justify-content: center; gap: 6px; }
.pagination .page-link { color: #0c1116; border-radius: 8px; border: 1px solid #e3e8ef; min-width: 40px; text-align: center; }
.pagination .page-item.active .page-link { background: var(--kx-brand); border-color: var(--kx-brand); color: #fff; }
.pagination svg { width: 18px; height: 18px; }

/* Portfolio grid (cards outside the slider) */
.kx-pill { display:inline-block; padding:8px 18px; border-radius:30px; background:#fff; border:1px solid #e3e8ef; color:#5a6470; text-decoration:none; font-weight:600; font-size:14px; }
.kx-pill.active, .kx-pill:hover { background: var(--kx-brand); border-color: var(--kx-brand); color:#fff; }
.portfolio-section.kx-inner-section .eg-card { height:100%; }
.portfolio-section.kx-inner-section .eg-card .card-img { aspect-ratio:4/3; overflow:hidden; }
.portfolio-section.kx-inner-section .eg-card .card-img img { width:100%; height:100%; object-fit:cover; }

/* Pricing */
.kx-pricing-section { padding: 10px 0; }
.kx-price-card { position: relative; background: #fff; border: 1px solid #e8ecf1; border-radius: 20px; padding: 34px 28px; height: 100%; transition: .25s; }
.kx-price-card:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(12,17,22,.10); }
.kx-price-card.featured { border-color: var(--kx-brand); box-shadow: 0 26px 60px color-mix(in srgb, var(--kx-brand) 18%, transparent); }
.kx-price-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--kx-brand); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 16px; border-radius: 20px; }
.kx-price-name { font-weight: 800; font-size: 20px; color: #0c1116; margin-bottom: 6px; }
.kx-price-desc { color: #5a6470; font-size: 14px; min-height: 40px; }
.kx-price-amount { font-size: 40px; font-weight: 800; color: #0c1116; margin: 8px 0 18px; }
.kx-price-amount span { font-size: 15px; font-weight: 500; color: #9aa4b2; }
.kx-price-feats { list-style: none; padding: 0; margin: 0 0 24px; }
.kx-price-feats li { padding: 9px 0; border-bottom: 1px dashed #eef1f5; color: #3a4452; font-size: 14px; }
.kx-price-feats li i { margin-right: 8px; }
.kx-price-feats li.on i { color: #22a06b; }
.kx-price-feats li.off { color: #aab4c0; } .kx-price-feats li.off i { color: #d0d7e0; }
body.theme-kariux.kx-dark .kx-price-name, body.theme-kariux.kx-dark .kx-price-amount { color: #f3f6fa !important; }
body.theme-kariux.kx-dark .kx-price-feats li { color: #aab4c0; border-color: var(--kx-dark-line); }

/* =====================================================================
   6. Sliding marquee (pure CSS — text strip + logo strip)
   ===================================================================== */
.kx-marquee { overflow: hidden; width: 100%; }
.kx-marquee-track { display: inline-flex; align-items: center; gap: 28px; white-space: nowrap; will-change: transform; animation: kx-marquee 28s linear infinite; }
.kx-marquee-track h6 { margin: 0; white-space: nowrap; display: inline-flex; align-items: center; }
.kx-marquee-track svg { flex: none; }
.kx-marquee-track--logos { gap: 56px; animation-duration: 34s; }
.kx-marquee-track--logos img { flex: none; }
.kx-marquee:hover .kx-marquee-track { animation-play-state: paused; }
@keyframes kx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =====================================================================
   7. Section detail tweaks (Who we are / What we do / How we work)
   ===================================================================== */
/* Countdown stats (Who we are) — thin outline icons, vertical list */
body.theme-kariux .about-countdown-area ul { list-style: none; padding: 0; margin: 0; }
body.theme-kariux .about-countdown-area .single-countdown { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
body.theme-kariux .about-countdown-area .single-countdown:last-child { margin-bottom: 0; }
body.theme-kariux .about-countdown-area .single-countdown .icon {
    width: 44px; min-width: 44px; height: 44px; background: transparent !important;
    display: flex; align-items: center; justify-content: center;
    color: var(--kx-ink); line-height: 1;
}
body.theme-kariux .about-countdown-area .single-countdown .icon i { font-size: 36px; line-height: 1; }
body.theme-kariux .about-countdown-area .number { display: flex; align-items: baseline; gap: 5px; }
body.theme-kariux .about-countdown-area .number h5 { font-size: 32px; font-weight: 800; margin: 0; color: var(--kx-ink); line-height: 1; }
body.theme-kariux .about-countdown-area .single-countdown p { margin: 4px 0 0; font-size: 14px; color: var(--kx-ink-soft); }
body.theme-kariux.kx-dark .about-countdown-area .single-countdown .icon,
body.theme-kariux.kx-dark .about-countdown-area .number h5 { color: #f3f6fa; }
/* Service card icon inside content */
body.theme-kariux .service-card .kx-svc-icon { display: block; max-height: 50px; width: auto; margin: 14px 0 16px; }
body.theme-kariux .service-card .explore-btn i { margin-left: 6px; }
/* About feature card icon sizing */
body.theme-kariux .about-bottom-area .feature-card .icon img { max-height: 48px; }
/* Process feature-card.two icon */
body.theme-kariux .feature-card.two .icon-bg img { max-height: 40px; }
body.theme-kariux .feature-card.two .icon-bg span { font-weight: 800; color: var(--kx-brand); font-size: 18px; }
/* Approach card dark mode text */
body.theme-kariux.kx-dark .single-approach .content span { color: var(--kx-brand); }
body.theme-kariux.kx-dark .single-approach .content h5 { color: #f3f6fa; }

/* Process checklist (feature-card.two) */
body.theme-kariux .feature-card.two .kx-check-list { list-style: none; padding: 0; margin: 12px 0 0; }
body.theme-kariux .feature-card.two .kx-check-list li { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; font-size: 14px; color: var(--kx-ink-soft); }
body.theme-kariux .feature-card.two .kx-check-list li i { color: var(--kx-brand); margin-top: 3px; flex: none; }
body.theme-kariux.kx-dark .feature-card.two .kx-check-list li { color: #aab4c0; }
/* Approach bullet list */
body.theme-kariux .single-approach .content ul { list-style: none; padding: 0; margin: 10px 0 0; }
body.theme-kariux .single-approach .content ul li { position: relative; padding-left: 16px; margin-bottom: 7px; font-size: 13px; color: var(--kx-ink-soft); line-height: 1.6; }
body.theme-kariux .single-approach .content ul li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--kx-brand); }
body.theme-kariux .single-approach .content ul li strong { color: var(--kx-ink); }
body.theme-kariux.kx-dark .single-approach .content ul li strong { color: #f3f6fa; }
/* Testimonial left rating-area */
body.theme-kariux .testimonial-content .rating-area { list-style: none; display: flex; flex-wrap: wrap; gap: 14px; padding: 0; margin-top: 26px; }
body.theme-kariux .testimonial-content .rating-area .single-rating { display: flex; flex-direction: column; gap: 8px; background: var(--kx-card); border: 1px solid var(--kx-line); border-radius: 14px; padding: 16px 20px; text-decoration: none; }
body.theme-kariux .testimonial-content .rating-area .review { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--kx-ink-soft); }
body.theme-kariux .testimonial-content .rating-area .review img { max-height: 18px; }
body.theme-kariux .testimonial-content .rating-area .rating { display: flex; align-items: center; gap: 8px; }
body.theme-kariux .testimonial-content .rating-area .rating .star { display: flex; gap: 2px; list-style: none; padding: 0; margin: 0; color: #ffb800; font-size: 13px; }
body.theme-kariux .testimonial-content .rating-area .rating > span { font-size: 12px; color: var(--kx-ink-soft); }
body.theme-kariux.kx-dark .testimonial-content .rating-area .single-rating .review .logo-dark { display: none; }
body.theme-kariux.kx-dark .testimonial-content .rating-area .single-rating .review .logo-light { display: inline-block; }
body.theme-kariux .testimonial-card3.style-2 .author-and-logo-area .star { color: #ffb800; list-style: none; display: flex; gap: 2px; padding: 0; margin: 0; }

/* =====================================================================
   8. Custom "Who we are" About section (Kariux original)
   ===================================================================== */
body.theme-kariux .kx-about-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
body.theme-kariux .kx-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 30px; background: color-mix(in srgb, var(--kx-brand) 12%, transparent); color: var(--kx-brand); font-weight: 700; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; }
body.theme-kariux .kx-chip svg { fill: var(--kx-brand); width: 12px; height: 12px; }
body.theme-kariux .kx-about-title { font-size: 40px; line-height: 1.18; font-weight: 800; margin: 18px 0 16px; color: var(--kx-ink); }
body.theme-kariux .kx-about-lead { font-size: 16px; line-height: 1.85; color: var(--kx-ink-soft); margin-bottom: 22px; }
body.theme-kariux .kx-about-checks { list-style: none; padding: 0; margin: 0 0 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
body.theme-kariux .kx-about-checks li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; font-weight: 600; color: var(--kx-ink); }
body.theme-kariux .kx-about-checks li i { color: var(--kx-brand); margin-top: 2px; flex: none; }
body.theme-kariux .kx-about-cta { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
body.theme-kariux .kx-text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--kx-ink); text-decoration: none; transition: color .2s; }
body.theme-kariux .kx-text-link i { color: var(--kx-brand); transition: transform .2s; }
body.theme-kariux .kx-text-link:hover { color: var(--kx-brand); }
body.theme-kariux .kx-text-link:hover i { transform: translateX(5px); }

/* Right column: image + floating metrics */
body.theme-kariux .kx-about-visual { position: relative; padding-bottom: 56px; }
body.theme-kariux .kx-about-img { position: relative; height: 470px; border-radius: 24px; background-size: cover; background-position: center; overflow: hidden; box-shadow: 0 30px 70px rgba(12,16,24,.22); }
body.theme-kariux .kx-about-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,11,18,0) 40%, rgba(8,11,18,.55) 100%), radial-gradient(420px 300px at 100% 0%, color-mix(in srgb, var(--kx-brand) 32%, transparent), transparent 70%); }
body.theme-kariux .kx-float { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 14px; background: rgba(255,255,255,.16); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.28); box-shadow: 0 12px 30px rgba(0,0,0,.18); }
body.theme-kariux .kx-float-rating { top: 22px; left: 22px; flex-direction: column; align-items: flex-start; gap: 4px; }
body.theme-kariux .kx-float-rating .kx-stars { font-size: 13px; }
body.theme-kariux .kx-float-rating > span { font-size: 12px; font-weight: 600; color: #fff; }
body.theme-kariux .kx-float-badge { bottom: 80px; right: 22px; color: #fff; font-weight: 700; font-size: 13px; }
body.theme-kariux .kx-float-badge i { color: var(--kx-brand); font-size: 18px; }
body.theme-kariux .kx-stars { display: flex; gap: 3px; list-style: none; padding: 0; margin: 0; color: #ffb800; }
/* frosted glass metric strip overlapping the image bottom */
body.theme-kariux .kx-about-metrics { position: absolute; left: 22px; right: 22px; bottom: 0; z-index: 3; display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; padding: 18px 14px; border-radius: 18px; background: var(--kx-card); border: 1px solid var(--kx-line); box-shadow: 0 24px 50px rgba(12,17,22,.16); }
body.theme-kariux .kx-metric { display: flex; align-items: center; gap: 11px; padding: 0 12px; }
body.theme-kariux .kx-metric + .kx-metric { border-left: 1px solid var(--kx-line); }
body.theme-kariux .kx-metric-ic { width: 38px; height: 38px; min-width: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--kx-brand) 12%, transparent); color: var(--kx-brand); font-size: 18px; }
body.theme-kariux .kx-metric-num { display: flex; align-items: baseline; gap: 3px; font-size: 22px; font-weight: 800; line-height: 1; color: var(--kx-ink); }
body.theme-kariux .kx-metric-num em { font-size: 13px; font-style: normal; font-weight: 700; color: var(--kx-brand); }
body.theme-kariux .kx-metric-body p { margin: 3px 0 0; font-size: 11px; line-height: 1.3; color: var(--kx-ink-soft); }
@media (max-width: 575px) {
    body.theme-kariux .kx-about-img { height: 380px; }
    body.theme-kariux .kx-about-metrics { position: static; grid-template-columns: 1fr; margin-top: 16px; gap: 14px; }
    body.theme-kariux .kx-metric + .kx-metric { border-left: none; border-top: 1px solid var(--kx-line); padding-top: 12px; }
    body.theme-kariux .kx-about-visual { padding-bottom: 0; }
}

body.theme-kariux .kx-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 60px; }
body.theme-kariux .kx-feature { position: relative; overflow: hidden; padding: 30px 26px; border-radius: 18px; background: var(--kx-card); border: 1px solid var(--kx-line); transition: transform .28s, box-shadow .28s, border-color .28s; }
body.theme-kariux .kx-feature:hover { transform: translateY(-8px); box-shadow: 0 26px 50px rgba(12,17,22,.10); border-color: color-mix(in srgb, var(--kx-brand) 40%, var(--kx-line)); }
body.theme-kariux .kx-feature-no { position: absolute; top: 18px; right: 22px; font-size: 34px; font-weight: 800; color: color-mix(in srgb, var(--kx-brand) 16%, transparent); line-height: 1; }
body.theme-kariux .kx-feature-ic { width: 60px; height: 60px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--kx-brand) 10%, transparent); margin-bottom: 18px; transition: background .28s; }
body.theme-kariux .kx-feature-ic img { max-height: 34px; }
body.theme-kariux .kx-feature:hover .kx-feature-ic { background: var(--kx-brand); }
body.theme-kariux .kx-feature h4 { font-size: 18px; font-weight: 700; margin: 0 0 8px; color: var(--kx-ink); }
body.theme-kariux .kx-feature p { font-size: 14px; line-height: 1.7; color: var(--kx-ink-soft); margin: 0; }
body.theme-kariux .kx-feature-line { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--kx-brand); transition: width .3s; }
body.theme-kariux .kx-feature:hover .kx-feature-line { width: 100%; }
@media (max-width: 991px) {
    body.theme-kariux .kx-about-grid { grid-template-columns: 1fr; gap: 36px; }
    body.theme-kariux .kx-feature-grid { grid-template-columns: 1fr 1fr; }
    body.theme-kariux .kx-about-title { font-size: 30px; }
}
@media (max-width: 575px) {
    body.theme-kariux .kx-feature-grid { grid-template-columns: 1fr; }
    body.theme-kariux .kx-about-checks { grid-template-columns: 1fr; }
}

/* =====================================================================
   9. Mobile drawer (multi-level with back links) + burger
   ===================================================================== */
.kx-burger { width: 46px; height: 46px; border: 1px solid var(--kx-line, #e6e9ee); border-radius: 12px; background: var(--kx-bg-soft, #f4f6f9); color: var(--kx-ink, #0c1116); font-size: 22px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
body.theme-kariux.kx-dark .kx-burger { background: var(--kx-dark-3); border-color: var(--kx-dark-line); color: #f3f6fa; }
.kx-drawer-backdrop { position: fixed; inset: 0; background: rgba(6,8,12,.55); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; z-index: 1090; }
.kx-drawer-backdrop.is-open { opacity: 1; visibility: visible; }
.kx-drawer { position: fixed; top: 0; right: 0; height: 100%; width: 340px; max-width: 88vw; background: var(--kx-bg, #fff); z-index: 1100; transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; box-shadow: -20px 0 60px rgba(0,0,0,.22); }
.kx-drawer.is-open { transform: translateX(0); }
body.kx-drawer-lock { overflow: hidden; }
.kx-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--kx-line, #eee); flex: none; }
.kx-drawer-logo img { max-height: 34px; }
.kx-drawer-close { width: 40px; height: 40px; border: none; border-radius: 10px; background: var(--kx-bg-soft, #f4f6f9); color: var(--kx-ink, #111); font-size: 16px; cursor: pointer; }
body.theme-kariux.kx-dark .kx-drawer-close { background: var(--kx-dark-3); color: #f3f6fa; }
.kx-drawer-body { position: relative; flex: 1; overflow: hidden; }
.kx-panel { position: absolute; inset: 0; overflow-y: auto; padding: 8px 0 24px; transform: translateX(100%); opacity: 0; visibility: hidden; transition: transform .3s ease, opacity .3s ease; }
.kx-panel[data-panel="root"] { transform: translateX(-30%); }
.kx-panel.is-active { transform: translateX(0); opacity: 1; visibility: visible; }
.kx-panel ul { list-style: none; margin: 0; padding: 0; }
.kx-panel li > a, .kx-panel-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 24px; font-size: 16px; font-weight: 600; color: var(--kx-ink, #111); text-decoration: none; background: none; border: none; border-bottom: 1px solid var(--kx-line, #f0f0f0); cursor: pointer; text-align: left; transition: color .2s, background .2s; }
.kx-panel li > a:hover, .kx-panel-toggle:hover { color: var(--kx-brand); background: var(--kx-bg-soft, #f6f8fb); }
.kx-panel-toggle i { color: var(--kx-brand); font-size: 14px; }
.kx-panel-back { display: flex; align-items: center; gap: 8px; width: 100%; padding: 14px 24px; background: var(--kx-bg-soft, #f6f8fb); border: none; border-bottom: 1px solid var(--kx-line, #eee); font-weight: 700; font-size: 14px; color: var(--kx-brand); cursor: pointer; }
.kx-panel-title { display: block; padding: 14px 24px 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--kx-ink-soft, #888); }
.kx-panel-group { display: block; padding: 14px 24px 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--kx-ink-soft, #999); }
.kx-drawer-cta { margin: 22px 24px 6px; display: flex; justify-content: center; }
.kx-drawer-contact { padding: 12px 24px; font-size: 14px; color: var(--kx-ink-soft, #666); }
.kx-drawer-contact p { margin: 6px 0; display: flex; align-items: center; gap: 8px; }
.kx-drawer-contact a { color: var(--kx-ink, #111); text-decoration: none; }
.kx-drawer-contact i { color: var(--kx-brand); }
body.theme-kariux.kx-dark .kx-panel-back, body.theme-kariux.kx-dark .kx-panel li > a:hover, body.theme-kariux.kx-dark .kx-panel-toggle:hover { background: var(--kx-dark-2); }
@media (min-width: 992px) { .kx-drawer, .kx-drawer-backdrop, .kx-burger { display: none !important; } }

/* =====================================================================
   10. Custom Services section (What we do) — interactive cards
   ===================================================================== */
body.theme-kariux .kx-services { padding: 90px 0; background-color: #fbfaf8; background-image: radial-gradient(900px 380px at 95% 0%, color-mix(in srgb, var(--kx-brand) 10%, transparent), transparent 70%); }
body.theme-kariux.kx-dark .kx-services { background-color: var(--kx-dark-2); background-image: radial-gradient(900px 380px at 95% 0%, color-mix(in srgb, var(--kx-brand) 16%, transparent), transparent 70%); }
body.theme-kariux.kx-dark .kx-svc { background: var(--kx-dark-3); border-color: var(--kx-dark-line); }
body.theme-kariux .kx-sec-head { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; align-items: end; margin-bottom: 46px; }
body.theme-kariux .kx-sec-title { font-size: 38px; font-weight: 800; line-height: 1.15; margin: 16px 0 0; color: var(--kx-ink); }
body.theme-kariux .kx-sec-head-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; }
body.theme-kariux .kx-sec-head-aside p { font-size: 15px; line-height: 1.8; color: var(--kx-ink-soft); margin: 0; max-width: 460px; }

body.theme-kariux .kx-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
body.theme-kariux .kx-svc { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 32px 30px; border-radius: 20px; background: var(--kx-card); border: 1px solid var(--kx-line); z-index: 0; transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s, border-color .35s; }
body.theme-kariux .kx-svc::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(165deg, #0c1018 0%, #1a2334 100%); opacity: 0; transition: opacity .4s; }
body.theme-kariux .kx-svc::after { content: ""; position: absolute; width: 280px; height: 280px; right: -80px; top: -120px; z-index: -1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--kx-brand) 55%, transparent), transparent 65%); opacity: 0; transition: opacity .4s; }
body.theme-kariux .kx-svc:hover { transform: translateY(-10px); box-shadow: 0 30px 60px rgba(10,14,22,.22); border-color: transparent; }
body.theme-kariux .kx-svc:hover::before, body.theme-kariux .kx-svc:hover::after { opacity: 1; }

body.theme-kariux .kx-svc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
body.theme-kariux .kx-svc-ic { width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--kx-brand) 10%, transparent); transition: background .35s; }
body.theme-kariux .kx-svc-ic img { max-height: 34px; }
body.theme-kariux .kx-svc:hover .kx-svc-ic { background: #fff; }
body.theme-kariux .kx-svc-no { font-size: 15px; font-weight: 800; letter-spacing: 1px; color: color-mix(in srgb, var(--kx-brand) 55%, var(--kx-ink-soft)); transition: color .35s; }
body.theme-kariux .kx-svc h4 { font-size: 21px; font-weight: 700; margin: 0 0 10px; }
body.theme-kariux .kx-svc h4 a { color: var(--kx-ink); text-decoration: none; transition: color .35s; }
body.theme-kariux .kx-svc p { font-size: 14px; line-height: 1.75; color: var(--kx-ink-soft); margin: 0 0 22px; transition: color .35s; }
body.theme-kariux .kx-svc-link { margin-top: auto; display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14px; color: var(--kx-brand); text-decoration: none; }
body.theme-kariux .kx-svc-link i { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--kx-brand) 12%, transparent); transition: transform .3s, background .3s, color .3s; }
body.theme-kariux .kx-svc:hover h4 a, body.theme-kariux .kx-svc:hover p, body.theme-kariux .kx-svc:hover .kx-svc-link { color: #fff; }
body.theme-kariux .kx-svc:hover .kx-svc-no { color: var(--kx-brand); }
body.theme-kariux .kx-svc:hover .kx-svc-link i { background: var(--kx-brand); color: #fff; transform: translateX(3px); }
body.theme-kariux .kx-svc-ghost { position: absolute; right: 18px; bottom: -22px; font-size: 110px; font-weight: 800; line-height: 1; color: rgba(255,255,255,.05); opacity: 0; transition: opacity .4s; pointer-events: none; z-index: -1; }
body.theme-kariux .kx-svc:hover .kx-svc-ghost { opacity: 1; }
body.theme-kariux .kx-svc-shine { position: absolute; top: 0; left: -60%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.08), transparent); transform: skewX(-18deg); transition: left .7s; pointer-events: none; }
body.theme-kariux .kx-svc:hover .kx-svc-shine { left: 130%; }

/* CTA bento card */
body.theme-kariux .kx-svc-cta { background: linear-gradient(155deg, var(--kx-brand), color-mix(in srgb, var(--kx-brand) 62%, #000)); border: none; color: #fff; justify-content: flex-end; }
body.theme-kariux .kx-svc-cta::before, body.theme-kariux .kx-svc-cta::after { display: none; }
body.theme-kariux .kx-svc-cta:hover { transform: translateY(-10px); box-shadow: 0 30px 60px color-mix(in srgb, var(--kx-brand) 35%, transparent); }
body.theme-kariux .kx-svc-cta-spark { width: 54px; height: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.18); font-size: 24px; margin-bottom: auto; }
body.theme-kariux .kx-svc-cta h4 { color: #fff; font-size: 22px; font-weight: 700; margin: 24px 0 8px; }
body.theme-kariux .kx-svc-cta p { color: rgba(255,255,255,.85); font-size: 14px; line-height: 1.7; margin: 0; }
body.theme-kariux .kx-svc-cta-arrow { position: absolute; top: 28px; right: 28px; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--kx-ink); display: flex; align-items: center; justify-content: center; font-size: 20px; transition: transform .3s; }
body.theme-kariux .kx-svc-cta:hover .kx-svc-cta-arrow { transform: rotate(45deg); }

@media (max-width: 991px) {
    body.theme-kariux .kx-sec-head { grid-template-columns: 1fr; align-items: start; gap: 18px; }
    body.theme-kariux .kx-svc-grid { grid-template-columns: 1fr 1fr; }
    body.theme-kariux .kx-sec-title { font-size: 30px; }
}
@media (max-width: 575px) {
    body.theme-kariux .kx-svc-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   11. Custom How-we-work section — interactive timeline accordion
   ===================================================================== */
body.theme-kariux .kx-proc-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 60px; align-items: start; }
body.theme-kariux .kx-proc-intro .kx-sec-title { margin: 16px 0 14px; }
body.theme-kariux .kx-proc-lead { font-size: 15px; line-height: 1.85; color: var(--kx-ink-soft); margin-bottom: 24px; }
body.theme-kariux .kx-proc-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; padding: 16px 20px; border-radius: 14px; background: var(--kx-bg-soft); border: 1px solid var(--kx-line); }
body.theme-kariux .kx-proc-count { font-size: 34px; font-weight: 800; color: var(--kx-brand); line-height: 1; }
body.theme-kariux .kx-proc-meta > span:last-child { font-size: 14px; font-weight: 600; color: var(--kx-ink); }

body.theme-kariux .kx-proc-steps { position: relative; }
body.theme-kariux .kx-proc-steps::before { content: ""; position: absolute; left: 31px; top: 34px; bottom: 34px; width: 2px; background: var(--kx-line); }
body.theme-kariux .kx-step { position: relative; border-bottom: 1px solid var(--kx-line); }
body.theme-kariux .kx-step:first-child { border-top: 1px solid var(--kx-line); }
body.theme-kariux .kx-step input { position: absolute; opacity: 0; pointer-events: none; }
body.theme-kariux .kx-step-head { display: flex; align-items: center; gap: 20px; padding: 22px 6px; cursor: pointer; margin: 0; }
body.theme-kariux .kx-step-no { position: relative; z-index: 1; width: 52px; height: 52px; min-width: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; color: var(--kx-ink-soft); background: var(--kx-bg-soft); border: 1px solid var(--kx-line); transition: background .3s, border-color .3s, color .3s, box-shadow .3s; }
body.theme-kariux .kx-step-no img { max-height: 26px; }
body.theme-kariux .kx-step-title { flex: 1; font-size: 20px; font-weight: 700; color: var(--kx-ink); transition: color .3s; }
body.theme-kariux .kx-step-ic { width: 36px; height: 36px; min-width: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--kx-bg-soft); border: 1px solid var(--kx-line); color: var(--kx-ink); font-size: 18px; transition: transform .3s, background .3s, color .3s, border-color .3s; }
body.theme-kariux .kx-step-body { max-height: 0; overflow: hidden; transition: max-height .45s cubic-bezier(.4,0,.2,1); }
body.theme-kariux .kx-step-inner { padding: 0 6px 26px 72px; }
body.theme-kariux .kx-step-inner > p { font-size: 15px; line-height: 1.8; color: var(--kx-ink-soft); margin: 0 0 14px; }
body.theme-kariux .kx-step .kx-check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
body.theme-kariux .kx-step .kx-check-list li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; color: var(--kx-ink-soft); }
body.theme-kariux .kx-step .kx-check-list li i { color: var(--kx-brand); margin-top: 3px; flex: none; }
body.theme-kariux .kx-step .kx-check-list li strong { color: var(--kx-ink); }
/* active state */
body.theme-kariux .kx-step input:checked ~ .kx-step-body { max-height: 520px; }
body.theme-kariux .kx-step input:checked + .kx-step-head .kx-step-no { background: var(--kx-brand); border-color: var(--kx-brand); color: #fff; box-shadow: 0 8px 22px color-mix(in srgb, var(--kx-brand) 35%, transparent); }
body.theme-kariux .kx-step input:checked + .kx-step-head .kx-step-no img { filter: brightness(0) invert(1); }
body.theme-kariux .kx-step input:checked + .kx-step-head .kx-step-title { color: var(--kx-brand); }
body.theme-kariux .kx-step input:checked + .kx-step-head .kx-step-ic { background: var(--kx-brand); border-color: var(--kx-brand); color: #fff; transform: rotate(135deg); }
body.theme-kariux .kx-step-head:hover .kx-step-title { color: var(--kx-brand); }
@media (max-width: 991px) {
    body.theme-kariux .kx-proc-grid { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 575px) {
    body.theme-kariux .kx-step-inner { padding-left: 6px; }
    body.theme-kariux .kx-step-title { font-size: 17px; }
    body.theme-kariux .kx-step-head { gap: 14px; }
}

/* =====================================================================
   12. Custom Workflow section — interactive expanding image panels
   ===================================================================== */
/* modern theme-aware band: soft surface + subtle dot-grid + brand glow */
body.theme-kariux .kx-workflow { position: relative; overflow: hidden; padding: 84px 0; margin-inline: 12px; border-radius: 32px; border: 1px solid var(--kx-line); background-color: var(--kx-bg-soft); background-image: radial-gradient(760px 340px at 50% -12%, color-mix(in srgb, var(--kx-brand) 10%, transparent), transparent 72%), radial-gradient(color-mix(in srgb, var(--kx-ink) 8%, transparent) 1px, transparent 1.4px); background-size: 100% 100%, 24px 24px; background-position: center top, center; }
body.theme-kariux.kx-dark .kx-workflow { background-color: var(--kx-dark-2); background-image: radial-gradient(760px 340px at 50% -12%, color-mix(in srgb, var(--kx-brand) 16%, transparent), transparent 72%), radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px); }
body.theme-kariux .kx-workflow .container { position: relative; z-index: 1; }
body.theme-kariux .kx-wf-head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
body.theme-kariux .kx-wf-head .kx-chip { margin-bottom: 14px; }
body.theme-kariux .kx-wf-head .kx-sec-title { font-size: 38px; }
body.theme-kariux .kx-wf-hint { margin-top: 12px; font-size: 13px; color: var(--kx-ink-soft); }
body.theme-kariux .kx-wf-hint i { color: var(--kx-brand); }

body.theme-kariux .kx-wf-accordion { display: flex; gap: 14px; height: 480px; }
body.theme-kariux .kx-wf-panel { position: relative; flex: 1 1 0; min-width: 0; border-radius: 22px; overflow: hidden; background-size: cover; background-position: center; cursor: pointer; outline: none; transition: flex .55s cubic-bezier(.4,0,.2,1); }
body.theme-kariux .kx-wf-panel.is-active { flex: 3.4 1 0; }
body.theme-kariux .kx-wf-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,11,18,.12) 0%, rgba(8,11,18,.45) 45%, rgba(8,11,18,.9) 100%); transition: background .4s; }
body.theme-kariux .kx-wf-panel.is-active .kx-wf-shade { background: linear-gradient(180deg, rgba(8,11,18,.08) 0%, rgba(8,11,18,.55) 45%, rgba(8,11,18,.94) 100%), radial-gradient(360px 240px at 100% 0%, color-mix(in srgb, var(--kx-brand) 40%, transparent), transparent 70%); }
body.theme-kariux .kx-wf-step { position: absolute; top: 22px; left: 22px; z-index: 2; padding: 6px 14px; border-radius: 30px; background: rgba(255,255,255,.16); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
body.theme-kariux .kx-wf-vtitle { position: absolute; left: 26px; bottom: 28px; z-index: 2; writing-mode: vertical-rl; transform: rotate(180deg); color: #fff; font-size: 20px; font-weight: 700; white-space: nowrap; transition: opacity .3s; }
body.theme-kariux .kx-wf-panel.is-active .kx-wf-vtitle { opacity: 0; }
body.theme-kariux .kx-wf-content { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 30px 32px; opacity: 0; transform: translateY(22px); pointer-events: none; transition: opacity .4s .1s, transform .4s .1s; }
body.theme-kariux .kx-wf-panel.is-active .kx-wf-content { opacity: 1; transform: none; }
body.theme-kariux .kx-wf-num { display: inline-block; font-size: 42px; font-weight: 800; color: var(--kx-brand); line-height: 1; margin-bottom: 6px; }
body.theme-kariux .kx-wf-content h4 { color: #fff; font-size: 24px; font-weight: 700; margin: 0 0 10px; }
body.theme-kariux .kx-wf-content p { color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.7; margin: 0 0 14px; max-width: 520px; }
body.theme-kariux .kx-wf-content ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; max-width: 520px; }
body.theme-kariux .kx-wf-content ul li { display: flex; gap: 9px; align-items: flex-start; color: rgba(255,255,255,.78); font-size: 13px; }
body.theme-kariux .kx-wf-content ul li i { color: var(--kx-brand); margin-top: 3px; flex: none; }
body.theme-kariux .kx-wf-content ul li strong { color: #fff; }
@media (max-width: 991px) {
    body.theme-kariux .kx-wf-accordion { flex-direction: column; height: auto; gap: 18px; }
    body.theme-kariux .kx-wf-panel, body.theme-kariux .kx-wf-panel.is-active { flex: none; min-height: 340px; }
    body.theme-kariux .kx-wf-vtitle { display: none; }
    body.theme-kariux .kx-wf-content { position: relative; opacity: 1; transform: none; padding-top: 150px; }
    body.theme-kariux .kx-wf-shade { background: linear-gradient(180deg, rgba(8,11,18,.12), rgba(8,11,18,.92)); }
}

/* =====================================================================
   13. The Kariux Edge — bento composition
   ===================================================================== */
body.theme-kariux .kx-edge-bento { display: grid; grid-template-columns: 1.18fr repeat(3, 1fr); gap: 18px; }
/* feature cell (brand gradient, header built in) */
body.theme-kariux .kx-edge-feature { grid-column: 1; grid-row: 1 / span 2; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 46px 40px; border-radius: 24px; background: linear-gradient(155deg, var(--kx-brand) 0%, color-mix(in srgb, var(--kx-brand) 58%, #000) 100%); color: #fff; }
body.theme-kariux .kx-edge-feature::after { content: ""; position: absolute; width: 320px; height: 320px; right: -120px; bottom: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 65%); pointer-events: none; }
body.theme-kariux .kx-edge-spark { width: 56px; height: 56px; border-radius: 15px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.2); font-size: 25px; margin-bottom: 22px; }
body.theme-kariux .kx-edge-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: rgba(255,255,255,.82); margin-bottom: 12px; }
body.theme-kariux .kx-edge-feature h2 { color: #fff; font-size: 30px; font-weight: 800; line-height: 1.2; margin: 0 0 14px; }
body.theme-kariux .kx-edge-feature p { color: rgba(255,255,255,.86); font-size: 15px; line-height: 1.8; margin: 0 0 26px; position: relative; }
body.theme-kariux .kx-edge-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; padding: 13px 24px; border-radius: 30px; background: #fff; color: var(--kx-ink); font-weight: 700; font-size: 14px; text-decoration: none; transition: transform .25s, box-shadow .25s; position: relative; }
body.theme-kariux .kx-edge-btn i { transition: transform .25s; }
body.theme-kariux .kx-edge-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.22); }
body.theme-kariux .kx-edge-btn:hover i { transform: translateX(4px); }
/* benefit cells (blend with surface, soft hover) */
body.theme-kariux .kx-edge-cell { position: relative; overflow: hidden; padding: 28px 26px; border-radius: 18px; background: var(--kx-card); border: 1px solid var(--kx-line); transition: transform .28s, box-shadow .28s, border-color .28s, background .28s; }
body.theme-kariux .kx-edge-cell::before { content: ""; position: absolute; left: 0; top: 26px; bottom: 26px; width: 3px; border-radius: 3px; background: var(--kx-brand); transform: scaleY(0); transform-origin: top; transition: transform .3s; }
body.theme-kariux .kx-edge-cell:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--kx-brand) 30%, var(--kx-line)); box-shadow: 0 20px 44px rgba(12,17,22,.09); background: color-mix(in srgb, var(--kx-brand) 4%, var(--kx-card)); }
body.theme-kariux .kx-edge-cell:hover::before { transform: scaleY(1); }
body.theme-kariux .kx-edge-ic { width: 54px; height: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--kx-brand) 10%, transparent); color: var(--kx-brand); font-size: 24px; margin-bottom: 18px; transition: background .28s, transform .28s; }
body.theme-kariux .kx-edge-ic img { max-height: 30px; transition: filter .28s; }
body.theme-kariux .kx-edge-cell:hover .kx-edge-ic { background: var(--kx-brand); transform: rotate(-6deg); }
body.theme-kariux .kx-edge-cell:hover .kx-edge-ic i { color: #fff; }
body.theme-kariux .kx-edge-cell:hover .kx-edge-ic img { filter: brightness(0) invert(1); }
body.theme-kariux .kx-edge-cell h4 { font-size: 18px; font-weight: 700; margin: 0 0 8px; color: var(--kx-ink); }
body.theme-kariux .kx-edge-cell p { font-size: 13.5px; line-height: 1.7; color: var(--kx-ink-soft); margin: 0; }
@media (max-width: 1199px) {
    body.theme-kariux .kx-edge-bento { grid-template-columns: 1fr 1fr; }
    body.theme-kariux .kx-edge-feature { grid-column: 1 / span 2; grid-row: auto; padding: 40px; }
}
@media (max-width: 575px) {
    body.theme-kariux .kx-edge-bento { grid-template-columns: 1fr; }
    body.theme-kariux .kx-edge-feature { grid-column: 1; }
}

/* =====================================================================
   14. Testimonials — featured quote + avatar selector
   ===================================================================== */
body.theme-kariux .kx-tst-head { text-align: center; max-width: 680px; margin: 0 auto 40px; }
body.theme-kariux .kx-tst-head .kx-chip { margin-bottom: 14px; }
body.theme-kariux .kx-tst-head .kx-sec-title { font-size: 38px; }
body.theme-kariux .kx-tst-head > p { margin-top: 14px; font-size: 15px; line-height: 1.8; color: var(--kx-ink-soft); }
body.theme-kariux .kx-tst-reviews { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; list-style: none; padding: 0; margin: 24px 0 0; }
body.theme-kariux .kx-tst-reviews .single-rating { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 12px; background: var(--kx-card); border: 1px solid var(--kx-line); text-decoration: none; }
body.theme-kariux .kx-tst-reviews .review { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--kx-ink-soft); }
body.theme-kariux .kx-tst-reviews .review img { max-height: 16px; }
body.theme-kariux .kx-tst-reviews .rating { display: flex; align-items: center; gap: 6px; }
body.theme-kariux .kx-tst-reviews .star { display: flex; gap: 2px; list-style: none; padding: 0; margin: 0; color: #ffb800; font-size: 12px; }
body.theme-kariux .kx-tst-reviews .rating > span { font-size: 11px; color: var(--kx-ink-soft); }
body.theme-kariux .kx-tst-reviews .single-rating .logo-light { display: none; }
body.theme-kariux.kx-dark .kx-tst-reviews .single-rating .logo-dark { display: none; }
body.theme-kariux.kx-dark .kx-tst-reviews .single-rating .logo-light { display: inline-block; }
body.theme-kariux .kx-tst-box { max-width: 880px; margin: 0 auto; }
body.theme-kariux .kx-tst-stage { position: relative; overflow: hidden; background: var(--kx-card); border: 1px solid var(--kx-line); border-radius: 24px; padding: 56px 52px 46px; box-shadow: 0 30px 60px rgba(12,17,22,.08); }
body.theme-kariux .kx-tst-bigq { position: absolute; top: 26px; left: 40px; font-size: 96px; line-height: 1; color: color-mix(in srgb, var(--kx-brand) 14%, transparent); pointer-events: none; }
body.theme-kariux .kx-tst-item { position: absolute; left: 52px; right: 52px; top: 56px; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .45s, transform .45s; margin: 0; }
body.theme-kariux .kx-tst-item.is-active { position: relative; left: auto; right: auto; top: auto; opacity: 1; visibility: visible; transform: none; }
body.theme-kariux .kx-tst-item blockquote { position: relative; z-index: 1; font-size: 22px; line-height: 1.6; font-weight: 500; color: var(--kx-ink); margin: 0 0 28px; }
body.theme-kariux .kx-tst-item figcaption { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
body.theme-kariux .kx-tst-author { display: flex; align-items: center; gap: 14px; }
body.theme-kariux .kx-tst-author img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
body.theme-kariux .kx-tst-author h6 { margin: 0; font-size: 16px; font-weight: 700; color: var(--kx-ink); }
body.theme-kariux .kx-tst-author span { font-size: 13px; color: var(--kx-ink-soft); }
body.theme-kariux .kx-tst-item .kx-stars { color: #ffb800; font-size: 15px; }
body.theme-kariux .kx-tst-avatars { display: flex; gap: 12px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
body.theme-kariux .kx-tst-av { width: 54px; height: 54px; border-radius: 50%; padding: 0; border: 2px solid transparent; background: none; cursor: pointer; overflow: hidden; opacity: .5; filter: grayscale(1); transition: opacity .3s, filter .3s, transform .3s, border-color .3s, box-shadow .3s; }
body.theme-kariux .kx-tst-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
body.theme-kariux .kx-tst-av span { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; background: var(--kx-bg-soft); color: var(--kx-ink); font-weight: 700; }
body.theme-kariux .kx-tst-av:hover { opacity: .85; }
body.theme-kariux .kx-tst-av.is-active { opacity: 1; filter: none; border-color: var(--kx-brand); transform: scale(1.08); box-shadow: 0 6px 18px color-mix(in srgb, var(--kx-brand) 30%, transparent); }
@media (max-width: 575px) {
    body.theme-kariux .kx-tst-stage { padding: 40px 26px 32px; }
    body.theme-kariux .kx-tst-item { left: 26px; right: 26px; top: 40px; }
    body.theme-kariux .kx-tst-item blockquote { font-size: 18px; }
}

/* =====================================================================
   15. Brand scroller — centered, faded edges, grayscale->color
   ===================================================================== */
body.theme-kariux .kx-brands { padding: 6px 0; }
body.theme-kariux .kx-brands-title { text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--kx-ink-soft); margin: 0 0 34px; }
body.theme-kariux .kx-brands-viewport { position: relative; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
body.theme-kariux .kx-brands-marquee .kx-marquee-track--logos { align-items: center; }
body.theme-kariux .kx-brand { display: inline-flex; align-items: center; justify-content: center; height: 52px; flex: none; }
body.theme-kariux .kx-brand img { max-height: 38px; width: auto; opacity: .5; filter: grayscale(1); transition: opacity .3s, filter .3s; }
body.theme-kariux .kx-brand:hover img { opacity: 1; filter: none; }
body.theme-kariux.kx-dark .kx-brand img { filter: brightness(0) invert(1); opacity: .45; }
body.theme-kariux.kx-dark .kx-brand:hover img { filter: none; opacity: 1; }

/* =====================================================================
   16. Subscribe module (replaces the pre-footer contact block)
   ===================================================================== */
body.theme-kariux .kx-sub-panel { position: relative; overflow: hidden; padding: 64px 40px; text-align: center; background: linear-gradient(160deg, #0b0f17 0%, #141b28 100%); }
body.theme-kariux .kx-sub-glow { position: absolute; width: 560px; height: 560px; top: -270px; left: 50%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--kx-brand) 32%, transparent), transparent 62%); pointer-events: none; }
body.theme-kariux .kx-sub-inner { position: relative; z-index: 1; max-width: 650px; margin: 0 auto; }
body.theme-kariux .kx-sub-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 30px; background: color-mix(in srgb, var(--kx-brand) 18%, transparent); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
body.theme-kariux .kx-sub-eyebrow i { color: var(--kx-brand); }
body.theme-kariux .kx-sub-panel h2 { color: #fff; font-size: 34px; font-weight: 800; line-height: 1.2; margin: 18px 0 12px; }
body.theme-kariux .kx-sub-panel p { color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.8; margin: 0 auto 28px; max-width: 540px; }
body.theme-kariux .kx-sub-form { display: flex; gap: 8px; max-width: 520px; margin: 0 auto; background: #fff; padding: 7px; border-radius: 50px; }
body.theme-kariux .kx-sub-field { flex: 1; display: flex; align-items: center; gap: 10px; padding-left: 18px; min-width: 0; }
body.theme-kariux .kx-sub-field i { color: #9aa4b2; font-size: 17px; }
body.theme-kariux .kx-sub-field input { border: none; outline: none; background: none; width: 100%; height: 48px; font-size: 15px; color: #0c1116; }
body.theme-kariux .kx-sub-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0 26px; height: 48px; border: none; border-radius: 50px; background: var(--kx-brand); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; white-space: nowrap; transition: transform .25s, box-shadow .25s; }
body.theme-kariux .kx-sub-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 26px color-mix(in srgb, var(--kx-brand) 40%, transparent); }
body.theme-kariux .kx-sub-btn i { transition: transform .25s; }
body.theme-kariux .kx-sub-btn:hover i { transform: translateX(4px); }
body.theme-kariux .kx-sub-note { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-size: 13px; color: rgba(255,255,255,.55); }
body.theme-kariux .kx-sub-note i { color: var(--kx-brand); }
body.theme-kariux .kx-sub-ok { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; padding: 10px 18px; border-radius: 30px; background: rgba(34,160,107,.16); border: 1px solid rgba(34,160,107,.4); color: #7ee0b0; font-size: 14px; }
body.theme-kariux .kx-sub-err { display: block; margin-top: 10px; color: #ff9a8a; font-size: 13px; }
@media (max-width: 575px) {
    body.theme-kariux .kx-sub-panel { padding: 44px 22px; }
    body.theme-kariux .kx-sub-panel h2 { font-size: 26px; }
    body.theme-kariux .kx-sub-form { flex-direction: column; background: none; padding: 0; gap: 12px; }
    body.theme-kariux .kx-sub-field { background: #fff; border-radius: 50px; padding: 4px 18px; }
    body.theme-kariux .kx-sub-btn { height: 50px; justify-content: center; }
}

/* =====================================================================
   17. Blog — editorial featured + interactive list
   ===================================================================== */
body.theme-kariux .kx-blog-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 44px; }
body.theme-kariux .kx-blog-head .kx-chip { margin-bottom: 14px; }
body.theme-kariux .kx-blog-head .kx-sec-title { font-size: 38px; }
body.theme-kariux .kx-blog-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 30px; align-items: stretch; }
/* featured */
body.theme-kariux .kx-blog-feature { display: flex; flex-direction: column; background: var(--kx-card); border: 1px solid var(--kx-line); border-radius: 22px; overflow: hidden; }
body.theme-kariux .kx-blog-feat-img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
body.theme-kariux .kx-blog-feat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
body.theme-kariux .kx-blog-feature:hover .kx-blog-feat-img img { transform: scale(1.05); }
body.theme-kariux .kx-blog-cat { position: absolute; top: 16px; left: 16px; padding: 6px 14px; border-radius: 30px; background: var(--kx-brand); color: #fff; font-size: 12px; font-weight: 700; }
body.theme-kariux .kx-blog-feat-body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
body.theme-kariux .kx-blog-meta { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--kx-ink-soft); margin-bottom: 12px; }
body.theme-kariux .kx-blog-meta i { color: var(--kx-brand); }
body.theme-kariux .kx-blog-feature h3 { font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0 0 12px; }
body.theme-kariux .kx-blog-feature h3 a { color: var(--kx-ink); text-decoration: none; transition: color .25s; }
body.theme-kariux .kx-blog-feature h3 a:hover { color: var(--kx-brand); }
body.theme-kariux .kx-blog-feature p { font-size: 14.5px; line-height: 1.75; color: var(--kx-ink-soft); margin: 0 0 20px; }
body.theme-kariux .kx-blog-more { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--kx-brand); text-decoration: none; }
body.theme-kariux .kx-blog-more i { transition: transform .25s; }
body.theme-kariux .kx-blog-more:hover i { transform: translateX(4px); }
/* list */
body.theme-kariux .kx-blog-list { display: flex; flex-direction: column; gap: 14px; }
body.theme-kariux .kx-blog-row { display: flex; align-items: center; gap: 16px; padding: 14px; border-radius: 16px; background: var(--kx-card); border: 1px solid var(--kx-line); text-decoration: none; transition: transform .25s, box-shadow .25s, border-color .25s; }
body.theme-kariux .kx-blog-row:hover { transform: translateX(5px); border-color: color-mix(in srgb, var(--kx-brand) 30%, var(--kx-line)); box-shadow: 0 14px 30px rgba(12,17,22,.08); }
body.theme-kariux .kx-blog-thumb { width: 92px; height: 78px; min-width: 92px; border-radius: 12px; overflow: hidden; }
body.theme-kariux .kx-blog-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
body.theme-kariux .kx-blog-row:hover .kx-blog-thumb img { transform: scale(1.08); }
body.theme-kariux .kx-blog-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
body.theme-kariux .kx-blog-row .kx-blog-meta { margin: 0; font-size: 12px; }
body.theme-kariux .kx-blog-cat-text { color: var(--kx-brand); font-weight: 700; }
body.theme-kariux .kx-blog-row-title { font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--kx-ink); transition: color .25s; }
body.theme-kariux .kx-blog-row:hover .kx-blog-row-title { color: var(--kx-brand); }
body.theme-kariux .kx-blog-row-arrow { color: var(--kx-ink-soft); font-size: 20px; transition: transform .25s, color .25s; }
body.theme-kariux .kx-blog-row:hover .kx-blog-row-arrow { color: var(--kx-brand); transform: translate(2px, -2px); }
body.theme-kariux .kx-blog-empty { padding: 30px; text-align: center; color: var(--kx-ink-soft); border: 1px dashed var(--kx-line); border-radius: 16px; }
@media (max-width: 991px) { body.theme-kariux .kx-blog-grid { grid-template-columns: 1fr; } }
@media (max-width: 575px) {
    body.theme-kariux .kx-blog-feature h3 { font-size: 20px; }
    body.theme-kariux .kx-blog-thumb { width: 72px; height: 64px; min-width: 72px; }
}

/* =====================================================================
   18. Contact page (modern split: info + form)
   ===================================================================== */
body.theme-kariux .kx-contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 36px; align-items: start; }
body.theme-kariux .kx-contact-info .kx-chip { margin-bottom: 14px; }
body.theme-kariux .kx-contact-info .kx-sec-title { font-size: 34px; margin: 0 0 14px; }
body.theme-kariux .kx-contact-info > p { font-size: 15px; color: var(--kx-ink-soft); line-height: 1.8; margin-bottom: 28px; }
body.theme-kariux .kx-contact-list { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 14px; }
body.theme-kariux .kx-contact-list li { display: flex; gap: 14px; align-items: flex-start; }
body.theme-kariux .kx-contact-ic { width: 48px; height: 48px; min-width: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--kx-brand) 10%, transparent); color: var(--kx-brand); font-size: 20px; }
body.theme-kariux .kx-contact-list li > div span { display: block; font-size: 13px; color: var(--kx-ink-soft); margin-bottom: 2px; }
body.theme-kariux .kx-contact-list a, body.theme-kariux .kx-contact-list li > div p { font-size: 16px; font-weight: 600; color: var(--kx-ink); text-decoration: none; margin: 0; }
body.theme-kariux .kx-contact-list a:hover { color: var(--kx-brand); }
body.theme-kariux .kx-contact-social { display: flex; gap: 10px; }
body.theme-kariux .kx-contact-social a { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--kx-card); border: 1px solid var(--kx-line); color: var(--kx-ink); transition: background .25s, color .25s, transform .25s, border-color .25s; }
body.theme-kariux .kx-contact-social a:hover { background: var(--kx-brand); border-color: var(--kx-brand); color: #fff; transform: translateY(-3px); }
body.theme-kariux .kx-contact-form-card { background: var(--kx-card); border: 1px solid var(--kx-line); border-radius: 22px; padding: 36px 34px; box-shadow: 0 24px 50px rgba(12,17,22,.06); }
body.theme-kariux .kx-contact-form-card h3 { font-size: 22px; font-weight: 700; margin: 0 0 22px; color: var(--kx-ink); }
body.theme-kariux .kx-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 22px; }
body.theme-kariux .kx-field-full { grid-column: 1 / -1; }
body.theme-kariux .kx-field label { display: block; font-size: 13px; font-weight: 600; color: var(--kx-ink-soft); margin-bottom: 7px; }
body.theme-kariux .kx-field input, body.theme-kariux .kx-field textarea { width: 100%; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--kx-line); background: var(--kx-bg-soft); color: var(--kx-ink); font-size: 14px; outline: none; transition: border-color .2s, box-shadow .2s, background .2s; }
body.theme-kariux .kx-field input:focus, body.theme-kariux .kx-field textarea:focus { border-color: var(--kx-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kx-brand) 14%, transparent); background: var(--kx-card); }
body.theme-kariux .kx-field textarea { resize: vertical; }
body.theme-kariux .kx-contact-map { margin-top: 36px; border-radius: 20px; overflow: hidden; border: 1px solid var(--kx-line); }
body.theme-kariux .kx-contact-map iframe { width: 100%; height: 380px; border: 0; display: block; }
@media (max-width: 991px) { body.theme-kariux .kx-contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 575px) { body.theme-kariux .kx-field-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   19. Technologies + reusable detail sidebar (token-based, dark-aware)
   ===================================================================== */
body.theme-kariux .kx-tech-lead { max-width: 680px; margin: 0 auto 40px; text-align: center; font-size: 15px; line-height: 1.8; color: var(--kx-ink-soft); }
body.theme-kariux .kx-tech-group { margin-bottom: 30px; }
body.theme-kariux .kx-tech-group-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
body.theme-kariux .kx-tech-group-name { font-size: 13px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--kx-brand); }
body.theme-kariux .kx-tech-group-head::after { content: ""; flex: 1; height: 1px; background: var(--kx-line); }
body.theme-kariux .kx-tech-count { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--kx-ink-soft); background: var(--kx-bg-soft); border: 1px solid var(--kx-line); }
body.theme-kariux .kx-tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
body.theme-kariux .kx-tech-card { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 14px; background: var(--kx-card); border: 1px solid var(--kx-line); text-decoration: none; transition: transform .22s, border-color .22s, box-shadow .22s; }
body.theme-kariux .kx-tech-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--kx-brand) 35%, var(--kx-line)); box-shadow: 0 16px 36px rgba(12,17,22,.08); }
body.theme-kariux .kx-tech-ic { width: 46px; height: 46px; min-width: 46px; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--kx-brand) 10%, transparent); color: var(--kx-brand); font-weight: 800; font-size: 18px; }
body.theme-kariux .kx-tech-ic img { width: 100%; height: 100%; object-fit: cover; }
body.theme-kariux .kx-tech-info { min-width: 0; }
body.theme-kariux .kx-tech-info h4 { font-size: 15px; font-weight: 700; margin: 0; color: var(--kx-ink); }
body.theme-kariux .kx-tech-info p { font-size: 12.5px; color: var(--kx-ink-soft); margin: 2px 0 0; }
body.theme-kariux .kx-tech-arrow { margin-left: auto; color: var(--kx-ink-soft); font-size: 18px; transition: transform .22s, color .22s; }
body.theme-kariux .kx-tech-card:hover .kx-tech-arrow { color: var(--kx-brand); transform: translate(2px,-2px); }

/* detail intro + sidebar (technology/show, product/show) */
body.theme-kariux .kx-detail-intro { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
body.theme-kariux .kx-detail-ic { width: 64px; height: 64px; min-width: 64px; border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--kx-brand); color: #fff; font-weight: 800; font-size: 26px; }
body.theme-kariux .kx-detail-ic img { width: 100%; height: 100%; object-fit: cover; }
body.theme-kariux .kx-detail-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--kx-brand); margin-bottom: 4px; }
body.theme-kariux .kx-detail-intro p { margin: 0; color: var(--kx-ink-soft); font-size: 15px; }
body.theme-kariux .kx-card-prose { padding: 34px; }
body.theme-kariux .kx-side-card, body.theme-kariux .kx-side-cta { background: var(--kx-card); border: 1px solid var(--kx-line); border-radius: 18px; padding: 24px; margin-bottom: 22px; }
body.theme-kariux .kx-side-card h5, body.theme-kariux .kx-side-cta h5 { font-size: 17px; font-weight: 700; color: var(--kx-ink); margin: 0 0 14px; }
body.theme-kariux .kx-side-links { list-style: none; padding: 0; margin: 0; }
body.theme-kariux .kx-side-links li { border-bottom: 1px solid var(--kx-line); }
body.theme-kariux .kx-side-links li:last-child { border-bottom: none; }
body.theme-kariux .kx-side-links a { display: flex; align-items: center; gap: 9px; padding: 11px 4px; color: var(--kx-ink-soft); text-decoration: none; font-weight: 600; font-size: 14px; transition: color .2s, padding .2s; }
body.theme-kariux .kx-side-links a i { color: var(--kx-brand); font-size: 13px; transition: transform .2s; }
body.theme-kariux .kx-side-links a:hover { color: var(--kx-brand); padding-left: 10px; }
body.theme-kariux .kx-side-empty { padding: 8px 4px; color: var(--kx-ink-soft); font-size: 13px; }
body.theme-kariux .kx-side-cta { text-align: center; }
body.theme-kariux .kx-side-cta-ic { width: 54px; height: 54px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--kx-brand) 12%, transparent); color: var(--kx-brand); font-size: 24px; margin-bottom: 14px; }
body.theme-kariux .kx-side-cta p { color: var(--kx-ink-soft); font-size: 14px; line-height: 1.7; margin: 0 0 18px; }
@media (max-width: 991px) { body.theme-kariux .kx-tech-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { body.theme-kariux .kx-tech-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   20. Products (index grid + detail) — token-based, dark-aware
   ===================================================================== */
body.theme-kariux .kx-prod-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 36px; }
body.theme-kariux .kx-prod-card { display: flex; flex-direction: column; height: 100%; background: var(--kx-card); border: 1px solid var(--kx-line); border-radius: 18px; overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s; }
body.theme-kariux .kx-prod-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(12,17,22,.10); border-color: color-mix(in srgb, var(--kx-brand) 25%, var(--kx-line)); }
body.theme-kariux .kx-prod-thumb { position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--kx-bg-soft); }
body.theme-kariux .kx-prod-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
body.theme-kariux .kx-prod-card:hover .kx-prod-thumb img { transform: scale(1.05); }
body.theme-kariux .kx-prod-badge { position: absolute; top: 12px; left: 12px; background: var(--kx-brand); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: 20px; }
body.theme-kariux .kx-prod-body { display: flex; flex-direction: column; flex: 1; padding: 20px; }
body.theme-kariux .kx-prod-cat { font-size: 12px; color: var(--kx-brand); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
body.theme-kariux .kx-prod-body h3 { font-size: 18px; font-weight: 700; margin: 5px 0 8px; }
body.theme-kariux .kx-prod-body h3 a { color: var(--kx-ink); text-decoration: none; transition: color .2s; }
body.theme-kariux .kx-prod-body h3 a:hover { color: var(--kx-brand); }
body.theme-kariux .kx-prod-body p { font-size: 13px; color: var(--kx-ink-soft); line-height: 1.65; flex: 1; margin: 0; }
body.theme-kariux .kx-prod-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
body.theme-kariux .kx-prod-price { font-weight: 800; color: var(--kx-ink); }
body.theme-kariux .kx-prod-price s { color: var(--kx-ink-soft); font-weight: 400; font-size: 13px; margin-right: 6px; }
body.theme-kariux .kx-prod-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--kx-bg-soft); border: 1px solid var(--kx-line); color: var(--kx-ink); border-radius: 10px; padding: 9px 16px; font-size: 13px; font-weight: 700; text-decoration: none; transition: .22s; }
body.theme-kariux .kx-prod-btn:hover { background: var(--kx-brand); border-color: var(--kx-brand); color: #fff; }
body.theme-kariux .kx-prod-link { display: inline-flex; align-items: center; gap: 6px; color: var(--kx-brand); font-weight: 700; font-size: 13px; text-decoration: none; margin-top: 10px; }
body.theme-kariux .kx-pagination-wrap { display: flex; justify-content: center; margin-top: 40px; }
/* product detail */
body.theme-kariux .kx-pd-main { width: 100%; border-radius: 18px; border: 1px solid var(--kx-line); }
body.theme-kariux .kx-pd-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
body.theme-kariux .kx-pd-thumbs img { width: 88px; height: 68px; object-fit: cover; border-radius: 10px; border: 1px solid var(--kx-line); cursor: pointer; transition: border-color .2s; }
body.theme-kariux .kx-pd-thumbs img:hover { border-color: var(--kx-brand); }
body.theme-kariux .kx-pd-h { font-size: 20px; font-weight: 700; color: var(--kx-ink); margin: 0 0 14px; }
body.theme-kariux .kx-pd-h.sm { font-size: 16px; margin: 26px 0 12px; }
body.theme-kariux .kx-pd-tags { display: flex; flex-wrap: wrap; gap: 8px; }
body.theme-kariux .kx-pd-tag { display: inline-block; background: var(--kx-bg-soft); border: 1px solid var(--kx-line); color: var(--kx-ink-soft); border-radius: 20px; padding: 6px 14px; font-size: 12px; font-weight: 600; }
body.theme-kariux .kx-pd-feat { list-style: none; padding: 0; margin: 0; }
body.theme-kariux .kx-pd-feat li { display: flex; align-items: flex-start; gap: 9px; padding: 9px 0; border-bottom: 1px dashed var(--kx-line); color: var(--kx-ink-soft); font-size: 14px; }
body.theme-kariux .kx-pd-feat li:last-child { border-bottom: none; }
body.theme-kariux .kx-pd-feat li i { color: #22a06b; margin-top: 3px; }
body.theme-kariux .kx-pd-buy { text-align: left; }
body.theme-kariux .kx-pd-price { font-size: 30px; font-weight: 800; color: var(--kx-ink); margin: 8px 0 14px; }
body.theme-kariux .kx-pd-price s { color: var(--kx-ink-soft); font-weight: 400; font-size: 18px; margin-right: 8px; }
body.theme-kariux .kx-pd-demo { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--kx-line); color: var(--kx-ink); border-radius: 10px; padding: 11px 20px; font-weight: 600; font-size: 14px; text-decoration: none; transition: .2s; }
body.theme-kariux .kx-pd-demo:hover { border-color: var(--kx-brand); color: var(--kx-brand); }
body.theme-kariux .kx-pd-buy-note { color: var(--kx-ink-soft); font-size: 13.5px; line-height: 1.7; margin: 0 0 16px; }
body.theme-kariux .kx-select { width: 100%; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--kx-line); background: var(--kx-bg-soft); color: var(--kx-ink); font-size: 14px; outline: none; }
body.theme-kariux .kx-select:focus { border-color: var(--kx-brand); }
body.theme-kariux .kx-form-error { background: rgba(229,68,53,.1); border: 1px solid rgba(229,68,53,.35); color: #e05a4a; border-radius: 12px; padding: 12px 18px; }
body.theme-kariux .kx-form-error ul { padding-left: 18px; }
body.theme-kariux .kx-pd-related-title { font-size: 24px; font-weight: 800; color: var(--kx-ink); margin: 50px 0 24px; }
/* pagination (shared) */
body.theme-kariux .kx-pagination-wrap .pagination { display: flex; gap: 6px; list-style: none; padding: 0; }
body.theme-kariux .kx-pagination-wrap .page-link { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--kx-line); background: var(--kx-card); color: var(--kx-ink); text-decoration: none; }
body.theme-kariux .kx-pagination-wrap .page-item.active .page-link { background: var(--kx-brand); border-color: var(--kx-brand); color: #fff; }
body.theme-kariux .kx-pagination-wrap .page-item.disabled .page-link { opacity: .5; }

/* =====================================================================
   21. Inner-page polish (shared across about / service / pricing /
       portfolio / blog / page) — token-based, dark-aware
   ===================================================================== */
/* centered section heading with brand accent */
body.theme-kariux .kx-inner-section .section-title.text-center { margin-bottom: 8px; }
body.theme-kariux .kx-inner-section .section-title h2 { font-size: 34px; font-weight: 800; color: var(--kx-ink); line-height: 1.2; }
body.theme-kariux .kx-inner-section .section-title.text-center h2 { display: inline-block; position: relative; padding-bottom: 16px; }
body.theme-kariux .kx-inner-section .section-title.text-center h2::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 54px; height: 3px; border-radius: 3px; background: var(--kx-brand); }
body.theme-kariux .kx-inner-section .section-title span { color: var(--kx-brand); font-weight: 700; }
body.theme-kariux .kx-inner-section h2.fw-bold { font-size: 30px; font-weight: 800; color: var(--kx-ink); }
/* eyebrow chip helper for inner sections */
body.theme-kariux .kx-eyebrow-c { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 30px; background: color-mix(in srgb, var(--kx-brand) 12%, transparent); color: var(--kx-brand); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 14px; }

/* cards (about values, touch points, approach, portfolio meta) */
body.theme-kariux .kx-card { background: var(--kx-card); border: 1px solid var(--kx-line); border-radius: 18px; overflow: hidden; height: 100%; transition: transform .25s, box-shadow .25s, border-color .25s; }
body.theme-kariux .kx-card:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(12,17,22,.08); border-color: color-mix(in srgb, var(--kx-brand) 22%, var(--kx-line)); }
body.theme-kariux .kx-card .pad { padding: 28px; }
body.theme-kariux .kx-card .pad h3 { font-size: 19px; font-weight: 700; color: var(--kx-ink); margin-bottom: 10px; }
body.theme-kariux .kx-card .pad p { color: var(--kx-ink-soft); }
/* value / icon card */
body.theme-kariux .kx-value-ic { width: 56px; height: 56px; border-radius: 15px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--kx-brand) 10%, transparent); color: var(--kx-brand); font-size: 24px; margin-bottom: 18px; transition: background .25s, transform .25s; }
body.theme-kariux .kx-value-ic img { max-height: 30px; transition: filter .25s; }
body.theme-kariux .kx-card:hover .kx-value-ic { background: var(--kx-brand); transform: rotate(-6deg); }
body.theme-kariux .kx-card:hover .kx-value-ic i { color: #fff; }
body.theme-kariux .kx-card:hover .kx-value-ic img { filter: brightness(0) invert(1); }
body.theme-kariux .kx-step-badge { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--kx-brand); color: #fff; font-weight: 800; font-size: 16px; margin-bottom: 16px; }

/* feature image */
body.theme-kariux .kx-feature-img img { width: 100%; border-radius: 20px; border: 1px solid var(--kx-line); display: block; }
/* team cards */
body.theme-kariux .kx-team-img { overflow: hidden; }
body.theme-kariux .kx-team-img img { width: 100%; transition: transform .5s; }
body.theme-kariux .kx-card:hover .kx-team-img img { transform: scale(1.06); }
body.theme-kariux .kx-card .pad .d-flex a { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--kx-bg-soft); border: 1px solid var(--kx-line); color: var(--kx-ink-soft); transition: .2s; }
body.theme-kariux .kx-card .pad .d-flex a:hover { background: var(--kx-brand); border-color: var(--kx-brand); color: #fff; }

/* FAQ accordion — modern, token-based */
body.theme-kariux .accordion-item { background: var(--kx-card); border: 1px solid var(--kx-line); border-radius: 14px !important; margin-bottom: 12px; overflow: hidden; }
body.theme-kariux .accordion-button { background: var(--kx-card); color: var(--kx-ink); font-weight: 600; font-size: 16px; padding: 18px 22px; box-shadow: none !important; }
body.theme-kariux .accordion-button:not(.collapsed) { background: var(--kx-card); color: var(--kx-brand); }
body.theme-kariux .accordion-button:focus { box-shadow: none; }
body.theme-kariux .accordion-button::after { background-size: 1rem; }
body.theme-kariux.kx-dark .accordion-button::after { filter: invert(1) grayscale(1) brightness(1.4); }
body.theme-kariux .accordion-body { color: var(--kx-ink-soft); padding: 0 22px 20px; line-height: 1.8; }

/* portfolio-detail meta cards + muted-text safety */
body.theme-kariux .kx-meta { display: flex; align-items: center; gap: 14px; }
body.theme-kariux .kx-meta-ic { width: 46px; height: 46px; min-width: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--kx-brand) 10%, transparent); color: var(--kx-brand); font-size: 20px; }
body.theme-kariux .kx-meta small { color: var(--kx-ink-soft); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
body.theme-kariux .kx-meta .fw-bold { color: var(--kx-ink); }
body.theme-kariux .text-muted { color: var(--kx-ink-soft) !important; }

/* =====================================================================
   22. Inner-page redesigns (about / service / pricing / blog)
   ===================================================================== */
body.theme-kariux .kx-inner-section.pt-0 { padding-top: 0; }
body.theme-kariux .kx-inner-section.pb-0 { padding-bottom: 0; }

/* ---- About ---- */
body.theme-kariux .kx-ab2-intro { display: grid; grid-template-columns: 1fr 1.1fr; gap: 54px; align-items: center; }
body.theme-kariux .kx-ab2-media { position: relative; }
body.theme-kariux .kx-ab2-media > img { width: 100%; border-radius: 24px; display: block; }
body.theme-kariux .kx-ab2-media-badge { position: absolute; bottom: -24px; left: -16px; background: linear-gradient(150deg, var(--kx-brand), color-mix(in srgb, var(--kx-brand) 62%, #000)); color: #fff; border-radius: 18px; padding: 18px 22px; max-width: 210px; box-shadow: 0 18px 40px color-mix(in srgb, var(--kx-brand) 35%, transparent); }
body.theme-kariux .kx-ab2-media-badge .num { display: block; font-size: 30px; font-weight: 800; line-height: 1; }
body.theme-kariux .kx-ab2-media-badge .lbl { font-size: 12px; opacity: .9; }
body.theme-kariux .kx-display { font-size: 36px; font-weight: 800; color: var(--kx-ink); line-height: 1.18; margin: 14px 0 16px; }
body.theme-kariux .kx-ab2-cta { display: flex; align-items: center; gap: 24px; margin-top: 22px; flex-wrap: wrap; }
body.theme-kariux .kx-ab-stats-wrap { padding: 30px 0 0; }
body.theme-kariux .kx-ab-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; background: var(--kx-bg-soft); border: 1px solid var(--kx-line); border-radius: 22px; padding: 38px 30px; }
body.theme-kariux .kx-ab-stat { text-align: center; border-right: 1px solid var(--kx-line); }
body.theme-kariux .kx-ab-stat:last-child { border-right: none; }
body.theme-kariux .kx-ab-stat-num { font-size: 38px; font-weight: 800; color: var(--kx-brand); display: flex; justify-content: center; align-items: baseline; gap: 2px; line-height: 1; }
body.theme-kariux .kx-ab-stat-num em { font-size: 18px; font-style: normal; }
body.theme-kariux .kx-ab-stat p { margin: 8px 0 0; color: var(--kx-ink-soft); font-size: 14px; }
body.theme-kariux .kx-team { border-radius: 20px; overflow: hidden; border: 1px solid var(--kx-line); background: var(--kx-card); }
body.theme-kariux .kx-team-photo { position: relative; aspect-ratio: 1; overflow: hidden; }
body.theme-kariux .kx-team-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
body.theme-kariux .kx-team:hover .kx-team-photo img { transform: scale(1.06); }
body.theme-kariux .kx-team-social { position: absolute; inset: auto 0 0 0; display: flex; gap: 8px; justify-content: center; padding: 16px; background: linear-gradient(transparent, rgba(0,0,0,.55)); opacity: 0; transform: translateY(10px); transition: .3s; }
body.theme-kariux .kx-team:hover .kx-team-social { opacity: 1; transform: none; }
body.theme-kariux .kx-team-social a { width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,.92); color: #0c1116; display: flex; align-items: center; justify-content: center; transition: .2s; }
body.theme-kariux .kx-team-social a:hover { background: var(--kx-brand); color: #fff; }
body.theme-kariux .kx-team-info { padding: 18px; text-align: center; }
body.theme-kariux .kx-team-info h4 { font-size: 17px; font-weight: 700; margin: 0; color: var(--kx-ink); }
body.theme-kariux .kx-team-info span { font-size: 13px; color: var(--kx-ink-soft); }
body.theme-kariux .kx-cta-band { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-radius: 24px; padding: 46px 48px; background: linear-gradient(155deg, #0c1018, #141b28); }
body.theme-kariux .kx-cta-glow { position: absolute; width: 400px; height: 400px; right: -100px; top: -150px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--kx-brand) 32%, transparent), transparent 65%); pointer-events: none; }
body.theme-kariux .kx-cta-band-inner { position: relative; z-index: 1; }
body.theme-kariux .kx-cta-band h2 { color: #fff; font-size: 28px; font-weight: 800; margin: 0 0 6px; }
body.theme-kariux .kx-cta-band p { color: rgba(255,255,255,.7); margin: 0; }
body.theme-kariux .kx-cta-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px; background: var(--kx-brand); color: #fff; padding: 14px 28px; border-radius: 30px; font-weight: 700; text-decoration: none; transition: transform .25s, box-shadow .25s; }
body.theme-kariux .kx-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px color-mix(in srgb, var(--kx-brand) 40%, transparent); }
body.theme-kariux .kx-cta-btn i { transition: transform .25s; }
body.theme-kariux .kx-cta-btn:hover i { transform: translateX(4px); }

/* ---- Service detail ---- */
body.theme-kariux .kx-sticky { position: sticky; top: 100px; }
body.theme-kariux .kx-side-contact { list-style: none; padding: 0; margin: 0; }
body.theme-kariux .kx-side-contact li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--kx-line); }
body.theme-kariux .kx-side-contact li:last-child { border-bottom: none; }
body.theme-kariux .kx-side-contact li i { color: var(--kx-brand); }
body.theme-kariux .kx-side-contact a { color: var(--kx-ink); text-decoration: none; font-weight: 600; font-size: 14px; }
body.theme-kariux .kx-side-contact a:hover { color: var(--kx-brand); }
body.theme-kariux .kx-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; }
body.theme-kariux .kx-step-item { padding: 28px; border-radius: 18px; background: var(--kx-card); border: 1px solid var(--kx-line); transition: transform .25s, box-shadow .25s, border-color .25s; }
body.theme-kariux .kx-step-item:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(12,17,22,.08); border-color: color-mix(in srgb, var(--kx-brand) 25%, var(--kx-line)); }
body.theme-kariux .kx-step-item h3 { font-size: 18px; font-weight: 700; color: var(--kx-ink); margin: 0 0 8px; }
body.theme-kariux .kx-step-item p { color: var(--kx-ink-soft); font-size: 14px; }

/* ---- Pricing toggle + assurances ---- */
body.theme-kariux .kx-price-toggle { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 40px; font-weight: 600; color: var(--kx-ink-soft); }
body.theme-kariux .kx-switch { position: relative; display: inline-block; width: 52px; height: 28px; }
body.theme-kariux .kx-switch input { opacity: 0; width: 0; height: 0; }
body.theme-kariux .kx-switch-track { position: absolute; inset: 0; border-radius: 30px; background: var(--kx-line); cursor: pointer; transition: background .25s; }
body.theme-kariux .kx-switch-track::before { content: ""; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px; border-radius: 50%; background: #fff; transition: transform .25s; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
body.theme-kariux .kx-switch input:checked + .kx-switch-track { background: var(--kx-brand); }
body.theme-kariux .kx-switch input:checked + .kx-switch-track::before { transform: translateX(24px); }
body.theme-kariux .kx-save { background: color-mix(in srgb, var(--kx-brand) 14%, transparent); color: var(--kx-brand); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; font-style: normal; margin-left: 4px; }
body.theme-kariux .kx-amt-y { display: none; }
body.theme-kariux:has(#kxBilling:checked) .kx-amt-m { display: none; }
body.theme-kariux:has(#kxBilling:checked) .kx-amt-y { display: block; }
body.theme-kariux .kx-price-assure { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; margin-top: 44px; color: var(--kx-ink-soft); font-size: 14px; }
body.theme-kariux .kx-price-assure span { display: flex; align-items: center; gap: 8px; }
body.theme-kariux .kx-price-assure i { color: var(--kx-brand); }

/* ---- Blog list / article ---- */
body.theme-kariux .kx-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
body.theme-kariux .kx-post { display: flex; flex-direction: column; background: var(--kx-card); border: 1px solid var(--kx-line); border-radius: 20px; overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s; }
body.theme-kariux .kx-post:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(12,17,22,.10); border-color: color-mix(in srgb, var(--kx-brand) 22%, var(--kx-line)); }
body.theme-kariux .kx-post-img { position: relative; display: block; aspect-ratio: 16/10; overflow: hidden; }
body.theme-kariux .kx-post-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
body.theme-kariux .kx-post:hover .kx-post-img img { transform: scale(1.05); }
body.theme-kariux .kx-post-cat { position: absolute; top: 14px; left: 14px; background: var(--kx-brand); color: #fff; font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 20px; }
body.theme-kariux .kx-post-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
body.theme-kariux .kx-post-meta { font-size: 13px; color: var(--kx-ink-soft); display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
body.theme-kariux .kx-post-meta i { color: var(--kx-brand); }
body.theme-kariux .kx-post-body h3 { font-size: 18px; font-weight: 700; line-height: 1.35; margin: 0 0 10px; }
body.theme-kariux .kx-post-body h3 a { color: var(--kx-ink); text-decoration: none; transition: color .2s; }
body.theme-kariux .kx-post-body h3 a:hover { color: var(--kx-brand); }
body.theme-kariux .kx-post-body p { font-size: 14px; color: var(--kx-ink-soft); line-height: 1.7; margin: 0 0 16px; }
body.theme-kariux .kx-post-link { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; color: var(--kx-brand); font-weight: 700; font-size: 14px; text-decoration: none; }
body.theme-kariux .kx-post-link i { transition: transform .25s; }
body.theme-kariux .kx-post:hover .kx-post-link i { transform: translateX(4px); }
body.theme-kariux .kx-article-wrap { display: flex; gap: 30px; max-width: 920px; margin: 0 auto; }
body.theme-kariux .kx-article-share { position: sticky; top: 100px; height: fit-content; display: flex; flex-direction: column; align-items: center; gap: 10px; }
body.theme-kariux .kx-article-share > span { font-size: 11px; color: var(--kx-ink-soft); text-transform: uppercase; letter-spacing: .5px; }
body.theme-kariux .kx-article-share a { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--kx-card); border: 1px solid var(--kx-line); color: var(--kx-ink-soft); transition: .2s; }
body.theme-kariux .kx-article-share a:hover { background: var(--kx-brand); border-color: var(--kx-brand); color: #fff; }
body.theme-kariux .kx-article-main { flex: 1; min-width: 0; }
body.theme-kariux .kx-article-author { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
body.theme-kariux .kx-article-author img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
body.theme-kariux .kx-article-author strong { display: block; color: var(--kx-ink); font-size: 15px; }
body.theme-kariux .kx-article-author span { font-size: 13px; color: var(--kx-ink-soft); }
body.theme-kariux .kx-article-related { max-width: 1100px; margin: 64px auto 0; }
body.theme-kariux .kx-article-related h3 { font-size: 24px; font-weight: 800; color: var(--kx-ink); margin-bottom: 24px; }
body.theme-kariux.kx-dark .home1-banner-section .banner-content .banner-content-bottom .rating-area .rating span,
body.theme-kariux.kx-dark .footer-section .footer-top .footer-widget .rating-area > li .single-rating .review span,
body.theme-kariux.kx-dark .footer-section .footer-top .footer-widget .rating-area > li .single-rating .rating span,
body.theme-kariux.kx-dark .home1-banner-section .banner-content .banner-content-bottom .rating-area .review span { 
    color: #aab4c0 !important;
}

body.theme-kariux.kx-dark  .footer-section .footer-bottom .footer-bottom-right ul li a { color: #aab4c0 !important; }

@media (max-width: 991px) {
    body.theme-kariux .kx-ab2-intro { grid-template-columns: 1fr; gap: 50px; }
    body.theme-kariux .kx-ab-stats { grid-template-columns: 1fr 1fr; }
    body.theme-kariux .kx-ab-stat:nth-child(2) { border-right: none; }
    body.theme-kariux .kx-post-grid { grid-template-columns: 1fr 1fr; }
    body.theme-kariux .kx-article-wrap { flex-direction: column-reverse; }
    body.theme-kariux .kx-article-share { position: static; flex-direction: row; justify-content: center; }
}
@media (max-width: 575px) {
    body.theme-kariux .kx-ab-stats { grid-template-columns: 1fr 1fr; }
    body.theme-kariux .kx-ab-stat { border-right: none; }
    body.theme-kariux .kx-post-grid { grid-template-columns: 1fr; }
    body.theme-kariux .kx-cta-band { padding: 34px 26px; }
    body.theme-kariux .kx-display { font-size: 28px; }
}


body.theme-kariux.kx-dark header.style-1 .nav-right .right-sidebar-and-hotline-area .hotline-area .icon {
    background-color: rgb(10 13 19 / 50%) !important;
}

body.theme-kariux.kx-dark  header.style-1 .nav-right .right-sidebar-and-hotline-area .hotline-area .icon svg {
    fill: #aab4c0 !important;
}

body.theme-kariux.kx-dark header.style-1 .main-menu > ul > li > a::after{
    border-bottom: 1px solid  #aab4c0 !important;
}

body.theme-kariux.kx-dark  header.style-1 .main-menu > ul > li.menu-item-has-children::after{
        color: #aab4c0 !important;
}
/* =====================================================================
   About — "What drives us forward" (redesigned values section)
   ===================================================================== */
body.theme-kariux .kx-values-section { position: relative; overflow: hidden; }
body.theme-kariux .kx-values-glow { position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 720px; height: 360px; background: radial-gradient(circle, color-mix(in srgb, var(--kx-brand) 16%, transparent), transparent 70%); filter: blur(20px); pointer-events: none; z-index: 0; }
body.theme-kariux .kx-values-section .container { position: relative; z-index: 1; }
body.theme-kariux .kx-values-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--kx-brand); background: color-mix(in srgb, var(--kx-brand) 10%, transparent); border: 1px solid color-mix(in srgb, var(--kx-brand) 26%, transparent); padding: 6px 14px; border-radius: 100px; margin-bottom: 14px; }
body.theme-kariux .kx-values-lead { text-align: center; max-width: 560px; margin: 0 auto 46px; color: var(--kx-ink-soft); font-size: 15px; line-height: 1.7; }
body.theme-kariux .kx-values-tabwrap { display: grid; grid-template-columns: minmax(280px, 350px) 1fr; gap: 24px; align-items: start; }
/* Tab buttons */
body.theme-kariux .kx-values-tabs { display: flex; flex-direction: column; gap: 12px; }
body.theme-kariux .kx-vtab { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 17px 20px; border-radius: 16px; background: var(--kx-card); border: 1px solid var(--kx-line); cursor: pointer; transition: border-color .25s, background .25s, transform .25s, box-shadow .25s; }
body.theme-kariux .kx-vtab:hover { transform: translateX(3px); border-color: color-mix(in srgb, var(--kx-brand) 40%, transparent); }
body.theme-kariux .kx-vtab.active { border-color: color-mix(in srgb, var(--kx-brand) 55%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--kx-brand) 12%, var(--kx-card)), var(--kx-card)); box-shadow: 0 16px 34px rgba(12,17,22,.12); }
body.theme-kariux .kx-vtab-ic { flex: none; width: 46px; height: 46px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; color: var(--kx-brand); background: color-mix(in srgb, var(--kx-brand) 12%, transparent); transition: background .25s, color .25s, transform .25s; }
body.theme-kariux .kx-vtab.active .kx-vtab-ic { background: linear-gradient(135deg, var(--kx-brand), color-mix(in srgb, var(--kx-brand) 55%, #000)); color: #fff; transform: rotate(-6deg); box-shadow: 0 10px 20px color-mix(in srgb, var(--kx-brand) 30%, transparent); }
body.theme-kariux .kx-vtab-txt { display: flex; flex-direction: column; line-height: 1.25; }
body.theme-kariux .kx-vtab-txt em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--kx-brand); }
body.theme-kariux .kx-vtab-txt strong { font-size: 16px; font-weight: 700; color: var(--kx-ink); }
body.theme-kariux .kx-vtab-arrow { margin-left: auto; color: var(--kx-brand); opacity: 0; transform: translateX(-8px); transition: opacity .25s, transform .25s; }
body.theme-kariux .kx-vtab.active .kx-vtab-arrow { opacity: 1; transform: none; }
/* Content panel */
body.theme-kariux .kx-values-panels { position: relative; }
body.theme-kariux .kx-vpanel { display: none; position: relative; overflow: hidden; padding: 42px 40px; border-radius: 22px; background: var(--kx-card); border: 1px solid var(--kx-line); }
body.theme-kariux .kx-vpanel.active { display: block; animation: kxVfade .35s ease; }
@keyframes kxVfade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
body.theme-kariux .kx-vpanel-watermark { position: absolute; right: -22px; bottom: -34px; font-size: 175px; line-height: 1; color: color-mix(in srgb, var(--kx-brand) 6%, transparent); pointer-events: none; z-index: 0; }
body.theme-kariux .kx-vpanel-tag { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--kx-brand); background: color-mix(in srgb, var(--kx-brand) 10%, transparent); border: 1px solid color-mix(in srgb, var(--kx-brand) 24%, transparent); padding: 8px 16px; border-radius: 100px; margin-bottom: 20px; }
body.theme-kariux .kx-vpanel-text { position: relative; z-index: 1; color: var(--kx-ink-soft); font-size: 16px; line-height: 1.9; }
body.theme-kariux .kx-vpanel-text p { margin-bottom: 14px; }
body.theme-kariux .kx-vpanel-text p:last-child { margin-bottom: 0; }
@media (max-width: 991px) {
    body.theme-kariux .kx-values-tabwrap { grid-template-columns: 1fr; }
    body.theme-kariux .kx-values-tabs { flex-direction: row; flex-wrap: wrap; }
    body.theme-kariux .kx-vtab { flex: 1 1 auto; min-width: 180px; }
    body.theme-kariux .kx-vtab-arrow { display: none; }
}
@media (max-width: 575px) {
    body.theme-kariux .kx-vpanel { padding: 30px 24px; }
    body.theme-kariux .kx-vpanel-text { font-size: 15px; }
}

/* =====================================================================
   Service details — redesigned sections (sidebar CTA, deliver, approach)
   ===================================================================== */
/* Sidebar CTA */
body.theme-kariux .kx-sd-cta { position: relative; overflow: hidden; background: linear-gradient(155deg, color-mix(in srgb, var(--kx-brand) 14%, var(--kx-card)), var(--kx-card)); border-color: color-mix(in srgb, var(--kx-brand) 28%, var(--kx-line)); }
body.theme-kariux .kx-sd-cta-glow { position: absolute; top: -60px; right: -40px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--kx-brand) 30%, transparent), transparent 70%); filter: blur(8px); pointer-events: none; }
body.theme-kariux .kx-sd-cta > *:not(.kx-sd-cta-glow) { position: relative; z-index: 1; }
body.theme-kariux .kx-sd-cta .kx-side-cta-ic { background: linear-gradient(135deg, var(--kx-brand), color-mix(in srgb, var(--kx-brand) 55%, #000)); color: #fff; box-shadow: 0 12px 24px color-mix(in srgb, var(--kx-brand) 32%, transparent); }
/* Contact card */
body.theme-kariux .kx-sd-contact .kx-side-contact li { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
body.theme-kariux .kx-sd-contact .kx-side-contact li:last-child { margin-bottom: 0; }
body.theme-kariux .kx-sd-cic { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--kx-brand) 12%, transparent); color: var(--kx-brand); flex: none; font-size: 15px; }

/* What we deliver */
body.theme-kariux .kx-sd-deliver-sec { position: relative; overflow: hidden; background: var(--kx-bg-soft); }
body.theme-kariux .kx-sd-deliver-glow { position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 600px; height: 300px; background: radial-gradient(circle, color-mix(in srgb, var(--kx-brand) 12%, transparent), transparent 70%); pointer-events: none; }
body.theme-kariux .kx-sd-deliver-sec .container { position: relative; z-index: 1; }
body.theme-kariux .kx-sd-deliver-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
body.theme-kariux .kx-sd-deliver { position: relative; overflow: hidden; padding: 34px 30px; border-radius: 20px; background: var(--kx-card); border: 1px solid var(--kx-line); transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s, border-color .35s; }
body.theme-kariux .kx-sd-deliver:hover { transform: translateY(-8px); border-color: color-mix(in srgb, var(--kx-brand) 42%, transparent); box-shadow: 0 26px 52px rgba(12,17,22,.14); }
body.theme-kariux .kx-sd-deliver-no { position: absolute; top: 20px; right: 26px; font-size: 38px; font-weight: 800; line-height: 1; color: color-mix(in srgb, var(--kx-ink) 7%, transparent); transition: color .35s; }
body.theme-kariux .kx-sd-deliver:hover .kx-sd-deliver-no { color: color-mix(in srgb, var(--kx-brand) 28%, transparent); }
body.theme-kariux .kx-sd-deliver-ic { width: 58px; height: 58px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 25px; color: #fff; margin-bottom: 20px; background: linear-gradient(135deg, var(--kx-brand), color-mix(in srgb, var(--kx-brand) 55%, #000)); box-shadow: 0 12px 24px color-mix(in srgb, var(--kx-brand) 30%, transparent); transition: transform .35s; }
body.theme-kariux .kx-sd-deliver-ic img { max-height: 30px; filter: brightness(0) invert(1); }
body.theme-kariux .kx-sd-deliver:hover .kx-sd-deliver-ic { transform: rotate(-6deg) scale(1.05); }
body.theme-kariux .kx-sd-deliver h3 { font-size: 19px; font-weight: 800; color: var(--kx-ink); margin: 0 0 10px; }
body.theme-kariux .kx-sd-deliver p { color: var(--kx-ink-soft); font-size: 14.5px; line-height: 1.75; margin: 0; }
body.theme-kariux .kx-sd-deliver-line { display: block; width: 36px; height: 3px; border-radius: 3px; margin-top: 20px; background: var(--kx-brand); opacity: .35; transition: width .4s, opacity .4s; }
body.theme-kariux .kx-sd-deliver:hover .kx-sd-deliver-line { width: 60px; opacity: 1; }

/* How we approach it — connected stepper */
body.theme-kariux .kx-sd-approach { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; position: relative; }
body.theme-kariux .kx-sd-approach::before { content: ""; position: absolute; top: 30px; left: 10%; right: 10%; height: 2px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--kx-brand) 42%, transparent) 0 8px, transparent 8px 16px); z-index: 0; }
body.theme-kariux .kx-sd-step { position: relative; z-index: 1; text-align: center; padding: 0 12px; }
body.theme-kariux .kx-sd-step-no { width: 60px; height: 60px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; background: var(--kx-card); border: 2px solid color-mix(in srgb, var(--kx-brand) 35%, transparent); box-shadow: 0 8px 20px rgba(12,17,22,.08); transition: transform .3s, background .3s, border-color .3s; }
body.theme-kariux .kx-sd-step-no em { font-style: normal; font-size: 20px; font-weight: 800; color: var(--kx-brand); transition: color .3s; }
body.theme-kariux .kx-sd-step:hover .kx-sd-step-no { background: linear-gradient(135deg, var(--kx-brand), color-mix(in srgb, var(--kx-brand) 55%, #000)); border-color: transparent; transform: translateY(-4px) scale(1.05); }
body.theme-kariux .kx-sd-step:hover .kx-sd-step-no em { color: #fff; }
body.theme-kariux .kx-sd-step h3 { font-size: 18px; font-weight: 800; color: var(--kx-ink); margin: 0 0 8px; }
body.theme-kariux .kx-sd-step p { color: var(--kx-ink-soft); font-size: 14px; line-height: 1.7; margin: 0; }
body.theme-kariux.kx-dark .kx-edge-btn{ background: var(--kx-card)!important;}
@media (max-width: 991px) { body.theme-kariux .kx-sd-deliver-grid, body.theme-kariux .kx-sd-approach { grid-template-columns: 1fr 1fr; } body.theme-kariux .kx-sd-approach::before { display: none; } }
@media (max-width: 575px) { body.theme-kariux .kx-sd-deliver-grid, body.theme-kariux .kx-sd-approach { grid-template-columns: 1fr; } }