.hv-swap{display:inline-grid;text-align:left;vertical-align:baseline}
.hv-swap>span{grid-area:1/1;transition:opacity .9s ease,transform .9s ease}
.hv-swap>span[aria-hidden="true"]{opacity:0;transform:translateY(.5em);pointer-events:none}
@media (prefers-reduced-motion: reduce){.hv-swap>span{transition:none}}
.hero{overflow:visible;position:relative;z-index:5}
.hero .eyebrow::before{content:none}
.hero-domain{margin:30px 0 20px;max-width:600px}
.hero-domain .domain-search-wrapper{padding-bottom:0;margin:0;position:static;transform:none}
.hero-domain .domain-card{background:transparent;border:none;box-shadow:none;padding:0;display:block;transform:none}
.hero-domain .domain-card:hover{transform:none;box-shadow:none}
.hero-domain .domain-card > div:first-child{display:none}
.hero-domain .domain-search{display:flex;align-items:center;background:#fff;border:1.5px solid var(--clr-border);border-radius:999px;padding:6px 6px 6px 0;box-shadow:0 12px 34px rgba(124,58,237,.10);transition:border-color .15s ease,box-shadow .15s ease}
.hero-domain .domain-search:focus-within{border-color:var(--clr-primary);box-shadow:0 12px 38px rgba(124,58,237,.20)}
.hero-domain .domain-search input{flex:1;border:none;outline:none;background:none;padding:13px 10px 13px 22px;font:inherit;font-size:1.02rem;font-weight:500;min-width:0;color:#1e293b !important;caret-color:var(--clr-primary);-webkit-text-fill-color:#1e293b}
.hero-domain .domain-search input::placeholder{color:var(--clr-muted);font-weight:400}
.hero-domain .search-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:999px;border:none;cursor:pointer;font:inherit;font-size:.92rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#7c3aed 0%,#5b21b6 100%);box-shadow:0 2px 14px rgba(124,58,237,.32);white-space:nowrap;transition:opacity .15s ease}
.hero-domain .search-btn{position:relative;overflow:hidden;animation:hvBtnPulse 2.8s ease-in-out infinite}
.hero-domain .search-btn::after{content:'';position:absolute;top:-4px;bottom:-4px;width:44px;left:-70px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:hvBtnShine 3.6s ease-in-out infinite}
.hero-domain .search-btn:hover{opacity:.94;transform:translateY(-1px)}
@keyframes hvBtnPulse{0%,100%{box-shadow:0 2px 14px rgba(124,58,237,.32)}50%{box-shadow:0 6px 30px rgba(124,58,237,.55)}}
@keyframes hvBtnShine{0%,58%{left:-70px}80%,100%{left:130%}}
@media (prefers-reduced-motion: reduce){.hero-domain .search-btn{animation:none}.hero-domain .search-btn::after{animation:none;content:none}}
.hero-domain .search-btn svg{width:16px;height:16px}
.hero-domain .tld-list{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.hero-domain .tld{display:inline-flex;align-items:baseline;gap:6px;padding:5px 13px;border-radius:999px;background:#fff;border:1px solid var(--clr-border);font-size:.8rem;box-shadow:0 1px 4px rgba(15,23,42,.05)}
.hero-domain .tld b{color:var(--clr-primary);font-weight:700}
.hero-domain .tld span{color:var(--clr-muted);font-weight:600}
.hero-domain{position:relative;z-index:70}
.hero-domain .domain-search-results{position:absolute;top:72px;left:0;right:0;z-index:80;margin:0;gap:4px;background:#fff;border:1px solid var(--clr-border);border-radius:16px;box-shadow:0 28px 64px rgba(15,23,42,.22);padding:0 10px;max-height:0;overflow:hidden}
.hero-domain .domain-search-results.is-open{padding:8px;max-height:296px;overflow-y:auto}
.hero-domain .domain-result{padding:6px 14px;border-radius:10px}
.hero-domain .domain-result-name{font-size:.95rem}
.hero-ctas-sub{align-items:center;gap:16px}
.hero-or{color:var(--clr-muted);font-size:.88rem;font-weight:600}
.trust-line{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--clr-muted);font-size:.88rem;margin:0}
@media (max-width:560px){
.hero-domain .domain-search{flex-direction:column;align-items:stretch;border-radius:18px;padding:8px}
.hero-domain .domain-search input{padding:11px 14px}
.hero-domain .search-btn{justify-content:center}
}

.section-head .section-label { font-size: .72rem; color: var(--clr-primary-dark); }
.hero-ctas .cta-fx {
position: relative; overflow: hidden; isolation: isolate;
gap: 10px; will-change: transform;
}
.hero-ctas .cta-fx .cta-ico { display: inline-flex; }
.hero-ctas .cta-fx .cta-ico svg { width: 18px; height: 18px; }
.hero-ctas .cta-fx .cta-arrow { display: inline-flex; margin-left: -2px; opacity: .75; }
.hero-ctas .cta-fx .cta-arrow svg { width: 16px; height: 16px; transition: transform .35s var(--ease-out); }
.hero-ctas .cta-fx:hover .cta-arrow svg { transform: translateX(5px); }
.hero-ctas .cta-fx:hover .cta-ico svg { animation: ctaPop .45s var(--ease-out); }
@keyframes ctaPop {
0% { transform: translateY(0) scale(1); }
45% { transform: translateY(-4px) scale(1.15); }
100% { transform: translateY(0) scale(1); }
}
.hero-ctas .cta-fx::before {
content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
transform: skewX(-18deg); pointer-events: none; z-index: 1;
transition: left .65s var(--ease-out);
}
.hero-ctas .btn-outline.cta-fx::before { background: linear-gradient(100deg, transparent, rgba(124,58,237,.18), transparent); }
.hero-ctas .cta-fx:hover::before { left: 115%; }
.hero-ctas .cta-ripple {
position: absolute; border-radius: 50%; transform: scale(0);
background: rgba(255,255,255,.45); pointer-events: none; z-index: 1;
animation: ctaRipple .6s ease-out forwards;
}
.hero-ctas .btn-outline .cta-ripple { background: rgba(124,58,237,.25); }
@keyframes ctaRipple { to { transform: scale(2.6); opacity: 0; } }
.hero-ctas .cta-fx > span { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
.hero-ctas .cta-fx::before, .hero-ctas .cta-ripple { display: none; }
}
html[data-theme="light"] .hero .checklist li {
background: rgba(255, 255, 255, .75);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border-color: rgba(124, 58, 237, .16);
box-shadow: 0 4px 14px rgba(76, 29, 149, .07);
}
html[data-theme="light"] .hero .check-dot { background: #EDE9FE; color: var(--clr-primary); }
.svc-hub .pricing-hero-content { max-width: 860px; }
.svc-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
max-width: 1200px; margin: 0 auto; padding: 0 32px;
}
.svc-card {
position: relative; display: flex; overflow: hidden;
background: var(--white); border: 1px solid var(--border); border-radius: 24px;
box-shadow: var(--shadow-sm);
transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s;
}
.svc-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-md);
border-color: rgba(124, 58, 237, 0.35);
}
.svc-body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 14px; padding: 32px 28px; width: 100%; }
.svc-card h3 { font-size: 22px; font-weight: 700; color: var(--ink); }
.svc-card p { font-size: 15px; line-height: 1.6; color: var(--muted); flex-grow: 1; }
.svc-icon {
width: 54px; height: 54px; border-radius: 14px; flex-shrink: 0;
background: #F3F0FF; color: var(--primary);
display: flex; align-items: center; justify-content: center;
box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.06);
transition: transform 0.4s var(--ease-out), background 0.4s, color 0.4s, box-shadow 0.4s;
}
html[data-theme="dark"] .svc-icon { background: var(--primary-light); }
.svc-icon svg { width: 24px; height: 24px; }
.svc-card:hover .svc-icon {
transform: translateY(-2px) scale(1.08) rotate(-4deg);
background: var(--primary); color: #fff;
box-shadow: 0 12px 24px -8px rgba(124, 58, 237, 0.5);
}
.svc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.svc-cta {
display: inline-flex; align-items: center; gap: 6px;
font-size: 14px; font-weight: 700; color: var(--primary); white-space: nowrap;
}
.svc-cta svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease-out); }
.svc-card:hover .svc-cta svg { transform: translateX(5px); }
.svc-price { font-size: 15px; font-weight: 800; color: var(--ink); }
.svc-price small { font-weight: 600; color: var(--muted); }
.svc-price em { font-style: normal; font-weight: 600; font-size: 13px; color: var(--mint); }
.svc-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-tags span {
display: inline-flex; align-items: center; gap: 7px;
font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: 40px;
background: rgba(124, 58, 237, 0.09); color: var(--primary);
border: 1px solid rgba(124, 58, 237, 0.14);
transition: transform 0.3s var(--ease-out), background 0.3s;
}
.svc-tags span svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .9; }
.svc-card:hover .svc-tags span { background: rgba(124, 58, 237, 0.14); }
.svc-badge {
position: absolute; top: 18px; right: 18px; z-index: 3;
font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
padding: 5px 12px; border-radius: 40px;
}
.svc-badge-new { background: rgba(16, 185, 129, 0.12); color: var(--mint); border: 1px solid rgba(16, 185, 129, 0.3); }
.svc-badge-pop { background: rgba(124, 58, 237, 0.1); color: var(--primary); border: 1px solid rgba(124, 58, 237, 0.28); }
.svc-featured, .svc-classic, .svc-game { grid-column: span 2; }
.svc-featured {
background: radial-gradient(120% 140% at 85% -20%, rgba(124, 58, 237, 0.45), transparent 55%),
linear-gradient(135deg, #0e081e 0%, #1a1030 100%);
border-color: #2a1f45;
}
.svc-featured h3 { color: #fff; font-size: 26px; }
.svc-featured p { color: #b8b2c8; }
.svc-featured .svc-price { color: #fff; }
.svc-featured .svc-price small { color: #8a8496; }
.svc-featured .svc-cta { color: #c4b5fd; }
.svc-featured .svc-icon { background: rgba(124, 58, 237, 0.22); color: #c4b5fd; box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.15); }
.svc-featured .svc-tags span { background: rgba(255, 255, 255, 0.07); color: #d8d2e8; border-color: rgba(255, 255, 255, 0.12); }
.svc-featured .svc-tags span svg { color: #c4b5fd; opacity: 1; }
.svc-featured:hover .svc-tags span { background: rgba(255, 255, 255, 0.12); }
.svc-featured:hover { border-color: var(--primary); box-shadow: 0 30px 60px -15px rgba(124, 58, 237, 0.4); }
.svc-watermark {
position: absolute; right: -30px; bottom: -38px; z-index: 1;
opacity: 0.06; pointer-events: none;
transition: transform 0.5s var(--ease-out), opacity 0.5s;
}
.svc-watermark svg { width: 190px; height: 190px; }
.svc-featured .svc-watermark { color: #c4b5fd; opacity: 0.09; }
.svc-classic .svc-watermark, .svc-game .svc-watermark { color: var(--primary); }
.svc-featured .svc-badge-pop { background: rgba(196, 181, 253, 0.14); color: #c4b5fd; border-color: rgba(196, 181, 253, 0.3); }
.svc-card:hover .svc-watermark { transform: rotate(-10deg) scale(1.1); opacity: 0.14; }
.svc-glow {
position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none;
background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(124, 58, 237, 0.13), transparent 65%);
transition: opacity 0.35s;
}
.svc-featured .svc-glow {
background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(196, 181, 253, 0.16), transparent 65%);
}
.svc-card:hover .svc-glow { opacity: 1; }
@media (max-width: 1024px) {
.svc-grid { grid-template-columns: repeat(2, 1fr); }
.svc-featured, .svc-classic, .svc-game { grid-column: span 2; }
}
@media (max-width: 640px) {
.svc-grid { grid-template-columns: 1fr; padding: 0 20px; }
.svc-featured, .svc-classic, .svc-game { grid-column: span 1; }
.svc-body { padding: 26px 22px; }
}