/* HOME hosting visual (right panel only). Static-first. */
.hosting-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:72px;align-items:center}
.hosting-visual{position:relative;width:88%;max-width:560px;margin-inline:auto;padding:30px 34px 26px;border:1px solid #dfe7f2;border-radius:22px;background:linear-gradient(160deg,#fff 0%,#f3f7fd 60%,#eaf1fb 100%);box-shadow:0 16px 40px rgba(6,16,79,.10);overflow:hidden}
.hosting-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(18,77,216,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(18,77,216,.055) 1px,transparent 1px);background-size:34px 34px;pointer-events:none}
.hosting-visual-label{position:relative;z-index:1;margin:0 0 18px;font:700 .68rem Manrope,sans-serif;letter-spacing:.22em;color:#087ef5}
.hosting-top-node{position:relative;z-index:1;display:flex;align-items:center;gap:12px;width:78%;margin-inline:auto;padding:12px 18px;background:#fff;border:1px solid #dfe7f2;border-radius:12px;box-shadow:0 6px 18px rgba(6,16,79,.07);transition:transform 170ms ease,border-color 170ms ease,background 170ms ease}
.hosting-top-node:hover{transform:translateY(-2px);border-color:#087ef5;background:#f4f9ff}
.hosting-node-dot{flex:none;width:10px;height:10px;border-radius:50%;background:#087ef5;box-shadow:0 0 0 4px rgba(8,126,245,.14)}
.hosting-top-node b,.hosting-core-node b{display:block;font:800 .82rem Manrope,sans-serif;letter-spacing:.06em;color:#06104f}
.hosting-top-node small,.hosting-core-node small{display:block;font:500 .74rem Inter,sans-serif;color:#5b6475}
.hosting-connector{display:block;position:relative;z-index:1;width:2px;height:26px;margin:0 auto;background:linear-gradient(180deg,#087ef5,#13b8f4);transform-origin:top center}
.hosting-connector-branch{height:22px}
.hosting-core-node{position:relative;z-index:1;display:flex;align-items:center;gap:14px;width:88%;margin-inline:auto;padding:16px 20px;border-radius:14px;color:#fff;background:linear-gradient(135deg,#06104f 0%,#0a2a86 55%,#087ef5 130%);box-shadow:0 14px 32px rgba(6,16,79,.28);transition:transform 170ms ease,box-shadow 170ms ease,filter 170ms ease}
.hosting-core-node:hover{transform:translateY(-2px);filter:brightness(1.1);box-shadow:0 18px 38px rgba(6,16,79,.34)}
.hosting-core-node b{color:#fff}
.hosting-core-node small{color:#b9c6e5}
.hosting-core-servers{flex:none;display:flex;flex-direction:column;gap:5px}
.hosting-core-servers i{display:block;width:30px;height:7px;border-radius:2px;background:rgba(255,255,255,.28);border-left:5px solid #13b8f4}
.hosting-pillar-marker{display:block;font-size:.8rem;color:#087ef5;margin-bottom:2px}
.hosting-pillar b{display:block;font:800 .68rem Manrope,sans-serif;letter-spacing:.05em;color:#06104f}
.hosting-pillar small{display:block;font-size:.66rem;color:#5b6475;margin-top:2px}
.hosting-core-accent{position:absolute;right:14px;top:14px;width:8px;height:8px;border-radius:50%;background:#13b8f4;box-shadow:0 0 10px #13b8f4;transition:box-shadow 170ms ease,background 170ms ease}
.hosting-core-node:hover .hosting-core-accent{background:#fff;box-shadow:0 0 14px #fff}
.hosting-pillars{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px}
.hosting-pillar{background:#fff;border:1px solid #dfe7f2;border-radius:10px;padding:12px 8px;text-align:center;box-shadow:0 4px 12px rgba(6,16,79,.05);transition:transform 165ms ease,border-color 165ms ease,background 165ms ease,box-shadow 165ms ease}
.hosting-pillar:hover{transform:translateY(-3px);border-color:#087ef5;background:#f4f9ff;box-shadow:0 10px 22px rgba(8,126,245,.16)}
.hosting-pillar:hover .hosting-pillar-marker{color:#124dd8}
.hosting-status span{color:#087ef5;margin-right:6px}
.js-hosting .hosting-visual,.js-hosting .hosting-visual-label,.js-hosting .hosting-top-node,.js-hosting .hosting-core-node,.js-hosting .hosting-pillar{opacity:0}
.js-hosting.hosting-in .hosting-visual{animation:hostPanel 420ms ease-out forwards}
.js-hosting.hosting-in .hosting-visual-label{animation:hostFade 380ms ease-out 120ms forwards}
.js-hosting.hosting-in .hosting-top-node{animation:hostRise 420ms ease-out 220ms forwards}
.js-hosting.hosting-in .hosting-connector-vertical{transform:scaleY(0);animation:hostDrawY 300ms ease-out 420ms forwards}
.js-hosting.hosting-in .hosting-core-node{animation:hostRise 420ms ease-out 520ms forwards}
.js-hosting.hosting-in .hosting-connector-branch{transform:scaleY(0);animation:hostDrawY 260ms ease-out 680ms forwards}
.js-hosting.hosting-in .hosting-pillar{animation:hostRise 360ms ease-out forwards}
.js-hosting.hosting-in .hosting-pillar:nth-child(1){animation-delay:760ms}
.js-hosting.hosting-in .hosting-pillar:nth-child(2){animation-delay:820ms}
.js-hosting.hosting-in .hosting-pillar:nth-child(3){animation-delay:880ms}
.js-hosting.hosting-in .hosting-pillar:nth-child(4){animation-delay:940ms}
@keyframes hostPanel{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes hostFade{from{opacity:0}to{opacity:1}}
@keyframes hostRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes hostDrawY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media(max-width:1024px){.hosting-grid{grid-template-columns:1fr;gap:44px}.hosting-visual{width:min(100%,620px)}}
@media(max-width:820px){.hosting-pillars{grid-template-columns:repeat(2,1fr);gap:12px}.hosting-top-node{width:86%}.hosting-core-node{width:94%}}
@media(max-width:430px){.hosting-visual{width:100%;padding:24px 20px}.hosting-top-node,.hosting-core-node{width:100%}.hosting-pillars{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.js-hosting .hosting-visual,.js-hosting .hosting-visual-label,.js-hosting .hosting-top-node,.js-hosting .hosting-core-node,.js-hosting .hosting-pillar{opacity:1!important;transform:none!important;animation:none!important}.js-hosting.hosting-in .hosting-connector{transform:none!important;animation:none!important}.hosting-top-node,.hosting-core-node,.hosting-pillar{transition:none!important}}

/* Connected Growth: left-align the section header to match other Home sections
   (Our Work, Insights, Careers). Scoped to .growth-section so the shared
   .center-head used by other sections stays centered. The header shares the
   same .container as the card grid below, so left edges line up. */
.growth-section .center-head{text-align:left;max-width:none;margin:0 0 56px}
.growth-section .center-head h2{max-width:720px}
.growth-section .center-head p{max-width:700px;margin-left:0;margin-right:0}

/* Why Nxtzen: left-align the section header to match other Home sections.
   Scoped to .why-section so the shared .center-head used by other sections
   (home-why is the only Home user; About pages keep their centered heading)
   stays centered elsewhere. The header shares the same .container as the card
   grid below, so left edges line up with the first card. */
.why-section .center-head{text-align:left;max-width:none;margin:0 0 56px}
.why-section .center-head h2{max-width:640px}

/* Responsive overflow fix (production prep): the approved styles.css only makes
   the capability strip (.cap-scroll) horizontally scrollable at <=800px, so at
   801-1024px the full-width strip overflows the page. Extend the same approved
   scrollable behavior up to 1024px to eliminate the horizontal page overflow.
   No visual redesign — the strip simply scrolls instead of overflowing. */
@media (max-width: 1024px) {
  .cap-scroll {
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }
  .cap-scroll::-webkit-scrollbar { display: none; }
}