:root{
  --primary:#2d6cdf;
  --accent:#00c6ff;
  --muted:#6b7280;
  --bg:#f4f7fb;
  --card:#ffffff;
  --radius:12px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,#e9f0ff 0%, #f7fbff 100%);
  color:#1f2937;
}

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

/* header */
.site-header{background:linear-gradient(90deg,var(--primary),var(--accent));color:#fff;padding:0.75rem 0;box-shadow:0 6px 18px rgba(13,42,92,0.12)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:0.75rem}
.brand h1{margin:0;font-size:1.25rem}
.logo{width:48px;height:48px;border-radius:8px;object-fit:cover}

/* nav buttons */
.main-nav .btn-nav{background:transparent;color:#fff;font-weight:600;padding:0.5rem 1rem;border-radius:8px;text-decoration:none;transition:0.3s;margin-left:0.5rem}
.main-nav .btn-nav:hover{background:rgba(255,255,255,0.15)}

/* main content */
.main-content{display:flex;align-items:center;justify-content:center;padding:3rem 1rem}
.welcome-card{background:var(--card);border-radius:var(--radius);padding:2rem;text-align:center;width:100%;box-shadow:0 8px 30px rgba(15,30,80,0.06)}
.welcome-card h2{margin:0 0 0.5rem 0;font-size:1.5rem}
.welcome-card p{margin:0 0 1.25rem 0;color:var(--muted)}

/* buttons */
.btn{display:inline-block;background:var(--primary);color:white;padding:0.6rem 1.2rem;border-radius:10px;text-decoration:none;font-weight:600;border:none;cursor:pointer;transition:0.25s}
.btn:hover{opacity:0.9}
.btn.outline{background:transparent;border:2px solid var(--primary);color:var(--primary)}
.btn + .btn{margin-left:0.5rem}

/* forms */
.form-page{padding:2rem 0}
.form-card{background:var(--card);border-radius:var(--radius);padding:2rem;max-width:560px;margin:0 auto;box-shadow:0 8px 30px rgba(15,30,80,0.06)}
.form-card.wide{max-width:760px}
.input-control{margin-bottom:1.8rem}
.input-control label{display:block;margin-bottom:0.5rem;font-weight:600;color:#374151}
.input-control input[type="text"],
.input-control input[type="email"],
.input-control input[type="password"],
.input-control input[type="date"],
.input-control input[type="number"],
.input-control select{width:100%;padding:0.75rem 0.85rem;border-radius:10px;border:1px solid #e6e9ef;outline:none;transition:0.15s}
.input-control input:focus,
.input-control select:focus{box-shadow:0 6px 18px rgba(45,108,223,0.08);border-color:var(--primary)}
.form-card h2{margin-top:0;text-align:center}
.site-footer{margin-top:2.5rem;background:linear-gradient(90deg,var(--primary),var(--accent));color:#fff;padding:0.8rem 0;text-align:center}

/* About page */
.about-page{padding:2.5rem 0}
.about-card{background:var(--card);border-radius:var(--radius);padding:2rem;max-width:900px;margin:0 auto;box-shadow:0 8px 30px rgba(15,30,80,0.06);text-align:center}

/* responsive */
@media(max-width:800px){
  .header-inner{flex-direction:column;align-items:flex-start}
  .main-nav{margin-top:0.5rem}
  .brand h1{font-size:1rem}
}