/* ==========================================================================
   UniFluent - shared brand system
   --------------------------------------------------------------------------
   The single source of truth for colour, type, spacing and the chrome that
   every page shares: navigation, sections, cards, buttons and the footer.
   Page-specific layout lives alongside this in its own sheet.

   Load order matters. This sheet comes first, then css/hero.css, then the
   page sheet, so a page can lean on the tokens and override a component
   without resorting to !important.
   ========================================================================== */

:root {
    /* Stage. The site sits on near-black; panels lift away from it in small,
       deliberate steps rather than one flat grey. */
    --uf-ink: #0a0a0b;
    --uf-ink-raised: #101016;
    --uf-ink-panel: #14141c;

    --uf-indigo: #5557e8;
    --uf-indigo-soft: #8b8dff;
    --uf-violet: #7b3fa8;
    --uf-lime: #c8f45d;
    --uf-paper: #ceced7;

    --uf-text: #f4f4f7;
    --uf-text-dim: rgba(206, 206, 215, 0.66);
    --uf-text-faint: rgba(206, 206, 215, 0.42);
    --uf-hairline: rgba(206, 206, 215, 0.14);
    --uf-hairline-soft: rgba(206, 206, 215, 0.07);

    --uf-serif: 'Fraunces', 'Times New Roman', serif;
    --uf-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Fluid rhythm, so the gap between sections scales with the viewport
       instead of stepping at a handful of breakpoints. */
    --uf-gutter: clamp(1.25rem, 4vw, 4rem);
    --uf-section: clamp(5rem, 10vw, 9rem);
    --uf-radius: 20px;
    --uf-radius-sm: 12px;

    --uf-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--uf-ink);
    color: var(--uf-text);
    font-family: var(--uf-sans);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* clip rather than hidden: a scroll container here would break the
       sticky rig the hero depends on */
    overflow-x: clip;
}

img,
video {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

::selection {
    background: var(--uf-indigo);
    color: #fff;
}

:focus-visible {
    outline: 2px solid var(--uf-indigo-soft);
    outline-offset: 3px;
    border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Typography

   Fraunces carries the display voice and Inter everything else. The italic
   second line is the brand's one flourish - used once per section, never
   twice.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
    font-family: var(--uf-serif);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--uf-text);
}

.uf-display {
    font-size: clamp(2.6rem, 6.4vw, 5.2rem);
}

.uf-display em,
.uf-h2 em,
.uf-eyebrow em {
    font-style: italic;
    color: var(--uf-indigo-soft);
}

.uf-h2 {
    font-size: clamp(2rem, 4.2vw, 3.4rem);
}

.uf-h3 {
    font-size: clamp(1.15rem, 1.7vw, 1.45rem);
    line-height: 1.2;
}

.uf-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--uf-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--uf-lime);
    margin: 0 0 1.25rem;
}

.uf-eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--uf-lime);
    box-shadow: 0 0 12px var(--uf-lime);
}

.uf-lead {
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    color: var(--uf-text-dim);
    margin: 0;
}

.uf-muted {
    color: var(--uf-text-dim);
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--uf-gutter);
}

.uf-band {
    position: relative;
    padding: var(--uf-section) 0;
    /* Glows and blooms are sized to bleed past their element; clip on the x
       axis so they cannot widen the page. clip rather than hidden, to avoid
       creating a scroll container. */
    overflow-x: clip;
}

/* A raised band separates itself with light rather than a hard edge. */
.uf-band--raised {
    background: var(--uf-ink-raised);
    border-block: 1px solid var(--uf-hairline-soft);
}

.uf-band--glow::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 50% at 50% 0%, rgba(85, 87, 232, 0.16), transparent 70%);
    pointer-events: none;
}

.section-header {
    max-width: 46rem;
    margin: 0 auto clamp(3rem, 5vw, 4.5rem);
    text-align: center;
}

.section-header .uf-eyebrow {
    justify-content: center;
}

.section-header p {
    margin: 1.1rem auto 0;
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    color: var(--uf-text-dim);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.uf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.95rem 1.7rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--uf-sans);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.3s var(--uf-ease),
                background-color 0.3s var(--uf-ease),
                border-color 0.3s var(--uf-ease),
                box-shadow 0.3s var(--uf-ease);
}

.uf-btn--primary {
    background: var(--uf-paper);
    color: #101014;
}

.uf-btn--primary:hover {
    transform: translateY(-2px);
    background: #fff;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}

.uf-btn--ghost {
    background: rgba(206, 206, 215, 0.06);
    border-color: var(--uf-hairline);
    color: var(--uf-text);
}

.uf-btn--ghost:hover {
    transform: translateY(-2px);
    background: rgba(206, 206, 215, 0.12);
    border-color: rgba(206, 206, 215, 0.28);
}

.uf-btn--accent {
    background: var(--uf-indigo);
    color: #fff;
}

.uf-btn--accent:hover {
    transform: translateY(-2px);
    background: #6668ff;
    box-shadow: 0 14px 34px rgba(85, 87, 232, 0.35);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.uf-card {
    position: relative;
    padding: clamp(1.5rem, 2.4vw, 2.1rem);
    background: var(--uf-ink-panel);
    border: 1px solid var(--uf-hairline-soft);
    border-radius: var(--uf-radius);
    transition: transform 0.4s var(--uf-ease),
                border-color 0.4s var(--uf-ease),
                background-color 0.4s var(--uf-ease);
}

.uf-card:hover {
    transform: translateY(-4px);
    border-color: var(--uf-hairline);
    background: #171720;
}

.uf-card h3 {
    margin-bottom: 0.7rem;
}

.uf-card p {
    margin: 0;
    color: var(--uf-text-dim);
    font-size: 0.95rem;
}

/* Icons read as quiet monograms, not primary-colour badges. */
.uf-card__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 1.4rem;
    border: 1px solid var(--uf-hairline);
    border-radius: 12px;
    background: rgba(85, 87, 232, 0.1);
    color: var(--uf-indigo-soft);
    font-size: 1.05rem;
}

/* A responsive row of cards, used on several pages. */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(1rem, 1.6vw, 1.5rem);
}

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: clamp(1rem, 1.8vw, 1.75rem);
    max-width: 820px;
    margin: 0 auto;
}

.pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(1.9rem, 3vw, 2.6rem);
    background: var(--uf-ink-panel);
    border: 1px solid var(--uf-hairline-soft);
    border-radius: var(--uf-radius);
    transition: transform 0.4s var(--uf-ease), border-color 0.4s var(--uf-ease);
}

.pricing-card:hover {
    transform: translateY(-4px);
    border-color: var(--uf-hairline);
}

/* The preferred plan is marked with light, not with scale - a scaled card
   knocks the grid out of alignment at every breakpoint. */
.pricing-card.popular {
    border-color: rgba(85, 87, 232, 0.5);
    background:
        radial-gradient(120% 60% at 50% 0%, rgba(85, 87, 232, 0.16), transparent 60%),
        var(--uf-ink-panel);
}

.popular-badge {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background: var(--uf-indigo);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pricing-card h3 {
    font-family: var(--uf-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--uf-text-faint);
    margin-bottom: 1.1rem;
}

.price {
    font-family: var(--uf-serif);
    font-size: clamp(2.6rem, 4vw, 3.4rem);
    line-height: 1;
    letter-spacing: -0.03em;
}

.price-period {
    margin-top: 0.5rem;
    color: var(--uf-text-dim);
    font-size: 0.9rem;
}

.savings {
    display: inline-block;
    margin-top: 0.9rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: rgba(200, 244, 93, 0.12);
    color: var(--uf-lime);
    font-size: 0.78rem;
    font-weight: 600;
}

.pricing-features {
    margin: 1.9rem 0 0;
    padding: 1.9rem 0 0;
    border-top: 1px solid var(--uf-hairline-soft);
    list-style: none;
    display: grid;
    gap: 0.85rem;
}

.pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    color: var(--uf-text-dim);
    font-size: 0.93rem;
}

.pricing-features li i {
    margin-top: 0.28rem;
    font-size: 0.7rem;
    color: var(--uf-lime);
}

.pricing-actions {
    margin-top: clamp(2.5rem, 4vw, 3.5rem);
    display: flex;
    justify-content: center;
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    padding: 1.1rem 0;
    background: transparent;
    transition: background-color 0.4s var(--uf-ease),
                padding 0.4s var(--uf-ease),
                border-color 0.4s var(--uf-ease);
    border-bottom: 1px solid transparent;
}

/* Set by js/site.js once the page has left the top of the hero.
   .navbar--solid is for non-hero pages (articles, guides) that need a
   readable dark bar from the first paint. */
.navbar.is-scrolled,
.navbar.navbar--solid {
    padding: 0.7rem 0;
    background: rgba(10, 10, 11, 0.78);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom-color: var(--uf-hairline-soft);
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--uf-gutter);
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-family: var(--uf-serif);
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--uf-text);
    text-decoration: none;
}

.logo img {
    height: 32px;
    width: auto;
    object-fit: contain;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: nowrap;
}

.nav-links > li {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.nav-links a {
    color: var(--uf-text-dim);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.3s var(--uf-ease);
}

.nav-links a:hover {
    color: var(--uf-text);
}

.nav-links a[aria-current="page"] {
    color: var(--uf-text);
    box-shadow: inset 0 -2px 0 var(--uf-indigo-soft);
}

.nav-signin {
    padding: 0.55rem 1.15rem;
    border: 1px solid var(--uf-hairline);
    border-radius: 999px;
    background: rgba(206, 206, 215, 0.06);
    color: var(--uf-text) !important;
    transition: background-color 0.3s var(--uf-ease),
                border-color 0.3s var(--uf-ease);
}

.nav-signin:hover {
    background: rgba(206, 206, 215, 0.14);
    border-color: rgba(206, 206, 215, 0.3);
}

.mobile-menu {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 4px;
    cursor: pointer;
    background: none;
    border: 0;
}

.mobile-menu span {
    width: 22px;
    height: 2px;
    background: var(--uf-text);
    transition: transform 0.3s var(--uf-ease), opacity 0.3s var(--uf-ease);
}

.mobile-menu.active span:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 5px);
}

.mobile-menu.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu.active span:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -5px);
}

.mobile-nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    margin: 0;
    padding: 0.5rem var(--uf-gutter) 1.25rem;
    list-style: none;
    background: rgba(10, 10, 11, 0.96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--uf-hairline-soft);
}

.mobile-nav-links.active {
    display: flex;
}

.mobile-nav-links a {
    display: block;
    padding: 0.85rem 0;
    color: var(--uf-text-dim);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid var(--uf-hairline-soft);
    transition: color 0.3s var(--uf-ease);
}

.mobile-nav-links a:hover {
    color: var(--uf-text);
}

.mobile-nav-links li:last-child a {
    border-bottom: none;
}

/* Language switcher ------------------------------------------------------- */

.lang-switcher {
    position: relative;
}

.lang-switcher-btn {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--uf-hairline);
    border-radius: 999px;
    background: rgba(206, 206, 215, 0.05);
    color: var(--uf-text-dim);
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.3s var(--uf-ease), border-color 0.3s var(--uf-ease);
}

.lang-switcher-btn:hover {
    color: var(--uf-text);
    border-color: rgba(206, 206, 215, 0.3);
}

.lang-dropdown {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    min-width: 190px;
    max-height: min(60vh, 340px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0.4rem;
    background: rgba(16, 16, 22, 0.97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--uf-hairline);
    border-radius: var(--uf-radius-sm);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.25s var(--uf-ease),
                transform 0.25s var(--uf-ease),
                visibility 0.25s;
}

.lang-switcher:hover .lang-dropdown,
.lang-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    color: var(--uf-text-dim);
    font-size: 0.88rem;
    cursor: pointer;
    transition: background-color 0.2s var(--uf-ease), color 0.2s var(--uf-ease);
}

.lang-option:hover,
.lang-option.active {
    background: rgba(206, 206, 215, 0.08);
    color: var(--uf-text);
}

/* Mobile controls sit beside the burger, so the language switcher stays
   reachable once the main nav collapses. */
.mobile-controls {
    display: none;
    align-items: center;
    gap: 0.75rem;
}

/* --------------------------------------------------------------------------
   Loading screen
   -------------------------------------------------------------------------- */

.loading-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--uf-ink);
    transition: opacity 0.5s var(--uf-ease), visibility 0.5s;
}

.loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
}

.loading-logo {
    width: 64px;
    height: 64px;
    margin-bottom: 1.5rem;
}

.loading-text {
    font-family: var(--uf-serif);
    font-size: 1.3rem;
    color: var(--uf-text);
}

.loading-spinner {
    width: 26px;
    height: 26px;
    margin-top: 1.5rem;
    border: 2px solid var(--uf-hairline);
    border-top-color: var(--uf-indigo-soft);
    border-radius: 50%;
    animation: uf-spin 0.9s linear infinite;
}

@keyframes uf-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .loading-spinner { animation: none; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
    padding: clamp(4rem, 7vw, 6rem) 0 2.5rem;
    background: var(--uf-ink);
    border-top: 1px solid var(--uf-hairline-soft);
}

/* Some pages wrap the footer's rows in .container and some do not, so the
   rows carry their own measure when they sit directly in the footer. */
.footer > .footer-content,
.footer > .footer-bottom {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--uf-gutter);
}

/* The first column carries the blurb; the link columns then fit themselves to
   however many a given page has, rather than leaving an empty track. */
.footer-content {
    display: grid;
    grid-template-columns: minmax(220px, 1.6fr) repeat(auto-fit, minmax(140px, 1fr));
    gap: clamp(2rem, 4vw, 3.5rem);
}

.footer-section h4 {
    margin-bottom: 1.1rem;
    font-family: var(--uf-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--uf-text-faint);
}

.footer-section > p {
    margin: 0;
    max-width: 26rem;
    color: var(--uf-text-dim);
    font-size: 0.92rem;
}

.footer-section ul {
    display: grid;
    gap: 0.7rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.support-links {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.footer-section ul li a,
.footer-section > a,
.support-links a {
    color: var(--uf-text-dim);
    font-size: 0.92rem;
    text-decoration: none;
    transition: color 0.3s var(--uf-ease);
}

/* Legacy pages link directly inside the section, without a list. */
.footer-section > a {
    display: block;
    margin-bottom: 0.6rem;
}

.footer-section ul li a:hover,
.footer-section > a:hover,
.support-links a:hover {
    color: var(--uf-text);
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: clamp(3rem, 5vw, 4.5rem);
    padding-top: 1.75rem;
    border-top: 1px solid var(--uf-hairline-soft);
    color: var(--uf-text-faint);
    font-size: 0.85rem;
}

.footer-bottom p {
    margin: 0;
}

/* --------------------------------------------------------------------------
   Scroll reveals

   Deliberately restrained: a short rise and fade, once, on first sight. The
   hero is the only place on the site that earns real choreography. Elements
   stay visible if the script never runs, so nothing depends on JavaScript.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .js-reveal [data-reveal] {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity 0.7s var(--uf-ease), transform 0.7s var(--uf-ease);
    }

    .js-reveal [data-reveal].is-visible {
        opacity: 1;
        transform: none;
    }
}

/* On touch devices the reveal choreography is nice-to-have; content is not.
   A delayed keyframe animation rescues anything the observer never reached —
   it runs by itself, so even a wedged script can't leave sections blank. */
@media (prefers-reduced-motion: no-preference) and (hover: none) {
    .js-reveal [data-reveal] {
        transform: translateY(12px);
        animation: uf-reveal-rescue 0.7s var(--uf-ease) 2.8s forwards;
    }

    .js-reveal [data-reveal].is-visible {
        animation: none;
    }
}

@keyframes uf-reveal-rescue {
    to {
        opacity: 1;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1150px) {
    .nav-links {
        gap: 1.1rem;
    }
}

@media (max-width: 1024px) {
    .nav-links {
        gap: 0.85rem;
    }

    .nav-links a {
        font-size: 0.85rem;
    }
}

@media (max-width: 900px) {
    .nav-links {
        display: none;
    }

    .mobile-menu,
    .mobile-controls {
        display: flex;
    }

    .logo {
        font-size: 1.2rem;
    }

    .logo img {
        height: 27px;
    }

    .mobile-controls .lang-switcher-btn {
        padding: 0.4rem 0.7rem;
        font-size: 0.78rem;
    }

    .mobile-controls .lang-dropdown {
        right: 0;
        min-width: 170px;
        max-height: 60vh;
    }

    .footer-content {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .footer-content {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}