/* ═══════════════════════════════════════════
   NexReel — Precision Fishing Reel Manufacturing
   Style: Exaggerated Minimalism + Industrial
   ═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap');

:root {
  --ink: #080c14;
  --steel: #1a1f2e;
  --slate: #2d3343;
  --ash: #6b7280;
  --fog: #9ca3af;
  --snow: #f5f5f0;
  --orange: #f25c05;
  --orange-glow: rgba(242,92,5,0.15);
  --font: 'Plus Jakarta Sans', system-ui, sans-serif;
  --max: 1200px;
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); }

body {
  font-family:var(--font);
  font-size:16px;
  font-weight:300;
  line-height:1.7;
  color:var(--fog);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; height:auto; display:block; }
a { color:var(--orange); text-decoration:none; transition:opacity .2s; }
a:hover { opacity:.8; }

.container { max-width:var(--max); margin:0 auto; padding:0 32px; }

/* ── Nav ── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(8,12,20,0.85);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.nav .container { display:flex; justify-content:space-between; align-items:center; height:64px; }
.nav-logo { font-size:20px; font-weight:700; color:#fff; letter-spacing:-0.5px; }
.nav-links { display:flex; gap:36px; list-style:none; align-items:center; }
.nav-links a { font-size:13px; font-weight:500; color:var(--ash); text-transform:uppercase; letter-spacing:0.06em; }
.nav-links a:hover { color:#fff; opacity:1; }
.nav-cta { background:var(--orange); color:#fff !important; padding:10px 22px; border-radius:4px; font-weight:600 !important; }
.nav-cta:hover { background:#d44e00 !important; opacity:1 !important; }
.nav-toggle { display:none; background:none; border:none; color:#fff; font-size:24px; cursor:pointer; }

/* ── Hero ── */
.hero {
  padding:160px 0 120px;
  position:relative;
  overflow:hidden;
}
.hero::after {
  content:""; position:absolute; bottom:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent);
}
.hero-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:600; color:var(--orange);
  text-transform:uppercase; letter-spacing:0.1em;
  margin-bottom:32px;
}
.hero-badge::before { content:""; width:24px; height:1px; background:var(--orange); }
.hero h1 {
  font-size:clamp(42px,7vw,78px);
  font-weight:200;
  color:#fff;
  line-height:1.05;
  letter-spacing:-2px;
  margin-bottom:28px;
}
.hero h1 strong { font-weight:700; display:block; }
.hero .text-body {
  font-size:18px;
  color:var(--ash);
  max-width:460px;
  line-height:1.8;
  margin-bottom:40px;
}
.hero-cta { display:flex; gap:16px; }
.hero-visual {
  position:relative;
  aspect-ratio:4/3;
  background:linear-gradient(135deg, rgba(242,92,5,0.08), rgba(242,92,5,0.02));
  border-radius:4px;
  border:1px solid rgba(255,255,255,0.06);
  display:flex; align-items:center; justify-content:center;
}
.hero-visual-placeholder {
  font-size:14px; color:var(--ash); text-transform:uppercase; letter-spacing:0.1em;
}

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 32px;
  font-family:var(--font); font-size:14px; font-weight:600;
  border:none; cursor:pointer; text-decoration:none;
  transition:all .2s;
  text-transform:uppercase; letter-spacing:0.04em;
}
.btn-primary {
  background:var(--orange);
  color:#fff;
}
.btn-primary:hover { background:#d44e00; opacity:1; }
.btn-ghost {
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,0.15);
}
.btn-ghost:hover { border-color:rgba(255,255,255,0.4); opacity:1; }

/* ── Sections ── */
.section { padding:120px 0; }
.section-light { background:var(--snow); color:var(--ink); }
.section-light .h2,.section-light .h3,.section-light .h4 { color:var(--ink); }
.section-label {
  font-size:11px; font-weight:700; color:var(--orange);
  text-transform:uppercase; letter-spacing:0.12em;
  margin-bottom:24px;
}

/* ── Typography ── */
.h2 {
  font-size:clamp(32px,5vw,56px);
  font-weight:200;
  color:#fff;
  line-height:1.1;
  letter-spacing:-1.5px;
}
.h2 strong { font-weight:700; }
.h3 { font-size:24px; font-weight:500; color:#fff; letter-spacing:-0.3px; }
.h4 { font-size:15px; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:0.04em; }
.text-body { font-size:17px; line-height:1.8; }

/* ── Stats ── */
.stats-strip {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,0.06);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.stat-item { padding:56px 24px; text-align:center; border-right:1px solid rgba(255,255,255,0.06); }
.stat-item:last-child { border-right:none; }
.stat-number {
  font-size:clamp(42px,6vw,72px);
  font-weight:200;
  color:#fff;
  line-height:1;
  letter-spacing:-2px;
}
.stat-suffix { color:var(--orange); font-weight:700; }
.stat-label { font-size:12px; color:var(--ash); margin-top:12px; font-weight:500; text-transform:uppercase; letter-spacing:0.08em; }

/* ── Product Showcase ── */
.product-showcase {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  align-items:stretch;
}
.showcase-content {
  padding:80px 64px;
  display:flex; flex-direction:column; justify-content:center;
}
.showcase-image {
  background:var(--steel);
  min-height:400px;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.showcase-image::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(242,92,5,0.1), transparent 60%);
}
.showcase-specs {
  display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:40px;
}
.spec-item { border-top:1px solid rgba(255,255,255,0.1); padding-top:16px; }
.spec-value { font-size:28px; font-weight:200; color:#fff; }
.spec-label { font-size:12px; color:var(--ash); text-transform:uppercase; letter-spacing:0.06em; margin-top:4px; }

/* ── Product Grid (alt) ── */
.product-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:rgba(255,255,255,0.04);
}
.product-card {
  background:var(--ink);
  padding:48px 36px;
  transition:background .3s;
}
.product-card:hover { background:var(--steel); }
.product-card .h4 { margin-bottom:8px; }
.product-badge {
  display:inline-block;
  font-size:11px; font-weight:600; color:var(--orange);
  text-transform:uppercase; letter-spacing:0.06em;
  margin-bottom:16px;
}
.product-specs { font-size:13px; color:var(--ash); line-height:1.8; }

/* ── Feature Grid ── */
.feature-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:rgba(255,255,255,0.04);
}
.feature-card {
  background:var(--ink);
  padding:48px 36px;
}
.feature-num {
  font-size:64px; font-weight:200; color:var(--orange); line-height:1; margin-bottom:16px;
}
.feature-card .h4 { margin-bottom:12px; }

/* ── About ── */
.about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}
.about-image {
  background:var(--steel);
  aspect-ratio:4/3;
  border-radius:2px;
  display:flex; align-items:center; justify-content:center;
}
.about-list { list-style:none; margin-top:32px; }
.about-list li {
  padding:14px 0; border-bottom:1px solid rgba(255,255,255,0.06);
  font-size:15px; color:var(--ash);
  display:flex; align-items:center; gap:12px;
}
.about-list li::before { content:""; width:4px; height:4px; background:var(--orange); border-radius:50%; flex-shrink:0; }

/* ── Cert Grid ── */
.cert-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:rgba(255,255,255,0.04);
}
.cert-item {
  background:var(--ink);
  padding:36px 24px;
  text-align:center;
}
.cert-item .h4 { font-size:13px; margin-top:12px; }
.cert-icon { font-size:28px; }

/* ── Contact ── */
.contact-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
}
.contact-info-item {
  display:flex; gap:16px; margin-bottom:32px;
}
.contact-info-icon {
  width:48px; height:48px;
  background:var(--orange-glow);
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  flex-shrink:0;
}
.form-group { margin-bottom:24px; }
.form-label {
  display:block; font-size:11px; font-weight:700; color:var(--ash);
  text-transform:uppercase; letter-spacing:0.1em; margin-bottom:8px;
}
.form-input,.form-textarea {
  width:100%; padding:14px 16px;
  font-family:var(--font); font-size:15px; font-weight:300; color:#fff;
  background:var(--steel);
  border:1px solid rgba(255,255,255,0.08);
  transition:border-color .2s;
}
.form-input:focus,.form-textarea:focus {
  outline:none; border-color:var(--orange);
}
.form-textarea { min-height:140px; resize:vertical; }

/* ── Images ── */
.product-img {
  width:100%; height:200px; object-fit:cover;
  background:var(--steel);
  margin-bottom:24px;
}
.hero-visual img {
  width:100%; height:100%; object-fit:cover;
  border-radius:2px;
}
.about-image img {
  width:100%; height:100%; object-fit:cover;
  border-radius:2px;
}
.footer {
  padding:80px 0 32px;
  border-top:1px solid rgba(255,255,255,0.06);
  font-size:13px; color:var(--ash);
}
.footer-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:64px;
  margin-bottom:64px;
}
.footer-brand .h3 { color:#fff; margin-bottom:12px; }
.footer h4 {
  font-size:11px; font-weight:700; color:rgba(255,255,255,0.4);
  text-transform:uppercase; letter-spacing:0.1em; margin-bottom:20px;
}
.footer-links { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-links a { color:var(--ash); }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,0.04);
  padding-top:24px;
  display:flex; justify-content:space-between;
  color:rgba(255,255,255,0.25);
}

/* ── Page Header ── */
.page-header {
  padding:120px 0 64px;
  text-align:center;
}
.page-header .h2 { margin-bottom:16px; }
.breadcrumb { font-size:12px; color:var(--ash); margin-bottom:20px; text-transform:uppercase; letter-spacing:0.08em; }

/* ── FAQ ── */
.faq-item { border-bottom:1px solid rgba(255,255,255,0.06); padding:24px 0; }
.faq-item:first-child { border-top:1px solid rgba(255,255,255,0.06); }
.faq-q { font-weight:500; color:#fff; cursor:pointer; display:flex; justify-content:space-between; font-size:15px; }
.faq-a { margin-top:14px; display:none; color:var(--ash); }
.faq-item.open .faq-a { display:block; }

/* ── Utility ── */
.text-center { text-align:center; }

/* ── Responsive ── */
@media(max-width:768px){
  .nav-links { display:none; position:absolute; top:64px; left:0; right:0;
    background:var(--ink); border-bottom:1px solid rgba(255,255,255,0.06);
    flex-direction:column; padding:24px; gap:16px; }
  .nav-links.open { display:flex; }
  .nav-toggle { display:block; }
  .hero { padding:120px 0 80px; }
  .hero-grid { grid-template-columns:1fr; gap:48px; }
  .hero-visual { aspect-ratio:16/9; }
  .stats-strip { grid-template-columns:repeat(2,1fr); }
  .stat-item { border-bottom:1px solid rgba(255,255,255,0.06); }
  .product-grid,.feature-grid { grid-template-columns:1fr; }
  .product-showcase { grid-template-columns:1fr; }
  .showcase-content { padding:48px 24px; }
  .about-grid,.contact-grid { grid-template-columns:1fr; }
  .cert-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr; gap:40px; }
}