/* ============================================================
   SoftBoard / PDIS-16 — light enterprise UI
   Single amber brand accent. Status colors used only inside
   physics visuals where they carry meaning.
   ============================================================ */
:root{
  /* surfaces */
  --paper:#FFFFFF;
  --paper-2:#F7F8FA;
  --paper-3:#F1F3F6;
  --ink:#0C1116;        /* headings */
  --ink-2:#333B45;      /* body */
  --muted:#6A7480;      /* secondary */
  --faint:#98A2AE;      /* labels */
  --line:#E5E8EC;
  --line-2:#D8DCE2;

  /* brand accent */
  --amber:#E39411;
  --amber-2:#C77E06;
  --amber-soft:#FBF1DF;
  --amber-ring:rgba(227,148,17,0.28);

  /* semantic status (physics story only) */
  --ok:#1F9D6B;
  --ok-soft:#E4F4EC;
  --warn:#E0A32E;
  --warn-soft:#FBF1DD;
  --crit:#D8452B;
  --crit-soft:#FBE6E1;

  --shadow-sm:0 1px 2px rgba(16,24,32,.05), 0 1px 3px rgba(16,24,32,.06);
  --shadow-md:0 4px 14px rgba(16,24,32,.07), 0 2px 6px rgba(16,24,32,.05);
  --shadow-lg:0 18px 50px rgba(16,24,32,.10), 0 6px 18px rgba(16,24,32,.06);
  --radius:14px;
  --radius-sm:10px;
  --maxw:1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink-2);
  font-family:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.mono{font-family:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;}
h1,h2,h3,h4{color:var(--ink); font-weight:600; letter-spacing:-0.02em; line-height:1.12; margin:0;}
p{margin:0;}
a{color:var(--amber-2); text-decoration:none;}
a:hover{color:var(--amber);}
img{max-width:100%;}
:focus-visible{outline:2px solid var(--amber); outline-offset:3px; border-radius:4px;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,40px);}
.eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--amber-2);
}
.section-label{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--faint); margin-bottom:14px;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1; transform:none;}
.reveal[data-d="1"]{transition-delay:.08s;}
.reveal[data-d="2"]{transition-delay:.16s;}
.reveal[data-d="3"]{transition-delay:.24s;}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none;} }

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.site-header .bar{display:flex; align-items:center; justify-content:space-between; height:64px;}
.brand{display:flex; align-items:center; gap:9px; font-weight:600; color:var(--ink); letter-spacing:-0.01em;}
.brand .logo{
  width:24px; height:24px; border-radius:6px;
  background:linear-gradient(135deg,var(--amber),var(--amber-2));
  display:grid; place-items:center; box-shadow:0 2px 6px var(--amber-ring);
}
.brand .logo span{width:8px;height:8px;border-radius:50%;background:#fff;}
.brand b{font-weight:600;}
.brand small{color:var(--faint); font-weight:500; font-size:11px; font-family:'IBM Plex Mono',monospace; margin-left:2px;}
nav.main{display:flex; align-items:center; gap:6px;}
nav.main a{
  color:var(--ink-2); font-size:14px; font-weight:500; padding:8px 14px; border-radius:8px;
  transition:background .15s, color .15s;
}
nav.main a:hover{background:var(--paper-2); color:var(--ink);}
nav.main a.active{color:var(--amber-2);}
.nav-cta{margin-left:8px;}
.menu-btn{display:none;}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:600;
  padding:11px 20px; border-radius:10px; border:1px solid transparent; cursor:pointer;
  transition:transform .12s ease, box-shadow .15s ease, background .15s;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--amber); color:#231603; box-shadow:0 6px 16px var(--amber-ring);}
.btn-primary:hover{background:var(--amber-2); color:#fff;}
.btn-ghost{background:var(--paper); color:var(--ink); border-color:var(--line-2); box-shadow:var(--shadow-sm);}
.btn-ghost:hover{border-color:var(--amber); color:var(--amber-2);}
.btn .arw{transition:transform .15s;}
.btn:hover .arw{transform:translateX(3px);}

/* ============================================================
   Sections / generic layout
   ============================================================ */
section{padding:clamp(56px,8vw,104px) 0; border-bottom:1px solid var(--line);}
.section-head{max-width:720px; margin-bottom:clamp(32px,5vw,52px);}
.section-head h2{font-size:clamp(26px,3.6vw,40px); margin-bottom:16px;}
.section-head p{font-size:clamp(16px,1.6vw,18px); color:var(--muted);}
.tint{background:var(--paper-2);}
.tint-3{background:var(--paper-3);}

/* ============================================================
   Hero
   ============================================================ */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line);
  background:
    radial-gradient(1000px 460px at 82% -8%, var(--amber-soft), transparent 60%),
    linear-gradient(180deg,#fff, var(--paper-2));
}
.hero .grid-bg{
  position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg,var(--line) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(680px 380px at 78% 12%, #000 20%, transparent 78%);
  mask-image:radial-gradient(680px 380px at 78% 12%, #000 20%, transparent 78%);
}
.hero .wrap{position:relative; padding-top:clamp(48px,7vw,86px); padding-bottom:clamp(48px,7vw,86px);
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px); align-items:center;}
.hero h1{font-size:clamp(38px,6vw,68px); letter-spacing:-0.03em; margin:18px 0 22px; color:var(--ink);}
.hero h1 .amber{color:var(--amber-2);}
.hero .lede{font-size:clamp(17px,1.7vw,20px); color:var(--ink-2); max-width:560px; margin-bottom:32px;}
.hero .cta-row{display:flex; flex-wrap:wrap; gap:12px;}
.hero .trust-row{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:30px; color:var(--muted); font-size:13.5px;}
.hero .trust-row span{display:inline-flex; align-items:center; gap:7px;}
.hero .trust-row .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);}

/* live monitor card */
.monitor{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); padding:20px; position:relative;
}
.monitor .mhead{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.monitor .mhead .t{font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint);}
.monitor .live{display:inline-flex; align-items:center; gap:6px; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ok); font-weight:500;}
.monitor .live .pulse{width:7px;height:7px;border-radius:50%;background:var(--ok); box-shadow:0 0 0 0 rgba(31,157,107,.5); animation:pulse 2.4s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,157,107,.45);}70%{box-shadow:0 0 0 8px rgba(31,157,107,0);}100%{box-shadow:0 0 0 0 rgba(31,157,107,0);}}
.monitor .chart{width:100%; height:150px; display:block;}
.monitor .bands{display:flex; height:8px; border-radius:5px; overflow:hidden; margin:14px 0 8px;}
.monitor .bands i{flex:1;}
.monitor .bands .s-ok{background:var(--ok);} .monitor .bands .s-warn{background:var(--warn);} .monitor .bands .s-crit{background:var(--crit);}
.monitor .readout{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px;}
.monitor .readout .cell{background:var(--paper-2); border:1px solid var(--line); border-radius:9px; padding:10px 12px;}
.monitor .readout .cell .k{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint);}
.monitor .readout .cell .v{font-family:'IBM Plex Mono',monospace; font-size:17px; color:var(--ink); font-weight:500; margin-top:2px;}
.monitor .readout .cell .v.ok{color:var(--ok);}

/* ============================================================
   Threshold vs Physics (the shift)
   ============================================================ */
.shift-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.panel{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-md); padding:22px; overflow:hidden;
}
.panel.bad{border-top:3px solid var(--crit);}
.panel.good{border-top:3px solid var(--ok);}
.panel .ph{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;}
.panel .ph h3{font-size:18px;}
.panel .tagpill{font-family:'IBM Plex Mono',monospace; font-size:11px; padding:3px 9px; border-radius:20px; font-weight:500;}
.panel .tagpill.bad{background:var(--crit-soft); color:var(--crit);}
.panel .tagpill.good{background:var(--ok-soft); color:var(--ok);}
.panel .sub{font-size:14px; color:var(--muted); margin-bottom:14px;}
.panel svg.plot{width:100%; height:170px; display:block;}
.panel .caption{font-size:13px; color:var(--muted); margin-top:12px; display:flex; gap:8px; align-items:flex-start;}
.panel .caption b{color:var(--ink);}

/* ============================================================
   Feature / capability cards
   ============================================================ */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; box-shadow:var(--shadow-sm); transition:box-shadow .2s, transform .2s, border-color .2s;
}
.card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px); border-color:var(--line-2);}
.card .ico{width:40px;height:40px;border-radius:10px; background:var(--amber-soft); color:var(--amber-2); display:grid; place-items:center; margin-bottom:16px;}
.card h3{font-size:17.5px; margin-bottom:8px;}
.card p{font-size:14.5px; color:var(--muted);}
.card .num{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--amber-2); letter-spacing:.06em; margin-bottom:12px;}

/* ============================================================
   Case wall (events)
   ============================================================ */
.cases{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.case{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); overflow:hidden;
}
.case .top{padding:20px 22px 6px;}
.case .meta{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.case .badge{font-family:'IBM Plex Mono',monospace; font-size:11px; padding:3px 9px; border-radius:6px; background:var(--paper-3); color:var(--muted); letter-spacing:.04em;}
.case .badge.cyber{background:#141a22; color:#cdd6e0;}
.case h3{font-size:18.5px; margin-bottom:4px;}
.case .auth{font-size:12.5px; color:var(--faint); font-family:'IBM Plex Mono',monospace;}
.case .rows{padding:6px 22px 22px;}
.crow{display:grid; grid-template-columns:132px 1fr; gap:14px; padding:12px 0; border-top:1px solid var(--line);}
.crow:first-child{border-top:none;}
.crow .lab{display:flex; align-items:flex-start; gap:8px; font-size:12.5px; font-weight:600; color:var(--ink);}
.crow .lab .mk{width:16px;height:16px;border-radius:5px;flex:none;margin-top:1px;display:grid;place-items:center;font-size:10px;color:#fff;}
.crow .lab .mk.s1{background:var(--faint);} .crow .lab .mk.s2{background:var(--crit);} .crow .lab .mk.s3{background:var(--warn);} .crow .lab .mk.s4{background:var(--ok);}
.crow .txt{font-size:14px; color:var(--ink-2);}
.case.wide{grid-column:1 / -1;}

/* ============================================================
   OEE / value
   ============================================================ */
.flowbox{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:22px; margin-bottom:22px;}
.flowline{display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:13.5px;}
.flowline .node{background:var(--paper-2); border:1px solid var(--line); border-radius:8px; padding:9px 13px; color:var(--ink); font-weight:500;}
.flowline .node.bad{background:var(--crit-soft); border-color:transparent; color:var(--crit);}
.flowline .node.good{background:var(--ok-soft); border-color:transparent; color:var(--ok);}
.flowline .arrow{color:var(--faint);}
.flowline .tail{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted); margin-left:4px;}
.oee{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.oee .pillar{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-sm);}
.oee .pillar h4{font-size:16px; margin-bottom:4px;}
.oee .pillar .m{font-size:12px; color:var(--faint); margin-bottom:14px; font-family:'IBM Plex Mono',monospace;}
.oee .pillar .fail, .oee .pillar .win{font-size:13.5px; padding:12px 0; border-top:1px solid var(--line);}
.oee .pillar .fail{color:var(--muted);} .oee .pillar .win{color:var(--ink-2);}
.oee .pillar .tag{display:inline-block; font-size:11px; font-weight:600; font-family:'IBM Plex Mono',monospace; padding:2px 8px; border-radius:5px; margin-bottom:6px;}
.oee .pillar .tag.f{background:var(--crit-soft); color:var(--crit);}
.oee .pillar .tag.w{background:var(--ok-soft); color:var(--ok);}

/* ============================================================
   Pipeline (technology)
   ============================================================ */
.pipeline{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-md); padding:26px clamp(18px,3vw,30px);}
.pipe-track{display:flex; align-items:stretch; gap:0; position:relative; overflow-x:auto;}
.stage{flex:1 1 0; min-width:150px; text-align:center; padding:0 10px; position:relative;}
.stage .dotwrap{position:relative; height:44px; display:grid; place-items:center; margin-bottom:14px;}
.stage .node{width:44px;height:44px;border-radius:12px; background:var(--amber-soft); color:var(--amber-2); display:grid; place-items:center; z-index:2; border:1px solid var(--amber-ring);}
.stage:not(:last-child) .dotwrap:after{content:""; position:absolute; left:50%; right:-50%; top:50%; height:2px; background:var(--line-2); z-index:1;}
.stage h4{font-size:15px; margin-bottom:6px;}
.stage p{font-size:13px; color:var(--muted);}
.stage .packet{position:absolute; top:calc(50% - 4px); width:8px;height:8px;border-radius:50%; background:var(--amber); box-shadow:0 0 0 4px var(--amber-ring); z-index:3; opacity:0;}
.pipe-track.animate .packet{animation:travel 4.2s linear infinite;}
@keyframes travel{0%{opacity:0;} 4%{opacity:1;} 96%{opacity:1;} 100%{opacity:0;}}

/* explainer table beats */
.beats{display:grid; grid-template-columns:1fr; gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); background:var(--paper);}
.beat{display:grid; grid-template-columns:210px 1fr 1fr; gap:0; border-top:1px solid var(--line);}
.beat:first-child{border-top:none; background:var(--paper-2);}
.beat > div{padding:16px 20px;}
.beat .b-name{font-weight:600; color:var(--ink); display:flex; align-items:center; gap:10px; font-size:14.5px;}
.beat .b-name .chip{width:9px;height:9px;border-radius:3px;}
.beat .b-tech{font-size:13.5px; color:var(--muted); border-left:1px solid var(--line);}
.beat .b-plain{font-size:13.5px; color:var(--ink-2); border-left:1px solid var(--line);}
.beat.head > div{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); font-weight:500;}
.beat.head .b-name{color:var(--faint);}

/* chips (industries / protocols) */
.chips{display:flex; flex-wrap:wrap; gap:10px;}
.chip{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ink); border:1px solid var(--line); background:var(--paper); border-radius:8px; padding:9px 14px; box-shadow:var(--shadow-sm);}
.chip .k{color:var(--amber-2); margin-right:8px;}
.chip.proto{background:var(--paper-2);}

/* trust list */
.trust{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
.trust .t{display:flex; gap:14px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-sm);}
.trust .t .ic{width:34px;height:34px;border-radius:9px;background:var(--amber-soft);color:var(--amber-2);display:grid;place-items:center;flex:none;}
.trust .t h4{font-size:15.5px; margin-bottom:5px;}
.trust .t p{font-size:13.5px; color:var(--muted);}

/* callout */
.callout{background:linear-gradient(135deg,#0d1218,#161d26); color:#e8edf2; border-radius:var(--radius); padding:clamp(28px,4vw,44px); box-shadow:var(--shadow-lg);}
.callout .big{font-size:clamp(22px,3vw,32px); font-weight:600; letter-spacing:-0.02em; color:#fff; max-width:20ch; margin-bottom:14px;}
.callout .big .amber{color:var(--amber);}
.callout p{color:#aeb8c4; max-width:60ch; font-size:15.5px;}

/* about */
.about-hero{background:linear-gradient(180deg,#fff,var(--paper-2)); border-bottom:1px solid var(--line);}
.about-hero .wrap{padding:clamp(64px,10vw,120px) 0;}
.about-hero h1{font-size:clamp(34px,5.4vw,60px); letter-spacing:-0.03em; max-width:16ch; margin-bottom:22px;}
.about-hero h1 .amber{color:var(--amber-2);}
.about-hero p{font-size:clamp(17px,1.8vw,20px); color:var(--ink-2); max-width:600px;}
.principles{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.principles .p{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm);}
.principles .p .n{font-family:'IBM Plex Mono',monospace; color:var(--amber-2); font-size:13px; margin-bottom:12px;}
.principles .p h4{font-size:16px; margin-bottom:8px;}
.principles .p p{font-size:14px; color:var(--muted);}

/* ============================================================
   CTA strip
   ============================================================ */
.cta{background:var(--paper-2);}
.cta .box{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-md);
  padding:clamp(32px,5vw,56px); display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;}
.cta .box h2{font-size:clamp(24px,3vw,34px); margin-bottom:8px;}
.cta .box p{color:var(--muted); font-size:16px;}

/* ============================================================
   Footer
   ============================================================ */
footer.site{background:var(--paper); border-top:1px solid var(--line); padding:48px 0 40px;}
footer.site .row{display:flex; justify-content:space-between; gap:28px; flex-wrap:wrap;}
footer.site .brand{margin-bottom:12px;}
footer.site .legal{font-size:13.5px; color:var(--muted); max-width:340px;}
footer.site .links a{display:block; font-size:14px; color:var(--ink-2); margin-bottom:8px;}
footer.site .links a:hover{color:var(--amber-2);}
footer.site .fineprint{margin-top:30px; padding-top:20px; border-top:1px solid var(--line); font-size:12px; color:var(--faint); font-family:'IBM Plex Mono',monospace;}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;}
  .cards, .oee, .principles{grid-template-columns:1fr;}
  .shift-grid, .cases{grid-template-columns:1fr;}
  .trust{grid-template-columns:1fr;}
  .beat{grid-template-columns:1fr;}
  .beat .b-tech, .beat .b-plain{border-left:none; border-top:1px solid var(--line);}
  .beat.head{display:none;}
  .nav-cta{display:none;}
  nav.main a{padding:6px 9px; font-size:13px;}
  .brand small{display:none;}
}
@media (max-width:400px){
  nav.main a{padding:5px 7px; font-size:12px;}
}
@media (max-width:560px){
  .monitor .readout{grid-template-columns:1fr 1fr;}
  .crow{grid-template-columns:1fr; gap:4px;}
  .cta .box{flex-direction:column; align-items:flex-start;}
}