:root{
    --blue-dark:#065299;
    --blue-sea:#00AEEF;
    --white:#ffffff;
    --bg:#d8e2e7;
    --bg1:#eaf8ff;
  }
  
  /* reset */
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:Inter, system-ui, Arial, sans-serif;background:var(--bg1);color:var(--blue-dark);line-height:1.45}
  .container{max-width:1100px;margin:0 auto;padding:20px}
  
  /* NAVBAR */
  .navbar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:var(--white);box-shadow:0 2px 8px rgba(0,0,0,0.04)}
  .navbar .logo a{display:flex;align-items:center;gap:8px;color:var(--blue-dark);text-decoration:none;font-weight:700;font-size:18px}
  .navbar nav a{margin-left:18px;color:var(--blue-dark);text-decoration:none;font-weight:600}
  .navbar nav a.btn-login{background:var(--blue-dark);color:var(--white);padding:8px 12px;border-radius:8px}
  .navbar nav a.btn-Register{background:var(--blue-dark);color:var(--white);padding:8px 12px;border-radius:8px}
  
  /* HERO */
  .hero{background:var(--white);padding:40px;border-radius:12px;margin-top:18px;display:flex;gap:20px;align-items:center;box-shadow:0 8px 30px rgba(2,52,86,0.05)}
  .hero .text h1{font-size:40px;color:var(--blue-dark);margin-bottom:12px}
  .hero .text p{font-size:18px;color:#065299}
  .hero img{border-radius:10px;max-width:420px;}
  
  /* PRODUCTS GRID */
  .products{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;margin-top:24px}
  .card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 8px 22px rgba(3,37,63,0.06);transition:transform .18s;padding-bottom:12px}
  .card:hover{transform:translateY(-6px)}
  .card img{width:100%;height:160px;object-fit:cover}
  .card .body{padding:10px}
  .card h3{font-size:18px;margin-bottom:6px}
  .card p.price{font-weight:700;color:var(--blue-dark)}
  
  /* FORM / BOX */
  .form-box{background:#fff;padding:22px;border-radius:12px;box-shadow:0 6px 24px rgba(2,32,54,0.05)}
  input,select,textarea{width:100%;padding:10px;border-radius:8px;border:1px solid #e3eef6;margin-bottom:12px}
  
  /* BUTTON */
  .btn{background:var(--blue-dark);color:var(--white);padding:10px 30px;border-radius:10px;text-decoration:none;display:inline-block}
  .btn.secondary{background:#eaf8ff;color:var(--blue-dark)}
  
  /* FOOTER */
  .footer{margin-top:36px;padding:20px 0;background:transparent;text-align:center;color:#365a6f}