/* ═══════════════════════════════════════════════════
   TheHostCare - Shared Stylesheet
   ═══════════════════════════════════════════════════ */
:root{
  --green:#19c57d;--green-dark:#10a867;--green-dim:rgba(25,197,125,.12);--green-line:rgba(25,197,125,.22);
  --navy:#0c1620;--navy-2:#111e2b;--navy-3:#172535;--slate:#1d2d3e;
  --text:#1b1f28;--muted:#64748b;--border:#e2eef8;--card:#fff;--bg:#f6fbff;
  --r-xl:26px;--r-lg:18px;--r-md:12px;
  --sh-sm:0 2px 12px rgba(15,24,40,.06);--sh-md:0 8px 32px rgba(15,24,40,.09);--sh-lg:0 20px 60px rgba(15,24,40,.12);
  --sh-green:0 8px 28px rgba(25,197,125,.28);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Inter',system-ui,sans-serif;color:var(--text);background:#fff;line-height:1.55;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button{cursor:pointer;font-family:inherit}
.container{max-width:1220px;margin:0 auto;padding:0 24px}

/* ── Buttons ─── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 22px;min-height:46px;border-radius:var(--r-md);font-size:14.5px;font-weight:700;border:1.5px solid transparent;transition:all .18s ease;white-space:nowrap;cursor:pointer;font-family:inherit}
.btn-lg{min-height:52px;padding:0 28px;font-size:15.5px;border-radius:var(--r-lg)}
.btn-sm{min-height:38px;padding:0 16px;font-size:13px;border-radius:10px}
.btn-primary{background:var(--green);color:#fff;box-shadow:var(--sh-green)}
.btn-primary:hover{background:var(--green-dark);transform:translateY(-1px)}
.btn-outline{background:transparent;border-color:var(--border);color:var(--text)}
.btn-outline:hover{border-color:var(--green);color:var(--green-dark);background:var(--green-dim)}
.btn-ghost-light{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.22)}
.btn-ghost-light:hover{background:rgba(255,255,255,.2)}
.btn-white{background:#fff;color:var(--green-dark);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.btn-white:hover{background:#f0fdf8;transform:translateY(-1px)}
.btn-full{width:100%;justify-content:center}

/* ── Navbar ─── */
.navbar{position:sticky;top:0;z-index:999;background:#0c1822;border-bottom:1px solid rgba(255,255,255,.07);transition:box-shadow .2s}
.navbar.scrolled{box-shadow:0 4px 32px rgba(0,0,0,.35)}
.nav-inner{display:flex;align-items:center;height:68px;gap:0}
.nav-logo{flex:0 0 auto;margin-right:40px}
.nav-logo img{height:34px;width:auto}
.nav-links{display:flex;align-items:center;gap:0;list-style:none;flex:1}
.nav-links>li{position:relative}
.nav-links>li>a{display:flex;align-items:center;gap:6px;padding:8px 15px;font-size:14px;font-weight:600;color:rgba(255,255,255,.72);transition:color .15s,background .15s;border-radius:0;white-space:nowrap;position:relative}
.nav-links>li>a i.fa-chevron-down{font-size:9px;transition:transform .18s;opacity:.6}
.nav-links>li:hover>a{color:#fff}
.nav-links>li:hover>a i.fa-chevron-down{transform:rotate(180deg);opacity:1}
.nav-links>li>a::after{content:'';position:absolute;bottom:-1px;left:15px;right:15px;height:2px;background:var(--green);border-radius:1px;transform:scaleX(0);transition:transform .18s}
.nav-links>li:hover>a::after{transform:scaleX(1)}
.dropdown{position:absolute;top:calc(100% + 1px);left:50%;transform:translateX(-50%) translateY(6px);background:#111e2b;border:1px solid rgba(255,255,255,.09);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.5);padding:10px;opacity:0;pointer-events:none;transition:opacity .16s,transform .16s;z-index:200;min-width:240px}
.dropdown.mega{min-width:520px;left:0;transform:translateY(6px);padding:14px}
.nav-links>li:hover .dropdown{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav-links>li:hover .dropdown.mega{opacity:1;pointer-events:auto;transform:translateY(0)}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.dd-item{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:10px;transition:background .13s;cursor:pointer}
.dd-item:hover{background:rgba(255,255,255,.06)}
.dd-icon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:16px;flex:0 0 auto;background:rgba(25,197,125,.15);color:var(--green)}
.dd-icon.blue{background:rgba(99,179,237,.13);color:#63b3ed}
.dd-icon.purple{background:rgba(159,122,234,.13);color:#9f7aea}
.dd-icon.orange{background:rgba(251,146,60,.13);color:#fb923c}
.dd-icon.pink{background:rgba(244,114,182,.13);color:#f472b6}
.dd-icon.teal{background:rgba(45,212,191,.13);color:#2dd4bf}
.dd-icon.red{background:rgba(248,113,113,.13);color:#f87171}
.dd-icon.yellow{background:rgba(251,191,36,.13);color:#fbbf24}
.dd-name{font-size:13.5px;font-weight:700;color:#fff;line-height:1.2;margin-bottom:3px;display:block}
.dd-desc{font-size:12px;color:rgba(255,255,255,.42);line-height:1.4;display:block}
.nav-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.navbar .btn-outline{border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.85);background:transparent}
.navbar .btn-outline:hover{border-color:var(--green);color:var(--green);background:var(--green-dim)}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:8px;border-radius:8px;margin-left:auto}
.hamburger span{display:block;width:22px;height:2px;background:rgba(255,255,255,.8);border-radius:2px;transition:all .2s}

/* ── Mobile nav ─── */
.mob-nav{display:none;position:fixed;inset:0;z-index:998;background:rgba(12,22,32,.5);backdrop-filter:blur(4px)}
.mob-nav.open{display:block}
.mob-panel{position:absolute;top:0;right:0;bottom:0;width:min(320px,100vw);background:#fff;padding:22px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.mob-close{position:sticky;top:0;z-index:2;background:#fff;align-self:stretch;display:flex;justify-content:flex-end;background:none;border:none;font-size:22px;color:var(--muted);padding:4px 0 10px;margin-bottom:2px}
.mob-link{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:11px;font-size:14.5px;font-weight:600;color:var(--muted);transition:background .13s,color .13s}
.mob-link i{width:18px;text-align:center}
.mob-link:hover{background:var(--green-dim);color:var(--green-dark)}
.mob-cat{font-size:10.5px;font-weight:700;color:#aab3c0;text-transform:uppercase;letter-spacing:.1em;padding:4px 14px;display:block}
.mob-div{height:1px;background:var(--border);margin:6px 0}

/* ── Section common ─── */
section{padding:88px 0}
.sec-tag{display:inline-flex;align-items:center;gap:7px;background:var(--green-dim);color:var(--green-dark);font-size:12.5px;font-weight:700;padding:5px 13px;border-radius:999px;margin-bottom:14px;text-transform:uppercase;letter-spacing:.05em}
.sec-h{font-size:clamp(28px,3.2vw,44px);font-weight:900;letter-spacing:-.04em;line-height:1.05;margin-bottom:14px}
.sec-p{font-size:16.5px;color:var(--muted);line-height:1.72;max-width:600px;margin-bottom:52px}
.sec-center{text-align:center}
.sec-center .sec-p{margin-left:auto;margin-right:auto}

/* ── Page hero ─── */
.page-hero{background:radial-gradient(ellipse 80% 60% at 70% 20%,rgba(25,197,125,.08) 0%,transparent 60%),linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 45%,#0f2235 100%);padding:80px 0 90px;position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(255,255,255,.04)'/%3E%3C/svg%3E");pointer-events:none}
.hero-grid{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 80px);pointer-events:none}
.page-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.hero-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(25,197,125,.14);border:1px solid var(--green-line);color:var(--green);font-size:12.5px;font-weight:700;padding:5px 14px;border-radius:999px;margin-bottom:24px;letter-spacing:.04em;text-transform:uppercase}
.page-hero h1{font-size:clamp(36px,4.5vw,60px);font-weight:900;line-height:1.03;letter-spacing:-.04em;color:#fff;margin-bottom:18px}
.page-hero h1 em{font-style:normal;color:var(--green)}
.hero-sub{font-size:17px;color:rgba(255,255,255,.58);line-height:1.72;margin-bottom:32px;max-width:520px}
.hero-trust{display:flex;flex-wrap:wrap;gap:16px;margin-top:0}
.ht-item{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.6)}
.ht-item i{color:var(--green);font-size:13px}

/* ── Hero visual panel (right side) ─── */
.h-panel{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:22px;backdrop-filter:blur(10px)}
.h-panel-bar{display:flex;align-items:center;gap:6px;margin-bottom:18px}
.h-panel-bar .d{width:10px;height:10px;border-radius:50%}
.h-panel-title-bar{flex:1;background:rgba(255,255,255,.07);height:10px;border-radius:5px;margin:0 8px}
.hps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:14px}
.hps-cell{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:10px 6px;text-align:center;min-width:0;overflow:hidden}
.hps-val{font-size:clamp(12px,1.3vw,16px);font-weight:900;color:#fff;line-height:1.1;margin-bottom:3px;white-space:nowrap;overflow:hidden}
.hps-val.g{color:var(--green)}
.hps-lbl{font-size:clamp(7px,.7vw,9px);color:rgba(255,255,255,.38);text-transform:uppercase;letter-spacing:.03em;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden}
.hsr{display:flex;flex-direction:column;gap:8px}
.hsr-item{background:rgba(255,255,255,.94);border-radius:11px;padding:11px 12px;display:flex;align-items:center;gap:10px;min-width:0;overflow:hidden}
.hsr-item>div:not(.hsr-icon):not(.hsr-tag){flex:1;min-width:0;overflow:hidden}
.hsr-icon{width:34px;height:34px;border-radius:9px;background:var(--green-dim);color:var(--green);display:grid;place-items:center;font-size:13px;flex:0 0 auto}
.hsr-lbl{font-size:12.5px;font-weight:700;color:var(--text);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hsr-sub{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hsr-tag{margin-left:auto;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--green-dim);color:var(--green-dark);white-space:nowrap;flex:0 0 auto}

/* ── Pricing tables ─── */
.pricing-section{background:var(--bg)}
.vat-toggle{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:48px}
.vat-toggle span{font-size:14px;font-weight:600;color:var(--muted);transition:color .2s,font-weight .2s}
.vat-toggle span.active{color:var(--text);font-weight:700}
/* billing toggle: monthly active by default, yearly active when toggled */
.monthly-label{color:var(--text);font-weight:700}
.hourly-label{color:var(--muted);font-weight:600}
.monthly-label.active,.hourly-label.active{color:var(--text);font-weight:700}
/* when yearly is on, monthly becomes muted */
.monthly-label:not(.active){color:var(--muted);font-weight:600}
.toggle-switch{width:48px;height:26px;background:#dce8f0;border-radius:999px;cursor:pointer;position:relative;transition:background .2s;border:none;flex:0 0 auto}
.toggle-switch.on{background:var(--green)}
.toggle-switch::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.toggle-switch.on::after{transform:translateX(22px)}
.pricing-grid{display:grid;gap:20px}
.pricing-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.pricing-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.pricing-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.plan-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-xl);padding:28px 24px;position:relative;transition:transform .2s,box-shadow .2s,border-color .2s}
.plan-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--green-line)}
.plan-card.popular{border-color:var(--green);box-shadow:0 0 0 3px rgba(25,197,125,.1),var(--sh-md)}
.pop-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--green);color:#fff;font-size:12px;font-weight:800;padding:4px 16px;border-radius:999px;white-space:nowrap;letter-spacing:.02em}
.plan-name{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:10px}
.plan-price{display:flex;align-items:baseline;gap:2px;margin-bottom:4px}
.price-cur{font-size:20px;font-weight:800;color:var(--text)}
.price-amt{font-size:48px;font-weight:900;color:var(--text);letter-spacing:-.04em;line-height:1}
.price-dec{font-size:22px;font-weight:800;color:var(--text)}
.price-per{font-size:13px;color:var(--muted);font-weight:500;margin-left:2px}
.price-hour{font-size:12.5px;color:var(--muted);margin-bottom:18px}
.plan-feats{list-style:none;margin-bottom:24px;display:flex;flex-direction:column;gap:10px}
.plan-feats li{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--muted)}
.plan-feats li i{color:var(--green);font-size:12px;flex:0 0 auto;margin-top:2px}
.plan-feats li strong{color:var(--text);font-weight:700}
.plan-sep{height:1px;background:var(--border);margin:14px 0}

/* ── Features grid ─── */
.features-section{background:#fff}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feat-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-xl);padding:28px 24px;transition:transform .2s,box-shadow .2s}
.feat-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.feat-ico{width:50px;height:50px;border-radius:15px;background:var(--green-dim);color:var(--green);display:grid;place-items:center;font-size:20px;margin-bottom:16px}
.feat-title{font-size:17px;font-weight:800;margin-bottom:8px}
.feat-desc{font-size:14.5px;color:var(--muted);line-height:1.65}

/* ── Specs table ─── */
.specs-table{width:100%;border-collapse:collapse;font-size:14px}
.specs-table th{text-align:left;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:10px 14px;border-bottom:2px solid var(--border)}
.specs-table td{padding:14px;border-bottom:1px solid var(--border);color:var(--text)}
.specs-table tr:hover td{background:var(--bg)}
.specs-table td:first-child{font-weight:700}
.specs-table .tag{display:inline-flex;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700}
.specs-table .tag-green{background:var(--green-dim);color:var(--green-dark)}
.specs-table .tag-blue{background:rgba(99,179,237,.12);color:#2563eb}

/* ── CTA band ─── */
.cta-band{background:linear-gradient(135deg,#0d9e63 0%,var(--green) 50%,#00cc80 100%);padding:80px 0}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.cta-copy h2{font-size:clamp(26px,2.8vw,42px);font-weight:900;color:#fff;letter-spacing:-.04em;line-height:1.1;margin-bottom:8px}
.cta-copy p{font-size:16px;color:rgba(255,255,255,.78)}
.cta-btns{display:flex;gap:12px;flex-wrap:wrap}

/* ── Stats bar ─── */
.stats-bar{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-3) 100%);padding:56px 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center}
.stat-val{font-size:42px;font-weight:900;color:#fff;letter-spacing:-.05em;line-height:1;margin-bottom:5px}
.stat-val span{color:var(--green)}
.stat-lbl{font-size:13.5px;color:rgba(255,255,255,.4);font-weight:500}

/* ── FAQ ─── */
.faq-section{background:var(--bg)}
.faq-list{display:flex;flex-direction:column;gap:12px;max-width:800px;margin:0 auto}
.faq-item{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;cursor:pointer;font-size:15px;font-weight:700;color:var(--text)}
.faq-q i{color:var(--green);font-size:13px;transition:transform .2s;flex:0 0 auto}
.faq-item.open .faq-q i{transform:rotate(180deg)}
.faq-a{display:none;padding:0 22px 18px;font-size:14.5px;color:var(--muted);line-height:1.7}
.faq-item.open .faq-a{display:block}

/* ── Footer ─── */
footer{background:var(--navy);color:rgba(255,255,255,.6);padding:72px 0 0}
.ft-top{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:48px;padding-bottom:52px;border-bottom:1px solid rgba(255,255,255,.07)}
.ft-brand img{height:34px;width:auto;margin-bottom:16px}
.ft-brand p{font-size:14px;line-height:1.75;color:rgba(255,255,255,.42);max-width:270px;margin-bottom:22px}
.ft-socials{display:flex;gap:9px}
.ft-soc{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.06);display:grid;place-items:center;font-size:14px;transition:all .15s}
.ft-soc:hover{background:var(--green);color:#fff;border-color:var(--green)}
.ft-col h4{font-size:12.5px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px}
.ft-links{list-style:none;display:flex;flex-direction:column;gap:10px}
.ft-links a{font-size:14px;color:rgba(255,255,255,.45);transition:color .14s}
.ft-links a:hover{color:var(--green)}
.ft-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0px 5px 1px;flex-wrap:wrap}
.ft-bottom p,.ft-bottom a{font-size:13px;color:rgba(255,255,255,.3)}
.ft-bottom a:hover{color:var(--green)}
.ft-bottom-links{display:flex;gap:18px}
.ft-vat{padding:0px 0 16px;text-align:left}
.ft-vat p{font-size:11.5px;color:rgba(255,255,255,.28);line-height:1.6}

/* ── Tooltips ─── */
.tt{display:inline-flex;align-items:center;cursor:help;margin-left:5px;vertical-align:middle;position:relative}
.tt i{font-size:11px;color:#94a3b8;transition:color .15s}
.tt:hover i{color:#19c57d}
.tt-bubble{position:fixed;z-index:9999;background:#1e293b;color:#e2e8f0;font-size:12px;font-weight:400;line-height:1.55;padding:9px 13px;border-radius:10px;width:230px;white-space:normal;text-align:left;pointer-events:none;opacity:0;transition:opacity .15s;box-shadow:0 6px 24px rgba(0,0,0,.28);transform:translate(-50%,-100%)}
.tt-bubble::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#1e293b}
.tt-bubble.tt-show{opacity:1}

/* ── Responsive ─── */
@media(max-width:1024px){.ft-top{grid-template-columns:1fr 1fr;gap:36px}.page-hero-inner{gap:40px}.pricing-grid.cols-4{grid-template-columns:repeat(2,1fr)}.pricing-grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.page-hero-inner{grid-template-columns:1fr}.hero-panel-side{display:none}.stats-grid{grid-template-columns:repeat(2,1fr)}.feat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.nav-links,.nav-right{display:none}.hamburger{display:flex}.ft-top{grid-template-columns:1fr}section{padding:60px 0}.page-hero{padding:60px 0 70px}.pricing-grid.cols-3{grid-template-columns:1fr}.pricing-grid.cols-4{grid-template-columns:1fr}.feat-grid{grid-template-columns:1fr}.cta-inner{flex-direction:column}}
@media(max-width:480px){.stats-grid{grid-template-columns:1fr 1fr}}

/* ── email-service.html ── */

    .check-icon{color:var(--green);font-size:15px}
    .cross-icon{color:#cbd5e0;font-size:15px}
    .compare-table{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-sm)}
    .compare-table th{background:var(--navy);color:#fff;padding:14px 18px;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;text-align:center}
    .compare-table th:first-child{text-align:left}
    .compare-table td{padding:13px 18px;border-bottom:1px solid var(--border);text-align:center;color:var(--muted);font-size:13.5px}
    .compare-table td:first-child{text-align:left;font-weight:600;color:var(--text)}
    .compare-table tr:hover td{background:var(--bg)}
    .compare-table tr:last-child td{border-bottom:none}
    .pop-col{background:rgba(25,197,125,.04)}
  

/* ── dedicated-servers.html ── */

    .config-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
    .config-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-xl);padding:28px 24px;transition:transform .2s,box-shadow .2s,border-color .2s}
    .config-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--green-line)}
    .config-card.featured{background:linear-gradient(155deg,var(--navy-3,#172535) 0%,var(--navy-2,#111e2b) 100%);border-color:transparent}
    .config-badge{display:inline-block;background:var(--green-dim);color:var(--green-dark);font-size:11.5px;font-weight:700;padding:3px 11px;border-radius:999px;margin-bottom:14px;text-transform:uppercase;letter-spacing:.05em}
    .config-card.featured .config-badge{background:rgba(25,197,125,.2);color:var(--green)}
    .config-name{font-size:19px;font-weight:800;margin-bottom:16px;color:var(--text)}
    .config-card.featured .config-name{color:#fff}
    .config-spec{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);font-size:14px}
    .config-card.featured .config-spec{border-color:rgba(255,255,255,.08);color:rgba(255,255,255,.7)}
    .config-spec:last-of-type{border-bottom:none}
    .config-spec i{width:20px;text-align:center;color:var(--green);font-size:13px}
    .config-spec strong{color:var(--text);margin-left:auto}
    .config-card.featured .config-spec strong{color:#fff}
    @media(max-width:900px){.config-grid{grid-template-columns:1fr 1fr}}
    @media(max-width:600px){.config-grid{grid-template-columns:1fr}}
  

/* ── colocation.html ── */

    .hero-colo{padding: 100px 0 90px;position: relative;overflow: hidden;background: linear-gradient(rgba(11, 15, 22, 0.15) 0%, rgba(11, 15, 22, 0.25) 50%, rgba(11, 15, 22, 0.5) 100%), radial-gradient(circle at 50% 22%, rgba(11, 15, 22, 0) 0px, rgba(11, 15, 22, 0) 32%, rgba(11, 15, 22, 0.6) 55%, rgba(11, 15, 22, 0.92) 80%), url(https://static.thehostcare.com/cdn/images/backgrounds/hero-colo.jpg) center top / cover no-repeat fixed rgb(11, 15, 22)!important;}

/* ── email-service.html ── */
    .hero-email .container{display:block}
    .hero-email{padding:100px 0 90px;background:linear-gradient(rgba(11,15,22,.18) 0%,rgba(11,15,22,.32) 50%,rgba(11,15,22,.6) 100%),radial-gradient(circle at 50% 22%,rgba(11,15,22,0) 0px,rgba(11,15,22,0) 32%,rgba(11,15,22,.6) 55%,rgba(11,15,22,.92) 80%),url(https://static.thehostcare.com/cdn/images/backgrounds/hero-email.jpg) center top/cover no-repeat fixed rgb(11,15,22)!important;}
    .hero-email .hero-content{max-width:700px}
    .hero-email .hero-content h1{font-size:clamp(36px,4.5vw,60px);font-weight:900;line-height:1.03;letter-spacing:-.04em;color:#fff;margin-bottom:18px}
    .hero-email .hero-content h1 em{font-style:normal;color:var(--green)}
    .hero-email .hero-sub{font-size:17px;color:rgba(255,255,255,.58);line-height:1.72;margin-bottom:24px;max-width:560px}
    .hero-email .hero-trust{margin-bottom:0}
    .hero-email .hero-trust span{color:rgba(255,255,255,.72)}
    .hero-email .hero-trust span i{color:#19c57d;font-size:12px}

    .colo-options{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:48px}
    .colo-option{background:#fff;border:1.5px solid var(--border);border-radius:var(--r-xl);padding:28px 24px;text-align:center;transition:transform .2s,box-shadow .2s,border-color .2s}
    .colo-option:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--green-line)}
    .colo-option.featured{background:linear-gradient(155deg,#172535,#111e2b);border-color:transparent}
    .colo-ico{width:64px;height:64px;border-radius:20px;background:var(--green-dim);color:var(--green);display:grid;place-items:center;font-size:26px;margin:0 auto 18px}
    .colo-option.featured .colo-ico{background:rgba(25,197,125,.18)}
    .colo-option-name{font-size:20px;font-weight:800;margin-bottom:8px}
    .colo-option.featured .colo-option-name{color:#fff}
    .colo-option-desc{font-size:14.5px;color:var(--muted);line-height:1.65;margin-bottom:20px}
    .colo-option.featured .colo-option-desc{color:rgba(255,255,255,.52)}
    .dc-specs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:48px}
    .dc-spec{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;display:flex;align-items:flex-start;gap:14px}
    .dc-spec-ico{width:42px;height:42px;border-radius:12px;background:var(--green-dim);color:var(--green);display:grid;place-items:center;font-size:17px;flex:0 0 auto}
    .dc-spec-title{font-size:14.5px;font-weight:700;margin-bottom:4px}
    .dc-spec-val{font-size:13.5px;color:var(--muted)}
    @media(max-width:900px){.colo-options{grid-template-columns:1fr 1fr}.dc-specs{grid-template-columns:1fr}}
    @media(max-width:600px){.colo-options{grid-template-columns:1fr}}
  

/* ── it-solutions.html ── */

    .services-list{display:grid;grid-template-columns:1fr 1fr;gap:24px}
    .svc-item{background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);padding:32px;display:flex;gap:20px;transition:transform .2s,box-shadow .2s,border-color .2s}
    .svc-item:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:var(--green-line)}
    .svc-item-ico{width:54px;height:54px;border-radius:16px;background:var(--green-dim);color:var(--green);display:grid;place-items:center;font-size:22px;flex:0 0 auto}
    .svc-item-title{font-size:18px;font-weight:800;margin-bottom:8px}
    .svc-item-desc{font-size:14.5px;color:var(--muted);line-height:1.65}
    .process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative}
    .process-steps::before{content:'';position:absolute;top:28px;left:10%;right:10%;height:2px;background:linear-gradient(90deg,var(--green),var(--green-dark));z-index:0}
    .step{text-align:center;position:relative;z-index:1}
    .step-num{width:56px;height:56px;border-radius:50%;background:var(--green);color:#fff;font-size:20px;font-weight:900;display:grid;place-items:center;margin:0 auto 16px;box-shadow:var(--sh-green)}
    .step-title{font-size:15px;font-weight:700;margin-bottom:6px}
    .step-desc{font-size:13px;color:var(--muted);line-height:1.6}
    @media(max-width:900px){.services-list{grid-template-columns:1fr}.process-steps{grid-template-columns:repeat(2,1fr)}.process-steps::before{display:none}}
    @media(max-width:600px){.process-steps{grid-template-columns:1fr}}
  

/* ── domains.html ── */

    .domain-hero-search{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:20px;padding:28px;backdrop-filter:blur(10px);max-width:680px}
    .dsb-label{font-size:12.5px;font-weight:700;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.07em;margin-bottom:12px}
    .dsb-row{display:flex;background:rgba(255,255,255,.96);border-radius:13px;overflow:hidden;border:2px solid transparent;transition:border-color .2s,box-shadow .2s}
    .dsb-row:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(25,197,125,.18)}
    .dsb-input{flex:1;border:none;background:transparent;padding:14px 18px;font-size:15.5px;font-family:inherit;color:var(--text);outline:none}
    .dsb-input::placeholder{color:#a0b0c0}
    .dsb-btn{background:var(--green);color:#fff;border:none;padding:0 24px;font-size:15px;font-weight:800;font-family:inherit;cursor:pointer;transition:background .15s;display:flex;align-items:center;gap:8px}
    .dsb-btn:hover{background:var(--green-dark)}
    .dsb-btn.loading{opacity:.7;pointer-events:none}
    .tld-pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
    .tld-pill{background:rgba(25,197,125,.13);border:1px solid rgba(25,197,125,.22);color:var(--green);font-size:12.5px;font-weight:700;padding:4px 12px;border-radius:999px;cursor:pointer;transition:background .13s}
    .tld-pill:hover{background:rgba(25,197,125,.25)}
    .dsb-results{margin-top:14px;display:none;flex-direction:column;gap:8px}
    .dsb-results.show{display:flex}
    .dr-item{background:rgba(255,255,255,.95);border-radius:11px;padding:11px 16px;display:flex;align-items:center;gap:12px;animation:fadeUp .22s ease both}
    @keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
    .dr-name{font-size:14.5px;font-weight:700;color:var(--text);flex:1}
    .dr-badge{font-size:12px;font-weight:700;padding:4px 11px;border-radius:999px}
    .dr-avail{background:rgba(25,197,125,.12);color:var(--green-dark)}
    .dr-taken{background:rgba(239,68,68,.08);color:#dc2626}
    .dr-checking{background:rgba(100,116,139,.08);color:var(--muted)}
    .dr-reg-btn{background:var(--green);color:#fff;border:none;font-size:12.5px;font-weight:700;padding:6px 16px;border-radius:8px;cursor:pointer;font-family:inherit;transition:background .13s;white-space:nowrap}
    .dr-reg-btn:hover{background:var(--green-dark)}
    .dr-error{background:rgba(255,255,255,.1);border-radius:11px;padding:14px 18px;color:rgba(255,255,255,.6);font-size:13.5px;text-align:center}
    .tld-table{width:100%;border-collapse:collapse;font-size:14px}
    .tld-table th{text-align:left;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:10px 14px;border-bottom:2px solid var(--border);background:var(--bg)}
    .tld-table td{padding:13px 14px;border-bottom:1px solid var(--border);color:var(--text)}
    .tld-table td:first-child{font-weight:700;font-size:15px;color:var(--green-dark)}
    .tld-table tr:hover td{background:var(--bg)}
    .tld-table tr:last-child td{border-bottom:none}
    .tld-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
    @media(max-width:768px){.tld-grid{grid-template-columns:1fr}}
  

/* ── wordpress-hosting.html ── */

    .wp-badge { display:inline-flex;align-items:center;gap:6px;background:#21759b22;color:#21759b;border:1px solid #21759b44;border-radius:20px;padding:4px 14px;font-size:.8rem;font-weight:600;margin-bottom:18px; }
    .wp-badge i { color:#21759b; }
    .page-hero { background:linear-gradient(135deg,#0c1822 0%,#0f1f2c 50%,#112233 100%); }
    .page-hero::before { background:radial-gradient(ellipse at 60% 50%,#21759b18 0%,transparent 60%); }
    .page-hero .hero-tag { background:#21759b22;color:#5ba3c9;border-color:#21759b44; }
    .page-hero .btn-primary { background:#21759b; }
    .page-hero .btn-primary:hover { background:#1a5f7a; }
    .feat-icon.wp { background:#21759b22;color:#21759b; }
    .plan-card.popular .plan-badge { background:#21759b; }
    .plan-card.popular { border-color:#21759b; }
    .plan-card.popular .btn-primary { background:#21759b; }
    .plan-card.popular .btn-primary:hover { background:#1a5f7a; }
    .wp-stack { background:#0f1f2c;padding:80px 0; }
    .wp-stack h2 { text-align:center;font-size:2rem;font-weight:800;color:#fff;margin-bottom:12px; }
    .wp-stack .section-desc { text-align:center;color:#8a9bb0;margin-bottom:50px; }
    .stack-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;max-width:1000px;margin:0 auto; }
    .stack-item { background:#0c1822;border:1px solid #1e3045;border-radius:12px;padding:24px 20px;text-align:center; }
    .stack-item i { font-size:2rem;color:#21759b;margin-bottom:12px;display:block; }
    .stack-item h4 { color:#fff;font-size:.95rem;font-weight:700;margin-bottom:6px; }
    .stack-item p { color:#8a9bb0;font-size:.82rem;line-height:1.5; }
    .comparison-table { width:100%;border-collapse:collapse;margin-top:40px; }
    .comparison-table th { background:#0f1f2c;color:#8a9bb0;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;padding:14px 16px;text-align:left;border-bottom:1px solid #1e3045; }
    .comparison-table td { padding:14px 16px;border-bottom:1px solid #1a2d40;color:#c8d8e8;font-size:.9rem; }
    .comparison-table tr:last-child td { border-bottom:none; }
    .comparison-table tr:hover td { background:#0f1f2c50; }
    .comparison-table td:first-child { color:#fff;font-weight:600; }
    .check-green { color:#19c57d; }
    .check-blue { color:#21759b; }
  

/* ── reseller-hosting.html ── */

    .page-hero { background:linear-gradient(135deg,#0c1822 0%,#0f1f2c 50%,#112233 100%); }
    .page-hero::before { background:radial-gradient(ellipse at 60% 50%,#f97316 0.08 0%,transparent 60%); }
    .page-hero .hero-tag { background:#19c57d22;color:#fb923c;border-color:#f9731644; }
    .page-hero .btn-primary { background:var(--green); }
    .page-hero .btn-primary:hover { background:#12945e; }
    .feat-icon.orange { background:#19c57d22;color:var(--green); }
    .plan-card.popular .plan-badge { background:var(--green); }
    .plan-card.popular { border-color:var(--green); }
    .plan-card.popular .btn-primary { background:#19c57d; }
    .plan-card.popular .btn-primary:hover { background:#17b371; }
    .whm-strip { background:#0f1f2c;padding:70px 0; }
    .whm-strip .container { display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center; }
    .whm-strip h2 { color:#fff;font-size:2rem;font-weight:800;margin-bottom:16px; }
    .whm-strip p { color:#8a9bb0;line-height:1.7;margin-bottom:20px; }
    .whm-features { display:flex;flex-direction:column;gap:12px; }
    .whm-feat { display:flex;align-items:flex-start;gap:14px; }
    .whm-feat-icon { width:38px;height:38px;border-radius:8px;background:#19c57d22;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--green); }
    .whm-feat-text h4 { color:#fff;font-size:.9rem;font-weight:700;margin-bottom:3px; }
    .whm-feat-text p { color:#8a9bb0;font-size:.83rem;line-height:1.5;margin:0; }
    .whm-visual { background:#0c1822;border:1px solid #1e3045;border-radius:16px;padding:32px; }
    .whm-visual h4 { color:var(--green);font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:20px; }
    .whm-row { display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #1a2d40;font-size:.87rem; }
    .whm-row:last-child { border-bottom:none; }
    .whm-row span:first-child { color:#8a9bb0; }
    .whm-row span:last-child { color:#fff;font-weight:600; }
    .whm-row .green { color:#19c57d; }
    .reseller-how { background:#0c1822;padding:70px 0; }
    .reseller-how h2 { text-align:center;font-size:2rem;font-weight:800;color:#fff;margin-bottom:12px; }
    .reseller-how .section-desc { text-align:center;margin-bottom:50px; }
    .steps-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px; }
    .step-card { background:#0f1f2c;border:1px solid #1e3045;border-radius:14px;padding:28px 24px;text-align:center;position:relative; }
    .step-num { width:44px;height:44px;border-radius:50%;background:var(--green);color:#fff;font-weight:800;font-size:1.1rem;display:flex;align-items:center;justify-content:center;margin:0 auto 16px; }
    .step-card h4 { color:#fff;font-size:1rem;font-weight:700;margin-bottom:8px; }
    .step-card p { color:#8a9bb0;font-size:.84rem;line-height:1.6; }
    .comparison-table { width:100%;border-collapse:collapse;margin-top:40px; }
    .comparison-table th { background:#0f1f2c;color:#8a9bb0;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;padding:14px 16px;text-align:left;border-bottom:1px solid #1e3045; }
    .comparison-table td { padding:14px 16px;border-bottom:1px solid #1a2d40;color:#c8d8e8;font-size:.9rem; }
    .comparison-table tr:last-child td { border-bottom:none; }
    .comparison-table tr:hover td { background:#0f1f2c50; }
    .comparison-table td:first-child { color:#fff;font-weight:600; }
    .check-green { color:#19c57d; }
    @media(max-width:768px){.whm-strip .container{grid-template-columns:1fr}}
  

/* ── contact.html ── */

    /* ── Contact page specific styles ── */
    .contact-hero {
      background: linear-gradient(135deg,#0c1822 0%,#0f1f2c 50%,#112233 100%);
      padding: 120px 0 80px;
      position: relative;
      overflow: hidden;
    }
    .contact-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 0%,#19c57d14 0%,transparent 65%);
      pointer-events: none;
    }
    .contact-hero-inner {
      text-align: center;
      position: relative;
      z-index: 1;
    }
    .contact-hero .hero-tag {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: #19c57d18;
      color: #19c57d;
      border: 1px solid #19c57d40;
      border-radius: 20px;
      padding: 5px 16px;
      font-size: .82rem;
      font-weight: 600;
      letter-spacing: .04em;
      margin-bottom: 20px;
    }
    .contact-hero h1 {
      font-size: clamp(2rem, 5vw, 3.4rem);
      font-weight: 900;
      color: #fff;
      line-height: 1.15;
      margin-bottom: 16px;
    }
    .contact-hero h1 em {
      font-style: normal;
      color: #19c57d;
    }
    .contact-hero p {
      color: #8a9bb0;
      font-size: 1.1rem;
      max-width: 560px;
      margin: 0 auto;
      line-height: 1.7;
    }

    /* ── Contact options bar ── */
    .contact-options {
      background: #0c1822;
      padding: 60px 0;
    }
    .options-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 20px;
    }
    .option-card {
      background: #0f1f2c;
      border: 1px solid #1e3045;
      border-radius: 14px;
      padding: 28px 24px;
      text-align: center;
      transition: border-color .2s, transform .2s;
    }
    .option-card:hover {
      border-color: #19c57d55;
      transform: translateY(-3px);
    }
    .option-icon {
      width: 52px;
      height: 52px;
      border-radius: 12px;
      background: #19c57d18;
      color: #19c57d;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      margin: 0 auto 16px;
    }
    .option-card h3 {
      color: #fff;
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 6px;
    }
    .option-card p {
      color: #8a9bb0;
      font-size: .84rem;
      line-height: 1.5;
      margin-bottom: 14px;
    }
    .option-link {
      color: #19c57d;
      font-size: .85rem;
      font-weight: 600;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    .option-link:hover { text-decoration: underline; }

    /* ── Main contact section ── */
    .contact-main {
      background: #0f1f2c;
      padding: 80px 0;
    }
    .contact-layout {
      display: grid;
      grid-template-columns: 1fr 1.6fr;
      gap: 60px;
      align-items: start;
    }
    /* Info column */
    .contact-info h2 {
      color: #fff;
      font-size: 1.7rem;
      font-weight: 800;
      margin-bottom: 14px;
    }
    .contact-info > p {
      color: #8a9bb0;
      line-height: 1.7;
      margin-bottom: 32px;
    }
    .info-item {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      margin-bottom: 24px;
    }
    .info-icon {
      width: 42px;
      height: 42px;
      border-radius: 10px;
      background: #19c57d18;
      color: #19c57d;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      flex-shrink: 0;
    }
    .info-text h4 {
      color: #fff;
      font-size: .9rem;
      font-weight: 700;
      margin-bottom: 3px;
    }
    .info-text p, .info-text a {
      color: #8a9bb0;
      font-size: .85rem;
      line-height: 1.5;
      text-decoration: none;
    }
    .info-text a:hover { color: #19c57d; }
    .response-box {
      background: #0c1822;
      border: 1px solid #1e3045;
      border-left: 3px solid #19c57d;
      border-radius: 10px;
      padding: 18px 20px;
      margin-top: 32px;
    }
    .response-box h4 {
      color: #fff;
      font-size: .88rem;
      font-weight: 700;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .response-box h4 i { color: #19c57d; }
    .response-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 0;
      border-bottom: 1px solid #1a2d40;
      font-size: .83rem;
    }
    .response-row:last-child { border-bottom: none; }
    .response-row span:first-child { color: #8a9bb0; }
    .response-row span:last-child { color: #19c57d; font-weight: 600; }

    /* Form column */
    .contact-form-wrap {
      background: #0c1822;
      border: 1px solid #1e3045;
      border-radius: 18px;
      padding: 40px 36px;
    }
    .contact-form-wrap h2 {
      color: #fff;
      font-size: 1.4rem;
      font-weight: 800;
      margin-bottom: 6px;
    }
    .contact-form-wrap > p {
      color: #8a9bb0;
      font-size: .88rem;
      margin-bottom: 28px;
    }
    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    .form-group {
      margin-bottom: 18px;
    }
    .form-group label {
      display: block;
      color: #c8d8e8;
      font-size: .83rem;
      font-weight: 600;
      margin-bottom: 7px;
    }
    .form-group label span.required {
      color: #ef4444;
      margin-left: 2px;
    }
    .form-control {
      width: 100%;
      background: #0f1f2c;
      border: 1px solid #1e3045;
      border-radius: 9px;
      color: #fff;
      font-family: 'Inter', sans-serif;
      font-size: .9rem;
      padding: 12px 14px;
      outline: none;
      transition: border-color .2s, box-shadow .2s;
      box-sizing: border-box;
    }
    .form-control:focus {
      border-color: #19c57d;
      box-shadow: 0 0 0 3px #19c57d18;
    }
    .form-control::placeholder { color: #4a6070; }
    textarea.form-control {
      resize: vertical;
      min-height: 130px;
    }
    select.form-control option { background: #0f1f2c; }
    .form-submit {
      margin-top: 8px;
    }
    .btn-submit {
      width: 100%;
      background: #19c57d;
      color: #fff;
      border: none;
      border-radius: 10px;
      padding: 14px 24px;
      font-family: 'Inter', sans-serif;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      transition: background .2s, transform .15s;
    }
    .btn-submit:hover:not(:disabled) { background: #14a869; transform: translateY(-1px); }
    .btn-submit:disabled { opacity: .6; cursor: not-allowed; }
    .form-notice {
      color: #4a6070;
      font-size: .78rem;
      text-align: center;
      margin-top: 12px;
      line-height: 1.5;
    }
    /* Alert messages */
    .form-alert {
      display: none;
      border-radius: 10px;
      padding: 14px 18px;
      margin-top: 16px;
      font-size: .88rem;
      font-weight: 600;
      align-items: center;
      gap: 10px;
    }
    .form-alert.show { display: flex; }
    .form-alert.success {
      background: #19c57d18;
      border: 1px solid #19c57d44;
      color: #19c57d;
    }
    .form-alert.error {
      background: #ef444418;
      border: 1px solid #ef444444;
      color: #ef4444;
    }
    /* Honeypot (anti-spam) */
    .hp-field { display: none !important; visibility: hidden; }

    /* ── FAQ band ── */
    .faq-band { background: #0c1822; padding: 80px 0; }

    @media(max-width:900px) {
      .contact-layout { grid-template-columns: 1fr; gap: 40px; }
      .form-row { grid-template-columns: 1fr; }
      .contact-form-wrap { padding: 28px 22px; }
    }
  


/* ══════════════════════════════════════════════════════════════════
   SERVICE PAGE COMPONENTS
   (features-band, pricing-band, plan cards, hero layout, faq, footer)
   ══════════════════════════════════════════════════════════════════ */

/* ── Service page hero layout ── */
.page-hero .container{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.hero-content{position:relative;z-index:1}
.hero-content h1{font-size:clamp(2rem,4vw,3.2rem);font-weight:900;line-height:1.1;color:#fff;margin-bottom:16px;letter-spacing:-.03em}
.hero-content h1 em{font-style:normal;color:#19c57d}
.hero-content .hero-sub{font-size:1.05rem;color:rgba(255,255,255,.6);line-height:1.72;margin-bottom:28px;max-width:500px}
.hero-trust{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:30px}
.hero-trust span{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:rgba(255,255,255,.65)}
.hero-trust span i{color:#19c57d;font-size:12px}
.hero-visual{display:flex;align-items:center;justify-content:center}
.visual-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:36px;backdrop-filter:blur(12px);display:flex;flex-direction:column;gap:24px;width:100%;max-width:360px}
.visual-stat{text-align:center}
.stat-num{display:block;font-size:2.4rem;font-weight:900;color:#19c57d;line-height:1;margin-bottom:6px}
.stat-label{display:block;font-size:.8rem;font-weight:600;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.07em}

/* ── Features band (service pages) ── */
.features-band{background:#fff;padding:80px 0}
.features-band h2{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:900;color:#1b1f28;margin-bottom:10px;text-align:center;letter-spacing:-.03em}
.section-desc{color:#64748b;font-size:1rem;line-height:1.7;text-align:center;margin-bottom:48px;max-width:600px;margin-left:auto;margin-right:auto}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feat-card{background:#f6fbff;border:1px solid #e2eef8;border-radius:18px;padding:28px 24px;transition:transform .2s,box-shadow .2s}
.feat-card:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(15,24,40,.12)}
.feat-icon{width:50px;height:50px;border-radius:14px;background:rgba(25,197,125,.12);color:#19c57d;display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:16px}
.feat-card h3{font-size:1rem;font-weight:800;color:#1b1f28;margin-bottom:8px}
.feat-card p{font-size:.88rem;color:#64748b;line-height:1.65}

/* ── Pricing band (service pages) ── */
.pricing-band{background:#f6fbff;padding:80px 0}
.pricing-band h2,.pricing-header h2{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:900;color:#1b1f28;letter-spacing:-.03em}
.pricing-header{text-align:center;margin-bottom:48px}
.pricing-header .section-desc{margin-bottom:20px}

/* ── VAT / Billing toggle ── */
.pricing-toggle{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:16px}
.pricing-toggle>span{font-size:.85rem;font-weight:600;color:#64748b}
.toggle-btn{display:inline-flex;align-items:center;gap:10px;background:#e2eef8;border:none;border-radius:999px;padding:5px 18px 5px 5px;cursor:pointer;font-family:inherit;transition:background .2s;position:relative}
.toggle-btn.on{background:rgba(25,197,125,.15)}
.toggle-track{width:38px;height:22px;background:#fff;border-radius:999px;flex:0 0 auto;position:relative;box-shadow:0 1px 4px rgba(0,0,0,.15);transition:background .2s}
.toggle-track::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#19c57d;transition:transform .2s}
.toggle-btn.on .toggle-track::after{transform:translateX(16px)}
.toggle-label{font-size:.8rem;font-weight:700;color:#94a3b8;transition:color .2s}
.toggle-label.active{color:#1b1f28}

/* ── Plan grid & cards ── */
.plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.plan-card{background:#fff;border:1.5px solid #e2eef8;border-radius:20px;padding:28px 22px;position:relative;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s,border-color .2s}
.plan-card:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(15,24,40,.12);border-color:rgba(25,197,125,.3)}
.plan-card.popular{border-color:#19c57d;box-shadow:0 0 0 3px rgba(25,197,125,.1),0 8px 32px rgba(15,24,40,.09)}
.plan-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:#19c57d;color:#fff;font-size:.72rem;font-weight:800;padding:4px 16px;border-radius:999px;white-space:nowrap;letter-spacing:.03em}
.plan-header{margin-bottom:16px}
.plan-header h3{font-size:1.1rem;font-weight:800;color:#1b1f28;margin-bottom:4px}
.plan-desc{font-size:.8rem;color:#64748b;font-weight:500}
.plan-price{display:flex;align-items:baseline;gap:4px;margin-bottom:20px}
.price-main{font-size:2.4rem;font-weight:900;color:#1b1f28;letter-spacing:-.04em;line-height:1}
.price-period{font-size:.78rem;color:#94a3b8;font-weight:500;letter-spacing:.01em}
.plan-features{list-style:none;flex:1;display:flex;flex-direction:column;gap:9px;margin-bottom:24px}
.plan-features li{display:flex;align-items:flex-start;gap:9px;font-size:.875rem;color:#475569;line-height:1.45}
.plan-features li i{color:#19c57d;font-size:.75rem;margin-top:3px;flex:0 0 auto}

/* ── FAQ band (dark - service pages) ── */
.faq-band{background:#f6fbff;padding:80px 0}
.faq-band h2{font-size:clamp(1.5rem,2.8vw,2.2rem);font-weight:900;color:#1b1f28;text-align:center;margin-bottom:10px;letter-spacing:-.03em}
.faq-band .section-desc{text-align:center;margin-bottom:40px}
.faq-list{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq-item{background:#fff;border:1px solid #e2eef8;border-radius:14px;overflow:hidden}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;cursor:pointer;background:none;border:none;font-family:inherit;font-size:.95rem;font-weight:700;color:#1b1f28;text-align:left}
.faq-q i{color:#19c57d;font-size:.8rem;transition:transform .2s;flex:0 0 auto}
.faq-item.open .faq-q i{transform:rotate(180deg)}
.faq-a{display:none;padding:0 22px 18px}
.faq-a p{font-size:.875rem;color:#64748b;line-height:1.7}
.faq-item.open .faq-a{display:block}

/* ── CTA band (service pages) ── */
.cta-band{background:linear-gradient(135deg,#0d9e63 0%,#19c57d 50%,#00cc80 100%);padding:80px 0}
.cta-band h2{font-size:clamp(1.5rem,2.8vw,2.4rem);font-weight:900;color:#fff;letter-spacing:-.04em;margin-bottom:10px}
.cta-band p{color:rgba(255,255,255,.8);font-size:1rem;margin-bottom:28px}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.cta-band .container{text-align:center}

/* ── Service page dark footer ── */
.site-footer{background:#0c1620;color:rgba(255,255,255,.55);padding:72px 0 0}
.footer-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:48px;padding-bottom:52px;border-bottom:1px solid rgba(255,255,255,.07)}
.footer-brand img,.footer-logo{height:32px;width:auto;display:block;margin-bottom:16px}
.footer-brand p{font-size:.875rem;color:rgba(255,255,255,.42);line-height:1.75;max-width:280px;margin-bottom:20px}
.footer-social{display:flex;gap:9px}
.footer-social a{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.45);display:flex;align-items:center;justify-content:center;font-size:.875rem;transition:all .15s}
.footer-social a:hover{background:#19c57d;color:#fff;border-color:#19c57d}
.footer-col h4{font-size:.75rem;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px}
.footer-col a{display:block;font-size:.875rem;color:rgba(255,255,255,.45);margin-bottom:10px;transition:color .14s}
.footer-col a:hover{color:#19c57d}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;flex-wrap:wrap}
.footer-bottom p{font-size:.8rem;color:rgba(255,255,255,.3)}
.footer-badges{display:flex;gap:16px;flex-wrap:wrap}
.footer-badges span{font-size:.78rem;color:rgba(255,255,255,.3);display:flex;align-items:center;gap:5px}

/* ── Responsive: service pages ── */
@media(max-width:1100px){.plan-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:900px){.page-hero .container{grid-template-columns:1fr;gap:36px}.hero-visual{display:none}.feat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.feat-grid{grid-template-columns:1fr}.plan-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.cta-band .container{text-align:left}.cta-actions{justify-content:flex-start}}


/* ══════════════════════════════════════════════════════════════════
   HOMEPAGE (index.html) - all unique sections
   ══════════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.hero{padding: 100px 0 90px;position: relative;overflow: hidden;background: linear-gradient(rgba(11, 15, 22, 0.15) 0%, rgba(11, 15, 22, 0.25) 50%, rgba(11, 15, 22, 0.5) 100%), radial-gradient(circle at 50% 22%, rgba(11, 15, 22, 0) 0px, rgba(11, 15, 22, 0) 32%, rgba(11, 15, 22, 0.6) 55%, rgba(11, 15, 22, 0.92) 80%), url(https://static.thehostcare.com/cdn/images/backgrounds/hero-index.jpg) center top / cover no-repeat fixed rgb(11, 15, 22);}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 65% 40%,rgba(25,197,125,.1) 0%,transparent 60%);pointer-events:none}
.hero-grid-line{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 80px),repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 80px);pointer-events:none}
.hero-inner{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center;position:relative;z-index:1}
.hero-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(25,197,125,.14);border:1px solid rgba(25,197,125,.24);color:#19c57d;font-size:.8rem;font-weight:700;padding:6px 16px;border-radius:999px;margin-bottom:22px;letter-spacing:.04em}
.live-dot{width:8px;height:8px;border-radius:50%;background:#19c57d;flex:0 0 auto;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(25,197,125,.5)}50%{box-shadow:0 0 0 6px rgba(25,197,125,0)}}
.hero h1{font-size:clamp(2.4rem,4.5vw,3.8rem);font-weight:900;line-height:1.05;letter-spacing:-.045em;color:#fff;margin-bottom:18px}
.hero h1 em{font-style:normal;color:#19c57d}
.hero-sub{font-size:1.05rem;color:rgba(255,255,255,.58);line-height:1.75;margin-bottom:36px;max-width:520px}

/* ── Domain search box (hero) ── */
.domain-box{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:18px;padding:24px;backdrop-filter:blur(10px)}
.domain-box-label{font-size:.78rem;font-weight:700;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.07em;margin-bottom:12px;display:flex;align-items:center}
.domain-row{display:flex;background:rgba(255,255,255,.96);border-radius:12px;overflow:hidden;border:2px solid transparent;transition:border-color .2s,box-shadow .2s}
.domain-row:focus-within{border-color:#19c57d;box-shadow:0 0 0 3px rgba(25,197,125,.2)}
.domain-row input{flex:1;border:none;background:transparent;padding:13px 16px;font-size:1rem;font-family:inherit;color:#1b1f28;outline:none}
.domain-row input::placeholder{color:#a0aec0}
.domain-row select{border:none;background:transparent;padding:0 12px;font-size:.9rem;font-family:inherit;color:#475569;outline:none;border-left:1px solid #e2eef8;cursor:pointer;font-weight:600}
.domain-btn{background:#19c57d;color:#fff;border:none;padding:0 22px;font-size:.9rem;font-weight:800;font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .15s;white-space:nowrap}
.domain-btn:hover{background:#14a869}
.domain-btn.loading{opacity:.7;pointer-events:none}
.tld-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tld-tag{background:rgba(25,197,125,.14);border:1px solid rgba(25,197,125,.22);color:#19c57d;font-size:.78rem;font-weight:700;padding:4px 11px;border-radius:999px;cursor:pointer;transition:background .13s}
.tld-tag:hover{background:rgba(25,197,125,.26)}
.domain-results{margin-top:12px;display:none;flex-direction:column;gap:8px}
.domain-results.show{display:flex}
.dr-item{background:rgba(255,255,255,.95);border-radius:11px;padding:11px 16px;display:flex;align-items:center;gap:12px;animation:fadeUp .22s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.dr-name{font-size:.9rem;font-weight:700;color:#1b1f28;flex:1}
.dr-badge{font-size:.75rem;font-weight:700;padding:4px 11px;border-radius:999px}
.dr-avail{background:rgba(25,197,125,.12);color:#10a867}
.dr-taken{background:rgba(239,68,68,.09);color:#dc2626}
.dr-register{background:#19c57d;color:#fff;border:none;font-size:.78rem;font-weight:700;padding:6px 14px;border-radius:8px;cursor:pointer;font-family:inherit;transition:background .13s;white-space:nowrap}
.dr-register:hover{background:#14a869}
.dr-error{background:rgba(255,255,255,.08);border-radius:11px;padding:14px 18px;color:rgba(255,255,255,.6);font-size:.85rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ── Trust bar ── */
.trust-bar{background:#fff;padding:64px 0;border-top:1px solid #e8f0f8;border-bottom:1px solid #e8f0f8}
.trust-bar-inner{max-width:1220px;margin:0 auto;padding:0 24px}
.trust-heading{display:flex;align-items:center;gap:20px;margin-bottom:44px}
.trust-heading::before,.trust-heading::after{content:'';flex:1;height:1px;background:#dce8f2}
.trust-heading span{font-size:12px;font-weight:700;color:#8fa3b8;text-transform:uppercase;letter-spacing:.12em;white-space:nowrap}
.trust-logos{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}
.trust-logo-item{flex:0 0 calc(100% / 8);display:flex;align-items:center;justify-content:center;padding:20px 24px;border-right:1px solid #e8f0f8;transition:background .2s}
.trust-logo-item:last-child{border-right:none}
.trust-logo-item:hover{background:#f4f8fd}
.trust-logo-item img{height:30px;width:auto;max-width:110px;object-fit:contain;filter:grayscale(1);opacity:.4;transition:filter .3s,opacity .3s}
.trust-logo-item:hover img{filter:grayscale(0);opacity:1}
@media(max-width:900px){.trust-logo-item{flex:0 0 25%;border-right:1px solid #e8f0f8;border-bottom:1px solid #e8f0f8}.trust-logo-item:nth-child(4n){border-right:none}}
@media(max-width:480px){.trust-logo-item{flex:0 0 50%}.trust-logo-item:nth-child(4n){border-right:1px solid #e8f0f8}.trust-logo-item:nth-child(2n){border-right:none}}

/* ── VAT notice ── */
.vat-note{text-align:center;font-size:12px;color:#9aadbe;margin-top:18px;letter-spacing:.01em}
.vat-note i{margin-right:5px;opacity:.7}

/* ── Table header tooltip (icon only — JS handles the floating bubble) ── */
.th-tooltip{display:inline-flex;align-items:center;margin-left:5px;cursor:help;vertical-align:middle}
.th-tooltip i{font-size:12px;color:#94a3b8;transition:color .2s}
.th-tooltip:hover i{color:#19c57d}
/* Floating tooltip bubble — injected by JS into <body> */
#js-tooltip{position:fixed;z-index:9999;background:#0c1620;color:#d0dcea;font-size:13px;font-weight:400;line-height:1.65;white-space:normal;width:280px;padding:12px 15px;border-radius:11px;border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 32px rgba(0,0,0,.4);pointer-events:none;opacity:0;transition:opacity .15s;text-transform:none;letter-spacing:0}
#js-tooltip.visible{opacity:1}
#js-tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top-color:#0c1620}

/* ── Stats section (homepage) ── */
.stats{background:linear-gradient(135deg,#0c1620 0%,#172535 100%);padding:64px 0}
.stats .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center}
.stat-item .stat-val{font-size:2.8rem;font-weight:900;color:#fff;letter-spacing:-.05em;line-height:1;margin-bottom:6px}
.stat-item .stat-val span{color:#19c57d}
.stat-item .stat-lbl{font-size:.82rem;color:rgba(255,255,255,.4);font-weight:500;text-transform:uppercase;letter-spacing:.06em}

/* ── Services section (homepage) ── */
.services{background:#fff;padding:100px 0}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
.svc-card{background:#f6fbff;border:1px solid #e2eef8;border-radius:22px;padding:32px 28px;display:flex;flex-direction:column;gap:0;transition:transform .2s,box-shadow .2s,border-color .2s}
.svc-card:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(15,24,40,.12);border-color:rgba(25,197,125,.25)}
.svc-card.dark{background:linear-gradient(145deg,#111e2b 0%,#172535 100%);border-color:transparent}
.svc-icon{width:54px;height:54px;border-radius:16px;background:rgba(25,197,125,.13);color:#19c57d;display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:18px;flex:0 0 auto}
.svc-card.dark .svc-icon{background:rgba(25,197,125,.2)}
.svc-name{font-size:1.1rem;font-weight:800;color:#1b1f28;margin-bottom:10px}
.svc-card.dark .svc-name{color:#fff}
.svc-desc{font-size:.875rem;color:#64748b;line-height:1.68;flex:1;margin-bottom:18px}
.svc-card.dark .svc-desc{color:rgba(255,255,255,.5)}
.svc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.svc-tag{background:rgba(25,197,125,.1);color:#10a867;font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:999px;border:1px solid rgba(25,197,125,.2)}
.svc-card.dark .svc-tag{background:rgba(25,197,125,.15);color:#19c57d;border-color:rgba(25,197,125,.25)}
.svc-link{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:700;color:#19c57d;margin-top:auto;transition:gap .15s}
.svc-link:hover{gap:10px}

/* ── Features panel (homepage) ── */
.features{background:#f6fbff;padding:100px 0}
.feat-inner{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.feat-panel{background:#fff;border:1px solid #e2eef8;border-radius:24px;padding:32px;box-shadow:0 8px 32px rgba(15,24,40,.09)}
.perf-label{font-size:.72rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.1em;margin-bottom:18px}
.perf-row{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.perf-item{display:grid;grid-template-columns:60px 1fr 44px;align-items:center;gap:10px}
.perf-name{font-size:.8rem;font-weight:700;color:#475569}
.perf-bg{height:6px;background:#e2eef8;border-radius:999px;overflow:hidden}
.perf-fill{height:100%;background:linear-gradient(90deg,#19c57d,#00cc80);border-radius:999px;transition:width .6s ease}
.perf-pct{font-size:.78rem;font-weight:800;color:#19c57d;text-align:right}
.uptime-chip{display:inline-flex;align-items:center;gap:7px;background:rgba(25,197,125,.1);border:1px solid rgba(25,197,125,.2);color:#10a867;font-size:.78rem;font-weight:700;padding:7px 14px;border-radius:999px;margin-bottom:20px}
.tech-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.tech-cell{background:#f6fbff;border:1px solid #e2eef8;border-radius:12px;padding:14px;text-align:center}
.tech-val{font-size:.95rem;font-weight:900;color:#1b1f28;margin-bottom:3px}
.tech-lbl{font-size:.72rem;color:#94a3b8;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.feat-list{display:flex;flex-direction:column;gap:22px}
.feat-item{display:flex;gap:16px;align-items:flex-start}
.feat-ico{width:44px;height:44px;border-radius:13px;background:rgba(25,197,125,.12);color:#19c57d;display:flex;align-items:center;justify-content:center;font-size:1rem;flex:0 0 auto}
.feat-title{font-size:.95rem;font-weight:800;color:#1b1f28;margin-bottom:5px}
.feat-desc{font-size:.85rem;color:#64748b;line-height:1.65}

/* ── Testimonials (homepage) ── */
.testimonials{background:#fff;padding:100px 0}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.testi-card{background:#f6fbff;border:1px solid #e2eef8;border-radius:22px;padding:32px;display:flex;flex-direction:column;gap:16px;transition:transform .2s,box-shadow .2s}
.testi-card:hover{transform:translateY(-3px);box-shadow:0 20px 60px rgba(15,24,40,.1)}
.stars{display:flex;gap:4px;color:#f59e0b;font-size:.85rem}
.testi-text{font-size:.9rem;color:#475569;line-height:1.75;flex:1;font-style:italic}
.testi-author{display:flex;align-items:center;gap:12px;margin-top:auto}
.testi-av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#19c57d,#0d9e63);color:#fff;font-size:.82rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.testi-name{font-size:.875rem;font-weight:800;color:#1b1f28;margin-bottom:2px}
.testi-role{font-size:.78rem;color:#94a3b8}

/* ── Homepage responsive ── */
@media(max-width:1024px){.svc-grid{grid-template-columns:repeat(2,1fr)}.testi-grid{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.hero-inner{grid-template-columns:1fr}.feat-inner{grid-template-columns:1fr}.hero-visual{display:none}}
@media(max-width:768px){.stats .stats-grid{grid-template-columns:repeat(2,1fr)}.svc-grid{grid-template-columns:1fr}.testi-grid{grid-template-columns:1fr}}

/* === PLAN GRID 3-COL (managed hosting) === */
.plan-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:1100px){.plan-grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.plan-grid-3{grid-template-columns:1fr}}

/* === BILLING TOGGLE SAVE BADGE === */
.billing-save{display:inline-block;background:#19c57d;color:#fff;font-size:11px;font-weight:700;border-radius:20px;padding:2px 8px;margin-left:6px;vertical-align:middle}

/* === HERO PANEL OVERFLOW FIX === */
/* Prevent right-side hero card from overflowing viewport */
.page-hero-inner > * { min-width: 0; }
.hero-panel-side { min-width: 0; max-width: 100%; }
.h-panel { min-width: 0; width: 100%; box-sizing: border-box; }
.hsr-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hsr-item { min-width: 0; }

/* === PRICING TABLE (databases) === */
.hero-db{padding: 100px 0 90px;position: relative;overflow: hidden;background: linear-gradient(rgba(11, 15, 22, 0.15) 0%, rgba(11, 15, 22, 0.25) 50%, rgba(11, 15, 22, 0.5) 100%), radial-gradient(circle at 50% 22%, rgba(11, 15, 22, 0) 0px, rgba(11, 15, 22, 0) 32%, rgba(11, 15, 22, 0.6) 55%, rgba(11, 15, 22, 0.92) 80%), url(https://static.thehostcare.com/cdn/images/backgrounds/mysql-hero.jpg) center top / cover no-repeat fixed rgb(11, 15, 22);}
.pricing-table{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 2px 16px rgba(0,0,0,.07)}
.pricing-table thead th{background:#f8fafc;text-align:left;font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.06em;padding:14px 18px;border-bottom:2px solid #e2e8f0}
.pricing-table tbody td{padding:14px 18px;border-bottom:1px solid #f1f5f9;color:#1e293b;vertical-align:middle}
.pricing-table tbody tr:last-child td{border-bottom:none}
.pricing-table tbody tr:hover td{background:#f8fafc}
.pricing-table .pop-row td{background:#f0fdf4!important}
.pricing-table .yearly-price{display:none}

/* === COMPARISON TABLE (web hosting) === */
.compare-wrap{overflow-x:auto;border-radius:16px;box-shadow:0 2px 20px rgba(0,0,0,.08)}
.compare-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:700px}
.compare-table th{background:#0f1e2d;color:#fff;font-weight:700;text-align:center;padding:16px 14px;font-size:13px}
.compare-table th:first-child{text-align:left;width:240px;background:#0c1822}
.compare-table td{padding:11px 14px;border-bottom:1px solid #f1f5f9;text-align:center;color:#1e293b;vertical-align:middle}
.compare-table td:first-child{text-align:left;color:#475569;background:#fafafa;font-size:13px}
.compare-table tr:last-child td{border-bottom:none}
.compare-table tr:hover td{background:#f8fafc}
.compare-table tr:hover td:first-child{background:#f1f5f9}
.compare-section-row td{background:#e2e8f0!important;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#475569;padding:8px 14px}
.compare-section-row td:first-child{background:#dde3ea!important}
.chk{color:#19c57d;font-size:16px}
.xmk{color:#f87171;font-size:14px}
.compare-price-row td{background:#f0fdf4!important;font-weight:700;font-size:15px;color:#15803d}
.compare-table .pop-col{background:#f0fdf4}
.compare-table th.pop-col{background:#19c57d;color:#fff}

/* === FREE INCLUDED GRID (web-hosting) === */
@media(max-width:1024px){
  [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:600px){
  [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:1fr!important}
  [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
}

/* === DEDICATED SERVERS - CPU FAMILY SECTIONS === */
.cpu-families{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:56px}
.cpu-family-card{border:2px solid var(--border);border-radius:16px;padding:22px 20px;background:#fff;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s;text-align:center}
.cpu-family-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.1)}
.cpu-family-card .cf-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;margin:0 auto 12px}
.cpu-family-card .cf-name{font-weight:800;font-size:15px;color:#1e293b;margin-bottom:4px}
.cpu-family-card .cf-sub{font-size:12px;color:#64748b}
.server-section-label{display:flex;align-items:center;gap:14px;margin:48px 0 24px}
.server-section-label .ssl-line{flex:1;height:1px;background:var(--border)}
.server-section-label .ssl-badge{display:inline-flex;align-items:center;gap:8px;border:2px solid currentColor;border-radius:999px;padding:5px 16px;font-size:12.5px;font-weight:800;white-space:nowrap;letter-spacing:.04em}
.server-section-label .ssl-badge i{font-size:13px}
/* Custom Build */
.custom-build-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.cb-card{background:#fff;border:1.5px solid var(--border);border-radius:18px;padding:28px 24px;transition:border-color .2s,box-shadow .2s}
.cb-card:hover{border-color:#19c57d;box-shadow:0 8px 28px rgba(25,197,125,.12)}
.cb-icon{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px}
.cb-name{font-size:17px;font-weight:800;color:#1e293b;margin-bottom:8px}
.cb-desc{font-size:14px;color:#64748b;line-height:1.65;margin-bottom:20px}
.cb-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.cb-tag{background:#f1f5f9;color:#475569;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px}
@media(max-width:1024px){.cpu-families{grid-template-columns:repeat(2,1fr)}.custom-build-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.cpu-families{grid-template-columns:1fr 1fr}.custom-build-grid{grid-template-columns:1fr}}
/* Colocation datacenter section responsive */
@media(max-width:900px){.dc-info-grid{grid-template-columns:1fr!important}.dc-info-stats{grid-template-columns:repeat(2,1fr)!important}}

/* ══════════════════════════════════════════════════
   INDEX - DATACENTER BAND
   ══════════════════════════════════════════════════ */
.idx-dc-band{background:linear-gradient(140deg,#07111f 0%,#0e1e30 60%,#0a1520 100%);padding:100px 0;overflow:hidden;position:relative}
.idx-dc-band::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 75% 50%,rgba(25,197,125,.06) 0%,transparent 70%);pointer-events:none}
.idx-dc-wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:72px;align-items:center;position:relative;z-index:1}
.idx-dc-photo{position:relative}
.idx-dc-photo img{width:100%;border-radius:20px;box-shadow:0 48px 96px rgba(0,0,0,.55);display:block}
.idx-dc-badge{position:absolute;bottom:22px;left:22px;background:rgba(10,18,30,.75);border:1px solid rgba(25,197,125,.35);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff;padding:11px 18px;border-radius:12px;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;line-height:1.2}
.idx-dc-badge-dot{width:9px;height:9px;border-radius:50%;background:#19c57d;box-shadow:0 0 0 3px rgba(25,197,125,.28);flex-shrink:0;animation:pulse-dot 2s infinite}
.idx-dc-copy{color:#fff}
.idx-dc-copy .sec-tag{color:#19c57d;background:rgba(25,197,125,.1);border-color:rgba(25,197,125,.25);margin-bottom:18px}
.idx-dc-copy h2{font-size:clamp(26px,3vw,40px);font-weight:800;line-height:1.18;color:#fff;margin-bottom:18px}
.idx-dc-copy>p{font-size:16px;color:rgba(255,255,255,.62);line-height:1.78;margin-bottom:36px}
.idx-dc-feats{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:40px}
.idx-dc-feat{display:flex;align-items:flex-start;gap:12px}
.idx-dc-feat-ico{width:40px;height:40px;border-radius:11px;background:rgba(25,197,125,.1);border:1px solid rgba(25,197,125,.2);display:flex;align-items:center;justify-content:center;color:#19c57d;font-size:14px;flex-shrink:0;margin-top:1px}
.idx-dc-feat-text strong{display:block;font-size:13.5px;font-weight:700;color:#fff;margin-bottom:3px}
.idx-dc-feat-text span{font-size:12px;color:rgba(255,255,255,.45);line-height:1.5}
@media(max-width:960px){.idx-dc-wrap{grid-template-columns:1fr;gap:40px}}

/* ══════════════════════════════════════════════════
   INDEX - PERFORMANCE PILLARS
   ══════════════════════════════════════════════════ */
.idx-pillars{background:#f4f8fd;padding:80px 0}
.idx-pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.idx-pillar{background:#fff;border-radius:22px;padding:42px 34px;border:1.5px solid #e3ecf7;position:relative;overflow:hidden;transition:box-shadow .25s,transform .25s}
.idx-pillar:hover{box-shadow:0 20px 56px rgba(0,0,0,.08);transform:translateY(-5px)}
.idx-pillar::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--green),#0fd494)}
.idx-pillar-ico{width:58px;height:58px;border-radius:16px;background:linear-gradient(135deg,rgba(25,197,125,.13),rgba(25,197,125,.04));border:1px solid rgba(25,197,125,.18);display:flex;align-items:center;justify-content:center;font-size:24px;color:#19c57d;margin-bottom:26px}
.idx-pillar-num{font-size:clamp(42px,5vw,58px);font-weight:900;color:#0c1620;line-height:1;margin-bottom:6px;letter-spacing:-.02em}
.idx-pillar-num em{font-size:55%;font-style:normal;color:#19c57d;font-weight:800}
.idx-pillar-label{font-size:12px;font-weight:700;color:#7b8ea6;text-transform:uppercase;letter-spacing:.08em;margin-bottom:18px}
.idx-pillar-desc{font-size:15px;color:#4a5e74;line-height:1.72}
@media(max-width:768px){.idx-pillar-grid{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════
   INDEX - TESTIMONIALS (rework)
   ══════════════════════════════════════════════════ */
.idx-testi{background:#fff;padding:90px 0}
.idx-testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:52px}
.idx-testi-card{background:#f7faff;border:1.5px solid #e3ecf7;border-radius:20px;padding:36px 30px;display:flex;flex-direction:column;gap:20px;transition:box-shadow .25s,transform .25s}
.idx-testi-card:hover{box-shadow:0 16px 48px rgba(0,0,0,.07);transform:translateY(-4px)}
.idx-testi-stars{display:flex;gap:4px;color:#f5a623;font-size:14px}
.idx-testi-text{font-size:15px;color:#2d3e52;line-height:1.75;flex:1}
.idx-testi-author{display:flex;align-items:center;gap:14px;padding-top:6px;border-top:1px solid #e3ecf7;margin-top:auto}
.idx-testi-av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#19c57d,#0ea066);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#fff;flex-shrink:0}
.idx-testi-name{font-size:14px;font-weight:700;color:#1b1f28}
.idx-testi-role{font-size:12px;color:#7b8ea6;margin-top:2px}
@media(max-width:768px){.idx-testi-grid{grid-template-columns:1fr}}
/* WP compat section responsive */
@media(max-width:900px){.wp-compat-grid{grid-template-columns:1fr!important}}

/* ════════════════════════════════════════════════════════════
   PAGE-SPECIFIC STYLES  (extracted from inline <style> blocks)
   ════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Extracted from: dedicated-servers.html
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ── Dedicated server tables ── */
    .ds-table-wrap{overflow-x:auto;margin-bottom:40px;border-radius:16px;border:1.5px solid #e3ecf7}
    .ds-table{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border-radius:16px;overflow:hidden}
    .ds-table thead tr{background:#f8fafc;border-bottom:2px solid #e3ecf7}
    .ds-table thead th{padding:13px 18px;text-align:left;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#64748b;white-space:nowrap}
    .ds-table thead th:last-child{text-align:center}
    .ds-table tbody tr{border-bottom:1px solid #f1f5f9;transition:background .15s}
    .ds-table tbody tr:last-child{border-bottom:none}
    .ds-table tbody tr:hover{background:#fafcff}
    .ds-table tbody tr.ds-row-pop{background:rgba(25,197,125,.03)}
    .ds-table tbody tr.ds-row-pop:hover{background:rgba(25,197,125,.06)}
    .ds-table td{padding:16px 18px;vertical-align:middle;color:#1b1f28;font-size:13.5px}
    .ds-table td:last-child{text-align:center;padding:12px 16px}
    .ds-model{display:flex;align-items:center;gap:10px}
    .ds-badge{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:3px 9px;border-radius:999px;white-space:nowrap}
    .ds-badge.pop{background:rgba(25,197,125,.12);color:#10a867}
    .ds-badge.entry{background:rgba(59,130,246,.1);color:#2563eb}
    .ds-badge.dual{background:rgba(139,92,246,.1);color:#7c3aed}
    .ds-badge.ent{background:rgba(239,68,68,.1);color:#dc2626}
    .ds-badge.flag{background:rgba(6,182,212,.1);color:#0891b2}
    .ds-badge.new{background:rgba(249,115,22,.1);color:#ea580c}
    .ds-model-name{font-weight:700;color:#1b1f28;font-size:14px}
    .ds-spec{font-weight:600;color:#1b1f28}
    .ds-spec small{font-weight:400;color:#64748b;display:block;font-size:12px;margin-top:1px}
    .ds-chk{color:#19c57d;font-size:15px}

    /* ── Configurator CTA banner ── */
    .cfg-cta-band{background:linear-gradient(135deg,#0c1a27,#142134);border-radius:20px;padding:32px 36px;display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin:0 0 48px}
    .cfg-cta-ico{width:56px;height:56px;border-radius:16px;background:rgba(25,197,125,.12);display:flex;align-items:center;justify-content:center;font-size:26px;color:#19c57d;flex-shrink:0}
    .cfg-cta-copy{flex:1;min-width:220px}
    .cfg-cta-copy h3{font-size:18px;font-weight:800;color:#fff;margin-bottom:6px}
    .cfg-cta-copy p{font-size:14px;color:rgba(255,255,255,.55);line-height:1.6}

    /* ── Own-server colocation callout ── */
    .colo-callout{background:linear-gradient(135deg,#07111f,#0f2035);border:1px solid rgba(25,197,125,.2);border-radius:20px;padding:36px 40px;margin-bottom:0}
    .colo-callout-inner{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
    @media(max-width:640px){.colo-callout-inner{grid-template-columns:1fr}}
    .colo-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(25,197,125,.12);border:1px solid rgba(25,197,125,.22);color:#19c57d;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;padding:5px 13px;border-radius:999px;margin-bottom:12px}
    .colo-callout h3{font-size:20px;font-weight:800;color:#fff;margin-bottom:10px}
    .colo-callout p{font-size:14.5px;color:rgba(255,255,255,.6);line-height:1.7;max-width:600px}
    .colo-perk{display:flex;align-items:center;gap:10px;font-size:13.5px;color:rgba(255,255,255,.75);margin-top:10px;font-weight:500}
    .colo-perk i{color:#19c57d;width:16px}
    .colo-discount{background:rgba(25,197,125,.15);border:1.5px solid rgba(25,197,125,.3);border-radius:16px;padding:22px 24px;text-align:center;flex-shrink:0;min-width:140px}
    .colo-discount-num{font-size:42px;font-weight:900;color:#19c57d;line-height:1}
    .colo-discount-lbl{font-size:12px;font-weight:700;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.06em;margin-top:6px}
    .colo-discount-sub{font-size:11px;color:rgba(255,255,255,.35);margin-top:4px}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Extracted from: server-configurator.html
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ── Configurator page styles ── */
    .cfg-hero{background:linear-gradient(160deg,#07111f 0%,#0d1d2e 55%,#0a1520 100%);padding:72px 0 60px;position:relative;overflow:hidden}
    .cfg-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 70% at 80% 40%,rgba(25,197,125,.07),transparent 70%);pointer-events:none}
    .cfg-hero-inner{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;position:relative;z-index:1}
    .cfg-hero-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(25,197,125,.1);border:1px solid rgba(25,197,125,.22);color:#19c57d;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:6px 14px;border-radius:999px;margin-bottom:16px}
    .cfg-hero h1{font-size:clamp(26px,3.2vw,40px);font-weight:800;color:#fff;line-height:1.18;margin-bottom:12px}
    .cfg-hero p{font-size:16px;color:rgba(255,255,255,.58);line-height:1.72;max-width:540px}
    .cfg-hero-steps{display:flex;flex-direction:column;gap:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:22px 24px;min-width:220px}
    .cfg-step{display:flex;align-items:center;gap:12px;font-size:13px;color:rgba(255,255,255,.55)}
    .cfg-step-num{width:26px;height:26px;border-radius:50%;background:rgba(25,197,125,.15);border:1px solid rgba(25,197,125,.3);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#19c57d;flex-shrink:0}

    /* Layout */
    .cfg-layout{display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start;padding:48px 0 80px}
    @media(max-width:960px){.cfg-layout{grid-template-columns:1fr}.cfg-sidebar{order:-1}.cfg-hero-inner{grid-template-columns:1fr}}

    /* Sections */
    .cfg-section{background:#fff;border:1.5px solid #e3ecf7;border-radius:20px;margin-bottom:20px;overflow:hidden}
    .cfg-section-head{display:flex;align-items:center;gap:14px;padding:20px 24px;border-bottom:1px solid #eef4fb;cursor:pointer;user-select:none}
    .cfg-section-head:hover{background:#fafcff}
    .cfg-section-num{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#19c57d,#10a867);color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .cfg-section-title{flex:1}
    .cfg-section-title h3{font-size:15px;font-weight:800;color:#1b1f28;margin-bottom:2px}
    .cfg-section-title p{font-size:12px;color:#7b8ea6}
    .cfg-section-selected{font-size:12px;font-weight:700;color:#19c57d;background:rgba(25,197,125,.1);padding:3px 10px;border-radius:999px;white-space:nowrap}
    .cfg-section-body{padding:20px 24px}

    /* Option cards */
    .cfg-options{display:grid;gap:10px}
    .cfg-options.cols-2{grid-template-columns:repeat(2,1fr)}
    .cfg-options.cols-3{grid-template-columns:repeat(3,1fr)}
    .cfg-options.cols-4{grid-template-columns:repeat(4,1fr)}
    @media(max-width:640px){.cfg-options.cols-3,.cfg-options.cols-4{grid-template-columns:repeat(2,1fr)}.cfg-options.cols-2{grid-template-columns:1fr}}

    .cfg-opt{border:1.5px solid #e3ecf7;border-radius:14px;padding:14px 16px;cursor:pointer;transition:border-color .18s,background .18s,box-shadow .18s;position:relative}
    .cfg-opt:hover{border-color:#b0d4f1;background:#f8fbff}
    .cfg-opt.selected{border-color:#19c57d;background:rgba(25,197,125,.05);box-shadow:0 0 0 3px rgba(25,197,125,.12)}
    .cfg-opt.selected::after{content:'\f00c';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;top:10px;right:12px;font-size:11px;color:#19c57d}
    .cfg-opt-icon{font-size:20px;margin-bottom:10px;color:#64748b}
    .cfg-opt.selected .cfg-opt-icon{color:#19c57d}
    .cfg-opt-name{font-size:13.5px;font-weight:700;color:#1b1f28;margin-bottom:3px}
    .cfg-opt-sub{font-size:11.5px;color:#64748b;line-height:1.5}
    .cfg-opt-badge{display:inline-block;margin-top:6px;font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;background:rgba(25,197,125,.1);color:#10a867}
    .cfg-opt-badge.blue{background:rgba(59,130,246,.1);color:#2563eb}
    .cfg-opt-badge.orange{background:rgba(249,115,22,.1);color:#ea580c}
    .cfg-opt-badge.purple{background:rgba(139,92,246,.1);color:#7c3aed}
    .cfg-opt-badge.red{background:rgba(239,68,68,.1);color:#dc2626}

    /* Quantity selector */
    .cfg-qty{display:flex;align-items:center;gap:12px;margin-top:16px}
    .cfg-qty label{font-size:13px;font-weight:600;color:#374151}
    .cfg-qty select{border:1.5px solid #e3ecf7;border-radius:10px;padding:8px 14px;font-size:13.5px;font-weight:600;color:#1b1f28;background:#fff;cursor:pointer;outline:none;font-family:inherit}
    .cfg-qty select:focus{border-color:#19c57d}

    /* Sidebar summary */
    .cfg-sidebar{position:sticky;top:90px}
    .cfg-summary{background:#fff;border:1.5px solid #e3ecf7;border-radius:20px;overflow:hidden}
    .cfg-summary-head{background:linear-gradient(135deg,#0c1620,#172535);padding:22px 24px}
    .cfg-summary-head h3{font-size:15px;font-weight:800;color:#fff;margin-bottom:4px}
    .cfg-summary-head p{font-size:12px;color:rgba(255,255,255,.5)}
    .cfg-summary-body{padding:20px 24px}
    .cfg-sum-item{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid #f1f5f9;font-size:13px}
    .cfg-sum-item:last-child{border-bottom:none}
    .cfg-sum-label{color:#64748b;font-weight:500}
    .cfg-sum-value{color:#1b1f28;font-weight:700;text-align:right;max-width:160px}
    .cfg-sum-value.empty{color:#cbd5e1;font-weight:400;font-style:italic}
    .cfg-summary-footer{padding:20px 24px;border-top:2px solid #eef4fb}
    .cfg-note{font-size:12px;color:#94a3b8;line-height:1.6;margin-bottom:16px;display:flex;gap:8px}
    .cfg-note i{color:#19c57d;margin-top:2px;flex-shrink:0}
    .cfg-complete-btn{width:100%;padding:14px;background:#19c57d;color:#fff;border:none;border-radius:14px;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit;transition:background .2s,transform .15s;display:flex;align-items:center;justify-content:center;gap:10px}
    .cfg-complete-btn:hover{background:#10a867;transform:translateY(-1px)}
    .cfg-complete-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}
    .cfg-progress{margin:0 24px 0;padding-bottom:20px}
    .cfg-progress-label{font-size:11px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;display:flex;justify-content:space-between}
    .cfg-progress-bar{height:6px;background:#eef4fb;border-radius:999px;overflow:hidden}
    .cfg-progress-fill{height:100%;background:linear-gradient(90deg,#19c57d,#0fd494);border-radius:999px;transition:width .35s ease}

    /* Divider note inside section */
    .cfg-divider-note{font-size:12px;color:#94a3b8;margin:14px 0 10px;display:flex;align-items:center;gap:8px}
    .cfg-divider-note::before{content:'';flex:1;height:1px;background:#eef4fb}
    .cfg-divider-note::after{content:'';flex:1;height:1px;background:#eef4fb}

    /* Disabled RAM option (incompatible with selected CPU) */
    .cfg-opt-disabled{opacity:.3;cursor:not-allowed !important;pointer-events:none;position:relative}
    .cfg-opt-disabled::before{content:'Max exceeded';position:absolute;inset:0;background:rgba(248,250,252,.7);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#94a3b8;border-radius:12px;text-transform:uppercase;letter-spacing:.04em}

    /* RAM compat warning banner */
    .ram-warn{display:none;align-items:center;gap:10px;background:rgba(249,115,22,.07);border:1px solid rgba(249,115,22,.22);border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:12.5px;color:#c2410c}
    .ram-warn.visible{display:flex}
    .ram-warn i{flex-shrink:0;font-size:14px}

    /* Deployment type option — wider card icons */
    .cfg-opt[data-group-parent="deploy"] .cfg-opt-icon{font-size:22px;margin-bottom:8px}

    /* Colocation note in sidebar */
    .colo-side-note{display:none;align-items:flex-start;gap:8px;background:rgba(25,197,125,.08);border:1px solid rgba(25,197,125,.18);border-radius:10px;padding:10px 12px;margin-bottom:14px;font-size:12px;color:#10a867;line-height:1.5}
    .colo-side-note.visible{display:flex}
    .colo-side-note i{flex-shrink:0;margin-top:1px}

    /* ── Preset templates section ── */
    .cfg-presets-band{background:#fff;border-bottom:1px solid #e8eef7;padding:52px 0 48px}
    .cfg-presets-head{text-align:center;margin-bottom:36px}
    .cfg-presets-head .eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(25,197,125,.08);border:1px solid rgba(25,197,125,.18);color:#10a867;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:5px 14px;border-radius:999px;margin-bottom:14px}
    .cfg-presets-head h2{font-size:clamp(22px,2.8vw,32px);font-weight:800;color:#1b1f28;margin-bottom:10px}
    .cfg-presets-head p{font-size:15px;color:#64748b;max-width:540px;margin:0 auto}
    .cfg-presets-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
    @media(max-width:1100px){.cfg-presets-grid{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:560px){.cfg-presets-grid{grid-template-columns:1fr}}
    .cfg-preset-card{border:1.5px solid #e3ecf7;border-radius:20px;padding:24px;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .18s;position:relative;overflow:hidden;background:#fff}
    .cfg-preset-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(25,197,125,.04),transparent 60%);opacity:0;transition:opacity .2s;pointer-events:none}
    .cfg-preset-card:hover{border-color:#19c57d;box-shadow:0 8px 28px rgba(25,197,125,.12);transform:translateY(-2px)}
    .cfg-preset-card:hover::before{opacity:1}
    .cfg-preset-card.active{border-color:#19c57d;box-shadow:0 0 0 3px rgba(25,197,125,.15)}
    .cfg-preset-ico{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px;flex-shrink:0}
    .cfg-preset-ico.green{background:rgba(25,197,125,.1);color:#10a867}
    .cfg-preset-ico.blue{background:rgba(59,130,246,.1);color:#2563eb}
    .cfg-preset-ico.orange{background:rgba(249,115,22,.1);color:#ea580c}
    .cfg-preset-ico.purple{background:rgba(139,92,246,.1);color:#7c3aed}
    .cfg-preset-ico.red{background:rgba(239,68,68,.1);color:#dc2626}
    .cfg-preset-ico.teal{background:rgba(20,184,166,.1);color:#0d9488}
    .cfg-preset-name{font-size:16px;font-weight:800;color:#1b1f28;margin-bottom:4px}
    .cfg-preset-desc{font-size:13px;color:#64748b;line-height:1.55;margin-bottom:14px}
    .cfg-preset-specs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
    .cfg-preset-tag{font-size:11px;font-weight:600;background:#f1f5f9;color:#475569;padding:3px 9px;border-radius:999px}
    .cfg-preset-btn{width:100%;padding:10px;border:1.5px solid #19c57d;border-radius:12px;background:transparent;color:#19c57d;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .18s,color .18s;display:flex;align-items:center;justify-content:center;gap:8px}
    .cfg-preset-btn:hover,.cfg-preset-card:hover .cfg-preset-btn{background:#19c57d;color:#fff}
    .cfg-preset-card.active .cfg-preset-btn{background:#19c57d;color:#fff}
    .cfg-preset-applied{display:none;position:absolute;top:14px;right:14px;background:#19c57d;color:#fff;font-size:10px;font-weight:800;padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.05em}
    .cfg-preset-card.active .cfg-preset-applied{display:block}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Extracted from: colocation-quote.html
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Step card structure */
.order-card{background:#fff;border:1.5px solid #e3ecf7;border-radius:20px;overflow:hidden;margin-bottom:16px}
.order-card-head{padding:18px 24px;border-bottom:1px solid #eef4fb;display:flex;align-items:center;gap:14px}
.order-card-head h3{font-size:15px;font-weight:800;color:#1b1f28;margin:0 0 2px}
.order-card-head p{font-size:12px;color:#94a3b8;margin:0}
.order-card-num{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#19c57d,#10a867);color:#fff;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.order-card-body{padding:22px 24px}
/* Space selectors */
.colo-sel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:680px){.colo-sel-grid{grid-template-columns:repeat(2,1fr)}}
.colo-sel-card{border:1.5px solid #e3ecf7;border-radius:16px;padding:18px 14px;text-align:center;cursor:pointer;transition:all .18s;background:#fff}
.colo-sel-card:hover{border-color:#b0d4f1;background:#f8fbff}
.colo-sel-card.active{border-color:#19c57d;background:rgba(25,197,125,.05);box-shadow:0 0 0 3px rgba(25,197,125,.12)}
.colo-sel-ico{font-size:22px;color:#64748b;margin-bottom:8px;transition:color .18s}
.colo-sel-card.active .colo-sel-ico{color:#19c57d}
.colo-sel-name{font-size:13.5px;font-weight:800;color:#1b1f28;margin-bottom:3px}
.colo-sel-desc{font-size:11.5px;color:#94a3b8}
.colo-chip-sel{border:1.5px solid #e3ecf7;border-radius:10px;padding:9px 16px;cursor:pointer;transition:all .15s;background:#fff;font-size:13px;font-weight:600;color:#475569;display:inline-flex;align-items:center}
.colo-chip-sel:hover{border-color:#b0d4f1}
.colo-chip-sel.active{border-color:#19c57d;background:rgba(25,197,125,.07);color:#0f7a4e}
.colo-addon-card{border:1.5px solid #e3ecf7;border-radius:14px;padding:14px 16px;cursor:pointer;transition:all .18s;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:10px}
.colo-addon-card:hover{border-color:#b0d4f1}
.colo-addon-card.active{border-color:#19c57d;background:rgba(25,197,125,.05)}
.colo-addon-ico{width:36px;height:36px;border-radius:10px;background:rgba(25,197,125,.1);color:#19c57d;display:grid;place-items:center;font-size:15px;flex-shrink:0}
.colo-addon-check{width:22px;height:22px;border-radius:50%;border:1.5px solid #e3ecf7;display:grid;place-items:center;font-size:10px;color:transparent;flex-shrink:0;transition:all .15s}
.colo-addon-card.active .colo-addon-check{background:#19c57d;border-color:#19c57d;color:#fff}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-label{font-size:13px;font-weight:700;color:#374151}
.form-control{border:1.5px solid #e3ecf7;border-radius:12px;padding:11px 14px;font-size:14px;font-family:inherit;outline:none;transition:border-color .2s;color:#1b1f28;background:#fff;width:100%;box-sizing:border-box}
.form-control:focus{border-color:#19c57d;box-shadow:0 0 0 3px rgba(25,197,125,.1)}
select.form-control{cursor:pointer}
textarea.form-control{resize:vertical;min-height:100px}
@media(max-width:600px){.order-card-body [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}}


/* ═══════════════════════════════════════════════════════════
   Cloud VPS configure page styles (configure/lvm*.html)
   ═══════════════════════════════════════════════════════════ */
body{background:#f4f8fc}
    /* ── Plan hero ── */
    .hero-cloudvps{padding: 100px 0 90px;position: relative;overflow: hidden;background: linear-gradient(rgba(11, 15, 22, 0.15) 0%, rgba(11, 15, 22, 0.25) 50%, rgba(11, 15, 22, 0.5) 100%), radial-gradient(circle at 50% 22%, rgba(11, 15, 22, 0) 0px, rgba(11, 15, 22, 0) 32%, rgba(11, 15, 22, 0.6) 55%, rgba(11, 15, 22, 0.92) 80%), url(https://static.thehostcare.com/cdn/images/backgrounds/hero-cloudvps.png) center top / cover no-repeat fixed rgb(11, 15, 22);}
    .plan-hero{background:linear-gradient(135deg,#07111f 0%,#0d1d2e 100%);padding:40px 0 34px;border-bottom:1px solid rgba(255,255,255,.06)}
    .plan-hero-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
    .plan-back{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:rgba(255,255,255,.45);text-decoration:none;margin-bottom:14px;transition:color .18s}
    .plan-back:hover{color:#19c57d}
    .plan-badge-tag{display:inline-flex;align-items:center;gap:7px;background:rgba(25,197,125,.12);border:1px solid rgba(25,197,125,.25);color:#19c57d;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;padding:4px 12px;border-radius:999px;margin-bottom:12px}
    .plan-hero h1{font-size:clamp(22px,2.8vw,34px);font-weight:900;color:#fff;margin-bottom:6px}
    .plan-hero-tagline{font-size:14px;color:rgba(255,255,255,.5)}
    .hero-price-block{text-align:right}
    .hero-price-from{font-size:11px;font-weight:600;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
    .hero-price-num{font-size:40px;font-weight:900;color:#fff;line-height:1}
    .hero-price-per{font-size:13px;color:rgba(255,255,255,.45);margin-top:4px}
    .hero-save{display:none;align-items:center;gap:5px;background:rgba(249,115,22,.12);border:1px solid rgba(249,115,22,.25);color:#f97316;font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:999px;margin-top:6px}
    /* ── Step bar ── */
    .osteps{background:#fff;border-bottom:1px solid #e3ecf7}
    .osteps-inner{display:flex}
    .ostep{flex:1;display:flex;align-items:center;gap:10px;padding:14px 20px;border-right:1px solid #e3ecf7;transition:background .15s;text-decoration:none;cursor:default}
    a.ostep{cursor:pointer}
    a.ostep:hover{background:rgba(25,197,125,.06)}
    .ostep:last-child{border-right:none}
    .ostep.active{background:rgba(25,197,125,.04)}
    .ostep-num{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;border:2px solid #e3ecf7;color:#94a3b8;flex-shrink:0;transition:all .2s}
    .ostep.active .ostep-num,.ostep.done .ostep-num{background:#19c57d;border-color:#19c57d;color:#fff}
    .ostep-label{font-size:12.5px;font-weight:700;color:#94a3b8;transition:color .2s}
    .ostep.active .ostep-label,.ostep.done .ostep-label{color:#1b1f28}
    .ostep-sub{font-size:11px;color:#b0bec5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
    .ostep.active .ostep-sub,.ostep.done .ostep-sub{color:#64748b}
    @media(max-width:560px){.ostep-sub{display:none}.ostep{padding:12px 10px}}
    /* ── Layout ── */
    .order-layout{display:grid;grid-template-columns:1fr 340px;gap:24px;padding:32px 0 64px}
    @media(max-width:920px){.order-layout{grid-template-columns:1fr}.order-sidebar{order:2}}
    /* ── Cards ── */
    .order-card{background:#fff;border:1.5px solid #e3ecf7;border-radius:20px;overflow:hidden;margin-bottom:16px}
    .order-card-head{padding:20px 24px;border-bottom:1px solid #eef4fb;display:flex;align-items:center;gap:12px}
    .order-card-num{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#19c57d,#10a867);color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .order-card-head h3{font-size:15px;font-weight:800;color:#1b1f28;margin-bottom:1px}
    .order-card-head p{font-size:12px;color:#94a3b8}
    .order-card-body{padding:22px 24px}
    /* ── Location ── */
    .loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .loc-card{border:1.5px solid #e3ecf7;border-radius:14px;padding:16px 18px;cursor:pointer;transition:all .18s;display:flex;align-items:center;gap:14px;position:relative}
    .loc-card:hover{border-color:#b0d4f1;background:#f8fbff}
    .loc-card.active{border-color:#19c57d;background:rgba(25,197,125,.05);box-shadow:0 0 0 3px rgba(25,197,125,.1)}
    .loc-card.oos{cursor:not-allowed;opacity:.55;background:#f8f9fb;border-color:#e3ecf7}
    .loc-card.oos:hover{border-color:#e3ecf7;background:#f8f9fb}
    .loc-oos-badge{position:absolute;top:8px;right:10px;font-size:10px;font-weight:700;color:#ef4444;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);border-radius:20px;padding:2px 8px;letter-spacing:.4px;text-transform:uppercase}
    .loc-flag{width:36px;height:24px;object-fit:cover;border-radius:4px;flex-shrink:0;box-shadow:0 1px 4px rgba(0,0,0,.15)}
    .loc-name{font-size:14px;font-weight:800;color:#1b1f28;margin-bottom:2px}
    .loc-dc{font-size:11.5px;color:#64748b}
    .loc-check{margin-left:auto;color:#19c57d;font-size:16px;display:none}
    .loc-card.active .loc-check{display:block}
    /* ── OS selector ── */
    .os-section{margin-top:22px}
    .os-section-label{font-size:12px;font-weight:700;color:#374151;margin-bottom:10px;display:block}
    .os-groups{display:flex;flex-direction:column;gap:6px}
    .os-group{border:1.5px solid #e3ecf7;border-radius:12px;overflow:hidden;transition:border-color .18s}
    .os-group.active{border-color:#19c57d}
    .os-group-btn{width:100%;display:flex;align-items:center;gap:12px;padding:13px 16px;background:none;border:none;cursor:pointer;font-family:inherit;text-align:left;transition:background .15s}
    .os-group-btn:hover{background:#f8fbff}
    .os-group.active .os-group-btn{background:rgba(25,197,125,.05)}
    .os-group-icon{width:32px;height:32px;border-radius:8px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;font-size:15px;color:#64748b;flex-shrink:0;transition:all .18s}
    .os-group.active .os-group-icon{background:rgba(25,197,125,.12);color:#19c57d}
    .os-group-name{font-size:13.5px;font-weight:700;color:#1b1f28;flex:1}
    .os-group-sel{font-size:11.5px;color:#94a3b8;font-weight:500}
    .os-group.active .os-group-sel{color:#19c57d;font-weight:600}
    .os-group-arrow{font-size:11px;color:#94a3b8;transition:transform .2s}
    .os-group.active .os-group-arrow{transform:rotate(180deg);color:#19c57d}
    .os-versions{display:none;padding:0 16px 14px;flex-wrap:wrap;gap:6px}
    .os-group.active .os-versions{display:flex}
    .os-ver{padding:5px 13px;border:1.5px solid #e3ecf7;border-radius:999px;font-size:12px;font-weight:600;color:#374151;cursor:pointer;transition:all .15s;white-space:nowrap}
    .os-ver:hover{border-color:#b0d4f1;background:#f8fbff}
    .os-ver.active{border-color:#19c57d;background:#19c57d;color:#fff}
    .win-badge{display:inline-flex;align-items:center;gap:4px;background:rgba(99,102,241,.1);color:#6366f1;font-size:10px;font-weight:800;padding:2px 7px;border-radius:999px;margin-left:4px;vertical-align:middle}
    .os-group-divider{display:flex;align-items:center;gap:10px;padding:4px 0 2px;color:#94a3b8;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em}
    .os-group-divider::before,.os-group-divider::after{content:'';flex:1;height:1px;background:#e3ecf7}
    .app-ver{border-radius:10px;padding:7px 14px;white-space:nowrap;display:flex;align-items:center}
    /* ── Addons ── */
    .addon-list{display:flex;flex-direction:column;gap:10px}
    .addon-item{border:1.5px solid #e3ecf7;border-radius:14px;padding:16px 18px;display:flex;align-items:flex-start;gap:14px;transition:border-color .18s,background .18s;cursor:pointer}
    .addon-item:hover{border-color:#b0d4f1;background:#f8fbff}
    .addon-item.active{border-color:#19c57d;background:rgba(25,197,125,.04)}
    .addon-icon{width:36px;height:36px;border-radius:10px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;font-size:15px;color:#64748b;flex-shrink:0;transition:all .18s}
    .addon-item.active .addon-icon{background:rgba(25,197,125,.12);color:#19c57d}
    .addon-body{flex:1}
    .addon-name{font-size:13.5px;font-weight:800;color:#1b1f28;margin-bottom:3px}
    .addon-desc{font-size:12px;color:#64748b;line-height:1.5}
    .addon-desc a{color:#19c57d;font-weight:600}
    .addon-price-tag{font-size:12.5px;font-weight:800;color:#374151;white-space:nowrap;flex-shrink:0;margin-top:2px}
    .addon-item.active .addon-price-tag{color:#19c57d}
    .addon-chk{width:20px;height:20px;border-radius:50%;border:2px solid #e3ecf7;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .18s;margin-top:2px}
    .addon-item.active .addon-chk{background:#19c57d;border-color:#19c57d;color:#fff}
    .addon-chk i{font-size:9px;display:none}
    .addon-item.active .addon-chk i{display:block}
    /* ── IP selector ── */
    .ip-section{margin-top:18px;padding-top:18px;border-top:1px solid #eef4fb}
    .ip-label{font-size:12px;font-weight:700;color:#374151;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
    .ip-chips{display:flex;gap:6px;flex-wrap:wrap}
    .ip-chip{width:44px;height:44px;border:1.5px solid #e3ecf7;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#64748b;cursor:pointer;transition:all .18s}
    .ip-chip:hover{border-color:#b0d4f1;background:#f8fbff}
    .ip-chip.active{border-color:#19c57d;background:#19c57d;color:#fff}
    /* ── Billing ── */
    .btabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    .btab{border:1.5px solid #e3ecf7;border-radius:12px;padding:16px 18px;cursor:pointer;transition:all .18s;position:relative;overflow:hidden}
    .btab:hover{border-color:#b0d4f1;background:#f8fbff}
    .btab.active{border-color:#19c57d;background:rgba(25,197,125,.05);box-shadow:0 0 0 3px rgba(25,197,125,.1)}
    .btab-name{font-size:13px;font-weight:800;color:#64748b;margin-bottom:6px}
    .btab.active .btab-name{color:#0f7a56}
    .btab-price{font-size:24px;font-weight:900;color:#1b1f28;margin-bottom:3px}
    .btab-price em{font-size:13px;font-weight:500;color:#94a3b8;font-style:normal}
    .btab-note{font-size:11.5px;color:#64748b;line-height:1.5}
    .btab-save{display:inline-flex;align-items:center;gap:4px;background:rgba(249,115,22,.1);color:#ea580c;font-size:10px;font-weight:800;padding:2px 8px;border-radius:999px;margin-top:5px}
    .btab-check{position:absolute;top:12px;right:12px;display:none;color:#19c57d;font-size:14px}
    .btab.active .btab-check{display:block}
    /* ── Sidebar ── */
    .order-sidebar{position:sticky;top:90px}
    .sb-card{background:#fff;border:1.5px solid #e3ecf7;border-radius:20px;overflow:hidden}
    .sb-head{background:linear-gradient(135deg,#07111f,#172535);padding:20px 22px}
    .sb-head h3{font-size:14px;font-weight:800;color:#fff;margin-bottom:3px}
    .sb-head p{font-size:12px;color:rgba(255,255,255,.45)}
    .sb-body{padding:16px 22px}
    .sb-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid #f1f5f9;font-size:13px}
    .sb-row:last-child{border-bottom:none}
    .sb-lbl{color:#64748b;font-weight:500;flex-shrink:0}
    .sb-val{color:#1b1f28;font-weight:700;text-align:right}
    .sb-val.dim{color:#cbd5e1;font-weight:400;font-style:italic}
    .sb-specs{padding:10px 22px 14px;border-top:1px solid #eef4fb;background:#fafcff}
    .sb-spec-row{display:flex;align-items:center;gap:8px;font-size:12px;color:#374151;padding:3px 0}
    .sb-spec-row i{color:#19c57d;font-size:10px;width:12px;text-align:center;flex-shrink:0}
    .sb-price-section{padding:14px 22px;border-top:2px solid #eef4fb}
    .sb-price-line{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:3px 0}
    .sb-price-line .l{color:#64748b;font-weight:500}
    .sb-price-line .r{color:#1b1f28;font-weight:700}
    .sb-price-line.addon-line{display:none}
    .sb-price-line.addon-line.show{display:flex}
    .sb-price-total{display:flex;justify-content:space-between;align-items:center;padding:10px 0 4px;border-top:1.5px solid #e3ecf7;margin-top:6px}
    .sb-total-lbl{font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em}
    .sb-total-val{font-size:26px;font-weight:900;color:#19c57d;line-height:1}
    .sb-total-sub{font-size:11px;color:#94a3b8;margin-top:2px;text-align:right}
    .sb-foot{padding:16px 22px;border-top:1px solid #eef4fb}
    .cta-btn{width:100%;padding:14px;background:#19c57d;color:#fff;border:none;border-radius:14px;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;transition:background .2s,transform .15s}
    .cta-btn:hover{background:#10a867;transform:translateY(-1px)}
    .cta-note{font-size:11.5px;color:#94a3b8;text-align:center;margin-top:10px;line-height:1.8}
    /* ── Mobile responsive ── */
    @media(max-width:768px){
      .plan-hero-inner{flex-direction:column;align-items:flex-start;gap:12px}
      .hero-price-block{text-align:left;width:100%}
      .hero-price-num{font-size:32px}
      .ostep{padding:10px 10px;gap:6px}
      .ostep-label{font-size:11.5px}
      .order-layout{grid-template-columns:1fr;gap:16px;padding:20px 0 48px}
      .btabs{grid-template-columns:1fr}
      .order-card-body{padding:16px 16px}
      .order-card-head{padding:16px 16px}
      .loc-grid{grid-template-columns:1fr}
      .ip-chips{gap:8px}
    }
    @media(max-width:480px){
      .hero-price-num{font-size:28px}
      .ostep-sub{display:none}
      .btabs{grid-template-columns:1fr 1fr}
      .sb-total-val{font-size:22px}
    }

/* ═══════════════════════════════════════════════════════════
   Web Hosting configure page styles (configure/sh*.html)
   ═══════════════════════════════════════════════════════════ */
body{background:#f4f8fc}
    /* Plan hero */
    .hero-webhost{padding: 100px 0 90px;position: relative;overflow: hidden;background: linear-gradient(rgba(11, 15, 22, 0.15) 0%, rgba(11, 15, 22, 0.25) 50%, rgba(11, 15, 22, 0.5) 100%), radial-gradient(circle at 50% 22%, rgba(11, 15, 22, 0) 0px, rgba(11, 15, 22, 0) 32%, rgba(11, 15, 22, 0.6) 55%, rgba(11, 15, 22, 0.92) 80%), url(https://static.thehostcare.com/cdn/images/backgrounds/hero-webhost.png) center top / cover no-repeat fixed rgb(11, 15, 22);}
    .plan-hero{background:linear-gradient(135deg,#07111f 0%,#0d1d2e 100%);padding:40px 0 34px;border-bottom:1px solid rgba(255,255,255,.06)}
    .plan-hero-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
    .plan-back{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:rgba(255,255,255,.45);text-decoration:none;margin-bottom:14px;transition:color .18s}
    .plan-back:hover{color:#19c57d}
    .plan-badge-tag{display:inline-flex;align-items:center;gap:7px;background:rgba(25,197,125,.12);border:1px solid rgba(25,197,125,.25);color:#19c57d;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;padding:4px 12px;border-radius:999px;margin-bottom:12px}
    .plan-hero h1{font-size:clamp(22px,2.8vw,34px);font-weight:900;color:#fff;margin-bottom:6px}
    .plan-hero-tagline{font-size:14px;color:rgba(255,255,255,.5)}
    .hero-price-block{text-align:right}
    .hero-price-from{font-size:11px;font-weight:600;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
    .hero-price-num{font-size:40px;font-weight:900;color:#fff;line-height:1}
    .hero-price-per{font-size:13px;color:rgba(255,255,255,.45);margin-top:4px}
    .hero-save{display:none;align-items:center;gap:5px;background:rgba(249,115,22,.12);border:1px solid rgba(249,115,22,.25);color:#f97316;font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:999px;margin-top:6px}
    /* Step bar */
    .osteps{background:#fff;border-bottom:1px solid #e3ecf7}
    .osteps-inner{display:flex}
    .ostep{flex:1;display:flex;align-items:center;gap:10px;padding:14px 20px;border-right:1px solid #e3ecf7;transition:background .15s;text-decoration:none;cursor:default}
    a.ostep{cursor:pointer}
    a.ostep:hover{background:rgba(25,197,125,.06)}
    .ostep:last-child{border-right:none}
    .ostep.active{background:rgba(25,197,125,.04)}
    .ostep-num{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;border:2px solid #e3ecf7;color:#94a3b8;flex-shrink:0;transition:all .2s}
    .ostep.active .ostep-num,.ostep.done .ostep-num{background:#19c57d;border-color:#19c57d;color:#fff}
    .ostep-label{font-size:12.5px;font-weight:700;color:#94a3b8;transition:color .2s}
    .ostep.active .ostep-label,.ostep.done .ostep-label{color:#1b1f28}
    .ostep-sub{font-size:11px;color:#b0bec5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
    .ostep.active .ostep-sub,.ostep.done .ostep-sub{color:#64748b}
    @media(max-width:560px){.ostep-sub{display:none}.ostep{padding:12px 14px}}
    /* Layout */
    .order-layout{display:grid;grid-template-columns:1fr 320px;gap:24px;padding:32px 0 64px}
    @media(max-width:880px){.order-layout{grid-template-columns:1fr}.order-sidebar{order:-1}}
    /* Cards */
    .order-card{background:#fff;border:1.5px solid #e3ecf7;border-radius:20px;overflow:hidden;margin-bottom:16px}
    .order-card-head{padding:20px 24px;border-bottom:1px solid #eef4fb;display:flex;align-items:center;gap:12px}
    .order-card-num{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#19c57d,#10a867);color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .order-card-head h3{font-size:15px;font-weight:800;color:#1b1f28;margin-bottom:1px}
    .order-card-head p{font-size:12px;color:#94a3b8}
    .order-card-body{padding:22px 24px}
    /* Domain tabs */
    .dtabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px}
    @media(max-width:500px){.dtabs{grid-template-columns:1fr}}
    .dtab{border:1.5px solid #e3ecf7;border-radius:12px;padding:13px 14px;cursor:pointer;text-align:center;transition:all .18s;background:#fff}
    .dtab:hover{border-color:#b0d4f1;background:#f8fbff}
    .dtab.active{border-color:#19c57d;background:rgba(25,197,125,.05);box-shadow:0 0 0 3px rgba(25,197,125,.1)}
    .dtab-icon{font-size:18px;color:#94a3b8;margin-bottom:7px}
    .dtab.active .dtab-icon{color:#19c57d}
    .dtab-name{font-size:12.5px;font-weight:800;color:#1b1f28;margin-bottom:2px}
    .dtab-sub{font-size:11px;color:#94a3b8;line-height:1.4}
    /* Domain input — split (register/transfer) */
    .dom-row{display:flex;gap:8px}
    @media(max-width:500px){.dom-row{flex-direction:column}}
    .dom-sld{flex:1;border:1.5px solid #e3ecf7;border-radius:11px;padding:11px 15px;font-size:15px;font-weight:600;color:#1b1f28;outline:none;font-family:inherit;transition:border-color .18s}
    .dom-sld:focus{border-color:#19c57d}
    .dom-sld::placeholder{color:#b0bec5;font-weight:400}
    .dom-tld{border:1.5px solid #e3ecf7;border-radius:11px;padding:11px 14px;font-size:14px;font-weight:700;color:#1b1f28;outline:none;font-family:inherit;background:#fff;cursor:pointer;min-width:104px}
    .dom-tld:focus{border-color:#19c57d}
    /* Domain input — full (use existing) */
    .dom-full{width:100%;border:1.5px solid #e3ecf7;border-radius:11px;padding:11px 15px;font-size:15px;font-weight:600;color:#1b1f28;outline:none;font-family:inherit;transition:border-color .18s;box-sizing:border-box}
    .dom-full:focus{border-color:#19c57d}
    .dom-full::placeholder{color:#b0bec5;font-weight:400}
    .dom-label{font-size:12px;font-weight:700;color:#374151;margin-bottom:8px;display:block}
    .dom-hint{font-size:12px;color:#94a3b8;margin-top:7px}
    .dom-note{display:none;margin-top:14px;align-items:flex-start;gap:8px;background:rgba(25,197,125,.05);border:1px solid rgba(25,197,125,.18);border-radius:10px;padding:11px 14px;font-size:12.5px;color:#0f7a56;line-height:1.6}
    .dom-note.show{display:flex}
    .field-err{font-size:12px;color:#dc2626;margin-top:6px;display:none}
    .field-err.vis{display:block}
    /* Billing */
    .btabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    .btab{border:1.5px solid #e3ecf7;border-radius:12px;padding:16px 18px;cursor:pointer;transition:all .18s;position:relative;overflow:hidden}
    .btab:hover{border-color:#b0d4f1;background:#f8fbff}
    .btab.active{border-color:#19c57d;background:rgba(25,197,125,.05);box-shadow:0 0 0 3px rgba(25,197,125,.1)}
    .btab-name{font-size:13px;font-weight:800;color:#64748b;margin-bottom:6px}
    .btab.active .btab-name{color:#0f7a56}
    .btab-price{font-size:24px;font-weight:900;color:#1b1f28;margin-bottom:3px}
    .btab-price em{font-size:13px;font-weight:500;color:#94a3b8;font-style:normal}
    .btab-note{font-size:11.5px;color:#64748b;line-height:1.5}
    .btab-save{display:inline-flex;align-items:center;gap:4px;background:rgba(249,115,22,.1);color:#ea580c;font-size:10px;font-weight:800;padding:2px 8px;border-radius:999px;margin-top:5px}
    .btab-check{position:absolute;top:12px;right:12px;display:none;color:#19c57d;font-size:14px;font-weight:900}
    .btab.active .btab-check{display:block}
    /* Included */
    .incl-grid{display:flex;flex-wrap:wrap;gap:6px}
    .incl-chip{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:#374151;background:#f1f5f9;border-radius:999px;padding:5px 11px}
    .incl-chip i{color:#19c57d;font-size:9px}
    /* Sidebar */
    .order-sidebar{position:sticky;top:90px}
    .sb-card{background:#fff;border:1.5px solid #e3ecf7;border-radius:20px;overflow:hidden}
    .sb-head{background:linear-gradient(135deg,#07111f,#172535);padding:20px 22px}
    .sb-head h3{font-size:14px;font-weight:800;color:#fff;margin-bottom:3px}
    .sb-head p{font-size:12px;color:rgba(255,255,255,.45)}
    .sb-body{padding:16px 22px}
    .sb-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid #f1f5f9;font-size:13px}
    .sb-row:last-child{border-bottom:none}
    .sb-lbl{color:#64748b;font-weight:500;flex-shrink:0}
    .sb-val{color:#1b1f28;font-weight:700;text-align:right}
    .sb-val.dim{color:#cbd5e1;font-weight:400;font-style:italic}
    .sb-specs{padding:12px 22px;border-top:1px solid #eef4fb;background:#fafcff}
    .sb-spec-row{display:flex;align-items:center;gap:8px;font-size:12px;color:#374151;padding:4px 0}
    .sb-spec-row i{color:#19c57d;font-size:10px;width:12px;text-align:center;flex-shrink:0}
    .sb-price-row{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;border-top:2px solid #eef4fb}
    .sb-price-lbl{font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em}
    .sb-price-val{font-size:26px;font-weight:900;color:#19c57d}
    .sb-price-sub{font-size:11px;color:#94a3b8;margin-top:2px}
    .sb-foot{padding:16px 22px;border-top:1px solid #eef4fb}
    .cta-btn{width:100%;padding:14px;background:#19c57d;color:#fff;border:none;border-radius:14px;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;transition:background .2s,transform .15s}
    .cta-btn:hover{background:#10a867;transform:translateY(-1px)}
    .cta-btn.off{background:#94a3b8;cursor:not-allowed;transform:none;pointer-events:none}
    .cta-note{font-size:11.5px;color:#94a3b8;text-align:center;margin-top:10px;line-height:1.8}
    /* ── Mobile responsive ── */
    @media(max-width:768px){
      .plan-hero-inner{flex-direction:column;align-items:flex-start;gap:12px}
      .hero-price-block{text-align:left;width:100%}
      .hero-price-num{font-size:32px}
      .osteps-inner{gap:0}
      .ostep{padding:10px 10px;gap:6px}
      .ostep-label{font-size:11.5px}
      .order-layout{grid-template-columns:1fr;gap:16px;padding:20px 0 48px}
      .order-sidebar{order:2}
      .btabs{grid-template-columns:1fr}
      .btab{padding:14px 16px}
      .btab-price{font-size:20px}
      .order-card-body{padding:16px 16px}
      .order-card-head{padding:16px 16px}
      .sb-card{border-radius:16px}
      .incl-grid{gap:5px}
      .incl-chip{font-size:11px;padding:4px 9px}
      .dtabs{gap:6px}
      .dtab{padding:10px 10px}
      .dtab-icon{font-size:15px;margin-bottom:4px}
      .dtab-name{font-size:11.5px}
    }
    @media(max-width:480px){
      .plan-hero{padding:28px 0 24px}
      .hero-price-num{font-size:28px}
      .ostep-sub{display:none}
      .ostep{padding:10px 8px}
      .btabs{grid-template-columns:1fr 1fr}
      .sb-price-val{font-size:22px}
      .cta-btn{font-size:14px;padding:13px}
    }
/* ═══════════════════════════════════════════════════════════════
   Managed Hosting configure page styles (configure/mh*.html)
   ═══════════════════════════════════════════════════════════════ */

/* ── Panel / OS version chips with price badge ── */
.hero-mh{padding: 100px 0 90px;position: relative;overflow: hidden;background: linear-gradient(rgba(11, 15, 22, 0.15) 0%, rgba(11, 15, 22, 0.25) 50%, rgba(11, 15, 22, 0.5) 100%), radial-gradient(circle at 50% 22%, rgba(11, 15, 22, 0) 0px, rgba(11, 15, 22, 0) 32%, rgba(11, 15, 22, 0.6) 55%, rgba(11, 15, 22, 0.92) 80%), url(https://static.thehostcare.com/cdn/images/backgrounds/hero-managedh.png) center top / cover no-repeat fixed rgb(11, 15, 22);}
.mh-ver{border-radius:10px;padding:8px 14px;display:inline-flex;align-items:center;gap:6px;flex-wrap:nowrap}
.app-ver-price{font-size:10.5px;font-weight:700;color:#1b1f28;background:#00000024;border-radius:999px;padding:1px 7px;white-space:nowrap}
.mh-free{color:#64748b;background:#f1f5f9}
.mh-accs{font-size:10px;color:#707070;font-weight:500;white-space:nowrap}

/* ── Imunify360 / LiteSpeed tier chips ── */
.mh-tier-chip{border:1.5px solid #e3ecf7;border-radius:10px;padding:8px 14px;cursor:pointer;transition:all .15s;background:#fff;font-size:12.5px;font-weight:600;color:#475569;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.mh-tier-chip:hover{border-color:#b0d4f1;background:#f8fbff}
.mh-tier-chip.active{border-color:#19c57d;background:rgba(25,197,125,.07);color:#0f7a4e}
.mh-tier-chip.active .app-ver-price{background:rgba(25,197,125,.15)}

/* ── Web Server cards ── */
.ws-grid{display:flex;flex-direction:column;gap:10px}
.ws-card{border:1.5px solid #e3ecf7;border-radius:14px;padding:16px 18px;cursor:pointer;transition:all .18s;background:#fff}
.ws-card:hover{border-color:#b0d4f1;background:#f8fbff}
.ws-card.active{border-color:#19c57d;background:rgba(25,197,125,.04);box-shadow:0 0 0 3px rgba(25,197,125,.1)}
.ws-card.ws-ols-hidden{display:none}
.ws-card-top{display:flex;align-items:center;gap:14px}
.ws-icon{width:38px;height:38px;border-radius:10px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;font-size:16px;color:#64748b;flex-shrink:0;transition:all .18s}
.ws-card.active .ws-icon{background:rgba(25,197,125,.12);color:#19c57d}
.ws-icon-ls{background:rgba(249,115,22,.08);color:#f97316}
.ws-card.active .ws-icon-ls{background:rgba(249,115,22,.15);color:#f97316}
.ws-icon-ols{background:rgba(99,102,241,.08);color:#6366f1}
.ws-card.active .ws-icon-ols{background:rgba(99,102,241,.15);color:#6366f1}
.ws-info{flex:1}
.ws-name{font-size:14px;font-weight:800;color:#1b1f28;margin-bottom:3px}
.ws-desc{font-size:12px;color:#64748b}
.ws-price-tag{font-size:12.5px;font-weight:800;color:#94a3b8;white-space:nowrap;flex-shrink:0}
.ws-price-tag.ws-free{color:#19c57d}
.ws-check{margin-left:8px;color:#19c57d;font-size:16px;display:none;flex-shrink:0}
.ws-card.active .ws-check{display:block}
.ws-tiers{display:none;margin-top:14px;padding-top:14px;border-top:1px solid #eef4fb}

@media(max-width:560px){
  .ws-desc{display:none}
  .mh-tier-chip{font-size:11.5px;padding:7px 11px}
}