/* Guita Website — Design tokens from design-plan.md & guita_colors.dart */

:root {
  /* Azulejo blues */
  --azulejo-dark: #2238CA;
  --azulejo-primary: #4253C9;
  --azulejo-light: #6778D4;
  --primary: #4A5FD4;
  --primary-dark: #2A3FCC;
  /* Accents */
  --teal: #448D7C;
  --teal-light: #5EC0AA;
  --merlot: #664A76;
  --merlot-light: #AC7EC7;
  --antique-pink: #E391B2;
  --dandelion: #FFDC6B;
  /* Surfaces */
  --surface: #FAFAFA;
  --surface-variant: #F5F5F5;
  --white: #FFFFFF;
  /* Text */
  --on-surface: #212121;
  --on-surface-variant: #616161;
  --on-surface-muted: #9E9E9E;
  --on-primary: #FFFFFF;
  /* Gradients */
  --gradient-primary: linear-gradient(130deg, #4A5FD4 2%, #2A3FCC 89%);
  --gradient-hero: linear-gradient(165deg, #4A5FD4 3%, #2A3FCC 94%);
  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  /* Typography */
  --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  /* Breakpoints (for reference in media queries) */
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--on-surface);
  background: var(--white);
}

main {
  min-height: 100vh;
}

/* Hero */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2xl) var(--space-xl);
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: var(--white);
  z-index: 0;
}

/* Big star — full visibility, centered */
.hero-star {
  width: clamp(360px, 55vw, 600px);
  height: auto;
  z-index: 1;
  margin-bottom: var(--space-lg);
}

@media (min-width: 768px) {
  .hero-star {
    width: clamp(440px, 48vw, 700px);
  }
}

/* Language toggle — on white */
.lang-toggle {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-xl);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.lang-btn {
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--on-surface-variant);
  background: transparent;
  border: 1px solid var(--outline-variant, #E0E0E0);
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.lang-btn:hover {
  color: var(--azulejo-primary);
  background: var(--surface);
  border-color: var(--azulejo-light);
}

.lang-btn.active {
  color: var(--on-primary);
  background: var(--gradient-primary);
  border-color: var(--azulejo-primary);
}

.lang-sep {
  color: var(--on-surface-muted);
  font-size: 0.75rem;
}

@media (max-width: 480px) {
  .lang-toggle {
    top: var(--space-md);
    right: var(--space-md);
  }
}

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-title {
  margin: 0;
  font-size: clamp(2.5rem, 8vw, 4rem);
  font-weight: 700;
  color: var(--azulejo-primary);
  letter-spacing: -0.02em;
}

.hero-tagline {
  margin: var(--space-md) 0 0;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--on-surface-variant);
}

/* Countdown */
.countdown {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
  margin-bottom: var(--space-sm);
}

.countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 4rem;
}

.countdown-value {
  display: block;
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 700;
  color: var(--on-primary);
  line-height: 1.2;
}

.countdown-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.countdown-subtitle {
  margin: 0;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
}

/* Countdown CTA */
.countdown-cta .countdown-value {
  color: var(--azulejo-primary);
}

.countdown-cta .countdown-label {
  color: var(--on-surface-variant);
}

/* Sections */
.section {
  padding: var(--space-3xl) var(--space-xl);
}

.section-light {
  background: var(--white);
}

.section-blue {
  background: var(--gradient-hero);
  color: var(--on-primary);
}

.section-blue .section-title {
  color: var(--on-primary);
}

.section-blue .intro-text p {
  color: rgba(255, 255, 255, 0.95);
}

.section-blue .intro-text strong {
  color: var(--on-primary);
}

.section-blue .intro-text em {
  color: rgba(255, 255, 255, 0.9);
}

.section-surface {
  background: var(--surface);
}

.container {
  max-width: 960px;
  margin: 0 auto;
}

.section-title {
  margin: 0 0 var(--space-2xl);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  color: var(--azulejo-primary);
  text-align: center;
}

/* Intro text */
.intro-text {
  max-width: 640px;
  margin: 0 auto;
}

.intro-text p {
  margin: 0 0 var(--space-lg);
}

.intro-text p:last-child {
  margin-bottom: 0;
}

/* Features grid */
.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.feature-card {
  padding: var(--space-xl);
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(34, 56, 202, 0.06);
  border: 1px solid var(--surface-variant);
}

.feature-card h3 {
  margin: 0 0 var(--space-sm);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--azulejo-primary);
}

.feature-card p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--on-surface-variant);
}

.feature-icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-md);
  border-radius: 10px;
}

.feature-icon-bank {
  background: linear-gradient(135deg, var(--azulejo-primary), var(--azulejo-light));
}

.feature-icon-dual {
  background: linear-gradient(135deg, var(--teal-light), var(--teal));
}

.feature-icon-privacy {
  background: linear-gradient(135deg, var(--merlot-light), var(--merlot));
}

.feature-icon-portugal {
  background: linear-gradient(135deg, var(--azulejo-dark), var(--azulejo-primary));
}

.feature-icon-offline {
  background: linear-gradient(135deg, var(--dandelion), #E9BD30);
}

.feature-icon-trust {
  background: linear-gradient(135deg, var(--antique-pink), #BC4D79);
}

/* CTA section */
.cta-section {
  text-align: center;
}

.cta-section .countdown {
  margin: var(--space-xl) 0 var(--space-sm);
}

.countdown-subtitle-cta {
  margin: 0 0 var(--space-xl);
  font-size: 0.875rem;
  color: var(--on-surface-muted);
}

.waitlist-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
  margin-bottom: var(--space-md);
}

.waitlist-form input {
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-sans);
  font-size: 1rem;
  border: 2px solid var(--outline-variant, #E0E0E0);
  border-radius: 8px;
  min-width: 240px;
}

.waitlist-form input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.waitlist-form button {
  padding: var(--space-md) var(--space-xl);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--on-primary);
  background: var(--gradient-primary);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.waitlist-form button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.waitlist-note {
  margin: 0;
  font-size: 0.875rem;
  color: var(--on-surface-muted);
}

/* Footer */
.footer {
  padding: var(--space-2xl) var(--space-xl);
  background: var(--azulejo-dark);
  color: var(--on-primary);
  text-align: center;
}

.footer-tagline {
  margin: 0;
  font-size: 0.9375rem;
  opacity: 0.95;
}

.footer-domain {
  margin: var(--space-sm) 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  opacity: 0.9;
}

/* Launch reached state */
.countdown.launch-reached .countdown-item {
  display: none;
}

.countdown.launch-reached .countdown-item:first-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 100%;
}

.countdown.launch-reached .countdown-value {
  font-size: 1.25rem;
}