:root {
    --font-primary: 'Texta', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, ...;
    --brand-primary: #0E1E3A;
    --brand-secondary: #1A2438;
    --brand-surface: rgba(26, 36, 56, 0.92);
    --brand-soft: rgba(14, 30, 58, 0.85);
    --brand-text: #E6F2FF;
    --brand-muted: rgba(230, 244, 255, 0.75);
    --brand-accent: #00BFFB;
    --brand-gradient-start: #3CB4D0;
    --brand-gradient-new: #0E1E3A;
    --brand-gradient-end: #4371C5;
    --brand-border: rgba(60, 180, 208, 0.35);
    --brand-glow: rgba(0, 191, 251, 0.4);
}

html,
body,
* {
    font-family: var(--font-primary);
}

/* Page base */
html,
body {
    background: var(--brand-primary);
    color: var(--brand-text);
}

.bg-brand-gradient {
    background-image: linear-gradient(135deg, var(--brand-gradient-start), var(--brand-gradient-end));
    background-color: transparent !important;
}

.btn-brand {
    color: #fff;
    background-image: linear-gradient(135deg, var(--brand-gradient-start), var(--brand-gradient-end));
    background-color: transparent !important;
    box-shadow: 0 18px 34px rgba(60, 180, 208, 0.35);
    transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease, filter .3s ease;
}

.btn-brand:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 20px 40px rgba(60, 180, 208, 0.45);
    filter: brightness(1.05);
}

.btn-brand:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 191, 251, 0.35), 0 18px 34px rgba(60, 180, 208, 0.35);
}

/* Hero gradient background */
.hero-bg {
    background:
        radial-gradient(900px 420px at 75% 0%, rgba(0, 191, 251, .25), transparent 70%), radial-gradient(700px 380px at 15% 30%, rgba(67, 113, 197, .32), transparent 70%), linear-gradient(125deg, var(--brand-gradient-new), #050b16)
}

/* Logo slider grayscale hover */
.logo-item img {
    filter: grayscale(100%);
    opacity: .85;
    transition: transform .2s, opacity .2s, filter .2s;
}

.logo-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: translateY(-2px) scale(1.03);
}

/* Drop shadow for hero image (to match original) */
.hero-drop {
    filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .45));
}

/* Testimonial card grid backdrop */
.grid-bg::after {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -120px;
    width: 360px;
    height: 360px;
    border-radius: 24px;
    background-image:
        linear-gradient(rgba(26, 36, 56, 0.85) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26, 36, 56, 0.85) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: .35;
    pointer-events: none;
}

/* FAQ accordion caret replacement */
.faq-btn::after {
    content: "+";
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid #CAF4FF;
    color: #00BFFB;
    font-weight: 900;
    margin-left: auto;
}

.faq-btn[aria-expanded="true"]::after {
    content: "–";
    background: rgba(255, 255, 255, 0.06);
    color: #00BFFB;
}

/* Simple hide/show for accordion */
.collapse {
    display: none;
}

.collapse.show {
    display: block;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {

    .reveal,
    .float-in {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

.reveal {
    opacity: 0;
    transform: translateY(14px);
}

.fade-up {
    animation: fadeUp .7s cubic-bezier(.22, .8, .25, 1) forwards;
    animation-delay: var(--delay, 0ms);
}

.fade-in {
    animation: fadeIn .7s ease-out forwards;
    animation-delay: var(--delay, 0ms);
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-12px);
    animation: fadeInLeft .7s cubic-bezier(.22, .8, .25, 1) forwards;
    animation-delay: var(--delay, 0ms);
}

.float-in {
    opacity: 0;
    transform: translateY(18px) scale(.98);
    animation: floatIn .9s cubic-bezier(.2, .7, .2, 1) forwards;
    animation-delay: var(--delay, 0ms);
}

.hero-drop {
    filter: drop-shadow(0 8px 28px rgba(0, 0, 0, .25));
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

@keyframes fadeInLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes floatIn {
    70% {
        opacity: 1;
        transform: translateY(-4px) scale(1.005);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {

    .reveal,
    .glow-pulse {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Reveal base */
.reveal {
    opacity: 0;
}

/* Only animate when .is-visible gets added by JS */
.reveal.is-visible.fade-up {
    animation: fadeUp .7s cubic-bezier(.22, .8, .25, 1) var(--delay, 0ms) forwards;
    transform: translateY(14px);
}

.reveal.is-visible.slide-left {
    animation: slideLeft .6s cubic-bezier(.22, .8, .25, 1) var(--delay, 0ms) forwards;
    transform: translateX(-12px);
}

.reveal.is-visible.fade-in {
    animation: fadeIn .6s ease-out var(--delay, 0ms) forwards;
}

.reveal.is-visible.pop-in {
    animation: popIn .6s cubic-bezier(.2, .7, .2, 1) var(--delay, 0ms) forwards;
    transform: translateY(10px) scale(.97);
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

@keyframes popIn {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Badge icon soft glow pulse */
.glow-pulse {
    animation: glow 2.8s ease-in-out infinite;
}

@keyframes glow {

    0%,
    100% {
        filter: drop-shadow(0 0 0 rgba(60, 180, 208, .0));
    }

    50% {
        filter: drop-shadow(0 8px 18px rgba(60, 180, 208, .45));
    }
}

/* Feature micro-interactions */
.feature-card {
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), background .35s ease, box-shadow .35s ease;
    border-radius: .75rem;
}

.feature-card:hover {
    transform: translateY(-4px);
}

.icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    width: 2.5rem;
    flex-shrink: 0;
    border-radius: .5rem;
    background: rgba(255, 255, 255, 0.05);
    color: #00BFFB;
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), background .35s ease, box-shadow .35s ease;
    box-shadow: 0 2px 0 rgba(60, 180, 208, .12) inset;
}

.feature-card:hover .icon-wrap {
    transform: translateY(-2px) scale(1.05);
    background: rgba(255, 255, 255, 0.08);
}

/* One-time shimmer accent on the badge text */
.once-shimmer {
    background: linear-gradient(90deg, rgba(0, 0, 0, .55) 20%, rgba(0, 0, 0, .85) 40%, rgba(0, 0, 0, .55) 60%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 200% 100%;
    animation: shimmer 1s ease-out .15s 1 both;
}

@keyframes shimmer {
    to {
        background-position: -200% 0;
    }
}

/* a11y */
@media (prefers-reduced-motion: reduce) {

    .reveal,
    .feature-card,
    .feature-visual {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Scroll reveal primitives */
.reveal {
    opacity: 0;
}

.reveal.is-visible.fade-up {
    transform: translateY(14px);
    animation: fadeUp .7s cubic-bezier(.22, .8, .25, 1) var(--delay, 0ms) forwards;
}

.reveal.is-visible.card-pop {
    transform: translateY(12px) scale(.98);
    animation: cardPop .6s cubic-bezier(.2, .7, .2, 1) var(--delay, 0ms) forwards;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cardPop {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Cards: lift + outline glow on hover */
.feature-card {
    border: 1px solid rgba(226, 232, 240, .7);
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, border-color .35s ease, background .35s ease;
}

.feature-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 18px 40px rgba(2, 6, 23, .08);
    border-color: rgba(60, 180, 208, .35);
}

/* Visual: bg pan + shine sweep on hover */
.feature-visual {
    background-size: 100% 100%;
    position: relative;
    --pan-speed: 12s;
    animation: bgPan var(--pan-speed) linear infinite;
}

.feature-card:hover .feature-visual {
    --pan-speed: 6s;
}

/* faster on hover */

@keyframes bgPan {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 0% 100%;
    }

    100% {
        background-position: 0% 0%;
    }
}

.feature-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%);
    transform: translateX(-120%);
    pointer-events: none;
}

.feature-card:hover .feature-visual::after {
    animation: shine .9s ease-out 1;
}

@keyframes shine {
    to {
        transform: translateX(120%);
    }
}

/* Decorative dots overlay */
.pattern-dots {
    background-image: radial-gradient(rgba(2, 6, 23, .06) 1px, transparent 1px);
    background-size: 12px 12px;
    mix-blend-mode: multiply;
}

/* a11y */
@media (prefers-reduced-motion: reduce) {

    .reveal,
    .glow-pulse,
    #whyPanel,
    .kpi,
    .panel-shine {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Reveal primitives */
.reveal {
    opacity: 0;
}

.reveal.is-visible.fade-up {
    transform: translateY(14px);
    animation: fadeUp .7s cubic-bezier(.22, .8, .25, 1) var(--delay, 0ms) forwards;
}

.reveal.is-visible.slide-left {
    transform: translateX(-12px);
    animation: slideLeft .6s cubic-bezier(.22, .8, .25, 1) var(--delay, 0ms) forwards;
}

.reveal.is-visible.pop-in {
    transform: translateY(10px) scale(.97);
    animation: popIn .6s cubic-bezier(.2, .7, .2, 1) var(--delay, 0ms) forwards;
}

.reveal.is-visible.panel-rise {
    transform: translateY(16px) scale(.99);
    animation: panelRise .7s cubic-bezier(.22, .8, .25, 1) var(--delay, 0ms) forwards;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes popIn {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes panelRise {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Badge icon glow */
.glow-pulse {
    animation: glow 2.8s ease-in-out infinite;
}

@keyframes glow {

    0%,
    100% {
        filter: drop-shadow(0 0 0 rgba(60, 180, 208, 0));
    }

    50% {
        filter: drop-shadow(0 8px 18px rgba(60, 180, 208, .45));
    }
}

/* Feature icon hover micro-interaction */
.icon-wrap {
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), background .35s ease, box-shadow .35s ease;
    box-shadow: 0 2px 0 rgba(60, 180, 208, .12) inset;
}

.icon-wrap:hover {
    transform: translateY(-2px) scale(1.05);
    background: rgba(255, 255, 255, 0.08);
}

/* CTA shine once on hover */
.cta-anim::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%);
    transform: translateX(-120%);
}

.cta-anim:hover::after {
    animation: shine .9s ease-out 1;
}

@keyframes shine {
    to {
        transform: translateX(120%);
    }
}

/* RIGHT PANEL: floating KPI chips */
#whyPanel {
    position: relative;
    perspective: 900px;
}

.panel-shine {
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .6) 55%, transparent 75%);
    transform: translateX(-130%);
    transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}

#whyPanel:hover .panel-shine {
    transform: translateX(130%);
}

.kpi {
    position: absolute;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: .85rem;
    box-shadow: 0 8px 24px rgba(2, 6, 23, .06);
    padding: .75rem .9rem;
    font-size: .825rem;
    color: #1A2438;
    display: flex;
    align-items: center;
    gap: .5rem;
    animation: floatY 5.5s ease-in-out infinite;
}

@keyframes floatY {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.kpi .kpi-lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kpi .kpi-lines span {
    display: block;
    width: 70px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.kpi .kpi-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 6px rgba(34, 197, 94, .12);
}

.kpi strong {
    font-weight: 700;
}

.kpi small {
    color: rgba(232, 244, 255, 0.7);
}

.kpi-a {
    top: 28px;
    left: 24px;
    animation-delay: .1s;
}

.kpi-b {
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: .4s;
    padding: .8rem 1rem;
}

.kpi-b .bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin-right: .25rem;
}

.kpi-b .bars i {
    display: block;
    width: 8px;
    height: 14px;
    background: #BCEFFF;
    border-radius: 3px;
    animation: bars 1.4s ease-in-out infinite;
}

.kpi-b .bars i:nth-child(2) {
    height: 20px;
    animation-delay: .15s;
}

.kpi-b .bars i:nth-child(3) {
    height: 28px;
    animation-delay: .3s;
    background: #99E8FF;
}

.kpi-b .bars i:nth-child(4) {
    height: 18px;
    animation-delay: .45s;
}

@keyframes bars {

    0%,
    100% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(1.25);
    }
}

.kpi-c {
    top: 88px;
    right: 24px;
    animation-delay: .25s;
}

.kpi-c .avatar {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: linear-gradient(135deg, #00BFFB, #7DDFFF);
    box-shadow: 0 2px 6px rgba(60, 180, 208, .35);
}

/* One-time shimmer accent for the small text near badge */
.once-shimmer {
    background: linear-gradient(90deg, rgba(29, 78, 216, .55) 20%, rgba(29, 78, 216, .95) 40%, rgba(29, 78, 216, .55) 60%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 200% 100%;
    animation: shimmer 1s ease-out .15s 1 both;
}

@keyframes shimmer {
    to {
        background-position: -200% 0;
    }
}

/* a11y */
@media (prefers-reduced-motion: reduce) {

    #services .reveal,
    #services .service-card,
    #services .icon-wrap {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* reveal primitives */
#services .reveal {
    opacity: 0;
}

#services .reveal.is-visible.fade-up {
    transform: translateY(14px);
    animation: fadeUp .7s cubic-bezier(.22, .8, .25, 1) var(--delay, 0ms) forwards;
}

#services .reveal.is-visible.card-pop {
    transform: translateY(12px) scale(.98);
    animation: cardPop .6s cubic-bezier(.2, .7, .2, 1) var(--delay, 0ms) forwards;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cardPop {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* card hover micro-interactions */
#services .service-card {
    text-align: left;
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, background .35s ease, border-color .35s ease;
    position: relative;
}

#services .service-card:hover {
    transform: translateY(-8px) scale(1.01);
}

/* shine sweep */
#services .service-card::after {
    content: "";
    position: absolute;
    inset: auto auto 0 0;
    height: 2px;
    width: 0%;
    background: linear-gradient(90deg, rgba(255, 255, 255, .0), rgba(255, 255, 255, .7), rgba(255, 255, 255, 0));
    transition: width .5s ease;
}

#services .service-card:hover::after {
    width: 100%;
}

/* icon glow + lift on card hover */
#services .icon-wrap {
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, background .35s ease, filter .35s ease;
    filter: drop-shadow(0 0 0 rgba(60, 180, 208, 0));
}

#services .service-card:hover .icon-wrap {
    transform: translateY(-3px) scale(1.05);
    background: rgba(26, 36, 56, 0.9);
    filter: drop-shadow(0 10px 24px rgba(60, 180, 208, .35));
}

/* a11y */
@media (prefers-reduced-motion: reduce) {

    #contact .reveal,
    #contact .step-card,
    #contact .step-badge,
    #contact .panel-shine,
    #contact .float-slow {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* reveal primitives */
#contact .reveal {
    opacity: 0;
}

#contact .reveal.is-visible.fade-up {
    transform: translateY(14px);
    animation: fadeUp .7s cubic-bezier(.22, .8, .25, 1) var(--delay, 0ms) forwards;
}

#contact .reveal.is-visible.slide-left {
    transform: translateX(-12px);
    animation: slideLeft .6s cubic-bezier(.22, .8, .25, 1) var(--delay, 0ms) forwards;
}

#contact .reveal.is-visible.card-pop {
    transform: translateY(12px) scale(.98);
    animation: cardPop .6s cubic-bezier(.2, .7, .2, 1) var(--delay, 0ms) forwards;
}

#contact .reveal.is-visible.panel-rise {
    transform: translateY(16px) scale(.99);
    animation: panelRise .7s cubic-bezier(.22, .8, .25, 1) var(--delay, 0ms) forwards;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes cardPop {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes panelRise {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* CTA shine */
.cta-anim::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%);
    transform: translateX(-120%);
}

.cta-anim:hover::after {
    animation: shine .9s ease-out 1;
}

@keyframes shine {
    to {
        transform: translateX(120%);
    }
}

/* Steps: hover + badge bounce */
#contact .step-card {
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, border-color .35s ease, background .35s ease;
}

#contact .step-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(2, 6, 23, .08);
    border-color: rgba(60, 180, 208, .35);
}

#contact .step-badge {
    animation: badgeBounce 3.6s ease-in-out infinite;
    box-shadow: 0 4px 16px rgba(60, 180, 208, .25);
}

@keyframes badgeBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

/* Subscribe: shine + floating bg */
#contact .panel-shine {
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .5) 55%, transparent 75%);
    transform: translateX(-130%);
    transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}

#contact #subscribeBox:hover .panel-shine {
    transform: translateX(130%);
}

#contact .float-slow {
    animation: floatSlow 16s ease-in-out infinite;
    transform-origin: top left;
}

@keyframes floatSlow {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    50% {
        transform: translate(6px, 8px) rotate(3deg) scale(1.02);
    }

    100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
}

#contact .shadow-input {
    box-shadow: 0 8px 22px rgba(0, 0, 0, .06);
}

/* Subscribe button shine */
.btn-shine::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .35) 50%, transparent 60%);
    transform: translateX(-120%);
}

.btn-shine:hover::before {
    animation: shine .9s ease-out 1;
}

/* Email invalid shake */
#contact .shake {
    animation: shake .45s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes shake {

    10%,
    90% {
        transform: translateX(-1px);
    }

    20%,
    80% {
        transform: translateX(2px);
    }

    30%,
    50%,
    70% {
        transform: translateX(-4px);
    }

    40%,
    60% {
        transform: translateX(4px);
    }
}

/* Success toast */
#contact .sub-toast {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .35s ease, transform .35s ease;
    backdrop-filter: blur(6px);
}

#contact .sub-toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* a11y */
@media (prefers-reduced-motion: reduce) {

    #why-stick .reveal,
    #why-stick .icon-wrap,
    #why-stick #stickPanel,
    #why-stick .chip,
    #why-stick .abs-grid,
    #why-stick .panel-shine {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* reveal primitives */
#why-stick .reveal {
    opacity: 0;
}

#why-stick .reveal.is-visible.fade-up {
    transform: translateY(14px);
    animation: fadeUp .7s cubic-bezier(.22, .8, .25, 1) var(--delay, 0ms) forwards;
}

#why-stick .reveal.is-visible.item-pop {
    transform: translateY(10px) scale(.98);
    animation: itemPop .55s cubic-bezier(.2, .7, .2, 1) var(--delay, 0ms) forwards;
}

#why-stick .reveal.is-visible.panel-rise {
    transform: translateY(16px) scale(.99);
    animation: panelRise .7s cubic-bezier(.22, .8, .25, 1) var(--delay, 0ms) forwards;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes itemPop {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes panelRise {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* icon micro-interactions */
#why-stick .icon-wrap {
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, background .35s ease, color .35s ease;
    box-shadow: 0 2px 0 rgba(15, 23, 42, .08) inset;
}

#why-stick .icon-wrap:hover {
    transform: translateY(-2px) scale(1.05) rotate(-2deg);
    background: rgba(255, 255, 255, 0.08);
    color: #00BFFB;
}

/* right panel background: animated grid */
#why-stick .abs-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(15, 23, 42, .05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15, 23, 42, .05) 1px, transparent 1px);
    background-size: 28px 28px;
    animation: gridScroll 16s linear infinite;
}

@keyframes gridScroll {
    0% {
        background-position: 0 0, 0 0;
    }

    100% {
        background-position: 56px 56px, 56px 56px;
    }
}

/* shine sweep on hover */
#why-stick .panel-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .6) 55%, transparent 75%);
    transform: translateX(-130%);
    transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}

#why-stick #stickPanel:hover .panel-shine {
    transform: translateX(130%);
}

/* floating chips */
#why-stick .chip {
    position: absolute;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: .85rem;
    box-shadow: 0 10px 28px rgba(2, 6, 23, .07);
    padding: .6rem .8rem;
    font-size: .85rem;
    color: #1A2438;
    display: flex;
    align-items: center;
    gap: .5rem;
    animation: floatY 5.5s ease-in-out infinite;
}

@keyframes floatY {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

#why-stick .chip-a {
    top: 22px;
    left: 24px;
    animation-delay: .1s;
}

#why-stick .chip-b {
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: .35s;
}

#why-stick .chip-c {
    top: 92px;
    right: 24px;
    animation-delay: .2s;
}

#why-stick .chip .dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 6px rgba(34, 197, 94, .12);
}

#why-stick .chip .dot-blue {
    background: #3CB4D0;
    box-shadow: 0 0 0 6px rgba(96, 165, 250, .14);
}

#why-stick .chip .bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin-right: .1rem;
}

#why-stick .chip .bars i {
    display: block;
    width: 7px;
    height: 12px;
    background: #BCEFFF;
    border-radius: 3px;
    animation: bars 1.4s ease-in-out infinite;
}

#why-stick .chip .bars i:nth-child(2) {
    height: 18px;
    animation-delay: .15s;
}

#why-stick .chip .bars i:nth-child(3) {
    height: 24px;
    animation-delay: .3s;
    background: #99E8FF;
}

@keyframes bars {

    0%,
    100% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(1.25);
    }
}

/* a11y */
@media (prefers-reduced-motion: reduce) {

    #stats .reveal,
    #stats .stat-number,
    #stats .stats-shine {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

#stats .reveal {
    opacity: 0;
}

#stats .reveal.is-visible.fade-up {
    transform: translateY(14px);
    animation: fadeUp .7s cubic-bezier(.22, .8, .25, 1) var(--delay, 0ms) forwards;
}

#stats .reveal.is-visible.stat-pop {
    transform: translateY(10px) scale(.98);
    animation: statPop .55s cubic-bezier(.2, .7, .2, 1) var(--delay, 0ms) forwards;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes statPop {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* stack number over label */
#stats .stat-number {
    display: block !important;
    /* was inline-block → make it block */
    line-height: 1;
    position: relative;
    /* keep for the ::after underline */
    margin: 0;
    /* optional */
}

/* make sure label goes to next line and has a little gap */
#stats small {
    display: block;
    margin-top: .25rem;
}

#stats .stat-number::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    height: 2px;
    width: 0%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7), rgba(255, 255, 255, 0));
    transition: width .45s ease;
}

#stats .stat-number:hover {
    transform: translateY(-3px) scale(1.02);
    text-shadow: 0 6px 24px rgba(255, 255, 255, .16);
}

#stats .stat-number:hover::after {
    width: 100%;
}

/* background shine sweep */
#stats .stats-shine {
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .08) 55%, transparent 75%);
    transform: translateX(-130%);
    transition: transform 1.1s cubic-bezier(.2, .7, .2, 1);
}

#stats:hover .stats-shine {
    transform: translateX(130%);
}

/* a11y */
@media (prefers-reduced-motion: reduce) {

    #pricing .reveal,
    #pricing .price-card,
    #pricing .btn-shine,
    #pricing .tick-wrap,
    #pricing .float-slow {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* reveal primitives */
#pricing .reveal {
    opacity: 0;
}

#pricing .reveal.is-visible.fade-up {
    transform: translateY(14px);
    animation: fadeUp .7s cubic-bezier(.22, .8, .25, 1) var(--delay, 0ms) forwards;
}

#pricing .reveal.is-visible.card-pop {
    transform: translateY(12px) scale(.98);
    animation: cardPop .6s cubic-bezier(.2, .7, .2, 1) var(--delay, 0ms) forwards;
}

#pricing .reveal.is-visible.item-fade {
    transform: translateY(8px);
    animation: itemFade .45s ease-out var(--delay, 0ms) forwards;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes cardPop {
    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

@keyframes itemFade {
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

/* cards */
#pricing .price-card {
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, border-color .35s ease, background .35s ease;
}

#pricing .price-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 18px 40px rgba(2, 6, 23, .08);
    border-color: rgba(60, 180, 208, .35);
}

/* featured card special */
#pricing .featured {
    position: relative;
    overflow: hidden;
}

#pricing .featured::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: conic-gradient(from 180deg at 50% 50%, rgba(60, 180, 208, .35), transparent 40%, rgba(60, 180, 208, .35));
    filter: blur(18px);
    opacity: .35;
    animation: rotateGlow 12s linear infinite;
    z-index: 0;
}

#pricing .featured>* {
    position: relative;
    z-index: 1;
}

@keyframes rotateGlow {
    to {
        transform: rotate(360deg);
    }
}

/* buttons shine */
#pricing .btn-shine {
    position: relative;
    overflow: hidden;
}

#pricing .btn-shine::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%);
    transform: translateX(-120%);
}

#pricing .btn-shine:hover::after {
    animation: shine .9s ease-out 1;
}

@keyframes shine {
    to {
        transform: translateX(120%);
    }
}

/* ticks */
#pricing .tick-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background: #00BFFB;
    box-shadow: 0 6px 18px rgba(60, 180, 208, .25);
    transition: transform .3s cubic-bezier(.2, .7, .2, 1);
    flex-shrink: 0;
}

#pricing .price-card:hover .tick-wrap {
    transform: translateY(-2px) scale(1.06);
}

/* popular pill float */
#pricing .float-slow {
    animation: floatSlow 6s ease-in-out infinite;
}

@keyframes floatSlow {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-3px)
    }
}

/* a11y */
@media (prefers-reduced-motion: reduce) {

    #testimonials .reveal,
    #testimonials .t-slide,
    #testimonials .float-slow {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* reveal primitives */
#testimonials .reveal {
    opacity: 0;
}

#testimonials .reveal.is-visible.fade-up {
    transform: translateY(14px);
    animation: fadeUp .7s cubic-bezier(.22, .8, .25, 1) var(--delay, 0ms) forwards;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

/* avatar cluster idle float */
#testimonials .float-slow {
    animation: floatSlow 12s ease-in-out infinite;
}

@keyframes floatSlow {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-6px)
    }
}

/* carousel slides */
#testimonials .t-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateX(40px);
    pointer-events: none;
    transition: opacity .6s ease, transform .6s cubic-bezier(.22, .8, .25, 1);
}

#testimonials .t-slide.is-active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

/* when leaving (for smoother reverse dir) */
#testimonials .t-slide.is-leaving {
    opacity: 0;
    transform: translateX(-40px);
}

/* a11y */
@media (prefers-reduced-motion: reduce) {
    #faqSection .reveal {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    #faqSection details {
        transition: none !important;
    }
}

#faqSection .reveal {
    opacity: 0;
}

#faqSection .reveal.is-visible.fade-up {
    transform: translateY(14px);
    animation: fadeUp .7s cubic-bezier(.22, .8, .25, 1) var(--delay, 0ms) forwards;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* a11y */
@media (prefers-reduced-motion: reduce) {

    #siteFooter .reveal,
    #siteFooter .soc,
    #siteFooter .footer-aurora,
    #siteFooter .footer-hr {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* scroll reveal */
#siteFooter .reveal {
    opacity: 0;
}

#siteFooter .reveal.is-visible.fade-up {
    transform: translateY(14px);
    animation: footerFade .7s cubic-bezier(.22, .8, .25, 1) var(--delay, 0ms) forwards;
}

@keyframes footerFade {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* aurora bg sweep */
#siteFooter .footer-aurora {
    background: radial-gradient(60% 80% at 50% 0%, rgba(60, 180, 208, .28), transparent 60%),
        radial-gradient(40% 60% at 80% 20%, rgba(99, 102, 241, .18), transparent 60%);
}

@keyframes auroraPan {
    0% {
        transform: translateX(-10%)
    }

    50% {
        transform: translateX(10%)
    }

    100% {
        transform: translateX(-10%)
    }
}

/* links: underline sweep */
.footer-link {
    position: relative;
    transition: color .3s ease;
}

.footer-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    width: 0%;
    margin: auto;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent);
    transition: width .45s ease;
}

.footer-link:hover::after {
    width: 100%;
}

/* social icons: lift + ripple */
.soc {
    position: relative;
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;
}

.soc:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 10px 22px rgba(91, 70, 255, .35);
}

.soc::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .25);
    transform: scale(0);
    opacity: 0;
    transition: transform .5s ease, opacity .5s ease;
}

.soc:active::after,
.soc:hover::after {
    transform: scale(1.25);
    opacity: .0;
}

/* divider: soft moving shine */
.footer-hr {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .15), transparent);
    animation: barPan 6s linear infinite;
}

@keyframes barPan {
    0% {
        background-position: -200% 0
    }

    100% {
        background-position: 200% 0
    }
}

/* a11y */
@media (prefers-reduced-motion: reduce) {

    #mainNav,
    #mainNav .btn-shine {
        transition: none !important;
    }

    #mainNav #mobileNav {
        transition: none !important;
    }
}

#mainNav.is-scrolled {
    background: rgb(255 255 255 / 75%);
    box-shadow: 0 6px 20px rgba(7, 12, 27, .15);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(7, 12, 27, .08);
}



#mainNav .nav-link {
    position: relative;
}

#mainNav .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    width: 0%;
    margin: auto;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .75), transparent);
    transition: width .35s ease;
}

#mainNav .nav-link:hover::after {
    width: 100%;
}

/* CTA shine */
#mainNav .btn-shine::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .45) 50%, transparent 80%);
    transform: translateX(-120%);
    transition: transform .8s ease;
}

#mainNav .btn-shine:hover::after {
    transform: translateX(120%);
}



.footer-logo {
   display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 1.5rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgb(97 166 255 / 95%), rgb(255 255 255 / 95%));
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 15px 35px rgba(7, 12, 27, 0.7), inset 0 0 15px rgba(94, 225, 255, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}