/* Yoho.Cloud — Dark/Light Theme System (Spaceship-inspired) */
/* Primary framework: Tailwind CSS via CDN */

[x-cloak] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    background-color: #030712;
    color: #f8fafc;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    transition: background-color 0.35s ease, color 0.35s ease;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.025em;
    line-height: 1.15;
}

p { line-height: 1.7; }

a { text-decoration: none; }

/* ── Focus-visible (accessibility) ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
    outline: 2px solid #818cf8;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Scrollbar (dark) ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* ── Logo (dark = invert to white) ── */
.logo-wrap {
    display: grid;
}
.logo-wrap > img {
    grid-area: 1 / 1;
    transition: opacity 0.3s;
}
.logo-light {
    opacity: 1;
}
.logo-dark {
    opacity: 0;
}

/* ── Announcement bar ── */
.announcement-bar {
    font-weight: 500;
    background: linear-gradient(90deg, #1e1b4b 0%, #3730a3 28%, #6d28d9 55%, #4338ca 78%, #1e1b4b 100%);
    position: relative;
    overflow: hidden;
}
.announcement-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.07) 50%, transparent 65%);
    animation: ann-shimmer 4s linear infinite;
    pointer-events: none;
}
@keyframes ann-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}
.announcement-bar a {
    color: #fff;
    text-decoration: none;
    position: relative;
    z-index: 1;
}
.announcement-bar a > * {
    position: relative;
    z-index: 1;
}
.ann-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border: none;
    padding: 0.25rem 0.7rem;
    border-radius: 9999px;
    box-shadow: 0 2px 10px rgba(239,68,68,0.45);
}
.ann-timer {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-family: ui-monospace, monospace;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: #e0e7ff;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
}
.ann-timer-sep {
    opacity: 0.3;
    font-weight: 400;
    margin: 0 0.1rem;
}
.ann-timer-unit {
    opacity: 0.55;
    font-size: 0.6rem;
    font-weight: 500;
}

/* ── Gradient text ── */
.gradient-text {
    background: linear-gradient(135deg, #818cf8 0%, #a78bfa 50%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Section badge label (e.g. "WEB HOSTING", "WHY YOHO") ── */
.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a5b4fc;
    background: rgba(99,102,241,0.08);
    border: 1px solid rgba(99,102,241,0.15);
}

/* ── Glass card ── */
.card-glass {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

/* ── Elevated card (Spaceship style) ── */
.card-elevated {
    background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.card-elevated:hover {
    border-color: rgba(99,102,241,0.35);
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(99,102,241,0.12), 0 8px 24px rgba(0,0,0,0.2);
}

/* ── Alternating section backgrounds ── */
.section-alt {
    background: rgba(255,255,255,0.015);
}

/* ── Dropdown panel (dark) ── */
.dropdown-panel {
    background: #0d1424;
    transition: background 0.3s, border-color 0.3s;
}
.dropdown-link {
    color: #cbd5e1;
}
.dropdown-link:hover {
    color: #fff;
    background: rgba(255,255,255,0.04);
}

/* ── Primary gradient button ── */
.btn-primary-gradient {
    background: linear-gradient(135deg, #6366f1, #7c3aed);
    box-shadow: 0 4px 14px rgba(99,102,241,0.35);
    color: white;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.btn-primary-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #7c3aed, #6366f1);
    opacity: 0;
    transition: opacity 0.25s;
    z-index: -1;
}
.btn-primary-gradient:hover {
    box-shadow: 0 8px 25px rgba(99,102,241,0.4);
    transform: translateY(-2px);
}
.btn-primary-gradient:hover::before {
    opacity: 1;
}
.btn-primary-gradient > * {
    position: relative;
    z-index: 1;
}

/* ── Secondary outline button ── */
.btn-outline {
    border: 1px solid rgba(255,255,255,0.15);
    color: white;
    font-weight: 600;
    background: transparent;
    cursor: pointer;
    transition: all 0.25s;
}
.btn-outline:hover {
    border-color: rgba(99,102,241,0.5);
    background: rgba(99,102,241,0.08);
}

/* ── Feature card hover ── */
.feature-card {
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.feature-card:hover {
    border-color: rgba(99,102,241,0.3);
    background: rgba(255,255,255,0.05);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* ── Pricing card ── */
.pricing-card {
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.pricing-card:hover {
    border-color: rgba(99,102,241,0.4);
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(99,102,241,0.15);
}
.pricing-card.featured {
    border-color: rgba(99,102,241,0.4);
    background: rgba(99,102,241,0.05);
}

/* ── Product showcase card (Spaceship style horizontal) ── */
.product-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}
.product-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(99,102,241,0.05) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s;
}
.product-card:hover {
    border-color: rgba(99,102,241,0.3);
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}
.product-card:hover::before { opacity: 1; }
.product-card .product-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s;
}
.product-card:hover .product-icon {
    transform: scale(1.08);
}

/* ── Hosting-area carousel ── */
.hosting-track {
    scrollbar-width: thin;
    scrollbar-color: rgba(99,102,241,0.3) transparent;
}
.hosting-track::-webkit-scrollbar { height: 6px; }
.hosting-track::-webkit-scrollbar-track { background: transparent; }
.hosting-track::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.25); border-radius: 999px; }
.hosting-track::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,0.45); }

/* Bleed track: cards start at container left, scroll to viewport right */
.hosting-track-bleed {
    margin-right: -1rem;        /* extend past px-4 to viewport edge */
}
@media (min-width: 640px) {
    .hosting-track-bleed { margin-right: -1.5rem; }  /* past px-6 */
}
@media (min-width: 1024px) {
    .hosting-track-bleed {
        margin-right: calc(-1 * max(2rem, (100vw - 80rem) / 2 + 2rem));
    }
}

.hosting-card {
    position: relative;
    min-width: 300px;
    max-width: 320px;
    min-height: 380px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
}
.hosting-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s;
    border-radius: inherit;
    pointer-events: none;
}
.hosting-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(0,0,0,0.25);
}
.hosting-card:hover::before { opacity: 1; }

/* Color variants */
.hosting-card-indigo { border-color: rgba(99,102,241,0.12); }
.hosting-card-indigo::before { background: linear-gradient(135deg, rgba(99,102,241,0.08), transparent 60%); }
.hosting-card-indigo:hover { border-color: rgba(99,102,241,0.35); }

.hosting-card-violet { border-color: rgba(139,92,246,0.12); }
.hosting-card-violet::before { background: linear-gradient(135deg, rgba(139,92,246,0.08), transparent 60%); }
.hosting-card-violet:hover { border-color: rgba(139,92,246,0.35); }

.hosting-card-cyan { border-color: rgba(6,182,212,0.12); }
.hosting-card-cyan::before { background: linear-gradient(135deg, rgba(6,182,212,0.08), transparent 60%); }
.hosting-card-cyan:hover { border-color: rgba(6,182,212,0.35); }

.hosting-card-emerald { border-color: rgba(16,185,129,0.12); }
.hosting-card-emerald::before { background: linear-gradient(135deg, rgba(16,185,129,0.08), transparent 60%); }
.hosting-card-emerald:hover { border-color: rgba(16,185,129,0.35); }

.hosting-card-amber { border-color: rgba(245,158,11,0.12); }
.hosting-card-amber::before { background: linear-gradient(135deg, rgba(245,158,11,0.08), transparent 60%); }
.hosting-card-amber:hover { border-color: rgba(245,158,11,0.35); }

.hosting-card-rose { border-color: rgba(244,63,94,0.12); }
.hosting-card-rose::before { background: linear-gradient(135deg, rgba(244,63,94,0.08), transparent 60%); }
.hosting-card-rose:hover { border-color: rgba(244,63,94,0.35); }

.hosting-card-blue { border-color: rgba(59,130,246,0.12); }
.hosting-card-blue::before { background: linear-gradient(135deg, rgba(59,130,246,0.08), transparent 60%); }
.hosting-card-blue:hover { border-color: rgba(59,130,246,0.35); }

.hosting-card-green { border-color: rgba(34,197,94,0.12); }
.hosting-card-green::before { background: linear-gradient(135deg, rgba(34,197,94,0.08), transparent 60%); }
.hosting-card-green:hover { border-color: rgba(34,197,94,0.35); }

.hosting-card-orange { border-color: rgba(249,115,22,0.12); }
.hosting-card-orange::before { background: linear-gradient(135deg, rgba(249,115,22,0.08), transparent 60%); }
.hosting-card-orange:hover { border-color: rgba(249,115,22,0.35); }

.hosting-card-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(99,102,241,0.08);
    color: #a5b4fc;
    margin-bottom: 1.25rem;
    transition: transform 0.3s;
}
.hosting-card-indigo .hosting-card-icon { background: rgba(99,102,241,0.1); color: #818cf8; }
.hosting-card-violet .hosting-card-icon { background: rgba(139,92,246,0.1); color: #a78bfa; }
.hosting-card-cyan .hosting-card-icon   { background: rgba(6,182,212,0.1);  color: #22d3ee; }
.hosting-card-emerald .hosting-card-icon{ background: rgba(16,185,129,0.1); color: #34d399; }
.hosting-card-amber .hosting-card-icon  { background: rgba(245,158,11,0.1); color: #fbbf24; }
.hosting-card-rose .hosting-card-icon   { background: rgba(244,63,94,0.1);  color: #fb7185; }
.hosting-card-blue .hosting-card-icon   { background: rgba(59,130,246,0.1); color: #60a5fa; }

.hosting-card:hover .hosting-card-icon { transform: scale(1.1); }

.hosting-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.hosting-card-body > .flex:last-child { margin-top: auto; }

.hosting-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #a5b4fc;
    transition: color 0.25s, gap 0.25s;
}
.hosting-card-link:hover { color: #c7d2fe; gap: 0.65rem; }

.hosting-card-indigo .hosting-card-link { color: #818cf8; }
.hosting-card-indigo .hosting-card-link:hover { color: #a5b4fc; }
.hosting-card-violet .hosting-card-link { color: #a78bfa; }
.hosting-card-violet .hosting-card-link:hover { color: #c4b5fd; }
.hosting-card-cyan .hosting-card-link   { color: #22d3ee; }
.hosting-card-cyan .hosting-card-link:hover { color: #67e8f9; }
.hosting-card-emerald .hosting-card-link{ color: #34d399; }
.hosting-card-emerald .hosting-card-link:hover { color: #6ee7b7; }
.hosting-card-amber .hosting-card-link  { color: #fbbf24; }
.hosting-card-amber .hosting-card-link:hover { color: #fcd34d; }
.hosting-card-rose .hosting-card-link   { color: #fb7185; }
.hosting-card-rose .hosting-card-link:hover { color: #fda4af; }
.hosting-card-blue .hosting-card-link   { color: #60a5fa; }
.hosting-card-blue .hosting-card-link:hover { color: #93c5fd; }

.hosting-tag {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #7c3aed);
}

.hosting-nav-btn {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: #d1d5db;
    cursor: pointer;
    transition: all 0.25s;
}
.hosting-nav-btn:hover {
    background: rgba(99,102,241,0.15);
    border-color: rgba(99,102,241,0.4);
    color: #a5b4fc;
}

/* ── Testimonial card ── */
.testimonial-card {
    transition: all 0.35s ease;
}
.testimonial-card:hover {
    border-color: rgba(99,102,241,0.25);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* ── Testimonial slide (Byteflows-style horizontal) ── */
.testimonial-slide {
    min-width: 340px;
    max-width: 380px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}
.testimonial-slide:hover {
    border-color: rgba(99,102,241,0.25);
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}

/* ── FAQ accordion (hosting.com style) ── */
.faq-item {
    border-bottom: 1px solid rgba(255,255,255,0.08);
    transition: all 0.2s ease;
}
.faq-item:last-child { border-bottom: none; }
.faq-item[open] {
    background: transparent;
}
.faq-item summary {
    cursor: pointer;
    list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { display: none; }
/* Icon — crossfade + rotate on open/close */
.faq-item summary > span:last-child {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.5rem;   /* 24px — matches w-6 */
    height: 1.5rem;
}
.faq-item .faq-icon-plus,
.faq-item .faq-icon-minus {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center center;
    translate: -50% -50%;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.faq-item .faq-icon-plus  { opacity: 1; transform: scale(1)   rotate(0deg);   }
.faq-item .faq-icon-minus { opacity: 0; transform: scale(0.5) rotate(-45deg); }
.faq-item[open] .faq-icon-plus  { opacity: 0; transform: scale(0.5) rotate(45deg); }
.faq-item[open] .faq-icon-minus { opacity: 1; transform: scale(1)   rotate(0deg);  }

/* ── TLD pill (single-row scroll) ── */
.tld-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    padding: 0.55rem 1.15rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.12);
    color: #e2e8f0;
    transition: all 0.25s;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.tld-pill:hover {
    background: rgba(255,255,255,0.16);
    border-color: rgba(255,255,255,0.22);
    transform: translateY(-1px);
}
.tld-pill .tld-ext {
    font-weight: 700;
    color: #fff;
}
.tld-pill .tld-price {
    font-weight: 400;
    color: rgba(255,255,255,0.7);
    font-size: 0.8125rem;
}
/* Hide scrollbar but keep scroll */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ── TLD marquee auto-scroll ── */
.tld-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tld-marquee-track {
    display: flex;
    gap: 0.75rem;
    width: max-content;
    animation: tld-scroll 18s linear infinite;
}
.tld-marquee:hover .tld-marquee-track {
    animation-play-state: paused;
}
@keyframes tld-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── Trust badge ── */
.trust-badge {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    transition: all 0.3s;
}
.trust-badge:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
}

/* ── Animations ── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.animate-float {
    animation: float 4s ease-in-out infinite;
}

/* ── Hero: dark gradient + diagonal edge ── */
.hero-glow {
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99,102,241,0.25) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 80% 10%, rgba(124,58,237,0.15) 0%, transparent 60%),
        radial-gradient(ellipse 30% 20% at 20% 30%, rgba(168,85,247,0.08) 0%, transparent 50%);
    background-color: #070c18;
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
    padding-bottom: 6rem;
    padding-top: 4rem; /* clear sticky nav (h-14 = 56px) with breathing room */
}
@media (min-width: 768px) {
    .hero-glow { clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); padding-bottom: 8rem; padding-top: 4.5rem; }
}
@media (min-width: 1024px) {
    .hero-glow { clip-path: polygon(0 0, 100% 0, 100% 87%, 0 100%); padding-bottom: 10rem; padding-top: 5rem; }
}

/* Accent line along the diagonal */
.hero-glow::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(to right, #6366f1, #8b5cf6);
    clip-path: polygon(0 99.2%, 100% 91.2%, 100% 92%, 0 100%);
    pointer-events: none;
    z-index: 1;
}
@media (min-width: 768px) {
    .hero-glow::after { clip-path: polygon(0 99%, 100% 89%, 100% 90%, 0 100%); }
}
@media (min-width: 1024px) {
    .hero-glow::after { clip-path: polygon(0 98.5%, 100% 85.5%, 100% 87%, 0 100%); }
}

/* ── Domain search input ── */
.domain-search-input {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: white;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.3s, color 0.3s;
}
.domain-search-input:focus {
    outline: none;
    border-color: rgba(99,102,241,0.7);
    box-shadow: 0 0 0 4px rgba(99,102,241,0.12);
}
.domain-search-input::placeholder {
    color: #64748b;
}

/* ── Hero image (right side) ── */
.hero-image-wrapper {
    position: relative;
}
.hero-float-icon {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    animation: heroBounce 1s ease-in-out 0s infinite alternate;
}
.hero-float-icon-1 {
    left: 15%;
    top: 30%;
    width: 60px;
    height: auto;
}
.hero-float-icon-2 {
    right: 55%;
    top: -5%;
    left: auto;
    width: 50px;
    height: auto;
    animation-delay: 0.4s;
}
@keyframes heroBounce {
    0% { transform: translateY(0); }
    100% { transform: translateY(-25px); }
}

/* ── Hero panel image (bulge-out effect) ── */
.hero-panel-wrap {
    position: relative;
    margin-right: -4rem;
    margin-bottom: -6rem;
    padding-top: 1rem;
    z-index: 2;
}
@media (min-width: 1280px) {
    .hero-panel-wrap {
        margin-right: calc(-1 * max(4rem, (100vw - 80rem) / 2));
    }
}
.hero-panel-perspective {
    -webkit-transform: perspective(1200px) rotateY(-6deg) rotateX(2deg);
    transform: perspective(1200px) rotateY(-6deg) rotateX(2deg);
    -webkit-transform-origin: left center;
    transform-origin: left center;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.hero-panel-perspective:hover {
    transform: perspective(1200px) rotateY(-2deg) rotateX(1deg) scale(1.02);
}
.hero-panel-img {
    border-radius: 16px;
    border: 1px solid rgba(99,102,241,0.2);
    box-shadow:
        0 25px 60px rgba(0,0,0,0.4),
        0 0 40px rgba(99,102,241,0.15),
        inset 0 1px 0 rgba(255,255,255,0.06);
}
/* Glow behind the panel */
.hero-panel-glow {
    position: absolute;
    top: 10%;
    right: 5%;
    width: 70%;
    height: 70%;
    background: radial-gradient(ellipse at center, rgba(99,102,241,0.25) 0%, rgba(139,92,246,0.12) 40%, transparent 70%);
    border-radius: 50%;
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
}
/* Decorative dot grid */
.hero-panel-dots {
    position: absolute;
    bottom: -8px;
    right: 10%;
    width: 120px;
    height: 80px;
    background-image: radial-gradient(circle, rgba(99,102,241,0.3) 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    z-index: 0;
    pointer-events: none;
    opacity: 0.6;
}

/* Light mode hero panel */
html[data-theme="light"] .hero-panel-img {
    border-color: rgba(99,102,241,0.12);
    box-shadow:
        0 25px 60px rgba(0,0,0,0.1),
        0 0 30px rgba(99,102,241,0.08);
}
html[data-theme="light"] .hero-panel-glow {
    background: radial-gradient(ellipse at center, rgba(99,102,241,0.1) 0%, rgba(139,92,246,0.05) 40%, transparent 70%);
}
html[data-theme="light"] .hero-panel-dots {
    background-image: radial-gradient(circle, rgba(99,102,241,0.15) 1.5px, transparent 1.5px);
}
.data-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #a78bfa;
    box-shadow: 0 0 8px 3px rgba(167,139,250,0.6), 0 0 20px 6px rgba(139,92,246,0.3);
    z-index: 20;
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
}

/* Path 1: Laptop (bottom-left) → cPanel center */
.data-dot-1 {
    animation: dataPath1 3s ease-in-out infinite;
}
@keyframes dataPath1 {
    0%   { left: 18%; top: 72%; opacity: 0; }
    10%  { opacity: 1; }
    50%  { left: 42%; top: 48%; opacity: 1; }
    90%  { opacity: 0; }
    100% { left: 48%; top: 32%; opacity: 0; }
}

/* Path 2: Server rack (top-left) → center */
.data-dot-2 {
    animation: dataPath2 2.8s ease-in-out 0.6s infinite;
}
@keyframes dataPath2 {
    0%   { left: 22%; top: 12%; opacity: 0; }
    10%  { opacity: 1; }
    50%  { left: 35%; top: 28%; opacity: 1; }
    90%  { opacity: 0; }
    100% { left: 48%; top: 35%; opacity: 0; }
}

/* Path 3: Right server racks → center */
.data-dot-3 {
    animation: dataPath3 3.2s ease-in-out 1.2s infinite;
}
@keyframes dataPath3 {
    0%   { left: 88%; top: 42%; opacity: 0; }
    10%  { opacity: 1; }
    50%  { left: 68%; top: 40%; opacity: 1; }
    90%  { opacity: 0; }
    100% { left: 52%; top: 35%; opacity: 0; }
}

/* Path 4: CPU chip (left) → center */
.data-dot-4 {
    animation: dataPath4 2.6s ease-in-out 1.8s infinite;
}
@keyframes dataPath4 {
    0%   { left: 5%;  top: 42%; opacity: 0; }
    10%  { opacity: 1; }
    50%  { left: 25%; top: 40%; opacity: 1; }
    90%  { opacity: 0; }
    100% { left: 42%; top: 38%; opacity: 0; }
}

/* Path 5: Code icon (bottom-right) → center */
.data-dot-5 {
    animation: dataPath5 3s ease-in-out 2.4s infinite;
}
@keyframes dataPath5 {
    0%   { left: 75%; top: 68%; opacity: 0; }
    10%  { opacity: 1; }
    50%  { left: 62%; top: 55%; opacity: 1; }
    90%  { opacity: 0; }
    100% { left: 50%; top: 40%; opacity: 0; }
}

/* ── Stats counter ── */

/* ── Why Yoho datacenter globe background ── */
.why-yoho-globe {
    position: absolute;
    bottom: -10%;
    left: 50%;
    width: 900px;
    height: 900px;
    transform: translateX(-50%) perspective(800px) rotateX(20deg) rotateZ(-5deg);
    opacity: 0.35;
    pointer-events: none;
    z-index: 0;
    filter: invert(1) hue-rotate(200deg) brightness(0.45) saturate(0.5);
    mix-blend-mode: screen;
    animation: globeFloat 8s ease-in-out infinite;
    mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.7) 60%, transparent 90%);
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.7) 60%, transparent 90%);
}
@keyframes globeFloat {
    0%, 100% { transform: translateX(-50%) perspective(800px) rotateX(20deg) rotateZ(-5deg); }
    50% { transform: translateX(-50%) perspective(800px) rotateX(22deg) rotateZ(-3deg) translateY(-10px); }
}
html[data-theme="light"] .why-yoho-globe {
    opacity: 0.1;
    filter: none;
    mix-blend-mode: multiply;
}

.stat-card {
    position: relative;
}
.stat-card::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60%;
    background: rgba(255,255,255,0.08);
}
.stat-card:last-child::after {
    display: none;
}

/* ── Payment logos ── */
.payment-logo {
    transition: opacity 0.3s;
}

/* ── Footer/Header helper classes ── */
.footer-heading { color: #fff; }
.footer-col-title { color: #cbd5e1; }

/* ── Icon ring (decorative circle behind feature icons) ── */
.icon-ring {
    position: relative;
}
.icon-ring::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    background: inherit;
    opacity: 0.3;
    filter: blur(6px);
}

/* ========================================================
   LIGHT MODE — html[data-theme="light"]
   ======================================================== */
html[data-theme="light"] body {
    background-color: #f8fafc;
    color: #1e293b;
}
html[data-theme="light"] {
    color-scheme: light;
}

/* Scrollbar */
html[data-theme="light"] ::-webkit-scrollbar-track { background: rgba(0,0,0,0.03); }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }

/* Logo — no invert in light mode */
html[data-theme="light"] .logo-light {
    opacity: 0;
}
html[data-theme="light"] .logo-dark {
    opacity: 1;
}

/* Gradient text — darker in light mode for readability */
html[data-theme="light"] .gradient-text {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #9333ea 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Section badge */
html[data-theme="light"] .section-badge {
    color: #4338ca;
    background: rgba(99,102,241,0.08);
    border-color: rgba(99,102,241,0.18);
}

/* Header bar */
html[data-theme="light"] .header-bar {
    background: rgba(255,255,255,0.88) !important;
    border-bottom-color: rgba(0,0,0,0.06);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
}
html[data-theme="light"] .header-bar .nav-link {
    color: #475569;
}
html[data-theme="light"] .header-bar .nav-link:hover {
    color: #1e293b;
    background: rgba(0,0,0,0.04);
}
html[data-theme="light"] .header-bar .theme-toggle-btn {
    color: #64748b;
}
html[data-theme="light"] .header-bar .theme-toggle-btn:hover {
    color: #1e293b;
    background: rgba(0,0,0,0.05);
}

/* Dropdown panel */
html[data-theme="light"] .dropdown-panel {
    background: #fff;
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}
html[data-theme="light"] .dropdown-link {
    color: #475569;
}
html[data-theme="light"] .dropdown-link:hover {
    color: #1e293b;
    background: rgba(99,102,241,0.05);
}

/* Footer bar */
html[data-theme="light"] .footer-bar {
    background: #fff !important;
    border-top-color: rgba(0,0,0,0.06);
}
html[data-theme="light"] .footer-heading { color: #1e293b; }
html[data-theme="light"] .footer-col-title { color: #334155; }
html[data-theme="light"] .footer-link { color: #64748b; }
html[data-theme="light"] .footer-link:hover { color: #1e293b; }

/* Glass card */
html[data-theme="light"] .card-glass {
    background: rgba(255,255,255,0.85);
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* Elevated card */
html[data-theme="light"] .card-elevated {
    background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.9) 100%);
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
html[data-theme="light"] .card-elevated:hover {
    border-color: rgba(99,102,241,0.3);
    box-shadow: 0 16px 48px rgba(99,102,241,0.1), 0 4px 16px rgba(0,0,0,0.08);
}

/* Alternating section bg */
html[data-theme="light"] .section-alt {
    background: rgba(99,102,241,0.025);
}

/* Feature card hover */
html[data-theme="light"] .feature-card:hover {
    border-color: rgba(99,102,241,0.25);
    background: rgba(255,255,255,0.95);
    box-shadow: 0 8px 24px rgba(99,102,241,0.06);
}

/* Product card */
html[data-theme="light"] .product-card {
    background: #fff;
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
html[data-theme="light"] .product-card:hover {
    border-color: rgba(99,102,241,0.3);
    box-shadow: 0 16px 48px rgba(99,102,241,0.1), 0 4px 12px rgba(0,0,0,0.06);
}
html[data-theme="light"] .product-card::before {
    background: linear-gradient(135deg, rgba(99,102,241,0.03) 0%, transparent 60%);
}

/* Hosting-area carousel light overrides */
html[data-theme="light"] .hosting-card {
    background: #fff;
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
html[data-theme="light"] .hosting-card:hover {
    box-shadow: 0 20px 50px rgba(99,102,241,0.1), 0 4px 12px rgba(0,0,0,0.06);
}
html[data-theme="light"] .hosting-card-indigo:hover { border-color: rgba(99,102,241,0.35); }
html[data-theme="light"] .hosting-card-violet:hover { border-color: rgba(139,92,246,0.35); }
html[data-theme="light"] .hosting-card-cyan:hover   { border-color: rgba(6,182,212,0.35); }
html[data-theme="light"] .hosting-card-emerald:hover { border-color: rgba(16,185,129,0.35); }
html[data-theme="light"] .hosting-card-amber:hover   { border-color: rgba(245,158,11,0.35); }
html[data-theme="light"] .hosting-card-rose:hover    { border-color: rgba(244,63,94,0.35); }
html[data-theme="light"] .hosting-card-blue:hover    { border-color: rgba(59,130,246,0.35); }
html[data-theme="light"] .hosting-card h3 a,
html[data-theme="light"] .hosting-card h3 { color: #1e293b; }
html[data-theme="light"] .hosting-card p { color: #64748b; }
html[data-theme="light"] .hosting-card .text-gray-500 { color: #94a3b8; }
html[data-theme="light"] .hosting-card strong { color: #1e293b; }
html[data-theme="light"] .hosting-nav-btn {
    background: #fff;
    border-color: rgba(0,0,0,0.1);
    color: #475569;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
html[data-theme="light"] .hosting-nav-btn:hover {
    background: rgba(99,102,241,0.06);
    border-color: rgba(99,102,241,0.3);
    color: #6366f1;
}
html[data-theme="light"] .hosting-tag {
    background: linear-gradient(135deg, #6366f1, #7c3aed);
}
html[data-theme="light"] .hosting-track::-webkit-scrollbar-thumb {
    background: rgba(99,102,241,0.18);
}

/* Pricing card */
html[data-theme="light"] .pricing-card:hover {
    box-shadow: 0 16px 48px rgba(99,102,241,0.1), 0 4px 16px rgba(0,0,0,0.06);
    border-color: rgba(99,102,241,0.3);
}
html[data-theme="light"] .pricing-card.featured {
    border-color: rgba(99,102,241,0.4);
    background: rgba(99,102,241,0.04);
    box-shadow: 0 4px 20px rgba(99,102,241,0.08);
}

/* Testimonial card */
html[data-theme="light"] .testimonial-card:hover {
    border-color: rgba(99,102,241,0.2);
    box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}

/* TLD pills */
html[data-theme="light"] .tld-pill {
    background: rgba(79,70,229,0.08);
    border-color: rgba(79,70,229,0.15);
    color: #1e293b;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
html[data-theme="light"] .tld-pill:hover {
    background: rgba(79,70,229,0.14);
    border-color: rgba(79,70,229,0.3);
    box-shadow: 0 4px 12px rgba(99,102,241,0.08);
}
html[data-theme="light"] .tld-pill .tld-ext {
    color: #4f46e5;
}
html[data-theme="light"] .tld-pill .tld-price {
    color: #475569;
}

/* Trust badge */
html[data-theme="light"] .trust-badge {
    background: #fff;
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
html[data-theme="light"] .trust-badge:hover {
    background: #fff;
    border-color: rgba(99,102,241,0.2);
    box-shadow: 0 4px 12px rgba(99,102,241,0.06);
}

/* FAQ */
html[data-theme="light"] .faq-item {
    background: transparent;
    border-color: rgba(0,0,0,0.1);
}
html[data-theme="light"] .faq-item[open] {
    background: transparent;
}

/* Outline button */
html[data-theme="light"] .btn-outline {
    border-color: rgba(0,0,0,0.15);
    color: #0f172a;
}
html[data-theme="light"] .btn-outline:hover {
    border-color: rgba(99,102,241,0.5);
    background: rgba(99,102,241,0.06);
    color: #4f46e5;
}

/* Domain search */
html[data-theme="light"] .domain-search-input {
    background: #fff;
    border-color: rgba(0,0,0,0.1);
    color: #1e293b;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
html[data-theme="light"] .domain-search-input:focus {
    border-color: rgba(99,102,241,0.6);
    box-shadow: 0 0 0 4px rgba(99,102,241,0.08);
}
html[data-theme="light"] .domain-search-input::placeholder {
    color: #94a3b8;
}


/* Hero (light mode) */
html[data-theme="light"] .hero-glow {
    background:
        radial-gradient(ellipse 100% 60% at 50% 0%, rgba(99,102,241,0.18) 0%, transparent 65%),
        radial-gradient(ellipse 60% 50% at 80% 10%, rgba(124,58,237,0.12) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 20% 20%, rgba(168,85,247,0.10) 0%, transparent 55%);
    background-color: #eae8ff;
}
html[data-theme="light"] .hero-glow::after {
    background: linear-gradient(to right, rgba(99,102,241,0.4), rgba(139,92,246,0.4));
}

/* Cloud hosting hero overlays */
html[data-theme="light"] .dark-overlay { display: none; }
html[data-theme="light"] .light-hero-overlay {
    display: block;
    background: linear-gradient(to top, rgba(240,240,255,0.75) 0%, rgba(240,240,255,0.55) 40%, rgba(240,240,255,0.65) 100%);
}
html[data-theme="light"] .email-hero-overlay {
    background: linear-gradient(to top, rgba(240,240,255,0.88) 0%, rgba(240,240,255,0.78) 40%, rgba(240,240,255,0.85) 100%);
}
html[data-theme="light"] .cloud-hero-overlay {
    background: linear-gradient(to top, rgba(240,240,255,0.88) 0%, rgba(240,240,255,0.78) 40%, rgba(240,240,255,0.85) 100%);
}
html[data-theme="light"] .vps-hero-overlay {
    background: linear-gradient(to top, rgba(240,240,255,0.88) 0%, rgba(240,240,255,0.78) 40%, rgba(240,240,255,0.85) 100%);
}

/* Python hosting hero overlay */
.python-hero-overlay {
    background: linear-gradient(75deg, rgba(5,8,35,0.90) 0%, rgba(10,6,42,0.85) 100%);
}
html[data-theme="light"] .python-hero-overlay {
    background: linear-gradient(75deg, rgba(235,238,255,0.88) 0%, rgba(241,237,255,0.84) 100%);
}
/* Node.js hosting hero overlay */
.nodejs-hero-overlay {
    background:
        radial-gradient(ellipse 65% 55% at 5% 90%, rgba(16,185,129,0.12) 0%, transparent 65%),
        radial-gradient(ellipse 50% 45% at 92% 8%, rgba(99,102,241,0.08) 0%, transparent 60%),
        linear-gradient(135deg, rgba(2,6,15,0.94) 0%, rgba(3,8,18,0.89) 55%, rgba(4,7,20,0.92) 100%);
}
html[data-theme="light"] .nodejs-hero-overlay {
    background:
        radial-gradient(ellipse 65% 55% at 5% 90%, rgba(16,185,129,0.07) 0%, transparent 65%),
        linear-gradient(135deg, rgba(235,238,255,0.90) 0%, rgba(238,240,255,0.85) 100%);
}
html[data-theme="light"] .domain-hero-overlay {
    background: linear-gradient(to top, rgba(240,240,255,0.82) 0%, rgba(240,240,255,0.65) 40%, rgba(240,240,255,0.75) 100%);
}

/* Domain search box in light mode */
html[data-theme="light"] .domain-search-box {
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 4px 24px rgba(99,102,241,0.08), 0 1px 3px rgba(0,0,0,0.06);
}
html[data-theme="light"] .feature-strip-card {
    background: rgba(255,255,255,0.7);
    border-color: rgba(0,0,0,0.08);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
html[data-theme="light"] .feature-strip-card p.text-white { color: #1e293b; }
html[data-theme="light"] .feature-strip-card .text-gray-500 { color: #64748b; }

/* Domain perks grid */
html[data-theme="light"] .domain-perks-grid { border-color: rgba(0,0,0,0.08); }
html[data-theme="light"] .domain-perk-card { border-color: rgba(0,0,0,0.08) !important; }
html[data-theme="light"] .domain-perk-card h5 { color: #1e293b; }
html[data-theme="light"] .domain-perk-card p { color: #64748b; }

/* Stat card divider */
html[data-theme="light"] .stat-card::after {
    background: rgba(0,0,0,0.1);
}

/* Payment badge */
html[data-theme="light"] .payment-badge {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.08);
    color: #475569;
}

/* Payment logos */
html[data-theme="light"] .payment-logo {
    border-color: rgba(0,0,0,0.12);
    opacity: 0.85;
}
html[data-theme="light"] .payment-logo:hover {
    opacity: 1;
}

/* Section borders */
html[data-theme="light"] section {
    border-color: rgba(0,0,0,0.06);
}

/* Tailwind utility overrides for light mode */
html[data-theme="light"] .bg-\[\#030712\] { background-color: #f8fafc !important; }
html[data-theme="light"] .bg-\[\#030712\]\/95 { background-color: rgba(255,255,255,0.88) !important; }
html[data-theme="light"] .text-white { color: #0f172a !important; }
html[data-theme="light"] .text-gray-300 { color: #334155 !important; }
html[data-theme="light"] .text-gray-400 { color: #475569 !important; }
html[data-theme="light"] .text-gray-500 { color: #64748b !important; }
html[data-theme="light"] .text-gray-600 { color: #475569 !important; }

/* Accent text colors — darker shades for light-mode contrast (WCAG AA) */
html[data-theme="light"] .text-indigo-400 { color: #4f46e5 !important; }
html[data-theme="light"] .text-violet-400 { color: #7c3aed !important; }
html[data-theme="light"] .text-emerald-400 { color: #059669 !important; }
html[data-theme="light"] .text-amber-400 { color: #d97706 !important; }
html[data-theme="light"] .text-red-400 { color: #dc2626 !important; }
html[data-theme="light"] .text-cyan-400 { color: #0891b2 !important; }

/* Accent hover colors — slightly lighter than base for feedback */
html[data-theme="light"] .hover\:text-indigo-300:hover { color: #6366f1 !important; }
html[data-theme="light"] .hover\:text-violet-300:hover { color: #8b5cf6 !important; }
html[data-theme="light"] .hover\:text-emerald-300:hover { color: #10b981 !important; }
html[data-theme="light"] .hover\:text-amber-300:hover { color: #f59e0b !important; }

/* Star ratings stay amber (visible on light) */
html[data-theme="light"] svg.text-amber-400 { color: #d97706 !important; }
html[data-theme="light"] .border-white\/\[0\.06\] { border-color: rgba(0,0,0,0.06) !important; }
html[data-theme="light"] .border-white\/\[0\.07\] { border-color: rgba(0,0,0,0.06) !important; }
html[data-theme="light"] .border-white\/\[0\.08\] { border-color: rgba(0,0,0,0.08) !important; }
html[data-theme="light"] .border-white\/10 { border-color: rgba(0,0,0,0.08) !important; }
html[data-theme="light"] .border-white\/5 { border-color: rgba(0,0,0,0.06) !important; }
html[data-theme="light"] .bg-white\/5 { background-color: rgba(0,0,0,0.04) !important; }
html[data-theme="light"] .bg-white\/\[0\.02\] { background-color: rgba(255,255,255,0.9) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.07) !important; }
html[data-theme="light"] .bg-white\/\[0\.02\] .text-white { color: #0f172a !important; }
html[data-theme="light"] .bg-white\/\[0\.02\] .text-gray-400 { color: #64748b !important; }
html[data-theme="light"] .bg-white\/\[0\.03\] { background-color: rgba(0,0,0,0.03) !important; }
html[data-theme="light"] .bg-white\/\[0\.04\] { background-color: rgba(0,0,0,0.03) !important; }
html[data-theme="light"] .bg-white\/\[0\.06\] { background-color: rgba(0,0,0,0.04) !important; }
html[data-theme="light"] .bg-white\/10 { background-color: rgba(0,0,0,0.06) !important; }
html[data-theme="light"] .hover\:bg-white\/5:hover { background-color: rgba(0,0,0,0.04) !important; }
html[data-theme="light"] .hover\:bg-white\/10:hover { background-color: rgba(0,0,0,0.06) !important; }
html[data-theme="light"] .hover\:bg-white\/\[0\.04\]:hover { background-color: rgba(0,0,0,0.03) !important; }
html[data-theme="light"] .hover\:text-white:hover { color: #1e293b !important; }
html[data-theme="light"] .divide-white\/\[0\.04\] > :not([hidden]) ~ :not([hidden]) { border-color: rgba(0,0,0,0.04) !important; }
html[data-theme="light"] .hover\:bg-white\/\[0\.02\]:hover { background-color: rgba(0,0,0,0.02) !important; }
html[data-theme="light"] .shadow-black\/60 { --tw-shadow-color: rgba(0,0,0,0.1) !important; }

/* Tables in light mode */
html[data-theme="light"] table th { color: #475569; }
html[data-theme="light"] table td { color: #1e293b; }
html[data-theme="light"] table td.font-semibold { color: #0f172a; }

/* Mobile menu in light mode */
html[data-theme="light"] .lg\:hidden .border-t { border-color: rgba(0,0,0,0.06); }

/* Icon backgrounds — slightly more saturated in light mode */
html[data-theme="light"] .bg-indigo-500\/10 { background-color: rgba(79,70,229,0.08) !important; }
html[data-theme="light"] .bg-violet-500\/10 { background-color: rgba(124,58,237,0.08) !important; }
html[data-theme="light"] .bg-emerald-500\/10 { background-color: rgba(5,150,105,0.08) !important; }
html[data-theme="light"] .bg-amber-500\/10 { background-color: rgba(217,119,6,0.08) !important; }
html[data-theme="light"] .bg-red-500\/10 { background-color: rgba(220,38,38,0.08) !important; }
html[data-theme="light"] .bg-cyan-500\/10 { background-color: rgba(8,145,178,0.08) !important; }

/* Feature card hover in light mode */
html[data-theme="light"] .feature-card:hover {
    border-color: rgba(99,102,241,0.25);
    background: #fff;
    box-shadow: 0 8px 24px rgba(99,102,241,0.08);
}

/* Testimonial card in light mode */
html[data-theme="light"] .testimonial-card {
    background: #fff;
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
html[data-theme="light"] .testimonial-card:hover {
    border-color: rgba(99,102,241,0.25);
    box-shadow: 0 8px 24px rgba(99,102,241,0.06);
}

/* Testimonial slide in light mode */
html[data-theme="light"] .testimonial-slide {
    background: #fff;
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
html[data-theme="light"] .testimonial-slide:hover {
    border-color: rgba(99,102,241,0.25);
    box-shadow: 0 16px 48px rgba(99,102,241,0.08);
}
html[data-theme="light"] .testimonial-slide p { color: #475569; }
html[data-theme="light"] .testimonial-slide h4 { color: #1e293b; }

/* Accordion / Cloud detail cards in light mode */
html[data-theme="light"] .card-glass button span.text-white,
html[data-theme="light"] .card-glass summary {
    color: #0f172a;
}

/* Save % labels */
html[data-theme="light"] .text-emerald-400.font-semibold,
html[data-theme="light"] span.text-emerald-400 {
    color: #059669 !important;
}

/* Checklist items in pricing cards */
html[data-theme="light"] .pricing-card li {
    color: #334155;
}

/* Most Popular banner in plan cards — keep white text on indigo bg in light mode */
html[data-theme="light"] .plan-most-popular .text-white { color: #fff !important; }
html[data-theme="light"] div.bg-indigo-600 .text-white { color: #fff !important; }

/* Make sure the "POPULAR" badge text stays white in light mode */
html[data-theme="light"] .product-card span[style*="background: linear-gradient"] {
    color: #fff !important;
}
html[data-theme="light"] .pricing-card span[style*="background: linear-gradient"] {
    color: #fff !important;
}
html[data-theme="light"] .wp-pricing-featured > span[style*="background: linear-gradient"] {
    color: #fff !important;
}

/* WordPress hero logo coloring */
.wp-hero-logo {
    filter: brightness(0) invert(1);
    opacity: 0.12;
}
html[data-theme="light"] .wp-hero-logo {
    filter: brightness(0) saturate(100%) invert(27%) sepia(95%) saturate(4752%) hue-rotate(252deg) brightness(93%) contrast(95%);
    opacity: 0.1;
}

/* ── Success area colored cards ──────────────────────────── */
.success-card { transition: transform 0.3s, box-shadow 0.3s; }
.success-card:hover { transform: translateY(-2px); }

/* Dark mode — muted, tinted backgrounds */
.success-card-mint { background: rgba(16, 185, 129, 0.06); border: 1px solid rgba(16, 185, 129, 0.1); }
.success-card-amber { background: rgba(245, 158, 11, 0.06); border: 1px solid rgba(245, 158, 11, 0.1); }
.success-card-lavender { background: rgba(139, 92, 246, 0.06); border: 1px solid rgba(139, 92, 246, 0.1); }

.success-card-heading { color: #f1f5f9; }
.success-card-text { color: #94a3b8; }
.success-card-icon { color: #94a3b8; }

/* Light mode — vivid pastel backgrounds matching reference */
html[data-theme="light"] .success-card-mint { background: #d1fae5; border-color: #a7f3d0; }
html[data-theme="light"] .success-card-amber { background: #fef3c7; border-color: #fde68a; }
html[data-theme="light"] .success-card-lavender { background: #ede9fe; border-color: #ddd6fe; }

html[data-theme="light"] .success-card-heading { color: #0f172a !important; }
html[data-theme="light"] .success-card-text { color: #475569 !important; }
html[data-theme="light"] .success-card-icon { color: #334155 !important; }

/* Migration banner — light mode */
html[data-theme="light"] .migration-banner { background: linear-gradient(135deg, #818cf8, #a78bfa) !important; }
html[data-theme="light"] .migration-banner .text-white { color: #fff !important; }
html[data-theme="light"] .migration-banner .text-white\/70 { color: rgba(255,255,255,0.85) !important; }
html[data-theme="light"] .migration-banner .text-white\/80 { color: rgba(255,255,255,0.9) !important; }
html[data-theme="light"] .migration-banner .bg-white\/10 { background-color: rgba(255,255,255,0.2) !important; }

/* Gradient button text stays white */
html[data-theme="light"] .btn-primary-gradient {
    color: #fff !important;
}

/* Colored-background buttons — keep white text in light mode */
html[data-theme="light"] button.bg-indigo-600,
html[data-theme="light"] button.bg-indigo-700,
html[data-theme="light"] a.bg-indigo-600,
html[data-theme="light"] a.bg-indigo-700,
html[data-theme="light"] .bg-indigo-500 {
    color: #fff !important;
}

/* Avatar initials */
html[data-theme="light"] .bg-indigo-500\/20 { background-color: rgba(79,70,229,0.1) !important; }
html[data-theme="light"] .bg-violet-500\/20 { background-color: rgba(124,58,237,0.1) !important; }
html[data-theme="light"] .bg-emerald-500\/20 { background-color: rgba(5,150,105,0.1) !important; }

/* ── Sitewide container width ──────────────────────────────── */
.max-w-7xl { max-width: 80rem; } /* 1280px, matching hosting.com */

/* ── Pricing table ─────────────────────────────────────────── */
.pricing-table-wrap { background: rgba(255,255,255,0.02); }
.pricing-sticky-th {
    position: sticky;
    top: 56px; /* nav header height only (h-14 = 3.5rem = 56px); announcement bar is not sticky */
    z-index: 40; /* below nav z-50 but above page content */
    overflow: hidden;
}
/* Alternating row tint */
.pricing-table-wrap tbody tr:nth-child(even) { background: rgba(255,255,255,0.025); }
/* Plan card */
.plan-card { transition: border-color 0.25s, box-shadow 0.25s; }
.plan-card:hover { border-color: rgba(99,102,241,0.3); box-shadow: 0 8px 30px rgba(99,102,241,0.08); }
.plan-card ul li strong { font-weight: 700; }
.section-toggle:active { background: rgba(255,255,255,0.04); }

/* Tooltip on info icon */
.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 6px;
    background: #1e1b4b;
    color: #c7d2fe;
    border: 1px solid rgba(99,102,241,0.25);
    pointer-events: none;
    transition: opacity 0.15s, visibility 0.15s;
    z-index: 20;
}
.tooltip-text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1e1b4b;
}
.group:hover .tooltip-text { visibility: visible; opacity: 1; }

/* Light mode overrides for pricing table */
html[data-theme="light"] .pricing-table-wrap { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08) !important; }
html[data-theme="light"] .pricing-table-wrap tbody tr:nth-child(even) { background: rgba(99,102,241,0.04); }
html[data-theme="light"] .pricing-sticky-th { background: #f8fafc !important; }
html[data-theme="light"] .plan-card { background: #fff; border-color: rgba(0,0,0,0.1); }
html[data-theme="light"] .plan-card:hover { border-color: rgba(99,102,241,0.4); box-shadow: 0 8px 30px rgba(99,102,241,0.1); }
html[data-theme="light"] .plan-card-featured { background: rgba(99,102,241,0.04); border-color: rgba(99,102,241,0.2); }
html[data-theme="light"] .plan-card-featured .text-indigo-300\/80 { color: #4f46e5; }
html[data-theme="light"] .tooltip-text { background: #eef2ff; color: #3730a3; border-color: rgba(99,102,241,0.2); }
html[data-theme="light"] .tooltip-text::after { border-top-color: #eef2ff; }

/* ── Featured plan price gradient (dark: white→indigo-100, light: indigo→violet) ── */
.featured-plan-price {
    background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
html[data-theme="light"] .featured-plan-price {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Grade Box / Sticky Stacking Cards ── */
.grade-box {
    padding-bottom: 10px;
}
.grade-title {
    position: sticky;
    top: 100px;
    z-index: 0;
}
.grade-card {
    position: sticky;
    top: 200px;
    z-index: 1;
    background: rgba(10, 10, 20, 0.97);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 24px;
    padding: 40px 36px;
    margin-bottom: 24px;
    transition: all 0.3s ease;
    overflow: hidden;
}
.grade-card-1 { z-index: 1; }
.grade-card-2 { z-index: 2; }
.grade-card-3 { z-index: 3; }
.grade-card-4 { z-index: 4; }
.grade-card-img {
    height: 100%;
    padding: 0;
    overflow: hidden;
    display: flex;
}
.grade-img {
    display: block;
    object-fit: cover;
    max-height: 340px;
    width: auto;
    border-radius: 12px;
}

@media (max-height: 800px) {
    .grade-title { position: static; }
    .grade-card { top: 120px; }
}
@media (max-width: 1024px) {
    .grade-title { position: static; }
    .grade-card {
        position: static;
        padding: 28px 20px;
        margin-bottom: 20px;
    }
    .grade-card-img { justify-content: center; }
    .grade-img { max-height: 260px; }
}
@media (max-width: 640px) {
    .grade-img { max-height: 200px; width: 100%; object-fit: contain; }
}
/* ── DNS Flow Animation ── */
.dns-flow-container {
    position: relative;
    padding: 20px 0;
}
.dns-node-card {
    background: rgba(255,255,255,0.03);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 4px 24px rgba(0,0,0,0.2);
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4,0,0.2,1);
}
.dns-node-card:hover {
    border-color: rgba(255,255,255,0.15);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.dns-source-card,
.dns-server-card {
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.6s cubic-bezier(0.4,0,0.2,1);
}
.dns-server-card {
    transform: translateX(20px);
}
.dns-source-card.dns-active,
.dns-server-card.dns-active {
    opacity: 1;
    transform: translateX(0);
}
.dns-hub {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.7s cubic-bezier(0.4,0,0.2,1);
}
.dns-hub.dns-hub-active {
    opacity: 1;
    transform: scale(1);
}
.dns-hub-glow {
    animation: dnsGlow 3s ease-in-out infinite;
}
@keyframes dnsGlow {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.5; }
}
.dns-line {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.dns-line-active {
    transform: scaleX(1);
}
.dns-dot {
    transition: all 0.4s ease;
}
.dns-pulse {
    animation: dnsPulse 2s ease-in-out infinite;
}
@keyframes dnsPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.dns-query-row {
    transition: all 0.5s cubic-bezier(0.4,0,0.2,1);
}
.dns-row-active {
    opacity: 1 !important;
    transform: translateX(0) !important;
}
.dns-query-row:nth-child(2) { transition-delay: 0.15s; }
.dns-query-row:nth-child(3) { transition-delay: 0.3s; }
.dns-query-row:nth-child(4) { transition-delay: 0.45s; }
/* SVG connecting lines */
.dns-svg-line {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    transition: stroke-dashoffset 1s cubic-bezier(0.4,0,0.2,1);
    opacity: 0.6;
}
.dns-svg-active {
    stroke-dashoffset: 0;
}
/* Data particles */
.dns-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dns-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(139,92,246,0.8);
    box-shadow: 0 0 8px rgba(139,92,246,0.6);
    opacity: 0;
    transition: opacity 0.5s;
}
.dns-particles-active .dns-particle { opacity: 1; }
.dns-particle-1 {
    top: 28%;
    animation: particleFlow1 3s ease-in-out infinite;
}
.dns-particle-2 {
    top: 50%;
    animation: particleFlow2 3s ease-in-out infinite 0.5s;
}
.dns-particle-3 {
    top: 72%;
    animation: particleFlow3 3s ease-in-out infinite 1s;
}
@keyframes particleFlow1 {
    0% { left: 32%; opacity: 0; }
    10% { opacity: 1; }
    45% { left: 50%; opacity: 1; }
    55% { left: 50%; opacity: 1; }
    90% { left: 68%; opacity: 1; }
    100% { left: 70%; opacity: 0; }
}
@keyframes particleFlow2 {
    0% { left: 32%; opacity: 0; }
    10% { opacity: 1; }
    45% { left: 50%; opacity: 1; }
    55% { left: 50%; opacity: 1; }
    90% { left: 68%; opacity: 1; }
    100% { left: 70%; opacity: 0; }
}
@keyframes particleFlow3 {
    0% { left: 32%; opacity: 0; }
    10% { opacity: 1; }
    45% { left: 50%; opacity: 1; }
    55% { left: 50%; opacity: 1; }
    90% { left: 68%; opacity: 1; }
    100% { left: 70%; opacity: 0; }
}
/* Light mode DNS */
html[data-theme="light"] .dns-node-card {
    background: #fff;
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
html[data-theme="light"] .dns-node-card .text-white { color: #1f2937; }
html[data-theme="light"] .dns-node-card .text-white\/50 { color: #6b7280; }
html[data-theme="light"] .dns-node-card .text-white\/40 { color: #9ca3af; }
html[data-theme="light"] .dns-node-card .bg-white\/5 { background: rgba(0,0,0,0.03); }
html[data-theme="light"] .dns-node-card .bg-white\/10 { background: rgba(0,0,0,0.05); }
/* Light mode: diagram panel */
html[data-theme="light"] .dns-flow-container {
    background: #f8fafc !important;
    border-color: rgba(99,102,241,0.12) !important;
    box-shadow: 0 4px 24px rgba(99,102,241,0.06) !important;
}
/* Light mode: stats bar */
html[data-theme="light"] .dns-stats-bar {
    background: #f8fafc !important;
    border-color: rgba(99,102,241,0.12) !important;
}
html[data-theme="light"] .dns-stats-bar > div {
    border-color: rgba(99,102,241,0.1) !important;
}

/* Light mode */
html[data-theme="light"] .grade-card {
    background: #fff;
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

/* ── Reduced-motion: disable heavy infinite animations ── */
@media (prefers-reduced-motion: reduce) {
    .hero-float-icon,
    .animate-float,
    .data-dot-1,
    .data-dot-2,
    .data-dot-3,
    .data-dot-4,
    .data-dot-5,
    .why-yoho-globe,
    .dns-hub-glow,
    .dns-pulse,
    .dns-particle-1,
    .dns-particle-2,
    .dns-particle-3 {
        animation: none !important;
    }
}


/* =============================================
   HERO RIPPLE ORBIT WIDGET (homepage)
   ============================================= */
.ripple-orbit-wrap {
    position: relative;
    width: 600px;
    height: 600px;
    max-width: 100%;
    flex-shrink: 0;
}
.orbit-ring {
    position: absolute;
    top: 50%; left: 50%;
    border-radius: 50%;
    transform: translate(-50%,-50%);
    border: 1px solid rgba(255,255,255,.10);
    pointer-events: none;
    animation: orbitPulse 2s cubic-bezier(.55,0,.1,1) infinite;
}
/* 7 rings — exact Cloudexter backgrounds/delays, scaled 700→480px */
.orbit-ring-1 { width:180px; height:180px; background:radial-gradient(circle,#cecbcb38,#d7d1d11f); animation-delay:0s;   }
.orbit-ring-2 { width:240px; height:240px; background:radial-gradient(circle,#b3b0b02e,#d7d1d11a); animation-delay:.06s; }
.orbit-ring-3 { width:300px; height:300px; background:radial-gradient(circle,#8c8a8a29,#d7d1d114); animation-delay:.12s; }
.orbit-ring-4 { width:360px; height:360px; background:radial-gradient(circle,#82808024,#d7d1d10f); animation-delay:.18s; }
.orbit-ring-5 { width:420px; height:420px; background:radial-gradient(circle,#5e5c5c1f,#d7d1d10f); animation-delay:.24s; }
.orbit-ring-6 { width:480px; height:480px; background:radial-gradient(circle,#35343414,#d7d1d114); animation-delay:.30s; }
.orbit-ring-7 { width:540px; height:540px; background:radial-gradient(circle,#35343414,#d7d1d114); animation-delay:.30s; }
/* Exact Cloudexter keyframes — gentle breathing */
@keyframes orbitPulse {
    0%,100% { transform:translate(-50%,-50%) scale(.97); }
    50%     { transform:translate(-50%,-50%) scale(1.03); }
}
/* Center logo orb */
.orbit-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 112px; height: 112px;
    border-radius: 50%;
    background: transparent;
    display: flex; align-items: center; justify-content: center;
    z-index: 10;
    box-shadow:
        0 0 0 12px rgba(99,102,241,.10),
        0 0 0 22px rgba(99,102,241,.05),
        0 10px 40px rgba(99,102,241,.40);
}
.orbit-logo { width:112px; height:112px; border-radius:50%; display:block; object-fit:cover; }
/* Circular icon badges */
.orbit-icon {
    position: absolute;
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    z-index: 5;
    background: rgba(15,15,25,.88);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 4px 16px rgba(0,0,0,.40);
    animation: iconPulse 2s cubic-bezier(.55,0,.1,1) infinite;
}
.orbit-icon-svg { width:68%; height:68%; display:block; }
/* Icons pulse out-and-in in sync with the ring they sit on (strong, visible) */
@keyframes iconPulse {
    0%, 100% { transform: scale(.88); }
    50%       { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
    .orbit-ring  { animation:none !important; transform:translate(-50%,-50%) !important; }
    .orbit-icon  { animation:none !important; }
}
/* Light-mode overrides */
html[data-theme="light"] .orbit-ring   { border-color:rgba(99,102,241,.15); }
html[data-theme="light"] .orbit-ring-1 { background:radial-gradient(circle,rgba(99,102,241,.10),rgba(139,92,246,.05)); }
html[data-theme="light"] .orbit-ring-2 { background:radial-gradient(circle,rgba(99,102,241,.07),rgba(139,92,246,.03)); }
html[data-theme="light"] .orbit-ring-3 { background:radial-gradient(circle,rgba(99,102,241,.05),rgba(139,92,246,.02)); }
html[data-theme="light"] .orbit-ring-4 { background:radial-gradient(circle,rgba(0,0,0,.04),transparent); border-color:rgba(0,0,0,.08); }
html[data-theme="light"] .orbit-ring-5 { background:radial-gradient(circle,rgba(0,0,0,.03),transparent); border-color:rgba(0,0,0,.06); }
html[data-theme="light"] .orbit-ring-6 { background:transparent; border-color:rgba(0,0,0,.04); }
html[data-theme="light"] .orbit-ring-7 { background:transparent; border-color:rgba(0,0,0,.02); }
html[data-theme="light"] .orbit-icon   { background:rgba(255,255,255,.95); border-color:rgba(0,0,0,.10); box-shadow:0 4px 12px rgba(0,0,0,.12); }




/* ── CLS reservations for JS-injected components ── */
#site-header {
    min-height: 0;
}
/* #site-footer min-height removed — footer is statically rendered by build-html.js */

/* ── Upgrade split card (home page: Shared → Cloud) ── */
.upgrade-split-card {
    border-radius: 1rem;
    overflow: hidden;
    /* dark mode */
    background: rgba(15,23,42,0.55);
    border: 1px solid rgba(255,255,255,0.07);
}
.upgrade-split-left {
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.upgrade-split-left h3 {
    color: #f1f5f9;
}
.upgrade-blue {
    color: #3b82f6;
}
.upgrade-icon {
    display: block;
    width: 1.375rem;   /* 22px */
    height: 1.375rem;
    color: rgba(255,255,255,0.65);
    flex-shrink: 0;
}
.upgrade-title {
    font-size: 0.8125rem;  /* ~13px */
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 0.375rem;
    line-height: 1.4;
}
.upgrade-desc {
    font-size: 0.75rem;
    color: #94a3b8;
    line-height: 1.6;
}
@media (min-width: 1024px) {
    .upgrade-split-left {
        border-bottom: none;
        border-right: 1px solid rgba(255,255,255,0.07);
    }
}
/* Cells: vertical centering */
.upgrade-reason {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Dividers — mobile: 2-col */
.upgrade-split-reasons > .upgrade-reason {
    border-right: 1px solid rgba(255,255,255,0.07);
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.upgrade-split-reasons > .upgrade-reason:nth-child(2n) { border-right: none; }
.upgrade-split-reasons > .upgrade-reason:nth-last-child(-n+2) { border-bottom: none; }
@media (min-width: 1024px) {
    .upgrade-split-reasons > .upgrade-reason              { border-bottom: none; }
    .upgrade-split-reasons > .upgrade-reason:nth-child(2) { border-right: 1px solid rgba(255,255,255,0.07); }
    .upgrade-split-reasons > .upgrade-reason:last-child   { border-right: none; }
}
/* ── Light mode — matches the screenshot exactly ── */
html[data-theme="light"] .upgrade-split-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
html[data-theme="light"] .upgrade-split-left {
    border-color: #e5e7eb;
    background: none;
}
html[data-theme="light"] .upgrade-blue {
    color: #2563eb;
}
html[data-theme="light"] .upgrade-split-left h3 {
    color: #0f172a;
}
html[data-theme="light"] .upgrade-icon {
    color: #374151;
}
html[data-theme="light"] .upgrade-title {
    color: #111827;
}
html[data-theme="light"] .upgrade-desc {
    color: #6b7280;
}
html[data-theme="light"] .upgrade-split-reasons > .upgrade-reason {
    border-color: #e5e7eb;
}
html[data-theme="light"] .upgrade-split-left { border-color: #e5e7eb; }