.map-dot{
position:absolute;
width:10px;
height:10px;
background:#2563eb; /* blue */
border-radius:50%;
box-shadow:0 0 0 rgba(37,99,235,0.6);
animation:pulse 2.5s infinite;
}
@keyframes pulse{
0%{box-shadow:0 0 0 0 rgba(37,99,235,.6)}
70%{box-shadow:0 0 0 14px rgba(37,99,235,0)}
100%{box-shadow:0 0 0 0 rgba(37,99,235,0)}
}
/* ================= Custom-Made Resolutions (Scoped Fix) ================= */
#custom-resolutions{
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
overflow: hidden;
position: relative;
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
}
/* Background blobs (donโt affect whole site) */
#custom-resolutions .bg-decoration{
position: absolute;
width: 600px;
height: 600px;
border-radius: 50%;
filter: blur(120px);
opacity: 0.3;
pointer-events: none;
animation: hmwFloat 20s ease-in-out infinite;
}
#custom-resolutions .bg-decoration-1{
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
top: -220px;
right: -220px;
}
#custom-resolutions .bg-decoration-2{
background: linear-gradient(135deg, #06b6d4, #3b82f6);
bottom: -220px;
left: -220px;
animation-delay: -10s;
}
@keyframes hmwFloat{
0%,100%{ transform: translate(0,0) scale(1); }
25%{ transform: translate(30px,-30px) scale(1.1); }
50%{ transform: translate(-20px,20px) scale(.9); }
75%{ transform: translate(20px,30px) scale(1.05); }
}
/* Title */
#custom-resolutions .title-main{
font-weight: 800;
letter-spacing: -0.02em;
color: #0f172a;
}
/* Cards */
#custom-resolutions .card{
background: rgba(255,255,255,0.95);
backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.5);
transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
position: relative;
overflow: hidden;
}
#custom-resolutions .card::before{
content:'';
position:absolute; top:0; left:0; right:0; height:4px;
background: linear-gradient(90deg, #0f172a, #1e40af, #0f172a);
transform: scaleX(0);
transition: transform .4s ease;
}
#custom-resolutions .card:hover::before{ transform: scaleX(1); }
#custom-resolutions .card:hover{
transform: translateY(-8px);
box-shadow: 0 25px 50px -12px rgba(15,23,42,0.25);
border-color: rgba(30,64,175,0.2);
}
/* Icon animation */
#custom-resolutions .icon-wrapper{
position: relative;
transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
#custom-resolutions .card:hover .icon-wrapper{
transform: scale(1.1) rotate(5deg);
}
#custom-resolutions .icon-bg{
position:absolute; inset:-20px;
background: radial-gradient(circle, rgba(30,64,175,0.05) 0%, transparent 70%);
opacity:0;
transition: opacity .4s ease;
}
#custom-resolutions .card:hover .icon-bg{ opacity:1; }
/* โ
ICON FIX: make them stroke-only (blue), not filled black */
#custom-resolutions .icon{
width: 80px;
height: 80px;
stroke-width: 1.5;
stroke: #1e40af;
fill: none;
}
#custom-resolutions .icon *{
fill: none !important; /* prevents black filled shapes */
stroke: #1e40af;
}
/* Card title */
#custom-resolutions .card-title{
font-weight: 800;
color: #0f172a;
}
/* Button */
#custom-resolutions .learn-more-btn{
background: linear-gradient(135deg, #0f172a 0%, #1e40af 100%);
color: #fff;
border: none;
padding: 14px 32px;
border-radius: 999px;
font-weight: 700;
cursor: pointer;
position: relative;
overflow: hidden;
box-shadow: 0 4px 15px rgba(15,23,42,0.2);
transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
#custom-resolutions .learn-more-btn::before{
content:'';
position:absolute; top:50%; left:50%;
width:0; height:0;
border-radius:50%;
background: rgba(255,255,255,0.2);
transform: translate(-50%,-50%);
transition: width .6s ease, height .6s ease;
}
#custom-resolutions .learn-more-btn:hover::before{ width: 300px; height: 300px; }
#custom-resolutions .learn-more-btn:hover{
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(15,23,42,0.3);
}
#custom-resolutions .btn-text{ position: relative; z-index: 1; display:flex; align-items:center; gap:8px; }
#custom-resolutions .icon-circle{
width:20px; height:20px; border-radius:999px;
background: rgba(255,255,255,0.2);
display:flex; align-items:center; justify-content:center;
transition: transform .3s ease;
}
#custom-resolutions .learn-more-btn:hover .icon-circle{ transform: rotate(360deg); }
/* ================= /Scoped Fix ================= */
/* ===== Custom-Made Resolutions : Header Polish ===== */
#custom-resolutions .section-header{
text-align: center;
margin-bottom: 4.5rem;
}
/* Eyebrow */
#custom-resolutions .section-eyebrow{
display: inline-flex;
align-items: center;
gap: .5rem;
font-size: 11px;
letter-spacing: .35em;
text-transform: uppercase;
color: #1e40af;
background: rgba(37,99,235,.08);
padding: 6px 14px;
border-radius: 999px;
font-weight: 600;
}
/* Title */
#custom-resolutions .section-title{
margin-top: 1rem;
font-size: clamp(2.6rem, 4vw, 3.5rem);
font-weight: 800;
letter-spacing: -0.03em;
color: #0f172a;
}
/* Description */
#custom-resolutions .section-desc{
margin-top: 1.25rem;
font-size: 16px;
line-height: 1.75;
color: #475569;
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
/* keyword highlight */
#custom-resolutions .section-desc b{
font-weight: 600;
color: #0f172a;
}
#custom-resolutions .section-desc .accent{
color: #2563eb;
font-weight: 600;
}
/* ================= Premium Hosting Features (FINAL) ================= */
:root{ --brand:#2563eb; }
#premium-features{
position: relative;
background: linear-gradient(135deg,#f8fafc 0%,#eef2ff 100%);
padding-top: 4.5rem;
padding-bottom: 4.5rem;
border-top: 1px solid rgba(15,23,42,.06);
overflow: hidden;
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
}
/* ---------- Header ---------- */
#premium-features .pf-header{ text-align:center; }
#premium-features .pf-kicker{
display:inline-flex;
align-items:center;
gap:.5rem;
padding:6px 14px;
border-radius:999px;
background: rgba(37,99,235,.12);
color:#1e40af;
font-size:11px;
letter-spacing:.35em;
text-transform:uppercase;
font-weight:700;
}
#premium-features .pf-title{
margin-top:14px;
font-size: clamp(2.1rem,3.4vw,3rem);
font-weight:900;
letter-spacing:-0.03em;
color:#0f172a;
}
#premium-features .pf-sub{
margin-top:10px;
max-width:52ch;
margin-left:auto;
margin-right:auto;
color:#475569;
line-height:1.75;
}
/* ---------- Hero cards (top 2) ---------- */
#premium-features .pf-hero-card{
position:relative;
background: linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.92));
border:1px solid rgba(15,23,42,.08);
border-radius:28px;
padding:36px;
box-shadow:0 20px 44px -26px rgba(15,23,42,.45);
overflow:hidden;
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
#premium-features .pf-hero-card:hover{
transform: translateY(-4px);
box-shadow:0 32px 80px -48px rgba(15,23,42,.6);
border-color: rgba(37,99,235,.28);
}
#premium-features .pf-hero-title{
font-size:24px;
font-weight:900;
color:#0f172a;
}
#premium-features .pf-hero-text{
margin-top:10px;
color:#475569;
line-height:1.75;
max-width:60ch;
}
/* decorative rings */
#premium-features .pf-ring{
position:absolute;
width:240px;
height:240px;
border-radius:999px;
border:5px solid rgba(37,99,235,.25);
top:-90px;
opacity:.9;
pointer-events:none;
}
#premium-features .pf-ring-left{ left:-80px; }
#premium-features .pf-ring-right{ right:-80px; }
/* watermark image (WordPress) */
#premium-features .pf-watermark{
position:absolute;
right:26px;
top:22px;
pointer-events:none;
}
#premium-features .pf-wm-img{
width:160px;
height:160px;
opacity:.06;
filter: grayscale(100%);
}
/* pills */
#premium-features .pf-mini-row{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:18px;
}
#premium-features .pf-pill{
font-size:12px;
font-weight:700;
color:#0f172a;
background: rgba(15,23,42,.06);
border:1px solid rgba(15,23,42,.06);
padding:8px 12px;
border-radius:999px;
}
/* ---------- Bottom icon cards ---------- */
#premium-features .pf-icon-card{
background: rgba(255,255,255,.94);
border:1px solid rgba(15,23,42,.08);
border-radius:22px;
padding:22px;
box-shadow:0 16px 36px -26px rgba(15,23,42,.4);
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
#premium-features .pf-icon-card:hover{
transform: translateY(-4px);
box-shadow:0 28px 70px -50px rgba(15,23,42,.6);
border-color: rgba(37,99,235,.28);
}
/* icon container */
#premium-features .pf-ic{
width:54px;
height:54px;
border-radius:16px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:14px;
background: linear-gradient(135deg,
rgba(37,99,235,.14),
rgba(37,99,235,.05)
);
box-shadow:
inset 0 0 0 1px rgba(37,99,235,.18),
0 10px 30px -18px rgba(37,99,235,.45);
}
/* svg icons */
#premium-features .pf-ic svg{
width:26px;
height:26px;
stroke:#1d4ed8;
fill:none;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
}
/* image icons (intel / support) */
#premium-features .pf-img-icon{
width:28px;
height:28px;
object-fit:contain;
filter: drop-shadow(0 6px 14px rgba(37,99,235,.25));
}
/* text */
#premium-features .pf-icon-title{
font-weight:900;
color:#0f172a;
}
#premium-features .pf-icon-text{
margin-top:8px;
color:#475569;
line-height:1.65;
font-size:14px;
}
/* ================= /Premium Hosting Features ================= */
/* ================= Premium UI Polish ================= */
/* ---------- Card polish ---------- */
#premium-features .pf-hero-card,
#premium-features .pf-icon-card{
position: relative;
}
#premium-features .pf-hero-card::after,
#premium-features .pf-icon-card::after{
content:'';
position:absolute;
inset:0;
border-radius:inherit;
pointer-events:none;
box-shadow:
0 0 0 0 rgba(37,99,235,0);
transition: box-shadow .35s ease;
}
#premium-features .pf-hero-card:hover::after,
#premium-features .pf-icon-card:hover::after{
box-shadow:
0 0 0 1px rgba(37,99,235,.22),
0 22px 60px -40px rgba(37,99,235,.55);
}
/* ---------- Premium button ---------- */
#premium-features .pf-btn{
position: relative;
display:inline-flex;
align-items:center;
gap:.5rem;
margin-top:18px;
font-weight:700;
color:#0f172a;
text-decoration:none;
padding-bottom:6px;
overflow:hidden;
}
/* animated line */
#premium-features .pf-btn i{
position:absolute;
left:0;
bottom:0;
height:2px;
width:100%;
background: linear-gradient(
90deg,
transparent,
#2563eb,
transparent
);
transform: translateX(-100%);
transition: transform .45s cubic-bezier(.4,0,.2,1);
}
/* hover animation */
#premium-features .pf-btn:hover i{
transform: translateX(100%);
}
/* subtle text shift */
#premium-features .pf-btn span{
transition: transform .25s ease, color .25s ease;
}
#premium-features .pf-btn:hover span{
transform: translateX(4px);
color:#2563eb;
}
/* ---------- Button alignment helpers ---------- */
#premium-features .pf-btn-center{ justify-content:center; }
#premium-features .pf-btn-right{ justify-content:flex-end; }
/* ---------- Optional: icon card button spacing ---------- */
#premium-features .pf-icon-card .pf-btn{
margin-top:14px;
font-size:14px;
}
/* ---------- Motion safety ---------- */
@media (prefers-reduced-motion: reduce){
#premium-features .pf-btn i,
#premium-features .pf-btn span{
transition:none;
}
}
/* ================= /Premium UI Polish ================= */
/* ==== Home: Marquee + Net chips fixes ==== */
/* Providers marquee */
@keyframes providers-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.providers-marquee { overflow:hidden; width:100%; }
.providers-track {
display:flex; align-items:center; gap:48px; width:max-content;
animation: providers-scroll 30s linear infinite;
will-change: transform;
}
.providers-marquee:hover .providers-track { animation-play-state: paused; }
/* Logo strip marquee */
.hmw-marquee{
overflow:hidden; position:relative;
-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.hmw-track{
display:flex; width:max-content; gap:28px;
will-change: transform;
animation: hmw-scroll 26s linear infinite;
}
.hmw-group{ display:flex; align-items:center; gap:28px; flex-shrink:0; padding:10px 0; }
@keyframes hmw-scroll{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.hmw-marquee:hover .hmw-track{ animation-play-state: paused; }
.hmw-logo img{ height:34px; width:auto; max-width:180px; object-fit:contain; display:block; }
@media (max-width:640px){
.hmw-track{ gap:20px; animation-duration:20s; }
.hmw-group{ gap:20px; }
.hmw-logo img{ height:28px; max-width:150px; }
}
/* Net chips active */
.net-chip.is-active{
color:#0b2a66;
border-color: rgba(37,99,235,.35);
background: linear-gradient(180deg, rgba(37,99,235,.14), rgba(255,255,255,.92));
box-shadow: 0 12px 28px rgba(37,99,235,.18);
}
.net-chip.is-active .dot{ transform: scale(1.15); }
/* ================= PREMIUM FEATURES (pf-*) ================= */
.pf-kicker{
font-weight:800;
letter-spacing:.16em;
text-transform:uppercase;
font-size:12px;
color: rgb(100 116 139);
}
.pf-title{
margin-top:.35rem;
font-weight:900;
font-size: clamp(28px, 3.2vw, 48px);
color: rgb(15 23 42);
}
.pf-sub{
margin-top:.75rem;
font-weight:600;
color: rgb(100 116 139);
font-size: 16px;
}
.pf-hero-card{
position:relative;
overflow:hidden;
border-radius:28px;
border:1px solid rgb(226 232 240);
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
box-shadow: 0 18px 60px rgba(15,23,42,.08);
padding: 28px;
min-height: 270px;
}
.pf-hero-title{
font-size: 22px;
font-weight: 900;
color: rgb(15 23 42);
}
.pf-hero-text{
margin-top: .7rem;
color: rgb(71 85 105);
font-weight: 600;
line-height: 1.65;
font-size: 14px;
max-width: 42ch;
}
.pf-mini-row{
margin-top: 18px;
display:flex;
flex-wrap:wrap;
gap:10px;
}
.pf-pill{
display:inline-flex;
align-items:center;
padding: 8px 12px;
border-radius: 999px;
border: 1px solid rgb(226 232 240);
background: rgba(255,255,255,.9);
color: rgb(30 41 59);
font-weight: 800;
font-size: 12px;
}
/* rings + watermark */
.pf-ring{
position:absolute;
width: 220px; height: 220px;
border-radius: 999px;
border: 1px solid rgba(37,99,235,.18);
background: radial-gradient(circle at 30% 30%, rgba(37,99,235,.12), transparent 60%);
filter: blur(.2px);
}
.pf-ring-left{ top:-70px; left:-70px; }
.pf-ring-right{ bottom:-80px; right:-70px; }
.pf-watermark{
position:absolute;
right: 18px;
top: 18px;
width: 92px; height: 92px;
opacity: .12;
pointer-events:none;
}
.pf-wm-img{ width:100%; height:100%; object-fit:contain; }
.pf-wm-tools::before{
content:"๐ ๏ธ";
position:absolute;
inset:0;
display:grid;
place-items:center;
font-size: 64px;
}
/* Button underline animation */
.pf-btn{
margin-top: 22px;
display:inline-flex;
align-items:center;
gap:10px;
font-weight: 900;
color: rgb(37 99 235);
position:relative;
}
.pf-btn i{
width: 18px; height: 2px;
background: rgb(37 99 235);
display:inline-block;
transform: translateY(1px);
transition: width .25s ease;
}
.pf-btn:hover i{ width: 28px; }
.pf-btn-right{ margin-top: 14px; }
/* Icon cards */
.pf-icon-card{
position:relative;
border-radius: 24px;
border:1px solid rgb(226 232 240);
background:#fff;
padding: 20px 18px;
box-shadow: 0 10px 30px rgba(15,23,42,.06);
transition: transform .2s ease, box-shadow .2s ease;
}
.pf-icon-card:hover{
transform: translateY(-2px);
box-shadow: 0 18px 45px rgba(15,23,42,.10);
}
.pf-ic{
width: 44px; height: 44px;
border-radius: 16px;
border:1px solid rgb(226 232 240);
background: rgb(248 250 252);
display:grid;
place-items:center;
}
.pf-ic svg{
width: 22px; height: 22px;
fill: rgb(37 99 235);
stroke: rgb(37 99 235);
stroke-width: 1.8;
}
.pf-img-icon{ width: 22px; height: 22px; object-fit:contain; display:block; }
.pf-icon-title{
margin-top: 14px;
font-weight: 900;
color: rgb(15 23 42);
font-size: 15px;
}
.pf-icon-text{
margin-top: 8px;
color: rgb(71 85 105);
font-weight: 600;
font-size: 13px;
line-height: 1.6;
}
/* ================= CUSTOM RESOLUTIONS ================= */
#custom-resolutions,
#custom-resolutions *{
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
}
#custom-resolutions .container-main{ position:relative; z-index:2; }
#custom-resolutions .bg-decoration{
position:absolute; border-radius:999px; filter: blur(40px);
opacity:.35; z-index:1;
}
#custom-resolutions .bg-decoration-1{
width:420px; height:420px; left:-120px; top:-120px;
background: radial-gradient(circle at 30% 30%, rgba(37,99,235,.45), transparent 60%);
}
#custom-resolutions .bg-decoration-2{
width:520px; height:520px; right:-180px; bottom:-180px;
background: radial-gradient(circle at 30% 30%, rgba(255,140,80,.40), transparent 60%);
}
#custom-resolutions .section-eyebrow{
display:inline-flex; align-items:center; justify-content:center;
font-weight:900; letter-spacing:.18em; text-transform:uppercase;
font-size:12px; color: rgba(37,99,235,.85);
padding:10px 16px; border-radius:999px;
border:1px solid rgba(37,99,235,.18);
background: rgba(255,255,255,.75);
box-shadow: 0 14px 40px rgba(15,23,42,.06);
}
#custom-resolutions .section-title{
margin-top:16px;
font-weight:900;
font-size: clamp(30px, 3.2vw, 56px);
color: rgb(15 23 42);
}
#custom-resolutions .section-desc{
margin-top:14px;
font-weight:600;
color: rgb(71 85 105);
font-size: 16px;
}
#custom-resolutions .section-desc .accent{
font-weight:900;
color: rgb(37 99 235);
}
/* cards */
#custom-resolutions .card{
position:relative;
border-radius: 28px;
border:1px solid rgb(226 232 240);
background: rgba(255,255,255,.92);
box-shadow: 0 20px 60px rgba(15,23,42,.10);
overflow:hidden;
transition: transform .2s ease, box-shadow .2s ease;
}
#custom-resolutions .card:hover{
transform: translateY(-3px);
box-shadow: 0 30px 80px rgba(15,23,42,.14);
}
#custom-resolutions .icon-bg{
position:absolute; inset:-120px auto auto -120px;
width:260px; height:260px; border-radius:999px;
background: radial-gradient(circle at 30% 30%, rgba(37,99,235,.20), transparent 60%);
}
#custom-resolutions .icon-wrapper{ position:relative; z-index:2; }
#custom-resolutions .icon{
width: 74px; height: 74px;
fill: none;
stroke: rgb(37 99 235);
stroke-width: 3;
}
#custom-resolutions .card-title{ position:relative; z-index:2; color: rgb(15 23 42); font-weight:900; }
#custom-resolutions .card-description{ position:relative; z-index:2; color: rgb(71 85 105); font-weight:600; font-size: 14px; line-height: 1.7; }
/* button */
#custom-resolutions .learn-more-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding: 12px 18px;
border-radius: 999px;
background: rgb(37 99 235);
color:#fff;
font-weight: 900;
text-decoration:none;
box-shadow: 0 18px 50px rgba(37,99,235,.25);
transition: transform .15s ease, filter .15s ease;
}
#custom-resolutions .learn-more-btn:hover{ transform: translateY(-1px); filter: brightness(0.95); }
#custom-resolutions .btn-text{
display:inline-flex;
align-items:center;
gap:10px;
}
#custom-resolutions .icon-circle{
display:inline-flex;
width: 22px; height: 22px;
align-items:center; justify-content:center;
border-radius:999px;
background: rgba(255,255,255,.18);
}
/* Remove any bottom line/shadow under fixed header */
header {
border-bottom: 0 !important;
box-shadow: none !important;
outline: none !important;
}
/* If some element is drawing a hairline under header */
header::after {
content: none !important;
}
/* Mobile menu top border (just in case it leaks) */
#mobile-menu {
border-top: 0 !important;
}
header { border-bottom: 0 !important; box-shadow: none !important; }
.hmw-bill-btn.bg-slate-100,
.hmw-bill-btn.active {
background: linear-gradient(135deg, #2563eb, #3b82f6);
color: #fff !important;
box-shadow: 0 6px 20px rgba(37,99,235,.35);
}
/* ================= Billing Toggle ================= */
.hmw-bill-btn {
border-radius: 9999px;
transition: all .25s ease;
}
.hmw-bill-btn:hover {
transform: translateY(-1px);
}
.hmw-bill-btn.active {
background: linear-gradient(135deg, #2563eb, #3b82f6);
color: #fff !important;
box-shadow: 0 6px 20px rgba(37,99,235,.35);
}
.hmw-bill-btn:not(.active) {
color: #334155;
}
/* ================= Pricing Cards ================= */
.card[data-plan] {
transition: transform .25s ease, box-shadow .25s ease;
}
.card[data-plan]:hover {
transform: translateY(-6px);
}
.card [data-price] {
transition: all .3s ease;
}