/* ============================================================
   ePOC SIGNATURE MOTIF — "THE SWITCH"
   ------------------------------------------------------------
   The brand mark's "O" is a toggle switch — connection made
   visible. This file turns that single shape into a systemic
   design language: buttons act like switches being thrown on,
   included/excluded features are literal on/off toggles,
   and the background is populated with the same glyph instead
   of generic blobs — so every screen is recognizably ePOC.
   ============================================================ */

/* ---------- 1. Core reusable glyph ---------- */
.switch-glyph {
    --sw-w: 64px;
    --sw-h: 32px;
    --sw-stroke: 2px;
    --sw-track: rgba(200, 200, 200, 0.2);
    --sw-border:#1A1E40;
    --sw-knob: var(--text-disabled);
    --sw-glow: transparent;
    position: relative;
    display: inline-block;
    width: var(--sw-w);
    height: var(--sw-h);
    min-width: var(--sw-w);
    border-radius: var(--sw-h);
    background: var(--sw-track);
    border: var(--sw-stroke) solid var(--sw-border);
    box-sizing: border-box;
    vertical-align: middle;
}

.switch-glyph::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 14%;
    width: calc(var(--sw-h) * 0.62);
    height: calc(var(--sw-h) * 0.62);
    border-radius: 50%;
    background: var(--sw-knob);
    transform: translateY(-50%);
    transition: left 0.45s cubic-bezier(0.4, 0, 0.2, 1), background 0.35s ease, box-shadow 0.35s ease;
    box-shadow: 0 0 0 rgba(189, 243, 223, 0);
}
.theme-light .switch-glyph.is-on {
    --sw-knob: #6266FE;
}
.switch-glyph.is-on {
    --sw-track: rgba(189, 243, 223, 0.1);
    --sw-knob: var(--color-mint);
    --sw-border:#1A1E40;
    --sw-glow: rgba(189, 243, 223, 0.55);
}

.switch-glyph.is-on::after {
    left: calc(100% - (var(--sw-h) * 0.62) - 14% + 2px);
    box-shadow: 0 0 14px var(--sw-glow);
}

/* ---------- 2. Feature lists as literal toggles ---------- */
/* Turns "included / excluded" into an on/off switch instead of emoji checkmarks */
.plan-features li,
.feature-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.plan-features li .switch-glyph,
.feature-row .switch-glyph {
    --sw-w: 34px;
    --sw-h: 17px;
    --sw-stroke: 1.5px;
}

.plan-features li.disabled .switch-glyph {
    --sw-track: rgba(255, 255, 255, 0.1);
    --sw-border:#1A1E40;
    --sw-knob: var(--text-disabled);
}

/* ---------- 3. Buttons that throw a switch ---------- */
/* Primary / secondary CTAs get a small, fixed-size switch track near the right
   edge. The "knob" is drawn as a dot inside that fixed track using
   background-position, so its travel distance never depends on the button's
   own width — this is what broke the old version on short buttons: a
   right-position tied to the button's total width could invert direction or
   fly off-frame on narrow header/footer buttons. Fixed geometry, transitioned
   with a single ease-out, on every button size. */
.btn-primary,
.btn-secondary, .btn-secondary-2 {
    border-radius: var(--radius-full);
    padding-right: 64px;
    position: relative;
}

.btn.size-lg {
    padding-right: 74px;
}

.btn-sm.btn-primary,
.btn-sm.btn-secondary, .btn-sm.btn-secondary-2 {
    padding-right: 50px;
}

.btn-primary::after,
.btn-secondary::after, .btn-secondary-2::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 14px;
    width: 34px;
    height: 16px;
    border-radius: 16px;
    transform: translateY(-50%);
    border: 1.5px solid currentColor;
    opacity: 0.9;
    background-repeat: no-repeat;
    background-size: 12px 12px;
    background-position: 3px center;
    background-image: radial-gradient(circle, currentColor 0 5px, transparent 5.2px);
    transition: background-position 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease;
    box-shadow: 0 0 0 rgba(189, 243, 223, 0);
}

.btn.size-lg::after {
    width: 38px;
    height: 18px;
    right: 18px;
    background-size: 13px 13px;
}

.btn-sm.btn-primary::after,
.btn-sm.btn-secondary::after,
.btn-sm.btn-secondary-2::after {
    width: 26px;
    height: 13px;
    right: 10px;
    background-size: 9px 9px;
}

.btn-primary::after {
    color: #080C19;
}

.btn-primary:hover::after,
.btn-secondary:hover::after,
.btn-secondary-2:hover::after {
    background-position: calc(100% + 0px) center;
    box-shadow: 0 0 10px rgba(181, 186, 255, 0.65);
}

.btn.size-lg:hover::after {
    background-position: calc(100% - 0px) center;
}

.btn-sm.btn-primary:hover::after,
.btn-sm.btn-secondary:hover::after,
.btn-sm.btn-secondary-2:hover::after {
    background-position: calc(100% - 0px) center;
}

.btn-text::after {
    content: none;
}

/* ---------- 4. Badge pill gets its own mini brand mark ---------- */
/* Adds a tiny switch glyph before the label. badge-pill is already display:inline-flex,
   so order:-1 places this pseudo-element first without disturbing the existing ::before shimmer. */
.badge-pill {
    padding-left: 14px;
}

.badge-pill::after {
    content: '';
    order: -1;
    width: 20px;
    height: 10px;
    min-width: 20px;
    border-radius: 10px;
    border: 1.5px solid currentColor;
    display: inline-block;
    background-image: radial-gradient(circle at 70% 50%, currentColor 0 3px, transparent 3.2px);
}

/* ---------- 5. Ambient background glyphs (replaces generic "blob" feel) ---------- */
.switch-decor {
    position: absolute;
    display: block;
    border-radius: 999px;
    border: 3px solid transparent;
    pointer-events: none;
    opacity: 0.16;
    filter: blur(1px);
}

.switch-decor::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}

.switch-decor.sd-1 {
    width: 340px;
    height: 170px;
    top: 8%;
    right: -80px;
    border-color: var(--color-mint);
    animation: switchDrift1 22s ease-in-out infinite alternate;
}
.switch-decor.sd-1::after {
    left: 14%;
    width: 100px;
    height: 100px;
    background: var(--color-mint);
    filter: blur(30px);
}

.switch-decor.sd-2 {
    width: 220px;
    height: 110px;
    bottom: 10%;
    left: -60px;
    border-color: var(--color-indigo);
    animation: switchDrift2 28s ease-in-out infinite alternate;
}
.switch-decor.sd-2::after {
    left: auto;
    right: 12%;
    width: 70px;
    height: 70px;
    background: var(--color-indigo);
    filter: blur(24px);
}

.switch-decor.sd-3 {
    width: 150px;
    height: 75px;
    top: 42%;
    left: 6%;
    border-color: var(--color-accent-cyan);
    opacity: 0.12;
    animation: switchDrift1 34s ease-in-out infinite alternate-reverse;
}
.switch-decor.sd-3::after {
    left: 12%;
    width: 46px;
    height: 46px;
    background: var(--color-accent-cyan);
    filter: blur(18px);
}

@keyframes switchDrift1 {
    0%   { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(-40px, 30px) rotate(8deg); }
}

@keyframes switchDrift2 {
    0%   { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(30px, -24px) rotate(-6deg); }
}

@media (max-width: 768px) {
    .switch-decor.sd-1 { width: 200px; height: 100px; }
    .switch-decor.sd-2 { width: 150px; height: 75px; }
    .switch-decor.sd-3 { display: none; }

    /* Shrink the pill-switch glyph on mobile and keep the button's
       padding-right proportionate to it, so button text never collides
       with (or sits flush against) the animated switch. */
    .btn-primary,
    .btn-secondary, .btn-secondary-2 {
        padding-right: 52px;
    }

    .btn.size-lg {
        padding-right: 58px;
    }

    .btn-primary::after,
    .btn-secondary::after,
    .btn-secondary-2::after {
        width: 26px;
        height: 13px;
        right: 12px;
        background-size: 9px 9px;
    }

    .btn.size-lg::after {
        width: 28px;
        height: 14px;
        right: 14px;
        background-size: 10px 10px;
    }
}

/* ---------- 6. Hero signature mark ---------- */
.hero-switch-mark {
    position: relative;
    width: 220px;
    height: 110px;
    margin: 48px auto 0;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(98, 102, 254, 0.14), rgba(189, 243, 223, 0.1));
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: 0 0 60px rgba(189, 243, 223, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.hero-switch-mark::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #dffaf3, var(--color-mint) 70%);
    box-shadow: 0 0 40px rgba(189, 243, 223, 0.7);
    animation: heroKnobBreathe 5s ease-in-out infinite;
}

@keyframes heroKnobBreathe {
    0%, 100% { left: 10px; }
    50% { left: 120px; }
}

@media (prefers-reduced-motion: reduce) {
    .switch-decor,
    .switch-glyph::after,
    .hero-switch-mark::after,
    .btn-primary::after,
    .btn-secondary::after,
    .btn-secondary-2::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ---------- 7. Theme toggle IS a switch ---------- */
/* Replaces the old swapped-PNG icon approach with the same brand glyph used
   everywhere else: dark mode = knob left / dim, light mode = knob right / lit. */
.theme-toggle {
    width: 48px;
    height: 24px;
    border-radius: 999px;
    padding: 0;
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid var(--glass-border);
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
}

.theme-toggle:hover {
    transform: none;
    border-color: var(--glass-border-hover);
    background: rgba(255, 255, 255, 0.08);
}

.theme-toggle-icon {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-muted);
    background-image: none !important;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.35s ease, box-shadow 0.35s ease;
    box-shadow: 0 0 0 rgba(189, 243, 223, 0);
}

.theme-toggle-icon::before {
    content: none;
}

body.theme-light .theme-toggle-icon {
    left: calc(100% - 20px);
    background: var(--color-indigo);
    box-shadow: 0 0 12px rgba(189, 243, 223, 0.6);
}

/* ---------- 9. FAQ accordion indicator = the brand switch ---------- */
/* Replaces the generic chevron with the ePOC pill/switch mark itself:
   closed question = switch off, expanded question = switch on. */
.accordion-trigger .accordion-switch {
    --sw-w: 42px;
    --sw-h: 21px;
    --sw-stroke: 1.5px;
    flex-shrink: 0;
    margin-left: 16px;
}

.theme-light .accordion-item.open .accordion-switch {
    --sw-track: rgba(189, 243, 223, 0.12);
    --sw-border:#1A1E40;
    --sw-knob: var(--color-indigo);
}

.accordion-item.open .accordion-switch {
    --sw-track: rgba(189, 243, 223, 0.12);
    --sw-border:#1A1E40;
    --sw-knob: var(--color-mint);
}

.accordion-item.open .accordion-switch::after {
    left: calc(100% - (var(--sw-h) * 0.62) - 14% + 2px);
    box-shadow: 0 0 12px rgba(189, 243, 223, 0.55);
}

/* ---------- 8. Theme-aware stat card embed ---------- */
/* Two iframes (dark/light exports of the same card) stacked and crossfaded
   by the same body.theme-light class the theme toggle already sets — an
   iframe is a separate document, so it can't see body classes on its own. */
.stat-card-embed {
    container-type: inline-size;
    container-name: statcard;
    position: relative;
    /* Keeps a 20px gutter on narrow screens, caps at the card's native
       600px width on everything else — no different than before on desktop. */
    width: min(100% - 40px, 600px);
    aspect-ratio: 600 / 460;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 22px;
}

/* The card's own document is a fixed 600x460 layout (canvas mesh, node
   animation, the LIVE tag) that can't reflow on its own. Rather than let it
   get clipped at small widths, keep the iframe at its native 600x460 and
   scale the whole element down to fit the container — everything inside
   (canvas, fonts, the pulsing LIVE dot) shrinks together, proportionally,
   with nothing cropped or overlapping. */
.stat-card-frame {
    position: absolute;
    top: 0;
    left: calc(50% - 300px);
    width: 600px;
    height: 460px;
    border: 0;
    display: block;
    transform: scale(calc(100cqw / 600px));
    transform-origin: top center;
    transition: opacity 0.4s ease;
}

/* Fallback for browsers without container query units: fall back to a
   viewport-based scale so the card still shrinks instead of clipping. */
@supports not (width: 1cqw) {
    .stat-card-frame {
        transform: scale(min(1, calc((100vw - 40px) / 600px)));
    }
}

.stat-card-light {
    opacity: 0;
    pointer-events: none;
}

.stat-card-dark {
    opacity: 1;
    pointer-events: auto;
}

body.theme-light .stat-card-dark {
    opacity: 0;
    pointer-events: none;
}

body.theme-light .stat-card-light {
    opacity: 1;
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .stat-card-frame {
        transition: none;
    }
}

/* ---------- 10. Kinetic stacked headline (Home) ---------- */
.kinetic-section {
    padding: 60px 0 20px;
}

.kinetic-line {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2.25rem, 6vw, 4.5rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--text-light);
    margin: 0;
}

/* ---------- 11. TDNT client-base stat line ---------- */
.about-company-stat {
    margin-top: 16px;
    font-size: 15px;
    color: var(--text-muted);
}

.about-company-stat strong {
    color: var(--color-indigo);
    font-family: var(--font-display);
    font-weight: 800;
}

/* ---------- 12. Footer social row ---------- */
.footer-social {
    display: flex;
    gap: 16px;
    margin-top: 14px;
}

.footer-social a {
    font-size: 12px;
    color: var(--footer-muted);
    text-decoration: none;
    transition: var(--transition-smooth);
}

.footer-social a:hover {
    color: var(--color-mint);
    transform: translateY(-2px);
}