/* ============================================
   NEWENGINE — bento grid
   Design tokens
   ============================================ */
.newengine {
    --ink: #15132A;
    --ink-soft: #5B5770;
    --paper: #F5F4FB;

    --blue-a: #2E5CFF;
    --blue-b: #22D3EE;
    --violet-a: #9333EA;
    --violet-b: #EC4899;
    --amber-a: #F59E0B;
    --amber-b: #FB7185;

    --radius-lg: 28px;
    --radius-md: 16px;

    background: var(--paper);
    padding: 6rem 1.5rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--ink);
    overflow: hidden;
}

.newengine * { box-sizing: border-box; }

.newengine .newengine-container {
    max-width: 1500px;
    margin: 0 auto;
}

/* ---------- Header ---------- */
.newengine .newengine-section-header {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 1500px;
}

.newengine .newengine-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--violet-a);
    margin: 0 0 1rem;
}

.newengine .newengine-section-tag-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue-a), var(--violet-b));
    box-shadow: 0 0 0 4px rgba(147, 51, 234, 0.12);
}

.newengine .newengine-section-title {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--ink);
}

.pricingsectiontag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0029ff;
    margin: 0 0 1rem;
}

.pricingsectiontagdot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0029ff;
    box-shadow: 0 0 0 4px rgba(147, 51, 234, 0.12);
}

.faqsectiontag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0b1830;
    margin: 0 0 1rem;
}

.faqsectiontagdot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0b1830;
    box-shadow: 0 0 0 4px rgba(147, 51, 234, 0.12);
}

/* ---------- Grid ---------- */
.newengine-bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 900px) {
    .newengine-bento-grid { grid-template-columns: 1fr; }
}

/* ---------- Card shell ---------- */
.newengine-bento-card {
    position: relative;
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    padding: 2rem 2rem 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(21, 19, 42, 0.06);
    box-shadow: 0 1px 2px rgba(21, 19, 42, 0.04);
    transition: transform 0.45s cubic-bezier(.2,.8,.2,1), box-shadow 0.45s ease, border-color 0.45s ease;
}

.newengine-bento-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px -20px var(--card-shadow, rgba(21,19,42,0.25));
    border-color: transparent;
}

.newengine-bento-card--blue   { --card-shadow: rgba(46, 92, 255, 0.30); }
.newengine-bento-card--violet { --card-shadow: rgba(147, 51, 234, 0.30); }
.newengine-bento-card--amber  { --card-shadow: rgba(245, 158, 11, 0.30); }

/* soft ambient glow blob unique to each card's hue */
.newengine-bento-card-glow {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    filter: blur(50px);
    opacity: 0.35;
    pointer-events: none;
    transition: opacity 0.45s ease, transform 0.45s ease;
}
.newengine-bento-card:hover .newengine-bento-card-glow { opacity: 0.55; transform: scale(1.15); }

.newengine-bento-card--blue .newengine-bento-card-glow   { background: linear-gradient(135deg, var(--blue-a), var(--blue-b)); }
.newengine-bento-card--violet .newengine-bento-card-glow { background: linear-gradient(135deg, var(--violet-a), var(--violet-b)); }
.newengine-bento-card--amber .newengine-bento-card-glow  { background: linear-gradient(135deg, var(--amber-a), var(--amber-b)); }

/* ---------- Card top row: icon + pill ---------- */
.newengine-bento-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.newengine-bento-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    position: relative;
    z-index: 1;
}

.newengine-bento-card--blue .newengine-bento-card-icon   { background: linear-gradient(135deg, var(--blue-a), var(--blue-b)); }
.newengine-bento-card--violet .newengine-bento-card-icon { background: linear-gradient(135deg, var(--violet-a), var(--violet-b)); }
.newengine-bento-card--amber .newengine-bento-card-icon  { background: linear-gradient(135deg, var(--amber-a), var(--amber-b)); }

.newengine-bento-card-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
}

.newengine-bento-card-pill {
    font-family: 'Sora', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    position: relative;
    z-index: 1;
}

.newengine-bento-card--blue .newengine-bento-card-pill   { color: var(--blue-a);   background: color-mix(in srgb, var(--blue-a) 12%, white); }
.newengine-bento-card--violet .newengine-bento-card-pill { color: var(--violet-a); background: color-mix(in srgb, var(--violet-a) 12%, white); }
.newengine-bento-card--amber .newengine-bento-card-pill  { color: #B45309;         background: color-mix(in srgb, var(--amber-a) 15%, white); }

/* ---------- Card text ---------- */
.newengine-bento-card h3 {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: -0.01em;
    margin: 0 0 0.6rem;
    color: var(--ink);
}

.newengine-bento-card p {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0 0 1.75rem;
}

/* ---------- Visual panel ---------- */
.newengine-bento-card-visual {
    position: relative;
    margin: 0 -2rem;
    padding: 1.5rem 2rem 1.75rem;
    border-top: 1px solid rgba(21, 19, 42, 0.04);
    /* transparent by default so the corner glow can show through and
       fade naturally instead of being masked by a flat fill */
    background: transparent;
}

/* a gentle top-down fade, in the same hue as the corner glow, painted
   UNDER the card content (z-index 0) so there's no hard seam where the
   header area ends and the visual panel begins */
.newengine-bento-card-tint {
    position: absolute;
    inset: 0;
    top: -14rem;
    pointer-events: none;
    z-index: 0;
}

.newengine-bento-card--blue .newengine-bento-card-tint {
    background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--blue-a) 6%, transparent) 55%, color-mix(in srgb, var(--blue-a) 4%, transparent) 100%);
}
.newengine-bento-card--violet .newengine-bento-card-tint {
    background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--violet-a) 6%, transparent) 55%, color-mix(in srgb, var(--violet-a) 4%, transparent) 100%);
}
.newengine-bento-card--amber .newengine-bento-card-tint {
    background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--amber-a) 7%, transparent) 55%, color-mix(in srgb, var(--amber-a) 5%, transparent) 100%);
}

/* keep real content above the tint layer */
.newengine-bento-card-top,
.newengine-bento-card h3,
.newengine-bento-card p,
.newengine-bento-card-visual > * {
    position: relative;
    z-index: 1;
}

/* ---------- Mini bars ---------- */
.newengine-mini-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 84px;
}

.newengine-mini-bar {
    flex: 1;
    height: var(--h);
    border-radius: 5px 5px 2px 2px;
    background: rgba(21, 19, 42, 0.10);
    transform-origin: bottom;
    animation: newengineGrowBar 0.6s cubic-bezier(.2,.8,.2,1) both;
    animation-delay: calc(var(--i) * 0.04s);
}

.newengine-bento-card--blue .newengine-mini-bar.newengine-highlight  { background: linear-gradient(180deg, var(--blue-b), var(--blue-a)); }
.newengine-bento-card--amber .newengine-mini-bar.newengine-highlight { background: linear-gradient(180deg, var(--amber-b), var(--amber-a)); }

@keyframes newengineGrowBar {
    from { transform: scaleY(0); opacity: 0; }
    to   { transform: scaleY(1); opacity: 1; }
}

/* ---------- Mini pipeline (Atrium) ---------- */
.newengine-bento-card-visual--pipeline { display: flex; align-items: center; padding-top: 47px;}

.newengine-mini-pipeline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.4rem;
}

.newengine-mini-pipeline-node {
    flex: 1;
    text-align: center;
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.65rem 0.5rem;
    border-radius: 11px;
    color: var(--violet-a);
    background: color-mix(in srgb, var(--violet-a) 12%, white);
    white-space: nowrap;
}

.newengine-mini-pipeline-node--mid {
    color: var(--ink-soft);
    background: rgba(21, 19, 42, 0.06);
}

.newengine-mini-pipeline-node--final {
    color: #fff;
    background: linear-gradient(135deg, var(--violet-a), var(--violet-b));
}

.newengine-mini-pipeline-arrow {
    flex: 0 0 auto;
    width: 18px;
    height: 2px;
    background: repeating-linear-gradient(
        90deg,
        color-mix(in srgb, var(--violet-a) 40%, transparent) 0 6px,
        transparent 6px 9px
    );
    position: relative;
}

/* ---------- Reveal on scroll ---------- */
.newengine-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.2,.8,.2,1);
}
.newengine-reveal.newengine-is-visible {
    opacity: 1;
    transform: translateY(0);
}

.newengine-bento-grid .newengine-bento-card.newengine-reveal:nth-child(2) { transition-delay: 0.08s; }
.newengine-bento-grid .newengine-bento-card.newengine-reveal:nth-child(3) { transition-delay: 0.16s; }

/* ---------- Accessibility ---------- */
.newengine-bento-card:focus-within {
    outline: 2px solid var(--violet-a);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .newengine-bento-card, .newengine-bento-card-glow, .newengine-mini-bar, .newengine-reveal {
        animation: none !important;
        transition: none !important;
    }
}