/* ==========================================================================
   SOFTWARE DEVELOPMENT page (/software-development-company-australia)
   Dark page with light, rounded panels laid over it.
   Prefixes: sx- (design system, Why panel, FAQ accordion),
   sc- (page sections). Pairs with Assets/js/software.js.
   ========================================================================== */

/* ---- Design system ---- */
.sx-page {
    --sx-bg: #07080c;
    --sx-surface: #0e1016;
    --sx-surface-2: #14161e;
    --sx-line: rgba(255, 255, 255, 0.08);
    --sx-line-strong: rgba(255, 255, 255, 0.22);
    --sx-text: #f5f5f7;
    --sx-text-2: rgba(245, 245, 247, 0.7);
    --sx-text-3: rgba(245, 245, 247, 0.46);
    --sx-accent: #c9a0e8;
    --sx-grad: linear-gradient(135deg, #7b1fa2 0%, #5f0a87 45%, #2c73d2 100%);

    --sx-display: var(--font-primary, "Livvic", sans-serif);
    --sx-body: var(--font-secondary, "Lexend", sans-serif);
    --sx-mono: "Roboto Mono", ui-monospace, monospace;

    --sx-h1: clamp(3rem, 1.2rem + 5.6vw, 7.25rem);
    --sx-h2: clamp(2.5rem, 1.5rem + 3.8vw, 5.25rem);
    --sx-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);

    --sx-gutter: clamp(20px, 4vw, 64px);
    --sx-ease: cubic-bezier(0.22, 1, 0.36, 1);

    position: relative;
    background: var(--sx-bg);
    color: var(--sx-text);
    font-family: var(--sx-body);
    overflow-x: clip;
}

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

.sx-page h1,
.sx-page h2,
.sx-page h3,
.sx-page p,
.sx-page ul,
.sx-page ol,
.sx-page figure { margin: 0; }

.sx-page ul,
.sx-page ol { padding: 0; list-style: none; }

.sx-page p { color: var(--sx-text-2); }

.sx-shell {
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 var(--sx-gutter);
}


.sx-page {
    --sx-gutter: clamp(24px, 6vw, 120px);
    --sx-h1: clamp(2.75rem, 1rem + 4.6vw, 5.75rem);
    --sx-h2: clamp(2.25rem, 1.2rem + 3vw, 4.25rem);
}

.sx-shell { max-width: 1600px; }

/* Scroll reveal (JS adds .sx-ready; content is visible without JS) */
.sx-page.sx-ready [data-sx-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1s ease, transform 1.2s var(--sx-ease);
}

.sx-page.sx-ready [data-sx-reveal].is-in {
    opacity: 1;
    transform: none;
}

/* ---- FAQ accordion ---- */
.sx-acc__btn:focus-visible {
    outline: 2px solid var(--sx-accent);
    outline-offset: 4px;
}

.sx-acc { border-top: 1px solid var(--sx-line); }

.sx-acc__item { border-bottom: 1px solid var(--sx-line); }

.sx-acc__heading { margin: 0; }

.sx-acc__btn {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px;
    gap: 32px;
    align-items: center;
    width: 100%;
    padding: 32px 0;
    border: 0;
    background: none;
    text-align: left;
    font-family: var(--sx-display);
    font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
    font-weight: 600;
    line-height: 1.35;
    color: var(--sx-text);
    cursor: pointer;
}

.sx-acc__icon {
    position: relative;
    width: 24px;
    height: 24px;
}

.sx-acc__icon::before,
.sx-acc__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 4px;
    right: 4px;
    height: 1.5px;
    background: var(--sx-text-2);
    transition: transform 0.5s var(--sx-ease);
}

.sx-acc__icon::after { transform: rotate(90deg); }

.sx-acc__btn[aria-expanded="true"] .sx-acc__icon::after { transform: rotate(0deg); }

.sx-acc__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.6s var(--sx-ease);
}

.sx-acc__item.is-open .sx-acc__panel { grid-template-rows: 1fr; }

.sx-acc__inner { overflow: hidden; }

.sx-acc__inner p {
    max-width: 620px;
    padding-bottom: 36px;
    font-size: 1rem;
    line-height: 1.75;
}

/* ==========================================================================
   WHY CHOOSE VETORA panel (partials/software-why): white rounded panel
   (pattern: a light "card" that overlaps the sections above and below)
   ========================================================================== */
.sx-why {
    --sx-why-ink: #10132a;
    --sx-why-ink-2: #4b5068;
    --sx-why-mute: #c9ccd9;
    --sx-why-line: #e7e9f0;

    position: relative;
    z-index: 2;
    margin: -64px 0 !important;
    padding: clamp(110px, 14vh, 160px) 0 clamp(140px, 18vh, 200px);
    border-radius: 32px;
    background: #fff;
    color: var(--sx-why-ink);
}

.sx-why p { color: var(--sx-why-ink-2); }

/* Intro row: small kicker left, large two-tone heading right */
.sx-why__intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 120px);
    align-items: start;
    margin-bottom: clamp(120px, 16vh, 200px);
}

.sx-why__kicker {
    font-family: var(--sx-display);
    font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem);
    font-weight: 600;
    line-height: 1.35;
    color: var(--sx-why-ink) !important;
}

.sx-why__title {
    font-family: var(--sx-display);
    font-size: clamp(2.5rem, 1.4rem + 3.6vw, 5rem);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.035em;
    color: var(--sx-why-ink);
}

.sx-why__title span {
    display: block;
    background: var(--gradient-primary, linear-gradient(135deg, #5f0a87, #2c73d2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Two columns: sticky topics left, cards right */
.sx-why__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 120px);
    align-items: start;
}

.sx-why__side { align-self: stretch; }

.sx-why__sticky {
    position: sticky;
    top: 140px;
}

.sx-why__label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 48px !important;
    font-family: var(--sx-mono);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sx-why-ink) !important;
}

.sx-why__label i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary, #5f0a87);
}

.sx-why__nav li + li { margin-top: 6px; }

.sx-why__link {
    display: inline-block;
    font-family: var(--sx-display);
    font-size: clamp(1.75rem, 1.2rem + 1.7vw, 3rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: var(--sx-why-mute) !important;
    text-decoration: none;
    transition: color 0.4s ease;
}

.sx-why__link:hover,
.sx-why__link.is-active { color: var(--sx-why-ink) !important; }

.sx-why__link:focus-visible {
    outline: 2px solid var(--primary, #5f0a87);
    outline-offset: 4px;
}

/* Cards */
.sx-why__cards { display: grid; gap: clamp(96px, 13vh, 160px); }

.sx-why-card__stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 7 / 6;
    padding: clamp(24px, 3.5vw, 48px);
    border-radius: 24px;
    overflow: hidden;
    background: #f1f2f7;
}

.sx-why-card__stage--fast,
.sx-why-card__stage--code {
    background:
        radial-gradient(120% 90% at 85% 10%, rgba(44, 115, 210, 0.55) 0%, rgba(44, 115, 210, 0) 55%),
        radial-gradient(110% 90% at 10% 100%, rgba(123, 31, 162, 0.85) 0%, rgba(123, 31, 162, 0) 60%),
        #1a0a2b;
}

.sx-why-card__body { padding-top: 36px; }

.sx-why-card__title {
    margin: 0 0 16px;
    font-family: var(--sx-display);
    font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2.125rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--sx-why-ink);
}

.sx-why .sx-why-card__title { margin: 0 0 16px; }

.sx-why-card__body p {
    max-width: 520px;
    font-size: 1.0625rem;
    line-height: 1.75;
}

/* ---- Stage visuals ---- */
.sx-wv-panel {
    width: 100%;
    max-width: 460px;
    padding: 28px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--sx-why-line);
    box-shadow: 0 30px 60px -30px rgba(16, 19, 42, 0.25);
}

.sx-wv-panel--glass {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.sx-why .sx-wv-panel__head {
    margin: 0 0 20px;
    font-family: var(--sx-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sx-why-ink) !important;
}

.sx-wv-panel__top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.sx-wv-panel__top .sx-wv-panel__head { margin: 0; }

.sx-wv-track {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) 82px;
    gap: 14px;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid var(--sx-why-line);
    font-size: 0.8125rem;
}

.sx-wv-track__name { font-weight: 600; color: var(--sx-why-ink); }

.sx-wv-track__bar {
    height: 4px;
    border-radius: 4px;
    background: var(--sx-why-line);
    overflow: hidden;
}

.sx-wv-track__bar i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--gradient-primary, linear-gradient(90deg, #5f0a87, #2c73d2));
}

.sx-wv-track.is-done .sx-wv-track__bar i { width: 100%; }
.sx-wv-track.is-live .sx-wv-track__bar i { width: 60%; }

.sx-wv-track__state { text-align: right; white-space: nowrap; color: var(--sx-why-ink-2); }
.sx-wv-track.is-live .sx-wv-track__state { color: var(--primary, #5f0a87); font-weight: 600; }

/* Architecture diagram */
.sx-wv-arch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    width: 100%;
}

.sx-wv-arch__row,
.sx-wv-arch__clouds {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.sx-wv-node {
    position: relative;
    padding: 14px 20px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--sx-why-line);
    box-shadow: 0 12px 24px -16px rgba(16, 19, 42, 0.3);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sx-why-ink);
}

.sx-wv-node--core {
    padding: 16px 40px;
    background: var(--gradient-primary, linear-gradient(135deg, #5f0a87, #2c73d2));
    border-color: transparent;
    color: #fff;
}

/* Short connectors above and below the core node */
.sx-wv-node--core::before,
.sx-wv-node--core::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 1px;
    height: 22px;
    background: #b8bccb;
}

.sx-wv-node--core::before { bottom: 100%; }
.sx-wv-node--core::after { top: 100%; }

.sx-wv-chip {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid #d5d8e3;
    font-family: var(--sx-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sx-why-ink-2);
}

.sx-wv-chip--dark {
    background: var(--sx-why-ink);
    border-color: var(--sx-why-ink);
    color: #fff;
}

/* Terminal */
.sx-wv-term {
    width: 100%;
    max-width: 480px;
    border-radius: 16px;
    background: rgba(9, 10, 18, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
    overflow: hidden;
}

.sx-wv-term__bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-family: var(--sx-mono);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.sx-wv-term__bar span { display: inline-flex; gap: 6px; }
.sx-wv-term__bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); }

.sx-wv-term__body { padding: 22px 22px 26px; }

.sx-why .sx-wv-term__body p {
    margin: 0;
    padding: 4px 0;
    font-family: var(--sx-mono);
    font-size: 0.8125rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}

.sx-wv-term__body b { color: #c9a0e8; font-weight: 400; }

.sx-why .sx-wv-term__body p.is-ok { padding-left: 22px; color: rgba(255, 255, 255, 0.6); position: relative; }

.sx-wv-term__body p.is-ok::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 50%;
    width: 9px;
    height: 5px;
    border-left: 1.5px solid #3ecf8e;
    border-bottom: 1.5px solid #3ecf8e;
    transform: translateY(-70%) rotate(-45deg);
}

.sx-wv-term__cursor span {
    display: inline-block;
    width: 8px;
    height: 15px;
    background: rgba(255, 255, 255, 0.7);
    vertical-align: middle;
}

/* Observability */
.sx-wv-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #ecfbf3;
    font-size: 0.75rem;
    font-weight: 600;
    color: #13804f;
}

.sx-wv-pill i,
.sx-wv-status__ok i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22b573;
}

.sx-wv-chart {
    display: block;
    width: 100%;
    height: 110px;
    margin: 8px 0 12px;
}

.sx-wv-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 0;
    border-top: 1px solid var(--sx-why-line);
    font-size: 0.8125rem;
    color: var(--sx-why-ink);
}

.sx-wv-status__ok {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--sx-why-ink-2);
}

@media (max-width: 991px) {
    .sx-why { border-radius: 24px; }
    .sx-why__intro,
    .sx-why__grid { grid-template-columns: minmax(0, 1fr); }
    .sx-why__intro { gap: 28px; margin-bottom: 80px; }
    .sx-why__side { display: none; }
    .sx-why-card__stage { aspect-ratio: auto; min-height: 360px; }
}

@media (max-width: 767px) {
    .sx-why { margin: -40px 0 !important; padding: 88px 0 112px; }
    .sx-why__cards { gap: 80px; }
    .sx-why-card__stage { padding: 20px; min-height: 320px; }
    .sx-wv-panel { padding: 20px; }
    .sx-wv-track { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 10px; }
    .sx-wv-node { padding: 12px 14px; font-size: 0.8125rem; }
}

.sc-page {
    --sc-ink: #141b4d;
    --sc-ink-2: #3d4670;
    --sc-panel: #eef1f6;
    --sc-card: #dfe5ee;
    --sc-rule: #cfd6e4;
    --sc-grad-light: linear-gradient(90deg, #c77dff 0%, #7aa7ff 100%);
    --sc-grad-dark: var(--gradient-primary, linear-gradient(135deg, #5f0a87 0%, #2c73d2 100%));
    --sc-radius: 32px;
}

/* ---- Shared type + controls ---- */
.sc-grad {
    background: var(--sc-grad-light);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sc-panel .sc-grad,
.sc-caps .sc-grad { background-image: var(--sc-grad-dark); }

.sc-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--sx-mono);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sc-ink) !important;
}

.sc-label i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.sc-label--light { color: #fff !important; }

.sc-h2 {
    font-family: var(--sx-display);
    font-size: clamp(2.5rem, 1.3rem + 3.7vw, 5rem);
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -0.03em;
    color: var(--sc-ink);
}

.sc-h2--light { color: #fff; }

.sc-h3 {
    font-family: var(--sx-display);
    font-size: clamp(1.75rem, 1.3rem + 1.3vw, 2.5rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--sc-ink);
}

.sc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.sc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 22px;
    border-radius: 6px;
    font-family: var(--sx-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.4s var(--sx-ease), filter 0.3s ease, background-color 0.3s ease;
}

.sc-btn:hover { transform: translateY(-2px); }

.sc-btn--primary {
    background: var(--sc-grad-dark);
    color: #fff !important;
}

.sc-btn--primary:hover { filter: brightness(1.15); }

.sc-btn--dark {
    background: rgba(24, 14, 38, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff !important;
}

.sc-btn--dark:hover { background: rgba(40, 24, 62, 0.95); }

.sc-btn--light {
    background: #fff;
    color: var(--sc-ink) !important;
}

.sc-btn:focus-visible,
.sc-arrow:focus-visible,
.sc-seg__btn:focus-visible,
.sc-usecase__link:focus-visible,
.sc-cases__viewport:focus-visible,
.sc-video-toggle:focus-visible {
    outline: 2px solid #c77dff;
    outline-offset: 3px;
}

/* Dotted field (star-grid texture) */
.sc-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 46%;
    background-image: radial-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1.6px);
    background-size: 75px 75px;
    background-position: 37px 0;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 30%);
    pointer-events: none;
}

/* ==========================================================================
   1. HERO
   ========================================================================== */
.sc-hero {
    position: relative;
    padding: calc(100vh - 420px) 0 clamp(150px, 20vh, 220px); /* section 2 (dark) follows; no overlapping panel here */
    min-height: 100vh;
    isolation: isolate;
    overflow: hidden;
}

.sc-hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.sc-hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% center;
}

/* Keep the top-left dark for the headline, ribbons glowing on the right */
.sc-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 55% at 0% 0%, rgba(7, 8, 12, 0.92) 0%, rgba(7, 8, 12, 0) 70%),
        linear-gradient(90deg, rgba(7, 8, 12, 0.72) 0%, rgba(7, 8, 12, 0.25) 45%, rgba(7, 8, 12, 0) 100%);
}

/* Let the ribbons glow a little more than the encoded file */
.sc-hero > .sc-hero__media .sc-hero__video,
.sc-cta > .sc-hero__media .sc-hero__video { filter: brightness(1.25) saturate(1.1); }

.sc-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    align-items: end;
    gap: 48px;
}

.sc-hero__title {
    font-family: var(--sx-display);
    font-size: clamp(2.875rem, 1rem + 5vw, 6rem);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -0.035em;
    color: #fff;
}

.sc-hero__aside p {
    margin-bottom: 32px !important;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Client logos: continuous strip under a hairline */
.sc-logos {
    margin-top: clamp(96px, 14vh, 150px);
    padding-top: clamp(56px, 8vh, 88px);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.sc-logos__track {
    display: flex;
    width: max-content;
    animation: sc-marquee 60s linear infinite;
}

.sc-logos:hover .sc-logos__track { animation-play-state: paused; }

@keyframes sc-marquee {
    to { transform: translateX(-50%); }
}

.sc-logos__list {
    display: flex;
    align-items: center;
    gap: clamp(56px, 6vw, 96px);
    padding-right: clamp(56px, 6vw, 96px) !important;
}

.sc-logo {
    display: block;
    width: auto;
    height: 44px;
    max-width: 170px;
    object-fit: contain;
    opacity: 0.92;
}

/* Optical sizing: very wide wordmarks shorter, compact marks taller */
.sc-logo--ganesh,
.sc-logo--cureskin,
.sc-logo--abi,
.sc-logo--ride,
.sc-logo--madura { height: 34px; }

.sc-logo--allo,
.sc-logo--qrooze,
.sc-logo--allswell { height: 52px; }

.sc-video-toggle {
    position: absolute;
    top: 120px;
    right: var(--sx-gutter);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(7, 8, 12, 0.4);
    color: #fff;
    cursor: pointer;
}

.sc-video-toggle svg { width: 16px; height: 16px; }

/* ==========================================================================
   2. WHY PANEL: tuned to the reference (lighter weights, navy ink)
   ========================================================================== */
.sc-page .sx-why {
    --sx-why-ink: var(--sc-ink);
    --sx-why-ink-2: var(--sc-ink-2);
    --sx-why-mute: #c7cde3;
    border-radius: var(--sc-radius);
}

.sc-page .sx-why__title,
.sc-page .sx-why__link,
.sc-page .sx-why__kicker,
.sc-page .sx-why .sx-why-card__title { font-weight: 400; }

.sc-page .sx-why__title span { background-image: var(--sc-grad-dark); }

/* Two-line heading like the reference */
.sc-page .sx-why__title { font-size: clamp(2.5rem, 1.2rem + 3.3vw, 4.5rem); }
@media (min-width: 992px) {
    .sc-page .sx-why__intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
}

/* ==========================================================================
   3 + 4. DARK STAGE with the sphere (Security + Built with Vetora)
   ========================================================================== */
.sc-stage {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(90% 60% at 50% 100%, rgba(95, 10, 135, 0.45) 0%, rgba(95, 10, 135, 0) 70%),
        var(--sx-bg);
}

.sc-dots--stage { height: 70%; opacity: 0.6; z-index: -1; }

.sc-sphere {
    position: absolute;
    top: clamp(260px, 30vh, 360px);
    left: 50%;
    z-index: -1;
    --sc-sphere: min(1080px, 92vw);
    width: var(--sc-sphere);
    aspect-ratio: 1;
    margin-left: calc(var(--sc-sphere) / -2); /* centred without transform (GSAP animates it) */
    pointer-events: none;
}

.sc-sphere__ball {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient(circle at 50% 42%, rgba(120, 40, 170, 0.32) 0%, rgba(40, 10, 60, 0.55) 55%, rgba(12, 6, 20, 0.35) 100%);
    border: 1px solid rgba(199, 125, 255, 0.35);
    box-shadow:
        inset 0 0 90px rgba(199, 125, 255, 0.28),
        inset 0 0 18px rgba(199, 125, 255, 0.35),
        0 0 140px rgba(95, 10, 135, 0.35);
}

.sc-sphere__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.42;
    mix-blend-mode: screen;
    transform: scale(0.82) rotate(-18deg);
}

/* Glowing orbit ring across the sphere */
.sc-sphere__ring {
    position: absolute;
    top: 38%;
    left: -6%;
    width: 112%;
    height: 26%;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: rgba(214, 160, 255, 0.95);
    border-left-color: rgba(214, 160, 255, 0.4);
    box-shadow: 0 -10px 30px -12px rgba(199, 125, 255, 0.7);
    transform: rotate(-34deg);
}

.sc-sphere__chip {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background: var(--sc-grad-light);
    opacity: 0.85;
    box-shadow: 0 0 24px rgba(199, 125, 255, 0.55);
}

/* ---- 3. Security ---- */
.sc-security { padding: calc(64px + clamp(110px, 14vh, 150px)) 0 clamp(140px, 22vh, 260px); }

.sc-security__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(48px, 6vw, 120px);
    align-items: start;
}

.sc-security__head .sc-label { margin-bottom: clamp(48px, 7vh, 72px) !important; }

.sc-security__head .sc-h2 { max-width: 11ch; }

.sc-security__head .sc-actions { margin-top: 48px; }

.sc-security__list { display: grid; gap: clamp(44px, 6vh, 64px); }

.sc-security__list h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    font-family: var(--sx-display);
    font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: #fff;
}

.sc-security__list h3 svg {
    flex: none;
    width: 26px;
    height: 26px;
    color: #fff;
}

.sc-security__list p {
    max-width: 460px;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.76) !important;
}

/* ---- 4. Built with Vetora ---- */
.sc-built { padding: clamp(160px, 26vh, 300px) 0 calc(64px + clamp(140px, 20vh, 220px)); }

.sc-built__title { text-align: center; font-size: clamp(2.25rem, 1.4rem + 2.4vw, 3.5rem); }

.sc-seg {
    display: flex;
    width: max-content;
    max-width: 100%;
    margin: 40px auto 72px;
    padding: 5px;
    border-radius: 8px;
    background: var(--sc-panel);
}

.sc-seg__btn {
    padding: 12px 22px;
    border: 0;
    border-radius: 5px;
    background: none;
    font-family: var(--sx-body);
    font-size: 1rem;
    color: var(--sc-ink);
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.sc-seg__btn.is-active {
    background: var(--primary, #5f0a87);
    color: #fff;
}

.sc-built__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 1160px;
    margin: 0 auto;
}

.sc-built__grid:not([hidden]) { animation: sc-fade 0.6s var(--sx-ease); }

@keyframes sc-fade {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

.sc-usecase {
    display: grid;
    grid-template-columns: 136px minmax(0, 1fr);
    gap: 18px;
    padding: 16px;
    border-radius: 8px;
    background: var(--sc-panel);
}

.sc-usecase__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border-radius: 6px;
    background: #d6dcea;
    color: var(--sc-ink);
}

.sc-usecase__icon svg { width: 46px; height: 46px; }

.sc-usecase__body {
    display: flex;
    flex-direction: column;
    padding-top: 4px;
}

.sc-usecase__body h3 {
    margin: 0 0 8px;
    font-family: var(--sx-display);
    font-size: 1.375rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--sc-ink);
}

.sc-usecase__body p {
    margin-bottom: 18px !important;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--sc-ink-2) !important;
}

.sc-usecase__link {
    margin-top: auto;
    align-self: flex-start;
    font-family: var(--sx-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sc-ink-2) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sc-usecase__link:hover { color: var(--primary, #5f0a87) !important; }

/* ==========================================================================
   5-7. LIGHT PANEL
   ========================================================================== */
.sc-panel {
    position: relative;
    z-index: 2;
    margin: -64px 0 !important;
    padding: clamp(110px, 14vh, 150px) 0 clamp(140px, 18vh, 200px);
    border-radius: var(--sc-radius);
    background: var(--sc-panel);
    color: var(--sc-ink);
}

.sc-panel p { color: var(--sc-ink-2); }

/* ---- 5. Cases carousel ---- */
.sc-cases__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
    margin-bottom: clamp(56px, 8vh, 80px);
}

.sc-cases__head .sc-h2 { max-width: 15ch; }

.sc-arrows { display: flex; gap: 6px; flex: none; }

.sc-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border: 0;
    border-radius: 6px;
    background: #fff;
    color: var(--sc-ink);
    cursor: pointer;
    transition: opacity 0.3s ease, background-color 0.3s ease;
}

.sc-arrow svg { width: 20px; height: 20px; }
.sc-arrow svg.is-flip { transform: scaleX(-1); }
.sc-arrow:disabled { opacity: 0.45; cursor: default; }
.sc-arrow:not(:disabled):hover { background: var(--sc-card); }

.sc-cases__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--sx-gutter);
    scrollbar-width: none;
}

.sc-cases__viewport::-webkit-scrollbar { display: none; }

.sc-cases__track {
    display: flex;
    gap: 16px;
    width: max-content;
    padding: 0 var(--sx-gutter) !important;
}

@media (min-width: 1600px) {
    .sc-cases__track { padding-left: calc((100vw - 1600px) / 2 + var(--sx-gutter)) !important; }
    .sc-cases__viewport { scroll-padding-left: calc((100vw - 1600px) / 2 + var(--sx-gutter)); }
}

.sc-case {
    display: flex;
    flex-direction: column;
    width: clamp(290px, 31vw, 464px);
    min-height: clamp(480px, 62vh, 616px);
    padding: 20px;
    border-radius: 10px;
    background: var(--sc-card);
    scroll-snap-align: start;
}

.sc-case__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    min-height: 18px;
    font-family: var(--sx-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sc-ink-2);
}

.sc-case__img {
    flex: 1;
    display: flex;
    align-items: center;
    margin: 24px 0 28px !important;
}

.sc-case__img img {
    width: 100%;
    height: auto; /* the height="1000" attribute would otherwise beat aspect-ratio */
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top center;
    border-radius: 6px;
    transition: transform 1s var(--sx-ease);
}

.sc-case:hover .sc-case__img img { transform: scale(1.03); }

.sc-case__title {
    margin: 0 0 20px;
    font-family: var(--sx-display);
    font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem);
    font-weight: 400;
    line-height: 1.3;
    color: var(--sc-ink);
}

.sc-case__foot { font-size: 0.875rem; color: var(--sc-ink-2); }

/* The title link stretches over the whole card, so the card is one click
   target that opens the case study. */
.sc-case { position: relative; }

.sc-case__link {
    color: inherit;
    text-decoration: none;
}

.sc-case__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.sc-case__link:hover,
.sc-case__link:focus { color: inherit; }

.sc-case:hover .sc-case__title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

.sc-case__link:focus-visible { outline: none; }

.sc-case:has(.sc-case__link:focus-visible) {
    outline: 2px solid var(--sc-ink);
    outline-offset: 3px;
}

/* ---- 6. Features ---- */
.sc-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: clamp(32px, 4vw, 64px);
    align-items: start;
}

.sc-split__head .sc-label { margin-bottom: 24px !important; }

.sc-split__head .sc-h3 { max-width: 15ch; font-size: clamp(1.5rem, 1.25rem + 0.7vw, 2rem); }

.sc-features__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
}

.sc-features__list li {
    position: relative;
    padding: 22px 32px 22px 0;
    border-bottom: 1px solid var(--sc-rule);
    font-family: var(--sx-display);
    font-size: clamp(1.125rem, 1rem + 0.45vw, 1.5rem);
    color: var(--sc-ink);
}

.sc-features__list li::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--sc-grad-dark);
    transform: translateY(-50%);
}

/* ---- 7. FAQ ---- */
.sc-faq { margin-top: 0; }

.sc-faq__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 48px;
}

.sc-faq__lead { max-width: 300px; font-size: 1.0625rem; line-height: 1.6; }

.sc-acc { border-top: 1px solid var(--sc-rule); }
.sc-acc .sx-acc__item { border-bottom-color: var(--sc-rule); }

.sc-acc .sx-acc__btn {
    padding: 26px 0;
    font-weight: 400;
    font-size: clamp(1.125rem, 1rem + 0.45vw, 1.5rem);
    color: var(--sc-ink);
}

.sc-acc .sx-acc__icon::before,
.sc-acc .sx-acc__icon::after { background: var(--sc-ink); }

.sc-acc .sx-acc__inner p {
    padding-bottom: 30px;
    color: var(--sc-ink-2) !important;
}

/* ==========================================================================
   8. CLOSING CTA
   ========================================================================== */
.sc-cta {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: max(720px, 100vh);
    padding: calc(64px + 120px) 0 clamp(120px, 16vh, 180px);
    isolation: isolate;
    overflow: hidden;
}

.sc-cta__inner {
    display: flex;
    justify-content: flex-end;
}

.sc-cta__box { max-width: 640px; }

.sc-cta__title {
    margin-bottom: 32px !important;
    font-family: var(--sx-display);
    font-size: clamp(1.875rem, 1.3rem + 1.6vw, 2.75rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #fff;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1199px) {
    .sc-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .sc-hero__aside { max-width: 480px; }
    .sc-hero { padding-top: 200px; }
}

@media (max-width: 991px) {
    .sc-security__grid,
    .sc-split { grid-template-columns: minmax(0, 1fr); }
    .sc-built__grid { grid-template-columns: minmax(0, 1fr); }
    .sc-sphere { --sc-sphere: 130vw; }
    .sc-page .sx-why,
    .sc-panel { border-radius: 24px; }
    .sc-cta__inner { justify-content: flex-start; }
}

@media (max-width: 767px) {
    .sc-hero { padding: 170px 0 120px; }
    .sc-hero__media::after {
        background: linear-gradient(180deg, rgba(7, 8, 12, 0.9) 0%, rgba(7, 8, 12, 0.55) 55%, rgba(7, 8, 12, 0.75) 100%);
    }
    .sc-video-toggle { top: 78px; }
    .sc-logo { height: 30px; max-width: 120px; }
    .sc-logo--allo, .sc-logo--qrooze, .sc-logo--allswell { height: 38px; }
    .sc-logo--ganesh, .sc-logo--cureskin, .sc-logo--abi, .sc-logo--ride, .sc-logo--madura { height: 24px; }

    .sc-panel { margin: -40px 0 !important; padding: 88px 0 112px; }
    .sc-security { padding-top: 150px; }
    .sc-built { padding-top: 120px; }
    .sc-seg__btn { padding: 10px 14px; font-size: 0.9375rem; }

    .sc-usecase { grid-template-columns: 84px minmax(0, 1fr); padding: 12px; }
    .sc-usecase__icon { align-self: start; }
    .sc-usecase__icon svg { width: 32px; height: 32px; }

    .sc-cases__head { flex-direction: column; align-items: flex-start; }
    .sc-case { width: 82vw; min-height: 440px; }
    .sc-features__list { grid-template-columns: minmax(0, 1fr); }
    .sc-faq__head { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .sc-logos__track { animation: none; }
    .sc-built__grid:not([hidden]) { animation: none; }
}

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

/* ==========================================================================
   2. BUSINESS CHALLENGES: accordion rows on the shared hero backdrop
   ========================================================================== */
.sc-chal {
    position: relative;
    padding: clamp(120px, 16vh, 180px) 0 calc(64px + clamp(140px, 20vh, 220px));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sc-chal__head {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 120px);
    align-items: end;
    margin-bottom: clamp(72px, 10vh, 112px);
}

.sc-chal__head .sc-label { margin-bottom: clamp(36px, 5vh, 56px) !important; }

.sc-chal__head .sc-h2 { max-width: 15ch; }

.sc-chal__lead {
    max-width: 420px;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.72) !important;
}

/* Accordion rows (pattern from the AI page's services list, adapted to this
   page): rows are see-through over the ribbon backdrop; the open row gets a
   frosted purple band, its photo slides in on the left, the bullets settle
   and the arrow fills. Opened on hover (desktop) or tap (touch) by software.js. */
.sc-chal__rows {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.sc-chal__row {
    display: flex;
    align-items: center;
    padding: 26px;
    border: 1px solid transparent;
    border-bottom-color: rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    cursor: pointer;
    transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.sc-chal__row.is-open {
    background-color: rgba(38, 16, 70, 0.55);
    border-color: rgba(199, 125, 255, 0.22);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

/* Everything except the photo; on desktop it simply repeats the row's flex
   layout, on smaller screens it stacks into one column */
.sc-chal__body {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

/* Photo: zero width until its row opens, then slides/fades in on the left */
.sc-chal__thumb {
    flex: 0 0 auto;
    width: 0;
    height: 118px;
    margin-right: 0;
    border-radius: 14px;
    overflow: hidden;
    opacity: 0;
    transition: width 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        margin-right 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity 0.4s ease;
}

.sc-chal__row.is-open .sc-chal__thumb {
    width: 186px;
    margin-right: 30px;
    opacity: 1;
}

.sc-chal__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sc-chal__num {
    flex: 0 0 auto;
    margin-right: 26px;
    font-family: var(--sx-display);
    font-size: 1.375rem;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.35s ease;
}

.sc-chal__row.is-open .sc-chal__num { color: #fff; }

/* Fixed basis so the bullet column lines up on every row */
.sc-chal__info {
    flex: 0 1 380px;
    min-width: 0;
}

.sc-page .sc-chal__title {
    margin: 0 0 12px;
    font-family: var(--sx-display);
    font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: #fff;
}

.sc-chal__info p {
    max-width: 340px;
    font-size: 1rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72) !important;
}

/* Equal flexible spacers either side of the bullets keep them centred
   between the text and the arrow; when the photo opens they shift right */
.sc-chal__gap {
    flex: 1 1 auto;
    min-width: 16px;
}

.sc-chal__tags {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 0 0 auto;
    width: 260px;
}

.sc-chal__tags li {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, 0.85);
    opacity: 0.82;
    transform: translateX(6px);
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.45s ease;
}

.sc-chal__row.is-open .sc-chal__tags li { opacity: 1; transform: none; }
.sc-chal__row.is-open .sc-chal__tags li:nth-child(1) { transition-delay: 0.05s; }
.sc-chal__row.is-open .sc-chal__tags li:nth-child(2) { transition-delay: 0.12s; }
.sc-chal__row.is-open .sc-chal__tags li:nth-child(3) { transition-delay: 0.19s; }

.sc-chal__tags em {
    font-style: normal;
    font-size: 1rem;
    line-height: 1;
    color: #c77dff;
    transition: transform 0.45s ease;
}

.sc-chal__row.is-open .sc-chal__tags em { transform: rotate(90deg); }

/* Decorative arrow: outlined circle; fills with the gradient on the open row */
.sc-chal__arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}

.sc-chal__arrow svg {
    width: 20px;
    height: 20px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sc-chal__row.is-open .sc-chal__arrow {
    background: var(--sc-grad-dark);
    border-color: transparent;
    box-shadow: 0 10px 26px rgba(95, 10, 135, 0.45);
    transform: translateX(-20px);
}

.sc-chal__row.is-open .sc-chal__arrow svg { transform: translate(2px, -2px); }

.sc-chal__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 32px;
    margin-top: clamp(48px, 7vh, 72px);
}

.sc-chal__foot p {
    font-family: var(--sx-display);
    font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem);
    color: #fff !important;
}

@media (max-width: 1199px) {
    .sc-chal__tags { width: 220px; }
    .sc-chal__tags li { font-size: 1rem; }
}

/* Tablet: photo always visible beside the content, which stacks in one column */
@media (max-width: 991px) {
    .sc-chal__head { grid-template-columns: minmax(0, 1fr); gap: 32px; }

    .sc-chal__row {
        align-items: flex-start;
        gap: 22px;
        padding: 20px;
    }

    .sc-chal__thumb,
    .sc-chal__row.is-open .sc-chal__thumb {
        width: 38%;
        height: 200px;
        margin-right: 0;
        opacity: 1;
    }

    .sc-chal__body { display: block; }

    .sc-chal__num {
        display: block;
        margin: 0 0 10px;
        font-size: 1.125rem;
    }

    .sc-chal__info { max-width: none; }
    .sc-chal__gap { display: none; }

    /* .sc-page prefix: beats the .sx-page ul { margin: 0 } reset */
    .sc-page .sc-chal__tags {
        width: auto;
        margin-top: 20px;
    }

    /* No hover here, so bullets sit in their final place on every row */
    .sc-chal__tags li { opacity: 1; transform: none; }

    .sc-chal__arrow,
    .sc-chal__row.is-open .sc-chal__arrow {
        width: 48px;
        height: 48px;
        margin-top: 18px;
        transform: none;
    }
}

/* Phone: photo on top, full width */
@media (max-width: 767px) {
    .sc-chal { padding-top: 96px; padding-bottom: calc(40px + 112px); }

    .sc-chal__row { flex-direction: column; gap: 18px; padding: 16px; }

    .sc-chal__thumb,
    .sc-chal__row.is-open .sc-chal__thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .sc-chal__foot { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .sc-chal__thumb { transition: opacity 0.3s ease; }
}
/* ==========================================================================
   Shared backdrop for Hero + Business challenges (.sc-intro)
   The ribbon video is sticky: it stays in view behind both sections while
   they scroll, so it keeps its framing instead of stretching to their height.
   ========================================================================== */
.sc-intro {
    position: relative;
    isolation: isolate;
}

.sc-intro__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.sc-intro__sticky.sc-hero__media {
    position: sticky;
    inset: 0 auto auto; /* top: 0 is what makes it stick */
    z-index: auto;
    height: 100vh;
    overflow: hidden;
}

.sc-intro__sticky .sc-hero__video { filter: brightness(1.25) saturate(1.1); }

/* Challenges: transparent over the backdrop, gently darkened for legibility */
.sc-chal {
    isolation: isolate;
    border-top: 0;
    background: linear-gradient(180deg, rgba(7, 8, 12, 0) 0%, rgba(7, 8, 12, 0.5) 18%, rgba(7, 8, 12, 0.62) 100%);
}

/* Like the Security stage: dots only in the open space below the content,
   fading in from above, so none sit behind the heading or the rows */
.sc-dots--chal {
    height: clamp(260px, 32vh, 360px);
    z-index: -1;
    opacity: 0.55;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 60%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 60%);
}

/* ==========================================================================
   3. DEVELOPMENT CAPABILITIES: white panel + bento grid of service tiles
   ========================================================================== */
.sc-caps {
    position: relative;
    z-index: 2;
    /* Overlaps the challenges backdrop above and the Built stage below */
    margin: -64px 0 !important;
    padding: clamp(110px, 14vh, 150px) 0 clamp(110px, 14vh, 150px);
    border-radius: var(--sc-radius);
    background: #fff;
    color: var(--sc-ink);
}


.sc-caps p { color: var(--sc-ink-2); }

.sc-caps__head {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 120px);
    align-items: end;
    margin-bottom: clamp(64px, 9vh, 96px);
}

.sc-caps__head .sc-label { margin-bottom: clamp(36px, 5vh, 56px) !important; }
.sc-caps__head .sc-h2 { max-width: 14ch; }

.sc-caps__lead {
    max-width: 400px;
    font-size: 1.0625rem;
    line-height: 1.65;
}

/* Bento: 6 columns. Row 1 = large (4) + tall (2); row 2 = three tiles (2 each);
   row 3 = one wide, short tile */
.sc-bento {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}

.sc-cap {
    display: flex;
    flex-direction: column;
    grid-column: span 2;
    padding: 14px;
    border-radius: 20px;
    background: var(--sc-panel);
    transition: transform 0.5s var(--sx-ease), box-shadow 0.5s var(--sx-ease);
}

.sc-cap:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 48px -28px rgba(20, 27, 77, 0.35);
}

.sc-cap--lg { grid-column: span 4; }

.sc-cap--wide {
    grid-column: span 6;
    flex-direction: row;
    align-items: stretch;
    gap: 14px;
}

.sc-cap__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    padding: 24px;
    border-radius: 14px;
    overflow: hidden;
    background:
        radial-gradient(90% 80% at 85% 0%, rgba(44, 115, 210, 0.12) 0%, rgba(44, 115, 210, 0) 60%),
        radial-gradient(80% 80% at 0% 100%, rgba(95, 10, 135, 0.1) 0%, rgba(95, 10, 135, 0) 60%),
        #e3e8f1;
}

.sc-cap--lg .sc-cap__visual { min-height: 340px; }

/* Tiles 01-05: a photo fills the visual area edge to edge */
.sc-cap__visual--photo {
    margin: 0;
    padding: 0;
    background: #1a0a2b;
}

.sc-cap__visual--photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%; /* beats the height attribute; the box sets the size */
    object-fit: cover;
}

/* Visual content scales up slightly on hover */
.sc-cap__visual > * { transition: transform 0.7s var(--sx-ease); }
.sc-cap:hover .sc-cap__visual > * { transform: scale(1.03); }

.sc-cap__body {
    display: flex;
    flex-direction: column;
    padding: 24px 10px 10px;
}

.sc-cap__num {
    margin-bottom: 14px;
    font-family: var(--sx-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--primary, #5f0a87);
}

.sc-page .sc-cap__body h3 {
    margin: 0 0 10px;
    font-family: var(--sx-display);
    font-size: clamp(1.375rem, 1.15rem + 0.6vw, 1.75rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--sc-ink);
}

.sc-cap__body p {
    max-width: 460px;
    margin-bottom: 18px !important;
    font-size: 1rem;
    line-height: 1.6;
}

.sc-cap__body .sc-usecase__link { margin-top: auto; }

.sc-cap--wide .sc-cap__body {
    flex: 0 0 38%;
    justify-content: center;
    padding: 24px 24px 24px 16px;
}

.sc-cap--wide .sc-cap__visual {
    flex: 1;
    min-height: 0;
    justify-content: flex-start;
}

/* ---- 06 Support status ---- */
.sc-vsupport {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}

.sc-vsupport li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 10px;
    background: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--sc-ink);
}

.sc-vsupport i {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22b573;
    box-shadow: 0 0 0 4px rgba(34, 181, 115, 0.15);
}

/* ---- Responsive ---- */
/* Tablet: web apps full width, then pairs, then support full width */
@media (max-width: 1199px) {
    .sc-cap { grid-column: span 3; }
    .sc-cap--lg,
    .sc-cap--wide { grid-column: span 6; }
}

@media (max-width: 991px) {
    .sc-caps__head { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .sc-caps { border-radius: 24px; }

    .sc-cap--wide { flex-direction: column; }
    .sc-cap--wide .sc-cap__body { flex: none; padding: 24px 10px 10px; }
    .sc-cap--wide .sc-cap__visual { min-height: 200px; }
}

@media (max-width: 767px) {
    .sc-caps {
        margin: -40px 0 !important;
        padding: 88px 0 96px;
    }

    .sc-bento { grid-template-columns: minmax(0, 1fr); }

    .sc-cap,
    .sc-cap--lg,
    .sc-cap--wide { grid-column: auto; }

    .sc-cap__visual,
    .sc-cap--lg .sc-cap__visual { min-height: 230px; padding: 18px; }

    .sc-vsupport { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .sc-cap:hover,
    .sc-cap:hover .sc-cap__visual > * { transform: none; }
}

/* ==========================================================================
   SECTION ORDER (01-13) - layout for the reordered page
   ========================================================================== */

/* ---- 4. Built with Vetora: its own stage; the sphere sits behind the title ---- */
.sc-stage--built .sc-built {
    padding-top: calc(64px + clamp(150px, 20vh, 220px));
}

.sc-stage--built .sc-sphere {
    /* Title lands in the lower part of the sphere, as in the reference */
    top: calc(64px + clamp(150px, 20vh, 220px) + 40px - var(--sc-sphere) * 0.8);
}

/* ---- 5. Integrations & architecture (first block of the light panel) ---- */
/* Same header as Capabilities/Industries, then two white cards (the light
   panel's version of the capability tiles), each with a 2-column tile grid */
.sc-integ__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.sc-integ__card {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 14px;
    border-radius: 20px;
    background: #fff;
    transition: transform 0.5s var(--sx-ease), box-shadow 0.5s var(--sx-ease);
}

/* The tiles inside move on hover, so the card itself only gains a shadow */
.sc-integ__card:hover { box-shadow: 0 24px 48px -28px rgba(20, 27, 77, 0.35); }

.sc-integ__intro { padding: 24px 14px 0; }

.sc-page .sc-integ__title {
    margin: 0 0 10px;
    font-family: var(--sx-display);
    font-size: clamp(1.375rem, 1.15rem + 0.6vw, 1.75rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--sc-ink);
}

.sc-integ__intro p {
    max-width: 440px;
    margin: 0 !important;
    font-size: 1rem;
    line-height: 1.6;
}

.sc-page .sc-integ__tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: auto 0 0 !important;
    padding: 0 !important;
    list-style: none;
}

/* Tile hover borrows the page's "open" look from the Challenges rows: it turns
   into a deep-purple panel with a lilac edge, a soft glow that follows the
   cursor (--mx/--my, set in software.js) and the page's dot texture. The dark
   layers are pseudo-elements faded in with opacity, since gradients can't
   transition directly. */
.sc-integ__tile {
    --mx: 75%;
    --my: 40%;
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 84px;
    padding: 16px;
    border: 1px solid transparent;
    border-radius: 14px;
    overflow: hidden;
    background: var(--sc-panel);
    transition: transform 0.5s var(--sx-ease), border-color 0.5s ease, box-shadow 0.5s var(--sx-ease);
}

/* Dark panel + cursor glow */
.sc-integ__tile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(220px circle at var(--mx) var(--my), rgba(199, 125, 255, 0.34) 0%, rgba(122, 167, 255, 0.12) 45%, rgba(122, 167, 255, 0) 70%),
        linear-gradient(135deg, #24103f 0%, #151532 60%, #10162e 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Dot texture, strongest around the cursor */
.sc-integ__tile::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1.6px);
    background-size: 14px 14px;
    -webkit-mask-image: radial-gradient(160px circle at var(--mx) var(--my), #000 0%, transparent 75%);
    mask-image: radial-gradient(160px circle at var(--mx) var(--my), #000 0%, transparent 75%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.sc-integ__tile:hover {
    transform: translateY(-3px);
    border-color: rgba(199, 125, 255, 0.3);
    box-shadow: 0 20px 44px -20px rgba(38, 16, 70, 0.65);
}

.sc-integ__tile:hover::before { opacity: 1; }
.sc-integ__tile:hover::after { opacity: 0.35; }

.sc-integ__icon {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    color: var(--primary, #5f0a87);
    transition: color 0.4s ease, transform 0.5s var(--sx-ease), box-shadow 0.5s ease;
}

/* Gradient fill, as on the open Challenges arrow */
.sc-integ__icon::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--sc-grad-dark);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.sc-integ__icon svg {
    position: relative;
    width: 22px;
    height: 22px;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sc-integ__tile:hover .sc-integ__icon {
    color: #fff;
    box-shadow: 0 0 0 4px rgba(199, 125, 255, 0.14), 0 10px 26px rgba(95, 10, 135, 0.45);
}

.sc-integ__tile:hover .sc-integ__icon::before { opacity: 1; }
.sc-integ__tile:hover .sc-integ__icon svg { transform: scale(1.1); }

.sc-integ__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.sc-integ__text b {
    font-family: var(--sx-body);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--sc-ink);
    transition: color 0.4s ease;
}

.sc-integ__text small {
    font-family: var(--sx-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sc-ink-2);
    transition: color 0.4s ease, transform 0.5s var(--sx-ease);
}

.sc-integ__tile:hover .sc-integ__text b { color: #fff; }
.sc-integ__tile:hover .sc-integ__text small { color: #c77dff; transform: translateX(3px); }

/* Reduced motion: keep the colour change, drop the movement */
@media (prefers-reduced-motion: reduce) {
    .sc-integ__tile,
    .sc-integ__tile::before,
    .sc-integ__tile::after,
    .sc-integ__icon,
    .sc-integ__icon svg,
    .sc-integ__text small { transition: none; }
    .sc-integ__tile:hover,
    .sc-integ__tile:hover .sc-integ__icon svg,
    .sc-integ__tile:hover .sc-integ__text small { transform: none; }
}

@media (max-width: 1199px) {
    .sc-integ__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575px) {
    .sc-page .sc-integ__tiles { grid-template-columns: minmax(0, 1fr); }
    .sc-integ__intro { padding: 18px 8px 0; }
    .sc-integ__tile { min-height: 0; }
}

/* Industries, then case studies, follow inside the same panel */
.sc-integ + .sc-inds,
.sc-inds + .sc-cases { margin-top: clamp(140px, 20vh, 220px); }

/* ---- 10. Security: standalone dark section with a soft glow ---- */
/* Transparent over the shared ribbon backdrop (.sc-intro--stack), with the
   same darkening as Tech stack and Process. The white Why/FAQ card overlaps
   its bottom edge, so no fade-out is needed. */
.sc-security--solo {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(110px, 15vh, 170px) 0 calc(64px + clamp(150px, 20vh, 220px));
    background: rgba(7, 8, 12, 0.66);
}


@media (max-width: 767px) {
    .sc-stage--built .sc-built { padding-top: calc(40px + 120px); }
    .sc-stage--built .sc-sphere { top: calc(40px + 120px + 30px - var(--sc-sphere) * 0.8); }
    .sc-sphere__chip { display: none; } /* they'd sit on the title at this size */
    .sc-security--solo { padding-top: 96px; padding-bottom: calc(40px + 112px); }
}

/* ---- 11 + 12. Why choose Vetora and FAQs in one white card ---- */
.sc-whyfaq {
    position: relative;
    z-index: 2;
    margin: -64px 0 !important; /* overlaps Security above and the CTA below */
    padding-bottom: clamp(140px, 18vh, 200px);
    border-radius: var(--sc-radius);
    background: #fff;
    color: var(--sc-ink);
}

/* The Why partial is normally its own panel: inside the card it's just content */
.sc-page .sc-whyfaq .sx-why {
    margin: 0 !important;
    padding-bottom: 0;
    border-radius: 0;
    background: transparent;
}

/* FAQ continues inside the card, separated by a hairline */
.sc-whyfaq .sc-faq { margin-top: clamp(120px, 16vh, 180px); }

.sc-whyfaq .sc-faq > .sx-shell::before {
    content: "";
    display: block;
    height: 1px;
    margin-bottom: clamp(96px, 13vh, 140px);
    background: var(--sc-rule);
}

.sc-whyfaq p { color: var(--sc-ink-2); }

/* The light button would vanish on white: give it the panel tint */
.sc-whyfaq .sc-btn--light { background: var(--sc-panel); }

@media (max-width: 991px) {
    .sc-whyfaq { border-radius: 24px; }
}

@media (max-width: 767px) {
    .sc-whyfaq { margin: -40px 0 !important; padding-bottom: 112px; }
    .sc-whyfaq .sc-faq { margin-top: 88px; }
    .sc-whyfaq .sc-faq > .sx-shell::before { margin-bottom: 72px; }
}

/* ==========================================================================
   8. TECHNOLOGY STACK: transparent section on the ribbon backdrop
   (.sc-intro--stack reuses the sticky-video wrapper from Hero + Challenges;
   the heading reuses .sc-chal__head / .sc-chal__lead so both sections match)
   ========================================================================== */
.sc-stack {
    position: relative;
    isolation: isolate;
    /* top: room for the light panel overlapping from above */
    padding: calc(64px + clamp(120px, 16vh, 180px)) 0 clamp(110px, 15vh, 170px);
    /* darkened for legibility; Development process continues below on the
       same backdrop, and it does the fade to the page colour */
    background: linear-gradient(180deg,
        rgba(7, 8, 12, 0.35) 0%,
        rgba(7, 8, 12, 0.6) 22%,
        rgba(7, 8, 12, 0.66) 100%);
}

.sc-stack__rows { border-top: 1px solid rgba(255, 255, 255, 0.12); }

.sc-stack__row {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(32px, 4vw, 72px);
    align-items: center;
    padding: clamp(28px, 4vh, 40px) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.sc-stack__cat {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 20px;
    align-items: baseline;
}

.sc-stack__num {
    grid-row: span 2;
    font-family: var(--sx-display);
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.6);
}

.sc-page .sc-stack__name {
    margin: 0 0 8px;
    font-family: var(--sx-display);
    font-size: clamp(1.375rem, 1.1rem + 0.7vw, 1.75rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: #fff;
}

.sc-stack__cat p {
    max-width: 300px;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.62) !important;
}

/* Frosted logo chips */
.sc-stack__tools {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sc-tool {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(20, 12, 34, 0.5);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    font-size: 0.9375rem;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    transition: transform 0.4s var(--sx-ease), border-color 0.4s ease, background-color 0.4s ease;
}

.sc-tool:hover {
    transform: translateY(-2px);
    border-color: rgba(199, 125, 255, 0.45);
    background: rgba(38, 16, 70, 0.6);
}

.sc-tool img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

/* Logo tweaks for the dark backdrop: black logos (Next.js, AWS, Pandas) turned
   white; dark-blue ones (MySQL, GitHub Actions) brightened */
.sc-tool img.is-invert { filter: invert(1) brightness(1.1); }
.sc-tool img.is-lift { filter: brightness(2.2) saturate(1.3); }

/* Dots only in the open space below the content (as in Challenges) */
.sc-dots--stack {
    height: clamp(220px, 28vh, 320px);
    z-index: -1;
    opacity: 0.5;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 50%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 50%, transparent 100%);
}

@media (max-width: 991px) {
    .sc-stack__row { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

@media (max-width: 767px) {
    .sc-stack { padding: calc(40px + 96px) 0 140px; }
    .sc-tool { padding: 10px 14px 10px 12px; font-size: 0.875rem; gap: 10px; }
    .sc-tool img { width: 22px; height: 22px; }
}

/* ==========================================================================
   9. DEVELOPMENT PROCESS: transparent, on the same backdrop as the
   Technology stack. Wide frosted cards pin near the top and stack as you
   scroll (CSS position: sticky, no JS). Plain list on small screens.
   ========================================================================== */
.sc-proc-sec {
    position: relative;
    isolation: isolate;
    padding: clamp(110px, 15vh, 170px) 0 clamp(150px, 20vh, 220px);
    /* same darkening as the stack; Security continues on the backdrop below */
    background: rgba(7, 8, 12, 0.66);
}

.sc-deck {
    display: grid;
    gap: 28px;
}

.sc-deck__card {
    position: sticky;
    /* each card pins a little lower than the last, so the deck shows its edges */
    top: calc(120px + var(--i) * 28px);
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 5fr) minmax(0, 3fr);
    gap: clamp(32px, 4vw, 72px);
    align-items: center;
    min-height: 300px;
    padding: clamp(36px, 4vw, 56px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(18, 10, 32, 0.86);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 -28px 56px -28px rgba(0, 0, 0, 0.8);
}

/* Large outlined-gradient phase number */
.sc-deck__num {
    font-family: var(--sx-display);
    font-size: clamp(5rem, 2.8rem + 5.5vw, 9rem);
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: -0.05em;
    background: var(--sc-grad-light);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sc-deck__phase {
    display: block;
    margin-bottom: 16px;
    font-family: var(--sx-mono);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #c77dff;
}

.sc-page .sc-deck__title {
    margin: 0 0 16px;
    font-family: var(--sx-display);
    font-size: clamp(1.75rem, 1.3rem + 1.3vw, 2.625rem);
    font-weight: 400;
    letter-spacing: -0.025em;
    color: #fff;
}

.sc-deck__main p {
    max-width: 480px;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.72) !important;
}

/* Deliverables: hairline-separated list on the right */
.sc-deck__items {
    display: grid;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.sc-deck__items li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

.sc-deck__items li::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: linear-gradient(135deg, #c77dff 0%, #7aa7ff 100%);
}

/* The foot ("Start with a discovery call") reuses .sc-chal__foot */

@media (max-width: 1199px) {
    .sc-deck__card { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
    .sc-deck__items { grid-column: 2; }
}

/* Tablet & phone: no pinning, simple stacked cards */
@media (max-width: 991px) {
    .sc-deck { gap: 16px; }

    .sc-deck__card {
        position: relative;
        top: auto;
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        min-height: 0;
    }

    .sc-deck__items { grid-column: auto; }
    .sc-deck__num { font-size: 4rem; }
}

@media (max-width: 767px) {
    .sc-proc-sec { padding: 96px 0 140px; }
    .sc-deck__card { padding: 26px 22px; border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .sc-deck__card { position: relative; top: auto; }
}

/* ==========================================================================
   6. INDUSTRIES: expanding photo columns (inside the light panel)
   One column is open at a time (software.js); collapsed columns show a
   vertical label. Stacks as cards on tablet and phone.
   ========================================================================== */
.sc-inds__cols {
    display: flex;
    gap: 12px;
    height: clamp(480px, 64vh, 620px);
}

.sc-ind {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    border-radius: 20px;
    overflow: hidden;
    background: #1a0a2b;
    cursor: pointer;
    transition: flex-grow 0.7s var(--sx-ease);
}

.sc-ind.is-open { flex-grow: 4.2; cursor: default; }

.sc-ind:focus-visible {
    outline: 2px solid var(--primary, #5f0a87);
    outline-offset: 3px;
}

.sc-ind__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.62) saturate(0.85);
    transform: scale(1.06);
    transition: filter 0.7s ease, transform 1.2s var(--sx-ease);
}

.sc-ind.is-open .sc-ind__img {
    filter: brightness(0.82) saturate(1);
    transform: scale(1);
}

/* Bottom shade so the text always reads */
.sc-ind::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(10, 6, 20, 0.88) 0%, rgba(10, 6, 20, 0.35) 45%, rgba(10, 6, 20, 0) 70%);
    pointer-events: none;
}

/* Collapsed label: reads bottom-to-top */
.sc-ind__tab {
    position: absolute;
    left: 50%;
    bottom: 28px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    writing-mode: vertical-rl;
    transform: translateX(-50%) rotate(180deg);
    font-family: var(--sx-display);
    font-size: 1.125rem;
    white-space: nowrap;
    color: #fff;
    transition: opacity 0.35s ease;
}

.sc-ind__tab em {
    font-family: var(--sx-mono);
    font-size: 0.75rem;
    font-style: normal;
    color: #d6a8ff;
}

.sc-ind.is-open .sc-ind__tab { opacity: 0; }

/* Open content: fixed width so it doesn't reflow while the column grows */
.sc-ind__body {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    width: min(500px, 100%);
    padding: 36px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.35s ease, transform 0.5s var(--sx-ease);
    pointer-events: none;
}

.sc-ind.is-open .sc-ind__body {
    opacity: 1;
    transform: none;
    transition-delay: 0.25s;
    pointer-events: auto;
}

.sc-ind__num {
    display: block;
    margin-bottom: 12px;
    font-family: var(--sx-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: #d6a8ff;
}

.sc-page .sc-ind__name {
    margin: 0 0 12px;
    font-family: var(--sx-display);
    font-size: clamp(1.625rem, 1.3rem + 0.8vw, 2.125rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: #fff;
}

.sc-ind__body p {
    max-width: 420px;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85) !important;
}

.sc-page .sc-ind__builds {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.sc-ind__builds li {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-size: 0.8125rem;
    font-weight: 500;
    color: #fff;
}

/* Case studies head now has a label above the title */
.sc-cases__head .sc-label { margin-bottom: 24px !important; }
.sc-cases__head .sc-h2 { max-width: 13ch; } /* "Software in / everyday use" */

/* Tablet & phone: every industry shown as an open card */
@media (max-width: 991px) {
    .sc-inds__cols {
        flex-direction: column;
        height: auto;
        gap: 14px;
    }

    .sc-ind,
    .sc-ind.is-open {
        flex: none;
        height: clamp(340px, 52vw, 420px);
        cursor: default;
    }

    .sc-ind__img { filter: brightness(0.7); transform: none; }
    .sc-ind__tab { display: none; }

    /* Text covers most of a stacked card, so shade the whole photo */
    .sc-ind::after {
        background: linear-gradient(0deg, rgba(10, 6, 20, 0.9) 0%, rgba(10, 6, 20, 0.62) 55%, rgba(10, 6, 20, 0.4) 100%);
    }

    .sc-ind__body {
        width: 100%;
        padding: 26px;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sc-ind,
    .sc-ind__img,
    .sc-ind__body { transition: none; }
}

/* ==========================================================================
   TYPOGRAPHY: match the main site (Home / style.css)
   Headings and titles in Livvic semibold (600 is the heaviest weight the
   layout loads, so no faux bold), body copy in Lexend. The small monospace
   labels and buttons are kept on purpose. Prefixed with .sx-page.sc-page so
   it wins over the lighter, reference-style weights set earlier.
   ========================================================================== */

/* Section headings */
.sx-page.sc-page .sc-hero__title,
.sx-page.sc-page .sc-h2,
.sx-page.sc-page .sc-h3,
.sx-page.sc-page .sc-cta__title,
.sx-page.sc-page .sx-why .sx-why__title {
    font-family: var(--sx-display);
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* Card, row and list titles */
.sx-page.sc-page .sc-chal__title,
.sx-page.sc-page .sc-chal__foot p,
.sx-page.sc-page .sc-cap__body h3,
.sx-page.sc-page .sc-usecase__body h3,
.sx-page.sc-page .sc-case__title,
.sx-page.sc-page .sc-ind__name,
.sx-page.sc-page .sc-ind__tab,
.sx-page.sc-page .sc-stack__name,
.sx-page.sc-page .sc-deck__title,
.sx-page.sc-page .sc-deck__num,
.sx-page.sc-page .sc-security__list h3,
.sx-page.sc-page .sx-why .sx-why__link,
.sx-page.sc-page .sx-why .sx-why-card__title,
.sx-page.sc-page .sc-acc .sx-acc__btn {
    font-family: var(--sx-display);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Body-style text in Lexend, as on the rest of the site */
.sx-page.sc-page .sc-features__list li,
.sx-page.sc-page .sx-why .sx-why__kicker {
    font-family: var(--sx-body);
    font-weight: 500;
    letter-spacing: 0;
}

/* Semibold is wider: keep "Custom software" on one line on phones */
@media (max-width: 767px) {
    /* scales down on very small phones (320px) so lines do not break mid-phrase */
    .sx-page.sc-page .sc-hero__title { font-size: clamp(1.875rem, 9.6vw, 2.5rem); }
}

/* ==========================================================================
   RESPONSIVE FIXES (from the full-page audit at 320-1920px)
   ========================================================================== */

/* "Discuss this" links: grow the tap area to a comfortable size without
   changing how they look (negative margin cancels the extra padding) */
.sc-usecase__link {
    display: inline-block;
    padding: 10px 0;
    margin: -10px 0;
}

/* Why panel intro: drop the forced line break on narrow screens */
@media (max-width: 767px) {
    .sx-page.sc-page .sx-why__kicker br { display: none; }
}

/* "Built with Vetora" tabs: fit all three on the smallest phones */
@media (max-width: 374px) {
    .sc-seg { width: 100%; }
    .sc-seg__btn {
        flex: 1;
        padding: 10px 6px;
        font-size: 0.8125rem;
    }
}

/* Landscape phones (very short screens): keep the hero headline clear of the header */
@media (max-height: 500px) and (orientation: landscape) {
    .sc-hero {
        min-height: 0;
        padding-top: 160px; /* header + announcement bar are ~105px tall */
    }
}

/* Final CTA on phones: size to the content instead of the desktop
   full-screen height, so there's no large empty band above the text */
@media (max-width: 767px) {
    .sc-cta {
        align-items: center;
        min-height: 0;
        padding: calc(40px + 96px) 0 112px; /* top: room for the card overlapping from above */
    }
}

/* ---------- Interlinking: in-text links on the service cards and process deck ---------- */
.sc-cap__body p a,
.sc-deck__main p a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}
.sc-cap__body p a { text-decoration-color: rgba(95, 10, 135, 0.4); }
.sc-cap__body p a:hover,
.sc-cap__body p a:focus-visible { color: var(--primary, #5f0a87); text-decoration-color: currentColor; }
.sc-deck__main p a { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.45); }
.sc-deck__main p a:hover,
.sc-deck__main p a:focus-visible { text-decoration-color: #fff; }