@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Playfair+Display:ital,wght@1,700;1,800&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");

:root {
    --color-ink: #2e3160;
    --color-surface: #DCD6F7;
    --color-surface-strong: #D0CBEF;
    --color-card: #eae5fb;
    --color-card-dark: #565a8e;
    --color-border: rgba(66, 72, 116, 0.14);
    --color-border-strong: rgba(220, 214, 247, 0.20);
    --color-text-muted: #7a7e9e;
    --color-text-light: rgba(220, 214, 247, 0.82);
    --color-accent: #424874;
    --color-accent-strong: #2e3160;
    --color-dark: #424874;
    --color-forest: #2e3160;
    --color-teal: #424874;
    --shadow-soft: 0 18px 40px rgba(66, 72, 116, 0.09);
    --shadow-strong: 0 26px 70px rgba(66, 72, 116, 0.20);
    --shadow-glow-accent: 0 0 20px rgba(66, 72, 116, 0.40);
    --shadow-glow-cream: 0 0 10px rgba(166, 177, 225, 0.55);
    --radius: 24px;
    --radius-sm: 14px;
    --container: 1380px;
    --space-section: clamp(3rem, 5vw, 4.5rem);
    --font-heading: "DM Serif Display", Georgia, serif;
    --font-body: "Space Grotesk", "Segoe UI", sans-serif;
    --font-mono: "Space Mono", monospace;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-ink);
    background: #05204A;
    line-height: 1.6;
}

/* Noise texture overlay */
.noise-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.045;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
    background-size: 300px 300px;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}

[hidden] {
    display: none !important;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
}

::selection {
    background: var(--color-accent);
    color: var(--color-surface-strong);
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: 1rem;
    transform: translateY(-180%);
    background: var(--color-card);
    color: var(--color-ink);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    z-index: 100;
    text-decoration: none;
    box-shadow: var(--shadow-soft);
}

.skip-link:focus {
    transform: translateY(0);
}

.container {
    width: min(100% - 4rem, var(--container));
    margin: 0 auto;
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    /* State 1 defaults — full-width white bar */
    background: #EDF6F9;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition:
        top 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        left 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        border-radius 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        padding 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-header__bar {
    padding: 16px 0;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.site-logo {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 5.5rem;
    text-decoration: none;
    position: relative;
}

.site-logo__image {
    height: 48px;
    width: auto;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.site-logo__mark {
    height: 48px;
    width: auto;
    opacity: 0;
    transform: scale(0.86);
    pointer-events: none;
    position: absolute;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.site-header.is-scrolled {
    top: 16px;
    left: 50%;
    width: 90%;
    max-width: 900px;
    transform: translateX(-50%);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.site-header.is-scrolled .site-header__bar {
    padding: 10px 0;
}

.site-header.is-scrolled .site-logo__image {
    opacity: 0;
    transform: scale(0.86);
    pointer-events: none;
}

.site-header.is-scrolled .site-logo__mark {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
    justify-content: flex-end;
}

.site-nav__list,
.hero-section__proof,
.logo-strip__list,
.check-list,
.mini-list,
.timeline,
.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: 32px;
    margin: 0;
}

.site-nav__cta {
    background: #DA2C38;
    color: #ffffff;
    border-radius: 50px;
    padding: 10px 24px;
    min-height: auto;
    font-size: 14px;
}

.site-nav__list a {
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    color: #2a2d5e;
    transition: color 0.15s;
}

.site-nav__list a:hover {
    color: var(--color-accent);
}

.site-nav__list a[aria-current="page"] {
    color: var(--color-accent);
    position: relative;
}

.site-nav__list a[aria-current="page"]::after {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-accent);
    border-radius: 2px;
}

.site-nav-toggle {
    display: none;
    background: transparent;
    border: 0;
    padding: 0.25rem;
}

.site-nav-toggle span {
    display: block;
    width: 1.5rem;
    height: 2px;
    background: var(--color-ink);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-nav-toggle span + span {
    margin-top: 0.32rem;
}

.site-header.is-menu-open .site-nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.site-header.is-menu-open .site-nav-toggle span:nth-child(2) {
    opacity: 0;
}

.site-header.is-menu-open .site-nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Buttons */
.button,
.text-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 700;
}

.button {
    position: relative;
    overflow: hidden;
    min-height: 3rem;
    padding: 0.85rem 1.5rem;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: transform 0.3s ease, color 0.3s ease, box-shadow 0.15s ease;
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Sliding dark background for magnetic effect */
.button::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-dark);
    border-radius: inherit;
    transform: translateY(101%);
    transition: transform 0.45s cubic-bezier(0, 0, 0.2, 1);
    z-index: 0;
}

.button span,
.button > * {
    position: relative;
    z-index: 1;
}

@media (min-width: 768px) {
    .button:hover {
        transform: scale(1.03);
    }

    .button:hover::before {
        transform: translateY(0);
    }

    .button--primary:hover {
        color: #E8F0FF;
        box-shadow: var(--shadow-glow-accent);
    }

    .button--secondary:hover {
        color: #E8F0FF;
    }
}

.button--primary {
    background: var(--color-accent);
    color: #E8F0FF;
}

.button--secondary {
    background: transparent;
    color: var(--color-ink);
    border-color: rgba(66, 72, 116, 0.25);
}

.button--secondary::before {
    background: var(--color-dark);
}

.button-row,
.button-column,
.section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.5rem;
}

.button-column {
    flex-direction: column;
}

/* Typography */
.eyebrow {
    margin: 0 0 1rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-teal);
    font-family: var(--font-body);
}

h1,
h2,
h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.05;
}

h1 {
    font-size: clamp(2.6rem, 5vw, 4.5rem);
}

h2 {
    font-size: clamp(2rem, 3vw, 3.4rem);
}

h3 {
    font-size: clamp(1.25rem, 2vw, 1.8rem);
}

p {
    margin: 0;
}

.stack {
    display: grid;
    gap: 1rem;
}

/* Hero rotating word */
.hero-line {
    display: block;
    white-space: nowrap;
}

.hero-rotate-wrap {
    display: block;
    min-height: 5rem; /* one line at max h1 size — prevents height jump on word change */
}

.hero-rotate {
    display: block;
    color: var(--color-accent);
    font-style: italic;
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.hero-rotate.is-leaving {
    opacity: 0;
    transform: translateY(-8px);
}

.hero-rotate.is-entering {
    opacity: 0;
    transform: translateY(8px);
}

/* Hero */
.hero-section,
.page-hero {
    padding: calc(var(--space-section) + 1rem) 0 var(--space-section);
}

/* Offset for fixed navbar (state 1 height ~68px) */
#main-content {
    padding-top: 68px;
}

.hero-section {
    position: relative;
    background: #EDF6F9;
    color: var(--color-ink);
    overflow: hidden;
}

/* Dotted grid overlay on hero */
.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(166, 177, 225, 0.35) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
}

/* Soft accent bloom */
.hero-section::after {
    content: "";
    position: absolute;
    top: -20%;
    right: -10%;
    width: 50%;
    height: 70%;
    background: radial-gradient(circle, rgba(166, 177, 225, 0.18) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.hero-section__grid,
.page-hero__layout,
.section-grid,
.contact-layout,
.two-column-content {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.contact-layout {
    grid-template-columns: 1fr 1.5fr;
}

.hero-section__content,
.page-hero__layout,
.section-heading {
    display: grid;
    gap: 1.5rem;
}

.hero-section__lede,
.page-hero p {
    max-width: 44rem;
    font-size: 1.05rem;
    color: var(--color-text-muted);
    line-height: 1.7;
}

.hero-section__proof {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 1rem;
}

.hero-section__proof li,
.summary-card,
.contact-card,
.stat-card,
.case-card,
.service-card,
.benefit-card,
.info-card,
.accordion-item,
.page-hero__aside {
    border-radius: var(--radius);
}

.hero-section__proof li {
    padding: 1rem;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    transition: background 0.2s, box-shadow 0.2s;
}

.hero-section__proof li:hover {
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.hero-section__proof strong {
    display: block;
    font-size: 1.6rem;
    font-family: var(--font-heading);
    font-weight: 400;
    color: var(--color-accent);
    margin-bottom: 0.25rem;
}

.hero-section__proof span {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.hero-section__aside {
    display: grid;
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.summary-card,
.page-hero__aside {
    padding: 1.5rem;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-soft);
}

.summary-card__kicker,
.page-hero__aside-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    font-family: var(--font-body);
}

.summary-card h2 {
    font-size: clamp(1.6rem, 2.5vw, 2.4rem);
    font-weight: 400;
}

.hero-section__media img,
.service-card > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: var(--shadow-strong);
}

/* Sections */
.logo-strip,
.section {
    padding: var(--space-section) 0;
}

.logo-strip {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-strong);
}

.logo-strip__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.logo-strip__list li {
    padding: 0.65rem 1rem;
    border-radius: 999px;
    background: rgba(220, 214, 247, 0.55);
    border: 1px solid var(--color-border);
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.2s;
}

.logo-strip__list li:hover {
    background: #EDF6F9;
}

.section--light {
    background: #DCD6F7;
}

.section--muted {
    background: #EDF6F9;
}

.section--dark,
.page-hero--dark,
.section--accent {
    color: #E8F0FF;
}

.section--dark,
.page-hero--dark {
    background: var(--color-dark);
}

.page-hero--light {
    background: #EDF6F9;
    color: var(--color-ink);
}

.page-hero--light p {
    color: var(--color-text-muted);
}

.section--accent {
    background: #05204A;
    position: relative;
    padding-bottom: 0;
}

.section--accent::before {
    content: "";
    position: absolute;
    bottom: -60%;
    left: -10%;
    width: 60%;
    height: 120%;
    background: radial-gradient(circle, rgba(166, 177, 225, 0.18) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.section-heading {
    margin-bottom: 2.5rem;
}

.section-heading p:last-child {
    color: var(--color-text-muted);
    max-width: 42rem;
    line-height: 1.7;
}

.section--dark .section-heading p:last-child,
.section--accent p,
.page-hero--dark p,
.section--dark .accordion-panel p {
    color: var(--color-text-light);
}

/* Cards */
.stats-grid,
.case-grid,
.service-grid,
.benefit-grid,
.card-grid {
    display: grid;
    gap: 1.5rem;
}

.stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.case-grid {
    margin-top: 1.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.benefit-grid,
.card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stat-card,
.case-card,
.service-card,
.benefit-card,
.info-card,
.contact-card,
.accordion-item {
    padding: 1.5rem;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-soft);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.stat-card:hover,
.case-card:hover,
.benefit-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-strong);
}

.section--dark .stat-card,
.section--dark .case-card,
.section--dark .accordion-item {
    background: var(--color-card-dark);
    border-color: var(--color-border-strong);
    box-shadow: none;
}

.section--dark .stat-card:hover,
.section--dark .case-card:hover {
    background: #1a1d3a;
    box-shadow: 0 0 0 1px rgba(220,214,247,0.20);
}

.stat-card {
    display: grid;
    gap: 0.8rem;
}

.stat-card__value {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 3.6rem);
    line-height: 1;
    color: var(--color-accent);
}

.service-card {
    overflow: hidden;
    padding: 0;
    display: grid;
    min-height: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.service-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-strong);
}

.service-card__body {
    display: grid;
    gap: 1rem;
    padding: 1.5rem;
}

.service-card__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    font-family: var(--font-body);
    color: var(--color-text-muted);
}

.text-link {
    justify-content: flex-start;
    color: var(--color-teal);
    font-family: var(--font-body);
    font-weight: 600;
    transition: color 0.15s;
}

.text-link:hover {
    color: var(--color-forest);
}

/* Check list */
.check-list,
.mini-list {
    display: grid;
    gap: 0.8rem;
}

.check-list li,
.mini-list li {
    position: relative;
    padding-left: 1.4rem;
}

.check-list li::before,
.mini-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6rem;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: var(--color-teal);
}

/* Timeline */
.timeline {
    display: grid;
    gap: 1rem;
}

.timeline li {
    position: relative;
    padding: 1.5rem 1.5rem 1.5rem 4.25rem;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    transition: transform 0.25s ease;
}

.timeline li:hover {
    transform: translateX(4px);
}

.timeline li::before {
    content: counter(list-item, decimal-leading-zero);
    position: absolute;
    left: 1.35rem;
    top: 1.4rem;
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--color-accent);
}

.timeline h3 {
    margin-bottom: 0.6rem;
}

/* Accordion */
.accordion {
    display: grid;
    gap: 1rem;
}

.accordion-item {
    overflow: hidden;
}

.accordion-trigger {
    width: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    color: inherit;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    font-weight: 700;
    font-family: var(--font-body);
}

.accordion-trigger::after {
    content: "+";
    font-size: 1.75rem;
    line-height: 1;
    color: var(--color-accent);
    font-family: var(--font-mono);
    flex-shrink: 0;
    margin-left: 1rem;
}

.accordion-trigger[aria-expanded="true"]::after {
    content: "–";
}

.accordion-panel {
    display: none;
    padding-top: 1rem;
    line-height: 1.7;
}

.accordion-item.is-open .accordion-panel {
    display: block;
}

/* Contact */
.contact-card {
    display: grid;
    gap: 1rem;
    background: rgba(66, 72, 116, 0.55);
    border-color: var(--color-border-strong);
    box-shadow: none;
    backdrop-filter: blur(12px);
}

@supports (backdrop-filter: blur(1px)) {
    .contact-card {
        background: rgba(255, 255, 255, 0.07);
    }
}

.contact-card--cal {
    padding: 1.5rem;
}

.contact-card--cal h3 {
    margin-bottom: 1rem;
    color: white;
}

#cal-inline {
    width: 100%;
    height: 600px;
    max-height: 600px;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

#cal-inline iframe {
    border: none;
    border-radius: var(--radius-sm);
}

/* Button overrides inside dark/accent sections */
.section--accent .button--secondary,
.section--dark .button--secondary {
    color: #E8F0FF;
    border-color: rgba(255, 255, 255, 0.35);
}

.section--accent .button--secondary:hover,
.section--dark .button--secondary:hover {
    color: #E8F0FF;
}

.contact-card__details {
    display: grid;
    gap: 1rem;
    margin: 0;
}

.contact-card__details dt {
    font-weight: 700;
    margin-bottom: 0.3rem;
    font-family: var(--font-body);
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.55);
}

.contact-card__details dd {
    margin: 0;
    color: var(--color-text-light);
    line-height: 1.6;
}

.page-hero__aside {
    align-self: end;
}

/* Footer */
.site-footer {
    padding: 3.5rem 0;
    background: #05204A;
    color: #E8F0FF;
}

.site-footer__grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.site-footer h2,
.site-footer__col-label {
    font-size: 0.78rem;
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.45);
    margin: 0 0 1rem;
}

.site-footer p,
.site-footer a {
    color: var(--color-text-light);
    font-size: 0.95rem;
}

.site-footer a {
    text-decoration: none;
    transition: color 0.15s;
}

.site-footer a:hover {
    color: #E8F0FF;
}

.site-footer ul {
    display: grid;
    gap: 0.7rem;
}

.site-logo--footer .site-logo__image {
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

/* ─── Hero: two-column (hero left | integrations right) ─── */
.hero-section .hero-section__grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3rem;
    align-items: start;
}

.hero-section .hero-section__content {
    max-width: none;
}

.hero-section__integrations {
    display: grid;
    gap: 1.25rem;
    align-content: start;
}

.hero-section__integrations .int-header {
    text-align: left;
    margin-bottom: 0;
}

.hero-section__integrations .int-heading {
    font-size: clamp(1.2rem, 2vw, 1.7rem);
}

.hero-section__integrations .int-wrapper {
    background: none;
    border-radius: 0;
    padding: 0;
}

.int-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.int-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    color: var(--color-text-muted);
    font-family: var(--font-body);
    margin: 0 0 0.65rem;
}

.int-heading {
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 3vw, 2.8rem);
    font-weight: 400;
    color: var(--color-ink);
    margin: 0;
    line-height: 1.15;
}

.int-wrapper {
    position: relative;
}

/* Strict 3-column × 4-row grid */
.int-cloud {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 44px;
    gap: 12px;
    position: relative;
    width: 492px;
    max-width: 100%;
    margin: 0 auto;
}

.int-deco-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}

.int-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #f6f6f4;
    border: 1px solid rgba(0, 0, 0, 0.08);
    cursor: default;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease, box-shadow 0.3s ease,
                border-color 0.3s ease, background 0.3s ease;
    user-select: none;
}

.int-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(66, 72, 116, 0.14);
    border-color: rgba(66, 72, 116, 0.2);
    background: rgba(66, 72, 116, 0.04);
}

.int-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: block;
    filter: grayscale(100%) opacity(50%);
    transition: filter 0.3s ease;
}

.int-card:hover .int-icon {
    filter: grayscale(0%) opacity(100%);
}

.int-name {
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-body);
    color: var(--color-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Notion Window Frame ─── */
/* ── Floating bob wrapper ── */
.notion-float {
    position: relative;
    animation: notion-bob 4s ease-in-out infinite;
}

.notion-float::after {
    content: "";
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%) scaleX(1);
    width: 70%;
    height: 24px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.22) 0%, transparent 70%);
    border-radius: 50%;
    animation: notion-shadow 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes notion-bob {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-12px); }
}

@keyframes notion-shadow {
    0%, 100% { transform: translateX(-50%) scaleX(1);   opacity: 1; }
    50%       { transform: translateX(-50%) scaleX(0.7); opacity: 0.5; }
}

.notion-window {
    max-width: 1100px;
    margin: 0 auto;
    border-radius: 16px;
    box-shadow: 0 32px 100px rgba(0, 0, 0, 0.18), 0 8px 32px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e0e0dd;
}

/* Bar 1: macOS browser chrome */
.notion-titlebar {
    background: #e0deda;
    padding: 12px 16px;
    border-radius: 16px 16px 0 0;
    display: flex;
    align-items: center;
    position: relative;
}

.notion-titlebar__left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 0;
}

.notion-titlebar__dots {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.notion-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: block;
}

.notion-dot--red    { background: #FF5F57; }
.notion-dot--yellow { background: #FEBC2E; }
.notion-dot--green  { background: #28C840; }

.notion-titlebar__nav-arrows {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 20px;
    flex-shrink: 0;
}

.notion-nav-arrow {
    font-size: 14px;
    font-weight: 300;
    color: #bbb;
    line-height: 1;
}

/* Fake URL bar — absolutely centered in the title bar */
.notion-urlbar {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #f5f4f2;
    border-radius: 8px;
    width: min(260px, 40%);
    height: 28px;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 8px;
    z-index: 0;
}

.notion-reload {
    font-size: 13px;
    color: #bbb;
    line-height: 1;
}

/* Bar 2: Notion in-app navigation bar */
.notion-navbar {
    background: #ffffff;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid #ebebea;
}

.notion-navbar__hamburger {
    color: #999;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

.notion-navbar__back {
    display: inline-flex;
    align-items: center;
    margin-left: 12px;
    flex-shrink: 0;
    line-height: 1;
}

.notion-navbar__breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 16px;
    font-size: 13px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
}

.notion-navbar__crumb {
    color: #999;
}

.notion-navbar__sep {
    color: #ccc;
    font-size: 13px;
}

.notion-navbar__page-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

/* Bar 3: Content area */
.notion-content {
    background-color: #ffffff;
    background-image: radial-gradient(circle, #e0e0e0 1px, transparent 1px);
    background-size: 22px 22px;
    padding: 48px 40px 56px;
    border-radius: 0 0 16px 16px;
}

@media (max-width: 768px) {
    .notion-content {
        padding: 24px 16px 32px;
    }

    .notion-urlbar {
        width: 180px;
        height: 24px;
    }

    .notion-navbar__breadcrumb {
        font-size: 11px;
    }

    .int-cloud {
        grid-template-columns: repeat(2, 1fr);
        width: 320px;
    }

    .int-deco-svg {
        display: none;
    }
}

/* ─── Services intro (merged problem + services heading) ─── */
.services-intro {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    align-items: end;
    margin-bottom: 2.5rem;
}

.services-intro__text {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-text-muted);
}

/* ─── Widget base ─── */
.widget {
    height: 190px;
    overflow: hidden;
    position: relative;
    border-radius: var(--radius) var(--radius) 0 0;
    flex-shrink: 0;
}

/* ─── Widget 1: Code terminal ─── */
.widget--code {
    background: #13131f;
    font-family: var(--font-mono);
}

.wt-bar {
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 8px 12px;
    background: #0d0d18;
}

.wt-bar i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: block;
    flex-shrink: 0;
}
.wt-bar i:nth-child(1) { background: #ff5f57; }
.wt-bar i:nth-child(2) { background: #febc2e; }
.wt-bar i:nth-child(3) { background: #A6B1E1; }

.wt-body {
    padding: 10px 14px;
    display: grid;
    gap: 5px;
}

.wt-line,
.wt-cursor {
    margin: 0;
    font-size: 0.71rem;
    line-height: 1.4;
    color: rgba(220, 214, 247, 0.25);
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.28s ease, transform 0.28s ease, color 0.28s ease;
    transition-delay: var(--d, 0s);
    white-space: nowrap;
}

.wt-prompt { color: #a6b1e1; margin-right: 5px; }
.wt-ok     { color: #A6B1E1; margin-right: 5px; }
.wt-warn   { color: #fbbf24; margin-right: 5px; }

.service-card:hover .wt-line {
    opacity: 1;
    transform: translateX(0);
    color: rgba(220, 214, 247, 0.8);
}
.service-card:hover .wt-line:first-child { color: #e2e0f7; }

.service-card:hover .wt-cursor {
    opacity: 1;
    transform: translateX(0);
    color: #a6b1e1;
    animation: wt-blink 0.9s step-end infinite;
    animation-delay: var(--d, 0s);
}

@keyframes wt-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ─── Widget 2: Calendar ─── */
.widget--cal {
    background: linear-gradient(145deg, var(--color-card) 0%, var(--color-surface) 100%);
    padding: 14px 14px 0;
}

.wc-month {
    margin: 0 0 8px;
    font-size: 0.7rem;
    font-weight: 700;
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
}

.wc-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.wc-hd {
    font-size: 0.58rem;
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--color-text-muted);
    text-align: center;
    padding: 2px 0 4px;
    opacity: 0.55;
}

.wc-d {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-family: var(--font-mono);
    border-radius: 5px;
    background: rgba(66, 72, 116, 0.07);
    color: var(--color-ink);
    position: relative;
    transition: background 0.18s ease, transform 0.18s ease;
    transition-delay: calc(var(--i, 0) * 0.016s);
    cursor: default;
    user-select: none;
}

.wc-today {
    background: var(--color-accent) !important;
    color: #E8F0FF !important;
    font-weight: 700;
}

.wc-task::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--color-accent);
    opacity: 0.4;
    transition: opacity 0.18s ease;
    transition-delay: calc(var(--i, 0) * 0.016s + 0.1s);
}

.service-card:hover .wc-d:not(.wc-today) {
    background: rgba(66, 72, 116, 0.14);
    transform: scale(1.07);
}

.service-card:hover .wc-today {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-accent);
    transform: scale(1.12);
}

.service-card:hover .wc-task::after {
    opacity: 1;
}

/* ─── Widget 3: Falling blocks ─── */
.widget--blocks {
    background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-card) 100%);
}

.wb-stage {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.wb-block {
    position: absolute;
    left: 16px;
    right: 16px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    font-size: 0.72rem;
    font-family: var(--font-body);
    font-weight: 600;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.85, 0.55), opacity 0.4s ease;
}

.wb-block span {
    font-family: var(--font-mono);
    font-size: 0.63rem;
    opacity: 0.65;
}

/* Resting stacked positions (bottom-most = closest to bottom) */
.wb-block--1 { background: #DCD6F7; color: #2e3160; bottom: 12px;  transform: rotate(-1.5deg); transition-delay: 0.04s; }
.wb-block--2 { background: #A6B1E1; color: #1e2040; bottom: 50px;  transform: rotate(1deg);   transition-delay: 0.03s; }
.wb-block--3 { background: #8892cc; color: #E8F0FF;   bottom: 88px;  transform: rotate(-0.5deg); transition-delay: 0.02s; }
.wb-block--4 { background: #424874; color: #E8F0FF;   bottom: 126px; transform: rotate(1.5deg); transition-delay: 0.01s; }
.wb-block--5 { background: #2e3160; color: #dcd6f7; bottom: 158px; transform: rotate(-1deg);  transition-delay: 0s;    }

/* Hover: fall off screen with different rotations */
.service-card:hover .wb-block--1 { transform: translateY(300px) rotate(22deg);  opacity: 0; transition-delay: 0s;    }
.service-card:hover .wb-block--2 { transform: translateY(300px) rotate(-18deg); opacity: 0; transition-delay: 0.06s; }
.service-card:hover .wb-block--3 { transform: translateY(300px) rotate(14deg);  opacity: 0; transition-delay: 0.11s; }
.service-card:hover .wb-block--4 { transform: translateY(300px) rotate(-26deg); opacity: 0; transition-delay: 0.16s; }
.service-card:hover .wb-block--5 { transform: translateY(300px) rotate(10deg);  opacity: 0; transition-delay: 0.21s; }

/* ─── Widget 4: Process flow ─── */
.widget--flow {
    background: linear-gradient(135deg, var(--color-card) 0%, var(--color-surface) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
}

.widget--flow svg {
    width: 100%;
    height: 100%;
}

.fl-line {
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    transition: stroke-dashoffset 0.35s ease;
}
.fl-line--2 { transition-delay: 0.2s; }

.fl-arrow {
    opacity: 0;
    transition: opacity 0.2s ease;
}
.fl-arrow--1 { transition-delay: 0.3s;  }
.fl-arrow--2 { transition-delay: 0.52s; }

.fl-dot {
    opacity: 0;
    transform-origin: center;
    transform: scale(0);
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.fl-dot--1 { transition-delay: 0s;    }
.fl-dot--2 { transition-delay: 0.28s; }
.fl-dot--3 { transition-delay: 0.52s; }

.service-card:hover .fl-line   { stroke-dashoffset: 0; }
.service-card:hover .fl-arrow  { opacity: 1; }
.service-card:hover .fl-dot    { opacity: 1; transform: scale(1); }

/* Animations */
@keyframes pulse-fade {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

@keyframes scan {
    from { transform: translateY(-10px); }
    to { transform: translateY(100vh); }
}

@keyframes spin-slow {
    to { transform: rotate(360deg); }
}

.animate-pulse { animation: pulse-fade 2s ease-in-out infinite; }
.animate-scan { animation: scan 3s linear infinite; }
.animate-spin-slow { animation: spin-slow 20s linear infinite; }

/* About / Why MiddleOut narrative section */
/* ─── Navy Block: Problem → Antidote → Why → Cards ─── */

.navy-block {
    background: #2a2d5e;
    color: #f0ece4;
}

.navy-block__inner {
    width: 50%;
    max-width: 860px;
    min-width: min(100%, 340px);
    margin: 0 0 0 auto;
    padding: 0 clamp(1.5rem, 5vw, 4rem);
    text-align: center;
}

/* Shared fade-up reveal */
.navy-beat {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.navy-beat.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Beat 1 — The Current State */
.navy-beat:first-child {
    padding-top: 120px;
}

.navy-label {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #a8a3c7;
    margin: 0;
}

.navy-label--antidote {
    color: #c4b5e3;
}

.navy-beat--problem {
    text-align: left;
}

.navy-beat--antidote {
    width: 80vw;
    max-width: 1000px;
}

.navy-problem {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 600;
    color: #f0ece4;
    line-height: 1.6;
    margin: 24px 0 0;
}

.navy-divider {
    width: 120px;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin: 80px auto;
}

/* Beat 2 — The Antidote */
.navy-headline {
    font-family: "Playfair Display", "DM Serif Display", Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(28px, 4vw, 48px);
    color: #f0ece4;
    line-height: 1.2;
    margin: 32px 0 0;
}

.navy-accent {
    font-style: italic;
    color: #E8F0FF;
    border-bottom: 3px solid rgba(196, 181, 227, 0.5);
    padding-bottom: 0.04em;
}

.navy-beat:nth-child(3) {
    padding-bottom: 100px;
}

/* Beat 3 — Why MiddleOut */
.navy-beat--why {
    padding-bottom: 60px;
}

.navy-foil {
    font-size: 18px;
    font-style: italic;
    color: rgba(240, 236, 228, 0.6);
    max-width: 600px;
    margin: 20px auto 0;
    border-left: 3px solid rgba(255, 255, 255, 0.15);
    padding-left: 20px;
    text-align: left;
}

.navy-pivot {
    font-family: "Playfair Display", "DM Serif Display", Georgia, serif;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700;
    color: #f0ece4;
    margin: 24px 0 0;
    line-height: 1.3;
}

/* Beat 4 — Stacking Cards */
.navy-cards-wrap {
    min-height: 240vh;
    padding-bottom: 4rem;
}

.navy-card {
    position: sticky;
    top: var(--card-top);
    z-index: var(--card-z);
    width: 100%;
    margin: 0 0 40px;
    padding: 48px clamp(1.5rem, 6vw, 6rem);
    border-radius: 0;
    background: #ede6f6;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.2);
    text-align: left;
}

.navy-card__title {
    font-size: 22px;
    font-weight: 700;
    color: #2a2d5e;
    margin: 0;
}

.navy-card__desc {
    font-size: 16px;
    color: #4a4d7e;
    margin: 8px 0 0;
    line-height: 1.5;
}

/* ─── Book a Call CTA Section ─── */

.cta-section {
    background: #f5f4f2;
    padding: 120px 20px;
    text-align: center;
}

.cta-section__inner {
    max-width: 640px;
    margin: 0 auto;
}

.cta-section__heading {
    font-family: "Playfair Display", "DM Serif Display", Georgia, serif;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    color: #2a2d5e;
    margin: 0;
    line-height: 1.2;
}

.cta-section__sub {
    font-size: 17px;
    color: #6b6b8a;
    margin: 16px 0 0;
}

.cta-section__btn {
    display: inline-flex;
    margin-top: 32px;
    background: #2a2d5e;
    color: #E8F0FF;
    border-radius: 50px;
    padding: 16px 40px;
    font-size: 17px;
    font-weight: 600;
    border: none;
    text-decoration: none;
    min-height: auto;
}

.cta-section__btn:hover {
    background: #1e2152;
}

@media (max-width: 640px) {
    .navy-headline {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .navy-problem {
        font-size: 20px;
    }

    .navy-card {
        padding: 32px 24px;
    }
}

/* ─── End Navy Block ─── */

/* ─── Philosophy Section ─── */
.philosophy-section {
    background: #05204A;
    color: #f0ece4;
    position: relative;
    overflow: hidden;
    padding: clamp(5rem, 12vw, 9rem) 0;
}

.philosophy-section__inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 8vw, 8rem);
    display: flex;
    flex-direction: column;
    gap: clamp(5rem, 10vw, 8rem);
}

.philosophy-state {
    max-width: 520px;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.philosophy-state.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.philosophy-antidote {
    max-width: 900px;
    align-self: flex-end;
    text-align: right;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.65s ease 0.15s, transform 0.65s ease 0.15s;
}

.philosophy-antidote.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.philosophy-eyebrow {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(240, 236, 228, 0.5);
    margin: 0 0 1.5rem;
}

.philosophy-eyebrow--accent {
    color: #c4b5e3;
}

.philosophy-statement {
    font-family: var(--font-body);
    font-size: clamp(18px, 2.2vw, 24px);
    font-weight: 600;
    color: rgba(240, 236, 228, 0.8);
    line-height: 1.55;
    margin: 0;
}

.philosophy-headline {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.8rem, 3.8vw, 3.8rem);
    color: #f0ece4;
    line-height: 1.05;
    margin: 0;
}

.philosophy-em {
    font-style: italic;
    color: #E8F0FF;
    text-decoration: underline;
    text-decoration-color: rgba(196, 181, 227, 0.4);
    text-underline-offset: 0.12em;
}

@media (max-width: 640px) {
    .philosophy-antidote {
        align-self: flex-start;
        text-align: left;
    }

    .philosophy-headline {
        font-size: clamp(2rem, 8vw, 3rem);
    }
}

/* ─── Protocol Section ─── */
.protocol-section {
    background: #05204A;
    padding: 0 1rem 0;
    /* Natural height from sticky children: 4 × 100vh gives full scroll duration */
}

.protocol-card {
    --card-bg: #0d2550;
    --card-top: 0px;
    --card-lift: 0px;
    --card-center: 10vh;
    position: sticky;
    top: calc(var(--card-center) + var(--card-top));
    z-index: var(--card-z);
    min-height: 80vh;
    width: min(calc(100% - 2.5rem), 900px);
    margin: 0 auto;
    border-radius: 20px 20px 0 0;
    border: 1px solid rgba(240, 236, 228, 0.10);
    border-bottom: none;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--card-bg);
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.18), 0 -1px 0 0 rgba(255, 255, 255, 0.07);
    transform-origin: center top;
    transform: translateY(var(--card-lift));
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    will-change: transform;
}

/* Staggered stack — uniform 28px gaps, no scale or x-drift; vibrant card palette */
.protocol-card:nth-child(1) { --card-bg: #2D936C; --card-top: 0px;   --card-ink: #f0f7f4; --card-num: rgba(240,247,244,0.6); }
.protocol-card:nth-child(2) { --card-bg: #85E0FF; --card-top: 28px;  --card-ink: #05204A; --card-num: rgba(5,32,74,0.6); }
.protocol-card:nth-child(3) { --card-bg: #CDEDF6; --card-top: 56px;  --card-ink: #05204A; --card-num: rgba(5,32,74,0.6); }
.protocol-card:nth-child(4) { --card-bg: #F0F7F4; --card-top: 84px;  --card-ink: #05204A; --card-num: rgba(5,32,74,0.6); }

.protocol-card::before {
    display: none;
}

/* Dark overlay that JS increases as the card is buried */
.protocol-card__overlay {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    border-radius: inherit;
}

.protocol-card__deco {
    position: absolute;
    right: 0;
    top: 0;
    width: 55%;
    height: 100%;
    opacity: 0.15;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.protocol-card__deco svg {
    width: 80%;
    max-width: 480px;
    height: auto;
}

.protocol-card__gradient {
    display: none;
}

.protocol-card__content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 720px;
    margin: 0 auto 0 clamp(1.5rem, 8vw, 8rem);
    padding: clamp(3rem, 5vw, 4rem);
    display: flex;
    flex-direction: column;
}

.protocol-num {
    font-family: var(--font-mono);
    font-size: clamp(0.8rem, 1vw, 1rem);
    color: var(--card-num, rgba(196, 181, 227, 0.8));
    border-bottom: 1px solid var(--card-num, rgba(196, 181, 227, 0.3));
    padding-bottom: 0.75rem;
    max-width: 4rem;
    margin-bottom: 1.5rem;
}

.protocol-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3.75rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--card-ink, #f0ece4);
    line-height: 0.95;
    margin: 0;
}

.protocol-desc {
    font-family: var(--font-body);
    font-size: clamp(0.88rem, 1.1vw, 1rem);
    color: var(--card-num, rgba(240, 236, 228, 0.7));
    max-width: 34rem;
    margin: clamp(1rem, 2vw, 1.75rem) 0 0;
    line-height: 1.8;
}

@media (hover: hover) and (pointer: fine) {
    .protocol-section:hover .protocol-card {
        border-color: rgba(240, 236, 228, 0.16);
    }

    .protocol-section:hover .protocol-card:nth-child(1) { --card-lift: -12px; }
    .protocol-section:hover .protocol-card:nth-child(2) { --card-lift:  -4px; }
    .protocol-section:hover .protocol-card:nth-child(3) { --card-lift:   4px; }
    .protocol-section:hover .protocol-card:nth-child(4) { --card-lift:  12px; }
}

@media (max-width: 640px) {
    .protocol-card {
        min-height: 100dvh;
        width: 100%;
        padding: 2rem 0;
        top: 0 !important; /* disable stagger offset on mobile */
        border-radius: 20px 20px 0 0;
        transform: none !important;
    }

    .protocol-card__deco {
        width: 100%;
        opacity: 0.07;
    }

    .protocol-card__gradient {
        background: linear-gradient(to top, var(--card-bg) 20%, transparent) !important;
    }

    .protocol-title {
        font-size: clamp(2.5rem, 10vw, 3.5rem);
    }

    .protocol-card__content {
        margin: 0 1rem;
        padding: 2.25rem;
        max-width: none;
    }
}

/* ─── End Protocol Section ─── */

.about-narrative {
    max-width: 52rem;
    margin: 0 auto 3rem;
    text-align: center;
    display: grid;
    gap: 1.25rem;
}

.about-foil {
    margin: 0;
    font-size: 1.05rem;
    font-style: italic;
    color: var(--color-text-muted);
    line-height: 1.7;
    padding-left: 1.25rem;
    border-left: 3px solid var(--color-border);
    text-align: left;
    max-width: 38rem;
    justify-self: center;
}

.about-pivot {
    color: var(--color-accent-strong);
}

.about-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.about-card {
    width: 100%;
    padding: 2.5rem 3rem;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}

.about-card h3 {
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    margin-bottom: 0.6rem;
    color: var(--color-accent-strong);
}

.about-card p {
    max-width: 52rem;
    color: var(--color-text-muted);
    font-size: 1.05rem;
    line-height: 1.7;
}

/* Scroll-reveal */
.reveal-card {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

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

.reveal-card:nth-child(1) { transition-delay: 0s; }
.reveal-card:nth-child(2) { transition-delay: 0.1s; }
.reveal-card:nth-child(3) { transition-delay: 0.2s; }
.reveal-card:nth-child(4) { transition-delay: 0.3s; }

/* Responsive */
@media (max-width: 960px) {
    .hero-section__grid,
    .page-hero__layout,
    .section-grid,
    .contact-layout,
    .two-column-content,
    .stats-grid,
    .case-grid,
    .service-grid,
    .benefit-grid,
    .card-grid {
        grid-template-columns: 1fr;
    }

    .site-footer__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-section__proof {
        grid-template-columns: 1fr;
    }

    .int-row--right,
    .int-row--left {
        margin-left: 0;
        margin-right: 0;
    }

    .services-intro {
        grid-template-columns: 1fr;
    }

    .site-nav-toggle {
        display: inline-block;
    }

    .site-nav {
        position: absolute;
        left: 1rem;
        right: 1rem;
        top: calc(100% + 0.5rem);
        padding: 1rem;
        border-radius: var(--radius);
        background: var(--color-card);
        border: 1px solid var(--color-border);
        box-shadow: var(--shadow-soft);
        display: none;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        flex: initial;
    }

    .site-header {
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        border-radius: 0 !important;
    }

    .site-header__bar {
        padding: 0.8rem 0;
    }

    .site-logo {
        min-width: auto;
        justify-content: flex-start;
    }

    .site-header.is-menu-open .site-nav {
        display: flex;
    }

    .site-nav__list {
        flex-direction: column;
        align-items: stretch;
        margin: 0;
    }

    .site-nav__cta {
        width: 100%;
    }

    .site-logo__mark {
        display: none;
    }

    .site-header.is-scrolled {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 1px 12px rgba(0, 0, 0, 0.07);
    }
}

@media (max-width: 640px) {
    .hero-section,
    .page-hero,
    .section,
    .logo-strip {
        padding: 3rem 0;
    }

    .int-row {
        flex-wrap: wrap;
    }

    .container {
        width: min(100% - 2rem, var(--container));
    }

    .timeline li {
        padding-left: 3.5rem;
    }

    .site-footer__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    .int-row {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }

    .reveal-card,
    .navy-beat,
    .philosophy-state,
    .philosophy-antidote {
        opacity: 1;
        transform: none;
    }
}

/* ================================================================
   ABOUT PAGE — 9-Grid IT Cost Animation (replaces origin callout card)
   ================================================================ */

.about-origin__callout--grid {
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    overflow: hidden;
    border-radius: var(--radius);
}

.it-nine-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.1);
}

.it-nine-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 0;
    border-radius: var(--radius);
    overflow: hidden;
    position: absolute;
    inset: 0;
    background: #F8F9FA;
}

/* Stat cells — base */
.it-nine-cell--stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 1rem;
    background: #F8F9FA;
    text-align: center;
    opacity: 0;
    transform: scale(0.82);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.it-nine-cell--stat.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* Cell colour variants */
.it-nine-cell--dark {
    background: linear-gradient(160deg, #3b4172 0%, #2e3160 54%, #22254c 100%);
}
.it-nine-cell--xl {
    background: linear-gradient(160deg, #38406f 0%, #2e3160 58%, #1f2347 100%);
}

.it-nine-cell__value {
    font-family: var(--font-heading);
    font-size: clamp(1rem, 1.8vw, 1.55rem);
    color: var(--color-accent-strong);
    line-height: 1;
}

.it-nine-cell__label {
    font-size: clamp(0.52rem, 0.72vw, 0.66rem);
    color: #7c8796;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 600;
    max-width: 13ch;
}

.it-nine-cell--dark .it-nine-cell__value,
.it-nine-cell--xl .it-nine-cell__value {
    color: #F8F9FA;
}

.it-nine-cell--dark .it-nine-cell__label,
.it-nine-cell--xl .it-nine-cell__label {
    color: rgba(248, 249, 250, 0.74);
}

/* ---- Widget: bar chart ---- */
.widget-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 40px;
    margin-bottom: 0.35rem;
}
.widget-bar {
    width: 9px;
    border-radius: 999px 999px 3px 3px;
    background: linear-gradient(180deg, #d8deea 0%, #aab6cb 100%);
    height: var(--h);
    transform: scaleY(0);
    transform-origin: bottom;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.8), 0 8px 16px rgba(78, 95, 122, 0.16);
    transition: transform 0.5s ease;
}
.widget-bar--accent {
    background: linear-gradient(180deg, #7887c4 0%, #424874 100%);
}
.it-nine-cell--stat.is-visible .widget-bar {
    transform: scaleY(1);
}
.it-nine-cell--stat.is-visible .widget-bar:nth-child(1) { transition-delay: 0.05s; }
.it-nine-cell--stat.is-visible .widget-bar:nth-child(2) { transition-delay: 0.12s; }
.it-nine-cell--stat.is-visible .widget-bar:nth-child(3) { transition-delay: 0.19s; }
.it-nine-cell--stat.is-visible .widget-bar:nth-child(4) { transition-delay: 0.26s; }

/* ---- Widget: donut ring ---- */
.widget-ring {
    position: relative;
    width: 62px;
    height: 62px;
    margin-bottom: 0.25rem;
    filter: drop-shadow(0 10px 20px rgba(66, 72, 116, 0.18));
}
.widget-ring__svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.widget-ring__track {
    stroke: rgba(136, 148, 170, 0.2);
}
.widget-ring__fill {
    stroke: var(--color-accent);
    stroke-linecap: round;
    transition: stroke-dasharray 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}
.it-nine-cell--stat.is-visible .widget-ring__fill {
    stroke-dasharray: 55.4 88; /* 63% of circumference ~87.96 */
}
.widget-ring__pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--color-accent-strong);
    line-height: 1;
}

/* ---- Widget: icon ---- */
.widget-icon {
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: 14px;
    background:
        radial-gradient(circle at 30% 25%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.18) 42%, rgba(94, 113, 146, 0.1) 100%),
        linear-gradient(160deg, #fefefe 0%, #dde4ee 100%);
    color: #4d5d7a;
    border: 1px solid rgba(160, 176, 200, 0.45);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 14px 24px rgba(66, 72, 116, 0.18);
    flex-shrink: 0;
    overflow: visible;
}

.it-nine-cell--dark .widget-icon,
.it-nine-cell--xl .widget-icon {
    background:
        radial-gradient(circle at 30% 25%, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.08) 42%, rgba(0, 0, 0, 0.14) 100%),
        linear-gradient(160deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 100%);
    color: #f3f5fb;
    border-color: rgba(255,255,255,0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.26), 0 16px 28px rgba(0,0,0,0.24);
}

/* ---- Widget: progress bar ---- */
.widget-progress {
    width: 80%;
    height: 6px;
    background: rgba(118, 130, 151, 0.16);
    border-radius: 999px;
    margin-top: 0.4rem;
    overflow: hidden;
}
.widget-progress__fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #7887c4 0%, #424874 100%);
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(66, 72, 116, 0.22);
    transition: width 0.8s ease 0.4s;
}
.it-nine-cell--stat.is-visible .widget-progress__fill {
    width: var(--pct);
}

/* ---- Widget: sparkline ---- */
.widget-sparkline {
    width: 100%;
    height: 22px;
    margin-top: 0.45rem;
    color: rgba(111, 126, 156, 0.8);
    overflow: visible;
}

/* ---- Widget: dot grid ---- */
.widget-dots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 0.3rem;
}
.widget-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transition: background 0.3s ease, transform 0.3s ease;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.7), 0 6px 12px rgba(66, 72, 116, 0.12);
}
.widget-dot--off {
    background: rgba(160, 174, 194, 0.25);
}
.widget-dot--on {
    background: linear-gradient(180deg, #7d8cc8 0%, #424874 100%);
}
.it-nine-cell--stat.is-visible .widget-dot--on {
    animation: dot-pop 0.4s ease both;
}
.it-nine-cell--stat.is-visible .widget-dot:nth-child(5) { animation-delay: 0.1s; }
.it-nine-cell--stat.is-visible .widget-dot:nth-child(6) { animation-delay: 0.18s; }
.it-nine-cell--stat.is-visible .widget-dot:nth-child(7) { animation-delay: 0.26s; }
.it-nine-cell--stat.is-visible .widget-dot:nth-child(8) { animation-delay: 0.34s; }
.it-nine-cell--stat.is-visible .widget-dot:nth-child(9) { animation-delay: 0.42s; }
@keyframes dot-pop {
    0% { transform: scale(0); }
    70% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* ---- Widget: timeline ---- */
.widget-timeline {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 0.35rem;
}
.widget-timeline__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.7), 0 6px 12px rgba(66, 72, 116, 0.12);
}
.widget-timeline__dot--done   { background: linear-gradient(180deg, #7d8cc8 0%, #424874 100%); }
.widget-timeline__dot--active { background: linear-gradient(180deg, #7d8cc8 0%, #424874 100%); box-shadow: 0 0 0 4px rgba(120,135,196,0.18), inset 0 1px 1px rgba(255,255,255,0.7), 0 6px 12px rgba(66,72,116,0.16); }
.widget-timeline__dot--muted  { background: rgba(160, 174, 194, 0.25); }
.widget-timeline__line {
    flex: 1;
    height: 4px;
    background: linear-gradient(90deg, #7d8cc8 0%, #424874 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
    border-radius: 999px;
}
.widget-timeline__line--muted {
    background: rgba(160, 174, 194, 0.25);
}
.it-nine-cell--stat.is-visible .widget-timeline__line:nth-child(2) { transform: scaleX(1); transition-delay: 0.1s; }
.it-nine-cell--stat.is-visible .widget-timeline__line:nth-child(4) { transform: scaleX(1); transition-delay: 0.3s; }
.it-nine-cell--stat.is-visible .widget-timeline__line:nth-child(6) { transform: scaleX(1); transition-delay: 0.5s; }

/* Hero center cell — starts scaled up to fill the whole grid, then contracts */
.it-nine-cell--hero {
    position: relative;
    overflow: hidden;
    transform: scale(3);
    transition: transform 0.9s cubic-bezier(0.77, 0, 0.175, 1);
    z-index: 2;
    background: #F8F9FA;
}

.it-nine-cell--hero.is-contracted {
    transform: scale(1);
}

.it-nine-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .it-nine-cell--stat {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .it-nine-cell--hero {
        transform: scale(1);
        transition: none;
    }
    .widget-bar { transform: scaleY(1); }
    .widget-ring__fill { stroke-dasharray: 55.4 88; transition: none; }
    .widget-progress__fill { width: var(--pct); transition: none; }
    .widget-timeline__line { transform: scaleX(1); transition: none; }
}

/* ================================================================
   ABOUT PAGE — New section styles
   ================================================================ */

/* Section 1: Why We Started */
.about-origin {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.about-origin__lede {
    font-size: 1.1rem;
    line-height: 1.75;
}

.about-origin__narrative p {
    color: var(--color-text-muted);
    line-height: 1.75;
}

.about-origin__callout {
    position: sticky;
    top: calc(68px + 2rem);
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow-soft);
}

.about-origin__callout.about-origin__callout--grid {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
}

.origin-callout-grid {
    display: grid;
    gap: 1.25rem;
}

.origin-callout__item {
    display: grid;
    gap: 0.3rem;
    padding: 1rem;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.origin-callout__item--highlight {
    background: var(--color-accent);
    border-color: transparent;
    color: #E8F0FF;
}

.origin-callout__item--highlight .origin-callout__label,
.origin-callout__item--highlight .origin-callout__sub {
    color: rgba(232, 240, 255, 0.72);
}

.origin-callout__label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
}

.origin-callout__value {
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    line-height: 1.1;
}

.origin-callout__value--crossed {
    text-decoration: line-through;
    opacity: 0.5;
}

.origin-callout__sub {
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

/* Section 2: Services Grid + Chatbot */
.svc-heading {
    text-align: center;
    align-items: center;
    margin-bottom: 2.5rem;
}

.svc-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.svc-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    padding: 1.25rem 1rem;
    background: var(--color-card);
    border: 2px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease,
                transform 0.25s ease, box-shadow 0.25s ease;
    text-align: center;
    font-family: var(--font-body);
}

.svc-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-soft);
    border-color: var(--color-border);
}

.svc-card--active {
    border-color: var(--color-accent);
    background: #EDF6F9;
    box-shadow: var(--shadow-soft);
}

.svc-card__icon {
    width: 52px;
    height: 52px;
    color: var(--color-accent);
    transition: color 0.25s ease, transform 0.25s ease;
}

.svc-card--active .svc-card__icon {
    color: var(--color-ink);
    transform: scale(1.08);
}

.svc-card__icon svg {
    width: 100%;
    height: 100%;
}

.svc-card__name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-ink);
    line-height: 1.3;
}

.svc-chatbot {
    max-width: 540px;
    margin: 0 auto;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-strong);
    overflow: hidden;
}

.svc-chatbot__header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1.25rem;
    background: var(--color-accent);
    color: #E8F0FF;
}

.svc-chatbot__avatar {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: #E8F0FF;
}

.svc-chatbot__name {
    font-weight: 700;
    font-size: 0.88rem;
}

.svc-chatbot__status {
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6ae87a;
    box-shadow: 0 0 6px rgba(106, 232, 122, 0.6);
    animation: pulse-fade 2s ease-in-out infinite;
}

.svc-chatbot__body {
    padding: 1.5rem 1.25rem;
    min-height: 100px;
    display: flex;
    align-items: flex-end;
}

.svc-chatbot__bubble {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 18px 18px 18px 4px;
    padding: 0.85rem 1.1rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-ink);
    min-height: 3.2em;
    width: 100%;
}

.svc-chatbot__cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: var(--color-accent);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: wt-blink 0.9s step-end infinite;
}

/* Section 3: Blog carousel */
.blog-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

.blog-header__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.blog-nav {
    display: flex;
    gap: 0.5rem;
}

.blog-nav__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--color-border);
    background: var(--color-card);
    color: var(--color-ink);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.blog-nav__btn:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-surface);
    transform: scale(1.06);
}

.blog-nav__btn:disabled {
    opacity: 0.35;
    cursor: default;
    transform: none;
}

.blog-nav__btn svg {
    width: 18px;
    height: 18px;
}

.blog-carousel-wrap {
    overflow: hidden;
}

.blog-carousel {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.blog-card {
    flex: 0 0 calc((100% - 3rem) / 3);
    min-width: 0;
    background: white;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--color-border);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-strong);
}

.blog-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.blog-card__img-wrap {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.blog-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.blog-card:hover .blog-card__img {
    transform: scale(1.04);
}

.blog-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.4rem 1.5rem 1.6rem;
    flex: 1;
}

.blog-card__read-time {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent);
}

.blog-card__title {
    font-family: var(--font-heading);
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.35;
    color: var(--color-ink);
    margin: 0;
}

.blog-card__desc {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.65;
    margin: 0;
}

@media (max-width: 900px) {
    .blog-card {
        flex: 0 0 calc((100% - 1.5rem) / 2);
    }
}

@media (max-width: 560px) {
    .blog-card {
        flex: 0 0 85%;
    }
    .blog-header {
        align-items: flex-start;
    }
}

/* Section 3 (old): Tools Layout */
.tools-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.tools-layout .int-icon {
    filter: grayscale(0%) opacity(100%);
}

.int-cloud--vivid .int-card {
    opacity: 0;
    transform: scale(0.82) translateY(12px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.int-cloud--vivid .int-card.is-visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Section 4: Guarantee — bento grid layout */
.guarantee-burst-section {
    overflow: hidden;
}

.guarantee-burst-header {
    text-align: center;
    align-items: center;
    margin-bottom: 3.5rem;
}

/* Bento grid */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px 80px;
}

/* Grid placement */
.bento-card--1 { grid-column: 1 / 2; grid-row: 1; }
.bento-card--2 { grid-column: 2 / 5; grid-row: 1; }
.bento-card--3 { grid-column: 1 / 3; grid-row: 2; }
.bento-logo    { grid-column: 3 / 4; grid-row: 2; }
.bento-card--4 { grid-column: 4 / 5; grid-row: 2; }
.bento-card--5 { grid-column: 1 / 3; grid-row: 3; }
.bento-card--6 { grid-column: 3 / 5; grid-row: 3; }

/* Card base */
.bento-card {
    border-radius: 20px;
    overflow: hidden;
    min-height: 220px;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.22s ease;
    cursor: default;
    /* Scroll reveal start state */
    opacity: 0;
    transform: translateY(28px);
}

.bento-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.bento-card--1 { transition-delay: 0.05s; }
.bento-card--2 { transition-delay: 0.10s; }
.bento-card--3 { transition-delay: 0.16s; }
.bento-card--4 { transition-delay: 0.22s; }
.bento-card--5 { transition-delay: 0.28s; }
.bento-card--6 { transition-delay: 0.34s; }

.bento-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.35);
}

/* Type A — text only */
.bento-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.75rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Type B — photo + text */
.bento-photo {
    display: flex;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.bento-img {
    width: 140px;
    flex-shrink: 0;
    object-fit: cover;
    display: block;
}

.bento-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.75rem;
    flex: 1;
}

/* Narrow single-column card: stack photo on top */
.bento-card--4 {
    flex-direction: column;
}

.bento-card--4 .bento-img {
    width: 100%;
    height: 140px;
}

/* Logo circle */
.bento-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: rgba(92, 137, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.12);
    min-height: 220px;
}

.bento-logo__mark {
    width: 64px;
    height: 64px;
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

/* Typography */
.bento-mark {
    color: rgba(220, 214, 247, 0.55);
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

.bento-quote {
    font-family: var(--font-heading);
    font-size: clamp(0.9rem, 1.1vw, 1.1rem);
    color: rgba(232, 240, 255, 0.82);
    line-height: 1.45;
    margin: 0;
}

/* Responsive — single column on mobile */
@media (max-width: 768px) {
    .bento-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .bento-card--1, .bento-card--2, .bento-card--3,
    .bento-card--4, .bento-card--5, .bento-card--6 {
        grid-column: 1;
        grid-row: auto;
    }
    .bento-logo {
        grid-column: 1;
        grid-row: auto;
        min-height: 120px;
    }
    .bento-img {
        width: 110px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bento-card {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .bento-card:hover {
        transform: none;
    }
}

/* Section 4: Guarantee (legacy list — kept for reference) */
.guarantee-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
}

.guarantee-item {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--color-border-strong);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.guarantee-item:first-child {
    border-top: 1px solid var(--color-border-strong);
}

.guarantee-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.guarantee-item:nth-child(1) { transition-delay: 0s; }
.guarantee-item:nth-child(2) { transition-delay: 0.07s; }
.guarantee-item:nth-child(3) { transition-delay: 0.14s; }
.guarantee-item:nth-child(4) { transition-delay: 0.21s; }
.guarantee-item:nth-child(5) { transition-delay: 0.28s; }
.guarantee-item:nth-child(6) { transition-delay: 0.35s; }

.guarantee-mark {
    color: #c4b5e3;
    font-size: 1.1rem;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 0.1em;
}

.guarantee-text {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.5vw, 2.2rem);
    line-height: 1.15;
    color: #E8F0FF;
}

/* About page responsive overrides */
@media (max-width: 960px) {
    .about-origin {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .about-origin__callout {
        position: static;
    }

    .tools-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .tools-layout__cloud { order: 2; }
    .tools-layout__copy  { order: 1; }
}

@media (max-width: 800px) {
    .svc-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 560px) {
    .svc-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .guarantee-text {
        font-size: clamp(1.15rem, 4vw, 1.6rem);
    }
}

/* ================================================================
   SERVICES PAGE — Jump nav + service section layout
   ================================================================ */

.services-jumpnav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 0.75rem 0;
}

.services-jumpnav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.services-jumpnav__list a {
    display: inline-block;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    background: rgba(220, 214, 247, 0.55);
    border: 1px solid var(--color-border);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-ink);
    transition: background 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.services-jumpnav__list a:hover {
    background: var(--color-accent);
    border-color: transparent;
    color: #E8F0FF;
}

.service-section__header {
    margin-bottom: 2.5rem;
}

.service-section__ideal {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 1.5rem;
    align-self: start;
}

.service-section__ideal-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    margin: 0 0 0.5rem;
}

.service-section__body {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
    align-items: start;
}

.service-section__includes .eyebrow {
    margin-bottom: 1rem;
}

/* Responsive */
@media (max-width: 960px) {
    .service-section__body {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 640px) {
    .services-jumpnav__list {
        gap: 0.4rem;
    }
}

/* ─── Falling Pills ─────────────────────────────────────────── */

@keyframes fallIn {
    0% {
        opacity: 0;
        transform: translateY(-200px) rotate(0deg) scale(0.8);
    }
    60% {
        opacity: 1;
        transform: translateY(10px) rotate(var(--final-rotate)) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(var(--final-rotate)) scale(1);
    }
}

.page-hero--with-pills {
    overflow: hidden;
}

.page-hero--with-pills .container {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.page-hero--with-pills .page-hero__text {
    max-width: 680px;
}

.falling-pills-container {
    background: #111111;
    border-radius: 24px;
    min-height: 420px;
    position: relative;
    overflow: hidden;
    padding: 40px;
}

.service-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 20px 48px;
    border-radius: 50px;
    font-size: 28px;
    font-weight: 800;
    color: #111;
    white-space: nowrap;
    position: absolute;
    opacity: 0;
    font-family: var(--font-body);
}

.falling-pills-container.is-visible .service-pill {
    animation: fallIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: var(--delay);
}

.falling-pills-cta {
    position: absolute;
    bottom: 24px;
    right: 24px;
    background: #f0f0f0;
    border-radius: 50px;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 600;
    color: #111;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    z-index: 20;
    transition: background 0.2s;
}

.falling-pills-cta:hover {
    background: #ffffff;
}

@media (max-width: 768px) {
    .service-pill {
        font-size: 18px;
        padding: 12px 28px;
    }
}

@media (max-width: 480px) {
    .falling-pills-container {
        min-height: 0;
        overflow: visible;
        padding: 24px 20px 72px;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: flex-start;
    }
    .service-pill {
        position: static;
        transform: none !important;
        animation: none !important;
        opacity: 1 !important;
        font-size: 16px;
        padding: 10px 22px;
    }
}

/* ─── Dashboard Showcase ───────────────────────────────────────── */
.dash-showcase { background: var(--color-surface); }
.dash-showcase .section-heading { text-align: center; margin-bottom: 2.5rem; }

.dash-tabs {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    justify-content: center; margin-bottom: 2rem;
}
.dash-tab {
    font-family: var(--font-body); font-size: 0.85rem; font-weight: 600;
    padding: 0.55rem 1.25rem; border-radius: 999px;
    border: 2px solid var(--color-border); background: var(--color-card);
    color: var(--color-ink); cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.dash-tab:hover { border-color: var(--color-accent); }
.dash-tab--active { background: var(--color-accent); border-color: var(--color-accent); color: #E8F0FF; }

.dashboard-content { position: relative; transition: opacity 0.3s ease, transform 0.3s ease; }
.dashboard-content.fading-out { opacity: 0; transform: translateY(10px); }

.dash-panel { display: none; }
.dash-panel--active { display: block; }

/* Card chrome */
.dash-card {
    background: #fff; border-radius: var(--radius); border: 1px solid rgba(66,72,116,0.1);
    box-shadow: var(--shadow-strong); overflow: hidden;
}
.dash-toolbar {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem;
    border-bottom: 1px solid rgba(66,72,116,0.08); background: #fafafa;
}
.dash-toolbar__dots { display: flex; gap: 5px; }
.dash-toolbar__dots span { width: 10px; height: 10px; border-radius: 50%; }
.dash-toolbar__dots span:nth-child(1) { background: #ff5f57; }
.dash-toolbar__dots span:nth-child(2) { background: #febc2e; }
.dash-toolbar__dots span:nth-child(3) { background: #28c840; }
.dash-toolbar__title { font-size: 0.78rem; font-weight: 600; color: #888; margin-left: 0.25rem; }
.dash-toolbar__controls { margin-left: auto; display: flex; gap: 0.5rem; }
.dash-pill {
    font-size: 0.7rem; font-weight: 700; padding: 0.25rem 0.7rem;
    border-radius: 999px; background: var(--color-surface); color: var(--color-accent);
    border: 1px solid var(--color-border);
}
.dash-body { padding: 1.25rem; }

/* Panel layout: main card + side col with text + 2 widgets */
.dash-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.dash-text-col { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.25rem 0; }
.dash-text-col h3 { font-size: 1.25rem; margin: 0; }
.dash-text-col p { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.6; margin: 0; }
.dash-widgets { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.dash-widget-caption { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.25rem 0; }
.dash-widget-caption h4 { font-size: 1rem; margin: 0; }
.dash-widget-caption p { font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.6; margin: 0; }

@media (max-width: 640px) {
    .dash-widgets { grid-template-columns: 1fr; }
}

/* ── Panel 0: Workflow Automation ── */
.auto-list { display: flex; flex-direction: column; gap: 0; }
.auto-row {
    display: grid; grid-template-columns: 28px 1fr auto 80px 60px;
    align-items: center; gap: 0.75rem; padding: 0.65rem 0;
    border-bottom: 1px solid rgba(66,72,116,0.07); font-size: 0.82rem;
}
.auto-row:last-child { border-bottom: none; }
.auto-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
    background: #28c840; box-shadow: 0 0 5px rgba(40,200,64,0.5);
}
.auto-dot--pulse { animation: pulse-fade 2s ease-in-out infinite; }
.auto-dot--idle { background: #aaa; box-shadow: none; }
.auto-dot--warn { background: #febc2e; box-shadow: 0 0 5px rgba(254,188,46,0.5); }
.auto-info { display: flex; flex-direction: column; gap: 0.15rem; }
.auto-name { font-weight: 600; color: var(--color-ink); }
.auto-trigger { font-size: 0.73rem; color: var(--color-text-muted); }
.auto-last { font-size: 0.77rem; color: var(--color-text-muted); white-space: nowrap; }
.auto-sparkline svg { display: block; }
.auto-runs { font-size: 0.77rem; font-weight: 700; color: var(--color-accent); text-align: right; }
.auto-row--warn .auto-name { color: #b45000; }
.auto-stats {
    display: flex; gap: 0; border-top: 1px solid rgba(66,72,116,0.07);
    padding-top: 1rem; margin-top: 0.5rem;
}
.auto-stat { flex: 1; text-align: center; }
.auto-stat + .auto-stat { border-left: 1px solid rgba(66,72,116,0.07); }
.auto-stat__val { font-family: var(--font-heading); font-size: 1.6rem; color: var(--color-accent); display: block; }
.auto-stat__label { font-size: 0.7rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; }

/* Log table widget */
.log-table { display: flex; flex-direction: column; gap: 0; font-size: 0.78rem; }
.log-row {
    display: grid; grid-template-columns: 50px 1fr 1fr 50px;
    gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid rgba(66,72,116,0.07);
    align-items: center;
}
.log-row:last-child { border-bottom: none; }
.log-time { color: var(--color-text-muted); font-size: 0.72rem; }
.log-item { font-weight: 600; }
.log-reason { color: var(--color-text-muted); }
.log-badge {
    font-size: 0.65rem; font-weight: 700; padding: 0.15rem 0.45rem;
    border-radius: 999px; text-align: center;
}
.log-badge--green { background: #d4f7da; color: #1a7a2e; }
.log-badge--yellow { background: #fff3cd; color: #7a5000; }
.log-badge--red { background: #fde8e8; color: #a00; }

/* ── Panel 1: Systems Integration ── */
.int-list { display: flex; flex-direction: column; gap: 0; }
.int-row {
    display: grid; grid-template-columns: 32px 1fr 80px 1fr 50px;
    gap: 0.75rem; align-items: center; padding: 0.65rem 0;
    border-bottom: 1px solid rgba(66,72,116,0.07); font-size: 0.82rem;
}
.int-row:last-child { border-bottom: none; }
.int-tool-icon { font-size: 1.1rem; }
.int-tool-name { font-weight: 600; }
.int-status {
    font-size: 0.68rem; font-weight: 700; padding: 0.2rem 0.5rem;
    border-radius: 999px; white-space: nowrap; text-align: center;
}
.int-status--green { background: #d4f7da; color: #1a7a2e; }
.int-status--yellow { background: #fff3cd; color: #7a5000; }
.int-status--red { background: #fde8e8; color: #a00; }
.int-health-bar { width: 100%; height: 6px; background: rgba(66,72,116,0.1); border-radius: 3px; overflow: hidden; }
.int-health-fill { height: 100%; border-radius: 3px; background: var(--color-accent); }
.int-pct { font-size: 0.75rem; font-weight: 700; color: var(--color-accent); text-align: right; }

.timeline-strip { padding-top: 0.75rem; border-top: 1px solid rgba(66,72,116,0.07); margin-top: 0.5rem; }
.timeline-label { font-size: 0.68rem; color: var(--color-text-muted); margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.07em; }
.timeline-track { display: flex; gap: 3px; }
.tl-dot { flex: 1; height: 8px; border-radius: 2px; background: #d4f7da; }
.tl-dot--warn { background: #fff3cd; }
.tl-dot--fail { background: #fde8e8; }
.tl-dot--empty { background: rgba(66,72,116,0.08); }

/* Bar chart widget */
.bar-chart { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.25rem 0; }
.bar-chart-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.75rem; }
.bc-label { width: 60px; color: var(--color-text-muted); flex-shrink: 0; }
.bc-col { flex: 1; height: 18px; background: rgba(66,72,116,0.07); border-radius: 3px; overflow: hidden; }
.bc-bar { height: 100%; border-radius: 3px; background: var(--color-accent); transition: width 0.5s ease; }
.bc-val { font-size: 0.72rem; font-weight: 700; color: var(--color-accent); width: 36px; text-align: right; }

/* Donut widget */
.donut-wrap { display: flex; align-items: center; gap: 1.25rem; padding: 0.5rem 0; }
.donut-chart {
    width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0;
    background: conic-gradient(#28c840 var(--pct,0%), rgba(66,72,116,0.12) 0%);
    display: flex; align-items: center; justify-content: center;
}
.donut-hole {
    width: 50px; height: 50px; border-radius: 50%;
    background: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; font-weight: 800; color: var(--color-accent);
}
.vendor-legend, .donut-legend { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.75rem; }
.donut-legend-row { display: flex; align-items: center; gap: 0.45rem; }
.donut-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── Panel 2: License & Spend ── */
.spend-stacked { display: flex; height: 28px; border-radius: 6px; overflow: hidden; margin-bottom: 0.5rem; }
.spend-seg { height: 100%; transition: width 0.5s ease; }
.spend-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: 0.72rem; margin-bottom: 1rem; }
.spend-legend-item { display: flex; align-items: center; gap: 0.35rem; }
.spend-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.tool-table { display: flex; flex-direction: column; gap: 0; margin-top: 0.75rem; }
.tool-header {
    display: grid; grid-template-columns: 1fr 60px 80px 80px 32px;
    gap: 0.5rem; font-size: 0.67rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--color-text-muted); padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(66,72,116,0.1);
}
.tool-row {
    display: grid; grid-template-columns: 1fr 60px 80px 80px 32px;
    gap: 0.5rem; align-items: center; padding: 0.5rem 0;
    border-bottom: 1px solid rgba(66,72,116,0.06); font-size: 0.8rem;
}
.tool-row:last-child { border-bottom: none; }
.tool-row--flagged { background: rgba(254,188,46,0.06); border-radius: 6px; padding-left: 0.4rem; }
.tool-name { font-weight: 600; }
.tool-dim { color: var(--color-text-muted); font-size: 0.77rem; }
.tool-flag { font-size: 0.75rem; }
.util-bar-wrap { height: 6px; background: rgba(66,72,116,0.1); border-radius: 3px; overflow: hidden; }
.util-bar { height: 100%; border-radius: 3px; }
.util-bar--good { background: #28c840; }
.util-bar--warn { background: #febc2e; }
.util-bar--low { background: #ff5f57; }

/* Line chart */
.line-chart svg { display: block; width: 100%; }

/* ── Panel 3: Ops Report ── */
.mini-charts-row { display: flex; gap: 1rem; margin-bottom: 1rem; }
.mini-chart-box { flex: 1; background: var(--color-surface); border-radius: var(--radius-sm); padding: 0.75rem; text-align: center; }
.mini-chart-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-muted); margin-bottom: 0.25rem; }
.mini-chart-val { font-family: var(--font-heading); font-size: 1.4rem; color: var(--color-accent); }
.mini-chart-delta { font-size: 0.68rem; }
.mini-chart-delta--up { color: #1a7a2e; }
.mini-chart-delta--down { color: #a00; }
.mini-line-chart svg { display: block; margin: 0 auto; }

.kpi-row { display: flex; gap: 0.75rem; margin-bottom: 1rem; }
.kpi-box { flex: 1; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.75rem; }
.kpi-val { font-family: var(--font-heading); font-size: 1.5rem; color: var(--color-accent); display: block; }
.kpi-label { font-size: 0.72rem; color: var(--color-text-muted); }

.insights-block { display: flex; flex-direction: column; gap: 0.4rem; }
.insight-row { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.82rem; line-height: 1.45; }
.insight-row__icon { flex-shrink: 0; }

.avatar-row { display: flex; align-items: center; gap: 0; }
.avatar {
    width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff;
    background: var(--color-accent); color: #E8F0FF;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.65rem; font-weight: 700; margin-left: -6px;
}
.avatar:first-child { margin-left: 0; }
.avatar--open { background: var(--color-surface); color: var(--color-accent); font-size: 0.6rem; }

/* ── Panel 4: Vendor Management ── */
.vendor-layout { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; }
.vendor-list-col { display: flex; flex-direction: column; gap: 0; }
.vendor-row {
    display: grid; grid-template-columns: 1fr auto auto;
    gap: 0.75rem; align-items: center; padding: 0.55rem 0;
    border-bottom: 1px solid rgba(66,72,116,0.07); font-size: 0.82rem;
}
.vendor-row:last-child { border-bottom: none; }
.vendor-name { font-weight: 600; }
.vendor-cost { color: var(--color-text-muted); font-size: 0.77rem; white-space: nowrap; }
.vendor-stars { color: #febc2e; font-size: 0.75rem; letter-spacing: 1px; }

.compare-bars { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 0.5rem; }
.compare-row { display: flex; flex-direction: column; gap: 0.25rem; }
.compare-label { font-size: 0.72rem; color: var(--color-text-muted); }
.compare-track { height: 10px; background: rgba(66,72,116,0.08); border-radius: 5px; overflow: hidden; }
.compare-fill { height: 100%; border-radius: 5px; }
.compare-fill--gray { background: rgba(66,72,116,0.25); }
.compare-fill--green { background: #28c840; }
.stat-big { font-family: var(--font-heading); font-size: 2.2rem; color: var(--color-accent); line-height: 1; }
.stat-note { font-size: 0.75rem; color: var(--color-text-muted); }

/* ── Panel 5: Process Optimization ── */
.proc-toggle-row { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.proc-toggle {
    font-size: 0.8rem; font-weight: 700; padding: 0.4rem 1rem;
    border-radius: 999px; border: 2px solid var(--color-border);
    background: var(--color-surface); color: var(--color-text-muted); cursor: pointer;
    transition: all 0.2s;
}
.proc-toggle--active { background: var(--color-accent); border-color: var(--color-accent); color: #E8F0FF; }
.proc-view { display: none; }
.proc-view--visible { display: block; }

.flow-chart { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.5rem 0; }
.flow-step {
    display: flex; flex-direction: column; gap: 0.2rem; padding: 0.6rem 0.85rem;
    border-radius: var(--radius-sm); border: 1.5px solid; font-size: 0.78rem; min-width: 90px;
}
.flow-step--green { background: #edfff1; border-color: #28c840; }
.flow-step--red { background: #fff0f0; border-color: #ff5f57; }
.flow-step--yellow { background: #fffbeb; border-color: #febc2e; }
.flow-step__name { font-weight: 700; }
.flow-step__time { font-size: 0.68rem; color: var(--color-text-muted); }
.flow-arrow { color: var(--color-text-muted); font-size: 1rem; }
.flow-total {
    margin-top: 0.75rem; padding: 0.6rem 1rem; border-radius: var(--radius-sm);
    font-size: 0.82rem; font-weight: 700;
}
.flow-total--red { background: #fde8e8; color: #a00; }
.flow-total--green { background: #d4f7da; color: #1a7a2e; }

.time-bars { display: flex; flex-direction: column; gap: 0.5rem; }
.time-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; }
.time-label { width: 80px; color: var(--color-text-muted); flex-shrink: 0; }
.time-saved {
    flex: 1; height: 14px; border-radius: 3px; background: var(--color-accent);
    display: flex; align-items: center; justify-content: flex-end;
    padding-right: 0.35rem; font-size: 0.67rem; font-weight: 700; color: #E8F0FF;
}

.satisfaction-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.4rem 0; border-bottom: 1px solid rgba(66,72,116,0.07); font-size: 0.82rem; }
.satisfaction-row:last-child { border-bottom: none; }
.sat-emoji { font-size: 1.1rem; flex-shrink: 0; }
.sat-data { flex: 1; }
.sat-label { font-size: 0.72rem; color: var(--color-text-muted); }
.sat-score { font-weight: 700; color: var(--color-accent); }

/* Health rows (Panel 1 widget) */
.health-rows { display: flex; flex-direction: column; gap: 0.35rem; }
.health-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.78rem; padding: 0.3rem 0; border-bottom: 1px solid rgba(66,72,116,0.06); }
.health-row:last-child { border-bottom: none; }

@media (max-width: 768px) {
    .dash-layout { grid-template-columns: 1fr; }
    .dash-tabs { gap: 0.35rem; }
    .dash-tab { font-size: 0.78rem; padding: 0.45rem 0.9rem; }
    .mini-charts-row { flex-wrap: wrap; }
    .kpi-row { flex-wrap: wrap; }
    .vendor-layout { grid-template-columns: 1fr; }
    .auto-row { grid-template-columns: 20px 1fr auto; }
    .auto-sparkline, .auto-runs { display: none; }
    .int-row { grid-template-columns: 28px 1fr 70px; }
    .int-health-bar, .int-pct { display: none; }
    .tool-header, .tool-row { grid-template-columns: 1fr 60px 60px; }
    .tool-row > :nth-child(4), .tool-header > :nth-child(4),
    .tool-row > :nth-child(5), .tool-header > :nth-child(5) { display: none; }
}

/* ─── Process Section ─── */
.process-section {
    background: #05204A;
    width: 100%;
}

.process-section__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px 80px;
}

.process-header {
    padding: 80px 0 48px;
    text-align: center;
}

.process-label {
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    font-family: var(--font-body);
    margin: 0 0 16px;
}

.process-heading {
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 700;
    color: #ffffff;
    font-family: var(--font-heading);
    margin: 0;
    line-height: 1.1;
}

/* ── Individual row ── */
.process-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    padding: 60px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    gap: 0;
}

.process-row:last-child {
    border-bottom: none;
}

/* ── Default (dim) state ── */
.process-title {
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 700;
    font-family: var(--font-heading);
    color: rgba(255, 255, 255, 0.13);
    line-height: 1.05;
    margin: 0;
    transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.process-illus-wrap {
    background: #1e1e1e;
    border-radius: 16px;
    width: 280px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.process-illus {
    width: 160px;
    height: 120px;
    stroke: rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.22);
    transition: stroke 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.process-desc {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.1);
    font-family: var(--font-body);
    margin: 0;
    padding-left: 32px;
    transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Active state (scrolled into center) ── */
.process-row.active .process-title {
    color: rgba(255, 255, 255, 1);
}

.process-row.active .process-illus-wrap {
    opacity: 1;
    transform: scale(1);
}

.process-row.active .process-illus {
    stroke: rgba(196, 181, 227, 0.85);
    color: rgba(196, 181, 227, 0.85);
}

.process-row.active .process-desc {
    color: rgba(255, 255, 255, 0.7);
}

/* ─── Dashboard ambient animation keyframes ──────────────────── */
@keyframes dash-draw {
    from { stroke-dashoffset: var(--path-len, 200); }
    to   { stroke-dashoffset: 0; }
}
@keyframes badge-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.08); opacity: 0.85; }
}
@keyframes kpi-badge-flash {
    0%, 100% { background: #dcfce7; color: #15803d; }
    50%       { background: #bbf7d0; color: #166534; }
}
@keyframes bar-grow {
    from { width: 0; }
    to   { width: var(--w, 100%); }
}
@keyframes slide-in-row {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes value-tick {
    0%  { opacity: 1; transform: translateY(0); }
    40% { opacity: 0; transform: translateY(-4px); }
    60% { opacity: 0; transform: translateY(4px); }
    100%{ opacity: 1; transform: translateY(0); }
}

/* sparkline draw: applied via JS by adding .is-drawn class */
.sparkline-path {
    stroke-dashoffset: var(--path-len, 200);
    stroke-dasharray: var(--path-len, 200);
    transition: stroke-dashoffset 1.2s ease-out;
}
.sparkline-path.is-drawn { stroke-dashoffset: 0; }

/* KPI badge ambient pulse — active panel only */
.dash-panel--active .kpi-pulse {
    animation: badge-pulse 3s ease-in-out infinite;
}
.dash-panel--active .kpi-pulse:nth-child(1) { animation-delay: 0s; }
.dash-panel--active .kpi-pulse:nth-child(2) { animation-delay: 0.75s; }
.dash-panel--active .kpi-pulse:nth-child(3) { animation-delay: 1.5s; }
.dash-panel--active .kpi-pulse:nth-child(4) { animation-delay: 2.25s; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .process-section__inner {
        padding: 0 20px 60px;
    }

    .process-row {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 24px;
        padding: 40px 0;
    }

    .process-illus-wrap {
        width: 220px;
        height: 160px;
    }

    .process-desc {
        padding-left: 0;
    }
}
/* ─── End Process Section ─── */