/* Style Design System for Gold Elegance Registration Page */

:root {
    /* Color Palette - Deeper Bronze tones to match background video */
    --color-bg-dark: #070709;
    --color-gold-primary: #a97d3a;
    --color-gold-light: #c59f5b;
    --color-gold-dark: #8c6023;
    --color-gold-glow: rgba(169, 125, 58, 0.35);
    --color-gold-border: rgba(169, 125, 58, 0.24);
    --color-gold-input-bg: rgba(14, 14, 16, 0.55);
    
    --color-text-primary: #f5f5f7;
    --color-text-secondary: #c5c5c9;
    --color-text-muted: #848488;
    --color-text-gold: #d4b26f;
    
    /* Typography */
    --font-serif: 'Cormorant Garamond', serif;
    --font-sans: 'Inter Tight', 'DM Sans', 'Inter', sans-serif;
    --font-display: 'Inter Tight', 'DM Sans', 'Inter', sans-serif;
    --color-motion-black: #0e100f;
    --color-motion-cream: #fffce1;
    --color-motion-muted: #7c7c6f;
    --color-motion-line: #42433d;
    --color-motion-green: #0ae448;
    --color-motion-orange: #ff8709;
    --color-motion-pink: #fec5fb;
    --color-motion-lilac: #9d95ff;
    --color-motion-blue: #00bae2;
    
    /* Layout */
    --max-width: 1360px;
    --transition-speed: 0.3s;
    --border-radius-sm: 8px;
    --border-radius-md: 14px;
    --border-radius-lg: 22px; /* Adjusted capsule shape */
}

/* Reset and Globals */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-bg-dark);
    color: var(--color-text-primary);
    height: 100vh;
    overflow: hidden;
    line-height: 1.5;
}

/* Background Video and Overlays */
.video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    overflow: hidden;
}

#bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Soft golden glow on the top right, dark backdrop on the left/bottom */
    background: radial-gradient(
        circle at 80% 20%,
        rgba(212, 175, 55, 0.12) 0%,
        rgba(10, 10, 12, 0.75) 45%,
        rgba(6, 6, 8, 0.96) 90%
    );
}

/* Main Layout Container */
.page-container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1.5rem 2.5rem 1.5rem 1.25rem;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Header & Back Button */
.top-nav {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}

.back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--color-gold-border);
    border-radius: var(--border-radius-sm);
    color: var(--color-gold-light);
    background: rgba(212, 175, 55, 0.05);
    backdrop-filter: blur(8px);
    transition: all var(--transition-speed) cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    text-decoration: none;
}

.back-btn:hover {
    background: rgba(212, 175, 55, 0.15);
    border-color: var(--color-gold-primary);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
    transform: translateX(-2px);
}

.back-btn .icon {
    width: 20px;
    height: 20px;
}

/* Content Grid Split */
.content-grid {
    display: grid;
    grid-template-columns: minmax(450px, 480px) 1fr;
    gap: 7.5rem;
    align-items: center;
    flex-grow: 1;
    height: calc(100vh - 5rem);
}

.form-section {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-width: 480px;
}

.form-header-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    width: 100%;
}

.form-header-container .back-btn {
    position: absolute;
    left: 0;
    top: 4px;
    flex-shrink: 0;
}

.form-header .decorative-separator {
    margin-top: 0.4rem;
    margin-bottom: 0.6rem;
    width: 140px;
}

.form-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.25rem;
}

.main-title {
    font-family: var(--font-serif);
    font-size: 2.3rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: linear-gradient(90deg, #8c6023 0%, #c59f5b 25%, #f5d08f 50%, #c59f5b 75%, #8c6023 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: bronze-shimmer 6s infinite linear;
    text-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

.form-header .decorative-separator .line {
    height: 1.5px;
    background: linear-gradient(90deg, transparent 0%, #8c6023 20%, #f5d08f 50%, #8c6023 80%, transparent 100%);
    background-size: 200% auto;
    animation: bronze-shimmer 6s infinite linear;
    flex-grow: 1;
}

.form-header .decorative-separator .diamond {
    width: 6px;
    height: 6px;
    background: linear-gradient(135deg, #8c6023, #f5d08f, #8c6023);
    background-size: 200% auto;
    animation: bronze-shimmer 6s infinite linear;
    transform: rotate(45deg);
    box-shadow: 0 0 10px rgba(245, 208, 143, 0.6);
}

.subtitle {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    line-height: 1.45;
    letter-spacing: 0.01em;
    opacity: 0.85;
}

/* Form Group Sections */
.form-group-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--color-text-gold);
    margin-bottom: 0.1rem;
}

.section-icon {
    width: 16px;
    height: 16px;
    stroke: var(--color-gold-primary);
}

.section-subtitle {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    margin-top: -0.2rem;
    margin-bottom: 0.2rem;
}

/* Input Styling */
.input-container {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--color-gold-input-bg);
    border: 1px solid var(--color-gold-border);
    border-radius: var(--border-radius-lg);
    padding: 0 1rem;
    height: 42px;
    backdrop-filter: blur(12px);
    transition: all var(--transition-speed) cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    animation: border-living-flow 6s infinite ease-in-out;
}

.input-container:hover {
    border-color: rgba(212, 175, 55, 0.4);
    background: rgba(18, 18, 20, 0.55);
}

.input-container.focused {
    border-color: var(--color-gold-primary);
    background: rgba(18, 18, 20, 0.65);
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.25);
}

.input-icon {
    display: flex;
    align-items: center;
    margin-right: 0.75rem;
    color: var(--color-text-muted);
    transition: color var(--transition-speed);
}

.input-container.focused .input-icon {
    color: var(--color-gold-light);
}

.input-icon svg {
    width: 18px;
    height: 18px;
}

.input-container input {
    flex-grow: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 400;
    width: 100%;
    height: 100%;
}

.input-container input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

/* Right Aligned Icon (Calendar / Arrow) */
.input-icon-right {
    display: flex;
    align-items: center;
    margin-left: 0.75rem;
    color: var(--color-text-muted);
    pointer-events: none;
}

.input-icon-right svg {
    width: 18px;
    height: 18px;
}

/* Validation Status indicators */
.validation-dot {
    position: absolute;
    right: -15px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: transparent;
    transition: all var(--transition-speed);
}

.input-container.valid .validation-dot,
.custom-select-container.valid .validation-dot {
    background-color: #55ff55;
    box-shadow: 0 0 8px #55ff55;
}

.input-container.invalid .validation-dot,
.custom-select-container.invalid .validation-dot {
    background-color: #ff5555;
    box-shadow: 0 0 8px #ff5555;
}

/* Custom dropdown selects */
.custom-select-container {
    position: relative;
    width: 100%;
}

.select-trigger {
    cursor: pointer;
    user-select: none;
}

.select-trigger .selected-value {
    flex-grow: 1;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.35);
}

.select-trigger.has-value .selected-value {
    color: var(--color-text-primary);
}

.arrow-icon {
    transition: transform var(--transition-speed) ease;
}

.custom-select-container.open .arrow-icon {
    transform: rotate(180deg);
    color: var(--color-gold-light);
}

.select-options-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    background: rgba(18, 18, 20, 0.95);
    border: 1px solid var(--color-gold-border);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-speed) cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px);
}

.custom-select-container.open .select-options-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.select-option {
    padding: 0.875rem 1.5rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.select-option:hover {
    background: rgba(212, 175, 55, 0.15);
    color: var(--color-text-primary);
    padding-left: 1.75rem;
}

.select-option.selected {
    background: rgba(212, 175, 55, 0.25);
    color: var(--color-gold-light);
    font-weight: 500;
}

/* Security Banner Card */
.security-banner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: linear-gradient(135deg, rgba(169, 125, 58, 0.03) 0%, rgba(14, 14, 16, 0.7) 100%);
    border: 1px solid var(--color-gold-border);
    border-radius: var(--border-radius-md);
    padding: 0.65rem 1.25rem;
    margin-bottom: 0.75rem;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.banner-left {
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-icon-shield {
    width: 32px;
    height: 32px;
    stroke: var(--color-gold-primary);
    filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.3));
}

.banner-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.banner-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-gold);
    letter-spacing: 0.02em;
}

.banner-text {
    font-size: 0.725rem;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.banner-right {
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-icon-lock {
    width: 36px;
    height: 36px;
    stroke: var(--color-gold-primary);
    padding: 8px;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 50%;
    filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.2));
}

/* Submit Button */
.submit-btn {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    height: 44px;
    background: linear-gradient(90deg, #8c6023 0%, #c59f5b 50%, #8c6023 100%);
    background-size: 200% auto;
    border: none;
    border-radius: var(--border-radius-lg);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    color: #120e06;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(169, 125, 58, 0.2);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.submit-btn:hover {
    background-position: right center;
    box-shadow: 0 6px 30px rgba(212, 175, 55, 0.45);
    transform: translateY(-2px);
}

.submit-btn:active {
    transform: translateY(0);
}

.submit-btn .btn-icon {
    width: 18px;
    height: 18px;
    stroke: #1c150b;
}

/* RIGHT SIDE: Visual/3D Section */
.visual-section {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    height: 100%;
    position: relative;
    padding-right: 1rem; /* Shift text slightly right */
    padding-bottom: 1rem; /* Shift text slightly down */
}

/* Iridescent Metallic Shimmer Animation */
.input-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 240, 210, 0.03) 20%,
        rgba(169, 125, 58, 0.12) 40%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(169, 125, 58, 0.12) 60%,
        rgba(255, 240, 210, 0.03) 80%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    pointer-events: none;
    z-index: 1;
    animation: metallic-shimmer 8s infinite linear;
    animation-delay: var(--delay, 0s);
}

.submit-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    pointer-events: none;
    z-index: 1;
    animation: button-shimmer 8s infinite linear;
    animation-delay: var(--delay, 4.8s);
}

/* Override active state animations */
.input-container.focused::after {
    animation: none;
}
.input-container.focused {
    animation: none;
}

/* Keyframe animations */
@keyframes metallic-shimmer {
    0% { left: -150%; }
    30% { left: 150%; }
    100% { left: 150%; }
}

@keyframes button-shimmer {
    0% { left: -150%; }
    30% { left: 150%; }
    100% { left: 150%; }
}

@keyframes border-living-flow {
    0%, 100% {
        border-color: var(--color-gold-border);
        box-shadow: 0 0 0px rgba(169, 125, 58, 0);
    }
    50% {
        border-color: rgba(197, 160, 89, 0.38);
        box-shadow: 0 0 8px rgba(169, 125, 58, 0.08);
    }
}

@keyframes bronze-shimmer {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: -200% center;
    }
}

.visual-text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
}

.visual-text-main {
    font-family: var(--font-serif);
    font-size: 1.65rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--color-text-primary);
    background: linear-gradient(135deg, #ffffff 40%, var(--color-text-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.visual-text-sub {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 300;
    font-style: italic;
    color: var(--color-text-gold);
    opacity: 0.85;
}

.decorative-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 180px;
    margin-top: 1rem;
}

.decorative-separator .line {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-gold-border), transparent);
    flex-grow: 1;
}

.decorative-separator .diamond {
    width: 6px;
    height: 6px;
    background-color: var(--color-gold-primary);
    transform: rotate(45deg);
    box-shadow: 0 0 8px var(--color-gold-primary);
}

/* Loading Overlay Screen */
html.site-loading,
body.site-loading {
    overflow: hidden !important;
    width: 100%;
    height: 100%;
    background: #070709;
}

body.site-loading .video-background,
body.site-loading .nav-header,
body.site-loading .landing-hero-section,
body.site-loading .second-page-section,
body.site-loading .site-footer {
    visibility: hidden !important;
}

.loader-wrapper {
    position: fixed;
    inset: -2px;
    width: auto;
    height: auto;
    min-height: calc(100vh + 4px);
    min-height: calc(100dvh + 4px);
    background:
        radial-gradient(circle at 50% 42%, rgba(169, 125, 58, 0.12), transparent 32%),
        #070709;
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.52s ease, visibility 0.52s ease;
}

.loader-wrapper.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-wrapper[hidden] {
    display: none !important;
}

body.consent-pending {
    overflow: hidden !important;
    touch-action: none;
}

.consent-gate {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: grid;
    place-items: center;
    overflow-y: auto;
    padding:
        max(24px, env(safe-area-inset-top))
        max(24px, env(safe-area-inset-right))
        max(24px, env(safe-area-inset-bottom))
        max(24px, env(safe-area-inset-left));
    background:
        radial-gradient(circle at 82% 12%, rgba(197, 159, 91, 0.16), transparent 34%),
        radial-gradient(circle at 14% 86%, rgba(0, 186, 226, 0.08), transparent 32%),
        rgba(7, 7, 9, 0.98);
    overscroll-behavior: contain;
    touch-action: pan-y;
}

.consent-gate[hidden] {
    display: none !important;
}

.consent-card {
    width: min(650px, 100%);
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    padding: clamp(26px, 5vw, 48px);
    border: 1px solid rgba(255, 252, 225, 0.2);
    border-radius: 18px;
    background: rgba(16, 17, 18, 0.96);
    box-shadow: 0 32px 90px rgba(0, 0, 0, 0.64);
    color: var(--color-motion-cream);
}

.consent-brand {
    font: 900 1.15rem/1 var(--font-display);
    letter-spacing: 0.22em;
}

.consent-brand span {
    color: var(--color-gold-light);
}

.consent-kicker {
    margin-top: 28px;
    color: var(--color-gold-light);
    font: 700 0.68rem/1.2 var(--font-sans);
    letter-spacing: 0.16em;
}

.consent-card h1 {
    margin-top: 10px;
    font: 700 clamp(2rem, 5vw, 3.5rem)/0.98 var(--font-display);
    letter-spacing: -0.04em;
}

.consent-description {
    margin-top: 16px;
    color: rgba(255, 252, 225, 0.66);
    font: 500 0.94rem/1.55 var(--font-sans);
}

.consent-options {
    display: grid;
    gap: 10px;
    margin-top: 24px;
}

.consent-option {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid rgba(255, 252, 225, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
    color: rgba(255, 252, 225, 0.82);
    font: 500 0.83rem/1.45 var(--font-sans);
    cursor: pointer;
}

.consent-option:has(input:checked) {
    border-color: rgba(197, 159, 91, 0.5);
    background: rgba(197, 159, 91, 0.08);
}

.consent-option input {
    width: 20px;
    height: 20px;
    margin-top: 1px;
    accent-color: var(--color-gold-light);
}

.consent-option a {
    color: #e4c777;
    text-underline-offset: 3px;
}

.consent-accept {
    width: 100%;
    min-height: 52px;
    margin-top: 20px;
    border: 0;
    border-radius: 9px;
    background: linear-gradient(90deg, #a97d3a, #e4c777);
    color: #0e100f;
    font: 800 0.78rem/1 var(--font-sans);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    cursor: pointer;
}

.consent-accept:disabled {
    opacity: 0.34;
    cursor: not-allowed;
}

.consent-note {
    margin-top: 12px;
    color: rgba(255, 252, 225, 0.42);
    font: 500 0.68rem/1.45 var(--font-sans);
    text-align: center;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(280px, 80vw);
    gap: 18px;
    color: var(--color-motion-cream);
    text-align: center;
}

.loader-logo-mark {
    position: relative;
    width: clamp(176px, 18vw, 220px);
    height: clamp(176px, 18vw, 220px);
    flex: 0 0 auto;
}

.loader-logo-source,
.loader-logo-outline,
.loader-logo-fill,
.loader-logo-fill canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.loader-logo-source {
    opacity: 0;
    pointer-events: none;
}

.loader-logo-outline {
    filter: drop-shadow(0 0 8px rgba(255, 252, 225, 0.14));
}

.loader-logo-fill {
    width: 0;
    right: auto;
    overflow: hidden;
    filter: drop-shadow(0 0 12px rgba(214, 178, 100, 0.24));
    transition: width 120ms linear;
}

.loader-logo-fill canvas {
    width: clamp(176px, 18vw, 220px);
    max-width: none;
}

.loader-logo-mark.is-fallback::after {
    content: 'MATRIX';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255, 252, 225, 0.72);
    font: 800 clamp(1.3rem, 2.4vw, 2rem)/1 var(--font-display);
    letter-spacing: 0.16em;
}

.loader-progress {
    width: min(190px, 62vw);
    height: 2px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 252, 225, 0.13);
}

.loader-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #8c6023, #fffce1);
    box-shadow: 0 0 14px rgba(255, 252, 225, 0.34);
    transition: width 120ms linear;
}

.loader-percent {
    margin: -3px 0 0;
    color: rgba(255, 252, 225, 0.86);
    font-family: 'Orbitron', var(--font-sans);
    font-size: clamp(0.86rem, 2vw, 1rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.14em;
    font-variant-numeric: tabular-nums;
}

/* RESPONSIVE DESIGN (Media Queries) */

@media (max-width: 1024px) {
    .content-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .form-section {
        max-width: 100%;
    }
    
    .visual-section {
        border-top: 1px solid var(--color-gold-border);
        padding-top: 3rem;
    }
    
    /* Globe viewport styling removed */
}

@media (max-width: 768px) {
    .main-title {
        font-size: 2.3rem;
    }
    
    .page-container {
        padding: 1.5rem 1rem;
    }
    
    .input-container {
        height: 48px;
    }
    
    .submit-btn {
        height: 48px;
    }
    
    .security-banner {
        flex-direction: column;
        text-align: center;
        padding: 1.25rem;
    }
    
    .banner-right {
        margin-top: 0.5rem;
    }
}

/* =========================================================================
   LANDING PAGE STYLES (index.html)
   ========================================================================= */

.landing-overlay {
    background:
        radial-gradient(circle at 76% 28%, rgba(0, 186, 226, 0.16) 0%, rgba(14, 16, 15, 0.18) 24%, transparent 46%),
        radial-gradient(circle at 22% 46%, rgba(254, 197, 251, 0.12) 0%, rgba(14, 16, 15, 0.1) 30%, transparent 52%),
        linear-gradient(90deg, rgba(14, 16, 15, 0.88) 0%, rgba(14, 16, 15, 0.54) 46%, rgba(14, 16, 15, 0.72) 100%);
}

.landing-container {
    padding: 2.5rem 4rem 3rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
    width: 100%;
}

.nav-header {
    position: absolute;
    top: 1.5rem;
    right: 2.5rem;
    z-index: 10;
}

.nav-buttons {
    display: flex;
    gap: 1.75rem;
    align-items: center;
}

.login-dropdown-container {
    position: relative;
    display: inline-block;
}

.login-dropdown-menu {
    position: absolute;
    top: 8px; /* Shifted down slightly to fit on the page and prevent top-screen clipping */
    right: calc(100% + 35px);
    width: 220px; /* Reduced width to make it even more compact ("little bit more less") */
    background: rgba(8, 24, 48, 0.35); /* Shrunk opacity for high glassmorphism ("more glasses") */
    border: 1px solid rgba(0, 191, 255, 0.25); /* Thinner glowing liquid blue border */
    border-radius: 16px; /* Sleek curved corners */
    padding: 0.75rem 0.85rem; /* Even more compact padding */
    box-shadow: 0 10px 35px rgba(0, 150, 255, 0.15), inset 0 0 10px rgba(0, 191, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15) inset; /* Double glass reflection */
    backdrop-filter: blur(35px); /* Increased blur depth for premium glass effect */
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all var(--transition-speed) cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(-5px) scale(0.95);
    transform-origin: top right;
}

.login-dropdown-menu::after {
    content: '';
    position: absolute;
    top: 7px; /* Perfectly aligned with vertical center of 'Вход' (8px menu top + 7px = 15px container top) */
    right: -8px;
    transform: rotate(45deg);
    width: 14px;
    height: 14px;
    background: rgba(8, 24, 48, 0.35); /* Matches parent background opacity */
    border-right: 1px solid rgba(0, 191, 255, 0.25);
    border-top: 1px solid rgba(0, 191, 255, 0.25);
    pointer-events: none;
}

.login-dropdown-container.open .login-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.login-menu-title {
    font-size: 0.7rem; /* Sized down for ultra-compact layout */
    font-weight: 600;
    color: #00d2ff; /* Bright cyan/blue liquid text */
    margin-bottom: 0.5rem; /* Tightened margin */
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-family: var(--font-sans);
    text-align: center;
    text-shadow: 0 0 8px rgba(0, 210, 255, 0.35);
}

.login-input {
    margin-bottom: 0.5rem; /* Tighter spacing */
    height: 30px; /* Reduced input height */
    background: rgba(4, 12, 24, 0.4); /* Translucent dark blue input bg */
    border: 1px solid rgba(0, 162, 255, 0.15);
    border-radius: 15px; /* Proportional pill shape */
}

.login-input:hover {
    border-color: rgba(0, 191, 255, 0.4);
    background: rgba(6, 18, 36, 0.5);
}

.login-input.focused {
    border-color: #00d2ff;
    background: rgba(8, 24, 48, 0.65);
    box-shadow: 0 0 12px rgba(0, 191, 255, 0.35), inset 0 0 4px rgba(0, 191, 255, 0.1);
}

.login-input input {
    font-size: 0.75rem; /* Reduced font size to look clean in smaller input */
    color: #ffffff;
}

.login-input .input-icon {
    color: rgba(0, 191, 255, 0.6);
}

.login-input.focused .input-icon {
    color: #00d2ff;
}

.login-submit-btn {
    height: 30px; /* Reduced button height */
    font-size: 0.75rem; /* Sized down font */
    margin-top: 0.05rem;
    background: linear-gradient(90deg, rgba(0, 82, 204, 0.8) 0%, rgba(0, 210, 255, 0.8) 100%); /* Shrunk opacity button gradient */
    color: #ffffff;
    border: none;
    border-radius: 15px; /* Proportional pill shape */
    box-shadow: 0 4px 12px rgba(0, 150, 255, 0.2);
}

.login-submit-btn:hover {
    background: linear-gradient(90deg, rgba(0, 102, 255, 0.9) 0%, rgba(51, 214, 255, 0.9) 100%);
    box-shadow: 0 6px 16px rgba(0, 191, 255, 0.45);
}

.btn-nav-login,
.btn-nav-register {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    color: rgba(255, 252, 225, 0.76) !important;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 400;
    text-decoration: none;
    letter-spacing: 0;
    padding: 0.5rem 0;
    position: relative;
    cursor: pointer;
    transition: color 0.25s ease;
}

.btn-nav-login:hover,
.btn-nav-register:hover {
    color: var(--color-motion-cream) !important;
    text-shadow: none;
    transform: none !important;
}

/* Subtle underline slide effect on hover */
.btn-nav-login::after,
.btn-nav-register::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #ffffff;
    transition: width 0.25s ease;
}

.btn-nav-login:hover::after,
.btn-nav-register:hover::after {
    width: 100%;
}

.landing-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3.5rem;
    flex-grow: 1;
    max-width: 650px;
}

.brand-section {
    display: flex;
    align-items: center;
}

.brand-logo-text {
    font-family: var(--font-display);
    font-size: clamp(4.2rem, 6.6vw, 6.9rem);
    font-weight: 700;
    color: transparent;
    background: linear-gradient(90deg, #3d2612 0%, #8c6023 25%, #e8d5bf 50%, #734c22 75%, #3d2612 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 0;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(232, 213, 191, 0.35), 0 0 20px rgba(140, 96, 35, 0.28);
    animation: bronze-shimmer 6s infinite linear;
}

.headline-block {
    display: flex;
    flex-direction: column;
    gap: 1.05rem;
    max-width: min(980px, 92vw);
    position: relative;
    isolation: isolate;
}

.landing-title {
    font-family: var(--font-display);
    font-size: clamp(4.2rem, 6.6vw, 6.9rem);
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: 0;
    color: var(--color-motion-cream);
    background: none;
    -webkit-text-fill-color: initial;
    text-shadow: none;
    text-transform: uppercase;
    max-width: 980px;
    white-space: nowrap;
}

.landing-separator {
    width: min(420px, 42vw);
    height: 1px;
    background: linear-gradient(90deg, var(--color-motion-cream), rgba(255, 252, 225, 0));
    margin-top: 0.25rem;
    opacity: 0.62;
}

.landing-subtitle {
    font-family: var(--font-sans);
    font-size: clamp(0.95rem, 1.5vw, 1.28rem);
    font-weight: 500;
    letter-spacing: 0;
    color: rgba(255, 252, 225, 0.78);
    opacity: 1;
}

.hero-project-button {
    width: fit-content;
    min-height: 50px;
    margin-top: 0.35rem;
    padding: 0 20px;
    border: 1px solid rgba(255, 252, 225, 0.52);
    border-radius: 999px;
    background: rgba(7, 17, 31, 0.22);
    color: var(--color-motion-cream);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    font: 700 0.82rem/1 var(--font-sans);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    cursor: pointer;
    transition: color 220ms ease, background 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.hero-project-button:hover {
    color: #07111f;
    background: var(--color-motion-cream);
    border-color: var(--color-motion-cream);
    transform: translateY(-2px);
}

.hero-project-button span:last-child {
    font-size: 1.1rem;
}

.landing-footer {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 2rem;
    margin-bottom: 4.5rem; /* Pushes the footer text slightly higher up the page */
}

.landing-footer-text {
    font-family: var(--font-display);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgba(255, 252, 225, 0.62);
    text-transform: uppercase;
}

.landing-footer-text.gold {
    color: var(--color-motion-orange);
    opacity: 0.95;
    font-size: 1.34rem;
    line-height: 1.05;
}

.motion-text {
    overflow: visible;
}

.motion-word {
    display: inline-block;
    white-space: nowrap;
}

.motion-letter {
    display: inline-block;
    position: relative;
    opacity: 0;
    transform: translate3d(0, 1.15em, 0) rotate(2deg);
    filter: blur(8px);
    will-change: transform, opacity, filter;
}

.motion-letter::after {
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 0.04em;
    height: 0.12em;
    border-radius: 100px;
    background: currentColor;
    opacity: 0;
    transform: translateY(0.28em) scaleX(0.3);
    filter: blur(8px);
    pointer-events: none;
}

.motion-ready .motion-letter,
.section-in-view .motion-letter {
    animation: motion-letter-in 860ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(var(--motion-index, 0) * 18ms);
}

.section-leaving .motion-letter {
    animation: motion-letter-out 720ms cubic-bezier(0.55, 0, 0.1, 1) both;
    animation-delay: calc(var(--motion-index, 0) * 10ms);
}

.section-leaving .motion-letter::after {
    animation: motion-paint-smear 720ms cubic-bezier(0.55, 0, 0.1, 1) both;
    animation-delay: calc(var(--motion-index, 0) * 10ms);
}

@keyframes motion-letter-in {
    0% {
        opacity: 0;
        transform: translate3d(0, 1.15em, 0) rotate(2deg);
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(0);
        filter: blur(0);
    }
}

@keyframes motion-letter-out {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
    100% {
        opacity: 0;
        transform: translate3d(0, -1.2em, 0) rotate(-2deg);
        filter: blur(7px);
    }
}

@keyframes motion-paint-smear {
    0% {
        opacity: 0;
        transform: translateY(0.28em) scaleX(0.3);
    }
    42% {
        opacity: 0.42;
        transform: translateY(-0.08em) scaleX(1.8);
    }
    100% {
        opacity: 0;
        transform: translateY(-1em) scaleX(2.8);
        filter: blur(14px);
    }
}

@media (max-width: 768px) {
    .landing-container {
        padding: 1.5rem 1.5rem 2rem 1.5rem;
    }
    
    .nav-header {
        top: 1rem;
        right: 1.5rem;
    }
    
    .landing-title {
        font-size: 2.2rem;
        white-space: normal;
    }
    
    .landing-content {
        gap: 2rem;
    }
    
    .brand-logo-text {
        font-size: 2.2rem; /* Matches the mobile headline title words below it */
    }
    
    .login-dropdown-menu {
        right: 0;
        top: calc(100% + 15px);
        transform: scale(0.95);
        transform-origin: top right;
    }
    
    .login-dropdown-menu::after {
        top: -8px;
        right: 15px;
        transform: rotate(45deg);
        border-right: none;
        border-bottom: none;
        border-left: 1px solid rgba(0, 162, 255, 0.4);
        border-top: 1px solid rgba(0, 162, 255, 0.4);
    }
    
    .login-dropdown-container.open .login-dropdown-menu {
        transform: translateY(0) scale(1);
    }
}



/* =========================================================================
   REDESIGNED LANDING PAGE SCROLL SECTIONS (Based on 18 Sections Spec)
   ========================================================================= */

/* Body override for scrollability */
body.landing-page {
    height: auto;
    overflow-y: auto;
}

/* Sticky Navbar Header styling */
.nav-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 90px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4rem;
    z-index: 1000;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    background: transparent;
    border-bottom: 1px solid transparent;
}

.nav-header.scrolled {
    background: rgba(8, 10, 16, 0.98);
    backdrop-filter: blur(12px);
    height: 75px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.nav-brand {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.6rem;
    font-weight: 900;
    color: #fff;
    text-decoration: none;
    letter-spacing: 3px;
}

.nav-brand span {
    color: var(--color-gold-light);
}

.nav-menu-links {
    display: flex;
    gap: 2rem;
    align-items: center;
    position: relative;
    height: 64px;
    padding: 0 0.5rem;
}

.nav-menu-links a {
    color: rgba(255, 252, 225, 0.72);
    text-decoration: none;
    font-size: 1.24rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    transition: color 0.2s ease, opacity 0.2s ease;
    position: relative;
    z-index: 3;
    height: 100%;
    display: inline-flex;
    align-items: center;
    padding: 0 0.1rem;
    opacity: 0.58;
}

.nav-menu-links a:hover,
.nav-menu-links a.limelight-active {
    color: var(--color-motion-cream);
    opacity: 1;
}

.nav-limelight {
    position: absolute;
    top: 0;
    left: -999px;
    z-index: 1;
    width: 58px;
    height: 7px;
    border-radius: 999px;
    background: var(--color-motion-cream);
    box-shadow: 0 30px 18px rgba(255, 252, 225, 0.22), 0 56px 22px rgba(255, 252, 225, 0.12);
    opacity: 0;
    pointer-events: none;
    transition: left 420ms cubic-bezier(0.16, 1, 0.3, 1), width 420ms cubic-bezier(0.16, 1, 0.3, 1), opacity 260ms ease;
}

.nav-limelight.is-ready {
    opacity: 1;
}

.nav-limelight span {
    position: absolute;
    left: -12%;
    top: 7px;
    width: 124%;
    height: 66px;
    clip-path: polygon(3% 100%, 18% 0, 82% 0, 97% 100%);
    background: linear-gradient(180deg, rgba(255, 252, 225, 0.2), rgba(255, 252, 225, 0));
    pointer-events: none;
}

.nav-header.scrolled .nav-limelight {
    box-shadow: 0 28px 18px rgba(255, 252, 225, 0.18), 0 50px 18px rgba(255, 252, 225, 0.1);
}

.landing-hero-section {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 110px 4rem 3rem 4rem;
    position: relative;
    z-index: 1;
}

/* Secondary Scrollable Sections Page Wrapper */
.second-page-section {
    width: 100%;
    background:
        radial-gradient(circle at 18% 8%, rgba(10, 228, 72, 0.06), transparent 32%),
        radial-gradient(circle at 82% 18%, rgba(254, 197, 251, 0.08), transparent 36%),
        linear-gradient(180deg, rgba(14, 16, 15, 0.8) 0%, rgba(14, 16, 15, 0.9) 45%, rgba(14, 16, 15, 0.96) 100%);
    position: relative;
    z-index: 5;
    padding: 7rem 4rem 4rem 4rem;
    color: var(--color-text-primary);
    box-shadow: 0 -24px 55px rgba(5, 5, 10, 0.45);
    border-top: 1px solid var(--color-motion-line);
}

.section-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* Sub-sections layout spacing */
.landing-sub-section {
    padding: 6rem 0;
    border-bottom: 1px solid var(--color-motion-line);
    opacity: 0.52;
    transform: translateY(34px);
    transition: opacity 700ms ease, transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-sub-section.section-in-view {
    opacity: 1;
    transform: translateY(0);
}

.landing-sub-section:last-child {
    border-bottom: none;
}

.sub-section-title {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 6vw, 5.9rem);
    font-weight: 700;
    line-height: 0.98;
    color: var(--color-motion-cream);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0;
    text-shadow: none;
}

.sub-section-subtitle {
    font-size: clamp(1rem, 2vw, 1.45rem);
    line-height: 1.38;
    color: rgba(255, 252, 225, 0.68);
    margin-bottom: 2.5rem;
    font-weight: 400;
    border-left: 1px solid rgba(255, 252, 225, 0.44);
    padding-left: 18px;
}

/* Redesigned grid panels */
.about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.about-card {
    background: rgba(25, 25, 25, 0.72);
    border: 1px solid rgba(255, 252, 225, 0.1);
    border-radius: 8px;
    padding: 24px;
    transition: all 0.3s ease;
    box-shadow: none;
}

.about-card:hover {
    border-color: rgba(255, 252, 225, 0.46);
    box-shadow: none;
    transform: translateY(-2px);
}

.about-card-icon {
    font-size: 1.8rem;
    margin-bottom: 15px;
}

.about-card-title {
    font-family: var(--font-display);
    font-size: 1.08rem;
    color: var(--color-motion-cream);
    margin-bottom: 10px;
    letter-spacing: 0;
    text-transform: uppercase;
}

.about-card-desc {
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* Pain & Solutions Vetting Panel */
.vetting-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.vetting-item {
    background: rgba(10, 12, 20, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.vetting-pain {
    border-bottom: 1px dashed rgba(212, 178, 111, 0.22);
    padding-bottom: 12px;
}

.pain-header {
    color: rgba(255, 252, 225, 0.76);
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vetting-solution {
    padding-top: 5px;
}

.solution-header {
    color: var(--color-gold-light);
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 10 Modules List styling */
.modules-row-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
}

.mod-badge {
    background: rgba(10, 15, 30, 0.85);
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 8px;
    padding: 15px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    transition: 0.2s;
}

.mod-badge:hover {
    border-color: var(--color-gold-light);
    background: rgba(212, 175, 55, 0.04);
    color: #fff;
}

/* Lifecycle Timeline styling */
.lifecycle-container {
    background: rgba(10, 12, 20, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 40px 30px;
    margin-top: 20px;
}

.lifecycle-timeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 20px;
    position: relative;
}

.lifecycle-step {
    text-align: center;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.lifecycle-step:hover {
    transform: translateY(-5px);
}

.step-num {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(10, 15, 30, 0.9);
    border: 2px solid rgba(212, 175, 55, 0.3);
    color: var(--color-gold-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px auto;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.05);
    transition: all 0.3s ease;
}

.lifecycle-step:hover .step-num {
    border-color: var(--color-gold-light);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.25);
    background: var(--color-gold-light);
    color: #000;
}

.step-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.step-desc {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    line-height: 1.3;
}

/* Categorized Deliverables */
.deliverables-phases {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
    width: 100%;
}

.deliverables-phase-col {
    background: rgba(10, 12, 20, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.deliverables-image-col {
    position: relative;
    border-radius: 12px;
    border: 1px solid var(--color-gold-border);
    overflow: hidden;
    height: 100%;
    min-height: 320px;
    display: flex;
    align-items: stretch;
}

.deliverables-image-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-speed) ease;
}

.deliverables-image-col:hover img {
    transform: scale(1.05);
}

.image-overlay-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.4) 70%, transparent 100%);
    padding: 16px;
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.image-overlay-text strong {
    color: #fff;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.phase-header-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    color: var(--color-gold-light);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
    padding-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.deliverable-mini-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    transition: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.deliverable-mini-card:last-child {
    margin-bottom: 0;
}

.deliverable-mini-card:hover {
    border-color: rgba(212, 175, 55, 0.35);
    background: rgba(212, 175, 55, 0.04);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.card-icon-wrapper {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: var(--color-gold-light);
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.05);
}

.card-text-wrapper {
    display: flex;
    flex-direction: column;
}

.deliverable-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 3px;
}

.deliverable-desc {
    font-size: 0.68rem;
    color: var(--color-text-secondary);
    line-height: 1.35;
}

/* Target Audience styling */
.audience-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.audience-card {
    background: rgba(10, 12, 20, 0.75);
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 12px;
    padding: 30px 25px;
    transition: 0.3s;
}

.audience-card:hover {
    border-color: var(--color-gold-light);
    box-shadow: 0 10px 35px rgba(212, 175, 55, 0.15);
}

.audience-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.05rem;
    color: var(--color-gold-light);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.audience-bullets {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.audience-bullet-item {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.audience-bullet-item::before {
    content: '✦';
    color: var(--color-gold-light);
    font-size: 0.75rem;
    margin-top: 1px;
}

/* Accordion FAQ styling */
.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: rgba(10, 12, 20, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-question {
    padding: 18px 25px;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--color-text-primary);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    transition: 0.2s;
}

.faq-question:hover {
    background: rgba(255, 255, 255, 0.02);
    color: var(--color-gold-light);
}

.faq-icon {
    font-size: 0.85rem;
    color: var(--color-gold-light);
    transition: transform 0.3s ease;
}

.faq-item.open .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    background: rgba(0, 0, 0, 0.2);
}

.faq-answer-inner {
    padding: 20px 25px;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    border-top: 1px solid rgba(255,255,255,0.03);
}

/* Custom Contact Form styling */
.contact-form-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
}

.contact-form-card {
    background: rgba(10, 12, 20, 0.85);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 16px;
    padding: 35px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
}

.contact-inputs-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

.contact-input-container {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: all 0.3s ease;
}

.contact-input-container.focused {
    border-color: var(--color-gold-light);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.15);
}

.contact-input-container label {
    font-size: 0.68rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contact-input-container input, 
.contact-input-container textarea,
.contact-input-container select {
    background: transparent;
    border: none;
    color: #fff;
    outline: none;
    font-size: 0.85rem;
    width: 100%;
}

.contact-input-container textarea {
    height: 100px;
    resize: none;
}

.project-file-field {
    position: relative;
    margin-bottom: 18px;
}

.project-file-field input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.project-file-label {
    min-height: 76px;
    padding: 13px 15px;
    border: 1px dashed rgba(255, 252, 225, 0.24);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 13px;
    cursor: pointer;
    transition: border-color 180ms ease, background 180ms ease;
}

.project-file-label:hover,
.project-file-field input[type="file"]:focus-visible + .project-file-label {
    border-color: var(--color-gold-light);
    background: rgba(212, 175, 55, 0.08);
}

.project-file-plus {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border: 1px solid rgba(255, 252, 225, 0.22);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold-light);
    font-size: 1.2rem;
}

.project-file-label strong,
.project-file-label small {
    display: block;
}

.project-file-label strong {
    font: 700 0.83rem/1.25 var(--font-sans);
}

.project-file-label small {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.54);
    font: 500 0.7rem/1.35 var(--font-sans);
}

.project-file-name {
    margin: 7px 2px 0;
    color: rgba(255, 255, 255, 0.54);
    font: 500 0.72rem/1.35 var(--font-sans);
    overflow-wrap: anywhere;
}

.project-file-field.has-file .project-file-label {
    border-style: solid;
    border-color: rgba(143, 216, 161, 0.58);
    background: rgba(143, 216, 161, 0.07);
}

.project-file-field.has-file .project-file-name {
    color: #8fd8a1;
}

.project-file-field.has-error .project-file-label {
    border-color: rgba(255, 170, 163, 0.72);
}

.project-file-field.has-error .project-file-name {
    color: #ffaaa3;
}

.file-transfer-confirmation {
    margin: 0 0 18px;
}

.file-transfer-confirmation[hidden] {
    display: none !important;
}

.access-project-file-field {
    margin: 24px 0 0;
}

.access-project-file-field .project-file-label {
    background: rgba(255, 255, 255, 0.018);
}

.access-project-file-field + .access-consent-option {
    margin-top: 12px;
}

/* The hero CTA reuses the final project form in a right-side drawer. */
.project-drawer-backdrop,
.project-drawer-panel {
    transition: opacity 360ms ease, visibility 360ms ease, transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
}

.project-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1240;
    background: rgba(2, 7, 14, 0.68);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    backdrop-filter: blur(5px);
}

.project-drawer-panel {
    position: fixed;
    top: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 1250;
    width: min(650px, calc(100vw - 36px));
    padding: clamp(28px, 3.2vw, 46px);
    border: 1px solid rgba(255, 252, 225, 0.2);
    border-radius: 12px;
    background:
        radial-gradient(circle at 100% 0, rgba(169, 125, 58, 0.18), transparent 38%),
        linear-gradient(180deg, rgba(7, 17, 31, 0.99), rgba(4, 9, 16, 0.99));
    box-shadow: -34px 0 100px rgba(0, 0, 0, 0.46);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(108%, 0, 0);
}

.project-drawer-panel[hidden],
.project-drawer-backdrop[hidden] {
    display: none !important;
}

html.project-drawer-open,
body.project-drawer-open {
    overflow: hidden;
}

body.project-drawer-open .project-drawer-backdrop,
body.project-drawer-open .project-drawer-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.project-drawer-open .project-drawer-panel {
    transform: translate3d(0, 0, 0);
}

.project-drawer-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 252, 225, 0.18);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-motion-cream);
    font: 400 1.6rem/1 var(--font-sans);
    cursor: pointer;
}

.project-drawer-kicker {
    margin: 2px 58px 12px 0;
    color: var(--color-gold-light);
    font: 700 0.72rem/1.2 var(--font-sans);
    letter-spacing: 0.14em;
}

.project-drawer-panel > h2 {
    margin: 0 58px 10px 0;
    color: var(--color-motion-cream);
    font: 800 clamp(2.2rem, 4vw, 3.5rem)/0.95 var(--font-sans);
}

.project-drawer-intro {
    max-width: 510px;
    margin: 0 0 22px;
    color: rgba(255, 255, 255, 0.62);
    font: 500 0.92rem/1.5 var(--font-sans);
}

.project-drawer-form-slot .contact-form-card {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.project-drawer-form-slot .contact-input-container {
    background: rgba(255, 255, 255, 0.045);
}

@media (max-width: 768px) {
    .hero-project-button {
        min-height: 44px;
        padding: 0 16px;
        gap: 15px;
        font-size: 0.68rem;
    }

    .project-drawer-panel {
        top: 12px;
        right: 12px;
        bottom: 12px;
        width: calc(100vw - 24px);
        padding: 27px 18px 24px;
    }

    .project-drawer-panel > h2 {
        font-size: 2.15rem;
    }

    .project-drawer-intro {
        margin-bottom: 16px;
        font-size: 0.82rem;
    }

    .project-drawer-form-slot .contact-form-card {
        padding: 0 !important;
    }

    .project-file-label {
        min-height: 66px;
        padding: 10px;
    }
}

/* Policy Alert callout */
.policy-callout {
    background: rgba(201, 168, 76, 0.04);
    border: 1px solid rgba(201, 168, 76, 0.25);
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 0 25px rgba(201, 168, 76, 0.05);
}

.policy-callout h3 {
    font-family: 'Orbitron', sans-serif;
    color: var(--color-gold-light);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.policy-callout p {
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    max-width: 920px;
    margin: 0 auto;
}

/* Scroll adjustments on mobile */
@media (max-width: 992px) {
    .deliverables-phases, .audience-tabs {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .nav-header {
        padding: 0 2rem;
    }
    
    .nav-menu-links {
        display: none; /* Hide links on mobile view for header simplicity */
    }
    
    .second-page-section {
        padding: 4rem 2rem 3rem 2rem;
    }
    
    .vetting-list, .contact-form-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================================
   7. SCROLL SNAPPING & SIDE NAVIGATION DOTS
   ========================================================================= */
html:has(body.landing-page) {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

@media (min-width: 769px) {
    html:has(body.landing-page) {
        overflow-x: visible;
        scroll-snap-type: y mandatory;
    }

    body.landing-page {
        overflow-x: clip;
    }
}

/* Landing Page Hero and Sub-sections Snapping */
.landing-hero-section {
    scroll-snap-align: center;
}

.landing-sub-section {
    scroll-snap-align: start;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 7rem 0 5rem;
    box-sizing: border-box;
}

/* Side Navigation Dots styling */
.side-nav-dots {
    position: fixed;
    right: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    z-index: 100;
}

.nav-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.25);
    border: 2px solid transparent;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    position: relative;
}

.nav-dot:hover {
    background-color: var(--color-gold-light);
    transform: scale(1.3);
}

.nav-dot.active {
    background-color: var(--color-gold-primary);
    border-color: var(--color-gold-light);
    transform: scale(1.4);
    box-shadow: 0 0 12px var(--color-gold-glow);
}

/* Tooltip on hover */
.nav-dot::after {
    content: attr(title);
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    background: rgba(10, 10, 12, 0.9);
    border: 1px solid var(--color-gold-border);
    color: var(--color-text-primary);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.72rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
    font-family: var(--font-sans);
}

.nav-dot:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* Adjustments for smaller viewports */
@media (max-width: 992px) {
    .side-nav-dots {
        display: none; /* Hide dots on mobile devices */
    }
    html:has(body.landing-page) {
        scroll-snap-type: none; /* Disable scroll snapping on mobile for better scrolling experience */
    }
    .landing-sub-section {
        min-height: auto;
        scroll-snap-align: none;
    }
}

/* =========================================================================
   8. SPLIT CONTAINER LAYOUT & ILLUSTRATION IMAGES
   ========================================================================= */
.split-container {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3.5rem;
    align-items: center;
    width: 100%;
}

.split-container.reverse {
    grid-template-columns: 0.9fr 1.1fr;
}

.split-left {
    display: flex;
    flex-direction: column;
}

.split-right {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.split-image {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--color-gold-border);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.4), 0 0 25px rgba(212, 175, 55, 0.05);
    transition: transform var(--transition-speed) ease, border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.split-video {
    aspect-ratio: 4 / 5;
    min-height: clamp(360px, 58vh, 620px);
    object-fit: cover;
    object-position: center;
    display: block;
}

.split-image:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: var(--color-gold-light);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 35px rgba(212, 175, 55, 0.15);
}

.lifecycle-image {
    align-self: flex-start;
    margin-top: clamp(-104px, -8vh, -68px);
}

.lifecycle-image:hover {
    transform: translateY(-10px) scale(1.02);
}

/* Wide editorial layout for the GSAP-inspired landing sections */
.second-page-section {
    padding-left: clamp(3rem, 5vw, 6rem);
    padding-right: clamp(3rem, 5vw, 6rem);
}

.section-wrapper {
    max-width: none;
    margin: 0;
}

.landing-sub-section {
    align-items: stretch;
}

.sub-section-title,
.sub-section-subtitle {
    max-width: min(1180px, 88vw);
}

.sub-section-title {
    font-size: clamp(3.6rem, 6.8vw, 7.2rem);
}

.sub-section-subtitle {
    max-width: min(980px, 78vw);
    font-family: var(--font-sans);
}

.landing-sub-section p,
.about-card-desc,
.vetting-item p,
.step-desc,
.deliverable-desc,
.audience-bullet-item,
.faq-answer-inner,
.image-overlay-text,
.policy-callout p {
    font-family: 'DM Sans', 'Inter Tight', 'Inter', sans-serif !important;
    font-size: clamp(1.02rem, 1.08vw, 1.18rem) !important;
    font-weight: 500 !important;
    line-height: 1.62 !important;
    color: rgba(255, 252, 225, 0.84) !important;
    letter-spacing: -0.01em !important;
    text-wrap: pretty;
    text-shadow: 0 1px 18px rgba(0, 0, 0, 0.22);
}

.deliverable-desc,
.step-desc {
    font-size: clamp(1rem, 1.02vw, 1.12rem) !important;
    line-height: 1.52 !important;
    color: rgba(255, 252, 225, 0.78) !important;
}

.about-card-desc,
.faq-answer-inner,
.audience-bullet-item {
    max-width: 68ch;
}

.split-container,
.split-container.reverse {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.86fr);
    gap: clamp(2rem, 4vw, 5rem);
    align-items: stretch;
}

.split-container.reverse {
    grid-template-columns: minmax(420px, 0.86fr) minmax(0, 1fr);
}

.split-left,
.split-right {
    min-width: 0;
}

.split-right {
    justify-content: stretch;
}

.split-image {
    max-width: none;
    width: 100%;
    height: min(58vh, 620px);
    object-fit: cover;
    border-radius: 8px;
    border-color: rgba(255, 252, 225, 0.14);
    box-shadow: none;
}

.about-grid,
.vetting-list,
.modules-row-grid,
.lifecycle-timeline,
.audience-tabs {
    gap: 16px;
}

.about-grid {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
}

.about-card,
.vetting-item,
.lifecycle-container,
.deliverables-phase-col,
.deliverable-mini-card,
.audience-card,
.faq-item,
.contact-form-card,
.policy-callout {
    font-family: var(--font-sans);
    background: rgba(25, 25, 25, 0.72);
    border: 1px solid rgba(255, 252, 225, 0.11);
    border-radius: 8px;
    box-shadow: none;
}

.about-card,
.vetting-item,
.audience-card,
.contact-form-card,
.policy-callout {
    padding: clamp(22px, 2.2vw, 34px);
}

.about-card-title,
.pain-header,
.solution-header,
.phase-header-title,
.deliverable-title,
.audience-title,
.faq-question,
.policy-callout h3,
.step-label {
    font-family: var(--font-display) !important;
    color: var(--color-motion-cream) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.about-card-title,
.audience-title,
.phase-header-title {
    font-size: clamp(1.05rem, 1.25vw, 1.32rem);
    line-height: 1.08;
}

.pain-header {
    color: rgba(255, 252, 225, 0.76) !important;
}

.solution-header {
    color: var(--color-text-gold) !important;
}

.vetting-list {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
}

.lifecycle-container {
    padding: clamp(24px, 3vw, 42px);
}

.lifecycle-timeline {
    grid-template-columns: repeat(4, minmax(130px, 1fr));
}

.lifecycle-step {
    text-align: left;
    padding: 16px;
    border-left: 1px solid rgba(255, 252, 225, 0.13);
}

.step-num {
    margin: 0 0 15px 0;
    font-family: var(--font-display);
    border-color: rgba(255, 252, 225, 0.22);
    color: var(--color-motion-orange);
    background: rgba(25, 25, 25, 0.76);
    box-shadow: none;
}

.deliverables-phases {
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: 18px;
}

.deliverable-mini-card {
    padding: 14px;
}

.card-icon-wrapper {
    background: rgba(255, 252, 225, 0.05);
    border-color: rgba(255, 252, 225, 0.14);
    color: var(--color-motion-orange);
    box-shadow: none;
}

.audience-tabs,
.split-right .audience-tabs {
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.faq-question {
    font-size: clamp(1rem, 1.15vw, 1.18rem);
    padding: 22px 26px;
}

.contact-form-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
}

.contact-input-container,
.contact-input-container input,
.contact-input-container textarea,
.contact-input-container select,
.contact-input-container label {
    font-family: var(--font-sans);
}

.contact-input-container.focused {
    border-color: rgba(255, 252, 225, 0.52);
    box-shadow: none;
}

.mod-badge,
.contact-form-card h3,
.contact-form-card p,
.contact-form-card strong,
.image-overlay-text strong {
    font-family: var(--font-sans) !important;
    letter-spacing: 0 !important;
}

.contact-form-card h3 {
    color: var(--color-motion-cream) !important;
    font-size: clamp(1.35rem, 2vw, 2rem) !important;
    line-height: 1.08 !important;
    text-transform: none !important;
    margin-bottom: 20px !important;
}

.mod-badge {
    min-height: 74px;
    display: flex;
    align-items: center;
    background: rgba(25, 25, 25, 0.72);
    border-color: rgba(255, 252, 225, 0.11);
    color: rgba(255, 252, 225, 0.74);
    font-size: clamp(0.95rem, 1vw, 1.05rem);
}

/* Adjust layout spacing inside splits */
.split-left .about-grid {
    margin-bottom: 0;
}

.split-right .audience-tabs {
    width: 100%;
}

/* Full HD / 1080p refinement: keeps the 2K look, but prevents tall sections from overflowing */
@media (max-width: 1920px) and (max-height: 1100px) {
    .nav-header {
        height: 78px;
        padding: 0 clamp(2.4rem, 3.2vw, 4rem);
    }

    .nav-header.scrolled {
        height: 68px;
    }

    .nav-menu-links {
        gap: clamp(1.1rem, 1.45vw, 1.8rem);
        height: 56px;
    }

    .nav-menu-links a {
        font-size: clamp(0.98rem, 1.02vw, 1.14rem);
    }

    .nav-limelight {
        height: 6px;
    }

    .nav-limelight span {
        top: 6px;
        height: 56px;
    }

    .landing-container {
        padding-top: 88px;
    }

    .landing-content {
        gap: clamp(2rem, 3vh, 3rem);
    }

    .brand-logo-text,
    .landing-title {
        font-size: clamp(3.35rem, 5.35vw, 5.8rem);
    }

    .landing-footer {
        margin-top: 1.35rem;
        margin-bottom: 2.6rem;
    }

    .landing-footer-text.gold {
        font-size: 1.18rem;
    }

    .second-page-section {
        padding-top: 4.8rem;
        padding-bottom: 2.8rem;
    }

    .landing-sub-section {
        min-height: 100vh;
        padding: 5.2rem 0 3.3rem;
    }

    .sub-section-title {
        font-size: clamp(3rem, 5.35vw, 5.55rem);
        margin-bottom: 0.55rem;
    }

    .sub-section-subtitle {
        font-size: clamp(0.96rem, 1.42vw, 1.22rem);
        line-height: 1.28;
        margin-bottom: 1.65rem;
    }

    .split-container,
    .split-container.reverse {
        gap: clamp(1.5rem, 3vw, 3.4rem);
        grid-template-columns: minmax(0, 1.04fr) minmax(360px, 0.78fr);
    }

    .split-container.reverse {
        grid-template-columns: minmax(360px, 0.78fr) minmax(0, 1.04fr);
    }

    .split-image {
        height: min(49vh, 500px);
    }

    .split-video {
        min-height: clamp(300px, 48vh, 500px);
    }

    .lifecycle-image {
        margin-top: clamp(-86px, -7vh, -54px);
        height: auto;
        max-height: min(46vh, 470px);
        object-fit: initial;
        object-position: center top;
        background: rgba(25, 25, 25, 0.42);
    }

    .landing-sub-section p,
    .about-card-desc,
    .vetting-item p,
    .step-desc,
    .deliverable-desc,
    .audience-bullet-item,
    .faq-answer-inner,
    .image-overlay-text,
    .policy-callout p {
        font-size: clamp(0.92rem, 0.92vw, 1.04rem) !important;
        line-height: 1.48 !important;
    }

    .about-grid,
    .vetting-list,
    .modules-row-grid,
    .lifecycle-timeline,
    .audience-tabs {
        gap: 12px;
    }

    .about-card,
    .vetting-item,
    .audience-card,
    .contact-form-card,
    .policy-callout {
        padding: clamp(16px, 1.45vw, 24px);
    }

    .about-card-icon {
        margin-bottom: 10px;
    }

    .about-card-title,
    .audience-title,
    .phase-header-title {
        font-size: clamp(0.98rem, 1.02vw, 1.14rem);
    }

    .lifecycle-timeline {
        grid-template-columns: repeat(4, minmax(118px, 1fr));
    }

    .lifecycle-step {
        padding: 12px;
    }

    .step-num {
        width: 42px;
        height: 42px;
        margin-bottom: 10px;
        font-size: 0.86rem;
    }

    .deliverables-phases {
        grid-template-columns: repeat(3, minmax(220px, 1fr));
        gap: 12px;
    }

    .deliverables-phase-col {
        padding: 12px;
    }

    .deliverable-mini-card {
        padding: 10px;
        margin-bottom: 6px;
    }

    .deliverables-image-col {
        min-height: 260px;
    }

    .faq-question {
        padding: 16px 20px;
        font-size: clamp(0.94rem, 0.98vw, 1.05rem);
    }

    .faq-answer-inner {
        padding: 16px 20px;
    }
}

/* Extra compact screens: 1080p browsers with bookmarks/toolbars, 1536x864 laptops */
@media (max-height: 900px), (max-width: 1500px) {
    .nav-brand {
        font-size: 1.36rem;
    }

    .nav-menu-links {
        gap: clamp(0.72rem, 1.05vw, 1.25rem);
        padding: 0 0.25rem;
    }

    .nav-menu-links a {
        font-size: clamp(0.86rem, 0.9vw, 1rem);
    }

    .nav-buttons {
        gap: 0.65rem;
    }

    .btn-nav-login,
    .btn-nav-register {
        font-size: 0.9rem;
    }

    .second-page-section {
        padding-left: clamp(2rem, 3.4vw, 4rem);
        padding-right: clamp(2rem, 3.4vw, 4rem);
    }

    .landing-sub-section {
        padding-top: 4.4rem;
        padding-bottom: 2.6rem;
    }

    .sub-section-title {
        font-size: clamp(2.65rem, 4.75vw, 4.8rem);
    }

    .sub-section-subtitle {
        margin-bottom: 1.35rem;
    }

    .split-container,
    .split-container.reverse {
        gap: clamp(1.2rem, 2.4vw, 2.6rem);
        grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.72fr);
    }

    .split-container.reverse {
        grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1.12fr);
    }

    .split-image {
        height: min(43vh, 420px);
    }

    .lifecycle-image {
        height: auto;
        max-height: min(40vh, 360px);
        object-fit: initial;
        object-position: center top;
    }

    .split-video {
        min-height: clamp(250px, 42vh, 420px);
    }

    .about-grid {
        grid-template-columns: repeat(2, minmax(210px, 1fr));
    }

    .deliverables-phases {
        grid-template-columns: repeat(3, minmax(190px, 1fr));
    }

    .audience-card {
        padding: 18px;
    }

    .contact-form-grid {
        gap: 24px;
    }
}

@media (max-width: 992px) {
    .split-container, .split-container.reverse {
        display: flex !important;
        flex-direction: column !important;
        gap: 2.5rem !important;
    }
    
    .split-container.reverse {
        flex-direction: column-reverse !important; /* Stack text content above the image on mobile */
    }
    
    .split-image {
        max-width: 100% !important;
    }

    .deliverables-phases {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .deliverables-image-col {
        grid-column: span 2 !important;
        min-height: 180px !important;
    }
}

@media (max-width: 580px) {
    .deliverables-phases {
        grid-template-columns: 1fr !important;
    }

    .deliverables-image-col {
        grid-column: span 1 !important;
        min-height: 140px !important;
    }
}

.hero-explainer { max-width: 780px; margin: 18px auto 0; color: rgba(255,255,255,.82); font: 400 clamp(.9rem,1.4vw,1.08rem)/1.65 Inter,sans-serif; }
.hero-actions { display:flex; justify-content:center; gap:12px; margin-top:26px; flex-wrap:wrap; }
.hero-primary,.hero-secondary { padding:13px 20px; border-radius:4px; text-decoration:none; font:700 .76rem/1 Inter,sans-serif; letter-spacing:.08em; text-transform:uppercase; transition:.2s ease; }
.hero-primary { background:linear-gradient(90deg,#d4af37,#f0d080); color:#07111f; }
.hero-secondary { border:1px solid rgba(255,255,255,.45); color:#fff; background:rgba(7,17,31,.45); }
.hero-primary:hover,.hero-secondary:hover { transform:translateY(-2px); }
.site-footer { position:relative; z-index:3; display:grid; grid-template-columns:1fr auto; gap:18px 40px; padding:30px max(24px,calc((100% - 1360px)/2)); background:#050b14; border-top:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.58); font:400 .78rem/1.6 Inter,sans-serif; }
.site-footer div { display:flex; flex-direction:column; gap:4px; }
.site-footer strong { color:#fff; letter-spacing:.16em; }
.site-footer nav { display:flex; gap:20px; flex-wrap:wrap; }
.site-footer a { color:#d8bd67; text-decoration:none; }
.footer-privacy-button { border:0; padding:0; background:transparent; color:#d8bd67; font:inherit; cursor:pointer; }
.site-footer p { grid-column:1/-1; margin:0; }
.form-consent { margin:14px 0 0; color:rgba(255,255,255,.55); font:400 .72rem/1.55 Inter,sans-serif; text-align:center; }
.form-consent a { color:#d8bd67; }
@media (max-width:768px){ .site-footer{grid-template-columns:1fr}.site-footer p{grid-column:1}.hero-explainer{padding:0 12px} }

/* Right-side login drawer */
.login-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(4, 6, 10, 0.46);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 360ms ease, visibility 360ms ease;
}

.login-dropdown-menu.login-drawer-panel {
    position: fixed !important;
    top: clamp(18px, 3vh, 32px) !important;
    right: clamp(18px, 3vw, 38px) !important;
    bottom: clamp(18px, 3vh, 32px) !important;
    width: min(520px, calc(100vw - 36px)) !important;
    height: calc(100vh - clamp(18px, 3vh, 32px) * 2) !important;
    max-height: calc(100vh - clamp(18px, 3vh, 32px) * 2) !important;
    box-sizing: border-box;
    padding: clamp(28px, 4vw, 52px) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 252, 225, 0.5) !important;
    background: linear-gradient(180deg, rgba(255, 252, 225, 0.98) 0%, rgba(245, 243, 232, 0.96) 100%) !important;
    box-shadow: -30px 0 90px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(14, 16, 15, 0.05) inset !important;
    backdrop-filter: none !important;
    z-index: 1210 !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow-y: auto;
    isolation: isolate;
    transform: translate3d(110%, 0, 0) !important;
    transform-origin: center right !important;
    transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1), opacity 320ms ease, visibility 320ms ease !important;
}

.login-drawer-panel > :not(.login-drawer-close) {
    position: relative;
    z-index: 2;
}

.login-dropdown-menu.login-drawer-panel::after {
    display: none !important;
}

.login-dropdown-container.open .login-drawer-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.login-dropdown-container.open .login-dropdown-menu.login-drawer-panel,
.register-drawer-container.open .login-dropdown-menu.login-drawer-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) !important;
}

.register-drawer-container {
    position: relative;
    display: inline-block;
}

.register-drawer-container.open .register-drawer-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.register-drawer-panel .login-menu-title {
    font-size: clamp(1.9rem, 3.2vw, 3rem);
    margin-bottom: 10px;
}

.login-dropdown-menu.register-drawer-panel {
    padding-top: 36px !important;
    padding-bottom: 30px !important;
}

.register-drawer-panel .login-menu-subtitle {
    margin-bottom: 18px;
}

.register-drawer-panel .login-input {
    height: 48px;
    margin-bottom: 12px;
}

.register-drawer-panel .login-field-label {
    margin-bottom: 7px;
}

.register-drawer-panel .login-submit-btn {
    margin-top: 6px;
    height: 52px;
}

.login-drawer-close {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(14, 16, 15, 0.12);
    border-radius: 50%;
    background: rgba(14, 16, 15, 0.04);
    color: #0e100f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 180ms ease, transform 180ms ease;
}

.login-drawer-close:hover {
    background: rgba(14, 16, 15, 0.08);
    transform: rotate(6deg);
}

.login-drawer-close svg,
.login-password-toggle svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.login-drawer-kicker {
    font-family: var(--font-sans);
    color: #8c6023;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.login-drawer-panel .login-menu-title {
    font-family: var(--font-sans);
    font-size: clamp(2.2rem, 4.2vw, 3.8rem);
    font-weight: 800;
    line-height: 0.94;
    color: #0e100f;
    margin: 0 54px 14px 0;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    text-shadow: none;
}

.login-menu-subtitle {
    color: rgba(14, 16, 15, 0.62);
    font: 400 1rem/1.45 var(--font-sans);
    max-width: 420px;
    margin: 0 0 34px;
}

.login-field-label {
    display: block;
    color: rgba(14, 16, 15, 0.74);
    font: 600 0.92rem/1.2 var(--font-sans);
    margin-bottom: 9px;
}

.login-drawer-panel .login-input {
    margin-bottom: 20px;
    height: 56px;
    background: rgba(14, 16, 15, 0.04);
    border: 1px solid rgba(14, 16, 15, 0.14);
    border-radius: 14px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.login-drawer-panel .login-input:hover {
    border-color: rgba(14, 16, 15, 0.28);
    background: rgba(14, 16, 15, 0.06);
}

.login-drawer-panel .login-input.focused {
    border-color: rgba(14, 16, 15, 0.72);
    background: rgba(14, 16, 15, 0.07);
    box-shadow: 0 0 0 3px rgba(14, 16, 15, 0.08);
}

.login-drawer-panel .login-input input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: 500 1rem/1 var(--font-sans);
    color: #0e100f;
}

.login-drawer-panel .login-input input::placeholder {
    color: rgba(14, 16, 15, 0.38);
}

.login-drawer-panel .login-input .input-icon {
    color: rgba(14, 16, 15, 0.42);
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.login-drawer-panel .login-input.focused .input-icon {
    color: #8c6023;
}

.login-password-toggle {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(14, 16, 15, 0.52);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.login-password-toggle:hover {
    background: rgba(14, 16, 15, 0.07);
    color: #0e100f;
}

.login-form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin: 2px 0 24px;
    font: 500 0.92rem/1.2 var(--font-sans);
}

.login-remember {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: rgba(14, 16, 15, 0.62);
    cursor: pointer;
}

.login-remember input {
    width: 16px;
    height: 16px;
    accent-color: #0e100f;
}

.login-forgot,
.login-register-note a {
    color: #734c22;
    text-decoration: none;
    font-weight: 700;
}

.login-forgot:hover,
.login-register-note a:hover {
    color: #0e100f;
}

.login-drawer-panel .login-submit-btn {
    width: 100%;
    height: 56px;
    font: 700 1rem/1 var(--font-sans);
    margin-top: 0;
    background: #0e100f;
    color: #ffffff;
    border: none;
    border-radius: 14px;
    box-shadow: none;
}

.login-drawer-panel .login-submit-btn:hover {
    background: #242424;
    box-shadow: none;
}

.login-divider {
    position: relative;
    margin: 28px 0 20px;
    text-align: center;
    color: rgba(14, 16, 15, 0.42);
    font: 500 0.86rem/1 var(--font-sans);
}

.login-divider::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: rgba(14, 16, 15, 0.14);
}

.login-divider span {
    position: relative;
    z-index: 1;
    padding: 0 12px;
    background: rgba(248, 246, 236, 0.98);
}

.login-secondary-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.login-secondary-btn {
    height: 50px;
    border: 1px solid rgba(14, 16, 15, 0.16);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.28);
    color: #0e100f;
    font: 700 0.95rem/1 var(--font-sans);
    cursor: pointer;
}

.login-secondary-btn:hover {
    background: rgba(14, 16, 15, 0.05);
}

.login-register-note {
    margin: 24px 0 0;
    color: rgba(14, 16, 15, 0.58);
    font: 500 0.96rem/1.35 var(--font-sans);
}

.auth-earth-video {
    position: relative;
    width: auto;
    height: clamp(132px, 22vh, 190px);
    margin: clamp(22px, 4vh, 34px) -10px 0;
    overflow: hidden;
    border-radius: 22px;
    background: #0e100f;
    border: 1px solid rgba(14, 16, 15, 0.12);
    box-shadow: 0 24px 60px rgba(14, 16, 15, 0.16), inset 0 0 34px rgba(255, 252, 225, 0.08);
    pointer-events: none;
    mix-blend-mode: multiply;
}

.auth-earth-video::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(248, 246, 236, 0.16) 0%, rgba(248, 246, 236, 0) 32%),
        radial-gradient(circle at 50% 52%, rgba(255, 252, 225, 0) 28%, rgba(14, 16, 15, 0.12) 66%, rgba(14, 16, 15, 0.42) 100%);
}

.auth-earth-video::after {
    content: '';
    position: absolute;
    left: 14%;
    right: 14%;
    bottom: 10px;
    height: 1px;
    z-index: 2;
    background: linear-gradient(90deg, transparent, rgba(214, 179, 92, 0.38), transparent);
    filter: blur(0.2px);
    opacity: 0.52;
}

.auth-earth-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 58%;
    display: block;
    filter: none;
    transform: scale(1.04);
}

.register-drawer-panel .auth-earth-video {
    width: auto;
    height: clamp(112px, 17vh, 154px);
    margin-top: 18px;
    margin-bottom: 0;
}

.signup-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.signup-consent {
    margin: 14px 0 0;
    color: rgba(14, 16, 15, 0.48);
    font: 500 0.78rem/1.45 var(--font-sans);
}

.signup-consent a {
    color: #734c22;
    text-decoration: none;
    font-weight: 700;
}

.honeypot-field {
    position: fixed !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.form-status {
    min-height: 1.3em;
    margin: 12px 0 0;
    color: rgba(14, 16, 15, 0.62);
    font: 600 0.82rem/1.45 var(--font-sans);
}

.form-status:empty {
    display: none;
}

.form-status.is-success {
    color: #2f6f3f;
}

.form-status.is-error {
    color: #8b362f;
}

.form-status-dark {
    text-align: center;
    color: rgba(255, 255, 255, 0.72);
}

.form-status-dark.is-success {
    color: #8fd8a1;
}

.form-status-dark.is-error {
    color: #ffaaa3;
}

:where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid var(--color-motion-blue);
    outline-offset: 3px;
}

@media (max-width: 580px) {
    .login-dropdown-menu.login-drawer-panel {
        top: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        width: calc(100vw - 24px) !important;
        height: calc(100vh - 24px) !important;
        max-height: calc(100vh - 24px) !important;
        padding: 26px 22px !important;
    }

    .login-drawer-panel .login-menu-title {
        font-size: 2.2rem;
    }

    .login-form-row,
    .login-secondary-actions,
    .signup-field-grid {
        grid-template-columns: 1fr;
    }

    .login-form-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .auth-earth-video {
        width: auto;
        height: 118px;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 0;
    }

    .register-drawer-panel .auth-earth-video {
        width: auto;
        height: 108px;
        margin-bottom: 0;
    }
}

.legal-page { min-height:100vh; margin:0; background:radial-gradient(circle at 80% 0,#102642 0,#07111f 42%,#040910 100%); color:#e9eef5; font-family:Inter,Arial,sans-serif; }
.legal-shell { width:min(760px,calc(100% - 40px)); margin:0 auto; padding:64px 0 90px; }
.legal-shell h1 { font:600 clamp(2.2rem,7vw,4.3rem)/1.05 'Cormorant Garamond',serif; margin:18px 0 32px; }
.legal-shell h2 { margin:34px 0 10px; color:#e2c86e; font-size:1rem; text-transform:uppercase; letter-spacing:.08em; }
.legal-shell p,.legal-shell li { color:rgba(233,238,245,.74); line-height:1.75; }
.legal-back,.legal-action { color:#e2c86e; text-decoration:none; }
.legal-note { margin-top:34px; padding:18px; border-left:3px solid #d4af37; background:rgba(255,255,255,.04); }

/* Install MATRIX as a mobile app */
.pwa-install-button {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, calc(env(safe-area-inset-bottom) + 10px));
    z-index: 1080;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 62px;
    padding: 8px 14px 8px 8px;
    border: 1px solid rgba(255, 252, 225, 0.28);
    border-radius: 18px;
    background: rgba(7, 17, 31, 0.9);
    color: var(--color-motion-cream);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(16px);
    cursor: pointer;
    text-align: left;
    transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease;
}

.pwa-install-button[hidden],
.pwa-install-backdrop[hidden],
.pwa-install-sheet[hidden] {
    display: none !important;
}

.pwa-install-button img {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 12px;
    object-fit: cover;
}

.pwa-install-button span {
    display: grid;
    gap: 2px;
}

.pwa-install-button strong {
    font: 700 0.82rem/1.15 var(--font-sans);
}

.pwa-install-button small {
    color: rgba(255, 252, 225, 0.62);
    font: 500 0.7rem/1.15 var(--font-sans);
}

.pwa-install-button.is-compact {
    width: 62px;
    padding-right: 8px;
}

.pwa-install-button.is-compact span {
    display: none;
}

.pwa-install-button.is-hidden-on-scroll {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px);
}

body.auth-drawer-open .pwa-install-button {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.pwa-install-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1220;
    background: rgba(4, 9, 16, 0.72);
    backdrop-filter: blur(7px);
}

.pwa-install-sheet {
    position: fixed;
    left: 50%;
    bottom: max(14px, env(safe-area-inset-bottom));
    z-index: 1230;
    width: min(430px, calc(100vw - 28px));
    max-height: calc(100svh - 28px);
    overflow-y: auto;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 18px;
    padding: 24px;
    border: 1px solid rgba(14, 16, 15, 0.1);
    border-radius: 22px;
    background: #fffce1;
    color: #0e100f;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.48);
}

.pwa-install-icon {
    width: 84px;
    height: 84px;
    border-radius: 20px;
    object-fit: cover;
    box-shadow: 0 10px 24px rgba(64, 38, 16, 0.18);
}

.pwa-install-kicker {
    margin: 2px 0 7px;
    color: #8c6023;
    font: 700 0.7rem/1 var(--font-sans);
    letter-spacing: 0.13em;
}

.pwa-install-sheet h2 {
    margin: 0 34px 10px 0;
    font: 800 1.45rem/1.03 var(--font-sans);
}

.pwa-install-sheet p:not(.pwa-install-kicker) {
    margin: 0;
    color: rgba(14, 16, 15, 0.7);
    font: 500 0.92rem/1.5 var(--font-sans);
}

.pwa-install-sheet .pwa-install-note {
    margin-top: 10px !important;
    color: rgba(14, 16, 15, 0.5) !important;
    font-size: 0.8rem !important;
}

.pwa-install-close {
    position: absolute;
    top: 13px;
    right: 13px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(14, 16, 15, 0.07);
    color: #0e100f;
    font: 500 1.5rem/1 var(--font-sans);
    cursor: pointer;
}

@media (min-width: 769px) {
    .pwa-install-button {
        display: none !important;
    }
}

/* Final mobile pass: keep every block inside the viewport and reduce first paint work. */
@media (max-width: 768px) {
    html,
    body,
    body.landing-page {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    .nav-header,
    .nav-header.scrolled {
        top: 0;
        height: calc(70px + env(safe-area-inset-top));
        padding:
            env(safe-area-inset-top)
            max(16px, env(safe-area-inset-right))
            0
            max(16px, env(safe-area-inset-left));
    }

    .nav-brand {
        flex: 0 0 auto;
        font-size: clamp(1rem, 4.6vw, 1.22rem);
        letter-spacing: 2px;
    }

    .nav-buttons {
        min-width: 0;
        gap: clamp(8px, 2.6vw, 13px);
    }

    .btn-nav-login,
    .btn-nav-register {
        padding: 0.65rem 0;
        font-size: clamp(0.72rem, 3.2vw, 0.86rem);
        white-space: nowrap;
    }

    .landing-hero-section {
        width: 100%;
        height: 100dvh;
        min-height: 100dvh;
        max-height: 100dvh;
        overflow: hidden;
        padding:
            max(88px, calc(env(safe-area-inset-top) + 72px))
            max(22px, env(safe-area-inset-right))
            max(22px, env(safe-area-inset-bottom))
            max(22px, env(safe-area-inset-left));
    }

    .landing-content,
    .headline-block {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .landing-content {
        gap: clamp(1.8rem, 5.5vh, 3rem);
    }

    .brand-logo-text {
        font-size: clamp(2.35rem, 11.5vw, 3.15rem);
        line-height: 0.95;
    }

    .landing-title {
        max-width: 100%;
        font-size: clamp(1.42rem, 6.2vw, 2rem);
        line-height: 1.02;
        letter-spacing: -0.025em;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .landing-title .motion-word {
        display: inline;
        white-space: normal;
    }

    .landing-separator {
        width: min(78vw, 310px);
    }

    .landing-subtitle {
        max-width: 100%;
        font-size: clamp(0.8rem, 3.7vw, 0.98rem);
        line-height: 1.35;
    }

    .landing-footer {
        max-width: calc(100% - 96px);
        margin-top: 1rem;
        margin-bottom: max(4.5rem, calc(env(safe-area-inset-bottom) + 3.4rem));
    }

    .landing-footer-text {
        font-size: 0.68rem;
        line-height: 1.2;
    }

    .landing-footer-text.gold {
        font-size: clamp(0.86rem, 4.5vw, 1.04rem);
        line-height: 1.06;
        overflow-wrap: anywhere;
    }

    .second-page-section {
        width: 100%;
        padding: 3.8rem max(20px, env(safe-area-inset-right)) 3rem max(20px, env(safe-area-inset-left));
    }

    .section-wrapper,
    .landing-sub-section,
    .split-container,
    .split-container.reverse,
    .split-left,
    .split-right {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .landing-sub-section {
        min-height: auto;
        padding: 3.9rem 0 3.2rem;
        scroll-margin-top: 70px;
        content-visibility: visible;
        contain: none;
    }

    .sub-section-title,
    .sub-section-subtitle {
        max-width: 100%;
    }

    .sub-section-title {
        font-size: clamp(2rem, 10.4vw, 2.75rem);
        line-height: 0.96;
        overflow-wrap: anywhere;
    }

    .sub-section-subtitle {
        margin-bottom: 1.5rem;
        padding-left: 13px;
        font-size: 1rem;
        line-height: 1.42;
        text-wrap: pretty;
    }

    .sub-section-title .motion-word {
        max-width: 100%;
        white-space: normal;
    }

    .landing-sub-section p,
    .about-card-desc,
    .vetting-item p,
    .step-desc,
    .deliverable-desc,
    .audience-bullet-item,
    .faq-answer-inner,
    .image-overlay-text,
    .policy-callout p {
        font-size: 0.98rem !important;
        line-height: 1.55 !important;
        overflow-wrap: anywhere;
    }

    .split-container,
    .split-container.reverse {
        gap: 1.55rem !important;
    }

    .about-grid,
    .vetting-list,
    .modules-row-grid,
    .deliverables-phases,
    .audience-tabs,
    .split-right .audience-tabs,
    .contact-form-grid,
    .contact-inputs-row {
        width: 100%;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    .about-card,
    .vetting-item,
    .lifecycle-container,
    .deliverables-phase-col,
    .deliverable-mini-card,
    .audience-card,
    .faq-item,
    .contact-form-card,
    .policy-callout {
        width: 100%;
        min-width: 0;
    }

    .about-card,
    .vetting-item,
    .audience-card,
    .contact-form-card,
    .policy-callout {
        padding: 18px;
    }

    .lifecycle-container {
        margin-top: 8px;
        padding: 14px;
    }

    .lifecycle-timeline {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
    }

    .lifecycle-step {
        min-width: 0;
        padding: 12px 10px;
    }

    .step-label {
        overflow-wrap: anywhere;
    }

    .step-desc {
        font-size: 0.86rem !important;
        line-height: 1.4 !important;
    }

    .split-image,
    .lifecycle-image {
        display: block;
        width: 100%;
        max-width: 100% !important;
        height: auto;
        max-height: none;
        margin: 0;
        object-fit: cover;
        object-position: center;
    }

    .split-video {
        min-height: 0;
        aspect-ratio: 16 / 10;
        background: #0e100f url("assets/hero-poster.jpg") center / cover no-repeat;
    }

    .deliverables-phase-col,
    .deliverable-mini-card {
        padding: 14px;
    }

    .deliverable-mini-card {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .faq-question {
        gap: 12px;
        padding: 17px 16px;
        font-size: 1rem;
        line-height: 1.35;
    }

    .faq-answer-inner {
        padding: 16px;
    }

    .contact-form-grid {
        display: grid;
    }

    .contact-form-card {
        border-radius: 10px;
    }

    .contact-input-container {
        min-width: 0;
        padding: 11px 12px;
    }

    .contact-input-container input,
    .contact-input-container textarea,
    .contact-input-container select {
        min-width: 0;
        font-size: 16px;
    }

    .policy-callout {
        text-align: left;
    }

    .site-footer {
        width: 100%;
        padding:
            28px max(20px, env(safe-area-inset-right))
            max(92px, calc(env(safe-area-inset-bottom) + 76px))
            max(20px, env(safe-area-inset-left));
    }

    .motion-letter {
        will-change: auto;
    }

    .landing-title,
    .sub-section-title,
    .motion-word,
    .motion-letter {
        text-decoration: none !important;
        border-bottom: 0 !important;
    }

    .motion-letter::after,
    .section-leaving .motion-letter::after {
        content: none !important;
        display: none !important;
        animation: none !important;
    }

    .loader-wrapper {
        height: auto;
        min-height: calc(100dvh + 4px);
        padding:
            max(24px, env(safe-area-inset-top))
            max(24px, env(safe-area-inset-right))
            max(24px, env(safe-area-inset-bottom))
            max(24px, env(safe-area-inset-left));
    }

    .loader-content {
        width: min(248px, 78vw);
    }

    .loader-logo-mark {
        width: 156px;
        height: 156px;
    }

    .loader-logo-fill canvas {
        width: 156px;
    }
}

/* Mobile section slides: each marketing block opens from its beginning. */
@media (max-width: 768px) {
    html:has(body.landing-page) {
        scroll-snap-type: y mandatory !important;
        scroll-padding-top: calc(70px + env(safe-area-inset-top));
        overscroll-behavior-y: contain;
    }

    body.landing-page {
        scroll-snap-type: y mandatory !important;
        scroll-padding-top: calc(70px + env(safe-area-inset-top));
        overscroll-behavior-y: contain;
    }

    .landing-hero-section,
    .landing-sub-section {
        scroll-snap-align: start !important;
        scroll-snap-stop: always;
    }

    .second-page-section {
        padding-top: 0;
        padding-bottom: 0;
        border-top: 0;
        box-shadow: none;
    }

    .landing-sub-section {
        min-height: calc(100dvh - 70px - env(safe-area-inset-top));
        padding-top: 20px;
        padding-bottom: 24px;
        justify-content: flex-start;
        scroll-margin-top: 0;
    }

    .sub-section-title {
        font-size: clamp(1.8rem, 8.8vw, 2.4rem);
        line-height: 0.96;
        margin-bottom: 0.42rem;
    }

    .sub-section-subtitle {
        margin-bottom: 0.85rem;
        padding-left: 10px;
        font-size: 0.82rem;
        line-height: 1.32;
    }

    .split-container,
    .split-container.reverse {
        gap: 0.8rem !important;
    }

    /* These two desktop videos are fully disabled by app.js on mobile. */
    #about .split-right,
    #audience .split-left {
        display: none !important;
    }

    #about .split-container,
    #audience .split-container {
        display: block !important;
    }

    #about .split-left > p:first-child {
        display: -webkit-box;
        margin-bottom: 0.75rem !important;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        font-size: 0.78rem !important;
        line-height: 1.38 !important;
    }

    #about .about-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    #about .about-card {
        min-height: 0;
        padding: 10px;
    }

    #about .about-card-icon {
        margin-bottom: 4px;
        font-size: 1.08rem;
    }

    #about .about-card-title {
        margin-bottom: 5px;
        font-size: 0.78rem;
        line-height: 1.12;
    }

    #about .about-card-desc {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        font-size: 0.69rem !important;
        line-height: 1.3 !important;
    }

    #solutions .vetting-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    #solutions .vetting-item {
        gap: 7px;
        padding: 10px;
    }

    #solutions .vetting-pain {
        padding-bottom: 7px;
    }

    #solutions .pain-header,
    #solutions .solution-header {
        display: block;
        margin-bottom: 0;
        font-size: 0.68rem;
        line-height: 1.25;
    }

    #solutions .vetting-item p {
        display: none;
    }

    #solutions .split-left .split-image {
        height: 110px;
        object-fit: cover;
        object-position: center;
    }

    #lifecycle .split-left > p:first-child {
        display: -webkit-box;
        margin-bottom: 0.55rem !important;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        font-size: 0.74rem !important;
        line-height: 1.35 !important;
    }

    #lifecycle .lifecycle-container {
        margin-top: 0;
        padding: 8px;
    }

    #lifecycle .lifecycle-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    #lifecycle .lifecycle-step {
        padding: 7px;
    }

    #lifecycle .step-num {
        width: 30px;
        height: 30px;
        margin-bottom: 5px;
        font-size: 0.68rem;
    }

    #lifecycle .step-label {
        margin-bottom: 3px;
        font-size: 0.68rem;
        line-height: 1.15;
    }

    #lifecycle .step-desc {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 0.62rem !important;
        line-height: 1.25 !important;
    }

    #lifecycle .lifecycle-image {
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: cover;
    }

    #deliverables .deliverables-phases {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin-top: 8px;
    }

    #deliverables .deliverables-phase-col {
        padding: 6px;
    }

    #deliverables .phase-header-title {
        min-height: 42px;
        margin-bottom: 5px;
        padding-bottom: 5px;
        align-items: flex-start;
        font-size: 0.57rem;
        line-height: 1.2;
        letter-spacing: 0;
    }

    #deliverables .deliverable-mini-card {
        min-height: 38px;
        margin-bottom: 4px;
        padding: 5px;
        gap: 4px;
        align-items: flex-start;
    }

    #deliverables .card-icon-wrapper {
        width: 19px;
        height: 19px;
        flex-basis: 19px;
        font-size: 0.62rem;
    }

    #deliverables .deliverable-title {
        font-size: 0.59rem;
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    #deliverables .deliverable-desc {
        display: none;
    }

    #audience .audience-tabs {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 7px !important;
    }

    #audience .audience-card {
        padding: 9px 10px;
    }

    #audience .audience-title {
        margin-bottom: 6px;
        font-size: 0.78rem;
        line-height: 1.12;
    }

    #audience .audience-bullets {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        margin: 0;
    }

    #audience .audience-bullet-item {
        display: -webkit-box;
        margin: 0;
        padding-left: 0;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        font-size: 0.62rem !important;
        line-height: 1.25 !important;
    }

    #audience .audience-bullet-item::before {
        display: none;
    }

    #faq .faq-question {
        padding: 12px;
        font-size: 0.78rem;
        line-height: 1.25;
    }

    #faq .faq-answer-inner {
        padding: 12px;
        font-size: 0.72rem !important;
        line-height: 1.4 !important;
    }

    #contact .contact-form-grid {
        gap: 0 !important;
    }

    #contact .contact-form-card {
        padding: 10px;
    }

    #contact .contact-inputs-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        margin-bottom: 7px;
    }

    #contact .contact-input-container {
        margin-bottom: 7px !important;
        padding: 7px 9px;
        gap: 2px;
    }

    #contact .contact-input-container textarea {
        height: 62px;
    }

    #contact .submit-btn {
        min-height: 46px;
        height: auto;
        padding: 9px !important;
        font-size: 0.72rem;
        line-height: 1.2;
    }

    #contact .contact-project-note {
        display: block !important;
        margin-top: 7px;
        padding: 8px 10px !important;
        border: 1px solid rgba(255, 252, 225, 0.11);
        border-radius: 8px;
        background: rgba(25, 25, 25, 0.72);
    }

    #contact .contact-project-note h3 {
        margin: 0 !important;
        font-size: 0.72rem !important;
        line-height: 1.2 !important;
    }

    #contact .contact-project-note > div:first-child p,
    #contact .contact-project-note .policy-callout {
        display: none;
    }

    .about-card,
    .vetting-item,
    .lifecycle-step,
    .deliverable-mini-card,
    .audience-card,
    .contact-project-note {
        cursor: pointer;
    }

    .about-card.mobile-expanded,
    .vetting-item.mobile-expanded,
    .lifecycle-step.mobile-expanded,
    .deliverable-mini-card.mobile-expanded,
    .audience-card.mobile-expanded,
    .contact-project-note.mobile-expanded {
        border-color: rgba(255, 252, 225, 0.38);
    }

    #about .about-card.mobile-expanded .about-card-desc,
    #lifecycle .lifecycle-step.mobile-expanded .step-desc,
    #audience .audience-card.mobile-expanded .audience-bullet-item {
        display: block;
        overflow: visible;
        -webkit-line-clamp: unset;
    }

    #solutions .vetting-item.mobile-expanded {
        grid-column: 1 / -1;
    }

    #solutions .vetting-item.mobile-expanded p {
        display: block;
        margin-top: 5px;
        font-size: 0.68rem !important;
        line-height: 1.35 !important;
    }

    #deliverables .deliverables-phase-col:has(.deliverable-mini-card.mobile-expanded) {
        grid-column: 1 / -1;
    }

    #deliverables .deliverable-mini-card.mobile-expanded .deliverable-desc {
        display: block;
        margin-top: 4px;
        font-size: 0.68rem !important;
        line-height: 1.35 !important;
    }

    #contact .contact-project-note.mobile-expanded > div:first-child p,
    #contact .contact-project-note.mobile-expanded .policy-callout {
        display: block;
    }

    #contact .contact-project-note.mobile-expanded > div:first-child p {
        margin-top: 7px !important;
        font-size: 0.68rem !important;
        line-height: 1.35 !important;
    }

    #contact .contact-project-note.mobile-expanded .policy-callout {
        margin-top: 8px !important;
        padding: 10px;
    }
}

@media (max-width: 360px) {
    .consent-gate {
        padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
    }

    .consent-card {
        padding: 22px 18px;
    }

    .consent-kicker {
        margin-top: 20px;
    }

    .consent-option {
        padding: 11px;
        font-size: 0.75rem;
    }

    .nav-header,
    .nav-header.scrolled {
        padding-left: 12px;
        padding-right: 12px;
    }

    .nav-brand {
        font-size: 0.94rem;
        letter-spacing: 1.4px;
    }

    .btn-nav-login,
    .btn-nav-register {
        font-size: 0.68rem;
    }

    .landing-hero-section {
        padding-left: 18px;
        padding-right: 18px;
    }

    .lifecycle-timeline {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #lifecycle .lifecycle-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #contact .contact-inputs-row {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .pwa-install-sheet {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 14px;
        padding: 20px;
    }

    .pwa-install-icon {
        width: 64px;
        height: 64px;
        border-radius: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    .motion-letter,
    .section-leaving .motion-letter,
    .motion-letter::after {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .login-dropdown-menu.login-drawer-panel,
    .login-drawer-backdrop,
    .pwa-install-button,
    .nav-limelight {
        transition-duration: 0.01ms !important;
    }
}
.legal-action { display:inline-block; margin-top:26px; padding:12px 18px; border:1px solid #d4af37; }

/* Release A: public access, explicit form consent, keyboard-first controls */
.skip-link {
    position: fixed;
    top: max(10px, env(safe-area-inset-top));
    left: max(10px, env(safe-area-inset-left));
    z-index: 2147483647;
    padding: 11px 15px;
    border-radius: 8px;
    background: #fffce1;
    color: #090b0d;
    font: 700 0.82rem/1 var(--font-sans);
    transform: translateY(-160%);
    transition: transform 0.18s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

.consent-gate {
    inset: auto max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) auto;
    display: block;
    width: min(560px, calc(100vw - 32px));
    padding: 0;
    overflow: visible;
    background: transparent;
    pointer-events: none;
}

.consent-card {
    width: 100%;
    max-height: none;
    padding: clamp(18px, 3vw, 26px);
    overflow: visible;
    border-radius: 14px;
    background: rgba(12, 15, 18, 0.96);
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.58);
    pointer-events: auto;
}

.consent-kicker {
    margin-top: 16px;
}

.consent-card h2 {
    margin-top: 8px;
    font: 700 clamp(1.25rem, 3vw, 1.8rem)/1.08 var(--font-display);
    letter-spacing: -0.025em;
}

.consent-description {
    margin-top: 10px;
    font-size: 0.84rem;
    line-height: 1.45;
}

.consent-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 14px;
}

.consent-links a {
    color: #e4c777;
    font: 600 0.75rem/1.35 var(--font-sans);
    text-underline-offset: 3px;
}

.consent-accept {
    width: auto;
    min-width: 132px;
    min-height: 44px;
    margin-top: 16px;
    padding: 0 22px;
}

.form-consent-check {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    margin-top: 14px;
    color: rgba(255, 255, 255, 0.68);
    font: 500 0.76rem/1.45 var(--font-sans);
}

.form-consent-check input {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--color-gold-light);
}

.form-consent-check a {
    color: #d8bd67;
    text-underline-offset: 3px;
}

.register-drawer-panel .form-consent-check {
    color: rgba(14, 16, 15, 0.58);
}

.register-drawer-panel .form-consent-check a {
    color: #734c22;
    font-weight: 700;
}

.form-consent-check-dark {
    color: rgba(255, 255, 255, 0.66);
}

.secure-upload-note {
    display: grid;
    gap: 5px;
    margin: 4px 0 18px;
    padding: 14px 16px;
    border: 1px solid rgba(216, 189, 103, 0.28);
    border-radius: 10px;
    background: rgba(216, 189, 103, 0.06);
    color: rgba(255, 255, 255, 0.72);
    font: 500 0.78rem/1.45 var(--font-sans);
}

.secure-upload-note strong {
    color: #e5ce86;
    font-weight: 700;
}

.faq-question {
    width: 100%;
    border: 0;
    background: transparent;
    font-family: inherit;
    color: inherit;
    text-align: left;
}

.faq-question:focus-visible,
.consent-accept:focus-visible,
.form-consent-check input:focus-visible {
    outline: 2px solid #fffce1;
    outline-offset: 3px;
}

@media (max-width: 600px) {
    .consent-gate {
        right: max(10px, env(safe-area-inset-right));
        bottom: max(10px, env(safe-area-inset-bottom));
        left: max(10px, env(safe-area-inset-left));
        width: auto;
    }

    .consent-card {
        padding: 17px;
    }

    .consent-brand {
        font-size: 0.92rem;
    }

    .consent-kicker {
        margin-top: 10px;
    }

    .consent-card h2 {
        font-size: 1.15rem;
    }

    .consent-description {
        font-size: 0.76rem;
    }

    .consent-accept {
        width: 100%;
    }
}

/* Dedicated access request page */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

body.access-page {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    background:
        radial-gradient(circle at 12% 10%, rgba(169, 125, 58, 0.18), transparent 34%),
        radial-gradient(circle at 90% 90%, rgba(69, 91, 112, 0.14), transparent 36%),
        #070709;
    color: var(--color-motion-cream);
    font-family: var(--font-sans);
}

body.access-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: 0.22;
    background-image:
        linear-gradient(rgba(255, 252, 225, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 252, 225, 0.045) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, #000, transparent 76%);
}

.access-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 86px;
    padding:
        max(18px, env(safe-area-inset-top))
        max(34px, env(safe-area-inset-right))
        18px
        max(34px, env(safe-area-inset-left));
    border-bottom: 1px solid rgba(255, 252, 225, 0.09);
}

.access-brand {
    color: var(--color-motion-cream);
    font: 800 1.08rem/1 var(--font-display);
    letter-spacing: 0.19em;
    text-decoration: none;
}

.access-brand span {
    color: var(--color-text-gold);
}

.access-back {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    border: 1px solid rgba(255, 252, 225, 0.15);
    border-radius: 999px;
    color: rgba(255, 252, 225, 0.72);
    font: 600 0.76rem/1 var(--font-sans);
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.access-back:hover {
    border-color: rgba(212, 178, 111, 0.5);
    background: rgba(212, 178, 111, 0.06);
    color: var(--color-motion-cream);
}

.access-main {
    width: min(1440px, calc(100% - 48px));
    min-height: calc(100dvh - 170px);
    margin: 0 auto;
    padding: clamp(42px, 7vw, 96px) 0;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(520px, 1.05fr);
    gap: clamp(80px, 8vw, 128px);
    align-items: start;
}

.access-intro {
    position: sticky;
    top: 42px;
    min-width: 0;
    padding-top: clamp(10px, 3vw, 42px);
}

.access-kicker,
.access-card-kicker {
    color: var(--color-text-gold);
    font: 700 0.69rem/1.25 var(--font-sans);
    letter-spacing: 0.17em;
}

.access-intro h1 {
    max-width: 760px;
    margin-top: 18px;
    color: var(--color-motion-cream);
    font: 700 clamp(3.2rem, 4.6vw, 5.5rem)/0.9 var(--font-display);
    letter-spacing: -0.065em;
}

.access-lead {
    max-width: 620px;
    margin-top: 28px;
    color: rgba(255, 252, 225, 0.64);
    font: 500 clamp(0.96rem, 1.25vw, 1.14rem)/1.62 var(--font-sans);
}

.access-roadmap {
    display: grid;
    gap: 0;
    max-width: 610px;
    margin-top: 42px;
    list-style: none;
    counter-reset: none;
}

.access-roadmap li {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    min-height: 78px;
    border-top: 1px solid rgba(255, 252, 225, 0.11);
}

.access-roadmap li:last-child {
    border-bottom: 1px solid rgba(255, 252, 225, 0.11);
}

.access-roadmap li > span {
    color: var(--color-text-gold);
    font: 700 0.72rem/1 var(--font-display);
    letter-spacing: 0.1em;
}

.access-roadmap div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: baseline;
}

.access-roadmap strong {
    color: rgba(255, 252, 225, 0.9);
    font: 650 0.92rem/1.35 var(--font-sans);
}

.access-roadmap small {
    color: rgba(255, 252, 225, 0.42);
    font: 500 0.72rem/1.35 var(--font-sans);
    text-align: right;
}

.access-security-note {
    max-width: 610px;
    margin-top: 24px;
    padding: 18px 20px;
    border-left: 2px solid var(--color-gold-primary);
    background: rgba(169, 125, 58, 0.07);
}

.access-security-note strong {
    color: var(--color-text-gold);
    font: 700 0.76rem/1.2 var(--font-sans);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.access-security-note p {
    margin-top: 6px;
    color: rgba(255, 252, 225, 0.52);
    font: 500 0.78rem/1.5 var(--font-sans);
}

.access-card {
    position: relative;
    overflow: hidden;
    scroll-margin-top: 18px;
    border: 1px solid rgba(255, 252, 225, 0.14);
    border-radius: 22px;
    background: rgba(15, 16, 18, 0.94);
    box-shadow: 0 42px 110px rgba(0, 0, 0, 0.46);
}

.access-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(228, 199, 119, 0.7), transparent);
}

.access-progress {
    padding: 24px clamp(24px, 4vw, 48px) 20px;
    border-bottom: 1px solid rgba(255, 252, 225, 0.09);
}

.access-progress-copy {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: rgba(255, 252, 225, 0.42);
    font: 600 0.68rem/1.3 var(--font-sans);
}

.access-progress-copy strong {
    color: rgba(255, 252, 225, 0.76);
    font-weight: 650;
}

.access-progress-track {
    height: 2px;
    margin-top: 13px;
    overflow: hidden;
    background: rgba(255, 252, 225, 0.1);
}

.access-progress-track span {
    display: block;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, var(--color-gold-dark), #e4c777);
    transition: width 0.35s ease;
}

.access-step,
.access-success {
    margin: 0;
    padding: clamp(30px, 5vw, 58px);
    border: 0;
}

.access-step[hidden],
.access-success[hidden] {
    display: none !important;
}

.access-step h2,
.access-success h2 {
    max-width: 760px;
    margin-top: 11px;
    color: var(--color-motion-cream);
    font: 700 clamp(1.9rem, 3.7vw, 3.2rem)/0.98 var(--font-display);
    letter-spacing: -0.045em;
}

.access-card-copy {
    max-width: 670px;
    margin-top: 17px;
    color: rgba(255, 252, 225, 0.57);
    font: 500 0.9rem/1.6 var(--font-sans);
}

.access-data-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 28px;
}

.access-data-summary div {
    min-height: 128px;
    padding: 18px;
    border: 1px solid rgba(255, 252, 225, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.018);
}

.access-data-summary span {
    color: var(--color-text-gold);
    font: 700 0.68rem/1.2 var(--font-sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.access-data-summary p {
    margin-top: 9px;
    color: rgba(255, 252, 225, 0.58);
    font: 500 0.78rem/1.48 var(--font-sans);
}

.access-consent-option {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 13px;
    align-items: start;
    margin-top: 12px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 252, 225, 0.11);
    border-radius: 12px;
    color: rgba(255, 252, 225, 0.7);
    background: rgba(255, 255, 255, 0.018);
    font: 500 0.8rem/1.52 var(--font-sans);
    cursor: pointer;
}

.access-data-summary + .access-consent-option {
    margin-top: 26px;
}

.access-consent-option:has(input:checked) {
    border-color: rgba(212, 178, 111, 0.42);
    background: rgba(212, 178, 111, 0.055);
}

.access-consent-option input {
    width: 20px;
    height: 20px;
    margin-top: 1px;
    accent-color: var(--color-gold-light);
}

.access-consent-option a,
.access-legal-links a {
    color: #e4c777;
    text-underline-offset: 3px;
}

.access-legal-links {
    margin-top: 17px;
    color: rgba(255, 252, 225, 0.4);
    font: 500 0.7rem/1.5 var(--font-sans);
}

.access-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
    margin-top: 30px;
}

.access-field {
    display: grid;
    gap: 8px;
}

.access-field-wide {
    grid-column: 1 / -1;
}

.access-field label {
    color: rgba(255, 252, 225, 0.67);
    font: 650 0.72rem/1.25 var(--font-sans);
}

.access-field label span {
    color: var(--color-text-gold);
}

.access-field label small {
    color: rgba(255, 252, 225, 0.35);
    font-weight: 500;
}

.access-field input,
.access-field select,
.access-field textarea {
    width: 100%;
    min-height: 52px;
    padding: 13px 15px;
    border: 1px solid rgba(255, 252, 225, 0.13);
    border-radius: 10px;
    outline: none;
    background: rgba(255, 255, 255, 0.025);
    color: var(--color-motion-cream);
    font: 500 0.86rem/1.4 var(--font-sans);
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

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

.access-field select {
    color-scheme: dark;
    cursor: pointer;
}

.access-field select option {
    background: #111214;
    color: #fffce1;
}

.access-field select:invalid {
    color: rgba(255, 252, 225, 0.42);
}

.access-field input::placeholder,
.access-field textarea::placeholder {
    color: rgba(255, 252, 225, 0.26);
}

.access-field input:focus,
.access-field select:focus,
.access-field textarea:focus {
    border-color: rgba(212, 178, 111, 0.62);
    background: rgba(212, 178, 111, 0.035);
    box-shadow: 0 0 0 3px rgba(169, 125, 58, 0.12);
}

.access-status {
    min-height: 1.4em;
    margin-top: 15px;
    color: rgba(255, 252, 225, 0.55);
    font: 600 0.76rem/1.45 var(--font-sans);
}

.access-status.is-error {
    color: #e9b9ad;
}

.access-status.is-success {
    color: #e4c777;
}

.access-actions {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-top: 6px;
}

.access-primary,
.access-secondary {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 22px;
    border-radius: 9px;
    font: 750 0.76rem/1 var(--font-sans);
    letter-spacing: 0.05em;
    cursor: pointer;
}

.access-primary {
    width: 100%;
    margin-top: 5px;
    border: 0;
    background: linear-gradient(90deg, #a97d3a, #e4c777);
    color: #0e100f;
}

.access-primary:hover {
    filter: brightness(1.06);
}

.access-primary:disabled {
    opacity: 0.55;
    cursor: wait;
}

.access-actions .access-primary {
    width: auto;
    flex: 1;
}

.access-secondary {
    border: 1px solid rgba(255, 252, 225, 0.15);
    background: transparent;
    color: rgba(255, 252, 225, 0.66);
}

.access-success {
    min-height: 620px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.access-success-mark {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin-bottom: 24px;
    border: 1px solid rgba(212, 178, 111, 0.45);
    border-radius: 50%;
    color: var(--color-text-gold);
    font-size: 1.3rem;
}

.access-success > p:not(.access-card-kicker) {
    margin-top: 18px;
    color: rgba(255, 252, 225, 0.57);
    font: 500 0.9rem/1.58 var(--font-sans);
}

.access-request-id {
    display: grid;
    gap: 7px;
    margin-top: 28px;
    padding: 17px 19px;
    border: 1px solid rgba(212, 178, 111, 0.25);
    border-radius: 10px;
    background: rgba(212, 178, 111, 0.05);
}

.access-request-id span {
    color: rgba(255, 252, 225, 0.4);
    font: 600 0.65rem/1.2 var(--font-sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.access-request-id strong {
    overflow-wrap: anywhere;
    color: var(--color-text-gold);
    font: 700 0.83rem/1.3 var(--font-sans);
}

.access-success ol {
    display: grid;
    gap: 11px;
    margin: 25px 0 0 20px;
    color: rgba(255, 252, 225, 0.62);
    font: 500 0.8rem/1.48 var(--font-sans);
}

.access-home-link {
    align-self: flex-start;
    width: auto;
    margin-top: 30px;
    text-decoration: none;
}

.access-footer {
    width: min(1440px, calc(100% - 48px));
    min-height: 84px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-top: 1px solid rgba(255, 252, 225, 0.09);
    color: rgba(255, 252, 225, 0.34);
    font: 600 0.66rem/1.4 var(--font-sans);
}

.access-footer nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 18px;
}

.access-footer a {
    color: inherit;
    text-decoration: none;
}

.access-footer a:hover {
    color: var(--color-text-gold);
}

.access-page a:focus-visible,
.access-page button:focus-visible,
.access-page input:focus-visible,
.access-page select:focus-visible,
.access-page textarea:focus-visible {
    outline: 2px solid #fffce1;
    outline-offset: 3px;
}

/* Keep the two-column desktop form comfortable on Full HD and laptop-height screens. */
@media (min-width: 1051px) and (max-height: 1080px) {
    .access-header {
        min-height: 72px;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .access-main {
        min-height: auto;
        padding: clamp(28px, 4vh, 44px) 0 48px;
    }

    .access-intro {
        top: 24px;
        padding-top: 0;
    }

    .access-intro h1 {
        margin-top: 12px;
        font-size: clamp(3rem, 4vw, 4.8rem);
    }

    .access-lead {
        margin-top: 18px;
        line-height: 1.48;
    }

    .access-roadmap {
        margin-top: 24px;
    }

    .access-roadmap li {
        min-height: 64px;
    }

    .access-security-note {
        margin-top: 18px;
        padding: 14px 18px;
    }

    .access-progress {
        padding: 18px clamp(28px, 3vw, 40px) 15px;
    }

    .access-step,
    .access-success {
        padding: clamp(30px, 3.5vw, 44px);
    }

    .access-step h2,
    .access-success h2 {
        font-size: clamp(1.9rem, 3vw, 2.65rem);
    }

    .access-card-copy {
        margin-top: 13px;
    }

    .access-data-summary {
        margin-top: 20px;
    }

    .access-data-summary div {
        min-height: 100px;
        padding: 15px;
    }

    .access-data-summary + .access-consent-option {
        margin-top: 18px;
    }

    .access-consent-option {
        margin-top: 10px;
        padding: 13px 15px;
    }

    .access-legal-links {
        margin-top: 13px;
    }

    .access-footer {
        min-height: 68px;
    }
}

@media (max-width: 1050px) {
    .access-main {
        grid-template-columns: minmax(0, 1fr);
        gap: 44px;
    }

    .access-intro {
        position: static;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
        gap: 22px 52px;
        align-items: end;
        padding-top: 0;
    }

    .access-intro .access-kicker,
    .access-intro h1,
    .access-intro .access-lead {
        grid-column: 1;
    }

    .access-roadmap {
        grid-column: 2;
        grid-row: 1 / span 4;
        margin-top: 0;
    }

    .access-security-note {
        grid-column: 1 / -1;
        max-width: none;
        margin-top: 8px;
    }
}

@media (max-width: 720px) {
    .access-header {
        min-height: 72px;
        padding: max(14px, env(safe-area-inset-top)) 18px 14px;
    }

    .access-back {
        min-height: 40px;
        padding: 0 13px;
        font-size: 0.68rem;
    }

    .access-main {
        width: min(100% - 28px, 680px);
        padding: 32px 0 48px;
    }

    .access-intro {
        display: block;
    }

    .access-intro h1 {
        margin-top: 13px;
        font-size: clamp(2.75rem, 15vw, 4.6rem);
    }

    .access-lead {
        margin-top: 20px;
        font-size: 0.9rem;
    }

    .access-roadmap {
        margin-top: 28px;
    }

    .access-roadmap div {
        display: grid;
        gap: 3px;
    }

    .access-roadmap small {
        text-align: left;
    }

    .access-card {
        border-radius: 16px;
    }

    .access-progress {
        padding: 20px;
    }

    .access-progress-copy {
        display: grid;
        gap: 4px;
    }

    .access-step,
    .access-success {
        padding: 28px 20px 30px;
    }

    .access-step h2,
    .access-success h2 {
        font-size: 2rem;
    }

    .access-data-summary,
    .access-field-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .access-field-wide {
        grid-column: auto;
    }

    .access-data-summary div {
        min-height: auto;
    }

    .access-actions {
        flex-direction: column-reverse;
    }

    .access-actions .access-primary,
    .access-secondary {
        width: 100%;
    }

    .access-success {
        min-height: 560px;
    }

    .access-footer {
        width: min(100% - 36px, 680px);
        padding: 20px 0 max(20px, env(safe-area-inset-bottom));
        flex-direction: column;
        align-items: flex-start;
    }

    .access-footer nav {
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .access-progress-track span,
    .access-back {
        transition: none !important;
    }
}