:root{
  --bg:#0b0e12;
  --panel:#121722;
  --panel-alt:#0f141d;
  --text:#e6ebf2;
  --muted:#9fb1c7;
  --brand:#25D366;
  --primary:#4f8cff;
  --border:rgba(255,255,255,.08);
  --shadow:0 8px 24px rgba(0,0,0,.35);
  --radius:14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.55}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
a,button{touch-action:manipulation}
:focus-visible{outline:2px solid var(--primary); outline-offset:2px}

.container{width:min(1200px,92%);margin-inline:auto}
.section{padding:56px 0}
.section.alt{background:var(--panel)}
.section-head{margin-bottom:22px}
.section-head h2{margin:0 0 6px 0;font-size:clamp(22px,3.5vw,30px)}
.section-head p{margin:0;color:var(--muted)}

.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid var(--border);background:var(--panel);box-shadow:var(--shadow);font-weight:600;transition:.2s;min-height:44px}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--primary);border-color:transparent;color:white}
.btn.outline{background:transparent;border-color:var(--primary);color:var(--primary)}
.btn.whats{background:var(--brand);color:#0b0e12;border-color:transparent}
.btn.light{background:#e7eefc;color:#0b0e12;border-color:transparent}
.btn.block{display:flex;justify-content:center;width:100%}

/* --- Header/Nav --- */
.site-header{position:sticky;top:0;background:rgba(11,14,18,.8);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--border);z-index:100}
.site-header .nav{display:flex;align-items:center;gap:18px;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px}
.brand .logo{height:28px;width:auto;border-radius:4px}
.brand span{white-space:nowrap}

.site-menu{display:flex;gap:16px;align-items:center}
.site-menu a{padding:10px 12px;border-radius:10px;color:var(--muted)}
.site-menu a:hover,.site-menu a:focus-visible{background:var(--panel);color:var(--text)}

.menu-toggle{
  display:none; position:relative; width:40px; height:40px; border:1px solid var(--border);
  background:var(--panel); border-radius:10px; cursor:pointer;
}
.menu-toggle span{position:absolute; left:9px; right:9px; height:2px; background:var(--text); transition:.2s}
.menu-toggle span:nth-child(1){top:12px}
.menu-toggle span:nth-child(2){top:19px}
.menu-toggle span:nth-child(3){top:26px}
.menu-open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-open .menu-toggle span:nth-child(2){opacity:0}
.menu-open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:900px){
  .site-menu{
    position:absolute; top:56px; left:0; right:0;
    display:grid; gap:8px; padding:10px;
    background:rgba(11,14,18,.98);
    border-bottom:1px solid var(--border);
    transform:translateY(-120%); transition:transform .2s ease;
  }
  .menu-open #site-menu{ transform:translateY(0); }
  .menu-toggle{ display:inline-block; }
  .cta{ display:none; }
}

/* --- Hero --- */
.hero{padding:36px 0;border-bottom:1px solid var(--border);background:linear-gradient(180deg,rgba(79,140,255,.12),transparent 35%)}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:26px;align-items:center}
.hero .hero-text h1{font-size:clamp(26px,4.5vw,40px);margin:6px 0 10px 0}
.hero .meta{color:var(--muted);font-size:14px}
.hero-media img{border-radius:var(--radius);box-shadow:var(--shadow)}
.hero-academy{background:linear-gradient(180deg,rgba(37,211,102,.12),transparent 35%)}
.hero-about{background:linear-gradient(180deg,rgba(230,235,242,.08),transparent 35%)}
@media (max-width:900px){ .hero-inner{grid-template-columns:1fr} .hero-media{order:-1} }

/* --- Grids --- */
.grid{display:grid;gap:18px}
.grid.two{grid-template-columns:1fr 1fr}
.grid.three{grid-template-columns:repeat(3,1fr)}
.products{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

@media (max-width:1100px){
  .grid.two{grid-template-columns:1fr}
  .grid.three{grid-template-columns:1fr}
}

/* --- Cards --- */
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card.product img{border-radius:12px;margin-bottom:12px}
.card.product .price{display:flex;gap:8px;align-items:center;color:#d7e3f8;margin:8px 0 14px 0}
.card-body h3{margin:.2rem 0 .2rem 0}
.card.price .amount{font-size:20px;color:#d7e3f8;margin-bottom:12px}
.card.price.featured{outline:2px solid var(--primary);background:linear-gradient(180deg,rgba(79,140,255,.15),transparent)}
.rounded{border-radius:var(--radius)}

ul.check{list-style:none;padding:0;margin:0;display:grid;gap:10px}
ul.check li{position:relative;padding-left:26px}
ul.check li::before{content:"✓";position:absolute;left:0;top:0;color:var(--brand);font-weight:800}

/* --- Footer --- */
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px;padding:24px 0 12px 0;border-top:1px solid var(--border)}
.site-footer .tiny{border-top:1px solid var(--border);padding:12px 0;color:var(--muted);font-size:13px}
@media (max-width:1100px){ .footer-grid{grid-template-columns:1fr} }

.gallery{grid-template-columns:repeat(3,1fr)}
.tiny{font-size:13px;color:var(--muted)}
.center{text-align:center}

/* --- Video --- */
.video-wrap{
  position:relative;
  max-width:900px;
  margin:0 auto;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  background:var(--panel-alt);
}
.video-wrap video{
  display:block;
  width:100%;
  height:auto;
  background:var(--panel-alt);
}
.video-wrap.embed{padding-top:56.25%;height:0}
.video-wrap.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* --- Slider --- */
.slider {
  position: relative;
  max-width: 1200px;
  margin: 2rem auto;
  overflow: hidden;
  border-radius: 14px;
  background: #111;
  aspect-ratio: 21 / 9;
}
.slider .slides {
  height: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  transition: transform 500ms ease;
}
.slider .slide { width: 100%; height: 100%; position: relative; }
.slider img { width: 100%; height: 100%; object-fit: cover; display: block; }

.slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2; border: none; background: rgba(0,0,0,.45); color: #fff;
  width: 42px; height: 42px; border-radius: 50%;
  font-size: 28px; line-height: 42px; text-align: center; cursor: pointer;
  transition: background .2s ease;
}
.slider-arrow:hover { background: rgba(0,0,0,.65); }
.slider-arrow.prev { left: 10px; }
.slider-arrow.next { right: 10px; }

.slider-dots {
  position: absolute; left: 0; right: 0; bottom: 10px;
  display: flex; gap: 8px; justify-content: center; z-index: 2;
}
.slider-dots .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.55); border: 0; cursor: pointer;
}
.slider-dots .dot.is-active { background: #fff; }

@media (max-width: 768px) {
  .slider { aspect-ratio: 16 / 9; border-radius: 10px; }
  .slider-arrow { width: 38px; height: 38px; font-size: 24px; }
}
@media (prefers-reduced-motion: reduce){
  .slider .slides{ transition: none; }
  .slider-arrow{ transition: none; }
}

/* --- Social box --- */
.social-box{
  background: linear-gradient(180deg, rgba(230,235,242,.06), transparent 50%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 42px 0;
}
.social-links{
  display: grid;
  grid-template-columns: repeat(6, minmax(140px, 1fr));
  gap: 14px;
}
.social-pill{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  color: var(--text);
  font-weight: 700;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.social-pill:focus-visible{
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.social-pill i{ font-size: 18px; line-height: 1; }
.social-pill.yt:hover      { background: #ff0000; color: #fff; transform: translateY(-2px); }
.social-pill.insta:hover   { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); color:#fff; transform: translateY(-2px);}
.social-pill.fb:hover      { background: #1877f2; color:#fff; transform: translateY(-2px); }
.social-pill.tw:hover      { background: #0f1419; color:#fff; transform: translateY(-2px); }
.social-pill.li:hover      { background: #0a66c2; color:#fff; transform: translateY(-2px); }
.social-pill.tiktok:hover  { background: #111; color:#fff; box-shadow: 0 0 0 2px #25F4EE inset, 0 0 0 4px #FE2C55 inset; transform: translateY(-2px); }

@media (max-width:1100px){
  .social-links{ grid-template-columns: repeat(3, minmax(160px,1fr)); }
}
@media (max-width:560px){
  .social-links{ grid-template-columns: repeat(2, minmax(150px,1fr)); }
  .social-pill span{ font-weight: 600; }
}