/* =============================
    Maintenance Contracts - Plans
    ============================= */
.mc-plans { padding: 56px 0; background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); }
.mc-plans .mcp-head { text-align:center; margin-bottom: 16px; }
.mc-plans .mcp-head h2 { margin:0 0 8px; font-weight:700; }
.mc-plans .mcp-head .subtitle { color:#475569; }
.mc-plans .mcp-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 14px; align-items:stretch; }
.mc-plans .mcp-card { position:relative; background:#ffffff; border:1px solid #e5e7eb; border-radius:16px; padding:16px; box-shadow:0 14px 36px rgba(2,6,23,0.08); }
.mc-plans .mcp-card.featured { border-color:#f97316; box-shadow:0 18px 46px rgba(249,115,22,0.2); }
.mc-plans .mcp-badge { position:absolute; top:-12px; left:16px; background: linear-gradient(135deg, #f97316, #ef4444); color:#fff; border-radius:10px; padding:6px 10px; font-weight:700; box-shadow:0 10px 22px rgba(239,68,68,0.25); }
.mc-plans .mcp-card h3 { margin: 10px 0 10px; display:flex; align-items:center; gap:10px; }
.mc-plans .mcp-card h3 i { color:#ef4444; }
.mc-plans .mcp-list { margin:0 0 10px; padding-left:18px; color:#0f172a; }
.mc-plans .mcp-list li { margin:6px 0; }
.mc-plans .mcp-cta { display:flex; }
.mc-plans .mcp-footnote { text-align:center; margin-top: 8px; color:#64748b; font-size:.95rem; }
@media (max-width: 992px) { .mc-plans .mcp-grid { grid-template-columns: 1fr; } }

/* =============================
    Maintenance Showcase (real images)
    ============================= */
.mc-showcase { padding: 56px 0; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); }
.mc-showcase .ms-head { text-align:center; margin-bottom: 16px; }
.mc-showcase .ms-head h2 { margin:0 0 8px; font-weight:700; }
.mc-showcase .ms-head .subtitle { color:#475569; }
.mc-showcase .ms-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.mc-showcase .ms-item { background:#0b132b; border-radius:16px; overflow:hidden; border:1px solid #e5e7eb; box-shadow:0 16px 36px rgba(2,6,23,0.08); }
.mc-showcase .ms-item img { display:block; width:100%; height:260px; object-fit:cover; }
.mc-showcase .ms-item figcaption { padding:10px 12px; font-size:.95rem; color:#0f172a; background:#ffffff; }
@media (max-width: 992px) { .mc-showcase .ms-grid { grid-template-columns: 1fr; } .mc-showcase .ms-item img { height:220px; } }
/* =============================
     CCTV Showcase (real images)
     ============================= */
.cctv-showcase { padding: 56px 0; background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); }
.cctv-showcase .cs-head { text-align: center; margin-bottom: 18px; }
.cctv-showcase .cs-head h2 { margin: 0 0 8px; font-weight: 700; }
.cctv-showcase .cs-head .subtitle { color: #475569; }
.cctv-showcase .cs-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 16px; 
}
.cctv-showcase .cs-item { 
    background: #0b132b; 
    border-radius: 16px; 
    overflow: hidden; 
    border: 1px solid #e5e7eb; 
    box-shadow: 0 16px 36px rgba(2,6,23,0.08);
}
.cctv-showcase .cs-item img { 
    display: block; width: 100%; height: 260px; object-fit: cover; 
}
.cctv-showcase .cs-item figcaption { 
    padding: 10px 12px; 
    font-size: 0.95rem; 
    color: #0f172a; 
    background: #ffffff; 
}

@media (max-width: 992px) {
    .cctv-showcase .cs-grid { grid-template-columns: 1fr; }
    .cctv-showcase .cs-item img { height: 220px; }
}

/* =============================
     CCTV Flow - Modern cable animation
     ============================= */
.cctv-flow { position: relative; overflow: hidden; padding: 60px 0; background: radial-gradient(120% 120% at 50% -20%, #0b1220 0%, #0e172a 60%, #0a1022 100%); }
.cctv-flow .flow-head { text-align: center; margin-bottom: 18px; position: relative; z-index: 2; }
.cctv-flow .flow-head h2 { margin: 0 0 6px; color: #ffffff; }
.cctv-flow .flow-head .subtitle { margin: 0; color: #cbd5e1; }
.cctv-flow .flow-note { margin-top: 6px; color: #94a3b8; font-size: 0.95rem; }

.cctv-flow .cable-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cctv-flow .cable-svg { width: 100%; height: 100%; display: block; }
.cctv-flow .cable-path { stroke: rgba(148, 163, 184, 0.18); stroke-width: 12; fill: none; }
.cctv-flow .cable-light { stroke: url(#cable-light-a); stroke-width: 4; fill: none; stroke-linecap: round; stroke-dasharray: 2 46; animation: cable-travel 12s linear infinite; filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.45)); opacity: 0.95; }
.cctv-flow .cable-light.l2 { stroke: url(#cable-light-b); animation-duration: 16s; animation-delay: -4s; filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.45)); }
.cctv-flow .cable-light.lA { stroke: url(#cable-light-b); animation-duration: 14s; animation-delay: -2s; }
.cctv-flow .cable-light.lB { stroke: url(#cable-light-a); animation-duration: 18s; animation-delay: -6s; }
.cctv-flow .cable-light.lX { stroke: url(#cable-light-a); animation-duration: 20s; animation-delay: -8s; }
.cctv-flow .cable-light.lY { stroke: url(#cable-light-b); animation-duration: 22s; animation-delay: -10s; }

@keyframes cable-travel { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1200; } }

.cctv-flow .flow-grid { 
    position: relative; z-index: 2; 
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; 
}
.cctv-flow .flow-card { 
    background: #ffffff; border: 1px solid #e5e7eb; border-radius: 16px; 
    padding: 16px 16px 14px; box-shadow: 0 14px 36px rgba(2, 6, 23, 0.2);
}
.cctv-flow .flow-badge { position: absolute; transform: translateY(-50%); margin-left: calc(100% - 44px); top: 0; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #f97316, #ef4444); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; box-shadow: 0 12px 24px rgba(239, 68, 68, 0.35); }
.cctv-flow .flow-icon { width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1px solid #fee2e2; color: #ef4444; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 6px 16px rgba(239, 68, 68, 0.15); }
.cctv-flow .flow-card h3 { margin: 10px 0 6px; color: #0b132b; font-size: 1.08rem; }
.cctv-flow .flow-card p { margin: 0 0 8px; color: #475569; }
.cctv-flow .flow-points { margin: 0; padding-left: 18px; color: #0f172a; line-height: 1.5; }
.cctv-flow .flow-points li { margin: 4px 0; }
.cctv-flow .flow-cta { text-align: center; margin-top: 16px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; position: relative; z-index: 2; }

@media (max-width: 1200px) {
    .cctv-flow .flow-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
    .cctv-flow { padding: 50px 0; }
    .cctv-flow .flow-grid { grid-template-columns: 1fr; }
    .cctv-flow .flow-badge { position: static; margin: 0 0 8px; transform: none; }
}

    /* Hybrid mode: combine magical glows with cable lights, and slow the flow */
    .cctv-flow.magic-hybrid .cable-light { stroke-dasharray: 2 68; animation-duration: 28s; }
    .cctv-flow.magic-hybrid .cable-light.l2 { animation-duration: 34s; }
    .cctv-flow.magic-hybrid .cable-light.lA { animation-duration: 30s; }
    .cctv-flow.magic-hybrid .cable-light.lB { animation-duration: 36s; }
    .cctv-flow.magic-hybrid .cable-light.lX { animation-duration: 40s; }
    .cctv-flow.magic-hybrid .cable-light.lY { animation-duration: 44s; }

    .cctv-flow .flow-magic { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
    .cctv-flow .flow-magic::before,
    .cctv-flow .flow-magic::after { 
        content: ""; position: absolute; inset: -20%; filter: blur(40px); opacity: .45; 
        background: radial-gradient(60% 60% at 20% 20%, rgba(111,66,193,0.22), rgba(111,66,193,0) 60%),
                                radial-gradient(50% 50% at 80% 40%, rgba(16,185,129,0.18), rgba(16,185,129,0) 60%),
                                radial-gradient(40% 40% at 60% 80%, rgba(255,100,100,0.18), rgba(255,100,100,0) 60%);
        animation: bgMove 26s ease-in-out infinite alternate;
    }
    .cctv-flow .flow-magic::after { 
        opacity: .35; 
        background: radial-gradient(60% 60% at 30% 70%, rgba(99,102,241,0.22), rgba(99,102,241,0) 60%),
                                radial-gradient(40% 40% at 70% 20%, rgba(255,255,255,0.06), rgba(255,255,255,0) 60%);
        animation-duration: 32s;
    }
    .cctv-flow .flow-magic .particle { 
        position: absolute; width: 90px; height: 90px; border-radius: 50%; filter: blur(16px); opacity: .6;
        animation: particleDrift 16s ease-in-out infinite, particleTwinkle 8s ease-in-out infinite;
    }
    .cctv-flow .flow-magic .particle.p1 { left:10%; top:40%; background: radial-gradient(circle, rgba(111,66,193,0.9), rgba(111,66,193,0.4)); animation-delay: 0s, 0s; }
    .cctv-flow .flow-magic .particle.p2 { left:22%; top:74%; background: radial-gradient(circle, rgba(16,185,129,0.92), rgba(16,185,129,0.4)); animation-delay: 1.2s, 0.5s; }
    .cctv-flow .flow-magic .particle.p3 { left:60%; top:18%; background: radial-gradient(circle, rgba(255,107,107,0.92), rgba(255,107,107,0.4)); animation-delay: 2.6s, 1.1s; }
    .cctv-flow .flow-magic .particle.p4 { left:78%; top:56%; background: radial-gradient(circle, rgba(99,102,241,0.92), rgba(99,102,241,0.4)); animation-delay: 3.9s, 1.8s; }

    /* Ensure content stays above visuals */
    .cctv-flow .container-xl,
    .cctv-flow .flow-head,
    .cctv-flow .flow-grid,
    .cctv-flow .flow-cta { position: relative; z-index: 2; }
/* =============================
     Customer Support Details (ni-care)
     Scoped styles for Network Infrastructure page support section
     ============================= */
.ni-care { 
    padding: 72px 0; 
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}
.ni-care .care-head { text-align: center; margin-bottom: 28px; }
.ni-care .care-head h2 { margin: 0 0 10px; font-weight: 700; }
.ni-care .care-head .subtitle { color: #475569; }

.ni-care .care-grid { 
    display: grid; 
    grid-template-columns: 1.15fr 1fr; 
    gap: 32px; 
    align-items: start;
}

.ni-care .care-card { 
    background: #ffffff; 
    border: 1px solid #e5e7eb; 
    border-radius: 14px; 
    padding: 20px 22px; 
    box-shadow: 0 6px 20px rgba(2, 6, 23, 0.06);
}
.ni-care .care-card h3 { 
    margin: 0 0 14px; 
    font-size: 1.1rem; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}
.ni-care .care-card h3 i { color: #2563eb; }

.ni-care .care-list { list-style: none; padding: 0; margin: 0; }
.ni-care .care-list li { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    padding: 8px 0; 
    border-bottom: 1px dashed #e5e7eb; 
}
.ni-care .care-list li:last-child { border-bottom: none; }
.ni-care .care-list i { width: 18px; color: #2563eb; }
.ni-care .care-list a { color: #0f172a; text-decoration: underline; }

.ni-care .care-bullets { list-style: none; padding: 0; margin: 0; }
.ni-care .care-bullets li { padding: 6px 0; color: #0f172a; }
.ni-care .care-bullets strong { color: #111827; }

.ni-care .visit-note { 
    margin-top: 18px; 
    display: grid; 
    grid-template-columns: 44px 1fr; 
    gap: 14px; 
    background: #eef2ff; 
    border: 1px solid #e0e7ff; 
    border-left: 4px solid #2563eb; 
    padding: 14px 16px; 
    border-radius: 12px;
}
.ni-care .visit-icon { 
    width: 44px; height: 44px; 
    display: grid; place-items: center; 
    background: #ffffff; 
    border: 1px solid #e5e7eb; 
    border-radius: 10px; 
    color: #2563eb;
}
.ni-care .visit-text h4 { margin: 0 0 4px; }
.ni-care .visit-text p { margin: 0; color: #334155; }

.ni-care .care-visuals { position: relative; }
.ni-care .cv-stack { position: relative; min-height: 420px; }
.ni-care .cv-img { 
    display: block; 
    border-radius: 14px; 
    object-fit: cover; 
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.15);
    background: #cbd5e1; 
    border: 6px solid #ffffff;
}
.ni-care .cv-main { 
    position: absolute; 
    left: 0; right: 0; top: 0; 
    width: 70%; height: 68%; 
    margin: 0 auto; 
}
.ni-care .cv-top { 
    position: absolute; 
    top: -16px; right: -10px; 
    width: 52%; height: 48%;
}
.ni-care .cv-side { 
    position: absolute; 
    left: -10px; bottom: -10px; 
    width: 46%; height: 46%;
}

.ni-care .care-cta { 
    margin-top: 28px; 
    display: flex; 
    gap: 12px; 
    justify-content: center; 
}
.ni-care .care-cta .btn { min-width: 210px; }

@media (max-width: 992px) {
    .ni-care { padding: 56px 0; }
    .ni-care .care-grid { grid-template-columns: 1fr; }
    .ni-care .cv-stack { min-height: auto; }
    .ni-care .cv-main,
    .ni-care .cv-top,
    .ni-care .cv-side { 
        position: relative; 
        width: 100%; height: 220px; 
        left: auto; right: auto; top: auto; bottom: auto; 
        margin: 0 0 14px; 
    }
    .ni-care .cv-top { top: auto; right: auto; }
    .ni-care .cv-side { left: auto; bottom: auto; }
}

/* --- Website Types (enhanced creative styling) --- */
.site-types.enhanced {
    position: relative;
}
.site-types.enhanced .st-head .subtitle {
    opacity: 0.9;
}
.site-types.enhanced .st-grid .svc-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.10);
    border-left-width: 4px;
    border-left-color: var(--accent, rgba(255,255,255,0.18));
    background:
        radial-gradient(1200px 400px at -20% -20%, rgba(255,255,255,0.06), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    backdrop-filter: saturate(110%) blur(0.5px);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.site-types.enhanced .st-grid .svc-card:before {
    content: "";
    position: absolute;
    inset: -20% -30% auto auto;
    width: 240px;
    height: 240px;
    background: radial-gradient(closest-side, color-mix(in oklab, var(--accent, #7aa2ff), transparent 35%), transparent 70%);
    opacity: .35;
    transform: translate(10px, -10px);
    pointer-events: none;
}
.site-types.enhanced .st-grid .svc-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.35), 0 0 0 1px color-mix(in oklab, var(--accent, #7aa2ff), transparent 70%);
    border-left-color: color-mix(in oklab, var(--accent, #7aa2ff), white 20%);
}
.site-types.enhanced .svc-card h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px 0;
}
.site-types.enhanced .svc-card h4 i {
    color: color-mix(in oklab, var(--accent, #7aa2ff), white 10%);
}
.site-types.enhanced .tags .badge {
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.08);
}
.site-types.enhanced .tags .badge:hover {
    border-color: color-mix(in oklab, var(--accent, #7aa2ff), transparent 60%);
}
.site-types.enhanced .st-chips .badge {
    border: 1px solid rgba(255,255,255,0.12);
}

/* Type theme palettes (accessible on dark) */
.t-business { --accent: #7aa2ff; }
.t-commerce { --accent: #3ddc97; }
.t-portfolio { --accent: #f78fb3; }
.t-blog { --accent: #ffd166; }
.t-saas { --accent: #64d2ff; }
.t-ngo { --accent: #ff8e6e; }
.t-edu { --accent: #a3e635; }
.t-health { --accent: #60a5fa; }

@media (max-width: 640px) {
    .site-types.enhanced .st-grid .svc-card {
        border-left-width: 3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-types.enhanced .st-grid .svc-card,
    .site-types.enhanced .st-grid .svc-card:hover {
        transition: none;
        transform: none;
    }
}
/* Prevent right-side empty-space scrolling across pages (non-intrusive) */
html, body { overflow-x: hidden; }
/* --- Global Styles & Variables --- */
:root {
    --primary-color: #007bff;
    --secondary-color: #f0f6ff;
    --dark-color: #1a202c;
    --gray-color: #6c757d;
    --light-color: #ffffff;
    --purple-color: #6f42c1;
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --border-radius: 8px;
    --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    line-height: 1.6;
    color: var(--dark-color);
    background-color: var(--light-color);
}

.container {
        max-width: 1320px;
        margin: 0 auto;
        padding: 0 20px;
}

/* Wider containers for flagship sections */
.container-xl {
        max-width: 1440px;
        margin: 0 auto;
        padding: 0 24px;
}
@media (min-width: 1600px){
    .container-xl { max-width: 1520px; }
}
@media (min-width: 1920px){
    .container-xl { max-width: 1600px; }
}

h1, h2, h3 {
    line-height: 1.2;
    margin-bottom: 1rem;
}

h1 { font-size: 3rem; }
h2 { font-size: 2.25rem; color: var(--dark-color); text-align: center; }

p { margin-bottom: 1rem; }

a {
    color: #e2e4e7;
    text-decoration: none;
}

/* --- Buttons --- */
.btn {
    display: inline-block;
    padding: 2px 24px;
    border-radius: var(--border-radius);
    font-weight: 500;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.btn-primary {
        background-color: #ee5353;
    color: white !important;
}

.btn-primary:hover {
    background-color: #ee5353;
}

.btn-secondary {
  background-color: var(--secondary-color);
    color: #ee5353;
    border: 2px solid #ee5353;
}

.btn-secondary:hover {
    background-color: #dbeaff;
}

.btn-large {
    padding: 16px 32px;
    font-size: 1.1rem;
}

/* --- Top Bar --- */
.top-bar {
    background-color:#49494a;
    padding: 3px 0;
    font-size: 12px;
    color: white;
}

.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contact-details span {
    margin-right: 20px;
}

.country-selector-container {
    position: relative;
}

.selected-country {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.selected-country img {
    width: 20px;
    margin-right: 10px;
}

.selected-country { padding: 6px 10px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; }
.selected-country:hover { box-shadow: 0 6px 18px rgba(2,6,23,0.06); }
.selected-country::after { content: ''; width: 10px; height: 10px; margin-left: 8px; border-right: 2px solid #6b7280; border-bottom: 2px solid #6b7280; transform: rotate(45deg); display: inline-block; }

.country-popup {
    display: block; /* toggled via [hidden] attribute */
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px;
    z-index: 1001;
    min-width: 220px;
    box-shadow: 0 10px 30px rgba(2,6,23,0.15);
    opacity: 0; transform: translateY(6px);
    transition: opacity .15s ease, transform .15s ease;
}

.country-popup[hidden] { display: none; }
.country-selector-container .country-popup:not([hidden]) { opacity: 1; transform: translateY(0); }

.country-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.country-list li {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    cursor: pointer;
    color: var(--dark-color);
}

.country-list li:hover {
    background-color: #f8fafc;
}

.country-list li img {
    width: 20px;
    margin-right: 10px;
}

.country-list li:focus { outline: 2px solid #ee5353; outline-offset: 2px; border-radius: 6px; }


/* --- Header & Navigation --- */
#main-header {
    background-color: var(--light-color);
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: box-shadow 0.3s ease;
}

#main-header.scrolled {
    box-shadow: var(--box-shadow);
}

#main-header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--dark-color);
    line-height: 0px;
}

.nav-links {
    display: flex;
    list-style: none;
}

.nav-links li {
    margin: 0 1.5rem;
}

.nav-links a {
    color: var(--dark-color);
    font-weight: 500;
    transition: color 0.3s ease;
        font-size: 14px;
}

.nav-links a:hover {
    color: var(--primary-color);
}

.nav-actions {
    display: flex;
    gap: 1rem;
}

/* Ensure mobile nav overlay is hidden by default on desktop */
.mobile-nav-panel { display: none; }

/* --- Hero Section --- */
.hero {
    position: relative;
    overflow: hidden;
    background-color: #f8f9fa;
    height: 580px;
    border-radius: 0px;
    display: flex;
    align-items: center;
    /* Fallback background for when video isn't available */
    background-image: url('../images/backgorund.jpg');
    background-size: cover;
    background-position: center;
}

.slider-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.slide {
    display: none;
    position: relative; /* Changed for overlapping content */
    background-color: transparent;
    border-radius: 16px;
    overflow: visible; /* Allow content to overlap */
    box-shadow: none;
}

.slide.active {
    display: block; /* Changed from flex */
}

.slide-image {
    width: 75%; /* Make image smaller */
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    overflow: hidden;
}

.slide-image img {
    width: 100%;
    height: auto;
    display: block;
}

.slide-content {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 45%;
    background: #ffffff;
    padding: 2.5rem;
    text-align: left;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.slide-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-align: left;
}

.slide-content p {
    font-size: 1.1rem;
    color: var(--gray-color);
    margin-bottom: 2rem;
}

.slide-content .btn {
    background-color: #333;
    color: #fff;
    padding: 12px 24px;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.9rem;
}
.slide-content .btn:hover {
    background-color: #555;
}


.slider-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.8);
    padding: 0.5rem 1rem;
    border-radius: 50px;
}

/* Background video layering */
.hero .hero-video { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero .bg-video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; width: auto; height: auto; object-fit: cover; filter: saturate(1.05) contrast(1.05); }
.hero .video-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,10,20,0.6), rgba(6,10,20,0.6)); }
.hero .slider-container, .hero .slider-controls { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce){
    .hero .bg-video { display: none; }
}

.slider-arrow {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #333;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.slider-arrow.prev {
    left: -30px;
}

.slider-arrow.next {
    right: -30px;
}


.slider-indicators {
    display: flex;
    gap: 0.5rem;
}

.indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ccc;
    cursor: pointer;
    transition: background-color 0.3s;
}

.indicator.active {
    background-color: #333;
}

.pause-button {
    background: transparent;
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 1rem;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pause-button:hover{
    background: #eee;
}

.hero .subtitle {
    font-size: 1.25rem;
    color: var(--gray-color);
    max-width: 700px;
    margin: 1.5rem auto 2.5rem;
}

/* --- Hero Responsiveness --- */
@media (max-width: 992px) {
    .hero {
        height: auto;
        padding: 40px 0 80px;
        display: block;
    }

    .slide-image {
        width: 100%;
        margin-bottom: -30px; /* Slight overlap effect */
        position: relative;
        z-index: 1;
    }

    .slide-content {
        position: relative;
        width: 90%;
        margin: 0 auto;
        top: auto;
        right: auto;
        transform: none;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(5px);
        padding: 2rem;
        text-align: center;
        z-index: 2;
        box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    }

    .slide-content h2 {
        text-align: center;
        font-size: 1.75rem;
    }

    .slide-content p {
        text-align: center;
        font-size: 1rem;
    }
    
    .slider-arrow {
        width: 44px;
        height: 44px;
        background: rgba(255,255,255,0.9);
        border-radius: 50%;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        display: flex; /* Ensure centering works */
        align-items: center;
        justify-content: center;
    }

    .slider-arrow.prev { left: 10px; }
    .slider-arrow.next { right: 10px; }
    
    .slider-controls {
        bottom: 10px; /* Adjust control position */
    }
}

@media (max-width: 576px) {
    .hero {
        border-radius: 0;
        padding-top: 20px;
    }
    
    .slide-content {
        width: 95%;
        padding: 1.5rem;
    }
    
    .slide-content h2 {
        font-size: 1.5rem;
    }
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

/* --- Customer Logos Section --- */
.customer-logos {
    padding: 40px 0;
    background-color: #fafafa;
    overflow: hidden;
}

.customer-logos p {
    text-align: center;
    color: var(--gray-color);
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.9rem;
    margin-bottom: 2rem;
}

.logo-scroller {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.logo-scroller-inner {
    display: flex;
    gap: 4rem;
    width: fit-content;
    animation: scroll 30s linear infinite;
}

.logo-scroller-inner img {
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
    height: 60px;
}

.logo-scroller-inner:hover {
    animation-play-state: paused;
}

.logo-scroller-inner img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* --- Features Section (Modern) --- */
.features.modern-features {
    padding: 100px 0;
    background-color: #f8fafc;
    position: relative;
}

.modern-features .feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.modern-features .feature-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px; /* Slightly tighter radius like the design */
    padding: 24px;
    text-align: left;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: 0 2px 5px rgba(0,0,0,0.04);
}

.modern-features .feature-card:hover { 
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); 
    transform: translateY(-2px);
}

/* Remove the top border accel animation as it wasn't in the provided design */
.modern-features .feature-card::before { display: none; }

.modern-features .feature-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
    line-height: 1.3;
}

.modern-features .feature-card p {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* The visual banner area mimicking "SoundHound AI" box */
.modern-features .feature-visual {
    width: 100%;
    min-height: 100px;
    background-color: #f8fafc; /* Light gray background */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 4px; /* Slight radius on the inner visual */
    font-size: 2.5rem; /* Large icon size */
    color: var(--accent, #333);
    /* Make it fill available vertical space if needed, or fixed height */
    flex-grow: 1; 
}

/* Optional: if you have real images later, you can put an <img> inside .feature-visual */
.modern-features .feature-visual img {

    object-fit: contain;
}

.modern-features .learn-more {
    font-weight: 600;
    color: #2563eb; /* Standard blue link color */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
    margin-top: auto; /* Push to bottom if flex container has height */
}

.modern-features .learn-more i {
    font-size: 0.8em;
    transition: transform 0.2s ease;
}

.modern-features .feature-card:hover .learn-more i {
    transform: translateX(4px);
}

/* Remove old wrapper styles */
.modern-features .feature-icon-wrapper { display: none; }

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-header h2 {
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 1rem;
}

.section-header .section-subtitle {
     color: #64748b; 
     font-size: 1.1rem;
     max-width: 600px;
     margin: 0 auto;
}

@media (max-width: 992px) {
    .modern-features .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .modern-features .feature-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Final CTA Section --- */
.final-cta {
    background-color: var(--dark-color);
    color: var(--light-color);
    padding: 80px 0;
    text-align: center;
}

.final-cta h2 {
    color: var(--light-color);
}

.final-cta p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

/* --- Footer --- */
footer {
    background-color: #f8f9fa;
    padding: 60px 0 20px;
    border-top: 1px solid #e2e8f0;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
}

.footer-column h4 {
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.footer-column ul {
    list-style: none;
}

.footer-column ul li {
    margin-bottom: 0.5rem;
}

.footer-column ul a {
    color: var(--gray-color);
    transition: color 0.3s ease;
}

.footer-column ul a:hover {
    color: var(--primary-color);
}

.subscribe-form {
    display: flex;
    margin-top: 1rem;
}

.subscribe-form input {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    outline: none;
}

.subscribe-form button {
    padding: 10px 15px;
    border: none;
    background: var(--primary-color);
    color: white;
    cursor: pointer;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
    border-top: 1px solid #e2e8f0;
    font-size: 0.9rem;
    color: var(--gray-color);
}

.social-links a {
    margin-left: 1rem;
    color: var(--gray-color);
}

/* --- Modern Dark Footer --- */
.site-footer {
    background: linear-gradient(180deg, #2c2e32 0%, #404348 100%);;
    color: #dbe7f7;
}
.footer-top {
    padding: 60px 0;
}
.footer-top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 320px;
    gap: 2rem;
    align-items: start;
}
.brand-area .brand-desc {
    color: rgba(219,231,247,0.8);
    margin-top: 1rem;
    max-width: 360px;
}
/* footer extras */
.contact-col .flag-list img { margin-right: 8px; vertical-align: middle; }
.contact-col .contact-list { list-style: none; padding: 0; margin-top: 12px; color: rgba(219,231,247,0.9); }
.contact-col .contact-list li { margin-bottom: 8px; }
.contact-col .contact-list a { color: rgba(219,231,247,0.9); }

.subscribe-col .subscribe-form { display: flex; gap: 8px; margin-top: 0.5rem; }
.subscribe-col .subscribe-form input { flex: 1; padding: 10px; border-radius: 6px; border: none; background: rgba(255,255,255,0.05); color: #fff; }

.footer-keywords { padding: 10px 0 26px; }
.footer-keywords .keywords { color: rgba(219,231,247,0.65); font-size: 0.95rem; text-align: center; margin: 0; }
.links-area h5 {
    color: #ffffff;
    margin-bottom: 0.75rem;
}
.links-area ul {
    list-style: none;
    padding: 0;
}
.links-area ul li a {
    color: rgba(219,231,247,0.8);
    display: block;
    padding: 6px 0;
}
.links-area ul li a:hover {
    color: var(--primary-color);
}
.subscribe-area h5 {
    color: #ffffff;
}
.subscribe-form {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
}
.subscribe-form input[type="email"] {
    flex: 1;
    padding: 10px 12px;
    border: none;
    border-radius: 6px;
    background: rgba(255,255,255,0.06);
    color: #fff;
}
.subscribe-form input::placeholder { color: rgba(255,255,255,0.6); }
.subscribe-form .btn-primary { padding: 10px 18px; }
.footer-socials {
    margin-top: 12px;
    display: flex;
    gap: 10px;
}
.footer-socials a { color: rgba(219,231,247,0.8); font-size: 1.05rem; }

.footer-bottom-dark {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 18px 0;
}
.footer-bottom-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer-bottom-grid .policy-links a { color: rgba(219,231,247,0.8); margin-left: 16px; }
.footer-bottom-grid .policy-links a:hover { color: var(--primary-color); }

@media (max-width: 992px) {
    .footer-top-grid { grid-template-columns: 1fr 1fr; }
    .footer-top-grid .brand-area { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
    .footer-top-grid { grid-template-columns: 1fr; }
    .footer-bottom-grid { flex-direction: column; gap: 8px; }
}

/* --- Animations --- */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}


/* --- Responsive Design --- */
@media (max-width: 992px) {
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .nav-links { display: none; } /* Simple hide for mobile, can be replaced with a hamburger menu */
}

@media (max-width: 768px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    .nav-actions { display: none; }
    .feature-grid { grid-template-columns: 1fr; }
    .logos-container { gap: 2rem; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; gap: 1rem; }
    .top-bar-content {
        flex-direction: column;
        align-items: center;
    }

    .contact-details {
        margin-bottom: 10px;
    }
}

/* Mobile navigation styles */
.nav-toggle { display: none; background: transparent; border: none; cursor: pointer; padding: 8px; }
.nav-toggle-bar { width: 22px; height: 2px; background: var(--dark-color); display: block; margin: 3px 0; }

@media (max-width: 992px) {
    .nav-toggle { display: block; }
    /* Fullscreen mobile nav panel */
    .mobile-nav-panel { position: fixed; inset: 0 0 0 0; background: rgba(7,18,36,0.85); z-index: 99999 !important; display: none; }
    .mobile-nav-panel.open { display: block; }
    .mobile-nav-inner { position: fixed; top: 0; left: 0; width: 100%; max-width: 360px; background: #fff; height: 100%; overflow-y: auto; padding: 20px; box-shadow: 6px 0 30px rgba(0,0,0,0.2); }
    .mobile-nav-inner .nav-links { display: block; }
    .mobile-nav-inner .nav-links li { margin: 0 0 8px 0; border-bottom: 1px solid #f0f0f0; padding-bottom: 8px; }
    .mobile-nav-inner .nav-links a { color: #0b1220; display: block; padding: 8px 0; }
    .mobile-nav-inner .has-megamenu .mega-menu { position: static; display: none; box-shadow: none; background: transparent; padding: 0; }
    .mobile-nav-inner .has-megamenu.open .mega-menu { display: block; }
    .mega-menu { width: auto; }
}

/* prevent background scrolling when mobile nav open */
.mobile-nav-open { overflow: hidden; height: 100%; }

/* Mobile overrides to simplify mega-menus inside the mobile nav */
@media (max-width: 992px) {
    /* Make any mega-menu content simple and stacked */
    .mobile-nav-inner .mega-menu { background: transparent !important; padding: 0 !important; box-shadow: none !important; }

    .mobile-nav-inner .products-mega,
    .mobile-nav-inner .hosting-mega,
    .mobile-nav-inner .webdesign-mega,
    .mobile-nav-inner .its-mega,
    .mobile-nav-inner .support-mega { width: 100% !important; }

    .mobile-nav-inner .products-grid,
    .mobile-nav-inner .webdesign-grid,
    .mobile-nav-inner .hosting-grid,
    .mobile-nav-inner .its-grid,
    .mobile-nav-inner .support-grid,
    .mobile-nav-inner .products-mega .products-grid { display: block; grid-template-columns: 1fr !important; gap: 8px !important; }

    /* Simplify card visuals for mobile: remove borders and logos/thumbs to keep list clean */
    .mobile-nav-inner .product-card,
    .mobile-nav-inner .hosting-card,
    .mobile-nav-inner .design-card,
    .mobile-nav-inner .its-card,
    .mobile-nav-inner .sp-card { background: transparent !important; border: none !important; box-shadow: none !important; padding: 6px 0 !important; }

    .mobile-nav-inner .product-logo,
    .mobile-nav-inner .dc-thumb { display: none !important; }

    /* Ensure links are full width and easy to tap */
    .mobile-nav-inner .mega-menu a { display: block; padding: 8px 0; color: #0b1220; }
}

/* Mobile submenu toggle styling */
@media (max-width: 992px) {
    .mobile-submenu { display: none; list-style: none; padding-left: 12px; margin: 8px 0 0 0; }
    .mobile-submenu li { padding: 6px 0; border-bottom: 1px dashed #eee; }
    .mobile-submenu li a { padding: 6px 0; }
    .nav-links li.open > .mobile-submenu { display: block; }
    .submenu-toggle { float: right; margin-left: 8px; font-size: 0.9rem; color: #6b7280; }
}


@media (max-width: 480px) {
    .cta-buttons { flex-direction: column; }
}

/* --- Mega Menu --- */
.has-megamenu {
    position: relative;
}

.mega-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    background-color: var(--dark-color);
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    padding: 2rem;
    display: flex;
    gap: 2rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    margin-top: 10px; /* space between nav and menu */
}

.has-megamenu:hover .mega-menu {
    display: flex;
    opacity: 1;
    visibility: visible;
    margin-top: 0;
}

.mega-menu-column {
    flex: 1;
}

.mega-menu-column h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--light-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mega-menu-column h4 i {
    color: var(--primary-color);
}

.mega-menu-column ul {
    list-style: none;
}

.mega-menu-column ul li {
    margin-bottom: 0.75rem;
}

.mega-menu-column ul a {
    color: #adb5bd; /* Lighter gray for dark background */
    font-weight: 400;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

.mega-menu-column ul a:hover {
    color: var(--light-color);
}

/* Products mega-grid card style */
.products-mega { padding: 18px 20px; background: #fff; color: #0b1220; width: 820px; }
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.product-card { display: flex; flex-direction: column; justify-content: flex-start; gap: 12px; padding: 18px; border-radius: 14px; border: 1px solid rgba(11,18,32,0.06); background: #fff; text-decoration: none; color: inherit; min-height: 140px; }
.product-card:hover { box-shadow: 0 10px 30px rgba(2,6,23,0.06); transform: translateY(-4px); transition: all 180ms ease; }
.product-info h5 { margin: 0 0 6px 0; font-size: 1rem; font-weight: 700; }
.product-info p { margin: 0; font-size: 0.9rem; color: #69707a; }
.product-logo { display: block; margin-top: auto; align-self: flex-end; }
.product-logo img { width: 84px; height: auto; display: block; opacity: 0.95; }

@media (max-width: 992px) {
    .products-mega { width: 100%; }
    .products-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .products-grid { grid-template-columns: 1fr; }
}

/* Hosting mega-menu styles */
.hosting-mega { padding: 18px 20px; background: #fff; color: #0b1220; width: 860px; }
.hosting-grid { display: grid; grid-template-columns: 1fr 340px; gap: 18px; }
.hosting-column h4 { margin: 0 0 8px 0; font-size: 1rem; }
.hosting-cards { display: flex; flex-direction: column; gap: 12px; }
.hosting-card { padding: 12px; border-radius: 10px; border: 1px solid rgba(11,18,32,0.06); background: #fff; text-decoration: none; color: inherit; }
.hosting-card.recommended { border: 1px solid rgba(36,96,233,0.12); box-shadow: 0 8px 30px rgba(36,96,233,0.06); }
.hc-header { display:flex; justify-content: space-between; align-items: center; gap: 8px; }
.hc-badge { background: #ee5353; color: #fff; font-size: 0.75rem; padding: 4px 8px; border-radius: 999px; }
.hc-meta { margin-top: 8px; color: #374151; font-size: 0.95rem; }
.hosting-links { list-style: none; padding: 0; margin: 8px 0 16px 0; }
.hosting-links li { margin-bottom: 8px; }
.hosting-links li a { color: #0b1220; }
.hosting-cta { display:flex; gap: 8px; }

@media (max-width: 992px) {
    .hosting-mega { width: 100%; }
    .hosting-grid { grid-template-columns: 1fr; }
}

/* Web Design mega-menu styles (advanced view) */
.webdesign-mega { padding: 18px 20px; background: #fff; color: #0b1220; width: 980px; }
.webdesign-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; align-items: start; }
.wd-column h4 { margin: 0 0 8px 0; font-size: 1rem; }
.wd-services ul, .wd-tools ul { list-style: none; padding: 0; margin: 0; }
.wd-services li, .wd-tools li { margin-bottom: 8px; }
.design-cards { display: grid; grid-template-columns: 1fr; gap: 10px; }
.design-card { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 10px; border: 1px solid rgba(11,18,32,0.06); text-decoration: none; color: inherit; }
.dc-thumb img { width: 64px; height: 64px; object-fit: contain; display: block; }
.dc-body strong { display: block; font-size: 0.98rem; }
.dc-body span { color: #6b7280; font-size: 0.9rem; }
.wd-cta { margin-top: 12px; display:flex; gap: 8px; }

@media (max-width: 992px) {
    .webdesign-mega { width: 100%; }
    .webdesign-grid { grid-template-columns: 1fr; }
}

/* IT Service Management mega-menu styles */
.its-mega { padding: 18px 20px; background: #fff; color: #0b1220; width: 820px; }
.its-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.its-services ul { list-style: none; padding: 0; margin: 0; }
.its-services li { display: flex; gap: 12px; margin-bottom: 12px; }
.its-icon { width: 44px; height: 44px; background: #f1f5f9; border-radius: 8px; display:flex; align-items:center; justify-content:center; color:#245CE9; font-size: 1.05rem; }
.its-desc { margin: 4px 0 0 0; color: #6b7280; font-size: 0.9rem; }
.its-highlights { display: flex; flex-direction: column; gap: 10px; }
.its-card { padding: 12px; border-radius: 10px; border: 1px solid rgba(11,18,32,0.06); background: #fff; }
.its-card strong { display:block; margin-bottom:6px; }
.its-cta { display:flex; gap: 8px; margin-top:6px; }

@media (max-width: 992px) {
    .its-mega { width: 100%; }
    .its-grid { grid-template-columns: 1fr; }
}

/* Support mega-menu styles */
.support-mega { padding: 18px 20px; background: #fff; color: #0b1220; width: 720px; }
.support-grid { display: grid; grid-template-columns: 1fr 320px; gap: 18px; }
.support-links ul { list-style: none; padding: 0; margin: 0; }
.support-links li { margin-bottom: 8px; }
.support-panel { display:flex; flex-direction: column; gap: 12px; }
.sp-card { padding: 12px; border-radius: 10px; border: 1px solid rgba(11,18,32,0.06); background: #fff; }
.sp-title { font-weight: 700; margin-bottom:6px; }
.sp-desc { color: #6b7280; margin-bottom: 8px; }
.sp-contact { display:flex; flex-direction: column; gap: 8px; }
.sp-phone a { color: #0b1220; font-weight: 700; }

@media (max-width: 992px) {
    .support-mega { width: 100%; }
    .support-grid { grid-template-columns: 1fr; }
}

/* --- Why Choose Us Section --- */
.why-choose-us {
    padding: 80px 0;
    background: linear-gradient(135deg, #0f1724 0%, #0b1220 40%, #071226 100%);
    color: #e6f0ff;
}

.why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.why-media {
    display: flex;
    align-items: center;
    justify-content: center;
}

.why-hero-image {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 50px rgba(2,6,23,0.6);
}

.why-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(0.95) contrast(1.02);
}

.why-overlay {
    position: absolute;
    left: 16px;
    bottom: 16px;
    background: rgba(3,7,18,0.6);
    color: #e6f0ff;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    backdrop-filter: blur(6px);
}

.why-cards h2 {
    color: #f8fbff;
    text-align: left;
    margin-bottom: 0.5rem;
}

.why-cards .section-subtitle {
    color: rgba(230,240,255,0.85);
    margin-bottom: 1.5rem;
    text-align: left;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.why-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.04);
    padding: 18px;
    border-radius: 10px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.card-icon {
    width: 46px;
    height: 46px;
    background: linear-gradient(135deg,#2348a6,#5f2dbe);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1.2rem;
}

.why-card h3 {
    margin: 0 0 6px 0;
    font-size: 1rem;
    color: #f8fbff;
}

.why-card p {
    margin: 0;
    color: rgba(230,240,255,0.8);
    font-size: 0.95rem;
}

.why-cards .btn-secondary { margin-top: 10px; }
/* --- Testimonials Section --- */
.testimonials {
    padding: 80px 0;
    background-color: #f8fafc;
}

.testimonials h2 { color: #071226; font-size: 1.75rem; margin-bottom: 0.25rem; text-align:center; }
.testimonials .section-subtitle { color: #64748b; margin-bottom: 1.5rem; text-align:center; }

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.testimonial-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 6px 20px rgba(2,6,23,0.06);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 260ms ease, box-shadow 260ms ease;
}
.testimonial-card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(2,6,23,0.12); }

.testimonial-card .quote {
    color: #0b1220;
    font-size: 0.98rem;
    line-height: 1.6;
    margin: 0;
}

.testimonial-card .author {
    display:flex;
    gap: 12px;
    align-items: center;
    margin-top: 8px;
}

.testimonial-card .author img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; border: 2px solid #f1f6fb; }
.testimonial-card .author h4 { margin: 0; font-size: 0.95rem; }
.testimonial-card .author span { color: #64748b; font-size: 0.85rem; }

/* Make it responsive */
@media (max-width: 1100px) {
    .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
    .testimonials-grid { grid-template-columns: 1fr; }
}

/* Backwards-compatible legacy class (single big quote) */
.testimonial-card-modern { display:none; }


.testimonial-card-modern .author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.testimonial-card-modern .author img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid var(--primary-color);
}

.testimonial-card-modern .author h4 {
    margin: 0;
    font-size: 1.1rem;
}

.testimonial-card-modern .author span {
    color: var(--gray-color);
}

/* --- News / Blog Section --- */
.news-section {
    padding: 80px 0;
    background-color: #ffffff;
}

.news-section h2 {
    text-align: center;
    margin-bottom: 0.25rem;
}

.news-section .section-subtitle {
    text-align: center;
    color: var(--gray-color);
    margin-bottom: 2rem;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

.news-card {
    background: #f8fafc;
    border-radius: 0; /* sharp corners as requested */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(16,24,40,0.06);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    display: flex;
    flex-direction: column;
}

.news-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(16,24,40,0.12);
}

.news-image img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}

/* place the image at the bottom visually */
.news-card { position: relative; }
.news-body { order: 1; }
.news-image { order: 2; }

/* red bottom border layer */
.news-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: #d9302c; /* red accent */
}

.news-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
}

.news-date {
    font-size: 0.85rem;
    color: var(--gray-color);
}

.news-title {
    font-size: 1.1rem;
    margin: 0;
    color: var(--dark-color);
}

.news-excerpt {
    color: #475569;
    flex-grow: 1;
}

.news-card .learn-more {
    margin-top: 0.75rem;
    font-weight: 700;
    color: var(--primary-color);
}

@media (max-width: 992px) {
    .news-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .news-grid { grid-template-columns: 1fr; }
    .why-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* New Why Regoora - Modern split layout */
.why-modern {
    padding: 80px 0;
    background: linear-gradient(180deg, #071026 0%, #081226 100%);
    color: #eaf2ff;
}

.why-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
}

.why-left h2 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.section-subtitle { color: rgba(234,242,255,0.85); margin-bottom: 1.25rem; }

.feature-list { display: flex; flex-direction: column; gap: 1rem; }
.feature-item { display: flex; gap: 1rem; align-items: flex-start; }
.fi-icon { width: 52px; height: 52px; border-radius: 10px; background: linear-gradient(135deg,#ff5a5f,#ff7a7f); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.2rem; flex-shrink: 0; }
.fi-content h3 { margin: 0 0 6px 0; font-size: 1.02rem; color: #fff; }
.fi-content p { margin: 0; color: rgba(234,242,255,0.85); font-size: 0.95rem; }

.why-cta { margin-top: 1.25rem; display: flex; gap: 0.75rem; }

.why-right .visual-wrap { position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 40px rgba(2,6,23,0.6); }
.why-right img { width: 100%; height: 100%; object-fit: cover; display: block; }

.stat-badges { position: absolute; left: 16px; bottom: 16px; display: flex; gap: 10px; }
.stat { background: rgba(255,255,255,0.06); color: #fff; padding: 8px 12px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; font-weight: 700; min-width: 72px; }
.stat span { font-weight: 500; font-size: 0.8rem; color: rgba(234,242,255,0.85); margin-top: 4px; }

@media (max-width: 992px) {
    .why-split { grid-template-columns: 1fr; }
    .stat-badges { left: 12px; bottom: 12px; gap: 8px; }
}

/* Modern Why Regoora styles */

.why-modern {
    /* full-width hero background with fixed attachment (desktop) */
    padding: 17px 0;
    color: #eaf2ff;
    position: relative;
    
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

/* subtle dark overlay so text remains readable */
.why-modern::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6,10,20,0.6), rgba(6,10,20,0.7));
    pointer-events: none;
}

.why-modern-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    align-items: start;
    position: relative; /* above overlay */
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.why-content h2 { text-align: center; font-size: 2.4rem; margin-bottom: 8px; color: #ffffff; }

/* Enhanced intro styling for clarity and emphasis */
.why-modern .section-subtitle { color: rgba(234,242,255,0.95); font-size: 1.05rem; font-weight: 600; max-width: 760px; margin: 0 auto 12px; text-align: center; }
.why-modern .lead { color: rgba(234,242,255,0.92); margin: 0 auto 20px; font-size: 1.05rem; max-width: 760px; text-align: center; font-weight: 500; line-height: 1.6; }

.why-choose-us .why-cta .btn-primary { background: #ffffff; color: #071226; padding: 12px 22px; border-radius: 10px; box-shadow: 0 10px 30px rgba(2,6,23,0.28); border: none; font-weight: 700; }
.why-choose-us .why-cta .btn-secondary { background: transparent; color: rgba(234,242,255,0.95); border: 1px solid rgba(255,255,255,0.12); padding: 10px 18px; border-radius: 10px; }

/* Make sure lead and subtitle stack nicely on narrow screens */
@media (max-width: 768px) {
    .why-modern .section-subtitle, .why-modern .lead { text-align: center; max-width: 100%; padding: 0 12px; }
}

.why-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 28px; }
.why-card {
    /* user-requested white gradient background and black text */
    background: linear-gradient(180deg, rgb(255 255 255), rgb(255 255 255 / 82%));
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(2,6,23,0.12);
    color: #0b1220; /* primary black text */
    transition: transform 260ms cubic-bezier(.2,.8,.2,1), box-shadow 260ms;
    display: flex;
    flex-direction: column;
    min-height: 380px; /* maintain vertical space */
}
.why-card:hover { transform: translateY(-8px); box-shadow: 0 28px 56px rgba(2,6,23,0.14); }
.wc-thumb { width: 100%; height: 220px; overflow: hidden; background: #0b1220; }
.wc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 420ms cubic-bezier(.2,.8,.2,1); }
.why-card:hover .wc-thumb img { transform: scale(1.06); }
.wc-body { padding: 20px 22px 24px 22px; display: flex; flex-direction: column; justify-content: flex-start; }
.why-card h3 { margin: 0 0 10px 0; font-size: 1.15rem; color: #0b1220; }
.why-card p { margin: 0; color: rgba(11,18,32,0.85); font-size: 1rem; line-height: 1.6; }

.why-visual { display: none; }
.floating-stats { display: none; }
.decor-blob { display: none; }

@media (max-width: 1100px) {
    .why-modern-grid { grid-template-columns: 1fr; }
    .why-cards { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media (max-width: 768px) {
    .why-modern { background-attachment: scroll; padding: 80px 0; }
    .why-modern-grid { gap: 22px; }
    .why-cards { grid-template-columns: 1fr; }
    .why-card { min-height: auto; }
    .why-content h2 { text-align: center; }
    .why-content { text-align: center; }
}

/* Page-specific creative flourishes for WordPress page */
.wp-hero h1 { letter-spacing: -0.02em; }
.wp-overview h2, .wp-services h2, .wp-portfolio h2, .wp-pricing h2, .wp-testimonials h2, .wp-faq h2 { color: #fff; }
.wp-overview { background: linear-gradient(180deg, rgba(6,10,20,0.35), rgba(6,10,20,0.0)); }

/* Attractive background and translucent panel for overview */
.wp-overview {
    background-image: url('../images/section23.jpg');
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

.wp-overview::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7,16,38,0.55), rgba(7,16,38,0.55));
    pointer-events: none;
}

.wp-overview-panel {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.92));
    padding: 28px;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(2,6,23,0.12);
    color: #0b1220;
    max-width: 620px;
}

.wp-overview-panel h2 { color: #0b1220; margin-bottom:6px; }
.wp-overview-panel .section-subtitle { color: rgba(11,18,32,0.8); }

/* Accent and CTA inside overview panel — match homepage button colors */
.wp-overview-panel { border-left: 4px solid #ee5353; }
.wp-overview-panel .panel-cta { margin-top:18px; display:flex; gap:10px; }
.wp-overview-panel .btn { padding:8px 16px; border-radius:8px; }
.wp-overview-panel .btn-primary { background-color: #ee5353; color: #fff; border-color: #ee5353; }
.wp-overview-panel .btn-secondary { background-color: var(--secondary-color); color: #ee5353; border: 2px solid #ee5353; }

@media (max-width: 900px) {
    .wp-overview { background-attachment: scroll; }
    .wp-overview-panel { margin-bottom: 18px; }
}
.wp-services { background: linear-gradient(180deg, #f9fbff, #f4f8ff); }

/* Redesigned 'What we deliver' section */
.wp-services h2 { color: #0b1220; font-size: 2rem; margin-bottom: 6px; }
.wp-services .section-subtitle { color: #4b5563; margin-bottom: 18px; }

.wp-services .service-grid { margin-top: 28px; }
.service-card {
    background: linear-gradient(180deg, #ffffff, #fbfdff);
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 10px 30px rgba(11,18,32,0.06);
    transition: transform 260ms cubic-bezier(.2,.8,.2,1), box-shadow 260ms;
    transform: translateY(6px);
    opacity: 0;
}
.service-card:hover { transform: translateY(-8px); box-shadow: 0 28px 60px rgba(11,18,32,0.10); }

/* Accent stripe and subtle icon area (optional) */
.service-card::before {
    content: '';
    display: block;
    width: 48px;
    height: 6px;
    background: linear-gradient(90deg,#ee5353,#ff7a7f);
    border-radius: 4px;
    margin-bottom: 12px;
}

/* Fade-up animation for cards with gentle stagger */
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.service-card.animated { animation: fadeUp 560ms cubic-bezier(.2,.8,.2,1) both; }
.service-card.animated:nth-child(1) { animation-delay: 0.06s; }
.service-card.animated:nth-child(2) { animation-delay: 0.15s; }
.service-card.animated:nth-child(3) { animation-delay: 0.24s; }

/* Apply animated class when visible: fallback to trigger on load - keep graceful */
.wp-services .service-card { opacity: 1; transform: translateY(0); }
.wp-services .service-card.animated { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .service-card, .service-card::before { animation: none !important; transition: none !important; }
}

/* Decorative floating shapes */
.decor-shapes { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.decor-shapes .shape { position: absolute; border-radius: 50%; opacity: 0.14; filter: blur(18px); transform: translate3d(0,0,0); }
.decor-shapes .shape-a { width: 220px; height: 220px; left: -40px; top: -40px; background: radial-gradient(circle at 30% 30%, #6f42c1, transparent 40%); animation: floatSlow 12s ease-in-out infinite; }
.decor-shapes .shape-b { width: 180px; height: 180px; right: -30px; bottom: -30px; background: radial-gradient(circle at 60% 60%, #ff6b6b, transparent 40%); animation: floatRev 10s ease-in-out infinite; }

@keyframes floatSlow { 0% { transform: translateY(0px) translateX(0px); } 50% { transform: translateY(18px) translateX(6px); } 100% { transform: translateY(0px) translateX(0px); } }
@keyframes floatRev { 0% { transform: translateY(0px) translateX(0px) rotate(0deg); } 50% { transform: translateY(-16px) translateX(-8px) rotate(6deg); } 100% { transform: translateY(0px) translateX(0px) rotate(0deg); } }

/* ensure accessibility: respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .decor-shapes .shape { animation: none !important; }
}

/* Elevate content above shapes */
.wp-overview .container, .wp-hero .container { position: relative; z-index: 2; }

/* Improve card contrast on light backgrounds */
.service-card h3, .service-card p { color: #0b1220; }
.custom-hero {
    padding: 84px 0;
    background-image: linear-gradient(180deg, rgba(6,10,20,0.6), rgba(6,10,20,0.6)), url('https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=1800&q=80');
    background-size: cover;
    background-position: center center;
    color: #fff;
    text-align: center;
}
.custom-hero h1 { font-size: 2.6rem; margin-bottom: 8px; }
.custom-hero p { color: rgba(255,255,255,0.92); margin-bottom: 16px; }

.cw-features { display: grid; grid-template-columns: repeat(3,1fr); gap:20px; margin-top:28px; }
.feature-card {
    /* gradient border container */
    position: relative;
    border-radius: 16px;
    padding: 2px; /* for gradient border */
    background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(250,250,252,0.95));
    box-shadow: 0 12px 36px rgba(11,18,32,0.06);
    overflow: hidden;
    transform-style: preserve-3d;
}
.feature-card > * { position: relative; z-index: 2; }
.feature-card::before {
    /* inner panel to create border effect */
    content: '';
    position: absolute; inset: 0; border-radius: 14px; padding: 1px;
    background: linear-gradient(135deg, rgba(255,82,83,0.12), rgba(79,70,229,0.06));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    pointer-events: none;
}
.feature-card .feature-inner {
    background: linear-gradient(180deg,#fff,#fbfdff);
    border-radius: 12px;
    padding: 22px;
    min-height: 140px;
    display: flex; flex-direction: column; gap:10px;
    transition: transform 280ms cubic-bezier(.2,.8,.2,1), box-shadow 280ms;
}
.feature-card .feature-accent { width:56px; height:6px; border-radius:6px; background:linear-gradient(90deg,#ee5353,#ff7a7f); margin-bottom:6px; }
.feature-card .feature-title { font-size:1.1rem; color:#0b1220; margin:0 0 6px 0; }
.feature-card .feature-desc { color:#475569; margin:0; }
.feature-card:hover .feature-inner { transform: translateY(-8px) translateZ(8px); box-shadow:0 30px 70px rgba(11,18,32,0.08); }

/* 3D tilt transform applied by JS */
.feature-card.tilt { will-change: transform; }

/* stagger reveal helpers */
.feature-card { --delay: 0s; opacity: 0; transform: translateY(18px); }
.feature-card.in-view { opacity: 1; transform: translateY(0); transition: opacity 560ms cubic-bezier(.2,.8,.2,1) var(--delay), transform 560ms cubic-bezier(.2,.8,.2,1) var(--delay); }
.feature-card.in-view .feature-inner { transition-delay: var(--delay); }

@media (max-width: 980px) {
    .cw-features { grid-template-columns: 1fr; }
}

/* Miracle background for the features section (dark, magical theme) */
.miracle-section {
    position: relative;
    padding: 28px 0 20px 0;
   
    overflow: hidden; /* contain off-canvas glow elements to avoid horizontal scroll */
    background: linear-gradient(180deg, #070617 0%, #0b0920 100%);
    color: #eaf2ff;
}
.miracle-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.miracle-bg::before, .miracle-bg::after {
    content: '';
    position: absolute;
    width: 60%;
    height: 80%;
    top: -6%;
    left: -10%;
    /* richer, saturated radial glows for a night / magical look */
    background:
        radial-gradient(circle at 18% 24%, rgba(111,66,193,0.42), transparent 22%),
        radial-gradient(circle at 50% 60%, rgba(16,185,129,0.26), transparent 26%),
        radial-gradient(circle at 78% 78%, rgba(255,145,120,0.20), transparent 28%);
    filter: blur(64px) saturate(140%);
    transform: translate3d(0,0,0);
    animation: bgMove 26s ease-in-out infinite alternate;
    mix-blend-mode: screen;
    opacity: 0.98;
}
.miracle-bg::after {
    left: auto; right: -6%; top: 6%; width: 58%; height: 72%; animation-duration: 30s; background:
        radial-gradient(circle at 22% 18%, rgba(99,102,241,0.36), transparent 20%),
        radial-gradient(circle at 72% 72%, rgba(254,202,87,0.18), transparent 22%),
        radial-gradient(circle at 50% 40%, rgba(255,107,107,0.16), transparent 26%);
}

/* glowing, twinkling particles */
.miracle-bg .particle {
    position: absolute;
    width:10px;
    height:10px;
    border-radius:50%;
    filter: blur(2px) saturate(140%);
    animation: particleDrift 10s ease-in-out infinite, particleTwinkle 3.6s ease-in-out infinite;
    box-shadow: 0 0 18px rgba(0,0,0,0.25);
}
.miracle-bg .particle.p1 { left:12%; top:40%; background: radial-gradient(circle, rgba(111,66,193,0.95), rgba(111,66,193,0.45)); animation-delay: 0s, 0s; box-shadow: 0 0 36px rgba(111,66,193,0.22); }
.miracle-bg .particle.p2 { left:28%; top:72%; background: radial-gradient(circle, rgba(16,185,129,0.96), rgba(16,185,129,0.45)); animation-delay: 1.2s, 0.5s; box-shadow: 0 0 36px rgba(16,185,129,0.18); }
.miracle-bg .particle.p3 { left:64%; top:22%; background: radial-gradient(circle, rgba(255,107,107,0.96), rgba(255,107,107,0.45)); animation-delay: 2.6s, 1.1s; box-shadow: 0 0 36px rgba(255,107,107,0.18); }
.miracle-bg .particle.p4 { left:78%; top:56%; background: radial-gradient(circle, rgba(99,102,241,0.96), rgba(99,102,241,0.45)); animation-delay: 3.9s, 1.8s; box-shadow: 0 0 36px rgba(99,102,241,0.18); }

@keyframes bgMove { 0% { transform: translateY(0) scale(1); } 100% { transform: translateY(-36px) scale(1.03); } }
@keyframes particleDrift { 0% { transform: translateY(0) translateX(0) scale(0.85); opacity:0.65 } 50% { transform: translateY(-28px) translateX(10px) scale(1.06); opacity:1 } 100% { transform: translateY(0) translateX(0) scale(0.85); opacity:0.65 } }
@keyframes particleTwinkle { 0% { opacity: 0.6; transform: scale(0.85); } 45% { opacity: 1; transform: scale(1.15); } 100% { opacity: 0.6; transform: scale(0.85); } }

/* Make sure content sits above the background */
.miracle-section .cw-features, .miracle-section .cw-process { position: relative; z-index: 2; }

/* Adjust panels & cards to read on dark background */
.ms-inner { display:grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; position: relative; z-index:2; }
.ms-panel {
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    padding:24px;
    border-radius:12px;
    box-shadow:0 20px 60px rgba(2,6,23,0.48);
    border: 1px solid rgba(255,255,255,0.04);
    color: #eaf2ff;
    position: relative; overflow: visible;
}
.miracle-section .ms-panel { /* extra creative treatments only in dark miracle section */
    padding:28px 26px;
}

/* glowing accent orb */
.miracle-section .ms-panel::before {
    content: '';
    position: absolute;
    left: -22px;
    top: -22px;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(111,66,193,0.85), rgba(79,70,229,0.28));
    filter: blur(22px) saturate(140%);
    mix-blend-mode: screen;
    opacity: 0.95;
    transform: translateZ(0);
    animation: orbPulse 6.8s ease-in-out infinite;
}

/* subtle diagonal sheen */
.miracle-section .ms-panel::after {
    content: '';
    position: absolute;
    right: -10%;
    bottom: -8%;
    width: 220px;
    height: 220px;
    background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));
    transform: rotate(12deg);
    filter: blur(22px);
    opacity: 0.5;
    pointer-events: none;
}

@keyframes orbPulse { 0% { transform: translateY(0) scale(0.98); opacity:0.92 } 50% { transform: translateY(-8px) scale(1.03); opacity:1 } 100% { transform: translateY(0) scale(0.98); opacity:0.92 } }

/* drop-cap for the lead paragraph */


/* animated underline for the ms-title */
.miracle-section .ms-title { position: relative; display: inline-block; padding-bottom: 6px; }
.miracle-section .ms-title::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    height: 4px; width: 56px; border-radius:4px;
    background: linear-gradient(90deg, rgba(255,122,122,0.95), rgba(111,66,193,0.95));
    transform-origin: left; transform: scaleX(0.86);
    transition: transform 360ms cubic-bezier(.2,.8,.2,1), opacity 360ms;
    opacity: 0.98;
}
.miracle-section .ms-panel:hover .ms-title::after { transform: scaleX(1.18); }

/* list bullet accents */
.miracle-section .ms-list { display:block; }
.miracle-section .ms-list li { position: relative; padding-left: 24px; margin-bottom: 10px; color: #ffffff; }
.miracle-section .ms-list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 10px; height: 10px; border-radius:50%; background: linear-gradient(90deg, rgba(255,122,122,0.98), rgba(111,66,193,0.98)); box-shadow: 0 6px 18px rgba(111,66,193,0.12); }
.miracle-section .ms-list li:hover::before { transform: scale(1.18); transition: transform 220ms ease; }

/* reduce motion preference */
@media (prefers-reduced-motion: reduce) {
    .miracle-section .ms-panel::before, .miracle-section .ms-panel::after, .miracle-section .ms-panel:hover .ms-title::after { animation: none !important; transition: none !important; }
}
.ms-title { font-size:1.6rem; margin:0 0 8px 0; color:#fff; }
.ms-lead { color:#d6e9ff; margin-bottom:12px; }
.ms-list { list-style: none; padding-left:0; margin: 0 0 12px 0; color:#cfe8ff; }
.ms-list li { margin-bottom:8px; }
.ms-actions .btn { box-shadow: 0 10px 30px rgba(15,23,42,0.45); }

.svc-card {
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 28px 80px rgba(2,6,23,0.48);
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    display:flex; gap:12px;
    border: 1px solid rgba(255,255,255,0.04);
    color: #eaf2ff;
    margin: 3px;
}
.svc-body { padding:14px; display:flex; flex-direction:column; justify-content:center; }
.svc-body h4 { margin:0 0 8px 0; color:#fff; }
.svc-body p { margin:0; color:#cfe1ff; }

/* gentle float for svc-cards when idle (subtle on dark) */
@keyframes svcFloat { 0% { transform: translateY(0); } 50% { transform: translateY(-8px); } 100% { transform: translateY(0); } }
.svc-card.idle { animation: svcFloat 8s ease-in-out infinite; }

/* floating decorative cards */
.magic-card { position:absolute; width:160px; height:100px; border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(250,250,252,0.95)); box-shadow:0 26px 60px rgba(2,6,23,0.08); transform:rotate(-6deg); opacity:0.9; }
.magic-card.floating-a { right: -40px; top: -24px; transform: rotate(-6deg) translateZ(0); max-width: calc(100% + 40px); }
.magic-card.floating-b { right: -12px; bottom: -34px; transform: rotate(6deg) translateZ(0); max-width: calc(100% + 12px); }

@media (max-width: 980px) {
    .ms-inner { grid-template-columns: 1fr; }
}

/* --- Creative Process Section --- */
.cw-brief {
    position: relative;
    padding: 80px 0;
    background: linear-gradient(180deg, #081226 0%, #071026 100%);
    color: #eaf2ff;
    overflow: hidden;
}

.cw-brief h2 {
    color: #fff;
    text-align: center;
    margin-bottom: 1rem;
}

.cw-brief .section-subtitle {
    text-align: center;
    color: rgba(234, 242, 255, 0.85);
    margin-bottom: 3rem;
}

.creative-process-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.process-steps {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.process-step-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    transition: all 0.3s ease;
    position: relative;
}

.process-step-card:hover {
    transform: translateY(-5px) scale(1.02);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
    box-shadow: 0 20px 50px rgba(2, 6, 23, 0.5);
}

.process-step-num {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #ee5353, #ff7a7f);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 5px 15px rgba(238, 83, 83, 0.3);
}

.process-step-body h4 {
    font-size: 1.1rem;
    color: #fff;
    margin: 0 0 0.5rem 0;
}

.process-step-body p {
    margin: 0;
    color: rgba(234, 242, 255, 0.8);
}

.process-visual {
    position: relative;
    border-radius: 12px;
.feature-band .lead { color: #1b2a4a; font-size:1.05rem; margin-bottom:1rem }
.split-grid { display:grid; grid-template-columns: 1fr 1fr; gap:24px; align-items:center; }
.split-grid .media-card { border-radius:12px; overflow:hidden; box-shadow:0 8px 30px rgba(15,23,42,0.06); }
.media-card img { width:100%; display:block; height:220px; object-fit:cover; }
.media-card figcaption{ padding:10px 12px; font-size:0.9rem; color:rgba(11,21,48,0.75); }
.cards-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; margin:28px 0; }
.cards-grid .card { background:#ffffff; border:1px solid rgba(15,23,42,0.04); padding:18px; border-radius:10px; box-shadow:0 6px 18px rgba(11,21,48,0.04); }
.cards-grid .card h3 { margin-top:0; color:#10264a }
.container-sm { max-width:900px; margin:0 auto; }
.process-steps { display:flex; gap:18px; margin-top:18px; }
.process-steps .step { background:linear-gradient(180deg,#fff,#fbfdff); border-radius:10px; padding:14px; border:1px solid rgba(11,21,48,0.04); flex:1; box-shadow:0 8px 30px rgba(11,21,48,0.03); }
.process-steps .badge { display:inline-block; background:#0b64d6;color:#fff;border-radius:999px;padding:8px 12px;font-weight:700;margin-bottom:8px }
.fs-gallery { margin-top:28px }
.gallery-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:12px; }
.gallery-grid img { width:100%; height:140px; object-fit:cover; border-radius:8px; box-shadow:0 6px 18px rgba(11,21,48,0.04); }
.fs-contact.band { margin-top:32px; padding:26px 0; background:linear-gradient(180deg,#0b1540,#08102b); color:#fff; border-radius:10px; }
.fs-contact .split-grid { grid-template-columns:1fr 320px }
.fs-contact h3, .fs-contact h4 { color:#fff }
.fs-contact p { color:rgba(255,255,255,0.9) }

@media (max-width:900px){
    .split-grid { grid-template-columns:1fr }
    .cards-grid { grid-template-columns: repeat(2,1fr) }
    .gallery-grid { grid-template-columns: repeat(2,1fr) }
}
@media (max-width:520px){
    .cards-grid { grid-template-columns: 1fr }
    .gallery-grid { grid-template-columns: 1fr }
}
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(2, 6, 23, 0.6);
}

.process-visual img {
    width: 100%;
    display: block;
    border-radius: 12px;
}

.video-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.video-play-button:hover {
    transform: translate(-50%, -50%) scale(1.1);
    background: #fff;
}

.video-play-button::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 20px solid #ee5353;
    margin-left: 5px;
}

.process-cta {
    text-align: center;
    margin-top: 2rem;
}

/* Light theme variant for Creative Process (opposite of dark) */
.cw-brief.light-theme {
    background: linear-gradient(180deg, #f7fafc 0%, #eef2f7 100%);
    color: #0b132b;
}

.cw-brief.light-theme h2 { color: #0b132b; }
.cw-brief.light-theme .section-subtitle { color: rgba(11, 19, 43, 0.7); }

.cw-brief.light-theme .process-step-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.94));
    border: 1px solid rgba(2, 6, 23, 0.06);
    box-shadow: 0 14px 36px rgba(2, 6, 23, 0.08);
}
.cw-brief.light-theme .process-step-card:hover {
    transform: translateY(-5px) scale(1.02);
    background: #ffffff;
    box-shadow: 0 20px 48px rgba(2, 6, 23, 0.12);
}

.cw-brief.light-theme .process-step-num {
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #7c3aed);
    box-shadow: 0 5px 15px rgba(99, 102, 241, 0.25);
}

.cw-brief.light-theme .process-step-body h4 { color: #0b132b; }
.cw-brief.light-theme .process-step-body p { color: rgba(11, 19, 43, 0.7); }

.cw-brief.light-theme .process-visual { box-shadow: 0 16px 44px rgba(2, 6, 23, 0.12); }
.cw-brief.light-theme .video-play-button {
    background: rgba(255,255,255,0.96);
}
.cw-brief.light-theme .video-play-button::before { border-left-color: #6366f1; }

@media (max-width: 992px) {
    .creative-process-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Cost Calculator Section --- */
.cost-calculator-section {
    padding: 80px 0;
    background: linear-gradient(180deg, #071026 0%, #0b1220 100%);
    color: #eaf2ff;
    position: relative;
    overflow: hidden; /* already containing bg elements */
}

.cost-calculator-section h2 {
    color: #fff;
    text-align: center;
    margin-bottom: 1rem;
}

.cost-calculator-section .section-subtitle {
    text-align: center;
    color: rgba(234, 242, 255, 0.85);
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.calculator-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2.5rem;
    align-items: flex-start;
}

.calculator-form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.form-group {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
}

.form-group legend {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
}

.options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.option-control {
    position: relative;
    min-width: 0; /* allow text to wrap within grid cell */
}

.option-control input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.option-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 104px;
    gap: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    transition: all 0.3s ease;
}

.option-control input:checked + .option-label {
    background: #ee5353;
    color: #fff;
    border-color: #ee5353;
    box-shadow: 0 0 20px rgba(238, 83, 83, 0.4);
    transform: translateY(-3px);
}

.option-label .option-title {
    font-weight: 600;
    display: block;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.option-label .option-price {
    font-size: 0.85rem;
    opacity: 0.85;
    line-height: 1.2;
}

@media (max-width: 600px) {
    .options-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .option-label { min-height: 88px; }
}

.calculator-summary {
    background: linear-gradient(160deg, #1f2937, #111827);
    border-radius: 12px;
    padding: 2rem;
    position: sticky;
    top: 120px;
    box-shadow: 0 20px 60px rgba(2, 6, 23, 0.5);
}

.summary-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

/* --- WP FAQ Section --- */
.wp-faq { background: linear-gradient(180deg, #f8fafc, #eef2f7); position: relative; overflow: hidden; }
.wp-faq .faq-intro { text-align: center; max-width: 820px; margin: 0 auto 18px; }
.wp-faq .faq-intro h2 { margin: 0 0 8px; color: #0b132b; }
.wp-faq .faq-intro .section-subtitle { color: #475569; margin: 0; }
.wp-faq .faq-grid { max-width: 980px; margin: 26px auto 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
.wp-faq .faq-item { border-radius: 10px; background: #fff; border: 1px solid rgba(2,6,23,0.06); box-shadow: 0 10px 26px rgba(2,6,23,0.06); overflow: hidden; }
.wp-faq .faq-item > summary { list-style: none; cursor: pointer; padding: 16px 18px; display: flex; align-items: center; gap: 10px; font-weight: 600; color: #0b132b; position: relative; }
.wp-faq .faq-item > summary::-webkit-details-marker { display: none; }
.wp-faq .faq-item > summary span { flex: 1; }
.wp-faq .faq-item > summary::after { content: '+'; font-weight: 800; color: #6366f1; transition: transform .25s ease; }
.wp-faq .faq-item[open] > summary::after { content: '–'; transform: rotate(0deg); }
.wp-faq .faq-content { padding: 0 18px 16px 18px; color: #475569; }
.wp-faq .faq-item:hover { border-color: #c7d2fe; box-shadow: 0 14px 34px rgba(55,48,163,0.10); }
.wp-faq .faq-item[open] { border-color: #c7d2fe; }
.wp-faq .faq-item[open] > summary { background: #f8faff; }

@media (min-width: 860px) {
    .wp-faq .faq-grid { grid-template-columns: 1fr 1fr; }
}

/* --- Header Support mega: Chat now button (scoped) --- */
#main-header .support-mega .sp-live .btn,
#main-header .support-mega .sp-live .btn.btn-secondary {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        border-radius: 999px;
    background: linear-gradient(135deg, #ee5353, #ff7a7f);
        color: #ffffff !important;
        text-decoration: none;
        font-weight: 600;
        border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 8px 22px rgba(238,83,83,0.28);
        transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
#main-header .support-mega .sp-live .btn::before { content: '\f27a'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 14px; }
#main-header .support-mega .sp-live .btn::before {
    /* Use a neutral glowing dot instead of an icon font to remove dependency */
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, #a7f3d0 0%, #10b981 40%, rgba(16,185,129,0.6) 70%, rgba(16,185,129,0.0) 100%);
    box-shadow: 0 0 0 2px rgba(16,185,129,0.15), 0 0 14px rgba(16,185,129,0.65);
}
#main-header .support-mega .sp-live .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(99,102,241,0.38); filter: brightness(1.05); }
#main-header .support-mega .sp-live .btn::before { content: '\f27a'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 14px; }
#main-header .support-mega .sp-live .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(238,83,83,0.38); filter: brightness(1.05); }
#main-header .support-mega .sp-contact { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
#main-header .support-mega .sp-phone a { color: #0b132b; font-weight: 600; text-decoration: none; }

.summary-header h3 {
    color: #fff;
    margin: 0;
}

.summary-total {
    text-align: center;
    margin-bottom: 1.5rem;
}

.total-label {
    font-size: 1rem;
    color: rgba(234, 242, 255, 0.7);
}

.total-price {
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
}

.summary-breakdown {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1rem;
}

.summary-breakdown p {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    color: rgba(234, 242, 255, 0.8);
}

.summary-breakdown .price {
    font-weight: 600;
}

.summary-cta {
    margin-top: 2rem;
    text-align: center;
}

@media (max-width: 992px) {
    .calculator-grid {
        grid-template-columns: 1fr;
    }
}

/* Scoped magical animated background for calculator only */
.cost-calculator-section .calc-magic-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cost-calculator-section .calc-magic-bg::before,
.cost-calculator-section .calc-magic-bg::after {
        content: '';
        position: absolute;
        width: 60%;
        height: 80%;
        top: -8%;
        left: -10%;
        background:
            radial-gradient(circle at 18% 24%, rgba(111,66,193,0.42), transparent 22%),
            radial-gradient(circle at 50% 60%, rgba(16,185,129,0.26), transparent 26%),
            radial-gradient(circle at 78% 78%, rgba(255,145,120,0.20), transparent 28%);
        filter: blur(68px) saturate(140%);
        transform: translate3d(0,0,0);
        animation: calcBgMove 28s ease-in-out infinite alternate;
        mix-blend-mode: screen;
        opacity: 0.95;
}
.cost-calculator-section .calc-magic-bg::after {
        left: auto; right: -6%; top: 10%; width: 58%; height: 72%; animation-duration: 32s; background:
            radial-gradient(circle at 22% 18%, rgba(99,102,241,0.36), transparent 20%),
            radial-gradient(circle at 72% 72%, rgba(254,202,87,0.18), transparent 22%),
            radial-gradient(circle at 50% 40%, rgba(255,107,107,0.16), transparent 26%);
}

.cost-calculator-section .calc-particle {
        position: absolute;
        width:10px; height:10px; border-radius:50%;
        filter: blur(2px) saturate(140%);
        animation: calcParticleDrift 10s ease-in-out infinite, calcParticleTwinkle 3.6s ease-in-out infinite;
        box-shadow: 0 0 18px rgba(0,0,0,0.25);
}
.cost-calculator-section .calc-p1 { left:12%; top:40%; background: radial-gradient(circle, rgba(111,66,193,0.95), rgba(111,66,193,0.45)); animation-delay: 0s, 0s; box-shadow: 0 0 36px rgba(111,66,193,0.22); }
.cost-calculator-section .calc-p2 { left:28%; top:72%; background: radial-gradient(circle, rgba(16,185,129,0.96), rgba(16,185,129,0.45)); animation-delay: 1.2s, 0.5s; box-shadow: 0 0 36px rgba(16,185,129,0.18); }
.cost-calculator-section .calc-p3 { left:64%; top:22%; background: radial-gradient(circle, rgba(255,107,107,0.96), rgba(255,107,107,0.45)); animation-delay: 2.6s, 1.1s; box-shadow: 0 0 36px rgba(255,107,107,0.18); }
.cost-calculator-section .calc-p4 { left:78%; top:56%; background: radial-gradient(circle, rgba(99,102,241,0.96), rgba(99,102,241,0.45)); animation-delay: 3.9s, 1.8s; box-shadow: 0 0 36px rgba(99,102,241,0.18); }

@keyframes calcBgMove { 0% { transform: translateY(0) scale(1); } 100% { transform: translateY(-36px) scale(1.03); } }
@keyframes calcParticleDrift { 0% { transform: translateY(0) translateX(0) scale(0.85); opacity:0.65 } 50% { transform: translateY(-28px) translateX(10px) scale(1.06); opacity:1 } 100% { transform: translateY(0) translateX(0) scale(0.85); opacity:0.65 } }
@keyframes calcParticleTwinkle { 0% { opacity: 0.6; transform: scale(0.85); } 45% { opacity: 1; transform: scale(1.15); } 100% { opacity: 0.6; transform: scale(0.85); } }

@media (prefers-reduced-motion: reduce) {
    .cost-calculator-section .calc-magic-bg::before,
    .cost-calculator-section .calc-magic-bg::after,
    .cost-calculator-section .calc-particle { animation: none !important; }
}

/* --- Creative CTA (Ready to build?) --- */
.creative-cta {
        position: relative;
        padding: 80px 0;
        background: linear-gradient(160deg, #071026 0%, #0f172a 50%, #1f2937 100%);
        color: #e6f0ff;
        text-align: center;
    overflow: hidden; /* contain floating bg elements */
        margin-top: 56px;
}
.creative-cta .container { position: relative; z-index: 2; }
.creative-cta .cta-content { max-width: 720px; margin: 0 auto; }
.creative-cta .cta-content h2 { font-size: 2.4rem; color: #fff; margin-bottom: 1rem; }
.creative-cta .cta-content p { color: rgba(230, 240, 255, 0.85); font-size: 1.1rem; margin-bottom: 1.5rem; }

.creative-cta .cta-bg-elements { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.creative-cta .cta-orb { position: absolute; border-radius: 50%; opacity: 0.45; animation: ctaOrbFloat 12s ease-in-out infinite; filter: blur(2px); }
.creative-cta .cta-orb.orb-1 { width: 340px; height: 340px; left: 8%; top: -20%; background: radial-gradient(circle, rgba(111,66,193,0.35), transparent 70%); animation-delay: 0s; }
.creative-cta .cta-orb.orb-2 { width: 300px; height: 300px; right: 6%; bottom: -30%; background: radial-gradient(circle, rgba(255,107,107,0.3), transparent 70%); animation-delay: 4s; }

.creative-cta .cta-sparkle { position: absolute; background: #fff; border-radius: 50%; opacity: 0.5; animation: sparklePulse 2s infinite; box-shadow: 0 0 8px 2px #fff, 0 0 12px 4px #f0f, 0 0 16px 6px #0ff; }
.creative-cta .cta-sparkle.spark-1 { width: 8px; height: 8px; top: 22%; left: 24%; animation-delay: 0.5s; }
.creative-cta .cta-sparkle.spark-2 { width: 10px; height: 10px; bottom: 18%; right: 18%; animation-delay: 1.2s; }

@keyframes ctaOrbFloat { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(16px) scale(1.05); } }
@keyframes sparklePulse { 0% { opacity: 0.4; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0.4; transform: scale(0.8); } }

@media (prefers-reduced-motion: reduce) {
    .creative-cta .cta-orb, .creative-cta .cta-sparkle { animation: none !important; opacity: 0.25; }
}

/* --- Recent Projects Section --- */
.recent-projects { padding: 64px 0; background: #f8fafc; }
.recent-projects .section-header { text-align: center; margin-bottom: 24px; }
.recent-projects .section-header h3 { font-size: 1.8rem; color: #0b132b; margin: 0 0 8px 0; }
.recent-projects .section-header p { color: #4b5563; margin: 0 auto; max-width: 720px; }

.recent-projects .portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.recent-projects .project-card { position: relative; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 14px 40px rgba(2,6,23,0.08); border: 1px solid rgba(2,6,23,0.06); }
.recent-projects .project-media { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.recent-projects .project-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 500ms ease; }
.recent-projects .project-card:hover .project-media img { transform: scale(1.06); }
.recent-projects .project-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,6,23,0) 40%, rgba(2,6,23,0.6) 100%); opacity: 0; transition: opacity 300ms ease; }
.recent-projects .project-card:hover .project-overlay { opacity: 1; }
.recent-projects .project-info { padding: 14px 14px 16px 14px; }
.recent-projects .project-info strong { color: #0b132b; }
.recent-projects .project-info p { margin: 6px 0 0; color: #4b5563; }
.recent-projects .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.recent-projects .tag { font-size: 12px; padding: 4px 8px; border-radius: 999px; background: #eef2ff; color: #3730a3; border: 1px solid #e0e7ff; }

@media (max-width: 992px) { .recent-projects .portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .recent-projects .portfolio-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .recent-projects .project-media img { transition: none !important; } }

/* --- Proposal Modal (scoped) --- */
.proposal-modal-overlay { position: fixed; inset: 0; background: rgba(2,6,23,0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; z-index: 9999; pointer-events: none; }
.proposal-modal-overlay.active { display: flex; pointer-events: auto; }
/* No-JS fallback: open modal when targeted via hash */
.proposal-modal-overlay:target { display: flex; pointer-events: auto; }
.proposal-modal { width: min(720px, 92vw); background: linear-gradient(180deg, #0b1220, #0c1426); color: #eaf2ff; border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; box-shadow: 0 40px 100px rgba(2,6,23,0.6); position: relative; overflow: hidden; }
.proposal-modal::before { content: ''; position: absolute; inset: -30% -20% auto auto; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(111,66,193,0.22), transparent 60%); filter: blur(22px); pointer-events: none; }
.proposal-modal-header { padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: space-between; }
.proposal-modal-title { margin: 0; font-size: 1.2rem; color: #fff; }
.proposal-modal-close { background: transparent; border: none; color: #cfe1ff; font-size: 22px; cursor: pointer; padding: 6px; border-radius: 8px; }
.proposal-modal-close:hover { background: rgba(255,255,255,0.06); color: #fff; }
.proposal-modal-body { padding: 18px 20px 22px 20px; }
.proposal-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.proposal-form .full { grid-column: 1 / -1; }
.proposal-form label { display: block; font-size: 0.9rem; color: #cfe1ff; margin-bottom: 6px; }
.proposal-form input, .proposal-form select, .proposal-form textarea { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: #eaf2ff; outline: none; }
.proposal-form textarea { min-height: 100px; resize: vertical; }
.proposal-form .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
.proposal-form .btn-secondary { background: rgba(255,255,255,0.08); color: #eaf2ff; border: 1px solid rgba(255,255,255,0.12); }
.proposal-form .btn-secondary:hover { background: rgba(255,255,255,0.12); }
.proposal-success { display: none; text-align: center; padding: 22px; }
.proposal-success.active { display: block; }

@media (max-width: 700px) { .proposal-form { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .proposal-modal-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; } }
body.modal-open { overflow: hidden; }

/* --- Pricing & Plans (creative, user-friendly) --- */
.pricing-section { padding: 64px 0; background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%); }
.pricing-section { position: relative; overflow: hidden; }
.pricing-section::before { content: ''; position: absolute; inset: -20% -10% auto auto; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(99,102,241,0.10), transparent 60%); filter: blur(22px); pointer-events: none; }
.pricing-section .pricing-header { text-align: center; margin-bottom: 24px; }
.pricing-section .pricing-title { font-size: 1.8rem; color: #0b132b; margin: 0 0 8px 0; }
.pricing-section .pricing-subtitle { color: #4b5563; margin: 0 auto; max-width: 760px; }
.pricing-section .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.pricing-section .price-card { position: relative; border-radius: 14px; background: #ffffff; border: 1px solid rgba(2,6,23,0.06); box-shadow: 0 16px 42px rgba(2,6,23,0.08); overflow: hidden; display: flex; flex-direction: column; transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; border-top: 4px solid transparent; }
.pricing-section .price-card:hover { transform: translateY(-6px); box-shadow: 0 28px 70px rgba(2,6,23,0.12); }
.pricing-section .price-card.popular { border-color: #c7d2fe; box-shadow: 0 22px 60px rgba(55,48,163,0.15); border-top-color: #6366f1; }
.pricing-section .price-badge { position: absolute; top: 12px; right: 12px; background: #eef2ff; color: #3730a3; border: 1px solid #e0e7ff; padding: 4px 10px; border-radius: 999px; font-size: 12px; }
.pricing-section .price-header { padding: 18px 16px 8px 16px; }
.pricing-section .price-header h4 { margin: 0 0 6px 0; color: #0b132b; }
.pricing-section .price-line { font-size: 1.6rem; font-weight: 700; color: #0b132b; }
.pricing-section .price-line .period { font-size: 0.9rem; font-weight: 500; color: #6b7280; margin-left: 6px; }
.pricing-section .price-ideal { margin: 6px 16px 0 16px; color: #475569; font-size: 0.95rem; }
.pricing-section .price-features { list-style: none; margin: 0; padding: 10px 16px; display: grid; gap: 10px; }
.pricing-section .price-features li { position: relative; padding-left: 22px; color: #374151; }
.pricing-section .price-features li::before { content: '\2713'; position: absolute; left: 0; top: 0; color: #16a34a; font-weight: 700; }
.pricing-section .price-actions { padding: 12px 16px 16px 16px; margin-top: auto; display: flex; gap: 10px; }
.pricing-section .price-note { padding: 0 16px 8px 16px; color: #6b7280; font-size: 0.9rem; }

/* --- Testimonials Section --- */
.testimonials-section { position: relative; padding: 56px 0; background: linear-gradient(180deg, #ffffff, #f8fafc); overflow: hidden; }
.testimonials-section .ts-header { text-align: center; margin-bottom: 18px; }
.testimonials-section .ts-header h3 { margin: 0 0 6px; color: #0b132b; }
.testimonials-section .ts-subtitle { color: #475569; margin: 0 auto; max-width: 780px; }
.testimonials-section .ts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 14px; }
.testimonials-section .ts-card { background: #fff; border: 1px solid rgba(2,6,23,0.06); border-radius: 14px; padding: 18px; box-shadow: 0 16px 40px rgba(2,6,23,0.06); position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.testimonials-section .ts-card:hover { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(2,6,23,0.12); }
.testimonials-section .ts-quote { color: #374151; margin: 0 0 12px; line-height: 1.5; }
.testimonials-section .ts-meta { display: flex; align-items: center; gap: 12px; }
.testimonials-section .ts-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid #eef2ff; }
.testimonials-section .ts-author strong { color: #0b132b; display: block; }
.testimonials-section .ts-role { font-size: 0.85rem; color: #6b7280; }
.testimonials-section .ts-stars { margin-top: 6px; color: #f59e0b; font-size: 14px; letter-spacing: 1px; }
.testimonials-section .ts-stars .star { opacity: 0.35; }
.testimonials-section .ts-stars .star.filled { opacity: 1; }
.testimonials-section .ts-bg { position: absolute; inset: -30% -10% auto auto; width: 540px; height: 540px; border-radius: 50%; background: radial-gradient(circle, rgba(99,102,241,0.10), transparent 68%); filter: blur(24px); pointer-events: none; }

@media (max-width: 640px) { .pricing-section { padding: 48px 0; } }
@media (prefers-reduced-motion: reduce) { .pricing-section .price-card { transition: none !important; } }

/* --- Floating Chat Widget (scoped) --- */
.chat-widget { position: fixed; right: 24px; bottom: 24px; z-index: 10000; font-family: var(--font-family); }
.chat-widget .chat-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 14px; border-radius: 999px; border: none; cursor: pointer;
    background: linear-gradient(135deg, #ee5353, #ff7a7f); color: #fff;
    box-shadow: 0 12px 28px rgba(238,83,83,0.35);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.chat-widget .chat-toggle:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(238,83,83,0.45); filter: brightness(1.05); }
.chat-widget .chat-toggle:focus-visible { outline: 3px solid rgba(238,83,83,0.5); outline-offset: 2px; }
.chat-widget .chat-toggle .chat-label { font-weight: 600; }
@media (max-width: 480px) { .chat-widget .chat-toggle .chat-label { display: none; } }

.chat-widget .chat-panel {
    position: absolute; right: 0; bottom: 56px; width: min(320px, 92vw);
    background: #ffffff; color: #0b132b;
    border: 1px solid rgba(2,6,23,0.06); border-radius: 14px;
    box-shadow: 0 24px 60px rgba(2,6,23,0.18);
    opacity: 0; transform: translateY(8px) scale(0.98); pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}
.chat-widget .chat-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.chat-widget .chat-header { display:flex; align-items:center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid rgba(2,6,23,0.06); }
.chat-widget .chat-title { font-weight: 700; }
.chat-widget .chat-title i { color: #ee5353; margin-right: 6px; }
.chat-widget .chat-close { background: transparent; border: none; color: #475569; font-size: 18px; cursor: pointer; border-radius: 8px; padding: 6px; }
.chat-widget .chat-close:hover { background: #f8fafc; color: #0b132b; }
.chat-widget .chat-close:focus-visible { outline: 2px solid #ee5353; outline-offset: 2px; }
.chat-widget .chat-body { padding: 14px; }
.chat-widget .call-sales { display:flex; align-items:center; gap: 10px; background: #f8fafc; border: 1px solid rgba(2,6,23,0.06); border-radius: 10px; padding: 10px; }
.chat-widget .call-icon { width: 36px; height: 36px; border-radius: 8px; background: #fee2e2; color: #b91c1c; display:flex; align-items:center; justify-content:center; }
.chat-widget .call-label { font-weight: 600; color: #0b132b; }
.chat-widget .call-number { color: #c81e1e; font-weight: 700; }
.chat-widget .country-numbers { display: inline-block; margin-top: 10px; color: #c81e1e; }

/* --- Contact Page (scoped) --- */
.contact-page .contact-hero { padding: 80px 0; background: linear-gradient(180deg, #0b1220, #0c1426); color: #eaf2ff; position: relative; overflow: hidden; }
.contact-page .hero-inner { max-width: 840px; margin: 0 auto; text-align: center; }
.contact-page .hero-inner h1 { color: #fff; margin-bottom: 8px; }
.contact-page .hero-actions { margin-top: 14px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.contact-page .contact-section { padding: 56px 0; background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%); }
.contact-page .contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px; align-items: start; }
.contact-page .info-card { background: #fff; border: 1px solid rgba(2,6,23,0.06); border-radius: 12px; padding: 18px; box-shadow: 0 10px 30px rgba(2,6,23,0.06); }
.contact-page .info-card h3 { margin-top: 0; color: #0b132b; }
.contact-page .info-list { list-style: none; padding-left: 0; margin: 12px 0; display: grid; gap: 8px; color: #475569; }
.contact-page .info-list i { color: #ee5353; width: 18px; margin-right: 6px; }
.contact-page .info-note { margin-top: 10px; color: #374151; font-weight: 600; }
.contact-page .map-card { margin-top: 14px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(2,6,23,0.06); box-shadow: 0 10px 30px rgba(2,6,23,0.06); }
.contact-page .map-card img { display: block; width: 100%; height: auto; }

.contact-page .contact-form-wrap { background: #fff; border: 1px solid rgba(2,6,23,0.06); border-radius: 12px; padding: 18px; box-shadow: 0 10px 30px rgba(2,6,23,0.06); }
.contact-page .contact-form .hp { position: absolute; left: -10000px; top: -10000px; height: 0; width: 0; }
.contact-page .contact-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-page .contact-form .field { display: flex; flex-direction: column; gap: 6px; }
.contact-page .contact-form label { font-size: .92rem; color: #374151; }
.contact-page .contact-form input, .contact-page .contact-form textarea { padding: 10px 12px; border-radius: 8px; border: 1px solid #e2e8f0; outline: none; }
.contact-page .contact-form select {
    padding: 10px 36px 10px 12px; border-radius: 8px; border: 1px solid #e2e8f0; outline: none; background: #fff;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ee5353' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
.contact-page .contact-form input:focus, .contact-page .contact-form textarea:focus { border-color: #ee5353; box-shadow: 0 0 0 3px rgba(238,83,83,0.15); }
.contact-page .contact-form select:focus { border-color: #ee5353; box-shadow: 0 0 0 3px rgba(238,83,83,0.15); }
.contact-page .contact-form .actions { margin-top: 8px; display: flex; gap: 10px; align-items: center; }
.contact-page .form-alert { padding: 10px 12px; border-radius: 8px; margin-bottom: 10px; font-weight: 600; }
.contact-page .form-alert.ok { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.contact-page .form-alert.err { background: #fef2f2; color: #7f1d1d; border: 1px solid #fecaca; }

@media (max-width: 992px) { .contact-page .contact-grid { grid-template-columns: 1fr; } }

/* Contact page: Help tabs */
.contact-page .help-section { padding: 40px 0 64px; background: #ffffff; }
.contact-page .help-tabs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.contact-page .help-tabs .tab-btn { background: #f3f4f6; color: #0b132b; border: 1px solid #e5e7eb; border-radius: 999px; padding: 8px 14px; cursor: pointer; font-weight: 600; }
.contact-page .help-tabs .tab-btn[aria-selected="true"], .contact-page .help-tabs .tab-btn.active { background: #0b1220; color: #fff; border-color: #0b1220; }
.contact-page .help-panels { max-width: 860px; margin: 16px auto 0; }
.contact-page .tab-panel { background: #fff; border: 1px solid rgba(2,6,23,0.06); border-radius: 12px; padding: 18px; box-shadow: 0 10px 30px rgba(2,6,23,0.06); }

/* Magical animation for contact hero */
.contact-page .contact-hero { position: relative; overflow: hidden; }
.contact-page .contact-hero .hero-anim { position:absolute; inset:0; pointer-events:none; z-index:0; }
.contact-page .contact-hero .magic-orb { position:absolute; width:220px; height:220px; border-radius:50%; filter: blur(18px); opacity:.7; }
.contact-page .contact-hero .magic-orb.orb-1 { top:-40px; left:-60px; background: radial-gradient(circle at 40% 40%, rgba(238,83,83,0.45), rgba(238,83,83,0) 60%); animation: floatY 10s ease-in-out infinite; }
.contact-page .contact-hero .magic-orb.orb-2 { bottom:-60px; right:-80px; background: radial-gradient(circle at 60% 60%, rgba(255,255,255,0.20), rgba(255,255,255,0) 60%); animation: floatX 12s ease-in-out infinite; }
.contact-page .contact-hero .magic-orb.orb-3 { top:20%; right:25%; width:160px; height:160px; background: radial-gradient(circle at 50% 50%, rgba(255,122,122,0.35), rgba(255,122,122,0) 60%); animation: floatDiag 14s ease-in-out infinite; }
.contact-page .contact-hero .spark { position:absolute; width:6px; height:6px; border-radius:50%; background: rgba(255,255,255,0.9); box-shadow: 0 0 10px rgba(255,255,255,0.8), 0 0 20px rgba(255,255,255,0.5); opacity:.75; animation: twinkle 2.4s ease-in-out infinite alternate; }
.contact-page .contact-hero .spark.s-1 { top:22%; left:18%; animation-delay: .1s; }
.contact-page .contact-hero .spark.s-2 { top:30%; right:20%; animation-delay: .5s; }
.contact-page .contact-hero .spark.s-3 { bottom:24%; left:28%; animation-delay: .9s; }
.contact-page .contact-hero .spark.s-4 { top:12%; right:36%; animation-delay: 1.2s; }
.contact-page .contact-hero .spark.s-5 { bottom:12%; right:14%; animation-delay: 1.6s; }
.contact-page .contact-hero .spark.s-6 { top:44%; left:8%; animation-delay: 2s; }

@keyframes twinkle { from { transform: scale(0.9); opacity:.5; } to { transform: scale(1.2); opacity:1; } }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(16px); } }
@keyframes floatX { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-18px); } }
@keyframes floatDiag { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-12px, 12px); } }

@media (prefers-reduced-motion: reduce) {
    .contact-page .contact-hero .magic-orb,
    .contact-page .contact-hero .spark { animation: none !important; }
}

/* Alternate contact theme (dark/glass) */
.contact-page.contact-alt .contact-hero { background: radial-gradient(80% 60% at 50% 0%, rgba(238,83,83,0.28), rgba(11,18,32,0) 60%), linear-gradient(180deg, #0b1220, #0c1426); }
.contact-page.contact-alt .contact-hero::before { content:''; position:absolute; inset:-10% -10% auto auto; width:520px; height:520px; background: radial-gradient(circle, rgba(99,102,241,0.16), transparent 60%); filter: blur(20px); }
.contact-page.contact-alt .contact-section { background: linear-gradient(180deg, #0b1220 0%, #0c1426 100%); }
.contact-page.contact-alt .contact-grid { align-items: stretch; }
.contact-page.contact-alt .info-card, .contact-page.contact-alt .contact-form-wrap, .contact-page.contact-alt .tab-panel { 
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.04));
    border: 1px solid rgba(255,255,255,0.08);
    color: #eaf2ff;
    box-shadow: 0 30px 80px rgba(2,6,23,0.4);
}
.contact-page.contact-alt .info-card h3 { color: #fff; }
.contact-page.contact-alt .info-list { color: rgba(234,242,255,0.85); }
.contact-page.contact-alt .info-note { color: #fff; }
.contact-page.contact-alt .map-card { border-color: rgba(255,255,255,0.08); box-shadow: 0 20px 60px rgba(2,6,23,0.5); }
.contact-page.contact-alt .contact-form label { color: #cfe1ff; }
.contact-page.contact-alt .contact-form input, .contact-page.contact-alt .contact-form textarea, .contact-page.contact-alt .contact-form select {
    background: rgba(255,255,255,0.06);
    color: #eaf2ff;
    border-color: rgba(255,255,255,0.14);
}
.contact-page.contact-alt .contact-form input::placeholder, .contact-page.contact-alt .contact-form textarea::placeholder { color: rgba(234,242,255,0.7); }
.contact-page.contact-alt .contact-form .actions .btn-secondary { background: rgba(255,255,255,0.08); color: #eaf2ff; border-color: rgba(255,255,255,0.18); }
.contact-page.contact-alt .help-section { background: linear-gradient(180deg, #0c1426, #0b1220); }
.contact-page.contact-alt .help-section h2 { color: #ffffff; }
.contact-page.contact-alt .help-section .section-subtitle { color: rgba(234,242,255,0.85); }
.contact-page.contact-alt .help-tabs .tab-btn { background: rgba(255,255,255,0.06); color: #eaf2ff; border-color: rgba(255,255,255,0.12); }
.contact-page.contact-alt .help-tabs .tab-btn.active, .contact-page.contact-alt .help-tabs .tab-btn[aria-selected="true"] { background: #ee5353; border-color: #ee5353; color: #fff; }
/* Alt theme: enhance contact highlights contrast */
.contact-page.contact-alt .contact-form-wrap .contact-highlights li { color: rgba(234,242,255,0.9); }
.contact-page.contact-alt .contact-form-wrap .contact-highlights i { color: #ff8a8a; }
/* Contact highlights list */
.contact-page .contact-form-wrap .contact-highlights { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px 12px; margin:8px 0 0; padding:0; list-style:none; }
.contact-page .contact-form-wrap .contact-highlights li { display:flex; align-items:center; gap:8px; color:#475569; }
.contact-page .contact-form-wrap .contact-highlights i { width:18px; text-align:center; color:#ee5353; }
@media (max-width: 640px){ .contact-page .contact-form-wrap .contact-highlights { grid-template-columns: 1fr; } }

/* Layered design accents for contact section */
.contact-page.contact-alt .contact-section { position: relative; }
.contact-page.contact-alt .contact-section::before { content:""; position:absolute; inset:auto -10% -60px -10%; height:220px; background: radial-gradient(60% 50% at 50% 50%, rgba(238,83,83,0.20), rgba(238,83,83,0) 70%); filter: blur(30px); z-index:0; }
.contact-page.contact-alt .contact-section::after { content:""; position:absolute; top:-60px; right:-40px; width:320px; height:320px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.08), rgba(255,255,255,0)); filter: blur(16px); z-index:0; }
.contact-page.contact-alt .contact-grid, .contact-page.contact-alt .info-card, .contact-page.contact-alt .quick-contacts, .contact-page.contact-alt .contact-form-wrap { position: relative; z-index:1; }

/* Alt theme: extra hero depth */
.contact-page.contact-alt .contact-hero { position: relative; }
.contact-page.contact-alt .contact-hero::after { content:""; position:absolute; inset:auto 10% -40px auto; width:380px; height:180px; background: radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,0.10), rgba(255,255,255,0)); filter: blur(18px); pointer-events:none; }

/* Quick contact cards (tile-sized) */
.contact-page .quick-contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 16px; }
.contact-page .qc-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(2,6,23,0.08); background: #fff; text-decoration: none; color: inherit; box-shadow: 0 10px 28px rgba(2,6,23,0.07); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; min-height: 86px; }
.contact-page .qc-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(2,6,23,0.10); border-color: rgba(2,6,23,0.12); }
.contact-page .qc-icon { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:14px; background: #0b1220; color: #fff; font-size:18px; }
.contact-page .qc-content { display:flex; flex-direction:column; line-height:1.25; }
.contact-page .qc-title { font-weight:800; color:#0b132b; font-size:1.125rem; }
.contact-page .qc-sub { color:#475569; font-size:0.95rem; }
.contact-page .qc-cta { margin-left:auto; font-weight:800; color:#ee5353; transition: transform .18s ease; }
.contact-page .qc-card:hover .qc-cta { transform: translateX(2px); }
.contact-page .qc-card.qc-call .qc-icon { background: linear-gradient(135deg,#ee5353,#ff7a7a); }
.contact-page .qc-card.qc-email .qc-icon { background: linear-gradient(135deg,#0b1220,#1d2540); }
.contact-page .qc-card.qc-whatsapp .qc-icon { background: linear-gradient(135deg,#22c55e,#16a34a); }
@media (max-width: 992px) { .contact-page .quick-contacts { grid-template-columns: 1fr; } }

/* Quick contacts in alt theme */
.contact-page.contact-alt .quick-contacts .qc-card { background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.04)); border-color: rgba(255,255,255,0.10); color: #eaf2ff; padding:18px 20px; min-height:94px; }
.contact-page.contact-alt .quick-contacts .qc-title { color:#ffffff; }
.contact-page.contact-alt .quick-contacts .qc-sub { color: rgba(234,242,255,0.95); font-size:1rem; }
.contact-page.contact-alt .quick-contacts .qc-cta { color:#ff8a8a; }
.contact-page.contact-alt .quick-contacts .qc-card:hover { border-color: rgba(255,255,255,0.22); box-shadow: 0 16px 40px rgba(2,6,23,0.45); }

/* Contact tiles in contact-form-wrap */
.contact-page .contact-form-wrap .contact-tiles { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:14px; margin-top:16px; }
.contact-page .contact-form-wrap .contact-tile { display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:16px; text-decoration:none; color:inherit; border:1px solid rgba(2,6,23,0.08); background:#fff; box-shadow: 0 10px 28px rgba(2,6,23,0.07); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; min-height: 86px; }
.contact-page .contact-form-wrap .contact-tile:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(2,6,23,0.10); border-color: rgba(2,6,23,0.12); }
.contact-page .contact-form-wrap .tile-icon { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:14px; background:#0b1220; color:#fff; font-size:18px; }
.contact-page .contact-form-wrap .tile-content { display:flex; flex-direction:column; line-height:1.25; }
.contact-page .contact-form-wrap .tile-title { font-weight:800; color:#0b132b; font-size:1.125rem; }
.contact-page .contact-form-wrap .tile-sub { color:#475569; font-size:0.95rem; }
.contact-page .contact-form-wrap .tile-arrow { margin-left:auto; color:#ee5353; font-weight:800; }
.contact-page .contact-form-wrap .tile-arrow { transition: transform .18s ease; }
.contact-page .contact-form-wrap .contact-tile:hover .tile-arrow { transform: translateX(2px); }
.contact-page .contact-form-wrap .tile-message .tile-icon { background: linear-gradient(135deg,#0b1220,#1d2540); }
.contact-page .contact-form-wrap .tile-quote .tile-icon { background: linear-gradient(135deg,#ee5353,#ff7a7a); }
.contact-page .contact-form-wrap .tile-support .tile-icon { background: linear-gradient(135deg,#1d4ed8,#2563eb); }
@media (max-width: 992px) { .contact-page .contact-form-wrap .contact-tiles { grid-template-columns: 1fr; } }

/* Tiles alt theme */
.contact-page.contact-alt .contact-form-wrap .contact-tile { background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.04)); border-color: rgba(255,255,255,0.10); color:#eaf2ff; }
.contact-page.contact-alt .contact-form-wrap .contact-tile { padding:18px 20px; min-height: 94px; }
.contact-page.contact-alt .contact-form-wrap .tile-title { color:#ffffff; }
.contact-page.contact-alt .contact-form-wrap .tile-sub { color: rgba(234,242,255,0.95); font-size:1rem; }
.contact-page.contact-alt .contact-form-wrap .tile-arrow { color:#ff8a8a; }
.contact-page.contact-alt .contact-form-wrap .contact-tile:hover { border-color: rgba(255,255,255,0.22); box-shadow: 0 16px 40px rgba(2,6,23,0.45); }


/* Plans section creative cards */
.plans-section .plan-card { position: relative; overflow:hidden; }
.plans-section .plan-card::before { content:''; position:absolute; inset:-20% -20% auto auto; width:220px; height:220px; border-radius:50%; background: radial-gradient(circle, rgba(238,83,83,0.22), rgba(238,83,83,0)); filter: blur(18px); }
.plans-section .plan-card .plan-badge { position:absolute; top:10px; left:10px; background: rgba(15,23,42,0.85); color:#fff; border:1px solid rgba(255,255,255,0.14); border-radius:999px; padding:4px 10px; font-weight:800; font-size:12px; letter-spacing:.3px; }
.plans-section .plan-card.popular .plan-badge.hot { background: linear-gradient(135deg,#ee5353,#ff7a7a); border-color: rgba(255,255,255,0.28); box-shadow: 0 8px 30px rgba(238,83,83,0.4); }
.plans-section .plan-header { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px; }
.plans-section .plan-name { font-size:1.1rem; font-weight:800; color:#0b132b; }
.plans-section .plan-price { font-size:1rem; color:#0b132b; }
.plans-section .plan-price strong { font-size:1.6rem; }
.plans-section .plan-price .per { font-size:.9rem; color:#475569; margin-left:2px; }
.plans-section .plan-desc { color:#475569; margin: 2px 0 8px; }
.plans-section .plan-features { list-style:none; padding:0; margin:0 0 12px 0; display:grid; gap:6px; }
.plans-section .plan-features li { color:#1f2937; display:flex; align-items:center; gap:8px; }
.plans-section .plan-features i { color:#16a34a; }
.plans-section .plan-cta { display:flex; align-items:center; gap:10px; }
.plans-section .plan-cta .note { color:#ee5353; font-weight:700; }

/* Dark/glass variant alignment (if used within dark sections) */
.contact-page.contact-alt .plans-section .plan-name,
.contact-page.contact-alt .plans-section .plan-price { color:#ffffff; }
.contact-page.contact-alt .plans-section .plan-desc { color: rgba(234,242,255,0.9); }
.contact-page.contact-alt .plans-section .plan-features li { color:#eaf2ff; }
.contact-page.contact-alt .plans-section .plan-badge { background: rgba(255,255,255,0.08); }


/* Pricing Alt (New Creative Design) */
.pricing-alt { padding: 24px 0 40px; }
.pricing-alt .subtitle { color:#475569; margin: 0 0 18px 0; }
.pricing-alt .pricing-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; align-items:stretch; }
.pricing-alt .pricing-card { position:relative; border-radius:16px; border:1px solid rgba(2,6,23,0.08); background:#fff; box-shadow: 0 14px 44px rgba(2,6,23,0.08); padding:16px; display:flex; flex-direction:column; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; will-change: transform; overflow:hidden; }
.pricing-alt .pricing-card::before { content:""; position:absolute; inset: -30% -30% auto auto; width:260px; height:260px; border-radius:50%; background: radial-gradient(circle, rgba(238,83,83,0.18), rgba(238,83,83,0)); filter: blur(18px); transform: translateZ(0); pointer-events:none; }
.pricing-alt .pricing-card::after { content:""; position:absolute; top:-40%; left:-160%; width:140%; height:180%; background: linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,0.28), rgba(255,255,255,0)); transform: rotate(12deg); opacity:0; pointer-events:none; }
.pricing-alt .pricing-card:hover { transform: translateY(-6px); box-shadow: 0 24px 70px rgba(2,6,23,0.18); border-color: rgba(2,6,23,0.14); }
.pricing-alt .pricing-card:hover::after { animation: sheen-sweep 900ms ease forwards; opacity:1; }
.pricing-alt .pricing-card.popular { border-color:#ee5353; box-shadow: 0 18px 60px rgba(238,83,83,0.25); }
.pricing-alt .pricing-card.popular:hover { box-shadow: 0 26px 90px rgba(238,83,83,0.32); }
.pricing-alt .pricing-card .pc-header { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:4px; }
.pricing-alt .pricing-card .pc-badge { background: #0b1220; color:#fff; border-radius:999px; padding:4px 10px; font-weight:800; font-size:12px; letter-spacing:.3px; border:1px solid rgba(255,255,255,0.2); }
.pricing-alt .pricing-card .pc-badge.hot { background: linear-gradient(135deg,#ee5353,#ff7a7a); border-color: transparent; box-shadow: 0 8px 28px rgba(238,83,83,0.35); }
.pricing-alt .pricing-card .pc-name { font-size:1.2rem; font-weight:900; color:#0b132b; margin:0; }
.pricing-alt .pricing-card .pc-price { color:#0b132b; }
.pricing-alt .pricing-card .pc-price strong { font-size:1.8rem; }
.pricing-alt .pricing-card .pc-price .per { margin-left:2px; font-size:.95rem; color:#475569; }
.pricing-alt .pricing-card .pc-desc { color:#475569; margin: 6px 0 10px; }
.pricing-alt .pricing-card .pc-features { list-style:none; padding:0; margin:0 0 12px 0; display:grid; gap:8px; }
.pricing-alt .pricing-card .pc-features li { color:#1f2937; display:flex; gap:8px; align-items:center; }
.pricing-alt .pricing-card .pc-features i { color:#16a34a; }
.pricing-alt .pricing-card .pc-cta { display:flex; align-items:center; gap:10px; margin-top:auto; }
.pricing-alt .pricing-card .pc-note { color:#ee5353; font-weight:700; }
.pricing-alt .pricing-card.popular { border-color:#ee5353; box-shadow: 0 18px 60px rgba(238,83,83,0.25); }
.pricing-alt .pricing-card .pc-ribbon { position:absolute; top:10px; right:-44px; transform:rotate(36deg); background: linear-gradient(135deg,#ee5353,#ff7a7a); color:#fff; padding:6px 60px; font-weight:900; box-shadow: 0 10px 30px rgba(238,83,83,0.3); }
@media (max-width: 980px){ .pricing-alt .pricing-grid { grid-template-columns: 1fr; } }

@keyframes sheen-sweep { 0% { left:-160%; opacity:0; } 40% { opacity:1; } 100% { left:120%; opacity:0; } }

/* Hover polish for service cards used above */
.svc-card { transition: transform .25s ease, box-shadow .25s ease; will-change: transform; }
.svc-card:hover { transform: translateY(-6px); box-shadow:0 36px 94px rgba(2,6,23,0.55); }
.svc-card.idle:hover { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    .pricing-alt .pricing-card,
    .svc-card { transition: none !important; }
    .pricing-alt .pricing-card:hover,
    .svc-card:hover { transform: none !important; box-shadow: inherit !important; }
}

/* Cloud details section */
.cloud-details { position: relative; padding: 44px 0 28px; background: linear-gradient(180deg, #ffffff, #f8fafc); overflow: hidden; }
.cloud-details .cd-head { text-align: center; margin-bottom: 12px; }
.cloud-details .cd-head h2 { margin: 0 0 6px; color: #0b132b; }
.cloud-details .cd-head .subtitle { color: #475569; margin: 0; }
.cloud-details .cd-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.cloud-details .cd-card { position: relative; border-radius: 14px; border: 1px solid rgba(2,6,23,0.08); background: #fff; box-shadow: 0 12px 36px rgba(2,6,23,0.08); padding: 16px; }
.cloud-details .cd-header { display:flex; align-items:center; gap: 10px; margin-bottom: 6px; }
.cloud-details .cd-icon { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg,#ee5353,#ff7a7a); color: #fff; display:inline-flex; align-items:center; justify-content:center; }
.cloud-details .cd-list { list-style: none; padding: 0; margin: 0; display:grid; gap: 8px; }
.cloud-details .cd-list li { color:#1f2937; display:flex; align-items:center; gap:8px; }
.cloud-details .cd-bg .orb { position:absolute; border-radius:50%; filter: blur(20px); opacity:.14; }
.cloud-details .cd-bg .orb.o1 { width: 340px; height: 340px; left: -80px; top: -120px; background: radial-gradient(circle, rgba(238,83,83,0.28), transparent 60%); }
.cloud-details .cd-bg .orb.o2 { width: 280px; height: 280px; right: -60px; bottom: -100px; background: radial-gradient(circle, rgba(99,102,241,0.22), transparent 60%); }
.cloud-details .cd-bg .spark { position:absolute; width:6px; height:6px; border-radius:50%; background: rgba(255,255,255,0.9); box-shadow: 0 0 8px rgba(255,255,255,0.6), 0 0 14px rgba(238,83,83,0.25); opacity:.6; animation: slaTwinkle 3s ease-in-out infinite alternate; }
.cloud-details .cd-bg .spark.s1 { top: 18%; left: 14%; }
.cloud-details .cd-bg .spark.s2 { bottom: 18%; right: 10%; }
@media (max-width: 900px) { .cloud-details .cd-grid { grid-template-columns: 1fr; } }
/* Cloud news & promotions */
.cloud-news { position: relative; padding: 44px 0; background: linear-gradient(180deg, #f8fafc, #eef2f7); overflow: hidden; }
.cloud-news .cn-head { text-align: center; margin-bottom: 14px; }
.cloud-news .cn-head h2 { margin: 0 0 6px; color:#0b132b; }
.cloud-news .cn-head .subtitle { color:#475569; margin:0; }
.cloud-news .cn-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.cloud-news .cn-card { position:relative; border-radius: 0; overflow: hidden; background: #fff; border: 1px solid rgba(2,6,23,0.06); box-shadow: 0 14px 40px rgba(2,6,23,0.08); text-decoration: none; color: inherit; display:flex; flex-direction: column; transition: transform .22s ease, box-shadow .22s ease; }
.cloud-news .cn-card:hover { transform: translateY(-6px); box-shadow: 0 24px 70px rgba(2,6,23,0.14); }
.cloud-news .cn-media { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.cloud-news .cn-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.cloud-news .cn-card:hover .cn-media img { transform: scale(1.06); }
.cloud-news .cn-badge { position:absolute; top: 10px; left: 10px; background:#0b1220; color:#fff; border-radius:999px; padding:4px 10px; font-weight:800; font-size:12px; letter-spacing:.3px; border:1px solid rgba(255,255,255,0.2); z-index:2; }
.cloud-news .cn-badge.hot { background: linear-gradient(135deg,#ee5353,#ff7a7a); border-color: transparent; box-shadow: 0 8px 28px rgba(238,83,83,0.35); }
.cloud-news .cn-body { padding: 14px; display:flex; flex-direction: column; gap: 8px; }
.cloud-news .cn-body h3 { margin: 0; color:#0b132b; font-size: 1.05rem; }
.cloud-news .cn-body p { margin: 0; color:#475569; }
.cloud-news .cn-meta { display:flex; justify-content: space-between; align-items:center; color:#6b7280; margin-top: 6px; }
.cloud-news .cn-meta .cta { color:#ee5353; font-weight:800; }
.cloud-news .cn-bg .orb { position:absolute; border-radius:50%; filter: blur(20px); opacity:.14; }
.cloud-news .cn-bg .orb.o1 { width: 340px; height: 340px; left: -80px; top: -120px; background: radial-gradient(circle, rgba(238,83,83,0.28), transparent 60%); }
.cloud-news .cn-bg .orb.o2 { width: 280px; height: 280px; right: -60px; bottom: -100px; background: radial-gradient(circle, rgba(99,102,241,0.22), transparent 60%); }
@media (max-width: 980px) { .cloud-news .cn-grid { grid-template-columns: 1fr; } }

/* Cloud packages accents */
.pricing-alt.pricing-cloud .pricing-card { padding-top: 26px; }
.pricing-alt.pricing-cloud .pc-icon { position:absolute; top: 10px; left: 12px; color: #ee5353; opacity: .4; font-size: 18px; }
.pricing-alt.pricing-cloud .pricing-card.popular .pc-icon { color: #b91c1c; opacity: .5; }

/* Plan Tiles (completely different design) */
.plan-tiles { position: relative; padding: 32px 0 44px; background: linear-gradient(180deg, #ffffff, #f7fafc); overflow: hidden; }
.plan-tiles .pt-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; align-items: stretch; }
.plan-tiles .pt-card { position: relative; border-radius: 16px; color: #0b1220; overflow: hidden; isolation: isolate; box-shadow: 0 16px 48px rgba(2,6,23,0.12); transform: translateZ(0); background: rgba(255,255,255,0.65); backdrop-filter: saturate(120%) blur(6px); }
.plan-tiles .pt-card:before { content:""; position:absolute; inset:-2px; z-index:0; border-radius:18px; padding:2px; background: conic-gradient(from 180deg at 50% 50%, #ee5353, #fb923c, #fbbf24, #22c55e, #3b82f6, #a855f7, #ee5353); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:.55; }
.plan-tiles .pt-card.popular:before { opacity:.85; filter: drop-shadow(0 20px 50px rgba(238,83,83,.25)); }
.plan-tiles .pt-card .aurora { position:absolute; inset:-20%; background: radial-gradient(60% 60% at 20% 10%, rgba(238,83,83,0.25), transparent 60%), radial-gradient(50% 60% at 80% 20%, rgba(59,130,246,0.25), transparent 60%), radial-gradient(60% 60% at 40% 80%, rgba(16,185,129,0.25), transparent 60%); filter: blur(40px); z-index:0; opacity:.6; }
.plan-tiles .pt-card .sheen { content:""; position:absolute; inset:0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 45%, transparent 60%); transform: translateX(-120%); z-index:1; pointer-events:none; }
.plan-tiles .pt-card:hover .sheen { animation: sheen-sweep .9s ease forwards; }
@keyframes sheen-sweep { to { transform: translateX(120%);} }
.plan-tiles .pt-card .pt-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.plan-tiles .pt-card .blob { position: absolute; border-radius: 50%; filter: blur(28px); opacity: .75; }
.plan-tiles .pt-card.basic .blob.b1 { width: 260px; height: 260px; left: -40px; top: -60px; background: radial-gradient(circle, rgba(238,83,83,0.40), rgba(238,83,83,0.08)); }
.plan-tiles .pt-card.basic .blob.b2 { width: 220px; height: 220px; right: -60px; bottom: -60px; background: radial-gradient(circle, rgba(255,180,180,0.36), rgba(255,180,180,0.05)); }
.plan-tiles .pt-card.pro .blob.b1 { width: 260px; height: 260px; left: -40px; top: -60px; background: radial-gradient(circle, rgba(51,102,255,0.40), rgba(51,102,255,0.08)); }
.plan-tiles .pt-card.pro .blob.b2 { width: 220px; height: 220px; right: -60px; bottom: -60px; background: radial-gradient(circle, rgba(170,200,255,0.36), rgba(170,200,255,0.05)); }
.plan-tiles .pt-card.scale .blob.b1 { width: 260px; height: 260px; left: -40px; top: -60px; background: radial-gradient(circle, rgba(16,185,129,0.40), rgba(16,185,129,0.08)); }
.plan-tiles .pt-card.scale .blob.b2 { width: 220px; height: 220px; right: -60px; bottom: -60px; background: radial-gradient(circle, rgba(167,243,208,0.36), rgba(167,243,208,0.05)); }
.plan-tiles .pt-card .pt-icon { position: absolute; top: 12px; left: 12px; color: rgba(11,18,32,0.85); opacity: .35; font-size: 20px; z-index: 1; }
.plan-tiles .pt-card .pt-head { position: relative; z-index: 2; padding: 16px 16px 8px; display:flex; align-items:center; gap: 10px; }
.plan-tiles .pt-card .pt-badge { display:inline-block; background: rgba(255,255,255,0.85); color:#0b1220; padding: 4px 10px; border-radius: 999px; font-weight: 800; font-size: 12px; border: 1px solid rgba(11,18,32,0.08); }
.plan-tiles .pt-card .pt-badge.hot { background: linear-gradient(135deg,#ee5353,#ff7a7a); color:#fff; border-color: transparent; box-shadow: 0 8px 28px rgba(238,83,83,0.35); }
.plan-tiles .pt-card .pt-name { margin: 0; font-size: 1.1rem; font-weight: 900; color: #0b1220; }
.plan-tiles .pt-card .pt-price { position: relative; z-index: 2; padding: 0 16px; color: #0b1220; display:flex; align-items: baseline; gap:6px; }
.plan-tiles .pt-card .pt-price strong { font-size: 1.8rem; }
.plan-tiles .pt-card .pt-price .per { margin-left: 2px; font-size: .95rem; color: #374151; }
.plan-tiles .pt-card .pt-price .billing-note { margin-left: auto; font-size: .85rem; color:#6b7280; }
.plan-tiles .pt-card .pt-list { position: relative; z-index: 2; list-style: none; padding: 10px 16px; margin: 0; display: grid; gap: 8px; }
.plan-tiles .pt-card .pt-list li { color: #1f2937; display:flex; align-items:center; gap:8px; }
.plan-tiles .pt-card .pt-list i { color: #16a34a; }
.plan-tiles .pt-card .pt-cta { position: relative; z-index: 2; padding: 12px 16px 16px; display:flex; align-items:center; gap:10px; }
.plan-tiles .pt-card .pt-note { color: #ee5353; font-weight: 700; }
.plan-tiles .pt-card { transition: transform .25s ease, box-shadow .25s ease; will-change: transform; }
.plan-tiles .pt-card:hover { transform: translateY(-6px) rotateX(1deg) rotateY(-1deg); box-shadow: 0 26px 70px rgba(2,6,23,0.18); }

/* Billing toggle styles */
.plan-tiles .billing-toggle { position: relative; z-index: 5; }
.plan-tiles .btn-toggle { background: #fff; color:#0b1220; border:1px solid #e5e7eb; padding:8px 14px; border-radius: 999px; font-weight:700; font-size:.95rem; cursor:pointer; }
.plan-tiles .btn-toggle .save { color:#ee5353; font-weight:800; margin-left:4px; }
.plan-tiles .btn-toggle.active { background: linear-gradient(135deg,#ee5353,#ff7a7a); color:#fff; border-color: transparent; box-shadow: 0 10px 30px rgba(238,83,83,0.35); }
.plan-tiles .btn-toggle:focus { outline: 3px solid rgba(59,130,246,.45); outline-offset: 2px; }

/* Subtle grid lines in background for advanced look */
.plan-tiles:after { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(2,6,23,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(2,6,23,0.04) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent); pointer-events:none; }
@media (max-width: 980px){ .plan-tiles .pt-grid { grid-template-columns: 1fr; } }

/* Reduced motion: disable sweeps/tilt */
@media (prefers-reduced-motion: reduce){
    .plan-tiles .pt-card:hover { transform: none; }
    .plan-tiles .pt-card .sheen { display:none; }
}

/* Sri Lanka sections (Website Redesign) */
.lk-focus { position:relative; padding: 36px 0 44px; background: linear-gradient(180deg,#ffffff,#f8fafc); overflow:hidden; }
.lk-focus .lk-bg .orb { position:absolute; border-radius:50%; filter: blur(40px); opacity:.28; }
.lk-focus .lk-bg .o1 { width:220px; height:220px; top:-50px; left:-60px; background: radial-gradient(circle, rgba(238,83,83,.35), transparent 60%); }
.lk-focus .lk-bg .o2 { width:240px; height:240px; bottom:-60px; right:-80px; background: radial-gradient(circle, rgba(59,130,246,.28), transparent 60%); }
.lk-focus .lk-bg .spark { position:absolute; width:2px; height:2px; background: #fca5a5; border-radius:2px; opacity:.6; animation: twinkle 2.8s infinite ease-in-out; }
.lk-focus .lk-bg .s1 { top:18%; left:8%; }
.lk-focus .lk-bg .s2 { bottom:22%; right:12%; animation-delay:.9s; }

.lk-industries { padding: 32px 0 40px; background:#ffffff; }
.lk-industries .ii-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:14px; }
.lk-industries .i-card { display:flex; flex-direction:column; background:#fff; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; color:inherit; text-decoration:none; box-shadow:0 10px 30px rgba(2,6,23,0.06); transition: transform .25s ease, box-shadow .25s ease; }
.lk-industries .i-card:hover { transform: translateY(-4px); box-shadow:0 26px 70px rgba(2,6,23,0.12); }
.lk-industries .i-media { height:160px; background:#0b1220 center/cover no-repeat; }
.lk-industries .i-body { padding:14px; }
.lk-industries .i-body h3 { margin: 0 0 4px; font-size:1.1rem; }
.lk-industries .i-body p { margin:0; color:#334155; }

.lk-payments { padding: 32px 0 40px; background: linear-gradient(180deg,#f8fafc,#ffffff); }
.lk-payments .pm-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:14px; }
.lk-payments .p-card { background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:16px; box-shadow:0 10px 30px rgba(2,6,23,0.06); }
.lk-payments .p-card h3 { margin:0 0 8px; font-size:1.05rem; }
.lk-payments .p-card ul { margin:0; padding-left: 16px; color:#1f2937; }

.lk-pricing { padding: 20px 0 36px; }

.lk-timeline { padding: 32px 0 40px; background:#ffffff; }
.lk-timeline .tl-steps { list-style:none; padding:0; margin:0; display:grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap:12px; counter-reset: step; }
.lk-timeline .tl-steps li { background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:12px; text-align:center; box-shadow:0 10px 30px rgba(2,6,23,0.06); }
.lk-timeline .tl-steps .num { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#fee2e2; color:#ef4444; font-weight:800; margin-bottom:6px; }
.lk-timeline .tl-steps strong { display:block; margin-bottom:4px; }
.lk-timeline .tl-steps p { margin:0; color:#334155; font-size:.95rem; }

.lk-cta { position:relative; padding: 36px 0 52px; background: linear-gradient(180deg,#ffffff,#f8fafc); overflow:hidden; }
.lk-cta .cta-inner { text-align:center; background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:20px; box-shadow:0 20px 60px rgba(2,6,23,0.08); }
.lk-cta .cta-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:10px; }
.lk-cta-bg .orb { position:absolute; border-radius:50%; filter: blur(40px); opacity:.28; }
.lk-cta-bg .o1 { width:240px; height:240px; top:-60px; left:-60px; background: radial-gradient(circle, rgba(238,83,83,.35), transparent 60%); }
.lk-cta-bg .o2 { width:260px; height:260px; bottom:-70px; right:-80px; background: radial-gradient(circle, rgba(16,185,129,.28), transparent 60%); }
.lk-cta-bg .spark { position:absolute; width:2px; height:2px; background: #93c5fd; border-radius:2px; opacity:.6; animation: twinkle 2.6s infinite ease-in-out; }
.lk-cta-bg .s1 { top:22%; left:12%; }
.lk-cta-bg .s2 { bottom:24%; right:14%; animation-delay: .7s; }

@media (max-width: 980px){
    .lk-industries .ii-grid { grid-template-columns: 1fr; }
    .lk-payments .pm-grid { grid-template-columns: 1fr; }
    .lk-timeline .tl-steps { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

/* Website Redesign hero accents */
.wr-hero { position: relative; overflow:hidden; }
.wr-hero:after { content:""; position:absolute; inset:0; background: radial-gradient(60% 60% at 10% 20%, rgba(238,83,83,.12), transparent 60%), radial-gradient(60% 60% at 80% 0%, rgba(59,130,246,.10), transparent 60%); pointer-events:none; }
.wr-hero .container-xl { position: relative; z-index: 1; padding: 26px 0 30px; }

/* Before / After showcase */
.wr-before-after { position:relative; padding: 28px 0 36px; background: linear-gradient(180deg,#ffffff,#f8fafc); overflow:hidden; }
.wr-before-after .ba-grid { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:14px; }
.wr-before-after .ba-card { position:relative; border-radius:14px; overflow:hidden; background:#fff; border:1px solid #e5e7eb; box-shadow:0 12px 36px rgba(2,6,23,0.08); }
.wr-before-after .ba-card figcaption { position:absolute; top:10px; left:10px; z-index:2; background:#0b1220; color:#fff; font-weight:800; font-size:.85rem; padding:4px 10px; border-radius:999px; }
.wr-before-after .ba-media { height:260px; background:#0b1220 center/cover no-repeat; transform: scale(1); transition: transform .5s ease; }
.wr-before-after .ba-card:hover .ba-media { transform: scale(1.05); }
.wr-before-after .ba-bg .orb { position:absolute; border-radius:50%; filter: blur(40px); opacity:.22; }
.wr-before-after .ba-bg .o1 { width:220px; height:220px; top:-40px; left:-60px; background: radial-gradient(circle, rgba(238,83,83,.35), transparent 60%); }
.wr-before-after .ba-bg .o2 { width:240px; height:240px; bottom:-40px; right:-80px; background: radial-gradient(circle, rgba(16,185,129,.28), transparent 60%); }

/* Sri Lanka case studies */
.lk-cases { padding: 28px 0 40px; background:#ffffff; }
.lk-cases .cs-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:14px; }
.lk-cases .cs-card { display:flex; flex-direction:column; background:#fff; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; text-decoration:none; color:inherit; box-shadow:0 12px 36px rgba(2,6,23,0.08); transition: transform .25s ease, box-shadow .25s ease; }
.lk-cases .cs-card:hover { transform: translateY(-4px); box-shadow:0 26px 70px rgba(2,6,23,0.12); }
.lk-cases .cs-media { height:160px; background:#0b1220 center/cover no-repeat; }
.lk-cases .cs-body { padding:14px; }
.lk-cases .cs-body h3 { margin:0 0 6px; font-size:1.1rem; }
.lk-cases .metrics { list-style:none; padding:0; margin:0; display:grid; gap:6px; color:#1f2937; }
.lk-cases .metrics i { color:#16a34a; }

@media (max-width: 980px){
    .wr-before-after .ba-grid { grid-template-columns: 1fr; }
    .lk-cases .cs-grid { grid-template-columns: 1fr; }
}

/* Feature Reads (readable feature section) */
.feature-reads { position: relative; padding: 44px 0; background: linear-gradient(180deg,#f8fafc,#ffffff); overflow:hidden; }
.feature-reads .fr-head { text-align:center; margin-bottom: 14px; }
.feature-reads .fr-grid { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:18px; }
.feature-reads .fr-card { display:grid; grid-template-columns: 260px 1fr; gap:14px; align-items:center; background:#fff; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; box-shadow:0 10px 30px rgba(2,6,23,0.06); transition: transform .25s ease, box-shadow .25s ease; }
.feature-reads .fr-card:hover { transform: translateY(-4px); box-shadow:0 26px 70px rgba(2,6,23,0.12); }
.feature-reads .fr-media { width:100%; height:100%; min-height:160px; background:#0b1220; position:relative; }
.feature-reads .fr-media img { width:100%; height:100%; object-fit: cover; display:block; opacity:.85; }
.feature-reads .fr-body { padding: 16px; }
.feature-reads .eyebrow { display:inline-block; font-size:.78rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#ef4444; background: #fee2e2; border-radius:999px; padding:4px 10px; }
.feature-reads h3 { margin:8px 0 6px; font-size:1.25rem; }
.feature-reads p { color:#334155; }
.feature-reads .points { list-style:none; padding:0; margin:10px 0; display:grid; gap:6px; }
.feature-reads .points li { color:#1f2937; display:flex; gap:8px; align-items:center; }
.feature-reads .points i { color:#16a34a; }
.feature-reads .learn { font-weight:800; color:#0b1220; text-decoration:none; }
.feature-reads .learn:hover { color:#ef4444; }
.feature-reads .fr-bg .orb { position:absolute; border-radius:50%; filter: blur(40px); opacity:.3; }
.feature-reads .fr-bg .o1 { width:240px; height:240px; top:-40px; left:-40px; background: radial-gradient(circle, rgba(238,83,83,.35), transparent 60%); }
.feature-reads .fr-bg .o2 { width:260px; height:260px; bottom:-60px; right:-60px; background: radial-gradient(circle, rgba(59,130,246,.28), transparent 60%); }
.feature-reads .fr-bg .spark { position:absolute; width:2px; height:2px; background: #fca5a5; border-radius:2px; opacity:.6; animation: twinkle 2.8s infinite ease-in-out; }
.feature-reads .fr-bg .s1 { top:20%; left:10%; }
.feature-reads .fr-bg .s2 { bottom:25%; right:15%; animation-delay:.9s; }

/* Support Contact */
.support-contact { position:relative; padding: 36px 0 48px; background: linear-gradient(180deg,#ffffff,#f8fafc); overflow:hidden; }
.support-contact .sc-head { text-align:center; margin-bottom: 14px; }
.support-contact .sc-grid { display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:14px; }
.support-contact .sc-card { display:flex; gap:12px; align-items:flex-start; padding: 14px; background:#ffffff; border:1px solid #e5e7eb; border-radius:14px; text-decoration:none; color:inherit; box-shadow:0 10px 30px rgba(2,6,23,0.06); transition: transform .25s ease, box-shadow .25s ease; }
.support-contact .sc-card:hover { transform: translateY(-4px); box-shadow:0 26px 70px rgba(2,6,23,0.12); }
.support-contact .sc-ico { display:grid; place-items:center; width:46px; height:46px; border-radius:12px; background: #fee2e2; color:#ef4444; flex:0 0 auto; }
.support-contact .sc-ico.pulse { animation: pulse 1.8s infinite; }
.support-contact .sc-body h3 { margin:0 0 4px; font-size:1.05rem; }
.support-contact .sc-body p { margin:0 0 6px; color:#334155; }
.support-contact .sc-cta { font-weight:800; color:#0b1220; }
.support-contact .sc-card.chat .sc-ico { background:#e0e7ff; color:#3b82f6; }
.support-contact .sc-card.ticket .sc-ico { background:#ede9fe; color:#7c3aed; }
.support-contact .sc-card.whatsapp .sc-ico { background:#dcfce7; color:#16a34a; }
.support-contact .sc-card.emergency .sc-ico { background:#fee2e2; color:#ef4444; }
.support-contact .sc-card:focus { outline: 3px solid rgba(59,130,246,.45); outline-offset: 3px; }
.support-contact .sc-bg .orb { position:absolute; border-radius:50%; filter: blur(40px); opacity:.3; }
.support-contact .sc-bg .o1 { width:220px; height:220px; top:-40px; left:-40px; background: radial-gradient(circle, rgba(238,83,83,.35), transparent 60%); }
.support-contact .sc-bg .o2 { width:240px; height:240px; bottom:-50px; right:-50px; background: radial-gradient(circle, rgba(16,185,129,.28), transparent 60%); }
.support-contact .sc-bg .spark { position:absolute; width:2px; height:2px; background: #93c5fd; border-radius:2px; opacity:.6; animation: twinkle 2.6s infinite ease-in-out; }
.support-contact .sc-bg .s1 { top:18%; left:8%; }
.support-contact .sc-bg .s2 { bottom:22%; right:12%; animation-delay: .8s; }

@keyframes pulse { 0%,100% { transform: scale(1);} 50% { transform: scale(1.08);} }
@keyframes twinkle { 0%,100% { opacity:.3; transform: translateY(0);} 50% { opacity:1; transform: translateY(-2px);} }

@media (max-width: 980px){
    .feature-reads .fr-grid { grid-template-columns: 1fr; }
    .feature-reads .fr-card { grid-template-columns: 1fr; }
    .support-contact .sc-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}


/* Neo pricing cards (Cloud Packages redesigned) */
.pricing-neo { position: relative; padding: 32px 0 44px; background: linear-gradient(180deg, #ffffff, #f8fafc); overflow: hidden; }
.pricing-neo .pn-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; align-items: stretch; }
.pricing-neo .pn-card { position: relative; }
.pricing-neo .pn-inner { position: relative; border-radius: 16px; background: linear-gradient(180deg, #ffffff, #fbfdff); border: 1px solid rgba(2,6,23,0.06); box-shadow: 0 16px 48px rgba(2,6,23,0.08); padding: 18px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.pricing-neo .pn-inner::before { content:""; position:absolute; inset:-30% -30% auto auto; width:260px; height:260px; border-radius:50%; background: radial-gradient(circle, rgba(238,83,83,0.18), rgba(238,83,83,0)); filter: blur(18px); pointer-events:none; }
.pricing-neo .pn-inner::after { content:""; position:absolute; top:-40%; left:-160%; width:140%; height:180%; background: linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,0.28), rgba(255,255,255,0)); transform: rotate(12deg); opacity:0; pointer-events:none; }
.pricing-neo .pn-card:hover .pn-inner { transform: translateY(-8px); box-shadow: 0 28px 90px rgba(2,6,23,0.16); border-color: rgba(2,6,23,0.12); }
.pricing-neo .pn-card:hover .pn-inner::after { animation: sheen-sweep 900ms ease forwards; opacity:1; }
.pricing-neo .pn-ribbon { position:absolute; top: 10px; right: -40px; transform: rotate(36deg); background: #0b1220; color:#fff; padding: 6px 60px; font-weight: 900; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 10px 30px rgba(2,6,23,0.08); }
.pricing-neo .pn-ribbon.hot { background: linear-gradient(135deg,#ee5353,#ff7a7a); border-color: transparent; box-shadow: 0 10px 30px rgba(238,83,83,0.3); }
.pricing-neo .pn-icon { position:absolute; top: 10px; left: 12px; color: #ee5353; opacity:.5; font-size: 18px; }
.pricing-neo .pn-header { margin: 4px 0 6px; }
.pricing-neo .pn-name { margin: 0; font-size: 1.18rem; color: #0b132b; font-weight: 900; }
.pricing-neo .pn-desc { margin: 2px 0 6px; color: #475569; }
.pricing-neo .pn-price { color: #0b132b; }
.pricing-neo .pn-price strong { font-size: 1.9rem; }
.pricing-neo .pn-price .per { margin-left: 2px; font-size: .95rem; color: #475569; }
.pricing-neo .pn-features { list-style: none; padding: 0; margin: 8px 0 12px; display: grid; gap: 8px; }
.pricing-neo .pn-features li { color: #1f2937; display: flex; gap: 8px; align-items: center; }
.pricing-neo .pn-features i { color: #16a34a; }
.pricing-neo .pn-cta { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.pricing-neo .pn-note { color: #ee5353; font-weight: 700; }
@media (max-width: 980px){ .pricing-neo .pn-grid { grid-template-columns: 1fr; } }

/* Glass tile grid (Miracle section tiles) */
.glass-tiles { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.glass-tiles .gt-card { position: relative; display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; padding: 10px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.08); background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.04)); box-shadow: 0 16px 40px rgba(2,6,23,0.45); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; overflow: hidden; }
.glass-tiles .gt-card:hover { transform: translateY(-4px); box-shadow: 0 22px 60px rgba(2,6,23,0.55); border-color: rgba(255,255,255,0.18); }
.glass-tiles .gt-thumb { width: 72px; height: 56px; border-radius: 10px; background-size: cover; background-position: center; flex-shrink: 0; }
.glass-tiles .gt-body { display: flex; flex-direction: column; line-height: 1.25; }
.glass-tiles .gt-body h4 { margin: 0 0 6px 0; color: #fff; }
.glass-tiles .gt-body p { margin: 0; color: #cfe1ff; }
@media (max-width: 980px){ .glass-tiles { grid-template-columns: 1fr; } }

/* Calculator polish for Cloud page */
.cloud-calc .calc-badges { display:flex; gap: 10px; justify-content:center; flex-wrap: wrap; margin: 8px 0 12px; padding:0; list-style:none; }
.cloud-calc .calc-badges li { display:flex; align-items:center; gap:8px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: #eaf2ff; }
.cloud-calc .summary-header h3 { color: #fff; }
.cloud-calc .summary-total .total-price { color:#fff; }
.cloud-calc .summary-breakdown p { color: rgba(234, 242, 255, 0.85); }

/* ==========================
     SLA Showcase (Website Maintenance)
     ========================== */
.sla-showcase {
    position: relative;
    padding: 56px 0 72px;
    background: linear-gradient(180deg, rgba(238, 83, 83, 0.04) 0%, rgba(238, 83, 83, 0.02) 40%, rgba(17, 17, 17, 0) 100%);
    overflow: clip;
}
.sla-showcase .subtitle {
    color: #6b7280;
    margin-bottom: 28px;
    text-align: center;
}
.sla-bg {
    pointer-events: none;
    position: absolute;
    inset: 0;
}
.sla-bg .orb {
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    filter: blur(30px);
    opacity: 0.16; /* lighter */
    background: radial-gradient(circle at 30% 30%, #ffd6d6, #ff9f9f 55%, #ee5353 100%);
    animation: slaDrift 18s ease-in-out infinite;
}
.sla-bg .orb.o1 { top: -60px; left: -80px; }
.sla-bg .orb.o2 { bottom: -80px; right: -60px; animation-delay: -6s; }

/* subtle sparkles */
.sla-bg .spark { position:absolute; width:6px; height:6px; border-radius:50%; background: rgba(255,255,255,0.9); box-shadow: 0 0 8px rgba(255,255,255,0.6), 0 0 14px rgba(238,83,83,0.25); opacity:.7; animation: slaTwinkle 2.8s ease-in-out infinite alternate; }
.sla-bg .spark.s1 { top: 18%; left: 14%; animation-delay: .2s; }
.sla-bg .spark.s2 { top: 28%; right: 18%; animation-delay: .8s; }
.sla-bg .spark.s3 { bottom: 22%; left: 26%; animation-delay: 1.4s; }
.sla-bg .spark.s4 { bottom: 16%; right: 14%; animation-delay: 2s; }

.sla-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}
.sla-card {
    position: relative;
    padding: 18px 18px 16px;
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.94) 100%);
    border: 1px solid rgba(2,6,23,0.06);
    box-shadow: 0 6px 18px rgba(2,6,23,0.08);
    transition: transform .25s ease, box-shadow .25s ease;
    overflow: hidden;
}
.sla-card::after { /* sheen */
    content: "";
    position: absolute;
    top: -20%;
    left: -40%;
    width: 40%;
    height: 140%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
    transform: skewX(-20deg) translateX(-120%);
}
.sla-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(2,6,23,0.18);
}
.sla-card:hover::after {
    animation: sheenSweep 0.9s ease forwards;
}
.sla-card .sla-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.sla-card .sla-prio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    letter-spacing: .3px;
    font-size: 14px;
    padding: 6px 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ee5353, #b32222);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}
.sla-card.p2 .sla-prio { background: linear-gradient(90deg, #ff8d5a, #e04b2b); }
.sla-card.p3 .sla-prio { background: linear-gradient(90deg, #7ccf79, #2aa34a); }
.sla-card .sla-window {
    color: #6b7280;
    font-size: 13px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px dashed rgba(2,6,23,0.12);
}
.sla-card .sla-desc {
    color: #475569;
    margin: 6px 0 12px;
    font-size: 14px;
}

.sla-timeline { margin-bottom: 10px; }
.sla-timeline .bar {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(2,6,23,0.08), rgba(2,6,23,0.04));
    overflow: hidden;
}
.sla-timeline .bar .fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0%;
    background: linear-gradient(90deg, #ee5353 0%, #ff8d8d 50%, #ffd1d1 100%);
    box-shadow: 0 0 18px rgba(238,83,83,0.35);
    animation: fillRun 5.5s ease-out infinite alternate;
}
.sla-card.p2 .sla-timeline .bar .fill { animation-duration: 6.5s; background: linear-gradient(90deg, #ff7a59, #ffc3a6); }
.sla-card.p3 .sla-timeline .bar .fill { animation-duration: 7.2s; background: linear-gradient(90deg, #2aa34a, #9de6ad); }

.sla-timeline .bar .mark {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(255,255,255,0.9);
    color: #0b132b;
    border: 1px solid rgba(2,6,23,0.08);
}
.sla-timeline .bar .mark.ack  { left: 22%; }
.sla-timeline .bar .mark.fix  { left: 58%; }
.sla-timeline .bar .mark.done { left: 94%; }

.sla-timeline .ticks {
    display: flex;
    justify-content: space-between;
    color: #9ca3af;
    font-size: 11px;
    padding: 6px 2px 0;
}

.sla-points {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: 8px;
}
.sla-points li { color: #1f2937; font-size: 14px; }
.sla-points i { color: #ee5353; margin-right: 6px; }

.sla-guarantees {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}
.sla-guarantees li {
    list-style: none;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(2,6,23,0.10);
    background: rgba(255,255,255,0.65);
    color: #0b132b;
    font-size: 13px;
}
.sla-guarantees i { color: #ee5353; margin-right: 6px; }

@keyframes fillRun {
    0% { width: 6%; }
    40% { width: 42%; }
    70% { width: 78%; }
    100% { width: 96%; }
}
@keyframes sheenSweep {
    0% { transform: skewX(-20deg) translateX(-120%); opacity: 0; }
    20% { opacity: 0.7; }
    100% { transform: skewX(-20deg) translateX(360%); opacity: 0; }
}
@keyframes slaDrift {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(12px, -10px, 0); }
}

@keyframes slaTwinkle {
    from { transform: scale(0.9); opacity: .5; }
    to { transform: scale(1.15); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .sla-bg .orb { animation: none; }
        .sla-bg .spark { animation: none; opacity: .4; }
    .sla-timeline .bar .fill { animation: none; width: 96%; }
    .sla-card:hover { transform: none; }
    .sla-card:hover::after { animation: none; }
}

/* ==========================
     FAQ (Redesigned) and Support Connect
     ========================== */
.faq-alt {
    position: relative;
    padding: 56px 0 40px;
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    overflow: hidden;
}
.faq-alt .faq-head { text-align: center; margin-bottom: 16px; }
.faq-alt .faq-head h2 { margin: 0 0 6px; color: #0b132b; }
.faq-alt .faq-head .subtitle { color: #475569; margin: 0; }
.faq-alt .faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 14px; }
.faq-alt .faq-item { border-radius: 12px; background: #fff; border: 1px solid rgba(2,6,23,0.06); box-shadow: 0 10px 30px rgba(2,6,23,0.06); overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; }
.faq-alt .faq-item[open] { border-color: rgba(238,83,83,0.4); box-shadow: 0 16px 44px rgba(238,83,83,0.14); }
.faq-alt .faq-item > summary { list-style: none; cursor: pointer; padding: 14px 16px; display: flex; align-items: center; gap: 10px; font-weight: 700; color: #0b132b; position: relative; }
.faq-alt .faq-item > summary::-webkit-details-marker { display: none; }
.faq-alt .faq-item > summary .q { flex: 1; }
.faq-alt .faq-item > summary .chev { width: 18px; height: 18px; border-right: 2px solid #ee5353; border-bottom: 2px solid #ee5353; transform: rotate(-45deg); transition: transform .2s ease; }
.faq-alt .faq-item[open] > summary .chev { transform: rotate(45deg); }
.faq-alt .faq-item .a { padding: 0 16px 14px 16px; color: #475569; }
.faq-alt .faq-item:hover { border-color: rgba(2,6,23,0.12); box-shadow: 0 14px 36px rgba(2,6,23,0.10); }
.faq-alt .faq-bg .glow { position: absolute; border-radius: 50%; filter: blur(20px); opacity: .22; }
.faq-alt .faq-bg .glow.g1 { width: 340px; height: 340px; left: -80px; top: -80px; background: radial-gradient(circle, rgba(238,83,83,0.35), transparent 60%); }
.faq-alt .faq-bg .glow.g2 { width: 280px; height: 280px; right: -60px; bottom: -60px; background: radial-gradient(circle, rgba(99,102,241,0.22), transparent 60%); }
@media (max-width: 900px) { .faq-alt .faq-grid { grid-template-columns: 1fr; } }

.support-connect, .support-friendly {
    position: relative;
    padding: 40px 0 64px;
    background: linear-gradient(180deg, #eef2f7, #ffffff);
    overflow: hidden;
}
.support-connect .sc-head, .support-friendly .sc-head { text-align: center; margin-bottom: 16px; }
.support-connect .sc-head h3, .support-friendly .sc-head h3 { margin: 0 0 6px; color: #0b132b; }
.support-connect .sc-head .subtitle, .support-friendly .sc-head .subtitle { color: #475569; margin: 0; }
.support-connect .sc-grid, .support-friendly .sc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.support-connect .sc-card, .support-friendly .sc-card { display:flex; align-items:center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(2,6,23,0.08); background: #fff; text-decoration: none; color: inherit; box-shadow: 0 10px 28px rgba(2,6,23,0.07); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; min-height: 86px; }
.support-connect .sc-card:hover, .support-friendly .sc-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(2,6,23,0.10); border-color: rgba(2,6,23,0.12); }
.support-connect .sc-card .sc-icon, .support-friendly .sc-card .sc-icon { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; background:#0b1220; color:#fff; font-size:18px; }
.support-connect .sc-card.to-message .sc-icon { background: linear-gradient(135deg,#0b1220,#1d2540); }
.support-connect .sc-card.to-quote .sc-icon { background: linear-gradient(135deg,#ee5353,#ff7a7a); }
.support-connect .sc-card.to-support .sc-icon { background: linear-gradient(135deg,#1d4ed8,#2563eb); }
.support-friendly .sc-card.to-whatsapp .sc-icon, .support-connect .sc-card.to-whatsapp .sc-icon { background: linear-gradient(135deg,#22c55e,#16a34a); }
.support-friendly .sc-card.to-ticket .sc-icon, .support-connect .sc-card.to-ticket .sc-icon { background: linear-gradient(135deg,#1d4ed8,#2563eb); }
.support-friendly .sc-card.to-chat .sc-icon, .support-connect .sc-card.to-chat .sc-icon { background: linear-gradient(135deg,#8b5cf6,#a78bfa); }
.support-connect .sc-card .sc-body, .support-friendly .sc-card .sc-body { display:flex; flex-direction:column; line-height:1.25; }
.support-connect .sc-card .sc-body strong, .support-friendly .sc-card .sc-body strong { font-weight:800; color:#0b132b; }
.support-connect .sc-card .sc-body span, .support-friendly .sc-card .sc-body span { color:#475569; font-size:0.95rem; }
.support-connect .sc-card .sc-arrow, .support-friendly .sc-card .sc-arrow { margin-left:auto; color:#ee5353; font-weight:800; transition: transform .18s ease; }
.support-connect .sc-card:hover .sc-arrow, .support-friendly .sc-card:hover .sc-arrow { transform: translateX(2px); }
.support-connect .sc-bg .orb { position:absolute; border-radius:50%; filter: blur(20px); opacity:.18; }
.support-connect .sc-bg .orb.o1 { width: 340px; height: 340px; left: -80px; top: -120px; background: radial-gradient(circle, rgba(238,83,83,0.28), transparent 60%); }
.support-connect .sc-bg .orb.o2 { width: 280px; height: 280px; right: -60px; bottom: -100px; background: radial-gradient(circle, rgba(99,102,241,0.22), transparent 60%); }

@media (prefers-reduced-motion: reduce) {
    .faq-alt .faq-item,
    .support-connect .sc-card,
    .support-friendly .sc-card { transition: none !important; }
}

/* --- Cloud Included (What's included) --- */
.cloud-included {
    position: relative;
    padding: 56px 0;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
}
.cloud-included .ci-head { text-align: center; margin-bottom: 16px; }
.cloud-included .ci-head h2 { margin: 0 0 6px; color: #0b132b; }
.cloud-included .ci-head .subtitle { color: #475569; margin: 0; }
.cloud-included .cd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 980px){ .cloud-included .cd-grid { grid-template-columns: 1fr; } }
.cloud-included .cd-card { position: relative; border-radius: 14px; border: 1px solid rgba(2,6,23,0.08); background: #fff; box-shadow: 0 12px 36px rgba(2,6,23,0.08); padding: 16px; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; overflow: hidden; }
.cloud-included .cd-card:hover { transform: translateY(-4px); box-shadow: 0 22px 60px rgba(2,6,23,0.12); border-color: rgba(2,6,23,0.12); }
.cloud-included .cd-card::after { content:""; position:absolute; top:-40%; left:-160%; width:140%; height:180%; background: linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,0.28), rgba(255,255,255,0)); transform: rotate(12deg); opacity:0; pointer-events:none; }
.cloud-included .cd-card:hover::after { animation: sheen-sweep 900ms ease forwards; opacity:1; }
.cloud-included .cd-header { display:flex; align-items:center; gap: 10px; margin-bottom: 6px; }
.cloud-included .cd-icon { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg,#ee5353,#ff7a7a); color: #fff; display:inline-flex; align-items:center; justify-content:center; }
.cloud-included .cd-list { list-style: none; padding: 0; margin: 0; display:grid; gap: 8px; }
.cloud-included .cd-list li { color:#1f2937; display:flex; align-items:center; gap:8px; }
.cloud-included .ci-cta .btn { min-width: 220px; }
.cloud-included .ci-bg .orb { position:absolute; border-radius:50%; filter: blur(20px); opacity:.14; }
.cloud-included .ci-bg .orb.o1 { width: 340px; height: 340px; left: -80px; top: -120px; background: radial-gradient(circle, rgba(238,83,83,0.28), transparent 60%); }
.cloud-included .ci-bg .orb.o2 { width: 280px; height: 280px; right: -60px; bottom: -100px; background: radial-gradient(circle, rgba(99,102,241,0.22), transparent 60%); }
.cloud-included .ci-bg .spark { position:absolute; width:6px; height:6px; border-radius:50%; background: rgba(255,255,255,0.9); box-shadow: 0 0 8px rgba(255,255,255,0.6), 0 0 14px rgba(238,83,83,0.25); opacity:.6; animation: slaTwinkle 3s ease-in-out infinite alternate; }
.cloud-included .ci-bg .spark.s1 { top: 18%; left: 14%; }
.cloud-included .ci-bg .spark.s2 { bottom: 18%; right: 10%; }

/* (reverted) removed lf-grid/lf-card styles */

/* ==========================
    WordPress Hosting: features and pricing
    ========================== */
.hosting-hero { position: relative; overflow:hidden; }
.hosting-hero:after { content:""; position:absolute; inset:0; background: radial-gradient(60% 60% at 10% 20%, rgba(96,165,250,.14), transparent 60%), radial-gradient(60% 60% at 80% 0%, rgba(52,211,153,.12), transparent 60%); pointer-events:none; }
.hosting-hero .container-xl { position: relative; z-index: 1; padding: 26px 0 30px; }

.hosting-features { position: relative; padding: 44px 0; background: linear-gradient(180deg,#f8fafc,#ffffff); }
.hosting-features .hf-grid { display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:14px; }
.hosting-features .hf-card { display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid #e5e7eb;  padding:14px; box-shadow:0 10px 30px rgba(2,6,23,0.06); transition: transform .22s ease, box-shadow .22s ease; }
.hosting-features .hf-card:hover { transform: translateY(-4px); box-shadow:0 22px 60px rgba(2,6,23,0.10); }
.hosting-features .hf-icon { width:44px; height:44px;  display:inline-flex; align-items:center; justify-content:center; background: linear-gradient(135deg,#60a5fa,#34d399); color:#fff; font-size:20px; flex:none; }
.hosting-features .hf-body h3 { margin:0 0 6px 0; font-size:1.1rem; }
.hosting-features .hf-body p { margin:0; color:#475569; }
@media (max-width: 980px){ .hosting-features .hf-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px){ .hosting-features .hf-grid { grid-template-columns: 1fr; } }

.wp-pricing { position: relative; padding: 50px 0 40px; background: linear-gradient(180deg, #eef2f7, #ffffff); overflow:hidden; }
.wp-pricing .wp-head h2 { margin:0 0 6px; color:#0b132b; }
.wp-pricing .wp-head .subtitle { color:#475569; margin:0; }
.wp-pricing .plan-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px; }
.wp-pricing .price-card { position: relative;  border:1px solid #bfdbfe; background:#fff; box-shadow:0 1px 2px rgba(2,6,23,0.04); overflow:hidden; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; display:flex; flex-direction:column; }
.wp-pricing .price-card:hover { transform: translateY(-2px); box-shadow:0 6px 18px rgba(2,6,23,0.06); border-color: #93c5fd; }
.wp-pricing .price-card::before { content:""; position:absolute; top:0; left:0; right:0; height:0; background: transparent; }
.wp-pricing .pc-badge { position:absolute; top:10px; right:10px; background: var(--accent, #34d399); color:#fff; font-size:.78rem; font-weight:800; padding:4px 8px; border-radius:999px; box-shadow:0 8px 24px rgba(2,6,23,0.18); }
.wp-pricing .popular { transform: translateY(-2px); box-shadow:0 26px 70px rgba(2,6,23,0.14); }
.wp-pricing .pc-head { padding:12px 16px 0; display:flex; flex-direction:column; gap:4px; }
.wp-pricing .pc-name { font-weight:800; color:#0f172a; display:flex; align-items:center; gap:8px; }
/* Plan note becomes muted subtitle like the reference */
.wp-pricing .pc-note { align-self:flex-start; font-size:.9rem; font-weight:500; letter-spacing:0; padding:0; border-radius:0; color:#64748b; background: transparent; border:none; }
/* Price row like the reference: left-aligned price + green save badge */
.wp-pricing .pc-price { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:6px 16px 0; padding:8px 0 0; border-radius:0; background: transparent; border:none; }
.wp-pricing .pc-price .amount { font-size:2.4rem; font-weight:900; color:#0f172a; line-height:1; }
.wp-pricing .popular .pc-price .amount { font-size:2.6rem; }
.wp-pricing .pc-price .amount .cur { font-size:1rem; vertical-align:super; margin-right:2px; color:#0f172a; }
.wp-pricing .pc-price .term { font-weight:600; color:#64748b; background: transparent; border:none; border-radius:0; padding:0; }
/* New: Save badge and tiny terms below the price */
.wp-pricing .pc-save { background:#16a34a; color:#ffffff; font-weight:800; padding:6px 10px; border-radius:6px; font-size:.8rem; white-space:nowrap; }
.wp-pricing .pc-terms { padding:2px 16px 0; color:#64748b; font-size:.8rem; line-height:1.2; }
.wp-pricing .pc-features { list-style:none; margin:8px 0 0 0; padding:0 14px; display:grid; gap:8px; }
.wp-pricing .pc-features li { color:#1f2937; display:flex; gap:8px; align-items:flex-start; }
.wp-pricing .pc-features i { color: var(--accent, #60a5fa); margin-top:3px; }
.wp-pricing .pc-cta { padding: 12px 16px 16px; margin-top:auto; }
.wp-pricing .price-card .btn-primary { background:#2563eb; border-color:#2563eb; width:100%; font-weight:700; }
.wp-pricing .price-card .btn-primary:hover { filter: brightness(0.96); }
.wp-pricing .wp-footnote a.link { color:#0b1220; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Tier accents */
.tier-starter { --accent: #60a5fa; }
.tier-growth { --accent: #34d399; }
.tier-business { --accent: #f59e0b; }
.tier-pro { --accent: #a78bfa; }

@media (max-width: 1120px){ .wp-pricing .plan-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .wp-pricing .plan-grid { grid-template-columns: 1fr; } }

/* --- WordPress Hosting: Reviews (carousel) --- */
.wp-reviews { padding: 44px 0 40px; background: linear-gradient(180deg,#ffffff,#f8fafc); }
.wp-reviews .wr-head h2 { margin:0 0 6px; color:#0b132b; }
.wp-reviews .wr-head .subtitle { color:#64748b; margin:0; }
.wp-reviews .rv-viewport { overflow:hidden; position:relative; }
.wp-reviews .rv-track { display:flex; gap:12px; will-change: transform; }
.wp-reviews .rv-card { flex:0 0 360px; background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:14px; box-shadow:0 10px 30px rgba(2,6,23,0.06); }
.wp-reviews .rv-card blockquote { margin:8px 0 10px; color:#0f172a; font-weight:600; }
.wp-reviews .rv-stars { color:#f59e0b; }
.wp-reviews .rv-author { display:flex; align-items:center; gap:10px; color:#475569; }
.wp-reviews .rv-author img { width:28px; height:28px; object-fit:contain; border-radius:6px; }
@media (max-width: 640px){ .wp-reviews .rv-card { flex-basis: 85%; } }

/* --- WordPress Hosting: FAQ --- */
.wp-faq { padding: 44px 0 50px; background:#ffffff; }
.wp-faq .wf-head h2 { margin:0 0 6px; color:#0b132b; }
.wp-faq .wf-head .subtitle { color:#64748b; margin:0; }
.wp-faq .faq-list { max-width: 1100px; margin: 0 auto; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; align-items:start; }
.wp-faq details { border:1px solid #e5e7eb;  background:#fff; box-shadow:0 4px 14px rgba(2,6,23,0.04); }
.wp-faq summary { list-style:none; cursor:pointer; padding:12px 14px; font-weight:700; color:#0f172a; display:flex; align-items:center; gap:8px; }
.wp-faq summary::-webkit-details-marker { display:none; }
.wp-faq summary:after { content:"+"; margin-left:auto; font-weight:900; color:#64748b; }
.wp-faq details[open] summary:after { content:"–"; }
.wp-faq .faq-body { padding:0 14px 12px; color:#475569; }

@media (max-width: 900px){
    .wp-faq .faq-list { grid-template-columns: 1fr; }
}

/* --- Accessibility contrast & readability safeguards (wr-types) --- */
/* Ensure decorative backgrounds never sit above content */
.site-types.enhanced { position: relative; padding: 44px 0 34px; background: linear-gradient(180deg, #0b1220 0%, #0f172a 100%); color: #eaf2ff; }
.site-types.enhanced .fr-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.site-types.enhanced .container-xl { position: relative; z-index: 1; }
.site-types.enhanced .st-head { padding: 10px 0 8px; }
.site-types.enhanced .st-head h2 { color: #ffffff; }
.site-types.enhanced .st-head .subtitle { color: #d6e9ff; }

/* Dark-surface cards for site-types */
.site-types.enhanced .svc-card {
    color: #eaf2ff;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 16px 48px rgba(2,6,23,0.45);
}
.site-types.enhanced .svc-card:before { opacity: .28; filter: saturate(125%); }
.site-types.enhanced .svc-body h4 { color: #ffffff; }
.site-types.enhanced .svc-body p { color: #d6e9ff; }

/* Chips/tags readable on dark surfaces */
.site-types.enhanced .st-chips .badge,
.site-types.enhanced .tags .badge {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: #eaf2ff;
}
.site-types.enhanced .tags .badge:hover {
    border-color: color-mix(in oklab, var(--accent, #7aa2ff), transparent 60%);
}

/* Links inside site-types default to light (buttons keep their own colors) */
.site-types.enhanced a:not(.btn) { color: #eaf2ff; }

/* Guard: image tiles always readable when used */
.feature-reads .fr-media { position: relative; }
.feature-reads .fr-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.35));
    pointer-events: none;
}

@media (prefers-color-scheme: dark) {
    /* Keep site-types dark-friendly with adequate contrast */
    .site-types.enhanced { background: linear-gradient(180deg, #0b1220, #0f172a); color: #eaf2ff; }
}

@media (prefers-reduced-motion: reduce) {
    .site-types.enhanced .svc-card { transition: none !important; }
}

/* === Friendly Customer Support (distinct design) === */
.support-friendly { position: relative; padding: 50px 0; background: linear-gradient(180deg,#0b1220,#0f172a); color:#eaf2ff; overflow:hidden; }
.support-friendly.compact { padding: 16px 0; }
.support-friendly .sc-head { text-align:center; margin-bottom: 14px; }
.support-friendly.compact .sc-head { display:none; }
.support-friendly .sf-compact { display:grid; grid-template-columns: 1fr auto; align-items:center; gap:10px; }
.support-friendly .sf-left h3 { margin:0; color:#ffffff; font-size:1.25rem; }
.support-friendly .sf-left .tagline { margin:0; color:#cbd5e1; font-size:.95rem; }
.support-friendly .sf-right { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.support-friendly .sf-mini { display:flex; align-items:center; gap:8px; text-decoration:none; color:inherit; padding:8px 12px; border-radius:999px; background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.support-friendly .sf-mini:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.2); transform: translateY(-1px); }
.support-friendly .sf-mini .sf-icon { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:999px; color:#fff; font-size:14px; }
.support-friendly .sf-mini.wa .sf-icon { background: linear-gradient(135deg,#22c55e,#16a34a); }
.support-friendly .sf-mini.ticket .sf-icon { background: linear-gradient(135deg,#1d4ed8,#2563eb); }
.support-friendly .sf-mini.chat .sf-icon { background: linear-gradient(135deg,#8b5cf6,#a78bfa); }
.support-friendly .sf-mini .sf-text { display:flex; flex-direction:column; line-height:1.1; }
.support-friendly .sf-mini .sf-text strong { font-size:.95rem; color:#ffffff; }
.support-friendly .sf-mini .sf-text small { font-size:.8rem; color:#cbd5e1; }
@media (max-width: 860px){ .support-friendly .sf-compact { grid-template-columns: 1fr; } .support-friendly .sf-right { justify-content:flex-start; } }
.support-friendly .sc-head h3 { margin:0 0 6px; color:#ffffff; }
.support-friendly .sc-head .subtitle { margin:0; color:#cbd5e1; }
.support-friendly .sf-grid { display:grid; grid-template-columns: 1.1fr 1fr; gap:16px; align-items:start; }
.support-friendly .sf-copy p { color:#d6e9ff; margin:0 0 10px; }
.support-friendly .sf-bullets { list-style:none; padding:0; margin:6px 0 10px; display:grid; gap:8px; }
.support-friendly .sf-bullets li { display:flex; gap:8px; align-items:flex-start; color:#eaf2ff; }
.support-friendly .sf-bullets i { color:#34d399; margin-top:2px; }
.support-friendly .sf-note { color:#a3b9ff; }
.support-friendly .sf-channels { display:grid; grid-template-columns: 1fr; gap:12px; }
.support-friendly .sf-card { display:block; text-decoration:none; color:inherit; background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:16px; padding:14px; box-shadow: 0 16px 48px rgba(2,6,23,0.35); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.support-friendly .sf-card:hover { transform: translateY(-3px); box-shadow:0 26px 70px rgba(2,6,23,0.5); border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.08); }
.support-friendly .sf-card .sf-icon { display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:12px; color:#fff; font-size:20px; margin-bottom:8px; background: linear-gradient(135deg,#334155,#64748b); }
.support-friendly .sf-card h4 { margin:0 0 6px; color:#ffffff; }
.support-friendly .sf-card p { margin:0 0 6px; color:#d6e9ff; }
.support-friendly .sf-card .sf-meta { color:#9fb5ff; font-size:.9rem; }
.support-friendly .sf-card.wa .sf-icon { background: linear-gradient(135deg,#22c55e,#16a34a); }
.support-friendly .sf-card.ticket .sf-icon { background: linear-gradient(135deg,#1d4ed8,#2563eb); }
.support-friendly .sf-card.chat .sf-icon { background: linear-gradient(135deg,#8b5cf6,#a78bfa); }
@media (max-width: 980px){ .support-friendly .sf-grid { grid-template-columns: 1fr; } }

/* === VPS Hosting styles === */
.vps-hero { position:relative; overflow:hidden; padding: 40px 0 34px; background: linear-gradient(180deg,#eef2f7,#ffffff); }
.vps-hero:after { content:""; position:absolute; inset:0; background: radial-gradient(60% 60% at 15% 10%, rgba(36,99,235,.12), transparent 60%), radial-gradient(60% 60% at 85% 0%, rgba(52,211,153,.12), transparent 60%); pointer-events:none; }
.vps-hero .container-xl { position: relative; z-index: 1; }
.vps-hero h1 { margin:0 0 6px; color:#0b132b; }
.vps-hero .subtitle { color:#475569; margin:0; }

.vps-features { padding: 40px 0; background:#ffffff; }
.vps-features .vf-grid { display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:14px; }
.vps-features .vf-card { display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:14px; box-shadow:0 10px 30px rgba(2,6,23,0.06); }
.vps-features .vf-icon { width:44px; height:44px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; background: linear-gradient(135deg,#2563eb,#34d399); color:#fff; font-size:20px; }
.vps-features .vf-body h3 { margin:0 0 6px; font-size:1.05rem; }
.vps-features .vf-body p { margin:0; color:#475569; }
@media (max-width: 980px){ .vps-features .vf-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 640px){ .vps-features .vf-grid { grid-template-columns: 1fr; } }

.vps-builder { padding: 44px 0; background: linear-gradient(180deg,#f8fafc,#ffffff); }
.vps-builder .vb-grid { display:grid; grid-template-columns: 1.2fr 0.8fr; gap:14px; align-items:start; }
.vps-builder .vb-controls { background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:14px; box-shadow:0 10px 30px rgba(2,6,23,0.06); }
.vps-builder .vb-row { display:grid; grid-template-columns: 160px 1fr 90px; align-items:center; gap:10px; padding:8px 0; }
.vps-builder .vb-row label { font-weight:800; color:#0b132b; display:flex; align-items:center; gap:8px; }
.vps-builder .vb-row output { justify-self:end; color:#0b132b; font-weight:700; }
/* Range aesthetic */
.vps-builder input[type=range] { appearance:none; -webkit-appearance:none; width:100%; height:6px; border-radius:999px; background: linear-gradient(90deg,#2563eb 0%, #93c5fd 0%) no-repeat, #e5e7eb; outline:none; }
.vps-builder input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:#2563eb; border:2px solid #ffffff; box-shadow:0 2px 8px rgba(37,99,235,0.5); cursor:pointer; }
.vps-builder input[type=range]::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:#2563eb; border:2px solid #ffffff; box-shadow:0 2px 8px rgba(37,99,235,0.5); cursor:pointer; }
.vps-builder .vb-options { display:flex; gap:10px; flex-wrap:wrap; padding-top:8px; }
.vps-builder .vb-switch { display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid #e5e7eb; border-radius:999px; background:#fff; }
.vps-builder .vb-switch input { accent-color:#2563eb; }
.vps-builder .vb-presets { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.vps-builder .vb-preset { padding:8px 12px; border-radius:999px; border:1px solid #bfdbfe; background:#eff6ff; color:#0b132b; font-weight:700; cursor:pointer; }
.vps-builder .vb-preset:hover { filter:brightness(0.98); }

.vps-builder .vb-summary .vs-card { background:#0b1220; color:#eaf2ff; border-radius:14px; padding:14px; box-shadow:0 16px 48px rgba(2,6,23,0.45); border:1px solid rgba(255,255,255,0.12); position:sticky; top:16px; }
.vps-builder .vb-summary h3 { margin:0 0 8px; color:#ffffff; }
.vps-builder .vs-specs { list-style:none; margin:0 0 8px; padding:0; display:grid; gap:6px; }
.vps-builder .vs-specs li { display:flex; gap:8px; align-items:center; }
.vps-builder .vs-price { display:flex; align-items:baseline; gap:6px; font-weight:900; margin:8px 0; }
.vps-builder .vs-price .cur { font-size:1rem; }
.vps-builder .vs-price .vs-amount { font-size:2.2rem; }
.vps-builder .vs-note { color:#a3b9ff; margin:8px 0 0; font-size:.95rem; }
.vps-builder .vs-cta { width:100%; background:#2563eb; border-color:#2563eb; }

@media (max-width: 980px){ .vps-builder .vb-grid { grid-template-columns: 1fr; } .vps-builder .vb-summary .vs-card { position:static; } }

.vps-extra { padding: 30px 0 46px; background:#ffffff; }
.vps-extra .vx-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:12px; }
.vps-extra .vx-item { background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:14px; box-shadow:0 10px 30px rgba(2,6,23,0.06); }
.vps-extra .vx-item h4 { margin:0 0 6px; }
.vps-extra .vx-item p { margin:0; color:#475569; }
@media (max-width: 980px){ .vps-extra .vx-grid { grid-template-columns: 1fr; } }

/* === Web Hosting: plan tabs + minimal red cards === */
#cloud-packages.plan-tiles.simple { background: #ffffff; }
#cloud-packages.plan-tiles.simple .pt-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1120px){
    #cloud-packages.plan-tiles.simple .pt-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
    #cloud-packages.plan-tiles.simple .pt-grid { grid-template-columns: 1fr; }
}

/* Tabs */
#cloud-packages .wh-tabs .tab { 
    border: 1px solid #f2b4b4; 
    background: #fff; 
    color: #0b1220; 
    padding: 8px 14px; 
    border-radius: 999px; 
    font-weight: 800; 
    cursor: pointer; 
}
#cloud-packages .wh-tabs .tab.active { 
    background: #ee5353; 
    color: #fff; 
    border-color: #ee5353; 
    box-shadow: 0 8px 24px rgba(238,83,83,0.25);
}

/* Minimal cards: no aurora, no conic border, light red accents */
#cloud-packages.plan-tiles.simple .pt-card { 
    background: #ffffff; 
    border: 1px solid #f2b4b4; 
    box-shadow: none; 
    border-radius: 0; 
}
#cloud-packages.plan-tiles.simple .pt-card:before, 
#cloud-packages.plan-tiles.simple .pt-card .aurora, 
#cloud-packages.plan-tiles.simple .pt-card .pt-bg, 
#cloud-packages.plan-tiles.simple .pt-card .sheen, 
#cloud-packages.plan-tiles.simple .pt-card .pt-icon { display: none !important; }
#cloud-packages.plan-tiles.simple .pt-card:hover { 
    transform: translateY(-4px); 
    box-shadow: 0 12px 34px rgba(2,6,23,0.08);
}

#cloud-packages.plan-tiles.simple .pt-head { padding-top: 14px; }
#cloud-packages.plan-tiles.simple .pt-badge { border-color: #f2b4b4; background: #fff; }
#cloud-packages.plan-tiles.simple .pt-badge.hot { background: #ee5353; color:#fff; border-color: #ee5353; }
#cloud-packages.plan-tiles.simple .pt-name { color: #0b1220; }
#cloud-packages.plan-tiles.simple .pt-price strong { color: #464646; }
#cloud-packages.plan-tiles.simple .pt-price .per { color: #374151; }
#cloud-packages.plan-tiles.simple .pt-list i { color: #ee5353; }
#cloud-packages.plan-tiles.simple .pt-cta .btn-primary { background:#ee5353; border-color:#ee5353; }

/* === Web Hosting: 1-Click Installer === */
.wh-installer { padding: 40px 0; background: #ffffff; }
.wh-installer .wi-grid { display:grid; grid-template-columns: 1.2fr 0.8fr; gap: 14px; align-items: stretch; }
.wh-installer .wi-apps { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.wh-installer .wi-card { background:#fff; border:1px solid #f2b4b4; border-radius: 8px; padding: 16px 12px; text-align:center; transition: transform .18s ease, box-shadow .18s ease; }
.wh-installer .wi-card:hover { transform: translateY(-3px); box-shadow: 0 12px 34px rgba(2,6,23,0.08); }
.wh-installer .wi-icon { color:#ee5353; font-size: 28px; margin-bottom: 8px; }
.wh-installer .wi-name { font-weight: 800; color:#0b1220; font-size: .98rem; }
.wh-installer .wi-copy { background:#fff; border:1px solid #e5e7eb; border-radius: 8px; padding: 14px; }
.wh-installer .wi-bullets { list-style:none; padding:0; margin:0 0 10px; display:grid; gap:8px; }
.wh-installer .wi-bullets li { display:flex; align-items:flex-start; gap:8px; color:#1f2937; }
.wh-installer .wi-bullets i { color:#16a34a; margin-top:2px; }
.wh-installer .wi-cta { display:flex; gap:10px; flex-wrap:wrap; }

@media (max-width: 980px){
    .wh-installer .wi-grid { grid-template-columns: 1fr; }
    .wh-installer .wi-apps { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 640px){
    .wh-installer .wi-apps { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* --- VPS Hosting: Advanced FAQ --- */
.vps-faq { 
    padding: 56px 0; 
    background: linear-gradient(0deg, #f7f9fc, #f7f9fc);
}
.vps-faq .vfq-head { text-align: center; margin-bottom: 18px; }
.vps-faq .vfq-head .subtitle { color: #556; margin-top: 6px; }

.vps-faq .vfq-controls { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 10px 0 16px; }
.vps-faq .vfq-search { position: relative; display: flex; align-items: center; background: #fff; border: 1px solid #d8e1f0; box-shadow: 0 1px 2px rgba(0,0,0,0.03); border-radius: 10px; padding: 10px 12px; }
.vps-faq .vfq-search i.fa-search { color: #6b7a90; margin-right: 10px; }
.vps-faq .vfq-search input[type="search"] { appearance: none; -webkit-appearance: none; border: none; outline: none; width: 100%; font-size: 15px; color: #0f172a; background: transparent; }
.vps-faq .vfq-search .vfq-clear { border: none; background: transparent; color: #6b7a90; padding: 6px; border-radius: 6px; cursor: pointer; }
.vps-faq .vfq-search .vfq-clear:hover { color: #0f172a; }

.vps-faq .vfq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vps-faq .vfq-chip { border: 1px solid #c8d4ea; background: #fff; color: #0f172a; font-weight: 600; font-size: 13px; padding: 6px 12px; border-radius: 999px; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.vps-faq .vfq-chip:hover { background: #eef3fb; }
.vps-faq .vfq-chip.is-active { background: #e1ecff; border-color: #9ec2ff; color: #0b63f6; }

.vps-faq .vfq-actions { display: flex; gap: 8px; }
.vps-faq .vfq-actions .btn.btn-secondary { background: #f4f7fc; color: #0f172a; border: 1px solid #d8e1f0; }
.vps-faq .vfq-actions .btn.btn-secondary:hover { background: #e9eff9; }

.vps-faq .vfq-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 900px) {
    .vps-faq .vfq-controls { grid-template-columns: 1fr auto; align-items: center; }
    .vps-faq .vfq-actions { justify-self: end; }
    .vps-faq .vfq-grid { grid-template-columns: 1fr 1fr; }
}

.vps-faq details.vfq-item { background: #fff; border: 1px solid #d8e1f0; border-radius: 12px; box-shadow: 0 2px 6px rgba(16,24,40,0.04); overflow: hidden; }
.vps-faq details.vfq-item[hidden] { display: none !important; }
.vps-faq details.vfq-item summary { list-style: none; cursor: pointer; padding: 14px 16px; display: flex; align-items: center; gap: 10px; position: relative; }
.vps-faq details.vfq-item summary::-webkit-details-marker { display: none; }
.vps-faq details.vfq-item summary .q { font-weight: 700; color: #0f172a; }
.vps-faq details.vfq-item summary i { color: #0b63f6; width: 18px; text-align: center; }
.vps-faq details.vfq-item summary:after { content: ""; position: absolute; right: 16px; width: 10px; height: 10px; border-right: 2px solid #6b7a90; border-bottom: 2px solid #6b7a90; transform: rotate(-45deg); transition: transform .2s ease; }
.vps-faq details.vfq-item[open] summary:after { transform: rotate(135deg); }
.vps-faq details.vfq-item .a { padding: 0 16px 14px 44px; color: #334155; line-height: 1.55; }
.vps-faq details.vfq-item .a p { margin: 0; }

.vps-faq .vfq-foot { text-align: center; margin-top: 14px; color: #4b5563; }
.vps-faq .vfq-foot .link { color: #0b63f6; font-weight: 600; }
.vps-faq .vfq-foot .link:hover { text-decoration: underline; }

/* Network Infrastructure: improve contrast in 'What we deliver' section */
.ni-deliver { background: #ffffff; }
.ni-deliver .feature-card .feature-title { color: #0b132b; }
.ni-deliver .feature-card .feature-desc { color: #0f172a; }
.ni-deliver .feature-card .feature-inner { background: #ffffff; }
.ni-deliver ul { color: #0f172a; line-height: 1.6; list-style: disc; padding-left: 18px; }
.ni-deliver ul li { margin-bottom: 8px; }

/* Network Infrastructure: creative 'What we deliver' section */
.ni-services { padding: 40px 0; background: linear-gradient(180deg,#f8fafc,#ffffff); }
.ni-services .nis-head { text-align: center; margin-bottom: 16px; }
.ni-services .nis-head h2 { margin: 0 0 6px; color:#0b132b; }
.ni-services .nis-head .subtitle { margin: 0; color:#475569; }

.ni-services .nis-grid { display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 16px; align-items: start; }

.ni-services .nis-overview { background:#ffffff; border:1px solid #e5e7eb; border-radius:14px; padding:18px; box-shadow:0 10px 30px rgba(2,6,23,0.06); }
.ni-services .nis-overview h3 { margin:0 0 8px; color:#0b132b; display:flex; align-items:center; gap:8px; }
.ni-services .nis-overview p { margin:0 0 10px; color:#334155; }
.ni-services .nis-list { list-style:none; padding:0; margin: 0 0 10px 0; }
.ni-services .nis-list li { display:flex; align-items:flex-start; gap:8px; margin: 6px 0; color:#0f172a; }
.ni-services .nis-list i { color:#16a34a; margin-top:2px; }
.ni-services .nis-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.ni-services .nis-chips .chip { border:1px solid #e5e7eb; background:#fff; color:#0b132b; padding:6px 10px; border-radius:999px; font-size:.85rem; }

.ni-services .nis-features { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ni-services .nis-card { display:flex; gap:10px; align-items:flex-start; background:#ffffff; border:1px solid #e5e7eb; border-radius:14px; padding:14px; box-shadow:0 8px 24px rgba(2,6,23,0.05); }
.ni-services .nis-icn { width:40px; height:40px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#ee5353,#ff7a7f); color:#fff; font-size:18px; flex-shrink:0; }
.ni-services .nis-body h4 { margin:0 0 4px; color:#0b132b; font-size:1.05rem; }
.ni-services .nis-body p { margin:0; color:#475569; line-height:1.5; }

@media (max-width: 980px){
    .ni-services .nis-grid { grid-template-columns: 1fr; }
}

/* Network Infrastructure: creative process timeline */
.ni-process { padding: 40px 0; background: linear-gradient(180deg,#ffffff,#f9fafb); }
.ni-process .nip-head { text-align: center; margin-bottom: 16px; }
.ni-process .nip-head h2 { margin:0 0 6px; color:#0b132b; }
.ni-process .nip-head .subtitle { margin:0; color:#475569; }

.ni-process .nip-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; align-items: start; }
.ni-process .nip-steps::before { content:""; position:absolute; left: 6%; right: 6%; top: 30px; height: 2px; background: linear-gradient(90deg,#ffd1d1,#ee5353,#ffd1d1); opacity:.6; border-radius:2px; }

.ni-process .nip-step { position: relative; background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:18px 14px 14px 14px; box-shadow:0 10px 30px rgba(2,6,23,0.06); transition: transform .2s ease, box-shadow .2s ease; }
.ni-process .nip-step:hover { transform: translateY(-3px); box-shadow:0 16px 36px rgba(2,6,23,0.10); }
.ni-process .nip-step h3 { margin: 28px 0 6px; font-size:1.05rem; color:#0b132b; }
.ni-process .nip-step p { margin:0 0 8px; color:#475569; line-height:1.55; }
.ni-process .nip-step .nip-points { margin: 0; padding-left: 18px; color:#0f172a; line-height:1.45; }
.ni-process .nip-step .nip-points li { margin: 4px 0; }

.ni-process .nip-badge { position:absolute; left: 14px; top: -16px; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg,#ee5353,#ff7a7f); color:#fff; display:flex; align-items:center; justify-content:center; gap:4px; box-shadow:0 10px 22px rgba(238,83,83,0.35), 0 0 0 1px rgba(255,255,255,0.4) inset; }
.ni-process .nip-badge span { font-weight:800; }
.ni-process .nip-badge i { font-size: 14px; opacity: .95; }

@media (max-width: 1100px){ .ni-process .nip-steps { grid-template-columns: repeat(2, minmax(0,1fr)); } .ni-process .nip-steps::before { display:none; } }
@media (max-width: 640px){ .ni-process .nip-steps { grid-template-columns: 1fr; } }

/* Network Infrastructure: alternate zig-zag process */
.ni-journey { padding: 44px 0; background: radial-gradient(120% 80% at 50% -20%, #fff 40%, #f8fafc 60%, #f3f4f6 100%); }
.ni-journey .nj-head { text-align:center; margin-bottom: 12px; }
.ni-journey .nj-head h2 { margin:0 0 6px; color:#0b132b; }
.ni-journey .nj-head .subtitle { margin:0; color:#475569; }

.ni-journey .nj-timeline { position:relative; display:grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; align-items:start; }
.ni-journey .nj-timeline::before { content:""; position:absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 3px; background: linear-gradient(180deg, rgba(238,83,83,0.1), rgba(238,83,83,0.6), rgba(238,83,83,0.1)); border-radius: 2px; }

.ni-journey .nj-item { position:relative; }
.ni-journey .nj-item.left { grid-column: 1; padding-right: 28px; }
.ni-journey .nj-item.right { grid-column: 2; padding-left: 28px; }
.ni-journey .nj-item .nj-dot { position:absolute; top: 16px; width: 14px; height: 14px; border-radius: 50%; background: #ee5353; box-shadow: 0 0 0 6px rgba(238,83,83,0.12); }
.ni-journey .nj-item.left .nj-dot { right: -7px; }
.ni-journey .nj-item.right .nj-dot { left: -7px; }

.ni-journey .nj-card { background:#ffffff; border:1px solid #e5e7eb; border-radius: 16px; padding: 16px 16px 14px 16px; box-shadow: 0 12px 30px rgba(2,6,23,0.08); position:relative; overflow:hidden; }
.ni-journey .nj-card::after { content:""; position:absolute; inset: 0; pointer-events:none; background: linear-gradient(180deg, rgba(238,83,83,0.08), transparent 40%); opacity:.7; }
.ni-journey .nj-badge { position:absolute; top: -14px; right: -14px; width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg,#ee5353,#ff7a7f); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; box-shadow: 0 12px 26px rgba(238,83,83,0.35); }
.ni-journey .nj-icon { width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1px solid #fee2e2; color:#ee5353; display:inline-flex; align-items:center; justify-content:center; font-size:18px; box-shadow: 0 6px 16px rgba(238,83,83,0.15); }
.ni-journey .nj-card h3 { margin: 10px 0 6px; color:#0b132b; font-size:1.08rem; }
.ni-journey .nj-card p { margin:0 0 8px; color:#475569; }
.ni-journey .nj-points { margin:0; padding-left: 18px; color:#0f172a; line-height:1.5; }
.ni-journey .nj-points li { margin: 4px 0; }

.ni-journey .nj-cta { text-align:center; margin-top: 16px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

@media (max-width: 980px){
    .ni-journey .nj-timeline { grid-template-columns: 1fr; }
    .ni-journey .nj-timeline::before { left: 24px; transform: none; opacity:.35; }
    .ni-journey .nj-item { padding-left: 44px; }
    .ni-journey .nj-item.left, .ni-journey .nj-item.right { grid-column: 1; padding-right: 0; }
    .ni-journey .nj-item .nj-dot { left: 18px; right: auto; }
}

/* Black edition magical animation for Our process */
.ni-journey.dark-magic { 
    position: relative; 
    overflow: hidden;
    background: radial-gradient(120% 100% at 50% -10%, #151a2b 10%, #0d1324 55%, #0a0f1f 100%);
}
.ni-journey.dark-magic .nj-head h2 { color: #ffffff; }
.ni-journey.dark-magic .nj-head .subtitle { color: #cbd5e1; }
.ni-journey.dark-magic .nj-timeline::before { background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.7), rgba(255,255,255,0.1)); }
.ni-journey.dark-magic .nj-item .nj-dot { background: #fff; box-shadow: 0 0 0 6px rgba(255,255,255,0.12); }
.ni-journey.dark-magic .nj-card { background:#ffffff; border-color: #e2e8f0; box-shadow: 0 16px 40px rgba(2,6,23,0.25); }
.ni-journey.dark-magic .nj-icon { background:#fff; border-color:#fee2e2; color:#ee5353; }
.ni-journey.dark-magic .nj-card h3 { color:#0b132b; }
.ni-journey.dark-magic .nj-card p { color:#334155; }
.ni-journey.dark-magic .nj-points { color:#0f172a; }

.ni-journey .nj-magic { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ni-journey .nj-magic::before,
.ni-journey .nj-magic::after { 
    content: ""; position: absolute; inset: -20%; filter: blur(40px); opacity: .6; 
    background: radial-gradient(60% 60% at 20% 20%, rgba(111,66,193,0.25), rgba(111,66,193,0) 60%),
                            radial-gradient(50% 50% at 80% 40%, rgba(16,185,129,0.20), rgba(16,185,129,0) 60%),
                            radial-gradient(40% 40% at 60% 80%, rgba(255,100,100,0.20), rgba(255,100,100,0) 60%);
    animation: bgMove 18s ease-in-out infinite alternate;
}
.ni-journey .nj-magic::after { 
    opacity: .45; 
    background: radial-gradient(60% 60% at 30% 70%, rgba(99,102,241,0.25), rgba(99,102,241,0) 60%),
                            radial-gradient(40% 40% at 70% 20%, rgba(255,255,255,0.08), rgba(255,255,255,0) 60%);
    animation-duration: 22s;
}
.ni-journey .nj-magic .particle { 
    position: absolute; width: 100px; height: 100px; border-radius: 50%; filter: blur(18px); opacity: .7;
    animation: particleDrift 12s ease-in-out infinite, particleTwinkle 6s ease-in-out infinite;
}
.ni-journey .nj-magic .particle.p1 { left:12%; top:42%; background: radial-gradient(circle, rgba(111,66,193,0.95), rgba(111,66,193,0.45)); animation-delay: 0s, 0s; box-shadow: 0 0 36px rgba(111,66,193,0.22); }
.ni-journey .nj-magic .particle.p2 { left:24%; top:76%; background: radial-gradient(circle, rgba(16,185,129,0.96), rgba(16,185,129,0.45)); animation-delay: 1.2s, 0.5s; box-shadow: 0 0 36px rgba(16,185,129,0.18); }
.ni-journey .nj-magic .particle.p3 { left:62%; top:18%; background: radial-gradient(circle, rgba(255,107,107,0.96), rgba(255,107,107,0.45)); animation-delay: 2.6s, 1.1s; box-shadow: 0 0 36px rgba(255,107,107,0.18); }
.ni-journey .nj-magic .particle.p4 { left:78%; top:56%; background: radial-gradient(circle, rgba(99,102,241,0.96), rgba(99,102,241,0.45)); animation-delay: 3.9s, 1.8s; box-shadow: 0 0 36px rgba(99,102,241,0.18); }

/* Elevate content above background */
.ni-journey .container-xl,
.ni-journey .nj-head,
.ni-journey .nj-timeline,
.ni-journey .nj-cta { position: relative; z-index: 2; }

/* Generic reveal-on-scroll animation */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ========================================
   SHED MASTER - MODERN ADVANCED DESIGN
   ======================================== */

/* Spectrum Overview Section */
.sm-spectrum { position: relative; padding: 80px 0; background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%); overflow: hidden;}
.sm-spectrum-bg { position: absolute; inset: 0; z-index: 0; opacity: 0.4; }
.sm-orb { position: absolute; border-radius: 50%; filter: blur(80px); animation: orbFloat 15s ease-in-out infinite;}
.sm-orb.orb-a { width: 400px; height: 400px; background: radial-gradient(circle, rgba(79,70,229,0.6), rgba(79,70,229,0)); top: -10%; left: 10%; animation-delay: 0s;}
.sm-orb.orb-b { width: 350px; height: 350px; background: radial-gradient(circle, rgba(16,185,129,0.5), rgba(16,185,129,0)); bottom: -5%; right: 15%; animation-delay: 2s;}
.sm-orb.orb-c { width: 300px; height: 300px; background: radial-gradient(circle, rgba(99,102,241,0.5), rgba(99,102,241,0)); top: 50%; right: 20%; animation-delay: 4s;}
@keyframes orbFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-30px) scale(1.1); }}

.sm-spectrum .container { position: relative; z-index: 1; }
.sm-spectrum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;}
.sm-spectrum-copy h2 { font-size: 2.5rem; color: #ffffff; margin-bottom: 1.5rem; line-height: 1.2;}
.sm-spectrum-copy p { font-size: 1.1rem; color: #cbd5e1; margin-bottom: 2rem; line-height: 1.7;}
.sm-spectrum-actions { display: flex; gap: 16px; flex-wrap: wrap;}

.sm-metrics { background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 40px 32px; backdrop-filter: blur(10px); box-shadow: 0 20px 60px rgba(0,0,0,0.3);}
.sm-metric { padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,0.08);}
.sm-metric:last-child { border-bottom: none; }
.sm-metric .stat { display: block; font-size: 3rem; font-weight: 700; background: linear-gradient(135deg, #60a5fa, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 8px;}
.sm-metric p { color: #e2e8f0; font-size: 0.95rem; line-height: 1.5; margin: 0;}

/* Modules Section */
.sm-modules { padding: 80px 0; background: linear-gradient(180deg, #f8fafc, #f1f5f9);}
.sm-module-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 48px;}
.sm-module { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 36px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden;}
.sm-module::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #3b82f6, #8b5cf6); transform: scaleX(0); transition: transform 0.4s ease;}
.sm-module:hover::before { transform: scaleX(1); }
.sm-module:hover { transform: translateY(-8px); box-shadow: 0 20px 60px rgba(59,130,246,0.15); border-color: #3b82f6;}

.sm-module-highlight { background: linear-gradient(135deg, #eff6ff, #f5f3ff); border: 2px solid #6366f1; box-shadow: 0 10px 40px rgba(99,102,241,0.12);}
.sm-module-highlight::before { background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899);}

.sm-module-icon { width: 64px; height: 64px; background: linear-gradient(135deg, #3b82f6, #8b5cf6); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; font-size: 1.8rem; color: #ffffff; box-shadow: 0 10px 30px rgba(59,130,246,0.3); transition: transform 0.3s ease;}
.sm-module:hover .sm-module-icon { transform: scale(1.1) rotate(5deg);}
.sm-module-highlight .sm-module-icon { background: linear-gradient(135deg, #6366f1, #ec4899);}

.sm-module h3 { font-size: 1.4rem; color: #0f172a; margin-bottom: 12px;}
.sm-module p { color: #475569; line-height: 1.7; margin-bottom: 20px;}
.sm-module-list { list-style: none; padding: 0; margin: 0;}
.sm-module-list li { padding: 8px 0; color: #64748b; display: flex; align-items: center; gap: 10px;}
.sm-module-list i { color: #10b981; font-size: 0.9rem;}

/* Orchestration Flow Section */
.sm-orchestration { padding: 80px 0; background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); position: relative; overflow: hidden;}
.sm-flowchart { position: relative; padding: 40px 0; margin-top: 40px;}
.sm-flow-path { position: absolute; left: 80px; top: 60px; bottom: 60px; width: 3px; background: linear-gradient(180deg, transparent, #3b82f6, #8b5cf6, transparent); opacity: 0.5;}

.sm-flow-step { display: flex; align-items: flex-start; gap: 24px; margin-bottom: 48px; position: relative; z-index: 1;}
.sm-flow-step:last-child { margin-bottom: 0; }

.sm-flow-icon { width: 64px; height: 64px; min-width: 64px; background: linear-gradient(135deg, #3b82f6, #8b5cf6); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #ffffff; box-shadow: 0 10px 30px rgba(59,130,246,0.4); position: relative; transition: all 0.4s ease;}
.sm-flow-step:hover .sm-flow-icon { transform: scale(1.15); box-shadow: 0 15px 40px rgba(59,130,246,0.6);}
.sm-flow-icon::before { content: ''; position: absolute; inset: -8px; border: 2px solid rgba(59,130,246,0.3); border-radius: 50%; animation: pulse 2s infinite;}
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0; }}

.sm-flow-text { flex: 1; }
.sm-flow-text h4 { font-size: 1.3rem; color: #ffffff; margin-bottom: 8px;}
.sm-flow-text p { color: #cbd5e1; line-height: 1.7; margin: 0;}

/* Digital Twin Section */
.sm-digital { padding: 80px 0; background: linear-gradient(180deg, #ffffff, #f8fafc);}
.sm-digital-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-top: 48px;}
.sm-digital-copy h2 { font-size: 2.2rem; color: #0f172a; margin-bottom: 1.5rem;}
.sm-digital-copy p { color: #475569; font-size: 1.05rem; line-height: 1.7; margin-bottom: 2rem;}
.sm-checklist { list-style: none; padding: 0; margin: 0 0 2rem 0;}
.sm-checklist li { padding: 12px 0; color: #334155; display: flex; align-items: center; gap: 12px; font-size: 1.05rem;}
.sm-checklist i { color: #10b981; font-size: 1.2rem;}
.sm-digital-actions { display: flex; gap: 16px; flex-wrap: wrap;}

.sm-visual-frame { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.12); margin-bottom: 24px;}
.sm-visual-frame img { width: 100%; display: block; transition: transform 0.6s ease;}
.sm-visual-frame:hover img { transform: scale(1.05);}
.sm-visual-tag { position: absolute; bottom: 20px; left: 20px; background: rgba(0,0,0,0.8); color: #ffffff; padding: 10px 20px; border-radius: 8px; font-size: 0.9rem; backdrop-filter: blur(10px);}

.sm-visual-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px;}
.sm-stat-item { background: linear-gradient(135deg, #eff6ff, #f0f9ff); border: 1px solid #bfdbfe; border-radius: 12px; padding: 20px; text-align: center;}
.sm-stat-item .stat-value { display: block; font-size: 2rem; font-weight: 700; color: #3b82f6; margin-bottom: 6px;}
.sm-stat-item p { color: #475569; font-size: 0.85rem; margin: 0; line-height: 1.4;}

/* Insights Section */
.sm-insights { padding: 80px 0; background: linear-gradient(135deg, #0f172a, #1e293b);}
.sm-insight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 48px;}
.sm-insight-card { background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 32px; transition: all 0.4s ease; backdrop-filter: blur(10px);}
.sm-insight-card:hover { transform: translateY(-8px); border-color: rgba(255,255,255,0.2); box-shadow: 0 20px 60px rgba(0,0,0,0.4);}

.sm-insight-icon { width: 56px; height: 56px; background: linear-gradient(135deg, #3b82f6, #8b5cf6); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #ffffff; margin-bottom: 20px; transition: transform 0.3s ease;}
.sm-insight-card:hover .sm-insight-icon { transform: scale(1.1) rotate(5deg);}

.sm-insight-card h3 { font-size: 1.3rem; color: #ffffff; margin-bottom: 12px;}
.sm-insight-card p { color: #cbd5e1; line-height: 1.7; margin: 0;}

/* Gallery Mosaic Section */
.sm-gallery.mosaic { padding: 80px 0; background: linear-gradient(180deg, #f8fafc, #ffffff);}
.sm-gallery-mosaic { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, 280px); gap: 16px; margin-top: 48px;}
.sm-gallery-large { grid-row: 1 / 3;}
.sm-gallery-item { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); transition: all 0.4s ease;}
.sm-gallery-item:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(0,0,0,0.2);}
.sm-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease;}
.sm-gallery-item:hover img { transform: scale(1.1);}

.sm-gallery-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.8)); display: flex; align-items: flex-end; padding: 20px; opacity: 0; transition: opacity 0.4s ease;}
.sm-gallery-item:hover .sm-gallery-overlay { opacity: 1;}
.sm-gallery-label { color: #ffffff; font-weight: 600; font-size: 1rem;}

/* Filling Station Band */
.fs-band { padding: 80px 0; background: linear-gradient(180deg, #ffffff, #f8fafc);}
.fs-split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-bottom: 60px;}
.fs-badge { display: inline-block; background: linear-gradient(135deg, #eff6ff, #dbeafe); color: #3b82f6; padding: 6px 16px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; margin-bottom: 16px;}
.fs-copy h2 { font-size: 2rem; color: #0f172a; margin-bottom: 1rem;}
.fs-copy p { color: #475569; line-height: 1.7; margin-bottom: 1.5rem;}
.fs-actions { display: flex; gap: 12px; flex-wrap: wrap;}

.fs-figure { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.12); margin-bottom: 20px;}
.fs-figure img { width: 100%; display: block;}
.fs-figure figcaption { padding: 12px 20px; background: rgba(0,0,0,0.05); color: #475569; font-size: 0.9rem;}
.fs-metric { background: linear-gradient(135deg, #f0fdf4, #dcfce7); border: 1px solid #86efac; border-radius: 12px; padding: 20px; text-align: center;}
.fs-metric-value { display: block; font-weight: 700; color: #16a34a; margin-bottom: 6px;}
.fs-metric p { color: #475569; font-size: 0.9rem; margin: 0; line-height: 1.5;}

.fs-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 60px;}
.fs-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 28px; transition: all 0.3s ease;}
.fs-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.08); border-color: #3b82f6;}
.fs-card-icon { width: 48px; height: 48px; background: linear-gradient(135deg, #eff6ff, #dbeafe); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #3b82f6; margin-bottom: 16px;}
.fs-card h3 { font-size: 1.1rem; color: #0f172a; margin-bottom: 10px;}
.fs-card p { color: #64748b; line-height: 1.6; margin: 0; font-size: 0.95rem;}

.fs-process { margin-bottom: 60px;}
.fs-process h3 { text-align: center; color: #0f172a; margin-bottom: 32px;}
.fs-process-steps { display: flex; gap: 24px;}
.fs-step { flex: 1; display: flex; gap: 16px; align-items: flex-start;}
.fs-step-badge { width: 40px; height: 40px; min-width: 40px; background: linear-gradient(135deg, #3b82f6, #8b5cf6); color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; box-shadow: 0 8px 24px rgba(59,130,246,0.3);}
.fs-step-content h4 { font-size: 1.05rem; color: #0f172a; margin-bottom: 8px;}
.fs-step-content p { color: #64748b; line-height: 1.6; margin: 0; font-size: 0.9rem;}

.fs-gallery { margin-bottom: 60px;}
.fs-gallery h3 { text-align: center; color: #0f172a; margin-bottom: 32px;}
.fs-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;}
.fs-gallery-grid img { width: 100%; height: 180px; object-fit: cover; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); transition: transform 0.3s ease;}
.fs-gallery-grid img:hover { transform: scale(1.05);}

.fs-contact.band { background: linear-gradient(135deg, #0f172a, #1e293b); border-radius: 16px; padding: 48px;}
.fs-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px;}
.fs-contact h3 { color: #ffffff; margin-bottom: 16px;}
.fs-contact h4 { color: #ffffff; margin-bottom: 12px;}
.fs-contact p { color: #cbd5e1; line-height: 1.7; margin-bottom: 1.5rem;}
.fs-contact-actions { display: flex; gap: 12px; flex-wrap: wrap;}
.fs-contact-qr { margin-top: 16px;}
.fs-contact-qr img { border-radius: 8px; background: #ffffff; padding: 8px;}

/* Shed Master Final CTA */
.sm-cta { padding: 80px 0; background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); position: relative; overflow: hidden;}
.sm-cta::before { content: ''; position: absolute; inset: -50%; background: radial-gradient(circle at 20% 50%, rgba(59,130,246,0.15), transparent 50%), radial-gradient(circle at 80% 50%, rgba(139,92,246,0.15), transparent 50%); animation: bgMove 20s ease-in-out infinite alternate;}
.sm-cta .container { position: relative; z-index: 1;}
.sm-cta-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 60px; align-items: center;}
.sm-cta-copy h2 { font-size: 2.2rem; color: #ffffff; margin-bottom: 1rem; line-height: 1.3;}
.sm-cta-copy p { color: #cbd5e1; font-size: 1.05rem; line-height: 1.7; margin: 0;}
.sm-cta-actions { display: flex; flex-direction: column; gap: 16px;}

/* Responsive Design */
@media (max-width: 1024px){
    .sm-spectrum-grid, .sm-digital-grid, .fs-split, .sm-cta-grid { grid-template-columns: 1fr; gap: 40px; }
    .sm-module-grid { grid-template-columns: 1fr; }
    .sm-insight-grid { grid-template-columns: 1fr; }
    .sm-gallery-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 240px); }
    .sm-gallery-large { grid-row: 1 / 2; }
    .sm-flow-path { left: 32px; }
}

@media (max-width: 768px){
    .sm-spectrum-copy h2 { font-size: 2rem; }
    .sm-digital-copy h2, .sm-cta-copy h2 { font-size: 1.8rem; }
    .fs-feature-grid { grid-template-columns: 1fr; }
    .fs-process-steps { flex-direction: column; }
    .fs-gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .fs-contact-grid { grid-template-columns: 1fr; }
    .sm-gallery-mosaic { grid-template-columns: 1fr; grid-template-rows: repeat(4, 240px); }
    .sm-flowchart { padding-left: 20px; }
    .sm-flow-path { display: none; }
    .sm-flow-step { flex-direction: column; align-items: center; text-align: center; }
}

@media (max-width: 520px){
    .sm-spectrum, .sm-modules, .sm-orchestration, .sm-digital, .sm-insights, .sm-gallery.mosaic, .fs-band, .sm-cta { padding: 50px 0; }
    .sm-module-grid, .sm-insight-grid { gap: 20px; }
    .fs-gallery-grid { grid-template-columns: 1fr; }
    .sm-cta-actions { width: 100%; }
    .sm-cta-actions .btn { width: 100%; justify-content: center; }
}


/*
Shed Master Page CSS 
*/
     /* =============================
               FS-Native scoped enhancements
               ============================= */
                #fs-native {
                    position: relative;
                    overflow: hidden;
                    color: #ffffff;
                }

                #fs-native h1,
                #fs-native h2,
                #fs-native h3,
                #fs-native h4,
                #fs-native h5,
                #fs-native h6,
                #fs-native p,
                #fs-native li,
                #fs-native strong,
                #fs-native summary {
                    color: #ffffff;
                }

                #fs-native a {
                    color: #e0f2fe;
                }

                #fs-native .fs-decor {
                    position: absolute;
                    inset: -20%;
                    z-index: 0;
                    pointer-events: none;
                    background:
                        radial-gradient(40% 30% at 10% 20%, rgba(8, 131, 149, 0.12), transparent 60%),
                        radial-gradient(35% 25% at 90% 10%, rgba(238, 83, 83, 0.10), transparent 60%),
                        radial-gradient(30% 25% at 20% 90%, rgba(99, 102, 241, 0.10), transparent 60%);
                    filter: blur(2px);
                    animation: fsFloat 22s ease-in-out infinite alternate;
                }

                @keyframes fsFloat {
                    from {
                        transform: translateY(-8px) scale(1.02);
                    }

                    to {
                        transform: translateY(8px) scale(1.04);
                    }
                }

                /* Entrance animation (subtle, scoped) */
                @keyframes riseIn {
                    from {
                        transform: translateY(8px);
                        opacity: 0;
                    }

                    to {
                        transform: translateY(0);
                        opacity: 1;
                    }
                }

                #fs-native .reveal {
                    animation: riseIn .7s ease both;
                }

                #fs-native .cards-grid .card {
                    animation: riseIn .7s ease both;
                }

                #fs-native .fs-acc-item {
                    animation: riseIn .7s ease both;
                }

                /* Accordion styling */
                #fs-native .fs-acc-item {
                    background: rgba(255, 255, 255, 0.06);
                    border: 1px solid rgba(255, 255, 255, 0.18);
                    border-radius: 12px;
                    overflow: hidden;
                    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.25);
                    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
                }

                #fs-native .fs-acc-item:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 16px 40px rgba(2, 6, 23, 0.35);
                    border-color: rgba(255, 255, 255, 0.26);
                }

                #fs-native .fs-acc-item summary {
                    cursor: pointer;
                    list-style: none;
                    padding: 16px 18px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 10px;
                    font-weight: 800;
                    color: #ffffff;
                    background:
                        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
                    transition: background .2s ease;
                }

                #fs-native .fs-acc-item[open] summary {
                    background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 100%);
                }

                #fs-native .fs-acc-item .chev {
                    display: inline-block;
                    transform: rotate(-90deg);
                    transition: transform .25s ease;
                    color: #cbd5e1;
                    font-weight: 900;
                }

                #fs-native .fs-acc-item[open] .chev {
                    transform: rotate(0);
                }

                #fs-native .fs-acc-item>div {
                    padding: 0 18px 16px 18px;
                }

                /* Cards polish */
                #fs-native .cards-grid {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
                    gap: 14px;
                }

                #fs-native .cards-grid .card {
                    background: rgba(255, 255, 255, 0.06);
                    border: 1px solid rgba(255, 255, 255, 0.18);
                    border-radius: 14px;
                    padding: 16px;
                    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.25);
                    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
                }

                #fs-native .cards-grid .card:hover {
                    transform: translateY(-3px);
                    box-shadow: 0 18px 46px rgba(2, 6, 23, 0.35);
                    border-color: rgba(255, 255, 255, 0.26);
                }

                #fs-native .cards-grid .card>div:first-child {
                    animation: floatY 3.5s ease-in-out infinite;
                }

                @keyframes floatY {
                    0% {
                        transform: translateY(0);
                    }

                    50% {
                        transform: translateY(-6px);
                    }

                    100% {
                        transform: translateY(0);
                    }
                }

                /* Language toggle improvements */
                #fs-native .btn.btn-secondary {
                    border-width: 2px;
                    border-radius: 9999px;
                    padding: 8px 16px;
                    font-weight: 700;
                    transition: transform .15s ease, box-shadow .15s ease;
                }

                #fs-native .btn.btn-secondary:hover {
                    transform: translateY(-1px);
                    box-shadow: 0 8px 20px rgba(2, 6, 23, 0.10);
                }

                /* Split-grid panels and inner cards on dark */
                #fs-native .split-grid>.reveal {
                    background: rgba(255, 255, 255, 0.06) !important;
                    border-color: rgba(255, 255, 255, 0.18) !important;
                }

                #fs-native .split-grid .reveal div[style*='background:#f8fafc'] {
                    background: rgba(255, 255, 255, 0.06) !important;
                    border-color: rgba(255, 255, 255, 0.18) !important;
                }

                #fs-native .split-grid .reveal ul {
                    color: #ffffff;
                }

                /* Flow chips override for dark */
                #fs-native [data-key="flow1"],
                #fs-native [data-key="flow2"],
                #fs-native [data-key="flow3"] {
                    background: rgba(255, 255, 255, 0.08) !important;
                    border-color: rgba(255, 255, 255, 0.25) !important;
                    color: #ffffff !important;
                }

                /* Sinhala typography — larger for better readability */
                #fs-native.lang-si [data-key],
                #fs-native.lang-si .fs-acc-item,
                #fs-native.lang-si summary,
                #fs-native.lang-si p,
                #fs-native.lang-si li {
                    font-family: "Noto Sans Sinhala", "Iskoola Pota", "Segoe UI", system-ui, -apple-system, sans-serif;
                }

                #fs-native.lang-si h2 {
                    font-size: 1.6em;
                    letter-spacing: 0.15px;
                }

                #fs-native.lang-si h3 {
                    font-size: 1.35em;
                    letter-spacing: 0.12px;
                }

                #fs-native.lang-si h4 {
                    font-size: 1.25em;
                    letter-spacing: 0.1px;
                }

                #fs-native.lang-si p,
                #fs-native.lang-si li {
                    font-size: 1.16em;
                    line-height: 2.0;
                }

                #fs-native.lang-si summary {
                    font-size: 1.15em;
                }

                /* Motion safety */
                @media (prefers-reduced-motion: reduce) {

                    #fs-native .reveal,
                    #fs-native .cards-grid .card,
                    #fs-native .fs-acc-item {
                        animation: none !important;
                    }

                    #fs-native .fs-acc-item .chev {
                        transition: none;
                    }

                    #fs-native .btn.btn-secondary {
                        transition: none;
                    }
                }