.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  height: 78px;
  border-bottom: 1px solid transparent;
  background: transparent;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition: height .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}
.site-header.is-scrolled {
  height: 66px;
  border-color: transparent;
  background: rgba(249, 249, 240, .92);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: var(--shadow-raised-sm);
}
.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--navy-950);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: -.04em;
}
.wordmark-mark {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--navy-950);
  font-size: .56rem;
  letter-spacing: -.08em;
}
.header-logo {
  width: 148px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}
.header-logo img {
  width: 148px;
  height: 48px;
  object-fit: contain;
}
.desktop-nav { display: flex; align-items: center; gap: 28px; }
.desktop-nav > a,
.desktop-nav > button:not(.button) {
  padding: 8px 0;
  border: 0;
  color: var(--neu-text);
  background: transparent;
  cursor: pointer;
  font-size: .72rem;
  font-weight: 600;
}
.desktop-nav > a:hover,
.desktop-nav > button:not(.button):hover { color: var(--orange-600); }
.desktop-nav > a[aria-current="page"] { color: var(--orange-600); }
.button {
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: none;
  transition: background .18s ease, opacity .18s ease;
}
.button:hover { opacity: .92; }
.button:active { opacity: .85; }
.button-orange {
  color: var(--white);
  background: var(--orange-500);
}
.button-orange:hover { background: var(--orange-600); opacity: 1; }
.button-navy {
  color: var(--white);
  background: var(--navy-950);
}
.button-navy:hover { background: var(--navy-900); opacity: 1; }
.button-light {
  color: var(--navy-950);
  background: var(--white);
  border: 1px solid var(--border);
}
.button-light:hover { color: var(--orange-600); opacity: 1; }
.button-small { min-height: 38px; padding: 0 14px; font-size: .68rem; }
.menu-toggle {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: none;
  place-items: center;
  background: var(--neu-bg);
  box-shadow: var(--shadow-raised-sm);
  cursor: pointer;
}
.menu-toggle span,
.menu-toggle::before,
.menu-toggle::after {
  width: 16px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--navy-950);
  content: "";
  transition: transform .2s ease, opacity .2s ease;
}
.menu-toggle { gap: 4px; }
.menu-toggle[aria-expanded="true"] span { opacity: 0; }
.menu-toggle[aria-expanded="true"]::before { transform: translateY(5.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"]::after { transform: translateY(-5.5px) rotate(-45deg); }
.mobile-nav {
  position: fixed;
  z-index: 99;
  inset: 66px 0 auto;
  padding: 18px 24px 26px;
  border-bottom: 0;
  display: grid;
  gap: 6px;
  background: var(--neu-bg);
  box-shadow: 0 24px 50px rgba(13, 39, 80, .1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-nav a,
.mobile-nav button {
  min-height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  color: var(--navy-950);
  background: transparent;
  cursor: pointer;
  font-weight: 600;
}
.mobile-nav a:hover,
.mobile-nav button:hover {
  background: var(--neu-bg);
  box-shadow: var(--shadow-inset-sm);
}
.feature-list {
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
  list-style: none;
}
.feature-list li { display: flex; align-items: flex-start; gap: 12px; color: #384257; font-size: .78rem; }
.feature-list i {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--orange-600);
  background: var(--neu-bg);
  box-shadow: var(--shadow-raised-sm);
  font-size: .62rem;
  font-style: normal;
  font-weight: 700;
}
.site-footer {
  position: relative;
  padding: clamp(68px, 7vw, 96px) 0 32px;
  color: #c7cfda;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 107, 24, .14), transparent 28%),
    radial-gradient(circle at 88% 90%, rgba(57, 91, 144, .22), transparent 36%),
    var(--navy-950);
  overflow: hidden;
}
.site-footer::before {
  position: absolute;
  height: 3px;
  inset: 0 0 auto;
  background: linear-gradient(90deg, transparent 5%, var(--orange-500) 34%, #ff9a5f 50%, var(--orange-500) 66%, transparent 95%);
  content: "";
}
.site-footer::after {
  position: absolute;
  width: 300px;
  height: 300px;
  right: -145px;
  bottom: -190px;
  border: 1px solid rgba(255,255,255,.045);
  border-radius: 50%;
  box-shadow: 0 0 0 52px rgba(255,255,255,.018);
  content: "";
  pointer-events: none;
}
.footer-spotlight {
  position: relative;
  z-index: 1;
  margin-bottom: clamp(48px, 6vw, 72px);
  padding: clamp(30px, 4vw, 48px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  align-items: center;
  gap: clamp(34px, 5vw, 72px);
  background:
    radial-gradient(circle at 15% 20%, rgba(255,107,24,.13), transparent 32%),
    linear-gradient(130deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow: 0 30px 80px rgba(0,0,0,.18);
  overflow: hidden;
}
.footer-spotlight::after { position: absolute; width: 250px; height: 250px; right: 20%; bottom: -205px; border: 1px solid rgba(255,255,255,.06); border-radius: 50%; box-shadow: 0 0 0 42px rgba(255,255,255,.012); content: ""; pointer-events: none; }
.footer-spotlight-copy { position: relative; z-index: 1; }
.footer-spotlight-copy > span { margin-bottom: 13px; color: #ff8a47; display: block; font-size: .64rem; font-weight: 700; letter-spacing: .14em; }
.footer-spotlight h2 { max-width: 680px; margin-bottom: 14px; color: #fff; font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.08; }
.footer-spotlight p { max-width: 640px; margin-bottom: 24px; color: #aeb9c9; font-size: .8rem; line-height: 1.7; }
.footer-service-list { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-service-list span { padding: 8px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: #c8d1dd; background: rgba(255,255,255,.04); font-size: .58rem; font-weight: 600; }
.footer-website-link {
  position: relative;
  z-index: 1;
  min-height: 154px;
  padding: 27px;
  border: 0;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(135deg, #ff7b2c, #e9540b);
  box-shadow: 0 18px 38px rgba(235,90,13,.28);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform .22s ease, box-shadow .22s ease;
}
.footer-website-link::before { position: absolute; width: 130px; height: 130px; top: -75px; right: -45px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; box-shadow: 0 0 0 25px rgba(255,255,255,.07); content: ""; }
.footer-website-link small { margin-bottom: 8px; color: rgba(255,255,255,.75); font-size: .56rem; font-weight: 700; letter-spacing: .12em; }
.footer-website-link strong { font-size: clamp(1rem, 1.7vw, 1.25rem); }
.footer-website-link i { position: absolute; top: 20px; right: 20px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.17); display: grid; place-items: center; font-size: 1rem; font-style: normal; transition: transform .22s ease, background .22s ease; }
.footer-website-link:hover { color: #fff; box-shadow: 0 24px 48px rgba(235,90,13,.35); transform: translateY(-4px); }
.footer-website-link:hover i { background: rgba(255,255,255,.26); transform: rotate(8deg); }
.footer-grid {
  position: relative;
  z-index: 1;
  margin-bottom: clamp(42px, 5vw, 60px);
  padding: 0;
  border: 0;
  display: grid;
  grid-template-columns: minmax(280px, .85fr) minmax(390px, 1.15fr);
  align-items: start;
  gap: clamp(54px, 8vw, 108px);
  background: transparent;
  box-shadow: none;
}
.footer-brand { min-height: 100%; padding-right: clamp(34px, 5vw, 68px); border-right: 1px solid rgba(255,255,255,.09); }
.footer-logo { width: 220px; height: 72px; display: block; transition: opacity .2s ease, transform .2s ease; }
.footer-logo:hover { opacity: .9; transform: translateY(-2px); }
.footer-logo img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.footer-brand p { max-width: 330px; margin: 18px 0 22px; color: #aab5c5; font-size: .76rem; line-height: 1.75; }
.footer-brand-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.footer-email {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #dbe2eb;
  background: rgba(255,255,255,.035);
  font-size: .61rem;
  font-weight: 600;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.footer-email span { color: var(--orange-500); transition: transform .2s ease; }
.footer-email:hover { border-color: rgba(255,107,24,.45); background: rgba(255,107,24,.07); transform: translateY(-2px); }
.footer-email:hover span { transform: translateX(3px); }
.footer-contact-row { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.07); display: flex; flex-wrap: wrap; gap: 8px 14px; }
.footer-contact-row a { color: #9da9ba; font-size: .62rem; font-weight: 500; }
.footer-contact-row a:hover { color: #fff; }
.footer-column strong {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ff8540;
  font-size: .61rem;
  letter-spacing: .11em;
}
.footer-column strong::before { width: 13px; height: 1px; background: currentColor; content: ""; }
.footer-column { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 10px; }
.footer-column > strong { margin-bottom: 10px; grid-column: 1 / -1; }
.footer-column a {
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0 15px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  color: #b7c1cf;
  background: rgba(255,255,255,.025);
  font-size: .7rem;
  font-weight: 600;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.footer-column a::after { color: var(--orange-500); opacity: .65; transform: translateX(-2px); transition: opacity .2s ease, transform .2s ease; content: "→"; }
.footer-column a:hover { border-color: rgba(255,107,24,.26); color: #fff; background: rgba(255,107,24,.07); transform: translateY(-2px); }
.footer-column a:hover::after { opacity: 1; transform: translateX(2px); }
.footer-bottom {
  position: relative;
  z-index: 1;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #778397;
  font-size: .64rem;
}
.footer-badges { display: flex; gap: 8px; }
.footer-badges span { padding: 7px 11px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: #9ba7b9; background: rgba(255,255,255,.035); }
.preview-modal {
  position: fixed;
  z-index: 150;
  inset: 0;
  padding: 24px;
  display: grid;
  place-items: center;
  background: rgba(6, 13, 26, .72);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s;
}
.preview-modal.is-open { opacity: 1; visibility: visible; }
.preview-dialog {
  position: relative;
  width: min(820px, 100%);
  max-height: calc(100vh - 48px);
  padding: 18px;
  border-radius: 22px;
  background: var(--neu-bg);
  box-shadow: var(--shadow-raised);
  overflow: auto;
  transform: translateY(10px);
  transition: transform .22s ease;
}
.preview-modal.is-open .preview-dialog { transform: translateY(0); }
.preview-dialog img { width: 100%; max-height: 76vh; object-fit: contain; background: #ddd; border-radius: 12px; }
.modal-close {
  position: sticky;
  z-index: 2;
  top: 0;
  width: 38px;
  height: 38px;
  margin: 0 0 -38px auto;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--navy-950);
  cursor: pointer;
}