/* ============================================================
   SwiftSend Page-Specific Styles
   ============================================================ */

/* ---- Hero (homepage + service pages) ---- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--bg-deep);
  padding-block: var(--s-7) var(--s-7);
  isolation: isolate;
}
@media (min-width: 720px) { .hero { padding-block: var(--s-8) var(--s-8); } }
@media (min-width: 1024px) { .hero { padding-block: var(--s-8) var(--s-9); } }

.hero::before, .hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  z-index: -1;
  pointer-events: none;
}
.hero::before {
  top: -200px; left: -100px;
  width: 500px; height: 500px;
  background: rgba(124, 58, 237, 0.25);
}
.hero::after {
  bottom: -200px; right: -100px;
  width: 600px; height: 600px;
  background: rgba(0, 229, 255, 0.18);
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  align-items: center;
}
@media (min-width: 900px) {
  .hero-inner { grid-template-columns: 1.1fr 1fr; gap: var(--s-8); }
}

.hero-text { max-width: 640px; }
.hero h1 {
  background: linear-gradient(120deg, #ffffff 0%, var(--cyan) 60%, #a78bfa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-bottom: var(--s-5);
}
.hero p.lede {
  font-size: clamp(1.125rem, 0.5vw + 1rem, 1.375rem);
  color: var(--text-muted);
  max-width: 56ch;
  margin-bottom: var(--s-6);
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.hero-ctas .btn { flex: 1 1 auto; }
@media (min-width: 480px) {
  .hero-ctas .btn { flex: 0 0 auto; }
}

.hero-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 360px;
  margin-top: var(--s-6);
}
.hero-visual img {
  max-width: 100%;
  width: clamp(300px, 92vw, 520px);
  filter: drop-shadow(0 0 80px rgba(0, 229, 255, 0.35));
  will-change: transform;
}
@media (min-width: 480px) {
  .hero-visual { min-height: 400px; }
  .hero-visual img { width: clamp(340px, 88vw, 560px); }
}
@media (min-width: 720px) {
  .hero-visual { min-height: 380px; margin-top: 0; }
  .hero-visual img { width: clamp(280px, 50vw, 520px); }
}
@media (min-width: 1024px) {
  .hero-visual { min-height: 460px; }
  .hero-visual img { width: clamp(340px, 48vw, 640px); }
}

/* ---- Generic section helpers ---- */

.section-header {
  margin-bottom: var(--s-7);
  max-width: 820px;
}
.section-header.center { margin-inline: auto; text-align: center; }
.section-header p {
  font-size: clamp(1.0625rem, 0.25vw + 1rem, 1.25rem);
  color: var(--text-muted);
  max-width: 60ch;
}
.section-light .section-header p, .section-alt .section-header p {
  color: var(--text-dark-muted);
}
.section-header.center p { margin-inline: auto; }

/* ---- Service-card row (4 cards) ---- */

.service-cards { margin-top: var(--s-5); }
.service-cards .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.service-cards h3 { font-size: 1.25rem; }
.service-cards p { font-size: 0.9375rem; margin-bottom: var(--s-4); }
.service-cards .card-link {
  margin-top: auto;
  font-size: 0.875rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.service-cards .card-link::after {
  content: '→';
  transition: transform var(--t-base) var(--ease);
}
.service-cards .card-link:hover::after { transform: translateX(3px); }

/* ---- Three-up "umbrella" row ---- */

.umbrella-row { margin-top: var(--s-7); }
.umbrella-row .card-light { background: transparent; box-shadow: none; border-color: transparent; padding-inline: 0; }
.umbrella-row .card-light:hover { transform: none; box-shadow: none; }
.umbrella-row .card-icon { width: 56px; height: 56px; }
.umbrella-row h3 { font-size: 1.375rem; }
.umbrella-row p { color: var(--text-dark-muted); font-size: 1rem; }

/* ---- Corridor tiles ---- */

.corridors {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  margin-top: var(--s-6);
}
@media (min-width: 640px) { .corridors { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .corridors { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .corridors { grid-template-columns: repeat(5, 1fr); } }

.corridor-tile {
  padding: var(--s-5);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: all var(--t-base) var(--ease);
  min-height: 140px;
}
.corridor-tile:hover {
  border-color: rgba(0, 229, 255, 0.4);
  background: rgba(0, 229, 255, 0.04);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  color: inherit;
}
.corridor-flag {
  font-size: 1.5rem;
  letter-spacing: 0.05em;
}
.corridor-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--text-dark);
}
.corridor-desc {
  font-size: 0.875rem;
  color: var(--text-dark-muted);
  margin: 0;
}

.corridors-footer { margin-top: var(--s-5); }
.corridors-footer a { font-weight: 600; }

/* ---- Comparison block (why broker, not provider) ---- */

.comparison {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
  margin-top: var(--s-6);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border-glass);
  background: var(--bg-elevated);
}
@media (min-width: 700px) { .comparison { grid-template-columns: 1fr 1fr; gap: 0; } }

.comparison-col {
  padding: var(--s-6);
}
.comparison-col + .comparison-col {
  border-top: 1px solid rgba(255,255,255,0.05);
}
@media (min-width: 700px) {
  .comparison-col + .comparison-col {
    border-top: 0;
    border-left: 1px solid rgba(255,255,255,0.05);
  }
}
.comparison-col-title {
  font-size: var(--t-eyebrow);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: var(--s-4);
  font-weight: 600;
}
.comparison-col.them .comparison-col-title { color: var(--text-muted); }
.comparison-col.us .comparison-col-title    { color: var(--cyan); }

.comparison-list { list-style: none; padding: 0; margin: 0; }
.comparison-list li {
  padding: var(--s-3) 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 0.9375rem;
  color: var(--text-muted);
}
.comparison-list li:last-child { border-bottom: 0; }
.comparison-col.us .comparison-list li { color: var(--text-light); }

/* ---- Final CTA block ---- */

.cta-band {
  text-align: center;
  padding-block: var(--s-9);
  background: radial-gradient(circle at 50% 50%, rgba(0,229,255,0.08), transparent 70%), var(--bg-deep);
}
.cta-band h2 { max-width: 18ch; margin-inline: auto; }
.cta-band p { margin-inline: auto; margin-bottom: var(--s-6); }
.cta-band .hero-ctas { justify-content: center; }

/* ---- Visual accent (3D asset in section) ---- */

.accent-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 280px;
}
.accent-visual img {
  max-width: 100%;
  width: clamp(260px, 80vw, 440px);
  filter: drop-shadow(0 0 40px rgba(0, 229, 255, 0.25));
  will-change: transform;
}
@media (min-width: 720px) {
  .accent-visual img { width: clamp(220px, 50vw, 480px); }
}

/* ---- Page intro hero (smaller than homepage hero) ---- */

.page-intro {
  position: relative;
  padding-block: var(--s-8);
  background: var(--bg-deep);
  overflow: hidden;
  isolation: isolate;
}
.page-intro::after {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: rgba(0, 229, 255, 0.15);
  filter: blur(120px);
  z-index: -1;
}
.page-intro h1 { max-width: 18ch; }
.page-intro p.lede {
  font-size: clamp(1.0625rem, 0.5vw + 1rem, 1.25rem);
  color: var(--text-muted);
  max-width: 56ch;
}

/* ---- Prose pages (privacy, terms etc.) ---- */

.prose { max-width: 760px; margin-inline: auto; }
.prose h2 { margin-top: var(--s-7); }
.prose h3 { margin-top: var(--s-6); }
.prose ul li, .prose ol li { margin-bottom: var(--s-2); }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Form layout ---- */

.form-wrap {
  max-width: 720px;
  margin-inline: auto;
}
.form-step {
  padding: var(--s-6);
  border-radius: var(--r-lg);
  background: var(--bg-glass-cyan);
  border: 1px solid var(--border-glass);
  margin-bottom: var(--s-5);
}
.section-light .form-step, .section-alt .form-step {
  background: rgba(0, 229, 255, 0.04);
  border-color: rgba(0, 229, 255, 0.15);
}
.form-step-title {
  font-size: var(--t-eyebrow);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: var(--s-5);
  font-weight: 600;
}
.section-light .form-step-title, .section-alt .form-step-title { color: var(--cyan-on-light); }
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
@media (min-width: 600px) { .form-grid-2 { grid-template-columns: repeat(2, 1fr); } }

/* ---- Contact sidebar ---- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
}
@media (min-width: 900px) { .contact-grid { grid-template-columns: 2fr 1fr; } }
.contact-side h4 { font-size: 1rem; margin-bottom: var(--s-2); margin-top: var(--s-5); }
.contact-side p { margin-bottom: 0; color: var(--text-dark-muted); }