/* ======================================================================
   Howard Resource Group — style.css (Clean Rebuild)
   - Themes (light/dark/blue/custom)
   - Header + nav + dropdown + mobile menu
   - Hero (standard) + Game Menu Hero (diagonal split)
   - Sections + cards + animations hooks
   - Search dropdown
   - Products grid + carousel
   - Modal (consult)
   - Footer + mobile sticky bar
   ====================================================================== */

/* ---------- Theme Tokens ---------- */
:root{
  --bg:#0a0e27;
  --text:#e8e8f0;
  --accent:#00d9ff;
  --accent-secondary:#a855f7;
  --muted:#8892b0;
  --border:#1a2142;
  --section-alt:#0f1530;
  --card-bg:#111b3d;
  --header-bg:rgba(10,14,39,.95);
  --footer-bg:#050809;

  --font-main:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --radius:16px;
  --radius-sm:12px;
  --radius-lg:22px;

  --shadow-sm:0 8px 24px rgba(0,0,0,.18);
  --shadow-md:0 18px 60px rgba(0,0,0,.28);
  --shadow-glow:0 0 40px rgba(0,217,255,.24);

  --container:1200px;
}

/* Light */
[data-theme="light"]{
  --bg:#f5f7fa;
  --text:#121317;
  --accent:#00a8e8;
  --accent-secondary:#7c3aed;
  --muted:#5c6675;
  --border:#e5e5e5;
  --section-alt:#ffffff;
  --card-bg:#ffffff;
  --header-bg:rgba(245,247,250,.98);
  --footer-bg:#121317;
  --shadow-sm:0 10px 28px rgba(15,23,42,.08);
  --shadow-md:0 24px 80px rgba(15,23,42,.12);
  --shadow-glow:0 0 40px rgba(0,168,232,.18);
}

/* Dark */
[data-theme="dark"]{
  --bg:#0f0f0f;
  --text:#f5f5f5;
  --accent:#00d9ff;
  --accent-secondary:#a855f7;
  --muted:#a2a2a2;
  --border:#2a2a2a;
  --section-alt:#171717;
  --card-bg:#171717;
  --header-bg:rgba(15,15,15,.98);
  --footer-bg:#000;
}

/* Blue */
[data-theme="blue"]{
  --bg:#f0f4f8;
  --text:#0b2540;
  --accent:#0066cc;
  --accent-secondary:#7c3aed;
  --muted:#486581;
  --border:#d9e2ec;
  --section-alt:#ffffff;
  --card-bg:#ffffff;
  --header-bg:rgba(240,244,248,.98);
  --footer-bg:#0b2540;
}

/* Custom (set by JS via inline CSS vars) */
[data-theme="custom"]{
  --bg:var(--custom-bg,#0a0e27);
  --text:var(--custom-text,#e8e8f0);
  --accent:var(--custom-accent,#00d9ff);
  --accent-secondary:var(--custom-accent-secondary,#a855f7);
  --muted:var(--custom-muted,#8892b0);
  --border:var(--custom-border,#1a2142);
  --section-alt:var(--custom-section-alt,#0f1530);
  --card-bg:var(--custom-card-bg,#111b3d);
  --header-bg:var(--custom-header-bg,rgba(10,14,39,.95));
  --footer-bg:var(--custom-footer-bg,#050809);
}

/* ---------- Base ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ overflow-x:hidden; scroll-behavior:smooth; }
body{
  font-family:var(--font-main);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-top:80px;
  transition:background-color .25s ease,color .25s ease;
}
img,svg{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
:focus-visible{ outline:3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset:3px; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* Ambient glow background */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 700px at 50% -220px, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    radial-gradient(900px 520px at 110% 110%, color-mix(in srgb, var(--accent-secondary) 10%, transparent), transparent 70%);
  z-index:-1;
}

/* ---------- Layout ---------- */
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
  position:relative;
}

/* ---------- Header / Nav ---------- */
header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  background:var(--header-bg);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 10px 32px rgba(0,0,0,.18), 0 6px 18px rgba(0,0,0,.10);
  transition:box-shadow .25s ease, padding .25s ease;
}
header.shrink .navbar{ padding:14px 0; }
.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 0;
  gap:18px;
}
.brand{
  font-family:var(--font-display);
  font-weight:800;
  font-size:18px;
  letter-spacing:-.02em;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:10px;
}
.brand small{ display:block; font-weight:600; opacity:.65; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }

/* Desktop links */
.nav-links{
  display:flex;
  align-items:center;
  gap:28px;
}
.nav-links a{
  text-decoration:none;
  font-size:14px;
  font-weight:650;
  opacity:.92;
  transition:opacity .2s ease,color .2s ease;
}
.nav-links a:hover{ color:var(--accent); opacity:1; }

/* Dropdown */
.dropdown{ position:relative; }
.dropdown-toggle{
  background:transparent;
  border:0;
  color:var(--text);
  cursor:pointer;
  font:inherit;
  font-size:14px;
  font-weight:650;
  opacity:.92;
  display:flex;
  align-items:center;
  gap:8px;
}
.dropdown-toggle:hover{ color:var(--accent); opacity:1; }
.dropdownMenu{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:220px;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow-sm);
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:2px;
  opacity:0;
  pointer-events:none;
  transform:translateY(-8px);
  transition:opacity .18s ease, transform .18s ease;
  z-index:1200;
}
.dropdown.open .dropdownMenu{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.dropdownMenu a{
  padding:11px 12px;
  border-radius:10px;
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  color:var(--text);
}
.dropdownMenu a:hover{
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  color:var(--text);
}

/* Header actions */
.header-actions{
  display:flex;
  align-items:center;
  gap:12px;
}
.icon-btn{
  width:44px;
  height:44px;
  border-radius:999px;
  border:2px solid var(--border);
  background:var(--card-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text);
  cursor:pointer;
  text-decoration:none;
  position:relative;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.icon-btn:hover{
  border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}
.cart-count{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  font-size:11px;
  font-weight:800;
  display:none;
  align-items:center;
  justify-content:center;
}

/* Theme dropdown (attached inside themeBtn) */
.theme-dropdown{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:160px;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow-sm);
  padding:8px;
  opacity:0;
  pointer-events:none;
  transform:translateY(-8px);
  transition:opacity .18s ease, transform .18s ease;
}
.icon-btn.active .theme-dropdown{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.theme-option{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
  font-size:13px;
  font-weight:700;
}
.theme-option:hover{ background:color-mix(in srgb, var(--accent) 12%, transparent); }
.theme-option.active{
  background:color-mix(in srgb, var(--accent) 25%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.theme-color{
  width:14px;
  height:14px;
  border-radius:999px;
  border:2px solid var(--border);
}

/* Hamburger + mobile menu */
.hamburger{
  display:none;
  width:44px; height:44px;
  border-radius:999px;
  border:2px solid var(--border);
  background:var(--card-bg);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:6px;
  transition:transform .18s ease, border-color .18s ease;
}
.hamburger span{
  width:22px;
  height:2px;
  background:var(--text);
  border-radius:2px;
  transition:transform .18s ease, opacity .18s ease;
}
.hamburger:hover{ border-color:var(--accent); transform:translateY(-2px); }
.hamburger.active span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

.mobile-menu{
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  left:0; right:0;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow-sm);
  padding:10px;
  gap:8px;
  flex-direction:column;
  z-index:1400;
}
.mobile-menu.open{ display:flex; }
.mobile-menu a{
  text-decoration:none;
  padding:13px 14px;
  border-radius:10px;
  font-weight:700;
  font-size:14px;
  background:color-mix(in srgb, var(--section-alt) 85%, transparent);
  border:1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.mobile-menu a:hover{
  border-color:color-mix(in srgb, var(--accent) 35%, var(--border));
  background:color-mix(in srgb, var(--accent) 10%, var(--section-alt));
}
.mobile-menu a.btn-primary{
  background:var(--accent);
  border-color:transparent;
  color:#fff;
  text-align:center;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 22px;
  border-radius:12px;
  font-size:15px;
  font-weight:800;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:active{ transform:translateY(0); }
.btn-primary{
  background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #006));
  color:#fff;
  box-shadow:0 12px 28px color-mix(in srgb, var(--accent) 18%, transparent);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 44px color-mix(in srgb, var(--accent) 22%, transparent);
}
.btn-secondary{
  background:transparent;
  border-color:color-mix(in srgb, var(--border) 80%, transparent);
  color:var(--text);
}
.btn-secondary:hover{
  border-color:color-mix(in srgb, var(--accent) 45%, var(--border));
  color:var(--text);
  background:color-mix(in srgb, var(--accent) 10%, transparent);
  transform:translateY(-2px);
}

/* ---------- Search UI ---------- */
.search-results{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  right:0;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  z-index:1600;
}
.search-result-item{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-rows:auto auto;
  gap:4px 10px;
  padding:12px 12px;
  text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--border) 65%, transparent);
}
.search-result-item:last-child{ border-bottom:none; }
.search-result-title{ font-weight:800; font-size:13px; }
.search-result-desc{ grid-column:1 / span 2; color:var(--muted); font-size:12px; line-height:1.35; }
.search-result-type{
  justify-self:end;
  align-self:start;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--accent) 85%, #fff);
  opacity:.9;
}
.search-result-item:hover{
  background:color-mix(in srgb, var(--accent) 10%, transparent);
}
.search-no-results{
  padding:14px 12px;
  color:var(--muted);
  font-weight:700;
  font-size:13px;
}

/* ---------- Sections ---------- */
.section{
  padding:92px 0;
  position:relative;
}
.section::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--border), transparent);
  opacity:.55;
}
.section:first-of-type::before{ display:none; }
.section-alt{
  background:linear-gradient(180deg, var(--section-alt), var(--bg));
}
.section-header{
  text-align:center;
  margin-bottom:52px;
}
.section-label{
  display:inline-block;
  font-size:12px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:12px;
}
.section-title{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(30px, 5vw, 54px);
  letter-spacing:-.03em;
  line-height:1.12;
}
.section-description{
  max-width:720px;
  margin:14px auto 0;
  color:var(--muted);
  font-size:17px;
}

/* ---------- Hero (standard) ---------- */
.hero{
  padding:110px 0 70px;
  text-align:center;
  background:
    radial-gradient(700px 360px at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%);
}
.hero h1{
  font-family:var(--font-display);
  font-weight:950;
  font-size:clamp(42px, 7vw, 84px);
  line-height:1.05;
  letter-spacing:-.04em;
  max-width:980px;
  margin:0 auto 18px;
}
.hero p{
  max-width:680px;
  margin:0 auto 30px;
  color:var(--muted);
  font-size:clamp(16px, 2vw, 20px);
}
.hero .btn-row{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

/* ---------- Game Menu Hero (Diagonal Split) ---------- */
.hero-menu{
  position:relative;
  min-height:380px;
  background:transparent;
  border-radius:0;
  overflow:visible;
  color:var(--text);
}
.hero-menu__bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 18% 28%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    radial-gradient(760px 420px at 82% 18%, color-mix(in srgb, var(--accent-secondary) 10%, transparent), transparent 55%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%);
  filter:saturate(1.05);
  transform:scale(1.02);
}
.hero-menu__content{
  position:relative;
  padding:26px 0;
}
.hero-menu__eyebrow{
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12px;
  opacity:.85;
}
.hero-menu__title{
  margin:10px 0 0;
  font-size:44px;
  line-height:1.05;
  letter-spacing:-.03em;
  font-family:var(--font-display);
  font-weight:950;
}
.hero-menu__subtitle{
  margin:10px 0 0;
  max-width:780px;
  font-size:16px;
  color:var(--muted);
}
.hero-menu__split{
  position:relative;
  display:flex;
  width:100%;
  height:380px;
  margin-top:18px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid color-mix(in srgb, var(--border) 85%, transparent);
  box-shadow:var(--shadow-sm);
  background:var(--card-bg);
}
.hero-menu__panel{
  position:relative;
  flex:1 1 0;
  text-decoration:none;
  color:#fff;
  display:flex;
  align-items:flex-end;
  transition:transform .25s cubic-bezier(.4,1.6,.4,1), filter .25s;
  will-change:transform;
}
.hero-menu__panel--repair{
  clip-path:polygon(0 0, 65% 0, 50% 100%, 0 100%);
  background:
    linear-gradient(120deg, rgba(0,217,255,.22), rgba(0,0,0,.06)),
    url("/static/img/hero-repair.jpg") center/cover no-repeat,
    var(--accent);
}
.hero-menu__panel--computers{
  clip-path:polygon(100% 0, 100% 100%, 0 100%, 50% 0, 35% 0);
  background:
    linear-gradient(120deg, rgba(168,85,247,.22), rgba(0,0,0,.06)),
    url("/static/img/hero-computers.jpg") center/cover no-repeat,
    var(--accent-secondary);
}
.hero-menu__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.58));
  opacity:.88;
  transition:opacity .25s ease;
}
.hero-menu__panelContent{
  position:relative;
  padding:22px;
  width:100%;
}
.hero-menu__mode{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.88;
}
.hero-menu__choice{
  margin-top:8px;
  font-size:26px;
  font-weight:900;
  letter-spacing:-.01em;
}
.hero-menu__desc{
  margin-top:8px;
  font-size:14px;
  opacity:.92;
  max-width:440px;
}
.hero-menu__cta{
  margin-top:14px;
  display:inline-block;
  font-weight:900;
  font-size:13px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);
}
.hero-menu__divider{
  position:absolute;
  top:0; bottom:0;
  left:50%;
  width:0;
  border-left:4px solid rgba(255,255,255,.92);
  filter:drop-shadow(0 0 16px color-mix(in srgb, var(--accent) 70%, transparent));
  transform:skewX(-24deg);
  opacity:.95;
  pointer-events:none;
  z-index:3;
}
.hero-menu__split:hover .hero-menu__panel{ filter:brightness(.92); }
.hero-menu__split:hover .hero-menu__panel:hover{
  transform:scale(1.02) skewX(-2deg);
  filter:brightness(1.08);
  z-index:4;
}
.hero-menu__split:hover .hero-menu__panel:hover .hero-menu__overlay{ opacity:.72; }
.hero-menu__panel:hover .hero-menu__choice{ text-shadow:0 12px 30px rgba(0,0,0,.55); }

.hero-menu__bottom{
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  color:var(--muted);
}
.hero-menu__quick{
  text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, #fff 25%, transparent);
  color:var(--text);
  opacity:.92;
}
.hero-menu__quick:hover{ opacity:1; border-bottom-color:color-mix(in srgb, #fff 60%, transparent); }
.hero-menu__dot{ opacity:.55; }

@media (max-width:860px){
  .hero-menu__title{ font-size:36px; }
  .hero-menu__split{
    flex-direction:column;
    height:auto;
  }
  .hero-menu__divider{ display:none; }
  .hero-menu__panel{
    min-height:190px;
    clip-path:none !important;
  }
}

/* ---------- Cards / Grids ---------- */
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:22px;
  margin-top:34px;
}
.service-card{
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--card-bg)), var(--card-bg));
  border:1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius:var(--radius-sm);
  padding:26px;
  position:relative;
  overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.service-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%);
  opacity:.0;
  pointer-events:none;
  transition:opacity .22s ease;
}
.service-card:hover{
  transform:translateY(-6px);
  border-color:color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow:var(--shadow-sm), var(--shadow-glow);
}
.service-card:hover::before{ opacity:.85; }
.service-number{
  font-size:12px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:10px;
}
.service-card h3{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:900;
  letter-spacing:-.02em;
  margin-bottom:10px;
}
.service-card p{
  color:var(--muted);
  font-size:15px;
  margin-bottom:18px;
}

/* Utility panels used in your JS/templates */
.panel{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  box-shadow:0 12px 36px rgba(0,0,0,.10);
}

/* ---------- Featured (optional) ---------- */
.featured-section{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:54px 22px;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 8%, transparent),
    color-mix(in srgb, var(--accent-secondary) 8%, transparent)
  );
  position:relative;
  overflow:hidden;
}
.featured-section::before{
  content:"";
  position:absolute;
  top:-55%;
  right:-20%;
  width:520px;
  height:520px;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%);
  border-radius:50%;
  pointer-events:none;
}
.featured-title{
  font-family:var(--font-display);
  font-weight:950;
  font-size:30px;
  letter-spacing:-.03em;
  margin-bottom:10px;
  background:linear-gradient(135deg, var(--accent), var(--accent-secondary));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.featured-subtitle{
  color:var(--muted);
  margin-bottom:26px;
}
.featured-cascade{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:18px;
  position:relative;
  z-index:1;
}
.featured-card{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:18px;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.featured-card:hover{
  transform:translateY(-8px);
  border-color:color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow:var(--shadow-sm), var(--shadow-glow);
}
.featured-card-badge{
  display:inline-block;
  background:linear-gradient(135deg, var(--accent), var(--accent-secondary));
  color:#fff;
  padding:6px 12px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:10px;
}

/* ---------- Products Grid (Amazon-ish) ---------- */
.products-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:18px;
  margin-bottom:60px;
}
.product-card{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:14px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.product-card:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb, var(--accent) 50%, var(--border));
  box-shadow:var(--shadow-sm);
}
.product-image{
  width:100%;
  aspect-ratio:1/1;
  background:var(--section-alt);
  border-radius:10px;
  overflow:hidden;
  margin-bottom:12px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.product-image img{ width:100%; height:100%; object-fit:cover; }
.product-badge{
  position:absolute;
  top:10px;
  left:10px;
  background:#cc0c39;
  color:#fff;
  padding:4px 10px;
  border-radius:8px;
  font-size:12px;
  font-weight:900;
}
.product-title{
  font-size:15px;
  font-weight:800;
  margin-bottom:8px;
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.product-rating{ font-size:13px; color:var(--muted); margin-bottom:8px; }
.product-price{
  font-size:22px;
  font-weight:950;
  letter-spacing:-.02em;
  margin-bottom:4px;
}
.product-price-label{ font-size:12px; color:var(--muted); margin-bottom:10px; }
.product-delivery{ font-size:13px; color:color-mix(in srgb, var(--accent) 70%, #007185); font-weight:800; margin-bottom:8px; }
.product-specs{ font-size:13px; color:var(--muted); margin-bottom:12px; line-height:1.45; }
.product-actions{ margin-top:auto; display:flex; gap:8px; }
.product-actions .btn{ flex:1; padding:10px 12px; font-size:13px; border-radius:10px; }

@media (max-width:768px){
  .products-grid{ grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:12px; }
  .product-card{ padding:12px; }
  .product-price{ font-size:18px; }
}

/* ---------- Horizontal Products Carousel ---------- */
.products-carousel-section{
  padding:70px 0;
  background:linear-gradient(180deg, var(--bg), var(--section-alt), var(--bg));
  position:relative;
  overflow:hidden;
}
.products-carousel-section::before,
.products-carousel-section::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:120px;
  pointer-events:none;
  z-index:2;
}
.products-carousel-section::before{ left:0; background:linear-gradient(90deg, var(--bg), transparent); }
.products-carousel-section::after{ right:0; background:linear-gradient(270deg, var(--bg), transparent); }

.carousel-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  margin-bottom:22px;
  padding:0 24px;
}
.carousel-header h3{
  font-family:var(--font-display);
  font-size:26px;
  font-weight:950;
  letter-spacing:-.02em;
}
.carousel-view-all{
  text-decoration:none;
  color:var(--accent);
  font-weight:900;
  display:flex;
  gap:6px;
  align-items:center;
}
.carousel-view-all:hover{ gap:10px; }

.products-carousel{
  display:flex;
  gap:18px;
  padding:0 24px 22px;
  overflow-x:auto;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:var(--accent) var(--border);
}
.products-carousel::-webkit-scrollbar{ height:8px; }
.products-carousel::-webkit-scrollbar-track{ background:var(--section-alt); border-radius:999px; }
.products-carousel::-webkit-scrollbar-thumb{ background:var(--accent); border-radius:999px; }

.carousel-card{
  min-width:320px;
  max-width:320px;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:18px;
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.carousel-card:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow:var(--shadow-sm);
}
.carousel-card-image{
  width:100%;
  aspect-ratio:16/10;
  border-radius:10px;
  background:var(--section-alt);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:44px;
  margin-bottom:14px;
}
.carousel-card-image img{ width:100%; height:100%; object-fit:cover; }
.carousel-card-badge{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:950;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.carousel-card-title{ font-size:17px; font-weight:900; margin-bottom:6px; }
.carousel-card-short{ color:var(--muted); font-size:13px; line-height:1.45; flex:1; }
.carousel-card-price{ color:var(--accent); font-size:22px; font-weight:950; margin-top:12px; }

@media (max-width:768px){
  .carousel-card{ min-width:240px; max-width:260px; }
  .products-carousel{ gap:12px; padding:0 12px 18px; }
  .carousel-header{ padding:0 12px; }
  .carousel-header h3{ font-size:20px; }
}

/* ---------- Product Detail ---------- */
.product-hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:44px;
  align-items:center;
}
.product-image-frame{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  min-height:320px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.product-image-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:12px;
  box-shadow:0 16px 50px rgba(0,0,0,.18);
}
.image-fallback{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-weight:800;
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent);
  border-radius:12px;
}
.product-title-main{
  font-family:var(--font-display);
  font-size:clamp(30px, 4vw, 48px);
  font-weight:950;
  line-height:1.1;
  letter-spacing:-.03em;
}
.product-subline{ color:var(--muted); font-size:16px; }
.product-meta{ display:flex; flex-wrap:wrap; gap:8px; }
.badge-pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  border:1px solid var(--border);
  background:var(--section-alt);
  border-radius:999px;
  padding:8px 14px;
  font-size:11px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.price-tag{
  display:inline-flex;
  align-items:center;
  padding:10px 16px;
  border-radius:14px;
  background:var(--card-bg);
  border:2px solid var(--border);
  font-weight:950;
  font-size:20px;
}
.product-actions-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}
.detail-card{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:26px;
  box-shadow:0 12px 36px rgba(0,0,0,.10);
}

@media (max-width:900px){
  .product-hero-grid{ grid-template-columns:1fr; gap:28px; }
  .product-image-frame{ min-height:260px; }
}

/* ---------- Modal (Consult) ---------- */
.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:2000;
}
.modal-backdrop.open{ display:flex; }
.hp{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  opacity:0;
  pointer-events:none;
}
.modal{
  width:min(720px, 100%);
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  max-height:90vh;
  overflow:auto;
}
.modal-inner{
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.modal-head h3{
  font-size:20px;
  letter-spacing:-.02em;
  margin:0 0 4px;
  font-weight:950;
}
.modal-head p{ margin:0; color:var(--muted); }
.modal .x{
  width:36px; height:36px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--section-alt);
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:18px;
  color:var(--text);
}
.modal .x:hover{ border-color:var(--accent); }

.modal form{ display:flex; flex-direction:column; gap:12px; }
.modal label{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-weight:800;
  font-size:13px;
}
.modal input,
.modal select,
.modal textarea{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--text);
  font:inherit;
  font-size:14px;
}
.modal input:focus,
.modal select:focus,
.modal textarea:focus{ border-color:var(--accent); outline:none; }
.modal textarea{ min-height:120px; resize:vertical; }
.modal .hint{ color:var(--muted); font-size:12px; font-weight:650; margin-top:-6px; }
.modal .form-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:4px;
}
.modal .success{
  display:none;
  background:#e6ffed;
  color:#0f5132;
  border:1px solid #b7e4c7;
  border-radius:12px;
  padding:12px 14px;
  font-weight:900;
}
.modal .success.show{ display:block; }

@media (max-width:640px){
  .modal-inner{ padding:20px; }
  .modal-head{ flex-direction:column; }
  .modal .form-actions{ flex-direction:column; }
  .modal .btn{ width:100%; }
}

/* ---------- Floating CTA ---------- */
.floating-cta{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:1900;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow-sm);
  padding:14px 14px;
  display:flex;
  align-items:center;
  gap:14px;
  max-width:min(520px, calc(100% - 30px));
}
.floating-cta.hidden{ display:none; }
.floating-cta .cta-text{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.floating-cta .cta-text strong{ font-weight:950; }
.floating-cta .cta-text span{ color:var(--muted); font-weight:700; font-size:13px; }
.floating-cta .cta-actions{ display:flex; gap:8px; align-items:center; }
.floating-cta .cta-actions .pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:10px 14px;
  font-weight:950;
  font-size:13px;
  border:1px solid var(--border);
  background:transparent;
  text-decoration:none;
}
.floating-cta .cta-actions .pill.primary{
  background:var(--accent);
  border-color:transparent;
  color:#fff;
}
.floating-cta .cta-actions .pill:hover{ transform:translateY(-1px); }
.floating-cta .cta-close{
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:18px;
  cursor:pointer;
  padding:6px 8px;
  border-radius:10px;
}
.floating-cta .cta-close:hover{
  background:color-mix(in srgb, var(--border) 55%, transparent);
  color:var(--text);
}

/* ---------- Mobile sticky bar ---------- */
.mobile-sticky-bar{
  position:fixed;
  left:0; right:0; bottom:0;
  display:none;
  gap:10px;
  padding:12px 14px;
  background:var(--header-bg);
  border-top:1px solid var(--border);
  z-index:2100;
  backdrop-filter:blur(16px);
}
.mobile-sticky-bar a{
  flex:1;
  text-align:center;
  padding:12px 14px;
  border-radius:14px;
  font-weight:950;
  text-decoration:none;
  border:1px solid var(--border);
  background:var(--card-bg);
}
.mobile-sticky-bar a.primary{
  background:var(--accent);
  border-color:transparent;
  color:#fff;
}
@media (max-width:768px){
  .mobile-sticky-bar{ display:flex; }
  body{ padding-bottom:76px; }
}

/* ---------- Footer ---------- */
footer{
  background:var(--footer-bg);
  color:#fff;
  padding:58px 0 38px;
}
.footer-content{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:44px;
  margin-bottom:32px;
}
.footer-brand{
  font-family:var(--font-display);
  font-weight:950;
  font-size:22px;
  margin-bottom:10px;
}
.footer-tagline{
  color:rgba(255,255,255,.65);
  font-size:15px;
  margin-bottom:18px;
}
.footer-section h4{
  font-size:12px;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:12px;
  opacity:.9;
}
.footer-links{ list-style:none; }
.footer-links li{ margin-bottom:10px; }
.footer-links a{
  color:rgba(255,255,255,.72);
  text-decoration:none;
  font-weight:700;
  font-size:14px;
}
.footer-links a:hover{ color:#fff; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.10);
  padding-top:22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  color:rgba(255,255,255,.55);
  font-size:13px;
}

/* ---------- Reveal (used by your JS) ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .6s ease, transform .6s ease;
}
[data-reveal].show{
  opacity:1;
  transform:translateY(0);
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .container{ padding:0 16px; }
  .nav-links{ display:none; }
  .hamburger{ display:inline-flex; }
  .mobile-menu{ display:none; }
  .hero{ padding:88px 0 58px; }
  .section{ padding:62px 0; }
  .footer-content{ grid-template-columns:1fr; gap:28px; }
  .footer-bottom{ flex-direction:column; text-align:center; }
}
/* ===========================
   HERO MENU FIX (NO WHITE GAP)
   Paste at END of style.css
   =========================== */

/* The split container should never show a white "floor" */
.hero-menu__split{
  background: transparent !important;
  overflow: hidden;
}

/* Ensure panels can overlap cleanly */
.hero-menu__panel{
  position: relative;
  overflow: hidden;
}

/* Slight overlap removes any uncovered seam */
.hero-menu__panel--repair{
  margin-right: -110px;           /* overlap into center */
  clip-path: polygon(0 0, 72% 0, 56% 100%, 0 100%);  /* covers more */
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
}

/* Right panel overlaps back over the left */
.hero-menu__panel--computers{
  margin-left: -110px;            /* overlap into center */
  clip-path: polygon(44% 0, 100% 0, 100% 100%, 0 100%); /* covers more */
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
}

/* Make sure the images/gradients are always visible (even if images missing) */
.hero-menu__panel--repair,
.hero-menu__panel--computers{
  background-blend-mode: overlay, normal, normal;
  background-color: rgba(0,0,0,.15);
}

/* Divider line stays above everything */
.hero-menu__divider{
  z-index: 10 !important;
  opacity: .9;
}

/* Mobile: reset overlap so it doesn't break stacking */
@media (max-width: 860px){
  .hero-menu__panel--repair,
  .hero-menu__panel--computers{
    margin-left: 0 !important;
    margin-right: 0 !important;
    clip-path: none !important;
    border-radius: 16px !important;
  }
}