@font-face { font-family: Nunito; src: url("../fonts/nunito-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Nunito; src: url("../fonts/nunito-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: Nunito; src: url("../fonts/nunito-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: Nunito; src: url("../fonts/nunito-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
:root { --navy: #060c32; --blue: #1c66de; --ink: #1c1915; --yellow: #f9e926; --green: #16c69a; --muted: #5c6578; }
.page-main { color: #243049; }
.section { padding: 54px 0; }
.section h2 { font-size: 32px; margin: 0 0 10px; color: var(--navy); }
.section-heading p { color: #110729; line-height: 1.6; }
.bg-web-blue { background: var(--navy); color: #fff; }
.bg-web-blue h2, .bg-web-blue h3, .bg-web-blue h4, .bg-web-blue p { color: #fff; }

.plan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.plan-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.home-card { position: relative; border-radius: 18px; padding: 32px 18px 22px; color: #fff; overflow: hidden; min-height: 280px; box-shadow: 0 14px 28px rgba(6,12,50,.16); }
.home-card.c1 { background: linear-gradient(160deg, #0a1450 0%, #060c32 70%); }
.home-card.c2 { background: linear-gradient(160deg, #19c46a 0%, #0d8a62 72%); }
.home-card h3, .home-card h4 { margin: 0; font-size: 22px; text-align: center; }
.home-card .start-tag { text-align: center; color: #16c69a; margin: 6px 0 10px; }
.home-card.c2 .start-tag { color: #e8fff4; }
.price-lg { text-align: center; font-size: 40px; font-weight: 800; line-height: 1; margin: 8px 0 16px; }
.price-lg small { font-size: 16px; font-weight: 700; }
.ribbon { position: absolute; top: 16px; right: -42px; transform: rotate(42deg); background: #16c69a; color: #fff; width: 150px; text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .4px; }
.ribbon.warn { background: #f0ad4e; color: #1c1915; }
.rule { border: 0; border-top: 2px solid rgba(255,255,255,.35); margin: 8px 0 16px; }
.btn-yellow, .btn-navy, .btn-line {
  display: block; width: 100%; text-align: center; height: 50px; line-height: 50px;
  border-radius: 999px; font-weight: 700; border: 0; cursor: pointer; font-size: 16px;
}
.btn-yellow { background: var(--yellow); color: #261587; }
.btn-yellow:hover { filter: brightness(.96); }
.btn-navy { background: #143160; color: #fff; }
.btn-navy:hover { background: #1c66de; }
.btn-line { background: transparent; color: inherit; border: 1px solid currentColor; }
.see-features { display: inline-block; margin-top: 10px; background: #28a745; color: #fff; border-radius: 10px; padding: 3px 8px; font-size: 12px; font-weight: 800; cursor: pointer; border: 0; }
.home-card .see-features { display: table; margin: 10px auto 0; }

.mini-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.small-prd { background: linear-gradient(301deg, #02062e, #292893); color: #fff; text-align: center; border-radius: 4px; padding: 28px 10px; min-height: 150px; }
.small-prd a { color: #fff; display: block; }
.small-prd i { font-size: 28px; display: block; margin-bottom: 8px; }
.small-prd-price { font-size: 22px; font-weight: 800; }

.domain-search-form form { display: flex; background: #fff; border-radius: 35px; overflow: hidden; box-shadow: 0 5px 15px -2px rgba(0,0,0,.15); }
.domain-search-form input { flex: 1; border: 0; height: 60px; padding: 0 22px; font-size: 16px; min-width: 0; }
.domain-search-form select { width: 110px; border: 0; border-left: 1px solid #ebebeb; background: #fff; }
.domain-search-form button { width: 180px; border: 0; background: var(--blue); color: #fff; font-weight: 700; cursor: pointer; }
.domain-search-form button:hover { background: #303030; }
.domain-circles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 28px; }
.domaincircle { border: 1px solid rgba(255,255,255,.28); border-radius: 40px; text-align: center; padding: 14px 8px; color: #fff; background: rgba(255,255,255,.06); }
.domaincircle span { display: block; font-weight: 800; font-size: 20px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
.shot { background: #fff; border-radius: 8px; padding: 8px; }
.checks h6 { margin: 8px 0; font-weight: 700; }
.cta-band h2 { text-align: center; margin: 0; padding: 28px 12px; font-size: 28px; }

.feature-list { display: grid; gap: 16px; }
.feature { display: flex; gap: 16px; align-items: flex-start; }
.feature i { width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; flex: 0 0 54px; color: var(--yellow); font-size: 20px; }
.feature h5 { margin: 0 0 4px; }
.feature p { margin: 0; line-height: 1.55; }

.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; }
.faq details { background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid #e4e8f0; box-shadow: 0 8px 18px rgba(6,12,50,.05); }
.faq summary { background: #060c32; color: #fff; padding: 12px 14px; cursor: pointer; font-weight: 700; border-radius: 0; border-left: 4px solid var(--yellow); }
.faq details p { margin: 0; padding: 14px; color: #110729; line-height: 1.55; }
.faq-head { background: #141354; color: #fff; text-align: center; padding: 14px; margin: 0; }

.compare { width: 100%; border-collapse: collapse; background: #fff; color: #243049; }
.compare th, .compare td { border: 1px solid #e4e8f0; padding: 10px 12px; text-align: center; }
.compare th { background: #060c32; color: #fff; }
.compare td:first-child, .compare th:first-child { text-align: left; }
.ok { color: #1e9b4a; } .no { color: #d03a3a; }

.detail-card { background: #fff; border: 0; border-radius: 18px; box-shadow: inset 0 6px 0 var(--blue), 0 14px 32px rgba(6,12,50,.08); padding: 28px 16px 18px; position: relative; overflow: hidden; }
.detail-card h3 { text-align: center; margin: 0; color: var(--navy); }
.detail-card .blurb { text-align: center; color: var(--muted); margin: 4px 0 8px; font-size: 14px; }
.detail-card .price-lg { color: #1c66de; }
.slab { margin: 3px -16px; padding: 6px 8px; color: #fff; font-weight: 700; text-align: center; font-size: 14px; }
.slab.s2 { background: #04441b; } .slab.s3 { background: #102225; }
.feats { margin-top: 12px; }
.feats p { margin: 6px 0; font-size: 14px; }
.feats i { width: 18px; color: #1c66de; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
.toolbar input, .toolbar select, .field input, .field select, .field textarea {
  border: 1px solid #d5dbe6; border-radius: 4px; padding: 10px 12px; font-size: 15px; width: 100%; background: #fff;
}
.toolbar input { min-width: 220px; flex: 1; }
.toolbar select { width: auto; }
.note { background: #f4f7fb; border-left: 4px solid var(--blue); padding: 12px 14px; }

.page-main { padding: 36px 0 64px; background: transparent; }
.prose { max-width: 860px; }
.prose h1, .article h1 { color: var(--navy); letter-spacing: -0.03em; }
.prose h1::after, .article h1::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin-top: 10px;
  background: var(--yellow);
  border-radius: 4px;
}
.prose h2, .article h2 { color: var(--navy); margin-top: 1.4em; font-size: 24px; }
.prose p, .article p, .prose li, .article li { line-height: 1.7; }
.auth-card, .panel {
  max-width: 520px; margin: 0 auto; background: #fff; border: 0; border-radius: 18px; padding: 28px 22px; box-shadow: inset 0 6px 0 var(--yellow), 0 14px 32px rgba(6,12,50,.08);
}
.auth-card h1 { margin-top: 0; color: var(--navy); font-size: 28px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 700; margin-bottom: 6px; }
.pw-wrap { display: flex; gap: 8px; }
.pw-wrap input { flex: 1; }
.pw-wrap button { width: 46px; border: 1px solid #d5dbe6; background: #fff; border-radius: 4px; cursor: pointer; }
.form-error { color: #b42318; background: #fdecec; padding: 8px 10px; border-radius: 4px; margin-bottom: 10px; display: none; }
.form-ok { color: #0f6b3a; background: #e8f8ef; padding: 8px 10px; border-radius: 4px; margin-bottom: 10px; display: none; }
.inline-links { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; margin-top: 8px; }

.contact-mail { margin: 0 0 14px; font-size: 18px; font-weight: 800; }
.contact-mail a { color: var(--navy); }
.contact-mail .fa { color: var(--blue); margin-right: 6px; }
.copy { text-align: center; color: #c5c8d4; padding: 16px 0 20px; border-top: 1px solid rgba(255,255,255,.08); margin-top: 20px; }
.cookiebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: #fff; border-top: 3px solid #e23b3b; padding: 12px 16px 14px; text-align: center; font-size: 13px;
  box-shadow: 0 -4px 16px rgba(0,0,0,.08);
}
.cookiebar[hidden] { display: none; }
.cookiebar p { margin: 0 auto 8px; max-width: 860px; }
.cookie-actions, .cookie-prefs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.cookie-prefs { margin-top: 10px; }
.cookie-prefs label { font-size: 13px; }
.cookiebar button, .cookie-reopen { background: var(--ink); color: #fff; border: 0; border-radius: 3px; padding: 8px 12px; cursor: pointer; font: inherit; }
.cookiebar button.ghost { background: #fff; color: var(--ink); border: 1px solid var(--ink); }
.cookie-reopen { position: fixed; left: 16px; bottom: 16px; z-index: 36; display: none; }
.cookie-reopen:not([hidden]) { display: inline-block; }
.cookiebar:not([hidden]) ~ .chat-launch { bottom: 168px; }
.cookiebar:not([hidden]) ~ #toTop { bottom: 210px; }
#toTop { position: fixed; right: 16px; bottom: 78px; width: 40px; height: 40px; border-radius: 50%; background: var(--blue); color: #fff; border: 0; display: none; cursor: pointer; z-index: 35; }

.modal { position: fixed; inset: 0; background: rgba(6,12,50,.55); display: none; align-items: center; justify-content: center; z-index: 50; padding: 18px; }
.modal.open { display: flex; }
.modal .box { background: #fff; max-width: 640px; width: 100%; border-radius: 8px; padding: 20px; max-height: min(80vh, 720px); overflow: auto; }
.chat-launch, .chat-panel { position: fixed; z-index: 45; }
.chat-launch { left: 16px; bottom: 72px; background: var(--ink); color: #fff; border: 0; border-radius: 24px; padding: 12px 16px; cursor: pointer; font-weight: 800; }
.chat-panel { left: 16px; bottom: 70px; width: min(330px, calc(100% - 24px)); background: #fff; border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,.2); display: none; overflow: hidden; }
.chat-panel.open { display: block; }
.chat-panel header { background: #ee048b; color: #fff; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; }
.chat-panel header button { background: transparent; color: #fff; border: 0; font-size: 18px; cursor: pointer; }
.chat-panel .body { padding: 12px; }
.table-wrap { overflow-x: auto; }
.account-grid { display: grid; grid-template-columns: 240px 1fr; gap: 22px; }
.side-nav { background: #f6f8fc; border-radius: 8px; padding: 12px; }
.side-nav a, .side-nav button { display: block; width: 100%; text-align: left; background: transparent; border: 0; padding: 8px 10px; border-radius: 4px; color: var(--navy); font-weight: 700; cursor: pointer; }
.side-nav a.active, .side-nav a:hover, .side-nav button:hover { background: #fff; }
.orders table { width: 100%; border-collapse: collapse; }
.orders th, .orders td { border-bottom: 1px solid #e6ebf2; text-align: left; padding: 8px; font-size: 14px; }
.tutor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tutor-card { border: 0; border-radius: 16px; padding: 16px; background: #fff; box-shadow: 0 12px 28px rgba(6,12,50,.08); border-top: 4px solid var(--yellow); }
.tutor-card h3 { margin: 0 0 6px; font-size: 18px; }
.result-card { border: 1px solid #e4e8f0; border-radius: 8px; padding: 16px; margin-top: 12px; }

@media (max-width: 1100px) {
  .plan-grid, .plan-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 991px) {
  .hero-copy h1 { font-size: 32px; }
  .split, .faq-grid, .account-grid, .tutor-grid { grid-template-columns: 1fr; }
  .installer-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .plan-grid, .plan-grid.cols-3, .mini-row, .domain-circles, .installer-grid, .hero-points, .footer-grid { grid-template-columns: 1fr 1fr; }
  .domain-search-form form { flex-wrap: wrap; border-radius: 12px; }
  .domain-search-form input, .domain-search-form select, .domain-search-form button { width: 100%; flex: 1 1 100%; height: 48px; }
  .hero-price { font-size: 32px; }
  .top-header-content a span.hide-sm { display: none; }
}
@media (max-width: 420px) {
  .plan-grid, .plan-grid.cols-3, .mini-row, .installer-grid { grid-template-columns: 1fr; }
  .wordmark { font-size: 20px; }
}