/* Web Hosting Monitor — non-destructive brand overlay, 2026-11-01.
   Loaded AFTER marketing.css. Never use to replace form or monitoring logic. */
:root {
 --accent:#F28C0F; --accent-2:#FFB43B; --cyan:#00E5FF;
 --blue:#00E5FF; --bg:#060C16; --bg-soft:#0A1421; --panel:#102033;
 --panel-2:#13283A; --muted:#A9BAC9;
 --line:rgba(174,225,255,.11); --radius:16px;
 --shadow:0 26px 76px rgba(0,3,9,.44);
 --whm-glass:rgba(255,255,255,.035);
 --whm-glass-border:rgba(255,255,255,.095);
}
body{background:radial-gradient(circle at 80% 10%,rgba(0,229,255,.045),transparent 24%),#060C16}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
::selection{background:rgba(0,229,255,.3);color:#fff}
.site-header{background:rgba(5,14,25,.73);border-bottom:1px solid rgba(0,229,255,.13);backdrop-filter:blur(12px) saturate(145%);-webkit-backdrop-filter:blur(12px) saturate(145%);box-shadow:0 12px 42px rgba(0,0,0,.12)}
.nav-wrap{min-height:84px;gap:22px}
.brand{flex-shrink:0;line-height:1}
.brand-logo{display:block;width:clamp(190px,21vw,247px);height:auto;max-height:76px;object-fit:contain}
.site-footer .brand-logo{width:244px}
.main-nav{gap:clamp(12px,1.6vw,24px)}
.main-nav>a:not(.button){position:relative;transition:color .18s ease}
.main-nav>a:not(.button):hover,.main-nav>a.active{color:#fff}
.main-nav>a.active::after{content:"";position:absolute;bottom:-11px;left:0;right:0;height:2px;border-radius:10px;background:linear-gradient(90deg,var(--accent),var(--cyan))}
.main-nav .nav-login{border:1px solid rgba(0,229,255,.23);background:rgba(0,229,255,.045);border-radius:11px;padding:10px 14px!important;color:#d7faff!important}
.main-nav .nav-login:hover{border-color:rgba(0,229,255,.65)}
.button{background:linear-gradient(120deg,#FDB443 0%,#F28C0F 67%,#E57806 100%);border-color:#F28C0F;color:#12161B;box-shadow:0 11px 29px rgba(242,140,15,.17);transition:transform .2s,box-shadow .2s,border-color .2s}
.button:hover{box-shadow:0 14px 42px rgba(242,140,15,.29);transform:translateY(-2px)}
.button-secondary{background:rgba(0,229,255,.035);color:#DDFBFF;border-color:rgba(0,229,255,.24);box-shadow:none}
.button-secondary:hover{background:rgba(0,229,255,.095);border-color:rgba(0,229,255,.5);box-shadow:0 9px 28px rgba(0,229,255,.07)}
.hero{background:linear-gradient(90deg,rgba(3,9,17,.23),rgba(3,9,17,.38)),url('/images/brand/whm-tech-background.webp') center/cover no-repeat,#07111E}
.hero::after{background:linear-gradient(90deg,rgba(1,9,17,.24),transparent 70%);mask-image:none}
.page-hero{background:linear-gradient(90deg,rgba(4,12,23,.75),rgba(4,12,23,.84)),url('/images/brand/whm-tech-background.webp') center 38%/cover no-repeat,#081423;border-bottom:1px solid rgba(0,229,255,.12)}
.hero-grid{gap:clamp(38px,5vw,76px)}
.hero h1 span{background:linear-gradient(95deg,#FFE3B2 0%,#F7A638 45%,#00E5FF 100%);-webkit-background-clip:text;background-clip:text}
.eyebrow,.kicker{color:#F6AF40}
.hero-lead,.page-hero p,.section-heading p,.large-copy{color:#B7C8D7}
.trust-row span{color:#C4D3E1}
.trust-row span::first-letter{color:var(--cyan)}
.dashboard-preview{position:relative;border:1px solid rgba(0,229,255,.23);background:linear-gradient(150deg,rgba(12,36,53,.8),rgba(7,16,29,.95));border-radius:20px;box-shadow:0 22px 90px rgba(0,0,0,.46),0 0 64px rgba(0,229,255,.075);transform:none;overflow:hidden}
.dashboard-preview::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),var(--accent),transparent)}
.preview-top{justify-content:flex-start;flex-wrap:wrap}
.preview-top strong{color:#F0F8FE}
.whm-demo-label{margin-left:auto;color:#98BBC9;font-size:10px;letter-spacing:.11em;text-transform:uppercase;border:1px solid rgba(0,229,255,.18);padding:4px 8px;border-radius:999px}
.whm-status-chip{display:inline-flex;align-items:center;gap:8px;color:#5CF5B0;font-size:13px;font-weight:750}
.whm-status-chip::before{content:"";width:9px;height:9px;border-radius:50%;background:#36E3A0;box-shadow:0 0 0 5px rgba(54,227,160,.13),0 0 13px #36E3A0;animation:whm-pulse 2s ease-in-out infinite}
@keyframes whm-pulse{50%{box-shadow:0 0 0 9px rgba(54,227,160,.025),0 0 20px #36E3A0}}
.preview-status>div{border-color:rgba(0,229,255,.12);background:rgba(0,229,255,.035)}
.preview-status small{color:#A9C4D5}
.whm-ssl-card{display:flex;align-items:center;justify-content:space-between;gap:10px}
.whm-ssl-ring{--pct:81%;height:46px;width:46px;flex:none;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--cyan) var(--pct),rgba(0,229,255,.1) 0);position:relative}
.whm-ssl-ring::before{content:"";position:absolute;inset:5px;background:#102133;border-radius:50%}
.whm-ssl-ring span{position:relative;z-index:1;font-size:10px;font-weight:800;color:#D9FAFF}
.preview-chart{background:linear-gradient(180deg,rgba(0,229,255,.075),rgba(0,229,255,.01));border-color:rgba(0,229,255,.2)}
.preview-chart span{background:linear-gradient(#2EEDFF,#007CBB)}
.preview-events>div{background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.08)}
.event-icon.info{color:var(--cyan);background:rgba(0,229,255,.1)}
.feature-grid,.content-grid{gap:clamp(22px,2.5vw,32px)}
.feature-card,.content-card,.plan-card,.form-card,.contact-info-card,.faq-list details,.signal-card,.cta-card,.plan-detail-card{background:var(--whm-glass);border:1px solid var(--whm-glass-border);border-radius:16px;box-shadow:0 16px 44px rgba(0,0,0,.11);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.feature-card,.content-card{transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.feature-card:hover,.content-card:hover{transform:translateY(-4px);border-color:rgba(0,229,255,.33);box-shadow:0 20px 54px rgba(0,229,255,.045)}
.feature-card:nth-child(3n+2) .feature-icon{color:var(--cyan);background:rgba(0,229,255,.09);border-color:rgba(0,229,255,.19)}
.feature-card::after{background:rgba(0,229,255,.045)}
.whm-card-label{display:inline-flex;align-items:center;color:var(--cyan);border:1px solid rgba(0,229,255,.24);border-radius:999px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;margin-bottom:12px}
.content-card h2{font-size:clamp(22px,2.3vw,27px)}
.section-muted{background:radial-gradient(circle at 12% 0%,rgba(0,229,255,.035),transparent 30%),#08111C}
.section-dark{background:radial-gradient(circle at 88% 20%,rgba(0,229,255,.06),transparent 34%),#07111B}
.plan-card{background:linear-gradient(156deg,rgba(255,255,255,.048),rgba(255,255,255,.018))}
.plan-card.featured{z-index:1;border-color:rgba(242,140,15,.7);box-shadow:0 16px 70px rgba(242,140,15,.13),0 0 0 1px rgba(242,140,15,.12);transform:translateY(-9px) scale(1.018)}
.plan-card.featured::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--accent),var(--cyan));border-radius:18px 18px 0 0}
.featured-label{background:linear-gradient(120deg,#FFC75C,#F28C0F);color:#121A1D;box-shadow:0 0 28px rgba(242,140,15,.27)}
.plan-card li::before{color:var(--cyan);text-shadow:0 0 9px rgba(0,229,255,.45)}
.plan-card.featured li::before{color:#FFB341;text-shadow:0 0 9px rgba(242,140,15,.42)}
.whm-billing-toggle{display:flex;align-items:center;justify-content:center;gap:8px;margin:-6px auto 42px;flex-wrap:wrap}
.whm-billing-toggle button{cursor:pointer;border:1px solid rgba(0,229,255,.17);color:#BDD1DD;background:rgba(255,255,255,.03);padding:10px 20px;font-size:14px;font-weight:800}
.whm-billing-toggle button:first-child{border-radius:12px 0 0 12px;margin-right:-8px}
.whm-billing-toggle button:nth-child(2){border-radius:0 12px 12px 0}
.whm-billing-toggle button[aria-pressed="true"]{background:rgba(242,140,15,.17);border-color:var(--accent);color:#FFCE79;box-shadow:inset 0 0 0 1px rgba(242,140,15,.17)}
.whm-billing-toggle .whm-bill-note{color:#94BBC6;font-size:12px;margin-left:10px}
.whm-price-annual[hidden],.whm-price-monthly[hidden]{display:none!important}
.whm-info-tip{display:inline-grid;place-items:center;width:17px;height:17px;border:1px solid rgba(0,229,255,.3);color:var(--cyan);border-radius:50%;font:700 11px/1 system-ui;cursor:help;margin-left:6px}
.whm-info-tip:focus{outline:2px solid var(--cyan)}
.whm-timeline{position:relative;padding-left:30px;gap:30px}
.whm-timeline::before{content:"";position:absolute;top:24px;bottom:24px;left:10px;width:2px;background:linear-gradient(var(--cyan),var(--accent))}
.whm-timeline-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:22px;align-items:center}
.whm-step-number{position:absolute;left:-67px;top:20px;width:48px;height:48px;border:1px solid rgba(0,229,255,.6);border-radius:14px;background:#0C2232;display:grid;place-items:center;color:var(--cyan);font-weight:850;box-shadow:0 0 24px rgba(0,229,255,.11)}
.whm-step-thumbnail{width:100px;height:90px;background:linear-gradient(145deg,rgba(0,229,255,.09),rgba(242,140,15,.08));border:1px solid rgba(0,229,255,.18);border-radius:14px;display:grid;place-items:center;font-size:43px;color:var(--cyan)}
.whm-timeline-card:nth-child(2n) .whm-step-thumbnail{color:var(--accent)}
.whm-contact-trust{display:flex;flex-wrap:wrap;gap:9px;margin:2px 0 0}
.whm-contact-trust span{border:1px solid rgba(0,229,255,.18);padding:6px 10px;border-radius:99px;color:#B5E7EF;font-size:12px}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:rgba(242,140,15,.85);box-shadow:0 0 0 3px rgba(242,140,15,.13),0 0 19px rgba(242,140,15,.075)}
.contact-form :is(input,textarea,select):user-invalid{border-color:#FF6F7B}
.contact-form :is(input,textarea,select):user-valid:not(:placeholder-shown){border-color:rgba(0,229,255,.28)}
.cta-card{background:radial-gradient(circle at 90% 10%,rgba(242,140,15,.11),transparent 35%),linear-gradient(125deg,rgba(0,229,255,.07),rgba(255,255,255,.025));border-color:rgba(0,229,255,.2)}
.site-footer{background:linear-gradient(180deg,#060F1A,#040A13);border-top:1px solid rgba(0,229,255,.2)}
.footer-grid h3{color:#C4E2EA}.footer-grid>div:not(.footer-brand) a:hover{color:var(--cyan)}
@media(max-width:1100px){.brand-logo{width:210px}.main-nav{gap:12px;font-size:13px}.nav-wrap{gap:14px}}
@media(max-width:1020px){.plan-card.featured{transform:none}}
@media(max-width:820px){.nav-wrap{min-height:76px}.brand-logo{width:210px}.main-nav{background:rgba(6,17,30,.98);border:1px solid rgba(0,229,255,.22);backdrop-filter:blur(12px);top:75px}.main-nav>a.active::after{bottom:1px;left:12px;right:auto;width:50px}.whm-timeline-card{grid-template-columns:minmax(0,1fr) 80px}.whm-step-thumbnail{width:72px;height:72px;font-size:32px}}
@media(max-width:580px){.site-footer .brand-logo{width:215px}.hero{background-position:55% center}.whm-billing-toggle .whm-bill-note{width:100%;text-align:center}.whm-timeline{padding-left:20px}.whm-timeline::before{left:4px}.whm-step-number{left:-53px;width:36px;height:36px;font-size:12px}.whm-timeline-card{grid-template-columns:minmax(0,1fr)}.whm-step-thumbnail{display:none}.preview-top strong{margin-left:0}.whm-demo-label{margin-left:auto}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* Alignment refinements */
.whm-timeline{padding-left:66px}
.whm-timeline::before{left:26px}
.whm-step-number{left:-63px}
.plan-limits span.whm-info-tip{display:inline-grid;padding:0;width:17px;height:17px;color:var(--cyan);font-size:11px;line-height:1;vertical-align:middle}
@media(max-width:580px){.whm-timeline{padding-left:45px}.whm-timeline::before{left:13px}.whm-step-number{left:-49px}}
/* CSS-only miniature interface illustrations on the setup timeline. */
.whm-mini-wire,.whm-mini-check,.whm-mini-bars,.whm-mini-mail{display:block;position:relative;width:74px;height:57px;border-radius:10px;border:1px solid rgba(0,229,255,.3);background:rgba(4,18,32,.8);padding:10px;font-family:ui-monospace,monospace}
.whm-mini-wire>i{display:block;background:radial-gradient(circle,#FF9D24 2px,transparent 3px) 0 0/10px 10px;width:33px;height:8px;margin-bottom:8px}
.whm-mini-wire>b{display:block;font-size:10px;color:#BDEFFF;border:1px solid rgba(0,229,255,.3);border-radius:3px;padding:2px}
.whm-mini-wire>em{display:block;margin-top:5px;height:4px;width:55%;border-radius:3px;background:#00E5FF}
.whm-mini-check{display:grid;grid-template-columns:14px 1fr;gap:4px;align-items:center}
.whm-mini-check b{font:800 10px/1 system-ui;color:#00E5FF}
.whm-mini-check i{display:block;width:100%;height:5px;border-radius:3px;background:linear-gradient(90deg,rgba(0,229,255,.65),rgba(0,229,255,.1))}
.whm-mini-bars{display:flex;align-items:flex-end;gap:5px;padding:14px}
.whm-mini-bars i{display:block;flex:1;background:linear-gradient(#00E5FF,#087DA3);border-radius:2px 2px 0 0;height:60%}
.whm-mini-bars i:nth-child(2){height:85%}.whm-mini-bars i:nth-child(3){height:45%}.whm-mini-bars i:nth-child(4){height:70%}.whm-mini-bars i:nth-child(5){height:100%}
.whm-mini-mail{display:grid;place-items:center;font-size:27px;color:#00E5FF}
.whm-mini-mail b{display:grid;place-items:center;position:absolute;right:9px;top:4px;background:#F28C0F;color:#0B1320;font:900 10px/1 system-ui;width:14px;height:14px;border-radius:50%}
@media(max-width:820px){.whm-mini-wire,.whm-mini-check,.whm-mini-bars,.whm-mini-mail{transform:scale(.8)}}