/* =========================================================
   THL Marketing — x.ai design tokens (extracted via CDP)
   universalSans → Inter body · Geist display · Geist Mono
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

/* Geist — local (CDN geist@ npm path was broken → fell back to Inter with baselined 1) */
@font-face {
    font-family: "Geist Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("assets/fonts/geist-sans-400.woff2") format("woff2");
}
@font-face {
    font-family: "Geist Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("assets/fonts/geist-sans-500.woff2") format("woff2");
}
@font-face {
    font-family: "Geist Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("assets/fonts/geist-mono-400.woff2") format("woff2");
}
/* Metrics cut — digits from Universal Sans Display 400 (thin/elegant) */
@font-face {
    font-family: "Geist Metrics";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("assets/fonts/geist-metrics-500.woff2") format("woff2");
}
@font-face {
    font-family: "Geist Metrics";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("assets/fonts/geist-metrics-500.woff2") format("woff2");
}

:root {
    /* x.ai HSL palette */
    --x-jet: #0a0a0a;
    --x-charcoal: #1a1a1a;
    --x-bg: var(--x-jet);
    --x-bg-elevated: var(--x-charcoal);
    --x-bg-card: var(--x-charcoal);
    --x-fg: #ffffff;
    --x-fg-soft: #d4d7de; /* dove 222 19% 86% */
    --x-fg-mute: rgba(255, 255, 255, 0.7);
    --x-white: #ffffff;
    --x-border: #1f2228;
    --x-border-subtle: rgba(255, 255, 255, 0.06);
    --x-border-hover: rgba(255, 255, 255, 0.12);
    --x-max: 1280px;
    --x-nav-h: 64px;
    --x-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --x-font-display: "Geist Sans", "Inter", system-ui, sans-serif;
    --x-font-mono: "Geist Mono", ui-monospace, monospace;
    --x-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --x-radius: 16px;
    --x-radius-pill: 9999px;
    --x-accent-flow: linear-gradient(90deg, #3b82f6, #8b5cf6, #22d3ee, #3b82f6, #8b5cf6, #22d3ee);
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--x-nav-h) + 16px);
    -webkit-text-size-adjust: 100%;
}

html[data-theme="light"] {
    --x-bg: #fafafa;
    --x-bg-elevated: #ffffff;
    --x-bg-card: #ffffff;
    --x-fg: #18181b;
    --x-fg-soft: #52525b;
    --x-fg-mute: #71717a;
    --x-white: #0a0a0a;
    --x-border: #e4e4e7;
    --x-border-hover: #d4d4d8;
}

body.x-site {
    margin: 0;
    font-family: var(--x-font);
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: var(--x-fg);
    background: var(--x-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

body.x-site a { color: inherit; text-decoration: none; }
body.x-site a.x-btn--primary { color: var(--x-bg); }
body.x-site a.x-btn--outline,
body.x-site a.x-btn--ghost { color: var(--x-fg); }
body.x-site img { max-width: 100%; display: block; }
body.x-site button {
    font-family: inherit;
    cursor: pointer;
}

/* x.ai-style cross-document view transitions — content rises in */
@supports (view-transition-name: none) {
    @view-transition {
        navigation: auto;
    }
}

.x-nav {
    view-transition-name: thl-nav;
}

::view-transition-group(thl-nav) {
    animation: none;
    z-index: 100;
}

::view-transition-old(thl-nav) {
    animation: none;
    opacity: 0;
}

::view-transition-new(thl-nav) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    animation: x-vt-page-out 0.32s cubic-bezier(0.4, 0, 0.2, 1) both;
}

::view-transition-new(root) {
    animation: x-vt-page-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes x-vt-page-out {
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

@keyframes x-vt-page-in {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}

.x-container {
    width: min(100% - 40px, var(--x-max));
    margin-inline: auto;
}

/* ---------- Nav ---------- */
.x-nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    height: var(--x-nav-h);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s var(--x-ease), background 0.2s var(--x-ease), backdrop-filter 0.2s var(--x-ease);
}

.x-nav.is-scrolled {
    border-bottom-color: var(--x-border);
    background: color-mix(in srgb, var(--x-bg) 88%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.x-nav-inner {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 0;
}

.x-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex-shrink: 0;
    margin-right: 3.5rem;
}

.x-brand img {
    height: 42px;
    width: auto;
}

/* Logo click — plain single spin. */
.x-brand {
    cursor: pointer;
}

@keyframes x-brand-logo-spin {
    to { transform: rotate(360deg); }
}

.x-brand.is-spinning img {
    animation: x-brand-logo-spin 0.6s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .x-brand.is-spinning img { animation: none; }
}

.x-brand-text {
    font-size: 0.95rem;
    font-weight: 550;
    letter-spacing: -0.02em;
    color: var(--x-white);
}

/* Must beat body.x-site img { display: block } */
body.x-site .x-brand-logo--light { display: none; }
body.x-site .x-brand-logo--dark { display: block; }
html[data-theme="light"] body.x-site .x-brand-logo--dark { display: none; }
html[data-theme="light"] body.x-site .x-brand-logo--light { display: block; }

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

/* Beat body.x-site a { color: inherit } so Products (button) matches links */
body.x-site .x-nav-links a,
body.x-site .x-nav-links .x-nav-submenu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 6px 16px;
    border-radius: 6px;
    font-family: var(--x-font);
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    letter-spacing: normal;
    color: rgba(255, 255, 255, 0.55);
    background: none;
    border: 0;
    transition: color 0.15s var(--x-ease), background 0.15s var(--x-ease);
}

body.x-site .x-nav-links a:hover,
body.x-site .x-nav-links .x-nav-submenu-toggle:hover,
body.x-site .x-nav-item.has-submenu.is-open > .x-nav-submenu-toggle {
    color: #fff;
    background: transparent;
}

/* Light mode — nav must stay readable on pale wordmark */
html[data-theme="light"] body.x-site .x-nav-links a,
html[data-theme="light"] body.x-site .x-nav-links .x-nav-submenu-toggle {
    color: rgba(24, 24, 27, 0.62);
}

html[data-theme="light"] body.x-site .x-nav-links a:hover,
html[data-theme="light"] body.x-site .x-nav-links .x-nav-submenu-toggle:hover,
html[data-theme="light"] body.x-site .x-nav-item.has-submenu.is-open > .x-nav-submenu-toggle {
    color: #0a0a0a;
}

.x-nav-item.has-submenu { position: relative; }

.x-nav-submenu-toggle i {
    font-size: 0.6rem;
    opacity: 0.6;
}

.x-nav-submenu {
    list-style: none;
    margin: 0;
    padding: 0.35rem;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    min-width: 200px;
    background: var(--x-bg-elevated);
    border: 1px solid var(--x-border);
    border-radius: var(--x-radius);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s var(--x-ease), transform 0.18s var(--x-ease), visibility 0.18s;
    z-index: 120;
}

.x-nav-submenu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 10px;
}

.x-nav-item.has-submenu.is-open > .x-nav-submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.x-nav-submenu a {
    display: block;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    white-space: nowrap;
    font-size: 0.875rem;
}

.x-nav-submenu a:hover,
.x-nav-submenu a[aria-current="page"] {
    background: color-mix(in srgb, var(--x-white) 6%, transparent);
    color: var(--x-white);
}

.x-nav-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    flex-shrink: 0;
}

.x-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 12px 20px;
    border-radius: var(--x-radius-pill);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    border: 0;
    transition: opacity 0.15s var(--x-ease), background 0.15s var(--x-ease);
    white-space: nowrap;
}

.x-btn--ghost {
    color: var(--x-fg-soft);
    background: transparent;
}

.x-btn--ghost:hover { color: var(--x-white); }

.x-btn--primary {
    color: var(--x-bg);
    background: var(--x-white);
    border-color: var(--x-white);
}

.x-btn--primary:hover {
    opacity: 0.92;
}

.x-btn--outline {
    color: var(--x-fg);
    background: transparent;
}

.x-btn--outline:hover {
    background: color-mix(in srgb, var(--x-white) 6%, transparent);
}

.x-btn--lg {
    padding: 12px 20px;
    font-size: 14px;
}

.x-theme-toggle {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.x-theme-toggle i {
    font-size: 15px;
    line-height: 1;
}

.x-theme-toggle:hover { color: #fff; background: color-mix(in srgb, #fff 8%, transparent); }
html[data-theme="light"] .x-theme-toggle {
    color: rgba(24, 24, 27, 0.78);
}
html[data-theme="light"] .x-theme-toggle:hover {
    color: #0a0a0a;
    background: rgba(24, 24, 27, 0.08);
}

/* data-theme lives on <html>, never on <body> */
.x-theme-toggle .fa-sun { display: none; }
.x-theme-toggle .fa-moon { display: inline-block; }
html[data-theme="light"] .x-theme-toggle .fa-sun { display: inline-block; }
html[data-theme="light"] .x-theme-toggle .fa-moon { display: none; }

.x-nav-burger {
    display: none;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.x-nav-burger span {
    display: block;
    width: 18px;
    height: 1.5px;
    background: var(--x-white);
    transition: transform 0.2s var(--x-ease), opacity 0.2s;
}

/* ---------- Hero (homepage) ---------- */
.x-hero {
    min-height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 96px 0;
    position: relative;
    border-top: 0;
}

.x-hero-inner {
    max-width: 52rem;
}

.x-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 1.25rem;
    color: var(--x-fg-mute);
    font-family: var(--x-font-mono);
    font-size: 0.72rem;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.x-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.45);
    flex-shrink: 0;
}

.x-hero h1,
.x-hero h2 {
    margin: 0 0 1rem;
    font-family: var(--x-font-display);
    font-size: clamp(2.25rem, 6vw, 60px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -1.5px;
    color: var(--x-white);
}

.x-hero h1 em,
.x-hero h2 em {
    font-style: italic;
    font-weight: 400;
    color: var(--x-fg-soft);
}

/* Keep the rotating phrase always on its own (second) line, so short phrases
   like "ʿIlal Analysis" don't ride up onto the first line. */
.x-hero-h2-prefix { display: block; }

/* Rotating word ("The first AI agent for [Hadith Research / ʿIlal Analysis /
   Rijal Criticism / Fiqh al-Hadith / Orientalist Discourse]") — x.ai-style
   morph: only the token(s) that actually change blur+fade (see
   landing-x.js tickHeroRotator). Colorful flowing
   gradient underline underneath, on THL's blue accent + violet/cyan. */
.x-hero-rotate-wrap {
    position: relative;
    display: inline-block;
}

.x-hero-rotate {
    display: inline-block;
}

.x-hero-rotate-word {
    display: inline-block;
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
    transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.x-hero-rotate-word.is-out {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(-0.28em);
}

.x-hero-rotate-word.is-in {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(0.28em);
}

.x-hero-rotate-word--ar {
    font-style: italic;
}

.x-hero-rotate-bar {
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: -0.1em;
    height: 2px;
    border-radius: 2px;
    background: var(--x-accent-flow);
    background-size: 300% 100%;
    background-position: 0% 0%;
    opacity: 0.75;
    box-shadow: 0 0 6px rgba(59, 130, 246, 0.22);
    animation: x-hero-rotate-bar-flow 3s linear infinite;
}

@keyframes x-hero-rotate-bar-flow {
    from { background-position: 0% 0%; }
    to { background-position: -300% 0%; }
}

@media (prefers-reduced-motion: reduce) {
    .x-hero-rotate-word { transition: none; }
    .x-hero-rotate-bar { animation: none; }
}

.x-hero-lead {
    margin: 0 0 1.75rem;
    max-width: 42rem;
    font-size: 16px;
    line-height: 24px;
    color: var(--x-fg);
    font-weight: 400;
}

.x-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

/* ---------- Wordmark section (Hadith Agent + typing caption) ---------- */
@font-face {
    font-family: "Collapse";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("assets/fonts/Collapse-Bold.woff2") format("woff2");
}

.x-wordmark {
    position: relative;
    isolation: isolate;
    height: 100svh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(80px, 10vw, 120px) 0;
    overflow: hidden;
}

/* Soft fade into the next section — no hard seam */
.x-wordmark::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: min(28vh, 220px);
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        color-mix(in srgb, var(--x-bg) 55%, transparent) 55%,
        var(--x-bg) 100%
    );
}

.x-wordmark-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.x-wordmark-filler {
    position: absolute;
    inset: 0;
    opacity: 0.045;
    mix-blend-mode: difference;
}

.x-wordmark-filler img {
    display: block;
    width: auto;
    min-width: 100%;
    height: 160%;
    object-fit: cover;
    object-position: center 25%;
    filter: invert(1);
}

html[data-theme="light"] .x-wordmark-filler {
    opacity: 0.16;
    mix-blend-mode: multiply;
}
html[data-theme="light"] .x-wordmark-filler img {
    filter: grayscale(1) contrast(1.06) brightness(0.92);
}

.x-wordmark-noise {
    position: absolute;
    inset: 0;
    opacity: 0.11;
    mix-blend-mode: color-dodge;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    pointer-events: none;
}

.x-wordmark-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    padding-inline: clamp(20px, 5vw, 40px);
    max-width: 100%;
}

.x-wordmark-title {
    margin: 0;
    font-family: "Collapse", var(--x-font-display);
    font-weight: 700;
    font-size: clamp(2.4rem, 11vw, 9.5rem);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 0.95;
    white-space: nowrap;
    /* Match legacy landing.css --text */
    color: #dcddde;
    will-change: transform, opacity;
}

html[data-theme="light"] .x-wordmark-title {
    color: #14130f;
}

.x-wordmark-tagline {
    margin: clamp(1.4rem, 3vw, 2.4rem) 0 0;
    font-family: var(--x-font-mono);
    font-size: clamp(0.82rem, 1.8vw, 1.12rem);
    letter-spacing: 0.14em;
    /* Match legacy landing.css --text-mute */
    color: #76767c;
    line-height: 1.55;
    min-height: 3.1em;
    will-change: transform, opacity;
}

html[data-theme="light"] .x-wordmark-tagline {
    color: #7a776f;
}

.x-wordmark-filler,
.x-wordmark-noise {
    will-change: transform, opacity;
}

.x-wordmark-type {
    white-space: pre-line;
}

.x-wordmark-type::after {
    content: "";
    display: inline-block;
    width: 0.55em;
    height: 1.05em;
    margin-left: 0.1em;
    vertical-align: -0.18em;
    background: #3b82f6;
    animation: x-tagline-caret 1s steps(1) infinite;
}

.x-wordmark-type.is-typing::after {
    animation: none;
    opacity: 1;
}


@keyframes x-tagline-caret {
    50% { opacity: 0; }
}

/* Wordmark entrance on load / hard refresh — one-shot only */
.x-wordmark-title[data-enter="wordmark"] {
    opacity: 0;
    transform: translateY(28px) scale(0.985);
}

.x-wordmark-title.is-in {
    opacity: 1;
    transform: none;
}

.x-wordmark:not(.is-parallax) .x-wordmark-title[data-enter="wordmark"] {
    transition:
        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.x-wordmark-tagline {
    opacity: 0;
    transform: translateY(14px);
}

.x-wordmark-tagline.is-in {
    opacity: 1;
    transform: none;
}

.x-wordmark:not(.is-parallax) .x-wordmark-tagline {
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}

.x-wordmark-filler {
    transform: scale(1.06);
}

.x-wordmark.is-ready .x-wordmark-filler {
    transform: scale(1);
}

.x-wordmark:not(.is-parallax) .x-wordmark-filler {
    transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.2s ease;
}

/* After entrance: scroll parallax owns transform/opacity — no CSS tweening */
.x-wordmark.is-parallax .x-wordmark-title,
.x-wordmark.is-parallax .x-wordmark-tagline,
.x-wordmark.is-parallax .x-wordmark-filler,
.x-wordmark.is-parallax .x-wordmark-noise {
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .x-wordmark-title[data-enter="wordmark"],
    .x-wordmark-tagline,
    .x-wordmark-filler {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
    .x-wordmark-type::after { animation: none; }
}

@media (max-width: 640px) {
    .x-wordmark-title {
        white-space: normal;
        font-size: clamp(2.4rem, 14vw, 4rem);
        letter-spacing: 0.03em;
    }
}

/* ---------- Provider logo marquee ---------- */
.x-providers-section {
    border-top: 0;
    position: relative;
}

.x-providers-section::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--x-fg) 12%, transparent) 50%,
        transparent 100%
    );
    pointer-events: none;
}

.x-providers {
    margin: 0;
    padding: 5.5rem 0 6rem;
}

.x-providers-label {
    margin: 0 0 2.75rem;
    padding-inline: 20px;
    font-family: var(--x-font-mono);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--x-fg-mute);
    text-align: center;
}

.x-providers-marquee {
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Visible edge fades (more reliable than CSS mask) */
.x-providers-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(72px, 14vw, 160px);
    z-index: 2;
    pointer-events: none;
}
.x-providers-fade--left {
    left: 0;
    background: linear-gradient(90deg, var(--x-bg) 0%, transparent 100%);
}
.x-providers-fade--right {
    right: 0;
    background: linear-gradient(270deg, var(--x-bg) 0%, transparent 100%);
}

.x-providers-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    width: max-content;
    animation: x-providers-marquee 36s linear infinite;
    will-change: transform;
}

.x-providers-marquee:hover .x-providers-track {
    animation-play-state: paused;
}

/* 4 identical groups → shift by exactly 25% = one group width */
@keyframes x-providers-marquee {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-25%, 0, 0); }
}

.x-providers-group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5.5rem;
    padding-inline: 2.75rem;
    flex: none;
}

.x-provider {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    flex: none;
    margin: 0;
    padding: 0;
    color: var(--x-fg-mute);
    font-size: 1.25rem;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.2s var(--x-ease);
}

.x-provider:hover { color: var(--x-fg-soft); }

.x-provider-mark {
    width: 48px;
    height: 48px;
    flex: none;
    background: currentColor;
    opacity: 0.92;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.x-pm-anthropic { -webkit-mask-image: url(assets/logos/anthropic.svg); mask-image: url(assets/logos/anthropic.svg); }
.x-pm-openai { -webkit-mask-image: url(assets/logos/openai.svg); mask-image: url(assets/logos/openai.svg); }
.x-pm-gemini { -webkit-mask-image: url(assets/logos/googlegemini.svg); mask-image: url(assets/logos/googlegemini.svg); }
.x-pm-deepseek { -webkit-mask-image: url(assets/logos/deepseek.svg); mask-image: url(assets/logos/deepseek.svg); }
.x-pm-grok { -webkit-mask-image: url(assets/logos/grok.svg); mask-image: url(assets/logos/grok.svg); }

@media (prefers-reduced-motion: reduce) {
    .x-providers-track { animation: none; }
    .x-providers-marquee { overflow-x: auto; }
}

/* ── MCP introduction + supported clients ── */
.x-mcp { margin: 0; padding: 7.5rem 20px 3.75rem; }
.x-mcp-bridge {
    width: min(100%, 1120px);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(48px, 6vw, 92px);
}
.x-mcp-message {
    max-width: 430px;
    flex: 1 1 380px;
}
.x-mcp-message .x-providers-label {
    margin: 0 0 1.2rem;
    padding: 0;
    text-align: left;
}
.x-mcp-heading {
    margin: 0;
    font-family: var(--x-font-display);
    font-size: clamp(1.7rem, 2.4vw, 2.1rem);
    line-height: 1.1;
    font-weight: 500;
    letter-spacing: -0.035em;
    white-space: nowrap;
}
.x-mcp-description {
    max-width: 390px;
    margin: 0.9rem 0 0;
    color: var(--x-fg-mute);
    font-size: 1rem;
    line-height: 1.55;
}
.x-mcp-row {
    flex: none;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(24px, 3vw, 44px);
}
.x-mcp-client {
    width: 92px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}
/* no box — the logo stands on its own */
.x-mcp-chip { display: grid; place-items: center; }
.x-mcp-chip .x-provider-mark {
    width: 72px;
    height: 72px;
    opacity: 1;
}
.x-gemini-spark-mark { width: 72px; height: 72px; object-fit: contain; }
.x-mcp-nm { font-size: 0.98rem; font-weight: 550; color: var(--x-fg-mute); white-space: nowrap; }
.x-mcp-client--gemini { width: 108px; }
.x-mcp-badge {
    font-family: var(--x-font-mono); font-size: 0.6rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--x-fg-mute); border: 1px solid var(--x-border); border-radius: var(--x-radius-pill);
    padding: 2px 8px; margin-top: -2px; white-space: nowrap;
}
.x-pm-claude {
    color: #d97757;
    -webkit-mask-image: url(assets/logos/claude.svg);
    mask-image: url(assets/logos/claude.svg);
}
.x-pm-chatgpt {
    color: #fff;
    -webkit-mask-image: url(assets/logos/openai.svg);
    mask-image: url(assets/logos/openai.svg);
}
.x-pm-manus {
    color: #fff;
    -webkit-mask-image: url(assets/logos/manus.svg);
    mask-image: url(assets/logos/manus.svg);
}
.x-pm-gemini {
    background: linear-gradient(135deg, #ea4335 0%, #fbbc04 31%, #34a853 60%, #4285f4 100%);
}
html[data-theme="light"] .x-pm-chatgpt,
html[data-theme="light"] .x-pm-manus { color: #111; }
@media (max-width: 700px) {
    .x-mcp { padding: 4.25rem 14px 4.5rem; }
    .x-mcp-bridge {
        flex-direction: column;
        align-items: stretch;
        gap: 2.75rem;
    }
    .x-mcp-message {
        max-width: 360px;
        margin-inline: auto;
        flex: none;
        text-align: center;
    }
    .x-mcp-message .x-providers-label { text-align: center; }
    .x-mcp-heading { font-size: 1.55rem; }
    .x-mcp-description {
        max-width: 330px;
        margin-inline: auto;
        font-size: 0.95rem;
    }
    .x-mcp-row {
        width: 100%;
        gap: clamp(8px, 3vw, 16px);
    }
    .x-mcp-client { width: 72px; }
    .x-mcp-client--gemini { width: 96px; }
    .x-mcp-chip .x-provider-mark,
    .x-gemini-spark-mark { width: 56px; height: 56px; }
    .x-mcp-nm { font-size: 0.9rem; }
    .x-mcp-badge { font-size: 0.5rem; padding-inline: 6px; }
}

/* ---------- Metrics strip (x.ai-style) ---------- */
.x-metrics {
    position: relative;
    min-height: 68vh;
    display: flex;
    align-items: center;
    padding: 72px 0;
    border-top: 0;
    overflow: hidden;
}


.x-metrics-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 96px 96px;
    mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 20%, transparent 75%);
}

/* Thin gradient streaks "racing" left-to-right — same blue/violet/cyan
   as the hero rotate-bar underline, much fainter and thinner (1px, low
   opacity) so they read as ambient motion, not a UI element. `top` is
   pinned to exact multiples of .x-metrics-grid's 96px row height (both
   are inset:0 on the same .x-metrics origin) so each streak runs right
   along a real grid line, not just near one. Different duration/delay
   per line so they never sync. */
.x-metrics-races {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 20%, transparent 75%);
}

.x-metrics-race-line {
    position: absolute;
    left: -25%;
    width: 22%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #3b82f6, #8b5cf6, #22d3ee, transparent);
    opacity: 0.35;
    animation: x-metrics-race linear infinite;
}

.x-metrics-race-line:nth-child(1) { top: 96px; animation-duration: 2.1s; animation-delay: 0s; }
.x-metrics-race-line:nth-child(2) { top: 192px; animation-duration: 2.9s; animation-delay: 0.5s; }
.x-metrics-race-line:nth-child(3) { top: 288px; animation-duration: 1.8s; animation-delay: 1.1s; }
.x-metrics-race-line:nth-child(4) { top: 384px; animation-duration: 2.5s; animation-delay: 0.3s; }

@keyframes x-metrics-race {
    from { transform: translateX(0); }
    to { transform: translateX(550%); }
}

@media (prefers-reduced-motion: reduce) {
    .x-metrics-race-line { animation: none; opacity: 0; }
}

.x-metrics-inner {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    text-align: center;
    align-items: start;
    justify-items: center;
}

.x-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    max-width: 16rem;
}

.x-metric-value {
    margin: 0;
    font-family: "Geist Metrics", "Geist Sans", var(--x-font-display);
    font-size: clamp(3rem, 6.5vw, 5.5rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.045em;
    color: var(--x-white);
    display: flex;
    justify-content: center;
    font-variant-numeric: normal;
    font-feature-settings: normal;
    white-space: nowrap;
}

/* Number-flow — one baseline, digits + suffix sebaris */
.x-flow {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    height: 1em;
    line-height: 1;
    overflow: hidden;
}

.x-flow-digit {
    position: relative;
    display: block;
    flex: none;
    width: 0.6em;
    height: 1em;
    overflow: hidden;
}

.x-flow-num {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1em;
    line-height: 1;
    text-align: center;
    transform: translate3d(0, calc((var(--n) - var(--current, 0)) * 1em), 0);
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.x-flow-suffix {
    display: block;
    flex: none;
    height: 1em;
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    .x-flow-num { transition: none; }
}

.x-metric-label {
    margin: 0;
    max-width: 16rem;
    font-size: 1.05rem;
    line-height: 1.4;
    color: var(--x-fg-mute);
    text-wrap: balance;
}

@media (max-width: 760px) {
    .x-metrics { padding: 56px 0; }
    .x-metrics-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .x-metric-label { max-width: 20rem; }
}

/* ---------- Question ticker (4 alternating tiers) ---------- */
.x-ticker {
    position: relative;
    padding: 8px 0 96px;
    overflow: hidden;
}

.x-ticker-head,
.x-ticker-rows {
    position: relative;
    z-index: 1;
}

.x-ticker-head {
    text-align: center;
    margin-bottom: 40px;
}

.x-ticker-eyebrow {
    margin: 0 0 0.9rem;
    color: var(--x-fg-mute);
    font-family: var(--x-font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.x-ticker-title {
    margin: 0 auto;
    max-width: 42rem;
    font-family: var(--x-font-display);
    font-size: clamp(1.5rem, 3.4vw, 2.15rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: var(--x-white);
    text-wrap: balance;
}

.x-ticker-rows {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.x-ticker-row {
    position: relative;
    display: flex;
    overflow: hidden;
    width: 100%;
}

.x-ticker-track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    animation: x-ticker-scroll linear infinite;
    will-change: transform;
}

/* Two identical groups per track → shift by exactly one group (50%). */
@keyframes x-ticker-scroll {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

/* Odd tiers travel right → left; even tiers travel left → right.
   Speeds vary per tier so the rows never lock into a visible column. */
.x-ticker-row:nth-child(1) .x-ticker-track { animation-duration: 64s; }
.x-ticker-row:nth-child(2) .x-ticker-track { animation-duration: 78s; animation-direction: reverse; }
.x-ticker-row:nth-child(3) .x-ticker-track { animation-duration: 70s; }
.x-ticker-row:nth-child(4) .x-ticker-track { animation-duration: 84s; animation-direction: reverse; }

.x-ticker-row:hover .x-ticker-track {
    animation-play-state: paused;
}

.x-ticker-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.85rem;
    padding-inline: 0.425rem;
    flex: none;
}

/* Frosted-glass pill — translucent, blurs whatever passes behind it
   (the ambient glow on .x-ticker::before), with a soft inset highlight. */
.x-ticker-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    flex: none;
    height: 2.625rem;
    padding: 0 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--x-radius-pill);
    background: rgba(255, 255, 255, 0.055);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 4px 20px rgba(0, 0, 0, 0.22);
    color: var(--x-fg-soft);
    font-size: 0.98rem;
    line-height: 1;
    white-space: nowrap;
    transition: border-color 0.2s var(--x-ease), color 0.2s var(--x-ease),
        background-color 0.2s var(--x-ease), transform 0.2s var(--x-ease);
}

.x-ticker-chip:hover {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.1);
    color: var(--x-white);
    transform: translateY(-1px);
}

html[data-theme="light"] .x-ticker-chip {
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 4px 18px rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .x-ticker-chip:hover {
    border-color: rgba(0, 0, 0, 0.16);
    background: rgba(255, 255, 255, 0.78);
}

.x-ticker-chip-dot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: currentColor;
}

/* Language-coded dot — matches the hero gradient trio. */
.x-ticker-chip--en .x-ticker-chip-dot { background: #3b82f6; box-shadow: 0 0 8px rgba(59, 130, 246, 0.6); }
.x-ticker-chip--ms .x-ticker-chip-dot { background: #8b5cf6; box-shadow: 0 0 8px rgba(139, 92, 246, 0.6); }
.x-ticker-chip--ar .x-ticker-chip-dot { background: #22d3ee; box-shadow: 0 0 8px rgba(34, 211, 238, 0.6); }

.x-ticker-chip-text { display: inline-block; }

.x-ticker-chip--ar .x-ticker-chip-text {
    font-family: "Amiri", "Noto Naskh Arabic", var(--x-font);
    font-size: 1.18rem;
    line-height: 1.2;
}

/* Section-wide edge fades over all four tiers. */
.x-ticker-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(64px, 12vw, 180px);
    z-index: 2;
    pointer-events: none;
}

.x-ticker-fade--left {
    left: 0;
    background: linear-gradient(90deg, var(--x-bg) 8%, transparent 100%);
}

.x-ticker-fade--right {
    right: 0;
    background: linear-gradient(270deg, var(--x-bg) 8%, transparent 100%);
}

.x-ticker-cta {
    position: relative;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 48px;
}

@media (max-width: 760px) {
    .x-ticker { padding-bottom: 72px; }
    .x-ticker-rows { gap: 1.1rem; }
    .x-ticker-group { gap: 2.25rem; padding-inline: 1.125rem; }
    .x-ticker-chip { font-size: 0.95rem; }
    .x-ticker-chip--ar .x-ticker-chip-text { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
    .x-ticker-track { animation: none; }
    .x-ticker-row {
        overflow-x: auto;
        scrollbar-width: none;
    }
    .x-ticker-row::-webkit-scrollbar { display: none; }
    /* One static group is enough when not scrolling. */
    .x-ticker-track > .x-ticker-group:nth-child(2) { display: none; }
}

/* ---------- Detail page shell ---------- */
.x-page-main {
    padding-top: var(--x-nav-h);
}

.x-page-hero {
    padding: 64px 0 48px;
    border-bottom: 1px solid var(--x-border);
}

.x-page-hero h1 {
    margin: 0 0 0.75rem;
    font-family: var(--x-font-display);
    font-size: clamp(2rem, 4vw, 60px);
    font-weight: 500;
    letter-spacing: -1.5px;
    line-height: 1.05;
    color: var(--x-white);
}

.x-page-hero p {
    margin: 0;
    max-width: 40rem;
    font-size: 16px;
    line-height: 24px;
    color: var(--x-fg);
}

.x-page-content {
    padding: 48px 0 80px;
}

.x-page-content .section,
.x-page-content section {
    padding: 48px 0;
}

/* Dark-theme overrides when landing.css sections used inside x-page */
body.x-site[data-theme="dark"] .section,
body.x-site:not([data-theme="light"]) .x-page-content {
    --bg: var(--x-bg);
    --bg-alt: var(--x-bg-elevated);
    --surface: var(--x-bg-elevated);
    --text: var(--x-fg);
    --text-soft: var(--x-fg-soft);
    --text-mute: var(--x-fg-mute);
    --border: var(--x-border);
}

/* ---------- Footer ---------- */
.x-footer {
    padding: 48px 0 32px;
}

.x-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 2.5rem;
    margin-bottom: 2.5rem;
}

.x-footer-brand p {
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--x-fg-mute);
    max-width: 22rem;
}

.x-footer-col h4 {
    margin: 0 0 0.85rem;
    font-size: 0.8125rem;
    font-weight: 550;
    color: var(--x-white);
}

.x-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.x-footer-col li { margin-bottom: 0.45rem; }

.x-footer-col a {
    font-size: 0.875rem;
    color: var(--x-fg-mute);
    transition: color 0.15s;
}

.x-footer-col a:hover { color: var(--x-white); }

.x-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--x-border);
    font-size: 0.8125rem;
    color: var(--x-fg-mute);
}

.x-lang-switch {
    display: flex;
    gap: 0.25rem;
}

.x-lang-btn {
    padding: 0.3rem 0.55rem;
    border-radius: 6px;
    border: 0;
    background: transparent;
    color: var(--x-fg-mute);
    font-size: 0.75rem;
}

.x-lang-btn.is-active,
.x-lang-btn:hover {
    color: var(--x-white);
    background: color-mix(in srgb, var(--x-white) 6%, transparent);
}

/* Footer — SATU paparan bahasa (kitar EN→MS→AR bila klik), ganti 3 butang. */
.x-lang-cycle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    appearance: none;
    cursor: pointer;
    border: 1px solid var(--x-border);
    border-radius: 999px;
    background: transparent;
    color: var(--x-fg-mute);
    font-family: var(--x-font);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 6px 13px;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.x-lang-cycle:hover {
    color: var(--x-white);
    border-color: var(--x-border-hover);
    background: color-mix(in srgb, var(--x-white) 6%, transparent);
}

.x-lang-cycle-globe {
    opacity: 0.75;
}

.x-lang-cycle-code {
    min-width: 1.4em;
    text-align: center;
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
    .x-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
    .x-nav-burger { display: flex; }
    .x-nav-links {
        position: fixed;
        inset: var(--x-nav-h) 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-left: 0;
        padding: 0.5rem 0;
        background: var(--x-bg);
        border-bottom: 1px solid var(--x-border);
        transform: translateY(-120%);
        transition: transform 0.3s var(--x-ease);
    }
    .x-nav-links.is-open { transform: translateY(0); }
    .x-nav-links > li { width: 100%; }
    .x-nav-links a,
    .x-nav-submenu-toggle {
        width: 100%;
        justify-content: space-between;
        padding: 0.9rem 20px;
        border-radius: 0;
    }
    .x-nav-submenu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        display: none;
        border: 0;
        box-shadow: none;
        background: var(--x-bg-elevated);
        border-radius: 0;
        padding: 0;
    }
    .x-nav-item.has-submenu.is-open > .x-nav-submenu { display: block; }
    .x-nav-submenu a { padding: 0.75rem 20px 0.75rem 2rem; border-radius: 0; }
    .x-footer-grid { grid-template-columns: 1fr; }
}

/* ---------- Nav auth (nav-auth.js) ---------- */
.x-nav-actions .nav-signin {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.65);
    padding: 0.45rem 0.65rem;
}
.x-nav-actions .nav-signin:hover { color: var(--x-white); }
html[data-theme="light"] .x-nav-actions .nav-signin {
    color: rgba(24, 24, 27, 0.7);
}
html[data-theme="light"] .x-nav-actions .nav-signin:hover {
    color: #0a0a0a;
}
.x-nav-actions .x-nav-auth-cta,
.x-nav-actions .btn.btn-primary {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    border-radius: var(--x-radius-pill);
    background: var(--x-white);
    color: var(--x-bg);
    border: 0;
}

.x-nav-actions .nav-signin { display: none; }
.x-nav-actions .nav-auth-user { position: relative; }
.x-nav-actions .nav-auth-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.5rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--x-fg-soft);
    font-size: 0.8125rem;
}
.x-nav-actions .nav-auth-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 200px;
    background: var(--x-bg-elevated);
    border: 1px solid var(--x-border);
    border-radius: var(--x-radius);
    padding: 0.35rem;
    box-shadow: 0 16px 48px rgba(0,0,0,0.45);
    z-index: 200;
}
.x-nav-actions .nav-auth-menu a,
.x-nav-actions .nav-auth-menu button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--x-fg);
    font-size: 0.875rem;
    text-align: left;
}
.x-nav-actions .nav-auth-menu a:hover,
.x-nav-actions .nav-auth-menu button:hover {
    background: color-mix(in srgb, var(--x-white) 6%, transparent);
}

/* ---------- Detail pages: landing.css sections on x canvas ---------- */
body.x-site .x-page-content {
    background: var(--x-bg);
}
body.x-site .x-page-content .section,
body.x-site .x-page-content .product,
body.x-site .x-page-content .madar-showcase {
    background: transparent;
    color: var(--x-fg);
}
body.x-site .x-page-content .container {
    width: min(100% - 40px, var(--x-max));
    margin-inline: auto;
}
body.x-site .x-page-content .section-title,
body.x-site .x-page-content h2,
body.x-site .x-page-content h3 {
    color: var(--x-white);
}
body.x-site .x-page-content .section-sub,
body.x-site .x-page-content p,
body.x-site .x-page-content .lead {
    color: var(--x-fg-soft);
}
body.x-site .x-page-content .eyebrow {
    color: var(--x-fg-mute);
}
body.x-site .x-page-content .btn-primary {
    background: var(--x-white);
    color: var(--x-bg);
    border-color: var(--x-white);
}
body.x-site .x-page-content .btn-secondary {
    border-color: var(--x-border);
    color: var(--x-white);
    background: transparent;
}
body.x-site .x-page-content .price-card,
body.x-site .x-page-content .cap-card,
body.x-site .x-page-content .result-card,
body.x-site .x-page-content .feature-block,
body.x-site .x-page-content .app-window {
    background: var(--x-bg-card);
    border-color: var(--x-border);
}
body.x-site .x-page-content .faq-item {
    border-color: var(--x-border);
}
body.x-site .x-page-content .hero-backdrop { display: none; }
body.x-site .x-page-content .overview-section { background: transparent; }

/* Trim duplicate intros on detail pages */
body.x-site .x-page-content .product-head,
body.x-site .x-page-content #product .section-head.product-head {
    display: none;
}
body.x-site .x-page-content .overview-section .lead {
    font-size: 16px;
    line-height: 24px;
    max-width: 42rem;
}
body.x-site .x-page-content .section-sub {
    max-width: 40rem;
}

/* Hero + page entrance — rise-up like x.ai */
@keyframes x-fade-up {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}
.x-hero [data-reveal-hero] {
    animation: x-fade-up 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.x-hero [data-reveal-hero][data-reveal-delay="60"] { animation-delay: 60ms; }
.x-hero [data-reveal-hero][data-reveal-delay="120"] { animation-delay: 120ms; }
.x-hero [data-reveal-hero][data-reveal-delay="180"] { animation-delay: 180ms; }
.x-hero [data-reveal-hero][data-reveal-delay="240"] { animation-delay: 240ms; }

.x-page-hero .x-container > * {
    animation: x-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.x-page-hero .x-container > *:nth-child(1) { animation-delay: 40ms; }
.x-page-hero .x-container > *:nth-child(2) { animation-delay: 100ms; }
.x-page-hero .x-container > *:nth-child(3) { animation-delay: 160ms; }

.x-page-content > .section:first-of-type,
.x-page-content > section:first-of-type {
    animation: x-fade-up 0.75s cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
}

@media (prefers-reduced-motion: reduce) {
    .x-hero [data-reveal-hero],
    .x-page-hero .x-container > *,
    .x-page-content > .section:first-of-type,
    .x-page-content > section:first-of-type {
        animation: none;
        opacity: 1;
        transform: none;
    }
}