/* ==========================================================================
   AinaOS Landing Page — Hawaiian Tropical Resort Theme
   Sunset gradient hero, wave dividers, palm silhouettes, tropical accents
   ========================================================================== */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&f[]=general-sans@500,600,700&display=swap');

/* --- Reset & Base --- */
.landing-page {
  margin: 0;
  padding: 0;
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #1E1E2A;
  overflow-x: hidden;
  background: #F5EDE3;
}

/* --- Navbar --- */
.landing-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  padding: 1rem 0;
  transition: all .4s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: transparent;
}
.landing-nav.scrolled {
  background: rgba(251, 247, 242, .95);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(12, 46, 61, 0.1);
  padding: .55rem 0;
}
.landing-nav .navbar-brand {
  font-family: 'General Sans', sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: .45rem;
  text-decoration: none;
}
.landing-nav.scrolled .navbar-brand {
  color: #E86B56;
}
.landing-nav .nav-link {
  color: rgba(255, 255, 255, .85);
  font-weight: 500;
  margin-left: 1rem;
  transition: all .25s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-decoration: none;
}
.landing-nav.scrolled .nav-link {
  color: #7A7068;
}
.landing-nav .nav-link:hover {
  color: #fff;
  transform: translateY(-2px);
}
.landing-nav.scrolled .nav-link:hover {
  color: #E86B56;
}

/* --- Hero Section — Sunset Gradient --- */
@keyframes hero-clouds {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes hero-shimmer {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.8; }
}

@keyframes sunset-cycle {
  0% {
    background-position: 0% 0%;
    filter: saturate(0.85) brightness(0.95);
  }
  25% {
    background-position: 0% 5%;
    filter: saturate(1.15) brightness(1.05);
  }
  50% {
    background-position: 0% 10%;
    filter: saturate(1.3) brightness(1.1);
  }
  75% {
    background-position: 0% 5%;
    filter: saturate(1.1) brightness(1.0);
  }
  100% {
    background-position: 0% 0%;
    filter: saturate(0.85) brightness(0.95);
  }
}

@keyframes sun-glow {
  0%, 100% {
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1.15);
  }
}

@keyframes sun-rays {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes palm-sway {
  0%, 100% { transform: scaleX(1) rotate(0deg); }
  25% { transform: scaleX(1) rotate(1.5deg); }
  75% { transform: scaleX(1) rotate(-1.5deg); }
}

.hero-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 7rem 0 4rem;
  /* Sunset gradient: sky -> golden band -> ocean */
  background: linear-gradient(
    180deg,
    #FF9A76 0%,
    #FFBF87 12%,
    #F4A942 24%,
    #E86B56 38%,
    #C9503C 50%,
    #1A9B9E 65%,
    #137072 80%,
    #0C2E3D 100%
  );
  background-size: 100% 120%;
  animation: sunset-cycle 12s ease-in-out infinite;
}

/* Sun disc at horizon */
.hero-sun {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, #F4A942 0%, #E86B56 40%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: sun-glow 6s ease-in-out infinite;
}

/* Sun ray ring */
.hero-sun::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 240px;
  height: 240px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(244, 169, 66, 0.08) 10deg,
    transparent 20deg,
    transparent 30deg,
    rgba(244, 169, 66, 0.06) 40deg,
    transparent 50deg,
    transparent 60deg,
    rgba(244, 169, 66, 0.08) 70deg,
    transparent 80deg,
    transparent 90deg,
    rgba(244, 169, 66, 0.06) 100deg,
    transparent 110deg,
    transparent 120deg,
    rgba(244, 169, 66, 0.08) 130deg,
    transparent 140deg,
    transparent 150deg,
    rgba(244, 169, 66, 0.06) 160deg,
    transparent 170deg,
    transparent 180deg,
    rgba(244, 169, 66, 0.08) 190deg,
    transparent 200deg,
    transparent 210deg,
    rgba(244, 169, 66, 0.06) 220deg,
    transparent 230deg,
    transparent 240deg,
    rgba(244, 169, 66, 0.08) 250deg,
    transparent 260deg,
    transparent 270deg,
    rgba(244, 169, 66, 0.06) 280deg,
    transparent 290deg,
    transparent 300deg,
    rgba(244, 169, 66, 0.08) 310deg,
    transparent 320deg,
    transparent 330deg,
    rgba(244, 169, 66, 0.06) 340deg,
    transparent 350deg,
    transparent 360deg
  );
  animation: sun-rays 30s linear infinite;
  pointer-events: none;
}

/* Horizon reflection on water */
.hero-reflection {
  position: absolute;
  top: 52%;
  left: 30%;
  right: 30%;
  height: 120px;
  background: linear-gradient(180deg,
    rgba(244, 169, 66, 0.2) 0%,
    rgba(232, 107, 86, 0.1) 30%,
    transparent 100%
  );
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
  animation: hero-shimmer 5s ease-in-out infinite;
}

/* Cloud layers */
.hero-clouds {
  position: absolute;
  top: 5%;
  left: 0;
  width: 200%;
  height: 120px;
  pointer-events: none;
  animation: hero-clouds 40s linear infinite;
}

.hero-cloud {
  position: absolute;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 100px;
  filter: blur(20px);
}

.hero-cloud-1 {
  width: 300px;
  height: 50px;
  top: 10px;
  left: 10%;
}

.hero-cloud-2 {
  width: 200px;
  height: 35px;
  top: 40px;
  left: 35%;
  opacity: 0.6;
}

.hero-cloud-3 {
  width: 250px;
  height: 40px;
  top: 20px;
  left: 60%;
  opacity: 0.4;
}

.hero-cloud-4 {
  width: 180px;
  height: 30px;
  top: 50px;
  left: 85%;
  opacity: 0.5;
}

/* Duplicate clouds for seamless loop */
.hero-cloud-5 {
  width: 300px;
  height: 50px;
  top: 10px;
  left: 110%;
}

.hero-cloud-6 {
  width: 200px;
  height: 35px;
  top: 40px;
  left: 135%;
  opacity: 0.6;
}

/* Shimmer band at horizon */
.hero-shimmer {
  position: absolute;
  top: 42%;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(90deg,
    transparent,
    rgba(244, 169, 66, 0.3),
    rgba(255, 191, 135, 0.4),
    rgba(244, 169, 66, 0.3),
    transparent
  );
  animation: hero-shimmer 4s ease-in-out infinite;
  pointer-events: none;
}

/* Palm tree silhouettes */
.hero-palms {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 280px;
  pointer-events: none;
  z-index: 0;
}

.hero-palm {
  position: absolute;
  bottom: 0;
  transform-origin: bottom center;
  animation: palm-sway 6s ease-in-out infinite;
}

.hero-palm svg {
  fill: rgba(12, 46, 61, 0.7);
}

.hero-palm-1 {
  left: -20px;
  animation-delay: 0s;
}

.hero-palm-2 {
  right: 40px;
  animation-delay: -2s;
}

.hero-palm-3 {
  left: 15%;
  animation-delay: -4s;
}

.hero-palm-4 {
  right: 18%;
  animation-delay: -3s;
  opacity: 0.5;
}

/* Wave-shaped bottom edge */
.hero-wave {
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  z-index: 1;
}

.hero-wave svg {
  display: block;
  width: 100%;
  height: 80px;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-headline {
  font-family: 'General Sans', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 1rem;
  text-shadow: 0 2px 20px rgba(12, 46, 61, 0.3);
}

.hero-subtitle {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, .9);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  max-width: 520px;
  text-shadow: 0 1px 10px rgba(12, 46, 61, 0.2);
}

.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.hero-pills .badge {
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(8px);
  color: #fff;
  font-family: 'Satoshi', sans-serif;
  font-weight: 500;
  font-size: .82rem;
  padding: .4rem .85rem;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: all 0.25s ease;
}
.hero-pills .badge:hover {
  background: rgba(255, 255, 255, .3);
  transform: translateY(-2px);
}

/* --- Login Card (Frosted Glass on hero) --- */
.login-card {
  background: rgba(251, 247, 242, 0.85);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(12, 46, 61, 0.2);
  padding: 2.2rem 2rem;
  max-width: 400px;
  width: 100%;
}
.login-card h2 {
  font-family: 'General Sans', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #1E1E2A;
  margin-bottom: 1.4rem;
}
.login-card label {
  font-weight: 500;
  font-size: .88rem;
  color: #7A7068;
  margin-bottom: .3rem;
}
.login-card .form-control {
  background: rgba(245, 237, 227, 0.8);
  border: 1px solid rgba(122, 112, 104, 0.15);
  border-radius: 12px;
  padding: .6rem .85rem;
  font-family: 'Satoshi', sans-serif;
  font-size: .95rem;
  color: #1E1E2A;
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.login-card .form-control:focus {
  border-color: #1A9B9E;
  box-shadow: 0 0 0 3px rgba(26, 155, 158, 0.15);
  outline: none;
}
.login-card .btn-login {
  width: 100%;
  background: linear-gradient(135deg, #E86B56, #F2917F);
  border: none;
  color: #fff;
  font-family: 'Satoshi', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  padding: .65rem;
  border-radius: 12px;
  margin-top: .5rem;
  box-shadow: 0 4px 12px rgba(232, 107, 86, 0.3);
  transition: all .25s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}
.login-card .btn-login::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}
.login-card .btn-login:hover::before {
  left: 100%;
}
.login-card .btn-login:hover {
  box-shadow: 0 6px 24px rgba(232, 107, 86, 0.4);
  transform: translateY(-2px);
}
.login-card .btn-login:active {
  transform: scale(.98);
}

/* --- Login Error --- */
.login-error {
  background: rgba(217, 64, 64, 0.08);
  color: #D94040;
  border: 1px solid rgba(217, 64, 64, 0.2);
  border-radius: 10px;
  padding: .6rem .85rem;
  font-size: .88rem;
  margin-bottom: 1rem;
}

/* --- Wave Divider (between sections) --- */
.landing-wave-divider {
  width: 100%;
  line-height: 0;
  overflow: hidden;
}

.landing-wave-divider svg {
  display: block;
  width: 100%;
  height: 60px;
}

.landing-wave-divider.wave-to-sand svg path {
  fill: #F5EDE3;
}

.landing-wave-divider.wave-to-teal svg path {
  fill: #0C2E3D;
}

/* --- Features Section --- */
.features-section {
  background: #F5EDE3;
  padding: 5rem 0;
  position: relative;
}
.features-section .section-title {
  font-family: 'General Sans', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: #1E1E2A;
  text-align: center;
  margin-bottom: .5rem;
}
.features-section .section-subtitle {
  text-align: center;
  color: #7A7068;
  margin-bottom: 3rem;
  font-size: 1.05rem;
}

/* Plumeria accent between section title */
.features-section .section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #E86B56, #F4A942);
  margin: 12px auto 0;
  border-radius: 2px;
}

/* --- Feature Card --- */
.feature-card {
  background: #FBF7F2;
  border-radius: 18px;
  padding: 2rem 1.5rem;
  box-shadow: 0 4px 20px rgba(12, 46, 61, 0.08);
  transition: all .3s cubic-bezier(0.34, 1.56, 0.64, 1);
  height: 100%;
  border: none;
  position: relative;
  overflow: hidden;
}

/* Subtle hibiscus watermark */
.feature-card::after {
  content: '\2740';
  position: absolute;
  bottom: -8px;
  right: -4px;
  font-size: 4rem;
  color: #E86B56;
  opacity: 0.04;
  transform: rotate(-15deg);
  pointer-events: none;
}

.feature-card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 8px 32px rgba(12, 46, 61, 0.14);
}
.feature-card .feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(232, 107, 86, 0.1), rgba(244, 169, 66, 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #E86B56;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.feature-card:hover .feature-icon {
  background: linear-gradient(135deg, #E86B56, #F4A942);
  color: #fff;
  transform: scale(1.08);
}

.feature-card h5 {
  font-family: 'General Sans', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: #1E1E2A;
  margin-bottom: .5rem;
}
.feature-card p {
  color: #7A7068;
  font-size: .92rem;
  line-height: 1.55;
  margin: 0;
}

/* --- How It Works Section --- */
.how-section {
  background: #0C2E3D;
  padding: 5rem 0;
  position: relative;
}
.how-section .section-title {
  font-family: 'General Sans', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin-bottom: .5rem;
}

.how-section .section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #F4A942, #E86B56);
  margin: 12px auto 0;
  border-radius: 2px;
}

.how-section .section-subtitle {
  text-align: center;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 3rem;
  font-size: 1.05rem;
}

.steps-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}
.step {
  text-align: center;
  flex: 0 0 220px;
  max-width: 220px;
}
.step .step-number {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F4A942, #E86B56);
  color: #fff;
  font-family: 'General Sans', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  box-shadow: 0 4px 16px rgba(244, 169, 66, 0.35);
}
.step h5 {
  font-family: 'General Sans', sans-serif;
  font-weight: 600;
  color: #fff;
  margin-bottom: .4rem;
}
.step p {
  color: rgba(255, 255, 255, 0.65);
  font-size: .9rem;
  line-height: 1.5;
}

/* Wave-style connector between steps */
.step-connector {
  display: flex;
  align-items: center;
  padding-top: 1.2rem;
  color: #F4A942;
  font-size: 1.5rem;
  flex: 0 0 50px;
  justify-content: center;
}

/* --- Wave Divider Before Footer --- */
.how-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: #0C2E3D;
}

/* --- Footer --- */
.landing-footer {
  background: #071520;
  color: rgba(255, 255, 255, .5);
  padding: 2.5rem 0;
  font-size: .9rem;
  font-family: 'Satoshi', sans-serif;
  position: relative;
  overflow: hidden;
}

/* Subtle monstera pattern overlay */
.landing-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60px 80px at 10% 50%, rgba(244, 169, 66, 0.03) 0%, transparent 70%),
    radial-gradient(ellipse 50px 70px at 90% 30%, rgba(26, 155, 158, 0.03) 0%, transparent 70%);
  pointer-events: none;
}

.landing-footer .footer-brand {
  font-family: 'General Sans', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: #F4A942;
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .3rem;
}
.landing-footer a {
  color: #F2917F;
  text-decoration: none;
}
.landing-footer a:hover {
  color: #E86B56;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991.98px) {
  .hero-headline { font-size: 2.2rem; }
  .hero-section { padding-top: 6rem; }
  .login-card { margin: 2rem auto 0; max-width: 380px; }
  .steps-row { flex-direction: column; align-items: center; gap: 1.5rem; }
  .step-connector { transform: rotate(90deg); padding: 0; }
  .hero-palms { height: 180px; }
}

@media (max-width: 767.98px) {
  .hero-headline { font-size: 1.85rem; }
  .hero-subtitle { font-size: 1rem; }
  .features-section .section-title,
  .how-section .section-title { font-size: 1.6rem; }
  .landing-nav .nav-link { display: none; }
  .login-card { padding: 1.6rem 1.3rem; }
  .hero-palms { height: 120px; }
  .hero-clouds { display: none; }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  .hero-clouds,
  .hero-shimmer,
  .hero-palm,
  .hero-section,
  .hero-sun,
  .hero-sun::before,
  .hero-reflection {
    animation: none !important;
  }
}