/* ═══════════════════════════════════════════════════
   Web Oshkosh — Digital Aurora Design System
   Custom Styles (Tailwind utility overrides + components)
   ═══════════════════════════════════════════════════ */

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4rem; }
body { background: #080d1a; color: #d8e8f5; font-family: "Roboto", sans-serif; overflow-x: hidden; }

/* ── Selection ── */
::selection { background: #00d1ff; color: #003543; }

/* ── Material Icons ── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #090e1c; }
::-webkit-scrollbar-thumb { background: #3c494e; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #00d1ff; }

/* ── Glassmorphism ── */
.glass {
  background: rgba(15, 21, 42, 0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(164, 230, 255, 0.07);
}
.glass-strong {
  background: rgba(8, 13, 30, 0.75);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(164, 230, 255, 0.1);
}

/* ── Text Effects ── */
.text-glow    { text-shadow: 0 0 32px rgba(0,180,220,0.18), 0 0 70px rgba(0,120,180,0.08); }
.gradient-text {
  background: linear-gradient(135deg, #a4e6ff 0%, #00d1ff 50%, #4cd6ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ── Buttons ── */
.btn-primary {
  background: linear-gradient(135deg, #00c2e0 0%, #0077b6 100%);
  color: #fff;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  padding: 1rem 2.5rem;
  border-radius: 9999px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0,150,200,0.25);
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.btn-primary:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 6px 28px rgba(0,150,200,0.4); }
.btn-primary:hover::after { opacity: 1; }
.btn-primary:active { transform: scale(0.97); }

.btn-secondary {
  background: rgba(0,100,160,0.12);
  backdrop-filter: blur(10px);
  color: #90d4f0;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  padding: 1rem 2.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(0,180,220,0.2);
  transition: all 0.3s ease;
}
.btn-secondary:hover {
  background: rgba(0,100,160,0.22);
  border-color: rgba(0,194,224,0.45);
  box-shadow: 0 4px 20px rgba(0,150,200,0.18);
}

/* ── Nav Pill Group (desktop) ── */
.nav-pill-group {
  align-items: center;
  gap: 2px;
  padding: 5px;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.nav-pill-link {
  padding: 7px 18px;
  border-radius: 9999px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  color: #8ea0ad;
  transition: all 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
}
.nav-pill-link:hover {
  color: #dee1f7;
  background: rgba(255,255,255,0.06);
}
.nav-pill-link.active {
  background: rgba(0,209,255,0.12);
  color: #00d1ff;
  box-shadow: 0 0 14px rgba(0,209,255,0.12);
}

/* ── Mobile Menu open state ── */
#mobile-menu:not(.hidden) { display: flex; }

/* ── Nav Links (mobile) ── */
.nav-link {
  position: relative;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #bbc9cf;
  transition: color 0.3s;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: #00d1ff;
  transition: width 0.3s;
  box-shadow: 0 0 8px rgba(0,209,255,0.8);
}
.nav-link:hover { color: #a4e6ff; }
.nav-link:hover::after { width: 100%; }
.nav-link.active { color: #00d1ff; }
.nav-link.active::after { width: 100%; }

/* ── Logo Hover ── */
.logo-icon {
  transition: filter 0.35s ease, transform 0.35s ease;
  filter: drop-shadow(0 0 6px rgba(0,209,255,0.25));
  object-fit: contain;
  overflow: visible;
  padding: 2px 0;
}
.group:hover .logo-icon,
a:hover .logo-icon {
  filter: drop-shadow(0 0 14px rgba(0,209,255,0.6)) drop-shadow(0 0 30px rgba(0,209,255,0.25));
  transform: scale(1.05);
}
.logo-text {
  transition: text-shadow 0.35s ease;
}
.group:hover .logo-text {
  text-shadow: 0 0 18px rgba(0,209,255,0.45), 0 0 40px rgba(0,209,255,0.15);
}

/* ── Login Button ── */
.btn-login {
  background: transparent;
  color: #dee1f7;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  padding: 0.55rem 1.3rem;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.14);
  transition: all 0.25s ease;
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
}
.btn-login:hover {
  border-color: rgba(0,209,255,0.45);
  color: #00d1ff;
  background: rgba(0,209,255,0.06);
  box-shadow: 0 0 16px rgba(0,209,255,0.12);
}

@keyframes float {
  0%,100% { transform: translateY(0px); }
  50%     { transform: translateY(-12px); }
}
@keyframes pulseGlow {
  0%,100% { box-shadow: 0 0 10px rgba(0,209,255,0.18); }
  50%     { box-shadow: 0 0 26px rgba(0,209,255,0.4), 0 0 55px rgba(0,209,255,0.1); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── Why Us Cards ── */
.why-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(0,209,255,0.1);
  border-radius: 1rem;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.why-card:hover {
  border-color: rgba(0,209,255,0.35);
  transform: translateY(-4px);
}
.why-icon {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,209,255,0.08);
  border-radius: 0.75rem;
}

/* ── Service Cards ── */
.service-card {
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(0,209,255,0.08), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.service-card:hover::before { opacity: 1; }
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0,120,180,0.18), 0 0 0 1px rgba(0,180,220,0.18);
}

/* ── Project Cards ── */
.project-card-inner { transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94); }
.project-card:hover .project-card-inner { transform: scale(1.05); }

/* ── Section Scroll Offset (handled by html scroll-padding-top) ── */

/* ── Form Inputs ── */
.form-input {
  background: rgba(47,52,69,0.4);
  border: none;
  border-bottom: 2px solid #3c494e;
  color: #dee1f7;
  padding: 1rem;
  border-radius: 0.5rem 0.5rem 0 0;
  width: 100%;
  transition: border-color 0.3s, background 0.3s;
  outline: none;
  font-family: "Roboto", sans-serif;
}
.form-input::placeholder { color: #859399; }
.form-input:focus { border-bottom-color: #00d1ff; background: rgba(47,52,69,0.6); }

/* ── Noise Texture / Content Gradient Wrapper ── */
.noise {
  position: relative;
  background:
    radial-gradient(ellipse 80% 40% at 20% 20%, rgba(0,170,210,0.07) 0%, transparent 100%),
    radial-gradient(ellipse 80% 40% at 80% 60%, rgba(0,80,160,0.07)  0%, transparent 100%),
    radial-gradient(ellipse 60% 50% at 50% 90%, rgba(0,150,200,0.05) 0%, transparent 100%),
    #080d1a;
}


/* ── Ticker / Marquee ── */
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 30s linear infinite;
}
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ── Cursor Glow ── */
#cursor-glow {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0,150,210,0.07) 0%, rgba(0,80,160,0.03) 50%, transparent 70%);
  position: fixed;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 0;
  transition: opacity 0.3s;
}

/* ══════════════════════════════════════════
   Premium Enhancements — Spacing & Animation
   ══════════════════════════════════════════ */


/* ── Gradient Text ── */
.gradient-text-flow {
  background: linear-gradient(90deg,
    #5bc8e8 0%,
    #00d1ff 45%,
    #0099cc 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Process Step Hover ── */
.process-step {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: default;
}
.process-step:hover { transform: translateY(-10px); }
.process-step:hover .process-num {
  background: rgba(0, 209, 255, 0.18) !important;
  box-shadow:
    0 0 35px rgba(0,209,255,0.35),
    0 0 70px rgba(0,209,255,0.12),
    0 0 0 1px rgba(0,209,255,0.35) !important;
}

/* ── Process Connecting Line Draw ── */
.process-connecting-line {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.35s;
}
.process-connecting-line.drawn { transform: scaleX(1); }

/* ── Contact Form Ambient Glow Pulse ── */
#contact-form-wrap {
  animation: formGlow 4s ease-in-out infinite;
}
@keyframes formGlow {
  0%, 100% {
    box-shadow: 0 0 60px rgba(0,120,180,0.1), 0 0 0 1px rgba(0,180,220,0.1);
  }
  50% {
    box-shadow: 0 0 90px rgba(0,120,180,0.2), 0 0 0 1px rgba(0,194,224,0.2);
  }
}

/* ── Hero Canvas ── */
#hero-frame {
  will-change: opacity;
  transform: translateZ(0);
  display: block;
}

/* ── Hero Content ── */
#hero-content-wrap {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}
#hero-content-wrap.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Hero Falling Lines Pattern ── */
#hero-falling-pattern {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
#hero-falling-lines {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(4px 100px at 0px 235px, rgba(0,209,255,0.25), transparent),
    radial-gradient(4px 100px at 300px 235px, rgba(0,209,255,0.25), transparent),
    radial-gradient(1.5px 1.5px at 150px 117.5px, rgba(0,209,255,0.25) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 252px, rgba(0,209,255,0.25), transparent),
    radial-gradient(4px 100px at 300px 252px, rgba(0,209,255,0.25), transparent),
    radial-gradient(1.5px 1.5px at 150px 126px, rgba(0,209,255,0.25) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 150px, rgba(0,209,255,0.25), transparent),
    radial-gradient(4px 100px at 300px 150px, rgba(0,209,255,0.25), transparent),
    radial-gradient(1.5px 1.5px at 150px 75px, rgba(0,209,255,0.25) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 253px, rgba(0,209,255,0.25), transparent),
    radial-gradient(4px 100px at 300px 253px, rgba(0,209,255,0.25), transparent),
    radial-gradient(1.5px 1.5px at 150px 126.5px, rgba(0,209,255,0.25) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 204px, rgba(0,209,255,0.25), transparent),
    radial-gradient(4px 100px at 300px 204px, rgba(0,209,255,0.25), transparent),
    radial-gradient(1.5px 1.5px at 150px 102px, rgba(0,209,255,0.25) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 134px, rgba(0,209,255,0.25), transparent),
    radial-gradient(4px 100px at 300px 134px, rgba(0,209,255,0.25), transparent),
    radial-gradient(1.5px 1.5px at 150px 67px, rgba(0,209,255,0.25) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 179px, rgba(0,209,255,0.25), transparent),
    radial-gradient(4px 100px at 300px 179px, rgba(0,209,255,0.25), transparent),
    radial-gradient(1.5px 1.5px at 150px 89.5px, rgba(0,209,255,0.25) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 299px, rgba(0,209,255,0.25), transparent),
    radial-gradient(4px 100px at 300px 299px, rgba(0,209,255,0.25), transparent),
    radial-gradient(1.5px 1.5px at 150px 149.5px, rgba(0,209,255,0.25) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 215px, rgba(0,209,255,0.25), transparent),
    radial-gradient(4px 100px at 300px 215px, rgba(0,209,255,0.25), transparent),
    radial-gradient(1.5px 1.5px at 150px 107.5px, rgba(0,209,255,0.25) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 281px, rgba(0,209,255,0.25), transparent),
    radial-gradient(4px 100px at 300px 281px, rgba(0,209,255,0.25), transparent),
    radial-gradient(1.5px 1.5px at 150px 140.5px, rgba(0,209,255,0.25) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 158px, rgba(0,209,255,0.25), transparent),
    radial-gradient(4px 100px at 300px 158px, rgba(0,209,255,0.25), transparent),
    radial-gradient(1.5px 1.5px at 150px 79px, rgba(0,209,255,0.25) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 210px, rgba(0,209,255,0.25), transparent),
    radial-gradient(4px 100px at 300px 210px, rgba(0,209,255,0.25), transparent),
    radial-gradient(1.5px 1.5px at 150px 105px, rgba(0,209,255,0.25) 100%, transparent 150%);
  background-size:
    300px 235px, 300px 235px, 300px 235px,
    300px 252px, 300px 252px, 300px 252px,
    300px 150px, 300px 150px, 300px 150px,
    300px 253px, 300px 253px, 300px 253px,
    300px 204px, 300px 204px, 300px 204px,
    300px 134px, 300px 134px, 300px 134px,
    300px 179px, 300px 179px, 300px 179px,
    300px 299px, 300px 299px, 300px 299px,
    300px 215px, 300px 215px, 300px 215px,
    300px 281px, 300px 281px, 300px 281px,
    300px 158px, 300px 158px, 300px 158px,
    300px 210px, 300px 210px, 300px 210px;
  animation: fallingLines 150s linear infinite;
}
@keyframes fallingLines {
  from {
    background-position:
      0px 220px, 3px 220px, 151.5px 337.5px,
      25px 24px, 28px 24px, 176.5px 150px,
      50px 16px, 53px 16px, 201.5px 91px,
      75px 224px, 78px 224px, 226.5px 230.5px,
      100px 19px, 103px 19px, 251.5px 121px,
      125px 120px, 128px 120px, 276.5px 187px,
      150px 31px, 153px 31px, 301.5px 120.5px,
      175px 235px, 178px 235px, 326.5px 384.5px,
      200px 121px, 203px 121px, 351.5px 228.5px,
      225px 224px, 228px 224px, 376.5px 364.5px,
      250px 26px, 253px 26px, 401.5px 105px,
      275px 75px, 278px 75px, 426.5px 180px;
  }
  to {
    background-position:
      0px 6800px, 3px 6800px, 151.5px 6917.5px,
      25px 13632px, 28px 13632px, 176.5px 13758px,
      50px 5416px, 53px 5416px, 201.5px 5491px,
      75px 17175px, 78px 17175px, 226.5px 17301.5px,
      100px 5119px, 103px 5119px, 251.5px 5221px,
      125px 8428px, 128px 8428px, 276.5px 8495px,
      150px 9876px, 153px 9876px, 301.5px 9965.5px,
      175px 13391px, 178px 13391px, 326.5px 13540.5px,
      200px 14741px, 203px 14741px, 351.5px 14848.5px,
      225px 18770px, 228px 18770px, 376.5px 18910.5px,
      250px 5082px, 253px 5082px, 401.5px 5161px,
      275px 6375px, 278px 6375px, 426.5px 6480px;
  }
}

/* ── Services Inline Pricing Panel ── */
.services-pricing-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.35s ease-out, opacity 0.2s ease-out, margin 0.35s ease-out;
  margin-top: 0;
}
.services-pricing-panel.open {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 4rem;
}
.services-pricing-inner {
  overflow: hidden;
}

/* ── Pricing Cards ── */
.pricing-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 1.5rem;
  padding: 2.5rem 2.5rem 3rem;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.pricing-card:hover {
  border-color: rgba(0,180,220,0.22);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,120,180,0.12);
}
.pricing-card.featured {
  border-color: rgba(0,180,220,0.25);
  box-shadow: 0 0 30px rgba(0,120,180,0.08);
}

/* ── Accordion ── */
.tier-compare-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  color: rgba(255,255,255,0.35);
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0;
  cursor: pointer;
  transition: color 0.2s ease;
}
.tier-compare-toggle:hover {
  color: rgba(255,255,255,0.65);
}
.tier-compare-chevron {
  font-size: 0.9rem;
  transition: transform 0.3s ease;
}
.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.4s ease, opacity 0.3s ease, padding 0.4s ease;
  opacity: 0;
  padding-top: 0;
}
.accordion-content > div {
  overflow: hidden;
}
.accordion-content.open {
  grid-template-rows: 1fr;
  opacity: 1;
  padding-top: 1.25rem;
}

/* Force equal height on all open pricing accordions so buttons stay aligned */
.pricing-card .accordion-content.open > div {
  min-height: 14rem;
}

/* ── Tier Feature List (inside accordion) ── */
.tier-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.tier-feature {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.4;
}
.tier-feature .material-symbols-outlined {
  font-size: 1rem;
  flex-shrink: 0;
  font-variation-settings: 'FILL' 1, 'wght' 500;
}
.tier-feature.included {
  color: rgba(255,255,255,0.8);
}
.tier-feature.included .material-symbols-outlined {
  color: #00c2e0;
}
.tier-feature.excluded {
  color: rgba(255,255,255,0.28);
}
.tier-feature.excluded .material-symbols-outlined {
  color: rgba(255,255,255,0.18);
}
.tier-feature.note {
  color: rgba(255,255,255,0.35);
  font-style: italic;
}
.tier-feature.note .material-symbols-outlined {
  color: rgba(255,255,255,0.22);
}

/* ── Accordion (standalone row — Definition of a Change) ── */
.accordion-standalone {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 1rem;
  overflow: hidden;
  transition: border-color 0.3s ease;
}
.accordion-standalone:hover {
  border-color: rgba(0,180,220,0.2);
}
.accordion-standalone .accordion-content.open {
  padding-top: 0;
  padding-bottom: 1.5rem;
}
.accordion-standalone-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  background: none;
  border: none;
  color: #d8e8f5;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: color 0.2s;
}
.accordion-standalone-btn:hover { color: #00c2e0; }
.accordion-standalone-btn .chevron {
  transition: transform 0.3s ease;
  color: #00c2e0;
}
.accordion-standalone-btn.open .chevron {
  transform: rotate(180deg);
}

/* ── Client Portal Icon ── */
.portal-icon {
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,209,255,0.08);
  border: 1px solid rgba(0,209,255,0.15);
  border-radius: 0.875rem;
}

/* ── Client Portal Card ── */
.portal-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(0,180,220,0.12);
  border-radius: 1.5rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.portal-card:hover {
  border-color: rgba(0,180,220,0.3);
  box-shadow: 0 0 40px rgba(0,120,180,0.1);
}


/* ══════════════════════════════════════════
   New Sections
   ══════════════════════════════════════════ */

/* ── Section dividers ── */
.section-divider {
  height: 1px;
  background: rgba(255,255,255,0.05);
}

/* ── Dot grid background ── */
.dot-grid {
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* ── Card base (shared by why, testimonial, faq) ── */
.content-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 1.25rem;
  transition: border-color 0.3s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.content-card:hover {
  border-color: rgba(0,180,220,0.22);
  transform: translateY(-5px);
}


/* ── FAQ accordion ── */
.faq-item {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.faq-item summary {
  cursor: pointer;
  padding: 1.4rem 0;
  font-weight: 700;
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  color: #d8e8f5;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  transition: color 0.2s;
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: #00c2e0; }
.faq-item[open] summary { color: #00c2e0; }
.faq-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(0,180,220,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
  color: #00c2e0;
  transition: background 0.2s;
}
.faq-item[open] .faq-icon { background: rgba(0,180,220,0.12); }
.faq-answer {
  padding-bottom: 1.4rem;
  color: #9ab0be;
  line-height: 1.75;
  font-size: 0.9rem;
}