/* Visual system — shared by the homepage and editorial pages. */
:root { --color-dark: #201a32; --color-gray: #686475; --color-light-gray: #f6f5f9; --color-border: #e7e4ed; --color-primary: #6536df; --color-primary-dark: #5025c3; --color-primary-light: #b8a0ff; --max-width: 1280px; --radius: 18px; }
body { background: #fcfbfe; }
::selection { background: #ded3ff; color: #291458; }
:focus-visible { outline: 3px solid #8d67f1; outline-offset: 5px; }
section[id] { scroll-margin-top: 110px; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 10001; padding: 12px 22px; background: white; color: var(--color-primary); border-radius: 8px; }
.skip-link:focus { top: 12px; }
.header, .header.scrolled { padding: 22px max(5vw, calc((100vw - 1360px) / 2)); background: rgba(252,251,254,.94); border-bottom: 1px solid var(--color-border); }
.header-logo img { height: 32px; }
.header-nav { gap: 30px; }
.header-nav a { font-size: 13px; }
.header-nav a[aria-current="page"]:not(.btn-nav) { color: var(--color-primary); }
.header-nav .btn-nav { border-radius: 7px; padding: 12px 21px; }
.menu-toggle { display: none; }
.hero { min-height: 0; padding: 174px 5vw 90px; background: radial-gradient(ellipse at 84% 50%, #eee7fc 0, transparent 48%), #fcfbfe; }
.hero::before { display: none; }
.hero-inner { grid-template-columns: 1fr 1.08fr; gap: 60px; }
.hero-badge { padding: 0; border: 0; background: none; margin-bottom: 26px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.hero-badge::before { width: 7px; height: 7px; animation: none; }
.hero h1 { font-size: clamp(44px,4.4vw,66px); line-height: 1.08; font-weight: 700; letter-spacing: -.055em; margin-bottom: 26px; }
.hero h1 span { color: var(--color-primary); }
.hero-subtitle { font-size: 16px; line-height: 1.8; max-width: 440px; margin-bottom: 30px; }
.hero-cta { font-size: 13px; padding: 15px 21px; border-radius: 7px; }
.hero-secondary { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; margin: 18px 0 18px 18px; }
.hero-secondary:hover { color: var(--color-primary); }
.hero-note { margin-top: 18px; color: var(--color-gray); font-size: 11px; display: flex; align-items: center; gap: 8px; }
.hero-note span { width: 5px; height: 5px; background: #80758f; border-radius: 50%; }
.product-visual { position: relative; min-width: 0; padding: 28px 0 110px; }
.visual-orbit { position: absolute; width: 420px; height: 420px; border: 1px solid #d8c8f1; border-radius: 50%; top: -18px; right: -25px; }
.visual-orbit::after { content: ''; position: absolute; inset: -32px; border: 1px dashed #ddd1ee; border-radius: 50%; }
.product-window { position: relative; border: 1px solid #e0d8ed; background: white; border-radius: 12px; overflow: hidden; transform: none; box-shadow: 0 30px 70px -25px #4c2c7140, 0 2px 6px #32234308; }
.product-topbar { height: 49px; border-bottom: 1px solid #efedf3; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; }
.product-brand { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; }
.product-brand img { width: 21px; height: 21px; object-fit: contain; }
.product-topbar-right { display: flex; gap: 10px; align-items: center; color: #766f80; font-size: 9px; }
.avatar { background: #eee8f8; border-radius: 50%; color: #7145bf; width: 23px; height: 23px; display: grid; place-items: center; }
.product-layout { display: grid; grid-template-columns: 47px 1fr; }
.product-sidebar { border-right: 1px solid #efedf3; padding: 17px 7px; display: flex; flex-direction: column; align-items: center; gap: 17px; color: #8a8396; font-size: 17px; }
.product-sidebar span { width: 30px; height: 30px; text-align: center; }
.product-sidebar .sidebar-active { background: #eee7fc; color: #6536df; border-radius: 6px; }
.product-main { padding: 23px 19px 24px; background: #fdfcfe; min-width: 0; }
.dashboard-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.micro-label { font-size: 7px; letter-spacing: .09em; color: #80718c; }
.dashboard-heading h2 { margin: 3px 0 0; font-size: 16px; line-height: 1.4; font-weight: 600; letter-spacing: -.03em; }
.status-dot { flex-shrink: 0; width: 6px; height: 6px; background: #34886c; border-radius: 50%; box-shadow: 0 0 0 4px #e9f5ef; }
.dashboard-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: 22px; }
.dashboard-metrics > div { border: 1px solid #eae6f0; padding: 12px 10px; border-radius: 7px; background: #fff; }
.dashboard-metrics span { font-size: 9px; color: #726b7d; }
.dashboard-metrics strong { display: flex; justify-content: space-between; align-items: center; font-size: 25px; font-weight: 600; line-height: 1.6; }
.dashboard-metrics small { font-size: 13px; color: #39846f; }
.dashboard-metrics .metric-purple { color: #8562d6; }
.dashboard-metrics em { display: block; font-style: normal; color: #82768c; font-size: 7px; }
.dashboard-chart { border: 1px solid #eae6f0; border-radius: 7px; margin-top: 13px; padding: 15px; background: white; }
.dashboard-chart > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dashboard-chart strong { font-size: 10px; font-weight: 600; }
.dashboard-chart > div > span { font-size: 8px; color: #83788c; }
.chart-bars { height: 96px; display: flex; gap: 17px; align-items: flex-end; padding: 6px 10px 0; margin-top: 10px; background: repeating-linear-gradient(to top, #eeeaf3 0, #eeeaf3 1px, transparent 1px, transparent 30px); }
.chart-bars i { flex: 1; height: var(--bar); background: #dfd4f8; border-radius: 4px 4px 0 0; }
.chart-bars i:nth-child(5),.chart-bars i:nth-child(6) { background: #ac8de9; }
.chart-bars i:last-child { background: #7443d9; }
.chart-days { display: flex; justify-content: space-around; margin-top: 7px; }
.dashboard-task { display: flex; gap: 9px; align-items: center; padding-top: 16px; }
.task-check { color: #338a6d; background: #eaf5ef; padding: 2px 7px; border-radius: 6px; font-size: 12px; }
.dashboard-task strong { display: block; font-size: 9px; font-weight: 600; }
.dashboard-task div span { display: block; font-size: 8px; color: #86798c; }
.task-state { margin-left: auto; font-size: 8px; color: #39846f; }
.ai-assistant { position: absolute; bottom: 36px; left: -28px; right: 22px; padding: 20px; background: #2c1b48; color: white; border: 1px solid #594274; border-radius: 11px; box-shadow: 0 18px 36px #3a1b4e26; display: flex; align-items: center; gap: 13px; transform: none; }
.ai-assistant-icon { font-size: 24px; width: 43px; height: 43px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid #7e609f; background: #513377; border-radius: 10px; color: #e0ceff; }
.ai-assistant div > span { display: block; font-size: 8px; letter-spacing: .13em; color: #c6abed; margin-bottom: 4px; }
.ai-assistant strong { display: block; font-size: 14px; font-weight: 500; }
.ai-assistant p { color: #d5c7e4; font-size: 10px; line-height: 1.6; margin-top: 4px; }
.ai-check { margin-left: auto; color: #c3e5b3; background: #415044; width: 22px; height: 22px; text-align: center; border-radius: 50%; font-size: 12px; }
.product-visual figcaption { position: absolute; bottom: 3px; right: 14px; font-size: 9px; color: #81738e; }
.benefit-strip { margin: 0 auto; max-width: 1280px; padding: 30px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 30px; }
.benefit-strip div + div { border-left: 1px solid var(--color-border); padding-left: 35px; }
.benefit-strip span { display: block; font-size: 9px; color: #8a7a9c; letter-spacing: .13em; margin-bottom: 7px; }
.benefit-strip strong { font-size: 16px; font-weight: 500; letter-spacing: -.02em; }
.benefit-strip > a { width: 44px; height: 44px; border: 1px solid #d8cbea; border-radius: 50%; display: grid; place-items: center; color: var(--color-primary); font-size: 22px; }
.section { padding: 100px 0; }
.section-label { font-size: 10px; font-weight: 600; letter-spacing: .13em; margin-bottom: 18px; }
.section-header { margin-bottom: 45px; }
.section-header h3 { font-size: clamp(30px,3.1vw,45px); font-weight: 600; line-height: 1.16; letter-spacing: -.045em; max-width: 770px; }
.section-header p { font-size: 15px; max-width: 650px; line-height: 1.8; }
.services-grid { gap: 18px; }
.service-card { border-radius: 12px; padding: 30px; background: white; }
.service-card h4 { font-size: 19px; font-weight: 600; line-height: 1.3; }
.service-card p { font-size: 13px; line-height: 1.8; }
.service-icon { border-radius: 10px; background: #f1ecfa; width: 43px; height: 43px; margin-bottom: 25px; }
.home-page .service-card:first-child { background: #eee8fa; border-color: #e0d4f4; }
.home-page .service-card:nth-child(3) { background: #f2eff8; }
.webapp-section { width: 90%; max-width: var(--max-width); margin: 0 auto; padding: 72px clamp(28px, 5vw, 64px); border-radius: 20px; background: radial-gradient(ellipse at 90% 0%, #493261, transparent 65%), #261c35; }
.webapp-section .section-label { color: #c7adfa; }
.webapp-block h4 { color: #b2a2c2; font-size: 10px; }
.webapp-tags span { font-size: 12px; border-radius: 6px; padding: 9px 14px; }
.webapp-bottom p { color: #bcb0ca; font-size: 13px; }
.ia-teaser { padding: 80px 0; }
.ia-teaser-inner { max-width: none; border-bottom: 1px solid var(--color-border); padding-bottom: 55px; gap: 30px; }
.ia-teaser-icon { width: 66px; height: 66px; flex-shrink: 0; background: #ede5fa; border-radius: 18px; }
.ia-teaser-text h3 { font-size: 28px; letter-spacing: -.035em; font-weight: 600; }
.ia-teaser-text p { max-width: 760px; font-size: 14px; }
.expertise-section { padding: 35px 0 70px; background: #fcfbfe; }
.expertise-content .section-header { max-width: 730px; }
.clients-track a span { opacity: .65; font-size: 23px; }
.clients-track:focus-within { animation-play-state: paused; }
.process-section { padding: 90px 5vw; background: #f2eff7; }
.process-step { text-align: left; padding: 25px 22px 10px 0; }
.process-step-number { font-size: 14px; font-weight: 500; border-top: 1px solid #d2c7e3; padding-top: 22px; margin-bottom: 25px; }
.process-step h4 { font-size: 20px; font-weight: 600; }
.process-step p { font-size: 13px; }
.process-connector { display: none; }
.project-invitation { max-width: 1280px; margin: 0 auto; padding: 90px 0; display: flex; align-items: center; justify-content: space-between; gap: 35px; }
.project-invitation h2 { font-size: clamp(28px,3vw,42px); font-weight: 600; letter-spacing: -.045em; line-height: 1.2; }
.project-invitation .hero-cta { flex-shrink: 0; }
.footer { padding: 60px 5vw 26px; background: #f6f4f9; }
.footer-col h4 { font-size: 10px; letter-spacing: .1em; }
.footer-col ul li a, .footer-brand p { font-size: 12px; }
.footer-content { gap: 30px; }
.footer-bottom { font-size: 11px; }
.page-header { padding: 165px 5vw 80px; text-align: left; background: radial-gradient(ellipse at top right,#eae1f9, transparent 65%), #f3f0f8; }
.page-header > * { max-width: 1280px; margin-left: auto; margin-right: auto; }
.page-header .section-label { display: block; }
.page-header h1 { font-size: clamp(38px,5vw,64px); font-weight: 600; line-height: 1.1; letter-spacing: -.045em; margin-bottom: 24px; }
.page-header p { max-width: 1280px; font-size: 17px; }
.ia-page-header { background: radial-gradient(ellipse at top right,#4c316b,transparent 65%), #261c35; }
.ia-page-header h1 { color: white; }
.ia-page-header .section-label { color: #c7adfa; }
.contact-section { padding: 85px 5vw; }
.contact-form { box-shadow: 0 14px 60px #30214607; }
.compare-card { background: white; }
/* Content stays available when scripts fail or are disabled. */
.fade-in { opacity: 1; transform: none; }
@media(min-width: 769px) { .home-page .services-grid { grid-template-columns: repeat(3,1fr); } }
@media(min-width: 1401px) { .webapp-section { width: var(--max-width); } }
@media(max-width: 1400px) { .section, .benefit-strip, .project-invitation, .expertise-content { margin-left: 5vw; margin-right: 5vw; } }
@media(max-width: 1100px) {
    .hero-inner { gap: 35px; }
    .hero h1 { font-size: 49px; }
    .hero-secondary { margin-left: 0; display: flex; }
    .product-main { padding: 16px 12px 22px; }
    .ai-assistant { left: -12px; right: 4px; padding: 16px; }
    .dashboard-heading h2 { font-size: 13px; }
    .dashboard-metrics { gap: 5px; }
    .dashboard-metrics > div { padding: 9px 7px; }
    .dashboard-metrics strong { font-size: 22px; }
    .dashboard-metrics em { font-size: 6px; }
    .chart-bars { gap: 12px; }
    .visual-orbit { width: 320px; height: 320px; top: 35px; right: 0; }
    .footer-content { grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 20px; }
}
@media(max-width: 800px) {
    .header, .header.scrolled { padding: 17px 5vw; }
    .header-logo img { height: 28px; }
    .header-nav { gap: 18px; }
    .header-nav a { font-size: 12px; }
    .hero { padding-top: 130px; }
    .hero-inner { grid-template-columns: 1fr; gap: 36px; }
    .hero-content { max-width: 590px; }
    .hero h1 { font-size: clamp(42px,8vw,64px); }
    .hero-subtitle { max-width: 540px; }
    .hero-secondary { display: inline-flex; margin-left: 18px; }
    .product-visual { width: 100%; max-width: 570px; margin: 0 auto; }
    .dashboard-heading h2 { font-size: 16px; }
    .dashboard-metrics em { font-size: 8px; }
    .benefit-strip { gap: 20px; }
    .benefit-strip div + div { padding-left: 20px; }
    .benefit-strip > a { display: none; }
    .benefit-strip { grid-template-columns: repeat(3,1fr); }
    .benefit-strip strong { font-size: 14px; }
    .section { padding: 70px 0; }
    .webapp-section { padding: 60px 6vw; }
    .webapp-grid { gap: 28px; }
    .expertise-section { padding: 10px 0 40px; }
    .footer-content { grid-template-columns: 1fr 1fr; gap: 32px; }
    .project-invitation { padding: 65px 0; }
    .process-step { padding: 16px 0; }
    .process-step-number { margin-bottom: 12px; }
}
@media(max-width: 768px) {
    .header { flex-wrap: wrap; }
    .header-nav { width: 100%; flex-wrap: wrap; padding-top: 18px; }
    .header-nav a:not(.btn-nav) { display: block; }
    .navigation-ready .menu-toggle { display: flex; gap: 14px; align-items: center; padding: 8px 12px; border: 1px solid var(--color-border); background: white; border-radius: 6px; color: var(--color-dark); font: inherit; font-size: 12px; }
    .navigation-ready .header-nav { display: none; }
    .navigation-ready .header-nav.is-open { display: flex; padding: 22px 0 8px; flex-direction: column; align-items: stretch; gap: 0; }
    .navigation-ready .header-nav.is-open a { padding: 13px 14px; }
    html:not(.navigation-ready) .hero, html:not(.navigation-ready) .page-header { padding-top: 210px; }
    .project-invitation { flex-direction: column; align-items: flex-start; }
    .page-header { padding-top: 135px; }
    .page-header p { font-size: 15px; }
}
@media(max-width: 480px) {
    .hero { padding: 120px 6vw 48px; }
    .hero h1 { font-size: 44px; }
    .hero-badge { font-size: 9px; letter-spacing: .06em; }
    .hero-subtitle { font-size: 15px; }
    .hero-secondary { margin-left: 0; display: flex; }
    .hero-note { font-size: 10px; }
    .product-visual { padding-top: 10px; }
    .product-window { transform: none; }
    .product-layout { grid-template-columns: 32px 1fr; }
    .product-sidebar { padding: 14px 0; font-size: 14px; }
    .product-sidebar span { width: 25px; }
    .product-main { padding: 14px 9px 30px; }
    .dashboard-heading h2 { font-size: 13px; }
    .micro-label { font-size: 6px; }
    .dashboard-metrics span { font-size: 8px; }
    .dashboard-metrics em { font-size: 6px; }
    .dashboard-metrics strong { font-size: 23px; }
    .dashboard-chart { padding: 12px; }
    .dashboard-task strong { font-size: 8px; }
    .task-state { display: none; }
    .ai-assistant { left: -5px; right: -5px; padding: 14px 11px; gap: 9px; }
    .ai-assistant-icon { width: 34px; height: 36px; }
    .ai-assistant strong { font-size: 12px; }
    .ai-assistant p { font-size: 9px; }
    .benefit-strip { grid-template-columns: 1fr; padding: 26px 0; gap: 18px; }
    .benefit-strip div + div { border-left: 0; padding-left: 0; }
    .benefit-strip div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .benefit-strip span { margin: 0; font-size: 8px; }
    .benefit-strip strong { font-size: 12px; }
    .section-header h3 { font-size: 32px; }
    .section-header p { font-size: 14px; }
    .service-card { padding: 26px; }
    .ia-teaser-inner { gap: 20px; }
    .ia-teaser-text h3 { font-size: 26px; }
    .footer-content { grid-template-columns: 1fr; }
    .contact-form { padding: 24px; }
    .webapp-bottom { text-align: left; align-items: flex-start; }
}
@media(prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .clients-track { flex-wrap: wrap; width: auto; justify-content: center; gap: 24px; }
    .clients-track [aria-hidden="true"] { display: none; }
    .code-content .line { opacity: 1; }
}

.legal-content { max-width: 900px; line-height: 1.9; }
.legal-content .hero-cta { margin-top: 32px; }
.approach-grid > *, .code-content { min-width: 0; }

.contact-info h1 { font-size: clamp(32px,3vw,44px); font-weight: 600; letter-spacing: -.04em; line-height: 1.15; margin-bottom: 24px; }

/* Keep the contact CTA legible when the generic navigation hover rule applies. */
.header-nav .btn-nav:hover,
.header-nav .btn-nav:focus-visible {
    color: #fff;
    background: var(--color-primary-dark);
}

/* Pointer-driven depth; the figure itself stays still for stable hit testing. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .product-visual.is-tiltable .product-window {
        transform: perspective(1500px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
        transition: transform 650ms cubic-bezier(.2,.7,.2,1);
    }
    .product-visual.is-tiltable .ai-assistant {
        transform: perspective(1500px) translate3d(var(--depth-x, 0px), var(--depth-y, 0px), 0) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
        transition: transform 650ms cubic-bezier(.2,.7,.2,1);
    }
    .product-visual.is-tracking .product-window,
    .product-visual.is-tracking .ai-assistant {
        transition-duration: 160ms;
        will-change: transform;
    }
}

/* IA page: a light editorial introduction and a concrete workflow. */
.automation-hero { max-width: var(--max-width); width: 90%; margin: 0 auto; padding: 165px 0 75px; display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 85px; border-bottom: 1px solid var(--color-border); }
.automation-hero h1 { font-size: clamp(40px,4.5vw,65px); font-weight: 600; letter-spacing: -.055em; line-height: 1.08; margin-bottom: 27px; }
.automation-hero h1 span { color: var(--color-primary); }
.automation-hero-copy > p { font-size: 16px; line-height: 1.85; color: var(--color-gray); max-width: 500px; margin-bottom: 30px; }
.automation-hero-note { display: block; font-size: 11px; color: var(--color-gray); margin-top: 20px; }
.automation-flow { margin: 0; padding: 27px; border-radius: 22px; background: #f2eef8; border: 1px solid #e6deef; }
.flow-caption { display: flex; align-items: center; gap: 8px; color: #70617e; font-size: 9px; letter-spacing: .1em; margin-bottom: 25px; }
.flow-caption > span:last-child { margin-left: auto; font-size: 20px; }
.flow-dot { width: 6px; height: 6px; border-radius: 50%; background: #8163b2; }
.flow-document { display: flex; align-items: center; gap: 14px; padding: 17px; background: white; border-radius: 11px; border: 1px solid #e6deef; }
.flow-file-icon { width: 37px; height: 43px; display: grid; place-items: center; background: #f1ecf8; color: #79559c; font-size: 23px; border-radius: 5px; }
.flow-document strong { display: block; font-size: 14px; font-weight: 600; }
.flow-document div > span { display: block; font-size: 10px; color: #81748d; margin-top: 3px; }
.flow-file-type { font-size: 8px; color: #85768f; letter-spacing: .06em; margin-left: auto; }
.flow-connector { height: 31px; display: grid; place-items: center; color: #9c88b2; }
.flow-engine { display: flex; align-items: center; gap: 15px; padding: 21px 17px; background: #392454; color: white; border: 1px solid #5d3d82; border-radius: 11px; box-shadow: 0 10px 22px #39245416; }
.flow-spark { color: #e0ccfa; font-size: 27px; }
.flow-engine div > span { display: block; font-size: 8px; color: #d1b8ef; letter-spacing: .12em; margin-bottom: 4px; }
.flow-engine strong { font-size: 13px; font-weight: 500; }
.flow-result { background: white; border: 1px solid #e6deef; border-radius: 11px; overflow: hidden; }
.flow-result-heading { display: flex; align-items: center; gap: 10px; padding: 17px 17px 10px; }
.flow-result-heading > span { background: #e8f4ee; color: #377a60; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font-size: 12px; }
.flow-result-heading strong { font-weight: 600; font-size: 14px; }
.flow-result-fields { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 7px 17px 17px; }
.flow-result-fields > span { font-size: 9px; color: #7e7487; }
.flow-result-fields b { display: block; color: #4e405c; font-size: 11px; font-weight: 500; margin-top: 4px; }
.flow-human { border-top: 1px solid #eee9f3; padding: 10px 17px; font-size: 10px; color: #776185; background: #fbf9fd; }
.flow-human > span { margin-right: 5px; }
.automation-flow figcaption { text-align: center; font-size: 9px; color: #81748d; margin-top: 17px; }
/* Each comparison has a clear subject, two distinct states and an outcome. */
.compare-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.compare-card { border-radius: 16px; background: white; display: flex; flex-direction: column; box-shadow: 0 5px 20px #2b173504; }
.compare-card-heading { display: flex; align-items: center; gap: 13px; padding: 23px 25px; border-bottom: 1px solid var(--color-border); }
.compare-index { font-size: 11px; font-weight: 600; color: #755597; background: #f1ecf8; border-radius: 8px; width: 33px; height: 33px; display: grid; place-items: center; flex-shrink: 0; }
.compare-card-heading h4 { font-size: 18px; font-weight: 600; letter-spacing: -.025em; line-height: 1.25; }
.compare-card-arrow { margin-left: auto; color: #9883af; }
.compare-body { display: grid; grid-template-columns: 1fr 1fr; flex: 1; }
.compare-before, .compare-after { padding: 23px 25px; }
.compare-before { background: #fcfbfd; }
.compare-after { background: #f6f2fd; border-top: 0; border-left: 1px solid #e7ddf3; }
.compare-label { display: flex; align-items: center; gap: 7px; text-transform: none; font-size: 10px; letter-spacing: 0; margin-bottom: 14px; }
.compare-before .compare-label { color: #79717f; }
.compare-after .compare-label { color: #6233a1; }
.compare-label > span { font-size: 14px; }
.compare-before p, .compare-after p { font-size: 12px; line-height: 1.85; }
.compare-after p { color: #514062; }
.compare-outcome { border-top: 1px solid #e8e4ef; padding: 15px 25px; display: flex; align-items: center; gap: 9px; color: #386652; font-size: 12px; font-weight: 500; }
.compare-outcome > span { color: #508368; }
@media (min-width: 1401px) { .automation-hero { width: var(--max-width); } }
@media (max-width: 1100px) {
    .automation-hero { gap: 40px; }
    .automation-flow { padding: 20px; }
    .compare-before, .compare-after { padding: 20px; }
    .compare-card-heading { padding: 20px; }
}
@media (max-width: 800px) {
    .automation-hero { grid-template-columns: 1fr; padding-top: 130px; gap: 40px; }
    .automation-hero h1 { font-size: clamp(39px,7vw,56px); }
    .automation-flow { max-width: 540px; width: 100%; }
    .compare-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .automation-hero { padding-top: 115px; padding-bottom: 55px; }
    .automation-hero-copy > p { font-size: 15px; }
    .automation-flow { padding: 17px; }
    .flow-engine strong { font-size: 12px; }
    .compare-body { grid-template-columns: 1fr; }
    .compare-after { border-left: 0; border-top: 1px solid #e7ddf3; }
    .compare-card-heading h4 { font-size: 17px; }
    .compare-before p, .compare-after p { font-size: 13px; }
    .compare-outcome { padding: 16px 20px; }
}
/* Hide only after the observer is ready; no-JS content remains visible. */
.reveal-pending { opacity: 0; transform: translateY(24px); transition: opacity 950ms ease, transform 950ms cubic-bezier(.2,.65,.3,1); transition-delay: var(--reveal-delay, 0ms); }
.reveal-pending.is-revealed, .reveal-pending:focus-within { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal-pending { opacity: 1; transform: none; transition: none; }
}
@media print {
    .reveal-pending { opacity: 1 !important; transform: none !important; }
}

/* Animated product tour: a moving menu selection and coordinated scenes. */
.product-sidebar { position: relative; }
.demo-nav-item { position: relative; z-index: 1; flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center; border: 0; padding: 0; background: transparent; color: #8a8396; font: inherit; cursor: pointer; border-radius: 6px; }
.demo-nav-item span { display: grid; place-items: center; }
.demo-nav-item[aria-pressed="true"], .demo-nav-item:hover { color: #6536df; }
.product-sidebar .sidebar-indicator { position: absolute; left: 50%; top: 17px; width: 30px; height: 30px; border-radius: 6px; background: #eee7fc; border: 1px solid #dfd0f8; transform: translate(-50%, calc(var(--demo-index, 0) * 47px)); transition: transform 650ms cubic-bezier(.2,.7,.2,1); }
.product-visual .dashboard-heading h2 { min-height: 2.8em; }
.product-visual .dashboard-metrics em { min-height: 2.8em; }
.product-visual .dashboard-chart { height: 185px; }
.product-visual .ai-message { min-width: 0; flex: 1; }
.product-visual .ai-message strong { min-height: 1.6em; }
.product-visual .ai-message p { min-height: 3.2em; }
.demo-list { display: grid; gap: 8px; padding-top: 14px; }
.demo-list-row { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid #eee9f4; border-radius: 5px; background: #fcfbfe; font-size: 9px; }
.demo-list-row > span:first-child { color: #8862bd; }
.demo-list-row b { font-weight: 500; }
.demo-list-row small { margin-left: auto; color: #38795e; font-size: 8px; background: #eaf5ef; padding: 2px 5px; border-radius: 4px; }
.demo-list-row small.demo-waiting { color: #84642a; background: #faf1df; }
.demo-caption { left: 0; right: 0 !important; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.demo-pause { flex-shrink: 0; background: none; border: 1px solid #ded5e9; border-radius: 5px; color: #6b577f; padding: 4px 8px; font: inherit; cursor: pointer; }
.demo-pause:hover { background: #eee7f8; }
.demo-pause[hidden] { display: none; }
@media(max-width: 480px) {
    .product-sidebar .sidebar-indicator { top: 14px; width: 25px; }
    .demo-nav-item { width: 25px; }
    .demo-caption > span { max-width: 210px; font-size: 8px; }
    .product-visual .dashboard-chart { height: 185px; }
}

/* A wider desktop display, with a more compact dashboard inside it. */
@media (min-width: 801px) {
    .hero-inner { grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: 48px; }
    .product-main { padding-top: 18px; padding-bottom: 18px; }
    .product-visual .dashboard-heading h2 { min-height: 1.4em; }
    .product-visual .dashboard-metrics { margin-top: 16px; }
    .product-visual .dashboard-metrics em { min-height: 1.6em; }
    .product-visual .dashboard-chart { height: 160px; }
    .product-visual .chart-bars { height: 82px; }
    .product-visual .demo-list { padding-top: 10px; gap: 6px; }
    .product-visual .demo-list-row { padding: 6px 8px; }
}
@media (min-width: 801px) and (max-width: 1100px) {
    .hero-inner { gap: 32px; }
    .hero h1 { font-size: 43px; }
}

/* The logo's mint green is the second brand color, alongside violet. */
:root {
    --color-mint: #10ff92;
    --color-mint-hover: #0ce785;
    --color-green-ink: #126342;
    --color-green-soft: #edf9f2;
    --color-green-border: #c9e8d6;
}
.hero-badge::before, .hero-note span { background: #14b975; }
.hero-cta, .form-submit { background: var(--color-mint); color: #173827; }
.hero-cta:hover, .form-submit:hover { background: var(--color-mint-hover); color: #173827; box-shadow: 0 10px 30px #10b97120; }
.benefit-strip > div:nth-child(2) span { color: var(--color-green-ink); }
.benefit-strip > a { background: var(--color-green-soft); border-color: var(--color-green-border); color: var(--color-green-ink); }
.benefit-strip > a:hover { background: var(--color-mint); }
.home-page .service-card:nth-child(3) { background: var(--color-green-soft); border-color: var(--color-green-border); }
.home-page .service-card:nth-child(3) .service-icon,
.home-page .service-card:nth-child(4) .service-icon { background: #d8f4e4; }
.home-page .service-card:nth-child(3) .service-icon svg,
.home-page .service-card:nth-child(4) .service-icon svg { color: var(--color-green-ink); }
.home-page .service-card:nth-child(3) p a { color: var(--color-green-ink) !important; }
.home-page .service-card:nth-child(3):hover { border-color: #4ac38c; box-shadow: 0 8px 30px #1a925311; }
.home-page .service-card:nth-child(3)::before { background: #25bb78; }
.webapp-section .section-label { color: var(--color-mint); }
.webapp-tags span:hover { background: #10ff9212; border-color: #10ff9255; }
.ia-teaser-icon { background: #dff5e8; }
.ia-teaser-icon svg, .ia-teaser-text a { color: var(--color-green-ink); }
.process-step:nth-of-type(3) .process-step-number,
.process-step:nth-of-type(7) .process-step-number { color: var(--color-green-ink); border-top-color: #7bcba2; }
.project-invitation { background: var(--color-green-soft); border: 1px solid var(--color-green-border); border-radius: 18px; padding: 55px clamp(24px,4vw,56px); margin-top: 65px; margin-bottom: 65px; }
.project-invitation .section-label { color: var(--color-green-ink); }
.chart-bars i:nth-child(5) { background: #b9ecd0; }
.chart-bars i:nth-child(6) { background: #5dd99b; }
.chart-bars i:last-child { background: var(--color-mint); }
.ai-assistant { border-top: 2px solid #5ddb9f; }
.ai-assistant div > span { color: #87efb7; }
.ai-check { background: var(--color-mint); color: #173827; }
.automation-hero h1 span { color: var(--color-green-ink); }
.flow-dot { background: #19b572; }
.flow-spark { color: var(--color-mint); }
.flow-result { border-color: var(--color-green-border); }
.flow-result-heading > span { background: var(--color-mint); color: #173827; }
.flow-human { background: var(--color-green-soft); color: var(--color-green-ink); border-top-color: var(--color-green-border); }
.approach-feature:nth-child(even) .approach-feature-icon { background: #def4e7; }
.approach-feature:nth-child(even) .approach-feature-icon svg { color: var(--color-green-ink); }
.compare-after { background: var(--color-green-soft); border-color: var(--color-green-border); }
.compare-after .compare-label { color: var(--color-green-ink); }
.compare-after p { color: #355b47; }
.compare-outcome > span { display: grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; background: #d8f4e4; color: var(--color-green-ink); }
.contact-process { background: var(--color-green-soft); border-left-color: #26b776; }
@media (max-width: 480px) { .project-invitation { margin-top: 40px; margin-bottom: 40px; padding: 35px 24px; } }

/* Client names in a seamless ribbon of cards. */
.clients-controls { max-width: var(--max-width); width: 90%; margin: 0 auto 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--color-gray); font-size: 12px; }
.clients-marquee { padding: 8px 0 24px; mask-image: linear-gradient(to right,transparent,#000 5%,#000 95%,transparent); -webkit-mask-image: linear-gradient(to right,transparent,#000 5%,#000 95%,transparent); }
.clients-track { gap: 0; animation: marquee 55s linear infinite; }
.clients-group { display: flex; flex-shrink: 0; gap: 16px; padding-right: 16px; }
.clients-track .client-card { display: flex; justify-content: center; align-items: center; text-align: center; width: 228px; height: 108px; padding: 24px; background: #fff; border: 1px solid #e4e4e4; border-radius: 12px; box-shadow: 0 5px 14px #00000005; transition: background .25s, border-color .25s; }
.clients-track .client-card > span:first-child { opacity: 1; color: #202020; font-size: 17px; font-weight: 600; letter-spacing: -.025em; }
.clients-marquee:hover .clients-track { animation-play-state: paused; }
/* More of the bright logo green, balanced by dark, readable text. */
.header-nav .btn-nav { background: var(--color-mint); color: #173827; }
.header-nav .btn-nav:hover, .header-nav .btn-nav:focus-visible { background: #173827; color: #fff; }
.home-page .service-card:nth-child(3) .service-icon, .ia-teaser-icon { background: var(--color-mint); }
.benefit-strip > a { background: var(--color-mint); border-color: var(--color-mint); }
.project-invitation { background: var(--color-mint); border-color: var(--color-mint); }
.project-invitation .section-label { color: #173827; }
.project-invitation .hero-cta { background: #173827; color: white; }
.project-invitation .hero-cta:hover { background: #24593e; color: white; }
.compare-outcome > span { background: var(--color-mint); }
.flow-spark { background: var(--color-mint); color: #173827; width: 40px; height: 40px; flex-shrink: 0; border-radius: 9px; display: grid; place-items: center; }
@media(max-width: 768px) {
    .clients-track .client-card { width: 195px; height: 90px; padding: 18px; }
    .clients-track .client-card > span:first-child { font-size: 15px; }
    .clients-controls { font-size: 10px; }
}
@media(prefers-reduced-motion: reduce) {
    .clients-marquee { mask-image: none; -webkit-mask-image: none; }
    .clients-track { width: 100%; animation: none; }
    .clients-group { flex-wrap: wrap; justify-content: center; padding: 0 5vw; }
    .clients-group[aria-hidden="true"] { display: none; }
}

/* Decorative client cards: no external navigation. */
.clients-track .client-card { cursor: default; }

/* Inizià: engineering studio. Graphite, paper, fluorescent green and precise rules. */
:root { --font-main: 'Helvetica Neue', Helvetica, Arial, sans-serif; --color-dark: #17221e; --color-gray: #626963; --color-light-gray: #eceee7; --color-border: #d9ddd4; --radius: 6px; }
body { background: #f5f5ef; font-family: var(--font-main); }
.header, .header.scrolled { background: #14221ef5; border-bottom: 1px solid #ffffff19; padding-top: 20px; padding-bottom: 20px; }
.header-nav a { color: #edf3ed; font-size: 12px; }
.header-nav a:hover, .header-nav a[aria-current="page"]:not(.btn-nav) { color: var(--color-mint); }
.header-logo img { height: 40px; }
.header-nav .btn-nav, .hero-cta, .form-submit { border-radius: 3px; }
.header-nav .btn-nav:hover, .header-nav .btn-nav:focus-visible { background: #d7ffe9; color: #173827; }
.section-label, .studio-eyebrow, .studio-scope, .service-index, .demo-context-note, .process-step-number { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; }
.section-label { letter-spacing: .1em; color: #4c6055; font-size: 10px; }
.section-header h3 { font-weight: 500; letter-spacing: -.055em; line-height: 1.12; }
.studio-hero { padding: 145px 5vw 0; background: #14221e; color: #f2f7ed; }
.studio-hero-inner { max-width: var(--max-width); margin: 0 auto; }
.studio-eyebrow { display: flex; justify-content: space-between; gap: 20px; font-size: 10px; letter-spacing: .13em; color: #bdc9c0; padding-bottom: 25px; border-bottom: 1px solid #ffffff24; }
.studio-eyebrow > span:first-child::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 12px; background: var(--color-mint); }
.studio-intro { display: grid; grid-template-columns: 1.25fr 1fr; gap: 65px; padding: 48px 0 55px; align-items: end; }
.studio-intro h1 { font-size: clamp(64px,7.8vw,112px); line-height: .95; font-weight: 500; letter-spacing: -.075em; }
.studio-intro h1 span { color: var(--color-mint); }
.studio-marker { display: inline-block; font-family: monospace; color: var(--color-mint); font-size: 38px; letter-spacing: -.12em; margin-bottom: 25px; }
.studio-intro-copy h2 { font-size: 22px; font-weight: 500; line-height: 1.35; letter-spacing: -.025em; margin-bottom: 20px; }
.studio-intro-copy p { max-width: 440px; font-size: 14px; line-height: 1.85; color: #b9c8bf; margin-bottom: 28px; }
.studio-intro-copy .hero-cta { padding: 16px 22px; }
.studio-text-link { display: inline-flex; gap: 18px; align-items: center; font-size: 12px; font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: 5px; }
.studio-intro-copy .studio-text-link { color: #d6e2d8; margin: 20px 0 0 22px; }
.studio-text-link:hover { color: #18744c; }
.studio-intro-copy .studio-text-link:hover { color: var(--color-mint); }
.studio-scope { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid #ffffff24; font-size: 11px; }
.studio-scope > span { padding: 25px 20px 25px 0; color: #d0dbd3; }
.studio-scope b { font-weight: 400; color: var(--color-mint); margin-right: 15px; }
.engineering-showcase { display: grid; grid-template-columns: .65fr 1.35fr; gap: 60px; align-items: center; border-bottom: 1px solid var(--color-border); padding-top: 65px; padding-bottom: 50px; }
.demo-context h2 { font-size: clamp(27px,2.8vw,39px); line-height: 1.12; letter-spacing: -.055em; font-weight: 500; margin-bottom: 22px; }
.demo-context > p { color: var(--color-gray); font-size: 14px; line-height: 1.85; }
.demo-context-note { margin: 25px 0; padding-top: 20px; border-top: 1px solid var(--color-border); display: flex; align-items: flex-start; gap: 12px; font-size: 10px; line-height: 1.7; color: #68756b; }
.demo-context-note > span:first-child { color: #387b57; font-size: 20px; }
.engineering-showcase .product-visual { width: 100%; max-width: none; margin: 0; }
.engineering-showcase .visual-orbit { display: none; }
.engineering-showcase .product-window { border-radius: 6px; border-color: #ccd8cc; box-shadow: 14px 14px 0 #e3e8dd; }
.engineering-showcase .product-topbar { background: #e9ede5; }
.engineering-showcase .product-main { background: #fcfdf9; }
.engineering-showcase .ai-assistant { border-radius: 4px; background: #14221e; border-color: #426754; border-top-color: var(--color-mint); }
.engineering-showcase .ai-assistant-icon { background: #234837; border-color: #457a5c; color: var(--color-mint); border-radius: 3px; }
.home-page #services .section-header { display: grid; grid-template-columns: 1fr 1fr; column-gap: 65px; align-items: end; }
.home-page #services .section-label { grid-column: 1 / -1; }
.home-page #services .section-header p { margin: 0; font-size: 14px; }
.home-page .services-grid { display: block; border-top: 1px solid #bcc7bc; }
.home-page .service-card { display: grid; grid-template-columns: 30px 48px .85fr 1.25fr; gap: 26px; align-items: center; padding: 32px 4px; border: 0; border-bottom: 1px solid #cdd5cb; border-radius: 0; background: transparent; box-shadow: none; }
.home-page .service-card:first-child, .home-page .service-card:nth-child(3) { background: transparent; border-color: #cdd5cb; }
.home-page .service-card::before { display: none; }
.home-page .service-card:hover, .home-page .service-card:nth-child(3):hover { transform: none; box-shadow: none; border-color: #879e89; }
.service-index { font-size: 11px; color: #64816b; }
.home-page .service-icon { margin: 0; border-radius: 3px; width: 42px; height: 42px; }
.home-page .service-card h4 { font-size: 22px; font-weight: 500; letter-spacing: -.04em; margin: 0; }
.home-page .service-card p { font-size: 13px; line-height: 1.8; }
.webapp-section { background: #27352d; border-radius: 5px; border-left: 5px solid var(--color-mint); }
.webapp-tags span { border-radius: 2px; font-size: 11px; }
.webapp-block h4 { color: #bdcdbf; }
.webapp-section .section-header p { color: #c0cdc3; }
.ia-teaser-icon { border-radius: 3px; }
.ia-teaser-text h3 { font-weight: 500; }
.expertise-section { background: transparent; }
.clients-track .client-card { border-radius: 3px; box-shadow: none; }
.process-section { background: #e8ede2; }
.process-step h4 { font-weight: 500; }
.project-invitation { border-radius: 4px; }
.project-invitation h2 { font-weight: 500; }
.footer { background: #14221e; border-top: 0; color: #e3ebe3; }
.footer-brand img { filter: brightness(0) invert(1); }
.footer-brand p, .footer-col ul li a, .footer-legal, .footer-bottom { color: #b5c5ba; }
.footer-col h4 { color: #eef5ed; }
.footer-col ul li a:hover { color: var(--color-mint); }
.footer-bottom { border-color: #ffffff24; }
.page-header { background: #e8ede2; border-bottom: 1px solid #cdd7cb; }
.page-header h1 { font-weight: 500; font-size: clamp(44px,5.5vw,78px); letter-spacing: -.06em; }
.page-header p { max-width: var(--max-width); }
.automation-hero { align-items: start; padding-top: 155px; gap: 80px; }
.automation-hero h1 { font-weight: 500; letter-spacing: -.065em; font-size: clamp(40px,5.2vw,73px); }
.automation-hero h1 span { color: #176440; }
.automation-flow { border-radius: 4px; background: #e7ece1; border-color: #cbd5c7; }
.flow-document, .flow-engine, .flow-result { border-radius: 3px; }
.flow-engine { background: #14221e; border-color: #314f3c; }
.flow-engine div > span { color: #a7d1b3; }
.flow-human { color: #375b43; }
.approach-feature { border-radius: 4px; }
.compare-card { border-radius: 4px; box-shadow: none; }
.compare-index, .flow-spark, .contact-form, .contact-process, .code-editor, .stack-tab { border-radius: 3px; }
.contact-section { background: #f5f5ef; }
.contact-info h1 { font-weight: 500; font-size: clamp(38px,4vw,57px); }
.contact-form { border-color: #cbd6c8; box-shadow: 10px 10px 0 #e3e8dd; }
@media(max-width: 1100px) {
    .studio-intro { gap: 40px; }
    .studio-intro-copy .studio-text-link { display: flex; width: fit-content; margin-left: 0; }
    .engineering-showcase { gap: 35px; grid-template-columns: .65fr 1.35fr; }
    .home-page .service-card { gap: 18px; grid-template-columns: 25px 42px .9fr 1.2fr; }
}
@media(max-width: 800px) {
    .studio-hero { padding-top: 115px; }
    .studio-intro { grid-template-columns: 1fr; padding: 35px 0 40px; gap: 35px; }
    .studio-intro h1 { font-size: clamp(62px,11.5vw,88px); }
    .studio-intro h1 span br { display: none; }
    .studio-marker { display: none; }
    .studio-intro-copy { max-width: 550px; }
    .studio-intro-copy .studio-text-link { display: inline-flex; margin-left: 22px; }
    .studio-scope { font-size: 9px; }
    .studio-scope b { display: block; margin: 0 0 8px; }
    .engineering-showcase { grid-template-columns: 1fr; gap: 15px; }
    .demo-context { max-width: 550px; }
    .engineering-showcase .product-visual { max-width: 650px; margin: 0 auto; }
    .home-page #services .section-header { display: block; }
    .home-page #services .section-header p { margin-top: 22px; }
    .home-page .service-card { grid-template-columns: 25px 42px 1fr; padding: 24px 0; }
    .home-page .service-card p { grid-column: 3; }
    .home-page .service-card h4 { font-size: 20px; }
    .automation-hero { gap: 35px; }
}
@media(max-width: 768px) {
    .navigation-ready .menu-toggle { background: #14221e; color: white; border-color: #617269; }
    .header-nav .btn-nav { color: #173827; }
    html:not(.navigation-ready) .studio-hero, html:not(.navigation-ready) .automation-hero { padding-top: 210px; }
}
@media(max-width: 480px) {
    .studio-eyebrow { font-size: 8px; letter-spacing: .04em; }
    .studio-eyebrow > span:last-child { display: none; }
    .studio-intro h1 { font-size: 60px; }
    .studio-intro h1 span br { display: block; }
    .studio-intro-copy h2 { font-size: 20px; }
    .studio-intro-copy .studio-text-link { display: flex; margin-left: 0; }
    .studio-scope > span { padding-right: 14px; line-height: 1.6; }
    .studio-scope { font-size: 9px; }
    .home-page .service-card { gap: 12px; }
    .home-page .service-card p { grid-column: 2 / -1; }
    .automation-hero { padding-top: 120px; }
    .automation-hero h1 { font-size: 44px; }
}

/* Motion follows the reading order, with no scroll interception. */
.intro-line { display: inline-block; }
.studio-intro h1 .intro-line-light { color: #f2f7ed; }
.chart-bars i { transform-origin: center bottom; }
.home-page .service-card { position: relative; }
.home-page .service-card::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; background: #739380; transform-origin: left; }
.process-step { position: relative; padding-top: 22px; }
.process-step::before { content: ''; position: absolute; top: 0; left: 0; right: -30px; height: 2px; background: #24a46b; transform-origin: left; }
.process-step:last-child::before { right: 0; }
@media (prefers-reduced-motion: no-preference) {
    .home-page .service-card::after { transition: transform 1000ms cubic-bezier(.2,.65,.3,1); }
    .home-page .service-card.reveal-pending:not(.is-revealed)::after { transform: scaleX(0); }
    .service-icon, .hero-cta > span, .studio-text-link > span { transition: transform 300ms ease; }
    .process-step::before { transform: scaleX(0); transition: transform 1000ms cubic-bezier(.2,.65,.3,1); }
    .process-step.method-arrived::before { transform: scaleX(1); }
}
@media (hover: hover) and (pointer: fine) {
    .home-page .service-card:hover { background: #e8f1e5; }
    .home-page .service-card:hover .service-icon { transform: translateX(4px); }
    .hero-cta:hover > span, .studio-text-link:hover > span { transform: translate(3px,-2px); }
}
@media (max-width: 800px) {
    .process-step::before { right: 0; }
}

.process-step-number { border-top: 0; padding-top: 0; }
@media(min-width: 801px) {
 .process-step:nth-child(3)::before { transition-delay: 180ms; }
 .process-step:nth-child(5)::before { transition-delay: 360ms; }
 .process-step:nth-child(7)::before { transition-delay: 540ms; }
}

/* Small complementary accents; mint remains the action and success color. */
:root { --color-periwinkle: #8fa8ff; --color-blue-ink: #425ca8; --color-blue-soft: #edf1ff; --color-raspberry: #f279a0; --color-rose-ink: #9c365b; --color-rose-soft: #fdeef3; --color-primary: #425ca8; --color-primary-dark: #334986; --color-primary-light: #8fa8ff; }
.service-icon { background: var(--color-blue-soft); }
.home-page .service-card:nth-child(6) .service-icon { background: var(--color-rose-soft); }
.home-page .service-card:nth-child(6) .service-icon svg { color: var(--color-rose-ink); }
.product-sidebar .sidebar-indicator { background: var(--color-blue-soft); border-color: #d0daff; }
.demo-nav-item[aria-pressed="true"] { color: var(--color-blue-ink); }
.chart-bars i { background: #d9e2ff; }
.chart-bars i:nth-child(3) { background: var(--color-raspberry); }
.chart-bars i:nth-child(4) { background: var(--color-periwinkle); }
.flow-file-icon, .approach-feature:nth-child(odd) .approach-feature-icon { background: var(--color-blue-soft); color: var(--color-blue-ink); }
.approach-feature:nth-child(odd) .approach-feature-icon svg { color: var(--color-blue-ink); }
.compare-index { color: var(--color-blue-ink); background: var(--color-blue-soft); }
.compare-card:nth-child(3) .compare-index { color: var(--color-rose-ink); background: var(--color-rose-soft); }
.process-step:first-child .process-step-number { color: var(--color-blue-ink); }
.process-step:nth-child(5) .process-step-number { color: var(--color-rose-ink); }
.process-step:first-child::before { background: var(--color-periwinkle); }
.process-step:nth-child(5)::before { background: var(--color-raspberry); }
.webapp-block:first-child h4 { color: #b2c3ff; }
.webapp-block:nth-child(2) h4 { color: #f6b0c8; }

/* More visible secondary accents, concentrated on small surfaces. */
.home-page .service-card:nth-child(1) .service-icon,
.home-page .service-card:nth-child(2) .service-icon,
.home-page .service-card:nth-child(5) .service-icon { background: var(--color-periwinkle); }
.home-page .service-card:nth-child(1) .service-icon svg,
.home-page .service-card:nth-child(2) .service-icon svg,
.home-page .service-card:nth-child(5) .service-icon svg { color: #21345e; }
.home-page .service-card:nth-child(6) .service-icon { background: var(--color-raspberry); }
.home-page .service-card:nth-child(6) .service-icon svg { color: #512138; }
.studio-scope > span:first-child b { color: var(--color-periwinkle); }
.studio-scope > span:last-child b { color: var(--color-raspberry); }
.demo-context-note { border-top: 2px solid var(--color-periwinkle); }
.demo-context-note > span:first-child { color: var(--color-rose-ink); }
.chart-bars i:nth-child(1), .chart-bars i:nth-child(2), .chart-bars i:nth-child(4) { background: var(--color-periwinkle); }
.chart-bars i:nth-child(3) { background: var(--color-raspberry); }
.process-step:first-child .process-step-number,
.process-step:nth-child(5) .process-step-number { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 32px; padding: 0 10px; border-radius: 3px; background: var(--color-periwinkle); color: #21345e; }
.process-step:nth-child(5) .process-step-number { background: var(--color-raspberry); color: #512138; }
.process-step-number { min-height: 32px; display: flex; align-items: center; }
.webapp-block h4 { padding-left: 12px; border-left: 3px solid var(--color-periwinkle); }
.webapp-block:nth-child(2) h4 { border-left-color: var(--color-raspberry); }
.flow-file-icon, .approach-feature:nth-child(odd) .approach-feature-icon { background: var(--color-periwinkle); color: #21345e; }
.approach-feature:nth-child(odd) .approach-feature-icon svg { color: #21345e; }
.approach-feature:nth-child(3) .approach-feature-icon { background: var(--color-raspberry); }
.approach-feature:nth-child(3) .approach-feature-icon svg { color: #512138; }
.compare-index { background: var(--color-periwinkle); color: #21345e; }
.compare-card:nth-child(3) .compare-index, .compare-card:nth-child(6) .compare-index { background: var(--color-raspberry); color: #512138; }

/* Shared accents across the agency, contact and legal pages. */
.page-header .section-label::before,
.automation-hero-copy > .section-label::before { content: ''; display: inline-block; width: 20px; height: 7px; margin-right: 12px; background: var(--color-periwinkle); box-shadow: 20px 0 var(--color-raspberry); vertical-align: middle; }
.page-header .section-label,
.automation-hero-copy > .section-label { padding-left: 0; }
.page-header .section-label::before,
.automation-hero-copy > .section-label::before { margin-right: 32px; }
.stack-tab.active { background: var(--color-blue-soft); border-color: var(--color-periwinkle); color: var(--color-blue-ink); }
.stack-tech-item { background: var(--color-blue-soft); border-color: #c6d3ff; color: var(--color-blue-ink); }
.stack-tech-item:nth-child(3n) { background: var(--color-rose-soft); border-color: #f4bad0; color: var(--color-rose-ink); }
.code-editor .keyword { color: var(--color-raspberry); }
.code-editor .type, .code-editor .function { color: #afc2ff; }
.contact-detail svg { box-sizing: content-box; padding: 8px; border-radius: 3px; background: var(--color-blue-soft); color: var(--color-blue-ink); flex-shrink: 0; }
.contact-detail:nth-of-type(2) svg { background: var(--color-rose-soft); color: var(--color-rose-ink); }
.contact-process { background: var(--color-rose-soft); border-left-color: var(--color-raspberry); }
.contact-form { border-top: 3px solid var(--color-periwinkle); box-shadow: 10px 10px 0 #e2e8ff; }
.legal-content { border-top: 3px solid var(--color-periwinkle); }
.legal-content h1 { text-decoration: underline; text-decoration-color: var(--color-raspberry); text-decoration-thickness: 3px; text-underline-offset: 12px; }
.legal-content strong { color: var(--color-blue-ink); }
.legal-content strong:nth-of-type(2) { color: var(--color-rose-ink); }
.footer-col h4::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--color-periwinkle); margin-right: 9px; vertical-align: middle; }
.footer-col:nth-child(3) h4::before { background: var(--color-raspberry); }

/* The logo violet returns as a selective brand accent. */
:root { --color-logo-violet: #5116f4; --color-violet-soft: #eee8ff; }
.home-page .service-card:first-child .service-icon,
.approach-feature:first-child .approach-feature-icon { background: var(--color-logo-violet); }
.home-page .service-card:first-child .service-icon svg,
.approach-feature:first-child .approach-feature-icon svg { color: #fff; }
.product-sidebar .sidebar-indicator { background: var(--color-violet-soft); border-color: #cbb8ff; }
.demo-nav-item[aria-pressed="true"] { color: var(--color-logo-violet); }
.chart-bars i:nth-child(2) { background: var(--color-logo-violet); }
.page-header .section-label::before,
.automation-hero-copy > .section-label::before { background: var(--color-logo-violet); }
.compare-card:first-child .compare-index { background: var(--color-logo-violet); color: #fff; }
.stack-tab.active { background: var(--color-violet-soft); border-color: var(--color-logo-violet); color: var(--color-logo-violet); }
.contact-detail:first-of-type svg { background: var(--color-violet-soft); color: var(--color-logo-violet); }
.legal-content strong:first-of-type { color: var(--color-logo-violet); }
.footer-col:nth-child(2) h4::before { background: #a589ff; }

/* A self-contained living demo, independent of the page scroll. */
.engineering-showcase .product-visual { isolation: isolate; }
.engineering-showcase .product-visual::before { content: ''; position: absolute; z-index: -1; pointer-events: none; inset: 3% -2% 12%; border-radius: 40%; background: radial-gradient(ellipse at 25% 35%,#8fa8ff55,transparent 60%),radial-gradient(ellipse at 75% 65%,#5116f42b,transparent 60%); filter: blur(28px); opacity: .65; }
.engineering-showcase .product-visual[data-demo-scene="3"]::before { background: radial-gradient(ellipse at 25% 35%,#8fa8ff44,transparent 60%),radial-gradient(ellipse at 75% 65%,#f279a050,transparent 60%); }
.workflow-panel { height: 100%; display: grid !important; place-items: center; }
.workflow-paper { display: flex; gap: 12px; align-items: center; width: 100%; border: 1px solid #d9d3ee; border-radius: 5px; padding: 17px 12px; background: #f8f6ff; }
.workflow-file { font-size: 28px; color: var(--color-logo-violet); }
.workflow-paper > div { flex: 1; }
.workflow-paper strong, .workflow-paper small { display: block; }
.workflow-paper small, .workflow-validation small { font-size: 8px; line-height: 1.5; color: #6d6878; margin-top: 5px; }
.workflow-paper i { display: block; width: 65%; height: 3px; background: #d4c8f7; margin-top: 9px; }
.workflow-paper i:last-child { width: 40%; }
.workflow-status { font-size: 8px; color: #425ca8; background: #e5ebff; padding: 5px; border-radius: 3px; }
.workflow-fields { display: grid !important; grid-template-columns: 1fr 1fr 1fr; gap: 10px !important; align-items: center; height: 100%; }
.workflow-fields > div { padding: 12px 8px; background: #f5f7ff; border: 1px solid #dce3fa; border-radius: 3px; min-width: 0; }
.workflow-fields > div > span { display: block; font-size: 8px; color: #6d6878; margin-bottom: 8px; }
.workflow-fields strong { display: block; font-size: 10px; color: #293959; }
.workflow-fields > small { grid-column: 1 / -1; font-size: 8px; color: #6d6878; }
.workflow-validation { display: flex; align-items: center; justify-content: center !important; gap: 14px !important; height: 100%; }
.workflow-validation > span { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--color-mint); color: #173827 !important; font-size: 20px !important; }
.workflow-validation strong, .workflow-validation small { display: block; }
@media(prefers-reduced-motion: no-preference) {
 .engineering-showcase .product-visual::before { animation: demo-halo 15s ease-in-out infinite alternate; animation-play-state: paused; }
 .engineering-showcase .product-visual.workflow-running::before { animation-play-state: running; }
 .workflow-paper { animation: document-arrives 1000ms cubic-bezier(.2,.65,.3,1) both; }
 .workflow-fields > div { animation: fields-populate 850ms ease both; }
 .workflow-fields > div:nth-child(2) { animation-delay: 250ms; }
 .workflow-fields > div:nth-child(3) { animation-delay: 500ms; }
 .workflow-validation > span { animation: validation-appears 800ms cubic-bezier(.2,.65,.3,1) both; }
 @keyframes demo-halo { from { transform: translate(-8px,-5px) scale(.96); opacity:.5; } to { transform: translate(8px,7px) scale(1.04); opacity:.85; } }
 @keyframes document-arrives { from { opacity:0; transform: translate(20px,-12px) rotate(3deg); } to { opacity:1; transform: translate(0,0) rotate(0); } }
 @keyframes fields-populate { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
 @keyframes validation-appears { from { opacity:0; transform:scale(.65); } to { opacity:1; transform:scale(1); } }
}
@media(max-width:600px) {
 .engineering-showcase .product-visual::before { inset: 5% 2% 15%; filter:blur(20px); }
 .workflow-paper { gap:7px; padding:12px 8px; }
 .workflow-fields { gap:5px !important; }
 .workflow-fields > div { padding:10px 5px; }
 .workflow-fields strong { font-size:8px; overflow-wrap:anywhere; }
 .workflow-status { display:none; }
 .product-visual[data-workflow] .dashboard-chart { min-height:145px; }
}

@media(prefers-reduced-motion: no-preference) {
 .demo-list-row { animation: fields-populate 700ms ease both; }
 .demo-list-row:nth-child(2) { animation-delay: 120ms; }
 .demo-list-row:nth-child(3) { animation-delay: 240ms; }
}