/* Airlert V1 Design System */
/* Based on design-contract.md and theme_for_ref_only tokens */

:root {
  /* COLORS (from colors.ts) */
  --bg-body: #FFFFFF;

  /* Text */
  --text-primary: rgba(15, 23, 42, 0.8);
  /* #0F172A @ 0.8 */
  --text-secondary: #64748B;
  --text-label: #94A3B8;
  --text-inverse: #FFFFFF;

  /* Actions */
  --bg-action-primary: #0F172A;
  --text-action-primary: #FFFFFF;

  /* Semantic - Consensus (Green) */
  --bg-consensus: #059669;
  --text-consensus: #FFFFFF;

  /* Dividers & Surfaces */
  --border-divider: #E6EDF5;
  --bg-surface-soft: #F6FAFF;
  --bg-card: #FFFFFF;

  /* TYPOGRAPHY (from typography.ts) */
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;

  /* Hero Title */
  --font-size-hero: 25px;
  --line-height-hero: 32px;
  --weight-hero: 700;
  --tracking-hero: -0.63px;

  /* Hero Subtitle */
  --font-size-subtitle: 12px;
  --line-height-subtitle: 18.3px;
  --weight-subtitle: 400;

  /* Action Label */
  --font-size-action: 14px;
  --line-height-action: 20px;
  --weight-action: 600;

  /* Meta / Body */
  --font-size-body: 14px;
  --line-height-body: 20px;
  --weight-body: 400;

  /* RADIUS (from radius.ts) */
  --radius-input: 8px;
  --radius-button: 12px;
  --radius-card: 12px;
  --radius-pill: 999px;

  /* ELEVATION (from elevation.ts) */
  --shadow-action: 0 3px 6px rgba(0, 0, 0, 0.12);
  --shadow-consensus: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* RESET */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-body);
  color: var(--text-primary);
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* UTILITIES */
.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 40px 24px;
  width: 100%;
}

.text-center {
  text-align: center;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.gap-4 {
  gap: 16px;
}

.gap-8 {
  gap: 32px;
}

/* TYPOGRAPHY CLASSES */
h1 {
  font-family: var(--font-family);
  font-size: var(--font-size-hero);
  line-height: var(--line-height-hero);
  font-weight: var(--weight-hero);
  letter-spacing: var(--tracking-hero);
  color: var(--text-primary);
  margin-bottom: 8px;
}

.subtitle {
  font-family: var(--font-family);
  font-size: var(--font-size-subtitle);
  line-height: var(--line-height-subtitle);
  font-weight: var(--weight-subtitle);
  color: var(--text-secondary);
}

/* COMPONENTS */

/* Header */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  margin-bottom: 40px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 20px;
  color: var(--text-primary);
}

.logo-icon {
  width: 32px;
  height: 32px;
  background-color: var(--bg-action-primary);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-inverse);
}

.nav-links {
  display: none;
}

@media (min-width: 768px) {
  .nav-links {
    display: flex;
    gap: 32px;
  }

  .nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
  }

  .nav-links a:hover {
    color: var(--text-primary);
  }
}

.btn-secondary {
  display: none;
}

@media (min-width: 768px) {
  .btn-secondary {
    display: inline-flex;
    padding: 8px 20px;
    border: 1px solid var(--border-divider);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    background: transparent;
  }

  .btn-secondary:hover {
    background-color: var(--bg-surface-soft);
  }
}

/* Hero (Revamped) */
.hero {
  display: grid;
  gap: 48px;
  margin: 40px 0 80px;
  align-items: center;
}

@media (min-width: 1024px) {
  .hero {
    grid-template-columns: 1.2fr 1fr;
    gap: 80px;
    margin: 80px 0 120px;
  }
}

.hero-content {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

h1 {
  font-family: var(--font-family);
  font-size: 48px;
  line-height: 0.95;
  font-weight: var(--weight-hero);
  letter-spacing: var(--tracking-hero);
  color: var(--text-primary);
  margin-bottom: 0;
}

h1 span {
  display: block;
}

h1 .highlight {
  font-style: italic;
  font-weight: 400;
  /* Editorial contrast */
  color: var(--text-secondary);
  /* Calm contrast instead of Teal */
}

@media (min-width: 768px) {
  h1 {
    font-size: 72px;
  }
}

.subtitle {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 300;
  color: var(--text-secondary);
  max-width: 480px;
}

/* Hero Actions */
.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  margin-top: 16px;
}

/* Badges Wrapper */
.badges-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Aligns content to left */
  gap: 16px;
  width: 100%;
}

@media (min-width: 768px) {
  .badges-wrapper {
    align-items: flex-start;
    /* Ensure left alignment on desktop */
  }
}

/* Store Badges Container */
.badges-container {
  display: flex;
  flex-direction: row;
  /* Always row */
  gap: 24px;
  /* Generous spacing */
  align-items: center;
}

/* Official Store Badge Style */
.store-badge-official {
  height: 56px;
  /* Large, clickable target */
  width: auto;
  /* Preserve aspect ratio */
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
  display: block;
}

.store-badge-official:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Launch Label (Playful/Polished) */
.launch-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.2px;
  background: transparent;
  padding: 0;
  border: none;
  box-shadow: none;
  display: inline-block;
  /* Center under badges relative to total width or just left align? 
       "Center it beneath the badge row" - implies centered relative to the group.
       Flex wrapper handles this if align-items is center. 
       But hero alignment is left.
       Let's try centering it relative to the badges group.
    */
  align-self: flex-start;
  /* Left align to match badges start */
  margin-left: 4px;
  /* Slight offset */
}

/* If badges-wrapper centers, then label centers. 
   Hero content text-align is left.
   Let's ensure the wrapper centers its children if we want the label centered under the badges.
   "Center it beneath the badge row"
*/
.badges-wrapper {
  align-items: center;
  /* Center badges and label relative to each other */
}

@media (min-width: 1024px) {

  /* On desktop, if the hero is split 50/50, and text is left aligned.
     We likely want the badges left aligned to the text.
     So the label should be centered under the badges? No, usually left aligned or centered relative to badges.
     Let's 'Center it beneath the badge row' as requested.
  */
  .badges-wrapper {
    align-items: center;
    /* This centers them relative to each other */
    margin-right: auto;
    /* But the whole wrapper is left aligned in the parent flex */
  }
}

/* Small visual touch for the label */
.launch-label {
  color: var(--text-primary);
  opacity: 0.8;
  font-family: var(--font-family);
}

/* Exciting Coming Soon Label */
.coming-soon-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-primary);
  background: linear-gradient(90deg, #E2E8F0, #F1F5F9);
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-divider);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.coming-soon-label::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  background-color: var(--bg-consensus);
  /* Green for "Go" energy or status */
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
}

/* Phone Frame (Simplified) */
.phone-frame {
  position: relative;
  width: 280px;
  height: 580px;
  background: #111;
  border-radius: 40px;
  border: 12px solid #111;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
  margin: 0 auto;
  overflow: hidden;
}

.phone-screen {
  width: 100%;
  height: 100%;
  background: var(--bg-surface-soft);
  /* Fallback */
  background: linear-gradient(180deg, var(--bg-surface-soft) 0%, #E2E8F0 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-placeholder-icon {
  font-size: 64px;
  color: var(--text-label);
  opacity: 0.5;
}

/* Dynamic glow behind phone */
.phone-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(circle at center, rgba(15, 23, 42, 0.1) 0%, transparent 70%);
  z-index: -1;
  transform: scale(1.5);
}

/* Features Grid */
.features-section {
  padding: 80px 0;
  border-top: 1px solid var(--border-divider);
}

.features-grid {
  display: grid;
  gap: 48px;
}

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

.features-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.feature-item {
  display: flex;
  gap: 24px;
}

.feature-icon {
  width: 48px;
  height: 48px;
  background-color: var(--bg-surface-soft);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  flex-shrink: 0;
}

.feature-content h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.feature-content p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* How It Works */
.how-it-works {
  padding: 80px 0;
  border-top: 1px solid var(--border-divider);
  background-color: var(--bg-surface-soft);
  text-align: center;
}

.section-title {
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 64px;
  color: var(--text-primary);
}

.steps-grid {
  display: grid;
  gap: 40px;
  position: relative;
}

@media (min-width: 768px) {
  .steps-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 48px;
  }

  /* Dashed connecting line */
  .steps-connector {
    position: absolute;
    top: 32px;
    left: 15%;
    right: 15%;
    border-top: 2px dashed var(--border-divider);
    z-index: 0;
  }
}

.step-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.step-icon {
  width: 64px;
  height: 64px;
  background-color: #fff;
  border: 1px solid var(--border-divider);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  box-shadow: var(--shadow-action);
  /* Reusing subtle shadow */
}

.step-title {
  font-size: 20px;
  font-weight: 700;
}

.step-desc {
  font-size: 14px;
  color: var(--text-secondary);
  max-width: 200px;
}

/* Footer (Expanded) */
.footer-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border-divider);
  margin-bottom: 32px;
}

@media (min-width: 768px) {
  .footer-main {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.footer-nav {
  display: flex;
  gap: 24px;
}

/* CSS-only Modal (Coming Soon) */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-overlay:target {
  display: flex;
  opacity: 1;
}

.modal-content {
  background: white;
  padding: 32px;
  border-radius: 16px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  position: relative;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 24px;
  line-height: 1;
}

.badges-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Center badges and label */
  gap: 8px;
  /* Space between badges and label */
}

/* Badge specific sizing to avoid pixelation */
.store-badge {
  height: 40px;
  /* Fixed height for consistency */
  width: auto;
  /* Maintain aspect ratio */
  display: block;
  /* Remove inline spacing */
}

.coming-soon-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.disclaimer {
  font-size: 12px;
  color: var(--text-label);
  /* Even more muted */
  font-style: italic;
  max-width: 600px;
}