/* ==========================================================================
   Mindwrack — Homepage Sections (custom.css)
   Everything below the Neural Pipeline Console hero. Loaded after app.css,
   so it freely reuses that file's design tokens (--color-void, --font-mono,
   --space-*, etc.) rather than redefining them.
   ========================================================================== */

/* ---------- Shared section heading ---------- */
.section-heading {
    max-width: 640px;
    margin-inline: auto;
    text-align: center;
    margin-bottom: var(--space-5);
}

.section-heading h2 {
    margin-bottom: var(--space-3);
}

.section-cta {
    text-align: center;
    margin-top: var(--space-5);
}

/* ---------- Shared empty state (used when no posts/case studies exist yet) ----------
   Full-bleed photo banner with a dark overlay and a "signal" status tag,
   matching the impact-stats/cta-band treatment elsewhere on the page —
   replaces an earlier version that centered a small, boxed-in thumbnail and
   read as an unfinished page rather than a deliberate "more soon" moment. */
.empty-state {
    position: relative;
    min-height: 380px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.empty-state__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.empty-state__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(6, 8, 16, 0.94) 0%, rgba(6, 8, 16, 0.55) 55%, rgba(6, 8, 16, 0.25) 100%);
}

.empty-state__content {
    position: relative;
    z-index: 1;
    padding: var(--space-5);
    max-width: 560px;
}

.empty-state__status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-cyan);
    margin-bottom: var(--space-3);
}

.empty-state__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-cyan);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.8);
    animation: empty-state-pulse 1.8s ease-in-out infinite;
}

@keyframes empty-state-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

.empty-state__content h3 {
    color: var(--color-white);
    font-size: 1.6rem;
    margin-bottom: var(--space-3);
}

.empty-state__content p {
    color: var(--color-gray-300);
    margin-bottom: var(--space-4);
}

@media (prefers-reduced-motion: reduce) {
    .empty-state__dot {
        animation: none;
    }
}

/* ==========================================================================
   1. Value Proposition
   ========================================================================== */
.value-prop {
    padding-block: var(--space-6);
    background-color: var(--color-off-white);
}

.value-prop__grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-6);
    align-items: center;
}

.value-prop__media {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.value-prop__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 16 / 10;
}

.value-prop__stat {
    position: absolute;
    left: var(--space-4);
    bottom: var(--space-4);
    background: rgba(6, 8, 16, 0.82);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(0, 229, 255, 0.25);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    max-width: 260px;
}

.value-prop__stat-number {
    display: block;
    font-family: var(--font-mono);
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-cyan);
    line-height: 1;
    margin-bottom: var(--space-1);
}

.value-prop__stat-label {
    display: block;
    font-size: 0.75rem;
    color: var(--color-gray-300);
    letter-spacing: 0.02em;
}

.value-prop__copy p {
    margin-bottom: var(--space-3);
}

/* ==========================================================================
   2. Capabilities — flip cards
   ========================================================================== */
.capability-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.capability-card {
    perspective: 1200px;
    height: 260px;
    cursor: pointer;
    outline: none;
}

.capability-card__inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

/* Desktop: hover or keyboard focus flips the card. Touch devices don't fire
   :hover reliably, so home.js toggles this same .is-flipped class on tap. */
.capability-card:hover .capability-card__inner,
.capability-card:focus-visible .capability-card__inner,
.capability-card.is-flipped .capability-card__inner {
    transform: rotateY(180deg);
}

.capability-card__face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
}

.capability-card__face--front {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    align-items: flex-start;
    justify-content: center;
}

.capability-card__face--front i {
    font-size: 1.75rem;
    color: var(--color-gold);
    margin-bottom: var(--space-3);
}

.capability-card__face--front h3 {
    font-size: 1.15rem;
    margin-bottom: var(--space-2);
}

.capability-card__hint {
    margin-top: auto;
    font-size: 0.75rem;
    color: var(--color-gray-600);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.capability-card__face--back {
    background: linear-gradient(145deg, var(--color-navy), var(--color-navy-light));
    color: var(--color-gray-300);
    transform: rotateY(180deg);
    justify-content: center;
}

.capability-card__face--back h3 {
    color: var(--color-white);
    font-size: 1.05rem;
    margin-bottom: var(--space-2);
}

.capability-card__face--back p {
    color: var(--color-gray-300);
    font-size: 0.9rem;
}

/* ==========================================================================
   3. Impact Stats — full-bleed photo band with count-up metrics
   ========================================================================== */
.impact-stats {
    position: relative;
    padding-block: var(--space-6);
    overflow: hidden;
    color: var(--color-white);
}

.impact-stats__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.impact-stats__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 8, 16, 0.92) 0%, rgba(6, 8, 16, 0.85) 100%);
}

.impact-stats__content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.impact-stats__content .eyebrow {
    color: var(--color-gold-hero);
}

.impact-stats__content h2 {
    color: var(--color-white);
    margin-bottom: var(--space-5);
}

.impact-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    max-width: 960px;
    margin-inline: auto;
}

.impact-stat__number {
    display: block;
    font-family: var(--font-mono);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 600;
    color: var(--color-cyan);
    margin-bottom: var(--space-2);
}

.impact-stat__label {
    display: block;
    font-size: 0.85rem;
    color: var(--color-gray-300);
    line-height: 1.4;
}

/* ==========================================================================
   4. Insights — blog preview
   ========================================================================== */
.insight-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: var(--space-5);
}

.insight-card {
    border-radius: var(--radius-md);
    overflow: hidden;
}

.insight-card--featured {
    background-color: var(--color-off-white);
    border: 1px solid var(--color-gray-300);
}

.insight-card__media img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.insight-card__body {
    padding: var(--space-4);
}

.insight-card__meta {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-gray-600);
    margin-bottom: var(--space-2);
}

.insight-card__body h3 {
    font-size: 1.25rem;
    margin-bottom: var(--space-2);
}

.insight-card__body h3 a {
    transition: var(--transition-base);
}

.insight-card__body h3 a:hover {
    color: var(--color-gold);
}

.insight-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-2);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-navy);
}

.insight-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.insight-card--compact {
    border-bottom: 1px solid var(--color-gray-300);
    padding-bottom: var(--space-3);
}

.insight-card--compact .insight-card__body {
    padding: 0;
}

.insight-card--compact h3 {
    font-size: 1.05rem;
}

/* ==========================================================================
   5. Case Studies — hover-reveal proof band
   ========================================================================== */
.case-band .container > .empty-state,
.case-band .container > div.case-card {
    margin-bottom: var(--space-4);
}

.case-card {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--space-4);
}

.case-card img {
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    display: block;
}

.case-card__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-4);
    background: linear-gradient(0deg, rgba(10, 37, 64, 0.92) 0%, rgba(10, 37, 64, 0.15) 60%, transparent 100%);
    color: var(--color-white);
}

.case-card__client {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-gold-hero);
    margin-bottom: var(--space-1);
}

.case-card__overlay h3 {
    color: var(--color-white);
    font-size: 1.35rem;
    margin-bottom: var(--space-2);
}

.case-card__overlay h3 a {
    transition: var(--transition-base);
}

.case-card__overlay h3 a:hover {
    color: var(--color-gold-hero);
}

/* The result line is clipped to a single line by default and only fully
   revealed on hover/focus — a lightweight CSS-only "proof" reveal, no JS. */
.case-card__result {
    color: var(--color-gray-300);
    font-size: 0.9rem;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease;
}

.case-card:hover .case-card__result,
.case-card:focus-within .case-card__result {
    max-height: 6rem;
    opacity: 1;
}

/* ==========================================================================
   6. Get a Quote — multi-step "mission console" wizard
   ========================================================================== */
.quote {
    background-color: var(--color-off-white);
}

.quote-console {
    max-width: 900px;
    margin-inline: auto;
    background: var(--color-panel);
    border: 1px solid rgba(0, 229, 255, 0.15);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

/* ----- Progress rail (3 segments, filled as the visitor completes steps) ----- */
.quote-console__progress {
    display: flex;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5) 0;
    gap: var(--space-3);
}

.quote-progress-node {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
    opacity: 0.45;
    transition: var(--transition-base);
}

.quote-progress-node__index {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-gray-300);
}

.quote-progress-node__label {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-gray-300);
}

.quote-progress-node.is-active {
    opacity: 1;
}

.quote-progress-node.is-active .quote-progress-node__index {
    border-color: var(--color-cyan);
    color: var(--color-cyan);
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.4);
}

.quote-progress-node.is-complete {
    opacity: 0.85;
}

.quote-progress-node.is-complete .quote-progress-node__index {
    border-color: var(--color-gold-hero);
    color: var(--color-gold-hero);
    background: rgba(200, 168, 110, 0.12);
}

/* ----- Form / steps ----- */
.quote-form {
    padding: var(--space-5);
}

.quote-step {
    animation: quote-step-in 0.35s ease;
}

@keyframes quote-step-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.quote-step h3 {
    color: var(--color-white);
    font-size: 1.35rem;
    margin-bottom: var(--space-2);
}

.quote-step__hint {
    color: var(--color-gray-300);
    font-size: 0.9rem;
    margin-bottom: var(--space-4);
}

/* Mission-type tiles */
.quote-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}

.quote-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-void);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    color: var(--color-gray-300);
    font-size: 0.8rem;
    text-align: center;
    cursor: pointer;
    transition: var(--transition-base);
}

.quote-option i {
    font-size: 1.25rem;
    color: var(--color-gold-hero);
}

.quote-option:hover {
    border-color: rgba(0, 229, 255, 0.4);
    transform: translateY(-2px);
}

.quote-option.is-selected {
    border-color: var(--color-cyan);
    background: rgba(0, 229, 255, 0.08);
    color: var(--color-white);
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.25);
}

/* Text fields */
.quote-field {
    display: block;
    margin-bottom: var(--space-4);
}

.quote-field > span:first-child {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-gold-hero);
    margin-bottom: var(--space-2);
}

.quote-field em {
    color: rgba(255, 255, 255, 0.45);
    font-style: normal;
    text-transform: none;
    letter-spacing: 0;
}

.quote-field input,
.quote-field select,
.quote-field textarea {
    width: 100%;
    padding: var(--space-3);
    background: var(--color-void);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sm);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 0.95rem;
    transition: var(--transition-base);
}

.quote-field textarea {
    resize: vertical;
    min-height: 120px;
}

.quote-field input:focus,
.quote-field select:focus,
.quote-field textarea:focus {
    outline: none;
    border-color: var(--color-cyan);
    box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.15);
}

.quote-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.quote-field-hint {
    display: block;
    margin-top: var(--space-2);
    font-size: 0.75rem;
    color: var(--color-gray-300);
}

.quote-field-error {
    display: block;
    margin-top: var(--space-2);
    font-size: 0.8rem;
    color: #FF8A80;
    min-height: 1.1em;
}

/* Shake the field when validation fails — a quick, game-like negative cue
   rather than a static red border alone. */
.quote-field.has-error input,
.quote-field.has-error select,
.quote-field.has-error textarea,
.quote-options.has-error {
    border-color: #FF8A80;
    animation: quote-shake 0.4s ease;
}

@keyframes quote-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

/* ----- Nav buttons ----- */
.quote-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-4);
}

.quote-nav__back {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--color-gray-300);
}

.quote-nav__back:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

.quote-nav__next,
.quote-nav__launch {
    margin-left: auto;
}

.quote-nav__launch:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.quote-submit-error {
    text-align: right;
    margin-top: var(--space-3);
}

/* ----- Success state (reuses .terminal/.terminal__bar/.terminal__lines) ----- */
.quote-success {
    padding: var(--space-5);
}

.quote-success .terminal__lines .terminal-line {
    color: #4CD190;
}

/* ==========================================================================
   7. FAQ accordion
   ========================================================================== */
.faq-accordion {
    max-width: 760px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.faq-item {
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
}

.faq-item summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-navy);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '+';
    font-size: 1.25rem;
    color: var(--color-gold);
    transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
    transform: rotate(45deg);
}

.faq-item p {
    margin-top: var(--space-3);
    color: var(--color-gray-600);
}

/* ==========================================================================
   8. Final CTA band
   ========================================================================== */
.cta-band {
    position: relative;
    padding-block: var(--space-6);
    overflow: hidden;
    text-align: center;
}

.cta-band__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cta-band__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(6, 8, 16, 0.9) 0%, rgba(10, 37, 64, 0.85) 100%);
}

.cta-band__content {
    position: relative;
    z-index: 1;
    max-width: 640px;
}

.cta-band__content h2 {
    color: var(--color-white);
    margin-bottom: var(--space-3);
}

.cta-band__rotating {
    color: var(--color-gold-hero);
    display: inline-block;
    /* home.js swaps this element's text on an interval; the fade itself is a
       CSS transition on opacity so the JS only ever touches textContent. */
    transition: opacity 0.3s ease;
}

.cta-band__content p {
    color: var(--color-gray-300);
    margin-bottom: var(--space-4);
}

/* ==========================================================================
   9. Tech-stack marquee
   ========================================================================== */
.tech-marquee {
    position: relative;
    background-color: var(--color-white);
    padding-block: var(--space-4);
    overflow: hidden;
    /* Fade the strip's edges to transparent so items scroll in/out softly
       rather than clipping abruptly at the container boundary. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}

.tech-marquee__track {
    display: flex;
    width: max-content;
    animation: tech-marquee-scroll 32s linear infinite;
}

.tech-marquee__track.is-paused {
    animation-play-state: paused;
}

/* Two identical groups sit side by side; animating exactly -50% (one
   group's width) loops seamlessly with no visible seam or reset jump. */
.tech-marquee__group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

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

.tech-marquee__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding-inline: var(--space-4);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.01em;
    color: var(--color-gray-600);
    white-space: nowrap;
}

.tech-marquee__item i {
    color: var(--color-gold);
    font-size: 1rem;
}

@media (prefers-reduced-motion: reduce) {
    .tech-marquee__track {
        animation: none;
        overflow-x: auto;
    }

    .tech-marquee__group[aria-hidden="true"] {
        display: none;
    }
}

/* ==========================================================================
   10. About page
   ========================================================================== */

/* ----- Hero ----- */
.about-hero {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-block: var(--space-6);
}

.about-hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(6, 8, 16, 0.94) 0%, rgba(10, 37, 64, 0.88) 100%);
}

.about-hero__content {
    position: relative;
    z-index: 1;
    max-width: 720px;
}

.about-hero__content .eyebrow {
    color: var(--color-gold-hero);
}

.about-hero__content h1 {
    color: var(--color-white);
    margin-bottom: var(--space-3);
}

.about-hero__content > p {
    color: var(--color-gray-300);
    font-size: 1.05rem;
    margin-bottom: var(--space-5);
}

.about-hero__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    max-width: 760px;
}

.about-stat__number {
    display: block;
    font-family: var(--font-mono);
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: 600;
    color: var(--color-cyan);
    margin-bottom: var(--space-2);
}

.about-stat__label {
    display: block;
    font-size: 0.8rem;
    color: var(--color-gray-300);
    line-height: 1.4;
}

/* ----- Mission & Vision ----- */
.mission-vision-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
    max-width: 900px;
    margin-inline: auto;
}

.mission-vision-card {
    padding: var(--space-5);
    background-color: var(--color-off-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-lg);
    text-align: center;
}

.mission-vision-card i {
    font-size: 1.75rem;
    color: var(--color-gold);
    margin-bottom: var(--space-3);
}

.mission-vision-card h3 {
    margin-bottom: var(--space-3);
}

.mission-vision-card p {
    color: var(--color-gray-600);
}

/* ----- Values ----- */
.values-section {
    background-color: var(--color-off-white);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.value-card {
    padding: var(--space-4);
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    transition: var(--transition-base);
}

.value-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
    border-color: var(--color-gold);
}

.value-card i {
    font-size: 1.4rem;
    color: var(--color-gold);
    margin-bottom: var(--space-3);
}

.value-card h3 {
    font-size: 1.05rem;
    margin-bottom: var(--space-2);
}

.value-card p {
    color: var(--color-gray-600);
    font-size: 0.9rem;
}

/* ----- Operating principles ("how we're structured") ----- */
.principles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.principle-card {
    padding: var(--space-5);
    background: linear-gradient(160deg, var(--color-navy), var(--color-navy-light));
    border-radius: var(--radius-md);
    color: var(--color-gray-300);
}

.principle-card i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(200, 168, 110, 0.15);
    color: var(--color-gold-hero);
    font-size: 1.2rem;
    margin-bottom: var(--space-3);
}

.principle-card h3 {
    color: var(--color-white);
    font-size: 1.1rem;
    margin-bottom: var(--space-2);
}

.principle-card p {
    color: var(--color-gray-300);
    font-size: 0.9rem;
}

/* ----- Leadership ----- */
.leadership-section {
    background-color: var(--color-off-white);
}

.leadership-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.leadership-card {
    padding: var(--space-4);
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    text-align: center;
}

.leadership-card__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    margin-inline: auto;
    margin-bottom: var(--space-3);
    border-radius: 50%;
    background: linear-gradient(160deg, var(--color-navy), var(--color-navy-light));
    color: var(--color-gold-hero);
    font-size: 1.75rem;
}

.leadership-card h3 {
    font-size: 1.05rem;
    margin-bottom: var(--space-2);
}

.leadership-card p {
    color: var(--color-gray-600);
    font-size: 0.85rem;
}

/* ----- Corporate information ----- */
.corporate-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.corporate-info-card {
    padding: var(--space-4);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
}

.corporate-info-card i {
    font-size: 1.4rem;
    color: var(--color-gold);
    margin-bottom: var(--space-3);
}

.corporate-info-card h3 {
    font-size: 1rem;
    margin-bottom: var(--space-2);
}

.corporate-info-card address {
    font-style: normal;
    color: var(--color-gray-600);
    font-size: 0.9rem;
    line-height: 1.6;
}

.corporate-info-emails {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.corporate-info-emails li {
    font-size: 0.9rem;
}

.corporate-info-emails span {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-gray-600);
}

.corporate-info-emails a {
    color: var(--color-navy);
    font-weight: 600;
}

.corporate-info-emails a:hover {
    color: var(--color-gold);
}

/* ----- Government of India startup recognition badge ----- */
.startup-india-badge {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: linear-gradient(135deg, var(--color-navy), var(--color-navy-light));
    border-radius: var(--radius-lg);
    border: 1px solid rgba(200, 168, 110, 0.3);
}

.startup-india-badge__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(200, 168, 110, 0.15);
    color: var(--color-gold-hero);
    font-size: 1.5rem;
}

.startup-india-badge__label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-gold-hero);
    margin-bottom: var(--space-2);
}

.startup-india-badge__content h3 {
    color: var(--color-white);
    font-size: 1.05rem;
    margin-bottom: var(--space-2);
}

.startup-india-badge__content p {
    color: var(--color-gray-300);
    font-size: 0.9rem;
    margin-bottom: var(--space-3);
}

.startup-india-badge__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.startup-india-badge__actions a:not(.btn) {
    color: var(--color-gold-hero);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.startup-india-badge__actions a:not(.btn):hover {
    color: var(--color-white);
}

/* ==========================================================================
   11. Services page — Stack Composer, Constellation, Estimator
   ========================================================================== */

/* ----- Assemble Your Stack (composer console) ----- */
.stack-composer-section {
    background-color: var(--color-off-white);
}

.composer-console {
    max-width: 900px;
    margin-inline: auto;
    background: var(--color-panel);
    border: 1px solid rgba(0, 229, 255, 0.15);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.composer-console__progress {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5) 0;
    background: none;
    border: none;
}

.composer-progress-node {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
    background: none;
    border: none;
    color: var(--color-gray-300);
    opacity: 0.45;
    cursor: pointer;
    transition: var(--transition-base);
}

.composer-progress-node.is-locked {
    cursor: default;
}

.composer-progress-node__index {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-gray-300);
}

.composer-progress-node__label {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.composer-progress-node.is-active {
    opacity: 1;
}

.composer-progress-node.is-active .composer-progress-node__index {
    border-color: var(--color-cyan);
    color: var(--color-cyan);
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.4);
}

.composer-progress-node.is-complete {
    opacity: 0.85;
}

.composer-progress-node.is-complete .composer-progress-node__index {
    border-color: var(--color-gold-hero);
    color: var(--color-gold-hero);
    background: rgba(200, 168, 110, 0.12);
}

.composer-panels {
    position: relative;
    padding: var(--space-5);
    min-height: 220px;
}

.composer-panel {
    display: none;
    animation: composer-panel-in 0.35s ease;
}

.composer-panel.is-active {
    display: block;
}

@keyframes composer-panel-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.composer-panel h3 {
    color: var(--color-white);
    font-size: 1.2rem;
    margin-bottom: var(--space-4);
}

.composer-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}

.composer-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-void);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    color: var(--color-gray-300);
    font-size: 0.85rem;
    text-align: center;
    cursor: pointer;
    transition: var(--transition-base);
}

.composer-option i {
    font-size: 1.25rem;
    color: var(--color-gold-hero);
}

.composer-option:hover {
    border-color: rgba(0, 229, 255, 0.4);
    transform: translateY(-2px);
}

.composer-option.is-selected {
    border-color: var(--color-cyan);
    background: rgba(0, 229, 255, 0.08);
    color: var(--color-white);
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.25);
}

/* ----- Composer summary (flow diagram + generated brief) ----- */
.composer-summary {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: var(--space-5);
    animation: composer-panel-in 0.4s ease;
}

.composer-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.composer-flow__node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    width: 84px;
    padding: var(--space-3) var(--space-2);
    background: var(--color-void);
    border: 1px solid rgba(0, 229, 255, 0.2);
    border-radius: var(--radius-sm);
    color: var(--color-gray-300);
    font-size: 0.7rem;
    text-align: center;
    transition: var(--transition-base);
}

.composer-flow__node i {
    font-size: 1.1rem;
    color: var(--color-cyan);
}

.composer-flow__node[data-node="ai"].is-inactive {
    opacity: 0.3;
}

.composer-flow__connector {
    flex: 1;
    min-width: 24px;
    max-width: 56px;
    height: 2px;
    background-image: repeating-linear-gradient(90deg, var(--color-gold-hero) 0 6px, transparent 6px 12px);
    background-size: 200% 100%;
    animation: composer-flow-dash 1.4s linear infinite;
}

.composer-flow__connector.is-inactive {
    opacity: 0.15;
    animation: none;
}

@keyframes composer-flow-dash {
    to { background-position: -24px 0; }
}

.composer-summary__label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-cyan);
    margin-bottom: var(--space-2);
}

.composer-summary__text p {
    color: var(--color-gray-300);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 640px;
    margin-inline: auto;
    text-align: center;
    margin-bottom: var(--space-4);
}

.composer-summary__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.composer-summary__restart {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--color-gray-300);
}

.composer-summary__restart:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

/* ----- Integration constellation ----- */
.constellation {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: var(--space-3);
    max-width: 620px;
    margin-inline: auto;
}

.constellation__hub {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4);
    background: linear-gradient(160deg, var(--color-navy), var(--color-navy-light));
    border-radius: 50%;
    aspect-ratio: 1;
    color: var(--color-white);
    font-weight: 700;
    font-size: 0.85rem;
    transition: box-shadow 0.3s ease;
}

.constellation__hub i {
    font-size: 1.4rem;
    color: var(--color-gold-hero);
}

.constellation__hub.is-connected {
    box-shadow: 0 0 0 6px rgba(0, 229, 255, 0.15), 0 0 24px rgba(0, 229, 255, 0.35);
}

.constellation__node {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    color: var(--color-navy);
    font-size: 0.8rem;
    text-align: center;
    cursor: pointer;
    transition: var(--transition-base);
}

.constellation__node i {
    font-size: 1.15rem;
    color: var(--color-gold);
}

.constellation__node:hover,
.constellation__node:focus-visible,
.constellation__node.is-active {
    border-color: var(--color-cyan);
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.2);
    transform: translateY(-2px);
}

/* Explicit grid placement forms an octagonal ring around the center hub. */
.constellation__node--crm { grid-column: 1; grid-row: 1; }
.constellation__node--erp { grid-column: 2; grid-row: 1; }
.constellation__node--support { grid-column: 3; grid-row: 1; }
.constellation__node--payments { grid-column: 3; grid-row: 2; }
.constellation__node--analytics { grid-column: 3; grid-row: 3; }
.constellation__node--messaging { grid-column: 2; grid-row: 3; }

.constellation__description {
    max-width: 560px;
    margin: var(--space-5) auto 0;
    text-align: center;
    min-height: 3.2em;
}

.constellation__description p {
    color: var(--color-gray-600);
}

/* ----- Engagement estimator ----- */
.estimator-console {
    max-width: 820px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-5);
    align-items: center;
    padding: var(--space-5);
    background-color: var(--color-off-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-lg);
}

.estimator-sliders {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.estimator-slider {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.estimator-slider__label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-navy);
}

.estimator-slider input[type="range"] {
    width: 100%;
    accent-color: var(--color-gold);
}

.estimator-slider__value {
    font-size: 0.9rem;
    color: var(--color-gray-600);
    font-weight: 600;
}

.estimator-result {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4);
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-300);
}

.estimator-result i {
    font-size: 1.75rem;
    color: var(--color-gold);
    margin-top: var(--space-1);
}

.estimator-result__copy h3 {
    font-size: 1.1rem;
    margin-bottom: var(--space-2);
}

.estimator-result__copy p {
    color: var(--color-gray-600);
    font-size: 0.9rem;
    margin-bottom: var(--space-2);
}

.estimator-timeline {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-navy);
    background: rgba(200, 168, 110, 0.15);
    padding: 2px 10px;
    border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
    .composer-flow__connector {
        animation: none;
    }
}

/* ==========================================================================
   12. Products page — RAG search playground
   ========================================================================== */
.rag-section {
    background-color: var(--color-off-white);
}

.rag-playground {
    max-width: 980px;
    margin-inline: auto;
    background: var(--color-panel);
    border: 1px solid rgba(0, 229, 255, 0.15);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.rag-playground__controls {
    padding: var(--space-4) var(--space-4) 0;
}

.rag-field {
    display: block;
    max-width: 320px;
}

.rag-field > span {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-gold-hero);
    margin-bottom: var(--space-2);
}

.rag-field select {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: var(--color-void);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sm);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 0.9rem;
}

.rag-custom-text {
    width: 100%;
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: var(--color-void);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sm);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 0.9rem;
    resize: vertical;
}

.rag-playground__grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-4);
    padding: var(--space-4);
}

.rag-document {
    padding: var(--space-4);
    background: var(--color-void);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    color: var(--color-gray-300);
    font-size: 0.95rem;
    line-height: 1.7;
    max-height: 320px;
    overflow-y: auto;
}

.rag-sentence {
    transition: background-color 0.3s ease, color 0.3s ease;
    border-radius: 3px;
    padding: 0 2px;
}

.rag-sentence--match-1 {
    background-color: rgba(0, 229, 255, 0.22);
    color: var(--color-white);
    box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.3);
}

.rag-sentence--match-2 {
    background-color: rgba(0, 229, 255, 0.12);
    color: var(--color-white);
}

.rag-sentence--match-3 {
    background-color: rgba(200, 168, 110, 0.12);
}

.rag-answer {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.rag-ask {
    display: flex;
    gap: var(--space-2);
}

.rag-ask input {
    flex: 1;
    padding: var(--space-3);
    background: var(--color-void);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sm);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 0.9rem;
}

.rag-ask input:focus {
    outline: none;
    border-color: var(--color-cyan);
    box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.15);
}

.rag-ask .btn {
    white-space: nowrap;
}

.rag-answer .terminal {
    flex: 1;
}

.rag-answer .terminal__lines {
    min-height: 160px;
}

.rag-score-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.rag-score-bar {
    flex: 1;
    height: 6px;
    margin-left: var(--space-2);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
}

.rag-score-bar__fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--color-gold-hero), var(--color-cyan));
}

.rag-playground__instructions {
    list-style: decimal;
    padding: var(--space-4) var(--space-5);
    color: var(--color-gray-300);
    font-size: 0.85rem;
    line-height: 1.7;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ----- "How this works" copy block ----- */
.how-it-works-copy {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
}

.how-it-works-copy p {
    margin-bottom: var(--space-3);
}

.how-it-works-copy a {
    color: var(--color-navy);
    font-weight: 600;
    text-decoration: underline;
}


/* ==========================================================================
   13. Our Work — case studies index & detail
   ========================================================================== */
.our-work-section {
    background-color: var(--color-off-white);
}

.our-work-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.our-work-card {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
}

.our-work-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.our-work-card__media img {
    width: 100%;
    height: 100%;
    min-height: 240px;
    object-fit: cover;
    display: block;
}

.our-work-card__body {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.our-work-card__industry {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: var(--space-2);
}

.our-work-card__body h2 {
    font-size: 1.4rem;
    margin-bottom: var(--space-3);
}

.our-work-card__body h2 a {
    transition: var(--transition-base);
}

.our-work-card__body h2 a:hover {
    color: var(--color-gold);
}

.our-work-card__body p {
    color: var(--color-gray-600);
    margin-bottom: var(--space-3);
}

.our-work-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-navy);
}

.our-work-card__link:hover {
    color: var(--color-gold);
}

.resources-hub-card__latest {
    font-size: 0.85rem;
    color: var(--color-gray-600);
    margin-bottom: var(--space-3);
}

.resources-hub-card__latest strong {
    color: var(--color-navy);
}

/* ----- Case study detail hero ----- */
.case-study-hero {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    padding-block: var(--space-5);
}

.case-study-hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.case-study-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(6, 8, 16, 0.95) 0%, rgba(6, 8, 16, 0.55) 60%, rgba(6, 8, 16, 0.25) 100%);
}

.case-study-hero__content {
    position: relative;
    z-index: 1;
    max-width: 760px;
}

.case-study-hero__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-gray-300);
    font-size: 0.85rem;
    margin-bottom: var(--space-4);
    transition: var(--transition-base);
}

.case-study-hero__back:hover {
    color: var(--color-gold-hero);
}

.case-study-hero__content .eyebrow {
    color: var(--color-gold-hero);
}

.case-study-hero__content h1 {
    color: var(--color-white);
    margin-bottom: var(--space-2);
}

.case-study-hero__client {
    color: var(--color-gray-300);
    font-size: 1rem;
}

/* ----- Case study body ----- */
.case-study-body__grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: var(--space-6);
    align-items: start;
}

.case-study-content h2 {
    font-size: 1.4rem;
    margin-top: var(--space-5);
    margin-bottom: var(--space-3);
}

.case-study-content p {
    margin-bottom: var(--space-3);
}

.case-study-content ul {
    list-style: disc;
    padding-left: var(--space-4);
    margin-bottom: var(--space-4);
    color: var(--color-gray-600);
}

.case-study-content li {
    margin-bottom: var(--space-2);
}

.case-study-sidebar {
    position: sticky;
    top: calc(var(--space-4) + 72px);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.case-study-sidebar__card {
    padding: var(--space-4);
    background-color: var(--color-off-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
}

.case-study-sidebar__label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: var(--space-2);
}

.case-study-sidebar__card p {
    color: var(--color-gray-600);
    font-size: 0.9rem;
}

.case-study-sidebar__card--cta {
    background: linear-gradient(160deg, var(--color-navy), var(--color-navy-light));
    border-color: transparent;
}

.case-study-sidebar__card--cta .case-study-sidebar__label {
    color: var(--color-gold-hero);
}

.case-study-sidebar__card--cta p {
    color: var(--color-gray-300);
    margin-bottom: var(--space-3);
}

/* ==========================================================================
   14. Responsive
   ========================================================================== */
   ========================================================================== */
@media (max-width: 900px) {
    .value-prop__grid {
        grid-template-columns: 1fr;
    }

    .our-work-card {
        grid-template-columns: 1fr;
    }

    .our-work-card__media img {
        min-height: 200px;
    }

    .case-study-body__grid {
        grid-template-columns: 1fr;
    }

    .case-study-sidebar {
        position: static;
    }

    .rag-playground__grid {
        grid-template-columns: 1fr;
    }

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

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

    .insight-grid {
        grid-template-columns: 1fr;
    }

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

    .mission-vision-grid {
        grid-template-columns: 1fr;
    }

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

    .principles-grid {
        grid-template-columns: 1fr;
    }

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

    .corporate-info-grid {
        grid-template-columns: 1fr;
    }

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

    .estimator-console {
        grid-template-columns: 1fr;
    }

    .constellation {
        max-width: 460px;
    }
}

@media (max-width: 560px) {
    .tech-marquee__item {
        padding-inline: var(--space-3);
        font-size: 0.75rem;
    }

    .startup-india-badge {
        flex-direction: column;
    }

    .rag-ask {
        flex-direction: column;
    }

    .rag-ask .btn {
        width: 100%;
    }

    .about-hero__stats {
        grid-template-columns: 1fr;
    }

    .values-grid {
        grid-template-columns: 1fr;
    }

    .leadership-grid {
        grid-template-columns: 1fr;
    }

    .composer-options {
        grid-template-columns: 1fr;
    }

    .composer-console__progress {
        padding: var(--space-3) var(--space-4) 0;
    }

    .composer-progress-node__label {
        display: none;
    }

    .composer-flow {
        gap: var(--space-1);
    }

    .composer-flow__node {
        width: 68px;
        font-size: 0.6rem;
    }

    .composer-flow__connector {
        min-width: 12px;
        max-width: 24px;
    }

    .constellation {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr);
        max-width: 320px;
    }

    .constellation__hub {
        grid-column: 1 / span 2;
        grid-row: 1;
        aspect-ratio: auto;
        padding: var(--space-3);
    }

    .constellation__node--crm { grid-column: 1; grid-row: 2; }
    .constellation__node--erp { grid-column: 2; grid-row: 2; }
    .constellation__node--support { grid-column: 1; grid-row: 3; }
    .constellation__node--payments { grid-column: 2; grid-row: 3; }
    .constellation__node--analytics { grid-column: 1; grid-row: 4; }
    .constellation__node--messaging { grid-column: 2; grid-row: 4; }
    .empty-state {
        min-height: 320px;
    }

    .empty-state__content {
        padding: var(--space-4);
        max-width: none;
    }

    .empty-state__content h3 {
        font-size: 1.3rem;
    }

    .capability-grid {
        grid-template-columns: 1fr;
    }

    .capability-card {
        height: 220px;
    }

    .impact-stats__grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .value-prop__stat {
        position: static;
        margin-top: var(--space-3);
        max-width: none;
    }

    .quote-form {
        padding: var(--space-4);
    }

    .quote-console__progress {
        padding: var(--space-3) var(--space-4) 0;
    }

    .quote-progress-node__label {
        display: none;
    }

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

    .quote-field-row {
        grid-template-columns: 1fr;
    }

    .quote-nav {
        flex-wrap: wrap;
        gap: var(--space-2);
    }
}

/* ----- Large displays (above ~1080p) ----- */
/* Large displays get a progressively wider column instead of one abrupt jump
   at 1921px — that single breakpoint widened .container sitewide but then
   re-narrowed .value-prop__grid/.capability-grid/.insight-grid back down to
   1300px *inside* that already-wider container, which is what made every
   contained section from "From the team" downward look squeezed relative to
   the full-bleed photo bands beside them. These sections now simply use the
   full container width at each tier instead of fighting it. */
@media (min-width: 1600px) {
    :root {
        --container-max: 1360px;
    }
}

@media (min-width: 1921px) {
    :root {
        --container-max: 1600px;
    }

    .pipeline-rail,
    .pipeline-stage {
        max-width: 1360px;
    }

    .console-intro {
        max-width: 800px;
    }

    .pipeline-panel__demo {
        min-height: 320px;
    }

    .capability-grid {
        gap: var(--space-5);
    }

    .quote-console {
        max-width: 1000px;
    }
}

@media (min-width: 2560px) {
    :root {
        --container-max: 1800px;
    }
}

/* ----- Respect reduced-motion preferences ----- */
@media (prefers-reduced-motion: reduce) {
    .capability-card__inner {
        transition: none;
    }

    .case-card__result {
        transition: none;
    }
}