/* ==========================================================================  
   1. Global Reset & Base  
   ========================================================================= */
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap');

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

:root {
  /* header heights for fixed header offset */
  --header-height: 80px;    /* desktop */
}
@media (max-width: 768px) {
  :root { --header-height: 60px; }
}
@media (max-width: 480px) {
  :root { --header-height: 50px; }
}

body {
  padding-top: var(--header-height);
  font-family: 'Roboto', Arial, sans-serif;
  line-height: 1.5;
  color: #fff;
  background: radial-gradient(circle, rgba(17,22,128,1) 55%, #000 88%);
  min-height: 100vh;
}

/* ==========================================================================  
   2. Hero Section  
   ========================================================================= */
.hero .landing-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto;
  gap: 1rem;
  align-items: center;
  padding: 2rem 1rem;
}
.hero .left-column,
.hero .right-column {
  flex: 1;
  min-width: 280px;
}
.hero .left-column img.logo {
  width: 120px;
  margin-bottom: 1rem;
}
.hero .left-column h1 {
  font-size: 2rem;
  margin-bottom: .5rem;
}
.hero .left-column h2 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.hero .left-column p {
  font-size: 1rem;
  text-align: justify;
}
.hero .cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 300px;
}
.hero .cta-buttons a {
  padding: .75rem;
  background: #007bff;
  color: #fff;
  border-radius: 6px;
  text-align: center;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.3s;
}
.hero .cta-buttons a:hover {
  background: #0056b3;
}

/* ==========================================================================  
   3. How It Works, Features, Testimonials  
   ========================================================================= */
.how-it-works,
.features,
.testimonials {
  padding: 2rem 1rem;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: 1.5rem;
}

/* ==========================================================================  
   4. Footer  
   ========================================================================= */
.site-footer,
.home-footer {
  padding: 1rem;
  text-align: center;
  background: rgba(0,0,0,0.2);
  color: #fff;
}

/* ==========================================================================  
   5. Micro-phone tweaks (≤360px)  
   ========================================================================= */
@media (max-width: 360px) {
  .hero .left-column h1 { font-size: 1.6rem; }
  .hero .left-column h2 { font-size: 1.2rem; }
  .cta-buttons a        { font-size: .9rem; padding: .5rem; }
}

/* ==========================================================================  
   6. Utility: Fluid Containers  
   ========================================================================= */
.container,
.hero .landing-container,
.main-content {
  width: 100%;
  max-width: 100%;
}