/* =============================================
   KROXIA THEME - MAIN CSS
   ============================================= */

/* ---- BUTTONS ---- */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--kroxia-primary), #ea580c);
    color: #fff;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--kroxia-transition);
    white-space: nowrap;
    text-decoration: none;
}
.btn-primary:hover {
    background: linear-gradient(135deg, #ea580c, var(--kroxia-primary));
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(249, 115, 22, 0.4);
    color: #fff;
}
.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: transparent;
    color: var(--kroxia-primary);
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    border: 2px solid var(--kroxia-primary);
    cursor: pointer;
    transition: var(--kroxia-transition);
    white-space: nowrap;
    text-decoration: none;
}
.btn-outline:hover {
    background: var(--kroxia-primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(249, 115, 22, 0.3);
}
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: transparent;
    color: var(--kroxia-text, #1e293b);
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    border: 2px solid var(--kroxia-border-color, #e2e8f0);
    cursor: pointer;
    transition: var(--kroxia-transition);
    text-decoration: none;
}
.btn-ghost:hover {
    border-color: var(--kroxia-primary);
    color: var(--kroxia-primary);
}
.btn-lg { padding: 16px 36px; font-size: 1.05rem; }
.btn-white { background: #fff !important; color: var(--kroxia-primary) !important; }
.btn-white:hover { background: var(--kroxia-primary) !important; color: #fff !important; }
.btn-white-outline { border-color: rgba(255,255,255,0.6) !important; color: #fff !important; }
.btn-white-outline:hover { background: rgba(255,255,255,0.15) !important; border-color: #fff !important; }

/* ---- PAGE LOADER ---- */
.kroxia-loader {
    position: fixed; inset: 0;
    background: var(--kroxia-bg, #fff);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.kroxia-loader.loaded { opacity: 0; visibility: hidden; }
.loader-inner { text-align: center; }
.loader-logo img { animation: loaderPulse 1.2s ease-in-out infinite; }
.loader-progress {
    width: 200px; height: 3px;
    background: var(--kroxia-gray-200, #e2e8f0);
    border-radius: 10px;
    margin: 20px auto 0;
    overflow: hidden;
}
.loader-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--kroxia-primary), var(--kroxia-accent));
    border-radius: 10px;
    animation: loaderBar 1.5s ease forwards;
}
@keyframes loaderPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.05);opacity:.8} }
@keyframes loaderBar { from{width:0} to{width:100%} }

/* ---- HEADER ---- */
.site-header {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 1000;
    transition: var(--kroxia-transition);
}
.header-inner {
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    transition: var(--kroxia-transition);
}
[data-theme="dark"] .header-inner {
    background: rgba(10,15,30,0.92);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.site-header.scrolled .header-inner { box-shadow: 0 4px 30px rgba(0,0,0,0.1); }
.header-layout {
    display: flex; align-items: center; justify-content: space-between;
    height: 72px; gap: 24px;
}
.header-logo .logo-link { display: flex; align-items: center; }
.site-logo { height: 44px; width: auto; object-fit: contain; }
.kroxia-text-logo { font-family: var(--kroxia-font-heading); font-size: 1.5rem; font-weight: 700; color: var(--kroxia-text, #1e293b); }

/* ---- NAV MENU ---- */
.main-navigation { flex: 1; display: flex; justify-content: center; }
.nav-menu { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-menu li { position: relative; }
.nav-menu > li > a {
    display: flex; align-items: center; gap: 4px;
    padding: 8px 16px; font-size: 0.92rem; font-weight: 500;
    color: var(--kroxia-text, #1e293b); border-radius: 8px;
    transition: var(--kroxia-transition); white-space: nowrap;
}
.nav-menu > li > a:hover,
.nav-menu > li.current-menu-item > a { color: var(--kroxia-primary); background: rgba(249,115,22,0.08); }
.nav-menu .dropdown-arrow { transition: transform 0.2s ease; }
.nav-menu li:hover .dropdown-arrow { transform: rotate(180deg); }

/* Dropdown */
.sub-menu {
    position: absolute; top: calc(100% + 8px); left: 0;
    background: var(--kroxia-bg-card, #fff);
    border: 1px solid var(--kroxia-border-color, #e2e8f0);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12);
    min-width: 260px; padding: 10px;
    opacity: 0; visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    z-index: 100; list-style: none; margin: 0;
}
.nav-menu li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.sub-menu li a {
    display: flex; align-items: center;
    padding: 10px 14px; font-size: 0.88rem; font-weight: 500;
    color: var(--kroxia-text, #1e293b); border-radius: 10px;
    transition: var(--kroxia-transition); white-space: nowrap;
}
.sub-menu li a:hover { background: rgba(249,115,22,0.08); color: var(--kroxia-primary); padding-left: 20px; }

/* ---- HEADER ACTIONS ---- */
.header-actions { display: flex; align-items: center; gap: 12px; }
.theme-switcher {
    display: flex; align-items: center;
    background: var(--kroxia-gray-100, #f1f5f9);
    border-radius: 50px; padding: 4px; gap: 2px;
}
[data-theme="dark"] .theme-switcher { background: var(--kroxia-bg-card, #1a2035); }
.theme-btn {
    background: none; border: none; padding: 6px 10px; border-radius: 50px;
    cursor: pointer; color: var(--kroxia-gray-500, #64748b);
    transition: var(--kroxia-transition); display: flex; align-items: center;
}
.theme-btn.active { background: #fff; color: var(--kroxia-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
[data-theme="dark"] .theme-btn.active { background: var(--kroxia-gray-700, #334155); color: var(--kroxia-primary); }

/* Cart */
.header-cart { position: relative; }
.cart-trigger {
    display: flex; align-items: center; position: relative;
    padding: 8px 12px; color: var(--kroxia-text, #1e293b);
    border-radius: 10px; transition: var(--kroxia-transition);
}
.cart-trigger:hover { background: rgba(249,115,22,0.08); color: var(--kroxia-primary); }
.kroxia-cart-count {
    position: absolute; top: 2px; right: 4px;
    background: var(--kroxia-primary); color: #fff;
    font-size: 10px; font-weight: 700;
    width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; line-height: 1;
}
.mini-cart-dropdown {
    position: absolute; top: calc(100% + 10px); right: 0;
    width: 320px;
    background: var(--kroxia-bg-card, #fff);
    border: 1px solid var(--kroxia-border-color, #e2e8f0);
    border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1); z-index: 100;
}
.header-cart:hover .mini-cart-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.mini-cart-inner { padding: 20px; }

.header-cta-btn { font-size: 0.875rem; padding: 10px 22px; }

/* Mobile Toggle */
.mobile-menu-toggle {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    background: none; border: none; cursor: pointer; padding: 8px;
    border-radius: 8px; transition: var(--kroxia-transition);
    width: 40px; height: 40px;
}
.mobile-menu-toggle:hover { background: rgba(249,115,22,0.08); }
.hamburger-line {
    width: 24px; height: 2px;
    background: var(--kroxia-text, #1e293b);
    border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
    display: block; transform-origin: center;
}
.mobile-menu-toggle.is-active .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-toggle.is-active .hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mobile-menu-toggle.is-active .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- OFFCANVAS MENU ---- */
.offcanvas-menu {
    position: fixed; inset: 0; z-index: 99999;
    pointer-events: none; visibility: hidden;
}
.offcanvas-menu.active { pointer-events: auto; visibility: visible; }
.offcanvas-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.55); backdrop-filter: blur(3px);
    opacity: 0; transition: opacity 0.35s ease;
}
.offcanvas-menu.active .offcanvas-overlay { opacity: 1; }
.offcanvas-panel {
    position: absolute; top: 0; right: 0;
    width: 320px; max-width: 88vw; height: 100%;
    background: var(--kroxia-bg-card, #fff);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
    overflow-x: hidden; overflow-y: auto;
    display: flex; flex-direction: column;
    box-shadow: -8px 0 40px rgba(0,0,0,0.15);
}
.offcanvas-menu.active .offcanvas-panel { transform: translateX(0); }
.offcanvas-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; flex-shrink: 0;
    border-bottom: 1px solid var(--kroxia-border-color, #e2e8f0);
}
.offcanvas-logo img { height: 38px; width: auto; }
.offcanvas-close {
    background: none; border: none; cursor: pointer; padding: 8px;
    border-radius: 8px; color: var(--kroxia-text, #1e293b); transition: var(--kroxia-transition);
    flex-shrink: 0;
}
.offcanvas-close:hover { background: rgba(249,115,22,0.1); color: var(--kroxia-primary); }
.offcanvas-body { padding: 16px 20px 24px; flex: 1; }

/* Offcanvas nav items */
.offcanvas-nav { list-style: none; margin: 0; padding: 0; }
.offcanvas-nav > li { border-bottom: 1px solid var(--kroxia-border-color, #f1f5f9); }
.offcanvas-nav > li:last-child { border-bottom: none; }

/* Row containing link + toggle button */
.offcanvas-nav li .menu-item-row {
    display: flex; align-items: center;
}
.offcanvas-nav li a {
    display: flex; align-items: center; flex: 1;
    padding: 13px 4px 13px 8px; font-weight: 500; font-size: 0.95rem;
    color: var(--kroxia-text, #1e293b); border-radius: 8px;
    transition: color 0.2s ease; text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.offcanvas-nav li a:hover,
.offcanvas-nav li.current-menu-item > .menu-item-row > a { color: var(--kroxia-primary); }

/* Submenu toggle arrow button */
.offcanvas-submenu-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex-shrink: 0;
    background: none; border: none; cursor: pointer; border-radius: 8px;
    color: var(--kroxia-text-muted, #64748b); transition: all 0.2s ease;
    margin-left: 4px;
}
.offcanvas-submenu-toggle:hover { background: rgba(249,115,22,0.08); color: var(--kroxia-primary); }
.offcanvas-submenu-toggle svg { transition: transform 0.25s ease; }
.offcanvas-submenu-toggle.open svg { transform: rotate(180deg); }
.offcanvas-submenu-toggle.open { color: var(--kroxia-primary); }

/* Submenu panel */
.offcanvas-nav .sub-menu {
    position: static !important;
    opacity: 1 !important; visibility: visible !important;
    transform: none !important; box-shadow: none !important;
    border: none !important; min-width: unset !important; width: 100% !important;
    background: rgba(249,115,22,0.04); border-radius: 8px;
    padding: 4px 0 4px 12px !important; margin: 0 0 8px 0;
    display: none; overflow: hidden;
}
.offcanvas-nav .sub-menu.open { display: block; }
.offcanvas-nav .sub-menu li { border: none !important; }
.offcanvas-nav .sub-menu li a {
    font-size: 0.875rem; padding: 9px 8px; font-weight: 400;
    color: var(--kroxia-text-muted, #64748b);
}
.offcanvas-nav .sub-menu li a:hover { color: var(--kroxia-primary); background: transparent; }

.offcanvas-cta {
    margin-top: 20px; padding-top: 20px;
    border-top: 1px solid var(--kroxia-border-color, #e2e8f0);
}
.offcanvas-cta .btn-primary { width: 100%; justify-content: center; }

/* ---- SECTION GLOBALS ---- */
.section-tag {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 16px;
    background: rgba(249,115,22,0.1); color: var(--kroxia-primary);
    border-radius: 50px; font-size: 0.82rem; font-weight: 600;
    letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 16px;
}
.section-header { text-align: center; max-width: 700px; margin: 0 auto 60px; }
.section-title {
    font-family: var(--kroxia-font-heading);
    font-size: clamp(2rem,3vw,2.75rem);
    font-weight: 800; line-height: 1.2;
    color: var(--kroxia-text, #1e293b); margin-bottom: 16px;
}
.section-subtitle { font-size: 1.05rem; color: var(--kroxia-text-muted, #64748b); line-height: 1.7; }

/* ---- HERO SECTION ---- */
.hero-section {
    position: relative; min-height: 100vh;
    display: flex; align-items: center;
    overflow: hidden; padding-top: 80px;
    background: var(--kroxia-bg, #fff);
}
.hero-bg-gradient {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 60% at 60% 40%,rgba(249,115,22,.06) 0%,transparent 60%),
                radial-gradient(ellipse 50% 40% at 80% 70%,rgba(108,99,255,.05) 0%,transparent 60%);
    pointer-events: none;
}
[data-theme="dark"] .hero-section { background: var(--kroxia-bg, #0a0f1e); }
[data-theme="dark"] .hero-bg-gradient {
    background: radial-gradient(ellipse 80% 60% at 60% 40%,rgba(249,115,22,.1) 0%,transparent 60%),
                radial-gradient(ellipse 50% 40% at 80% 70%,rgba(108,99,255,.08) 0%,transparent 60%);
}
.hero-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding: 60px 0 80px; }
.hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 18px;
    background: rgba(249,115,22,.1); border: 1px solid rgba(249,115,22,.2);
    border-radius: 50px; font-size: 0.82rem; font-weight: 600; color: var(--kroxia-primary);
    margin-bottom: 24px;
}
.badge-dot { width: 8px; height: 8px; background: var(--kroxia-primary); border-radius: 50%; animation: pulse 2s ease infinite; }
@keyframes pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.4);opacity:.7} }
.hero-title {
    font-family: var(--kroxia-font-heading);
    font-size: clamp(2.5rem,4vw,4rem);
    font-weight: 900; line-height: 1.1;
    color: var(--kroxia-text, #1e293b); margin-bottom: 24px;
}
.hero-title-gradient {
    background: linear-gradient(135deg,var(--kroxia-primary),#6c63ff);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; display: inline-block;
}
.hero-subtitle { font-size: 1.1rem; color: var(--kroxia-text-muted,#64748b); line-height: 1.75; margin-bottom: 36px; max-width: 540px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; }
.hero-stats { display: flex; align-items: center; gap: 32px; }
.stat-item { display: flex; flex-direction: column; }
.stat-number { font-family: var(--kroxia-font-heading); font-size: 2rem; font-weight: 800; color: var(--kroxia-text,#1e293b); line-height: 1; }
.stat-suffix { font-size: 1.5rem; font-weight: 800; color: var(--kroxia-primary); }
.stat-label { font-size: 0.78rem; color: var(--kroxia-text-muted,#64748b); font-weight: 500; margin-top: 4px; }
.stat-divider { width: 1px; height: 40px; background: var(--kroxia-border-color,#e2e8f0); }

/* Hero Visual */
.hero-visual { display: flex; justify-content: center; }
.hero-image-wrapper { position: relative; width: 100%; max-width: 500px; }
.hero-image-bg {
    position: absolute; inset: 20px;
    background: linear-gradient(135deg,rgba(249,115,22,.1),rgba(108,99,255,.1));
    border-radius: 30px; filter: blur(30px);
}
.hero-main-image { position: relative; width: 100%; border-radius: 24px; object-fit: cover; z-index: 1; box-shadow: var(--kroxia-shadow-lg); }
.hero-float-card {
    position: absolute;
    background: var(--kroxia-bg-card,#fff);
    border: 1px solid var(--kroxia-border-color,#e2e8f0);
    border-radius: 14px; padding: 12px 16px;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,.1); z-index: 2;
}
.hero-float-1 { bottom: 10%; left: -30px; animation: floatCard 4s ease-in-out infinite; }
.hero-float-2 { top: 15%; right: -20px; animation: floatCard 4s ease-in-out infinite 1s; }
.hero-float-3 { top: 55%; right: -15px; animation: floatCard 4s ease-in-out infinite 2s; }
.float-icon { font-size: 1.5rem; }
.hero-float-card strong { font-size: 0.85rem; font-weight: 700; color: var(--kroxia-text,#1e293b); display: block; }
.hero-float-card span { font-size: 0.75rem; color: var(--kroxia-text-muted,#64748b); }
@keyframes floatCard { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.hero-scroll-indicator { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); }
.scroll-down {
    display: flex; justify-content: center; padding-top: 8px;
    width: 36px; height: 56px; border: 2px solid var(--kroxia-border-color,#e2e8f0);
    border-radius: 20px; transition: var(--kroxia-transition);
}
.scroll-dot { width: 6px; height: 12px; background: var(--kroxia-primary); border-radius: 3px; animation: scrollDot 2s ease infinite; }
@keyframes scrollDot { 0%{transform:translateY(0);opacity:1} 100%{transform:translateY(16px);opacity:0} }

/* ---- BRANDS SECTION ---- */
.brands-section {
    padding: 36px 0;
    border-top: 1px solid var(--kroxia-border-color,#e2e8f0);
    border-bottom: 1px solid var(--kroxia-border-color,#e2e8f0);
    background: var(--kroxia-bg-secondary,#f8fafc); overflow: hidden;
}
.brands-label { text-align: center; font-size: 0.82rem; color: var(--kroxia-text-muted,#64748b); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 20px; }
.brands-track-wrapper { overflow: hidden; position: relative; }
.brands-track-wrapper::before,.brands-track-wrapper::after { content:''; position:absolute; top:0; bottom:0; width:100px; z-index:1; }
.brands-track-wrapper::before { left:0; background:linear-gradient(90deg,var(--kroxia-bg-secondary,#f8fafc),transparent); }
.brands-track-wrapper::after { right:0; background:linear-gradient(-90deg,var(--kroxia-bg-secondary,#f8fafc),transparent); }
.brands-track { display:flex; animation: brandScroll 30s linear infinite; width:max-content; }
@keyframes brandScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.brand-item { padding: 0 40px; display:flex; align-items:center; white-space:nowrap; }
.brand-name { font-family:var(--kroxia-font-heading); font-weight:700; font-size:1rem; color:var(--kroxia-gray-400,#94a3b8); transition:color 0.3s ease; letter-spacing:.02em; }
.brand-item:hover .brand-name { color: var(--kroxia-primary); }

/* ---- SERVICES SECTION ---- */
.services-section { background: var(--kroxia-bg,#fff); }
.services-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:24px; margin-bottom:48px; }
.service-card { transition: transform 0.3s ease; }
.service-card:hover { transform: translateY(-6px); }
.service-card-inner {
    background: var(--kroxia-bg-card,#fff);
    border: 1px solid var(--kroxia-border-color,#e2e8f0);
    border-radius: var(--kroxia-radius-lg); padding: 36px 32px; height: 100%;
    transition: var(--kroxia-transition); position: relative; overflow: hidden;
}
.service-card-inner::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background: linear-gradient(90deg,var(--service-color,var(--kroxia-primary)),transparent);
    transform: scaleX(0); transition: transform 0.3s ease; transform-origin: left;
}
.service-card:hover .service-card-inner::before { transform: scaleX(1); }
.service-card:hover .service-card-inner { border-color: var(--service-color,var(--kroxia-primary)); box-shadow: 0 20px 40px rgba(0,0,0,.08); }
.service-icon {
    width: 64px; height: 64px; border-radius: 16px;
    background: color-mix(in srgb,var(--service-color,var(--kroxia-primary)) 12%,transparent);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 24px; color: var(--service-color,var(--kroxia-primary)); transition: var(--kroxia-transition);
}
.service-card:hover .service-icon { background: var(--service-color,var(--kroxia-primary)); color: #fff; transform: scale(1.1); }
.service-title { font-family:var(--kroxia-font-heading); font-size:1.15rem; font-weight:700; color:var(--kroxia-text,#1e293b); margin-bottom:12px; line-height:1.4; }
.service-desc { font-size:.9rem; color:var(--kroxia-text-muted,#64748b); line-height:1.7; margin-bottom:24px; }
.service-link { display:inline-flex; align-items:center; gap:8px; font-size:.875rem; font-weight:600; color:var(--service-color,var(--kroxia-primary)); transition:var(--kroxia-transition); }
.service-link:hover { gap:12px; }
.services-cta { text-align: center; }

/* ---- ABOUT SECTION ---- */
.about-section { background: var(--kroxia-bg-secondary,#f8fafc); }
.about-layout { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.about-image-group { position: relative; }
.about-img-main { border-radius: var(--kroxia-radius-lg); overflow: hidden; box-shadow: var(--kroxia-shadow-lg); }
.about-img-main img { width:100%; height:500px; object-fit:cover; transition:transform 0.6s ease; }
.about-img-main:hover img { transform: scale(1.03); }
.about-img-secondary { position:absolute; bottom:-30px; right:-30px; width:200px; border-radius:var(--kroxia-radius); overflow:hidden; border:4px solid var(--kroxia-bg,#fff); box-shadow:var(--kroxia-shadow-lg); }
.about-img-secondary img { width:100%; height:200px; object-fit:cover; object-position:top; }
.about-experience-badge {
    position:absolute; top:-20px; left:-20px;
    background: var(--kroxia-primary); color:#fff;
    border-radius:var(--kroxia-radius); padding:20px 24px; text-align:center;
    box-shadow: 0 10px 30px rgba(249,115,22,.4);
}
.exp-number { display:block; font-family:var(--kroxia-font-heading); font-size:2rem; font-weight:800; line-height:1; }
.exp-text { font-size:.75rem; font-weight:500; opacity:.9; }
.about-content .section-title { text-align:left; }
.about-text { color:var(--kroxia-text-muted,#64748b); font-size:1rem; line-height:1.8; margin-bottom:32px; }
.about-features { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:36px; }
.about-feature { display:flex; gap:12px; align-items:flex-start; }
.feature-check { flex-shrink:0; width:28px; height:28px; background:rgba(249,115,22,.1); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--kroxia-primary); margin-top:2px; }
.about-feature strong { display:block; font-size:.9rem; font-weight:600; color:var(--kroxia-text,#1e293b); margin-bottom:2px; }
.about-feature span { font-size:.8rem; color:var(--kroxia-text-muted,#64748b); }
.about-actions { display:flex; gap:16px; flex-wrap:wrap; }

/* ---- STATS SECTION ---- */
.stats-section {
    padding: 80px 0;
    background: linear-gradient(135deg,var(--kroxia-secondary),#0f1e30);
    color:#fff; position:relative; overflow:hidden;
}
.stats-section::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 80% 80% at 50% 50%,rgba(249,115,22,.1),transparent); }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; position:relative; z-index:1; }
.stat-card { text-align:center; padding:32px 20px; border-radius:var(--kroxia-radius); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); transition:var(--kroxia-transition); }
.stat-card:hover { background:rgba(255,255,255,.1); transform:translateY(-4px); }
.stat-card .stat-number { font-size:3rem; color:#fff; }
.stat-card .stat-suffix { font-size:2rem; color:var(--kroxia-primary); }
.stat-card .stat-label { font-size:.9rem; color:rgba(255,255,255,.6); margin-top:8px; }

/* ---- PORTFOLIO SECTION ---- */
.portfolio-section { background: var(--kroxia-bg-secondary,#f8fafc); }
.portfolio-filter { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-bottom:40px; }
.filter-btn { padding:8px 20px; border-radius:50px; border:1.5px solid var(--kroxia-border-color,#e2e8f0); background:transparent; color:var(--kroxia-text-muted,#64748b); font-size:.875rem; font-weight:500; cursor:pointer; transition:var(--kroxia-transition); }
.filter-btn:hover,.filter-btn.active { background:var(--kroxia-primary); border-color:var(--kroxia-primary); color:#fff; }
.portfolio-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:48px; }
.portfolio-card { position:relative; overflow:hidden; border-radius:var(--kroxia-radius-lg); cursor:pointer; }
.portfolio-img-placeholder { display:flex; align-items:center; justify-content:center; min-height:280px; color:var(--kroxia-gray-400,#94a3b8); }
.portfolio-card img.portfolio-img { width:100%; height:280px; object-fit:cover; transition:transform 0.6s ease; }
.portfolio-card:hover img.portfolio-img { transform:scale(1.06); }
.portfolio-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.85),transparent 60%); opacity:0; transition:opacity 0.3s ease; display:flex; align-items:flex-end; padding:28px; }
.portfolio-card:hover .portfolio-overlay { opacity:1; }
.portfolio-info .portfolio-category { display:block; font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:var(--kroxia-primary); font-weight:600; margin-bottom:6px; }
.portfolio-title { font-family:var(--kroxia-font-heading); font-size:1.1rem; font-weight:700; color:#fff; margin-bottom:14px; }
.portfolio-link { display:inline-flex; align-items:center; gap:6px; color:#fff; font-size:.85rem; font-weight:600; border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:2px; transition:gap 0.2s ease; }
.portfolio-link:hover { gap:10px; border-color:#fff; color:#fff; }
.portfolio-cta { text-align:center; }

/* ---- PROCESS SECTION ---- */
.process-section { background: var(--kroxia-bg,#fff); }
.process-timeline { display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative; margin-top:60px; }
.process-timeline::before { content:''; position:absolute; top:40px; left:10%; right:10%; height:2px; background:linear-gradient(90deg,var(--kroxia-primary),var(--kroxia-accent)); z-index:0; }
.process-step { text-align:center; padding:0 16px; position:relative; z-index:1; }
.step-number {
    width:80px; height:80px;
    background: linear-gradient(135deg,var(--kroxia-primary),#ea580c);
    color:#fff; font-family:var(--kroxia-font-heading); font-size:1.25rem; font-weight:800;
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    margin:0 auto 24px; box-shadow:0 8px 24px rgba(249,115,22,.35); transition:transform 0.3s ease;
}
.process-step:hover .step-number { transform:scale(1.1); }
.step-content h3 { font-family:var(--kroxia-font-heading); font-size:1rem; font-weight:700; color:var(--kroxia-text,#1e293b); margin-bottom:8px; }
.step-content p { font-size:.825rem; color:var(--kroxia-text-muted,#64748b); line-height:1.6; }

/* ---- TEAM SECTION ---- */
.team-section { background: var(--kroxia-bg-secondary,#f8fafc); }
.team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.team-card { transition:transform 0.3s ease; }
.team-card:hover { transform:translateY(-6px); }
.team-card-inner { background:var(--kroxia-bg-card,#fff); border:1px solid var(--kroxia-border-color,#e2e8f0); border-radius:var(--kroxia-radius-lg); overflow:hidden; transition:var(--kroxia-transition); }
.team-card:hover .team-card-inner { box-shadow:var(--kroxia-shadow-lg); border-color:rgba(249,115,22,.2); }
.team-image { position:relative; overflow:hidden; aspect-ratio:3/4; }
.team-image img { width:100%; height:100%; object-fit:cover; object-position:top; transition:transform 0.6s ease; }
.team-card:hover .team-image img { transform:scale(1.05); }
.team-social-overlay { position:absolute; inset:0; background:rgba(249,115,22,.85); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.3s ease; }
.team-card:hover .team-social-overlay { opacity:1; }
.team-social-btn { width:44px; height:44px; background:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--kroxia-primary); transition:var(--kroxia-transition); }
.team-social-btn:hover { background:var(--kroxia-primary); color:#fff; transform:scale(1.1); }
.team-info { padding:20px; }
.team-name { font-family:var(--kroxia-font-heading); font-size:1rem; font-weight:700; color:var(--kroxia-text,#1e293b); margin-bottom:4px; }
.team-role { font-size:.825rem; color:var(--kroxia-primary); font-weight:500; }

/* ---- TESTIMONIALS ---- */
.testimonials-section { background: var(--kroxia-bg,#fff); }
.testimonials-slider-wrapper { position:relative; overflow:hidden; }
.testimonials-track { display:flex; gap:24px; transition:transform 0.5s cubic-bezier(0.4,0,0.2,1); }
.testimonial-card { min-width:calc(33.333% - 16px); background:var(--kroxia-bg-card,#fff); border:1px solid var(--kroxia-border-color,#e2e8f0); border-radius:var(--kroxia-radius-lg); padding:36px 32px; transition:var(--kroxia-transition); flex-shrink:0; }
.testimonial-card:hover { box-shadow:var(--kroxia-shadow-lg); border-color:rgba(249,115,22,.2); transform:translateY(-4px); }
.testimonial-stars { display:flex; gap:4px; margin-bottom:20px; }
.testimonial-text { font-size:.95rem; line-height:1.8; color:var(--kroxia-text-muted,#64748b); font-style:italic; margin-bottom:24px; }
.testimonial-author { display:flex; align-items:center; gap:12px; }
.author-avatar { width:44px; height:44px; background:linear-gradient(135deg,var(--kroxia-primary),#ea580c); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.1rem; flex-shrink:0; }
.author-info strong { display:block; font-size:.9rem; font-weight:700; color:var(--kroxia-text,#1e293b); }
.author-info span { font-size:.8rem; color:var(--kroxia-text-muted,#64748b); }
.testimonial-controls { display:flex; align-items:center; justify-content:center; gap:20px; margin-top:36px; }
.testimonial-prev,.testimonial-next { width:44px; height:44px; border-radius:50%; background:var(--kroxia-bg-secondary,#f8fafc); border:1.5px solid var(--kroxia-border-color,#e2e8f0); color:var(--kroxia-text,#1e293b); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:var(--kroxia-transition); }
.testimonial-prev:hover,.testimonial-next:hover { background:var(--kroxia-primary); border-color:var(--kroxia-primary); color:#fff; }
.testimonial-dots { display:flex; gap:8px; }
.testimonial-dot { width:8px; height:8px; border-radius:50%; background:var(--kroxia-gray-300,#cbd5e1); cursor:pointer; transition:var(--kroxia-transition); border:none; padding:0; }
.testimonial-dot.active { width:24px; border-radius:4px; background:var(--kroxia-primary); }

/* ---- PRICING ---- */
.pricing-section { background: var(--kroxia-bg-secondary,#f8fafc); }
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start; }
.pricing-card { background:var(--kroxia-bg-card,#fff); border:1px solid var(--kroxia-border-color,#e2e8f0); border-radius:var(--kroxia-radius-lg); padding:40px 36px; position:relative; transition:var(--kroxia-transition); }
.pricing-card:hover { box-shadow:var(--kroxia-shadow-lg); transform:translateY(-4px); }
.pricing-popular { background:linear-gradient(135deg,var(--kroxia-secondary),#1a2d40); border-color:var(--kroxia-secondary); transform:scale(1.04); }
.pricing-popular:hover { transform:scale(1.04) translateY(-4px); }
.pricing-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--kroxia-primary); color:#fff; font-size:.75rem; font-weight:700; padding:4px 16px; border-radius:50px; white-space:nowrap; }
.pricing-name { font-family:var(--kroxia-font-heading); font-size:1.35rem; font-weight:700; color:var(--kroxia-text,#1e293b); margin-bottom:8px; }
.pricing-popular .pricing-name { color:#fff; }
.pricing-desc { font-size:.875rem; color:var(--kroxia-text-muted,#64748b); margin-bottom:24px; }
.pricing-popular .pricing-desc { color:rgba(255,255,255,.65); }
.pricing-price { display:flex; align-items:baseline; gap:4px; margin-bottom:32px; padding-bottom:32px; border-bottom:1px solid var(--kroxia-border-color,#e2e8f0); }
.pricing-popular .pricing-price { border-color:rgba(255,255,255,.12); }
.price-currency { font-size:1.25rem; font-weight:700; color:var(--kroxia-primary); }
.price-amount { font-family:var(--kroxia-font-heading); font-size:2.8rem; font-weight:800; color:var(--kroxia-text,#1e293b); line-height:1; }
.pricing-popular .price-amount { color:#fff; }
.price-period { font-size:.85rem; color:var(--kroxia-text-muted,#64748b); margin-left:4px; }
.pricing-features { list-style:none; margin:0 0 32px; padding:0; }
.pricing-features li { display:flex; align-items:center; gap:10px; padding:8px 0; font-size:.88rem; color:var(--kroxia-text,#1e293b); border-bottom:1px solid var(--kroxia-border-color,#e2e8f0); }
.pricing-popular .pricing-features li { color:rgba(255,255,255,.8); border-color:rgba(255,255,255,.08); }
.pricing-features li svg { flex-shrink:0; color:var(--kroxia-primary); }
.pricing-cta { width:100%; justify-content:center; }

/* ---- FAQ ---- */
.faq-section { background: var(--kroxia-bg,#fff); }
.faq-layout { display:grid; grid-template-columns:1fr 1.5fr; gap:80px; align-items:start; }
.faq-header .section-title { text-align:left; }
.faq-header p { color:var(--kroxia-text-muted,#64748b); line-height:1.7; }
.faq-item { border:1px solid var(--kroxia-border-color,#e2e8f0); border-radius:var(--kroxia-radius); margin-bottom:12px; overflow:hidden; transition:var(--kroxia-transition); }
.faq-item.active { border-color:rgba(249,115,22,.3); box-shadow:0 4px 20px rgba(249,115,22,.08); }
.faq-question { width:100%; background:none; border:none; padding:20px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; text-align:left; font-size:.95rem; font-weight:600; color:var(--kroxia-text,#1e293b); transition:var(--kroxia-transition); }
.faq-question:hover { color:var(--kroxia-primary); }
.faq-icon { flex-shrink:0; color:var(--kroxia-primary); transition:transform 0.3s ease; }
.faq-item.active .faq-icon { transform:rotate(180deg); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height 0.35s ease,padding 0.3s ease; }
.faq-answer.open { max-height:300px; padding:0 24px 20px; }
.faq-answer p { font-size:.9rem; color:var(--kroxia-text-muted,#64748b); line-height:1.75; }

/* ---- CTA SECTION ---- */
.cta-section {
    background: linear-gradient(135deg,#0f172a 0%,#1e2d3d 50%,#0f172a 100%);
    padding:100px 0; position:relative; overflow:hidden; text-align:center;
}
.cta-bg-effect { position:absolute; inset:0; background:radial-gradient(ellipse 80% 80% at 50% 50%,rgba(249,115,22,.12),transparent 70%); pointer-events:none; }
.cta-content { position:relative; z-index:1; max-width:700px; margin:0 auto; }
.cta-title { font-family:var(--kroxia-font-heading); font-size:clamp(2rem,3vw,3rem); font-weight:800; color:#fff; margin-bottom:20px; line-height:1.2; }
.cta-subtitle { font-size:1.05rem; color:rgba(255,255,255,.7); line-height:1.75; margin-bottom:40px; }
.cta-actions { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ---- FOOTER ---- */
.site-footer { background:var(--kroxia-darker,#0a0f1e); color:rgba(255,255,255,.7); }
.footer-main { padding:80px 0 60px; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:48px; }
.footer-about .footer-logo { display:inline-block; margin-bottom:20px; }
.footer-tagline { font-size:.875rem; line-height:1.75; color:rgba(255,255,255,.55); margin-bottom:28px; max-width:300px; }
.footer-social { display:flex; gap:10px; }
.social-link { width:38px; height:38px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:10px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.6); transition:var(--kroxia-transition); }
.social-link:hover { background:var(--kroxia-primary); border-color:var(--kroxia-primary); color:#fff; transform:translateY(-2px); }
.footer-heading { font-family:var(--kroxia-font-heading); font-size:.95rem; font-weight:700; color:#fff; margin-bottom:20px; text-transform:uppercase; letter-spacing:.05em; }
.footer-links { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.footer-links li a { font-size:.875rem; color:rgba(255,255,255,.55); transition:var(--kroxia-transition); display:flex; align-items:center; }
.footer-links li a::before { content:'→'; margin-right:8px; opacity:0; transition:all 0.2s ease; color:var(--kroxia-primary); }
.footer-links li a:hover { color:var(--kroxia-primary); padding-left:8px; }
.footer-links li a:hover::before { opacity:1; }
.footer-contact-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.footer-contact-list li { display:flex; gap:12px; align-items:flex-start; font-size:.85rem; color:rgba(255,255,255,.55); line-height:1.6; }
.footer-contact-list a { color:rgba(255,255,255,.55); transition:color 0.2s ease; }
.footer-contact-list a:hover { color:var(--kroxia-primary); }
.contact-icon { flex-shrink:0; width:20px; height:20px; color:var(--kroxia-primary); margin-top:2px; display:flex; align-items:center; justify-content:center; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.07); padding:24px 0; }
.footer-bottom-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.footer-copyright { font-size:.85rem; color:rgba(255,255,255,.45); }
.footer-copyright a { color:var(--kroxia-primary); font-weight:600; }
.footer-bottom-links { display:flex; gap:24px; }
.footer-bottom-links a { font-size:.82rem; color:rgba(255,255,255,.45); transition:color 0.2s ease; }
.footer-bottom-links a:hover { color:var(--kroxia-primary); }

/* ---- SCROLL TO TOP ---- */
.scroll-to-top {
    position:fixed; bottom:30px; right:30px;
    width:44px; height:44px; background:var(--kroxia-primary); color:#fff;
    border:none; border-radius:50%; display:flex; align-items:center; justify-content:center;
    cursor:pointer; box-shadow:0 4px 20px rgba(249,115,22,.4); transition:var(--kroxia-transition);
    opacity:0; visibility:hidden; transform:translateY(20px); z-index:999;
}
.scroll-to-top.visible { opacity:1; visibility:visible; transform:translateY(0); }
.scroll-to-top:hover { background:#ea580c; transform:translateY(-3px); }

/* ---- PAGE HERO ---- */
.page-hero {
    padding:130px 0 70px;
    background: linear-gradient(135deg,var(--kroxia-secondary),#0f1e30);
    position:relative; overflow:hidden;
}
.page-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 80% 80% at 30% 50%,rgba(249,115,22,.12),transparent); }
.page-hero-content { position:relative; z-index:1; }
.page-title { font-family:var(--kroxia-font-heading); font-size:clamp(2rem,4vw,3rem); font-weight:800; color:#fff; margin-bottom:16px; }
.breadcrumbs { font-size:.875rem; color:rgba(255,255,255,.6); }
.breadcrumbs a { color:rgba(255,255,255,.7); transition:color 0.2s ease; }
.breadcrumbs a:hover { color:var(--kroxia-primary); }
.breadcrumbs .sep { margin:0 8px; }

/* ---- SINGLE POST ---- */
.site-main { padding-top: 80px; }
.single-post-layout { display:grid; grid-template-columns:1fr 340px; gap:60px; padding:60px 0; }
.single-post-thumbnail { border-radius:var(--kroxia-radius-lg); overflow:hidden; margin-bottom:40px; }
.single-post-thumbnail img { width:100%; height:480px; object-fit:cover; }
.post-body { font-size:1.05rem; line-height:1.85; color:var(--kroxia-text,#1e293b); }
.post-body h2,.post-body h3 { font-family:var(--kroxia-font-heading); font-weight:700; color:var(--kroxia-text,#1e293b); margin:36px 0 16px; }
.post-body p { margin-bottom:20px; color:var(--kroxia-text-muted,#64748b); }
.post-meta { display:flex; flex-wrap:wrap; gap:20px; margin-top:12px; }
.post-meta span { display:flex; align-items:center; gap:6px; font-size:.85rem; color:rgba(255,255,255,.65); }
.post-category-tag { display:inline-block; padding:4px 14px; background:rgba(249,115,22,.2); color:#ffa86a; border-radius:50px; font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-bottom:12px; }
.post-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:40px; }
.post-tag { padding:5px 14px; background:rgba(249,115,22,.08); color:var(--kroxia-primary); border-radius:50px; font-size:.8rem; font-weight:500; transition:var(--kroxia-transition); }
.post-tag:hover { background:var(--kroxia-primary); color:#fff; }
.post-navigation { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding-top:40px; border-top:1px solid var(--kroxia-border-color,#e2e8f0); }
.post-navigation .nav-label { display:block; font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:var(--kroxia-text-muted,#64748b); margin-bottom:6px; }
.post-navigation .nav-title { font-weight:600; color:var(--kroxia-text,#1e293b); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ---- POST CARD ---- */
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; padding:60px 0; }
.post-card { background:var(--kroxia-bg-card,#fff); border:1px solid var(--kroxia-border-color,#e2e8f0); border-radius:var(--kroxia-radius-lg); overflow:hidden; transition:var(--kroxia-transition); }
.post-card:hover { box-shadow:var(--kroxia-shadow-lg); transform:translateY(-4px); border-color:rgba(249,115,22,.2); }
.post-card-link { display:block; overflow:hidden; }
.post-card-image { position:relative; overflow:hidden; aspect-ratio:16/9; }
.post-card-image img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
.post-card:hover .post-card-image img { transform:scale(1.05); }
.post-card-placeholder { display:flex; align-items:center; justify-content:center; height:220px; background:linear-gradient(135deg,rgba(249,115,22,.06),rgba(108,99,255,.06)); }
.post-card-category { position:absolute; top:16px; left:16px; background:var(--kroxia-primary); color:#fff; padding:4px 12px; border-radius:50px; font-size:.75rem; font-weight:600; }
.post-card-body { padding:24px; }
.post-card-meta { display:flex; gap:16px; margin-bottom:12px; }
.post-card-meta span { display:flex; align-items:center; gap:5px; font-size:.78rem; color:var(--kroxia-text-muted,#64748b); }
.post-card-title { font-family:var(--kroxia-font-heading); font-size:1.1rem; font-weight:700; margin-bottom:12px; line-height:1.4; }
.post-card-title a { color:var(--kroxia-text,#1e293b); transition:color 0.2s ease; }
.post-card-title a:hover { color:var(--kroxia-primary); }
.post-card-excerpt { font-size:.875rem; color:var(--kroxia-text-muted,#64748b); line-height:1.7; margin-bottom:20px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.post-card-read-more { display:inline-flex; align-items:center; gap:6px; font-size:.875rem; font-weight:600; color:var(--kroxia-primary); transition:var(--kroxia-transition); }
.post-card-read-more:hover { gap:10px; color:var(--kroxia-primary); }

/* ---- COMMENTS ---- */
.comments-section { padding:48px 0; border-top:2px solid var(--kroxia-border-color,#e2e8f0); margin-top:40px; }
.comments-title { font-family:var(--kroxia-font-heading); font-size:1.5rem; font-weight:700; color:var(--kroxia-text,#1e293b); margin-bottom:32px; }
.comment-list { list-style:none; padding:0; margin:0 0 40px; }
.comment-list .comment { padding:24px 0; border-bottom:1px solid var(--kroxia-border-color,#e2e8f0); }
.comment-list .comment-author { font-weight:700; color:var(--kroxia-text,#1e293b); }
.comment-list .comment-meta { font-size:.8rem; color:var(--kroxia-text-muted,#64748b); margin-bottom:12px; }
.comment-form input,.comment-form textarea { width:100%; padding:12px 16px; border:1.5px solid var(--kroxia-border-color,#e2e8f0); border-radius:10px; margin-bottom:16px; font-size:.9rem; outline:none; background:var(--kroxia-bg,#fff); color:var(--kroxia-text,#1e293b); transition:border-color .2s ease; }
.comment-form input:focus,.comment-form textarea:focus { border-color:var(--kroxia-primary); }
.comment-form textarea { height:140px; resize:vertical; }
.comment-form .btn-primary,.comment-form input[type="submit"] { background:linear-gradient(135deg,var(--kroxia-primary),#ea580c); color:#fff; padding:12px 28px; border-radius:50px; border:none; font-weight:600; cursor:pointer; transition:var(--kroxia-transition); }
.comment-form .btn-primary:hover,.comment-form input[type="submit"]:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(249,115,22,.4); }

/* ---- SIDEBAR ---- */
.single-post-sidebar .widget { background:var(--kroxia-bg-card,#fff); border:1px solid var(--kroxia-border-color,#e2e8f0); border-radius:var(--kroxia-radius-lg); padding:28px; margin-bottom:24px; }
.single-post-sidebar .widget-title { font-family:var(--kroxia-font-heading); font-size:1rem; font-weight:700; color:var(--kroxia-text,#1e293b); margin-bottom:16px; padding-bottom:12px; border-bottom:2px solid var(--kroxia-primary); }
.single-post-sidebar .widget ul { list-style:none; padding:0; margin:0; }
.single-post-sidebar .widget ul li { padding:8px 0; border-bottom:1px solid var(--kroxia-border-color,#e2e8f0); font-size:.875rem; }
.single-post-sidebar .widget ul li a { color:var(--kroxia-text,#1e293b); transition:color .2s ease; }
.single-post-sidebar .widget ul li a:hover { color:var(--kroxia-primary); }

/* ---- ANIMATIONS ---- */
[data-animate] { opacity:0; transform:translateY(30px); transition:opacity 0.6s ease,transform 0.6s ease; }
[data-animate="fadeInLeft"] { transform:translateX(-30px); }
[data-animate="fadeInRight"] { transform:translateX(30px); }
[data-animate].animated { opacity:1; transform:translate(0,0); }

/* ---- NO RESULTS ---- */
.no-results { text-align:center; padding:80px 0; }

/* =============================================
   ANNOUNCEMENT BAR
   ============================================= */
.announcement-bar {
    background: linear-gradient(90deg, var(--kroxia-secondary,#1e2d3d), #0f172a, var(--kroxia-secondary,#1e2d3d));
    color: rgba(255,255,255,.9);
    padding: 10px 0;
    text-align: center;
    font-size: .85rem;
    position: relative;
    z-index: 9999;
    transition: height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
}
.announcement-bar.hidden { height: 0; padding: 0; opacity: 0; pointer-events: none; }
.announcement-inner {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    position: relative;
}
.announcement-icon { font-size: 1rem; flex-shrink: 0; }
.announcement-text { margin: 0; color: rgba(255,255,255,.9); font-size: .85rem; }
.announcement-cta {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--kroxia-primary, #f97316);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .2s ease;
    margin-left: 8px;
}
.announcement-cta:hover { color: #fbbf24; }
.announcement-close {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: rgba(255,255,255,.6);
    cursor: pointer; padding: 4px; display: flex; align-items: center;
    border-radius: 6px; transition: color .2s ease, background .2s ease;
}
.announcement-close:hover { color: #fff; background: rgba(255,255,255,.1); }

/* =============================================
   SCROLL PROGRESS BAR
   ============================================= */
.scroll-progress-bar {
    position: fixed; top: 0; left: 0; height: 3px; width: 0%;
    background: linear-gradient(90deg, var(--kroxia-primary,#f97316), var(--kroxia-accent,#6c63ff));
    z-index: 10001; transition: width .1s linear;
    box-shadow: 0 0 6px rgba(249,115,22,.5);
}

/* =============================================
   PAGE LOADER
   ============================================= */
.kroxia-loader {
    position: fixed; inset: 0; background: var(--kroxia-darker, #0a0f1e);
    display: flex; align-items: center; justify-content: center;
    z-index: 99999; transition: opacity .5s ease, visibility .5s ease;
}
.kroxia-loader.loaded { opacity: 0; visibility: hidden; }
.loader-inner { text-align: center; }
.loader-logo { margin-bottom: 24px; opacity: .8; }
.loader-logo img { max-width: 140px; }
.loader-progress { width: 200px; height: 3px; background: rgba(255,255,255,.1); border-radius: 4px; overflow: hidden; margin: 0 auto; }
.loader-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--kroxia-primary,#f97316), var(--kroxia-accent,#6c63ff)); border-radius: 4px; animation: loaderFill 1.2s ease forwards; }
@keyframes loaderFill { to { width: 100%; } }

/* =============================================
   THEME SWITCHER
   ============================================= */
.theme-switcher {
    display: flex; align-items: center; gap: 2px;
    background: var(--kroxia-bg-secondary, #f8fafc);
    border: 1px solid var(--kroxia-border-color, #e2e8f0);
    border-radius: 50px; padding: 3px;
}
.theme-btn {
    width: 32px; height: 32px; border-radius: 50%; border: none;
    display: flex; align-items: center; justify-content: center;
    background: transparent; color: var(--kroxia-text-muted, #64748b);
    cursor: pointer; transition: var(--kroxia-transition);
}
.theme-btn.active { background: var(--kroxia-primary); color: #fff; box-shadow: 0 2px 8px rgba(249,115,22,.35); }
.theme-btn:hover:not(.active) { background: var(--kroxia-border-color, #e2e8f0); color: var(--kroxia-text, #1e293b); }

/* =============================================
   FLOATING BUTTONS
   ============================================= */
.floating-whatsapp,
.floating-contact {
    position: fixed; right: 24px; width: 52px; height: 52px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #fff; text-decoration: none; z-index: 998;
    transition: transform .3s ease, box-shadow .3s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,.2);
}
.floating-whatsapp {
    bottom: 120px;
    background: #25d366;
    box-shadow: 0 4px 20px rgba(37,211,102,.35);
}
.floating-contact {
    bottom: 182px;
    background: var(--kroxia-primary, #f97316);
    box-shadow: 0 4px 20px rgba(249,115,22,.35);
}
.floating-whatsapp:hover { transform: scale(1.12) translateY(-3px); box-shadow: 0 8px 30px rgba(37,211,102,.5); color: #fff; }
.floating-contact:hover { transform: scale(1.12) translateY(-3px); box-shadow: 0 8px 30px rgba(249,115,22,.5); color: #fff; }

.floating-btn-tooltip {
    position: absolute; right: 62px; top: 50%; transform: translateY(-50%);
    background: #111827; color: #fff; font-size: .78rem; font-weight: 600;
    padding: 6px 12px; border-radius: 8px; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.floating-btn-tooltip::after {
    content: ''; position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
    border: 6px solid transparent; border-left-color: #111827;
}
.floating-whatsapp:hover .floating-btn-tooltip,
.floating-contact:hover .floating-btn-tooltip { opacity: 1; }

/* =============================================
   MOBILE STICKY CTA
   ============================================= */
.mobile-sticky-cta {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 997; padding: 12px 16px;
    background: var(--kroxia-bg-card, #fff);
    border-top: 1px solid var(--kroxia-border-color, #e2e8f0);
    gap: 10px; align-items: center;
    box-shadow: 0 -4px 20px rgba(0,0,0,.08);
}
.mobile-sticky-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--kroxia-primary,#f97316), #ea580c);
    color: #fff; font-size: .9rem; font-weight: 700;
    border-radius: 50px; text-decoration: none;
    transition: var(--kroxia-transition);
}
.mobile-sticky-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(249,115,22,.4); color: #fff; }
.mobile-sticky-call {
    width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
    background: var(--kroxia-bg-secondary, #f8fafc);
    border: 1.5px solid var(--kroxia-border-color, #e2e8f0);
    border-radius: 50%; color: var(--kroxia-text, #1e293b); text-decoration: none;
    flex-shrink: 0; transition: var(--kroxia-transition);
}
.mobile-sticky-call:hover { background: var(--kroxia-primary); border-color: var(--kroxia-primary); color: #fff; }
@media (max-width: 768px) {
    .mobile-sticky-cta { display: flex; }
    .floating-whatsapp { bottom: 80px; }
    .floating-contact { bottom: 142px; }
    .scroll-to-top { bottom: 70px; }
}

/* =============================================
   NEWSLETTER SECTION
   ============================================= */
.newsletter-section {
    background: linear-gradient(135deg, var(--kroxia-secondary,#1e2d3d) 0%, #0f1e30 100%);
    padding: 60px 0;
    position: relative; overflow: hidden;
}
.newsletter-section::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(249,115,22,.08), transparent);
    pointer-events: none;
}
.newsletter-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 40px; flex-wrap: wrap; position: relative; z-index: 1;
}
.newsletter-content { display: flex; align-items: center; gap: 20px; }
.newsletter-icon { font-size: 2.5rem; flex-shrink: 0; }
.newsletter-title { font-family: var(--kroxia-font-heading); font-size: 1.35rem; font-weight: 700; color: #fff; margin-bottom: 6px; }
.newsletter-subtitle { font-size: .875rem; color: rgba(255,255,255,.6); max-width: 360px; }
.newsletter-form { flex-shrink: 0; min-width: 380px; }
.newsletter-input-group { display: flex; gap: 0; border-radius: 50px; overflow: hidden; background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.12); }
.newsletter-input {
    flex: 1; background: transparent; border: none; outline: none;
    padding: 14px 20px; color: #fff; font-size: .9rem;
    min-width: 0;
}
.newsletter-input::placeholder { color: rgba(255,255,255,.4); }
.newsletter-btn {
    display: flex; align-items: center; gap: 8px; white-space: nowrap;
    padding: 14px 24px; background: var(--kroxia-primary,#f97316);
    color: #fff; border: none; font-size: .875rem; font-weight: 700;
    cursor: pointer; transition: background .2s ease; border-radius: 0 50px 50px 0;
}
.newsletter-btn:hover { background: #ea580c; }
.newsletter-privacy { font-size: .75rem; color: rgba(255,255,255,.4); margin: 10px 0 0; text-align: center; }
@media (max-width: 768px) {
    .newsletter-inner { flex-direction: column; text-align: center; }
    .newsletter-content { flex-direction: column; align-items: center; }
    .newsletter-form { min-width: 0; width: 100%; }
}

/* =============================================
   LEGAL CONTENT (Privacy / Terms)
   ============================================= */
.legal-content h2 {
    font-family: var(--kroxia-font-heading); font-size: 1.25rem; font-weight: 700;
    color: var(--kroxia-text, #1e293b); margin-bottom: 12px;
}
.legal-section {
    margin-bottom: 40px; padding-bottom: 40px;
    border-bottom: 1px solid var(--kroxia-border-color, #e2e8f0);
}
.legal-section:last-child { border-bottom: none; }
.legal-section p { font-size: .95rem; color: var(--kroxia-text-muted, #64748b); line-height: 1.8; margin-bottom: 12px; }
.legal-section ul { padding-left: 20px; margin: 12px 0; }
.legal-section ul li { font-size: .95rem; color: var(--kroxia-text-muted, #64748b); line-height: 1.8; margin-bottom: 6px; }
.legal-section a { color: var(--kroxia-primary); }

/* =============================================
   CAREERS / JOB LISTINGS
   ============================================= */
.careers-list { display: flex; flex-direction: column; gap: 16px; }
.career-card {
    display: flex; align-items: center; gap: 24px;
    background: var(--kroxia-bg-card, #fff);
    border: 1px solid var(--kroxia-border-color, #e2e8f0);
    border-radius: var(--kroxia-radius-lg); padding: 28px 32px;
    transition: var(--kroxia-transition);
}
.career-card:hover { border-color: rgba(249,115,22,.25); box-shadow: var(--kroxia-shadow-lg); }
.career-card-content { flex: 1; }
.career-header { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.career-title { font-family: var(--kroxia-font-heading); font-size: 1.1rem; font-weight: 700; color: var(--kroxia-text, #1e293b); }
.career-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.career-badge {
    padding: 3px 10px; border-radius: 50px; font-size: .75rem; font-weight: 600;
    display: flex; align-items: center; gap: 4px;
}
.career-dept { background: rgba(108,99,255,.1); color: var(--kroxia-accent,#6c63ff); }
.career-type { background: rgba(16,185,129,.1); color: #059669; }
.career-loc { background: rgba(249,115,22,.1); color: var(--kroxia-primary); }
.career-desc { font-size: .875rem; color: var(--kroxia-text-muted, #64748b); line-height: 1.7; }
.career-action { flex-shrink: 0; }
@media (max-width: 768px) {
    .career-card { flex-direction: column; align-items: stretch; }
    .career-action { text-align: left; }
}

/* =============================================
   COMPARISON TABLE
   ============================================= */
.comparison-table-wrapper { overflow-x: auto; border-radius: var(--kroxia-radius-lg); border: 1px solid var(--kroxia-border-color, #e2e8f0); }
.comparison-table { width: 100%; border-collapse: collapse; }
.comparison-table thead tr { background: var(--kroxia-bg-secondary, #f8fafc); }
.comparison-table th {
    padding: 16px 20px; text-align: center; font-family: var(--kroxia-font-heading);
    font-size: .875rem; font-weight: 700; color: var(--kroxia-text, #1e293b);
    border-bottom: 2px solid var(--kroxia-border-color, #e2e8f0);
}
.comparison-table th:first-child { text-align: left; }
.comparison-table td {
    padding: 14px 20px; text-align: center; font-size: .875rem;
    color: var(--kroxia-text-muted, #64748b);
    border-bottom: 1px solid var(--kroxia-border-color, #e2e8f0);
}
.comparison-table td:first-child { text-align: left; font-weight: 500; color: var(--kroxia-text, #1e293b); }
.comparison-table tr:last-child td { border-bottom: none; }
.comparison-table tr:hover td { background: rgba(249,115,22,.02); }
.comparison-table .table-popular { background: rgba(249,115,22,.04); border-left: 2px solid var(--kroxia-primary); border-right: 2px solid var(--kroxia-primary); }
.comparison-table thead .table-popular { border-top: 2px solid var(--kroxia-primary); background: rgba(249,115,22,.08); color: var(--kroxia-primary); }

/* =============================================
   ADD-ONS GRID
   ============================================= */
.addons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.addon-card {
    background: var(--kroxia-bg-card, #fff);
    border: 1px solid var(--kroxia-border-color, #e2e8f0);
    border-radius: var(--kroxia-radius-lg); padding: 28px 24px;
    text-align: center; transition: var(--kroxia-transition);
}
.addon-card:hover { border-color: rgba(249,115,22,.25); box-shadow: var(--kroxia-shadow-md); transform: translateY(-4px); }
.addon-icon { font-size: 2rem; display: block; margin-bottom: 12px; }
.addon-title { font-family: var(--kroxia-font-heading); font-size: 1rem; font-weight: 700; color: var(--kroxia-text, #1e293b); margin-bottom: 6px; }
.addon-price { font-family: var(--kroxia-font-heading); font-size: 1.15rem; font-weight: 800; color: var(--kroxia-primary); margin-bottom: 10px; }
.addon-desc { font-size: .825rem; color: var(--kroxia-text-muted, #64748b); line-height: 1.65; }
@media (max-width: 768px) { .addons-grid { grid-template-columns: 1fr; } }
@media (max-width: 1024px) { .addons-grid { grid-template-columns: repeat(2, 1fr); } }

/* =============================================
   FAQ SEARCH & CATEGORY NAV
   ============================================= */
.faq-search-wrapper { position: relative; }
.faq-search-input {
    width: 100%; padding: 14px 20px 14px 48px;
    border: 1.5px solid var(--kroxia-border-color, #e2e8f0);
    border-radius: 50px; font-size: .95rem; outline: none;
    background: var(--kroxia-bg-card, #fff); color: var(--kroxia-text, #1e293b);
    transition: border-color .2s ease;
}
.faq-search-input:focus { border-color: var(--kroxia-primary); }
.faq-search-icon {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    color: var(--kroxia-text-muted, #64748b); pointer-events: none;
}
.faq-categories-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.faq-cat-btn {
    padding: 8px 20px; border-radius: 50px; border: 1.5px solid var(--kroxia-border-color, #e2e8f0);
    background: transparent; font-size: .875rem; font-weight: 500;
    color: var(--kroxia-text-muted, #64748b); cursor: pointer; transition: var(--kroxia-transition);
}
.faq-cat-btn:hover { border-color: var(--kroxia-primary); color: var(--kroxia-primary); }
.faq-cat-btn.active { background: var(--kroxia-primary); border-color: var(--kroxia-primary); color: #fff; }
.faq-filterable.hidden { display: none; }

/* =============================================
   PRICING EXCLUDED FEATURE
   ============================================= */
.pricing-excluded { opacity: .45; }
.pricing-excluded svg { color: var(--kroxia-text-muted, #64748b) !important; }

/* =============================================
   FOOTER AWARDS & TRUST BADGES
   ============================================= */
.footer-awards { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.footer-award-badge {
    padding: 5px 12px; background: rgba(249,115,22,.12);
    border: 1px solid rgba(249,115,22,.2);
    border-radius: 50px; font-size: .75rem; font-weight: 600;
    color: #ffa86a;
}
.footer-trust-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.trust-badge {
    display: flex; align-items: center; gap: 6px;
    font-size: .75rem; color: rgba(255,255,255,.4);
}
.trust-badge svg { color: rgba(255,255,255,.25); }

/* =============================================
   OFFCANVAS CONTACT INFO
   ============================================= */
.offcanvas-contact-info { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(0,0,0,.08); display: flex; flex-direction: column; gap: 10px; }
.offcanvas-contact-link {
    display: flex; align-items: center; gap: 10px; font-size: .875rem;
    color: var(--kroxia-text-muted, #64748b); transition: color .2s ease;
}
.offcanvas-contact-link:hover { color: var(--kroxia-primary); }

/* =============================================
   MINI CART DROPDOWN
   ============================================= */
.header-cart { position: relative; }
.mini-cart-dropdown {
    position: absolute; top: calc(100% + 12px); right: 0; width: 340px;
    background: var(--kroxia-bg-card, #fff);
    border: 1px solid var(--kroxia-border-color, #e2e8f0);
    border-radius: var(--kroxia-radius-lg);
    box-shadow: var(--kroxia-shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: all .25s ease; z-index: 200;
}
.header-cart:hover .mini-cart-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.mini-cart-inner { max-height: 400px; overflow-y: auto; padding: 16px; }

/* =============================================
   CASE STUDY / PORTFOLIO CARD ENHANCEMENTS
   ============================================= */
.portfolio-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }

/* =============================================
   SERVICE PAGE HERO
   ============================================= */
.service-page-hero .btn-white-outline {
    border-color: rgba(255,255,255,.3);
    color: rgba(255,255,255,.9);
}
.service-page-hero .btn-white-outline:hover {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.5);
    color: #fff;
}

/* =============================================
   ADDITIONAL BUTTON VARIANTS
   ============================================= */
.btn-white {
    background: #fff !important;
    color: var(--kroxia-primary) !important;
}
.btn-white:hover {
    background: #f8fafc !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.15) !important;
    transform: translateY(-2px);
}
.btn-white-outline {
    border-color: rgba(255,255,255,.4) !important;
    color: rgba(255,255,255,.9) !important;
}
.btn-white-outline:hover {
    background: rgba(255,255,255,.1) !important;
    border-color: rgba(255,255,255,.6) !important;
    color: #fff !important;
}

/* =============================================
   FOOTER SOCIAL LINKS
   ============================================= */
.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}
.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    color: rgba(255,255,255,.65);
    transition: var(--kroxia-transition);
    text-decoration: none;
}
.social-link:hover {
    background: var(--kroxia-primary);
    border-color: var(--kroxia-primary);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(249,115,22,.35);
}

/* ---- FOOTER MAIN LAYOUT ---- */
.footer-main { padding: 72px 0 56px; }
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.4fr;
    gap: 48px;
}
.footer-heading {
    font-family: var(--kroxia-font-heading);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    margin-bottom: 16px;
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links li a {
    font-size: .875rem;
    color: rgba(255,255,255,.55);
    transition: color .2s ease;
    text-decoration: none;
}
.footer-links li a:hover { color: var(--kroxia-primary); }
.footer-contact-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.footer-contact-list li { display: flex; align-items: flex-start; gap: 10px; font-size: .85rem; color: rgba(255,255,255,.55); }
.footer-contact-list li a { color: rgba(255,255,255,.55); transition: color .2s ease; text-decoration: none; }
.footer-contact-list li a:hover { color: var(--kroxia-primary); }

/* ---- WOOCOMMERCE BASIC ---- */
.woocommerce-main { padding:80px 0 60px; }

/* ---- RESPONSIVE ---- */
@media (max-width:1200px) {
    .services-grid { grid-template-columns:repeat(2,1fr); }
    .team-grid { grid-template-columns:repeat(2,1fr); }
    .pricing-grid { grid-template-columns:1fr; max-width:480px; margin:0 auto; }
    .pricing-popular { transform:scale(1); }
    .pricing-popular:hover { transform:translateY(-4px); }
    .process-timeline { grid-template-columns:repeat(3,1fr); }
    .process-timeline::before { display:none; }
    .portfolio-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:1024px) {
    /* Switch to off-canvas menu on tablets */
    .main-navigation { display:none !important; }
    .mobile-menu-toggle { display:flex !important; }
    .header-cta-btn { display:none !important; }
    /* Layout adjustments */
    .hero-layout { grid-template-columns:1fr; text-align:center; }
    .hero-visual { display:none; }
    .hero-actions { justify-content:center; }
    .hero-stats { justify-content:center; }
    .about-layout { grid-template-columns:1fr; gap:40px; }
    .about-img-secondary { display:none; }
    .about-experience-badge { top:20px; left:20px; }
    .faq-layout { grid-template-columns:1fr; gap:40px; }
    .footer-grid { grid-template-columns:1fr 1fr; gap:36px; }
    .single-post-layout { grid-template-columns:1fr; }
}
@media (max-width:768px) {
    .header-layout { gap:12px; }
    .services-grid { grid-template-columns:1fr; }
    .team-grid { grid-template-columns:repeat(2,1fr); }
    .process-timeline { grid-template-columns:1fr; }
    .stats-grid { grid-template-columns:repeat(2,1fr); }
    .portfolio-grid { grid-template-columns:1fr; }
    .testimonial-card { min-width:calc(100% - 0px); }
    .blog-grid { grid-template-columns:1fr; }
    .footer-grid { grid-template-columns:1fr; }
    .footer-bottom-inner { flex-direction:column; text-align:center; }
    .hero-stats { flex-direction:column; gap:20px; }
    .stat-divider { display:none; }
    .section-padding { padding:60px 0; }
    .pricing-grid { padding:0 16px; }
    /* Compact header on mobile */
    .header-inner { padding:0; }
    .theme-switcher { display:none; }
}
@media (max-width:480px) {
    .container { padding:0 16px; }
    .team-grid { grid-template-columns:1fr; }
    .hero-title { font-size:2rem; }
    .hero-actions { flex-direction:column; }
    .hero-actions .btn-primary,.hero-actions .btn-outline { width:100%; justify-content:center; }
    .cta-actions { flex-direction:column; }
    .cta-actions .btn-primary,.cta-actions .btn-outline { width:100%; justify-content:center; }
    .about-features { grid-template-columns:1fr; }
    .footer-bottom-links { flex-direction:column; gap:12px; }
}

/* =============================================
   KROXIA v3.0.0 — NEW COMPONENT STYLES
   ============================================= */

/* ---- BREADCRUMBS ---- */
.breadcrumbs-bar { background: #f8f9fa; border-bottom: 1px solid #e9ecef; padding: 10px 0; }
[data-theme="dark"] .breadcrumbs-bar { background: rgba(255,255,255,0.04); border-bottom-color: rgba(255,255,255,0.08); }
.kroxia-breadcrumbs { font-size: 13px; }
.breadcrumb-list { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; gap: 4px; flex-wrap: wrap; }
.breadcrumb-item { display: flex; align-items: center; gap: 4px; color: #6b7280; }
.breadcrumb-item a { color: #6b7280; text-decoration: none; transition: color 0.2s; }
.breadcrumb-item a:hover { color: var(--color-primary, #f97316); }
.breadcrumb-item.current { color: var(--color-secondary, #1e2d3d); font-weight: 500; }
[data-theme="dark"] .breadcrumb-item.current { color: #fff; }
.breadcrumb-sep { color: #d1d5db; display: flex; align-items: center; }

/* ---- SINGLE POST — PREMIUM LAYOUT ---- */
.single-post-main { background: #fff; }
[data-theme="dark"] .single-post-main { background: #0f1923; }

.post-hero { background: var(--color-secondary, #1e2d3d); color: #fff; padding: 60px 0 48px; }
.post-hero-inner { max-width: 820px; }
.post-categories-tags { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.post-cat-badge { display: inline-block; background: rgba(249,115,22,0.2); color: #fb923c; border: 1px solid rgba(249,115,22,0.3); border-radius: 50px; padding: 4px 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; text-decoration: none; transition: all 0.2s; }
.post-cat-badge:hover { background: var(--color-primary, #f97316); color: #fff; border-color: transparent; }
.post-title { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; line-height: 1.2; margin-bottom: 16px; }
.post-excerpt { font-size: 1.1rem; color: rgba(255,255,255,0.75); line-height: 1.7; margin-bottom: 24px; }
.post-meta-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.post-author-mini { display: flex; align-items: center; gap: 10px; }
.author-avatar-mini { border-radius: 50%; border: 2px solid rgba(249,115,22,0.5); }
.author-mini-info { display: flex; flex-direction: column; }
.author-name-link { color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; }
.author-name-link:hover { color: var(--color-primary, #f97316); }
.author-meta-role { font-size: 11px; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.5px; }
.post-meta-divider { width: 1px; height: 28px; background: rgba(255,255,255,0.2); }
.post-meta-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,0.6); }

.post-hero-image { margin: -24px 0 0; padding-bottom: 0; }
.post-featured-img { width: 100%; border-radius: 16px 16px 0 0; max-height: 520px; object-fit: cover; display: block; }

/* 3-col single post grid */
.single-post-grid { display: grid; grid-template-columns: 240px 1fr 280px; gap: 40px; padding: 48px 0; align-items: start; }
@media (max-width: 1100px) { .single-post-grid { grid-template-columns: 1fr 280px; } .post-sidebar-left { display: none; } }
@media (max-width: 768px) { .single-post-grid { grid-template-columns: 1fr; } .post-sidebar-right { display: none; } }

/* ---- TABLE OF CONTENTS ---- */
.post-toc { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px 20px; position: sticky; top: 90px; margin-bottom: 24px; }
[data-theme="dark"] .post-toc { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
.toc-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.toc-header strong { font-size: 13px; font-weight: 700; color: var(--color-secondary, #1e2d3d); flex: 1; }
[data-theme="dark"] .toc-header strong { color: #fff; }
.toc-toggle { background: none; border: none; cursor: pointer; color: #6b7280; padding: 2px; transition: transform 0.2s; }
.toc-nav.toc-collapsed { display: none; }
.toc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.toc-list .toc-item a { display: block; font-size: 13px; color: #6b7280; text-decoration: none; padding: 4px 8px; border-radius: 6px; transition: all 0.2s; line-height: 1.5; }
.toc-list .toc-item a:hover, .toc-list .toc-item a.active { color: var(--color-primary, #f97316); background: rgba(249,115,22,0.08); }
.toc-list .toc-h3 { padding-left: 12px; }
.toc-list .toc-h3 a { font-size: 12px; }

/* ---- SHARE SIDEBAR ---- */
.post-share-sidebar { position: sticky; top: 340px; }
.share-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #9ca3af; margin-bottom: 12px; text-align: center; }
.share-btns-vertical { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.share-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid #e5e7eb; background: #fff; color: #6b7280; cursor: pointer; transition: all 0.2s; text-decoration: none; }
[data-theme="dark"] .share-btn { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.6); }
.share-btn:hover { transform: scale(1.1); }
.share-twitter:hover { background: #1da1f2; border-color: #1da1f2; color: #fff; }
.share-linkedin:hover { background: #0a66c2; border-color: #0a66c2; color: #fff; }
.share-facebook:hover { background: #1877f2; border-color: #1877f2; color: #fff; }
.share-copy:hover { background: var(--color-primary, #f97316); border-color: var(--color-primary, #f97316); color: #fff; }
.share-copy.copied { background: #22c55e; border-color: #22c55e; color: #fff; }

/* ---- POST ARTICLE BODY ---- */
.single-post-article { min-width: 0; }
.post-content-body { font-size: 1.05rem; line-height: 1.8; color: #374151; }
[data-theme="dark"] .post-content-body { color: rgba(255,255,255,0.8); }
.post-content-body h2, .post-content-body h3 { margin-top: 2.5em; margin-bottom: 0.8em; color: var(--color-secondary, #1e2d3d); }
[data-theme="dark"] .post-content-body h2, [data-theme="dark"] .post-content-body h3 { color: #fff; }
.post-content-body p { margin-bottom: 1.4em; }
.post-content-body img { border-radius: 12px; max-width: 100%; height: auto; }
.post-content-body blockquote { border-left: 4px solid var(--color-primary, #f97316); margin: 2em 0; padding: 20px 24px; background: rgba(249,115,22,0.05); border-radius: 0 12px 12px 0; font-style: italic; color: #4b5563; }
[data-theme="dark"] .post-content-body blockquote { background: rgba(249,115,22,0.08); color: rgba(255,255,255,0.7); }
.post-content-body pre { background: #1e2d3d; color: #e5e7eb; border-radius: 10px; padding: 20px 24px; overflow-x: auto; font-size: 0.9rem; line-height: 1.6; margin: 1.5em 0; }
.post-content-body code { background: rgba(249,115,22,0.1); color: var(--color-primary, #f97316); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }
.post-content-body pre code { background: none; color: inherit; padding: 0; }
.post-content-body ul, .post-content-body ol { padding-left: 1.5em; margin-bottom: 1.4em; }
.post-content-body li { margin-bottom: 0.5em; }
.post-content-body a { color: var(--color-primary, #f97316); text-decoration: underline; text-underline-offset: 2px; }

/* ---- POST FOOTER ---- */
.post-content-footer { border-top: 1px solid #e5e7eb; padding-top: 28px; margin-top: 40px; display: flex; flex-direction: column; gap: 20px; }
[data-theme="dark"] .post-content-footer { border-top-color: rgba(255,255,255,0.1); }
.post-tags-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tags-label { color: #9ca3af; display: flex; align-items: center; }
.post-tag-pill { background: #f3f4f6; color: #6b7280; border-radius: 50px; padding: 4px 14px; font-size: 13px; text-decoration: none; transition: all 0.2s; }
[data-theme="dark"] .post-tag-pill { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); }
.post-tag-pill:hover { background: var(--color-primary, #f97316); color: #fff; }
.post-share-horizontal { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: #9ca3af; }
.share-pill { border-radius: 50px; padding: 6px 16px; font-size: 13px; font-weight: 600; text-decoration: none; transition: all 0.2s; }
.share-pill-twitter { background: #e7f5fd; color: #1da1f2; } .share-pill-twitter:hover { background: #1da1f2; color: #fff; }
.share-pill-linkedin { background: #e8f0fb; color: #0a66c2; } .share-pill-linkedin:hover { background: #0a66c2; color: #fff; }
.share-pill-facebook { background: #e8f0ff; color: #1877f2; } .share-pill-facebook:hover { background: #1877f2; color: #fff; }

/* ---- POST NAVIGATION ---- */
.post-navigation-block { margin: 40px 0 0; }
.post-navigation-block .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.post-navigation-block .nav-previous, .post-navigation-block .nav-next { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; transition: all 0.2s; }
[data-theme="dark"] .post-navigation-block .nav-previous, [data-theme="dark"] .post-navigation-block .nav-next { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
.post-navigation-block .nav-next { text-align: right; }
.post-navigation-block a { text-decoration: none; display: block; }
.post-navigation-block a:hover .nav-previous, .post-navigation-block .nav-previous:hover, .post-navigation-block .nav-next:hover { border-color: var(--color-primary, #f97316); }
.post-navigation-block .nav-dir { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #9ca3af; margin-bottom: 6px; font-weight: 700; }
.post-navigation-block .nav-title { display: block; font-size: 15px; font-weight: 600; color: var(--color-secondary, #1e2d3d); line-height: 1.4; }
[data-theme="dark"] .post-navigation-block .nav-title { color: #fff; }

/* ---- AUTHOR BIO BOX ---- */
.author-bio-box { display: flex; gap: 24px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 16px; padding: 28px; margin: 40px 0; }
[data-theme="dark"] .author-bio-box { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
.author-bio-avatar { flex-shrink: 0; }
.author-bio-img { border-radius: 50%; border: 3px solid var(--color-primary, #f97316); }
.author-bio-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #9ca3af; margin-bottom: 4px; font-weight: 700; }
.author-bio-name { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; }
.author-bio-name a { color: var(--color-secondary, #1e2d3d); text-decoration: none; }
[data-theme="dark"] .author-bio-name a { color: #fff; }
.author-bio-name a:hover { color: var(--color-primary, #f97316); }
.author-bio-text { color: #6b7280; font-size: 0.95rem; line-height: 1.7; margin-bottom: 12px; }
.author-posts-link { font-size: 13px; font-weight: 600; color: var(--color-primary, #f97316); text-decoration: none; }
.author-posts-link:hover { text-decoration: underline; }
@media (max-width: 600px) { .author-bio-box { flex-direction: column; } }

/* ---- RELATED POSTS ---- */
.related-posts-section { margin-top: 48px; }
.related-posts-title { font-size: 1.4rem; font-weight: 800; margin-bottom: 24px; color: var(--color-secondary, #1e2d3d); }
[data-theme="dark"] .related-posts-title { color: #fff; }
.related-posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 700px) { .related-posts-grid { grid-template-columns: 1fr; } }
.related-post-card { border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; transition: all 0.3s; }
[data-theme="dark"] .related-post-card { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); }
.related-post-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.1); border-color: var(--color-primary, #f97316); }
.related-thumb-link { display: block; overflow: hidden; aspect-ratio: 16/9; }
.related-thumb { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.related-post-card:hover .related-thumb { transform: scale(1.05); }
.related-post-body { padding: 18px; }
.related-post-date { font-size: 12px; color: #9ca3af; display: block; margin-bottom: 8px; }
.related-post-title { font-size: 0.95rem; font-weight: 700; margin-bottom: 8px; line-height: 1.4; }
.related-post-title a { color: var(--color-secondary, #1e2d3d); text-decoration: none; }
[data-theme="dark"] .related-post-title a { color: #fff; }
.related-post-title a:hover { color: var(--color-primary, #f97316); }
.related-post-excerpt { font-size: 0.85rem; color: #6b7280; line-height: 1.6; margin-bottom: 12px; }
.related-read-more { font-size: 13px; font-weight: 600; color: var(--color-primary, #f97316); text-decoration: none; }

/* ---- ARCHIVE — PREMIUM LAYOUT ---- */
.archive-hero { background: var(--color-secondary, #1e2d3d); color: #fff; padding: 60px 0 48px; }
.archive-hero-inner { max-width: 760px; }
.archive-type-label { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(249,115,22,0.9); font-weight: 700; margin-bottom: 12px; }
.archive-title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; margin-bottom: 12px; }
.archive-description { font-size: 1.05rem; color: rgba(255,255,255,0.7); line-height: 1.7; margin-bottom: 20px; }
.archive-stats { margin-top: 12px; }
.post-count-badge { display: inline-block; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); border-radius: 50px; padding: 4px 16px; font-size: 13px; color: rgba(255,255,255,0.7); }
.author-archive-header { display: flex; align-items: flex-start; gap: 24px; }
.author-archive-avatar { border-radius: 50%; border: 3px solid var(--color-primary, #f97316); }

/* Category tabs */
.archive-category-filter { background: #fff; border-bottom: 2px solid #e5e7eb; position: sticky; top: 72px; z-index: 40; }
[data-theme="dark"] .archive-category-filter { background: #0f1923; border-bottom-color: rgba(255,255,255,0.1); }
.category-tabs { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; padding: 0 20px; max-width: 1300px; margin: 0 auto; }
.category-tabs::-webkit-scrollbar { display: none; }
.cat-tab { display: inline-flex; align-items: center; gap: 6px; padding: 14px 18px; font-size: 14px; font-weight: 500; color: #6b7280; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; transition: all 0.2s; }
.cat-tab:hover { color: var(--color-primary, #f97316); }
.cat-tab.active { color: var(--color-primary, #f97316); border-bottom-color: var(--color-primary, #f97316); font-weight: 600; }
.cat-count { background: #f3f4f6; color: #9ca3af; border-radius: 50px; padding: 1px 8px; font-size: 11px; }
.cat-tab.active .cat-count { background: rgba(249,115,22,0.1); color: var(--color-primary, #f97316); }

/* Featured first post */
.archive-container { padding-top: 48px; padding-bottom: 60px; }
.featured-archive-post { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; border-radius: 20px; overflow: hidden; border: 1px solid #e5e7eb; margin-bottom: 48px; }
[data-theme="dark"] .featured-archive-post { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); }
@media (max-width: 768px) { .featured-archive-post { grid-template-columns: 1fr; } }
.featured-post-thumbnail { display: block; overflow: hidden; aspect-ratio: 4/3; }
.featured-post-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; display: block; }
.featured-archive-post:hover .featured-post-img { transform: scale(1.03); }
.featured-post-content { padding: 40px 36px; display: flex; flex-direction: column; justify-content: center; }
.featured-post-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.featured-badge { background: rgba(249,115,22,0.1); color: var(--color-primary, #f97316); border-radius: 50px; padding: 4px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.featured-post-title { font-size: clamp(1.3rem, 2.5vw, 1.8rem); font-weight: 800; line-height: 1.3; margin-bottom: 16px; }
.featured-post-title a { color: var(--color-secondary, #1e2d3d); text-decoration: none; }
[data-theme="dark"] .featured-post-title a { color: #fff; }
.featured-post-title a:hover { color: var(--color-primary, #f97316); }
.featured-post-excerpt { color: #6b7280; line-height: 1.7; margin-bottom: 24px; font-size: 0.95rem; }
.featured-post-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.featured-post-author { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #9ca3af; }
.mini-avatar { border-radius: 50%; }
.meta-sep { color: #d1d5db; }
.featured-read-more { display: inline-flex; align-items: center; gap: 6px; background: var(--color-primary, #f97316); color: #fff; border-radius: 50px; padding: 10px 22px; font-size: 14px; font-weight: 600; text-decoration: none; transition: all 0.2s; white-space: nowrap; }
.featured-read-more:hover { background: var(--color-secondary, #1e2d3d); transform: translateX(2px); color: #fff; }
.archive-grid-header { margin-bottom: 24px; }
.archive-grid-title { font-size: 1.4rem; font-weight: 700; color: var(--color-secondary, #1e2d3d); }
[data-theme="dark"] .archive-grid-title { color: #fff; }

/* Archive pagination */
.archive-pagination { margin-top: 48px; text-align: center; }
.archive-pagination .page-numbers { display: inline-flex; list-style: none; padding: 0; margin: 0; gap: 8px; }
.archive-pagination .page-numbers li a, .archive-pagination .page-numbers li span { display: flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; border-radius: 10px; border: 1.5px solid #e5e7eb; font-size: 14px; font-weight: 500; text-decoration: none; color: var(--color-secondary, #1e2d3d); transition: all 0.2s; gap: 6px; padding: 0 12px; }
[data-theme="dark"] .archive-pagination .page-numbers li a, [data-theme="dark"] .archive-pagination .page-numbers li span { border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); }
.archive-pagination .page-numbers li a:hover { border-color: var(--color-primary, #f97316); color: var(--color-primary, #f97316); }
.archive-pagination .page-numbers li span.current { background: var(--color-primary, #f97316); border-color: var(--color-primary, #f97316); color: #fff; }

/* No results */
.no-results-block { text-align: center; padding: 80px 20px; }
.no-results-icon { font-size: 60px; margin-bottom: 20px; }
.no-results-block h2 { font-size: 1.8rem; font-weight: 700; margin-bottom: 12px; color: var(--color-secondary, #1e2d3d); }
[data-theme="dark"] .no-results-block h2 { color: #fff; }
.no-results-block p { color: #6b7280; margin-bottom: 24px; }

/* ---- SIDEBAR ---- */
.sidebar-placeholder .widget { margin-bottom: 28px; }
.sidebar-recent-posts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.sidebar-recent-posts li a { display: block; font-size: 14px; font-weight: 500; color: var(--color-secondary, #1e2d3d); text-decoration: none; margin-bottom: 2px; line-height: 1.5; }
[data-theme="dark"] .sidebar-recent-posts li a { color: rgba(255,255,255,0.85); }
.sidebar-recent-posts li a:hover { color: var(--color-primary, #f97316); }
.sidebar-recent-posts .post-date { font-size: 12px; color: #9ca3af; display: block; }
.sidebar-categories { list-style: none; padding: 0; margin: 0; }
.sidebar-categories li a { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #e5e7eb; font-size: 14px; color: #6b7280; text-decoration: none; transition: color 0.2s; }
[data-theme="dark"] .sidebar-categories li a { border-bottom-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); }
.sidebar-categories li a:hover { color: var(--color-primary, #f97316); }
.sidebar-cta-widget { background: linear-gradient(135deg, var(--color-secondary, #1e2d3d), #0f1923); color: #fff; border-radius: 14px; padding: 24px !important; }
.sidebar-cta-widget .widget-title { color: #fff; }
.sidebar-cta-widget p { color: rgba(255,255,255,0.7); margin-bottom: 0; }
.btn-sm-primary { display: inline-block; background: var(--color-primary, #f97316); color: #fff; padding: 10px 20px; border-radius: 50px; font-size: 13px; font-weight: 600; text-decoration: none; margin-top: 12px; transition: all 0.2s; }
.btn-sm-primary:hover { background: #ea6a0e; transform: translateY(-1px); color: #fff; }

/* ---- ELEMENTOR BLOG POSTS WIDGET ---- */
.kroxia-blog-posts { display: grid; gap: 24px; }
.kroxia-blog-posts.layout-grid.cols-1 { grid-template-columns: 1fr; }
.kroxia-blog-posts.layout-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.kroxia-blog-posts.layout-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.kroxia-blog-posts.layout-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .kroxia-blog-posts.layout-grid.cols-3, .kroxia-blog-posts.layout-grid.cols-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .kroxia-blog-posts.layout-grid { grid-template-columns: 1fr; } }
.kroxia-blog-posts.layout-list { grid-template-columns: 1fr; gap: 16px; }
.blog-post-card { border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; transition: all 0.3s; background: #fff; }
[data-theme="dark"] .blog-post-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
.blog-post-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.1); border-color: var(--color-primary, #f97316); }
.blog-card-list { flex-direction: row; display: flex; }
.blog-card-list .blog-card-thumb { flex: 0 0 240px; }
.blog-card-thumb { overflow: hidden; aspect-ratio: 16/9; }
.blog-card-list .blog-card-thumb { aspect-ratio: unset; }
.blog-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; display: block; }
.blog-post-card:hover .blog-card-thumb img { transform: scale(1.05); }
.blog-card-content { padding: 20px; }
.blog-card-title { font-size: 1rem; font-weight: 700; margin: 10px 0 8px; line-height: 1.4; }
.blog-card-title a { color: var(--color-secondary, #1e2d3d); text-decoration: none; }
[data-theme="dark"] .blog-card-title a { color: #fff; }
.blog-card-title a:hover { color: var(--color-primary, #f97316); }
.blog-card-excerpt { font-size: 0.9rem; color: #6b7280; line-height: 1.6; margin-bottom: 12px; }
.blog-card-meta { font-size: 12px; color: #9ca3af; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.blog-read-more { font-size: 13px; font-weight: 600; color: var(--color-primary, #f97316); text-decoration: none; }
.blog-read-more:hover { text-decoration: underline; }

/* ---- FULL WIDTH TEMPLATE ---- */
.full-width-main { padding: 0; }
.full-width-container { padding-top: 48px; padding-bottom: 60px; max-width: 1200px; }
.full-width-content { max-width: 100%; }
.page-featured-image { margin-bottom: 40px; }
.full-width-hero-img { width: 100%; border-radius: 16px; max-height: 500px; object-fit: cover; }

/* ---- MOBILE RESPONSIVE PATCHES ---- */
@media (max-width: 600px) {
    .post-meta-bar { gap: 10px; }
    .post-meta-divider { display: none; }
    .post-hero { padding: 36px 0 28px; }
    .related-posts-grid { grid-template-columns: 1fr; }
    .post-navigation-block .nav-links { grid-template-columns: 1fr; }
    .featured-archive-post { grid-template-columns: 1fr; }
    .featured-post-content { padding: 24px 20px; }
}

/* ============================================================
   RESPONSIVE — NAVBAR & HEADER (1024px tablet / 768px mobile)
   ============================================================ */
@media (max-width: 1024px) {
    /* Hide desktop nav, show hamburger */
    .main-navigation { display: none !important; }
    .mobile-menu-toggle { display: flex !important; }
}

@media (max-width: 768px) {
    /* Hide CTA + theme switcher in header to save space */
    .header-cta-btn { display: none !important; }
    .theme-switcher { display: none !important; }

    /* Hero */
    .hero-layout { grid-template-columns: 1fr; gap: 32px; padding: 40px 0 60px; }
    .hero-visual { display: none; }
    .hero-title { font-size: clamp(2rem, 8vw, 2.8rem); }
    .hero-stats { gap: 16px; flex-wrap: wrap; }
    .hero-float-1, .hero-float-2, .hero-float-3 { display: none; }

    /* Services / Blog grids */
    .services-grid { grid-template-columns: 1fr; }
    .blog-grid { grid-template-columns: 1fr; }

    /* Header height */
    .header-layout { height: 60px; gap: 12px; }

    /* Offcanvas panel full width on small screens */
    .offcanvas-panel { width: 100%; max-width: 100%; }

    /* Section padding */
    .section-padding { padding: 60px 0; }
}

@media (max-width: 480px) {
    .hero-actions { flex-direction: column; }
    .hero-actions .btn-primary,
    .hero-actions .btn-secondary { width: 100%; justify-content: center; }
    .header-actions { gap: 6px; }
    .cart-trigger { padding: 8px; }
}