/* assets/css/styles.css */
/* Clean, modern, responsive styles for Stylera */
:root{
  --bg:#faf7f5;
  --card:#ffffff;
  --accent:#ff6b9a;
  --muted:#6b6b6b;
  --glass: rgba(255,255,255,0.7);
  --maxw:1100px;
  --radius:14px;
  --shadow: 0 8px 24px rgba(15,15,15,0.08);
  --fw-regular: 400;
  --fw-medium: 600;
}

/* reset */
*{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, #fff 0%, #fbf6f8 100%);
  color:#111827;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  padding-bottom:60px;
}

/* container */
.container{max-width:var(--maxw);margin:0 auto;padding:0 12px}

/* header/nav */
.site-header{
  background:transparent;
  padding:6px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.brand .logo{
  width:130px;height:100px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:18px;
}
.brand .logo img {max-width:100%; padding:10px; width:unset; height:unset;}
.brand h1{font-size:20px;margin:0}
.main-nav{display:flex;gap:16px;align-items:center}
.main-nav a{color:var(--muted);text-decoration:none;padding:8px;border-radius:10px}
.main-nav a:hover{color:var(--accent);background:rgba(255,107,154,0.06)}

/* --- MOBILE STYLES --- */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--muted);
}

/* hero */
.hero{
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.4));
  border-radius:16px;padding:36px;margin-top:18px;display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:center;box-shadow:var(--shadow)
}
.hero h2{font-size:32px;margin:0 0 8px;color: #273e06}
.hero p{color:var(--muted);margin:0 0 16px}
.hero .cta{display:flex;gap:12px}
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:12px;border:0;font-weight:600;cursor:pointer;text-decoration:none;
}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(255,107,154,0.18)}
.btn-ghost{background:transparent;border:1px solid rgba(0,0,0,0.06);color:var(--muted)}

/* card */
.card{background:var(--card);padding:18px;border-radius:12px;box-shadow:var(--shadow)}

/* breadcrumbs */
.breadcrumbs{font-size:13px;color:var(--muted);margin:12px 0;color: #273e06}
.breadcrumbs a{color:var(--muted);text-decoration:none}
.breadcrumbs a:hover{color:var(--accent)}

/* grid of features */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.feature h3{margin:8px 0 4px;font-size:16px}
.feature p{margin:0;color:var(--muted);font-size:14px;color: #273e06}

/* quiz card */
.quiz-card{padding:20px;border-radius:12px}
.progress-wrap{height:14px;background:#f1e9ee;border-radius:999px;overflow:hidden}
.progress{height:14px;background:linear-gradient(90deg,#ffd1de,#ff9bb3);width:0%}

/* form */
.form-row{display:flex;gap:12px;flex-wrap:wrap}
.input, .select{
  padding:10px 12px;border-radius:10px;border:1px solid #eee;background:transparent;min-width:0;
}
.input[type="email"]{width:100%}

/* footer */
.site-footer{margin-top:40px;padding:30px 0;text-align:center;color:var(--muted);font-size:14px}

/* responsive */
@media (max-width:900px){
  .hero{grid-template-columns:1fr; padding:18px}
  .grid{grid-template-columns:repeat(2,1fr)}

  .menu-toggle {
    display: block;
    margin-right: 18px;
  }

  .main-nav {
    display: none;
    position: absolute;
    top: 80px; /* below header */
    right: 20px;
    background: white;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 1000;
    width: 180px;
  }
  .main-nav a {width: 100%; text-align: center;}

  .main-nav.active {
    display: flex;
  }

  .brand .logo{
    width:100px;height:70px;border-radius:10px;
  }
}

/* small utilities */
.row{display:flex;gap:12px;align-items:center}
.center{text-align:center}
.img-cover{width:100%;height:240px;object-fit:cover;border-radius:10px; object-position:center 100%;}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card-grid .card{padding:12px}
@media(max-width:900px){.card-grid{grid-template-columns:repeat(2,1fr)}}