:root{
  --accent:#2b8aef;
  --white:#ffffff;
  --muted:#dbe7f8;
  --card-bg:#ffffff;
  --text-dark:#0f1720;
}

/* reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: "Segoe UI", Roboto, system-ui, Arial, sans-serif;
  color:var(--text-dark);
  background:#f6f8fb;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  direction:ltr;
}

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

/* header */
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,0.6);backdrop-filter:blur(6px);border-bottom:1px solid rgba(15,23,32,0.04)}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700;color:var(--accent);text-decoration:none;font-size:1.05rem}
.main-nav{display:flex;gap:1rem}
.main-nav a{color:var(--text-dark);text-decoration:none;padding:.5rem .6rem;border-radius:6px}
.main-nav a:hover{background:rgba(43,138,239,0.06)}
.menu-toggle{display:none;background:transparent;border:0;font-size:1.2rem;padding:.4rem}

/* hero background: local image images/bg.jpg */
.hero{
  position:relative;
  min-height:70vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background-image:url('images/bg.jpg'); /* ensure image uploaded at images/bg.jpg */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
.hero .overlay{
  position:absolute;inset:0;background:linear-gradient(rgba(2,6,23,0.55), rgba(2,6,23,0.45));z-index:1;
}
.hero-content{position:relative;z-index:2;text-align:center;padding:2rem;color:var(--white);max-width:1000px}
.hero-content h1{font-size:2.2rem;margin-bottom:.6rem}
.hero-content p{color:rgba(255,255,255,0.9);margin-bottom:1rem}
.btn{display:inline-block;background:var(--accent);color:var(--white);padding:.6rem 1rem;border-radius:8px;text-decoration:none;font-weight:600}

/* sections */
.section{padding:2.2rem 1rem}
.section.container{background:var(--card-bg);border-radius:12px;margin:1.2rem auto;color:var(--text-dark);box-shadow:0 8px 30px rgba(2,6,23,0.04)}
.section h2{margin-bottom:.6rem}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card{padding:1rem;border-radius:10px;background:linear-gradient(180deg,#fff,#fbfdff);box-shadow:0 6px 18px rgba(2,6,23,0.03)}
.card h3{margin-top:0}

/* footer */
.site-footer{padding:1.2rem 1rem;text-align:center;color:#666;background:transparent}

/* responsive */
@media (max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){
  .grid{grid-template-columns:1fr}
  .main-nav{display:none}
  .menu-toggle{display:block}
  .hero-content h1{font-size:1.6rem}
  .hero{background-attachment:scroll}
}