:root {
  --ink: #f7f3ea;
  --muted: rgba(247, 243, 234, 0.66);
  --faint: rgba(247, 243, 234, 0.42);
  --navy: #07111f;
  --navy-2: #0b1626;
  --panel: rgba(255, 255, 255, 0.055);
  --panel-strong: rgba(255, 255, 255, 0.085);
  --line: rgba(255, 255, 255, 0.12);
  --line-gold: rgba(214, 178, 93, 0.28);
  --gold: #d6b25d;
  --gold-2: #f0d58e;
  --steel: #6ea0c9;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
}

html {
  background: var(--navy);
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: "Manrope", "Jost", sans-serif !important;
  background:
    radial-gradient(circle at 18% 8%, rgba(110, 160, 201, 0.22), transparent 32rem),
    radial-gradient(circle at 88% 20%, rgba(214, 178, 93, 0.14), transparent 30rem),
    linear-gradient(180deg, #07111f 0%, #0b1423 46%, #07111f 100%) !important;
  color: var(--ink) !important;
  letter-spacing: -0.01em;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
  position: relative;
}

main,
section,
footer,
#navbar {
  max-width: 100%;
}

main {
  overflow-x: clip;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.32;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.026) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}

.font-display,
h1,
h2,
h3,
nav .font-display,
footer .font-display {
  font-family: "DM Serif Display", "Cormorant Garamond", serif !important;
  letter-spacing: -0.025em;
}

.gold-text,
.text-gold {
  color: var(--gold-2) !important;
}

.gold-bg,
.submit-btn {
  background: linear-gradient(135deg, #f0d58e 0%, #d6b25d 44%, #a77c2d 100%) !important;
  color: #07111f !important;
  box-shadow: 0 14px 34px rgba(214, 178, 93, 0.22);
}

.gold-bg:hover,
.submit-btn:hover {
  box-shadow: 0 18px 46px rgba(214, 178, 93, 0.3);
}

#navbar {
  min-height: 76px;
  background: rgba(7, 17, 31, 0.82) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  width: 100%;
  max-width: 100vw;
  overflow-x: clip;
}

#navbar .h-16 {
  height: 76px;
}

.nav-link {
  color: rgba(247, 243, 234, 0.72) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.075em !important;
  text-transform: uppercase;
}

.nav-link:hover,
.nav-link.text-gold {
  color: var(--gold-2) !important;
}

.nav-link::after {
  height: 2px !important;
  background: linear-gradient(90deg, var(--gold-2), rgba(214, 178, 93, 0.1)) !important;
}

.shield-logo {
  filter: none;
  image-rendering: auto;
  transform: translateZ(0);
}

nav img.shield-logo {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain;
  border-radius: 0;
}

.footer-logo {
  width: 74px;
  height: 74px;
  object-fit: contain;
  filter: drop-shadow(0 16px 34px rgba(214, 178, 93, 0.2));
  flex: 0 0 auto;
}

.badge {
  padding: 7px 16px !important;
  border-color: var(--line-gold) !important;
  background: rgba(214, 178, 93, 0.095) !important;
  color: var(--gold-2) !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
}

#orb-scroll-wrapper {
  opacity: 0.74;
  filter: saturate(0.86) hue-rotate(8deg);
}

main > section,
main {
  position: relative;
}

#home {
  min-height: 100vh !important;
}

#home > .max-w-7xl {
  padding-top: clamp(8.8rem, 21vh, 15rem) !important;
  padding-bottom: clamp(5rem, 12vh, 9rem) !important;
}

#home h1 {
  max-width: 720px;
  font-size: clamp(3.8rem, 4.35vw, 5.65rem) !important;
  line-height: 1.18 !important;
  font-weight: 400 !important;
}

#home p,
.text-white\/60,
.text-white\/70,
.text-gray-300,
.text-gray-400 {
  color: var(--muted) !important;
}

#home .grid.lg\:grid-cols-2 {
  gap: clamp(3.5rem, 6.5vw, 7.5rem);
}

.hero-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: center;
  max-width: 584px;
  justify-self: end;
}

.hero-stat-card {
  min-height: 156px;
  padding: 30px 26px;
  border: 1px solid rgba(240, 213, 142, 0.18);
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(214, 178, 93, 0.12), transparent 14rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.026));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(16px);
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.hero-stat-card:nth-child(2),
.hero-stat-card:nth-child(4) {
  transform: translateY(32px);
}

.hero-stat-card:hover {
  border-color: rgba(240, 213, 142, 0.32);
  background:
    radial-gradient(circle at 100% 0%, rgba(214, 178, 93, 0.16), transparent 14rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.032));
}

.hero-stat-card--large {
  min-height: 178px;
}

.hero-stat-value {
  color: var(--gold);
  font-family: "DM Serif Display", serif;
  font-size: clamp(2.65rem, 3.2vw, 4.05rem);
  line-height: 0.95;
  letter-spacing: -0.055em;
  margin-bottom: 16px;
}

.hero-stat-card p {
  max-width: 245px;
  margin: 0;
  color: rgba(247, 243, 234, 0.7);
  font-size: 13px;
  line-height: 1.65;
}

.hero-trust-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 760px;
  margin-top: 28px;
}

@media (min-width: 1025px) {
  #home .hero-trust-strip {
    display: none;
  }
}

.hero-trust-strip > div {
  min-height: 104px;
  padding: 17px 18px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
}

.hero-trust-strip strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.25;
  margin-bottom: 8px;
}

.hero-trust-strip span {
  display: block;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.55;
}

.hero-warning {
  max-width: 650px;
  margin-top: 16px;
  padding: 14px 17px;
  border: 1px solid rgba(240, 213, 142, 0.22);
  border-radius: 999px;
  background: rgba(214, 178, 93, 0.075);
  color: rgba(247, 243, 234, 0.68);
  font-size: 13px;
  line-height: 1.45;
}

.hero-warning span {
  color: var(--gold-2);
  font-weight: 800;
}

.hero-dashboard-wrap {
  position: relative;
  z-index: 5;
  width: 100%;
  min-width: 0;
}

.workflow-section {
  position: relative;
  z-index: 15;
  background:
    radial-gradient(circle at 18% 20%, rgba(110, 160, 201, 0.12), transparent 24rem),
    rgba(255, 255, 255, 0.018);
}

.workflow-section:has(.hero-custom-select.open) {
  z-index: 120;
}

.workflow-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.76fr) minmax(420px, 0.88fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.workflow-copy p {
  max-width: 500px;
  margin-top: 22px;
}

.hero-dashboard {
  position: relative;
  z-index: 10;
  overflow: visible;
  padding: 28px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background:
    radial-gradient(circle at 78% 8%, rgba(214, 178, 93, 0.16), transparent 16rem),
    radial-gradient(circle at 12% 18%, rgba(110, 160, 201, 0.2), transparent 16rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.104), rgba(255, 255, 255, 0.036));
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px) saturate(1.08);
}

.hero-dashboard::after {
  content: "";
  position: absolute;
  inset: auto 24px 0 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 213, 142, 0.5), transparent);
}

.hero-dashboard::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
}

.hero-dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.hero-dashboard-header h3 {
  margin-top: 8px;
  color: var(--ink);
  font-family: "Manrope", sans-serif !important;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.18;
}

.hero-status {
  flex: 0 0 auto;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(110, 160, 201, 0.16);
  border: 1px solid rgba(110, 160, 201, 0.32);
  color: #b9dcf8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-progress {
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  margin-bottom: 24px;
}

.hero-progress-bar {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--steel), var(--gold-2));
  box-shadow: 0 0 22px rgba(214, 178, 93, 0.28);
}

.hero-workflow {
  display: grid;
  gap: 12px;
}

.hero-step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  padding: 15px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.095);
  background: rgba(7, 17, 31, 0.34);
}

.hero-step > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(240, 213, 142, 0.28);
  color: var(--gold-2);
  font-size: 12px;
  font-weight: 900;
}

.hero-step.is-complete > span {
  background: rgba(214, 178, 93, 0.14);
}

.hero-step strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
  margin-bottom: 4px;
}

.hero-step small {
  display: block;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.45;
}

.hero-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.hero-dashboard-grid > div {
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.052);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.hero-dashboard-grid strong {
  display: block;
  margin-top: 7px;
  color: var(--ink);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.05em;
}

.hero-incident-picker {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-custom-select {
  position: relative;
  margin-top: 11px;
  z-index: 20;
}

.hero-custom-select.open {
  z-index: 300;
}

.hero-select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035));
  color: rgba(247, 243, 234, 0.86);
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
  padding: 0 16px 0 18px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.hero-select-button svg {
  flex: 0 0 auto;
  color: var(--gold-2);
  transition: transform 0.2s ease;
}

.hero-custom-select.open .hero-select-button svg {
  transform: rotate(180deg);
}

.hero-select-button:focus {
  border-color: rgba(240, 213, 142, 0.48);
  box-shadow: 0 0 0 4px rgba(214, 178, 93, 0.12);
}

.hero-custom-select.open .hero-select-button {
  border-color: rgba(240, 213, 142, 0.48);
  box-shadow: 0 0 0 4px rgba(214, 178, 93, 0.12);
}

.hero-select-menu {
  position: absolute;
  z-index: 320;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(240, 213, 142, 0.22);
  border-radius: 18px;
  background: #07111f;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.72);
  isolation: isolate;
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
}

.hero-custom-select.open .hero-select-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.hero-select-menu button {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 12px 13px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: #07111f;
  color: rgba(247, 243, 234, 0.82);
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.hero-select-menu button:hover {
  color: var(--gold-2);
  border-color: rgba(240, 213, 142, 0.22);
  background: rgba(214, 178, 93, 0.09);
}

.service-card,
.glass-card,
.stat-card {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.088), rgba(255, 255, 255, 0.032)) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px) saturate(1.08) !important;
}

.service-card,
.glass-card {
  border-radius: 20px !important;
}

.service-card:hover,
.glass-card:hover,
.stat-card:hover {
  border-color: var(--line-gold) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.112), rgba(255, 255, 255, 0.042)) !important;
  transform: translateY(-4px);
}

.stat-card {
  position: relative;
  min-height: 190px;
  overflow: hidden;
}

.stat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 78% 20%, rgba(110, 160, 201, 0.2), transparent 10rem),
    linear-gradient(90deg, rgba(214, 178, 93, 0.16), transparent 38%);
  opacity: 0.7;
}

.stat-card > * {
  position: relative;
}

.stat-card .font-display {
  font-family: "Manrope", sans-serif !important;
  letter-spacing: -0.065em;
  line-height: 0.95;
}

.case-card {
  position: relative;
  overflow: hidden;
  min-height: 100%;
}

.case-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 16%, rgba(110, 160, 201, 0.18), transparent 14rem),
    radial-gradient(circle at 86% 12%, rgba(214, 178, 93, 0.14), transparent 12rem);
  opacity: 0.85;
}

.case-card > * {
  position: relative;
}

.case-metric {
  font-family: "Manrope", sans-serif;
  letter-spacing: -0.05em;
}

.case-label {
  color: var(--faint);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.case-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(240, 213, 142, 0.24);
  background: rgba(214, 178, 93, 0.09);
  color: var(--gold-2);
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.process-section {
  position: relative;
}

.process-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 30px;
  background:
    radial-gradient(circle at 12% 18%, rgba(214, 178, 93, 0.12), transparent 22rem),
    radial-gradient(circle at 92% 16%, rgba(110, 160, 201, 0.14), transparent 24rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.032));
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.3);
}

.process-intro {
  position: sticky;
  top: 108px;
}

.process-intro p {
  margin: 22px 0 28px;
  max-width: 520px;
}

.process-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 900;
}

.process-timeline {
  position: relative;
  display: grid;
  gap: 16px;
}

.process-timeline::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 28px;
  width: 1px;
  background: linear-gradient(to bottom, rgba(240, 213, 142, 0.45), rgba(110, 160, 201, 0.18));
}

.process-step {
  position: relative;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 18px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  background: rgba(7, 17, 31, 0.36);
}

.process-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(240, 213, 142, 0.35);
  border-radius: 50%;
  background: rgba(214, 178, 93, 0.09);
  color: var(--gold-2);
  font-weight: 900;
  letter-spacing: -0.04em;
}

.process-step h3 {
  margin: 2px 0 8px;
  font-family: "Manrope", sans-serif !important;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.035em;
}

.process-step p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.divider-gold {
  width: 74px !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--gold-2), rgba(110, 160, 201, 0.16), transparent) !important;
}

a.rounded-xl,
a.rounded-lg,
button.rounded-xl,
.submit-btn {
  border-radius: 999px !important;
}

a.border {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.16) !important;
}

section.border-y,
section.border-t,
footer {
  border-color: rgba(255, 255, 255, 0.09) !important;
}

section.bg-white\/5,
.bg-white\/5 {
  background-color: rgba(255, 255, 255, 0.035) !important;
}

img[src*="fca-logo"],
img[src*="bbb-trust-logo"],
img[src*="m2icons"] {
  filter: grayscale(0.35) contrast(1.04);
}

img[src*="fca-logo"] {
  filter: brightness(0) invert(1) grayscale(0.25) !important;
}

.team-card img {
  filter: saturate(0.84) contrast(1.06);
}

.team-card:hover img {
  filter: saturate(0.96) contrast(1.1);
}

.contact-input {
  font-family: "Manrope", sans-serif !important;
  background: rgba(255, 255, 255, 0.055) !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
}

.contact-input:focus {
  border-color: rgba(240, 213, 142, 0.75) !important;
  box-shadow: 0 0 0 4px rgba(214, 178, 93, 0.13) !important;
}

.submit-btn {
  font-family: "Manrope", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
}

footer {
  background:
    linear-gradient(180deg, rgba(7, 17, 31, 0.62), #050c16),
    radial-gradient(circle at 14% 20%, rgba(214, 178, 93, 0.12), transparent 26rem) !important;
}

footer a:hover {
  color: var(--gold-2) !important;
}

.faq-item {
  border-radius: 18px !important;
}

.faq-trigger {
  transition: color 0.2s ease, background 0.2s ease;
}

.faq-trigger:hover {
  background: rgba(255, 255, 255, 0.035);
}

::selection {
  background: rgba(214, 178, 93, 0.32);
  color: white;
}

@media (max-width: 1024px) {
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw;
  }

  #navbar .h-16 {
    height: 68px;
    position: relative;
    width: 100%;
    max-width: 100vw;
  }

  #navbar .max-w-7xl {
    padding-left: 18px;
    padding-right: 76px;
    width: 100%;
    max-width: 100vw;
    min-width: 0;
  }

  #navbar a[href="index.html"] {
    min-width: 0;
    max-width: calc(100vw - 104px);
    overflow: hidden;
    gap: 8px !important;
  }

  #navbar a[href="index.html"] > div {
    min-width: 0;
    overflow: hidden;
  }

  #navbar a[href="index.html"] .font-display {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  nav img.shield-logo {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 auto;
  }

  .footer-logo {
    width: 62px;
    height: 62px;
  }

  #navbar .hidden.md\:flex.nav-menu {
    display: none !important;
  }

  #hamburger,
  .hamburger.md\:hidden,
  .hamburger {
    display: flex !important;
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    border: 1px solid rgba(240, 213, 142, 0.36);
    border-radius: 16px;
    background:
      radial-gradient(circle at 30% 15%, rgba(240, 213, 142, 0.16), transparent 1.8rem),
      rgba(255, 255, 255, 0.055);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
    z-index: 1000;
    flex: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  #hamburger span,
  .hamburger span {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    background: var(--gold-2) !important;
    border-radius: 999px;
    box-shadow: 0 0 10px rgba(240, 213, 142, 0.18);
    transition: transform 0.2s ease, opacity 0.2s ease, width 0.2s ease;
  }

  #hamburger:hover,
  .hamburger:hover {
    border-color: rgba(240, 213, 142, 0.55);
    background:
      radial-gradient(circle at 30% 15%, rgba(240, 213, 142, 0.2), transparent 1.8rem),
      rgba(255, 255, 255, 0.075);
  }

  #hamburger span:nth-child(2),
  .hamburger span:nth-child(2) {
    width: 15px !important;
    align-self: center;
  }

  .nav-menu {
    top: 68px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    background: rgba(7, 17, 31, 0.98) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.36);
  }
}

@media (max-width: 768px) {
  .fixed.top-0.right-0.w-full.h-full.overflow-hidden {
    max-width: 100vw;
  }

  #orb-scroll-wrapper {
    right: -540px !important;
    width: 760px !important;
    height: 760px !important;
  }

  main > section,
  main > div,
  .max-w-7xl,
  .max-w-5xl,
  .max-w-4xl,
  .max-w-3xl,
  .max-w-2xl {
    max-width: 100% !important;
  }

  #home .grid,
  #home .grid > *,
  .hero-trust-strip,
  .hero-trust-strip > *,
  .hero-dashboard-wrap,
  .hero-dashboard,
  .hero-warning {
    min-width: 0;
    max-width: 100%;
  }

  #home {
    min-height: auto !important;
  }

  #home > .max-w-7xl {
    padding-top: 4.65rem !important;
    padding-bottom: 2.75rem !important;
  }

  #home h1 {
    max-width: 330px;
    font-size: clamp(2.55rem, 11.6vw, 3.65rem) !important;
    line-height: 1.03 !important;
    letter-spacing: -0.045em;
    margin-top: 0;
  }

  #home p {
    max-width: 335px !important;
    margin-top: 1.25rem !important;
    font-size: 0.94rem !important;
    line-height: 1.62 !important;
  }

  #home .grid.lg\:grid-cols-2 {
    gap: 20px;
  }

  #home .badge {
    max-width: max-content;
    padding: 6px 12px !important;
    font-size: 9px !important;
    letter-spacing: 0.105em !important;
    margin-bottom: 18px !important;
  }

  #home .flex.flex-wrap.gap-4.mt-10 {
    margin-top: 1.7rem !important;
    gap: 10px !important;
  }

  #home .flex.flex-wrap.gap-4.mt-10 a {
    min-height: 46px;
    padding: 0 18px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px !important;
  }

  #home .flex.flex-wrap.gap-4.mt-10 a:first-child {
    flex: 1 1 auto;
    min-width: 186px;
  }

  #home .flex.flex-wrap.gap-4.mt-10 a:last-child {
    flex: 0 0 auto;
    min-width: 112px;
  }

  .hero-stats-grid {
    display: none;
  }

  .workflow-layout {
    grid-template-columns: 1fr;
  }

  .service-card,
  .glass-card,
  .stat-card {
    border-radius: 16px !important;
  }

  .hero-trust-strip {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 20px;
  }

  .hero-trust-strip > div {
    min-height: auto;
    padding: 11px 13px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
  }

  .hero-trust-strip strong {
    font-size: 11px;
    margin-bottom: 3px;
  }

  .hero-trust-strip span {
    font-size: 10px;
    line-height: 1.35;
  }

  .hero-warning {
    border-radius: 18px;
  }

  .hero-dashboard {
    padding: 18px;
    border-radius: 22px;
    width: 100%;
    max-width: calc(100vw - 36px);
  }

  .hero-dashboard-header {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
  }

  .hero-dashboard-header h3 {
    font-size: 18px;
  }

  .hero-status {
    align-self: flex-start;
  }

  .hero-step {
    grid-template-columns: 38px 1fr;
    gap: 12px;
    padding: 13px;
    border-radius: 16px;
  }

  .hero-step > span {
    width: 34px;
    height: 34px;
  }

  .hero-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .hero-dashboard-grid > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
  }

  .hero-dashboard-grid strong {
    margin-top: 0;
    font-size: 26px;
  }

  .hero-select-button {
    border-radius: 16px;
  }

  .hero-select-menu {
    position: static;
    display: none;
    margin-top: 8px;
    border-radius: 16px;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .hero-custom-select.open .hero-select-menu {
    display: grid;
    transform: none;
  }

  .process-shell {
    grid-template-columns: 1fr;
    border-radius: 22px;
    padding: 18px;
  }

  .process-intro {
    position: static;
  }

  .process-timeline::before {
    left: 24px;
  }

  .process-step {
    grid-template-columns: 48px 1fr;
    gap: 14px;
    padding: 16px;
  }

  .process-number {
    width: 48px;
    height: 48px;
  }

}

@media (max-width: 380px) {
  #home h1 {
    font-size: 2.8rem !important;
  }

  #home p {
    font-size: 0.9rem !important;
  }

  #home .flex.flex-wrap.gap-4.mt-10 {
    flex-direction: column;
  }

  #home .flex.flex-wrap.gap-4.mt-10 a {
    width: 100%;
  }
}