/* styles.css — Bootstrap-friendly custom styles (no Tailwind) */

:root {
  --ci-red-400: #fb7185;
  --ci-red-500: #ef4444;
  --ci-red-600: #dc2626;
  --ci-blue-200: #bfdbfe;
  --ci-blue-300: #93c5fd;
  --ci-blue-400: #60a5fa;
  --ci-gray-50: #f9fafb;
  --ci-gray-100: #f3f4f6;
  --ci-gray-200: #e5e7eb;
  --ci-gray-300: #d1d5db;
  --ci-gray-400: #9ca3af;
  --ci-gray-500: #6b7280;
  --ci-gray-700: #374151;
  --header-height: 4.5rem;
}

html, body { height: 100%; }
body.loaded { overflow-x: hidden; }

/****************** Loading Screen ******************/
.loading-screen {
  position: fixed; inset: 0; z-index: 100; background: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 1s ease;
}
.loading-screen.loaded { opacity: 0; pointer-events: none; }
.loading-bg-texture { position: absolute; inset: 0; background: linear-gradient(135deg,#f9fafb,rgba(255,255,255,.95),rgba(254,242,242,.6)); }
.loading-geo.geo-square { position:absolute; top:5rem; left:5rem; width:64px; height:64px; border:2px solid var(--ci-gray-200); transform: rotate(45deg); opacity:.3; animation: float 6s ease-in-out infinite; }
.loading-geo.geo-circle { position:absolute; bottom:5rem; right:6rem; width:48px; height:48px; border-radius:50%; background: rgba(239,68,68,.15); filter: drop-shadow(0 10px 20px rgba(239,68,68,.2)); animation: breathe 5s ease-in-out infinite; }
.loading-geo.geo-triangle { position:absolute; top:10rem; right:10rem; width:32px; height:32px; background: rgba(239,68,68,.2); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); opacity:.2; animation: float 7s ease-in-out infinite reverse; }
.spinner-wrap { width:64px; height:64px; }
.spinner-outer { position:absolute; inset:0; border:2px solid var(--ci-gray-200); border-radius:50%; }
.spinner-inner { position:absolute; inset:0; border:2px solid transparent; border-top-color: var(--ci-red-500); border-radius:50%; animation: spin 1s linear infinite; box-shadow: 0 0 20px rgba(239,68,68,.2); }
.spinner-core { position:absolute; inset:8px; border:1px solid rgba(239,68,68,.4); border-radius:50%; animation: pulse 2s ease-in-out infinite; }
.loading-dots .dot { width:8px; height:8px; border-radius:50%; background: var(--ci-red-400); animation: bounce 1s infinite; }
.loading-dots .dot.delay-1 { animation-delay:.1s; }
.loading-dots .dot.delay-2 { animation-delay:.2s; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity:.6; } 50% { opacity:1; } }
@keyframes bounce { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/****************** Progress Bar & Section Indicator ******************/
.progress-bar-wrap { position: fixed; top:0; left:0; width:100%; height:4px; z-index:50; background: rgba(243,244,246,.8); backdrop-filter: blur(4px); overflow:hidden; }
.progress-bar-fill { height:100%; width:0%; background: linear-gradient(90deg, var(--ci-red-400), var(--ci-red-500), var(--ci-red-600)); position:relative; transition: width .3s ease; }
.progress-shimmer { position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); animation: shimmer 1.8s linear infinite; }
.progress-red-glow { position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(254,226,226,.5), transparent); animation: shimmer 2.4s linear infinite reverse; }
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

.section-indicator { position: fixed; top:3.5rem; right:2rem; z-index:50; background: rgba(255,255,255,.95); backdrop-filter: blur(8px); border:1px solid rgba(254,226,226,.6); border-radius: 0.75rem; padding: .5rem .75rem; font-size: .75rem; color:#374151; box-shadow: 0 .25rem 1rem rgba(0,0,0,.08); }
.section-indicator .pulse-dot { width:8px; height:8px; background: var(--ci-red-400); display:inline-block; border-radius:50%; animation: pulse 2s ease-in-out infinite; }


/****************** Global Background Effects ******************/
.global-effects { position: fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.mesh-gradient { position:absolute; inset:0; background:
  radial-gradient(ellipse at 10% 10%, rgba(252,165,165,.2), transparent 70%),
  radial-gradient(ellipse at 85% 15%, rgba(252,165,165,.15), transparent 70%),
  radial-gradient(ellipse at 15% 85%, rgba(209,213,219,.2), transparent 70%),
  radial-gradient(ellipse at 90% 80%, rgba(239,68,68,.15), transparent 70%);
  opacity:.3;
}
.noise-overlay { position:absolute; inset:0; opacity:.03; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 128px 128px; }
.grid-primary { position:absolute; inset:0; opacity:.05; background-image:
  linear-gradient(rgba(107,114,128,.8) 1px, transparent 1px),
  linear-gradient(90deg, rgba(96,165,250,.6) 1px, transparent 1px),
  linear-gradient(45deg, rgba(156,163,175,.4) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px, 30px 30px;
}
.mouse-glow { position:absolute; width:24rem; height:24rem; transform: translate(-50%,-50%); border-radius:999px; filter: blur(60px); background: radial-gradient(circle, rgba(239,68,68,.15), transparent 60%); transition: top .6s ease, left .6s ease; }

/* floating particles */
.particle { position:absolute; opacity:.25; box-shadow: 0 10px 30px rgba(239,68,68,.12); }
.particle.circle { width:8rem; height:8rem; border:1px solid rgba(248,113,113,.4); border-radius:50%; }
.particle.triangle { width:6rem; height:6rem; background: rgba(239,68,68,.12); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); animation: breathe 8s ease-in-out infinite; }
.particle.diamond { width:7rem; height:7rem; border:2px solid rgba(248,113,113,.35); transform: rotate(45deg); }
.particle.small { width:2.5rem; height:2.5rem; }
.particle.hex { border:1px solid rgba(248,113,113,.35); clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }

/****************** Hero ******************/
.min-vh-75 { min-height: 75vh; }
.text-gradient-dark { background: linear-gradient(90deg, #374151, #1f2937, #111827); -webkit-background-clip: text; background-clip: text; color: transparent; }
.underline-accent::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:4px; border-radius:4px; background: linear-gradient(90deg, #9ca3af, #4b5563); }

/* hero bg */
.hero-bg.base { position:absolute; inset:0; background: linear-gradient(135deg, #f9fafb, #ffffff, rgba(191,219,254,.3)); z-index:0; }
.hero-bg.tint-red { position:absolute; inset:0; background: linear-gradient(45deg, rgba(254,202,202,.2), transparent); z-index:0; }
.hero-grid { position:absolute; inset:0; opacity:.06; background-image:
  linear-gradient(rgba(107,114,128, .8) 1px, transparent 1px),
  linear-gradient(90deg, rgba(156,163,175, .6) 1px, transparent 1px);
  background-size: 60px 60px; z-index:0; transition: opacity .3s ease; }
.hero-particles .p { position:absolute; border-radius:50%; box-shadow: 0 10px 20px rgba(0,0,0,.08); }
.hero-particles .p.dot { width:8px; height:8px; }
.hero-particles .p.blue { background: rgba(96,165,250,.6); }
.hero-particles .p.red { background: rgba(239,68,68,.6); }
.hero-lines { position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.line-pulse { animation: linePulse 2.4s ease-in-out infinite; }
@keyframes linePulse { 0%,100% { opacity:.6; } 50% { opacity:1; } }

/* Cards */
.glass { backdrop-filter: blur(10px); background: rgba(255,255,255,.8); }
.shadow-soft { box-shadow: 0 .75rem 2rem rgba(0,0,0,.08); }
.hover-raise { transition: transform .25s ease, box-shadow .25s ease; position:relative; overflow:hidden; }
.hover-raise:hover { transform: translateY(-3px); box-shadow: 0 1rem 2.25rem rgba(0,0,0,.12); }
.icon-box { width:56px; height:56px; background: linear-gradient(135deg,#f3f4f6,#e5e7eb); display:flex; align-items:center; justify-content:center; box-shadow: 0 .5rem 1rem rgba(0,0,0,.06); }
.icon-box.sm { width:48px; height:48px; }
.feature-chip { display:flex; align-items:center; gap:.5rem; padding:.5rem .75rem; background:#f9fafb; border-radius:.75rem; border:1px solid #e5e7eb; color:#374151; font-weight:500; }
.feature-chip .bullet { width:6px; height:6px; border-radius:50%; background:#374151; display:inline-block; }
.card-shine { position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: translateX(-100%); transition: transform 1s ease; }
.hover-raise:hover .card-shine { transform: translateX(100%); }
.btn .btn-shine { position:absolute; inset:0; transform: translateX(-120%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); transition: transform 1s ease; }
.btn:hover .btn-shine { transform: translateX(120%); }
.shadow-hover { box-shadow: 0 .75rem 2rem rgba(107,114,128,.2); }

/* Steps */
.step .step-box { width:40px; height:40px; border-radius:.75rem; background:#111827; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; box-shadow: 0 .5rem 1rem rgba(0,0,0,.12); transition: transform .2s ease; }
.step:hover .step-box { transform: scale(1.06); }
.connector { height:2px; background: linear-gradient(90deg, #d1d5db, #9ca3af); border-radius: 2px; }

/* Mouse Trail */
.mouse-trail { position:absolute; inset:0; pointer-events:none; z-index: 2; }
.trail-dot { position:absolute; width:6px; height:6px; border-radius:999px; background: rgba(239,68,68,.7); box-shadow: 0 0 12px rgba(239,68,68,.5); opacity:1; transition: opacity .8s ease, transform .8s ease; }
.trail-dot.fade { opacity:.0; transform: scale(.5); }

/* Utilities */
.fw-black { font-weight: 900; }

/* Spacing tweak so main content not hidden under fixed header */
main { padding-top: var(--header-height); }

/****************** Problem Section ******************/
.problem-section { background: linear-gradient(135deg, #fff, rgba(249,250,251,.7), rgba(239,246,255,.5)); }
.problem-grid { position:absolute; inset:0; opacity:.03; background-image:
  linear-gradient(90deg, rgba(107,114,128,.6) 1px, transparent 1px),
  linear-gradient(rgba(107,114,128,.6) 1px, transparent 1px);
  background-size: 50px 50px;
}
.problem-shapes .shape { position:absolute; }
.problem-shapes .red-rect { width:96px; height:96px; background: linear-gradient(135deg, rgba(254,202,202,.4), rgba(254,202,202,.3)); border-radius: 1rem; transform: rotate(12deg); filter: drop-shadow(0 10px 30px rgba(239,68,68,.15)); animation: float 7s ease-in-out infinite; opacity:.6; }
.problem-shapes .blue-circle { width:128px; height:128px; border-radius:50%; border:2px solid rgba(191,219,254,.6); animation: breathe 7s ease-in-out infinite; opacity:.5; }
.problem-shapes .cyan-circle { width:80px; height:80px; border-radius:50%; background: linear-gradient(135deg, rgba(207,250,254,.3), rgba(165,243,252,.4)); animation: float 6s ease-in-out infinite; opacity:.5; }
.problem-shapes .code-bar { height:16px; border-radius:8px; animation: drift 8s linear infinite; }
.problem-shapes .code-bar.red { width:64px; background: rgba(254,202,202,.5); }
.problem-shapes .code-bar.blue { width:48px; background: rgba(191,219,254,.5); }
.problem-shapes .cyan-diamond { width:48px; height:48px; border:1px solid rgba(165,243,252,.4); transform: rotate(45deg); animation: breathe 6s ease-in-out infinite; opacity:.5; }
@keyframes drift { 0% { transform: translateX(0) rotate(0); } 50% { transform: translateX(10px) rotate(2deg);} 100% { transform: translateX(0) rotate(0);} }
.wave-overlay { position:absolute; inset:0; pointer-events:none; }
.wave-red { background: linear-gradient(90deg, transparent, rgba(254,226,226,.35), transparent); }
.wave-blue { background: linear-gradient(270deg, transparent, rgba(219,234,254,.25), transparent); }
.animate-wave-motion { animation: wave 6s ease-in-out infinite; }
.animate-wave-motion-reverse { animation: wave 7s ease-in-out infinite reverse; }
@keyframes wave { 0%,100% { opacity:.6; } 50% { opacity:1; } }
.icon-circle { width:32px; height:32px; border-radius:999px; background:#f3f4f6; display:inline-flex; align-items:center; justify-content:center; }


/* Stats */
.stat-card { position:relative; background: rgba(255,255,255,.95); backdrop-filter: blur(8px); border:1px solid #e5e7eb; border-radius:.75rem; padding:1rem; text-align:center; box-shadow: 0 .5rem 1rem rgba(0,0,0,.06); transition: transform .2s ease, box-shadow .2s ease; cursor:pointer; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.08); }
.stat-card .stat-icon { width:32px; height:32px; border-radius:.5rem; margin-inline:auto .5rem; margin:0 auto .5rem; display:flex; align-items:center; justify-content:center; background:#111827; color:#fff; box-shadow: 0 .25rem .5rem rgba(0,0,0,.15); }
.stat-card .stat-number { font-weight:700; color:#111827; font-size:1.25rem; margin-bottom:.25rem; }
.stat-card .stat-label { font-size:.75rem; color:#6b7280; font-weight:600; }
.stat-card .stat-desc { font-size:.7rem; color:#6b7280; border-top:1px solid #e5e7eb; margin-top:.5rem; padding-top:.5rem; max-height:0; opacity:0; overflow:hidden; transition: max-height .25s ease, opacity .25s ease, margin-top .25s ease, padding-top .25s ease; }
.stat-card.active .stat-desc { max-height:60px; opacity:1; }

/* Features */
.feature-card { background:#fff; border:1px solid #e5e7eb; border-radius:1rem; padding:1.25rem; height:100%; transition: box-shadow .2s ease, transform .2s ease; }
.feature-card:hover { transform: translateY(-2px); box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.08); }
.feature-header { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.75rem; }
.feature-icon { width:40px; height:40px; border-radius:.5rem; background:#f3f4f6; border:1px solid #e5e7eb; display:flex; align-items:center; justify-content:center; color:#374151; }
.feature-title h3 { margin:0; font-size:1.125rem; font-weight:600; color:#111827; }
.title-accent { display:flex; align-items:center; gap:.25rem; }
.title-accent span { display:inline-block; width:24px; height:3px; background:#111827; border-radius:999px; transition: width .2s ease; }
.title-accent i { display:inline-block; width:6px; height:3px; background:#9ca3af; border-radius:999px; }
.feature-card:hover .title-accent span { width:32px; }
.feature-toggle { width:32px; height:32px; border-radius:999px; border:1px solid #e5e7eb; background:#fff; display:flex; align-items:center; justify-content:center; color:#6b7280; transition: all .2s ease; }
.feature-toggle:hover { background:#f9fafb; color:#111827; }
.feature-desc { color:#6b7280; font-size:.95rem; margin-bottom:.75rem; }
.feature-details { border-top:1px solid #f3f4f6; padding-top:.75rem; max-height:0; opacity:0; overflow:hidden; transition: max-height .3s ease, opacity .3s ease; }
.feature-details h4 { font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:#111827; margin-bottom:.5rem; }
.feature-details ul { list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.feature-details li { font-size:.85rem; color:#374151; display:flex; align-items:flex-start; gap:.5rem; background:#f9fafb; border:1px solid #f3f4f6; padding:.5rem .6rem; border-radius:.5rem; }
.feature-details .check { width:16px; height:16px; background:#111827; border-radius:999px; display:inline-block; position:relative; flex-shrink:0; }
.feature-details .check::after { content:""; position:absolute; top:4px; left:4px; width:8px; height:8px; border-radius:999px; background:white; }
.feature-card.expanded .feature-details { max-height: 480px; opacity:1; }

/****************** Services ******************/
.services-section { background: linear-gradient(180deg, rgba(191,219,254,.15), #fff); }
.services-bg-base { position:absolute; inset:0; background: linear-gradient(135deg, #f9fafb, #ffffff 50%, rgba(243,244,246,.6)); }
.services-bg-accent { position:absolute; inset:0; background: linear-gradient(30deg, rgba(96,165,250,.12), transparent 60%); }
.services-grid { position:absolute; inset:0; opacity:.03; background-image:
  linear-gradient(rgba(107,114,128,.6) 1px, transparent 1px),
  linear-gradient(90deg, rgba(107,114,128,.6) 1px, transparent 1px);
  background-size: 50px 50px; }

/* Featured card */
.featured-service { background: linear-gradient(135deg, #f9fafb, #ffffff); border:1px solid #e5e7eb; box-shadow: 0 .75rem 2rem rgba(0,0,0,.06); }
.featured-decor { position:absolute; top:1rem; right:1rem; width:8rem; height:8rem; background: rgba(243,244,246,.6); filter: blur(24px); border-radius: 999px; }
.icon-xxl { width:64px; height:64px; }
.badge.border { border:1px solid #e5e7eb; }
.bar-accent { width: 80px; height:6px; background:#111827; border-radius:6px; transition: width .4s ease; }
.featured-service:hover .bar-accent { width:120px; }
.chip { display:inline-flex; align-items:center; gap:.25rem; background:#fff; border:1px solid #e5e7eb; padding:.5rem .75rem; border-radius:.75rem; box-shadow: 0 .25rem .75rem rgba(0,0,0,.06); font-weight:500; color:#374151; }
.stat-box { background:#fff; border:1px solid #e5e7eb; border-radius:1rem; padding:1rem; box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.06); }

/* Service cards */
.service-card { position:relative; background:#fff; border:1px solid #e5e7eb; border-radius:1rem; padding:1.25rem; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; overflow:hidden; }
.service-card:hover { transform: translateY(-6px); border-color:#d1d5db; box-shadow: 0 1rem 2rem rgba(0,0,0,.08); }
.service-icon { width:56px; height:56px; display:flex; align-items:center; justify-content:center; color:#fff; background:#111827; border-radius:.75rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.12); margin-bottom:.75rem; }
.service-title { font-size:1.1rem; font-weight:700; color:#111827; margin-bottom:.25rem; }
.service-desc { color:#6b7280; font-size:.95rem; margin-bottom:.75rem; }
.tag { background:#f3f4f6; color:#374151; padding:.25rem .6rem; border-radius:999px; font-weight:600; font-size:.8rem; border:1px solid #e5e7eb; }
.mini-box { background:#f9fafb; border:1px solid #e5e7eb; border-radius:.5rem; padding:.5rem; }

/* Lines */
.services-lines .line-pulse { animation: linePulse 2.4s ease-in-out infinite; }

/* CTA */
.services-cta { background: linear-gradient(90deg, #111827, #1f2937, #111827); box-shadow: 0 1rem 2.5rem rgba(0,0,0,.18); }
.cta-overlay-1 { position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); opacity:.6; }
.cta-overlay-2 { position:absolute; inset:0; background: linear-gradient(0deg, transparent, rgba(255,255,255,.06), transparent); opacity:.4; }
.services-cta .cta-particles span { position:absolute; width:4px; height:4px; border-radius:999px; background: rgba(255,255,255,.8); box-shadow: 0 0 8px rgba(255,255,255,.6); opacity:.9; animation: floatParticle var(--dur, 4s) ease-in-out infinite; }
@keyframes floatParticle { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Generic reveal */
.pre-reveal { opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; }
.revealed { opacity: 1 !important; transform: translateY(0) !important; }

/****************** Features ******************/
.features-section { background: #fff; }
.features-bg { position:absolute; inset:0; background: linear-gradient(180deg, rgba(191,219,254,.12), rgba(255,255,255,1)); z-index:0; }
.features-floaters .floater { position:absolute; border-radius:999px; filter: blur(24px); opacity:.35; }
.floater-a { top:3rem; right:3rem; width:8rem; height:8rem; background: rgba(191,219,254,.25); }
.floater-b { bottom:3rem; left:3rem; width:10rem; height:10rem; background: rgba(147,197,253,.2); }
.floater-c { top:50%; left:2rem; width:5rem; height:5rem; border:1px solid rgba(147,197,253,.35); background: transparent; }
.animate-soft-float { animation: float 7s ease-in-out infinite; }
.animate-breathing { animation: breathe 8s ease-in-out infinite; }
.animate-pulse-grid { animation: wave 6s ease-in-out infinite; }
.dot-pulse { width:8px; height:8px; border-radius:999px; background:#6b7280; display:inline-block; animation: pulse 2s ease-in-out infinite; }

/* Simple feature cards */
.feature-simple-card { position:relative; background:#fff; border:1px solid #e5e7eb; border-radius:1rem; padding:1.25rem; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; overflow:hidden; }
.feature-simple-card:hover { transform: translateY(-6px); border-color:#d1d5db; box-shadow: 0 1rem 2rem rgba(0,0,0,.08); }
.feature-simple-card .icon-square { width:56px; height:56px; display:flex; align-items:center; justify-content:center; background:#111827; color:#fff; border-radius:.75rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.12); margin-bottom:.75rem; }
.pill { display:inline-flex; align-items:center; gap:.25rem; background:#f3f4f6; border:1px solid #e5e7eb; color:#374151; font-weight:600; font-size:.8rem; padding:.25rem .6rem; border-radius:999px; }

/* Technology stack */
.tech-wrap { position:relative; }
.tech-bg { position:absolute; inset:0; background: linear-gradient(180deg, #fff, rgba(243,244,246,.7)); border-radius:1rem; }
.tech-card { position:relative; background:#fff; border:1px solid #e5e7eb; border-radius:1rem; padding:1.25rem; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; overflow:hidden; }
.tech-card:hover { transform: translateY(-6px); border-color:#d1d5db; box-shadow: 0 1rem 2rem rgba(0,0,0,.08); }

/* Features CTA */
.features-cta { background: linear-gradient(90deg, #111827, #1f2937, #111827); box-shadow: 0 1rem 2.5rem rgba(0,0,0,.18); }
.features-cta .cta-particles span { position:absolute; width:4px; height:4px; border-radius:999px; background: rgba(255,255,255,.8); box-shadow: 0 0 8px rgba(255,255,255,.6); opacity:.9; animation: floatParticle var(--dur, 4s) ease-in-out infinite; }

/****************** E-Commerce / Process ******************/
.ecom-section { background: linear-gradient(180deg, rgba(17,24,39,.02), #fff); }
.ecom-bg { position:absolute; inset:0; background: linear-gradient(135deg, #ffffff, rgba(243,244,246,.7)); z-index:0; }
.ecom-noise { position:absolute; inset:0; opacity:.03; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:128px 128px; z-index:0; }
.ecom-glows { position:absolute; inset:0; pointer-events:none; z-index:0; }
.ecom-glows .glow { position:absolute; border-radius:999px; filter: blur(48px); opacity:.35; }
.ecom-glows .glow-right { top:10%; right:-2rem; width:14rem; height:14rem; background: rgba(252,165,165,.45); }
.ecom-glows .glow-left { bottom:12%; left:-2rem; width:16rem; height:16rem; background: rgba(191,219,254,.4); }
.ecom-glows .glow-circle { top:50%; left:40%; width:6rem; height:6rem; border:1px solid rgba(156,163,175,.35); background: transparent; opacity:.5; }

/* Header underline in section title */
.header-underline { content:""; position:absolute; left:0; right:0; bottom:-6px; height:6px; border-radius:6px; background: linear-gradient(90deg, #9ca3af, #4b5563); }

/* Steps */
.steps-wrap { position:relative; }
.step-row .step-card { position:relative; background:#fff; border:1px solid #e5e7eb; border-radius:1rem; padding:1.25rem; box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.06); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.step-row .step-card:hover { transform: translateY(-4px); border-color:#d1d5db; box-shadow: 0 1rem 2rem rgba(0,0,0,.08); }
.step-row .step-icon { width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:#111827; color:#fff; border-radius:.75rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.12); }
.step-row .step-num { width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:#111827; color:#fff; font-weight:700; box-shadow: 0 .5rem 1rem rgba(0,0,0,.12); margin-bottom:.5rem; }
.dot-small { width:8px; height:8px; background:#111827; display:inline-block; border-radius:999px; }

/* CTA */
.ecom-cta { background: linear-gradient(90deg, #111827, #1f2937, #111827); box-shadow: 0 1rem 2.5rem rgba(0,0,0,.18); }
.ecom-cta .cta-particles span { position:absolute; width:4px; height:4px; border-radius:999px; background: rgba(255,255,255,.85); box-shadow: 0 0 8px rgba(255,255,255,.6); opacity:.95; animation: floatParticle var(--dur, 4s) ease-in-out infinite; }
.cta-icon { width:48px; height:48px; border-radius:.75rem; background:#ffffff; color:#111827; display:flex; align-items:center; justify-content:center; box-shadow: 0 .5rem 1rem rgba(0,0,0,.12); }

/****************** Industries ******************/
.industries-section { background: linear-gradient(180deg, rgba(243,244,246,.5), #fff); }
.industries-bg { position:absolute; inset:0; background: linear-gradient(135deg, #ffffff, rgba(249,250,251,.7)); z-index:0; }
.industries-grid { position:absolute; inset:0; opacity:.04; background-image:
  linear-gradient(rgba(107,114,128,.7) 1px, transparent 1px),
  linear-gradient(90deg, rgba(156,163,175,.5) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px; z-index:0;
}
.industry-card { position:relative; background:#fff; border:1px solid #e5e7eb; border-radius:1rem; padding:1.25rem; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; overflow:hidden; }
.industry-card:hover { transform: translateY(-6px); border-color:#d1d5db; box-shadow: 0 1rem 2rem rgba(0,0,0,.08); }
.industry-card .accent-bar { position:absolute; top:0; left:0; height:4px; right:0; }
.industry-card .icon-square { width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:#111827; color:#fff; border-radius:.75rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.12); margin-bottom:.75rem; }


/* Reveal base for process */
#process .pre-reveal { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
#process .revealed { opacity: 1 !important; transform: translateY(0) !important; }


/****************** FAQ ******************/
.faq-section { background: linear-gradient(180deg, rgba(243,244,246,.5), #fff); }
.faq-bg { position:absolute; inset:0; background: linear-gradient(135deg, #ffffff, rgba(249,250,251,.7)); z-index:0; }
.faq-grid { position:absolute; inset:0; opacity:.04; background-image:
  linear-gradient(rgba(107,114,128,.6) 1px, transparent 1px),
  linear-gradient(90deg, rgba(156,163,175,.5) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px; z-index:0; }

.faq-item { background:#fff; border:1px solid #e5e7eb; border-radius:1rem; box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.06); overflow:hidden; }
.faq-question { width:100%; display:flex; align-items:center; justify-content:space-between; gap:.75rem; background:#fff; padding:1rem; border:0; text-align:left; color:#111827; font-weight:700; }
.faq-question .faq-toggle { transition: transform .25s ease; color:#6b7280; }
.faq-item.open .faq-question .faq-toggle { transform: rotate(180deg); }
.faq-answer { padding:0 1rem; max-height:0; opacity:0; overflow:hidden; color:#374151; transition: max-height .35s ease, opacity .35s ease, padding-top .2s ease, padding-bottom .2s ease; }
.faq-item.open .faq-answer { padding: .25rem 1rem 1rem; max-height: 320px; opacity:1; }

/* Reveal hooks */
#faq .pre-reveal { opacity:0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; }
#faq .revealed { opacity:1 !important; transform: translateY(0) !important; }

/****************** Comparison ******************/
.comparison-section { background: linear-gradient(180deg, rgba(191,219,254,.12), #fff); }
.comp-bg { position:absolute; inset:0; background: linear-gradient(135deg, #ffffff, rgba(243,244,246,.7)); z-index:0; }
.comp-grid { position:absolute; inset:0; opacity:.04; background-image:
  linear-gradient(rgba(107,114,128,.6) 1px, transparent 1px),
  linear-gradient(90deg, rgba(156,163,175,.5) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px; z-index:0; }

.comp-card { position:relative; background:#fff; border:1px solid #e5e7eb; border-radius:1rem; padding:1.25rem; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.comp-card .icon-square { width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:#111827; color:#fff; border-radius:.75rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.12); margin-bottom:.75rem; }
.comp-card:hover { transform: translateY(-6px); border-color:#d1d5db; box-shadow: 0 1rem 2rem rgba(0,0,0,.08); }

.comp-faq-item { background:#fff; border:1px solid #e5e7eb; border-radius:1rem; padding:.5rem; }
.comp-faq-q { width:100%; text-align:left; background:transparent; border:0; color:#111827; font-weight:700; display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.5rem .75rem; }
.comp-faq-a { max-height:0; opacity:0; overflow:hidden; color:#374151; padding:0 .75rem; transition:max-height .3s ease, opacity .3s ease, padding-top .2s ease, padding-bottom .2s ease; }
.comp-faq-item.open .comp-faq-a { max-height:240px; opacity:1; padding:.25rem .75rem .75rem; }

#comparison .pre-reveal { opacity:0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; }
#comparison .revealed { opacity:1 !important; transform: translateY(0) !important; }

/* CodeIgniter FAQ reveal helpers (reuses .faq-section visuals) */
#codeigniter-faq .pre-reveal { opacity:0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; }
#codeigniter-faq .revealed { opacity:1 !important; transform: translateY(0) !important; }