/* ═══════════════════════════════════════════════════════════════
   SMARTERSWEB UI / UX SYSTEM — 2026
   Final public experience authority.
   Loaded after the legacy component and responsive layers.
   Purpose: one coherent visual language for navigation, content,
   controls, modals, scheduler, tables and responsive behavior.
═══════════════════════════════════════════════════════════════ */

:root {
  --sw-brand-blue: #2f7df4;
  --sw-brand-cyan: #32c6d7;
  --sw-brand-blue-soft: rgba(47, 125, 244, .14);
  --sw-brand-cyan-soft: rgba(50, 198, 215, .12);
  --sw-shell: rgba(6, 13, 31, .88);
  --sw-surface-1: #091326;
  --sw-surface-2: #0d1930;
  --sw-surface-3: #12213d;
  --sw-stroke: rgba(135, 159, 205, .18);
  --sw-stroke-strong: rgba(135, 159, 205, .30);
  --sw-text: #f5f8ff;
  --sw-text-soft: #c5d1e8;
  --sw-text-muted: #8295b9;
  --sw-radius-sm: 10px;
  --sw-radius-md: 14px;
  --sw-radius-lg: 20px;
  --sw-radius-xl: 26px;
  --sw-control-h: 48px;
  --sw-shadow-float: 0 24px 80px rgba(0, 0, 0, .42);
  --sw-shadow-card: 0 14px 45px rgba(0, 0, 0, .22);
  --sw-ease: cubic-bezier(.2,.8,.2,1);
}

html { scroll-padding-top: 106px; }
body {
  color: var(--sw-text);
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(47,125,244,.36);
  color: #fff;
}

/* ─────────────────────────────────────────────
   GLOBAL RHYTHM / TYPOGRAPHY
───────────────────────────────────────────── */
main { padding-top: 7.25rem; }

.section {
  padding-block: clamp(4rem, 7vw, 6.75rem);
}

.section-header {
  max-width: 780px;
  margin-inline: auto;
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
}

.section-label,
.service-section-label,
.hero-eyebrow,
.eyebrow {
  letter-spacing: .13em;
}

.section-heading,
.service-hero-title,
.hero h1,
.tm-hero-title {
  text-wrap: balance;
  letter-spacing: -.035em;
}

.section-sub,
.hero-sub,
.service-hero-sub,
.card-body,
.tm-hero-sub {
  color: var(--sw-text-soft);
}

/* ─────────────────────────────────────────────
   HEADER / BRAND / PRIMARY NAVIGATION
───────────────────────────────────────────── */
.site-header {
  top: .7rem;
  width: min(calc(100% - 1.5rem), 1280px);
  max-width: 1280px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent),
    rgba(4, 10, 25, .88);
  border: 1px solid rgba(124, 151, 203, .20);
  box-shadow: 0 14px 52px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
}

.site-header::before {
  left: 8%;
  right: 8%;
  background: linear-gradient(90deg, transparent, rgba(47,125,244,.55), rgba(50,198,215,.45), transparent);
  opacity: .85;
}

.site-header::after { border-radius: inherit; }

.site-header.scrolled {
  top: .45rem;
  background: rgba(4, 10, 25, .96);
  border-color: rgba(124,151,203,.27);
  box-shadow: 0 18px 60px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.045);
}

.nav {
  height: 68px;
  padding: 0 .72rem 0 1.1rem;
  gap: 1rem;
}

.logo,
.sw-header-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
  max-width: none;
  padding: .2rem 0;
  opacity: 1;
}

.logo:hover,
.sw-header-brand:hover { opacity: .92; }

.sw-header-logo {
  display: block;
  width: 178px;
  height: 48px;
  object-fit: contain;
  object-position: left center;
}

.nav-links {
  flex: 1 1 auto;
  justify-content: center;
  gap: .15rem;
}

.nav-link,
.nav-dropdown-toggle {
  min-height: 42px;
  padding: .55rem .78rem;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #a9b9d6;
  font-size: .81rem;
  font-weight: 650;
  letter-spacing: -.005em;
  transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
}

.nav-link:hover,
.nav-link.active,
.nav-dropdown.is-open > .nav-dropdown-toggle,
.nav-dropdown:focus-within > .nav-dropdown-toggle {
  color: #fff;
  background: rgba(255,255,255,.045);
  border-color: rgba(132,158,206,.12);
}

.nav-dropdown-toggle .nav-chevron {
  display: inline-flex;
  font-size: .68rem;
  opacity: .68;
  transform-origin: center;
  transition: transform .18s ease;
}

.nav-dropdown.is-open > .nav-dropdown-toggle .nav-chevron,
.nav-dropdown:focus-within > .nav-dropdown-toggle .nav-chevron,
.nav-dropdown:hover > .nav-dropdown-toggle .nav-chevron {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  top: calc(100% + .65rem);
  min-width: 248px;
  padding: .65rem;
  border-radius: 18px;
  background: rgba(6, 13, 31, .985);
  border: 1px solid rgba(130,155,201,.22);
  box-shadow: 0 26px 80px rgba(0,0,0,.58), inset 0 1px rgba(255,255,255,.025);
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown--company .nav-dropdown-menu {
  left: auto;
  right: 0;
  transform: translateY(-6px);
  width: 270px;
}

.nav-dropdown--company:hover .nav-dropdown-menu,
.nav-dropdown--company:focus-within .nav-dropdown-menu,
.nav-dropdown--company.is-open .nav-dropdown-menu {
  transform: translateY(0);
}

.nav-dropdown--services .nav-dropdown-menu {
  width: min(92vw, 650px);
  grid-template-columns: repeat(2, minmax(230px, 1fr));
}

.nav-dropdown--resources .nav-dropdown-menu {
  width: min(92vw, 560px);
  grid-template-columns: repeat(2, minmax(210px, 1fr));
}

.nav-dropdown-item {
  position: relative;
  min-height: 44px;
  padding: .66rem .78rem;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #bdc9df;
  line-height: 1.24;
}

.nav-dropdown-item:hover,
.nav-dropdown-item:focus-visible {
  color: #fff;
  background: linear-gradient(135deg, rgba(47,125,244,.12), rgba(50,198,215,.065));
  border-color: rgba(91,155,247,.18);
  outline: none;
}

.nav-actions {
  gap: .55rem;
  flex: 0 0 auto;
}

.nav-login-link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 .6rem;
  color: #8ea1c5;
  font-size: .75rem;
  font-weight: 650;
  white-space: nowrap;
  transition: color .16s ease;
}
.nav-login-link:hover { color: #fff; }

.nav-cta-cluster {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  overflow: hidden;
  border: 1px solid rgba(101,142,218,.28);
  border-radius: 14px;
  background: rgba(8,18,39,.8);
  box-shadow: inset 0 1px rgba(255,255,255,.03);
}

.btn-nav-ghost,
.btn-nav-primary {
  min-height: 42px;
  padding: 0 .9rem;
  border: 0;
  border-radius: 0;
  text-transform: none;
  letter-spacing: .01em;
  font-size: .75rem;
  line-height: 1;
}

.btn-nav-ghost {
  color: #b9c8e2;
  background: transparent;
  border-right: 1px solid rgba(122,150,201,.18);
}
.btn-nav-ghost:hover {
  color: #fff;
  background: rgba(47,125,244,.10);
  border-color: rgba(122,150,201,.18);
}

.btn-nav-primary {
  color: #fff;
  background: linear-gradient(135deg, #2f7df4, #299dc9 56%, #32c6d7);
  box-shadow: inset 0 1px rgba(255,255,255,.16);
}
.btn-nav-primary:hover {
  color: #fff;
  background: linear-gradient(135deg, #3e89f7, #2da6d2 56%, #3bcbdc);
  border: 0;
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 8px 24px rgba(47,125,244,.22);
}

.btn-nav-primary svg {
  width: 15px;
  height: 15px;
  transition: transform .16s ease;
}
.btn-nav-primary:hover svg { transform: translateX(2px); }

.hamburger {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  border-color: rgba(125,151,198,.22);
  background: rgba(255,255,255,.035);
}
.hamburger:hover { background: rgba(47,125,244,.10); }
.hamburger span { background: #b7c5de; }

/* ─────────────────────────────────────────────
   MOBILE NAVIGATION
───────────────────────────────────────────── */
.mobile-nav {
  top: calc(.7rem + 68px + .55rem);
  width: min(calc(100% - 1rem), 720px);
  max-width: 720px;
  border-radius: 22px;
  background: rgba(5, 12, 29, .99);
  border-color: rgba(118,151,208,.22);
  box-shadow: 0 30px 90px rgba(0,0,0,.64);
}

.mobile-nav-header {
  padding: .9rem 1rem;
}

.mobile-nav-brand {
  min-height: 48px;
}

.mobile-nav-wordmark {
  width: 178px;
  height: 48px;
  object-fit: contain;
  object-position: left center;
}

.mobile-nav-link {
  min-height: 48px;
  padding: .72rem .85rem;
  border-radius: 12px;
  background: rgba(255,255,255,.025);
}

.mobile-nav-ctas {
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
}
.mobile-nav-ctas .btn:last-child { grid-column: 1 / -1; }

/* ─────────────────────────────────────────────
   BUTTONS / INTERACTION CONTROLS
───────────────────────────────────────────── */
.btn,
.button,
button.btn,
a.btn {
  min-height: 46px;
  border-radius: 13px;
  padding-inline: 1.15rem;
  letter-spacing: .025em;
  text-transform: none;
  font-weight: 750;
  transition: transform .18s var(--sw-ease), box-shadow .18s var(--sw-ease), border-color .18s ease, background .18s ease;
}

.btn:hover,
.button:hover { transform: translateY(-1px); }
.btn:active,
.button:active { transform: translateY(0); }

.btn-blue,
.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #2f7df4, #2c98d7 58%, #32c6d7);
  border-color: rgba(103,169,255,.42);
  box-shadow: 0 10px 26px rgba(47,125,244,.18), inset 0 1px rgba(255,255,255,.14);
}
.btn-blue:hover,
.btn-primary:hover {
  box-shadow: 0 14px 34px rgba(47,125,244,.28), inset 0 1px rgba(255,255,255,.18);
}

.btn-green {
  color: #fff;
  background: linear-gradient(135deg, #167d89, #1c9fae 55%, #32c6d7);
  border-color: rgba(82,211,224,.30);
}

.btn-ghost {
  background: rgba(255,255,255,.025);
  border-color: rgba(130,155,201,.22);
  color: #d8e2f4;
}
.btn-ghost:hover {
  background: rgba(47,125,244,.085);
  border-color: rgba(75,143,244,.38);
  color: #fff;
}

/* ─────────────────────────────────────────────
   CARDS / PANELS / PRICING / SOCIAL PROOF
───────────────────────────────────────────── */
.card,
.side-card,
.price-card,
.testimonial-card,
.pricing-panel,
.service-card,
.sw-service-overview-card,
.tm-resource-card,
.tm-report-card,
.sw-calendar-panel {
  border-radius: var(--sw-radius-lg);
  border-color: var(--sw-stroke);
  background:
    linear-gradient(180deg, rgba(255,255,255,.022), transparent 45%),
    rgba(10, 21, 41, .82);
  box-shadow: var(--sw-shadow-card);
}

.card,
.side-card,
.price-card,
.testimonial-card,
.service-card,
.sw-service-overview-card,
.tm-resource-card {
  transition: transform .22s var(--sw-ease), border-color .22s ease, box-shadow .22s var(--sw-ease);
}

.card:hover,
.side-card:hover,
.testimonial-card:hover,
.service-card:hover,
.sw-service-overview-card:hover,
.tm-resource-card:hover {
  transform: translateY(-3px);
  border-color: rgba(85,146,242,.30);
  box-shadow: 0 20px 52px rgba(0,0,0,.30);
}

.badge,
.badge-pill,
.tag,
.chip,
.soon-pill {
  border-radius: 999px;
}

/* ─────────────────────────────────────────────
   FORMS
───────────────────────────────────────────── */
.field,
.form-group { min-width: 0; }

.field-label,
.form-label,
label:not(.checkbox-label):not(.radio-label) {
  color: #dce5f5;
  font-weight: 650;
}

.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea,
.form-input,
.form-select,
.form-textarea,
.modal-box input:not([type="checkbox"]):not([type="radio"]),
.modal-box select,
.modal-box textarea,
.cal-box input:not([type="checkbox"]):not([type="radio"]),
.cal-box select,
.cal-box textarea {
  width: 100%;
  min-height: var(--sw-control-h);
  border-radius: 12px;
  background: #071226;
  border: 1px solid rgba(126,153,203,.25);
  color: #f5f8ff;
  box-shadow: inset 0 1px rgba(255,255,255,.018);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.field textarea,
.form-textarea,
.modal-box textarea,
.cal-box textarea {
  min-height: 118px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.modal-box input:focus,
.modal-box select:focus,
.modal-box textarea:focus,
.cal-box input:focus,
.cal-box select:focus,
.cal-box textarea:focus {
  outline: none;
  border-color: rgba(72,149,250,.72);
  background: #09162d;
  box-shadow: 0 0 0 4px rgba(47,125,244,.12);
}

.field input::placeholder,
.form-input::placeholder,
textarea::placeholder { color: #5f7399; }

input[type="checkbox"],
input[type="radio"] { accent-color: var(--sw-brand-blue); }

.field-row { gap: .9rem; }
.form-nav { gap: .75rem; }

/* ─────────────────────────────────────────────
   MODALS
───────────────────────────────────────────── */
.modal-overlay,
.cal-overlay {
  background: rgba(0, 6, 18, .76);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.modal-box,
.cal-box,
.cal-box-scheduler,
.cal-box-appointment-embed {
  border-radius: 24px;
  border: 1px solid rgba(123,153,208,.25);
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 35%),
    #071126;
  box-shadow: 0 32px 100px rgba(0,0,0,.68), inset 0 1px rgba(255,255,255,.035);
}

.modal-box { padding: clamp(1.2rem, 3vw, 2rem); }

.modal-top,
.cal-header {
  border-bottom-color: rgba(127,153,200,.16);
}

.modal-title,
.cal-title {
  letter-spacing: -.025em;
  text-wrap: balance;
}

.modal-close-btn,
.cal-close {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(126,152,198,.20);
  background: rgba(255,255,255,.035);
  color: #b9c7df;
}
.modal-close-btn:hover,
.cal-close:hover {
  background: rgba(239,68,68,.09);
  border-color: rgba(248,113,113,.26);
  color: #fff;
}

.progress-track,
.step-progress-track {
  background: rgba(255,255,255,.06);
}

/* ─────────────────────────────────────────────
   IN-HOUSE SCHEDULER
───────────────────────────────────────────── */
.cal-box-scheduler {
  width: min(1040px, calc(100vw - 2rem));
  max-height: min(860px, calc(100dvh - 2rem));
  overflow: hidden;
}

.cal-scheduler-body {
  min-height: 0;
  max-height: calc(100dvh - 150px);
  overflow-y: auto;
  padding: 1rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(98,130,186,.35) transparent;
}

.sw-calendar-layout {
  grid-template-columns: minmax(300px, .82fr) minmax(390px, 1.18fr);
  gap: 1rem;
  align-items: start;
}

.sw-calendar-panel {
  padding: clamp(1rem, 2vw, 1.25rem);
  border-radius: 18px;
}

.sw-slot-grid {
  max-height: min(440px, 45dvh);
  padding-right: .25rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(98,130,186,.35) transparent;
}

.sw-slot-btn,
.sw-calendar-slot,
.cal-slot,
[data-calendar-slot] {
  min-height: 44px;
  border-radius: 11px;
  border-color: rgba(125,153,203,.20);
  background: rgba(255,255,255,.026);
}
.sw-slot-btn:hover,
.sw-calendar-slot:hover,
.cal-slot:hover,
[data-calendar-slot]:hover {
  border-color: rgba(71,147,248,.42);
  background: rgba(47,125,244,.10);
}
.sw-slot-btn.is-selected,
.sw-calendar-slot.selected,
.cal-slot.selected,
[data-calendar-slot].selected {
  border-color: rgba(71,147,248,.72);
  background: linear-gradient(135deg, rgba(47,125,244,.22), rgba(50,198,215,.12));
  box-shadow: 0 0 0 3px rgba(47,125,244,.09);
}

/* ─────────────────────────────────────────────
   TABLES / DATA DENSITY
───────────────────────────────────────────── */
.table-wrap,
.sw-responsive-table {
  border-radius: 18px;
  border: 1px solid var(--sw-stroke);
  overflow: auto;
  background: rgba(7,16,34,.7);
}

table { border-collapse: separate; border-spacing: 0; }
th {
  color: #d7e1f2;
  background: #0d1930;
}
td, th { border-color: rgba(126,152,199,.13); }

/* ─────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────── */
.site-footer {
  margin-top: clamp(2.5rem, 5vw, 5rem);
  border-top: 1px solid rgba(126,153,202,.16);
  background:
    radial-gradient(circle at 15% 0%, rgba(47,125,244,.10), transparent 34%),
    linear-gradient(180deg, rgba(7,16,34,.72), rgba(2,8,23,.96));
}

.footer-logo-img {
  width: min(210px, 100%);
  height: auto;
}

.footer-links a,
.footer-contact-list a,
.footer-legal a { transition: color .16s ease; }
.footer-links a:hover,
.footer-contact-list a:hover,
.footer-legal a:hover { color: #fff; }

/* ─────────────────────────────────────────────
   ACCESSIBILITY / STATES
───────────────────────────────────────────── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid #72c7ff;
  outline-offset: 3px;
}

[aria-disabled="true"],
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: .58;
}

/* ─────────────────────────────────────────────
   RESPONSIVE EXPERIENCE
───────────────────────────────────────────── */
@media (max-width: 1210px) {
  .nav-links,
  .nav-actions { display: none !important; }
  .hamburger { display: inline-flex !important; }
  .nav { justify-content: space-between; }
}

@media (max-width: 860px) {
  main { padding-top: 6.4rem; }
  .section { padding-block: clamp(3.3rem, 8vw, 5rem); }

  .cal-scheduler-body {
    max-height: calc(100dvh - 142px);
    overflow-y: auto;
  }

  .sw-calendar-layout { grid-template-columns: 1fr; }
  .sw-slot-grid { max-height: 330px; }
}

@media (max-width: 768px) {
  .site-header {
    top: .5rem;
    width: calc(100% - 1rem);
    border-radius: 18px;
  }
  .site-header.scrolled { top: .35rem; }
  .nav { height: 60px; padding: 0 .65rem 0 .85rem; }
  .sw-header-logo { width: 164px; height: 44px; }
  .mobile-nav {
    top: calc(.5rem + 60px + .45rem);
    width: calc(100% - 1rem);
  }
}

@media (max-width: 540px) {
  main { padding-top: 5.8rem; }
  .sw-header-logo { width: 152px; height: 42px; }
  .mobile-nav-wordmark { width: 164px; height: 46px; }
  .mobile-nav-grid,
  .mobile-nav-grid--primary,
  .mobile-nav-ctas { grid-template-columns: 1fr; }
  .mobile-nav-ctas .btn:last-child { grid-column: auto; }

  .hero-actions,
  .service-hero-actions,
  .cta-band-actions,
  .sw-cta-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .hero-actions .btn,
  .service-hero-actions .btn,
  .cta-band-actions .btn,
  .sw-cta-actions .btn { width: 100%; }

  .modal-overlay,
  .cal-overlay { padding: .35rem; }
  .modal-box,
  .cal-box,
  .cal-box-scheduler,
  .cal-box-appointment-embed {
    width: calc(100vw - .7rem) !important;
    max-height: calc(100dvh - .7rem) !important;
    border-radius: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card:hover,
  .side-card:hover,
  .testimonial-card:hover,
  .service-card:hover,
  .sw-service-overview-card:hover,
  .tm-resource-card:hover,
  .btn:hover,
  .button:hover { transform: none; }
}

/* UI/UX animation contract: keep positioning stable while the mobile menu opens. */
@keyframes swMobileNavCenteredIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes swMobileNavEdgeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mobile-nav {
  animation: swMobileNavCenteredIn .2s var(--sw-ease, ease);
}

@media (max-width: 768px) {
  .mobile-nav {
    animation-name: swMobileNavEdgeIn;
  }
}

/* The fixed site header remains visible while the menu is open, so avoid a duplicate brand row. */
.mobile-nav-header {
  display: none;
}

/* Prevent reveal transforms and edge-to-edge scrollers from expanding the page canvas. */
html {
  overflow-x: clip;
}