/* Nexus Store v3.1.0 — Adaptive Premium. Styling only: existing payment and panel flows are unchanged. */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0b1020; --bg2:#10192c; --topbar:rgba(13,21,37,.94);
  --panel:#151f33; --panel2:#202f48; --input:#101b2e;
  --line:#34445c; --line-soft:#273852;
  --white:#f4f7ff; --muted:#a4b4cc; --subtle:#8194b3;
  --blue:#4384fa; --blue-light:#83b5ff; --purple:#a38af9;
  --cyan:#5dc8e9; --green:#38c997; --red:#f18b9d; --amber:#f4bc67;
  --button-text:#ffffff; --danger-bg:#402934; --danger-line:#92546b;
  --status-ok-bg:#163f35; --status-warn-bg:#4a3725; --status-bad-bg:#452c39;
  --hero:radial-gradient(ellipse at 100% 0%,rgba(116,96,215,.16),transparent 50%),linear-gradient(120deg,#15233b,#121d33 72%);
  --shadow:0 16px 46px rgba(0,0,0,.16); --dialog-shadow:0 24px 70px rgba(0,0,0,.48);
  --nav:rgba(15,23,40,.95); --focus:#72b9ff;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg:#f3f6fd; --bg2:#eaf1fc; --topbar:rgba(255,255,255,.95);
  --panel:#ffffff; --panel2:#edf2fa; --input:#f8faff;
  --line:#d5dfed; --line-soft:#e2e9f3;
  --white:#18283f; --muted:#566782; --subtle:#7788a1;
  --blue:#2466db; --blue-light:#2864d2; --purple:#7852c9;
  --cyan:#0e86a5; --green:#137e61; --red:#be425d; --amber:#a96513;
  --button-text:#ffffff; --danger-bg:#fff0f2; --danger-line:#ecacba;
  --status-ok-bg:#e0f6eb; --status-warn-bg:#fff0d8; --status-bad-bg:#ffe7ec;
  --hero:radial-gradient(ellipse at 100% 0%,rgba(163,143,246,.17),transparent 50%),linear-gradient(115deg,#ffffff,#e9f1ff 80%);
  --shadow:0 15px 36px rgba(47,73,117,.065); --dialog-shadow:0 26px 70px rgba(26,40,70,.22);
  --nav:rgba(255,255,255,.97); --focus:#1b63dc;
}
* { box-sizing:border-box; }
html { scroll-behavior:auto; -webkit-text-size-adjust:100%; }
body { margin:0; min-width:280px; background:var(--bg); color:var(--white); font:15px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
button { cursor:pointer; -webkit-tap-highlight-color:transparent; }
button:disabled { opacity:.5; cursor:not-allowed; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.hidden,.page:not(.active) { display:none!important; }
.icon-defs { position:absolute; width:0; height:0; overflow:hidden; }
.icon { width:20px; height:20px; flex:none; display:inline-block; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
/* HEADER AND THEME PICKER */
.topbar { background:var(--topbar); border-bottom:1px solid var(--line-soft); position:sticky; top:0; z-index:35; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.top-inner { max-width:1190px; padding:0 22px; min-height:77px; margin:auto; display:flex; align-items:center; gap:15px; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:11px; min-width:0; flex:none; }
.brand-mark { width:43px; height:43px; flex:none; display:grid; place-items:center; border-radius:14px; font-size:23px; font-weight:900; color:#fff; background:linear-gradient(140deg,#2868df,#7554cc); border:1px solid rgba(255,255,255,.19); overflow:hidden; box-shadow:0 5px 13px rgba(44,100,214,.17); }
.brand-mark.has-logo { background:var(--panel2); border-color:var(--line); }
.brand-logo { display:block; width:100%; height:100%; object-fit:contain; padding:3px; }
.brand-logo[hidden] { display:none; }
.brand-mark.has-logo .brand-initial { display:none; }
.brand-text { min-width:0; max-width:225px; }
.brand strong { display:block; font-size:15px; font-weight:800; letter-spacing:-.4px; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.brand small { display:block; font-size:9px; font-weight:750; letter-spacing:1.8px; color:var(--subtle); margin-top:3px; }
.desktop-nav { display:flex; align-items:center; justify-content:center; gap:3px; min-width:0; }
.desktop-nav button { background:none; border:0; border-radius:12px; padding:10px 10px; color:var(--muted); font-weight:650; font-size:13px; white-space:nowrap; }
.desktop-nav button.selected { background:var(--panel2); color:var(--blue-light); }
.top-actions { display:flex; align-items:center; gap:8px; flex:none; }
.theme-picker { position:relative; }
.theme-toggle,.icon-button { display:inline-grid; place-items:center; width:42px; height:42px; padding:0; color:var(--white); background:var(--panel2); border:1px solid var(--line); border-radius:14px; }
.theme-toggle .icon { width:20px; height:20px; }
.theme-menu { position:absolute; z-index:90; right:0; top:calc(100% + 13px); width:225px; padding:8px; border:1px solid var(--line); border-radius:18px; background:var(--panel); box-shadow:var(--dialog-shadow); }
.theme-menu-title { display:block; color:var(--subtle); padding:7px 10px 8px; text-transform:uppercase; font-size:10px; letter-spacing:1.3px; font-weight:800; }
.theme-menu button { display:flex; align-items:center; gap:11px; padding:10px 9px; border-radius:12px; width:100%; text-align:left; border:0; color:var(--white); background:transparent; }
.theme-menu button .icon { color:var(--subtle); }
.theme-menu button span:nth-child(2) { flex:1; font-size:13px; font-weight:700; }
.theme-menu button small { display:block; color:var(--muted); font-size:10px; font-weight:500; line-height:1.5; }
.theme-check { color:var(--blue); visibility:hidden; font-size:18px; }
.theme-menu button[aria-pressed="true"] { background:var(--panel2); }
.theme-menu button[aria-pressed="true"] .theme-check { visibility:visible; }
.theme-menu button[aria-pressed="true"] .icon { color:var(--blue-light); }
.account-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 13px; min-height:42px; max-width:200px; white-space:nowrap; background:var(--panel2); color:var(--white); border:1px solid var(--line); border-radius:14px; font-size:12px; font-weight:750; }
.account-btn .icon { width:17px; height:17px; color:var(--blue-light); }
#accountLabel { overflow:hidden; text-overflow:ellipsis; }
/* COMMON CONTENT */
.container { max-width:1190px; margin:auto; padding:34px 22px 92px; min-height:75vh; }
.eyebrow { color:var(--blue-light); letter-spacing:1.6px; font-size:10px; font-weight:850; }
.online-eyebrow { display:flex; align-items:center; gap:8px; margin:0 0 17px 4px; }
.online-eyebrow i { height:8px; width:8px; background:#37ce95; box-shadow:0 0 0 4px rgba(55,206,149,.11); border-radius:50%; }
.eyebrow.pill { display:inline-block; padding:7px 12px; background:var(--panel2); border:1px solid var(--line); border-radius:100px; }
.hero { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(235px,.7fr); gap:16px; background:var(--hero); border:1px solid var(--line); border-radius:26px; overflow:hidden; min-height:395px; box-shadow:var(--shadow); }
.hero-content { padding:47px 20px 42px 43px; }
.hero h1 { font-size:clamp(32px,3.9vw,48px); line-height:1.16; letter-spacing:-1.7px; margin:22px 0; font-weight:850; }
.hero h1 span { color:var(--blue-light); }
.hero p { color:var(--muted); max-width:570px; font-size:14px; margin:0 0 26px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:14px; border:1px solid var(--line); padding:11px 17px; font-weight:750; font-size:13px; color:var(--white); background:var(--panel2); min-height:45px; text-align:center; line-height:1.4; }
.btn .icon { width:17px; height:17px; }
.btn.primary { background:linear-gradient(125deg,#347af2,#326bd9); border-color:#3178e9; color:#fff; box-shadow:0 4px 14px rgba(34,107,222,.17); }
.btn.outlined { background:var(--panel2); border-color:var(--line); color:var(--white); }
.btn.danger { background:var(--danger-bg); border-color:var(--danger-line); color:var(--red); }
.btn.sm { padding:8px 13px; min-height:36px; font-size:12px; border-radius:11px; }
.btn.disabled { pointer-events:none; opacity:.45; }
.hero-cta { min-width:210px; font-size:14px; min-height:49px; }
.trust { display:flex; gap:13px; flex-wrap:wrap; color:var(--muted); font-size:11px; margin-top:27px; }
.trust span { display:inline-flex; align-items:center; white-space:nowrap; }
.hero-aside { padding:30px 35px 30px 0; display:flex; align-items:center; justify-content:center; }
.server-art { background:var(--panel); border:1px solid var(--line); border-radius:21px; padding:16px; width:100%; max-width:290px; box-shadow:var(--shadow); }
.art-head,.rack-info { display:flex; justify-content:space-between; gap:7px; font-size:9px; letter-spacing:.7px; color:var(--subtle); padding:2px 3px 13px; }
.art-head b { color:var(--green); }
.rack { display:flex; gap:6px; align-items:center; padding:18px 13px; margin:9px 0; border-radius:12px; background:var(--panel2); border:1px solid var(--line); }
.rack i { width:6px; height:6px; border-radius:50%; background:#38cb9b; }
.rack i:nth-child(2) { background:#5d9dff; }
.rack b { margin-left:auto; letter-spacing:4px; color:var(--blue-light); font-size:8px; }
.rack-info { padding:12px 3px 1px; }
.rack-info strong { color:var(--white); }
.section-title { display:flex; align-items:end; justify-content:space-between; gap:16px; margin:38px 0 17px; }
.section-title h2 { margin:6px 0 0; font-size:23px; letter-spacing:-.6px; }
.section-title p,.page-head p { margin:5px 0 0; color:var(--muted); font-size:13px; }
.link-btn,.back-link { color:var(--blue-light); border:0; background:none; padding:8px 0; font-size:13px; font-weight:800; }
.feature-card { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:25px; border:1px solid var(--line); background:var(--panel); padding:29px 32px; border-radius:22px; box-shadow:var(--shadow); }
.feature-card .eyebrow { color:var(--purple); }
.feature-card h2 { margin:7px 0; font-size:23px; letter-spacing:-.5px; }
.feature-card p { max-width:710px; color:var(--muted); font-size:13px; margin:0; }
.feature-card .btn { flex:none; }
.page-head { margin:0 0 28px; }
.page-head h1 { font-size:clamp(26px,4vw,34px); letter-spacing:-1px; margin:8px 0 4px; }
.page-head p { font-size:14px; }
/* PACKAGES */
.product-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; }
.product { display:flex; flex-direction:column; min-height:251px; padding:20px; background:var(--panel); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); }
.product-top { display:flex; align-items:start; justify-content:space-between; gap:8px; }
.product-icon { display:grid; place-items:center; width:45px; height:45px; flex:none; border-radius:13px; background:var(--panel2); border:1px solid var(--line); color:var(--blue-light); }
.product-icon .icon { width:23px; height:23px; }
.chip { display:inline-block; color:var(--green); background:var(--status-ok-bg); border:1px solid transparent; border-radius:99px; padding:5px 9px; font-size:10px; font-weight:850; letter-spacing:.2px; }
.product:nth-child(2n) .product-icon { color:var(--purple); }
.product:nth-child(3n) .product-icon { color:var(--green); }
.product h3 { font-size:19px; letter-spacing:-.4px; margin:17px 0 4px; }
.spec { color:var(--muted); font-size:12px; margin-bottom:9px; line-height:1.7; }
.spec span { margin-right:8px; }
.price { font-weight:850; font-size:23px; margin-top:auto; padding:8px 0 16px; letter-spacing:-.5px; }
.price small { font-size:11px; color:var(--muted); font-weight:400; letter-spacing:0; }
.product .btn { width:100%; }
/* USER PANELS, FORMS, AND INVOICES */
.needs-auth,.form-card,.invoice-card,.info-box { border:1px solid var(--line); background:var(--panel); border-radius:19px; padding:25px; }
.needs-auth { text-align:center; padding:42px 20px; }
.needs-auth h3 { margin-top:0; }
.needs-auth p,.form-card p { color:var(--muted); font-size:13px; }
.metric-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.metric-strip div { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:17px; }
.metric-strip small { color:var(--muted); display:block; }
.metric-strip strong { display:block; font-size:27px; }
.stack { display:grid; gap:12px; }
.server-item,.profile-item,.history-item,.request-item { display:flex; justify-content:space-between; align-items:center; gap:13px; min-width:0; border:1px solid var(--line); border-radius:17px; background:var(--panel); padding:18px; box-shadow:var(--shadow); }
.server-item>div:first-child,.profile-item>div:first-child,.history-item>div:first-child { min-width:0; }
.server-item h3,.profile-item h3 { font-size:16px; margin:0 0 5px; }
.muted { font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
.item-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; flex:none; }
.status { display:inline-block; color:var(--green); background:var(--status-ok-bg); padding:5px 10px; border-radius:100px; font-size:10px; font-weight:850; text-transform:uppercase; }
.status.pending,.status.creating,.status.paid_processing,.status.provisioning,.status.manual_review,.status.renew_review { color:var(--amber); background:var(--status-warn-bg); }
.status.expired,.status.rejected,.status.provision_failed,.status.provision_review,.status.invoice_review { color:var(--red); background:var(--status-bad-bg); }
.form-card { margin:24px 0; }
.form-card h3 { margin:0; }
.form-card form,.dialog form { display:grid; gap:10px; margin-top:19px; }
.form-card label,.dialog label { font-size:12px; color:var(--muted); font-weight:750; }
input,select { border:1px solid var(--line); background:var(--input); color:var(--white); border-radius:12px; padding:12px; width:100%; min-width:0; }
input::placeholder { color:var(--subtle); }
.empty { color:var(--muted); text-align:center; background:var(--panel); border:1px dashed var(--line); padding:27px; border-radius:16px; }
.invoice-card { max-width:575px; margin:auto; text-align:center; }
.invoice-card img { display:block; background:#fff; border-radius:14px; width:min(245px,100%); height:auto; aspect-ratio:1; object-fit:contain; margin:24px auto 12px; padding:7px; }
.invoice-card h2 { margin:11px 0; overflow-wrap:anywhere; }
.invoice-card .amount { font-size:32px; font-weight:900; margin:12px 0; }
.invoice-card .details { text-align:left; padding:13px 0; border-top:1px solid var(--line); }
.invoice-card .details div { display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:7px 0; }
.invoice-card .details strong { overflow-wrap:anywhere; text-align:right; }
.support-card { max-width:700px; }
.info-box { margin-top:16px; color:var(--muted); font-size:13px; }
/* FOOTER AND MOBILE TAB BAR */
.footer { border-top:1px solid var(--line-soft); background:var(--panel); }
.foot-inner { max-width:1190px; margin:auto; padding:27px 22px; display:flex; justify-content:space-between; gap:20px; color:var(--muted); font-size:12px; }
.foot-inner strong { color:var(--white); font-size:15px; }
.foot-inner p { margin:5px 0; }
.mobile-nav { display:none; }
/* MODAL AND TOAST */
.backdrop { position:fixed; inset:0; background:rgba(2,8,22,.69); z-index:70; display:flex; align-items:center; justify-content:center; padding:16px; }
.dialog { width:min(100%,475px); max-height:min(85dvh,760px); overflow-y:auto; border:1px solid var(--line); border-radius:23px; padding:23px; background:var(--panel); box-shadow:var(--dialog-shadow); }
.dialog-head { display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); padding-bottom:14px; }
.dialog-head h2 { font-size:19px; margin:0; }
.dialog p { font-size:13px; color:var(--muted); }
.dialog .btn { width:100%; margin-top:8px; }
.dialog .code { overflow-wrap:anywhere; font-size:12px; user-select:all; padding:10px; background:var(--input); border:1px solid var(--line-soft); border-radius:10px; }
.toast { position:fixed; z-index:100; right:16px; bottom:20px; border:1px solid var(--line); background:var(--panel2); color:var(--white); border-radius:14px; padding:14px 18px; max-width:min(420px,90vw); box-shadow:var(--dialog-shadow); }
.payment-note { font-size:12px; color:var(--muted); }
.receipt-lines { display:grid; gap:11px; text-align:left; margin:18px 0; }
.receipt-lines div { display:flex; justify-content:space-between; gap:12px; overflow-wrap:anywhere; }
.receipt-lines strong { text-align:right; }
.wrap { overflow-wrap:anywhere; }
/* Breakpoints: desktop, tablet, narrow Android and iPhone safe areas */
@media(max-width:1070px) {
 .brand-text { max-width:165px; }
 .top-inner { gap:7px; }
 .desktop-nav { gap:0; }
 .desktop-nav button { padding:9px 7px; }
 .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:790px) {
 .desktop-nav { display:none; }
 .top-inner { padding:0 16px; min-height:69px; gap:8px; }
 .brand-mark { width:39px; height:39px; border-radius:13px; }
 .brand-text { max-width:min(40vw,200px); }
 .brand strong { font-size:14px; }
 .brand small { font-size:8px; letter-spacing:1.1px; }
 .top-actions { gap:6px; }
 .account-btn { max-width:153px; padding:9px; min-height:40px; font-size:11px; }
 .theme-toggle { width:40px; height:40px; }
 .container { padding:25px 15px calc(112px + env(safe-area-inset-bottom)); }
 .hero { grid-template-columns:1fr; min-height:0; gap:0; border-radius:22px; }
 .hero-content { padding:31px 23px 4px; }
 .hero h1 { font-size:clamp(31px,6vw,39px); letter-spacing:-1.2px; }
 .hero p { margin-bottom:22px; }
 .hero-aside { padding:18px 23px 26px; }
 .server-art { max-width:100%; }
 .server-art .rack { padding:12px; }
 .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
 .product { padding:15px; min-height:230px; }
 .product h3 { font-size:17px; }
 .price { font-size:19px; }
 .section-title { margin-top:31px; }
 .feature-card { display:block; padding:22px; }
 .feature-card .btn { margin-top:19px; }
 .mobile-nav { position:fixed; left:0; right:0; bottom:0; z-index:40; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:stretch; padding:8px max(3px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(3px,env(safe-area-inset-left)); background:var(--nav); border-top:1px solid var(--line); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
 .mobile-nav button { color:var(--muted); background:none; display:grid; justify-items:center; align-content:center; gap:4px; min-height:53px; padding:4px 1px; border:0; border-radius:13px; font-size:10px; font-weight:650; }
 .mobile-nav button .icon { width:22px; height:22px; }
 .mobile-nav button.selected { color:var(--blue-light); background:var(--panel2); }
 .server-item,.profile-item,.history-item,.request-item { align-items:flex-start; flex-direction:column; }
 .item-actions { justify-content:flex-start; }
 .foot-inner { display:block; padding-bottom:22px; }
 .metric-strip { gap:8px; }
 .metric-strip div { padding:12px; }
 .metric-strip strong { font-size:23px; }
 .toast { bottom:calc(87px + env(safe-area-inset-bottom)); }
}
@media(max-width:400px) {
 .brand { gap:8px; }
 .brand-text { max-width:37vw; }
 .brand strong { font-size:13px; }
 .brand small { letter-spacing:.65px; font-size:7.5px; }
 .account-btn { max-width:43px; width:40px; padding:0; }
 .account-btn #accountLabel { display:none; }
 .hero-cta { width:100%; }
 .trust { gap:8px; }
 .theme-menu { right:-43px; }
 .product { padding:13px; }
 .product h3 { font-size:16px; }
 .product .btn { padding:10px 7px; font-size:12px; }
}
@media(max-width:340px) { .product-grid { grid-template-columns:1fr; } .brand-text { max-width:35vw; } }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
 .btn,.theme-toggle,.account-btn,.desktop-nav button,.mobile-nav button,.theme-menu button,.product,.icon-button { transition:background-color .16s ease,color .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease; }
 .btn:hover:not(:disabled),.account-btn:hover,.theme-toggle:hover { transform:translateY(-1px); filter:brightness(1.045); }
 .product:hover { transform:translateY(-2px); border-color:var(--blue); }
 .desktop-nav button:hover,.theme-menu button:hover,.mobile-nav button:hover { background:var(--panel2); color:var(--blue-light); }
}

/* =========================================================
   v3.1.1 VPS PREMIUM — limited to dashboard, decorative tiles,
   package cards and button polish. Existing flow CSS preserved.
   ========================================================= */
:root,
:root[data-theme="dark"] {
  --vps-card:rgba(19,31,54,.88);
  --vps-blue:#7babff; --vps-purple:#b29bff; --vps-green:#4ae0a4;
  --vps-amber:#ffd07b; --vps-orange:#ffab75; --vps-cyan:#71d4ea;
  --showcase-bg:radial-gradient(ellipse at 54% 58%,rgba(245,103,31,.26),transparent 66%),linear-gradient(148deg,#2a2230,#15243d 72%);
}
:root[data-theme="light"] {
  --vps-card:#f8fbff;
  --vps-blue:#235fd1; --vps-purple:#7652c0; --vps-green:#0c8665;
  --vps-amber:#a46b14; --vps-orange:#b95820; --vps-cyan:#087f9e;
  --showcase-bg:radial-gradient(ellipse at 56% 58%,rgba(249,146,79,.22),transparent 64%),linear-gradient(148deg,#fff7ef,#e9f1ff 74%);
}
/* Consistent iOS-inspired press surfaces with contrasting typography. */
.btn { font-weight:800; letter-spacing:.02px; border-radius:15px; box-shadow:0 5px 15px rgba(5,15,36,.08); }
.btn.primary { background:linear-gradient(128deg,#3292fd,#2765dd 68%,#6559da); border-color:rgba(106,172,255,.5); color:white; box-shadow:0 8px 20px rgba(43,110,220,.24),inset 0 1px 0 rgba(255,255,255,.17); }
.btn.danger { box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.btn:active:not(:disabled),.theme-toggle:active,.account-btn:active { transform:scale(.976); }
.hero { position:relative; isolation:isolate; grid-template-columns:minmax(0,1.12fr) minmax(285px,.88fr); min-height:385px; }
.hero::before { content:""; position:absolute; right:-60px; top:-110px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle,rgba(130,82,249,.14),transparent 70%); pointer-events:none; z-index:-1; }
.hero-content { position:relative; z-index:1; }
.hero h1 span { background:linear-gradient(110deg,var(--blue-light),var(--purple),var(--vps-orange)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-cta { min-height:53px; font-size:14px; border-radius:16px; padding-inline:20px; }
.hero-aside { min-width:0; padding:23px 27px 23px 0; }
.server-showcase { position:relative; width:100%; min-width:0; max-width:415px; min-height:307px; display:flex; align-items:center; justify-content:center; flex-direction:column; overflow:hidden; border:1px solid rgba(252,153,94,.23); border-radius:24px; background:var(--showcase-bg); box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 14px 39px rgba(13,20,35,.15); }
.server-showcase::before { content:""; position:absolute; width:68%; height:17%; bottom:22%; left:16%; border-radius:50%; background:rgba(251,97,29,.28); filter:blur(28px); }
.server-showcase img { display:block; position:relative; width:min(105%,427px); height:auto; max-height:266px; object-fit:contain; filter:drop-shadow(0 14px 16px rgba(7,10,17,.30)); }
.showcase-status,.showcase-caption { position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:10px; font-weight:850; letter-spacing:1px; }
.showcase-status { margin:17px auto 0; padding:7px 13px; border-radius:99px; border:1px solid rgba(104,205,164,.26); color:var(--vps-green); background:var(--panel); }
.showcase-caption { color:var(--muted); margin:0 5px 14px; }
.showcase-caption .icon { width:14px; height:14px; color:var(--vps-green); }
.showcase-caption b { color:var(--vps-orange); }
.online-dot { flex:none; display:inline-block; width:7px; height:7px; border-radius:50%; background:#32c88e; box-shadow:0 0 0 4px rgba(55,206,149,.13); }
/* Decorative spec pills: divs, NOT disabled buttons or click targets. */
.vps-section { margin-top:27px; border-radius:25px; padding:25px 26px 27px; border:1px solid var(--line); background:linear-gradient(135deg,var(--panel),var(--bg2)); box-shadow:var(--shadow); }
.vps-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 19px; }
.vps-heading h2 { margin:5px 0 1px; font-size:clamp(22px,3vw,27px); font-weight:850; letter-spacing:-.8px; }
.vps-heading p { margin:0; color:var(--muted); font-size:12px; }
.infrastructure-status { display:flex; flex:none; gap:9px; align-items:center; padding:9px 12px; font-size:10px; font-weight:800; color:var(--vps-green); border-radius:100px; border:1px solid var(--line); background:var(--panel2); }
.vps-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; }
.vps-chip { display:flex; align-items:center; gap:10px; padding:13px; min-height:78px; border-radius:17px; min-width:0; border:1px solid var(--line-soft); background:var(--vps-card); box-shadow:inset 0 1px 0 rgba(255,255,255,.03); }
.vps-chip-icon { flex:none; display:grid; place-items:center; width:41px; height:41px; border-radius:13px; background:color-mix(in srgb,currentColor 14%,transparent); }
.vps-chip-icon .icon { width:21px; height:21px; }
.vps-chip > span:last-child { display:flex; flex-direction:column; gap:3px; min-width:0; }
.vps-chip small { color:var(--muted); font-size:9px; font-weight:850; line-height:1.3; letter-spacing:.9px; }
.vps-chip strong { color:var(--white); font-size:14px; font-weight:850; line-height:1.34; overflow-wrap:anywhere; }
.vps-chip em { font-size:11px; font-style:normal; white-space:nowrap; color:var(--muted); }
.vps-chip.spec-blue { color:var(--vps-blue); border-color:color-mix(in srgb,var(--vps-blue) 22%,var(--line-soft)); }
.vps-chip.spec-purple { color:var(--vps-purple); border-color:color-mix(in srgb,var(--vps-purple) 23%,var(--line-soft)); }
.vps-chip.spec-green { color:var(--vps-green); border-color:color-mix(in srgb,var(--vps-green) 22%,var(--line-soft)); }
.vps-chip.spec-orange { color:var(--vps-orange); border-color:color-mix(in srgb,var(--vps-orange) 23%,var(--line-soft)); }
.vps-chip.spec-cyan { color:var(--vps-cyan); border-color:color-mix(in srgb,var(--vps-cyan) 22%,var(--line-soft)); }
.vps-chip.spec-amber { color:var(--vps-amber); border-color:color-mix(in srgb,var(--vps-amber) 23%,var(--line-soft)); }
.vps-chip-language { grid-column:1/-1; }
.vps-chip-language strong { font-size:13px; }
.feature-card { background:radial-gradient(ellipse at 93% 10%,rgba(140,108,222,.11),transparent 49%),var(--panel); }
.feature-card .btn.outlined { border-color:color-mix(in srgb,var(--purple) 28%,var(--line)); }
/* Premium catalog: colorful but functional gradients; no change to product prices. */
#page-products .page-head { padding:22px 23px; border:1px solid var(--line); border-radius:22px; background:radial-gradient(ellipse at 94% 0%,rgba(148,93,244,.14),transparent 52%),var(--panel); }
#page-products .page-head h1 { margin-top:7px; }
.product-grid { gap:18px; }
.product { position:relative; isolation:isolate; overflow:visible; border-radius:22px; padding:20px; min-height:270px; background:radial-gradient(ellipse at 100% 0%,rgba(68,132,250,.10),transparent 60%),var(--panel); }
.product::before { content:""; position:absolute; top:0; left:18px; right:18px; height:2px; border-radius:50px; background:linear-gradient(90deg,transparent,var(--blue),transparent); opacity:.65; }
.product .chip { color:var(--blue-light); background:var(--panel2); border:1px solid var(--line-soft); }
.product .product-icon { border-radius:15px; color:var(--blue-light); background:color-mix(in srgb,var(--blue) 13%,var(--panel2)); }
.product:nth-child(4n+2) { background:radial-gradient(ellipse at 100% 0%,rgba(165,107,244,.13),transparent 60%),var(--panel); }
.product:nth-child(4n+2) .product-icon { color:var(--purple); background:color-mix(in srgb,var(--purple) 14%,var(--panel2)); }
.product:nth-child(4n+2) .btn.primary { background:linear-gradient(125deg,#8759e9,#6455d4); border-color:rgba(174,145,245,.55); }
.product:nth-child(4n+3) { background:radial-gradient(ellipse at 100% 0%,rgba(50,208,159,.11),transparent 60%),var(--panel); }
.product:nth-child(4n+3) .product-icon { color:var(--green); background:color-mix(in srgb,var(--green) 14%,var(--panel2)); }
.product:nth-child(4n+3) .btn.primary { background:linear-gradient(125deg,#189d9d,#1f8e71); border-color:rgba(76,211,168,.52); }
.product:nth-child(4n+4) { background:radial-gradient(ellipse at 100% 0%,rgba(251,171,80,.11),transparent 60%),var(--panel); }
.product:nth-child(4n+4) .product-icon { color:var(--vps-orange); background:color-mix(in srgb,var(--vps-orange) 13%,var(--panel2)); }
.product:nth-child(4n+4) .btn.primary { background:linear-gradient(125deg,#e48b41,#cd6b40); border-color:rgba(246,177,111,.6); }
.product .spec { line-height:1.95; }
.product .btn { min-height:45px; border-radius:14px; }
.product-popular { border-color:#e879a3; box-shadow:0 14px 37px rgba(188,76,122,.13); background:radial-gradient(ellipse at 100% 0%,rgba(239,92,158,.13),transparent 60%),var(--panel)!important; }
.product-popular::before { opacity:1; background:linear-gradient(90deg,transparent,#fb749d,transparent); }
.product-popular .chip.chip-popular { color:#fff; background:linear-gradient(100deg,#f34c85,#db487d); border:1px solid #f47f9f; box-shadow:0 3px 12px rgba(219,72,125,.27); }
.product-popular .btn.primary { background:linear-gradient(115deg,#f04b8b,#d94478); border-color:rgba(255,153,180,.6); }
.product.product-unlimited { grid-column:1/-1; display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:30px; min-height:179px; padding:25px 29px; overflow:hidden; border:1px solid rgba(50,196,187,.52); background:radial-gradient(ellipse at 0% 0%,rgba(54,223,219,.16),transparent 57%),radial-gradient(ellipse at 100% 100%,rgba(69,110,240,.15),transparent 55%),var(--panel)!important; }
.product.product-unlimited::before { left:0; right:0; opacity:1; background:linear-gradient(90deg,var(--vps-cyan),var(--vps-green)); }
.unlimited-info { min-width:0; flex:1; }
.unlimited-top { display:flex; align-items:center; gap:10px; }
.product-unlimited .product-icon { background:color-mix(in srgb,var(--vps-cyan) 18%,var(--panel2)); color:var(--vps-cyan); }
.product-unlimited .chip.unlimited-chip { color:var(--vps-cyan); border-color:color-mix(in srgb,var(--vps-cyan) 35%,var(--line)); }
.product .unlimited-title h3 { margin:11px 0 0; font-size:24px; }
.unlimited-title p { margin:1px 0 13px; color:var(--muted); font-size:12px; }
.unlimited-spec { display:flex; flex-wrap:wrap; gap:9px 21px; font-size:12px; font-weight:700; color:var(--vps-green); }
.unlimited-order { flex:0 0 min(245px,32%); display:grid; gap:8px; text-align:right; }
.unlimited-order .price { padding:0; margin-top:0; }
.product-unlimited .btn.primary { background:linear-gradient(125deg,#20caaa,#168dba); border-color:rgba(66,219,194,.55); }
.product-unlimited .btn .icon { width:16px; height:16px; }
@media(max-width:1070px) {
 .vps-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .vps-chip-language { grid-column:1/-1; }
}
@media(max-width:790px) {
 .hero { grid-template-columns:1fr; }
 .hero-content { padding:29px 23px 1px; }
 .hero-aside { padding:15px 19px 24px; }
 .server-showcase { max-width:none; min-height:0; border-radius:20px; }
 .server-showcase img { max-height:245px; width:min(98%,370px); }
 .showcase-status { margin-top:13px; }
 .vps-section { margin-top:20px; padding:20px 16px; border-radius:21px; }
 .vps-heading { align-items:flex-start; flex-wrap:wrap; }
 .vps-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
 .vps-chip { gap:7px; padding:10px 9px; min-height:77px; border-radius:14px; }
 .vps-chip-icon { width:33px; height:33px; border-radius:10px; }
 .vps-chip-icon .icon { width:18px; height:18px; }
 .vps-chip strong { font-size:12px; }
 .vps-chip small { font-size:8px; letter-spacing:.45px; }
 .vps-chip-language { grid-column:1/-1; }
 .product-grid { gap:13px; }
 .product { min-height:251px; padding:16px; }
 .product.product-unlimited { gap:16px; padding:20px 17px; flex-wrap:wrap; }
 .unlimited-order { flex:1 1 100%; display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left; }
 .unlimited-order .btn { width:auto; min-width:142px; }
 .product .unlimited-title h3 { font-size:21px; }
}
@media(max-width:400px) {
 .vps-chip { gap:6px; padding:9px 8px; }
 .vps-chip-icon { width:29px; height:29px; }
 .vps-chip strong { font-size:11px; }
 .product .chip { font-size:8px; padding:5px 7px; }
 .product .unlimited-title h3 { font-size:19px; }
 .unlimited-order .price { font-size:18px; }
 .unlimited-order .btn { min-width:126px; padding:10px 9px; }
}
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
 .vps-chip { transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
 .vps-chip:hover { transform:translateY(-2px); border-color:currentColor; box-shadow:0 8px 18px rgba(0,0,0,.09); }
}