:root{
  --brand:#8d53fd;
  --brandLight:#c5a9fd;
  --text:#111111;
  --muted:#6b7280;
  --bg:#ffffff;
  --bgAlt:#f8fafc;
  --border:#e5e7eb;
}

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

html, body{ height:100%; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

/* header and nav */
.siteHeader{
  position:sticky; top:0; z-index:10;
  background:rgba(255,255,255,0.9);
  backdrop-filter:saturate(180%) blur(6px);
  border-bottom:1px solid var(--border);
}
.nav{
  max-width:1100px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px;
}
.brand{
  font-weight:700; font-size:20px; text-decoration:none; color:var(--text);
}
.menuButton{
  display:none;
  border:1px solid var(--border);
  background:var(--bg);
  padding:8px 10px; border-radius:10px;
}
.navLinks{
  list-style:none; margin:0; padding:0; display:flex; gap:18px; align-items:center;
}
.navLinks a{
  text-decoration:none; color:var(--text);
}
.navLinks .btnPrimary.small{ padding:8px 12px; font-size:14px; }

/* hero */
.hero{
  max-width:1100px; margin:40px auto; padding:0 20px;
  display:grid; gap:28px; align-items:center;
  grid-template-columns: 1.2fr 1fr;
}
.heroContent h1{
  font-size: clamp(28px, 5vw, 44px);
  line-height:1.15;
}
.heroContent p{
  color:var(--muted); margin-top:10px; font-size: clamp(16px, 2.5vw, 18px);
}
.heroActions{ margin-top:20px; display:flex; gap:12px; flex-wrap:wrap; }
.heroMedia img{
  width:100%; height:auto; border-radius:16px; border:1px solid var(--border);
  box-shadow:0 8px 28px rgba(0,0,0,0.08);
}

/* sections */
.section{ padding:64px 20px; }
.section.alt{ background:var(--bgAlt); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.sectionHead{ max-width:820px; margin:0 auto 28px auto; text-align:center; }
.sectionHead h2{ font-size: clamp(22px, 4vw, 32px); margin:0 0 6px 0; }
.sectionHead p{ color:var(--muted); margin:0; }

/* cards */
.cards{
  max-width:1100px; margin:0 auto; display:grid; gap:18px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.card{
  border:1px solid var(--border); border-radius:16px; background:#fff; padding:22px;
  box-shadow:0 8px 28px rgba(0,0,0,0.04);
}
.card h3{ margin:0 0 8px 0; }
.card p{ margin:0 0 12px 0; color:var(--muted); }
.list{ margin:0; padding-left:18px; }

/* about grid */
.gridTwo{
  max-width:1100px; margin:0 auto; display:grid; gap:18px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}

/* contact form */
.contactForm{
  max-width:720px; margin:0 auto; display:grid; grid-template-columns: repeat(2, 1fr);
  gap:16px; align-items:start;
}
.inputGroup{ display:flex; flex-direction:column; gap:6px; }
.inputGroup.full{ grid-column:1 / -1; }
label{ font-size:14px; color:var(--muted); }
input, textarea{
  padding:12px 14px; border:1px solid var(--border); border-radius:10px; font-size:16px; background:#fff;
}
input:focus, textarea:focus{ outline:2px solid var(--brandLight); border-color:transparent; }
.formNote{ grid-column:1 / -1; color:var(--muted); font-size:14px; margin-top:6px; }

/* buttons */
.btnPrimary{
  display:inline-block; padding:12px 18px; border-radius:12px; text-decoration:none;
  background:var(--brand); color:#fff; font-weight:600; border:1px solid transparent;
}
.btnPrimary:hover{ filter:brightness(1.03); }
.btnGhost{
  display:inline-block; padding:12px 18px; border-radius:12px; text-decoration:none;
  background:#fff; color:var(--brand); font-weight:600; border:1px solid var(--brandLight);
}
.btnGhost:hover{ background:var(--brandLight); color:#3a2b7a; }

/* footer */
.siteFooter{
  border-top:1px solid var(--border);
  text-align:center; padding:22px; color:var(--muted);
}

/* responsive */
@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: 1fr; }
  .gridTwo{ grid-template-columns: 1fr; }
  .menuButton{ display:inline-block; }
  .navLinks{ display:none; }
  .nav.open .navLinks{
    display:flex; position:absolute; right:20px; top:60px; flex-direction:column; gap:12px;
    background:#fff; border:1px solid var(--border); border-radius:14px; padding:12px 12px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
  }
}