/* styles.css - color scheme: white, magenta, orange */
:root{
  --magenta:#3c0130;
  --orange:#3c0130;
  --white:#ffffff;
  --text:#222;
  --muted:#666;
  --max-width:1100px;
}
*{box-sizing:border-box}
body{font-family:Arial,Helvetica,sans-serif;margin:0;color:var(--text);background:var(--white);}
.header-inner, .footer-inner, .site-main {max-width:var(--max-width);margin:0 auto;padding:20px;}
.site-header{background:linear-gradient(90deg,var(--magenta),var(--orange));color:var(--white);padding:12px 0;position:sticky;top:0;z-index:10;}
.logo{display:flex;align-items:center;text-decoration:none;color:var(--white);}
.logo-h{background:var(--white);color:var(--magenta);font-weight:10;font-size:5px;padding:5px 5px;border-radius:6px;margin-right:5px;}
.logo-text{font-weight:700;font-size:28px;}
.main-nav{margin-left:auto;display:flex;gap:18px;}
.main-nav a{color:var(--white);text-decoration:none;padding:8px 10px;border-radius:6px;}
.main-nav a:hover{background:rgba(255,255,255,0.12);}

.site-main{padding:30px 20px;}

.hero{display:flex;gap:30px;align-items:center;background:#fff;border-radius:8px;padding:20px;box-shadow:0 3px 12px rgba(0,0,0,0.06);}
.hero img{max-width:40%;border-radius:8px;}
.hero .hero-text h1{margin:0 0 12px;font-size:28px;color:var(--magenta);}
.cta{display:inline-block;background:var(--orange);color:var(--white);padding:10px 14px;border-radius:6px;text-decoration:none;margin-top:10px;}

.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:24px;}
.card{padding:16px;border-radius:8px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.05);}

.section-title{color:var(--magenta);margin-bottom:12px;}

.site-footer{background:#3c0130;color:#fff;padding:20px 0;margin-top:30px;}
.footer-inner{display:flex;gap:20px;justify-content:space-between;flex-wrap:wrap;}
.footer-col a{color:#fff;text-decoration:none;}
.footer-bottom{text-align:center;margin-top:12px;color:#ccc;font-size:14px;}

/* form/inputs */
.input, input[type="text"], input[type="email"], input[type="password"], select {width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;margin-top:6px;margin-bottom:12px;}
.btn{display:inline-block;padding:10px 14px;border-radius:6px;background:var(--magenta);color:#fff;text-decoration:none;border:none;cursor:pointer;}
.small{font-size:14px;color:var(--muted);}

/* responsive */
@media(max-width:800px){
  .hero{flex-direction:column;}
  .main-nav{display:flex;flex-wrap:wrap;gap:8px;}
}