/* Index editorial redesign — scoped to body.index-editorial so other pages stay untouched */

body.index-editorial {
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --reveal-distance: 24px;
    --reveal-duration: 900ms;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.index-editorial h1,
body.index-editorial h2,
body.index-editorial h3,
body.index-editorial .section-title,
body.index-editorial .benefits-title,
body.index-editorial .solutions-title,
body.index-editorial .cta-title {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

/* ============================================================
   HERO — fullscreen-ish editorial cover
   ============================================================ */

body.index-editorial .hero-new {
    padding: 128px 0 var(--space-3xl);
    min-height: 0;
    display: flex;
    align-items: center;
    position: relative;
}

body.index-editorial .hero-new-content {
    max-width: 980px;
    align-items: flex-start;
    text-align: left;
}

body.index-editorial .hero-new-text {
    align-items: flex-start;
    text-align: left;
}

body.index-editorial .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: var(--space-xl);
    padding: 6px 14px 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-warm);
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(6px);
}

body.index-editorial .hero-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-cyan);
    box-shadow: 0 0 0 4px rgba(0, 180, 216, 0.22);
    animation: hero-dot-pulse 2.4s ease-in-out infinite;
}

@keyframes hero-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(0, 180, 216, 0.22); }
    50% { box-shadow: 0 0 0 8px rgba(0, 180, 216, 0); }
}

body.index-editorial .hero-new-title {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 6.4vw, 5.6rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: var(--text-heading);
    max-width: 14ch;
}

body.index-editorial .hero-new-title .hero-accent {
    color: var(--accent-cyan);
    font-weight: 700;
}

body.index-editorial .hero-bottom-section {
    align-items: flex-start;
    margin-top: var(--space-xl);
    max-width: 560px;
}

body.index-editorial .hero-new-subtitle {
    font-size: 1.15rem;
    color: var(--text-secondary);
    line-height: 1.6;
    text-align: left;
}

body.index-editorial .hero-new-actions {
    justify-content: flex-start;
}

/* Hero word-by-word reveal */
body.index-editorial .hero-new-title .hero-word,
body.index-editorial .hero-eyebrow,
body.index-editorial .hero-new-subtitle,
body.index-editorial .hero-new-actions {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
    animation: hero-rise var(--reveal-duration) var(--ease-out) forwards;
}

body.index-editorial .hero-eyebrow { animation-delay: 80ms; }
body.index-editorial .hero-new-title .hero-word:nth-child(1) { animation-delay: 200ms; }
body.index-editorial .hero-new-title .hero-word:nth-child(2) { animation-delay: 270ms; }
body.index-editorial .hero-new-title .hero-word:nth-child(3) { animation-delay: 340ms; }
body.index-editorial .hero-new-title .hero-word:nth-child(4) { animation-delay: 410ms; }
body.index-editorial .hero-new-title .hero-word:nth-child(5) { animation-delay: 480ms; }
body.index-editorial .hero-new-title .hero-word:nth-child(6) { animation-delay: 580ms; }
body.index-editorial .hero-new-title .hero-word:nth-child(7) { animation-delay: 650ms; }
body.index-editorial .hero-new-title .hero-word:nth-child(8) { animation-delay: 720ms; }
body.index-editorial .hero-new-title .hero-word:nth-child(n+9) { animation-delay: 790ms; }
body.index-editorial .hero-new-subtitle { animation-delay: 880ms; }
body.index-editorial .hero-new-actions { animation-delay: 1000ms; }

body.index-editorial .hero-new-title .hero-word {
    display: inline-block;
}

@keyframes hero-rise {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   BUTTONS — refine to editorial sharpness
   ============================================================ */

body.index-editorial .btn {
    font-family: var(--font-ui);
    font-weight: 500;
    letter-spacing: -0.005em;
    transition: transform 0.4s var(--ease-out), background 0.3s ease, box-shadow 0.3s ease;
}

body.index-editorial .btn-primary {
    background: var(--primary-color);
    color: var(--text-on-dark-bright);
    box-shadow: 0 0 0 1px var(--primary-color), 0 1px 2px rgba(15, 23, 42, 0.08);
}

body.index-editorial .btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px var(--primary-hover), 0 12px 28px rgba(0, 180, 216, 0.32);
}

body.index-editorial .btn-large {
    padding: 14px 26px;
    font-size: 16px;
}

body.index-editorial .btn-with-arrow .btn-arrow {
    transition: transform 0.5s var(--ease-out);
}

body.index-editorial .btn-with-arrow:hover .btn-arrow {
    transform: translateX(8px);
}

/* ============================================================
   HEADER — softer, glassy when scrolled
   ============================================================ */

body.index-editorial .header {
    background: rgba(248, 250, 252, 0.82);
    backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--border-cream);
    transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

body.index-editorial .header.is-scrolled {
    background: rgba(248, 250, 252, 0.95);
    border-bottom-color: var(--ring-warm);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

body.index-editorial .nav-link {
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 500;
}

/* ============================================================
   SECTION REVEAL ON SCROLL
   ============================================================ */

body.index-editorial .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
    will-change: opacity, transform;
}

body.index-editorial .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

body.index-editorial .reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

body.index-editorial .reveal-stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

body.index-editorial .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 60ms; }
body.index-editorial .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 160ms; }
body.index-editorial .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 260ms; }
body.index-editorial .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 360ms; }
body.index-editorial .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 460ms; }
body.index-editorial .reveal-stagger.is-visible > *:nth-child(n+6) { transition-delay: 560ms; }

/* ============================================================
   BENEFITS / SOLUTIONS — editorial polish + hover micro-interaction
   ============================================================ */

body.index-editorial .benefits-title,
body.index-editorial .solutions-title {
    font-size: clamp(2rem, 4.4vw, 2.8rem);
    letter-spacing: -0.015em;
    line-height: 1.1;
    font-weight: 700;
    max-width: 18ch;
    margin-left: auto;
    margin-right: auto;
}

body.index-editorial .benefits-subtitle,
body.index-editorial .solutions-subtitle {
    font-family: var(--font-ui);
    font-size: 1.05rem;
    color: var(--text-secondary);
    margin-top: var(--space-md);
}

body.index-editorial .benefit-hook,
body.index-editorial .solution-hook {
    transition: background-color 0.4s ease, padding 0.4s var(--ease-out);
}

body.index-editorial .benefit-hook:hover,
body.index-editorial .solution-hook:hover {
    background-color: rgba(0, 180, 216, 0.025);
}

body.index-editorial .benefit-hook-glyph {
    transition: transform 0.6s var(--ease-out), color 0.4s ease;
}

body.index-editorial .benefit-hook:hover .benefit-hook-glyph {
    transform: translateX(-4px) rotate(-2deg);
    color: var(--primary-color);
}

body.index-editorial .solution-hook-icon {
    transition: transform 0.6s var(--ease-out), color 0.4s ease;
}

body.index-editorial .solution-hook:hover .solution-hook-icon {
    transform: translateY(-3px);
    color: var(--primary-color);
}

body.index-editorial .benefit-row,
body.index-editorial .solution-row {
    position: relative;
    transition: transform 0.4s var(--ease-out), background-color 0.4s ease;
}

body.index-editorial .benefit-row::before,
body.index-editorial .solution-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--primary-color);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.5s var(--ease-out);
}

body.index-editorial .benefit-row:hover::before,
body.index-editorial .solution-row:hover::before {
    transform: scaleY(1);
}

body.index-editorial .benefit-row:hover,
body.index-editorial .solution-row:hover {
    transform: translateX(8px);
    background-color: rgba(0, 180, 216, 0.018);
}

body.index-editorial .benefit-row:hover .benefit-row-number,
body.index-editorial .solution-row:hover .solution-row-number {
    color: var(--primary-color);
    transition: color 0.3s ease;
}

/* ============================================================
   PLATFORM PREVIEW — cleaner tabs + cross-fade
   ============================================================ */

body.index-editorial .platform-preview {
    background: var(--dark-bg);
    position: relative;
    overflow: hidden;
}

body.index-editorial .platform-preview::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 180, 216, 0.12), transparent 70%);
    pointer-events: none;
}

body.index-editorial .platform-preview .section-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.1;
    max-width: 22ch;
    margin-left: auto;
    margin-right: auto;
}

body.index-editorial .platform-demo {
    background: var(--dark-surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

body.index-editorial .tab-button {
    font-family: var(--font-ui);
    transition: color 0.3s ease, background 0.3s ease;
}

body.index-editorial .tab-button.active {
    background: rgba(0, 180, 216, 0.16);
    color: var(--text-on-dark-bright);
}

body.index-editorial .tab-panel {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
    pointer-events: none;
    position: absolute;
    inset: 0;
    padding: var(--space-xl);
}

body.index-editorial .tab-panel.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: center;
}

body.index-editorial .demo-content {
    position: relative;
    min-height: 420px;
}

body.index-editorial .demo-description h3 {
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 2.2vw, 1.75rem);
    font-weight: 600;
    letter-spacing: -0.01em;
}

body.index-editorial .demo-image img {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    transform: translateZ(0);
    transition: transform 0.6s var(--ease-out);
}

body.index-editorial .tab-panel.active:hover .demo-image img {
    transform: translateY(-4px);
}

/* ============================================================
   SOCIAL PROOF — marquee
   ============================================================ */

body.index-editorial .social-proof {
    background: var(--ivory);
    padding: var(--space-3xl) 0;
}

body.index-editorial .social-proof .section-title {
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.015em;
}

body.index-editorial .clients-marquee {
    margin-top: var(--space-2xl);
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

body.index-editorial .clients-marquee + .clients-marquee {
    margin-top: var(--space-md);
}

body.index-editorial .clients-track {
    display: flex;
    gap: var(--space-2xl);
    width: max-content;
    animation: marquee-scroll 60s linear infinite;
}

body.index-editorial .clients-marquee--reverse .clients-track {
    animation-direction: reverse;
    animation-duration: 75s;
}

body.index-editorial .clients-marquee:hover .clients-track {
    animation-play-state: paused;
}

body.index-editorial .clients-track .client-logo {
    flex: 0 0 auto;
    width: 180px;
    min-height: 80px;
    background: transparent;
    border: none;
    box-shadow: none;
    opacity: 1;
    transform: none;
    padding: var(--space-md);
}

body.index-editorial .clients-track .client-logo img {
    max-height: 50px;
    opacity: 0.55;
    filter: grayscale(100%);
    transition: opacity 0.3s ease, filter 0.3s ease;
}

body.index-editorial .clients-track .client-logo:hover img {
    opacity: 1;
    filter: grayscale(0%);
}

@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Original grid hidden when marquee is active */
body.index-editorial .clients-grid { display: none; }

/* ============================================================
   CTA SECTION — softer & refined
   ============================================================ */

body.index-editorial .cta-section {
    background: var(--dark-bg);
    position: relative;
    overflow: hidden;
}

body.index-editorial .cta-section::before {
    content: '';
    position: absolute;
    top: -30%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 180, 216, 0.14), transparent 70%);
    pointer-events: none;
}

body.index-editorial .cta-title {
    font-size: clamp(1.875rem, 4.2vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.1;
    max-width: 18ch;
    margin-left: auto;
    margin-right: auto;
}

body.index-editorial .cta-form {
    background: var(--ivory);
    padding: var(--space-2xl);
    border-radius: var(--radius-xl);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
}

/* ============================================================
   SECONDARY PAGES — platform-hero / page-hero (case-studies, risorse)
   ============================================================ */

body.index-editorial .platform-hero,
body.index-editorial .page-hero {
    padding: 160px 0 var(--space-3xl);
    background: var(--parchment);
    position: relative;
}

body.index-editorial .platform-hero-content,
body.index-editorial .page-hero .container {
    max-width: 980px;
}

body.index-editorial .platform-hero-title,
body.index-editorial .page-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5.6vw, 4.2rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--text-heading);
    max-width: 16ch;
    margin: 0;
}

body.index-editorial .platform-hero-subtitle,
body.index-editorial .page-subtitle {
    font-family: var(--font-ui);
    font-size: 1.15rem;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 620px;
    margin-top: var(--space-lg);
}

/* Architecture & Security rows reuse benefit-row patterns */
body.index-editorial .architecture-title,
body.index-editorial .security-title,
body.index-editorial .performance-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.4vw, 2.8rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.1;
    color: var(--text-heading);
}

body.index-editorial .architecture-row,
body.index-editorial .security-row {
    position: relative;
    transition: transform 0.4s var(--ease-out), background-color 0.4s ease;
}

body.index-editorial .architecture-row::before,
body.index-editorial .security-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--primary-color);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.5s var(--ease-out);
}

body.index-editorial .architecture-row:hover::before,
body.index-editorial .security-row:hover::before {
    transform: scaleY(1);
}

body.index-editorial .architecture-row:hover,
body.index-editorial .security-row:hover {
    transform: translateX(8px);
    background-color: rgba(0, 180, 216, 0.018);
}

body.index-editorial .architecture-row:hover .architecture-row-tech,
body.index-editorial .security-row:hover .security-row-number {
    color: var(--primary-color);
    transition: color 0.3s ease;
}

/* Integrations section */
body.index-editorial .integrations .section-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.015em;
}

body.index-editorial .integration-category .category-title {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.005em;
}

body.index-editorial .integration-item {
    transition: transform 0.4s var(--ease-out);
}

body.index-editorial .integration-item:hover {
    transform: translateY(-3px);
}

body.index-editorial .integration-feature {
    transition: transform 0.4s var(--ease-out), background-color 0.4s ease;
}

body.index-editorial .integration-feature:hover {
    transform: translateY(-2px);
}

/* Platform CTA */
body.index-editorial .platform-cta {
    background: var(--dark-bg);
    color: var(--text-on-dark-bright);
    padding: var(--space-3xl) 0;
    position: relative;
    overflow: hidden;
}

body.index-editorial .platform-cta::before {
    content: '';
    position: absolute;
    top: -30%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 180, 216, 0.14), transparent 70%);
    pointer-events: none;
}

body.index-editorial .platform-cta .cta-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

body.index-editorial .platform-cta h2 {
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 4.2vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.1;
    color: var(--text-on-dark-bright);
    margin-bottom: var(--space-md);
}

body.index-editorial .platform-cta p {
    color: var(--text-on-dark);
    margin-bottom: var(--space-xl);
}

/* Case study cards */
body.index-editorial .case-study-card {
    transition: transform 0.5s var(--ease-out), box-shadow 0.4s ease;
}

body.index-editorial .case-study-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.08);
}

body.index-editorial .case-study-card h2 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
}

body.index-editorial .case-study-tag {
    font-family: var(--font-ui);
    letter-spacing: 0.04em;
}

/* Resource cards */
body.index-editorial .resource-card {
    transition: transform 0.5s var(--ease-out), box-shadow 0.4s ease;
}

body.index-editorial .resource-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.08);
}

body.index-editorial .resource-title {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
}

body.index-editorial .resource-icon {
    transition: transform 0.5s var(--ease-out);
}

body.index-editorial .resource-card:hover .resource-icon {
    transform: scale(1.1) rotate(-4deg);
}

/* CTA box (case-studies / risorse) */
body.index-editorial .cta-box {
    background: var(--dark-bg);
    color: var(--text-on-dark-bright);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    position: relative;
    overflow: hidden;
}

body.index-editorial .cta-box::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 180, 216, 0.15), transparent 70%);
    pointer-events: none;
}

body.index-editorial .cta-box h3 {
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 2.8vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text-on-dark-bright);
    position: relative;
}

body.index-editorial .cta-box p {
    color: var(--text-on-dark);
    position: relative;
}

body.index-editorial .cta-box .btn {
    position: relative;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 991px) {
    body.index-editorial .hero-new {
        padding: 104px 0 var(--space-2xl);
        min-height: auto;
    }
    body.index-editorial .hero-new-title { font-size: clamp(2.4rem, 9vw, 4.4rem); }
    body.index-editorial .tab-panel.active { grid-template-columns: 1fr; }
    body.index-editorial .demo-content { min-height: auto; }
}

@media (max-width: 768px) {
    body.index-editorial .hero-new { padding: 92px 0 var(--space-2xl); }
    body.index-editorial .hero-new-title { font-size: clamp(2rem, 11vw, 3.4rem); }
    body.index-editorial .hero-new-subtitle { font-size: 1rem; }
    body.index-editorial .hero-eyebrow { font-size: 11px; padding: 5px 12px 5px 8px; }
    body.index-editorial .clients-track .client-logo { width: 140px; min-height: 70px; }
    body.index-editorial .clients-track .client-logo img { max-height: 40px; }
    body.index-editorial .benefit-row:hover,
    body.index-editorial .solution-row:hover {
        transform: none;
    }
}

@media (max-width: 479px) {
    body.index-editorial .hero-new-title { font-size: clamp(1.8rem, 13vw, 2.6rem); }
}

/* ============================================================
   ACCESSIBILITY — respect reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    body.index-editorial *,
    body.index-editorial *::before,
    body.index-editorial *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    body.index-editorial .hero-new-title .hero-word,
    body.index-editorial .hero-eyebrow,
    body.index-editorial .hero-new-subtitle,
    body.index-editorial .hero-new-actions,
    body.index-editorial .hero-trust,
    body.index-editorial .reveal,
    body.index-editorial .reveal-stagger > * {
        opacity: 1;
        transform: none;
    }
    body.index-editorial .clients-track {
        animation: none;
        transform: none;
    }
}