/* ENT1PRO landing — premium styles + custom skewed button */

/* ═══════════════════════════════════════════════════════════ */
/* TYPOGRAPHY — bumped base sizes for readability (2026-06-24) */
/* Font: Outfit (display) + Inter (body) — lighter, premium feel */
/* ═══════════════════════════════════════════════════════════ */
html { font-size: 16.5px; }
@media (min-width: 768px)  { html { font-size: 17px; } }
@media (min-width: 1280px) { html { font-size: 17.5px; } }
body {
    font-feature-settings: "ss01" on, "cv11" on;
    -webkit-overflow-scrolling: touch;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Outfit looks heavier than DM Sans at the same weight — soften display headings */
.font-display {
    letter-spacing: -0.018em;  /* tighten subtly */
}
h1.font-display, h2.font-display {
    font-weight: 700;          /* not 800 — Outfit at 700 is plenty of impact */
}

/* Bump up tiny "text-xs" labels (Tailwind default 0.75rem ≈ 12.4-13px) — too small for body copy */
body .text-xs    { font-size: 0.82rem;  line-height: 1.45; }   /* ~13.5-14.4px */
body .text-sm    { font-size: 0.94rem;  line-height: 1.55; }   /* ~15.5-16.5px */
body .text-base  { font-size: 1.05rem;  line-height: 1.65; }   /* ~17.3-18.4px */
body .text-lg    { font-size: 1.18rem;  line-height: 1.6;  }   /* ~19.5-20.6px */

/* Article body — extra-readable */
#article-body p,
#article-body li {
    font-size: 1.13rem;    /* ~18.6-19.8px */
    line-height: 1.75;
    color: #334155;
}
#article-body h2 { font-size: 1.85rem; line-height: 1.25; letter-spacing: -0.01em; }
#article-body h3 { font-size: 1.4rem;  line-height: 1.35; }
@media (min-width: 768px) {
    #article-body h2 { font-size: 2.1rem; }
    #article-body h3 { font-size: 1.55rem; }
}

/* Form inputs / buttons — readable on mobile (iOS won't auto-zoom on focus if >= 16px) */
input, textarea, select, button { font-size: 1rem; }

/* Footer small text needs minimum legibility */
footer .text-xs { font-size: 0.84rem; }

/* ═══════════════════════════════════════════════════════════ */
/* STICKY-STACK on mobile (Apple-style cards stack)            */
/* ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* IMPORTANT: any ancestor with transform/filter/perspective/will-change
       creates a new containing block and breaks position:sticky on descendants.
       AOS sets transform on data-aos elements → don't put data-aos on .stack-on-mobile. */
    .stack-on-mobile,
    .stack-on-mobile [data-aos] {
        transform: none !important;
        filter: none !important;
        perspective: none !important;
        will-change: auto !important;
    }
    .stack-on-mobile {
        display: flex !important;
        flex-direction: column;
        gap: 14px;
        overflow: visible !important;
    }
    /* !important needed because Tailwind CDN injects `.relative` (position:relative)
       on cards AFTER this file loads, at same specificity, and would win the cascade. */
    .stack-on-mobile > * {
        position: -webkit-sticky !important;
        position: sticky !important;
        box-shadow: 0 8px 24px -8px rgba(15,23,42,.10), 0 2px 4px -2px rgba(15,23,42,.06);
    }
    /* Progressive top offset for visual staircase (each card 4px lower than previous) */
    .stack-on-mobile > *:nth-child(1)  { top: 78px  !important; z-index: 1; }
    .stack-on-mobile > *:nth-child(2)  { top: 82px  !important; z-index: 2; }
    .stack-on-mobile > *:nth-child(3)  { top: 86px  !important; z-index: 3; }
    .stack-on-mobile > *:nth-child(4)  { top: 90px  !important; z-index: 4; }
    .stack-on-mobile > *:nth-child(5)  { top: 94px  !important; z-index: 5; }
    .stack-on-mobile > *:nth-child(6)  { top: 98px  !important; z-index: 6; }
    .stack-on-mobile > *:nth-child(7)  { top: 102px !important; z-index: 7; }
    .stack-on-mobile > *:nth-child(8)  { top: 106px !important; z-index: 8; }
    .stack-on-mobile > *:nth-child(9)  { top: 110px !important; z-index: 9; }
    .stack-on-mobile > *:nth-child(10) { top: 114px !important; z-index: 10; }
    .stack-on-mobile > *:nth-child(11) { top: 118px !important; z-index: 11; }
    .stack-on-mobile > *:nth-child(12) { top: 122px !important; z-index: 12; }
    .stack-on-mobile > *:nth-child(13) { top: 126px !important; z-index: 13; }
    .stack-on-mobile > *:nth-child(14) { top: 130px !important; z-index: 14; }
    .stack-on-mobile > *:nth-child(15) { top: 134px !important; z-index: 15; }
    .stack-on-mobile > *:nth-child(16) { top: 138px !important; z-index: 16; }
    .stack-on-mobile > *:nth-child(17) { top: 142px !important; z-index: 17; }
    .stack-on-mobile > *:nth-child(18) { top: 146px !important; z-index: 18; }

    /* Force solid white bg on cards (so stuck card hides previous text underneath).
       Without this you'd see semi-transparent layers stacking. */
    .stack-on-mobile > .bg-white,
    .stack-on-mobile > div.bg-white,
    .stack-on-mobile > div {
        background-color: #fff !important;
    }
}

/* ═══════════════════════════════════════════════════════════ */
/* CARD PIN — push-pin element in top-right of feature cards    */
/* ═══════════════════════════════════════════════════════════ */
.card-with-pin { position: relative; }

.card-pin {
    --pin-color: #ef4444;
    --pin-color-dark: #b91c1c;
    position: absolute;
    top: -10px;
    right: 18px;
    width: 22px;
    height: 22px;
    pointer-events: none;
    z-index: 5;
    /* Head: 3D-looking ball using radial-gradient (white highlight → color → dark edge) */
    background:
        radial-gradient(circle at 32% 30%,
            rgba(255,255,255,.95) 0%,
            rgba(255,255,255,.55) 12%,
            var(--pin-color) 38%,
            var(--pin-color-dark) 92%,
            rgba(0,0,0,.55) 100%);
    border-radius: 50%;
    box-shadow:
        0 4px 8px -2px rgba(15,23,42,.35),
        0 2px 3px -1px rgba(15,23,42,.20),
        inset -1px -2px 4px rgba(0,0,0,.18),
        inset 1px 2px 3px rgba(255,255,255,.35);
    transform: rotate(-12deg);
    transition: transform .25s ease, top .25s ease;
}

/* Needle: thin steel pin going behind/below the head, slightly angled */
.card-pin::before {
    content: '';
    position: absolute;
    top: 14px;
    left: 50%;
    width: 3px;
    height: 12px;
    background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 60%, #64748b 100%);
    transform: translateX(-50%) rotate(8deg);
    transform-origin: top center;
    border-radius: 0 0 1.5px 1.5px;
    box-shadow:
        1px 0 0 rgba(0,0,0,.15),
        -1px 0 0 rgba(255,255,255,.5);
    z-index: -1;
}

/* Tiny highlight dot on the head (top-left specular) */
.card-pin::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 5px;
    width: 6px;
    height: 5px;
    background: rgba(255,255,255,.85);
    border-radius: 50%;
    filter: blur(1px);
    transform: rotate(-30deg);
}

/* Subtle hover wobble on the parent card */
.card-with-pin:hover .card-pin {
    transform: rotate(-6deg) scale(1.08);
    top: -12px;
}

/* ─── Color rotation (8-step cycle) ─── */
.card-with-pin:nth-of-type(8n+1) .card-pin { --pin-color: #ef4444; --pin-color-dark: #b91c1c; } /* red */
.card-with-pin:nth-of-type(8n+2) .card-pin { --pin-color: #f59e0b; --pin-color-dark: #b45309; } /* amber */
.card-with-pin:nth-of-type(8n+3) .card-pin { --pin-color: #10b981; --pin-color-dark: #047857; } /* emerald */
.card-with-pin:nth-of-type(8n+4) .card-pin { --pin-color: #3b82f6; --pin-color-dark: #1d4ed8; } /* blue */
.card-with-pin:nth-of-type(8n+5) .card-pin { --pin-color: #8b5cf6; --pin-color-dark: #6d28d9; } /* violet */
.card-with-pin:nth-of-type(8n+6) .card-pin { --pin-color: #ec4899; --pin-color-dark: #be185d; } /* pink */
.card-with-pin:nth-of-type(8n+7) .card-pin { --pin-color: #06b6d4; --pin-color-dark: #0e7490; } /* cyan */
.card-with-pin:nth-of-type(8n+8) .card-pin { --pin-color: #f97316; --pin-color-dark: #c2410c; } /* orange */

/* Slightly smaller pin + adjusted position on mobile (where cards are sticky-stacked) */
@media (max-width: 767px) {
    .card-pin {
        top: -9px;
        right: 16px;
        width: 20px;
        height: 20px;
    }
    .card-pin::before {
        height: 11px;
        top: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .card-pin,
    .card-with-pin:hover .card-pin { transition: none; transform: rotate(-12deg); }
}

/* Respect reduced-motion */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .stack-on-mobile > * { position: static; box-shadow: none; }
}

/* ═══════════════════════════════════════════════════════════ */
/* RESPONSIVE TIGHTENING — make everything truly mobile-first  */
/* ═══════════════════════════════════════════════════════════ */

/* Prevent horizontal overflow caused by long words / emojis / animations.
   IMPORTANT: use `overflow-x: clip` (not `hidden`) — `hidden` makes body a scroll
   container and breaks position:sticky on descendants (incl. stack-on-mobile). */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) {
    html, body { overflow-x: hidden; }
}
img, svg, video { max-width: 100%; height: auto; }
.btn-edge, .btn-edge_lg { max-width: 100%; }
table { max-width: 100%; }

/* Heading gradients: prevent descender clipping AND make line-height tighter on mobile */
@media (max-width: 639px) {
    .heading-grad, .heading-grad-light { line-height: 1.15; padding-bottom: .08em; }
    .heading-grad span { word-break: keep-all; }
}

/* Hero blobs — smaller on mobile */
@media (max-width: 639px) {
    .hero-blob-1 { width: 280px; height: 280px; top: -60px; right: -60px; }
    .hero-blob-2 { width: 220px; height: 220px; bottom: -40px; left: -40px; }
    .hero-blob-3 { display: none; }
    .particle { display: none; }
}

/* Marquee — smaller cards on mobile */
@media (max-width: 639px) {
    .marquee-track .flex-shrink-0 { width: 320px !important; }
    .marquee-track { animation-duration: 30s; }
}

/* Floating accent badges in hero — smaller text on mobile */
@media (max-width: 639px) {
    .tag-edge--lg { padding: 5px 10px; font-size: 10px; }
}

/* Footer cards — tighter padding on mobile */
@media (max-width: 639px) {
    .footer-card { padding: 1.25rem; border-radius: 1.25rem; }
    .footer-contact { padding: 8px 10px; gap: 10px; }
    .footer-contact-icon { width: 34px; height: 34px; font-size: 14px; }
    .footer-contact-text strong { font-size: 12px; }
    .footer-contact-text small { font-size: 10px; }
    .footer-trust-text { font-size: 9px; }
}

/* Pricing cards — no scale on mobile (looks bad) */
@media (max-width: 1023px) {
    .pricing-card.lg\:scale-\[1\.04\] { transform: none !important; }
}

/* Chat widget — slightly smaller on small phones */
@media (max-width: 380px) {
    .chat-trigger { width: 56px; height: 56px; }
    .chat-bubble { right: 70px; max-width: 220px; font-size: 12px; padding: 10px 12px; }
}

/* DE vs US block — stack columns on small mobile (better readability) */
@media (max-width: 419px) {
    .relative.max-w-xl.rounded-2xl.overflow-hidden.border.border-ink-200 .grid-cols-2 {
        grid-template-columns: 1fr;
    }
    .relative.max-w-xl.rounded-2xl.overflow-hidden.border.border-ink-200 .border-r {
        border-right: 0 !important;
        border-bottom: 1px solid #e2e8f0;
    }
}

/* Activity toast — narrower on mobile */
@media (max-width: 419px) {
    .activity-toast { max-width: calc(100vw - 110px); font-size: 11px; padding: 8px 12px 8px 8px; }
    .activity-toast-icon { width: 28px; height: 28px; font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════════ */
/* TAG-EDGE — angular eyebrow/section-tag (matches btn-edge)   */
/* ═══════════════════════════════════════════════════════════ */
/* Ensure heading directly after a tag-edge has consistent spacing.
   Needed because .tag-edge is inline-flex — its margin-bottom doesn't always
   translate to vertical gap before the next block-level sibling. */
.tag-edge + h1,
.tag-edge + h2,
.tag-edge + h3,
.tag-edge + h4 { margin-top: 0.875rem; }

.tag-edge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(79,70,229,.08);
    border: 1px solid rgba(79,70,229,.22);
    color: #3730a3;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1;
    /* Asymmetric clip — angular like Valorant btn */
    clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
    position: relative;
    white-space: nowrap;
}

/* Small marker dot left */
.tag-edge::before {
    content: '';
    display: inline-block;
    width: 4px; height: 4px;
    background: currentColor;
    transform: skew(-15deg);
    flex-shrink: 0;
}

/* Variants — color tones */
.tag-edge--brand    { background: rgba(79,70,229,.10);  border-color: rgba(79,70,229,.25);  color: #3730a3; }
.tag-edge--emerald  { background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.28); color: #047857; }
.tag-edge--amber    { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.32); color: #92400e; }
.tag-edge--rose     { background: rgba(244,63,94,.10);  border-color: rgba(244,63,94,.28);  color: #9f1239; }
.tag-edge--sky      { background: rgba(14,165,233,.10); border-color: rgba(14,165,233,.28); color: #075985; }
.tag-edge--ink      { background: rgba(15,23,42,.06);   border-color: rgba(15,23,42,.18);   color: #0f172a; }
.tag-edge--white    { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.30); color: #fff; }

/* Larger variant — for hero eyebrow */
.tag-edge--lg {
    padding: 7px 14px;
    font-size: 11px;
    gap: 8px;
}
.tag-edge--lg::before {
    width: 6px; height: 6px;
}

/* Live indicator (pulsing dot instead of skewed square) */
.tag-edge--live::before {
    width: 7px; height: 7px;
    border-radius: 50%;
    transform: none;
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16,185,129,.6);
    animation: tag-pulse 2s ease-out infinite;
}
@keyframes tag-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(16,185,129,.5); }
    70%  { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
    100% { box-shadow: 0 0 0 0   rgba(16,185,129,0); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .tag-edge--live::before { animation: none; }
}

/* ═══════════════════════════════════════════════════════════ */
/* HEADING GRADIENTS — modern blue-to-slate text gradient      */
/* ═══════════════════════════════════════════════════════════ */

/* Smooth color-shift animation — slow, subtle, premium */
@keyframes gradient-shift {
    0%   { background-position:   0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position:   0% 50%; }
}

/* Light backgrounds: ink → indigo → brand, animated */
.heading-grad {
    background-image: linear-gradient(110deg,
        #0f172a 0%,    /* ink-900 */
        #1e293b 20%,   /* ink-800 */
        #334155 35%,   /* ink-700 */
        #3730a3 55%,   /* brand-800 */
        #4f46e5 75%,   /* brand-600 */
        #1e293b 100%   /* loops back to ink-800 */
    );
    background-size: 250% 100%;
    background-position: 0% 50%;
    animation: gradient-shift 14s ease-in-out infinite;
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    padding-bottom: .05em;
    display: inline-block;
}

/* Dark backgrounds: white → indigo-light, animated */
.heading-grad-light {
    background-image: linear-gradient(110deg,
        #ffffff 0%,
        #f0f4ff 20%,
        #c7d2fe 40%,
        #a5b4fc 60%,
        #818cf8 80%,
        #ffffff 100%
    );
    background-size: 250% 100%;
    background-position: 0% 50%;
    animation: gradient-shift 14s ease-in-out infinite;
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    padding-bottom: .05em;
    display: inline-block;
}

/* Disable on reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .heading-grad, .heading-grad-light { animation: none; }
}

/* Accent gradient — strong, for accent <span> within heading */
.heading-grad-accent {
    background-image: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #818cf8 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Animated heading hue (very subtle, only on hover for h1/large) */
@keyframes hue-drift {
    0%, 100% { filter: hue-rotate(0deg); }
    50%      { filter: hue-rotate(8deg); }
}
.heading-grad-animated {
    animation: hue-drift 8s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════ */
/* HERO ANIMATIONS — subtle but alive                          */
/* ═══════════════════════════════════════════════════════════ */

/* Floating blob orbs in hero background */
@keyframes blob {
    0%, 100% { transform: translate(0,0) scale(1); }
    25%      { transform: translate(40px,-30px) scale(1.05); }
    50%      { transform: translate(-20px,40px) scale(.95); }
    75%      { transform: translate(30px,20px) scale(1.02); }
}
.hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55;
    pointer-events: none;
    will-change: transform;
}
.hero-blob-1 {
    width: 480px; height: 480px;
    top: -120px; right: -100px;
    background: radial-gradient(circle, #818cf8 0%, transparent 70%);
    animation: blob 18s ease-in-out infinite;
}
.hero-blob-2 {
    width: 380px; height: 380px;
    bottom: -80px; left: -60px;
    background: radial-gradient(circle, #c4b5fd 0%, transparent 70%);
    animation: blob 22s ease-in-out infinite reverse;
    animation-delay: -7s;
}
.hero-blob-3 {
    width: 280px; height: 280px;
    top: 40%; right: 30%;
    background: radial-gradient(circle, #fda4af 0%, transparent 70%);
    animation: blob 24s ease-in-out infinite;
    animation-delay: -12s;
    opacity: .25;
}

/* Slow up-down float (hero image) */
@keyframes float-y {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}
.animate-float { animation: float-y 6s ease-in-out infinite; will-change: transform; }

/* Tilt hover on hero image */
.hero-image-wrap { perspective: 1200px; }
.hero-image-tilt {
    transform-style: preserve-3d;
    transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.hero-image-wrap:hover .hero-image-tilt {
    transform: rotateY(-3deg) rotateX(2deg) translateZ(20px);
}

/* Ping ring (around live badge) */
@keyframes ping-ring {
    0%   { transform: scale(1); opacity: .8; }
    100% { transform: scale(2.4); opacity: 0; }
}
.ping-ring {
    position: absolute; inset: 0;
    border-radius: 50%;
    background: currentColor;
    animation: ping-ring 2s cubic-bezier(0,0,.2,1) infinite;
}

/* Subtle particles drifting */
@keyframes drift {
    from { transform: translateY(0) translateX(0); opacity: 0; }
    10%, 90% { opacity: .35; }
    to { transform: translateY(-120vh) translateX(20px); opacity: 0; }
}
.particle {
    position: absolute;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: #818cf8;
    pointer-events: none;
    animation: drift 18s linear infinite;
}
.particle:nth-child(1) { left: 10%;  bottom: -10px; animation-delay: -2s; }
.particle:nth-child(2) { left: 25%;  bottom: -10px; animation-delay: -8s;  background: #c4b5fd; }
.particle:nth-child(3) { left: 45%;  bottom: -10px; animation-delay: -14s; }
.particle:nth-child(4) { left: 65%;  bottom: -10px; animation-delay: -4s;  background: #fda4af; }
.particle:nth-child(5) { left: 80%;  bottom: -10px; animation-delay: -11s; }
.particle:nth-child(6) { left: 92%;  bottom: -10px; animation-delay: -6s;  background: #c4b5fd; }

/* Reveal on scroll fade-in */
@keyframes reveal {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.reveal-on-scroll {
    opacity: 0;
    animation: reveal .8s ease-out forwards;
}

/* Shimmer on stat cards */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.shimmer-stat {
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
    background-size: 200% 100%;
    animation: shimmer 4s linear infinite;
}

/* ═══════════════════════════════════════════════════════════ */
/* MARQUEE — infinite-scroll carousel for screenshots          */
/* ═══════════════════════════════════════════════════════════ */
@keyframes marquee-x {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee-x 40s linear infinite;
    will-change: transform;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-fade {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

/* Reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
    .hero-blob, .animate-float, .ping-ring, .particle, .shimmer-stat, .marquee-track {
        animation: none !important;
    }
}

/* ═══════ Custom SKEWED button (Valorant-style, ENT1PRO brand) ═══════ */
.btn-edge {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background: none;
    color: #0f172a;
    cursor: pointer;
    position: relative;
    padding: 8px;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .05em;
    transition: all .15s ease;
    display: inline-block;
}
.btn-edge::before,
.btn-edge::after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    left: 0;
    height: calc(50% - 5px);
    border: 1px solid #94a3b8;
    transition: all .15s ease;
}
.btn-edge::before { top: 0; border-bottom-width: 0; }
.btn-edge::after  { bottom: 0; border-top-width: 0; }
.btn-edge:active,
.btn-edge:focus { outline: none; }
.btn-edge:active::before,
.btn-edge:active::after { right: 3px; left: 3px; }
.btn-edge:active::before { top: 3px; }
.btn-edge:active::after { bottom: 3px; }

.btn-edge_lg {
    position: relative;
    display: block;
    padding: 12px 28px;
    color: #fff;
    background-color: #0f172a;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px transparent;
}
.btn-edge_lg::before {
    content: '';
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 2px; height: 2px;
    background-color: #0f172a;
}
.btn-edge_lg::after {
    content: '';
    display: block;
    position: absolute;
    right: 0; bottom: 0;
    width: 4px; height: 4px;
    background-color: #0f172a;
    transition: all .2s ease;
}
.btn-edge_sl {
    display: block;
    position: absolute;
    top: 0; bottom: -1px; left: -8px;
    width: 0;
    background-color: #4f46e5;
    transform: skew(-15deg);
    transition: all .2s ease;
}
.btn-edge_text { position: relative; z-index: 1; }
.btn-edge:hover { color: #0f172a; }
.btn-edge:hover .btn-edge_sl { width: calc(100% + 15px); }
.btn-edge:hover .btn-edge_lg::after { background-color: #fff; }

/* Brand-variant: starts indigo, hovers to dark */
.btn-edge_lg.btn-edge_brand { background-color: #4f46e5; }
.btn-edge_lg.btn-edge_brand::before,
.btn-edge_lg.btn-edge_brand::after { background-color: #4f46e5; }
.btn-edge:hover .btn-edge_lg.btn-edge_brand .btn-edge_sl { background-color: #0f172a; }

/* Emerald variant — for WhatsApp / success */
.btn-edge_lg.btn-edge_emerald { background-color: #10b981; }
.btn-edge_lg.btn-edge_emerald::before,
.btn-edge_lg.btn-edge_emerald::after { background-color: #10b981; }
.btn-edge:hover .btn-edge_lg.btn-edge_emerald .btn-edge_sl { background-color: #047857; }

/* White variant — for dark backgrounds (CTAs on dark sections) */
.btn-edge_lg.btn-edge_white { background-color: #ffffff; color: #0f172a; }
.btn-edge_lg.btn-edge_white::before,
.btn-edge_lg.btn-edge_white::after { background-color: #ffffff; }
.btn-edge_lg.btn-edge_white .btn-edge_text { color: #0f172a; }
.btn-edge:hover .btn-edge_lg.btn-edge_white .btn-edge_sl { background-color: #4f46e5; }
.btn-edge:hover .btn-edge_lg.btn-edge_white .btn-edge_text { color: #fff; }

/* Ghost (transparent) — for dark backgrounds, secondary action */
.btn-edge_lg.btn-edge_ghost {
    background-color: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,.25);
}
.btn-edge_lg.btn-edge_ghost::before,
.btn-edge_lg.btn-edge_ghost::after { background-color: transparent; }
.btn-edge:hover .btn-edge_lg.btn-edge_ghost { border-color: rgba(255,255,255,.6); }
.btn-edge:hover .btn-edge_lg.btn-edge_ghost .btn-edge_sl { background-color: #4f46e5; }

/* Ghost-light — for LIGHT backgrounds (transparent CTA, secondary) */
.btn-edge_lg.btn-edge_ghost-light {
    background-color: transparent;
    color: #334155;
    border: 1px solid #cbd5e1;
}
.btn-edge_lg.btn-edge_ghost-light::before,
.btn-edge_lg.btn-edge_ghost-light::after { background-color: transparent; }
.btn-edge:hover .btn-edge_lg.btn-edge_ghost-light { border-color: #4f46e5; color: #fff; }
.btn-edge:hover .btn-edge_lg.btn-edge_ghost-light .btn-edge_sl { background-color: #4f46e5; }

/* Small variant — for nav button */
.btn-edge-sm { padding: 4px; font-size: 11px; }
.btn-edge-sm .btn-edge_lg { padding: 8px 18px; }

/* Block-level full-width inside pricing card */
.btn-edge.w-full { width: 100%; display: block; }
.btn-edge.w-full .btn-edge_lg { display: block; text-align: center; }

/* Inline-flex variant for tabular CTAs (Hero, Vergleich, Pricing) */
.btn-edge { vertical-align: middle; }

/* ═══════ FAQ accordion smooth open ═══════ */
[data-faq-item] [data-faq-answer] {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}
[data-faq-item].faq-open [data-faq-answer] { max-height: 800px; }
[data-faq-icon] { transition: transform .2s ease; }

/* ═══════ Pricing card lift ═══════ */
.pricing-card { transition: transform .2s ease, box-shadow .2s ease; }
.pricing-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -16px rgba(15,23,42,.18); }

/* ═══════ Hide scrollbar on horizontal carousel ═══════ */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ═══════ Hero mesh gradient (subtle, premium) ═══════ */
.hero-mesh {
    background-image:
        radial-gradient(ellipse 900px 700px at 85% -10%, rgba(99,102,241,.12), transparent 55%),
        radial-gradient(ellipse 700px 500px at -5% 30%, rgba(79,70,229,.08), transparent 55%),
        radial-gradient(ellipse 500px 400px at 50% 110%, rgba(244,114,182,.05), transparent 55%);
}

/* ═══════ Section transition gradients ═══════ */
.section-grad-top {
    background: linear-gradient(180deg, #ffffff 0%, rgba(238,242,255,.4) 100%);
}
.section-grad-bot {
    background: linear-gradient(180deg, rgba(238,242,255,.4) 0%, #ffffff 100%);
}

/* ═══════ Premium card hover ═══════ */
.card-premium {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 1.5rem;
    transition: all .25s ease;
    position: relative;
    overflow: hidden;
}
.card-premium::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(99,102,241,.04) 0%, transparent 50%);
    opacity: 0;
    transition: opacity .25s ease;
}
.card-premium:hover {
    border-color: #c7d2fe;
    box-shadow: 0 24px 50px -16px rgba(79,70,229,.12);
    transform: translateY(-2px);
}
.card-premium:hover::before { opacity: 1; }

/* ═══════ Konfigurator option transition ═══════ */
[data-konfig-branche], [data-konfig-team] {
    transition: all .15s ease;
}

/* ═══════════════════════════════════════════════════════════ */
/* MOBILE STICKY CTA BAR — bottom-fixed, mobile only          */
/* ═══════════════════════════════════════════════════════════ */
.mobile-sticky {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 30;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -8px 24px -4px rgba(15,23,42,.08);
    display: flex;
    gap: 8px;
    transform: translateY(110%);
    transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.mobile-sticky.is-visible { transform: translateY(0); }
@media (min-width: 1024px) {
    .mobile-sticky { display: none; }
}

.mobile-sticky-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 14px;
    /* Angular clip-path — matches btn-edge */
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .02em;
    line-height: 1;
    text-decoration: none;
    transition: transform .15s ease, filter .15s ease;
    color: #fff;
}
.mobile-sticky-btn:active { transform: scale(.97); }
.mobile-sticky-btn:hover  { filter: brightness(1.05); }
.mobile-sticky-btn--wa  { background: linear-gradient(135deg,#10b981,#059669); }
.mobile-sticky-btn--cta { background: linear-gradient(135deg,#4f46e5,#3730a3); }

/* Push body content up on mobile so sticky doesn't overlap footer */
@media (max-width: 1023px) {
    body { padding-bottom: 76px; }
}

/* ─── Back-to-top: angular square (matches btn-edge) ─── */
#backToTop {
    position: fixed !important;
    bottom: 104px !important;
    right: 28px !important;
    width: 44px !important;
    height: 44px !important;
    z-index: 40;
    background: linear-gradient(135deg, #4f46e5, #3730a3) !important;
    border: 0 !important;
    border-radius: 0 !important;
    /* Skewed square clip — matches btn-edge angular language */
    clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px -6px rgba(79,70,229,.5);
    transition: transform .2s ease, filter .2s ease;
    cursor: pointer;
}
#backToTop:hover { filter: brightness(1.1); transform: translateY(-2px); }
#backToTop:active { transform: scale(.94); }

@media (max-width: 1023px) {
    #backToTop {
        bottom: 168px !important;
        right: 20px !important;
    }
}

/* ═══════════════════════════════════════════════════════════ */
/* FLOATING CHAT WIDGET — Przemek-bubble, bottom-right         */
/* ═══════════════════════════════════════════════════════════ */
.chat-widget {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 35;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}
@media (max-width: 1023px) {
    .chat-widget { bottom: 88px; right: 12px; }
}

.chat-trigger {
    position: relative;
    width: 64px; height: 64px;
    border-radius: 50%;
    border: 3px solid #fff;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 12px 32px -8px rgba(79,70,229,.45), 0 4px 12px -2px rgba(15,23,42,.15);
    overflow: visible;
    transition: transform .2s ease, box-shadow .2s ease;
    padding: 0;
}
.chat-trigger:hover { transform: scale(1.08); box-shadow: 0 16px 40px -8px rgba(79,70,229,.55); }
.chat-trigger img {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.chat-trigger-status {
    position: absolute;
    bottom: 2px; right: 2px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #10b981;
    border: 3px solid #fff;
    box-shadow: 0 0 0 0 rgba(16,185,129,.6);
    animation: chat-pulse 2.4s ease-out infinite;
}
@keyframes chat-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(16,185,129,.5); }
    70%  { box-shadow: 0 0 0 14px rgba(16,185,129,0); }
    100% { box-shadow: 0 0 0 0   rgba(16,185,129,0); }
}

/* Welcome bubble next to trigger */
.chat-bubble {
    position: absolute;
    right: 78px;
    bottom: 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px 18px 4px 18px;
    padding: 12px 16px;
    max-width: 260px;
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    line-height: 1.4;
    box-shadow: 0 12px 28px -8px rgba(15,23,42,.18);
    white-space: normal;
    opacity: 0;
    transform: translateY(8px) scale(.92);
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease;
}
.chat-bubble.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.chat-bubble strong { color: #0f172a; }
.chat-bubble-close {
    position: absolute;
    top: 4px; right: 6px;
    width: 18px; height: 18px;
    border: 0; background: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}

/* Expanded panel — list of contact options */
.chat-panel {
    position: absolute;
    right: 0;
    bottom: 84px;
    width: 320px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: 0 24px 60px -16px rgba(15,23,42,.25), 0 8px 24px -4px rgba(15,23,42,.12);
    overflow: hidden;
    opacity: 0;
    transform: translateY(8px) scale(.95);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}
.chat-panel.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
@media (max-width: 1023px) {
    .chat-panel { width: calc(100vw - 24px); right: 0; }
}

.chat-panel-head {
    background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%);
    padding: 20px;
    color: #fff;
    display: flex; gap: 12px; align-items: center;
}
.chat-panel-head img {
    width: 52px; height: 52px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.4);
    object-fit: cover;
}
.chat-panel-head-name { font-weight: 800; font-size: 15px; line-height: 1.2; }
.chat-panel-head-role { font-size: 11px; color: #c7d2fe; margin-top: 2px; }
.chat-panel-head-status {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 4px;
    font-size: 11px; font-weight: 600;
    color: #a7f3d0;
}
.chat-panel-head-status::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: #34d399;
}
.chat-panel-body { padding: 14px; }
.chat-option {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    text-decoration: none;
    color: #334155;
    font-weight: 600;
    font-size: 14px;
    transition: background .15s ease;
    cursor: pointer;
}
.chat-option:hover { background: #f1f5f9; color: #4f46e5; }
.chat-option-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    color: #fff;
    flex-shrink: 0;
}
.chat-option-icon--wa  { background: #25D366; }
.chat-option-icon--ph  { background: #4f46e5; }
.chat-option-icon--ml  { background: #0f172a; }
.chat-option-icon--cal { background: #f59e0b; }
.chat-option-text { display: flex; flex-direction: column; line-height: 1.2; }
.chat-option-sub { font-size: 11px; font-weight: 500; color: #94a3b8; margin-top: 2px; }
.chat-panel-foot {
    padding: 10px 16px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    font-size: 11px;
    color: #64748b;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════ */
/* LIVE ACTIVITY TOAST — bottom-left, auto-rotate              */
/* ═══════════════════════════════════════════════════════════ */
.activity-toast {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 25;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 100px;
    box-shadow: 0 12px 28px -8px rgba(15,23,42,.18);
    max-width: 320px;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity .35s ease, transform .35s ease;
}
.activity-toast.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
@media (max-width: 1023px) {
    .activity-toast {
        left: 12px;
        bottom: 88px;
        max-width: calc(100vw - 24px);
    }
}
.activity-toast-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
    color: #fff;
}
.activity-toast-icon--success { background: linear-gradient(135deg,#10b981,#059669); }
.activity-toast-icon--info    { background: linear-gradient(135deg,#4f46e5,#3730a3); }
.activity-toast-icon--warning { background: linear-gradient(135deg,#f59e0b,#d97706); }
.activity-toast-text { font-size: 12.5px; line-height: 1.35; color: #334155; }
.activity-toast-text strong { color: #0f172a; }
.activity-toast-text small { display: block; font-size: 10.5px; color: #94a3b8; margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════ */
/* MOBILE MENU — fullscreen overlay, dark gradient             */
/* ═══════════════════════════════════════════════════════════ */
.mobile-menu {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: linear-gradient(180deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
    overflow: hidden;
}
.mobile-menu.is-open {
    display: block;
    animation: mm-fade-in .3s ease-out;
}
@keyframes mm-fade-in {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}
body.mobile-menu-open { overflow: hidden; }

/* Background orbs */
.mobile-menu-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .35;
    pointer-events: none;
}
.mobile-menu-orb-1 {
    width: 380px; height: 380px;
    top: -100px; right: -100px;
    background: radial-gradient(circle, #4f46e5 0%, transparent 70%);
}
.mobile-menu-orb-2 {
    width: 300px; height: 300px;
    bottom: -80px; left: -80px;
    background: radial-gradient(circle, #a855f7 0%, transparent 70%);
}
.mobile-menu-grid-overlay {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
    opacity: .5;
}

/* Header inside menu */
.mobile-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
}
.mobile-menu-close-btn {
    width: 44px; height: 44px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.18);
    /* Angular */
    clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
    color: #cbd5e1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all .2s ease;
}
.mobile-menu-close-btn:hover {
    background: rgba(168,85,247,.20);
    color: #fff;
    border-color: rgba(168,85,247,.40);
}

/* Nav links */
.mobile-menu-nav {
    flex: 1;
    overflow-y: auto;
    padding: 16px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mobile-menu-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.08);
    color: #f1f5f9;
    text-decoration: none;
    transition: all .2s ease;
    /* Staggered entrance animation */
    opacity: 0;
    transform: translateX(-12px);
}
.mobile-menu.is-open .mobile-menu-link {
    animation: mm-link-in .4s ease-out forwards;
}
.mobile-menu.is-open .mobile-menu-link:nth-child(1) { animation-delay: .10s; }
.mobile-menu.is-open .mobile-menu-link:nth-child(2) { animation-delay: .14s; }
.mobile-menu.is-open .mobile-menu-link:nth-child(3) { animation-delay: .18s; }
.mobile-menu.is-open .mobile-menu-link:nth-child(4) { animation-delay: .22s; }
.mobile-menu.is-open .mobile-menu-link:nth-child(5) { animation-delay: .26s; }
@keyframes mm-link-in {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}
.mobile-menu-link:hover,
.mobile-menu-link:active {
    background: linear-gradient(135deg, rgba(79,70,229,.20), rgba(168,85,247,.12));
    border-color: rgba(168,85,247,.30);
    transform: translateX(2px);
}
.mobile-menu-link-icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
}
.mobile-menu-link-text { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
.mobile-menu-link-text strong { font-size: 16px; font-weight: 700; color: #fff; }
.mobile-menu-link-text small  { font-size: 11.5px; color: #94a3b8; margin-top: 2px; }
.mobile-menu-link-arrow { color: #64748b; font-size: 14px; transition: transform .2s ease; }
.mobile-menu-link:hover .mobile-menu-link-arrow { transform: translateX(3px); color: #c4b5fd; }

/* Bottom — CTAs + contacts */
.mobile-menu-bottom {
    padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(15,23,42,.4);
    backdrop-filter: blur(8px);
    flex-shrink: 0;
}
.mobile-menu-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 14px;
    /* Angular */
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    color: #c4b5fd;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none;
    transition: all .15s ease;
}
.mobile-menu-secondary:hover {
    background: rgba(168,85,247,.15);
    color: #fff;
}

.mobile-menu-contacts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 14px;
}
.mobile-menu-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px;
    /* Angular */
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    color: #cbd5e1;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    transition: all .15s ease;
}
.mobile-menu-contact:hover { background: rgba(255,255,255,.10); color: #fff; transform: translateY(-1px); }
.mobile-menu-contact-icon {
    width: 36px; height: 36px;
    /* Angular too */
    clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 15px;
}
.mobile-menu-contact-text { line-height: 1; }

.mobile-menu-footnote {
    margin-top: 14px;
    text-align: center;
    font-size: 11px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

@media (prefers-reduced-motion: reduce) {
    .mobile-menu, .mobile-menu-link {
        transition: opacity .15s ease;
        transform: none !important;
        animation: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════ */
/* FOOTER PRO — 3-box gradient layout                          */
/* ═══════════════════════════════════════════════════════════ */
.footer-pro {
    background: linear-gradient(180deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
    color: #cbd5e1;
    position: relative;
}

/* Top accent gradient line (3-color sweep) */
.footer-accent-line {
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(99,102,241,.6) 25%,
        rgba(168,85,247,.6) 50%,
        rgba(244,114,182,.4) 75%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: footer-line-shift 8s linear infinite;
}
@keyframes footer-line-shift {
    from { background-position: 0% 0; }
    to   { background-position: 200% 0; }
}

/* Background mesh orbs */
.footer-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .35;
    pointer-events: none;
}
.footer-orb-1 {
    width: 500px; height: 500px;
    top: -100px; left: -100px;
    background: radial-gradient(circle, #4f46e5 0%, transparent 70%);
}
.footer-orb-2 {
    width: 400px; height: 400px;
    bottom: -80px; right: -80px;
    background: radial-gradient(circle, #a855f7 0%, transparent 70%);
}

/* Faint grid overlay */
.footer-grid-overlay {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    opacity: .5;
}

/* Glassmorphism cards */
.footer-card {
    background: linear-gradient(135deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 100%);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 1.5rem;
    padding: 1.75rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color .25s ease, transform .25s ease;
    position: relative;
    overflow: hidden;
}
.footer-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(79,70,229,.10) 0%, transparent 50%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.footer-card:hover {
    border-color: rgba(168,85,247,.30);
    transform: translateY(-2px);
}
.footer-card:hover::before { opacity: 1; }

/* Contact list inside Box 1 */
.footer-contact {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    text-decoration: none;
    transition: all .15s ease;
}
.footer-contact:hover {
    background: rgba(79,70,229,.10);
    border-color: rgba(99,102,241,.30);
    transform: translateX(2px);
}
.footer-contact-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 16px;
}
.footer-contact-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1; }
.footer-contact-text strong {
    color: #f1f5f9;
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.footer-contact-text small {
    color: #94a3b8;
    font-size: 10.5px;
    font-weight: 500;
    margin-top: 2px;
}

/* Links inside Box 2 + 3 */
.footer-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    color: #cbd5e1;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all .15s ease;
}
.footer-link i {
    color: #818cf8;
    font-size: 13px;
    width: 16px;
    text-align: center;
    transition: color .15s ease;
}
.footer-link:hover {
    background: rgba(255,255,255,.05);
    color: #fff;
    transform: translateX(2px);
}
.footer-link:hover i { color: #c4b5fd; }
.footer-link-accent {
    background: linear-gradient(135deg, rgba(79,70,229,.18), rgba(168,85,247,.10));
    border: 1px solid rgba(99,102,241,.30);
    color: #fff;
    margin-top: 6px;
    font-weight: 700;
}
.footer-link-accent i { color: #c4b5fd; }
.footer-link-accent:hover {
    background: linear-gradient(135deg, rgba(79,70,229,.30), rgba(168,85,247,.20));
    border-color: rgba(168,85,247,.50);
}

/* Trust mini-tiles inside Box 3 */
.footer-trust {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px;
    border-radius: 12px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    text-align: center;
    transition: all .15s ease;
}
.footer-trust:hover {
    background: rgba(16,185,129,.08);
    border-color: rgba(52,211,153,.30);
}
.footer-trust-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #10b981, #047857);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 14px;
}
.footer-trust-text {
    font-size: 10px;
    font-weight: 700;
    color: #cbd5e1;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .footer-card { padding: 1.25rem; }
    .footer-pro { padding-top: 0; }
}

/* ═══════ Print-only utility ═══════ */
@media print {
    .no-print, .mobile-sticky, .chat-widget, .activity-toast { display: none !important; }
}