/* ===========================
   Hero — Cinematic Experience
   8-second looped atmosphere
   =========================== */

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 120px var(--hydron-space-xl) var(--hydron-space-2xl);
    overflow: hidden;
    background: #061510;
}

/* Hero background image */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../img/hero-bg.png') center center / cover no-repeat;
    opacity: 0.18;
    z-index: 0;
    pointer-events: none;
}

/* ===========================
   Background Layers
   =========================== */

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

/* Subtle tech grid */
.hero-grid-lines {
    position: absolute;
    inset: -60px;
    background-image:
        linear-gradient(rgba(0, 155, 58, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 155, 58, 0.06) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: gridDrift 20s linear infinite;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 70%);
}

@keyframes gridDrift {
    0% { transform: translate(0, 0); }
    100% { transform: translate(60px, 60px); }
}

/* Primary glow - green, centered on unit */
.hero-glow {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(0, 155, 58, 0.3) 0%, rgba(0, 155, 58, 0.1) 35%, transparent 65%);
    animation: glowBreath 8s ease-in-out infinite;
}

/* Secondary glow - blue accent */
.hero-glow-blue {
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(141, 198, 63, 0.18) 0%, transparent 60%);
    animation: glowBreath 8s ease-in-out infinite 4s;
}

@keyframes glowBreath {
    0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.9); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}

/* ===========================
   Atmospheric Mist Layers
   =========================== */

.hero-mist {
    position: absolute;
    width: 200%;
    height: 200px;
    opacity: 0;
    animation: mistDrift 8s ease-in-out infinite;
}

.mist-1 {
    bottom: 15%;
    left: -50%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 155, 58, 0.1) 20%,
        rgba(0, 155, 58, 0.15) 50%,
        rgba(0, 155, 58, 0.1) 80%,
        transparent 100%);
    animation-delay: 0s;
}

.mist-2 {
    bottom: 25%;
    left: -30%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(141, 198, 63, 0.08) 30%,
        rgba(141, 198, 63, 0.12) 60%,
        transparent 100%);
    animation-delay: 2.5s;
    height: 150px;
}

.mist-3 {
    bottom: 35%;
    left: -60%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(0, 155, 58, 0.08) 50%,
        rgba(255, 255, 255, 0.05) 75%,
        transparent 100%);
    animation-delay: 5s;
    height: 100px;
}

@keyframes mistDrift {
    0% { transform: translateX(-10%); opacity: 0; }
    15% { opacity: 0.7; }
    50% { opacity: 1; }
    85% { opacity: 0.7; }
    100% { transform: translateX(10%); opacity: 0; }
}

/* Light rays emanating from unit center */
.hero-light-rays {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    background:
        conic-gradient(from 0deg at 50% 50%,
            transparent 0deg,
            rgba(0, 155, 58, 0.06) 15deg,
            transparent 30deg,
            transparent 60deg,
            rgba(141, 198, 63, 0.04) 75deg,
            transparent 90deg,
            transparent 120deg,
            rgba(0, 155, 58, 0.06) 135deg,
            transparent 150deg,
            transparent 180deg,
            rgba(141, 198, 63, 0.04) 195deg,
            transparent 210deg,
            transparent 240deg,
            rgba(0, 155, 58, 0.06) 255deg,
            transparent 270deg,
            transparent 300deg,
            rgba(141, 198, 63, 0.04) 315deg,
            transparent 330deg,
            transparent 360deg);
    animation: raysRotate 24s linear infinite;
    opacity: 0;
    transition: opacity 2s ease 3s;
}

.unit-frame.doors-open ~ .hero-light-rays,
.hero-bg .hero-light-rays {
    opacity: 1;
}

@keyframes raysRotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ===========================
   Particle Canvas
   =========================== */

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

/* ===========================
   Hero Content
   =========================== */

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--hydron-bg-glass);
    border: 1px solid var(--hydron-border-glow);
    border-radius: var(--hydron-radius-full);
    padding: 8px 20px;
    font-size: var(--hydron-font-size-xs);
    color: var(--hydron-accent);
    margin-bottom: var(--hydron-space-xl);
}

.hero-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: var(--hydron-space-lg);
}

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

.hero-subtitle {
    font-size: var(--hydron-font-size-xl);
    color: var(--hydron-text-secondary);
    max-width: 640px;
    margin: 0 auto var(--hydron-space-xl);
    line-height: 1.7;
}

.hero-actions {
    display: flex;
    gap: var(--hydron-space-md);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--hydron-space-2xl);
}

/* ===========================
   Unit Visualization — Cinematic
   =========================== */

.hero-unit-visual {
    margin-top: var(--hydron-space-lg);
}

/* Camera push-in container */
.unit-camera {
    animation: cameraPushIn 8s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
    transform-origin: center center;
}

@keyframes cameraPushIn {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

/* Unit frame */
.unit-frame {
    position: relative;
    width: 380px;
    height: 500px;
    margin: 0 auto;
    border: 2px solid rgba(0, 155, 58, 0.12);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(10, 30, 22, 0.85) 0%, rgba(5, 15, 12, 0.95) 100%);
    overflow: visible;
    animation: unitReveal 2.5s ease-out forwards;
    opacity: 0;
    box-shadow:
        0 0 80px rgba(0, 155, 58, 0.12),
        0 0 160px rgba(141, 198, 63, 0.06),
        inset 0 0 60px rgba(0, 0, 0, 0.4);
}

@keyframes unitReveal {
    0% { opacity: 0; transform: scale(0.92); border-color: transparent; }
    40% { border-color: rgba(0, 155, 58, 0.08); }
    100% {
        opacity: 1;
        transform: scale(1);
        border-color: rgba(0, 155, 58, 0.2);
        box-shadow:
            0 0 100px rgba(0, 155, 58, 0.15),
            0 0 200px rgba(141, 198, 63, 0.08),
            inset 0 0 60px rgba(0, 0, 0, 0.4);
    }
}

/* ===========================
   Glass Doors
   =========================== */

.unit-door {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    z-index: 5;
    border-radius: 20px 0 0 20px;
    overflow: hidden;
    transition: transform 2s cubic-bezier(0.25, 0.1, 0.25, 1),
                opacity 1.5s ease;
    /* Glass material */
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.01) 50%,
        rgba(255, 255, 255, 0.03) 100%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.unit-door-left {
    left: 0;
    transform-origin: left center;
    border-radius: 20px 0 0 20px;
}

.unit-door-right {
    right: 0;
    transform-origin: right center;
    border-radius: 0 20px 20px 0;
    border-right: none;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
}

/* Reflection streak on glass */
.door-reflection {
    position: absolute;
    top: -20%;
    left: 20%;
    width: 60%;
    height: 140%;
    background: linear-gradient(165deg,
        transparent 0%,
        rgba(255, 255, 255, 0.03) 45%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(255, 255, 255, 0.03) 55%,
        transparent 100%);
    animation: reflectionShimmer 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes reflectionShimmer {
    0%, 100% { transform: translateX(-10px) skewX(-5deg); opacity: 0.6; }
    50% { transform: translateX(10px) skewX(-5deg); opacity: 1; }
}

/* Door handles */
.door-handle {
    position: absolute;
    top: 50%;
    width: 3px;
    height: 30px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    transform: translateY(-50%);
}

.unit-door-left .door-handle { right: 12px; }
.unit-door-right .door-handle { left: 12px; }

/* Doors opening — CSS-driven animation (no JS dependency) */
.unit-door-left {
    animation: doorOpenLeft 2s cubic-bezier(0.25, 0.1, 0.25, 1) 2.8s forwards;
}

.unit-door-right {
    animation: doorOpenRight 2s cubic-bezier(0.25, 0.1, 0.25, 1) 2.8s forwards;
}

@keyframes doorOpenLeft {
    0% { transform: perspective(1000px) rotateY(0deg); opacity: 1; }
    100% { transform: perspective(1000px) rotateY(-72deg); opacity: 0.2; }
}

@keyframes doorOpenRight {
    0% { transform: perspective(1000px) rotateY(0deg); opacity: 1; }
    100% { transform: perspective(1000px) rotateY(72deg); opacity: 0.2; }
}

/* JS fallback — also supports .doors-open class */
.unit-frame.doors-open .unit-door-left {
    transform: perspective(1000px) rotateY(-72deg);
    opacity: 0.2;
}

.unit-frame.doors-open .unit-door-right {
    transform: perspective(1000px) rotateY(72deg);
    opacity: 0.2;
}

/* ===========================
   Interior
   =========================== */

.unit-interior {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px 15px 0;
    opacity: 0;
    animation: interiorReveal 1.5s ease 3.5s forwards;
    border-radius: 18px;
    overflow: hidden;
}

@keyframes interiorReveal {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* JS fallback */
.unit-frame.doors-open .unit-interior {
    opacity: 1;
}

/* Core glow */
.unit-glow-core {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 40%,
        rgba(0, 155, 58, 0.25) 0%,
        rgba(141, 198, 63, 0.12) 40%,
        transparent 70%);
    animation: interiorGlow 8s ease-in-out infinite;
}

@keyframes interiorGlow {
    0%, 100% { opacity: 0.5; }
    25% { opacity: 0.8; }
    50% { opacity: 1; }
    75% { opacity: 0.7; }
}

/* Ambient mist inside unit */
.unit-ambient-mist {
    position: absolute;
    bottom: 0;
    left: -20%;
    width: 140%;
    height: 60%;
    background: linear-gradient(0deg,
        rgba(0, 155, 58, 0.12) 0%,
        rgba(0, 155, 58, 0.06) 30%,
        transparent 100%);
    animation: ambientMist 8s ease-in-out infinite;
    filter: blur(10px);
}

@keyframes ambientMist {
    0%, 100% { transform: translateX(-5%) scaleY(1); opacity: 0.6; }
    50% { transform: translateX(5%) scaleY(1.15); opacity: 1; }
}

/* LED Light Strips */
.led-strip {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 2;
    background: linear-gradient(90deg,
        var(--hydron-accent-blue),
        var(--hydron-accent),
        var(--hydron-accent-blue));
    box-shadow: 0 0 12px rgba(0, 155, 58, 0.5), 0 0 30px rgba(0, 155, 58, 0.2);
    opacity: 0;
    animation: ledOn 0.4s ease forwards;
}

.led-strip-1 { top: 22%; animation-delay: 2.8s; }
.led-strip-2 { top: 47%; animation-delay: 3.0s; }
.led-strip-3 { top: 72%; animation-delay: 3.2s; }

@keyframes ledOn {
    0% { opacity: 0; box-shadow: none; }
    50% { opacity: 1; box-shadow: 0 0 12px rgba(0, 155, 58, 0.5), 0 0 30px rgba(0, 155, 58, 0.2); }
    100% { opacity: 0.8; box-shadow: 0 0 8px rgba(0, 155, 58, 0.3), 0 0 20px rgba(0, 155, 58, 0.1); }
}

/* ===========================
   Shelves & Plants
   =========================== */

.unit-shelf {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    padding: 0 8px;
    padding-bottom: 6px;
    position: relative;
    z-index: 3;
    flex: 1;
    max-height: 110px;
}

.shelf-led {
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 155, 58, 0.6), transparent);
}

.shelf-plant {
    width: 18px;
    height: 0;
    border-radius: 10px 10px 3px 3px;
    opacity: 0;
    animation: plantGrow 2s ease-out forwards;
    position: relative;
}

/* Plant size variations */
.plant-tall {
    background: linear-gradient(180deg, #008A33, rgba(0, 164, 76, 0.6));
    box-shadow: 0 0 8px rgba(0, 155, 58, 0.2);
    animation-name: plantGrowTall;
}

.plant-medium {
    background: linear-gradient(180deg, #009B3A, rgba(0, 155, 58, 0.5));
    box-shadow: 0 0 8px rgba(0, 155, 58, 0.15);
    animation-name: plantGrowMedium;
}

.plant-short {
    background: linear-gradient(180deg, #8DC63F, rgba(141, 198, 63, 0.5));
    box-shadow: 0 0 8px rgba(141, 198, 63, 0.15);
    width: 22px;
    border-radius: 12px 12px 4px 4px;
    animation-name: plantGrowShort;
}

/* Stagger plant animations per shelf */
.unit-shelf-1 .shelf-plant:nth-child(2) { animation-delay: 3.0s; }
.unit-shelf-1 .shelf-plant:nth-child(3) { animation-delay: 3.2s; }
.unit-shelf-1 .shelf-plant:nth-child(4) { animation-delay: 3.4s; }
.unit-shelf-1 .shelf-plant:nth-child(5) { animation-delay: 3.6s; }

.unit-shelf-2 .shelf-plant:nth-child(2) { animation-delay: 3.3s; }
.unit-shelf-2 .shelf-plant:nth-child(3) { animation-delay: 3.5s; }
.unit-shelf-2 .shelf-plant:nth-child(4) { animation-delay: 3.7s; }
.unit-shelf-2 .shelf-plant:nth-child(5) { animation-delay: 3.9s; }

.unit-shelf-3 .shelf-plant:nth-child(2) { animation-delay: 3.6s; }
.unit-shelf-3 .shelf-plant:nth-child(3) { animation-delay: 3.8s; }
.unit-shelf-3 .shelf-plant:nth-child(4) { animation-delay: 4.0s; }
.unit-shelf-3 .shelf-plant:nth-child(5) { animation-delay: 4.2s; }

.unit-shelf-4 .shelf-plant:nth-child(2) { animation-delay: 3.9s; }
.unit-shelf-4 .shelf-plant:nth-child(3) { animation-delay: 4.1s; }
.unit-shelf-4 .shelf-plant:nth-child(4) { animation-delay: 4.3s; }
.unit-shelf-4 .shelf-plant:nth-child(5) { animation-delay: 4.5s; }

@keyframes plantGrowTall {
    0% { height: 0; opacity: 0; }
    30% { opacity: 0.6; }
    100% { height: 55px; opacity: 1; }
}

@keyframes plantGrowMedium {
    0% { height: 0; opacity: 0; }
    30% { opacity: 0.6; }
    100% { height: 38px; opacity: 1; }
}

@keyframes plantGrowShort {
    0% { height: 0; opacity: 0; }
    30% { opacity: 0.6; }
    100% { height: 22px; opacity: 1; }
}

/* Plants use animation-fill-mode forwards by default */
.shelf-plant {
    animation-fill-mode: forwards;
}

/* Water reservoir at bottom */
.unit-reservoir {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 25px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(141, 198, 63, 0.12) 40%,
        rgba(141, 198, 63, 0.25) 100%);
    border-radius: 0 0 16px 16px;
    z-index: 1;
}

/* ===========================
   Floating HUD Elements
   =========================== */

.unit-hud {
    position: absolute;
    z-index: 10;
    background: rgba(8, 18, 14, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 155, 58, 0.15);
    border-radius: 8px;
    padding: 8px 14px;
    font-family: var(--hydron-font-mono);
    font-size: 11px;
    opacity: 0;
    animation: hudFadeIn 0.8s ease-out forwards;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.hud-label {
    display: block;
    font-size: 8px;
    letter-spacing: 0.12em;
    color: var(--hydron-text-muted);
    margin-bottom: 3px;
}

.hud-value {
    color: var(--hydron-accent);
    font-weight: 600;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Position HUDs around the unit */
.hud-temp     { top: 20px;  right: -110px; animation-delay: 3.5s; }
.hud-humidity { top: 110px; left: -120px;  animation-delay: 3.8s; }
.hud-ph       { top: 200px; right: -95px;  animation-delay: 4.1s; }
.hud-ai       { top: 290px; left: -120px;  animation-delay: 4.4s; }
.hud-twin     { bottom: 90px; right: -130px; animation-delay: 4.7s; }
.hud-csp      { bottom: 20px; left: -110px;  animation-delay: 5.0s; }

@keyframes hudFadeIn {
    0% { opacity: 0; transform: translateY(8px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Subtle pulsing border on HUDs */
.unit-hud::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 8px;
    border: 1px solid transparent;
    animation: hudPulse 4s ease-in-out infinite;
}

.hud-temp::after, .hud-ph::after, .hud-twin::after {
    animation-delay: 0s;
}

.hud-humidity::after, .hud-ai::after, .hud-csp::after {
    animation-delay: 2s;
}

@keyframes hudPulse {
    0%, 100% { border-color: rgba(0, 155, 58, 0.05); }
    50% { border-color: rgba(0, 155, 58, 0.2); }
}

/* ===========================
   Scroll Indicator
   =========================== */

.hero-scroll-indicator {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--hydron-text-muted);
    font-size: var(--hydron-font-size-xs);
    z-index: 2;
    animation: scrollBounce 2s ease-in-out infinite;
}

.scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(180deg, var(--hydron-accent), transparent);
    animation: scrollLinePulse 2s ease-in-out infinite;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}

@keyframes scrollLinePulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* ===========================
   System Layers Section
   =========================== */

.layers-grid {
    margin-top: var(--hydron-space-xl);
}

.layer-card {
    text-align: left;
    position: relative;
}

.layer-number {
    font-family: var(--hydron-font-mono);
    font-size: var(--hydron-font-size-5xl);
    font-weight: 800;
    color: rgba(0, 155, 58, 0.06);
    position: absolute;
    top: 16px;
    right: 20px;
    line-height: 1;
}

.layer-icon {
    color: var(--hydron-accent);
    margin-bottom: var(--hydron-space-lg);
}

.layer-card h3 {
    font-size: var(--hydron-font-size-xl);
    margin-bottom: var(--hydron-space-sm);
}

.layer-card p {
    font-size: var(--hydron-font-size-sm);
    line-height: 1.7;
    margin-bottom: var(--hydron-space-lg);
}

.layer-stats {
    display: flex;
    gap: var(--hydron-space-xl);
    padding-top: var(--hydron-space-md);
    border-top: 1px solid var(--hydron-border);
}

.layer-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ===========================
   Technology Overview
   =========================== */

.tech-grid {
    margin-top: var(--hydron-space-xl);
}

.tech-card {
    text-align: left;
    position: relative;
}

.tech-indicator {
    margin-bottom: var(--hydron-space-md);
}

.tech-label {
    display: block;
    font-size: 10px;
    letter-spacing: 0.15em;
    color: var(--hydron-text-muted);
    margin-bottom: var(--hydron-space-sm);
}

.tech-card h4 {
    margin-bottom: var(--hydron-space-sm);
}

.tech-card p {
    font-size: var(--hydron-font-size-sm);
    line-height: 1.7;
    margin-bottom: var(--hydron-space-lg);
}

.tech-link {
    font-size: var(--hydron-font-size-xs);
    color: var(--hydron-accent);
    letter-spacing: 0.05em;
}

.tech-link:hover {
    color: var(--hydron-accent-hover);
}

/* ===========================
   CEO / Vision Section
   =========================== */

.ceo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--hydron-space-3xl);
    align-items: center;
}

.video-frame {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    overflow: hidden;
}

.video-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--hydron-space-md);
    background: linear-gradient(135deg, rgba(0, 155, 58, 0.03), rgba(141, 198, 63, 0.03));
    cursor: pointer;
    transition: background var(--hydron-transition);
}

.video-placeholder:hover {
    background: linear-gradient(135deg, rgba(0, 155, 58, 0.06), rgba(141, 198, 63, 0.06));
}

.video-play-btn {
    color: var(--hydron-accent);
    transition: transform var(--hydron-transition);
}

.video-placeholder:hover .video-play-btn {
    transform: scale(1.1);
}

.video-label {
    font-size: var(--hydron-font-size-xs);
    color: var(--hydron-text-muted);
}

.ceo-content .section-label {
    margin-bottom: var(--hydron-space-md);
}

.ceo-content h2 {
    margin-bottom: var(--hydron-space-xl);
}

.ceo-quote {
    font-size: var(--hydron-font-size-lg);
    font-style: italic;
    color: var(--hydron-text-secondary);
    line-height: 1.8;
    border-left: 3px solid var(--hydron-accent);
    padding-left: var(--hydron-space-xl);
    margin: 0 0 var(--hydron-space-xl);
}

.ceo-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ceo-meta strong {
    color: var(--hydron-text);
    font-size: var(--hydron-font-size-base);
}

.ceo-meta .mono {
    font-size: var(--hydron-font-size-sm);
    color: var(--hydron-text-muted);
}

/* ===========================
   CTA Section Variants
   =========================== */

.cta-section-bottom {
    border-top: 1px solid var(--hydron-border);
}

.cta-actions {
    display: flex;
    gap: var(--hydron-space-md);
    justify-content: center;
    flex-wrap: wrap;
}

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

@media (max-width: 1024px) {
    .ceo-grid {
        grid-template-columns: 1fr;
        gap: var(--hydron-space-2xl);
    }

    .unit-hud {
        display: none;
    }
}

@media (max-width: 768px) {
    .hero {
        padding-top: 100px;
        min-height: auto;
    }

    .hero-unit-visual {
        display: none;
    }

    .hero-particles {
        display: none;
    }

    .hero-mist {
        display: none;
    }

    .hero-light-rays {
        display: none;
    }

    .hero-scroll-indicator {
        display: none;
    }

    .ceo-quote {
        font-size: var(--hydron-font-size-base);
    }
}

@media (max-width: 480px) {
    .hero-actions {
        flex-direction: column;
        align-items: center;
    }

    .hero-actions .btn {
        width: 100%;
        max-width: 300px;
    }
}