/* ==========================================================================
   HYA Business Management — Design System
   Palette e impianto tipografico derivati dal brand esistente:
   navy #10284D · petrolio #015989 · CTA #0285CE
   ========================================================================== */

:root{
  /* Brand */
  --navy:        #10284D;
  --navy-deep:   #0A1B34;
  --navy-soft:   #1B3A66;
  --petrol:      #015989;
  --accent:      #0285CE;
  --accent-lift: #2AA3E8;

  /* Neutrals */
  --ink:         #14202F;
  --body:        #3D4C5F;
  --muted:       #6B7A8D;
  --line:        #E3E7EC;
  --line-soft:   #EEF1F4;
  --paper:       #FFFFFF;
  --paper-alt:   #F6F8FA;
  --paper-warm:  #FAF9F6;

  /* Type */
  --serif: "Source Serif 4", "Kepler Std", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Metrics */
  --wrap: 1180px;
  --narrow: 760px;
  --radius: 2px;
  --shadow-sm: 0 1px 2px rgba(16,40,77,.06), 0 8px 24px -18px rgba(16,40,77,.35);
  --shadow-md: 0 2px 4px rgba(16,40,77,.05), 0 24px 60px -32px rgba(16,40,77,.45);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--body);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{ max-width:100%; height:auto; display:block; }
a{ color:var(--petrol); text-decoration:none; }
a:hover{ color:var(--accent); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); }
.narrow{ max-width:var(--narrow); }
.section{ padding-block:clamp(56px,8vw,110px); }
.section--tight{ padding-block:clamp(40px,5vw,68px); }
.section--alt{ background:var(--paper-alt); }
.section--warm{ background:var(--paper-warm); }
.section--navy{ background:var(--navy); color:#D7E1EE; }
.section--navy h2,.section--navy h3,.section--navy strong{ color:#fff; }
.section--petrol{ background:var(--petrol); color:#DCEBF5; }
.section--petrol h2,.section--petrol h3,.section--petrol strong{ color:#fff; }
.rule{ border:0; border-top:1px solid var(--line); margin:0; }

/* ---------- Type ---------- */
h1,h2,h3,h4{ font-family:var(--serif); color:var(--navy); font-weight:400; letter-spacing:-.012em; margin:0 0 .5em; }
h1{ font-size:clamp(2.3rem,5.4vw,4rem); line-height:1.06; }
h2{ font-size:clamp(1.75rem,3.4vw,2.65rem); line-height:1.14; }
h3{ font-size:clamp(1.18rem,1.9vw,1.5rem); line-height:1.25; }
h4{ font-size:1.05rem; line-height:1.35; }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }
strong{ color:var(--ink); font-weight:600; }

.eyebrow{
  font-family:var(--sans); font-size:.7rem; font-weight:600;
  letter-spacing:.19em; text-transform:uppercase; color:var(--accent);
  margin:0 0 1.1rem; display:block;
}
.section--navy .eyebrow,.section--petrol .eyebrow{ color:var(--accent-lift); }
.lede{ font-size:clamp(1.06rem,1.55vw,1.3rem); line-height:1.55; color:var(--ink); }
.section--navy .lede{ color:#C8D6E7; }
.small{ font-size:.9rem; }
.muted{ color:var(--muted); }
.serif-note{ font-family:var(--serif); font-style:italic; font-size:1.12rem; color:var(--muted); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--sans); font-size:.92rem; font-weight:600; letter-spacing:.01em;
  padding:.92em 1.55em; border-radius:var(--radius); border:1px solid transparent;
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
  cursor:pointer; text-align:left;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:#0271AF; color:#fff; }
.btn-outline{ border-color:rgba(16,40,77,.28); color:var(--navy); background:transparent; }
.btn-outline:hover{ border-color:var(--navy); background:var(--navy); color:#fff; }
.section--navy .btn-outline,.section--petrol .btn-outline,.hero .btn-outline,.page-hero .btn-outline{ border-color:rgba(255,255,255,.55); color:#fff; }
.section--navy .btn-outline:hover,.section--petrol .btn-outline:hover,.hero .btn-outline:hover,.page-hero .btn-outline:hover{ background:#fff; color:var(--navy); border-color:#fff; }
.btn-row{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.arrow{ transition:transform .18s var(--ease); }
.btn:hover .arrow{ transform:translateX(3px); }

.link-more{
  display:inline-flex; align-items:center; gap:.45em;
  font-weight:600; font-size:.93rem; color:var(--petrol);
  border-bottom:1px solid rgba(1,89,137,.28); padding-bottom:2px;
}
.link-more:hover{ border-color:var(--accent); }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.site-header__inner{ display:flex; align-items:center; gap:1.5rem; min-height:72px; }
.brand{ display:flex; align-items:center; gap:.7rem; flex:0 0 auto; }
.brand img{ height:30px; width:auto; }
.brand__tag{
  font-size:.63rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-weight:600; border-left:1px solid var(--line);
  padding-left:.7rem; line-height:1.25; max-width:110px;
}
.nav{ margin-left:auto; display:flex; align-items:center; gap:.35rem; }
.nav a{
  font-size:.88rem; font-weight:500; color:var(--navy);
  padding:.5em .72em; border-radius:var(--radius); white-space:nowrap;
  transition:background .16s var(--ease), color .16s var(--ease);
}
.nav a:hover{ background:var(--paper-alt); color:var(--petrol); }
.nav a[aria-current="page"]{ color:var(--accent); font-weight:600; }
.nav .btn{ margin-left:.5rem; padding:.66em 1.1em; font-size:.85rem; }
.nav-toggle{
  display:none; margin-left:auto; background:none; border:1px solid var(--line);
  border-radius:var(--radius); padding:.5rem .7rem; cursor:pointer; color:var(--navy);
  font-size:.85rem; font-weight:600; font-family:var(--sans);
}
@media (max-width:1040px){
  .nav{
    position:fixed; inset:72px 0 auto; background:#fff; flex-direction:column;
    align-items:stretch; gap:0; padding:.5rem clamp(20px,5vw,40px) 1.4rem;
    border-bottom:1px solid var(--line); box-shadow:var(--shadow-md);
    max-height:calc(100vh - 72px); overflow-y:auto;
    display:none;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:.85em .2em; border-bottom:1px solid var(--line-soft); border-radius:0; }
  .nav .btn{ margin:.9rem 0 0; justify-content:center; }
  .nav-toggle{ display:block; }
  .brand__tag{ display:none; }
}
.skip{
  position:absolute; left:-9999px; top:0; background:var(--navy); color:#fff;
  padding:.7rem 1.1rem; z-index:100;
}
.skip:focus{ left:.5rem; top:.5rem; color:#fff; }

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1100px 520px at 82% -10%, rgba(2,133,206,.30), transparent 62%),
    linear-gradient(168deg, #0C2044 0%, var(--navy) 46%, #0E2647 100%);
  background-color:var(--navy);
  color:#CBD9EA;
  padding-block:clamp(56px,7vw,96px);
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(900px 460px at 68% 30%, #000, transparent 78%);
  -webkit-mask-image:radial-gradient(900px 460px at 68% 30%, #000, transparent 78%);
}
.hero__inner{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.hero h1{ color:#fff; margin-bottom:.55em; }
.hero .lede{ color:#B9CBE0; max-width:36em; }
.hero .eyebrow{ color:var(--accent-lift); }
.hero__meta{
  margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.16);
  display:flex; flex-wrap:wrap; gap:1.6rem; font-size:.83rem; color:#8FA6C2; letter-spacing:.02em;
}
.hero__meta span{ display:inline-flex; align-items:center; gap:.5em; }
.hero__meta span::before{ content:""; width:5px; height:5px; background:var(--accent-lift); border-radius:50%; }
@media (max-width:900px){
  .hero__inner{ grid-template-columns:1fr; }
  .hero__visual{ order:2; }
}

/* ---------- Stat strip ---------- */
.stats{ border-block:1px solid var(--line); background:var(--paper); }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ padding:clamp(1.6rem,3vw,2.4rem) clamp(1rem,2vw,1.8rem); border-left:1px solid var(--line); }
.stat:first-child{ border-left:0; }
.stat__num{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(2.1rem,4.2vw,3.1rem); line-height:1; color:var(--navy);
  letter-spacing:-.02em; display:block; margin-bottom:.45rem;
}
.stat__label{ font-size:.85rem; line-height:1.4; color:var(--muted); }
.section--navy .stat{ border-color:rgba(255,255,255,.16); }
.section--navy .stat__num{ color:#fff; }
.section--navy .stat__label{ color:#9DB2CC; }
@media (max-width:820px){
  .stats__grid{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(3){ border-left:0; }
  .stat:nth-child(n+3){ border-top:1px solid var(--line); }
}
@media (max-width:480px){
  .stats__grid{ grid-template-columns:1fr; }
  .stat{ border-left:0; }
  .stat+.stat{ border-top:1px solid var(--line); }
}

/* ---------- Grids & cards ---------- */
.grid{ display:grid; gap:clamp(1.2rem,2.4vw,2rem); }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid-split{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; }
@media (max-width:980px){ .grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } .grid-split{ grid-template-columns:1fr; } }
@media (max-width:820px){ .grid-3{ grid-template-columns:1fr; } }
@media (max-width:640px){ .grid-2,.grid-4{ grid-template-columns:1fr; } }

.card{
  background:var(--paper); border:1px solid var(--line);
  padding:clamp(1.5rem,2.6vw,2.1rem); border-radius:var(--radius);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.card:hover{ border-color:rgba(2,133,206,.45); box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.card__num{
  font-family:var(--serif); font-style:italic; font-size:1.65rem; color:var(--accent);
  display:block; line-height:1; margin-bottom:.9rem;
}
.card h3{ margin-bottom:.6rem; }
.card p{ font-size:.97rem; }
.card--flat:hover{ transform:none; box-shadow:none; border-color:var(--line); }
.section--alt .card{ background:#fff; }
.section--navy .card{ background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.14); }
.section--navy .card:hover{ border-color:rgba(255,255,255,.34); }
.section--navy .card p{ color:#B9CBE0; }

.qa{ margin-bottom:1.15rem; }
.qa > strong:first-child{ display:block; color:var(--navy); font-family:var(--serif); font-size:1.02rem; font-weight:600; margin-bottom:.15rem; }

/* ---------- Steps ---------- */
.steps{ counter-reset:step; display:grid; gap:0; margin-top:2.4rem; }
.step{
  counter-increment:step; position:relative;
  padding:1.6rem 0 1.6rem 4.2rem; border-top:1px solid var(--line);
}
.step:last-child{ border-bottom:1px solid var(--line); }
.step::before{
  content:counter(step,decimal-leading-zero);
  position:absolute; left:0; top:1.55rem;
  font-family:var(--serif); font-style:italic; font-size:1.5rem; color:var(--accent); line-height:1;
}
.step h3{ font-size:1.12rem; margin-bottom:.35rem; }
.step p{ font-size:.97rem; margin:0; }
.section--navy .step{ border-color:rgba(255,255,255,.15); }
@media (max-width:560px){ .step{ padding-left:3.2rem; } }

/* ---------- Feature list ---------- */
.checks{ list-style:none; margin:1.4rem 0 0; padding:0; display:grid; gap:.9rem; }
.checks li{ position:relative; padding-left:1.9rem; font-size:.98rem; }
.checks li::before{
  content:""; position:absolute; left:2px; top:.42em; width:6px; height:11px;
  border:1.6px solid var(--accent); border-top:0; border-left:0;
  transform:rotate(42deg);
}
.section--navy .checks li::before{ border-color:var(--accent-lift); }

/* ---------- Callout / quote ---------- */
.callout{
  border-left:3px solid var(--accent); background:var(--paper-alt);
  padding:1.3rem 1.5rem; margin:2rem 0; border-radius:0 var(--radius) var(--radius) 0;
}
.callout p{ font-size:.97rem; }
.callout--warn{ border-color:var(--petrol); }
.section--navy .callout{ background:rgba(255,255,255,.05); }

blockquote{
  margin:2.2rem 0; padding:0 0 0 1.6rem; border-left:2px solid var(--accent);
  font-family:var(--serif); font-size:clamp(1.15rem,2vw,1.45rem); line-height:1.45;
  color:var(--navy); font-style:italic;
}
blockquote cite{ display:block; margin-top:.9rem; font-family:var(--sans); font-style:normal; font-size:.85rem; color:var(--muted); letter-spacing:.04em; }
.section--navy blockquote{ color:#fff; }

/* ---------- Table ---------- */
.table-wrap{ overflow-x:auto; margin:1.8rem 0; -webkit-overflow-scrolling:touch; }
table{ width:100%; border-collapse:collapse; font-size:.95rem; min-width:520px; }
th,td{ text-align:left; padding:.85rem 1rem; border-bottom:1px solid var(--line); vertical-align:top; }
th{ font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); font-weight:600; }
td.num{ font-family:var(--serif); font-style:italic; font-size:1.2rem; color:var(--navy); white-space:nowrap; }
.section--navy th,.section--navy td{ border-color:rgba(255,255,255,.15); }
.section--navy td.num{ color:#fff; }
.section--navy th{ color:#93A9C5; }

/* ---------- Bar visual ---------- */
.bar{ display:flex; height:46px; border-radius:var(--radius); overflow:hidden; margin:1.8rem 0 .9rem; background:rgba(255,255,255,.08); }
.bar__auto{ background:linear-gradient(90deg,var(--accent),var(--accent-lift)); }
.bar__human{ background:rgba(255,255,255,.28); }
.bar__legend{ display:flex; flex-wrap:wrap; gap:1.6rem; font-size:.85rem; color:#9DB2CC; }
.bar__legend span{ display:inline-flex; align-items:center; gap:.5em; }
.dot{ width:10px; height:10px; border-radius:2px; display:inline-block; }

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--line); margin-top:2rem; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:1.25rem 2.6rem 1.25rem 0; position:relative;
  font-family:var(--serif); font-size:clamp(1.02rem,1.6vw,1.18rem); color:var(--navy); line-height:1.35;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:.4rem; top:1.65rem; width:12px; height:12px;
  border-right:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent);
  transform:rotate(45deg); transition:transform .2s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(-135deg); top:1.9rem; }
.faq .faq__a{ padding:0 2.6rem 1.5rem 0; font-size:.98rem; }
.faq .faq__a p:first-child{ margin-top:0; }

/* ---------- Forms ---------- */
.form{ display:grid; gap:1.1rem; }
.field label{ display:block; font-size:.8rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:.4rem; }
.field input,.field textarea,.field select{
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--ink);
  padding:.85rem 1rem; border:1px solid var(--line); border-radius:var(--radius); background:#fff;
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(2,133,206,.13);
}
.field textarea{ min-height:130px; resize:vertical; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
@media (max-width:600px){ .form__row{ grid-template-columns:1fr; } }
.form__note{ font-size:.83rem; color:var(--muted); }

/* ---------- Contact blocks ---------- */
.contact-card{ border:1px solid var(--line); padding:clamp(1.4rem,2.6vw,2rem); background:#fff; }
.contact-card dt{ font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-top:1.2rem; }
.contact-card dt:first-of-type{ margin-top:0; }
.contact-card dd{ margin:.3rem 0 0; color:var(--ink); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--navy-deep); color:#93A9C5; padding-block:clamp(48px,6vw,76px) 0; font-size:.92rem; }
.site-footer h4{ color:#fff; font-family:var(--sans); font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; margin-bottom:1.1rem; font-weight:600; }
.site-footer a{ color:#B9CBE0; }
.site-footer a:hover{ color:#fff; }
.footer__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(1.6rem,4vw,3rem); }
.footer__links{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.footer__brand img{ height:34px; filter:brightness(0) invert(1); opacity:.92; margin-bottom:1rem; }
.footer__tag{ font-family:var(--serif); font-style:italic; font-size:1.05rem; color:#fff; margin-bottom:.7rem; }
.footer__legal{
  margin-top:clamp(2.4rem,5vw,3.4rem); border-top:1px solid rgba(255,255,255,.12);
  padding-block:1.5rem; display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
  font-size:.8rem; color:#6E86A5;
}
@media (max-width:900px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer__grid{ grid-template-columns:1fr; } }

/* ---------- Breadcrumb ---------- */
.crumbs{ font-size:.8rem; color:var(--muted); padding-top:1.4rem; }
.crumbs a{ color:var(--muted); }
.crumbs a:hover{ color:var(--accent); }
.crumbs span{ margin-inline:.45rem; opacity:.5; }

/* ---------- Page hero (interior) ---------- */
.page-hero{ background:var(--navy); color:#B9CBE0; padding-block:clamp(48px,7vw,86px) clamp(44px,6vw,74px); }
.page-hero h1{ color:#fff; max-width:16ch; }
.page-hero .lede{ color:#B9CBE0; max-width:52ch; }
.page-hero .crumbs,.page-hero .crumbs a{ color:#7F97B5; }
.page-hero .crumbs a:hover{ color:#fff; }

/* ---------- Key facts (AI-extractable summary) ---------- */
.keyfacts{ border:1px solid var(--line); background:var(--paper-warm); padding:clamp(1.3rem,2.4vw,1.8rem); margin:2.2rem 0; }
.keyfacts h2,.keyfacts h3{ font-family:var(--sans); font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin-bottom:1rem; font-weight:600; }
.keyfacts ul{ margin:0; padding-left:1.15rem; display:grid; gap:.55rem; }
.keyfacts li{ font-size:.95rem; }

/* ---------- Tags ---------- */
.tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.4rem; }
.tag{
  font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
  border:1px solid var(--line); color:var(--muted); padding:.4em .75em; border-radius:99px;
}
.section--navy .tag{ border-color:rgba(255,255,255,.2); color:#9DB2CC; }

/* ---------- Reveal animation ---------- */
/* Only hidden once JavaScript has confirmed it can reveal them again. Without JS
   (or if it fails) every .reveal block stays fully visible. */
.js .reveal{ opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---------- Process diagram (SVG) ---------- */
.diagram{ width:100%; }
.diagram .node{ fill:rgba(255,255,255,.06); stroke:rgba(255,255,255,.34); stroke-width:1; }
.diagram .node--auto{ fill:rgba(2,133,206,.20); stroke:var(--accent-lift); }
.diagram .node--human{ fill:rgba(255,255,255,.16); stroke:rgba(255,255,255,.7); }
.diagram .link{ stroke:rgba(255,255,255,.28); stroke-width:1.2; fill:none; }
.diagram .label{ font-family:var(--sans); font-size:9px; fill:#B9CBE0; letter-spacing:.04em; }
.diagram .label--sm{ font-size:7.5px; fill:#8FA6C2; }
.diagram .flow{ stroke:var(--accent-lift); stroke-width:2; fill:none; stroke-linecap:round;
  stroke-dasharray:22 380; animation:flowdash 4.6s linear infinite; }
@keyframes flowdash{ to{ stroke-dashoffset:-402; } }
.diagram .pulse{ animation:pulse 3.2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:.55 } 50%{ opacity:1 } }
@media (prefers-reduced-motion: reduce){
  .diagram .flow{ animation:none; stroke-dasharray:none; opacity:.5; }
  .diagram .pulse{ animation:none; }
}

/* ---------- Utilities ---------- */
.mt-0{ margin-top:0 } .mt-1{ margin-top:1rem } .mt-2{ margin-top:2rem } .mt-3{ margin-top:3rem }
.mb-0{ margin-bottom:0 }
.center{ text-align:center }
.maxw-60{ max-width:60ch } .maxw-52{ max-width:52ch }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ==========================================================================
   Process map — the real topology of one production process, drawn on canvas
   ========================================================================== */
.pmap{
  position:relative; margin-top:clamp(1.8rem,3vw,2.6rem);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,0) 60%);
  overflow:hidden;
}
.pmap canvas{
  display:block; width:100%; height:clamp(300px,46vw,600px);
  background:transparent;
}
.pmap__live{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(255,255,255,.14);
}
.pmap__live div{ padding:1.1rem clamp(1rem,2vw,1.6rem); border-left:1px solid rgba(255,255,255,.14); }
.pmap__live div:first-child{ border-left:0; }
.pmap__live b{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.5rem,3vw,2.1rem); line-height:1; color:#fff; display:block;
  font-variant-numeric:tabular-nums;
}
.pmap__live span{ font-size:.8rem; color:#93A9C5; display:block; margin-top:.45rem; line-height:1.35; }

.pmap__bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.4rem;
  padding:.95rem clamp(1rem,2vw,1.6rem);
  border-top:1px solid rgba(255,255,255,.14);
}
.pmap__legend{ display:flex; flex-wrap:wrap; gap:.55rem 1.2rem; margin:0; padding:0; list-style:none; }
.pmap__legend li{ display:inline-flex; align-items:center; gap:.45em; font-size:.78rem; color:#9DB2CC; }
.key{ width:9px; height:9px; border-radius:50%; display:inline-block; flex:0 0 auto; }
.key--check{ background:rgba(120,180,225,.75) }
.key--gate{ width:9px; height:9px; border:1.2px solid #2AA3E8; background:none; border-radius:1px; transform:rotate(45deg) }
.key--action{ background:#0285CE }
.key--notify{ background:rgba(90,150,200,.7) }
.key--timer{ background:none; border:1.2px solid rgba(150,190,225,.85) }
.key--human{ background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.18) }

.pmap__replay{
  margin-left:auto; background:none; border:1px solid rgba(255,255,255,.32);
  color:#fff; font-family:var(--sans); font-size:.78rem; font-weight:600;
  letter-spacing:.04em; padding:.5em 1em; border-radius:var(--radius); cursor:pointer;
  transition:background .18s var(--ease), border-color .18s var(--ease);
}
.pmap__replay:hover{ background:#fff; color:var(--navy); border-color:#fff; }

@media (max-width:640px){
  .pmap__live{ grid-template-columns:1fr; }
  .pmap__live div{ border-left:0; border-top:1px solid rgba(255,255,255,.14); }
  .pmap__live div:first-child{ border-top:0; }
  .pmap__replay{ margin-left:0; }
}