:root {
    --ui-navy: #0b1220;
    --ui-ink: #111827;
    --ui-muted: #667085;
    --ui-line: #e6eaf0;
    --ui-surface: #ffffff;
    --ui-soft: #f6f8fc;
    --ui-primary: #4f46e5;
    --ui-primary-2: #7c3aed;
    --ui-cyan: #06b6d4;
    --ui-radius: 22px;
    --ui-shadow: 0 22px 55px rgba(15, 23, 42, .12);
}

body {
    color: var(--ui-ink);
    background: #f6f8fc !important;
    background-image: radial-gradient(circle at 10% 5%, rgba(79, 70, 229, .11), transparent 28rem), radial-gradient(circle at 88% 20%, rgba(6, 182, 212, .11), transparent 30rem) !important;
}

/* Header and desktop navigation */
.site-navbar {
    position: sticky;
    top: 0;
    z-index: 1050;
    padding: .85rem 0;
    background: rgba(246, 248, 252, .86);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(230, 234, 240, .8);
}

.site-navbar .navbar-shell {
    width: min(100% - 2rem, 1240px);
    margin: auto;
    padding: .55rem .75rem .55rem 1rem;
    border: 1px solid rgba(255,255,255,.75);
    border-radius: 18px;
    background: rgba(11, 18, 32, .95);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .18);
}

.site-navbar .navbar-brand { display: inline-flex; align-items: center; gap: .7rem; color: #fff !important; font-size: 1.05rem; font-weight: 800; white-space: normal; }
.brand-mark { display: block; width: 38px; height: 38px; border-radius: 11px; object-fit: cover; background: #061428; box-shadow: 0 6px 16px rgba(6, 182, 212, .24); }
.site-navbar .nav-link { color: #cbd5e1 !important; padding: .55rem .7rem !important; margin: 0 .05rem; font-size: .9rem; font-weight: 600; border-radius: 10px; transition: .2s ease; }
.site-navbar .nav-link:hover, .site-navbar .nav-link:focus { color: #fff !important; background: rgba(255,255,255,.1); }
.site-navbar .nav-link.is-active { color: #fff !important; background: rgba(6, 182, 212, .18); box-shadow: inset 0 -2px 0 var(--ui-cyan); }
.site-navbar .nav-download-link { color: #fff !important; background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-2)); box-shadow: 0 8px 18px rgba(79,70,229,.28); }
.site-navbar .nav-download-link:hover { background: linear-gradient(135deg, #5b52ef, #8b5cf6); }
.site-navbar .navbar-toggler { border-color: rgba(255,255,255,.28); box-shadow: none; }
.site-navbar .navbar-toggler-icon { filter: invert(1); }

/* Hero */
.site-hero { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(380px, 54vw, 620px); display: grid; place-items: center; margin-bottom: 1.5rem; color: #fff; background: #09121f; }
.site-hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(5, 12, 25, .94) 0%, rgba(5, 12, 25, .64) 55%, rgba(5, 12, 25, .2) 100%), url('/assets/img/banner.jpeg') center/cover no-repeat; }
.site-hero::after { content: ''; position: absolute; z-index: -1; width: 36rem; height: 36rem; left: -13rem; bottom: -20rem; border-radius: 50%; background: rgba(79,70,229,.58); filter: blur(20px); }
.site-hero__inner { width: min(100% - 2rem, 1120px); padding: 4.5rem 0 4rem; }
.site-hero__eyebrow { display: inline-flex; gap: .5rem; align-items: center; padding: .4rem .75rem; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(255,255,255,.1); font-size: .83rem; font-weight: 700; }
.site-hero h1 { max-width: 760px; margin: 1.15rem 0 .85rem; font-size: clamp(2.25rem, 5vw, 4.85rem); font-weight: 900; line-height: 1.2; letter-spacing: -.04em; }
.site-hero p { max-width: 600px; margin: 0 0 1.7rem; color: #dbeafe; font-size: clamp(1rem, 2vw, 1.25rem); }
.hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.hero-primary, .hero-secondary { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .75rem 1.15rem; border-radius: 13px; font-weight: 800; text-decoration: none; }
.hero-primary { color: #fff; background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-2)); box-shadow: 0 12px 28px rgba(79,70,229,.38); }
.hero-primary:hover { color: #fff; transform: translateY(-2px); }
.hero-secondary { color: #fff; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); }
.hero-secondary:hover { color: #fff; background: rgba(255,255,255,.16); }
.hero-download { min-width: 210px; }
.hero-download-hint { display: inline-flex; gap: .5rem; margin-top: 1.2rem; color: #c7d2fe; font-size: .88rem; font-weight: 700; text-decoration: none; }
.hero-download-hint:hover { color: #fff; }

/* Content, cards and sections */
.content.container { background: transparent; border: 0; box-shadow: none; padding: 0; width: min(100% - 2rem, 1200px); }
.home-content > section, .home-content > .container, .contact-page, .article-list { margin-bottom: 2rem; }
.pro-card, .hitech-blog-card, .article-card, .info-box, .map-container, .certificate-search__panel { border: 1px solid var(--ui-line) !important; border-radius: var(--ui-radius) !important; box-shadow: 0 10px 30px rgba(15, 23, 42, .06) !important; }
.pro-card:hover, .hitech-blog-card:hover, .article-card:hover { border-color: rgba(79,70,229,.35) !important; box-shadow: var(--ui-shadow) !important; }
.section-title { font-size: clamp(1.65rem, 3vw, 2.35rem) !important; }
.section-subtitle { max-width: 680px; margin-inline: auto; }

/* Mobile nav */
.public-bottom-nav { display: none; }

/* Contact page */
.contact-page { padding: clamp(1.25rem, 4vw, 3.5rem); border-radius: 28px; background: linear-gradient(145deg, #fff, #f5f7ff); border: 1px solid var(--ui-line); }
.contact-kicker { color: var(--ui-primary); font-size: .85rem; font-weight: 800; }
.contact-title { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 900; margin: .35rem 0 1rem; }
.contact-detail { display: flex; gap: .85rem; align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--ui-line); }
.contact-detail:last-child { border: none; }
.contact-icon { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px; color: var(--ui-primary); background: #eef2ff; }
.contact-detail small { color: var(--ui-muted); display: block; }
.contact-detail a { color: var(--ui-ink); font-weight: 800; text-decoration: none; }
.contact-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .7rem 1.1rem; margin-top: 1.25rem; border-radius: 13px; color: #fff; background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-2)); text-decoration: none; font-weight: 800; }
.contact-map { min-height: 360px; overflow: hidden; border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); }
.contact-map iframe { display: block; width: 100%; height: 100%; min-height: 360px; border: 0; }

/* Public plugins */
.certificate-search { margin: 1.25rem auto 2.25rem; }
.certificate-search__panel { max-width: 720px; margin: auto; padding: 1.25rem; background: #fff; }
.certificate-search__label { display: block; margin-bottom: .55rem; color: var(--ui-muted); font-size: .88rem; font-weight: 700; }
.certificate-search .form-control { min-height: 52px; border-radius: 13px !important; }
.certificate-search .btn { min-width: 112px; border-radius: 13px !important; }

/* Download hub */
.download-hub { padding: clamp(1.25rem, 3vw, 2.5rem); border: 1px solid var(--ui-line); border-radius: 28px; background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(242,245,255,.95)); }
.download-hub__header { display: flex; gap: 1.25rem; align-items: flex-start; justify-content: space-between; padding-bottom: 1.5rem; border-bottom: 1px solid var(--ui-line); }
.download-hub__eyebrow { color: var(--ui-primary); font-size: .85rem; font-weight: 800; }
.download-hub__header h1 { margin: .35rem 0 .4rem; font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 900; }
.download-hub__header p { margin: 0; color: var(--ui-muted); }
.download-hub__back { flex: 0 0 auto; padding: .65rem .9rem; border: 1px solid var(--ui-line); border-radius: 12px; color: var(--ui-ink); background: #fff; font-size: .88rem; font-weight: 800; text-decoration: none; }
.download-breadcrumb { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; padding: 1rem 0; color: var(--ui-muted); font-size: .9rem; }
.download-breadcrumb a, .download-breadcrumb button { padding: .35rem .55rem; border: 0; border-radius: 9px; color: var(--ui-primary); background: #eef2ff; font: inherit; font-weight: 750; text-decoration: none; }
.download-card { position: relative; min-height: 180px; border-color: var(--ui-line) !important; }
.download-card:hover { border-color: rgba(79,70,229,.38) !important; }
.download-card svg { width: 62px; height: 62px; color: var(--ui-primary); }

.article-list { max-width: 1000px; margin-inline: auto; }
.article-card { overflow: hidden; padding: 0 !important; background: #fff; transition: transform .25s ease, box-shadow .25s ease; }
.article-card .article-image { min-height: 245px; height: 100%; width: 100%; object-fit: cover; }
.article-card .article-content { padding: clamp(1.25rem, 3vw, 2rem); }
.article-card .article-date { color: var(--ui-muted); font-size: .86rem; }
.article-card h3 { color: var(--ui-ink) !important; font-size: clamp(1.2rem, 2vw, 1.65rem); font-weight: 850; }
.article-card .article-link { display: inline-flex; align-items: center; margin-top: .4rem; padding: .65rem .95rem; border-radius: 12px; color: var(--ui-primary); background: #eef2ff; font-weight: 800; text-decoration: none; }
.pagination .page-link { color: var(--ui-primary); border: 1px solid var(--ui-line); border-radius: 10px !important; margin: 0 .15rem; }
.pagination .active .page-link { color: #fff; border-color: var(--ui-primary); background: var(--ui-primary); }

/* Chat components */
.chat-toggle { background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-2)) !important; border: 3px solid #fff; box-shadow: 0 14px 32px rgba(79,70,229,.42) !important; }
.chat-popup { border-radius: 22px !important; box-shadow: var(--ui-shadow) !important; }
.chat-popup .card-header, #chat-container .card-header { background: linear-gradient(135deg, var(--ui-navy), #243b72) !important; }
#chat-container { overflow: hidden; border-radius: 22px !important; box-shadow: var(--ui-shadow) !important; }
.assistant-message { background: #f1f5f9 !important; border: 1px solid #e2e8f0; border-radius: 14px !important; }
.user-message { color: #fff; background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-2)) !important; border-radius: 14px !important; }

@media (max-width: 991.98px) {
    .site-navbar .navbar-shell { width: min(100% - 1rem, 1240px); }
    .site-navbar .navbar-collapse { padding-top: .75rem; }
    .site-navbar .nav-link { padding: .75rem !important; }
    .site-hero__inner { padding: 3.5rem 0 3rem; }
}

@media (max-width: 767.98px) {
    .site-navbar { position: relative; padding: .5rem 0; }
    .site-navbar .navbar-brand { font-size: .92rem; }
    .site-hero { min-height: 460px; margin-bottom: 1.25rem; }
    .site-hero::before { background: linear-gradient(180deg, rgba(5, 12, 25, .68), rgba(5, 12, 25, .92)), url('/assets/img/banner.jpeg') center/cover no-repeat; }
    .site-hero h1 { font-size: 2.4rem; }
    .hero-actions > a { width: 100%; }
    .hero-download-hint { justify-content: center; width: 100%; text-align: center; }
    .public-bottom-nav { position: fixed; z-index: 1200; right: .75rem; left: .75rem; bottom: .75rem; display: flex; justify-content: space-around; align-items: center; min-height: 62px; padding: .4rem; border: 1px solid rgba(255,255,255,.7); border-radius: 19px; background: rgba(11,18,32,.94); box-shadow: 0 16px 35px rgba(15,23,42,.28); backdrop-filter: blur(16px); }
.public-bottom-nav a { display: grid; place-items: center; gap: .12rem; min-width: 52px; padding: .28rem .35rem; color: #cbd5e1; text-decoration: none; font-size: .64rem; font-weight: 700; }
.public-bottom-nav a.is-active:not(.is-home) { color: #fff; }
.public-bottom-nav a.is-active:not(.is-home) i { color: var(--ui-cyan); }
    .public-bottom-nav a svg { width: 21px; height: 21px; }
    .public-bottom-nav a.is-home { margin-top: -28px; width: 58px; height: 58px; border: 4px solid #f6f8fc; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-2)); box-shadow: 0 10px 20px rgba(79,70,229,.38); }
    .public-bottom-nav a.is-home span { margin-top: -4px; }
    body { padding-bottom: 5.5rem !important; }
    .site-footer, .fixed-bottom:not(.public-bottom-nav) { display: none; }
    .article-card .article-image { min-height: 195px; max-height: 240px; }
    .contact-map, .contact-map iframe { min-height: 280px; }
    .chat-popup { right: .75rem !important; left: .75rem !important; bottom: 5.9rem !important; width: auto !important; }
    .download-hub { padding: 1.1rem; border-radius: 20px; }
    .download-hub__header { display: block; }
    .download-hub__back { display: inline-flex; margin-top: 1rem; }
}

.footer-logo { width: 30px; height: 30px; object-fit: cover; border-radius: 9px; margin-left: .55rem; vertical-align: middle; }