/* ==========================================================================
   GRAD 2 GLOBAL — High-Tech Innovative Services Stylesheet
   Designed with Midnight Ink Canvas, Aurora Mesh, Clean White Luxury Cards,
   Interactive Telemetry Hubs, and Unique Micro-Animations.
   ========================================================================== */

/* Page Base */
body.services-page {
  background-color: #03081a;
  color: #0e2a5e;
  overflow-x: hidden;
}

/* ==========================================================================
   1. HERO SECTION (Global Flight Command & 6-Pillar Architecture)
   ========================================================================== */
.svc-hero-section {
  position: relative;
  padding: 8.8rem 0 5.2rem;
  background-color: #03081a;
  background-image: 
    linear-gradient(180deg, 
      rgba(3, 8, 26, 0.72) 0%, 
      rgba(4, 12, 34, 0.62) 35%, 
      rgba(3, 8, 26, 0.90) 80%, 
      #03081a 100%),
    url('../images/services-banner.jpg');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  border-bottom: 1px solid rgba(255, 181, 46, 0.22);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

/* Telemetry Dot Grid Overlay */
.svc-hero-section::before,
.svc-main-body::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    radial-gradient(rgba(255, 181, 46, 0.1) 1px, transparent 1px);
  background-size: 32px 32px, 96px 96px;
  background-position: 0 0, 16px 16px;
  opacity: 0.6;
  pointer-events: none;
  z-index: 1;
}

/* Aurora Ambient Glowing Light Orbs */
.svc-hero-section .aurora,
.svc-main-body .aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.svc-hero-section .aurora i,
.svc-main-body .aurora i {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.45;
  animation: svcFloatGlow 18s ease-in-out infinite alternate;
}

.svc-hero-section .aurora i:nth-child(1),
.svc-main-body .aurora i:nth-child(1) {
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, #1747b8 0%, transparent 70%);
  top: -100px;
  right: -50px;
  animation-duration: 22s;
}

.svc-hero-section .aurora i:nth-child(2),
.svc-main-body .aurora i:nth-child(2) {
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, #b66a00 0%, transparent 70%);
  bottom: 0;
  left: -80px;
  animation-duration: 17s;
  animation-delay: -5s;
}

.svc-hero-section .aurora i:nth-child(3),
.svc-main-body .aurora i:nth-child(3) {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #0a8f7e 0%, transparent 70%);
  top: 40%;
  left: 45%;
  animation-duration: 25s;
  animation-delay: -9s;
}

@keyframes svcFloatGlow {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, 40px) scale(1.1); }
  100% { transform: translate(-25px, -30px) scale(0.95); }
}

/* Hero Content Wrap */
.svc-hero-wrap {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
}

/* Pulsing Badge Pill */
.svc-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: rgba(8, 26, 63, 0.78);
  border: 1px solid rgba(255, 181, 46, 0.4);
  padding: 0.45rem 1.15rem;
  border-radius: 999px;
  backdrop-filter: blur(12px);
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.svc-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FFB52E;
  box-shadow: 0 0 10px #FFB52E;
  animation: svcPulse 1.8s infinite;
}

@keyframes svcPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.6; }
}

.svc-badge-text {
  font-family: var(--mono, 'DM Mono', monospace);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: #ffca65;
  text-transform: uppercase;
}

.svc-badge-sep {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.8rem;
}

.svc-badge-tag {
  font-size: 0.82rem;
  color: #e2e8f0;
  font-weight: 600;
}

/* Hero Typography */
.svc-hero-title {
  font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
  font-size: clamp(2.4rem, 4.6vw, 3.8rem);
  font-weight: 800;
  line-height: 1.15;
  color: #ffffff;
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.7);
}

.svc-hero-title em {
  font-family: var(--font-serif, 'Instrument Serif', Georgia, serif);
  font-weight: 400;
  font-style: italic;
  color: #FFB52E;
  display: inline-block;
  text-shadow: 0 2px 16px rgba(255, 181, 46, 0.35);
}

.svc-hero-lead {
  font-size: clamp(1.05rem, 1.8vw, 1.22rem);
  color: #cddbf7;
  line-height: 1.65;
  max-width: 820px;
  margin: 0 auto 2.2rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75);
}

/* Flight Route Corridor Strip */
.svc-flight-corridor {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(4, 14, 38, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 0.6rem 1.4rem;
  border-radius: 12px;
  margin-bottom: 2.5rem;
  font-family: var(--mono, 'DM Mono', monospace);
  font-size: 0.88rem;
  color: #7dd3fc;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.svc-flight-plane {
  display: inline-block;
  animation: svcPlaneFly 3s ease-in-out infinite alternate;
}

@keyframes svcPlaneFly {
  0% { transform: translateX(0) translateY(0); }
  100% { transform: translateX(6px) translateY(-3px); }
}

.svc-corridor-dest {
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* Hero 4-Metrics Telemetry Grid */
.svc-metrics-deck {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-top: 0.5rem;
}

.svc-metric-card {
  background: rgba(8, 22, 54, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.4rem 1.1rem;
  border-radius: 16px;
  backdrop-filter: blur(12px);
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.svc-metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #FFB52E, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.svc-metric-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 181, 46, 0.4);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

.svc-metric-card:hover::before {
  opacity: 1;
}

.svc-metric-icon {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}

.svc-metric-val {
  font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
  font-size: 1.85rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
  margin-bottom: 0.25rem;
  display: block;
}

.svc-metric-val span {
  color: #FFB52E;
}

.svc-metric-label {
  font-size: 0.82rem;
  color: #8ea8db;
  line-height: 1.4;
  margin: 0;
}

@media (max-width: 900px) {
  .svc-metrics-deck {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 500px) {
  .svc-metrics-deck {
    grid-template-columns: 1fr;
  }
}



/* ==========================================================================
   3. SERVICE STATIONS MAIN BODY (Canvas & Alternating Backgrounds)
   ========================================================================== */
.svc-main-body {
  position: relative;
  background-color: #03081a;
  padding: 0;
  overflow: hidden;
}

/* Base Station Block (Full Width Band) */
.svc-station-block {
  position: relative;
  z-index: 2;
  padding: 5.5rem 0;
  width: 100%;
  overflow: hidden;
  transition: background-color 0.3s ease;
}

/* Theme 1: Deep Midnight Ink (Odd: 01, 03, 05) - Matching Home Page Hero & Journey */
.svc-station-block.svc-theme-dark {
  background: 
    radial-gradient(ellipse at 80% 20%, rgba(23, 71, 184, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse at 15% 80%, rgba(255, 181, 46, 0.14) 0%, transparent 55%),
    linear-gradient(180deg, #03081a 0%, #050d22 50%, #03081a 100%);
  background-color: #050d22;
  border-top: 1px solid rgba(255, 181, 46, 0.15);
  border-bottom: 1px solid rgba(255, 181, 46, 0.15);
}

/* Theme 2: Soft Paper Light (Even: 02, 04, 06) - Matching Home Page Bento Grid & Destinations */
.svc-station-block.svc-theme-light {
  background: 
    radial-gradient(ellipse at 85% 20%, rgba(14, 42, 94, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 85%, rgba(255, 181, 46, 0.07) 0%, transparent 55%),
    linear-gradient(180deg, #edf2f9 0%, #F5F7FB 50%, #edf2f9 100%);
  background-color: #F5F7FB;
  border-top: 1px solid rgba(14, 42, 94, 0.1);
  border-bottom: 1px solid rgba(14, 42, 94, 0.1);
  box-shadow: inset 0 20px 40px -25px rgba(14, 42, 94, 0.08), inset 0 -20px 40px -25px rgba(14, 42, 94, 0.08);
}

/* Telemetry Grid Pattern for Stations */
.svc-station-block::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.svc-station-block.svc-theme-dark::before {
  background-image: 
    radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    radial-gradient(rgba(255, 181, 46, 0.08) 1px, transparent 1px);
  background-size: 32px 32px, 96px 96px;
  background-position: 0 0, 16px 16px;
  opacity: 0.55;
}

.svc-station-block.svc-theme-light::before {
  background-image: 
    radial-gradient(rgba(14, 42, 94, 0.07) 1px, transparent 1px),
    radial-gradient(rgba(217, 138, 0, 0.08) 1px, transparent 1px);
  background-size: 32px 32px, 96px 96px;
  background-position: 0 0, 16px 16px;
  opacity: 0.65;
}

/* Light Theme Card Refinements */
.svc-station-block.svc-theme-light .svc-white-card {
  box-shadow: 
    0 24px 50px -12px rgba(14, 42, 94, 0.12),
    0 6px 18px -4px rgba(14, 42, 94, 0.06);
  border: 1px solid rgba(14, 42, 94, 0.12);
}

.svc-station-block.svc-theme-light .svc-console-card,
.svc-station-block.svc-theme-light .svc-visa-chamber,
.svc-station-block.svc-theme-light .svc-boarding-dossier {
  box-shadow: 
    0 30px 60px -15px rgba(14, 42, 94, 0.45),
    0 10px 25px rgba(14, 42, 94, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.svc-station-block .wrap {
  position: relative;
  z-index: 2;
}

.svc-station-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

.svc-station-grid.reverse > div:first-child { order: 2; }
.svc-station-grid.reverse > div:last-child { order: 1; }

@media (max-width: 980px) {
  .svc-station-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .svc-station-grid.reverse > div:first-child { order: 1; }
  .svc-station-grid.reverse > div:last-child { order: 2; }
}

/* ==========================================================================
   4. LUXURY WHITE CARDS (G2G Signature Style)
   ========================================================================== */
.svc-white-card {
  background: #ffffff;
  border: 1px solid rgba(14, 42, 94, 0.08);
  border-radius: 28px;
  padding: 2.8rem 2.6rem;
  box-shadow: 
    0 25px 60px -15px rgba(0, 0, 0, 0.35),
    0 10px 20px -5px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.svc-white-card:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 30px 70px -15px rgba(0, 0, 0, 0.45),
    0 15px 30px -5px rgba(255, 181, 46, 0.15);
}

.svc-white-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #1747b8, #FFB52E, #0a8f7e);
}

.svc-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono, 'DM Mono', monospace);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #0E2A5E;
  text-transform: uppercase;
  background: rgba(255, 181, 46, 0.18);
  border: 1px solid rgba(255, 181, 46, 0.45);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  margin-bottom: 1.2rem;
}

.svc-card-tag .tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d98a00;
}

.svc-card-heading {
  font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
  font-size: clamp(1.8rem, 2.5vw, 2.3rem);
  font-weight: 800;
  color: #0E2A5E;
  line-height: 1.2;
  margin-bottom: 1rem;
  letter-spacing: -0.015em;
}

.svc-card-desc {
  font-size: 1.02rem;
  line-height: 1.68;
  color: #4a5d85;
  margin-bottom: 1.8rem;
}

.svc-feature-list {
  list-style: none;
  display: grid;
  gap: 1rem;
  margin-bottom: 2.2rem;
  padding: 0;
}

.svc-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  font-size: 0.97rem;
  line-height: 1.5;
  color: #2b3a5b;
}

.svc-item-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(10, 143, 126, 0.12);
  color: #0a8f7e;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.1rem;
  border: 1px solid rgba(10, 143, 126, 0.25);
  transition: transform 0.25s ease, background 0.25s ease;
}

.svc-feature-item:hover .svc-item-icon {
  transform: scale(1.15) rotate(5deg);
  background: #0a8f7e;
  color: #ffffff;
}

.svc-feature-item strong {
  color: #0E2A5E;
}

.svc-thumb-row {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(14, 42, 94, 0.08);
  margin-top: 1.4rem;
}

.svc-thumb-img {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  object-fit: cover;
  border: 2px solid #FFB52E;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.svc-thumb-info strong {
  display: block;
  font-size: 0.92rem;
  color: #0E2A5E;
  font-weight: 700;
}

.svc-thumb-info span {
  font-size: 0.8rem;
  color: #6d7f9f;
}

.svc-btn-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.svc-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: #0E2A5E;
  color: #ffffff !important;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.85rem 1.6rem;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 6px 20px rgba(14, 42, 94, 0.25);
}

.svc-btn-primary:hover {
  background: #1747b8;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(23, 71, 184, 0.35);
}

.svc-btn-primary svg {
  transition: transform 0.25s ease;
}

.svc-btn-primary:hover svg {
  transform: translateX(4px);
}

.svc-btn-gold {
  background: linear-gradient(135deg, #FFB52E 0%, #e09b18 100%);
  color: #081a3f !important;
  box-shadow: 0 6px 20px rgba(255, 181, 46, 0.3);
}

.svc-btn-gold:hover {
  background: linear-gradient(135deg, #ffd06b 0%, #FFB52E 100%);
  box-shadow: 0 10px 25px rgba(255, 181, 46, 0.45);
}

.svc-btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(37, 211, 102, 0.12);
  color: #0f8a3c !important;
  border: 1px solid rgba(37, 211, 102, 0.3);
  padding: 0.85rem 1.3rem;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s ease;
}

.svc-btn-wa:hover {
  background: #25d366;
  color: #ffffff !important;
  border-color: #25d366;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3);
}

/* ==========================================================================
   5. INTERACTIVE WIDGET 1: Feasibility Scanner Console
   ========================================================================== */
.svc-console-card {
  background: #081a3f;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  padding: 2.4rem;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 30px 60px -15px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(23, 71, 184, 0.15);
}

.svc-console-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 1.5rem;
}

.svc-console-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono, 'DM Mono', monospace);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: #FFB52E;
  text-transform: uppercase;
}

.svc-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono, 'DM Mono', monospace);
  font-size: 0.72rem;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(74, 222, 128, 0.3);
}

.svc-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  animation: svcPulse 1.5s infinite;
}

.svc-input-group {
  margin-bottom: 1.4rem;
}

.svc-input-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.88rem;
  color: #b5c5ee;
}

.svc-val-bubble {
  font-family: var(--mono, 'DM Mono', monospace);
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFB52E;
  background: rgba(255, 181, 46, 0.15);
  padding: 0.15rem 0.55rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 181, 46, 0.3);
}

.svc-range-slider {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  outline: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.svc-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FFB52E;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(255, 181, 46, 0.8);
  border: 2px solid #ffffff;
  transition: transform 0.15s ease;
}

.svc-range-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.svc-select-dark {
  width: 100%;
  background: rgba(4, 12, 34, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  font-size: 0.92rem;
  font-family: inherit;
  outline: none;
  cursor: pointer;
}

.svc-select-dark:focus {
  border-color: #FFB52E;
}

.svc-feasibility-results {
  background: rgba(3, 9, 26, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 1.3rem;
  margin-top: 1.2rem;
}

.svc-res-header {
  font-family: var(--mono, 'DM Mono', monospace);
  font-size: 0.75rem;
  color: #8ea8db;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.9rem;
  display: flex;
  justify-content: space-between;
}

.svc-country-match-row {
  margin-bottom: 0.85rem;
}

.svc-country-match-row:last-child {
  margin-bottom: 0;
}

.svc-match-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.84rem;
  margin-bottom: 0.35rem;
  color: #e2e8f0;
}

.svc-match-meta span.pct {
  font-family: var(--mono, 'DM Mono', monospace);
  font-weight: 700;
  color: #46F0C1;
}

.svc-bar-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  overflow: hidden;
}

.svc-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #1747b8, #46F0C1);
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.svc-alert-pill {
  margin-top: 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  background: rgba(255, 181, 46, 0.12);
  border: 1px solid rgba(255, 181, 46, 0.35);
  color: #ffca65;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1.4;
}

/* ==========================================================================
   6. INTERACTIVE WIDGET 2: 3-Tier Funnel Stack
   ========================================================================== */
.svc-funnel-stack {
  display: grid;
  gap: 1.1rem;
}

.svc-funnel-card {
  background: rgba(8, 26, 63, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 1.4rem 1.5rem;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}

.svc-funnel-card:hover {
  transform: translateX(6px);
  background: rgba(14, 38, 88, 0.9);
  border-color: rgba(255, 181, 46, 0.4);
}

.svc-funnel-card.tier-1 { border-left: 5px solid #FFB52E; }
.svc-funnel-card.tier-2 { border-left: 5px solid #38bdf8; }
.svc-funnel-card.tier-3 { border-left: 5px solid #46F0C1; }

.svc-funnel-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.svc-tier-badge {
  font-family: var(--mono, 'DM Mono', monospace);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.svc-funnel-card.tier-1 .svc-tier-badge { color: #FFB52E; }
.svc-funnel-card.tier-2 .svc-tier-badge { color: #38bdf8; }
.svc-funnel-card.tier-3 .svc-tier-badge { color: #46F0C1; }

.svc-tier-tag {
  font-size: 0.74rem;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
}

.svc-funnel-title {
  font-size: 1.12rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.35rem;
}

.svc-funnel-desc {
  font-size: 0.85rem;
  color: #9ab2e2;
  line-height: 1.45;
  margin-bottom: 0.85rem;
}

.svc-uni-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.svc-chip {
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* ==========================================================================
   7. INTERACTIVE WIDGET 3: SOP Lab
   ========================================================================== */
.svc-sop-lab {
  background: #081a3f;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.6);
}

.svc-sop-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(4, 12, 34, 0.8);
}

.svc-sop-tab-btn {
  background: transparent;
  border: none;
  padding: 1.1rem 1rem;
  color: #8ea8db;
  font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.25s ease;
}

.svc-sop-tab-btn.active {
  color: #ffffff;
  background: rgba(14, 38, 88, 0.7);
}

.svc-sop-tab-btn.tab-bad.active {
  border-bottom: 3px solid #ef4444;
}

.svc-sop-tab-btn.tab-good.active {
  border-bottom: 3px solid #10b981;
}

.svc-sop-body {
  padding: 2.2rem;
}

.svc-sop-view {
  display: none;
  animation: svcFadeIn 0.35s ease forwards;
}

.svc-sop-view.active {
  display: block;
}

@keyframes svcFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.svc-sop-text-box {
  background: rgba(3, 9, 26, 0.7);
  border-radius: 16px;
  padding: 1.4rem 1.6rem;
  font-size: 0.94rem;
  line-height: 1.7;
  color: #cbd5e1;
  position: relative;
  font-style: italic;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  margin-bottom: 1.2rem;
}

.svc-sop-text-box.bad { border-color: rgba(239, 68, 68, 0.4); }
.svc-sop-text-box.good { border-color: rgba(16, 185, 129, 0.5); }

.svc-strike {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  text-decoration: line-through;
  padding: 0 0.2rem;
  border-radius: 3px;
}

.svc-highlight {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
  font-weight: 600;
  padding: 0 0.3rem;
  border-radius: 3px;
  border-bottom: 2px solid #10b981;
}

.svc-sop-callouts {
  display: grid;
  gap: 0.6rem;
}

.svc-sop-tag {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
}

.svc-sop-tag.bad {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.svc-sop-tag.good {
  background: rgba(16, 185, 129, 0.12);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

/* ==========================================================================
   8. INTERACTIVE WIDGET 4: Visa Readiness Chamber
   ========================================================================== */
.svc-visa-chamber {
  background: #081a3f;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  padding: 2.2rem;
  color: #ffffff;
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.6);
}

.svc-visa-gauge-wrap {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: rgba(3, 9, 26, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 1.4rem;
  margin-bottom: 1.5rem;
}

.svc-gauge-circle {
  position: relative;
  width: 90px;
  height: 90px;
  flex-shrink: 0;
}

.svc-gauge-svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}

.svc-gauge-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 8;
}

.svc-gauge-bar {
  fill: none;
  stroke: #46F0C1;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 251.2;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.3s ease;
}

.svc-gauge-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--mono, 'DM Mono', monospace);
  font-weight: 700;
  font-size: 1.15rem;
  color: #ffffff;
}

.svc-gauge-info h4 {
  font-size: 1.1rem;
  color: #ffffff;
  margin-bottom: 0.25rem;
}

.svc-gauge-info p {
  font-size: 0.84rem;
  color: #9ab2e2;
  margin: 0;
  line-height: 1.4;
}

.svc-interactive-check {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(14, 38, 88, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.75rem 1rem;
  border-radius: 12px;
  margin-bottom: 0.65rem;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
}

.svc-interactive-check:hover {
  background: rgba(23, 71, 184, 0.3);
  border-color: rgba(70, 240, 193, 0.3);
}

.svc-check-box {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
  font-size: 0.75rem;
}

.svc-interactive-check.checked .svc-check-box {
  background: #46F0C1;
  border-color: #46F0C1;
  color: #03081a;
  font-weight: 800;
}

.svc-check-label {
  font-size: 0.88rem;
  color: #e2e8f0;
}

.svc-hologram-seal-wrap {
  margin-top: 1.4rem;
  display: flex;
  justify-content: center;
  perspective: 800px;
}

.svc-hologram-seal {
  position: relative;
  width: 100%;
  max-width: 320px;
  padding: 1.1rem 1.4rem;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 181, 46, 0.15) 0%, rgba(70, 240, 193, 0.15) 100%);
  border: 1.5px solid rgba(255, 181, 46, 0.5);
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 
    0 10px 25px rgba(0, 0, 0, 0.35),
    inset 0 0 15px rgba(255, 181, 46, 0.2);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.svc-hologram-seal::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(60deg, transparent 40%, rgba(255, 255, 255, 0.2) 50%, transparent 60%);
  transform: rotate(25deg);
  animation: svcShineSweep 5s infinite;
}

@keyframes svcShineSweep {
  0% { transform: translateY(-100%) rotate(25deg); }
  30%, 100% { transform: translateY(100%) rotate(25deg); }
}

.svc-hologram-seal:hover {
  transform: rotateX(8deg) rotateY(-8deg) scale(1.02);
  border-color: #FFB52E;
}

.svc-seal-stamp {
  font-size: 2rem;
  flex-shrink: 0;
}

.svc-seal-text strong {
  display: block;
  font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
  font-size: 0.96rem;
  color: #FFB52E;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.svc-seal-text span {
  font-size: 0.76rem;
  color: #b5c5ee;
  font-family: var(--mono, 'DM Mono', monospace);
}

/* ==========================================================================
   9. INTERACTIVE WIDGET 5: Loan Sanction & EMI Estimator
   ========================================================================== */
.svc-loan-calculator {
  background: #081a3f;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  padding: 2.4rem;
  color: #ffffff;
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.6);
}

.svc-loan-toggle-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  background: rgba(3, 9, 26, 0.7);
  padding: 0.35rem;
  border-radius: 12px;
  margin-bottom: 1.5rem;
}

.svc-loan-toggle-btn {
  background: transparent;
  border: none;
  padding: 0.65rem 0.5rem;
  border-radius: 8px;
  color: #9ab2e2;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
}

.svc-loan-toggle-btn.active {
  background: #0E2A5E;
  color: #FFB52E;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.svc-loan-display-box {
  background: rgba(3, 9, 26, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 1.4rem;
  margin-top: 1.4rem;
}

.svc-loan-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.svc-loan-stat-item {
  background: rgba(14, 38, 88, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 1rem;
  border-radius: 14px;
}

.svc-loan-stat-label {
  font-size: 0.76rem;
  color: #8ea8db;
  display: block;
  margin-bottom: 0.3rem;
  text-transform: uppercase;
  font-family: var(--mono, 'DM Mono', monospace);
}

.svc-loan-stat-val {
  font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
  font-size: 1.35rem;
  font-weight: 800;
  color: #46F0C1;
}

.svc-bank-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

.svc-bank-pill {
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
}

/* ==========================================================================
   10. INTERACTIVE WIDGET 6: Departure Dossier & Boarding Terminal
   ========================================================================== */
.svc-boarding-dossier {
  background: #081a3f;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  padding: 2.2rem;
  color: #ffffff;
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.6);
  position: relative;
  overflow: hidden;
}

.svc-boarding-pass {
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
  border-radius: 20px;
  padding: 1.8rem;
  color: #0E2A5E;
  position: relative;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.svc-boarding-pass::before,
.svc-boarding-pass::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #081a3f;
}

.svc-boarding-pass::before { left: -11px; transform: translateY(-50%); }
.svc-boarding-pass::after { right: -11px; transform: translateY(-50%); }

.svc-bp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px dashed #cbd5e1;
  padding-bottom: 1.1rem;
  margin-bottom: 1.2rem;
}

.svc-bp-route {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.svc-bp-airport strong {
  font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
  font-size: 1.8rem;
  font-weight: 800;
  display: block;
  line-height: 1;
}

.svc-bp-airport span {
  font-size: 0.72rem;
  color: #64748b;
  font-family: var(--mono, 'DM Mono', monospace);
}

.svc-bp-plane {
  font-size: 1.3rem;
  color: #d98a00;
}

.svc-bp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.svc-bp-field span {
  display: block;
  font-size: 0.68rem;
  color: #64748b;
  text-transform: uppercase;
  font-family: var(--mono, 'DM Mono', monospace);
}

.svc-bp-field strong {
  font-size: 0.95rem;
  color: #0E2A5E;
}

.svc-bp-perks-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.svc-bp-perk {
  font-size: 0.74rem;
  background: rgba(14, 42, 94, 0.08);
  border: 1px solid rgba(14, 42, 94, 0.15);
  color: #0E2A5E;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  font-weight: 600;
}

/* ==========================================================================
   11. ETHICAL COMPARISON MATRIX (Agent vs. G2G Standard)
   ========================================================================== */
.svc-matrix-section {
  position: relative;
  z-index: 2;
  padding: 6rem 0;
  background: rgba(4, 12, 34, 0.75);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.svc-matrix-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 3.5rem;
}

.svc-matrix-table-wrap {
  background: #ffffff;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.svc-matrix-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.svc-matrix-table th {
  padding: 1.5rem 1.8rem;
  font-size: 0.96rem;
  font-weight: 800;
  color: #0E2A5E;
  background: #f8fafc;
  border-bottom: 2px solid #e2e8f0;
}

.svc-matrix-table th.col-g2g {
  background: #0E2A5E;
  color: #ffffff;
  position: relative;
}

.svc-matrix-table th.col-g2g::after {
  content: 'BEST PRACTICE';
  position: absolute;
  top: 0.6rem;
  right: 1.2rem;
  font-family: var(--mono, 'DM Mono', monospace);
  font-size: 0.65rem;
  background: #FFB52E;
  color: #081a3f;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
}

.svc-matrix-table td {
  padding: 1.3rem 1.8rem;
  font-size: 0.95rem;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  vertical-align: middle;
}

.svc-matrix-table tr:hover td {
  background: #f8fafc;
}

.svc-matrix-table td.col-g2g {
  background: rgba(23, 71, 184, 0.04);
  font-weight: 600;
  color: #0E2A5E;
  border-left: 2px solid rgba(23, 71, 184, 0.1);
  border-right: 2px solid rgba(23, 71, 184, 0.1);
}

.svc-matrix-bad {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #dc2626;
  font-weight: 500;
}

.svc-matrix-good {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #0f8a3c;
  font-weight: 700;
}

@media (max-width: 768px) {
  .svc-matrix-table-wrap {
    overflow-x: auto;
  }
}

/* ==========================================================================
   12. SERVICE JOURNEY FLIGHT PATH (Milestones)
   ========================================================================== */
.svc-timeline-section {
  position: relative;
  z-index: 2;
  padding: 6rem 0;
}

.svc-timeline-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.2rem;
  position: relative;
  margin-top: 3.5rem;
}

.svc-timeline-grid::before {
  content: '';
  position: absolute;
  top: 36px;
  left: 30px;
  right: 30px;
  height: 2px;
  background: linear-gradient(90deg, #FFB52E 0%, #38bdf8 50%, #46F0C1 100%);
  z-index: 0;
  opacity: 0.5;
}

.svc-milestone-card {
  position: relative;
  z-index: 1;
  text-align: center;
}

.svc-milestone-node {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #081a3f;
  border: 2px solid #FFB52E;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.1rem;
  font-family: var(--mono, 'DM Mono', monospace);
  font-weight: 700;
  font-size: 0.92rem;
  box-shadow: 0 0 16px rgba(255, 181, 46, 0.35);
  transition: transform 0.3s ease, background 0.3s ease;
}

.svc-milestone-card:hover .svc-milestone-node {
  transform: scale(1.15);
  background: #FFB52E;
  color: #081a3f;
}

.svc-milestone-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.3rem;
  line-height: 1.3;
}

.svc-milestone-sub {
  font-size: 0.78rem;
  color: #8ea8db;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .svc-timeline-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  .svc-timeline-grid::before {
    display: none;
  }
}
@media (max-width: 500px) {
  .svc-timeline-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   13. MASTER CONVERSION CTA SECTION
   ========================================================================== */
.svc-cta-section {
  position: relative;
  z-index: 2;
  padding: 4rem 0 7rem;
}

.svc-cta-card {
  background: #ffffff;
  border-radius: 32px;
  padding: 3.5rem 3rem;
  box-shadow: 
    0 35px 80px -15px rgba(0, 0, 0, 0.6),
    0 0 30px rgba(255, 181, 46, 0.2);
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 3rem;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.svc-cta-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, #1747b8, #FFB52E, #0a8f7e);
}

.svc-cta-content h2 {
  font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
  font-size: clamp(2rem, 3.2vw, 2.7rem);
  font-weight: 800;
  color: #0E2A5E;
  line-height: 1.18;
  margin-bottom: 1rem;
}

.svc-cta-content h2 em {
  font-family: var(--font-serif, 'Instrument Serif', Georgia, serif);
  color: #d98a00;
  font-style: italic;
}

.svc-cta-content p {
  font-size: 1.08rem;
  color: #435078;
  line-height: 1.65;
  margin-bottom: 2rem;
}

.svc-fast-inquiry-box {
  background: #081a3f;
  border-radius: 24px;
  padding: 2.2rem;
  color: #ffffff;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}

.svc-fast-inquiry-box h3 {
  font-size: 1.25rem;
  color: #ffffff;
  margin-bottom: 0.4rem;
}

.svc-fast-inquiry-box p {
  font-size: 0.85rem;
  color: #b5c5ee;
  margin-bottom: 1.3rem;
  line-height: 1.45;
}

.svc-form-field {
  margin-bottom: 1rem;
}

.svc-form-field label {
  display: block;
  font-size: 0.78rem;
  color: #b5c5ee;
  margin-bottom: 0.35rem;
  font-family: var(--mono, 'DM Mono', monospace);
}

.svc-form-field input,
.svc-form-field select {
  width: 100%;
  background: rgba(3, 9, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-size: 0.92rem;
  outline: none;
  transition: border-color 0.2s;
}

.svc-form-field input:focus,
.svc-form-field select:focus {
  border-color: #FFB52E;
}

.svc-fast-submit-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: linear-gradient(135deg, #FFB52E 0%, #e09b18 100%);
  color: #081a3f;
  font-weight: 800;
  font-size: 0.98rem;
  padding: 0.9rem;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 6px 20px rgba(255, 181, 46, 0.35);
}

.svc-fast-submit-btn:hover {
  background: linear-gradient(135deg, #ffd06b 0%, #FFB52E 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(255, 181, 46, 0.5);
}

@media (max-width: 900px) {
  .svc-cta-card {
    grid-template-columns: 1fr;
    padding: 2.5rem 1.8rem;
    gap: 2rem;
  }
}