/* =========================
   TechAlive — Global Styles
   ========================= */
/* 0. Base reset */
* { box-sizing: border-box; }
html { line-height: 1.4; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: system-ui, Arial, sans-serif; color: #e6e6e6; background:#0b0d10; }

/* 1. Fluid type + spacing */
:root{
  --container: 1100px;
  --pad: clamp(12px, 2.5vw, 24px);
  --gap: clamp(12px, 2.5vw, 20px);
}
h1{ font-size: clamp(1.6rem, 3.8vw, 2.4rem); margin: 0.6em 0; }
h2{ font-size: clamp(1.3rem, 3vw, 1.8rem); margin: 0.6em 0; }
p, li{ font-size: clamp(0.98rem, 2.2vw, 1.05rem); }

/* 2. Layout container */
.container{ width: min(100% - 2*var(--pad), var(--container)); margin-inline: auto; }

/* 3. Header (white text, larger logo) */
.site-header{
  position: sticky; top:0; z-index: 10;
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: var(--gap);
  padding: var(--pad) clamp(12px, 3vw, 24px);
  background: #0f1318; border-bottom: 1px solid #1f2a36;
}
.brand{ display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; }
.logo{ height: clamp(44px, 8vw, 70px); width: auto; display:block; }
.brand-name{ font-weight: 700; letter-spacing: .3px; color:#fff; }

/* 3a. Mobile nav (CSS-only burger) */
#nav-toggle{ display:none; }
.burger{
  cursor: pointer; font-size: 1.6rem; color:#fff; padding: 6px 10px; border-radius: 8px;
  border: 1px solid transparent;
}
.nav{
  display: none; /* hidden by default on mobile */
  position: absolute; right: 12px; top: calc(100% + 8px);
  background: #0f1318; border: 1px solid #1f2a36; border-radius: 12px;
  padding: 8px; min-width: 200px;
}
.nav a{
  display:block; padding: 10px 12px; text-decoration:none; color:#fff; border-radius: 8px;
}
.nav a:hover{ background:#17202a; }
#nav-toggle:checked ~ .nav{ display:block; }

/* 3b. Desktop nav */
@media (min-width: 900px){
  .site-header{ grid-template-columns: auto 1fr; }
  .burger{ display:none; }
  .nav{
    position: static; display:flex; gap: 8px; padding: 0; border: none; background: transparent;
  }
  .nav a{ padding: 10px 12px; }
}

/* 4. Hero image scales nicely */
.hero{
  position: relative; overflow: hidden;
  min-height: clamp(220px, 40vw, 420px);
  display:grid; place-items:center; text-align:center;
  background:#0a0c0f;
}
.hero img{ width:100%; height:100%; object-fit: cover; display:block; }
.hero .hero-text{
  position:absolute; inset: 0; display:grid; place-items:center; padding: var(--pad);
  background: linear-gradient(180deg, rgba(11,13,16,.35), rgba(11,13,16,.75));
  color:#fff;
}

/* 5. Product cards grid (auto-fit for mobile) */
.grid{
  display:grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.card{
  background:#0f1318; border:1px solid #1f2a36; border-radius: 16px; overflow:hidden;
}
.card img{ width:100%; height: 180px; object-fit: cover; display:block; }
.card .pad{ padding: 14px; }
.card h3{ margin: 0 0 6px; font-size: 1.05rem; color:#fff; }
.badge{ font-size: .8rem; opacity:.8; }

/* 6. Images always scale down */
img{ max-width:100%; height:auto; }

/* 7. Footer (white text) */
footer{
  margin-top: 40px; padding: 24px clamp(12px, 3vw, 24px);
  background:#0f1318; border-top: 1px solid #1f2a36; color:#fff;
}
footer a{ color:#fff; opacity:.9; text-decoration:none; }
footer a:hover{ opacity:1; text-decoration:underline; }

/* Base */
* { box-sizing: border-box }
:root{
  --blue:#0046a0;
  --accent:#00b9ff;
  --bg:#0b0f14;
  --panel:#0e1621;
  --text:#e9eef5;
  --muted:#c7d7ee; /* slightly brighter for contrast */
  --border:rgba(255,255,255,.08);
  --shadow:0 8px 24px rgba(0,0,0,.35);
}
html,body{
  margin:0;
  padding:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6
}
html{scroll-behavior:smooth}

/* Improve default focus visibility */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:.4rem
}

/* Layout */
.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 2rem; /* a touch more breathing room on desktop */
}
@media (max-width:720px){
  .container{ padding:0 1.25rem }
}

/* =================
   Header / Nav Bar
   ================= */
.site-header{
  background:var(--blue);
  position:sticky; top:0; z-index:50;
  box-shadow:0 2px 12px rgba(0,0,0,.25)
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 0;
}
.brand {
  display: flex;
  align-items: center;
}
/* Bigger logo */
.brand-logo {
  height: 80px;   /* increase size */
  width: auto;
  display: block;
}

/* Business name next to logo */
.brand-name {
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;   /* white text */
  margin-left: 1rem;

}
.site-title{
  margin:0;
  font-weight:800;
  font-size:clamp(1.1rem,2.2vw,1.35rem);
  letter-spacing:.2px;
  color:#fff;
  white-space:nowrap
}

.nav{ display:flex; align-items:center; gap:.25rem }
.nav-link{
  color:#fff; text-decoration:none; font-weight:650;
  padding:.5rem .75rem; border-radius:.6rem; position:relative
}
/* subtle underline grow on hover for feedback */
.nav-link::after{
  content:""; position:absolute; left:.75rem; right:.75rem; bottom:.35rem;
  height:2px; background:transparent; transform:scaleX(0); transform-origin:left; transition:.25s
}
.nav-link:hover{ color:#fff }
.nav-link:hover::after{ background:var(--accent); transform:scaleX(1) }
.nav-link.active{ background:rgba(255,255,255,.14) }

/* Simple mobile wrap */
@media (max-width:820px){
  .header-inner{ flex-wrap:wrap }
  .nav{ width:100%; justify-content:flex-start; gap:.5rem }
}

/* ======
   Buttons
   ====== */
.btn{
  display:inline-block; text-decoration:none; font-weight:800;
  border-radius:.8rem; padding:.85rem 1.1rem; transition:transform .12s ease, box-shadow .12s ease, filter .12s ease
}
.btn:active{ transform:translateY(1px) }
.btn-primary{ background:var(--accent); color:#081016 }
.btn-primary:hover{ filter:brightness(1.06); box-shadow:var(--shadow) }
.btn-ghost{ color:#fff; border:2px solid rgba(255,255,255,.35) }
.btn-ghost:hover{ background:rgba(255,255,255,.08) }
.btn-ebay{ background:#ffe000; color:#111 }
.btn-ebay:hover{ filter:brightness(1.05) }

/* ====
   Hero
   ==== */

/* By default: NO text overlapping the main image.
   Use .ta-hero--overlay on .ta-hero if you ever want text on top again. */

.ta-hero{ padding:0 }
.ta-hero__inner{ display:block }
.ta-hero__picture, .ta-hero__img{ display:block; width:100%; height:auto }

/* Content shown BELOW the image by default */
.ta-hero__content{
  display:grid; place-items:center; text-align:center;
  padding:1.25rem 1rem 1.5rem;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.02) 20%, rgba(0,0,0,.25) 100%);
  border-top:1px solid var(--border)
}
.ta-hero__title{
  font-size:clamp(1.9rem,3.2vw,2.6rem);
  font-weight:900; margin:0 0 .6rem
}
.ta-hero__subtitle{
  font-size:clamp(1rem,2.2vw,1.2rem);
  margin:0 0 1.25rem; color:var(--muted)
}
.ta-hero__highlights{
  list-style:none; display:flex; flex-wrap:wrap; gap:.75rem 1rem;
  align-items:center; justify-content:center; margin:0 0 1.5rem; padding:0
}
.ta-hero__item{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem .8rem; background:rgba(255,255,255,.05); border:1px solid var(--border);
  border-radius:9999px
}
.ta-hero__icon{ font-size:1.2rem }
.ta-hero__divider{ width:1px; height:18px; background:rgba(255,255,255,.25) }

/* Modifier to overlay text on the image (optional) */
.ta-hero.ta-hero--overlay .ta-hero__inner{ position:relative }
.ta-hero.ta-hero--overlay .ta-hero__content{
  position:absolute; inset:0; display:grid; place-items:center; background:transparent; border-top:none; padding:1rem
}
.ta-hero.ta-hero--overlay .ta-hero__inner::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.65) 100%)
}

/* =========
   Trust Bar
   ========= */
.trustbar{
  background:var(--panel);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:1rem 0
}
.trustbar-inner{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.2rem; align-items:center; justify-items:center
}
.trust-item{
  display:flex; align-items:center; gap:.6rem;
  color:#d7e7ff; font-weight:700; font-size:1rem
}
.trust-item a{ color:inherit; text-decoration:none }
.trust-item a:hover{ text-decoration:underline }
.trust-icon{ height:32px; width:32px; display:inline-block }

/* ========
   Products
   ======== */
.products{ padding:2rem 0 3rem }
.products h2{ font-size:1.9rem; margin:0 0 .25rem }
.products-subtitle{ color:var(--muted); margin:0 0 1.5rem }

.product-grid{
  display:grid; grid-template-columns:repeat(12,1fr); gap:1.25rem
}
@media (max-width:1024px){
  .product-grid{ grid-template-columns:repeat(8,1fr) }
}
@media (max-width:720px){
  .product-grid{ grid-template-columns:repeat(4,1fr) }
}

/* Card */
.product-card{
  grid-column:span 4;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease
}
.product-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
  border-color:rgba(255,255,255,.14)
}
@media (max-width:1024px){ .product-card{ grid-column:span 4 } }
@media (max-width:720px){ .product-card{ grid-column:span 4 } }

/* Media */
.product-media{ padding:.75rem .75rem 0 }
.product-media picture,.product-media img{
  width:100%; height:auto; display:block; border-radius:12px; background:#09101a
}

/* Thumbnails */
.thumbs{ display:flex; gap:.5rem; padding:.6rem 0 .75rem }
.thumb{
  border:2px solid transparent; border-radius:10px; background:transparent;
  padding:0; cursor:pointer; transition:border-color .15s ease, transform .1s ease
}
.thumb:active{ transform:scale(.98) }
.thumb.is-active{ border-color:var(--accent) }
.thumbs picture{ display:inline-block; width:64px; height:48px }
.thumbs img{ width:100%; height:100%; object-fit:cover; border-radius:8px; display:block }

/* Info */
.product-info{ padding:0 1rem 1rem }
.product-title{
  font-size:1.2rem; line-height:1.4; margin:.25rem 0 .35rem; font-weight:750
}
.product-price{
  color:var(--accent); font-weight:900; font-size:1.1rem; margin:.1rem 0 .6rem
}
.product-specs{ margin:0 0 1rem; padding-left:1.1rem; color:#cfe3ff }
.product-specs li{ margin:.2rem 0 }
.product-cta{ display:flex; gap:.6rem; flex-wrap:wrap }

/* ===========
   Contact/Foot
   =========== */
.contact{
  background:var(--panel);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border)
}
.contact .container{ padding:2rem 1rem }
.contact a{ color:var(--accent); text-decoration:none }
.contact a:hover{ text-decoration:underline }

/* Ensure footer text is white */
.site-footer {
  background: var(--blue);
  color: #fff; /* footer text white */
  text-align: center;
  padding: 1rem 0;
}

.site-footer p {
  color: #fff; /* force paragraph text white */
}

.social-links a {
  color: #fff; /* links white */
  margin: 0 0.5rem;
  text-decoration: none;
  font-weight: 600;
}

.social-links a:hover {
  color: var(--accent); /* highlight on hover */
}

/* Make <picture> behave like <img> universally */
picture{ display:block; max-width:100%; height:auto }
picture img{ display:block; max-width:100%; height:auto; border-radius:inherit }

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