/* DigiForge Manufacturing — public site
   Light, high-contrast, industrial. Navy structure + molten-orange accent. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy-900:#08131f; --navy-800:#0b1b33; --navy-700:#132844; --navy-600:#1d3a5c;
  --ink:#0f1b2a; --body:#43536b; --muted:#6b7c93; --line:#e3e8ef;
  --bg:#ffffff; --bg-soft:#f6f8fb; --bg-tint:#eef3f9;
  --accent:#f26522; --accent-dark:#d24f10; --accent-soft:#fff1e9;
  --teal:#0e9f8f; --green:#12805c; --amber:#b7791f; --red:#c0392b;
  --radius:10px; --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(15,27,42,.06), 0 1px 3px rgba(15,27,42,.04);
  --shadow:0 4px 6px -1px rgba(15,27,42,.07), 0 2px 4px -2px rgba(15,27,42,.05);
  --shadow-lg:0 20px 25px -5px rgba(15,27,42,.09), 0 8px 10px -6px rgba(15,27,42,.05);
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  --wrap:1200px;
}

html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  font-family:var(--sans); font-size:16px; line-height:1.65;
  color:var(--body); background:var(--bg); -webkit-font-smoothing:antialiased;
}
img { max-width:100%; height:auto; display:block; }
a { color:var(--accent-dark); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3,h4,h5 { color:var(--ink); line-height:1.2; font-weight:750; letter-spacing:-.02em; }
h1 { font-size:clamp(2.1rem,5vw,3.4rem); }
h2 { font-size:clamp(1.6rem,3.4vw,2.3rem); }
h3 { font-size:1.2rem; }
p { margin:0 0 1rem; }
ul,ol { margin:0 0 1rem 1.15rem; }
li { margin-bottom:.35rem; }
code { font-family:var(--mono); font-size:.88em; background:var(--bg-tint);
  padding:.15em .4em; border-radius:5px; color:var(--navy-700); }
:focus-visible { outline:3px solid var(--accent); outline-offset:2px; border-radius:4px; }

.wrap { max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.wrap-narrow { max-width:760px; margin:0 auto; padding:0 24px; }
.section { padding:80px 0; }
.section-sm { padding:52px 0; }
.section-soft { background:var(--bg-soft); }
.center { text-align:center; }
.eyebrow { font-size:.78rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); margin-bottom:.6rem; }
.lede { font-size:1.14rem; color:var(--body); max-width:62ch; }
.center .lede { margin-inline:auto; }
.stack > * + * { margin-top:1rem; }

/* ── Skip link ─────────────────────────────────────────────────────────── */
.skip { position:absolute; left:-9999px; top:0; z-index:200; background:var(--navy-800);
  color:#fff; padding:12px 20px; border-radius:0 0 var(--radius) 0; }
.skip:focus { left:0; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font:inherit; font-weight:650; font-size:.95rem; line-height:1;
  padding:.85rem 1.5rem; border-radius:var(--radius); border:1.5px solid transparent;
  cursor:pointer; text-decoration:none !important; white-space:nowrap;
  transition:background .15s, color .15s, border-color .15s, transform .1s, box-shadow .15s;
}
.btn:active { transform:translateY(1px); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-primary { background:var(--accent); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover:not(:disabled) { background:var(--accent-dark); box-shadow:var(--shadow); }
.btn-dark { background:var(--navy-800); color:#fff; }
.btn-dark:hover:not(:disabled) { background:var(--navy-700); }
.btn-outline { border-color:var(--line); color:var(--ink); background:#fff; }
.btn-outline:hover:not(:disabled) { border-color:var(--navy-600); background:var(--bg-soft); }
.btn-ghost-light { border-color:rgba(255,255,255,.35); color:#fff; background:transparent; }
.btn-ghost-light:hover { background:rgba(255,255,255,.12); border-color:#fff; }
.btn-sm { padding:.55rem 1rem; font-size:.86rem; }
.btn-lg { padding:1.05rem 2rem; font-size:1.02rem; }
.btn-block { width:100%; }

/* ── Header ───────────────────────────────────────────────────────────── */
.site-header {
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.nav { display:flex; align-items:center; gap:2rem; height:74px; }
.brand { display:flex; align-items:center; gap:.65rem; font-weight:800;
  font-size:1.16rem; color:var(--ink); letter-spacing:-.03em; }
.brand:hover { text-decoration:none; }
.brand-mark { width:34px; height:34px; flex-shrink:0; }
.brand span em { font-style:normal; color:var(--accent); }
.nav-links { display:flex; align-items:center; gap:.35rem; margin-left:auto; }
.nav-links a { color:var(--body); font-weight:550; font-size:.94rem;
  padding:.5rem .8rem; border-radius:var(--radius); }
.nav-links a:hover { color:var(--ink); background:var(--bg-soft); text-decoration:none; }
.nav-links a.active { color:var(--ink); font-weight:650; }
.nav-cta { margin-left:.6rem; }
.nav-toggle { display:none; margin-left:auto; background:none; border:1.5px solid var(--line);
  border-radius:var(--radius); padding:.5rem .7rem; cursor:pointer; color:var(--ink); }

/* dropdown */
.has-menu { position:relative; }
.has-menu > button { display:flex; align-items:center; gap:.3rem; background:none;
  border:none; font:inherit; font-weight:550; font-size:.94rem; color:var(--body);
  padding:.5rem .8rem; border-radius:var(--radius); cursor:pointer; }
.has-menu > button:hover { color:var(--ink); background:var(--bg-soft); }
.menu { position:absolute; top:calc(100% + 8px); left:0; min-width:265px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:8px; display:none; }
.has-menu.open .menu { display:block; }
.menu a { display:block; padding:.7rem .85rem; border-radius:var(--radius); }
.menu a:hover { background:var(--bg-soft); text-decoration:none; }
.menu strong { display:block; color:var(--ink); font-size:.94rem; font-weight:650; }
.menu small { color:var(--muted); font-size:.8rem; line-height:1.4; display:block; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero { background:linear-gradient(160deg,var(--navy-900) 0%,var(--navy-700) 55%,var(--navy-600) 100%);
  color:#fff; padding:96px 0 88px; position:relative; overflow:hidden; }
.hero::after { content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 82% 18%, rgba(242,101,34,.22), transparent 42%),
             radial-gradient(circle at 10% 90%, rgba(14,159,143,.14), transparent 45%);
  pointer-events:none; }
.hero .wrap { position:relative; z-index:1; }
.hero-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:56px; align-items:center; }
.hero h1 { color:#fff; margin-bottom:1.1rem; }
.hero p.lede { color:#cbd7e6; font-size:1.2rem; margin-bottom:1.9rem; }
.hero .eyebrow { color:#ff9d63; }
.hero-actions { display:flex; gap:.85rem; flex-wrap:wrap; }
.hero-trust { display:flex; gap:2rem; margin-top:2.6rem; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.14); padding-top:1.5rem; }
.hero-trust div strong { display:block; color:#fff; font-size:1.35rem; font-weight:750; }
.hero-trust div span { color:#9fb2c9; font-size:.84rem; }

/* upload drop card in hero */
.drop-card { background:#fff; border-radius:var(--radius-lg); padding:30px;
  box-shadow:var(--shadow-lg); color:var(--body); }
.drop-card h3 { margin-bottom:.3rem; }
/* A <label>, so it needs an explicit display for its block children to centre. */
.drop-zone { display:block; border:2px dashed var(--line); border-radius:var(--radius);
  padding:34px 20px; text-align:center; background:var(--bg-soft); cursor:pointer;
  transition:border-color .15s, background .15s; margin:1.1rem 0 .9rem; }
.drop-zone:hover, .drop-zone.over { border-color:var(--accent); background:var(--accent-soft); }
.drop-zone svg { margin:0 auto .7rem; color:var(--accent); }
.drop-zone strong { display:block; color:var(--ink); font-size:1rem; }
.drop-zone small { color:var(--muted); font-size:.83rem; }
.fmt-row { display:flex; gap:.4rem; flex-wrap:wrap; justify-content:center; margin-top:.85rem; }
.fmt { font-family:var(--mono); font-size:.72rem; background:var(--bg-tint);
  color:var(--navy-700); padding:.2rem .5rem; border-radius:5px; }

/* ── Cards & grids ────────────────────────────────────────────────────── */
.grid { display:grid; gap:24px; }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }

.card { background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px; transition:border-color .15s, box-shadow .15s, transform .15s; }
.card-link:hover { border-color:var(--navy-600); box-shadow:var(--shadow-lg);
  transform:translateY(-3px); text-decoration:none; }
.card h3 { margin-bottom:.5rem; }
.card p { font-size:.95rem; margin-bottom:0; }
.card-icon { width:52px; height:52px; border-radius:12px; background:var(--accent-soft);
  color:var(--accent-dark); display:flex; align-items:center; justify-content:center;
  margin-bottom:1.1rem; }
.card-meta { margin-top:1.2rem; padding-top:1.1rem; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:.45rem; font-size:.85rem; }
.card-meta div { display:flex; justify-content:space-between; gap:1rem; }
.card-meta dt, .card-meta .k { color:var(--muted); }
.card-meta .v { color:var(--ink); font-weight:600; text-align:right; }
/* Cards in a row have different content heights; pin the CTA to the bottom so
   the "Explore →" links line up across the grid. */
.card-link { display:flex; flex-direction:column; }
.card-more { margin-top:auto; padding-top:1.2rem; color:var(--accent-dark);
  font-weight:650; font-size:.9rem; }

.step { display:flex; gap:1.1rem; }
.step-n { flex-shrink:0; width:38px; height:38px; border-radius:50%;
  background:var(--navy-800); color:#fff; display:flex; align-items:center;
  justify-content:center; font-weight:750; font-size:.95rem; }
.step h3 { font-size:1.05rem; margin-bottom:.3rem; }
.step p { font-size:.93rem; margin:0; }

/* ── Tables ───────────────────────────────────────────────────────────── */
.table-scroll { overflow-x:auto; border:1px solid var(--line);
  border-radius:var(--radius-lg); background:#fff; }
table.data { width:100%; border-collapse:collapse; font-size:.92rem; min-width:520px; }
table.data th { text-align:left; font-weight:650; color:var(--ink);
  background:var(--bg-soft); padding:.85rem 1rem; border-bottom:1px solid var(--line);
  white-space:nowrap; }
table.data td { padding:.8rem 1rem; border-bottom:1px solid var(--line); vertical-align:top; }
table.data tr:last-child td { border-bottom:none; }
table.data tbody tr:hover { background:var(--bg-soft); }

/* ── Pills & badges ───────────────────────────────────────────────────── */
.pill { display:inline-block; padding:.28rem .7rem; border-radius:999px;
  font-size:.78rem; font-weight:650; background:var(--bg-tint); color:var(--navy-700); }
.pill-accent { background:var(--accent-soft); color:var(--accent-dark); }
.pill-green { background:#e6f6ef; color:var(--green); }
.pill-amber { background:#fdf3e0; color:var(--amber); }
.pill-red { background:#fdecea; color:var(--red); }
.pill-grey { background:var(--bg-tint); color:var(--muted); }

/* ── Forms ────────────────────────────────────────────────────────────── */
.field { margin-bottom:1.15rem; }
.field label { display:block; font-size:.85rem; font-weight:650; color:var(--ink);
  margin-bottom:.4rem; }
.field .hint { font-size:.8rem; color:var(--muted); margin-top:.35rem; }
/* A hint that is really a warning: the part looks like it was drawn in
   inches but is being quoted as millimetres. */
.field .hint.warn { color:#8a4b00; background:#fff6e5; border:1px solid #f0d3a0;
  border-radius:6px; padding:.45rem .55rem; }
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=number], input[type=url], select, textarea {
  width:100%; font:inherit; font-size:.95rem; color:var(--ink); background:#fff;
  border:1.5px solid var(--line); border-radius:var(--radius); padding:.72rem .9rem;
  transition:border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(242,101,34,.14); }
textarea { resize:vertical; min-height:130px; line-height:1.6; }
select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7c93' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.4rem; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

/* ── Flash messages ───────────────────────────────────────────────────── */
.flashes { margin-bottom:1.5rem; }
.flash { padding:.9rem 1.15rem; border-radius:var(--radius); font-size:.93rem;
  margin-bottom:.7rem; border:1px solid transparent; }
.flash-success { background:#e6f6ef; color:var(--green); border-color:#bce5d4; }
.flash-error { background:#fdecea; color:var(--red); border-color:#f5c6c2; }

/* ── Blog ─────────────────────────────────────────────────────────────── */
.post-card { display:flex; flex-direction:column; height:100%; overflow:hidden; padding:0; }
.post-card .thumb { aspect-ratio:16/9; background:var(--bg-tint) center/cover no-repeat;
  border-bottom:1px solid var(--line); }
.post-card .body { padding:24px; display:flex; flex-direction:column; flex:1; }
.post-card h3 { font-size:1.08rem; margin-bottom:.5rem; }
.post-card p { font-size:.92rem; color:var(--body); flex:1; }
.post-date { font-size:.8rem; color:var(--muted); margin-bottom:.55rem; }
.prose { font-size:1.05rem; color:var(--body); }
.prose h2 { margin:2.2rem 0 .8rem; font-size:1.6rem; }
.prose h3 { margin:1.8rem 0 .6rem; font-size:1.25rem; }
.prose img { border-radius:var(--radius); margin:1.5rem 0; }
.prose blockquote { border-left:3px solid var(--accent); padding-left:1.2rem;
  color:var(--muted); font-style:italic; margin:1.5rem 0; }
.prose pre { background:var(--navy-900); color:#e6edf5; padding:1.1rem;
  border-radius:var(--radius); overflow-x:auto; margin:1.4rem 0; font-size:.88rem; }
.prose pre code { background:none; color:inherit; padding:0; }
.prose table { width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:.94rem; }
.prose th, .prose td { border:1px solid var(--line); padding:.6rem .8rem; text-align:left; }
.prose th { background:var(--bg-soft); }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.acc-faq { background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  margin-bottom:.7rem; overflow:hidden; }
.acc-faq > summary { padding:1.05rem 1.3rem; font-weight:650; color:var(--ink);
  cursor:pointer; list-style:none; display:flex; align-items:center;
  justify-content:space-between; gap:1rem; font-size:1rem; }
.acc-faq > summary::-webkit-details-marker { display:none; }
.acc-faq > summary::after { content:'+'; color:var(--accent); font-size:1.35rem;
  font-weight:400; line-height:1; flex-shrink:0; }
.acc-faq[open] > summary::after { content:'−'; }
.acc-faq > summary:hover { background:var(--bg-soft); }
.acc-faq-body { padding:0 1.3rem 1.2rem; color:var(--body); font-size:.96rem;
  line-height:1.65; }

/* ── CTA band ─────────────────────────────────────────────────────────── */
.cta-band { background:var(--navy-800); color:#fff; border-radius:var(--radius-lg);
  padding:52px 48px; display:flex; align-items:center; justify-content:space-between;
  gap:2.5rem; flex-wrap:wrap; }
.cta-band h2 { color:#fff; margin-bottom:.45rem; }
.cta-band p { color:#b6c6da; margin:0; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-footer { background:var(--navy-900); color:#93a6bd; padding:64px 0 32px;
  font-size:.92rem; margin-top:0; }
.footer-grid { display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:40px;
  padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.1); }
.site-footer h4 { color:#fff; font-size:.82rem; text-transform:uppercase;
  letter-spacing:.1em; margin-bottom:1rem; font-weight:700; }
.site-footer a { color:#93a6bd; display:block; padding:.28rem 0; }
.site-footer a:hover { color:#fff; text-decoration:none; }
.site-footer .brand { color:#fff; margin-bottom:.9rem; }
.footer-address { font-style:normal; padding:.28rem 0; line-height:1.55; }
.footer-bottom { display:flex; justify-content:space-between; gap:1rem;
  padding-top:26px; font-size:.85rem; flex-wrap:wrap; }

/* ── Utility ──────────────────────────────────────────────────────────── */
.mt-0{margin-top:0}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}
.mt-4{margin-top:2rem}.mb-0{margin-bottom:0}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}
.mb-4{margin-bottom:2rem}.mb-5{margin-bottom:3rem}
.muted{color:var(--muted)}.small{font-size:.86rem}.mono{font-family:var(--mono)}
.nowrap{white-space:nowrap}.right{text-align:right}
.divider { height:1px; background:var(--line); margin:2.5rem 0; border:0; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width:1000px) {
  .hero-grid { grid-template-columns:1fr; gap:40px; }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:820px) {
  .nav-toggle { display:block; }
  .nav-links { display:none; position:absolute; top:74px; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--line); flex-direction:column;
    align-items:stretch; padding:12px; gap:2px; box-shadow:var(--shadow-lg); }
  .nav-links.open { display:flex; }
  .nav-links a, .has-menu > button { width:100%; padding:.8rem 1rem; }
  .nav-cta { margin:.5rem 0 0; }
  .menu { position:static; display:block; box-shadow:none; border:none;
    padding:0 0 0 .8rem; min-width:0; }
  .has-menu > button { display:none; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns:1fr; }
  .section { padding:56px 0; }
  .hero { padding:64px 0 56px; }
  .cta-band { padding:36px 28px; }
  .field-row { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:28px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important; }
}