/* ==========================================================================
   OctaTechno — Complete Premium Design System
   AI automation & workflow orchestration demo template
   ========================================================================== */

/* Fonts are self-hosted via public/css/fonts.css (linked in layouts/app.blade.php)
   instead of an @import to Google Fonts, so they aren't blocked by ad-blockers
   or CDN reachability issues. */

/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
    --primary: #6904F2;
    --primary-hover: #5602cc;
    --primary-light: #DBD3FF;
    --primary-xlight: #f3f0ff;
    --accent: #a855f7;
    --dark: #000000;
    --dark-surface: #0a0c14;
    --dark-card: #111827;
    --text-main: #0d0d0d;
    --text-muted: #4b5563;
    --text-light: #9ca3af;
    --text-white: #ffffff;
    --bg-white: #ffffff;
    --bg-off: #f9fafb;
    --bg-lavender: #DBD3FF;
    --border-light: rgba(0, 0, 0, 0.08);
    --border-card: #e5e7eb;
    --border-dark: rgba(255, 255, 255, 0.08);
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 32px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.10), 0 8px 20px rgba(0, 0, 0, 0.06);
    --shadow-purple: 0 20px 60px rgba(105, 4, 242, 0.15), 0 8px 20px rgba(105, 4, 242, 0.08);
    --max-width: 1240px;
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== RESET ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--bg-white);
    color: var(--text-main);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Instrument Sans', sans-serif;
    color: var(--dark);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

p {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.7;
}

a {
    color: inherit;
    text-decoration: none;
}

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

ul,
ol {
    list-style: none;
}

button {
    cursor: pointer;
    font-family: inherit;
}

/* ===== FOCUS STATES (accessibility) ===== */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ===== LAYOUT ===== */
.container {
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: 1.75rem;
}

.section-padding {
    padding-block: 6rem;
}

.section-padding-sm {
    padding-block: 4rem;
}

/* Universal fixed-navbar scroll offset: any element that can be an anchor-jump
   target (native browser fragment navigation, not just the JS-driven click
   handler) gets breathing room under the fixed ~78px header so a heading is
   never clipped mid-scroll. */
[id] {
    scroll-margin-top: 96px;
}

/* ===== ANIMATE ON SCROLL ===== */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

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

.reveal-delay-1 {
    transition-delay: 0.1s;
}

.reveal-delay-2 {
    transition-delay: 0.2s;
}

.reveal-delay-3 {
    transition-delay: 0.3s;
}

.reveal-delay-4 {
    transition-delay: 0.4s;
}


/* ===================================================================
   FLOATING PILL ISLAND NAVBAR (AIFusionx Style)
   =================================================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding-top: 18px;
    background: transparent;
    border: none;
    box-shadow: none;
    pointer-events: none;
    transition: padding 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header.scrolled {
    padding-top: 12px;
}

.site-header.nav-hidden {
    transform: translateY(-130%);
}

.site-header .container-fluid {
    padding-inline: 28px;
    width: 100%;
}

.nav-container {
    pointer-events: auto;
    width: 100%;
    margin-inline: auto;
    background: #FFFFFF;
    border-radius: 9999px;
    padding: 6px 8px 6px 24px;
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.07);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header.scrolled .nav-container {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.09), 0 1px 3px rgba(0, 0, 0, 0.05);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* BRAND LOGO */
.site-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    line-height: 1;
    color: inherit;
    cursor: pointer;
}

.site-logo .logo-ai-icon {
    font-size: 26px;
    color: #6904F2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.site-logo:hover .logo-ai-icon {
    transform: rotate(12deg) scale(1.08);
}

.site-logo .logo-text {
    font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.28rem;
    font-weight: 600;
    color: #000000;
    letter-spacing: -0.03em;
}

/* DESKTOP NAV */
.nav-desktop-wrap {
    display: flex;
    align-items: center;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-item {
    position: relative;
}

.nav-link {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 500;
    font-size: 0.92rem;
    color: #000000;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    padding: 10px 0;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.nav-link:hover,
.nav-link.active {
    color: #6904F2;
}

.nav-arrow-icon {
    display: inline-block;
    color: #000000;
    opacity: 0.8;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
}

.nav-item:hover .nav-arrow-icon {
    transform: rotate(180deg);
    color: #6904F2;
}

/* DROPDOWN MENU */
.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 8px;
    min-width: 250px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.22s;
    z-index: 1001;
}

.nav-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
}

.nav-item:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.dropdown-link {
    display: flex;
    flex-direction: column;
    padding: 9px 12px;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.18s ease;
}

.dropdown-link:hover {
    background: #F5F3FF;
}

.dropdown-title {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: #000000;
    line-height: 1.25;
    transition: color 0.18s ease;
}

.dropdown-link:hover .dropdown-title {
    color: #6904F2;
}

.dropdown-sub {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.77rem;
    color: rgba(0, 0, 0, 0.52);
    margin-top: 2px;
}

/* NAV ACTIONS & PILL BUTTON */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-discovery-call {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #000000;
    color: #FFFFFF;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 0.88rem;
    font-weight: 500;
    padding: 11px 22px;
    border-radius: 9999px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.btn-discovery-call svg {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-discovery-call:hover {
    background: #6904F2;
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(105, 4, 242, 0.35);
}

.btn-discovery-call:hover svg {
    transform: translateX(3px);
}

/* RESPONSIVE NAVBAR */
@media (max-width: 991px) {
    .site-header {
        padding-top: 12px;
    }

    .site-header.scrolled {
        padding-top: 8px;
    }

    .site-header .container-fluid {
        padding-inline: 14px;
    }

    .nav-container {
        min-height: 56px;
        padding: 6px 8px 6px 18px;
    }

    .nav-desktop-wrap {
        display: none;
    }

    .mobile-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: transparent;
        border: none;
        color: #000000;
        cursor: pointer;
        padding: 0;
        transition: background 0.2s ease;
    }

    .mobile-toggle:hover {
        background: rgba(0, 0, 0, 0.05);
    }

    .btn-discovery-call {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .btn-discovery-call {
        display: inline-flex;
        padding: 8px 18px;
        font-size: 0.82rem;
    }
}

@media (min-width: 992px) {
    .mobile-toggle {
        display: none;
    }
}

/* ===================================================================
   BUTTONS
   =================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.78rem 1.6rem;
    border-radius: var(--radius-pill);
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
    outline: none;
    text-decoration: none;
    white-space: nowrap;
}

.btn-black {
    background: #000;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.btn-black:hover {
    background: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-purple);
}

.btn-purple {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(105, 4, 242, 0.25);
}

.btn-purple:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-purple);
}

.btn-white {
    background: #fff;
    color: #000;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    box-shadow: var(--shadow-sm);
}

.btn-white:hover {
    background: #f8f8fb;
    border-color: rgba(105, 4, 242, 0.25);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-outline {
    background: transparent;
    color: var(--primary);
    border: 1.5px solid var(--primary);
}

.btn-outline:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-2px);
}

.btn-lg {
    padding: 1rem 2.2rem;
    font-size: 1rem;
}



/* ===================================================================
   MOBILE DRAWER
   =================================================================== */
.mobile-drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    z-index: 2000;
}

.mobile-drawer-overlay.active {
    display: block;
}

.mobile-drawer-content {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    max-width: 88vw;
    height: 100%;
    background: #fff;
    padding: 2rem 1.75rem;
    box-shadow: -5px 0 40px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-drawer-overlay.active .mobile-drawer-content {
    transform: translateX(0);
}

.mobile-drawer-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-card);
}

.mobile-close-btn {
    background: none;
    border: none;
    font-size: 1.6rem;
    color: #555;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background var(--transition-fast);
}

.mobile-close-btn:hover {
    background: var(--bg-off);
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mobile-nav-links a {
    display: block;
    font-size: 1.05rem;
    font-weight: 600;
    color: #111;
    padding: 0.7rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.mobile-nav-links a:hover {
    background: var(--primary-xlight);
    color: var(--primary);
    padding-left: 1rem;
}

.mobile-cta {
    margin-top: 2rem;
}

.mobile-cta .btn {
    width: 100%;
    justify-content: center;
}


/* ===================================================================
   HERO SECTION
   =================================================================== */
.hero-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 82vh;
    background-color: #DBD3FF;
    overflow: hidden;
    padding-top: calc(78px + 4vh);
    padding-bottom: 5rem;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 20px), calc(100% - 1.02px) calc(100% - 13.68px), calc(100% - 3.86px) calc(100% - 8.19px), calc(100% - 8.19px) calc(100% - 3.86px), calc(100% - 13.68px) calc(100% - 1.02px), calc(100% - 20px) 100%, 105px 100%, 97px calc(100% - 0.4px), 90px calc(100% - 1.8px), 83px calc(100% - 6.0px), 76px calc(100% - 13.0px), 70px calc(100% - 17.5px), 65px calc(100% - 19.5px), 60px calc(100% - 20px), 18px calc(100% - 20px), 12.3px calc(100% - 20.9px), 7.4px calc(100% - 23.5px), 3.5px calc(100% - 27.4px), 0.9px calc(100% - 32.3px), 0px calc(100% - 38px));
    clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 20px), calc(100% - 1.02px) calc(100% - 13.68px), calc(100% - 3.86px) calc(100% - 8.19px), calc(100% - 8.19px) calc(100% - 3.86px), calc(100% - 13.68px) calc(100% - 1.02px), calc(100% - 20px) 100%, 105px 100%, 97px calc(100% - 0.4px), 90px calc(100% - 1.8px), 83px calc(100% - 6.0px), 76px calc(100% - 13.0px), 70px calc(100% - 17.5px), 65px calc(100% - 19.5px), 60px calc(100% - 20px), 18px calc(100% - 20px), 12.3px calc(100% - 20.9px), 7.4px calc(100% - 23.5px), 3.5px calc(100% - 27.4px), 0.9px calc(100% - 32.3px), 0px calc(100% - 38px));
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
    z-index: 1;
}

.hero-bg-fallback {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center right;
    z-index: 0;
}

.hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(246, 243, 255, 0.94) 0%, rgba(246, 243, 255, 0.78) 42%, rgba(246, 243, 255, 0.12) 75%, transparent 100%);
    z-index: 2;
    pointer-events: none;
}

.hero-dots {
    position: absolute;
    right: 32px;
    bottom: 24px;
    width: 167px;
    height: 53px;
    background-image: url('/images/raster-dots-white.svg');
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 3;
    pointer-events: none;
    opacity: 0.85;
}

.hero-wrapper .container {
    position: relative;
    z-index: 4;
}

.hero-inner {
    max-width: 100%;
}

.hero-text {
    max-width: 1120px;
    width: 100%;
}

@media (max-width: 900px) {
    .hero-text {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .hero-wrapper {
        clip-path: none;
        -webkit-clip-path: none;
        border-radius: 0 0 24px 24px;
        padding-bottom: 4rem;
    }
}

/* Badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary);
    font-family: 'Instrument Sans', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 1.4rem;
    letter-spacing: -0.01em;
    animation: badgePop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes badgePop {
    from {
        opacity: 0;
        transform: scale(0.85) translateY(12px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.hero-badge .star-icon {
    color: var(--primary);
    font-size: 0.95rem;
    animation: starSpin 4s linear infinite;
}

@keyframes starSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Headline */
.hero-title {
    font-size: clamp(2.3rem, 3.75vw, 3.85rem);
    font-weight: 500;
    color: #000;
    line-height: 1.1;
    letter-spacing: -0.035em;
    margin-bottom: 1.25rem;
    animation: fadeSlideUp 0.75s ease 0.15s both;
}

@media (min-width: 992px) {
    .hero-title span {
        white-space: nowrap;
    }
}

/* Subtitle */
.hero-subtitle {
    font-size: clamp(0.98rem, 1.2vw, 1.05rem);
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.72);
    line-height: 1.5;
    margin-bottom: 2rem;
    max-width: 900px;
    animation: fadeSlideUp 0.75s ease 0.25s both;
}

/* Button row */
.hero-button-group {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1.1rem;
    flex-wrap: wrap;
    animation: fadeSlideUp 0.75s ease 0.35s both;
}

/* Response micro text */
.hero-micro {
    animation: fadeSlideUp 0.75s ease 0.45s both;
}

.hero-response-text {
    font-size: 0.9rem;
    color: #4b5563;
    font-weight: 400;
    font-family: 'IBM Plex Sans', sans-serif;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ===================================================================
   LOGOS / PARTNERS SECTION
   =================================================================== */
.logos-section {
    padding-block: 4rem;
    background: #fff;
    border-bottom: 1px solid var(--border-card);
}

.logos-heading {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 500;
    color: #9ca3af;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 2.5rem;
}

.logos-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3.5rem;
    flex-wrap: wrap;
}

.logos-row img {
    height: 32px;
    width: auto;
    opacity: 0.55;
    filter: grayscale(100%);
    transition: opacity var(--transition), filter var(--transition);
}

.logos-row img:hover {
    opacity: 1;
    filter: grayscale(0%);
}


/* ===================================================================
   SECTION LABELS & HEADINGS
   =================================================================== */
.section-tag-upper {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
    margin-bottom: 0.75rem;
    padding: 0.3rem 0.85rem;
    background: var(--primary-xlight);
    border-radius: var(--radius-pill);
    border: 1px solid rgba(105, 4, 242, 0.15);
}

.section-main-heading {
    font-size: clamp(2rem, 3.8vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.035em;
    margin-bottom: 1rem;
    line-height: 1.1;
}

.section-main-desc {
    font-size: 1.08rem;
    color: var(--text-muted);
    max-width: 580px;
    line-height: 1.7;
    margin-bottom: 3.5rem;
}

.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    margin-bottom: 3.5rem;
    flex-wrap: wrap;
}

.section-header-left {
    flex: 1;
}


/* ===================================================================
   SERVICES / WHAT WE DO CARDS (PRO-LEVEL VAMTAM DESIGN)
   =================================================================== */

.services-section-wrapper {
    background-color: #FFFFFF;
    padding-top: 5rem;
    padding-bottom: 5.5rem;
    position: relative;
    overflow: hidden;
}

.services-container {
    width: 100%;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 2.5vw, 2.5rem);
    position: relative;
}

.services-header-content {
    margin-bottom: 2.5rem;
}

.services-eyebrow {
    display: block;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.5);
    margin-bottom: 12px;
}

.services-title {
    font-family: 'Instrument Sans', sans-serif;
    font-size: clamp(2rem, 3.2vw, 2.75rem);
    font-weight: 500;
    color: #000000;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}

.services-subtitle {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.98rem;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.5;
    margin-bottom: 0;
    max-width: 800px;
}

/* CAROUSEL WRAP & TRACK INSIDE CENTERED BOXED CONTAINER */
.services-carousel-wrap {
    position: relative;
    width: 100%;
    margin-inline: auto;
}

.services-carousel-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-top: 6px;
    padding-bottom: 16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.services-carousel-track::-webkit-scrollbar {
    display: none;
}

/* 5 cards visible across the container with equal margins */
.services-carousel-track .service-vamtam-card {
    flex: 0 0 calc((100% - 4 * 16px) / 5);
    width: calc((100% - 4 * 16px) / 5);
    min-width: 215px;
    scroll-snap-align: start;
}

@media (max-width: 1199px) {

    /* 4 cards visible */
    .services-carousel-track .service-vamtam-card {
        flex: 0 0 calc((100% - 3 * 16px) / 4);
        width: calc((100% - 3 * 16px) / 4);
        min-width: 210px;
    }
}

@media (max-width: 991px) {

    /* 3 cards visible */
    .services-carousel-track .service-vamtam-card {
        flex: 0 0 calc((100% - 2 * 14px) / 3);
        width: calc((100% - 2 * 14px) / 3);
        gap: 14px;
        min-width: 200px;
    }
}

@media (max-width: 767px) {

    /* Exactly 1 card visible on mobile — no side peek */
    .services-carousel-track {
        gap: 16px;
        scroll-padding-inline: 0;
    }

    .services-carousel-track .service-vamtam-card {
        flex: 0 0 100%;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        scroll-snap-align: start;
    }
}


.service-vamtam-card {
    background: #FAF9F7;
    border: 0.5px solid rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    padding: 14px 14px 22px 14px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    position: relative;
}

.service-vamtam-card:hover {
    background: #FFFFFF;
    transform: translateY(-4px);
    box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.07);
    border-color: rgba(0, 0, 0, 0.12);
    color: inherit;
}

/* Inset Illustration Box */
.service-card-illus {
    height: 250px;
    min-height: 250px;
    border-radius: 12px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #E2D9FF 0%, #FFFFFF 100%);
}

.service-card-illus::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/images/noise_texture.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.75;
    pointer-events: none;
}

/* Theme Icon glyph */
.service-card-illus [class^="vamtam-theme-"],
.service-card-illus [class*=" vamtam-theme-"] {
    font-size: 64px;
    color: #000000;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    z-index: 1;
    display: inline-block;
}

.service-vamtam-card:hover .service-card-illus [class^="vamtam-theme-"],
.service-vamtam-card:hover .service-card-illus [class*=" vamtam-theme-"] {
    transform: scale(1.08) translateY(-3px);
}

/* Bootstrap Icons used by dynamic (database-driven) service cards */
.service-card-illus i.bi {
    font-size: 64px;
    color: #000000;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    z-index: 1;
    display: inline-block;
}

.service-vamtam-card:hover .service-card-illus i.bi {
    transform: scale(1.08) translateY(-3px);
}

.service-card-body {
    padding: 0 4px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.service-card-title {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 1.15rem;
    font-weight: 500;
    color: #000000;
    margin-top: 4px;
    margin-bottom: 8px;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.service-card-desc {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.85rem;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.5;
    flex: 1;
    margin-bottom: 20px;
}

/* Minimalist sleek arrow link at bottom-left */
.service-card-arrow {
    display: inline-flex;
    align-items: center;
    color: #000000;
    margin-top: auto;
    transition: transform 0.25s ease, color 0.25s ease;
    width: fit-content;
}

.service-card-arrow svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    stroke-width: 2.2;
    transition: transform 0.25s ease;
}

.service-vamtam-card:hover .service-card-arrow {
    color: var(--primary);
    transform: translateX(5px);
}

/* Carousel controls */
.services-carousel-nav {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.carousel-arrow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #FFFFFF;
    color: #000000;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.carousel-arrow-btn:hover {
    background: #000000;
    border-color: #000000;
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.carousel-arrow-btn:disabled,
.carousel-arrow-btn.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

@media (max-width: 480px) {
    .services-carousel-track .service-vamtam-card {
        flex: 0 0 100%;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
    }
}



/* ===================================================================
   AUTOMATION EXAMPLES — BENTO GRID
   =================================================================== */
.examples-wrapper {
    position: relative;
    background: #ffffff;
    padding-block: 6rem 5rem;
    overflow: hidden;
}

.examples-deco {
    position: absolute;
    top: -20px;
    right: -70px;
    width: 480px;
    height: auto;
    z-index: 1;
    pointer-events: none;
}

.examples-deco img {
    width: 100%;
    height: auto;
    display: block;
    /* Single radial mask — no compositing needed, works everywhere */
    -webkit-mask-image: radial-gradient(ellipse 85% 80% at 72% 50%,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.95) 45%,
            rgba(0, 0, 0, 0.4) 70%,
            transparent 100%);
    mask-image: radial-gradient(ellipse 85% 80% at 72% 50%,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0.95) 45%,
            rgba(0, 0, 0, 0.4) 70%,
            transparent 100%);
}

.examples-content {
    position: relative;
    z-index: 2;
}

/* Bento header — left-aligned like reference */
.examples-header {
    max-width: 520px;
    margin-bottom: 3rem;
}

/* .bento-grid grid mechanics handled by Bootstrap .row/.col-* in the blade view */

.bento-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 1.75rem 1.75rem 1.5rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    transition: transform 0.26s ease, box-shadow 0.26s ease;
    height: 100%;
}

.bento-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.09), 0 3px 10px rgba(0, 0, 0, 0.05);
}

.bento-tags {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}

.bento-tag {
    background: #f3f4f6;
    border: none;
    padding: 0.2rem 0.65rem;
    border-radius: 6px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #6b7280;
}

.bento-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.35;
    margin-bottom: 0;
}

.pipeline-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
}

.pipeline-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f3f4f6;
    background: none;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
}

.pipeline-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.pipeline-label {
    flex-shrink: 0;
    width: 54px;
    font-size: 0.6rem;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-top: 2px;
}

.pipeline-val {
    color: #374151;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.5;
}

.pipeline-val.result {
    color: var(--primary);
    font-weight: 500;
}


/* ===================================================================
   HOW WE WORK — PROCESS STEPS
   =================================================================== */
/* .process-box grid mechanics now handled by Bootstrap .row/.col-* (g-0) in the blade view */
.process-box {
    background: #fff;
    border: 1px solid var(--border-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    margin-bottom: 2.5rem;
}

.process-step-col {
    padding: 2.5rem 2rem;
    border-right: 1px solid var(--border-card);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: background var(--transition);
}

.process-step-col:last-child {
    border-right: none;
}

.process-step-col:hover {
    background: var(--primary-xlight);
}

.process-step-num {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-card);
    opacity: 0.7;
}

.process-step-title {
    font-size: 1.15rem;
    font-weight: 500;
    margin-bottom: 0.85rem;
    line-height: 1.3;
}

.process-step-desc {
    font-size: 0.91rem;
    color: var(--text-muted);
    line-height: 1.65;
}

.process-step-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--primary-xlight);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    margin-bottom: 1.25rem;
}

.process-callout {
    text-align: center;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--dark);
    padding: 1.5rem;
    background: var(--bg-off);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-card);
}

.process-callout a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.process-callout a:hover {
    color: var(--primary-hover);
}


/* ===================================================================
   INDUSTRIES — DARK PHOTO GRID
   =================================================================== */
.industries-dark-section {
    position: relative;
    background: #000;
    color: #fff;
    padding-top: 8rem;
    padding-bottom: 8rem;
}

.industries-dark-section .container {
    position: relative;
    z-index: 2;
}

.section-wave {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 70px;
    z-index: 1;
    display: block;
    pointer-events: none;
}

.section-wave-top {
    top: -69px;
}

.section-wave-bottom {
    bottom: -69px;
}

.industries-dark-section .section-tag-upper {
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.1);
}

.industries-dark-section .section-main-heading {
    color: #fff;
}

.industries-dark-section .section-main-desc {
    color: #9ca3af;
}

/* .industries-photo-grid grid mechanics now handled by Bootstrap .row/.col-* in the blade view */
.industries-photo-grid {
    margin-bottom: 2.5rem;
}

.industry-photo-card {
    height: 420px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.75rem;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    text-decoration: none;
}

.industry-photo-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

.industry-photo-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.5) 0%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.88) 100%);
    z-index: 1;
    transition: background 0.35s ease;
}

.industry-photo-card:hover::before {
    background: linear-gradient(180deg,
            rgba(105, 4, 242, 0.4) 0%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.9) 100%);
}

.industry-card-title {
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.industry-card-excerpt {
    position: relative;
    z-index: 2;
    color: #e5e7eb;
    font-size: 0.87rem;
    line-height: 1.55;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    padding: 1rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.industry-photo-card:hover .industry-card-excerpt {
    opacity: 1;
    transform: translateY(0);
}

.industries-footnote {
    color: #6b7280;
    font-size: 0.88rem;
    text-align: center;
    margin-top: 1rem;
}


/* ===================================================================
   TESTIMONIALS / SOCIAL PROOF
   =================================================================== */
.testimonials-section {
    padding-block: 6rem;
    background: var(--bg-off);
}

/* .testimonials-grid grid mechanics now handled by Bootstrap .row/.col-* in the blade view */

.testimonial-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 2rem;
    border: 1px solid var(--border-card);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-purple);
    border-color: rgba(105, 4, 242, 0.15);
}

.testimonial-stars {
    display: flex;
    gap: 3px;
    color: #f59e0b;
    font-size: 1rem;
}

.testimonial-text {
    font-size: 0.97rem;
    font-style: italic;
    color: #374151;
    line-height: 1.7;
    flex: 1;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-card);
}

.author-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 500;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.author-name {
    font-weight: 500;
    font-size: 0.93rem;
    color: #111;
    line-height: 1.3;
}

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


/* ===================================================================
   CTA SECTION
   =================================================================== */
.cta-section {
    padding-block: 6rem;
    background: linear-gradient(135deg, #0a0c14 0%, #1a0a35 50%, #0a0c14 100%);
    position: relative;
    overflow: hidden;
    text-align: center;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(105, 4, 242, 0.25) 0%, transparent 70%);
    pointer-events: none;
}

.cta-inner {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin-inline: auto;
}

.cta-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.cta-heading {
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.04em;
    line-height: 1.1;
    margin-bottom: 1.25rem;
}

.cta-sub {
    font-size: 1.08rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.65;
    margin-bottom: 2.5rem;
}

.cta-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}


/* ===================================================================
   FOOTER
   =================================================================== */
.site-footer {
    background: #000;
    color: #fff;
    padding-top: 5rem;
    padding-bottom: 2rem;
}

/* .footer-top grid mechanics now handled by Bootstrap .row/.col-* in the blade view */
.footer-top {
    padding-bottom: 4rem;
    border-bottom: 1px solid var(--border-dark);
}

.footer-brand .site-logo {
    color: #fff;
    margin-bottom: 1rem;
}

.footer-brand p {
    color: #6b7280;
    font-size: 0.93rem;
    line-height: 1.7;
    max-width: 300px;
    margin-bottom: 1.5rem;
}

.footer-social {
    display: flex;
    gap: 0.6rem;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background var(--transition-fast), transform var(--transition-fast);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.social-link:hover {
    background: var(--primary);
    transform: translateY(-2px);
    border-color: var(--primary);
}

.footer-col h5 {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 1.25rem;
    letter-spacing: -0.01em;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.footer-links a {
    color: #6b7280;
    font-size: 0.9rem;
    transition: color var(--transition-fast), padding-left var(--transition-fast);
    display: inline-block;
}

.footer-links a:hover {
    color: #fff;
    padding-left: 4px;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 2rem;
    font-size: 0.85rem;
    color: #4b5563;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-bottom-links {
    display: flex;
    gap: 1.5rem;
}

.footer-bottom-links a {
    color: #4b5563;
    font-size: 0.85rem;
    transition: color var(--transition-fast);
}

.footer-bottom-links a:hover {
    color: #fff;
}


/* ===================================================================
   PAGE HERO (Inner Pages)
   =================================================================== */
.page-hero {
    padding-top: calc(78px + 5rem);
    padding-bottom: 5rem;
    background: linear-gradient(135deg, var(--bg-lavender) 0%, #f3f0ff 100%);
    position: relative;
    overflow: hidden;
}

.page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(105, 4, 242, 0.1) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
}

.page-hero .container {
    position: relative;
    z-index: 1;
}

.page-hero-inner {
    max-width: 700px;
}

.page-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(105, 4, 242, 0.2);
    border-radius: var(--radius-pill);
    padding: 0.35rem 1rem;
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.page-title {
    font-size: clamp(2.2rem, 4.5vw, 3.8rem);
    font-weight: 600;
    color: #000;
    line-height: 1.08;
    letter-spacing: -0.04em;
    margin-bottom: 1.25rem;
}

.page-subtitle {
    font-size: 1.1rem;
    color: #1f2937;
    line-height: 1.65;
    max-width: 560px;
    margin-bottom: 2rem;
}


/* ===================================================================
   CARDS — GENERIC
   =================================================================== */
/* .card-grid-3 / .card-grid-2 grid mechanics now handled by Bootstrap .row/.col-* in the blade view */

.content-card {
    background: #fff;
    border: 1px solid var(--border-card);
    border-radius: var(--radius-lg);
    padding: 2rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.content-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-purple);
    border-color: rgba(105, 4, 242, 0.2);
}

.content-card h3 {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 0.6rem;
    line-height: 1.3;
}

.content-card p {
    font-size: 0.93rem;
    color: var(--text-muted);
    line-height: 1.65;
}

/* ===================================================================
   FAQ ACCORDION
   =================================================================== */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 800px;
    margin-inline: auto;
}

.faq-item {
    background: #fff;
    border: 1px solid var(--border-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.faq-item.open {
    border-color: rgba(105, 4, 242, 0.3);
    box-shadow: 0 4px 20px rgba(105, 4, 242, 0.08);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    font-size: 1.02rem;
    font-weight: 600;
    color: #111;
    gap: 1rem;
    user-select: none;
    transition: color var(--transition-fast);
}

.faq-item.open .faq-question {
    color: var(--primary);
}

.faq-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary-xlight);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    flex-shrink: 0;
    font-size: 1.2rem;
    line-height: 1;
    transition: transform var(--transition-fast), background var(--transition-fast);
}

.faq-item.open .faq-icon {
    transform: rotate(45deg);
    background: var(--primary);
    color: #fff;
}

.faq-answer {
    display: none;
    padding: 0 1.5rem 1.25rem;
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.7;
    border-top: 1px solid var(--border-card);
    margin-top: 0;
    padding-top: 1.25rem;
}

.faq-item.open .faq-answer {
    display: block;
}


/* ===================================================================
   CONTACT FORM
   =================================================================== */
/* .contact-grid grid mechanics now handled by Bootstrap .row/.col-* in the blade view */

.contact-form {
    background: #fff;
    border: 1px solid var(--border-card);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    box-shadow: var(--shadow-md);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.form-group label {
    font-size: 0.88rem;
    font-weight: 600;
    color: #374151;
}

.form-control {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1.5px solid var(--border-card);
    border-radius: var(--radius-md);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.95rem;
    color: #111;
    background: #fff;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(105, 4, 242, 0.1);
}

.form-control::placeholder {
    color: #9ca3af;
}

textarea.form-control {
    min-height: 140px;
    resize: vertical;
}

/* .form-row grid mechanics now handled by Bootstrap .row/.col-* in the blade view */

.contact-info-card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-card);
    transition: all 0.3s ease;
}

.info-item:hover {
    border-color: rgba(105, 4, 242, 0.2);
    box-shadow: var(--shadow-sm);
}

.info-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--primary-xlight);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    flex-shrink: 0;
}

.info-text h4 {
    font-size: 0.9rem;
    font-weight: 500;
    color: #111;
    margin-bottom: 0.25rem;
}

.info-text p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
}


/* ===================================================================
   RESOURCES / BLOG CARDS
   =================================================================== */
.resource-card {
    background: #fff;
    border: 1px solid var(--border-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.resource-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-purple);
    border-color: rgba(105, 4, 242, 0.2);
}

.resource-card-thumb {
    height: 200px;
    background: linear-gradient(135deg, var(--primary-xlight) 0%, #ece8ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 3rem;
}

.resource-card-body {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.resource-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary);
    background: var(--primary-xlight);
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-pill);
    margin-bottom: 0.85rem;
}

.resource-card h3 {
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.35;
    margin-bottom: 0.75rem;
}

.resource-card p {
    font-size: 0.9rem;
    color: var(--text-muted);
    flex: 1;
}

.resource-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-card);
    font-size: 0.83rem;
    color: var(--text-muted);
}

.read-more {
    color: var(--primary);
    font-weight: 600;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: gap var(--transition-fast);
}

.read-more:hover {
    gap: 0.55rem;
}


/* ===================================================================
   ABOUT PAGE
   =================================================================== */
/* .team-grid grid mechanics now handled by Bootstrap .row/.col-* in the blade view */

.team-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--border-card);
    border-radius: var(--radius-lg);
    overflow: visible;
    transition: all 0.35s ease;
    text-align: center;
    padding: 72px 1.5rem 1.75rem;
}
 
.team-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-purple);
    border-color: rgba(105, 4, 242, 0.2);
}

/* Floating circular photo that pokes above the card, with a dashed ring
   and a soft brand-gradient glow behind it — the glow intensifies and the
   ring spins faster on hover instead of just sitting static. */
.team-avatar-wrap {
    position: absolute;
    top: -54px;
    left: 50%;
    transform: translateX(-50%);
    width: 124px;
    height: 124px;
    z-index: 2;
}

.team-avatar-wrap::before {
    content: '';
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(105, 4, 242, 0.4), rgba(0, 132, 255, 0.18) 60%, transparent 75%);
    filter: blur(12px);
    opacity: 0.5;
    z-index: 0;
    transition: opacity 0.35s ease, filter 0.35s ease;
}

.team-card:hover .team-avatar-wrap::before {
    opacity: 0.95;
    filter: blur(16px);
}

.team-avatar-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px dashed rgba(105, 4, 242, 0.45);
    z-index: 1;
    animation: teamRingSpin 16s linear infinite;
    transition: border-color 0.35s ease;
}

.team-card:hover .team-avatar-ring {
    border-color: rgba(105, 4, 242, 0.85);
    animation-duration: 6s;
}

.team-avatar {
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-xlight), #ece8ff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.14);
    z-index: 2;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.team-card:hover .team-avatar {
    transform: scale(1.06);
    box-shadow: 0 10px 26px rgba(105, 4, 242, 0.3);
}

@keyframes teamRingSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.team-info {
    padding-top: 0.5rem;
}

.team-name {
    font-size: 1.05rem;
    font-weight: 500;
    color: #111;
    margin-bottom: 0.3rem;
}

.team-role {
    font-size: 0.85rem;
    color: var(--primary);
    font-weight: 600;
    position: relative;
    display: inline-block;
    padding-bottom: 0.6rem;
}

.team-role::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #0084ff, #6904F2);
    transition: width 0.3s ease;
}

.team-card:hover .team-role::after {
    width: 40px;
}

/* .values-grid grid mechanics now handled by Bootstrap .row/.col-* in the blade view */

.value-card {
    padding: 2rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-card);
    background: #fff;
    transition: all 0.3s ease;
}

.value-card:hover {
    border-color: rgba(105, 4, 242, 0.25);
    box-shadow: var(--shadow-purple);
    transform: translateY(-3px);
}

.value-card-icon {
    font-size: 2.2rem;
    margin-bottom: 1rem;
}

.value-card h3 {
    font-size: 1.15rem;
    font-weight: 500;
    margin-bottom: 0.6rem;
}

.value-card p {
    font-size: 0.9rem;
    line-height: 1.65;
}


/* ===================================================================
   DIVIDER / SEPARATOR
   =================================================================== */
.section-divider {
    height: 1px;
    background: var(--border-card);
    margin: 0;
}

.text-center {
    text-align: center;
}

.text-center .section-main-desc {
    margin-inline: auto;
}

.mt-1 {
    margin-top: 0.5rem;
}

.mt-2 {
    margin-top: 1rem;
}

.mt-3 {
    margin-top: 1.5rem;
}

.mt-4 {
    margin-top: 2rem;
}

.mb-4 {
    margin-bottom: 2rem;
}

.highlight {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* ===================================================================
   RESPONSIVE
   =================================================================== */
/* Column counts for .services-carousel-grid, .industries-photo-grid,
   .team-grid, .bento-grid, .footer-top, .contact-grid, .card-grid-3, .values-grid,
   .form-row are now driven by Bootstrap's responsive .col-lg-*/
.col-md-*/.col-* classes directly in the blade markup (breakpoints: lg=992px, md=768px),
replacing the old custom breakpoints below. */ @media (max-width: 1100px) {
    .process-step-col:nth-child(2) {
        border-right: none;
    }

    .process-step-col:nth-child(1),
    .process-step-col:nth-child(2) {
        border-bottom: 1px solid var(--border-card);
    }
}

@media (max-width: 768px) {
    .nav-menu {
        display: none;
    }

    .nav-actions .btn-black {
        display: none;
    }

    .mobile-toggle {
        display: block;
    }

    .process-step-col {
        border-right: none;
        border-bottom: 1px solid var(--border-card);
    }

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

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    .hero-title {
        font-size: clamp(2.2rem, 9vw, 3.5rem);
    }

    .section-main-heading {
        font-size: clamp(1.8rem, 7vw, 2.5rem);
    }

    .hero-text {
        max-width: 100%;
    }

    .stack-section .container {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
    }

    .stack-section .logos-heading {
        border-right: none;
        padding-right: 0;
    }

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

    .case-stat-block {
        padding-right: 0;
        margin-bottom: 1.5rem;
    }

    .case-detail-col {
        border-left: none;
        border-top: 1px solid rgba(13, 13, 13, 0.12);
        padding: 1.25rem 0 0;
    }

    .industry-photo-card {
        height: 320px;
    }

    .industry-card-excerpt {
        opacity: 1;
        transform: none;
    }

    .section-header-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .cta-buttons {
        flex-direction: column;
    }

    .logos-row {
        gap: 2rem;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .container {
        padding-inline: 1.25rem;
    }

    .hero-button-group {
        flex-direction: column;
        align-items: flex-start;
    }

    .contact-form {
        padding: 1.5rem;
    }

    /* Carousel side padding is hardcoded to the default 1.75rem container
       gutter; keep it in sync with the .container override above so the
       carousel's left edge still lines up with the rest of the page. */
    .services-carousel-wrap {
        padding-left: 1.25rem;
    }

    .services-carousel-nav {
        padding-right: 1.25rem;
    }
}


/* ===================================================================
   LOGO / STACK TEXT CHIPS (no hotlinked logos)
   =================================================================== */
.logos-row-text {
    gap: 1rem;
}

.logo-chip {
    padding: 0.55rem 1.25rem;
    border: 1px solid var(--border-card);
    border-radius: var(--radius-pill);
    font-weight: 500;
    font-size: 0.92rem;
    color: var(--text-muted);
    letter-spacing: -0.01em;
    transition: all var(--transition-fast);
}

.logo-chip:hover {
    color: var(--primary);
    border-color: rgba(105, 4, 242, 0.3);
    background: var(--primary-xlight);
}

.stack-section {
    padding-block: 2.5rem;
    background: #fff;
    border-top: 1px solid var(--border-card);
    border-bottom: 1px solid var(--border-card);
}

.stack-section .container {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    flex-wrap: wrap;
}

.stack-section .logos-heading {
    margin: 0;
    white-space: nowrap;
    font-style: italic;
    font-weight: 600;
    color: var(--text-muted);
    padding-right: 2rem;
    border-right: 1px solid var(--border-card);
}

.stack-row {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    flex: 1;
}

.stack-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--text-main);
    opacity: 0.85;
    transition: opacity var(--transition-fast);
}

.stack-pill:hover {
    opacity: 1;
}

.stack-pill svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}


/* ===================================================================
   INDUSTRIES — FLAT GRADIENT CARDS (5-up)
   =================================================================== */
/* .industries-photo-grid-5 uses Bootstrap's .row-cols-* utilities in the blade view (5-up doesn't map cleanly to a 12-col .col-*, so row-cols-lg-5 is used instead) */
.industry-card-flat {
    background-size: cover;
    isolation: isolate;
}

.industry-card-flat::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.5;
    background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 5px 5px;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.industry-card-icon {
    position: absolute;
    z-index: 0;
    top: 50%;
    right: -1rem;
    transform: translateY(-50%);
    width: 150px;
    height: 150px;
    opacity: 0.22;
    line-height: 1;
}

.industry-card-icon svg {
    width: 100%;
    height: 100%;
}

/* Column counts (5 / 3 / 2) now come from Bootstrap's row-cols-lg-5 row-cols-md-3 row-cols-2 classes in the blade view */


/* ===================================================================
   PROOF & CREDIBILITY — CASE STUDIES
   =================================================================== */
.proof-section {
    padding-block: 6rem;
}

.case-study-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.case-card {
    border-radius: var(--radius-xl);
    padding: 2.75rem;
    color: #0d0d0d;
}

.case-card-purple {
    background: #DBD3FF;
}

.case-card-blue {
    background: #cfe3ff;
}

.case-card-green {
    background: #d9f5df;
}

.case-card-head {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    margin-bottom: 0.75rem;
}

.case-card-num {
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(13, 13, 13, 0.35);
}

.case-card-title {
    font-size: 1.5rem;
    color: #0d0d0d;
    flex: 1;
}

.case-card-logo {
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(13, 13, 13, 0.55);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.case-card-logo::before {
    content: '';
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: rgba(13, 13, 13, 0.6);
    display: inline-block;
}

.case-card-tags {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 2.5rem;
}

.case-card-tag {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
    color: rgba(13, 13, 13, 0.6);
    background: rgba(255, 255, 255, 0.55);
    border-radius: var(--radius-pill);
    padding: 0.25rem 0.75rem;
}

.case-card-columns {
    display: grid;
    grid-template-columns: 200px repeat(3, 1fr);
    gap: 0;
}

.case-stat-block {
    padding-right: 1.75rem;
}

.case-stat-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 0.75rem;
}

.case-stat-number {
    font-size: 2.6rem;
    font-weight: 600;
    line-height: 1;
    color: #0d0d0d;
}

.case-stat-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(13, 13, 13, 0.65);
    margin-top: 0.3rem;
}

.case-stat-desc {
    font-size: 0.85rem;
    color: rgba(13, 13, 13, 0.6);
    line-height: 1.5;
    margin-top: 0.75rem;
}

.case-detail-col {
    padding: 0 1.75rem;
    border-left: 1px solid rgba(13, 13, 13, 0.12);
    display: flex;
    flex-direction: column;
}

.case-detail-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(13, 13, 13, 0.45);
    margin-bottom: 0.6rem;
}

.case-detail-col p {
    font-size: 0.88rem;
    color: rgba(13, 13, 13, 0.78);
    line-height: 1.6;
}

.case-read-more {
    margin-top: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: #0d0d0d;
    background: rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-pill);
    padding: 0.6rem 1.1rem;
    width: fit-content;
    text-decoration: none;
    transition: background var(--transition-fast);
}

.case-read-more:hover {
    background: #fff;
}

@media (max-width: 900px) {
    .case-card-columns {
        grid-template-columns: 1fr;
    }

    .case-stat-block {
        padding-right: 0;
        margin-bottom: 1.5rem;
    }

    .case-detail-col {
        border-left: none;
        border-top: 1px solid rgba(13, 13, 13, 0.12);
        padding: 1.25rem 0 0;
    }
}


/* ===================================================================
   TESTIMONIALS — SCROLLABLE ROW
   =================================================================== */
.testimonials-scroll {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    scroll-snap-type: x mandatory;
}

.testimonials-scroll .testimonial-card {
    min-width: 320px;
    max-width: 340px;
    flex-shrink: 0;
    scroll-snap-align: start;
}

.testimonials-scroll::-webkit-scrollbar {
    height: 6px;
}

.testimonials-scroll::-webkit-scrollbar-thumb {
    background: var(--border-card);
    border-radius: 999px;
}


/* ===================================================================
   GET STARTED / MINI CONTACT SECTION
   =================================================================== */
.get-started-section {
    padding-block: 6rem;
    background: linear-gradient(135deg, #0a0c14 0%, #1a1035 100%);
    color: #fff;
}

.get-started-section .section-main-heading {
    color: #fff;
}

.get-started-section .section-main-desc {
    color: rgba(255, 255, 255, 0.65);
}

/* .get-started-grid grid mechanics now handled by Bootstrap .row/.col-* in the blade view */
.get-started-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.get-started-checklist li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
}

.check-icon {
    color: var(--accent);
    font-weight: 600;
}

.get-started-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.get-started-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-xl);
    padding: 2.25rem;
}

.get-started-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(168, 85, 247, 0.18);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.get-started-card p {
    color: rgba(255, 255, 255, 0.6);
}

/* .get-started-grid stacking below 992px is now handled by Bootstrap's col-lg-*/
col-12 classes in the blade view */ .get-started-ribbon {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.55;
}

.get-started-section {
    position: relative;
}

.get-started-section .container {
    position: relative;
    z-index: 1;
}


/* ===================================================================
   CTA BANNER (pre-footer, sitewide)
   =================================================================== */
.cta-banner {
    position: relative;
    background: #05060a;
    color: #fff;
    overflow: hidden;
    min-height: 380px;
    display: flex;
    align-items: center;
}

.cta-banner-graphic {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.9;
}

.cta-banner-graphic svg {
    width: 100%;
    height: 100%;
}

.cta-banner-inner {
    position: relative;
    z-index: 1;
    max-width: 620px;
    margin-left: auto;
    padding-block: 4.5rem;
}

.cta-banner-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
    color: #fff;
}

.cta-banner-title {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 0.9rem;
    line-height: 1.15;
}

.cta-banner-desc {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    margin-bottom: 2rem;
    max-width: 480px;
}

.cta-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.cta-banner-actions .btn-outline-light {
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    background: transparent;
}

.cta-banner-actions .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 768px) {
    .cta-banner-inner {
        margin-left: 0;
        padding-block: 3.5rem;
    }

    .cta-banner-graphic {
        opacity: 0.4;
    }
}


/* ===================================================================
   DESIGN FIXES (render-audit pass)
   =================================================================== */

/* Bootstrap reboot re-adds ul padding; keep lists flush with their headings */
ul,
ol {
    padding-left: 0;
    margin-bottom: 0;
}

/* Cards now live inside proper .col wrappers — equalise heights */
.row>[class*="col"]>.resource-card,
.row>[class*="col"]>.value-card,
.row>[class*="col"]>.team-card,
.row>[class*="col"]>.content-card,
.row>[class*="col"]>.get-started-card,
.row>[class*="col"]>.contact-info-card {
    height: 100%;
}

.industries-photo-grid>.col>.industry-photo-card {
    display: flex;
}

/* Header rows: title left, action button right on the same line */
@media (min-width: 768px) {
    .section-header-row {
        flex-wrap: nowrap;
    }

    .section-header-left {
        min-width: 0;
    }
}

/* CTA banner: readable white title, calmer graphic behind the copy */
.cta-banner-title {
    color: #fff;
}

.cta-banner-inner {
    max-width: 740px;
}

.cta-banner-graphic {
    opacity: 0.55;
}

.cta-banner-graphic::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5, 6, 10, 0) 0%, rgba(5, 6, 10, 0.85) 45%, rgba(5, 6, 10, 0.9) 100%);
}

/* Get Started: soft gradient glows instead of hard stripe graphic; fix dark-on-dark text */
.get-started-ribbon svg {
    display: none;
}

.get-started-ribbon {
    opacity: 1;
    background:
        radial-gradient(55% 80% at 12% 15%, rgba(105, 4, 242, 0.35) 0%, transparent 70%),
        radial-gradient(45% 70% at 92% 85%, rgba(61, 92, 240, 0.28) 0%, transparent 70%);
}

.get-started-section p {
    color: rgba(255, 255, 255, 0.72) !important;
}

.get-started-card h4 {
    color: #fff;
}

/* Case study: text wordmark instead of a grey placeholder square */
.case-card-logo::before {
    display: none;
}

.case-card-logo {
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Testimonials bleed to the viewport edge like the services carousel */
.testimonials-scroll {
    margin-right: calc(50% - 50vw);
    padding-right: calc(50vw - 50%);
}

/* Resource thumbnails: line icons on the lavender tile */
.resource-card-thumb svg {
    color: var(--primary);
}

/* Examples decoration: softer fade so no box edge shows */
.examples-deco img {
    -webkit-mask-image: radial-gradient(ellipse 62% 58% at 62% 50%, #000 0%, rgba(0, 0, 0, 0.85) 40%, transparent 100%);
    mask-image: radial-gradient(ellipse 62% 58% at 62% 50%, #000 0%, rgba(0, 0, 0, 0.85) 40%, transparent 100%);
}

/* FAQ list aligns with the section header instead of floating centred */
.faq-list {
    max-width: 100%;
}

/* Header rows: the paragraph's own bottom margin was pushing the action button below the text */
.section-header-left .section-main-desc {
    margin-bottom: 0;
}

/* Line icons replace emoji on inner pages */
.value-card-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--primary-xlight);
    color: var(--primary);
}

.team-avatar span {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: -0.02em;
}

/* Automation examples: the blue glass panels image is the section background */
.examples-wrapper {
    background: #f1eff5 url('../images/GettyImages-2130152566.jpg') center / cover no-repeat;
}

.examples-wrapper .bento-card {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-color: rgba(255, 255, 255, 0.7);
}

.examples-deco {
    display: none;
}

/* Examples section: match reference (plain eyebrow, frosted cards, white tag pills) */
.examples-wrapper .section-tag-upper {
    background: none !important;
    border: 0;
    padding: 0;
    color: var(--text-main) !important;
    letter-spacing: 0.06em;
}

.examples-wrapper .section-main-heading {
    font-size: clamp(2.4rem, 4vw, 3.4rem);
}

.examples-wrapper .bento-card {
    background: rgba(255, 255, 255, 0.82);
    border-radius: 22px;
}

.examples-wrapper .bento-tag {
    background: #fff;
    border-radius: 999px;
    padding: 0.4rem 0.95rem;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
}

.examples-wrapper .bento-title {
    font-size: 1.35rem;
    margin-top: 0.75rem;
}


/* ===================================================================
   HOW WE WORK (reference layout): left header, bordered 4-step grid,
   description pinned to bottom, progress rail, plain call line
   =================================================================== */
.process-head {
    margin-bottom: 3rem;
}

.process-eyebrow {
    display: block;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-main);
    margin-bottom: 1rem;
}

.process-head .section-main-heading {
    margin-bottom: 0.9rem;
}

.process-lead {
    color: var(--text-main);
    margin: 0;
    max-width: none;
    font-size: 1.02rem;
}

.process-box {
    position: relative;
    background: #fff;
    border: 1px solid var(--border-card);
    border-radius: var(--radius-lg);
    box-shadow: none;
    overflow: hidden;
    margin-bottom: 2.5rem;
}

.process-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.1fr 1.1fr 0.85fr;
}

.process-step-col {
    padding: 2rem 2rem 2.6rem;
    border-right: 1px solid var(--border-card);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    min-height: 340px;
    cursor: default;
    transition: background var(--transition);
}

.process-step-col:last-child {
    border-right: 0;
}

.process-step-col:hover {
    background: transparent;
}

.process-step-col.is-active {
    background: #f8f7f5;
}

.process-step-num {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--text-main);
    opacity: 1;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-card);
}

.process-step-title {
    font-size: 1.45rem;
    font-weight: 400;
    line-height: 1.25;
    margin: 0;
    letter-spacing: -0.02em;
}

.process-step-desc {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

.process-progress {
    height: 5px;
    background: #e6e4e0;
    position: relative;
}

.process-progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 25%;
    background: var(--primary);
    transition: left 0.35s ease, width 0.35s ease;
}

.process-callout {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 1.1rem;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text-main);
}

.process-callout a {
    font-size: 1.5rem;
}

@media (max-width: 991px) {
    .process-grid {
        grid-template-columns: 1fr 1fr;
    }

    .process-step-col {
        min-height: 260px;
    }

    .process-step-col:nth-child(2) {
        border-right: 0;
    }

    .process-step-col:nth-child(-n+2) {
        border-bottom: 1px solid var(--border-card);
    }

    .process-progress {
        display: none;
    }
}

@media (max-width: 575px) {
    .process-grid {
        grid-template-columns: 1fr;
    }

    .process-step-col {
        border-right: 0;
        border-bottom: 1px solid var(--border-card);
        min-height: 0;
    }

    .process-step-col:last-child {
        border-bottom: 0;
    }

    .process-callout,
    .process-callout a {
        font-size: 1.15rem;
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Hero bottom (reference): white notch bottom-left + dotted band along the bottom edge */
.hero-wave {
    left: 0;
    right: auto;
    bottom: -1px;
    width: min(340px, 42vw);
    height: 72px;
}

.hero-dots {
    left: 14%;
    right: 0;
    bottom: 0;
    width: auto;
    height: 78px;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.95) 1.6px, transparent 1.7px);
    background-size: 11px 11px;
    background-position: 0 100%;
    -webkit-mask-image: linear-gradient(to top, #000 8%, transparent 100%), linear-gradient(to right, transparent 0%, #000 22%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to top, #000 8%, transparent 100%), linear-gradient(to right, transparent 0%, #000 22%);
    mask-composite: intersect;
}

@media (max-width: 767px) {
    .hero-wave {
        height: 44px;
    }

    .hero-dots {
        left: 0;
        height: 56px;
    }
}

/* Hero clip: reference notch (bottom-left) instead of the small rounded step */
.hero-wrapper {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 340.0px 100%, 330.9px calc(100% - 0.9px), 322.8px calc(100% - 3.3px), 315.5px calc(100% - 7.1px), 308.8px calc(100% - 12.1px), 302.3px calc(100% - 18.1px), 295.8px calc(100% - 24.9px), 289.2px calc(100% - 32.3px), 282.0px calc(100% - 40.0px), 273.4px calc(100% - 48.3px), 265.3px calc(100% - 55.1px), 257.4px calc(100% - 60.7px), 249.2px calc(100% - 65.0px), 240.4px calc(100% - 68.2px), 230.5px calc(100% - 70.4px), 219.2px calc(100% - 71.6px), 206.0px calc(100% - 72.0px), 0px calc(100% - 72.0px));
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 340.0px 100%, 330.9px calc(100% - 0.9px), 322.8px calc(100% - 3.3px), 315.5px calc(100% - 7.1px), 308.8px calc(100% - 12.1px), 302.3px calc(100% - 18.1px), 295.8px calc(100% - 24.9px), 289.2px calc(100% - 32.3px), 282.0px calc(100% - 40.0px), 273.4px calc(100% - 48.3px), 265.3px calc(100% - 55.1px), 257.4px calc(100% - 60.7px), 249.2px calc(100% - 65.0px), 240.4px calc(100% - 68.2px), 230.5px calc(100% - 70.4px), 219.2px calc(100% - 71.6px), 206.0px calc(100% - 72.0px), 0px calc(100% - 72.0px));
}

@media (max-width: 767px) {
    .hero-wrapper {
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 204.0px 100%, 198.5px calc(100% - 0.5px), 193.7px calc(100% - 2.0px), 189.3px calc(100% - 4.3px), 185.2px calc(100% - 7.3px), 181.4px calc(100% - 10.9px), 177.5px calc(100% - 14.9px), 173.5px calc(100% - 19.4px), 169.2px calc(100% - 24.0px), 164.0px calc(100% - 29.0px), 159.2px calc(100% - 33.1px), 154.5px calc(100% - 36.4px), 149.5px calc(100% - 39.0px), 144.3px calc(100% - 40.9px), 138.3px calc(100% - 42.2px), 131.5px calc(100% - 43.0px), 123.6px calc(100% - 43.2px), 0px calc(100% - 43.2px));
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 204.0px 100%, 198.5px calc(100% - 0.5px), 193.7px calc(100% - 2.0px), 189.3px calc(100% - 4.3px), 185.2px calc(100% - 7.3px), 181.4px calc(100% - 10.9px), 177.5px calc(100% - 14.9px), 173.5px calc(100% - 19.4px), 169.2px calc(100% - 24.0px), 164.0px calc(100% - 29.0px), 159.2px calc(100% - 33.1px), 154.5px calc(100% - 36.4px), 149.5px calc(100% - 39.0px), 144.3px calc(100% - 40.9px), 138.3px calc(100% - 42.2px), 131.5px calc(100% - 43.0px), 123.6px calc(100% - 43.2px), 0px calc(100% - 43.2px));
    }
}

.hero-dots {
    background-repeat: repeat;
    opacity: 1;
    z-index: 3;
}


/* ===================================================================
   INDUSTRIES (reference layout): photo cards, bottom-left notch,
   hover copy, arrows, notch shapes at section top/bottom
   =================================================================== */
.industries-dark-section {
    position: relative;
    background: #000;
    color: #fff;
    padding: 6.5rem 0 7rem;
}

.industries-dark-section::before,
.industries-dark-section::after {
    content: '';
    position: absolute;
    left: 0;
    width: 340px;
    pointer-events: none;
    z-index: 1;
}

/* black tab rising into the previous section */
.industries-dark-section::before {
    top: -54px;
    height: 54px;
    background: #000;
    -webkit-clip-path: polygon(0 0, 206.0px 0px, 219.2px 0.3px, 230.5px 1.2px, 240.4px 2.8px, 249.2px 5.2px, 257.4px 8.5px, 265.3px 12.7px, 273.4px 17.8px, 282.0px 24.0px, 289.2px 29.8px, 295.8px 35.3px, 302.3px 40.4px, 308.8px 44.9px, 315.5px 48.7px, 322.8px 51.5px, 330.9px 53.4px, 340.0px 54.0px, 0 54.0px);
    clip-path: polygon(0 0, 206.0px 0px, 219.2px 0.3px, 230.5px 1.2px, 240.4px 2.8px, 249.2px 5.2px, 257.4px 8.5px, 265.3px 12.7px, 273.4px 17.8px, 282.0px 24.0px, 289.2px 29.8px, 295.8px 35.3px, 302.3px 40.4px, 308.8px 44.9px, 315.5px 48.7px, 322.8px 51.5px, 330.9px 53.4px, 340.0px 54.0px, 0 54.0px);
}

/* white notch cut out of the bottom-left corner */
.industries-dark-section::after {
    bottom: -1px;
    height: 72px;
    background: #fff;
    -webkit-clip-path: polygon(0 0, 206.0px 0px, 219.2px 0.4px, 230.5px 1.6px, 240.4px 3.8px, 249.2px 7.0px, 257.4px 11.3px, 265.3px 16.9px, 273.4px 23.7px, 282.0px 32.0px, 289.2px 39.7px, 295.8px 47.1px, 302.3px 53.9px, 308.8px 59.9px, 315.5px 64.9px, 322.8px 68.7px, 330.9px 71.1px, 340.0px 72.0px, 0 72.0px);
    clip-path: polygon(0 0, 206.0px 0px, 219.2px 0.4px, 230.5px 1.6px, 240.4px 3.8px, 249.2px 7.0px, 257.4px 11.3px, 265.3px 16.9px, 273.4px 23.7px, 282.0px 32.0px, 289.2px 39.7px, 295.8px 47.1px, 302.3px 53.9px, 308.8px 59.9px, 315.5px 64.9px, 322.8px 68.7px, 330.9px 71.1px, 340.0px 72.0px, 0 72.0px);
}

.industries-dark-section .container {
    position: relative;
    z-index: 2;
}

.ind-head {
    padding-left: 4%;
    margin-bottom: 2.75rem;
}

.ind-eyebrow {
    display: block;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 1rem;
}

.ind-heading {
    font-size: clamp(2.3rem, 4vw, 3.4rem);
    font-weight: 400;
    letter-spacing: -0.03em;
    background: linear-gradient(90deg, #cbbfff 0%, #ece7ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 0.9rem;
}

.ind-sub {
    color: #fff;
    font-size: 1.02rem;
    margin: 0;
}

.ind-stage {
    position: relative;
    z-index: 2;
    width: min(1500px, calc(100% - 48px));
    margin-inline: auto;
}

.ind-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.ind-track::-webkit-scrollbar {
    display: none;
}

.ind-slide {
    flex: 0 0 calc((100% - 80px) / 5);
    min-width: 250px;
    scroll-snap-align: start;
}

.ind-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.9rem;
    height: 420px;
    padding: 1.5rem 1.25rem;
    border-radius: 22px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 139.4px 100%, 135.7px calc(100% - 0.4px), 132.3px calc(100% - 1.4px), 129.4px calc(100% - 3.0px), 126.6px calc(100% - 5.1px), 123.9px calc(100% - 7.6px), 121.3px calc(100% - 10.5px), 118.6px calc(100% - 13.5px), 115.6px calc(100% - 16.8px), 112.1px calc(100% - 20.3px), 108.8px calc(100% - 23.2px), 105.5px calc(100% - 25.5px), 102.2px calc(100% - 27.3px), 98.6px calc(100% - 28.6px), 94.5px calc(100% - 29.6px), 89.9px calc(100% - 30.1px), 84.5px calc(100% - 30.2px), 0px calc(100% - 30.2px));
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 139.4px 100%, 135.7px calc(100% - 0.4px), 132.3px calc(100% - 1.4px), 129.4px calc(100% - 3.0px), 126.6px calc(100% - 5.1px), 123.9px calc(100% - 7.6px), 121.3px calc(100% - 10.5px), 118.6px calc(100% - 13.5px), 115.6px calc(100% - 16.8px), 112.1px calc(100% - 20.3px), 108.8px calc(100% - 23.2px), 105.5px calc(100% - 25.5px), 102.2px calc(100% - 27.3px), 98.6px calc(100% - 28.6px), 94.5px calc(100% - 29.6px), 89.9px calc(100% - 30.1px), 84.5px calc(100% - 30.2px), 0px calc(100% - 30.2px));
    transition: transform 0.35s ease;
}

.ind-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.05) 45%, rgba(0, 0, 0, 0.35) 100%);
    transition: background 0.35s ease;
}

.ind-card:hover {
    transform: none;
    box-shadow: none;
}

.ind-card:hover::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.45) 100%);
}

.ind-card .industry-card-title {
    position: relative;
    z-index: 2;
    font-size: 1.15rem;
    font-weight: 500;
    margin: 0;
}

.ind-card .industry-card-excerpt {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    backdrop-filter: none;
    color: #fff;
    font-size: 0.86rem;
    line-height: 1.45;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.ind-card:hover .industry-card-excerpt,
.ind-card:focus-visible .industry-card-excerpt {
    opacity: 1;
    transform: none;
}

.ind-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 2rem;
    padding-inline: 1.25rem;
}

.ind-note {
    color: #fff;
    font-size: 0.82rem;
    margin: 0;
}

.ind-nav {
    display: flex;
    gap: 0.6rem;
}

.ind-arrow {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), opacity var(--transition-fast);
}

.ind-arrow:hover {
    background: rgba(255, 255, 255, 0.28);
}

.ind-arrow[disabled] {
    opacity: 0.35;
    cursor: default;
}

@media (max-width: 767px) {
    .industries-dark-section {
        padding: 4.5rem 0 5rem;
    }

    .industries-dark-section::before,
    .industries-dark-section::after {
        width: 190px;
    }

    .industries-dark-section::before {
        top: -32px;
        height: 32px;
        -webkit-clip-path: polygon(0 0, 115.1px 0px, 122.5px 0.1px, 128.8px 0.5px, 134.4px 1.3px, 139.3px 2.3px, 143.9px 3.7px, 148.3px 5.6px, 152.8px 7.8px, 157.6px 10.6px, 161.6px 13.1px, 165.3px 15.5px, 168.9px 17.8px, 172.5px 19.8px, 176.3px 21.4px, 180.4px 22.7px, 184.9px 23.5px, 190.0px 23.8px, 0 23.8px);
        clip-path: polygon(0 0, 115.1px 0px, 122.5px 0.1px, 128.8px 0.5px, 134.4px 1.3px, 139.3px 2.3px, 143.9px 3.7px, 148.3px 5.6px, 152.8px 7.8px, 157.6px 10.6px, 161.6px 13.1px, 165.3px 15.5px, 168.9px 17.8px, 172.5px 19.8px, 176.3px 21.4px, 180.4px 22.7px, 184.9px 23.5px, 190.0px 23.8px, 0 23.8px);
    }

    .industries-dark-section::after {
        height: 44px;
        -webkit-clip-path: polygon(0 0, 115.1px 0px, 122.5px 0.2px, 128.8px 1.0px, 134.4px 2.3px, 139.3px 4.3px, 143.9px 6.9px, 148.3px 10.3px, 152.8px 14.5px, 157.6px 19.6px, 161.6px 24.3px, 165.3px 28.8px, 168.9px 32.9px, 172.5px 36.6px, 176.3px 39.6px, 180.4px 42.0px, 184.9px 43.5px, 190.0px 44.0px, 0 44.0px);
        clip-path: polygon(0 0, 115.1px 0px, 122.5px 0.2px, 128.8px 1.0px, 134.4px 2.3px, 139.3px 4.3px, 143.9px 6.9px, 148.3px 10.3px, 152.8px 14.5px, 157.6px 19.6px, 161.6px 24.3px, 165.3px 28.8px, 168.9px 32.9px, 172.5px 36.6px, 176.3px 39.6px, 180.4px 42.0px, 184.9px 43.5px, 190.0px 44.0px, 0 44.0px);
    }

    .ind-head {
        padding-left: 0;
    }

    .ind-slide {
        flex-basis: 78%;
    }

    .ind-card .industry-card-excerpt {
        opacity: 1;
        transform: none;
    }

    .ind-foot {
        flex-direction: column;
        align-items: flex-start;
    }
}

.ind-stage {
    width: min(1500px, 84%);
}

.ind-arrow[disabled] {
    opacity: 0.6;
}

@media (max-width: 991px) {
    .ind-stage {
        width: min(1500px, calc(100% - 48px));
    }
}

.about-mission-row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 2rem;
}

@media (min-width: 992px) {
    .about-mission-row {
        --bs-gutter-x: 5rem;
    }
}


/* ===================================================================
   PROVEN RESULTS (reference): staggered sticky card deck + entrance/stack animation
   =================================================================== */
.proof-section {
    padding-block: 6rem 7rem;
}

.case-study-list {
    display: block;
    position: relative;
    margin-top: 1rem;
}

.case-card {
    position: sticky;
    width: 76%;
    margin-bottom: 16vh;
    padding: 2.1rem 2.5rem 2.5rem;
    border-radius: 26px;
    transform-origin: 50% 0;
    scale: var(--s, 1);
    filter: brightness(calc(1 - var(--dim, 0) * 0.08));
    box-shadow: 0 34px 60px -38px rgba(20, 10, 60, 0.35);
    opacity: 0;
    translate: 0 70px;
}

.case-card.is-in {
    opacity: 1;
    translate: 0 0;
    transition: opacity 0.8s ease, translate 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.case-card:nth-child(1) {
    top: 110px;
    margin-left: 0;
}

.case-card:nth-child(2) {
    top: 140px;
    margin-left: 12%;
}

.case-card:nth-child(3) {
    top: 170px;
    margin-left: 24%;
    margin-bottom: 0;
}

.case-card-purple {
    background: #dcc7fb;
}

.case-card-blue {
    background: #a8dcfd;
}

.case-card-green {
    background: #7fe391;
}

.case-card-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.case-card-num {
    font-size: 1.05rem;
    font-weight: 500;
    color: #0d0d0d;
}

.case-card-title {
    font-size: 1.3rem;
    font-weight: 400;
    text-align: center;
    flex: none;
    margin: 0;
    letter-spacing: -0.01em;
}

.case-card-logo {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: #0d0d0d;
}

.case-card-logo::before {
    display: none;
}

.case-card-tags {
    margin-bottom: 0;
}

.case-card-columns {
    display: grid;
    grid-template-columns: 265px 1fr;
    column-gap: 2.5rem;
    row-gap: 1.15rem;
    margin-top: 2.6rem;
}

.case-stat-block {
    grid-row: 1 / span 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 330px;
    padding: 1.75rem;
    background: rgba(255, 255, 255, 0.32);
    border-radius: 22px;
}

.case-stat-arrow {
    margin-bottom: auto;
    display: block;
    width: auto;
    height: auto;
    color: #0d0d0d;
}

.case-stat-arrow svg {
    width: 64px;
    height: 64px;
    opacity: 0;
    translate: 0 26px;
}

.case-card.is-in .case-stat-arrow svg {
    animation: caseArrowRise 0.95s 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.15) forwards;
}

@keyframes caseArrowRise {
    to {
        opacity: 1;
        translate: 0 0;
    }
}

.case-stat-number {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-size: 3.4rem;
    line-height: 1;
    letter-spacing: -0.03em;
    font-weight: 400;
}

.case-stat-label {
    font-size: 1.05rem;
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: 0;
    max-width: 6rem;
    margin: 0;
    color: #0d0d0d;
}

.case-stat-desc {
    margin-top: 0.9rem;
    font-size: 0.86rem;
    color: rgba(13, 13, 13, 0.75);
}

.case-detail-col {
    padding: 0 0 0 1.1rem;
    border-left: 3px solid rgba(13, 13, 13, 0.16);
    border-top: 0;
    opacity: 0;
    translate: 0 14px;
}

.case-card.is-in .case-detail-col {
    opacity: 1;
    translate: 0 0;
    transition: opacity 0.6s ease, translate 0.6s ease;
    transition-delay: calc(var(--i, 0) * 0.13s + 0.45s);
}

.case-detail-col:nth-child(2) {
    --i: 0;
}

.case-detail-col:nth-child(3) {
    --i: 1;
}

.case-detail-col:nth-child(4) {
    --i: 2;
}

.case-detail-col p {
    max-width: 34rem;
}

.case-detail-last {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 1.5rem;
    align-items: end;
}

.case-detail-last .case-detail-label {
    grid-column: 1 / -1;
}

.case-read-more {
    margin: 0;
    padding: 0.85rem 1.4rem;
    background: #fff;
    gap: 0.6rem;
}

.case-read-more svg {
    transition: transform 0.25s ease;
}

.case-read-more:hover svg {
    transform: translateX(4px);
}

@media (max-width: 991px) {
    .case-card {
        position: relative;
        top: auto !important;
        width: 100%;
        margin: 0 0 1.25rem !important;
        scale: 1;
        filter: none;
        padding: 1.6rem 1.4rem 1.8rem;
    }

    .case-card-head {
        grid-template-columns: auto 1fr;
    }

    .case-card-title {
        text-align: left;
    }

    .case-card-logo {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .case-card-columns {
        grid-template-columns: 1fr;
        margin-top: 1.6rem;
    }

    .case-stat-block {
        grid-row: auto;
        min-height: 220px;
    }

    .case-detail-last {
        grid-template-columns: 1fr;
        row-gap: 1rem;
    }

    .case-read-more {
        justify-self: start;
    }
}

@media (prefers-reduced-motion: reduce) {

    .case-card,
    .case-detail-col,
    .case-stat-arrow svg {
        opacity: 1 !important;
        translate: none !important;
        animation: none !important;
        transition: none !important;
        scale: 1 !important;
    }
}


/* ===================================================================
   GET STARTED (reference): full-bleed image, info card + form card, notch corners
   =================================================================== */
.gs-section {
    position: relative;
    padding: 8.5rem 0 9rem;
    overflow: visible;
    background: #1a1f6b;
}

.gs-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
}

.gs-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(18, 20, 90, 0.35) 0%, rgba(30, 24, 110, 0.25) 100%);
}

.gs-section::before,
.gs-section::after {
    content: '';
    position: absolute;
    left: 0;
    z-index: 2;
    pointer-events: none;
}

.gs-section::before {
    top: -1px;
    width: 340px;
    height: 72px;
    background: var(--bg-off, #f9fafb);
    -webkit-clip-path: polygon(0.0px 0.0px, 206.0px 0.0px, 219.2px 0.4px, 230.5px 1.6px, 240.4px 3.8px, 249.2px 7.0px, 257.4px 11.3px, 265.3px 16.9px, 273.4px 23.7px, 282.0px 32.0px, 289.2px 39.7px, 295.8px 47.1px, 302.3px 53.9px, 308.8px 59.9px, 315.5px 64.9px, 322.8px 68.7px, 330.9px 71.1px, 340.0px 72.0px, 0.0px 72.0px);
    clip-path: polygon(0.0px 0.0px, 206.0px 0.0px, 219.2px 0.4px, 230.5px 1.6px, 240.4px 3.8px, 249.2px 7.0px, 257.4px 11.3px, 265.3px 16.9px, 273.4px 23.7px, 282.0px 32.0px, 289.2px 39.7px, 295.8px 47.1px, 302.3px 53.9px, 308.8px 59.9px, 315.5px 64.9px, 322.8px 68.7px, 330.9px 71.1px, 340.0px 72.0px, 0.0px 72.0px);
}

.gs-section::after {
    bottom: -1px;
    width: 240px;
    height: 46px;
    background: #fff;
    -webkit-clip-path: polygon(0.0px 46.0px, 145.4px 46.0px, 154.7px 45.8px, 162.7px 45.0px, 169.7px 43.6px, 175.9px 41.5px, 181.7px 38.8px, 187.3px 35.2px, 193.0px 30.8px, 199.1px 25.6px, 204.1px 20.6px, 208.8px 15.9px, 213.4px 11.6px, 217.9px 7.7px, 222.7px 4.5px, 227.8px 2.1px, 233.6px 0.5px, 240.0px 0.0px, 0.0px 0.0px);
    clip-path: polygon(0.0px 46.0px, 145.4px 46.0px, 154.7px 45.8px, 162.7px 45.0px, 169.7px 43.6px, 175.9px 41.5px, 181.7px 38.8px, 187.3px 35.2px, 193.0px 30.8px, 199.1px 25.6px, 204.1px 20.6px, 208.8px 15.9px, 213.4px 11.6px, 217.9px 7.7px, 222.7px 4.5px, 227.8px 2.1px, 233.6px 0.5px, 240.0px 0.0px, 0.0px 0.0px);
}

.gs-wrap {
    position: relative;
    z-index: 3;
}

.gs-grid {
    max-width: 1080px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: stretch;
}

.gs-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 3rem;
    padding: 2.1rem 2.2rem 2.2rem;
    border-radius: 22px;
    color: #fff;
    background: rgba(38, 42, 120, 0.58);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.gs-eyebrow {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.8rem;
    color: #fff;
}

.gs-title {
    color: #fff;
    font-size: clamp(2rem, 3vw, 2.6rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0 0 1rem;
}

.gs-lead {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.85rem;
    line-height: 1.45;
    margin: 0;
}

.gs-info-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    padding-top: 2rem;
}

.gs-copy {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0 0 1.4rem;
}

.gs-checks {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 0 0 1.8rem;
}

.gs-checks li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: #fff;
    font-size: 0.85rem;
}

.gs-checks svg {
    color: rgba(255, 255, 255, 0.55);
    flex-shrink: 0;
}

.gs-tiles {
    display: flex;
    gap: 12px;
}

.gs-tile {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.95rem 1.1rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    min-width: 0;
    transition: background var(--transition-fast);
}

.gs-tile:hover {
    background: rgba(255, 255, 255, 0.26);
}

.gs-tile span {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.9;
}

.gs-tile strong {
    font-size: 0.85rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.gs-form-card {
    background: #f8f7f5;
    border-radius: 22px;
    padding: 2.1rem 2.25rem 2.25rem;
    color: var(--text-main);
}

.gs-form-head {
    text-align: center;
    margin-bottom: 1.6rem;
}

.gs-form-head svg {
    margin: 0 auto 0.9rem;
    color: #111;
}

.gs-form-head h3 {
    font-size: 1.35rem;
    font-weight: 500;
    margin: 0 0 0.6rem;
}

.gs-form-head p {
    font-size: 0.78rem;
    line-height: 1.5;
    color: #6b7280;
    margin: 0 auto;
    max-width: 30rem;
}

.gs-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gs-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.gs-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.gs-field label {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #374151;
}

.gs-field input,
.gs-field select,
.gs-field textarea {
    width: 100%;
    font: inherit;
    font-size: 0.86rem;
    color: var(--text-main);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 0.7rem 0.8rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.gs-field textarea {
    resize: vertical;
    min-height: 104px;
}

.gs-field input:focus,
.gs-field select:focus,
.gs-field textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(105, 4, 242, 0.14);
}

.gs-note {
    font-size: 0.7rem;
    color: #6b7280;
    margin: -0.2rem 0 0;
}

.gs-submit {
    align-self: flex-start;
    padding: 0.9rem 1.5rem;
    margin-top: 0.3rem;
}

@media (max-width: 991px) {
    .gs-section {
        padding: 6rem 0 6.5rem;
    }

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

    .gs-section::before {
        width: 200px;
        height: 42px;
        -webkit-clip-path: polygon(0.0px 0.0px, 121.2px 0.0px, 128.9px 0.2px, 135.6px 0.9px, 141.4px 2.2px, 146.6px 4.1px, 151.4px 6.6px, 156.1px 9.8px, 160.8px 13.8px, 165.9px 18.7px, 170.1px 23.2px, 174.0px 27.5px, 177.8px 31.4px, 181.6px 34.9px, 185.6px 37.8px, 189.9px 40.1px, 194.6px 41.5px, 200.0px 42.0px, 0.0px 42.0px);
        clip-path: polygon(0.0px 0.0px, 121.2px 0.0px, 128.9px 0.2px, 135.6px 0.9px, 141.4px 2.2px, 146.6px 4.1px, 151.4px 6.6px, 156.1px 9.8px, 160.8px 13.8px, 165.9px 18.7px, 170.1px 23.2px, 174.0px 27.5px, 177.8px 31.4px, 181.6px 34.9px, 185.6px 37.8px, 189.9px 40.1px, 194.6px 41.5px, 200.0px 42.0px, 0.0px 42.0px);
    }
}

@media (max-width: 575px) {
    .gs-row {
        grid-template-columns: 1fr;
    }

    .gs-tiles {
        flex-direction: column;
    }

    .gs-info,
    .gs-form-card {
        padding: 1.6rem 1.35rem;
    }
}


/* ===================================================================
   FROM OUR BLOG (reference): big image cards with notch + white tag pill
   =================================================================== */
.blog-section {
    background: #faf9f8;
    padding: 6.5rem 0 7.5rem;
}

.blog-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    margin-bottom: 3.25rem;
}

.blog-eyebrow {
    display: block;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-main);
    margin-bottom: 1rem;
}

.blog-heading {
    font-size: clamp(2.5rem, 4.4vw, 3.7rem);
    font-weight: 400;
    letter-spacing: -0.035em;
    line-height: 1.05;
    margin: 0;
}

.blog-all {
    display: inline-flex;
    align-items: center;
    padding: 1rem 2rem;
    border-radius: 999px;
    background: #fff;
    color: var(--text-main);
    font-size: 1.05rem;
    font-weight: 500;
    box-shadow: 0 8px 26px rgba(20, 10, 60, 0.08);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.blog-all:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(20, 10, 60, 0.14);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.25rem;
}

.blog-card {
    display: block;
    color: inherit;
}

.blog-thumb {
    position: relative;
    overflow: hidden;
    aspect-ratio: 516 / 562;
    border-radius: 26px;
    background: #e9e7f3;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 136.0px 100%, 132.3px calc(100% - 0.4px), 129.1px calc(100% - 1.6px), 126.2px calc(100% - 3.6px), 123.5px calc(100% - 6.1px), 120.9px calc(100% - 9.1px), 118.3px calc(100% - 12.4px), 115.7px calc(100% - 16.1px), 112.8px calc(100% - 20.0px), 109.4px calc(100% - 24.1px), 106.1px calc(100% - 27.6px), 103.0px calc(100% - 30.3px), 99.7px calc(100% - 32.5px), 96.2px calc(100% - 34.1px), 92.2px calc(100% - 35.2px), 87.7px calc(100% - 35.8px), 82.4px calc(100% - 36.0px), 0px calc(100% - 36.0px));
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 136.0px 100%, 132.3px calc(100% - 0.4px), 129.1px calc(100% - 1.6px), 126.2px calc(100% - 3.6px), 123.5px calc(100% - 6.1px), 120.9px calc(100% - 9.1px), 118.3px calc(100% - 12.4px), 115.7px calc(100% - 16.1px), 112.8px calc(100% - 20.0px), 109.4px calc(100% - 24.1px), 106.1px calc(100% - 27.6px), 103.0px calc(100% - 30.3px), 99.7px calc(100% - 32.5px), 96.2px calc(100% - 34.1px), 92.2px calc(100% - 35.2px), 87.7px calc(100% - 35.8px), 82.4px calc(100% - 36.0px), 0px calc(100% - 36.0px));
}

.blog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.blog-card:hover .blog-thumb img {
    transform: scale(1.05);
}

.blog-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 0.65rem 1.25rem;
    border-radius: 999px;
    background: #fff;
    color: var(--text-main);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.blog-title {
    font-size: 1.7rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    margin: 1.6rem 0 0.7rem;
    transition: color var(--transition-fast);
}

.blog-card:hover .blog-title {
    color: var(--primary);
}

.blog-desc {
    font-size: 1.02rem;
    line-height: 1.6;
    color: #6b6b6b;
    margin: 0;
    max-width: 32rem;
}

@media (max-width: 991px) {
    .blog-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.75rem;
    }

    .blog-section {
        padding: 5rem 0 5.5rem;
    }
}

@media (max-width: 640px) {
    .blog-head {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 2.25rem;
    }

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

    .blog-thumb {
        aspect-ratio: 4 / 4.2;
    }
}


/* ===================================================================
   FAQ — "Pipeline": questions are nodes on a live data rail; the answer
   is executed on a terminal-style stage (typed output, packet travels)
   =================================================================== */
.pf-section {
    position: relative;
    padding: 7rem 0 7.5rem;
    background: #fff;
}

.pf-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 4.5rem;
    align-items: start;
}

.pf-eyebrow {
    display: block;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.pf-heading {
    font-size: clamp(2.4rem, 4vw, 3.5rem);
    font-weight: 400;
    letter-spacing: -0.035em;
    line-height: 1.05;
    margin: 0 0 1rem;
}

.pf-sub {
    color: var(--text-muted);
    font-size: 1.05rem;
    margin: 0;
    max-width: 30rem;
}

.pf-list {
    --y0: 0px;
    --y1: 0px;
    position: relative;
    list-style: none;
    margin: 2.6rem 0 2rem;
    padding: 0;
}

.pf-rail {
    position: absolute;
    left: 18px;
    top: var(--y0);
    height: calc(var(--y1) - var(--y0));
    width: 2px;
    background: #e8e5f1;
    border-radius: 2px;
}

.pf-rail-fill {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
    border-radius: 2px;
    background: linear-gradient(180deg, #a855f7, var(--primary));
    transition: height 0.7s cubic-bezier(0.65, 0, 0.2, 1);
}

.pf-packet {
    position: absolute;
    left: 12px;
    top: 0;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border-radius: 50%;
    z-index: 3;
    background: #fff;
    border: 3px solid var(--primary);
    box-shadow: 0 0 0 5px rgba(105, 4, 242, 0.14), 0 0 18px rgba(105, 4, 242, 0.55);
    transition: top 0.7s cubic-bezier(0.65, 0, 0.2, 1);
}

.pf-node {
    position: relative;
}

.pf-btn {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    width: 100%;
    padding: 0.95rem 0;
    background: none;
    border: 0;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.pf-dot {
    position: relative;
    z-index: 2;
    flex: 0 0 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1.5px solid #d9d5e6;
    color: #8a85a0;
    transition: background 0.35s, border-color 0.35s, color 0.35s, transform 0.35s;
}

.pf-num {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.pf-q {
    font-size: 1.12rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #77738c;
    transition: color 0.3s, transform 0.35s;
}

.pf-btn:hover .pf-dot {
    border-color: var(--primary);
    color: var(--primary);
}

.pf-btn:hover .pf-q {
    color: #0d0d0d;
}

.pf-node.is-active .pf-dot {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: scale(1.06);
}

.pf-node.is-active .pf-dot::after {
    content: '';
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 2px solid rgba(105, 4, 242, 0.35);
    animation: pfPulse 1.9s ease-out infinite;
}

.pf-node.is-active .pf-q {
    color: #0d0d0d;
    transform: translateX(4px);
}

@keyframes pfPulse {
    0% {
        transform: scale(0.85);
        opacity: 1;
    }

    100% {
        transform: scale(1.35);
        opacity: 0;
    }
}

.pf-answer {
    display: none;
}

.pf-cta {
    margin-top: 0.5rem;
}

.pf-stage {
    position: sticky;
    top: 110px;
    overflow: hidden;
    border-radius: 26px;
    color: #fff;
    background:
        radial-gradient(60% 50% at 88% 0%, rgba(168, 85, 247, 0.38), transparent 70%),
        radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 / 22px 22px,
        linear-gradient(165deg, #0c0a22 0%, #191248 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 40px 80px -40px rgba(20, 10, 80, 0.6);
    min-height: 470px;
    display: flex;
    flex-direction: column;
}

.pf-stage-bar,
.pf-stage-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.55);
}

.pf-stage-bar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pf-stage-foot {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: auto;
}

.pf-lights {
    display: inline-flex;
    gap: 6px;
}

.pf-lights i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
}

.pf-lights i:nth-child(1) {
    background: #ff6b63;
}

.pf-lights i:nth-child(2) {
    background: #fdbd41;
}

.pf-lights i:nth-child(3) {
    background: #33c95a;
}

.pf-stage-title {
    margin-right: auto;
    margin-left: 0.4rem;
}

.pf-counter b {
    color: #fff;
    font-weight: 600;
}

.pf-stage-body {
    padding: 2rem 2rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 1.7rem;
}

.pf-tag {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.3rem 0.65rem;
    border-radius: 6px;
    margin-bottom: 0.8rem;
}

.pf-tag-in {
    background: rgba(168, 85, 247, 0.2);
    color: #dcbfff;
}

.pf-tag-out {
    background: rgba(52, 211, 153, 0.16);
    color: #86efc8;
}

.pf-query {
    font-size: 1.45rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0;
    animation: pfIn 0.5s ease both;
}

.pf-query::before {
    content: '›';
    color: #b47bff;
    margin-right: 0.6rem;
}

@keyframes pfIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.pf-output {
    font-size: 1.04rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.84);
    margin: 0;
    min-height: 7.5rem;
}

.pf-caret {
    display: inline-block;
    width: 8px;
    height: 1.05em;
    margin-left: 3px;
    vertical-align: -0.15em;
    background: #b47bff;
    animation: pfBlink 1s steps(2) infinite;
}

.pf-stage.is-done .pf-caret {
    opacity: 0;
    animation: none;
}

@keyframes pfBlink {
    50% {
        opacity: 0;
    }
}

.pf-status {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.pf-status i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fdbd41;
    box-shadow: 0 0 10px #fdbd41;
}

.pf-stage.is-done .pf-status i {
    background: #33c95a;
    box-shadow: 0 0 10px #33c95a;
}

.pf-hint kbd {
    font: inherit;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
}

.pf-progress {
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
}

.pf-progress span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #a855f7, #6ee7b7);
}

@media (max-width: 991px) {
    .pf-section {
        padding: 5rem 0 5.5rem;
    }

    .pf-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .pf-stage {
        display: none;
    }

    .pf-answer {
        display: block;
        max-height: 0;
        overflow: hidden;
        margin-left: calc(38px + 1.2rem);
        opacity: 0;
        transition: max-height 0.5s ease, opacity 0.4s ease;
    }

    .pf-node.is-active .pf-answer {
        max-height: 420px;
        opacity: 1;
    }

    .pf-answer p {
        color: var(--text-muted);
        font-size: 0.98rem;
        line-height: 1.65;
        margin: 0 0 0.9rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .pf-rail-fill,
    .pf-packet,
    .pf-dot,
    .pf-q {
        transition: none;
    }

    .pf-node.is-active .pf-dot::after,
    .pf-caret,
    .pf-query {
        animation: none;
    }
}

@media (max-width: 991px) {

    .pf-packet,
    .pf-rail-fill {
        transition: none;
    }
}

/* FAQ stage: no window chrome — just the content card */
.pf-stage {
    min-height: 440px;
}

.pf-stage-body {
    position: relative;
    padding: 2.6rem 2.4rem 2.4rem;
    flex: 1;
}

.pf-counter {
    position: absolute;
    top: 1.5rem;
    right: 1.8rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.5);
}

.pf-counter b {
    color: #fff;
    font-weight: 600;
}

.pf-stage-body .pf-io:first-of-type {
    margin-top: 0.6rem;
}

.pf-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

/* No rectangular focus box on FAQ rows; the numbered dot carries the focus ring */
.pf-btn:focus,
.pf-btn:focus-visible {
    outline: none;
    box-shadow: none;
    border-radius: 0;
}

.pf-btn:focus-visible .pf-dot {
    box-shadow: 0 0 0 4px rgba(105, 4, 242, 0.28);
    border-color: var(--primary);
}

.pf-query::before {
    display: none;
}


/* ===================================================================
   FAQ STAGE v2 - word-by-word reveal, highlighted key phrases,
   answer visuals, cursor-follow glow, per-answer CTA
   =================================================================== */
.pf-stage {
    --mx: 70%;
    --my: 20%;
    background:
        radial-gradient(420px circle at var(--mx) var(--my), rgba(168, 85, 247, 0.28), transparent 65%),
        radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 / 22px 22px,
        linear-gradient(165deg, #0c0a22 0%, #191248 100%);
}

.pf-stage::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url('../images/GettyImages-1449835474.jpg') center / cover;
    opacity: 0.16;
    filter: blur(22px) saturate(1.2);
    mix-blend-mode: screen;
    -webkit-mask-image: linear-gradient(160deg, #000 0%, transparent 65%);
    mask-image: linear-gradient(160deg, #000 0%, transparent 65%);
}

.pf-stage-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.pf-caret {
    display: none;
}

.pf-output {
    min-height: 0;
}

.pf-output mark {
    color: #fff;
    font-weight: 600;
    background-color: transparent;
    background-image: linear-gradient(transparent 62%, rgba(168, 85, 247, 0.55) 62%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    animation: pfMark 0.6s 0.55s ease forwards;
}

.pf-output.is-static mark {
    animation: none;
    background-size: 100% 100%;
}

@keyframes pfMark {
    to {
        background-size: 100% 100%;
    }
}

.pf-w {
    display: inline-block;
    opacity: 0;
    transform: translateY(7px);
    filter: blur(3px);
    animation: pfWord 0.5s var(--d, 0ms) cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.pf-output.is-static .pf-w {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
}

@keyframes pfWord {
    to {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

.pf-visual {
    margin-top: 1.5rem;
    padding-top: 1.4rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.14);
    opacity: 0;
    transform: translateY(10px);
}

.pf-visual.is-in {
    animation: pfVis 0.7s 0.25s ease forwards;
}

@keyframes pfVis {
    to {
        opacity: 1;
        transform: none;
    }
}

.v-time {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    position: relative;
}

.v-time-step {
    position: relative;
    padding: 0.9rem 0.9rem 0.85rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.v-time-step i {
    display: block;
    font-style: normal;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 0.3rem;
}

.v-time-step b {
    font-weight: 500;
    font-size: 0.95rem;
    color: #fff;
}

.v-time-step::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    border-radius: 0 0 12px 12px;
    background: linear-gradient(90deg, #a855f7, #6ee7b7);
    transform-origin: left;
    transform: scaleX(0);
    animation: pfGrow 0.8s ease forwards;
}

.v-time-step:nth-child(1)::after {
    animation-delay: 0.5s;
}

.v-time-step:nth-child(2)::after {
    animation-delay: 0.9s;
}

.v-time-step:nth-child(3)::after {
    animation-delay: 1.3s;
}

.v-time-step.is-live {
    background: rgba(52, 211, 153, 0.14);
    border-color: rgba(52, 211, 153, 0.4);
}

@keyframes pfGrow {
    to {
        transform: scaleX(1);
    }
}

.v-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.v-chips span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    font-size: 0.8rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.14);
    opacity: 0;
    animation: pfChip 0.45s ease forwards;
}

.v-chips span:nth-child(1) {
    animation-delay: 0.45s;
}

.v-chips span:nth-child(2) {
    animation-delay: 0.6s;
}

.v-chips span:nth-child(3) {
    animation-delay: 0.75s;
}

.v-chips span:nth-child(4) {
    animation-delay: 0.9s;
}

.v-chips span:nth-child(5) {
    animation-delay: 1.05s;
}

.v-chips span.ok {
    background: rgba(52, 211, 153, 0.16);
    border-color: rgba(52, 211, 153, 0.42);
    color: #a7f3d0;
}

.v-chips u {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

@keyframes pfChip {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.v-own {
    display: grid;
    gap: 8px;
}

.v-own div {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.95rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.88rem;
    color: #fff;
    opacity: 0;
    animation: pfChip 0.45s ease forwards;
}

.v-own div:nth-child(1) {
    animation-delay: 0.45s;
}

.v-own div:nth-child(2) {
    animation-delay: 0.65s;
}

.v-own div:nth-child(3) {
    animation-delay: 0.85s;
}

.v-own i {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(52, 211, 153, 0.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236ee7b7' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.v-own b {
    margin-left: auto;
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6ee7b7;
}

.v-flow {
    display: flex;
    align-items: center;
    gap: 8px;
}

.v-flow-node {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 0.9rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.86rem;
    color: #fff;
    opacity: 0;
    animation: pfChip 0.45s ease forwards;
}

.v-flow-node:nth-child(1) {
    animation-delay: 0.45s;
}

.v-flow-node:nth-child(3) {
    animation-delay: 0.95s;
}

.v-flow-node:nth-child(5) {
    animation-delay: 1.45s;
}

.v-flow-node i {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-style: normal;
    font-size: 0.68rem;
    font-weight: 600;
    background: #fdbd41;
    color: #241a00;
}

.v-flow-node.is-ok {
    background: rgba(52, 211, 153, 0.14);
    border-color: rgba(52, 211, 153, 0.4);
}

.v-flow-node.is-ok i {
    background: #34d399;
    color: #04241a;
}

.v-flow em {
    flex: 1;
    height: 2px;
    min-width: 14px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.15), #a855f7);
    transform-origin: left;
    transform: scaleX(0);
    animation: pfGrow 0.5s ease forwards;
}

.v-flow em:nth-of-type(1) {
    animation-delay: 0.75s;
}

.v-flow em:nth-of-type(2) {
    animation-delay: 1.25s;
}

.v-meters {
    display: grid;
    gap: 12px;
}

.v-meters div span {
    display: block;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 0.35rem;
}

.v-meters b {
    display: block;
    height: 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.v-meters b::after {
    content: '';
    position: absolute;
    inset: 0;
    width: var(--w);
    border-radius: 6px;
    background: linear-gradient(90deg, #a855f7, #6ee7b7);
    transform-origin: left;
    transform: scaleX(0);
    animation: pfGrow 1s 0.5s ease forwards;
}

.pf-more {
    align-self: flex-start;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.2rem;
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 500;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.pf-more:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(3px);
}

.pf-more svg {
    transition: transform 0.25s;
}

.pf-more:hover svg {
    transform: translateX(3px);
}

.pf-stage {
    min-height: 560px;
}

@media (max-width: 991px) {
    .pf-answer mark {
        background: none;
        color: inherit;
        font-weight: 600;
    }
}

@media (prefers-reduced-motion: reduce) {

    .pf-w,
    .pf-output mark,
    .pf-visual.is-in,
    .v-chips span,
    .v-own div,
    .v-flow-node,
    .v-flow em,
    .v-time-step::after,
    .v-meters b::after {
        animation: none !important;
        opacity: 1;
        transform: none;
        filter: none;
        background-size: 100% 100%;
    }
}

/* FAQ polish: clean highlight (no underline bar) + packet only visible while travelling */
.pf-output mark,
.pf-output.is-static mark {
    background: none;
    background-image: none;
    animation: none;
    color: #d9c2ff;
    font-weight: 600;
}

.pf-packet {
    opacity: 0;
    transition: top 0.7s cubic-bezier(0.65, 0, 0.2, 1), opacity 0.18s ease;
}

.pf-packet.is-moving {
    opacity: 1;
}

.pf-node.is-active .pf-dot {
    z-index: 4;
}

@media (max-width: 991px) {
    .pf-packet {
        display: none;
    }
}


/* ===================================================================
   SITE END (reference): CTA + footer on one black canvas with the
   particle burst; logo sits on the burst's focal line
   =================================================================== */
.se-wrap {
    position: relative;
    background: #000;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}

.se-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.se-bg img {
    position: absolute;
    left: -2%;
    top: 50%;
    transform: translateY(-50%);
    width: 62%;
    height: 130%;
    max-height: 980px;
    object-fit: cover;
    object-position: right center;
    mix-blend-mode: screen;
    opacity: 0.95;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%);
}

.se-wrap::before {
    content: '';
    position: absolute;
    left: 56%;
    right: 5%;
    top: 50%;
    height: 1px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(190, 160, 255, 0.9), rgba(190, 160, 255, 0.15));
}

.se-cta {
    position: relative;
    z-index: 2;
    padding: 6.5rem 0 4.5rem;
}

.se-cta-inner {
    margin-left: 41%;
    max-width: 760px;
}

.se-title {
    color: #fff;
    font-size: clamp(2.1rem, 3.6vw, 3rem);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0 0 1rem;
}

.se-lead {
    color: rgba(255, 255, 255, 0.86);
    font-size: 1rem;
    margin: 0 0 3.2rem;
    max-width: 40rem;
}

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

.se-btn {
    display: inline-flex;
    align-items: center;
    padding: 1.05rem 1.9rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    transition: background var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
}

.se-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

.se-btn-solid {
    background: #fff;
    color: #000;
    border-color: #fff;
}

.se-btn-solid:hover {
    background: #f1eaff;
    color: #000;
    border-color: #f1eaff;
}

.se-footer {
    position: relative;
    z-index: 2;
    padding: 0 0 2.5rem;
    background: transparent;
}

.se-main {
    position: relative;
    display: grid;
    grid-template-columns: 41% 1fr;
    align-items: start;
    padding: 4rem 0 3.5rem;
}

.se-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    margin-top: -1.2rem;
}

.se-logo b {
    font-weight: 600;
    color: #c9a8ff;
}

.se-cols {
    display: grid;
    grid-template-columns: 1.15fr 1fr 0.7fr;
    gap: 2.5rem;
    max-width: 760px;
}

.se-col h5 {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin: 0 0 1.35rem;
}

.se-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.7rem;
}

.se-col a {
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.95rem;
    transition: color var(--transition-fast);
}

.se-col a:hover {
    color: #c9a8ff;
}

.se-social {
    display: grid;
    grid-template-columns: repeat(2, 24px);
    gap: 1.05rem 1.6rem;
}

.se-social a {
    display: inline-flex;
    color: #fff;
    opacity: 0.92;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.se-social a:hover {
    opacity: 1;
    transform: translateY(-2px);
    color: #c9a8ff;
}

.se-bottom {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem 2.25rem;
    padding-top: 1.6rem;
    margin-left: 41%;
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.86rem;
}

.se-legal {
    display: flex;
    gap: 1.6rem;
}

.se-legal a {
    color: rgba(255, 255, 255, 0.86);
}

.se-legal a:hover {
    color: #c9a8ff;
}

.se-top {
    margin-left: 0.5rem;
    display: inline-flex;
    color: #fff;
    transition: transform var(--transition-fast);
}

.se-top:hover {
    transform: translateY(-3px);
    color: #c9a8ff;
}

@media (max-width: 991px) {
    .se-bg img {
        width: 130%;
        left: -30%;
        opacity: 0.55;
        height: 100%;
    }

    .se-wrap::before {
        display: none;
    }

    .se-cta {
        padding: 5rem 0 3rem;
    }

    .se-cta-inner {
        margin-left: 0;
    }

    .se-main {
        grid-template-columns: 1fr;
        gap: 2.2rem;
        padding: 2.5rem 0 2.5rem;
    }

    .se-logo {
        margin-top: 0;
    }

    .se-cols {
        grid-template-columns: 1fr 1fr;
    }

    .se-col-social {
        grid-column: 1 / -1;
    }

    .se-social {
        grid-template-columns: repeat(5, 24px);
    }

    .se-bottom {
        margin-left: 0;
    }
}

@media (max-width: 575px) {
    .se-btn {
        width: 100%;
        justify-content: center;
    }

    .se-cols {
        grid-template-columns: 1fr;
    }
}

/* Logo rides the burst's focal line (vertical centre of the block), like the reference */
.se-main {
    position: static;
}

.se-logo {
    position: absolute;
    z-index: 3;
    margin: 0;
    top: 50%;
    transform: translateY(-50%);
    left: max(1.75rem, calc((100vw - var(--max-width)) / 2 + 1.75rem));
}

@media (max-width: 991px) {
    .se-logo {
        position: static;
        transform: none;
    }

    .se-main {
        position: relative;
    }
}

.se-cols {
    grid-column: 2;
}

@media (max-width: 991px) {
    .se-cols {
        grid-column: 1;
    }
}

.se-footer {
    position: static;
}

.se-cols,
.se-bottom {
    position: relative;
    z-index: 2;
}


/* ---- Site end v2: match reference proportions (full-width layout, bounded burst image) ---- */
.se-cta .container,
.se-footer .container {
    max-width: none;
    padding-inline: 0;
}

.se-bg img {
    left: 13.8%;
    width: 41.5%;
    height: 830px;
    max-height: none;
    top: 50%;
    transform: translateY(-50%);
    object-fit: cover;
    object-position right center;
    opacity: 1;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 100%);
}

.se-wrap::before {
    left: 55%;
    right: 9%;
}

.se-cta {
    padding: 8rem 0 5rem;
}

.se-cta-inner {
    margin-left: 49.5%;
    max-width: none;
    padding-right: 6%;
}

.se-title {
    font-size: clamp(2rem, 2.45vw, 3rem);
    line-height: 1.12;
    white-space: nowrap;
}

.se-lead {
    font-size: clamp(1rem, 0.95vw, 1.15rem);
    margin-bottom: 3.6rem;
    max-width: none;
}

.se-btn {
    padding: 0.95rem 1.9rem;
    font-size: clamp(1rem, 1.02vw, 1.2rem);
}

.se-footer {
    padding-bottom: 6.5rem;
}

.se-main {
    grid-template-columns: 49.5% 1fr;
    padding: 4.2rem 6% 3.2rem 0;
}

.se-cols {
    max-width: none;
    grid-template-columns: 1fr 1fr 0.8fr;
    gap: 2rem;
}

.se-col h5 {
    font-size: clamp(1.05rem, 1.04vw, 1.25rem);
    margin-bottom: 1.5rem;
}

.se-col ul {
    gap: 0.55rem;
}

.se-col a {
    font-size: clamp(0.95rem, 1vw, 1.15rem);
}

.se-logo {
    left: 7.8vw;
    font-size: clamp(1.2rem, 1.3vw, 1.6rem);
}

.se-bottom {
    margin-left: 49.5%;
    padding-right: 6%;
    gap: 1rem 2.6rem;
    font-size: clamp(0.86rem, 0.95vw, 1.1rem);
}

@media (max-width: 991px) {
    .se-bg img {
        left: -30%;
        width: 130%;
        height: 100%;
        opacity: 0.5;
    }

    .se-cta .container,
    .se-footer .container {
        padding-inline: 1.75rem;
    }

    .se-cta-inner {
        margin-left: 0;
        padding-right: 0;
    }

    .se-title {
        white-space: normal;
    }

    .se-main {
        grid-template-columns: 1fr;
        padding: 2.5rem 0;
    }

    .se-cols {
        grid-template-columns: 1fr 1fr;
    }

    .se-bottom {
        margin-left: 0;
        padding-right: 0;
    }

    .se-logo {
        left: auto;
    }
}

@media (max-width: 575px) {
    .se-cols {
        grid-template-columns: 1fr;
    }
}

.se-main {
    padding-left: 0;
}

.se-cols {
    grid-column: 2;
    margin-left: 0;
}

.se-main .se-cols {
    margin-left: 0;
    padding-left: 0;
}

@media (min-width: 992px) {
    .se-main {
        grid-template-columns: 49.5% 1fr;
    }

    .se-cols {
        grid-template-columns: 1fr 1fr 0.8fr;
    }

    .se-cta-inner,
    .se-bottom {
        margin-left: 49.5%;
    }

    .se-main {
        padding-left: 0;
    }

    .se-cols {
        margin-left: 0;
        transform: none;
    }
}

.se-main {
    column-gap: 0;
}

.se-footer .se-main>.se-cols {
    justify-self: start;
}

@media (min-width: 992px) {
    .se-main {
        padding-right: 0;
        margin-right: 6%;
        grid-template-columns: calc(49.5% / 0.94) 1fr;
    }

    .se-bottom {
        margin-right: 6%;
        padding-right: 0;
    }
}

/* soften every edge of the burst image so no rectangle shows */
.se-bg img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-composite: intersect;
}

/* tighter type/buttons on ~1440 so the row of pills stays on one line */
@media (min-width: 992px) and (max-width: 1600px) {
    .se-btn {
        padding: 0.85rem 1.35rem;
        font-size: 0.95rem;
    }

    .se-actions {
        gap: 10px;
        flex-wrap: nowrap;
    }

    .se-title {
        font-size: clamp(1.7rem, 2.3vw, 2.4rem);
    }

    .se-cta-inner {
        padding-right: 3%;
    }

    .se-cta {
        padding-top: 7rem;
    }
}

/* Fixed-proportion canvas: burst tip, light line and logo all sit on the CTA/footer boundary at any width */
@media (min-width: 992px) {
    .se-wrap {
        display: flex;
        flex-direction: column;
        min-height: 45vw;
    }

    .se-cta {
        flex: 0 0 50%;
        padding: 0;
        display: flex;
        align-items: center;
    }

    .se-cta-inner {
        padding-block: 5.5rem 4rem;
    }

    .se-footer {
        flex: 1;
        padding-bottom: 3rem;
    }

    .se-main {
        padding-top: 3.4rem;
    }

    .se-bg img {
        height: 43.5vw;
    }

    .se-logo {
        top: 0;
        transform: translateY(-50%);
    }

    .se-footer {
        position: relative;
    }

    .se-footer .se-main {
        position: static;
    }

    .se-wrap::before {
        top: 50%;
    }

    .se-bottom {
        flex-wrap: nowrap;
        gap: 1rem 2rem;
    }

    .se-top {
        margin-left: 0.25rem;
    }
}

@media (min-width: 992px) {
    .se-wrap {
        display: grid;
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 100%;
        min-height: 45vw;
    }

    .se-cta,
    .se-footer {
        flex: none;
        min-height: 0;
    }

    .se-main {
        padding-top: 3.6rem;
    }
}

/* Floating back-to-top: bottom-right, only shown when the visitor reaches the end of the page */
.to-top {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 1100;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 14, 48, 0.72);
    color: #fff;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 14px 34px rgba(20, 10, 80, 0.45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(0.9);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, background 0.2s;
}

.to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}

.to-top:hover {
    background: var(--primary);
    border-color: var(--primary);
    transform: translateY(-3px);
}

@media (max-width: 575px) {
    .to-top {
        right: 16px;
        bottom: 16px;
        width: 46px;
        height: 46px;
    }
}

/* Mobile: industries carousel shows exactly one card at a time (no neighbours peeking) */
@media (max-width: 767px) {
    .ind-stage {
        width: calc(100% - 40px);
    }

    .ind-track {
        gap: 0;
        scroll-snap-type: x mandatory;
    }

    .ind-slide {
        flex: 0 0 100%;
        min-width: 100%;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    .ind-card {
        height: 440px;
    }
}

/* ---- Mobile site-end: single column, burst band with the logo on its focal line ---- */
@media (max-width: 991px) {
    .se-wrap {
        display: block;
        min-height: 0;
    }

    .se-bg,
    .se-wrap::before {
        display: none;
    }

    .se-cta {
        padding: 4.5rem 0 2.5rem;
        display: block;
    }

    .se-cta .container,
    .se-footer .container {
        padding-inline: 1.5rem;
    }

    .se-cta-inner {
        margin: 0;
        padding: 0;
    }

    .se-title {
        font-size: clamp(1.9rem, 8vw, 2.4rem);
        white-space: normal;
    }

    .se-lead {
        margin-bottom: 2rem;
        font-size: 1rem;
    }

    .se-actions {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 12px;
    }

    .se-btn {
        width: 100%;
        justify-content: center;
        padding: 0.95rem 1.4rem;
        font-size: 1rem;
    }

    .se-footer {
        position: relative;
        padding-bottom: 5rem;
    }

    .se-main {
        position: relative;
        display: block;
        margin: 0;
        padding: 0;
        padding-top: 250px;
    }

    .se-main::before {
        content: '';
        position: absolute;
        left: -1.5rem;
        right: -1.5rem;
        top: 0;
        height: 250px;
        z-index: 0;
        pointer-events: none;
        background: url('../images/GettyImages-2223051380.jpg') 78% 50% / cover no-repeat;
        mix-blend-mode: screen;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%), linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
        -webkit-mask-composite: source-in;
        mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%), linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
        mask-composite: intersect;
    }

    .se-main::after {
        content: '';
        position: absolute;
        left: 42%;
        right: 0;
        top: 125px;
        height: 1px;
        z-index: 1;
        background: linear-gradient(90deg, rgba(190, 160, 255, 0.9), rgba(190, 160, 255, 0.1));
    }

    .se-logo {
        position: absolute;
        left: 0;
        top: 125px;
        transform: translateY(-50%);
        margin: 0;
        z-index: 2;
        font-size: 1.2rem;
    }

    .se-cols {
        position: relative;
        z-index: 2;
        display: grid;
        grid-column: auto;
        grid-template-columns: 1fr 1fr;
        gap: 2.2rem 1.5rem;
        margin: 0;
        padding: 0;
        max-width: none;
    }

    .se-col-social {
        grid-column: 1 / -1;
    }

    .se-col h5 {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }

    .se-col ul {
        gap: 0.7rem;
    }

    .se-col a {
        font-size: 0.98rem;
    }

    .se-social {
        grid-template-columns: repeat(5, 26px);
        gap: 1.4rem;
    }

    .se-bottom {
        position: relative;
        z-index: 2;
        display: block;
        margin: 2.5rem 0 0;
        padding: 1.6rem 0 0;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
        font-size: 0.86rem;
    }

    .se-legal {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem 1.4rem;
        margin-top: 0.9rem;
    }
}

@media (max-width: 420px) {
    .se-cols {
        grid-template-columns: 1fr;
    }

    .se-social {
        grid-template-columns: repeat(5, 26px);
    }
}

/* ---- Mobile site-end v2 (reference): burst on top with centred logo, centred CTA, then link columns ---- */
@media (max-width: 991px) {
    .se-wrap {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        overflow: hidden;
        border-radius: 30px 30px 0 0;
        margin-top: -2px;
    }

    .se-wrap::before {
        display: block;
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 330px;
        z-index: 0;
        pointer-events: none;
        background: url('../images/GettyImages-2223051380.jpg') 75% 50% / cover no-repeat;
        mix-blend-mode: screen;
        -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
    }

    .se-wrap::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 330px;
        height: 60px;
        z-index: 0;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0), #000);
    }

    .se-footer,
    .se-footer .container,
    .se-main {
        display: contents;
    }

    .se-footer .container {
        padding: 0;
    }

    .se-logo {
        order: 1;
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        height: 330px;
        margin: 0;
        padding-top: 70px;
        font-size: 1.45rem;
    }

    .se-cta {
        order: 2;
        position: relative;
        z-index: 2;
        padding: 1.5rem 0 3rem;
        text-align: center;
    }

    .se-cta .container {
        padding-inline: 1.5rem;
    }

    .se-cta-inner {
        margin: 0;
        padding: 0;
    }

    .se-title {
        font-size: clamp(1.8rem, 7.4vw, 2.3rem);
        line-height: 1.12;
        white-space: normal;
        background: linear-gradient(180deg, #cdbdff 0%, #ffffff 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }

    .se-lead {
        max-width: 24rem;
        margin: 0 auto 2rem;
        font-size: 1.02rem;
        line-height: 1.6;
    }

    .se-actions {
        flex-direction: column;
        align-items: center;
        flex-wrap: nowrap;
        gap: 14px;
    }

    .se-btn {
        width: auto;
        min-width: 0;
        padding: 0.95rem 1.9rem;
        font-size: 1rem;
    }

    .se-btn-solid {
        min-width: 15rem;
        justify-content: center;
    }

    .se-cols {
        order: 3;
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2.4rem 1.5rem;
        margin: 0;
        padding: 1rem 1.75rem 0;
        max-width: none;
        text-align: left;
    }

    .se-col-social {
        grid-column: 1 / -1;
        text-align: center;
    }

    .se-col-social h5 {
        text-align: center;
    }

    .se-social {
        grid-template-columns: repeat(5, auto);
        justify-content: center;
        gap: 1.6rem;
    }

    .se-bottom {
        order: 4;
        position: relative;
        z-index: 2;
        display: block;
        text-align: center;
        margin: 2.6rem 1.75rem 0;
        padding: 1.6rem 0 6rem;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
    }

    .se-legal {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.6rem 1.4rem;
        margin-top: 0.9rem;
    }
}

@media (max-width: 420px) {
    .se-cols {
        grid-template-columns: 1fr 1fr;
        gap: 2rem 1rem;
        padding-inline: 1.5rem;
    }

    .se-col a {
        font-size: 0.92rem;
    }
}

@media (max-width: 991px) {
    .se-footer .se-main .se-cols {
        padding-left: 1.75rem;
        padding-right: 1.75rem;
        margin-left: 0;
        justify-self: stretch;
    }

    .se-footer .se-main>.se-cols {
        justify-self: stretch;
    }
}

@media (max-width: 420px) {
    .se-footer .se-main .se-cols {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* ---- Mobile site-end v3: short fan converging on the logo, cream section with rounded lower corners over black ---- */
@media (max-width: 991px) {
    main {
        position: relative;
        z-index: 3;
        border-radius: 0 0 34px 34px;
        overflow: hidden;
    }

    .se-wrap {
        border-radius: 0;
        margin-top: -34px;
        padding-top: 34px;
    }

    .se-wrap::before {
        top: calc(34px + 105px - 50vw);
        left: calc(50% - 105px);
        right: auto;
        width: 210px;
        height: 100vw;
        transform: rotate(90deg);
        background-position: 62% 50%;
        background-size: cover;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 35%, #000 65%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0%, #000 35%, #000 65%, transparent 100%);
    }

    .se-wrap::after {
        top: calc(34px + 150px);
        height: 70px;
    }

    .se-logo {
        height: 210px;
        padding-top: 0;
        align-items: flex-end;
        padding-bottom: 22px;
        font-size: 1.35rem;
    }

    .se-cta {
        padding: 1.25rem 0 2.6rem;
    }
}

@media (max-width: 991px) {
    .se-wrap::before {
        width: 230px;
        left: calc(50% - 115px);
        top: calc(34px + 115px - 50vw);
        background-position: 100% 50%;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 100%);
        mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 100%);
    }

    .se-wrap::after {
        top: calc(34px + 205px);
        height: 40px;
    }

    .se-logo {
        height: 230px;
        padding-bottom: 12px;
    }

    .se-cta {
        padding-top: 1.6rem;
    }
}

@media (max-width: 991px) {

    .se-main::before,
    .se-main::after {
        display: none;
    }

    .se-logo {
        padding-bottom: 4px;
    }
}

@media (max-width: 991px) {
    .se-wrap::before {
        top: calc(34px + 115px - 50vw - 22px);
    }

    .se-logo {
        padding-bottom: 0;
    }
}

/* Mobile burst: tip up under the cream section, the open "flower" side faces down toward the logo */
@media (max-width: 991px) {
    .se-wrap::before {
        width: 300px;
        left: calc(50% - 150px);
        top: calc(34px + 150px - 50vw);
        transform: rotate(-90deg);
        background-position: 100% 50%;
        -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 70%, transparent 100%);
        mask-image: linear-gradient(90deg, #000 0%, #000 70%, transparent 100%);
    }

    .se-wrap::after {
        top: calc(34px + 250px);
        height: 50px;
    }

    .se-logo {
        height: 300px;
        align-items: flex-end;
        padding-bottom: 6px;
    }

    .se-cta {
        padding-top: 1.2rem;
    }
}

/* Mobile burst v4 (reference proportions): short squashed fan hanging from the cream edge, logo right beneath */
@media (max-width: 991px) {
    .se-wrap::before {
        width: 150px;
        left: calc(50% - 75px);
        top: calc(34px + 75px - 50vw);
        transform: rotate(-90deg);
        background-size: 100% 100%;
        background-position: 0 0;
        background-repeat: no-repeat;
        -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 100%);
        mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 100%);
    }

    .se-wrap::after {
        top: calc(34px + 118px);
        height: 40px;
    }

    .se-logo {
        height: 168px;
        padding-bottom: 6px;
    }

    .se-cta {
        padding-top: 0.6rem;
    }
}

/* Mobile burst v5 (matched to reference): longer fan hanging from the cream edge, logo inside its lower part, hairline divider under it */
@media (max-width: 991px) {
    .se-wrap::before {
        width: 205px;
        left: calc(50% - 102px);
        top: calc(34px + 102px - 50vw);
        background-size: 100% 100%;
        opacity: 0.8;
        -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 45%, transparent 100%);
        mask-image: linear-gradient(90deg, #000 0%, #000 45%, transparent 100%);
    }

    .se-wrap::after {
        top: calc(34px + 165px);
        height: 44px;
    }

    .se-logo {
        height: 205px;
        align-items: center;
        padding: 60px 0 0;
        gap: 0.7rem;
        font-size: 1.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.13);
    }

    .se-logo svg {
        width: 32px;
        height: 32px;
    }

    .se-cta {
        padding-top: 1.4rem;
    }
}

@media (max-width: 991px) {
    .se-wrap::before {
        opacity: 1;
        filter: brightness(1.25) saturate(1.15);
    }

    .se-title {
        font-size: clamp(1.5rem, 5.3vw, 1.95rem);
        letter-spacing: -0.025em;
    }

    .se-lead {
        font-size: 0.95rem;
        max-width: 22rem;
        margin-bottom: 1.7rem;
    }

    .se-btn {
        padding: 0.8rem 1.6rem;
        font-size: 0.95rem;
    }

    .se-btn-solid {
        min-width: 0;
    }

    .se-actions {
        gap: 12px;
    }

    .se-cta {
        padding-bottom: 2.2rem;
    }
}

/* Mobile burst v6: fan ~3.3x bigger, top ~70% tucked under the cream section, only its wide lower part shows */
@media (max-width: 991px) {
    .se-wrap::before {
        width: 680px;
        left: calc(50% - 340px);
        top: calc(-135px - 50vw);
        background-size: 100% 100%;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 100%);
        mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 100%);
    }
}

@media (max-width: 991px) {
    .se-wrap::before {
        filter: brightness(1.9) saturate(1.3) contrast(1.1);
    }
}

/* Mobile burst v7: top 50% tucked under the cream section, lower half visible */
@media (max-width: 991px) {
    .se-wrap::before {
        width: 410px;
        left: calc(50% - 205px);
        top: calc(0px - 50vw);
        filter: brightness(1.5) saturate(1.2);
    }
}

/* ---- Mobile footer links v2: tidy chips instead of ragged two-column lists ---- */
@media (max-width: 991px) {
    .se-footer .se-main .se-cols {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 1.2rem 1.5rem 0;
    }

    .se-col,
    .se-col-social {
        text-align: center;
        grid-column: auto;
    }

    .se-col h5,
    .se-col-social h5 {
        display: flex;
        align-items: center;
        gap: 0.9rem;
        margin: 0 0 1.1rem;
        font-family: 'IBM Plex Sans', sans-serif;
        font-size: 0.72rem;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.6);
    }

    .se-col h5::before,
    .se-col h5::after {
        content: '';
        flex: 1;
        height: 1px;
        background: rgba(255, 255, 255, 0.14);
    }

    .se-col ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 9px;
    }

    .se-col li a {
        display: inline-flex;
        align-items: center;
        padding: 0.6rem 1rem;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        background: rgba(255, 255, 255, 0.05);
        font-size: 0.88rem;
        line-height: 1.2;
        color: rgba(255, 255, 255, 0.92);
        transition: background var(--transition-fast), border-color var(--transition-fast);
    }

    .se-col li a:active,
    .se-col li a:hover {
        background: rgba(168, 85, 247, 0.22);
        border-color: rgba(168, 85, 247, 0.55);
        color: #fff;
    }

    .se-social {
        display: flex;
        justify-content: center;
        gap: 12px;
    }

    .se-social a {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.18);
        background: rgba(255, 255, 255, 0.05);
    }

    .se-bottom {
        margin: 2.2rem 1.5rem 0;
        padding: 1.3rem 0 5.5rem;
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.65);
    }

    .se-legal {
        gap: 0.4rem 1.2rem;
    }

    .se-legal a {
        color: rgba(255, 255, 255, 0.75);
        font-size: 0.8rem;
    }
}


/* ===== Home audit fixes ===== */

/* Industries (desktop): all five cards fit, and the heading lines up with the first card */
@media (min-width: 992px) {
    .ind-stage {
        width: min(calc(var(--max-width) - 3.5rem), calc(100% - 3.5rem));
    }

    .ind-head {
        padding-left: 0;
    }

    .ind-slide {
        min-width: 200px;
    }

    .ind-foot {
        padding-inline: 0;
    }
}

@media (min-width: 1200px) {
    .ind-slide {
        min-width: 0;
    }
}

/* Eyebrows: same plain style everywhere (Proof, Client stories) + left-aligned testimonial header */
.proof-section .section-tag-upper,
.testimonials-section .section-tag-upper {
    background: none;
    border: 0;
    padding: 0;
    border-radius: 0;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    color: var(--text-main);
}

.testimonials-section .text-center {
    text-align: left !important;
}

.testimonials-section .section-main-heading {
    font-size: clamp(2.3rem, 4vw, 3.4rem);
    font-weight: 400;
    letter-spacing: -0.035em;
}

.proof-section .section-main-heading {
    font-size: clamp(2.3rem, 4vw, 3.4rem);
    font-weight: 400;
    letter-spacing: -0.035em;
}

/* FAQ: Bootstrap's <mark> adds padding, which showed as a gap before punctuation */
.pf-output mark,
.pf-answer mark {
    padding: 0;
}

/* Tiny labels in the automation cards were 9.6px */
.pipeline-label {
    font-size: 0.7rem;
}

/* Bigger tap targets */
.process-callout a {
    display: inline-block;
    padding: 0.4rem 0.2rem;
}

.se-legal a {
    display: inline-block;
    padding: 0.55rem 0.15rem;
}

.se-logo {
    padding-block: 0.4rem;
}

/* Mobile alignment */
@media (max-width: 991px) {
    .ind-foot {
        padding-inline: 0;
    }

    .ind-stage {
        width: calc(100% - 40px);
    }
}

@media (max-width: 575px) {
    .services-carousel-wrap {
        padding-left: 1.25rem;
    }

    .services-carousel-nav {
        padding-right: 1.25rem;
    }

    .services-carousel-track {
        scroll-padding-inline: 0;
        padding-right: 1.25rem;
    }
}

.gs-eyebrow,
.pf-tag {
    font-size: 0.72rem;
}

.gs-tile span {
    font-size: 0.7rem;
}

@media (max-width: 575px) {
    .services-container .services-carousel-wrap {
        padding-left: 0;
    }

    .services-container .services-carousel-nav {
        padding-right: 0;
    }
}

/* ===================================================================
   FOOTER (Pro Theme Design)
   =================================================================== */
.ft-footer {
    position: relative;
    background: linear-gradient(135deg, #38008a 0%, #5202c4 30%, #6904f2 65%, #4900a3 100%);
    color: #ffffff;
    padding: 4.5rem 0 2.25rem;
    overflow: hidden;
}

.ft-footer::before {
    content: '';
    position: absolute;
    top: -100px;
    left: 25%;
    width: 650px;
    height: 280px;
    background: radial-gradient(ellipse at center, rgba(190, 140, 255, 0.28) 0%, rgba(105, 4, 242, 0) 70%);
    pointer-events: none;
    filter: blur(35px);
}

.ft-glow-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(219, 211, 255, 0.35) 15%, rgba(255, 255, 255, 0.9) 50%, rgba(219, 211, 255, 0.35) 85%, transparent 100%);
    box-shadow: 0 1px 8px rgba(219, 211, 255, 0.4);
}

.ft-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3.5rem;
    padding-bottom: 2.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

/* Brand Pane */
.ft-brand-pane {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    max-width: 500px;
}

.ft-brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #ffffff;
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    width: fit-content;
}

.ft-logo-spark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.32);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16), inset 0 1px 1px rgba(255, 255, 255, 0.45);
    transition: transform 0.3s ease, background 0.3s ease;
}

.ft-brand-logo:hover .ft-logo-spark {
    transform: scale(1.08) rotate(6deg);
    background: rgba(255, 255, 255, 0.25);
}

.ft-logo-title b {
    color: #DBD3FF;
    font-weight: 700;
}

.ft-tagline {
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.96rem;
    line-height: 1.6;
    margin: 0;
}

.ft-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.42rem 0.95rem;
    width: fit-content;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 0.82rem;
    font-weight: 500;
    color: #f3e8ff;
    letter-spacing: 0.01em;
}

.ft-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 10px #4ade80;
    animation: ftPulse 2s infinite ease-in-out;
}

@keyframes ftPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}

/* Action Pane */
.ft-action-pane {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1.25rem;
}

.ft-contact-card {
    display: inline-flex;
    align-items: center;
    gap: 1.1rem;
    padding: 0.9rem 1.45rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.26);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14), inset 0 1px 1px rgba(255, 255, 255, 0.25);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ft-contact-card:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #5202c4;
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
}

.ft-contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.18);
    color: #DBD3FF;
    transition: all 0.25s ease;
}

.ft-contact-card:hover .ft-contact-icon {
    background: #f3f0ff;
    color: #6904f2;
}

.ft-contact-details {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.ft-contact-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.82;
    font-weight: 600;
}

.ft-contact-address {
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.ft-contact-arrow {
    display: flex;
    align-items: center;
    transition: transform 0.25s ease;
    opacity: 0.85;
}

.ft-contact-card:hover .ft-contact-arrow {
    transform: translateX(4px);
    opacity: 1;
}

/* Social Bar */
.ft-social-bar {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.ft-social-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ft-social-links {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.ft-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #ffffff;
    text-decoration: none;
    transition: all 0.2s ease;
}

.ft-social-btn:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #6904f2;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

/* Baseline */
.ft-baseline {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 1.75rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.88rem;
}

.ft-baseline-tag {
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.68);
    letter-spacing: 0.02em;
}

@media (max-width: 860px) {
    .ft-footer {
        padding: 3.5rem 0 2rem;
    }

    .ft-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 2.25rem;
    }

    .ft-action-pane {
        align-items: flex-start;
        width: 100%;
    }

    .ft-contact-card {
        width: 100%;
        justify-content: space-between;
    }

    .ft-baseline {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}