/* ===== Cosycom shared site styles ===== */
:root{
  --ink:#10151c; --ink-soft:#1b2330; --paper:#f4f2ec; --paper-dim:#e7e3d8;
  --led-red:#ff3b2f; --led-amber:#ffb300; --steel:#57677c; --steel-light:#8b98a8;
  --line: rgba(16,21,28,0.12); --line-dark: rgba(244,242,236,0.14);
  --mono:'JetBrains Mono','DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --display:'Space Grotesk','Inter',sans-serif; --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.01ms !important; transition-duration:.01ms !important; } }
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ background:var(--paper); color:var(--ink); font-family:var(--body); line-height:1.55; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible{ outline:3px solid var(--led-amber); outline-offset:2px; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }
section{ padding:80px 0; }
.eyebrow{ font-family:var(--mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--led-red); display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.eyebrow::before{ content:''; width:22px; height:2px; background:var(--led-red); display:block; }
h1,h2,h3{ font-family:var(--display); font-weight:600; letter-spacing:-0.01em; }
h2{ font-size:clamp(26px,3.6vw,38px); max-width:20ch; }
.lede{ color:var(--steel); font-size:17px; max-width:60ch; margin-top:14px; }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--led-amber); color:var(--ink); padding:12px 18px; z-index:200; font-family:var(--mono); font-size:13px; }
.skip-link:focus{ left:16px; top:16px; }

/* Header */
header{ position:sticky; top:0; z-index:100; background:var(--ink); color:var(--paper); border-bottom:1px solid var(--line-dark); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:1180px; margin:0 auto; }
.brand{ display:flex; align-items:center; gap:12px; font-family:var(--display); font-weight:700; font-size:20px; }
.brand .dot{ width:9px; height:9px; border-radius:50%; background:var(--led-red); box-shadow:0 0 10px var(--led-red); }
.brand small{ display:block; font-family:var(--mono); font-weight:400; font-size:10.5px; letter-spacing:.12em; color:var(--steel-light); text-transform:uppercase; }
nav.links{ display:flex; gap:26px; font-size:14.5px; }
nav.links a{ color:var(--paper); opacity:.82; padding:6px 0; border-bottom:2px solid transparent; transition:opacity .15s,border-color .15s; }
nav.links a[aria-current="page"]{ opacity:1; border-color:var(--led-red); }
nav.links a:hover{ opacity:1; border-color:var(--led-red); }
.nav-cta{ background:var(--led-red); color:#fff; font-family:var(--mono); font-size:13px; padding:10px 18px; border-radius:2px; white-space:nowrap; }
.nav-cta:hover{ background:#e02e24; }
.burger{ display:none; background:none; border:1px solid var(--line-dark); color:var(--paper); padding:8px 10px; font-family:var(--mono); font-size:13px; }
@media (max-width:860px){ nav.links{ display:none; } .burger{ display:inline-block; } }

/* Sub-page hero */
.subhero{ background:var(--ink); color:var(--paper); padding:64px 0 56px; position:relative; overflow:hidden; }
.subhero::after{ content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(244,242,236,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(244,242,236,.04) 1px,transparent 1px); background-size:42px 42px; pointer-events:none; }
.subhero .wrap{ position:relative; }
.subhero h1{ font-size:clamp(32px,4.4vw,50px); max-width:18ch; line-height:1.1; }
.subhero .accent{ color:var(--led-red); }
.subhero p.lede{ color:var(--steel-light); font-size:17.5px; }
.crumbs{ font-family:var(--mono); font-size:12px; color:var(--steel-light); margin-bottom:22px; }
.crumbs a:hover{ color:var(--led-amber); }

/* Buttons */
.btn{ font-family:var(--mono); font-size:13.5px; letter-spacing:.03em; padding:14px 22px; display:inline-block; border-radius:2px; }
.btn-primary{ background:var(--led-red); color:#fff; }
.btn-primary:hover{ background:#e02e24; }
.btn-ghost{ border:1px solid var(--line-dark); color:var(--paper); }
.btn-ghost:hover{ border-color:var(--led-amber); color:var(--led-amber); }
.btn-ghost-dark{ border:1px solid var(--line); color:var(--ink); }
.btn-ghost-dark:hover{ border-color:var(--led-red); color:var(--led-red); }

/* Contact CTA block, reused on every page */
.contact{ background:var(--paper); }
.contact-card{ background:var(--ink); color:var(--paper); border-radius:6px; padding:56px; display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:center; }
@media (max-width:860px){ .contact-card{ grid-template-columns:1fr; padding:36px 26px; } }
.contact-card h2{ color:var(--paper); }
.contact-card p{ color:var(--steel-light); margin-top:14px; }
.contact-lines{ display:flex; flex-direction:column; gap:16px; }
.contact-lines a{ font-family:var(--mono); font-size:15px; border-bottom:1px solid var(--line-dark); padding-bottom:14px; display:flex; justify-content:space-between; }
.contact-lines a:hover{ color:var(--led-amber); }
.contact-lines span{ color:var(--steel-light); font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; }

/* Footer */
footer{ background:var(--ink); color:var(--steel-light); padding:56px 0 30px; border-top:1px solid var(--line-dark); }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
@media (max-width:820px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot-grid{ grid-template-columns:1fr; } }
footer h5{ font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--paper); margin-bottom:16px; }
footer ul{ list-style:none; display:flex; flex-direction:column; gap:10px; font-size:13.5px; }
footer a:hover{ color:var(--led-amber); }
.foot-bottom{ margin-top:48px; padding-top:24px; border-top:1px solid var(--line-dark); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12.5px; }

/* Generic card grid, reused for product/spec listings */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:44px; }
@media (max-width:900px){ .card-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .card-grid{ grid-template-columns:1fr; } }
.card{ background:var(--paper); padding:30px 26px; display:flex; flex-direction:column; gap:12px; }
.card .num{ font-family:var(--mono); font-size:12px; color:var(--led-red); letter-spacing:.08em; }
.card h3{ font-size:18px; }
.card p{ color:var(--steel); font-size:14px; flex:1; }
.card:hover{ background:#eee9dc; }

/* Spec table, reused on product pages */
.spec-table{ width:100%; border-collapse:collapse; margin-top:28px; font-size:14px; }
.spec-table th, .spec-table td{ text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); }
.spec-table th{ font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--steel); background:var(--paper-dim); }
.spec-table td{ color:var(--ink); }
.spec-table tr:last-child td{ border-bottom:none; }

.dark-section{ background:var(--ink); color:var(--paper); }
.dark-section .eyebrow{ color:var(--led-amber); }
.dark-section .eyebrow::before{ background:var(--led-amber); }
.dark-section h2{ color:var(--paper); }
.dark-section p{ color:var(--steel-light); }

.dim-section{ background:var(--paper-dim); }

/* Product photo card, inserted into hero sections */
.product-photo{ margin-top:32px; max-width:440px; border-radius:6px; overflow:hidden; border:1px solid var(--line-dark); background:var(--ink-soft); }
.product-photo img{ width:100%; display:block; background:#fff; }
.product-photo-cap{ font-family:var(--mono); font-size:11px; color:var(--steel-light); padding:10px 14px; border-top:1px solid var(--line-dark); display:flex; justify-content:space-between; gap:10px; }

/* Card thumbnail photos on homepage product grid */
.card-thumb{ width:100%; height:150px; object-fit:cover; border-bottom:1px solid var(--line); margin-bottom:2px; background:#fff; }