/* ==========================================================================
   10gbpsservers.com — site stylesheet
   Palette: green (#00d46a) / black (#040705) / white (#ffffff)
   Author: template for WHMCS / Blesta ordering
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --black: #040705;
  --surface: #0a100c;
  --surface-2: #101a14;
  --line: #1e2c24;
  --green: #00d46a;
  --green-bright: #00e676;
  --green-deep: #009c4e;
  --green-tint: #eafbf2;
  --white: #ffffff;
  --text: #eef5f0;
  --text-dark: #0b1410;
  --muted: #9fb0a6;
  --muted-dark: #5d6b63;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 18px 45px rgba(4, 7, 5, 0.10);
  --shadow-dark: 0 22px 60px rgba(0, 0, 0, 0.55);
  --container: 1200px;
  --header-h: 74px;
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 2. Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-dark);
  background: var(--white);
}
img { max-width: 100%; display: block; height: auto; }
/* <picture> is a candidate container only — it must not generate a box, so the
   responsive <img> inside it lays out exactly as before (hero-bg, split-media). */
picture { display: contents; }
a { color: var(--green-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.18; margin: 0 0 .5em; font-weight: 800; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.35rem); }
h2 { font-size: clamp(1.55rem, 3vw, 2.35rem); }
h3 { font-size: 1.22rem; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 4px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 22px; }
.section { padding: 74px 0; }
.section--tight { padding: 52px 0; }
.section--dark { background: var(--surface); color: var(--text); }
.section--dark h2, .section--dark h3 { color: var(--white); }
.section--dark p { color: #c9d6ce; }
.section--tint { background: var(--green-tint); }
.section-head { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.section-head p { color: var(--muted-dark); margin-bottom: 0; }
.section--dark .section-head p { color: var(--muted); }
.eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--green-deep); margin-bottom: .6rem;
}
.section--dark .eyebrow { color: var(--green-bright); }
.lead { font-size: 1.1rem; }

/* ---------- 3. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 13px 26px; border-radius: 999px; border: 2px solid transparent;
  font-weight: 700; font-size: .97rem; line-height: 1; cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
  text-decoration: none !important; white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--green); color: var(--black); box-shadow: 0 10px 26px rgba(0, 212, 106, .30); }
.btn-primary:hover { background: var(--green-bright); }
.btn-outline { border-color: var(--green); color: var(--green-deep); background: transparent; }
.btn-outline:hover { background: var(--green); color: var(--black); }
.btn-dark { background: var(--black); color: var(--white); }
.btn-dark:hover { background: var(--surface-2); }
.btn-ghost { border-color: rgba(255, 255, 255, .35); color: var(--white); background: transparent; }
.btn-ghost:hover { border-color: var(--green); background: rgba(0, 212, 106, .12); }
.btn-sm { padding: 10px 18px; font-size: .86rem; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row--center { justify-content: center; }

/* ---------- 4. Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(4, 7, 5, .92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 18px; min-height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none !important; flex: 0 0 auto; }
/* Logo is a 512x150 horizontal wordmark (10G SERVERS). It already contains
   the brand name, so .brand--logo-only hides the duplicate text label.
   height drives the size; width follows the 3.41:1 intrinsic ratio. */
.brand-logo { width: auto; height: 34px; max-width: 160px; object-fit: contain; }
.brand-text { color: var(--white); font-size: 1.16rem; font-weight: 700; letter-spacing: -0.01em; }
.brand-text strong { color: var(--green-bright); font-weight: 800; }
/* Hide the text if your own logo already contains the wordmark */
.brand--logo-only .brand-text { display: none; }

.primary-nav { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.primary-nav ul { display: flex; align-items: center; gap: 16px; list-style: none; margin: 0; padding: 0; }
.primary-nav a {
  color: #d7e3db; font-size: .93rem; font-weight: 600; padding: 8px 2px;
  border-bottom: 2px solid transparent; text-decoration: none !important;
}
.primary-nav a:hover { color: var(--white); border-bottom-color: var(--green); }
.primary-nav a.active { color: var(--green-bright); border-bottom-color: var(--green); }
.nav-cta { display: flex; align-items: center; gap: 10px; }

.nav-toggle {
  margin-left: auto; display: none; width: 46px; height: 42px; border: 1px solid var(--line);
  background: var(--surface-2); border-radius: 10px; cursor: pointer; padding: 10px 11px;
  flex-direction: column; justify-content: space-between;
}
.nav-toggle span { display: block; height: 2px; width: 100%; background: var(--green-bright); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

@media (max-width: 1020px) {
  .nav-toggle { display: flex; }
  .primary-nav {
    position: fixed; inset: var(--header-h) 0 auto 0; display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--black); border-bottom: 1px solid var(--line);
    padding: 10px 22px 24px; max-height: calc(100vh - var(--header-h)); overflow-y: auto;
    box-shadow: var(--shadow-dark);
  }
  .primary-nav.open { display: flex; }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav li { border-bottom: 1px solid var(--line); }
  .primary-nav a { display: block; padding: 15px 2px; font-size: 1rem; }
  .nav-cta { margin-top: 18px; }
  .nav-cta .btn { width: 100%; }
}

/* ---------- 5. Hero ---------- */
.hero { position: relative; isolation: isolate; color: var(--text); overflow: hidden; background: var(--black); }
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, rgba(4, 7, 5, .95) 0%, rgba(4, 7, 5, .80) 45%, rgba(0, 60, 30, .62) 100%);
}
/* NOTE: keep the horizontal padding here — these elements also carry .container,
   so a "padding: y 0" shorthand would cancel the container's side padding. */
.hero-inner { padding: 92px 22px 84px; max-width: 764px; }
.hero h1 { color: var(--white); }
.hero h1 span { color: var(--green-bright); }
.hero p { color: #cdd9d1; font-size: 1.12rem; max-width: 620px; }
.hero .btn-row { margin-top: 30px; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--green-bright);
  background: rgba(0, 212, 106, .12); border: 1px solid rgba(0, 212, 106, .35);
  padding: 7px 14px; border-radius: 999px;
}

/* ---------- 6. Stat strip ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.stat { background: var(--surface); padding: 26px 22px; text-align: center; color: var(--text); }
.stat b { display: block; font-size: 1.9rem; color: var(--green-bright); letter-spacing: -0.02em; }
.stat span { font-size: .84rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 7. Page hero (inner pages) ---------- */
.page-hero { position: relative; isolation: isolate; background: var(--black); color: var(--text); overflow: hidden; }
.page-hero .hero-bg img { opacity: .38; }
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(4, 7, 5, .96) 0%, rgba(4, 7, 5, .78) 55%, rgba(0, 70, 35, .60) 100%);
}
.page-hero-inner { padding: 62px 22px 56px; max-width: 904px; }
.page-hero h1 { color: var(--white); margin-bottom: .35em; }
.page-hero p { color: #cdd9d1; margin-bottom: 0; }
.breadcrumb { font-size: .84rem; color: var(--muted); margin-bottom: 14px; }
.breadcrumb a { color: var(--green-bright); }
.breadcrumb span { margin: 0 7px; opacity: .6; }

/* ---------- 8. Pricing tables ---------- */
.table-card {
  background: var(--white); border: 1px solid #e2ebe6; border-radius: var(--radius-lg);
  box-shadow: var(--shadow); overflow: hidden;
}
.table-card + .table-card { margin-top: 34px; }
.table-card-head {
  padding: 22px 26px; border-bottom: 1px solid #e6efea; background: var(--white);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between;
}
.table-card-head h3 { margin: 0; font-size: 1.12rem; }
.table-card-head span { font-size: .88rem; color: var(--muted-dark); }
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.price-table { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 100%; }
.price-table thead th {
  background: var(--black); color: var(--white); text-align: left; font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase; padding: 15px 16px; white-space: nowrap;
}
.price-table tbody td { padding: 15px 16px; border-bottom: 1px solid #eef4f1; vertical-align: middle; }
.price-table tbody tr:nth-child(even) { background: #f8fcfa; }
.price-table tbody tr:hover { background: var(--green-tint); }
.price-table tbody tr:last-child td { border-bottom: 0; }
.cell-plan { font-weight: 700; color: var(--text-dark); min-width: 200px; }
.cell-spec { color: #3f4c45; min-width: 210px; }
.cell-price { font-weight: 800; color: var(--green-deep); white-space: nowrap; font-size: 1.02rem; }
.cell-price small { display: block; font-weight: 600; font-size: .74rem; color: var(--muted-dark); letter-spacing: .03em; }
.cell-order { text-align: right; white-space: nowrap; }
tbody tr.featured-row { background: #f0fff7; }
tbody tr.featured-row .cell-plan::after {
  content: "Popular"; display: inline-block; margin-left: 10px; font-size: .66rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--black);
  background: var(--green); padding: 3px 9px; border-radius: 999px; vertical-align: 2px;
}
.table-note { font-size: .85rem; color: var(--muted-dark); padding: 16px 26px 22px; margin: 0; }
.swipe-hint { display: none; font-size: .8rem; color: var(--muted-dark); padding: 11px 26px 0; }
.footnote { font-size: .88rem; color: var(--muted-dark); }

@media (max-width: 860px) {
  .swipe-hint { display: block; }
  .price-table, .price-table thead, .price-table tbody, .price-table tr, .price-table td { display: block; width: 100%; }
  .price-table thead { display: none; }
  .price-table tbody { padding: 14px; }
  .price-table tbody tr {
    border: 1px solid #e2ebe6; border-radius: var(--radius); margin-bottom: 14px;
    background: var(--white); overflow: hidden;
  }
  .price-table tbody tr:last-child { margin-bottom: 0; }
  .price-table tbody tr:nth-child(even) { background: var(--white); }
  .price-table tbody td {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 11px 16px; border-bottom: 1px dashed #e8f0eb; text-align: right;
  }
  .price-table tbody tr td:last-child { border-bottom: 0; }
  .price-table tbody td::before {
    content: attr(data-label); font-size: .74rem; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted-dark); text-align: left; flex: 0 0 auto;
  }
  .cell-plan { font-size: 1.02rem; }
  .cell-plan::before { display: none; }
  .cell-order { padding-top: 14px !important; }
  .cell-order .btn { width: 100%; }
  tbody tr.featured-row .cell-plan::after { margin-left: auto; }
}

/* ---------- 9. Feature / info cards ---------- */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1020px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--white); border: 1px solid #e4ede8; border-radius: var(--radius-lg);
  padding: 28px 26px; box-shadow: var(--shadow); transition: transform .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-4px); border-color: var(--green); }
.card h3 { margin-bottom: .45em; }
.card p { margin-bottom: 0; color: var(--muted-dark); font-size: .96rem; }
.card-icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--green-tint); color: var(--green-deep); margin-bottom: 18px;
}
.card-icon svg { width: 26px; height: 26px; }
.section--dark .card { background: var(--surface-2); border-color: var(--line); box-shadow: none; }
.section--dark .card p { color: var(--muted); }
.section--dark .card:hover { border-color: var(--green); }

/* split media/content */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 46px; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 30px; } }
.split-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; }
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { position: relative; padding-left: 34px; margin-bottom: 12px; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 18px; height: 10px;
  border-left: 3px solid var(--green); border-bottom: 3px solid var(--green);
  transform: rotate(-45deg); border-radius: 2px;
}
.section--dark .check-list li { color: #cbd8d0; }

/* ---------- 10. Locations ---------- */
.loc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 14px; }
.loc-item {
  display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-radius: var(--radius);
  background: var(--white); border: 1px solid #e4ede8; font-weight: 600; font-size: .95rem;
}
.loc-item .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(0, 212, 106, .18); flex: 0 0 auto; }
.loc-item small { display: block; font-weight: 500; color: var(--muted-dark); font-size: .8rem; }
.section--dark .loc-item { background: var(--surface-2); border-color: var(--line); color: var(--text); }
.section--dark .loc-item small { color: var(--muted); }

/* ---------- 11. FAQ ---------- */
.faq { max-width: 860px; margin: 0 auto; }
.faq details {
  background: var(--white); border: 1px solid #e4ede8; border-radius: var(--radius);
  padding: 6px 20px; margin-bottom: 12px;
}
.faq summary {
  cursor: pointer; font-weight: 700; padding: 14px 0; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--green-deep); font-size: 1.4rem; font-weight: 700; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--muted-dark); margin: 0 0 16px; font-size: .96rem; }
.section--dark .faq details { background: var(--surface-2); border-color: var(--line); }
.section--dark .faq summary { color: var(--white); }
.section--dark .faq details p { color: var(--muted); }

/* ---------- 12. CTA band ---------- */
.cta-band { position: relative; isolation: isolate; background: var(--black); color: var(--text); overflow: hidden; }
.cta-band .hero-bg img { opacity: .3; }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4,7,5,.95), rgba(0,80,40,.72)); }
.cta-inner { padding: 68px 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px; }
.cta-inner h2 { color: var(--white); margin-bottom: .25em; }
.cta-inner p { color: #cdd9d1; margin: 0; max-width: 620px; }

/* ---------- 13. Forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .86rem; font-weight: 700; color: var(--muted-dark); }
.field input, .field select, .field textarea {
  font: inherit; padding: 12px 14px; border: 1px solid #d9e5df; border-radius: 10px;
  background: var(--white); color: var(--text-dark); width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 4px rgba(0, 212, 106, .15); }
.field textarea { min-height: 150px; resize: vertical; }

/* ---------- 14. Footer ---------- */
.site-footer { background: var(--black); color: var(--muted); border-top: 1px solid var(--line); padding: 60px 0 26px; font-size: .93rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr; gap: 30px; }
@media (max-width: 1100px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: var(--white); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1.1em; }
.site-footer a { color: #c3d0c8; text-decoration: none; }
.site-footer a:hover { color: var(--green-bright); }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 9px; }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer-brand img { width: auto; height: 32px; max-width: 150px; object-fit: contain; }
.footer-bottom {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: .85rem;
}

/* ---------- 15. Utilities ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2.5rem; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  font-size: .78rem; font-weight: 700; padding: 6px 12px; border-radius: 999px;
  background: var(--green-tint); color: var(--green-deep); border: 1px solid #cdeedb;
}
.section--dark .pill { background: rgba(0,212,106,.12); color: var(--green-bright); border-color: rgba(0,212,106,.3); }
.alert {
  border-left: 4px solid var(--green); background: var(--green-tint); color: #12402a;
  padding: 16px 20px; border-radius: 10px; font-size: .93rem;
}
.legal h2 { font-size: 1.4rem; margin-top: 2.2rem; }
.legal h3 { font-size: 1.08rem; margin-top: 1.6rem; }
.legal p, .legal li { color: #3f4c45; }
.legal { max-width: 860px; }
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 50; width: 46px; height: 46px;
  border-radius: 50%; border: 0; background: var(--green); color: var(--black);
  font-size: 1.2rem; font-weight: 800; cursor: pointer; display: none; place-items: center;
  box-shadow: 0 12px 30px rgba(0, 212, 106, .4);
}
.to-top.show { display: grid; }

/* ---------- 16. Locations dropdown (nav) ---------- */
.primary-nav li.has-dropdown { position: relative; }
.dropdown {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  display: none; gap: 30px; padding: 22px 26px; min-width: 640px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dark);
}
.dropdown::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
/* Compact dropdown (e.g. the 10Gbps VPS menu) */
.dropdown--sm { min-width: 250px; }
.primary-nav li.has-dropdown:hover .dropdown,
.primary-nav li.has-dropdown:focus-within .dropdown { display: flex; }
.dropdown-col { display: flex; flex-direction: column; gap: 5px; min-width: 168px; }
.dropdown-title {
  font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--green-bright); margin-bottom: 6px;
}
.dropdown a {
  color: #c3d0c8; font-size: .88rem; font-weight: 600; border: 0; padding: 3px 0; white-space: nowrap;
}
.dropdown a:hover, .dropdown a.active { color: var(--white); border: 0; text-decoration: none; }
.caret { font-size: .7em; opacity: .8; }

@media (max-width: 1200px) and (min-width: 1021px) {
  /* Keep the longer product menu on one line on small laptops */
  .primary-nav ul { gap: 11px; }
  .primary-nav a { font-size: .885rem; }
}

@media (max-width: 1020px) {
  /* Inside the mobile drawer every dropdown becomes a collapsible accordion */
  .primary-nav li.has-dropdown > a { display: flex; align-items: center; }
  .primary-nav li.has-dropdown > a .caret {
    margin-left: auto; margin-right: -6px; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; font-size: 1rem; opacity: 1;
    color: var(--green-bright); background: var(--surface-2); border: 1px solid var(--line);
    border-radius: 9px; transition: transform .2s ease, background .2s ease;
  }
  .primary-nav li.has-dropdown.open > a .caret { transform: rotate(180deg); background: rgba(0, 212, 106, .16); border-color: var(--green); }
  .primary-nav li.has-dropdown .dropdown,
  .primary-nav li.has-dropdown:hover .dropdown,
  .primary-nav li.has-dropdown:focus-within .dropdown { display: none; }
  .primary-nav li.has-dropdown.open .dropdown {
    position: static; transform: none; display: flex; flex-direction: column; gap: 16px;
    min-width: 0; padding: 4px 0 16px 14px; background: transparent; border: 0; box-shadow: none;
  }
  .dropdown-col { gap: 2px; }
  .dropdown a { padding: 8px 0; }
}

/* ---------- 17. Location link cards ---------- */
a.loc-item { text-decoration: none; color: var(--text-dark); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
a.loc-item:hover { transform: translateY(-3px); border-color: var(--green); box-shadow: var(--shadow); text-decoration: none; }
a.loc-item::after { content: "\2192"; margin-left: auto; color: var(--green-deep); font-weight: 800; }
.section--dark a.loc-item { color: var(--text); }
.section--dark a.loc-item::after { color: var(--green-bright); }

/* ---------- 18. Location picker (product pages) ---------- */
.loc-picker {
  background: var(--white); border: 1px solid #e2ebe6; border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 22px 26px; margin-bottom: 34px;
}
.loc-picker-head { margin-bottom: 16px; }
.loc-picker-head h3 { margin: 0 0 .25em; font-size: 1.12rem; color: var(--text-dark); }
.loc-picker-head p { margin: 0; color: var(--muted-dark); font-size: .92rem; }
.loc-picker-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.loc-picker-select {
  flex: 1 1 300px; font: inherit; padding: 12px 14px; border: 1px solid #d9e5df;
  border-radius: 10px; background: var(--white); color: var(--text-dark); min-width: 0;
}
.loc-picker-select:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 4px rgba(0, 212, 106, .15); }
.loc-picker-hint { flex: 1 1 100%; font-size: .82rem; color: var(--muted-dark); }

@media print {
  .site-header, .to-top, .cta-band, .site-footer { display: none; }
}

/* ==========================================================================
   10gbpsservers.com — Theme v2
   Richer palette, motion, and the extra section components.
   Appended after the base stylesheet so it can refine earlier rules.
   ========================================================================== */

/* ---------- 19. Extended palette ---------- */
:root {
  --teal: #00e6c3;
  --cyan: #38bdf8;
  --azure: #0ea5e9;
  --amber: #ffb020;
  --amber-bright: #ffcc4d;
  --violet: #a78bfa;
  --pink: #f472b6;
  --surface-3: #16241c;
  --surface-4: #1d3226;
  --grad-brand: linear-gradient(135deg, #00e97a 0%, #00d46a 45%, #00b0e0 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(0, 233, 122, .16), rgba(0, 176, 224, .12));
  --grad-amber: linear-gradient(135deg, #ffcc4d 0%, #ff9800 100%);
  --grad-violet: linear-gradient(135deg, #a78bfa 0%, #38bdf8 100%);
  --grad-dark:
    radial-gradient(1100px 560px at 12% -12%, rgba(0, 212, 106, .20), transparent 62%),
    radial-gradient(900px 520px at 102% 4%, rgba(56, 189, 248, .16), transparent 58%),
    linear-gradient(160deg, #04120c 0%, #061a12 48%, #04202c 100%);
  --shadow-glow: 0 24px 60px rgba(0, 212, 106, .22);
  --shadow-amber: 0 18px 45px rgba(255, 152, 0, .28);
}

/* Any in-page anchor should clear the sticky header */
[id] { scroll-margin-top: 96px; }

/* ---------- 20. Announcement bar ---------- */
.topbar {
  background-color: #04120c;
  background-image: linear-gradient(90deg, rgba(0, 233, 122, .15), rgba(0, 176, 224, .12));
  border-bottom: 1px solid var(--line);
  color: #c3d0c8;
  font-size: .82rem;
}
.topbar-inner { display: flex; align-items: center; gap: 20px; min-height: 40px; flex-wrap: wrap; }
.topbar-item { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; }
.topbar-links { margin-left: auto; display: flex; gap: 16px; }
.topbar a { color: #d7e3db; text-decoration: none; font-weight: 600; }
.topbar a:hover { color: var(--green-bright); }
.pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green-bright);
  box-shadow: 0 0 0 0 rgba(0, 230, 118, .7); animation: pulse 2.2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 230, 118, .7); }
  70% { box-shadow: 0 0 0 10px rgba(0, 230, 118, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 230, 118, 0); }
}
@media (max-width: 1020px) { .topbar { display: none; } }

/* ---------- 21. Reading progress ---------- */
.progress-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 200;
  background: var(--grad-brand); transition: width .12s linear;
}

/* ---------- 22. Scroll reveal ---------- */
html.js .reveal { opacity: 0; transform: translateY(26px); }
.reveal {
  transition: opacity .72s cubic-bezier(.2, .7, .2, 1), transform .72s cubic-bezier(.2, .7, .2, 1);
}
html.js .reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: .07s; } .d2 { transition-delay: .14s; }
.d3 { transition-delay: .21s; } .d4 { transition-delay: .28s; }
.d5 { transition-delay: .35s; } .d6 { transition-delay: .42s; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; }
  .reveal { transition: none; }
}

/* ---------- 23. Section variants ---------- */
.section--mesh {
  position: relative; overflow: hidden;
  background: var(--grad-dark);
  color: var(--text);
}
.section--mesh::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .45;
  background-image: radial-gradient(rgba(0, 212, 106, .16) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(80% 60% at 50% 0%, #000, transparent 75%);
  mask-image: radial-gradient(80% 60% at 50% 0%, #000, transparent 75%);
}
.section--mesh > * { position: relative; z-index: 1; }
.section--mesh h2, .section--mesh h3 { color: var(--white); }
.section--mesh p { color: #c9d6ce; }
.section--warm { background: linear-gradient(180deg, #fff8ec, #fffdf8); }
.section--cyan { background: linear-gradient(180deg, #f2fbff, #fbfeff); }
.section--hairline { border-top: 1px solid var(--line); }

/* ---------- 24. Text & badge helpers ---------- */
.grad-text { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px;
  background: rgba(0, 212, 106, .14); color: var(--green-deep); border: 1px solid rgba(0, 212, 106, .3);
}
.badge--amber { background: rgba(255, 176, 32, .18); color: #8a5a00; border-color: rgba(255, 176, 32, .38); }
.badge--cyan { background: rgba(56, 189, 248, .16); color: #075985; border-color: rgba(56, 189, 248, .38); }
.badge--violet { background: rgba(167, 139, 250, .16); color: #4c1d95; border-color: rgba(167, 139, 250, .38); }
.section--dark .badge, .section--mesh .badge { background: rgba(0, 212, 106, .16); color: var(--green-bright); }
.section--dark .badge--amber, .section--mesh .badge--amber { background: rgba(255, 176, 32, .18); color: var(--amber-bright); }
.section--dark .badge--cyan, .section--mesh .badge--cyan { background: rgba(56, 189, 248, .18); color: #7dd3fc; }
.section--dark .badge--violet, .section--mesh .badge--violet { background: rgba(167, 139, 250, .2); color: #c4b5fd; }
.chip--amber { color: var(--amber-bright); background: rgba(255, 176, 32, .14); border-color: rgba(255, 176, 32, .38); }
.chip--cyan { color: #7dd3fc; background: rgba(56, 189, 248, .14); border-color: rgba(56, 189, 248, .38); }

/* ---------- 25. Buttons ---------- */
.btn-gradient { background: var(--grad-brand); color: #04120c; box-shadow: var(--shadow-glow); }
.btn-gradient:hover { filter: brightness(1.07); background: var(--grad-brand); }
.btn-amber { background: var(--grad-amber); color: #2a1600; box-shadow: var(--shadow-amber); }
.btn-amber:hover { filter: brightness(1.05); }
.btn-glass {
  background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22);
  color: var(--white); backdrop-filter: blur(6px);
}
.btn-glass:hover { background: rgba(255, 255, 255, .16); border-color: var(--green); }

/* ---------- 26. Cards ---------- */
.card { border-radius: var(--radius-lg); }
.card:hover { box-shadow: 0 22px 52px rgba(0, 212, 106, .16); }
.card--flat:hover { transform: none; }
.card--accent { position: relative; overflow: hidden; }
.card--accent::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--grad-brand);
}
.card--warm::before { background: var(--grad-amber); }
.card--violet::before { background: var(--grad-violet); }
.card-icon { border-radius: 16px; }
.card-icon--amber { background: rgba(255, 176, 32, .16); color: #b3701a; }
.card-icon--cyan { background: rgba(56, 189, 248, .16); color: #0369a1; }
.card-icon--violet { background: rgba(167, 139, 250, .18); color: #6d28d9; }
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.bento .card--wide { grid-column: span 2; }
@media (max-width: 1020px) { .bento { grid-template-columns: repeat(2, 1fr); } .bento .card--wide { grid-column: span 2; } }
@media (max-width: 700px) { .bento { grid-template-columns: 1fr; } .bento .card--wide { grid-column: auto; } }

/* ---------- 27. Marquee band ---------- */
.marquee-band { background: var(--black); border-block: 1px solid var(--line); padding: 22px 0; overflow: hidden; }
.marquee {
  display: flex; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex; gap: 56px; align-items: center; padding-right: 56px; flex: 0 0 auto;
  white-space: nowrap; animation: marquee 34s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  display: inline-flex; align-items: center; gap: 10px; color: #9fb0a6; font-weight: 700;
  font-size: .92rem; letter-spacing: .06em; text-transform: uppercase;
}
.marquee-track span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- 28. Trust strip ---------- */
.trust-strip { background: var(--surface); border-block: 1px solid var(--line); }
.trust-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); }
.trust-item { background: var(--surface); padding: 24px 22px; display: flex; gap: 13px; align-items: flex-start; color: var(--text); }
.trust-item svg { width: 22px; height: 22px; color: var(--green-bright); flex: 0 0 auto; margin-top: 3px; }
.trust-item strong { display: block; color: var(--white); font-size: .98rem; margin-bottom: 2px; }
.trust-item span { font-size: .84rem; color: var(--muted); }
@media (max-width: 860px) { .trust-inner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .trust-inner { grid-template-columns: 1fr; } }

/* ---------- 29. Steps / process ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step {
  position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: 30px 26px 28px;
  background: var(--surface-2); border: 1px solid var(--line);
}
.step::after {
  content: ""; position: absolute; right: -50px; bottom: -70px; width: 170px; height: 170px;
  background: radial-gradient(circle, rgba(0, 212, 106, .24), transparent 70%);
}
.step-num {
  display: block; font-size: 2.5rem; font-weight: 900; line-height: 1; margin-bottom: 14px;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.step h3 { color: var(--white); }
.step p { color: var(--muted); margin: 0; font-size: .96rem; }
.steps--light .step { background: var(--white); border-color: #e4ede8; }
.steps--light .step h3 { color: var(--text-dark); }
.steps--light .step p { color: var(--muted-dark); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* ---------- 30. Comparison table ---------- */
.compare-card { background: var(--white); border: 1px solid #e2ebe6; border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.compare-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.compare-table th, .compare-table td { padding: 15px 20px; text-align: left; border-bottom: 1px solid #eef4f1; }
.compare-table thead th { background: var(--black); color: var(--white); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }
.compare-table thead th:nth-child(2) { color: #a7f3d0; }
.compare-table thead th:nth-child(3) { color: var(--green-bright); }
.compare-table tbody td:first-child { font-weight: 700; color: var(--text-dark); }
.compare-table tbody tr:hover { background: var(--green-tint); }
.compare-table .yes { color: var(--green-deep); font-weight: 800; }
.compare-table .no { color: #b4524a; font-weight: 700; }
@media (max-width: 700px) {
  .compare-table th, .compare-table td { padding: 12px 14px; font-size: .88rem; }
}

/* ---------- 31. Testimonials ---------- */
.quote {
  margin: 0; display: flex; flex-direction: column; gap: 16px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 28px 26px;
}
.quote blockquote { margin: 0; color: #e4efe8; font-size: 1.01rem; line-height: 1.62; }
.quote blockquote::before {
  content: "\201C"; display: block; font-family: Georgia, "Times New Roman", serif;
  font-size: 2.8rem; line-height: .55; color: var(--green); margin-bottom: 12px;
}
.quote figcaption { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .86rem; margin-top: auto; }
.quote figcaption strong { display: block; color: var(--white); font-size: .95rem; }
.avatar {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  font-weight: 800; color: #04120c; background: var(--grad-brand);
}
.stars { color: var(--amber); letter-spacing: .18em; font-size: .82rem; }

/* ---------- 32. FAQ tools ---------- */
.faq-tools { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.faq details { transition: border-color .2s ease, background .2s ease; }
.faq details[open] { border-color: var(--green); }

/* ---------- 33. Tabs ---------- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 28px; }
.tab {
  font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; padding: 11px 22px;
  border-radius: 999px; border: 1px solid #d9e5df; background: var(--white); color: var(--muted-dark);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.tab:hover { border-color: var(--green); color: var(--green-deep); }
.tab.is-active { background: var(--black); border-color: var(--black); color: var(--white); }

/* ---------- 34. Region cards (locations) ---------- */
.region-card {
  background: var(--white); border: 1px solid #e4ede8; border-radius: var(--radius-lg);
  padding: 28px 26px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px;
  transition: transform .2s ease, border-color .2s ease;
}
.region-card:hover { transform: translateY(-4px); border-color: var(--green); }
.region-card b { font-size: 1.6rem; color: var(--green-deep); }
.region-card span { color: var(--muted-dark); font-size: .92rem; }
.region-card .pill-row { margin-top: 12px; }

/* ---------- 35. Timeline (about) ---------- */
.timeline { position: relative; max-width: 820px; margin: 0 auto; padding-left: 36px; }
.timeline::before {
  content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, var(--green), rgba(0, 176, 224, .45));
}
.timeline-item { position: relative; padding-bottom: 30px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: ""; position: absolute; left: -36px; top: 4px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--green);
}
.timeline-item .when { display: block; font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--green-bright); margin-bottom: 4px; }
.timeline-item h3 { color: var(--white); margin-bottom: .25em; }
.timeline-item p { color: var(--muted); margin: 0; font-size: .96rem; }

/* ---------- 36. Sign-up / newsletter band ---------- */
.signup {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 30px; align-items: center;
  background: var(--grad-brand-soft); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 34px 32px;
}
.signup h2 { margin-bottom: .3em; color: var(--white); }
.signup p { color: var(--muted); margin-bottom: 0; }
.signup-form { display: flex; gap: 10px; flex-wrap: wrap; }
.signup-form input {
  flex: 1 1 220px; min-width: 0; font: inherit; font-size: .95rem; padding: 13px 18px;
  border-radius: 999px; border: 1px solid var(--line); background: rgba(4, 7, 5, .55); color: var(--white);
}
.signup-form input::placeholder { color: #7d8f85; }
.signup-form input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(0, 212, 106, .16); }
@media (max-width: 860px) { .signup { grid-template-columns: 1fr; } }

/* ---------- 37. Legal layout + TOC ---------- */
.legal-layout { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 46px; align-items: start; }
.legal-nav {
  position: sticky; top: calc(var(--header-h) + 22px);
  background: var(--white); border: 1px solid #e4ede8; border-radius: var(--radius-lg);
  padding: 22px 20px 18px; box-shadow: var(--shadow); font-size: .9rem;
}
.legal-nav strong {
  display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-dark); margin-bottom: 12px;
}
.legal-nav ul { list-style: none; margin: 0; padding: 0; }
.legal-nav a {
  display: block; padding: 7px 10px; border-radius: 8px; color: #3f4c45; font-weight: 600;
  border-left: 3px solid transparent; text-decoration: none;
}
.legal-nav a:hover { background: var(--green-tint); }
.legal-nav a.active { background: var(--green-tint); color: var(--green-deep); border-left-color: var(--green); }
.legal-nav .legal-nav-meta { margin-top: 14px; padding-top: 14px; border-top: 1px solid #eef4f1; font-size: .82rem; color: var(--muted-dark); }
@media (max-width: 960px) { .legal-layout { grid-template-columns: 1fr; gap: 26px; } .legal-nav { position: static; } }
.legal h2 { scroll-margin-top: 96px; }
.legal-lead {
  background: var(--green-tint); border-left: 4px solid var(--green); border-radius: 10px;
  padding: 18px 22px; margin: 0 0 26px; color: #17402a; font-size: .95rem;
}
.legal-lead strong { color: #0f2c1d; }
.policy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px) { .policy-grid { grid-template-columns: 1fr; } }
.policy-card {
  display: block; background: var(--white); border: 1px solid #e4ede8; border-radius: var(--radius-lg);
  padding: 24px 22px; box-shadow: var(--shadow); text-decoration: none; transition: transform .18s ease, border-color .18s ease;
}
.policy-card:hover { transform: translateY(-4px); border-color: var(--green); text-decoration: none; }
.policy-card h3 { color: var(--text-dark); margin-bottom: .3em; }
.policy-card p { color: var(--muted-dark); font-size: .93rem; margin: 0; }

/* ---------- 38. Misc polish ---------- */
.stat b { font-variant-numeric: tabular-nums; }
.eyebrow--amber { color: #b3701a; }
.section--mesh .eyebrow, .section--dark .eyebrow--amber { color: var(--amber-bright); }
.lead-glow { text-shadow: 0 0 32px rgba(0, 212, 106, .35); }
table.price-table tbody tr { transition: background .15s ease; }
.hero .btn-row .btn, .cta-inner .btn { }
.loc-grid--wide { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }

@media print {
  .topbar, .progress-bar, .marquee-band, .trust-strip { display: none; }
}

/* compare-card scroll fix: keep the rounded clip AND allow horizontal scroll on narrow screens */
.compare-card.table-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
@media (max-width: 760px) { .compare-table { min-width: 520px; } }

/* grad-text specificity: beat the .section--dark h2/h3 colour rules */
.grad-text, h1.grad-text, h2.grad-text, h3.grad-text, h4.grad-text,
.section--dark .grad-text, .section--mesh .grad-text,
.section--dark h3.grad-text, .section--mesh h3.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ==========================================================================
   39. Header account button (.btn-client)
   A purpose-built control for the sticky header. Written with higher
   specificity than ".primary-nav a" so the nav link styles cannot leak in
   (that leak previously bleached the text and flattened the padding).
   ========================================================================== */
.nav-cta a.btn-client {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 19px 10px 15px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.89rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none !important;
  color: #f4fbf7;
  background-color: transparent;
  background-image:
    linear-gradient(180deg, #13241c 0%, #0a1511 100%),
    linear-gradient(135deg, rgba(0, 233, 122, .92) 0%, rgba(0, 176, 224, .92) 100%);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 2px 6px rgba(0, 0, 0, .45);
  overflow: hidden;
  transition: color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.nav-cta a.btn-client svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--green-bright);
  transition: color .22s ease;
}
.nav-cta a.btn-client > span { position: relative; z-index: 2; }
/* gradient fill, fades in on hover / keyboard focus */
.nav-cta a.btn-client::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--grad-brand);
  opacity: 0;
  transition: opacity .25s ease;
}
/* light sweep */
.nav-cta a.btn-client::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 34%, rgba(255, 255, 255, .30) 50%, transparent 66%);
  transform: translateX(-135%);
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.nav-cta a.btn-client:hover,
.nav-cta a.btn-client:focus-visible {
  color: #04120c;
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 24px rgba(0, 212, 106, .26);
}
.nav-cta a.btn-client:hover svg,
.nav-cta a.btn-client:focus-visible svg { color: #04120c; }
.nav-cta a.btn-client:hover::before,
.nav-cta a.btn-client:focus-visible::before { opacity: 1; }
.nav-cta a.btn-client:hover::after,
.nav-cta a.btn-client:focus-visible::after { transform: translateX(135%); }
@media (prefers-reduced-motion: reduce) {
  .nav-cta a.btn-client,
  .nav-cta a.btn-client::before,
  .nav-cta a.btn-client::after { transition: none; }
  .nav-cta a.btn-client::after { display: none; }
  .nav-cta a.btn-client:hover { transform: none; }
}
@media (max-width: 1020px) {
  .nav-cta a.btn-client { width: 100%; padding-top: 13px; padding-bottom: 13px; }
}

/* ==========================================================================
   40. Top area — refined "quiet luxury" treatment
   Replaced the green wash / pulsing halo with restraint: near-black glass,
   hairline edges, muted type, small-caps links and a slows breathing dot.
   ========================================================================== */

/* ---- 40a. Announcement strip ---- */
.topbar {
  background-color: #050a07;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0)),
    linear-gradient(90deg, rgba(0, 233, 122, .055), rgba(0, 176, 224, .04) 55%, rgba(255, 255, 255, .012));
  border-bottom: 0;
  color: #8ea298;
  font-size: .775rem;
  font-weight: 500;
  letter-spacing: .015em;
}
.topbar-inner { min-height: 42px; gap: 30px; }
.topbar-item { font-weight: 500; color: #8ea298; }
.topbar-item + .topbar-item { color: #7b8e84; }
.topbar-links { margin-left: auto; display: flex; gap: 22px; align-items: center; }
.topbar a {
  color: #a4b8ad;
  font-size: .715rem;
  font-weight: 600;
  letter-spacing: .125em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .2s ease;
}
.topbar a:hover { color: var(--white); }

/* slow breathing status dot instead of the expanding halo */
.pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-bright);
  box-shadow: 0 0 0 3px rgba(0, 230, 118, .12), 0 0 9px rgba(0, 230, 118, .45);
  animation: topbarBreathe 4.2s ease-in-out infinite;
}
@keyframes topbarBreathe { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; opacity: .9; } }

/* ---- 40b. Header shell ---- */
.site-header {
  background: rgba(6, 10, 8, .82);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 0;
}
/* single hairline edge with a faint brand tint (replaces the solid border) */
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, .05) 0%,
    rgba(0, 233, 122, .34) 14%,
    rgba(0, 176, 224, .26) 58%,
    rgba(255, 255, 255, .05) 100%);
}

/* ---- 40c. Brand lockup ---- */
.brand-text {
  font-size: 1.07rem;
  font-weight: 700;
  letter-spacing: -0.014em;
  border-left: 1px solid rgba(255, 255, 255, .13);
  padding-left: 13px;
  line-height: 1.1;
}
.brand-text strong { font-weight: 800; letter-spacing: -0.014em; }

/* ---- 40d. Nav typography (desktop) ---- */
@media (min-width: 1201px) {
  .primary-nav ul { gap: 19px; }
  .primary-nav ul a { font-size: .895rem; }
}
@media (min-width: 1021px) and (max-width: 1200px) {
  .primary-nav ul { gap: 12px; }
  .primary-nav ul a { font-size: .845rem; }
}
@media (min-width: 1021px) {
  .primary-nav ul a {
    color: #a3b7ab;
    font-weight: 500;
    letter-spacing: .012em;
    padding-bottom: 10px;
    border-bottom: 0;
    background-image: linear-gradient(90deg, var(--green-bright), rgba(0, 176, 224, .9));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1.5px;
    transition: background-size .28s cubic-bezier(.2, .7, .2, 1), color .2s ease;
  }
  .primary-nav ul a:hover { color: var(--white); }
  .primary-nav ul a.active { color: var(--white); }
  .primary-nav ul a:hover,
  .primary-nav ul a.active { background-size: 100% 1.5px; }
}
/* quieter carets */
.caret {
  font-size: .62em;
  opacity: .45;
  font-weight: 400;
  margin-left: 4px;
  transition: opacity .2s ease, transform .2s ease;
}
.primary-nav li.has-dropdown:hover > a .caret,
.primary-nav li.has-dropdown:focus-within > a .caret { opacity: .85; transform: translateY(1px); }
@media (max-width: 1020px) {
  .brand-text { border-left: 0; padding-left: 11px; }
  .brand-logo { height: 30px; }
  .footer-brand img { height: 28px; }
  .caret { font-size: 1rem; opacity: 1; margin-left: auto; }
}

/* ---- 40e. Depth + cohesion pass -------------------------------------------
   The .82-alpha header was compositing over the white body and reading grey.
   Deeper fill keeps it black while staying glassy, and the account button
   ring is softened so it no longer out-shouts the rest of the bar.          */
.site-header {
  background: linear-gradient(180deg, rgba(8, 13, 10, .965) 0%, rgba(5, 9, 7, .93) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
}
.nav-cta a.btn-client {
  background-image:
    linear-gradient(180deg, #12201a 0%, #0a1410 100%),
    linear-gradient(135deg, rgba(0, 233, 122, .62) 0%, rgba(0, 176, 224, .52) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 6px rgba(0, 0, 0, .40);
}
.nav-cta a.btn-client svg { color: #55e39a; }
.nav-cta a.btn-client:hover,
.nav-cta a.btn-client:focus-visible {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 8px 20px rgba(0, 212, 106, .20);
}