/* GarzzOfficial FF visual system — UI-only overrides */
:root {
  --brand: #ff5a36;
  --brand-strong: #ff3d63;
  --brand-soft: rgba(255, 90, 54, .14);
  --ink: #f7f8fb;
  --muted: #9da5b4;
  --surface: #12151d;
  --surface-raised: #191d27;
  --line: rgba(255,255,255,.09);
  --radius: 16px;
}

html { background: #080a0f; }
body {
  background: radial-gradient(circle at 80% -10%, rgba(255,90,54,.12), transparent 36%), #080a0f;
  color: var(--ink);
  font-family: 'Poppins', system-ui, sans-serif;
  letter-spacing: -.01em;
}
body::selection { background: var(--brand); color: white; }
.container { width: min(100% - 40px, 1180px); padding: 0; }

.navbar {
  background: rgba(8,10,15,.82) !important;
  border-bottom: 1px solid var(--line) !important;
  backdrop-filter: blur(18px);
}
.navbar .container { min-height: 72px; padding: 0; }
.logo { letter-spacing: -.04em; }
.logo i, .logo .x, .nav-menu a:hover, .nav-menu a.active { color: var(--brand) !important; }
.nav-menu { gap: 1.35rem; }
.nav-menu a { color: #d7dbe4; font-size: .88rem; transition: color .2s ease, transform .2s ease; }
.nav-menu a:hover { transform: translateY(-1px); }
.menu-toggle { color: var(--ink); min-width: 44px; min-height: 44px; display: none; align-items: center; justify-content: center; }

.btn { min-height: 44px; border-radius: 11px; padding: .72rem 1.15rem; box-shadow: none; }
.btn-primary { background: linear-gradient(135deg, var(--brand), var(--brand-strong)); }
.btn-primary:hover { box-shadow: 0 10px 28px rgba(255, 79, 76, .24); transform: translateY(-2px); }
.btn-outline { border: 1px solid rgba(255,90,54,.65); color: #ff9b84; }
.btn-outline:hover { background: var(--brand-soft); color: white; }
.btn-wa { background: #159957; }

h1, h2, h3, h4 { letter-spacing: -.035em; }
h1 { font-size: clamp(2.25rem, 5vw, 4rem); }
h2 { font-size: clamp(1.65rem, 3vw, 2.5rem); }
.section-title { margin-bottom: 2.2rem; }
.section-title p, .hero-content p, .category-card p, .cta-content p { color: var(--muted); }

.hero { min-height: 720px; padding-top: 92px; background: radial-gradient(circle at 12% 35%, rgba(255,90,54,.16), transparent 32%), transparent; }
.hero-content h1 { font-size: clamp(2.3rem, 5vw, 4.3rem); max-width: 700px; }
.highlight { background: linear-gradient(120deg, #ffb199, var(--brand)); background-clip: text; -webkit-background-clip: text; }
.hero-badge { background: var(--brand-soft); border: 1px solid rgba(255,90,54,.3); color: #ffc0ad; }
.hero-buttons { gap: .7rem; }
.stat h3 { color: #ff957d; }
.floating-card, .category-card, .product-card, .feature-card, .testimonial-card, .checkout-card, .form-card, .info-card {
  background: linear-gradient(145deg, rgba(25,29,39,.96), rgba(14,17,24,.96));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 14px 40px rgba(0,0,0,.16);
}
.floating-card { border-color: rgba(255,90,54,.3); }
.category-card, .product-card { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.category-card:hover, .product-card:hover { transform: translateY(-5px); border-color: rgba(255,90,54,.55); box-shadow: 0 18px 44px rgba(0,0,0,.28); }
.featured { background: linear-gradient(180deg, transparent, rgba(19,23,31,.75)); }
.categories, .featured, .cta { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.cta { background: linear-gradient(135deg, rgba(255,90,54,.14), rgba(129,74,255,.08)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

input, select, textarea { min-height: 44px; border-radius: 10px !important; border: 1px solid var(--line) !important; background: #0e1118 !important; color: var(--ink) !important; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 3px solid rgba(255,149,125,.42); outline-offset: 3px; }
.badge, .status-badge, .product-badge { border-radius: 999px; }
footer { background: #0b0d12 !important; border-top: 1px solid var(--line); }
.back-to-top, .ai-float-btn { background: linear-gradient(135deg, var(--brand), var(--brand-strong)) !important; }

@media (max-width: 768px) {
  .container { width: min(100% - 28px, 620px); }
  .navbar .container { min-height: 64px; }
  .menu-toggle { display: flex; }
  .nav-menu { top: 64px; gap: .25rem; padding: .8rem; background: rgba(12,15,22,.98); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px; }
  .nav-menu a { display: block; width: 100%; padding: .7rem 1rem; border-radius: 9px; }
  .nav-menu a:hover { background: var(--brand-soft); }
  .hero { min-height: auto; padding: 8.5rem 0 4rem; }
  .hero-content h1 { font-size: clamp(2rem, 10vw, 3rem); }
  .hero-buttons .btn { width: 100%; justify-content: center; }
  .hero-stats { gap: .75rem; }
  .stat { padding: .65rem 0; }
  .categories, .featured, .cta { padding: 3.5rem 0; }
  .category-card, .product-card { border-radius: 14px; }
}
@media (max-width: 360px) {
  .container { width: min(100% - 22px, 620px); }
  .hero-content p { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Homepage has a self-contained style block; these tokens keep it aligned with the shared system. */
#preloader { background: #080a0f !important; }
.loader-logo { background: linear-gradient(135deg, #fff, #ff957d, var(--brand)) !important; background-clip: text !important; -webkit-background-clip: text !important; }
.loader-progress { background: linear-gradient(90deg, var(--brand), #ffc857, var(--brand)) !important; }
.loader-percent, .loader-dots span { color: var(--brand) !important; background-color: var(--brand) !important; }
.index-page .navbar, body:has(.hero) .navbar { background: rgba(8,10,15,.82) !important; }
body:has(.hero) .hero { min-height: 720px; }
body:has(.hero) .container { max-width: 1180px; }
body:has(.hero) .logo i, body:has(.hero) .logo .x { color: var(--brand) !important; }
body:has(.hero) .btn-primary { background: linear-gradient(135deg, var(--brand), var(--brand-strong)) !important; }
body:has(.hero) .category-card { background: linear-gradient(145deg, rgba(25,29,39,.96), rgba(14,17,24,.96)) !important; border-color: var(--line) !important; }
@media (max-width: 768px) { body:has(.hero) .menu-toggle { display: flex !important; } }

/* WhatsApp touch target */
a[href*="wa.me"], button[id*="order"], button[class*="wa"] { min-height: 44px; }