/* amptech — style.css (WHITE THEME)
   Design: white background, dark text, orange accents
   Sections: Tokens · Reset · Nav · Buttons · Hero · Home sections ·
             Products page (sidebar filter + gallery) · Modal · Contact · Footer · Responsive */

/* ── TOKENS (WHITE THEME) ── */
:root {
  --white:      #ffffff;
  --black:      #0a0a0a;
  --light-bg:   #f8f8f8;
  --light-border: #e0e0e0;
  --text-dark:  #1a1a1a;
  --text-muted: #666666;
  --orange:     #e05a00;
  --orange-lt:  rgba(224,90,0,0.1);
  --orange-md:  rgba(224,90,0,0.25);
  --orange-dim: rgba(224,90,0,0.08);
  --ease:       0.3s ease;
  --font:       'Poppins', system-ui, sans-serif;
  --mono:       'Space Mono', monospace;
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html  { scroll-behavior:smooth; }
body  { background:var(--white); color:var(--text-dark); font-family:var(--font);
        font-weight:300; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
img   { display:block; max-width:100%; }
a     { color:inherit; text-decoration:none; }
button, input, textarea, select { font:inherit; }

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 3rem; height:75px;
  background:var(--white);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--light-border);
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
}
.nav-brand { display:flex; align-items:center; gap:12px; }
.logo-box {
  width:48px; height:48px;
  border:2px solid var(--orange);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:14px; color:var(--white);
  background:var(--orange);
  letter-spacing:1px; flex-shrink:0; border-radius:6px;
}
.logo-box::after { content:'AT'; }
.brand-name { font-weight:400; font-size:2.2rem; letter-spacing:0.5px; }
.nav-links { display:flex; gap:2.5rem; align-items:center; }
.nav-links a {
  font-size:0.78rem; letter-spacing:2px; text-transform:uppercase;
  color:var(--text-muted); transition:color var(--ease);
}
.nav-links a:hover, .nav-links a.active { color:var(--orange); }
.nav-links a.active { border-bottom:2px solid var(--orange); padding-bottom:2px; }

/* ── SHARED LABEL ── */
.section-label {
  font-size:0.68rem; letter-spacing:4px; text-transform:uppercase;
  color:var(--orange); display:flex; align-items:center; gap:10px; margin-bottom:0.8rem;
}
.section-label::before { content:''; width:20px; height:1px; background:var(--orange); }

/* ── BUTTONS ── */
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 24px;
  border:1px solid var(--orange); background:var(--orange);
  color:var(--white);
  font-size:0.75rem; letter-spacing:2px; text-transform:uppercase;
  cursor:pointer; border-radius:8px;
  transition:background var(--ease), box-shadow var(--ease);
}
.btn-primary:hover { background:#f07030; box-shadow:0 4px 12px var(--orange-md); }
.btn-primary:focus-visible { outline:2px solid var(--orange); outline-offset:3px; }

.btn-ghost {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 24px;
  border:1px solid var(--light-border); background:var(--light-bg);
  color:var(--text-dark); font-size:0.75rem; letter-spacing:2px; text-transform:uppercase;
  cursor:pointer; border-radius:8px;
  transition:border-color var(--ease), background var(--ease);
}
.btn-ghost:hover { border-color:var(--orange); background:var(--orange-lt); }
.btn-ghost:focus-visible { outline:2px solid var(--orange); outline-offset:3px; }

/* ── HERO BANNER ── */
.hero-banner {
  margin-top:64px; height:88px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 3rem;
  background:linear-gradient(90deg, var(--orange-lt), transparent);
  border-bottom:1px solid var(--light-border);
  position:relative; overflow:hidden;
}
.hero-banner::after {
  content:''; position:absolute; right:0; top:0; bottom:0; width:40%;
  background:radial-gradient(ellipse at right, var(--orange-dim) 0%, transparent 70%);
  pointer-events:none;
}
.banner-text h1 { font-size:1rem; font-weight:500; letter-spacing:4px; text-transform:uppercase; color:var(--text-dark); }
.banner-text p  { font-size:0.72rem; color:var(--text-muted); letter-spacing:2px; margin-top:2px; }

/* ── HERO MAIN ── */
.hero-main {
  min-height:calc(100vh - 152px);
  display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden; padding:6rem 3rem;
}
.hero-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:brightness(0.9) saturate(0.9);
  animation:slideBackground 15s infinite;
}

@keyframes slideBackground {
  0% { background-image:url('assets/pdu1a.jpg'); }
  33% { background-image:url('assets/pdu2a.jpg'); }
  66% { background-image:url('assets/pdu3a.jpg'); }
  100% { background-image:url('assets/pdu1a.jpg'); }
}
.hero-bg::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.85) 40%, rgba(224,90,0,0.08) 100%);
}
.grid-lines {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(0,0,0,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 1px);
  background-size:80px 80px;
}
.hero-content { position:relative; z-index:1; max-width:650px; }
.hero-tag {
  font-size:0.7rem; letter-spacing:4px; text-transform:uppercase;
  color:var(--orange); margin-bottom:1.5rem;
  display:flex; align-items:center; gap:10px;
}
.hero-tag::before { content:''; width:30px; height:1px; background:var(--orange); }
.hero-main h2 { font-size:clamp(2.2rem,5vw,4rem); font-weight:600; line-height:1.1; letter-spacing:-1px; color:var(--text-dark); }
.hero-main h2 em { font-style:normal; color:var(--orange); }
.hero-main p { margin-top:1.5rem; font-size:0.95rem; line-height:1.8; color:var(--text-muted); max-width:480px; }
.hero-ctas { display:flex; gap:1rem; margin-top:2.5rem; flex-wrap:wrap; }

/* ── HOME SECTIONS ── */
section { padding:7rem 3rem; }

.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; margin-top:3rem; }
.about-img-wrap { position:relative; height:460px; overflow:hidden; border-radius:12px; }
.about-img-wrap img {
  width:100%; height:100%; object-fit:cover;
  filter:brightness(0.8) saturate(0.6);
  transition:transform 0.6s ease, filter 0.6s ease;
}
.about-img-wrap:hover img { transform:scale(1.05); filter:brightness(0.9) saturate(0.8); }
.about-img-wrap::after {
  content:''; position:absolute; inset:0;
  border:1px solid var(--light-border);
  background:linear-gradient(135deg, var(--orange-lt), transparent);
}
.about-text h2 { font-size:2.2rem; font-weight:600; line-height:1.2; color:var(--text-dark); }
.about-text h2 em { font-style:normal; color:var(--orange); }
.about-text p { margin-top:1.2rem; color:var(--text-muted); line-height:1.9; font-size:0.9rem; }

.brochure {
  background:var(--light-bg); border:1px solid var(--light-border);
  display:flex; align-items:center; justify-content:space-between;
  gap:3rem; flex-wrap:wrap; position:relative; overflow:hidden; border-radius:12px;
  padding:3rem;
}
.brochure::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--orange);
}
.brochure h2 { font-size:1.6rem; font-weight:600; color:var(--text-dark); }
.brochure p  { color:var(--text-muted); margin-top:0.6rem; font-size:0.85rem; line-height:1.7; }
.btn-download {
  display:flex; align-items:center; gap:10px;
  padding:14px 32px;
  background:var(--orange); color:var(--white);
  font-size:0.75rem; letter-spacing:2px; text-transform:uppercase;
  font-weight:600; cursor:pointer; border:none; white-space:nowrap; border-radius:8px;
  transition:background var(--ease), box-shadow var(--ease);
}
.btn-download:hover { background:#f07030; box-shadow:0 4px 12px var(--orange-md); }
.btn-download:focus-visible { outline:2px solid var(--orange); outline-offset:3px; }

.contact-strip {
  background:var(--light-bg); border:1px solid var(--light-border);
  display:flex; gap:4rem; align-items:center; flex-wrap:wrap; border-radius:12px;
  padding:2rem 3rem;
}
.contact-item { display:flex; align-items:center; gap:1rem; }
.contact-icon {
  width:44px; height:44px; border:1px solid var(--orange);
  display:flex; align-items:center; justify-content:center;
  color:var(--white); flex-shrink:0; font-size:1.1rem;
  background:var(--orange); border-radius:8px;
}
.contact-info label { font-size:0.65rem; letter-spacing:2px; text-transform:uppercase; color:var(--text-muted); display:block; }
.contact-info span  { font-size:0.9rem; color:var(--text-dark); }
.contact-info a { color:var(--text-dark); transition:color var(--ease); }
.contact-info a:hover { color:var(--orange); }

/* ── PRODUCTS PAGE ── */
.page-header {
  margin-top:64px; padding:4rem 3rem 3rem;
  border-bottom:1px solid var(--light-border);
  position:relative; overflow:hidden;
}
.page-header::before {
  content:''; position:absolute; right:0; top:0; bottom:0; width:50%;
  background:radial-gradient(ellipse at 70% 50%, rgba(224,90,0,0.05), transparent 70%);
  pointer-events:none;
}
.page-header h1 { font-size:2.5rem; font-weight:600; color:var(--text-dark); }
.page-header p  { margin-top:0.5rem; color:var(--text-muted); font-size:0.9rem; }

/* Products layout: sidebar filter left + grid right */
.products-layout {
  display:grid;
  grid-template-columns:200px 1fr;
  gap:0;
  min-height:60vh;
}

/* SIDEBAR FILTER */
.filter-sidebar {
  border-right:1px solid var(--light-border);
  padding:2.5rem 1.5rem;
  position:sticky;
  top:64px;
  height:calc(100vh - 64px);
  overflow-y:auto;
  background:var(--white);
}
.filter-sidebar-label {
  font-size:0.65rem; letter-spacing:3px; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:1.2rem;
}
.filter-buttons {
  display:flex; flex-direction:column; gap:0.5rem;
}
.filter-btn {
  width:100%;
  padding:11px 16px;
  border:1px solid var(--light-border); background:var(--light-bg);
  color:var(--text-muted);
  font-size:0.75rem; letter-spacing:1.5px; text-transform:uppercase;
  text-align:left; cursor:pointer; border-radius:6px;
  transition:border-color var(--ease), color var(--ease), background var(--ease);
  position:relative; overflow:hidden;
}
.filter-btn::before {
  content:''; position:absolute; inset:0;
  background:var(--orange); opacity:0; transition:opacity var(--ease);
}
.filter-btn span { position:relative; z-index:1; }
.filter-btn:hover { border-color:var(--orange); color:var(--text-dark); }
.filter-btn:hover::before { opacity:0.08; }
.filter-btn.active { border-color:var(--orange); color:var(--orange); background:var(--orange-lt); box-shadow:0 0 12px rgba(224,90,0,0.15); }
.filter-btn:focus-visible { outline:2px solid var(--orange); outline-offset:3px; }

/* Filter group with dropdown */
.filter-group {
  width:100%;
  margin-bottom:0.3rem;
}

.filter-btn-group {
  width:100%;
  padding:11px 16px;
  border:1px solid var(--light-border);
  background:var(--light-bg);
  color:var(--text-muted);
  font-size:0.75rem;
  letter-spacing:1.5px;
  text-transform:uppercase;
  text-align:left;
  cursor:pointer;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  transition:border-color var(--ease), color var(--ease), background var(--ease);
  position:relative;
  overflow:hidden;
}

.filter-btn-group::before {
  content:'';
  position:absolute;
  inset:0;
  background:var(--orange);
  opacity:0;
  transition:opacity var(--ease);
}

.filter-btn-group span {
  position:relative;
  z-index:1;
}

.group-toggle {
  font-size:0.65rem;
  transition:transform 0.3s ease;
}

.filter-btn-group:hover {
  border-color:var(--orange);
  color:var(--text-dark);
}

.filter-btn-group:hover::before {
  opacity:0.08;
}

.filter-btn-group.active {
  border-color:var(--orange);
  color:var(--orange);
  background:var(--orange-lt);
}

.filter-btn-group.active .group-toggle {
  transform:rotate(180deg);
}

.filter-submenu {
  background:rgba(224,90,0,0.04);
  border:1px solid var(--light-border);
  border-top:none;
  overflow:hidden;
  border-radius:0 0 6px 6px;
}

.filter-btn-sub {
  width:100%;
  padding:9px 28px;
  border:none;
  background:transparent;
  color:var(--text-muted);
  font-size:0.7rem;
  letter-spacing:1.2px;
  text-transform:uppercase;
  text-align:left;
  cursor:pointer;
  transition:color var(--ease), background var(--ease);
  display:block;
  position:relative;
  padding-left:28px;
}

.filter-btn-sub::before {
  content:'';
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  width:4px;
  height:4px;
  background:var(--orange);
  border-radius:50%;
  opacity:0;
  transition:opacity var(--ease);
}

.filter-btn-sub:hover {
  background:var(--orange-lt);
  color:var(--text-dark);
}

.filter-btn-sub:hover::before {
  opacity:1;
}

.filter-btn-sub.active {
  background:var(--orange-lt);
  color:var(--orange);
}

.filter-btn-sub.active::before {
  opacity:1;
}

.filter-btn-sub:focus-visible {
  outline:2px solid var(--orange);
  outline-offset:-2px;
}

/* PRODUCT GRID (right of sidebar) */
.products-grid-wrap { padding:2rem 2rem 4rem; background:var(--white); }
.products-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.5px; background:var(--light-border);
}

.product-card {
  background:var(--white); position:relative; overflow:hidden;
  border:1px solid var(--light-border);
  transition:border-color var(--ease), transform var(--ease), box-shadow var(--ease);
  border-radius:8px;
}
.product-card:hover { border-color:var(--orange); transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,0.1); }

.product-img { width:100%; height:220px; overflow:hidden; position:relative; }
.product-img img {
  width:100%; height:100%; object-fit:cover;
  transition:transform 0.6s ease;
  display:block;
}
.product-card:hover .product-img img { transform:scale(1.06); }
.product-img::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.3) 0%, transparent 55%);
  pointer-events:none;
}

.img-dots {
  position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  display:flex; gap:5px; z-index:2;
}
.img-dot {
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,0.5); cursor:pointer;
  transition:background var(--ease);
  border:none; padding:0;
}
.img-dot.active { background:var(--orange); }
.img-dot:focus-visible { outline:2px solid var(--orange); outline-offset:2px; }

.product-body { padding:1.2rem 1.5rem 0.8rem; }
.product-cat  { font-size:0.62rem; letter-spacing:3px; text-transform:uppercase; color:var(--orange); margin-bottom:0.4rem; }
.product-name { font-size:1rem; font-weight:500; line-height:1.3; color:var(--text-dark); }
.product-sub  { font-size:0.78rem; color:var(--text-muted); margin-top:0.3rem; }
.product-footer {
  display:flex; justify-content:space-between; align-items:center;
  padding:0.9rem 1.5rem; border-top:1px solid var(--light-border);
}
.btn-view {
  font-size:0.7rem; letter-spacing:2px; text-transform:uppercase;
  color:var(--orange); cursor:pointer; background:none; border:none;
  display:flex; align-items:center; gap:6px; transition:gap var(--ease);
}
.btn-view:hover { gap:12px; }
.btn-view:focus-visible { outline:2px solid var(--orange); outline-offset:3px; }
.product-badge { font-family:var(--mono); font-size:0.62rem; color:var(--text-muted); letter-spacing:1px; }

/* ── MODAL ── */
.modal-overlay {
  position:fixed; inset:0; z-index:300;
  background:rgba(0,0,0,0.5); backdrop-filter:blur(12px);
  display:flex; align-items:center; justify-content:center;
  padding:2rem;
  opacity:0; pointer-events:none; transition:opacity 0.3s ease;
}
.modal-overlay.open { opacity:1; pointer-events:all; }

.modal {
  background:var(--white); border:1px solid var(--light-border);
  max-width:720px; width:100%; max-height:90vh; overflow-y:auto;
  position:relative;
  transform:scale(0.95) translateY(20px);
  transition:transform 0.35s ease;
  border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,0.15);
  scrollbar-width:thin; scrollbar-color:var(--orange-md) transparent;
}
.modal-overlay.open .modal { transform:scale(1) translateY(0); }

.modal-close {
  position:absolute; top:1rem; right:1rem; z-index:10;
  width:34px; height:34px;
  background:var(--light-bg); border:1px solid var(--light-border);
  color:var(--text-muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--ease), color var(--ease), border-color var(--ease);
  border-radius:50%;
}
.modal-close:hover { background:var(--orange-lt); border-color:var(--orange); color:var(--orange); }
.modal-close:focus-visible { outline:2px solid var(--orange); outline-offset:3px; }

.modal-gallery {
  position:relative;
  width:100%;
  height:70vh;          /* was 280px */
  max-height:80vh;      /* prevents overflow */
  overflow:hidden;
  background:var(--light-bg);
  border-radius:12px 12px 0 0;
}

.modal-gallery-img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;   /* was cover */
  background:#000;      /* optional: cleaner contrast */
  opacity:0;
  transition:opacity 0.4s ease;
  display:block;
}

.modal-gallery-img.active { opacity:1; }
.modal-gallery-dots {
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  display:flex; gap:7px; z-index:2;
}
.modal-gallery-dot {
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,0.5); cursor:pointer;
  transition:background var(--ease); border:none; padding:0;
}
.modal-gallery-dot.active { background:var(--orange); }
.modal-gallery-dot:focus-visible { outline:2px solid var(--orange); outline-offset:2px; }
.modal-gallery-prev,
.modal-gallery-next {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,0.4); border:1px solid rgba(255,255,255,0.3);
  color:var(--white); width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:2; font-size:0.85rem; border-radius:4px;
  transition:border-color var(--ease), background var(--ease);
}
.modal-gallery-prev { left:10px; }
.modal-gallery-next { right:10px; }
.modal-gallery-prev:hover,
.modal-gallery-next:hover { border-color:var(--orange); background:var(--orange); }
.modal-gallery-prev:focus-visible,
.modal-gallery-next:focus-visible { outline:2px solid var(--orange); outline-offset:3px; }

.modal-body { padding:2rem 2.5rem 2.5rem; }
.modal-cat  { font-size:0.65rem; letter-spacing:3px; text-transform:uppercase; color:var(--orange); margin-bottom:0.5rem; }
.modal-name { font-size:1.5rem; font-weight:600; color:var(--text-dark); }
.modal-desc { margin-top:0.8rem; color:var(--text-muted); font-size:0.85rem; line-height:1.8; }
.specs-title {
  font-size:0.65rem; letter-spacing:3px; text-transform:uppercase;
  color:var(--orange); margin:1.8rem 0 0.8rem;
  display:flex; align-items:center; gap:10px;
}
.specs-title::after { content:''; flex:1; height:1px; background:var(--light-border); }
.specs-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; }
.spec-row { padding:0.75rem 1rem; border:1px solid var(--light-border); margin:-1px 0 0 -1px; background:var(--white); }
.spec-key { font-size:0.65rem; letter-spacing:2px; text-transform:uppercase; color:var(--text-muted); }
.spec-val { font-size:0.88rem; margin-top:2px; font-family:var(--mono); color:var(--text-dark); }
.btn-inquiry {
  display:block; margin-top:1.8rem; padding:14px;
  text-align:center; background:var(--orange); color:var(--white);
  font-size:0.8rem; letter-spacing:2px; text-transform:uppercase; font-weight:600;
  border-radius:8px; transition:background var(--ease), box-shadow var(--ease);
}
.btn-inquiry:hover { background:#f07030; box-shadow:0 4px 12px var(--orange-md); }
.btn-inquiry:focus-visible { outline:2px solid var(--orange); outline-offset:3px; }

/* ── CONTACT PAGE ── */
.contact-layout { display:grid; grid-template-columns:1fr 1.6fr; min-height:calc(100vh - 200px); }
.contact-info-col {
  padding:4rem 3rem; border-right:1px solid var(--light-border); position:relative;
  background:var(--light-bg);
}
.contact-info-col::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, var(--orange-lt), transparent 60%);
  pointer-events:none;
}
.info-block { margin-bottom:2.5rem; position:relative; }
.info-block .lbl {
  font-size:0.62rem; letter-spacing:3px; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:0.5rem;
}
.info-block .val { font-size:0.95rem; line-height:1.6; color:var(--text-dark); }
.info-block .val a { color:var(--orange); transition:opacity var(--ease); }
.info-block .val a:hover { opacity:0.75; }
.social-row { display:flex; gap:0.75rem; margin-top:0.75rem; }
.social-btn {
  width:40px; height:40px; border:1px solid var(--light-border);
  display:flex; align-items:center; justify-content:center;
  font-size:0.8rem; color:var(--text-muted); cursor:pointer;
  transition:border-color var(--ease), color var(--ease), background var(--ease);
  border-radius:6px;
}
.social-btn:hover { border-color:var(--orange); color:var(--orange); background:var(--orange-lt); }
.social-btn:focus-visible { outline:2px solid var(--orange); outline-offset:3px; }

.form-col { padding:4rem 3rem; background:var(--white); }
.form-title { font-size:1.2rem; font-weight:500; margin-bottom:0.4rem; color:var(--text-dark); }
.form-sub   { font-size:0.8rem; color:var(--text-muted); margin-bottom:2.5rem; }
.form-row   { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { margin-bottom:1.2rem; }
.form-group label {
  display:block; font-size:0.65rem; letter-spacing:2px; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:0.5rem;
}
.form-group input,
.form-group select,
.form-group textarea {
  width:100%; padding:12px 16px;
  background:var(--light-bg); border:1px solid var(--light-border);
  color:var(--text-dark); font-size:0.85rem; font-weight:300;
  outline:none; transition:border-color var(--ease), background var(--ease);
  appearance:none; border-radius:6px;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color:var(--orange); background:var(--white); box-shadow:0 0 0 3px var(--orange-lt); }
.form-group input::placeholder,
.form-group textarea::placeholder { color:var(--text-muted); }
.form-group select option { background:var(--white); color:var(--text-dark); }
.form-group textarea { resize:vertical; min-height:130px; }
.form-note { font-size:0.72rem; color:var(--text-muted); margin-bottom:1.5rem; line-height:1.7; }
.btn-submit {
  width:100%; padding:15px;
  background:var(--orange); color:var(--white);
  font-size:0.8rem; letter-spacing:3px; text-transform:uppercase; font-weight:600;
  border:none; cursor:pointer; border-radius:8px;
  transition:background var(--ease), box-shadow var(--ease);
}
.btn-submit:hover { background:#f07030; box-shadow:0 4px 12px var(--orange-md); }
.btn-submit:focus-visible { outline:2px solid var(--orange); outline-offset:3px; }
.success-msg {
  display:none; padding:1.5rem; margin-top:1.5rem;
  background:rgba(224,90,0,0.08); border:1px solid var(--orange);
  text-align:center; font-size:0.85rem; line-height:1.7; border-radius:8px;
}
.success-msg strong { color:var(--orange); }

/* ── FOOTER ── */
footer {
  padding:2rem 3rem; border-top:1px solid var(--light-border);
  display:flex; justify-content:space-between; align-items:center;
  color:var(--text-muted); font-size:0.72rem; letter-spacing:1px;
  background:var(--white);
}
.footer-mono { font-family:var(--mono); }

/* ── ANIMATIONS ── */
.fade-up { opacity:0; transform:translateY(28px); transition:opacity 0.7s ease, transform 0.7s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }

/* ── FEATURE BOXES ── */
.features-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:2rem; margin-top:4rem;
}

.feature-box {
  padding:2rem;
  background:var(--light-bg); border:1px solid var(--light-border);
  border-radius:12px; text-align:center;
  transition:border-color var(--ease), box-shadow var(--ease);
}

.feature-box:hover {
  border-color:var(--orange); box-shadow:0 8px 24px rgba(224,90,0,0.1);
}

.feature-box h3 {
  font-size:1.1rem; font-weight:600; color:var(--text-dark);
  margin-bottom:0.8rem; line-height:1.3;
}

.feature-box p {
  font-size:0.85rem; color:var(--text-muted); line-height:1.7;
}

@media(max-width:900px){
  .features-grid { grid-template-columns:1fr; }
}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .products-grid { grid-template-columns:repeat(2,1fr); }
}

@media(max-width:900px){
  nav { padding:0 1.5rem; }
  section, .hero-main { padding-left:1.5rem; padding-right:1.5rem; }
  .about-grid { grid-template-columns:1fr; gap:2.5rem; }
  .about-img-wrap { height:260px; }
  .hero-banner { padding:0 1.5rem; }
  .contact-layout { grid-template-columns:1fr; }
  .contact-info-col { border-right:none; border-bottom:1px solid var(--light-border); padding:3rem 1.5rem; }
  .form-col { padding:3rem 1.5rem; }
  .form-row { grid-template-columns:1fr; }
  .page-header { padding-left:1.5rem; padding-right:1.5rem; }
  .specs-grid { grid-template-columns:1fr; }
  .products-layout { grid-template-columns:1fr; }
  .filter-sidebar { position:static; height:auto; border-right:none; border-bottom:1px solid var(--light-border); padding:1.5rem; }
  .filter-buttons { flex-direction:row; flex-wrap:wrap; }
  .filter-btn { width:auto; }
  .products-grid-wrap { padding:1.5rem 1rem 3rem; }
}

@media(max-width:600px){
  nav { 
    height:80px; 
    padding:0 1rem; 
  }
  
  .logo-box {
    width:50px;
    height:50px;
    font-size:18px;
  }
  
  .brand-name { 
    font-size:0.9rem;
    letter-spacing:1px;
  }
  
  .nav-links { 
    gap:0.8rem; 
  }
  
  .nav-links a {
    font-size:0.65rem;
  }

  .hero-banner {
  margin-top:75px;
  height:80px;
}
  
  .products-grid { grid-template-columns:1fr; }
  .hero-main h2 { font-size:2rem; }
}

@media(max-width:480px){
  nav { 
    height:70px; 
    padding:0 0.5rem; 
  }
  
  .logo-box {
    width:40px;
    height:40px;
    font-size:14px;
  }
  
  .brand-name {
    font-size:0.75rem;
    letter-spacing:0.5px;
  }
  
  .nav-links {
    gap:0.5rem;
  }
  
  .nav-links a {
    font-size:0.6rem;
  }

  .hero-banner {
  margin-top:85px;
  height:100px;
}
}