/* ===========================================================
   BPHost — front-end design system (v2)
   Brand: ink #0E0E12 · crimson #a80400/#850300
=========================================================== */
@font-face{font-family:'Banana';src:url('../fonts/banana.woff2?v=2') format('woff2'),url('../fonts/banana_web.ttf?v=2') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{
  --ink:#0E0E12; --ink-soft:#2A2F3A; --muted:#5A6472;
  --crimson:#a80400; --crimson-deep:#850300; --teal:#a80400; --teal-soft:#d11a12;
  --green:#1FB57A;
  --bg:#fff; --bg-cool:#F3F7FA; --line:#E7EDF2; --card:#fff;
  --shadow:0 18px 50px -18px rgba(16,24,40,.22); --shadow-sm:0 8px 24px -12px rgba(16,24,40,.16);
  --radius:18px; --maxw:1680px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 48px}
.display{font-family:'Banana',var(--sans);font-weight:400;letter-spacing:.5px;line-height:1.02}
/* ===== Unified typography: the clean system sans (the hero font) site-wide.
   Targets text containers only — icon fonts (FontAwesome/et-line/glyphicons) keep
   their own explicit font-family, so they're unaffected by this. ===== */
html,body{font-family:var(--sans)!important}
/* headings + body all use the one clean system sans (the font the user was drawn to on the banner) */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.display,.db-heading{font-family:var(--sans)!important}
p,li,dt,dd,td,th,blockquote,label,figcaption,
input,select,textarea,button,.button,.btn,
body .navbar-default .navbar-nav>li>a,.header ul.nav>li>a,.site_wrapper ul.nav>li>a{font-family:var(--sans)!important}
/* inline SVG icon base */
.ic{width:24px;height:24px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- legacy ArkaHost home header: widen to the page width so the logo lines up with the hero, and enlarge the logo ---------- */
.container{width:auto;max-width:var(--maxw);padding-left:48px;padding-right:48px}
.header #logo img{max-height:76px;width:auto;display:block}
.header .logo{margin-top:0}
/* nav: strip the stray underline (parked modern .nav border leaking onto the ArkaHost menu) + bigger links */
.navbar-nav.nav{border-bottom:0;background:transparent;position:static;backdrop-filter:none;-webkit-backdrop-filter:none}
body .navbar-default .navbar-nav>li>a,.header ul.nav>li>a{font-size:16px}
/* partner logos: spread full width + vertically centered (fixes the clustered/misaligned last logo) */
.client_logos p{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px 30px;margin:0}
.client_logos p img{margin:0;flex:0 0 auto;max-width:160px;height:auto}
.client_logos p img[src*="DEEP"]{max-width:118px}
/* uniform narrow faint line under the nav header (replaces the dark page-title banners) */
.header{border-bottom:1px solid var(--line);padding-top:14px;padding-bottom:14px}
/* header: flex row so logo + nav share one vertical center */
.header .container{display:flex;align-items:center;justify-content:space-between;gap:30px}

/* uniform centered page header (title + subtitle) on inner pages */
.page-head{position:relative;overflow:hidden;text-align:center;padding:60px 0 28px}
.page-head .container{position:relative;z-index:1}
.page-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent 0,#dfe4ea 14%,#dfe4ea 86%,transparent 100%);z-index:1;pointer-events:none}
.ph-d{position:absolute;top:50%;z-index:0;pointer-events:none;display:block}
.ph-ring{border:2px solid #e4e8ed;border-radius:50%}
.ph-circle{background:#eef1f4;border-radius:50%}
.ph-sq{border:2px solid #e4e8ed;border-radius:13px}
.ph-dots{background-image:radial-gradient(#e3e7ec 2px,transparent 2.6px);background-size:18px 18px}
.ph-l1{left:52px;width:88px;height:88px;transform:translateY(calc(-50% - 6px))}
.ph-l2{left:206px;width:42px;height:42px;transform:translateY(calc(-50% - 48px))}
.ph-l3{left:44px;width:72px;height:54px;transform:translateY(calc(-50% + 42px))}
.ph-l4{left:214px;width:38px;height:38px;transform:translateY(calc(-50% + 42px)) rotate(12deg)}
.ph-r1{right:52px;width:94px;height:94px;background:#f0f2f5;transform:translateY(calc(-50% - 2px))}
.ph-r2{right:220px;width:48px;height:48px;transform:translateY(calc(-50% - 46px))}
.ph-r3{right:46px;width:72px;height:54px;transform:translateY(calc(-50% + 42px))}
.ph-r4{right:226px;width:34px;height:34px;transform:translateY(calc(-50% + 44px)) rotate(-12deg)}
@media(max-width:980px){.ph-l2,.ph-l4,.ph-r2,.ph-r4{display:none}}
@media(max-width:760px){.page-head{padding:42px 0 20px}.ph-d{opacity:.5}.ph-l3,.ph-r3{display:none}}
.page-head h1{font-size:35px;font-weight:500;color:var(--ink);margin:0;line-height:1.2;letter-spacing:.5px;text-transform:uppercase}
.page-head .page-sub{font-size:17px;color:var(--muted);max-width:720px;margin:14px auto 0;line-height:1.6}
/* domain band sits IN FRONT of the hero so the superhero floats behind it (illusion of a full body continuing behind the panel) */
.domain_search{position:relative;z-index:3}
/* branded search results rendered into the dark band (results below the slide) */
.domain_search .db-heading{display:flex;align-items:center;justify-content:center;gap:11px;color:#fff;font-size:25px;font-weight:800;letter-spacing:1px;text-transform:uppercase;margin:0;padding-top:16px;padding-bottom:6px}
.domain_search .offers ul li,.domain_search .offers ul li strong{font-size:16px}
.domain_search .offers ul{float:none;display:flex;justify-content:center;flex-wrap:wrap;align-items:center;margin:0;padding:0}
.domain_search .offers ul li{float:none;padding:10px 18px}
.domain_search .db-heading .ic{color:#ffffff;width:27px;height:27px;stroke-width:2.4;flex:none}
.domain_search .db-results{margin:18px 0 22px;padding-top:0}
.domain_search .db-results-title{color:#fff;font-size:20px;font-weight:800;letter-spacing:.2px;margin:0 0 16px}
.domain_search .db-results-title strong{color:#ffffff}
.domain_search .dr-msg{color:#cfd6df}
.domain .go{padding:11px 22px;font-size:13.5px;white-space:nowrap}

/* ---------- top utility bar ---------- */
.topbar{background:var(--ink);color:#cfd6df;font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:40px}
.topbar a{color:#cfd6df;opacity:.85}.topbar a:hover{opacity:1;color:#fff}
.topbar .geo{display:inline-flex;align-items:center;gap:8px}
.topbar .dot{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(168,4,0,.25)}
.topbar .links{display:flex;gap:22px}

/* ---------- nav (glassy / translucent) ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.78);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid rgba(231,237,242,.8)}
.nav .wrap{display:flex;align-items:center;height:86px;gap:30px}
.nav .logo{height:auto;width:auto}
.nav .menu{list-style:none;display:flex;align-items:center;gap:28px;margin-left:14px}
.nav .menu a.current{color:var(--crimson)}.nav .menu a.current::after{width:100%}
.nav .menu a{font-weight:600;font-size:15.5px;color:var(--ink-soft);position:relative;padding:6px 0}
.nav .menu a:hover{color:var(--crimson)}
.nav .menu a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--crimson);transition:width .2s}
.nav .menu a:hover::after{width:100%}
.nav .spacer{flex:1}
.nav .actions{display:flex;align-items:center;gap:14px}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;border-radius:12px;padding:11px 20px;cursor:pointer;border:1px solid transparent;transition:.18s;white-space:nowrap}
.btn .ic{width:18px;height:18px}
.btn-ghost{color:var(--ink);border-color:var(--line);background:#fff}
.btn-ghost:hover{border-color:var(--crimson);color:var(--crimson)}
.btn-primary{background:var(--crimson);color:#fff}
.btn-primary:hover{background:var(--crimson-deep)}
.btn:focus,.btn:active,.btn:focus:active,.btn.active:focus,a.btn:focus,a.btn:active,button.btn:focus,input.btn:focus{outline:none!important;box-shadow:none!important}
.btn:focus-visible{outline:2px solid var(--crimson-deep)!important;outline-offset:2px}
.btn-lg{padding:15px 26px;font-size:16px;border-radius:14px}

/* ---------- hero (compact, wide) ---------- */
.hero{position:relative;overflow:visible;z-index:2;background:linear-gradient(180deg,#a80400 0%,#7e0200 55%,#560100 100%)}
/* With the overlay header (site-header.css .shdr-overlay) the hero starts at
   the top of the page, behind the bar: pulled up by the bar's measured height
   and padded the same amount, so the gradient and the mesh run behind the menu
   while the copy stays exactly where it was. 84px is the desktop bar before
   the script has measured it. */
.hero-under-nav{margin-top:calc(-1 * var(--shdr-h,84px));padding-top:var(--shdr-h,84px)}
#mesh{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.5;pointer-events:none}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center;min-height:clamp(400px,49vh,540px);padding:22px 48px 40px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);color:var(--ink-soft);font-weight:600;font-size:13.5px;padding:8px 15px;border-radius:999px;box-shadow:var(--shadow-sm)}
.eyebrow .ic{width:16px;height:16px;color:var(--crimson)}
h1.hero-title{font-size:clamp(40px,5vw,66px);margin:18px 0 14px;color:#fff}
h1.hero-title .pop{color:#0d0d0d}
.hero-sub{font-size:19px;color:rgba(255,255,255,.92);max-width:620px;margin-bottom:24px}
.domain{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:9px;display:flex;gap:7px;max-width:648px}
.domain .pfx{display:flex;align-items:center;color:#9aa4b1;font-weight:600;padding-left:11px}
.domain .pfx .ic{width:22px;height:22px}
.domain input{flex:1;border:none;outline:none;font-size:14px;padding:11px 7px;min-width:60px;background:transparent;color:var(--ink)}
.domain select{border:none;outline:none;background:var(--bg-cool);border-radius:9px;font-weight:700;font-size:14px;color:var(--ink-soft);padding:0 11px;cursor:pointer}
.domain .go .ic{width:18px;height:18px}
.tlds{display:flex;gap:20px;flex-wrap:wrap;margin-top:14px;color:var(--muted);font-size:14px}.tlds b{color:var(--ink)}
.hero-cta{display:flex;gap:14px;margin-top:24px;flex-wrap:wrap}
.trust{display:flex;gap:24px;margin-top:26px;flex-wrap:wrap;color:rgba(255,255,255,.9);font-size:14px}
.trust span{display:inline-flex;align-items:center;gap:7px}
.trust .ic{width:17px;height:17px;color:#fff}
/* hero art — capped so the banner stays compact */
.hero-art{position:relative;display:flex;justify-content:center;align-items:flex-end;height:100%}
.hero-art .glow{position:absolute;bottom:2%;left:50%;transform:translateX(-50%);width:74%;height:52%;background:radial-gradient(closest-side,rgba(255,255,255,.28),rgba(255,255,255,0) 70%);filter:blur(10px);z-index:0}
.hero-art .hero-img{position:relative;z-index:2;max-height:clamp(360px,50vh,500px);width:auto;margin-bottom:-80px;filter:drop-shadow(0 16px 22px rgba(16,24,40,.20));animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.chip{position:absolute;z-index:3;background:#fff;border:1px solid var(--line);border-radius:14px;padding:11px 15px;box-shadow:var(--shadow);font-size:14px;font-weight:700;display:flex;align-items:center;gap:10px}
.chip small{display:block;font-weight:600;color:var(--muted);font-size:11.5px}
.chip .ict{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff}
.chip .ict .ic{width:18px;height:18px;stroke:#fff}
.chip.c1{top:8%;left:-4%}.chip.c1 .ict{background:var(--teal)}
.chip.c2{top:44%;right:-8%}.chip.c2 .ict{background:var(--crimson);font-size:15px}
.chip.c3{bottom:8%;left:2%}.chip.c3 .ict{background:var(--ink)}

/* ---------- domain results band (BELOW hero) ---------- */
.results-band{background:var(--bg-cool);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.results-band .wrap{padding:26px 48px}
.results-head{font-weight:700;color:var(--ink);margin-bottom:14px;display:flex;align-items:center;gap:9px}
.results-head .ic{color:var(--teal)}
.domain-results{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:1100px){.domain-results{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.domain-results{grid-template-columns:1fr}}
.dr-msg{color:var(--muted);font-size:14.5px;display:flex;align-items:center;gap:9px;grid-column:1/-1}
.dr-row{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 16px;box-shadow:var(--shadow-sm)}
.dr-dot{width:9px;height:9px;border-radius:50%;background:#c7ced6;flex:none}
.dr-row.ok .dr-dot{background:var(--green)}.dr-row.taken .dr-dot{background:#c9485b}.dr-row.unknown .dr-dot{background:#e0a32a}
.dr-name{font-weight:700;color:var(--ink);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-status{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);flex:none}
.dr-row.ok .dr-status{color:var(--green)}.dr-row.taken .dr-status{color:#c9485b}
.dr-price{margin-left:auto;font-weight:800;color:var(--ink);white-space:nowrap;flex:none}
.dr-act{padding:8px 16px;font-size:13px;border-radius:10px;flex:none;white-space:nowrap}
.dr-act.muted{background:transparent;color:#aab2bd;box-shadow:none;font-weight:700;border:none}
.dr-act.dr-check{background:transparent;color:var(--muted);border:1px solid var(--line);font-weight:700;box-shadow:none}
.dr-act.dr-check:hover{border-color:var(--crimson);color:var(--crimson)}
.dr-note{color:#9aa4b1;font-size:12px;margin-top:10px;grid-column:1/-1}
.dr-spin{width:15px;height:15px;border:2px solid var(--teal-soft);border-top-color:var(--teal);border-radius:50%;display:inline-block;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- section heads ---------- */
.sec-head{text-align:center;max-width:680px;margin:0 auto 46px}
.sec-head .kick{color:var(--teal);font-weight:800;letter-spacing:2px;text-transform:uppercase;font-size:13px}
.sec-head h2{font-size:clamp(28px,3.4vw,42px);margin:10px 0 8px}
.sec-head p{color:var(--muted);font-size:17px}

/* ---------- plan tiers ---------- */
.plans{padding:78px 0 90px}
.tier-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.tier{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px 22px;text-align:center;transition:.2s;overflow:hidden}
.tier:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.tier.pop{border-color:var(--crimson);box-shadow:var(--shadow)}
.tier.pop .ribbon{position:absolute;top:15px;right:-34px;background:var(--crimson);color:#fff;font-size:11px;font-weight:800;letter-spacing:1px;padding:5px 40px;transform:rotate(45deg)}
.tier .badge{height:80px;margin:0 auto 14px;object-fit:contain}
.tier h3{font-size:19px;letter-spacing:.5px}
.tier .gb{color:var(--muted);font-size:13px;margin-bottom:16px}
.tier .price{font-size:36px;font-weight:800;color:var(--ink)}
.tier .price .cur{font-size:18px;vertical-align:top;color:var(--muted)}
.tier .price .per{display:block;font-size:13px;font-weight:600;color:var(--muted)}
.tier .pick{margin-top:18px;width:100%;justify-content:center}

/* ---------- why / features ---------- */
.why{padding:78px 0;background:linear-gradient(180deg,var(--bg-cool),#fff)}
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.feat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 24px;transition:.2s}
.feat:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}
.fic{display:grid;place-items:center;width:56px;height:56px;border-radius:15px;margin-bottom:18px}
.fic .ic{width:26px;height:26px}
.fic.teal{background:rgba(168,4,0,.12);color:var(--teal)}.fic.crimson{background:rgba(168,4,0,.10);color:var(--crimson)}
.feat h3{font-size:18.5px;margin-bottom:8px}.feat p{color:var(--muted);font-size:14.5px}

/* ---------- services ---------- */
.services{padding:84px 0}
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.svc{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;transition:.2s;position:relative}
.svc:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}
.svc .sic{width:50px;height:50px;border-radius:13px;background:rgba(168,4,0,.10);color:var(--teal);display:grid;place-items:center;margin-bottom:14px}
.svc .sic .ic{width:25px;height:25px}
.svc:nth-child(even) .sic{background:rgba(168,4,0,.09);color:var(--crimson)}
.svc h3{font-size:17.5px;margin-bottom:6px}
.svc p{color:var(--muted);font-size:14px;margin-bottom:14px;min-height:40px}
.svc .more{color:var(--crimson);font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.svc .more .ic{width:15px;height:15px}
.svc.soon{opacity:.74}
.svc.soon::after{content:"SOON";position:absolute;top:18px;right:18px;font-size:10px;font-weight:800;letter-spacing:1px;color:var(--teal);background:rgba(168,4,0,.12);padding:3px 8px;border-radius:6px}

/* ---------- domain CTA band ---------- */
.cta-band{background:linear-gradient(110deg,var(--crimson-deep),var(--crimson));color:#fff}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:50px 48px;flex-wrap:wrap}
.cta-band h2{font-size:clamp(24px,3vw,36px)}.cta-band p{opacity:.9;margin-top:6px}
.cta-white{background:#fff;color:var(--crimson-deep);font-weight:800}.cta-white:hover{background:#f3f3f3}

/* ---------- "why choose BPHOST" red band — background graphics ---------- */
/* scoped to the red (#a80400) feature_section1 rows on home + about only */
.feature_section1[style*="a80400"]{position:relative;overflow:hidden;background-repeat:no-repeat;
  background-image:
    radial-gradient(1000px 560px at 88% -12%, rgba(255,255,255,.13), transparent 60%),
    radial-gradient(820px 640px at 2% 120%, rgba(0,0,0,.26), transparent 58%),
    radial-gradient(circle at -60px 118%, transparent 150px, rgba(255,255,255,.08) 152px, rgba(255,255,255,.08) 159px, transparent 161px),
    radial-gradient(circle at 12% 40%, rgba(168,4,0,.10), transparent 34%)}
.feature_section1[style*="a80400"]::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.09) 1.6px, transparent 1.6px);background-size:30px 30px;opacity:.55}
.feature_section1[style*="a80400"]::after{content:"";position:absolute;z-index:0;pointer-events:none;
  right:-150px;top:-170px;width:500px;height:500px;border-radius:50%;border:2px solid rgba(255,255,255,.13);
  box-shadow:0 0 0 64px rgba(255,255,255,.05),inset 0 0 80px rgba(255,255,255,.06)}
.feature_section1[style*="a80400"] .container{position:relative;z-index:1}

/* ---------- faq ---------- */
.faq{padding:84px 0;background:var(--bg-cool)}
.faq-list{max-width:820px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:4px 22px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.faq summary{cursor:pointer;list-style:none;font-weight:700;font-size:17px;padding:18px 0;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--crimson);font-size:26px;font-weight:300;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted);padding:0 0 20px;font-size:15px}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:#aeb6c2;padding:64px 0 28px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:34px}
.footer .flogo{height:40px;margin-bottom:18px}
.footer .brand p{font-size:14px;max-width:320px;margin-bottom:12px}
.footer .geo-note{font-size:13px;color:#cfd6df}.footer .geo-note b{color:#fff}
.footer h4{color:#fff;font-size:14px;text-transform:uppercase;letter-spacing:1px;margin-bottom:15px}
.footer .fcol a{display:block;color:#aeb6c2;font-size:14px;margin-bottom:10px}.footer .fcol a:hover{color:var(--teal-soft)}
.foot-bottom{display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.1);margin-top:42px;padding-top:22px;font-size:13px;color:#8b95a3;flex-wrap:wrap;gap:8px}

/* ---------- inner page banner + content ---------- */
.page-banner{position:relative;overflow:hidden;background:radial-gradient(900px 420px at 85% -25%,rgba(168,4,0,.12),transparent 60%),radial-gradient(700px 380px at 5% 120%,rgba(168,4,0,.06),transparent 55%),linear-gradient(180deg,#fff,var(--bg-cool));border-bottom:1px solid var(--line)}
.page-banner .wrap{padding:56px 48px 50px;text-align:center;position:relative;z-index:2}
.page-banner .crumb{color:var(--muted);font-size:13px;margin-bottom:12px}
.page-banner .crumb a{color:var(--teal)}.page-banner .crumb a:hover{color:var(--crimson)}
.page-banner h1{font-size:clamp(34px,4.6vw,56px);margin-bottom:12px}
.page-banner p{color:var(--muted);font-size:19px;max-width:720px;margin:0 auto}
.section{padding:74px 0}.section.alt{background:var(--bg-cool)}
.lead{color:var(--muted);font-size:18px;max-width:760px}
.prose{max-width:840px;margin:0 auto;color:var(--ink-soft);font-size:16.5px}
.prose p{margin-bottom:16px}.prose h3{margin:28px 0 10px;font-size:22px;color:var(--ink)}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:980px;margin:0 auto}
.stat{text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 16px}
.stat b{display:block;font-size:38px;font-weight:800;color:var(--crimson);font-family:'Banana',var(--sans)}
.stat span{color:var(--muted);font-size:14px}
.incl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1000px;margin:0 auto}
.incl{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-weight:600;font-size:14.5px}
.incl .ic{width:20px;height:20px;color:var(--teal);flex:none}
.cmp{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.cmp th,.cmp td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:14.5px}
.cmp th{background:var(--bg-cool);font-weight:700}.cmp td.c{text-align:center}.cmp tr:last-child td{border-bottom:none}
.cmp .ic{width:18px;height:18px;color:var(--green)}
.pricetable{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;max-width:760px;margin:0 auto}
.pricetable th,.pricetable td{padding:13px 20px;border-bottom:1px solid var(--line);font-size:15px;text-align:left}
.pricetable th{background:var(--bg-cool);font-weight:700}.pricetable td.r{text-align:right;font-weight:800}
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media(max-width:1100px){.incl-grid,.stat-row{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr}}

/* ---------- uniform plan cards (matches the Hosting go-pricing tables) ---------- */
.plan-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:0;max-width:1560px;margin:42px auto 0;align-items:center}
.plan-cards.cols-4{grid-template-columns:repeat(4,1fr);max-width:1260px}
.plan-cards.cols-3{grid-template-columns:repeat(3,1fr);max-width:950px}
.pcard{background:#fff;border:1px solid var(--line);text-align:center;overflow:hidden;position:relative}
.pcard .pc-head{background:#2c333c;color:#fff;padding:24px 14px}
.pcard .pc-name{font-size:14px;font-weight:700;letter-spacing:2px;text-transform:uppercase;opacity:.8;margin-bottom:10px}
.pcard .pc-price{font-size:42px;font-weight:800;line-height:1}
.pcard .pc-price .cur{font-size:20px;vertical-align:super;font-weight:700}
.pcard .pc-per{font-size:12px;opacity:.7;display:block;margin-top:6px;font-weight:600}
.pcard .pc-feats-head{background:#eef2f6;font-size:12px;font-weight:700;letter-spacing:2px;color:var(--muted);padding:11px;text-transform:uppercase}
.pcard .pc-feats{list-style:none;padding:0;margin:0}
.pcard .pc-feats li{padding:11px 12px;font-size:13.5px;color:var(--ink-soft);border-bottom:1px solid var(--line)}
.pcard .pc-feats li:nth-child(even){background:#f7f9fb}
.pcard .pc-feats .lbl{font-weight:700;color:var(--ink)}
.pcard .pc-cta{padding:20px 14px}
.pcard .pc-cta .btn{width:auto;justify-content:center;padding:10px 30px;font-size:13px;border-radius:8px;letter-spacing:.5px}
.pcard{transition:transform .22s ease,box-shadow .22s ease}
.pcard .pc-feats-head,.pcard .pc-feats,.pcard .pc-feats li,.pcard .pc-cta{transition:background .2s ease,color .2s ease,border-color .2s ease}
/* popular keeps its bphost-red header at all times */
.pcard.pop .pc-head{background:linear-gradient(150deg,var(--crimson),var(--crimson-deep));color:#fff}
/* ===== ACTIVE STATE — popular by default, follows the mouse on hover ===== */
.pcard.pop,
.plan-cards .pcard:hover{z-index:6;transform:scale(1.06);box-shadow:0 22px 52px -18px rgba(16,24,40,.4)}
.plan-cards .pcard.pop:hover{transform:scale(1.08)}
.pcard.pop .pc-feats-head,
.plan-cards .pcard:hover .pc-feats-head{background:#14161b;color:#9aa0a8}
.pcard.pop .pc-feats,
.plan-cards .pcard:hover .pc-feats{background:#1b1e24}
.pcard.pop .pc-feats li,
.plan-cards .pcard:hover .pc-feats li{color:#dfe3e8;border-bottom-color:rgba(255,255,255,.07)}
.pcard.pop .pc-feats li:nth-child(even),
.plan-cards .pcard:hover .pc-feats li:nth-child(even){background:#23272f}
.pcard.pop .pc-feats .lbl,
.plan-cards .pcard:hover .pc-feats .lbl{color:#fff}
.pcard.pop .pc-cta,
.plan-cards .pcard:hover .pc-cta{background:#1b1e24}
/* ===== DEACTIVATE the default-popular card when another card is hovered ===== */
.plan-cards:hover .pcard.pop:not(:hover){transform:none;box-shadow:none;z-index:1}
.plan-cards:hover .pcard.pop:not(:hover) .pc-feats-head{background:#eef2f6;color:var(--muted)}
.plan-cards:hover .pcard.pop:not(:hover) .pc-feats{background:#fff}
.plan-cards:hover .pcard.pop:not(:hover) .pc-feats li{color:var(--ink-soft);border-bottom-color:var(--line)}
.plan-cards:hover .pcard.pop:not(:hover) .pc-feats li:nth-child(even){background:#f7f9fb}
.plan-cards:hover .pcard.pop:not(:hover) .pc-feats .lbl{color:var(--ink)}
.plan-cards:hover .pcard.pop:not(:hover) .pc-cta{background:#fff}
.pcard .ribbon{position:absolute;top:14px;left:-32px;background:#111;color:#fff;font-size:10px;font-weight:800;letter-spacing:1px;padding:5px 36px;transform:rotate(-45deg);z-index:3}
@media(max-width:1100px){.plan-cards,.plan-cards.cols-4,.plan-cards.cols-3{grid-template-columns:repeat(2,1fr);gap:14px;align-items:start}.pcard.pop,.plan-cards .pcard:hover,.plan-cards .pcard.pop:hover{transform:none}}
@media(max-width:600px){.plan-cards,.plan-cards.cols-4,.plan-cards.cols-3{grid-template-columns:1fr}}

/* ---------- modern contact form ---------- */
.cform{max-width:760px;margin:0 auto}
.cform-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px}
.cform label{display:flex;flex-direction:column;font-weight:600;font-size:13.5px;color:var(--ink-soft);gap:6px;text-align:left}
.cform label.full{grid-column:1/-1}
.cform input,.cform textarea{border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:15px;font-family:inherit;background:#fff;color:var(--ink);outline:none;transition:.15s}
.cform input:focus,.cform textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(168,4,0,.15)}
.cform textarea{resize:vertical;min-height:120px}
.cform .cform-submit{text-align:center}
.cform-submit .btn{width:100%;justify-content:center;padding:12px 24px}
@media(max-width:600px){.cform-grid{grid-template-columns:1fr}}

/* ---------- home service blocks: Shared / VPS / Reseller / Dedicated (modern flat dark cards) ---------- */
.svc-row{width:100%;padding:30px 0 64px}
.svc-row>.container{max-width:var(--maxw)}
.svc-head{text-align:center;max-width:720px;margin:0 auto 44px}
.svc-head h2{font-size:clamp(28px,3.2vw,38px);font-weight:800;letter-spacing:.3px;color:var(--ink)}
.svc-head p{color:var(--muted);font-size:17px;margin-top:12px;line-height:1.6}
.svc-blocks{display:grid;grid-template-columns:repeat(4,1fr);align-items:stretch;gap:24px}
.svc-block{display:flex;flex-direction:column;text-align:left;background:#2a363f;color:#fff;border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:32px 28px;transition:transform .2s ease,border-color .2s ease}
.svc-block:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.18)}
.svc-ic{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;font-size:22px;color:#fff;background:rgba(255,255,255,.08);margin-bottom:22px}
.svc-tag{font-size:13px;line-height:1.35;color:#8b97a5;font-weight:600;margin-bottom:9px}
.svc-block h3{font-size:21px;font-weight:800;letter-spacing:.2px;margin:0 0 12px;color:#fff}
.svc-block p{font-size:14.5px;line-height:1.65;color:#aab4c0;flex:1 1 auto;margin:0 0 26px}
.svc-more{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;background:var(--crimson);color:#fff;font-weight:700;font-size:14px;letter-spacing:.2px;padding:11px 20px;border-radius:10px;transition:background .18s ease}
.svc-more,.svc-more:hover,.svc-more:focus{color:#fff}
.svc-more:hover{background:var(--crimson-deep)}
.svc-more i{transition:transform .2s ease}
.svc-block:hover .svc-more i{transform:translateX(4px)}
@media(max-width:980px){.svc-blocks{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.svc-blocks{grid-template-columns:1fr}}

/* ---------- testimonials (modern 3-card slider on a dark band with graphics) ---------- */
.tsec{position:relative;overflow:hidden;width:100%;padding:78px 0;background:#56626e;background-image:
  radial-gradient(900px 480px at 85% -12%,rgba(255,255,255,.10),transparent 60%),
  radial-gradient(820px 560px at 3% 118%,rgba(28,36,44,.45),transparent 56%)}
.tsec::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);background-size:32px 32px;opacity:.7}
.tsec::after{content:"";position:absolute;right:-170px;top:-190px;width:540px;height:540px;border-radius:50%;border:1px solid rgba(255,255,255,.08);box-shadow:0 0 0 72px rgba(255,255,255,.03);pointer-events:none}
.tsec>.container{position:relative;z-index:1;max-width:1560px}
.tsec-head{text-align:center;max-width:720px;margin:0 auto 44px}
.tsec-head h2{font-size:clamp(28px,3.2vw,38px);font-weight:800;color:#fff;display:inline-flex;align-items:center;gap:11px}
.tsec-head h2 .fa{color:var(--crimson);font-size:.9em}
.tsec-head p{color:#dfe5ea;font-size:17px;margin-top:12px;line-height:1.6}
.tg-wrap{position:relative}
.tg{overflow:hidden}
.tg-track{display:flex;gap:24px;align-items:stretch;transition:transform .6s ease;will-change:transform}
.tg-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-sm);z-index:4;transition:background .18s ease,color .18s ease,border-color .18s ease}
.tg-nav:hover{background:var(--crimson);color:#fff;border-color:var(--crimson)}
.tg-nav .fa{font-size:20px;line-height:1}
.tg-nav.prev{left:-20px}
.tg-nav.next{right:-20px}
.tcard{flex:0 0 calc((100% - 48px)/3);display:flex;flex-direction:column;text-align:left;background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px 30px;transition:transform .2s ease,box-shadow .2s ease}
.tcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.tstars{color:var(--crimson);font-size:13px;letter-spacing:4px;margin-bottom:18px}
.tquote{color:var(--ink-soft);font-size:15px;line-height:1.7;flex:1 1 auto;margin:0 0 24px}
.tperson{display:flex;align-items:center;gap:13px}
.tav{width:46px;height:46px;border-radius:50%;background:var(--crimson);color:#fff;display:grid;place-items:center;font-weight:800;font-size:17px;flex:none}
.tname{font-weight:800;color:var(--ink);font-size:15px;line-height:1.25}
.trole{color:var(--muted);font-size:13px}
@media(max-width:980px){.tcard{flex-basis:calc((100% - 24px)/2)}}
@media(max-width:640px){.tcard{flex-basis:100%}}

/* ---------- responsive ---------- */
@media(max-width:1100px){.wrap{padding:0 24px}.results-band .wrap,.hero .wrap,.cta-band .wrap{padding-left:24px;padding-right:24px}.tier-grid{grid-template-columns:repeat(3,1fr)}.feat-grid,.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:880px){.hero .wrap{grid-template-columns:1fr;text-align:center;min-height:0}.hero-sub,.domain,.eyebrow{margin-left:auto;margin-right:auto}.hero-cta,.trust,.tlds{justify-content:center}.hero-art{order:-1;height:auto;margin-bottom:10px}.tier-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}.nav .menu{display:none}}

/* ============================================================
   Sticky red-topbar header — keep the nav constantly visible
   site-wide (top_nav was static 45px; .header was absolute@48px).
============================================================ */
.top_nav{position:fixed!important;top:0;left:0;right:0;width:100%;z-index:9001}
body .header,body.compact .header,body .fixednav3{position:fixed!important;top:0;left:0;right:0;width:100%;z-index:9000;box-shadow:0 6px 24px -14px rgba(16,24,40,.22)}
/* the now-fixed top_nav left the normal flow (45px) — give that space back so content still clears the header */
body #main{padding-top:0}
/* end sticky header */

/* ============================================================
   Red "feature_section1" bands (home / about / hosting):
   bigger icon glyph (fill the white badge — kill the empty space),
   and larger, more readable feature copy + titles.
============================================================ */
.feature_section1[style*="a80400"] .element-icon{width:66px!important;height:66px!important;line-height:66px!important;font-size:34px!important;color:#a80400!important}
/* image logo badges (cPanel, WordPress, migration, support): real logo inside the same white circle as the other icons */
.feature_section1[style*="a80400"] .element-icon.cp-logo,
.feature_section1[style*="a80400"] .element-icon.wp-logo,
.feature_section1[style*="a80400"] .element-icon.mig-logo,
.feature_section1[style*="a80400"] .element-icon.sup-logo{background:#fff!important;border-radius:100%!important;float:left!important;display:flex!important;align-items:center;justify-content:center;line-height:0!important;font-size:0!important;margin:0 20px 0 6px!important}
.feature_section1[style*="a80400"] .element-icon.cp-logo img{width:32px;height:auto;display:block}
.feature_section1[style*="a80400"] .element-icon.wp-logo img{width:34px;height:auto;display:block}
.feature_section1[style*="a80400"] .element-icon.mig-logo img{width:36px;height:auto;display:block}
.feature_section1[style*="a80400"] .element-icon.sup-logo img{height:38px;width:auto;display:block}
/* FAQ toggle (+/-) icons in brand crimson instead of grey */
.vc_toggle_default .vc_toggle_icon,
.vc_toggle_default .vc_toggle_icon::before,
.vc_toggle_default .vc_toggle_icon::after,
.vc_toggle_default .vc_toggle_title:hover .vc_toggle_icon,
.vc_toggle_default .vc_toggle_title:hover .vc_toggle_icon::before,
.vc_toggle_default .vc_toggle_title:hover .vc_toggle_icon::after{background:var(--crimson)!important;border-color:var(--crimson)!important}
.feature_section1[style*="a80400"] .king-elements h4{font-size:20px!important;line-height:1.3!important}
.feature_section1[style*="a80400"] .king-elements p,
.feature_section1[style*="a80400"] .king-elements p font{font-size:16px!important;line-height:1.65!important}
/* end feature_section1 sizing */
/* feature_section1 lead subtitle — larger + tight to the heading */
.feature_section1[style*="a80400"] .bpdiff-sub,
.feature_section1[style*="a80400"] .bpdiff-sub font{font-size:18px!important;line-height:1.6!important;color:#fff!important}
.feature_section1[style*="a80400"] h1{margin-bottom:8px!important}
/* hosting "BPHost Difference" band: pull the title block up (eat the top gap),
   open a gap before the icon grid, and recolour red -> site dark-gray slate
   (bpdiff-sub is hosting-only, so this is scoped to that band) */
.feature_section1[style*="a80400"]:has(.bpdiff-sub){padding-top:50px!important;
  background-color:#2c333c!important;
  background-image:
    radial-gradient(1000px 560px at 88% -12%,rgba(255,255,255,.08),transparent 60%),
    radial-gradient(820px 640px at 2% 120%,rgba(0,0,0,.30),transparent 58%)!important}
.feature_section1[style*="a80400"] .bpdiff-sub{margin-bottom:40px!important}

/* ============================================================
   Legacy fix: the ArkaHost theme floats the content column
   (.entry-content.blog_postcontent) and its wpb_row sections,
   which made following sections overlap (grey bg bleeding up
   behind the pricing). Unfloat so all content stacks normally.
============================================================ */
body .entry-content.blog_postcontent{float:none!important;width:auto!important}
body .entry-content.blog_postcontent .wpb_row{float:none!important;width:auto!important}
/* end legacy float fix */

/* legacy "what comes with..." text columns (dedicated / vps / reseller):
   bump the small body text into proportion with the big section title */
body .entry-content .wpb_text_column ul li,
body .entry-content .wpb_text_column ol li,
body .entry-content .wpb_text_column p,
body .entry-content .wpb_text_column p font{font-size:17px!important;line-height:1.75!important}
body .entry-content .wpb_text_column ul li{margin-bottom:7px!important}
body .entry-content .wpb_text_column h4,
body .entry-content .wpb_text_column h4 strong{font-size:21px!important;line-height:1.4!important}
body .entry-content .wpb_text_column h4{margin-bottom:14px!important}
/* end legacy text-column sizing */

/* Website portfolio (web-design.php): the legacy "outer_slider" JS plugin isn't
   loaded, so the slides collapsed to zero height. Render them as a clean,
   responsive thumbnail grid instead — no JS dependency. */
#slider-outline{max-width:1180px;margin:0 auto!important;padding:0 16px}
#slider-outline #slider,#slider-outline #sl-view{height:auto!important;width:auto!important;max-width:100%!important;overflow:visible!important}
#sl-wrap{position:static!important;display:grid!important;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px;width:auto!important;height:auto!important}
#sl-wrap .sl-div{width:auto!important;height:auto!important;float:none!important;margin:0!important;left:auto!important;top:auto!important;position:static!important}
#sl-wrap .sl-div .wpb_single_image,#sl-wrap .sl-div figure,#sl-wrap .sl-div .vc_single_image-wrapper,#sl-wrap .sl-div a{margin:0!important;padding:0!important;display:block!important;border:0!important;background:none!important}
#sl-wrap .sl-div img{width:100%!important;height:230px!important;object-fit:cover;object-position:top center;border-radius:12px;display:block;box-shadow:0 12px 30px -16px rgba(16,24,40,.45);transition:transform .25s ease}
#sl-wrap .sl-div img:hover{transform:translateY(-6px)}
#sl-next,#sl-prev{display:none!important}

/* two-tone page titles: black base + red highlight span */
.page-head h1 .hl{color:var(--crimson)}

/* web-design dark band: space out the 4 text columns (legacy vc_col-sm-3 had 0 gutter) */
#king-611877 .vc_row .vc_col-sm-3{padding-left:20px!important;padding-right:20px!important}
#king-611877 .margin_top9{margin-top:40px!important}

/* ===== Domains page: search results on light section + full TLD price table ===== */
#resultsBand{max-width:1400px;margin:30px auto 36px;padding:0 20px}
#resultsBand .db-results-title{color:var(--ink);font-size:20px;font-weight:800;margin:0 0 16px;text-align:center}
/* ====== DOMAIN PRICING TABLE — full-width modern restyle ====== */

/* Filter toolbar: full width, left-aligned, modern pill input with search icon + crimson focus ring */
.tld-tools{width:100%;max-width:none;margin:0 0 22px;display:flex;justify-content:flex-start}
.tld-tools input{width:420px;max-width:100%;border:1px solid var(--line);border-radius:12px;padding:13px 18px 13px 44px;font-size:15px;font-family:var(--sans);color:var(--ink);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235A6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 16px center;box-shadow:var(--shadow-sm);outline:none;transition:border-color .15s ease,box-shadow .15s ease}
.tld-tools input::placeholder{color:var(--muted)}
#tldFilter:focus{border-color:var(--crimson);box-shadow:0 0 0 3px rgba(168,4,0,.12)}

/* Table: full width (980px cap removed), soft-shadow rounded card, no heavy borders */
.tld-table{width:100%;max-width:none;margin:0;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);font-family:var(--sans)}
.tld-table th,.tld-table td{padding:15px 22px;font-size:15px;vertical-align:middle}

/* Numeric columns right-aligned, Domain left — set on every cell so .price and .na both align */
.tld-table th:not(:first-child),.tld-table td:not(:first-child){text-align:right}
.tld-table th:first-child,.tld-table td:first-child{text-align:left}

/* Header: clean white micro-label row with a crimson underline accent, sticky below the site nav */
.tld-table thead th{background:#fff;color:var(--muted);font-weight:700;font-size:11.5px;letter-spacing:.8px;text-transform:uppercase;border-bottom:2px solid var(--crimson);box-shadow:0 1px 0 var(--line)}

/* Body rows: hairline dividers on cells (filter-safe, no nth-child zebra) + full-height hover tint */
.tld-table tbody tr td{border-top:1px solid var(--line);transition:background-color .12s ease}
.tld-table tbody tr:hover td{background:var(--bg-cool)}

/* Cell emphasis: bold ink TLD; Register price in ink, transfer/renew muted; tabular figures */
.tld-table .tld{font-weight:800;color:var(--ink);letter-spacing:-.1px}
.tld-table td.price{font-weight:600;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.tld-table td.tld + td.price{font-weight:800;color:var(--ink)}
.tld-table td.na{color:var(--muted);font-weight:600;white-space:nowrap}

@media(max-width:900px){
  .tld-tools input{width:100%}
  .tld-table th,.tld-table td{padding:12px 14px;font-size:14px}
  .tld-table thead th{padding-left:14px;padding-right:14px;font-size:11px}
}
@media(max-width:640px){
  .tld-table th,.tld-table td{padding:11px 12px;font-size:13.5px}
}

/* ===== Domains hero: animated red search band ("something big about to be born") ===== */
.dom-hero{position:relative;overflow:hidden;isolation:isolate;padding:96px 24px 104px;background:linear-gradient(135deg,#c00500 0%,#9a0300 46%,#760200 100%)}
.dom-hero-inner{position:relative;z-index:2;max-width:1000px;margin:0 auto;text-align:center}
.dom-hero-title{color:#fff;font-size:clamp(30px,4.6vw,54px);font-weight:800;letter-spacing:.3px;line-height:1.06;margin:0;text-shadow:0 4px 40px rgba(0,0,0,.28)}
.dom-hero-sub{color:rgba(255,255,255,.9);font-size:clamp(15px,1.6vw,19px);margin:16px 0 36px}
.dom-search{display:flex;align-items:stretch;max-width:880px;height:66px;margin:0 auto;background:#fff;border-radius:14px;box-shadow:0 30px 70px -22px rgba(0,0,0,.55);overflow:hidden;position:relative;z-index:2}
.dom-www{display:flex;align-items:center;padding:0 22px;background:#fbe7e6;color:var(--crimson);font-weight:800;font-size:18px;letter-spacing:.5px}
.dom-search input{flex:1;min-width:0;border:0;outline:0;padding:0 22px;font-size:17px;color:var(--ink);background:#fff}
.dom-search input::placeholder{color:#9aa3ad}
.dom-ext{display:flex;align-items:center;background:#fbe7e6;border-left:1px solid #f2d4d2}
.dom-ext select{height:100%;border:0;background:transparent;color:var(--crimson);font-weight:700;font-size:16px;padding:0 16px;cursor:pointer;outline:0;-webkit-appearance:none;appearance:none}
.dom-go{border:0;background:var(--crimson);color:#fff;width:74px;flex:none;display:grid;place-items:center;cursor:pointer;transition:background .18s}
.dom-go:hover{background:var(--crimson-deep)}
.dom-go .ic{width:26px;height:26px;stroke-width:2.4}
@media(max-width:560px){.dom-search{height:auto;flex-wrap:wrap}.dom-www{display:none}.dom-search input{flex:1 1 100%;height:56px;border-bottom:1px solid var(--line)}.dom-ext{flex:1}.dom-go{width:auto;flex:1}}
.dom-hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.dom-hero-bg::before{content:"";position:absolute;inset:-20%;background-image:radial-gradient(rgba(255,255,255,.10) 1.5px,transparent 1.6px);background-size:28px 28px;opacity:.5;animation:domDots 18s linear infinite}
.dom-hero-bg .blob{position:absolute;border-radius:50%;filter:blur(40px);mix-blend-mode:screen}
.dom-hero-bg .b1{width:420px;height:420px;background:radial-gradient(circle,#ff6a5a,transparent 68%);top:-110px;left:6%;opacity:.6;animation:domDrift1 9s ease-in-out infinite}
.dom-hero-bg .b2{width:340px;height:340px;background:radial-gradient(circle,#ff9b3f,transparent 70%);bottom:-90px;right:9%;opacity:.55;animation:domDrift2 11s ease-in-out infinite}
.dom-hero-bg .b3{width:300px;height:300px;background:radial-gradient(circle,#ffffff,transparent 70%);top:22%;right:24%;opacity:.2;animation:domDrift3 8s ease-in-out infinite}
.dom-hero-bg .b4{width:260px;height:260px;background:radial-gradient(circle,#ff362b,transparent 70%);bottom:4%;left:16%;opacity:.55;animation:domDrift1 10s ease-in-out infinite reverse}
.dom-hero-bg .glow{position:absolute;left:50%;top:56%;width:680px;height:680px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.24),rgba(255,255,255,0) 60%);animation:domBorn 4.5s ease-in-out infinite}
.dom-hero-bg .sweep{position:absolute;top:-60%;left:-45%;width:42%;height:220%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);transform:skewX(-16deg);animation:domSweep 6.5s ease-in-out infinite}
@keyframes domDrift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(90px,64px) scale(1.28)}}
@keyframes domDrift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-104px,-52px) scale(1.22)}}
@keyframes domDrift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-72px,84px) scale(1.34)}}
@keyframes domBorn{0%,100%{transform:translate(-50%,-50%) scale(.62);opacity:.28}50%{transform:translate(-50%,-50%) scale(1.34);opacity:.95}}
@keyframes domSweep{0%{left:-45%}58%,100%{left:135%}}
@keyframes domDots{from{background-position:0 0}to{background-position:280px 140px}}

/* nav links: bold, black inactive, crimson active/hover; top utility bar -> black */
body .navbar-default .navbar-nav>li>a,.header ul.nav>li>a{color:#0E0E12!important;font-weight:700!important}
body .navbar-default .navbar-nav>li>a:hover,body .navbar-default .navbar-nav>li:hover>a,.header ul.nav>li>a:hover{color:var(--crimson)!important}
body .navbar-default .navbar-nav>li.current-menu-item>a,body .navbar-default .navbar-nav>li.current_page_item>a,body .navbar-default .navbar-nav>li.current-menu-parent>a,body .navbar-default .navbar-nav>li.active>a{color:var(--crimson)!important}
.top_nav{background-color:#0E0E12!important}

/* homepage domain-search results: 3-column grid (was being squeezed to 1 col by the shared #resultsBand cap) */
.domain_search #resultsBand{max-width:1400px;margin:20px auto 6px;padding:0}
/* keep results title + status text light on the dark homepage band (beats the domains-page #resultsBand dark rule) */
.domain_search #resultsBand .db-results-title,.domain_search #resultsBand .db-results-title strong{color:#fff}
.domain_search #resultsBand .dr-msg{color:#dfe5ec}
.domain_search #resultsBand .dr-note{color:#aab3c0}
.domain_search .domain-results{grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:1100px){.domain_search .domain-results{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.domain_search .domain-results{grid-template-columns:1fr}}
/* good-news search results title -> brand green (same green as the AVAILABLE indicator) */
.db-results-title.is-good,.db-results-title.is-good strong{color:var(--green)!important}

/* ===== Plan billing toggle (Monthly / Annual = 1 month free) ===== */
.bill-toggle{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:0 0 30px}
.bill-opt{font-family:inherit;font-size:15px;font-weight:700;color:var(--ink);background:#fff;border:1px solid #c7ced7;border-radius:999px;padding:11px 24px;cursor:pointer;display:inline-flex;align-items:center;gap:9px;transition:background .15s,border-color .15s,color .15s}
.bill-opt:hover{border-color:var(--crimson)}
.bill-opt.active{background:var(--crimson);border-color:var(--crimson);color:#fff}
.bill-save{font-size:11.5px;font-weight:800;letter-spacing:.2px;border-radius:999px;padding:3px 9px;background:var(--crimson);color:#fff;white-space:nowrap}
.bill-opt.active .bill-save{background:rgba(255,255,255,.2);color:#fff}
.pc-was{font-size:14px;font-weight:600;color:rgba(255,255,255,.6);text-decoration:line-through;margin:0 0 3px;line-height:1.1;display:block}
/* contact form: swap eyebrow/heading colors (heading red, eyebrow dark) */
.cform-head .kick{color:var(--ink)}
.cform-head .display{color:var(--crimson)}
/* top bar: Client Area as plain text (no box) */
.top_nav .tpbut{background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;box-shadow:none!important}
.top_nav .tpbut:hover{background:transparent!important;color:var(--crimson)!important}

/* kill the black top bar + add cart/login icons after the nav */
.top_nav{display:none!important}
#king-mainmenu .nav-sep{float:left;list-style:none;width:1px;height:24px;background:#c7ced7;margin:18px 8px 0 16px}
#king-mainmenu .nav-act{float:left;list-style:none}
#king-mainmenu .nav-act>a{display:block;padding:19px 9px;line-height:0;color:var(--crimson)!important}
#king-mainmenu .nav-act>a svg{width:22px;height:22px;display:block}
#king-mainmenu .nav-act>a:hover{color:var(--crimson-deep)!important}
.domain_search .offers ul li.last{padding-bottom:10px!important}

/* About — founding story */
.alicent.about-story{max-width:820px;margin:0 auto;text-align:center}
.alicent.about-story h3.light{font-size:25px;line-height:1.4;font-weight:600;color:var(--ink);margin:0 0 24px}
.alicent.about-story p{font-size:17px;line-height:1.78;color:var(--muted);margin:0 0 16px}
.alicent.about-story p:last-child{margin-bottom:0}
@media(max-width:600px){.alicent.about-story h3.light{font-size:21px}}
