:root{
  --itd-bg:#06101d;
  --itd-bg2:#081425;
  --itd-panel:rgba(10,18,34,.78);
  --itd-panel-2:rgba(13,24,46,.86);
  --itd-line:rgba(255,255,255,.08);
  --itd-text:#eef4ff;
  --itd-muted:#a8bad7;
  --itd-cyan:#74d7ff;
  --itd-cyan-soft:#8af1ff;
  --itd-blue:#489dff;
  --itd-gold:#f3c36f;
  --itd-shadow:0 28px 90px rgba(0,0,0,.34);
}

body.itdocs-public-page{
  color:var(--itd-text);
  background:
    radial-gradient(circle at 20% 10%, rgba(116,215,255,.08), transparent 30%),
    radial-gradient(circle at 82% 8%, rgba(138,241,255,.05), transparent 24%),
    linear-gradient(180deg, #030813 0%, #07111f 100%);
}

body.itdocs-public-page > *{
  position:relative;
  z-index:2;
}

.itdocs-video-bg{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}

.itdocs-video-bg video,
.itdocs-video-bg .itdocs-video-poster{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.itdocs-video-bg .itdocs-video-poster{
  background:
    radial-gradient(circle at 50% 20%, rgba(116,215,255,.10), transparent 28%),
    radial-gradient(circle at 18% 80%, rgba(72,157,255,.10), transparent 24%),
    linear-gradient(180deg, rgba(3,8,18,.90), rgba(6,16,29,.96));
}

.itdocs-video-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(2,6,12,.40), rgba(2,6,12,.72)),
    radial-gradient(circle at 50% 18%, rgba(116,215,255,.10), transparent 30%),
    radial-gradient(circle at 85% 20%, rgba(138,241,255,.08), transparent 26%);
}

.itdocs-video-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px) 0 0/100% 72px,
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px) 0 0/72px 100%;
  opacity:.25;
  mix-blend-mode:screen;
}

.itdocs-showoff-mount{
  position:relative;
  z-index:3;
  max-width:1320px;
  margin:clamp(2rem, 4vw, 4rem) auto;
  padding:0 clamp(.9rem, 2vw, 1.4rem);
}

.itdocs-showoff-stack{
  display:grid;
  gap:1.35rem;
}

.itdocs-shell{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:34px;
  background:
    linear-gradient(180deg, rgba(8,14,28,.88), rgba(7,12,24,.76)),
    radial-gradient(circle at 18% 10%, rgba(var(--accent-rgb),.10), transparent 26%);
  box-shadow:var(--itd-shadow);
  backdrop-filter:blur(18px) saturate(130%);
  padding:clamp(1rem, 2vw, 1.35rem);
}

.itdocs-shell::before{
  content:"";
  position:absolute;
  inset:-8% -8% auto;
  height:300px;
  background:
    radial-gradient(circle at 24% 28%, rgba(var(--accent-rgb),.16), transparent 42%),
    radial-gradient(circle at 82% 16%, rgba(var(--accent-soft-rgb),.12), transparent 38%);
  pointer-events:none;
}

.itdocs-shell::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,.02) 46%, transparent 100%);
  pointer-events:none;
}

.itdocs-shell-head{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) minmax(280px, .82fr);
  gap:1.2rem;
  align-items:start;
  margin-bottom:1rem;
}

.itdocs-shell-head h2{
  margin:.65rem 0 0;
  max-width:14ch;
  line-height:1.03;
  font-size:clamp(2rem, 4.5vw, 3.8rem);
}

.itdocs-shell-head p{
  margin:0;
  color:var(--itd-muted);
  line-height:1.72;
  font-size:1.02rem;
}

.itdocs-kicker{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.35rem .7rem;
  border-radius:999px;
  border:1px solid rgba(var(--accent-rgb), .26);
  background:rgba(var(--accent-rgb), .12);
  color:rgba(255,255,255,.88);
  font-size:.77rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.itdocs-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(310px, .84fr);
  gap:1.05rem;
}

.itdocs-stage{
  position:relative;
  min-height:760px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(7,12,24,.92), rgba(7,13,26,.80)),
    radial-gradient(circle at 50% 54%, rgba(var(--accent-rgb),.12), transparent 24%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}

.itdocs-stage::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0/100% 68px,
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) 0 0/68px 100%;
  opacity:.34;
}

.itdocs-stage svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

.itdocs-stage path{
  fill:none;
  stroke:rgba(var(--accent-rgb),.54);
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-dasharray:11 14;
  filter:drop-shadow(0 0 8px rgba(var(--accent-rgb),.2));
  animation:itdocsDash 17s linear infinite;
}

.itdocs-core,
.itdocs-float,
.itdocs-card,
.itdocs-plate,
.itdocs-stat-column{
  position:absolute;
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg, rgba(13,21,41,.82), rgba(8,12,24,.62));
  backdrop-filter:blur(14px) saturate(125%);
  box-shadow:0 18px 44px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.03);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.itdocs-float.active,
.itdocs-card.active,
.itdocs-plate.active{
  transform:translateY(-4px);
  border-color:rgba(var(--accent-rgb),.34);
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb),.12),
    0 0 34px rgba(var(--accent-rgb),.10),
    0 24px 62px rgba(0,0,0,.28);
}

.itdocs-chip{
  display:inline-flex;
  align-items:center;
  padding:.28rem .58rem;
  border-radius:999px;
  border:1px solid rgba(var(--accent-rgb),.22);
  background:rgba(var(--accent-rgb),.10);
  color:rgba(255,255,255,.84);
  font-size:.73rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.itdocs-float strong,
.itdocs-card strong,
.itdocs-plate strong{
  display:block;
  margin-top:.55rem;
  font-size:1.18rem;
  line-height:1.15;
}

.itdocs-float p,
.itdocs-card p,
.itdocs-plate p,
.itdocs-readout p,
.itdocs-mini p,
.itdocs-stat-column p{
  margin:.48rem 0 0;
  color:var(--itd-muted);
  line-height:1.62;
}

.itdocs-topology .itdocs-core{
  left:50%;
  top:50%;
  width:188px;
  height:188px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  text-align:center;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.18), transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb),.18), transparent 55%),
    linear-gradient(180deg, rgba(8,14,28,.96), rgba(4,9,18,.98));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05),
    0 0 40px rgba(var(--accent-rgb),.18),
    0 34px 72px rgba(0,0,0,.32);
}

.itdocs-topology .itdocs-core::before,
.itdocs-topology .itdocs-core::after{
  content:"";
  position:absolute;
  inset:-22px;
  border-radius:50%;
  border:1px solid rgba(var(--accent-rgb),.18);
}
.itdocs-topology .itdocs-core::after{
  inset:-42px;
  border-color:rgba(var(--accent-soft-rgb),.12);
}

.itdocs-topology .itdocs-core strong{
  display:block;
  font-size:1.5rem;
  margin:0;
}
.itdocs-topology .itdocs-core small{
  display:block;
  margin-top:.35rem;
  color:rgba(255,255,255,.74);
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.itdocs-topology .float-a{left:4%;top:10%;width:min(250px, 29vw);padding:1rem 1rem .95rem;border-radius:24px}
.itdocs-topology .float-b{right:6%;top:14%;width:min(250px, 29vw);padding:1rem 1rem .95rem;border-radius:24px}
.itdocs-topology .float-c{right:9%;bottom:10%;width:min(250px, 29vw);padding:1rem 1rem .95rem;border-radius:24px}
.itdocs-topology .card-a{left:5%;bottom:7%;width:min(310px, 36vw);padding:1rem 1rem .95rem;border-radius:24px;transform:rotate(-2deg)}
.itdocs-topology .card-b{right:25%;bottom:4%;width:min(260px, 31vw);padding:1rem 1rem .95rem;border-radius:24px;transform:rotate(2deg)}

.itdocs-prism .desktop-slab{
  left:5%;
  top:12%;
  width:min(360px, 45vw);
  padding:.95rem;
  border-radius:26px;
  transform:perspective(1200px) rotateY(16deg) rotateX(7deg);
}
.itdocs-prism .desktop-bar,
.itdocs-prism .phone-notch{
  display:flex;
  gap:.35rem;
  align-items:center;
  padding:.35rem .42rem;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  width:max-content;
}
.itdocs-prism .desktop-bar span,
.itdocs-prism .phone-notch span{
  display:block;
  width:.62rem;
  height:.62rem;
  border-radius:999px;
  background:rgba(255,255,255,.2);
}
.itdocs-prism .desktop-screen,
.itdocs-prism .phone-screen{
  margin-top:.75rem;
  min-height:200px;
  padding:1rem;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(7,12,24,.96), rgba(13,19,33,.88));
}
.itdocs-prism .desktop-meters,
.itdocs-prism .phone-meters{
  display:grid;
  gap:.55rem;
  margin-top:.95rem;
}
.itdocs-prism .desktop-meters span,
.itdocs-prism .phone-meters span{
  display:block;
  height:8px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(var(--accent-rgb),.92), rgba(var(--accent-soft-rgb),.28));
  animation:itdocsBeam 5s ease-in-out infinite;
}
.itdocs-prism .desktop-meters span:nth-child(2),
.itdocs-prism .phone-meters span:nth-child(2){width:74%}
.itdocs-prism .desktop-meters span:nth-child(3){width:58%}

.itdocs-prism .phone-shell{
  right:10%;
  top:20%;
  width:min(180px, 28vw);
  padding:.7rem;
  border-radius:28px;
  transform:perspective(1200px) rotateY(-12deg) rotateX(6deg);
}
.itdocs-prism .core{
  left:50%;
  top:53%;
  width:132px;
  height:132px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  text-align:center;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.18), transparent 34%),
    radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb),.16), transparent 56%),
    linear-gradient(180deg, rgba(8,14,28,.95), rgba(5,9,18,.98));
}
.itdocs-prism .orbit-a{left:6%;bottom:8%;width:min(260px, 32vw);padding:1rem;border-radius:24px;transform:rotate(-4deg)}
.itdocs-prism .orbit-b{right:18%;bottom:6%;width:min(240px, 30vw);padding:1rem;border-radius:24px;transform:rotate(4deg)}

.itdocs-corridor .plate-a{left:6%;top:12%;width:min(250px, 29vw);padding:1rem;border-radius:24px}
.itdocs-corridor .plate-b{left:30%;top:38%;width:min(270px, 32vw);padding:1rem;border-radius:24px}
.itdocs-corridor .plate-c{right:10%;bottom:18%;width:min(250px, 29vw);padding:1rem;border-radius:24px}
.itdocs-corridor .core{
  left:45%;
  top:54%;
  width:164px;
  height:164px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  text-align:center;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.18), transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb),.18), transparent 56%),
    linear-gradient(180deg, rgba(8,14,28,.95), rgba(5,9,18,.98));
}
.itdocs-corridor .caption-band{
  position:absolute;
  left:1rem;
  right:1rem;
  bottom:1rem;
  padding:1rem;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(8,14,26,.82), rgba(5,9,18,.72));
}

.itdocs-vault .float-a{left:5%;top:10%;width:min(250px, 30vw);padding:1rem;border-radius:24px}
.itdocs-vault .float-b{left:15%;top:36%;width:min(210px, 28vw);padding:1rem;border-radius:24px}
.itdocs-vault .float-c{right:18%;top:16%;width:min(240px, 30vw);padding:1rem;border-radius:24px}
.itdocs-vault .card-a{left:32%;top:28%;width:min(290px, 34vw);padding:1rem;border-radius:24px}
.itdocs-vault .card-b{right:8%;bottom:10%;width:min(230px, 28vw);padding:1rem;border-radius:24px}
.itdocs-vault .core{
  left:45%;
  top:60%;
  width:150px;
  height:150px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  text-align:center;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.18), transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb),.18), transparent 56%),
    linear-gradient(180deg, rgba(8,14,28,.95), rgba(5,9,18,.98));
}

.itdocs-side{
  display:grid;
  gap:1rem;
}

.itdocs-readout,
.itdocs-mini,
.itdocs-stat-grid .tile{
  border:1px solid rgba(255,255,255,.09);
  border-radius:26px;
  background:linear-gradient(180deg, rgba(12,18,34,.82), rgba(8,12,24,.72));
  box-shadow:0 18px 44px rgba(0,0,0,.22);
  backdrop-filter:blur(16px);
}

.itdocs-readout{
  padding:1rem 1rem 1.08rem;
}

.itdocs-readout h3{
  margin:.55rem 0 .65rem;
  font-size:clamp(1.85rem, 3vw, 2.55rem);
  line-height:1.06;
}

.itdocs-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  margin:.9rem 0 1rem;
}

.itdocs-chip-row span{
  padding:.36rem .68rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.86);
  font-size:.82rem;
  font-weight:700;
}

.itdocs-switches{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.65rem;
  margin:.95rem 0 1rem;
}

.itdocs-switch{
  appearance:none;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:var(--itd-text);
  border-radius:16px;
  min-height:54px;
  padding:.75rem .85rem;
  text-align:left;
  cursor:pointer;
  transition:border-color .22s ease, background .22s ease, transform .22s ease, box-shadow .22s ease;
  font:inherit;
  font-weight:700;
}

.itdocs-switch span{
  display:inline-grid;
  place-items:center;
  width:1.6rem;
  height:1.6rem;
  margin-right:.5rem;
  border-radius:.52rem;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.82);
  font-size:.8rem;
}

.itdocs-switch.active{
  border-color:rgba(var(--accent-rgb),.34);
  background:linear-gradient(180deg, rgba(var(--accent-rgb),.17), rgba(255,255,255,.04));
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.12), 0 0 20px rgba(var(--accent-rgb),.08);
  transform:translateY(-2px);
}

.itdocs-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
}

.itdocs-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 1rem;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  text-decoration:none;
  font-weight:800;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.itdocs-btn:hover{transform:translateY(-2px)}

.itdocs-btn.primary{
  color:#05101b;
  background:linear-gradient(135deg, rgba(var(--accent-soft-rgb),.96), rgba(var(--accent-rgb),.95));
  box-shadow:0 12px 30px rgba(var(--accent-rgb),.18);
}

.itdocs-btn.ghost{
  color:var(--itd-text);
  background:rgba(255,255,255,.04);
}

.itdocs-mini{padding:1rem}
.itdocs-mini h4{margin:.55rem 0 .45rem;font-size:1.24rem;line-height:1.18}

.itdocs-stat-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:.9rem;
}
.itdocs-stat-grid .tile{
  padding:1rem .95rem 1.08rem;
}
.itdocs-stat-grid .tile strong{
  display:block;
  font-size:2rem;
  line-height:1;
  margin:.42rem 0 .5rem;
}

@keyframes itdocsDash{from{stroke-dashoffset:0}to{stroke-dashoffset:-280}}
@keyframes itdocsBeam{
  0%,100%{transform:scaleX(.72);opacity:.72}
  50%{transform:scaleX(1);opacity:1}
}

@media (max-width:1100px){
  .itdocs-shell-head,
  .itdocs-grid{
    grid-template-columns:1fr;
  }
  .itdocs-shell-head h2{max-width:none}
}

@media (max-width:760px){
  .itdocs-showoff-mount{padding:0 .8rem}
  .itdocs-shell{padding:1rem;border-radius:24px}
  .itdocs-shell-head h2{font-size:clamp(1.9rem, 9vw, 3rem)}
  .itdocs-stage{min-height:920px}
  .itdocs-switches{grid-template-columns:1fr}
  .itdocs-stat-grid{grid-template-columns:1fr}
  .itdocs-topology .float-a,
  .itdocs-topology .float-b,
  .itdocs-topology .float-c,
  .itdocs-topology .card-a,
  .itdocs-topology .card-b,
  .itdocs-vault .float-a,
  .itdocs-vault .float-b,
  .itdocs-vault .float-c,
  .itdocs-vault .card-a,
  .itdocs-vault .card-b,
  .itdocs-corridor .plate-a,
  .itdocs-corridor .plate-b,
  .itdocs-corridor .plate-c{
    left:1rem !important;
    right:1rem !important;
    width:auto !important;
    transform:none !important;
  }
  .itdocs-topology .float-a,
  .itdocs-vault .float-a,
  .itdocs-corridor .plate-a{top:1rem !important}
  .itdocs-topology .float-b,
  .itdocs-vault .float-b{top:11rem !important}
  .itdocs-topology .float-c,
  .itdocs-vault .float-c{top:21rem !important}
  .itdocs-vault .card-a,
  .itdocs-corridor .plate-b{top:31rem !important;left:1rem !important;right:1rem !important}
  .itdocs-topology .card-a,
  .itdocs-corridor .plate-c{bottom:16rem !important}
  .itdocs-topology .card-b,
  .itdocs-vault .card-b{bottom:5rem !important}
  .itdocs-topology .itdocs-core,
  .itdocs-corridor .core,
  .itdocs-vault .core{width:145px;height:145px}
  .itdocs-prism .desktop-slab{left:1rem;right:4rem;width:auto;transform:none}
  .itdocs-prism .phone-shell{right:1rem;bottom:7rem;top:auto}
  .itdocs-prism .orbit-a{left:1rem;bottom:18rem;transform:none}
  .itdocs-prism .orbit-b{right:1rem;bottom:7rem;transform:none}
}