:root {
    --eo-navy-950: #07163f;
    --eo-navy-900: #0a1f5c;
    --eo-blue-700: #1456d8;
    --eo-blue-500: #2874ed;
    --eo-cyan: #22d3ee;
    --eo-teal: #6ee7d0;
    --eo-white: #ffffff;
    --eo-slate-900: #17233d;
    --eo-slate-700: #42526b;
    --eo-slate-500: #71829b;
    --eo-line: #d9e4f1;
    --eo-surface: #f5f8fc;
    --eo-radius-md: 16px;
    --eo-radius-lg: 20px;
    --eo-radius-xl: 24px;
    --eo-shadow-sm: 0 8px 22px rgba(10, 31, 92, .08);
    --eo-shadow-lg: 0 24px 60px rgba(10, 31, 92, .14);
    --eo-space-1: 4px;
    --eo-space-2: 8px;
    --eo-space-3: 12px;
    --eo-space-4: 16px;
    --eo-space-5: 24px;
    --eo-space-6: 32px;
    --eo-space-7: 48px;
    --eo-space-8: 72px;
}

html { scroll-behavior: smooth; }
body.eo-body {
    min-width: 320px;
    overflow-x: hidden;
    background: var(--eo-surface);
    color: var(--eo-slate-900);
    font-family: Inter, "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid rgba(34, 211, 238, .6);
    outline-offset: 3px;
}

.eo-navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    background: rgba(10, 31, 92, .82);
    box-shadow: 0 8px 28px rgba(7, 22, 63, .12);
    backdrop-filter: blur(18px);
}
.eo-navbar .container { min-height: 64px; }
.eo-logo { color: var(--eo-white) !important; font-weight: 800; letter-spacing: -.02em; }
.eo-logo small { display: block; color: rgba(255, 255, 255, .72); font-size: .62rem; font-weight: 500; letter-spacing: .02em; }
.portal-logo-mark { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-right: 8px; border-radius: 12px; background: linear-gradient(135deg, var(--eo-cyan), var(--eo-teal)); color: var(--eo-navy-900); }
.eo-nav-link { min-height: 44px; display: inline-flex; align-items: center; color: rgba(255, 255, 255, .84) !important; }
.eo-nav-link:hover, .eo-nav-link.is-active { color: var(--eo-white) !important; }
.portal-menu-toggle { display: none; min-width: 44px; min-height: 44px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 12px; background: rgba(255, 255, 255, .08); color: var(--eo-white); }

.eo-footer { margin-top: 0 !important; border-top: 1px solid rgba(157, 199, 235, .18); background: linear-gradient(135deg, var(--eo-navy-950), var(--eo-navy-900) 58%, #123d6d); color: #e8f4ff; }
.eo-footer .container { position: relative; }
.eo-footer .footer-ownership { padding-bottom: var(--eo-space-5); border-bottom: 1px solid rgba(157, 199, 235, .18); }
.eo-footer .footer-ownership p { color: #a9c0d7; font-size: .82rem; }
.eo-footer a { color: #e8f4ff; text-decoration: none; transition: color .2s ease, transform .2s ease; }
.eo-footer a:hover, .eo-footer a:focus-visible { color: var(--eo-teal); }
.eo-footer .footer-ownership a { display: inline-block; margin-right: var(--eo-space-2); }
.eo-footer-title { color: #fff; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.eo-footer .follow-us-section { padding-top: var(--eo-space-5); border-top: 1px solid rgba(157, 199, 235, .18); }
.eo-footer .follow-us-title { color: #a9c0d7; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.eo-footer .social-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: var(--eo-space-2); border: 1px solid rgba(157, 199, 235, .22); border-radius: 50%; background: rgba(255, 255, 255, .06); }
.eo-footer .social-icon:hover, .eo-footer .social-icon:focus-visible { transform: translateY(-3px); border-color: var(--eo-teal); background: rgba(110, 231, 208, .12); }

.eo-mobile-actions { display: none; }
.eo-reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.eo-reveal.is-visible { opacity: 1; transform: translateY(0); }
.hero.hero-soft { background: linear-gradient(135deg, var(--eo-navy-900), var(--eo-blue-700)); }
.hero-inner h1 { font-size: clamp(2.15rem, 5vw, 4rem); }
.hero-search { border: 1px solid transparent; transition: border-color .2s ease, box-shadow .2s ease; }
.hero-search:focus-within { border-color: var(--eo-cyan); box-shadow: 0 0 0 4px rgba(34, 211, 238, .18), var(--eo-shadow-lg); }
.services-section, .premium-features, .news-section { scroll-margin-top: 84px; }
.eo-catalog-page { max-width: 1180px; margin: 0 auto; }
.eo-catalog-hero { position: relative; overflow: hidden; margin: 0 0 var(--eo-space-5); padding: clamp(28px, 5vw, 52px); border-radius: var(--eo-radius-xl); background: linear-gradient(135deg, var(--eo-navy-900), var(--eo-blue-700)); color: var(--eo-white); box-shadow: var(--eo-shadow-lg); }
.eo-catalog-hero::after { content: ""; position: absolute; right: 5%; bottom: -90px; width: 220px; height: 220px; border: 1px solid rgba(110, 231, 208, .3); border-radius: 50%; box-shadow: 0 0 0 22px rgba(110, 231, 208, .06), 0 0 0 48px rgba(110, 231, 208, .04); }
.eo-catalog-hero .portal-eyebrow { color: var(--eo-teal); font-weight: 800; letter-spacing: .1em; }
.eo-catalog-hero .eo-page-title { position: relative; z-index: 1; margin: var(--eo-space-2) 0; color: var(--eo-white); font-size: clamp(2rem, 5vw, 3.4rem); }
.eo-catalog-hero p { position: relative; z-index: 1; max-width: 620px; margin: 0; color: rgba(255,255,255,.82); line-height: 1.7; }
.eo-catalog-search { max-width: 760px; margin: 0 auto var(--eo-space-5); }
.eo-catalog-tabs { overflow-x: auto; padding: 3px 2px 12px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.eo-catalog-tabs .btn { flex: 0 0 auto; min-height: 44px; border-radius: 999px; scroll-snap-align: start; }
.eo-catalog-category { overflow: hidden; margin-bottom: var(--eo-space-6) !important; padding: var(--eo-space-5); border: 1px solid var(--eo-line); border-radius: var(--eo-radius-lg); background: rgba(255,255,255,.7); box-shadow: var(--eo-shadow-sm); }
.eo-catalog-category-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--eo-space-4); margin-bottom: var(--eo-space-4); padding-bottom: var(--eo-space-3); border-bottom: 1px solid var(--eo-line); }
.eo-catalog-kicker { color: var(--eo-blue-700); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.eo-catalog-category-heading h2 { color: var(--eo-navy-900); font-size: clamp(1.25rem, 3vw, 1.7rem); }
.eo-catalog-count { color: var(--eo-slate-500); font-size: .78rem; white-space: nowrap; }
.eo-catalog-card-col { transition: opacity .55s ease, transform .55s ease; }
.eo-service-card { position: relative; min-height: 210px; overflow: hidden; padding: var(--eo-space-5) !important; border: 1px solid var(--eo-line); border-radius: var(--eo-radius-md); background: linear-gradient(160deg, #fff, #f7fbff); box-shadow: var(--eo-shadow-sm); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.eo-service-card::after { content: "→"; position: absolute; top: var(--eo-space-5); right: var(--eo-space-5); color: var(--eo-blue-700); font-size: 1.25rem; opacity: .35; transition: transform .22s ease, opacity .22s ease; }
.eo-service-card:hover { transform: translateY(-5px); border-color: rgba(20,86,216,.35); box-shadow: 0 18px 36px rgba(20,86,216,.14); }
.eo-service-card:hover::after { opacity: 1; transform: translateX(4px); }
.eo-catalog-card-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: var(--eo-space-4); border-radius: 14px; background: linear-gradient(135deg, rgba(34,211,238,.16), rgba(20,86,216,.12)); color: var(--eo-blue-700); font-size: 1.05rem; }
.eo-service-title { max-width: calc(100% - 28px); color: var(--eo-navy-900); font-size: 1.08rem; }
.eo-service-desc { color: var(--eo-slate-700); line-height: 1.65; }
.eo-apply-btn { min-height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--eo-blue-700), var(--eo-blue-500)); color: #fff; font-weight: 800; }
body:has(.eo-service-form) .eo-mobile-actions,
body:has(#pan-application-form) .eo-mobile-actions { display: none; }
body:has(.eo-service-form), body:has(#pan-application-form) { padding-bottom: 0; }
@media (max-width: 640px) {
    .eo-catalog-hero { margin-right: -12px; margin-left: -12px; border-radius: 0 0 var(--eo-radius-xl) var(--eo-radius-xl); }
    .eo-catalog-category { padding: var(--eo-space-4); border-radius: var(--eo-radius-md); }
    .eo-catalog-category-heading { align-items: start; flex-direction: column; gap: var(--eo-space-2); }
    .eo-catalog-count { font-size: .72rem; }
}
@media (max-width: 768px) {
    .portal-menu-toggle { display: inline-grid; place-items: center; }
    #portal-nav { position: absolute; top: calc(100% + 8px); right: 16px; left: 16px; display: grid !important; gap: 4px !important; padding: 12px; border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--eo-radius-md); background: rgba(7, 22, 63, .96); box-shadow: var(--eo-shadow-lg); opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease; }
    #portal-nav.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
    #portal-nav > * { width: 100%; }
    #portal-nav .eo-pill-btn, #portal-nav .eo-nav-link { justify-content: center; }
    .eo-mobile-actions { position: fixed; right: 12px; bottom: 12px; left: 12px; z-index: 900; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 6px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 18px; background: rgba(7, 22, 63, .92); box-shadow: var(--eo-shadow-lg); backdrop-filter: blur(16px); }
    .eo-mobile-actions a { display: grid; min-height: 46px; place-items: center; gap: 2px; border-radius: 12px; color: rgba(255, 255, 255, .78); font-size: .65rem; text-decoration: none; }
    .eo-mobile-actions a:hover, .eo-mobile-actions a:focus-visible { background: rgba(34, 211, 238, .16); color: #fff; }
    .eo-mobile-actions i { font-size: .95rem; }
    body.eo-body { padding-bottom: 76px; }
}
@media (max-width: 640px) {
    .site-header { position: absolute !important; height: auto !important; }
    .site-header .header-inner { display: flex; flex-wrap: nowrap; align-items: center; width: 100%; height: 64px !important; min-height: 64px !important; padding: 8px 14px !important; }
    .site-header .logo { min-width: 0; gap: 7px; }
    .site-header .logo strong { font-size: .98rem; }
    .site-header .logo small { font-size: .48rem; }
    .site-header .logo-mark { width: 34px; height: 34px; flex: 0 0 34px; }
    .site-header .main-nav { display: flex !important; align-items: center; gap: 5px !important; margin-left: auto; }
    .site-header .main-nav .btn { min-height: 36px !important; padding: 0 10px !important; font-size: .68rem; white-space: nowrap; }
    .site-header .main-nav .btn-login { display: inline-flex !important; }
    .site-header .main-nav .btn-primary { display: inline-flex !important; }
    .hero.hero-soft { min-height: auto !important; padding: 92px 0 54px !important; border-radius: 0 0 22px 22px; }
    .hero-inner { display: block !important; width: calc(100% - 28px) !important; max-width: none !important; padding: 0 !important; }
    .hero-copy { width: 100%; max-width: none; }
    .hero-kicker { max-width: 100%; padding: 7px 9px; font-size: .58rem; white-space: normal; }
    .hero-inner h1 { max-width: 100% !important; margin: 14px 0 12px !important; font-size: clamp(2rem, 10.5vw, 2.55rem) !important; line-height: 1.04 !important; letter-spacing: -.035em !important; overflow-wrap: normal; }
    .hero-inner p { max-width: 100%; margin: 0; font-size: .9rem !important; line-height: 1.55; }
    .hero-search { width: 100%; max-width: none; margin-top: 18px; padding: 4px 4px 4px 11px; }
    .hero-search input { min-width: 0; font-size: .75rem; }
    .hero-search button { flex: 0 0 auto; padding: 11px 12px; font-size: .72rem; }
    .hero-proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
    .hero-proof span, .hero-proof > a { min-width: 0; }
    .hero-proof > a { display: grid; }
    .hero-visual { display: none !important; }
    .eo-mobile-actions { right: 8px; bottom: 8px; left: 8px; }
    .hero.hero-soft { min-height: auto; padding: 88px 0 42px !important; }
    .hero-inner { width: calc(100% - 28px) !important; padding: 0 !important; }
    .hero-inner h1 { max-width: 100%; font-size: clamp(2rem, 10vw, 2.65rem); line-height: 1.04 !important; }
    .hero-inner p { max-width: 100%; font-size: .92rem !important; }
    .hero-search { width: 100%; }
    .hero-proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .hero-proof span, .hero-proof > a { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .eo-navbar a, .eo-footer a, #portal-nav, .eo-mobile-actions a, .eo-reveal { transition: none !important; }
}