/* Base Custom Styles (no Tailwind; Bootstrap + custom) */
:root {
  --ci-blue-50: #eff6ff;
  --ci-blue-100: #dbeafe;
  --ci-blue-500: #3b82f6;
  --ci-blue-600: #2563eb;
  --ci-blue-700: #1d4ed8;
  --ci-gray-50: #f9fafb;
  --ci-gray-75: #f3f4f6;
  --ci-gray-100: #f1f5f9;
  --ci-gray-150: #e2e8f0;
  --ci-gray-200: #e5e7eb;
  --ci-gray-300: #d1d5db;
  --ci-gray-400: #9ca3af;
  --ci-gray-500: #6b7280;
  --ci-gray-600: #4b5563;
  --ci-gray-700: #374151;
  --ci-gray-800: #1f2937;
  --ci-gray-900: #111827;
}

html, body { height: 100%; }
body {
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  background: #fff;
  color: var(--ci-gray-800);
  -webkit-font-smoothing: antialiased;
}

/* Icon base */
.ci-icon { display:inline-flex; width:1.1em; height:1.1em; line-height:1; position:relative; top:.05em; }
.ci-icon svg { width:100%; height:100%; stroke:currentColor; }
.ci-icon.stroke-strong svg { stroke-width:2.25; }

.skip-link {
  position: absolute;
  left: -999px;
  top: -999px;
  background: #111827;
  color: #fff;
  padding: .75rem 1.5rem;
  border-radius: 1rem;
  font-weight: 700;
  z-index: 1000;
}
.skip-link:focus {
  left: 2rem;
  top: 2rem;
}

/* Scroll Progress */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--ci-gray-100);
  z-index: 1200;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.scroll-progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg,var(--ci-gray-700),var(--ci-gray-500),var(--ci-gray-700));
  position: relative;
  overflow: hidden;
  transition: width .4s ease;
}
.scroll-progress-bar::after {
  content: "";
  position: absolute; inset:0;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  animation: shimmer 2s infinite;
}
@keyframes shimmer { 0% { transform: translateX(-100%);} 50% { transform: translateX(0);} 100% { transform: translateX(100%);} }

/* Utility helpers */
.text-gradient-blue { background: linear-gradient(90deg,var(--ci-blue-600),var(--ci-blue-500),var(--ci-blue-400)); -webkit-background-clip: text;  }
.shadow-blue { box-shadow: 0 4px 20px -4px rgba(37,99,235,.35); }
.shadow-blue-soft { box-shadow: 0 8px 30px -6px rgba(59,130,246,.25); }

/* Floating animations replicated */
@keyframes float-sophisticated { 0%,100% { transform: translateY(0) rotate(0) scale(1);} 33% { transform: translateY(-12px) rotate(1deg) scale(1.02);} 66% { transform: translateY(-6px) rotate(-.5deg) scale(.98);} }
@keyframes float-blue-glow { 0%,100% { transform: translateY(0) rotate(0) scale(1); filter: drop-shadow(0 0 15px rgba(59,130,246,.1)); } 33% { transform: translateY(-15px) rotate(1deg) scale(1.02); filter: drop-shadow(0 0 25px rgba(59,130,246,.15)); } 66% { transform: translateY(-8px) rotate(-.5deg) scale(.98); filter: drop-shadow(0 0 20px rgba(59,130,246,.12)); } }
.animate-float-sophisticated { animation: float-sophisticated 8s ease-in-out infinite; }
.animate-float-blue-glow { animation: float-blue-glow 10s ease-in-out infinite; }

/* Header styles will be added later */
/* Hero styles will be added during hero conversion */


/* Collapse helper (manual because we use custom button) */
.collapse:not(.show) { display:none; }

/* Hero */
.hero-section { background: radial-gradient(circle at 20% 30%, var(--ci-blue-50) 0%, #ffffff 55%); }
.hero-bg-layer { background: linear-gradient(135deg, #ffffff 0%, rgba(59,130,246,.05) 40%, rgba(243,244,246,.6) 100%); }
.trust-badge { background: rgba(255,255,255,.85); border:1px solid rgba(59,130,246,.35); box-shadow:0 4px 12px -2px rgba(59,130,246,.25); transition: background .3s,border-color .3s, box-shadow .3s; }
.trust-badge:hover { background: rgba(239,246,255,.9); border-color: rgba(59,130,246,.5); box-shadow:0 6px 18px -4px rgba(59,130,246,.35); }
.pulse-dot { width:8px; height:8px; border-radius:50%; background: var(--ci-blue-500); animation: pulse 1.5s infinite; box-shadow:0 0 0 0 rgba(37,99,235,.7); }
@keyframes pulse { 0% { box-shadow:0 0 0 0 rgba(37,99,235,.5);} 70% { box-shadow:0 0 0 8px rgba(37,99,235,0);} 100% { box-shadow:0 0 0 0 rgba(37,99,235,0);} }
.benefit-pill { background: rgba(255,255,255,.65); border:1px solid rgba(203,213,225,.6); transition: background .3s,border-color .3s, transform .3s; }
.benefit-pill:hover { background: var(--ci-blue-50); border-color: var(--ci-blue-100); transform: translateY(-2px); }
.btn-gradient-blue { background: linear-gradient(90deg,var(--ci-blue-600),var(--ci-blue-500)); border:none; }
.btn-gradient-blue:hover { background: linear-gradient(90deg,var(--ci-blue-700),var(--ci-blue-600)); transform: scale(1.05); }
.btn-gradient-blue:active { transform: scale(.97); }
.value-card { border-color: rgba(148,163,184,.3) !important; backdrop-filter: blur(6px); transition: transform .35s, box-shadow .35s, border-color .35s; }
.value-card:hover { transform: translateY(-8px); border-color: rgba(59,130,246,.4) !important; box-shadow:0 12px 36px -10px rgba(59,130,246,.35); }
.value-card .icon-box { width:48px; height:48px; background: linear-gradient(135deg,var(--ci-blue-50),var(--ci-blue-100)); font-size:1.25rem; }

/* Floating shapes */
.floating-shapes .shape { position:absolute; border-radius:50%; filter: blur(30px); opacity:.65; }
.shape-blue-1 { top:25%; left:16%; width:130px; height:130px; background: linear-gradient(135deg,var(--ci-blue-100),var(--ci-blue-50)); }
.shape-gray-1 { bottom:30%; right:20%; width:170px; height:170px; background: linear-gradient(135deg,#eceff3,#f3f4f6); }
.shape-blue-2 { top:50%; left:50%; width:110px; height:110px; background: linear-gradient(135deg,var(--ci-blue-100),var(--ci-blue-50)); }
.shape-gray-2 { top:20%; right:33%; width:120px; height:120px; background: linear-gradient(135deg,#e2e8f0,#f1f5f9); }
.shape-grid-lines::before, .shape-grid-lines::after { content:""; position:absolute; top:0; bottom:0; width:1px; background:linear-gradient(to bottom, transparent, rgba(37,99,235,.25), transparent); }
.shape-grid-lines::before { left:33%; }
.shape-grid-lines::after { right:25%; }
.shape-grid-lines { position:absolute; inset:0; }
.shape-grid-lines span { display:none; }

/* Accessibility */
.nav-mobile-link { display:block; padding:.5rem 0; font-weight:500; }
.nav-mobile-link:hover { color: var(--ci-blue-600) !important; }

/* Utility display adjustments */
@media (min-width:992px) { .display-lg-2 { font-size:4.25rem; } }

/* Who We Are Section */
.who-we-are-section { background: linear-gradient(135deg,#ffffff 0%, var(--ci-gray-50) 65%, #f0f6ff 100%); }
.who-we-are-section .badge-pill { background: linear-gradient(90deg,var(--ci-blue-50),var(--ci-blue-100)); border:1px solid var(--ci-blue-100); border-radius: 999px; box-shadow:0 4px 10px -2px rgba(59,130,246,.25); }
.who-headline .highlight-number { font-weight:700; }
.who-headline .highlight-number .number-bg { position:absolute; inset:0; border-radius:1rem; background: linear-gradient(90deg,var(--ci-blue-200,#bfdbfe),#cbd5e1,#bfdbfe); opacity:.3; transform: rotate(1deg); z-index:-1; }
.stat-tile { border-color: var(--ci-gray-200) !important; transition: border-color .35s, box-shadow .35s, transform .35s; box-shadow:0 4px 10px -4px rgba(0,0,0,.04); }
.stat-tile:hover { border-color: var(--ci-blue-200) !important; transform: translateY(-4px); box-shadow:0 10px 28px -8px rgba(59,130,246,.35); }
.stat-number { font-size:2rem; font-weight:700; color: var(--ci-gray-900); }
.stat-label { font-size:.8rem; font-weight:700; color: var(--ci-gray-800); letter-spacing:.5px; text-transform: uppercase; }
.stat-desc { font-size:.65rem; color: var(--ci-gray-500); }
.trust-box { background: linear-gradient(135deg,#f8fafc,#ffffff 40%, #eef6ff 100%); border-color: var(--ci-gray-200) !important; box-shadow:0 20px 50px -20px rgba(59,130,246,.25); overflow:hidden; }
.trust-box .dot { width:12px; height:12px; background: var(--ci-blue-500); border-radius:50%; box-shadow:0 0 0 4px rgba(59,130,246,.25); }
.trust-box .metric-tile { width:72px; min-height:48px; background: linear-gradient(135deg,var(--ci-blue-100),var(--ci-blue-50)); border:1px solid var(--ci-blue-100); }
.diff-item { border-color: var(--ci-gray-200) !important; transition: background .35s, border-color .35s, box-shadow .35s, transform .35s; }
.diff-item:hover { background: var(--ci-blue-50); border-color: var(--ci-blue-200) !important; transform: translateY(-3px); box-shadow:0 8px 24px -8px rgba(59,130,246,.3); }
.decor-circle { position:absolute; top:-60px; right:-60px; width:180px; height:180px; background: radial-gradient(circle,var(--ci-blue-100),transparent 70%); opacity:.4; border-radius:50%; }
.core-values .value-tile { background: linear-gradient(135deg,#ffffff, #f1f5f9 70%, #eef6ff); border-color: var(--ci-gray-200) !important; transition: transform .5s, border-color .5s, box-shadow .5s; overflow:hidden; }
.core-values .value-tile:hover { transform: translateY(-8px); border-color: var(--ci-blue-300) !important; box-shadow:0 20px 50px -20px rgba(59,130,246,.4); }
.value-index { position:absolute; top:12px; left:12px; width:40px; height:40px; background: linear-gradient(135deg,var(--ci-blue-100),var(--ci-blue-200)); border-radius:1rem; display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; color: var(--ci-blue-700); }
.value-cat { font-weight:700; letter-spacing:.5px; }
.value-cat .cat-dot { width:8px; height:8px; background: var(--ci-blue-400); border-radius:50%; display:inline-block; }
.tile-accent { position:absolute; bottom:0; left:0; width:100%; height:4px; background: linear-gradient(90deg,var(--ci-blue-200),var(--ci-blue-300),var(--ci-blue-200)); opacity:.4; transition: opacity .4s; }
.value-tile:hover .tile-accent { opacity:.9; }
.floating-orbs .orb { position:absolute; border-radius:50%; filter: blur(40px); animation: float-sophisticated 10s ease-in-out infinite; animation-delay: var(--delay,0s); }
.orb-blue { top:25%; left:15%; width:200px; height:200px; background: linear-gradient(135deg,var(--ci-blue-100),var(--ci-blue-50)); }
.orb-gray { bottom:20%; right:18%; width:160px; height:160px; background: linear-gradient(135deg,#e2e8f0,#f8fafc); }

/* Developer Roles */
.developer-roles-section { background: #fff; }
.role-badge { background: var(--ci-blue-50); border:1px solid var(--ci-blue-200); transition: background .3s, border-color .3s, transform .3s; cursor: pointer; }
.role-badge:hover { background: var(--ci-blue-100); border-color: var(--ci-blue-300); transform: translateY(-2px); }
.role-badge .role-icon { font-size:1rem; }
.expertise-underline { color: var(--ci-blue-600); }
.expertise-underline .underline-line { position:absolute; left:0; bottom:-4px; height:4px; width:100%; background: linear-gradient(90deg,var(--ci-blue-300),var(--ci-blue-200)); border-radius: 999px; opacity:.6; }
.role-card { position:relative; border-color: var(--ci-gray-200) !important; transition: transform .45s, border-color .45s, box-shadow .45s, background .45s; overflow:hidden; }
.role-card:hover { transform: translateY(-14px); border-color: var(--ci-blue-300) !important; box-shadow:0 22px 55px -18px rgba(59,130,246,.35); }
.role-card .icon-wrap { width:52px; height:52px; background: var(--ci-gray-100); display:flex; align-items:center; justify-content:center; font-size:1.3rem; transition: background .4s, transform .4s; }
.role-card:hover .icon-wrap { background: var(--ci-blue-100); transform: scale(1.1) rotate(6deg); }
.skills .skill { background: var(--ci-gray-100); padding:4px 8px; border-radius:.65rem; font-size:.65rem; font-weight:500; color: var(--ci-gray-700); transition: background .4s, color .4s, transform .4s; }
.role-card:hover .skills .skill { background: var(--ci-blue-100); color: var(--ci-blue-700); }
.spec-list .spec-item { display:flex; align-items:center; gap:.4rem; font-size:.65rem; color: var(--ci-gray-600); }
.spec-list .spec-item .dot { width:5px; height:5px; background: var(--ci-gray-400); border-radius:50%; display:inline-block; transition: background .4s; }
.role-card:hover .spec-list .spec-item { color: var(--ci-blue-600); }
.role-card:hover .spec-list .spec-item .dot { background: var(--ci-blue-400); }
.role-card .info { transition: border-color .45s; }
.role-card:hover .info { border-color: var(--ci-blue-200) !important; }
.hire-btn { opacity:0; transform: translateY(8px); transition: opacity .45s, transform .45s, box-shadow .4s; font-weight:700; }
.role-card:hover .hire-btn { opacity:1; transform: translateY(0); box-shadow:0 8px 24px -8px rgba(59,130,246,.4); }
.pulse-indicator { position:absolute; top:12px; right:12px; width:10px; height:10px; background: var(--ci-blue-500); border-radius:50%; opacity:0; animation: pulse 1.8s infinite; }
.role-card:hover .pulse-indicator { opacity:1; }
.custom-role-cta { background: linear-gradient(135deg,#ffffff,#f8fafc); border-color: var(--ci-gray-200) !important; transition: transform .5s, border-color .5s, box-shadow .5s, background .5s; }
.custom-role-cta:hover { transform: translateY(-10px); border-color: var(--ci-blue-300) !important; background: linear-gradient(135deg,#eff6ff,#ffffff); box-shadow:0 22px 55px -18px rgba(59,130,246,.4); }
.more-note { opacity:.8; }

/* Engagement Models */
.engagement-section { background: linear-gradient(180deg,#ffffff 0%, var(--ci-gray-50) 70%, #f0f8ff 100%); }
.engagement-bg { background: radial-gradient(circle at 20% 30%, rgba(219,234,254,.6) 0%, rgba(255,255,255,0) 55%), radial-gradient(circle at 80% 70%, rgba(219,234,254,.5) 0%, rgba(255,255,255,0) 60%); opacity:.55; }
.geometric-accent .geo { position:absolute; filter: blur(1px); opacity:.35; }
.geo-hex { top:120px; left:6%; width:110px; height:110px; background: conic-gradient(from 0deg, var(--ci-blue-100), var(--ci-blue-50), var(--ci-blue-100)); clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%); }
.geo-tri { top:25%; right:12%; width:90px; height:90px; background: linear-gradient(135deg,var(--ci-blue-50),var(--ci-blue-100)); clip-path: polygon(50% 0%,0% 100%,100% 100%); }
.geo-diamond { bottom:22%; left:32%; width:80px; height:80px; background: linear-gradient(135deg,var(--ci-blue-100),var(--ci-blue-50)); transform: rotate(45deg); border-radius:12px; }
.model-card { border-color: var(--ci-gray-200) !important; transition: transform .55s, border-color .55s, box-shadow .55s, background .55s; overflow:hidden; }
.model-card:hover { transform: translateY(-18px); border-color: var(--ci-blue-300) !important; box-shadow:0 28px 70px -26px rgba(59,130,246,.45); }
.model-card .model-icon { width:86px; height:86px; background: linear-gradient(135deg,var(--ci-blue-50),var(--ci-blue-100)); border:2px solid var(--ci-blue-100); border-radius:26px; font-size:2rem; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px -6px rgba(59,130,246,.35); transition: transform .6s, background .6s; }
.model-card:hover .model-icon { transform: scale(1.1) rotate(6deg); background: linear-gradient(135deg,var(--ci-blue-100),var(--ci-blue-200)); }
.mini-box { background: linear-gradient(135deg,#f8fafc,#ffffff); border:1px solid var(--ci-gray-200); transition: background .4s, border-color .4s; }
.model-card:hover .mini-box { background: linear-gradient(135deg,var(--ci-blue-50),var(--ci-blue-100)); border-color: var(--ci-blue-200); }
.feature-list li { position:relative; padding-left:1.1rem; margin-bottom:.55rem; line-height:1.3rem; }
.feature-list li::before { content:""; position:absolute; top:.45rem; left:.3rem; width:6px; height:6px; background: var(--ci-blue-400); border-radius:50%; opacity:.75; transition: transform .4s; }
.model-card:hover .feature-list li::before { transform: scale(1.3); }
.hover-indicator { position:absolute; top:14px; right:14px; width:10px; height:10px; background: var(--ci-blue-500); border-radius:50%; opacity:0; animation: pulse 2s infinite; }
.model-card:hover .hover-indicator { opacity:1; }
.engagement-cta { background: linear-gradient(135deg,#ffffff,#f1f5f9); border-color: var(--ci-gray-200) !important; transition: transform .6s, border-color .6s, box-shadow .6s, background .6s; }
.engagement-cta:hover { transform: translateY(-14px); border-color: var(--ci-blue-300) !important; background: linear-gradient(135deg,#eff6ff,#ffffff); box-shadow:0 24px 70px -30px rgba(59,130,246,.45); }

/* Vetting Process */
.vetting-section { background: linear-gradient(180deg,#ffffff,var(--ci-gray-50)); }
.vetting-badge { background: var(--ci-gray-100); border:1px solid var(--ci-gray-200); box-shadow:0 4px 10px -4px rgba(0,0,0,.05); }
.vet-card { border-color: var(--ci-gray-200) !important; transition: transform .55s, border-color .55s, box-shadow .55s, background .55s; overflow:hidden; position:relative; }
.vet-card::before { content:""; position:absolute; top:-40px; right:-40px; width:140px; height:140px; background: radial-gradient(circle,var(--ci-gray-300),transparent 65%); opacity:.07; border-radius:50%; }
.vet-card:hover { transform: translateY(-12px); border-color: var(--ci-gray-300) !important; box-shadow:0 24px 60px -28px rgba(0,0,0,.15); }
.step-num { width:48px; height:48px; background: linear-gradient(135deg,var(--ci-gray-800),var(--ci-gray-900)); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 14px -6px rgba(0,0,0,.4); font-size:1rem; }
.meta-pills .pill { background: var(--ci-gray-100); border:1px solid var(--ci-gray-200); padding:4px 10px; border-radius:999px; font-weight:500; transition: background .4s, border-color .4s, color .4s; }
.vet-card:hover .meta-pills .pill { background: var(--ci-gray-150); border-color: var(--ci-gray-300); }
.assess-list li { position:relative; padding-left:1rem; margin-bottom:.5rem; }
.assess-list li::before { content:""; position:absolute; top:.55rem; left:.15rem; width:6px; height:6px; background: var(--ci-gray-500); border-radius:50%; transition: background .4s, transform .4s; }
.vet-card:hover .assess-list li::before { background: var(--ci-gray-700); transform: scale(1.2); }
.progress-dots { display:flex; gap:.4rem; }
.progress-dots .dot { width:10px; height:10px; border-radius:50%; background: var(--ci-gray-200); transition: background .4s, transform .4s, box-shadow .4s; }
.progress-dots .dot.active { background: var(--ci-gray-900); transform: scale(1.2); box-shadow:0 0 0 4px rgba(0,0,0,.06); }
.vetting-bg { background: repeating-linear-gradient(45deg, rgba(0,0,0,.04) 0 10px, transparent 10px 20px); opacity:.12; }

/* =============================
  Benefits Section (Industries)
  ============================= */
.benefits-section { background: linear-gradient(180deg,#ffffff 0%, var(--ci-gray-50) 100%); }
.benefits-bg::before, .benefits-bg::after { content:""; position:absolute; width:600px; height:600px; border-radius:50%; filter: blur(90px); opacity:.35; background: radial-gradient(circle at 30% 30%, var(--ci-blue-100), transparent 70%); top:-150px; left:-150px; animation: float-sophisticated 18s linear infinite; }
.benefits-bg::after { top:auto; bottom:-160px; left:auto; right:-120px; background: radial-gradient(circle at 70% 70%, var(--ci-blue-200), transparent 70%); animation-duration:22s; }
.industries-block { background: linear-gradient(145deg,#ffffff,var(--ci-gray-50)); position:relative; overflow:hidden; }
.industries-block .industries-bg::before, .industries-block .industries-bg::after { content:""; position:absolute; inset:0; background: repeating-linear-gradient(60deg, rgba(0,0,0,0.025) 0 10px, transparent 10px 20px); opacity:.4; }
.industries-block .industries-bg::after { background: radial-gradient(circle at 80% 20%, rgba(59,130,246,.12), transparent 60%); mix-blend-mode: multiply; }
.industry-tile { background: rgba(255,255,255,.85); backdrop-filter: blur(6px); transition: all .45s ease; box-shadow:0 4px 14px -8px rgba(0,0,0,.08); }
.industry-tile:hover { transform: translateY(-6px); box-shadow:0 10px 30px -10px rgba(59,130,246,.35); }
.industry-tile .tile-accent-line { position:absolute; top:0; left:0; height:3px; width:100%; background: linear-gradient(90deg,var(--ci-blue-500), var(--ci-blue-300)); opacity:.85; transform-origin:left; transform:scaleX(.25); transition:transform .6s cubic-bezier(.65,.045,.36,1); border-top-left-radius:inherit; border-top-right-radius:inherit; }
.industry-tile:hover .tile-accent-line { transform:scaleX(1); }
.mini-dot { width:10px; height:10px; border-radius:50%; background: linear-gradient(45deg,var(--ci-blue-500), var(--ci-blue-300)); box-shadow:0 0 0 3px rgba(59,130,246,.18); display:inline-block; }
.xsmall { font-size:.65rem; letter-spacing:.5px; text-transform:uppercase; font-weight:600; }

/* Benefits Extended Elements */
.benefit-card { border-color: var(--ci-gray-200) !important; transition: transform .55s, border-color .55s, box-shadow .55s, background .55s; overflow:hidden; background: linear-gradient(135deg,#ffffff,#f8fafc); position:relative; }
.benefit-card::after { content:""; position:absolute; top:-40px; right:-40px; width:140px; height:140px; background: radial-gradient(circle,var(--ci-blue-100),transparent 65%); opacity:.08; border-radius:50%; }
.benefit-card:hover { transform: translateY(-12px); border-color: var(--ci-blue-300) !important; box-shadow:0 24px 60px -28px rgba(59,130,246,.35); }
.benefit-icon { width:52px; height:52px; background: linear-gradient(135deg,var(--ci-blue-50),var(--ci-blue-100)); display:flex; align-items:center; justify-content:center; font-size:1.35rem; box-shadow:0 6px 16px -6px rgba(59,130,246,.35); }
.benefit-details li { position:relative; padding-left:1rem; margin-bottom:.4rem; line-height:1.15rem; }
.benefit-details li::before { content:""; position:absolute; top:.45rem; left:.3rem; width:6px; height:6px; background: var(--ci-blue-400); border-radius:50%; }
.benefit-card .ribbon { position:absolute; top:12px; left:-8px; background: linear-gradient(90deg,var(--ci-blue-600),var(--ci-blue-500)); color:#fff; padding:.35rem .75rem; border-top-right-radius:6px; border-bottom-right-radius:6px; box-shadow:0 4px 10px -4px rgba(0,0,0,.2); letter-spacing:.5px; }

.metric-card { border-color: var(--ci-gray-200) !important; transition: transform .55s, border-color .55s, box-shadow .55s, background .55s; overflow:hidden; }
.metric-card:hover { transform: translateY(-10px); border-color: var(--ci-blue-300) !important; box-shadow:0 22px 55px -20px rgba(59,130,246,.4); }
.metric-value { background: linear-gradient(90deg,var(--ci-blue-600),var(--ci-blue-400)); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:-1px; }
.metric-icon { width:54px; height:54px; background: linear-gradient(135deg,var(--ci-blue-50),var(--ci-blue-100)); border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; box-shadow:0 4px 14px -6px rgba(59,130,246,.35); }

.compare-card { border-color: var(--ci-gray-200) !important; transition: transform .55s, border-color .55s, box-shadow .55s, background .55s; overflow:hidden; }
.compare-card:hover { transform: translateY(-12px); border-color: var(--ci-blue-300) !important; box-shadow:0 24px 60px -28px rgba(59,130,246,.35); }
.compare-icon { width:50px; height:50px; background: linear-gradient(135deg,var(--ci-blue-50),var(--ci-blue-100)); display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.advantage-tag { display:inline-block; background: linear-gradient(90deg,var(--ci-blue-600),var(--ci-blue-500)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* FAQ Section */
.faq-section { background: linear-gradient(180deg,#ffffff 0%, var(--ci-gray-50) 90%); }
.faq-underline { position:absolute; left:0; bottom:-6px; width:100%; height:10px; background: linear-gradient(90deg,var(--ci-blue-100),var(--ci-blue-200),var(--ci-blue-100)); border-radius:999px; opacity:.6; transform: rotate(-1deg); }
.qa-tile { border-color: var(--ci-gray-200) !important; transition: transform .5s, border-color .5s, box-shadow .5s, background .5s; }
.qa-tile:hover { transform: translateY(-10px); border-color: var(--ci-blue-300) !important; box-shadow:0 24px 60px -26px rgba(59,130,246,.35); }
.qa-icon { width:54px; height:54px; background: linear-gradient(135deg,var(--ci-blue-50),var(--ci-blue-100)); display:flex; align-items:center; justify-content:center; font-size:1.4rem; border-radius:20px; box-shadow:0 8px 22px -10px rgba(59,130,246,.4); }
.faq-item { background:#fff; transition: border-color .5s, box-shadow .5s, transform .5s; border-color: var(--ci-gray-200) !important; }
.faq-item.open { border-color: var(--ci-blue-300) !important; box-shadow:0 26px 70px -30px rgba(59,130,246,.45); }
.faq-question { font-weight:600; letter-spacing:.25px; }
.faq-q-icon { width:50px; height:50px; background: var(--ci-gray-100); display:flex; align-items:center; justify-content:center; font-size:1.25rem; transition: background .5s, transform .5s; }
.faq-item.open .faq-q-icon { background: var(--ci-blue-600); color:#fff; transform: scale(1.1) rotate(6deg); }
.faq-chevron { width:42px; height:42px; background: var(--ci-gray-100); display:flex; align-items:center; justify-content:center; border-radius:50%; font-size:.9rem; transition: transform .5s, background .5s; }
.faq-item.open .faq-chevron { transform: rotate(180deg); background: var(--ci-blue-100); }
.faq-answer-wrapper { transition: height .55s ease, opacity .55s ease; }
.faq-answer { animation: fadeIn .6s ease; }
@keyframes fadeIn { from { opacity:0; transform: translateY(6px);} to { opacity:1; transform: translateY(0);} }
.faq-details { background: linear-gradient(135deg,#f8fafc,#ffffff); border-color: var(--ci-gray-200) !important; }
.details-list li { position:relative; padding-left:1rem; margin-bottom:.4rem; }
.details-list li::before { content:""; position:absolute; top:.55rem; left:.3rem; width:6px; height:6px; background: var(--ci-blue-400); border-radius:50%; }



/* Loading Overlay */
.loading-overlay { position:fixed; inset:0; background: linear-gradient(135deg,#ffffff,#f1f5f9 60%,#eef6ff); z-index:2000; display:flex; align-items:center; justify-content:center; padding:2rem; transition: opacity .7s ease, visibility .7s ease; }
.loading-overlay.hidden { opacity:0; visibility:hidden; }
.loading-content { max-width:440px; animation: fadeIn .8s ease; }
.loading-logo { width:72px; height:72px; background: linear-gradient(135deg,var(--ci-gray-900),var(--ci-gray-700)); color:#fff; border-radius:26px; font-size:1.35rem; position:relative; overflow:hidden; box-shadow:0 18px 55px -20px rgba(0,0,0,.4); }
.loading-logo::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg,rgba(255,255,255,.15),rgba(255,255,255,0)); animation: logoShine 2.4s linear infinite; transform: translateX(-100%); }
@keyframes logoShine { 0% { transform: translateX(-100%);} 60% { transform: translateX(60%);} 100% { transform: translateX(160%);} }
.loading-bar { height:14px; background: var(--ci-gray-150); position:relative; box-shadow: inset 0 2px 4px rgba(0,0,0,.08); }
.loading-bar-inner { position:absolute; top:0; left:0; bottom:0; width:0; background: linear-gradient(90deg,var(--ci-blue-600),var(--ci-blue-500),var(--ci-blue-400)); animation: loadBar 3.2s ease-in-out forwards; border-radius:inherit; overflow:hidden; }
@keyframes loadBar { 0% { width:0;} 40% { width:55%;} 70% { width:82%;} 85% { width:92%;} 100% { width:100%;} }
.loading-stats .stat-dot { width:10px; height:10px; background: var(--ci-blue-500); border-radius:50%; box-shadow:0 0 0 0 rgba(37,99,235,.6); animation: pulse 2s infinite; }
.spinner-wrap { position:relative; }
.loading-spinner { width:38px; height:38px; border:4px solid var(--ci-blue-100); border-top-color: var(--ci-blue-600); border-radius:50%; animation: spin 1s linear infinite; box-shadow:0 0 0 4px rgba(59,130,246,.15); }
@keyframes spin { to { transform: rotate(360deg);} }
.no-scroll { overflow:hidden; }