/* ALTNET INDUSTRIAL FIBER — brand tokens carried over from Altnet Fiber (navy/gold)
   so Industrial Fiber reads as a division, not a new startup. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=DM+Serif+Display:ital@0;1&family=Space+Mono:wght@400;700&display=swap');

:root{
  --navy:#1A2029;
  --navy2:#222B35;
  --navy3:#2B3545;
  --gold:#C9922A;
  --gold-light:#E8B84B;
  --gold-dim:rgba(201,146,42,.10);
  --white:#FFFFFF;
  --offwhite:#F6F5F1;
  --border:#E2DDD6;
  --text:#1A2029;
  --muted:#68717A;
  --muted2:#9AA3AD;

  /* status colors — per build spec: confirmation-state semantics, NOT decorative */
  --green:#1C7A4A;     --green-dim:rgba(28,122,74,.08);
  --orange:#C05010;    --orange-dim:rgba(192,80,16,.08);
  --red:#B91C1C;       --red-dim:rgba(185,28,28,.07);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--offwhite);
  color:var(--text);
  font-family:'Inter',sans-serif;
  line-height:1.6;
}
h1,h2,h3,.serif{ font-family:'DM Serif Display',serif; font-weight:400; letter-spacing:.01em; }
.mono{ font-family:'Space Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }

/* ---- header ---- */
header.site{
  position:sticky; top:0; z-index:50;
  background:var(--navy); border-bottom:1px solid rgba(255,255,255,.08);
}
header.site .wrap{ display:flex; align-items:center; justify-content:space-between; height:88px; }
header.site .logo img{ height:64px; }
nav.primary{ display:flex; gap:32px; align-items:center; }
nav.primary a{ color:rgba(255,255,255,.78); font-size:14px; font-weight:500; }
nav.primary a:hover{ color:var(--gold-light); }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 22px; border-radius:3px; font-weight:600; font-size:14px;
  border:1px solid transparent; cursor:pointer;
}
.btn-gold{ background:var(--gold); color:var(--navy); }
.btn-gold:hover{ background:var(--gold-light); }
.btn-ghost{ border-color:rgba(255,255,255,.35); color:#fff; }
.btn-ghost:hover{ border-color:var(--gold-light); color:var(--gold-light); }

/* ---- hero ---- */
.hero{
  background:linear-gradient(160deg,var(--navy) 0%, var(--navy2) 60%, var(--navy) 100%);
  color:#fff; padding:110px 0 90px; position:relative; overflow:hidden;
}
.hero::after{
  content:''; position:absolute; inset:0; opacity:.5;
  background:radial-gradient(600px 300px at 85% 10%, rgba(201,146,42,.14), transparent 70%);
  pointer-events:none;
}
.hero .eyebrow{ color:var(--gold-light); font-size:12px; margin-bottom:18px; }
.hero h1{ font-size:52px; max-width:820px; line-height:1.12; margin-bottom:22px; }
.hero p.lead{ max-width:640px; font-size:18px; color:rgba(255,255,255,.75); margin-bottom:36px; }
.hero .cta-row{ display:flex; gap:16px; flex-wrap:wrap; }
.hero .wrap{ display:flex; align-items:center; gap:56px; flex-wrap:wrap; position:relative; z-index:1; }
.hero-copy{ flex:1 1 460px; }
.hero-visual{ flex:1 1 300px; display:flex; justify-content:center; }
.hero-visual img{ width:100%; max-width:400px; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.35); }

/* ---- qualification strip ---- */
.strip{ background:var(--navy3); border-top:1px solid rgba(255,255,255,.08); }
.strip ul{ display:flex; flex-wrap:wrap; gap:0; list-style:none; }
.strip li{
  flex:1 1 180px; padding:20px 24px; color:rgba(255,255,255,.72);
  font-size:13px; border-right:1px solid rgba(255,255,255,.08);
}
.strip li:last-child{ border-right:none; }
.strip li b{ display:block; color:#fff; font-size:14px; margin-bottom:4px; }

/* ---- section basics ---- */
section{ padding:88px 0; }
.section-head{ max-width:680px; margin-bottom:48px; }
.section-head .mono{ color:var(--gold); font-size:12px; display:block; margin-bottom:14px; }
.section-head h2{ font-size:36px; color:var(--navy); }
.section-head p{ color:var(--muted); margin-top:14px; font-size:16px; }

/* ---- problem selector ---- */
.problems{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.problem-card{
  background:#fff; border:1px solid var(--border); border-radius:6px; padding:28px;
}
.problem-card .tag{ font-size:11px; color:var(--gold); margin-bottom:10px; display:block; }
.problem-card h3{ font-size:19px; font-family:'Inter'; font-weight:700; color:var(--navy); margin-bottom:8px; }
.problem-card p{ color:var(--muted); font-size:14px; }

/* ---- industries ---- */
.industries-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--border); border:1px solid var(--border); }
@media(max-width:700px){ .industries-grid{ grid-template-columns:1fr 1fr; } }
.industry-tile{ background:var(--offwhite); padding:30px 26px; min-height:150px; display:flex; flex-direction:column; justify-content:flex-end; }
.industry-tile h4{ font-family:'Inter'; font-weight:700; font-size:16px; color:var(--navy); margin-bottom:6px; }
.industry-tile p{ font-size:13px; color:var(--muted); }

/* ---- how it works ---- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:step; }
.step{ position:relative; padding-top:44px; }
.step::before{
  counter-increment:step; content:counter(step);
  font-family:'DM Serif Display'; font-size:34px; color:var(--gold);
  position:absolute; top:-6px; left:0;
}
.step h4{ font-size:16px; font-weight:700; color:var(--navy); margin-bottom:6px; }
.step p{ font-size:13.5px; color:var(--muted); }

/* ---- quality / compliance ---- */
.compliance{ background:#fff; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.compliance-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start; }
.status-pill{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; padding:6px 12px; border-radius:20px; margin:4px 6px 4px 0; }
.pill-green{ background:var(--green-dim); color:var(--green); }
.pill-orange{ background:var(--orange-dim); color:var(--orange); }
.pill-red{ background:var(--red-dim); color:var(--red); }
.disclaimer-box{ background:var(--navy); color:rgba(255,255,255,.85); padding:28px 30px; border-radius:6px; font-size:14px; }
.disclaimer-box b{ color:var(--gold-light); }
.disclaimer-box ul{ margin:14px 0 0 18px; }
.disclaimer-box li{ margin-bottom:8px; }

/* ---- final CTA ---- */
.final-cta{ background:var(--navy); color:#fff; text-align:center; padding:100px 0; }
.final-cta h2{ font-size:38px; margin-bottom:16px; }
.final-cta p{ color:rgba(255,255,255,.7); max-width:560px; margin:0 auto 34px; }

/* ---- footer ---- */
footer.site{ background:var(--navy); border-top:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.55); padding:48px 0 32px; font-size:13px; }
footer.site .cols{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; margin-bottom:32px; }
footer.site h5{ color:#fff; font-size:13px; margin-bottom:12px; }
footer.site a{ display:block; margin-bottom:8px; color:rgba(255,255,255,.55); }
footer.site a:hover{ color:var(--gold-light); }
footer.site .fine{ border-top:1px solid rgba(255,255,255,.08); padding-top:20px; font-size:12px; }

/* ---- quick intake form (800G review, cable spec review) ---- */
.quick-form{ background:#fff; border:1px solid var(--border); border-radius:6px; padding:36px; }
.quick-form .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.quick-form .grid3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; }
.quick-form label{ display:block; font-size:12px; font-weight:600; color:var(--navy); margin-bottom:6px; text-transform:uppercase; letter-spacing:.03em; }
.quick-form input, .quick-form select, .quick-form textarea{
  width:100%; padding:11px 13px; border:1px solid var(--border); background:var(--offwhite);
  font-family:'Inter',sans-serif; font-size:14px; color:var(--navy); border-radius:3px;
}
.quick-form .field{ margin-bottom:18px; }
.quick-form .full{ grid-column:1/-1; }

/* ---- product catalog / filter grid ---- */
.catalog{ display:grid; grid-template-columns:260px 1fr; gap:40px; align-items:start; }
.filters{ background:#fff; border:1px solid var(--border); border-radius:6px; padding:24px; position:sticky; top:108px; }
.filters h4{ font-family:'Inter'; font-size:12px; font-weight:700; color:var(--navy); text-transform:uppercase; letter-spacing:.04em; margin:18px 0 10px; }
.filters h4:first-child{ margin-top:0; }
.filters .facet{ display:flex; align-items:center; gap:9px; margin-bottom:9px; font-size:13.5px; color:var(--text); cursor:pointer; }
.filters .facet input{ accent-color:var(--gold); width:15px; height:15px; cursor:pointer; }
.filters .facet .count{ margin-left:auto; color:var(--muted2); font-size:12px; }
.filters .clear-btn{ margin-top:20px; font-size:12.5px; color:var(--gold); font-weight:600; cursor:pointer; background:none; border:none; padding:0; }
.catalog-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:18px; }
.catalog-head .result-count{ color:var(--muted); font-size:14px; }
.product-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.product-card{ background:#fff; border:1px solid var(--border); border-radius:6px; padding:22px; }
.product-card .sku{ font-family:'Space Mono',monospace; font-size:12px; color:var(--gold); letter-spacing:.02em; }
.product-card h3{ font-family:'Inter'; font-weight:700; font-size:16px; color:var(--navy); margin:6px 0 8px; }
.product-card .spec-line{ font-size:13px; color:var(--muted); margin-bottom:3px; }
.product-card .oem-tags{ margin-top:10px; font-size:12px; color:var(--muted2); }
.product-card .card-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
.no-results{ background:#fff; border:1px dashed var(--border); border-radius:6px; padding:40px; text-align:center; color:var(--muted); grid-column:1/-1; }
.seed-note{ background:var(--gold-dim); border:1px solid rgba(201,146,42,.3); border-radius:6px; padding:14px 18px; font-size:13px; color:var(--navy2); margin-bottom:22px; }
@media(max-width:900px){
  .catalog{ grid-template-columns:1fr; }
  .filters{ position:static; }
  .product-grid{ grid-template-columns:1fr; }
}

@media(max-width:900px){
  .quick-form .grid2, .quick-form .grid3{ grid-template-columns:1fr; }
  .hero h1{ font-size:36px; }
  .hero .wrap{ flex-direction:column-reverse; gap:32px; }
  .hero-visual img{ max-width:280px; }
  .problems{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr 1fr; }
  .compliance-grid{ grid-template-columns:1fr; }
  footer.site .cols{ grid-template-columns:1fr 1fr; }
}