:root{
  --bg:#0b0d12;
  --card:#121620;
  --ink:#e8ecf3;
  --muted:#a7b0c0;
  --accent:#00e0ff;
  --accent-2:#6b5bff;
  --ring:#23324a;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg,#0b0d12,#0f1220);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{opacity:.85}

.container{max-width:1100px;margin:0 auto;padding:24px}
.site-header{display:flex;gap:16px;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid var(--ring);position:sticky;top:0;background:rgba(11,13,18,.85);backdrop-filter:blur(8px);z-index:10}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;color:var(--ink)}
.brand img{width:36px;height:36px}
.main-nav{display:flex;gap:16px;align-items:center}
.main-nav a{padding:8px 10px;border-radius:10px}
.main-nav .btn.shop{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#0a0d12;font-weight:700;padding:10px 14px}

.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;margin-top:12px}
.hero .card{background:var(--card);padding:24px;border-radius:16px;border:1px solid var(--ring);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.hero h1{font-size:40px;margin:0 0 12px}
.hero p{color:var(--muted);line-height:1.65}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:var(--card);border:1px solid var(--ring);border-radius:16px;overflow:hidden}
.card img{display:block;width:100%;height:220px;object-fit:cover}
.card .pad{padding:14px}
.badge{display:inline-block;background:#0f1a2b;border:1px solid var(--ring);padding:4px 10px;border-radius:999px;color:var(--muted);font-size:12px}

.section{margin:42px 0}
.section h2{margin:0 0 12px}
.section p.lead{color:var(--muted);margin-top:0}

.feature{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.feature .card{min-height:100%}

.form{max-width:760px;margin:0 auto;background:var(--card);padding:24px;border-radius:16px;border:1px solid var(--ring)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form label{display:block;margin:10px 0 6px;color:var(--muted)}
.form input,.form select,.form textarea{
  width:100%;padding:12px;border-radius:12px;border:1px solid var(--ring);
  background:#0c111a;color:var(--ink);outline:none
}
.form textarea{min-height:140px;resize:vertical}
.button{display:inline-block;margin-top:14px;padding:12px 16px;border-radius:12px;border:1px solid var(--ring);
  background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#0b0d12;font-weight:800;cursor:pointer}
.help{color:var(--muted);font-size:13px;margin-top:6px}

.notice{padding:14px;border:1px solid var(--ring);border-radius:12px;background:#0d1523}
.success{border-color:#2b8a3e;background:#0e1f16}
.error{border-color:#b02020;background:#261111}

.site-footer{border-top:1px solid var(--ring);margin-top:42px}
.site-footer .wrap{max-width:1100px;margin:0 auto;padding:24px;color:var(--muted);text-align:center}

@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .feature{grid-template-columns:1fr}
}
@media (max-width: 520px){
  .grid{grid-template-columns:1fr}
  .main-nav a{padding:8px}
}
/* --- Hero slider --- */
.hero-slider{
  position:relative;
  width:100%;
  height: 400px;
  aspect-ratio: auto;            /* keeps a nice shape; adjusts to container */
  overflow:hidden;
  border-radius:16px;
  background:#0c111a;
}
.hero-slider .slides{
  width:100%;
  height:100%;
  position:relative;
}
.hero-slider .slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .5s ease-in-out;
}
.hero-slider .slide.active{ opacity:1; }

.hero-slider .nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,.35);
  border:1px solid var(--ring);
  color:#fff;
  padding:8px 12px;
  border-radius:12px;
  cursor:pointer;
  font-size:20px;
  line-height:1;
  user-select:none;
}
.hero-slider .nav:hover{ background:rgba(0,0,0,.5); }
.hero-slider .nav.prev{ left:10px; }
.hero-slider .nav.next{ right:10px; }

.hero-slider .dots{
  position:absolute;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
}
.hero-slider .dot{
  width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,.4);
  border:1px solid rgba(255,255,255,.6);
  cursor:pointer;
}
.hero-slider .dot.active{ background:#fff; }




/* Reviews section */
.reviews {
  text-align: center;
  margin: 40px auto;
  max-width: 700px;
}

.review-carousel {
  position: relative;
  overflow: hidden;
  min-height: 150px; /* prevents page jumping */
}

.review-slide {
  display: none;
  padding: 20px;
  font-size: 1.1em;
  line-height: 1.5;
}

.review-slide blockquote {
  font-style: italic;
  color: #ccc;
  margin: 10px 0;
}

.review-slide .stars {
  font-size: 1.2em;
  color: gold;
  margin-bottom: 8px;
}

.review-slide .author {
  margin-top: 6px;
  font-weight: bold;
  color: #eee;
}

.review-form { margin: 20px auto; max-width: 500px; display: flex; flex-direction: column; gap: 10px; }
.review-form input, .review-form textarea, .review-form select { padding: 8px; border-radius: 6px; border: 1px solid #444; background: #111; color: #fff; }
.review-form button { background: crimson; color: #fff; border: none; padding: 10px; border-radius: 6px; cursor: pointer; }


/* Hamburger hidden on desktop */
#menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #fff; /* match your theme */
}

@media (max-width: 768px) {
  #menu-toggle {
    display: block;
  }
  #main-nav {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 60px;
    right: 0;
    background: #111;
    width: 240px;
    padding: 12px;
    border-radius: 0 0 8px 8px;
    z-index: 999;
  }
  #main-nav.show {
    display: flex;
  }
}

@media (max-width: 768px) {
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table {
    min-width: 700px; /* adjust based on your columns */
  }
}