/* Alles hier ist auf .replicar-page gescoped (siehe index.html), damit nichts
   von der umgebenden TYPO3-Seite (Hauptnav, Footer, andere Content-Elemente)
   von den Resets/Custom-Properties betroffen ist. */
@font-face{
  font-family:'Source Sans 3';font-style:normal;font-weight:200 900;font-display:swap;
  src:url(fonts/sourcesans3-var.woff2) format('woff2');
}
.replicar-page{
  --bg:#0a0f12;
  --bg2:#0d1519;
  --panel:#0f1a20;
  --line:#1c2e37;
  --petrol:#006c90;
  --petrol-dark:#005475;
  --petrol-light:#287F9A;
  --cyan:#00e3ec;
  --txt:#e8eef1;
  --txt-soft:#9fb1ba;
  --txt-mute:#7c8d96;
  --accent:#00e3ec;
  --sans:'Source Sans 3',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;

  margin:0;padding:0;box-sizing:border-box;
  font-family:var(--sans);
  background:var(--bg);
  color:var(--txt);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.replicar-page *{margin:0;padding:0;box-sizing:border-box}
.replicar-page a{color:inherit}
.replicar-page :focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.replicar-page img{max-width:100%;display:block}

/* ---------- shared ---------- */
.replicar-page section{position:relative}
.replicar-page .inner{max-width:1160px;margin:0 auto;padding:0 24px}
.replicar-page .eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--accent);
  display:flex;align-items:center;gap:12px;margin-bottom:16px;
}
.replicar-page .eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}
.replicar-page h2{font-size:clamp(30px,4.2vw,52px);font-weight:900;letter-spacing:-.02em;line-height:1.04;max-width:22ch}
.replicar-page .lead{margin-top:14px;font-size:clamp(15px,1.4vw,17.5px);line-height:1.6;color:var(--txt-soft);max-width:64ch}
/* hidden only when the animation engine actually took over (progressive enhancement) */
.replicar-page.anim [data-reveal]{opacity:0}

/* ---------- hero ---------- */
.replicar-page .hero{min-height:100vh;min-height:100dvh;display:flex;align-items:center;padding:120px 0 80px;background:var(--bg)}
.replicar-page #array-canvas{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 40%,rgba(0,0,0,.3) 58%,#000 76%);
  mask-image:linear-gradient(90deg,transparent 40%,rgba(0,0,0,.3) 58%,#000 76%);
}
.replicar-page .hero .inner{position:relative;z-index:1}
.replicar-page .hero .eyebrow{max-width:640px}
.replicar-page .wordmark{
  font-size:clamp(56px,10vw,132px);font-weight:900;letter-spacing:.01em;line-height:.95;
  color:var(--txt);
  text-shadow:0 0 42px rgba(0,227,236,.24);
}
.replicar-page .wordmark .r{display:inline-block;transform:scaleX(-1)}
.replicar-page .claim{
  margin-top:18px;font-size:clamp(20px,2.6vw,30px);font-weight:600;letter-spacing:-.01em;
  color:var(--txt);max-width:26ch;line-height:1.25;
}
.replicar-page .claim em{font-style:normal;color:var(--accent)}
.replicar-page .hero .sub{margin-top:14px;font-size:clamp(14.5px,1.3vw,16.5px);line-height:1.6;color:var(--txt-soft);max-width:56ch}
.replicar-page .stats{
  margin-top:44px;display:flex;flex-wrap:wrap;gap:0;
  border:1px solid var(--line);background:rgba(13,21,25,.72);
}
.replicar-page .stat{padding:18px 26px;border-right:1px solid var(--line);min-width:130px}
.replicar-page .stat:last-child{border-right:0}
.replicar-page .stat .v{font-size:clamp(24px,2.6vw,34px);font-weight:900;color:var(--txt);font-variant-numeric:tabular-nums}
.replicar-page .stat .v .u{color:var(--accent)}
.replicar-page .stat .l{margin-top:2px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--txt-mute)}
.replicar-page .scrollhint{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:1;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--txt-mute);
}
.replicar-page .scrollhint::after{content:"▾";display:block;text-align:center;color:var(--accent);animation:replicar-nudge 1.6s ease-in-out infinite}
@keyframes replicar-nudge{50%{transform:translateY(4px)}}
.replicar-page.reduced .scrollhint::after{animation:none}
/* screenshot mode: natural heights so the whole page fits one capture */
.replicar-page.static .hero{min-height:auto;padding:150px 0 90px}
.replicar-page.static .scrollhint{display:none}

/* ---------- hardware ---------- */
.replicar-page .hardware{padding:130px 0 40px}
.replicar-page .demos{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:26px;margin-top:52px}
.replicar-page .demo{border:1px solid var(--line);background:var(--panel)}
.replicar-page .demo .ph{aspect-ratio:16/11;overflow:hidden;background:#0c1216;display:flex;align-items:center;justify-content:center}
.replicar-page .demo .ph img{width:100%;height:100%;object-fit:cover}
.replicar-page .demo .body{padding:22px 24px 26px}
.replicar-page .demo .tag{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--accent);margin-bottom:8px}
.replicar-page .demo h3{font-size:21px;font-weight:700;letter-spacing:-.01em}
.replicar-page .demo ul{margin-top:12px;list-style:none}
.replicar-page .demo li{
  font-size:14.5px;line-height:1.55;color:var(--txt-soft);
  padding:7px 0 7px 18px;border-top:1px solid var(--line);position:relative;
}
.replicar-page .demo li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:7px;background:var(--petrol-light)}
.replicar-page .hwstats{display:flex;flex-wrap:wrap;gap:34px;margin-top:46px;padding:26px 30px;border:1px solid var(--line);background:var(--bg2)}
.replicar-page .hwstat .v{font-size:30px;font-weight:900;color:var(--txt);font-variant-numeric:tabular-nums}
.replicar-page .hwstat .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--txt-mute);margin-top:2px}

/* ---------- config profiles ---------- */
.replicar-page .profiles{padding:130px 0 40px}
.replicar-page .profgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:26px;margin-top:52px}
.replicar-page .prof{border:1px solid var(--line);background:var(--panel);padding:24px 26px 28px}
.replicar-page .prof.hot{border-color:var(--petrol-light);box-shadow:0 0 60px rgba(0,108,144,.10) inset}
.replicar-page .prof .tag{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--accent);margin-bottom:8px}
.replicar-page .prof h3{font-size:21px;font-weight:700;letter-spacing:-.01em}
.replicar-page .spec{margin-top:14px}
.replicar-page .spec .row{display:flex;justify-content:space-between;gap:18px;padding:8px 0;border-top:1px solid var(--line)}
.replicar-page .spec dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--txt-mute);padding-top:3px;white-space:nowrap}
.replicar-page .spec dd{font-size:14.5px;color:var(--txt);text-align:right;font-variant-numeric:tabular-nums}
.replicar-page .profnote{margin-top:24px;font-size:14.5px;line-height:1.6;color:var(--txt-soft);max-width:76ch}
.replicar-page .presets{margin-top:46px;padding:24px 30px 26px;border:1px solid var(--line);background:var(--bg2)}
.replicar-page .presets .tag{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--accent);margin-bottom:16px}
.replicar-page .presets .chips{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- data path ---------- */
.replicar-page .datapath{padding:130px 0 60px}
.replicar-page .datapath .inner{max-width:1400px}
.replicar-page .dp-wrap{margin-top:52px;border:1px solid var(--line);background:var(--panel);padding:26px 12px;overflow-x:auto;position:relative}
@media (max-width:1400px){
  .replicar-page .dp-wrap::after{content:"";position:sticky;display:block;left:100%;margin-top:-100%;height:100%;width:56px;background:linear-gradient(90deg,transparent,var(--panel));pointer-events:none}
  .replicar-page .dp-wrap::before{content:"SCROLL →";position:absolute;right:14px;top:8px;z-index:1;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--txt-mute)}
}
.replicar-page .dp-wrap svg{display:block;min-width:1320px;width:100%;height:auto}
.replicar-page .dp-node{fill:var(--bg2);stroke:var(--petrol-light);stroke-width:1}
.replicar-page .dp-board{fill:#0f1a20;stroke:var(--petrol);stroke-width:1.2}
.replicar-page .dp-chipbox{fill:#0c1216;stroke:var(--petrol-light);stroke-width:1}
.replicar-page .dp-cas{fill:#1a0f0e;stroke:#d4403a;stroke-width:1.2}
.replicar-page .dp-ser{fill:url(#dpx-ser);stroke:var(--petrol-dark)}
.replicar-page .dp-jet{fill:#0c1216;stroke:#4c9e4c;stroke-width:1.6}
.replicar-page .dp-dashbox{fill:none;stroke:var(--petrol-light);stroke-width:1;stroke-dasharray:5 4;opacity:.7}
.replicar-page .dp-hd{font-family:var(--mono);font-size:11px;letter-spacing:.16em;font-weight:600;fill:var(--petrol-light)}
.replicar-page .dp-label{font-family:var(--mono);font-size:11px;letter-spacing:.06em;fill:var(--txt)}
.replicar-page .dp-t{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;fill:var(--txt)}
.replicar-page .dp-sub{font-family:var(--mono);font-size:9px;letter-spacing:.05em;fill:var(--txt-mute)}
.replicar-page .dp-cyan{fill:var(--cyan)} .replicar-page .dp-red{fill:#e08a86} .replicar-page .dp-green{fill:#5fbf5f} .replicar-page .dp-soft{fill:var(--txt-soft)}
.replicar-page .dp-lo{stroke:#d4403a;fill:none;stroke-width:1.2;opacity:.85}
.replicar-page .dp-lo.alt{stroke-dasharray:4 3;opacity:.6}
.replicar-page .dp-arrow{stroke:var(--petrol-light);fill:none;stroke-width:1.2}
.replicar-page .dp-link{stroke:var(--cyan);stroke-width:1.8;fill:none;opacity:.8}
.replicar-page .dp-cphy{stroke:var(--petrol-light);fill:none;stroke-width:1.3}
.replicar-page .dp-pulse{fill:var(--cyan)}
.replicar-page .dp-meta{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;fill:var(--cyan)}
.replicar-page .dpcallouts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:22px}
.replicar-page .callout{border:1px solid var(--line);background:var(--panel);padding:16px 18px;font-size:14px;line-height:1.55;color:var(--txt-soft)}
.replicar-page .callout b{display:block;color:var(--txt);margin-bottom:6px}
.replicar-page .dpstats{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.replicar-page .chip{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--txt-soft);
  border:1px solid var(--line);padding:8px 14px;background:var(--bg2);
}
.replicar-page .chip b{color:var(--accent);font-weight:600}

/* ---------- pipeline ---------- */
.replicar-page .pipeline{padding:130px 0 40px}
.replicar-page .stage{
  display:grid;grid-template-columns:minmax(280px,5fr) minmax(320px,6fr);
  gap:44px;align-items:center;
  padding:56px 0;border-top:1px solid var(--line);
}
.replicar-page .stage:first-of-type{border-top:0}
.replicar-page .stage .num{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--accent);
  display:flex;align-items:center;gap:12px;margin-bottom:12px;
}
.replicar-page .stage .num::after{content:"";width:64px;height:1px;background:var(--line)}
.replicar-page .stage h3{font-size:clamp(22px,2.4vw,30px);font-weight:800;letter-spacing:-.015em}
.replicar-page .stage p{margin-top:10px;font-size:15.5px;line-height:1.6;color:var(--txt-soft);max-width:44ch}
.replicar-page .viz{
  border:1px solid var(--line);background:var(--panel);
  box-shadow:0 0 60px rgba(0,108,144,.10) inset;
}
.replicar-page .viz .head{
  display:flex;justify-content:space-between;align-items:center;
  padding:9px 14px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--txt-mute);
}
.replicar-page .viz .head .dotlive{width:7px;height:7px;background:var(--cyan);border-radius:50%}
.replicar-page.reduced .viz .head .dotlive{background:var(--txt-mute)}
.replicar-page .viz canvas{display:block;width:100%;height:250px}
@media (max-width:860px){
  .replicar-page .stage{grid-template-columns:1fr;gap:26px;padding:44px 0}
}
.replicar-page .modband{margin-top:26px;padding:26px 30px;border:1px solid var(--petrol-light);background:var(--bg2);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px}
.replicar-page .modband h3{font-size:20px;font-weight:800;letter-spacing:-.01em}
.replicar-page .modband p{margin-top:6px;font-size:14.5px;color:var(--txt-soft);max-width:60ch;line-height:1.55}
.replicar-page .modlinks{display:flex;flex-direction:column;gap:10px}
.replicar-page .modlinks a{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--accent);text-decoration:none;border:1px solid var(--line);padding:10px 16px;background:var(--panel)}
.replicar-page .modlinks a:hover{border-color:var(--accent)}

/* ---------- platform ---------- */
.replicar-page .platform{padding:130px 0 40px}
.replicar-page .bench{margin-top:52px;border:1px solid var(--line);background:var(--panel);padding:14px}
.replicar-page .bench img{width:100%;border:1px solid var(--line)}
.replicar-page .bench .cap{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--txt-mute);padding:12px 6px 4px}
.replicar-page .platstats{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);background:var(--bg2);margin-top:26px}
.replicar-page .platstats .stat{flex:1;min-width:150px}
.replicar-page .methods{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

/* ---------- about / cta ---------- */
.replicar-page .about{padding:130px 0 90px}
.replicar-page .about .txt{margin-top:26px;font-size:16px;line-height:1.7;color:var(--txt-soft);max-width:76ch}
.replicar-page .cta{
  margin-top:56px;padding:34px 36px;
  background:var(--petrol);border-bottom:3px solid var(--cyan);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;
}
.replicar-page .cta h3{font-size:clamp(22px,2.6vw,30px);font-weight:800;color:#fff;letter-spacing:-.015em}
.replicar-page .cta p{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;color:rgba(255,255,255,.9);margin-top:6px}
.replicar-page .btn{
  display:inline-block;background:#fff;color:var(--petrol);text-decoration:none;
  font-weight:700;font-size:16px;padding:14px 30px;white-space:nowrap;
}
.replicar-page .btn:hover{background:var(--cyan);color:#04333f}
.replicar-page footer{border-top:1px solid var(--line)}
.replicar-page footer .inner{
  padding:26px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
}
.replicar-page footer img{height:26px;opacity:.85}
.replicar-page footer span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--txt-mute)}