@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/Inter-var.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/Poppins-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/Poppins-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/Poppins-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/Poppins-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/fonts/Poppins-800.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('/fonts/Poppins-900.woff2') format('woff2');
}

:root {
    --primary: #0A3D61;
    --primary-dark: #082E4A;
    --primary-soft: rgba(10, 61, 97, 0.06);
    --secondary: #EAB543;
    --secondary-dark: #C99A26;
    --secondary-soft: rgba(234, 181, 67, 0.14);
    --body: #1E293B;
    --muted: #64748B;
    --border: #E2E8F0;
    --bg-soft: #F5F8FB;
    --radius: 14px;
    --heading-font: 'Poppins', 'Inter', sans-serif;
    --body-font: 'Inter', system-ui, sans-serif;
}

html {
    scroll-behavior: smooth;
    overflow-x: clip;
}

body {
    font-family: var(--body-font);
    color: var(--body);
    background: #fff;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font);
    color: var(--primary-dark);
}

::selection {
    background: var(--secondary);
    color: var(--primary-dark);
}

/* ---------- Buttons ---------- */
.btn {
    @apply inline-flex items-center justify-center gap-2 rounded-xl font-semibold px-6 py-3 text-sm transition-all duration-200 whitespace-nowrap;
    border-radius: calc(var(--radius) + 1px);
}

.btn:disabled {
    @apply opacity-60 cursor-not-allowed;
}

.btn-primary {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 10px 24px -10px rgba(10, 61, 97, 0.65);
}
.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

.btn-secondary {
    background: var(--secondary);
    color: var(--primary-dark);
    box-shadow: 0 10px 24px -10px rgba(234, 181, 67, 0.7);
}
.btn-secondary:hover {
    background: var(--secondary-dark);
    transform: translateY(-1px);
}

.btn-outline {
    border: 1.5px solid var(--border);
    color: var(--primary);
    background: #fff;
}
.btn-outline:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.btn-white {
    background: #fff;
    color: var(--primary);
    box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.5);
}
.btn-white:hover {
    background: var(--secondary);
    color: var(--primary-dark);
    transform: translateY(-1px);
}

.btn-ghost-light {
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
}
.btn-ghost-light:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
}

.btn-sm {
    @apply px-4 py-2 text-xs;
}
.btn-lg {
    @apply px-8 py-4 text-base;
}

/* ---------- Cards ---------- */
.card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.card-hover {
    transition: all 0.25s ease;
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 48px -16px rgba(10, 61, 97, 0.22);
    border-color: rgba(10, 61, 97, 0.2);
}

/* ---------- Badges / chips ---------- */
.chip {
    @apply inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold;
    background: var(--secondary-soft);
    color: var(--secondary-dark);
}

.badge {
    @apply inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[11px] font-bold uppercase tracking-wide;
}

.badge-gold {
    background: var(--secondary);
    color: var(--primary-dark);
}

.badge-red {
    background: #FEE2E2;
    color: #B91C1C;
}

.badge-green {
    background: #DCFCE7;
    color: #15803D;
}

.badge-blue {
    background: #DBEAFE;
    color: #1D4ED8;
}

.badge-gray {
    background: #F1F5F9;
    color: #475569;
}

/* ---------- Section headings ---------- */
.eyebrow {
    @apply inline-flex items-center gap-2 rounded-full px-4 py-1.5 text-[11px] font-bold uppercase tracking-widest;
    background: var(--primary-soft);
    color: var(--primary);
}

h2.section-title {
    @apply text-3xl md:text-4xl lg:text-[2.6rem] font-extrabold leading-tight;
}
h2.section-title .hl {
    color: var(--secondary-dark);
    display: inline-block;
}

/* ---------- Forms (admin) ---------- */
.field {
    @apply w-full rounded-xl border border-slate-200 bg-white px-3.5 py-2.5 text-sm text-slate-800 placeholder-slate-400 outline-none transition;
}
.field:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.field-error {
    border-color: #FCA5A5 !important;
}

.label {
    @apply block text-[13px] font-semibold text-slate-700 mb-1.5;
}

.hint {
    @apply text-xs text-slate-400 mt-1;
}

/* ---------- Tables ---------- */
.tbl {
    @apply w-full text-sm;
}
.tbl thead th {
    @apply text-left text-[11px] uppercase tracking-wider font-bold text-slate-400 px-4 py-3 border-b border-slate-100 whitespace-nowrap;
}
.tbl tbody td {
    @apply px-4 py-3 border-b border-slate-50 align-middle;
}
.tbl tbody tr {
    transition: background 0.15s;
}
.tbl tbody tr:hover td {
    background: var(--primary-soft);
    transition: background 0.15s;
}

@media (max-width: 767px) {
    .tbl { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
}

/* ---------- Admin sidebar ---------- */
.side-link {
    @apply flex items-center gap-3 rounded-xl px-3.5 py-2.5 text-sm font-medium text-slate-300 transition w-full;
}
.side-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.side-link.active {
    background: var(--secondary);
    color: var(--primary-dark);
    font-weight: 700;
}

/* ---------- Misc ---------- */
.container-x {
    @apply mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8;
}

.text-gradient-gold {
    background: linear-gradient(92deg, #F5D77E 0%, var(--secondary) 45%, var(--secondary-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.glass {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-grid-bg {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 56px 56px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #F1F5F9; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* Faq accordion */
.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-answer.open {
    grid-template-rows: 1fr;
}
.faq-answer > div {
    overflow: hidden;
}

/* ---- Faq redesigned ---- */
.faq-blob { animation: faqBlob 14s ease-in-out infinite; }
.faq-blob:nth-of-type(2) { animation-duration: 18s; animation-delay: -6s; }
@keyframes faqBlob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-24px, 18px) scale(1.12); }
}

.faq-support {
    border-radius: 24px;
    background: linear-gradient(135deg, #0A3D61 0%, #0B1220 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 45px -20px rgba(10, 61, 97, 0.45);
}

.faq-list { display: flex; flex-direction: column; gap: 12px; }

.faq-card {
    position: relative;
    background: #fff;
    border: 1px solid #E4E9F0;
    border-radius: 18px;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.faq-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #EAB543, #F97316);
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-card:hover {
    border-color: #CBD5E1;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -14px rgba(10, 61, 97, 0.16);
}
.faq-card-open {
    border-color: rgba(234, 181, 67, 0.5);
    box-shadow: 0 16px 34px -16px rgba(10, 61, 97, 0.2);
}
.faq-card-open::before { opacity: 1; transform: scaleY(1); }

.faq-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    text-align: left;
}
.faq-num {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
    background: var(--primary-soft);
    color: var(--primary);
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.faq-num-open {
    background: linear-gradient(135deg, #EAB543, #F59E0B);
    color: #fff;
    transform: rotate(-6deg) scale(1.05);
}
.faq-q {
    flex: 1;
    font-family: Poppins, Inter, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--primary-dark);
}
.faq-card-open .faq-q { color: #0A3D61; }
.faq-chev {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease, color 0.3s ease;
}
.faq-chev-open {
    transform: rotate(180deg);
    background: var(--secondary);
    color: var(--primary-dark);
}
.faq-a {
    padding: 0 20px 22px 72px;
    font-size: 14px;
    line-height: 1.75;
    color: #64748B;
}

@media (max-width: 639px) {
    .faq-btn { padding: 16px; gap: 10px; }
    .faq-q { font-size: 14px; }
    .faq-a { padding: 0 16px 20px 56px; font-size: 13.5px; }
}

.faq-searchwrap {
    position: sticky;
    top: 92px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 4px 16px;
    background: linear-gradient(180deg, var(--bg-soft) 55%, transparent);
}
.faq-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 14px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #E4E9F0;
    color: var(--primary);
    box-shadow: 0 4px 14px -8px rgba(10, 61, 97, 0.15);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.faq-search:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.faq-search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: #1E293B;
}
.faq-search input::placeholder { color: #94A3B8; }
.faq-clear {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    color: #64748B;
    background: #F1F5F9;
    transition: background 0.2s ease, color 0.2s ease;
}
.faq-clear:hover { background: #FEE2E2; color: #EF4444; }
.faq-count {
    flex: none;
    font-size: 12px;
    font-weight: 800;
    color: var(--primary);
    background: var(--primary-soft);
    padding: 7px 11px;
    border-radius: 999px;
}

.faq-empty {
    text-align: center;
    padding: 48px 20px;
    background: #fff;
    border: 1px dashed #CBD5E1;
    border-radius: 18px;
}

@media (prefers-reduced-motion: reduce) {
    .faq-blob { animation: none; }
    .faq-card:hover { transform: none; }
    .faq-chev { transition: none; }
}

/* Rich text prose */
.prose-x p { margin-bottom: 1rem; line-height: 1.7; }
.prose-x h2 { font-size: 1.5rem; margin: 1.75rem 0 0.75rem; font-weight: 700; }
.prose-x h3 { font-size: 1.25rem; margin: 1.5rem 0 0.6rem; font-weight: 700; }
.prose-x strong { color: var(--primary-dark); }
.prose-x ul { list-style: disc; margin: 0.75rem 0 1rem 1.4rem; }
.prose-x ol { list-style: decimal; margin: 0.75rem 0 1rem 1.4rem; }
.prose-x li { margin-bottom: 0.4rem; }
.prose-x img { border-radius: var(--radius); margin: 1rem 0; }
.prose-x a { color: var(--primary); font-weight: 600; text-decoration: underline; }
.prose-x blockquote { border-left: 3px solid var(--secondary); padding: 0.5rem 1rem; background: var(--secondary-soft); border-radius: 0 8px 8px 0; margin: 1rem 0; }

/* Animated reveal */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

@keyframes float-slow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}
.animate-float { animation: float-slow 6s ease-in-out infinite; }

/* ================================================================
   About section – premium auto-animation (Stripe / Linear inspired)
   ================================================================ */

/* ── stage ── */
.ab-stage {
    position: relative;
    padding: 3rem 2rem;
    overflow: visible;
}

/* ── dot grid backdrop ── */
.ab-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, var(--primary) 0.8px, transparent 0.8px);
    background-size: 28px 28px;
    opacity: 0.06;
    z-index: 0;
    animation: abDotsShift 20s linear infinite;
}
@keyframes abDotsShift {
    from { background-position: 0 0; }
    to   { background-position: 28px 28px; }
}

/* ── mesh gradient backdrop ── */
.ab-mesh {
    position: absolute;
    inset: -30%;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 15% 50%, var(--secondary) 0%, transparent 45%),
        radial-gradient(ellipse at 85% 15%, #3B82F6 0%, transparent 45%),
        radial-gradient(ellipse at 50% 90%, #A78BFA 0%, transparent 45%);
    opacity: 0.10;
    filter: blur(80px);
    z-index: 0;
    animation: abMeshDrift 10s ease-in-out infinite alternate;
}
@keyframes abMeshDrift {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(4%, -5%) scale(1.1); }
}

/* ── gradient orbs (independent motion) ── */
.ab-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    z-index: 0;
    pointer-events: none;
}
.ab-orb--gold {
    width: 55%;
    height: 55%;
    top: 5%;
    left: -8%;
    background: radial-gradient(circle, var(--secondary) 0%, transparent 70%);
    opacity: 0.18;
    animation: abOrbGold 7s ease-in-out infinite alternate;
}
.ab-orb--blue {
    width: 45%;
    height: 45%;
    bottom: -5%;
    right: -5%;
    background: radial-gradient(circle, #3B82F6 0%, transparent 70%);
    opacity: 0.14;
    animation: abOrbBlue 9s ease-in-out infinite alternate;
}
.ab-orb--purple {
    width: 35%;
    height: 35%;
    top: 40%;
    right: 10%;
    background: radial-gradient(circle, #A78BFA 0%, transparent 70%);
    opacity: 0.12;
    animation: abOrbPurple 8s ease-in-out infinite alternate;
}
@keyframes abOrbGold   { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(12%,-10%) scale(1.2); } }
@keyframes abOrbBlue   { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-10%,8%) scale(1.15); } }
@keyframes abOrbPurple { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(8%,-12%) scale(1.1); } }

/* ── light beams ── */
.ab-beam {
    position: absolute;
    width: 2px;
    height: 160%;
    top: -30%;
    background: linear-gradient(to bottom, transparent, var(--secondary), transparent);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
}
.ab-beam--1 {
    left: 18%;
    animation: abBeam1 5s ease-in-out infinite;
}
.ab-beam--2 {
    left: 72%;
    animation: abBeam2 6.5s ease-in-out infinite 2s;
}
@keyframes abBeam1 {
    0%, 100% { opacity: 0; transform: translateX(0) scaleY(0.8); }
    30%      { opacity: 0.12; }
    50%      { opacity: 0.18; transform: translateX(20px) scaleY(1); }
    70%      { opacity: 0.12; }
}
@keyframes abBeam2 {
    0%, 100% { opacity: 0; transform: translateX(0) scaleY(0.8); }
    30%      { opacity: 0.10; }
    50%      { opacity: 0.15; transform: translateX(-15px) scaleY(1); }
    70%      { opacity: 0.10; }
}

/* ── floating particles ── */
.ab-particle {
    position: absolute;
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}
.ab-particle--1 {
    width: 6px; height: 6px;
    background: var(--secondary);
    box-shadow: 0 0 8px var(--secondary);
    top: 8%;  left: 12%;
    animation: abP1 6s ease-in-out infinite;
}
.ab-particle--2 {
    width: 4px; height: 4px;
    background: #60A5FA;
    box-shadow: 0 0 6px #60A5FA;
    top: 22%; right: 8%;
    animation: abP2 7.5s ease-in-out infinite 1s;
}
.ab-particle--3 {
    width: 5px; height: 5px;
    background: #A78BFA;
    box-shadow: 0 0 7px #A78BFA;
    bottom: 18%; left: 6%;
    animation: abP3 8s ease-in-out infinite 2.5s;
}
.ab-particle--4 {
    width: 3px; height: 3px;
    background: #34D399;
    box-shadow: 0 0 6px #34D399;
    top: 55%; right: 4%;
    animation: abP4 5.5s ease-in-out infinite 0.5s;
}
.ab-particle--5 {
    width: 5px; height: 5px;
    background: var(--secondary);
    box-shadow: 0 0 8px var(--secondary);
    bottom: 8%;  right: 15%;
    animation: abP5 7s ease-in-out infinite 3s;
}
.ab-particle--6 {
    width: 4px; height: 4px;
    background: #FB923C;
    box-shadow: 0 0 6px #FB923C;
    top: 40%;  left: 2%;
    animation: abP6 6.5s ease-in-out infinite 1.5s;
}
@keyframes abP1 { 0%,100%{opacity:0;transform:translate(0,0)} 20%{opacity:.8} 80%{opacity:.8} 50%{transform:translate(18px,-24px)} }
@keyframes abP2 { 0%,100%{opacity:0;transform:translate(0,0)} 25%{opacity:.7} 75%{opacity:.7} 50%{transform:translate(-14px,-20px)} }
@keyframes abP3 { 0%,100%{opacity:0;transform:translate(0,0)} 30%{opacity:.6} 70%{opacity:.6} 50%{transform:translate(12px,-18px)} }
@keyframes abP4 { 0%,100%{opacity:0;transform:translate(0,0)} 20%{opacity:.9} 80%{opacity:.9} 50%{transform:translate(-10px,-16px)} }
@keyframes abP5 { 0%,100%{opacity:0;transform:translate(0,0)} 25%{opacity:.7} 75%{opacity:.7} 50%{transform:translate(14px,-22px)} }
@keyframes abP6 { 0%,100%{opacity:0;transform:translate(0,0)} 30%{opacity:.65} 70%{opacity:.65} 50%{transform:translate(-16px,-14px)} }

/* ── main visual wrapper ── */
.ab-visual {
    position: relative;
    z-index: 2;
}

/* ── animated ring around card ── */
.ab-ring {
    position: absolute;
    inset: -4px;
    border-radius: 1.4rem;
    background: conic-gradient(
        from 0deg,
        var(--secondary),
        #3B82F6,
        #A78BFA,
        #34D399,
        var(--secondary)
    );
    opacity: 0.5;
    filter: blur(0.5px);
    animation: abRingSpin 6s linear infinite;
    z-index: 0;
}
@keyframes abRingSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── main card ── */
.ab-card {
    position: relative;
    z-index: 1;
    border-radius: 1.3rem;
    overflow: hidden;
    background: #0d1b2a;
    animation: abCardFloat 7s ease-in-out infinite;
}
@keyframes abCardFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* image */
.ab-img {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}
.ab-img-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        transparent 55%,
        rgba(10, 61, 97, 0.5) 100%
    );
    z-index: 2;
    pointer-events: none;
}

/* fallback card */
.ab-fallback {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    min-height: 340px;
}

/* ── auto shine sweep ── */
.ab-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 0%,
        transparent 35%,
        rgba(255,255,255,0.12) 45%,
        rgba(255,255,255,0.20) 50%,
        rgba(255,255,255,0.12) 55%,
        transparent 65%,
        transparent 100%
    );
    z-index: 3;
    pointer-events: none;
    animation: abShine 5s ease-in-out infinite;
}
@keyframes abShine {
    0%, 100% { transform: translateX(-120%); }
    45%, 55% { transform: translateX(120%); }
}

/* ── floating glass stat cards ── */
.ab-glass-card {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 14px;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow:
        0 8px 32px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.08);
    color: #fff;
    white-space: nowrap;
    pointer-events: none;
}
.ab-glass-card--top {
    top: -8px;
    right: -12px;
    animation: abGlassA 6s ease-in-out infinite;
}
.ab-glass-card--bottom {
    bottom: -8px;
    left: -12px;
    animation: abGlassB 7s ease-in-out infinite 1.5s;
}
@keyframes abGlassA {
    0%, 100% { transform: translateY(0) translateX(0); }
    50%      { transform: translateY(-8px) translateX(4px); }
}
@keyframes abGlassB {
    0%, 100% { transform: translateY(0) translateX(0); }
    50%      { transform: translateY(8px) translateX(-4px); }
}
.ab-glass-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: #fff;
    flex-shrink: 0;
}
.ab-glass-val {
    font-family: var(--font-heading), 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.1;
}
.ab-glass-label {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,0.55);
    margin-top: 1px;
}

/* ── entrance (scroll reveal only, then auto-animates) ── */
.ab-visual {
    opacity: 0;
    transform: translateY(35px) scale(0.95);
    transition:
        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in-view .ab-visual {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ── hover enhancements ── */
.ab-card:hover {
    animation-play-state: paused;
    box-shadow: 0 30px 70px -15px rgba(10, 61, 97, 0.5);
}
.ab-card:hover .ab-img {
    transform: scale(1.04);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.ab-ring {
    transition: opacity 0.4s ease;
}
.ab-card:hover ~ .ab-ring,
.ab-visual:hover .ab-ring {
    opacity: 0.8;
}

/* ── reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .ab-dots,
    .ab-mesh,
    .ab-orb,
    .ab-beam,
    .ab-particle,
    .ab-ring,
    .ab-card,
    .ab-card .ab-img,
    .ab-shine,
    .ab-glass-card,
    .ab-visual {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
    .ab-ring {
        opacity: 0.3;
        background: linear-gradient(135deg, var(--secondary), var(--primary));
    }
    .ab-glass-card {
        backdrop-filter: none;
        background: rgba(10, 61, 97, 0.85);
    }
}

@keyframes marquee-x {
    from { transform: translateX(0); }
    to { transform: translateX(-30%); }
}
.animate-marquee { animation: marquee-x 26s linear infinite; }

/* ---- Hero banner slider ---- */
.hero-stage {
    position: relative;
    min-height: 640px;
}

.hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.9s ease, visibility 0.9s ease;
}

.hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* Staggered content entrance for the active slide */
.hero-anim-group > * {
    opacity: 0;
}
.hero-slide.is-active .hero-anim-group > * {
    animation: heroRise 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.hero-slide.is-active .hero-anim-group > :nth-child(2) { animation-delay: 0.12s; }
.hero-slide.is-active .hero-anim-group > :nth-child(3) { animation-delay: 0.24s; }
.hero-slide.is-active .hero-anim-group > :nth-child(4) { animation-delay: 0.36s; }
.hero-slide.is-active .hero-anim-group > :nth-child(5) { animation-delay: 0.48s; }
.hero-slide.is-active .hero-anim-group > :nth-child(6) { animation-delay: 0.6s; }
.hero-slide.is-active .hero-anim-group > :nth-child(7) { animation-delay: 0.72s; }

@keyframes heroRise {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Accent-colored title highlight (var --hero-accent set per slide) */
.hero-highlight {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--hero-accent) 45%, white) 0%,
        var(--hero-accent) 45%,
        color-mix(in srgb, var(--hero-accent) 70%, #000) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Autoplay progress fill on the active dot */
@keyframes heroProgress {
    from { width: 0; }
    to   { width: 100%; }
}
.hero-progress-fill {
    animation: heroProgress 7s linear forwards;
}

/* Floating visual cards */
.hero-float-up   { animation: floatY 5.5s ease-in-out infinite; }
.hero-float-down { animation: floatY 6.5s ease-in-out infinite reverse; }

@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

/* Soft accent orb behind the visual */
.hero-orb {
    position: absolute;
    border-radius: 9999px;
    filter: blur(90px);
    opacity: 0.5;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide { transition: none; }
    .hero-slide.is-active .hero-anim-group > * { animation: none; opacity: 1; }
    .hero-progress-fill { animation: none; width: 100%; }
    .hero-float-up, .hero-float-down { animation: none; }
}

/* Mobile / tablet: let the hero size to its stacked content instead of
   clipping into the stats band below (slides are absolutely positioned). */
@media (max-width: 1023px) {
    .hero-stage { min-height: 0; }
    .hero-slide { position: relative; inset: auto; }
    .hero-slide:not(.is-active) { display: none; }
    .hero-slide .container-x { padding-top: 56px; padding-bottom: 72px; }
}

/* ---------- Why HostTiller bento ---------- */
.bento-card {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 2rem;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
@media (min-width: 1024px) { .bento-card { padding: 2.25rem; } }

.bento-card:hover {
    transform: translateY(-6px);
}

.bento-light {
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
.bento-light:hover {
    box-shadow: 0 28px 56px -20px rgba(10, 61, 97, 0.25);
}

.bento-dark {
    color: #fff;
}
.bento-dark:hover {
    box-shadow: 0 28px 56px -20px rgba(10, 61, 97, 0.5);
}

/* Shine sweep on hover */
.bento-shine::after {
    content: '';
    position: absolute;
    inset: -50%;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.14) 50%, transparent 70%);
    transform: translateX(-75%);
    transition: transform 0.9s ease;
    pointer-events: none;
}
.bento-shine:hover::after {
    transform: translateX(75%);
}

/* Gentle float for icon chips */
@keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
.animate-floaty { animation: floaty 5s ease-in-out infinite; }

/* Slow rotation (backup restore ring) */
@keyframes spinSlow {
    to { transform: rotate(360deg); }
}
.animate-spin-slow { animation: spinSlow 6s linear infinite; }

/* CDN orbit dots around the globe */
@keyframes cdnOrbit {
    from { transform: rotate(0deg) translateX(74px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(74px) rotate(-360deg); }
}
.orbit-dot {
    animation: cdnOrbit 7s linear infinite;
}

/* Metric load bars */
.bar-fill {
    transition: height 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Staggered chips inside the bento grid */
.stagger-chip {
    opacity: 0;
    transform: translateY(10px);
}
.in-view .stagger-chip {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
    .animate-floaty, .animate-spin-slow, .orbit-dot { animation: none; }
    .bar-fill, .bento-shine::after { transition: none; }
    .stagger-chip { opacity: 1; transform: none; }
}

/* ---------- "The full package" explorer ---------- */
.panel-anim {
    animation: panelRise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes panelRise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Soft pulsing halo behind the stage icon */
@keyframes fxGlow {
    0%, 100% { transform: scale(1); opacity: 0.45; }
    50%      { transform: scale(1.14); opacity: 0.9; }
}
.fx-glow {
    border-radius: 9999px;
    animation: fxGlow 3.2s ease-in-out infinite;
}

/* Rotating dashed ring (backups / migration) */
.fx-ring-spin {
    border: 2px dashed rgba(234, 181, 67, 0.45);
    animation: spinSlow 8s linear infinite;
    border-radius: 9999px;
}

/* Small orbital dots around the stage visual (domain / wordpress) */
@keyframes miniOrbit {
    from { transform: rotate(0deg) translateX(58px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(58px) rotate(-360deg); }
}
.fx-orbit-dot {
    border-radius: 9999px;
    animation: miniOrbit 6s linear infinite;
}

/* Autoplay progress line across the top of the stage */
.panel-progress-fill {
    background: linear-gradient(90deg, #F5D77E, #EAB543);
    animation: heroProgress 3.5s linear forwards;
}

@media (prefers-reduced-motion: reduce) {
    .fx-glow, .fx-ring-spin, .fx-orbit-dot { animation: none; }
    .panel-progress-fill { animation: none; width: 100%; }
}

/* ---------- "The full package" v2 stages ---------- */
@keyframes mfConic {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.mf-conic {
    border-radius: 9999px;
    background: conic-gradient(from 0deg, transparent 0 52%, rgba(234, 181, 67, 0.5) 78%, transparent 82% 100%);
    animation: mfConic 9s linear infinite;
    filter: blur(1px);
    pointer-events: none;
}

@keyframes mfSparkTwinkle {
    0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
    50%      { opacity: 1; transform: scale(1.15) rotate(40deg); }
}
.mf-spark {
    pointer-events: none;
    animation: mfSparkTwinkle 2.4s ease-in-out infinite;
}

/* Soft diagonal light sweep across the preview stage */
.mf-shine::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0.16) 50%, transparent 55%);
    transform: translateX(-140%);
    animation: mfShine 5s ease-in-out infinite;
}
@keyframes mfShine {
    0% { transform: translateX(-140%); }
    55%, 100% { transform: translateX(140%); }
}

/* Staggered tag pop inside the stage */
.mf-chip {
    animation: mfChipPop 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes mfChipPop {
    from { opacity: 0; transform: translateY(8px) scale(0.9); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .mf-conic, .mf-spark, .mf-shine::after, .mf-chip { animation: none; }
    .mf-chain { opacity: 1; transform: none; }
}

/* ---------- Special offer ---------- */
@keyframes soPulse {
    0%, 100% { opacity: 0.45; transform: scale(1); }
    50%      { opacity: 0.95; transform: scale(1.08); }
}
.so-badge-glow {
    border-radius: 9999px;
    animation: soPulse 3.2s ease-in-out infinite;
}

@keyframes soSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.so-ring {
    border-radius: 9999px;
    background: conic-gradient(from 0deg, transparent 0 32%, rgba(234, 181, 67, 0.6) 46%, rgba(245, 215, 126, 0.95) 50%, rgba(234, 181, 67, 0) 58% 100%);
    animation: soSpin 8s linear infinite;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
    pointer-events: none;
}

@keyframes soFlash {
    from { transform: scale(1.12); color: #EAB543; }
    to   { transform: scale(1); }
}
.so-flash {
    animation: soFlash 0.5s ease both;
}

@keyframes soFloaty {
    0%, 100% { transform: translateY(0) rotate(var(--so-rot, 0deg)); }
    50%      { transform: translateY(-14px) rotate(var(--so-rot, 0deg)); }
}
.so-paper {
    pointer-events: none;
    animation: soFloaty 7s ease-in-out infinite;
}
.so-paper:nth-of-type(1) { --so-rot: -8deg; }
.so-paper:nth-of-type(2) { --so-rot: 10deg; }

@media (prefers-reduced-motion: reduce) {
    .so-badge-glow, .so-ring, .so-flash, .so-paper { animation: none; }
}

/* ---------- Testimonials carousel ---------- */
.tl-stage { position: relative; }

.tl-halo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(760px, 92%);
    height: min(480px, 92%);
    transform: translate(-50%, -50%);
    border-radius: 9999px;
    background: radial-gradient(closest-side, rgba(37, 99, 235, 0.16), transparent 70%);
    filter: blur(6px);
    pointer-events: none;
}

.tl-deck { position: absolute; inset: 0; }

.tl-card {
    position: absolute;
    inset: 0;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}
.tl-card-active { transform: translateX(0) scale(1); opacity: 1; z-index: 20; pointer-events: auto; }
.tl-card-next   { transform: translateX(58%) scale(0.82); opacity: 0.4; z-index: 10; }
.tl-card-prev   { transform: translateX(-58%) scale(0.82); opacity: 0.4; z-index: 10; }
.tl-card-hide   { transform: translateX(0) scale(0.72); opacity: 0; visibility: hidden; z-index: 0; pointer-events: none; }

.tl-card-in {
    animation: tlIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes tlIn {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

.tl-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.25);
    transition: all 0.4s ease;
}
.tl-dot.tl-dot-active {
    width: 34px;
    background: rgba(255, 255, 255, 0.22);
}
.tl-dot.tl-dot-active::after {
    content: '';
    position: absolute;
    left: 0; top: 0; height: 100%;
    width: 0;
    border-radius: 9999px;
    background: linear-gradient(90deg, #F5D77E, #EAB543);
    animation: heroProgress 6.5s linear forwards;
}
.tl-dot.tl-dot-active.tl-paused::after { animation-play-state: paused; }
.tl-stage:hover .tl-dot.tl-dot-active::after { animation-play-state: paused; }

@media (max-width: 767px) {
    .tl-card-next, .tl-card-prev {
        transform: translateX(0) scale(0.9);
        opacity: 0;
        visibility: hidden;
        z-index: 0;
        pointer-events: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tl-card { transition: none; }
    .tl-card-in { animation: none; }
    .tl-dot.tl-dot-active::after { animation: none; width: 100%; }
}

/* ---------- "The full package" product-panel mockup ---------- */
@keyframes typeDot {
    0%, 60%, 100% { transform: none; opacity: 0.35; }
    30%           { transform: translateY(-3px); opacity: 1; }
}
.type-dot {
    animation: typeDot 1.2s ease-in-out infinite;
}
.type-dot:nth-child(2) { animation-delay: 0.15s; }
.type-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes meterGrow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
.meter-fill {
    transform-origin: left;
    animation: meterGrow 1.15s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes pulseDot {
    0%, 100% { opacity: 0.25; transform: scale(0.85); }
    50%      { opacity: 1;    transform: scale(1.05); }
}
.pulse-dot {
    animation: pulseDot 1.8s ease-in-out infinite;
}

@keyframes scanSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.scan-ring {
    border-radius: 9999px;
    filter: blur(1px);
    background: conic-gradient(from 0deg, transparent 0 58%, rgba(52, 211, 153, 0.55) 78%, transparent 84% 100%);
    animation: scanSpin 7s linear infinite;
    pointer-events: none;
}

@keyframes dsFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
.ds-float {
    animation: dsFloat 6s ease-in-out infinite;
}

@keyframes dsMsg {
    from { opacity: 0; transform: translateY(10px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ds-msg {
    animation: dsMsg 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Drifting background orbs */
@keyframes dsOrbA {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(40px, 28px) scale(1.12); }
}
@keyframes dsOrbB {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-36px, -24px) scale(1.08); }
}
.ds-orb {
    position: absolute;
    border-radius: 9999px;
    filter: blur(70px);
    pointer-events: none;
}
.ds-orb-a { background: rgba(10, 61, 97, 0.22); animation: dsOrbA 14s ease-in-out infinite; }
.ds-orb-b { background: rgba(234, 181, 67, 0.18); animation: dsOrbB 16s ease-in-out infinite; }

/* Sweeping sheen across the console panel */
.ds-sheen {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}
.ds-sheen::after {
    content: '';
    position: absolute;
    top: -20%;
    bottom: -20%;
    width: 34%;
    left: -50%;
    transform: skewX(-18deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    animation: dsSheen 4.5s ease-in-out infinite;
}
@keyframes dsSheen {
    0%      { left: -50%; }
    55%, 100% { left: 130%; }
}

/* Blinking caret + per-letter pop for live domain preview */
@keyframes dsCaret {
    0%, 45% { opacity: 1; }
    46%, 100% { opacity: 0; }
}
.ds-caret {
    display: inline-block;
    width: 2px;
    height: 0.95em;
    margin-left: 2px;
    vertical-align: -0.13em;
    background: #EAB543;
    animation: dsCaret 1.05s steps(1) infinite;
}
@keyframes dsPop {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ds-pops {
    display: inline-block;
    animation: dsPop 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Inline spinner */
@keyframes dirSpin {
    to { transform: rotate(360deg); }
}
.ds-spin {
    border-radius: 9999px;
    border: 2px solid rgba(234, 181, 67, 0.25);
    border-top-color: #EAB543;
    animation: dirSpin 0.75s linear infinite;
    flex-shrink: 0;
}
.ds-step {
    animation: dsStepIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes dsStepIn {
    from { opacity: 0; transform: scale(0.4); }
    to   { opacity: 1; transform: scale(1); }
}

/* Searching / result cards */
.ds-result-card {
    animation: dsCard 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes dsCard {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ds-result-in {
    animation: dsCard 0.45s 0.05s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Animated check draw */
.ds-ring {
    stroke-dasharray: 176;
    stroke-dashoffset: 176;
    animation: dsRing 0.8s 0.15s ease-out forwards;
}
.ds-check {
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: dsCheck 0.5s 0.85s ease-out forwards;
}
@keyframes dsRing {
    to { stroke-dashoffset: 0; }
}
@keyframes dsCheck {
    to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .type-dot, .meter-fill, .pulse-dot, .scan-ring { animation: none; }
    .meter-fill { transform: none; }
    .ds-float, .ds-msg { animation: none; }
    .ds-orb-a, .ds-orb-b, .ds-sheen::after, .ds-caret, .ds-spin { animation: none; }
    .ds-pops, .ds-step, .ds-result-card, .ds-result-in, .ds-ring, .ds-check { animation: none; }
    .ds-ring { stroke-dashoffset: 0; }
    .ds-check { stroke-dashoffset: 0; }
}

/* ---------- Global Network / Multi-Region core ---------- */

/* Dotted landmass — pops in when the section scrolls into view */
.nw-dot {
    fill: rgba(148, 197, 238, 0.5);
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
}
.in-view .nw-dot {
    animation: nwDotPop 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes nwDotPop {
    0%   { opacity: 0; transform: scale(0.2); }
    100% { opacity: 1; transform: scale(1); }
}

/* Backbone arcs draw themselves in */
.nw-arc {
    opacity: 0;
    transition: opacity 0.4s ease 0.4s, stroke-dashoffset 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.in-view .nw-arc {
    opacity: 1;
}

/* Traveling packet glow */
.nw-packet {
    filter: drop-shadow(0 0 6px rgba(245, 215, 126, 0.9));
}

/* Expanding radar halo on every hub */
.nw-halo {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: nwHalo 2.6s ease-out infinite;
    pointer-events: none;
}
@keyframes nwHalo {
    0%            { opacity: 0.9; transform: scale(0.35); }
    65%, 100%     { opacity: 0;   transform: scale(3.4); }
}

/* Rotating dashed beacon ring around the BDIX core */
.nw-beacon-ring {
    transform-box: fill-box;
    transform-origin: center;
    animation: spinSlow 7s linear infinite;
}

/* Rotating sonar sweep across the map */
.nw-sweep {
    z-index: 1;
    background: conic-gradient(
        from 0deg,
        rgba(234, 181, 67, 0) 0deg,
        rgba(234, 181, 67, 0.06) 50deg,
        rgba(37, 99, 235, 0.1) 75deg,
        rgba(234, 181, 67, 0.22) 118deg,
        rgba(234, 181, 67, 0) 135deg
    );
    animation: nwSweep 9s linear infinite;
}
@keyframes nwSweep {
    to { transform: rotate(360deg); }
}

/* Vertical dimension sweep (left -> right) */
.nw-scan {
    z-index: 2;
    width: 120px;
    background: linear-gradient(90deg, transparent, rgba(245, 215, 126, 0.14), transparent);
    animation: nwScan 5s ease-in-out infinite;
    mix-blend-mode: screen;
}
@keyframes nwScan {
    0%          { left: -140px; }
    55%, 100%   { left: 100%; }
}

/* Floating region chips rise in */
.nw-chip {
    z-index: 4;
    opacity: 0;
    transform-origin: left center;
}
.in-view .nw-chip {
    animation: nwChipIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes nwChipIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .nw-dot { opacity: 1; animation: none; }
    .nw-arc { opacity: 1; stroke-dashoffset: 0; transition: none; }
    .nw-halo, .nw-beacon-ring { animation: none; opacity: 0; }
    .nw-sweep, .nw-scan { display: none; }
    .nw-chip { opacity: 1; animation: none; }
}

/* ---------- Hosting banner ---------- */

/* Scrolling highlight window over the ping waveform */
.hb-wave {
    stroke-dasharray: 0.3 0.7;
    stroke-dashoffset: 1;
    animation: hbWaveScroll 4.5s linear infinite;
}
@keyframes hbWaveScroll {
    to { stroke-dashoffset: -1; }
}

/* Tracing packet dot */
.hb-dot {
    filter: drop-shadow(0 0 5px rgba(245, 215, 126, 0.9));
}

/* NVMe activity meters (grow + loop like throughput) */
.hb-meter {
    transform: scaleX(0);
    transform-origin: left;
    animation: hbMeter 3s cubic-bezier(0.22, 1, 0.36, 1) infinite both;
}
@keyframes hbMeter {
    0%   { transform: scaleX(0); }
    70%, 100% { transform: scaleX(1); }
}

/* Gentle float for overlay chips */
@keyframes hbFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
.hb-float {
    animation: hbFloat 5s ease-in-out infinite;
}

/* Slowly rotating dashed orbit near the console */
.hb-orbit {
    animation: spinSlow 9s linear infinite;
}

/* Drifting ambient orbs */
@keyframes hbOrbA {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(36px, 26px) scale(1.1); }
}
@keyframes hbOrbB {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-30px, -22px) scale(1.08); }
}
.hb-orb { animation: hbOrbA 13s ease-in-out infinite; }
.hb-orb:nth-of-type(2) { animation: hbOrbB 16s ease-in-out infinite; }

/* Feature ticker */
.hb-marquee::before,
.hb-marquee::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 90px;
    z-index: 2;
    pointer-events: none;
}
.hb-marquee::before {
    left: 0;
    background: linear-gradient(90deg, var(--bg-soft), transparent);
}
.hb-marquee::after {
    right: 0;
    background: linear-gradient(-90deg, var(--bg-soft), transparent);
}
.hb-marquee-track {
    width: max-content;
    animation: hbMarquee 30s linear infinite;
}
@keyframes hbMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (hover: hover) {
    .hb-marquee:hover .hb-marquee-track { animation-play-state: paused; }
}

@media (prefers-reduced-motion: reduce) {
    .hb-wave, .hb-dot, .hb-meter, .hb-float, .hb-orbit, .hb-orb, .hb-marquee-track { animation: none; }
    .hb-meter { transform: none; }
    .hb-marquee-track { animation-play-state: paused; }
}

/* ---- Banner background animation ---- */
.hb-bg { z-index: 1; }

.hb-grid-drift {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 52px 52px;
    -webkit-mask-image: radial-gradient(closest-side at 50% 38%, #000 20%, transparent 92%);
    mask-image: radial-gradient(closest-side at 50% 38%, #000 20%, transparent 92%);
    animation: hbGridDrift 22s linear infinite;
}
@keyframes hbGridDrift { to { background-position: 0 52px; } }

.hb-beam {
    position: absolute;
    left: -35%;
    right: -35%;
    top: -65%;
    height: 230%;
    transform-origin: 50% 0;
    mix-blend-mode: screen;
    filter: blur(22px);
    background: conic-gradient(from 0deg at 50% 0%,
        rgba(234, 181, 67, 0) 0deg,
        rgba(234, 181, 67, 0.05) 24deg,
        rgba(56, 189, 248, 0.07) 44deg,
        rgba(234, 181, 67, 0.14) 60deg,
        rgba(234, 181, 67, 0) 82deg);
    animation: hbBeam 20s linear infinite;
}
@keyframes hbBeam { to { transform: rotate(360deg); } }

.hb-ring {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 9999px;
    border: 1px solid rgba(234, 181, 67, 0.35);
    opacity: 0;
    animation: hbPing 6s ease-out infinite;
}
@keyframes hbPing {
    0% { transform: scale(0.15); opacity: 0.7; }
    100% { transform: scale(1.8); opacity: 0; }
}

.hb-packet {
    position: absolute;
    border-radius: 9999px;
    opacity: 0;
    animation: hbRise 12s linear infinite;
    will-change: transform, opacity;
}
@keyframes hbRise {
    0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
    8% { opacity: var(--o); }
    82% { opacity: var(--o); }
    100% { transform: translate(-16px, var(--rise)) scale(1.1); opacity: 0; }
}

.hb-token {
    position: absolute;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: rgba(148, 197, 238, 0.4);
    animation: hbToken 6s ease-in-out infinite;
}
@keyframes hbToken {
    0%, 100% { opacity: 0.08; transform: translateY(0); }
    50% { opacity: 0.4; transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
    .hb-grid-drift, .hb-beam, .hb-ring, .hb-packet, .hb-token { animation: none; }
    .hb-beam, .hb-ring, .hb-packet { opacity: 0; }
    .hb-grid-drift { opacity: 0.5; }
    .hb-token { opacity: 0.35; }
}

/* ---- Pricing redesigned ---- */
.pr-shine {
    background: linear-gradient(110deg, #F5D77E 0%, #EAB543 30%, #FBE7AE 50%, #EAB543 70%, #F5D77E 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: prShine 5s linear infinite;
}
@keyframes prShine {
    to { background-position: -200% 0; }
}

.price-pop {
    display: inline-block;
    animation: pricePop 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pricePop {
    0% { opacity: 0; transform: translateY(10px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.plan-featured {
    border: 1px solid rgba(234, 181, 67, 0.35);
    box-shadow: 0 28px 60px -18px rgba(234, 181, 67, 0.45);
    animation: planGlow 3.6s ease-in-out infinite;
}
.plan-featured:hover {
    transform: translateY(-4px);
}
@media (min-width: 1024px) {
    .plan-featured { margin-top: -1rem; margin-bottom: 1rem; }
}
@keyframes planGlow {
    0%, 100% {
        box-shadow: 0 28px 60px -18px rgba(234, 181, 67, 0.45), 0 0 0 0 rgba(234, 181, 67, 0.28);
    }
    50% {
        box-shadow: 0 28px 60px -18px rgba(234, 181, 67, 0.55), 0 0 0 10px rgba(234, 181, 67, 0);
    }
}

/* ---- Plan card (professional) ---- */
.plan-box::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    background: linear-gradient(160deg, rgba(10, 61, 97, 0.45), rgba(37, 99, 235, 0.12) 55%, rgba(10, 61, 97, 0.4));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.plan-rest:hover::before { opacity: 1; }
.plan-featured::before {
    opacity: 1;
    background: linear-gradient(160deg, rgba(234, 181, 67, 0.95), rgba(245, 215, 126, 0.25) 50%, rgba(234, 181, 67, 0.85));
}

.plan-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary), #0E4A75);
    color: #fff;
    box-shadow: 0 14px 26px -12px rgba(10, 61, 97, 0.55);
    transition: transform 0.3s ease;
}
.plan-icon-gold {
    background: linear-gradient(135deg, #F5D77E, #EAB543);
    color: var(--primary-dark);
    box-shadow: 0 14px 26px -12px rgba(234, 181, 67, 0.6);
}
.plan-rest:hover .plan-icon,
.plan-featured:hover .plan-icon {
    transform: translateY(-4px) scale(1.05) rotate(-3deg);
}

.plan-name {
    font-family: Poppins, Inter, sans-serif;
    font-size: 1.22rem;
    font-weight: 800;
    color: var(--primary-dark);
}
.plan-tag {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #64748B;
    min-height: 2.4rem;
}

.plan-price {
    display: inline-block;
    font-family: Poppins, Inter, sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--primary);
}
.plan-featured .plan-price {
    background: linear-gradient(120deg, #B77E0B, #F59E0B 55%, #D97706);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.plan-currency {
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #94A3B8;
}
.plan-period {
    margin-bottom: 0.42rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #94A3B8;
}
.plan-strike {
    margin-bottom: 0.5rem;
    margin-left: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #CBD5E1;
    text-decoration: line-through;
    text-decoration-color: #FCA5A5;
}
.plan-note {
    margin-top: 0.55rem;
    font-size: 0.72rem;
    font-weight: 500;
    color: #94A3B8;
}

.plan-cta { justify-content: center; }

.plan-listhead {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94A3B8;
}
.plan-count {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.65rem;
    letter-spacing: 0;
    background: var(--primary-soft);
    color: var(--primary);
}
.plan-featured .plan-count {
    background: var(--secondary-soft);
    color: var(--secondary-dark);
}
.plan-li {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    padding: 0.3rem 0.4rem;
    margin: 0 -0.4rem;
    border-radius: 0.55rem;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #475569;
    transition: background 0.2s ease, color 0.2s ease;
}
.plan-li:hover {
    background: var(--bg-soft);
    color: var(--primary-dark);
}
.plan-check {
    flex: none;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-top: 0.15rem;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
}
.plan-featured .plan-check {
    background: var(--secondary-soft);
    color: var(--secondary-dark);
}

.plan-badge::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-20deg);
    animation: planShine 3.2s ease-in-out infinite;
}
@keyframes planShine {
    0%, 55% { left: -75%; }
    100% { left: 125%; }
}

.perk-card {
    text-align: center;
    padding: 30px 20px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.perk-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px -18px rgba(10, 61, 97, 0.22);
    border-color: rgba(10, 61, 97, 0.16);
}
.perk-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), #0E4A75);
    box-shadow: 0 14px 26px -10px rgba(10, 61, 97, 0.5);
    transition: transform 0.3s ease;
}
.perk-card:hover .perk-icon {
    transform: translateY(-4px) rotate(-4deg) scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
    .pr-shine, .price-pop, .plan-featured, .plan-badge::after, .perk-icon { animation: none; }
    .plan-featured { animation: none; }
    .plan-icon, .plan-li, .plan-box::before { transition: none; }
}

/* ---- Plans control bar ---- */
.pl-panel {
    max-width: 860px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: 0 18px 44px -22px rgba(10, 61, 97, 0.2);
    padding: 18px 20px;
}
.pl-rows { display: flex; flex-direction: column; gap: 14px; }

.pl-regions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pl-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 15px 9px 11px;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    background: #fff;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
}
.pl-chip:hover {
    border-color: rgba(10, 61, 97, 0.35);
    transform: translateY(-1px);
}
.pl-chip-active {
    background: linear-gradient(135deg, var(--primary), #0E4A75);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 22px -10px rgba(10, 61, 97, 0.55);
}

.pl-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); }

.pl-segs { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; }
.pl-seg {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 4px;
    gap: 4px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 999px;
}
.pl-seg-btn {
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 800;
    color: #64748B;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.pl-seg-active {
    background: #fff;
    color: var(--primary);
    box-shadow: 0 6px 14px -6px rgba(10, 61, 97, 0.35);
}
.pl-save {
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    color: var(--secondary-dark);
    background: var(--secondary-soft);
}

.pl-region-note {
    text-align: center;
    margin-top: 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: #64748B;
}

.pl-domain-note {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 26px auto 0;
    max-width: 600px;
    padding: 11px 18px;
    border-radius: 999px;
    background: var(--secondary-soft);
    border: 1px dashed rgba(234, 181, 67, 0.55);
    color: var(--primary-dark);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    animation: plPulse 2.8s ease-in-out infinite;
}
@keyframes plPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(234, 181, 67, 0.45); }
    50% { box-shadow: 0 0 0 9px rgba(234, 181, 67, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .pl-domain-note { animation: none; }
    .pl-chip:hover { transform: none; }
}

/* ---- Performance breakdown ---- */
.pf-grid {
    background-image:
        linear-gradient(rgba(10, 61, 97, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10, 61, 97, 0.05) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(closest-side at 50% 30%, #000, transparent 85%);
    mask-image: radial-gradient(closest-side at 50% 30%, #000, transparent 85%);
}

.pf-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.4);
    color: #F87171;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.pf-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #F87171;
    animation: pfLiveDot 1.4s ease-in-out infinite;
}
@keyframes pfLiveDot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.6); }
    50% { box-shadow: 0 0 0 6px rgba(248, 113, 113, 0); }
}

.pf-stat {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 18px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.pf-stat:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px -18px rgba(10, 61, 97, 0.22);
    border-color: rgba(10, 61, 97, 0.16);
}
.pf-stat-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--bg-soft);
}

.pf-dash .pf-line {
    stroke-dasharray: 460;
    stroke-dashoffset: 460;
}
.pf-dash.in-view .pf-line { animation: pfLine 1.6s ease forwards; }
@keyframes pfLine { to { stroke-dashoffset: 0; } }

.pf-dot {
    stroke-dasharray: 1 459;
    stroke-dashoffset: 0;
    opacity: 0.95;
}
.pf-dash.in-view .pf-dot { animation: pfDash 2.8s linear infinite; }
@keyframes pfDash { to { stroke-dashoffset: -460; } }

.pf-pulse { animation: pfPulse 1.6s ease-in-out infinite; }
@keyframes pfPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.pf-scan {
    width: 70px;
    transform: translateX(-90px);
    background: linear-gradient(90deg, transparent, rgba(234, 181, 67, 0.06), rgba(234, 181, 67, 0.14), rgba(234, 181, 67, 0.06), transparent);
}
.pf-dash.in-view .pf-scan { animation: pfScan 4s linear infinite; }
@keyframes pfScan {
    to { transform: translateX(calc(100% + 160px)); }
}

.pf-meter-fill {
    height: 100%;
    transform: scaleX(0);
    transform-origin: left;
}
.pf-dash.in-view .pf-meter-fill {
    animation: pfFill 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: var(--d, 0s);
}
@keyframes pfFill {
    to { transform: scaleX(var(--pct, 0.9)); }
}

.pf-log { display: block; opacity: 0.35; }
.pf-dash.in-view .pf-log {
    animation: pfLog 7s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}
@keyframes pfLog {
    0%, 10% { opacity: 0; transform: translateY(4px); }
    22%, 76% { opacity: 1; transform: translateY(0); }
    92%, 100% { opacity: 0; }
}

.pf-chip {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    color: #0A3D61;
    background: rgba(245, 215, 126, 0.95);
    box-shadow: 0 10px 24px -8px rgba(234, 181, 67, 0.6);
    pointer-events: none;
}
.pf-float { animation: hbFloat 5.5s ease-in-out infinite; }

@media (max-width: 640px) {
    .pf-live { font-size: 9px; padding: 3px 9px; }
    .pf-live-dot { width: 5px; height: 5px; }
    .pf-chip { font-size: 10px; padding: 4px 10px; }
    .pf-stat { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .pf-live-dot, .pf-dot, .pf-pulse, .pf-scan, .pf-log, .pf-float, .pf-chip { animation: none; }
    .pf-dash .pf-line { stroke-dasharray: none; stroke-dashoffset: 0; }
    .pf-dash .pf-meter-fill { transform: scaleX(var(--pct, 0.9)); }
}

/* ============ Web Hosting page ============ */
.wh-term .pf-log { opacity: 0; }
.wh-term .pf-log {
    animation: whLog 6s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}
@keyframes whLog {
    0%, 8% { opacity: 0; transform: translateY(4px); }
    18%, 76% { opacity: 1; transform: translateY(0); }
    92%, 100% { opacity: 0; }
}

.wh-term::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(rgba(255, 255, 255, 0.045) 50%, transparent 50%);
    background-size: 100% 3px;
    mix-blend-mode: overlay;
    opacity: 0.5;
}

.wh-step {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 22px;
    padding: 28px 24px;
    box-shadow: 0 12px 30px -18px rgba(10, 61, 97, 0.18);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.wh-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 44px -18px rgba(10, 61, 97, 0.28);
}
.wh-step-num {
    position: absolute;
    top: -6px;
    right: 14px;
    font-family: var(--font-heading);
    font-size: 84px;
    font-weight: 900;
    line-height: 1;
    color: rgba(10, 61, 97, 0.06);
    user-select: none;
}
.wh-step-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #B7791F 0%, #EAB543 100%);
    box-shadow: 0 12px 24px -10px rgba(234, 181, 67, 0.55);
}
.wh-step-title {
    margin-top: 18px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 17px;
    color: var(--primary-dark);
}
.wh-step-text {
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.65;
    color: #64748b;
}

@media (prefers-reduced-motion: reduce) {
    .wh-term .pf-log { opacity: 0.8; animation: none; }
    .wh-step { transition: none; }
    .wh-step:hover { transform: none; }
}

/* ============ Animated footer background ============ */
.ft-grid {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 60px 60px;
    -webkit-mask-image: radial-gradient(closest-side at 50% 0%, #000 10%, transparent 95%);
    mask-image: radial-gradient(closest-side at 50% 0%, #000 10%, transparent 95%);
    animation: ftGridDrift 26s linear infinite;
}
@keyframes ftGridDrift {
    to { background-position: 0 60px; }
}

.ft-orb-a { animation: ftOrbA 16s ease-in-out infinite; }
.ft-orb-b { animation: ftOrbB 20s ease-in-out infinite; }
.ft-orb-c { animation: ftOrbC 18s ease-in-out infinite; }

@keyframes ftOrbA {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(40px, 30px) scale(1.12); }
    66% { transform: translate(-20px, 50px) scale(0.95); }
}
@keyframes ftOrbB {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-50px, -35px) scale(1.18); }
}
@keyframes ftOrbC {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -40px) scale(1.08); }
}

/* Slow diagonal light sweep across the footer */
.ft-sweep {
    background: linear-gradient(115deg,
        transparent 0%,
        rgba(234, 181, 67, 0.05) 45%,
        rgba(56, 189, 248, 0.06) 55%,
        transparent 100%);
    background-size: 220% 220%;
    animation: ftSweep 14s ease-in-out infinite;
    mix-blend-mode: screen;
}
@keyframes ftSweep {
    0%, 100% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
}

/* Gently rising light motes */
.ft-mote {
    position: absolute;
    bottom: 0;
    border-radius: 9999px;
    opacity: 0;
    animation: ftMote 9s linear infinite;
}
@keyframes ftMote {
    0% { transform: translateY(0) scale(0.6); opacity: 0; }
    12% { opacity: var(--o, 0.5); }
    85% { opacity: var(--o, 0.5); }
    100% { transform: translateY(-460px) scale(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ft-grid, .ft-orb-a, .ft-orb-b, .ft-orb-c, .ft-sweep, .ft-mote { animation: none; }
    .ft-orb-a, .ft-orb-b, .ft-orb-c, .ft-mote { opacity: 0; }
    .ft-sweep { opacity: 0.4; }
}
/* ============ Domain page ============ */

/* Sheen sweep across the search console */
.dm-sheen {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}
.dm-sheen::after {
    content: '';
    position: absolute;
    top: -20%;
    bottom: -20%;
    width: 34%;
    left: -50%;
    transform: skewX(-18deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    animation: dsSheen 4.5s ease-in-out infinite;
}

/* Floating badge in console */
@keyframes dmFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.dm-float-wrap { animation: dmFloat 6s ease-in-out infinite; }
.dm-badge { animation: dmFloat 6.5s ease-in-out infinite; }

/* Pricing table rows on hover lift */
.dm-table > div { border-radius: 12px; }
.dm-tld-gold {
    background: linear-gradient(135deg, #F5D77E, #EAB543);
    color: var(--primary-dark);
    box-shadow: 0 10px 20px -10px rgba(234, 181, 67, 0.6);
}

/* Tier tab content swap-in */
.dm-swap {
    animation: dmSwap 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes dmSwap {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* How-it-works step card */
.dm-step { overflow: hidden; }
.dm-step-num {
    position: absolute;
    top: -10px;
    right: 16px;
    font-family: Poppins, Inter, sans-serif;
    font-size: 84px;
    font-weight: 900;
    line-height: 1;
    color: rgba(10, 61, 97, 0.06);
    user-select: none;
}

/* Ambient orb */
.dm-orb { animation: dsOrbA 16s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .dm-sheen::after, .dm-float-wrap, .dm-badge, .dm-swap, .dm-orb { animation: none; }
}

/* ============ WordPress Hosting page ============ */

/* Animated performance meters (grow once in-view) */
.wh-console .wh-meter {
    width: 100%;
    background: linear-gradient(90deg, #B7791F, #EAB543, #F5D77E);
    transform: scaleX(0);
    transform-origin: left;
    box-shadow: 0 0 12px rgba(234, 181, 67, 0.5);
}
.wh-console.in-view .wh-meter {
    animation: whMeter 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: var(--d, 0s);
}
@keyframes whMeter {
    to { transform: scaleX(var(--pct, 0.9)); }
}

/* Terminal log lines fade in sequentially + stay */
.wh-console .wh-log { opacity: 0; }
.wh-console.in-view .wh-log {
    animation: whLogIn 0.6s ease forwards;
    animation-delay: var(--d, 0s);
}
@keyframes whLogIn {
    0%   { opacity: 0; transform: translateY(4px); }
    100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .wh-console .wh-meter { transform: scaleX(var(--pct, 0.9)); }
    .wh-console .wh-log { opacity: 1; }
}

/* ============ Footer redesign ============ */

/* Link hover slide-in */
.ft-link {
    width: fit-content;
    transition: transform 0.25s ease;
}
.ft-link:hover {
    transform: translateX(4px);
}

/* Social icon hover pop */
.ft-social {
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.ft-social:hover {
    transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
    .ft-link, .ft-social { transition: none; }
}


/* ============ Payment section ============ */

/* Infinite scroll marquee of payment methods */
.pm-track {
    width: max-content;
    animation: pmScroll 34s linear infinite;
}
@keyframes pmScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (hover: hover) {
    .pm-track:hover { animation-play-state: paused; }
}

/* Payment card */
.pm-card {
    flex: none;
    padding: 14px 20px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #E4E9F0;
    box-shadow: 0 8px 20px -14px rgba(10, 61, 97, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.pm-card:hover {
    transform: translateY(-5px);
    border-color: rgba(10, 61, 97, 0.2);
    box-shadow: 0 18px 36px -16px rgba(10, 61, 97, 0.28);
}
.pm-logo-wrap {
    display: grid;
    place-items: center;
    width: 56px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 6px;
    background: #F8FAFC;
    border: 1px solid #EEF2F7;
    padding: 4px;
    overflow: hidden;
}
.pm-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Review platform logos */
.rp-slot {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 140px;
    height: 44px;
    border-radius: 10px;
    background: #FBFCFF;
    border: 1px solid #EEF2F7;
    padding: 4px 6px;
    overflow: hidden;
}
.rp-logo {
    display: block;
    width: 132px;
    height: 34px;
    object-fit: contain;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.group:hover .rp-logo { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
    .pm-track { animation-play-state: paused; }
    .pm-card { transition: none; }
}
/* ============================================================
   Page Banner — animated slider
   ============================================================ */
.pb-root {
    position: relative;
    overflow: hidden;
    padding: 84px 0 96px;
    color: #fff;
    isolation: isolate;
}
.pb-compact { padding: 60px 0 70px; }

.pb-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.pb-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(130% 120% at 50% 0%, #000 30%, transparent 100%);
            mask-image: radial-gradient(130% 120% at 50% 0%, #000 30%, transparent 100%);
    animation: pb-grid-drift 26s linear infinite;
}
@keyframes pb-grid-drift { 0% { background-position: 0 0; } 100% { background-position: 46px 46px; } }

.pb-beam {
    position: absolute; inset: 0;
    background: conic-gradient(from 180deg at 50% -20%,
        transparent 0deg, rgba(234,181,67,0.16) 40deg, transparent 90deg,
        transparent 180deg, rgba(56,189,248,0.12) 220deg, transparent 280deg);
    animation: pb-beam 16s ease-in-out infinite;
}
@keyframes pb-beam { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } }

.pb-glow { position: absolute; border-radius: 9999px; filter: blur(90px); opacity: .28; }
.pb-glow-gold { width: 34rem; height: 34rem; top: -12rem; right: -8rem; background: var(--secondary); animation: pb-float 14s ease-in-out infinite; }
.pb-glow-blue { width: 30rem; height: 30rem; bottom: -14rem; left: -10rem; background: #2563EB; animation: pb-float 18s ease-in-out infinite reverse; }
@keyframes pb-float { 0%,100% { transform: translate(0,0); } 50% { transform: translate(30px,-26px); } }

.pb-particles { position: absolute; inset: 0; }
.pb-particle {
    position: absolute; border-radius: 50%; opacity: var(--o);
    animation-name: pb-rise; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes pb-rise {
    0% { transform: translateY(0) scale(1); opacity: var(--o); }
    100% { transform: translateY(-140px) scale(0.4); opacity: 0; }
}

.pb-root .container-x { position: relative; z-index: 1; }

.pb-stage { position: relative; min-height: 460px; }

.pb-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s ease, transform .7s ease; transform: translateX(24px); }
.pb-slide.is-active { opacity: 1; visibility: visible; transform: translateX(0); z-index: 2; }

.pb-slide-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.9fr;
    gap: 56px;
    align-items: center;
    min-height: 100%;
}
.pb-center { grid-template-columns: 1fr; text-align: center; justify-items: center; }

.pb-copy-anim > *, .pb-visual-anim > * {
    animation: pb-in-up .8s cubic-bezier(.22,1,.36,1) both;
}
.pb-copy-anim > *:nth-child(1) { animation-delay: .02s; }
.pb-copy-anim > *:nth-child(2) { animation-delay: .12s; }
.pb-copy-anim > *:nth-child(3) { animation-delay: .22s; }
.pb-copy-anim > *:nth-child(4) { animation-delay: .32s; }
.pb-copy-anim > *:nth-child(5) { animation-delay: .42s; }
@keyframes pb-in-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }

.pb-eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 8px 16px; border-radius: 999px;
    font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: #fff; background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(8px);
}
.pb-title {
    margin: 22px 0 0; font-size: clamp(2rem, 4.4vw, 3.4rem);
    font-weight: 800; line-height: 1.08; letter-spacing: -0.01em; color: #fff;
    font-family: var(--heading-font, 'Poppins', sans-serif);
}
.pb-highlight {
    position: relative; white-space: nowrap; color: var(--pb-accent, var(--secondary));
}
.pb-highlight::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 8px; z-index: -1;
    background: linear-gradient(90deg, transparent, rgba(234,181,67,0.28), transparent);
}
.pb-subtitle { margin: 20px 0 0; max-width: 36rem; font-size: 1.05rem; line-height: 1.8; color: #C9D3DE; }
.pb-center .pb-subtitle { margin-left: auto; margin-right: auto; }

.pb-actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }
.pb-center .pb-actions { justify-content: center; }

.pb-points { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px 26px; }
.pb-center .pb-points { justify-content: center; }
.pb-point { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: #D7DFE7; }
.pb-point-check { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 9999px; }

/* Visual */
.pb-visual { position: relative; }
.pb-visual-anim { position: relative; animation-delay: .18s; }
.pb-visual-inner { position: relative; min-height: 330px; }

.pb-orb { position: absolute; border-radius: 50%; filter: blur(2px); }
.pb-orb-a { width: 300px; height: 300px; top: -40px; right: -30px; opacity: .5; animation: pb-orb 12s ease-in-out infinite; }
.pb-orb-b { width: 230px; height: 230px; bottom: -40px; left: -30px; opacity: .35; animation: pb-orb 16s ease-in-out infinite reverse; }
@keyframes pb-orb { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(20px,-20px) scale(1.08); } }

.pb-card-main {
    position: relative; z-index: 2;
    max-width: 420px; margin-left: auto;
    padding: 22px; border-radius: 24px;
    background: linear-gradient(150deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 70px -20px rgba(0,0,0,0.5);
    transform: rotate(-2deg);
    animation: pb-card-float 6s ease-in-out infinite;
}
@keyframes pb-card-float { 0%,100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(-1deg) translateY(-10px); } }
.pb-chip-live {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 800; letter-spacing: .08em;
    padding: 4px 9px; border-radius: 999px;
}
.pb-card-cell {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 14px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    animation: pb-in-up .7s cubic-bezier(.22,1,.36,1) both; animation-delay: .1s;
}
.pb-cell-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; }
.pb-cell-label { font-size: 11px; font-weight: 700; color: #EAF0F5; }

.pb-chip-float {
    position: absolute; z-index: 3;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 14px; border-radius: 14px;
    background: rgba(11,18,32,0.85); border: 1px solid rgba(255,255,255,0.12);
    font-size: 11px; font-weight: 800; box-shadow: 0 16px 40px -12px rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
}
.pb-chip-f1 { top: -14px; left: 8%; animation: pb-float 7s ease-in-out infinite; }
.pb-chip-f2 { bottom: 6px; right: -6px; color: #34D399; animation: pb-float 9s ease-in-out infinite reverse; }

/* Server visual */
.pb-card-server {
    position: relative; z-index: 2;
    max-width: 420px; margin-left: auto;
    padding: 22px; border-radius: 24px;
    background: linear-gradient(150deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 70px -20px rgba(0,0,0,0.5);
    transform: rotate(1deg);
    animation: pb-card-float 7s ease-in-out infinite;
}
.pb-server-row {
    padding: 10px 12px; border-radius: 14px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    animation: pb-in-up .7s cubic-bezier(.22,1,.36,1) both;
}
.pb-server-bar {
    height: 4px; border-radius: 999px;
    background: rgba(255,255,255,0.1);
    overflow: hidden;
}
.pb-server-bar-fill {
    height: 100%; border-radius: 999px;
    transform-origin: left;
    animation: pb-bar-grow .9s cubic-bezier(.22,1,.36,1) both;
}
@keyframes pb-bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Profit visual */
.pb-card-profit {
    position: relative; z-index: 2;
    max-width: 420px; margin-left: auto;
    padding: 22px; border-radius: 24px;
    background: linear-gradient(150deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 70px -20px rgba(0,0,0,0.5);
    transform: rotate(-1deg);
    animation: pb-card-float 8s ease-in-out infinite;
}
.pb-profit-metric {
    padding: 10px; border-radius: 14px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    text-align: center;
    animation: pb-in-up .7s cubic-bezier(.22,1,.36,1) both;
}
.pb-profit-client {
    padding: 8px 12px; border-radius: 12px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
    animation: pb-in-up .6s cubic-bezier(.22,1,.36,1) both;
}

/* Brand visual */
.pb-card-brand {
    position: relative; z-index: 2;
    max-width: 420px; margin-left: auto;
    padding: 22px; border-radius: 24px;
    background: linear-gradient(150deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 70px -20px rgba(0,0,0,0.5);
    transform: rotate(-1.5deg);
    animation: pb-card-float 7.5s ease-in-out infinite;
}
.pb-brand-browser {
    border-radius: 14px; overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.25);
}
.pb-brand-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.pb-brand-content {
    padding: 14px;
}
.pb-brand-row {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    animation: pb-in-up .6s cubic-bezier(.22,1,.36,1) both;
}
.pb-brand-icon {
    display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0;
}

/* Speed visual */
.pb-card-speed {
    position: relative; z-index: 2;
    max-width: 420px; margin-left: auto;
    padding: 22px; border-radius: 24px;
    background: linear-gradient(150deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 70px -20px rgba(0,0,0,0.5);
    transform: rotate(-1.5deg);
    animation: pb-card-float 7s ease-in-out infinite;
}
.pb-speed-row {
    padding: 10px 12px; border-radius: 14px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    animation: pb-in-up .7s cubic-bezier(.22,1,.36,1) both;
}

/* Security visual */
.pb-card-security {
    position: relative; z-index: 2;
    max-width: 420px; margin-left: auto;
    padding: 22px; border-radius: 24px;
    background: linear-gradient(150deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 70px -20px rgba(0,0,0,0.5);
    transform: rotate(1deg);
    animation: pb-card-float 8s ease-in-out infinite;
}
.pb-sec-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 14px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    animation: pb-in-up .7s cubic-bezier(.22,1,.36,1) both;
}
.pb-sec-icon {
    display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
}
.pb-sec-stat {
    padding: 12px; border-radius: 14px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    text-align: center;
    animation: pb-in-up .6s cubic-bezier(.22,1,.36,1) both;
}

/* WP visual */
.pb-card-wp {
    position: relative; z-index: 2;
    max-width: 420px; margin-left: auto;
    padding: 22px; border-radius: 24px;
    background: linear-gradient(150deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 70px -20px rgba(0,0,0,0.5);
    transform: rotate(-2deg);
    animation: pb-card-float 7.5s ease-in-out infinite;
}
.pb-wp-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 12px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
    animation: pb-in-up .6s cubic-bezier(.22,1,.36,1) both;
}
.pb-wp-icon {
    display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
}

/* Performance visual */
.pb-card-perf {
    position: relative; z-index: 2;
    max-width: 420px; margin-left: auto;
    padding: 22px; border-radius: 24px;
    background: linear-gradient(150deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 70px -20px rgba(0,0,0,0.5);
    transform: rotate(1.5deg);
    animation: pb-card-float 8s ease-in-out infinite;
}
.pb-perf-row {
    padding: 10px 12px; border-radius: 14px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    animation: pb-in-up .7s cubic-bezier(.22,1,.36,1) both;
}
.pb-perf-stat {
    padding: 10px; border-radius: 12px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    text-align: center;
    animation: pb-in-up .6s cubic-bezier(.22,1,.36,1) both;
}

/* Managed visual */
.pb-card-managed {
    position: relative; z-index: 2;
    max-width: 420px; margin-left: auto;
    padding: 22px; border-radius: 24px;
    background: linear-gradient(150deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 70px -20px rgba(0,0,0,0.5);
    transform: rotate(-1.5deg);
    animation: pb-card-float 8s ease-in-out infinite;
}
.pb-managed-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 14px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    animation: pb-in-up .7s cubic-bezier(.22,1,.36,1) both;
}
.pb-managed-row.is-active {
    background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14);
}
.pb-managed-icon {
    display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
}
.pb-managed-stat {
    display: flex; align-items: center; gap: 8px;
    padding: 10px; border-radius: 12px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    text-align: center; justify-content: center;
    animation: pb-in-up .6s cubic-bezier(.22,1,.36,1) both;
}

/* Terminal / VPS visual */
.pb-card-terminal {
    position: relative; z-index: 2;
    max-width: 420px; margin-left: auto;
    padding: 18px; border-radius: 24px;
    background: linear-gradient(150deg, rgba(0,0,0,0.6), rgba(0,0,0,0.3));
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 70px -20px rgba(0,0,0,0.5);
    transform: rotate(1deg);
    animation: pb-card-float 7s ease-in-out infinite;
}
.pb-term-line {
    animation: pb-in-up .5s cubic-bezier(.22,1,.36,1) both;
}
.pb-cursor {
    display: inline-block; width: 7px; height: 14px;
    border-radius: 2px; vertical-align: text-bottom;
    animation: pb-blink 1s step-end infinite;
}
@keyframes pb-blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

/* Regions visual */
.pb-card-regions {
    position: relative; z-index: 2;
    max-width: 420px; margin-left: auto;
    padding: 22px; border-radius: 24px;
    background: linear-gradient(150deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 70px -20px rgba(0,0,0,0.5);
    transform: rotate(-1deg);
    animation: pb-card-float 8s ease-in-out infinite;
}
.pb-region-dot {
    position: absolute; z-index: 2;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    animation: pb-in-up .6s cubic-bezier(.22,1,.36,1) both;
}
.pb-region-pulse {
    width: 10px; height: 10px; border-radius: 50%;
    animation: pb-region-ping 2s ease-out infinite;
}
@keyframes pb-region-ping {
    0% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 currentColor; }
    70% { transform: scale(1); opacity: 0.7; box-shadow: 0 0 0 8px transparent; }
    100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 transparent; }
}
.pb-region-label {
    display: flex; flex-direction: column; align-items: center;
    padding: 3px 6px; border-radius: 6px;
    background: rgba(0,0,0,0.7); border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(8px); white-space: nowrap;
}
.pb-region-card {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: 10px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
    animation: pb-in-up .5s cubic-bezier(.22,1,.36,1) both;
}

/* Controls */
.pb-stage.is-paused .pb-dot-fill.is-paused { animation-play-state: paused; }
.pb-arrows {
    position: absolute; right: 0; bottom: 6px; z-index: 5;
    display: flex; gap: 10px;
}
.pb-arrow {
    width: 44px; height: 44px; border-radius: 9999px;
    display: grid; place-items: center; color: #fff;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
    backdrop-filter: blur(8px); cursor: pointer; transition: all .25s ease;
}
.pb-arrow:hover { background: rgba(255,255,255,0.18); transform: scale(1.06); }

.pb-dots {
    position: absolute; left: 0; bottom: 14px; z-index: 5;
    display: flex; align-items: center; gap: 8px;
}
.pb-dot-wrap { display: flex; align-items: center; height: 18px; padding: 0 1px; cursor: pointer; }
.pb-dot { position: relative; display: block; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.22); overflow: hidden; width: 18px; transition: width .3s ease; }
.pb-dot.is-active { width: 40px; background: rgba(255,255,255,0.3); }
.pb-dot-fill { display: block; height: 100%; border-radius: 999px; width: 100%; transform-origin: left; animation-name: pb-progress; animation-timing-function: linear; animation-fill-mode: both; }
.pb-dot-fill.is-paused { animation-play-state: paused; }
@keyframes pb-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 1023px) {
    .pb-root { padding: 64px 0 92px; }
    .pb-compact { padding: 52px 0 64px; }
    .pb-stage { min-height: 0; }
    .pb-slide { position: relative; inset: auto; }
    .pb-slide:not(.is-active) { display: none; }
    .pb-slide-grid { grid-template-columns: 1fr; gap: 40px; padding-bottom: 44px; }
    .pb-visual { max-width: 460px; margin: 0 auto; width: 100%; }
    .pb-card-main, .pb-card-server, .pb-card-profit, .pb-card-brand, .pb-card-speed,
    .pb-card-security, .pb-card-wp, .pb-card-perf, .pb-card-managed, .pb-card-terminal,
    .pb-card-regions { margin: 0 auto; }
    .pb-arrows { bottom: 8px; }
    .pb-dots { bottom: 26px; }
}
@media (max-width: 520px) {
    .pb-title { font-size: clamp(1.7rem, 7vw, 2.3rem); }
    .pb-actions { flex-direction: column; align-items: stretch; }
    .pb-actions .btn { justify-content: center; }
    .pb-chip-f1 { left: 0; }
    .pb-chip-f2 { right: 0; }
}

/* ============================================================
   Knowledgebase
   ============================================================ */
.kb-particles { position: absolute; inset: 0; pointer-events: none; }
.kb-particle {
    position: absolute; width: 4px; height: 4px; border-radius: 50%;
    background: rgba(255,255,255,0.4);
    animation: kb-rise linear infinite;
}
@keyframes kb-rise {
    0% { transform: translateY(40px) scale(1); opacity: 0; }
    15% { opacity: 0.5; }
    100% { transform: translateY(-160px) scale(0.3); opacity: 0; }
}

.kb-card { position: relative; overflow: hidden; }
.kb-card::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(135deg, rgba(10,61,97,0.04), transparent 55%);
    opacity: 0; transition: opacity .3s ease;
}
.kb-card:hover::before { opacity: 1; }
.kb-card > * { position: relative; z-index: 1; }

.kb-modal { animation: kb-modal-in .35s cubic-bezier(.22,1,.36,1) both; }
@keyframes kb-modal-in {
    from { opacity: 0; transform: translateY(24px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.kb-modal-sheen {
    background: linear-gradient(115deg, transparent 30%, rgba(234,181,67,0.06) 45%, rgba(56,189,248,0.05) 55%, transparent 70%);
    background-size: 250% 250%;
    animation: kb-sheen 6s ease-in-out infinite;
}
@keyframes kb-sheen { 0% { background-position: 130% 0; } 100% { background-position: -30% 0; } }


/* ============================================================
   Client Area (hostx-style)
   ============================================================ */
.hostx-container { max-width: 1280px; margin: 0 auto; padding: 0 20px; width: 100%; }

/* Top bar */
.hostx-topbar { background: #0d1925; }
.hostx-topbar-inner { display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
.hostx-topbar-left, .hostx-topbar-right { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.hostx-topbar-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: #cfd6df; font-size: 12.5px; padding: 6px 10px; transition: color .2s ease;
}
.hostx-topbar-link:hover { color: #fff; }
.hostx-sep { width: 1px; height: 16px; background: rgba(255,255,255,0.14); margin: 0 4px; }

/* Main bar */
.hostx-mainbar { background: #ffffff; border-bottom: 1px solid #e7e7e7; position: sticky; top: 0; z-index: 40; }
.hostx-mainbar-inner { display: flex; align-items: center; min-height: 70px; gap: 12px; }
.hostx-brand-link { display: block; }
.hostx-logo img { max-height: 42px; }
.hostx-btn-login {
    display: inline-flex; align-items: center; gap: 8px;
    background: #0d1925; color: #fff; font-size: 13px; font-weight: 600;
    padding: 9px 16px; border-radius: 6px; transition: background .2s ease;
}
.hostx-btn-login:hover { background: #f37660; }
.hostx-icon-btn {
    display: grid; place-items: center; width: 38px; height: 38px; border-radius: 6px;
    color: #45505c; background: #f2f2f2; transition: all .2s ease;
}
.hostx-icon-btn:hover { background: #f37660; color: #fff; }

/* Body */
.hostx-body { display: flex; align-items: flex-start; gap: 26px; padding-top: 30px; padding-bottom: 60px; }
.hostx-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,0.45); }

/* Sidebar */
.hostx-sidebar { width: 262px; flex-shrink: 0; background: #f5f2f2; }
.hostx-side-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #e3e0e0; }
.hostx-side-list { list-style: none; margin: 0; padding: 6px 0; }
.hostx-side-item { margin: 0; }
.hostx-side-item.active > .hostx-side-link { background: #ffffff; color: #0d1925; font-weight: 600; border-left: 3px solid #f37660; }
.hostx-side-link {
    display: flex; align-items: center; gap: 4px;
    color: #0d1925; font-size: 14px; padding: 11px 14px; transition: background .15s ease;
    border-left: 3px solid transparent;
}
.hostx-side-link:hover { background: #f7f5f6; text-decoration: none; }
.hostx-side-icn { width: 30px; text-align: center; color: #f37660; display: grid; place-items: center; }
.hostx-side-sub { list-style: none; margin: 0; padding: 0 0 10px; display: none; background: #f5f2f2; }
.hostx-side-sub.open { display: block; }
.hostx-side-sub li a {
    display: block; color: #4a4a4a; font-size: 13px;
    padding: 8px 14px 8px 46px; border-left: 3px solid transparent; transition: all .15s ease;
}
.hostx-side-sub li a:hover { background: #eeecec; color: #0d1925; }
.hostx-side-sub li a.active { color: #f37660; font-weight: 600; }

/* Content */
.hostx-content { flex: 1; min-width: 0; }
.hostx-pagehead { margin-bottom: 22px; }
.hostx-pagehead-title { font-family: Poppins, sans-serif; font-size: 23px; font-weight: 700; color: #0d1925; line-height: 1.2; margin: 0; }
.hostx-pagehead-sub { color: #8a8a8a; font-size: 13px; margin-top: 3px; }

/* Dashboard widget card (hostx) */
.hx-dash { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 10px; }
.hx-card {
    background: #fff; position: relative; min-height: 260px;
    box-shadow: 0 .3px .9px rgba(0,0,0,.108), 0 1.6px 3.6px rgba(0,0,0,.132);
    display: flex; flex-direction: column;
}
.hx-card-head {
    height: 65px; padding: 0 20px; display: flex; align-items: center;
    border-bottom: 1px solid #e6e6e6;
}
.hx-card-title { font-family: Poppins, sans-serif; font-size: 16px; color: #272727; font-weight: 600; }
.hx-card-body { padding: 12px 20px; flex: 1; }
.hx-card-num { font-family: 'Source Sans Pro', Arial, sans-serif; font-size: 22px; font-weight: 700; color: #0d1925; line-height: 1.2; }
.hx-card-num small { font-size: 14px; font-weight: 600; color: #4a4a4a; }
.hx-card-desc { color: #8a8a8a; font-size: 12px; margin-top: 4px; line-height: 1.5; }
.hx-card-foot { padding: 0 20px 20px; display: grid; gap: 7px; }
.hx-btn-g {
    width: 100%; background: #e9e9e9; color: #333; font-size: 11px; font-weight: 600;
    padding: 6px 0; text-align: center; display: block; transition: background .15s ease;
}
.hx-btn-g:hover { background: #dcdcdc; color: #0d1925; text-decoration: none; }

/* Generic panels (support_tickets / home panels) */
.hx-panel { background: #fff; box-shadow: 0 .3px .9px rgba(0,0,0,.108), 0 1.6px 3.6px rgba(0,0,0,.132); margin-bottom: 22px; }
.hx-panel-head { padding: 12px 17px; border-bottom: 1px solid #e6e6e6; }
.hx-panel-title { font-family: Poppins, sans-serif; font-size: 16px; color: #272727; font-weight: 600; }
.hx-panel-body { padding: 17px; }
.hx-list { display: flex; flex-direction: column; }
.hx-list a { display: flex; align-items: center; gap: 10px; padding: 12px 2px; border-bottom: 1px solid #f0f0f0; color: #0d1925; font-size: 14px; }
.hx-list a:last-child { border-bottom: 0; }
.hx-list a:hover { color: #f37660; }

/* Badges for statuses */
.hx-badge { display: inline-block; padding: 3px 9px; font-size: 11px; font-weight: 600; border-radius: 3px; text-transform: capitalize; }
.hx-badge-green { background: #e3f5e8; color: #1a8f4d; }
.hx-badge-red { background: #fde8e8; color: #d43a3a; }
.hx-badge-amber { background: #fdf3e0; color: #c07a12; }
.hx-badge-gray { background: #eeeeee; color: #666; }
.hx-badge-blue { background: #e3f0fd; color: #2563a8; }

/* Content table (listings) */
.hx-table { width: 100%; border-collapse: collapse; background: #fff; box-shadow: 0 .3px .9px rgba(0,0,0,.108), 0 1.6px 3.6px rgba(0,0,0,.132); }
.hx-table thead th {
    text-align: left; font-family: Poppins, sans-serif; font-size: 13px; color: #272727; font-weight: 600;
    padding: 13px 16px; border-bottom: 1px solid #e6e6e6; background: #fff;
}
.hx-table tbody td { padding: 13px 16px; font-size: 13.5px; color: #3a3939; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.hx-table tbody tr:hover td { background: #fafafa; }
.hx-table tbody tr:last-child td { border-bottom: 0; }
.hx-table a { color: #f37660; font-weight: 600; }
.hx-table a:hover { text-decoration: underline; }

.hx-grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
.hx-grid-2-eq { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

/* Auth pages */
.hx-auth-wrap { min-height: 100vh; display: flex; flex-direction: column; background: #fafafa; }
.hx-auth-head { padding: 18px 24px; background: #fff; border-bottom: 1px solid #e7e7e7; }
.hx-auth-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.hx-auth-box { width: 100%; max-width: 420px; background: #fff; box-shadow: 0 .3px .9px rgba(0,0,0,.108), 0 1.6px 3.6px rgba(0,0,0,.132); padding: 32px; }
.hx-auth-title { font-family: Poppins, sans-serif; font-size: 21px; font-weight: 700; color: #0d1925; margin: 0 0 4px; }
.hx-auth-sub { color: #8a8a8a; font-size: 13px; margin: 0 0 22px; }
.hx-input { width: 100%; border: 1px solid #ddd; border-radius: 5px; padding: 10px 12px; font-size: 14px; background: #fff; }
.hx-input:focus { outline: none; border-color: #f37660; }
.hx-label { display: block; font-size: 13px; font-weight: 600; color: #0d1925; margin-bottom: 6px; }

/* Footer */
.hostx-footer { background: #0d1925; }
.hostx-footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 26px; padding-bottom: 26px; color: #aab3bf; font-size: 13px; }
.hostx-footer-link { color: #cfd6df; font-size: 13px; }
.hostx-footer-link:hover { color: #f37660; }

@media (max-width: 1024px) {
    .hx-dash { grid-template-columns: repeat(2, 1fr); }
    .hx-grid-2, .hx-grid-2-eq { grid-template-columns: 1fr; }
    .hostx-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 60; transform: translateX(-100%);
        transition: transform .28s ease; overflow-y: auto;
    }
    .hostx-sidebar.open { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,0.2); }
}
@media (max-width: 560px) { .hx-dash { grid-template-columns: 1fr; } }

.bd-flag-wrap {
    position: relative;
    display: inline-block;
    overflow: hidden;
    flex: none;
}
.bd-flag-slice {
    position: absolute;
    top: 0;
    bottom: 0;
    overflow: hidden;
    will-change: transform;
    animation: bdFlagWave 2.4s ease-in-out infinite;
}
@keyframes bdFlagWave {
    0%, 100% { transform: translateY(0); }
    30% { transform: translateY(-7%); }
    70% { transform: translateY(7%); }
}

.announce-flag {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font-size: 1.05em;
    transform-origin: 50% 20%;
    animation: announceFlagWave 1.6s ease-in-out infinite;
}
.announce-flag:nth-of-type(2) {
    animation-delay: 0.3s;
}
@keyframes announceFlagWave {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-10deg) scale(1.12); }
    50% { transform: rotate(0deg) scale(1.2); }
    75% { transform: rotate(10deg) scale(1.12); }
}

/* ================================================================
   SEO Service Page — Premium animated components
   ================================================================ */

/* ── Hero orbs ── */
.seo-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}
.seo-orb--1 {
    width: 500px;
    height: 500px;
    top: -20%;
    right: -10%;
    background: radial-gradient(circle, var(--secondary) 0%, transparent 70%);
    opacity: 0.15;
    animation: seoOrbDrift1 8s ease-in-out infinite alternate;
}
.seo-orb--2 {
    width: 400px;
    height: 400px;
    bottom: -15%;
    left: -8%;
    background: radial-gradient(circle, #2563EB 0%, transparent 70%);
    opacity: 0.12;
    animation: seoOrbDrift2 10s ease-in-out infinite alternate;
}
.seo-orb--3 {
    width: 300px;
    height: 300px;
    top: 40%;
    left: 40%;
    background: radial-gradient(circle, #A78BFA 0%, transparent 70%);
    opacity: 0.08;
    animation: seoOrbDrift3 12s ease-in-out infinite alternate;
}
@keyframes seoOrbDrift1 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-40px, 30px) scale(1.15); }
}
@keyframes seoOrbDrift2 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(30px, -25px) scale(1.1); }
}
@keyframes seoOrbDrift3 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-20px, -30px) scale(1.2); }
}

/* ── Light beams ── */
.seo-beam {
    position: absolute;
    width: 1.5px;
    height: 140%;
    top: -20%;
    background: linear-gradient(to bottom, transparent, var(--secondary), transparent);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}
.seo-beam--1 {
    left: 20%;
    animation: seoBeamSweep 6s ease-in-out infinite;
}
.seo-beam--2 {
    left: 75%;
    animation: seoBeamSweep 6s ease-in-out 3s infinite;
}
@keyframes seoBeamSweep {
    0%, 100% { opacity: 0; transform: translateY(-20%); }
    40% { opacity: 0.15; }
    50% { opacity: 0.15; transform: translateY(20%); }
    60% { opacity: 0.15; }
}

/* ── Floating motes ── */
.seo-mote {
    position: absolute;
    bottom: 10%;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    animation: seoMoteFloat 9s ease-in-out infinite;
}
@keyframes seoMoteFloat {
    0% { opacity: 0; transform: translateY(0) scale(0.6); }
    15% { opacity: 0.55; }
    50% { opacity: 0.55; transform: translateY(-80px) scale(1); }
    85% { opacity: 0.55; }
    100% { opacity: 0; transform: translateY(-140px) scale(0.6); }
}

/* ── Hero badge ── */
.seo-badge {
    backdrop-filter: blur(10px);
    border: 1px solid rgba(234, 181, 67, 0.25);
}

/* ── Browser visual typing ── */
.seo-typing-line {
    opacity: 0;
    transform: translateY(6px);
    animation: seoTypeIn 0.4s ease forwards;
}
.seo-typing-line:nth-child(1) { animation-delay: 0s; }
.seo-typing-line:nth-child(2) { animation-delay: 0.6s; }
.seo-typing-line:nth-child(3) { animation-delay: 1.2s; }
.seo-typing-line:nth-child(4) { animation-delay: 1.8s; }
.seo-typing-line:nth-child(5) { animation-delay: 2.4s; }
.seo-typing-line:nth-child(6) { animation-delay: 3.0s; }
.seo-typing-line:nth-child(7) { animation-delay: 3.6s; }
@keyframes seoTypeIn {
    to { opacity: 1; transform: translateY(0); }
}

.seo-cursor {
    display: inline-block;
    width: 8px;
    height: 16px;
    background: var(--secondary);
    border-radius: 2px;
    animation: seoCursorBlink 1s step-end infinite;
}
@keyframes seoCursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ── Ranking visual items ── */
.seo-rank-item {
    opacity: 0;
    transform: translateX(-12px);
    animation: seoRankSlide 0.5s ease forwards;
}
.seo-rank-item:nth-child(1) { animation-delay: 0.3s; }
.seo-rank-item:nth-child(2) { animation-delay: 0.5s; }
.seo-rank-item:nth-child(3) { animation-delay: 0.7s; }
.seo-rank-item:nth-child(4) { animation-delay: 0.9s; }
.seo-rank-item:nth-child(5) { animation-delay: 1.1s; }
@keyframes seoRankSlide {
    to { opacity: 1; transform: translateX(0); }
}

/* ── Ranking visual container ── */
.seo-ranking-visual {
    animation: seoVisualFloat 6s ease-in-out infinite;
}
@keyframes seoVisualFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ── Process step number pulse ── */
.seo-step-num {
    position: relative;
}
.seo-step-num::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 18px;
    border: 2px solid var(--primary);
    opacity: 0;
    animation: seoStepPulse 3s ease-in-out infinite;
}
.seo-step-num:nth-of-type(1)::after { animation-delay: 0s; }
.seo-step-num:nth-of-type(2)::after { animation-delay: 0.75s; }
.seo-step-num:nth-of-type(3)::after { animation-delay: 1.5s; }
.seo-step-num:nth-of-type(4)::after { animation-delay: 2.25s; }
@keyframes seoStepPulse {
    0%, 100% { opacity: 0; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(1.08); }
}

/* ── Industry chips stagger ── */
.seo-industry-chip {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
}
.in-view .seo-industry-chip {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .seo-orb,
    .seo-beam,
    .seo-mote,
    .seo-typing-line,
    .seo-rank-item,
    .seo-ranking-visual,
    .seo-step-num::after,
    .seo-industry-chip {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .seo-cursor { animation: none !important; opacity: 1; }
}

/* ── SEO pricing plan cards ── */
.seo-plan-popular {
    position: relative;
    animation: seoPlanGlow 4s ease-in-out infinite;
}
@keyframes seoPlanGlow {
    0%, 100% { box-shadow: 0 20px 45px -18px rgba(10, 61, 97, 0.45); }
    50% { box-shadow: 0 20px 55px -14px rgba(10, 61, 97, 0.6); }
}

.seo-plan-popular::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, transparent 30%, rgba(234, 181, 67, 0.18) 50%, transparent 70%);
    background-size: 250% 250%;
    animation: seoPlanShine 6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes seoPlanShine {
    0% { background-position: 120% 50%; opacity: 0; }
    20% { opacity: 1; }
    60% { background-position: 20% 50%; opacity: 1; }
    80%, 100% { background-position: -40% 50%; opacity: 0; }
}

.seo-plan-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
    .seo-plan-popular,
    .seo-plan-popular::before {
        animation: none !important;
    }
}

/* ================================================================
   Server Maintenance Page — Premium animated components
   ================================================================ */

/* ── Hero orbs ── */
.sm-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}
.sm-orb--1 {
    width: 500px;
    height: 500px;
    top: -20%;
    right: -10%;
    background: radial-gradient(circle, var(--secondary) 0%, transparent 70%);
    opacity: 0.15;
    animation: smOrbDrift1 8s ease-in-out infinite alternate;
}
.sm-orb--2 {
    width: 400px;
    height: 400px;
    bottom: -15%;
    left: -8%;
    background: radial-gradient(circle, #2563EB 0%, transparent 70%);
    opacity: 0.12;
    animation: smOrbDrift2 10s ease-in-out infinite alternate;
}
.sm-orb--3 {
    width: 300px;
    height: 300px;
    top: 40%;
    left: 40%;
    background: radial-gradient(circle, #A78BFA 0%, transparent 70%);
    opacity: 0.08;
    animation: smOrbDrift3 12s ease-in-out infinite alternate;
}
@keyframes smOrbDrift1 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-40px, 30px) scale(1.15); }
}
@keyframes smOrbDrift2 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(30px, -25px) scale(1.1); }
}
@keyframes smOrbDrift3 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-20px, -30px) scale(1.2); }
}

/* ── Light beams ── */
.sm-beam {
    position: absolute;
    width: 1.5px;
    height: 140%;
    top: -20%;
    background: linear-gradient(to bottom, transparent, var(--secondary), transparent);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}
.sm-beam--1 {
    left: 20%;
    animation: smBeamSweep 6s ease-in-out infinite;
}
.sm-beam--2 {
    left: 75%;
    animation: smBeamSweep 6s ease-in-out 3s infinite;
}
@keyframes smBeamSweep {
    0%, 100% { opacity: 0; transform: translateY(-20%); }
    40% { opacity: 0.15; }
    50% { opacity: 0.15; transform: translateY(20%); }
    60% { opacity: 0.15; }
}

/* ── Floating motes ── */
.sm-mote {
    position: absolute;
    bottom: 10%;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    animation: smMoteFloat 9s ease-in-out infinite;
}
@keyframes smMoteFloat {
    0% { opacity: 0; transform: translateY(0) scale(0.6); }
    15% { opacity: 0.55; }
    50% { opacity: 0.55; transform: translateY(-80px) scale(1); }
    85% { opacity: 0.55; }
    100% { opacity: 0; transform: translateY(-140px) scale(0.6); }
}

/* ── Hero badge ── */
.sm-badge {
    backdrop-filter: blur(10px);
    border: 1px solid rgba(234, 181, 67, 0.25);
}

/* ── Mini bar chart (CPU usage) ── */
.sm-mini-bar {
    transform-origin: bottom;
    opacity: 0;
    animation: smMiniBarGrow 0.5s ease forwards;
}
@keyframes smMiniBarGrow {
    from { opacity: 0; transform: scaleY(0); }
    to { opacity: 1; transform: scaleY(1); }
}

/* ── Dashboard float ── */
.sm-dash {
    animation: smDashFloat 6s ease-in-out infinite;
}
@keyframes smDashFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ── Process step icons ── */
.sm-step-icon {
    position: relative;
    animation: smStepFloat 4s ease-in-out infinite;
}
.sm-step-icon:nth-of-type(1) { animation-delay: 0s; }
.sm-step-icon:nth-of-type(2) { animation-delay: 1s; }
.sm-step-icon:nth-of-type(3) { animation-delay: 2s; }
.sm-step-icon:nth-of-type(4) { animation-delay: 3s; }
@keyframes smStepFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ── Maintenance plan popular card ── */
.sm-plan-popular {
    position: relative;
    animation: smPlanGlow 4s ease-in-out infinite;
}
@keyframes smPlanGlow {
    0%, 100% { box-shadow: 0 20px 45px -18px rgba(10, 61, 97, 0.45); }
    50% { box-shadow: 0 20px 55px -14px rgba(10, 61, 97, 0.6); }
}

.sm-plan-popular::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, transparent 30%, rgba(234, 181, 67, 0.18) 50%, transparent 70%);
    background-size: 250% 250%;
    animation: smPlanShine 6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes smPlanShine {
    0% { background-position: 120% 50%; opacity: 0; }
    20% { opacity: 1; }
    60% { background-position: 20% 50%; opacity: 1; }
    80%, 100% { background-position: -40% 50%; opacity: 0; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .sm-orb,
    .sm-beam,
    .sm-mote,
    .sm-mini-bar,
    .sm-dash,
    .sm-step-icon,
    .sm-plan-popular,
    .sm-plan-popular::before {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ================================================================
   SysLic License Combo Pricing — Premium animated components
   ================================================================ */

/* ── Hero orbs ── */
.syslic-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}
.syslic-orb--a {
    width: 30rem;
    height: 30rem;
    top: -32%;
    right: 0;
    background: radial-gradient(circle, var(--secondary) 0%, transparent 70%);
    opacity: 0.22;
    animation: syslicOrbA 9s ease-in-out infinite alternate;
}
.syslic-orb--b {
    width: 26rem;
    height: 26rem;
    bottom: -44%;
    left: -8%;
    background: radial-gradient(circle, #2563EB 0%, transparent 70%);
    opacity: 0.2;
    animation: syslicOrbB 11s ease-in-out infinite alternate;
}
.syslic-orb--c {
    width: 18rem;
    height: 18rem;
    top: 20%;
    left: 45%;
    background: radial-gradient(circle, #A78BFA 0%, transparent 70%);
    opacity: 0.14;
    animation: syslicOrbC 13s ease-in-out infinite alternate;
}
@keyframes syslicOrbA {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-60px, 20px) scale(1.15); }
}
@keyframes syslicOrbB {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(40px, -30px) scale(1.1); }
}
@keyframes syslicOrbC {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-30px, -40px) scale(1.2); }
}

/* ── Hero gradient text ── */
.syslic-gradient-text {
    background: linear-gradient(92deg, #F5D77E 0%, var(--secondary) 45%, #F97316 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: syslicGradShift 4s ease-in-out infinite alternate;
}
@keyframes syslicGradShift {
    0% { filter: hue-rotate(0deg) brightness(1); }
    100% { filter: hue-rotate(-15deg) brightness(1.1); }
}

/* ── Floating gold shimmer particles ── */
.syslic-shimmer {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    animation: syslicShimmerRise 8s ease-in-out infinite;
}
@keyframes syslicShimmerRise {
    0% { opacity: 0; transform: translateY(0) scale(0.6); }
    20% { opacity: 0.7; }
    60% { opacity: 0.7; transform: translateY(-120px) scale(1); }
    100% { opacity: 0; transform: translateY(-200px) scale(0.5); }
}

/* ── Hero badge ── */
.syslic-badge {
    backdrop-filter: blur(10px);
    border: 1px solid rgba(234, 181, 67, 0.25);
}

/* ── Billing toggle glider ── */
.syslic-tab-glider {
    left: 6px;
    width: calc(50% - 6px);
    transform: translateX(0);
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.syslic-tab-glider.tab-glider-right {
    left: 50%;
    transform: translateX(0);
}

/* ── Price animation on toggle ── */
.syslic-price {
    display: inline-block;
    animation: syslicPricePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes syslicPricePop {
    0% { opacity: 0; transform: translateY(12px) scale(0.9); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Popular plan card ── */
.syslic-plan-popular {
    position: relative;
    animation: syslicPlanGlow 4s ease-in-out infinite;
}
@keyframes syslicPlanGlow {
    0%, 100% { box-shadow: 0 20px 45px -18px rgba(10, 61, 97, 0.45); }
    50% { box-shadow: 0 20px 55px -14px rgba(10, 61, 97, 0.62); }
}

.syslic-plan-popular::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, transparent 30%, rgba(234, 181, 67, 0.18) 50%, transparent 70%);
    background-size: 250% 250%;
    animation: syslicPlanShine 6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes syslicPlanShine {
    0% { background-position: 120% 50%; opacity: 0; }
    20% { opacity: 1; }
    60% { background-position: 20% 50%; opacity: 1; }
    80%, 100% { background-position: -40% 50%; opacity: 0; }
}

/* ── Comparison table total row pulse ── */
tr .syslic-save-cta {
    animation: syslicSavePulse 2.5s ease-in-out infinite;
}
@keyframes syslicSavePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .syslic-orb,
    .syslic-shimmer,
    .syslic-gradient-text,
    .syslic-price,
    .syslic-plan-popular,
    .syslic-plan-popular::before,
    .syslic-tab-glider {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ================================================================
   SysLic Redesign — License Stack visual + marquee + new cards
   ================================================================ */

/* ── Rotating conic ring behind license stack ── */
.lg-ring {
    position: absolute;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(234, 181, 67, 0.35) 90deg,
        transparent 180deg,
        rgba(37, 99, 235, 0.35) 270deg,
        transparent 360deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    animation: lgRingSpin 14s linear infinite;
    opacity: 0.7;
}
@keyframes lgRingSpin {
    to { transform: rotate(360deg); }
}

/* ── Floating icon chips around the stack ── */
.lg-float-icon {
    position: absolute;
    z-index: 10;
    animation: lgFloatIcon 5s ease-in-out infinite;
}
@keyframes lgFloatIcon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

/* ── License stack card float ── */
.lg-stack-card {
    animation: lgStackFloat 6s ease-in-out infinite;
}
@keyframes lgStackFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* ── Stack rows slide in ── */
.lg-stack-row {
    opacity: 0;
    transform: translateX(-14px);
    animation: lgStackRowIn 0.5s ease forwards;
}
@keyframes lgStackRowIn {
    to { opacity: 1; transform: translateX(0); }
}

/* ── Marquee ── */
.mask-x {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.syslic-marquee-track {
    width: max-content;
    animation: syslicMarquee 28s linear infinite;
}
@keyframes syslicMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .lg-ring,
    .lg-float-icon,
    .lg-stack-card,
    .lg-stack-row,
    .syslic-marquee-track {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ================================================================
   RC License — remote-control console visual + animations
   ================================================================ */

/* ── Rotating conic ring behind RC console ── */
.rc-ring {
    position: absolute;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(234, 181, 67, 0.35) 90deg,
        transparent 180deg,
        rgba(10, 61, 97, 0.35) 270deg,
        transparent 360deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    animation: rcRingSpin 14s linear infinite;
    opacity: 0.7;
}
@keyframes rcRingSpin {
    to { transform: rotate(360deg); }
}

/* ── Console stack rows slide in ── */
.rc-stack-row {
    opacity: 0;
    transform: translateX(-14px);
    animation: rcStackRowIn 0.5s ease forwards;
}
@keyframes rcStackRowIn {
    to { opacity: 1; transform: translateX(0); }
}

/* ── Active status ping ── */
.rc-ping {
    animation: rcPing 1.6s ease-in-out infinite;
}
@keyframes rcPing {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

/* ── Floating corner icons ── */
.rc-float-icon {
    animation: rcFloatIcon 5s ease-in-out infinite;
}
@keyframes rcFloatIcon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ── Marquee ── */
.rc-marquee-track {
    width: max-content;
    animation: rcMarquee 30s linear infinite;
}
@keyframes rcMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
.rc-marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-right: 1rem;
    padding: 0.75rem 1.25rem;
    border-radius: 1rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    white-space: nowrap;
}

/* ── Billing toggle glider ── */
.rc-toggle-glider {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    border-radius: 9999px;
    background: linear-gradient(120deg, var(--primary) 0%, var(--primary-dark) 110%);
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.rc-toggle-glider.rc-toggle-right {
    left: 50%;
}

/* ── Price animation on toggle ── */
.rc-price {
    display: inline-block;
    animation: rcPricePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes rcPricePop {
    0% { opacity: 0; transform: translateY(12px) scale(0.9); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Popular plan card ── */
.rc-plan-popular {
    position: relative;
    animation: rcPlanGlow 4s ease-in-out infinite;
}
@keyframes rcPlanGlow {
    0%, 100% { box-shadow: 0 20px 45px -18px rgba(10, 61, 97, 0.45); }
    50% { box-shadow: 0 20px 55px -14px rgba(10, 61, 97, 0.62); }
}

.rc-plan-popular::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, transparent 30%, rgba(234, 181, 67, 0.18) 50%, transparent 70%);
    background-size: 250% 250%;
    animation: rcPlanShine 6s ease-in-out infinite;
    pointer-events: none;
}
/* id='rcPlanShine' used above -> omitted */
@keyframes rcPlanShine {
    0% { background-position: 120% 50%; opacity: 0; }
    20% { opacity: 1; }
    60% { background-position: 20% 50%; opacity: 1; }
    80%, 100% { background-position: -40% 50%; opacity: 0; }
}

/* ── Tabbed hosting plans ── */
.plans-tab-anim > * {
    animation: plansTabIn 0.5s ease both;
}
@keyframes plansTabIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .rc-ring,
    .rc-stack-row,
    .rc-ping,
    .rc-float-icon,
    .rc-marquee-track,
    .rc-toggle-glider,
    .rc-price,
    .rc-plan-popular,
    .rc-plan-popular::before,
    .plans-tab-anim > * {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ================================================================
   Web Design & Development Service (WebSiteService)
   ================================================================ */

/* -- Browser mockup: stage switch fade/slide -- */
.wds-stage {
    animation: wdsStageIn 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes wdsStageIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* -- Skeleton lines inside the browser preview -- */
.wds-skel {
    border-radius: 0.75rem;
    background: linear-gradient(100deg, rgba(255,255,255,0.05) 40%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0.05) 60%);
    background-size: 200% 100%;
    animation: wdsShimmer 2.2s infinite;
    border: 1px solid rgba(255,255,255,0.06);
}
.wds-line {
    height: 9px;
    border-radius: 9999px;
    background: linear-gradient(100deg, rgba(255,255,255,0.06) 40%, rgba(255,255,255,0.16) 50%, rgba(255,255,255,0.06) 60%);
    background-size: 200% 100%;
    animation: wdsShimmer 2.2s infinite;
}
.wds-line--40 { width: 40%; }
.wds-line--55 { width: 55%; }
.wds-line--65 { width: 65%; }
.wds-line--70 { width: 70%; }
.wds-line--80 { width: 80%; }
.wds-line--100 { width: 100%; }

.wds-pill {
    width: 60%;
    height: 30px;
    border-radius: 9999px;
    background: linear-gradient(120deg, var(--primary) 0%, #0E4A75 110%);
    box-shadow: 0 6px 16px -6px rgba(10,61,97,0.5);
}
@keyframes wdsShimmer {
    to { background-position: -200% 0; }
}

/* -- Progress pulse dot -- */
.wds-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34D399;
    animation: wdsPulse 1.6s ease-in-out infinite;
}
@keyframes wdsPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.75); }
}

/* -- Service card underline grow -- */
.wds-card .wds-underline {
    width: 0;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.wds-card:hover .wds-underline {
    width: 100%;
}

/* -- Process connector -- */
.wds-connector {
    animation: wdsConnectorPulse 2.4s ease-in-out infinite;
}
@keyframes wdsConnectorPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* -- Popular package glow + shine -- */
.wds-package-popular {
    position: relative;
    animation: wdsPackageGlow 4s ease-in-out infinite;
}
@keyframes wdsPackageGlow {
    0%, 100% { box-shadow: 0 20px 45px -18px rgba(10, 61, 97, 0.45); }
    50% { box-shadow: 0 20px 55px -14px rgba(10, 61, 97, 0.62); }
}
.wds-package-popular::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, transparent 30%, rgba(234, 181, 67, 0.18) 50%, transparent 70%);
    background-size: 250% 250%;
    animation: wdsPackageShine 6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes wdsPackageShine {
    0% { background-position: 120% 50%; opacity: 0; }
    20% { opacity: 1; }
    60% { background-position: 20% 50%; opacity: 1; }
    80%, 100% { background-position: -40% 50%; opacity: 0; }
}

/* -- Reduced motion -- */
@media (prefers-reduced-motion: reduce) {
    .wds-stage,
    .wds-skel,
    .wds-line,
    .wds-pulse,
    .wds-connector,
    .wds-package-popular,
    .wds-package-popular::before {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .wds-card .wds-underline {
        width: 100%;
        transition: none;
    }
}

/* -- Payment mode segments (One Time / Monthly / Yearly) -- */
.wds-paymode-glider {
    position: absolute;
    top: 5px;
    bottom: 5px;
    width: calc(33.333% - 6px);
    border-radius: 9999px;
    background: linear-gradient(120deg, var(--primary) 0%, var(--primary-dark) 110%);
    box-shadow: 0 8px 20px -8px rgba(10, 61, 97, 0.6);
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.wds-paymode-glider.wds-paymode-left   { left: 5px; }
.wds-paymode-glider.wds-paymode-center { left: calc(33.333% + 1px); }
.wds-paymode-glider.wds-paymode-right  { left: calc(66.666% - 3px); }

/* -- Price pop on payment-mode switch -- */
.wds-price {
    display: inline-block;
    animation: wdsPricePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes wdsPricePop {
    0% { opacity: 0; transform: translateY(12px) scale(0.9); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .wds-paymode-glider,
    .wds-price {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* ================================================================
   Currency Toggle (USD / BDT) � site-wide pricing
   ================================================================ */
.cur-toggle-glider {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    border-radius: 9999px;
    background: linear-gradient(120deg, var(--primary) 0%, var(--primary-dark) 110%);
    box-shadow: 0 8px 20px -8px rgba(10, 61, 97, 0.6);
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.cur-toggle-glider.cur-toggle-bdt {
    left: 50%;
}

@media (prefers-reduced-motion: reduce) {
    .cur-toggle-glider {
        transition: none !important;
    }
}