:root {
    --hq-ink: #07111f;
    --hq-navy: #0d1b2a;
    --hq-navy-2: #13283b;
    --hq-steel: #b8c4cf;
    --hq-silver: #e8eef2;
    --hq-cyan: #11d5d8;
    --hq-cyan-soft: #b9f5f2;
    --hq-indigo: #7567ff;
    --hq-text: #d9e5ec;
    --hq-muted: #88a0b0;
    --hq-border: rgba(185, 245, 242, .17);
    --hq-shadow: 0 28px 80px rgba(0, 0, 0, .24);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--hq-ink); color: var(--hq-text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
.site-shell { overflow: hidden; }
.status-strip { border-bottom: 1px solid var(--hq-border); color: var(--hq-muted); font-size: .76rem; padding: .55rem 0; }
.status-strip strong { color: var(--hq-cyan-soft); font-weight: 700; }
.status-strip-note { color: #688292; }
.status-dot { display: inline-block; width: .48rem; height: .48rem; margin-right: .4rem; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 .22rem rgba(74, 222, 128, .12); }
.site-header { position: relative; z-index: 10; background: rgba(7, 17, 31, .82); border-bottom: 1px solid var(--hq-border); backdrop-filter: blur(16px); }
.brand { color: #f5fafc; font-weight: 800; letter-spacing: -.045em; }
.brand-mark { display: grid; width: 2.1rem; height: 2.1rem; place-items: center; border: 1px solid var(--hq-cyan); border-radius: .55rem; background: linear-gradient(145deg, rgba(17, 213, 216, .28), rgba(117, 103, 255, .2)); color: var(--hq-cyan-soft); font-size: 1.25rem; font-weight: 900; box-shadow: inset 0 0 20px rgba(17, 213, 216, .12); }
.brand-word { font-size: 1.35rem; text-transform: lowercase; }
.brand-word span { color: var(--hq-cyan); }
.nav-link { color: #a8bdca; font-size: .9rem; padding-inline: .85rem !important; }
.nav-link:hover, .nav-link:focus { color: #fff; }
.navbar-toggler { border-color: var(--hq-border); }
.navbar-toggler-icon { filter: invert(1) opacity(.75); }
.btn-cyan { --bs-btn-color: #061319; --bs-btn-bg: var(--hq-cyan); --bs-btn-border-color: var(--hq-cyan); --bs-btn-hover-color: #061319; --bs-btn-hover-bg: #68edef; --bs-btn-hover-border-color: #68edef; font-weight: 800; box-shadow: 0 14px 30px rgba(17, 213, 216, .2); }
.btn-outline-cyan { color: var(--hq-cyan-soft); border-color: rgba(17, 213, 216, .55); }
.btn-outline-cyan:hover { color: var(--hq-ink); background: var(--hq-cyan); border-color: var(--hq-cyan); }
.btn-ghost { color: #c5d5dd; border: 1px solid var(--hq-border); }
.btn-ghost:hover { color: #fff; border-color: rgba(185, 245, 242, .48); background: rgba(185, 245, 242, .07); }
.hero-section { position: relative; padding: clamp(5rem, 10vw, 9rem) 0 6rem; background: radial-gradient(circle at 74% 42%, rgba(17, 213, 216, .12), transparent 27rem), radial-gradient(circle at 15% 0, rgba(117, 103, 255, .13), transparent 28rem); }
.hero-section:before { position: absolute; inset: 0; background-image: linear-gradient(rgba(185, 245, 242, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(185, 245, 242, .035) 1px, transparent 1px); background-size: 46px 46px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.65), transparent 85%); content: ""; pointer-events: none; }
.eyebrow { color: var(--hq-cyan-soft); font-size: .69rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow span { display: inline-block; width: 1.8rem; height: .15rem; margin: 0 .5rem .2rem 0; background: var(--hq-cyan); }
.eyebrow.dark { color: #567083; }
h1, h2, h3 { color: #f3f8fa; font-weight: 800; letter-spacing: -.045em; }
h1 { max-width: 11ch; margin: 1rem 0 1.25rem; font-size: clamp(3.2rem, 6vw, 6.5rem); line-height: .92; }
h1 em { color: var(--hq-cyan); font-style: normal; }
h2 { font-size: clamp(2rem, 4vw, 4rem); line-height: .98; }
.hero-copy { max-width: 34rem; color: #9eb3c0; font-size: 1.08rem; line-height: 1.75; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; margin-top: 2rem; color: #7f9ba9; font-size: .74rem; }
.hero-proof i { margin-right: .35rem; color: var(--hq-cyan); font-style: normal; }
.threeui-stage { position: relative; min-height: 32rem; overflow: hidden; border: 1px solid var(--hq-border); border-radius: 2rem; background: radial-gradient(circle at 50% 45%, rgba(17, 213, 216, .18), transparent 15rem), linear-gradient(145deg, rgba(19, 40, 59, .82), rgba(7, 17, 31, .55)); box-shadow: var(--hq-shadow); isolation: isolate; }
.stage-grid { position: absolute; inset: 0; opacity: .38; background-image: linear-gradient(rgba(185,245,242,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(185,245,242,.13) 1px, transparent 1px); background-size: 3rem 3rem; transform: perspective(440px) rotateX(58deg) scale(1.6) translateY(8rem); transform-origin: center bottom; }
.stage-orbit { position: absolute; inset: 20% 15%; border: 1px solid rgba(17,213,216,.4); border-radius: 50%; transform: rotate(-24deg); box-shadow: 0 0 2.5rem rgba(17,213,216,.11); animation: orbit 12s linear infinite; }
.orbit-two { inset: 30% 5%; transform: rotate(62deg); border-color: rgba(117,103,255,.46); animation-duration: 17s; animation-direction: reverse; }
.threeui-canvas { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .82; }
.server-core { position: absolute; z-index: 5; top: 50%; left: 50%; width: 15rem; height: 19.5rem; transform: translate(-50%, -50%) perspective(1100px) rotateY(calc(-20deg + var(--card-tilt-y, 0deg))) rotateX(calc(7deg + var(--card-tilt-x, 0deg))); transform-style: preserve-3d; filter: drop-shadow(-1.5rem 2rem 1.7rem rgba(0,0,0,.4)); transition: transform .28s ease, filter .28s ease; animation: server-float 5.5s ease-in-out infinite; }
.server-core:hover { filter: drop-shadow(-1.8rem 2.4rem 2rem rgba(0,0,0,.5)); }
.server-card-depth { position: absolute; inset: 0; border: 1px solid rgba(127,241,239,.4); border-radius: 1.3rem; background: linear-gradient(145deg, #274b5a, #071521 74%); transform-origin: right center; }
.server-depth-one { right: -.58rem; transform: translateZ(-1.2rem) translate(.42rem, .38rem) skewY(-2deg); opacity: .92; }
.server-depth-two { right: -1.1rem; transform: translateZ(-2.25rem) translate(.82rem, .75rem) skewY(-4deg); opacity: .7; box-shadow: 1.2rem 1.1rem 0 rgba(0,0,0,.14); }
.server-face { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 1.2rem 1.2rem 1rem; overflow: hidden; border: 1px solid rgba(225,255,254,.78); border-radius: 1.3rem; background: linear-gradient(155deg, #3f7080 0%, #102d3b 25%, #071621 73%, #06101a 100%); box-shadow: inset .18rem .18rem 0 rgba(255,255,255,.22), inset 0 0 2.8rem rgba(17,213,216,.16), 0 0 0 .18rem rgba(17,213,216,.07); transform: translateZ(1.7rem); }
.server-face:before { position: absolute; inset: .55rem; border: 1px solid rgba(185,245,242,.18); border-radius: .9rem; background: linear-gradient(115deg, rgba(255,255,255,.14), transparent 23%); content: ""; pointer-events: none; }
.server-face:after { position: absolute; right: -30%; bottom: -24%; width: 90%; height: 60%; border: 1px solid rgba(17,213,216,.28); border-radius: 50%; box-shadow: 0 0 2rem rgba(17,213,216,.08); content: ""; transform: rotate(-16deg); pointer-events: none; }
.server-card-shine { position: absolute; z-index: 2; inset: -40% -80%; width: 65%; background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.22) 48%, transparent 56%); transform: translateX(-100%) rotate(10deg); animation: server-shine 6s ease-in-out infinite; pointer-events: none; }
.server-card-side { position: absolute; z-index: -1; top: .5rem; right: -1.75rem; width: 1.8rem; height: calc(100% - 1rem); border: 1px solid rgba(185,245,242,.32); border-left: 0; border-radius: 0 .85rem .85rem 0; background: linear-gradient(90deg, #173746, #06121c); transform: skewY(-9deg) translateZ(.4rem); transform-origin: left center; }
.server-card-header { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: .5rem; color: #d6fbf8; font-size: .5rem; font-weight: 800; letter-spacing: .13em; }
.server-card-brand { display: flex; align-items: center; gap: .38rem; }.server-brand-dot { width: .42rem; height: .42rem; border: 1px solid var(--hq-cyan); border-radius: 50%; background: var(--hq-cyan); box-shadow: 0 0 .6rem var(--hq-cyan); }
.server-status { display: inline-flex; align-items: center; gap: .3rem; color: #8af1b2; font-size: .42rem; letter-spacing: .08em; }.server-status i { width: .3rem; height: .3rem; border-radius: 50%; background: #70f4a4; box-shadow: 0 0 .55rem #70f4a4; animation: led-pulse 1.8s ease-in-out infinite; }
.server-card-kicker { position: relative; z-index: 3; margin-top: 2rem; color: rgba(185,245,242,.72); font-size: .42rem; font-weight: 800; letter-spacing: .1em; }.server-card-kicker span { color: var(--hq-cyan); }
.server-card-title { position: relative; z-index: 3; display: grid; margin-top: .38rem; color: #fff; font-size: 1.72rem; font-weight: 900; line-height: .84; letter-spacing: -.06em; }.server-card-title strong { color: var(--hq-cyan); font-size: 2.14rem; }
.server-card-copy { position: relative; z-index: 3; margin-top: .9rem; color: #a7c8ce; font-size: .56rem; line-height: 1.55; }
.server-rack { position: relative; z-index: 3; display: grid; gap: .42rem; margin-top: 1.4rem; padding: .72rem .66rem; border: 1px solid rgba(185,245,242,.16); border-radius: .55rem; background: rgba(2,10,17,.34); box-shadow: inset 0 0 1.2rem rgba(17,213,216,.06); }.server-rack i { display: flex; align-items: center; gap: .28rem; height: .72rem; border-radius: .2rem; background: linear-gradient(90deg, rgba(185,245,242,.13), rgba(17,213,216,.03)); }.server-rack b { width: .28rem; height: .28rem; border-radius: 50%; background: #13d5d8; box-shadow: 0 0 .45rem rgba(17,213,216,.7); }.server-rack b:nth-child(2) { background: #7567ff; box-shadow: 0 0 .45rem rgba(117,103,255,.65); }.server-rack b:nth-child(3) { background: #70f4a4; box-shadow: 0 0 .45rem rgba(112,244,164,.65); }.server-rack em { margin-left: auto; color: rgba(185,245,242,.58); font-size: .38rem; font-style: normal; letter-spacing: .08em; }
.server-card-footer { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .8rem; border-top: 1px solid rgba(185,245,242,.18); color: #8fb7bf; font-size: .42rem; font-weight: 800; letter-spacing: .08em; }.server-card-footer span { display: inline-flex; align-items: center; gap: .28rem; }.server-card-footer span i { width: .3rem; height: .3rem; border-radius: 50%; background: var(--hq-cyan); box-shadow: 0 0 .4rem var(--hq-cyan); }.server-card-footer strong { color: var(--hq-cyan-soft); font-size: .47rem; }
.stage-orbit, .data-chip { z-index: 4; }.data-chip { display: inline-flex; align-items: center; gap: .38rem; position: absolute; padding: .48rem .7rem; border: 1px solid rgba(185,245,242,.3); border-radius: .55rem; background: rgba(7,17,31,.72); color: var(--hq-cyan-soft); font-size: .65rem; letter-spacing: .06em; box-shadow: 0 1rem 2rem rgba(0,0,0,.18); backdrop-filter: blur(10px); }.data-chip i { width: .34rem; height: .34rem; border-radius: 50%; background: var(--hq-cyan); box-shadow: 0 0 .5rem var(--hq-cyan); }
.threeui-stage.is-three-ready .server-core { transform: translate(-50%, -50%) perspective(1100px) rotateY(calc(-20deg + var(--card-tilt-y, 0deg))) rotateX(calc(7deg + var(--card-tilt-x, 0deg))) scale(1.02); }
.chip-one { top: 20%; left: 8%; }.chip-two { top: 33%; right: 6%; }.chip-three { right: 14%; bottom: 17%; }
@keyframes orbit { to { transform: rotate(336deg); } }
@keyframes server-float { 0%, 100% { margin-top: 0; } 50% { margin-top: -.55rem; } }
@keyframes server-shine { 0%, 52% { transform: translateX(-100%) rotate(10deg); opacity: 0; } 63% { opacity: 1; } 78%, 100% { transform: translateX(260%) rotate(10deg); opacity: 0; } }
@keyframes led-pulse { 0%, 100% { opacity: .55; transform: scale(.86); } 50% { opacity: 1; transform: scale(1.12); } }
.metrics-section { border-block: 1px solid var(--hq-border); background: #091522; }
.metric { display: flex; align-items: baseline; gap: .75rem; min-height: 5.6rem; padding: 1.35rem 0; border-right: 1px solid var(--hq-border); }
.metric strong { color: var(--hq-cyan); font-size: 1.5rem; }.metric span { color: #79919f; font-size: .75rem; }
.section { padding: clamp(4.5rem, 9vw, 8rem) 0; }.section-light { color: #456071; background: var(--hq-silver); }.section-light h2 { color: var(--hq-ink); }.section-light p { color: #627b8a; }.section-heading { max-width: 50rem; }.section-heading h2 { margin: .8rem 0; }.section-heading .text-link { align-self: center; }
.text-link { color: #0a8990; font-size: .88rem; font-weight: 800; }.text-link:hover { color: #05656a; }
.plan-card { position: relative; height: 100%; overflow: hidden; padding: 1.75rem; border: 1px solid rgba(7,17,31,.11); border-radius: 1.25rem; background: rgba(255,255,255,.7); box-shadow: 0 1rem 2.4rem rgba(10,35,50,.07); }.plan-card:before { position: absolute; inset: 0 0 auto; height: .22rem; background: var(--plan-accent); content: ""; }.plan-card-cyan { --plan-accent: #11bfc4; }.plan-card-indigo { --plan-accent: #7567ff; }.plan-card-silver { --plan-accent: #7d96a4; }.plan-card-top { display: flex; justify-content: space-between; color: #6c8795; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }.plan-arrow { color: var(--plan-accent); font-size: 1.2rem; }.plan-card h3 { margin: 1.4rem 0 .6rem; color: var(--hq-ink); font-size: 1.55rem; }.plan-card p { min-height: 4rem; font-size: .88rem; line-height: 1.6; }.plan-card ul { display: grid; gap: .6rem; margin: 1.4rem 0; padding: 0; list-style: none; color: #42606e; font-size: .82rem; }.plan-card li span { display: inline-grid; width: 1.2rem; height: 1.2rem; margin-right: .5rem; place-items: center; border-radius: 50%; background: rgba(17,213,216,.13); color: #0b9ca1; font-weight: 900; }.btn-plan { width: 100%; border: 1px solid rgba(10,137,144,.24); color: #087f86; font-weight: 800; }.btn-plan:hover { color: white; border-color: var(--plan-accent); background: var(--plan-accent); }
.security-section { background: linear-gradient(145deg, #0d1b2a, #091522); }.security-section p { max-width: 33rem; color: #91a9b6; line-height: 1.75; }.security-list { border-top: 1px solid var(--hq-border); }.security-list > div { display: flex; gap: 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--hq-border); }.security-list b { color: var(--hq-cyan); font-size: .75rem; }.security-list strong, .security-list small { display: block; }.security-list strong { color: #fff; }.security-list small { margin-top: .35rem; color: #86a0af; font-size: .83rem; line-height: 1.6; }
.infra-banner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid rgba(7,17,31,.1); border-radius: 1.25rem; background: linear-gradient(120deg, rgba(255,255,255,.85), rgba(185,245,242,.4)); }.infra-banner p { max-width: 35rem; }
.blog-section { background: #0a1624; }.site-footer { padding: 3rem 0 1.2rem; border-top: 1px solid var(--hq-border); background: #06101c; color: #8198a6; }.site-footer p { margin: 1rem 0 0; font-size: .82rem; }.footer-links { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; color: #b7c9d2; font-size: .82rem; }.footer-links a:hover { color: var(--hq-cyan); }.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--hq-border); color: #5d7482; font-size: .72rem; }
@media (max-width: 991.98px) { .navbar-collapse { padding-top: 1rem; }.threeui-stage { min-height: 25rem; }.metric { border-right: 0; }.infra-banner { align-items: flex-start; flex-direction: column; } }
@media (max-width: 575.98px) { .status-strip-note { display: none; }.hero-section { padding-top: 4rem; }.hero-copy { font-size: .98rem; }.threeui-stage { min-height: 24rem; border-radius: 1.25rem; }.server-core { width: 10.5rem; height: 14rem; }.server-face { padding: .88rem .88rem 2.7rem; }.server-card-kicker { margin-top: 1.35rem; font-size: .36rem; }.server-card-title { font-size: 1.28rem; }.server-card-title strong { font-size: 1.62rem; }.server-card-copy { margin-top: .58rem; font-size: .45rem; }.server-rack { gap: .3rem; margin-top: .85rem; padding: .5rem; }.server-rack i { height: .56rem; }.server-rack b { width: .22rem; height: .22rem; }.server-card-footer { position: absolute; right: .88rem; bottom: .78rem; left: .88rem; padding-top: .55rem; font-size: .34rem; }.server-card-footer strong { font-size: .37rem; }.data-chip { font-size: .58rem; }.chip-one { top: 13%; }.chip-two { top: 25%; }.chip-three { bottom: 11%; }.hero-proof { display: grid; gap: .55rem; }.footer-bottom { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.stage-orbit, .server-core, .server-card-shine, .server-status i { animation: none; } }
.app-page { min-height: 100vh; background: linear-gradient(145deg, #edf4f7 0%, #d7e5eb 100%); color: #3e5b6b; }
.app-main { min-height: calc(100vh - 10rem); }
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; background: radial-gradient(circle at 20% 10%, rgba(17, 213, 216, .16), transparent 24rem), linear-gradient(145deg, var(--hq-ink), var(--hq-navy)); }
.auth-shell { width: min(100%, 31rem); }
.auth-card { padding: clamp(1.5rem, 5vw, 2.75rem); border: 1px solid rgba(185, 245, 242, .2); border-radius: 1.3rem; background: rgba(13, 27, 42, .82); box-shadow: var(--hq-shadow); }
.auth-card h1 { max-width: none; margin: .8rem 0; font-size: clamp(2.2rem, 8vw, 3.8rem); }
.auth-card p { color: #91a9b6; line-height: 1.65; }
.auth-card .form-label { color: #bdd0d8; font-size: .82rem; font-weight: 700; }
.auth-card .form-control { border-color: rgba(185, 245, 242, .22); background: rgba(7, 17, 31, .54); color: #f3f8fa; }
.auth-card .form-control:focus { border-color: var(--hq-cyan); background: rgba(7, 17, 31, .8); color: #fff; box-shadow: 0 0 0 .2rem rgba(17, 213, 216, .13); }
.auth-footnote { margin: 1.5rem 0 0; color: #7894a3 !important; font-size: .85rem; text-align: center; }.auth-footnote a { color: var(--hq-cyan-soft); font-weight: 700; }
.auth-legal { margin: 1rem 0 0; color: #7894a3; font-size: .75rem; text-align: center; }
.panel-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; padding: clamp(1.5rem, 5vw, 3rem); border: 1px solid rgba(7, 17, 31, .1); border-radius: 1.25rem; background: rgba(255, 255, 255, .74); box-shadow: 0 1rem 2rem rgba(10, 35, 50, .07); }.panel-heading h1 { max-width: none; margin: .8rem 0; color: var(--hq-ink); font-size: clamp(2.2rem, 5vw, 4.5rem); }.panel-heading p { max-width: 38rem; margin: 0; color: #627b8a; }.admin-badge { padding: .5rem .7rem; border: 1px solid rgba(117, 103, 255, .22); border-radius: 999px; color: #6357d7; background: rgba(117, 103, 255, .08); font-size: .75rem; font-weight: 800; white-space: nowrap; }
.dashboard-card { display: grid; gap: .45rem; padding: 1.5rem; border: 1px solid rgba(7, 17, 31, .1); border-radius: 1rem; background: rgba(255, 255, 255, .74); }.dashboard-card span { color: #6b8795; font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }.dashboard-card strong { color: var(--hq-ink); font-size: 1.6rem; }.dashboard-card small { color: #76909d; }.dashboard-card-accent { border-color: rgba(17, 213, 216, .28); background: linear-gradient(145deg, rgba(255, 255, 255, .86), rgba(17, 213, 216, .08)); }.dashboard-card-accent strong { color: #087f86; font-size: 1.35rem; }
.content-page-card { padding: clamp(1.5rem, 5vw, 4rem); border: 1px solid rgba(7, 17, 31, .1); border-radius: 1.25rem; background: rgba(255, 255, 255, .76); box-shadow: 0 1rem 2rem rgba(10, 35, 50, .07); }.content-page-card h1 { max-width: 12ch; margin: .8rem 0 1rem; color: var(--hq-ink); font-size: clamp(2.5rem, 7vw, 5.5rem); }.content-lead { max-width: 45rem; color: #617b89; font-size: 1.08rem; line-height: 1.75; }.content-page-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 3rem; }.content-page-grid section { min-height: 12rem; padding: 1.25rem; border: 1px solid rgba(7, 17, 31, .1); border-radius: .9rem; background: rgba(232, 238, 242, .62); }.content-number { color: #0b9ca1; font-size: .7rem; font-weight: 900; letter-spacing: .1em; }.content-page-grid h2 { margin: 1.4rem 0 .5rem; color: var(--hq-ink); font-size: 1.1rem; letter-spacing: -.02em; }.content-page-grid p { color: #637c8a; font-size: .86rem; line-height: 1.65; }
.page-hero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 3rem; min-height: 24rem; margin-bottom: 4rem; padding: clamp(2rem, 6vw, 5rem); overflow: hidden; border-radius: 1.5rem; }.page-hero-dark { color: var(--hq-text); background: radial-gradient(circle at 88% 15%, rgba(17,213,216,.18), transparent 18rem), linear-gradient(135deg, #102b3e, #07111f 72%); box-shadow: var(--hq-shadow); }.page-hero-light { color: #4d6876; background: linear-gradient(135deg, #fff, #d9e9ee); box-shadow: 0 1.5rem 3rem rgba(10,35,50,.09); }.page-hero h1 { max-width: 13ch; margin: 1rem 0; font-size: clamp(2.8rem, 6vw, 5.5rem); }.page-hero-light h1 { color: var(--hq-ink); }.page-hero p { max-width: 42rem; margin: 0; color: #95afbb; font-size: 1.04rem; line-height: 1.75; }.page-hero-light p { color: #627d8b; }.page-hero-orb { display: grid; width: 13rem; height: 13rem; flex: 0 0 13rem; place-items: center; border: 1px solid rgba(185,245,242,.4); border-radius: 50%; background: radial-gradient(circle, rgba(17,213,216,.28), rgba(17,213,216,.04) 55%, transparent 56%); box-shadow: 0 0 5rem rgba(17,213,216,.14); transform: rotate(-10deg); }.page-hero-orb span { color: var(--hq-cyan); font-size: 4rem; font-weight: 900; letter-spacing: -.1em; }.page-hero-orb small { margin-top: -3rem; color: #b9f5f2; font-size: .65rem; letter-spacing: .12em; text-align: center; text-transform: uppercase; }.page-section-intro { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }.section-kicker { color: #0b9ca1; font-size: .68rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }.page-section-intro h2, .comparison-heading h2, .article-grid-heading h2 { margin: .65rem 0 .45rem; color: var(--hq-ink); font-size: clamp(2rem, 4vw, 3.3rem); }.page-section-intro p { margin: 0; color: #6d8794; }.plan-catalog-grid { margin-bottom: 4rem; }.catalog-card { position: relative; display: flex; height: 100%; min-height: 31rem; flex-direction: column; padding: 1.8rem; overflow: hidden; border: 1px solid rgba(7,17,31,.1); border-radius: 1.2rem; background: rgba(255,255,255,.86); box-shadow: 0 1.3rem 2.5rem rgba(10,35,50,.08); }.catalog-card:before { position: absolute; inset: 0 0 auto; height: .28rem; background: var(--plan-accent); content: ""; }.catalog-card-cyan { --plan-accent: #11bfc4; }.catalog-card-indigo { --plan-accent: #7567ff; }.catalog-card-silver { --plan-accent: #7d96a4; }.catalog-card-top { display: flex; justify-content: space-between; color: #6b8795; font-size: .7rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }.catalog-card-top a { color: var(--plan-accent); font-size: 1.3rem; }.catalog-card h2 { margin: 1.5rem 0 .6rem; color: var(--hq-ink); font-size: 1.8rem; }.catalog-card > p { min-height: 4.4rem; color: #66818f; line-height: 1.65; }.catalog-audience { display: grid; gap: .25rem; margin: 1.2rem 0; padding: .8rem .9rem; border: 1px solid rgba(7,17,31,.09); border-radius: .7rem; background: #edf4f7; }.catalog-audience span { color: #77919f; font-size: .68rem; text-transform: uppercase; }.catalog-audience strong { color: #19384a; font-size: .82rem; }.catalog-feature-list { display: grid; gap: .7rem; margin: 0 0 1.5rem; padding: 0; list-style: none; color: #42606e; font-size: .84rem; }.catalog-feature-list i { margin-right: .5rem; color: var(--plan-accent); font-style: normal; font-weight: 900; }.catalog-card .btn-plan { margin-top: auto; border-color: color-mix(in srgb, var(--plan-accent) 40%, transparent); }.comparison-panel { margin-bottom: 4rem; padding: clamp(1.25rem, 4vw, 2.4rem); border: 1px solid rgba(7,17,31,.1); border-radius: 1.2rem; background: rgba(255,255,255,.75); }.comparison-heading { display: flex; justify-content: space-between; gap: 2rem; align-items: end; margin-bottom: 1.5rem; }.comparison-note { color: #6c8795; font-size: .8rem; }.comparison-table { width: 100%; min-width: 42rem; border-collapse: collapse; color: #4f6b79; font-size: .85rem; }.comparison-table th, .comparison-table td { padding: 1rem .8rem; border-bottom: 1px solid rgba(7,17,31,.1); text-align: left; }.comparison-table thead th { color: var(--hq-ink); font-size: .78rem; }.comparison-table tbody th { color: #6d8794; font-weight: 700; }.choice-banner, .status-card { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 4rem; padding: clamp(1.5rem, 5vw, 3rem); border-radius: 1.2rem; color: #e8f7f8; background: linear-gradient(135deg, #0d3042, #07111f); }.choice-banner h2, .status-card h2 { max-width: 18ch; margin: .7rem 0 0; font-size: clamp(1.7rem, 4vw, 3rem); }.choice-banner .section-kicker, .status-card .section-kicker { color: var(--hq-cyan); }.detail-hero { margin-bottom: 2rem; padding: clamp(1.5rem, 5vw, 4rem); border-radius: 1.4rem; background: linear-gradient(135deg, #eaf4f7, #cfe3e9); }.back-link { display: inline-block; margin-bottom: 2rem; color: #0a8990; font-size: .84rem; font-weight: 800; }.detail-hero-grid { display: grid; grid-template-columns: 1fr 15rem; gap: 3rem; align-items: center; }.detail-hero h1, .article-detail h1 { max-width: 12ch; margin: .8rem 0 1rem; color: var(--hq-ink); font-size: clamp(2.8rem, 7vw, 5.8rem); }.detail-hero p { max-width: 40rem; color: #587381; font-size: 1.05rem; line-height: 1.75; }.detail-emblem { display: grid; width: 14rem; height: 14rem; place-items: center; align-content: center; gap: .4rem; border: 1px solid rgba(17,213,216,.44); border-radius: 1.6rem; background: linear-gradient(145deg, #143c4d, #07111f); box-shadow: -1.4rem 1.4rem 0 rgba(7,17,31,.12); transform: rotate(6deg); }.detail-emblem span { color: var(--hq-cyan); font-size: 2.5rem; font-weight: 900; }.detail-emblem strong { color: #fff; font-size: .7rem; letter-spacing: .16em; }.detail-emblem small { max-width: 8rem; color: #8eabb6; font-size: .68rem; text-align: center; }.detail-emblem-indigo { border-color: rgba(117,103,255,.65); }.detail-emblem-indigo span { color: #aaa2ff; }.detail-emblem-silver { border-color: rgba(184,196,207,.7); }.detail-emblem-silver span { color: #e8eef2; }.detail-layout { margin-bottom: 4rem; }.detail-block, .resource-card { height: 100%; margin-bottom: 1.5rem; padding: clamp(1.25rem, 4vw, 2.2rem); border: 1px solid rgba(7,17,31,.1); border-radius: 1.2rem; background: rgba(255,255,255,.76); }.detail-block h2, .resource-card h2 { margin: .7rem 0 1.8rem; color: var(--hq-ink); font-size: clamp(1.6rem, 3vw, 2.4rem); }.detail-feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }.detail-feature-grid div { display: grid; gap: .4rem; padding: 1rem; border-radius: .8rem; background: #edf4f7; }.detail-feature-grid b { color: #0b9ca1; font-size: .7rem; }.detail-feature-grid strong { color: #17394b; font-size: .88rem; }.detail-feature-grid small { color: #77919f; font-size: .72rem; }.resource-card dl { display: grid; gap: .8rem; margin: 0; }.resource-card dl div { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .8rem; border-bottom: 1px solid rgba(7,17,31,.1); }.resource-card dt { color: #76909d; font-size: .8rem; }.resource-card dd { margin: 0; color: #17394b; font-size: .8rem; font-weight: 800; }.resource-note { margin: 1.5rem 0; color: #77919f; font-size: .78rem; line-height: 1.55; }.btn-dark { color: #fff; background: var(--hq-ink); }.btn-dark:hover { color: #fff; background: #14364a; }.steps-list { display: grid; gap: 1rem; }.steps-list > div { display: flex; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid rgba(7,17,31,.1); }.steps-list b { color: #0b9ca1; font-size: .72rem; }.steps-list strong, .steps-list small { display: block; }.steps-list strong { color: #17394b; }.steps-list small { margin-top: .3rem; color: #77919f; font-size: .76rem; }.security-page-hero { margin-bottom: 0; }.shield-visual { position: relative; display: grid; width: 15rem; height: 16rem; place-items: center; flex: 0 0 15rem; border: 1px solid rgba(17,213,216,.46); clip-path: polygon(50% 0, 92% 17%, 84% 73%, 50% 100%, 16% 73%, 8% 17%); background: linear-gradient(145deg, rgba(17,213,216,.26), rgba(117,103,255,.13)); box-shadow: 0 0 4rem rgba(17,213,216,.18); }.shield-visual span { z-index: 2; color: #dffefd; font-size: 3rem; font-weight: 900; }.shield-visual i { position: absolute; width: 75%; height: 75%; border: 1px solid rgba(185,245,242,.35); border-radius: 50%; }.shield-visual i:last-child { width: 48%; height: 48%; border-color: rgba(117,103,255,.45); }.security-matrix, .security-story, .faq-section, .architecture-section, .infrastructure-cards, .support-options, .support-faq, .article-grid, .featured-article { max-width: 74rem; margin: 0 auto; }.security-matrix { padding: 4rem 0; }.matrix-heading { max-width: 38rem; margin-bottom: 2rem; }.matrix-heading h2, .security-story h2, .faq-section h2, .architecture-section h2, .infrastructure-cards h2, .support-faq h2, .article-grid-heading h2 { margin: .7rem 0; color: var(--hq-ink); font-size: clamp(2rem, 4vw, 3.5rem); }.matrix-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow: hidden; border: 1px solid rgba(7,17,31,.1); border-radius: 1.1rem; background: rgba(7,17,31,.1); }.matrix-grid article { min-height: 16rem; padding: 1.35rem; background: rgba(255,255,255,.8); }.matrix-grid b, .support-number { color: #0b9ca1; font-size: .7rem; letter-spacing: .1em; }.matrix-grid h3 { margin: 2.5rem 0 .55rem; color: var(--hq-ink); font-size: 1.05rem; }.matrix-grid p, .security-story p, .faq-section p, .architecture-section p, .infrastructure-cards p, .support-faq p { color: #627b89; font-size: .84rem; line-height: 1.7; }.security-story { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-bottom: 4rem; padding: clamp(1.5rem, 5vw, 3rem); border-radius: 1.2rem; background: #e5f0f3; }.security-story-copy p { max-width: 34rem; }.security-checks { display: grid; gap: .8rem; }.security-checks div { display: flex; align-items: center; gap: .8rem; padding: .9rem; border: 1px solid rgba(7,17,31,.1); border-radius: .7rem; background: rgba(255,255,255,.7); color: #17394b; font-size: .82rem; font-weight: 800; }.security-checks i { display: grid; width: 1.6rem; height: 1.6rem; place-items: center; border-radius: 50%; color: #fff; background: #0b9ca1; font-style: normal; }.faq-section { padding: 0 0 4rem; }.faq-section details, .support-faq details { padding: 1.1rem 0; border-bottom: 1px solid rgba(7,17,31,.12); }.faq-section summary, .support-faq summary { cursor: pointer; color: #17394b; font-size: .9rem; font-weight: 800; }.faq-section p, .support-faq p { max-width: 42rem; margin: .8rem 0 0; }.infra-signal { display: grid; grid-template-columns: auto 1fr; column-gap: .55rem; align-items: center; min-width: 10rem; padding: 1rem; border: 1px solid rgba(7,17,31,.12); border-radius: .8rem; background: rgba(255,255,255,.65); }.infra-signal span, .status-pill i { width: .55rem; height: .55rem; grid-row: span 2; border-radius: 50%; background: #4ade80; box-shadow: 0 0 .65rem #4ade80; }.infra-signal strong { color: #17394b; font-size: .85rem; }.infra-signal small { color: #7893a0; font-size: .7rem; }.architecture-section { padding: 4rem 0; }.architecture-flow { display: flex; align-items: stretch; gap: 1rem; margin-top: 2rem; }.architecture-flow > div { display: grid; min-height: 9rem; flex: 1; gap: .5rem; align-content: center; padding: 1.1rem; border: 1px solid rgba(7,17,31,.1); border-radius: .9rem; background: rgba(255,255,255,.76); }.architecture-flow b { color: #0b9ca1; font-size: .7rem; }.architecture-flow strong { color: var(--hq-ink); font-size: 1.25rem; }.architecture-flow small { color: #77919f; font-size: .75rem; }.architecture-flow > span { align-self: center; color: #0b9ca1; font-weight: 900; }.infrastructure-cards, .support-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 4rem; }.infrastructure-cards article, .support-options article { padding: 1.5rem; border: 1px solid rgba(7,17,31,.1); border-radius: 1rem; background: rgba(255,255,255,.74); }.infra-icon { color: #0b9ca1; font-size: 2rem; }.infrastructure-cards h2, .support-options h2 { margin-top: 1.8rem; font-size: 1.3rem; }.infrastructure-cards a, .support-options a { color: #0b8990; font-size: .8rem; font-weight: 800; }.status-card { margin-bottom: 4rem; }.status-card p { margin: .6rem 0 0; color: #91a9b6; font-size: .84rem; }.status-pill { display: inline-flex; align-items: center; gap: .5rem; color: #b9f5f2; font-size: .78rem; white-space: nowrap; }.blog-page-hero { margin-bottom: 2rem; }.blog-count { display: flex; align-items: end; gap: .7rem; color: #9bb4c0; }.blog-count strong { color: var(--hq-cyan); font-size: 5rem; line-height: .8; }.blog-count span { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }.featured-article { display: flex; justify-content: space-between; gap: 2rem; margin-bottom: 4rem; padding: clamp(1.5rem, 5vw, 3rem); border-radius: 1.2rem; color: #e8f7f8; background: linear-gradient(135deg, #133a4c, #07111f); }.featured-article h2 { max-width: 18ch; margin: .8rem 0; color: #fff; font-size: clamp(1.9rem, 4vw, 3.2rem); }.featured-article p { max-width: 42rem; color: #9bb5c1; line-height: 1.7; }.article-category { color: #0b9ca1; font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }.featured-article .article-category { color: var(--hq-cyan); }.featured-index { color: var(--hq-cyan); font-size: 4rem; font-weight: 900; letter-spacing: -.1em; }.featured-index span { color: #6d8794; font-size: 1rem; letter-spacing: 0; }.article-grid { padding-bottom: 4rem; }.article-grid-heading { margin-bottom: 1.5rem; }.article-card { display: flex; min-height: 18rem; flex-direction: column; padding: 1.35rem; border: 1px solid rgba(7,17,31,.1); border-radius: 1rem; background: rgba(255,255,255,.74); }.article-card-meta, .article-card-bottom { display: flex; justify-content: space-between; gap: .8rem; color: #7893a0; font-size: .7rem; }.article-card-meta span:first-child { color: #0b9ca1; font-weight: 800; }.article-card h3 { margin: 2rem 0 .6rem; color: var(--hq-ink); font-size: 1.25rem; line-height: 1.15; }.article-card p { color: #627b89; font-size: .83rem; line-height: 1.65; }.article-card-bottom { align-items: center; margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(7,17,31,.1); }.article-card-bottom a { color: #0b8990; font-weight: 800; }.article-detail { max-width: 60rem; margin: 0 auto; padding: 1rem 0 4rem; }.article-detail-head { padding: 2rem 0 3rem; border-bottom: 1px solid rgba(7,17,31,.1); }.article-detail-head h1 { max-width: 16ch; }.article-detail-head > p { max-width: 42rem; color: #627b89; font-size: 1.08rem; line-height: 1.75; }.article-detail-meta { margin-top: 1.3rem; color: #7893a0; font-size: .78rem; }.article-detail-meta span { margin: 0 .5rem; color: #0b9ca1; }.article-detail-body { max-width: 47rem; padding: 3rem 0; }.article-detail-body p { color: #365564; font-size: 1rem; line-height: 1.9; }.article-next { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.4rem; border-radius: 1rem; color: #e8f7f8; background: #0d3042; }.article-next span { color: var(--hq-cyan); font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }.article-next strong { margin-right: auto; }.support-page-hero { margin-bottom: 2rem; }.support-orbit { display: grid; width: 13rem; height: 13rem; place-items: center; border: 1px solid rgba(7,17,31,.18); border-radius: 50%; color: #0b9ca1; font-size: 5rem; font-weight: 900; background: radial-gradient(circle, rgba(17,213,216,.22), transparent 64%); }.support-options { margin-top: 3rem; }.support-options h2 { color: var(--hq-ink); }.support-options p { min-height: 3.2rem; color: #627b89; font-size: .83rem; line-height: 1.65; }.support-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; padding-bottom: 4rem; }.support-faq h2 { color: var(--hq-ink); }.support-faq details { margin-bottom: .3rem; }
@media (max-width: 767.98px) { .content-page-grid { grid-template-columns: 1fr; } }
@media (max-width: 991.98px) { .page-hero { align-items: flex-start; flex-direction: column; }.page-hero-orb, .shield-visual, .support-orbit { align-self: flex-end; }.matrix-grid { grid-template-columns: repeat(2, 1fr); }.architecture-flow { flex-wrap: wrap; }.architecture-flow > div { min-width: calc(50% - .5rem); }.architecture-flow > span { display: none; }.security-story, .support-faq { grid-template-columns: 1fr; }.infrastructure-cards, .support-options { grid-template-columns: 1fr; }.detail-hero-grid { grid-template-columns: 1fr; }.detail-emblem { justify-self: end; } }
@media (max-width: 575.98px) { .panel-heading { align-items: flex-start; flex-direction: column; }.panel-heading .btn { width: 100%; }.auth-page { align-items: start; padding-top: 4rem; } }
@media (max-width: 575.98px) { .page-hero { min-height: 0; margin-bottom: 2rem; padding: 1.5rem; border-radius: 1rem; }.page-hero h1 { font-size: clamp(2.4rem, 13vw, 4rem); }.page-hero-orb, .shield-visual, .support-orbit { width: 9rem; height: 9rem; min-width: 9rem; align-self: center; }.page-hero-orb span { font-size: 3rem; }.shield-visual { flex-basis: 9rem; }.page-section-intro, .comparison-heading, .featured-article, .choice-banner, .status-card, .article-next { align-items: flex-start; flex-direction: column; }.page-section-intro .btn, .choice-banner .btn, .article-next .btn { width: 100%; }.catalog-card { min-height: 0; }.comparison-panel { padding: 1rem; }.comparison-note { display: block; }.detail-hero-grid { gap: 1.5rem; }.detail-emblem { width: 10rem; height: 10rem; justify-self: center; }.detail-feature-grid { grid-template-columns: 1fr; }.matrix-grid { grid-template-columns: 1fr; }.matrix-grid article { min-height: 0; }.architecture-flow > div { min-width: 100%; }.featured-index { align-self: flex-end; }.article-detail h1 { font-size: clamp(2.4rem, 12vw, 4rem); }.support-options { margin-top: 1.5rem; } }

/* Hostinqs 3D hero and offer refinements */
.server-topline { flex-wrap: wrap; align-content: flex-start; row-gap: .2rem; }
.server-topline b { flex: 0 0 auto; }
.catalog-price, .detail-offer { display: inline-flex; align-items: baseline; gap: .55rem; margin: .2rem 0 1rem; padding: .55rem .7rem; border: 1px solid rgba(10,137,144,.16); border-radius: .65rem; background: rgba(17,213,216,.06); }
.catalog-price strong, .detail-offer strong { color: #087f86; font-size: .78rem; }
.catalog-price span, .detail-offer span { color: #7893a0; font-size: .72rem; }
.detail-offer { margin: 0 0 1.2rem; }

/* Premium 3D server card: layered chassis, telemetry details and a restrained holographic sweep. */
.threeui-stage { perspective: 1400px; }
.threeui-stage:before { position: absolute; z-index: 1; top: 50%; left: 50%; width: 17rem; height: 17rem; border: 1px solid rgba(185,245,242,.17); border-radius: 50%; box-shadow: 0 0 4rem rgba(17,213,216,.12), inset 0 0 3rem rgba(117,103,255,.08); content: ""; transform: translate(-50%, -50%) rotateX(66deg) rotateZ(18deg); animation: core-ring 8s ease-in-out infinite; pointer-events: none; }
.threeui-stage:after { position: absolute; z-index: 1; inset: 12% 22%; border: 1px solid rgba(117,103,255,.14); border-radius: 1.5rem; content: ""; transform: rotate(-14deg) translateZ(-1rem); pointer-events: none; }
.server-core { width: 16rem; height: 20.5rem; transform-origin: 50% 58%; filter: drop-shadow(-1.8rem 2.5rem 1.8rem rgba(0,0,0,.45)); }
.server-core:before { position: absolute; z-index: -4; right: -1.35rem; bottom: .05rem; width: 11rem; height: 1.6rem; border-radius: 50%; background: rgba(0,0,0,.45); box-shadow: 0 0 2rem rgba(17,213,216,.14); content: ""; transform: rotate(-8deg) translateZ(-3rem); filter: blur(.35rem); }
.server-card-depth { border-color: rgba(127,241,239,.55); background: linear-gradient(150deg, #4d8593 0%, #183c4c 20%, #081923 76%); box-shadow: inset .2rem .2rem 0 rgba(255,255,255,.12), inset -.55rem -.55rem 1.2rem rgba(0,0,0,.2); }
.server-depth-one { right: -.68rem; transform: translateZ(-1.35rem) translate(.5rem, .46rem) skewY(-2deg); }
.server-depth-two { right: -1.3rem; transform: translateZ(-2.5rem) translate(.95rem, .9rem) skewY(-4deg); opacity: .78; box-shadow: 1.4rem 1.3rem 0 rgba(0,0,0,.18), inset 0 0 1.3rem rgba(17,213,216,.08); }
.server-face { padding: 1.25rem 1.25rem .95rem; border-width: 1px; border-radius: 1.4rem; background: radial-gradient(circle at 78% 12%, rgba(117,103,255,.3), transparent 26%), linear-gradient(145deg, #457d8c 0%, #123746 22%, #071a27 61%, #030b13 100%); box-shadow: inset .2rem .2rem 0 rgba(255,255,255,.25), inset -.35rem -.45rem 1.4rem rgba(0,0,0,.3), inset 0 0 3.2rem rgba(17,213,216,.17), 0 0 0 .2rem rgba(17,213,216,.08), 0 .7rem 1.8rem rgba(0,0,0,.22); }
.server-face:before { inset: .62rem; border-color: rgba(185,245,242,.2); background: linear-gradient(120deg, rgba(255,255,255,.19), transparent 18%, transparent 72%, rgba(17,213,216,.06)); }
.server-face:after { right: -32%; bottom: -21%; width: 96%; height: 62%; border-color: rgba(17,213,216,.38); box-shadow: 0 0 2.5rem rgba(17,213,216,.12), 0 0 0 .45rem rgba(17,213,216,.035); }
.server-card-shine { width: 72%; background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.04) 35%, rgba(255,255,255,.36) 49%, transparent 58%); animation-duration: 5s; }
.server-card-scan { position: absolute; z-index: 2; top: 18%; left: 8%; width: 84%; height: 1px; background: linear-gradient(90deg, transparent, rgba(17,213,216,.9), transparent); box-shadow: 0 0 .7rem rgba(17,213,216,.6); opacity: .4; animation: card-scan 4.8s ease-in-out infinite; pointer-events: none; }
.server-card-side { top: .65rem; right: -2rem; width: 2.05rem; border-color: rgba(185,245,242,.42); background: linear-gradient(90deg, #1b4b5b, #07141e 84%); box-shadow: inset -.4rem 0 .7rem rgba(0,0,0,.25); }
.server-card-side:before { position: absolute; top: 9%; left: .42rem; width: .28rem; height: 82%; border-radius: 1rem; background: repeating-linear-gradient(to bottom, rgba(17,213,216,.7) 0 .12rem, transparent .12rem .6rem); box-shadow: 0 0 .8rem rgba(17,213,216,.25); content: ""; }
.server-card-bottom { position: absolute; z-index: -2; right: -.42rem; bottom: -.72rem; left: .25rem; height: 1rem; border: 1px solid rgba(127,241,239,.45); border-top: 0; border-radius: 0 0 .8rem .8rem; background: linear-gradient(180deg, #102f3d, #06111a); transform: translateZ(.2rem) skewX(-11deg); box-shadow: 0 .45rem .7rem rgba(0,0,0,.22); }
.server-card-bottom span { display: inline-block; width: .34rem; height: .34rem; margin: .25rem .2rem; border: 1px solid rgba(185,245,242,.45); border-radius: 50%; background: #0e6070; box-shadow: 0 0 .4rem rgba(17,213,216,.5); }
.server-card-header { font-size: .52rem; letter-spacing: .16em; }
.server-card-brand { text-shadow: 0 0 .8rem rgba(185,245,242,.45); }
.server-status { padding: .25rem .38rem; border: 1px solid rgba(112,244,164,.25); border-radius: .3rem; background: rgba(112,244,164,.06); font-size: .4rem; }
.server-card-badge { position: relative; z-index: 3; display: flex; justify-content: space-between; margin-top: 1.05rem; color: rgba(185,245,242,.62); font-size: .38rem; font-weight: 800; letter-spacing: .12em; }
.server-card-badge span:first-child { padding: .2rem .34rem; border: 1px solid rgba(17,213,216,.38); border-radius: .2rem; color: var(--hq-cyan-soft); background: rgba(17,213,216,.09); }
.server-card-kicker { margin-top: .72rem; font-size: .4rem; letter-spacing: .13em; }
.server-card-title { margin-top: .42rem; font-size: 1.82rem; text-shadow: .12rem .18rem 0 rgba(0,0,0,.28), 0 0 1.1rem rgba(255,255,255,.08); }
.server-card-title strong { font-size: 2.28rem; text-shadow: .13rem .18rem 0 rgba(0,0,0,.3), 0 0 1.4rem rgba(17,213,216,.35); }
.server-card-copy { display: flex; align-items: center; justify-content: space-between; margin-top: .78rem; color: #b4d9dc; font-size: .55rem; }
.server-card-copy i { display: grid; width: 1.2rem; height: 1.2rem; place-items: center; border: 1px solid rgba(17,213,216,.45); border-radius: 50%; color: var(--hq-cyan); font-style: normal; }
.server-rack { gap: .38rem; margin-top: .95rem; padding: .62rem .58rem; border-color: rgba(185,245,242,.2); background: linear-gradient(180deg, rgba(2,10,17,.55), rgba(17,213,216,.05)); }
.server-rack i { position: relative; overflow: hidden; height: .68rem; border: 1px solid rgba(185,245,242,.08); }
.server-rack i:after { position: absolute; top: 0; bottom: 0; left: -45%; width: 42%; background: linear-gradient(90deg, transparent, rgba(185,245,242,.27), transparent); content: ""; animation: rack-scan 3.8s ease-in-out infinite; }
.server-rack i:nth-child(2):after { animation-delay: .7s; }.server-rack i:nth-child(3):after { animation-delay: 1.4s; }
.server-card-stats { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; margin-top: .75rem; }
.server-card-stats span { position: relative; display: flex; align-items: baseline; justify-content: center; gap: .08rem; padding: .72rem .15rem .28rem; border: 1px solid rgba(185,245,242,.13); border-radius: .3rem; background: rgba(185,245,242,.045); }
.server-card-stats small { position: absolute; top: .22rem; left: 0; width: 100%; margin: 0; color: rgba(185,245,242,.5); font-size: .32rem; font-weight: 800; letter-spacing: .08em; text-align: center; }
.server-card-stats strong { color: #f0ffff; font-size: .62rem; }.server-card-stats em { color: var(--hq-cyan); font-size: .32rem; font-style: normal; }
.server-card-footer { padding-top: .62rem; font-size: .39rem; letter-spacing: .09em; }
.server-card-footer strong { font-size: .43rem; }.server-card-id { color: rgba(185,245,242,.42); font-size: .34rem; }
.data-chip { border-radius: .7rem; box-shadow: 0 1rem 2rem rgba(0,0,0,.22), inset 0 0 1rem rgba(17,213,216,.05); }
@keyframes core-ring { 0%, 100% { opacity: .62; transform: translate(-50%, -50%) rotateX(66deg) rotateZ(18deg) scale(.96); } 50% { opacity: 1; transform: translate(-50%, -50%) rotateX(66deg) rotateZ(198deg) scale(1.04); } }
@keyframes card-scan { 0%, 16% { top: 18%; opacity: 0; } 28% { opacity: .6; } 76% { top: 82%; opacity: .5; } 90%, 100% { top: 84%; opacity: 0; } }
@keyframes rack-scan { 0%, 38% { left: -45%; opacity: 0; } 52% { opacity: 1; } 78%, 100% { left: 118%; opacity: 0; } }
@media (max-width: 575.98px) {
    .threeui-stage:before { width: 13rem; height: 13rem; }
    .server-core { width: 11rem; height: 15rem; }
    .server-face { padding: .9rem .9rem .72rem; }
    .server-card-badge { margin-top: .72rem; font-size: .31rem; }
    .server-card-kicker { margin-top: .55rem; font-size: .32rem; }
    .server-card-title { margin-top: .3rem; font-size: 1.32rem; }
    .server-card-title strong { font-size: 1.68rem; }
    .server-card-copy { margin-top: .52rem; font-size: .42rem; }
    .server-card-copy i { width: .9rem; height: .9rem; }
    .server-rack { gap: .25rem; margin-top: .72rem; padding: .46rem; }
    .server-rack i { height: .52rem; }
    .server-rack b { width: .2rem; height: .2rem; }
    .server-card-stats { margin-top: .54rem; }
    .server-card-stats span { padding: .58rem .1rem .22rem; }
    .server-card-stats small { top: .16rem; font-size: .27rem; }
    .server-card-stats strong { font-size: .5rem; }
    .server-card-footer { right: .72rem; bottom: .58rem; left: .72rem; padding-top: .42rem; font-size: .3rem; }
    .server-card-footer strong { font-size: .32rem; }.server-card-id { font-size: .27rem; }
    .server-card-side { right: -1.35rem; width: 1.4rem; }
    .server-depth-one { right: -.48rem; }.server-depth-two { right: -.88rem; }
}
@media (prefers-reduced-motion: reduce) { .threeui-stage:before, .server-card-scan, .server-rack i:after { animation: none; } }

/* Hardware pass: the hero card reads as a physical 3D compute module, not a flat placeholder. */
.server-card-shadow { position: absolute; z-index: -6; right: -2.2rem; bottom: -1.2rem; left: .55rem; height: 2rem; border-radius: 50%; background: rgba(0,0,0,.48); box-shadow: 0 0 2.4rem rgba(17,213,216,.22); transform: translateZ(-3.3rem) rotate(-8deg); filter: blur(.55rem); }
.server-card-topdeck { position: absolute; z-index: 6; top: .72rem; right: 1.15rem; left: 1.15rem; display: flex; align-items: center; justify-content: space-between; padding-bottom: .38rem; border-bottom: 1px solid rgba(185,245,242,.13); color: rgba(185,245,242,.48); font-size: .32rem; font-weight: 800; letter-spacing: .14em; pointer-events: none; }
.server-card-topdeck-code { color: rgba(185,245,242,.58); }
.server-card-topdeck-lights { display: inline-flex; gap: .22rem; }
.server-card-topdeck-lights i { width: .26rem; height: .26rem; border: 1px solid rgba(226,255,254,.56); border-radius: 50%; background: #11d5d8; box-shadow: 0 0 .45rem rgba(17,213,216,.85); animation: led-pulse 1.7s ease-in-out infinite; }
.server-card-topdeck-lights i:nth-child(2) { background: #7567ff; box-shadow: 0 0 .45rem rgba(117,103,255,.85); animation-delay: .35s; }
.server-card-topdeck-lights i:nth-child(3) { background: #70f4a4; box-shadow: 0 0 .45rem rgba(112,244,164,.85); animation-delay: .7s; }
.server-card-circuit { position: absolute; z-index: 2; display: grid; gap: .28rem; width: 2.8rem; opacity: .52; pointer-events: none; }
.server-card-circuit i { position: relative; display: block; height: 1px; background: linear-gradient(90deg, transparent, rgba(17,213,216,.84)); }
.server-card-circuit i:after { position: absolute; right: 0; top: -.13rem; width: .26rem; height: .26rem; border: 1px solid rgba(17,213,216,.75); border-radius: 50%; background: #0b2633; box-shadow: 0 0 .35rem rgba(17,213,216,.55); content: ""; }
.server-circuit-one { top: 9.2rem; left: 1.1rem; transform: rotate(-18deg); }
.server-circuit-two { right: 1.05rem; bottom: 6.5rem; transform: rotate(18deg) scaleX(-1); }
.server-card-vent { position: absolute; z-index: 3; right: 1.18rem; bottom: 5.72rem; display: flex; gap: .2rem; padding: .24rem .34rem; border: 1px solid rgba(185,245,242,.12); border-radius: .25rem; background: rgba(1,9,15,.28); transform: skewY(-3deg); }
.server-card-vent i { display: block; width: .18rem; height: .82rem; border-radius: .2rem; background: linear-gradient(180deg, rgba(185,245,242,.7), rgba(17,213,216,.08)); box-shadow: 0 0 .32rem rgba(17,213,216,.18); }
.server-card-side { display: flex; align-items: center; justify-content: center; gap: .38rem; flex-direction: column; }
.server-card-side span { display: block; width: .35rem; height: .35rem; border: 1px solid rgba(185,245,242,.45); border-radius: .08rem; background: #0d5360; box-shadow: 0 0 .45rem rgba(17,213,216,.38); }
.server-card-side span:nth-child(2) { background: #7567ff; box-shadow: 0 0 .45rem rgba(117,103,255,.42); }
.server-card-side span:nth-child(3) { background: #70f4a4; box-shadow: 0 0 .45rem rgba(112,244,164,.42); }
@media (max-width: 575.98px) {
    .server-card-topdeck { top: .55rem; right: .84rem; left: .84rem; font-size: .26rem; }
    .server-card-topdeck-lights i { width: .2rem; height: .2rem; }
    .server-circuit-one { top: 7rem; left: .76rem; width: 2rem; }
    .server-circuit-two { right: .72rem; bottom: 5rem; width: 2rem; }
    .server-card-vent { right: .78rem; bottom: 4.72rem; gap: .14rem; padding: .18rem .24rem; }
    .server-card-vent i { width: .13rem; height: .56rem; }
    .server-card-side span { width: .26rem; height: .26rem; }
    .server-card-shadow { right: -1.2rem; bottom: -.92rem; left: .38rem; }
}
@media (prefers-reduced-motion: reduce) { .server-card-topdeck-lights i { animation: none; } }

/* Payment status accents used by the order operations view. */
.admin-muted { color: #879aa4; font-size: .74rem; }
.audit-metadata { display: block; max-width: 24rem; overflow-wrap: anywhere; color: #6c8795; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .7rem; white-space: pre-wrap; }
.status-pill-authorized { color: #5f52b4; background: #ece9ff; }
.status-pill-failed { color: #8b3c4b; background: #ffe4e8; }
@media (max-width: 575.98px) {
    .server-topline { display: none; }
    .catalog-price, .detail-offer { align-items: flex-start; flex-direction: column; gap: .1rem; }
}

/* Phase 4 — account and order flow */
.order-hero, .order-detail-hero { margin-bottom: 2rem; padding: clamp(1.5rem, 5vw, 3.5rem); border: 1px solid rgba(7,17,31,.1); border-radius: 1.35rem; background: linear-gradient(135deg, #eaf5f7, #cfe3e9); }
.order-hero-grid, .order-detail-heading { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.order-hero h1, .order-detail-hero h1 { max-width: 12ch; margin: .7rem 0; color: var(--hq-ink); font-size: clamp(2.5rem, 6vw, 5rem); }
.order-hero p, .order-detail-hero p { max-width: 40rem; margin: 0; color: #5d7886; line-height: 1.75; }
.order-summary-card { display: grid; min-width: 14rem; gap: .4rem; padding: 1.35rem; border: 1px solid rgba(17,213,216,.35); border-radius: 1rem; background: linear-gradient(145deg, #12384a, #07111f); box-shadow: -1rem 1rem 0 rgba(7,17,31,.09); transform: rotate(2deg); }
.order-summary-card span { color: var(--hq-cyan); font-size: .66rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }.order-summary-card strong { color: #fff; font-size: 1.3rem; }.order-summary-card small { color: #a4bec8; font-size: .75rem; }.order-summary-card b { width: fit-content; margin-top: .7rem; padding: .32rem .5rem; border-radius: 999px; color: #b9f5f2; background: rgba(17,213,216,.12); font-size: .65rem; }
.form-panel, .order-checklist, .order-next-card { height: 100%; padding: clamp(1.3rem, 4vw, 2.3rem); border: 1px solid rgba(7,17,31,.1); border-radius: 1.15rem; background: rgba(255,255,255,.78); box-shadow: 0 1rem 2rem rgba(10,35,50,.06); }.form-panel h2, .order-checklist h2, .order-next-card h2 { margin: .7rem 0 1.5rem; color: var(--hq-ink); font-size: clamp(1.7rem, 4vw, 2.7rem); }.form-panel .form-label { margin-top: .8rem; color: #355768; font-weight: 800; }.form-panel .form-label span { color: #89a0aa; font-size: .75rem; font-weight: 500; }.order-textarea { min-height: 11rem; border-color: rgba(7,17,31,.16); background: #f4f8f9; }.order-textarea:focus { border-color: var(--hq-cyan); box-shadow: 0 0 0 .2rem rgba(17,213,216,.12); }.form-hint { margin: .65rem 0 1.4rem; color: #7893a0; font-size: .76rem; line-height: 1.55; }
.order-checklist { background: linear-gradient(145deg, #0d3042, #07111f); }.order-checklist h2 { color: #fff; }.order-checklist > div { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid rgba(185,245,242,.14); }.order-checklist b { color: var(--hq-cyan); font-size: .72rem; }.order-checklist strong, .order-checklist small { display: block; }.order-checklist strong { color: #e8f7f8; }.order-checklist small { margin-top: .25rem; color: #91a9b6; font-size: .75rem; }.order-checklist .form-hint { color: #91a9b6; }
.order-detail-layout { margin-bottom: 4rem; }.order-detail-heading { align-items: flex-end; }.status-pill { display: inline-flex; align-items: center; width: fit-content; gap: .35rem; padding: .4rem .6rem; border: 1px solid rgba(7,17,31,.1); border-radius: 999px; color: #496675; background: #edf4f7; font-size: .7rem; font-weight: 800; white-space: nowrap; }.status-pill-pending { color: #856a17; background: #fff4cc; }.status-pill-awaiting_payment { color: #5f52b4; background: #ece9ff; }.status-pill-paid { color: #137647; background: #dff8e9; }.status-pill-cancelled, .status-pill-refunded { color: #8b3c4b; background: #ffe4e8; }.order-detail-line { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid rgba(7,17,31,.1); color: #7893a0; font-size: .82rem; }.order-detail-line strong { color: #17394b; }.order-note { margin-top: 1.5rem; padding: 1rem; border-radius: .8rem; background: #edf4f7; }.order-note span { color: #7893a0; font-size: .72rem; font-weight: 800; text-transform: uppercase; }.order-note p { margin: .55rem 0 0; color: #365564; font-size: .85rem; line-height: 1.7; }.order-next-card { background: linear-gradient(145deg, #12384a, #07111f); }.order-next-card h2 { color: #fff; }.order-next-card p { color: #91a9b6; line-height: 1.7; }
.panel-list { padding: clamp(1.3rem, 4vw, 2.2rem); border: 1px solid rgba(7,17,31,.1); border-radius: 1.15rem; background: rgba(255,255,255,.72); }.panel-list-heading, .admin-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }.panel-list-heading h2, .admin-heading-row h1 { margin: .6rem 0 1.3rem; color: var(--hq-ink); font-size: clamp(1.7rem, 4vw, 2.6rem); }.panel-order-list { display: grid; gap: .6rem; }.panel-order-row { display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid rgba(7,17,31,.08); border-radius: .8rem; color: inherit; background: rgba(237,244,247,.55); transition: transform .2s ease, border-color .2s ease, background .2s ease; }.panel-order-row:hover { border-color: rgba(17,213,216,.5); background: #fff; transform: translateX(.2rem); }.panel-order-row > span:first-child { display: grid; gap: .25rem; flex: 1; }.panel-order-row strong { color: #17394b; }.panel-order-row small { color: #7893a0; font-size: .72rem; }.panel-order-row > span:last-child { color: #0b9ca1; font-weight: 900; }.panel-empty, .admin-empty { padding: 1.5rem; border: 1px dashed rgba(7,17,31,.16); border-radius: .8rem; color: #7893a0; font-size: .85rem; }.panel-empty a { color: #0b8990; font-weight: 800; }
.admin-heading-row { margin-bottom: 1.5rem; }.admin-heading-row p { margin: 0; color: #6d8794; }.admin-table-panel { overflow: hidden; border: 1px solid rgba(7,17,31,.1); border-radius: 1.15rem; background: rgba(255,255,255,.78); }.admin-order-table { width: 100%; min-width: 62rem; border-collapse: collapse; color: #4f6b79; font-size: .82rem; }.admin-order-table th, .admin-order-table td { padding: 1rem; border-bottom: 1px solid rgba(7,17,31,.09); text-align: left; vertical-align: middle; }.admin-order-table thead th { color: var(--hq-ink); background: #edf4f7; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }.admin-order-table td > strong, .admin-order-table td > small { display: block; }.admin-order-table td > small { margin-top: .25rem; color: #7893a0; font-size: .7rem; }.admin-status-form { display: flex; min-width: 14rem; align-items: center; gap: .5rem; }.admin-status-form .form-select { min-width: 9rem; border-color: rgba(7,17,31,.14); font-size: .74rem; }
@media (max-width: 767.98px) { .order-hero-grid, .order-detail-heading, .panel-list-heading, .admin-heading-row { align-items: flex-start; flex-direction: column; }.order-summary-card { width: 100%; transform: none; }.panel-order-row { align-items: flex-start; flex-wrap: wrap; }.panel-order-row .status-pill { margin-left: auto; }.admin-heading-row .btn { width: 100%; }.admin-status-form { align-items: stretch; flex-direction: column; }.admin-status-form .btn { width: 100%; } }
.panel-order-amount { color: #0b8990; font-size: .78rem; font-weight: 800; white-space: nowrap; }
.status-pill-provisioning { color: #5f52b4; background: #ece9ff; }
.status-pill-active { color: #137647; background: #dff8e9; }
.status-pill-suspended { color: #8b3c4b; background: #ffe4e8; }
.status-pill-pending { color: #856a17; background: #fff4cc; }
.status-pill-cancelled { color: #8b3c4b; background: #ffe4e8; }
.panel-service-list { display: grid; gap: .8rem; }.panel-service-card { padding: 1.2rem; border: 1px solid rgba(7,17,31,.09); border-radius: .9rem; background: rgba(237,244,247,.55); }.panel-service-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }.panel-service-card h3 { margin: .45rem 0 0; color: #17394b; font-size: 1.15rem; }.service-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.15rem 0 0; }.service-meta div { display: grid; gap: .25rem; }.service-meta dt { color: #7893a0; font-size: .68rem; text-transform: uppercase; }.service-meta dd { margin: 0; color: #365564; font-size: .8rem; font-weight: 700; overflow-wrap: anywhere; }.service-form-panel { max-width: 58rem; margin: 0 auto 4rem; }
@media (max-width: 767.98px) { .panel-service-card-head { flex-direction: column; }.service-meta { grid-template-columns: 1fr; gap: .7rem; } }
.admin-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }.admin-plan-card { padding: 1.35rem; border: 1px solid rgba(7,17,31,.1); border-radius: 1.05rem; background: rgba(255,255,255,.78); box-shadow: 0 1rem 2rem rgba(10,35,50,.05); }.admin-plan-card-top { display: flex; align-items: center; justify-content: space-between; gap: .8rem; color: #7893a0; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.admin-plan-card h2 { margin: 1rem 0 1.3rem; color: var(--hq-ink); font-size: 1.5rem; }.admin-plan-card .form-label { margin-top: .45rem; color: #4c6875; font-size: .75rem; font-weight: 800; }.admin-plan-card .form-control, .admin-plan-card .form-select { border-color: rgba(7,17,31,.13); color: #17394b; background: #f4f8f9; font-size: .82rem; }.admin-switch { display: flex; align-items: center; gap: .6rem; color: #4f6b79; font-size: .78rem; }.admin-switch input { width: 1rem; height: 1rem; accent-color: var(--hq-cyan); }
@media (max-width: 991.98px) { .admin-plan-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575.98px) { .admin-plan-grid { grid-template-columns: 1fr; } }
.status-pill-open { color: #137647; background: #dff8e9; }.status-pill-pending { color: #856a17; background: #fff4cc; }.status-pill-closed { color: #687985; background: #e7edf0; }.panel-ticket-list { display: grid; gap: .6rem; }.panel-ticket-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid rgba(7,17,31,.08); border-radius: .8rem; color: inherit; background: rgba(237,244,247,.55); transition: border-color .2s ease, transform .2s ease, background .2s ease; }.panel-ticket-row:hover { border-color: rgba(17,213,216,.5); background: #fff; transform: translateX(.2rem); }.panel-ticket-row > span:nth-child(2) { display: grid; gap: .25rem; }.panel-ticket-row strong { color: #17394b; }.panel-ticket-row small { color: #7893a0; font-size: .72rem; }.panel-ticket-row > span:last-child { color: #0b9ca1; font-weight: 900; }.ticket-number { color: #0b9ca1; font-size: .72rem; font-weight: 900; }.ticket-thread { padding: clamp(1.3rem, 4vw, 2.3rem); border: 1px solid rgba(7,17,31,.1); border-radius: 1.15rem; background: rgba(255,255,255,.72); }.ticket-thread-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }.ticket-thread-heading strong { color: #7893a0; font-size: .75rem; }.ticket-message { max-width: 82%; margin: .8rem 0; padding: 1rem; border: 1px solid rgba(7,17,31,.1); border-radius: .9rem .9rem .9rem .2rem; background: #edf4f7; }.ticket-message-admin { margin-left: auto; border-color: rgba(17,213,216,.25); border-radius: .9rem .9rem .2rem .9rem; background: rgba(17,213,216,.08); }.ticket-message > div { display: flex; justify-content: space-between; gap: 1rem; }.ticket-message strong { color: #17394b; font-size: .8rem; }.ticket-message small { color: #7893a0; font-size: .68rem; }.ticket-message p { margin: .7rem 0 0; color: #365564; font-size: .88rem; line-height: 1.7; }.support-form-panel { max-width: 60rem; margin: 0 auto 4rem; }
@media (max-width: 767.98px) { .panel-ticket-row { grid-template-columns: auto 1fr auto; }.panel-ticket-row .status-pill { grid-column: 2; justify-self: start; }.panel-ticket-row > span:last-child { grid-column: 3; grid-row: 1 / span 2; }.ticket-message { max-width: 94%; } }

/* Hardware-grade card details: the front reads as a physical 3D compute module. */
.server-face {
    background: radial-gradient(circle at var(--card-glow-x, 78%) var(--card-glow-y, 12%), rgba(117,103,255,.34), transparent 25%), linear-gradient(145deg, #477f8d 0%, #123746 22%, #071a27 61%, #030b13 100%);
    transition: background .22s ease, box-shadow .22s ease;
}
.server-face:before { box-shadow: inset 0 0 1.4rem rgba(185,245,242,.06); }
.server-card-screws { position: absolute; z-index: 5; inset: .72rem; display: flex; justify-content: space-between; pointer-events: none; }
.server-card-screws:before, .server-card-screws:after { position: absolute; right: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(185,245,242,.2), transparent); content: ""; }
.server-card-screws:before { top: 1.05rem; }.server-card-screws:after { bottom: 1.05rem; }
.server-card-screws i { position: relative; display: block; width: .34rem; height: .34rem; border: 1px solid rgba(226,255,254,.72); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e9ffff 0 .08rem, #799ca4 .09rem .14rem, #0a202b .15rem); box-shadow: 0 0 .32rem rgba(17,213,216,.35); }
.server-card-screws i:nth-child(2), .server-card-screws i:nth-child(4) { margin-left: auto; }
.server-card-screws i:nth-child(3), .server-card-screws i:nth-child(4) { align-self: flex-end; }
.server-card-core-orb { position: absolute; z-index: 4; top: 4rem; right: 1.05rem; display: grid; width: 3.7rem; height: 3.7rem; place-items: center; border: 1px solid rgba(185,245,242,.27); border-radius: 50%; background: radial-gradient(circle at 45% 42%, rgba(17,213,216,.28), rgba(17,213,216,.04) 45%, rgba(7,17,31,.44) 46%); box-shadow: inset 0 0 .9rem rgba(185,245,242,.12), 0 0 1.5rem rgba(17,213,216,.18); transform: translateZ(2rem); }
.server-card-core-orb:before, .server-card-core-orb:after { position: absolute; border: 1px solid rgba(17,213,216,.42); border-radius: 50%; content: ""; }
.server-card-core-orb:before { inset: .38rem; border-right-color: transparent; transform: rotate(28deg); animation: core-orbit-spin 6s linear infinite; }
.server-card-core-orb:after { inset: .68rem; border-left-color: transparent; border-bottom-color: rgba(117,103,255,.62); transform: rotate(-24deg); animation: core-orbit-spin 4.2s linear infinite reverse; }
.core-orbit { position: absolute; display: block; border: 1px solid rgba(185,245,242,.55); border-radius: 50%; transform: rotateX(64deg) rotateZ(16deg); }
.core-orbit-outer { inset: .24rem; animation: core-orbit-spin 7s linear infinite; }.core-orbit-inner { inset: .86rem; border-color: rgba(117,103,255,.7); transform: rotateX(64deg) rotateZ(-28deg); animation: core-orbit-spin 4.5s linear infinite reverse; }
.core-core { display: grid; width: 1rem; height: 1rem; place-items: center; border: 1px solid #d8ffff; border-radius: 35%; background: linear-gradient(145deg, #95ffff, #11a9b3 48%, #133648); box-shadow: 0 0 .7rem rgba(17,213,216,.9), inset .1rem .1rem .2rem rgba(255,255,255,.7); transform: rotate(45deg); }
.core-core i { display: block; width: .34rem; height: .34rem; border-radius: 50%; background: #efffff; box-shadow: 0 0 .55rem #fff; transform: rotate(-45deg); animation: core-pulse 1.8s ease-in-out infinite; }
.server-card-kicker, .server-card-title, .server-card-copy, .server-rack, .server-card-stats, .server-card-footer { max-width: 72%; }
.server-card-title { padding-right: 3.6rem; }
.server-card-kicker { margin-top: .88rem; }
.server-card-copy { max-width: 100%; }
@keyframes core-orbit-spin { to { transform: rotateX(64deg) rotateZ(376deg); } }
@keyframes core-pulse { 0%, 100% { opacity: .65; transform: rotate(-45deg) scale(.72); } 50% { opacity: 1; transform: rotate(-45deg) scale(1.12); } }
@media (max-width: 575.98px) {
    .server-card-core-orb { top: 3.25rem; right: .76rem; width: 2.55rem; height: 2.55rem; }
    .server-card-title { padding-right: 2.5rem; }
    .server-card-kicker, .server-card-title, .server-card-copy, .server-rack, .server-card-stats, .server-card-footer { max-width: 100%; }
    .server-card-kicker { margin-top: .55rem; }
    .server-card-screws { inset: .55rem; }
}
@media (prefers-reduced-motion: reduce) {
    .server-card-core-orb:before, .server-card-core-orb:after, .core-orbit, .core-core i { animation: none; }
    .server-face { transition: none; }
}