:root{
  --bg:#050608;
  --bg2:#070914;
  --panel:#0b0d14;
  --panel2:#0a1011;
  --text:#e9f4ef;
  --muted:#a7b2b6;
  --line:rgba(98,255,164,.18);
  --neon:#36ff89;
  --neon2:#00f7ff;
  --danger:#ff3b5c;
  --shadow:0 20px 60px rgba(0,0,0,.55);
  --radius:18px;
  --radius2:14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:radial-gradient(1200px 600px at 20% 20%,rgba(54,255,137,.10),transparent 60%),
             radial-gradient(900px 500px at 80% 20%,rgba(0,247,255,.10),transparent 55%),
             linear-gradient(180deg,var(--bg),var(--bg2));
  color:var(--text);
}
a{color:inherit;text-decoration:none}

.container{max-width:1140px;margin:0 auto;padding:0 18px}

/* Loading */
.loading{
  position:fixed;inset:0;z-index:2000;
  background:rgba(5,6,8,.98);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .55s ease, visibility .55s ease;
}
.loading.loading--done{opacity:0;visibility:hidden;pointer-events:none}
.loading__inner{width:min(720px,92vw);padding:28px 18px;}
.loading__flag{width:100%;display:flex;justify-content:center;margin-bottom:0;overflow:hidden}
.loading__title{text-align:center}
.loading__subtitle{color:var(--muted);font-weight:600;margin-top:10px;font-size:14px}
.loading__bar{margin:22px auto 0; width:min(520px,92vw); height:10px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(54,255,137,.18); overflow:hidden;
}
.loading__barFill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--neon),var(--neon2));box-shadow:0 0 24px rgba(54,255,137,.35)}

.loading__mark{display:none}

.loading__flag{animation:flagSlide 1.35s ease-in-out infinite}
@keyframes flagSlide{
  0%{transform:translateX(0)}
  45%{transform:translateX(-18px)}
  100%{transform:translateX(0)}
}

.glitch{
  font-family:Orbitron,Inter,sans-serif;
  font-size:clamp(28px,5vw,52px);
  letter-spacing:.02em;
  font-weight:800;
  position:relative;
  display:inline-block;
  text-transform:uppercase;
  color:var(--text);
  text-shadow:0 0 24px rgba(54,255,137,.18);
}
.glitch:before,.glitch:after{
  content:attr(data-text);
  position:absolute;left:0;top:0;width:100%;overflow:hidden;
}
.glitch:before{transform:translate(1px,0);color:var(--neon);clip-path:inset(0 0 55% 0);opacity:.85;filter:blur(.2px)}
.glitch:after{transform:translate(-1px,0);color:var(--neon2);clip-path:inset(55% 0 0 0);opacity:.75;filter:blur(.2px)}

/* Header */
.header{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(5,6,8,.65);border-bottom:1px solid rgba(255,255,255,.06)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;min-width:220px}
.brand__logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,rgba(54,255,137,.22),rgba(0,247,255,.18));border:1px solid rgba(54,255,137,.25);box-shadow:0 0 24px rgba(54,255,137,.10)}
.brand__name{font-weight:800;letter-spacing:.02em}
.brand__tag{font-size:12px;color:var(--muted);font-weight:600;margin-top:2px}

.nav{display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:center}
.nav__link{color:var(--muted);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;padding:10px 10px;border-radius:12px;transition:background .2s ease,color .2s ease,border-color .2s ease;border:1px solid transparent}
.nav__link:hover{background:rgba(54,255,137,.08);color:var(--text);border-color:rgba(54,255,137,.14)}

.cartBtn{display:flex;align-items:center;gap:8px;border-radius:14px;padding:10px 12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:var(--text);cursor:pointer;transition:transform .15s ease,border-color .2s ease,background .2s ease}
.cartBtn:hover{transform:translateY(-1px);border-color:rgba(54,255,137,.22);background:rgba(54,255,137,.06)}
.cartBtn__count{min-width:22px;height:22px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;background:rgba(54,255,137,.14);border:1px solid rgba(54,255,137,.24)}

/* Hero */
.hero{padding:48px 0 18px}
.hero__inner{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:stretch}
.hero__title{font-size:clamp(30px,4vw,52px);line-height:1.06;margin:0 0 14px}
.hero__accent{color:var(--neon);text-shadow:0 0 18px rgba(54,255,137,.22)}
.hero__desc{margin:0 0 18px;color:var(--muted);font-weight:600;max-width:54ch}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap}

.hero__panel{position:relative;border-radius:var(--radius);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.10);min-height:240px;overflow:hidden;box-shadow:var(--shadow)}
.hero__panelGrid{position:absolute;inset:-40px;background-image:linear-gradient(rgba(54,255,137,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(54,255,137,.10) 1px,transparent 1px);background-size:38px 38px;opacity:.25;transform:rotate(8deg)}
.hero__panelGlow{position:absolute;inset:0;background:radial-gradient(400px 220px at 30% 30%,rgba(54,255,137,.20),transparent 60%),radial-gradient(340px 210px at 70% 60%,rgba(0,247,255,.16),transparent 60%)}
.hero__panelCard{position:absolute;left:16px;right:16px;bottom:16px;border-radius:16px;background:rgba(6,8,10,.65);border:1px solid rgba(54,255,137,.14);padding:14px 14px 12px}
.hero__panelLabel{color:var(--neon);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:11px}
.hero__panelValue{font-weight:800;margin-top:6px;font-size:18px}
.hero__panelMeta{color:var(--muted);font-weight:600;margin-top:6px;font-size:13px}

/* Sections */
.section{padding:42px 0}
.section--alt{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.section__head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.section__title{margin:0;font-size:26px}
.section__sub{margin:0;color:var(--muted);font-weight:600}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border-radius:14px;padding:12px 14px;font-weight:800;border:1px solid transparent;transition:transform .15s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;color:var(--text)}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:linear-gradient(135deg,rgba(54,255,137,.20),rgba(0,247,255,.14));border-color:rgba(54,255,137,.22);box-shadow:0 0 24px rgba(54,255,137,.12)}
.btn--primary:hover{box-shadow:0 0 34px rgba(54,255,137,.18)}
.btn--ghost{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.10)}
.btn--ghost:hover{border-color:rgba(54,255,137,.18);background:rgba(54,255,137,.06)}
.btn--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn--disabled:hover{transform:none;border-color:rgba(255,255,255,.10);background:rgba(255,255,255,.04)}
.btn--full{width:100%}

/* Product grid */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.product{grid-column:span 4;min-height:290px;border-radius:var(--radius);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.10);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.product__img{height:150px;background:radial-gradient(380px 180px at 40% 40%,rgba(54,255,137,.20),transparent 60%),radial-gradient(360px 160px at 70% 55%,rgba(0,247,255,.14),transparent 60%),linear-gradient(180deg,rgba(10,14,16,.8),rgba(7,9,20,.9));border-bottom:1px solid rgba(255,255,255,.08);position:relative}
.product__imgLabel{position:absolute;left:12px;top:12px;padding:6px 10px;border-radius:999px;background:rgba(54,255,137,.12);border:1px solid rgba(54,255,137,.22);font-weight:900;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.product__body{padding:14px;display:flex;flex-direction:column;gap:10px;flex:1}
.product__title{font-weight:900;font-size:16px;margin:0}
.product__desc{margin:0;color:var(--muted);font-weight:600;font-size:13px;line-height:1.35}
.product__meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto}
.product__price{font-weight:900}
.product__actions{display:flex;gap:10px;align-items:center}
.productStock{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:8px;font-weight:900;font-size:11px;margin-left:8px;letter-spacing:.02em}
.productStock--in{color:var(--neon);border:1px solid rgba(54,255,137,.22);background:rgba(54,255,137,.08)}
.productStock--out{color:var(--danger);border:1px solid rgba(255,59,92,.22);background:rgba(255,59,92,.08)}

.iconBtn{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);color:var(--text);cursor:pointer;border-radius:12px;padding:10px 12px}
.iconBtn:hover{border-color:rgba(54,255,137,.18);background:rgba(54,255,137,.06)}

/* Tutorials */
.tutorials{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.card{grid-column:span 4;border-radius:var(--radius);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);padding:16px;box-shadow:var(--shadow)}
.card__title{font-weight:900;margin:0 0 8px}
.card__text{margin:0;color:var(--muted);font-weight:600}

.tutorialPicker{margin-top:14px;border-radius:var(--radius);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);box-shadow:var(--shadow);overflow:hidden;
  opacity:0;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease;pointer-events:none
}
.tutorialPicker[aria-hidden="false"]{opacity:1;transform:translateY(0);pointer-events:auto}
.tutorialPicker__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 12px;border-bottom:1px solid rgba(255,255,255,.06)}
.tutorialPicker__title{font-weight:900}
.tutorialPicker__list{padding:14px;display:flex;flex-direction:column;gap:10px}

/* Contact */
.contact{border-radius:var(--radius);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);padding:16px;box-shadow:var(--shadow)}
.contact__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:flex;flex-direction:column;gap:8px}
.field__label{font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.field__input{background:rgba(0,0,0,.20);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:12px;color:var(--text);outline:none}
.field__input:focus{border-color:rgba(54,255,137,.30);box-shadow:0 0 0 4px rgba(54,255,137,.08)}
.field__input--textarea{resize:vertical;min-height:120px}
.contact__actions{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.contact__status{color:var(--muted);font-weight:700}

/* Cart */
.cart{position:fixed;inset:0;z-index:1000;pointer-events:none}
.cart[aria-hidden="false"]{pointer-events:auto}
.cart__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s ease;border:0;cursor:pointer;z-index:0}
.cart[aria-hidden="false"] .cart__backdrop{opacity:1}
.cart__panel{position:absolute;top:0;right:0;height:100%;width:min(420px,92vw);
  background:linear-gradient(180deg,rgba(8,10,14,.96),rgba(5,6,8,.98));
  border-left:1px solid rgba(255,255,255,.08);
  transform:translateX(104%);
  transition:transform .25s ease;
  display:flex;flex-direction:column;
  z-index:1;
}
.cart[aria-hidden="false"] .cart__panel{transform:translateX(0)}
.cart__head{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid rgba(255,255,255,.06)}
.cart__title{font-weight:900;font-size:18px}
.cart__items{padding:12px 16px;display:flex;flex-direction:column;gap:10px;overflow:auto;flex:1}
.cartItem{display:flex;gap:12px;align-items:flex-start;border-radius:16px;padding:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.cartItem__thumb{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,rgba(54,255,137,.18),rgba(0,247,255,.12));border:1px solid rgba(54,255,137,.18)}
.cartItem__body{flex:1;min-width:0}
.cartItem__title{font-weight:900;margin:0 0 6px;font-size:14px}
.cartItem__meta{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted);font-weight:700;font-size:12px}
.cartItem__qty{display:flex;align-items:center;gap:8px;margin-top:10px}
.qtyBtn{width:34px;height:34px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);color:var(--text);cursor:pointer}
.qtyBtn:hover{border-color:rgba(54,255,137,.18);background:rgba(54,255,137,.06)}
.qtyVal{font-weight:900;min-width:16px;text-align:center}

.cart__foot{padding:16px;border-top:1px solid rgba(255,255,255,.06)}
.cart__total{display:flex;align-items:center;justify-content:space-between;font-weight:900;margin-bottom:12px}
.cart__fineprint{margin-top:10px;color:var(--muted);font-weight:600;font-size:12px;line-height:1.3}
.field{display:flex;flex-direction:column;gap:8px}
.field__label{font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.field__input{background:rgba(0,0,0,.20);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:12px;color:var(--text);outline:none;font-family:inherit}
.field__input:focus{border-color:rgba(54,255,137,.30);box-shadow:0 0 0 4px rgba(54,255,137,.08)}
.field__input option{background:var(--bg);color:var(--text)}

/* Responsive */
@media (max-width: 960px){
  .hero__inner{grid-template-columns:1fr;}
  .product{grid-column:span 6}
  .card{grid-column:span 6}
}
@media (max-width: 640px){
  .nav{display:none}
  .brand__tag{display:none}
  .hero{padding-top:26px}
  .product{grid-column:span 12}
  .card{grid-column:span 12}
  .contact__row{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce){
  .loading__flag{animation:none}
  .btn,.cartBtn{transition:none}
  .loading{transition:none}
  .cart__panel,.cart__backdrop{transition:none}
}