:root{
  --bg:#f3f6f9;--bg2:#e6edf4;--ink:#10213c;--soft:#4b5b73;--line:#c5d1df;
  --a:#2a62d6;--b:#e8a317;--c:#e8452b;--card:#fff;--bar:64px;
  --head:'Space Grotesk',system-ui,sans-serif;--body:'IBM Plex Sans',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 12px);-webkit-text-size-adjust:100%}
body{font-family:var(--body);font-size:18px;line-height:1.6;color:var(--ink);overflow-x:hidden;
  background-color:var(--bg);
  background-image:linear-gradient(rgba(16,33,60,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(16,33,60,.06) 1px,transparent 1px);
  background-size:28px 28px}
img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--head);line-height:1.05;font-weight:700}
:focus-visible{outline:3px solid var(--c);outline-offset:3px}
.ca{color:var(--a)}.cb{color:#a96f00}.cc{color:var(--c)}

#top{position:fixed;inset:0 0 auto 0;z-index:20;min-height:var(--bar);background:var(--bg);border-bottom:2px solid var(--ink);display:flex;align-items:center;gap:24px;padding:0 max(20px,calc((100vw - 1120px)/2))}
.brand{font:700 22px var(--head);color:var(--ink);text-decoration:none}
#menu{display:flex;gap:4px;flex-wrap:wrap}
#menu a{font:500 14px var(--mono);color:var(--soft);text-decoration:none;padding:8px 10px;border-bottom:3px solid transparent}
#menu a i{font-style:normal;color:var(--c);margin-right:3px}
#menu a:hover{color:var(--ink)}
#menu a.on{color:var(--ink);border-bottom-color:var(--c)}

section{padding:calc(var(--bar) + 56px) max(24px,calc((100vw - 1120px)/2)) 84px}
.tint{background-color:var(--bg2)}
.col{max-width:1120px;margin:0 auto}
.col>*+*{margin-top:22px}
.part-no{font:500 15px var(--mono);color:var(--c);letter-spacing:.12em}
.part-no::before{content:"PLANȘA ";color:var(--soft)}
h2{font-size:clamp(36px,4.8vw,58px);max-width:16ch}
h3{font-size:24px;margin-bottom:6px}
.lead{max-width:60ch;font-size:20px}
.two{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:start}
.two>div>*+*{margin-top:20px}
.col.two>div>.part-no+h2{margin-top:10px}
.lab{margin-top:30px}
.note{max-width:56ch;color:var(--soft);font-size:16px;border-left:3px solid var(--c);padding-left:14px}
.go,.btn{display:inline-block;font:700 18px var(--head);color:#fff;background:var(--ink);padding:12px 24px;text-decoration:none;border:0;cursor:pointer;margin-top:10px;transition:background .2s,transform .2s}
.go:hover,.btn:hover{background:var(--c);transform:translateY(-2px)}
.pn{display:none}.pn.on{display:block}.pn p+p{margin-top:12px}
.beat{border-top:2px solid var(--ink);padding-top:12px}
.beat+.beat{margin-top:22px}

.plate{margin:0;background:var(--card);border:2px solid var(--ink);padding:10px;box-shadow:8px 8px 0 var(--ink)}
.plate img{width:100%}
.plate figcaption{font:400 13px var(--mono);color:var(--soft);padding-top:8px}
.plates{display:grid;gap:34px}
.two>.plate,.two>.plates{position:sticky;top:calc(var(--bar) + 28px)}

.cover{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.7fr);gap:64px;align-items:center;min-height:100svh;padding-bottom:60px}
.cover .in>*+*{margin-top:18px}
.tag{font:500 15px var(--mono);color:var(--soft);letter-spacing:.08em;text-transform:uppercase}
.cover h1{font-size:clamp(52px,7.4vw,104px);letter-spacing:-.02em}
.sub{font-size:clamp(20px,2.2vw,26px);color:var(--soft);max-width:30ch}
.formula{font:700 clamp(40px,5vw,64px) var(--head);margin-top:26px}
.cover .plate img{max-height:62vh;object-fit:cover;object-position:50% 35%}

.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tabs button{font:500 15px var(--mono);background:var(--card);color:var(--ink);border:2px solid var(--ink);padding:9px 16px;cursor:pointer;transition:background .2s,color .2s}
.tabs button:hover{background:var(--bg2)}
.tabs button.on{background:var(--ink);color:#fff}

.widget{background:var(--card);border:2px solid var(--ink);padding:16px;box-shadow:8px 8px 0 var(--ink)}
.widget svg{width:100%;height:auto;display:block;max-height:420px}
.lb{font:700 20px var(--head)}
.sl{display:grid;grid-template-columns:auto 1fr;gap:10px 14px;align-items:center;margin-top:12px}
.sl label{font:500 16px var(--mono)}
.sl label output{display:inline-block;min-width:2ch}
.sl input[type=range]{width:100%;accent-color:var(--c);height:28px}
#proof .sl{grid-template-columns:auto 1fr}
.eq{font:500 17px var(--mono);margin-top:12px;min-height:3.2em}
.eq b{color:var(--c)}

.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:30px}
.fc{perspective:900px;background:none;border:0;cursor:pointer;height:190px;font:inherit;color:inherit;text-align:left}
.fi{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s}
.fc.on .fi{transform:rotateY(180deg)}
.f,.b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:2px solid var(--ink);padding:16px;display:flex;flex-direction:column;justify-content:center}
.f{background:var(--card);font:700 22px var(--head);box-shadow:5px 5px 0 var(--ink);text-align:center;align-items:center}
.b{background:var(--ink);color:#fff;transform:rotateY(180deg);font-size:15px;line-height:1.4}
.b b{display:block;font:700 18px var(--head);color:#ffb59f;margin-bottom:6px}
.fc:hover .f{background:var(--bg2)}

.end{min-height:70svh;display:grid;place-items:center;text-align:center;background:var(--ink);color:#fff;padding:80px 24px}
.end h2{max-width:none;font-size:clamp(34px,5.5vw,70px)}
.end .go{background:var(--c)}
.end .go:hover{background:#fff;color:var(--ink)}
.end .in>*+*{margin-top:26px}

.js .rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease var(--d,0s),transform .7s ease var(--d,0s)}
.js .rv.vis{opacity:1;transform:none}

@media (max-width:900px){
  :root{--bar:96px}
  body{font-size:17px}
  #top{flex-direction:column;align-items:flex-start;gap:0;padding:6px 14px}
  #menu{gap:0}
  #menu a{font-size:12px;padding:5px 6px}
  .brand{font-size:18px}
  section{padding-top:calc(var(--bar) + 36px);padding-bottom:60px}
  .two,.cover{grid-template-columns:minmax(0,1fr);gap:34px}
  .two>.plate,.two>.plates{position:static}
  .cover{min-height:auto}
  .cover .plate img{max-height:380px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .fc{height:200px}
  .f{font-size:19px}
  .b{font-size:14px;padding:12px}
  .lead{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .fi,.go,.btn{transition:none}
}