/* ── Design tokens ─────────────────────────────── */
:root {
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
}

/* ── Scroll reveal base states ─────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    will-change: opacity, transform;
}
.reveal-left {
    opacity: 0;
    transform: translateX(-24px);
    will-change: opacity, transform;
}
.reveal-right {
    opacity: 0;
    transform: translateX(24px);
    will-change: opacity, transform;
}
.reveal-scale {
    opacity: 0;
    transform: scale(0.95);
    will-change: opacity, transform;
}

/* ── Eyebrow label ─────────────────────────────── */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 1.25rem;
}
.eyebrow::before {
    content: '';
    display: block;
    width: 20px;
    height: 1.5px;
    background: currentColor;
    flex-shrink: 0;
}

/* ── Divider rule ──────────────────────────────── */
.section-rule {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--color-border, #e4e4e7) 20%, #e4e4e7 80%, transparent);
    border: none;
    margin: 0;
}

/* ── Hero stat ticker ──────────────────────────── */
.stat-item {
    padding: 1.5rem 0.5rem;
    text-align: center;
    position: relative;
    transition: transform .2s ease;
}
.stat-item:hover { transform: translateY(-3px); }
.stat-item + .stat-item::before {
    content: '';
    position: absolute;
    left: 0; top: 25%; bottom: 25%;
    width: 1px;
    background: #e4e4e7;
}
.dark-mode .stat-item + .stat-item::before { background: #27272a; }
.stat-value {
    font-size: 1.75rem;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.02em;
}
@media (max-width: 640px) { .stat-value { font-size: 1.5rem; } }

/* ── Timeline line ─────────────────────────────── */
.timeline-track {
    position: absolute;
    left: 20px;
    top: 0; bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, var(--color-primary), transparent 90%);
}
@media (min-width: 640px) {
    .timeline-track { left: 50%; }
}

/* ── Comparison table row hover ────────────────── */
.compare-row:hover td, .compare-row:hover div {
    background: rgba(var(--color-primary-rgb), .03);
}

/* ── Demo card phone chrome ────────────────────── */
.phone-notch {
    width: 80px; height: 6px;
    background: #d4d4d8;
    border-radius: 999px;
    margin: 0 auto 0.75rem;
}

/* ── FAQ open state ────────────────────────────── */
.faq-trigger[aria-expanded="true"] {
    color: var(--color-primary);
}

/* ── Feature grid bento ────────────────────────── */
.bento-hero {
    background: var(--color-primary);
    color: #fff;
}
.bento-cell {
    border: 1px solid #e4e4e7;
    transition: border-color 0.2s;
}
.dark-mode .bento-cell { border-color: #27272a; }
.bento-cell:hover { border-color: rgba(var(--color-primary-rgb), .4); }

/* ── Trust badge pill ──────────────────────────── */
.trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #52525b;
    padding: 6px 12px;
    border: 1px solid #e4e4e7;
    border-radius: 999px;
    background: #fafafa;
    transition: border-color .15s;
}
.dark-mode .trust-pill { background: #18181b; border-color: #27272a; color: #a1a1aa; }
.trust-pill:hover { border-color: rgba(var(--color-primary-rgb), .5); }

/* ── Industry card ─────────────────────────────── */
.industry-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid #e4e4e7;
    border-radius: 10px;
    background: #fafafa;
    font-size: 13px;
    font-weight: 600;
    color: #3f3f46;
    transition: all .15s;
    cursor: default;
}
.dark-mode .industry-card { background: #18181b; border-color: #27272a; color: #d4d4d8; }
.industry-card:hover {
    border-color: rgba(var(--color-primary-rgb), .5);
    background: rgba(var(--color-primary-rgb), .04);
    transform: translateY(-2px);
}

/* ── Blog card ─────────────────────────────────── */
.blog-secondary:hover { border-color: rgba(var(--color-primary-rgb), .35); }

/* ── Range input reset ─────────────────────────── */
input[type=range].roi-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: #e4e4e7;
    outline: none;
    cursor: pointer;
}
.dark-mode input[type=range].roi-range { background: #3f3f46; }
input[type=range].roi-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .18);
    transition: box-shadow .15s;
}
input[type=range].roi-range::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 5px rgba(var(--color-primary-rgb), .25);
}

/* ════════════════════════════════════════════════
   PREMIUM LAYER — ambient, glass, marquee, micro-fx
   (additive: original classes above are untouched)
════════════════════════════════════════════════ */

/* Ambient hero orbs + dotted grid */
@keyframes meshDrift {
    0%   { transform: translate(0,0) scale(1); }
    50%  { transform: translate(4%,-4%) scale(1.1); }
    100% { transform: translate(0,0) scale(1); }
}
.hero-orb {
    position: absolute; border-radius: 9999px;
    filter: blur(72px); opacity: .55; pointer-events: none; z-index: 0;
    will-change: transform;
}
.hero-orb-1 { width: 34rem; height: 34rem; left: -9rem; top: -11rem;
    background: radial-gradient(circle at center, rgba(var(--color-primary-rgb),.55), transparent 70%);
    animation: meshDrift 16s var(--ease-in-out) infinite; }
.hero-orb-2 { width: 26rem; height: 26rem; right: -7rem; top: 4rem;
    background: radial-gradient(circle at center, rgba(var(--color-primary-rgb),.30), transparent 70%);
    animation: meshDrift 20s var(--ease-in-out) infinite reverse; }
.hero-grid {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: radial-gradient(rgba(var(--color-primary-rgb),.12) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 28%, #000, transparent 78%);
    mask-image: radial-gradient(ellipse 75% 60% at 50% 28%, #000, transparent 78%);
}

/* Premium chip / eyebrow pill */
.badge-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: 9999px;
    font-size: 12px; font-weight: 600; letter-spacing: .01em;
    border: 1px solid rgba(var(--color-primary-rgb),.25);
    background: rgba(var(--color-primary-rgb),.06);
    color: var(--color-primary);
}
.badge-chip .ping { position: relative; width: 7px; height: 7px; }
.badge-chip .ping::before, .badge-chip .ping::after {
    content: ''; position: absolute; inset: 0; border-radius: 9999px; background: var(--color-primary);
}
.badge-chip .ping::after { animation: pingfx 1.8s cubic-bezier(0,0,.2,1) infinite; }
@keyframes pingfx { 75%,100% { transform: scale(2.4); opacity: 0; } }

/* Shimmer sweep on primary CTAs */
.btn-premium { position: relative; overflow: hidden; }
.btn-premium::after {
    content: ''; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.4), transparent);
    transform: skewX(-20deg);
}
.btn-premium:hover::after { animation: shimmer .9s ease; }
@keyframes shimmer { to { left: 150%; } }

/* Floating decorative badges */
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.float-badge { animation: floatY 4.5s ease-in-out infinite; }
.float-badge.delay { animation-delay: 1.4s; }

/* Infinite marquee (logos + testimonials) */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { display: flex; width: max-content; animation: marquee var(--mq-dur,40s) linear infinite; }
.marquee-track.reverse { animation-direction: reverse; }
.marquee-mask {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.marquee-pause:hover .marquee-track { animation-play-state: paused; }

/* Gradient hairline ring for premium cards */
.ring-gradient { position: relative; }
.ring-gradient::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb),.55), transparent 38%, transparent 62%, rgba(var(--color-primary-rgb),.35));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}

/* Section heading gradient underline accent */
.accent-underline { position: relative; display: inline-block; }

/* ════════════════════════════════════════════════
   HERO PRODUCT CAROUSEL + per-product spotlights
════════════════════════════════════════════════ */
.hero-viewport { position: relative; width: 100%; }
.hero-track {
    display: flex;
    width: 100%;
    transition: transform .6s var(--ease-out);
    will-change: transform;
}
.hero-slide {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
}
/* off-screen slides are made non-interactive via the `inert` attribute in JS */
.hero-slide[inert] { pointer-events: none; }

/* Product tabs (double as carousel indicators) */
.hero-tab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; border-radius: 9999px;
    font-size: 12px; font-weight: 700; letter-spacing: .01em;
    border: 1px solid #e4e4e7; background: #fafafa; color: #52525b;
    transition: color .18s, background .18s, border-color .18s;
    cursor: pointer; white-space: nowrap;
}
.dark-mode .hero-tab { background: #18181b; border-color: #27272a; color: #a1a1aa; }
.hero-tab:hover { border-color: rgba(var(--color-primary-rgb),.5); color: var(--color-primary); }
.hero-tab[aria-selected="true"] {
    background: rgba(var(--color-primary-rgb),.1);
    border-color: rgba(var(--color-primary-rgb),.45);
    color: var(--color-primary);
}
.hero-tab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Prev / next arrows */
.hero-arrow {
    width: 38px; height: 38px; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #e4e4e7; background: var(--bg-surface, #fff); color: #52525b;
    transition: color .18s, border-color .18s, transform .18s; cursor: pointer;
}
.dark-mode .hero-arrow { border-color: #27272a; color: #a1a1aa; background: #18181b; }
.hero-arrow:hover { border-color: rgba(var(--color-primary-rgb),.5); color: var(--color-primary); transform: translateY(-1px); }
.hero-arrow:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Autoplay progress hairline under the active tab row */
.hero-progress { height: 2px; background: rgba(var(--color-primary-rgb),.12); border-radius: 9999px; overflow: hidden; }
.hero-progress > i { display: block; height: 100%; width: 0; background: var(--color-primary); border-radius: inherit; }

/* Per-product accent tokens for the spotlight sections */
.spot { --spot: var(--color-primary); --spot-rgb: var(--color-primary-rgb); }
.spot-reviews { --spot: #f59e0b; --spot-rgb: 245,158,11; }
.spot-widgets { --spot: #10b981; --spot-rgb: 16,185,129; }
.spot-vcards  { --spot: #8b5cf6; --spot-rgb: 139,92,246; }
.spot-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: var(--spot); margin-bottom: 1.1rem;
}
.spot-ic { color: var(--spot); }
.spot-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 12px; border-radius: 9999px; font-size: 12px; font-weight: 700;
    color: var(--spot); background: rgba(var(--spot-rgb),.1); border: 1px solid rgba(var(--spot-rgb),.25);
}
.spot-cta {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 700; font-size: 14px; padding: 12px 22px; border-radius: 12px;
    color: #fff; background: var(--spot);
    box-shadow: 0 8px 26px rgba(var(--spot-rgb),.35);
    transition: transform .18s, filter .18s;
}
.spot-cta:hover { transform: translateY(-2px); filter: brightness(1.06); }
.spot-tick { color: var(--spot); flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1 !important; transform: none !important; }
    .hero-orb, .float-badge, .marquee-track, .badge-chip .ping::after { animation: none !important; }
    .hero-track { transition: none !important; }
    .hero-progress > i { transition: none !important; }
}