/* Homepage — product-led layout, light and dark.
   Scoped to body.rlx. The hero and closing CTA are always dark "sky" bands,
   so they re-declare the dark tokens locally; everything else follows
   html[data-theme] (set by assets/js/rl-theme.js). */

.rlx,
.rlx-hero,
.rlx-cta,
html[data-theme="dark"] .rlx {
    --rlx-bg: #050608;
    --rlx-surface: #111317;
    --rlx-surface-2: #181b21;
    --rlx-line: rgba(255, 255, 255, .09);
    --rlx-text: #f4f6f8;
    --rlx-muted: rgba(244, 246, 248, .62);
    --rlx-faint: rgba(244, 246, 248, .42);
    --rlx-accent: #4DA8DA;
    --rlx-btn-bg: #fff;
    --rlx-btn-fg: #0a0b0d;
    --rlx-btn-hover: #dfe7ee;
    --rlx-ghost-line: rgba(255, 255, 255, .22);
    --rlx-ghost-bg: rgba(255, 255, 255, .04);
    --rlx-logo-filter: brightness(0) invert(1);
}
html[data-theme="light"] .rlx {
    --rlx-bg: #ffffff;
    --rlx-surface: #F5F7FA;
    --rlx-surface-2: #edf1f5;
    --rlx-line: rgba(15, 23, 42, .08);
    --rlx-text: #0f172a;
    --rlx-muted: rgba(15, 23, 42, .64);
    --rlx-faint: rgba(15, 23, 42, .45);
    --rlx-accent: #063F5B;
    --rlx-btn-bg: #0f172a;
    --rlx-btn-fg: #fff;
    --rlx-btn-hover: #063F5B;
    --rlx-ghost-line: rgba(15, 23, 42, .2);
    --rlx-ghost-bg: transparent;
    --rlx-logo-filter: brightness(0);
}
.rlx, .rlx-hero, .rlx-cta { color: var(--rlx-text); }
/* the page colour the hero/CTA skies fade into (not re-declared inside them) */
.rlx { --rlx-page-bg: #050608; }
html[data-theme="light"] .rlx { --rlx-page-bg: #ffffff; }
.rlx {
    background: var(--rlx-bg);
    font-family: 'DM Sans', system-ui, sans-serif;
}

.rlx main { overflow-x: clip; }
.rlx h1, .rlx h2, .rlx h3, .rlx h4 { color: var(--rlx-text); font-weight: 500; letter-spacing: -.02em; }
.rlx a { text-decoration: none; }
.rlx-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Header and footer theming comes from rl-theme-dark.css. */

/* ---- Buttons ------------------------------------------------------------ */
.rlx-btn {
    display: inline-flex; align-items: center; gap: .45em;
    padding: .62em 1.15em; border-radius: 999px;
    font-size: .9rem; font-weight: 500; line-height: 1;
    border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s;
}
.rlx-btn--light { background: var(--rlx-btn-bg); color: var(--rlx-btn-fg) !important; }
.rlx-btn--light:hover { background: var(--rlx-btn-hover); }
.rlx-btn--ghost { color: var(--rlx-text) !important; border-color: var(--rlx-ghost-line); background: var(--rlx-ghost-bg); }
.rlx-btn--ghost:hover { border-color: var(--rlx-muted); }
.rlx-btn--block { width: 100%; justify-content: center; }
.rlx-btn .arrow { font-size: .85em; opacity: .7; }

.rlx-link { color: var(--rlx-text) !important; font-size: .9rem; }
.rlx-link:hover { color: var(--rlx-accent) !important; }

/* ---- Section heads ------------------------------------------------------ */
.rlx-section { padding: 120px 0 0; }
.rlx-head { text-align: center; max-width: 620px; margin: 0 auto 56px; }
.rlx-head h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); margin-bottom: .5rem; }
.rlx-head p { color: var(--rlx-muted); font-size: 1rem; margin-bottom: 1.25rem; }

/* ---- Hero --------------------------------------------------------------- */
.rlx-hero { position: relative; padding: 150px 0 0; text-align: center; isolation: isolate; }
.rlx-hero::before {
    content: ""; position: absolute; inset: -80px 0 18% 0; z-index: -1;
    background:
        radial-gradient(60% 55% at 72% 8%, rgba(77, 168, 218, .75), transparent 70%),
        radial-gradient(55% 60% at 18% 0%, rgba(43, 95, 217, .8), transparent 72%),
        radial-gradient(70% 60% at 50% 40%, rgba(11, 122, 143, .45), transparent 75%),
        linear-gradient(180deg, #0c2a4a 0%, #071628 55%, var(--rlx-page-bg) 100%);
}
.rlx-hero::after {
    /* soft light streaks, like a long-exposure sky */
    content: ""; position: absolute; inset: -80px 0 30% 0; z-index: -1; opacity: .35;
    background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .0) 0 38px, rgba(255, 255, 255, .06) 38px 40px);
    mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.rlx-hero__mark {
    width: 64px; height: 64px; margin: 0 auto 40px; border-radius: 18px;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
}
.rlx-hero__mark img { width: 34px; height: 34px; filter: brightness(0) invert(1); }
.rlx-hero h1 { font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1.1; margin-bottom: 1.5rem; }
.rlx-hero__lead { color: rgba(255, 255, 255, .82); max-width: 600px; margin: 0 auto 2.25rem; font-size: 1.3rem; }
.rlx-hero__ctas { display: flex; flex-direction: column; align-items: center; gap: 14px; }
/* small secondary link under the main button */
.rlx-hero .rlx-hero__sub { font-size: .85rem; color: rgba(255, 255, 255, .72); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .3); }
.rlx-hero .rlx-hero__sub:hover { color: #fff; text-decoration-color: #fff; }
.rlx-hero__sub .arrow { font-size: .9em; }

.rlx-trusted { margin-top: 80px; }
.rlx-trusted__label { font-size: 1rem; color: rgba(255, 255, 255, .72); margin-bottom: 28px; }

/* Logo strip: a continuous carousel. The track holds two identical groups
   and slides left by exactly one group (-50%) on a linear loop, so the
   restart is invisible; the edges fade out. */
.rlx-logos {
    position: relative; max-width: 1160px; margin: 0 auto; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.rlx-logos__track { display: flex; width: max-content; animation: rlx-logo-glide 45s linear infinite; }
.rlx-logos:hover .rlx-logos__track { animation-play-state: paused; }
.rlx-logos__group { display: flex; }
.rlx-logo { flex: 0 0 auto; height: 64px; padding: 0 44px; display: grid; place-items: center; }
@keyframes rlx-logo-glide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .rlx-logos { -webkit-mask-image: none; mask-image: none; }
    .rlx-logos__track { animation: none; width: auto; justify-content: center; flex-wrap: wrap; }
    .rlx-logos__group[aria-hidden] { display: none; }
    .rlx-logos__group { flex-wrap: wrap; justify-content: center; }
}
.rlx-logos img { height: 32px; width: auto; max-width: 136px; object-fit: contain; filter: var(--rlx-logo-filter); opacity: .92; }
/* stacked marks (wordmark under an emblem) need more height to read */
.rlx-logos img.tall { height: 52px; }
/* SVGs with built-in whitespace around the wordmark */
.rlx-logos img.padded { height: 46px; max-width: 150px; }

/* Product demo deck (Agent / Code / CLI). Component styles live in rli.css
   and assume a light page; the hero is always a dark sky, so pin the
   --rl-dev-* palette and restyle the light-page tabs here in both themes.
   --rl-dev-ink is the chat/code panels' *background* — keep it dark navy
   (the site dark theme maps it to light text colour). */
.rlx-deck {
    --rl-dev-ink: #0B0F19;
    --rl-dev-ink-2: #1F2533;
    --rl-dev-muted: rgba(244, 246, 248, .62);
    --rl-dev-line: rgba(255, 255, 255, .14);
    --rl-dev-accent: #4DA8DA;
    --rl-dev-accent-soft: rgba(77, 168, 218, .16);
    margin: 72px auto 0; max-width: 1160px; text-align: left;
}
.rlx-deck .rl-tab-row { justify-content: center; }
.rlx-deck .rl-visual-tabs { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); }
.rlx-deck .rl-visual-tabs button { color: rgba(255, 255, 255, .7); }
.rlx-deck .rl-visual-tabs button:hover { color: #fff; }
.rlx-deck .rl-visual-tabs button.active { background: #fff; color: #0a0b0d; }
.rlx-deck .rl-tab-link { border-color: rgba(77, 168, 218, .35); }
.rlx-deck .rl-chat-panel,
.rlx-deck .rl-dev-visual { box-shadow: 0 40px 120px rgba(0, 0, 0, .6); }

/* ---- Get started tiers -------------------------------------------------- */
.rlx-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.rlx-tier { display: flex; flex-direction: column; }
.rlx-tier h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.rlx-tier p { color: var(--rlx-muted); font-size: .9rem; min-height: 4.2em; margin-bottom: 1.4rem; }
.rlx-tier__price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 1.1rem; margin-top: auto; }
.rlx-tier__price .num { font-size: 2.1rem; font-weight: 500; letter-spacing: -.02em; }
.rlx-tier__price .unit { color: var(--rlx-faint); font-size: .8rem; line-height: 1.2; }
.rlx-tiers__note { margin-top: 28px; color: var(--rlx-faint); font-size: .82rem; }
.rlx-tiers__note a { color: var(--rlx-muted) !important; text-decoration: underline; }

/* ---- Alternating feature rows ------------------------------------------ */
.rlx-features { display: flex; flex-direction: column; gap: 96px; }
.rlx-feature { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
.rlx-feature--flip { grid-template-columns: 7fr 5fr; }
.rlx-feature--flip .rlx-feature__copy { order: 2; }
.rlx-feature__copy h3 { font-size: 1.25rem; margin-bottom: .6rem; max-width: 16em; }
.rlx-feature__copy p { color: var(--rlx-muted); font-size: .93rem; max-width: 30em; }
.rlx-feature__copy .rlx-link { display: inline-block; margin-top: .4rem; }

.rlx-stage {
    position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 10.5;
    padding: 9% 0 0 9%;
    background:
        radial-gradient(90% 90% at 100% 0%, rgba(77, 168, 218, .95), transparent 60%),
        radial-gradient(80% 90% at 0% 100%, rgba(43, 95, 217, .85), transparent 65%),
        linear-gradient(135deg, #0b3d63, #0e6d8a);
}
.rlx-stage--right { padding: 9% 9% 0 0; }
.rlx-stage--center { padding: 7% 7% 0; }
.rlx-stage img.shot {
    display: block; width: 100%; height: auto; border-radius: 10px 0 0 0;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .18);
}
.rlx-stage--right img.shot { border-radius: 0 10px 0 0; }
.rlx-stage--center img.shot { border-radius: 10px 10px 0 0; }
.rlx-stage--phone { display: flex; justify-content: center; padding: 5% 0; }
/* the product shot already includes the handset bezel */
.rlx-phone { display: block; height: 100%; width: auto; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .55)); }

/* ---- Integrations ------------------------------------------------------- */
.rlx-integrations { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; }
.rlx-int {
    width: 132px; padding: 18px 10px 14px; border-radius: 14px; text-align: center;
    background: var(--rlx-surface); border: 1px solid var(--rlx-line);
    color: var(--rlx-muted); font-size: .8rem;
}
/* Font Awesome swaps each <i> for an <svg class="svg-inline--fa"> */
.rlx-int .svg-inline--fa, .rlx-int i, .rlx-int .glyph { display: block; font-size: 1.75rem; height: 2rem; width: auto; margin: 0 auto 10px; color: var(--rlx-text); }
.rlx-int .glyph { font-weight: 700; font-size: 1.35rem; line-height: 2rem; letter-spacing: -.03em; }
.rlx-int .c-python { color: #ffd343; } .rlx-int .c-node { color: #5fa04e; }
.rlx-int .c-go { color: #00add8; } .rlx-int .c-gitlab { color: #fc6d26; } .rlx-int .c-accent { color: var(--rlx-accent); }

/* ---- Everywhere cards --------------------------------------------------- */
.rlx-surfaces { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rlx-surface { background: var(--rlx-surface); border: 1px solid var(--rlx-line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; }
.rlx-surface__media {
    position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; margin-bottom: 14px;
    background:
        radial-gradient(90% 90% at 100% 0%, rgba(77, 168, 218, .9), transparent 60%),
        linear-gradient(135deg, #0b3d63, #12324f);
}
.rlx-surface__media img { position: absolute; left: 14%; top: 14%; width: 100%; border-radius: 6px 0 0 0; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.rlx-surface__media img.phone { left: 50%; transform: translateX(-50%); width: 42%; top: 12%; border-radius: 12px; border: 3px solid #0d0e10; }
.rlx-surface__media pre {
    position: absolute; left: 12%; top: 14%; right: -20%; bottom: -10%; margin: 0;
    padding: 10px 12px; border-radius: 6px 0 0 0; background: #0e1014; color: #cfd6de;
    font: 500 .62rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.rlx-surface__media pre .k { color: #c792ea; } .rlx-surface__media pre .s { color: #a5d6a7; }
.rlx-surface__media pre .p { color: var(--rlx-accent); } .rlx-surface__media pre .m { color: #6b7380; }
.rlx-surface h3 { font-size: .95rem; margin: 0 2px 12px; }
.rlx-surface .rlx-btn { margin-top: auto; font-size: .8rem; padding: .55em .9em; }

/* ---- Stories grid ------------------------------------------------------- */
.rlx-stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rlx-story {
    display: flex; flex-direction: column; padding: 22px; border-radius: 14px;
    background: var(--rlx-surface); border: 1px solid var(--rlx-line);
    color: var(--rlx-text) !important; transition: border-color .2s, background .2s;
}
.rlx-story:hover { border-color: rgba(77, 168, 218, .45); background: var(--rlx-surface-2); }
.rlx-story__logo { height: 40px; margin-bottom: 18px; display: flex; align-items: center; }
.rlx-story__logo img { max-height: 28px; max-width: 120px; filter: var(--rlx-logo-filter); opacity: .85; }
.rlx-story__logo img.tall { max-height: 40px; }
/* customers with no clean transparent logo get their name set as a wordmark */
.rlx-story__wordmark { font-weight: 700; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; color: var(--rlx-text); opacity: .85; }
.rlx-story h3 { font-size: 1rem; line-height: 1.4; margin-bottom: .6rem; }
.rlx-story p { color: var(--rlx-muted); font-size: .86rem; margin-bottom: 1.2rem; }
.rlx-story__meta { margin-top: auto; color: var(--rlx-faint); font-size: .78rem; }
.rlx-story--stat { justify-content: center; text-align: left; }
.rlx-story--stat .num { font-size: 2.6rem; font-weight: 500; letter-spacing: -.03em; color: var(--rlx-accent); line-height: 1; margin-bottom: .5rem; }

/* ---- Closing CTA band --------------------------------------------------- */
.rlx-cta { position: relative; margin-top: 140px; padding: 110px 0 120px; text-align: center; isolation: isolate; }
.rlx-cta::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(55% 80% at 20% 100%, rgba(43, 95, 217, .85), transparent 70%),
        radial-gradient(55% 80% at 85% 100%, rgba(77, 168, 218, .75), transparent 70%),
        linear-gradient(180deg, var(--rlx-page-bg) 0%, #0a2340 60%, #0c3a5c 100%);
}
.rlx-cta h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom: .4rem; }
.rlx-cta p { color: rgba(255, 255, 255, .75); margin-bottom: 1.4rem; }
.rlx-cta__ctas { display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* ---- Reveal on scroll --------------------------------------------------- */
.rlx-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.rlx-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rlx-reveal { opacity: 1; transform: none; transition: none; } }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 991.98px) {
    .rlx-section { padding-top: 88px; }
    .rlx-feature, .rlx-feature--flip { grid-template-columns: 1fr; gap: 24px; }
    .rlx-feature--flip .rlx-feature__copy { order: 0; }
    .rlx-features { gap: 64px; }
    .rlx-surfaces { grid-template-columns: repeat(2, 1fr); }
    .rlx-stories { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767.98px) {
    .rlx-hero { padding-top: 64px; }
    .rlx-tiers { grid-template-columns: 1fr; gap: 36px; }
    .rlx-tier p { min-height: 0; }
    .rlx-hero__mark { margin-bottom: 28px; }
    .rlx-hero h1 { margin-bottom: 1rem; }
    .rlx-hero__lead { font-size: 1.15rem; margin-bottom: 1.75rem; }
    .rlx-trusted { margin-top: 56px; }
    .rlx-logo { padding: 0 24px; }
    .rlx-logos img { height: 24px; max-width: 96px; }
    .rlx-logos img.tall { height: 40px; }
    .rlx-stories { grid-template-columns: 1fr; }
    .rlx-int { width: calc(50% - 9px); }
}
@media (max-width: 479.98px) {
    .rlx-wrap { padding: 0 16px; }
    .rlx-surfaces { grid-template-columns: 1fr; }
}