:root{
  --control-h:46px; --container:1200px;
  --green-900:#1f2b22; --green-700:#2f4634; --green-600:#3b5b41; --green-500:#4a7752; --green-300:#7fb18b;
  --orange-600:#ff7a0a; --orange-500:#ff8e2b; --orange-400:#ffa550;
  --black-900:#0e0f10; --black-800:#16181a;
  --grey-700:#2a2f34; --grey-600:#3a4147; --grey-500:#5c6770; --grey-300:#9aa6b2; --grey-200:#c7d0d9; --grey-100:#e7ecef;
  --white:#ffffff;
  --radius-lg:16px; --radius-md:12px; --radius-sm:8px;
  --shadow-soft:0 6px 18px rgba(0,0,0,.15);
  --shadow-strong:0 10px 28px rgba(0,0,0,.28);
  --shadow-focus:0 0 0 3px rgba(255,122,10,.25);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--black-900);color:var(--white);font:16px/1.45 "Segoe UI",Roboto,Ubuntu,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}

.topbar{background:var(--black-900);border-bottom:1px solid rgba(255,255,255,.06);position:sticky;top:0;z-index:50;transition:box-shadow .2s ease, background .2s ease}
.topbar.scrolled{box-shadow:0 8px 24px rgba(0,0,0,.35);background:#0a0b0c}
.wrap{max-width:var(--container);margin:0 auto;padding:0 20px}

.head{display:grid;grid-template-columns:180px minmax(260px,1fr) max-content;gap:16px;align-items:center;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}
.brand-badge{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--green-700),var(--green-500));display:grid;place-items:center;box-shadow:inset 0 0 0 2px rgba(255,255,255,.06), 0 8px 18px rgba(0,0,0,.35);position:relative}
.brand-badge::after{content:"";position:absolute;inset:-2px;border-radius:14px;box-shadow:0 0 14px 2px rgba(255,122,10,.55);opacity:.55;filter:blur(6px);pointer-events:none}
.brand b{font-size:1.2rem}
.brand small{display:block;font-size:.72rem;color:var(--grey-300);margin-top:-2px}

.search{display:flex;align-items:center;gap:10px;background:var(--black-800);border:1px solid rgba(255,255,255,.07);border-radius:999px;height:var(--control-h);padding:0 12px 0 14px;box-shadow:var(--shadow-soft);width:100%;max-width: clamp(420px, 60vw, 820px)}
.search input{width:100%;background:transparent;border:none;outline:none;color:var(--white);line-height:var(--control-h)}
.search button{background:var(--orange-600);color:#0a0a0a;padding:0 14px;height:calc(var(--control-h) - 12px);border-radius:999px;font-weight:700;display:inline-flex;align-items:center;box-shadow:0 8px 18px rgba(255,122,10,.35);transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
.search button:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(255,122,10,.4);background:var(--orange-500)}
.search:focus-within{box-shadow:var(--shadow-focus), var(--shadow-soft)}

.actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap;row-gap:8px}
.chip{height:var(--control-h);padding:0 14px;display:inline-flex;align-items:center;gap:10px;border-radius:999px;background:var(--black-800);border:1px solid rgba(255,255,255,.07);box-shadow:var(--shadow-soft)}
.chip .badge{background:var(--orange-600);color:#0b0b0b;min-width:20px;height:20px;border-radius:999px;display:grid;place-items:center;font-size:.75rem;font-weight:800;box-shadow:0 4px 12px rgba(255,122,10,.4)}
.icon{width:18px;height:18px;display:inline-block}
#cartChip,#loginBtn{transform:none !important}

.nav{background:linear-gradient(0deg,rgba(255,255,255,.02),rgba(255,255,255,.02)), var(--green-700);border-top:2px solid var(--orange-600);border-bottom:1px solid rgba(255,255,255,.07)}
.nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:10px 0;overflow:auto}
.nav a{display:block;padding:10px 12px;border-radius:10px;color:#eaf3ed;font-weight:600;white-space:nowrap;transition:background .15s ease, color .15s ease}
.nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav a.active{background: rgba(255,255,255,.14); color: #fff; box-shadow: 0 0 0 3px rgba(255,122,10,.18) inset; border-radius: 10px;}

.hero{background:linear-gradient(180deg,var(--black-900),#101213);position:relative}
.slider{position:relative;overflow:hidden;border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.06)}
.slides{display:flex;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.slide{min-width:100%;display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;padding:28px;background:radial-gradient(1200px 400px at 80% 40%, rgba(255,122,10,.12), transparent 60%)}
.slide .visual{background:linear-gradient(135deg,var(--green-700),var(--green-600));border-radius:var(--radius-lg);padding:14px;border:1px solid rgba(255,255,255,.07);box-shadow:inset 0 0 0 2px rgba(255,255,255,.03), 0 22px 48px rgba(0,0,0,.45);position:relative}
.neon-ring{position:absolute;inset:10px;border-radius:calc(var(--radius-lg) - 4px);box-shadow:0 0 22px 4px rgba(255,122,10,.45), 0 0 70px 10px rgba(255,122,10,.15);pointer-events:none;opacity:.75}
.slide .copy h1{font-size:2rem;margin:.2rem 0 .3rem;font-weight:900;letter-spacing:.2px}
.kicker{color:var(--orange-500);font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:.8rem}
.lead{color:#dbe6df;max-width:50ch}
.cta{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.btn{padding:12px 18px;border-radius:12px;font-weight:800;background:var(--orange-600);color:#0a0a0a;box-shadow:0 10px 24px rgba(255,122,10,.35);transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(255,122,10,.4);background:var(--orange-500)}
.btn.secondary{background:var(--black-800);color:#fff;border:1px solid rgba(255,255,255,.08);box-shadow:0 10px 22px rgba(0,0,0,.35)}
.btn.secondary:hover{background:#1a1c1f}
.dots{display:flex;gap:8px;justify-content:center;margin-top:14px}
.dot{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.3);border:1px solid rgba(255,255,255,.5);transition:transform .15s ease, background .15s ease, box-shadow .15s ease}
.dot.active{background:var(--orange-600);box-shadow:0 0 0 4px rgba(255,122,10,.18)}
.dot:hover{transform:scale(1.08)}

.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:18px}
.badge-tile{background:linear-gradient(180deg,var(--black-800),#15181b);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-md);padding:14px;display:flex;gap:12px;align-items:flex-start;box-shadow:var(--shadow-soft)}
.badge-tile .emph{color:var(--orange-500);font-weight:800}

.section{margin:34px 0}
.section h2{font-size:1.4rem;margin:0 0 14px;font-weight:900}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:linear-gradient(180deg,var(--black-800),#14171a);border:1px solid rgba(255,255,255,.06);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-soft)}
.card-media{background:linear-gradient(135deg,var(--green-700),var(--green-600));padding:12px;border-bottom:1px solid rgba(255,255,255,.06)}
.card-body{padding:14px;display:flex;flex-direction:column;gap:8px}
.price{font-weight:900;font-size:1.1rem}
.strike{color:var(--grey-300);text-decoration:line-through;margin-left:8px;font-weight:600}
.pill{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:#171a1d;color:#dbe3de;font-weight:700;font-size:.85rem}
.add{margin-top:auto}
.btn.add{width:100%;display:flex;align-items:center;justify-content:center;gap:8px}

/* Forms */
.form{max-width:720px}
.form-row{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.form-row input,.form-row textarea{background:#15181b;border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:10px;color:#fff;outline:none}
.form-row input:focus,.form-row textarea:focus{box-shadow:var(--shadow-focus)}
.form-row .checkbox{display:flex;align-items:center;gap:8px}
.error{color:#ffb3b3;min-height:1em}
.form-actions{display:flex;align-items:center;gap:12px;margin-top:8px}
.form-success{color:#9ed4a7;font-weight:700}

/* Accordion */
.accordion details{background:#14171a;border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:10px 14px;margin-bottom:10px}
.accordion summary{cursor:pointer;font-weight:700}

footer{margin-top:40px;padding:28px 0;color:#cbd5df;border-top:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg,#111213,#0d0f10)}
.footer-cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:18px}
footer h4{margin:.2rem 0 .6rem}
.subtle{color:var(--grey-300);font-size:.92rem}

@media (max-width: 1200px){ .search{ max-width: clamp(380px, 52vw, 700px); } }
@media (max-width: 1024px){ .search{ max-width: clamp(340px, 50vw, 620px); } }
@media (max-width: 900px){
  .head{ grid-template-columns:160px minmax(220px, 1fr) max-content; gap:12px; }
  .search{ max-width: clamp(300px, 48vw, 560px); }
  .slide{grid-template-columns:1fr;gap:16px}
  .badges{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 760px){
  .head{ grid-template-columns:1fr; align-items:stretch; }
  .actions{ justify-content:flex-start; }
  .search{ max-width:100%; }
  .footer-cols{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .grid{grid-template-columns:1fr}
  .badges{grid-template-columns:1fr}
}