:root {--sg-dark: #021727;--sg-blue: #04416d;--sg-blue-light: #0094d9;--sg-orange: #f8931d;--sg-white: #ffffff;--sg-muted: #6f7d8a;--sg-bg: #f5f8fc;--line: #dbe4ed;--shadow: 0 12px 30px rgba(2, 23, 39, 0.12);}
*,*::before,*::after {box-sizing: border-box;}
html,body {margin: 0;padding: 0;}
body {font-family: "Lexend", sans-serif;color: var(--sg-dark);background: var(--sg-bg);line-height: 1.5;}
a {color: inherit;text-decoration: none;}
.container {width: min(1180px, calc(100% - 32px));margin: 0 auto;}
.top-strip {background: var(--sg-dark);color: #d6e9f7;font-size: 13px;text-align: center;padding: 8px 16px;}
.site-header {position: sticky;top: 0;z-index: 90;backdrop-filter: blur(10px);background: rgba(4, 65, 109, 0.94);border-bottom: 1px solid rgba(255, 255, 255, 0.12);}
.header-inner {min-height: 78px;display: grid;grid-template-columns: auto 1fr auto;align-items: center;gap: 22px;}
.brand {display: inline-flex;align-items: center;gap: 10px;}
.brand-logo {width: 42px;height: 42px;border-radius: 10px;display: block;object-fit: cover;border: 2px solid rgba(255, 255, 255, 0.7);box-shadow: 0 6px 14px rgba(2, 23, 39, 0.2);}
.brand-text {display: inline-flex;flex-direction: column;}
.brand-text strong {color: var(--sg-white);font-size: 18px;line-height: 1.1;}
.brand-text small {color: #b6d8ed;font-size: 12px;}
.nav {display: inline-flex;gap: 4px;align-items: center;justify-self: center;}
.nav a {color: #e2eff8;font-size: 15px;padding: 8px 12px;border-radius: 8px;transition: background .2s ease;}
.nav a:hover {background: rgba(255, 255, 255, .14);}
.header-actions {display: inline-flex;gap: 8px;}
.btn {border: 0;cursor: pointer;font-family: inherit;font-weight: 600;border-radius: 10px;padding: 10px 16px;transition: all .2s ease;}
.btn-primary {color: var(--sg-white);background: linear-gradient(135deg, var(--sg-orange), #f2a134);box-shadow: 0 8px 18px rgba(248, 147, 29, .35);}
.btn-primary:hover {transform: translateY(-1px);}
.btn-outline {background: transparent;color: var(--sg-white);border: 1px solid rgba(255, 255, 255, .35) ;}
.btn-outline:hover {background: rgba(255, 255, 255, .12);}
.btn-light {background: #fff;color: var(--sg-blue);}
.btn-primary-light {background: var(--sg-orange);color: #fff;}
.btn.block {width: 100%;}
.menu-toggle {display: none;width: 46px;height: 46px;border: 0;border-radius: 10px;background: rgba(255, 255, 255, .14);align-items: center;justify-content: center;flex-direction: column;gap: 4px;cursor: pointer;}
.menu-toggle span {width: 20px;height: 2px;background: #fff;}
.hero {position: relative;min-height: 680px;display: flex;align-items: center;overflow: hidden;}
.hero-bg,.hero-overlay {position: absolute;inset: 0;}
.hero-bg {background: url("../images/classhud-back-drop-min.jpg") center / cover no-repeat;transform: scale(1.05);}
.hero-overlay {background:linear-gradient(100deg, rgba(2, 23, 39, 0.94) 0%, rgba(2, 23, 39, 0.78) 44%, rgba(2, 23, 39, 0.5) 100%),linear-gradient(0deg, rgba(4, 65, 109, 0.5), rgba(4, 65, 109, 0.5));}
.hero-content {position: relative;z-index: 2;color: #fff;padding: 56px 0;}
.eyebrow {margin: 0 0 10px;text-transform: uppercase;letter-spacing: .11em;font-size: 12px;font-weight: 700;color: #9fd7ff;}
.eyebrow-dark {color: var(--sg-blue-light);}
.hero h1 {margin: 0;font-size: clamp(34px, 5vw, 58px);line-height: 1.05;max-width: 780px;}
.hero p {margin: 14px 0 0;max-width: 700px;color: #d1e7f7;font-size: 18px;}
.search-card {margin-top: 30px;border-radius: 16px;background: #fff;box-shadow: var(--shadow);border: 1px solid rgba(4, 65, 109, .14);padding: 18px;max-width: 980px;}
.search-grid {display: grid;grid-template-columns: 1.2fr 1fr .8fr;gap: 12px;}
.field label {display: block;font-size: 12px;font-weight: 700;color: var(--sg-blue);margin-bottom: 5px;text-transform: uppercase;letter-spacing: .08em;}
.field input,.field select {width: 100%;border-radius: 10px;border: 1px solid #cad6e2;min-height: 46px;padding: 10px 12px;font: inherit;color: var(--sg-dark);background: #fff;}
.field small {display: block;margin-top: 4px;font-size: 12px;color: var(--sg-muted);}
.search-actions {margin-top: 12px;display: flex;gap: 8px;justify-content: flex-end;}
.search-actions .btn-outline {color: var(--sg-blue);border-color: #afc2d4;}
.search-actions .btn-outline:hover {background: #eef4fb;}
.section {padding: 76px 0;}
.section-head {text-align: center;margin-bottom: 30px;}
.section-head h2 {margin: 0;color: var(--sg-dark);font-size: clamp(28px, 4vw, 42px);line-height: 1.1;}
.category-slider-wrap {position: relative;}
.category-slider {display: grid;grid-auto-flow: column;grid-auto-columns: minmax(210px, 1fr);gap: 12px;overflow-x: auto;scrollbar-width: none;scroll-behavior: smooth;padding: 2px 2px 10px;}
.category-slider::-webkit-scrollbar {display: none;}
.category-card {background: #fff;border: 1px solid var(--line);border-radius: 14px;min-height: 128px;display: grid;align-content: center;justify-items: center;text-align: center;padding: 14px;box-shadow: 0 8px 22px rgba(2, 23, 39, .05);}
.category-card .icon {width: 50px;height: 50px;border-radius: 12px;background: #eef6fc;display: inline-flex;align-items: center;justify-content: center;font-size: 24px;margin-bottom: 8px;}
.category-card h3 {margin: 0;font-size: 16px;line-height: 1.3;color: var(--sg-blue);}
.slider-arrow {position: absolute;top: 50%;transform: translateY(-50%);width: 40px;height: 40px;border-radius: 50%;border: 1px solid var(--line);background: #fff;color: var(--sg-blue);font-size: 22px;line-height: 1;z-index: 2;cursor: pointer;}
#categoryPrev {left: -20px;}
#categoryNext {right: -20px;}
.about {background: #fff;}
.about-grid {display: grid;grid-template-columns: 1fr 1.2fr;gap: 24px;align-items: center;}
.about-media img {width: 100%;border-radius: 16px;border: 1px solid var(--line);box-shadow: var(--shadow);}
.about-content h2 {margin: 0;color: var(--sg-dark);font-size: clamp(28px, 3.2vw, 44px);}
.about-content p {margin: 12px 0 0;color: var(--sg-muted);font-size: 17px;}
.about-content ul {margin: 14px 0 0;padding: 0;list-style: none;display: grid;gap: 8px;}
.about-content li {padding: 10px 12px;border-radius: 10px;border: 1px solid var(--line);background: #f7fbff;color: #304255;}
.about-actions {margin-top: 16px;display: flex;flex-wrap: wrap;gap: 8px;}
.about-actions .btn-outline {color: var(--sg-blue);border-color: #9fb8cc;}
.vendors {background: linear-gradient(180deg, #f8fbff, #f2f7fd);}
.vendors-meta {text-align: center;margin-bottom: 16px;}
.vendors-meta p {margin: 0;color: var(--sg-muted);}
.vendors-grid {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 14px;}
.vendor-card {background: #fff;border: 1px solid var(--line);border-radius: 14px;padding: 14px;box-shadow: 0 8px 20px rgba(2, 23, 39, .05);}
.vendor-top {display: flex;align-items: center;gap: 10px;}
.avatar {width: 44px;height: 44px;border-radius: 12px;background: linear-gradient(135deg, var(--sg-blue), var(--sg-blue-light));color: #fff;font-weight: 700;display: inline-flex;align-items: center;justify-content: center;}
.vendor-name {margin: 0;font-size: 18px;color: var(--sg-dark);}
.vendor-category {margin: 2px 0 0;font-size: 13px;color: var(--sg-blue);}
.vendor-meta {margin-top: 10px;display: flex;flex-wrap: wrap;gap: 8px;}
.chip {display: inline-flex;align-items: center;border-radius: 999px;padding: 5px 10px;font-size: 12px;background: #eef5fc;color: #324f69;}
.chip.offer {background: rgba(248, 147, 29, .14);color: #a05c08;}
.vendor-desc {margin: 10px 0 0;color: var(--sg-muted);font-size: 14px;}
.services {background: #fff;}
.services-grid {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 14px;}
.services-grid article {border-radius: 12px;border: 1px solid var(--line);background: #fff;padding: 16px;}
.services-grid h3 {margin: 0;color: var(--sg-blue);font-size: 20px;}
.services-grid p {margin: 8px 0 0;color: var(--sg-muted);}
.cta {padding-top: 30px;}
.cta-box {border-radius: 16px;background: linear-gradient(120deg, var(--sg-blue) 0%, var(--sg-dark) 75%);color: #fff;padding: 26px;display: grid;grid-template-columns: 1fr auto;gap: 12px;align-items: center;}
.cta-box h2 {margin: 0;font-size: clamp(26px, 3vw, 40px);}
.cta-box p {margin: 8px 0 0;color: #d3e6f4;}
.cta-actions {display: inline-flex;gap: 8px;}
.site-footer {margin-top: 60px;background: var(--sg-dark);color: #d5e4ef;padding: 34px 0;}
.footer-grid {display: grid;grid-template-columns: 1.3fr 1fr 1fr;gap: 14px;}
.site-footer h3,.site-footer h4 {color: #fff;margin: 0;}
.site-footer p {margin: 8px 0 0;font-size: 14px;}
.modal-backdrop {position: fixed;inset: 0;background: rgba(2, 23, 39, .58);opacity: 0;visibility: hidden;transition: all .22s ease;z-index: 100;}
.auth-modal {position: fixed;left: 50%;top: 50%;transform: translate(-50%, -46%);width: min(560px, calc(100% - 20px));background: #fff;border-radius: 16px;border: 1px solid var(--line);box-shadow: var(--shadow);opacity: 0;visibility: hidden;transition: all .22s ease;z-index: 101;overflow: hidden;}
.auth-opened .modal-backdrop {opacity: 1;visibility: visible;}
.auth-opened .auth-modal {opacity: 1;visibility: visible;transform: translate(-50%, -50%);}
.modal-close {position: absolute;right: 10px;top: 8px;border: 0;background: transparent;font-size: 30px;color: #7d8b98;cursor: pointer;}
.modal-tabs {display: grid;grid-template-columns: 1fr 1fr;border-bottom: 1px solid var(--line);}
.modal-tabs button {border: 0;background: #f7fbff;min-height: 52px;font-weight: 700;color: #4d6072;cursor: pointer;}
.modal-tabs button.active {color: var(--sg-blue);background: #fff;}
.modal-panel {display: none;padding: 22px 20px 20px;}
.modal-panel.active {display: block;}
.modal-panel h3 {margin: 0 0 14px;color: var(--sg-dark);}
.auth-form {display: grid;gap: 10px;}
.auth-form label {display: grid;gap: 5px;font-size: 14px;color: #34495c;}
.auth-form input,.auth-form select {border-radius: 10px;border: 1px solid #cfd9e4;min-height: 44px;padding: 10px 12px;font: inherit;}
.form-row {display: flex;justify-content: space-between;align-items: center;gap: 8px;}
.checkbox {display: inline-flex;align-items: center;gap: 8px;}
.checkbox input {min-height: auto;}
.hidden {display: none !important;}
@media (max-width: 1100px) {.search-grid {grid-template-columns: 1fr;}
.vendors-grid {grid-template-columns: 1fr 1fr;}
.services-grid {grid-template-columns: 1fr 1fr;}
.about-grid {grid-template-columns: 1fr;}
}
@media (max-width: 860px) {.header-inner {grid-template-columns: auto auto;}
.menu-toggle {display: inline-flex;justify-self: end;}
.nav {position: fixed;top: 78px;left: 12px;right: 12px;background: var(--sg-blue);border-radius: 12px;border: 1px solid rgba(255, 255, 255, .2);box-shadow: var(--shadow);padding: 8px;display: none;flex-direction: column;align-items: stretch;gap: 4px;z-index: 95;}
.nav a {border-radius: 8px;}
.nav.show {display: flex;}
.header-actions {display: none;}
.hero {min-height: 740px;}
.slider-arrow {display: none;}
.vendors-grid,.services-grid,.footer-grid,.cta-box {grid-template-columns: 1fr;}
.cta-actions {flex-wrap: wrap;}
}
@media (max-width: 560px) {.section {padding: 58px 0;}
.hero h1 {font-size: 34px;}
.hero p {font-size: 16px;}
.search-actions {flex-direction: column;}
.search-actions .btn {width: 100%;}
.vendors-grid {grid-template-columns: 1fr;}
}