@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

/* Global reset */
html,
body {
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
}

.fa-arrow-right {
    font-size: 0.9em;
    line-height: 1;
}

a .fa-arrow-right,
button .fa-arrow-right {
    margin-left: 2px;
}

.trademark {
    font-size: 0.48em;
    line-height: 0;
    vertical-align: super;
    letter-spacing: 0;
    margin-left: 1px;
    font-weight: 600;
}

body.page-product-single .nav-logo img {
    width: auto;
    max-width: 150px;
    height: auto;
    display: block;
}

body.page-product-single .footer-brand h3 img {
    max-width: 200px;
}

body.page-product-single .footer-event-title {
    display: block;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
}

body.page-product-single .footer-event-date {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

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

/* Extracted from index.html */
/* ============ FOUNDATION ============ */
:root {
    /* Bright, vibrant, crisp palette */
    --teal: #02B87F;
    --teal-soft: #4BCEA5;
    --teal-dark: #13aa7a;
    --teal-deep: #00875c;
    --yellow: #F2B416;
    --yellow-soft: #ffd15c;
    --dark: #242A39;
    --extra-dark: #1c1f27;
    --ink: #101219;
    --ink-soft: #242A39;
    --paper: #FBFBFD;
    --light-grey: #f3f3f5;
    --line: #E5E5EE;
    /* Electric primary � pushed brighter & more saturated */
    --indigo: #2F67FF;
    --indigo-deep: #2D1FD9;
    --indigo-bright: #6D5BFF;
    /* Vibrant accents � turned UP, no purple */
    --cyan: #00D4FF;
    --cyan-bright: #22EFFF;
    --lime: #C4FF3D;
    --coral: #FF4F7B;
    --coral-bright: #FF2E63;
    --amber: #FFB800;
    --orange: #FB923C;
    /* matches logo stars */
    --orange-soft: #FDB353;
    /* matches logo soft star fill */
    --pink: #FF6B9D;
    --rose: #FF1F5A;
    /* Gradients � indigo ? cyan ? lime, no purple */
    --grad-hero: linear-gradient(135deg, #4bcea5 0%, #13aa7a 60%, #09675a 100%);
    --grad-mesh: radial-gradient(at 20% 20%, rgb(2 184 127 / 12%) 0px, transparent 50%), radial-gradient(at 80% 0%, rgb(255 202 0 / 30%) 0px, transparent 50%), radial-gradient(at 70% 80%, rgba(251, 146, 60, 0.22) 0px, transparent 50%), radial-gradient(at 0% 100%, rgba(196, 255, 61, 0.22) 0px, transparent 50%);
    --grad-yellow: linear-gradient(135deg, #fb923c 0%, #f2b416 50%, #ffdb80 100%);
    --grad-teal-yellow: linear-gradient(90deg, #19b37d 0%, #6edc6b 40%, #b2ed5e 70%, #f2b416 100%);
    /* Typography */
    --font-display: 'Outfit', -apple-system, sans-serif;
    --font-sans: 'Outfit', -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

body.page-home * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body.page-home {
    font-family: var(--font-sans);
    background: var(--paper);
    color: var(--ink);
    font-size: 16px;
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.page-home a {
    color: inherit;
    text-decoration: none;
}

body.page-home button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

body.page-home img {
    max-width: 100%;
    display: block;
}

body.page-home .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}

body.page-home

/* ============ NAV ============ */
.nav {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 1280px;
    background: rgba(251, 251, 253, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(229, 229, 238, 0.8);
    border-radius: 100px;
    padding: 10px 12px 10px 24px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 30px rgba(10, 14, 42, 0.04);
    transition: all 0.3s ease;
}

body.page-home .nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.page-home .nav-logo img {
    max-width: 150px;
}

body.page-home .nav-logo-svg {
    height: 32px;
    width: auto;
    flex-shrink: 0;
    display: block;
}

@keyframes pulse-mark {

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

    50% {
        transform: scale(0.7);
        opacity: 0.7;
    }
}

body.page-home .nav-links {
    display: flex;
    gap: 4px;
    align-items: center;
    list-style: none;
}

body.page-home .nav-links a {
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft);
    transition: all 0.2s ease;
}

body.page-home .nav-links a:hover {
    background: rgba(2, 184, 127, 0.08);
    color: var(--teal-dark);
}

body.page-home .nav-links a.active {
    background: rgba(2, 184, 127, 0.12);
    color: var(--teal-dark);
}

body.page-home .nav-cta {
    display: flex;
    gap: 8px;
    align-items: center;
}



body.page-home

/* ============ HERO ============ */
.hero {
    padding: 140px 0 80px;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

body.page-home .hero-bg {
    position: absolute;
    inset: 0;
    background: var(--grad-mesh), var(--paper);
    z-index: 0;
}

body.page-home .hero-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(10, 14, 42, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 14, 42, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 40%, transparent 100%);
    z-index: 0;
}

body.page-home .hero-content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 60px;
    align-items: center;
    width: 100%;
}

body.page-home .hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: #ffffff6e;
    border: 1px solid #02b87f45;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: var(--teal-dark);
    margin-bottom: 28px;
    animation: fade-up 0.8s ease forwards;
}

body.page-home .hero-tag>div {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

body.page-home .hero-tag-dot {
    display: inline-flex;
    width: 6px;
    height: 6px;
    background: var(--yellow);
    border-radius: 50%;
    animation: blink 2s ease-in-out infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

body.page-home .hero h1 {
    font-family: var(--font-display);
    font-size: clamp(48px, 7vw, 75px);
    line-height: 0.95;
    letter-spacing: -0.04em;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 32px;
    animation: fade-up 0.8s ease 0.1s forwards;
    opacity: 0;
}

body.page-home .hero h1 em {
    font-style: italic;
    color: var(--teal);
}

body.page-home .hero h1 .strike {
    text-decoration: none;
    position: relative;
    display: inline-block;
}

body.page-home .hero h1 .strike::after {
    content: '';
    position: absolute;
    left: -4px;
    right: -4px;
    top: 50%;
    height: 4px;
    background: var(--yellow);
    transform: translateY(-50%) rotate(-2deg);
    border-radius: 2px;
}

body.page-home .hero-sub {
    font-size: 19px;
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 560px;
    margin-bottom: 40px;
    animation: fade-up 0.8s ease 0.2s forwards;
    opacity: 0;
}

body.page-home .hero-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 60px;
    animation: fade-up 0.8s ease 0.3s forwards;
    opacity: 0;
}

body.page-home .hero-stats {
    display: flex;
    gap: 48px;
    animation: fade-up 0.8s ease 0.4s forwards;
    opacity: 0;
}

body.page-home .hero-stat-num {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--ink);
    margin-bottom: 6px;
    white-space: nowrap;
}

body.page-home .hero-stat-label {
    font-size: 13px;
    color: var(--ink-soft);
    font-weight: 500;
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

body.page-home

/* AI Visual */
.hero-visual {
    position: relative;
    height: 560px;
    animation: fade-up 1s ease 0.5s forwards;
    opacity: 0;
}

body.page-home .ai-card {
    position: absolute;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: 0 20px 60px -10px rgba(10, 14, 42, 0.15);
    padding: 24px;
    backdrop-filter: blur(10px);
}

body.page-home .ai-card-main {
    top: 60px;
    left: 0;
    right: 0;
    width: 100%;
    background: linear-gradient(135deg, #FFFFFF, #F8F8FC);
    z-index: 3;
    animation: float-main 6s ease-in-out infinite;
}

@keyframes float-main {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

body.page-home .ai-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

body.page-home .ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #fbbd3c 0%, #fb923c 70%, #ff7300 100%);
    color: white;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.page-home .ai-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    animation: blink 1.5s ease-in-out infinite;
}

body.page-home .ai-status {
    font-size: 11px;
    color: var(--ink-soft);
    font-family: var(--font-display);
}

body.page-home .ai-candidate {
    display: flex;
    align-items: center;
    gap: 14px;
}

body.page-home .ai-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cyan), var(--indigo));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 16px;
}

body.page-home .ai-avatar>div {
    display: flex;
    align-items: center;
}

body.page-home .ai-info h4 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 2px;
}

body.page-home .ai-info p {
    font-size: 12px;
    color: var(--ink-soft);
}

body.page-home .ai-summary {
    background: rgba(47, 103, 255, 0.06);
    border-left: 3px solid var(--indigo);
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-soft);
    margin-bottom: 14px;
}

body.page-home .ai-summary strong {
    color: var(--ink);
    font-weight: 600;
}

body.page-home .ai-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

body.page-home .ai-skill {
    font-size: 11px;
    padding: 4px 10px;
    background: var(--light-grey);
    border-radius: 100px;
    color: var(--ink-soft);
    font-weight: 500;
}

body.page-home .ai-skill.match {
    background: rgb(242 180 22 / 39%);
    color: #52480c;
    font-weight: 600;
}

body.page-home

/* Score card */
.ai-card-score {
    bottom: 40px;
    right: -20px;
    width: 220px;
    z-index: 4;
    animation: float-score 7s ease-in-out infinite;
}

@keyframes float-score {

    0%,
    100% {
        transform: translateY(0) rotate(2deg);
    }

    50% {
        transform: translateY(10px) rotate(2deg);
    }
}

body.page-home .score-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    margin-bottom: 8px;
    font-weight: 600;
}

body.page-home .score-value {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.04em;
    background: var(--grad-hero);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.page-home .score-bar {
    height: 4px;
    background: var(--line);
    border-radius: 100px;
    margin-top: 10px;
    overflow: hidden;
}

body.page-home .score-bar-fill {
    height: 100%;
    width: 92%;
    background: var(--grad-hero);
    border-radius: 100px;
    animation: fill-bar 2s ease 0.5s forwards;
    transform-origin: left;
    transform: scaleX(0);
}

@keyframes fill-bar {
    to {
        transform: scaleX(1);
    }
}

body.page-home

/* Floating decorative elements */
.ai-card-mini {
    top: -10px;
    right: 20px;
    background: var(--ink);
    color: var(--paper);
    padding: 14px 18px;
    border-radius: 16px;
    font-size: 12px;
    font-family: var(--font-display);
    z-index: 5;
    animation: float-mini 5s ease-in-out infinite;
    display: flex;
    align-items: center;
    gap: 10px;
}

@keyframes float-mini {

    0%,
    100% {
        transform: translateY(0) rotate(-3deg);
    }

    50% {
        transform: translateY(-12px) rotate(-3deg);
    }
}

body.page-home .ai-card-mini>div {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

body.page-home .ai-card-mini-dot {
    display: inline-flex;
    width: 8px;
    height: 8px;
    background: var(--orange-soft);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--orange-soft);
}

body.page-home .glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.4;
    z-index: 1;
}

body.page-home .glow-orb-1 {
    top: 100px;
    right: -40px;
    width: 200px;
    height: 200px;
    background: var(--orange-soft);
}

body.page-home .glow-orb-2 {
    bottom: 0;
    left: 0;
    width: 240px;
    height: 240px;
    background: var(--orange-soft);
}

body.page-home

/* ============ MARQUEE ============ */
.marquee {
    padding: 60px 32px 40px;
    background: #fff;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    position: relative;
}

body.page-home .marquee-label {
    text-align: center;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-soft);
    margin-bottom: 32px;
    font-weight: 600;
}

body.page-home .marquee-track {
    display: flex;
    gap: 56px;
    animation: scroll 120s linear infinite;
    width: max-content;
    align-items: center;
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

body.page-home .marquee-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    transition: opacity 0.3s, filter 0.3s, transform 0.3s;
    opacity: 0.7;
    filter: grayscale(100%);
}

body.page-home .marquee-item img {
    max-height: 70px;
    max-width: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

body.page-home .marquee-item:hover {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.05);
}

body.page-home

/* ============ SECTION ============ */
section {
    padding: 120px 32px;
    position: relative;
}

body.page-home .section-header {
    max-width: 720px;
}

body.page-home .section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--teal);
    font-weight: 600;
    margin-bottom: 20px;
}

body.page-home .section-tag::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--teal);
}

body.page-home .section-title h2 {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 400;
    color: var(--ink);
    padding-bottom: 0.08em;
    overflow: visible;
}

body.page-home .section-title em {
    font-style: italic;
    font-weight: 300;
    background: var(--grad-teal-yellow);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 0.2em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

body.page-home .section-sub {
    font-size: 18px;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 600px;
}

body.page-home

/* ============ AI FEATURE ============ */
.ai-feature {
    background: var(--ink);
    color: var(--paper);
    border-radius: 32px;
    padding: 80px;
    position: relative;
    overflow: hidden;
}

body.page-home .ai-feature-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 50%, rgba(6, 182, 212, 0.3) 0%, transparent 50%), radial-gradient(circle at 80% 30%, rgba(6, 182, 212, 0.3) 0%, transparent 50%);
}

body.page-home .ai-feature-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
}

body.page-home .ai-feature-content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

body.page-home .ai-feature-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 24px;
}

body.page-home .ai-feature-tag>div {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

body.page-home .ai-feature-tag .pulse {
    display: inline-flex;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 12px var(--orange);
    animation: blink 2s ease-in-out infinite;
}

body.page-home .ai-feature h2 {
    font-family: var(--font-display);
    font-size: clamp(36px, 4.5vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-weight: 400;
    margin-bottom: 24px;
}

body.page-home .ai-feature h2 em {
    font-style: italic;
    background: var(--grad-teal-yellow);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 10px;
}

body.page-home .ai-feature p {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 32px;
}

body.page-home .ai-feature-list {
    list-style: none;
    margin-bottom: 36px;
}

body.page-home .ai-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 15px;
}

body.page-home .ai-feature-list li:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.page-home .ai-feature-list .check {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: var(--yellow);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

body.page-home .ai-feature-actions {
    display: flex;
    gap: 12px;
}

body.page-home .btn-cyan {
    background: var(--cyan-bright);
    color: var(--ink);
}

body.page-home .btn-cyan:hover {
    background: white;
    transform: translateY(-1px);
}

body.page-home

/* AI Demo visual */
.ai-demo {
    position: relative;
    height: 480px;
}

body.page-home .demo-screen {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 24px;
}

body.page-home .demo-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.page-home .demo-header>div {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

body.page-home .demo-dot {
    display: inline-flex;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

body.page-home .demo-dot:nth-child(1) {
    background: var(--coral);
}

body.page-home .demo-dot:nth-child(2) {
    background: var(--amber);
}

body.page-home .demo-dot:nth-child(3) {
    background: var(--orange-soft);
}

body.page-home .demo-title {
    margin-left: 12px;
    font-family: var(--font-display);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

body.page-home .demo-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 12px;
    border-radius: 10px;
    transition: background 0.3s;
}

body.page-home .demo-row.active {
    background: #13aa7a1c;
    border: 1px solid #13aa7a38;
    margin-top: 20px;
}

body.page-home .demo-row-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: 600;
}

body.page-home .demo-row-avatar>div {
    display: flex;
    align-items: center;
}

body.page-home .demo-row-content {
    flex: 1;
    min-width: 0;
}

body.page-home .demo-row-name {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 2px;
}

body.page-home .demo-row-role {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
}

body.page-home .demo-score {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
}

body.page-home .demo-score.high {
    background: rgba(190, 242, 100, 0.2);
    color: var(--orange-soft);
}

body.page-home .demo-score.med {
    background: rgba(251, 191, 36, 0.2);
    color: var(--amber);
}

body.page-home .demo-score.low {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
}

body.page-home .demo-typing {
    margin-top: 16px;
    padding: 14px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    border-left: 2px solid var(--yellow);
}

body.page-home .demo-typing-label {
    font-size: 10px;
    color: var(--yellow);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

body.page-home .demo-typing-label::before {
    content: '?';
    animation: spin 3s linear infinite;
}

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

body.page-home .demo-typing-text {
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-display);
}

body.page-home .typing-cursor {
    display: inline-block;
    width: 8px;
    height: 12px;
    background: var(--yellow);
    margin-left: 2px;
    animation: blink 1s step-end infinite;
    vertical-align: middle;
}

body.page-home

/* ============ PRODUCTS ============ */
.products {
    background: var(--paper);
    padding-top: 0;
}

body.page-home .product-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
}

body.page-home .product-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 36px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    min-height: 360px;
}

body.page-home .product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -10px rgba(10, 14, 42, 0.1);
}

body.page-home .product-card.reveal-on-scroll.is-visible:hover {
    transform: translateY(-6px);
}

body.page-home .product-card.featured {
    grid-column: span 6;
    background: linear-gradient(135deg, #FAFAFF, #F0F0FA);
    min-height: 420px;
}

body.page-home .product-card.standard {
    grid-column: span 6;
}

body.page-home .product-card.half {
    grid-column: span 6;
}

body.page-home .product-card.third {
    grid-column: span 4;
}

body.page-home .product-card.dark {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

body.page-home .product-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, #ffdc75 0%, #ff7300 90%, #fdb353 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    position: relative;
    z-index: 2;
}

body.page-home .product-card.dark .product-icon {
    background: linear-gradient(135deg, #c4ff3d, #02b87f);
}

body.page-home .product-card .icon-2 {
    background: linear-gradient(135deg, var(--orange-soft), var(--coral));
}

body.page-home .product-card .icon-3 {
    background: linear-gradient(135deg, var(--indigo), var(--cyan));
}

body.page-home .product-card .icon-4 {
    background: linear-gradient(135deg, var(--indigo), var(--cyan));
}

body.page-home .product-card .icon-5 {
    background: linear-gradient(135deg, #c4ff3d, #02b87f);
}

body.page-home .product-card .icon-6 {
    background: linear-gradient(135deg, #ffdc75 0%, #ff7300 90%, #fdb353 100%)
}

body.page-home .product-tag {
    position: absolute;
    top: 24px;
    right: 24px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: 100px;
    background: var(--ink);
    color: var(--paper);
}

body.page-home .product-card.dark .product-tag {
    background: var(--yellow);
    color: var(--ink);
}

body.page-home .product-tag.new {
    background: var(--orange-soft);
    color: #2D3F00;
}

body.page-home .product-card h3 {
    font-family: var(--font-display);
    font-size: 28px;
    line-height: 1.1;
    font-weight: 500;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
    position: relative;
    z-index: 2;
}

body.page-home .product-card.featured h3 {
    font-size: 32px;
}

body.page-home .product-card p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin-bottom: 24px;
    flex: 1;
    position: relative;
    z-index: 2;
}

body.page-home .product-card.dark p {
    color: rgba(255, 255, 255, 0.7);
}

body.page-home .product-link {
    margin-top: auto;
}

body.page-home .product-link a>span {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    transition: gap 0.2s;
    position: relative;
    z-index: 2;
    margin-top: auto;
}

body.page-home .product-card.dark .product-link a>span {
    color: var(--yellow);
}

body.page-home .product-link a:hover>span {
    gap: 12px;
}

body.page-home .product-demo-cta {
    background:
        radial-gradient(circle at 18% 88%, rgba(242, 180, 22, 0.24) 0%, transparent 34%),
        radial-gradient(circle at 84% 16%, rgba(2, 184, 127, 0.35) 0%, transparent 46%),
        linear-gradient(135deg, #18251d 0%, #0c3c2b 50%, #0c5a3a 100%);
    color: var(--paper);
    border-color: transparent;
    cursor: default;
}

body.page-home .product-demo-cta .product-icon {
    background: var(--teal);
    color: white;
}

body.page-home .product-demo-kicker {
    position: relative;
    z-index: 2;
    margin-bottom: 28px;
    color: var(--teal-soft);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

body.page-home .product-demo-cta h3 {
    color: white;
    max-width: 520px;
}

body.page-home .product-demo-cta h3 em {
    color: var(--teal-soft);
    font-style: italic;
}

body.page-home .product-demo-cta p {
    color: rgba(255, 255, 255, 0.72);
    max-width: 520px;
}

body.page-home .product-demo-actions {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: auto;
}

body.page-home .product-demo-phone {
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    font-weight: 700;
}

body.page-home .product-decoration {
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: var(--grad-hero);
    opacity: 0.05;
    z-index: 1;
}

body.page-home

/* ============ STATS BANNER ============ */
.stats-banner,
body.page-company .stats-banner {
    background: var(--ink);
    color: var(--paper);
    padding: 100px 32px;
    position: relative;
    overflow: hidden;
}

body.page-home .stats-banner-bg,
body.page-company .stats-banner-bg {
    position: absolute;
    inset: 0;
    background: var(--grad-mesh);
    opacity: 0.5;
}

body.page-home .stats-content,
body.page-company .stats-content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 80px;
    align-items: center;
}

body.page-home .stats-content h2,
body.page-company .stats-content h2 {
    font-family: var(--font-display);
    font-size: clamp(36px, 4vw, 52px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-weight: 400;
}

body.page-home .stats-content h2 em,
body.page-company .stats-content h2 em {
    font-style: italic;
    background: var(--grad-teal-yellow);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 10px;
}

body.page-home .stats-grid,
body.page-company .stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

body.page-home .stat-item,
body.page-company .stat-item {
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    padding-left: 24px;
}

body.page-home .stat-num,
body.page-company .stat-num {
    font-family: var(--font-display);
    font-size: clamp(48px, 5vw, 72px);
    line-height: 1;
    letter-spacing: -0.04em;
    font-weight: 400;
    margin-bottom: 12px;
    background: linear-gradient(180deg, white, rgba(255, 255, 255, 0.6));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.page-home .stat-label,
body.page-company .stat-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
}

body.page-home

/* ============ TESTIMONIALS ============ */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

body.page-home .testimonial {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 36px;
    position: relative;
    transition: all 0.3s;
}

body.page-home .testimonial:hover {
    transform: translateY(-4px);
}

body.page-home .testimonial.reveal-on-scroll.is-visible:hover {
    transform: translateY(-4px);
}

body.page-home .testimonial-quote {
    font-family: var(--font-display);
    font-size: 80px;
    line-height: 1;
    background: var(--yellow);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    height: 32px;
    margin-bottom: 8px;
    font-weight: 600;
}

body.page-home .testimonial p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin-bottom: 28px;
}

body.page-home .testimonial-author {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

body.page-home .testimonial-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--indigo), var(--cyan));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
}

body.page-home .testimonial-avatar>div {
    display: flex;
    align-items: center;
}

body.page-home .testimonial-meta {
    flex: 1;
}

body.page-home .testimonial-name {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 2px;
}

body.page-home .testimonial-school {
    font-size: 12px;
    color: var(--ink-soft);
}

body.page-home

/* ============ TESTIMONIAL CAROUSEL ============ */
.testimonial-carousel {
    position: relative;
}

body.page-home .testimonial-viewport {
    overflow: hidden;
}

body.page-home .testimonial-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform;
}

body.page-home .testimonial-slide {
    flex: 0 0 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 4px;
}

body.page-home .testimonial-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 32px;
    gap: 24px;
}

body.page-home .testimonial-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}

body.page-home .testimonial-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--line);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}

body.page-home .testimonial-dot:hover {
    background: var(--teal-soft);
}

body.page-home .testimonial-dot.active {
    background: var(--teal);
    width: 28px;
    border-radius: 100px;
}

body.page-home .testimonial-arrows {
    display: flex;
    gap: 8px;
}

body.page-home .testimonial-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

body.page-home .testimonial-arrow:hover {
    background: var(--teal);
    border-color: var(--teal);
    color: white;
    transform: translateY(-1px);
}

body.page-home .testimonial-arrow:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

body.page-home .testimonial-arrow:disabled:hover {
    background: var(--paper);
    border-color: var(--line);
    color: var(--ink);
    transform: none;
}

body.page-home

/* ============ NEWS ============ */
.news {
    background: #e6e6e657;
}

body.page-home .news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

body.page-home .news-card {
    background: var(--paper);
    border-radius: 20px;
    padding: 32px;
    border: 1px solid var(--line);
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

body.page-home .news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -8px rgba(10, 14, 42, 0.1);
}

body.page-home .news-card.reveal-on-scroll.is-visible:hover {
    transform: translateY(-4px);
}

body.page-home .news-date {
    font-size: 12px;
    color: var(--teal);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

body.page-home .news-date::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--yellow);
    border-radius: 50%;
}

body.page-home .news-card h3 {
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
    font-weight: 500;
}

body.page-home .news-card a {
    font-size: 13px;
    color: var(--ink);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

body.page-home

/* ============ CTA ============ */
.cta {
    padding: 100px 0;
}

body.page-home .cta-card {
    /*background: linear-gradient(135deg, #3dff8e 0%, #02b87f 30%, #0a6e5c 100%);*/
    background: linear-gradient(150deg, #3dff8e 0%, var(--teal-soft) 15%, var(--teal-dark) 40%, #02b87f 70%, #fffb5c 100%);
    border-radius: 32px;
    padding: 80px;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
}

body.page-home .cta-card-bg {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(10, 14, 42, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 14, 42, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 40%, transparent 100%);
    z-index: 0;
}

body.page-home .cta-content {
    position: relative;
    z-index: 2;
}

body.page-home .cta h2 {
    font-family: var(--font-display);
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1;
    letter-spacing: -0.03em;
    font-weight: 400;
    margin-bottom: 24px;
    color: white;
}

body.page-home .cta h2 em {
    font-style: normal;
}

body.page-home .cta p {
    font-size: 18px;
    color: var(--paper);
    margin-bottom: 40px;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}

body.page-home .cta-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

body.page-home .btn-white {
    background: white;
    color: var(--ink);
}

body.page-home .btn-white:hover {
    background: var(--yellow-soft);
}

body.page-home .btn-dark2-ghost {
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--dark);
}

body.page-home .btn-dark-ghost2:hover {
    background: rgba(255, 255, 255, 0.4);
}

body.page-home

/* ============ FOOTER ============ */
footer {
    background: var(--extra-dark);
    color: var(--paper);
    padding: 80px 32px 40px;
}

body.page-home .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 60px;
}

body.page-home .footer-brand h3 {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

body.page-home .footer-brand h3 img {
    max-width: 200px;
}

body.page-home .footer-logo-svg {
    height: 44px;
    width: auto;
    flex-shrink: 0;
    display: block;
}

body.page-home .footer-brand p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 24px;
    max-width: 320px;
}

body.page-home .footer-contact {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.8;
}

body.page-home .footer-contact strong {
    color: var(--yellow-soft);
    font-weight: 500;
}

body.page-home .footer-contact a {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s;
}

body.page-home .footer-contact a:hover {
    color: white;
}

body.page-home .footer-col h4 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--yellow-soft);
    font-weight: 600;
    margin-bottom: 20px;
}

body.page-home .footer-col ul {
    list-style: none;
}

body.page-home .footer-col li {
    margin-bottom: 10px;
}

body.page-home .footer-col a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    transition: color 0.2s;
}

body.page-home .footer-col a:hover {
    color: white;
}

body.page-home .footer-bottom {
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

body.page-home .footer-bottom-links {
    display: flex;
    gap: 24px;
}

/* Responsive */
@media (max-width: 1024px) {
    body.page-home .ai-card-score {
        bottom: -20px;
    }

    body.page-home section {
        padding: 80px 32px;
    }

    body.page-home .hero-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    body.page-home .hero-visual {
        height: 480px;
        max-width: 500px;
    }

    body.page-home .ai-feature-content {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    body.page-home .ai-demo {
        height: 400px;
    }

    body.page-home .stats-content,
    body.page-company .stats-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    body.page-home .product-card.featured,
    body.page-home .product-card.standard,
    body.page-home .product-card.half {
        grid-column: span 12;
    }

    body.page-home .product-card.third {
        grid-column: span 6;
    }

    body.page-home .testimonials-grid,
    body.page-home .news-grid {
        grid-template-columns: 1fr;
    }

    body.page-home .updates-header {
        grid-template-columns: 1fr;
        align-items: flex-start;
        gap: 28px;
    }

    body.page-home .feature-card {
        min-height: 420px;
    }

    body.page-home .testimonial-slide {
        grid-template-columns: 1fr;
    }

    body.page-home .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    body.page-home .ai-feature {
        padding: 50px;
    }

    body.page-home .cta-card {
        padding: 60px 30px;
    }
}

@media (max-width: 640px) {
    body.page-home .container {
        padding: 0 24px;
    }

    body.page-home .nav-links {
        display: none;
    }

    body.page-home .hero {
        padding: 120px 0 60px;
    }

    body.page-home .hero-stats {
        gap: 24px;
        flex-wrap: wrap;
    }

    body.page-home section {
        padding: 60px 24px;
    }

    body.page-home .stats-grid,
    body.page-company .stats-grid {
        grid-template-columns: 1fr;
    }

    body.page-home .product-card.third {
        grid-column: span 12;
    }

    body.page-home .updates-tabs {
        width: 100%;
        overflow-x: auto;
    }

    body.page-home .updates-tab {
        flex: 1;
        justify-content: center;
        padding: 10px 12px;
    }

    body.page-home .updates-tab-count {
        display: none;
    }

    body.page-home .feature-card {
        min-height: auto;
    }

    body.page-home .feature-card-content {
        padding: 32px 28px;
    }

    body.page-home .feature-event-row {
        flex-direction: column;
        gap: 20px;
    }

    body.page-home .feature-event-date>div {
        min-width: 0;
        width: 100%;
        flex-direction: row;
        gap: 12px;
        padding: 18px 28px;
    }

    body.page-home .side-card-event {
        flex-direction: column;
    }

    body.page-home .footer-grid {
        grid-template-columns: 1fr;
    }

    body.page-home .footer-bottom {
        flex-direction: column;
        gap: 16px;
    }

    body.page-home .stats-banner,
    body.page-company .stats-banner {
        padding: 60px 24px;
    }

    body.page-home .marquee {
        padding: 60px 24px 40px;
    }
}

/* Extracted from company.html */
/* ============ FOUNDATION ============ */
:root {
    --teal: #02B87F;
    --teal-soft: #4BCEA5;
    --teal-dark: #13aa7a;
    --teal-deep: #00875c;
    --yellow: #F2B416;
    --yellow-soft: #ffd15c;
    --dark: #242A39;
    --extra-dark: #1c1f27;
    --ink: #101219;
    --ink-soft: #242A39;
    --paper: #FBFBFD;
    --light-grey: #f3f3f5;
    --line: #E5E5EE;
    --indigo: #2F67FF;
    --indigo-deep: #2D1FD9;
    --indigo-bright: #6D5BFF;
    --cyan: #00D4FF;
    --cyan-bright: #22EFFF;
    --lime: #C4FF3D;
    --coral: #FF4F7B;
    --coral-bright: #FF2E63;
    --amber: #FFB800;
    --orange: #FB923C;
    --orange-soft: #FDB353;
    --pink: #FF6B9D;
    --rose: #FF1F5A;
    --grad-hero: linear-gradient(135deg, #4bcea5 0%, #13aa7a 60%, #09675a 100%);
    --grad-mesh: radial-gradient(at 20% 20%, rgb(2 184 127 / 12%) 0px, transparent 50%), radial-gradient(at 80% 0%, rgb(255 202 0 / 30%) 0px, transparent 50%), radial-gradient(at 70% 80%, rgba(251, 146, 60, 0.22) 0px, transparent 50%), radial-gradient(at 0% 100%, rgba(196, 255, 61, 0.22) 0px, transparent 50%);
    --grad-yellow: linear-gradient(135deg, #fb923c 0%, #f2b416 50%, #ffdb80 100%);
    --grad-teal-yellow: linear-gradient(90deg, #19b37d 0%, #6edc6b 40%, #b2ed5e 70%, #f2b416 100%);
    --font-display: 'Outfit', -apple-system, sans-serif;
    --font-sans: 'Outfit', -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

body.page-company * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body.page-company {
    font-family: var(--font-sans);
    background: var(--paper);
    color: var(--ink);
    font-size: 16px;
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.page-company a {
    color: inherit;
    text-decoration: none;
}

body.page-company button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

body.page-company img {
    width: 100%;
    max-width: 100%;
    display: block;
}

body.page-company .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}

body.page-company

/* ============ NAV ============ */
.nav {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 1280px;
    background: rgba(251, 251, 253, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(229, 229, 238, 0.8);
    border-radius: 100px;
    padding: 10px 12px 10px 24px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 30px rgba(10, 14, 42, 0.04);
    transition: all 0.3s ease;
}

body.page-company .nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.02em;
    color: var(--ink);
}

body.page-company .nav-logo img {
    width: 160px;
    max-width: none;
}

body.page-company .nav-logo-mark {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--grad-hero);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 16px;
}

body.page-company .nav-links {
    display: flex;
    gap: 4px;
    align-items: center;
    list-style: none;
}

body.page-company .nav-links a {
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft);
    transition: all 0.2s ease;
}

body.page-company .nav-links a:hover {
    background: rgba(2, 184, 127, 0.08);
    color: var(--teal-dark);
}

body.page-company .nav-links a.active {
    background: rgba(2, 184, 127, 0.12);
    color: var(--teal-dark);
}

body.page-company .nav-cta {
    display: flex;
    gap: 8px;
    align-items: center;
}

.page-company .elementor-widget-button.btn-outline .elementor-button {
    width: 100%;
    justify-content: center;
}

body.page-company .btn-white {
    background: white;
    color: var(--ink);
}

body.page-company .btn-white:hover {
    background: var(--yellow-soft);
}

body.page-company

/* ============ HERO � BOLD TYPOGRAPHIC ============ */
.hero {
    padding: 136px 32px 96px;
    position: relative;
    overflow: hidden;
    min-height: auto;
    display: flex;
    align-items: flex-start;
}

body.page-company .hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 88%, rgba(2, 184, 127, 0.23) 0, transparent 28%),
        radial-gradient(circle at 82% 24%, rgba(242, 180, 22, 0.3) 0, transparent 32%),
        radial-gradient(circle at 62% 100%, rgba(251, 146, 60, 0.14) 0, transparent 34%),
        linear-gradient(115deg, rgba(2, 184, 127, 0.12) 0%, rgba(251, 251, 253, 0.9) 48%, rgba(255, 209, 92, 0.23) 100%),
        var(--paper);
    z-index: 0;
}

body.page-company .hero-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(10, 14, 42, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 14, 42, 0.055) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.38));
    z-index: 0;
}

body.page-company .glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.38;
    z-index: 1;
}

body.page-company .glow-orb-1 {
    top: 90px;
    right: 10%;
    width: 300px;
    height: 300px;
    background: var(--orange-soft);
}

body.page-company .glow-orb-2 {
    bottom: -70px;
    left: 8%;
    width: 360px;
    height: 360px;
    background: var(--teal-soft);
}

body.page-company .glow-orb-3 {
    display: none;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

body.page-company .hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
    max-width: 1000px;
}

body.page-company .hero-meta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    animation: fade-up 0.8s ease forwards;
    flex-wrap: wrap;
}

body.page-company .hero-eyebrow {
    font-family: var(--font-display);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-soft);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

body.page-company .hero-eyebrow::before,
body.page-company .hero-eyebrow::after {
    content: '';
    width: 32px;
    height: 1px;
    background: var(--ink-soft);
    opacity: 0.3;
}

body.page-company .hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: #ffffff6e;
    border: 1px solid rgba(14, 20, 17, 0.08);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: var(--teal-dark);
}

body.page-company .hero-tag-dot {
    width: 6px;
    height: 6px;
    background: var(--yellow);
    border-radius: 50%;
    animation: blink 2s ease-in-out infinite;
}

body.page-company .hero h1 {
    font-family: var(--font-display);
    font-size: clamp(56px, 7vw, 100px);
    line-height: 0.98;
    letter-spacing: -0.03em;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 0;
    animation: fade-up 1s ease 0.1s forwards;
    opacity: 0;
}

body.page-company .hero h1 .line {
    display: inline;
    position: relative;
}

body.page-company .hero h1 .line-1 {
    font-weight: 500;
    font-size: 55px;
}

body.page-company .hero h1 .accent {
    position: relative;
    display: inline-block;
}

body.page-company .hero h1 .accent::after {
    content: '';
    position: absolute;
    left: 4%;
    right: 4%;
    bottom: 0.1em;
    height: 0.12em;
    background: var(--yellow);
    border-radius: 4px;
    z-index: -1;
    opacity: 0.85;
}

body.page-company .hero-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 30px 0;
    animation: fade-up 0.8s ease 0.3s forwards;
    opacity: 0;
}

body.page-company .hero-divider-line {
    width: 110px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ink-soft), transparent);
    opacity: 0.2;
}

body.page-company .hero-divider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f2b416;
    box-shadow: 0 0 0 6px #ffd15c54;
}

body.page-company .hero-sub {
    font-size: 18px;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 880px;
    margin: 0 auto 36px;
    animation: fade-up 0.8s ease 0.35s forwards;
    opacity: 0;
}

body.page-company .hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0;
    animation: fade-up 0.8s ease 0.45s forwards;
    opacity: 0;
}

body.page-company .hero-actions .btn {
    min-width: 180px;
    justify-content: center;
}

body.page-company

/* Inline stat strip � the "data" lives in the type itself */
.hero-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 28px 0;
    animation: fade-up 0.8s ease 0.55s forwards;
    opacity: 0;
}

body.page-company .hero-strip-item {
    text-align: center;
    padding: 0 24px;
    border-right: 1px solid var(--line);
}

body.page-company .hero-strip-item:last-child {
    border-right: none;
}

body.page-company .hero-strip-num {
    font-family: var(--font-display);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--ink);
    margin-bottom: 8px;
}

body.page-company .hero-strip-num em {
    font-style: italic;
    font-weight: 300;
    background: var(--grad-hero);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.page-company .hero-strip-label {
    font-size: 12px;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}

body.page-company

/* ============ SECTION ============ */
section {
    padding: 120px 32px;
    position: relative;
}

body.page-company .section-header {
    max-width: 720px;
}

body.page-company .products .section-header {
    margin-bottom: 80px;
    max-width: 80%;
}

body.page-company .news .updates-header-text {
    max-width: 90%;
}

body.page-company .section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--teal);
    font-weight: 600;
    margin-bottom: 20px;
}

body.page-company .section-tag::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--teal);
}

body.page-company .section-title h2 {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 400;
    color: var(--ink);
    padding-bottom: 0.08em;
    overflow: visible;
}

body.page-company .section-title em {
    font-style: italic;
    font-weight: 300;
    background: var(--grad-teal-yellow);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 0.2em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

body.page-company .section-sub {
    font-size: 18px;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 600px;
}

body.page-company

/* ============ ABOUT BODY ============ */
.about-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: flex-start;
}

body.page-company .about-body p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--ink-soft);
    margin-bottom: 20px;
}

body.page-company .about-link a>span {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    color: var(--teal-dark);
    font-weight: 600;
    font-size: 15px;
    margin-top: 12px;
    transition: gap 0.2s;
}

body.page-company .about-link a:hover>span {
    gap: 14px;
}

body.page-company .about-highlights {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

body.page-company .about-highlight {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 26px;
    transition: all 0.3s;
}

body.page-company .about-highlight:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -8px rgba(10, 14, 42, 0.1);
}

body.page-company .about-highlight.reveal-on-scroll.is-visible:hover {
    transform: translateY(-4px);
}

body.page-company .about-highlight-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: white;
}

body.page-company .about-highlight:nth-child(1) .about-highlight-icon {
    background: linear-gradient(135deg, #ffdc75 0%, #ff7300 90%, #fdb353 100%);
}

body.page-company .about-highlight:nth-child(2) .about-highlight-icon {
    background: linear-gradient(135deg, var(--orange-soft), var(--coral));
}

body.page-company .about-highlight:nth-child(3) .about-highlight-icon {
    background: linear-gradient(135deg, #c4ff3d, #02b87f);
}

body.page-company .about-highlight:nth-child(4) .about-highlight-icon {
    background: linear-gradient(135deg, var(--indigo), var(--cyan));
}

body.page-company .about-highlight:nth-child(5) .about-highlight-icon {
    background: linear-gradient(135deg, var(--yellow), var(--orange));
}

body.page-company .about-highlight h4 {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}

body.page-company .about-highlight p {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0;
}

/* ============ LEADERSHIP ============ */
body.page-company .leadership {
    background: var(--paper);
    padding-top: 0;
}

body.page-company .leadership-card {
    background: var(--ink);
    color: var(--paper);
    border-radius: 32px;
    padding: 80px;
    position: relative;
    overflow: hidden;
}

body.page-company .leadership-card-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 50%, rgba(2, 184, 127, 0.25) 0%, transparent 50%), radial-gradient(circle at 80% 30%, rgba(242, 180, 22, 0.18) 0%, transparent 50%);
}

body.page-company .leadership-card-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
}

body.page-company .leadership-content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 70px;
    align-items: center;
}

body.page-company .leadership-avatar {
    width: 100%;
    aspect-ratio: 1;
    max-width: 360px;
    border-radius: 28px;
    background: linear-gradient(135deg, var(--teal-soft), var(--teal-dark) 50%, #09675a);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 80px -20px rgba(2, 184, 127, 0.45);
}

body.page-company .leadership-photo {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

body.page-company .leadership-avatar::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.5;
}

body.page-company .leadership-initials {
    position: relative;
    font-family: var(--font-display);
    font-size: 96px;
    font-weight: 300;
    color: white;
    letter-spacing: -0.04em;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

body.page-company .leadership-tag>div {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 24px;
}

body.page-company .leadership-tag .pulse {
    display: inline-flex;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--yellow);
    box-shadow: 0 0 12px var(--yellow);
    animation: blink 2s ease-in-out infinite;
}

body.page-company .leadership-content h2 {
    font-family: var(--font-display);
    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-weight: 400;
    margin-bottom: 18px;
}

body.page-company .leadership-content h2 em {
    font-style: italic;
    background: var(--grad-teal-yellow);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 8px;
}

body.page-company .leadership-role {
    font-family: var(--font-display);
    font-size: 13px;
    color: var(--yellow-soft);
    letter-spacing: 0.04em;
    margin-bottom: 22px;
    text-transform: uppercase;
}

body.page-company .leadership-content p {
    font-size: 17px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 32px;
}

body.page-company .leadership-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

body.page-company

/* ============ PRODUCTS ============ */
.products {
    background: var(--paper);
    padding-top: 0;
}

body.page-company .product-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
}

body.page-company .product-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 36px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    min-height: 320px;
}

body.page-company .product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -10px rgba(10, 14, 42, 0.1);
}

body.page-company .product-card.reveal-on-scroll.is-visible:hover {
    transform: translateY(-6px);
}

body.page-company .product-card.featured {
    grid-column: span 6;
    background: linear-gradient(135deg, #FAFAFF, #F0F0FA);
    min-height: 380px;
}

body.page-company .product-card.standard {
    grid-column: span 6;
}

body.page-company .product-card.half {
    grid-column: span 6;
}

body.page-company .product-card.third {
    grid-column: span 4;
}

body.page-company .product-card.dark {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

body.page-company .product-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, #ffdc75 0%, #ff7300 90%, #fdb353 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    position: relative;
    z-index: 2;
}

body.page-company .product-card.dark .product-icon {
    background: linear-gradient(135deg, #c4ff3d, #02b87f);
}

body.page-company .product-card .icon-2 {
    background: linear-gradient(135deg, var(--orange-soft), var(--coral));
}

body.page-company .product-card .icon-3 {
    background: linear-gradient(135deg, var(--indigo), var(--cyan));
}

body.page-company .product-card .icon-4 {
    background: linear-gradient(135deg, var(--indigo), var(--cyan));
}

body.page-company .product-card .icon-5 {
    background: linear-gradient(135deg, #c4ff3d, #02b87f);
}

body.page-company .product-tag {
    position: absolute;
    top: 24px;
    right: 24px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: 100px;
    background: var(--ink);
    color: var(--paper);
}

body.page-company .product-card.dark .product-tag {
    background: var(--yellow);
    color: var(--ink);
}

body.page-company .product-card h3 {
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
    position: relative;
    z-index: 2;
}

body.page-company .product-card.featured h3 {
    font-size: 28px;
}

body.page-company .product-card p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin-bottom: 24px;
    flex: 1;
    position: relative;
    z-index: 2;
}

body.page-company .product-card.dark p {
    color: rgba(255, 255, 255, 0.7);
}

body.page-company .product-link {
    margin-top: auto;
}

body.page-company .product-link a>span {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    transition: gap 0.2s;
    position: relative;
    z-index: 2;
}

body.page-company .product-card.dark .product-link a>span {
    color: var(--yellow);
}

body.page-company .product-link a:hover>span {
    gap: 12px;
}

body.page-company .product-demo-cta {
    background:
        radial-gradient(circle at 18% 88%, rgba(242, 180, 22, 0.24) 0%, transparent 34%),
        radial-gradient(circle at 84% 16%, rgba(2, 184, 127, 0.35) 0%, transparent 46%),
        linear-gradient(135deg, #18251d 0%, #0c3c2b 50%, #0c5a3a 100%);
    color: var(--paper);
    border-color: transparent;
    cursor: default;
}

body.page-company .product-demo-cta .product-icon {
    background: var(--teal);
    color: white;
}

body.page-company .product-demo-kicker {
    position: relative;
    z-index: 2;
    margin-bottom: 28px;
    color: var(--teal-soft);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

body.page-company .product-demo-cta h3 {
    color: white;
    max-width: 520px;
}

body.page-company .product-demo-cta h3 em {
    color: var(--teal-soft);
    font-style: italic;
}

body.page-company .product-demo-cta p {
    color: rgba(255, 255, 255, 0.72);
    max-width: 520px;
}

body.page-company .product-demo-actions {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: auto;
}

body.page-company .product-demo-phone {
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    font-weight: 700;
}

body.page-company .product-decoration {
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: var(--grad-hero);
    opacity: 0.05;
    z-index: 1;
}

/* ============ TESTIMONIALS ============ */
body.page-company .testimonial {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 36px;
    position: relative;
    transition: all 0.3s;
}

body.page-company .testimonial:hover {
    transform: translateY(-4px);
}

body.page-company .testimonial.reveal-on-scroll.is-visible:hover {
    transform: translateY(-4px);
}

body.page-company .testimonial-quote {
    font-family: var(--font-display);
    font-size: 80px;
    line-height: 1;
    background: var(--yellow);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    height: 32px;
    margin-bottom: 8px;
    font-weight: 600;
}

body.page-company .testimonial p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin-bottom: 28px;
}

body.page-company .testimonial-author {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

body.page-company .testimonial-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--indigo), var(--cyan));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
}

body.page-company .testimonial-avatar>div {
    display: flex;
    align-items: center;
}

body.page-company .testimonial-meta {
    flex: 1;
}

body.page-company .testimonial-name {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 2px;
}

body.page-company .testimonial-school {
    font-size: 12px;
    color: var(--ink-soft);
}

/* TESTIMONIAL CAROUSEL */
body.page-company .testimonial-carousel {
    position: relative;
}

body.page-company .testimonial-viewport {
    overflow: hidden;
}

body.page-company .testimonial-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform;
}

body.page-company .testimonial-slide {
    flex: 0 0 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 4px;
}

body.page-company .testimonial-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 32px;
    gap: 24px;
}

body.page-company .testimonial-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}

body.page-company .testimonial-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--line);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}

body.page-company .testimonial-dot:hover {
    background: var(--teal-soft);
}

body.page-company .testimonial-dot.active {
    background: var(--teal);
    width: 28px;
    border-radius: 100px;
}

body.page-company .testimonial-arrows {
    display: flex;
    gap: 8px;
}

body.page-company .testimonial-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

body.page-company .testimonial-arrow:hover {
    background: var(--teal);
    border-color: var(--teal);
    color: white;
    transform: translateY(-1px);
}

body.page-company .testimonial-arrow:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

body.page-company .testimonial-arrow:disabled:hover {
    background: var(--paper);
    border-color: var(--line);
    color: var(--ink);
    transform: none;
}

body.page-company

/* ============ EVENTS ============ */
.events-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

body.page-company .event-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 32px;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

body.page-company .event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px -12px rgba(10, 14, 42, 0.12);
}

body.page-company .event-card.reveal-on-scroll.is-visible:hover {
    transform: translateY(-5px);
}

body.page-company .event-date-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--ink);
    color: white;
    border-radius: 14px;
    width: 64px;
    height: 64px;
    font-family: var(--font-display);
    box-shadow: 0 8px 20px -6px rgba(10, 14, 42, 0.4);
}

body.page-company .event-date-month {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--yellow-soft);
    font-weight: 600;
}

body.page-company .event-date-day {
    font-size: 26px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
}

body.page-company .event-date-year {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.06em;
}

body.page-company .event-card h3 {
    font-family: var(--font-display);
    font-size: 19px;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -0.01em;
}

body.page-company .event-card .product-link {
    margin-top: auto;
    font-size: 13px;
    color: var(--teal-dark);
}

/* ============ NEWS / EVENTS / WEBINARS ============ */
body.page-company .news {
    background: #e6e6e657;
    position: relative;
    overflow: hidden;
}

body.page-company .news::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 92% 8%, rgba(2, 184, 127, 0.07) 0%, transparent 35%),
        radial-gradient(circle at 8% 95%, rgba(242, 180, 22, 0.06) 0%, transparent 40%);
    z-index: 0;
    pointer-events: none;
}

body.page-company .news .container {
    position: relative;
    z-index: 2;
}

body.page-company .updates-header-text {
    max-width: 540px;
}

body.page-company .updates-header-text .section-tag {
    margin-bottom: 18px;
}

body.page-company .updates-header-text .section-title {
    margin-bottom: 16px;
}

body.page-company .updates-header-text .section-sub {
    font-size: 16px;
}

body.page-company .updates-tabs {
    display: inline-flex;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 5px;
    gap: 2px;
    box-shadow: 0 2px 8px -2px rgba(10, 14, 42, 0.05);
}

body.page-company .updates-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    color: var(--ink-soft);
    border-radius: 10px;
    transition: all 0.25s ease;
    white-space: nowrap;
}

body.page-company .updates-tab:hover {
    color: var(--ink);
    background: rgba(10, 14, 42, 0.04);
}

body.page-company .updates-tab.active {
    background: var(--ink);
    color: var(--paper);
    box-shadow: 0 4px 14px -4px rgba(10, 14, 42, 0.3);
}

body.page-company .updates-tab-mark {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--line);
    transition: all 0.3s ease;
}

body.page-company .updates-tab.active .updates-tab-mark {
    background: var(--yellow);
    box-shadow: 0 0 10px var(--yellow);
}

body.page-company .updates-tab-label {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.005em;
}

body.page-company .updates-tab-count {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    opacity: 0.55;
    transition: opacity 0.25s;
}

body.page-company .updates-tab.active .updates-tab-count {
    color: var(--yellow);
    opacity: 1;
}

body.page-company .tab-panel {
    display: none;
}

body.page-company .tab-panel.active {
    display: block;
    animation: panel-in 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes panel-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

body.page-company .editorial-grid {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 28px;
    align-items: stretch;
}

body.page-company .feature-card {
    position: relative;
    background: var(--ink);
    border-radius: 28px;
    padding: 0;
    overflow: hidden;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: var(--paper);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    box-shadow: 0 20px 50px -20px rgba(10, 14, 42, 0.25);
}

body.page-company .feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 70px -20px rgba(10, 14, 42, 0.35);
}

body.page-company .feature-card-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 15%, rgba(2, 184, 127, 0.45) 0%, transparent 50%),
        radial-gradient(circle at 85% 75%, rgba(242, 180, 22, 0.3) 0%, transparent 55%),
        linear-gradient(135deg, #1c1f27 0%, #0f1219 100%);
    z-index: 0;
}

body.page-company .feature-card-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: radial-gradient(ellipse 80% 80% at 30% 30%, black 30%, transparent 100%);
}

body.page-company .feature-card-bg-event {
    background:
        radial-gradient(circle at 15% 20%, rgba(2, 184, 127, 0.5) 0%, transparent 50%),
        radial-gradient(circle at 90% 80%, rgba(2, 184, 127, 0.25) 0%, transparent 50%),
        linear-gradient(135deg, #0c1f17 0%, #0f1219 100%);
}

body.page-company .feature-card-bg-webinar {
    background:
        radial-gradient(circle at 80% 15%, rgba(242, 180, 22, 0.4) 0%, transparent 55%),
        radial-gradient(circle at 15% 90%, rgba(2, 184, 127, 0.3) 0%, transparent 55%),
        linear-gradient(135deg, #1a1a22 0%, #0f1219 100%);
}

body.page-company .feature-card-content {
    position: relative;
    z-index: 2;
    padding: 48px;
}

body.page-company .feature-card-meta>div {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--font-display);
    letter-spacing: 0.06em;
}

body.page-company .meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: var(--font-display);
}

body.page-company .meta-pill-light {
    background: rgba(255, 255, 255, 0.08);
    color: var(--yellow-soft);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

body.page-company .meta-pill-live {
    background: rgba(2, 184, 127, 0.18);
    color: #6fe0b8;
    border: 1px solid rgba(2, 184, 127, 0.35);
}

body.page-company .meta-pill-live .live-dot {
    width: 6px;
    height: 6px;
    background: #6fe0b8;
    border-radius: 50%;
    box-shadow: 0 0 8px #6fe0b8;
    animation: blink 1.5s ease-in-out infinite;
}

body.page-company .meta-divider {
    opacity: 0.4;
}

body.page-company .meta-date {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.06em;
}

body.page-company .feature-card-title h3 {
    font-family: var(--font-display);
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    font-weight: 400;
    color: white;
    margin-bottom: 20px;
    max-width: 540px;
}

body.page-company .feature-card-excerpt>div {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 32px;
    max-width: 520px;
}

body.page-company .feature-event-row {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

body.page-company .feature-event-date>div {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    padding: 22px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    backdrop-filter: blur(20px);
}

body.page-company .feature-event-month {
    font-family: var(--font-display);
    font-size: 12px;
    color: var(--yellow);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 600;
}

body.page-company .feature-event-day {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: 300;
    letter-spacing: -0.04em;
    color: white;
    line-height: 1;
    margin: 4px 0;
}

body.page-company .feature-event-year {
    font-family: var(--font-display);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.1em;
}

body.page-company .feature-event-row .feature-card-title h3 {
    margin-bottom: 0;
    font-size: clamp(24px, 2.4vw, 30px);
}

body.page-company .side-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

body.page-company .side-card {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 26px 28px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

body.page-company .side-card:hover {
    transform: translateX(3px);
    box-shadow: -4px 8px 24px -8px rgba(10, 14, 42, 0.12);
}

body.page-company .side-card-meta>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

body.page-company .side-card-num {
    font-family: var(--font-display);
    font-size: 11px;
    color: var(--ink);
    opacity: 0.35;
    letter-spacing: 0.1em;
    font-weight: 500;
}

body.page-company .side-card-meta .meta-date {
    color: var(--ink-soft);
    font-size: 11px;
}

body.page-company .side-card-title h4 {
    font-family: var(--font-display);
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: -0.015em;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 16px;
    flex: 1;
}

body.page-company .side-card-link a span {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--teal-dark);
    transition: gap 0.2s;
    margin-top: auto;
}

body.page-company .side-card-link:hover span {
    gap: 14px;
}

body.page-company .side-card-event {
    flex-direction: row;
    gap: 18px;
    align-items: stretch;
    padding: 22px 24px;
}

body.page-company .side-event-date>div {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 68px;
    padding: 14px 10px;
    background: var(--ink);
    border-radius: 14px;
    color: white;
}

body.page-company .side-event-month {
    font-family: var(--font-display);
    font-size: 10px;
    color: var(--yellow);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
}

body.page-company .side-event-day {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-top: 4px;
}

body.page-company .side-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}

body.page-company .side-card-body .meta-date {
    color: var(--ink-soft);
    font-size: 10px;
    margin-bottom: 8px;
    opacity: 0.8;
}

body.page-company .side-card-body .side-card-title {
    margin-bottom: 10px;
    font-size: 16px;
}

body.page-company .webinar-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: var(--font-display);
}

body.page-company .webinar-tag-featured {
    background: rgba(242, 180, 22, 0.15);
    color: color-mix(in srgb, var(--yellow) 55%, var(--ink));
    border: 1px solid rgba(242, 180, 22, 0.35);
}

body.page-company .webinar-tag-ondemand {
    background: rgba(10, 14, 42, 0.06);
    color: var(--ink-soft);
    border: 1px solid var(--line);
}

/* ============ NEWS / EVENTS / WEBINARS ============ */
body.page-home .news {
    background: #e6e6e657;
    position: relative;
    overflow: hidden;
}

body.page-home .news::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 92% 8%, rgba(2, 184, 127, 0.07) 0%, transparent 35%),
        radial-gradient(circle at 8% 95%, rgba(242, 180, 22, 0.06) 0%, transparent 40%);
    z-index: 0;
    pointer-events: none;
}

body.page-home .news .container {
    position: relative;
    z-index: 2;
}

body .updates-header {
    max-width: 600px;
    margin-bottom: -80px;
}

body.page-home .updates-header-text {
    max-width: 540px;
}

body.page-home .updates-header-text .section-tag {
    margin-bottom: 18px;
}

body.page-home .updates-header-text .section-title {
    margin-bottom: 16px;
}

body.page-home .updates-header-text .section-sub {
    font-size: 16px;
}

body.page-home .updates-tabs {
    display: inline-flex;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 5px;
    gap: 2px;
    box-shadow: 0 2px 8px -2px rgba(10, 14, 42, 0.05);
}

body.page-home .updates-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    color: var(--ink-soft);
    border-radius: 10px;
    transition: all 0.25s ease;
    white-space: nowrap;
}

body.page-home .updates-tab:hover {
    color: var(--ink);
    background: rgba(10, 14, 42, 0.04);
}

body.page-home .updates-tab.active {
    background: var(--ink);
    color: var(--paper);
    box-shadow: 0 4px 14px -4px rgba(10, 14, 42, 0.3);
}

body.page-home .updates-tab-mark {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--line);
    transition: all 0.3s ease;
}

body.page-home .updates-tab.active .updates-tab-mark {
    background: var(--yellow);
    box-shadow: 0 0 10px var(--yellow);
}

body.page-home .updates-tab-label {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.005em;
}

body.page-home .updates-tab-count {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    opacity: 0.55;
    transition: opacity 0.25s;
}

body.page-home .updates-tab.active .updates-tab-count {
    color: var(--yellow);
    opacity: 1;
}

body.page-home .tab-panel {
    display: none;
}

body.page-home .tab-panel.active {
    display: block;
    animation: panel-in 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes panel-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

body.page-home .editorial-grid {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 28px;
    align-items: stretch;
}

body.page-home .feature-card {
    position: relative;
    background: var(--ink);
    border-radius: 28px;
    padding: 0;
    overflow: hidden;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: var(--paper);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    box-shadow: 0 20px 50px -20px rgba(10, 14, 42, 0.25);
}

body.page-home .feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 70px -20px rgba(10, 14, 42, 0.35);
}

body.page-home .feature-card-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 15%, rgba(2, 184, 127, 0.45) 0%, transparent 50%),
        radial-gradient(circle at 85% 75%, rgba(242, 180, 22, 0.3) 0%, transparent 55%),
        linear-gradient(135deg, #1c1f27 0%, #0f1219 100%);
    z-index: 0;
}

body.page-home .feature-card-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: radial-gradient(ellipse 80% 80% at 30% 30%, black 30%, transparent 100%);
}

body.page-home .feature-card-bg-event {
    background:
        radial-gradient(circle at 15% 20%, rgba(2, 184, 127, 0.5) 0%, transparent 50%),
        radial-gradient(circle at 90% 80%, rgba(2, 184, 127, 0.25) 0%, transparent 50%),
        linear-gradient(135deg, #0c1f17 0%, #0f1219 100%);
}

body.page-home .feature-card-bg-webinar {
    background:
        radial-gradient(circle at 80% 15%, rgba(242, 180, 22, 0.4) 0%, transparent 55%),
        radial-gradient(circle at 15% 90%, rgba(2, 184, 127, 0.3) 0%, transparent 55%),
        linear-gradient(135deg, #1a1a22 0%, #0f1219 100%);
}

body.page-home .feature-card-content {
    position: relative;
    z-index: 2;
    padding: 48px;
}

body.page-home .feature-card-meta>div {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--font-display);
    letter-spacing: 0.06em;
}

body.page-home .meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: var(--font-display);
}

body.page-home .meta-pill-light {
    background: rgba(255, 255, 255, 0.08);
    color: var(--yellow-soft);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

body.page-home .meta-pill-live {
    background: rgba(2, 184, 127, 0.18);
    color: #6fe0b8;
    border: 1px solid rgba(2, 184, 127, 0.35);
}

body.page-home .meta-pill-live .live-dot {
    width: 6px;
    height: 6px;
    background: #6fe0b8;
    border-radius: 50%;
    box-shadow: 0 0 8px #6fe0b8;
    animation: blink 1.5s ease-in-out infinite;
}

body.page-home .meta-divider {
    opacity: 0.4;
}

body.page-home .meta-date {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.06em;
}

body.page-home .feature-card-title h3 {
    font-family: var(--font-display);
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    font-weight: 400;
    color: white;
    margin-bottom: 20px;
    max-width: 540px;
}

body.page-home .feature-card-excerpt>div {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 32px;
    max-width: 520px;
}

body.page-home .feature-event-row {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

body.page-home .feature-event-date>div {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    padding: 22px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    backdrop-filter: blur(20px);
}

body.page-home .feature-event-date>div p {
    text-align: center;
}

body.page-home .feature-event-month {
    font-family: var(--font-display);
    font-size: 12px;
    color: var(--yellow);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 600;
}

body.page-home .feature-event-day {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: 300;
    letter-spacing: -0.04em;
    color: white;
    line-height: 1;
    margin: 4px 0;
}

body.page-home .feature-event-year {
    font-family: var(--font-display);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.1em;
}

body.page-home .feature-event-row .feature-card-title h3 {
    margin-bottom: 0;
    font-size: clamp(24px, 2.4vw, 30px);
}

body.page-home .side-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

body.page-home .side-card {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 26px 28px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

body.page-home .side-card:hover {
    transform: translateX(3px);
    box-shadow: -4px 8px 24px -8px rgba(10, 14, 42, 0.12);
}

body.page-home .side-card-meta>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
}

body.page-home .side-card-num {
    font-family: var(--font-display);
    font-size: 11px;
    color: var(--ink);
    opacity: 0.35;
    letter-spacing: 0.1em;
    font-weight: 500;
}

body.page-home .side-card-meta .meta-date {
    color: var(--ink-soft);
    font-size: 11px;
}

body.page-home .side-card-title h4 {
    font-family: var(--font-display);
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: -0.015em;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 16px;
    flex: 1;
}

body.page-home .side-card-link a span {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--teal-dark);
    transition: gap 0.2s;
    margin-top: auto;
}

body.page-home .side-card-link:hover span {
    gap: 14px;
}

body.page-home .side-card-event {
    flex-direction: row;
    gap: 18px;
    align-items: stretch;
    padding: 22px 24px;
}

body.page-home .side-event-date>div {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 68px;
    padding: 14px 10px;
    background: var(--ink);
    border-radius: 14px;
    color: white;
}

body.page-home .side-event-month {
    font-family: var(--font-display);
    font-size: 10px;
    color: var(--yellow);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
}

body.page-home .side-event-day {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-top: 4px;
}

body.page-home .side-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}

body.page-home .side-card-body .meta-date {
    color: var(--ink-soft);
    font-size: 10px;
    margin-bottom: 8px;
    opacity: 0.8;
}

body.page-home .side-card-body .side-card-title {
    margin-bottom: 10px;
    font-size: 16px;
}

body.page-home .webinar-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: var(--font-display);
}

body.page-home .webinar-tag-featured {
    background: rgba(242, 180, 22, 0.15);
    color: #946809;
    border: 1px solid rgba(242, 180, 22, 0.35);
}

body.page-home .webinar-tag-ondemand {
    background: rgba(10, 14, 42, 0.06);
    color: var(--ink-soft);
    border: 1px solid var(--line);
}

body.page-company

/* ============ CTA ============ */
.cta {
    padding: 100px 0;
}

body.page-company .cta-card {
    background: linear-gradient(150deg, #3dff8e 0%, #27c7ab 20%, #02b87f 60%, #3dff8e 80%, #fffb5c 100%);
    border-radius: 32px;
    padding: 80px;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
}

body.page-company .cta-card-bg {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(10, 14, 42, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 14, 42, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 40%, transparent 100%);
    z-index: 0;
}

body.page-company .cta-content {
    position: relative;
    z-index: 2;
}

body.page-company .cta h2 {
    font-family: var(--font-display);
    font-size: clamp(40px, 5vw, 60px);
    line-height: 1;
    letter-spacing: -0.03em;
    font-weight: 400;
    margin-bottom: 24px;
    color: white;
}

body.page-company .cta h2 em {
    font-style: normal;
}

body.page-company .cta p {
    font-size: 18px;
    color: var(--paper);
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

body.page-company .cta-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

body.page-company

/* ============ FOOTER ============ */
footer {
    background: var(--extra-dark);
    color: var(--paper);
    padding: 80px 32px 40px;
}

body.page-company .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 60px;
}

body.page-company .footer-brand h3 {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 22px;
    color: white;
}

body.page-company .footer-brand h3 img {
    max-width: 200px;
}

body.page-company .footer-brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--grad-hero);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 17px;
}

body.page-company .footer-brand p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 24px;
    max-width: 320px;
}

body.page-company .footer-contact {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.8;
}

body.page-company .footer-contact strong {
    color: var(--yellow-soft);
    font-weight: 500;
}

body.page-company .footer-contact a {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s;
}

body.page-company .footer-contact a:hover {
    color: white;
}

body.page-company .footer-col h4 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--yellow-soft);
    font-weight: 600;
    margin-bottom: 20px;
}

body.page-company .footer-col ul {
    list-style: none;
}

body.page-company .footer-col li {
    margin-bottom: 10px;
}

body.page-company .footer-col a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    transition: color 0.2s;
}

body.page-company .footer-col a:hover {
    color: white;
}

body.page-company .footer-bottom {
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

body.page-company .footer-bottom-links {
    display: flex;
    gap: 24px;
}

body.page-company .footer-bottom-links a:hover {
    color: white;
}

/* Responsive */
@media (max-width: 1024px) {
    body.page-company .hero {
        min-height: auto;
        padding: 124px 0 80px;
    }

    body.page-company .hero h1 {
        font-size: clamp(54px, 10vw, 92px);
    }

    body.page-company .hero-sub {
        max-width: 760px;
    }

    body.page-company .about-body {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    body.page-company .leadership-content {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    body.page-company .leadership-card {
        padding: 50px;
    }

    body.page-company .leadership-avatar {
        max-width: 280px;
        margin: 0 auto;
    }

    body.page-company .product-card.featured,
    body.page-company .product-card.standard,
    body.page-company .product-card.half {
        grid-column: span 12;
    }

    body.page-company .product-card.third {
        grid-column: span 6;
    }

    body.page-company .events-grid,
    body.page-company .news-grid {
        grid-template-columns: 1fr;
    }

    body.page-company .editorial-grid {
        grid-template-columns: 1fr;
    }

    body.page-company .feature-card {
        min-height: 420px;
    }

    body.page-company .testimonial-slide {
        grid-template-columns: 1fr;
    }

    body.page-company .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    body.page-company .cta-card {
        padding: 60px 30px;
    }
}

@media (max-width: 640px) {
    body.page-company .nav-links {
        display: none;
    }

    body.page-company .nav-cta .btn-ghost {
        display: none;
    }

    body.page-company .hero {
        min-height: auto;
        padding: 116px 0 64px;
    }

    body.page-company .hero-meta-row {
        margin-bottom: 42px;
    }

    body.page-company .hero h1 {
        font-size: clamp(48px, 16vw, 70px);
    }

    body.page-company .hero-divider {
        margin: 46px 0 30px;
    }

    body.page-company .hero-divider-line {
        width: 72px;
    }

    body.page-company .hero-sub {
        font-size: 18px;
        margin-bottom: 40px;
    }

    body.page-company .hero-actions .btn {
        width: 100%;
        max-width: 260px;
    }

    body.page-company section {
        padding: 80px 24px;
    }

    body.page-company .about-highlights {
        grid-template-columns: 1fr;
    }

    body.page-company .product-card.third {
        grid-column: span 12;
    }

    body.page-company .updates-tabs {
        width: 100%;
        overflow-x: auto;
    }

    body.page-company .updates-tab {
        flex: 1;
        justify-content: center;
        padding: 10px 12px;
    }

    body.page-company .updates-tab-count {
        display: none;
    }

    body.page-company .feature-card {
        min-height: auto;
    }

    body.page-company .feature-card-content {
        padding: 32px 28px;
    }

    body.page-company .feature-event-row {
        flex-direction: column;
        gap: 20px;
    }

    body.page-company .feature-event-date {
        min-width: 0;
        width: 100%;
        flex-direction: row;
        gap: 12px;
        padding: 18px 28px;
    }

    body.page-company .side-card-event {
        flex-direction: column;
    }

    body.page-company .footer-grid {
        grid-template-columns: 1fr;
    }

    body.page-company .footer-bottom {
        flex-direction: column;
        gap: 16px;
    }

    body.page-company footer {
        padding: 60px 24px;
    }

    body.page-company .leadership-card {
        padding: 40px 28px;
    }

    body.page-home .editorial-grid {
        grid-template-columns: 1fr;
    }

    body.page-home .side-card,
    body.page-company .side-card {
        flex: auto;
    }

    body.page-company .container {
        padding: 0 24px;
    }
}

/* ============ SHARED UTILITIES FROM INLINE STYLES ============ */
.score-percent {
    font-size: 28px;
    opacity: 0.6;
}

.avatar-gradient-cyan-indigo {
    background: linear-gradient(135deg, var(--cyan), var(--indigo));
}

.avatar-gradient-rose-amber {
    background: linear-gradient(135deg, var(--rose), var(--amber));
}

.avatar-gradient-orange-coral {
    background: linear-gradient(135deg, var(--orange), var(--coral));
}

.avatar-gradient-lime-cyan {
    background: linear-gradient(135deg, #c4ff3d, var(--cyan));
}

.avatar-gradient-orange-amber {
    background: linear-gradient(135deg, var(--orange), var(--amber));
}

.avatar-gradient-indigo-cyan {
    background: linear-gradient(135deg, var(--indigo), var(--cyan));
}

.avatar-gradient-lime-teal {
    background: linear-gradient(135deg, #c4ff3d, #02b87f);
}

.avatar-gradient-yellow-orange {
    background: linear-gradient(135deg, var(--yellow), var(--orange));
}

.avatar-gradient-teal-dark {
    background: linear-gradient(135deg, var(--teal), var(--teal-dark));
}

.avatar-gradient-coral-rose {
    background: linear-gradient(135deg, var(--coral), var(--rose));
}

.avatar-gradient-orange-soft-coral {
    background: linear-gradient(135deg, var(--orange-soft), var(--coral));
}

.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    max-width: 100%;
}

.news-card-copy {
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.55;
    margin-bottom: 24px;
}

.footer-event-title {
    display: block;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
}

.footer-event-date {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

/* ============ SOFTWARE & SERVICES PAGE ============ */
body.page-software {

    --green: var(--teal);
    --green-deep: var(--teal);
    --green-bright: var(--teal);
    --mint: #b8f0c8;
    --mint-soft: #d7f5dd;
    --cream: #fff8e6;
    --peach: #ffe6c4;
    --lemon: #fff7c2;
    --amber: #f5a623;
    --ink: #0e1411;
    --ink-soft: #1a2521;
    --ink-mid: #2a3530;
    --slate: #4a5650;
    --muted: #6b7770;
    --line: #e6e8e3;
    --bg: #ffffff;
    --card: #ffffff;
    --card-dark: #0f1714;
    --radius-lg: 22px;
    --radius-md: 14px;
    --radius-sm: 10px;
    --shadow-card: 0 1px 0 rgba(14, 20, 17, 0.04), 0 8px 24px -12px rgba(14, 20, 17, 0.08);
    --shadow-hover: 0 1px 0 rgba(14, 20, 17, 0.04), 0 24px 48px -20px rgba(14, 20, 17, 0.18);

    font-family: var(--font-display);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.page-software {
    font-family: var(--font-display);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.page-software a {
    color: inherit;
    text-decoration: none;
}

body.page-software img {
    max-width: 100%;
    display: block;
}

body.page-software .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}

body.page-software .nav {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 1280px;
    background: rgba(251, 251, 253, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(229, 229, 238, 0.8);
    border-radius: 100px;
    padding: 10px 12px 10px 24px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 30px rgba(10, 14, 42, 0.04);
    transition: all 0.3s ease;
}

body.page-software .nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.page-software .nav-logo img {
    max-width: 150px;
}

body.page-software .nav-links {
    display: flex;
    gap: 4px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

body.page-software .nav-links a {
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft);
    transition: all 0.2s ease;
}

body.page-software .nav-links a:hover,
body.page-software .nav-links a.active {
    background: rgba(0, 184, 107, 0.12);
    color: var(--teal);
}

body.page-software .nav-cta {
    display: flex;
    gap: 8px;
    align-items: center;
}

body.page-software .btn-ghost:hover {
    color: var(--teal);
}

body.page-software .serif-italic {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.01em;
}

body.page-software .serif {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.015em;
}

body.page-software

/* ========== HERO ========== */
.hero {
    position: relative;
    padding: 136px 32px 0;
    background: white;
}

body.page-software

/* colored gradient � ends ~halfway through the product mock */
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* Hero ends with 90px padding-bottom (from hero-mock-wrap).
       Mock is ~420px tall. We want the gradient to stop ~halfway through it.
       So the gradient should end ~90 + (420/2) = 300px from the bottom. */
    bottom: 300px;
    background:
        radial-gradient(ellipse 62% 82% at 92% 0%, rgba(0, 217, 126, 0.18) 0%, transparent 62%),
        radial-gradient(ellipse 52% 72% at 4% 12%, rgba(255, 200, 120, 0.35) 0%, transparent 60%),
        radial-gradient(ellipse 76% 88% at 58% 100%, rgba(255, 240, 180, 0.55) 0%, transparent 66%),
        linear-gradient(180deg, #fefcf5 0%, #fff8ea 100%);
    /* soften the bottom edge slightly so the cutoff isn't a hard line */
    mask-image: linear-gradient(180deg, black 0%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, black 0%, black 92%, transparent 100%);
    z-index: 0;
    pointer-events: none;
}

body.page-software

/* subtle grid texture overlay � lives in the colored band only */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 300px;
    background-image:
        linear-gradient(rgba(14, 20, 17, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 20, 17, 0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image:
        radial-gradient(ellipse 80% 90% at 50% 40%, black 0%, transparent 80%),
        linear-gradient(180deg, black 0%, black 92%, transparent 100%);
    -webkit-mask-image:
        radial-gradient(ellipse 80% 90% at 50% 40%, black 0%, transparent 80%),
        linear-gradient(180deg, black 0%, black 92%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}

body.page-software .hero-inner {
    max-width: 1240px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    text-align: center;
}

body.page-software .hero-meta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 36px;
}

body.page-software .hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: #ffffff6e;
    border: 1px solid rgba(14, 20, 17, 0.08);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: var(--teal-dark);
}

body.page-software .hero-tag-dot {
    display: inline-flex;
    width: 6px;
    height: 6px;
    background: var(--yellow);
    border-radius: 50%;
    animation: blink 2s ease-in-out infinite;
}

body.page-software .hero-tag>div {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

body.page-software .pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 10px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(14, 20, 17, 0.08);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-soft);
    margin-bottom: 28px;
}

body.page-software .pill-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--teal);
    display: grid;
    place-items: center;
    color: white;
    font-size: 10px;
    font-weight: 700;
}

body.page-software .pill .label {
    color: var(--muted);
}

body.page-software .pill .sep {
    color: rgba(14, 20, 17, 0.15);
}

body.page-software .pill .strong {
    color: var(--ink);
    font-weight: 600;
}

body.page-software .hero-title h1 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(48px, 6.2vw, 55px);
    line-height: 1.0;
    letter-spacing: -0.028em;
    color: var(--ink);
    margin: 0 auto 36px;
    max-width: 22ch;
}

body.page-software .hero-title h1 em {
    font-style: italic;
    font-weight: 500;
    color: var(--teal);
}

body.page-software .hero-ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 72px;
}

body.page-software

/* ========== HORIZONTAL PRODUCT MOCK ========== */
.hero-mock-wrap {
    position: relative;
    z-index: 2;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 0 90px;
}

body.page-software .hero-mock {
    position: relative;
    background: white;
    border-radius: 20px 20px 0 0;
    border: 1px solid rgba(14, 20, 17, 0.06);
    border-bottom: none;
    box-shadow:
        0 -1px 0 rgba(14, 20, 17, 0.04),
        0 18px 42px -24px rgba(14, 20, 17, 0.14),
        0 34px 72px -48px rgba(14, 20, 17, 0.10);
    overflow: hidden;
}

body.page-software

/* a thin gradient strip at the top edge to feel like a "real" app window */
.hero-mock::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--teal) 0%, var(--teal) 30%, #ffd54f 70%, #f5a623 100%);
}

body.page-software .hero-mock-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #fbfbf7 0%, #ffffff 100%);
}

body.page-software .mock-dots>div {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

body.page-software .mock-dot {
    display: inline-flex;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

body.page-software .mock-dot:nth-child(1) {
    background: #ff5f57;
}

body.page-software .mock-dot:nth-child(2) {
    background: #febc2e;
}

body.page-software .mock-dot:nth-child(3) {
    background: #28c840;
}

body.page-software .mock-url {
    flex: 1;
    max-width: 420px !important;
    padding: 6px 14px;
    background: rgba(14, 20, 17, 0.04);
    border-radius: 8px;
    font-size: 12px;
    color: var(--muted);
    font-family: var(--font-display);
    display: flex;
    align-items: center;
    gap: 8px;
}

body.page-software .mock-url::before {
    content: '';
    width: 10px;
    height: 10px;
    border: 1.5px solid var(--teal);
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

body.page-software .mock-url strong {
    color: var(--ink);
    font-weight: 600;
}

body.page-software .mock-badge-ai {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    background: var(--ink);
    color: white;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    flex-shrink: 0;
}

body.page-software .mock-badge-ai::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 8px var(--teal);
    animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

body.page-software

/* 3-column app body: sidebar / candidates / AI summary */
.mock-body {
    display: grid;
    grid-template-columns: 200px 1fr 320px;
    min-height: 360px;
}

body.page-software

/* SIDEBAR */
.mock-sidebar {
    padding: 22px 18px;
    border-right: 1px solid var(--line);
    background: #fafaf6;
}

body.page-software .mock-side-section {
    margin-bottom: 22px;
}

body.page-software .mock-side-label>div {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
    padding-left: 8px;
}

body.page-software .mock-side-item>div {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--ink-mid);
    margin-bottom: 2px;
}

body.page-software .mock-side-item.is-active>div {
    background: white;
    color: var(--ink);
    font-weight: 600;
    box-shadow: 0 1px 0 rgba(14, 20, 17, 0.04), 0 4px 12px -6px rgba(14, 20, 17, 0.08);
}

body.page-software .mock-side-item .mark {
    display: inline-flex;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    flex-shrink: 0;
}

body.page-software .mark.m-green {
    background: var(--teal);
}

body.page-software .mark.m-orange {
    background: linear-gradient(135deg, #ffb547, #f5912a);
}

body.page-software .mark.m-blue {
    background: linear-gradient(135deg, #5fb1ff, #2e8eff);
}

body.page-software .mark.m-purple {
    background: linear-gradient(135deg, #b78cff, #8a5aff);
}

body.page-software .mark.m-coral {
    background: linear-gradient(135deg, #ff8a5b, #ff6b3d);
}

body.page-software .mark.m-teal {
    background: var(--teal);
}

body.page-software .mock-side-count {
    margin-left: auto;
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
}

body.page-software

/* CANDIDATES (center) */
.mock-main {
    padding: 22px 26px;
}

body.page-software .mock-main-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

body.page-software .mock-main-title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
}

body.page-software .mock-main-title em {
    font-style: italic;
    color: var(--teal);
    font-weight: 500;
    margin-left: 4px;
}

body.page-software .mock-main-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 11.5px;
    color: var(--ink-mid);
    font-weight: 500;
}

body.page-software .mock-main-filter::after {
    content: '?';
    color: var(--muted);
    font-size: 9px;
}

body.page-software .candidate-row {
    display: grid;
    grid-template-columns: 36px 1fr auto auto;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 4px;
    transition: background .3s;
}

body.page-software .candidate-row.is-active {
    background: linear-gradient(90deg, rgba(0, 217, 126, 0.09) 0%, transparent 100%);
    position: relative;
}

body.page-software .candidate-row.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--teal);
    border-radius: 0 2px 2px 0;
}

body.page-software .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: white;
    font-size: 12.5px;
    font-weight: 600;
    font-family: var(--font-display);
}

body.page-software .avatar div {
    display: flex;
    align-items: center;
}

body.page-software .avatar.a1 {
    background: linear-gradient(135deg, #5fb1ff, #2e8eff);
}

body.page-software .avatar.a2 {
    background: linear-gradient(135deg, #ff8a5b, #ff6b3d);
}

body.page-software .avatar.a3 {
    background: linear-gradient(135deg, #b78cff, #8a5aff);
}

body.page-software .avatar.a4 {
    background: linear-gradient(135deg, #5ce0c8, #2bb89e);
}

body.page-software .candidate-info {
    min-width: 0;
}

body.page-software .candidate-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
    margin-bottom: 3px;
}

body.page-software .candidate-meta {
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.2;
}

body.page-software .score {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.02em;
}

body.page-software .score em {
    font-style: italic;
    color: var(--teal);
    font-size: 11.5px;
    font-weight: 500;
    margin-left: 4px;
}

body.page-software .bar {
    width: 72px;
    height: 5px;
    background: rgba(14, 20, 17, 0.06);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

body.page-software .bar::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--teal);
    border-radius: 999px;
    width: var(--w, 80%);
}

body.page-software

/* RIGHT RAIL: AI Candidate Summary */
.mock-ai-rail {
    background: linear-gradient(160deg, #0f1714 0%, #1a2e22 100%);
    color: white;
    padding: 22px 22px;
    position: relative;
    overflow: hidden;
}

body.page-software .mock-ai-rail::before {
    content: '';
    position: absolute;
    right: -50px;
    top: -50px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 217, 126, 0.22) 0%, transparent 70%);
    pointer-events: none;
}

body.page-software .ai-rail-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 12px;
    position: relative;
}

body.page-software .ai-rail-label::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 8px var(--teal);
}

body.page-software .ai-rail-name {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    color: white;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
    position: relative;
}

body.page-software .ai-rail-role {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 16px;
    position: relative;
}

body.page-software .ai-rail-strong>div p {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(0, 217, 126, 0.18);
    color: var(--teal);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 12px;
    position: relative;
}

body.page-software .ai-rail-text {
    font-size: 12.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 16px;
    position: relative;
}

body.page-software .ai-rail-text strong {
    color: white;
    font-weight: 600;
}

body.page-software .ai-rail-tags>div p {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    position: relative;
}

body.page-software .ai-rail-tag {
    padding: 4px 9px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

body.page-software

/* stat strip below mock � sits in the hero gradient */
.hero-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px 52px;
    margin-top: 44px;
    padding-bottom: 16px;
}

body.page-software .hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.page-software .hero-stat .num {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 6px;
}

body.page-software .hero-stat .num em {
    font-style: italic;
    color: var(--teal);
}

body.page-software .hero-stat .lbl {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.35;
    text-align: center;
    max-width: 20ch;
}

body.page-software

/* ========== SECTION HEADER ========== */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 18px;
}

body.page-software .eyebrow::before {
    content: '';
    width: 24px;
    height: 1.5px;
    background: var(--teal);
    border-radius: 2px;
}

body.page-software

/* ========== PRODUCT GRID ========== */
.section {
    padding: 110px 32px;
    max-width: 1240px;
    margin: 0 auto;
}

body.page-software .section-head {
    margin-bottom: 60px;
    max-width: 760px;
}

body.page-software .section-head h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(34px, 4.4vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--ink);
}

body.page-software .section-head h2 em {
    font-style: italic;
    color: var(--teal);
}

body.page-software .section-head p {
    margin-top: 18px;
    color: var(--slate);
    font-size: 17px;
    line-height: 1.6;
    max-width: 60ch;
}

body.page-software

/* featured (flagship + higher ed) */
.featured-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

body.page-software .product-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 32px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-card);
}

body.page-software .product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    border-color: rgba(0, 184, 107, 0.25);
}

body.page-software .product-card.is-flagship {
    /* subtle warm wash */
}

body.page-software .product-card.is-dark {
    background: linear-gradient(160deg, #0f1714 0%, #16221d 100%);
    border-color: transparent;
    color: white;
}

body.page-software .product-card.is-dark .pcard-desc {
    color: rgba(255, 255, 255, 0.7);
}

body.page-software .product-card.is-dark .pcard-title {
    color: white;
}

body.page-software .product-card.is-dark .pcard-link {
    color: var(--teal);
}

body.page-software .product-card.is-dark .pcard-link::after {
    color: var(--teal);
}

body.page-software .product-card.is-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 100% 0%, rgba(0, 217, 126, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(245, 166, 35, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

body.page-software .pcard-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 22px;
}

body.page-software .pcard-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

body.page-software .pcard-icon.icon-orange {
    background: linear-gradient(135deg, #ffb547 0%, #f5912a 100%);
}

body.page-software .pcard-icon.icon-green {
    background: var(--teal);
}

body.page-software .pcard-icon.icon-coral {
    background: linear-gradient(135deg, #ff8a5b 0%, #ff6b3d 100%);
}

body.page-software .pcard-icon.icon-blue {
    background: linear-gradient(135deg, #5fb1ff 0%, #2e8eff 100%);
}

body.page-software .pcard-icon.icon-purple {
    background: linear-gradient(135deg, #b78cff 0%, #8a5aff 100%);
}

body.page-software .pcard-icon.icon-teal {
    background: var(--teal);
}

body.page-software .pcard-icon.icon-amber {
    background: linear-gradient(135deg, #ffd54f 0%, #f5a623 100%);
}

body.page-software .pcard-icon svg {
    width: 22px;
    height: 22px;
    color: white;
}

body.page-software .badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

body.page-software .badge-flagship {
    background: var(--lemon);
    color: #7a5e00;
}

body.page-software .badge-higher {
    background: var(--amber);
    color: #4a2e00;
}

body.page-software .badge-new {
    background: var(--mint);
    color: #00603a;
}

body.page-software .badge-2026 {
    background: #f0e8ff;
    color: #4b2a8f;
}

body.page-software .pcard-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: 14px;
}

body.page-software .product-card.is-flagship .pcard-title em,
body.page-software .product-card .pcard-title em {
    font-style: italic;
    color: var(--teal);
}

body.page-software .pcard-desc {
    color: var(--slate);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 24px;
    flex-grow: 1;
}

body.page-software .pcard-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--teal);
    text-decoration: none;
    font-weight: 600;
    font-size: 14.5px;
    margin-top: auto;
    align-self: flex-start;
}

body.page-software .pcard-link::after {
    content: '?';
    transition: transform .2s ease;
}

body.page-software .pcard-link:hover::after {
    transform: translateX(4px);
}

body.page-software

/* secondary product cards */
.secondary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

body.page-software

/* CTA tile (fills 8th slot in 2-col product grid) */
.cta-tile {
    position: relative;
    border-radius: var(--radius-lg);
    padding: 32px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: white;
    background:
        radial-gradient(circle at 0% 100%, rgba(255, 231, 138, 0.35) 0%, transparent 55%),
        radial-gradient(circle at 100% 0%, rgba(0, 217, 126, 0.35) 0%, transparent 55%),
        linear-gradient(150deg, #0f1714 0%, #1a2e22 60%, #16352a 100%);
    box-shadow: var(--shadow-card);
    transition: transform .25s ease, box-shadow .25s ease;
}

body.page-software .cta-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

body.page-software .cta-tile::after {
    content: '';
    position: absolute;
    right: -60px;
    bottom: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 217, 126, 0.18) 0%, transparent 70%);
    pointer-events: none;
}

body.page-software .cta-tile-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}

body.page-software .cta-tile-mark {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--teal);
    display: grid;
    place-items: center;
    color: white;
    flex-shrink: 0;
}

body.page-software .cta-tile-mark svg {
    width: 18px;
    height: 18px;
}

body.page-software .cta-tile-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal);
}

body.page-software .cta-tile h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: white;
    margin-bottom: 14px;
    position: relative;
}

body.page-software .cta-tile h3 em {
    font-style: italic;
    color: var(--teal);
}

body.page-software .cta-tile p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 24px;
    flex-grow: 1;
    position: relative;
}

body.page-software .cta-tile-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    position: relative;
}

body.page-software .cta-tile .btn-primary {
    box-shadow: 0 6px 18px -8px rgba(0, 217, 126, 0.6);
}

body.page-software .cta-tile-phone {
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    padding: 11px 4px;
}

body.page-software .cta-tile-phone:hover {
    color: var(--teal);
}

body.page-software

/* ========== STATS BAND ========== */
.stats-band {
    background: linear-gradient(110deg, #0c1411 0%, #16221d 50%, #1f2e26 100%);
    color: white;
    padding: 90px 32px;
    position: relative;
    overflow: hidden;
}

body.page-software .stats-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% 50%, rgba(0, 217, 126, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 10% 100%, rgba(245, 166, 35, 0.06) 0%, transparent 50%);
    pointer-events: none;
}

body.page-software .stats-inner {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 2fr;
    gap: 60px;
    align-items: center;
    position: relative;
}

body.page-software .stats-inner h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

body.page-software .stats-inner h2 em {
    font-style: italic;
    color: var(--teal);
}

body.page-software .stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

body.page-software .stat-item .num {
    font-family: var(--font-display);
    font-size: clamp(48px, 5.5vw, 72px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.03em;
    color: white;
    margin-bottom: 12px;
}

body.page-software .stat-item .lbl {
    color: rgba(255, 255, 255, 0.65);
    font-size: 14.5px;
    line-height: 1.4;
    max-width: 18ch;
}

body.page-software

/* ========== HELP / SUPPORT CTA ========== */
.help-section {
    padding: 110px 32px;
    background: #fafaf6;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

body.page-software .help-inner {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

body.page-software .help-text h2 {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 400;
    color: var(--ink);
    margin: 0 0 24px;
    padding-bottom: 0.08em;
    overflow: visible;
}

body.page-software .help-text h2 em {
    font-style: italic;
    font-weight: 300;
    background: var(--grad-teal-yellow);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 0.2em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

body.page-software .help-text p {
    color: var(--ink-soft);
    font-size: 18px;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 0 28px;
}

body.page-software .help-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

body.page-software .help-feature {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 22px 26px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 14px;
}

body.page-software .help-feature-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--mint-soft);
    color: var(--teal);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    margin-top: 1px;
}

body.page-software .help-feature-icon div {
    display: flex;
    align-items: center;
}

body.page-software .help-feature-icon svg {
    width: 19px;
    height: 19px;
}

body.page-software .help-feature h4 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 8px;
    color: var(--ink);
}

body.page-software .help-feature p {
    font-size: 14px;
    color: var(--muted);
    margin: 0;
    line-height: 1.5;
}

body.page-software

/* ========== CTA GRADIENT ========== */
.cta-section {
    padding: 100px 32px;
}

body.page-software .cta-card {
    max-width: 1240px;
    margin: 0 auto;
    padding: 70px 60px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 0% 50%, #b8f5d3 0%, transparent 60%),
        radial-gradient(circle at 100% 50%, #fff4b8 0%, transparent 60%),
        linear-gradient(120deg, #6ee7a8 0%, #d8f0a0 50%, #fde880 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
}

body.page-software .cta-card-bg {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(10, 14, 42, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 14, 42, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 40%, transparent 100%);
    z-index: 0;
}

body.page-software .cta-card h2,
body.page-software .cta-card p,
body.page-software .cta-ctas {
    position: relative;
    z-index: 2;
}

body.page-software .cta-card h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-style: italic;
    font-size: clamp(44px, 5.5vw, 72px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 18px;
    margin-top: 10px;
}

body.page-software .cta-card p {
    color: var(--ink-mid);
    font-size: 16.5px;
    margin-bottom: 32px;
    max-width: 56ch;
    margin-left: auto;
    margin-right: auto;
}

body.page-software .cta-ctas {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

body.page-software .cta-ctas .btn {
    min-width: 224px;
    min-height: 62px;
    justify-content: center;
}

body.page-software .cta-phone {
    text-decoration: none;
}

body.page-software footer {
    background: #1c1f27;
    color: #fbfbfd;
    padding: 80px 32px 40px;
}

body.page-software .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 60px;
}

body.page-software .footer-brand h3 {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 22px;
    color: white;
}

body.page-software .footer-brand h3 img {
    max-width: 200px;
}

body.page-software .footer-brand p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 24px;
    max-width: 320px;
}

body.page-software .footer-contact {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.8;
}

body.page-software .footer-contact strong {
    color: #ffd15c;
    font-weight: 500;
}

body.page-software .footer-contact a {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s;
}

body.page-software .footer-contact a:hover {
    color: white;
}

body.page-software .footer-col h4 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffd15c;
    font-weight: 600;
    margin-bottom: 20px;
}

body.page-software .footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.page-software .footer-col li {
    margin-bottom: 10px;
}

body.page-software .footer-col a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    transition: color 0.2s;
}

body.page-software .footer-col a:hover {
    color: white;
}

body.page-software .footer-bottom {
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

body.page-software .footer-bottom-links {
    display: flex;
    gap: 24px;
}

body.page-software .footer-bottom-links a:hover {
    color: white;
}

/* ========== SOFTWARE PAGE RESPONSIVE ========== */
@media (max-width: 1000px) {
    body.page-software .nav-links {
        display: none;
    }

    body.page-software .featured-grid,
    body.page-software .secondary-grid {
        grid-template-columns: 1fr;
    }

    body.page-software .stats-inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    body.page-software .help-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    body.page-software .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    body.page-software .hero-stats {
        gap: 22px 28px;
    }

    body.page-software .section {
        padding: 70px 24px;
    }

    body.page-software .hero {
        padding: 124px 24px 0;
    }

    body.page-software .hero-mock-wrap {
        padding: 0 0 70px;
    }

    body.page-software .mock-body {
        grid-template-columns: 1fr 280px;
        min-height: 0;
    }

    body.page-software .mock-sidebar {
        display: none;
    }

    body.page-software .stats-band {
        padding: 70px 24px;
    }

    body.page-software .help-section {
        padding: 70px 24px;
    }

    body.page-software .cta-section {
        padding: 70px 24px;
    }

    body.page-software .cta-card {
        padding: 50px 28px;
    }
}

@media (max-width: 640px) {
    body.page-software .nav {
        padding: 14px 20px;
    }

    body.page-software .nav-cta .btn-ghost {
        display: none;
    }

    body.page-software .container {
        padding: 0 24px;
    }

    body.page-software .hero {
        padding: 116px 20px 0;
    }

    body.page-software .stats-grid {
        grid-template-columns: 1fr;
    }

    body.page-software .footer-grid {
        grid-template-columns: 1fr;
    }

    body.page-software .footer-bottom {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    body.page-software footer {
        padding: 60px 24px;
    }

    body.page-software .footer-bottom-links {
        flex-wrap: wrap;
        gap: 14px 20px;
    }

    body.page-software .pcard-title {
        font-size: 22px !important;
    }

    body.page-software .mock-body {
        grid-template-columns: 1fr;
    }

    body.page-software .mock-ai-rail {
        display: none;
    }

    body.page-software .mock-url {
        display: none;
    }

    body.page-software .mock-main {
        padding: 16px;
    }

    body.page-software .candidate-row {
        grid-template-columns: 32px 1fr auto;
    }

    body.page-software .candidate-row .bar {
        display: none;
    }

    body.page-software .hero-mock-header {
        padding: 12px 16px;
        gap: 10px;
    }

    body.page-software .mock-badge-ai {
        font-size: 10.5px;
        padding: 4px 8px;
    }
}

/* ========== SOFTWARE PAGE ANIMATIONS ========== */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

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

body.page-software .reveal {
    animation: fadeUp .8s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}

body.page-software .reveal-1 {
    animation-delay: .05s;
}

body.page-software .reveal-2 {
    animation-delay: .15s;
}

body.page-software .reveal-3 {
    animation-delay: .25s;
}

body.page-software .reveal-4 {
    animation-delay: .35s;
}

body.page-software .reveal-5 {
    animation-delay: .45s;
}

/* ============ SHARED CTA COMPONENT ============ */
.cta-section.cta-component {
    padding: 100px 32px;
}

.cta-section.cta-component .cta-card {
    max-width: 1240px;
    margin: 0 auto;
    padding: 70px 60px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 0% 50%, #b8f5d3 0%, transparent 60%),
        radial-gradient(circle at 100% 50%, #fff4b8 0%, transparent 60%),
        linear-gradient(120deg, #6ee7a8 0%, #d8f0a0 50%, #fde880 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
    color: var(--ink);
}

.cta-section.cta-component .cta-card-bg {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(10, 14, 42, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 14, 42, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 40%, transparent 100%);
    z-index: 0;
}

.cta-section.cta-component .cta-card h2,
.cta-section.cta-component .cta-card p,
.cta-section.cta-component .cta-ctas {
    position: relative;
    z-index: 2;
}

.cta-section.cta-component .cta-card h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(44px, 5.5vw, 72px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 18px;
}

.cta-section.cta-component .cta-card p {
    color: var(--ink-mid, var(--ink-soft));
    font-size: 16.5px;
    line-height: 1.55;
    margin: 0 auto 32px;
    max-width: 56ch;
}

.cta-section.cta-component .cta-ctas {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

@media (max-width: 1000px) {
    .cta-section.cta-component {
        padding: 70px 24px;
    }

    .cta-section.cta-component .cta-card {
        padding: 50px 28px;
    }
}

@media (max-width: 640px) {
    .cta-section.cta-component {
        padding: 60px 24px;
    }

    .cta-section.cta-component .btn {
        width: 100%;
        max-width: 280px;
    }
}

/* ============ SOFTWARE PRODUCT GRID MATCHES HOME ============ */
body.page-software .products {
    background: white;
    margin-top: -1px;
    padding: 1px 32px 110px;
    position: relative;
    z-index: 2;
}

body.page-software .products .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}

body.page-software .section-header {
    margin-bottom: 80px;
    max-width: 720px;
}

body.page-software .section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--teal);
    font-weight: 600;
    margin: 0 0 20px;
}

body.page-software .section-tag::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--teal);
}

body.page-software .section-title h2 {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 400;
    color: var(--ink);
    margin: 0 0 24px;
    padding-bottom: 0.08em;
    overflow: visible;
}

body.page-software .section-title em {
    font-style: italic;
    font-weight: 300;
    background: var(--grad-teal-yellow);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 0.2em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

body.page-software .section-sub {
    font-size: 18px;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 600px;
    margin: 0;
}

body.page-software .product-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
}

body.page-software .product-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 36px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    min-height: 360px;
    box-shadow: none;
    color: var(--ink);
}

body.page-software .product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -10px rgba(10, 14, 42, 0.1);
}

body.page-software .product-card.featured {
    grid-column: span 6;
    background: linear-gradient(135deg, #FAFAFF, #F0F0FA);
    min-height: 420px;
}

body.page-software .product-card.standard,
body.page-software .product-card.half {
    grid-column: span 6;
}

body.page-software .product-card.third {
    grid-column: span 4;
}

body.page-software .product-card.dark {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

body.page-software .product-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, #ffdc75 0%, #ff7300 90%, #fdb353 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    position: relative;
    z-index: 2;
    color: white;
}

body.page-software .product-card.dark .product-icon {
    background: linear-gradient(135deg, #c4ff3d, var(--teal));
}

body.page-software .product-card .icon-2 {
    background: linear-gradient(135deg, var(--orange-soft), var(--coral));
}

body.page-software .product-card .icon-3,
body.page-software .product-card .icon-4 {
    background: linear-gradient(135deg, var(--indigo), var(--cyan));
}

body.page-software .product-card .icon-5 {
    background: linear-gradient(135deg, #c4ff3d, var(--teal));
}

body.page-software .product-card .icon-6 {
    background: linear-gradient(135deg, #ffdc75 0%, #ff7300 90%, #fdb353 100%);
}

body.page-software .product-tag {
    position: absolute;
    top: 24px;
    right: 24px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: 100px;
    background: var(--ink);
    color: var(--paper);
}

body.page-software .product-card.dark .product-tag {
    background: var(--yellow);
    color: var(--ink);
}

body.page-software .product-tag.new {
    background: var(--orange-soft);
    color: #2D3F00;
}

body.page-software .product-card h3 {
    font-family: var(--font-display);
    font-size: 28px;
    line-height: 1.1;
    font-weight: 500;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
    position: relative;
    z-index: 2;
}

body.page-software .product-card.featured h3 {
    font-size: 32px;
}

body.page-software .product-card p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0 0 24px;
    flex: 1;
    position: relative;
    z-index: 2;
}

body.page-software .product-card.dark p {
    color: rgba(255, 255, 255, 0.7);
}

body.page-software .product-link,
body.page-careers .product-link {
    margin-top: auto;
}

body.page-software .product-link a>span,
body.page-careers .product-link a>span {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    transition: gap 0.2s;
    position: relative;
    z-index: 2;
    text-decoration: none;
}

body.page-software .product-card.dark .product-link a>span {
    color: var(--yellow);
}

body.page-software .product-link a:hover>span,
body.page-careers .product-link a:hover>span {
    gap: 12px;
}

body.page-software .product-demo-cta {
    background:
        radial-gradient(circle at 18% 88%, rgba(242, 180, 22, 0.24) 0%, transparent 34%),
        radial-gradient(circle at 84% 16%, rgba(2, 184, 127, 0.35) 0%, transparent 46%),
        linear-gradient(135deg, #18251d 0%, #0c3c2b 50%, #0c5a3a 100%);
    color: var(--paper);
    border-color: transparent;
    cursor: default;
}

body.page-software .product-demo-cta .product-icon {
    background: var(--teal);
    color: white;
}

body.page-software .product-demo-kicker {
    position: relative;
    z-index: 2;
    margin-bottom: 28px;
    color: var(--teal-soft);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

body.page-software .product-demo-cta h3 {
    color: white;
    max-width: 520px;
}

body.page-software .product-demo-cta h3 em {
    color: var(--teal-soft);
    font-style: italic;
}

body.page-software .product-demo-cta p {
    color: rgba(255, 255, 255, 0.72);
    max-width: 520px;
}

body.page-software .product-demo-actions {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: auto;
}

body.page-software .product-demo-phone {
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

body.page-software .product-decoration {
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: var(--grad-hero);
    opacity: 0.05;
    z-index: 1;
}

@media (max-width: 1000px) {

    body.page-software .product-card.featured,
    body.page-software .product-card.standard,
    body.page-software .product-card.half {
        grid-column: span 12;
    }

    body.page-software .product-card.third {
        grid-column: span 6;
    }
}

@media (max-width: 640px) {
    body.page-software .products {
        padding: 80px 24px;
    }

    body.page-software .products .container {
        padding: 0 24px;
    }

    body.page-software .section-header {
        margin-bottom: 44px;
    }

    body.page-software .product-card.third {
        grid-column: span 12;
    }
}

/* ============ SHARED STAT BANNER COMPONENT ============ */
.stats-banner {
    background: var(--ink);
    color: var(--paper);
    padding: 100px 32px;
    position: relative;
    overflow: hidden;
}

.stats-banner-bg {
    position: absolute;
    inset: 0;
    background: var(--grad-mesh);
    opacity: 0.5;
}

.stats-banner .stats-content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 80px;
    align-items: center;
}

.stats-banner .stats-content h2 {
    font-family: var(--font-display);
    font-size: clamp(36px, 4vw, 52px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-weight: 400;
    margin: 0;
}

.stats-banner .stats-content h2 em {
    font-style: italic;
    background: var(--grad-teal-yellow);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 10px;
}

.stats-banner .stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.stats-banner .stat-item {
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    padding-left: 24px;
}

.stats-banner .stat-num {
    font-family: var(--font-display);
    font-size: clamp(48px, 5vw, 72px);
    line-height: 1;
    letter-spacing: -0.04em;
    font-weight: 400;
    margin-bottom: 12px;

}

.stats-banner .stat-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
}

@media (max-width: 1000px) {
    .stats-banner .stats-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 640px) {
    .stats-banner {
        padding: 80px 24px;
    }

    .stats-banner .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ============ PRODUCT SINGLE PAGE ============ */
body.page-product-single {
    font-family: var(--font-display);
    background: var(--paper);
    color: var(--ink);
    font-size: 16px;
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

body.page-product-single a {
    color: inherit;
    text-decoration: none;
}

body.page-product-single button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

body.page-product-single img {
    max-width: 100%;
    display: block;
}

body.page-product-single .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}

body.page-product-single .nav {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 1280px;
    background: rgba(251, 251, 253, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(229, 229, 238, 0.8);
    border-radius: 100px;
    padding: 10px 12px 10px 24px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 30px rgba(10, 14, 42, 0.04);
    transition: all 0.3s ease;
}

body.page-product-single .nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.02em;
    color: var(--ink);
}

body.page-product-single .nav-logo-mark {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--grad-hero);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 16px;
}

body.page-product-single .nav-links {
    display: flex;
    gap: 4px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

body.page-product-single .nav-links a {
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft);
    transition: all 0.2s;
}

body.page-product-single .nav-links a:hover {
    background: rgba(2, 184, 127, 0.08);
    color: var(--teal-dark);
}

body.page-product-single .nav-links a.active {
    background: rgba(2, 184, 127, 0.12);
    color: var(--teal-dark);
}

body.page-product-single .nav-cta {
    display: flex;
    gap: 8px;
    align-items: center;
}

body.page-product-single .btn-outline {
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
}

body.page-product-single .btn-outline:hover {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--paper);
}

body.page-product-single .btn-white {
    background: white;
    color: var(--ink);
}

body.page-product-single .btn-white:hover {
    background: var(--yellow-soft);
}


body.page-product-single .product-hero {
    padding: 140px 0;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
}

body.page-product-single .product-hero .container {
    max-width: 1280px;
    padding: 0 32px;
}

body.page-product-single .product-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 62% 88% at 2% 82%, rgba(0, 217, 126, 0.15) 0%, transparent 58%),
        radial-gradient(ellipse 56% 78% at 100% 18%, rgba(255, 200, 120, 0.36) 0%, transparent 62%),
        radial-gradient(ellipse 76% 88% at 58% 100%, rgba(255, 240, 180, 0.34) 0%, transparent 66%),
        linear-gradient(180deg, #fefcf5 0%, #fff8ea 100%);
    z-index: 0;
}

body.page-product-single .product-hero-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(14, 20, 17, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 20, 17, 0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: none;
    -webkit-mask-image: none;
    z-index: 1;
    pointer-events: none;
}

body.page-product-single .glow-orb {
    display: none;
}

body.page-product-single .orb-1 {
    top: 80px;
    right: 8%;
    width: 320px;
    height: 320px;
    background: var(--orange-soft);
}

body.page-product-single .orb-2 {
    bottom: -60px;
    left: 5%;
    width: 360px;
    height: 360px;
    background: var(--teal-soft);
}

body.page-product-single .orb-3 {
    top: 40%;
    left: 50%;
    width: 220px;
    height: 220px;
    background: var(--yellow-soft);
    opacity: 0.3;
}

body.page-product-single .product-hero-content {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
}

body.page-product-single .breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-soft);
    margin-bottom: 28px;
    animation: fade-up 0.7s ease forwards;
}

body.page-product-single .breadcrumb a {
    color: var(--ink-soft);
    opacity: 0.65;
    transition: opacity 0.2s;
}

body.page-product-single .breadcrumb a:hover {
    opacity: 1;
    color: var(--teal-dark);
}

body.page-product-single .breadcrumb-sep {
    opacity: 0.3;
}

body.page-product-single .breadcrumb-current {
    color: var(--teal-dark);
    font-weight: 500;
}

body.page-product-single .hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: #ffffff6e;
    border: 1px solid rgba(14, 20, 17, 0.08);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: var(--teal-dark);
    margin-bottom: 20px;
    animation: fade-up 0.8s ease forwards;
}

body.page-product-single .hero-tag-dot {
    width: 6px;
    height: 6px;
    background: var(--yellow);
    border-radius: 50%;
    animation: blink 2s ease-in-out infinite;
}

body.page-product-single .product-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(58px, 4.2vw, 78px);
    line-height: 0.98;
    letter-spacing: -0.04em;
    font-weight: 500;
    margin: 0;
    animation: fade-up 0.8s ease 0.1s forwards;
    opacity: 0;
    max-width: 1120px;
}

body.page-product-single .product-hero h1 em {
    display: block;
    font-style: italic;
    color: var(--teal);
}

body.page-product-single .product-hero-sub {
    display: none;
    font-size: 21px;
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 820px;
    margin: 0;
    animation: fade-up 0.8s ease 0.2s forwards;
    opacity: 0;
}

body.page-product-single .product-hero-actions-block {
    position: absolute;
    top: 50%;
    right: 32px;
    transform: translateY(-10%);
    width: 100%;
    max-width: 320px;
    padding-top: 0;
    animation: none;
    opacity: 1;
}

body.page-product-single .product-hero-actions-label {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 26px;
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(16, 18, 25, 0.54);
}

body.page-product-single .product-hero-actions-label::after {
    content: '';
    width: 42px;
    height: 1px;
    background: currentColor;
    opacity: 0.55;
}

body.page-product-single .hero-actions {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    margin: 0;
    animation: none;
    opacity: 1;
}

body.page-product-single .product-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--line);
    padding-top: 28px;
    animation: fade-up 0.8s ease 0.4s forwards;
    opacity: 0;
}

body.page-product-single .product-hero-stat {
    padding-right: 20px;
    border-right: 1px solid var(--line);
}

body.page-product-single .product-hero-stats> :last-child {
    border-right: none;
}

body.page-product-single .product-hero-stat-num {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--ink);
    margin-bottom: 6px;
}

body.page-product-single .product-hero-stat-num em {
    font-style: italic;
    font-weight: 300;
    background: var(--grad-hero);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.page-product-single .product-hero-stat-label {
    font-size: 11px;
    color: var(--ink-soft);
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}


body.page-product-single .product-hero-visual {
    position: relative;
    animation: fade-up 1s ease 0.5s forwards;
    opacity: 0;
}

body.page-product-single .product-hero-screenshot {
    background: var(--ink);
    border-radius: 24px;
    padding: 14px;
    box-shadow: 0 40px 80px -20px rgba(10, 14, 42, 0.3);
    position: relative;
    overflow: hidden;
}

body.page-product-single .product-hero-screenshot::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(2, 184, 127, 0.25), transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(242, 180, 22, 0.2), transparent 50%);
    z-index: 0;
}

body.page-product-single .product-hero-screenshot-bar {
    display: flex;
    gap: 6px;
    padding: 4px 8px 10px;
    position: relative;
    z-index: 1;
}

body.page-product-single .product-hero-screenshot-bar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
}

body.page-product-single .product-hero-screenshot-bar span:first-child {
    background: #ff5f57;
}

body.page-product-single .product-hero-screenshot-bar span:nth-child(2) {
    background: #febc2e;
}

body.page-product-single .product-hero-screenshot-bar span:nth-child(3) {
    background: #28c840;
}

body.page-product-single .product-hero-screenshot img {
    border-radius: 14px;
    width: 100%;
    display: block;
    position: relative;
    z-index: 1;
    background: var(--paper);
}

body.page-product-single .hero-float-badge {
    position: absolute;
    background: white;
    padding: 14px 18px;
    border-radius: 16px;
    box-shadow: 0 20px 50px -10px rgba(10, 14, 42, 0.25);
    z-index: 5;
    border: 1px solid var(--line);
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: float-main 6s ease-in-out infinite;
}

body.page-product-single .hero-float-badge-1 {
    top: -16px;
    left: -16px;
    animation-delay: 0s;
}

body.page-product-single .hero-float-badge-2 {
    bottom: 24px;
    right: -24px;
    animation-delay: -3s;
}

@keyframes float-main {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

body.page-product-single .hero-float-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

body.page-product-single .icon-bg-teal {
    background: linear-gradient(135deg, var(--teal), var(--teal-dark));
}

body.page-product-single .icon-bg-yellow {
    background: linear-gradient(135deg, var(--yellow), var(--orange));
}

body.page-product-single .hero-float-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

body.page-product-single .hero-float-meta strong {
    font-weight: 600;
    font-size: 13px;
}

body.page-product-single .hero-float-meta span {
    font-size: 11px;
    color: var(--ink-soft);
    opacity: 0.7;
}


body.page-product-single .feature-nav {
    position: relative;
    top: auto;
    z-index: 50;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid #eee;
    padding: 20px 0;
}

body.page-product-single .feature-nav.scrolled {
    box-shadow: none;
}

body.page-product-single .feature-nav-inner {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}

body.page-product-single .feature-nav-pills {
    display: flex;
    gap: 4px;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

body.page-product-single .feature-nav-pills::-webkit-scrollbar {
    display: none;
}

body.page-product-single .feature-nav-pill {
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-soft);
    transition: all 0.2s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

body.page-product-single .feature-nav-pill:hover {
    background: rgba(10, 14, 42, 0.04);
    color: var(--ink);
}

body.page-product-single .feature-nav-pill.active {
    background: var(--ink);
    color: white;
    box-shadow: 0 4px 14px -4px rgba(10, 14, 42, 0.3);
}

body.page-product-single .feature-nav-pill-num {
    font-family: var(--font-display);
    font-size: 10px;
    opacity: 0.6;
}

body.page-product-single .feature-nav-pill.active .feature-nav-pill-num {
    color: var(--yellow);
    opacity: 1;
}

body.page-product-single .feature-nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--teal-dark);
}


body.page-product-single section {
    padding: 100px 32px;
    position: relative;
}

body.page-product-single section.tighter {
    padding: 80px 0;
}

body.page-product-single .feature-section {
    position: relative;
}

body.page-product-single .feature-section.alt-bg {
    background: var(--light-grey);
}

body.page-product-single .feature-section.dark-bg {
    background: var(--ink);
    color: var(--paper);
    position: relative;
    overflow: hidden;
}

body.page-product-single .feature-section.dark-bg>div {
    z-index: 2;
}

body.page-product-single .feature-section.dark-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 15% 20%, rgba(2, 184, 127, 0.15) 0%, transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(242, 180, 22, 0.1) 0%, transparent 45%);
}

body.page-product-single .feature-section.dark-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 100%);
}

body.page-product-single .feature-section.dark-bg .container {
    position: relative;
    z-index: 2;
}

body.page-product-single .feature-spotlight {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 70px;
    align-items: center;
    margin-bottom: 70px;
}

body.page-product-single .feature-spotlight.image-right {
    grid-template-columns: 1fr 1.05fr;
}

body.page-product-single .feature-spotlight-spaced {
    margin-bottom: 44px;
}

body.page-product-single .feature-spotlight.image-right .feature-spotlight-image {
    order: 2;
}

body.page-product-single .feature-spotlight-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-display);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--teal-dark);
    font-weight: 500;
    margin-bottom: 20px;
}

body.page-product-single .feature-section.dark-bg .feature-spotlight-eyebrow {
    color: var(--yellow-soft);
}

body.page-product-single .feature-spotlight-eyebrow-num {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--yellow);
    letter-spacing: -0.01em;
}

body.page-product-single .feature-spotlight-eyebrow-num.is-accent {
    color: var(--yellow);
}

body.page-product-single .feature-spotlight-eyebrow::after {
    content: '';
    width: 32px;
    height: 1px;
    background: currentColor;
    opacity: 0.4;
}

body.page-product-single .feature-spotlight h2 {
    font-family: var(--font-display);
    font-size: clamp(36px, 4.5vw, 54px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    font-weight: 400;
    margin-bottom: 20px;
}

body.page-product-single .feature-spotlight h2 em {
    font-style: italic;
    font-weight: 300;
    background: var(--grad-hero);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 8px;
}

body.page-product-single .feature-section.dark-bg .feature-spotlight h2 em {
    background: var(--grad-teal-yellow);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.page-product-single .feature-spotlight-lead {
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin-bottom: 0;
}

body.page-product-single .feature-section.dark-bg .feature-spotlight-lead {
    color: rgba(255, 255, 255, 0.7);
}

body.page-product-single .feature-spotlight-image {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(135deg, white, var(--light-grey));
    border: 1px solid var(--line);
    box-shadow: 0 30px 60px -20px rgba(10, 14, 42, 0.18);
    padding: 24px;
}

body.page-product-single .feature-section.dark-bg .feature-spotlight-image {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

body.page-product-single .feature-spotlight-image img {
    width: 100%;
    border-radius: 12px;
    background: white;
}

body.page-product-single .feature-spotlight-image-tag {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--ink);
    color: white;
    border-radius: 100px;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    z-index: 2;
}

body.page-product-single .feature-spotlight-image-tag .pulse {
    width: 5px;
    height: 5px;
    background: var(--teal-soft);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--teal-soft);
    animation: blink 2s ease-in-out infinite;
}

body.page-product-single .feature-section-header {
    margin-bottom: 70px;
    max-width: 760px;
}

body.page-product-single .section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--teal);
    font-weight: 600;
    margin-bottom: 26px;
}

body.page-product-single .section-tag::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--teal);
}

body.page-product-single .section-tag-num {
    color: var(--yellow);
}

body.page-product-single .section-title h2 {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 400;
    color: var(--ink);
    margin: 0;
    padding-bottom: 0.08em;
    overflow: visible;
}

body.page-product-single .section-title em {
    font-style: italic;
    font-weight: 300;
    background: var(--grad-teal-yellow);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 0.2em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

body.page-product-single .feature-section.dark-bg .section-title h2 {
    color: var(--paper);
}

body.page-product-single .feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

body.page-product-single .feature-grid.two-col {
    grid-template-columns: repeat(2, 1fr);
}

body.page-product-single .feature-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 28px;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}

body.page-product-single .feature-section.alt-bg .feature-card {
    background: var(--paper);
}

body.page-product-single .feature-section.dark-bg .feature-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
}

body.page-product-single .feature-card:hover {
    border-color: var(--teal);
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -12px rgba(2, 184, 127, 0.15);
}

body.page-product-single .feature-section.dark-bg .feature-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(2, 184, 127, 0.5);
}

body.page-product-single .feature-card-icon .elementor-icon-wrapper {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--teal-soft), var(--teal-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-bottom: 16px;
}

body.page-product-single .feature-card-icon .elementor-icon-wrapper i {
    color: #FFFFFF;
    font-size: 15px;
}

body.page-product-single .feature-card:nth-child(3n+2) .feature-card-icon .elementor-icon-wrapper {
    background: linear-gradient(135deg, var(--yellow), var(--orange));
}

body.page-product-single .feature-card:nth-child(3n+3) .feature-card-icon .elementor-icon-wrapper {
    background: linear-gradient(135deg, var(--lime), var(--teal));
}

body.page-product-single .feature-card h4 {
    font-family: var(--font-display);
    font-size: 17px;
    line-height: 1.25;
    letter-spacing: -0.015em;
    font-weight: 500;
    margin-bottom: 10px;
    color: var(--ink);
}

body.page-product-single .feature-section.dark-bg .feature-card h4 {
    color: var(--paper);
}

body.page-product-single .feature-card p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0;
}

body.page-product-single .feature-section.dark-bg .feature-card p {
    color: rgba(255, 255, 255, 0.6);
}

body.page-product-single .feature-card-ai {
    position: absolute;
    top: 16px;
    right: 16px;
    font-family: var(--font-display);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 3px 8px;
    background: rgba(242, 180, 22, 0.15);
    color: color-mix(in srgb, var(--yellow) 55%, var(--ink));
    border: 1px solid rgba(242, 180, 22, 0.3);
    border-radius: 100px;
    text-transform: uppercase;
}


body.page-product-single .feature-card.with-list {
    grid-column: span 3;
    padding: 36px 40px;
}

body.page-product-single .feature-card.with-list h4 {
    font-size: 22px;
}

body.page-product-single .feature-card-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 24px;
    margin-top: 20px;
    list-style: none;
}

body.page-product-single .feature-card-list li {
    font-size: 14px;
    color: var(--ink-soft);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 4px 0;
}

body.page-product-single .feature-card-list li::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--teal);
    margin-top: 8px;
    flex-shrink: 0;
}


body.page-product-single .ai-callout {
    background: linear-gradient(135deg, rgba(242, 180, 22, 0.12), rgba(2, 184, 127, 0.12));
    border: 1px solid rgba(242, 180, 22, 0.3);
    border-radius: 20px;
    padding: 28px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

body.page-product-single .feature-section.dark-bg .ai-callout {
    background: linear-gradient(135deg, rgba(242, 180, 22, 0.1), rgba(2, 184, 127, 0.06));
    border-color: rgba(242, 180, 22, 0.25);
}

body.page-product-single .ai-callout-text {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1;
    min-width: 280px;
}

body.page-product-single .ai-callout-icon .elementor-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--yellow), var(--orange));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body.page-product-single .ai-callout-text .elementor-icon-wrapper i {
    color: #FFFFFF;
    font-size: 17px;
}

body.page-product-single .ai-callout-eyebrow {
    font-family: var(--font-display);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: color-mix(in srgb, var(--yellow) 55%, var(--ink));
    font-weight: 600;
    margin-bottom: 4px;
}

body.page-product-single .feature-section.dark-bg .ai-callout-eyebrow {
    color: var(--yellow-soft);
}

body.page-product-single .ai-callout-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

body.page-product-single .feature-section.dark-bg .ai-callout-title {
    color: var(--paper);
}

body.page-product-single .ai-callout-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--ink);
    color: white;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}

body.page-product-single .ai-callout-link:hover {
    background: var(--yellow);
    color: var(--ink);
    transform: translateY(-1px);
}

body.page-product-single .marquee {
    padding: 60px 0 40px;
    background: #fff;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    position: relative;
    overflow: hidden;
}

body.page-product-single .ai-callout-link a span {
    color: #FFFFFF;
}

body.page-product-single .ai-callout-link:hover a span {
    color: var(--ink);
}

body.page-product-single .marquee-label {
    text-align: center;
    font-size: 13px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-soft);
    margin-bottom: 32px;
    font-weight: 600;
    padding: 0 24px;
}

body.page-product-single .marquee-track {
    display: flex;
    gap: 56px;
    animation: scroll 120s linear infinite;
    width: max-content;
    align-items: center;
}

body.page-product-single .marquee-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    transition: opacity 0.3s, filter 0.3s, transform 0.3s;
    opacity: 0.7;
    filter: grayscale(100%);
}

body.page-product-single .marquee-item img {
    max-height: 70px;
    max-width: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

body.page-product-single .marquee-item:hover {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.05);
}

body.page-product-single .marquee-awards {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(56px, 10vw, 150px);
    margin-top: 42px;
    padding: 34px 24px 10px;
    border-top: 1px solid var(--line);
}

body.page-product-single .marquee-awards img {
    width: auto;
    max-width: min(34vw, 460px);
    max-height: 150px;
    object-fit: contain;
    display: block;
}

body.page-product-single footer {
    background: var(--extra-dark);
    color: var(--paper);
    padding: 80px 32px 40px;
}

body.page-product-single footer h3,
body.page-product-single footer h4,
body.page-product-single footer p,
body.page-product-single footer ul,
body.page-product-single footer li {
    margin: 0;
    padding: 0;
}

body.page-product-single .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 60px;
}

body.page-product-single .footer-brand h3 {
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 22px;
    color: white;
}

body.page-product-single .footer-brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--grad-hero);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 17px;
}

body.page-product-single .footer-brand p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 24px;
    max-width: 320px;
}

body.page-product-single .footer-contact {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.8;
}

body.page-product-single .footer-contact strong {
    color: var(--yellow-soft);
    font-weight: 500;
}

body.page-product-single .footer-contact a {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s;
}

body.page-product-single .footer-contact a:hover {
    color: white;
}

body.page-product-single .footer-col h4 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--yellow-soft);
    font-weight: 600;
    margin: 0 0 20px;
}

body.page-product-single .footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.page-product-single .footer-col li {
    margin: 0 0 10px;
    padding: 0;
}

body.page-product-single .footer-col a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    transition: color 0.2s;
}

body.page-product-single .footer-col a:hover {
    color: white;
}

body.page-product-single .footer-bottom {
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

body.page-product-single .footer-bottom-links {
    display: flex;
    gap: 24px;
}

body.page-product-single .footer-bottom-links a:hover {
    color: white;
}

body.page-product-single .explore-products {
    padding: 100px 32px;
    background: var(--light-grey);
    position: relative;
    overflow: hidden;
}

body.page-product-single .explore-products::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 88% 12%, rgba(2, 184, 127, 0.06) 0%, transparent 40%),
        radial-gradient(circle at 12% 88%, rgba(242, 180, 22, 0.05) 0%, transparent 40%);
    pointer-events: none;
}

body.page-product-single .explore-products .container {
    position: relative;
    z-index: 2;
}

body.page-product-single .explore-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 80px;
    flex-wrap: wrap;
}

body.page-product-single .explore-products .section-header {
    margin-bottom: 0;
    max-width: 720px;
}

body.page-product-single .explore-products .section-tag {
    margin: 0 0 20px;
}

body.page-product-single .explore-products .section-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 400;
    color: var(--ink);
    margin: 0 0 24px;
    padding-bottom: 0.08em;
    overflow: visible;
}

body.page-product-single .explore-products .section-title em {
    font-style: italic;
    font-weight: 300;
    background: var(--grad-teal-yellow);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 0.2em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

body.page-product-single .explore-products .section-sub {
    font-size: 18px;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 600px;
    margin: 0;
}

body.page-product-single .explore-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
    transition: gap 0.2s;
    padding: 12px 22px;
    border: 1px solid var(--line);
    border-radius: 100px;
    background: var(--paper);
    white-space: nowrap;
    transition: all .2s ease-out;
}

body.page-product-single .explore-view-all a span {
    color: var(--ink);
}

body.page-product-single .explore-view-all:hover a span {
    color: white;
}

body.page-product-single .explore-view-all svg {
    transition: transform 0.2s;
}

body.page-product-single .explore-view-all:hover {
    background: var(--ink);
    color: white;
    border-color: var(--ink);
}

body.page-product-single .explore-view-all:hover svg {
    transform: translateX(3px);
}

body.page-product-single .explore-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

body.page-product-single .explore-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 32px 28px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 260px;
}

body.page-product-single .explore-card:hover {
    border-color: var(--teal);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -12px rgba(2, 184, 127, 0.18);
}

body.page-product-single .explore-card::before {
    content: '';
    position: absolute;
    top: 250px;
    left: 180px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: var(--grad-hero);
    opacity: 0;
    transition: opacity 0.4s;
    z-index: 0;
}

body.page-product-single .explore-card:hover::before {
    opacity: 0.07;
}

body.page-product-single .explore-card-icon .elementor-icon-wrapper {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-bottom: 22px;
    position: relative;
    z-index: 1;
}

body.page-product-single .explore-card-icon .elementor-icon-wrapper i {
    color: #FFFFFF;
    font-size: 15px;
}

body.page-product-single .explore-card:nth-child(1) .explore-card-icon .elementor-icon-wrapper {
    background: linear-gradient(135deg, var(--teal-soft), var(--teal-dark));
}

body.page-product-single .explore-card:nth-child(2) .explore-card-icon .elementor-icon-wrapper {
    background: linear-gradient(135deg, var(--yellow), var(--orange));
}

body.page-product-single .explore-card:nth-child(3) .explore-card-icon .elementor-icon-wrapper {
    background: linear-gradient(135deg, var(--lime), var(--teal));
}

body.page-product-single .explore-card:nth-child(4) .explore-card-icon .elementor-icon-wrapper {
    background: linear-gradient(135deg, var(--coral), var(--orange-soft));
}

body.page-product-single .explore-card-tag {
    position: absolute;
    top: 24px;
    right: 24px;
    font-family: var(--font-display);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 100px;
    background: var(--ink);
    color: var(--paper);
    z-index: 1;
}

body.page-product-single .explore-card h3 {
    font-family: var(--font-display);
    font-size: 19px;
    line-height: 1.2;
    letter-spacing: -0.015em;
    font-weight: 500;
    margin-bottom: 10px;
    color: var(--ink);
    position: relative;
    z-index: 1;
}

body.page-product-single .explore-card p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin-bottom: 24px;
    flex: 1;
    position: relative;
    z-index: 1;
}

body.page-product-single .explore-card-link {
    margin-top: auto;
}

body.page-product-single .explore-card-link a span {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--teal-dark);
    transition: gap 0.2s;
    position: relative;
    z-index: 1;
}

body.page-product-single .explore-card-link svg {
    transition: transform 0.2s;
}

body.page-product-single .explore-card:hover .explore-card-link a span {
    gap: 12px;
}

body.page-product-single .feature-card:hover .explore-card-link a span {
    gap: 12px;
}

body.page-product-single .explore-card:hover .explore-card-link svg {
    transform: translateX(3px);
}


@media (max-width: 1024px) {
    body.page-product-single .product-hero {
        min-height: auto;
    }

    body.page-product-single .product-hero .container {
        padding: 0 32px;
    }

    body.page-product-single .product-hero-content {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    body.page-product-single .product-hero-actions-block {
        position: static;
        transform: none;
        max-width: none;
        padding-top: 20px;
    }

    body.page-product-single .hero-actions {
        justify-content: flex-start;
    }

    body.page-product-single .product-hero-visual {
        max-width: 560px;
        margin: 0 auto;
    }

    body.page-product-single .product-hero-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 0;
    }

    body.page-product-single .product-hero-stat {
        border-right: none !important;
    }

    body.page-product-single .product-hero-stat:nth-child(1),
    body.page-product-single .product-hero-stat:nth-child(2) {
        border-bottom: 1px solid var(--line);
        padding-bottom: 24px;
    }

    body.page-product-single .feature-spotlight {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-bottom: 50px;
    }

    body.page-product-single .feature-spotlight.image-right .feature-spotlight-image {
        order: 0;
    }

    body.page-product-single .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    body.page-product-single .feature-card.with-list {
        grid-column: span 2;
    }

    body.page-product-single .feature-card-list {
        grid-template-columns: repeat(2, 1fr);
    }

    body.page-product-single .explore-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    body.page-product-single .explore-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    body.page-product-single .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    body.page-product-single .cta-card {
        padding: 60px 30px;
    }
}

@media (max-width: 640px) {
    body.page-product-single section {
        padding: 80px 24px;
    }

    body.page-product-single .explore-products {
        padding: 80px 24px;
    }

    body.page-product-single .nav-links {
        display: none;
    }

    body.page-product-single .nav-cta .btn-ghost {
        display: none;
    }

    body.page-product-single .container {
        padding: 0 24px;
    }

    body.page-product-single .product-hero {
        padding: 124px 0 72px;
    }

    body.page-product-single .product-hero .container {
        padding: 0 24px;
    }

    body.page-product-single .product-hero-content {
        gap: 36px;
    }

    body.page-product-single .product-hero h1 {
        font-size: clamp(46px, 14vw, 70px);
        letter-spacing: -0.03em;
    }

    body.page-product-single .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    body.page-product-single .hero-actions .btn {
        width: 100%;
        min-width: 0;
    }

    body.page-product-single .feature-nav-inner {
        justify-content: flex-start;
    }

    body.page-product-single .feature-nav-pills {
        justify-content: flex-start;
        width: 100%;
    }

    body.page-product-single .product-hero-stats {
        grid-template-columns: 1fr;
        gap: 0;
    }

    body.page-product-single .product-hero-stat {
        border-bottom: 1px solid var(--line) !important;
        padding: 16px 0;
    }

    body.page-product-single .product-hero-stat:last-child {
        border-bottom: none !important;
    }

    body.page-product-single .marquee-awards {
        flex-direction: column;
        gap: 30px;
    }

    body.page-product-single .marquee-awards img {
        max-width: min(82vw, 420px);
    }

    body.page-product-single .feature-grid,
    body.page-product-single .feature-grid.two-col {
        grid-template-columns: 1fr;
    }

    body.page-product-single .feature-card.with-list {
        grid-column: span 1;
    }

    body.page-product-single .feature-card-list {
        grid-template-columns: 1fr;
    }

    body.page-product-single .explore-grid {
        grid-template-columns: 1fr;
    }

    body.page-product-single .footer-grid {
        grid-template-columns: 1fr;
    }

    body.page-product-single .footer-bottom {
        flex-direction: column;
        gap: 16px;
    }

    body.page-product-single footer {
        padding: 60px 24px;
    }

    body.page-product-single .hero-float-badge-2 {
        right: 0;
    }

    body.page-product-single .ai-callout {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============ END PRODUCT SINGLE PAGE ============ */

/* ============ PARTNERS PAGE ============ */
body.page-partners {
    --mint: #d8f7ec;
    --mint-soft: #e8fbf4;
    --cream: #fff8e6;
    --peach: #ffe6c4;
    --lemon: #fff7c2;
    --slate: var(--ink-soft);
    --muted: #5d6673;
    --bg: var(--paper);
    --card: #ffffff;
    --card-dark: var(--ink);
    --radius-lg: 22px;
    --radius-md: 14px;
    --radius-sm: 10px;
    --shadow-card: 0 1px 0 rgba(14, 20, 17, 0.04), 0 8px 24px -12px rgba(14, 20, 17, 0.08);
    --shadow-hover: 0 1px 0 rgba(14, 20, 17, 0.04), 0 24px 48px -20px rgba(14, 20, 17, 0.18);
}

body.page-partners a {
    color: inherit;
    text-decoration: none;
}

body.page-partners img {
    max-width: 100%;
    display: block;
}

body.page-partners .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}

body.page-partners .nav {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 1280px;
    background: rgba(251, 251, 253, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(229, 229, 238, 0.8);
    border-radius: 100px;
    padding: 10px 12px 10px 24px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 30px rgba(10, 14, 42, 0.04);
    transition: all 0.3s ease;
}

body.page-partners .nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.page-partners .nav-logo img {
    width: auto;
    max-width: 150px;
    height: auto;
    display: block;
}

body.page-partners .nav-links {
    display: flex;
    gap: 4px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

body.page-partners .nav-links a {
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft);
    transition: all 0.2s ease;
}

body.page-partners .nav-links a:hover,
body.page-partners .nav-links a.active {
    background: rgba(2, 184, 127, 0.12);
    color: var(--teal);
}

body.page-partners .nav-cta {
    display: flex;
    gap: 8px;
    align-items: center;
}

body.page-partners {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.page-partners .serif-italic {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.01em;
}

body.page-partners .serif {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.015em;
}

body.page-partners .hero {
    padding: 136px 32px 96px;
    position: relative;
    overflow: hidden;
    min-height: auto;
    display: flex;
    align-items: flex-start;
}

body.page-partners .hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 300px;
    background-image: linear-gradient(rgba(14, 20, 17, 0.005) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 20, 17, 0.005) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 80% 90% at 50% 40%, black 0%, transparent 80%), linear-gradient(180deg, black 0%, black 92%, transparent 100%);
    mask-composite: intersect;
    -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 40%, black 0%, transparent 80%), linear-gradient(180deg, black 0%, black 92%, transparent 100%);
    -webkit-mask-composite: source-in;
    z-index: 1;
    pointer-events: none;
}

body.page-partners .hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 300px;
    background:
        /* Mint wash on the LEFT — large, soft, extends down most of the height */
        radial-gradient(ellipse 65% 95% at 0% 35%, rgba(0, 217, 126, 0.22) 0%, transparent 62%),
        /* Peach wash on the RIGHT — mirrors the mint, slightly warmer */
        radial-gradient(ellipse 60% 95% at 100% 40%, rgba(255, 195, 130, 0.40) 0%, transparent 62%),
        /* Whisper of warm cream at the bottom to soften the meeting point */
        radial-gradient(ellipse 70% 40% at 50% 100%, rgba(255, 240, 200, 0.28) 0%, transparent 70%),
        /* Base */
        linear-gradient(180deg, #fefcf5 0%, #fff8ea 100%);
    mask-image: linear-gradient(180deg, black 0%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, black 0%, black 92%, transparent 100%);
    z-index: 0;
    pointer-events: none;
}

body.page-partners .hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 62% 82% at 92% 0%, rgba(0, 217, 126, 0.18) 0%, transparent 62%),
        radial-gradient(ellipse 52% 72% at 4% 12%, rgba(255, 200, 120, 0.35) 0%, transparent 60%),
        radial-gradient(ellipse 76% 88% at 58% 100%, rgba(255, 240, 180, 0.55) 0%, transparent 66%),
        linear-gradient(180deg, #fefcf5 0%, #fff8ea 100%);
    z-index: 0;
}

body.page-partners .hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(14, 20, 17, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 20, 17, 0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    z-index: 1;
    pointer-events: none;
}

body.page-partners .glow-orb {
    display: none;
}

body.page-partners .glow-orb-1 {
    top: 90px;
    left: 8%;
    width: 300px;
    height: 300px;
    background: var(--orange-soft);
}

body.page-partners .glow-orb-2 {
    bottom: -70px;
    right: 8%;
    width: 360px;
    height: 360px;
    background: var(--teal-soft);
}

body.page-partners .glow-orb-3 {
    display: none;
}

body.page-partners .hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
    max-width: 1000px;
}

body.page-partners .hero-meta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    animation: fade-up 0.8s ease forwards;
    flex-wrap: wrap;
}

body.page-partners .hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: #ffffff6e;
    border: 1px solid rgba(14, 20, 17, 0.08);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: var(--teal-dark);
}

body.page-partners .hero-tag-dot {
    width: 6px;
    height: 6px;
    background: var(--yellow);
    border-radius: 50%;
    animation: blink 2s ease-in-out infinite;
}

body.page-partners .hero h1 {
    font-family: var(--font-display);
    font-size: clamp(56px, 7vw, 100px);
    line-height: 0.98;
    letter-spacing: -0.03em;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 0;
    animation: fade-up 1s ease 0.1s forwards;
    opacity: 0;
    margin-top: 0;
}

body.page-partners .hero h1 .line {
    display: inline;
    position: relative;
}

body.page-partners .hero h1 .line-1 {
    font-weight: 500;
    font-size: 55px;
}

body.page-partners .hero-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 30px 0;
    animation: fade-up 0.8s ease 0.3s forwards;
    opacity: 0;
}

body.page-partners .hero-divider-line {
    width: 110px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ink-soft), transparent);
    opacity: 0.2;
}

body.page-partners .hero-divider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f2b416;
    box-shadow: 0 0 0 6px #ffd15c54;
}

body.page-partners .hero-sub {
    font-size: 18px;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 880px;
    margin: 0 auto 36px;
    animation: fade-up 0.8s ease 0.35s forwards;
    opacity: 0;
}

body.page-partners .hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0;
    animation: fade-up 0.8s ease 0.45s forwards;
    opacity: 0;
}

body.page-partners .hero-actions .btn {
    min-width: 180px;
    justify-content: center;
}

body.page-partners .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 18px;
}

body.page-partners .eyebrow::before {
    content: '';
    width: 24px;
    height: 1.5px;
    background: var(--teal);
    border-radius: 2px;
}

body.page-partners .section {
    padding: 110px 32px;
    max-width: 1240px;
    margin: 0 auto;
}

body.page-partners .section-header {
    margin-bottom: 80px;
    max-width: 850px;
}

body.page-partners .section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--teal);
    font-weight: 600;
    margin: 0 0 20px;
}

body.page-partners .section-tag::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--teal);
}

body.page-partners .section-title h2 {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 400;
    color: var(--ink);
    margin: 0 0 24px;
    padding-bottom: 0.08em;
    overflow: visible;
}

body.page-partners .section-title em {
    font-style: italic;
    font-weight: 300;
    background: var(--grad-teal-yellow);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 0.2em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

body.page-partners .section-sub {
    font-size: 18px;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 850px;
    margin: 0;
}

body.page-partners .partner-category {
    margin: 72px 0 28px;
    max-width: 760px;
}

body.page-partners .section-header+.partner-category {
    margin-top: 0;
}

body.page-partners .partner-category .section-tag {
    margin-bottom: 18px;
}

body.page-partners .partner-category-title h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(28px, 3vw, 36px);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0;
}

body.page-partners .partner-category-title em {
    font-style: italic;
    font-weight: 400;
    color: var(--teal);
}

body.page-partners .featured-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

body.page-partners .product-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 32px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-card);
}

body.page-partners .product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    border-color: rgba(0, 184, 107, 0.25);
}

body.page-partners .product-card.is-flagship {}

body.page-partners .product-card.is-dark {
    background: linear-gradient(160deg, #0f1714 0%, #16221d 100%);
    border-color: transparent;
    color: white;
}

body.page-partners .product-card.is-dark .pcard-desc {
    color: rgba(255, 255, 255, 0.7);
}

body.page-partners .product-card.is-dark .pcard-title {
    color: white;
}

body.page-partners .product-card.is-dark .pcard-link {
    color: var(--teal);
}

body.page-partners .product-card.is-dark .pcard-link::after {
    color: var(--teal);
}

body.page-partners .product-card.is-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 100% 0%, rgba(0, 217, 126, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(245, 166, 35, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

body.page-partners .pcard-logo {
    min-width: 180px;
    max-width: 240px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

body.page-partners .pcard-logo img {
    width: auto;
    max-width: 100%;
    max-height: 64px;
    object-fit: contain;
    display: block;
}

body.page-partners .product-card.is-dark .pcard-logo {
    filter: brightness(0) invert(1);
    opacity: 0.92;
}

body.page-partners .pcard-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 22px;
}

body.page-partners .pcard-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

body.page-partners .pcard-icon.icon-orange {
    background: linear-gradient(135deg, #ffb547 0%, #f5912a 100%);
}

body.page-partners .pcard-icon.icon-green {
    background: var(--teal);
}

body.page-partners .pcard-icon.icon-coral {
    background: linear-gradient(135deg, #ff8a5b 0%, #ff6b3d 100%);
}

body.page-partners .pcard-icon.icon-blue {
    background: linear-gradient(135deg, #5fb1ff 0%, #2e8eff 100%);
}

body.page-partners .pcard-icon.icon-purple {
    background: linear-gradient(135deg, #b78cff 0%, #8a5aff 100%);
}

body.page-partners .pcard-icon.icon-teal {
    background: var(--teal);
}

body.page-partners .pcard-icon.icon-amber {
    background: linear-gradient(135deg, #ffd54f 0%, #f5a623 100%);
}

body.page-partners .pcard-icon svg {
    width: 22px;
    height: 22px;
    color: white;
}

body.page-partners .badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

body.page-partners .badge-flagship {
    background: var(--lemon);
    color: #7a5e00;
}

body.page-partners .badge-higher {
    background: var(--amber);
    color: #4a2e00;
}

body.page-partners .badge-new {
    background: var(--mint);
    color: #00603a;
}

body.page-partners .badge-2026 {
    background: #f0e8ff;
    color: #4b2a8f;
}

body.page-partners .pcard-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: 14px;
}

body.page-partners .product-card.is-flagship .pcard-title em,
body.page-partners .product-card .pcard-title em {
    font-style: italic;
    color: var(--teal);
}

body.page-partners .pcard-desc {
    color: var(--slate);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 24px;
    flex-grow: 1;
}

body.page-partners .pcard-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--teal);
    text-decoration: none;
    font-weight: 600;
    font-size: 14.5px;
    margin-top: auto;
    align-self: flex-start;
}

body.page-partners .pcard-link::after {
    content: '\2192';
    transition: transform .2s ease;
}

body.page-partners .pcard-link:hover::after {
    transform: translateX(4px);
}

body.page-partners .pcard-url {
    color: var(--teal);
    font-weight: 600;
    font-size: 14.5px;
    margin-top: auto;
    align-self: flex-start;
    text-decoration: none;
}

body.page-partners .pcard-url:hover {
    color: var(--teal-deep);
}

body.page-partners .secondary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

body.page-partners .secondary-grid-spacious {
    margin-bottom: 80px;
}

body.page-partners .cta-tile {
    position: relative;
    border-radius: var(--radius-lg);
    padding: 32px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: white;
    background:
        radial-gradient(circle at 0% 100%, rgba(255, 231, 138, 0.35) 0%, transparent 55%),
        radial-gradient(circle at 100% 0%, rgba(0, 217, 126, 0.35) 0%, transparent 55%),
        linear-gradient(150deg, #0f1714 0%, #1a2e22 60%, #16352a 100%);
    box-shadow: var(--shadow-card);
    transition: transform .25s ease, box-shadow .25s ease;
}

body.page-partners .cta-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

body.page-partners .cta-tile::after {
    content: '';
    position: absolute;
    right: -60px;
    bottom: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 217, 126, 0.18) 0%, transparent 70%);
    pointer-events: none;
}

body.page-partners .cta-tile-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}

body.page-partners .cta-tile-mark {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--teal);
    display: grid;
    place-items: center;
    color: white;
    flex-shrink: 0;
}

body.page-partners .cta-tile-mark svg {
    width: 18px;
    height: 18px;
}

body.page-partners .cta-tile-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal);
}

body.page-partners .cta-tile h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: white;
    margin-bottom: 14px;
    position: relative;
}

body.page-partners .cta-tile h3 em {
    font-style: italic;
    color: var(--teal);
}

body.page-partners .cta-tile p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 24px;
    flex-grow: 1;
    position: relative;
}

body.page-partners .cta-tile-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    position: relative;
}

body.page-partners .cta-tile-phone {
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    padding: 11px 4px;
}

body.page-partners .cta-tile-phone:hover {
    color: var(--teal);
}

body.page-partners .help-section {
    padding: 110px 32px;
    background: #fafaf6;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

body.page-partners .help-inner {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

body.page-partners .help-text h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}

body.page-partners .help-text h2 em {
    font-style: italic;
    color: var(--teal);
}

body.page-partners .help-text p {
    color: var(--slate);
    font-size: 17px;
    line-height: 1.6;
    margin-bottom: 28px;
}

body.page-partners .help-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

body.page-partners .help-feature {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 18px 22px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 14px;
}

body.page-partners .help-feature-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--mint-soft);
    color: var(--teal);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

body.page-partners .help-feature-icon svg {
    width: 18px;
    height: 18px;
}

body.page-partners .help-feature h4 {
    font-size: 15.5px;
    font-weight: 600;
    margin-bottom: 3px;
    color: var(--ink);
}

body.page-partners .help-feature p {
    font-size: 14px;
    color: var(--muted);
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 1000px) {
    body.page-partners .nav-links {
        display: none;
    }

    body.page-partners .featured-grid,
    body.page-partners .secondary-grid {
        grid-template-columns: 1fr;
    }

    body.page-partners .help-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    body.page-partners .hero-stats {
        gap: 22px 28px;
    }

    body.page-partners .section {
        padding: 70px 24px;
    }

    body.page-partners .hero {
        min-height: auto;
        padding: 124px 24px 80px;
    }

    body.page-partners .hero h1 {
        font-size: clamp(54px, 10vw, 92px);
    }

    body.page-partners .hero-sub {
        max-width: 760px;
    }

    body.page-partners .help-section {
        padding: 70px 24px;
    }
}

@media (max-width: 640px) {
    body.page-partners .nav {
        padding: 14px 20px;
    }

    body.page-partners .nav-cta .btn-ghost {
        display: none;
    }

    body.page-partners .container {
        padding: 0 24px;
    }

    body.page-partners .hero {
        min-height: auto;
        padding: 116px 0 64px;
    }

    body.page-partners .hero-meta-row {
        margin-bottom: 42px;
    }

    body.page-partners .hero h1 {
        font-size: clamp(48px, 16vw, 70px);
    }

    body.page-partners .hero-divider {
        margin: 46px 0 30px;
    }

    body.page-partners .hero-divider-line {
        width: 72px;
    }

    body.page-partners .hero-sub {
        font-size: 18px;
        margin-bottom: 40px;
    }

    body.page-partners .hero-actions .btn {
        width: 100%;
    }

    body.page-partners .footer-grid {
        grid-template-columns: 1fr;
    }

    body.page-partners .footer-bottom {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    body.page-partners footer {
        padding: 60px 24px;
    }

    body.page-partners .footer-bottom-links {
        flex-wrap: wrap;
        gap: 14px 20px;
    }

    body.page-partners .pcard-title {
        font-size: 22px !important;
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

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

body.page-partners .reveal {
    animation: fadeUp .8s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}

body.page-partners .reveal-1 {
    animation-delay: .05s;
}

body.page-partners .reveal-2 {
    animation-delay: .15s;
}

body.page-partners .reveal-3 {
    animation-delay: .25s;
}

body.page-partners .reveal-4 {
    animation-delay: .35s;
}

body.page-partners .reveal-5 {
    animation-delay: .45s;
}

.partners-marquee {
    padding: 60px 32px 40px;
    background: #fff;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    position: relative;
    overflow: hidden;
}

.partners-marquee .marquee-label {
    text-align: center;
    font-size: 13px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-soft);
    margin-bottom: 32px;
    font-weight: 600;
}

.partners-marquee .marquee-track {
    display: flex;
    gap: 56px;
    animation: scroll 120s linear infinite;
    width: max-content;
    align-items: center;
}

.partners-marquee .marquee-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    transition: opacity 0.3s, filter 0.3s, transform 0.3s;
    opacity: 0.7;
    filter: grayscale(100%);
}

.partners-marquee .marquee-item img {
    max-height: 70px;
    max-width: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.partners-marquee .marquee-item:hover {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.05);
}

.partners-marquee .marquee-awards {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(56px, 10vw, 150px);
    margin-top: 42px;
    padding: 34px 24px 10px;
    border-top: 1px solid var(--line);
}

.partners-marquee .marquee-awards img {
    width: auto;
    max-width: min(34vw, 460px);
    max-height: 150px;
    object-fit: contain;
    display: block;
}

body.page-partners footer {
    background: var(--extra-dark);
    color: var(--paper);
    padding: 80px 32px 40px;
}

body.page-partners footer h3,
body.page-partners footer h4,
body.page-partners footer p,
body.page-partners footer ul,
body.page-partners footer li {
    margin: 0;
    padding: 0;
}

body.page-partners .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 60px;
}

body.page-partners .footer-brand h3 {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 22px;
    color: white;
}

body.page-partners .footer-brand h3 img {
    max-width: 200px;
}

body.page-partners .footer-brand p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 24px;
    max-width: 320px;
}

body.page-partners .footer-contact {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.8;
}

body.page-partners .footer-contact strong {
    color: var(--yellow-soft);
    font-weight: 500;
}

body.page-partners .footer-contact a {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s;
}

body.page-partners .footer-contact a:hover {
    color: white;
}

body.page-partners .footer-col h4 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--yellow-soft);
    font-weight: 600;
    margin-bottom: 20px;
}

body.page-partners .footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.page-partners .footer-col li {
    margin-bottom: 10px;
}

body.page-partners .footer-col a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    transition: color 0.2s;
}

body.page-partners .footer-col a:hover {
    color: white;
}

body.page-partners .footer-event-title {
    display: block;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
}

body.page-partners .footer-event-date {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

body.page-partners .footer-bottom {
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

body.page-partners .footer-bottom-links {
    display: flex;
    gap: 24px;
}

body.page-partners .footer-bottom-links a:hover {
    color: white;
}

/* ============ PARTNERS RESPONSIVE COMPONENTS ============ */
@media (max-width: 1000px) {
    body.page-partners .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}

@media (max-width: 640px) {
    body.page-partners .footer-grid {
        grid-template-columns: 1fr;
    }

    body.page-partners .footer-bottom {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    body.page-partners footer {
        padding: 60px 24px;
    }

    body.page-partners .footer-bottom-links {
        flex-wrap: wrap;
        gap: 14px 20px;
    }

    .marquee.marquee-awards {
        flex-direction: column;
        gap: 30px;
    }

    .marquee.marquee-awards img {
        max-width: min(82vw, 420px);
    }
}

/* ============ END PARTNERS PAGE ============ */

/* ============ CUSTOMERS PAGE EXTRACTED ============ */
body.page-customers {
    --green: var(--teal);
    --green-deep: var(--teal);
    --green-bright: var(--teal);
    --mint: #d8f7ec;
    --mint-soft: #e8fbf4;
    --cream: var(--paper);
    --peach: #fff2df;
    --lemon: var(--yellow-soft);
    --amber: var(--yellow);
    --ink: #101219;
    --ink-soft: #242A39;
    --ink-mid: #323848;
    --slate: #4d5565;
    --muted: #6a7280;
    --line: #e1e4ea;
    --bg: var(--paper);
    --card: #ffffff;
    --card-dark: var(--extra-dark);
    --radius-lg: 22px;
    --radius-md: 14px;
    --radius-sm: 10px;
    --shadow-card: 0 1px 0 rgba(14, 20, 17, 0.04), 0 8px 24px -12px rgba(14, 20, 17, 0.08);
    --shadow-hover: 0 1px 0 rgba(14, 20, 17, 0.04), 0 24px 48px -20px rgba(14, 20, 17, 0.18);
}

body.page-customers * {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body.page-customers {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.page-customers .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}

body.page-customers .serif-italic {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.01em;
}

body.page-customers .serif {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.015em;
}

/* ========== NAV ========== */
body.page-customers .nav-wrap {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(14, 20, 17, 0.05);
}

body.page-customers .nav {
    max-width: 1240px;
    margin: 0 auto;
    padding: 16px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

body.page-customers .logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-decoration: none;
}

body.page-customers .logo-mark {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal) 100%);
    display: grid;
    place-items: center;
    color: white;
    font-weight: 700;
    font-size: 13px;
    font-family: var(--font-display);
}

body.page-customers .nav-links {
    display: flex;
    gap: 32px;
    list-style: none;
}

body.page-customers .nav-links a {
    color: var(--ink);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 500;
    transition: color .2s;
}

body.page-customers .nav-links a:hover {
    color: var(--green-deep);
}

body.page-customers .nav-links a.active {
    color: var(--green-deep);
}

body.page-customers .nav-right {
    display: flex;
    align-items: center;
    gap: 18px;
}

body.page-customers .nav-signin {
    font-size: 14.5px;
    color: var(--ink);
    text-decoration: none;
    font-weight: 500;
}

/* ========== HERO ========== */
body.page-customers .hero {
    position: relative;
    padding: 72px 32px 110px;
    background: white;
}

/* colored gradient � fills the full hero with a soft fade at the bottom */
body.page-customers .hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 62% 82% at 92% 0%, rgba(0, 217, 126, 0.18) 0%, transparent 62%),
        radial-gradient(ellipse 52% 72% at 4% 12%, rgba(255, 200, 120, 0.35) 0%, transparent 60%),
        radial-gradient(ellipse 76% 88% at 58% 100%, rgba(255, 240, 180, 0.55) 0%, transparent 66%),
        linear-gradient(180deg, #fefcf5 0%, #fff8ea 100%);
    /* soften the bottom edge so the hero transitions smoothly into the page below */
    mask-image: linear-gradient(180deg, black 0%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, black 0%, black 85%, transparent 100%);
    z-index: 0;
    pointer-events: none;
}

/* subtle grid texture overlay */
body.page-customers .hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(14, 20, 17, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 20, 17, 0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image:
        radial-gradient(ellipse 80% 90% at 50% 40%, black 0%, transparent 80%),
        linear-gradient(180deg, black 0%, black 85%, transparent 100%);
    mask-composite: intersect;
    -webkit-mask-image:
        radial-gradient(ellipse 80% 90% at 50% 40%, black 0%, transparent 80%),
        linear-gradient(180deg, black 0%, black 85%, transparent 100%);
    -webkit-mask-composite: source-in;
    z-index: 1;
    pointer-events: none;
}

body.page-customers .hero-inner {
    max-width: 1240px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    text-align: center;
}

body.page-customers .pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 10px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(14, 20, 17, 0.08);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-soft);
    margin-bottom: 28px;
}

body.page-customers .pill-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--green);
    display: grid;
    place-items: center;
    color: white;
    font-size: 10px;
    font-weight: 700;
}

body.page-customers .pill .label {
    color: var(--muted);
}

body.page-customers .pill .sep {
    color: rgba(14, 20, 17, 0.15);
}

body.page-customers .pill .strong {
    color: var(--ink);
    font-weight: 600;
}

body.page-customers h1.hero-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(48px, 6.2vw, 92px);
    line-height: 1.0;
    letter-spacing: -0.028em;
    color: var(--ink);
    margin: 0 auto 36px;
    max-width: 16ch;
}

body.page-customers h1.hero-title em {
    font-style: italic;
    font-weight: 500;
    color: var(--green-deep);
    background: linear-gradient(120deg, var(--teal) 0%, var(--teal) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.page-customers .hero-ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 72px;
}

/* ========== HORIZONTAL PRODUCT MOCK ========== */
body.page-customers .hero-mock-wrap {
    position: relative;
    z-index: 2;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 0 90px;
}

body.page-customers .hero-mock {
    position: relative;
    background: white;
    border-radius: 20px 20px 0 0;
    border: 1px solid rgba(14, 20, 17, 0.06);
    border-bottom: none;
    box-shadow:
        0 -1px 0 rgba(14, 20, 17, 0.04),
        0 30px 70px -25px rgba(14, 20, 17, 0.22),
        0 70px 140px -40px rgba(14, 20, 17, 0.18);
    overflow: hidden;
}

/* a thin gradient strip at the top edge to feel like a "real" app window */
body.page-customers .hero-mock::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--teal) 0%, var(--teal) 30%, #ffd54f 70%, #f5a623 100%);
}

body.page-customers .hero-mock-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #fbfbf7 0%, #ffffff 100%);
}

body.page-customers .mock-dots {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

body.page-customers .mock-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

body.page-customers .mock-dot:nth-child(1) {
    background: #ff5f57;
}

body.page-customers .mock-dot:nth-child(2) {
    background: #febc2e;
}

body.page-customers .mock-dot:nth-child(3) {
    background: #28c840;
}

body.page-customers .mock-url {
    flex: 1;
    max-width: 420px;
    padding: 6px 14px;
    background: rgba(14, 20, 17, 0.04);
    border-radius: 8px;
    font-size: 12px;
    color: var(--muted);
    font-family: var(--font-display);
    display: flex;
    align-items: center;
    gap: 8px;
}

body.page-customers .mock-url::before {
    content: '';
    width: 10px;
    height: 10px;
    border: 1.5px solid var(--green);
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

body.page-customers .mock-url strong {
    color: var(--ink);
    font-weight: 600;
}

body.page-customers .mock-badge-ai {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    background: var(--ink);
    color: white;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    flex-shrink: 0;
}

body.page-customers .mock-badge-ai::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green-bright);
    box-shadow: 0 0 8px var(--green-bright);
    animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

/* 3-column app body: sidebar / candidates / AI summary */
body.page-customers .mock-body {
    display: grid;
    grid-template-columns: 200px 1fr 320px;
    min-height: 360px;
}

/* SIDEBAR */
body.page-customers .mock-sidebar {
    padding: 22px 18px;
    border-right: 1px solid var(--line);
    background: #fafaf6;
}

body.page-customers .mock-side-section {
    margin-bottom: 22px;
}

body.page-customers .mock-side-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
    padding-left: 8px;
}

body.page-customers .mock-side-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--ink-mid);
    margin-bottom: 2px;
}

body.page-customers .mock-side-item.is-active {
    background: white;
    color: var(--ink);
    font-weight: 600;
    box-shadow: 0 1px 0 rgba(14, 20, 17, 0.04), 0 4px 12px -6px rgba(14, 20, 17, 0.08);
}

body.page-customers .mock-side-item .mark {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    flex-shrink: 0;
}

body.page-customers .mark.m-green {
    background: linear-gradient(135deg, var(--teal), var(--teal-deep));
}

body.page-customers .mark.m-orange {
    background: linear-gradient(135deg, #ffb547, #f5912a);
}

body.page-customers .mark.m-blue {
    background: linear-gradient(135deg, #5fb1ff, #2e8eff);
}

body.page-customers .mark.m-purple {
    background: linear-gradient(135deg, #b78cff, #8a5aff);
}

body.page-customers .mark.m-coral {
    background: linear-gradient(135deg, #ff8a5b, #ff6b3d);
}

body.page-customers .mark.m-teal {
    background: linear-gradient(135deg, var(--teal-soft), var(--teal));
}

body.page-customers .mock-side-count {
    margin-left: auto;
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
}

/* CANDIDATES (center) */
body.page-customers .mock-main {
    padding: 22px 26px;
}

body.page-customers .mock-main-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

body.page-customers .mock-main-title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
}

body.page-customers .mock-main-title em {
    font-style: italic;
    color: var(--green-deep);
    font-weight: 500;
    margin-left: 4px;
}

body.page-customers .mock-main-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 11.5px;
    color: var(--ink-mid);
    font-weight: 500;
}

body.page-customers .mock-main-filter::after {
    content: '?';
    color: var(--muted);
    font-size: 9px;
}

body.page-customers .candidate-row {
    display: grid;
    grid-template-columns: 36px 1fr auto auto;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 4px;
    transition: background .3s;
}

body.page-customers .candidate-row.is-active {
    background: linear-gradient(90deg, rgba(0, 217, 126, 0.09) 0%, transparent 100%);
    position: relative;
}

body.page-customers .candidate-row.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--green);
    border-radius: 0 2px 2px 0;
}

body.page-customers .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: white;
    font-size: 12.5px;
    font-weight: 600;
    font-family: var(--font-display);
}

body.page-customers .avatar.a1 {
    background: linear-gradient(135deg, #5fb1ff, #2e8eff);
}

body.page-customers .avatar.a2 {
    background: linear-gradient(135deg, #ff8a5b, #ff6b3d);
}

body.page-customers .avatar.a3 {
    background: linear-gradient(135deg, #b78cff, #8a5aff);
}

body.page-customers .avatar.a4 {
    background: linear-gradient(135deg, var(--teal-soft), var(--teal));
}

body.page-customers .candidate-info {
    min-width: 0;
}

body.page-customers .candidate-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
    margin-bottom: 3px;
}

body.page-customers .candidate-meta {
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.2;
}

body.page-customers .score {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.02em;
}

body.page-customers .score em {
    font-style: italic;
    color: var(--green-deep);
    font-size: 11.5px;
    font-weight: 500;
    margin-left: 4px;
}

body.page-customers .bar {
    width: 72px;
    height: 5px;
    background: rgba(14, 20, 17, 0.06);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

body.page-customers .bar::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, var(--teal), var(--teal));
    border-radius: 999px;
    width: var(--w, 80%);
}

/* RIGHT RAIL: AI Candidate Summary */
body.page-customers .mock-ai-rail {
    background: linear-gradient(160deg, #0f1714 0%, #1a2e22 100%);
    color: white;
    padding: 22px 22px;
    position: relative;
    overflow: hidden;
}

body.page-customers .mock-ai-rail::before {
    content: '';
    position: absolute;
    right: -50px;
    top: -50px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 217, 126, 0.22) 0%, transparent 70%);
    pointer-events: none;
}

body.page-customers .ai-rail-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--green-bright);
    margin-bottom: 12px;
    position: relative;
}

body.page-customers .ai-rail-label::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green-bright);
    box-shadow: 0 0 8px var(--green-bright);
}

body.page-customers .ai-rail-name {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    color: white;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
    position: relative;
}

body.page-customers .ai-rail-role {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 16px;
    position: relative;
}

body.page-customers .ai-rail-strong {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(0, 217, 126, 0.18);
    color: var(--green-bright);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 12px;
    position: relative;
}

body.page-customers .ai-rail-text {
    font-size: 12.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 16px;
    position: relative;
}

body.page-customers .ai-rail-text strong {
    color: white;
    font-weight: 600;
}

body.page-customers .ai-rail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    position: relative;
}

body.page-customers .ai-rail-tag {
    padding: 4px 9px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

/* ====== PARTNERS HERO MOCK � integrations dashboard ====== */
body.page-customers .partner-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

body.page-customers .partner-mini {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 10px;
    transition: border-color .2s, transform .2s;
}

body.page-customers .partner-mini:hover {
    border-color: rgba(2, 184, 127, 0.25);
    transform: translateY(-1px);
}

body.page-customers .partner-mini-mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: white;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

body.page-customers .partner-mini-info {
    min-width: 0;
    flex: 1;
}

body.page-customers .partner-mini-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.page-customers .partner-mini-status {
    font-size: 10.5px;
    color: var(--green-deep);
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 1px;
}

body.page-customers .partner-mini-status::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green-bright);
    flex-shrink: 0;
}

/* "add new" tile in the partner grid */
body.page-customers .partner-mini.is-add {
    background: transparent;
    border-style: dashed;
    border-color: rgba(14, 20, 17, 0.12);
    color: var(--muted);
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
}

body.page-customers .partner-mini.is-add::before {
    content: '+';
    font-size: 18px;
    margin-right: 4px;
    line-height: 1;
}

/* Right rail � system status summary (replaces ai-rail) */
body.page-customers .mock-status-rail {
    background: linear-gradient(160deg, #0f1714 0%, #1a2e22 100%);
    color: white;
    padding: 22px 22px;
    position: relative;
    overflow: hidden;
}

body.page-customers .mock-status-rail::before {
    content: '';
    position: absolute;
    right: -50px;
    top: -50px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 217, 126, 0.22) 0%, transparent 70%);
    pointer-events: none;
}

body.page-customers .status-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--green-bright);
    margin-bottom: 16px;
    position: relative;
}

body.page-customers .status-label::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green-bright);
    box-shadow: 0 0 8px var(--green-bright);
    animation: pulse 1.6s ease-in-out infinite;
}

body.page-customers .status-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    position: relative;
}

body.page-customers .status-row:last-of-type {
    border-bottom: none;
}

body.page-customers .status-row-lbl {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

body.page-customers .status-row-val {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: white;
    letter-spacing: -0.01em;
}

body.page-customers .status-row-val em {
    font-style: italic;
    color: var(--green-bright);
    font-size: 12px;
    font-weight: 500;
    margin-left: 4px;
}

body.page-customers .status-footer {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.5;
    position: relative;
}

body.page-customers .status-footer strong {
    color: white;
    font-weight: 600;
}

/* ====== CUSTOMERS: testimonial rail in hero mock ====== */
body.page-customers .testimonial-rail {
    background: linear-gradient(160deg, #0f1714 0%, #1a2e22 100%);
    color: white;
    padding: 22px 22px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.page-customers .testimonial-rail::before {
    content: '';
    position: absolute;
    right: -50px;
    top: -50px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 217, 126, 0.22) 0%, transparent 70%);
    pointer-events: none;
}

body.page-customers .testimonial-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--green-bright);
    margin-bottom: 14px;
    position: relative;
}

body.page-customers .testimonial-label::before {
    content: '"';
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 0;
    margin-right: -2px;
    color: var(--green-bright);
}

body.page-customers .testimonial-quote {
    font-family: var(--font-display);
    font-size: 14.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: -0.005em;
    margin-bottom: 18px;
    position: relative;
    font-weight: 400;
    flex: 1;
}

body.page-customers .testimonial-attr {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 14px;
    position: relative;
}

body.page-customers .testimonial-attr-name {
    font-size: 13px;
    font-weight: 600;
    color: white;
    margin-bottom: 2px;
}

body.page-customers .testimonial-attr-role {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.55);
}

/* ====== CUSTOMER PORTFOLIO GRID (in hero mock) ====== */
body.page-customers .customer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

body.page-customers .customer-mini {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 9px;
    transition: border-color .2s, transform .2s;
    min-height: 46px;
}

body.page-customers .customer-mini:hover {
    border-color: rgba(2, 184, 127, 0.25);
    transform: translateY(-1px);
}

body.page-customers .customer-mini-mark {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    color: white;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

body.page-customers .customer-mini-name {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ====== CUSTOMER DIRECTORY (main section) ====== */
body.page-customers .customer-search-wrap {
    margin-bottom: 48px;
    max-width: 520px;
}

body.page-customers .customer-search {
    position: relative;
}

body.page-customers .customer-search input {
    width: 100%;
    padding: 14px 18px 14px 46px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: white;
    font-family: var(--font-display);
    font-size: 15px;
    color: var(--ink);
    transition: border-color .2s, box-shadow .2s;
}

body.page-customers .customer-search input:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 4px rgba(0, 184, 107, 0.1);
}

body.page-customers .customer-search input::placeholder {
    color: var(--muted);
}

body.page-customers .customer-search svg {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--muted);
    pointer-events: none;
}

body.page-customers .customer-search-meta {
    margin-top: 12px;
    font-size: 13px;
    color: var(--muted);
    padding-left: 4px;
}

body.page-customers .customer-search-meta strong {
    color: var(--ink);
    font-weight: 600;
}

/* alphabetical sections */
body.page-customers .alpha-section {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 32px;
    padding: 32px 0;
    border-top: 1px solid var(--line);
}

body.page-customers .alpha-section:first-of-type {
    border-top: 2px solid var(--ink);
}

body.page-customers .alpha-letter {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 80px;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--ink);
    position: sticky;
    top: 90px;
    align-self: start;
}

body.page-customers .alpha-letter em {
    font-family: var(--font-display);
    font-style: normal;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0;
    margin-left: 10px;
    vertical-align: top;
    line-height: 1.5;
}

body.page-customers .alpha-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px 24px;
}

body.page-customers .alpha-list .customer-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 4px;
    border-bottom: 1px dashed rgba(14, 20, 17, 0.08);
    color: var(--ink);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.3;
    transition: color .15s, padding-left .15s;
}

body.page-customers .alpha-list .customer-item:hover {
    color: var(--green-deep);
    padding-left: 8px;
}

body.page-customers .alpha-list .customer-item .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
    opacity: 0.4;
    transition: opacity .15s, transform .15s;
}

body.page-customers .alpha-list .customer-item:hover .dot {
    opacity: 1;
    transform: scale(1.4);
}

body.page-customers .alpha-list .customer-item.is-hidden {
    display: none;
}

body.page-customers .alpha-section.is-empty {
    display: none;
}

body.page-customers .no-results {
    padding: 40px 0;
    text-align: center;
    color: var(--muted);
    font-style: italic;
    display: none;
}

body.page-customers .no-results.is-active {
    display: block;
}

/* ====== FEATURED TESTIMONIAL (full-width pullquote) ====== */
body.page-customers .feature-quote-section {
    padding: 110px 32px 56px;
    background:
        radial-gradient(ellipse 50% 60% at 20% 10%, rgba(0, 217, 126, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse 40% 50% at 90% 50%, rgba(255, 200, 120, 0.15) 0%, transparent 60%),
        linear-gradient(180deg, #fcf5e48f 0%, #fff8ea 100%);
    position: relative;
    overflow: hidden;
}

body.page-customers .feature-quote-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(14, 20, 17, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 20, 17, 0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 80%);
    pointer-events: none;
}

body.page-customers .feature-quote-inner {
    max-width: 1040px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

body.page-customers .feature-quote-slides {
    display: grid;
}

body.page-customers .feature-quote-slide {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    pointer-events: none;
    visibility: hidden;
}

body.page-customers .feature-quote-slide.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
}

body.page-customers .feature-quote-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
}

body.page-customers .feature-quote-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 1px solid rgba(14, 20, 17, 0.22);
    background: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    padding: 0;
    transition: width 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

body.page-customers .feature-quote-dot.is-active {
    width: 28px;
    background: var(--green);
    border-color: var(--green);
}

body.page-customers .feature-quote-mark {
    font-family: var(--font-display);
    font-size: 120px;
    line-height: 0.6;
    color: var(--green);
    opacity: 0.4;
    margin-bottom: 0;
    font-style: italic;
}

body.page-customers .feature-quote-text {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(24px, 2.6vw, 38px);
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: 36px;
}

body.page-customers .feature-quote-text em {
    font-style: italic;
    color: var(--green-deep);
}

body.page-customers .feature-quote-attr {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding-top: 24px;
    border-top: 1px solid rgba(14, 20, 17, 0.1);
    width: fit-content;
}

body.page-customers .feature-quote-attr-mark {
    width: 54px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5fb1ff 0%, #2e8eff 100%);
    color: white;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
}

body.page-customers .feature-quote-attr-mark>div {
    display: flex;
    align-items: center;
}

body.page-customers .feature-quote-attr-text {
    text-align: left;
}

body.page-customers .feature-quote-attr-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 2px;
}

body.page-customers .feature-quote-attr-role {
    font-size: 13px;
    color: var(--muted);
}

/* ====== AWARDS STRIP ====== */
body.page-customers .awards-section {
    padding: 70px 32px;
    background: var(--ink);
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

body.page-customers .awards-inner {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 60px;
    align-items: center;
}

body.page-customers .awards-text h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

body.page-customers .awards-text h3 em {
    font-style: italic;
    color: var(--green-bright);
}

body.page-customers .awards-text p {
    margin-top: 14px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14.5px;
    line-height: 1.55;
}

body.page-customers .awards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

body.page-customers .award-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 22px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

body.page-customers .award-medal {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd54f 0%, #f5a623 100%);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: #4a2e00;
}

body.page-customers .award-medal svg {
    width: 22px;
    height: 22px;
}

body.page-customers .award-year {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 13px;
    color: var(--green-bright);
    margin-bottom: 4px;
    font-weight: 500;
}

body.page-customers .award-name {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: white;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}

body.page-customers .award-issuer {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.55);
}

/* stat strip below mock � sits in the hero gradient */
body.page-customers .hero-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px 52px;
    margin-top: 44px;
    padding-bottom: 16px;
}

body.page-customers .hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.page-customers .hero-stat .num {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 6px;
}

body.page-customers .hero-stat .num em {
    font-style: italic;
    color: var(--green-deep);
}

body.page-customers .hero-stat .lbl {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.35;
    text-align: center;
    max-width: 20ch;
}

/* ========== SECTION HEADER ========== */
body.page-customers .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--green-deep);
    margin-bottom: 18px;
}

body.page-customers .eyebrow::before {
    content: '';
    width: 24px;
    height: 1.5px;
    background: var(--green);
    border-radius: 2px;
}

/* ========== PRODUCT GRID ========== */
body.page-customers .section {
    padding: 110px 32px;
    max-width: 1240px;
    margin: 0 auto;
}

body.page-customers .elementor-shortcode .section {
    padding: 0;
}

body.page-customers .section-head {
    margin-bottom: 60px;
    max-width: 760px;
}

body.page-customers .section-head h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(34px, 4.4vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--ink);
}

body.page-customers .section-head h2 em {
    font-style: italic;
    color: var(--green-deep);
}

body.page-customers .section-head p {
    margin-top: 18px;
    color: var(--slate);
    font-size: 17px;
    line-height: 1.6;
    max-width: 60ch;
}

/* featured (flagship + higher ed) */
body.page-customers .featured-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

body.page-customers .product-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 32px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-card);
}

body.page-customers .product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    border-color: rgba(2, 184, 127, 0.25);
}

body.page-customers .product-card.is-flagship {
    /* subtle warm wash */
}

body.page-customers .product-card.is-dark {
    background: linear-gradient(160deg, #0f1714 0%, #16221d 100%);
    border-color: transparent;
    color: white;
}

body.page-customers .product-card.is-dark .pcard-desc {
    color: rgba(255, 255, 255, 0.7);
}

body.page-customers .product-card.is-dark .pcard-title {
    color: white;
}

body.page-customers .product-card.is-dark .pcard-link {
    color: var(--green-bright);
}

body.page-customers .product-card.is-dark .pcard-link::after {
    color: var(--green-bright);
}

body.page-customers .product-card.is-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 100% 0%, rgba(0, 217, 126, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(245, 166, 35, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

body.page-customers .pcard-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 22px;
}

body.page-customers .pcard-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

body.page-customers .pcard-icon.icon-orange {
    background: linear-gradient(135deg, #ffb547 0%, #f5912a 100%);
}

body.page-customers .pcard-icon.icon-green {
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%);
}

body.page-customers .pcard-icon.icon-coral {
    background: linear-gradient(135deg, #ff8a5b 0%, #ff6b3d 100%);
}

body.page-customers .pcard-icon.icon-blue {
    background: linear-gradient(135deg, #5fb1ff 0%, #2e8eff 100%);
}

body.page-customers .pcard-icon.icon-purple {
    background: linear-gradient(135deg, #b78cff 0%, #8a5aff 100%);
}

body.page-customers .pcard-icon.icon-teal {
    background: linear-gradient(135deg, var(--teal-soft) 0%, var(--teal) 100%);
}

body.page-customers .pcard-icon.icon-amber {
    background: linear-gradient(135deg, #ffd54f 0%, #f5a623 100%);
}

body.page-customers .pcard-icon.icon-pink {
    background: linear-gradient(135deg, #ff9bb3 0%, #ff5d8f 100%);
}

body.page-customers .pcard-icon.icon-slate {
    background: linear-gradient(135deg, #7a8a99 0%, #4a5a6b 100%);
}

body.page-customers .pcard-icon.icon-navy {
    background: linear-gradient(135deg, #4a6bff 0%, #2a3eb5 100%);
}

body.page-customers .pcard-icon.icon-lime {
    background: linear-gradient(135deg, #c8f05c 0%, #8ec70d 100%);
}

/* monogram letter styling inside icon block */
body.page-customers .pcard-icon.has-monogram {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 22px;
    color: white;
    letter-spacing: -0.02em;
}

/* partner card external-link styling */
body.page-customers .pcard-url {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--muted);
    text-decoration: none;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    text-transform: uppercase;
}

body.page-customers .pcard-url::after {
    content: '?';
    font-size: 13px;
}

body.page-customers .pcard-url:hover {
    color: var(--green-deep);
}

body.page-customers .product-card.is-dark .pcard-url {
    color: rgba(255, 255, 255, 0.55);
    border-top-color: rgba(255, 255, 255, 0.1);
}

body.page-customers .product-card.is-dark .pcard-url:hover {
    color: var(--green-bright);
}

body.page-customers .pcard-icon svg {
    width: 22px;
    height: 22px;
    color: white;
}

body.page-customers .badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

body.page-customers .badge-flagship {
    background: var(--lemon);
    color: #7a5e00;
}

body.page-customers .badge-higher {
    background: var(--amber);
    color: #4a2e00;
}

body.page-customers .badge-new {
    background: var(--mint);
    color: #00603a;
}

body.page-customers .badge-2026 {
    background: #f0e8ff;
    color: #4b2a8f;
}

body.page-customers .pcard-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: 14px;
}

body.page-customers .product-card.is-flagship .pcard-title em,
body.page-customers .product-card .pcard-title em {
    font-style: italic;
    color: var(--green-deep);
}

body.page-customers .pcard-desc {
    color: var(--slate);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 24px;
    flex-grow: 1;
}

body.page-customers .pcard-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--green-deep);
    text-decoration: none;
    font-weight: 600;
    font-size: 14.5px;
    margin-top: auto;
    align-self: flex-start;
}

body.page-customers .pcard-link::after {
    content: '?';
    transition: transform .2s ease;
}

body.page-customers .pcard-link:hover::after {
    transform: translateX(4px);
}

/* secondary product cards */
body.page-customers .secondary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

/* CTA tile (fills 8th slot in 2-col product grid) */
body.page-customers .cta-tile {
    position: relative;
    border-radius: var(--radius-lg);
    padding: 32px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: white;
    background:
        radial-gradient(circle at 0% 100%, rgba(255, 231, 138, 0.35) 0%, transparent 55%),
        radial-gradient(circle at 100% 0%, rgba(0, 217, 126, 0.35) 0%, transparent 55%),
        linear-gradient(150deg, #0f1714 0%, #1a2e22 60%, #16352a 100%);
    box-shadow: var(--shadow-card);
    transition: transform .25s ease, box-shadow .25s ease;
}

body.page-customers .cta-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

body.page-customers .cta-tile::after {
    content: '';
    position: absolute;
    right: -60px;
    bottom: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 217, 126, 0.18) 0%, transparent 70%);
    pointer-events: none;
}

body.page-customers .cta-tile-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}

body.page-customers .cta-tile-mark {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%);
    display: grid;
    place-items: center;
    color: white;
    flex-shrink: 0;
}

body.page-customers .cta-tile-mark svg {
    width: 18px;
    height: 18px;
}

body.page-customers .cta-tile-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--green-bright);
}

body.page-customers .cta-tile h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: white;
    margin-bottom: 14px;
    position: relative;
}

body.page-customers .cta-tile h3 em {
    font-style: italic;
    color: var(--green-bright);
}

body.page-customers .cta-tile p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 24px;
    flex-grow: 1;
    position: relative;
}

body.page-customers .cta-tile-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    position: relative;
}

body.page-customers .cta-tile .btn-primary {
    box-shadow: 0 6px 18px -8px rgba(0, 217, 126, 0.6);
}

body.page-customers .cta-tile-phone {
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    padding: 11px 4px;
}

body.page-customers .cta-tile-phone:hover {
    color: var(--green-bright);
}

/* ========== HELP / SUPPORT CTA ========== */
body.page-customers .help-section {
    padding: 110px 32px;
    background: #fafaf6;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

body.page-customers .help-inner {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

body.page-customers .help-text h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}

body.page-customers .help-text h2 em {
    font-style: italic;
    color: var(--green-deep);
}

body.page-customers .help-text p {
    color: var(--slate);
    font-size: 17px;
    line-height: 1.6;
    margin-bottom: 28px;
}

body.page-customers .help-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

body.page-customers .help-feature {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 18px 22px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 14px;
}

body.page-customers .help-feature-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--mint-soft);
    color: var(--green-deep);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

body.page-customers .help-feature-icon svg {
    width: 18px;
    height: 18px;
}

body.page-customers .help-feature h4 {
    font-size: 15.5px;
    font-weight: 600;
    margin-bottom: 3px;
    color: var(--ink);
}

body.page-customers .help-feature p {
    font-size: 14px;
    color: var(--muted);
    margin: 0;
    line-height: 1.5;
}

/* ========== CUSTOMERS RESPONSIVE ========== */
@media (max-width: 1000px) {
    body.page-customers .nav-links {
        display: none;
    }

    body.page-customers .featured-grid,
    body.page-customers .secondary-grid {
        grid-template-columns: 1fr;
    }

    body.page-customers .help-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    body.page-customers .hero-stats {
        gap: 22px 28px;
    }

    body.page-customers .section {
        padding: 70px 24px;
    }

    body.page-customers .hero {
        padding: 56px 24px 80px;
    }

    body.page-customers .hero-mock-wrap {
        padding: 0 0 70px;
    }

    body.page-customers .mock-body {
        grid-template-columns: 1fr 280px;
        min-height: 0;
    }

    body.page-customers .mock-sidebar {
        display: none;
    }

    body.page-customers .help-section {
        padding: 70px 24px;
    }

    body.page-customers .alpha-section {
        grid-template-columns: 100px 1fr;
        gap: 20px;
        padding: 24px 0;
    }

    body.page-customers .alpha-letter {
        font-size: 56px;
        position: relative;
        top: 0;
    }

    body.page-customers .alpha-list {
        grid-template-columns: repeat(2, 1fr);
    }

    body.page-customers .feature-quote-section {
        padding: 70px 24px 44px;
    }

    body.page-customers .feature-quote-mark {
        font-size: 80px;
    }

    body.page-customers .awards-section {
        padding: 56px 24px;
    }

    body.page-customers .awards-inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    body.page-customers .customer-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    body.page-home .hero {
        padding: 140px 0 160px;
    }

    body.page-home .ai-card-score {
        bottom: -70px;
    }

    body.page-customers .feature-quote-attr-mark {
        width: 44px;
    }
}

@media (max-width: 640px) {
    body.page-customers .nav {
        padding: 14px 20px;
    }

    body.page-customers .container {
        padding: 0 24px;
    }

    body.page-customers .nav-signin {
        display: none;
    }

    body.page-customers .pcard-title {
        font-size: 22px !important;
    }

    body.page-customers .mock-body {
        grid-template-columns: 1fr;
    }

    body.page-customers .mock-ai-rail {
        display: none;
    }

    body.page-customers .mock-status-rail {
        display: none;
    }

    body.page-customers .testimonial-rail {
        display: none;
    }

    body.page-customers .partner-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    body.page-customers .customer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    body.page-customers .mock-url {
        display: none;
    }

    body.page-customers .mock-main {
        padding: 16px;
    }

    body.page-customers .candidate-row {
        grid-template-columns: 32px 1fr auto;
    }

    body.page-customers .candidate-row .bar {
        display: none;
    }

    body.page-customers .hero-mock-header {
        padding: 12px 16px;
        gap: 10px;
    }

    body.page-customers .mock-badge-ai {
        font-size: 10.5px;
        padding: 4px 8px;
    }

    body.page-customers .alpha-section {
        grid-template-columns: 60px 1fr;
        gap: 14px;
        padding: 20px 0;
    }

    body.page-customers .alpha-letter {
        font-size: 40px;
    }

    body.page-customers .alpha-list {
        grid-template-columns: 1fr;
    }

    body.page-customers .awards-grid {
        grid-template-columns: 1fr;
    }


}

/* ========== CUSTOMERS ANIMATIONS ========== */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

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

body.page-customers .reveal {
    animation: fadeUp .8s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}

body.page-customers .reveal-1 {
    animation-delay: .05s;
}

body.page-customers .reveal-2 {
    animation-delay: .15s;
}

body.page-customers .reveal-3 {
    animation-delay: .25s;
}

body.page-customers .reveal-4 {
    animation-delay: .35s;
}

body.page-customers .reveal-5 {
    animation-delay: .45s;
}

/* ============ END CUSTOMERS PAGE EXTRACTED ============ */
/* ============ CUSTOMERS COMPONENT SHELL ============ */
body.page-customers a {
    color: inherit;
    text-decoration: none;
}

body.page-customers .nav {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 1280px;
    background: rgba(251, 251, 253, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(229, 229, 238, 0.8);
    border-radius: 100px;
    padding: 10px 12px 10px 24px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 30px rgba(10, 14, 42, 0.04);
    transition: all 0.3s ease;
}

body.page-customers .nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.page-customers .nav-logo img {
    width: auto;
    max-width: 150px;
    height: auto;
    display: block;
}

body.page-customers .nav-links {
    display: flex;
    gap: 4px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

body.page-customers .nav-links a {
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft);
    transition: all 0.2s ease;
}

body.page-customers .nav-links a:hover,
body.page-customers .nav-links a.active {
    background: rgba(2, 184, 127, 0.12);
    color: var(--teal);
}

body.page-customers .nav-cta {
    display: flex;
    gap: 8px;
    align-items: center;
}

body.page-customers .hero {
    padding-top: 136px;
}

body.page-customers .hero {
    padding: 136px 32px 96px;
    position: relative;
    overflow: hidden;
    min-height: auto;
    display: flex;
    align-items: flex-start;
    background: transparent;
}

body.page-customers .hero::before,
body.page-customers .hero::after {
    content: none;
}

body.page-customers .hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 62% 82% at 92% 0%, rgba(0, 217, 126, 0.18) 0%, transparent 62%),
        radial-gradient(ellipse 52% 72% at 4% 12%, rgba(255, 200, 120, 0.35) 0%, transparent 60%),
        radial-gradient(ellipse 76% 88% at 58% 100%, rgba(255, 240, 180, 0.55) 0%, transparent 66%),
        linear-gradient(180deg, #fefcf5 0%, #fff8ea 100%);
    z-index: 0;
}

body.page-customers .hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(14, 20, 17, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 20, 17, 0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    z-index: 1;
    pointer-events: none;
}

body.page-customers .glow-orb {
    display: none;
}

body.page-customers .glow-orb-1 {
    top: 90px;
    right: 10%;
    width: 300px;
    height: 300px;
    background: var(--orange-soft);
}

body.page-customers .glow-orb-2 {
    bottom: -70px;
    left: 8%;
    width: 360px;
    height: 360px;
    background: var(--teal-soft);
}

body.page-customers .glow-orb-3 {
    display: none;
}

body.page-customers .hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
    max-width: 1000px;
}

body.page-customers .hero-meta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    animation: fade-up 0.8s ease forwards;
    flex-wrap: wrap;
}

body.page-customers .hero-tag>div {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: #ffffff6e;
    border: 1px solid rgba(14, 20, 17, 0.08);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: var(--teal-dark);
}

body.page-customers .hero-tag-dot {
    display: inline-flex;
    width: 6px;
    height: 6px;
    background: var(--yellow);
    border-radius: 50%;
    animation: blink 2s ease-in-out infinite;
}

body.page-customers .hero h1 {
    font-family: var(--font-display);
    font-size: clamp(56px, 7vw, 100px);
    line-height: 0.98;
    letter-spacing: -0.03em;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 0;
    margin-top: 0;
    animation: fade-up 1s ease 0.1s forwards;
    opacity: 0;
}

body.page-customers .hero h1 .line {
    display: inline;
    position: relative;
}

body.page-customers .hero h1 .line-1 {
    font-weight: 500;
    font-size: 75px;
}

body.page-customers .hero-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 30px 0;
    animation: fade-up 0.8s ease 0.3s forwards;
    opacity: 0;
}

body.page-customers .hero-divider-line {
    width: 110px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ink-soft), transparent);
    opacity: 0.2;
}

body.page-customers .hero-divider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f2b416;
    box-shadow: 0 0 0 6px #ffd15c54;
}

body.page-customers .hero-sub {
    font-size: 18px;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 880px;
    margin: 15px auto 36px;
    animation: fade-up 0.8s ease 0.35s forwards;
    opacity: 0;
}

body.page-customers .hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0;
    animation: fade-up 0.8s ease 0.45s forwards;
    opacity: 0;
}

body.page-customers .hero-actions .btn {
    min-width: 180px;
    justify-content: center;
}

@media (max-width: 1000px) {
    body.page-customers .hero {
        min-height: auto;
        padding: 124px 0 80px;
    }

    body.page-customers .hero h1 {
        font-size: clamp(54px, 10vw, 92px);
    }

    body.page-customers .hero-sub {
        max-width: 760px;
    }
}

@media (max-width: 640px) {
    body.page-customers .hero {
        min-height: auto;
        padding: 116px 0 64px;
    }

    body.page-customers .hero-meta-row {
        margin-bottom: 42px;
    }

    body.page-customers .hero h1 {
        font-size: clamp(48px, 16vw, 70px);
    }

    body.page-customers .hero-divider {
        margin: 46px 0 30px;
    }

    body.page-customers .hero-divider-line {
        width: 72px;
    }

    body.page-customers .hero-sub {
        font-size: 18px;
        margin-bottom: 40px;
    }

    body.page-customers .hero-actions .btn {
        width: 100%;
    }
}

body.page-customers .section-header {
    margin-bottom: 80px;
    max-width: 720px;
}

body.page-customers .section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--teal);
    font-weight: 600;
    margin: 0 0 20px;
}

body.page-customers .section-tag::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--teal);
}

body.page-customers .section-title h2 {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 400;
    color: var(--ink);
    margin: 0 0 24px;
    padding-bottom: 0.08em;
    overflow: visible;
}

body.page-customers .section-title em {
    font-style: italic;
    font-weight: 300;
    background: var(--grad-teal-yellow);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 0.2em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

body.page-customers .section-sub {
    font-size: 18px;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 600px;
    margin: 0;
}

body.page-customers .filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 32px;
}

body.page-customers .filter-chip,
body.page-customers .filter-chips-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

body.page-customers .filter-chip {
    background: white;
    border: 1px solid var(--line);
    color: var(--ink-mid);
}

body.page-customers .filter-chip:hover {
    border-color: rgba(2, 184, 127, 0.4);
    color: var(--ink);
}

body.page-customers .filter-chip.is-active {
    background: var(--ink);
    color: white;
    border-color: var(--ink);
}

body.page-customers .filter-chip .count {
    font-size: 11.5px;
    color: var(--muted);
    font-weight: 500;
}

body.page-customers .filter-chip.is-active .count {
    color: rgba(255, 255, 255, 0.65);
}

body.page-customers .filter-chips-toggle {
    background: transparent;
    border: 1px dashed rgba(16, 18, 25, 0.2);
    color: var(--muted);
}

body.page-customers .filter-chips-toggle:hover {
    color: var(--ink);
    border-color: var(--ink);
}

body.page-customers .filter-chips-toggle[hidden] {
    display: none;
}

body.page-customers .filter-chip.is-hidden-overflow {
    display: none;
}

body.page-customers .filter-chips.is-expanded .filter-chip.is-hidden-overflow {
    display: inline-flex;
}

body.page-customers .logo-wall-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    margin-bottom: 8px;
    font-size: 13.5px;
    color: var(--muted);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

body.page-customers .logo-wall-meta strong {
    color: var(--ink);
    font-weight: 600;
}

body.page-customers .logo-wall-meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(255, 200, 120, 0.18);
    border-radius: 999px;
    font-size: 11.5px;
    color: #7a4e00;
    font-weight: 500;
    white-space: nowrap;
}

body.page-customers .logo-wall-meta-tag::before {
    content: '\26A0';
    font-size: 11px;
}

body.page-customers .logo-wall-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
}

body.page-customers .logo-wall-loading {
    margin: auto;
}

body.page-customers .logo-tile {
    background: white;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    min-height: 150px;
}

body.page-customers .logo-tile:hover {
    transform: translateY(-2px);
    border-color: rgba(2, 184, 127, 0.3);
    box-shadow: 0 1px 0 rgba(16, 18, 25, 0.04), 0 12px 24px -12px rgba(16, 18, 25, 0.12);
}

body.page-customers .logo-tile-mark {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: rgba(16, 18, 25, 0.32);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    margin-bottom: 12px;
    position: relative;
}

body.page-customers .logo-tile-mark::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(16, 18, 25, 0.04);
    pointer-events: none;
}

body.page-customers .logo-tile-mark.is-placeholder {
    background:
        repeating-linear-gradient(45deg,
            rgba(16, 18, 25, 0.025) 0,
            rgba(16, 18, 25, 0.025) 4px,
            transparent 4px,
            transparent 9px),
        linear-gradient(135deg, #f4f4ee 0%, #ebebe2 100%);
}

body.page-customers .logo-tile-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.25;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: auto;
}

body.page-customers .logo-tile-name.is-placeholder {
    color: var(--muted);
    font-weight: 500;
    font-style: italic;
}

body.page-customers .logo-tile-state {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.06em;
    font-weight: 500;
}

body.page-customers .logo-tile.is-hidden {
    display: none;
}

@media (max-width: 980px) {
    body.page-customers .logo-wall-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    body.page-customers .logo-wall-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    body.page-customers .logo-tile {
        padding: 14px 12px 12px;
        min-height: 130px;
    }

    body.page-customers .filter-chips {
        gap: 6px;
    }

    body.page-customers .filter-chip,
    body.page-customers .filter-chips-toggle {
        padding: 7px 12px;
        font-size: 12.5px;
    }

    body.page-customers .logo-wall-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 12px 0;
    }

    body.page-customers .logo-wall-meta-tag {
        white-space: normal;
    }
}

body.page-customers footer {
    background: var(--extra-dark);
    color: var(--paper);
    padding: 80px 32px 40px;
}

body.page-customers footer h3,
body.page-customers footer h4,
body.page-customers footer p,
body.page-customers footer ul,
body.page-customers footer li {
    margin: 0;
    padding: 0;
}

body.page-customers .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 60px;
}

body.page-customers .footer-brand h3 {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 22px;
    color: white;
}

body.page-customers .footer-brand h3 img {
    max-width: 200px;
}

body.page-customers .footer-brand p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 24px;
    max-width: 320px;
}

body.page-customers .footer-contact {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.8;
}

body.page-customers .footer-contact strong {
    color: var(--yellow-soft);
    font-weight: 500;
}

body.page-customers .footer-col h4 {
    color: var(--yellow-soft);
    font-weight: 600;
}

body.page-customers .footer-contact a,
body.page-customers .footer-col a,
body.page-customers .footer-bottom-links a {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s;
}

body.page-customers .footer-contact a:hover,
body.page-customers .footer-col a:hover,
body.page-customers .footer-bottom-links a:hover {
    color: white;
}

body.page-customers .footer-col h4 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 20px;
}

body.page-customers .footer-col ul {
    list-style: none;
}

body.page-customers .footer-col li {
    margin-bottom: 10px;
}

body.page-customers .footer-col a {
    font-size: 14px;
}

body.page-customers .footer-event-title {
    display: block;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
}

body.page-customers .footer-event-date {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

body.page-customers .footer-bottom {
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

body.page-customers .footer-bottom-links {
    display: flex;
    gap: 24px;
}

@media (max-width: 1000px) {
    body.page-customers .nav-links {
        display: none;
    }

    body.page-customers .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}

@media (max-width: 640px) {
    body.page-customers .nav {
        padding: 14px 20px;
    }

    body.page-customers .nav-cta .btn-ghost {
        display: none;
    }

    body.page-customers .container {
        padding: 0 24px;
    }

    body.page-customers .footer-grid {
        grid-template-columns: 1fr;
    }

    body.page-customers .footer-bottom {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    body.page-customers footer {
        padding: 60px 24px;
    }

    body.page-customers .footer-bottom-links {
        flex-wrap: wrap;
        gap: 14px 20px;
    }
}

/* ============ NEWS COMPONENT SHELL ============ */
body.page-news a {
    color: inherit;
    text-decoration: none;
}

body.page-news img {
    max-width: 100%;
    display: block;
}

body.page-news .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}

body.page-news .nav {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 1280px;
    background: rgba(251, 251, 253, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(229, 229, 238, 0.8);
    border-radius: 100px;
    padding: 10px 12px 10px 24px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 30px rgba(10, 14, 42, 0.04);
    transition: all 0.3s ease;
}

body.page-news .nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.page-news .nav-logo img {
    width: auto;
    max-width: 150px;
    height: auto;
    display: block;
}

body.page-news .nav-links {
    display: flex;
    gap: 4px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

body.page-news .nav-links a {
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft);
    transition: all 0.2s ease;
}

body.page-news .nav-links a:hover,
body.page-news .nav-links a.active {
    background: rgba(2, 184, 127, 0.12);
    color: var(--teal);
}

body.page-news .nav-cta {
    display: flex;
    gap: 8px;
    align-items: center;
}

body.page-news footer {
    background: var(--extra-dark);
    color: var(--paper);
    padding: 80px 32px 40px;
}

body.page-news footer h3,
body.page-news footer h4,
body.page-news footer p,
body.page-news footer ul,
body.page-news footer li {
    margin: 0;
    padding: 0;
}

body.page-news .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 60px;
}

body.page-news .footer-brand h3 {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 22px;
    color: white;
}

body.page-news .footer-brand h3 img {
    max-width: 200px;
}

body.page-news .footer-brand p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 24px;
    max-width: 320px;
}

body.page-news .footer-contact {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.8;
}

body.page-news .footer-contact strong {
    color: var(--yellow-soft);
    font-weight: 500;
}

body.page-news .footer-col h4 {
    color: var(--yellow-soft);
    font-weight: 600;
}

body.page-news .footer-contact a,
body.page-news .footer-col a,
body.page-news .footer-bottom-links a {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s;
}

body.page-news .footer-contact a:hover,
body.page-news .footer-col a:hover,
body.page-news .footer-bottom-links a:hover {
    color: white;
}

body.page-news .footer-col h4 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 20px;
}

body.page-news .footer-col ul {
    list-style: none;
}

body.page-news .footer-col li {
    margin-bottom: 10px;
}

body.page-news .footer-col a {
    font-size: 14px;
}

body.page-news .footer-event-title {
    display: block;
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 500;
    font-size: 14px;
}

body.page-news .footer-event-date {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

body.page-news .footer-bottom {
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

body.page-news .footer-bottom-links {
    display: flex;
    gap: 24px;
}

@media (max-width: 1000px) {
    body.page-news .nav-links {
        display: none;
    }

    body.page-news .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}

@media (max-width: 640px) {
    body.page-news .nav {
        padding: 14px 20px;
    }

    body.page-news .nav-cta .btn-ghost {
        display: none;
    }

    body.page-news .container {
        padding: 0 24px;
    }

    body.page-news .footer-grid {
        grid-template-columns: 1fr;
    }

    body.page-news .footer-bottom {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    body.page-news footer {
        padding: 60px 24px;
    }

    body.page-news .footer-bottom-links {
        flex-wrap: wrap;
        gap: 14px 20px;
    }
}

/* ============ NEWS PAGE STYLES ============ */
body.page-news {
    --green: var(--teal);
    --green-deep: var(--teal);
    --green-bright: var(--teal);
    --mint: #d8f7ec;
    --mint-soft: #e8fbf4;
    --cream: var(--paper);
    --peach: #ffe6c4;
    --lemon: var(--yellow-soft);
    --amber: var(--yellow);
    --ink: #101219;
    --ink-soft: #242A39;
    --ink-mid: #323848;
    --slate: #4d5565;
    --muted: #6a7280;
    --line: #e1e4ea;
    --bg: var(--paper);
    --card: #ffffff;
    --card-dark: var(--extra-dark);
    --radius-lg: 22px;
    --radius-md: 14px;
    --radius-sm: 10px;
    --shadow-card: 0 1px 0 rgba(14, 20, 17, 0.04), 0 8px 24px -12px rgba(14, 20, 17, 0.08);
    --shadow-hover: 0 1px 0 rgba(14, 20, 17, 0.04), 0 24px 48px -20px rgba(14, 20, 17, 0.18);
}

body.page-news * {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body.page-news {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.page-news .serif-italic {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.01em;
}

body.page-news .serif {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.015em;
}

body.page-news .hero-mock-wrap {
    position: relative;
    z-index: 2;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 0 90px;
}

body.page-news .hero-mock {
    position: relative;
    background: white;
    border-radius: 20px 20px 0 0;
    border: 1px solid rgba(14, 20, 17, 0.06);
    border-bottom: none;
    box-shadow:
        0 -1px 0 rgba(14, 20, 17, 0.04),
        0 30px 70px -25px rgba(14, 20, 17, 0.22),
        0 70px 140px -40px rgba(14, 20, 17, 0.18);
    overflow: hidden;
}

body.page-news .hero-mock::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #00d97e 0%, #00b86b 30%, #ffd54f 70%, #f5a623 100%);
}

body.page-news .hero-mock-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #fbfbf7 0%, #ffffff 100%);
}

body.page-news .mock-dots {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

body.page-news .mock-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

body.page-news .mock-dot:nth-child(1) {
    background: #ff5f57;
}

body.page-news .mock-dot:nth-child(2) {
    background: #febc2e;
}

body.page-news .mock-dot:nth-child(3) {
    background: #28c840;
}

body.page-news .mock-url {
    flex: 1;
    max-width: 420px;
    padding: 6px 14px;
    background: rgba(14, 20, 17, 0.04);
    border-radius: 8px;
    font-size: 12px;
    color: var(--muted);
    font-family: var(--font-sans);
    display: flex;
    align-items: center;
    gap: 8px;
}

body.page-news .mock-url::before {
    content: '';
    width: 10px;
    height: 10px;
    border: 1.5px solid var(--green);
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

body.page-news .mock-url strong {
    color: var(--ink);
    font-weight: 600;
}

body.page-news .mock-badge-ai {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    background: var(--ink);
    color: white;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    flex-shrink: 0;
}

body.page-news .mock-badge-ai::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green-bright);
    box-shadow: 0 0 8px var(--green-bright);
    animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

body.page-news .mock-body {
    display: grid;
    grid-template-columns: 200px 1fr 320px;
    min-height: 360px;
}

body.page-news .mock-sidebar {
    padding: 22px 18px;
    border-right: 1px solid var(--line);
    background: #fafaf6;
}

body.page-news .mock-side-section {
    margin-bottom: 22px;
}

body.page-news .mock-side-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
    padding-left: 8px;
}

body.page-news .mock-side-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--ink-mid);
    margin-bottom: 2px;
}

body.page-news .mock-side-item.is-active {
    background: white;
    color: var(--ink);
    font-weight: 600;
    box-shadow: 0 1px 0 rgba(14, 20, 17, 0.04), 0 4px 12px -6px rgba(14, 20, 17, 0.08);
}

body.page-news .mock-side-item .mark {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    flex-shrink: 0;
}

body.page-news .mark.m-green {
    background: linear-gradient(135deg, #00d97e, #00a85a);
}

body.page-news .mark.m-orange {
    background: linear-gradient(135deg, #ffb547, #f5912a);
}

body.page-news .mark.m-blue {
    background: linear-gradient(135deg, #5fb1ff, #2e8eff);
}

body.page-news .mark.m-purple {
    background: linear-gradient(135deg, #b78cff, #8a5aff);
}

body.page-news .mark.m-coral {
    background: linear-gradient(135deg, #ff8a5b, #ff6b3d);
}

body.page-news .mark.m-teal {
    background: linear-gradient(135deg, #5ce0c8, #2bb89e);
}

body.page-news .mock-side-count {
    margin-left: auto;
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
}

body.page-news .mock-main {
    padding: 22px 26px;
}

body.page-news .mock-main-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

body.page-news .mock-main-title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
}

body.page-news .mock-main-title em {
    font-style: italic;
    color: var(--green-deep);
    font-weight: 500;
    margin-left: 4px;
}

body.page-news .mock-main-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 11.5px;
    color: var(--ink-mid);
    font-weight: 500;
}

body.page-news .mock-main-filter::after {
    content: '▾';
    color: var(--muted);
    font-size: 9px;
}

body.page-news .candidate-row {
    display: grid;
    grid-template-columns: 36px 1fr auto auto;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 4px;
    transition: background .3s;
}

body.page-news .candidate-row.is-active {
    background: linear-gradient(90deg, rgba(0, 217, 126, 0.09) 0%, transparent 100%);
    position: relative;
}

body.page-news .candidate-row.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--green);
    border-radius: 0 2px 2px 0;
}

body.page-news .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: white;
    font-size: 12.5px;
    font-weight: 600;
    font-family: var(--font-sans);
}

body.page-news .avatar.a1 {
    background: linear-gradient(135deg, #5fb1ff, #2e8eff);
}

body.page-news .avatar.a2 {
    background: linear-gradient(135deg, #ff8a5b, #ff6b3d);
}

body.page-news .avatar.a3 {
    background: linear-gradient(135deg, #b78cff, #8a5aff);
}

body.page-news .avatar.a4 {
    background: linear-gradient(135deg, #5ce0c8, #2bb89e);
}

body.page-news .candidate-info {
    min-width: 0;
}

body.page-news .candidate-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
    margin-bottom: 3px;
}

body.page-news .candidate-meta {
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.2;
}

body.page-news .score {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.02em;
}

body.page-news .score em {
    font-style: italic;
    color: var(--green-deep);
    font-size: 11.5px;
    font-weight: 500;
    margin-left: 4px;
}

body.page-news .bar {
    width: 72px;
    height: 5px;
    background: rgba(14, 20, 17, 0.06);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

body.page-news .bar::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, #00d97e, #00b86b);
    border-radius: 999px;
    width: var(--w, 80%);
}

body.page-news .mock-ai-rail {
    background: linear-gradient(160deg, #0f1714 0%, #1a2e22 100%);
    color: white;
    padding: 22px 22px;
    position: relative;
    overflow: hidden;
}

body.page-news .mock-ai-rail::before {
    content: '';
    position: absolute;
    right: -50px;
    top: -50px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 217, 126, 0.22) 0%, transparent 70%);
    pointer-events: none;
}

body.page-news .ai-rail-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--green-bright);
    margin-bottom: 12px;
    position: relative;
}

body.page-news .ai-rail-label::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green-bright);
    box-shadow: 0 0 8px var(--green-bright);
}

body.page-news .ai-rail-name {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    color: white;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
    position: relative;
}

body.page-news .ai-rail-role {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 16px;
    position: relative;
}

body.page-news .ai-rail-strong {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(0, 217, 126, 0.18);
    color: var(--green-bright);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 12px;
    position: relative;
}

body.page-news .ai-rail-text {
    font-size: 12.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 16px;
    position: relative;
}

body.page-news .ai-rail-text strong {
    color: white;
    font-weight: 600;
}

body.page-news .ai-rail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    position: relative;
}

body.page-news .ai-rail-tag {
    padding: 4px 9px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

body.page-news .partner-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

body.page-news .partner-mini {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 10px;
    transition: border-color .2s, transform .2s;
}

body.page-news .partner-mini:hover {
    border-color: rgba(0, 184, 107, 0.25);
    transform: translateY(-1px);
}

body.page-news .partner-mini-mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: white;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

body.page-news .partner-mini-info {
    min-width: 0;
    flex: 1;
}

body.page-news .partner-mini-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.page-news .partner-mini-status {
    font-size: 10.5px;
    color: var(--green-deep);
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 1px;
}

body.page-news .partner-mini-status::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green-bright);
    flex-shrink: 0;
}

body.page-news .partner-mini.is-add {
    background: transparent;
    border-style: dashed;
    border-color: rgba(14, 20, 17, 0.12);
    color: var(--muted);
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
}

body.page-news .partner-mini.is-add::before {
    content: '+';
    font-size: 18px;
    margin-right: 4px;
    line-height: 1;
}

body.page-news .mock-status-rail {
    background: linear-gradient(160deg, #0f1714 0%, #1a2e22 100%);
    color: white;
    padding: 22px 22px;
    position: relative;
    overflow: hidden;
}

body.page-news .mock-status-rail::before {
    content: '';
    position: absolute;
    right: -50px;
    top: -50px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 217, 126, 0.22) 0%, transparent 70%);
    pointer-events: none;
}

body.page-news .status-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--green-bright);
    margin-bottom: 16px;
    position: relative;
}

body.page-news .status-label::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green-bright);
    box-shadow: 0 0 8px var(--green-bright);
    animation: pulse 1.6s ease-in-out infinite;
}

body.page-news .status-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    position: relative;
}

body.page-news .status-row:last-of-type {
    border-bottom: none;
}

body.page-news .status-row-lbl {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

body.page-news .status-row-val {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: white;
    letter-spacing: -0.01em;
}

body.page-news .status-row-val em {
    font-style: italic;
    color: var(--green-bright);
    font-size: 12px;
    font-weight: 500;
    margin-left: 4px;
}

body.page-news .status-footer {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.5;
    position: relative;
}

body.page-news .status-footer strong {
    color: white;
    font-weight: 600;
}

body.page-news .testimonial-rail {
    background: linear-gradient(160deg, #0f1714 0%, #1a2e22 100%);
    color: white;
    padding: 22px 22px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.page-news .testimonial-rail::before {
    content: '';
    position: absolute;
    right: -50px;
    top: -50px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 217, 126, 0.22) 0%, transparent 70%);
    pointer-events: none;
}

body.page-news .testimonial-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--green-bright);
    margin-bottom: 14px;
    position: relative;
}

body.page-news .testimonial-label::before {
    content: '"';
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 0;
    margin-right: -2px;
    color: var(--green-bright);
}

body.page-news .testimonial-quote {
    font-family: var(--font-display);
    font-size: 14.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: -0.005em;
    margin-bottom: 18px;
    position: relative;
    font-weight: 400;
    flex: 1;
}

body.page-news .testimonial-attr {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 14px;
    position: relative;
}

body.page-news .testimonial-attr-name {
    font-size: 13px;
    font-weight: 600;
    color: white;
    margin-bottom: 2px;
}

body.page-news .testimonial-attr-role {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.55);
}

body.page-news .customer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

body.page-news .customer-mini {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 9px;
    transition: border-color .2s, transform .2s;
    min-height: 46px;
}

body.page-news .customer-mini:hover {
    border-color: rgba(0, 184, 107, 0.25);
    transform: translateY(-1px);
}

body.page-news .customer-mini-mark {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    color: white;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

body.page-news .customer-mini-name {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

body.page-news .customer-search-wrap {
    margin-bottom: 48px;
    max-width: 520px;
}

body.page-news .customer-search {
    position: relative;
}

body.page-news .customer-search input {
    width: 100%;
    padding: 14px 18px 14px 46px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: white;
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--ink);
    transition: border-color .2s, box-shadow .2s;
}

body.page-news .customer-search input:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 4px rgba(0, 184, 107, 0.1);
}

body.page-news .customer-search input::placeholder {
    color: var(--muted);
}

body.page-news .customer-search svg {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--muted);
    pointer-events: none;
}

body.page-news .customer-search-meta {
    margin-top: 12px;
    font-size: 13px;
    color: var(--muted);
    padding-left: 4px;
}

body.page-news .customer-search-meta strong {
    color: var(--ink);
    font-weight: 600;
}

body.page-news .alpha-section {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 32px;
    padding: 32px 0;
    border-top: 1px solid var(--line);
}

body.page-news .alpha-section:first-of-type {
    border-top: 2px solid var(--ink);
}

body.page-news .alpha-letter {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 80px;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--ink);
    position: sticky;
    top: 90px;
    align-self: start;
}

body.page-news .alpha-letter em {
    font-family: var(--font-sans);
    font-style: normal;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0;
    margin-left: 10px;
    vertical-align: top;
    line-height: 1.5;
}

body.page-news .alpha-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px 24px;
}

body.page-news .alpha-list .customer-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 4px;
    border-bottom: 1px dashed rgba(14, 20, 17, 0.08);
    color: var(--ink);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.3;
    transition: color .15s, padding-left .15s;
}

body.page-news .alpha-list .customer-item:hover {
    color: var(--green-deep);
    padding-left: 8px;
}

body.page-news .alpha-list .customer-item .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
    opacity: 0.4;
    transition: opacity .15s, transform .15s;
}

body.page-news .alpha-list .customer-item:hover .dot {
    opacity: 1;
    transform: scale(1.4);
}

body.page-news .alpha-list .customer-item.is-hidden {
    display: none;
}

body.page-news .alpha-section.is-empty {
    display: none;
}

body.page-news .no-results {
    padding: 40px 0;
    text-align: center;
    color: var(--muted);
    font-style: italic;
    display: none;
}

body.page-news .no-results.is-active {
    display: block;
}

body.page-news .feature-quote-section {
    padding: 110px 32px;
    background:
        radial-gradient(ellipse 50% 60% at 20% 50%, rgba(0, 217, 126, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse 40% 50% at 90% 50%, rgba(255, 200, 120, 0.15) 0%, transparent 60%),
        linear-gradient(180deg, #fefcf5 0%, #fff8ea 100%);
    position: relative;
    overflow: hidden;
}

body.page-news .feature-quote-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(14, 20, 17, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 20, 17, 0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 80%);
    pointer-events: none;
}

body.page-news .feature-quote-inner {
    max-width: 1040px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

body.page-news .feature-quote-mark {
    font-family: var(--font-display);
    font-size: 120px;
    line-height: 0.6;
    color: var(--green);
    opacity: 0.4;
    margin-bottom: 0;
    font-style: italic;
}

body.page-news .feature-quote-text {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(24px, 2.6vw, 38px);
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: 36px;
}

body.page-news .feature-quote-text em {
    font-style: italic;
    color: var(--green-deep);
}

body.page-news .feature-quote-attr {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding-top: 24px;
    border-top: 1px solid rgba(14, 20, 17, 0.1);
}

body.page-news .feature-quote-attr-mark {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5fb1ff 0%, #2e8eff 100%);
    color: white;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
}

body.page-news .feature-quote-attr-text {
    text-align: left;
}

body.page-news .feature-quote-attr-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 2px;
}

body.page-news .feature-quote-attr-role {
    font-size: 13px;
    color: var(--muted);
}

body.page-news .awards-section {
    padding: 70px 32px;
    background: var(--ink);
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

body.page-news .awards-inner {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 60px;
    align-items: center;
}

body.page-news .awards-text h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

body.page-news .awards-text h3 em {
    font-style: italic;
    color: var(--green-bright);
}

body.page-news .awards-text p {
    margin-top: 14px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14.5px;
    line-height: 1.55;
}

body.page-news .awards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

body.page-news .award-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 22px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

body.page-news .award-medal {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd54f 0%, #f5a623 100%);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: #4a2e00;
}

body.page-news .award-medal svg {
    width: 22px;
    height: 22px;
}

body.page-news .award-year {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 13px;
    color: var(--green-bright);
    margin-bottom: 4px;
    font-weight: 500;
}

body.page-news .award-name {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: white;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}

body.page-news .award-issuer {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.55);
}

body.page-news .filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 32px;
}

body.page-news .filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-mid);
    cursor: pointer;
    transition: all .15s ease;
    font-family: inherit;
}

body.page-news .filter-chip:hover {
    border-color: rgba(0, 184, 107, 0.4);
    color: var(--ink);
}

body.page-news .filter-chip.is-active {
    background: var(--ink);
    color: white;
    border-color: var(--ink);
}

body.page-news .filter-chip .count {
    font-size: 11.5px;
    color: var(--muted);
    font-weight: 500;
}

body.page-news .filter-chip.is-active .count {
    color: rgba(255, 255, 255, 0.6);
}

body.page-news .featured-article {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 0;
    margin-bottom: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
    transition: transform .25s, box-shadow .25s;
    text-decoration: none;
    color: inherit;
}

body.page-news .featured-article:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

body.page-news .featured-img {
    position: relative;
    min-height: 380px;
    overflow: hidden;
}

body.page-news .featured-img.grad-1 {
    background:
        radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
        linear-gradient(135deg, #0f1714 0%, #1f4a35 50%, #16352a 100%);
}

body.page-news .featured-img-pattern {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 0%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 0%, transparent 80%);
}

body.page-news .featured-img-mark {
    position: absolute;
    bottom: 32px;
    left: 32px;
    right: 32px;
    color: white;
    max-width: 510px;
}

body.page-news .featured-img-mark-label {
    width: fit-content;
    display: inline-block;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--green-bright);
    margin-bottom: 14px;
    backdrop-filter: blur(8px);
}

body.page-news .featured-img-mark-headline {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: white;
    max-width: 14ch;
}

body.page-news .featured-img-mark-headline em {
    font-style: italic;
    color: var(--green-bright);
}

body.page-news .featured-body {
    padding: 40px 38px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body.page-news .featured-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--green-deep);
    margin-bottom: 18px;
}

body.page-news .featured-eyebrow>div {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.page-news .featured-eyebrow .dot {
    display: inline-flex;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ink);
    opacity: 0.3;
}

body.page-news .featured-eyebrow .date {
    color: var(--muted);
    text-transform: none;
    letter-spacing: 0.01em;
    font-weight: 500;
}

body.page-news .featured-title h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(28px, 3.2vw, 40px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 16px;
}

body.page-news .featured-title em {
    font-style: italic;
    color: var(--green-deep);
}

body.page-news .featured-excerpt {
    font-size: 16px;
    line-height: 1.6;
    color: var(--slate);
    margin-bottom: 24px;
}

body.page-news .featured-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
}

body.page-news .author-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: white;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

body.page-news .author-avatar>div {
    display: flex;
    align-items: center;
}

body.page-news .author-info {
    line-height: 1.25;
}

body.page-news .author-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
}

body.page-news .author-role {
    font-size: 12px;
    color: var(--muted);
}

body.page-news .featured-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--green-deep);
    text-decoration: none;
    font-weight: 600;
    font-size: 14.5px;
    align-self: flex-start;
}

body.page-news .featured-cta::after {
    content: '→';
    transition: transform .2s;
}

body.page-news .featured-article:hover .featured-cta::after {
    transform: translateX(4px);
}

body.page-news .article-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

body.page-news .article-card {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-card);
    transition: transform .25s, box-shadow .25s, border-color .25s;
}

body.page-news .article-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    border-color: rgba(0, 184, 107, 0.25);
}

body.page-news .article-img {
    height: 180px;
    position: relative;
    overflow: hidden;
}

body.page-news .article-cat {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: white;
}

body.page-news .article-body {
    padding: 22px 24px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

body.page-news .article-date {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 8px;
    font-weight: 500;
}

body.page-news .article-title h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 21px;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: 12px;
    flex: 0;
}

body.page-news .article-title em {
    font-style: italic;
    color: var(--green-deep);
}

body.page-news .article-excerpt {
    font-size: 14px;
    line-height: 1.55;
    color: var(--slate);
    margin-bottom: 18px;
}

body.page-news .article-card.is-hidden {
    display: none;
}

body.page-news .load-more-wrap {
    display: flex;
    justify-content: center;
    margin: 50px 0 120px;
    padding-top: 36px;
    border-top: 1px solid var(--line);
}

body.page-news .load-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    font-weight: 600;
    font-size: 14.5px;
    text-decoration: none;
    transition: all .2s;
}

body.page-news .load-more:hover {
    border-color: var(--ink);
    background: var(--ink);
    color: white;
}

body.page-news .load-more::after {
    content: '↓';
    font-size: 14px;
    transition: transform .2s;
}

body.page-news .load-more:hover::after {
    transform: translateY(2px);
}

body.page-news .hero-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px 52px;
    margin-top: 44px;
    padding-bottom: 16px;
}

body.page-news .hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.page-news .hero-stat .num {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 6px;
}

body.page-news .hero-stat .num em {
    font-style: italic;
    color: var(--green-deep);
}

body.page-news .hero-stat .lbl {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.35;
    text-align: center;
    max-width: 20ch;
}

body.page-news .section {
    padding: 110px 32px 0;
    max-width: 1240px;
    margin: 0 auto;
}

body.page-news .elementor-shortcode .section {
    padding: 0;
}

body.page-news .section-header {
    margin-bottom: 80px;
    max-width: 720px;
}

body.page-news .section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--teal);
    font-weight: 600;
    margin: 0 0 20px;
}

body.page-news .section-tag::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--teal);
}

body.page-news .section-title h2 {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 400;
    color: var(--ink);
    margin: 0 0 24px;
    padding-bottom: 0.08em;
    overflow: visible;
}

body.page-news .section-title em {
    font-style: italic;
    font-weight: 300;
    background: var(--grad-teal-yellow);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 0.2em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

body.page-news .section-sub {
    font-size: 18px;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 600px;
    margin: 0;
}

body.page-news .featured-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

body.page-news .product-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 32px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-card);
}

body.page-news .product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    border-color: rgba(0, 184, 107, 0.25);
}

body.page-news .product-card.is-flagship {}

body.page-news .product-card.is-dark {
    background: linear-gradient(160deg, #0f1714 0%, #16221d 100%);
    border-color: transparent;
    color: white;
}

body.page-news .product-card.is-dark .pcard-desc {
    color: rgba(255, 255, 255, 0.7);
}

body.page-news .product-card.is-dark .pcard-title {
    color: white;
}

body.page-news .product-card.is-dark .pcard-link {
    color: var(--green-bright);
}

body.page-news .product-card.is-dark .pcard-link::after {
    color: var(--green-bright);
}

body.page-news .product-card.is-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 100% 0%, rgba(0, 217, 126, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(245, 166, 35, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

body.page-news .pcard-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 22px;
}

body.page-news .pcard-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

body.page-news .pcard-icon.icon-orange {
    background: linear-gradient(135deg, #ffb547 0%, #f5912a 100%);
}

body.page-news .pcard-icon.icon-green {
    background: linear-gradient(135deg, #00d97e 0%, #00a85a 100%);
}

body.page-news .pcard-icon.icon-coral {
    background: linear-gradient(135deg, #ff8a5b 0%, #ff6b3d 100%);
}

body.page-news .pcard-icon.icon-blue {
    background: linear-gradient(135deg, #5fb1ff 0%, #2e8eff 100%);
}

body.page-news .pcard-icon.icon-purple {
    background: linear-gradient(135deg, #b78cff 0%, #8a5aff 100%);
}

body.page-news .pcard-icon.icon-teal {
    background: linear-gradient(135deg, #5ce0c8 0%, #2bb89e 100%);
}

body.page-news .pcard-icon.icon-amber {
    background: linear-gradient(135deg, #ffd54f 0%, #f5a623 100%);
}

body.page-news .pcard-icon.icon-pink {
    background: linear-gradient(135deg, #ff9bb3 0%, #ff5d8f 100%);
}

body.page-news .pcard-icon.icon-slate {
    background: linear-gradient(135deg, #7a8a99 0%, #4a5a6b 100%);
}

body.page-news .pcard-icon.icon-navy {
    background: linear-gradient(135deg, #4a6bff 0%, #2a3eb5 100%);
}

body.page-news .pcard-icon.icon-lime {
    background: linear-gradient(135deg, #c8f05c 0%, #8ec70d 100%);
}

body.page-news .pcard-icon.has-monogram {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 22px;
    color: white;
    letter-spacing: -0.02em;
}

body.page-news .pcard-url {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--muted);
    text-decoration: none;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    text-transform: uppercase;
}

body.page-news .pcard-url::after {
    content: '↗';
    font-size: 13px;
}

body.page-news .pcard-url:hover {
    color: var(--green-deep);
}

body.page-news .product-card.is-dark .pcard-url {
    color: rgba(255, 255, 255, 0.55);
    border-top-color: rgba(255, 255, 255, 0.1);
}

body.page-news .product-card.is-dark .pcard-url:hover {
    color: var(--green-bright);
}

body.page-news .pcard-icon svg {
    width: 22px;
    height: 22px;
    color: white;
}

body.page-news .badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

body.page-news .badge-flagship {
    background: var(--lemon);
    color: #7a5e00;
}

body.page-news .badge-higher {
    background: var(--amber);
    color: #4a2e00;
}

body.page-news .badge-new {
    background: var(--mint);
    color: #00603a;
}

body.page-news .badge-2026 {
    background: #f0e8ff;
    color: #4b2a8f;
}

body.page-news .pcard-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: 14px;
}

body.page-news .product-card.is-flagship .pcard-title em,
body.page-news .product-card .pcard-title em {
    font-style: italic;
    color: var(--green-deep);
}

body.page-news .pcard-desc {
    color: var(--slate);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 24px;
    flex-grow: 1;
}

body.page-news .pcard-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--green-deep);
    text-decoration: none;
    font-weight: 600;
    font-size: 14.5px;
    margin-top: auto;
    align-self: flex-start;
}

body.page-news .pcard-link::after {
    content: '→';
    transition: transform .2s ease;
}

body.page-news .pcard-link:hover::after {
    transform: translateX(4px);
}

body.page-news .secondary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

body.page-news .cta-tile {
    position: relative;
    border-radius: var(--radius-lg);
    padding: 32px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: white;
    background:
        radial-gradient(circle at 0% 100%, rgba(255, 231, 138, 0.35) 0%, transparent 55%),
        radial-gradient(circle at 100% 0%, rgba(0, 217, 126, 0.35) 0%, transparent 55%),
        linear-gradient(150deg, #0f1714 0%, #1a2e22 60%, #16352a 100%);
    box-shadow: var(--shadow-card);
    transition: transform .25s ease, box-shadow .25s ease;
}

body.page-news .cta-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

body.page-news .cta-tile::after {
    content: '';
    position: absolute;
    right: -60px;
    bottom: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 217, 126, 0.18) 0%, transparent 70%);
    pointer-events: none;
}

body.page-news .cta-tile-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}

body.page-news .cta-tile-mark {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #00d97e 0%, #00a85a 100%);
    display: grid;
    place-items: center;
    color: white;
    flex-shrink: 0;
}

body.page-news .cta-tile-mark svg {
    width: 18px;
    height: 18px;
}

body.page-news .cta-tile-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--green-bright);
}

body.page-news .cta-tile h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: white;
    margin-bottom: 14px;
    position: relative;
}

body.page-news .cta-tile h3 em {
    font-style: italic;
    color: var(--green-bright);
}

body.page-news .cta-tile p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 24px;
    flex-grow: 1;
    position: relative;
}

body.page-news .cta-tile-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    position: relative;
}

body.page-news .cta-tile .btn-primary {
    box-shadow: 0 6px 18px -8px rgba(0, 217, 126, 0.6);
}

body.page-news .cta-tile-phone {
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    padding: 11px 4px;
}

body.page-news .cta-tile-phone:hover {
    color: var(--green-bright);
}

body.page-news .help-section {
    padding: 110px 32px;
    background: #fafaf6;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

body.page-news .help-inner {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

body.page-news .help-text h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}

body.page-news .help-text h2 em {
    font-style: italic;
    color: var(--green-deep);
}

body.page-news .help-text p {
    color: var(--slate);
    font-size: 17px;
    line-height: 1.6;
    margin-bottom: 28px;
}

body.page-news .help-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

body.page-news .help-feature {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 18px 22px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 14px;
}

body.page-news .help-feature-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--mint-soft);
    color: var(--green-deep);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

body.page-news .help-feature-icon svg {
    width: 18px;
    height: 18px;
}

body.page-news .help-feature h4 {
    font-size: 15.5px;
    font-weight: 600;
    margin-bottom: 3px;
    color: var(--ink);
}

body.page-news .help-feature p {
    font-size: 14px;
    color: var(--muted);
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 1000px) {

    body.page-news .featured-grid,
    body.page-news .secondary-grid {
        grid-template-columns: 1fr;
    }

    body.page-news .help-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    body.page-news .hero-stats {
        gap: 22px 28px;
    }

    body.page-news .section {
        padding: 70px 24px;
    }

    body.page-news .hero {
        padding: 56px 24px 80px;
    }

    body.page-news .hero-mock-wrap {
        padding: 0 0 70px;
    }

    body.page-news .mock-body {
        grid-template-columns: 1fr 280px;
        min-height: 0;
    }

    body.page-news .mock-sidebar {
        display: none;
    }

    body.page-news .help-section {
        padding: 70px 24px;
    }

    body.page-news .alpha-section {
        grid-template-columns: 100px 1fr;
        gap: 20px;
        padding: 24px 0;
    }

    body.page-news .alpha-letter {
        font-size: 56px;
        position: relative;
        top: 0;
    }

    body.page-news .alpha-list {
        grid-template-columns: repeat(2, 1fr);
    }

    body.page-news .feature-quote-section {
        padding: 70px 24px;
    }

    body.page-news .feature-quote-mark {
        font-size: 80px;
    }

    body.page-news .awards-section {
        padding: 56px 24px;
    }

    body.page-news .awards-inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    body.page-news .customer-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    body.page-news .featured-article {
        grid-template-columns: 1fr;
    }

    body.page-news .featured-img {
        min-height: 260px;
    }

    body.page-news .featured-body {
        padding: 32px 28px;
    }

    body.page-news .article-grid {
        grid-template-columns: repeat(2, 1fr);
    }


}

@media (max-width: 640px) {
    body.page-news .pcard-title {
        font-size: 22px !important;
    }

    body.page-news .mock-body {
        grid-template-columns: 1fr;
    }

    body.page-news .mock-ai-rail {
        display: none;
    }

    body.page-news .mock-status-rail {
        display: none;
    }

    body.page-news .testimonial-rail {
        display: none;
    }

    body.page-news .partner-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    body.page-news .customer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    body.page-news .mock-url {
        display: none;
    }

    body.page-news .mock-main {
        padding: 16px;
    }

    body.page-news .candidate-row {
        grid-template-columns: 32px 1fr auto;
    }

    body.page-news .candidate-row .bar {
        display: none;
    }

    body.page-news .hero-mock-header {
        padding: 12px 16px;
        gap: 10px;
    }

    body.page-news .mock-badge-ai {
        font-size: 10.5px;
        padding: 4px 8px;
    }

    body.page-news .alpha-section {
        grid-template-columns: 60px 1fr;
        gap: 14px;
        padding: 20px 0;
    }

    body.page-news .alpha-letter {
        font-size: 40px;
    }

    body.page-news .alpha-list {
        grid-template-columns: 1fr;
    }

    body.page-news .awards-grid {
        grid-template-columns: 1fr;
    }

    body.page-news .article-grid {
        grid-template-columns: 1fr;
    }

    body.page-news .featured-img-mark {
        max-width: 330px;
    }

    body.page-news .featured-img-mark-headline {
        font-size: 24px;
    }

    body.page-news .filter-chips {
        gap: 8px;
    }

    body.page-news .filter-chip {
        padding: 7px 13px;
        font-size: 13px;
    }

    body.page-news .load-more-wrap {
        margin: 50px 0 0;
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

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

body.page-news .reveal {
    animation: fadeUp .8s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}

body.page-news .reveal-1 {
    animation-delay: .05s;
}

body.page-news .reveal-2 {
    animation-delay: .15s;
}

body.page-news .reveal-3 {
    animation-delay: .25s;
}

body.page-news .reveal-4 {
    animation-delay: .35s;
}

body.page-news .reveal-5 {
    animation-delay: .45s;
}

body.page-news .avatar-blue {
    background: linear-gradient(135deg, #5fb1ff, #2e8eff);
}

body.page-news .avatar-green {
    background: linear-gradient(135deg, #00d97e, #00a85a);
}

body.page-news .avatar-purple {
    background: linear-gradient(135deg, #b78cff, #8a5aff);
}

body.page-news .avatar-coral {
    background: linear-gradient(135deg, #ff8a5b, #ff6b3d);
}

body.page-news .newsletter-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    max-width: 460px;
}

body.page-news .newsletter-input {
    flex: 1;
    min-width: 220px;
    padding: 12px 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: white;
    font-family: inherit;
    font-size: 14.5px;
}

/* ============ NEWS HERO MATCHES CUSTOMERS ============ */

body.page-news .hero {
    padding: 136px 32px 96px;
    position: relative;
    overflow: hidden;
    min-height: auto;
    display: flex;
    align-items: flex-start;
    background: transparent;
}

body.page-news .hero::before,
body.page-news .hero::after {
    content: none;
}

body.page-news .hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 10% 0%, rgba(0, 217, 126, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 50% 70% at 95% 10%, rgba(255, 200, 120, 0.35) 0%, transparent 60%),
        radial-gradient(ellipse 70% 90% at 50% 100%, rgba(255, 240, 180, 0.55) 0%, transparent 65%),
        linear-gradient(180deg, #fefcf5 0%, #fff8ea 100%);
    z-index: 0;
}

body.page-news .hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(14, 20, 17, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 20, 17, 0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    z-index: 1;
    pointer-events: none;
}

body.page-news .glow-orb {
    display: none;
}

body.page-news .hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
    max-width: 1000px;
}

body.page-news .hero-meta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    animation: fade-up 0.8s ease forwards;
    flex-wrap: wrap;
}

body.page-news .hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: #ffffff6e;
    border: 1px solid rgba(14, 20, 17, 0.08);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: var(--teal-dark);
}

body.page-news .hero-tag-dot {
    width: 6px;
    height: 6px;
    background: var(--yellow);
    border-radius: 50%;
    animation: blink 2s ease-in-out infinite;
}

body.page-news .hero h1 {
    font-family: var(--font-display);
    font-size: clamp(56px, 7vw, 100px);
    line-height: 0.98;
    letter-spacing: -0.03em;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 0;
    margin-top: 0;
    animation: fade-up 1s ease 0.1s forwards;
    opacity: 0;
}

body.page-news .hero h1 .line {
    display: inline;
    position: relative;
}

body.page-news .hero h1 .line-1 {
    font-weight: 500;
    font-size: 55px;
}

body.page-news .hero-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 30px 0;
    animation: fade-up 0.8s ease 0.3s forwards;
    opacity: 0;
}

body.page-news .hero-divider-line {
    width: 110px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ink-soft), transparent);
    opacity: 0.2;
}

body.page-news .hero-divider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f2b416;
    box-shadow: 0 0 0 6px #ffd15c54;
}

body.page-news .hero-sub {
    font-size: 18px;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 880px;
    margin: 0 auto 36px;
    animation: fade-up 0.8s ease 0.35s forwards;
    opacity: 0;
}

body.page-news .hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0;
    animation: fade-up 0.8s ease 0.45s forwards;
    opacity: 0;
}

body.page-news .hero-actions .btn {
    min-width: 180px;
    justify-content: center;
}

@media (max-width: 1000px) {
    body.page-news .hero {
        min-height: auto;
        padding: 124px 0 80px;
    }

    body.page-news .hero h1 {
        font-size: clamp(54px, 10vw, 92px);
    }

    body.page-news .hero-sub {
        max-width: 760px;
    }
}

@media (max-width: 640px) {
    body.page-news .hero {
        min-height: auto;
        padding: 116px 0 64px;
    }

    body.page-news .hero-meta-row {
        margin-bottom: 42px;
    }

    body.page-news .hero h1 {
        font-size: clamp(48px, 16vw, 70px);
    }

    body.page-news .hero-divider {
        margin: 46px 0 30px;
    }

    body.page-news .hero-divider-line {
        width: 72px;
    }

    body.page-news .hero-sub {
        font-size: 18px;
        margin-bottom: 40px;
    }

    body.page-news .hero-actions .btn {
        width: 100%;
    }
}

/* ============ END NEWS PAGE STYLES ============ */


/* ============ ARTICLE PAGE STYLES ============ */
body.page-article {
    --green: var(--teal);
    --green-deep: var(--teal);
    --green-bright: var(--teal);
    --mint: #d8f7ec;
    --mint-soft: #e8fbf4;
    --cream: var(--paper);
    --peach: #fff2df;
    --lemon: var(--yellow-soft);
    --amber: var(--yellow);
    --ink: #101219;
    --ink-soft: #242A39;
    --ink-mid: #323848;
    --slate: #4d5565;
    --muted: #6a7280;
    --line: #e1e4ea;
    --bg: var(--paper);
    --card: #ffffff;
    --card-dark: var(--extra-dark);
    --radius-lg: 22px;
    --radius-md: 14px;
    --radius-sm: 10px;
    --shadow-card: 0 1px 0 rgba(14, 20, 17, 0.04), 0 8px 24px -12px rgba(14, 20, 17, 0.08);
    --shadow-hover: 0 1px 0 rgba(14, 20, 17, 0.04), 0 24px 48px -20px rgba(14, 20, 17, 0.18);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.page-article * {
    box-sizing: border-box;
}

body.page-article button {
    font-family: inherit;
}

body.page-article .serif-italic {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.01em;
}

body.page-article .serif {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.015em;
}

body.page-article .avatar-blue {
    background: linear-gradient(135deg, #5fb1ff, #2e8eff);
}

body.page-article .avatar-green {
    background: linear-gradient(135deg, #00d97e, #00a85a);
}

body.page-article .avatar-purple {
    background: linear-gradient(135deg, #b78cff, #8a5aff);
}

body.page-article .avatar-coral {
    background: linear-gradient(135deg, #ff8a5b, #ff6b3d);
}

body.page-article .author-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: white;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

body.page-article .author-info {
    line-height: 1.25;
}

body.page-article .author-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
}

body.page-article .author-role {
    font-size: 12px;
    color: var(--muted);
}

/* article grid */
body.page-article .article-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

body.page-article .article-card {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-card);
    transition: transform .25s, box-shadow .25s, border-color .25s;
}

body.page-article .article-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    border-color: rgba(0, 184, 107, 0.25);
}

body.page-article .article-img {
    height: 180px;
    position: relative;
    overflow: hidden;
}

body.page-article .article-cat {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: white;
}

body.page-article .article-body {
    padding: 22px 24px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

body.page-article .article-date {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 8px;
    font-weight: 500;
}

body.page-article .article-title h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 21px;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: 12px;
    flex: 0;
}

body.page-article .article-title em {
    font-style: italic;
    color: var(--green-deep);
}

body.page-article .article-excerpt {
    font-size: 14px;
    line-height: 1.55;
    color: var(--slate);
    margin-bottom: 18px;
}

body.page-article .article-card.is-hidden {
    display: none;
}

/* ====== ARTICLE SINGLE ====== */
body.page-article .article-header {
    position: relative;
    padding: 56px 32px 0;
    background: white;
}

body.page-article .article-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 50% 70% at 15% 0%, rgba(0, 217, 126, 0.16) 0%, transparent 60%),
        radial-gradient(ellipse 45% 60% at 90% 5%, rgba(255, 200, 120, 0.32) 0%, transparent 60%),
        linear-gradient(180deg, #fefcf5 0%, #fff8ea 100%);
    mask-image: linear-gradient(180deg, black 0%, black 75%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, black 0%, black 75%, transparent 100%);
    z-index: 0;
    pointer-events: none;
}

body.page-article .article-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(14, 20, 17, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 20, 17, 0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image:
        radial-gradient(ellipse 80% 90% at 50% 30%, black 0%, transparent 80%),
        linear-gradient(180deg, black 0%, black 75%, transparent 100%);
    mask-composite: intersect;
    -webkit-mask-image:
        radial-gradient(ellipse 80% 90% at 50% 30%, black 0%, transparent 80%),
        linear-gradient(180deg, black 0%, black 75%, transparent 100%);
    -webkit-mask-composite: source-in;
    z-index: 1;
    pointer-events: none;
}

body.page-article .article-header-inner {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    padding-bottom: 56px;
}

body.page-article .breadcrumb>div {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 28px;
}

body.page-article .breadcrumb a {
    color: var(--muted);
    text-decoration: none;
    transition: color .15s;
}

body.page-article .breadcrumb a:hover {
    color: var(--ink);
}

body.page-article .breadcrumb .sep {
    opacity: 0.4;
}

body.page-article .breadcrumb .current {
    color: var(--ink);
    font-weight: 500;
}

body.page-article .article-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(0, 217, 126, 0.12);
    border: 1px solid rgba(0, 184, 107, 0.22);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--green-deep);
    margin-bottom: 24px;
    width: fit-content;
}

body.page-article .article-cat-pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
}

body.page-article .article-h1 h1 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(36px, 5vw, 60px);
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin-bottom: 24px;
}

body.page-article .article-h1 em {
    font-style: italic;
    font-weight: 500;
    color: var(--green-deep);
    background: var(--grad-teal-yellow);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 10px;
}

body.page-article .article-lede {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(18px, 1.8vw, 22px);
    line-height: 1.45;
    color: var(--slate);
    letter-spacing: -0.005em;
    margin-bottom: 36px;
}

body.page-article .article-meta-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid rgba(14, 20, 17, 0.1);
    flex-wrap: wrap;
}

body.page-article .article-meta-row .author-avatar {
    width: 44px;
    height: 44px;
    font-size: 16px;
}

body.page-article .article-meta-row .author-name {
    font-size: 15px;
}

body.page-article .article-meta-row .author-role {
    font-size: 13px;
}

body.page-article .article-meta-divider {
    width: 1px;
    height: 28px;
    background: rgba(14, 20, 17, 0.1);
}

body.page-article .article-meta-date time {
    font-size: 13.5px;
    color: var(--ink);
    line-height: 1.4;
}

body.page-article .article-share {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

body.page-article .share-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: white;
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    color: var(--ink-mid);
    cursor: pointer;
    transition: all .15s;
}

body.page-article .share-btn:hover {
    border-color: var(--ink);
    color: var(--ink);
}

body.page-article .share-btn svg {
    width: 16px;
    height: 16px;
}

/* Hero image (visual divider between header and body) */
body.page-article .article-hero-img {
    max-width: 1100px;
    margin: -40px auto 0;
    position: relative;
    z-index: 3;
    height: 380px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(14, 20, 17, 0.06),
        0 24px 60px -20px rgba(14, 20, 17, 0.22),
        0 60px 120px -40px rgba(14, 20, 17, 0.18);
}

body.page-article .article-hero-img.grad-product {
    background:
        radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
        linear-gradient(135deg, #0f1714 0%, #1f4a35 50%, #16352a 100%);
    position: relative;
}

body.page-article .article-hero-img-pattern {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 0%, transparent 75%);
}

body.page-article .article-hero-icon .elementor-icon-wrapper {
    width: 96px;
    height: 96px;
    border-radius: 24px;
    background: linear-gradient(135deg, #00d97e 0%, #00a85a 100%);
    display: grid;
    place-items: center;
    color: white;
    box-shadow: 0 20px 40px -10px rgba(0, 217, 126, 0.4);
}

body.page-article .article-hero-icon .elementor-icon-wrapper i {
    color: #FFFFFF;
}

body.page-article .article-hero-icon svg {
    width: 44px;
    height: 44px;
}

/* ARTICLE BODY (long-form typography) */
body.page-article .article-body-section {
    padding: 0 60px;
}

body.page-article .article-body-inner {
    max-width: 720px;
    margin: 0 auto;
}

body.page-article .article-body-inner p {
    font-size: 18px;
    line-height: 1.75;
    color: var(--ink-soft);
    margin-bottom: 24px;
    font-weight: 400;
}

body.page-article .article-body-inner h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(28px, 3vw, 36px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 56px 0 20px;
}

body.page-article .article-body-inner h2 em {
    font-style: italic;
    color: var(--green-deep);
}

body.page-article .article-body-inner h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 36px 0 14px;
}

body.page-article .article-body-inner a {
    color: var(--green-deep);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 184, 107, 0.4);
    transition: border-color .15s;
}

body.page-article .article-body-inner a:hover {
    border-bottom-color: var(--green-deep);
}

body.page-article .article-body-inner strong {
    color: var(--ink);
    font-weight: 600;
}

body.page-article .article-body-inner em {
    font-style: italic;
}

body.page-article .article-body-inner ul,
body.page-article .article-body-inner ol {
    margin: 24px 0 32px;
    padding-left: 4px;
}

body.page-article .article-body-inner li {
    font-size: 18px;
    line-height: 1.7;
    color: var(--ink-soft);
    margin-bottom: 12px;
    padding-left: 28px;
    position: relative;
    list-style: none;
}

body.page-article .article-body-inner ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: 14px;
    height: 2px;
    background: var(--green);
    border-radius: 2px;
}

body.page-article .article-body-inner ol {
    counter-reset: olist;
}

body.page-article .article-body-inner ol li {
    counter-increment: olist;
}

body.page-article .article-body-inner ol li::before {
    content: counter(olist) '.';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--green-deep);
    font-family: var(--font-display);
    font-weight: 600;
    font-style: italic;
    font-size: 18px;
}

/* Pull quote */
body.page-article .pullquote {
    margin: 56px -32px;
    padding: 40px 56px;
    background:
        radial-gradient(ellipse 50% 60% at 30% 40%, rgba(0, 217, 126, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, #fafaf6 0%, #ffffff 100%);
    border-left: 3px solid var(--green);
    border-radius: 0 16px 16px 0;
    position: relative;
}

body.page-article .pullquote-mark {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 64px;
    line-height: 0;
    color: var(--green);
    opacity: 0.6;
    position: absolute;
    top: 24px;
    left: 22px;
}

body.page-article .pullquote p {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(22px, 2.3vw, 28px);
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 20px;
    text-indent: 28px;
}

body.page-article .pullquote-attr {
    font-size: 14px;
    color: var(--muted);
    font-style: normal;
    font-weight: 500;
    text-indent: 28px;
}

body.page-article .pullquote-attr strong {
    color: var(--ink);
    font-weight: 600;
}

/* Inline callout box */
body.page-article .callout {
    margin: 36px 0;
    padding: 24px 28px;
    background: linear-gradient(160deg, #0f1714 0%, #1a2e22 100%);
    border-radius: 14px;
    color: white;
    position: relative;
    overflow: hidden;
}

body.page-article .callout::before {
    content: '';
    position: absolute;
    right: -50px;
    top: -50px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 217, 126, 0.18) 0%, transparent 70%);
    pointer-events: none;
}

body.page-article .callout-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--green-bright);
    margin-bottom: 10px;
    position: relative;
}

body.page-article .callout-label::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green-bright);
    box-shadow: 0 0 8px var(--green-bright);
}

body.page-article .callout p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.88) !important;
    margin: 0 !important;
    position: relative;
}

body.page-article .callout p strong {
    color: white;
}

/* Tags & share at end of article */
body.page-article .article-end {
    max-width: 720px;
    margin: 56px auto 0;
    padding-top: 36px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

body.page-article .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.page-article .tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: rgba(14, 20, 17, 0.04);
    border-radius: 999px;
    font-size: 12.5px;
    color: var(--ink-mid);
    font-weight: 500;
    text-decoration: none;
    transition: background .15s;
}

body.page-article .tag::before {
    content: '#';
    opacity: 0.4;
    margin-right: 4px;
}

body.page-article .tag:hover {
    background: rgba(14, 20, 17, 0.08);
    color: var(--ink);
}

/* Author bio at end */
body.page-article .author-bio {
    max-width: 720px;
    margin: 48px auto 0;
    padding: 32px;
    background: linear-gradient(160deg, #fafaf6 0%, #ffffff 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 24px;
    align-items: start;
}

body.page-article .author-bio .author-avatar {
    width: 80px;
    height: 80px;
    font-size: 28px;
}

body.page-article .author-bio-label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--green-deep);
    margin-bottom: 8px;
}

body.page-article .author-bio-name {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 24px;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: 4px;
}

body.page-article .author-bio-role {
    font-size: 13.5px;
    color: var(--muted);
    margin-bottom: 14px;
}

body.page-article .author-bio-text {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--slate);
}

/* Related articles section */
body.page-article .related-section {
    padding: 90px 32px;
    background: #fafaf6;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

body.page-article .related-inner {
    max-width: 1240px;
    margin: 0 auto;
}

body.page-article .section-header {
    margin-bottom: 80px;
    max-width: 720px;
}

body.page-article .section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--teal);
    font-weight: 600;
    margin: 0 0 20px;
}

body.page-article .section-tag::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--teal);
}

body.page-article .section-title h2 {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 400;
    color: var(--ink);
    margin: 0 0 24px;
    padding-bottom: 0.08em;
    overflow: visible;
}

body.page-article .section-title em {
    font-style: italic;
    font-weight: 300;
    background: var(--grad-teal-yellow);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 0.2em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

@media (max-width: 1000px) {
    body.page-article .related-section {
        padding: 70px 24px;
    }

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

    body.page-article .article-body-section {
        padding: 70px 24px 56px;
    }
}

@media (max-width: 640px) {
    body.page-article .article-grid {
        grid-template-columns: 1fr;
    }

    body.page-article .article-hero-img {
        margin: -24px 0;
        height: 220px;
    }

    body.page-article .article-hero-icon .elementor-icon-wrapper {
        width: 64px;
        height: 64px;
        border-radius: 16px;
    }

    body.page-article .article-hero-icon svg {
        width: 30px;
        height: 30px;
    }

    body.page-article .article-body-inner p {
        font-size: 17px;
    }

    body.page-article .article-body-inner li {
        font-size: 17px;
    }

    body.page-article .pullquote {
        padding: 28px 22px;
    }

    body.page-article .pullquote-mark {
        font-size: 48px;
        top: 18px;
        left: 12px;
    }

    body.page-article .article-end {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============ END ARTICLE PAGE STYLES ============ */

/* ============ ARTICLE COMPONENT SHELL ============ */
body.page-article a {
    color: inherit;
    text-decoration: none;
}

body.page-article img {
    max-width: 100%;
    display: block;
}

body.page-article .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}

body.page-article .nav {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 1280px;
    background: rgba(251, 251, 253, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(229, 229, 238, 0.8);
    border-radius: 100px;
    padding: 10px 12px 10px 24px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 30px rgba(10, 14, 42, 0.04);
    transition: all 0.3s ease;
}

body.page-article .nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.page-article .nav-logo img {
    width: auto;
    max-width: 150px;
    height: auto;
    display: block;
}

body.page-article .nav-links {
    display: flex;
    gap: 4px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

body.page-article .nav-links a {
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft);
    transition: all 0.2s ease;
}

body.page-article .nav-links a:hover,
body.page-article .nav-links a.active {
    background: rgba(2, 184, 127, 0.12);
    color: var(--teal);
}

body.page-article .nav-cta {
    display: flex;
    gap: 8px;
    align-items: center;
}

body.page-article .article-header {
    padding-top: 136px;
}

body.page-article footer {
    background: var(--extra-dark);
    color: var(--paper);
    padding: 80px 32px 40px;
}

body.page-article footer h3,
body.page-article footer h4,
body.page-article footer p,
body.page-article footer ul,
body.page-article footer li {
    margin: 0;
    padding: 0;
}

body.page-article .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 60px;
}

body.page-article .footer-brand h3 {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 22px;
    color: white;
}

body.page-article .footer-brand h3 img {
    max-width: 200px;
}

body.page-article .footer-brand p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 24px;
    max-width: 320px;
}

body.page-article .footer-contact {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.8;
}

body.page-article .footer-contact strong {
    color: var(--yellow-soft);
    font-weight: 500;
}

body.page-article .footer-col h4 {
    color: var(--yellow-soft);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 20px;
}

body.page-article .footer-contact a,
body.page-article .footer-col a,
body.page-article .footer-bottom-links a {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s;
}

body.page-article .footer-contact a:hover,
body.page-article .footer-col a:hover,
body.page-article .footer-bottom-links a:hover {
    color: white;
}

body.page-article .footer-col ul {
    list-style: none;
}

body.page-article .footer-col li {
    margin-bottom: 10px;
}

body.page-article .footer-col a {
    font-size: 14px;
}

body.page-article .footer-event-title {
    display: block;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
}

body.page-article .footer-event-date {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

body.page-article .footer-bottom {
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

body.page-article .footer-bottom-links {
    display: flex;
    gap: 24px;
}

@media (max-width: 1000px) {
    body.page-article .article-header {
        padding-top: 124px;
    }

    body.page-article .nav-links {
        display: none;
    }

    body.page-article .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}

@media (max-width: 640px) {
    body.page-article .article-header {
        padding-top: 116px;
    }

    body.page-article .nav {
        padding: 14px 20px;
    }

    body.page-article .nav-cta .btn-ghost {
        display: none;
    }

    body.page-article .container {
        padding: 0 24px;
    }

    body.page-article .footer-grid {
        grid-template-columns: 1fr;
    }

    body.page-article .footer-bottom {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    body.page-article footer {
        padding: 60px 24px;
    }

    body.page-article .footer-bottom-links {
        flex-wrap: wrap;
        gap: 14px 20px;
    }
}

/* ============ SHARED CUSTOMER-STYLE HERO ============ */
body.page-news .hero,
body.page-partners .hero,
body.page-company .hero {
    padding: 136px 32px 96px;
    position: relative;
    overflow: hidden;
    min-height: auto;
    display: flex;
    align-items: flex-start;
    background: transparent;
}

body.page-news .hero::before,
body.page-news .hero::after,
body.page-partners .hero::before,
body.page-partners .hero::after,
body.page-company .hero::before,
body.page-company .hero::after {
    content: none;
}

body.page-news .hero-bg,
body.page-partners .hero-bg,
body.page-company .hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 10% 0%, rgba(0, 217, 126, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 50% 70% at 95% 10%, rgba(255, 200, 120, 0.35) 0%, transparent 60%),
        radial-gradient(ellipse 70% 90% at 50% 100%, rgba(255, 240, 180, 0.55) 0%, transparent 65%),
        linear-gradient(180deg, #fefcf5 0%, #fff8ea 100%);
    z-index: 0;
}

body.page-news .hero-grid,
body.page-partners .hero-grid,
body.page-company .hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(14, 20, 17, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 20, 17, 0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    z-index: 1;
    pointer-events: none;
    mask-image: none;
    -webkit-mask-image: none;
}

body.page-news .glow-orb,
body.page-partners .glow-orb,
body.page-company .glow-orb {
    display: none;
}

body.page-news .glow-orb-1,
body.page-partners .glow-orb-1,
body.page-company .glow-orb-1 {
    top: 90px;
    right: 10%;
    width: 300px;
    height: 300px;
    background: var(--orange-soft);
}

body.page-news .glow-orb-2,
body.page-partners .glow-orb-2,
body.page-company .glow-orb-2 {
    bottom: -70px;
    left: 8%;
    width: 360px;
    height: 360px;
    background: var(--teal-soft);
}

body.page-news .glow-orb-3,
body.page-partners .glow-orb-3,
body.page-company .glow-orb-3 {
    display: none;
}

body.page-news .hero-content,
body.page-partners .hero-content,
body.page-company .hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
    max-width: 1000px;
}

body.page-news .hero-meta-row,
body.page-partners .hero-meta-row,
body.page-company .hero-meta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    animation: fade-up 0.8s ease forwards;
    flex-wrap: wrap;
}

body.page-news .hero-tag,
body.page-partners .hero-tag,
body.page-company .hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: #ffffff6e;
    border: 1px solid rgba(14, 20, 17, 0.08);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: var(--teal-dark);
}

body.page-news .hero-tag>div,
body.page-partners .hero-tag>div,
body.page-company .hero-tag>div {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

body.page-news .hero-tag-dot,
body.page-partners .hero-tag-dot,
body.page-company .hero-tag-dot {
    display: inline-flex;
    width: 6px;
    height: 6px;
    background: var(--yellow);
    border-radius: 50%;
    animation: blink 2s ease-in-out infinite;
}

body.page-news .hero h1,
body.page-partners .hero h1,
body.page-company .hero h1 {
    font-family: var(--font-display);
    font-size: clamp(56px, 7vw, 100px);
    line-height: 0.98;
    letter-spacing: -0.03em;
    font-weight: 400;
    color: var(--ink);
    margin: 0;
    animation: fade-up 1s ease 0.1s forwards;
    opacity: 0;
}

body.page-news .hero h1 .line,
body.page-partners .hero h1 .line,
body.page-company .hero h1 .line {
    display: inline;
    position: relative;
}

body.page-news .hero h1 .line-1,
body.page-partners .hero h1 .line-1,
body.page-company .hero h1 .line-1 {
    font-weight: 500;
    font-size: 65px;
}

body.page-news .hero h1 em,
body.page-partners .hero h1 em,
body.page-company .hero h1 em,
body.page-customers .hero h1 em {
    font-style: normal;
    font-weight: 500;
    color: var(--teal-deep);
    background: var(--teal);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 20px;
}

body.page-news .hero-sub,
body.page-partners .hero-sub,
body.page-company .hero-sub {
    font-size: 18px;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 880px;
    margin: 15px auto 36px;
    animation: fade-up 0.8s ease 0.35s forwards;
    opacity: 0;
}

body.page-news .hero-actions,
body.page-partners .hero-actions,
body.page-company .hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0;
    animation: fade-up 0.8s ease 0.45s forwards;
    opacity: 0;
}

body.page-news .hero-actions .btn,
body.page-partners .hero-actions .btn,
body.page-company .hero-actions .btn {
    min-width: 180px;
    justify-content: center;
}

body.page-news .hero-divider,
body.page-partners .hero-divider,
body.page-company .hero-divider {
    display: none;
}

@media (max-width: 1000px) {

    body.page-news .hero,
    body.page-partners .hero,
    body.page-company .hero {
        min-height: auto;
        padding: 124px 0 80px;
    }

    body.page-news .hero h1,
    body.page-partners .hero h1,
    body.page-company .hero h1 {
        font-size: clamp(54px, 10vw, 92px);
    }

    body.page-news .hero-sub,
    body.page-partners .hero-sub,
    body.page-company .hero-sub {
        max-width: 760px;
    }
}

@media (max-width: 640px) {
    body.page-home .ai-card-score {
        bottom: -120px;
    }

    body.page-news .hero,
    body.page-partners .hero,
    body.page-company .hero {
        min-height: auto;
        padding: 116px 0 64px;
    }

    body.page-news .hero-meta-row,
    body.page-partners .hero-meta-row,
    body.page-company .hero-meta-row {
        margin-bottom: 42px;
    }

    body.page-news .hero h1,
    body.page-partners .hero h1,
    body.page-company .hero h1 {
        font-size: clamp(48px, 16vw, 70px);
    }

    body.page-news .hero-sub,
    body.page-partners .hero-sub,
    body.page-company .hero-sub {
        font-size: 18px;
        margin-bottom: 40px;
    }

    body.page-news .hero-actions .btn,
    body.page-partners .hero-actions .btn,
    body.page-company .hero-actions .btn {
        width: 100%;
    }
}

/* ============ CONTACT PAGE STYLES ============ */
body.page-contact {
    --green: var(--teal);
    --green-deep: var(--teal);
    --green-bright: var(--teal);
    --mint: #d8f7ec;
    --mint-soft: #e8fbf4;
    --cream: var(--paper);
    --peach: #fff2df;
    --lemon: var(--yellow-soft);
    --amber: var(--yellow);
    --ink: #101219;
    --ink-soft: #242A39;
    --ink-mid: #323848;
    --slate: #4d5565;
    --muted: #6a7280;
    --line: #e1e4ea;
    --bg: var(--paper);
    --card: #ffffff;
    --card-dark: var(--extra-dark);
    --radius-lg: 22px;
    --radius-md: 14px;
    --radius-sm: 10px;
    --shadow-card: 0 1px 0 rgba(14, 20, 17, 0.04), 0 8px 24px -12px rgba(14, 20, 17, 0.08);
    --shadow-hover: 0 1px 0 rgba(14, 20, 17, 0.04), 0 24px 48px -20px rgba(14, 20, 17, 0.18);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.page-contact * {
    box-sizing: border-box;
}

body.page-contact button,
body.page-contact input,
body.page-contact select,
body.page-contact textarea {
    font-family: inherit;
}

body.page-contact .serif-italic {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.01em;
}

body.page-contact .serif {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.015em;
}

body.page-contact .section {
    max-width: 1240px;
    margin: 0 auto;
    padding: 110px 32px;
}

body.page-contact .form-row-spaced {
    margin-top: 14px;
}

body.page-contact .checkbox-item-sub {
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
}

body.page-contact .faq-title {
    margin-left: auto;
    margin-right: auto;
}

/* ========== HERO ========== */
body.page-contact .hero {
    padding: 136px 32px 96px;
    position: relative;
    overflow: hidden;
    min-height: auto;
    display: flex;
    align-items: flex-start;
    background: transparent;
}

body.page-contact .hero::before,
body.page-contact .hero::after {
    content: none;
}

body.page-contact .hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 10% 0%, rgba(0, 217, 126, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 50% 70% at 95% 10%, rgba(255, 200, 120, 0.35) 0%, transparent 60%),
        radial-gradient(ellipse 70% 90% at 50% 100%, rgba(255, 240, 180, 0.55) 0%, transparent 65%),
        linear-gradient(180deg, #fefcf5 0%, #fff8ea 100%);
    z-index: 0;
}

body.page-contact .hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(14, 20, 17, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 20, 17, 0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    z-index: 1;
    pointer-events: none;
    mask-image: none;
    -webkit-mask-image: none;
}

body.page-contact .glow-orb {
    display: none;
}

body.page-contact .hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
}

body.page-contact .hero-meta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 36px;
}

body.page-contact .hero-tag>div {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: #ffffff6e;
    border: 1px solid rgba(14, 20, 17, 0.08);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: var(--teal-dark);
}

body.page-contact .hero-tag-dot {
    display: inline-flex;
    width: 6px;
    height: 6px;
    background: var(--yellow);
    border-radius: 50%;
    animation: blink 2s ease-in-out infinite;
}

body.page-contact .hero h1 {
    font-family: var(--font-display);
    font-size: clamp(56px, 7vw, 100px);
    line-height: 0.98;
    letter-spacing: -0.03em;
    color: var(--ink);
    margin: 0 auto;
    max-width: 980px;
}

body.page-contact .hero h1 .line {
    display: block;
    position: relative;
}

body.page-contact .hero h1 .line-1 {
    font-weight: 500;
}

body.page-contact .hero h1 .line-2 {
    font-weight: 500;
}

body.page-contact .hero h1 em {
    font-style: italic;
    font-weight: 500;
    color: var(--teal-deep);
    background: var(--teal);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.page-contact .hero-sub {
    font-size: 18px;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 780px;
    margin: 32px auto 0;
}

body.page-contact .hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 40px;
}

body.page-contact .hero-actions .btn {
    min-width: 180px;
    justify-content: center;
}

@media (max-width: 1000px) {
    body.page-contact .hero {
        min-height: auto;
        padding: 124px 32px 80px;
    }

    body.page-contact .hero h1 {
        font-size: clamp(54px, 10vw, 92px);
    }

    body.page-contact .hero-sub {
        max-width: 760px;
    }
}

@media (max-width: 640px) {
    body.page-contact .hero {
        min-height: auto;
        padding: 116px 0 64px;
    }

    body.page-contact .hero-meta-row {
        margin-bottom: 42px;
    }

    body.page-contact .hero h1 {
        font-size: clamp(48px, 16vw, 70px);
    }

    body.page-contact .hero-sub {
        font-size: 18px;
        margin-bottom: 40px;
    }

    body.page-contact .hero-actions .btn {
        width: 100%;
    }

    body.page-contact .section {
        padding: 80px 24px;
    }
}

body.page-contact .section-header {
    margin-bottom: 80px;
    max-width: 720px;
}

body.page-contact .section-header-centered {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

body.page-contact .section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--teal);
    font-weight: 700;
    margin-bottom: 24px;
}

body.page-contact .section-tag::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--teal);
}

body.page-contact .section-title h2 {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 500;
    color: var(--ink);
    margin: 0;
}

body.page-contact .section-title em {
    font-style: italic;
    font-weight: 300;
    background: var(--grad-teal-yellow);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 10px;
}

body.page-contact .section-sub {
    font-size: 18px;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 600px;
    margin: 20px 0 0;
}

body.page-contact .section-header-centered .section-tag {
    justify-content: center;
}

body.page-contact .section-header-centered .section-sub {
    margin-left: auto;
    margin-right: auto;
}

/* ====== CONTACT PAGE ====== */
/* main 2-col layout: form + sidebar */
body.page-contact .contact-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 40px;
    align-items: start;
}

/* FORM CARD */
body.page-contact .contact-form-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 44px 44px 40px;
    box-shadow: var(--shadow-card);
}

body.page-contact .contact-form-card .section-tag {
    margin-bottom: 14px;
}

body.page-contact .contact-form-card h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -0.018em;
    color: var(--ink);
    margin-bottom: 8px;
}

body.page-contact .contact-form-card h2 em {
    font-style: italic;
    color: var(--green-deep);
}

body.page-contact .contact-form-card .form-intro {
    color: var(--slate);
    font-size: 15px;
    line-height: 1.55;
    margin-bottom: 32px;
}

body.page-contact .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

body.page-contact .form-row.full {
    grid-template-columns: 1fr;
}

body.page-contact .form-row.thirds {
    grid-template-columns: 1fr 1fr 1fr;
}

body.page-contact .form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

body.page-contact .form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: 0.01em;
}

body.page-contact .form-label .req {
    color: var(--green-deep);
    margin-left: 3px;
    font-weight: 700;
}

body.page-contact .form-label .hint {
    color: var(--muted);
    font-weight: 400;
    font-size: 12px;
    margin-left: 6px;
    letter-spacing: 0;
}

body.page-contact .form-input,
body.page-contact .form-select,
body.page-contact .form-textarea {
    width: 100%;
    padding: 12px 14px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-family: var(--font-sans);
    font-size: 14.5px;
    color: var(--ink);
    transition: border-color .15s, box-shadow .15s;
}

body.page-contact .form-input::placeholder,
body.page-contact .form-textarea::placeholder {
    color: var(--muted);
    font-style: italic;
}

body.page-contact .form-input:focus,
body.page-contact .form-select:focus,
body.page-contact .form-textarea:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 4px rgba(0, 184, 107, 0.08);
}

body.page-contact .form-textarea {
    min-height: 110px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
}

body.page-contact .form-select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7770' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 38px;
    cursor: pointer;
}

/* Product interest checkbox grid */
body.page-contact .checkbox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 4px;
}

body.page-contact .checkbox-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

body.page-contact .checkbox-item:hover {
    border-color: rgba(0, 184, 107, 0.4);
    background: rgba(0, 217, 126, 0.025);
}

body.page-contact .checkbox-item input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

body.page-contact .checkbox-box {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--line);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: all .15s;
    background: white;
}

body.page-contact .checkbox-box::after {
    content: '';
    width: 9px;
    height: 5px;
    border-left: 2px solid white;
    border-bottom: 2px solid white;
    transform: rotate(-45deg) translate(1px, -1px);
    opacity: 0;
    transition: opacity .12s;
}

body.page-contact .checkbox-item input:checked+.checkbox-box {
    background: var(--green);
    border-color: var(--green);
}

body.page-contact .checkbox-item input:checked+.checkbox-box::after {
    opacity: 1;
}

body.page-contact .checkbox-item input:focus-visible+.checkbox-box {
    box-shadow: 0 0 0 4px rgba(0, 184, 107, 0.18);
}

body.page-contact .checkbox-item-label {
    font-size: 13.5px;
    color: var(--ink-mid);
    line-height: 1.3;
    font-weight: 500;
    transition: color .15s;
}

body.page-contact .checkbox-item input:checked~.checkbox-item-label {
    color: var(--ink);
    font-weight: 600;
}

body.page-contact .checkbox-item.is-all {
    border-style: dashed;
    border-color: rgba(14, 20, 17, 0.2);
}

/* Submit row */
body.page-contact .form-submit-row {
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

body.page-contact .form-submit-row .btn-primary {
    padding: 13px 28px;
    font-size: 15px;
}

body.page-contact .form-privacy {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.4;
    flex: 1;
    min-width: 200px;
}

body.page-contact .form-privacy a {
    color: var(--ink-mid);
    text-decoration: none;
    border-bottom: 1px solid rgba(14, 20, 17, 0.18);
}

body.page-contact .form-privacy a:hover {
    color: var(--green-deep);
    border-bottom-color: var(--green);
}

/* ====== SIDEBAR ====== */
body.page-contact .contact-sidebar {
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: sticky;
    top: 112px;
    align-self: start;
}

/* Dark "call us" card */
body.page-contact .sidebar-call {
    background: linear-gradient(160deg, #0f1714 0%, #1a2e22 100%);
    color: white;
    border-radius: var(--radius-lg);
    padding: 28px 28px;
    position: relative;
    overflow: hidden;
}

body.page-contact .sidebar-call::before {
    content: '';
    position: absolute;
    right: -50px;
    top: -50px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 217, 126, 0.18) 0%, transparent 70%);
    pointer-events: none;
}

body.page-contact .sidebar-call-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--green-bright);
    margin-bottom: 14px;
    position: relative;
}

body.page-contact .sidebar-call-eyebrow::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green-bright);
    box-shadow: 0 0 8px var(--green-bright);
    animation: pulse 1.6s ease-in-out infinite;
}

body.page-contact .sidebar-call h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin-bottom: 16px;
    margin-top: 20px;
    color: white;
    position: relative;
}

body.page-contact .sidebar-call h3 em {
    font-style: italic;
    color: var(--green-bright);
}

body.page-contact .sidebar-call .phone-num a span {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: white;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 4px;
    position: relative;
}

body.page-contact .sidebar-call .phone-num em {
    font-style: italic;
    color: var(--green-bright);
}

body.page-contact .sidebar-call .phone-sub {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
    position: relative;
    margin-bottom: 18px;
}

body.page-contact .sidebar-call .channels {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

body.page-contact .sidebar-call .channel {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color .15s;
}

body.page-contact .sidebar-call .channel:hover {
    color: var(--green-bright);
}

body.page-contact .sidebar-call .channel-icon .elementor-icon-wrapper {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
}

body.page-contact .sidebar-call .channel-icon .elementor-icon-wrapper i {
    font-size: 15px;
}

body.page-contact .sidebar-call .channel:hover .channel-icon .elementor-icon-wrapper {
    background: rgba(0, 217, 126, 0.15);
    color: var(--green-bright);
}

body.page-contact .sidebar-call .channel-icon svg {
    width: 15px;
    height: 15px;
}

body.page-contact .sidebar-call .channel-text strong {
    color: white;
    font-weight: 600;
    display: block;
    font-size: 13.5px;
}

body.page-contact .sidebar-call .channel-text span {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
}

/* Light "what happens next" card */
body.page-contact .sidebar-steps {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 28px;
}

body.page-contact .sidebar-steps h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: 6px;
}

body.page-contact .sidebar-steps h3 em {
    font-style: italic;
    color: var(--green-deep);
}

body.page-contact .sidebar-steps-intro {
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.5;
    margin-bottom: 22px;
}

body.page-contact .step-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

body.page-contact .step-item {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 14px;
    align-items: flex-start;
    position: relative;
}

body.page-contact .step-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 15px;
    top: 36px;
    bottom: -18px;
    width: 1.5px;
    background: linear-gradient(180deg, rgba(0, 184, 107, 0.3) 0%, rgba(0, 184, 107, 0.05) 100%);
}

body.page-contact .step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00d97e 0%, #00a85a 100%);
    color: white;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 4px 10px -4px rgba(0, 217, 126, 0.5);
    z-index: 1;
}

body.page-contact .step-content h4 {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.25;
    margin-bottom: 4px;
}

body.page-contact .step-content p {
    font-size: 13px;
    color: var(--slate);
    line-height: 1.5;
}

body.page-contact .step-content .step-time {
    display: inline-block;
    font-family: var(--font-display);
    font-style: italic;
    color: var(--green-deep);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
}

/* ====== TRUST STRIP ====== */
body.page-contact .trust-strip-section {
    padding: 70px 32px;
    background: #fafaf6;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

body.page-contact .trust-strip-inner {
    max-width: 1240px;
    margin: 0 auto;
    text-align: center;
}

body.page-contact .trust-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--green-deep);
    margin-bottom: 14px;
}

body.page-contact .trust-strip-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(22px, 2.4vw, 28px);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: 36px;
}

body.page-contact .trust-strip-title em {
    font-style: italic;
    color: var(--green-deep);
}

body.page-contact .trust-logos {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-bottom: 36px;
}

body.page-contact .trust-logo {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #f4f4ee 0%, #ebebe2 100%);
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: rgba(14, 20, 17, 0.32);
    font-family: 'Inter', monospace, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    position: relative;
}

body.page-contact .trust-logo::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(14, 20, 17, 0.04);
    pointer-events: none;
}

body.page-contact .trust-divider {
    height: 1px;
    background: var(--line);
    max-width: 480px;
    margin: 36px auto;
}

body.page-contact .trust-awards {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 28px;
}

body.page-contact .trust-award {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
}

body.page-contact .trust-award-medal {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd54f 0%, #f5a623 100%);
    color: #4a2e00;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

body.page-contact .trust-award-medal svg {
    width: 18px;
    height: 18px;
}

body.page-contact .trust-award-year {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--green-deep);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 4px;
}

body.page-contact .trust-award-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.25;
}

body.page-contact .trust-award-issuer {
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 1px;
}

/* ====== OTHER CONTACT PATHS ====== */
body.page-contact .other-paths-section {
    padding: 120px 32px;
    max-width: 1240px;
    margin: 0 auto;
}

body.page-contact .other-paths-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

body.page-contact .path-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px 28px 34px;
    transition: transform .25s, box-shadow .25s, border-color .25s;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    min-height: 230px;
}

body.page-contact .path-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    border-color: rgba(0, 184, 107, 0.25);
}

body.page-contact .path-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: white;
    flex: 0 0 auto;
}

body.page-contact .path-icon i {
    color: #FFFFFF;
    font-size: 18px;
}

body.page-contact .path-icon svg {
    width: 20px;
    height: 20px;
}

body.page-contact .path-card-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 22px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--line);
}

body.page-contact .path-icon.icon-mailing {
    background: linear-gradient(135deg, #3ad79f 0%, #20b58f 100%);
}

body.page-contact .path-icon.icon-info {
    background: linear-gradient(135deg, #b8ff35 0%, #1ec878 100%);
}

body.page-contact .path-icon.icon-sales {
    background: linear-gradient(135deg, #ff5f75 0%, #ffbd42 100%);
}

body.page-contact .path-icon.icon-client {
    background: linear-gradient(135deg, #3477ff 0%, #0bb6e8 100%);
}

body.page-contact .path-card h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0;
}

body.page-contact .path-card h3 em {
    font-style: italic;
    color: var(--green-deep);
}

body.page-contact .path-kicker {
    margin-top: 4px;
    color: var(--teal);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body.page-contact .path-subtitle {
    margin-top: 6px;
    color: var(--slate);
    font-size: 14px;
    line-height: 1.35;
    font-weight: 500;
}

body.page-contact .path-list {
    display: grid;
    gap: 18px;
    margin-top: 0;
}

body.page-contact .path-list-item,
body.page-contact .path-action {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    color: var(--ink-soft);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
    text-decoration: none;
}

body.page-contact .path-list-icon {
    width: 16px;
    height: 16px;
    color: var(--teal);
    flex: 0 0 auto;
    margin-top: 3px;
}

body.page-contact .path-list-item:hover,
body.page-contact .path-action:hover {
    color: var(--teal-dark);
}

body.page-contact .path-card-desc {
    color: var(--slate);
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 18px;
    flex: 1;
}

body.page-contact .path-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--green-deep);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

body.page-contact .path-link::after {
    content: '→';
    transition: transform .2s;
}

body.page-contact .path-card:hover .path-link::after {
    transform: translateX(4px);
}

body.page-contact .path-link-secondary {
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--muted);
}

body.page-contact .path-link-secondary strong {
    color: var(--ink);
    font-weight: 600;
}

@media (max-width: 1000px) {
    body.page-contact .other-paths-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    body.page-contact .other-paths-grid {
        grid-template-columns: 1fr;
    }

    body.page-contact .path-card {
        min-height: 0;
    }
}

/* ====== FAQ ====== */
body.page-contact .faq-section {
    padding: 100px 32px;
    background: rgba(230, 230, 230, 0.34);
}

body.page-contact .faq-inner {
    max-width: 880px;
    margin: 0 auto;
}

body.page-contact .faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 36px;
}

body.page-contact .faq-item {
    background: white;
    border: 1px solid var(--line);
    border-radius: 14px;
    transition: border-color .15s, box-shadow .15s;
}

body.page-contact .faq-item[open] {
    border-color: rgba(0, 184, 107, 0.25);
    box-shadow: 0 1px 0 rgba(14, 20, 17, 0.04), 0 12px 28px -16px rgba(14, 20, 17, 0.14);
}

body.page-contact .faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 22px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ink);
}

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

body.page-contact .faq-item summary em {
    font-style: italic;
    color: var(--green-deep);
}

body.page-contact .faq-item .faq-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--ink-mid);
    transition: all .25s;
}

body.page-contact .faq-item .faq-icon::before,
body.page-contact .faq-item .faq-icon::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 1.5px;
    background: currentColor;
    border-radius: 1px;
    transition: transform .25s;
}

body.page-contact .faq-item .faq-icon {
    position: relative;
}

body.page-contact .faq-item .faq-icon::before {
    transform: rotate(0deg);
}

body.page-contact .faq-item .faq-icon::after {
    transform: rotate(90deg);
}

body.page-contact .faq-item[open] .faq-icon {
    border-color: var(--green);
    color: var(--green-deep);
    background: rgba(0, 217, 126, 0.08);
}

body.page-contact .faq-item[open] .faq-icon::after {
    transform: rotate(0deg);
}

body.page-contact .faq-item .faq-body {
    padding: 0 26px 26px;
    color: var(--slate);
    font-size: 15px;
    line-height: 1.65;
}

body.page-contact .faq-item .faq-body p {
    margin-bottom: 12px;
}

body.page-contact .faq-item .faq-body p:last-child {
    margin-bottom: 0;
}

body.page-contact .faq-item .faq-body strong {
    color: var(--ink);
    font-weight: 600;
}

body.page-contact .faq-item .faq-body a {
    color: var(--green-deep);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 184, 107, 0.3);
}

body.page-contact .faq-item .faq-body a:hover {
    border-bottom-color: var(--green-deep);
}

/* ====== "NOT READY?" ALTERNATIVE CTA ====== */
body.page-contact .alt-cta-section {
    padding: 100px 32px;
}

body.page-contact .alt-cta-inner {
    max-width: 1240px;
    margin: 0 auto;
    text-align: center;
}

body.page-contact .alt-cta-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(28px, 3.5vw, 42px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 14px;
}

body.page-contact .alt-cta-title em {
    font-style: italic;
    color: var(--green-deep);
}

body.page-contact .alt-cta-sub {
    color: var(--slate);
    font-size: 16px;
    margin-bottom: 40px;
}

body.page-contact .alt-cta-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}

body.page-contact .alt-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    text-decoration: none;
    font-weight: 500;
    font-size: 14.5px;
    transition: all .15s;
}

body.page-contact .alt-cta-link:hover {
    border-color: var(--ink);
    background: var(--ink);
    color: white;
}

body.page-contact .alt-cta-link::after {
    content: '→';
    opacity: 0.5;
    transition: transform .2s, opacity .2s;
}

body.page-contact .alt-cta-link:hover::after {
    opacity: 1;
    transform: translateX(3px);
}

@media (max-width: 1000px) {
    body.page-contact .contact-grid {
        grid-template-columns: 1fr;
    }

    body.page-contact .contact-sidebar {
        position: static;
        top: auto;
    }
}

@media (max-width: 640px) {

    /* Contact mobile */
    body.page-contact .form-row,
    body.page-contact .form-row.thirds {
        grid-template-columns: 1fr;
    }

    body.page-contact .checkbox-grid {
        grid-template-columns: 1fr;
    }

    body.page-contact .trust-logos {
        grid-template-columns: repeat(3, 1fr);
    }

    body.page-contact .trust-awards {
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }

    body.page-contact .form-submit-row {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    body.page-contact .form-submit-row .btn-primary {
        width: 100%;
        justify-content: center;
    }

    body.page-contact .faq-item summary {
        padding: 18px 20px;
        font-size: 16px;
    }

    body.page-contact .faq-item .faq-body {
        padding: 0 20px 22px;
    }

    body.page-contact .alt-cta-links {
        flex-direction: column;
    }

    body.page-contact .alt-cta-link {
        justify-content: center;
    }

    body.page-contact .contact-form-card {
        padding: 30px;
    }

    body.page-contact .contact-form-card h2 {
        font-size: 26px;
    }
}

body.page-contact .reveal {
    animation: fadeUp .8s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}

body.page-contact .reveal-1 {
    animation-delay: .05s;
}

body.page-contact .reveal-2 {
    animation-delay: .15s;
}

/* ============ END CONTACT PAGE STYLES ============ */

/* ============ CONTACT COMPONENT SHELL ============ */
body.page-contact a {
    color: inherit;
    text-decoration: none;
}

body.page-contact img {
    max-width: 100%;
    display: block;
}

body.page-contact .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}

body.page-contact .nav {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 1280px;
    background: rgba(251, 251, 253, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(229, 229, 238, 0.8);
    border-radius: 100px;
    padding: 10px 12px 10px 24px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 30px rgba(10, 14, 42, 0.04);
    transition: all 0.3s ease;
}

body.page-contact .nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.page-contact .nav-logo img {
    width: auto;
    max-width: 150px;
    height: auto;
    display: block;
}

body.page-contact .nav-links {
    display: flex;
    gap: 4px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

body.page-contact .nav-links a {
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft);
    transition: all 0.2s ease;
}

body.page-contact .nav-links a:hover,
body.page-contact .nav-links a.active {
    background: rgba(2, 184, 127, 0.12);
    color: var(--teal);
}

body.page-contact .nav-cta {
    display: flex;
    gap: 8px;
    align-items: center;
}


body.page-contact footer {
    background: var(--extra-dark);
    color: var(--paper);
    padding: 80px 32px 40px;
}

body.page-contact footer h3,
body.page-contact footer h4,
body.page-contact footer p,
body.page-contact footer ul,
body.page-contact footer li {
    margin: 0;
    padding: 0;
}

body.page-contact .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 60px;
}

body.page-contact .footer-brand h3 {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 22px;
    color: white;
}

body.page-contact .footer-brand h3 img {
    max-width: 200px;
}

body.page-contact .footer-brand p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 24px;
    max-width: 320px;
}

body.page-contact .footer-contact {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.8;
}

body.page-contact .footer-contact strong {
    color: var(--yellow-soft);
    font-weight: 500;
}

body.page-contact .footer-col h4 {
    color: var(--yellow-soft);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 20px;
}

body.page-contact .footer-contact a,
body.page-contact .footer-col a,
body.page-contact .footer-bottom-links a {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s;
}

body.page-contact .footer-contact a:hover,
body.page-contact .footer-col a:hover,
body.page-contact .footer-bottom-links a:hover {
    color: white;
}

body.page-contact .footer-col ul {
    list-style: none;
}

body.page-contact .footer-col li {
    margin-bottom: 10px;
}

body.page-contact .footer-col a {
    font-size: 14px;
}

body.page-contact .footer-event-title {
    display: block;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
}

body.page-contact .footer-event-date {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

body.page-contact .footer-bottom {
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

body.page-contact .footer-bottom-links {
    display: flex;
    gap: 24px;
}

@media (max-width: 1000px) {

    body.page-contact .nav-links {
        display: none;
    }

    body.page-contact .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}

@media (max-width: 640px) {

    body.page-contact .nav {
        padding: 14px 20px;
    }

    body.page-contact .nav-cta .btn-ghost {
        display: none;
    }

    body.page-contact .container {
        padding: 0 24px;
    }

    body.page-contact .footer-grid {
        grid-template-columns: 1fr;
    }

    body.page-contact .footer-bottom {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    body.page-contact footer {
        padding: 60px 24px;
    }

    body.page-contact .footer-bottom-links {
        flex-wrap: wrap;
        gap: 14px 20px;
    }
}


/* ============ CAREERS PAGE STYLES ============ */
body.page-careers {
    --green: var(--teal);
    --green-deep: var(--teal-dark);
    --green-bright: var(--teal-soft);
    --mint: #d8f7ec;
    --mint-soft: #ecfbf6;
    --cream: var(--paper);
    --peach: var(--orange-soft);
    --lemon: var(--yellow-soft);
    --amber: var(--yellow);
    --ink: #101219;
    --ink-soft: #242A39;
    --ink-mid: #2f3543;
    --slate: #4f5968;
    --muted: #6f7887;
    --line: #e5e7eb;
    --bg: var(--paper);
    --card: #ffffff;
    --card-dark: var(--extra-dark);
    --radius-lg: 22px;
    --radius-md: 14px;
    --radius-sm: 10px;
    --shadow-card: 0 1px 0 rgba(14, 20, 17, 0.04), 0 8px 24px -12px rgba(14, 20, 17, 0.08);
    --shadow-hover: 0 1px 0 rgba(14, 20, 17, 0.04), 0 24px 48px -20px rgba(14, 20, 17, 0.18);
}

body.page-careers * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body.page-careers {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.page-careers .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    width: 100%;
}

body.page-careers .serif-italic {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.01em;
}

body.page-careers .serif {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.015em;
}

body.page-careers

/* ========== NAV ========== */
.nav-wrap {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(14, 20, 17, 0.05);
}

body.page-careers .nav {
    max-width: 1240px;
    margin: 0 auto;
    padding: 16px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

body.page-careers .logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-decoration: none;
}

body.page-careers .logo-mark {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: linear-gradient(135deg, #00d97e 0%, #00b86b 100%);
    display: grid;
    place-items: center;
    color: white;
    font-weight: 700;
    font-size: 13px;
    font-family: var(--font-sans);
}

body.page-careers .nav-links {
    display: flex;
    gap: 32px;
    list-style: none;
}

body.page-careers .nav-links a {
    color: var(--ink);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 500;
    transition: color .2s;
}

body.page-careers .nav-links a:hover {
    color: var(--green-deep);
}

body.page-careers .nav-links a.active {
    color: var(--green-deep);
}

body.page-careers .nav-right {
    display: flex;
    align-items: center;
    gap: 18px;
}

body.page-careers .nav-signin {
    font-size: 14.5px;
    color: var(--ink);
    text-decoration: none;
    font-weight: 500;
}


body.page-careers

/* ========== HERO ========== */
.hero {
    position: relative;
    padding: 72px 32px 90px;
    background: white;
}

body.page-careers

/* colored gradient — fills full hero with soft fade at bottom */
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        /* Mint wash on the LEFT */
        radial-gradient(ellipse 65% 95% at 0% 35%, rgba(0, 217, 126, 0.22) 0%, transparent 62%),
        /* Peach wash on the RIGHT */
        radial-gradient(ellipse 60% 95% at 100% 40%, rgba(255, 195, 130, 0.40) 0%, transparent 62%),
        /* Soft cream at the bottom */
        radial-gradient(ellipse 70% 40% at 50% 100%, rgba(255, 240, 200, 0.28) 0%, transparent 70%),
        /* Base */
        linear-gradient(180deg, #fefcf5 0%, #fff8ea 100%);
    /* soften the bottom edge so it fades into the next section */
    mask-image: linear-gradient(180deg, black 0%, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, black 0%, black 80%, transparent 100%);
    z-index: 0;
    pointer-events: none;
}

body.page-careers

/* subtle grid texture overlay */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(14, 20, 17, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 20, 17, 0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image:
        radial-gradient(ellipse 80% 90% at 50% 40%, black 0%, transparent 80%),
        linear-gradient(180deg, black 0%, black 80%, transparent 100%);
    mask-composite: intersect;
    -webkit-mask-image:
        radial-gradient(ellipse 80% 90% at 50% 40%, black 0%, transparent 80%),
        linear-gradient(180deg, black 0%, black 80%, transparent 100%);
    -webkit-mask-composite: source-in;
    z-index: 1;
    pointer-events: none;
}

body.page-careers .hero-inner {
    max-width: 1240px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    text-align: center;
}

body.page-careers .pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 10px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(14, 20, 17, 0.08);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-soft);
    margin-bottom: 28px;
}

body.page-careers .pill-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--green);
    display: grid;
    place-items: center;
    color: white;
    font-size: 10px;
    font-weight: 700;
}

body.page-careers .pill .label {
    color: var(--muted);
}

body.page-careers .pill .sep {
    color: rgba(14, 20, 17, 0.15);
}

body.page-careers .pill .strong {
    color: var(--ink);
    font-weight: 600;
}

body.page-careers h1.hero-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(48px, 6.2vw, 92px);
    line-height: 1.0;
    letter-spacing: -0.028em;
    color: var(--ink);
    margin: 0 auto 36px;
    max-width: 16ch;
}

body.page-careers h1.hero-title em {
    font-style: italic;
    font-weight: 500;
    color: var(--green-deep);
    background: linear-gradient(120deg, #00b86b 0%, #00d97e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.page-careers .hero-ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 72px;
}

body.page-careers

/* ========== HORIZONTAL PRODUCT MOCK ========== */
.hero-mock-wrap {
    position: relative;
    z-index: 2;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 0 90px;
}

body.page-careers .hero-mock {
    position: relative;
    background: white;
    border-radius: 20px 20px 0 0;
    border: 1px solid rgba(14, 20, 17, 0.06);
    border-bottom: none;
    box-shadow:
        0 -1px 0 rgba(14, 20, 17, 0.04),
        0 30px 70px -25px rgba(14, 20, 17, 0.22),
        0 70px 140px -40px rgba(14, 20, 17, 0.18);
    overflow: hidden;
}

body.page-careers

/* a thin gradient strip at the top edge to feel like a "real" app window */
.hero-mock::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #00d97e 0%, #00b86b 30%, #ffd54f 70%, #f5a623 100%);
}

body.page-careers .hero-mock-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #fbfbf7 0%, #ffffff 100%);
}

body.page-careers .mock-dots {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

body.page-careers .mock-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

body.page-careers .mock-dot:nth-child(1) {
    background: #ff5f57;
}

body.page-careers .mock-dot:nth-child(2) {
    background: #febc2e;
}

body.page-careers .mock-dot:nth-child(3) {
    background: #28c840;
}

body.page-careers .mock-url {
    flex: 1;
    max-width: 420px;
    padding: 6px 14px;
    background: rgba(14, 20, 17, 0.04);
    border-radius: 8px;
    font-size: 12px;
    color: var(--muted);
    font-family: var(--font-sans);
    display: flex;
    align-items: center;
    gap: 8px;
}

body.page-careers .mock-url::before {
    content: '';
    width: 10px;
    height: 10px;
    border: 1.5px solid var(--green);
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

body.page-careers .mock-url strong {
    color: var(--ink);
    font-weight: 600;
}

body.page-careers .mock-badge-ai {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    background: var(--ink);
    color: white;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    flex-shrink: 0;
}

body.page-careers .mock-badge-ai::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green-bright);
    box-shadow: 0 0 8px var(--green-bright);
    animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

/* 3-column app body: sidebar / candidates / AI summary */
body.page-careers .mock-body {
    display: grid;
    grid-template-columns: 200px 1fr 320px;
    min-height: 360px;
}

body.page-careers

/* SIDEBAR */
.mock-sidebar {
    padding: 22px 18px;
    border-right: 1px solid var(--line);
    background: #fafaf6;
}

body.page-careers .mock-side-section {
    margin-bottom: 22px;
}

body.page-careers .mock-side-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
    padding-left: 8px;
}

body.page-careers .mock-side-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--ink-mid);
    margin-bottom: 2px;
}

body.page-careers .mock-side-item.is-active {
    background: white;
    color: var(--ink);
    font-weight: 600;
    box-shadow: 0 1px 0 rgba(14, 20, 17, 0.04), 0 4px 12px -6px rgba(14, 20, 17, 0.08);
}

body.page-careers .mock-side-item .mark {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    flex-shrink: 0;
}

body.page-careers .mark.m-green {
    background: linear-gradient(135deg, #00d97e, #00a85a);
}

body.page-careers .mark.m-orange {
    background: linear-gradient(135deg, #ffb547, #f5912a);
}

body.page-careers .mark.m-blue {
    background: linear-gradient(135deg, #5fb1ff, #2e8eff);
}

body.page-careers .mark.m-purple {
    background: linear-gradient(135deg, #b78cff, #8a5aff);
}

body.page-careers .mark.m-coral {
    background: linear-gradient(135deg, #ff8a5b, #ff6b3d);
}

body.page-careers .mark.m-teal {
    background: linear-gradient(135deg, #5ce0c8, #2bb89e);
}

body.page-careers .mock-side-count {
    margin-left: auto;
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
}

body.page-careers

/* CANDIDATES (center) */
.mock-main {
    padding: 22px 26px;
}

body.page-careers .mock-main-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

body.page-careers .mock-main-title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
}

body.page-careers .mock-main-title em {
    font-style: italic;
    color: var(--green-deep);
    font-weight: 500;
    margin-left: 4px;
}

body.page-careers .mock-main-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 11.5px;
    color: var(--ink-mid);
    font-weight: 500;
}

body.page-careers .mock-main-filter::after {
    content: '▾';
    color: var(--muted);
    font-size: 9px;
}

body.page-careers .candidate-row {
    display: grid;
    grid-template-columns: 36px 1fr auto auto;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 4px;
    transition: background .3s;
}

body.page-careers .candidate-row.is-active {
    background: linear-gradient(90deg, rgba(0, 217, 126, 0.09) 0%, transparent 100%);
    position: relative;
}

body.page-careers .candidate-row.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--green);
    border-radius: 0 2px 2px 0;
}

body.page-careers .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: white;
    font-size: 12.5px;
    font-weight: 600;
    font-family: var(--font-sans);
}

body.page-careers .avatar.a1 {
    background: linear-gradient(135deg, #5fb1ff, #2e8eff);
}

body.page-careers .avatar.a2 {
    background: linear-gradient(135deg, #ff8a5b, #ff6b3d);
}

body.page-careers .avatar.a3 {
    background: linear-gradient(135deg, #b78cff, #8a5aff);
}

body.page-careers .avatar.a4 {
    background: linear-gradient(135deg, #5ce0c8, #2bb89e);
}

body.page-careers .candidate-info {
    min-width: 0;
}

body.page-careers .candidate-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
    margin-bottom: 3px;
}

body.page-careers .candidate-meta {
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.2;
}

body.page-careers .score {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.02em;
}

body.page-careers .score em {
    font-style: italic;
    color: var(--green-deep);
    font-size: 11.5px;
    font-weight: 500;
    margin-left: 4px;
}

body.page-careers .bar {
    width: 72px;
    height: 5px;
    background: rgba(14, 20, 17, 0.06);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

body.page-careers .bar::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, #00d97e, #00b86b);
    border-radius: 999px;
    width: var(--w, 80%);
}

body.page-careers

/* RIGHT RAIL: AI Candidate Summary */
.mock-ai-rail {
    background: linear-gradient(160deg, #0f1714 0%, #1a2e22 100%);
    color: white;
    padding: 22px 22px;
    position: relative;
    overflow: hidden;
}

body.page-careers .mock-ai-rail::before {
    content: '';
    position: absolute;
    right: -50px;
    top: -50px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 217, 126, 0.22) 0%, transparent 70%);
    pointer-events: none;
}

body.page-careers .ai-rail-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--green-bright);
    margin-bottom: 12px;
    position: relative;
}

body.page-careers .ai-rail-label::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green-bright);
    box-shadow: 0 0 8px var(--green-bright);
}

body.page-careers .ai-rail-name {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    color: white;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
    position: relative;
}

body.page-careers .ai-rail-role {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 16px;
    position: relative;
}

body.page-careers .ai-rail-strong {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(0, 217, 126, 0.18);
    color: var(--green-bright);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 12px;
    position: relative;
}

body.page-careers .ai-rail-text {
    font-size: 12.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 16px;
    position: relative;
}

body.page-careers .ai-rail-text strong {
    color: white;
    font-weight: 600;
}

body.page-careers .ai-rail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    position: relative;
}

body.page-careers .ai-rail-tag {
    padding: 4px 9px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

body.page-careers

/* ====== PARTNERS HERO MOCK — integrations dashboard ====== */
.partner-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

body.page-careers .partner-mini {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 10px;
    transition: border-color .2s, transform .2s;
}

body.page-careers .partner-mini:hover {
    border-color: rgba(0, 184, 107, 0.25);
    transform: translateY(-1px);
}

body.page-careers .partner-mini-mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: white;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

body.page-careers .partner-mini-info {
    min-width: 0;
    flex: 1;
}

body.page-careers .partner-mini-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.page-careers .partner-mini-status {
    font-size: 10.5px;
    color: var(--green-deep);
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 1px;
}

body.page-careers .partner-mini-status::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green-bright);
    flex-shrink: 0;
}

body.page-careers

/* "add new" tile in the partner grid */
.partner-mini.is-add {
    background: transparent;
    border-style: dashed;
    border-color: rgba(14, 20, 17, 0.12);
    color: var(--muted);
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
}

body.page-careers .partner-mini.is-add::before {
    content: '+';
    font-size: 18px;
    margin-right: 4px;
    line-height: 1;
}

body.page-careers

/* Right rail — system status summary (replaces ai-rail) */
.mock-status-rail {
    background: linear-gradient(160deg, #0f1714 0%, #1a2e22 100%);
    color: white;
    padding: 22px 22px;
    position: relative;
    overflow: hidden;
}

body.page-careers .mock-status-rail::before {
    content: '';
    position: absolute;
    right: -50px;
    top: -50px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 217, 126, 0.22) 0%, transparent 70%);
    pointer-events: none;
}

body.page-careers .status-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--green-bright);
    margin-bottom: 16px;
    position: relative;
}

body.page-careers .status-label::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green-bright);
    box-shadow: 0 0 8px var(--green-bright);
    animation: pulse 1.6s ease-in-out infinite;
}

body.page-careers .status-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    position: relative;
}

body.page-careers .status-row:last-of-type {
    border-bottom: none;
}

body.page-careers .status-row-lbl {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

body.page-careers .status-row-val {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: white;
    letter-spacing: -0.01em;
}

body.page-careers .status-row-val em {
    font-style: italic;
    color: var(--green-bright);
    font-size: 12px;
    font-weight: 500;
    margin-left: 4px;
}

body.page-careers .status-footer {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.5;
    position: relative;
}

body.page-careers .status-footer strong {
    color: white;
    font-weight: 600;
}

body.page-careers

/* ====== CONTACT PAGE ====== */
/* main 2-col layout: form + sidebar */
.contact-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 40px;
    align-items: start;
}

body.page-careers

/* FORM CARD */
.contact-form-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 44px 44px 40px;
    box-shadow: var(--shadow-card);
}

body.page-careers .contact-form-card .form-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--green-deep);
    margin-bottom: 14px;
}

body.page-careers .contact-form-card .form-eyebrow::before {
    content: '';
    width: 24px;
    height: 1.5px;
    background: var(--green);
    border-radius: 2px;
}

body.page-careers .contact-form-card h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -0.018em;
    color: var(--ink);
    margin-bottom: 8px;
}

body.page-careers .contact-form-card h2 em {
    font-style: italic;
    color: var(--green-deep);
}

body.page-careers .contact-form-card .form-intro {
    color: var(--slate);
    font-size: 15px;
    line-height: 1.55;
    margin-bottom: 32px;
}

body.page-careers .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

body.page-careers .form-row.full {
    grid-template-columns: 1fr;
}

body.page-careers .form-row.thirds {
    grid-template-columns: 1fr 1fr 1fr;
}

body.page-careers .form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

body.page-careers .form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: 0.01em;
}

body.page-careers .form-label .req {
    color: var(--green-deep);
    margin-left: 3px;
    font-weight: 700;
}

body.page-careers .form-label .hint {
    color: var(--muted);
    font-weight: 400;
    font-size: 12px;
    margin-left: 6px;
    letter-spacing: 0;
}

body.page-careers .form-input,
body.page-careers .form-select,
body.page-careers .form-textarea {
    width: 100%;
    padding: 12px 14px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-family: var(--font-sans);
    font-size: 14.5px;
    color: var(--ink);
    transition: border-color .15s, box-shadow .15s;
}

body.page-careers .form-input::placeholder,
body.page-careers .form-textarea::placeholder {
    color: var(--muted);
    font-style: italic;
}

body.page-careers .form-input:focus,
body.page-careers .form-select:focus,
body.page-careers .form-textarea:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 4px rgba(0, 184, 107, 0.08);
}

body.page-careers .form-textarea {
    min-height: 110px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
}

body.page-careers .form-select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7770' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 38px;
    cursor: pointer;
}

body.page-careers

/* Product interest checkbox grid */
.checkbox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 4px;
}

body.page-careers .checkbox-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

body.page-careers .checkbox-item:hover {
    border-color: rgba(0, 184, 107, 0.4);
    background: rgba(0, 217, 126, 0.025);
}

body.page-careers .checkbox-item input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

body.page-careers .checkbox-box {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--line);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: all .15s;
    background: white;
}

body.page-careers .checkbox-box::after {
    content: '';
    width: 9px;
    height: 5px;
    border-left: 2px solid white;
    border-bottom: 2px solid white;
    transform: rotate(-45deg) translate(1px, -1px);
    opacity: 0;
    transition: opacity .12s;
}

body.page-careers .checkbox-item input:checked+.checkbox-box {
    background: var(--green);
    border-color: var(--green);
}

body.page-careers .checkbox-item input:checked+.checkbox-box::after {
    opacity: 1;
}

body.page-careers .checkbox-item input:focus-visible+.checkbox-box {
    box-shadow: 0 0 0 4px rgba(0, 184, 107, 0.18);
}

body.page-careers .checkbox-item-label {
    font-size: 13.5px;
    color: var(--ink-mid);
    line-height: 1.3;
    font-weight: 500;
    transition: color .15s;
}

body.page-careers .checkbox-item input:checked~.checkbox-item-label {
    color: var(--ink);
    font-weight: 600;
}

body.page-careers .checkbox-item.is-all {
    border-style: dashed;
    border-color: rgba(14, 20, 17, 0.2);
}

body.page-careers

/* Submit row */
.form-submit-row {
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

body.page-careers .form-submit-row .btn-primary {
    padding: 13px 28px;
    font-size: 15px;
}

body.page-careers .form-privacy {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.4;
    flex: 1;
    min-width: 200px;
}

body.page-careers .form-privacy a {
    color: var(--ink-mid);
    text-decoration: none;
    border-bottom: 1px solid rgba(14, 20, 17, 0.18);
}

body.page-careers .form-privacy a:hover {
    color: var(--green-deep);
    border-bottom-color: var(--green);
}

body.page-careers

/* ====== SIDEBAR ====== */
.contact-sidebar {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

body.page-careers

/* Dark "call us" card */
.sidebar-call {
    background: linear-gradient(160deg, #0f1714 0%, #1a2e22 100%);
    color: white;
    border-radius: var(--radius-lg);
    padding: 28px 28px;
    position: relative;
    overflow: hidden;
}

body.page-careers .sidebar-call::before {
    content: '';
    position: absolute;
    right: -50px;
    top: -50px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 217, 126, 0.18) 0%, transparent 70%);
    pointer-events: none;
}

body.page-careers .sidebar-call-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--green-bright);
    margin-bottom: 14px;
    position: relative;
}

body.page-careers .sidebar-call-eyebrow::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green-bright);
    box-shadow: 0 0 8px var(--green-bright);
    animation: pulse 1.6s ease-in-out infinite;
}

body.page-careers .sidebar-call h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin-bottom: 16px;
    color: white;
    position: relative;
}

body.page-careers .sidebar-call h3 em {
    font-style: italic;
    color: var(--green-bright);
}

body.page-careers .sidebar-call .phone-num {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: white;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 4px;
    position: relative;
}

body.page-careers .sidebar-call .phone-num em {
    font-style: italic;
    color: var(--green-bright);
}

body.page-careers .sidebar-call .phone-sub {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
    position: relative;
    margin-bottom: 18px;
}

body.page-careers .sidebar-call .channels {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

body.page-careers .sidebar-call .channel {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color .15s;
}

body.page-careers .sidebar-call .channel:hover {
    color: var(--green-bright);
}

body.page-careers .sidebar-call .channel-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
}

body.page-careers .sidebar-call .channel:hover .channel-icon {
    background: rgba(0, 217, 126, 0.15);
    color: var(--green-bright);
}

body.page-careers .sidebar-call .channel-icon svg {
    width: 15px;
    height: 15px;
}

body.page-careers .sidebar-call .channel-text strong {
    color: white;
    font-weight: 600;
    display: block;
    font-size: 13.5px;
}

body.page-careers .sidebar-call .channel-text span {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
}

body.page-careers

/* Light "what happens next" card */
.sidebar-steps {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 28px;
}

body.page-careers .sidebar-steps h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: 6px;
}

body.page-careers .sidebar-steps h3 em {
    font-style: italic;
    color: var(--green-deep);
}

body.page-careers .sidebar-steps-intro {
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.5;
    margin-bottom: 22px;
}

body.page-careers .step-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

body.page-careers .step-item {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 14px;
    align-items: flex-start;
    position: relative;
}

body.page-careers .step-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 15px;
    top: 36px;
    bottom: -18px;
    width: 1.5px;
    background: linear-gradient(180deg, rgba(0, 184, 107, 0.3) 0%, rgba(0, 184, 107, 0.05) 100%);
}

body.page-careers .step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00d97e 0%, #00a85a 100%);
    color: white;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 4px 10px -4px rgba(0, 217, 126, 0.5);
    z-index: 1;
}

body.page-careers .step-content h4 {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.25;
    margin-bottom: 4px;
}

body.page-careers .step-content p {
    font-size: 13px;
    color: var(--slate);
    line-height: 1.5;
}

body.page-careers .step-content .step-time {
    display: inline-block;
    font-family: var(--font-display);
    font-style: italic;
    color: var(--green-deep);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
}

body.page-careers

/* ====== TRUST STRIP ====== */
.trust-strip-section {
    padding: 70px 32px;
    background: #fafaf6;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

body.page-careers .trust-strip-inner {
    max-width: 1240px;
    margin: 0 auto;
    text-align: center;
}

body.page-careers .trust-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--green-deep);
    margin-bottom: 14px;
}

body.page-careers .trust-strip-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(22px, 2.4vw, 28px);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: 36px;
}

body.page-careers .trust-strip-title em {
    font-style: italic;
    color: var(--green-deep);
}

body.page-careers .trust-logos {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-bottom: 36px;
}

body.page-careers .trust-logo {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #f4f4ee 0%, #ebebe2 100%);
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: rgba(14, 20, 17, 0.32);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    position: relative;
}

body.page-careers .trust-logo::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(14, 20, 17, 0.04);
    pointer-events: none;
}

body.page-careers .trust-divider {
    height: 1px;
    background: var(--line);
    max-width: 480px;
    margin: 36px auto;
}

body.page-careers .trust-awards {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 28px;
}

body.page-careers .trust-award {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
}

body.page-careers .trust-award-medal {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd54f 0%, #f5a623 100%);
    color: #4a2e00;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

body.page-careers .trust-award-medal svg {
    width: 18px;
    height: 18px;
}

body.page-careers .trust-award-year {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--green-deep);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 4px;
}

body.page-careers .trust-award-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.25;
}

body.page-careers .trust-award-issuer {
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 1px;
}

body.page-careers

/* ====== OTHER CONTACT PATHS ====== */
.other-paths-section {
    padding: 100px 32px;
    max-width: 1240px;
    margin: 0 auto;
}

body.page-careers .other-paths-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

body.page-careers .path-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 30px;
    transition: transform .25s, box-shadow .25s, border-color .25s;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

body.page-careers .path-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    border-color: rgba(0, 184, 107, 0.25);
}

body.page-careers .path-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: white;
    margin-bottom: 18px;
}

body.page-careers .path-icon svg {
    width: 20px;
    height: 20px;
}

body.page-careers .path-icon.icon-support {
    background: linear-gradient(135deg, #5fb1ff 0%, #2e8eff 100%);
}

body.page-careers .path-icon.icon-partner {
    background: linear-gradient(135deg, #b78cff 0%, #8a5aff 100%);
}

body.page-careers .path-icon.icon-press {
    background: linear-gradient(135deg, #ff8a5b 0%, #ff6b3d 100%);
}

body.page-careers .path-card h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: 8px;
}

body.page-careers .path-card h3 em {
    font-style: italic;
    color: var(--green-deep);
}

body.page-careers .path-card-desc {
    color: var(--slate);
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 18px;
    flex: 1;
}

body.page-careers .path-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--green-deep);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

body.page-careers .path-link::after {
    content: '→';
    transition: transform .2s;
}

body.page-careers .path-card:hover .path-link::after {
    transform: translateX(4px);
}

body.page-careers .path-link-secondary {
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--muted);
}

body.page-careers .path-link-secondary strong {
    color: var(--ink);
    font-weight: 600;
}

body.page-careers

/* ====== FAQ ====== */
.faq-section {
    padding: 100px 32px;
    background: #fafaf6;
    border-top: 1px solid var(--line);
}

body.page-careers .faq-inner {
    max-width: 880px;
    margin: 0 auto;
}

body.page-careers .faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 36px;
}

body.page-careers .faq-item {
    background: white;
    border: 1px solid var(--line);
    border-radius: 14px;
    transition: border-color .15s, box-shadow .15s;
}

body.page-careers .faq-item[open] {
    border-color: rgba(0, 184, 107, 0.25);
    box-shadow: 0 1px 0 rgba(14, 20, 17, 0.04), 0 12px 28px -16px rgba(14, 20, 17, 0.14);
}

body.page-careers .faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 22px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ink);
}

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

body.page-careers .faq-item summary em {
    font-style: italic;
    color: var(--green-deep);
}

body.page-careers .faq-item .faq-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--ink-mid);
    transition: all .25s;
}

body.page-careers .faq-item .faq-icon::before,
body.page-careers .faq-item .faq-icon::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 1.5px;
    background: currentColor;
    border-radius: 1px;
    transition: transform .25s;
}

body.page-careers .faq-item .faq-icon {
    position: relative;
}

body.page-careers .faq-item .faq-icon::before {
    transform: rotate(0deg);
}

body.page-careers .faq-item .faq-icon::after {
    transform: rotate(90deg);
}

body.page-careers .faq-item[open] .faq-icon {
    border-color: var(--green);
    color: var(--green-deep);
    background: rgba(0, 217, 126, 0.08);
}

body.page-careers .faq-item[open] .faq-icon::after {
    transform: rotate(0deg);
}

body.page-careers .faq-item .faq-body {
    padding: 0 26px 26px;
    color: var(--slate);
    font-size: 15px;
    line-height: 1.65;
}

body.page-careers .faq-item .faq-body p {
    margin-bottom: 12px;
}

body.page-careers .faq-item .faq-body p:last-child {
    margin-bottom: 0;
}

body.page-careers .faq-item .faq-body strong {
    color: var(--ink);
    font-weight: 600;
}

body.page-careers .faq-item .faq-body a {
    color: var(--green-deep);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 184, 107, 0.3);
}

body.page-careers .faq-item .faq-body a:hover {
    border-bottom-color: var(--green-deep);
}

body.page-careers

/* ====== "NOT READY?" ALTERNATIVE CTA ====== */
.alt-cta-section {
    padding: 100px 32px;
}

body.page-careers .alt-cta-inner {
    max-width: 1240px;
    margin: 0 auto;
    text-align: center;
}

body.page-careers .alt-cta-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(28px, 3.5vw, 42px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 14px;
}

body.page-careers .alt-cta-title em {
    font-style: italic;
    color: var(--green-deep);
}

body.page-careers .alt-cta-sub {
    color: var(--slate);
    font-size: 16px;
    margin-bottom: 40px;
}

body.page-careers .alt-cta-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}

body.page-careers .alt-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    text-decoration: none;
    font-weight: 500;
    font-size: 14.5px;
    transition: all .15s;
}

body.page-careers .alt-cta-link:hover {
    border-color: var(--ink);
    background: var(--ink);
    color: white;
}

body.page-careers .alt-cta-link::after {
    content: '→';
    opacity: 0.5;
    transition: transform .2s, opacity .2s;
}

body.page-careers .alt-cta-link:hover::after {
    opacity: 1;
    transform: translateX(3px);
}

body.page-careers

/* ====== CAREERS PAGE ====== */
/* "Why Hirezon" value cards */
.value-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 16px;
}

body.page-careers .value-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 32px 30px;
    transition: transform .25s, box-shadow .25s, border-color .25s;
    display: flex;
    flex-direction: column;
}

body.page-careers .value-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    border-color: rgba(0, 184, 107, 0.25);
}

body.page-careers .value-num {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 13px;
    color: var(--green-deep);
    margin-bottom: 14px;
    letter-spacing: 0.02em;
}

body.page-careers .value-card h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 24px;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: 12px;
}

body.page-careers .value-card h3 em {
    font-style: italic;
    color: var(--green-deep);
}

body.page-careers .value-card p {
    color: var(--slate);
    font-size: 14.5px;
    line-height: 1.6;
}

body.page-careers

/* ====== OPEN ROLES ====== */
.roles-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 36px;
}

body.page-careers .roles-count {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 16px;
    color: var(--ink);
}

body.page-careers .roles-count strong {
    font-family: var(--font-display);
    font-style: normal;
    color: var(--green-deep);
    font-weight: 600;
    font-size: 19px;
    margin-right: 4px;
}

body.page-careers .roles-applicant-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-mid);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color .15s;
}

body.page-careers .roles-applicant-link:hover {
    color: var(--green-deep);
}

body.page-careers .roles-applicant-link::before {
    content: '';
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7770' stroke-width='2.5' stroke-linecap='round'><path d='M9 12l2 2 4-4'/></svg>");
    background-position: center;
    background-size: 12px;
    background-repeat: no-repeat;
}

body.page-careers

/* Department group */
.dept-group {
    margin-bottom: 48px;
}

body.page-careers .dept-group:last-child {
    margin-bottom: 0;
}

body.page-careers .dept-header {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding-bottom: 14px;
    margin-bottom: 4px;
    border-bottom: 2px solid var(--ink);
}

body.page-careers .dept-name {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 26px;
    letter-spacing: -0.015em;
    color: var(--ink);
}

body.page-careers .dept-name em {
    font-style: italic;
    color: var(--green-deep);
}

body.page-careers .dept-count {
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
}

body.page-careers .dept-blurb {
    font-size: 13.5px;
    color: var(--muted);
    margin-left: auto;
    line-height: 1.4;
    max-width: 380px;
    text-align: right;
}

body.page-careers

/* Individual job row */
.job-row {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 22px 4px 22px 4px;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
    transition: padding .2s, background .15s;
    position: relative;
}

body.page-careers .job-row:hover {
    padding-left: 14px;
    background: rgba(0, 217, 126, 0.025);
}

body.page-careers .job-row:hover::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 3px;
    border-radius: 2px;
    background: var(--green);
    height: 58px;
}

body.page-careers .job-mark {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: white;
    flex-shrink: 0;
}

body.page-careers .job-mark svg {
    width: 20px;
    height: 20px;
}

body.page-careers .job-mark.icon-engineering {
    background: linear-gradient(135deg, #5fb1ff 0%, #2e8eff 100%);
}

body.page-careers .job-mark.icon-sales {
    background: linear-gradient(135deg, #00d97e 0%, #00a85a 100%);
}

body.page-careers .job-mark.icon-cs {
    background: linear-gradient(135deg, #ff8a5b 0%, #ff6b3d 100%);
}

body.page-careers .job-mark.icon-design {
    background: linear-gradient(135deg, #b78cff 0%, #8a5aff 100%);
}

body.page-careers .job-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

body.page-careers .job-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--ink);
}

body.page-careers .job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 13px;
    color: var(--muted);
}

body.page-careers .job-meta-dot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body.page-careers .job-meta-dot::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(14, 20, 17, 0.25);
    flex-shrink: 0;
}

body.page-careers .job-meta-dot:first-child::before {
    display: none;
}

body.page-careers .job-meta .pill-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    background: rgba(0, 217, 126, 0.10);
    color: var(--green-deep);
    border-radius: 999px;
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: 0.02em;
}

body.page-careers .job-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    transition: color .15s;
    white-space: nowrap;
}

body.page-careers .job-arrow::after {
    content: '→';
    transition: transform .2s;
}

body.page-careers .job-row:hover .job-arrow {
    color: var(--green-deep);
}

body.page-careers .job-row:hover .job-arrow::after {
    transform: translateX(4px);
}

body.page-careers

/* ====== PERKS GRID ====== */
.perks-section {
    padding: 100px 32px;
    background: #fafaf6;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

body.page-careers .perks-inner {
    max-width: 1240px;
    margin: 0 auto;
}

body.page-careers .perks-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 36px;
}

body.page-careers .perk-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 26px 24px;
}

body.page-careers .perk-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: white;
    margin-bottom: 14px;
}

body.page-careers .perk-icon svg {
    width: 18px;
    height: 18px;
}

body.page-careers .perk-icon.gc-1 {
    background: linear-gradient(135deg, #ff5d8f 0%, #ff8a5b 100%);
}

body.page-careers .perk-icon.gc-2 {
    background: linear-gradient(135deg, #ffd54f 0%, #f5a623 100%);
}

body.page-careers .perk-icon.gc-3 {
    background: linear-gradient(135deg, #00d97e 0%, #00a85a 100%);
}

body.page-careers .perk-icon.gc-4 {
    background: linear-gradient(135deg, #5fb1ff 0%, #2e8eff 100%);
}

body.page-careers .perk-icon.gc-5 {
    background: linear-gradient(135deg, #b78cff 0%, #8a5aff 100%);
}

body.page-careers .perk-icon.gc-6 {
    background: linear-gradient(135deg, #5ce0c8 0%, #2bb89e 100%);
}

body.page-careers .perk-icon.gc-7 {
    background: linear-gradient(135deg, #ffb547 0%, #f5912a 100%);
}

body.page-careers .perk-icon.gc-8 {
    background: linear-gradient(135deg, #c8f05c 0%, #8ec70d 100%);
}

body.page-careers .perk-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 17px;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-bottom: 6px;
    line-height: 1.2;
}

body.page-careers .perk-desc {
    font-size: 13px;
    color: var(--slate);
    line-height: 1.5;
}

/* ====== HIRING PROCESS ====== */
body.page-careers .process-section {
    padding: 100px 32px;
    max-width: none;
    width: 100%;
    margin: 0;
    background: #e6e6e657;
}

body.page-careers .process-section>.section-head,
body.page-careers .process-section>.process-grid {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 32px;
    padding-right: 32px;
    box-sizing: border-box;
}

body.page-careers .process-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 18px;
    margin-top: 36px;
}

body.page-careers .process-step {
    background: white;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 26px 24px;
    position: relative;
}

body.page-careers .process-step-num>div {
    width: 32px;
    height: 32px !important;
    border-radius: 50%;
    background: linear-gradient(135deg, #00d97e 0%, #00a85a 100%);
    color: white;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 4px 10px -4px rgba(0, 217, 126, 0.5);
    margin-bottom: 16px;
}

body.page-careers .process-step-time {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--green-deep);
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 4px;
}

body.page-careers .process-step h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.25;
    margin-bottom: 6px;
}

body.page-careers .process-step p {
    font-size: 13px;
    color: var(--slate);
    line-height: 1.5;
}

body.page-careers

/* ====== EEO + STAY IN TOUCH ====== */
.eeo-section {
    padding: 60px 32px;
    border-top: 1px solid var(--line);
}

body.page-careers .eeo-inner {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}

body.page-careers .eeo-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 12px;
}

body.page-careers .eeo-text {
    font-size: 13.5px;
    color: var(--slate);
    line-height: 1.65;
}

/* Stay-in-touch (reuses contact help-section pattern but simplified) */
body.page-careers .stay-section {
    padding: 0px 32px 90px;
    background: #e6e6e657;
}

body.page-careers .stay-inner {
    max-width: 880px !important;
    margin: 0 auto;
    text-align: center;
}

body.page-careers .stay-section h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 12px;
}

body.page-careers .stay-section h2 em {
    font-style: italic;
    color: var(--green-deep);
}

body.page-careers .stay-section p {
    color: var(--slate);
    font-size: 15.5px;
    margin-bottom: 28px;
    line-height: 1.55;
}

body.page-careers .stay-form {
    display: flex;
    gap: 10px;
    max-width: 480px;
    margin: 0 auto;
    flex-wrap: wrap;
}

body.page-careers .stay-form input {
    flex: 1;
    min-width: 240px;
    padding: 13px 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: white;
    font-family: inherit;
    font-size: 14.5px;
}

body.page-careers .stay-form input:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 4px rgba(0, 184, 107, 0.08);
}

body.page-careers

/* stat strip below mock — sits in the hero gradient */
.hero-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px 52px;
    margin-top: 44px;
    padding-bottom: 16px;
}

body.page-careers .hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.page-careers .hero-stat .num {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 6px;
}

body.page-careers .hero-stat .num em {
    font-style: italic;
    color: var(--green-deep);
}

body.page-careers .hero-stat .lbl {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.35;
    text-align: center;
    max-width: 20ch;
}

body.page-careers

/* ========== SECTION HEADER ========== */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--green-deep);
    margin-bottom: 18px;
}

body.page-careers .eyebrow::before {
    content: '';
    width: 24px;
    height: 1.5px;
    background: var(--green);
    border-radius: 2px;
}

body.page-careers

/* ========== PRODUCT GRID ========== */
.section {
    padding: 110px 32px;
    max-width: 1240px;
    margin: 0 auto;
}

body.page-careers .section-head {
    margin-bottom: 60px;
    max-width: 760px;
}

body.page-careers .section-head h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(34px, 4.4vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--ink);
}

body.page-careers .section-head h2 em {
    font-style: italic;
    color: var(--green-deep);
}

body.page-careers .section-head p {
    margin-top: 18px;
    color: var(--slate);
    font-size: 17px;
    line-height: 1.6;
    max-width: 60ch;
}

body.page-careers

/* featured (flagship + higher ed) */
.featured-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

body.page-careers .product-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 32px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-card);
}

body.page-careers .product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    border-color: rgba(0, 184, 107, 0.25);
}

body.page-careers .product-card.is-flagship {
    /* subtle warm wash */
}

body.page-careers .product-card.is-dark {
    background: linear-gradient(160deg, #0f1714 0%, #16221d 100%);
    border-color: transparent;
    color: white;
}

body.page-careers .product-card.is-dark .pcard-desc {
    color: rgba(255, 255, 255, 0.7);
}

body.page-careers .product-card.is-dark .pcard-title {
    color: white;
}

body.page-careers .product-card.is-dark .pcard-link {
    color: var(--green-bright);
}

body.page-careers .product-card.is-dark .pcard-link::after {
    color: var(--green-bright);
}

body.page-careers .product-card.is-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 100% 0%, rgba(0, 217, 126, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(245, 166, 35, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

body.page-careers .pcard-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 22px;
}

body.page-careers .pcard-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

body.page-careers .pcard-icon.icon-orange {
    background: linear-gradient(135deg, #ffb547 0%, #f5912a 100%);
}

body.page-careers .pcard-icon.icon-green {
    background: linear-gradient(135deg, #00d97e 0%, #00a85a 100%);
}

body.page-careers .pcard-icon.icon-coral {
    background: linear-gradient(135deg, #ff8a5b 0%, #ff6b3d 100%);
}

body.page-careers .pcard-icon.icon-blue {
    background: linear-gradient(135deg, #5fb1ff 0%, #2e8eff 100%);
}

body.page-careers .pcard-icon.icon-purple {
    background: linear-gradient(135deg, #b78cff 0%, #8a5aff 100%);
}

body.page-careers .pcard-icon.icon-teal {
    background: linear-gradient(135deg, #5ce0c8 0%, #2bb89e 100%);
}

body.page-careers .pcard-icon.icon-amber {
    background: linear-gradient(135deg, #ffd54f 0%, #f5a623 100%);
}

body.page-careers .pcard-icon.icon-pink {
    background: linear-gradient(135deg, #ff9bb3 0%, #ff5d8f 100%);
}

body.page-careers .pcard-icon.icon-slate {
    background: linear-gradient(135deg, #7a8a99 0%, #4a5a6b 100%);
}

body.page-careers .pcard-icon.icon-navy {
    background: linear-gradient(135deg, #4a6bff 0%, #2a3eb5 100%);
}

body.page-careers .pcard-icon.icon-lime {
    background: linear-gradient(135deg, #c8f05c 0%, #8ec70d 100%);
}

body.page-careers

/* monogram letter styling inside icon block */
.pcard-icon.has-monogram {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 22px;
    color: white;
    letter-spacing: -0.02em;
}

body.page-careers

/* partner card external-link styling */
.pcard-url {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--muted);
    text-decoration: none;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    text-transform: uppercase;
}

body.page-careers .pcard-url::after {
    content: '↗';
    font-size: 13px;
}

body.page-careers .pcard-url:hover {
    color: var(--green-deep);
}

body.page-careers .product-card.is-dark .pcard-url {
    color: rgba(255, 255, 255, 0.55);
    border-top-color: rgba(255, 255, 255, 0.1);
}

body.page-careers .product-card.is-dark .pcard-url:hover {
    color: var(--green-bright);
}

body.page-careers .pcard-icon svg {
    width: 22px;
    height: 22px;
    color: white;
}

body.page-careers .badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

body.page-careers .badge-flagship {
    background: var(--lemon);
    color: #7a5e00;
}

body.page-careers .badge-higher {
    background: var(--amber);
    color: #4a2e00;
}

body.page-careers .badge-new {
    background: var(--mint);
    color: #00603a;
}

body.page-careers .badge-2026 {
    background: #f0e8ff;
    color: #4b2a8f;
}

body.page-careers .pcard-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: 14px;
}

body.page-careers .product-card.is-flagship .pcard-title em,
body.page-careers .product-card .pcard-title em {
    font-style: italic;
    color: var(--green-deep);
}

body.page-careers .pcard-desc {
    color: var(--slate);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 24px;
    flex-grow: 1;
}

body.page-careers .pcard-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--green-deep);
    text-decoration: none;
    font-weight: 600;
    font-size: 14.5px;
    margin-top: auto;
    align-self: flex-start;
}

body.page-careers .pcard-link::after {
    content: '→';
    transition: transform .2s ease;
}

body.page-careers .pcard-link:hover::after {
    transform: translateX(4px);
}

body.page-careers

/* secondary product cards */
.secondary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

body.page-careers

/* CTA tile (fills 8th slot in 2-col product grid) */
.cta-tile {
    position: relative;
    border-radius: var(--radius-lg);
    padding: 32px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: white;
    background:
        radial-gradient(circle at 0% 100%, rgba(255, 231, 138, 0.35) 0%, transparent 55%),
        radial-gradient(circle at 100% 0%, rgba(0, 217, 126, 0.35) 0%, transparent 55%),
        linear-gradient(150deg, #0f1714 0%, #1a2e22 60%, #16352a 100%);
    box-shadow: var(--shadow-card);
    transition: transform .25s ease, box-shadow .25s ease;
}

body.page-careers .cta-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

body.page-careers .cta-tile::after {
    content: '';
    position: absolute;
    right: -60px;
    bottom: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 217, 126, 0.18) 0%, transparent 70%);
    pointer-events: none;
}

body.page-careers .cta-tile-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}

body.page-careers .cta-tile-mark {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #00d97e 0%, #00a85a 100%);
    display: grid;
    place-items: center;
    color: white;
    flex-shrink: 0;
}

body.page-careers .cta-tile-mark svg {
    width: 18px;
    height: 18px;
}

body.page-careers .cta-tile-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--green-bright);
}

body.page-careers .cta-tile h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: white;
    margin-bottom: 14px;
    position: relative;
}

body.page-careers .cta-tile h3 em {
    font-style: italic;
    color: var(--green-bright);
}

body.page-careers .cta-tile p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 24px;
    flex-grow: 1;
    position: relative;
}

body.page-careers .cta-tile-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    position: relative;
}

body.page-careers .cta-tile .btn-primary {
    box-shadow: 0 6px 18px -8px rgba(0, 217, 126, 0.6);
}

body.page-careers .cta-tile-phone {
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    padding: 11px 4px;
}

body.page-careers .cta-tile-phone:hover {
    color: var(--green-bright);
}

body.page-careers

/* ========== STATS BAND ========== */
.stats-band {
    background: linear-gradient(110deg, #0c1411 0%, #16221d 50%, #1f2e26 100%);
    color: white;
    padding: 90px 32px;
    position: relative;
    overflow: hidden;
}

body.page-careers .stats-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% 50%, rgba(0, 217, 126, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 10% 100%, rgba(245, 166, 35, 0.06) 0%, transparent 50%);
    pointer-events: none;
}

body.page-careers .stats-inner {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 2fr;
    gap: 60px;
    align-items: center;
    position: relative;
}

body.page-careers .stats-inner h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

body.page-careers .stats-inner h2 em {
    font-style: italic;
    color: var(--green-bright);
}

body.page-careers .stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

body.page-careers .stat-item .num {
    font-family: var(--font-display);
    font-size: clamp(48px, 5.5vw, 72px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.03em;
    color: white;
    margin-bottom: 12px;
}

body.page-careers .stat-item .lbl {
    color: rgba(255, 255, 255, 0.65);
    font-size: 14.5px;
    line-height: 1.4;
    max-width: 18ch;
}

body.page-careers

/* ========== HELP / SUPPORT CTA ========== */
.help-section {
    padding: 110px 32px;
    background: #fafaf6;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

body.page-careers .help-inner {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

body.page-careers .help-text h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}

body.page-careers .help-text h2 em {
    font-style: italic;
    color: var(--green-deep);
}

body.page-careers .help-text p {
    color: var(--slate);
    font-size: 17px;
    line-height: 1.6;
    margin-bottom: 28px;
}

body.page-careers .help-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

body.page-careers .help-feature {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 18px 22px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 14px;
}

body.page-careers .help-feature-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--mint-soft);
    color: var(--green-deep);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

body.page-careers .help-feature-icon svg {
    width: 18px;
    height: 18px;
}

body.page-careers .help-feature h4 {
    font-size: 15.5px;
    font-weight: 600;
    margin-bottom: 3px;
    color: var(--ink);
}

body.page-careers .help-feature p {
    font-size: 14px;
    color: var(--muted);
    margin: 0;
    line-height: 1.5;
}

body.page-careers

/* ========== CTA GRADIENT ========== */
.cta-section {
    padding: 100px 32px;
}

body.page-careers .cta-card {
    max-width: 1240px;
    margin: 0 auto;
    padding: 70px 60px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 0% 50%, #b8f5d3 0%, transparent 60%),
        radial-gradient(circle at 100% 50%, #fff4b8 0%, transparent 60%),
        linear-gradient(120deg, #6ee7a8 0%, #d8f0a0 50%, #fde880 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
}

body.page-careers .cta-card h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-style: italic;
    font-size: clamp(44px, 5.5vw, 72px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 18px;
}

body.page-careers .cta-card p {
    color: var(--ink-mid);
    font-size: 16.5px;
    margin-bottom: 32px;
    max-width: 56ch;
    margin-left: auto;
    margin-right: auto;
}

body.page-careers .cta-ctas {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

body.page-careers .cta-phone {
    color: var(--ink-mid);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
}

/* ========== FOOTER ========== */
footer {
    background: var(--ink);
    color: rgba(255, 255, 255, 0.7);
    padding: 70px 32px 30px;
}

body.page-careers .foot-inner {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 50px;
}

body.page-careers .foot-brand .logo {
    color: white;
}

body.page-careers .foot-brand p {
    margin-top: 16px;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.55);
    max-width: 32ch;
}

body.page-careers .foot-phone {
    margin-top: 22px;
}

body.page-careers .foot-phone .num {
    color: white;
    font-weight: 600;
    font-size: 15px;
}

body.page-careers .foot-phone .lbl {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
}

body.page-careers .foot-col h5 {
    color: white;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

body.page-careers .foot-col ul {
    list-style: none;
    display: grid;
    gap: 10px;
}

body.page-careers .foot-col a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    font-size: 14px;
    transition: color .2s;
}

body.page-careers .foot-col a:hover {
    color: white;
}

body.page-careers .foot-bottom {
    max-width: 1240px;
    margin: 0 auto;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.45);
}

body.page-careers .foot-bottom .links {
    display: flex;
    gap: 22px;
}

body.page-careers .foot-bottom a {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
}

/* ========== RESPONSIVE ========== */
@body.page-careers media (max-width: 1000px) {
    body.page-careers .nav-links {
        display: none;
    }

    body.page-careers .featured-grid,
    body.page-careers .secondary-grid {
        grid-template-columns: 1fr;
    }

    body.page-careers .stats-inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    body.page-careers .help-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    body.page-careers .foot-inner {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    body.page-careers .hero-stats {
        gap: 22px 28px;
    }

    body.page-careers .section {
        padding: 70px 24px;
    }

    body.page-careers .hero {
        padding: 56px 24px 0;
    }

    body.page-careers .hero-mock-wrap {
        padding: 0 0 70px;
    }

    body.page-careers .mock-body {
        grid-template-columns: 1fr 280px;
        min-height: 0;
    }

    body.page-careers .mock-sidebar {
        display: none;
    }

    body.page-careers .stats-band {
        padding: 70px 24px;
    }

    body.page-careers .help-section {
        padding: 70px 24px;
    }

    body.page-careers .cta-section {
        padding: 70px 24px;
    }

    body.page-careers .cta-card {
        padding: 50px 28px;
    }

    body.page-careers

    /* Contact responsive */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    body.page-careers .contact-form-card {
        padding: 32px 28px 28px;
    }

    body.page-careers .other-paths-grid {
        grid-template-columns: 1fr;
    }

    body.page-careers .other-paths-section {
        padding: 70px 24px;
    }

    body.page-careers .trust-strip-section {
        padding: 56px 24px;
    }

    body.page-careers .trust-logos {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }

    body.page-careers .faq-section {
        padding: 70px 24px;
    }

    body.page-careers .alt-cta-section {
        padding: 70px 24px;
    }

    body.page-careers

    /* Careers responsive */
    .value-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    body.page-careers .perks-section {
        padding: 70px 24px;
    }

    body.page-careers .perks-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    body.page-careers .process-section {
        padding: 70px 24px;
    }

    body.page-careers .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    body.page-careers .stay-section {
        padding: 70px 24px;
    }

    body.page-careers .eeo-section {
        padding: 48px 24px;
    }

    body.page-careers .dept-blurb {
        display: none;
    }

    body.page-careers .roles-header {
        gap: 14px;
    }

    body.page-careers .job-title {
        font-size: 19px;
    }
}

@body.page-careers media (max-width: 640px) {
    body.page-careers .nav {
        padding: 14px 20px;
    }

    body.page-careers .nav-signin {
        display: none;
    }

    body.page-careers .stats-grid {
        grid-template-columns: 1fr;
    }

    body.page-careers .foot-inner {
        grid-template-columns: 1fr 1fr;
    }

    body.page-careers .foot-bottom {
        flex-direction: column;
        gap: 12px;
    }

    body.page-careers .pcard-title {
        font-size: 22px !important;
    }

    body.page-careers .mock-body {
        grid-template-columns: 1fr;
    }

    body.page-careers .mock-ai-rail {
        display: none;
    }

    body.page-careers .mock-status-rail {
        display: none;
    }

    body.page-careers .partner-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    body.page-careers .mock-url {
        display: none;
    }

    body.page-careers .mock-main {
        padding: 16px;
    }

    body.page-careers .candidate-row {
        grid-template-columns: 32px 1fr auto;
    }

    body.page-careers .candidate-row .bar {
        display: none;
    }

    body.page-careers .hero-mock-header {
        padding: 12px 16px;
        gap: 10px;
    }

    body.page-careers .mock-badge-ai {
        font-size: 10.5px;
        padding: 4px 8px;
    }

    body.page-careers

    /* Contact mobile */
    .form-row,
    body.page-careers .form-row.thirds {
        grid-template-columns: 1fr;
    }

    body.page-careers .checkbox-grid {
        grid-template-columns: 1fr;
    }

    body.page-careers .trust-logos {
        grid-template-columns: repeat(3, 1fr);
    }

    body.page-careers .trust-awards {
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }

    body.page-careers .form-submit-row {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    body.page-careers .form-submit-row .btn-primary {
        width: 100%;
        justify-content: center;
    }

    body.page-careers .faq-item summary {
        padding: 18px 20px;
        font-size: 16px;
    }

    body.page-careers .faq-item .faq-body {
        padding: 0 20px 22px;
    }

    body.page-careers .alt-cta-links {
        flex-direction: column;
    }

    body.page-careers .alt-cta-link {
        justify-content: center;
    }

    body.page-careers .contact-form-card h2 {
        font-size: 26px;
    }

    body.page-careers

    /* Careers mobile */
    .perks-grid {
        grid-template-columns: 1fr;
    }

    body.page-careers .process-grid {
        grid-template-columns: 1fr;
    }

    body.page-careers .job-row {
        grid-template-columns: 36px 1fr;
        padding: 18px 4px;
    }

    body.page-careers .job-mark {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    body.page-careers .job-mark svg {
        width: 16px;
        height: 16px;
    }

    body.page-careers .job-arrow {
        grid-column: 2;
        font-size: 13px;
    }

    body.page-careers .job-title {
        font-size: 17px;
    }

    body.page-careers .dept-name {
        font-size: 22px;
    }

    body.page-careers .stay-form {
        flex-direction: column;
    }

    body.page-careers .stay-form input,
    body.page-careers .stay-form button {
        width: 100%;
    }
}

/* ========== ANIMATIONS ========== */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

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

.reveal {
    animation: fadeUp .8s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}

body.page-careers .reveal-1 {
    animation-delay: .05s;
}

body.page-careers .reveal-2 {
    animation-delay: .15s;
}

body.page-careers .reveal-3 {
    animation-delay: .25s;
}

body.page-careers .reveal-4 {
    animation-delay: .35s;
}

body.page-careers .reveal-5 {
    animation-delay: .45s;
}

/* Careers page component shell */
body.page-careers .nav {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 1280px;
    background: rgba(251, 251, 253, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(229, 229, 238, 0.8);
    border-radius: 100px;
    padding: 10px 12px 10px 24px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 30px rgba(10, 14, 42, 0.04);
    transition: all 0.3s ease;
}

body.page-careers .nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.page-careers .nav-logo img {
    width: auto;
    max-width: 150px;
    height: auto;
    display: block;
}

body.page-careers .nav-links {
    display: flex;
    gap: 4px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

body.page-careers .nav-links a {
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft);
    transition: all 0.2s ease;
    text-decoration: none;
}

body.page-careers .nav-links a:hover,
body.page-careers .nav-links a.active {
    background: rgba(2, 184, 127, 0.12);
    color: var(--teal);
}

body.page-careers .nav-cta {
    display: flex;
    gap: 8px;
    align-items: center;
}

body.page-careers .nav .btn {
    padding: 11px 22px;
    border-radius: 100px;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
}

body.page-careers .nav .btn-primary {
    background: var(--teal);
    color: white;
    box-shadow: 0 4px 20px rgba(75, 206, 165, 0.38);
}

body.page-careers .nav .btn-primary:hover {
    background: var(--teal-deep);
    transform: translateY(-1px);
    box-shadow: 0 8px 28px rgba(0, 135, 92, 0.31);
}

body.page-careers .nav .btn-ghost {
    color: var(--ink-soft);
    padding: 11px 18px;
    background: transparent;
    border-color: transparent;
}

body.page-careers .nav .btn-ghost:hover {
    color: var(--teal-dark);
}

body.page-careers footer {
    background: var(--extra-dark);
    color: var(--paper);
    padding: 80px 32px 40px;
}

body.page-careers footer h3,
body.page-careers footer h4,
body.page-careers footer p,
body.page-careers footer ul,
body.page-careers footer li {
    margin: 0;
    padding: 0;
}

body.page-careers .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 60px;
}

body.page-careers .footer-brand h3 {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 22px;
    color: white;
}

body.page-careers .footer-brand h3 img {
    max-width: 200px;
}

body.page-careers .footer-brand p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 24px;
    max-width: 320px;
}

body.page-careers .footer-contact {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.8;
}

body.page-careers .footer-contact strong {
    color: var(--yellow-soft);
    font-weight: 500;
}

body.page-careers .footer-col h4 {
    color: var(--yellow-soft);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 20px;
}

body.page-careers .footer-contact a,
body.page-careers .footer-col a,
body.page-careers .footer-bottom-links a {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s;
    text-decoration: none;
}

body.page-careers .footer-contact a:hover,
body.page-careers .footer-col a:hover,
body.page-careers .footer-bottom-links a:hover {
    color: white;
}

body.page-careers .footer-col ul {
    list-style: none;
}

body.page-careers .footer-col li {
    margin-bottom: 10px;
}

body.page-careers .footer-col a {
    font-size: 14px;
}

body.page-careers .footer-event-title {
    display: block;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
}

body.page-careers .footer-event-date {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

body.page-careers .footer-bottom {
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

body.page-careers .footer-bottom-links {
    display: flex;
    gap: 24px;
}

body.page-careers .section-tight-top {
    padding-top: 24px;
}

body.page-careers .section-no-top {
    padding-top: 0;
}

body.page-careers .careers-inline-link {
    color: var(--green-deep);
    font-weight: 500;
    border-bottom: 1px solid rgba(0, 184, 107, 0.3);
    text-decoration: none;
}

body.page-careers .careers-inline-link-muted {
    color: var(--ink);
    border-bottom-color: var(--line);
}

body.page-careers .section-head.centered-narrow {
    text-align: center;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

body.page-careers .eyebrow.centered {
    justify-content: center;
}

/* Careers audit: align extracted page styles with the shared site system. */
body.page-careers,
body.page-careers input,
body.page-careers button {
    font-family: var(--font-sans);
}

body.page-careers h1,
body.page-careers h2,
body.page-careers h3,
body.page-careers h4,
body.page-careers .hero-title,
body.page-careers .section-head h2,
body.page-careers .value-card h3,
body.page-careers .dept-name,
body.page-careers .job-title,
body.page-careers .perk-title,
body.page-careers .process-step h4,
body.page-careers .stay-inner h2 {
    font-family: var(--font-display);
}

body.page-careers .hero {
    padding: 136px 32px 96px;
    position: relative;
    overflow: hidden;
    min-height: auto;
    display: flex;
    align-items: flex-start;
    background: white;
}

body.page-careers .hero::before,
body.page-careers .hero::after {
    content: none;
}

body.page-careers .hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 65% 95% at 0% 35%, rgba(0, 217, 126, 0.22) 0%, transparent 62%),
        radial-gradient(ellipse 60% 95% at 100% 40%, rgba(255, 195, 130, 0.40) 0%, transparent 62%),
        radial-gradient(ellipse 70% 40% at 50% 100%, rgba(255, 240, 200, 0.28) 0%, transparent 70%),
        linear-gradient(180deg, #fefcf5 0%, #fff8ea 100%);
    z-index: 0;
}

body.page-careers .hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(14, 20, 17, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 20, 17, 0.02) 1px, transparent 1px);
    background-size: 56px 56px;
    z-index: 1;
    pointer-events: none;
}

body.page-careers .glow-orb {
    display: none;
}

body.page-careers .hero-content,
body.page-careers .hero-content.container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: min(100%, 1000px);
    text-align: center;
}

body.page-careers .section,
body.page-careers .perks-inner,
body.page-careers .stay-inner,
body.page-careers .eeo-inner {
    max-width: 1280px;
}

body.page-careers .hero-meta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

body.page-careers .hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(14, 20, 17, 0.08);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    color: var(--teal);
    margin-bottom: 0px;
}

body.page-careers .hero-tag-dot {
    width: 6px;
    height: 6px;
    background: var(--yellow);
    border-radius: 50%;
    flex: 0 0 auto;
}

body.page-careers .hero h1 {
    font-family: var(--font-display);
    font-size: clamp(56px, 7vw, 100px);
    line-height: 0.98;
    letter-spacing: -0.03em;
    font-weight: 500;
    margin: 0 auto;
    max-width: 1000px;
}

body.page-careers .hero h1 .line {
    display: inline;
    position: relative;
}

body.page-careers .hero h1 .line-1 {
    font-weight: 500;
    font-size: 75px;
}

body.page-careers .hero h1 em {
    color: var(--teal);
}

body.page-careers .hero-sub {
    font-size: 18px;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: min(100%, 880px);
    margin: 15px auto 36px;
}

body.page-careers .hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

body.page-careers .hero-actions .btn {
    min-width: 180px;
    justify-content: center;
}

body.page-careers .section-head h2 em,
body.page-careers .value-card h3 em,
body.page-careers .stay-inner h2 em {
    color: var(--teal);
    background: var(--grad-teal-yellow);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.page-careers .section {
    padding: 96px 32px;
}

body.page-careers .section-tight-top {
    padding-top: 64px;
}

body.page-careers .section-no-top {
    padding-top: 0;
}

body.page-careers .value-card,
body.page-careers .dept-group,
body.page-careers .process-step,
body.page-careers .perk-card {
    border-color: var(--line);
}

@media (max-width: 1000px) {
    body.page-careers .nav-links {
        display: none;
    }

    body.page-careers .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    body.page-careers .hero {
        padding: 124px 0 80px;
    }

    body.page-careers .hero h1 {
        font-size: clamp(54px, 10vw, 92px);
    }

    body.page-careers .hero-sub {
        max-width: 760px;
    }

    body.page-careers .section {
        padding: 80px 24px;
    }

    body.page-careers .process-section>.section-head,
    body.page-careers .process-section>.process-grid {
        padding-left: 24px;
        padding-right: 24px;
    }

    body.page-careers .value-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    body.page-careers .process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    body.page-careers .nav {
        padding: 14px 20px;
    }

    body.page-careers .nav-cta .btn-ghost {
        display: none;
    }

    body.page-careers .container {
        padding: 0 24px;
    }

    body.page-careers .hero {
        padding: 116px 0 64px;
    }

    body.page-careers .hero h1 {
        font-size: clamp(48px, 16vw, 70px);
    }

    body.page-careers .hero h1 .line-1 {
        font-size: inherit;
    }

    body.page-careers .hero-tag {
        margin-bottom: 42px;
    }

    body.page-careers .hero-sub {
        font-size: 18px;
        margin-bottom: 40px;
    }

    body.page-careers .hero-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    body.page-careers .hero-actions .btn {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    body.page-careers .process-grid,
    body.page-careers .perks-grid {
        grid-template-columns: 1fr;
    }

    body.page-careers .footer-grid {
        grid-template-columns: 1fr;
    }

    body.page-careers .footer-bottom {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    body.page-careers .footer-bottom-links {
        flex-wrap: wrap;
        gap: 14px 20px;
    }

    body.page-careers footer {
        padding: 60px 24px;
    }

    body.page-home footer {
        padding: 60px 24px;
    }
}

/* ===========================================================================
   GLOBAL FOOTER
   =========================================================================== */

body a {
    color: rgba(255, 255, 255, 0.5);
}

footer {
    font-family: var(--font-sans);
    background: var(--extra-dark);
    color: var(--paper);
    padding: 80px 32px 40px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 60px;
}

.footer-brand h3 {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 22px;
    color: white;
}

.footer-brand h3 img {
    max-width: 200px;
}

.footer-logo-svg {
    height: 44px;
    width: auto;
    flex-shrink: 0;
    display: block;
}

.footer-brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--grad-hero);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 17px;
}

.footer-brand p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 24px !important;
    max-width: 320px;
}

.footer-contact {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.8;
}

.footer-contact strong {
    color: var(--yellow-soft);
    font-weight: 500;
}

.footer-contact a {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s;
}

.footer-contact a:hover {
    color: white;
}

.footer-col h4 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--yellow-soft);
    font-weight: 600;
    margin-bottom: 20px !important;
}

.footer-col ul {
    list-style: none;
}

.footer-col li {
    margin-bottom: 10px;
}

.footer-col a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    transition: color 0.2s;
}

.footer-col a:hover {
    color: white;
}

.footer-event-title {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
}

.footer-event-date {
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
}

.footer-logo img,
.footer-brand img {
    max-width: 220px;
}

.footer-bottom {
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.footer-bottom-links {
    display: flex;
    gap: 24px;
}

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

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

@media (max-width: 640px) {
    footer {
        padding: 60px 24px;
    }

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

    .footer-bottom {
        flex-direction: column;
        gap: 16px;
    }
}

/* ============ END CAREERS PAGE STYLES ============ */

.global-marquee {
    padding: 60px 32px 40px !important;
    background: #fff;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    position: relative;
    overflow: hidden;
}

.global-marquee .marquee-label {
    text-align: center;
    font-size: 13px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-soft);
    margin-bottom: 32px;
    font-weight: 600;
}

.global-marquee .marquee-track {
    display: flex;
    gap: 56px;
    animation: scroll 120s linear infinite;
    width: max-content;
    align-items: center;
}

.global-marquee .marquee-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    transition: opacity 0.3s, filter 0.3s, transform 0.3s;
    opacity: 0.7;
    filter: grayscale(100%);
}

.global-marquee .marquee-item img {
    max-height: 70px;
    max-width: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.global-marquee .marquee-item:hover {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.05);
}

.global-marquee .marquee-awards {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(56px, 10vw, 150px);
    margin-top: 42px;
    padding: 34px 24px 10px;
    border-top: 1px solid var(--line);
}

.global-marquee .marquee-awards img {
    width: auto;
    max-width: min(34vw, 460px);
    max-height: 150px;
    object-fit: contain;
    display: block;
}

.global-container {
    padding: 80px 32px !important;
}

@media (max-width: 1024px) {
    .global-container {
        padding: 60px 32px !important;
    }
}

@media (max-width: 768px) {
    .global-container {
        padding: 40px 24px !important;
    }
}