*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
:root{
  --neon:#00fff7;
  --neon-dim:#0bbab3;
  --neon-orange:#ff7a00;
  --neon-red:#ff2244;
  --neon-green:#33ff66;
  --bg:#04070d;
  --bg-panel:rgba(0,255,247,0.03);
  --grid:rgba(0,255,247,0.03);
  --text:#c8fff9;
  --text-dim:#5a8a87;
}
body{
  font-family:'Courier New','Consolas',monospace;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  position:relative;
}
body::before{
  content:'';
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:48px 48px;
  z-index:0;
  pointer-events:none;
}
.wrapper{
  position:relative;
  z-index:2;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:40px 20px;
}
/* ===== HERO ===== */
.hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px;
  max-width:780px;
  width:100%;
  margin-top:4vh;
  text-align:center;
}
.profile-frame{
  position:relative;
  width:170px;
  height:170px;
  flex-shrink:0;
}
.profile-frame::before{
  content:'';
  position:absolute;
  inset:-6px;
  border:2px solid var(--neon);
  clip-path:polygon(
    0 18px,18px 0,calc(100% - 18px) 0,100% 18px,
    100% calc(100% - 18px),calc(100% - 18px) 100%,
    18px 100%,0 calc(100% - 18px)
  );
  box-shadow:0 0 12px var(--neon);
}
.profile-frame::after{
  content:'';
  position:absolute;
  top:-6px;left:-6px;
  width:20px;height:20px;
  border-top:3px solid var(--neon);
  border-left:3px solid var(--neon);
}
.profile-svg{
  width:100%;
  height:100%;
  display:block;
  clip-path:polygon(
    0 18px,18px 0,calc(100% - 18px) 0,100% 18px,
    100% calc(100% - 18px),calc(100% - 18px) 100%,
    18px 100%,0 calc(100% - 18px)
  );
  filter:drop-shadow(0 0 3px rgba(0,255,247,0.12));
}
.name-title{
  font-size:2rem;
  font-weight:bold;
  letter-spacing:6px;
  text-transform:uppercase;
  color:var(--neon);
  text-shadow:0 0 10px var(--neon);
  position:relative;
  padding-bottom:10px;
}
.name-title::after{
  content:'';
  position:absolute;
  bottom:0;left:50%;
  transform:translateX(-50%);
  width:60%;height:1px;
  background:linear-gradient(90deg, transparent, var(--neon), transparent);
}
.tagline{
  font-size:0.8rem;
  letter-spacing:3px;
  color:var(--text-dim);
  text-transform:uppercase;
  margin-top:8px;
  line-height:2;
}
.tagline .sec-badge{
  color:var(--neon-red);
  text-shadow:0 0 5px var(--neon-red);
}
.tagline .prof{
  color:var(--neon);
  text-shadow:0 0 5px rgba(0,255,247,0.3);
}
.tagline .foss{
  color:var(--neon-green);
  text-shadow:0 0 5px rgba(51,255,102,0.3);
}
/* ===== INTRO ===== */
.intro{
  background:var(--bg-panel);
  border:1px solid rgba(0,255,247,0.15);
  padding:26px 30px;
  font-size:0.95rem;
  line-height:1.8;
  color:var(--text);
  position:relative;
  text-align:left;
}
.intro::before,
.intro::after{
  content:'';
  position:absolute;
  width:12px;height:12px;
}
.intro::before{
  top:-1px;left:-1px;
  border-top:2px solid var(--neon);
  border-left:2px solid var(--neon);
}
.intro::after{
  bottom:-1px;right:-1px;
  border-bottom:2px solid var(--neon);
  border-right:2px solid var(--neon);
}
.hl-sec{
  color:var(--neon-red);
  font-weight:bold;
}
.typing-cursor{
  display:inline-block;
  width:8px;
  background:var(--neon);
  margin-left:2px;
  animation:blink 1s step-end infinite;
}
@keyframes blink{
  0%,100%{opacity:1}
  50%{opacity:0}
}
/* ===== BUTTONS ===== */
.links{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:6px;
}
.cyber-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:16px 44px;
  background:transparent;
  border:none;
  color:var(--neon);
  font-family:inherit;
  font-size:0.85rem;
  letter-spacing:4px;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  overflow:hidden;
  transition:color 0.2s;
  clip-path:polygon(
    0 0,calc(100% - 16px) 0,100% 16px,
    100% 100%,16px 100%,0 calc(100% - 16px)
  );
}
.cyber-btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,255,247,0.06);
  border:1.5px solid var(--neon);
  clip-path:inherit;
  box-shadow:0 0 10px rgba(0,255,247,0.2);
  transition:background 0.25s, box-shadow 0.25s;
}
.cyber-btn::after{
  content:'';
  position:absolute;
  bottom:5px;
  left:25%;
  right:25%;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--neon), transparent);
  opacity:0.25;
  z-index:1;
}
.cyber-btn:hover{color:#fff}
.cyber-btn:hover::before{
  background:rgba(0,255,247,0.12);
  box-shadow:0 0 18px rgba(0,255,247,0.4);
}
.cyber-btn:hover::after{opacity:0.6}
.cyber-btn span{position:relative;z-index:2}
.cyber-btn .arrow{
  font-size:0.75rem;
  display:inline-block;
  transition:transform 0.2s;
}
.cyber-btn:hover .arrow{transform:translateX(4px)}
.cyber-btn.orange{color:var(--neon-orange)}
.cyber-btn.orange::before{
  border-color:var(--neon-orange);
  box-shadow:0 0 10px rgba(255,122,0,0.2);
}
.cyber-btn.orange::after{
  background:linear-gradient(90deg, transparent, var(--neon-orange), transparent);
}
.cyber-btn.orange:hover::before{box-shadow:0 0 18px rgba(255,122,0,0.4)}
/* ===== DIVIDER ===== */
.divider{
  width:60%;
  max-width:400px;
  height:1px;
  margin:32px auto;
  background:linear-gradient(90deg, transparent, rgba(0,255,247,0.4), transparent);
  position:relative;
}
.divider::before{
  content:'\25C6';
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  color:var(--neon);
  font-size:10px;
  background:var(--bg);
  padding:0 10px;
}
/* ===== SECTION TITLES ===== */
.section-title{
  font-size:0.9rem;
  letter-spacing:6px;
  color:var(--neon);
  text-transform:uppercase;
  margin-bottom:8px;
  text-align:center;
  display:inline-block;
}
.section-title::before,
.section-title::after{
  color:var(--text-dim);
  margin:0 8px;
}
.sub-title{
  font-size:0.68rem;
  letter-spacing:3px;
  color:var(--text-dim);
  text-transform:uppercase;
  margin:16px 0 14px;
  text-align:center;
}
.sub-title.first{margin-top:0}
/* ===== TAGS ===== */
.tags-section{
  max-width:780px;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  width:100%;
}
.tag-item{
  padding:9px 22px;
  border:1px solid rgba(0,255,247,0.2);
  background:var(--bg-panel);
  font-size:0.78rem;
  letter-spacing:2px;
  color:var(--text);
  clip-path:polygon(
    0 0,calc(100% - 10px) 0,100% 10px,
    100% 100%,10px 100%,0 calc(100% - 10px)
  );
  transition:border-color 0.2s, color 0.2s;
}
.tag-item:hover{
  border-color:var(--neon);
  color:var(--neon);
}
.tag-item .dot{
  color:var(--neon);
  margin-right:5px;
}
/* ===== INFRA CARDS ===== */
.infra-section{
  max-width:780px;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.infra-grid-betrieb{
  display:grid;
  grid-template-columns:repeat(4, minmax(200px, 1fr));
  gap:12px;
  width:100%;
  margin:0 auto;
}
.infra-grid-avail{
  display:grid;
  grid-template-columns:repeat(4, minmax(200px, 1fr));
  gap:12px;
  width:100%;
}
.infra-grid-quad{
  display:grid;
  grid-template-columns:repeat(4, minmax(200px, 1fr));
  gap:12px;
  width:100%;
  margin:0 auto;
}
.infra-card{
  background:var(--bg-panel);
  border:1px solid rgba(0,255,247,0.12);
  padding:18px 16px;
  text-align:center;
  transition:border-color 0.2s;
}
.infra-card:hover{
  border-color:var(--neon);
}
.infra-card .icon{
  font-size:1.1rem;
  margin-bottom:8px;
  color:var(--neon);
}
.infra-card .name{
  font-size:0.78rem;
  letter-spacing:1px;
  color:var(--text);
  margin-bottom:8px;
  text-transform:uppercase;
  line-height:1.4;
  min-height:2.6em;
  display:flex;
  align-items:center;
  justify-content:center;
}
.infra-card .desc{
  font-size:0.68rem;
  color:var(--text-dim);
  line-height:1.6;
}
.infra-card .desc strong{
  color:var(--neon-dim);
  font-weight:bold;
}
/* ===== PYRAMID OF PAIN ===== */
.pop-banner{
  max-width:780px;
  width:100%;
  border:1px solid rgba(255,34,68,0.18);
  padding:24px 28px;
  position:relative;
  background:linear-gradient(135deg, rgba(255,34,68,0.03), rgba(0,255,247,0.02));
}
.pop-banner::before{
  content:'';
  position:absolute;
  top:0;left:0;
  width:3px;height:100%;
  background:var(--neon-red);
}
.pop-header{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
}
.pop-icon{
  font-size:1.2rem;
  color:var(--neon-red);
}
.pop-title{
  font-size:0.85rem;
  letter-spacing:4px;
  color:var(--neon-red);
  text-transform:uppercase;
}
.pop-sub{
  font-size:0.68rem;
  color:var(--text-dim);
  letter-spacing:2px;
  margin-bottom:16px;
  padding-left:28px;
}
/* ===== COLLAPSIBLE ===== */
.pop-collapse{
  margin-bottom:16px;
}
.pop-collapse > summary{
  font-size:0.68rem;
  letter-spacing:3px;
  color:var(--neon-dim);
  cursor:pointer;
  text-transform:uppercase;
  padding:10px 16px;
  border:1px solid rgba(11,186,179,0.15);
  background:rgba(0,0,0,0.25);
  transition:border-color 0.2s, color 0.2s;
  display:inline-block;
  list-style:none;
  user-select:none;
}
.pop-collapse > summary::-webkit-details-marker{display:none}
.pop-collapse > summary::before{
  content:'\25B8 ';
  color:var(--neon-dim);
  font-size:0.7rem;
}
.pop-collapse[open] > summary::before{
  content:'\25BE ';
}
.pop-collapse > summary:hover{
  border-color:var(--neon-dim);
  color:var(--neon);
}
.pop-collapse[open] > summary{
  margin-bottom:14px;
  border-color:rgba(11,186,179,0.25);
}
.pop-philosophy{
  font-size:0.74rem;
  line-height:1.8;
  color:var(--text-dim);
  padding-left:28px;
  border-left:1px solid rgba(255,34,68,0.1);
}
.pop-philosophy .hl-sec{color:var(--neon-red);font-weight:bold}
.pop-philosophy .hl-green{color:var(--neon-green);font-weight:bold}
.pop-philosophy .hl-neon{color:var(--neon);font-weight:bold}
.pop-principles{
  list-style:none;
  margin-top:12px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 16px;
}
.pop-principles li{
  font-size:0.68rem;
  color:var(--text-dim);
  padding-left:14px;
  position:relative;
  line-height:1.5;
}
.pop-principles li::before{
  content:'\25B8';
  position:absolute;
  left:0;
  color:var(--neon-green);
}
.pop-principles strong{color:var(--neon);font-weight:bold}
.pop-pyramid{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  width:100%;
  margin-bottom:16px;
}
.pop-level{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.66rem;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#fff;
  text-align:center;
  height:42px;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pop-l6{width:clamp(90px,28%,130px);clip-path:polygon(18% 0,82% 0,100% 100%,0% 100%);background:var(--neon-red)}
.pop-l5{width:clamp(130px,40%,190px);clip-path:polygon(12% 0,88% 0,100% 100%,0% 100%);background:#ff5533}
.pop-l4{width:clamp(170px,52%,250px);clip-path:polygon(9% 0,91% 0,100% 100%,0% 100%);background:var(--neon-orange)}
.pop-l3{width:clamp(210px,64%,310px);clip-path:polygon(8% 0,92% 0,100% 100%,0% 100%);background:#ccaa22}
.pop-l2{width:clamp(250px,76%,370px);clip-path:polygon(7% 0,93% 0,100% 100%,0% 100%);background:var(--neon-dim)}
.pop-l1{width:clamp(290px,88%,430px);clip-path:polygon(6% 0,94% 0,100% 100%,0% 100%);background:#2a6a67}
.pop-indicators{
  display:flex;
  justify-content:space-between;
  width:100%;
  max-width:430px;
  margin:0 auto 18px;
}
.pop-ind{
  font-size:0.55rem;
  letter-spacing:1px;
  color:var(--text-dim);
  text-transform:uppercase;
}
.pop-ind.top{color:var(--neon-red)}
.pop-details{display:flex;flex-direction:column;gap:4px}
.pop-detail{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:10px 14px;
  border-left:3px solid;
  background:rgba(0,0,0,0.25);
}
.pop-detail-content{flex:1;min-width:0}
.pop-detail-name{
  font-size:0.72rem;
  font-weight:bold;
  letter-spacing:1px;
  text-transform:uppercase;
  margin-bottom:2px;
}
.pop-detail-desc{
  font-size:0.64rem;
  color:var(--text-dim);
  line-height:1.5;
}
.pop-detail.s6{border-color:var(--neon-red)}.pop-detail.s6 .pop-detail-name{color:var(--neon-red)}
.pop-detail.s5{border-color:#ff5533}.pop-detail.s5 .pop-detail-name{color:#ff5533}
.pop-detail.s4{border-color:var(--neon-orange)}.pop-detail.s4 .pop-detail-name{color:var(--neon-orange)}
.pop-detail.s3{border-color:#ccaa22}.pop-detail.s3 .pop-detail-name{color:#ccaa22}
.pop-detail.s2{border-color:var(--neon-dim)}.pop-detail.s2 .pop-detail-name{color:var(--neon-dim)}
.pop-detail.s1{border-color:#2a6a67}.pop-detail.s1 .pop-detail-name{color:#2a6a67}
/* ===== FOOTER ===== */
footer{
  position:relative;
  z-index:2;
  width:100%;
  padding:30px 20px 24px;
  text-align:center;
  border-top:1px solid rgba(0,255,247,0.1);
  background:rgba(0,0,0,0.5);
}
footer .footer-text{
  font-size:0.7rem;
  letter-spacing:3px;
  color:var(--text-dim);
  text-transform:uppercase;
}
footer .footer-text .accent{color:var(--neon)}
footer .footer-name{
  margin-top:12px;
  font-size:0.75rem;
  letter-spacing:4px;
  color:var(--text-dim);
}
footer .footer-name .year{color:var(--neon)}
footer .footer-host{
  margin-top:8px;
  font-size:0.65rem;
  letter-spacing:2px;
  color:var(--text-dim);
}
footer .footer-host .bsd{
  color:var(--neon-green);
  font-weight:bold;
}
.disclaimer{
  margin-top:18px;
  padding:14px 20px;
  border:1px solid rgba(255,122,0,0.15);
  background:rgba(255,122,0,0.03);
  font-size:0.62rem;
  line-height:1.6;
  color:var(--text-dim);
  text-align:center;
  letter-spacing:1px;
  max-width:600px;
  margin-left:auto;
  margin-right:auto;
}
.disclaimer::before{
  content:'\26A0 DISCLAIMER';
  display:block;
  font-size:0.6rem;
  letter-spacing:4px;
  color:var(--neon-orange);
  margin-bottom:8px;
}
.disclaimer strong{color:var(--neon-orange);font-weight:normal}
/* ===== BOOT OVERLAY ===== */
.boot-overlay{
  position:fixed;
  inset:0;
  background:var(--bg);
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:10px;
  transition:opacity 0.5s ease, visibility 0.5s ease;
}
.boot-overlay.hidden{opacity:0;visibility:hidden}
.boot-logo{
  font-size:1.5rem;
  letter-spacing:8px;
  color:var(--neon);
  text-shadow:0 0 10px var(--neon);
  text-transform:uppercase;
}
.boot-desc{
  font-size:0.6rem;
  letter-spacing:2px;
  color:var(--text-dim);
  text-transform:uppercase;
  margin-top:2px;
}
.boot-bar{
  width:200px;
  height:2px;
  background:rgba(0,255,247,0.1);
  position:relative;
  overflow:hidden;
}
.boot-bar::after{
  content:'';
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  background:var(--neon);
  animation:bootLoad 1.2s ease-in-out forwards;
}
@keyframes bootLoad{0%{width:0%}100%{width:100%}}
.boot-status{
  font-size:0.7rem;
  color:var(--text-dim);
  letter-spacing:2px;
  margin-top:4px;
}
/* ===== RESPONSIVE ===== */
@media(max-width:600px){
  .name-title{font-size:1.5rem;letter-spacing:4px}
  .profile-frame{width:140px;height:140px}
  .intro{padding:20px 18px;font-size:0.85rem}
  .pop-level{font-size:0.58rem;letter-spacing:0.5px}
  .pop-sub, .pop-philosophy{padding-left:0}
  .pop-banner{padding:20px 16px}
  .pop-principles{grid-template-columns:1fr}
  .infra-grid-betrieb{grid-template-columns:1fr}
  .infra-grid-avail{grid-template-columns:repeat(2, 1fr)}
  .infra-grid-quad{grid-template-columns:repeat(2, 1fr)}
  .cyber-btn{padding:14px 34px;letter-spacing:3px}
}
@media(max-width:420px){
  .pop-level{font-size:0.52rem;height:38px}
  .pop-ind{font-size:0.48rem}
  .pop-detail{padding:8px 10px;gap:8px}
  .infra-grid-avail{grid-template-columns:1fr}
  .infra-grid-quad{grid-template-columns:1fr}
  .links{gap:14px}
}
/* ===== FADE-IN ===== */
.fade-in{
  opacity:0;
  transform:translateY(12px);
  animation:fadeInUp 0.4s ease forwards;
}
.fade-in:nth-child(1){animation-delay:0.1s}
.fade-in:nth-child(2){animation-delay:0.2s}
.fade-in:nth-child(3){animation-delay:0.3s}
.fade-in:nth-child(4){animation-delay:0.4s}
@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .fade-in{opacity:1;transform:none}
}

/* ===== MOBILE TYPO ===== */
@media(max-width:600px){
  .tagline{font-size:0.88rem}
  .intro{font-size:0.95rem}
  .tag-item{font-size:0.85rem}
  .section-title{font-size:1rem}
  .sub-title{font-size:0.76rem}
  .infra-card .icon{font-size:1.2rem}
  .infra-card .name{font-size:0.85rem}
  .infra-card .desc{font-size:0.76rem}
  .cyber-btn{font-size:0.95rem}
  .pop-title{font-size:0.95rem}
  .pop-sub{font-size:0.76rem}
  .pop-collapse > summary{font-size:0.76rem}
  .pop-philosophy{font-size:0.82rem}
  .pop-principles li{font-size:0.76rem}
  .pop-detail-name{font-size:0.8rem}
  .pop-detail-desc{font-size:0.72rem}
  footer .footer-text{font-size:0.78rem}
  footer .footer-name{font-size:0.82rem}
  footer .footer-host{font-size:0.72rem}
  .disclaimer{font-size:0.7rem}
}