:root {
    --opt-bg: #07111d;
    --opt-bg-alt: #0c1728;
    --opt-surface: rgba(16, 29, 45, 0.88);
    --opt-border: rgba(255, 255, 255, 0.08);
    --opt-text: #e8edf5;
    --opt-muted: #aab7c8;
    --opt-orange: #ff9b2f;
    --opt-blue: #35a9ff;
    --opt-dark-text: #142033;
}

html, body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--opt-bg);
    color: var(--opt-text);
    scroll-behavior: smooth;
}

body { margin: 0; }
a { text-decoration: none; }

.page-shell {
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(53, 169, 255, 0.12), transparent 25%),
        radial-gradient(circle at bottom right, rgba(255, 155, 47, 0.12), transparent 20%),
        var(--opt-bg);
}

.app-nav {
    background: rgba(5, 12, 20, 0.88);
    backdrop-filter: blur(12px);
}

.brand-logo { height: 56px; width: auto; display: block; }
.navbar-dark .navbar-nav .nav-link { color: rgba(255,255,255,0.82); font-weight: 500; }
.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link.active { color: #fff; }

.hero-custom {
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(circle at top right, rgba(53,169,255,0.18), transparent 22%),
      radial-gradient(circle at bottom left, rgba(255,155,47,0.16), transparent 20%),
      linear-gradient(135deg, #08111d 0%, #0d1a2e 55%, #091220 100%);
}

.inner-hero {
    background: linear-gradient(180deg, rgba(7,17,29,0.92), rgba(12,23,40,0.92));
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.eyebrow, .section-kicker {
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.84rem;
    font-weight: 700;
}

.hero-copy, .section-copy { max-width: 52rem; color: rgba(255,255,255,0.82); }
.stats-grid .stat-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 1rem;
    padding: 1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.stats-grid .stat-card strong { color: #fff; font-size: 1rem; }
.stats-grid .stat-card span { color: rgba(255,255,255,0.72); font-size: .95rem; }

.hero-side-panel {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 1.5rem;
    padding: 1.25rem;
}
.hero-side-top { color: white; margin-bottom: 1rem; }
.hero-side-top h2 { font-size: 1.7rem; font-weight: 800; line-height: 1.15; margin-bottom: .75rem; }
.hero-side-top p { color: rgba(255,255,255,0.72); margin-bottom: 0; }
.hero-panel-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: rgba(255, 155, 47, 0.15);
    color: #ffbe74;
    border: 1px solid rgba(255, 155, 47, 0.22);
    padding: 0.35rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: .85rem;
}
.hero-preview-card {
    border-radius: 1.5rem;
    padding: .65rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.08);
}

.impact-strip {
    background: linear-gradient(90deg, rgba(255,155,47,0.14), rgba(53,169,255,0.10));
    border-top: 1px solid rgba(255,255,255,0.07);
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.strip-points span { color: rgba(255,255,255,0.9); font-weight: 600; }

.section-dark { background: transparent; }
.section-dark-alt { background: var(--opt-bg-alt); }

.solution-card-light, .package-card, .module-card, .contact-panel, .industry-detail-card, .group-shell {
    border-radius: 1.25rem;
}
.solution-card-light, .contact-panel, .industry-detail-card, .group-shell {
    background: #fff;
    border: 1px solid rgba(15, 23, 36, 0.08);
}
.package-card {
    background: linear-gradient(180deg, rgba(18, 31, 49, 0.98), rgba(9, 18, 31, 0.98));
    color: white;
}
.module-card { background: #fff; color: #0f1724; }
.solution-card-light:hover, .module-card:hover, .package-card:hover, .industry-detail-card:hover {
    transform: translateY(-4px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.solution-icon {
    width: 72px; height: 72px; object-fit: contain; border-radius: 999px; flex-shrink: 0;
    background: #f5f8fc; padding: .5rem; border: 1px solid rgba(15,23,36,.06);
}
.module-footer { color: #49566a; font-size: 0.95rem; }
.group-shell { padding: 1.5rem; box-shadow: 0 10px 30px rgba(10,18,30,.06); }

.package-badge {
    display: inline-flex; align-items: center; border-radius: 999px; background: rgba(255, 155, 47, 0.15); color: #ffbe74;
    border: 1px solid rgba(255, 155, 47, 0.22); padding: 0.35rem 0.8rem; font-size: 0.8rem; font-weight: 700;
}

.industry-pill {
    background: white; color: #0f1724; border: 1px solid rgba(15, 23, 36, 0.08); box-shadow: 0 10px 30px rgba(10, 18, 30, 0.07);
    border-radius: 1rem; padding: 1rem 1.1rem; display: flex; gap: 0.75rem; align-items: center; font-weight: 600;
}
.industry-pill i, .industry-icon i { color: var(--opt-blue); }
.industry-detail-card {
    padding: 1.4rem;
    box-shadow: 0 10px 30px rgba(10,18,30,.06);
}
.industry-icon {
    width: 3rem; height: 3rem; border-radius: 999px; display:flex; align-items:center; justify-content:center;
    background:#edf6ff; margin-bottom: 1rem;
}
.industry-detail-card h2 { color: var(--opt-dark-text); font-size: 1.25rem; margin-bottom: .75rem; }
.industry-detail-card p { color: #556274; margin-bottom: 0; }

.contact-section { background: linear-gradient(180deg, rgba(6, 12, 20, 0.3), rgba(6, 12, 20, 0.8)); }
.contact-card {
    border-radius: 1.5rem; background: linear-gradient(135deg, rgba(255, 155, 47, 0.18), rgba(53, 169, 255, 0.16), rgba(8, 15, 25, 0.95));
    border: 1px solid rgba(255,255,255,0.08); padding: 2rem;
}
.contact-list { list-style: none; padding-left: 0; }
.contact-list li { display:flex; gap:.75rem; color: rgba(255,255,255,.88); margin-bottom: .85rem; }
.contact-list i { color: var(--opt-orange); margin-top: .15rem; }
.contact-panel { padding: 1.5rem; box-shadow: 0 10px 30px rgba(10,18,30,.06); }
.contact-link-card {
    display:flex; align-items:center; gap:1rem; color:var(--opt-dark-text); border:1px solid rgba(15,23,36,.08); border-radius:1rem;
    padding: 1rem; margin-bottom: 1rem; transition: all .2s ease; background:#fff;
}
.contact-link-card:hover { border-color: rgba(53,169,255,.35); box-shadow: 0 10px 30px rgba(10,18,30,.06); }
.contact-link-icon {
    width:3rem; height:3rem; border-radius:999px; background:#eef7ff; color:var(--opt-blue); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.contact-link-label { font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:#7b8796; font-weight:700; }
.contact-link-value { font-weight:700; }

.footer { border-top: 1px solid rgba(255,255,255,0.08); background: rgba(5, 12, 20, 0.8); }
.loading-shell {
    min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--opt-bg);
}
#blazor-error-ui {
    background: #fff3cd; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; color: #000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

@media (max-width: 991.98px) {
    .brand-logo { height: 46px; }
    .hero-side-top h2 { font-size: 1.45rem; }
}

@media (max-width: 767.98px) {
    .display-3 { font-size: calc(1.7rem + 2.5vw); }
    .hero-copy { font-size: 1.08rem !important; }
    .contact-card, .contact-panel, .group-shell { padding: 1.2rem; }
}

.lead-form .form-label {
    color: var(--opt-dark-text);
    font-weight: 700;
    margin-bottom: .45rem;
}

.lead-form .form-control,
.lead-form .form-select {
    border-radius: .9rem;
    border: 1px solid rgba(15,23,36,.14);
    padding: .85rem 1rem;
    box-shadow: none;
}

.lead-form .form-control:focus,
.lead-form .form-select:focus {
    border-color: rgba(53,169,255,.55);
    box-shadow: 0 0 0 .2rem rgba(53,169,255,.12);
}

.contact-inline-options .contact-link-card:last-child {
    margin-bottom: 0;
}

.thankyou-card {
    background: #fff;
    border: 1px solid rgba(15,23,36,.08);
    border-radius: 1.5rem;
    box-shadow: 0 14px 40px rgba(10,18,30,.08);
    padding: 2.25rem;
}

.thankyou-icon {
    width: 5rem;
    height: 5rem;
    margin: 0 auto 1.25rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef8f0;
    color: #188b42;
    font-size: 2rem;
}


.proof-card {
    background: #fff;
    border: 1px solid rgba(15,23,36,.08);
    border-radius: 1.2rem;
    box-shadow: 0 10px 30px rgba(10,18,30,.06);
    padding: 1.35rem;
    height: 100%;
}
.proof-card h3 {
    color: var(--opt-dark-text);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: .65rem;
}
.proof-card p { color: #5b6778; margin: 0; }
.scenario-card, .industry-link-card, .landing-content-card, .landing-proof-card {
    border-radius: 1.25rem;
}
.scenario-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    padding: 1.4rem;
    color: white;
    display:flex;
    flex-direction:column;
}
.scenario-card.compact { padding: 1.2rem; }
.scenario-card h3 { font-size: 1.2rem; margin-bottom: .75rem; }
.scenario-card p { color: rgba(255,255,255,.78); }
.scenario-step {
    font-size: .78rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .08em;
    color: #ffbe74;
    margin-bottom: .8rem;
}
.industry-link-card {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    padding: 1.35rem;
    color: white;
    display:flex;
    flex-direction:column;
    gap:.9rem;
}
.industry-link-card.light {
    background: #fff;
    color: var(--opt-dark-text);
    border: 1px solid rgba(15,23,36,.08);
    box-shadow: 0 10px 30px rgba(10,18,30,.06);
}
.industry-link-card h3 { font-size: 1.2rem; margin: 0; }
.industry-link-card p { color: inherit; opacity: .82; margin: 0; }
.landing-grid-shell { border-top: 1px solid rgba(15,23,36,.08); padding-top: 2.5rem; }
.landing-copy { max-width: 52rem; }
.mini-bullets {
    margin: 0;
    padding-left: 1.15rem;
    color: #566274;
}
.mini-bullets.large { font-size: 1.02rem; }
.mini-bullets li { margin-bottom: .55rem; }
.landing-content-card {
    background: #fff;
    border: 1px solid rgba(15,23,36,.08);
    box-shadow: 0 10px 30px rgba(10,18,30,.06);
    padding: 1.6rem;
}
.landing-proof-card {
    background: linear-gradient(180deg, rgba(18, 31, 49, 0.98), rgba(9, 18, 31, 0.98));
    border: 1px solid rgba(255,255,255,.08);
    color: white;
    padding: 1.6rem;
}
.proof-stack { display: grid; gap: .9rem; }
.proof-stack div {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 1rem;
    padding: .95rem 1rem;
}
.proof-stack strong { display:block; margin-bottom: .25rem; }
.proof-stack span { color: rgba(255,255,255,.78); }


.service-capability-card {
    background: #fff;
    border: 1px solid rgba(15,23,36,.08);
    border-radius: 1.35rem;
    box-shadow: 0 14px 40px rgba(10,18,30,.08);
    padding: 1.5rem;
    height: 100%;
}
.service-detail-box, .solution-detail-box {
    border: 1px solid rgba(15,23,36,.08);
    border-radius: 1rem;
    padding: 1rem;
    height: 100%;
}
.service-detail-label, .solution-detail-label {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 800;
    color: #7a8796;
    margin-bottom: .55rem;
}
.solution-package-card {
    background: linear-gradient(180deg, rgba(18, 31, 49, 0.98), rgba(9, 18, 31, 0.98));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 1.35rem;
    box-shadow: 0 18px 48px rgba(3, 8, 16, 0.32);
    padding: 1.5rem;
    height: 100%;
}
.dark-bullets {
    color: rgba(255,255,255,.78);
}
.dark-bullets li {
    margin-bottom: .45rem;
}

.problem-summary-card {
    background: #fff;
    border: 1px solid rgba(15,23,36,.08);
    border-radius: 1.35rem;
    box-shadow: 0 12px 34px rgba(10,18,30,.06);
    padding: 1.5rem;
}

.problem-summary-card:hover,
.impact-metric-card:hover {
    transform: translateY(-4px);
    transition: transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 16px 40px rgba(10,18,30,.09);
}

.mini-bullets {
    list-style: none;
    padding-left: 0;
}

.mini-bullets li {
    position: relative;
    padding-left: 1.15rem;
    margin-bottom: .7rem;
}

.mini-bullets li:last-child {
    margin-bottom: 0;
}

.mini-bullets li::before {
    content: "";
    width: .45rem;
    height: .45rem;
    border-radius: 999px;
    background: var(--opt-orange);
    position: absolute;
    left: 0;
    top: .52rem;
}

.problems-hero {
    background:
        radial-gradient(circle at top right, rgba(53,169,255,0.16), transparent 22%),
        radial-gradient(circle at bottom left, rgba(255,155,47,0.12), transparent 22%),
        linear-gradient(180deg, rgba(7,17,29,.96), rgba(12,23,40,.96));
}

.impact-banner {
    background: linear-gradient(135deg, rgba(255,155,47,.16), rgba(53,169,255,.14));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 1.2rem;
    color: #fff;
    padding: 1.15rem 1.3rem;
    font-weight: 700;
    text-align: center;
}

.before-after-card {
    background: linear-gradient(180deg, rgba(17,31,49,.98), rgba(8,18,31,.98));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 1.4rem;
    padding: 1.4rem;
    box-shadow: 0 16px 40px rgba(3,8,15,.18);
}

.compare-shell {
    display: grid;
    gap: 1rem;
}

.compare-column {
    border-radius: 1rem;
    padding: 1rem;
    border: 1px solid rgba(255,255,255,.08);
}

.compare-before {
    background: rgba(255,255,255,.03);
}

.compare-after {
    background: linear-gradient(135deg, rgba(255,155,47,.12), rgba(53,169,255,.10));
}

.compare-label,
.solution-detail-label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 700;
    color: #ffbe74;
    margin-bottom: .7rem;
}

.impact-metric-card {
    background: #fff;
    border: 1px solid rgba(15,23,36,.08);
    border-radius: 1.35rem;
    box-shadow: 0 12px 34px rgba(10,18,30,.06);
    padding: 1.5rem;
}

.impact-metric-value {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--opt-blue);
    margin-bottom: .9rem;
}

.solution-detail-box {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 1.1rem;
    padding: 1rem;
}

.cta-card {
    background: linear-gradient(135deg, rgba(255,155,47,.12), rgba(53,169,255,.12), rgba(12,23,40,.98));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 1.4rem;
    padding: 1.6rem;
    box-shadow: 0 16px 40px rgba(3,8,15,.16);
}