/* Container width similar to container-wide */
.container-wide {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 576px) { .container-wide { max-width: 540px; } }
@media (min-width: 768px) { .container-wide { max-width: 720px; } }
@media (min-width: 992px) { .container-wide { max-width: 960px; } }
@media (min-width: 1200px) { .container-wide { max-width: 1140px; } }
@media (min-width: 1400px) { .container-wide { max-width: 1320px; } }


/* Account for fixed header height */
.pt-nav { padding-top: 4.25rem; }

/* Loading screen */
.loading-screen {
  position: fixed; inset: 0; z-index: 1050; background: #fff;
  transition: opacity 1s ease;
}
body.loaded #loading-screen { opacity: 0; pointer-events: none; }
.spinner-wrap { width: 4rem; height: 4rem; }
.spinner-base { width: 100%; height: 100%; border: 2px solid #e5e7eb; border-radius: 50%; }
.spinner-arc { position: absolute; inset: 0; border: 2px solid transparent; border-top-color: #f87171; border-radius: 50%; animation: spin 1s linear infinite; box-shadow: 0 0 20px rgba(248,113,113,.3); }
.spinner-inner { position: absolute; inset: .5rem; border: 1px solid rgba(248,113,113,.5); border-radius: 50%; animation: pulse 2s ease-in-out infinite; }
.dot { width: .5rem; height: .5rem; border-radius: 50%; background: #fda4a4; display: inline-block; animation: bounce 1s infinite; }
.dot.delay-1 { animation-delay: .1s; }
.dot.delay-2 { animation-delay: .2s; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity:.6; } 50% { opacity:1; } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* Scroll progress */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; background: rgba(229,231,235,.8); z-index: 1040; overflow: hidden; }
.scroll-progress-inner { height: 100%; width: 0%; background: linear-gradient(90deg, #f87171, #ef4444, #dc2626); position: relative; transition: width .3s ease; }
.scroll-progress-inner::before {
  content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  animation: shimmer 1.5s linear infinite;
}
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* Section indicator */
.section-indicator { position: fixed; top: 3.5rem; right: 2rem; z-index: 1040; font-size: .8rem; color: #374151; border: 1px solid rgba(248,113,113,.4); border-radius: .75rem; padding: .5rem .75rem; background: rgba(255,255,255,.95); box-shadow: 0 10px 20px rgba(0,0,0,.08); }
.section-indicator::before { content: ""; position: absolute; top: .6rem; left: .6rem; width: .5rem; height: .5rem; border-radius: 50%; background: #f87171; box-shadow: 0 0 0 6px rgba(248,113,113,.1); }

/* Hero section visuals */
.hero-section { min-height: 100vh; overflow: hidden; }
.advanced-bg { position: absolute; inset: 0; pointer-events: none; }
.bg-gradient-base { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(249,250,251,.8), #fff 50%, rgba(239,246,255,.6)); }
.bg-noise { position: absolute; inset: 0; opacity: .03; 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; mix-blend-mode: overlay; }
.bg-grid { 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; }
.bg-diag { position: absolute; inset: 0; opacity: .03; background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(239,68,68,.3) 2px, rgba(239,68,68,.3) 4px); }
.shape { position: absolute; box-shadow: 0 20px 40px rgba(96,165,250,.2); }
.shape.shape-blue { background: rgba(191,219,254,.5); border: 1px solid rgba(147,197,253,.5); backdrop-filter: blur(2px); }
.shape.shape-red { background: rgba(254,202,202,.4); border: 2px solid rgba(254,202,202,.5); box-shadow: 0 15px 30px rgba(254,202,202,.25); }
.particle { position: absolute; width: .5rem; height: .5rem; border-radius: 50%; background: rgba(96,165,250,.6); box-shadow: 0 6px 14px rgba(96,165,250,.4); animation: float 6s ease-in-out infinite; opacity: .7; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.heading-gradient {
  background: linear-gradient(90deg, #1f2937, #111827);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Smooth hover for nav links */
.navbar .nav-link { transition: color .25s ease, opacity .25s ease; }
.navbar .nav-link.active, .navbar .nav-link:hover { color: #111827; }

/* Navbar scrolled state */
.custom-navbar.scrolled { box-shadow: 0 8px 24px rgba(0,0,0,.06); border-bottom-color: rgba(0,0,0,.12); }

/* CodeIgniter Problem Section */
.problem-section { background: linear-gradient(135deg, #fff, rgba(249,250,251,.5), rgba(239,246,255,.3)); }
.problem-bg { position: absolute; inset: 0; overflow: hidden; }
.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 { position: absolute; inset: 0; }
.problem-shapes .shape-red { position: absolute; background: linear-gradient(135deg, rgba(254,202,202,.4), rgba(254,202,202,.3)); box-shadow: 0 10px 24px rgba(239,68,68,.15); }
.problem-shapes .shape-blue { position: absolute; border: 2px solid rgba(191,219,254,.6); background: rgba(191,219,254,.3); box-shadow: 0 10px 24px rgba(59,130,246,.12); }
.problem-shapes .shape-cyan { position: absolute; background: linear-gradient(135deg, rgba(207,250,254,.35), rgba(165,243,252,.4)); box-shadow: 0 8px 20px rgba(34,211,238,.15); }
.problem-shapes .bar-red { position: absolute; height: .6rem; border-radius: .3rem; background: rgba(254,202,202,.4); box-shadow: 0 6px 12px rgba(239,68,68,.15); }
.problem-shapes .bar-blue { position: absolute; height: .35rem; border-radius: .2rem; background: rgba(191,219,254,.5); box-shadow: 0 6px 12px rgba(59,130,246,.12); }
.problem-shapes .diamond-cyan { position: absolute; border: 1px solid rgba(34,211,238,.4); transform: rotate(45deg); }
.wave { position: absolute; inset: 0; pointer-events: none; }
.wave.wave-a { background: linear-gradient(90deg, transparent, rgba(254,226,226,.35), transparent); animation: waveA 8s ease-in-out infinite; }
.wave.wave-b { background: linear-gradient(270deg, transparent, rgba(219,234,254,.3), transparent); animation: waveB 10s ease-in-out infinite; }
@keyframes waveA { 0%,100% { opacity:.3; transform: translateX(-10%);} 50% { opacity:.5; transform: translateX(10%);} }
@keyframes waveB { 0%,100% { opacity:.25; transform: translateX(10%);} 50% { opacity:.45; transform: translateX(-10%);} }
.icon-dot { width: 2rem; height: 2rem; border-radius: 999px; font-size: 1rem; }

/* Why Choose Us */
.why-section { background: linear-gradient(135deg, rgba(249,250,251,.6), #fff, rgba(243,244,246,.5)); }
.why-bg { position: absolute; inset: 0; }

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

/* Feature cards */
.feature-card { position: relative; background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: .85rem; padding: 1.25rem; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; cursor: pointer; }
.feature-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.06); border-color: rgba(0,0,0,.15); }
.feature-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.feature-icon { width: 2.5rem; height: 2.5rem; background: #f3f4f6; border: 1px solid rgba(0,0,0,.1); border-radius: .5rem; display: flex; align-items: center; justify-content: center; color: #374151; }
.feature-toggle { width: 1.75rem; height: 1.75rem; border-radius: 999px; border: 1px solid rgba(0,0,0,.1); display: flex; align-items: center; justify-content: center; }
.feature-desc { color: #6b7280; font-size: .9rem; margin-bottom: .75rem; }
.feature-accent { display: flex; align-items: center; gap: .3rem; }
.feature-accent span { display: inline-block; width: 1.25rem; height: 2px; background: #111827; border-radius: 999px; transition: width .2s ease; }
.feature-accent i { display: inline-block; width: .25rem; height: 2px; background: #9ca3af; border-radius: 999px; }
.feature-card:hover .feature-accent span { width: 2rem; }
.feature-details { border-top: 1px solid rgba(0,0,0,.06); padding-top: .75rem; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s ease, opacity .35s ease; }
.feature-card.active .feature-details { max-height: 18rem; opacity: 1; }
.feature-details ul { display: grid; gap: .5rem; margin-top: .5rem; }
.feature-details li { display: flex; align-items: flex-start; gap: .5rem; background: #f9fafb; border: 1px solid #f3f4f6; padding: .5rem .6rem; border-radius: .5rem; font-size: .8rem; color: #374151; }
.feature-details .tick { width: 1rem; height: 1rem; background: #111827; border-radius: 999px; margin-top: .15rem; flex: 0 0 1rem; }
.feature-bottom { position: absolute; left: 1.25rem; right: 1.25rem; bottom: .25rem; height: 2px; background: linear-gradient(90deg, #e5e7eb, #9ca3af, #e5e7eb); border-radius: 999px; transform-origin: left; transform: scaleX(0); transition: transform .25s ease; }
.feature-card:hover .feature-bottom { transform: scaleX(.5); }
.feature-card.active .feature-bottom { transform: scaleX(1); }

/* Services */
.services-section .badge-pill { display: inline-block; padding: .25rem .6rem; border-radius: 999px; background: #f3f4f6; color: #374151; font-size: .75rem; font-weight: 600; margin-bottom: .5rem; }
.service-card { position: relative; background: rgba(255,255,255,.9); border: 1px solid rgba(107,114,128,.15); 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(-4px); box-shadow: 0 16px 32px rgba(0,0,0,.06); border-color: rgba(107,114,128,.25); }
.service-icon { width: 3.25rem; height: 3.25rem; border-radius: .85rem; background: #111827; color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: .75rem; font-size: 1.4rem; }
.service-title { font-size: 1.125rem; font-weight: 700; color: #111827; margin-bottom: .25rem; }
.service-text { color: #6b7280; font-size: .95rem; margin-bottom: .5rem; }
.service-list { display: grid; gap: .4rem; margin-top: .25rem; }
.service-list-item { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: #374151; }
.service-list-item i { color: #111827; font-size: 1rem; }
.service-foot { display: flex; justify-content: space-between; gap: .5rem; padding-top: .75rem; border-top: 1px solid rgba(0,0,0,.06); color: #374151; font-weight: 600; font-size: .9rem; }
.service-foot.single-line { justify-content: center; }
.service-stats.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.service-stats.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.stat-box { text-align: center; padding: .75rem; background: #f9fafb; border-radius: .5rem; }
.stat-value { font-weight: 800; color: #111827; }
.stat-label { font-size: .75rem; color: #6b7280; }
.stat-chip { text-align: center; padding: .5rem; background: #f9fafb; border-radius: .5rem; }
.chip-title { font-weight: 600; color: #1f2937; font-size: .8rem; }
.chip-sub { font-size: .7rem; color: #6b7280; }
.service-metrics { display: flex; align-items: center; justify-content: space-between; padding-top: .75rem; border-top: 1px solid rgba(0,0,0,.06); }
.metric-value { font-weight: 800; color: #111827; }
.metric-label { font-size: .75rem; color: #6b7280; }

.services-cta { background: linear-gradient(90deg, #111827, #1f2937, #111827); box-shadow: 0 16px 40px rgba(0,0,0,.25); }
.services-cta .cta-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at top left, rgba(255,255,255,.08), transparent 60%), radial-gradient(ellipse at bottom right, rgba(255,255,255,.06), transparent 60%); }

/* E-commerce / Success Stories */
.ecom-section { background: linear-gradient(135deg, #f9fafb, #fff, rgba(254,226,226,.35), rgba(219,234,254,.3)); }
.ecom-bg { position: absolute; inset: 0; }
.case-card { position: relative; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 1.25rem; padding: 1.5rem; box-shadow: 0 20px 40px rgba(0,0,0,.06); transition: transform .3s ease, box-shadow .3s ease; overflow: hidden; }
.case-card:hover { transform: translateY(-4px); box-shadow: 0 24px 54px rgba(0,0,0,.08); }
.case-card::before { content:""; position: absolute; inset:0; background: radial-gradient(circle at 50% 0%, rgba(55,65,81,.05), transparent 60%); opacity: .6; pointer-events: none; }
.dot { width: .5rem; height: .5rem; border-radius: 50%; background: #6b7280; display: inline-block; }

/* Expertise / Technology Stack */
.expertise-section { background: linear-gradient(180deg, #fff, #f9fafb); }
.expertise-bg { position: absolute; inset: 0; }
.exp-header .bg-opacity-75 { background: rgba(255,255,255,.8) !important; }
.exp-card { position: relative; background: rgba(255,255,255,.9); backdrop-filter: blur(4px); border: 1px solid rgba(0,0,0,.1); border-radius: 1rem; padding: 1.25rem; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.exp-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,.06); border-color: rgba(0,0,0,.2); }
.exp-ico { width: 2.5rem; height: 2.5rem; border-radius: .6rem; display: flex; align-items: center; justify-content: center; background: #f3f4f6; color: #374151; border: 1px solid rgba(0,0,0,.08); }
.exp-bullet { display: flex; align-items: center; gap: .4rem; font-size: .9rem; color: #374151; }
.exp-dot { width: .35rem; height: .35rem; border-radius: 999px; background: #374151; display: inline-block; }
.exp-benefits { background: #f3f4f6; border: 1px solid rgba(0,0,0,.06); }
.exp-benefit-ico { width: 3rem; height: 3rem; border-radius: .75rem; display: flex; align-items: center; justify-content: center; background: #111827; color: #fff; margin: 0 auto .75rem; font-size: 1.25rem; }
.exp-cta { position: relative; text-align: center; background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 1.25rem; padding: 2rem; box-shadow: 0 16px 40px rgba(0,0,0,.08); overflow: hidden; }
.exp-cta .exp-cta-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at top left, rgba(17,24,39,.06), transparent 60%), radial-gradient(ellipse at bottom right, rgba(17,24,39,.05), transparent 60%); }

/* Reveal on scroll utility */
.reveal-on-scroll { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.reveal-on-scroll.revealed { opacity: 1; transform: translateY(0); }

/* Maintenance Solutions */
.solutions-section { background: #fff; }
.solutions-bg { position: absolute; inset: 0; }
.solutions-bg .sol-gradient { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(249,250,251,.6), #fff, rgba(243,244,246,.6)); }
.solutions-bg .sol-grid { position: absolute; inset: 0; opacity: .02; background-image: linear-gradient(rgba(107,114,128,.3) 1px, transparent 1px), linear-gradient(90deg, rgba(107,114,128,.3) 1px, transparent 1px); background-size: 40px 40px; }
.solutions-bg .sol-bubble { position: absolute; border-radius: 999px; filter: blur(10px); opacity: .35; background: #e5e7eb; }
.solutions-bg .sol-bubble.s1 { top: 5rem; right: 5rem; width: 7rem; height: 7rem; animation: softFloat 10s ease-in-out infinite; }
.solutions-bg .sol-bubble.s2 { bottom: 5rem; left: 5rem; width: 9rem; height: 9rem; animation: breathing 12s ease-in-out infinite; opacity: .25; }
.solutions-bg .sol-ring { position: absolute; top: 50%; left: 2rem; width: 5rem; height: 5rem; border-radius: 999px; border: 1px solid rgba(0,0,0,.08); opacity: .3; }
.sol-card { position: relative; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 1rem; padding: 1.25rem; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.sol-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.06); border-color: rgba(0,0,0,.15); }
.sol-icon { width: 4rem; height: 4rem; border-radius: .85rem; background: linear-gradient(135deg, #374151, #1f2937); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1rem; box-shadow: 0 10px 20px rgba(0,0,0,.15); }
.sol-title { font-weight: 600; color: #111827; margin-bottom: .5rem; font-size: 1.2rem; }
.sol-text { color: #6b7280; } 

/* Comparison / Industry Expertise */
.comparison-section { background: linear-gradient(135deg, #f9fafb, #fff, #f3f4f6); }
.industry-card { background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 1rem; padding: 1.25rem; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease; cursor: pointer; }
.industry-card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(0,0,0,.06); border-color: rgba(0,0,0,.2); background: #f9fafb; }
.industry-icon { width: 3.25rem; height: 3.25rem; border-radius: .7rem; display: flex; align-items: center; justify-content: center; background: #f3f4f6; border: 1px solid rgba(0,0,0,.08); color: #374151; font-size: 1.4rem; margin-bottom: .75rem; }
.industry-title { font-weight: 700; color: #1f2937; margin-bottom: .35rem; font-size: 1.2rem; }
.industry-desc { color: #6b7280; font-size: .95rem; margin-bottom: .75rem;}
.industry-focus { margin-bottom: .5rem; }
.focus-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; font-weight: 600; margin-bottom: .35rem; }
.focus-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.focus-tags span { font-size: .75rem; padding: .25rem .5rem; border: 1px solid rgba(0,0,0,.12); border-radius: 999px; background: #f9fafb; color: #374151; }
.industry-compliance { display: flex; align-items: center; gap: .4rem; border-top: 1px solid rgba(0,0,0,.08); padding-top: .5rem; margin-top: .5rem; color: #6b7280; font-size: .8rem; }

/* Advantages */
.advantages-section { background: #fff; }
.advantages-bg { position: absolute; inset: 0; }
.advantages-bg .adv-gradient { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(243,244,246,.6), #fff, rgba(243,244,246,.5)); }
.advantages-bg .adv-texture { position: absolute; inset: 0; opacity: .03; background-image:
  radial-gradient(circle at 30px 30px, #374151 2px, transparent 2px),
  radial-gradient(circle at 80px 80px, #6b7280 1px, transparent 1px);
  background-size: 120px 120px, 160px 160px;
}
.advantages-bg .adv-grid { position: absolute; inset: 0; opacity: .02; background-image:
  linear-gradient(90deg, #374151 1px, transparent 1px),
  linear-gradient(#374151 1px, transparent 1px);
  background-size: 60px 60px;
}
.advantages-bg .adv-bubble { position: absolute; border-radius: 999px; filter: blur(12px); opacity: .45; }
.advantages-bg .adv-b1 { top: 4rem; left: 4rem; width: 6rem; height: 6rem; background: #e5e7eb; animation: softFloat 8s ease-in-out infinite; }
.advantages-bg .adv-b2 { right: 4rem; bottom: 6rem; width: 8rem; height: 8rem; background: #e5e7eb; opacity: .35; animation: breathing 9s ease-in-out infinite; }
.advantages-bg .adv-b3 { top: 50%; left: 25%; width: 5rem; height: 5rem; background: #f3f4f6; opacity: .5; animation: floatLarge 10s ease-in-out infinite; }
@keyframes softFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes breathing { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes floatLarge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.advantage-card { position: relative; background: #fff; border: 1px solid #e5e7eb; border-radius: 1rem; padding: 1.25rem; overflow: hidden; cursor: pointer; transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease; opacity: 0; transform: translateY(16px); }
.advantage-card.revealed { opacity: 1; transform: translateY(0); }
.advantage-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,.08); border-color: #d1d5db; }
.advantage-card .adv-bg.a { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(249,250,251,.3), #fff, rgba(243,244,246,.2)); opacity: 0; transition: opacity .5s ease; }
.advantage-card .adv-bg.b { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(17,24,39,.03), transparent); opacity: 0; transition: opacity .7s ease; }
.advantage-card:hover .adv-bg.a, .advantage-card:hover .adv-bg.b { opacity: 1; }
.advantage-card .adv-shimmer { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s ease; }
.advantage-card .adv-shimmer::before { content: ""; position: absolute; inset: -20%; transform: skewX(-12deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); animation: advShimmer 2s linear infinite; }
@keyframes advShimmer { 0% { left: -60%; right: 160%; } 100% { left: 160%; right: -60%; } }
.advantage-card:hover .adv-shimmer { opacity: 1; }
.advantage-card .adv-content { position: relative; z-index: 1; }
.advantage-card .adv-icon-wrap { display: inline-flex; margin-bottom: .75rem; }
.advantage-card .adv-icon { width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; border-radius: .85rem; background: #f3f4f6; border: 1px solid #e5e7eb; color: #374151; font-size: 1.25rem; transition: transform .5s ease, background-color .5s ease, color .5s ease; }
.advantage-card:hover .adv-icon { transform: scale(1.1) rotate(3deg); background: #111827; color: #fff; }
.advantage-card .adv-indicator { position: absolute; top: .9rem; right: .9rem; width: .5rem; height: .5rem; border-radius: 999px; background: #d1d5db; opacity: 0; transition: transform .5s ease, opacity .5s ease, background-color .5s ease; }
.advantage-card:hover .adv-indicator { opacity: 1; transform: scale(1.5); background: #111827; }
.advantage-card .adv-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, #e5e7eb, #9ca3af, #e5e7eb); transform: scaleX(0); transform-origin: center; transition: transform .5s ease; }
.advantage-card:hover .adv-bottom { transform: scaleX(1); }

/* Utilities */
.text-dark { color: #111827 !important; }
.text-secondary { color: #6b7280 !important; }

/* FAQ Section */
.faq-section { background: linear-gradient(135deg, #f9fafb, #fff); }
.faq-list { display: grid; gap: 1rem; max-width: 56rem; margin-left: auto; margin-right: auto; }
.faq-item { background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: .85rem; overflow: hidden; transition: border-color .25s ease, box-shadow .25s ease; }
.faq-item:hover { border-color: rgba(0,0,0,.2); box-shadow: 0 12px 28px rgba(0,0,0,.06); }
.faq-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1.25rem; background: transparent; border: 0; text-align: left; }
.faq-toggle:focus { outline: 2px solid #e5e7eb; outline-offset: 2px; }
.faq-toggle i { transition: transform .25s ease; color: #6b7280; }
.faq-item.expanded .faq-toggle i { transform: rotate(180deg); }
.faq-index { width: 1.5rem; height: 1.5rem; border-radius: 999px; background: #e5e7eb; color: #374151; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; margin-top: .15rem; flex: 0 0 1.5rem; }
.faq-check { width: 1.25rem; height: 1.25rem; display: flex; align-items: center; justify-content: center; color: #374151; }
.faq-answer { padding: 0 1.25rem 1.25rem; transition: grid-template-rows .3s ease, opacity .3s ease; }

.faq-cta { max-width: 42rem; background: linear-gradient(135deg, #fff, #f9fafb); border: 1px solid rgba(0,0,0,.1); border-radius: 1rem; padding: 1.5rem; box-shadow: 0 16px 40px rgba(0,0,0,.06); }
.faq-trust .vr { width: 1px; height: 2rem; background: #e5e7eb; }

/* Process Section */
.process-section { background: linear-gradient(180deg, #fff, #f9fafb); }
.process-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at top left, rgba(17,24,39,.04), transparent 60%), radial-gradient(ellipse at bottom right, rgba(17,24,39,.05), transparent 60%); }
.proc-progress { max-width: 520px; }
.proc-step-dot { width: 2rem; height: 2rem; border-radius: 999px; border: 2px solid #d1d5db; background: #fff; color: #6b7280; font-size: .8rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; transition: all .25s ease; }
.proc-step-dot.active, .proc-step-dot.completed { background: #374151; border-color: #374151; color: #fff; }
.proc-step-dot:hover { border-color: #9ca3af; }
.proc-progress-track { width: 100%; height: .5rem; background: #e5e7eb; border-radius: 999px; overflow: hidden; }
.proc-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #374151, #1f2937); border-radius: 999px; transition: width .4s ease; }

.proc-card { position: relative; background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: .85rem; padding: 1rem; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease; }
.proc-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.06); border-color: rgba(0,0,0,.15); }
.proc-card.active { background: #f9fafb; border-color: #9ca3af; box-shadow: 0 16px 36px rgba(0,0,0,.08); transform: translateY(-4px) scale(1.01); }
.proc-card-icon { width: 2.5rem; height: 2.5rem; border-radius: .6rem; display: flex; align-items: center; justify-content: center; background: #f3f4f6; border: 1px solid rgba(0,0,0,.08); color: #374151; margin-bottom: .5rem; font-size: 1.2rem; transition: background-color .25s ease, color .25s ease; }
.proc-card.active .proc-card-icon { background: #111827; color: #fff; border-color: #111827; }
.proc-step-label { display: inline-block; font-size: .75rem; color: #6b7280; font-weight: 600; margin-bottom: .25rem; }
.proc-details { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s ease, opacity .35s ease; }
.proc-card.expanded .proc-details { max-height: 18rem; opacity: 1; }
.proc-controls .btn { min-width: 9rem; }

/* USP cards */
.proc-usp-card { background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: .85rem; padding: 1rem; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.proc-usp-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.06); border-color: rgba(0,0,0,.15); }
.proc-usp-ico { width: 3rem; height: 3rem; border-radius: .75rem; display: flex; align-items: center; justify-content: center; background: #f3f4f6; color: #374151; border: 1px solid rgba(0,0,0,.08); margin-bottom: .5rem; font-size: 1.25rem; }

/* Packages */
.proc-package { background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 1rem; padding: 1.25rem; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.proc-package:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.06); border-color: rgba(0,0,0,.15); }
.proc-package.featured { border-width: 2px; border-color: #6b7280; position: relative; }
.proc-badge { position: absolute; top: 0; right: 0; background: #374151; color: #fff; font-size: .7rem; font-weight: 700; padding: .25rem .5rem; border-bottom-left-radius: .5rem; }
.proc-package-ico { width: 4rem; height: 4rem; border-radius: .85rem; display: flex; align-items: center; justify-content: center; background: #f3f4f6; color: #374151; border: 1px solid rgba(0,0,0,.08); font-size: 1.5rem; }
.proc-package-ico.dark { background: #111827; color: #fff; border-color: #111827; }
.proc-divider { width: 3rem; height: 2px; background: #e5e7eb; }
.proc-divider.wide { width: 4rem; background: #6b7280; }