/* styles.css - simple, professional layout */
:root{
  --accent: #1e90ff;
  --bg: #ffffff;
  --muted: #666;
  --max-width: 1100px;
}

*{box-sizing: border-box}
body{font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; color:#222; background:var(--bg); line-height:1.6}
.container{max-width:var(--max-width); margin:0 auto; padding:1.5rem}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:0.5rem 0}
.site-header{position:sticky; top:0; background:rgba(255,255,255,0.95); backdrop-filter: blur(4px); border-bottom:1px solid #eee; z-index:50}
.logo{font-weight:700; color:#111; text-decoration:none}
.nav a{margin-left:1rem; color:var(--muted); text-decoration:none; font-size:0.95rem}
.nav a:hover{color:var(--accent)}

/* Hero */
.hero{height:72vh; min-height:520px; display:flex; align-items:center; position:relative; background-size:cover; background-position:center}
.hero .overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,10,0.45), rgba(10,10,10,0.55));}
.hero-content{position:relative; color:#fff; z-index:2; padding:2rem; max-width:900px}
.hero h1{font-size:2.4rem; margin:0 0 0.5rem}
.tagline{font-size:1.1rem; margin-bottom:1rem; opacity:0.95}
.btn{display:inline-block; padding:0.7rem 1rem; border-radius:8px; text-decoration:none; border:none; cursor:pointer}
.primary{background:var(--accent); color:white; box-shadow: 0 6px 18px rgba(30,144,255,0.18)}

/* Sections */
.section{padding:3rem 0}
.alt-bg{background:#fbfcfe}
.split{display:grid; grid-template-columns:1fr 420px; gap:2rem; align-items:center}
.split img{width:100%; border-radius:8px; display:block; object-fit:cover; max-height:320px}

/* Cards */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.card{background:white; padding:1.2rem; border-radius:10px; box-shadow:0 6px 18px rgba(20,20,20,0.04)}
.card h3{margin-top:0}
.image-card img{width:100%; height:100%; object-fit:cover; border-radius:8px}

/* How */
.how-image img{width:100%; border-radius:8px; margin-top:1rem}

/* FAQ */
.faq h4{margin-bottom:0.2rem; margin-top:1rem}

/* Contact */
.contact-grid{display:grid; grid-template-columns:1fr 420px; gap:2rem; align-items:start}
.contact-image img{width:100%; border-radius:8px}
.contact-form{background:white; padding:1rem; border-radius:10px; box-shadow:0 6px 18px rgba(20,20,20,0.04)}
.contact-form label{display:block; margin-bottom:0.6rem; font-size:0.95rem}
.contact-form input, .contact-form textarea{width:100%; padding:0.6rem; border:1px solid #e6e9ef; border-radius:6px; margin-top:0.25rem}
.contact-form button{margin-top:0.6rem;}

/* Footer */
.site-footer{background:#f6f7fb; color:var(--muted); padding:2rem 0; font-size:0.95rem}

/* Responsive */
@media (max-width:980px){
  .split, .contact-grid{grid-template-columns:1fr}
  .card-grid{grid-template-columns:1fr 1fr}
  .hero{height:64vh}
}
@media (max-width:640px){
  .nav{display:none}
  .hero h1{font-size:1.6rem}
  .hero{min-height:420px}
  .card-grid{grid-template-columns:1fr}
}