:root {
  /* Map app primary color to Bootstrap primary if needed */
  --bs-primary: var(--uw-primary, #0d6efd);
}

body { background-color: #fff; }

/* Credits outline component */
.credits-outline {
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 8px 3px 8px;
  border:1px solid rgba(0,0,0,0.18);
  border-radius:999px;
  font-size:.75rem;
  line-height:1rem;
  font-weight:500;
  background:#fff;
  color:#333;
  box-shadow:0 1px 2px rgba(0,0,0,0.06);
}
.credits-outline .fa-file { font-size:.8rem; color:var(--bs-primary); }
.credits-outline .credits-value { min-width:1.2rem; text-align:right; }

/* Utility overrides (kept tiny intentionally) */
.navbar-light .navbar-nav .nav-link.active { font-weight:600; }

/* Landing layout sections */
.landing-wrapper { padding:0; display:block; }
section.section, section.section-alt { width:100%; }
.section + .section, .section + .section-alt, .section-alt + .section, .section-alt + .section-alt { border-top:1px solid rgba(0,0,0,0.05); }
.bg-section { background: linear-gradient(180deg,#f8f9fa 0%, #f5f7f9 100%); }

/* Hero */
.hero-landing { min-height: 72vh; display:flex; align-items:center; position:relative; }

.hero-landing h1 {
  background: linear-gradient(90deg,var(--bs-primary), #6610f2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Fallback for browsers not supporting background-clip:text */
  @supports not (-webkit-background-clip: text) {
    color: var(--bs-primary);
  }
}
.backdrop-blur-sm { backdrop-filter: blur(4px); }
.hero-landing .border { border-color: rgba(0,0,0,0.08)!important; }

@media (max-width: 767.98px) {
  .hero-landing { min-height: auto; padding-top:3rem; padding-bottom:2rem; }
}

/* Feature cards modern */
.feature-grid { --feature-gap:1.25rem; }
.feature-card {
  position:relative;
  background:linear-gradient(145deg,#ffffff 0%, #f7f9fb 60%, #f1f4f8 100%);
  border:1px solid rgba(0,0,0,0.06);
  border-radius:18px;
  box-shadow:0 4px 8px -2px rgba(0,0,0,0.04), 0 2px 4px -1px rgba(0,0,0,0.03);
  transition: all .35s cubic-bezier(.4,.2,.2,1);
  overflow:hidden;
}
.feature-card:before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 85% 15%, rgba( var(--feature-accent-r,13), var(--feature-accent-g,110), var(--feature-accent-b,253),0.12), transparent 65%);
  opacity:0; transition:opacity .4s;
}
.feature-card:hover { transform:translateY(-6px) scale(1.015); box-shadow:0 10px 24px -6px rgba(0,0,0,0.12),0 4px 12px -2px rgba(0,0,0,0.08); }
.feature-card:hover:before { opacity:1; }
.feature-card-title { font-weight:600; letter-spacing:.3px; }
.feature-card-text { color:#4a5568; }
.feature-icon-wrapper {
  --icon-size:48px; width:var(--icon-size); height:var(--icon-size);
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--bs-primary) 0%, #6f42c1 100%);
  color:#fff; border-radius:14px; font-size:20px;
  box-shadow:0 4px 10px -2px rgba(0,0,0,0.18), 0 2px 4px -1px rgba(0,0,0,0.12);
  position:relative;
}
.feature-icon-wrapper:after {
  content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(135deg,rgba(255,255,255,0.35),rgba(255,255,255,0)); mix-blend-mode:overlay; pointer-events:none;
}
.feature-card:hover .feature-icon-wrapper { box-shadow:0 6px 14px -2px rgba(0,0,0,0.25); }

/* Prefers-reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
  .feature-card, .feature-card:hover { transition:none; transform:none; }
  .feature-card:before { transition:none; }
}

/* High contrast adjustment (basic) */
@media (prefers-contrast: more) {
  .feature-card { border-color: rgba(0,0,0,0.25); }
  .feature-card-text { color:#1f2933; }
}

/* How It Works modern steps */
.hiw-steps { --hiw-accent: var(--bs-primary); }
.hiw-step-card { background:linear-gradient(160deg,#ffffff 0%, #f5f8fa 100%); border:1px solid rgba(0,0,0,0.06); border-radius:20px; padding:2.75rem 1.5rem 1.75rem; box-shadow:0 3px 6px -2px rgba(0,0,0,0.08),0 1px 3px rgba(0,0,0,0.05); overflow:hidden; transition:all .35s cubic-bezier(.4,.2,.2,1); }
.hiw-step-card:hover { transform:translateY(-6px); box-shadow:0 10px 22px -5px rgba(0,0,0,0.18),0 4px 10px -2px rgba(0,0,0,0.12); }
.hiw-step-card:after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 80% 15%, rgba(13,110,253,0.15), transparent 70%); opacity:0; transition:opacity .5s; }
.hiw-step-card:hover:after { opacity:1; }
.hiw-step-badge { position:absolute; top:0.85rem; left:0.85rem; width:2.3rem; height:2.3rem; border-radius:12px; background:var(--hiw-accent); color:#fff; font-weight:600; display:flex; align-items:center; justify-content:center; font-size:.95rem; box-shadow:0 4px 10px -2px rgba(0,0,0,0.25); }
.hiw-step-icon { width:64px; height:64px; border-radius:18px; background:linear-gradient(135deg,var(--hiw-accent), #6f42c1); color:#fff; display:flex; align-items:center; justify-content:center; font-size:26px; margin-bottom:1.1rem; box-shadow:0 6px 14px -4px rgba(0,0,0,0.30),0 2px 6px -1px rgba(0,0,0,0.18); position:relative; }
.hiw-step-icon:after { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(140deg,rgba(255,255,255,0.38),rgba(255,255,255,0)); mix-blend-mode:overlay; }
.hiw-step-title { font-weight:600; letter-spacing:.25px; margin-bottom:.4rem; }
.hiw-step-text { color:#475569; }
.hiw-step-line { position:absolute; top:50%; left:100%; width:120%; height:2px; background:linear-gradient(90deg,var(--hiw-accent) 0%, rgba(13,110,253,0) 100%); transform:translateY(-50%); opacity:.25; }
.hiw-steps .col-md-4:last-child .hiw-step-line { display:none; }
@media (max-width: 991.98px) { .hiw-step-line { display:none; } }
@media (prefers-reduced-motion: reduce) { .hiw-step-card, .hiw-step-card:hover { transition:none; transform:none; } }