.dr-sys-wrap{
  --dr-sys-bg:#071019;
  --dr-sys-bg-2:#0b1622;
  --dr-sys-line:#26384d;
  --dr-sys-cyan:#7ceaff;
  --dr-sys-blue:#7aa2ff;
  --dr-sys-text:#ecf5fb;
  --dr-sys-muted:#9fb6ca;
  --dr-sys-gold:#c6a768;
  position:relative;
  overflow:hidden;
  border-radius:18px;
  margin:0 0 48px;
  color:var(--dr-sys-text);
  background:
    radial-gradient(circle at 15% 12%, rgba(124,234,255,0.08), transparent 24%),
    radial-gradient(circle at 85% 18%, rgba(122,162,255,0.10), transparent 22%),
    radial-gradient(circle at 50% 120%, rgba(198,167,104,0.08), transparent 35%),
    linear-gradient(180deg, var(--dr-sys-bg) 0%, var(--dr-sys-bg-2) 100%);
  box-shadow:0 24px 70px rgba(3,8,18,0.34);
}
.dr-sys-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.55;
  background:
    linear-gradient(rgba(124,234,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,234,255,0.035) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.45));
}
.dr-sys-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at center, transparent 58%, rgba(0,0,0,0.18) 100%);
}

.dr-sys-ambient{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.dr-sys-orbit,
.dr-sys-network,
.dr-sys-feedback{
  position:absolute;
  opacity:.34;
  filter:drop-shadow(0 0 18px rgba(124,234,255,0.06));
}
.dr-sys-orbit{top:60px;right:-30px;width:420px;height:420px;}
.dr-sys-network{top:760px;left:-20px;width:380px;height:380px;}
.dr-sys-feedback{bottom:120px;right:0;width:420px;height:320px;}

.dr-sys-svg-line{
  stroke:rgba(124,234,255,0.34);
  stroke-width:1.6;
  fill:none;
}
.dr-sys-svg-soft{
  stroke:rgba(124,234,255,0.16);
  stroke-width:1;
  fill:none;
}
.dr-sys-svg-gold{
  stroke:rgba(198,167,104,0.34);
  stroke-width:1.4;
  fill:none;
}
.dr-sys-svg-dot{
  fill:var(--dr-sys-cyan);
  filter:drop-shadow(0 0 10px rgba(124,234,255,0.32));
}
.dr-sys-svg-dot-gold{
  fill:var(--dr-sys-gold);
  filter:drop-shadow(0 0 10px rgba(198,167,104,0.22));
}
.dr-sys-flow{
  fill:var(--dr-sys-cyan);
  filter:drop-shadow(0 0 10px rgba(124,234,255,0.34));
}
.dr-sys-flow.f1{animation:drSysMove1 4.6s linear infinite;}
.dr-sys-flow.f2{animation:drSysMove2 5.2s linear infinite;}
.dr-sys-flow.f3{animation:drSysMove3 4.8s linear infinite;}

@keyframes drSysMove1{
  0%{transform:translate(0,0);opacity:0;}
  14%{opacity:1;}
  55%{transform:translate(64px,28px);opacity:1;}
  100%{transform:translate(132px,60px);opacity:0;}
}
@keyframes drSysMove2{
  0%{transform:translate(0,0);opacity:0;}
  14%{opacity:1;}
  55%{transform:translate(-64px,44px);opacity:1;}
  100%{transform:translate(-126px,90px);opacity:0;}
}
@keyframes drSysMove3{
  0%{transform:translate(0,0);opacity:0;}
  14%{opacity:1;}
  55%{transform:translate(0,-56px);opacity:1;}
  100%{transform:translate(0,-116px);opacity:0;}
}

.dr-sys-progress{
  position:sticky;
  top:0;
  z-index:30;
  height:3px;
  width:100%;
  background:rgba(255,255,255,0.02);
}
.dr-sys-progress > span{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg, var(--dr-sys-gold), var(--dr-sys-cyan));
  box-shadow:0 0 14px rgba(124,234,255,0.18);
  transition:width .18s ease;
}

.dr-sys-hero{
  position:relative;
  z-index:2;
  border-bottom:1px solid rgba(124,234,255,0.08);
  overflow:hidden;
}
.dr-sys-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  align-items:stretch;
  min-height:640px;
}
.dr-sys-copy,
.dr-sys-visual{min-width:0;}
.dr-sys-copy{
  position:relative;
  padding:74px 40px 60px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.dr-sys-copy::after{
  content:"";
  position:absolute;
  top:42px;
  bottom:42px;
  right:0;
  width:1px;
  background:linear-gradient(180deg, transparent, rgba(124,234,255,0.18), transparent);
}
.dr-sys-kicker{
  display:inline-block;
  margin-bottom:18px;
  color:var(--dr-sys-cyan);
  font:700 11px/1.2 Arial,sans-serif;
  letter-spacing:4px;
  text-transform:uppercase;
}
.dr-sys-title{
  margin:0 0 16px;
  max-width:740px;
  color:var(--dr-sys-text);
  font-family:"Playfair Display", Georgia, serif;
  font-size:clamp(2.45rem,4.8vw,4.2rem);
  line-height:1.03;
  font-weight:700;
}
.dr-sys-sub{
  margin:0 0 24px;
  max-width:760px;
  color:#bed0de;
  font-size:1.08rem;
  line-height:1.86;
}
.dr-sys-meta{
  display:inline-flex;
  flex-wrap:wrap;
  gap:10px;
}
.dr-sys-meta span{
  display:inline-flex;
  align-items:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(124,234,255,0.12);
  background:rgba(8,15,24,0.52);
  color:var(--dr-sys-muted);
  font:600 10px/1.2 Arial,sans-serif;
  letter-spacing:2px;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
}
.dr-sys-feature-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:28px;
  max-width:760px;
}
.dr-sys-feature{
  position:relative;
  overflow:hidden;
  border-radius:12px;
  padding:16px 14px;
  background:linear-gradient(180deg, rgba(16,27,40,0.84), rgba(12,20,31,0.90));
  border:1px solid rgba(124,234,255,0.10);
  box-shadow:0 10px 28px rgba(0,0,0,0.14);
}
.dr-sys-feature::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(124,234,255,0.05), transparent 48%);
  pointer-events:none;
}
.dr-sys-feature-label{
  position:relative;
  z-index:2;
  margin-bottom:6px;
  color:var(--dr-sys-cyan);
  font:700 9px/1.2 Arial,sans-serif;
  letter-spacing:2px;
  text-transform:uppercase;
}
.dr-sys-feature strong{
  position:relative;
  z-index:2;
  display:block;
  color:var(--dr-sys-text);
  font-size:14px;
  line-height:1.55;
}

.dr-sys-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 26px;
}
.dr-sys-visual::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 70% 20%, rgba(124,234,255,0.12), transparent 24%),
    radial-gradient(circle at 30% 80%, rgba(198,167,104,0.08), transparent 22%);
  pointer-events:none;
}
.dr-sys-visual-frame{
  position:relative;
  width:min(100%, 560px);
  max-width:560px;
  aspect-ratio:1 / 1.02;
  border-radius:20px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(13,21,32,0.92), rgba(9,15,24,0.98));
  border:1px solid rgba(124,234,255,0.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.03), 0 18px 44px rgba(0,0,0,0.24);
}
.dr-sys-visual-frame::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(124,234,255,0.05), transparent 40%),
    radial-gradient(circle at center, rgba(124,234,255,0.04), transparent 54%);
  pointer-events:none;
}
.dr-sys-visual-frame::after{
  content:"";
  position:absolute;
  inset:16px;
  border:1px solid rgba(124,234,255,0.06);
  border-radius:14px;
  pointer-events:none;
}
.dr-sys-grid-lines{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(124,234,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,234,255,0.03) 1px, transparent 1px);
  background-size:36px 36px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.94), rgba(0,0,0,.34));
}
.dr-sys-topology{
  position:absolute;
  inset:0;
  z-index:2;
}
.dr-sys-loop{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(124,234,255,0.11);
  animation:drSysSpin 28s linear infinite;
}
.dr-sys-loop.l1{width:240px;height:240px;top:26px;right:40px;}
.dr-sys-loop.l2{width:146px;height:146px;bottom:42px;left:48px;animation-duration:24s;animation-direction:reverse;}
.dr-sys-loop.l3{width:100px;height:100px;top:210px;left:104px;animation-duration:20s;}
@keyframes drSysSpin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
.dr-sys-node{
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--dr-sys-cyan);
  box-shadow:0 0 18px rgba(124,234,255,0.18);
  animation:drSysPulse 3s ease-in-out infinite;
}
.dr-sys-node.n1{top:84px;right:156px;}
.dr-sys-node.n2{top:250px;right:94px;animation-delay:.8s;}
.dr-sys-node.n3{bottom:126px;left:114px;animation-delay:1.2s;}
.dr-sys-node.n4{top:286px;left:208px;animation-delay:1.8s;}
@keyframes drSysPulse{
  0%,100%{transform:scale(1);opacity:.42;}
  50%{transform:scale(1.55);opacity:1;}
}
.dr-sys-center{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
}
.dr-sys-core{
  position:relative;
  width:250px;
  height:250px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.dr-sys-core::before{
  content:"";
  position:absolute;
  inset:12px;
  border:1px solid rgba(124,234,255,0.12);
  border-radius:26px;
  transform:rotate(45deg);
}
.dr-sys-core::after{
  content:"";
  position:absolute;
  inset:44px;
  border:1px solid rgba(198,167,104,0.14);
  border-radius:18px;
  transform:rotate(45deg);
}
.dr-sys-core-line{
  position:absolute;
  background:linear-gradient(90deg, rgba(124,234,255,0.18), rgba(124,234,255,0.82), rgba(124,234,255,0.18));
  box-shadow:0 0 16px rgba(124,234,255,0.12);
}
.dr-sys-core-line.h{width:172px;height:2px;left:39px;top:124px;}
.dr-sys-core-line.v{width:2px;height:172px;left:124px;top:39px;}
.dr-sys-core-line.d1{width:136px;height:2px;top:78px;left:56px;transform:rotate(45deg);}
.dr-sys-core-line.d2{width:136px;height:2px;top:166px;left:56px;transform:rotate(-45deg);}
.dr-sys-core-box{
  position:relative;
  width:110px;
  height:110px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(13,22,34,0.96), rgba(16,27,42,0.98));
  border:2px solid rgba(124,234,255,0.82);
  box-shadow:0 0 28px rgba(124,234,255,0.12), inset 0 0 22px rgba(124,234,255,0.05);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:14px;
}
.dr-sys-core-box span{
  color:var(--dr-sys-text);
  font:700 12px/1.45 Arial,sans-serif;
  letter-spacing:2px;
  text-transform:uppercase;
}
.dr-sys-core-small{
  position:absolute;
  width:16px;
  height:16px;
  border-radius:4px;
  border:1px solid rgba(198,167,104,0.72);
  background:rgba(198,167,104,0.08);
  box-shadow:0 0 14px rgba(198,167,104,0.10);
}
.dr-sys-core-small.s1{top:20px;left:117px;}
.dr-sys-core-small.s2{right:20px;top:117px;}
.dr-sys-core-small.s3{bottom:20px;left:117px;}
.dr-sys-core-small.s4{left:20px;top:117px;}
.dr-sys-core-small.s5{top:54px;right:52px;}
.dr-sys-core-small.s6{bottom:54px;left:52px;}

.dr-sys-visual-caption{
  position:absolute;
  left:18px;
  right:18px;
  bottom:16px;
  z-index:4;
  padding-top:14px;
  border-top:1px solid rgba(124,234,255,0.08);
  background:linear-gradient(180deg, rgba(8,15,24,0), rgba(8,15,24,0.76) 34%, rgba(8,15,24,0.95) 100%);
}
.dr-sys-visual-caption strong{
  display:block;
  margin-bottom:8px;
  color:var(--dr-sys-cyan);
  font:700 10px/1.2 Arial,sans-serif;
  letter-spacing:3px;
  text-transform:uppercase;
}
.dr-sys-visual-caption span{
  display:block;
  color:#b7cadd;
  font-size:13px;
  line-height:1.58;
}

.dr-sys-body{
  position:relative;
  z-index:2;
  max-width:1200px;
  margin:0 auto;
  padding:44px 26px 66px;
}
.dr-sys-intro{
  max-width:960px;
  margin:0 auto 34px;
  color:#c2d4e4;
  text-align:center;
  font-size:1.03rem;
  line-height:1.9;
}

.dr-sys-panel-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin:0 0 42px;
}
.dr-sys-panel{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  padding:22px 20px;
  background:linear-gradient(180deg, rgba(16,27,40,0.94), rgba(12,20,30,0.98));
  border:1px solid rgba(124,234,255,0.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.02), 0 12px 30px rgba(0,0,0,0.18);
}
.dr-sys-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(124,234,255,0.06), transparent 46%);
  pointer-events:none;
}
.dr-sys-panel .eyebrow{
  position:relative;
  z-index:2;
  display:block;
  margin-bottom:10px;
  color:var(--dr-sys-cyan);
  font:700 10px/1.2 Arial,sans-serif;
  letter-spacing:3px;
  text-transform:uppercase;
}
.dr-sys-panel h3{
  position:relative;
  z-index:2;
  margin:0 0 10px;
  color:var(--dr-sys-text);
  font-family:"Playfair Display", Georgia, serif;
  font-size:1.2rem;
  line-height:1.34;
}
.dr-sys-panel p{
  position:relative;
  z-index:2;
  margin:0;
  color:#b7cadc;
  font-size:15px;
  line-height:1.78;
}

.dr-sys-section{margin-top:48px;}
.dr-sys-section-label{
  display:inline-block;
  margin-bottom:12px;
  padding-top:9px;
  border-top:1px solid rgba(124,234,255,0.28);
  color:var(--dr-sys-cyan);
  font:700 10px/1.2 Arial,sans-serif;
  letter-spacing:3px;
  text-transform:uppercase;
}
.dr-sys-section h2{
  margin:0 0 14px;
  color:var(--dr-sys-text);
  font-family:"Playfair Display", Georgia, serif;
  font-size:2rem;
  line-height:1.24;
}
.dr-sys-section-intro{
  max-width:880px;
  margin-bottom:24px;
  color:#bbcfde;
  line-height:1.84;
}

.dr-sys-toc-button{
  position:fixed;
  right:20px;
  bottom:22px;
  z-index:50;
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:var(--dr-sys-text);
  background:rgba(11,18,28,0.9);
  border:1px solid rgba(124,234,255,0.18);
  border-radius:999px;
  padding:12px 14px;
  font:700 10px/1 Arial,sans-serif;
  letter-spacing:2px;
  text-transform:uppercase;
  box-shadow:0 14px 26px rgba(0,0,0,0.22);
}
.dr-sys-toc{
  position:sticky;
  top:22px;
  z-index:6;
  margin-top:18px;
  margin-bottom:38px;
  border-radius:14px;
  padding:18px;
  background:linear-gradient(180deg, rgba(14,22,34,0.95), rgba(11,18,28,0.98));
  border:1px solid rgba(124,234,255,0.12);
  box-shadow:0 16px 36px rgba(0,0,0,0.18);
}
.dr-sys-toc-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.dr-sys-toc-head strong{
  color:var(--dr-sys-text);
  font:700 14px/1.4 Arial,sans-serif;
  letter-spacing:1px;
}
.dr-sys-toc-head span{
  color:var(--dr-sys-muted);
  font-size:13px;
  line-height:1.5;
}
.dr-sys-toc-links{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.dr-sys-toc a{
  display:block;
  text-decoration:none;
  color:#c7d8e6;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(124,234,255,0.10);
  background:rgba(8,15,24,0.42);
  font:600 12px/1.5 Arial,sans-serif;
  transition:transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.dr-sys-toc a:hover,
.dr-sys-toc a.is-active{
  transform:translateY(-2px);
  color:var(--dr-sys-text);
  border-color:rgba(124,234,255,0.26);
  background:rgba(12,20,31,0.92);
}

.dr-sys-signal{
  margin:34px 0 10px;
  border-left:3px solid var(--dr-sys-gold);
  border-radius:12px;
  padding:24px;
  background:linear-gradient(135deg, rgba(198,167,104,0.08), rgba(124,234,255,0.06));
  border:1px solid rgba(198,167,104,0.14);
}
.dr-sys-signal strong{
  display:block;
  margin-bottom:10px;
  color:var(--dr-sys-gold);
  font:700 10px/1.2 Arial,sans-serif;
  letter-spacing:3px;
  text-transform:uppercase;
}
.dr-sys-signal p{
  margin:0;
  color:#d9e4ee;
  font-family:"Playfair Display", Georgia, serif;
  font-size:1.06rem;
  line-height:1.8;
}

.dr-sys-path-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.dr-sys-path{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  padding:22px;
  background:linear-gradient(180deg, rgba(15,24,36,0.96), rgba(11,18,28,0.98));
  border:1px solid rgba(124,234,255,0.12);
  box-shadow:0 14px 34px rgba(0,0,0,0.18);
}
.dr-sys-path::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(124,234,255,0.05), transparent 48%);
  pointer-events:none;
}
.dr-sys-path .tag{
  display:inline-flex;
  align-items:center;
  margin-bottom:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(198,167,104,0.18);
  background:rgba(198,167,104,0.06);
  color:var(--dr-sys-gold);
  font:700 10px/1 Arial,sans-serif;
  letter-spacing:2px;
  text-transform:uppercase;
}
.dr-sys-path h3{
  margin:0 0 10px;
  color:var(--dr-sys-text);
  font-family:"Playfair Display", Georgia, serif;
  font-size:1.22rem;
  line-height:1.35;
}
.dr-sys-path p{
  margin:0 0 14px;
  color:#b7cadd;
  line-height:1.76;
}
.dr-sys-link-list{
  margin:0;
  padding-left:18px;
  color:#d8e6f2;
}
.dr-sys-link-list li{
  margin:0 0 10px;
  line-height:1.72;
}
.dr-sys-link-list a{
  color:#dff5ff;
  text-decoration:none;
}
.dr-sys-link-list a:hover{
  text-decoration:underline;
}

.dr-sys-diagram{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  padding:22px;
  background:linear-gradient(180deg, rgba(15,23,34,0.96), rgba(11,18,28,0.98));
  border:1px solid rgba(124,234,255,0.12);
  box-shadow:0 16px 36px rgba(0,0,0,0.18);
}
.dr-sys-diagram-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.dr-sys-diagram-head h3{
  margin:0;
  color:var(--dr-sys-text);
  font-family:"Playfair Display", Georgia, serif;
  font-size:1.42rem;
}
.dr-sys-diagram-head p{
  max-width:680px;
  margin:0;
  color:var(--dr-sys-muted);
  line-height:1.7;
}
.dr-sys-diagram-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:18px;
  align-items:stretch;
}
.dr-sys-figure{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  border:1px solid rgba(124,234,255,0.10);
  background:linear-gradient(180deg, rgba(10,18,28,0.92), rgba(7,13,20,0.98));
  min-height:380px;
}
.dr-sys-figure-canvas{
  position:absolute;
  inset:0;
}
.dr-sys-figure-caption{
  position:absolute;
  left:16px;
  right:16px;
  bottom:14px;
  padding-top:12px;
  border-top:1px solid rgba(124,234,255,0.08);
  background:linear-gradient(180deg, rgba(8,15,24,0), rgba(8,15,24,0.84) 38%, rgba(8,15,24,0.98) 100%);
}
.dr-sys-figure-caption strong{
  display:block;
  margin-bottom:8px;
  color:var(--dr-sys-cyan);
  font:700 10px/1.2 Arial,sans-serif;
  letter-spacing:3px;
  text-transform:uppercase;
}
.dr-sys-figure-caption span{
  display:block;
  color:#b4c8d8;
  line-height:1.58;
  font-size:13px;
}
.dr-sys-explain{
  display:grid;
  gap:14px;
}
.dr-sys-explain-card{
  position:relative;
  overflow:hidden;
  border-radius:12px;
  padding:18px;
  background:linear-gradient(180deg, rgba(16,27,40,0.94), rgba(12,20,31,0.98));
  border:1px solid rgba(124,234,255,0.12);
}
.dr-sys-explain-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(124,234,255,0.05), transparent 48%);
  pointer-events:none;
}
.dr-sys-explain-card .eyebrow{
  display:block;
  position:relative;
  z-index:2;
  margin-bottom:8px;
  color:var(--dr-sys-cyan);
  font:700 10px/1.2 Arial,sans-serif;
  letter-spacing:2px;
  text-transform:uppercase;
}
.dr-sys-explain-card h4{
  position:relative;
  z-index:2;
  margin:0 0 8px;
  color:var(--dr-sys-text);
  font-family:"Playfair Display", Georgia, serif;
  font-size:1.06rem;
  line-height:1.38;
}
.dr-sys-explain-card p{
  position:relative;
  z-index:2;
  margin:0;
  color:#b7cadd;
  line-height:1.72;
  font-size:14px;
}

.dr-sys-cluster-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}
.dr-sys-cluster{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  padding:22px;
  background:linear-gradient(180deg, rgba(15,24,36,0.96), rgba(11,18,28,0.98));
  border:1px solid rgba(124,234,255,0.12);
  box-shadow:0 14px 34px rgba(0,0,0,0.18);
}
.dr-sys-cluster::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(124,234,255,0.05), transparent 48%);
  pointer-events:none;
}
.dr-sys-cluster.gold{
  border-color:rgba(198,167,104,0.18);
}
.dr-sys-cluster.gold::before{
  background:linear-gradient(135deg, rgba(198,167,104,0.06), transparent 48%);
}
.dr-sys-cluster .eyebrow{
  display:block;
  position:relative;
  z-index:2;
  margin-bottom:10px;
  color:var(--dr-sys-cyan);
  font:700 10px/1.2 Arial,sans-serif;
  letter-spacing:3px;
  text-transform:uppercase;
}
.dr-sys-cluster.gold .eyebrow{color:var(--dr-sys-gold);}
.dr-sys-cluster h3{
  position:relative;
  z-index:2;
  margin:0 0 10px;
  color:var(--dr-sys-text);
  font-family:"Playfair Display", Georgia, serif;
  font-size:1.36rem;
  line-height:1.32;
}
.dr-sys-cluster p{
  position:relative;
  z-index:2;
  margin:0 0 16px;
  color:#b7cadd;
  line-height:1.78;
}
.dr-sys-pillar-link{
  position:relative;
  z-index:2;
  display:block;
  margin-bottom:14px;
  text-decoration:none;
  color:inherit;
  border-radius:12px;
  padding:18px;
  border:1px solid rgba(198,167,104,0.20);
  background:linear-gradient(180deg, rgba(26,22,15,0.38), rgba(16,18,22,0.62));
  transition:transform .18s ease, border-color .18s ease;
}
.dr-sys-pillar-link:hover{
  transform:translateY(-2px);
  border-color:rgba(198,167,104,0.40);
}
.dr-sys-pillar-link strong{
  display:block;
  margin-bottom:8px;
  color:var(--dr-sys-gold);
  font:700 10px/1.2 Arial,sans-serif;
  letter-spacing:2px;
  text-transform:uppercase;
}
.dr-sys-pillar-link h4{
  margin:0 0 8px;
  color:var(--dr-sys-text);
  font-family:"Playfair Display", Georgia, serif;
  font-size:1.16rem;
}
.dr-sys-pillar-link span{
  display:block;
  color:#d5dde5;
  line-height:1.72;
  font-size:14px;
}
.dr-sys-mini-grid{
  position:relative;
  z-index:2;
  display:grid;
  gap:12px;
}
.dr-sys-mini{
  display:block;
  text-decoration:none;
  color:inherit;
  border-radius:12px;
  padding:16px;
  border:1px solid rgba(124,234,255,0.10);
  background:rgba(9,16,24,0.58);
  transition:transform .18s ease, border-color .18s ease;
}
.dr-sys-mini:hover{
  transform:translateY(-2px);
  border-color:rgba(124,234,255,0.28);
}
.dr-sys-mini strong{
  display:block;
  margin-bottom:8px;
  color:var(--dr-sys-cyan);
  font:700 10px/1.2 Arial,sans-serif;
  letter-spacing:2px;
  text-transform:uppercase;
}
.dr-sys-mini h4{
  margin:0 0 8px;
  color:var(--dr-sys-text);
  font-family:"Playfair Display", Georgia, serif;
  font-size:1.02rem;
  line-height:1.36;
}
.dr-sys-mini span{
  display:block;
  color:#aec2d3;
  font-size:14px;
  line-height:1.68;
}

.dr-sys-metric-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.dr-sys-metric{
  border-radius:12px;
  padding:18px 16px;
  background:linear-gradient(180deg, rgba(15,24,36,0.96), rgba(11,18,28,0.98));
  border:1px solid rgba(124,234,255,0.10);
  box-shadow:0 10px 24px rgba(0,0,0,0.14);
}
.dr-sys-metric strong{
  display:block;
  margin-bottom:8px;
  color:var(--dr-sys-gold);
  font-family:"Playfair Display", Georgia, serif;
  font-size:1.48rem;
  line-height:1;
}
.dr-sys-metric span{
  display:block;
  color:#d5e2ec;
  font:700 10px/1.45 Arial,sans-serif;
  letter-spacing:2px;
  text-transform:uppercase;
}
.dr-sys-metric p{
  margin:10px 0 0;
  color:#aabfd0;
  font-size:13px;
  line-height:1.6;
}

.dr-sys-cross-links{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.dr-sys-cross{
  display:block;
  text-decoration:none;
  color:inherit;
  border-radius:14px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(15,23,35,0.96), rgba(11,18,28,0.98));
  border:1px solid rgba(124,234,255,0.12);
  box-shadow:0 14px 28px rgba(0,0,0,0.16);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.dr-sys-cross:hover{
  transform:translateY(-3px);
  border-color:rgba(124,234,255,0.28);
  box-shadow:0 18px 34px rgba(0,0,0,0.22);
}
.dr-sys-cross-top{
  position:relative;
  height:150px;
  border-bottom:1px solid rgba(124,234,255,0.08);
  background:
    radial-gradient(circle at 70% 28%, rgba(124,234,255,0.14), transparent 24%),
    linear-gradient(180deg, rgba(15,23,35,0.96), rgba(9,14,22,0.98));
}
.dr-sys-cross-top svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.dr-sys-cross-body{
  padding:18px;
}
.dr-sys-cross-body .eyebrow{
  display:block;
  margin-bottom:8px;
  color:var(--dr-sys-cyan);
  font:700 10px/1.2 Arial,sans-serif;
  letter-spacing:2px;
  text-transform:uppercase;
}
.dr-sys-cross-body h3{
  margin:0 0 10px;
  color:var(--dr-sys-text);
  font-family:"Playfair Display", Georgia, serif;
  font-size:1.18rem;
  line-height:1.34;
}
.dr-sys-cross-body p{
  margin:0;
  color:#b5c8d8;
  font-size:14px;
  line-height:1.72;
}

.dr-sys-footer-note{
  margin-top:34px;
  text-align:center;
  color:var(--dr-sys-muted);
  font:700 11px/1.5 Arial,sans-serif;
  letter-spacing:2px;
  text-transform:uppercase;
}

@media (max-width:1100px){
  .dr-sys-hero-grid{grid-template-columns:1fr;}
  .dr-sys-copy::after{display:none;}
  .dr-sys-visual{padding:0 22px 30px;}
  .dr-sys-feature-grid,
  .dr-sys-toc-links,
  .dr-sys-path-grid,
  .dr-sys-metric-grid,
  .dr-sys-cross-links{grid-template-columns:1fr 1fr;}
  .dr-sys-panel-grid,
  .dr-sys-cluster-grid,
  .dr-sys-diagram-grid{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .dr-sys-body{padding:34px 18px 58px;}
  .dr-sys-copy{padding:56px 22px 36px;}
  .dr-sys-title{font-size:2.28rem;}
  .dr-sys-feature-grid,
  .dr-sys-panel-grid,
  .dr-sys-toc-links,
  .dr-sys-path-grid,
  .dr-sys-cluster-grid,
  .dr-sys-metric-grid,
  .dr-sys-cross-links{grid-template-columns:1fr;}
  .dr-sys-toc{position:relative;top:auto;}
  .dr-sys-toc-button{right:14px;bottom:16px;}
  .dr-sys-visual-frame{width:100%;max-width:none;aspect-ratio:1/1.06;}
  .dr-sys-core{width:188px;height:188px;}
  .dr-sys-core-line.h{width:124px;left:32px;top:93px;}
  .dr-sys-core-line.v{height:124px;left:93px;top:32px;}
  .dr-sys-core-line.d1{width:100px;top:60px;left:44px;}
  .dr-sys-core-line.d2{width:100px;top:126px;left:44px;}
  .dr-sys-core-box{width:82px;height:82px;padding:10px;}
  .dr-sys-core-box span{font-size:10px;}
  .dr-sys-core-small{width:12px;height:12px;}
  .dr-sys-core-small.s1{top:16px;left:88px;}
  .dr-sys-core-small.s2{right:16px;top:88px;}
  .dr-sys-core-small.s3{bottom:16px;left:88px;}
  .dr-sys-core-small.s4{left:16px;top:88px;}
  .dr-sys-core-small.s5{top:40px;right:40px;}
  .dr-sys-core-small.s6{bottom:40px;left:40px;}
}