/* ==========================================================================
   Personit Partnership Page - Standalone Styles
   Complete independent stylesheet for partnership pages
   ========================================================================== */

/* CSS Variables - Personit Design System */
:root {
    --brand-green: #0cffa7;
    --brand-green-dark: #00cc88;
    --dark-bg: #0f1214;
    --dark-bg-alt: #121416;
    --border-gray: rgba(255, 255, 255, 0.1);
    --text-white: #ffffff;
    --text-gray: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: clamp(16px, 1.25vw, 17.5px);
}

body {
    font-family: 'Urbanist', sans-serif;
    background: var(--dark-bg);
    color: var(--text-white);
    line-height: 1.6;
    /* Improved readability for body text */
    overflow-x: hidden;
    min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Urbanist', sans-serif;
    margin-top: 0;
}

h1 {
    font-size: clamp(2.5rem, 5vw, 5rem);
    /* Anchor: Hero H1 (unchanged) */
    font-weight: 700;
    line-height: 1.1;
    /* Tight line-height for large display text */
    letter-spacing: -0.02em;
}

h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    /* Clearly smaller than H1 */
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

h3 {
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    /* Distinct step down for card headers */
    font-weight: 700;
    line-height: 1.3;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
    max-width: min(1400px, 94vw);
    margin: 0 auto;
    padding: 0 1rem;
}

main {
    position: relative;
    z-index: 10;
    padding: 5rem 1rem;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
    padding: 24px 0;
    background: var(--dark-bg);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left,
.header-right {
    flex: 1;
    display: flex;
    align-items: center;
}

.header-left {
    justify-content: flex-start;
}

.header-right {
    justify-content: flex-end;
}

.logo {
    height: 52px;
    width: auto;
}

.logo img {
    height: 100%;
    width: auto;
}

/* Language Switcher */
.lang-switcher {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 4px;
}

.lang-option {
    background: transparent;
    border: none;
    color: var(--text-gray);
    font-family: 'Urbanist', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.lang-option:hover {
    color: var(--text-white);
}

.lang-option.active {
    background: var(--brand-green);
    color: var(--dark-bg);
}

/* ==========================================================================
   Partnership Hero
   ========================================================================== */

.partnership-hero {
    padding: 180px 0 80px;
    background: var(--dark-bg);
    position: relative;
    overflow: visible;
    /* Ensure parallax card isn't clipped */
}

#grid-ripple-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
    mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
}

.partnership-hero .container {
    position: relative;
    z-index: 2;
}

.partnership-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(61.22% 81.57% at 50% -3.83%,
            rgba(12, 255, 167, 0.2) 0%,
            rgba(15, 18, 20, 0.2) 100%);
    z-index: 0;
}

.partnership-hero-wrapper {
    display: flex;
    flex-direction: column;
    gap: calc(60px + 2rem);
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 2;
}

.partnership-hero-content {
    text-align: center;
}

/* Partnership Hero Title - Inheriting new H1 scale but ensuring correct weight/line-height */
.partnership-hero h1 {
    /* Using global H1 scale but ensuring margin */
    margin-bottom: 24px;
    color: var(--text-white);
    letter-spacing: -0.02em;

    /* Hero Reveal Animation */
    opacity: 0;
    transform: translateY(30px);
    filter: blur(10px);
    animation: heroReveal 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s forwards;
}

.partnership-hero h1 .accent {
    color: var(--brand-green);
    display: inline-block;
    /* Hero Accent Pulse */
    animation: accentGlow 2s ease-in-out 1s infinite alternate;
}

.partnership-hero-subtitle {
    font-size: 1.25rem;
    /* Increased for lead paragraph feel */
    color: var(--text-white);
    max-width: 100%;
    margin: 0;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 3rem;
    /* Added breathing room */

    /* Hero Reveal Animation (Staggered) */
    opacity: 0;
    transform: translateY(20px);
    filter: blur(5px);
    animation: heroReveal 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s forwards;
}

/* Keyframes for Hero Reveal */
@keyframes heroReveal {
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes accentGlow {
    from {
        text-shadow: 0 0 10px rgba(12, 255, 167, 0.2);
    }

    to {
        text-shadow: 0 0 25px rgba(12, 255, 167, 0.6);
        color: #8cffd6;
    }
}

/* Partnership CTA Card */
.partnership-cta-card {
    /* Glow effect variables */
    --base: 160;
    --spread: 20;
    --card-radius: 20;
    --border: 2;
    --backdrop: rgba(29, 34, 38, 0.4);
    --backup-border: rgba(54, 54, 54, 0.6);
    --size: 300;
    --saturation: 100;
    --lightness: 53;
    --bg-spot-opacity: 0.15;
    --border-spot-opacity: 0.7;
    --border-light-opacity: 0.5;
    --border-size: calc(var(--border) * 1px);
    --spotlight-size: calc(var(--size) * 1px);
    --hue: calc(var(--base) + (var(--xp, 0) * var(--spread)));
    --x: 0;
    --y: 0;
    --xp: 0;
    --yp: 0;

    /* Background with spotlight */
    background-image: radial-gradient(var(--spotlight-size) var(--spotlight-size) at calc(var(--x) * 1px) calc(var(--y) * 1px),
            hsl(var(--hue) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%) / var(--bg-spot-opacity)),
            transparent);
    background-color: var(--backdrop);
    background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
    background-position: 50% 50%;

    backdrop-filter: blur(12px);
    border: var(--border-size) solid var(--backup-border);
    border-radius: calc(var(--card-radius) * 1px);
    padding: 56px 48px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s ease, opacity 0.6s ease, transform 0.6s ease;
    z-index: 2;
}

.partnership-cta-card::before,
.partnership-cta-card::after {
    content: '';
    position: absolute;
    inset: calc(var(--border-size) * -1);
    border-radius: calc(var(--card-radius) * 1px);
    border: var(--border-size) solid transparent;
    pointer-events: none;
    z-index: 2;
}

/* Border glow effect */
.partnership-cta-card::before {
    background: radial-gradient(calc(var(--spotlight-size) * 0.75) calc(var(--spotlight-size) * 0.75) at calc(var(--x) * 1px) calc(var(--y) * 1px),
            hsl(var(--hue) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%) / var(--border-spot-opacity)),
            transparent 100%);
    background-attachment: fixed;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
}

/* Outer glow */
.partnership-cta-card::after {
    background: radial-gradient(calc(var(--spotlight-size) * 0.5) calc(var(--spotlight-size) * 0.5) at calc(var(--x) * 1px) calc(var(--y) * 1px),
            hsl(var(--hue) calc(var(--saturation) * 1%) 70% / 0.25),
            transparent 100%);
    filter: blur(calc(var(--border-size) * 10));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.partnership-cta-card:hover::after {
    opacity: 1;
}

.partnership-cta-title {
    font-size: clamp(1.6rem, 3.5vw, 2.1rem);
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.3;
}

.partnership-cta-subtitle {
    font-size: 1rem;
    color: var(--text-gray);
    margin-bottom: 40px;
    line-height: 1.6;
}

.partnership-aside {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.earn-box {
    background: rgba(12, 255, 167, 0.06);
    border: 1px solid rgba(12, 255, 167, 0.3);
    border-radius: 1rem;
    padding: 1.5rem;
    font-size: 0.95rem;
    color: var(--text-white);
    line-height: 1.6;
}

.earn-box strong {
    color: var(--brand-green);
}

/* ==========================================================================
   Partnership Sections
   ========================================================================== */

.partnership-section {
    margin-bottom: 8rem;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 4rem;
}

.section-number {
    font-size: clamp(1.875rem, 5vw, 3.5rem);
    font-weight: 700;
    color: var(--brand-green);
    font-family: serif;
    flex-shrink: 0;
}

/* Grid Layouts */
.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    align-items: center;
}

@media (min-width: 768px) {
    .grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Cards */
.partnership-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
    padding: 2rem;
    transition: all 0.3s ease;
}

.partnership-card:hover {
    border-color: rgba(12, 255, 167, 0.3);
}

.partnership-card h3 {
    color: var(--text-white);
    font-weight: 700;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
}

/* Tags */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.tag {
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-white);
    transition: all 0.3s ease;
}

.tag:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Blockquote */
.blockquote {
    position: relative;
    font-size: 1.5rem;
    font-family: serif;
    font-style: italic;
    line-height: 1.6;
    color: var(--text-white);
    padding-left: 2rem;
    border-left: 2px solid var(--brand-green);
    margin-top: 2rem;
}

.blockquote::before {
    content: '"';
    position: absolute;
    left: -0.5rem;
    top: -1rem;
    font-size: 4rem;
    color: rgba(12, 255, 167, 0.2);
    line-height: 1;
}

/* ==========================================================================
   Steps Component
   ========================================================================== */

.steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.step {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 2rem;
    border-radius: 0.75rem;
    transition: all 0.3s ease;
}

.step:first-child {
    border-top: none;
}

.step:hover {
    background: rgba(255, 255, 255, 0.05);
}

.step-number {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 1px solid var(--brand-green);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-green);
    font-weight: 700;
    font-size: 1.25rem;
    /* Match new H3 scale roughly */
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.step:hover .step-number {
    background: var(--brand-green);
    color: var(--dark-bg);
}

.step-content h3 {
    font-size: 1.25rem;
    /* Slightly smaller than main H3 for list items */
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.step-content p {
    color: var(--text-gray);
    font-size: 1.125rem;
    line-height: 1.6;
}

.highlight-box {
    background: rgba(12, 255, 167, 0.05);
    border: 1px solid rgba(12, 255, 167, 0.2);
    padding: 2rem;
    border-radius: 0.75rem;
    text-align: center;
    margin-top: 3rem;
}

.highlight-box p {
    color: var(--brand-green);
    font-weight: 500;
    font-size: 1.125rem;
}

/* ==========================================================================
   Offers Section
   ========================================================================== */

.offers-section {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
    padding: 4rem 2rem;
}

@media (min-width: 768px) {
    .offers-section {
        padding: 4rem;
    }
}

.offers-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

@media (min-width: 768px) {
    .offers-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

.offer-item {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 1.5rem;
    align-items: flex-start;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.offer-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.offer-number {
    width: 3rem;
    height: 3rem;
    background: var(--brand-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark-bg);
    font-weight: 700;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.offer-item h3 {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}

.offer-item p {
    color: var(--text-gray);
    font-size: 1rem;
    line-height: 1.6;
}

/* ==========================================================================
   Benefits Grid
   ========================================================================== */

.benefits-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .benefits-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.benefit-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
    padding: 2rem;
    transition: all 0.3s ease;
}

.benefit-card:hover {
    border-color: rgba(12, 255, 167, 0.3);
}

.benefit-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.benefit-counter {
    color: var(--brand-green);
    font-family: monospace;
    font-size: 0.875rem;
}

.benefit-card h3 {
    font-size: 1.125rem;
    margin-bottom: 1rem;
}

.benefit-card p {
    color: var(--text-gray);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ==========================================================================
   Two Column Section
   ========================================================================== */

.two-column-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
}

@media (min-width: 768px) {
    .two-column-section {
        grid-template-columns: 1fr 1fr;
    }
}

.column-box h2 {
    font-size: 1.5rem;
    margin-bottom: 3rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.point-list {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.point-item {
    display: flex;
    gap: 1.5rem;
}

.point-bullet {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--brand-green);
    margin-top: 0.75rem;
    flex-shrink: 0;
}

.point-item h3 {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}

.point-item p {
    color: var(--text-gray);
    line-height: 1.6;
    font-size: 1rem;
}

/* ==========================================================================
   Models & Start Section
   ========================================================================== */

.models-start-section {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
    padding: 4rem 2rem;
}

@media (min-width: 768px) {
    .models-start-section {
        padding: 4rem;
    }
}

.models-start-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
}

@media (min-width: 768px) {
    .models-start-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6rem;
    }
}

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

.model-item {
    background: rgba(15, 18, 20, 0.5);
    padding: 2rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.model-item:hover {
    border-color: rgba(12, 255, 167, 0.3);
}

.model-item h3 {
    color: var(--brand-green);
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
}

.model-item p {
    color: var(--text-gray);
    font-size: 0.875rem;
    line-height: 1.6;
}

.start-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.start-item {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.start-number {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(12, 255, 167, 0.2);
    color: var(--brand-green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.start-item h3 {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}

.start-item p {
    color: var(--text-gray);
    line-height: 1.6;
}

/* ==========================================================================
   Partnership Footer CTA
   ========================================================================== */

.partnership-footer {
    text-align: center;
    padding: 6rem 2rem;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    position: relative;
    background:
        radial-gradient(ellipse 80% 60% at 50% 100%, rgba(12, 255, 167, 0.1) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 20% 90%, rgba(12, 255, 167, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse 50% 50% at 80% 85%, rgba(12, 255, 167, 0.04) 0%, transparent 50%);
}

.partnership-footer canvas {
    position: absolute;
    top: -200px;
    left: 0;
    width: 100%;
    height: calc(100% + 200px);
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 15%, rgba(0, 0, 0, 1) 30%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 15%, rgba(0, 0, 0, 1) 30%);
}

.footer-cta-card {
    position: relative;
    z-index: 10;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
    padding: 4rem 3rem;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    /* Removed opacity/transform for parallax */
}

.partnership-footer h2 {
    margin-bottom: 2rem;
}

.partnership-footer p {
    font-size: 1.25rem;
    color: var(--text-gray);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.partnership-footer p:last-of-type {
    font-size: 1.125rem;
}

.btn-primary {
    background: linear-gradient(to bottom, var(--brand-green), var(--brand-green-dark));
    color: var(--dark-bg);
    border: none;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 1.125rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0px 4px 30.7px 0px rgba(12, 255, 167, 0.1);
    transition: all 0.3s ease;
    text-decoration: none;
    margin-top: 2rem;
}

.btn-primary:hover {
    box-shadow: 0px 4px 40px 0px rgba(12, 255, 167, 0.2);
    transform: translateY(-2px);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    background: var(--dark-bg);
    padding: 48px 0 32px;
    border-top: 1px solid var(--border-gray);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    flex-wrap: wrap;
}

.footer-left {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.footer-logo img {
    height: 52px;
    width: auto;
}

.footer-company-info {
    font-size: 0.875rem;
    color: var(--text-gray);
    line-height: 1.6;
}

.footer-company-info p {
    margin-bottom: 0.25rem;
}

.footer-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-end;
}

.footer-links-section {
    display: flex;
    gap: 1rem;
    align-items: center;
    font-size: 0.875rem;
}

.footer-links-section a {
    color: var(--text-gray);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links-section a:hover {
    color: var(--text-white);
}

.footer-divider {
    color: var(--text-gray);
}

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

.footer-social a {
    color: var(--text-gray);
    transition: color 0.2s ease;
}

.footer-social a:hover {
    color: var(--brand-green);
}

.copyright {
    font-size: 0.875rem;
    color: var(--text-gray);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
    main {
        padding: 4rem 1.5rem;
    }

    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

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

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

    .partnership-label {
        flex-direction: column;
    }

    .partnership-divider {
        width: 100%;
        height: 1px;
        order: 2;
    }

    .partnership-content {
        grid-template-columns: 1fr;
    }

    .partnership-aside {
        align-items: center;
    }

    .section-header {
        flex-direction: column;
        text-align: center;
    }

    .section-number {
        font-size: 2.5rem;
    }

    .step {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .step-number {
        margin: 0 auto;
    }

    .step-content h3,
    .step-content p {
        text-align: center;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
    }

    .footer-left {
        flex-direction: column;
        align-items: center;
    }

    .footer-right {
        align-items: center;
    }
}

/* ==========================================================================
   Concept 2 Refined: Neon Split Card (Image Match)
   ========================================================================== */

/* CTA Card - The Split Layout */
.cta-split-card {
    display: flex;
    flex-direction: row;
    border-radius: 24px;
    background: var(--dark-bg);
    position: relative;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.5);
    z-index: 10;
    overflow: hidden;

    /* Hero Card Reveal Animation */
    opacity: 0;
    transform: translateY(40px);
    animation: ctaCardReveal 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.8s forwards;
    /* Delay set to 0.8s to appear after title/subtitle sequence */
}

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

@media (min-width: 768px) {
    .cta-split-card {
        grid-template-columns: 1fr 1.15fr;
    }
}

/* Outer Glow Animation */
.cta-split-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(45deg, transparent, rgba(12, 255, 167, 0.3), transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
    opacity: 0.6;
}

/* Left Panel */
.cta-left-panel {
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    border-right: 1px solid rgba(12, 255, 167, 0.1);
    background: linear-gradient(180deg, rgba(12, 255, 167, 0.03) 0%, rgba(0, 0, 0, 0) 100%);
}

@media (max-width: 767px) {
    .cta-left-panel {
        border-right: none;
        border-bottom: 1px solid rgba(12, 255, 167, 0.1);
        padding: 2.5rem 2rem;
    }
}

/* Big Number Typography */
.cta-stat-container {
    display: flex;
    align-items: center;
    /* Changed from flex-end to center to help with height alignment */
    margin-bottom: 3rem;
    height: auto;
}

.cta-big-number {
    /* Increased by ~50% from previous 5/7.5/8rem */
    font-size: clamp(7.5rem, 11vw, 12rem);
    font-weight: 800;
    color: #cbffe8;
    text-shadow: 0 0 40px rgba(12, 255, 167, 0.4);
    background: linear-gradient(180deg, #ffffff 20%, #0cffa7 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.06em;
    position: relative;
    z-index: 1;
    /* Aggressive fix for clipped right edge of "0" */
    padding-right: 0.15em;
    margin-right: -0.15em;
    line-height: 0.75;
    /* Tight line height to match visual cap height */
    display: block;
}

.cta-badge-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    /* Distribute space to match height of "10" */
    height: clamp(5.6rem, 8.25vw, 9rem);
    /* Calculated to match cap-height of big number approx 0.75 * font-size */
    margin-left: 0.5rem;
    padding-bottom: 0;
}

.cta-percent {
    /* Increased heavily to fill vertical space and reduce gap by half */
    font-size: clamp(5.4rem, 8vw, 8.8rem);
    font-weight: 800;
    color: #cbffe8;
    text-shadow: 0 0 30px rgba(12, 255, 167, 0.4);
    background: linear-gradient(180deg, #ffffff 20%, #0cffa7 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 0.75;
    margin-bottom: 0;
    margin-top: -0.05em;
    /* Adjusted optical alignment */
}

.cta-stat-badge {
    background: #0cffa7;
    color: #05080a;
    font-size: clamp(0.9rem, 1.3vw, 1.4rem);
    /* Increased scale */
    font-weight: 800;
    text-transform: uppercase;
    padding: 0.4rem 1rem;
    border-radius: 100px;
    box-shadow: 0 0 20px rgba(12, 255, 167, 0.4);
    display: inline-block;
    letter-spacing: 0.08em;
    line-height: 1;
    white-space: nowrap;
    width: 100%;
    /* Ensure it fills width if needed, or optically balances */
    text-align: center;
}

/* Feature List (Icons) */
.cta-mini-stats {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.feature-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.feature-icon {
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    color: #0cffa7;
    filter: drop-shadow(0 0 8px rgba(12, 255, 167, 0.3));
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 1.5;
}

.feature-text {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.2;
}

.feature-text small {
    display: block;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    font-weight: 400;
    margin-top: 3px;
}

/* Right Panel */
.cta-right-panel {
    padding: 3rem 3rem 3rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
    /* For chart clipping */
}

@media (max-width: 767px) {
    .cta-right-panel {
        padding: 3rem 2rem;
    }
}

/* Background Chart */
.chart-bg {
    position: absolute;
    bottom: -10%;
    right: -10%;
    width: 120%;
    height: 80%;
    opacity: 0.4;
    pointer-events: none;
    z-index: 0;
    transform: rotate(-3deg);
}

.chart-path {
    fill: none;
    stroke: #0cffa7;
    stroke-width: 2;
    filter: drop-shadow(0 0 8px rgba(12, 255, 167, 0.5));
}

.chart-gradient {
    fill: url(#chartGradient);
    opacity: 0.15;
}

.cta-content-wrapper {
    position: relative;
    z-index: 1;
}

.cta-title-neon {
    font-size: clamp(2rem, 3vw, 2.5rem);
    font-weight: 700;
    color: #fff;
    margin-bottom: 1.25rem;
    line-height: 1.1;
}

.cta-desc-neon {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 2.5rem;
    line-height: 1.6;
    max-width: 440px;
}

/* Shiny Button */
/* Standardized Primary Button (matching Newsletter) */
.cta-button-neon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-green);
    color: #000;
    font-weight: 500;
    font-size: 21px;
    text-transform: none;
    /* Changed from uppercase */
    letter-spacing: normal;
    /* Changed from 0.05em */
    padding: 16px 32px;
    border-radius: 12px;
    /* Changed from 8px to match --radius: 12 */
    text-decoration: none;
    position: relative;
    overflow: hidden;
    border: none;
    /* Removed specific border */
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    /* Matched base shadow */
    transition: all 0.3s ease;
    width: fit-content;
    font-family: 'Urbanist', sans-serif;
}

.cta-button-neon:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(12, 255, 167, 0.3);
    background: var(--brand-green-dark);
}

.cta-button-neon::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
            transparent,
            rgba(255, 255, 255, 0.4),
            transparent);
    transform: rotate(45deg) translate(-150%, -150%);
    animation: shine 4s infinite linear;
}

@keyframes shine {
    0% {
        transform: rotate(45deg) translate(-150%, -150%);
    }

    20% {
        transform: rotate(45deg) translate(250%, 250%);
    }

    100% {
        transform: rotate(45deg) translate(250%, 250%);
    }
}

/* Section Header with Neon Number */
.section-header-block {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
    margin-top: 4rem;
}

.section-number-neon {
    font-size: clamp(3.5rem, 6vw, 5.5rem);
    font-weight: 800;
    line-height: 1.2;
    color: #cbffe8;
    text-shadow: 0 0 30px rgba(12, 255, 167, 0.5);
    background: linear-gradient(180deg, #ffffff 20%, #0cffa7 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.04em;
    flex-shrink: 0;
    padding: 1rem 0.5rem;
    margin: -1rem -0.5rem;
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-number-neon.revealed {
    opacity: 1;
    transform: translateX(0);
    animation: numberPulse 0.4s ease-out;
}

@keyframes numberPulse {
    0% {
        filter: brightness(1) blur(0);
    }

    50% {
        filter: brightness(2) blur(2px);
        text-shadow: 0 0 40px var(--brand-green);
    }

    100% {
        filter: brightness(1) blur(0);
    }
}

.section-title-text {
    font-size: clamp(1.5rem, 3vw, 2.75rem);
    font-weight: 700;
    color: var(--text-white);
    line-height: 1.2;
    margin: 0;
    position: relative;
    opacity: 0;
    transform: translateX(-30px);
    /* Slidin from left starting position */
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-title-text.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* Scanline removed in favour of slide-in effect */
.section-title-text::after {
    display: none;
}

/* ==========================================================================
   Section 01 Redesign - Variant A (Structured Clarity)
   ========================================================================== */

.split-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    align-items: start;
}

@media (min-width: 900px) {
    .split-layout {
        grid-template-columns: 1fr 1fr;
        gap: 6rem;
    }
}

/* Profile Column */
.profile-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.highlight-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 0.5rem;
}

.neon-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.neon-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 1.125rem;
    color: var(--text-white);
    line-height: 1.5;
}

.neon-checklist li.faded {
    color: var(--text-gray);
}

.check-icon {
    color: var(--brand-green);
    font-weight: 700;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.cross-icon {
    color: #ff4d4d;
    /* Subtle red for 'not' items */
    font-weight: 700;
    font-size: 1.25rem;
    flex-shrink: 0;
    opacity: 0.8;
}

.quote-box-simple {
    margin-top: 1rem;
    background: rgba(12, 255, 167, 0.05);
    border-left: 3px solid var(--brand-green);
    padding: 1.5rem;
    font-style: italic;
    color: var(--text-gray);
    font-size: 1.125rem;
    border-radius: 0 0.75rem 0.75rem 0;
}

/* Industry Tag Cloud Redesign */
/* Industry Tag Cloud Redesign */
.industry-tag-cloud {
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 2rem;
    padding: 3rem;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

/* Levitating & Moving Green Aura */
.industry-tag-cloud::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140%;
    height: 140%;
    background: radial-gradient(circle, rgba(12, 255, 167, 0.08) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
    animation: moveAura 15s linear infinite;
}

@keyframes moveAura {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }

    33% {
        transform: translate(-45%, -55%) rotate(5deg) scale(1.1);
    }

    66% {
        transform: translate(-55%, -45%) rotate(-5deg) scale(0.9);
    }

    100% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
}

.cloud-title {
    position: relative;
    z-index: 2;
    font-size: 0.85rem;
    color: var(--brand-green);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 2.5rem;
    font-weight: 700;
    opacity: 0.8;
}

.tag-cloud-wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    justify-content: center;
    align-items: center;
}

.floating-tag {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.8rem 1.5rem;
    border-radius: 100px;
    font-size: 1rem;
    color: var(--text-white);
    cursor: default;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: floatNatural var(--float-duration, 8s) ease-in-out infinite alternate;
    animation-delay: var(--float-delay, 0s);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.floating-tag:hover {
    background: rgba(12, 255, 167, 0.15);
    border-color: var(--brand-green);
    color: #fff;
    transform: scale(1.1) rotate(0deg) !important;
    box-shadow: 0 10px 25px rgba(12, 255, 167, 0.2);
    z-index: 10;
}

@keyframes floatNatural {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(var(--float-x, 8px), var(--float-y, -12px)) rotate(var(--float-rot, 1deg));
    }

    66% {
        transform: translate(calc(var(--float-x, 8px) * -0.5), calc(var(--float-y, -12px) * 0.8)) rotate(calc(var(--float-rot, 1deg) * -1));
    }

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

/* Staggered Floating Dynamics */
.floating-tag:nth-child(5n+1) {
    --float-duration: 8s;
    --float-delay: 0s;
    --float-x: 10px;
    --float-y: -15px;
    --float-rot: 2deg;
}

.floating-tag:nth-child(5n+2) {
    --float-duration: 10s;
    --float-delay: -2s;
    --float-x: -12px;
    --float-y: -10px;
    --float-rot: -1.5deg;
}

.floating-tag:nth-child(5n+3) {
    --float-duration: 7s;
    --float-delay: -4s;
    --float-x: 15px;
    --float-y: -5px;
    --float-rot: 1deg;
}

.floating-tag:nth-child(5n+4) {
    --float-duration: 12s;
    --float-delay: -1s;
    --float-x: -8px;
    --float-y: -18px;
    --float-rot: -2.5deg;
}

.floating-tag:nth-child(5n+5) {
    --float-duration: 9s;
    --float-delay: -3s;
    --float-x: 5px;
    --float-y: -14px;
    --float-rot: 2.5deg;
}

/* Section 01 Entrance Animations */
/* Checklist Items */
.neon-checklist li {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.check-icon {
    transform: scale(0);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Pop effect */
}

.neon-checklist li.visible {
    opacity: 1;
    transform: translateY(0);
}

.neon-checklist li.visible .check-icon {
    transform: scale(1);
    transition-delay: 0.2s;
    /* Icon appears slightly after text settles */
}

/* Tag Cloud Entrance */
.floating-tag {
    /* Existing styles plus initial state */
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.floating-tag.visible {
    opacity: 1;
    /* Transform is handled by floatNatural animation, 
       but we need to ensure the initial pop works. 
       We'll use a wrapper or separate animation class if conflict arises. 
       For now, let's override transform just for entrance, then let animation take over? 
       Actually, mixing transition and keyframe animation on same property is tricky.
       Better appraoch: Use an animation for entrance that ends with the floating Keyframe.
    */
    animation: tagPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, floatNatural var(--float-duration, 8s) ease-in-out infinite alternate var(--float-delay, 0s);
}

@keyframes tagPop {
    0% {
        opacity: 0;
        transform: scale(0);
    }

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


/* ==========================================================================
   Section 02 Redesign - The Integrated Circuit
   ========================================================================== */

.integrated-circuit {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 0;
}

/* The Glowing Line */
.circuit-line {
    position: absolute;
    top: 50px;
    bottom: 50px;
    left: 49px;
    /* Centered in the 100px node (50px center - 1px width) */
    width: 2px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 0;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.integrated-circuit.visible .circuit-line {
    transform: scaleY(1);
}

.circuit-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 300px;
    background: linear-gradient(180deg, transparent, var(--brand-green), transparent);
    opacity: 0.5;
    animation: pulseLine 3s ease-in-out infinite;
}

@keyframes pulseLine {
    0% {
        top: -300px;
        opacity: 0;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

.circuit-step {
    position: relative;
    display: flex;
    gap: 3rem;
    padding-bottom: 4rem;
}

.circuit-step:last-child {
    padding-bottom: 0;
}

/* Fix: Line sticking out below the last icon */
.circuit-step:last-child::after {
    content: '';
    position: absolute;
    top: 50px;
    /* Center of the node */
    bottom: 0;
    left: 49px;
    /* Align with the vertical line */
    width: 2px;
    background: var(--dark-bg);
    /* Cover the line with the section background */
    z-index: 1;
    /* Above the line (z-index 0) and below the node (z-index 2) */
}

/* The Node */
.circuit-node {
    position: relative;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dark-bg);
    border: 2px solid rgba(12, 255, 167, 0.3);
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 15px rgba(12, 255, 167, 0.1);
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.circuit-step.visible .circuit-node {
    opacity: 1;
    transform: scale(1);
    border-color: var(--brand-green);
    box-shadow: 0 0 30px rgba(12, 255, 167, 0.4);
}

.circuit-step:hover .circuit-node {
    transform: scale(1.1);
}

.node-icon {
    font-size: 2rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Content Card */
.circuit-content {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 24px;
    flex: 1;
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.circuit-step.visible .circuit-content {
    opacity: 1;
    transform: translateX(0);
}

.circuit-step:hover .circuit-content {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(12, 255, 167, 0.3);
    transform: translateX(10px);
}

.circuit-content h3 {
    color: var(--text-white);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.circuit-content p {
    color: var(--text-gray);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

.highlight-box {
    /* Ensuring highlight box works with new layout if needed */
    margin-top: 4rem;
}

/* ==========================================================================
   Section 03 Redesign - The Holographic Grid (Bento 2.0)
   ========================================================================== */

.holographic-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .holographic-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

@media (min-width: 1024px) {
    .holographic-grid {
        grid-template-columns: repeat(3, 1fr);
        /* grid-template-rows: auto auto auto; */
    }

    /* Core Item (Technology Execution) spans 2 rows */
    .holo-card.core-tech {
        grid-column: span 2;
        grid-row: span 2;
        background: radial-gradient(circle at top right, rgba(12, 255, 167, 0.08), rgba(12, 16, 18, 0.95) 60%);
    }

    .holo-card.small-item {
        grid-column: span 1;
        grid-row: span 1;
    }
}

.holo-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    /* Glass border */
    border-radius: 1.5rem;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(12px);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Align content to bottom */
    min-height: 240px;

    /* Animation Initial State */
    opacity: 0;
}

/* Holographic Reveal Animation Keyframes */
@keyframes holographicReveal {
    0% {
        opacity: 0;
        filter: brightness(3) blur(10px);
        transform: scale(0.95);
    }

    20% {
        opacity: 1;
        filter: brightness(2) blur(2px);
        transform: scale(1.02) skewX(2deg);
    }

    50% {
        filter: brightness(1.5);
        transform: scale(1) skewX(-1deg);
    }

    100% {
        opacity: 1;
        filter: brightness(1) blur(0);
        transform: scale(1) skewX(0);
    }
}

.holo-card.visible {
    animation: holographicReveal 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Hover Effect: Rise + Dim Others (Optional via JS, but CSS can do simple scale) */
.holo-card:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: rgba(12, 255, 167, 0.4);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
    background: rgba(255, 255, 255, 0.06);
    z-index: 10;
}

/* Background Number */
.holo-number {
    position: absolute;
    top: -1rem;
    right: 0rem;
    font-size: 8rem;
    font-weight: 800;
    line-height: 1;
    color: rgba(255, 255, 255, 0.02);
    font-family: 'Urbanist', sans-serif;
    pointer-events: none;
    transition: all 0.4s ease;
}

.holo-card:hover .holo-number {
    color: rgba(12, 255, 167, 0.05);
    /* Glows slightly on hover */
    transform: translate(-10px, 10px);
}

/* Content */
.holo-content {
    position: relative;
    z-index: 2;
}

.holo-card h3 {
    font-size: 1.25rem;
    color: var(--text-white);
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.holo-card p {
    font-size: 0.95rem;
    color: var(--text-gray);
    line-height: 1.5;
    margin: 0;
}

/* Special styling for the Core Tech card */
.holo-card.core-tech {
    justify-content: center;
    /* Center content vertically */
    padding: 3rem;
    border: 1px solid rgba(12, 255, 167, 0.15);
    /* Subtle green border */
}

.holo-card.core-tech::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(12, 255, 167, 0.05), transparent 60%);
    z-index: 0;
}

.holo-card.core-tech h3 {
    font-size: 2rem;
    /* Larger title */
    margin-bottom: 1.5rem;
    background: linear-gradient(90deg, #fff, #b3ffda);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.holo-card.core-tech p {
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 80%;
}

/* Compensation Footer in Grid - Now 2 columns on the right */
.holo-card.compensation {
    grid-column: 2 / 4;
    /* Span cols 2 and 3 */
    background: linear-gradient(90deg, rgba(12, 255, 167, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-color: rgba(12, 255, 167, 0.2);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 1rem;
    min-height: auto;
    padding: 2.5rem;
}

@media (max-width: 1023px) {
    .holo-card.compensation {
        grid-column: 1 / -1;
        /* Full width on smaller screens */
    }
}

.holo-card.compensation h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
}

@media (max-width: 768px) {
    .holo-card.compensation {
        flex-direction: column;
        align-items: flex-start;
    }

    .holo-card.core-tech p {
        max-width: 100%;
    }
}

/* ==========================================================================
   Section 04 Redesign - The Value Ledger (Minimalist Typography)
   ========================================================================== */

.value-ledger {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.benefit-item {
    position: relative;
    padding: 2.5rem 0;
    /* Removed static border-bottom */
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    cursor: default;
}

/* Laser Line (Bottom) */
.benefit-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);

}

.benefit-item.visible::after {
    width: 100%;
}



.benefit-item:first-child::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.benefit-item.visible:first-child::before {
    width: 100%;
}

@media (min-width: 768px) {
    .benefit-item {
        grid-template-columns: 80px 1fr 1fr;
        align-items: center;
        /* Center vertically for a clean line */
        gap: 3rem;
    }
}

/* 1. Counter (The Number) */
.benefit-counter {
    font-family: 'Urbanist', sans-serif;
    font-size: 1.5rem;
    color: var(--text-gray);
    font-weight: 400;
    text-align: left;

    /* Animation Init */
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s ease, color 0.3s ease;
    /* Added color transition for hover */
}

/* 2. Benefit Title (The statement) */
.benefit-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-white);
    margin: 0;
    line-height: 1.25;

    /* Animation Init */
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* 3. Benefit Description (The detail) */
.benefit-desc {
    font-size: 1.125rem;
    color: var(--text-gray);
    margin: 0;
    line-height: 1.6;

    /* Animation Init */
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Visible States (Triggered by JS) */
.benefit-item.visible .benefit-counter {
    opacity: 0.4;
    /* Default dim state */
    transform: translateY(0);
    transition-delay: 0.1s;
}

.benefit-item.visible .benefit-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.15s;
}

.benefit-item.visible .benefit-desc {
    opacity: 0.6;
    transform: translateY(0);
    transition-delay: 0.2s;
}

/* Hover Interaction: Editorial Highlight */
.benefit-item:hover {
    border-color: rgba(12, 255, 167, 0.4);
    /* Subtle highlight on background */
    background: linear-gradient(90deg, transparent, rgba(12, 255, 167, 0.05) 50%, transparent);
}

.benefit-item:hover .benefit-counter {
    color: var(--brand-green);
    opacity: 1;
    font-weight: 700;
    transform: translateX(5px);
}

.benefit-item:hover .benefit-title {
    text-shadow: 0 0 25px rgba(12, 255, 167, 0.2);
    transform: translateX(5px);
}

.benefit-item:hover .benefit-desc {
    color: var(--text-white);
    opacity: 1;
    transform: translateX(5px);
}

/* Mobile Adjustment overrides */
@media (max-width: 767px) {
    .benefit-item {
        grid-template-columns: auto 1fr;
        align-items: start;
        gap: 1rem;
        padding: 2rem 0;
    }

    .benefit-counter {
        grid-row: 1;
        font-size: 1.25rem;
    }

    .benefit-title {
        grid-column: 2;
        grid-row: 1;
        font-size: 1.35rem;
    }

    .benefit-desc {
        grid-column: 1 / -1;
        font-size: 1rem;
        margin-top: 0.5rem;
    }
}

/* ==========================================================================
   Section 05 Redesign - The Symbiosis (Interlocking Panels)
   ========================================================================== */

.symbiosis-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 900px) {
    .symbiosis-container {
        grid-template-columns: 1fr 1fr;
        gap: 0;
        /* Remove gap to create interlocking look */
        align-items: stretch;
    }
}

.symbiosis-column {
    padding: 3rem;
    border-radius: 1.5rem;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

/* Column 1: Personit's Gain (Darker, grounding) */
.symbiosis-column.gain {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

@media (min-width: 900px) {
    .symbiosis-column.gain {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-right: none;
        padding-right: 4rem;
        /* Animation Initial State: Shifted towards center */
        opacity: 0;
        transform: translateX(50px);
        transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s;
    }

    .symbiosis-column.gain.visible {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Column 2: Expectations (Lighter/Accent, requirements) */
.symbiosis-column.expectations {
    background: rgba(12, 255, 167, 0.03);
    border: 1px solid rgba(12, 255, 167, 0.1);
}

@media (min-width: 900px) {
    .symbiosis-column.expectations {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-left: 1px solid rgba(12, 255, 167, 0.2);
        padding-left: 4rem;
        position: relative;
        /* Animation Initial State: Shifted towards center */
        opacity: 0;
        transform: translateX(-50px);
        transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s;
    }

    .symbiosis-column.expectations.visible {
        opacity: 1;
        transform: translateX(0);
    }

    /* The Glowing Connector Line (Thin) */
    .symbiosis-column.expectations::before {
        content: '';
        position: absolute;
        top: 15%;
        bottom: 15%;
        left: -1px;
        width: 2px;
        background: var(--brand-green);
        box-shadow: 0 0 15px var(--brand-green);
        z-index: 2;
        transform: scaleY(0);
        transform-origin: center;
        transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    /* Thicker backing line (per request) */
    .symbiosis-column.expectations::after {
        content: '';
        position: absolute;
        top: 25%;
        bottom: 25%;
        left: -3px;
        width: 6px;
        background: rgba(12, 255, 167, 0.2);
        z-index: 1;
        transform: scaleY(0);
        transform-origin: center;
        transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
        transition-delay: 0.1s;
    }

    .symbiosis-column.expectations.visible::before,
    .symbiosis-column.expectations.visible::after {
        transform: scaleY(1);
    }
}

.symbiosis-header {
    margin-bottom: 2.5rem;
    position: relative;
}

.symbiosis-header h3 {
    font-size: 1.75rem;
    color: var(--text-white);
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.symbiosis-header p {
    color: var(--text-gray);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.7;
    margin: 0;
}

.symbiosis-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.symbiosis-item {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

.symbiosis-icon {
    width: 32px;
    height: 32px;
    color: var(--brand-green);
    flex-shrink: 0;
    margin-top: 4px;
}

.symbiosis-content h4 {
    font-size: 1.15rem;
    color: var(--text-white);
    margin: 0 0 0.5rem 0;
    font-weight: 600;
}

.symbiosis-content p {
    font-size: 1rem;
    color: var(--text-gray);
    margin: 0;
    line-height: 1.6;
    opacity: 0.8;
}

/* Hover effects */
.symbiosis-column:hover {
    background: rgba(255, 255, 255, 0.04);
}

.symbiosis-column.expectations:hover {
    background: rgba(12, 255, 167, 0.05);
}

/* ==========================================================================
   Section 06 Redesign - The Launchpad (High-Focus CTA)
   ========================================================================== */

/* Layout: Split or Stacked depending on content density */
.launchpad-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
}

@media (min-width: 900px) {
    .launchpad-container {
        grid-template-columns: 1fr 1fr;
        align-items: center;
        /* Center vertically for balanced look */
    }
}

/* LEFT COLUMN: Models Cards */
.models-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.models-intro {
    margin-bottom: 2rem;
}

.models-intro h3 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 0.75rem;
}

.models-intro p {
    font-size: 1.1rem;
    color: var(--text-gray);
    line-height: 1.6;
}

.model-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 2rem;
    transition: all 0.3s ease;
    cursor: default;
    position: relative;
    overflow: hidden;
}

.model-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(12, 255, 167, 0.3);
    transform: translateX(5px);
}

.model-card h4 {
    font-size: 1.35rem;
    /* Slightly larger for clarity */
    color: var(--text-white);
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
}

.model-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--brand-green);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--brand-green);
}

.model-card p {
    font-size: 1rem;
    color: var(--text-gray);
    margin: 0;
    line-height: 1.5;
    padding-left: 1.25rem;
    /* Align with text start */
    opacity: 0.8;
}

/* RIGHT COLUMN: The Final CTA (Heroic) */
.launchpad-cta-box {
    background: radial-gradient(circle at top right, rgba(12, 255, 167, 0.08) 0%, rgba(20, 24, 27, 0.6) 100%);
    border: 1px solid rgba(12, 255, 167, 0.2);
    border-radius: 2rem;
    padding: 4rem 3rem;
    text-align: center;
    position: relative;
    box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.launchpad-cta-box h2 {
    font-family: 'Urbanist', sans-serif;
    font-size: 2.75rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #fff;
    line-height: 1.1;
    z-index: 2;
}

.launchpad-cta-box p {
    color: var(--text-gray);
    font-size: 1.1rem;
    margin-bottom: 2.5rem;
    max-width: 400px;
    z-index: 2;
}

/* Enhancing existing neon button for this context */
.launchpad-cta-box .cta-button-neon {
    font-size: 1.25rem;
    padding: 1.25rem 3rem;
    z-index: 2;
}

/* Background pulse effect behind CTA */
.launchpad-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    background: var(--brand-green);
    filter: blur(100px);
    opacity: 0.15;
}

/* ==========================================================================
   Section 06 Redesign - Steps & Models
   ========================================================================== */

.section-06-container {
    display: flex;
    flex-direction: column;
    gap: 6rem;
    /* Large gap between Steps and Models */
}

/* --- Part 1: Horizontal Steps --- */
.steps-horizontal-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 1rem;
}

@media (min-width: 900px) {
    .steps-horizontal-wrapper {
        grid-template-columns: repeat(3, 1fr);
        /* 3 equal columns */
        gap: 3rem;
    }
}

.start-step-item {
    display: flex;
    flex-direction: column;
    /* Stack badge above text or left aligned? Screenshot suggests flex-row logic but vertical visual stack usually better for 3-col. Let's keep flex-row for compact alignment if texts are short, or flex-column if distinct icon look. Screenshot 1 has Badge Left, Text Right. */
    gap: 1.5rem;
    align-items: flex-start;

    /* Animation Initial State */
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.start-step-item.visible {
    opacity: 1;
    transform: translateY(0);
}

.step-badge {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.05);
    /* Dark circle from screenshot */
    color: var(--brand-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Urbanist', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.step-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.step-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-white);
    margin: 0;
    line-height: 1.3;
}

.step-desc {
    font-size: 1rem;
    color: var(--text-gray);
    line-height: 1.6;
    margin: 0;
    opacity: 0.8;
}


/* --- Part 2: Collaboration Models (Visually Separated) --- */
.models-section-wrapper {
    padding-top: 6rem;
    position: relative;
}

.models-section-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.models-section-wrapper.visible::before {
    transform: scaleX(1);
}

.models-header {
    margin-bottom: 3rem;
    max-width: 700px;
    opacity: 0;
    transform: translateY(25px);
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.models-header.visible {
    opacity: 1;
    transform: translateY(0);
}

.models-header h3 {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 1rem;
}

.models-header p {
    font-size: 1.1rem;
    color: var(--text-gray);
    line-height: 1.6;
}

.models-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 900px) {
    .models-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

/* Modern Model Card */
.model-card-modern {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.5rem;
    padding: 2rem;
    transition: all 0.3s ease, opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
    opacity: 0;
    transform: translateY(30px);
}

.model-card-modern.visible {
    opacity: 1;
    transform: translateY(0);
}

.model-card-modern:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(12, 255, 167, 0.3);
    transform: translateY(-5px);
}

.model-header-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.model-dot-pulse {
    width: 10px;
    height: 10px;
    background: var(--brand-green);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--brand-green);
    flex-shrink: 0;
}

.model-card-modern h4 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-white);
    margin: 0;
}

.model-card-modern p {
    font-size: 1.05rem;
    color: var(--text-gray);
    margin: 0;
    line-height: 1.6;
}

/* ==========================================================================
   MOBILE RESPONSIVENESS — Tablet & Phone (≤768px)
   ========================================================================== */

@media (max-width: 768px) {

    /* --- Base & Spacing --- */
    main {
        padding: 2rem 0.75rem;
    }

    .partnership-section {
        margin-bottom: 4rem;
    }

    /* --- Header --- */
    .site-header {
        padding: 16px 0;
    }

    .logo {
        height: 40px;
    }

    .footer-logo img {
        height: 40px;
    }

    /* --- Hero --- */
    .partnership-hero {
        padding: 150px 0 40px;
    }

    .partnership-hero-wrapper {
        gap: 2rem;
    }

    .partnership-hero-subtitle {
        font-size: 1.1rem;
        margin-bottom: 2rem;
    }

    /* --- CTA Split Card --- */
    .cta-split-card {
        border-radius: 16px;
        display: flex;
        flex-direction: column;
    }

    /* Mobile CTA Alignment */
    .cta-left-panel {
        align-items: center;
        /* keep overall centered, BUT... */
        width: 100%;
    }

    .cta-stat-container {
        justify-content: flex-end;
        /* "10% minimum" to the right */
        width: 100%;
        margin-right: 0;
    }

    .cta-mini-stats {
        width: 100%;
        align-items: flex-start;
        /* Container to left */
    }

    .cta-mini-stats .feature-row {
        justify-content: flex-start;
        /* Icon + text to left */
        text-align: left;
        width: 100%;
    }

    .cta-stat-container {
        margin-bottom: 2rem;
    }

    .cta-big-number {
        font-size: clamp(5rem, 18vw, 7.5rem);
    }

    .cta-percent {
        font-size: clamp(3.5rem, 14vw, 5.5rem);
    }

    .cta-badge-stack {
        height: clamp(3.8rem, 13.5vw, 5.6rem);
    }

    .cta-stat-badge {
        font-size: clamp(0.75rem, 2.5vw, 1rem);
        padding: 0.3rem 0.8rem;
    }

    .feature-icon {
        width: 2.25rem;
        height: 2.25rem;
    }

    .feature-text {
        font-size: 1rem;
    }

    .feature-text small {
        font-size: 0.8rem;
    }

    .cta-title-neon {
        font-size: clamp(1.5rem, 5vw, 2rem);
    }

    .cta-desc-neon {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

    .cta-button-neon {
        font-size: 17px;
        padding: 14px 28px;
        width: 100%;
        justify-content: center;
    }

    /* --- Section Headers --- */
    .section-header-block {
        margin-top: 2rem;
        margin-bottom: 2rem;
        gap: 1rem;
    }

    .section-number-neon {
        font-size: clamp(2.5rem, 10vw, 3.5rem);
    }

    .section-title-text {
        font-size: clamp(1.25rem, 5vw, 2rem);
    }

    /* --- Section 01: Who is it for? --- */
    .highlight-title {
        font-size: 1.25rem;
    }

    .neon-checklist li {
        font-size: 1rem;
    }

    .industry-tag-cloud {
        padding: 1.5rem;
        min-height: 280px;
        border-radius: 1.25rem;
    }

    .tag-cloud-wrapper {
        gap: 0.8rem;
    }

    .floating-tag {
        padding: 0.6rem 1.1rem;
        font-size: 0.875rem;
    }

    /* Reduce float animation amplitude on mobile */
    .floating-tag:nth-child(5n+1) {
        --float-x: 5px;
        --float-y: -8px;
        --float-rot: 1deg;
    }

    .floating-tag:nth-child(5n+2) {
        --float-x: -6px;
        --float-y: -5px;
        --float-rot: -1deg;
    }

    .floating-tag:nth-child(5n+3) {
        --float-x: 7px;
        --float-y: -3px;
        --float-rot: 0.5deg;
    }

    .floating-tag:nth-child(5n+4) {
        --float-x: -4px;
        --float-y: -9px;
        --float-rot: -1.5deg;
    }

    .floating-tag:nth-child(5n+5) {
        --float-x: 3px;
        --float-y: -7px;
        --float-rot: 1.5deg;
    }

    .cloud-title {
        font-size: 0.75rem;
        margin-bottom: 1.5rem;
    }

    /* --- Section 02: How it works? --- */
    .circuit-step {
        gap: 1.5rem;
        padding-bottom: 2.5rem;
    }

    .circuit-node {
        width: 60px;
        height: 60px;
    }

    .node-icon {
        font-size: 1.25rem;
    }

    .node-icon svg {
        width: 24px;
        height: 24px;
    }

    .circuit-line {
        left: 29px;
    }

    .circuit-step:last-child::after {
        left: 29px;
    }

    .circuit-content {
        padding: 16px;
    }

    .circuit-content h3 {
        font-size: 1.1rem;
    }

    .circuit-content p {
        font-size: 0.9rem;
    }

    /* --- Section 03: Holographic Grid --- */
    .holo-card {
        min-height: 180px;
        padding: 1.5rem;
        border-radius: 1.25rem;
    }

    .holo-card.core-tech {
        padding: 2rem;
    }

    .holo-card.core-tech h3 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .holo-card.core-tech p {
        font-size: 1rem;
    }

    .holo-number {
        font-size: 5rem;
    }

    .holo-card.compensation {
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
    }

    /* Fix for 10% overlap in compensation card */
    .holo-card.compensation>div:last-child {
        margin: 2rem 0 0 0 !important;
        position: relative !important;
        transform: none !important;
        width: 100% !important;
        border: none !important;
        background: none !important;
        padding: 0 !important;
        min-width: 0 !important;
    }

    .holo-card.compensation .cta-stat-container {
        justify-content: center !important;
        margin-bottom: 0 !important;
    }

    .holo-card.compensation .cta-big-number {
        font-size: 6rem !important;
    }

    .holo-card.compensation h3 {
        font-size: 1.25rem;
    }

    /* --- Section 04: Value Ledger --- */
    .benefit-title {
        font-size: 1.25rem;
    }

    .benefit-desc {
        font-size: 1rem;
    }

    /* --- Section 05: Symbiosis --- */
    .symbiosis-column {
        padding: 2rem;
        border-radius: 1.25rem;
    }

    .symbiosis-header h3 {
        font-size: 1.35rem;
    }

    .symbiosis-header p {
        font-size: 0.85rem;
    }

    .symbiosis-content h4 {
        font-size: 1.05rem;
    }

    .symbiosis-content p {
        font-size: 0.9rem;
    }

    .symbiosis-icon {
        width: 26px;
        height: 26px;
    }

    /* Make symbiosis columns visible by default on mobile (no translateX animation) */
    .symbiosis-column.gain,
    .symbiosis-column.expectations {
        opacity: 1;
        transform: none;
    }

    /* --- Section 06: How to Start + Models --- */
    .section-06-container {
        gap: 4rem;
    }

    .step-badge {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
    }

    .step-title {
        font-size: 1.1rem;
    }

    .step-desc {
        font-size: 0.9rem;
    }

    .models-section-wrapper {
        padding-top: 3rem;
    }

    .models-header h3 {
        font-size: 1.75rem;
    }

    .models-header p {
        font-size: 1rem;
    }

    .model-card-modern {
        padding: 1.5rem;
        border-radius: 1.25rem;
    }

    .model-card-modern h4 {
        font-size: 1.25rem;
    }

    .model-card-modern p {
        font-size: 0.95rem;
    }

    /* --- Launchpad CTA --- */
    .launchpad-cta-box {
        padding: 2.5rem 1.5rem;
        border-radius: 1.5rem;
    }

    .launchpad-cta-box h2 {
        font-size: 2rem;
    }

    .launchpad-cta-box p {
        font-size: 1rem;
        max-width: 100%;
    }

    .launchpad-cta-box .cta-button-neon {
        font-size: 1.1rem;
        padding: 1rem 2.5rem;
    }

    /* --- Footer CTA --- */
    .partnership-footer {
        padding: 3rem 1rem;
    }

    .footer-cta-card {
        padding: 2.5rem 1.5rem;
        border-radius: 1.25rem;
    }

    .partnership-footer h2 {
        font-size: clamp(1.5rem, 5vw, 2rem);
    }

    .partnership-footer p {
        font-size: 1.05rem;
    }

    .btn-primary {
        font-size: 1rem;
        padding: 0.85rem 1.75rem;
    }

    /* --- Footer --- */
    .site-footer {
        padding: 32px 0 24px;
    }

    .footer-links-section {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }

    /* --- Disable translateX hover effects on touch devices --- */
    .benefit-item:hover .benefit-counter,
    .benefit-item:hover .benefit-title,
    .benefit-item:hover .benefit-desc {
        transform: none;
    }

    .model-card:hover {
        transform: none;
    }

    .circuit-step:hover .circuit-content {
        transform: none;
    }

    .holo-card:hover {
        transform: none;
    }
}

/* ==========================================================================
   MOBILE RESPONSIVENESS — Small Phones (≤480px)
   ========================================================================== */

@media (max-width: 480px) {

    /* --- Base --- */
    main {
        padding: 1.5rem 0.5rem;
    }

    .container {
        padding: 0 0.5rem;
    }

    /* --- Hero --- */
    .partnership-hero {
        padding: 140px 0 30px;
    }

    .partnership-hero h1 {
        margin-bottom: 16px;
    }

    .partnership-hero-subtitle {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    /* --- CTA Card: Further scale "10%" --- */
    .cta-left-panel {
        padding: 2rem 1.25rem;
    }

    .cta-big-number {
        font-size: clamp(4rem, 20vw, 5.5rem);
    }

    .cta-percent {
        font-size: clamp(2.8rem, 16vw, 4rem);
    }

    .cta-badge-stack {
        height: clamp(3rem, 15vw, 4rem);
        margin-left: 0.25rem;
    }

    .cta-stat-badge {
        font-size: 0.7rem;
        padding: 0.25rem 0.6rem;
    }

    .cta-right-panel {
        padding: 2rem 1.25rem;
    }

    .cta-desc-neon {
        font-size: 0.9rem;
    }

    /* --- Section Headers --- */
    .section-header-block {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .section-number-neon {
        font-size: clamp(2rem, 12vw, 3rem);
        padding: 0.5rem 0.25rem;
        margin: -0.5rem -0.25rem;
    }

    .section-title-text {
        font-size: clamp(1.1rem, 5.5vw, 1.5rem);
    }

    /* --- Section 01 --- */
    .profile-column {
        gap: 0.75rem;
    }

    .highlight-title {
        font-size: 1.1rem;
    }

    .neon-checklist {
        gap: 0.5rem;
    }

    .neon-checklist li {
        font-size: 0.9rem;
        gap: 0.5rem;
    }

    .check-icon,
    .cross-icon {
        font-size: 1rem;
    }

    .industry-tag-cloud {
        padding: 1.25rem;
        min-height: 240px;
    }

    .tag-cloud-wrapper {
        gap: 0.6rem;
    }

    .floating-tag {
        padding: 0.5rem 0.9rem;
        font-size: 0.8rem;
    }

    /* --- Section 02 --- */
    .circuit-node {
        width: 48px;
        height: 48px;
    }

    .node-icon {
        font-size: 1rem;
    }

    .node-icon svg {
        width: 20px;
        height: 20px;
    }

    .circuit-line {
        left: 23px;
    }

    .circuit-step:last-child::after {
        left: 23px;
    }

    .circuit-step {
        gap: 1rem;
        padding-bottom: 2rem;
    }

    .circuit-content {
        padding: 12px;
    }

    .circuit-content h3 {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

    .circuit-content p {
        font-size: 0.85rem;
    }

    /* --- Section 03 --- */
    .holo-card {
        min-height: 160px;
        padding: 1.25rem;
    }

    .holo-card.core-tech {
        padding: 1.5rem;
    }

    .holo-card.core-tech h3 {
        font-size: 1.3rem;
    }

    .holo-number {
        font-size: 4rem;
    }

    .holo-card h3 {
        font-size: 1.1rem;
    }

    .holo-card p {
        font-size: 0.85rem;
    }

    /* --- Section 04 --- */
    .benefit-item {
        padding: 1.5rem 0;
    }

    .benefit-counter {
        font-size: 1.1rem;
    }

    .benefit-title {
        font-size: 1.1rem;
    }

    .benefit-desc {
        font-size: 0.9rem;
    }

    /* --- Section 05 --- */
    .symbiosis-column {
        padding: 1.5rem;
    }

    .symbiosis-header {
        margin-bottom: 1.5rem;
    }

    .symbiosis-header h3 {
        font-size: 1.2rem;
    }

    .symbiosis-list {
        gap: 1.5rem;
    }

    .symbiosis-item {
        gap: 1.5rem;
    }

    .symbiosis-content h4 {
        font-size: 1rem;
    }

    .symbiosis-content p {
        font-size: 0.85rem;
    }

    /* --- Section 06 --- */
    .section-06-container {
        gap: 3rem;
    }

    .start-step-item {
        gap: 1rem;
        align-items: flex-start;
        text-align: left;
    }

    .step-badge {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    .step-title {
        font-size: 1rem;
        text-align: left;
    }

    .step-desc {
        font-size: 0.85rem;
        text-align: left;
    }

    .models-section-wrapper {
        padding-top: 2.5rem;
    }

    .models-header h3 {
        font-size: 1.5rem;
    }

    .model-card-modern {
        padding: 1.25rem;
    }

    .model-card-modern h4 {
        font-size: 1.1rem;
    }

    .model-card-modern p {
        font-size: 0.9rem;
    }

    /* --- Launchpad CTA --- */
    .launchpad-cta-box {
        padding: 2rem 1.25rem;
        border-radius: 1.25rem;
    }

    .launchpad-cta-box h2 {
        font-size: 1.75rem;
    }

    .launchpad-cta-box .cta-button-neon {
        font-size: 1rem;
        padding: 0.85rem 2rem;
        width: 100%;
    }

    /* --- Footer CTA --- */
    .partnership-footer {
        padding: 2.5rem 0.75rem;
    }

    .footer-cta-card {
        padding: 2rem 1.25rem;
    }

    .partnership-footer h2 {
        font-size: clamp(1.3rem, 6vw, 1.75rem);
    }

    .partnership-footer p {
        font-size: 0.95rem;
    }

    .btn-primary {
        font-size: 0.95rem;
        padding: 0.75rem 1.5rem;
        width: 100%;
        justify-content: center;
    }

    /* --- Footer --- */
    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-left {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
        width: 100%;
    }

    .footer-logo {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .footer-company-info {
        font-size: 0.9rem;
        text-align: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-company-info p {
        text-align: center;
        margin: 0;
        width: 100%;
    }

    .footer-right {
        align-items: center;
        width: 100%;
        gap: 2rem;
    }

    .copyright {
        font-size: 0.8rem;
        text-align: center;
        width: 100%;
    }
}