/* ============================================================
   LED-FORT é Karlitec — folha de estilo global
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:#FFFFFF; color:#0E0E10; font-family:'Manrope',system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ max-width:100%; }
::selection{ background:#F26B00; color:#fff; }
h1,h2,h3{ text-wrap:balance; }
p{ text-wrap:pretty; }
a{ color:inherit; }

.wrap{ max-width:1200px; margin:0 auto; }

/* ---- top utility bar + header ---- */
.topbar{ background:#0E0E10; color:#AEB7C6; font-size:13px; }
.header{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,0.92); backdrop-filter:blur(12px); border-bottom:1px solid #E6E4DF; }

/* ---- nav links ---- */
.nav-link{ cursor:pointer; font-size:14px; font-weight:500; color:#5A6370; white-space:nowrap; transition:color .15s; text-decoration:none; }
.nav-link:hover{ color:#0E0E10; }
.nav-link[aria-current="page"]{ color:#0E0E10; font-weight:700; }

/* ---- buttons ---- */
.btn{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-weight:700; border-radius:11px; transition:background .15s, transform .15s, border-color .15s; cursor:pointer; }
.btn-orange{ background:#F26B00; color:#fff; box-shadow:0 12px 30px rgba(242,107,0,0.45); }
.btn-orange:hover{ background:#d65f00; transform:translateY(-1px); }
.btn-ghost{ color:#fff; border:1.5px solid rgba(255,255,255,0.32); background:rgba(0,0,0,0.25); backdrop-filter:blur(4px); }
.btn-ghost:hover{ border-color:rgba(255,255,255,0.6); background:rgba(255,255,255,0.08); }

/* ---- arrow text links ---- */
.arrow{ transition:gap .15s; }
.arrow:hover{ gap:13px; }

/* ---- cards ---- */
.card-link{ transition:transform .15s, box-shadow .15s, border-color .15s; }
.card-link:hover{ transform:translateY(-3px); box-shadow:0 16px 36px rgba(14,14,16,0.10); border-color:#d8d4cc; }

/* ---- footer ---- */
.f-link{ color:#8B94A4; text-decoration:none; transition:color .15s; cursor:pointer; }
.f-link:hover{ color:#fff; }
.f-link--accent{ color:#FF8A1E; font-weight:600; }
.icon-btn{ display:flex; align-items:center; justify-content:center; border:1px dotted rgba(255,255,255,0.3); border-radius:12px; padding:11px; transition:transform .15s, border-color .15s; text-decoration:none; }
.icon-btn:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,0.7); }

/* ---- marketplace logo chips (logo only, original colors) ---- */
.chip{ display:inline-flex; align-items:center; justify-content:center; background:#fff; border:1px solid #E6E4DF; border-radius:10px; padding:7px 13px; text-decoration:none; transition:transform .15s, box-shadow .15s; }
.chip:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,0.12); }
.chip__logo{ height:24px; width:auto; display:block; }
.chip--lg .chip__logo{ height:30px; }

/* ---- breadcrumb ---- */
.crumb{ max-width:1100px; margin:0 auto; padding:14px 20px 0; font-size:13px; color:#8A8A85; }
.crumb a{ color:#8A8A85; text-decoration:none; }
.crumb a:hover{ color:#F26B00; }
.crumb span{ color:#0E0E10; font-weight:600; }

/* ---- hero ---- */
.hero-bg{ background-image:url('assets/hero-banner-v2.jpg'); background-size:cover; background-position:right center; }

/* ---- mobile menu (CSS only) ---- */
.menu-btn{ display:none; flex:none; width:44px; height:44px; border:1px solid #E6E4DF; background:#fff; border-radius:10px; flex-direction:column; gap:4px; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.menu-btn span{ width:18px; height:2px; background:#0E0E10; border-radius:2px; }
.mobile-panel{ display:none; border-top:1px solid #E6E4DF; background:#FAFAF7; padding:12px 20px 20px; }
.mobile-panel a{ font-size:17px; font-weight:500; color:#0E0E10; padding:13px 4px; border-bottom:1px solid #E6E4DF; text-decoration:none; }
.mobile-panel a[aria-current="page"]{ color:#F26B00; font-weight:700; }
#nav-toggle{ display:none; }

@media (max-width:879px){
  .desktop-nav{ display:none !important; }
  .menu-btn{ display:flex; }
  #nav-toggle:checked ~ .mobile-panel{ display:block; }
}

@media (max-width:760px){
  .hero-bg{ background-position:78% center; }
  .hero-scrim{ background:linear-gradient(90deg, rgba(8,6,4,0.94) 0%, rgba(8,6,4,0.86) 42%, rgba(10,7,4,0.55) 72%, rgba(12,8,4,0.2) 100%) !important; }
}