/* ═══════════════════════════════════════════════════════════════
   SMELTSYNC — SHARED SITE STYLES
   Design system: mill-floor "certificate" aesthetic.
   Used by every page. Page-specific/interactive styles (hero
   log-ticker, TV wall, calculator, modals) stay inline on index.html.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --ink:#16202B;
  --ink-2:#243240;
  --paper:#EFF1EE;
  --card:#FFFFFF;
  --molten:#E8420A;
  --molten-dark:#C43606;
  --steel:#64707B;
  --steel-light:#8B959E;
  --rule:#D9DDD8;
  --rule-dark:#B9BFBA;
  --ok:#17804F;
  --ok-bg:#E2F2E9;
  --warn-bg:#FCEDE4;
  --radius:4px;
  --shadow:0 1px 2px rgba(22,32,43,.06), 0 8px 28px rgba(22,32,43,.08);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans',sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px;}
html,body{overflow-x:hidden;}
h1,h2,h3{font-family:'Archivo',sans-serif;line-height:1.08;letter-spacing:-0.015em;color:var(--ink);}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;}
button{font-family:inherit;}

/* ---------- CERTIFICATE DOC-FIELD ---------- */
.docline{
  display:flex;align-items:center;gap:14px;
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--steel);margin-bottom:18px;
}
.docline::before{content:"";width:34px;height:2px;background:var(--molten);}
.docline::after{content:"";flex:1;height:1px;background:var(--rule-dark);}
.docline .no{color:var(--molten);}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:15.5px;
  padding:15px 28px;border-radius:var(--radius);border:none;cursor:pointer;
  transition:background .15s, transform .15s, border-color .15s, box-shadow .15s;
  letter-spacing:.01em;
}
.btn-molten{
  background:var(--molten);color:#fff;
  box-shadow:0 2px 0 var(--molten-dark), 0 10px 24px rgba(232,66,10,.28);
}
.btn-molten:hover{background:var(--molten-dark);transform:translateY(-1px);}
.btn-wa{ background:#1DA851;color:#fff; box-shadow:0 2px 0 #14803C; }
.btn-wa:hover{background:#178A42;transform:translateY(-1px);}
.btn-line{ background:transparent;color:var(--ink);border:1.5px solid var(--rule-dark); }
.btn-line:hover{border-color:var(--ink);background:rgba(22,32,43,.03);}
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible{
  outline:2.5px solid var(--molten);outline-offset:2px;
}
.wa-ic{width:19px;height:19px;flex-shrink:0;}
.micro-trust{
  display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;
  font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--steel);
}
.micro-trust span{display:flex;align-items:center;gap:6px;}
.micro-trust span::before{content:"✓";color:var(--ok);font-weight:700;}

/* ---------- TOP TRUST BAR ---------- */
.topbar{
  background:var(--ink);color:#DCE3E9;
  font-size:13px;padding:8px 24px;text-align:center;
  font-family:'IBM Plex Mono',monospace;letter-spacing:.02em;
}
.topbar b{color:#fff;font-weight:600;}
.topbar .dot{color:var(--molten);margin:0 8px;}
@media (max-width:480px){ .topbar{font-size:11px;padding:7px 14px;line-height:1.6;} }

/* ---------- NAV ---------- */
header{
  position:sticky;top:0;z-index:100;
  background:rgba(239,241,238,.94);
  backdrop-filter:blur(10px);
  border-bottom:1.5px solid var(--rule-dark);
}
nav{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:14px 24px;max-width:1160px;margin:0 auto;
}
.logo{
  font-family:'Archivo',sans-serif;font-weight:900;font-size:21px;
  letter-spacing:-.01em;cursor:pointer;user-select:none;color:var(--ink);
  display:flex;align-items:center;gap:9px;
}
.logo .mark{width:30px;height:30px;flex:0 0 auto;}
.logo .mark img{width:100%;height:100%;object-fit:contain;display:block;}
.logo .wordmark{height:20px;width:auto;display:block;}
.logo em{font-style:normal;color:var(--molten);}
.navlinks{display:flex;gap:26px;font-size:14.5px;font-weight:500;color:var(--steel);}
.navlinks a:hover{color:var(--ink);}
.navlinks a.on{color:var(--ink);}
.nav-cta{padding:11px 20px;font-size:14px;flex-shrink:0;}
@media (max-width:860px){ .navlinks{display:none;} }

/* ---------- NAV DROPDOWNS ---------- */
.has-dd{position:relative;}
.dd-trigger{display:flex;align-items:center;gap:5px;cursor:pointer;background:none;border:none;font:inherit;color:inherit;padding:0;}
.dd-trigger::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .15s;flex-shrink:0;}
.has-dd:hover .dd-trigger::after, .has-dd:focus-within .dd-trigger::after{transform:rotate(225deg);margin-top:3px;}
.dd-menu{
  position:absolute;top:100%;left:-18px;margin-top:16px;
  background:var(--card);border:1px solid var(--rule);box-shadow:var(--shadow);
  min-width:250px;padding:10px;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .15s, transform .15s, visibility .15s;z-index:50;
}
.has-dd:hover .dd-menu, .has-dd:focus-within .dd-menu{opacity:1;visibility:visible;transform:translateY(0);}
.dd-menu a{display:block;padding:9px 11px;border-radius:3px;font-size:13.5px;color:var(--ink-2);}
.dd-menu a:hover{background:#F6F7F5;color:var(--molten);}
.dd-menu .dd-cat{font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--steel-light);padding:10px 11px 4px;}
.dd-menu .dd-cat:first-child{padding-top:4px;}

/* ---------- WHO IT'S FOR (shared) ---------- */
.persona-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media (max-width:900px){ .persona-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .persona-grid{grid-template-columns:1fr;} }
.persona-card{background:var(--card);border:1px solid var(--rule);border-top:3px solid var(--molten);padding:24px 20px;box-shadow:var(--shadow);}
.persona-card .role{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--molten);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;}
.persona-card h3{font-size:16.5px;font-weight:700;margin-bottom:8px;}
.persona-card p{color:var(--steel);font-size:13.5px;}

/* ---------- ARCHITECTURE DIAGRAM (shared) ---------- */
.arch-diagram{display:flex;flex-direction:column;align-items:center;max-width:660px;margin:0 auto;}
.arch-shop-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);border:1px dashed var(--rule-dark);padding:8px 18px;}
.arch-connector{width:2px;height:26px;background:var(--rule-dark);position:relative;}
.arch-connector::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--rule-dark);}
.arch-row{width:100%;}
.arch-triple{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media (max-width:560px){ .arch-triple{grid-template-columns:1fr;} }
.arch-node{background:var(--card);border:1.5px solid var(--ink);padding:16px 18px;text-align:center;font-family:'Archivo',sans-serif;font-weight:700;font-size:14.5px;box-shadow:var(--shadow);}
.arch-hub{background:var(--ink);color:#fff;border-color:var(--ink);font-size:17px;padding:20px;letter-spacing:.02em;}
.arch-heat{background:var(--molten);color:#fff;border-color:var(--molten-dark);font-family:'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase;font-size:13px;padding:14px;}
.arch-mgmt{background:var(--ok-bg);border-color:var(--ok);color:var(--ok);}
.arch-note{text-align:center;color:var(--steel);font-size:13px;margin-top:10px;max-width:420px;margin-left:auto;margin-right:auto;}
@media (max-width:420px){
  nav{padding:12px 14px;gap:8px;}
  .logo{gap:7px;}
  .logo .mark{width:24px;height:24px;}
  .logo .wordmark{height:15px;}
  .nav-cta{padding:9px 12px;font-size:12px;}
}

/* ---------- BREADCRUMB ---------- */
.breadcrumb{
  padding:16px 0;font-family:'IBM Plex Mono',monospace;font-size:12px;
  color:var(--steel-light);letter-spacing:.02em;border-bottom:1px solid var(--rule);
}
.breadcrumb a{color:var(--steel);}
.breadcrumb a:hover{color:var(--molten);}
.breadcrumb .sep{margin:0 8px;color:var(--rule-dark);}
.breadcrumb .current{color:var(--ink);}

/* ---------- INTERIOR HERO (solutions / about / faq / case-study / resources) ---------- */
.ihero{padding:60px 0 56px;border-bottom:1.5px solid var(--rule-dark);}
.ihero .wrap{max-width:820px;}
.ihero h1{font-size:clamp(32px,4.6vw,50px);font-weight:900;margin-bottom:18px;}
.ihero h1 em{font-style:normal;color:var(--molten);}
.ihero .sub{font-size:18px;color:var(--steel);margin-bottom:26px;max-width:680px;}
.ihero .sub b{color:var(--ink);font-weight:600;}
@media (max-width:600px){ .ihero{padding:36px 0 32px;} }

/* ---------- SECTIONS / PROSE ---------- */
.section{padding:72px 0;border-bottom:1.5px solid var(--rule-dark);}
.section h2{font-size:clamp(26px,3.4vw,36px);font-weight:800;max-width:680px;margin-bottom:16px;}
.section h3{font-size:19px;font-weight:700;margin-bottom:8px;}
.section .lead{color:var(--steel);font-size:17px;max-width:640px;margin-bottom:40px;}
@media (max-width:600px){ .section{padding:44px 0;} .section .lead{margin-bottom:28px;} }

.prose{max-width:720px;}
.prose p{color:var(--ink-2);font-size:16px;margin-bottom:18px;}
.prose h2{font-size:24px;font-weight:800;margin:36px 0 14px;}
.prose h2:first-child{margin-top:0;}
.prose h3{font-size:17.5px;font-weight:700;margin:24px 0 10px;}
.prose ul, .prose ol{color:var(--ink-2);font-size:16px;margin:0 0 18px 22px;}
.prose li{margin-bottom:8px;}
.prose strong{color:var(--ink);font-weight:600;}
.prose a{color:var(--molten);border-bottom:1px solid rgba(232,66,10,.35);}
.prose blockquote{
  border-left:3px solid var(--molten);padding:2px 0 2px 18px;margin:22px 0;
  color:var(--steel);font-size:15.5px;font-style:italic;
}

/* ---------- PAIN / FEATURE CARDS ---------- */
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media (max-width:860px){ .pain-grid{grid-template-columns:1fr;} }
.pain-card{
  background:var(--card);border:1px solid var(--rule);border-top:3px solid var(--rule-dark);
  padding:28px 24px;box-shadow:var(--shadow);
}
.pain-card .tag{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--molten);margin-bottom:12px;letter-spacing:.05em;}
.pain-card h3{font-size:18px;font-weight:700;margin-bottom:10px;}
.pain-card p{color:var(--steel);font-size:14.5px;}

.mod-card{
  background:var(--card);border:1px solid var(--rule);padding:24px 20px;
  transition:transform .15s, box-shadow .15s, border-color .15s;box-shadow:var(--shadow);
}
.mod-card:hover{transform:translateY(-3px);border-color:var(--molten);}
.mod-num{font-family:'IBM Plex Mono',monospace;color:var(--molten);font-size:11.5px;letter-spacing:.08em;margin-bottom:14px;font-weight:600;}
.mod-card h3{font-size:16.5px;font-weight:700;margin-bottom:7px;}
.mod-card p{color:var(--steel);font-size:13.5px;}
.mod-card a.card-link{color:var(--molten);font-size:13px;font-weight:600;display:inline-block;margin-top:10px;}

.modules{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media (max-width:900px){ .modules{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .modules{grid-template-columns:1fr;} }
.modules.modules-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:560px){ .modules.modules-2{grid-template-columns:1fr;} }

/* ---------- CASE STUDY BLOCKS ---------- */
.case-results{display:flex;flex-direction:column;gap:0;border:1px solid var(--rule);box-shadow:var(--shadow);}
.case-row{
  display:flex;gap:16px;align-items:flex-start;padding:18px 20px;background:var(--card);
  border-bottom:1px solid var(--rule);font-size:14.5px;color:var(--steel);
}
.case-row:last-child{border-bottom:none;}
.case-row .n{
  font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:16px;color:var(--molten);
  min-width:130px;line-height:1.3;
}
@media (max-width:400px){ .case-row{flex-direction:column;gap:6px;} .case-row .n{min-width:0;} }
.case-row b{color:var(--ink);font-weight:600;}
blockquote.pull{
  font-family:'Archivo',sans-serif;font-weight:600;font-size:clamp(20px,2.6vw,27px);
  line-height:1.4;letter-spacing:-.01em;margin:0 0 22px;
}
blockquote.pull span{background:linear-gradient(transparent 62%, rgba(232,66,10,.22) 62%);}
.case-attr{font-size:14px;color:var(--steel);margin-bottom:28px;}
.case-attr strong{display:block;color:var(--ink);font-weight:600;font-size:15px;}

/* ---------- COMPARISON TABLE ---------- */
.compare-table{width:100%;border-collapse:collapse;background:var(--card);box-shadow:var(--shadow);table-layout:fixed;}
.compare-table th,.compare-table td{
  border:1px solid var(--rule);padding:14px 16px;text-align:left;font-size:14.5px;vertical-align:top;word-wrap:break-word;
}
.compare-table th{
  background:var(--ink);color:#fff;font-family:'Archivo',sans-serif;font-weight:700;font-size:14px;
}
.compare-table td:first-child{font-weight:600;color:var(--ink);background:#F6F7F5;}
.compare-table .yes{color:var(--ok);font-weight:600;}
.compare-table .no{color:var(--molten-dark);}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
@media (max-width:480px){ .compare-table th,.compare-table td{padding:9px 10px;font-size:12px;} }

/* ---------- SPEC / INTEGRATION GRID ---------- */
.spec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);box-shadow:var(--shadow);}
@media (max-width:700px){ .spec-grid{grid-template-columns:1fr;} }
.spec-cell{background:var(--card);padding:18px 20px;}
.spec-cell .k{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--steel);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;}
.spec-cell .v{font-size:15px;color:var(--ink);}

/* ---------- FAQ ---------- */
.faq{max-width:760px;}
details{background:var(--card);border:1px solid var(--rule);margin-bottom:10px;box-shadow:var(--shadow);}
summary{
  cursor:pointer;list-style:none;padding:18px 22px;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:16px;
  display:flex;justify-content:space-between;align-items:center;gap:14px;
}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+";font-family:'IBM Plex Mono',monospace;font-size:20px;color:var(--molten);flex-shrink:0;transition:transform .2s;}
details[open] summary::after{transform:rotate(45deg);}
details .a{padding:0 22px 20px;color:var(--steel);font-size:14.5px;max-width:640px;}

/* ---------- CTA BAND (dark, simplified pilot band for interior pages) ---------- */
.cta-band{background:var(--ink);color:#fff;padding:64px 0;}
.cta-band .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.cta-band h2{color:#fff;font-size:clamp(24px,3vw,32px);font-weight:800;max-width:480px;margin-bottom:0;}
.cta-band .sub{color:#AEB7BE;font-size:15px;margin-top:8px;max-width:440px;}
.cta-band .actions{display:flex;gap:12px;flex-wrap:wrap;}
@media (max-width:600px){ .cta-band{padding:44px 0;} .cta-band .actions{width:100%;} .cta-band .actions .btn{flex:1;} }

/* ---------- RELATED LINKS ---------- */
.related{padding:56px 0;}
.related .docline{margin-bottom:24px;}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media (max-width:860px){ .related-grid{grid-template-columns:1fr;} }
.related-card{
  background:var(--card);border:1px solid var(--rule);padding:20px;
  transition:border-color .15s, transform .15s;
}
.related-card:hover{border-color:var(--molten);transform:translateY(-2px);}
.related-card .k{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--molten);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;}
.related-card h3{font-size:15.5px;font-weight:700;margin-bottom:6px;}
.related-card p{color:var(--steel);font-size:13px;}

/* ---------- FOOTER ---------- */
footer{padding:34px 0 40px;background:var(--paper);}
.foot-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;}
footer p{color:var(--steel);font-size:13px;}
.foot-links{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--steel);}
.foot-links a:hover{color:var(--molten);}
@media (max-width:760px){ footer{padding-bottom:96px;} }

/* ---------- FLOATING WHATSAPP ---------- */
.wa-float{
  position:fixed;right:20px;bottom:20px;z-index:90;
  width:56px;height:56px;border-radius:50%;background:#1DA851;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(20,128,60,.45);
  transition:transform .15s;
}
.wa-float:hover{transform:scale(1.07);}
.wa-float svg{width:28px;height:28px;}
@media (max-width:760px){ .wa-float{bottom:74px;right:14px;} }

/* ---------- MOBILE STICKY CTA ---------- */
.mobile-cta{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:95;
  background:var(--card);border-top:1.5px solid var(--rule-dark);
  padding:10px 12px;gap:10px;
  box-shadow:0 -6px 24px rgba(22,32,43,.12);
}
.mobile-cta .btn{flex:1;padding:13px 10px;font-size:14px;}
@media (max-width:760px){ .mobile-cta{display:flex;} }

/* ---------- REVEAL + MOTION ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease;}
.reveal.in-view{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  html{scroll-behavior:auto;}
}