/* Base Resets / Typography adjustments handled by Bootstrap */
html { scroll-behavior: smooth; }
.small, small {
    font-size: 0.675em !important;
}

/* Progress Bar */
.progress-fixed { position:fixed; top:0; left:0; right:0; height:4px; background:rgba(0,0,0,.08); z-index:1100; overflow:hidden; }
.progress-inner { height:100%; width:0; background:linear-gradient(90deg,#f87171,#ef4444,#dc2626); position:relative; transition:width .3s ease; }
.progress-inner::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent); animation: shimmer 1.8s linear infinite; }
@keyframes shimmer { 0%{transform:translateX(-100%);}100%{transform:translateX(100%);} }

/* Section Indicator */
.section-indicator { position:fixed; top:3.5rem; right:2rem; padding:.5rem .75rem; font-size:.65rem; letter-spacing:.05em; background:#fff; border:1px solid rgba(239,68,68,.4); border-radius:1rem; z-index:1090; box-shadow:0 4px 12px -2px rgba(0,0,0,.08); display:flex; align-items:center; gap:.4rem; }
.section-indicator::before { content:""; width:.5rem; height:.5rem; background:#ef4444; border-radius:50%; animation:pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%,100%{transform:scale(.9); opacity:.6;} 50%{transform:scale(1.3); opacity:1;} }

/* Hero Section */
.hero-section { padding-top:5rem; overflow:hidden; min-height:100vh; }
.hero-bg-layers { position:absolute; inset:0; z-index:0; }
.hero-bg-layers::before { content:""; position:absolute; inset:0; background:linear-gradient(135deg,#f8fafc,#ffffff 40%,#eff6ff); }
.hero-bg-layers::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 15% 25%,rgba(59,130,246,.12),transparent 70%),radial-gradient(circle at 85% 70%,rgba(14,165,233,.12),transparent 70%); mix-blend-mode:normal; }

/* Floating decorative shapes (simplified variants) */
.hero-section .decor-shape { position:absolute; border:2px solid rgba(59,130,246,.35); border-radius:50%; animation:float 8s ease-in-out infinite; opacity:.3; }
@keyframes float { 0%,100%{transform:translateY(-12px);}50%{transform:translateY(12px);} }

/* Badge */
.hero-badge { display:inline-flex; align-items:center; gap:.5rem; background:linear-gradient(90deg,#eff6ff,#ecfeff); border:1px solid rgba(59,130,246,.35); padding:.65rem 1.1rem; border-radius:2rem; font-size:.75rem; font-weight:600; letter-spacing:.5px; backdrop-filter:blur(6px); position:relative; }
.pulse-dot { width:8px; height:8px; background:#2563eb; border-radius:50%; animation:bluePulse 1.5s infinite; }
@keyframes bluePulse { 0%,100%{transform:scale(.9); opacity:.6;}50%{transform:scale(1.4); opacity:1;} }
.gradient-text { background:linear-gradient(90deg,#2563eb,#1d4ed8,#0ea5e9); -webkit-background-clip:text; background-clip:text; color:transparent; }
.highlight-underline { position:relative; font-weight:600; color:#1e3a8a; }
.highlight-underline::after { content:""; position:absolute; left:0; right:0; bottom:-4px; height:4px; background:linear-gradient(90deg,#3b82f6,#06b6d4); border-radius:2px; }

/* Hero Buttons */
.hero-cta-main { position:relative; font-weight:600; padding:.95rem 2.25rem; border-radius:1.25rem; box-shadow:0 10px 28px -8px rgba(37,99,235,.45); overflow:hidden; }
.hero-cta-main::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#1d4ed8,#2563eb,#1d4ed8); transform:scaleX(0); transform-origin:left; transition:.35s ease; opacity:.15; }
.hero-cta-main:hover::before { transform:scaleX(1); }
.hero-cta-secondary { font-weight:600; border-radius:1.25rem; }
.hero-cta-secondary:hover { background:rgba(37,99,235,.06); border-color:#bfdbfe; color:#1d4ed8; }

/* Hero Cards Grid */
.hero-cards-grid { position:relative; display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; max-width:520px; margin-left:auto; }
.hero-card { position:relative; background:rgba(255,255,255,.7); backdrop-filter:blur(18px); border:1px solid rgba(0,0,0,.08); border-radius:2rem; padding:1.35rem 1.25rem 1.25rem; transition:.5s; overflow:hidden; }
.hero-card::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent); transform:translateX(-100%); transition:1s; }
.hero-card:hover { transform:translateY(-6px) scale(1.03); border-color:rgba(59,130,246,.4); box-shadow:0 18px 42px -12px rgba(59,130,246,.35); }
.hero-card:hover::after { transform:translateX(100%); }
.hero-card h3 { font-size:1.05rem; font-weight:700; margin-bottom:.35rem; color:#111827; }
.hero-card p { font-size:.75rem; color:#4b5563; margin:0; }
.icon-wrap { width:3.25rem; height:3.25rem; display:flex; align-items:center; justify-content:center; border-radius:1.25rem; background:linear-gradient(135deg,#dbeafe,#bfdbfe); font-size:1.35rem; margin-bottom:.75rem; box-shadow:0 8px 20px -4px rgba(59,130,246,.35); transition:.4s; }
.icon-wrap.alt { background:linear-gradient(135deg,#cffafe,#bae6fd); box-shadow:0 8px 18px -4px rgba(14,165,233,.35); }
.hero-card:hover .icon-wrap { transform:scale(1.12) rotate(8deg); }
.central-node { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:4rem; height:4rem; background:linear-gradient(135deg,#2563eb,#0ea5e9); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:#fff; box-shadow:0 0 0 0 rgba(37,99,235,.4); animation:breathing 3s ease-in-out infinite; z-index:2; }
@keyframes breathing { 0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.35);}50%{box-shadow:0 0 0 18px rgba(59,130,246,.0);} }
.connections { position:absolute; inset:0; width:100%; height:100%; z-index:1; stroke:url(#gradLine); pointer-events:none; }
.connections line { stroke:#60a5fa; stroke-width:2; stroke-linecap:round; opacity:.5; animation:linePulse 2.8s ease-in-out infinite; }
@keyframes linePulse { 0%,100%{opacity:.25;}50%{opacity:.65;} }

/* Stats */
.stat-box { background:rgba(255,255,255,.55); backdrop-filter:blur(14px); border:1px solid rgba(0,0,0,.08); border-radius:1.25rem; padding:.85rem .15rem; text-align:center; }
.stat-value { font-size:1.35rem; font-weight:700; color:#2563eb; }
.stat-label { font-size:.65rem; letter-spacing:.05em; color:#4b5563; text-transform:uppercase; font-weight:600; }

/* Utilities */
.min-vh-100{min-height:100vh!important;} .fw-medium{font-weight:500;} .gap-3{gap:1rem!important;}

/* Animations reused */
@keyframes blueGlow { 0%,100%{filter:drop-shadow(0 0 0 rgba(59,130,246,.4));}50%{filter:drop-shadow(0 0 10px rgba(59,130,246,.6));} }

/* Responsive tweaks */
@media (max-width: 991.98px){
  .hero-cards-grid { margin:2rem auto 0; }
  .central-node { width:3.25rem; height:3.25rem; }
  .hero-section { padding-top:4.5rem; }
}
@media (max-width: 575.98px){
  .hero-card { border-radius:1.5rem; padding:1.1rem 1rem; }
  .hero-card h3{font-size:.95rem;} .icon-wrap{width:2.75rem;height:2.75rem;font-size:1.1rem;}
  .logo-text{font-size:1rem;} .logo-icon{width:2rem; height:2rem;}
}

/* =========================
   CodeIgniter Problem Section
========================= */
.problem-section { background:linear-gradient(135deg,#ffffff,#f8fafc 40%,#eff6ff); overflow:hidden; }
.problem-bg-layers::before, .problem-bg-layers::after { content:""; position:absolute; inset:0; }
.problem-bg-layers { position:absolute; inset:0; z-index:0; }
.problem-bg-layers::before { background:
  linear-gradient(90deg,rgba(107,114,128,.08) 1px,transparent 1px),
  linear-gradient(rgba(107,114,128,.08) 1px,transparent 1px); background-size:50px 50px; opacity:.25; mix-blend-mode:normal; }
.problem-bg-layers::after { background:
  radial-gradient(circle at 15% 25%,rgba(248,113,113,.18),transparent 70%),
  radial-gradient(circle at 85% 70%,rgba(59,130,246,.15),transparent 70%),
  radial-gradient(circle at 60% 40%,rgba(14,165,233,.12),transparent 70%); opacity:.6; }
.inline-badge { display:inline-flex; align-items:center; gap:.6rem; background:#eff6ff; border:1px solid #bfdbfe; padding:.65rem 1.1rem; border-radius:2rem; font-size:.7rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#1d4ed8; }
.inline-badge.alt { background:#eef2ff; border-color:#c7d2fe; color:#4338ca; }
.inline-badge .icon { font-size:1rem; line-height:1; }
.gradient-text-alt { background:linear-gradient(90deg,#1e293b,#0f172a); -webkit-background-clip:text; background-clip:text; color:transparent; }
.solution-card { position:relative; background:#ffffff; border:1px solid rgba(0,0,0,.08); border-radius:1.75rem; box-shadow:0 20px 48px -16px rgba(0,0,0,.12),0 4px 16px -4px rgba(59,130,246,.15); overflow:hidden; }
/*.solution-card::before { content:""; position:absolute; inset:0; background:linear-gradient(125deg,rgba(59,130,246,.12),rgba(14,165,233,.08)); opacity:0; transition:.5s; }*/
.solution-card:hover::before { opacity:1; }
.solution-card:hover { transform:translateY(-6px); box-shadow:0 28px 60px -18px rgba(59,130,246,.22),0 6px 22px -6px rgba(14,165,233,.25); }
.benefits .benefit-icon { display:inline-flex; align-items:center; justify-content:center; width:2.25rem; height:2.25rem; background:#eff6ff; color:#2563eb; border-radius:50%; margin-right:.75rem; font-size:1.05rem; box-shadow:0 4px 10px -2px rgba(59,130,246,.25); }
.benefits li { font-weight:600; font-size:.95rem; letter-spacing:.25px; }
.start-project-btn { font-weight:600; padding:.85rem 1.2rem; border-radius:.85rem; box-shadow:0 10px 26px -10px rgba(37,99,235,.45); }
.start-project-btn:hover { box-shadow:0 16px 40px -12px rgba(37,99,235,.55); }

/* Floating / decorative elements for problem section */
.problem-section::before, .problem-section::after { content:""; position:absolute; border-radius:50%; filter:blur(60px); opacity:.35; pointer-events:none; }
.problem-section::before { width:340px; height:340px; top:-80px; left:-60px; background:#fecaca; animation:float 14s ease-in-out infinite; }
.problem-section::after { width:400px; height:400px; bottom:-120px; right:-80px; background:#bfdbfe; animation:float 16s ease-in-out infinite reverse; }

@media (prefers-reduced-motion: reduce){
  .problem-section::before, .problem-section::after, .solution-card:hover, .hero-card:hover { animation:none !important; transform:none !important; }
}



/* =========================
   Services Section
========================= */
.services-section { background:linear-gradient(135deg,#ffffff,#f8fafc 55%,#eef2f7); overflow:hidden; }
.services-bg { position:absolute; inset:0; background:
  radial-gradient(circle at 12% 22%,rgba(59,130,246,.12),transparent 65%),
  radial-gradient(circle at 88% 78%,rgba(239,68,68,.12),transparent 65%); }
.services-grid-wrapper { position:relative; }
.services-lines { position:absolute; inset:0; width:100%; height:100%; stroke:rgba(107,114,128,.25); stroke-width:1; pointer-events:none; opacity:.35; }
.services-lines line { stroke-linecap:round; animation:linePulse 6s ease-in-out infinite; }
.service-card { position:relative; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:1.75rem; transition:.55s; overflow:hidden; display:flex; flex-direction:column; }
.service-card:hover { transform:translateY(-6px); box-shadow:0 24px 52px -18px rgba(15,23,42,.25); border-color:rgba(0,0,0,.15); }
.service-card.featured { background:linear-gradient(135deg,#f8fafc,#ffffff); border:1px solid #e2e8f0; }
.service-card.wide { background:#ffffff; }
.icon-wrap-xl { width:5rem; height:5rem; border-radius:1.75rem; background:#111827; color:#fff; display:flex; align-items:center; justify-content:center; font-size:2rem; box-shadow:0 18px 40px -10px rgba(17,24,39,.5); transition:.5s; }
.service-card:hover .icon-wrap-xl { transform:scale(1.08) rotate(3deg); }
.icon-wrap-lg { width:4rem; height:4rem; border-radius:1.25rem; background:#111827; color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.65rem; box-shadow:0 12px 32px -10px rgba(17,24,39,.45); transition:.45s; }
.service-card:hover .icon-wrap-lg { transform:scale(1.1) rotate(4deg); }
.badge-soft { display:inline-block; background:#f1f5f9; color:#334155; padding:.35rem .75rem; font-size:.65rem; letter-spacing:.05em; font-weight:600; border-radius:1rem; text-transform:uppercase; }
.underline { width:80px; height:6px; background:linear-gradient(90deg,#111827,#6b7280,#111827); border-radius:4px; transform:scaleX(0); transform-origin:left; transition:.6s cubic-bezier(.6,.2,.2,1); }
.service-card:hover .underline { transform:scaleX(1); }
.check-dot { width:.55rem; height:.55rem; border-radius:50%; background:linear-gradient(90deg,#1d4ed8,#1e40af); display:inline-block; box-shadow:0 0 0 0 rgba(29,78,216,.5); animation:bluePulse 2.6s ease-in-out infinite; }
.mini-stat { background:#f8fafc; border:1px solid #e2e8f0; border-radius:1rem; padding:.75rem .5rem; text-align:center; transition:.4s; }
.mini-stat .val { font-size:1.1rem; font-weight:700; color:#111827; }
.mini-stat .lbl { font-size:.55rem; letter-spacing:.06em; text-transform:uppercase; color:#64748b; font-weight:600; }
.mini-stat:hover { background:#f1f5f9; border-color:#cbd5e1; }
.tech-inline { font-size:.65rem; font-weight:600; letter-spacing:.05em; color:#334155; background:#f1f5f9; border:1px solid #e2e8f0; padding:.4rem .6rem; border-radius:1rem; display:inline-block; }
.pill { background:#f1f5f9; border:1px solid #e2e8f0; padding:.5rem .4rem; border-radius:.85rem; font-size:.65rem; font-weight:600; line-height:1.1; transition:.35s; }
.pill .sub { font-size:.5rem; font-weight:500; color:#64748b; }
.pill:hover { background:#e2e8f0; }
.metrics-row .metric-val { font-size:1rem; font-weight:700; color:#111827; }
.metrics-row .metric-label { font-size:.55rem; letter-spacing:.05em; text-transform:uppercase; color:#475569; font-weight:600; }
.services-cta { background:linear-gradient(135deg,#111827,#1e293b); border:1px solid rgba(255,255,255,.08); box-shadow:0 30px 60px -18px rgba(15,23,42,.6); }
.services-cta .cta-bg { position:absolute; inset:0; background:
  radial-gradient(circle at 30% 30%,rgba(255,255,255,.12),transparent 65%),
  radial-gradient(circle at 70% 70%,rgba(255,255,255,.1),transparent 65%); mix-blend-mode:overlay; opacity:.55; }
.hover-fill-dark { position:relative; overflow:hidden; }
.hover-fill-dark::before { content:""; position:absolute; inset:0; background:#1e293b; transform:scaleX(0); transform-origin:left; transition:.45s; z-index:-1; }
.hover-fill-dark:hover::before { transform:scaleX(1); }
.max-w-650 { max-width:650px; }

@media (max-width: 991.98px){
  .service-card.featured { padding:2rem 1.5rem !important; }
  .icon-wrap-xl { width:4.25rem; height:4.25rem; }
}
@media (max-width: 575.98px){
  .icon-wrap-xl { width:3.75rem; height:3.75rem; font-size:1.5rem; }
  .icon-wrap-lg { width:3.25rem; height:3.25rem; font-size:1.25rem; }
  .service-card { border-radius:1.25rem; }
}

/* =========================
   Features Section
========================= */
.features-section { background:#fff; }
.features-bg { position:absolute; inset:0; background:
  radial-gradient(circle at 15% 20%,rgba(59,130,246,.12),transparent 60%),
  radial-gradient(circle at 85% 70%,rgba(147,197,253,.14),transparent 65%); pointer-events:none; }
.inline-pill { display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .85rem; background:#eff6ff; color:#1d4ed8; border-radius:2rem; font-size:.75rem; font-weight:600; letter-spacing:.05em; }
.inline-pill .pulse-dot { width:.55rem; height:.55rem; background:#2563eb; border-radius:50%; box-shadow:0 0 0 0 rgba(37,99,235,.5); animation:bluePulse 2.4s ease-in-out infinite; }
.feature-highlights .highlight { border:1px solid #e5e7eb; transition:.45s; }
.feature-highlights .highlight:hover { border-color:#93c5fd; box-shadow:0 10px 28px -12px rgba(59,130,246,.35); transform:translateY(-4px); }
.feature-number-wrap { position:relative; width:3.25rem; height:3.25rem; }
.feature-number { width:100%; height:100%; background:linear-gradient(135deg,#2563eb,#1d4ed8); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1rem; border-radius:1rem; position:relative; z-index:2; box-shadow:0 10px 24px -8px rgba(37,99,235,.55); }
.feature-number-glow { position:absolute; inset:0; background:#3b82f6; border-radius:1rem; filter:blur(12px); opacity:.35; animation:pulseGlow 4s ease-in-out infinite; }
@keyframes pulseGlow { 0%,100%{opacity:.25} 50%{opacity:.5} }
.feature-item { position:relative; overflow:hidden; transition:.55s; }
.feature-item::before { content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(255,255,255,0),rgba(255,255,255,.35),rgba(255,255,255,0)); transform:translateX(-100%); }
.feature-item:hover::before { animation:shine 1.1s; }
@keyframes shine { 0%{transform:translateX(-100%);} 100%{transform:translateX(100%);} }
.feature-item:hover { transform:translateY(-5px); box-shadow:0 26px 52px -18px rgba(15,23,42,.18); }
.pill-tag { background:#eff6ff; border:1px solid #bfdbfe; padding:.35rem .75rem; border-radius:1.25rem; font-size:.65rem; font-weight:600; color:#1e3a8a; letter-spacing:.04em; transition:.35s; }
.pill-tag:hover { background:#dbeafe; }
.gradient-cta { background:linear-gradient(135deg,#2563eb,#1e3a8a); box-shadow:0 40px 70px -25px rgba(30,58,138,.6); position:relative; overflow:hidden; }
.gradient-cta::after { content:""; position:absolute; inset:0; background:
  radial-gradient(circle at 30% 30%,rgba(255,255,255,.18),transparent 60%),
  radial-gradient(circle at 70% 70%,rgba(255,255,255,.15),transparent 65%); mix-blend-mode:overlay; }
.hover-scale-sm { transition:.4s; }
.hover-scale-sm:hover { transform:translateY(-3px); box-shadow:0 10px 26px -10px rgba(0,0,0,.35); }
.feature-item .feature-number-wrap { flex-shrink:0; }
.features-list .feature-item { opacity:0; transform:translateY(25px); }
.features-list .feature-item.reveal { opacity:1; transform:translateY(0); transition:.85s cubic-bezier(.65,.2,.2,1); }
@media (max-width: 575.98px){
  .feature-number-wrap { width:2.75rem; height:2.75rem; }
  .feature-number { font-size:.85rem; border-radius:.9rem; }
  .gradient-cta { border-radius:1.5rem !important; }
}

/* =========================
   E-Commerce / Case Studies Section
========================= */
.ecommerce-section { background:linear-gradient(135deg,#ffffff,#f8fafc 55%,#f1f5f9); }
.ecom-bg { position:absolute; inset:0; background:
  radial-gradient(circle at 20% 25%,rgba(59,130,246,.1),transparent 60%),
  radial-gradient(circle at 80% 70%,rgba(239,68,68,.08),transparent 65%); }
.case-study .case-number { line-height:1; color:#e2e8f0 !important; }
.study-card { position:relative; background:#fff; border:1px solid #e5e7eb; border-radius:2rem; box-shadow:0 18px 42px -20px rgba(15,23,42,.18); transition:.6s; }
.study-card::before { content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(255,255,255,0),rgba(255,255,255,.4),rgba(255,255,255,0)); transform:translateX(-100%); }
.study-card:hover::before { animation:shine 1.15s; }
.study-card:hover { transform:translateY(-6px); box-shadow:0 35px 60px -25px rgba(15,23,42,.25); border-color:#d1d5db; }
.results-list .result-icon { display:inline-flex; width:1.15rem; height:1.15rem; align-items:center; justify-content:center; background:linear-gradient(135deg,#2563eb,#1d4ed8); color:#fff; font-size:.6rem; border-radius:50%; box-shadow:0 4px 10px -3px rgba(37,99,235,.5); }
.ecom-cta { background:linear-gradient(135deg,#1e293b,#0f172a); border:1px solid rgba(255,255,255,.08); box-shadow:0 40px 70px -25px rgba(15,23,42,.65); }
.ecom-cta .cta-layer { position:absolute; inset:0; background:
  radial-gradient(circle at 30% 30%,rgba(255,255,255,.14),transparent 60%),
  radial-gradient(circle at 70% 70%,rgba(255,255,255,.12),transparent 65%); mix-blend-mode:overlay; }
.cta-icon { width:4rem; height:4rem; background:linear-gradient(135deg,#2563eb,#1d4ed8); display:flex; align-items:center; justify-content:center; border-radius:1.25rem; font-size:1.75rem; box-shadow:0 20px 40px -15px rgba(37,99,235,.6); }
.ecommerce-section .icon-wrap-lg.alt { background:#1e293b; }
@media (max-width: 575.98px){
  .study-card { border-radius:1.5rem; }
  .cta-icon { width:3.25rem; height:3.25rem; font-size:1.25rem; }
}

/* =========================
   Industries Section
========================= */
.industries-section { background:#fff; position:relative; }
.industries-bg { position:absolute; inset:0; background:
  radial-gradient(circle at 12% 20%,rgba(59,130,246,.12),transparent 60%),
  radial-gradient(circle at 88% 75%,rgba(59,130,246,.08),transparent 65%),
  linear-gradient(180deg,rgba(255,255,255,0) 0%,#f8fafc 90%); pointer-events:none; }
.industry-card { position:relative; background:#fff; border:1px solid #e2e8f0; border-radius:1.5rem; box-shadow:0 6px 18px -8px rgba(15,23,42,.12); transition:.5s; overflow:hidden; }
.industry-card::after { content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(255,255,255,0),rgba(255,255,255,.4),rgba(255,255,255,0)); transform:translateX(-100%); }
.industry-card:hover::after { animation:shine 1.2s; }
.industry-card:hover { transform:translateY(-5px); box-shadow:0 20px 42px -18px rgba(15,23,42,.2); border-color:#d1d5db; }
.industry-card .icon-badge { width:3.25rem; height:3.25rem; display:flex; align-items:center; justify-content:center; border-radius:1rem; font-size:1.45rem; color:#fff; font-weight:600; box-shadow:0 10px 24px -10px rgba(15,23,42,.35); }
.industry-card .mini-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.4rem; }
.industry-card .mini-list li { position:relative; padding-left:1rem; }
.industry-card .mini-list li::before { content:""; position:absolute; left:0; top:.45rem; width:.45rem; height:.45rem; border-radius:50%; background:linear-gradient(135deg,#2563eb,#1d4ed8); box-shadow:0 0 0 0 rgba(37,99,235,.45); animation:bluePulse 2.8s ease-in-out infinite; }

/* Gradient variants */
.bg-gradient-blue { background:linear-gradient(135deg,#2563eb,#1d4ed8); }
.bg-gradient-red { background:linear-gradient(135deg,#dc2626,#b91c1c); }
.bg-gradient-green { background:linear-gradient(135deg,#16a34a,#15803d); }
.bg-gradient-sky { background:linear-gradient(135deg,#0ea5e9,#0369a1); }
.bg-gradient-purple { background:linear-gradient(135deg,#7e22ce,#6d28d9); }
.bg-gradient-pink { background:linear-gradient(135deg,#db2777,#be185d); }
.bg-gradient-amber { background:linear-gradient(135deg,#d97706,#b45309); }
.bg-gradient-teal { background:linear-gradient(135deg,#0d9488,#0f766e); }

@media (max-width: 575.98px){
  .industry-card { border-radius:1.25rem; }
  .industry-card .icon-badge { width:2.75rem; height:2.75rem; font-size:1.1rem; }
}

/* =========================
   Expertise Section
========================= */
.expertise-section { background:linear-gradient(180deg,#f8fafc,#ffffff 45%,#f1f5f9); }
.expertise-bg { position:absolute; inset:0; background:
  radial-gradient(circle at 18% 22%,rgba(59,130,246,.12),transparent 60%),
  radial-gradient(circle at 82% 78%,rgba(99,102,241,.12),transparent 65%); pointer-events:none; }
.tech-card { position:relative; background:#fff; border:1px solid #e2e8f0; border-radius:1.35rem; box-shadow:0 8px 22px -12px rgba(15,23,42,.15); transition:.55s; overflow:hidden; }
.tech-card:hover { transform:translateY(-6px); box-shadow:0 28px 52px -20px rgba(15,23,42,.25); border-color:#d1d5db; }
.tech-card::after { content:""; position:absolute; inset:0; background:linear-gradient(115deg,rgba(255,255,255,0),rgba(255,255,255,.4),rgba(255,255,255,0)); transform:translateX(-100%); }
.tech-card:hover::after { animation:shine 1.2s; }
.icon-tile.small { display:inline-flex; }
.icon-core,.icon-db,.icon-api,.icon-cloud,.icon-monitor,.icon-lock { width:3rem; height:3rem; border-radius:.9rem; display:flex; align-items:center; justify-content:center; font-weight:700; letter-spacing:.5px; font-size:.9rem; color:#1e293b; background:#f1f5f9; box-shadow:0 8px 18px -10px rgba(15,23,42,.2); transition:.5s; }
.tech-card:hover .icon-core,
.tech-card:hover .icon-db,
.tech-card:hover .icon-api,
.tech-card:hover .icon-cloud,
.tech-card:hover .icon-monitor,
.tech-card:hover .icon-lock { background:#1e293b; color:#fff; }
.mini-bullets { list-style:none; padding:0; margin:0; display:grid; gap:.4rem; }
.mini-bullets.two-cols { grid-template-columns:repeat(2,minmax(0,1fr)); }
.mini-bullets li { position:relative; padding-left:.9rem; font-weight:400; color:#334155;    font-size: 13px; }
.mini-bullets li::before { content:""; position:absolute; width:.45rem; height:.45rem; border-radius:50%; left:0; top:.45rem; background:linear-gradient(135deg,#2563eb,#1d4ed8); box-shadow:0 0 0 0 rgba(29,78,216,.5); animation:bluePulse 2.8s ease-in-out infinite; }
.x-small { font-size:.7rem; line-height:1.3; }

/*
.benefits-band::before { content:""; position:absolute; inset:0; background:
  radial-gradient(circle at 25% 30%,rgba(255,255,255,.1),transparent 60%),
  radial-gradient(circle at 70% 70%,rgba(255,255,255,.09),transparent 65%); mix-blend-mode:overlay; opacity:.55; }
*/
.benefit-tile { position:relative; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:1.25rem; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:.55s; }
.benefit-tile:hover { transform:translateY(-6px); background:rgba(255,255,255,.07); }
.benefit-icon { width:3.25rem; height:3.25rem; border-radius:.9rem; display:flex; align-items:center; justify-content:center; font-size:1.35rem; color:#fff; box-shadow:0 16px 34px -15px rgba(0,0,0,.4); margin: 0 auto;}
.expertise-cta { background:linear-gradient(135deg,#1e293b,#0f172a); border:1px solid rgba(255,255,255,.1); box-shadow:0 40px 70px -25px rgba(15,23,42,.65); color:#fff; position:relative; }
.expertise-cta .cta-overlay { position:absolute; inset:0; background:
  radial-gradient(circle at 30% 30%,rgba(255,255,255,.18),transparent 60%),
  radial-gradient(circle at 70% 70%,rgba(255,255,255,.15),transparent 65%); mix-blend-mode:overlay; }
@media (max-width: 575.98px){
  .tech-card { border-radius:1rem; }
  .benefit-icon { width:2.75rem; height:2.75rem; font-size:1.05rem; }
}

/* =========================
   Process Section
========================= */
.process-section { background:linear-gradient(135deg,#ffffff,#f8fafc 55%,#eef2f7); overflow:hidden; }
.process-bg { position:absolute; inset:0; background:
  radial-gradient(circle at 15% 25%,rgba(59,130,246,.12),transparent 65%),
  radial-gradient(circle at 85% 70%,rgba(14,165,233,.12),transparent 65%); pointer-events:none; }
.process-progress-wrapper { max-width:620px; }
.process-progress-wrapper .step-dots button { background:#fff; border:2px solid #e5e7eb; width:42px; height:42px; border-radius:50%; font-size:.8rem; font-weight:600; color:#475569; display:flex; align-items:center; justify-content:center; transition:.45s; position:relative; }
.process-progress-wrapper .step-dots button.active, .process-progress-wrapper .step-dots button:hover { border-color:#2563eb; background:#2563eb; color:#fff; box-shadow:0 8px 18px -6px rgba(37,99,235,.5); }
.progress-track { position:relative; height:10px; background:#e2e8f0; border-radius:6px; overflow:hidden; box-shadow:inset 0 0 0 1px #d1d5db; }
.progress-fill { position:absolute; inset:0; width:16%; background:linear-gradient(90deg,#2563eb,#1d4ed8); border-radius:6px; transition:width .6s cubic-bezier(.65,.2,.2,1); box-shadow:0 4px 14px -4px rgba(37,99,235,.6); }
.process-steps-grid .process-step-card { position:relative; background:#fff; border:1px solid #e2e8f0; border-radius:1.35rem; padding:1.35rem 1.15rem 1.25rem; cursor:pointer; transition:.55s; height:100%; display:flex; flex-direction:column; overflow:hidden; }
.process-steps-grid .process-step-card:focus-visible { outline:2px solid #2563eb; outline-offset:3px; }
.process-steps-grid .process-step-card:hover { transform:translateY(-6px); box-shadow:0 22px 50px -20px rgba(15,23,42,.25); border-color:#d1d5db; }
.process-steps-grid .process-step-card.active { border-color:#2563eb; box-shadow:0 26px 56px -22px rgba(37,99,235,.5); background:linear-gradient(135deg,#f8fafc,#ffffff); }
.icon-ring { width:3.1rem; height:3.1rem; background:#111827; color:#fff; border-radius:1rem; display:flex; align-items:center; justify-content:center; font-size:1.3rem; box-shadow:0 12px 32px -10px rgba(17,24,39,.5); }
.process-step-card .step-label { font-size:.55rem; letter-spacing:.06em; font-weight:600; text-transform:uppercase; color:#475569; display:block; margin-top:-.25rem; margin-bottom:.35rem; }
.process-step-card.active .step-label { color:#1d4ed8; }
.process-step-card p { font-size:.7rem; line-height:1.35; }
.process-step-card .step-details { margin-top:1rem; border-top:1px solid #e2e8f0; padding-top:.85rem; display:none; }
.process-step-card.expanded .step-details { display:block; animation:fadeUp .55s cubic-bezier(.6,.2,.2,1); }
@keyframes fadeUp { 0%{opacity:0; transform:translateY(12px);}100%{opacity:1; transform:translateY(0);} }
.process-step-card .mini-list { list-style:none; padding:0; margin:0 0 .75rem; display:flex; flex-direction:column; gap:.4rem; }
.process-step-card .mini-list li { position:relative; padding-left:.9rem; font-size:.65rem; font-weight:500; color:#334155; }
.process-step-card .mini-list li::before { content:""; position:absolute; left:0; top:.45rem; width:.45rem; height:.45rem; background:linear-gradient(135deg,#2563eb,#1d4ed8); border-radius:50%; box-shadow:0 0 0 0 rgba(37,99,235,.45); animation:bluePulse 2.8s ease-in-out infinite; }
.process-step-card .duration { font-size:.6rem; letter-spacing:.05em; font-weight:600; color:#475569; text-transform:uppercase; }
.process-controls .btn { font-size:.75rem; }
.process-cta-card { position:relative; background:#fff; border:1px solid #e2e8f0; border-radius:1.75rem; box-shadow:0 24px 52px -20px rgba(15,23,42,.18); transition:.55s; overflow:hidden; }
.process-cta-card:hover { transform:translateY(-6px); box-shadow:0 36px 70px -25px rgba(15,23,42,.28); }
.process-cta-card .cta-details { display:none; margin-bottom:.5rem; border-top:1px solid #e2e8f0; padding-top:1rem; }
.process-cta-card.show-details .cta-details { display:block; animation:fadeUp .55s cubic-bezier(.6,.2,.2,1); }
.process-cta-card .mini-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.45rem; }
.process-cta-card .mini-list li { font-size:.65rem; font-weight:500; position:relative; padding-left:.9rem; color:#334155; }
.process-cta-card .mini-list li::before { content:""; position:absolute; left:0; top:.45rem; width:.45rem; height:.45rem; background:linear-gradient(135deg,#2563eb,#1d4ed8); border-radius:50%; }
.process-industry-card { position:relative; background:#fff; border:1px solid #e2e8f0; border-radius:1.1rem; box-shadow:0 8px 24px -12px rgba(15,23,42,.14); transition:.5s; overflow:hidden; }
.process-industry-card:hover, .process-industry-card:focus { transform:translateY(-5px); border-color:#d1d5db; box-shadow:0 26px 48px -20px rgba(15,23,42,.22); }
.process-industry-card .pi-icon { width:2.75rem; height:2.75rem; border-radius:.85rem; background:#111827; color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.15rem; box-shadow:0 10px 24px -12px rgba(17,24,39,.5); }
.process-industry-card .feature-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.35rem; }
.process-industry-card .feature-list li { position:relative; padding-left:.85rem; }
.process-industry-card .feature-list li::before { content:""; position:absolute; left:0; top:.4rem; width:.4rem; height:.4rem; background:linear-gradient(135deg,#2563eb,#1d4ed8); border-radius:50%; }
.process-section .x-small { font-size:.6rem; }
.process-section .max-w-650 { max-width:650px; }
@media (max-width: 991.98px){
  .process-steps-grid .process-step-card { padding:1.15rem 1rem 1rem; }
  .process-progress-wrapper .step-dots button { width:38px; height:38px; }
}
@media (max-width: 575.98px){
  .process-steps-grid .process-step-card { border-radius:1rem; }
  .process-progress-wrapper .step-dots button { width:34px; height:34px; font-size:.7rem; }
}


/* =========================
   Comparison Section
========================= */
.comparison-section { background:linear-gradient(135deg,#ffffff,#f8fafc 55%,#f1f5f9); }
.comparison-bg { position:absolute; inset:0; background:
  radial-gradient(circle at 18% 20%,rgba(59,130,246,.12),transparent 60%),
  radial-gradient(circle at 82% 80%,rgba(239,68,68,.12),transparent 60%); pointer-events:none; }
.comparison-table { background:#fff; border:1px solid #e2e8f0; box-shadow:0 24px 52px -22px rgba(15,23,42,.2); }
.comparison-table .table-head { background:#f1f5f9; font-size:.7rem; letter-spacing:.08em; font-weight:700; text-transform:uppercase; color:#334155; padding:1rem 1.5rem; border-bottom:1px solid #e2e8f0; }
.comparison-table .col-feature { flex:1.1; font-weight:600; }
.comparison-table .col-us { flex:1; font-weight:600; }
.comparison-table .col-them { flex:1; font-weight:600; }
.comparison-table .sub { display:block; font-size:.55rem; font-weight:600; letter-spacing:.1em; color:#64748b; margin-top:.25rem; }
.comparison-table .table-body { display:flex; flex-direction:column; }
.comparison-table .row-item { display:flex; padding:1rem 1.5rem; font-size:.75rem; gap:1rem; align-items:flex-start; border-bottom:1px solid #f1f5f9; background:#fff; transition:.4s; }
.comparison-table .row-item:nth-child(even){ background:#f8fafc; }
.comparison-table .row-item:hover { background:#f1f5f9; }
.comparison-table .index-badge { display:inline-flex; width:1.4rem; height:1.4rem; border-radius:.5rem; background:#111827; color:#fff; align-items:center; justify-content:center; font-size:.55rem; font-weight:600; margin-right:.5rem; }
.comparison-table .col-us { background:#f8fafc; border-left:4px solid #111827; padding:.9rem 1rem; border-radius:.85rem; line-height:1.35; }
.comparison-table .col-them { background:#f1f5f9; border-left:4px solid #64748b; padding:.9rem 1rem; border-radius:.85rem; line-height:1.35; }
.comparison-table .table-summary { background:#f1f5f9; padding:1.1rem 1.5rem; border-top:1px solid #e2e8f0; }
.score-box { background:#fff; border:1px solid #e2e8f0; border-radius:1rem; padding:1rem .85rem; box-shadow:0 10px 24px -12px rgba(15,23,42,.15); }
.score-box.alt { border-color:#d1d5db; }
.score-val { font-size:1.35rem; font-weight:700; color:#111827; }
.score-bar { position:relative; height:6px; background:#e2e8f0; border-radius:4px; overflow:hidden; margin-top:.35rem; }
.score-bar div { position:absolute; inset:0; background:linear-gradient(90deg,#111827,#334155); box-shadow:0 4px 10px -4px rgba(17,24,39,.45); }
.score-box.alt .score-bar div { background:linear-gradient(90deg,#64748b,#94a3b8); }
.comparison-advantages .advantage-tile { position:relative; background:#fff; border:1px solid #e2e8f0; border-radius:1.25rem; box-shadow:0 10px 26px -14px rgba(15,23,42,.15); transition:.5s; }
.comparison-advantages .advantage-tile:hover { transform:translateY(-5px); box-shadow:0 28px 52px -24px rgba(15,23,42,.25); border-color:#d1d5db; }
.adv-icon { width:3rem; height:3rem; background:#111827; color:#fff; display:flex; align-items:center; justify-content:center; border-radius:1rem; font-size:1.35rem; box-shadow:0 12px 32px -14px rgba(17,24,39,.6); }
.comparison-cta { background:linear-gradient(135deg,#111827,#1e293b); border:1px solid rgba(255,255,255,.08); box-shadow:0 40px 70px -25px rgba(15,23,42,.65); color:#fff; }
.comparison-cta .cta-overlay { position:absolute; inset:0; background:
  radial-gradient(circle at 30% 30%,rgba(255,255,255,.18),transparent 60%),
  radial-gradient(circle at 70% 70%,rgba(255,255,255,.15),transparent 65%); mix-blend-mode:overlay; }
.trust-indicators span { background:rgba(255,255,255,.08); padding:.35rem .65rem; border-radius:.75rem; }

/* =========================
   CodeIgniter Specific FAQ
========================= */
.ci-faq-section { background:#fff; }
.ci-faq-bg { position:absolute; inset:0; background:
  radial-gradient(circle at 20% 25%,rgba(59,130,246,.12),transparent 60%),
  radial-gradient(circle at 80% 70%,rgba(99,102,241,.12),transparent 65%); pointer-events:none; }
.ci-faq-items { max-width:900px; margin:0 auto; display:flex; flex-direction:column; gap:1rem; }
.ci-faq-item { background:#fff; border:1px solid #e2e8f0; border-radius:1.25rem; overflow:hidden; box-shadow:0 8px 24px -14px rgba(15,23,42,.15); transition:.5s; }
.ci-faq-item:hover { transform:translateY(-4px); box-shadow:0 22px 48px -18px rgba(15,23,42,.22); border-color:#d1d5db; }
.ci-faq-toggle { width:100%; display:flex; align-items:flex-start; gap:1rem; text-align:left; background:transparent; border:0; padding:1rem 1.15rem 1rem 1.15rem; cursor:pointer; position:relative; }
.ci-faq-toggle:focus-visible { outline:2px solid #2563eb; outline-offset:3px; }
.ci-faq-toggle .index { width:2rem; height:2rem; display:flex; align-items:center; justify-content:center; background:#111827; color:#fff; border-radius:.75rem; font-size:.75rem; font-weight:600; flex-shrink:0; box-shadow:0 6px 18px -8px rgba(17,24,39,.5); }
.ci-faq-toggle .q-text { font-size:.85rem; font-weight:600; line-height:1.4; color:#111827; flex:1; }
.ci-faq-toggle .chevron { font-size:.75rem; opacity:.6; transition:.45s; }
.ci-faq-toggle[aria-expanded="true"] .chevron { transform:rotate(180deg); opacity:1; }
.ci-faq-content { background:#f8fafc; border-top:1px solid #e2e8f0; padding:.85rem 1.15rem 1rem 1.15rem; font-size:.75rem; line-height:1.5; color:#334155; }
.ci-faq-cta { background:linear-gradient(135deg,#111827,#1e293b); color:#fff; border:1px solid rgba(255,255,255,.08); box-shadow:0 30px 60px -18px rgba(15,23,42,.55); }
@media (max-width: 575.98px){
  .faq-item, .ci-faq-item { border-radius:1rem; }
  .comparison-table .row-item { flex-direction:column; }
  .comparison-table .col-feature, .comparison-table .col-us, .comparison-table .col-them { flex:1 1 auto; width:100%; }
}



/* =========================
   Dynamic Enhancements (Hero & Problem)
========================= */
.rotating-words { position:relative; display:inline-block; min-width:8ch; }
.rotating-words .rot-word { position:absolute; left:0; top:0; opacity:0; transform:translateY(12px); transition:opacity .7s cubic-bezier(.6,.2,.2,1), transform .7s cubic-bezier(.6,.2,.2,1); white-space:nowrap; }
.rotating-words .rot-word.active { opacity:1; transform:translateY(0); position:relative; }
.hero-counters .stat-box { position:relative; }
.hero-counters .stat-box .stat-value { font-variant-numeric:tabular-nums; }
.rotating-quotes { position:relative; min-height:2.2rem; }
.rotating-quotes .quote-item { position:absolute; left:0; top:0; width:100%; opacity:0; transform:translateY(8px); transition:opacity .65s cubic-bezier(.6,.2,.2,1), transform .65s cubic-bezier(.6,.2,.2,1); font-size:.9rem; color:#334155; }
.rotating-quotes .quote-item.active { opacity:1; transform:translateY(0); position:relative; }

/* ==== Supplemental Styles for New Features Section Markup ==== */
.features-sticky { padding-bottom:2rem; }
.feature-highlight { background:rgba(255,255,255,.6); border:1px solid #e2e8f0; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:.45s; }
.feature-highlight:hover { background:#fff; border-color:#cbd5e1; box-shadow:0 10px 26px -12px rgba(15,23,42,.18); }
.fi-num { background:linear-gradient(135deg,#2563eb,#1d4ed8); color:#fff; font-weight:600; font-size:.85rem; border-radius:1rem; display:flex; align-items:center; justify-content:center; width:3rem; height:3rem; position:relative; box-shadow:0 10px 24px -10px rgba(37,99,235,.55); }
.fi-num::before { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(120deg,rgba(255,255,255,.35),rgba(255,255,255,0)); mix-blend-mode:overlay; }
.features-list .feature-item { background:rgba(255,255,255,.75); border:1px solid #e5e7eb;  }
.features-list .feature-item:hover { border-color:#d1d5db; }
.features-section .badge-soft { background:rgba(37,99,235,.1); border:1px solid rgba(37,99,235,.25); color:#1d4ed8; padding:.45rem .75rem; font-size:.6rem; font-weight:600; letter-spacing:.05em; border-radius:1rem; }
.features-cta { background:linear-gradient(135deg,#111827,#1e293b); border:1px solid rgba(255,255,255,.08); color:#fff; box-shadow:0 30px 60px -20px rgba(0,0,0,.55); }
.features-cta h3 { color:#fff; }
.features-cta .btn-outline-secondary { border-color:#334155; color:#e2e8f0; }
.features-cta .btn-outline-secondary:hover { background:#1e293b; }
@media (max-width: 575.98px){
  .fi-num { width:2.5rem; height:2.5rem; font-size:.75rem; }
}