.section-title {
    color: var(--text-primary);
    display: block;
    margin: 0 0 var(--space-stack-md);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.section-subtitle {
    max-width: 44rem;
    margin: var(--space-stack-sm) auto 0;
    color: var(--text-secondary);
    font-size: 1.02rem;
    line-height: 1.72;
    text-align: center;
}

/* === Hero atmosphere ===
   Subtle radial primary glow + faint grid mesh anchored at the top of every
   hero across all sites. Mirrors the production technique used by Linear,
   Vercel, Resend, and Stripe to give the first viewport visual weight
   without competing with the headline or visual artwork. */
.hero-section {
    position: relative;
    isolation: isolate;
}

.hero-section::before {
    content: "";
    position: absolute;
    inset: -10% 0 auto 50%;
    width: min(1400px, 130vw);
    height: 70%;
    transform: translateX(-50%);
    background:
        radial-gradient(
            ellipse at 50% 0%,
            color-mix(in srgb, var(--primary) 18%, transparent) 0%,
            transparent 60%
        );
    pointer-events: none;
    z-index: -1;
    opacity: 0.7;
}

.hero-section::after {
    content: "";
    position: absolute;
    inset: 0 0 40% 0;
    background-image:
        linear-gradient(color-mix(in srgb, var(--text-primary) 4%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--text-primary) 4%, transparent) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse at 50% 0%, black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 0%, black 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
    opacity: 0.5;
}

/* Refined hero eyebrow — translucent primary chip with frosted background.
   Matches the modernized .ak-section-header__kicker--chip language. */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-inline-sm);
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
}

.eyebrow i {
    color: var(--primary);
}

/* === Refined hero trust strip ===
   Structured chip cluster with proper icon slots — no opacity hacks,
   no Bootstrap font-size fights. Each icon sits in its own rounded-square
   slot inside a frosted pill container. */
.hero-trust {
    border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}

.hero-trust-icons {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.5rem 0.6rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
    background: color-mix(in srgb, var(--surface) 55%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: border-color var(--transition-base);
}

.hero-trust-icons:hover {
    border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}

.hero-trust-icons i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.55rem;
    color: var(--text-secondary);
    font-size: 1.05rem;
    transition: color var(--transition-base), background var(--transition-base);
}

.hero-trust-icons i:hover {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.landing-section {
    position: relative;
    padding-block: var(--space-section-block);
}

.landing-section>.container {
    position: relative;
    z-index: 2;
}

.landing-section.bg-pattern::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--primary) 4%, transparent) 100%);
    pointer-events: none;
}

.bg-pattern::before {
    content: '';
    position: absolute;
    inset: 8% 0 auto;
    height: 70%;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: radial-gradient(circle at center, black 18%, transparent 72%);
    -webkit-mask-image: radial-gradient(circle at center, black 18%, transparent 72%);
    opacity: 0.55;
    pointer-events: none;
}

.fade-in,
.slide-up {
    opacity: 1;
    transform: none;
}

.glass-stat {
    background: var(--overlay-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-surface-padding-compact);
}

.glass-stat-label {
    display: block;
    margin-bottom: var(--space-stack-xs);
    color: var(--text-tertiary);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.glass-stat-value {
    color: var(--text-primary);
    font-size: 1.35rem;
    font-weight: 700;
}

.info-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-inline-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-full);
    background: var(--overlay-muted);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.register-section {
    background: transparent;
    color: var(--text-on-dark);
    min-height: 100vh;
    padding: var(--space-4xl) 0 var(--space-2xl);
    display: flex;
    align-items: center;
}

.register-card {
    background: var(--surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-2xl);
    padding: var(--space-2xl) var(--space-xl);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border);
    transition: all var(--transition-base);
}

.register-card:hover {
    box-shadow: var(--shadow-2xl), var(--glow-primary);
    border-color: var(--border-light);
}

.register-card p,
.register-card li {
    max-width: none;
}

.register-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--space-stack-md);
    color: var(--text-primary);
}

.register-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-stack-xl);
}

.register-section .form-label {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-stack-sm);
}

.register-section .form-control {
    background: var(--surface);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    font-size: 1rem;
    transition: all var(--transition-base);
}

.register-section .form-control:focus {
    background: var(--surface);
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--focus-ring) 45%, transparent);
    color: var(--text-primary);
    outline: none;
}

.register-section .form-control::placeholder {
    color: var(--text-muted);
    opacity: 0.8;
}

.register-section .btn-primary {
    background: var(--button-primary);
    border-color: var(--button-primary);
    padding: 0.875rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
}

.register-section .btn-primary:hover:not(:disabled) {
    background: var(--button-primary-hover);
    border-color: var(--button-primary-hover);
    box-shadow: var(--shadow-lg);
}

.register-section .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.register-section .alert-danger {
    background: color-mix(in srgb, var(--error) 10%, var(--surface));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid color-mix(in srgb, var(--error) 24%, transparent);
    color: var(--error);
    border-radius: var(--radius-md);
}

.register-section .text-danger {
    color: var(--error) !important;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.register-section .text-muted {
    color: var(--text-muted) !important;
}

.register-section .spinner-border-sm {
    width: 1rem;
    height: 1rem;
}

@media (max-width: 768px) {
    .section-subtitle {
        font-size: 1rem;
    }

    .landing-section {
        padding-block: var(--space-section-block-mobile);
    }

    .register-section {
        padding: var(--space-3xl) 0 var(--space-xl);
    }

    .register-card {
        padding: var(--space-xl) var(--space-lg);
        margin: 0 var(--space-md);
    }

    .register-title {
        font-size: 2rem;
    }
}

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

    /* Soften the hero atmosphere for users who prefer reduced motion —
       keep the glow but drop the grid mesh that adds visual noise. */
    .hero-section::after {
        display: none;
    }

    .ak-info-tile,
    .ak-feature-card,
    .ak-timeline-step,
    .ak-pricing-card,
    .ak-contact-section__card,
    .repo-card {
        transition: none !important;
    }

    .ak-info-tile:hover,
    .ak-feature-card:hover,
    .ak-timeline-step:hover,
    .ak-pricing-card:hover,
    .ak-contact-section__card:hover,
    .repo-card:hover {
        transform: none !important;
    }
}