/** * Home landing page – Matches auth login/register styling. * Uses auth.css for lines animation; adds landing-specific layout. */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=Outfit:wght@500;600;700;800&display=swap'); body.page-landing, body.page-landing .dashboard-page-wrap, body.hub-public-guest-shell, body.hub-public-guest-shell .dashboard-page-wrap { font-family: 'DM Sans', 'Noto Sans', system-ui, sans-serif; } .landing-page h1, .landing-page h2, .landing-page h3, .landing-hero__title, .landing-features__title, .landing-pricing__title, .landing-docs__title, .landing-cta__title, .landing-contact__title, .landing-faq__title, .landing-how__title, .landing-how__step-title, .upgrade-plan-name { font-family: 'Outfit', 'DM Sans', system-ui, sans-serif; } /* ----- Landing canvas: tokens on html (inherit everywhere) + one mesh stack ----- */ html:has(body.page-landing) { min-height: 100%; --landing-bg-deep: #0a0a0d; --landing-bg-mid: #131316; --landing-bg-top: #17171c; --landing-mesh-1: rgba(59, 130, 246, 0.13); --landing-mesh-2: rgba(139, 92, 246, 0.07); --landing-mesh-3: rgba(34, 211, 238, 0.05); --landing-border: rgba(255, 255, 255, 0.07); --landing-border-soft: rgba(255, 255, 255, 0.05); --landing-text: rgba(255, 255, 255, 0.92); --landing-text-muted: rgba(255, 255, 255, 0.55); --landing-grid-dot: rgba(255, 255, 255, 0.055); --landing-fade-hero: #17171c; background-color: var(--landing-bg-deep); } /* Scheme lives on ; must use html[...] — [data-...] html:has(...) never matches (no nested html). */ html[data-mantine-color-scheme="light"]:has(body.page-landing) { --landing-bg-deep: #f1f5f9; --landing-bg-mid: #f8fafc; --landing-bg-top: #ffffff; --landing-mesh-1: rgba(59, 130, 246, 0.065); --landing-mesh-2: rgba(99, 102, 241, 0.04); --landing-mesh-3: rgba(14, 165, 233, 0.035); --landing-border: rgba(15, 23, 42, 0.09); --landing-border-soft: rgba(15, 23, 42, 0.06); --landing-text: #0f172a; --landing-text-muted: #64748b; --landing-grid-dot: rgba(15, 23, 42, 0.055); --landing-fade-hero: #f8fafc; } body.page-landing { --landing-nav-offset: 5.5rem; background-color: var(--landing-bg-deep); } @media (max-width: 48em) { body.page-landing { --landing-nav-offset: 5rem; } } /* Single full-page canvas: solid base + mesh (no per-section page bg fights) */ .dashboard-page-wrap.page-landing { position: relative; isolation: isolate; min-height: 100vh; min-width: 0; overflow-x: hidden; color: var(--landing-text); background-color: var(--landing-bg-mid); background-image: radial-gradient(ellipse 72% 48% at 8% 6%, var(--landing-mesh-1) 0%, transparent 58%), radial-gradient(ellipse 110% 85% at 50% -32%, var(--landing-mesh-1) 0%, transparent 56%), radial-gradient(ellipse 75% 55% at 100% 18%, var(--landing-mesh-2) 0%, transparent 46%), radial-gradient(ellipse 65% 50% at 0% 58%, var(--landing-mesh-3) 0%, transparent 44%), linear-gradient(180deg, var(--landing-bg-deep) 0%, var(--landing-bg-mid) 42%, var(--landing-bg-top) 100%); } /* Texture layer — above auth lines (z-index 0), below page sections (z-index 2) */ .dashboard-page-wrap.page-landing::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: radial-gradient(var(--landing-grid-dot) 1px, transparent 1px); background-size: 28px 28px; background-position: 0 0; opacity: 0.85; } [data-mantine-color-scheme="light"] .dashboard-page-wrap.page-landing::before { opacity: 0.55; } /* /login & /register — same canvas tokens + mesh/grid as home (body.page-landing) */ body.auth-page.page-landing { background-color: var(--landing-bg-deep); color: var(--landing-text); } [data-mantine-color-scheme="light"] body.auth-page.page-landing { background-color: var(--landing-bg-deep); color: var(--landing-text); } body.auth-page.page-landing .auth-wrapper { isolation: isolate; background-color: var(--landing-bg-mid); background-image: radial-gradient(ellipse 72% 48% at 8% 6%, var(--landing-mesh-1) 0%, transparent 58%), radial-gradient(ellipse 110% 85% at 50% -32%, var(--landing-mesh-1) 0%, transparent 56%), radial-gradient(ellipse 75% 55% at 100% 18%, var(--landing-mesh-2) 0%, transparent 46%), radial-gradient(ellipse 65% 50% at 0% 58%, var(--landing-mesh-3) 0%, transparent 44%), linear-gradient(180deg, var(--landing-bg-deep) 0%, var(--landing-bg-mid) 42%, var(--landing-bg-top) 100%); } body.auth-page.page-landing .auth-wrapper::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(var(--landing-grid-dot) 1px, transparent 1px); background-size: 28px 28px; background-position: 0 0; opacity: 0.85; } [data-mantine-color-scheme="light"] body.auth-page.page-landing .auth-wrapper::before { opacity: 0.55; } body.auth-page.page-landing .auth-lines { z-index: 1; } body.auth-page.page-landing .auth-form { z-index: 2; } /* Pricing cards – match auth blue on landing */ .page-landing .upgrade-plan-card--popular { border-color: rgba(59, 130, 246, 0.25); background: linear-gradient(180deg, rgba(59, 130, 246, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%); } .page-landing .upgrade-plan-card--popular:hover { border-color: rgba(59, 130, 246, 0.4); box-shadow: 0 12px 36px -8px rgba(59, 130, 246, 0.2); } .page-landing .upgrade-plan-badge--popular { background: linear-gradient(135deg, #3b82f6, #2563eb); } .landing-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.55; } [data-mantine-color-scheme="light"] .landing-bg { opacity: 0.4; } .landing-bg .auth-lines { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 90vw; } /* Auth vertical lines — softer on light canvas (scheme lives on html) */ html[data-mantine-color-scheme="light"]:has(body.page-landing) .landing-bg .auth-line, html[data-mantine-color-scheme="light"]:has(body.page-landing) body.auth-page .auth-wrapper .auth-line { background: rgba(15, 23, 42, 0.08); } html[data-mantine-color-scheme="light"]:has(body.page-landing) .landing-bg .auth-line::after, html[data-mantine-color-scheme="light"]:has(body.page-landing) body.auth-page .auth-wrapper .auth-line::after { background: linear-gradient(to bottom, transparent 0%, rgba(15, 23, 42, 0.15) 70%, rgba(15, 23, 42, 0.22) 100%); } .dashboard-page-wrap.page-landing > *:not(.landing-bg) { position: relative; z-index: 2; } /* ----- Landing page main ----- */ .landing-page { flex: 1; min-width: 0; width: 100%; max-width: 100%; padding-bottom: 0; } /* Nav clearance on inner main — keeps #main-content full-bleed background (no top padding band on the wrap) */ body.page-landing .landing-page { padding-top: var(--landing-nav-offset); } /* ----- Landing header (when not logged in) ----- */ .landing-header { background: #242424; border-bottom: 1px solid rgba(255, 255, 255, 0.06); position: sticky; top: 0; z-index: 100; } [data-mantine-color-scheme="light"] .landing-header { background: #fff; border-bottom-color: var(--mantine-color-dark-2, #e9ecef); } .landing-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--mantine-spacing-md); max-width: 80rem; margin: 0 auto; padding: 0.875rem var(--mantine-spacing-xl); min-height: 4rem; } .landing-header__logo { justify-self: start; display: flex; align-items: center; padding: 0.25rem 0; border-radius: 0.25rem; transition: opacity 0.15s ease; } .landing-header__logo:hover { opacity: 0.9; } .landing-header__logo:focus-visible { outline: 2px solid var(--mantine-color-primary-4); outline-offset: 2px; } .landing-header__logo img { width: 2rem; height: 2rem; object-fit: contain; display: block; } .landing-header__nav { display: flex; align-items: center; justify-content: center; gap: 2.25rem; } .landing-header__link { color: rgba(255, 255, 255, 0.9); text-decoration: none; font-size: var(--mantine-font-size-md); font-weight: 500; padding: 0.375rem 0; border-radius: 0.25rem; transition: color 0.15s ease; } .landing-header__link:hover { color: #fff; } .landing-header__link:focus-visible { outline: 2px solid var(--mantine-color-primary-4); outline-offset: 2px; } [data-mantine-color-scheme="light"] .landing-header__link { color: var(--mantine-color-dimmed, #495057); } [data-mantine-color-scheme="light"] .landing-header__link:hover { color: var(--mantine-color-text, #212529); } .landing-header__actions { display: flex; align-items: center; gap: 0.75rem; justify-self: end; } .landing-header__actions-divider { width: 1px; height: 1.5rem; background: rgba(255, 255, 255, 0.15); flex-shrink: 0; } [data-mantine-color-scheme="light"] .landing-header__actions-divider { background: #dee2e6; } .landing-header__theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.85); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; appearance: none; font: inherit; } .landing-header__theme-toggle:hover { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.18); } .landing-header__theme-toggle:focus-visible { outline: 2px solid var(--mantine-color-primary-4); outline-offset: 2px; } .landing-header__theme-icon { display: flex; align-items: center; justify-content: center; width: 1.125rem; height: 1.125rem; } .landing-header__theme-icon svg { width: 100%; height: 100%; } [data-mantine-color-scheme="light"] .landing-header__theme-toggle { background: #f1f3f5; border-color: #dee2e6; color: #495057; } [data-mantine-color-scheme="light"] .landing-header__theme-toggle:hover { background: #e9ecef; color: #212529; border-color: #ced4da; } .landing-header__btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1.25rem; min-height: 2.5rem; border-radius: 0.375rem; font-size: var(--mantine-font-size-sm); font-weight: 500; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; border: 1px solid transparent; white-space: nowrap; } .landing-header__btn:focus-visible { outline: 2px solid var(--mantine-color-primary-4); outline-offset: 2px; } .landing-header__btn--secondary { color: rgba(255, 255, 255, 0.9); background: transparent; border-color: rgba(255, 255, 255, 0.2); } .landing-header__btn--secondary:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.28); color: #fff; } [data-mantine-color-scheme="light"] .landing-header__btn--secondary { color: var(--mantine-color-dimmed, #495057); border-color: #dee2e6; } [data-mantine-color-scheme="light"] .landing-header__btn--secondary:hover { background: #f8f9fa; border-color: #ced4da; color: #212529; } .landing-header__btn--primary { color: #fff; background: var(--mantine-color-primary-4, #1a76fd); border-color: transparent; } .landing-header__btn--primary:hover { background: var(--mantine-color-primary-5, #0d6efd); color: #fff; box-shadow: 0 4px 12px rgba(26, 118, 253, 0.35); } @media (max-width: 64em) { .landing-header__inner { display: flex; justify-content: space-between; align-items: center; } .landing-header__nav { display: none; } } @media (min-width: 64em) { .landing-header__nav.mantine-visible-from-md { display: flex !important; } } /* ----- Floating glass navbar (home; public reseller hub when guest via .hub-public-guest-shell) ----- */ html:has(body.page-landing), html:has(body.hub-public-guest-shell) { scroll-padding-top: 6rem; } @media (max-width: 48em) { html:has(body.page-landing), html:has(body.hub-public-guest-shell) { scroll-padding-top: 5.5rem; } } /* * Floating nav: avoid a full-viewport-width fixed transparent layer — Chrome often composites * that as solid black behind the bar. The fixed
is only as wide as the pill (centered). */ body.page-landing .landing-header, body.hub-public-guest-shell .landing-header { position: fixed; top: 0.75rem; left: 50%; right: auto; transform: translateX(-50%); width: min(72rem, calc(100% - 1.5rem)); z-index: 200; background: none; border: none; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; } body.page-landing .landing-header__inner, body.hub-public-guest-shell .landing-header__inner { pointer-events: auto; margin: 0; width: 100%; max-width: none; padding: 0.5rem 0.65rem 0.5rem 1.1rem; min-height: 3.35rem; border-radius: 999px; overflow: hidden; isolation: isolate; -webkit-backface-visibility: hidden; backface-visibility: hidden; /* Opaque glass (no backdrop-filter — avoids Chrome black compositor holes over fixed layers) */ background: linear-gradient(165deg, rgba(34, 34, 38, 0.98) 0%, rgba(24, 24, 28, 0.98) 100%); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.55), 0 2px 8px -2px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.07); } [data-mantine-color-scheme="light"] body.page-landing .landing-header__inner, [data-mantine-color-scheme="light"] body.hub-public-guest-shell .landing-header__inner { background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%); border-color: rgba(15, 23, 42, 0.1); box-shadow: 0 12px 40px -16px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.9) inset, inset 0 -1px 0 rgba(15, 23, 42, 0.05); } body.page-landing .landing-header__nav, body.hub-public-guest-shell .landing-header__nav { gap: 0.35rem; } body.page-landing .landing-header__link, body.hub-public-guest-shell .landing-header__link { padding: 0.4rem 0.85rem; border-radius: 999px; font-size: 0.875rem; font-weight: 600; color: rgba(255, 255, 255, 0.78); transition: color 0.2s ease, background 0.2s ease; } body.page-landing .landing-header__link:hover, body.hub-public-guest-shell .landing-header__link:hover { color: #fff; background: rgba(255, 255, 255, 0.08); } [data-mantine-color-scheme="light"] body.page-landing .landing-header__link, [data-mantine-color-scheme="light"] body.hub-public-guest-shell .landing-header__link { color: #64748b; } [data-mantine-color-scheme="light"] body.page-landing .landing-header__link:hover, [data-mantine-color-scheme="light"] body.hub-public-guest-shell .landing-header__link:hover { color: #0f172a; background: rgba(59, 130, 246, 0.08); } body.page-landing .landing-header__btn, body.hub-public-guest-shell .landing-header__btn { border-radius: 999px; padding: 0.45rem 1.1rem; min-height: 2.4rem; font-size: 0.8125rem; font-weight: 600; } body.page-landing .landing-header__btn--secondary, body.hub-public-guest-shell .landing-header__btn--secondary { border-color: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); } body.page-landing .landing-header__btn--secondary:hover, body.hub-public-guest-shell .landing-header__btn--secondary:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.22); } [data-mantine-color-scheme="light"] body.page-landing .landing-header__btn--secondary, [data-mantine-color-scheme="light"] body.hub-public-guest-shell .landing-header__btn--secondary { border-color: #e2e8f0; background: #fff; } [data-mantine-color-scheme="light"] body.page-landing .landing-header__btn--secondary:hover, [data-mantine-color-scheme="light"] body.hub-public-guest-shell .landing-header__btn--secondary:hover { background: #f8fafc; border-color: #cbd5e1; } body.page-landing .landing-header__btn--primary, body.hub-public-guest-shell .landing-header__btn--primary { box-shadow: 0 2px 12px rgba(59, 130, 246, 0.35); } body.page-landing .landing-header__btn--primary:hover, body.hub-public-guest-shell .landing-header__btn--primary:hover { box-shadow: 0 4px 16px rgba(59, 130, 246, 0.45); } body.page-landing .landing-header__theme-toggle, body.hub-public-guest-shell .landing-header__theme-toggle { width: 2.2rem; height: 2.2rem; } @media (max-width: 48em) { body.page-landing .landing-header, body.hub-public-guest-shell .landing-header { top: 0.65rem; width: calc(100% - 1rem); } body.page-landing .landing-header__inner, body.hub-public-guest-shell .landing-header__inner { padding: 0.45rem 0.5rem 0.45rem 0.75rem; border-radius: 1.125rem; } } @media (max-width: 64em) { body.page-landing .landing-header__actions, body.hub-public-guest-shell .landing-header__actions { gap: 0.45rem; } body.page-landing .landing-header__btn, body.hub-public-guest-shell .landing-header__btn { padding: 0.4rem 0.85rem; min-height: 2.25rem; font-size: 0.75rem; } } /* ----- Hero (full viewport, content centered) ----- */ .landing-hero { position: relative; min-height: calc(100vh - 4rem); min-height: calc(100dvh - 4rem); display: flex; align-items: center; padding-top: clamp(1.5rem, 4vh, 2.5rem); padding-bottom: clamp(1.5rem, 5vh, 3rem); overflow: hidden; max-width: 100%; } body.page-landing .landing-hero { min-height: calc(100dvh - var(--landing-nav-offset)); } .landing-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8rem; background: linear-gradient(to top, var(--landing-fade-hero) 0%, transparent 100%); pointer-events: none; } @media (max-width: 48em) { .landing-hero { min-height: calc(100vh - 3.5rem); min-height: calc(100dvh - 3.5rem); padding-top: var(--mantine-spacing-md); padding-bottom: var(--mantine-spacing-md); } body.page-landing .landing-hero { min-height: calc(100dvh - var(--landing-nav-offset)); } } .landing-hero__container { width: 100%; max-width: 80rem; margin-left: auto; margin-right: auto; padding-left: var(--mantine-spacing-lg); padding-right: var(--mantine-spacing-lg); position: relative; z-index: 2; } /* Left column — readable measure; pairs with media column */ .landing-hero__copy { width: 100%; max-width: min(38rem, 100%); margin-left: auto; margin-right: auto; } @media (min-width: 64em) { .landing-hero__copy { flex: 1 1 0; min-width: 0; max-width: none; margin-left: 0; margin-right: 0; } } /* Platform highlights — under hero row, typography only (matches ecosystem band / page tokens) */ .landing-hero__strip-list { list-style: none; margin: clamp(2.25rem, 5vw, 3.5rem) 0 0; padding: clamp(1.75rem, 3vw, 2.25rem) 0 0; display: grid; grid-template-columns: 1fr; gap: 1.15rem; border-top: 1px solid var(--landing-border-soft); } @media (min-width: 40em) { .landing-hero__strip-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.75rem; } } .landing-hero__strip-item { display: flex; flex-direction: column; gap: 0.4rem; text-align: center; } @media (min-width: 64em) { .landing-hero__strip-item { text-align: left; } } .landing-hero__strip-kicker { font-family: 'Outfit', 'DM Sans', system-ui, sans-serif; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(147, 197, 253, 0.88); } [data-mantine-color-scheme="light"] .landing-hero__strip-kicker { color: #2563eb; } .landing-hero__strip-desc { font-size: 0.875rem; line-height: 1.55; color: var(--landing-text-muted); } .landing-hero__content { display: flex; flex-direction: column; align-items: center; gap: clamp(2rem, 5vw, 3rem); } @media (min-width: 64em) { .landing-hero__content { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: clamp(2.75rem, 5.5vw, 5rem); } } .landing-hero__inner { position: relative; z-index: 1; text-align: center; width: 100%; margin-left: auto; margin-right: auto; flex-shrink: 0; padding: clamp(1.85rem, 4.5vw, 2.85rem); border-radius: 28px; /* Lighter frost — mesh reads through; still readable */ background: linear-gradient( 165deg, rgba(22, 22, 28, 0.58) 0%, rgba(12, 12, 16, 0.72) 100% ); backdrop-filter: blur(28px) saturate(1.15); -webkit-backdrop-filter: blur(28px) saturate(1.15); border: 1px solid rgba(255, 255, 255, 0.07); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 32px 64px -36px rgba(0, 0, 0, 0.6); } /* Refined top accent — soft gradient, fades at sides (not a flat bar) */ .landing-hero__inner::before { content: ''; position: absolute; top: 0; left: 1.75rem; right: 1.75rem; height: 2px; border-radius: 0 0 4px 4px; background: linear-gradient( 90deg, transparent 0%, rgba(59, 130, 246, 0.2) 22%, rgba(147, 197, 253, 0.95) 50%, rgba(59, 130, 246, 0.2) 78%, transparent 100% ); box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.12), 0 4px 20px -2px rgba(59, 130, 246, 0.35); pointer-events: none; z-index: 2; } @media (min-width: 64em) { .landing-hero__inner { text-align: left; padding: clamp(2.15rem, 4vw, 3.15rem); } } .landing-hero__glow { position: absolute; inset: 0; border-radius: 28px; background: radial-gradient(ellipse 90% 60% at 0% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 52%), radial-gradient(ellipse 60% 50% at 100% 70%, rgba(96, 165, 250, 0.06) 0%, transparent 50%); pointer-events: none; } @media (min-width: 64em) { .landing-hero__glow { background: radial-gradient(ellipse 100% 70% at -10% 40%, rgba(59, 130, 246, 0.1) 0%, transparent 45%), radial-gradient(ellipse 60% 60% at 110% 90%, rgba(96, 165, 250, 0.06) 0%, transparent 50%); } } @media (min-width: 64em) { .landing-hero__controls { justify-content: flex-start; } } .landing-hero__cta { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; margin-top: 0.15rem; } @media (min-width: 64em) { .landing-hero__cta { align-items: flex-start; } } .landing-hero__lead { display: flex; flex-direction: column; gap: 1rem; max-width: 32rem; margin-left: auto; margin-right: auto; } @media (min-width: 64em) { .landing-hero__lead { margin-left: 0; margin-right: 0; max-width: 36rem; } } /* Hero image – right side, hidden on mobile, 3D tilt */ .landing-hero__media { display: none; flex-shrink: 0; width: 100%; max-width: 44rem; perspective: 1200px; position: relative; z-index: 1; } .landing-hero__media-caption { display: block; font-family: 'Outfit', 'DM Sans', system-ui, sans-serif; font-size: 0.625rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(147, 197, 253, 0.55); text-align: center; margin-bottom: 0.85rem; } @media (min-width: 64em) { .landing-hero__media-caption { text-align: right; margin-bottom: 0.65rem; } } [data-mantine-color-scheme="light"] .landing-hero__media-caption { color: #64748b; } @media (min-width: 64em) { .landing-hero__media { display: block; flex: 1 1 0; min-width: 0; max-width: min(44%, 38rem); align-self: center; padding-top: 1.75rem; } } .landing-hero__tilt { transform-style: preserve-3d; transition: transform 0.15s ease-out; will-change: transform; position: relative; } .landing-hero__tilt-inner { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 0 0 1px rgba(59, 130, 246, 0.08), 0 40px 80px -36px rgba(0, 0, 0, 0.58), 0 0 120px -50px rgba(59, 130, 246, 0.15); } .landing-hero__tilt-inner::before { content: ''; display: block; padding-bottom: calc(450 / 720 * 100%); } .landing-hero__tilt-inner .landing-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .landing-hero__img { display: block; width: 100%; height: auto; border: none; box-shadow: none; background: transparent; } .landing-hero__badge { position: relative; display: inline-flex; align-items: center; padding: 0.42rem 1rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: #93c5fd; background: rgba(59, 130, 246, 0.09); border: 1px solid rgba(59, 130, 246, 0.2); border-radius: 999px; margin-bottom: 1.35rem; box-shadow: 0 0 28px -12px rgba(59, 130, 246, 0.35); } .landing-hero__title { position: relative; margin: 0; letter-spacing: -0.045em; text-wrap: balance; } .landing-hero__title-line { display: block; font-family: 'Outfit', 'DM Sans', system-ui, sans-serif; font-size: clamp(1.9375rem, 4.8vw, 3rem); font-weight: 800; line-height: 1.06; background: linear-gradient(135deg, #ffffff 0%, #e8eeff 38%, #93c5fd 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .landing-hero__highlight { display: block; margin-top: 0.4rem; font-family: 'Outfit', 'DM Sans', system-ui, sans-serif; font-size: clamp(2.125rem, 5.5vw, 3.5rem); font-weight: 800; line-height: 1.02; -webkit-text-fill-color: transparent; background: linear-gradient(135deg, #60a5fa, #3b82f6, #2563eb); -webkit-background-clip: text; background-clip: text; background-size: 200% 200%; animation: landing-title-shine 10s ease infinite; } @keyframes landing-title-shine { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .landing-hero__description { position: relative; font-size: clamp(0.9375rem, 1.55vw, 1.075rem); color: rgba(255, 255, 255, 0.64); margin: 0; line-height: 1.68; max-width: none; } @media (max-width: 48em) { .landing-hero__description { text-align: left; } } .landing-hero__controls { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--mantine-spacing-md); --group-gap: var(--mantine-spacing-md); } .landing-hero__btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.8rem 1.65rem; border-radius: 12px; font-size: var(--mantine-font-size-md); font-weight: 600; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; border: 1px solid transparent; min-height: 2.875rem; } .landing-hero__btn--primary { color: #fff; min-width: 10.75rem; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%); border: none; box-shadow: 0 4px 16px rgba(59, 130, 246, 0.42); } .landing-hero__btn--primary:hover { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); box-shadow: 0 8px 24px rgba(59, 130, 246, 0.48); transform: translateY(-2px); } .landing-hero__btn--secondary { color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); } .landing-hero__btn--secondary:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.25); color: #fff; } /* Hero text block – light mode */ [data-mantine-color-scheme="light"] .landing-hero::after { background: linear-gradient(to top, #f1f5f9 0%, transparent 100%); } [data-mantine-color-scheme="light"] .landing-hero__inner { background: linear-gradient(165deg, rgba(255, 255, 255, 0.82) 0%, rgba(248, 250, 252, 0.92) 100%); backdrop-filter: blur(28px) saturate(1.12); -webkit-backdrop-filter: blur(28px) saturate(1.12); border-color: rgba(15, 23, 42, 0.09); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.98) inset, 0 32px 64px -36px rgba(15, 23, 42, 0.1); } [data-mantine-color-scheme="light"] .landing-hero__tilt-inner { border-color: rgba(15, 23, 42, 0.1); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 0 0 1px rgba(37, 99, 235, 0.06), 0 36px 72px -32px rgba(15, 23, 42, 0.14), 0 0 100px -48px rgba(59, 130, 246, 0.12); } [data-mantine-color-scheme="light"] .landing-hero__inner::before { background: linear-gradient( 90deg, transparent 0%, rgba(37, 99, 235, 0.15) 22%, rgba(59, 130, 246, 0.85) 50%, rgba(37, 99, 235, 0.15) 78%, transparent 100% ); box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.18), 0 3px 16px -2px rgba(59, 130, 246, 0.22); } [data-mantine-color-scheme="light"] .landing-hero__badge { color: #2563eb; background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.2); box-shadow: none; } [data-mantine-color-scheme="light"] .landing-hero__glow { background: radial-gradient(ellipse 70% 50% at 0% 50%, rgba(59, 130, 246, 0.04) 0%, transparent 55%); } [data-mantine-color-scheme="light"] .landing-hero__title-line { background: linear-gradient(135deg, #0f172a 0%, #334155 45%, #2563eb 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } [data-mantine-color-scheme="light"] .landing-hero__highlight { background: linear-gradient(135deg, #2563eb, #1d4ed8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } [data-mantine-color-scheme="light"] .landing-hero__description { color: #64748b; } [data-mantine-color-scheme="light"] .landing-hero__btn--primary { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35); } [data-mantine-color-scheme="light"] .landing-hero__btn--primary:hover { background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%); box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4); } [data-mantine-color-scheme="light"] .landing-hero__btn--secondary { color: #475569; background: #fff; border-color: #e2e8f0; } [data-mantine-color-scheme="light"] .landing-hero__btn--secondary:hover { background: #f1f5f9; border-color: #cbd5e1; color: #1e293b; } /* ----- Features ----- */ .landing-features { padding-top: calc(var(--mantine-spacing-xl) * 2); padding-bottom: calc(var(--mantine-spacing-xl) * 2); } .landing-features__container { max-width: 64rem; margin-left: auto; margin-right: auto; padding-left: var(--mantine-spacing-md); padding-right: var(--mantine-spacing-md); text-align: center; } .landing-features__header { margin-bottom: calc(var(--mantine-spacing-xl) * 1.5); } .landing-features__badge { display: inline-flex; align-items: center; padding: 0.35rem 0.85rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #93c5fd; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2); border-radius: 8px; margin-bottom: var(--mantine-spacing-md); } .landing-features__title { font-size: clamp(1.5rem, 3vw, 2.125rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.25; margin: 0 0 var(--mantine-spacing-sm); background: linear-gradient(135deg, #fff 0%, #e9d5ff 35%, #bfdbfe 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .landing-features__description { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.55); max-width: 36rem; margin: 0 auto; line-height: 1.6; } .landing-features__description::after { content: ''; display: block; width: 2.8125rem; height: 2px; background: linear-gradient(90deg, #3b82f6, #60a5fa); margin: var(--mantine-spacing-sm) auto 0; border-radius: 1px; } /* Features header – light mode */ [data-mantine-color-scheme="light"] .landing-features__badge { color: #2563eb; background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.2); } [data-mantine-color-scheme="light"] .landing-features__title { background: linear-gradient(135deg, #1e293b 0%, #3b82f6 50%, #2563eb 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } [data-mantine-color-scheme="light"] .landing-features__description { color: #64748b; } [data-mantine-color-scheme="light"] .landing-features__description::after { background: linear-gradient(90deg, #2563eb, #3b82f6); } .landing-features__grid { display: grid; grid-template-columns: 1fr; gap: var(--mantine-spacing-xl); } @media (min-width: 48em) { .landing-features__grid { grid-template-columns: repeat(3, 1fr); } } .landing-features__card { padding: var(--mantine-spacing-xl); border-radius: var(--mantine-radius-default, 0.25rem); border: 1px solid var(--mantine-color-dark-5); background: var(--mantine-color-body); text-align: left; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .landing-features__card:hover { border-color: var(--mantine-color-dark-4); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .landing-features__card-icon { color: var(--mantine-color-primary-4); margin-bottom: var(--mantine-spacing-md); } .landing-features__card-title { font-size: var(--mantine-font-size-lg); font-weight: 600; color: var(--mantine-color-text); margin: 0 0 var(--mantine-spacing-sm); line-height: 1.3; } .landing-features__card-title::after { content: ''; display: block; width: 2.8125rem; height: 2px; background: var(--mantine-color-primary-4); margin-top: var(--mantine-spacing-sm); } .landing-features__card-desc { font-size: var(--mantine-font-size-sm); color: var(--mantine-color-dimmed); margin: 0; line-height: 1.6; } /* ----- Pricing (upgrade cards) ----- */ .landing-pricing { padding-top: calc(var(--mantine-spacing-xl) * 2); padding-bottom: calc(var(--mantine-spacing-xl) * 1.5); } .landing-pricing .authguards_container { margin-left: auto; margin-right: auto; padding-left: var(--mantine-spacing-md); padding-right: var(--mantine-spacing-md); } .landing-pricing__title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--mantine-color-text); text-align: center; margin: 0 0 var(--mantine-spacing-sm); } .landing-pricing__desc { font-size: var(--mantine-font-size-md); color: var(--mantine-color-dimmed); text-align: center; margin: 0 0 var(--mantine-spacing-lg); } /* ----- Docs + CTA + Contact (2-row grid: row1 = docs | CTA, row2 = help full width) ----- */ .landing-engage { padding-top: calc(var(--mantine-spacing-xl) * 2); padding-bottom: calc(var(--mantine-spacing-xl) * 1.25); } .landing-engage__grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; max-width: 72rem; margin-left: auto; margin-right: auto; padding-left: var(--mantine-spacing-md); padding-right: var(--mantine-spacing-md); } @media (min-width: 52em) { .landing-engage__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: stretch; } .landing-contact { grid-column: 1 / -1; } } .landing-docs, .landing-cta, .landing-contact { margin: 0; padding: 0; min-width: 0; text-align: center; } .landing-docs__card, .landing-cta__card, .landing-contact__card { position: relative; height: 100%; padding: calc(var(--mantine-spacing-xl) * 1.75) var(--mantine-spacing-lg); background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; overflow: hidden; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } .landing-docs__card::before, .landing-cta__card::before, .landing-contact__card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #2563eb 0%, #3b82f6 25%, #60a5fa 50%, #3b82f6 75%, #2563eb 100%); background-size: 200% 100%; animation: auth-accent-shimmer 6s ease-in-out infinite; opacity: 1; } .landing-docs__card:hover, .landing-cta__card:hover, .landing-contact__card:hover { border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(59, 130, 246, 0.12); } .landing-docs__glow, .landing-cta__glow, .landing-contact__glow { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(59, 130, 246, 0.08) 0%, transparent 55%), radial-gradient(ellipse 60% 40% at 100% 100%, rgba(96, 165, 250, 0.04) 0%, transparent 50%); pointer-events: none; } .landing-docs__inner, .landing-cta__inner, .landing-contact__inner { position: relative; z-index: 1; } .landing-docs__badge, .landing-cta__badge, .landing-contact__badge { display: inline-block; padding: 0.35rem 0.85rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #93c5fd; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2); border-radius: 8px; margin-bottom: var(--mantine-spacing-md); } .landing-docs__title, .landing-cta__title, .landing-contact__title { font-family: 'Outfit', 'DM Sans', system-ui, sans-serif; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--mantine-color-text); margin: 0 0 var(--mantine-spacing-sm); letter-spacing: -0.02em; } .landing-docs__text { font-size: var(--mantine-font-size-md); color: var(--mantine-color-dimmed); margin: 0 0 var(--mantine-spacing-xl); line-height: 1.5; max-width: 32rem; margin-left: auto; margin-right: auto; } .landing-docs__inner .landing-hero__btn { display: inline-flex; align-items: center; gap: 0.5rem; } .landing-cta__text { font-size: var(--mantine-font-size-md); color: var(--mantine-color-dimmed); margin: 0 0 var(--mantine-spacing-xl); line-height: 1.55; max-width: 32rem; margin-left: auto; margin-right: auto; } .landing-cta__actions, .landing-contact__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--mantine-spacing-md); } .landing-contact__desc { font-size: var(--mantine-font-size-md); color: var(--mantine-color-dimmed); margin: 0 0 var(--mantine-spacing-xl); line-height: 1.55; max-width: 40rem; margin-left: auto; margin-right: auto; } [data-mantine-color-scheme="light"] .landing-docs__card, [data-mantine-color-scheme="light"] .landing-cta__card, [data-mantine-color-scheme="light"] .landing-contact__card { background: #f8fafc; border-color: #e2e8f0; } [data-mantine-color-scheme="light"] .landing-docs__card:hover, [data-mantine-color-scheme="light"] .landing-cta__card:hover, [data-mantine-color-scheme="light"] .landing-contact__card:hover { border-color: #cbd5e1; box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(59, 130, 246, 0.1); } [data-mantine-color-scheme="light"] .landing-docs__badge, [data-mantine-color-scheme="light"] .landing-cta__badge, [data-mantine-color-scheme="light"] .landing-contact__badge { color: #2563eb; background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.2); } [data-mantine-color-scheme="light"] .landing-docs__title, [data-mantine-color-scheme="light"] .landing-cta__title, [data-mantine-color-scheme="light"] .landing-contact__title { color: #1e293b; } [data-mantine-color-scheme="light"] .landing-docs__text, [data-mantine-color-scheme="light"] .landing-cta__text, [data-mantine-color-scheme="light"] .landing-contact__desc { color: #64748b; } [data-mantine-color-scheme="light"] .landing-docs__card::before, [data-mantine-color-scheme="light"] .landing-cta__card::before, [data-mantine-color-scheme="light"] .landing-contact__card::before { background: linear-gradient(90deg, #1d4ed8 0%, #2563eb 25%, #3b82f6 50%, #2563eb 75%, #1d4ed8 100%); background-size: 200% 100%; animation: auth-accent-shimmer 6s ease-in-out infinite; } [data-mantine-color-scheme="light"] .landing-docs__glow, [data-mantine-color-scheme="light"] .landing-cta__glow, [data-mantine-color-scheme="light"] .landing-contact__glow { background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(59, 130, 246, 0.04) 0%, transparent 55%); } /* ----- Discord widget ----- */ .landing-discord { padding-top: calc(var(--mantine-spacing-xl) * 1.25); padding-bottom: calc(var(--mantine-spacing-xl) * 2); } .landing-discord__container { max-width: min(76rem, 100%); margin-left: auto; margin-right: auto; padding-left: var(--mantine-spacing-md); padding-right: var(--mantine-spacing-md); } .landing-discord__header { text-align: center; margin-bottom: clamp(1.75rem, 4vw, 2.5rem); max-width: min(40rem, 100%); margin-left: auto; margin-right: auto; } .landing-discord__badge { display: inline-flex; align-items: center; padding: 0.35rem 0.9rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #93c5fd; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.22); border-radius: 999px; margin-bottom: 0.85rem; } .landing-discord__title { font-family: 'Outfit', 'DM Sans', system-ui, sans-serif; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -0.03em; color: var(--landing-text); margin: 0 0 0.65rem; line-height: 1.2; } .landing-discord__lede { font-size: clamp(0.9375rem, 1.5vw, 1rem); color: var(--landing-text-muted); margin: 0; line-height: 1.65; } .landing-discord__layout { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: center; grid-template-columns: 1fr; } @media (min-width: 52em) { .landing-discord__layout { grid-template-columns: minmax(0, 1.2fr) minmax(260px, 350px); gap: 2rem 2.75rem; align-items: start; } } .landing-discord__copy { text-align: left; max-width: 32rem; margin-left: auto; margin-right: auto; } @media (min-width: 52em) { .landing-discord__copy { margin-left: 0; margin-right: 0; max-width: none; } } .landing-discord__panel { position: relative; padding: clamp(1.35rem, 3vw, 1.75rem) clamp(1.15rem, 3vw, 1.5rem); border-radius: 18px; border: 1px solid var(--landing-border-soft); background: linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, rgba(10, 10, 14, 0.65) 100%); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35) inset, 0 20px 50px -28px rgba(0, 0, 0, 0.55); overflow: hidden; } .landing-discord__panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #5865f2 0%, #3b82f6 40%, #229ed9 100%); background-size: 200% 100%; animation: auth-accent-shimmer 8s ease-in-out infinite; opacity: 0.95; } .landing-discord__panel-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 90% 60% at 15% 0%, rgba(88, 101, 242, 0.12) 0%, transparent 55%), radial-gradient(ellipse 70% 50% at 100% 30%, rgba(34, 158, 217, 0.08) 0%, transparent 50%); pointer-events: none; } .landing-discord__panel > :not(.landing-discord__panel-glow) { position: relative; z-index: 1; } .landing-discord__intro { margin: 0 0 0.85rem; font-size: clamp(0.9375rem, 1.6vw, 1.02rem); line-height: 1.75; color: rgba(241, 245, 249, 0.94); } .landing-discord__meta { margin: 0 0 1.35rem; padding: 0.5rem 0.75rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; color: rgba(147, 197, 253, 0.85); background: rgba(59, 130, 246, 0.08); border: 1px solid rgba(59, 130, 246, 0.18); border-radius: 10px; display: inline-block; } .landing-discord__section-label { font-family: 'Outfit', 'DM Sans', system-ui, sans-serif; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(186, 230, 253, 0.92); margin: 0 0 0.85rem; } .landing-discord__checklist { list-style: none; margin: 0 0 1.35rem; padding: 0; } .landing-discord__checklist li { display: flex; align-items: flex-start; gap: 0.7rem; margin-bottom: 0.65rem; font-size: 0.875rem; line-height: 1.55; color: rgba(226, 232, 240, 0.93); } .landing-discord__checklist li:last-child { margin-bottom: 0; } .landing-discord__check { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 1.375rem; height: 1.375rem; margin-top: 0.1rem; border-radius: 8px; background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.28); color: #4ade80; } .landing-discord__check-text { min-width: 0; } .landing-discord__rule { height: 1px; margin: 0 0 1.15rem; background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.28) 15%, rgba(148, 163, 184, 0.28) 85%, transparent); } .landing-discord__subhead { font-family: 'Outfit', 'DM Sans', system-ui, sans-serif; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(147, 197, 253, 0.92); margin: 0 0 0.85rem; } .landing-discord__channels { display: grid; gap: 0.75rem; margin-bottom: 1.25rem; } @media (min-width: 36em) { .landing-discord__channels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; } } .landing-discord__channel-card { padding: 1rem 1.05rem; border-radius: 14px; border: 1px solid var(--landing-border-soft); background: rgba(0, 0, 0, 0.28); transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.2s ease; } .landing-discord__channel-card:hover { transform: translateY(-2px); } .landing-discord__channel-card--discord { border-color: rgba(88, 101, 242, 0.35); box-shadow: 0 0 0 1px rgba(88, 101, 242, 0.08); } .landing-discord__channel-card--discord:hover { border-color: rgba(88, 101, 242, 0.5); box-shadow: 0 12px 32px -16px rgba(88, 101, 242, 0.35); } .landing-discord__channel-card--telegram { border-color: rgba(34, 158, 217, 0.38); box-shadow: 0 0 0 1px rgba(34, 158, 217, 0.08); } .landing-discord__channel-card--telegram:hover { border-color: rgba(34, 158, 217, 0.55); box-shadow: 0 12px 32px -16px rgba(34, 158, 217, 0.3); } .landing-discord__channel-head { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.5rem; } .landing-discord__channel-icon { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 10px; flex-shrink: 0; } .landing-discord__channel-icon--discord { color: #fff; background: linear-gradient(145deg, #5865f2, #4752c4); box-shadow: 0 4px 12px -4px rgba(88, 101, 242, 0.55); } .landing-discord__channel-icon--telegram { color: #fff; background: linear-gradient(145deg, #2aabee, #229ed9); box-shadow: 0 4px 12px -4px rgba(34, 158, 217, 0.5); } .landing-discord__channel-label { font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; margin: 0; } .landing-discord__channel-card--discord .landing-discord__channel-label { color: #c7d2fe; } .landing-discord__channel-card--telegram .landing-discord__channel-label { color: #bae6fd; } .landing-discord__channel-text { margin: 0; font-size: 0.8125rem; line-height: 1.6; color: var(--landing-text-muted); } .landing-discord__actions { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-bottom: 1.15rem; } .landing-discord__btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.65rem 1.15rem; font-size: 0.875rem; font-weight: 700; font-family: inherit; letter-spacing: 0.01em; text-decoration: none; border-radius: 12px; border: 1px solid transparent; transition: transform 0.18s ease, box-shadow 0.2s ease, filter 0.2s ease, background 0.2s ease; } .landing-discord__btn:hover { transform: translateY(-1px); } .landing-discord__btn:focus-visible { outline: 2px solid rgba(96, 165, 250, 0.65); outline-offset: 2px; } .landing-discord__btn-icon { flex-shrink: 0; } .landing-discord__btn--discord { color: #fff; background: linear-gradient(180deg, #5865f2 0%, #4752c4 100%); border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 4px 14px -4px rgba(88, 101, 242, 0.65); } .landing-discord__btn--discord:hover { filter: brightness(1.06); box-shadow: 0 8px 22px -6px rgba(88, 101, 242, 0.55); } .landing-discord__btn--telegram { color: #fff; background: linear-gradient(180deg, #2aabee 0%, #229ed9 100%); border-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 14px -4px rgba(34, 158, 217, 0.55); } .landing-discord__btn--telegram:hover { filter: brightness(1.06); box-shadow: 0 8px 22px -6px rgba(34, 158, 217, 0.5); } .landing-discord__hint { margin: 0; font-size: 0.8125rem; line-height: 1.65; color: var(--landing-text-muted); padding: 0.9rem 1.05rem; border-radius: 12px; border: 1px solid var(--landing-border-soft); background: rgba(0, 0, 0, 0.18); } .landing-discord__hint strong { color: rgba(226, 232, 240, 0.95); font-weight: 700; } .landing-discord__inline-link { color: #93c5fd; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(147, 197, 253, 0.35); transition: color 0.2s ease, border-color 0.2s ease; } .landing-discord__inline-link:hover { color: #bfdbfe; border-bottom-color: rgba(191, 219, 254, 0.55); } .landing-discord__embed-wrap { display: flex; justify-content: center; width: 100%; } @media (min-width: 52em) { .landing-discord__embed-wrap { justify-content: flex-end; } } .landing-discord__embed { width: 100%; max-width: 350px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); background: #2b2d31; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 24px 56px -20px rgba(0, 0, 0, 0.55), 0 0 40px -12px rgba(88, 101, 242, 0.15); } .landing-discord__iframe { display: block; width: 100%; max-width: 350px; height: 500px; min-height: 420px; border: 0; vertical-align: bottom; } @media (max-width: 28em) { .landing-discord__iframe { min-height: 380px; height: min(500px, 72vh); } } [data-mantine-color-scheme="light"] .landing-discord__badge { color: #2563eb; background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.2); } [data-mantine-color-scheme="light"] .landing-discord__title { color: #0f172a; } [data-mantine-color-scheme="light"] .landing-discord__lede { color: #64748b; } [data-mantine-color-scheme="light"] .landing-discord__panel { background: linear-gradient(165deg, #fff 0%, #f8fafc 100%); border-color: #e2e8f0; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.04) inset, 0 20px 48px -24px rgba(15, 23, 42, 0.1); } [data-mantine-color-scheme="light"] .landing-discord__panel-glow { background: radial-gradient(ellipse 90% 60% at 15% 0%, rgba(59, 130, 246, 0.06) 0%, transparent 55%), radial-gradient(ellipse 70% 50% at 100% 30%, rgba(14, 165, 233, 0.05) 0%, transparent 50%); } [data-mantine-color-scheme="light"] .landing-discord__intro { color: #334155; } [data-mantine-color-scheme="light"] .landing-discord__meta { color: #2563eb; background: rgba(59, 130, 246, 0.08); border-color: rgba(59, 130, 246, 0.2); } [data-mantine-color-scheme="light"] .landing-discord__section-label { color: #1d4ed8; } [data-mantine-color-scheme="light"] .landing-discord__checklist li { color: #334155; } [data-mantine-color-scheme="light"] .landing-discord__check { background: rgba(22, 163, 74, 0.1); border-color: rgba(22, 163, 74, 0.25); color: #16a34a; } [data-mantine-color-scheme="light"] .landing-discord__subhead { color: #2563eb; } [data-mantine-color-scheme="light"] .landing-discord__channel-card { background: #fff; border-color: #e2e8f0; } [data-mantine-color-scheme="light"] .landing-discord__channel-card--discord { border-color: rgba(88, 101, 242, 0.28); background: linear-gradient(165deg, #fff 0%, #f8fafc 100%); } [data-mantine-color-scheme="light"] .landing-discord__channel-card--telegram { border-color: rgba(14, 165, 233, 0.28); background: linear-gradient(165deg, #fff 0%, #f0f9ff 100%); } [data-mantine-color-scheme="light"] .landing-discord__channel-card--discord .landing-discord__channel-label { color: #4f46e5; } [data-mantine-color-scheme="light"] .landing-discord__channel-card--telegram .landing-discord__channel-label { color: #0284c7; } [data-mantine-color-scheme="light"] .landing-discord__channel-text { color: #64748b; } [data-mantine-color-scheme="light"] .landing-discord__hint { color: #64748b; background: #f8fafc; border-color: #e2e8f0; } [data-mantine-color-scheme="light"] .landing-discord__hint strong { color: #0f172a; } [data-mantine-color-scheme="light"] .landing-discord__inline-link { color: #2563eb; border-bottom-color: rgba(37, 99, 235, 0.35); } [data-mantine-color-scheme="light"] .landing-discord__inline-link:hover { color: #1d4ed8; border-bottom-color: rgba(29, 78, 216, 0.5); } [data-mantine-color-scheme="light"] .landing-discord__embed { border-color: #e2e8f0; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06), 0 24px 48px -20px rgba(15, 23, 42, 0.12), 0 0 40px -12px rgba(88, 101, 242, 0.1); } @media (prefers-reduced-motion: reduce) { .landing-discord__panel::before { animation: none; } .landing-discord__channel-card:hover { transform: none; } } /* ----- FAQ ----- */ .landing-faq { padding-top: calc(var(--mantine-spacing-xl) * 2); padding-bottom: calc(var(--mantine-spacing-xl) * 2.25); } .landing-faq__container { max-width: min(75rem, 100%); margin-left: auto; margin-right: auto; padding-left: var(--mantine-spacing-md); padding-right: var(--mantine-spacing-md); } .landing-faq__header { text-align: center; margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem); max-width: min(52rem, 100%); margin-left: auto; margin-right: auto; } .landing-faq__badge { display: inline-flex; align-items: center; padding: 0.35rem 0.9rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #93c5fd; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.22); border-radius: 999px; margin-bottom: 0.85rem; } .landing-faq__title { font-family: 'Outfit', 'DM Sans', system-ui, sans-serif; font-size: clamp(1.625rem, 3.2vw, 2.25rem); font-weight: 800; color: var(--landing-text); margin: 0 0 0.65rem; letter-spacing: -0.035em; line-height: 1.15; } .landing-faq__desc { font-size: clamp(0.9375rem, 1.5vw, 1rem); color: var(--landing-text-muted); margin: 0 0 0.75rem; line-height: 1.6; } .landing-faq__results { margin: 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; color: rgba(147, 197, 253, 0.75); } .landing-faq__card { position: relative; padding: clamp(1.25rem, 3vw, 1.75rem); background: linear-gradient(165deg, rgba(26, 26, 30, 0.85) 0%, rgba(14, 14, 18, 0.92) 100%); border: 1px solid var(--landing-border); border-radius: 20px; text-align: left; overflow: hidden; box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.45); } .landing-faq__card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #2563eb 0%, #3b82f6 35%, #60a5fa 65%, #3b82f6 100%); background-size: 200% 100%; animation: auth-accent-shimmer 8s ease-in-out infinite; opacity: 0.95; } .landing-faq__glow { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(59, 130, 246, 0.07) 0%, transparent 55%); pointer-events: none; } .landing-faq__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1rem; } .landing-faq__toolbar { display: flex; flex-direction: column; gap: 0.85rem; } @media (min-width: 40em) { .landing-faq__toolbar { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; } } .landing-faq__search-wrap { position: relative; flex: 1; min-width: min(100%, 14rem); max-width: min(32rem, 100%); } .landing-faq__search-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .landing-faq__search-icon { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); color: rgba(147, 197, 253, 0.55); pointer-events: none; } .landing-faq__search { width: 100%; padding: 0.65rem 0.85rem 0.65rem 2.5rem; font-size: 0.875rem; font-family: inherit; color: var(--landing-text); background: rgba(0, 0, 0, 0.35); border: 1px solid var(--landing-border-soft); border-radius: 12px; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .landing-faq__search::placeholder { color: rgba(148, 163, 184, 0.65); } .landing-faq__search:hover { border-color: rgba(255, 255, 255, 0.12); } .landing-faq__search:focus { border-color: rgba(59, 130, 246, 0.55); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); } .landing-faq__chips { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; } .landing-faq__chip { appearance: none; padding: 0.4rem 0.75rem; font-size: 0.75rem; font-weight: 600; font-family: inherit; letter-spacing: 0.02em; color: rgba(226, 232, 240, 0.88); background: rgba(0, 0, 0, 0.25); border: 1px solid var(--landing-border-soft); border-radius: 999px; cursor: pointer; transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .landing-faq__chip:hover { border-color: rgba(255, 255, 255, 0.14); color: #e2e8f0; } .landing-faq__chip:focus-visible { outline: 2px solid rgba(59, 130, 246, 0.55); outline-offset: 2px; } .landing-faq__chip.is-active { color: #eff6ff; background: rgba(59, 130, 246, 0.22); border-color: rgba(59, 130, 246, 0.45); box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.12); } .landing-faq__empty { margin: 0; padding: 1rem 1.1rem; font-size: 0.875rem; color: var(--landing-text-muted); text-align: center; border-radius: 12px; border: 1px dashed rgba(148, 163, 184, 0.35); background: rgba(0, 0, 0, 0.15); } .landing-faq__empty[hidden] { display: none; } .landing-faq__accordion { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.65rem; } @media (min-width: 52em) { .landing-faq__accordion { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 0.65rem; } } .landing-faq__item { border-radius: 14px; border: 1px solid var(--landing-border-soft); background: rgba(0, 0, 0, 0.2); overflow: hidden; transition: border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease; } .landing-faq__item[data-faq-category='start'] { border-left: 3px solid rgba(59, 130, 246, 0.75); } .landing-faq__item[data-faq-category='licenses'] { border-left: 3px solid rgba(139, 92, 246, 0.75); } .landing-faq__item[data-faq-category='api'] { border-left: 3px solid rgba(16, 185, 129, 0.7); } .landing-faq__item[data-faq-category='account'] { border-left: 3px solid rgba(245, 158, 11, 0.75); } .landing-faq__item:hover { border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.28); } .landing-faq__item[open] { border-color: rgba(59, 130, 246, 0.35); background: rgba(59, 130, 246, 0.07); box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.08); } .landing-faq__item[data-faq-category='licenses'][open] { border-color: rgba(139, 92, 246, 0.35); background: rgba(139, 92, 246, 0.06); box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.1); } .landing-faq__item[data-faq-category='api'][open] { border-color: rgba(16, 185, 129, 0.32); background: rgba(16, 185, 129, 0.06); box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.1); } .landing-faq__item[data-faq-category='account'][open] { border-color: rgba(245, 158, 11, 0.35); background: rgba(245, 158, 11, 0.06); box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.1); } .landing-faq__item[data-faq-category='start'][open] { border-color: rgba(59, 130, 246, 0.35); background: rgba(59, 130, 246, 0.07); box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.1); } .landing-faq__control { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 0.75rem; width: 100%; padding: 1.05rem 1rem 1.05rem 1.1rem; font-size: 0.9375rem; font-weight: 600; color: var(--landing-text); background: transparent; border: none; cursor: pointer; list-style: none; text-align: left; transition: color 0.2s ease; } .landing-faq__question { grid-column: 1; min-width: 0; } .landing-faq__control:hover { color: #93c5fd; } .landing-faq__control:focus-visible { outline: 2px solid rgba(59, 130, 246, 0.55); outline-offset: 2px; border-radius: 10px; } .landing-faq__control::-webkit-details-marker { display: none; } .landing-faq__control::after { content: ''; grid-column: 2; width: 0.45rem; height: 0.45rem; flex-shrink: 0; margin-right: 0.35rem; border-right: 2px solid rgba(147, 197, 253, 0.88); border-bottom: 2px solid rgba(147, 197, 253, 0.88); transform: rotate(45deg); opacity: 0.88; align-self: center; transition: transform 0.28s cubic-bezier(0.34, 1.3, 0.64, 1), opacity 0.2s ease; } .landing-faq__item[open] .landing-faq__control::after { transform: rotate(-135deg); margin-top: 0.18rem; opacity: 1; } .landing-faq__panel { padding: 0 1.1rem 1.15rem 1.15rem; margin: 0; font-size: 0.875rem; color: var(--landing-text-muted); line-height: 1.68; border-top: 1px solid rgba(255, 255, 255, 0.05); } .landing-faq__item[open] .landing-faq__panel { border-top-color: rgba(59, 130, 246, 0.18); animation: landing-faq-panel-in 0.35s ease; } @media (prefers-reduced-motion: reduce) { .landing-faq__item[open] .landing-faq__panel { animation: none; } } @keyframes landing-faq-panel-in { from { opacity: 0.85; } to { opacity: 1; } } [data-mantine-color-scheme="light"] .landing-faq__badge { color: #2563eb; background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.2); } [data-mantine-color-scheme="light"] .landing-faq__title { color: #0f172a; } [data-mantine-color-scheme="light"] .landing-faq__desc { color: #64748b; } [data-mantine-color-scheme="light"] .landing-faq__results { color: #3b82f6; } [data-mantine-color-scheme="light"] .landing-faq__card { background: linear-gradient(165deg, #fff 0%, #f8fafc 100%); border-color: #e2e8f0; box-shadow: 0 20px 48px -24px rgba(15, 23, 42, 0.1); } [data-mantine-color-scheme="light"] .landing-faq__glow { background: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(59, 130, 246, 0.05) 0%, transparent 55%); } [data-mantine-color-scheme="light"] .landing-faq__search { color: #0f172a; background: #f8fafc; border-color: #e2e8f0; } [data-mantine-color-scheme="light"] .landing-faq__search:focus { border-color: rgba(59, 130, 246, 0.45); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12); } [data-mantine-color-scheme="light"] .landing-faq__chip { color: #475569; background: #fff; border-color: #e2e8f0; } [data-mantine-color-scheme="light"] .landing-faq__chip:hover { border-color: #cbd5e1; color: #0f172a; } [data-mantine-color-scheme="light"] .landing-faq__chip.is-active { color: #1e40af; background: rgba(239, 246, 255, 0.95); border-color: rgba(59, 130, 246, 0.35); } [data-mantine-color-scheme="light"] .landing-faq__empty { color: #64748b; border-color: #cbd5e1; background: #f8fafc; } [data-mantine-color-scheme="light"] .landing-faq__item { border-color: #e2e8f0; background: #fff; } [data-mantine-color-scheme="light"] .landing-faq__item[data-faq-category='start'] { border-left-color: rgba(59, 130, 246, 0.85); } [data-mantine-color-scheme="light"] .landing-faq__item[data-faq-category='licenses'] { border-left-color: rgba(124, 58, 237, 0.85); } [data-mantine-color-scheme="light"] .landing-faq__item[data-faq-category='api'] { border-left-color: rgba(5, 150, 105, 0.85); } [data-mantine-color-scheme="light"] .landing-faq__item[data-faq-category='account'] { border-left-color: rgba(217, 119, 6, 0.9); } [data-mantine-color-scheme="light"] .landing-faq__item:hover { border-color: #cbd5e1; background: #fafbfc; } [data-mantine-color-scheme="light"] .landing-faq__item[open] { border-color: rgba(59, 130, 246, 0.3); background: rgba(239, 246, 255, 0.85); box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.06); } [data-mantine-color-scheme="light"] .landing-faq__item[data-faq-category='licenses'][open] { border-color: rgba(124, 58, 237, 0.28); background: rgba(245, 243, 255, 0.95); box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.08); } [data-mantine-color-scheme="light"] .landing-faq__item[data-faq-category='api'][open] { border-color: rgba(5, 150, 105, 0.28); background: rgba(236, 253, 245, 0.9); box-shadow: 0 0 0 1px rgba(5, 150, 105, 0.08); } [data-mantine-color-scheme="light"] .landing-faq__item[data-faq-category='account'][open] { border-color: rgba(217, 119, 6, 0.3); background: rgba(255, 251, 235, 0.95); box-shadow: 0 0 0 1px rgba(217, 119, 6, 0.08); } [data-mantine-color-scheme="light"] .landing-faq__item[data-faq-category='start'][open] { border-color: rgba(59, 130, 246, 0.3); background: rgba(239, 246, 255, 0.85); box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.06); } [data-mantine-color-scheme="light"] .landing-faq__control { color: #0f172a; } [data-mantine-color-scheme="light"] .landing-faq__control:hover { color: #2563eb; } [data-mantine-color-scheme="light"] .landing-faq__control::after { border-right-color: #64748b; border-bottom-color: #64748b; } [data-mantine-color-scheme="light"] .landing-faq__panel { color: #64748b; border-top-color: #e2e8f0; } [data-mantine-color-scheme="light"] .landing-faq__item[open] .landing-faq__panel { border-top-color: rgba(59, 130, 246, 0.2); } /* ----- Testimonials (dual marquee) ----- */ .landing-testimonials { padding-top: calc(var(--mantine-spacing-xl) * 1.75); padding-bottom: calc(var(--mantine-spacing-xl) * 1.5); } .landing-testimonials__container { max-width: min(80rem, 100%); margin-left: auto; margin-right: auto; padding-left: var(--mantine-spacing-md); padding-right: var(--mantine-spacing-md); } .landing-testimonials__header { text-align: center; margin-bottom: clamp(1.75rem, 4vw, 2.5rem); max-width: min(42rem, 100%); margin-left: auto; margin-right: auto; } .landing-testimonials__badge { display: inline-flex; align-items: center; padding: 0.35rem 0.9rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #93c5fd; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.22); border-radius: 999px; margin-bottom: 0.85rem; } .landing-testimonials__title { font-family: 'Outfit', 'DM Sans', system-ui, sans-serif; font-size: clamp(1.5rem, 3.5vw, 2.125rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.15; margin: 0 0 0.65rem; background: linear-gradient(135deg, #fff 0%, #e0e7ff 38%, #93c5fd 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .landing-testimonials__desc { font-size: clamp(0.9375rem, 1.5vw, 1rem); color: var(--landing-text-muted); margin: 0; line-height: 1.65; } .landing-testimonials__rows { display: flex; flex-direction: column; gap: 1rem; } .landing-testimonials__marquee { overflow: hidden; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.07); background: linear-gradient(165deg, rgba(255, 255, 255, 0.03) 0%, rgba(12, 12, 16, 0.45) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 48px -28px rgba(0, 0, 0, 0.5); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .landing-testimonials__marquee:hover .landing-testimonials__track { animation-play-state: paused; } .landing-testimonials__track { display: flex; width: max-content; gap: 0; will-change: transform; animation: landing-testimonials-scroll 52s linear infinite; } .landing-testimonials__marquee--reverse .landing-testimonials__track { animation-duration: 58s; animation-direction: reverse; } @keyframes landing-testimonials-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .landing-testimonials__set { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 1rem; padding: 0.75rem 0.5rem; } .landing-testimonials__card { flex: 0 0 auto; width: min(25rem, 88vw); display: flex; flex-direction: column; padding: 1.15rem 1.2rem; border-radius: 16px; border: 1px solid var(--landing-border-soft); background: rgba(0, 0, 0, 0.28); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) inset; } .landing-testimonials__card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; } .landing-testimonials__avatar { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 12px; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.04em; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); } .landing-testimonials__avatar--a { background: linear-gradient(145deg, #2563eb, #4f46e5); } .landing-testimonials__avatar--b { background: linear-gradient(145deg, #7c3aed, #db2777); } .landing-testimonials__avatar--c { background: linear-gradient(145deg, #059669, #0d9488); } .landing-testimonials__avatar--d { background: linear-gradient(145deg, #d97706, #ea580c); } .landing-testimonials__avatar--e { background: linear-gradient(145deg, #e11d48, #be123c); } .landing-testimonials__avatar--f { background: linear-gradient(145deg, #0891b2, #2563eb); } .landing-testimonials__avatar--g { background: linear-gradient(145deg, #475569, #334155); } .landing-testimonials__avatar--h { background: linear-gradient(145deg, #6366f1, #8b5cf6); } .landing-testimonials__rating { flex-shrink: 0; user-select: none; } .landing-testimonials__stars { display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 0.35rem; list-style: none; margin: 0; padding: 0; } .landing-testimonials__star { display: flex; line-height: 0; } .landing-testimonials__star-icon { display: block; width: 1.5rem; height: 1.5rem; color: #fcd34d; filter: drop-shadow(0 1px 0 rgba(120, 53, 15, 0.35)) drop-shadow(0 0 10px rgba(251, 191, 36, 0.35)); } @media (min-width: 40em) { .landing-testimonials__star-icon { width: 1.625rem; height: 1.625rem; } } .landing-testimonials__quote { margin: 0 0 1rem; padding: 0; border: none; flex: 1; } .landing-testimonials__quote p { margin: 0; font-size: 0.875rem; line-height: 1.65; color: rgba(226, 232, 240, 0.92); } .landing-testimonials__footer { display: flex; flex-direction: column; gap: 0.15rem; margin-top: auto; padding-top: 0.75rem; border-top: 1px solid rgba(255, 255, 255, 0.06); } .landing-testimonials__name { font-size: 0.8125rem; font-weight: 700; font-style: normal; color: var(--landing-text); } .landing-testimonials__role { font-size: 0.75rem; color: var(--landing-text-muted); } .landing-testimonials__cta { margin: 1.75rem 0 0; text-align: center; } .landing-testimonials__link { font-size: 0.875rem; font-weight: 600; color: #60a5fa; text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } .landing-testimonials__link:hover { color: #93c5fd; border-bottom-color: rgba(147, 197, 253, 0.45); } .landing-testimonials__link:focus-visible { outline: 2px solid rgba(59, 130, 246, 0.55); outline-offset: 3px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { .landing-testimonials__track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 56rem; margin-left: auto; margin-right: auto; } .landing-testimonials__set[aria-hidden='true'] { display: none; } .landing-testimonials__marquee { -webkit-mask-image: none; mask-image: none; } .landing-testimonials__marquee:hover .landing-testimonials__track { animation-play-state: running; } } [data-mantine-color-scheme="light"] .landing-testimonials__badge { color: #2563eb; background: rgba(59, 130, 246, 0.08); border-color: rgba(59, 130, 246, 0.2); } [data-mantine-color-scheme="light"] .landing-testimonials__title { background: linear-gradient(135deg, #0f172a 0%, #2563eb 55%, #1d4ed8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } [data-mantine-color-scheme="light"] .landing-testimonials__desc { color: #64748b; } [data-mantine-color-scheme="light"] .landing-testimonials__marquee { border-color: #e2e8f0; background: linear-gradient(180deg, #fff 0%, #f8fafc 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 40px -24px rgba(15, 23, 42, 0.1); } [data-mantine-color-scheme="light"] .landing-testimonials__card { background: #fff; border-color: #e2e8f0; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); } [data-mantine-color-scheme="light"] .landing-testimonials__star-icon { color: #f59e0b; filter: drop-shadow(0 1px 0 rgba(180, 83, 9, 0.22)) drop-shadow(0 0 8px rgba(245, 158, 11, 0.3)); } [data-mantine-color-scheme="light"] .landing-testimonials__quote p { color: #475569; } [data-mantine-color-scheme="light"] .landing-testimonials__footer { border-top-color: #e2e8f0; } [data-mantine-color-scheme="light"] .landing-testimonials__name { color: #0f172a; } [data-mantine-color-scheme="light"] .landing-testimonials__role { color: #64748b; } [data-mantine-color-scheme="light"] .landing-testimonials__link { color: #2563eb; } [data-mantine-color-scheme="light"] .landing-testimonials__link:hover { color: #1d4ed8; } /* Hero — floating color orbs (kept inside bounds — negative offsets + blur + overflow caused top-left edge artifacts) */ .landing-hero__aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .landing-hero__orb { position: absolute; border-radius: 50%; /* Slightly softer blur — heavy blur + overflow:hidden was clipping into a harsh edge (esp. top-left) */ filter: blur(48px); opacity: 0.42; animation: landing-orb-float 18s ease-in-out infinite; } .landing-hero__orb--1 { width: min(32vw, 19rem); height: min(32vw, 19rem); background: radial-gradient(circle at 30% 30%, rgba(59, 130, 246, 0.4), rgba(37, 99, 235, 0.1)); top: 10%; left: 8%; } .landing-hero__orb--2 { width: min(30vw, 18rem); height: min(30vw, 18rem); background: radial-gradient(circle at 70% 40%, rgba(139, 92, 246, 0.35), transparent); top: 20%; right: 6%; animation-delay: -6s; } .landing-hero__orb--3 { width: min(24vw, 15rem); height: min(24vw, 15rem); background: radial-gradient(circle at 50% 50%, rgba(34, 211, 238, 0.2), transparent); bottom: 10%; left: 40%; animation-delay: -12s; } @keyframes landing-orb-float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(2%, 3%) scale(1.03); } 66% { transform: translate(-2%, 1%) scale(0.98); } } [data-mantine-color-scheme="light"] .landing-hero__orb { opacity: 0.28; filter: blur(56px); } /* Hero — highlight pills */ .landing-hero__pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; list-style: none; margin: 0 auto 1.5rem; padding: 0; position: relative; width: 100%; max-width: 22rem; } @media (min-width: 64em) { .landing-hero__pills { display: flex; flex-wrap: wrap; justify-content: flex-start; max-width: none; margin: 0 0 1.5rem; gap: 0.45rem; } } .landing-hero__pills li { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(147, 197, 253, 0.95); padding: 0.4rem 0.65rem; border-radius: 999px; background: rgba(59, 130, 246, 0.09); border: 1px solid rgba(59, 130, 246, 0.2); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12) inset; text-align: center; } @media (min-width: 64em) { .landing-hero__pills li { text-align: left; padding: 0.35rem 0.7rem; } } [data-mantine-color-scheme="light"] .landing-hero__pills li { color: #1d4ed8; background: rgba(59, 130, 246, 0.08); border-color: rgba(59, 130, 246, 0.2); box-shadow: none; } /* Feature cards — glass + lift */ .landing-features__card { position: relative; padding: 1.75rem 1.5rem; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.08); background: linear-gradient(165deg, rgba(30, 30, 36, 0.95) 0%, rgba(18, 18, 22, 0.98) 100%); box-shadow: 0 4px 24px -8px rgba(0, 0, 0, 0.35); overflow: hidden; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease, box-shadow 0.35s ease; } .landing-features__card::after { content: ''; position: absolute; top: 0; left: 1.25rem; right: 1.25rem; height: 3px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, #3b82f6, #8b5cf6, #22d3ee); opacity: 0; transform: scaleX(0.6); transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; } .landing-features__card:hover { transform: translateY(-6px); border-color: rgba(59, 130, 246, 0.35); box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(59, 130, 246, 0.15); } .landing-features__card:hover::after { opacity: 1; transform: scaleX(1); } .landing-features__card-icon { display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: 14px; background: linear-gradient(145deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.05) 100%); border: 1px solid rgba(59, 130, 246, 0.25); color: #93c5fd; margin-bottom: 1.25rem; } .landing-features__card-icon svg { width: 1.65rem; height: 1.65rem; } .landing-features__card-title::after { margin-top: 0.75rem; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #3b82f6, #60a5fa); width: 2.5rem; } [data-mantine-color-scheme="light"] .landing-features__card { background: linear-gradient(165deg, #fff 0%, #f8fafc 100%); border-color: #e2e8f0; box-shadow: 0 4px 24px -6px rgba(15, 23, 42, 0.08); } [data-mantine-color-scheme="light"] .landing-features__card:hover { border-color: rgba(59, 130, 246, 0.35); box-shadow: 0 20px 40px -12px rgba(37, 99, 235, 0.15); } [data-mantine-color-scheme="light"] .landing-features__card-icon { background: linear-gradient(145deg, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.04) 100%); border-color: rgba(59, 130, 246, 0.2); color: #2563eb; } /* Pricing — intro cluster */ .landing-pricing__wrap { display: flex; flex-direction: column; gap: 2rem; } .landing-pricing__intro { text-align: center; max-width: 40rem; margin-left: auto; margin-right: auto; } .landing-pricing__badge { display: inline-flex; align-items: center; padding: 0.35rem 0.9rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #93c5fd; background: rgba(59, 130, 246, 0.12); border: 1px solid rgba(59, 130, 246, 0.25); border-radius: 999px; margin-bottom: 0.75rem; } .landing-pricing__title { font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.2; margin: 0 0 0.5rem; background: linear-gradient(135deg, #fff 0%, #e0e7ff 45%, #93c5fd 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .landing-pricing__desc { font-size: 1rem; color: rgba(255, 255, 255, 0.5); margin: 0; line-height: 1.55; } [data-mantine-color-scheme="light"] .landing-pricing__badge { color: #1d4ed8; background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.22); } [data-mantine-color-scheme="light"] .landing-pricing__title { background: linear-gradient(135deg, #0f172a 0%, #2563eb 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } [data-mantine-color-scheme="light"] .landing-pricing__desc { color: #64748b; } /* Docs + CTA + Contact cards — slightly richer depth (overrides base engage cards) */ .landing-docs__card, .landing-cta__card, .landing-contact__card { border-radius: 20px; background: linear-gradient(165deg, rgba(28, 28, 34, 0.95) 0%, rgba(14, 14, 18, 0.98) 100%); border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: 0 8px 40px -12px rgba(0, 0, 0, 0.45); } [data-mantine-color-scheme="light"] .landing-docs__card, [data-mantine-color-scheme="light"] .landing-cta__card, [data-mantine-color-scheme="light"] .landing-contact__card { background: linear-gradient(165deg, #fff 0%, #f1f5f9 100%); border-color: #e2e8f0; box-shadow: 0 8px 32px -8px rgba(15, 23, 42, 0.1); } /* Section rhythm */ .landing-engage, .landing-discord, .landing-ecosystem, .landing-partners, .landing-testimonials, .landing-how, .landing-features, .landing-pricing, .landing-docs, .landing-cta, .landing-contact, .landing-faq { position: relative; } .landing-hero__explore { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; color: rgba(147, 197, 253, 0.88); text-decoration: none; text-underline-offset: 0.2em; transition: color 0.2s ease, transform 0.2s ease, text-decoration-color 0.2s ease; } .landing-hero__explore:hover { color: #bfdbfe; text-decoration: underline; text-decoration-color: rgba(147, 197, 253, 0.5); } .landing-hero__explore:hover .landing-hero__explore-arrow { transform: translateY(3px); } .landing-hero__explore-arrow { display: inline-block; transition: transform 0.25s ease; font-size: 1rem; line-height: 1; } [data-mantine-color-scheme="light"] .landing-hero__explore { color: #2563eb; } [data-mantine-color-scheme="light"] .landing-hero__explore:hover { color: #1d4ed8; } @media (min-width: 64em) { .landing-hero__explore { justify-content: flex-start; } } /* Ecosystem — languages & frameworks (CDN SVG marquees) */ .landing-ecosystem { position: relative; padding: 2.75rem 0 3rem; overflow: hidden; } .landing-ecosystem__veil { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 90% 55% at 50% -10%, var(--landing-mesh-1) 0%, transparent 52%), radial-gradient(ellipse 60% 40% at 100% 50%, var(--landing-mesh-2) 0%, transparent 45%); opacity: 1; } .landing-ecosystem__container { position: relative; z-index: 1; max-width: 72rem; margin-left: auto; margin-right: auto; padding-left: var(--mantine-spacing-md); padding-right: var(--mantine-spacing-md); } .landing-ecosystem__header { text-align: center; margin-bottom: 2.25rem; max-width: 40rem; margin-left: auto; margin-right: auto; } .landing-ecosystem__badge { display: inline-flex; align-items: center; padding: 0.35rem 0.9rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #93c5fd; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.22); border-radius: 999px; margin-bottom: 0.75rem; } .landing-ecosystem__title { font-size: clamp(1.5rem, 3.5vw, 2.125rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.2; margin: 0 0 0.5rem; background: linear-gradient(135deg, #fff 0%, #e0e7ff 38%, #93c5fd 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .landing-ecosystem__desc { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.5); margin: 0; line-height: 1.65; } .landing-ecosystem__bands { display: flex; flex-direction: column; gap: 1.75rem; } .landing-ecosystem__band-head { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 0.85rem; } .landing-ecosystem__band-icon { display: inline-flex; color: rgba(147, 197, 253, 0.65); } .landing-ecosystem__band-label { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); } .landing-ecosystem__marquee { overflow: hidden; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.07); background: linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, rgba(12, 12, 16, 0.5) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 48px -28px rgba(0, 0, 0, 0.55); -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .landing-ecosystem__marquee:hover .landing-ecosystem__track { animation-play-state: paused; } .landing-ecosystem__track { display: flex; width: max-content; gap: 0; will-change: transform; animation: landing-ecosystem-scroll 52s linear infinite; } .landing-ecosystem__marquee--reverse .landing-ecosystem__track { animation-duration: 60s; animation-direction: reverse; } @media (prefers-reduced-motion: reduce) { .landing-ecosystem__track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 56rem; margin-left: auto; margin-right: auto; } .landing-ecosystem__marquee { -webkit-mask-image: none; mask-image: none; } .landing-ecosystem__marquee:hover .landing-ecosystem__track { animation-play-state: running; } .landing-ecosystem__logos[aria-hidden="true"] { display: none; } } @keyframes landing-ecosystem-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .landing-ecosystem__logos { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.75rem; list-style: none; margin: 0; padding: 0.85rem 0.75rem; } .landing-ecosystem__logo { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 3.5rem; height: 3.5rem; padding: 0.5rem; border-radius: 14px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) inset; transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease, box-shadow 0.28s ease, background 0.25s ease; } .landing-ecosystem__logo:hover { transform: translateY(-4px) scale(1.04); border-color: rgba(59, 130, 246, 0.45); background: rgba(59, 130, 246, 0.08); box-shadow: 0 12px 28px -12px rgba(59, 130, 246, 0.35), 0 0 0 1px rgba(59, 130, 246, 0.12); } .landing-ecosystem__logo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35)); pointer-events: none; } .landing-ecosystem__footnote { text-align: center; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.28); margin: 2rem 0 0; line-height: 1.5; } [data-mantine-color-scheme="light"] .landing-ecosystem__veil { background: radial-gradient(ellipse 90% 55% at 50% -10%, rgba(59, 130, 246, 0.07) 0%, transparent 52%), radial-gradient(ellipse 60% 40% at 100% 50%, rgba(99, 102, 241, 0.04) 0%, transparent 45%); } [data-mantine-color-scheme="light"] .landing-ecosystem__badge { color: #2563eb; background: rgba(59, 130, 246, 0.08); border-color: rgba(59, 130, 246, 0.2); } [data-mantine-color-scheme="light"] .landing-ecosystem__title { background: linear-gradient(135deg, #0f172a 0%, #2563eb 55%, #1d4ed8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } [data-mantine-color-scheme="light"] .landing-ecosystem__desc { color: #64748b; } [data-mantine-color-scheme="light"] .landing-ecosystem__band-icon { color: #3b82f6; } [data-mantine-color-scheme="light"] .landing-ecosystem__band-label { color: #94a3b8; } [data-mantine-color-scheme="light"] .landing-ecosystem__marquee { border-color: #e2e8f0; background: linear-gradient(180deg, #fff 0%, #f8fafc 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 40px -24px rgba(15, 23, 42, 0.12); } [data-mantine-color-scheme="light"] .landing-ecosystem__logo { background: #fff; border-color: #e2e8f0; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } [data-mantine-color-scheme="light"] .landing-ecosystem__logo:hover { background: #f8fafc; border-color: rgba(59, 130, 246, 0.35); box-shadow: 0 12px 28px -12px rgba(59, 130, 246, 0.2), 0 0 0 1px rgba(59, 130, 246, 0.1); } [data-mantine-color-scheme="light"] .landing-ecosystem__logo img { filter: none; } [data-mantine-color-scheme="light"] .landing-ecosystem__footnote { color: #94a3b8; } /* Partners section layout — wide marquee tracks must not expand
(flex min-width) */ body.page-landing .landing-page > section.landing-partners { display: block; width: 100%; max-width: 100%; min-width: 0; margin-left: auto; margin-right: auto; box-sizing: border-box; } body.page-landing .landing-page .landing-partners__container { width: 100%; max-width: min(80rem, 100%); margin-left: auto; margin-right: auto; box-sizing: border-box; } /* Card + animation detail: ag_partners_marquee_print_landing_styles() partial */ /* How it works */ .landing-how { padding: 2rem 0 3rem; position: relative; } .landing-how__container { max-width: 56rem; margin-left: auto; margin-right: auto; padding-left: var(--mantine-spacing-md); padding-right: var(--mantine-spacing-md); } .landing-how__header { text-align: center; margin-bottom: 2.5rem; } .landing-how__badge { display: inline-flex; align-items: center; padding: 0.35rem 0.9rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #a5b4fc; background: rgba(99, 102, 241, 0.12); border: 1px solid rgba(99, 102, 241, 0.28); border-radius: 999px; margin-bottom: 0.75rem; } .landing-how__title { font-size: clamp(1.5rem, 3.5vw, 2.25rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.2; margin: 0 0 0.5rem; background: linear-gradient(135deg, #fff 0%, #e0e7ff 40%, #a5b4fc 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .landing-how__desc { font-size: 1rem; color: rgba(255, 255, 255, 0.5); margin: 0; line-height: 1.55; max-width: 36rem; margin-left: auto; margin-right: auto; } .landing-how__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; } @media (min-width: 52em) { .landing-how__steps { gap: 1.25rem; grid-template-columns: repeat(3, 1fr); align-items: stretch; } } .landing-how__step { position: relative; display: flex; flex-direction: column; gap: 0.5rem; padding: 1.5rem 1.35rem; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.08); background: linear-gradient(165deg, rgba(32, 32, 40, 0.6) 0%, rgba(16, 16, 22, 0.95) 100%); box-shadow: 0 8px 32px -16px rgba(0, 0, 0, 0.55); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease, box-shadow 0.35s ease; } .landing-how__step:hover { transform: translateY(-4px); border-color: rgba(99, 102, 241, 0.35); box-shadow: 0 20px 48px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(99, 102, 241, 0.12); } .landing-how__num { font-family: 'Outfit', sans-serif; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.35); margin-bottom: 0.25rem; } .landing-how__step-title { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.5rem; color: #fff; line-height: 1.3; } .landing-how__step-text { font-size: 0.875rem; color: rgba(255, 255, 255, 0.45); margin: 0; line-height: 1.6; } [data-mantine-color-scheme="light"] .landing-how__badge { color: #4f46e5; background: rgba(99, 102, 241, 0.1); border-color: rgba(99, 102, 241, 0.35); } [data-mantine-color-scheme="light"] .landing-how__title { background: linear-gradient(135deg, #0f172a 0%, #4f46e5 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } [data-mantine-color-scheme="light"] .landing-how__desc { color: #64748b; } [data-mantine-color-scheme="light"] .landing-how__step { background: linear-gradient(165deg, #fff 0%, #f8fafc 100%); border-color: #e2e8f0; box-shadow: 0 4px 24px -8px rgba(15, 23, 42, 0.08); } [data-mantine-color-scheme="light"] .landing-how__step:hover { border-color: rgba(99, 102, 241, 0.35); box-shadow: 0 16px 40px -12px rgba(79, 70, 229, 0.12); } [data-mantine-color-scheme="light"] .landing-how__num { color: #94a3b8; } [data-mantine-color-scheme="light"] .landing-how__step-title { color: #0f172a; } [data-mantine-color-scheme="light"] .landing-how__step-text { color: #64748b; } @media (prefers-reduced-motion: reduce) { .landing-hero__orb, .landing-hero__highlight, .landing-docs__card::before, .landing-cta__card::before, .landing-contact__card::before, .landing-faq__card::before { animation: none !important; } .landing-faq__item[open] .landing-faq__panel { animation: none; } .landing-hero__highlight { background-size: auto; } .landing-features__card:hover, .landing-how__step:hover { transform: none; } }