:root {
    --primary-blue: #4A90E2;
    --secondary-green: #7ED321;
    --accent-orange: #FF9500;
    --accent-purple: #9B59B6;
    --success-green: #27AE60;
    --danger-red: #E74C3C;
    --dark-blue: #2C3E50;
    --light-gray: #F8F9FA;
    --medium-gray: #6C757D;
    --brand-gradient-main: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --brand-gradient-bg: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    --surface-white: #ffffff;
    --surface-soft: #f4f8fd;
    --border-soft: #dbe7f5;
    --text-body: #506274;
    --shadow-soft-lg: 0 14px 35px rgba(44, 62, 80, 0.1);
    --motion-ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-fast: 0.22s;
    --motion-medium: 0.3s;
    --dark-journey-base: linear-gradient(145deg, #0a1022 0%, #101a36 50%, #1a1841 100%);
    --dark-journey-soft: linear-gradient(145deg, #0b1228 0%, #101b3a 52%, #1a1841 100%);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Cairo", "Poppins", sans-serif;
    color: var(--text-body);
    background:
        radial-gradient(circle at 85% 10%, rgba(102, 126, 234, 0.14) 0, rgba(102, 126, 234, 0) 35%),
        radial-gradient(circle at 15% 20%, rgba(240, 147, 251, 0.11) 0, rgba(240, 147, 251, 0) 30%),
        var(--surface-soft);
}

a {
    text-decoration: none;
    color: inherit;
}

/* Layout utilities (subset used by views) */
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.min-h-screen { min-height: 100vh; }
.w-full { width: 100%; }
.w-8 { width: 2rem; }
.w-10 { width: 2.5rem; }
.w-12 { width: 3rem; }
.h-6 { height: 1.5rem; }
.h-8 { height: 2rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-7xl { max-width: 80rem; }
.grid { display: grid; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.hidden { display: none; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.overflow-hidden { overflow: hidden; }
.rounded-full { border-radius: 9999px; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.border { border: 1px solid; }
.border-b { border-bottom: 1px solid; }
.border-t { border-top: 1px solid; }
.bg-white { background-color: #fff; }
.bg-white\/90 { background-color: rgba(255, 255, 255, 0.9); }
.bg-white\/15 { background-color: rgba(255, 255, 255, 0.15); }
.p-2 { padding: 0.5rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.pb-5 { padding-bottom: 1.25rem; }
.pb-16 { padding-bottom: 4rem; }
.pt-14 { padding-top: 3.5rem; }
.text-center { text-align: center; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-6xl { font-size: 3.75rem; line-height: 1; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.leading-tight { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-wide { letter-spacing: 0.025em; }
.uppercase { text-transform: uppercase; }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.relative { position: relative; }
.absolute { position: absolute; }
.sticky { position: sticky; }
.top-0 { top: 0; }
.z-50 { z-index: 50; }
.cursor-pointer { cursor: pointer; }
.list-none { list-style: none; }
.transition { transition: all 0.2s ease; }
.text-white { color: #fff; }
.text-white\/90 { color: rgba(255, 255, 255, 0.9); }

/* Brand utility classes */
.bg-brand-light { background-color: var(--light-gray); }
.text-brand-dark { color: var(--dark-blue); }
.text-brand-muted { color: var(--text-body); }
.text-brand-primary { color: var(--primary-blue); }
.text-brand-secondary { color: var(--secondary-green); }
.text-brand-accent-orange { color: var(--accent-orange); }
.text-brand-accent-purple { color: var(--accent-purple); }
.text-brand-success { color: var(--success-green); }
.bg-gradient-main { background: var(--brand-gradient-main); }
.border-brand-border { border-color: color-mix(in srgb, var(--dark-blue) 16%, white); }
.bg-brand-primary\/10 { background-color: rgba(74, 144, 226, 0.1); }
.bg-brand-success\/15 { background-color: rgba(39, 174, 96, 0.15); }
.shadow-soft { box-shadow: 0 12px 28px rgba(44, 62, 80, 0.12); }

.font-display {
    font-family: "Cairo", "Poppins", sans-serif;
    letter-spacing: -0.01em;
}

.brand-logo-wrap {
    position: relative;
    display: inline-flex;
    width: 2.2rem;
    height: 2.2rem;
    align-items: center;
    justify-content: center;
}

.site-navbar {
    background: var(--brand-gradient-main);
    border-bottom-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 8px 18px rgba(50, 56, 130, 0.2);
    transition: background-color 0.26s ease, box-shadow 0.26s ease, backdrop-filter 0.26s ease, border-color 0.26s ease;
    min-height: 72px;
}

.site-navbar.is-scrolled {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.86) 0%, rgba(118, 75, 162, 0.86) 100%);
    border-bottom-color: rgba(255, 255, 255, 0.36);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 14px 28px rgba(26, 31, 83, 0.3);
}

.site-navbar-mobile {
    background: rgba(90, 102, 208, 0.95);
}

.navbar-brand-text {
    color: #fff;
}

.navbar-inner {
    min-height: 72px;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
}

.logo {
    height: 36px;
    width: 36px;
}

.logo-text {
    font-size: 18px;
    font-weight: 600;
}

.navbar-links {
    gap: 1.15rem;
}

.navbar-links .nav-link {
    padding: 0.35rem 0.52rem;
}

.site-navbar .nav-link,
.site-navbar .mobile-link {
    color: rgba(255, 255, 255, 0.92);
}

.site-navbar .nav-link {
    position: relative;
    transition: color 0.2s ease, transform 0.2s ease;
}

.site-navbar .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.35rem;
    margin: 0 auto;
    width: 0;
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    transition: width 0.22s ease;
}

.site-navbar .nav-link:hover,
.site-navbar .mobile-link:hover {
    color: #fff;
}

.site-navbar .nav-link:hover {
    transform: translateY(-1px);
}

.site-navbar .nav-link:hover::after,
.site-navbar .nav-link:focus-visible::after {
    width: 100%;
}

.navbar-toggle {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
}

.navbar-toggle:hover {
    border-color: rgba(255, 255, 255, 0.7);
}

.navbar-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    padding: 0.78rem 1.28rem;
    font-weight: 700;
    color: #202459;
    background: linear-gradient(135deg, #ffffff 0%, #eef3ff 100%);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 12px 24px rgba(31, 42, 106, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.35);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, letter-spacing 0.2s ease;
}

.navbar-cta:hover {
    transform: translateY(-2px) scale(1.01);
    filter: brightness(1.03);
    letter-spacing: 0.01em;
    box-shadow: 0 16px 28px rgba(31, 42, 106, 0.34), 0 0 0 1px rgba(255, 255, 255, 0.48), 0 0 16px rgba(154, 120, 241, 0.35);
}

.cap-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    animation: cap-bounce 1.9s ease-in-out infinite;
    transform-origin: center;
}

.brand-logo-wrap:hover .cap-badge {
    animation: cap-bounce 1.9s ease-in-out infinite, cap-spin 0.65s ease;
}

.cap-icon {
    width: 2.05rem;
    height: 2.05rem;
}

.cap-badge-solid {
    color: #ffffff;
    filter: drop-shadow(0 4px 10px rgba(16, 22, 62, 0.35));
}

.cap-icon-white {
    color: currentColor;
}

.skip-link {
    position: absolute;
    left: 0.75rem;
    top: -100%;
    z-index: 80;
    background: var(--dark-blue);
    color: #fff;
    border-radius: 999px;
    padding: 0.5rem 0.9rem;
    font-weight: 600;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0.75rem;
}

.btn-primary {
    background: var(--brand-gradient-main);
    color: #fff;
    border-radius: 12px;
    padding: 0.8rem 1.25rem;
    font-weight: 600;
    border: 1px solid rgba(63, 127, 216, 0.45);
    box-shadow: 0 10px 24px rgba(74, 144, 226, 0.28);
    transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.02);
    box-shadow: 0 14px 28px rgba(74, 144, 226, 0.34);
}

.btn-secondary {
    border: 1px solid var(--border-soft);
    color: var(--dark-blue);
    background-color: var(--surface-white);
    border-radius: 12px;
    padding: 0.8rem 1.25rem;
    font-weight: 600;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.btn-secondary:hover {
    transform: translateY(-1px);
    border-color: rgba(74, 144, 226, 0.35);
    box-shadow: 0 10px 20px rgba(44, 62, 80, 0.1);
}

.btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    padding: 0.8rem 1.5rem;
    font-weight: 700;
    color: var(--dark-blue);
    background-color: #fff;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(255, 255, 255, 0.28);
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.nav-link:focus-visible,
.mobile-link:focus-visible,
.footer-link:focus-visible,
.btn-cta:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

.card-soft {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background-color: var(--surface-white);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-soft-lg);
    transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.card-soft::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(240, 147, 251, 0.08) 100%);
    opacity: 0;
    transition: opacity 0.24s ease;
}

.card-soft:hover {
    transform: translateY(-6px);
    border-color: rgba(129, 153, 255, 0.45);
    box-shadow:
        0 18px 34px rgba(44, 62, 80, 0.16),
        0 0 0 1px rgba(118, 75, 162, 0.18);
}

.card-soft:hover::after {
    opacity: 1;
}

.feature-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background-color: var(--surface-white);
    border: 1px solid var(--border-soft);
    padding: 1.9rem;
    box-shadow: 0 8px 20px rgba(44, 62, 80, 0.07);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.feature-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(145deg, rgba(102, 126, 234, 0.1), rgba(240, 147, 251, 0.08));
    opacity: 0;
    transition: opacity 0.22s ease;
}

.feature-card:hover {
    transform: translateY(-6px);
    border-color: rgba(129, 153, 255, 0.45);
    box-shadow:
        0 18px 34px rgba(44, 62, 80, 0.16),
        0 0 0 1px rgba(118, 75, 162, 0.2);
}

.feature-card:hover::after {
    opacity: 1;
}

.faq-section .faq-container {
    max-width: 72rem;
}

.faq-head {
    margin-bottom: 2rem;
}

.faq-subtitle {
    margin: 0.7rem auto 0;
    max-width: 52rem;
    color: #6a7c93;
    line-height: 1.75;
}

.faq-item {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background:
        radial-gradient(circle at 8% 0%, rgba(123, 154, 255, 0.12) 0%, rgba(123, 154, 255, 0) 36%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.96));
    border: 1px solid rgba(170, 186, 243, 0.46);
    box-shadow: 0 10px 24px rgba(43, 62, 120, 0.07);
    transition: transform var(--motion-medium) var(--motion-ease-premium), border-color var(--motion-medium) var(--motion-ease-premium), box-shadow var(--motion-medium) var(--motion-ease-premium), background-color var(--motion-medium) var(--motion-ease-premium);
    opacity: 0;
    transform: translateY(20px);
}

.faq-item.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition-delay: var(--faq-delay, 0ms);
}

.faq-item:hover {
    transform: translateY(-2px);
    border-color: rgba(137, 160, 242, 0.62);
    background-color: rgba(247, 250, 255, 0.96);
    box-shadow: 0 16px 28px rgba(43, 62, 120, 0.11);
}

.faq-item.is-open {
    background: rgba(99, 102, 241, 0.05);
    border-color: #6366f1;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(129, 154, 245, 0.18);
}

.faq-trigger {
    width: 100%;
    border: 0;
    background: transparent;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.95rem;
    text-align: left;
    padding: 1.5rem 1.65rem;
    cursor: pointer;
}

.faq-trigger:focus {
    outline: none;
}

.faq-trigger:focus-visible {
    outline: none;
}

.faq-item:has(.faq-trigger:focus-visible) {
    border-color: #5f6df2;
    box-shadow:
        0 0 0 3px rgba(99, 102, 241, 0.18),
        0 14px 30px rgba(43, 62, 120, 0.13);
}

.faq-item.is-open:has(.faq-trigger:focus-visible) {
    box-shadow:
        0 0 0 3px rgba(99, 102, 241, 0.2),
        0 16px 34px rgba(43, 62, 120, 0.15);
}

.faq-number {
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.faq-question {
    color: #243a5a;
    line-height: 1.5;
    font-size: clamp(1.12rem, 1.5vw, 1.25rem);
    font-weight: 600;
}

.faq-toggle {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 1.15rem;
    line-height: 1;
    font-weight: 700;
    border: 1px solid rgba(130, 158, 244, 0.36);
    background: rgba(232, 239, 255, 0.8);
    color: #4a67af;
    transition: transform 0.32s ease, background-color 0.28s ease;
}

.faq-item.is-open .faq-toggle {
    transform: rotate(180deg);
    background: rgba(215, 226, 255, 0.9);
}

.faq-answer {
    overflow: hidden;
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    padding: 0 1.65rem;
    transition: grid-template-rows 0.36s ease-in-out, opacity 0.32s ease-in-out, padding 0.34s ease-in-out;
}

.faq-item.is-open .faq-answer {
    grid-template-rows: 1fr;
    opacity: 1;
    padding: 0 1.65rem 1.45rem;
}

.faq-answer-inner {
    overflow: hidden;
}

.faq-answer p {
    margin: 0;
    line-height: 1.7;
    color: #5c6f86;
    font-size: 0.98rem;
    max-width: 68ch;
}

.faq-answer strong,
.faq-bullets strong {
    color: #2f4fb4;
    font-weight: 700;
    background: rgba(104, 132, 238, 0.12);
    border-radius: 0.45rem;
    padding: 0.02rem 0.32rem;
}

.faq-answer p + p {
    margin-top: 0.65rem;
}

.faq-bullets {
    margin: 0.8rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.45rem;
}

.faq-bullets li {
    position: relative;
    padding-left: 1rem;
    color: #50657e;
    line-height: 1.7;
}

.faq-bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62rem;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: #6f8ef3;
}

.faq-cta {
    margin-top: 1.4rem;
}

.faq-cta p {
    margin: 0 0 0.7rem;
    font-weight: 600;
    color: #3a516f;
}

.nav-link,
.mobile-link,
.footer-link {
    color: var(--text-body);
    font-weight: 500;
    transition: color 0.2s ease;
}

.nav-link:hover,
.mobile-link:hover,
.footer-link:hover {
    color: var(--primary-blue);
}

.step-badge {
    display: inline-flex;
    border-radius: 999px;
    background-color: rgba(74, 144, 226, 0.12);
    color: #2f74c7;
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.section-block {
    position: relative;
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
}

.section-alt-a {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(244, 248, 253, 0.92) 100%);
}

.integrations-section::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 7rem;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(10, 16, 34, 0.82) 0%, rgba(230, 239, 255, 0) 100%);
}

.integrations-head {
    margin-left: auto;
    margin-right: auto;
}

.integrations-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
}

.integration-card {
    border-radius: 20px;
    padding: 1.55rem 1.35rem;
    background:
        radial-gradient(circle at 10% 12%, rgba(125, 151, 247, 0.16) 0%, rgba(125, 151, 247, 0) 38%),
        linear-gradient(150deg, rgba(255, 255, 255, 0.97), rgba(245, 249, 255, 0.96));
    border: 1px solid rgba(170, 186, 243, 0.48);
    box-shadow: 0 12px 24px rgba(43, 62, 120, 0.08);
    transition: transform var(--motion-fast) var(--motion-ease-premium), box-shadow var(--motion-fast) var(--motion-ease-premium), border-color var(--motion-fast) var(--motion-ease-premium);
}

.integration-card:hover {
    transform: translateY(-5px) scale(1.01);
    border-color: rgba(137, 160, 242, 0.66);
    box-shadow: 0 18px 28px rgba(43, 62, 120, 0.13);
}

.integration-icon {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 0.65rem;
    background: rgba(87, 123, 240, 0.14);
    border: 1px solid rgba(132, 161, 246, 0.36);
}

.integration-visual {
    margin: 0.3rem 0 0.85rem;
    height: 3.5rem;
    border-radius: 12px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
    padding: 0.5rem;
    border: 1px solid rgba(153, 176, 245, 0.36);
    background: linear-gradient(160deg, rgba(235, 242, 255, 0.92), rgba(224, 234, 255, 0.84));
}

.integration-visual span {
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(118, 145, 240, 0.88), rgba(103, 127, 230, 0.68));
}

.visual-admissions span:nth-child(1) { height: 100%; align-self: end; }
.visual-admissions span:nth-child(2) { height: 74%; align-self: end; }
.visual-admissions span:nth-child(3) { height: 58%; align-self: end; }
.visual-hiring span:nth-child(1) { height: 40%; align-self: center; }
.visual-hiring span:nth-child(2) { height: 100%; align-self: center; }
.visual-hiring span:nth-child(3) { height: 66%; align-self: center; }
.visual-learning span:nth-child(1) { height: 60%; align-self: end; }
.visual-learning span:nth-child(2) { height: 60%; align-self: center; }
.visual-learning span:nth-child(3) { height: 60%; align-self: start; }

.integration-card-admissions {
    border-color: rgba(126, 157, 245, 0.55);
}

.integration-card-hiring {
    border-color: rgba(155, 124, 238, 0.62);
}

.integration-card-learning {
    border-color: rgba(84, 171, 147, 0.52);
}

.integration-card-learning .integration-icon {
    background: rgba(76, 171, 144, 0.12);
    border-color: rgba(76, 171, 144, 0.35);
}

.integration-card-hiring.is-featured {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 24px 34px rgba(84, 66, 155, 0.18);
    border-width: 2px;
}

.integration-card-hiring.is-featured:hover {
    transform: translateY(-9px) scale(1.024);
}

.integration-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    border-radius: 999px;
    padding: 0.28rem 0.62rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: #5f3ea8;
    border: 1px solid rgba(155, 124, 238, 0.48);
    background: rgba(238, 229, 255, 0.92);
}

.integration-card h3 {
    margin: 0 0 0.72rem;
    color: #21334d;
    font-size: 1.2rem;
    line-height: 1.35;
}

.integration-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.45rem;
}

.integration-card li {
    position: relative;
    padding-left: 1rem;
    color: #546982;
    line-height: 1.65;
}

.integration-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62rem;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: #6f8ef3;
}

.integration-logos {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.integration-logo {
    width: 1.9rem;
    height: 1.9rem;
    --logo-offset-y: 0px;
    object-fit: contain;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(144, 169, 241, 0.34);
    padding: 0.24rem;
    filter: grayscale(1) saturate(0.75);
    opacity: 0.86;
    transform: translateY(var(--logo-offset-y));
    transition: filter var(--motion-fast) var(--motion-ease-premium), opacity var(--motion-fast) var(--motion-ease-premium), transform var(--motion-fast) var(--motion-ease-premium);
}

.integration-logo-linkedin {
    width: 1.82rem;
    height: 1.82rem;
    --logo-offset-y: 0.5px;
}

.integration-logo-wuzzuf {
    width: 2rem;
    height: 2rem;
    --logo-offset-y: 1px;
}

.integration-logo-whatsapp {
    width: 1.86rem;
    height: 1.86rem;
    --logo-offset-y: 0.5px;
}

.integration-logo-mcgraw {
    width: 2.08rem;
    height: 2.08rem;
    --logo-offset-y: 1.2px;
}

.integration-logo-hmh {
    width: 1.96rem;
    height: 1.96rem;
    --logo-offset-y: 0.8px;
}

.integration-card:hover .integration-logo {
    filter: grayscale(0);
    opacity: 1;
    transform: translateY(calc(var(--logo-offset-y, 0px) - 1px));
}

.section-alt-b {
    background:
        radial-gradient(circle at 10% 15%, rgba(102, 126, 234, 0.1) 0%, rgba(102, 126, 234, 0) 30%),
        radial-gradient(circle at 88% 85%, rgba(240, 147, 251, 0.09) 0%, rgba(240, 147, 251, 0) 32%),
        #ffffff;
}

.dynamic-features {
    position: relative;
}

.dynamic-features-title {
    line-height: 1.2;
}

.dynamic-word-wrap {
    display: inline-flex;
    min-width: 15.5rem;
    margin-left: 0.35rem;
    position: relative;
    vertical-align: baseline;
}

.dynamic-word {
    color: #3e67e6;
    text-shadow: 0 6px 22px rgba(85, 117, 255, 0.24);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.dynamic-word.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.dynamic-feature-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.dynamic-feature-grid.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.dynamic-feature-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1.1rem;
}

.dynamic-feature-tab {
    border: 1px solid rgba(142, 164, 242, 0.35);
    background: rgba(245, 249, 255, 0.9);
    color: #3f5679;
    border-radius: 999px;
    padding: 0.42rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.dynamic-feature-tab:hover {
    transform: translateY(-1px);
    border-color: rgba(116, 146, 241, 0.48);
    color: #334b77;
}

.dynamic-feature-tab.is-active {
    background: linear-gradient(135deg, rgba(79, 120, 239, 0.16), rgba(143, 104, 233, 0.12));
    color: #24427a;
    border-color: rgba(109, 139, 235, 0.62);
    box-shadow: 0 8px 18px rgba(88, 118, 220, 0.18);
}

.dynamic-feature-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: 1.75rem 1.55rem;
    background:
        radial-gradient(circle at 14% 12%, rgba(119, 145, 255, 0.2) 0%, rgba(119, 145, 255, 0) 46%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 255, 0.98));
    border: 1px solid rgba(156, 176, 245, 0.42);
    box-shadow:
        0 18px 34px rgba(44, 62, 80, 0.14),
        0 0 0 1px rgba(255, 255, 255, 0.58) inset;
    transition: transform var(--motion-fast) var(--motion-ease-premium), box-shadow var(--motion-fast) var(--motion-ease-premium), border-color var(--motion-fast) var(--motion-ease-premium), filter var(--motion-fast) var(--motion-ease-premium);
}

.dynamic-feature-card:hover {
    transform: translateY(-6px) scale(1.012);
    filter: brightness(1.01);
    border-color: rgba(127, 153, 246, 0.62);
    box-shadow:
        0 24px 42px rgba(43, 62, 152, 0.2),
        0 0 26px rgba(121, 147, 255, 0.22),
        0 0 0 1px rgba(146, 168, 255, 0.24);
}

.dynamic-feature-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.dynamic-feature-icon {
    width: 2.3rem;
    height: 2.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(77, 117, 239, 0.14);
    margin-bottom: 0.7rem;
    font-size: 1.28rem;
}

.dynamic-feature-badge {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #3b5992;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(136, 161, 241, 0.45);
    background: rgba(227, 236, 255, 0.62);
}

.dynamic-feature-visual {
    min-height: 3.05rem;
    border-radius: 10px;
    margin-bottom: 0.9rem;
    border: 1px solid rgba(153, 176, 245, 0.36);
    background: linear-gradient(160deg, rgba(235, 242, 255, 0.92), rgba(224, 234, 255, 0.84));
    padding: 0.42rem 0.5rem 0.5rem;
}

.dynamic-feature-card:hover .dynamic-feature-visual {
    border-color: rgba(129, 156, 245, 0.5);
    box-shadow: inset 0 0 0 1px rgba(178, 197, 255, 0.3);
}

.visual-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.3rem;
    font-size: 0.62rem;
    color: #4d6594;
}

.visual-meta strong {
    font-size: 0.65rem;
    color: #2f4f8c;
}

.dynamic-feature-visual.bars {
    display: grid;
}

.visual-bars-row {
    display: flex;
    align-items: end;
    gap: 0.28rem;
    height: 1.45rem;
}

.visual-bars-row .bar {
    flex: 1;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(180deg, #7fa6ff 0%, #6d88f4 100%);
    transition: transform 0.28s ease, filter 0.28s ease;
}

.dynamic-feature-card:hover .visual-bars-row .bar {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.dynamic-feature-visual.dots {
    display: grid;
}

.visual-dots-row {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 0.24rem 0.22rem;
}

.visual-dots-row .dot {
    width: 0.56rem;
    height: 0.56rem;
    border-radius: 999px;
    background: #6c8ef8;
    box-shadow: 0 0 10px rgba(108, 142, 248, 0.45);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.visual-dots-row .d2 {
    background: #8d6de9;
}

.visual-dots-row .d3 {
    background: #58b9ff;
}

.visual-dots-row small {
    font-size: 0.58rem;
    color: #587099;
}

.dynamic-feature-card:hover .visual-dots-row .dot {
    transform: scale(1.12);
    box-shadow: 0 0 14px rgba(108, 142, 248, 0.58);
}

.dynamic-feature-visual.progress {
    display: grid;
    gap: 0.35rem;
}

.dynamic-feature-visual.progress .line {
    height: 0.42rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #7b9eff 0%, #8f6ce8 100%);
}

.dynamic-feature-visual.progress .line.alt {
    opacity: 0.75;
}

.dynamic-feature-card:hover .dynamic-feature-visual.progress .line {
    filter: brightness(1.08);
}

.dynamic-feature-visual.gauge .gauge-track {
    height: 0.48rem;
    border-radius: 999px;
    background: rgba(145, 166, 236, 0.3);
    overflow: hidden;
}

.dynamic-feature-visual.gauge .gauge-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7b9eff 0%, #8f6ce8 100%);
}

.dynamic-feature-visual.sparkline .sparkline-row {
    height: 1.5rem;
    display: flex;
    gap: 0.2rem;
    align-items: end;
}

.dynamic-feature-visual.sparkline .sparkline-row span {
    flex: 1;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(180deg, #8db1ff 0%, #6f8ef4 100%);
}

.dynamic-feature-visual.pipeline .pipeline-row {
    display: flex;
    align-items: center;
    gap: 0.22rem;
}

.dynamic-feature-visual.pipeline .pipeline-row span {
    font-size: 0.55rem;
    color: #4f6791;
    padding: 0.18rem 0.24rem;
    border-radius: 0.3rem;
    background: rgba(198, 214, 255, 0.4);
}

.dynamic-feature-visual.pipeline .pipeline-row i {
    width: 0.45rem;
    height: 2px;
    background: rgba(116, 142, 222, 0.62);
}

.dynamic-feature-visual.timer .timer-row {
    display: flex;
    align-items: center;
    gap: 0.32rem;
}

.dynamic-feature-visual.timer .timer-row .before,
.dynamic-feature-visual.timer .timer-row .after {
    font-size: 0.65rem;
    font-weight: 700;
    color: #38588f;
    padding: 0.18rem 0.34rem;
    border-radius: 0.3rem;
    background: rgba(203, 218, 255, 0.42);
}

.dynamic-feature-visual.timer .timer-row small {
    font-size: 0.54rem;
    color: #61779f;
}

.dynamic-feature-visual.calendar .calendar-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.2rem;
}

.dynamic-feature-visual.calendar .calendar-grid span {
    font-size: 0.53rem;
    text-align: center;
    color: #4d6793;
    background: rgba(196, 213, 255, 0.4);
    border-radius: 0.28rem;
    padding: 0.16rem 0.12rem;
}

.dynamic-feature-visual.attendance .attendance-row {
    display: grid;
    grid-template-columns: 0.65rem 1fr;
    align-items: center;
    gap: 0.28rem;
    margin-top: 0.12rem;
}

.dynamic-feature-visual.attendance .attendance-row small {
    font-size: 0.52rem;
    color: #5d739d;
}

.dynamic-feature-visual.attendance .attendance-row span {
    height: 0.32rem;
    border-radius: 999px;
    display: block;
    background: linear-gradient(90deg, #64b5ff 0%, #5f9df7 100%);
}

.dynamic-feature-visual.attendance .attendance-row span.warn {
    background: linear-gradient(90deg, #f0b06a 0%, #ef9761 100%);
}

.dynamic-feature-visual.attendance .attendance-row span.late {
    background: linear-gradient(90deg, #bb9cff 0%, #9e82ef 100%);
}

.dynamic-feature-visual.kpi .kpi-box {
    margin-top: 0.08rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #2f4f8c;
    border-radius: 0.42rem;
    border: 1px solid rgba(142, 164, 240, 0.45);
    background: rgba(203, 218, 255, 0.42);
    text-align: center;
    padding: 0.28rem 0.4rem;
}

.dynamic-feature-visual.messages,
.dynamic-feature-visual.portal,
.dynamic-feature-visual.notification {
    display: grid;
    gap: 0.3rem;
}

.message-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.32rem;
}

.message-row .chip {
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 999px;
    padding: 0.16rem 0.36rem;
}

.message-row .chip.sms {
    color: #3659a1;
    background: rgba(126, 157, 248, 0.24);
}

.message-row .chip.wa {
    color: #1e7a58;
    background: rgba(88, 214, 156, 0.22);
}

.message-row small {
    font-size: 0.58rem;
    color: #587099;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.portal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.26rem;
}

.portal-grid span {
    font-size: 0.55rem;
    text-align: center;
    padding: 0.22rem 0.18rem;
    border-radius: 0.36rem;
    color: #45628f;
    background: rgba(198, 215, 255, 0.36);
    border: 1px solid rgba(153, 176, 245, 0.35);
}

.notify-row {
    display: grid;
    grid-template-columns: 3rem 1fr;
    align-items: center;
    gap: 0.32rem;
}

.notify-row small {
    font-size: 0.56rem;
    color: #5a7096;
}

.notify-row .line {
    height: 0.38rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #7b9eff 0%, #8f6ce8 100%);
}

.notify-row .line.alt {
    opacity: 0.78;
}

.dynamic-feature-card:hover .message-row,
.dynamic-feature-card:hover .portal-grid span,
.dynamic-feature-card:hover .notify-row .line {
    filter: brightness(1.06);
}

.dynamic-feature-card:hover .gauge-fill,
.dynamic-feature-card:hover .sparkline-row span,
.dynamic-feature-card:hover .pipeline-row span,
.dynamic-feature-card:hover .timer-row .after,
.dynamic-feature-card:hover .calendar-grid span,
.dynamic-feature-card:hover .attendance-row span,
.dynamic-feature-card:hover .kpi-box {
    filter: brightness(1.08);
}

.dynamic-feature-card h3 {
    margin: 0 0 0.45rem;
    color: #21334d;
    font-size: 1.15rem;
    line-height: 1.4;
}

.dynamic-feature-card p {
    margin: 0;
    color: #5a6d81;
    line-height: 1.75;
    font-size: 0.96rem;
}

.section-alt-c {
    background: linear-gradient(180deg, rgba(244, 248, 253, 0.95) 0%, rgba(255, 255, 255, 0.96) 100%);
}

.product-showcase-section {
    background:
        radial-gradient(circle at 15% 20%, rgba(103, 132, 246, 0.18) 0%, rgba(103, 132, 246, 0) 38%),
        radial-gradient(circle at 82% 18%, rgba(129, 88, 204, 0.2) 0%, rgba(129, 88, 204, 0) 36%),
        var(--dark-journey-base);
    border-top: 0;
    border-bottom: 0;
}

.showcase-dark::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 7rem;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(11, 17, 39, 0.72) 0%, rgba(11, 17, 39, 0) 100%);
}

.showcase-dark::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 8rem;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(11, 17, 39, 0) 0%, rgba(10, 16, 34, 0.62) 56%, rgba(225, 236, 255, 0.14) 100%);
}

.showcase-dark .text-brand-primary {
    color: #8fb0ff;
}

.showcase-dark .text-brand-dark {
    color: #edf3ff;
}

.showcase-dark .text-brand-muted {
    color: rgba(224, 233, 255, 0.9);
}

.product-showcase-track {
    display: flex;
    gap: 1rem;
    padding-bottom: 0.35rem;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.product-showcase-viewport {
    overflow: hidden;
    border-radius: 26px;
    cursor: default;
    user-select: text;
    touch-action: pan-y;
    width: 100%;
    padding-inline: clamp(0.75rem, 3vw, 2.5rem);
}

.product-showcase-card {
    position: relative;
    overflow: hidden;
    scroll-snap-align: start;
    border-radius: 24px;
    border: 1px solid rgba(151, 176, 255, 0.3);
    box-shadow: 0 24px 48px rgba(45, 62, 120, 0.16);
    padding: 1.35rem;
    min-height: 24.5rem;
    min-width: min(76rem, calc(100% - 5.5rem));
    flex: 0 0 min(76rem, calc(100% - 5.5rem));
    display: grid;
    gap: 1rem;
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.product-showcase-card::before {
    content: "";
    position: absolute;
    inset: -30% auto auto -10%;
    width: 12rem;
    height: 12rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.32);
    filter: blur(18px);
    pointer-events: none;
}

.product-showcase-card:hover {
    transform: translateY(-6px);
    border-color: rgba(121, 151, 246, 0.48);
    box-shadow: 0 30px 56px rgba(45, 62, 120, 0.22), 0 0 28px rgba(130, 151, 244, 0.22);
}

.card-assessment {
    background: linear-gradient(145deg, #eef4ff 0%, #e5eeff 100%);
}

.card-classroom {
    background: linear-gradient(145deg, #f1efff 0%, #ece7ff 100%);
}

.card-analytics {
    background: linear-gradient(145deg, #a0b3ff 0%, #91a8ff 100%);
}

.card-parent {
    background: linear-gradient(145deg, #eef8f5 0%, #e7f5ef 100%);
}

.showcase-content h3 {
    margin: 0;
    color: #1f3250;
    font-size: 1.34rem;
    line-height: 1.35;
}

.showcase-nav {
    margin-top: 1rem;
    display: inline-flex;
    gap: 0.5rem;
}

.showcase-nav-center {
    justify-content: center;
}

.showcase-nav-btn {
    border: 1px solid rgba(134, 159, 235, 0.42);
    background: rgba(247, 250, 255, 0.92);
    color: #39547f;
    border-radius: 999px;
    padding: 0.45rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.showcase-nav-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(115, 145, 236, 0.62);
    box-shadow: 0 8px 16px rgba(76, 102, 190, 0.16);
}

.showcase-dots {
    margin-top: 0.9rem;
    display: flex;
    justify-content: center;
    gap: 0.42rem;
}

.showcase-dot {
    width: 0.52rem;
    height: 0.52rem;
    border-radius: 999px;
    border: 0;
    background: rgba(130, 152, 214, 0.42);
    cursor: pointer;
    transition: transform 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease;
}

.showcase-dot.is-active {
    background: #6a8ef4;
    transform: scale(1.18);
    box-shadow: 0 0 0 4px rgba(106, 142, 244, 0.16);
}

.showcase-content p {
    margin: 0.6rem 0 0;
    color: #56708f;
    line-height: 1.7;
}

.showcase-points {
    margin: 0.9rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.4rem;
}

.showcase-points li {
    font-size: 0.92rem;
    color: #35557f;
    position: relative;
    padding-left: 1rem;
}

.showcase-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.52rem;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: #628cf4;
}

.showcase-integrations {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.showcase-integrations span {
    font-size: 0.68rem;
    font-weight: 700;
    color: #466792;
    padding: 0.24rem 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(144, 166, 227, 0.46);
    background: rgba(245, 250, 255, 0.75);
}

.showcase-visual {
    margin-top: auto;
    cursor: grab;
}

.product-showcase-viewport.is-dragging .showcase-visual {
    cursor: grabbing;
}

.showcase-image-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(122, 149, 234, 0.34);
    box-shadow: 0 14px 28px rgba(43, 61, 118, 0.18);
    background: rgba(255, 255, 255, 0.42);
}

.showcase-image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.24s ease;
    border-radius: 14px;
    -webkit-user-drag: none;
    user-drag: none;
    user-select: none;
    pointer-events: none;
}

.showcase-image-frame.is-loaded .showcase-real-image {
    opacity: 1;
}

.showcase-image-frame.is-loaded .showcase-scene {
    opacity: 0;
}

.showcase-scene {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 36%),
        radial-gradient(circle at 84% 20%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 34%),
        linear-gradient(145deg, rgba(244, 248, 255, 0.95), rgba(234, 241, 255, 0.9));
    transition: opacity 0.24s ease;
}

.scene-device {
    position: absolute;
    left: 10%;
    right: 36%;
    top: 28%;
    bottom: 16%;
    border-radius: 0.7rem;
    border: 1px solid rgba(35, 52, 90, 0.25);
    background:
        linear-gradient(180deg, rgba(23, 34, 59, 0.92) 0%, rgba(35, 50, 83, 0.88) 100%);
    box-shadow: 0 10px 20px rgba(26, 34, 60, 0.28);
}

.scene-device::before {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    top: 12%;
    bottom: 14%;
    border-radius: 0.45rem;
    background:
        linear-gradient(135deg, rgba(96, 140, 255, 0.3), rgba(139, 104, 237, 0.22));
}

.scene-widget {
    position: absolute;
    right: 6%;
    width: 26%;
    height: 20%;
    border-radius: 0.65rem;
    border: 1px solid rgba(170, 187, 237, 0.65);
    background: rgba(245, 249, 255, 0.88);
    box-shadow: 0 8px 16px rgba(57, 77, 132, 0.16);
}

.scene-widget.w-top { top: 15%; }
.scene-widget.w-mid { top: 39%; }
.scene-widget.w-low { top: 63%; }

.feature-content h3,
.feature-content p,
.feature-points li {
    text-wrap: pretty;
}

.scene-assessment .showcase-scene {
    background-color: #f1d8bc;
}

.scene-classroom .showcase-scene {
    background-color: #efc796;
}

.scene-analytics .showcase-scene {
    background-color: #95a8f5;
}

.scene-parent .showcase-scene {
    background-color: #d8efe5;
}

.product-showcase-card:hover .showcase-image-frame {
    box-shadow: 0 16px 30px rgba(43, 61, 118, 0.18), 0 0 16px rgba(130, 151, 244, 0.2);
}

.product-showcase-card.is-active {
    border-color: rgba(120, 148, 244, 0.58);
    box-shadow: 0 34px 62px rgba(45, 62, 120, 0.24), 0 0 32px rgba(130, 151, 244, 0.22);
}

.section-alt-d {
    background:
        linear-gradient(135deg, rgba(102, 126, 234, 0.06) 0%, rgba(240, 147, 251, 0.04) 100%),
        #ffffff;
}

.section-alt-a::before,
.section-alt-b::before,
.section-alt-c::before,
.section-alt-d::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(102, 126, 234, 0.08), transparent);
    pointer-events: none;
}

.video-section {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(circle at 18% 10%, rgba(103, 132, 246, 0.16) 0%, rgba(103, 132, 246, 0) 37%),
        radial-gradient(circle at 88% 75%, rgba(129, 88, 204, 0.18) 0%, rgba(129, 88, 204, 0) 39%),
        var(--dark-journey-base);
    border-top: 1px solid rgba(136, 154, 224, 0.14);
    border-bottom: 0;
}

.video-section-head {
    margin-bottom: 2rem;
}

.video-subtitle {
    color: rgba(232, 238, 255, 0.93);
    line-height: 1.75;
}

.video-bg-elements {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.video-float {
    position: absolute;
    border-radius: 999px;
    filter: blur(2px);
    opacity: 0.38;
    animation: video-float 10s ease-in-out infinite;
}

.video-float.vf-1 {
    width: 14rem;
    height: 14rem;
    left: 6%;
    top: 12%;
    background: radial-gradient(circle, rgba(106, 138, 255, 0.42) 0%, rgba(106, 138, 255, 0) 68%);
}

.video-float.vf-2 {
    width: 11rem;
    height: 11rem;
    right: 9%;
    top: 20%;
    animation-delay: 1.8s;
    background: radial-gradient(circle, rgba(240, 147, 251, 0.34) 0%, rgba(240, 147, 251, 0) 68%);
}

.video-float.vf-3 {
    width: 9rem;
    height: 9rem;
    left: 44%;
    bottom: 16%;
    animation-delay: 3s;
    background: radial-gradient(circle, rgba(113, 220, 255, 0.28) 0%, rgba(113, 220, 255, 0) 68%);
}

.video-shell {
    position: relative;
    max-width: 64rem;
    margin: 0 auto;
    border-radius: 20px;
    padding: 0.7rem;
    background: linear-gradient(150deg, rgba(126, 154, 255, 0.36), rgba(240, 147, 251, 0.2));
    box-shadow:
        0 24px 52px rgba(8, 13, 34, 0.52),
        0 0 32px rgba(118, 140, 255, 0.22);
    transition: transform var(--motion-medium) var(--motion-ease-premium), box-shadow var(--motion-medium) var(--motion-ease-premium), border-color var(--motion-medium) var(--motion-ease-premium);
    border: 1px solid rgba(199, 216, 255, 0.24);
    backdrop-filter: blur(6px);
    cursor: pointer;
}

.video-demo-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    padding: 0.24rem 0.62rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    color: rgba(226, 236, 255, 0.95);
    background: rgba(102, 126, 234, 0.22);
    border: 1px solid rgba(166, 189, 255, 0.44);
    backdrop-filter: blur(4px);
    pointer-events: none;
}

.video-shell:hover {
    transform: translateY(-3px);
    box-shadow:
        0 28px 56px rgba(8, 13, 34, 0.58),
        0 0 38px rgba(118, 140, 255, 0.3);
    border-color: rgba(220, 229, 255, 0.34);
}

.video-shell::before {
    content: "";
    position: absolute;
    inset: 0.7rem;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(8, 12, 30, 0.12), rgba(8, 12, 30, 0.42));
    pointer-events: none;
    opacity: 0.85;
    transition: opacity var(--motion-medium) var(--motion-ease-premium);
    z-index: 1;
}

.video-shell:hover::before {
    opacity: 0.72;
}

.video-shell.is-playing::before {
    opacity: 0;
}

.youtube-preview {
    position: relative;
    display: block;
    width: 100%;
    border: 0;
    padding: 0;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    background: #070c1d;
    transition: transform 0.38s ease, filter 0.38s ease, box-shadow 0.38s ease;
}

.youtube-preview:hover {
    transform: scale(1.01);
    filter: brightness(1.03);
    box-shadow: 0 0 28px rgba(109, 143, 255, 0.2);
}

.video-inline-frame-wrap {
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #070c1d;
    border: 1px solid rgba(176, 195, 255, 0.2);
    position: relative;
}

.youtube-inline-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.youtube-thumb {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.youtube-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 9, 21, 0.18) 0%, rgba(5, 9, 21, 0.58) 100%);
}

.demo-video {
    width: 100%;
    display: block;
    border-radius: 14px;
    border: 1px solid rgba(176, 195, 255, 0.28);
    background: #070c1d;
    aspect-ratio: 16 / 9;
    position: relative;
    z-index: 0;
}

.video-play-btn {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 5.3rem;
    height: 5.3rem;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 16px 28px rgba(9, 13, 33, 0.45);
    transition: transform var(--motion-fast) var(--motion-ease-premium), box-shadow var(--motion-fast) var(--motion-ease-premium), opacity var(--motion-fast) var(--motion-ease-premium);
    z-index: 2;
}

.video-play-btn-youtube {
    pointer-events: none;
}

.video-play-btn:hover {
    transform: scale(1.08);
    box-shadow:
        0 20px 34px rgba(9, 13, 33, 0.5),
        0 0 22px rgba(109, 143, 255, 0.36);
}

.play-triangle {
    width: 0;
    height: 0;
    margin-left: 0.18rem;
    border-top: 0.68rem solid transparent;
    border-bottom: 0.68rem solid transparent;
    border-left: 1.1rem solid #3f56d6;
    position: relative;
    z-index: 2;
}

.play-pulse {
    position: absolute;
    inset: -0.3rem;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.42);
    animation: play-pulse 2.4s ease-out infinite;
}

.video-shell.is-playing .video-play-btn {
    opacity: 0;
    pointer-events: none;
}

.video-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: none;
}

.video-modal.is-open {
    display: block;
}

.video-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 8, 20, 0.82);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.28s ease;
}

.video-modal-content {
    position: relative;
    width: min(92vw, 64rem);
    margin: 6vh auto 0;
    border-radius: 18px;
    border: 1px solid rgba(174, 196, 255, 0.35);
    background: linear-gradient(145deg, rgba(13, 22, 46, 0.95), rgba(15, 24, 51, 0.96));
    box-shadow: 0 34px 70px rgba(2, 6, 18, 0.7), 0 0 32px rgba(111, 139, 244, 0.18);
    transform: translateY(16px) scale(0.98);
    opacity: 0;
    transition: transform 0.28s ease, opacity 0.28s ease;
}

.video-modal.is-open .video-modal-backdrop,
.video-modal.is-open .video-modal-content {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.video-modal-frame-wrap {
    border-radius: 14px;
    overflow: hidden;
    margin: 1rem;
    aspect-ratio: 16 / 9;
    background: #040814;
}

.video-modal-frame-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.video-modal-close {
    position: absolute;
    top: 0.5rem;
    right: 0.6rem;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    border: 1px solid rgba(181, 199, 255, 0.36);
    background: rgba(20, 31, 62, 0.8);
    color: #f4f7ff;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.video-modal-close:hover {
    transform: scale(1.06);
    background: rgba(35, 52, 101, 0.92);
}

.video-bullets {
    margin-top: 1.4rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem 1.3rem;
    justify-content: center;
}

.video-bullets p {
    margin: 0;
    color: rgba(233, 239, 255, 0.95);
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.7rem;
    border-radius: 999px;
    background: rgba(16, 25, 50, 0.46);
    border: 1px solid rgba(145, 170, 255, 0.22);
    transition: transform 0.32s ease, border-color 0.32s ease, background-color 0.32s ease;
}

.video-bullets p:hover {
    transform: translateY(-2px);
    border-color: rgba(170, 190, 255, 0.45);
    background: rgba(21, 34, 66, 0.62);
}

.video-bullets p:nth-child(1) { transition-delay: 0.04s; }
.video-bullets p:nth-child(2) { transition-delay: 0.1s; }
.video-bullets p:nth-child(3) { transition-delay: 0.16s; }

.video-bullets span {
    color: #95acff;
}

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

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

.cta-shell {
    position: relative;
    overflow: hidden;
    text-align: center;
    border-radius: 24px;
    padding: 3rem 1.5rem;
    background: var(--brand-gradient-bg);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 22px 42px rgba(44, 94, 168, 0.3);
}

.cta-shell-premium {
    background-size: 200% 200%;
    animation: cta-gradient-pan 10s ease-in-out infinite;
}

.cta-dark-section {
    position: relative;
    background:
        radial-gradient(circle at 18% 12%, rgba(107, 134, 244, 0.16) 0%, rgba(107, 134, 244, 0) 35%),
        radial-gradient(circle at 85% 80%, rgba(147, 103, 224, 0.14) 0%, rgba(147, 103, 224, 0) 34%),
        var(--dark-journey-soft);
}

.cta-dark-section::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 6.5rem;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(10, 16, 34, 0.94) 0%, rgba(10, 16, 34, 0) 100%);
}

.cta-glow {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(2px);
    opacity: 0.35;
    animation: cta-glow-float 8s ease-in-out infinite;
}

.cta-glow-1 {
    width: 16rem;
    height: 16rem;
    top: -8rem;
    left: -3rem;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 70%);
}

.cta-glow-2 {
    width: 14rem;
    height: 14rem;
    bottom: -7rem;
    right: -2rem;
    animation-delay: 2s;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 70%);
}

.cta-title {
    font-size: clamp(2rem, 3.1vw, 3rem);
    line-height: 1.15;
    text-shadow: 0 2px 18px rgba(21, 25, 70, 0.34);
}

.cta-subtitle {
    font-size: 1.08rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.98);
}

.cta-trust-note {
    margin: 0.95rem 0 0;
    color: rgba(231, 238, 255, 0.9);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.stat-card {
    padding: 2rem 1.4rem;
    transition: transform var(--motion-fast) var(--motion-ease-premium), box-shadow var(--motion-fast) var(--motion-ease-premium), border-color var(--motion-fast) var(--motion-ease-premium);
}

.stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    margin-bottom: 0.8rem;
    font-size: 1.15rem;
    background: rgba(74, 144, 226, 0.12);
    border: 1px solid rgba(98, 149, 231, 0.26);
}

.stat-card:hover {
    transform: translateY(-4px) scale(1.012);
    box-shadow: 0 16px 30px rgba(39, 58, 115, 0.15);
}

.btn-cta-convert {
    position: relative;
    overflow: hidden;
    font-size: 1.05rem;
    padding: 0.95rem 1.8rem;
    box-shadow: 0 14px 30px rgba(34, 40, 104, 0.28);
    transition: transform var(--motion-fast) var(--motion-ease-premium), box-shadow var(--motion-fast) var(--motion-ease-premium), filter var(--motion-fast) var(--motion-ease-premium);
}

.btn-cta-convert::after {
    content: "";
    position: absolute;
    top: -120%;
    left: -22%;
    width: 34%;
    height: 340%;
    transform: rotate(20deg);
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.45), transparent);
    opacity: 0;
    transition: opacity var(--motion-fast) var(--motion-ease-premium);
}

.btn-cta-convert:hover {
    transform: translateY(-3px) scale(1.015);
    filter: brightness(1.02);
    box-shadow: 0 18px 34px rgba(34, 40, 104, 0.34);
}

.btn-cta-convert:hover::after {
    opacity: 1;
    animation: cta-shimmer 0.9s ease;
}

.hero-icons {
    pointer-events: none;
}

.hero-premium {
    isolation: isolate;
    background:
        radial-gradient(circle at 15% 15%, rgba(120, 90, 252, 0.27) 0%, rgba(120, 90, 252, 0) 35%),
        radial-gradient(circle at 85% 20%, rgba(84, 136, 246, 0.19) 0%, rgba(84, 136, 246, 0) 31%),
        var(--dark-journey-base);
}

.hero-premium::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 9rem;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(12, 18, 41, 0) 0%,
        rgba(12, 18, 41, 0.46) 40%,
        rgba(11, 17, 37, 0.8) 72%,
        rgba(10, 16, 34, 0.94) 100%
    );
    z-index: 1;
}

.hero-gradient-layer {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.hero-grid {
    position: absolute;
    inset: 0;
    opacity: 0.18;
    background-image:
        linear-gradient(rgba(151, 177, 255, 0.24) 1px, transparent 1px),
        linear-gradient(90deg, rgba(151, 177, 255, 0.24) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(circle at center, #000 30%, transparent 85%);
}

.hero-orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(2px);
    animation: hero-orb-shift 10s ease-in-out infinite;
}

.hero-orb-1 {
    width: 24rem;
    height: 24rem;
    left: -6rem;
    top: -8rem;
    background: radial-gradient(circle at 35% 35%, rgba(103, 126, 234, 0.34), rgba(103, 126, 234, 0.02));
}

.hero-orb-2 {
    width: 20rem;
    height: 20rem;
    right: -4rem;
    top: 12%;
    animation-delay: 1.5s;
    background: radial-gradient(circle at 45% 45%, rgba(118, 75, 162, 0.28), rgba(118, 75, 162, 0.01));
}

.hero-orb-3 {
    width: 18rem;
    height: 18rem;
    left: 35%;
    bottom: -6rem;
    animation-delay: 3s;
    background: radial-gradient(circle at 45% 45%, rgba(240, 147, 251, 0.28), rgba(240, 147, 251, 0.01));
}

.hero-copy,
.hero-card-wrap {
    will-change: transform;
    transition: transform 0.4s ease;
}

.hero-layout {
    align-items: center;
}

.hero-content {
    max-width: 760px;
}

.hero-image {
    max-width: 480px;
    margin-left: auto;
    transform: scale(0.95);
    transform-origin: center right;
}

.hero-chip {
    background: rgba(91, 123, 255, 0.2);
    color: #c3d2ff;
    border: 1px solid rgba(151, 177, 255, 0.28);
}

.hero-title {
    color: #f4f7ff;
    text-shadow: 0 8px 28px rgba(14, 20, 56, 0.45);
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
}

.hero-title-ai {
    background: linear-gradient(135deg, #9fc1ff 0%, #c7b2ff 52%, #f0c0ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 7px 18px rgba(122, 141, 255, 0.5));
}

.hero-subtitle {
    color: rgba(226, 233, 255, 0.94);
    margin-top: 16px;
    margin-bottom: 24px;
    font-size: 1.125rem;
    line-height: 1.85;
}

.hero-ghost-btn {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(237, 244, 255, 0.95);
    border-color: rgba(216, 228, 255, 0.52);
    backdrop-filter: blur(2px);
}

.hero-ghost-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    border-color: rgba(230, 239, 255, 0.78);
    box-shadow: 0 10px 22px rgba(18, 28, 54, 0.3);
}

.hero-title-break {
    display: none;
}

.hero-trust span {
    color: rgba(230, 236, 255, 0.94);
    background: rgba(15, 23, 48, 0.44);
    border-color: rgba(151, 177, 255, 0.24);
}

.hero-card {
    background:
        linear-gradient(150deg, rgba(18, 28, 58, 0.94), rgba(12, 20, 43, 0.9));
    backdrop-filter: blur(8px);
    border: 1px solid rgba(145, 170, 255, 0.34);
    box-shadow:
        0 26px 50px rgba(7, 10, 26, 0.55),
        0 0 0 1px rgba(133, 161, 255, 0.16);
}

.hero-card-title {
    color: #eef3ff;
}

.hero-status-pill {
    background: rgba(39, 174, 96, 0.2);
    border: 1px solid rgba(94, 230, 157, 0.34);
    color: #8ef3b9;
}

.hero-time-filters {
    display: inline-flex;
    gap: 0.38rem;
    padding: 0.3rem;
    border-radius: 999px;
    background: rgba(19, 31, 63, 0.75);
    border: 1px solid rgba(130, 156, 245, 0.24);
    margin-bottom: 0.85rem;
}

.hero-time-pill {
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(199, 211, 255, 0.82);
    font-size: 0.66rem;
    font-weight: 600;
    padding: 0.32rem 0.62rem;
    cursor: pointer;
    transition: background-color 0.22s ease, color 0.22s ease, transform 0.22s ease;
}

.hero-time-pill:hover {
    color: #eef3ff;
    transform: translateY(-1px);
}

.hero-time-pill.is-active {
    background: rgba(116, 144, 248, 0.22);
    color: #eef3ff;
    box-shadow: inset 0 0 0 1px rgba(151, 177, 255, 0.4);
}

.hero-kpi {
    background: linear-gradient(145deg, rgba(29, 45, 86, 0.9), rgba(22, 35, 68, 0.9));
    border: 1px solid rgba(133, 161, 255, 0.2);
}

.hero-kpi-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.hero-kpi-card {
    border-radius: 14px;
    background: linear-gradient(150deg, rgba(20, 31, 62, 0.92), rgba(15, 24, 48, 0.9));
    border: 1px solid rgba(129, 156, 245, 0.22);
    padding: 0.8rem;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.hero-kpi-card:hover {
    transform: translateY(-3px);
    border-color: rgba(157, 181, 255, 0.44);
    box-shadow: 0 10px 20px rgba(9, 14, 35, 0.35);
}

.kpi-label {
    margin: 0;
    font-size: 0.67rem;
    color: rgba(192, 207, 255, 0.78);
}

.kpi-value {
    margin: 0.38rem 0 0.2rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #eff4ff;
    text-shadow: 0 0 12px rgba(108, 147, 255, 0.28);
}

.kpi-trend {
    margin: 0;
    font-size: 0.65rem;
    color: rgba(147, 244, 191, 0.88);
}

.hero-metric-value {
    font-size: 0.72rem;
    font-weight: 700;
    color: #eff4ff;
    text-shadow: 0 0 10px rgba(116, 162, 255, 0.24);
    animation: metric-glow 6s ease-in-out infinite;
}

.dashboard-main-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 0.75rem;
}

.hero-kpi p:first-child {
    color: rgba(199, 211, 255, 0.8);
}

.hero-kpi p:last-child {
    color: #f1f5ff;
}

.hero-mini-chart {
    margin-top: 1rem;
    padding: 1rem 1rem 0.85rem;
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(22, 36, 70, 0.8), rgba(16, 28, 58, 0.84));
    border: 1px solid rgba(133, 161, 255, 0.2);
}

.hero-chart-head {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(212, 223, 255, 0.85);
    margin-bottom: 0.75rem;
}

.hero-chart-line {
    position: relative;
    height: 2.7rem;
    border-radius: 10px;
    margin-bottom: 0.55rem;
    background: linear-gradient(180deg, rgba(74, 97, 173, 0.12), rgba(74, 97, 173, 0.02));
    overflow: hidden;
}

.hero-chart-line::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 58%;
    height: 2px;
    background: linear-gradient(90deg, rgba(119, 156, 255, 0.2), rgba(136, 101, 255, 0.72));
    transform: skewY(-6deg);
}

.line-point {
    position: absolute;
    width: 0.36rem;
    height: 0.36rem;
    border-radius: 999px;
    background: #a8c2ff;
    box-shadow: 0 0 8px rgba(168, 194, 255, 0.65);
    animation: line-pulse 6s ease-in-out infinite;
}

.line-point.p1 { left: 8%; top: 70%; }
.line-point.p2 { left: 26%; top: 61%; animation-delay: 0.4s; }
.line-point.p3 { left: 44%; top: 53%; animation-delay: 0.8s; }
.line-point.p4 { left: 62%; top: 46%; animation-delay: 1.2s; }
.line-point.p5 { left: 82%; top: 36%; animation-delay: 1.6s; }

.hero-chart-bars {
    display: flex;
    align-items: end;
    gap: 0.45rem;
    height: 3.2rem;
}

.hero-chart-bars .bar {
    flex: 1;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(180deg, #74a2ff 0%, #6a7cff 60%, #8f61f7 100%);
    box-shadow: 0 0 12px rgba(116, 162, 255, 0.28);
    animation: bar-pulse 8s ease-in-out infinite;
}

.hero-chart-bars .b1 { height: 32%; animation-delay: 0s; }
.hero-chart-bars .b2 { height: 55%; animation-delay: 0.4s; }
.hero-chart-bars .b3 { height: 44%; animation-delay: 0.8s; }
.hero-chart-bars .b4 { height: 74%; animation-delay: 1.2s; }
.hero-chart-bars .b5 { height: 62%; animation-delay: 1.6s; }
.hero-chart-bars .b6 { height: 86%; animation-delay: 2s; }

.hero-activity-feed {
    border-radius: 14px;
    padding: 1rem 0.85rem;
    background: linear-gradient(160deg, rgba(20, 34, 68, 0.8), rgba(14, 24, 52, 0.85));
    border: 1px solid rgba(133, 161, 255, 0.2);
}

.hero-activity-feed ul {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.hero-activity-feed li {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr);
    gap: 0.45rem;
    align-items: start;
    padding: 0.38rem 0.25rem;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.hero-activity-feed li:hover {
    background: rgba(115, 145, 240, 0.12);
}

.hero-activity-feed li span {
    font-size: 0.72rem;
}

.hero-activity-feed li p {
    margin: 0;
    font-size: 0.67rem;
    color: rgba(225, 233, 255, 0.92);
    line-height: 1.28;
}

.hero-activity-feed li small {
    font-size: 0.62rem;
    color: rgba(172, 188, 238, 0.7);
}

.hero-cta {
    position: relative;
    overflow: hidden;
}

.hero-cta::after {
    content: "";
    position: absolute;
    top: -120%;
    left: -18%;
    width: 35%;
    height: 340%;
    transform: rotate(20deg);
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.28), transparent);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.hero-cta:hover::after {
    opacity: 1;
    animation: cta-shimmer 0.9s ease;
}

.btn-primary.hero-cta:hover,
.btn-secondary.hero-cta:hover {
    transform: translateY(-2px) scale(1.01);
}

.floating-dot {
    position: absolute;
    border-radius: 999px;
    opacity: 0.28;
    pointer-events: none;
    animation: float-y 8s ease-in-out infinite;
}

.floating-dot-1 {
    width: 0.9rem;
    height: 0.9rem;
    background: rgba(102, 126, 234, 0.45);
    top: 24%;
    left: 30%;
}

.floating-dot-2 {
    width: 0.7rem;
    height: 0.7rem;
    background: rgba(240, 147, 251, 0.55);
    top: 56%;
    right: 38%;
    animation-delay: 2s;
}

.floating-dot-3 {
    width: 1rem;
    height: 1rem;
    background: rgba(126, 211, 33, 0.4);
    bottom: 20%;
    left: 44%;
    animation-delay: 4s;
}

.floating-icon {
    position: absolute;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    font-weight: 700;
    color: #d7e2ff;
    background-color: rgba(26, 38, 73, 0.62);
    border: 1px solid rgba(151, 177, 255, 0.24);
    box-shadow: 0 10px 22px rgba(10, 16, 38, 0.42);
    opacity: 0.55;
    animation: float-y 9s ease-in-out infinite;
}

.floating-icon-1 { top: 14%; left: 5%; animation-delay: 0s; }
.floating-icon-2 { top: 22%; right: 8%; animation-delay: 2s; }
.floating-icon-3 { top: 65%; left: 8%; animation-delay: 4s; }
.floating-icon-4 { top: 62%; right: 12%; animation-delay: 6s; width: 3.4rem; }
.floating-icon-5 { top: 42%; right: 45%; animation-delay: 8s; }

@keyframes float-y {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@keyframes hero-orb-shift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(0, -12px, 0) scale(1.04); }
}

@keyframes bar-pulse {
    0%, 100% { filter: brightness(0.92); }
    50% { filter: brightness(1.1); }
}

@keyframes metric-glow {
    0%, 100% { text-shadow: 0 0 8px rgba(116, 162, 255, 0.16); }
    50% { text-shadow: 0 0 14px rgba(116, 162, 255, 0.34); }
}

@keyframes line-pulse {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.2); opacity: 1; }
}

@keyframes cta-shimmer {
    0% { transform: translateX(-70%) rotate(20deg); }
    100% { transform: translateX(290%) rotate(20deg); }
}

@keyframes cta-gradient-pan {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes cta-glow-float {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(0, -10px, 0) scale(1.08); }
}

@keyframes play-pulse {
    0% { transform: scale(0.9); opacity: 0.72; }
    70% { transform: scale(1.18); opacity: 0; }
    100% { transform: scale(1.18); opacity: 0; }
}

@keyframes video-float {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(0, -10px, 0) scale(1.06); }
}

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

@keyframes cap-spin {
    0% { transform: translateY(-7px) rotate(0deg); }
    100% { transform: translateY(-7px) rotate(360deg); }
}

.place-items-center { place-items: center; }
.inline-block { display: inline-block; }
.focus\:outline-none:focus { outline: none; }
.hover\:-translate-y-0\.5:hover { transform: translateY(-0.125rem); }
.hover\:shadow-soft:hover { box-shadow: 0 12px 28px rgba(44, 62, 80, 0.12); }
.backdrop-blur { backdrop-filter: blur(8px); }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.focus\:ring-2:focus { box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.3); }
.focus\:ring-brand-primary:focus { box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.3); }

.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-4 > * + * { margin-top: 1rem; }

.demo-form-shell {
    border-radius: 20px;
    padding: 1.6rem;
}

.demo-request-form {
    margin-top: 1rem;
}

.demo-request-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.demo-field {
    display: grid;
    gap: 0.35rem;
}

.demo-field span {
    font-size: 0.82rem;
    font-weight: 700;
    color: #2f4464;
}

.demo-field input,
.demo-field textarea {
    width: 100%;
    border: 1px solid rgba(154, 176, 238, 0.5);
    border-radius: 12px;
    padding: 0.68rem 0.8rem;
    font-size: 0.93rem;
    background: #ffffff;
    color: #2b3f5c;
}

.demo-field textarea {
    resize: vertical;
}

.demo-field input:focus-visible,
.demo-field textarea:focus-visible {
    outline: none;
    border-color: rgba(99, 132, 231, 0.86);
    box-shadow: 0 0 0 3px rgba(108, 141, 242, 0.2);
}

.demo-field small {
    color: #cf4c70;
    font-size: 0.76rem;
}

.demo-field-full {
    grid-column: 1 / -1;
}

@media (max-width: 768px) {
    :root {
        --motion-fast: 0.18s;
        --motion-medium: 0.24s;
    }

    .section-block {
        padding-top: 4.25rem;
        padding-bottom: 4.25rem;
    }

    .floating-icon {
        animation-duration: 10s;
        opacity: 0.44;
    }

    .hero-kpi-row {
        grid-template-columns: 1fr;
    }

    .dashboard-main-grid {
        grid-template-columns: 1fr;
    }

    .hero-orb {
        animation-duration: 12s;
    }

    .video-play-btn {
        width: 4.4rem;
        height: 4.4rem;
    }

    .video-shell:hover {
        transform: translateY(-2px);
        box-shadow:
            0 20px 42px rgba(8, 13, 34, 0.48),
            0 0 24px rgba(118, 140, 255, 0.22);
    }

    .video-shell .plyr__video-embed iframe {
        transform: none;
        clip-path: none;
    }

    .video-bullets {
        gap: 0.65rem;
    }

    .video-bullets p {
        width: 100%;
        justify-content: center;
    }

    .scene-device {
        left: 8%;
        right: 30%;
    }

    .scene-widget {
        width: 24%;
    }

    .faq-trigger {
        padding: 1rem 1rem;
        gap: 0.7rem;
    }

    .faq-question {
        font-size: 1.02rem;
    }

    .faq-number {
        font-size: 0.95rem;
    }

    .faq-answer {
        padding: 0 1rem;
    }

    .faq-item.is-open .faq-answer {
        padding: 0 1rem 1rem;
    }

    .faq-subtitle {
        font-size: 0.94rem;
    }

    .book-demo-grid {
        grid-template-columns: 1fr;
    }

    .demo-request-grid {
        grid-template-columns: 1fr;
    }

    .hero-image {
        max-width: 100%;
        transform: none;
        margin-left: 0;
    }

    .hero-title-break {
        display: none;
    }

    .hero-title {
        white-space: normal;
    }

    .navbar-inner {
        grid-template-columns: auto auto;
    }

    .integration-card {
        padding: 1.2rem 1rem;
    }

    .integration-card:hover {
        transform: translateY(-3px) scale(1.006);
    }

    .integration-card-hiring.is-featured {
        transform: translateY(0) scale(1);
    }

    .integration-card-hiring.is-featured:hover {
        transform: translateY(-4px) scale(1.01);
    }

    .dynamic-feature-card:hover {
        transform: translateY(-4px) scale(1.008);
    }

    .stat-card:hover {
        transform: translateY(-3px) scale(1.008);
        box-shadow: 0 12px 22px rgba(39, 58, 115, 0.12);
    }

    .btn-cta-convert:hover {
        transform: translateY(-2px) scale(1.01);
    }
}

@media (min-width: 640px) {
    .sm\:flex-row { flex-direction: row; }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
    .sm\:p-8 { padding: 2rem; }
    .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
    .sm\:text-5xl { font-size: 3rem; line-height: 1; }
    .sm\:pt-20 { padding-top: 5rem; }
}

@media (min-width: 768px) {
    .integrations-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.1rem;
    }

    .md\:hidden { display: none; }
    .md\:flex { display: flex; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .dynamic-feature-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .product-showcase-track {
        overflow: visible;
    }

    .product-showcase-card {
        min-width: min(82rem, calc(100% - 8rem));
        flex-basis: min(82rem, calc(100% - 8rem));
    }
}

@media (min-width: 1024px) {
    .hero-layout {
        grid-template-columns: 1.2fr 1fr;
        gap: 58px;
    }

    .hero-title {
        font-size: 50px;
        line-height: 1.1;
    }

    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:items-center { align-items: center; }
    .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
    .lg\:text-6xl { font-size: 3.75rem; line-height: 1; }
    .lg\:pb-24 { padding-bottom: 6rem; }
}

@media (min-width: 1440px) {
    :root {
        --dark-journey-base: linear-gradient(145deg, #0a1022 0%, #101a36 49%, #1b1843 100%);
        --dark-journey-soft: linear-gradient(145deg, #0b1228 0%, #111c3c 52%, #1b1944 100%);
    }

    .hero-premium::after {
        height: 10rem;
    }

    .showcase-dark::after {
        height: 9rem;
        background: linear-gradient(180deg, rgba(11, 17, 39, 0) 0%, rgba(10, 16, 34, 0.66) 57%, rgba(223, 235, 255, 0.16) 100%);
    }

    .integrations-section::before {
        height: 8rem;
    }

    .video-section {
        border-top-color: rgba(136, 154, 224, 0.18);
    }
}

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

    .floating-icon,
    .floating-dot,
    .hero-orb,
    .cta-shell-premium,
    .cta-glow,
    .feature-card,
    .btn-primary,
    .btn-secondary,
    .btn-cta,
    .cap-badge,
    .hero-copy,
    .hero-card-wrap,
    .video-float,
    .dynamic-word,
    .dynamic-feature-grid,
    .dynamic-feature-card,
    .product-showcase-card,
    .showcase-image-frame,
    .transition {
        animation: none;
        transition: none;
    }

    .reveal-on-scroll {
        opacity: 1;
        transform: none;
    }
}