/* styles.css
   Color palette:
   --majorelle: #4F46E5
   --aero:     #00B8D9
   --emerald:  #34D399
   --coral:    #FB774C
   --charcoal: #334155
*/

/* ========== Base / variables ========== */
:root{
  --majorelle: #4F46E5;
  --aero:      #00B8D9;
  --emerald:   #34D399;
  --coral:     #FB774C;
  --charcoal:  #334155;
  --majorelle-30: rgba(102, 51, 255, 0.3);

  /* Light theme variables */
  --bg: #f9fafb;
  --surface: #f8fafc;
  --muted: #6b7280;
  --text: #0f172a;
  --accent: var(--majorelle);
  --primary-contrast: #ffffff;
  --card-shadow: 0 6px 18px rgba(17,24,39,0.06);
  --glass: rgba(255,255,255,0.6);
}

/* Dark mode defaults (prefers) */
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b1020;
    --surface: #071028;
    --muted: #93a3bf;
    --text: #e6eef9;
    --accent: var(--aero);
    --primary-contrast: #071028;
    --card-shadow: 0 10px 30px rgba(2,6,23,0.6);
    --glass: rgba(255,255,255,0.03);
  }
}

/* Typography & layout */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,var(--bg),var(--surface));
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  font-size:16px;
}

/* container */
.container{
  max-width:1100px;
  margin:0 auto;
  padding:2rem;
}

/* header */
.site-header{
  background:transparent;
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.header-inner{
  display:flex;
  gap:1rem;
  align-items:center;
  justify-content:space-between;
  padding:0.5rem 0;
}
.brand{
  display:flex;
  gap:0.75rem;
  align-items:center;
  text-decoration:none;
  color:var(--text);
}
.brand-logo{
  width:40px;height:40px;border-radius:8px;
  box-shadow: var(--card-shadow);
}
.brand-name{font-weight:700}

/* nav */
.main-nav{
  display:flex;
  gap:1rem;
}
.main-nav a{
  text-decoration:none;
  color:var(--muted);
  padding:0.35rem 0.5rem;
  border-radius:6px;
  transition:all .18s ease;
}
.main-nav a:hover{color:var(--text);background:var(--glass)}

/* header actions */

/* hero */
.hero{padding:3rem 0}
.hero-grid{display:grid;grid-template-columns:1fr 520px;gap:2.5rem;align-items:center}
.title{font-size:2.25rem;margin:0 0 0.5rem;font-weight:800;letter-spacing:-0.02em}
.subtitle{margin:0 0 1.25rem;color:var(--muted);max-width:50ch}
.hero-features{display:flex;gap:1rem;list-style:none;padding:0;margin:0;color:var(--muted);font-weight:600}

/* section headers */
.section-header{text-align:center;margin-bottom:1.5rem}
.section-header h2{font-size:1.5rem;margin:0}
.section-header p{color:var(--muted)}

/* features */
.features{padding:2rem 0}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(22rem,1fr));gap:1rem}
.feature-card{background:var(--surface);padding:1.25rem;border-radius:12px;box-shadow:var(--card-shadow);border:1px solid rgba(0,0,0,0.03);}
.feature-card:hover{transform: translateY(-5px);box-shadow: 0 6px 15px var(--majorelle-30);}
.feature-card h3{margin:0 0 0.5rem}

/* about */
.about{padding:2rem 0}
.about-grid{display:grid;grid-template-columns:1fr 420px;gap:2rem;align-items:center}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 360px;gap:2rem;align-items:start}
.contact-info h3{margin:0.5rem 0 0.25rem}

/* footer */
.site-footer{border-top:1px solid rgba(0,0,0,0.04);padding:1.25rem 0;margin-top:3rem;background:transparent}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.footer-nav{display:flex;gap:1rem}
.small{font-size:0.9rem}
.muted{color:var(--muted)}

/* responsiveness */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr; padding-bottom:1rem}
  .about-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .header-inner{flex-direction:column;align-items:flex-start;gap:0.5rem}
  .main-nav{display:none} /* simplify header on small screens */
}

.hero {
  padding: 4rem 1.5rem;
}

.container.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.hero-logo img {
  max-width: 100%;
  height: auto;
  display: block;
}

.hero-content .title {
  font-size: 2.5rem;
  margin: 0 0 1rem;
  color: #1f2937;
}

.hero-content .subtitle {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  color: #4b5563;
}

.hero-features {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1.5rem;
  font-weight: 500;
  color: #1f7ae0; /* brand color */
}

.hero-features li::before {
  content: "\2713";    /* check mark */
  margin-right: 0.5rem;
}

@media (max-width: 768px) {
  .container.hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-features {
    justify-content: center;
    flex-wrap: wrap;
  }
}