/* СГЕНЕРИРОВАН из preview/index.html скриптом tools/build-landing.py.
Руками не править: правки затрутся при следующей сборке. */
@font-face {
font-family: 'Banana Grotesk';
src: url('/assets/fonts/banana-grotesk-light.woff2') format('woff2');
font-weight: 300;
font-display: swap;
}
@font-face {
font-family: 'Banana Grotesk';
src: url('/assets/fonts/banana-grotesk-regular.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
@font-face {
/* Banana Grotesk Medium — registered at 500 so font-weight:500 renders
the real medium face (no synthetic faux-bold on a premium site) */
font-family: 'Banana Grotesk';
src: url('/assets/fonts/banana-grotesk-medium.woff2') format('woff2');
font-weight: 500;
font-display: swap;
}
@font-face {
font-family: 'Banana Grotesk Mono';
src: url('/assets/fonts/banana-grotesk-mono-regular.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'Banana Grotesk Mono';
src: url('/assets/fonts/banana-grotesk-mono-semibold.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/* Touch: убираем 300ms-задержку и серый тап-хайлайт на интерактивных элементах */
a, button, [role="button"], summary, label, input, select, textarea {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Якорные переходы (skip-link, нав-якори): отступ под фикс-шапку (56px), чтобы верх секции не уезжал под неё */
section[id], #main { scroll-margin-top: 72px; }
:root {
--c-bg: #06060c;
--c-surface-1: #12121a;
--c-surface-2: #18181e;
--c-surface-3: #24242a;
--c-field: #1e1e24;
--c-accent: #4cd7f4;
--c-accent-rgb: 76, 215, 244;
--c-green: #00e100;
--c-red: #fc0a52;
--c-border: hsla(0, 0%, 100%, 0.05);
--c-border-strong: hsla(0, 0%, 100%, 0.1);
--c-text-1: #fff;
--c-text-2: #a5a5a8;
--c-text-3: #8a8a92;
--c-text-dark: #06060c;
--font-ui: 'Banana Grotesk', sans-serif;
--font-mono: 'Banana Grotesk Mono', monospace;
/* Radius scale — one source of truth */
--r-sm: 8px; /* small controls, chips */
--r-md: 12px; /* cards */
--r-lg: 16px; /* large cards / frames */
--r-pill: 100px;/* all primary CTAs */
}
html { scroll-behavior: smooth; overflow-x: hidden; color-scheme: dark; }
/* Respect reduced-motion: drop CSS smooth scrolling (anchor jumps, back-to-top) */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/* Hide the native scrollbar (Lenis provides smooth scrolling) */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar,
body::-webkit-scrollbar { width: 0; height: 0; display: none; }
body {
font-family: var(--font-ui);
background: var(--c-bg);
color: var(--c-text-1);
overflow-x: hidden;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
/* ===================== HEADER ===================== */
.header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 202;
background: rgba(6, 6, 12, 0.55);
border-bottom: none;
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
}
.header-inner {
width: 100%;
height: 56px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
}
.header-left {
display: flex;
align-items: center;
gap: 32px;
}
.logo {
display: flex;
flex-shrink: 0;
align-items: center;
gap: 8px;
font-size: 18px;
font-weight: 400;
letter-spacing: 3px;
color: var(--c-text-1);
transition: opacity 0.2s;
}
.logo:hover { opacity: 0.8; }
.logo img { height: 28px; width: auto; }
.nav-links {
display: flex;
align-items: center;
gap: 1px;
list-style: none;
margin-left: 12px;
}
.nav-links a,
.nav-dropdown-btn {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 400;
line-height: 16px;
color: var(--c-text-3);
padding: 8px 18px;
border-radius: 6px;
transition: color 0.2s;
background: none;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
}
.nav-links a:hover,
.nav-dropdown-btn:hover { color: var(--c-text-1); }
.nav-links a.nav-active { color: var(--c-text-1); font-weight: 400; }
.nav-dropdown {
position: relative;
}
.nav-dropdown-btn svg {
width: 10px;
height: 10px;
opacity: 0.5;
transition: transform 0.2s;
}
.nav-dropdown:hover .nav-dropdown-btn svg,
.nav-dropdown:focus-within .nav-dropdown-btn svg {
transform: rotate(180deg);
}
.nav-dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
padding-top: 8px;
min-width: 160px;
}
.nav-dropdown-menu-inner {
background: rgba(18, 18, 24, 0.98);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
padding: 6px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
display: block;
}
.nav-dropdown-menu a {
display: block;
padding: 8px 12px;
font-family: var(--font-ui);
font-size: 13px;
color: var(--c-text-3);
border-radius: 5px;
transition: color 0.15s, background 0.15s;
}
.nav-dropdown-menu a:hover {
color: var(--c-text-1);
background: rgba(255,255,255,0.06);
}
.header-right {
display: flex;
align-items: center;
gap: 4px;
}
/* ===================== HAMBURGER MENU ===================== */
.hamburger-btn {
display: none;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: rgba(255,255,255,0.06);
border: none;
border-radius: 8px;
cursor: pointer;
padding: 0;
flex-shrink: 0;
transition: background 0.15s;
}
.hamburger-btn:hover { background: rgba(255,255,255,0.08); }
.hamburger-lines {
display: flex;
flex-direction: column;
width: 18px;
height: 18px;
position: relative;
}
.hamburger-lines span {
display: block;
width: 18px;
height: 1.5px;
background: var(--c-text-2);
border-radius: 1px;
position: absolute;
transition: top 0.25s cubic-bezier(0.4,0,0.2,1), transform 0.25s cubic-bezier(0.4,0,0.2,1), opacity 0.15s ease;
}
.hamburger-lines span:nth-child(1) { top: 4px; }
.hamburger-lines span:nth-child(2) { top: 8.5px; }
.hamburger-lines span:nth-child(3) { top: 13px; }
.hamburger-btn.active .hamburger-lines span:nth-child(1) {
top: 8.5px;
transform: rotate(45deg);
}
.hamburger-btn.active .hamburger-lines span:nth-child(2) {
opacity: 0;
}
.hamburger-btn.active .hamburger-lines span:nth-child(3) {
top: 8.5px;
transform: rotate(-45deg);
}
.menu-overlay {
position: fixed;
top: 52px;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.55);
z-index: 200;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease;
}
.menu-overlay.active { opacity: 1; visibility: visible; }
.menu-panel {
position: fixed;
top: 52px;
left: 0;
right: 0;
bottom: 0;
background: rgba(6,6,12,0.97);
-webkit-backdrop-filter: blur(40px);
backdrop-filter: blur(40px);
z-index: 201;
display: none;
flex-direction: column;
overflow-y: auto;
overscroll-behavior: contain;
padding: 14px 24px calc(16px + env(safe-area-inset-bottom, 0px));
opacity: 0;
animation: menuFadeIn 0.25s ease forwards;
}
.menu-panel.active { display: flex; }
@keyframes menuFadeIn {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.menu-list {
flex: 1;
padding: 0;
}
.menu-item {
border-bottom: 1px solid var(--c-border);
}
.menu-item > a {
display: block;
padding: 16px 0;
font-family: var(--font-ui);
font-size: 15px;
font-weight: 400;
color: var(--c-text-1);
transition: color 0.2s;
}
.menu-item > a:hover { color: var(--c-accent); }
.menu-item-toggle {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 0;
font-family: var(--font-ui);
font-size: 15px;
font-weight: 400;
color: var(--c-text-1);
cursor: pointer;
background: none;
border: none;
width: 100%;
text-align: left;
}
.menu-item-toggle svg {
width: 16px;
height: 16px;
color: var(--c-text-3);
transition: transform 0.25s;
}
.menu-item.open .menu-item-toggle svg { transform: rotate(180deg); }
.menu-sub {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.menu-item.open .menu-sub { max-height: 300px; }
.menu-sub a {
display: block;
padding: 10px 0 10px 16px;
font-family: var(--font-ui);
font-size: 14px;
color: var(--c-text-3);
border-bottom: 1px solid var(--c-border);
transition: color 0.2s;
}
.menu-sub a:last-child { border-bottom: none; }
.menu-sub a:hover { color: var(--c-text-1); }
.menu-bottom {
margin-top: auto;
padding: 16px 0 env(safe-area-inset-bottom, 0px);
flex-shrink: 0;
}
.menu-pwa {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 0;
color: var(--c-text-3);
font-family: var(--font-ui);
font-size: 13px;
text-decoration: none;
}
.menu-pwa svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--c-text-3); }
.menu-socials {
display: flex;
gap: 8px;
padding-top: 12px;
}
.menu-social-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
background: rgba(255,255,255,0.06);
transition: background 0.2s;
}
.menu-social-btn:hover { background: rgba(255,255,255,0.12); }
.menu-social-btn svg { width: 18px; height: 18px; color: var(--c-text-2); }
/* ===================== HERO ===================== */
.hero {
position: relative;
z-index: 2;
min-height: 100vh;
display: flex;
align-items: stretch;
overflow: hidden;
/* Hero keeps its #06060c body tone but feathers its bottom edge into pure
black so there's no seam with the #000 coins section below. The rays
video composites via mix-blend lighten, so bright rays stay bright while
only the dark background dissolves to #000. */
background: linear-gradient(180deg, #06060c 0%, #06060c 72%, #000 100%);
}
/* Background canvas (disabled for now) */
.hero-matrix {
display: none;
}
.hero-glow-mobile {
display: none;
}
.hero-split {
position: relative;
z-index: 2;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 100vh;
padding: 0 0 0 max(24px, calc((100vw - 1500px) / 2 + 24px));
overflow: hidden;
}
/* ---- LEFT ---- */
.hero-left {
display: flex;
flex-direction: column;
justify-content: center;
padding: 70px 60px 40px 0;
gap: 0;
min-width: 0;
}
.hero-left h1 {
font-family: var(--font-ui);
font-size: clamp(56px, 5.8vw, 88px);
font-weight: 400;
line-height: 1.0;
letter-spacing: -2.5px;
color: var(--c-text-1);
margin-bottom: 24px;
}
.hero-left h1 .line { display: block; overflow: hidden; }
.hero-left h1 .line-inner { display: block; }
.hero-left .hero-desc {
font-size: 17px;
line-height: 1.7;
color: var(--c-text-2);
max-width: 480px;
margin-bottom: 28px;
}
/* Input + CTA */
/* Hero CTA Buttons */
.hero-buttons {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 36px;
}
/* ===================== LIQUID METAL BUTTON (premium "Start Trading" style) =====================
Dark pill with an animated liquid-metal rim (WebGL2). Layers: canvas (z:-1) →
dark body inset 2px (z:0) → icon + label (z:1). Drives via liquid-metal-button.js. */
.lm-btn {
position: relative;
isolation: isolate;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 48px;
padding: 0 26px;
border-radius: var(--r-pill);
overflow: hidden;
text-decoration: none;
cursor: pointer;
font-family: 'Banana Grotesk', var(--font-ui), sans-serif;
font-size: 15px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
transform: scale(1);
transition: box-shadow 0.15s, transform 0.15s;
box-shadow: rgba(0,0,0,0.3) 0 0 0 1px;
}
.lm-btn:hover {
box-shadow: rgba(0,0,0,0.4) 0 0 0 1px;
}
.lm-btn:active { transform: scale(0.97); }
.lm-btn .lm-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: -1;
display: block;
border-radius: inherit;
contain: strict;
}
.lm-btn .lm-fill {
position: absolute;
inset: 2px;
border-radius: inherit;
background: linear-gradient(rgb(32,32,32) 0%, rgb(0,0,0) 100%);
z-index: 0;
pointer-events: none;
}
.lm-btn .lm-ico {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
color: #d4d4d4;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
transition: color 0.3s;
}
.lm-btn .lm-ico svg { width: 18px; height: 18px; display: block; }
.lm-btn .lm-label {
position: relative;
z-index: 1;
color: #d4d4d4;
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
transition: color 0.3s;
}
.lm-btn:hover .lm-ico,
.lm-btn:hover .lm-label { color: #fff; }
/* WebGL-unavailable fallback — clean dark pill with a hairline rim */
.lm-btn.lm-nogl { background: linear-gradient(rgb(32,32,32) 0%, rgb(0,0,0) 100%); }
.lm-btn.lm-nogl .lm-fill { inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
/* size variants */
.lm-btn--sm { height: 36px; padding: 0 18px; font-size: 13px; gap: 7px; }
.lm-btn--sm .lm-ico svg { width: 15px; height: 15px; }
.lm-btn--lg { height: 52px; padding: 0 34px; font-size: 15px; }
/* "Explore the API"-style secondary: dark vertical gradient, hairline white rim,
neutral label + up-right arrow; lifts slightly on hover, text goes white. */
.api-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 48px;
padding: 0 24px;
border-radius: var(--r-pill);
background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
box-shadow: 0 0 0 1px rgba(255,255,255,0.1);
transition: transform 0.3s;
cursor: pointer;
text-decoration: none;
font-family: 'Banana Grotesk', var(--font-ui), sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
}
.api-btn:hover { transform: scale(1.02); }
.api-btn:active { transform: scale(0.98); }
.api-btn .api-label { color: #a3a3a3; transition: color 0.3s; }
.api-btn svg { width: 14px; height: 14px; color: #a3a3a3; transition: color 0.3s; }
.api-btn:hover .api-label,
.api-btn:hover svg { color: #fff; }
/* ---- STATS (inside hero-left) ---- */
.hero-stats {
display: grid;
grid-template-columns: repeat(3, auto);
gap: 32px;
}
.hero-stat {
display: flex;
flex-direction: column;
gap: 8px;
}
.hero-stat .stat-label {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--c-text-2);
}
.hero-stat .stat-value {
font-family: var(--font-ui);
font-size: clamp(26px, 2.8vw, 36px);
font-weight: 400;
color: var(--c-text-1);
letter-spacing: -0.5px;
}
/* ---- RIGHT: browser frame from bottom-right ---- */
.hero-right {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 100px 40px 40px 20px;
min-width: 0;
overflow: hidden;
}
/* ---- Fluid generative-art Background (Noise · OCEAN · ASCII) ---- */
.hero-fluid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
overflow: hidden;
pointer-events: none;
background: var(--c-bg);
/* dissolve the opaque background into the page at the bottom
(and slightly at the top) so there is no hard section seam */
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 78%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 78%, transparent 100%);
}
/* ASCII-magic looping video fills the hero; veil over it keeps text readable */
.hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border: 0;
pointer-events: none;
/* Composite the rays additively over the page background: pure-black video
areas (and any near-black GPU green specks) fall to the background color,
so there's no darker "video rectangle" and no green — only the rays show. */
mix-blend-mode: lighten;
/* Stay invisible (black hero) until playback actually paints, so loading
never shows the frozen poster frame — the rays fade in already in motion
from frame 0. JS flips opacity to 1 on the first "playing" event. */
opacity: 0;
transition: opacity 0.45s ease;
}
.screen-frame {
position: relative;
z-index: 1;
width: 100%;
border-radius: 16px;
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.08);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
padding: 8px;
-webkit-mask: linear-gradient(#000 75%, transparent 100%);
mask: linear-gradient(#000 75%, transparent 100%);
overflow: hidden;
box-shadow: 0 0 40px rgba(0,180,255,0.06), 0 0 80px rgba(0,180,255,0.03);
/* Laid-back 3D tilt to match the product cards. The GSAP hero reveal
re-applies this via rotationX/transformPerspective (it owns the
inline transform); this base rule covers the reduced-motion path. */
transform: perspective(1500px) rotateX(13deg);
transform-origin: center center;
}
.screen-inner {
position: relative;
width: 100%;
border-radius: inherit;
overflow: hidden;
}
.screen-inner > img {
display: block;
width: 100%;
height: auto;
border-radius: inherit;
object-fit: cover;
}
/* ---- Live Chart (app.zexo.io style) ---- */
.chart-browser-content {
display: flex;
flex-direction: column;
}
.chart-canvas-wrap {
position: relative;
flex: 1;
min-height: 480px;
}
#live-chart {
width: 100%;
height: 100%;
background: #0c0c14;
}
#live-chart #tv-attr-logo,
#live-chart a#tv-attr-logo { display: none !important; }
.screen-inner::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 35%;
background: linear-gradient(to top, rgba(6,6,12,0.9) 0%, rgba(6,6,12,0.4) 50%, transparent 100%);
pointer-events: none;
z-index: 2;
}
.screen-inner::before {
content: '';
position: absolute;
top: 0; left: 0; bottom: 0;
width: 20%;
background: linear-gradient(to right, rgba(6,6,12,0.6) 0%, transparent 100%);
pointer-events: none;
z-index: 2;
}
/* ===================== INSIDE ZEXO SECTION ===================== */
.inside-section {
position: relative;
padding: 120px 0;
background: #000;
z-index: 2;
overflow: hidden;
}
.inside-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
}
.inside-title {
font-family: var(--font-ui);
font-size: clamp(36px, 5vw, 64px);
font-weight: 400;
letter-spacing: -2px;
color: var(--c-text-1);
margin: 0 0 12px;
}
.inside-subtitle {
font-family: var(--font-ui);
font-size: 17px;
line-height: 1.6;
color: rgba(255,255,255,0.6);
max-width: 480px;
margin: 0 0 48px;
}
.inside-grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 60px;
align-items: start;
}
/* Accordion */
.inside-item {
border-bottom: 1px solid rgba(255,255,255,0.06);
padding: 24px 0;
cursor: pointer;
transition: border-color 0.3s;
}
.inside-item:first-child { border-top: 1px solid rgba(255,255,255,0.06); }
.inside-item:hover { border-color: rgba(255,255,255,0.12); }
.inside-head {
display: flex;
align-items: center;
gap: 14px;
font-family: var(--font-ui);
font-size: 18px;
font-weight: 400;
color: rgba(255,255,255,0.6);
transition: color 0.3s;
}
.inside-step {
font-family: var(--font-mono);
font-size: 13px;
color: rgba(255,255,255,0.2);
flex-shrink: 0;
transition: color 0.3s;
}
.inside-item.active .inside-step { color: rgba(76,215,244,0.6); }
.inside-item:hover .inside-head { color: rgba(255,255,255,0.6); }
.inside-item.active .inside-head { color: var(--c-text-1); }
.inside-tag {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 1.5px;
color: var(--c-accent, #4cd7f4);
font-weight: 400;
margin-left: 6px;
}
.inside-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
}
.inside-item.active .inside-body { max-height: 200px; }
.inside-desc {
font-family: var(--font-ui);
font-size: 15px;
line-height: 1.7;
color: rgba(255,255,255,0.55);
margin: 14px 0 18px;
padding-left: 36px;
}
.inside-progress {
height: 2px;
background: rgba(255,255,255,0.08);
border-radius: 2px;
overflow: hidden;
margin-left: 36px;
}
.inside-progress > span {
display: block;
height: 100%;
width: 0;
background: linear-gradient(90deg, rgba(76,215,244,0.6), rgba(76,215,244,0.22));
border-radius: 2px;
}
/* Progress bar animated by GSAP */
/* Inside scene container (raster layered stack) */
.inside-scene {
position: relative;
height: 560px;
overflow: visible;
}
/* Inside diagram - raster layered stack (Spline-rendered, replaces the WebGL canvas) */
#inside-scene .xt-art { position:absolute; left:50%; top:50%; width:572px; height:572px; transform:translate(-50%,-50%); z-index:1; }
#inside-scene .xt-layer { position:absolute; left:0; top:0; width:572px; height:572px; }
#inside-scene .xt-layer img { display:block; width:100%; height:100%; }
#inside-scene .xt-grid { left:-37px; top:-41px; width:647px; height:654px; opacity:1; -webkit-mask:radial-gradient(closest-side,#000 55%,transparent 100%); mask:radial-gradient(closest-side,#000 55%,transparent 100%); }
#inside-scene .xt-slab { opacity:0; transform:translateY(-48px) scale(1.015); transform-origin:50% 50%; transition:opacity .55s ease, transform .9s cubic-bezier(.22,.7,.3,1); will-change:opacity,transform; }
#inside-scene .xt-slab.on { opacity:1; transform:none; }
#inside-scene .xt-conn { position:absolute; opacity:0; transition:opacity .45s ease; pointer-events:none; z-index:3; }
#inside-scene .xt-conn.on { opacity:1; }
#inside-scene .xt-conn svg { display:block; overflow:visible; }
#inside-scene .xt-pill-wrap { position:absolute; opacity:0; transition:opacity .45s ease; pointer-events:none; z-index:3; }
#inside-scene .xt-pill-wrap.on { opacity:1; }
#inside-scene .xt-pill { display:inline-flex; align-items:center; font-family:var(--font-mono); font-size:12px; line-height:1; letter-spacing:.96px; text-transform:uppercase; color:rgba(255,255,255,.7); background:rgba(255,255,255,.05); border-radius:20px; padding:7px 12px 6px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); white-space:nowrap; }
/* settlement ripple on the Solana slab: rings lie in the slab plane (ry/rx matches
the render's isometry, rotated by its 3.3° tilt) and run a single pass each time
the slab becomes active — no infinite keyframes anywhere in this section. */
#inside-scene .xt-ripple { position:absolute; left:282px; top:334px; opacity:0; transition:opacity .45s ease; pointer-events:none; z-index:2; }
#inside-scene .xt-ripple.on { opacity:1; }
#inside-scene .xt-ripple i { position:absolute; left:0; top:0; width:150px; height:87px; margin:-43px 0 0 -75px; border:1px solid rgba(76,215,244,.55); border-radius:50%; transform:rotate(-3.3deg) scale(.3); opacity:0; }
#inside-scene .xt-ripple.on i { animation:xt-ripple 2.8s cubic-bezier(.2,.6,.3,1) forwards; }
#inside-scene .xt-ripple.on i:nth-child(2) { animation-delay:.55s; }
#inside-scene .xt-ripple.on i:nth-child(3) { animation-delay:1.1s; }
@keyframes xt-ripple {
0% { transform:rotate(-3.3deg) scale(.3); opacity:0; }
18% { opacity:.7; }
100% { transform:rotate(-3.3deg) scale(2.4); opacity:0; }
}
/* validator grid: dots sit in the slab plane, the ripple lights them as it passes */
#inside-scene .xt-nodes { position:absolute; left:282px; top:334px; opacity:0; transition:opacity .45s ease; pointer-events:none; z-index:2; }
#inside-scene .xt-nodes.on { opacity:1; }
#inside-scene .xt-nodes b {
position:absolute; left:0; top:0; display:block;
border:1px solid rgba(76,215,244,.13); border-radius:50%;
transform:rotate(-3.3deg);
}
#inside-scene .xt-nodes i {
position:absolute; width:4px; height:4px; margin:-2px 0 0 -2px;
border-radius:50%; background:#4cd7f4; opacity:.34;
}
#inside-scene .xt-nodes.on i { animation:xt-node 1.5s ease-out var(--delay,0s) forwards; }
@keyframes xt-node {
0% { opacity:.34; box-shadow:none; transform:scale(1); }
22% { opacity:1; box-shadow:0 0 9px 2px rgba(76,215,244,.6); transform:scale(1.9); }
100% { opacity:.34; box-shadow:none; transform:scale(1); }
}
@media (prefers-reduced-motion: reduce) {
#inside-scene .xt-ripple.on i { animation:none; opacity:.35; transform:rotate(-3.3deg) scale(1.5); }
#inside-scene .xt-ripple.on i:nth-child(2) { transform:rotate(-3.3deg) scale(2.1); opacity:.22; }
#inside-scene .xt-ripple.on i:nth-child(3) { transform:rotate(-3.3deg) scale(2.7); opacity:.12; }
#inside-scene .xt-nodes.on i { animation:none; opacity:.3; }
}
@media (max-width: 600px){ #inside-scene .xt-art { transform:translate(-50%,-50%) scale(.78); } }
.inside-labels {
position: absolute;
left: 0; right: 0; bottom: 16px;
display: flex;
justify-content: center;
gap: 32px;
}
.inside-labels span {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 1.5px;
color: rgba(255,255,255,0.25);
transition: color 0.3s;
cursor: pointer;
padding: 6px 10px;
}
.inside-labels span.on { color: rgba(76,215,244,0.85); }
@media (prefers-reduced-motion: reduce) {
.inside-item.active .inside-progress > span { animation: none; width: 100%; }
/* Motion system: drop hover lifts so nothing translates for reduced-motion users */
.products-grid:hover .product-card:hover,
.security-card:hover { transform: none; }
}
/* ===================== PRODUCTS SECTION ===================== */
.products-section {
position: relative;
padding: 120px 0 120px;
background: #000;
z-index: 2;
overflow: hidden;
}
/* Grid bg — hidden */
.products-grid-bg {
display: none;
}
.products-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
position: relative;
z-index: 2;
}
.products-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 22px;
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(255,255,255,0.45);
background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
margin-bottom: 32px;
backdrop-filter: blur(12px);
}
.products-badge::before,
.products-badge::after {
content: '•';
font-size: 9px;
color: var(--c-accent);
opacity: 0.85;
}
.products-title {
font-family: var(--font-ui);
font-size: clamp(42px, 5.5vw, 80px);
font-weight: 400;
line-height: 1.08;
letter-spacing: -2px;
margin-bottom: 80px;
color: var(--c-text-1);
}
.products-title em {
font-style: normal;
}
.products-grid {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.product-card {
position: relative;
z-index: 1;
background: transparent;
border: 1px solid transparent;
padding: 36px;
display: flex;
flex-direction: column;
min-height: 420px;
transition: opacity 0.4s ease, background 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
cursor: pointer;
}
/* Gradient corner border — accent at bottom-left, white at top-right, fading along edges */
.product-card::before {
content: '';
position: absolute;
inset: 0;
border: 1px solid;
border-image: linear-gradient(45deg, var(--c-accent) 0%, rgba(255,255,255,0.12) 15%, transparent 30%, transparent 70%, rgba(255,255,255,0.18) 100%) 1;
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
z-index: 3;
}
/* Hover: active card lights up, others dim */
.products-grid:hover .product-card {
opacity: 0.3;
}
.products-grid:hover .product-card:hover {
opacity: 1;
background: rgba(255,255,255,0.015);
transform: translateY(-4px);
}
.products-grid:hover .product-card:hover::before {
opacity: 1;
}
/* Screenshot frame — tilted 3D panel inside a real bezel (dark frame band
with a top light edge + bottom shadow edge), depth shadow and edge
darkening (extended.exchange style). Straightens on hover. */
.product-card-img {
width: 100%;
border-radius: 18px;
overflow: hidden;
position: relative;
padding: 8px;
/* glassy bezel: cool dark fill + a soft sheen lit from the top-left */
background:
linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.03) 24%, rgba(255,255,255,0) 52%),
linear-gradient(158deg, #30303a 0%, #18181f 44%, #0a0a0e 100%);
box-shadow:
0 50px 95px -34px rgba(0,0,0,0.92),
0 24px 48px -24px rgba(0,0,0,0.55),
inset 0 1px 0 rgba(255,255,255,0.30),
inset 0 -2px 6px rgba(0,0,0,0.55);
margin-bottom: 28px;
flex-shrink: 0;
transform: perspective(1500px) rotateX(13deg);
transform-origin: center center;
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s ease;
will-change: transform;
}
/* Edge darkening (vignette) — sits above the screenshot, fades on hover */
.product-card-img::before {
content: '';
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
opacity: 1;
/* Atmospheric bottom melt — screenshot dissolves into the pure-black
section. Multi-stop eased curve (no banding); the top/centre stays
fully clear so image detail/quality is untouched. */
background: linear-gradient(to top,
#000 0%,
rgba(0,0,0,0.98) 6%,
rgba(0,0,0,0.9) 13%,
rgba(0,0,0,0.76) 21%,
rgba(0,0,0,0.56) 30%,
rgba(0,0,0,0.36) 39%,
rgba(0,0,0,0.18) 48%,
rgba(0,0,0,0.06) 57%,
transparent 66%);
transition: opacity 0.6s ease;
}
/* Glass edge — a 1px gradient ring that catches light at the top-left and
fades around the frame (mask trick: border-only gradient). Reads as a
polished glass/metal bezel rather than a flat outline. */
.product-card-img::after {
content: '';
position: absolute;
inset: 0;
z-index: 4;
border-radius: inherit;
padding: 1px;
pointer-events: none;
background: linear-gradient(150deg,
rgba(255,255,255,0.6) 0%,
rgba(255,255,255,0.16) 15%,
rgba(255,255,255,0.02) 38%,
rgba(255,255,255,0) 62%,
rgba(255,255,255,0.06) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
/* Hover: card straightens and brightens (vignette clears) */
.product-card:hover .product-card-img {
transform: perspective(1500px) rotateX(0deg);
box-shadow:
0 60px 110px -34px rgba(0,0,0,0.95),
0 28px 56px -26px rgba(0,0,0,0.6),
inset 0 1px 0 rgba(255,255,255,0.34),
inset 0 -2px 6px rgba(0,0,0,0.55);
}
.product-card:hover .product-card-img::before {
opacity: 0;
}
/* is a WebP-with-PNG-fallback wrapper; display:contents keeps it
out of the box tree so the ![]()
sizing rules below apply unchanged. */
.product-card-img picture {
display: contents;
}
.product-card-img img {
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
object-fit: cover;
object-position: top left;
display: block;
border-radius: 11px;
box-shadow: 0 0 0 1px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.06);
}
/* Body — always visible, pushes to bottom */
.product-card-body {
margin-top: auto;
position: relative;
display: flex;
align-items: flex-end;
gap: 20px;
}
.product-card-divider {
display: none;
}
.product-card-text {
flex: 1;
}
.product-card-body h3 {
font-family: var(--font-ui);
font-size: 22px;
font-weight: 400;
color: var(--c-text-1);
line-height: 1.4;
}
.product-card-body h3 span {
font-weight: 400;
color: var(--c-text-2);
}
.product-card-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
flex-shrink: 0;
white-space: nowrap;
font-family: 'Banana Grotesk', sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
color: var(--c-accent);
background: transparent;
border: 1px solid var(--c-accent);
border-radius: var(--r-pill);
cursor: pointer;
text-decoration: none;
transition: background-color 0.2s;
}
.product-card-btn:hover {
background: rgba(76, 215, 244, 0.08);
}
/* ===================== REFERRAL SECTION ===================== */
/* ===================== SEASON / PTS =====================
Заменила секцию про реферальные 60%: такой программы нет, в приложении
реферал даёт 0.25% со ставок. Реальная механика - сезоны и поинты,
поэтому секция построена вокруг них. Каркас прежний (badge → заголовок →
подзаголовок → визуал → карточки → CTA): по нему живут все секции. */
.season-section {
position: relative;
padding: 120px 0 100px;
background: #000;
text-align: center;
overflow: hidden;
z-index: 2;
}
.season-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
position: relative;
z-index: 2;
}
.season-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 22px;
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(255,255,255,0.45);
background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
margin-bottom: 32px;
backdrop-filter: blur(12px);
}
.season-badge::before,
.season-badge::after {
content: '2';
font-size: 9px;
color: var(--c-accent);
opacity: 0.85;
}
.season-title {
font-family: var(--font-ui);
font-size: clamp(42px, 5.5vw, 82px);
font-weight: 400;
line-height: 1.05;
letter-spacing: -2px;
margin-bottom: 28px;
color: var(--c-text-1);
}
.season-title .highlight { color: var(--c-accent); font-weight: 400; }
.season-desc {
font-family: var(--font-ui);
font-size: 17px;
line-height: 1.7;
color: var(--c-text-3);
max-width: 620px;
margin: 0 auto 56px;
}
/* ---- Луч PTS ----
Геометрия снята с hero apptics.ai покадрово: у них сцена нарисована в Rive
и отдаётся одним canvas 1440x720, поэтому копировать нечего - можно только
повторить числа. Все размеры ниже это их пиксели один в один, наша ширина
1200 просто кроп их 1440, как у них 1024 кроп 1440.
Что важно не «улучшать»: луч, ядро и линия у них статичны полностью, дифф
двух кадров через 2 секунды внутри конуса даёт ноль отличий. Двигаются
только карточки. Любая пульсация тут - уход от эталона. */
.pts-beam {
position: relative;
height: 752px; /* 720 эталона + 32 под дно: см. .season-pool */
margin: 0 auto 40px;
overflow: hidden;
/* маски тут нет намеренно: она срезала основание конуса. Края гасим
на самих рядах, как в оригинале */
}
/* ---- ось: линия, ядро, конус ---- */
.beam-line {
position: absolute;
left: 50%; top: 0;
width: 15px; height: 258px; /* +13: заходит под ядро, чтобы hover не рвал стык */
transform: translateX(-50%);
background: linear-gradient(180deg,
rgba(76,215,244,0) 0%,
rgba(226,248,255,0.95) 8.5%,
rgba(140,229,250,0.95) 25%,
#4cd7f4 35%, #45cdea 100%);
pointer-events: none;
z-index: 6;
}
.beam-core {
position: absolute;
left: 50%; top: 245px;
width: 106px; height: 106px;
margin-left: -53px;
display: flex; align-items: center; justify-content: center;
border-radius: 24px;
/* свечение живёт ВНУТРИ квадрата: снаружи у оригинала ореола нет */
background: radial-gradient(circle at 50% 42%, #e6fbff 0%, #b6effc 34%, #4cd7f4 68%, #35bfdd 100%);
z-index: 7;
transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* курсор берёт квадрат целиком, а не только знак внутри него */
.beam-core:hover { transform: scale(0.92); }
/* знак остаётся в своём фирменном #38383D, инверсию не применяем */
.beam-core img { width: 52px; height: 52px; display: block; }
.beam-cone {
position: absolute;
left: 50%; top: 338px; /* на 13 выше низа ядра: тот же запас под hover */
width: 578px; height: 370px;
transform: translateX(-50%);
pointer-events: none;
z-index: 4; /* луч поверх карточек */
}
.beam-cone svg { width: 100%; height: 100%; display: block; }
/* пыль внутри конуса: один слой с двумя тайлами вместо сотни узлов */
.beam-dust {
position: absolute;
left: 50%; top: 338px;
width: 578px; height: 370px;
transform: translateX(-50%);
z-index: 5;
pointer-events: none;
clip-path: path("M296.5 0 C296.5 165 330 250 578 370 L0 370 C248 250 281.5 165 281.5 0 Z");
/* Взвесь в луче. Точки рисуются мягкими: жёсткий край на 99% давал
многоугольники вместо кругов. Четыре слоя разного калибра и яркости
дают неровную плотность, и каждый плывёт вверх со своей скоростью -
получается лёгкий параллакс, как у пыли в световом столбе. */
background:
radial-gradient(circle 1.6px at 30% 70%, rgba(190,245,255,0.75) 0%, rgba(160,235,255,0.35) 55%, transparent 100%) 0 0/57px 43px,
radial-gradient(circle 1.1px at 70% 25%, rgba(200,248,255,0.55) 0%, rgba(160,235,255,0.22) 60%, transparent 100%) 0 0/79px 67px,
radial-gradient(circle 2.2px at 18% 40%, rgba(255,255,255,0.42) 0%, rgba(160,235,255,0.16) 50%, transparent 100%) 0 0/131px 109px,
radial-gradient(circle 0.9px at 85% 62%, rgba(210,250,255,0.45) 0%, transparent 100%) 0 0/47px 38px;
animation: beamDust 26s linear infinite;
animation-play-state: paused;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 38%, #000 70%, #000 100%);
mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 38%, #000 70%, #000 100%);
}
/* ---- дно: сезонный пул ----
Звено, без которого «mines» читалось как транзит: намайненное не
растворялось в пустоте, а карточка проезжала и исчезала. Теперь у
конуса есть дно, и направление луча вниз означает ссыпание в пул,
а не раздачу наружу.
Полоса намеренно БЕЗ процентов и без числа: суммы пула не существует
(TGE не было, сезон 1 в статусе upcoming), а рисовать выдуманную
метрику запрещает правило 1. Ярче в центре, где садится конус, то есть
это приёмник, а не прогресс-бар. Появится подтверждённая цифра -
станет местом для неё. */
.season-pool {
position: absolute;
left: 0; right: 0; bottom: 20px; /* ~20 px под основанием конуса: дальше поток читается как оборванный */
display: flex; align-items: center; gap: 18px;
z-index: 6;
pointer-events: none;
}
.pool-cap {
flex: none;
font-family: var(--font-mono);
font-size: 12px; line-height: 1; letter-spacing: 0.08em;
text-transform: uppercase;
color: #fff; opacity: 0.5;
white-space: nowrap;
}
.pool-cap--to { color: var(--c-accent); opacity: 0.85; }
.pool-bar {
flex: 1; position: relative; height: 3px; border-radius: 2px;
background: linear-gradient(90deg,
rgba(255,255,255,0.05) 0%,
rgba(76,215,244,0.30) 50%,
rgba(255,255,255,0.05) 100%);
}
/* приток под конусом: пульсирует шириной в такт с падением взвеси.
Базовое состояние совпадает с кадром 0%, поэтому и на паузе (за
экраном), и при reduced-motion полоса выглядит законченной, а не пустой */
.pool-glow {
position: absolute; left: 50%; top: 50%;
width: 340px; height: 3px; border-radius: 2px;
transform: translate(-50%, -50%) scaleX(0.62);
background: linear-gradient(90deg, transparent 0%, #7ce7ff 50%, transparent 100%);
opacity: 0.55;
animation: poolIntake 6s ease-in-out infinite;
animation-play-state: paused;
}
@keyframes poolIntake {
0%, 100% { transform: translate(-50%, -50%) scaleX(0.62); opacity: 0.55; }
50% { transform: translate(-50%, -50%) scaleX(1); opacity: 1; }
}
/* ---- ряды карточек ----
Края и срез по оси гасим НЕ масками, а чёрными накладками. Раньше тут
было девять mask-image (три на ряды, шесть на ленты), и каждая заставляла
WebKit растрировать всю маскированную поверхность вместе с длинной
анимируемой лентой внутри. На iOS это давало пропадание карточек через
несколько секунд после старта: тайлы не поспевали за уехавшей лентой.
Фон секции сплошной #000, поэтому накладка визуально не отличается
от маски, но композитор рисует ленты напрямую. */
.beam-row {
position: absolute;
left: 0; right: 0;
height: 172px; /* запас под наклон */
display: flex; align-items: center;
z-index: 1; /* карточки под лучом */
}
.beam-row::after {
content: ''; position: absolute; inset: 0;
z-index: 3; pointer-events: none;
background: linear-gradient(90deg, #000 0%, transparent 10%, transparent 90%, #000 100%);
}
/* Шаг центров 104 как в оригинале. Наклоняем не ряд целиком, а его половины:
у apptics ряды расходятся от оси веером (V сверху, Л снизу), а не лежат
двумя параллельными наклонными полосами. */
.beam-row--1 { top: 115px; }
.beam-row--2 { top: 219px; }
.beam-row--3 { top: 322px; }
.beam-row--1 .beam-lane--in, .beam-row--3 .beam-lane--out { transform: rotate(4.2deg); }
.beam-row--1 .beam-lane--out, .beam-row--3 .beam-lane--in { transform: rotate(-4.2deg); }
/* Два полноширинных слоя-близнеца с жёстким срезом по оси: до неё видна
заготовка, после - заполненная карточка. У оригинала это одна карточка,
у которой левая половина серая, а правая уже с текстом; двумя слоями
получается тот же кадр и попутно не разъезжаются скорости. */
.beam-lane { position: absolute; inset: 0; display: flex; align-items: center; }
/* Срез по оси делаем clip-path, а не маской и не накладкой. Накладка не
годится: out лежит в DOM после in, поэтому её чёрная половина закрыла бы
и заготовки под собой. clip-path отсекает только свой элемент и, в
отличие от mask-image, не требует от композитора отдельной маскирующей
поверхности поверх длинной анимируемой ленты. */
.beam-lane--in { clip-path: inset(0 50% 0 0); }
.beam-lane--out { clip-path: inset(0 0 0 50%); }
/* gap у ленты нет намеренно: зазор живёт в margin карточки, иначе половина
ширины ленты перестаёт быть целым числом слотов и луп дёргается */
.beam-track {
display: flex; align-items: center;
flex: none;
animation: beamSlide var(--dur, 8s) linear infinite;
animation-play-state: paused;
/* will-change тут убран намеренно: анимация transform и так поднимает
ленту в свой слой, а подсказка заставляла iOS резервировать память
под шесть слоёв по три тысячи пикселей шириной ещё до старта */
}
.pts-beam.is-live .beam-track { animation-play-state: running; }
.pts-beam.is-live .beam-dust { animation-play-state: running; }
.pts-beam.is-live .pool-glow { animation-play-state: running; }
/* слои плывут вверх с разной скоростью: ближний быстрее дальнего */
@keyframes beamDust {
from { background-position: 0 0, 0 0, 0 0, 0 0; }
to { background-position: 0 -430px, 0 -335px, 0 -218px, 0 -494px; }
}
@keyframes beamSlide {
from { transform: translateX(-50%); }
to { transform: translateX(0); }
}
/* ряды отличаются фазой, а не скоростью: у оригинала разброс скоростей
меньше 8 процентов и берётся из разной ширины карточек */
/* сдвиги намеренно не кратны слоту: при -2s/-4s границы карточек всех рядов
совпадали по x и ряды читались как жёсткая сетка */
.beam-row--2 .beam-track { animation-delay: -1.35s; }
.beam-row--3 .beam-track { animation-delay: -3.2s; }
/* ---- карточка ---- */
/* translateZ(0) обязателен, не косметика. Без него Safari на iOS растрирует
карточки внутри слоя длинной дорожки и при перерисовке теряет их: плашка
пропадала целиком примерно на секунду и возвращалась, по очереди.
Проверено на iPhone 16 Pro Max страницей с шестью вариантами ленты:
мигали все, кроме варианта с собственным слоем у карточки.
Chromium этот дефект не воспроизводит, поэтому правило легко потерять
при рефакторинге - не убирать. */
.beam-card {
flex: none;
transform: translateZ(0);
width: 362px; height: 82px;
margin-right: 22px;
display: flex; align-items: center; gap: 16px;
padding: 0 13px;
border-radius: 16px;
background: #131318; /* было rgba(20,20,26,.94): над #000 цвет тот же, блендинга нет */
border: 1px solid rgba(255,255,255,0.06);
box-shadow: 0 6px 20px rgba(0,0,0,0.28);
text-align: left;
}
.beam-icon {
width: 57px; height: 57px; flex: none;
display: flex; align-items: center; justify-content: center;
border-radius: 16px;
background: rgba(76,215,244,0.10);
color: var(--c-accent);
}
.beam-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.beam-card--win .beam-icon { background: rgba(38,208,124,0.10); color: #26d07c; }
.beam-body { flex: 1; min-width: 0; }
.beam-title {
display: block;
font-family: var(--font-ui);
font-size: 17px; font-weight: 500; line-height: 20px; color: #fff;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* подпись у оригинала того же цвета, отличается только весом и прозрачностью */
.beam-sub {
display: block;
font-family: var(--font-ui);
font-size: 14px; line-height: 15px; margin-top: 2px;
color: #fff; opacity: 0.72;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.beam-div { flex: none; width: 1px; height: 56px; background: rgba(255,255,255,0.05); margin-left: 12px; }
/* 84 было под подпись вертикали («Perps»); теперь тут тег +PTS и короткий
множитель, а освободившиеся 26 px забирает заголовок - без них
«Prediction taken» и «AAPL-PERP · first 2 weeks» резались многоточием */
.beam-side {
flex: none; min-width: 58px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 6px; margin-left: 10px;
}
.beam-tag {
display: inline-flex; align-items: center; justify-content: center;
height: 23px; padding: 0 9px; border-radius: 6px;
font-family: var(--font-mono);
font-size: 12px; line-height: 1;
color: var(--c-accent); background: rgba(76,215,244,0.12);
}
.beam-card--win .beam-tag { color: #26d07c; background: rgba(38,208,124,0.12); }
.beam-side-cap { font-family: var(--font-ui); font-size: 14px; color: #fff; opacity: 0.72; white-space: nowrap; }
/* ---- заготовка слева ---- */
.beam-card--ghost {
height: 79px;
background: #0e0e12; /* было rgba(17,17,22,.8), см. выше */
border-color: rgba(255,255,255,0.055);
}
.beam-card--ghost .beam-icon { width: 54px; height: 54px; background: rgba(255,255,255,0.055); }
.beam-ghost-line { display: block; border-radius: 6px; background: rgba(255,255,255,0.075); }
/* ---- источник внизу ---- */
/* Три шага сезона: майнишь, стейкаешь, забираешь */
.season-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
max-width: 1100px;
margin: 0 auto 44px;
text-align: left;
}
/* шаги читаются как путь: номера связаны линией, которая гаснет к следующему */
.season-step { position: relative; display: flex; align-items: flex-start; gap: 16px; }
.season-step:not(:last-child)::after {
content: '';
position: absolute;
left: 52px; top: 26px;
width: calc(100% - 52px + 32px);
height: 1px;
background: linear-gradient(90deg, rgba(76,215,244,0.35) 0%, rgba(76,215,244,0.04) 100%);
pointer-events: none;
}
.season-step-num {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
flex-shrink: 0;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 5px;
color: var(--c-accent);
font-family: var(--font-mono);
font-size: 13px;
}
.season-step h3 {
font-family: var(--font-ui);
font-size: 20px;
font-weight: 400;
color: var(--c-text-1);
margin-bottom: 8px;
}
/* Два уровня вместо одного абзаца: сначала мысль в одну строку, потом
подробность. Раньше шаг был плотным абзацем со стеной множителей,
и главное тонуло в деталях. */
.season-step .step-lead {
font-family: var(--font-ui);
font-size: 16px; line-height: 1.45;
color: var(--c-text-1);
margin-bottom: 6px;
}
/* Условия допуска: на виду, это про чужие деньги. Раньше были сплошным
моношрифтом в верхнем регистре - выглядело как юридический подвал,
который никто не читает. */
.season-terms {
font-family: var(--font-ui);
font-size: 13px; line-height: 1.5;
color: var(--c-text-3); opacity: 0.72;
max-width: 760px;
margin: 0 auto;
text-align: center;
}
/* ===================== SECURITY SECTION ===================== */
.security-section {
position: relative;
padding: 120px 0;
background: #000;
z-index: 2;
overflow: hidden;
}
.security-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
min-height: 600px;
}
/* Left: badge + title + 3D video */
.security-left {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding-top: 20px;
}
.security-badge {
display: inline-flex;
align-self: flex-start;
align-items: center;
gap: 10px;
padding: 10px 22px;
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(255,255,255,0.45);
background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
margin-bottom: 28px;
backdrop-filter: blur(12px);
}
.security-badge::before,
.security-badge::after {
content: '•';
font-size: 9px;
color: var(--c-accent);
opacity: 0.85;
}
.security-title {
font-family: var(--font-ui);
font-size: clamp(42px, 5vw, 72px);
font-weight: 400;
line-height: 1.05;
letter-spacing: -2px;
color: var(--c-text-1);
margin-bottom: 40px;
}
/* The one verifiable anchor in this section — on-chain settlement is publicly
checkable, unlike the custodial/licensing claims. Honest counterweight. */
.security-note {
margin: -24px 0 36px;
max-width: 360px;
font-size: 14px;
line-height: 1.6;
color: rgba(255,255,255,0.55);
}
.security-note strong { color: rgba(255,255,255,0.82); font-weight: 400; }
.security-3d {
position: relative;
width: 100%;
max-width: 500px;
/* Soft vignette so the live render dissolves into the section's black
instead of showing a hard canvas rectangle (echoes the old video mask). */
-webkit-mask-image: radial-gradient(ellipse 74% 68% at 50% 50%, #000 40%, transparent 74%);
mask-image: radial-gradient(ellipse 74% 68% at 50% 50%, #000 40%, transparent 74%);
}
/* Soft oval backdrop directly behind the shield (z-index:0, under the canvas) — the
round/oval glow the object sits against; the container's radial mask feathers its
edges so it dissolves into the section's black rather than reading as a box. */
.security-3d::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: radial-gradient(ellipse 64% 54% at 50% 48%,
rgba(76,215,244,0.10) 0%, rgba(70,120,150,0.035) 38%, transparent 70%);
}
.security-3d canvas {
position: relative;
z-index: 1;
width: 100%;
aspect-ratio: 16 / 10;
height: auto;
display: block;
}
/* Right: 2x2 grid of feature cards */
.security-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 0;
position: relative;
}
/* Inner dividers only */
.security-grid::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 1px;
background: linear-gradient(to bottom, transparent 5%, rgba(255,255,255,0.08) 30%, rgba(255,255,255,0.08) 70%, transparent 95%);
}
.security-grid::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 1px;
background: linear-gradient(to right, transparent 5%, rgba(255,255,255,0.08) 30%, rgba(255,255,255,0.08) 70%, transparent 95%);
}
.security-card {
padding: 40px 32px;
border: none;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 260px;
position: relative;
}
.security-card {
pointer-events: auto;
border-radius: 8px;
transition: background 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.security-card:hover {
background: rgba(var(--c-accent-rgb), 0.035);
transform: translateY(-3px);
}
.security-card:hover .security-card-icon {
background: rgba(var(--c-accent-rgb), 0.12);
border-color: rgba(var(--c-accent-rgb), 0.45);
color: var(--c-accent);
}
/* Top-left corner accent */
.security-card:first-child::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 60%;
width: 1px;
background: linear-gradient(to bottom, rgba(255,255,255,0.15), transparent);
}
.security-card:first-child::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 60%;
height: 1px;
background: linear-gradient(to right, rgba(255,255,255,0.15), transparent);
}
/* Bottom-right corner accent */
.security-card:last-child::before {
content: '';
position: absolute;
bottom: 0;
right: 0;
height: 60%;
width: 1px;
background: linear-gradient(to top, rgba(255,255,255,0.15), transparent);
}
.security-card:last-child::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 60%;
height: 1px;
background: linear-gradient(to left, rgba(255,255,255,0.15), transparent);
}
.security-card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 5px;
color: rgba(255,255,255,0.72);
margin-bottom: auto;
transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.security-card-icon svg {
width: 22px;
height: 22px;
-webkit-mask-image: repeating-linear-gradient(0deg, transparent 0px, transparent 1px, #fff 1px, #fff 3.5px);
mask-image: repeating-linear-gradient(0deg, transparent 0px, transparent 1px, #fff 1px, #fff 3.5px);
}
.security-card h3 {
font-family: var(--font-ui);
font-size: 20px;
font-weight: 400;
color: var(--c-text-1);
margin-bottom: 8px;
}
.security-card p {
font-family: var(--font-ui);
font-size: 14px;
color: var(--c-text-3);
line-height: 1.5;
}
/* ===================== TRADE SECTION ===================== */
.trade-section {
position: relative;
padding: 120px 0;
background: #000;
z-index: 2;
overflow: hidden;
}
/* === JET Pulser (Плата) — exact transplant from jet-dither-handoff,
cropped to the LEFT + RIGHT side regions only (center stays dark) === */
.trade-circuit-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
/* #trade-circuit hosts the real, unmodified JetPulser at full section size.
The mask is the ONLY layout constraint: it reveals the effect on the two
side regions and cuts the center transparent so the copy stays readable.
The Pulser's own internal masks/carve/noise/frame are untouched. */
#trade-circuit {
position: absolute;
inset: 0;
-webkit-mask-image: linear-gradient(to right, #000 0%, #000 15%, transparent 30%, transparent 70%, #000 85%, #000 100%);
mask-image: linear-gradient(to right, #000 0%, #000 15%, transparent 30%, transparent 70%, #000 85%, #000 100%);
}
.trade-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
position: relative;
min-height: 600px;
}
.trade-content {
position: relative;
z-index: 2;
max-width: 560px;
}
.trade-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 22px;
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(255,255,255,0.45);
background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
margin-bottom: 32px;
backdrop-filter: blur(12px);
}
.trade-badge::before,
.trade-badge::after {
content: '•';
font-size: 9px;
color: var(--c-accent);
opacity: 0.85;
}
.trade-title {
font-family: var(--font-ui);
font-size: clamp(48px, 6vw, 80px);
font-weight: 400;
line-height: 1.1;
letter-spacing: -2px;
color: var(--c-text-1);
margin-bottom: 24px;
padding-right: 0.05em;
}
.trade-title em {
font-style: normal;
color: var(--c-text-1);
}
.trade-desc {
font-family: var(--font-ui);
font-size: 17px;
color: var(--c-text-3);
line-height: 1.6;
margin-bottom: 48px;
}
.trade-features {
display: flex;
flex-direction: column;
gap: 0;
margin-bottom: 48px;
}
.trade-feature {
display: flex;
align-items: center;
gap: 16px;
padding: 18px 0;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.trade-feature:last-child {
border-bottom: none;
}
.trade-feature-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex-shrink: 0;
color: rgba(255,255,255,0.5);
}
.trade-feature-icon svg {
width: 20px;
height: 20px;
-webkit-mask-image: repeating-linear-gradient(0deg, transparent 0px, transparent 1px, #fff 1px, #fff 3.5px);
mask-image: repeating-linear-gradient(0deg, transparent 0px, transparent 1px, #fff 1px, #fff 3.5px);
}
.trade-feature span {
font-family: var(--font-ui);
font-size: 17px;
font-weight: 400;
color: var(--c-text-1);
}
/* Ticker board - right side */
.ticker-board {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 520px;
z-index: 1;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 16px;
overflow: hidden;
backdrop-filter: blur(20px);
}
.ticker-board-header {
display: grid;
grid-template-columns: 2fr 1.2fr 1fr 1.5fr;
padding: 14px 20px;
border-bottom: 1px solid rgba(255,255,255,0.06);
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
color: rgba(255,255,255,0.3);
}
.ticker-board-header span:nth-child(2),
.ticker-board-header span:nth-child(3) { text-align: right; }
.ticker-board-header span:nth-child(4) { text-align: right; }
.ticker-row {
display: grid;
grid-template-columns: 2fr 1.2fr 1fr 1.5fr;
padding: 12px 20px;
align-items: center;
border-bottom: 1px solid rgba(255,255,255,0.03);
transition: background 0.2s ease;
}
.ticker-row:last-child { border-bottom: none; }
a.ticker-row { text-decoration: none; color: inherit; cursor: pointer; }
.ticker-row:hover { background: rgba(255,255,255,0.03); }
.ticker-asset {
display: flex;
align-items: center;
gap: 10px;
}
.ticker-asset img {
width: 28px;
height: 28px;
border-radius: 50%;
}
.ticker-asset-name {
font-family: var(--font-ui);
font-size: 14px;
font-weight: 400;
color: var(--c-text-1);
}
.ticker-asset-ticker {
font-family: var(--font-ui);
font-size: 12px;
color: var(--c-text-3);
margin-left: 6px;
}
.ticker-price {
font-family: var(--font-mono);
font-size: 13px;
color: var(--c-text-1);
text-align: right;
font-variant-numeric: tabular-nums;
}
.ticker-change {
font-family: var(--font-mono);
font-size: 12px;
text-align: right;
font-variant-numeric: tabular-nums;
}
.ticker-change.up { color: #00c076; }
.ticker-change.down { color: #ff4d4d; }
.ticker-spark {
display: flex;
justify-content: flex-end;
}
.ticker-spark svg {
width: 80px;
height: 28px;
}
@keyframes flash-green { 0% { color: #00c076; } 100% { color: var(--c-text-1); } }
@keyframes flash-red { 0% { color: #ff4d4d; } 100% { color: var(--c-text-1); } }
.ticker-price.flash-up { animation: flash-green 1s ease; }
.ticker-price.flash-down { animation: flash-red 1s ease; }
/* ===================== FOOTER ===================== */
.site-footer {
position: relative;
background: #0a0a0a;
padding: 80px 0 0;
z-index: 2;
border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
}
.footer-top {
display: flex;
gap: 48px;
padding-bottom: 60px;
}
.footer-links-row {
display: flex;
gap: 48px;
flex: 1;
}
.footer-col {
flex: 1;
}
.footer-brand {
display: flex;
flex-direction: column;
min-width: 280px;
}
.footer-logo {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 24px;
}
.footer-logo img {
height: 28px;
width: auto;
}
.footer-logo span {
font-family: var(--font-ui);
font-size: 24px;
font-weight: 400;
color: #fff;
letter-spacing: 2px;
}
.footer-tagline {
font-family: var(--font-ui);
font-size: 28px;
font-weight: 400;
line-height: 1.25;
color: var(--c-text-1);
}
.footer-tagline span {
color: var(--c-text-3);
}
.footer-social-icons {
display: flex;
gap: 16px;
margin-top: 28px;
}
.footer-social-icons a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.1);
color: rgba(255,255,255,0.5);
text-decoration: none;
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.footer-social-icons a:hover {
color: #fff;
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.15);
}
.footer-social-icons svg {
width: 16px;
height: 16px;
}
.footer-col h3 {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--c-accent);
margin-bottom: 24px;
}
.footer-col ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.footer-col a {
font-family: var(--font-ui);
font-size: 15px;
color: rgba(255,255,255,0.7);
text-decoration: none;
transition: color 0.2s ease;
}
.footer-col a:hover {
color: #fff;
}
/* Bottom bar */
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 0;
border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-copy {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: rgba(255,255,255,0.6);
}
.footer-back-top {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: rgba(255,255,255,0.5);
text-decoration: none;
transition: color 0.2s ease;
}
.footer-back-top:hover {
color: #fff;
}
.footer-back-top svg {
width: 16px;
height: 16px;
}
/* ===================== COINS SECTION ===================== */
.coins-section {
position: relative;
background: #000;
padding: 120px 0 100px;
text-align: center;
overflow: hidden;
}
.coins-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 22px;
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(255,255,255,0.45);
background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
margin-bottom: 32px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.coins-badge::before,
.coins-badge::after {
content: '•';
font-size: 9px;
color: var(--c-accent);
opacity: 0.85;
}
.coins-title {
font-family: var(--font-ui);
font-size: clamp(40px, 5vw, 72px);
font-weight: 400;
line-height: 1.1;
letter-spacing: -2px;
margin-bottom: 56px;
color: var(--c-text-1);
}
.coins-title em {
font-style: normal;
font-weight: 400;
}
/* Marquee rows */
.coins-marquee-wrap {
max-width: 1100px;
margin: 0 auto;
overflow: hidden;
position: relative;
/* Края уводятся в полную прозрачность по альфе (не вуаль цвета фона).
Зона затухания шире одной карточки (~200px) и с нелинейной кривой,
чтобы карточка успевала раствориться целиком - без призрачных
прямоугольников-силуэтов на концах ленты. */
-webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.12) 9%, rgba(0,0,0,0.55) 16%, #000 24%, #000 76%, rgba(0,0,0,0.55) 84%, rgba(0,0,0,0.12) 91%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.12) 9%, rgba(0,0,0,0.55) 16%, #000 24%, #000 76%, rgba(0,0,0,0.55) 84%, rgba(0,0,0,0.12) 91%, transparent 100%);
}
.coins-marquee {
position: relative;
margin-bottom: 16px;
}
.coins-track {
display: flex;
gap: 16px;
width: -webkit-max-content;
width: max-content;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.coins-track.scroll-left {
-webkit-animation: scrollLeft 90s linear infinite;
animation: scrollLeft 90s linear infinite;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.coins-track.scroll-right {
-webkit-animation: scrollRight 90s linear infinite;
animation: scrollRight 90s linear infinite;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.coins-track.running {
-webkit-animation-play-state: running;
animation-play-state: running;
}
@-webkit-keyframes scrollLeft {
0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
100% { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
}
@keyframes scrollLeft {
0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
100% { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
}
@-webkit-keyframes scrollRight {
0% { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
@keyframes scrollRight {
0% { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
.coin-card {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 20px 12px 12px;
background: var(--c-surface-1);
border: 1px solid var(--c-border);
border-radius: 12px;
min-width: 200px;
flex-shrink: 0;
transition: border-color 0.3s, background 0.3s;
}
/* карточка это ссылка на свой рынок в приложении: гасим оформление ссылки,
вид остаётся прежним, добавляется только отклик на курсор */
a.coin-card { text-decoration: none; color: inherit; cursor: pointer; }
.coin-card:hover {
border-color: var(--c-border-strong);
background: var(--c-surface-2);
}
a.coin-card:focus-visible,
a.ticker-row:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 2px;
}
.coin-icon {
width: 46px;
height: 46px;
border-radius: 5px;
flex-shrink: 0;
overflow: hidden;
background: #1a1a22;
display: flex;
align-items: center;
justify-content: center;
}
.coin-icon img {
width: 30px;
height: 30px;
object-fit: contain;
border-radius: 50%;
}
.coin-info {
display: flex;
flex-direction: column;
text-align: left;
gap: 2px;
}
.coin-info .coin-name-row {
display: flex;
align-items: baseline;
gap: 7px;
}
.coin-info .coin-name {
font-family: var(--font-ui);
font-size: 15px;
font-weight: 400;
color: var(--c-text-1);
}
.coin-mono {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--c-surface-2);
border: 1px solid var(--c-border-strong);
font-family: var(--font-ui);
font-size: 13px;
font-weight: 500;
color: var(--c-text-1);
}
.coin-market {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--c-text-3);
}
.coin-info .coin-ticker {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 400;
text-transform: uppercase;
color: var(--c-text-3);
}
.coin-info .coin-price-row {
display: flex;
align-items: center;
gap: 8px;
}
.coin-info .coin-price {
font-family: var(--font-ui);
font-size: 14px;
font-weight: 400;
color: var(--c-text-2);
font-variant-numeric: tabular-nums;
}
.coin-info .coin-change {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 400;
font-variant-numeric: tabular-nums;
}
.coin-change.up { color: var(--c-green); }
.coin-change.down { color: var(--c-red); }
/* Demoted to a quiet arrow link (was a duplicate bordered "Start Trading"
one screen below the hero CTA). The dominant filled button stays unique. */
.coins-cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 48px;
padding: 8px 4px;
font-family: 'Banana Grotesk', sans-serif;
font-size: 15px;
font-weight: 400;
letter-spacing: 0.01em;
color: var(--c-accent);
background: none;
border: none;
border-radius: 0;
cursor: pointer;
transition: gap 0.25s ease, color 0.25s ease;
}
.coins-cta::after { content: '\2192'; }
.coins-cta:hover { gap: 12px; color: #6fe0f7; }
/* ===================== RESPONSIVE ===================== */
@media (max-width: 1024px) {
.hero-split { grid-template-columns: 1fr; }
.hero-right { min-height: 400px; padding: 0 20px 20px; }
.screen-frame { border-radius: 14px; }
.hero-stats { gap: 24px; justify-content: center; }
/* Products */
.products-grid { grid-template-columns: 1fr 1fr; }
.product-card { min-height: 360px; padding: 28px; }
/* Inside ZEXO */
.inside-section { padding: 80px 0; }
.inside-grid { grid-template-columns: 1fr; gap: 40px; }
.inside-scene { height: 600px; }
.inside-inner { padding: 0 30px; }
/* Trade */
.trade-section { padding: 80px 0 60px; }
.trade-inner { min-height: auto; display: flex; flex-direction: column; padding: 0 30px; }
.trade-content { max-width: 100%; text-align: center; }
.trade-badge { align-self: center; }
.trade-features { justify-content: center; flex-wrap: wrap; }
.ticker-board {
position: relative;
right: auto;
top: auto;
transform: none;
width: 100%;
max-width: 560px;
margin: 32px auto 0;
}
/* Security */
.security-inner { grid-template-columns: 1fr; padding: 0 30px; gap: 32px; min-height: auto; }
.security-left { align-items: center; text-align: center; }
.security-badge { align-self: center; }
/* Season */
.season-inner { padding: 0 30px; }
.season-steps { grid-template-columns: 1fr 1fr; }
.season-step:not(:last-child)::after { display: none; }
/* Footer */
.footer-inner { padding: 0 30px; }
}
/* Tablet (769-1024): the hero collapses to one column but the copy stays
left-aligned, so it sits over the full-bleed ray video and loses contrast
(on phones the text is centered over the dark convergence, so it is fine).
Add a soft dark scrim behind the left copy; it fades out toward the right
so the rays stay vivid. */
@media (min-width: 769px) and (max-width: 1024px) {
.hero-left { position: relative; z-index: 2; }
.hero-left::before {
content: '';
position: absolute;
left: -60px; right: -40px; top: -80px; bottom: -30px;
background: radial-gradient(135% 115% at 32% 40%,
rgba(6,6,12,0.88) 0%, rgba(6,6,12,0.66) 38%,
rgba(6,6,12,0.30) 62%, transparent 80%);
z-index: -1;
pointer-events: none;
}
}
@media (max-width: 768px) {
/* ASCII-magic hero video now runs on phones too (was desktop-only):
full-bleed cyan atmosphere, same lighten composite as desktop. It
replaces the mobile rays glow below. */
.hero-fluid { display: block; }
/* Header */
.header { padding: 0; }
.header-inner { padding: 0 8px; height: 56px; }
.nav-links { display: none; }
.hamburger-btn { display: flex; }
/* Hero */
.hero { min-height: auto; }
.hero-split { position: relative; }
.hero-left { position: relative; overflow: visible; }
.hero-glow-mobile {
display: none;
position: absolute;
left: 50%;
bottom: -120px;
transform: translateX(-50%);
width: 138%;
height: 320px;
z-index: 1;
pointer-events: none;
}
/* Light rays: a brand-cyan field, brightest at the bottom-center
convergence, carved into discrete shafts by the fan-line mask and
intersected with an upward fade so the tips dissolve before the text. */
.hero-rays {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 68% 82% at 50% 100%,
rgba(76, 215, 244, 0.50) 0%,
rgba(76, 215, 244, 0.16) 32%,
rgba(76, 215, 244, 0.04) 56%,
transparent 72%);
-webkit-mask-image:
url("/assets/images/hero-rays-mask.svg"),
linear-gradient(to top, #000 0%, rgba(0,0,0,0) 86%);
mask-image:
url("/assets/images/hero-rays-mask.svg"),
linear-gradient(to top, #000 0%, rgba(0,0,0,0) 86%);
-webkit-mask-size: cover, 100% 100%; mask-size: cover, 100% 100%;
-webkit-mask-position: 50% 100%, 0 0; mask-position: 50% 100%, 0 0;
-webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat;
-webkit-mask-composite: source-in; mask-composite: intersect;
opacity: 0.85;
animation: heroRaysBreathe 7s ease-in-out infinite;
}
@keyframes heroRaysBreathe {
0%, 100% { opacity: 0.72; }
50% { opacity: 0.95; }
}
/* Live WebGL2 god-rays (real JET Rays shader, single rising strip).
Sits in the same zone as the CSS field and above it; once it mounts,
JS hides the CSS .hero-rays fallback. The module is forced to fill the
container (its strip is normally a fixed px height). */
/* Higher specificity than the module's injected .jr-host rule
(which sets position:relative) so the host fills the zone. */
.hero-glow-mobile .hero-rays-gl {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
opacity: 0.92;
/* Edge treatment — the seam fix. The module's internal .jr-bg fade only
softens the RAYS; the .jr-noise grain is a full-bleed rectangle with a
hard top edge, which read as a horizontal seam where the layer began.
This host-level vertical fade dissolves the whole strip (rays + noise)
into the hero background at the top (and bottom, for safety), so the
effect emerges atmospherically instead of as an inserted rectangle. */
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, #000 90%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, #000 90%, transparent 100%);
}
.hero-rays-gl .jr-frame,
.hero-rays-gl .jr-strip { height: 100%; }
.hero-split { padding: 0 20px; }
.hero-left { padding: 100px 0 32px; align-items: center; text-align: center; }
.hero-left h1 { font-size: 38px; letter-spacing: -1px; }
.hero-left .hero-desc { font-size: 15px; margin-bottom: 20px; }
.hero-buttons { margin-bottom: 28px; justify-content: center; }
/* небольшой отступ снизу: виджет рисует ось дат у самого края,
и без него подписи выглядят срезанными */
.chart-canvas-wrap { flex: 1; min-height: 320px; position: relative; padding-bottom: 6px; }
.hero-stats { grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 24px 0; justify-items: center; text-align: center; }
.hero-stat { flex-direction: column-reverse; gap: 4px; }
.hero-stat .stat-value { font-size: 22px; }
.hero-stat .stat-label { font-size: 9px; letter-spacing: 1px; }
.hero-right { min-height: 380px; padding: 0 10px 20px; }
.screen-frame { width: 100%; }
/* Coins */
.coins-section { padding: 80px 0 60px; }
.coins-title { margin-bottom: 40px; }
/* Inside ZEXO */
.inside-section { padding: 60px 0; }
.inside-inner { padding: 0 20px; }
.inside-title { margin-bottom: 32px; }
.inside-grid { grid-template-columns: 1fr; gap: 32px; }
.inside-scene { height: 560px; }
.inside-head { font-size: 16px; }
.inside-desc { font-size: 14px; padding-left: 32px; }
.inside-labels { gap: 20px; }
.inside-labels span { font-size: 11px; letter-spacing: 1px; padding: 5px 8px; }
/* Products */
.products-section { padding: 60px 0 40px; }
.products-inner { padding: 0 20px; }
.products-title { margin-bottom: 36px; }
.products-grid { grid-template-columns: 1fr; }
.product-card {
min-height: auto;
padding: 24px;
}
.product-card-img { margin-bottom: 20px; }
.product-card-body {
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.product-card-body h3 { font-size: 18px; }
.product-card-btn { width: 100%; justify-content: center; }
/* Disable hover effects on touch; gentler tilt so it can't overflow
the narrow column, vignette stays on (no hover to clear it) */
.products-grid:hover .product-card { opacity: 1; }
.product-card::before { display: none; }
.product-card-img { transform: perspective(1200px) rotateX(11deg); }
.product-card-img::before { opacity: 1; }
/* Season */
.season-section { padding: 80px 0 60px; }
/* На телефоне ряды остаются горизонтальными, как в оригинале, но всё
ужимается: карточки уже, ряды ближе, конус короче. */
/* Телефон. У apptics сцена не перекомпоновывается, а ужимается, но не
равномерно: карточки в 0.46, ядро только в 0.65 - ось остаётся крупной,
карточки уходят в фон. Повторяем эту пропорцию, но ядро не режем до 52,
иначе текст в карточке 32px читать нечем. */
.pts-beam { height: 496px; } /* 460 сцены + 36 под дно */
/* линия и конус заходят под ядро на 9 px: встык они давали щель на
дробных пикселях, а на курсоре квадрат ещё и ужимается */
.beam-line { top: 0; width: 11px; height: 159px; }
.beam-core { top: 150px; width: 60px; height: 60px; margin-left: -30px; border-radius: 14px; }
.beam-core img { width: 30px; height: 30px; }
.beam-cone { top: 201px; width: 268px; height: 259px; }
.beam-dust {
top: 201px; width: 268px; height: 259px;
clip-path: path("M137.5 0 C137.5 115 153 175 268 259 L0 259 C115 175 130.5 115 130.5 0 Z");
}
/* На узком экране жёсткий срез по оси оставлял от карточки одну пилюлю,
висящую в пустоте: тела карточки на чёрном почти не видно. Здесь
переход растушёван, и половинка уходит в затухание. */
/* Никакой растушёвки у оси. Она тут была, чтобы половинка карточки не
висела в пустоте, но стоила дороже: зона затухания занимала 187 px
при карточке 210 px, карточка въезжала в неё целиком и тускнела до
0.17, а через полсекунды возвращалась. На телефоне это читалось как
мигание плашек по очереди. Срез по оси и так жёсткий у оригинала:
слева серая заготовка, справа заполненная карточка. */
.pts-beam .beam-row::after {
background: linear-gradient(90deg, #000 0%, transparent 8%, transparent 92%, #000 100%);
}
.beam-row { height: 96px; }
.beam-row--1 { top: 68px; }
.beam-row--2 { top: 132px; }
.beam-row--3 { top: 196px; }
.beam-card { width: 210px; height: 48px; margin-right: 14px; padding: 0 8px; gap: 8px; border-radius: 10px; }
.beam-card--ghost { height: 46px; }
.beam-icon { width: 30px; height: 30px; border-radius: 8px; }
.beam-icon svg { width: 15px; height: 15px; }
.beam-title { font-size: 12px; line-height: 14px; }
.beam-sub { font-size: 10px; line-height: 11px; }
/* при ширине карточки 210 правая колонка съедает заголовок целиком,
поэтому на телефоне от неё остаётся только +PTS: множитель объясняет
шаг 01 текстом, а вот сам факт начисления обязан быть виден */
.beam-div { display: none; }
.beam-side { min-width: 0; margin-left: 8px; gap: 4px; }
.beam-tag { height: 16px; padding: 0 5px; font-size: 9px; }
.beam-side-cap { display: none; }
/* заготовка должна читаться как карточка: иконка, две полосы слева
и одна справа. Размеры ужаты под ширину карточки в 210 px. */
/* .beam-card--ghost .beam-icon специфичнее одиночного .beam-icon, поэтому
мобильный размер иконки до заготовки не доходил и она торчала за карточку */
.beam-card--ghost .beam-icon { width: 30px; height: 30px; border-radius: 8px; }
.beam-card--ghost .beam-side { display: flex; min-width: 0; }
.beam-card--ghost .beam-body .beam-ghost-line { max-width: 86px; height: 12px !important; }
.beam-card--ghost .beam-body .beam-ghost-line + .beam-ghost-line { max-width: 54px; height: 9px !important; margin-top: 5px !important; }
.beam-card--ghost .beam-side .beam-ghost-line { width: 34px !important; height: 12px !important; }
/* у живой карточки на телефоне в правой колонке только тег, значит и
заготовка обязана показывать одну полосу, а не две */
.beam-card--ghost .beam-side .beam-ghost-line + .beam-ghost-line { display: none; }
/* Четвёртое событие нужно только широкой ленте: на телефоне она 390 px,
и трёх карточек на половину (672 px) хватает с запасом. Прячем каждую
четвёртую, половины остаются одинаковыми, а слой становится вдвое
короче: 1344 px вместо 2688. Чем меньше слой, тем меньше тайлов
перерисовывает iOS. */
.beam-card:nth-child(4n) { display: none; }
.beam-track { --dur: 7.5s; }
/* дно: подписи ужимаем, иначе полосе не остаётся места */
.season-pool { gap: 10px; }
.pool-cap { font-size: 10px; letter-spacing: 0.06em; }
.pool-glow { width: 180px; }
.season-inner { padding: 0 20px; }
.season-title { margin-bottom: 20px; }
.season-desc { font-size: 15px; margin-bottom: 32px; }
.season-steps { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
.season-step:not(:last-child)::after { display: none; }
.season-step h3 { font-size: 18px; }
.season-step .step-lead { font-size: 15px; }
/* Security */
.security-section { padding: 60px 0 40px; }
.security-inner { grid-template-columns: 1fr; padding: 0 20px; gap: 24px; min-height: auto; }
.security-left { align-items: center; text-align: center; }
.security-badge { align-self: center; }
.security-title { margin-bottom: 16px; font-size: 32px; }
/* The note's desktop -24px top margin is tuned to the title's 40px bottom
margin; with the mobile title at 16px it would overlap, so drop the pull-up. */
.security-note { margin-top: 0; }
.security-3d { max-width: 160px; margin: 0 auto; }
.security-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.security-grid::before { display: none; }
.security-grid::after { display: none; }
.security-card:first-child::before,
.security-card:first-child::after,
.security-card:last-child::before,
.security-card:last-child::after { display: none; }
.security-card {
min-height: auto;
padding: 16px;
border-bottom: none;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 12px;
justify-content: flex-start;
}
.security-card-icon { width: 40px; height: 40px; margin-bottom: 12px !important; }
.security-card-icon svg { width: 18px; height: 18px; }
.security-card h3 { font-size: 14px; margin-bottom: 4px; }
.security-card p { font-size: 12px; }
.security-card:last-child { border-bottom: none; }
/* Trade */
.trade-section { padding: 60px 0 40px; }
/* stacked layout: keep the Pulser to the very outer edges so centered copy stays clean */
/* mobile: clean vertical-line frame — wider side strips that softly fade
at top & bottom so the dashed lines feel intentional, not cropped/noisy */
#trade-circuit {
-webkit-mask-image:
linear-gradient(to right, #000 0%, #000 12%, transparent 27%, transparent 73%, #000 88%, #000 100%),
linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
mask-image:
linear-gradient(to right, #000 0%, #000 12%, transparent 27%, transparent 73%, #000 88%, #000 100%),
linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
/* The JetPulser canvas carries a nested-rectangle trace mask tuned for a
wide banner; squished into the narrow mobile column its horizontal
rectangle edges read as horizontal lines (the carve shafts themselves
stay vertical). Drop that mask on phones so only the vertical shafts
remain, and dim the now-bare glow so it stays subtle. */
#trade-circuit canvas {
-webkit-mask: none !important;
mask: none !important;
opacity: 0.3;
}
/* Trim the carve shafts thinner than their (wider) mobile spacing so the
vertical lines read fine and airy, not chunky. */
#trade-circuit svg line { stroke-width: 7; }
.trade-inner { padding: 0 20px; min-height: auto; display: flex; flex-direction: column; }
.trade-content { max-width: 100%; text-align: center; }
.trade-badge { align-self: center; display: inline-flex; }
.trade-title { margin-bottom: 16px; }
.trade-desc { margin-bottom: 24px; }
/* центрируем список как блок (по ширине самой длинной строки), а строки
выравниваем по левому краю, чтобы все иконки стояли на одной вертикали */
.trade-features { margin-bottom: 24px; gap: 4px; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
.trade-feature { justify-content: flex-start; padding: 11px 0; }
.trade-feature-icon { width: 32px; height: 32px; }
.trade-feature span { font-size: 15px; }
.ticker-board {
position: relative;
right: auto;
top: auto;
transform: none;
width: 100%;
margin-top: 32px;
}
.ticker-board-header { padding: 10px 14px; font-size: 10px; grid-template-columns: 2fr 1.2fr 1fr 1.3fr; }
.ticker-row { padding: 10px 14px; grid-template-columns: 2fr 1.2fr 1fr 1.3fr; }
.ticker-asset img { width: 22px; height: 22px; }
.ticker-asset-name { font-size: 12px; }
.ticker-asset-ticker { font-size: 10px; }
.ticker-price { font-size: 11px; }
.ticker-change { font-size: 10px; }
.ticker-spark svg { width: 56px; height: 22px; }
/* Footer */
.site-footer { padding: 40px 0 0; }
.footer-inner { padding: 0 20px; }
.footer-top { display: flex; flex-direction: column; gap: 0; padding-bottom: 24px; }
.footer-brand { margin-bottom: 24px; position: relative; }
.footer-logo { margin-bottom: 14px; }
.footer-tagline { font-size: 26px; width: 100%; }
.footer-social-icons { display: none; }
.footer-links-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px 16px; }
.footer-col h3 { font-size: 10px; letter-spacing: 1.5px; margin-bottom: 12px; }
.footer-col a { font-size: 13px; }
.footer-col ul { gap: 8px; }
.footer-bottom { flex-direction: column; gap: 12px; text-align: center; padding: 20px 0; }
}
@media (max-width: 480px) {
.hero-left h1 { font-size: 32px; }
.hero-buttons { justify-content: center; }
.lm-btn, .api-btn { width: 100%; text-align: center; }
/* callouts CTA: stretch the row so its lm-btn fills width like season's
"Start Earning" (the centered .callouts-content otherwise shrinks the row) */
.callouts-btn-row { width: 100%; }
.chart-canvas-wrap { min-height: 180px; }
.hero-stats { grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hero-stat .stat-value { font-size: 20px; }
.hero-left .hero-desc { font-size: 14px; }
.coins-title { font-size: 28px; }
.product-card { padding: 18px; }
.product-card-body h3 { font-size: 16px; }
.trade-title { font-size: 28px; }
.trade-features { gap: 4px; }
.ticker-board-header { font-size: 9px; padding: 8px 12px; }
.footer-links-row { grid-template-columns: 1fr 1fr 1fr; }
/* Inside ZEXO */
.inside-section { padding: 48px 0; }
.inside-title { font-size: 30px; letter-spacing: -1px; margin-bottom: 24px; }
.inside-scene { height: 520px; }
.inside-head { font-size: 15px; gap: 10px; }
.inside-desc { font-size: 13px; padding-left: 28px; line-height: 1.6; }
.inside-progress { margin-left: 28px; }
.inside-labels { gap: 14px; bottom: 12px; }
.inside-labels span { font-size: 10px; letter-spacing: 0.8px; padding: 4px 6px; }
}
@media (max-width: 360px) {
.hero-left h1 { font-size: 28px; }
.hero-stat .stat-value { font-size: 18px; }
.hero-stat .stat-label { font-size: 8px; }
.products-title { margin-bottom: 24px; }
.security-grid { grid-template-columns: 1fr; }
}
/* ===================== PAGE INTRO (splash — matches app.zexo.io) ===================== */
#zexo-intro {
position: fixed;
inset: 0;
z-index: 100000;
background: var(--c-bg);
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.5s ease;
}
#zexo-intro.is-hiding { opacity: 0; }
#zexo-intro .zexo-intro-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
}
#zexo-intro .zexo-intro-logo {
width: 92px;
height: auto;
animation: zexoIntroPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
#zexo-intro .zexo-intro-dots {
display: flex;
gap: 6px;
}
#zexo-intro .zexo-intro-dots span {
width: 8px;
height: 8px;
border-radius: 9999px;
background: var(--c-accent);
animation: zexoIntroBounce 1s infinite;
}
#zexo-intro .zexo-intro-dots span:nth-child(2) { animation-delay: 0.15s; }
#zexo-intro .zexo-intro-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes zexoIntroPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
}
@keyframes zexoIntroBounce {
0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}
/* prevent scroll while intro is up */
html.intro-lock, html.intro-lock body { overflow: hidden; height: 100%; }
@media (prefers-reduced-motion: reduce) {
#zexo-intro .zexo-intro-logo,
#zexo-intro .zexo-intro-dots span { animation: none; }
.hero-rays { animation: none; opacity: 0.82; }
}
/* --- Accessibility: visible keyboard focus + skip link --- */
:focus-visible {
outline: 2px solid var(--c-accent, #4cd7f4);
outline-offset: 2px;
border-radius: 4px;
}
.skip-link {
position: absolute;
left: 12px;
top: -64px;
z-index: 100000;
padding: 10px 16px;
background: #0a0a0f;
color: #fff;
border: 1px solid var(--c-accent, #4cd7f4);
border-radius: 8px;
font: 600 14px/1 var(--font-ui, system-ui), sans-serif;
text-decoration: none;
transition: top .2s ease;
}
.skip-link:focus { top: 12px; }
/* --- Premium polish: microcopy contrast, tap targets, chart fallback, legal --- */
.products-badge, .season-badge, .security-badge, .trade-badge {
color: rgba(255,255,255,0.62);
font-size: 12px;
}
/* Section eyebrow accent — replaces the two flanking cyan dots with a
single structural leading marker: one vertical accent hairline that
reads as a deliberate brand index, not a decorative pair. Asymmetric
on purpose; the trailing dot is removed entirely. */
.coins-badge::before,
.products-badge::before,
.season-badge::before,
.security-badge::before,
.trade-badge::before {
content: '';
width: 2px;
height: 12px;
border-radius: 2px;
background: linear-gradient(180deg, var(--c-accent) 0%, rgba(76,215,244,0.22) 100%);
box-shadow: 0 0 7px rgba(76,215,244,0.30);
opacity: 0.95;
font-size: 0; /* neutralize the inherited glyph sizing */
}
.coins-badge::after,
.products-badge::after,
.season-badge::after,
.security-badge::after,
.trade-badge::after {
content: none;
}
/* brighter, denser security icons (keep the dither/scanline aesthetic) */
.security-card-icon { color: rgba(255,255,255,0.92); background: rgba(255,255,255,0.06); }
.security-card-icon svg {
-webkit-mask-image: repeating-linear-gradient(0deg, transparent 0px, transparent .5px, #fff .5px, #fff 3.5px);
mask-image: repeating-linear-gradient(0deg, transparent 0px, transparent .5px, #fff .5px, #fff 3.5px);
}
/* larger tap targets (>= 24px) without changing visual size */
.footer-col a { display: inline-block; padding: 4px 0; }
.footer-back-top { padding: 8px 4px; }
/* hero live-chart loading / error overlay (covers the silent-fail blank state) */
/* Вкладки инструментов над графиком: акции и индексы впереди, крипта следом */
.chart-instruments {
display: flex;
align-items: center;
gap: 4px;
padding: 10px 12px;
border-bottom: 1px solid var(--c-border);
overflow-x: auto;
scrollbar-width: none;
}
.chart-instruments::-webkit-scrollbar { display: none; }
.chart-inst {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px 6px 8px;
border: none;
border-radius: var(--r-pill);
background: none;
color: var(--c-text-3);
font-family: var(--font-ui);
font-size: 12px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
cursor: pointer;
transition: color 0.2s, background-color 0.2s;
}
.chart-inst:hover { color: var(--c-text-1); background: rgba(255,255,255,0.05); }
.chart-inst.is-active { color: var(--c-text-1); background: rgba(255,255,255,0.09); }
.chart-inst img {
width: 16px;
height: 16px;
object-fit: contain;
border-radius: 50%;
opacity: 0.75;
transition: opacity 0.2s;
}
.chart-inst:hover img,
.chart-inst.is-active img { opacity: 1; }
.chart-quote-icon {
width: 18px;
height: 18px;
object-fit: contain;
border-radius: 50%;
}
/* height:100% у потомков не работает, пока у родителя высота auto:
min-height базы для процентов не даёт. Поэтому график кладём
абсолютом на всю площадь контейнера. */
.chart-quote {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px 0;
}
.chart-quote-name {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 500;
color: var(--c-text-1);
}
.chart-quote-price {
font-family: var(--font-mono);
font-size: 15px;
color: var(--c-text-1);
}
.chart-quote-change {
font-family: var(--font-mono);
font-size: 12px;
color: var(--c-text-3);
}
.chart-quote-change.up { color: var(--c-green); }
.chart-quote-change.down { color: var(--c-red); }
.tv-chart { position: absolute; inset: 0; }
/* autosize виджета опирается на высоту родителя: без этого iframe
остаётся 143px и под графиком висит пустая полоса */
.tv-chart .tradingview-widget-container,
.tv-chart .tradingview-widget-container__widget,
.tv-chart iframe {
width: 100% !important;
height: 100% !important;
display: block;
border: 0;
}
@media (max-width: 768px) {
.chart-instruments { padding: 8px; gap: 2px; }
.chart-inst { padding: 6px 10px; font-size: 11px; }
}
/* небольшой отступ снизу: виджет рисует ось дат у самого края,
и без него подписи выглядят срезанными */
.chart-canvas-wrap { flex: 1; min-height: 320px; position: relative; padding-bottom: 6px; }
.chart-fallback {
position: absolute; inset: 0; z-index: 2;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 12px; background: #0c0c14;
font-family: var(--font-mono); font-size: 12px; letter-spacing: .5px;
color: rgba(255,255,255,0.5); text-align: center; padding: 0 16px;
transition: opacity .4s ease;
}
.chart-fallback.is-hidden { opacity: 0; pointer-events: none; }
.chart-fallback-spinner {
width: 22px; height: 22px; border-radius: 50%;
border: 2px solid rgba(255,255,255,0.12); border-top-color: var(--c-accent);
animation: chartspin .8s linear infinite;
}
.chart-fallback.is-error .chart-fallback-spinner { display: none; }
@keyframes chartspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .chart-fallback-spinner { animation: none; } }
/* footer legal bar */
.footer-legal { border-top: 1px solid rgba(255,255,255,0.06); padding: 20px 0 0; margin-top: 8px; }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-bottom: 12px; }
.footer-legal-links a {
display: inline-block; padding: 4px 0;
font-family: var(--font-ui); font-size: 13px; color: rgba(255,255,255,0.6);
text-decoration: none; transition: color .2s ease;
}
.footer-legal-links a:hover { color: #fff; }
.footer-risk { font-family: var(--font-ui); font-size: 12px; line-height: 1.6; color: rgba(255,255,255,0.6); max-width: 940px; margin: 0; }
/* --- Type hierarchy ---------------------------------------------------
Headings render in the real Banana Grotesk Medium (500); body text
stays Regular (400). Same selectors/specificity as the per-section
blocks above, placed later so this wins by source order. The brand
ships no weight above Medium, so we never go 600+ (would faux-bold). */
.hero-left h1,
.hero-stat .stat-value,
.inside-title,
.products-title,
.season-title,
.security-title,
.trade-title,
.coins-title,
.product-card-body h3,
.season-step h3,
.security-card h3,
.coin-info .coin-name { font-weight: 500; }
.callouts-hero{
position:relative; overflow:hidden;
background:#000; /* black style, matches products/season */
padding: 158px 0 448px;
}
.callouts-bg-gradient{
position:absolute; top:0; left:0; right:0; height:464px;
z-index:4; pointer-events:none;
background: linear-gradient(0deg, rgba(0,0,0,0), #000 78%);
}
.callouts-content{
position:relative; z-index:5;
max-width:752px; margin:0 auto;
display:flex; flex-direction:column; align-items:center; gap:32px;
}
.callouts-h1{
font-family:var(--font-ui);
font-size:64px; font-weight:500; line-height:76.8px; letter-spacing:-0.01em;
color:var(--c-text-1); text-align:center;
}
.callouts-sub{
margin-top:-12px; font-size:18px; font-weight:400; line-height:1.5;
color:var(--c-text-2); text-align:center; max-width:560px;
}
.callouts-btn-row{ display:flex; align-items:center; gap:16px; }
.callouts-lottie{
position:absolute; top:324.844px; left:0; right:0; margin:0 60.5px; z-index:3;
aspect-ratio:1440 / 500; /* reserve scene height so async Lottie SVG doesn't shift layout (CLS) */
}
.callouts-lottie svg{ display:block; }
/* tablet + mobile (< desktop design width): the 1440-wide absolute scene
overlaps the centered content, so switch to a stacked layout — scene in
flow above, text + buttons anchored to the lower part. Desktop (>=1200px)
keeps the module 1:1. Headline scales smoothly via clamp. */
@media (max-width:1199px){
.callouts-hero{
display:flex; flex-direction:column;
padding:40px 0 72px;
}
.callouts-bg-gradient{ display:none; }
.callouts-content{ padding:0 24px; order:2; gap:24px; }
.callouts-h1{ font-size:clamp(32px, 5.5vw, 56px); line-height:1.12; }
.callouts-sub{ font-size:clamp(15px, 1.9vw, 18px); }
.callouts-btn-row{ flex-wrap:wrap; justify-content:center; }
.callouts-lottie{
position:static; order:1; top:auto; left:auto; right:auto;
margin:0 0 24px;
}
}
/* ===== Signal chart card — custom element where Call Performance / Call Lifetime were ===== */
.signal-card{
position:absolute; z-index:4;
top:560px; left:calc(50% + 120px);
width:182px; height:182px; padding:10px 12px 12px;
background:#18181e; /* matches native cards (--c-surface-2) */
border:1px solid rgba(255,255,255,0.06);
border-radius:14px;
box-shadow:0 18px 44px rgba(0,0,0,0.45);
opacity:0; /* hidden until the conveyor driver paints it, so it only
ever appears via the emerge/grow path - no full-size
flash at its CSS resting spot before the driver starts */
}
.signal-card-head{
display:flex; align-items:center; margin-bottom:8px;
font-family:var(--font-ui); font-size:14px; font-weight:500; color:#fff;
}
.signal-chart{ position:relative; width:100%; height:120px; }
.signal-candles{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.signal-bubble{
position:absolute; top:0; transform:translateX(-50%);
display:flex; flex-direction:column; align-items:center;
pointer-events:none;
}
/* avatar is a div with a background-image (not an ![]()
): the round clip is rock
solid under the card's CSS scale transform, where border-radius on a replaced
![]()
leaked square corners on mobile — and a div bg never shows a broken-image
square placeholder. */
.signal-bubble-av{
width:26px; height:26px; border-radius:50%; display:block; flex:0 0 auto;
border:2px solid var(--c-accent);
background:#0a0a0f center/cover no-repeat;
box-shadow:0 0 0 2px rgba(76,215,244,0.14), 0 6px 16px rgba(0,0,0,0.55);
will-change:transform,opacity;
}
.signal-bubble-line{
width:1px; flex:0 0 auto; margin-top:2px;
background:repeating-linear-gradient(to bottom, var(--c-accent) 0 3px, transparent 3px 7px);
opacity:0.55; transform-origin:top center; will-change:transform;
}
/* "signal fired" ring: expands + fades out under the avatar as it pops, tying the
bubble to the candle it lands on (kept centred via margin, not transform, so GSAP
owns scale cleanly). */
.signal-bubble-ping{
position:absolute; top:0; left:50%; width:26px; height:26px; margin-left:-13px;
border-radius:50%; border:2px solid var(--c-accent);
opacity:0; pointer-events:none; will-change:transform,opacity;
}
/* faint "..." overflow-menu dot in the corner, mirroring the native hub cards */
.signal-card-menu{
position:absolute; right:12px; bottom:11px;
display:flex; gap:3px; pointer-events:none;
}
.signal-card-menu i{
width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,0.3);
}
/* < desktop: the card now rides the conveyor over the Lottie hub (driven by
inline styles in JS, which override this). This static-flow layout is only the
reduced-motion / no-JS fallback; kept opacity:0 so the static card never flashes
under the text before the conveyor driver paints it (reduced-motion re-shows it
via an inline opacity:1). */
@media (max-width:1199px){
.signal-card,
.predict-card,
.stocks-card,
.perf-card,
.roi-card{
position:static; transform:none; order:3;
margin:24px auto 0; width:min(300px,92%); height:auto; opacity:0;
}
}
/* ===== Predict + Stocks cards: replace the Live Signal Feed / Avg Move After Call
slots (Block_4 / Block_6), which are hidden in hero.json. Same shell as
.signal-card so all three DOM cards read as one family with the native
Lottie cards; --hub-x only spaces them out in the static fallback, the
conveyor driver overrides position anyway. ===== */
.predict-card,
.stocks-card,
.perf-card,
.roi-card{
position:absolute; z-index:4;
top:560px; left:calc(50% + var(--hub-x, 120px));
width:182px; height:182px; padding:10px 12px 12px;
background:#18181e;
border:1px solid rgba(255,255,255,0.06);
border-radius:14px;
box-shadow:0 18px 44px rgba(0,0,0,0.45);
opacity:0; /* painted only by the conveyor driver */
font-family:var(--font-ui);
display:flex; flex-direction:column; /* content fills the square, no dead space */
}
.hub-card-head{
display:flex; align-items:center; justify-content:space-between; gap:8px;
margin-bottom:10px;
font-size:14px; font-weight:500; color:#fff;
}
/* static dot, no pulse keyframes: rule 9: nothing in this section may animate
forever on its own; everything moves off the conveyor clock instead. */
.hub-live{
display:inline-flex; align-items:center; gap:4px;
font-size:9px; font-weight:500; letter-spacing:0.08em; color:var(--c-accent);
}
.hub-live::before{
content:''; width:5px; height:5px; border-radius:50%;
background:var(--c-accent); box-shadow:0 0 0 2px rgba(76,215,244,0.18);
}
/* --- Predict: laid out like a market card on app.zexo.io/predict (icon and
question, bets in cents, payout under each), but in the landing's own
palette: the app's #00e100 / #ff2a6c read acid next to the muted candles
of the Live Calls card sitting right beside it on the conveyor. --- */
.predict-delta{
display:inline-flex; align-items:center; gap:3px;
font-size:10px; line-height:1; color:#26d07c;
}
/* Sparkline rides in the header, as it does in the app. Full width under the
question does not fit: the card is 182px tall and the flex column squeezed a
40px chart down to 8px. */
.predict-spark{ width:40px; height:14px; overflow:visible; }
.predict-spark .spark-line{
fill:none; stroke:#26d07c; stroke-width:1.4; stroke-linejoin:round; stroke-linecap:round;
}
.predict-q{
margin:0; font-size:12.5px; line-height:1.4; font-weight:400; color:#fff;
display:flex; gap:7px; align-items:flex-start;
}
.predict-ico{ width:18px; height:18px; border-radius:50%; flex:none; margin-top:1px; }
/* the app puts both sides side by side on a binary market; on a card this
narrow that reads better than two stacked rows */
.predict-bets{ margin-top:auto; display:grid; grid-template-columns:1fr 1fr; column-gap:6px; row-gap:5px; }
/* taller than the app's pills: on a 182px card the two bets are the thing the eye
should land on, and the height also absorbs the slack under the question */
.predict-bet{
display:block; padding:11px 0; border-radius:8px;
font-size:11.5px; line-height:1; text-align:center;
}
.predict-bet[data-side="yes"]{ color:#26d07c; background:rgba(38,208,124,0.12); }
.predict-bet[data-side="no"]{ color:#f6465d; background:rgba(246,70,93,0.12); }
.predict-bet b{ font-weight:500; font-variant-numeric:tabular-nums; }
/* payout under each bet, like the app's "$100 -> $500": makes the price read
as money rather than an abstract percentage */
.predict-payout{ font-size:9px; color:var(--c-text-3); text-align:center; font-variant-numeric:tabular-nums; }
.predict-foot{
margin-top:9px; padding-top:9px; border-top:1px solid rgba(255,255,255,0.06);
display:flex; align-items:center; justify-content:space-between;
font-size:10px; color:var(--c-text-3);
}
.predict-foot svg{ width:9px; height:9px; stroke:currentColor; stroke-width:1.6; fill:none; }
/* --- Stocks: same row shape as the Markets list in app.zexo.io - logo,
ticker with its leverage chip, then Last price over 24h change --- */
.stock-row{
flex:1; /* three rows share the card evenly */
display:grid; grid-template-columns:20px 1fr auto; align-items:center; gap:8px;
}
.stock-row + .stock-row{ border-top:1px solid rgba(255,255,255,0.05); }
/* every logo sits in the same disc: the source files are mixed (bare glyphs for
NVDA and META, an already-round mark for SPY) and without it the column reads
ragged */
.stock-logo{
width:20px; height:20px; border-radius:50%; display:block;
background:rgba(255,255,255,0.06); padding:2px; box-sizing:border-box;
}
.stock-tic{ display:flex; align-items:center; gap:5px; font-size:12px; font-weight:500; color:#fff; }
/* leverage chip, like the blue 20x badge in the app's Markets list */
.stock-lev{
font-size:9px; font-style:normal; font-weight:500; line-height:1;
padding:2px 4px; border-radius:4px;
color:var(--c-accent); background:rgba(76,215,244,0.12);
}
.stock-lev:empty{ display:none; } /* market info not loaded: no empty chip */
.stock-num{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.25; }
.stock-price{ font-size:12px; color:#fff; font-variant-numeric:tabular-nums; }
.stock-chg{ font-size:10px; font-variant-numeric:tabular-nums; color:var(--c-text-2); }
.stock-chg.up{ color:#26d07c; }
.stock-chg.down{ color:#f6465d; }
/* --- Signal Performance: the last two conveyor slots were still the vector
cards drawn in Lottie, so they carried their own type and spacing and
looked like guests among the DOM ones. Same shell, same 14px head, same
row rhythm as Stocks; values sit in chips instead of loose text. --- */
.perf-row{
flex:1; display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.perf-row + .perf-row{ border-top:1px solid rgba(255,255,255,0.05); }
.perf-label{ font-size:11.5px; color:var(--c-text-2); }
.perf-val{
font-size:11px; font-weight:500; line-height:1;
padding:4px 7px; border-radius:6px; font-variant-numeric:tabular-nums;
color:#26d07c; background:rgba(38,208,124,0.12);
}
/* the multiple is a scale, not a gain: ZEXO blue keeps it from reading as
a third green number */
.perf-val[data-kind="mult"]{ color:var(--c-accent); background:rgba(76,215,244,0.12); }
/* --- Cumulative Call ROI --- */
.roi-tabs{ display:flex; gap:4px; margin-bottom:10px; }
.roi-tab{
font-size:9px; line-height:1; padding:4px 6px; border-radius:5px;
color:var(--c-text-3); background:rgba(255,255,255,0.04);
}
.roi-tab.is-on{ color:#fff; background:rgba(255,255,255,0.1); }
.roi-chart{ flex:1; display:block; width:100%; min-height:0; }
/* без non-scaling-stroke: карточка приезжает по конвейеру через scale, и линия
должна расти вместе с ней, а не держать одну толщину на любом размере */
.roi-chart .roi-line{
fill:none; stroke:var(--c-accent); stroke-width:1.6;
stroke-linejoin:round; stroke-linecap:round;
}
.roi-chart .roi-fill{ fill:url(#roiFill); stroke:none; }
.roi-foot{
margin-top:8px; display:flex; align-items:baseline; justify-content:space-between;
font-size:10px; color:var(--c-text-3);
}
.roi-foot b{ font-size:12px; font-weight:500; color:#26d07c; font-variant-numeric:tabular-nums; }