/* Division III — proprietary infrastructure identity */
:root {
  --host-blue:#72adff;
  --host-cyan:#76e1ff;
  --host-violet:#8d86ff;
  --host-steel:#8fa2b8;
  --host-ease:cubic-bezier(.16,1,.3,1);
}
.ph {
  min-height:740px;display:flex;align-items:center;
  background:linear-gradient(112deg,#080b11 0%,#0b0e17 56%,#0a111b 100%);
}
.ph::after {
  background:
    linear-gradient(90deg,rgba(8,11,17,.98) 3%,rgba(8,11,17,.82) 47%,rgba(8,11,17,.2) 80%,rgba(8,11,17,.58)),
    radial-gradient(circle at 79% 45%,rgba(114,173,255,.07),transparent 34%);
}
.ph-inner { max-width:1200px;width:100%;padding-right:min(43vw,520px); }
.ph-h1 { font-size:clamp(3.3rem,7vw,6.8rem);letter-spacing:-.045em;line-height:.84; }
.ph-h1 .b { color:var(--host-blue);text-shadow:none; }
.ph-div.bl,.sl.bl { color:var(--host-cyan); }
.motion-ready .ph-bc,.motion-ready .ph-div,.motion-ready .ph-h1,.motion-ready .ph-sub { animation:none;opacity:1; }

.host-rack {
  position:absolute;z-index:2;right:clamp(1rem,5vw,6rem);top:50%;width:clamp(380px,43vw,640px);
  aspect-ratio:1;transform:translateY(-46%);pointer-events:none;opacity:.8;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent);
}
.host-rack svg { width:100%;height:100%;overflow:visible; }
.rack-grid,.rack-frame,.rack-route,.rack-blade { fill:none;vector-effect:non-scaling-stroke; }
.rack-grid { stroke:rgba(118,225,255,.07);stroke-width:.65; }
.rack-frame { stroke:rgba(114,173,255,.5);stroke-width:1.2; }
.rack-blade { fill:rgba(114,173,255,.025);stroke:rgba(143,162,184,.42);stroke-width:.85; }
.rack-route { stroke:rgba(141,134,255,.55);stroke-width:1;stroke-dasharray:5 7; }
.rack-led { fill:var(--host-cyan); }
.rack-led.ready { fill:#78e7ac; }
.motion-ready .rack-frame {
  stroke-dasharray:1200;stroke-dashoffset:1200;animation:hostTrace 1.35s .3s var(--host-ease) forwards;
}
.motion-ready .rack-route { animation:hostRoute 1.05s .72s backwards var(--host-ease); }
.motion-ready .rack-blade { animation:hostBlade .62s backwards var(--host-ease);transform-box:fill-box;transform-origin:center; }
.motion-ready .rack-blade:nth-child(4){animation-delay:.58s}.motion-ready .rack-blade:nth-child(5){animation-delay:.67s}.motion-ready .rack-blade:nth-child(6){animation-delay:.76s}.motion-ready .rack-blade:nth-child(7){animation-delay:.85s}.motion-ready .rack-blade:nth-child(8){animation-delay:.94s}
.motion-ready .rack-led { animation:hostAcquire .35s 1.15s backwards var(--host-ease); }
@keyframes hostTrace { to{stroke-dashoffset:0} }
@keyframes hostRoute { from{opacity:0;stroke-dashoffset:24} }
@keyframes hostBlade { from{opacity:0;transform:translateX(28px)} }
@keyframes hostAcquire { from{opacity:0} }
.rack-readout { position:absolute;right:4%;bottom:8%;padding:.42rem .65rem;border-right:1px solid rgba(114,173,255,.3);text-align:right;font:500 .5rem/1.7 'Share Tech Mono',monospace;letter-spacing:.16em;color:rgba(180,215,255,.52); }

#host-hero-field,#host-infrastructure-field,#host-capacity-field { position:absolute;inset:0;width:100%;height:100%;pointer-events:none; }
.pg { position:relative;overflow:hidden;padding-top:7rem;padding-bottom:7rem; }
.pg .pgi { position:relative;z-index:2; }
.pg.alt { background:linear-gradient(135deg,#0b1019,var(--bg2) 56%,#0a1018); }
.g2 { gap:clamp(3rem,7vw,7rem); }

.uptime-ring { padding:1rem 1.25rem;border-left:1px solid rgba(114,173,255,.22);background:linear-gradient(90deg,rgba(114,173,255,.03),transparent);width:min(100%,510px); }
.ring-wrap { width:88px;height:88px; }
.ring-wrap svg { width:88px;height:88px; }
.ring-pct { color:var(--host-cyan); }
#uptime-circle { stroke:var(--host-blue);filter:drop-shadow(0 0 5px rgba(114,173,255,.22)); }

.panel {
  position:relative;overflow:hidden;border-color:rgba(114,173,255,.11);
  background:linear-gradient(145deg,rgba(17,23,34,.96),rgba(9,13,20,.95));
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
}
.panel::before { content:'III';position:absolute;right:.9rem;top:.5rem;font:800 6.5rem/1 'Exo 2',sans-serif;color:var(--host-blue);opacity:.025; }
.ptop { background:rgba(114,173,255,.025); }
.pdot-b { animation:none;box-shadow:0 0 0 3px rgba(114,173,255,.08); }
.prow { position:relative;transition:padding-left .3s var(--host-ease),background-color .3s; }
.prow:hover { padding-left:.5rem;background:rgba(114,173,255,.018); }
.notice.bl { border-color:rgba(114,173,255,.13);background:rgba(114,173,255,.025); }

#features .g2 { grid-template-columns:1fr;gap:8px; }
.fc.bl {
  position:relative;overflow:hidden;
  min-height:132px;display:grid;grid-template-columns:68px minmax(190px,.38fr) 1fr;align-items:center;gap:1.5rem;
  padding:1.7rem 2rem;border:1px solid rgba(114,173,255,.09);
  background:linear-gradient(105deg,rgba(16,22,32,.97),rgba(10,14,21,.94));
  transition:transform .36s var(--host-ease),border-color .3s,background-color .3s;
}
.fc.bl::after { content:'';position:absolute;right:1.5rem;top:50%;width:42px;height:6px;transform:translateY(-50%);background:repeating-linear-gradient(90deg,var(--host-steel) 0 2px,transparent 2px 7px);opacity:.14;transition:opacity .3s; }
.fc.bl:hover { transform:translateX(7px);border-color:rgba(114,173,255,.22);background:#0e1520; }
.fc.bl:hover::after { opacity:.34; }
.fc-bar { position:absolute;left:0;top:0;bottom:0;right:auto;width:2px;height:auto;margin:0;background:linear-gradient(var(--host-blue),var(--host-violet),transparent);transform:scaleY(0);transform-origin:top;transition:transform .48s var(--host-ease); }
.fc:hover .fc-bar { transform:scaleY(1); }
.fc-ico { margin:0;width:48px;height:48px;border-color:rgba(114,173,255,.16); }
.fc-ico svg { stroke:var(--host-cyan); }
.fc-h { margin:0;color:var(--white); }
.fc-b { padding-right:4rem; }

.cta { position:relative;overflow:hidden;background:linear-gradient(112deg,#09111d,#090c12 57%,#0b1220); }
.cta::before { content:'INFRASTRUCTURE';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:800 clamp(4rem,11vw,10rem)/1 'Exo 2',sans-serif;letter-spacing:.02em;color:var(--host-blue);opacity:.018; }
.cta-i { position:relative;z-index:1; }

[data-theme="light"] .ph { background:linear-gradient(112deg,#e9eef5,#e5ebf3 56%,#dce8f2); }
[data-theme="light"] .ph::after { background:linear-gradient(90deg,rgba(240,243,245,.98) 4%,rgba(240,243,245,.78) 48%,rgba(240,243,245,.15) 80%,rgba(240,243,245,.5)); }
[data-theme="light"] .host-rack { opacity:.5; }
[data-theme="light"] .rack-grid { stroke:rgba(22,83,126,.09); }
[data-theme="light"] .rack-frame,[data-theme="light"] .rack-blade { stroke:rgba(38,94,156,.48); }
[data-theme="light"] .rack-blade { fill:rgba(38,94,156,.025); }
[data-theme="light"] .rack-route { stroke:rgba(79,69,174,.45); }
[data-theme="light"] .rack-readout { color:rgba(28,69,110,.58);border-color:rgba(38,94,156,.28); }
[data-theme="light"] .pg.alt { background:linear-gradient(135deg,#e3eaf2,var(--bg2) 56%,#dde8f0); }
[data-theme="light"] .panel,[data-theme="light"] .fc.bl { background:linear-gradient(115deg,rgba(249,251,254,.98),rgba(218,227,237,.92));border-color:rgba(38,94,156,.13); }
[data-theme="light"] .fc.bl:hover { background:#edf3f8;border-color:rgba(38,94,156,.26); }
[data-theme="light"] .cta { background:linear-gradient(112deg,#dbe8f3,#edf1f5 57%,#dbe5f1); }

@media(max-width:1000px){.ph-inner{padding-right:0}.host-rack{right:-18%;width:74vw;opacity:.15}.ph{min-height:690px}}
@media(max-width:700px){.host-rack{right:-50%;width:115vw;opacity:.09}.fc.bl{grid-template-columns:52px 1fr;gap:1rem;padding:1.5rem}.fc-b{grid-column:1/-1;padding-right:0}.fc.bl::after{top:2rem;transform:none}.uptime-ring{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.motion-ready .rack-frame,.motion-ready .rack-route,.motion-ready .rack-blade,.motion-ready .rack-led{animation:none;stroke-dashoffset:0}}