/* ============================================================
   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);
}
.switch-glyph.is-on {
    --sw-track: rgba(189, 243, 223, 0.1);
    --sw-knob: #6266FE;
    --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;
    }
}

/* ---------- 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;
}

.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::after {
    left: calc(100% - (var(--sw-h) * 0.62) - 14% + 2px);
    box-shadow: 0 0 12px rgba(189, 243, 223, 0.55);
}

/* ---------- 8. Stat card embed ---------- */
.stat-card-embed {
    container-type: inline-size;
    container-name: statcard;
    position: relative;
    /* This box's own size is the section's layout footprint (it's what sets
       the gap to the section below), sized to match the visible card, not
       the wider/taller iframe canvas behind it. Keeps a 20px gutter on
       narrow screens, caps at the card's native 600px width otherwise. */
    width: min(100% - 40px, 600px);
    aspect-ratio: 600 / 460;
    margin: 0 auto;
    overflow: visible;
}

/* The card's own document is a fixed 680x560 layout (canvas mesh, node
   animation, the LIVE tag) that can't reflow on its own. It's deliberately
   bigger than .stat-card-embed above and left to overflow it (note
   overflow:visible there): the card itself is only 560x420, and the extra
   room around it is what lets the drop shadow fade out on every side
   before hitting the canvas edge, instead of getting hard-clipped into a
   visible line around the card. Letting it overflow rather than growing
   the container keeps that breathing room from also pushing the section
   below down the page. Scale the whole element down to fit the container
   width so nothing (canvas, fonts, the pulsing LIVE dot) gets cropped at
   narrow widths. */
.stat-card-frame {
    position: absolute;
    top: 0;
    left: calc(50% - 340px);
    width: 680px;
    height: 560px;
    border: 0;
    display: block;
    /* Divisor is 600, not this frame's own 680 width: 600 is the
       container's reference/cap width, i.e. the width at which the card
       should render at its native, unscaled size. Dividing by 680 here
       would scale the whole card down by 600/680 (~12%) even at full
       desktop width, which is not the intent. */
    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: 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;
}

.social-icon{
    width: 24px;
    height: 24px;
}
.social-icon .social-svg{
    fill: var(--btn-primary-text);
    width: 100%;
    height: 100%;
}
.social-icon:hover .social-svg{
    fill: var(--enterprise-blue);
}

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

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