/* Public landing page. Tabler provides the components; this file adds layout and the hero visual. */

.unq-public {
    --unq-lilac: #f3ecfb;
    --unq-lime-soft: #ecfccb;
    --unq-heading: #111113;
    --unq-section-pad: 5rem;
}

[data-bs-theme="dark"] .unq-public,
[data-bs-theme="dark"].unq-public {
    --unq-heading: #fafafa;
}

.unq-public :is(h1, h2, h3, .h1, .h2, .h3) {
    color: var(--unq-heading);
}

[data-bs-theme="dark"] .unq-public,
[data-bs-theme="dark"].unq-public {
    --unq-lilac: rgba(167, 116, 230, 0.12);
    --unq-lime-soft: rgba(155, 220, 40, 0.12);
}

/* Navigation */
.unq-home-nav {
    --tblr-navbar-bg: var(--tblr-bg-surface);
}

.unq-home-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    text-decoration: none;
}

.unq-logo {
    height: 2rem;
    width: auto;
}

.unq-logo--dark,
[data-bs-theme="dark"] .unq-logo--light {
    display: none;
}

[data-bs-theme="dark"] .unq-logo--dark {
    display: inline-block;
}

/* Hero */
.unq-hero {
    position: relative;
    overflow: hidden;
    padding-block: 4.5rem 5rem;
    background-color: var(--tblr-bg-surface);
    background-image: radial-gradient(circle, color-mix(in srgb, var(--tblr-primary) 16%, transparent) 1px, transparent 1.5px);
    background-size: 22px 22px;
    background-position: center;
    border-bottom: 1px solid var(--tblr-border-color);
}

.unq-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 55%, var(--tblr-bg-surface));
    pointer-events: none;
}

.unq-hero > .container-xl {
    position: relative;
    z-index: 1;
}

.unq-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding: 0.35rem 0.85rem;
    border: 1px solid color-mix(in srgb, var(--tblr-primary) 25%, transparent);
    border-radius: 999px;
    color: var(--tblr-primary);
    background: var(--tblr-bg-surface);
    font-size: 0.8125rem;
    font-weight: 600;
}

.unq-hero__title {
    margin: 0 0 1.25rem;
    color: var(--tblr-emphasis-color);
    font-size: clamp(2rem, 1.35rem + 2.4vw, 3.25rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

[dir="rtl"] .unq-hero__title {
    letter-spacing: 0;
    line-height: 1.35;
}

.unq-hero__lead {
    max-width: 34rem;
    margin: 0;
    color: var(--tblr-secondary-color);
    font-size: 1.125rem;
    line-height: 1.8;
}

.unq-hero__checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--tblr-secondary-color);
    font-size: 0.9375rem;
}

.unq-hero__checks i {
    margin-inline-end: 0.4rem;
    color: var(--tblr-success);
}

/* Hero visual: a live-class product preview */
.unq-hero-visual {
    position: relative;
    padding: 1.5rem 1rem 2.5rem;
}

.unq-mock {
    overflow: hidden;
    border: 1px solid var(--tblr-border-color);
    border-radius: 1rem;
    background: var(--tblr-bg-surface);
    box-shadow: 0 30px 60px -20px rgba(17, 17, 19, 0.25), 0 0 0 6px color-mix(in srgb, var(--tblr-primary) 8%, transparent);
}

.unq-mock__bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--tblr-border-color);
    background: var(--tblr-bg-surface-secondary);
}

.unq-mock__bar > span {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: var(--tblr-border-color);
}

.unq-mock__bar > span:first-child { background: #f87171; }
.unq-mock__bar > span:nth-child(2) { background: #fbbf24; }
.unq-mock__bar > span:nth-child(3) { background: #4ade80; }

.unq-mock__url {
    flex: 1;
    margin-inline-start: 0.75rem;
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    color: var(--tblr-secondary-color);
    background: var(--tblr-bg-surface);
    font-size: 0.75rem;
    direction: ltr;
}

.unq-mock__url i {
    margin-inline-end: 0.35rem;
    color: var(--tblr-success);
}

.unq-mock__body {
    display: grid;
    gap: 0.75rem;
    padding: 0.9rem;
}

.unq-mock__stage {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1rem;
    min-height: 11rem;
    padding: 1.25rem;
    border-radius: 0.75rem;
    color: #fff;
    background: #111113;
}

.unq-mock__live {
    position: absolute;
    top: 0.75rem;
    inset-inline-start: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: #ef4444;
    font-size: 0.6875rem;
    font-weight: 700;
}

.unq-mock__live span {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: #fff;
    animation: unq-pulse 1.6s ease-in-out infinite;
}

.unq-mock__teacher {
    width: 4.5rem;
    height: 4.5rem;
    display: grid;
    place-items: center;
    margin-top: 1rem;
    border-radius: 50%;
    color: #111113;
    background: #9bdc28;
    font-size: 1.75rem;
}

.unq-mock__board {
    display: grid;
    gap: 0.4rem;
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border: 1px dashed rgba(255, 255, 255, 0.25);
    border-radius: 0.5rem;
    font-family: var(--tblr-font-monospace);
    font-size: 0.875rem;
    text-align: left;
}

.unq-mock__board span:last-child {
    color: #c4a5ec;
}

.unq-mock__caption {
    grid-column: 1 / -1;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.75rem;
}

.unq-mock__people {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
}

.unq-mock__people span {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    border-radius: 0.6rem;
    font-weight: 700;
}

.unq-mock__people .is-a { color: #5b2a91; background: #ede4fa; }
.unq-mock__people .is-b { color: #3f6212; background: #ecfccb; }
.unq-mock__people .is-c { color: #9a3412; background: #ffedd5; }
.unq-mock__people .is-d { color: var(--tblr-secondary-color); background: var(--tblr-bg-surface-secondary); font-size: 0.8125rem; }

.unq-mock__controls {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.unq-mock__controls span {
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--tblr-body-color);
    background: var(--tblr-bg-surface-secondary);
    font-size: 0.8125rem;
}

.unq-mock__controls .is-end {
    color: #fff;
    background: #ef4444;
}

.unq-float {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--tblr-border-color);
    border-radius: 0.75rem;
    background: var(--tblr-bg-surface);
    box-shadow: 0 16px 32px -12px rgba(17, 17, 19, 0.2);
    line-height: 1.3;
}

.unq-float small {
    display: block;
    color: var(--tblr-secondary-color);
    font-size: 0.6875rem;
}

.unq-float strong {
    display: block;
    color: var(--tblr-emphasis-color);
    font-size: 0.875rem;
}

.unq-float__icon {
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 0.6rem;
}

.unq-float__icon.is-purple { color: #fff; background: var(--tblr-primary); }
.unq-float__icon.is-lime { color: #111113; background: #9bdc28; }

.unq-float--next {
    top: 38%;
    inset-inline-end: -1rem;
}

.unq-float--score {
    bottom: 0;
    inset-inline-start: -0.5rem;
    flex-wrap: wrap;
    width: 12rem;
}

.unq-float__bar {
    width: 100%;
    height: 0.35rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--tblr-bg-surface-secondary);
}

.unq-float__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #9bdc28;
}

@keyframes unq-pulse {
    50% { opacity: 0.3; }
}

/* Stats strip */
.unq-stats {
    padding-block: 2rem;
    border-bottom: 1px solid var(--tblr-border-color);
    background: var(--tblr-bg-surface);
}

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

.unq-stats__grid > div {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.85rem;
    align-items: center;
}

.unq-stats__grid i {
    grid-row: span 2;
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border-radius: 0.75rem;
    color: var(--tblr-primary);
    background: var(--unq-lilac);
}

.unq-stats__grid strong {
    color: var(--tblr-emphasis-color);
    font-size: 1.5rem;
    line-height: 1.2;
}

.unq-stats__grid span {
    color: var(--tblr-secondary-color);
    font-size: 0.8125rem;
}

/* Sections */
.unq-section {
    padding-block: var(--unq-section-pad);
    background: var(--tblr-bg-surface);
}

.unq-section--alt {
    border-block: 1px solid var(--tblr-border-color);
    background: var(--tblr-bg-surface-secondary);
}

.unq-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.unq-section__head.is-center {
    display: block;
    max-width: 40rem;
    margin-inline: auto;
    text-align: center;
}

.unq-section__head h2,
.unq-faq__title,
.unq-cta h2 {
    margin: 0 0 0.5rem;
    color: var(--tblr-emphasis-color);
    font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);
    font-weight: 800;
    line-height: 1.3;
}

.unq-section__head p {
    max-width: 40rem;
    margin: 0;
    color: var(--tblr-secondary-color);
    font-size: 1.0625rem;
}

.unq-kicker {
    display: inline-block;
    margin-bottom: 0.6rem;
    color: var(--tblr-primary);
    font-size: 0.875rem;
    font-weight: 700;
}

.unq-clamp-3 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* Audience cards */
.unq-audience {
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.unq-audience:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -20px rgba(17, 17, 19, 0.25);
}

.unq-audience__art {
    padding: 1.25rem 1.25rem 0;
}

.unq-audience__art img {
    display: block;
    width: 100%;
    height: auto;
}

[data-bs-theme="dark"] .unq-audience__art img {
    opacity: 0.92;
}

.unq-audience__title {
    margin: 0 0 0.35rem;
    font-size: 1.25rem;
    font-weight: 700;
}

.unq-checklist {
    display: grid;
    gap: 0.6rem;
    padding: 0;
    list-style: none;
}

.unq-checklist li {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
}

.unq-checklist i {
    width: 1.25rem;
    height: 1.25rem;
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    color: var(--tblr-primary);
    background: var(--unq-lilac);
    font-size: 0.625rem;
    transform: translateY(0.15rem);
}

/* Features */
.unq-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

.unq-feature {
    padding: 1.5rem;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius-lg);
    background: var(--tblr-bg-surface);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.unq-feature:hover {
    border-color: color-mix(in srgb, var(--tblr-primary) 45%, transparent);
    transform: translateY(-3px);
}

.unq-feature__icon {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    margin-bottom: 1rem;
    border-radius: 0.85rem;
    color: var(--tblr-primary);
    background: var(--unq-lilac);
    font-size: 1.25rem;
}

.unq-feature:nth-child(4n + 2) .unq-feature__icon,
.unq-feature:nth-child(4n + 4) .unq-feature__icon {
    color: #3f6212;
    background: var(--unq-lime-soft);
}

[data-bs-theme="dark"] .unq-feature:nth-child(4n + 2) .unq-feature__icon,
[data-bs-theme="dark"] .unq-feature:nth-child(4n + 4) .unq-feature__icon {
    color: #bef264;
}

.unq-feature h3 {
    margin: 0 0 0.4rem;
    font-size: 1.0625rem;
    font-weight: 700;
}

.unq-feature p {
    margin: 0;
    color: var(--tblr-secondary-color);
    font-size: 0.9375rem;
    line-height: 1.7;
}

/* Steps */
.unq-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.unq-steps::before {
    content: "";
    position: absolute;
    top: 2.25rem;
    inset-inline: 16%;
    border-top: 2px dashed var(--tblr-border-color);
}

.unq-step {
    position: relative;
}

.unq-step__icon {
    position: relative;
    width: 4.5rem;
    height: 4.5rem;
    display: grid;
    place-items: center;
    margin: 0 auto 1.25rem;
    border: 6px solid var(--tblr-body-bg);
    border-radius: 50%;
    color: #fff;
    background: var(--tblr-primary);
    font-size: 1.5rem;
}

.unq-step__number {
    position: absolute;
    top: -0.35rem;
    inset-inline-end: -0.35rem;
    width: 1.6rem;
    height: 1.6rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #111113;
    background: #9bdc28;
    font-size: 0.8125rem;
    font-weight: 800;
}

.unq-step h3 {
    margin: 0 0 0.4rem;
    font-size: 1.125rem;
    font-weight: 700;
}

.unq-step p {
    max-width: 18rem;
    margin: 0 auto;
    color: var(--tblr-secondary-color);
}

/* Platforms */
.unq-platform {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.unq-platform:hover {
    transform: translateY(-3px);
}

.unq-platform__logo {
    background-color: var(--tblr-bg-surface);
    background-size: contain;
}

.unq-platform__name {
    margin: 0 0 0.2rem;
    font-size: 1.0625rem;
    font-weight: 700;
}

.unq-verified {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--tblr-success);
    font-size: 0.8125rem;
    font-weight: 600;
}

.unq-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--tblr-secondary-color);
}

.unq-rating i {
    color: #f59f00;
}

.unq-rating strong {
    color: var(--tblr-emphasis-color);
}

.unq-platform__go {
    color: var(--tblr-primary);
    font-size: 0.875rem;
    font-weight: 600;
}

.unq-empty-cta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem;
    border: 1px dashed color-mix(in srgb, var(--tblr-primary) 40%, transparent);
    border-radius: var(--tblr-border-radius-lg);
    background: var(--tblr-bg-surface);
}

.unq-empty-cta h3 {
    margin: 0 0 0.25rem;
    font-size: 1.125rem;
    font-weight: 700;
}

.unq-empty-cta p {
    margin: 0;
    color: var(--tblr-secondary-color);
}

.unq-empty-cta .btn {
    flex: 0 0 auto;
    margin-inline-start: auto;
}

.unq-empty-cta__icon {
    width: 3.5rem;
    height: 3.5rem;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 1rem;
    color: var(--tblr-primary);
    background: var(--unq-lilac);
    font-size: 1.4rem;
}

/* Courses */
.unq-course__cover {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.unq-course__cover--placeholder {
    display: grid;
    place-items: center;
    color: var(--tblr-primary);
    background: var(--unq-lilac);
    font-size: 2.5rem;
}

.unq-course__title {
    margin: 0 0 0.4rem;
    font-size: 1.0625rem;
    font-weight: 700;
}

.unq-course__price {
    color: var(--tblr-emphasis-color);
    font-size: 1.125rem;
}

/* Call to action band */
.unq-cta {
    padding: clamp(2rem, 4vw, 3.5rem);
    border-radius: 1.5rem;
    color: #e4e4e7;
    background: #111113;
}

.unq-public .unq-cta h2 {
    color: #fff;
}

.unq-cta p {
    margin: 0;
    color: #a1a1aa;
    font-size: 1.0625rem;
    line-height: 1.8;
}

.unq-cta__kicker {
    display: inline-block;
    margin-bottom: 0.75rem;
    color: #9bdc28;
    font-size: 0.875rem;
    font-weight: 700;
}

.unq-cta__secondary {
    border-color: #3f3f46;
    color: #fff;
    background: transparent;
}

.unq-cta__secondary:hover {
    border-color: #71717a;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.unq-cta__steps {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.unq-cta__steps li {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.25rem;
    border: 1px solid #27272a;
    border-radius: 1rem;
    background: #18181b;
}

.unq-cta__steps li > span {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 0.75rem;
    color: #fff;
    background: var(--tblr-primary);
}

.unq-cta__steps li:nth-child(2) > span {
    color: #111113;
    background: #9bdc28;
}

.unq-cta__steps strong {
    display: block;
    color: #fff;
}

.unq-cta__steps small {
    color: #a1a1aa;
    font-size: 0.875rem;
}

/* FAQ */
.unq-faq .accordion-item {
    margin-bottom: 0.75rem;
    overflow: hidden;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius-lg);
    background: var(--tblr-bg-surface);
}

.unq-faq .accordion-button {
    font-size: 1rem;
    font-weight: 600;
}

/* Footer */
.unq-site-footer {
    padding-block: 3.5rem 1rem;
    border-top: 1px solid var(--tblr-border-color);
    color: var(--tblr-secondary-color);
    background: var(--tblr-bg-surface-secondary);
}

.unq-site-footer .unq-home-brand,
.unq-site-footer .unq-home-brand:hover {
    display: inline-flex;
    color: var(--unq-heading);
}

.unq-public .unq-site-footer h3 {
    margin-bottom: 0.85rem;
    color: var(--unq-heading);
    font-size: 0.9375rem;
    font-weight: 700;
}

.unq-site-footer ul {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.unq-site-footer a:not(.unq-home-brand) {
    color: var(--tblr-secondary-color);
    text-decoration: none;
}

.unq-site-footer a:not(.unq-home-brand):hover {
    color: var(--tblr-primary);
}

.unq-site-footer p {
    max-width: 22rem;
    margin-top: 0.75rem;
    line-height: 1.8;
}

.unq-public .unqud-global-footer {
    margin-top: 0;
    background: var(--tblr-bg-surface-secondary);
}

/* Responsive */
@media (max-width: 991.98px) {
    .unq-public {
        --unq-section-pad: 3.5rem;
    }

    .unq-hero {
        padding-block: 3rem 3.5rem;
    }

    .unq-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .unq-stats__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .unq-hero-visual {
        max-width: 34rem;
        margin-inline: auto;
    }
}

@media (max-width: 767.98px) {
    .unq-section__head {
        align-items: flex-start;
        flex-direction: column;
    }

    .unq-steps {
        grid-template-columns: 1fr;
    }

    .unq-steps::before {
        display: none;
    }

    .unq-empty-cta {
        align-items: flex-start;
        flex-direction: column;
    }

    .unq-empty-cta .btn {
        margin-inline-start: 0;
    }
}

@media (max-width: 575.98px) {
    .unq-features {
        grid-template-columns: 1fr;
    }

    .unq-float--next {
        inset-inline-end: 0;
    }

    .unq-float--score {
        inset-inline-start: 0;
    }

    .unq-mock__board {
        font-size: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .unq-mock__live span {
        animation: none;
    }

    .unq-audience,
    .unq-feature,
    .unq-platform {
        transition: none;
    }
}

/* Guard against horizontal scrolling from decorative overhangs. */
.unq-public main,
.unq-public .unq-site-footer {
    overflow-x: clip;
}

/* Tabler gives body a fixed viewport height; let it grow so the sticky header stays pinned. */
body.unq-public {
    height: auto;
    min-height: 100vh;
}

/* Keep anchored sections clear of the sticky header. */
.unq-public main section[id] {
    scroll-margin-top: 4rem;
}

html:has(body.unq-public) {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html:has(body.unq-public) {
        scroll-behavior: auto;
    }
}