body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: #F8F9FB;
    color: #111827;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

html {
    overflow-x: clip;
}

@supports not (overflow: clip) {
    body,
    html {
        overflow-x: hidden;
    }
}

.font-mono { font-family: 'Fira Code', monospace; }

nav[data-animate="nav"] {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: var(--promo-banner-height, 0px) !important;
    z-index: 50 !important;
}

.promo-banner {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 60;
    overflow: hidden;
    isolation: isolate;
    background: #fff;
    border-bottom: 1px solid rgba(17, 24, 39, 0.08);
}

.promo-banner::before {
    content: "";
    position: absolute;
    inset: -120% -10%;
    z-index: -2;
    background:
        radial-gradient(circle at 80% 48%, rgba(255, 224, 151, 0.76) 0%, rgba(247, 140, 45, 0.34) 14%, rgba(228, 77, 14, 0.15) 30%, transparent 48%),
        radial-gradient(circle at 24% 44%, rgba(234, 88, 12, 0.13) 0%, rgba(251, 146, 60, 0.08) 32%, transparent 54%),
        linear-gradient(135deg, rgba(255, 247, 237, 0.64) 0%, rgba(255, 237, 213, 0.38) 52%, rgba(184, 38, 20, 0.08) 100%);
}

.promo-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.82) 48%, rgba(255, 255, 255, 0.6) 100%);
}

.promo-banner__inner {
    max-width: 1280px;
    min-height: 44px;
    margin: 0 auto;
    padding: 8px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
}

.promo-banner__copy {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    color: #111827;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.promo-banner__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border-radius: 9px;
    background: linear-gradient(145deg, #FFE7BF 0%, #F97316 48%, #C2410C 100%);
    border: 1px solid rgba(154, 52, 18, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        inset 0 -5px 10px rgba(154, 52, 18, 0.18),
        0 6px 14px rgba(234, 88, 12, 0.2);
    transform: rotate(-8deg);
}

.promo-banner__icon-mark {
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(154, 52, 18, 0.45);
}

.promo-banner__link {
    color: #C2410C;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
    text-decoration: none;
    white-space: nowrap;
}

.promo-banner__link:hover {
    color: #9A3412;
}

.mobile-menu-panel {
    top: calc(var(--promo-banner-height, 0px) + 64px) !important;
}

.landing-hero {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: max(1.5rem, calc((100vw - 1280px) / 2 + 1.5rem)) !important;
    padding-right: max(1.5rem, calc((100vw - 1280px) / 2 + 1.5rem)) !important;
    isolation: isolate;
}

.landing-hero > :not(.hero-ambient-background) {
    position: relative;
    z-index: 2;
}

.hero-ambient-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: #fff;
    contain: paint;
}

.hero-spline-bg__fallback,
.hero-spline-bg__frame,
.hero-bg-softener {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-spline-bg__fallback {
    z-index: 0;
    background: #fff;
}

.hero-spline-bg__frame {
    inset: 0 -6% auto auto;
    width: 74%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    contain: paint;
    transform: translateZ(0);
    will-change: background-position, filter;
    background:
        radial-gradient(circle at 58% 50%, rgba(252, 211, 126, 0.95) 0%, rgba(247, 140, 45, 0.8) 8%, rgba(228, 77, 14, 0.45) 18%, transparent 36%),
        radial-gradient(circle at 24% 42%, rgba(136, 31, 121, 0.75) 0%, rgba(71, 6, 91, 0.42) 30%, transparent 50%),
        radial-gradient(circle at 82% 34%, rgba(255, 106, 0, 0.45) 0%, transparent 34%),
        linear-gradient(135deg, #0d0010 0%, #170023 28%, #27013f 50%, #610921 73%, #b82614 100%);
    background-size: 160% 160%;
    animation: gradientOrbit 16s ease-in-out infinite alternate;
    -webkit-mask-image:
        radial-gradient(ellipse 88% 118% at 78% 50%, #000 0%, #000 58%, rgba(0, 0, 0, 0.72) 70%, rgba(0, 0, 0, 0.28) 82%, transparent 96%),
        linear-gradient(105deg, transparent 0%, rgba(0, 0, 0, 0.14) 14%, rgba(0, 0, 0, 0.62) 32%, #000 52%);
    mask-image:
        radial-gradient(ellipse 88% 118% at 78% 50%, #000 0%, #000 58%, rgba(0, 0, 0, 0.72) 70%, rgba(0, 0, 0, 0.28) 82%, transparent 96%),
        linear-gradient(105deg, transparent 0%, rgba(0, 0, 0, 0.14) 14%, rgba(0, 0, 0, 0.62) 32%, #000 52%);
}

.hero-spline-bg__frame::before,
.hero-spline-bg__frame::after {
    content: "";
    position: absolute;
    pointer-events: none;
    transform-origin: center;
    backface-visibility: hidden;
    will-change: transform, opacity;
}

.hero-spline-bg__frame::before {
    inset: -25%;
    z-index: 0;
    background:
        conic-gradient(from 220deg at 52% 52%,
            transparent 0deg,
            rgba(255, 133, 22, 0.08) 32deg,
            rgba(255, 201, 92, 0.58) 48deg,
            rgba(139, 45, 255, 0.3) 68deg,
            transparent 94deg,
            transparent 180deg,
            rgba(255, 103, 0, 0.22) 232deg,
            rgba(75, 10, 104, 0.42) 272deg,
            transparent 330deg),
        radial-gradient(circle at 50% 50%, rgba(255, 145, 36, 0.24), transparent 40%);
    filter: blur(12px) saturate(1.35);
    opacity: 0.95;
    transform: scale(1.08) rotate(-8deg);
    animation: liquidAurora 20s ease-in-out infinite alternate;
}

.hero-spline-bg__frame::after {
    inset: -20%;
    z-index: 2;
    background:
        radial-gradient(circle at 60% 50%, rgba(255, 168, 54, 0.36), transparent 38%),
        radial-gradient(circle at 34% 40%, rgba(159, 62, 255, 0.26), transparent 42%);
    mix-blend-mode: screen;
    transform: scale(1.1) rotate(0deg);
    animation: shimmerPulse 9s ease-in-out infinite alternate;
}

.hero-ai-ribbon {
    position: absolute;
    width: 92%;
    height: 26%;
    right: -14%;
    top: 52%;
    z-index: 1;
    border-radius: 999px;
    background:
        linear-gradient(90deg,
            transparent 0%,
            rgba(104, 26, 160, 0.2) 15%,
            rgba(255, 91, 0, 0.74) 44%,
            rgba(255, 209, 113, 0.9) 50%,
            rgba(255, 100, 0, 0.58) 58%,
            rgba(103, 19, 155, 0.28) 78%,
            transparent 100%);
    filter: blur(1px) drop-shadow(0 0 28px rgba(255, 107, 0, 0.55));
    opacity: 0.95;
    transform: perspective(900px) rotateX(58deg) rotateZ(-13deg) translateY(-18%);
    animation: ribbonWave 12s ease-in-out infinite alternate;
    pointer-events: none;
    will-change: transform, opacity;
}

.hero-ai-ribbon--secondary {
    top: 34%;
    right: -6%;
    width: 78%;
    height: 18%;
    opacity: 0.48;
    filter: blur(4px) drop-shadow(0 0 22px rgba(128, 42, 255, 0.45));
    transform: perspective(900px) rotateX(58deg) rotateZ(12deg) translateY(-40%);
    animation-duration: 13s;
}

.hero-ai-particles {
    position: absolute;
    inset: 0;
    z-index: 2;
    background-image:
        radial-gradient(circle, rgba(255, 208, 113, 0.9) 0 1px, transparent 1.7px),
        radial-gradient(circle, rgba(177, 76, 255, 0.7) 0 1px, transparent 1.8px),
        radial-gradient(circle, rgba(255, 95, 0, 0.75) 0 1px, transparent 2px);
    background-size: 120px 120px, 180px 180px, 240px 240px;
    background-position: 0 0, 60px 80px, 140px 20px;
    opacity: 0.34;
    animation: particleOrbit 22s ease-in-out infinite alternate;
    pointer-events: none;
    will-change: transform, opacity;
}

@keyframes gradientOrbit {
    0% {
        background-position: 18% 42%;
        filter: saturate(1.05) brightness(0.96);
    }

    50% {
        background-position: 72% 58%;
        filter: saturate(1.28) brightness(1.08);
    }

    100% {
        background-position: 40% 70%;
        filter: saturate(1.12) brightness(1.02);
    }
}

@media (max-width: 640px) {
    .promo-banner__inner {
        min-height: 52px;
        padding: 8px 16px;
        gap: 10px;
    }

    .promo-banner__copy {
        font-size: 12px;
    }

    .promo-banner__link {
        font-size: 12px;
    }
}

@keyframes liquidAurora {
    0% {
        transform: scale(1.08) rotate(-14deg) translate3d(-2%, 1%, 0);
        filter: blur(12px) saturate(1.2);
    }

    45% {
        transform: scale(1.18) rotate(8deg) translate3d(3%, -2%, 0);
        filter: blur(16px) saturate(1.55);
    }

    100% {
        transform: scale(1.12) rotate(-3deg) translate3d(-1%, 3%, 0);
        filter: blur(10px) saturate(1.35);
    }
}

@keyframes shimmerPulse {
    0% {
        transform: scale(1.05) rotate(-8deg) translate3d(-3%, 2%, 0);
        opacity: 0.28;
    }

    50% {
        transform: scale(1.18) rotate(10deg) translate3d(2%, -3%, 0);
        opacity: 0.72;
    }

    100% {
        transform: scale(1.1) rotate(2deg) translate3d(4%, 1%, 0);
        opacity: 0.42;
    }
}

@keyframes ribbonWave {
    0% {
        transform: perspective(900px) rotateX(58deg) rotateZ(-18deg) translateY(-18%) translateX(-4%) scaleX(1);
        filter: blur(1px) drop-shadow(0 0 18px rgba(255, 107, 0, 0.42));
    }

    50% {
        transform: perspective(900px) rotateX(52deg) rotateZ(-6deg) translateY(-6%) translateX(2%) scaleX(1.08);
        filter: blur(3px) drop-shadow(0 0 42px rgba(255, 107, 0, 0.75));
    }

    100% {
        transform: perspective(900px) rotateX(60deg) rotateZ(-12deg) translateY(-14%) translateX(5%) scaleX(0.98);
        filter: blur(1px) drop-shadow(0 0 28px rgba(139, 45, 255, 0.52));
    }
}

@keyframes particleOrbit {
    0% {
        background-position: 0 0, 60px 80px, 140px 20px;
        opacity: 0.26;
        transform: rotate(0deg) scale(1);
    }

    50% {
        background-position: 120px -80px, -40px 120px, 220px -140px;
        opacity: 0.52;
        transform: rotate(1.5deg) scale(1.03);
    }

    100% {
        background-position: -80px -180px, 160px -80px, 20px -260px;
        opacity: 0.34;
        transform: rotate(-1deg) scale(1.01);
    }
}

.hero-bg-gradient-blur {
    position: absolute;
    z-index: 3;
    inset: auto 0 0 0;
    height: 42%;
    pointer-events: none;
    contain: paint;
    display: none;
}

.hero-bg-gradient-blur > div {
    display: none;
}

.hero-bg-gradient-blur::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.42) 46%, rgba(255, 255, 255, 0.12) 100%);
}

.hero-bg-gradient-blur::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(ellipse at 82% 20%, rgba(13, 0, 16, 0.05), transparent 42%);
}

.hero-bg-softener {
    z-index: 4;
    background:
        radial-gradient(ellipse 72% 120% at 18% 46%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 34%, rgba(255, 255, 255, 0.94) 48%, rgba(255, 255, 255, 0.62) 62%, rgba(255, 255, 255, 0.24) 74%, rgba(255, 255, 255, 0) 88%),
        linear-gradient(105deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.98) 30%, rgba(255, 255, 255, 0.72) 48%, rgba(255, 255, 255, 0.24) 66%, rgba(255, 255, 255, 0) 82%);
}

/* Smooth Floating Animations */
.float-slow { animation: float 7s ease-in-out infinite; }
.float-slower { animation: float 9s ease-in-out infinite; animation-delay: 1.5s; }
.float-fast { animation: float 5s ease-in-out infinite; animation-delay: 0.5s; }

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

/* Animated Network Lines */
.network-line {
    stroke-dasharray: 8;
    animation: dash 20s linear infinite;
}
@keyframes dash {
    to { stroke-dashoffset: -100; }
}

/* Refined SaaS Shadows */
.ui-shadow { 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 10px 15px -3px rgba(0, 0, 0, 0.03), 0 20px 25px -5px rgba(0, 0, 0, 0.02); 
}
.ui-shadow-hover { 
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 25px 50px -12px rgba(0, 0, 0, 0.08); 
    transition: box-shadow 0.3s ease, transform 0.3s ease; 
}
.ui-shadow-hover:hover { 
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 35px 60px -15px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* Hide scrollbar for tabs */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Tab Transition */
.tab-content {
    animation: fadeIn 0.4s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.motion-ready [data-animate],
.motion-ready .scroll-reveal {
    opacity: 0;
}

.motion-ready .hero-layer {
    opacity: 0;
    will-change: transform, opacity;
}

.motion-ready [data-animate].is-visible,
.motion-ready .scroll-reveal.is-visible,
.motion-ready .hero-layer.is-visible {
    opacity: revert;
}

.count-up {
    font-variant-numeric: tabular-nums;
}

.mobile-menu-panel {
    height: calc(100vh - 64px);
    overscroll-behavior: contain;
}

body.mobile-menu-open {
    overflow: hidden;
    height: 100vh;
    touch-action: none;
}

.mobile-tab-row {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}

.mobile-tab-row .tab-btn {
    scroll-snap-align: start;
}

.mockup-ambient {
    left: 50%;
    right: auto;
    width: min(520px, 92%);
    height: 210px;
    transform: translateX(-50%);
    border-radius: 999px 999px 0 0;
    filter: blur(2px);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    .motion-ready [data-animate],
    .motion-ready .scroll-reveal,
    .motion-ready .hero-layer {
        opacity: revert;
        transform: none !important;
    }

    .hero-ambient-background,
    .hero-bg-gradient-blur,
    .hero-bg-gradient-blur::before,
    .hero-bg-gradient-blur::after,
    .hero-bg-gradient-blur > div {
        animation: none !important;
    }

    .hero-spline-bg__frame,
    .hero-spline-bg__frame::before,
    .hero-spline-bg__frame::after,
    .hero-ai-ribbon,
    .hero-ai-particles {
        animation: none !important;
    }
}

@media (max-width: 1023px) {
    .mobile-tab-row .tab-btn.hidden {
        display: flex !important;
    }
}

@media (max-width: 900px) {
    .hero-spline-bg__frame {
        inset: auto 0 0 0;
        width: 100%;
        height: 58%;
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.18) 12%, rgba(0, 0, 0, 0.68) 28%, #000 48%);
        mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.18) 12%, rgba(0, 0, 0, 0.68) 28%, #000 48%);
    }

    .hero-bg-softener {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.99) 34%, rgba(255, 255, 255, 0.92) 52%, rgba(255, 255, 255, 0.5) 70%, rgba(255, 255, 255, 0) 90%);
    }

    .hero-ai-ribbon {
        width: 145vw;
        right: -36vw;
    }
}

@media (max-width: 640px) {
    body {
        overflow-x: clip;
    }

    nav > div:first-child {
        height: 64px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    nav .flex.items-center.gap-6 {
        gap: 12px !important;
    }

    nav button {
        white-space: nowrap;
    }

    .mobile-tab-shell {
        justify-content: flex-start !important;
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .mobile-tab-row {
        width: max-content;
        min-width: 100%;
        border-radius: 18px !important;
    }

    .mobile-tab-row .tab-btn.hidden {
        display: flex !important;
    }

    .mobile-tab-row .tab-btn {
        flex: 0 0 auto;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .landing-hero {
        padding: 28px 16px 48px !important;
        gap: 36px !important;
        overflow: clip;
    }

    .hero-ambient-background {
        min-height: 100%;
    }

    .hero-spline-bg__fallback {
        background: #fff;
    }

    .hero-spline-bg__frame {
        inset: auto 0 0 0;
        width: 100%;
        height: 58%;
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.18) 12%, rgba(0, 0, 0, 0.68) 28%, #000 48%);
        mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.18) 12%, rgba(0, 0, 0, 0.68) 28%, #000 48%);
    }

    .hero-ai-ribbon {
        width: 145vw;
        right: -36vw;
    }

    .hero-bg-gradient-blur {
        height: 30%;
    }

    .hero-bg-softener {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.99) 34%, rgba(255, 255, 255, 0.92) 52%, rgba(255, 255, 255, 0.5) 70%, rgba(255, 255, 255, 0) 90%);
    }

    .landing-hero h1 {
        font-size: clamp(2.25rem, 11vw, 2.75rem) !important;
        line-height: 1.08 !important;
        margin-top: 0 !important;
    }

    .landing-hero p,
    .landing-hero li span {
        font-size: 15px !important;
    }

    .hero-visual {
        height: 430px !important;
        margin-top: 0 !important;
        padding-left: 0 !important;
        justify-content: center !important;
        transform: translateX(0) !important;
    }

    .hero-visual > .absolute.inset-0 {
        transform: scale(0.9) !important;
        opacity: 0.65;
    }

    .hero-dashboard {
        max-width: 330px !important;
        transform: translateX(0) scale(0.94) !important;
        border-width: 6px !important;
    }

    .hero-phone {
        left: 0.25rem !important;
        bottom: 0.25rem !important;
        width: 118px !important;
        height: 246px !important;
        border-width: 5px !important;
    }

    .hero-note {
        left: 0 !important;
        top: 0.25rem !important;
        max-width: 220px !important;
        padding: 10px !important;
    }

    .hero-receipt {
        right: 0 !important;
        bottom: 1.25rem !important;
        width: 126px !important;
        padding: 14px !important;
    }

    section {
        max-width: 100%;
    }

    section.py-24,
    footer {
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }

    section.px-6,
    footer.px-6 {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    h2.text-\[40px\],
    h2.text-\[48px\],
    h2.text-\[36px\],
    .text-\[40px\] {
        font-size: clamp(2rem, 9vw, 2.45rem) !important;
        line-height: 1.12 !important;
    }

    .text-\[32px\] {
        font-size: clamp(1.7rem, 8vw, 2rem) !important;
    }

    .bg-white.border.border-gray-100.rounded-\[2rem\] {
        border-radius: 1.25rem !important;
        padding: 28px 22px 0 !important;
        min-height: 520px !important;
    }

    .bg-\[\#F8F9FB\].rounded-2xl.p-10 {
        padding: 26px !important;
    }

    .receipt-graphic,
    .integration-graphic {
        height: 250px !important;
    }

    .automation-visual {
        height: 560px !important;
        overflow: clip;
    }

    .automation-visual > .absolute.top-16 {
        left: 0 !important;
        right: 0 !important;
        max-width: 100% !important;
    }

    .automation-visual > .absolute.-bottom-6 {
        right: 0 !important;
        width: min(260px, 82vw) !important;
    }

    .network-stage {
        transform: scale(0.31) !important;
        margin-bottom: -420px !important;
    }

    .network-stage [class*="w-[280px]"] {
        width: 260px !important;
    }

    .global-stats {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    .bottom-cta h2 {
        font-size: clamp(2.15rem, 10vw, 2.85rem) !important;
        line-height: 1.08 !important;
        margin-top: 0 !important;
    }

    .bottom-cta button {
        width: 100%;
        font-size: 16px !important;
    }

    footer .flex.gap-8 {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px 24px !important;
    }
}