/* Home Page Styles */

/* ===== VANA HERO SECTION ===== */
.vana-hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    #1e40af 0%,
    #2563eb 15%,
    #3b82f6 30%,
    #60a5fa 45%,
    #93c5fd 60%,
    #bfdbfe 75%,
    #dbeafe 85%,
    #f0f9ff 93%,
    #ffffff 100%
  ) !important;
}

#home-main-hero {
  background: linear-gradient(
    180deg,
    #1e40af 0%,
    #2563eb 15%,
    #3b82f6 30%,
    #60a5fa 45%,
    #93c5fd 60%,
    #bfdbfe 75%,
    #dbeafe 85%,
    #f0f9ff 93%,
    #ffffff 100%
  ) !important;
}

/* Panel blinds container */
.panel-blinds-container {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* Individual panel blind */
.panel-blind {
  flex: 1;
  height: 100%;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.04) 50%,
    transparent 100%
  );
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1),
              opacity 0.4s ease;
}

.panel-blind:last-child {
  border-right: none;
}

/* Revealed state - blinds open */
.panel-blind.panel-revealed {
  transform: scaleX(1);
  opacity: 1;
}

/* Subtle shimmer effect on panels */
.panel-blind::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  transition: transform 0.8s ease 0.3s;
}

.panel-blind.panel-revealed::after {
  transform: translateX(100%);
}

/* Hero content - stays above background */
.hero-content {
  position: relative;
  z-index: 5;
  max-width: 1100px;
  margin: 0 auto;
  padding: 140px 24px 100px;
  text-align: center;
}

.hero-content h1 {
  font-weight: 800;
  letter-spacing: -0.025em;
  font-size: clamp(36px, 5vw, 56px);
  margin: 0;
}

#home-main-hero h1 {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hero-content p {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
}

.hero-content > * {
  pointer-events: auto;
}

/* Responsive */
@media (max-width: 768px) {
  .hero-content {
    padding: 100px 16px 60px;
  }

  .hero-content h1,
  #home-main-hero h1 {
    font-size: clamp(28px, 7vw, 40px);
  }

  .hero-content p {
    font-size: 16px;
  }

  .vana-hero::before {
    background-size: 50px 50px;
  }
}

/* ===== ARCH CARD SERVICES SECTION ===== */

/* ===== SECTION LAYOUT ===== */
.arch-services-section {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  padding: 80px 0;
}

.arch-services-header {
  text-align: center;
  margin-bottom: 48px;
}

.arch-services-header h2 {
  font-size: 2.5rem;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 12px;
  letter-spacing: -0.025em;
}

.arch-services-header p {
  font-size: 1.125rem;
  color: #64748b;
  max-width: 600px;
  margin: 0 auto;
}

/* ===== GRID LAYOUT ===== */
.arch-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== FEATURED CARDS LAYOUT (Sell & Find) ===== */
.arch-featured-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 900px;
  margin: 0 auto 40px;
  padding: 0 24px;
}

/* ===== SECONDARY CARDS LAYOUT (Finance, Insure, Escrow, Manage) ===== */
.arch-secondary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== FEATURED CARD STYLES ===== */
.arch-card.featured {
  padding: 32px 28px;
  border: 2px solid rgba(241, 103, 0, 0.15);
  box-shadow: 0 8px 32px rgba(241, 103, 0, 0.08);
  position: relative;
  overflow: hidden;
}

.arch-card.featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #f16700 0%, #f97316 100%);
}

.arch-card.featured:hover {
  border-color: rgba(241, 103, 0, 0.3);
  box-shadow: 0 24px 56px rgba(241, 103, 0, 0.15);
}

.arch-card.featured .arch-image {
  aspect-ratio: 1 / 0.75;
  background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 50%, #fed7aa 100%);
}

.arch-card.featured .arch-card-title {
  font-size: 1.5rem;
}

.arch-card.featured .arch-card-subtitle {
  font-size: 1rem;
  color: #475569;
}

/* Start here badge for featured cards */
.arch-card.featured .start-badge {
  display: inline-block;
  background: linear-gradient(135deg, #f16700 0%, #ea580c 100%);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
}

/* ===== SECONDARY CARD STYLES ===== */
.arch-card.secondary {
  padding: 20px 16px;
}

.arch-card.secondary .arch-image {
  aspect-ratio: 1 / 0.7;
}

.arch-card.secondary .arch-illustration {
  width: 50%;
  height: 50%;
}

.arch-card.secondary .arch-card-title {
  font-size: 1.1rem;
}

.arch-card.secondary .arch-card-subtitle {
  font-size: 0.8rem;
}

.arch-card.secondary .arch-card-description {
  font-size: 0.8rem;
}

.arch-card.secondary .arch-btn {
  padding: 8px 16px;
  font-size: 0.8rem;
  width: 100%;
  justify-content: center;
}

/* ===== REASSURANCE LINE ===== */
.arch-card-reassurance {
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 4px;
  font-weight: 500;
}

.arch-card.featured .arch-card-reassurance {
  font-size: 0.85rem;
}

/* "Includes" line - hidden by default, fades in on hover */
.arch-card-includes {
  font-size: 0.75rem;
  color: #f16700;
  font-weight: 600;
  margin-top: 8px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease 0.1s, max-height 0.3s ease;
}

.arch-card:hover .arch-card-includes {
  opacity: 1;
  max-height: 30px;
}

/* Transition line between featured and secondary cards */
.arch-services-transition {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
  margin: 32px 0 24px;
  position: relative;
}

.arch-services-transition::before,
.arch-services-transition::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e2e8f0);
}

.arch-services-transition::before {
  right: calc(50% + 140px);
  background: linear-gradient(90deg, transparent, #e2e8f0);
}

.arch-services-transition::after {
  left: calc(50% + 140px);
  background: linear-gradient(90deg, #e2e8f0, transparent);
}

/* ===== RESPONSIVE FEATURED/SECONDARY GRIDS ===== */
@media (max-width: 1024px) {
  .arch-secondary-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 700px;
  }
}

@media (max-width: 768px) {
  .arch-featured-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 400px;
  }

  .arch-secondary-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 400px;
  }

  .arch-card.featured {
    padding: 24px 20px;
  }

  .arch-card.secondary {
    padding: 20px 16px;
  }
}

/* ===== ARCH CARD ===== */
.arch-card {
  background: white;
  border-radius: 24px;
  padding: 28px 24px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
  cursor: pointer;
  transform-origin: bottom center;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.4s ease;
  text-align: center;
}

.arch-card:hover {
  transform: translateY(-16px);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.14);
}

/* ===== ARCH IMAGE CONTAINER ===== */
.arch-image {
  width: 100%;
  aspect-ratio: 1 / 0.9;
  border-radius: 120px 120px 16px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
}

/* Unified arch background - soft neutral */
.arch-image {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
}

.arch-card:hover .arch-image {
  transform: scale(1.02);
}

/* ===== SVG ILLUSTRATION ===== */
.arch-illustration {
  width: 55%;
  height: 55%;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.arch-card:hover .arch-illustration {
  transform: scale(1.12) translateY(-4px);
}

/* ===== ANIMATED STARBURST ===== */
@keyframes starburstExpand {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  20% {
    opacity: 0.6;
  }
  100% {
    transform: scale(1.5) rotate(15deg);
    opacity: 0;
  }
}

.starburst-animation {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%) scale(0);
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(241, 103, 0, 0.3) 5deg,
    transparent 10deg,
    transparent 40deg,
    rgba(241, 103, 0, 0.3) 45deg,
    transparent 50deg,
    transparent 80deg,
    rgba(241, 103, 0, 0.3) 85deg,
    transparent 90deg,
    transparent 120deg,
    rgba(241, 103, 0, 0.3) 125deg,
    transparent 130deg,
    transparent 160deg,
    rgba(241, 103, 0, 0.3) 165deg,
    transparent 170deg,
    transparent 200deg,
    rgba(241, 103, 0, 0.3) 205deg,
    transparent 210deg,
    transparent 240deg,
    rgba(241, 103, 0, 0.3) 245deg,
    transparent 250deg,
    transparent 280deg,
    rgba(241, 103, 0, 0.3) 285deg,
    transparent 290deg,
    transparent 320deg,
    rgba(241, 103, 0, 0.3) 325deg,
    transparent 330deg,
    transparent 360deg
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.arch-card.featured:hover .starburst-animation {
  animation: starburstExpand 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

/* Ensure SVG stays above starburst */
.arch-card .arch-illustration {
  position: relative;
  z-index: 1;
}

/* ===== FONT AWESOME ICON VERSION ===== */
.arch-image-icon {
  font-size: 3rem;
  color: #f16700;
  background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 50%, #fed7aa 100%);
}

.arch-image-icon i {
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.arch-card:hover .arch-image-icon i {
  transform: scale(1.15) translateY(-4px);
}

/* ===== CARD CONTENT ===== */
.arch-card-content {
  text-align: center;
}

.arch-card-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 6px 0;
}

.arch-card-subtitle {
  font-size: 0.9rem;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}

/* ===== HOVER HINT - "Click me" affordance ===== */
.arch-card-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #9ca3af;
  transition: all 0.3s ease;
}

.arch-card-hint i {
  font-size: 0.7rem;
  transition: transform 0.3s ease;
}

.arch-card:hover .arch-card-hint {
  opacity: 0;
  transform: translateY(-8px);
}

.arch-card:hover .arch-card-hint i {
  transform: translateX(4px);
}

/* ===== HIDDEN DETAILS (Revealed on Hover) ===== */
.arch-card-details {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding-top: 0;
  transition: max-height 0.5s cubic-bezier(0.23, 1, 0.32, 1),
              opacity 0.4s ease 0.1s,
              padding-top 0.4s ease;
}

.arch-card:hover .arch-card-details {
  max-height: 180px;
  opacity: 1;
  padding-top: 16px;
}

/* Secondary cards: always show details (no hover reveal) */
.arch-card.secondary .arch-card-details {
  max-height: 180px;
  opacity: 1;
  padding-top: 12px;
}

.arch-card-description {
  font-size: 0.875rem;
  color: #475569;
  line-height: 1.6;
  margin: 0 0 16px 0;
}

/* ===== CTA BUTTONS ===== */
.arch-card-cta {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.arch-btn {
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.arch-btn.primary {
  background: linear-gradient(135deg, #f16700 0%, #ea580c 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(241, 103, 0, 0.3);
}

.arch-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(241, 103, 0, 0.4);
}

.arch-btn.secondary {
  background: white;
  color: #1e293b;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.arch-btn.secondary:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  transform: translateY(-2px);
}


/* ===== SCROLL REVEAL ANIMATIONS ===== */
.arch-card.scroll-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.arch-card.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.arch-card.scroll-reveal[data-delay="1"] { transition-delay: 0.05s; }
.arch-card.scroll-reveal[data-delay="2"] { transition-delay: 0.1s; }
.arch-card.scroll-reveal[data-delay="3"] { transition-delay: 0.15s; }
.arch-card.scroll-reveal[data-delay="4"] { transition-delay: 0.2s; }
.arch-card.scroll-reveal[data-delay="5"] { transition-delay: 0.25s; }
.arch-card.scroll-reveal[data-delay="6"] { transition-delay: 0.3s; }

/* Hover state overrides scroll-reveal transition */
.arch-card.scroll-reveal.revealed:hover {
  transform: translateY(-16px);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .arch-services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 700px;
  }

  .arch-services-header h2 {
    font-size: 2rem;
  }
}

@media (max-width: 640px) {
  .arch-services-section {
    padding: 60px 0;
  }

  .arch-services-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 400px;
    padding: 0 16px;
  }

  .arch-services-header h2 {
    font-size: 1.75rem;
  }

  .arch-card {
    padding: 24px 20px;
  }

  /* Show details by default on mobile (no hover) */
  .arch-card .arch-card-details {
    max-height: 180px;
    opacity: 1;
    padding-top: 16px;
  }

  .arch-card-cta {
    flex-direction: column;
  }

  .arch-btn {
    justify-content: center;
    width: 100%;
  }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .arch-card,
  .arch-card.scroll-reveal,
  .arch-image,
  .arch-illustration,
  .arch-card-details,
  .arch-btn {
    transition: none;
  }

  .arch-card.scroll-reveal {
    opacity: 1;
    transform: none;
  }

  .arch-card .arch-card-details {
    max-height: 180px;
    opacity: 1;
    padding-top: 16px;
  }
}