/* ─────────────────────────────────────────
Финансовый Маркетплейс · v3 · premium fintech
Палитра — строго из файла заказчика.
Стиль — Tinkoff Invest / Альфа-Инвестиции.
───────────────────────────────────────── */
:root {
/* База / поверхности (ТЗ) */
--bg: #F7F9FB;
--surface: #FFFFFF;
--surface-alt: #F1F4F8;
/* Типографика */
--text: #0B1220;
--text-secondary: #8E9399;
--text-disabled: #B7B9BE;
/* Бренд / действия */
--brand: #1046bb;
--brand-hover: #0c348c;
--brand-soft: #e7eefc;
--brand-glow: rgba(16, 70, 187, 0.32);
/* Семантические */
--border: #E4E8EF;
--border-strong: #CDD2DC;
--success: #1A9B5C;
--success-soft: #DCF1E5;
--warning: #C47700;
--warning-soft: #FFF1D9;
--danger: #C92C2C;
--danger-soft: #FBE4E4;
/* Геометрия */
--container: 1240px;
--gutter: 24px;
--header-h: 68px;
--r-sm: 8px;
--r: 12px;
--r-lg: 16px;
--r-xl: 24px;
--r-pill: 999px;
/* Тени */
--sh-1: 0 1px 2px rgba(11, 18, 32, 0.05);
--sh-2: 0 4px 14px rgba(11, 18, 32, 0.06);
--sh-3: 0 12px 32px rgba(11, 18, 32, 0.10);
--sh-brand: 0 10px 28px var(--brand-glow);
--t: 200ms cubic-bezier(.4, 0, .2, 1);
--t-slow: 380ms cubic-bezier(.22, 1, .36, 1);
--font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
*::selection { background: var(--brand); color: #fff; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
:target { scroll-margin-top: calc(var(--header-h) + 24px); }
@keyframes targetFlash {
0% { box-shadow: 0 0 0 4px var(--brand-soft); }
100% { box-shadow: 0 0 0 0 transparent; }
}
#risks { scroll-margin-top: calc(var(--header-h) + 24px); }
#risks:target { animation: targetFlash 1.2s ease-out 1; border-radius: var(--r-lg); }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--font);
font-size: 15px;
line-height: 1.55;
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "ss01", "cv11";
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--brand-hover); }
h1, h2, h3, h4, h5 {
margin: 0;
color: var(--text);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
}
h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); letter-spacing: -0.035em; font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.15rem; font-weight: 600; }
p { margin: 0; color: var(--text); }
.eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-mono);
font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--brand); font-weight: 600;
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--brand); opacity: 0.4; }
.num { font-family: var(--font-mono); font-feature-settings: "tnum"; letter-spacing: -0.02em; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: 960px; }
.muted { color: var(--text-secondary); }
.dim { color: var(--text-disabled); }
.hidden { display: none !important; }
/* ─── Header ────────────────────────────── */
.site-header {
position: sticky; top: 0; z-index: 100;
height: var(--header-h);
display: flex; align-items: center;
background: rgba(255, 255, 255, 0.85);
-webkit-backdrop-filter: saturate(180%) blur(14px);
backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid var(--border);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; }
.site-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; text-decoration: none; }
.site-brand:hover { color: var(--brand); }
.site-brand__mark {
width: 28px; height: 28px;
border-radius: 8px;
background: linear-gradient(135deg, var(--brand) 0%, #2461d8 100%);
box-shadow: 0 6px 14px var(--brand-glow), inset 0 0 0 1px rgba(255,255,255,0.18);
display: grid; place-items: center;
color: #fff;
font-family: var(--font-mono); font-size: 13px; font-weight: 700;
}
/* Логотип в хедере — IMG большой, контейнер обрезает белые поля файла */
.site-brand {
height: var(--header-h);
overflow: hidden;
padding: 0;
gap: 0;
}
.site-brand__logo {
display: block;
height: 240px; /* В 3.5× больше высоты хедера — крупный лого виден */
width: auto;
max-width: none;
object-fit: contain;
transition: transform 0.25s ease;
flex-shrink: 0;
}
.site-brand:hover .site-brand__logo {
transform: scale(1.04);
}
@media (max-width: 640px) {
.site-brand__logo {
height: 180px;
}
}
/* Логотип в футере — блочный, прижат влево, обрезает белые поля файла */
.site-brand--footer {
display: flex;
align-items: center;
justify-content: center;
width: 260px;
height: 84px;
overflow: hidden;
margin: 0 0 8px;
}
.site-brand--footer .site-brand__logo--footer {
height: 320px;
width: auto;
flex-shrink: 0;
}
@media (max-width: 640px) {
.site-brand--footer { width: 220px; height: 72px; }
.site-brand--footer .site-brand__logo--footer { height: 270px; }
}
.site-nav { display: flex; gap: 4px; align-items: center; }
.site-nav a {
padding: 8px 14px;
border-radius: var(--r-sm);
color: var(--text-secondary);
font-weight: 500; font-size: 14.5px;
transition: color var(--t), background var(--t);
}
.site-nav a:hover { color: var(--text); background: var(--surface-alt); }
.site-nav a.is-active { color: var(--brand); background: var(--brand-soft); }
.site-actions { display: flex; gap: 8px; align-items: center; }
/* ─── Buttons ────────────────────────────── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 40px; padding: 0 20px;
border: 0; border-radius: var(--r);
font: 600 14.5px/1 var(--font);
letter-spacing: -0.005em;
cursor: pointer;
white-space: nowrap;
transition: background var(--t), color var(--t), transform var(--t), box-shadow var(--t);
}
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.5; pointer-events: none; }
.btn--primary {
background: var(--brand); color: #fff;
box-shadow: 0 6px 16px var(--brand-glow);
}
.btn--primary:hover { background: var(--brand-hover); color: #fff; box-shadow: 0 8px 20px var(--brand-glow); transform: translateY(-1px); }
.btn--secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); }
.btn--secondary:hover { border-color: var(--brand); color: var(--brand); }
.btn--ghost { background: transparent; color: var(--text); }
.btn--ghost:hover { background: var(--surface-alt); }
.btn--dark { background: var(--text); color: #fff; }
.btn--dark:hover { background: #1c1f25; color: #fff; }
.btn--soft { background: var(--brand-soft); color: var(--brand); }
.btn--soft:hover { background: var(--brand); color: #fff; }
.btn--white { background: #fff; color: var(--brand); }
.btn--white:hover { background: var(--brand-soft); }
.btn--block { width: 100%; }
.btn--lg { height: 48px; padding: 0 26px; font-size: 15px; border-radius: var(--r); }
.btn--sm { height: 34px; padding: 0 14px; font-size: 13px; }
/* ─── Hero ───────────────────────────────── */
.hero {
position: relative; overflow: hidden;
padding: 80px 0 88px;
background:
radial-gradient(ellipse 90% 60% at 80% 100%, var(--brand-soft) 0%, transparent 50%),
radial-gradient(ellipse 70% 60% at 10% 0%, rgba(78, 125, 255, 0.12) 0%, transparent 60%),
var(--bg);
}
.hero::before {
content: ""; position: absolute; inset: 0; z-index: 0;
background-image: radial-gradient(circle, rgba(16, 70, 187, 0.06) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(180deg, rgba(0,0,0,0.7), transparent 80%);
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.7), transparent 80%);
pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 980px) { .hero__inner { grid-template-columns: 1fr; gap: 40px; } }
.hero__badge {
display: inline-flex; gap: 8px; align-items: center;
padding: 7px 14px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-pill);
font-size: 13px; color: var(--text); font-weight: 500;
box-shadow: var(--sh-1);
}
.hero__badge .live-dot {
width: 8px; height: 8px; border-radius: 50%; background: var(--success);
box-shadow: 0 0 0 4px var(--success-soft);
animation: live 1.8s ease-in-out infinite;
}
@keyframes live { 50% { box-shadow: 0 0 0 8px rgba(26, 155, 92, 0.12); } }
.hero h1 { margin-top: 20px; }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero__lead { margin-top: 22px; font-size: 17px; line-height: 1.55; color: var(--text-secondary); max-width: 520px; }
.hero__actions { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero__stats { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 540px; }
.hero__stats > div { padding-left: 16px; border-left: 2px solid var(--brand); min-width: 0; }
.hero__stats > div > strong { display: block; font: 700 1.6rem var(--font-mono); letter-spacing: -0.02em; color: var(--text); white-space: nowrap; }
.hero__stats > div > strong > span { display: inline !important; white-space: nowrap; }
.hero__stats > div > span { display: block; font-size: 12.5px; color: var(--text-secondary); margin-top: 6px; line-height: 1.3; }
@media (max-width: 980px) { .hero__stats { grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 32px; } .hero__stats > div { padding-left: 12px; } .hero__stats > div > strong { font-size: 1.4rem; } }
/* ─── Hero visual: 3D city of deals ─── */
.hero__visual-wrap { display: flex; flex-direction: column; gap: 12px; }
.hero__visual-caption {
align-self: flex-start;
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 14px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-pill);
font: 600 12px var(--font-mono);
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text);
box-shadow: var(--sh-1);
}
.hero__visual-caption .live-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--brand);
box-shadow: 0 0 0 4px rgba(16,70,187,0.18);
animation: live 1.8s ease-in-out infinite;
}
.hero__visual {
position: relative;
aspect-ratio: 1 / 1;
max-height: 520px;
background:
radial-gradient(ellipse 70% 60% at 50% 50%, #0f1438 0%, #050617 100%);
border-radius: var(--r-xl);
overflow: hidden;
border: 1px solid var(--border);
box-shadow: 0 30px 80px rgba(11, 18, 32, 0.2), 0 0 60px rgba(74,120,240,0.18);
}
.hero__visual canvas[data-hero-3d] {
position: absolute; inset: 0;
width: 100% !important; height: 100% !important;
display: block;
}
.hero__visual::before {
content: ""; position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 40px 40px;
mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 0%, transparent 70%);
-webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 0%, transparent 70%);
pointer-events: none;
}
.hero__visual::after {
content: ""; position: absolute; left: 50%; top: 50%;
width: 360px; height: 360px; margin: -180px 0 0 -180px;
border-radius: 50%;
background: radial-gradient(circle, rgba(74,120,240,0.35), transparent 60%);
pointer-events: none;
animation: glow 4s ease-in-out infinite alternate;
}
@keyframes glow { 100% { opacity: 0.65; transform: scale(1.05); } }
.iso-stage {
position: absolute; inset: 0;
display: grid; place-items: center;
perspective: 1400px;
}
.iso {
width: 280px;
position: relative;
transform-style: preserve-3d;
transform: rotateX(58deg) rotateZ(-42deg);
animation: isoFloat 5s ease-in-out infinite alternate;
}
@keyframes isoFloat { 100% { transform: rotateX(58deg) rotateZ(-42deg) translateZ(8px); } }
.iso-card {
position: absolute;
left: 0; right: 0;
width: 100%;
background: linear-gradient(135deg, #fff 0%, #f4f7ff 100%);
border-radius: 18px;
padding: 22px 24px;
box-shadow:
0 1px 0 rgba(255,255,255,0.7) inset,
0 18px 40px rgba(0,0,0,0.45),
0 4px 0 #c2cce6;
transform-style: preserve-3d;
}
.iso-card--1 { top: 0; z-index: 3; animation: cardFloat 4.4s ease-in-out infinite alternate; }
.iso-card--2 { top: 96px; z-index: 2; opacity: 0.95; animation: cardFloat 4.4s ease-in-out infinite alternate-reverse; animation-delay: -2s; }
.iso-card--3 { top: 192px; z-index: 1; opacity: 0.88; animation: cardFloat 4.4s ease-in-out infinite alternate; animation-delay: -3.2s; }
@keyframes cardFloat { 100% { transform: translateZ(20px); } }
.iso-card .head { display: flex; justify-content: space-between; align-items: center; }
.iso-card .head .name { font: 700 13px/1 var(--font); color: var(--text); letter-spacing: -0.01em; }
.iso-card .head .tag {
font: 600 9px var(--font-mono); letter-spacing: 0.08em;
padding: 3px 8px; border-radius: 999px;
background: var(--brand-soft); color: var(--brand);
}
.iso-card .yield {
margin: 12px 0 6px;
font: 800 2rem var(--font-mono);
letter-spacing: -0.03em; color: var(--brand);
display: flex; align-items: baseline; gap: 3px;
}
.iso-card .yield sup { font-size: 0.65rem; color: var(--brand); opacity: 0.6; }
.iso-card .bar {
height: 5px; background: rgba(16,70,187,0.08); border-radius: 999px; overflow: hidden;
margin-top: 10px;
}
.iso-card .bar > span {
display: block; height: 100%;
background: linear-gradient(90deg, var(--brand), #4a78f0);
border-radius: inherit;
animation: barGrow 2s var(--t-slow) both;
}
@keyframes barGrow { from { width: 0 !important; } }
.iso-card .meta {
display: flex; justify-content: space-between;
margin-top: 8px;
font: 500 10px var(--font-mono);
color: var(--text-secondary);
}
.iso-card .meta strong { color: var(--text); font-weight: 600; }
/* парящие мелкие частицы */
.iso-particle {
position: absolute; width: 4px; height: 4px; border-radius: 50%;
background: rgba(74,120,240,0.7);
box-shadow: 0 0 12px rgba(74,120,240,0.9);
animation: particleFloat 6s ease-in-out infinite;
}
.iso-particle:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; }
.iso-particle:nth-child(2) { right: 12%; top: 70%; animation-delay: -2s; }
.iso-particle:nth-child(3) { left: 50%; bottom: 8%; animation-delay: -4s; }
.iso-particle:nth-child(4) { right: 8%; top: 22%; animation-delay: -1s; width: 3px; height: 3px; }
.iso-particle:nth-child(5) { left: 12%; bottom: 18%; animation-delay: -3s; width: 3px; height: 3px; }
@keyframes particleFloat {
0%, 100% { transform: translateY(0) translateX(0); opacity: 0.7; }
50% { transform: translateY(-20px) translateX(10px); opacity: 1; }
}
@media (max-width: 720px) {
.hero__visual { max-height: 380px; }
.iso { width: 220px; transform: rotateX(58deg) rotateZ(-42deg) scale(0.85); }
}
/* ─── Section base ─────────────────────── */
section.block { padding: 80px 0; }
section.block--alt { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
section.block .head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; max-width: 720px; }
section.block .head h2 { letter-spacing: -0.025em; }
/* ─── KPI strip ───────────────────────── */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi-row .kpi {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 22px;
transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.kpi-row .kpi:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--sh-2); }
.kpi-row .kpi label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
.kpi-row .kpi strong { font: 700 1.8rem var(--font-mono); letter-spacing: -0.02em; color: var(--text); }
.kpi-row .kpi small { color: var(--text-secondary); font-size: 12px; margin-left: 4px; font-weight: 500; }
@media (max-width: 880px) { .kpi-row { grid-template-columns: 1fr 1fr; } }
/* ─── Features bento ──────────────────── */
.features { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto auto; gap: 14px; }
@media (max-width: 880px) { .features { grid-template-columns: 1fr; grid-template-rows: none; } }
.feature {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
padding: 28px;
display: flex; flex-direction: column; gap: 14px;
transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.feature:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--sh-2); }
.feature--big { grid-row: span 2; background: linear-gradient(160deg, var(--brand) 0%, var(--brand-hover) 100%); color: #fff; border-color: transparent; position: relative; overflow: hidden; }
.feature--big::before { content: ""; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.14), transparent 70%); pointer-events: none; }
.feature--big h3, .feature--big p { color: #fff; }
.feature--big .icon { background: rgba(255,255,255,0.16); color: #fff; width: 44px; height: 44px; }
.feature .icon {
width: 40px; height: 40px;
display: grid; place-items: center;
background: var(--brand-soft); color: var(--brand);
border-radius: var(--r);
}
.feature h3 { font-size: 1.1rem; margin: 0; }
.feature p { color: var(--text-secondary); font-size: 14px; line-height: 1.55; }
.feature--big p { color: rgba(255,255,255,0.85); font-size: 15px; }
/* ─── Steps ─── */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 880px) { .steps { grid-template-columns: 1fr; } }
.step {
padding: 28px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.step:hover { border-color: var(--brand); box-shadow: var(--sh-2); transform: translateY(-2px); }
.step__num {
font: 700 13px/1 var(--font-mono);
color: var(--brand);
background: var(--brand-soft);
width: 32px; height: 32px;
display: grid; place-items: center;
border-radius: 8px;
margin-bottom: 18px;
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--text-secondary); font-size: 14px; }
/* ─── CTA ────────────────────────────── */
.cta {
background: linear-gradient(135deg, var(--text) 0%, #1a1d28 100%);
color: #fff;
border-radius: var(--r-xl);
padding: 64px 56px;
display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 32px; align-items: center;
position: relative; overflow: hidden;
}
.cta::before {
content: ""; position: absolute; right: -120px; top: -120px; width: 400px; height: 400px;
background: radial-gradient(circle, var(--brand-glow), transparent 70%);
pointer-events: none;
}
.cta::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--brand), transparent);
}
.cta h2 { color: #fff; max-width: 540px; }
.cta p { color: rgba(255,255,255,0.7); margin-top: 12px; max-width: 540px; }
.cta__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; position: relative; z-index: 1; }
.cta .btn--ghost { color: rgba(255,255,255,0.95); border: 1px solid rgba(255,255,255,0.22); background: transparent; }
.cta .btn--ghost:hover { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.35); }
@media (max-width: 880px) { .cta { padding: 36px 24px; grid-template-columns: 1fr; } .cta__actions { justify-content: flex-start; } }
/* ─── Footer ────────────────────────── */
.site-footer { background: #fff; border-top: 1px solid var(--border); padding: 56px 0 28px; margin-top: 88px; }
.site-footer .f-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 48px; }
@media (max-width: 880px) { .site-footer .f-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
.site-footer h5 { font-size: 12px; margin: 0 0 14px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary); font-weight: 700; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: var(--text); font-size: 14px; }
.site-footer a:hover { color: var(--brand); }
.site-footer .lead { color: var(--text-secondary); font-size: 13.5px; line-height: 1.55; margin-top: 14px; max-width: 280px; }
.site-footer .contact { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); }
.site-footer .contact svg { color: var(--text-secondary); flex-shrink: 0; }
.site-footer .contact a { font-weight: 500; }
.site-footer__bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); margin-top: 40px; padding-top: 20px; color: var(--text-secondary); font-size: 12.5px; }
/* ─── Forms ─────────────────────────── */
.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-field label { font-size: 13px; font-weight: 500; color: var(--text); }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .form-grid-2 { grid-template-columns: 1fr; } }
.form-control, input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=number], input[type=search], select, textarea {
width: 100%; font: inherit; font-size: 14.5px;
padding: 11px 14px; border-radius: var(--r);
border: 1px solid var(--border-strong);
background: var(--surface); color: var(--text);
transition: border-color var(--t), box-shadow var(--t);
}
input:focus, select:focus, textarea:focus, .form-control:focus {
outline: none; border-color: var(--brand);
box-shadow: 0 0 0 4px var(--brand-soft);
}
.form-help { color: var(--text-secondary); font-size: 12.5px; }
.form-error { color: var(--danger); font-size: 12.5px; }
select { appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.checkbox { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text); cursor: pointer; user-select: none; }
.checkbox input[type=checkbox] {
appearance: none; -webkit-appearance: none;
width: 20px; height: 20px;
border: 1.5px solid var(--border-strong); border-radius: 6px;
background: #fff;
display: inline-grid; place-items: center;
cursor: pointer; flex-shrink: 0;
transition: background var(--t), border-color var(--t);
}
.checkbox input[type=checkbox]:hover { border-color: var(--brand); }
.checkbox input[type=checkbox]:checked { background: var(--brand); border-color: var(--brand); }
.checkbox input[type=checkbox]:checked::after {
content: ""; width: 11px; height: 11px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain; background-repeat: no-repeat;
}
/* ─── Auth pages ───────────────────── */
.auth-shell {
min-height: calc(100vh - var(--header-h));
display: grid; place-items: center; padding: 56px 0;
background: radial-gradient(ellipse 60% 50% at 50% 0%, var(--brand-soft) 0%, transparent 70%), var(--bg);
}
.auth-card { width: 100%; max-width: 460px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 36px; box-shadow: 0 24px 60px rgba(11, 18, 32, 0.08); }
.auth-card h1 { font-size: 1.7rem; margin: 0 0 4px; }
.auth-card .sub { color: var(--text-secondary); margin-bottom: 24px; font-size: 14px; }
.auth-stepper { display: flex; align-items: center; gap: 6px; margin-bottom: 20px; }
.auth-stepper .dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-alt); color: var(--text-secondary); font-weight: 600; font-size: 12px; }
.auth-stepper .dot.is-active { background: var(--brand); color: #fff; box-shadow: 0 4px 10px var(--brand-glow); }
.auth-stepper .ln { flex: 1; height: 2px; background: var(--surface-alt); border-radius: 2px; }
.auth-stepper .ln.is-active { background: var(--brand); }
.alert { padding: 12px 16px; border-radius: var(--r); font-size: 14px; margin-bottom: 14px; border: 1px solid; }
.alert--success { background: var(--success-soft); color: var(--success); border-color: rgba(26, 155, 92, 0.3); }
.alert--error { background: var(--danger-soft); color: var(--danger); border-color: rgba(201, 44, 44, 0.3); }
.alert--info { background: var(--brand-soft); color: var(--brand); border-color: rgba(16, 70, 187, 0.2); }
.alert--warning { background: var(--warning-soft); color: var(--warning); border-color: rgba(196, 119, 0, 0.3); }
/* ─── About page (старые классы для совместимости со старым шаблоном) ─── */
.about-hero { padding: 80px 0 40px; }
.about-hero h1 { letter-spacing: -0.03em; max-width: 760px; }
.about-hero .lead { font-size: 18px; color: var(--text-secondary); margin-top: 18px; max-width: 600px; }
.about-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 24px 0 48px; }
@media (max-width: 880px) { .about-kpi { grid-template-columns: 1fr 1fr; } }
.about-kpi .n { padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.about-kpi .n strong { display: block; font: 700 2.2rem var(--font-mono); letter-spacing: -0.025em; color: var(--text); }
.about-kpi .n strong .dim { font-size: 0.55em; font-weight: 500; color: var(--text-secondary); margin-left: 4px; }
.about-kpi .n span { display: block; font-size: 13px; color: var(--text-secondary); margin-top: 6px; }
.about-two { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 56px 0; border-top: 1px solid var(--border); align-items: start; }
@media (max-width: 880px) { .about-two { grid-template-columns: 1fr; gap: 32px; } }
.about-two .col h2 { font-size: 1.5rem; margin-bottom: 14px; }
.about-two p { color: var(--text); font-size: 15px; line-height: 1.6; margin-bottom: 14px; }
/* ─── About page v3 — премиум с анимациями и mesh-градиентами ──────────── */
/* === Keyframes === */
@keyframes abxFloat {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(30px, -40px) scale(1.05); }
66% { transform: translate(-25px, 25px) scale(0.95); }
}
@keyframes abxFloat2 {
0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
50% { transform: translate(-40px, 30px) scale(1.1) rotate(8deg); }
}
@keyframes abxFloat3 {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(50px, -20px) scale(1.08); }
}
@keyframes abxGradShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes abxFadeUp {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes abxScrollLine {
0% { transform: translateY(-100%); }
100% { transform: translateY(120%); }
}
@keyframes abxPulseDot {
0%, 100% { box-shadow: 0 0 0 0 rgba(95, 220, 138, 0.55); }
70% { box-shadow: 0 0 0 8px rgba(95, 220, 138, 0); }
}
@keyframes abxPreviewFloat {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-12px) rotate(0.5deg); }
}
@keyframes abxLineGrow {
from { transform: scaleY(0); }
to { transform: scaleY(1); }
}
/* === Reveal animation utility === */
[data-reveal] {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal].is-visible {
opacity: 1;
transform: translateY(0);
}
/* === Buttons === */
.abx-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 14px 26px;
font: 600 14.5px/1 -apple-system, "Inter", sans-serif;
letter-spacing: -0.005em;
border-radius: 12px;
text-decoration: none;
transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
cursor: pointer;
border: 1px solid transparent;
white-space: nowrap;
}
.abx-btn--primary {
background: linear-gradient(135deg, var(--brand) 0%, #4a78f0 100%);
color: #fff;
box-shadow: 0 10px 30px -8px rgba(16, 70, 187, 0.5),
inset 0 1px 0 rgba(255,255,255,0.15);
}
.abx-btn--primary:hover {
transform: translateY(-2px);
box-shadow: 0 18px 40px -10px rgba(16, 70, 187, 0.6),
inset 0 1px 0 rgba(255,255,255,0.2);
}
.abx-btn--glass {
background: rgba(255,255,255,0.06);
color: #fff;
border: 1px solid rgba(255,255,255,0.18);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.abx-btn--glass:hover {
background: rgba(255,255,255,0.12);
border-color: rgba(255,255,255,0.32);
transform: translateY(-2px);
}
.abx-btn--white {
background: #fff;
color: var(--brand);
box-shadow: 0 12px 32px -8px rgba(0,0,0,0.25);
}
.abx-btn--white:hover {
transform: translateY(-2px);
box-shadow: 0 18px 42px -10px rgba(0,0,0,0.35);
}
.abx-btn--glass-dark {
background: rgba(255,255,255,0.08);
color: #fff !important;
border: 1px solid rgba(255,255,255,0.32);
}
.abx-btn--glass-dark:hover {
background: rgba(255,255,255,0.18);
color: #fff !important;
border-color: rgba(255,255,255,0.5);
transform: translateY(-2px);
}
/* Hero (dark) — белые кнопки, остаются белыми при наведении */
.abx-btn--hero-white {
background: #fff;
color: var(--brand);
border: 1px solid #fff;
box-shadow: 0 12px 32px -10px rgba(255,255,255,0.35);
}
.abx-btn--hero-white:hover {
background: #fff;
color: var(--brand);
transform: translateY(-2px);
box-shadow: 0 18px 40px -10px rgba(255,255,255,0.45);
}
.abx-btn--hero-outline {
background: transparent;
color: #fff;
border: 1px solid rgba(255,255,255,0.45);
}
.abx-btn--hero-outline:hover {
background: rgba(255,255,255,0.08);
color: #fff;
border-color: rgba(255,255,255,0.7);
transform: translateY(-2px);
}
/* === Chips & badges === */
.abx-chip {
display: inline-flex; align-items: center; gap: 8px;
font: 600 11px/1 "JetBrains Mono", monospace;
text-transform: uppercase; letter-spacing: 0.14em;
color: rgba(255,255,255,0.9);
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.16);
padding: 9px 14px;
border-radius: 999px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.abx-chip__dot {
width: 8px; height: 8px; border-radius: 50%;
background: #5fdc8a;
animation: abxPulseDot 1.8s ease-in-out infinite;
}
.abx-pill {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 500;
color: rgba(255,255,255,0.85);
padding: 8px 14px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 999px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.abx-pill svg { width: 14px; height: 14px; opacity: 0.85; }
.abx-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font: 600 11px/1 "JetBrains Mono", monospace;
text-transform: uppercase; letter-spacing: 0.18em;
color: var(--brand);
}
.abx-eyebrow span {
display: inline-block; width: 24px; height: 1px;
background: linear-gradient(90deg, var(--brand), transparent);
}
/* === Gradient text === */
.abx-grad-anim {
background: linear-gradient(90deg, #76b9ff 0%, #9ab4ff 25%, #cdd9f3 50%, #9ab4ff 75%, #76b9ff 100%);
background-size: 200% auto;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
animation: abxGradShift 8s ease infinite;
}
.abx-grad-static {
background: linear-gradient(120deg, var(--brand) 0%, #4a78f0 50%, #76b9ff 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
/* ═══════════════════════════════════════════════════════════════ */
/* HERO */
/* ═══════════════════════════════════════════════════════════════ */
.abx-hero {
position: relative;
padding: clamp(60px, 10vw, 120px) 0 clamp(80px, 12vw, 140px);
background: #050816;
color: #fff;
overflow: hidden;
isolation: isolate;
}
.abx-hero__mesh {
position: absolute; inset: 0; z-index: 0;
overflow: hidden;
}
.abx-hero__blob {
position: absolute;
border-radius: 50%;
filter: blur(100px);
opacity: 0.55;
will-change: transform;
}
.abx-hero__blob--1 {
width: 620px; height: 620px;
top: -160px; left: -120px;
background: radial-gradient(circle, #1046bb 0%, transparent 60%);
animation: abxFloat 18s ease-in-out infinite;
}
.abx-hero__blob--2 {
width: 500px; height: 500px;
bottom: -120px; right: -80px;
background: radial-gradient(circle, #4a78f0 0%, transparent 60%);
animation: abxFloat2 22s ease-in-out infinite;
}
.abx-hero__blob--3 {
width: 380px; height: 380px;
top: 30%; right: 20%;
background: radial-gradient(circle, #76b9ff 0%, transparent 65%);
opacity: 0.35;
animation: abxFloat3 26s ease-in-out infinite;
}
.abx-hero__grid {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(1100px 700px at 50% 30%, #000 25%, transparent 75%);
-webkit-mask-image: radial-gradient(1100px 700px at 50% 30%, #000 25%, transparent 75%);
}
.abx-hero__noise {
position: absolute; inset: 0;
background-image:
radial-gradient(circle at 30% 20%, rgba(255,255,255,0.06) 1px, transparent 1px),
radial-gradient(circle at 80% 60%, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 3px 3px, 5px 5px;
opacity: 0.5;
mix-blend-mode: overlay;
}
.abx-hero__container {
position: relative; z-index: 1;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 56px;
align-items: center;
}
@media (max-width: 980px) {
.abx-hero__container { grid-template-columns: 1fr; gap: 48px; }
}
.abx-hero__content { max-width: 640px; }
.abx-hero__title {
font-size: clamp(2.1rem, 5vw, 4rem);
line-height: 1.04;
letter-spacing: -0.035em;
font-weight: 800;
margin: 22px 0 22px;
color: #fff;
}
.abx-hero__lead {
font-size: clamp(15px, 1.4vw, 17px);
line-height: 1.65;
color: rgba(255,255,255,0.72);
max-width: 580px;
margin: 0 0 30px;
}
.abx-hero__actions {
display: flex; gap: 12px; flex-wrap: wrap;
margin-bottom: 32px;
}
.abx-hero__pills {
display: flex; gap: 10px; flex-wrap: wrap;
}
/* === Dashboard mock (hero визуал) === */
.abx-hero__visual {
position: relative;
perspective: 1600px;
}
.abx-dash {
position: relative;
display: grid;
gap: 14px;
transform-style: preserve-3d;
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
animation: abxPreviewFloat 7s ease-in-out infinite;
}
/* Main metric card */
.abx-dash__main {
position: relative;
padding: 26px 26px 22px;
background: linear-gradient(155deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 100%);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 22px;
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
color: #fff !important;
box-shadow: 0 28px 70px -20px rgba(16, 70, 187, 0.5), inset 0 1px 0 rgba(255,255,255,0.16);
overflow: hidden;
}
.abx-dash__main::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(380px 240px at 100% 0%, rgba(118,185,255,0.22), transparent 65%);
}
.abx-dash__head { display: flex; justify-content: space-between; align-items: flex-start; position: relative; }
.abx-dash__chip {
display: inline-block;
font: 600 10.5px/1 "JetBrains Mono", monospace;
text-transform: uppercase; letter-spacing: 0.14em;
color: rgba(205,217,243,0.95);
background: rgba(118,185,255,0.16);
padding: 6px 10px; border-radius: 999px;
margin-bottom: 12px;
}
.abx-dash__big {
display: block;
font: 800 2.6rem/1 "JetBrains Mono", monospace;
letter-spacing: -0.035em;
color: #fff !important;
margin: 0 0 8px;
}
.abx-dash__big sup { font-size: 0.42em; font-weight: 600; vertical-align: super; top: 0; color: rgba(255,255,255,0.75); margin-left: 2px; }
.abx-dash__delta {
display: inline-flex; align-items: center; gap: 4px;
font-size: 13px; font-weight: 600;
color: #5fdc8a;
background: rgba(95,220,138,0.12);
padding: 5px 10px; border-radius: 999px;
}
.abx-dash__delta svg { width: 14px; height: 14px; stroke-width: 2.4; }
.abx-dash__live {
display: inline-flex; align-items: center; gap: 6px;
font: 600 10px/1 "JetBrains Mono", monospace;
text-transform: uppercase; letter-spacing: 0.14em;
color: rgba(255,255,255,0.7);
}
.abx-dash__live-dot {
width: 6px; height: 6px; border-radius: 50%;
background: #5fdc8a; box-shadow: 0 0 8px #5fdc8a;
animation: abxPulseDot 1.8s infinite;
}
.abx-dash__chart { display: block; width: 100%; height: 88px; margin: 16px 0 10px; }
.abx-dash__legend {
display: flex; justify-content: space-between;
font: 500 11.5px/1 "JetBrains Mono", monospace;
color: rgba(255,255,255,0.55);
}
.abx-dash__legend-current { color: #cdd9f3; font-weight: 600; }
/* Mini deal card */
.abx-dash__deal {
position: relative;
padding: 18px 20px;
background: linear-gradient(155deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 100%);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 18px;
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
color: #fff !important;
box-shadow: 0 20px 50px -22px rgba(16, 70, 187, 0.4);
}
.abx-dash__deal-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.abx-dash__deal-chip {
font: 600 10px/1 "JetBrains Mono", monospace;
text-transform: uppercase; letter-spacing: 0.14em;
color: rgba(205,217,243,0.95);
background: rgba(118,185,255,0.16);
padding: 5px 9px; border-radius: 999px;
}
.abx-dash__deal-yield {
font: 800 1.05rem/1 "JetBrains Mono", monospace;
letter-spacing: -0.02em;
color: #76b9ff;
}
.abx-dash__deal-yield sup { font-size: 0.55em; font-weight: 600; vertical-align: super; top: 0; }
.abx-dash__deal h4 {
font-size: 14px; font-weight: 600;
color: #fff !important;
margin: 0 0 12px;
line-height: 1.35;
}
.abx-dash__deal-bar {
height: 5px; background: rgba(255,255,255,0.1);
border-radius: 999px; overflow: hidden; margin-bottom: 8px;
}
.abx-dash__deal-bar span {
display: block; height: 100%;
background: linear-gradient(90deg, #4a78f0, #9ab4ff);
border-radius: inherit;
}
.abx-dash__deal-meta {
display: flex; justify-content: space-between;
font-size: 11.5px;
color: rgba(255,255,255,0.6);
}
/* Notification card */
.abx-dash__notif {
display: flex; align-items: center; gap: 12px;
padding: 14px 18px;
background: linear-gradient(155deg, rgba(95,220,138,0.16) 0%, rgba(95,220,138,0.04) 100%);
border: 1px solid rgba(95,220,138,0.25);
border-radius: 16px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
color: #fff !important;
box-shadow: 0 16px 40px -20px rgba(95,220,138,0.35);
}
.abx-dash__notif-ico {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; flex-shrink: 0;
background: rgba(95,220,138,0.22);
border-radius: 10px;
color: #5fdc8a;
}
.abx-dash__notif-ico svg { width: 20px; height: 20px; stroke-width: 1.8; }
.abx-dash__notif strong {
display: block;
font-size: 13.5px; color: #fff !important;
margin-bottom: 2px;
}
.abx-dash__notif span {
display: block;
font-size: 12px;
color: rgba(255,255,255,0.65);
}
/* Scroll indicator */
.abx-hero__scroll {
position: absolute; left: 50%; bottom: 24px;
transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 10px;
z-index: 1;
}
.abx-hero__scroll-line {
width: 1px; height: 40px;
background: linear-gradient(180deg, transparent, rgba(255,255,255,0.5));
position: relative; overflow: hidden;
}
.abx-hero__scroll-line::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent, #fff);
animation: abxScrollLine 2s ease-in-out infinite;
}
.abx-hero__scroll span {
font: 500 10px/1 "JetBrains Mono", monospace;
text-transform: uppercase; letter-spacing: 0.18em;
color: rgba(255,255,255,0.55);
}
@media (max-width: 980px) { .abx-hero__scroll { display: none; } }
/* ═══════════════════════════════════════════════════════════════ */
/* STATS */
/* ═══════════════════════════════════════════════════════════════ */
.abx-stats {
padding: 0;
margin-top: -60px;
position: relative; z-index: 5;
}
.abx-stats__grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
@media (max-width: 880px) { .abx-stats__grid { grid-template-columns: 1fr 1fr; } }
.abx-stat {
position: relative;
padding: 26px 24px 22px;
background: #fff;
border: 1px solid var(--border);
border-radius: 18px;
box-shadow: 0 24px 50px -25px rgba(11, 18, 32, 0.22);
overflow: hidden;
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.abx-stat::before {
content: "";
position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(280px 200px at 100% 0%, rgba(74,120,240,0.08), transparent 60%);
opacity: 0; transition: opacity 0.4s;
}
.abx-stat:hover {
transform: translateY(-6px);
box-shadow: 0 36px 60px -30px rgba(16, 70, 187, 0.35);
}
.abx-stat:hover::before { opacity: 1; }
.abx-stat__icon-wrap {
display: inline-flex; align-items: center; justify-content: center;
width: 42px; height: 42px;
background: linear-gradient(135deg, var(--brand-soft) 0%, #d6e0fb 100%);
color: var(--brand);
border-radius: 12px;
margin-bottom: 14px;
}
.abx-stat__icon-wrap svg { width: 22px; height: 22px; stroke-width: 1.8; }
.abx-stat__num {
display: block;
font: 800 2.2rem/1 "JetBrains Mono", monospace;
letter-spacing: -0.03em;
color: var(--text);
}
.abx-stat span {
display: block;
font-size: 13px; color: var(--text-secondary);
margin-top: 8px;
}
/* ═══════════════════════════════════════════════════════════════ */
/* MISSION */
/* ═══════════════════════════════════════════════════════════════ */
.abx-mission { padding: 120px 0 100px; }
.abx-mission__head { max-width: 720px; margin-bottom: 56px; }
.abx-mission__head h2 {
font-size: clamp(1.8rem, 3.5vw, 2.6rem);
letter-spacing: -0.028em; line-height: 1.15;
margin: 14px 0 0; font-weight: 800;
}
.abx-mission__grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start;
}
@media (max-width: 880px) { .abx-mission__grid { grid-template-columns: 1fr; gap: 40px; } }
.abx-mission__text p {
color: var(--text); font-size: 15.5px; line-height: 1.75;
margin-bottom: 16px;
}
.abx-principles { display: grid; gap: 14px; }
.abx-principle {
position: relative;
display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: flex-start;
padding: 22px 24px;
background: linear-gradient(135deg, #ffffff 0%, #f6f9ff 100%);
border: 1px solid var(--border);
border-radius: 16px;
transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.abx-principle:hover {
transform: translateX(4px);
border-color: var(--brand);
box-shadow: 0 20px 40px -20px rgba(16, 70, 187, 0.25);
}
.abx-principle__num {
display: inline-flex; align-items: center; justify-content: center;
width: 52px; height: 52px;
background: linear-gradient(135deg, var(--brand) 0%, #0c348c 100%);
color: #fff;
border-radius: 14px;
font: 800 15px/1 "JetBrains Mono", monospace;
letter-spacing: 0.04em;
box-shadow: 0 10px 24px -6px rgba(16, 70, 187, 0.5);
}
.abx-principle__body h4 { font-size: 1.05rem; margin: 4px 0 6px; letter-spacing: -0.01em; }
.abx-principle__body p { color: var(--text-secondary); font-size: 14px; line-height: 1.55; margin: 0; }
/* Section head */
.abx-section-head { max-width: 720px; margin: 0 0 48px; }
.abx-section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.abx-section-head--center .abx-eyebrow span { background: linear-gradient(90deg, transparent, var(--brand), transparent); }
.abx-section-head h2 {
font-size: clamp(1.7rem, 3vw, 2.4rem);
letter-spacing: -0.025em; line-height: 1.15;
margin: 14px 0 14px; font-weight: 800;
}
.abx-section-head p { color: var(--text-secondary); font-size: 16px; }
/* ═══════════════════════════════════════════════════════════════ */
/* BENTO FEATURES */
/* ═══════════════════════════════════════════════════════════════ */
.abx-bento {
padding: 80px 0 120px;
background: linear-gradient(180deg, #fff 0%, var(--surface-alt) 100%);
}
.abx-bento__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
@media (max-width: 920px) { .abx-bento__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .abx-bento__grid { grid-template-columns: 1fr; } }
.abx-bento__card {
position: relative;
padding: 28px 26px;
background: #fff;
border: 1px solid var(--border);
border-radius: 20px;
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.3s;
overflow: hidden;
}
.abx-bento__card::before {
content: ""; position: absolute; inset: 0;
padding: 1px;
border-radius: inherit;
background: linear-gradient(135deg, rgba(74,120,240,0), rgba(74,120,240,0.4), rgba(74,120,240,0)) border-box;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
opacity: 0; transition: opacity 0.35s;
pointer-events: none;
}
.abx-bento__card:hover {
transform: translateY(-6px);
box-shadow: 0 30px 60px -25px rgba(11, 18, 32, 0.20);
}
.abx-bento__card:hover::before { opacity: 1; }
.abx-bento__icon {
display: inline-flex; align-items: center; justify-content: center;
width: 46px; height: 46px;
background: linear-gradient(135deg, var(--brand-soft) 0%, #d6e0fb 100%);
color: var(--brand);
border-radius: 12px;
margin-bottom: 18px;
transition: transform 0.3s;
}
.abx-bento__card:hover .abx-bento__icon { transform: scale(1.08) rotate(-5deg); }
.abx-bento__icon svg { width: 24px; height: 24px; stroke-width: 1.8; }
.abx-bento__card h3 { font-size: 1.1rem; margin: 0 0 8px; letter-spacing: -0.015em; }
.abx-bento__card > p { color: var(--text-secondary); font-size: 14px; line-height: 1.55; margin: 0; }
.abx-bento__card--hero {
grid-column: span 2; grid-row: span 2;
background:
radial-gradient(600px 400px at 100% 0%, rgba(74,120,240,0.25), transparent 60%),
linear-gradient(135deg, var(--brand) 0%, #0a2670 100%);
color: #fff; border-color: transparent;
padding: 40px 36px;
overflow: hidden;
}
@media (max-width: 920px) { .abx-bento__card--hero { grid-column: span 2; grid-row: auto; } }
@media (max-width: 600px) { .abx-bento__card--hero { grid-column: span 1; } }
.abx-bento__card--hero::after {
content: ""; position: absolute; right: -100px; bottom: -100px;
width: 320px; height: 320px; border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
}
.abx-bento__glow {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(400px 280px at 0% 100%, rgba(118,185,255,0.18), transparent 65%);
}
.abx-bento__content { position: relative; z-index: 1; }
.abx-bento__card--hero .abx-bento__icon {
background: rgba(255,255,255,0.16);
color: #fff;
width: 60px; height: 60px;
}
.abx-bento__card--hero .abx-bento__icon svg { width: 32px; height: 32px; }
.abx-bento__card--hero h3 {
font-size: clamp(1.4rem, 2.2vw, 1.8rem);
color: #fff;
letter-spacing: -0.025em; margin-bottom: 14px;
}
.abx-bento__card--hero > p, .abx-bento__card--hero .abx-bento__content > p {
color: rgba(255,255,255,0.82);
font-size: 15px; line-height: 1.6;
}
.abx-bento__stats {
display: flex; gap: 32px;
margin-top: 28px; padding-top: 24px;
border-top: 1px solid rgba(255,255,255,0.16);
}
.abx-bento__stats > div strong {
display: block; font: 800 1.8rem/1 "JetBrains Mono", monospace;
letter-spacing: -0.025em; color: #fff;
}
.abx-bento__stats > div span { display: block; font-size: 12px; color: rgba(255,255,255,0.7); margin-top: 4px; }
.abx-bento__card--wide { grid-column: span 2; }
@media (max-width: 600px) { .abx-bento__card--wide { grid-column: span 1; } }
/* ═══════════════════════════════════════════════════════════════ */
/* FEATURES TABS (интерактивные) */
/* ═══════════════════════════════════════════════════════════════ */
.abx-tabs {
padding: 80px 0 120px;
background: linear-gradient(180deg, #fff 0%, var(--surface-alt) 100%);
}
.abx-tabs__wrap {
display: grid;
grid-template-columns: minmax(320px, 380px) 1fr;
gap: 24px;
align-items: start;
}
@media (max-width: 880px) {
.abx-tabs__wrap { grid-template-columns: 1fr; gap: 20px; }
}
/* Левая колонка — список */
.abx-tabs__list {
display: flex; flex-direction: column; gap: 8px;
background: #fff;
border: 1px solid var(--border);
border-radius: 18px;
padding: 10px;
box-shadow: 0 16px 40px -22px rgba(11,18,32,0.12);
}
.abx-tab {
display: grid;
grid-template-columns: 44px 1fr 18px;
gap: 14px;
align-items: center;
width: 100%;
padding: 14px 16px;
background: transparent;
border: none;
border-radius: 12px;
cursor: pointer;
text-align: left;
color: var(--text);
transition: background 0.25s, transform 0.2s, color 0.25s;
position: relative;
}
.abx-tab:hover {
background: var(--brand-soft);
}
.abx-tab__ico {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
background: var(--brand-soft);
color: var(--brand);
border-radius: 10px;
transition: background 0.25s, color 0.25s;
}
.abx-tab__ico svg { width: 20px; height: 20px; stroke-width: 1.8; }
.abx-tab__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.abx-tab__title {
font-size: 14.5px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--text);
transition: color 0.25s;
}
.abx-tab__sub {
font-size: 12.5px;
color: var(--text-secondary);
transition: color 0.25s;
}
.abx-tab__arr {
display: inline-flex; align-items: center; justify-content: center;
color: var(--text-secondary);
opacity: 0;
transform: translateX(-6px);
transition: opacity 0.25s, transform 0.25s, color 0.25s;
}
.abx-tab__arr svg { width: 16px; height: 16px; stroke-width: 2; }
.abx-tab:hover .abx-tab__arr { opacity: 1; transform: translateX(0); }
.abx-tab.is-active {
background: linear-gradient(135deg, var(--brand) 0%, #0c348c 100%);
box-shadow: 0 14px 30px -10px rgba(16,70,187,0.55);
}
.abx-tab.is-active .abx-tab__ico {
background: rgba(255,255,255,0.2);
color: #fff;
}
.abx-tab.is-active .abx-tab__title { color: #fff; }
.abx-tab.is-active .abx-tab__sub { color: rgba(255,255,255,0.78); }
.abx-tab.is-active .abx-tab__arr { color: #fff; opacity: 1; transform: translateX(0); }
/* Правая колонка — активная панель */
.abx-tabs__panel {
position: relative;
background: linear-gradient(155deg, #ffffff 0%, #f6f9ff 100%);
border: 1px solid var(--border);
border-radius: 20px;
padding: 38px clamp(28px, 4vw, 44px);
box-shadow: 0 24px 60px -25px rgba(11,18,32,0.18);
min-height: 380px;
overflow: hidden;
}
.abx-tabs__panel::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(500px 320px at 100% 0%, rgba(74,120,240,0.10), transparent 60%);
}
.abx-panel {
position: absolute;
inset: 38px clamp(28px, 4vw, 44px);
opacity: 0;
transform: translateY(12px);
pointer-events: none;
transition: opacity 0.4s cubic-bezier(0.22,1,0.36,1),
transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.abx-panel.is-active {
position: relative;
inset: auto;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.abx-panel__head {
display: flex; align-items: center; gap: 16px;
margin-bottom: 22px;
}
.abx-panel__ico-big {
display: inline-flex; align-items: center; justify-content: center;
width: 64px; height: 64px;
background: linear-gradient(135deg, var(--brand) 0%, #4a78f0 100%);
color: #fff;
border-radius: 16px;
box-shadow: 0 14px 32px -8px rgba(16,70,187,0.5);
flex-shrink: 0;
}
.abx-panel__ico-big svg { width: 30px; height: 30px; stroke-width: 1.8; }
.abx-panel__chip {
display: inline-flex;
font: 600 11px/1 "JetBrains Mono", monospace;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--brand);
background: var(--brand-soft);
padding: 6px 12px;
border-radius: 999px;
}
.abx-panel h3 {
font-size: clamp(1.3rem, 2vw, 1.75rem);
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0 0 14px;
font-weight: 800;
color: var(--text);
}
.abx-panel > p {
color: var(--text);
font-size: 15.5px; line-height: 1.7;
margin: 0 0 22px;
max-width: 620px;
}
.abx-panel__metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
padding: 18px 20px;
background: #fff;
border: 1px solid var(--border);
border-radius: 14px;
margin-bottom: 22px;
}
.abx-panel__metrics > div strong {
display: block;
font: 800 1.6rem/1 "JetBrains Mono", monospace;
letter-spacing: -0.025em;
color: var(--brand);
}
.abx-panel__metrics > div span {
display: block;
font-size: 12px;
color: var(--text-secondary);
margin-top: 6px;
}
.abx-panel__list {
list-style: none;
padding: 0; margin: 0;
display: grid; gap: 10px;
}
.abx-panel__list li {
display: flex; align-items: center; gap: 10px;
font-size: 14.5px;
color: var(--text);
padding: 8px 0;
}
.abx-panel__list li svg {
color: var(--success);
width: 18px; height: 18px;
stroke-width: 2.4;
background: rgba(31,157,85,0.12);
border-radius: 50%;
padding: 3px;
flex-shrink: 0;
}
/* ═══════════════════════════════════════════════════════════════ */
/* TIMELINE */
/* ═══════════════════════════════════════════════════════════════ */
.abx-timeline {
position: relative;
padding: 120px 0;
overflow: hidden;
background: var(--surface-alt);
}
.abx-timeline__bg {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(700px 400px at 0% 50%, rgba(74,120,240,0.08), transparent 60%),
radial-gradient(700px 400px at 100% 50%, rgba(16,70,187,0.06), transparent 60%);
}
.abx-timeline__track {
position: relative;
max-width: 920px; margin: 0 auto;
}
.abx-timeline__line {
position: absolute; left: 50%; top: 0; bottom: 0;
width: 2px; transform: translateX(-50%);
background: linear-gradient(180deg, transparent, var(--brand) 10%, #4a78f0 50%, var(--brand) 90%, transparent);
transform-origin: top;
animation: abxLineGrow 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}
@media (max-width: 900px) { .abx-timeline__line { left: 28px; transform: none; } }
.abx-timeline__step {
position: relative;
display: grid;
grid-template-columns: 1fr 60px 1fr;
gap: 0;
margin-bottom: 24px;
}
@media (max-width: 900px) { .abx-timeline__step { grid-template-columns: 60px 1fr; } }
.abx-timeline__node {
position: relative;
grid-column: 2;
width: 56px; height: 56px;
align-self: start;
margin: 0 auto;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--brand) 0%, #4a78f0 100%);
color: #fff;
border-radius: 14px;
border: 4px solid var(--surface-alt);
box-shadow: 0 10px 26px -6px rgba(16, 70, 187, 0.55);
z-index: 2;
}
@media (max-width: 900px) {
.abx-timeline__node { grid-column: 1; margin: 0; }
}
.abx-timeline__node svg { width: 22px; height: 22px; stroke-width: 1.8; }
.abx-timeline__card {
padding: 24px 28px;
background: #fff;
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: 0 18px 40px -22px rgba(11, 18, 32, 0.14);
transition: transform 0.3s, box-shadow 0.3s;
}
.abx-timeline__card:hover {
transform: translateY(-4px);
box-shadow: 0 28px 60px -25px rgba(16, 70, 187, 0.28);
}
.abx-timeline__step:nth-child(odd) .abx-timeline__card {
grid-column: 1; margin-right: 32px;
}
.abx-timeline__step:nth-child(even) .abx-timeline__card {
grid-column: 3; margin-left: 32px;
}
@media (max-width: 900px) {
.abx-timeline__step:nth-child(odd) .abx-timeline__card,
.abx-timeline__step:nth-child(even) .abx-timeline__card {
grid-column: 2; margin: 0 0 0 16px;
}
}
.abx-timeline__step-num {
display: inline-block;
font: 700 10.5px/1 "JetBrains Mono", monospace;
text-transform: uppercase; letter-spacing: 0.16em;
color: var(--brand);
background: var(--brand-soft);
padding: 5px 10px; border-radius: 999px;
margin-bottom: 12px;
}
.abx-timeline__card h3 { font-size: 1.1rem; margin: 0 0 8px; letter-spacing: -0.015em; }
.abx-timeline__card p { color: var(--text-secondary); font-size: 14px; line-height: 1.55; margin: 0; }
/* ═══════════════════════════════════════════════════════════════ */
/* TRUST GLASS CARDS */
/* ═══════════════════════════════════════════════════════════════ */
.abx-trust { padding: 100px 0; }
.abx-trust__grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
@media (max-width: 920px) { .abx-trust__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .abx-trust__grid { grid-template-columns: 1fr; } }
.abx-trust__card {
position: relative;
padding: 26px 24px 24px;
background: linear-gradient(155deg, #ffffff 0%, #f5f8ff 100%);
border: 1px solid var(--border);
border-radius: 18px;
transition: transform 0.35s, box-shadow 0.35s, border-color 0.3s;
overflow: hidden;
}
.abx-trust__card::after {
content: ""; position: absolute; top: -50%; right: -30%;
width: 200px; height: 200px;
border-radius: 50%;
background: radial-gradient(circle, rgba(74,120,240,0.10), transparent 70%);
opacity: 0; transition: opacity 0.4s;
}
.abx-trust__card:hover {
transform: translateY(-4px);
border-color: var(--brand);
box-shadow: 0 24px 50px -22px rgba(16, 70, 187, 0.28);
}
.abx-trust__card:hover::after { opacity: 1; }
.abx-trust__icon {
display: inline-flex; align-items: center; justify-content: center;
width: 46px; height: 46px;
background: linear-gradient(135deg, var(--brand) 0%, #4a78f0 100%);
color: #fff;
border-radius: 12px;
margin-bottom: 16px;
box-shadow: 0 10px 22px -6px rgba(16, 70, 187, 0.5);
}
.abx-trust__icon svg { width: 22px; height: 22px; stroke-width: 1.8; }
.abx-trust__card h4 { font-size: 1.02rem; margin: 0 0 8px; letter-spacing: -0.01em; }
.abx-trust__card p { color: var(--text-secondary); font-size: 13.5px; line-height: 1.55; margin: 0; }
/* ═══════════════════════════════════════════════════════════════ */
/* EXTRA (prose от админа в красивой обёртке) */
/* ═══════════════════════════════════════════════════════════════ */
.abx-extra { padding: 0 0 100px; }
.abx-extra__panel {
position: relative;
padding: clamp(40px, 5vw, 64px) clamp(28px, 5vw, 56px);
background: linear-gradient(155deg, #ffffff 0%, #f5f8ff 100%);
border: 1px solid var(--border);
border-radius: 28px;
box-shadow: 0 30px 70px -30px rgba(11,18,32,0.2);
overflow: hidden;
}
.abx-extra__bg { position: absolute; inset: 0; pointer-events: none; }
.abx-extra__blob {
position: absolute; top: -180px; right: -160px;
width: 480px; height: 480px;
border-radius: 50%;
background: radial-gradient(circle, rgba(74,120,240,0.18) 0%, transparent 65%);
filter: blur(40px);
}
.abx-extra__head { position: relative; margin-bottom: 28px; max-width: 720px; }
.abx-extra__head h2 {
font-size: clamp(1.6rem, 2.6vw, 2rem);
letter-spacing: -0.025em; line-height: 1.2;
margin: 14px 0 0; font-weight: 800;
}
.abx-extra__content { position: relative; max-width: 760px; }
.abx-extra__content h2, .abx-extra__content h3, .abx-extra__content h4 {
letter-spacing: -0.015em;
}
.abx-extra__content h2 { font-size: 1.4rem; margin: 28px 0 10px; color: var(--text); }
.abx-extra__content h3 { font-size: 1.15rem; margin: 24px 0 8px; color: var(--text); }
.abx-extra__content > :first-child { margin-top: 0; }
.abx-extra__content p {
color: var(--text);
font-size: 15.5px; line-height: 1.7;
margin-bottom: 14px;
}
.abx-extra__content ul, .abx-extra__content ol {
padding-left: 0; margin: 12px 0 18px;
list-style: none;
}
.abx-extra__content ul li, .abx-extra__content ol li {
position: relative;
padding: 8px 0 8px 32px;
color: var(--text);
font-size: 15px; line-height: 1.6;
}
.abx-extra__content ul li::before {
content: ""; position: absolute; left: 0; top: 14px;
width: 18px; height: 18px;
background: var(--brand-soft);
border-radius: 50%;
background-image: url("data:image/svg+xml;utf8,");
background-size: 12px 12px;
background-repeat: no-repeat;
background-position: center;
}
.abx-extra__content ol { counter-reset: abxol; }
.abx-extra__content ol li::before {
content: counter(abxol);
counter-increment: abxol;
position: absolute; left: 0; top: 8px;
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px;
background: var(--brand); color: #fff;
border-radius: 50%;
font: 700 11px/1 var(--font-mono);
}
.abx-extra__content a { color: var(--brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.abx-extra__content strong { color: var(--text); font-weight: 700; }
/* ═══════════════════════════════════════════════════════════════ */
/* FINAL CTA */
/* ═══════════════════════════════════════════════════════════════ */
.abx-cta { padding: 0 0 96px; }
.abx-cta__panel {
position: relative;
padding: clamp(48px, 6vw, 80px) clamp(28px, 5vw, 64px);
background: linear-gradient(135deg, #0c348c 0%, var(--brand) 50%, #4a78f0 100%);
border-radius: 28px;
color: #fff;
overflow: hidden;
box-shadow: 0 40px 80px -20px rgba(16, 70, 187, 0.5);
}
.abx-cta__bg { position: absolute; inset: 0; pointer-events: none; }
.abx-cta__blob {
position: absolute; border-radius: 50%;
filter: blur(80px); opacity: 0.45;
}
.abx-cta__blob--1 {
width: 400px; height: 400px; top: -100px; right: -80px;
background: radial-gradient(circle, #76b9ff, transparent 60%);
animation: abxFloat 18s ease-in-out infinite;
}
.abx-cta__blob--2 {
width: 320px; height: 320px; bottom: -80px; left: -60px;
background: radial-gradient(circle, #cdd9f3, transparent 60%);
animation: abxFloat2 22s ease-in-out infinite;
}
.abx-cta__grid {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: radial-gradient(800px 500px at 50% 50%, #000 30%, transparent 80%);
-webkit-mask-image: radial-gradient(800px 500px at 50% 50%, #000 30%, transparent 80%);
}
.abx-cta__content { position: relative; max-width: 720px; }
.abx-cta__chip {
display: inline-flex; align-items: center;
font: 600 11px/1 "JetBrains Mono", monospace;
text-transform: uppercase; letter-spacing: 0.16em;
color: rgba(255,255,255,0.85);
background: rgba(255,255,255,0.12);
padding: 8px 14px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.18);
backdrop-filter: blur(8px);
}
.abx-cta h2 {
color: #fff;
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
letter-spacing: -0.028em; line-height: 1.1;
margin: 18px 0 16px; font-weight: 800;
}
.abx-cta p {
color: rgba(255,255,255,0.88);
font-size: 16px; line-height: 1.65;
margin-bottom: 30px; max-width: 580px;
}
.abx-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.grad-text {
background: linear-gradient(120deg, var(--brand) 0%, #4a78f0 50%, #76b9ff 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
/* HERO */
.about-hero2 {
position: relative;
padding: clamp(72px, 12vw, 140px) 0 clamp(64px, 10vw, 120px);
background: linear-gradient(180deg, #0B1220 0%, #102348 55%, #16306b 100%);
color: #fff;
overflow: hidden;
}
.about-hero2__bg {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(900px 500px at 18% 10%, rgba(74, 120, 240, 0.42), transparent 60%),
radial-gradient(700px 460px at 92% 90%, rgba(154, 180, 255, 0.28), transparent 65%),
radial-gradient(420px 280px at 80% 20%, rgba(255, 198, 106, 0.16), transparent 70%);
}
.about-hero2__bg::before {
content: ""; position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(900px 500px at 50% 30%, #000 30%, transparent 80%);
-webkit-mask-image: radial-gradient(900px 500px at 50% 30%, #000 30%, transparent 80%);
}
.about-hero2__inner { position: relative; max-width: 820px; }
.about-hero2__badge {
display: inline-flex; align-items: center; gap: 8px;
font: 600 11px/1 var(--font-mono);
text-transform: uppercase; letter-spacing: 0.16em;
color: rgba(255,255,255,0.85);
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255,255,255,0.14);
border-radius: var(--r-pill);
padding: 8px 14px;
margin-bottom: 22px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.about-hero2__badge .live-dot { background: #5fdc8a; box-shadow: 0 0 0 4px rgba(95,220,138,0.25); }
.about-hero2 h1 {
font-size: clamp(2rem, 5vw, 3.6rem);
letter-spacing: -0.032em; line-height: 1.05;
margin: 0 0 22px;
color: #fff;
}
.about-hero2 h1 em {
font-style: normal;
background: linear-gradient(120deg, #76b9ff 0%, #9ab4ff 60%, #cdd9f3 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.about-hero2__lead {
font-size: clamp(15px, 1.6vw, 18px);
line-height: 1.6;
color: rgba(255,255,255,0.72);
max-width: 620px;
margin: 0 0 32px;
}
.about-hero2__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.about-hero2__actions .btn--ghost {
color: rgba(255,255,255,0.92);
border: 1px solid rgba(255,255,255,0.22);
background: transparent;
}
.about-hero2__actions .btn--ghost:hover {
background: rgba(255,255,255,0.1);
color: #fff; border-color: rgba(255,255,255,0.38);
}
/* STATS */
.about-stats { padding: 0; margin-top: -56px; position: relative; z-index: 2; }
.about-stats__grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
@media (max-width: 880px) { .about-stats__grid { grid-template-columns: 1fr 1fr; } }
.about-stat {
position: relative;
padding: 22px 22px 20px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: 0 18px 40px -22px rgba(11, 18, 32, 0.18);
overflow: hidden;
transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.about-stat:hover { transform: translateY(-3px); box-shadow: 0 22px 50px -22px rgba(16, 70, 187, 0.28); border-color: var(--brand); }
.about-stat__icon {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px;
background: var(--brand-soft); color: var(--brand);
border-radius: 10px;
margin-bottom: 12px;
}
.about-stat__icon svg { width: 20px; height: 20px; stroke-width: 1.8; }
.about-stat strong {
display: block; font: 700 2rem/1 var(--font-mono);
letter-spacing: -0.025em; color: var(--text);
}
.about-stat strong sup { font-size: 0.5em; font-weight: 500; color: var(--text-secondary); margin-left: 2px; vertical-align: super; top: 0; }
.about-stat span { display: block; font-size: 13px; color: var(--text-secondary); margin-top: 8px; }
/* MISSION */
.about-mission { padding: 96px 0; }
.about-mission__grid {
display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center;
}
@media (max-width: 960px) { .about-mission__grid { grid-template-columns: 1fr; gap: 40px; } }
.about-mission__text h2 {
font-size: clamp(1.6rem, 3vw, 2.1rem);
letter-spacing: -0.025em; margin: 14px 0 18px; line-height: 1.2;
}
.about-mission__text p {
color: var(--text); font-size: 15.5px; line-height: 1.7; margin-bottom: 14px;
}
.about-mission__card {
position: relative;
padding: 36px 32px;
background: linear-gradient(160deg, #ffffff 0%, #f5f8ff 100%);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: 0 24px 60px -20px rgba(16, 70, 187, 0.18);
overflow: hidden;
}
.about-mission__card-glow {
position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(360px 240px at 100% 0%, rgba(74,120,240,0.18), transparent 60%);
}
.about-mission__card-content { position: relative; }
.about-principles { list-style: none; padding: 14px 0 0; margin: 0; display: grid; gap: 18px; }
.about-principles li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: flex-start; }
.about-principles__num {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
background: var(--brand); color: #fff;
border-radius: 10px;
font: 700 14px/1 var(--font-mono); letter-spacing: 0.05em;
box-shadow: 0 8px 18px -4px rgba(16, 70, 187, 0.45);
}
.about-principles h4 { font-size: 1rem; margin: 6px 0 4px; }
.about-principles p { color: var(--text-secondary); font-size: 14px; line-height: 1.55; margin: 0; }
/* FEATURES */
.about-features { padding: 32px 0 96px; }
.about-features__head { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.about-features__head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.025em; margin: 10px 0 12px; }
.about-features__head p { color: var(--text-secondary); font-size: 15px; }
.about-features__grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
@media (max-width: 920px) { .about-features__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .about-features__grid { grid-template-columns: 1fr; } }
.about-feature {
position: relative;
padding: 26px 24px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
transition: transform var(--t), box-shadow var(--t), border-color var(--t);
overflow: hidden;
}
.about-feature:hover { transform: translateY(-3px); box-shadow: 0 22px 50px -22px rgba(11, 18, 32, 0.16); border-color: var(--brand); }
.about-feature__icon {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px;
background: var(--brand-soft); color: var(--brand);
border-radius: 12px;
margin-bottom: 16px;
}
.about-feature__icon svg { width: 22px; height: 22px; stroke-width: 1.8; }
.about-feature h3 { font-size: 1.1rem; margin: 0 0 8px; letter-spacing: -0.015em; }
.about-feature p { color: var(--text-secondary); font-size: 14px; line-height: 1.55; margin: 0; }
.about-feature--hero {
grid-column: span 2;
background: linear-gradient(135deg, var(--brand) 0%, #0c348c 100%);
color: #fff;
border-color: transparent;
}
@media (max-width: 920px) { .about-feature--hero { grid-column: span 2; } }
@media (max-width: 600px) { .about-feature--hero { grid-column: span 1; } }
.about-feature--hero::after {
content: ""; position: absolute; right: -80px; bottom: -80px;
width: 260px; height: 260px; border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
pointer-events: none;
}
.about-feature--hero h3, .about-feature--hero p { color: #fff; }
.about-feature--hero p { color: rgba(255,255,255,0.85); font-size: 15px; }
.about-feature--hero .about-feature__icon { background: rgba(255,255,255,0.16); color: #fff; width: 52px; height: 52px; }
.about-feature--hero .about-feature__icon svg { width: 28px; height: 28px; }
.about-feature__stats {
display: flex; gap: 28px;
margin-top: 22px; padding-top: 20px;
border-top: 1px solid rgba(255,255,255,0.18);
position: relative; z-index: 1;
}
.about-feature__stats > div strong {
display: block;
font: 700 1.65rem/1 var(--font-mono);
letter-spacing: -0.02em;
color: #fff;
}
.about-feature__stats > div span {
display: block;
font-size: 12px;
color: rgba(255,255,255,0.78);
margin-top: 4px;
}
/* TIMELINE */
.about-steps { padding: 0 0 96px; background: var(--surface-alt); padding-top: 96px; margin-top: -32px; }
.about-timeline { position: relative; padding-top: 32px; }
.about-timeline__line {
position: absolute; left: 50%; top: 60px; bottom: 16px;
width: 2px;
background: linear-gradient(180deg, transparent, var(--brand-soft) 8%, var(--brand-soft) 92%, transparent);
transform: translateX(-50%);
}
@media (max-width: 900px) { .about-timeline__line { left: 20px; transform: none; } }
.about-timeline__items {
display: grid; grid-template-columns: 1fr; gap: 18px;
max-width: 880px; margin: 0 auto;
position: relative;
}
.about-timeline__item {
position: relative;
padding: 24px 28px 24px 80px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: 0 18px 40px -22px rgba(11, 18, 32, 0.10);
}
@media (min-width: 901px) {
.about-timeline__item:nth-child(odd) { margin-right: 50%; padding-right: 28px; }
.about-timeline__item:nth-child(even) { margin-left: 50%; }
}
.about-timeline__dot {
position: absolute;
left: 24px; top: 24px;
width: 40px; height: 40px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--brand); color: #fff;
border-radius: 10px;
box-shadow: 0 8px 20px -4px rgba(16, 70, 187, 0.45);
}
.about-timeline__num {
font: 700 11px/1 var(--font-mono);
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--brand);
margin-bottom: 6px;
}
.about-timeline__item h3 { font-size: 1.1rem; margin: 0 0 6px; letter-spacing: -0.015em; }
.about-timeline__item p { color: var(--text-secondary); font-size: 14px; line-height: 1.55; margin: 0; }
@media (max-width: 900px) {
.about-timeline__item { padding-left: 76px; }
.about-timeline__dot { left: 14px; }
}
/* TRUST */
.about-trust { padding: 88px 0 96px; }
.about-trust__grid {
display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: center;
}
@media (max-width: 880px) { .about-trust__grid { grid-template-columns: 1fr; gap: 32px; } }
.about-trust h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.025em; margin: 10px 0 12px; }
.about-trust__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.about-trust__list li {
display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: flex-start;
padding: 18px 20px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
transition: border-color var(--t), transform var(--t);
}
.about-trust__list li:hover { border-color: var(--brand); transform: translateX(3px); }
.about-trust__list li > span {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
background: var(--brand-soft); color: var(--brand);
border-radius: 10px;
}
.about-trust__list li > span svg { width: 20px; height: 20px; stroke-width: 1.8; }
.about-trust__list strong { display: block; font-size: 15px; color: var(--text); margin-bottom: 4px; }
.about-trust__list div { font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; }
/* FINAL CTA */
.about-cta { padding: 0 0 80px; }
.about-cta__panel {
position: relative;
padding: 56px clamp(28px, 6vw, 64px);
background: linear-gradient(135deg, var(--brand) 0%, #0c348c 100%);
border-radius: var(--r-lg);
color: #fff;
overflow: hidden;
box-shadow: 0 30px 70px -20px rgba(16, 70, 187, 0.45);
}
.about-cta__bg {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(700px 380px at 110% 0%, rgba(154,180,255,0.32), transparent 60%),
radial-gradient(500px 320px at -10% 110%, rgba(255,255,255,0.10), transparent 60%);
}
.about-cta__content { position: relative; max-width: 720px; }
.about-cta h2 {
color: #fff;
font-size: clamp(1.6rem, 3vw, 2.4rem);
letter-spacing: -0.025em; margin: 12px 0 14px;
}
.about-cta p { color: rgba(255,255,255,0.85); font-size: 16px; line-height: 1.6; margin-bottom: 26px; }
.about-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }
/* ─── Legal / prose ────────────────── */
.prose { color: var(--text); font-size: 15px; line-height: 1.7; }
.prose h2 { margin-top: 28px; margin-bottom: 12px; }
.prose h3 { margin-top: 22px; margin-bottom: 10px; }
.prose p { margin-bottom: 12px; color: var(--text); }
.prose ul, .prose ol { padding-left: 22px; margin: 10px 0; color: var(--text); }
.prose li { margin-bottom: 6px; }
/* ─── Error pages ──────────────────── */
.err { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 64px 24px; }
.err__code {
font: 800 8rem var(--font-mono); letter-spacing: -0.06em; line-height: 0.85;
background: linear-gradient(135deg, var(--brand) 0%, #4a78f0 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.err h1 { font-size: 1.8rem; margin: 18px 0 10px; }
.err p { color: var(--text-secondary); margin-bottom: 24px; max-width: 480px; }
/* ─── Reveal-on-scroll ───────────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
/* ─── Captcha widget ─── */
.captcha-widget { display: flex; gap: 12px; align-items: flex-start; }
.captcha-widget__img-wrap { display: flex; flex-direction: column; gap: 6px; }
.captcha-widget__img { width: 180px; height: 60px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface-alt); }
.captcha-widget__refresh { background: none; border: 0; padding: 0; color: var(--brand); font-size: 12.5px; cursor: pointer; text-align: left; }
.captcha-widget__field { flex: 1; }
/* ─── Heroicons ──── */
.hi { width: 18px; height: 18px; display: inline-block; vertical-align: -3px; stroke-width: 1.7; color: currentColor; flex-shrink: 0; }
.hi--lg { width: 24px; height: 24px; }
.hi--sm { width: 14px; height: 14px; }
/* ─── Utilities ──── */
.text-center { text-align: center; }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-brand { color: var(--brand); }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
/* ─── Catalog ──────────────────────── */
.catalog { padding: 48px 0 88px; }
.catalog__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.catalog__head h1 { font-size: clamp(1.8rem, 3vw, 2.5rem); letter-spacing: -0.025em; }
.catalog__head .sub { color: var(--text-secondary); margin-top: 8px; font-size: 15px; max-width: 540px; }
.search { position: relative; flex: 0 1 380px; min-width: 260px; }
.search input { padding-left: 40px; background: var(--surface); }
.search .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); pointer-events: none; }
.search__suggest {
position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 50;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
box-shadow: 0 24px 60px rgba(11,18,32,0.12);
max-height: 360px; overflow-y: auto;
}
.search__suggest a {
display: block; padding: 12px 16px;
border-bottom: 1px solid var(--border);
color: var(--text);
}
.search__suggest a:last-child { border-bottom: 0; }
.search__suggest a:hover, .search__suggest a.is-active { background: var(--brand-soft); color: var(--brand); }
.search__suggest mark { background: var(--brand-soft); color: var(--brand); border-radius: 3px; padding: 0 3px; }
.search__suggest .empty { padding: 22px; text-align: center; color: var(--text-secondary); font-size: 14px; }
.anon-gate {
display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap;
padding: 18px 24px;
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-hover) 100%);
color: #fff;
border-radius: var(--r-lg);
margin-bottom: 24px;
box-shadow: var(--sh-brand);
}
.anon-gate p { color: rgba(255,255,255,0.85); margin: 0; font-size: 14.5px; }
.anon-gate strong { color: #fff; }
.anon-gate .btn { background: #fff; color: var(--brand); }
.anon-gate .btn:hover { background: var(--brand-soft); color: var(--brand-hover); }
.catalog__layout { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; }
@media (max-width: 1024px) { .catalog__layout { grid-template-columns: 1fr; } }
.filters {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 6px 20px;
position: sticky; top: calc(var(--header-h) + 16px);
}
@media (max-width: 1024px) { .filters { position: static; } }
.filters details { border-bottom: 1px solid var(--border); padding: 16px 0; }
.filters details:last-of-type { border-bottom: 0; }
.filters summary {
cursor: pointer; display: flex; justify-content: space-between; align-items: center;
font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary);
font-weight: 700; list-style: none;
}
.filters summary::-webkit-details-marker { display: none; }
.filters summary::after { content: "+"; font-weight: 400; font-size: 16px; color: var(--text-secondary); }
.filters details[open] summary::after { content: "−"; }
.filters .opts { padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.filters .range { display: flex; gap: 8px; align-items: center; padding-top: 12px; }
.filters .range input { padding: 9px 10px; font-size: 13px; }
.filters .reset { display: block; width: 100%; margin: 14px 0 8px; }
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.toolbar__count { color: var(--text-secondary); font-size: 13px; }
.toolbar__sort { display: flex; align-items: center; gap: 8px; }
.toolbar__sort select { font-size: 13px; padding: 8px 30px 8px 12px; height: 38px; }
.catalog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1240px) { .catalog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .catalog-grid { grid-template-columns: 1fr; } }
.empty-state {
padding: 64px 24px; text-align: center;
background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--r-lg);
}
.empty-state h3 { font-size: 1.1rem; margin: 0 0 6px; }
.empty-state p { color: var(--text-secondary); font-size: 14px; }
/* ─── Deal card ──────────────────── */
.deal {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 22px;
display: flex; flex-direction: column; gap: 14px;
transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.deal:hover { border-color: var(--brand); box-shadow: var(--sh-2); transform: translateY(-2px); }
.deal__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; min-height: 24px; }
.deal__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
display: inline-flex; align-items: center; gap: 4px;
font: 500 11px var(--font);
padding: 5px 10px; border-radius: var(--r-pill);
background: var(--surface-alt); color: var(--text-secondary);
}
.chip--brand { background: var(--brand-soft); color: var(--brand); }
.chip--warn { background: var(--warning-soft); color: var(--warning); }
.chip--danger { background: var(--danger-soft); color: var(--danger); font-weight: 600; }
.chip--success { background: var(--success-soft); color: var(--success); }
.deal__star {
width: 34px; height: 34px;
display: grid; place-items: center;
background: transparent; border: 1px solid var(--border);
border-radius: 50%; cursor: pointer;
color: var(--text-disabled);
transition: color var(--t), border-color var(--t), background var(--t), transform var(--t);
flex-shrink: 0;
}
.deal__star:hover { color: var(--danger); border-color: var(--danger); transform: scale(1.05); }
.deal__star.is-active { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
.deal__title { font: 600 1.05rem/1.3 var(--font); margin: 0; letter-spacing: -0.01em; }
.deal__title a { color: var(--text); }
.deal__title a:hover { color: var(--brand); }
.deal__meta { display: flex; gap: 12px; font-size: 13px; color: var(--text-secondary); }
.deal__yield {
display: flex; align-items: baseline; justify-content: space-between;
padding: 14px 0;
border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.deal__yield .lbl { font-size: 12px; color: var(--text-secondary); }
.deal__yield .val { font: 800 1.9rem var(--font-mono); letter-spacing: -0.03em; color: var(--brand); }
.deal__yield .val sup { font-size: 0.5em; color: var(--text-secondary); font-weight: 500; margin-left: 2px; }
.deal__bar { height: 6px; background: var(--surface-alt); border-radius: 999px; overflow: hidden; }
.deal__bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), #4a78f0); border-radius: inherit; }
.deal__progress-meta { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-secondary); }
.deal__progress-meta strong { color: var(--text); font-family: var(--font-mono); font-weight: 600; }
.deal__bottom { margin-top: auto; display: flex; gap: 10px; align-items: center; justify-content: space-between; padding-top: 6px; }
.deal__bottom .amount { font: 700 14px var(--font-mono); color: var(--text); }
.deal__bottom .amount-lbl { font-size: 11px; color: var(--text-secondary); display: block; margin-bottom: 2px; }
/* ─── Deal detail ────────────────── */
.detail { padding: 32px 0 96px; }
.crumbs { color: var(--text-secondary); font-size: 13px; margin-bottom: 16px; }
.crumbs a { color: var(--text-secondary); }
.crumbs a:hover { color: var(--text); }
.crumbs span { color: var(--text); }
.detail__head { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--border); }
.detail__head h1 { margin: 12px 0 8px; font-size: clamp(1.7rem, 3vw, 2.2rem); }
.detail__head .type { color: var(--text-secondary); font-size: 14.5px; }
.detail__layout { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; }
@media (max-width: 980px) { .detail__layout { grid-template-columns: 1fr; } }
.block-title { font: 700 11px var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-secondary); margin: 0 0 14px; }
.detail-section { margin-bottom: 36px; }
.fin-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.fin-grid .fin { background: var(--surface); padding: 18px; }
.fin-grid .fin label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
.fin-grid .fin strong { font: 700 1.35rem var(--font-mono); letter-spacing: -0.02em; color: var(--text); }
.fin-grid .fin small { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
@media (max-width: 720px) { .fin-grid { grid-template-columns: 1fr 1fr; } }
.progress-block { padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.progress-block .bar { height: 8px; background: var(--surface-alt); border-radius: 999px; overflow: hidden; }
.progress-block .bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), #4a78f0); border-radius: inherit; }
.progress-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
.progress-meta > div strong { display: block; font: 700 1.1rem var(--font-mono); color: var(--text); }
.progress-meta > div span { font-size: 12px; color: var(--text-secondary); }
.progress-meta .urgent strong { color: var(--danger); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.55; } }
@media (max-width: 720px) { .progress-meta { grid-template-columns: 1fr 1fr; } }
.risks-block { background: var(--warning-soft); border-left: 3px solid var(--warning); padding: 18px 22px; border-radius: 0 var(--r) var(--r) 0; }
/* ─── Purchase sidebar ─────────── */
.purchase {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 24px;
position: sticky; top: calc(var(--header-h) + 16px);
}
@media (max-width: 980px) { .purchase { position: static; } }
.purchase h3 { margin: 0 0 8px; font-size: 1.05rem; }
.purchase .row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; }
.purchase .row strong { font-family: var(--font-mono); color: var(--text); }
.purchase .picker { display: flex; align-items: center; gap: 10px; }
.purchase .picker input[type=number] { width: 92px; text-align: center; font: 700 1.1rem var(--font-mono); }
.purchase .summary { background: var(--surface-alt); border-radius: var(--r); padding: 14px 16px; margin-top: 14px; }
.purchase__actions { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; padding-top: 14px; border-top: 1px solid var(--border); }
.purchase__actions a, .purchase__actions button {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; border-radius: var(--r);
background: transparent; color: var(--text); border: 0;
text-align: left; cursor: pointer; font-size: 14px;
font-family: var(--font);
transition: background var(--t), color var(--t);
}
.purchase__actions a:hover, .purchase__actions button:hover { background: var(--surface-alt); }
.purchase__actions .is-active { color: var(--danger); }
input[type=range] { width: 100%; accent-color: var(--brand); }
/* ─── Modal ─────────────────── */
.modal { border: 0; padding: 0; background: transparent; max-width: 90vw; }
.modal::backdrop { background: rgba(11, 18, 32, 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal__panel { background: var(--surface); border-radius: var(--r-lg); padding: 32px; max-width: 480px; position: relative; box-shadow: 0 30px 80px rgba(0,0,0,0.3); }
.modal__close { position: absolute; top: 14px; right: 16px; background: none; border: 0; font-size: 1.5rem; cursor: pointer; color: var(--text-secondary); line-height: 1; }
.modal__close:hover { color: var(--text); }
/* ─── Tables ─────────────────── */
.table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.table th, .table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); font-size: 14px; }
.table th { background: var(--surface-alt); font-weight: 600; font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; }
.table tr:last-child td { border-bottom: 0; }
.table tr:hover td { background: var(--surface-alt); }
.status { padding: 3px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; display: inline-block; }
.status--reserved, .status--awaiting, .status--submitted, .status--under_review, .status--created, .status--pending, .status--labor_pending { background: var(--brand-soft); color: var(--brand); }
.status--paid, .status--confirmed, .status--approved, .status--labor_active, .status--completed, .status--listed { background: var(--success-soft); color: var(--success); }
.status--cancelled, .status--rejected, .status--failed { background: var(--danger-soft); color: var(--danger); }
.status--draft, .status--moderation { background: var(--warning-soft); color: var(--warning); }
.status--closed { background: var(--surface-alt); color: var(--text-secondary); }
.status--active { background: var(--success-soft); color: var(--success); }
.status--blocked { background: var(--text); color: #fff; }
/* ═══ Cabinet v2 — premium ═══════════════════════════════════════════════ */
.cab {
display: grid;
grid-template-columns: 280px 1fr;
gap: 28px;
max-width: 1280px;
margin: 0 auto;
padding: 28px 24px 80px;
align-items: start;
}
@media (max-width: 980px) {
.cab { grid-template-columns: 1fr; padding: 16px 16px 80px; gap: 16px; }
}
/* === Mobile toggle === */
.cab__burger {
display: none;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
background: linear-gradient(135deg, var(--brand) 0%, #4a78f0 100%);
border: 0;
border-radius: 14px;
color: #fff;
font: 600 14px/1 "Inter", sans-serif;
cursor: pointer;
box-shadow: 0 14px 30px -10px rgba(16, 70, 187, 0.55);
}
.cab__burger svg { transition: transform 0.25s; }
.cab__burger[aria-expanded="true"] svg { transform: rotate(90deg); }
@media (max-width: 980px) { .cab__burger { display: flex; } }
/* === Sidebar === */
.cab__nav {
position: sticky;
top: calc(var(--header-h) + 16px);
height: max-content;
background: #fff;
border: 1px solid var(--border);
border-radius: 22px;
padding: 14px;
box-shadow: 0 22px 50px -28px rgba(11, 18, 32, 0.18);
overflow: hidden;
}
@media (max-width: 980px) {
.cab__nav {
position: static;
max-height: 0;
padding: 0 14px;
border: 0;
box-shadow: none;
transition: max-height 0.35s ease, padding 0.35s ease, border-width 0.35s;
}
.cab__nav.is-open {
max-height: 1200px;
padding: 14px;
border: 1px solid var(--border);
box-shadow: 0 18px 40px -22px rgba(11, 18, 32, 0.18);
}
}
/* User card */
.cab__user {
position: relative;
padding: 22px 20px;
margin: -14px -14px 14px;
background: linear-gradient(135deg, var(--brand) 0%, #0c348c 100%);
border-radius: 20px 20px 0 0;
overflow: hidden;
color: #fff;
}
.cab__user-bg { position: absolute; inset: 0; pointer-events: none; }
.cab__user-blob {
position: absolute;
border-radius: 50%;
filter: blur(30px);
opacity: 0.4;
}
.cab__user-blob--1 {
width: 200px; height: 200px;
top: -80px; right: -50px;
background: radial-gradient(circle, #76b9ff, transparent 60%);
animation: dashBlob 16s ease-in-out infinite;
}
.cab__user-blob--2 {
width: 160px; height: 160px;
bottom: -60px; left: -40px;
background: radial-gradient(circle, #9ab4ff, transparent 60%);
animation: dashBlob 20s ease-in-out infinite reverse;
}
@keyframes dashBlob {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(20px, 14px); }
}
.cab__user-content {
position: relative;
display: flex; align-items: center; gap: 14px;
}
.cab__avatar {
width: 48px; height: 48px;
flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.2);
border: 1px solid rgba(255,255,255,0.3);
border-radius: 14px;
font: 700 16px/1 "Inter", sans-serif;
letter-spacing: 0.02em;
color: #fff;
backdrop-filter: blur(10px);
}
.cab__user-info { min-width: 0; flex: 1; }
.cab__user-info strong {
display: block;
font-size: 14.5px;
font-weight: 700;
letter-spacing: -0.01em;
margin-bottom: 4px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cab__user-info span {
display: block;
font-size: 11.5px;
color: rgba(255,255,255,0.78);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Menu */
.cab__menu { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.cab__sep {
height: 1px;
margin: 8px 12px;
background: var(--border);
}
.cab__link {
display: grid;
grid-template-columns: 34px 1fr 18px;
gap: 12px;
align-items: center;
padding: 11px 14px;
border-radius: 12px;
color: var(--text);
font-size: 14px;
font-weight: 500;
text-decoration: none;
transition: background 0.2s, transform 0.18s, color 0.2s;
position: relative;
}
.cab__link-ico {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px;
background: var(--brand-soft);
color: var(--brand);
border-radius: 10px;
transition: background 0.25s, color 0.25s, transform 0.25s;
}
.cab__link-ico svg { width: 16px; height: 16px; stroke-width: 1.9; }
.cab__link-arr {
display: inline-flex; align-items: center;
color: var(--text-secondary);
opacity: 0;
transform: translateX(-4px);
transition: opacity 0.2s, transform 0.2s, color 0.2s;
}
.cab__link-arr svg { width: 14px; height: 14px; stroke-width: 2; }
.cab__link:hover {
background: var(--brand-soft);
color: var(--brand);
}
.cab__link:hover .cab__link-arr { opacity: 1; transform: translateX(0); color: var(--brand); }
.cab__link:hover .cab__link-ico { transform: scale(1.08); }
.cab__link.is-active {
background: linear-gradient(135deg, var(--brand) 0%, #0c348c 100%);
color: #fff;
box-shadow: 0 10px 24px -10px rgba(16, 70, 187, 0.55);
}
.cab__link.is-active .cab__link-ico { background: rgba(255,255,255,0.2); color: #fff; }
.cab__link.is-active .cab__link-arr { color: #fff; opacity: 1; transform: translateX(0); }
.cab__link--danger { color: var(--danger); }
.cab__link--danger .cab__link-ico { background: var(--danger-soft); color: var(--danger); }
.cab__link--danger:hover { background: var(--danger-soft); color: var(--danger); }
/* === Main area === */
.cab__main {
min-width: 0;
display: flex;
flex-direction: column;
gap: 22px;
}
.cab__main .alert { margin-bottom: 0; }
/* === DASH HERO === */
.dash-hero {
position: relative;
padding: 36px clamp(24px, 4vw, 44px);
background: linear-gradient(135deg, #0c348c 0%, var(--brand) 60%, #4a78f0 100%);
border-radius: 24px;
color: #fff;
overflow: hidden;
box-shadow: 0 28px 60px -22px rgba(16, 70, 187, 0.5);
}
.dash-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.dash-hero__blob {
position: absolute;
border-radius: 50%;
filter: blur(60px);
opacity: 0.45;
}
.dash-hero__blob--1 {
width: 420px; height: 420px;
top: -120px; right: -80px;
background: radial-gradient(circle, #76b9ff, transparent 60%);
animation: dashBlob 18s ease-in-out infinite;
}
.dash-hero__blob--2 {
width: 300px; height: 300px;
bottom: -100px; left: -60px;
background: radial-gradient(circle, #cdd9f3, transparent 60%);
animation: dashBlob 22s ease-in-out infinite reverse;
}
.dash-hero__grid {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: radial-gradient(800px 500px at 50% 50%, #000 30%, transparent 80%);
-webkit-mask-image: radial-gradient(800px 500px at 50% 50%, #000 30%, transparent 80%);
}
.dash-hero__content {
position: relative;
display: grid;
grid-template-columns: 1fr 160px;
gap: 32px;
align-items: center;
}
@media (max-width: 720px) {
.dash-hero__content { grid-template-columns: 1fr; gap: 24px; }
.dash-hero__ring { max-width: 140px; margin: 0 auto; }
}
.dash-hero__chip {
display: inline-flex; align-items: center; gap: 8px;
font: 600 11px/1 "JetBrains Mono", monospace;
text-transform: uppercase; letter-spacing: 0.14em;
color: rgba(255,255,255,0.9);
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 999px;
padding: 8px 14px;
backdrop-filter: blur(8px);
margin-bottom: 18px;
}
.dash-hero__chip-dot {
width: 8px; height: 8px;
background: #5fdc8a;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(95,220,138,0.25);
animation: toastPulse 1.6s ease-in-out infinite;
}
.dash-hero__title {
font-size: clamp(1.5rem, 3vw, 2.1rem);
letter-spacing: -0.025em; line-height: 1.15;
margin: 0 0 12px;
font-weight: 800;
color: #fff;
}
.dash-hero__name {
background: linear-gradient(120deg, #cdd9f3 0%, #fff 50%, #cdd9f3 100%);
background-size: 200% auto;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
animation: abxGradShift 8s ease infinite;
}
.dash-hero__lead {
color: rgba(255,255,255,0.78);
font-size: 14.5px; line-height: 1.6;
max-width: 540px;
margin: 0 0 22px;
}
.dash-hero__lead strong { color: #fff; }
.dash-hero__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.dash-hero__ring { position: relative; width: 140px; height: 140px; justify-self: end; }
.dash-hero__ring svg { width: 100%; height: 100%; }
.dash-hero__ring-content {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
color: #fff;
}
.dash-hero__ring-content strong {
font: 800 1.8rem/1 "JetBrains Mono", monospace;
letter-spacing: -0.025em;
}
.dash-hero__ring-content strong sup { font-size: 0.45em; font-weight: 600; vertical-align: super; top: 0; }
.dash-hero__ring-content span {
font: 500 10.5px/1 "JetBrains Mono", monospace;
text-transform: uppercase; letter-spacing: 0.14em;
color: rgba(255,255,255,0.7);
margin-top: 6px;
}
/* === KPI CARDS === */
.dash-kpis {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
@media (max-width: 980px) { .dash-kpis { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px) { .dash-kpis { grid-template-columns: 1fr; } }
.dash-kpi {
position: relative;
padding: 22px 22px 20px;
background: linear-gradient(155deg, #ffffff 0%, #f6f9ff 100%);
border: 1px solid var(--border);
border-radius: 18px;
overflow: hidden;
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.3s;
}
.dash-kpi::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(280px 200px at 100% 0%, rgba(74,120,240,0.10), transparent 60%);
opacity: 0; transition: opacity 0.35s;
}
.dash-kpi:hover {
transform: translateY(-4px);
box-shadow: 0 28px 50px -22px rgba(16, 70, 187, 0.25);
border-color: rgba(16, 70, 187, 0.25);
}
.dash-kpi:hover::before { opacity: 1; }
.dash-kpi__head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 18px;
}
.dash-kpi__ico {
display: inline-flex; align-items: center; justify-content: center;
width: 42px; height: 42px; border-radius: 12px;
color: #fff;
box-shadow: 0 10px 22px -6px rgba(16, 70, 187, 0.5);
}
.dash-kpi__ico svg { width: 22px; height: 22px; stroke-width: 1.9; }
.dash-kpi__ico--brand { background: linear-gradient(135deg, var(--brand), #4a78f0); }
.dash-kpi__ico--success { background: linear-gradient(135deg, #1f9d55, #2cb86b); box-shadow: 0 10px 22px -6px rgba(31, 157, 85, 0.5); }
.dash-kpi__ico--warn { background: linear-gradient(135deg, #c47700, #e6a532); box-shadow: 0 10px 22px -6px rgba(196, 119, 0, 0.5); }
.dash-kpi__ico--danger { background: linear-gradient(135deg, #c92c2c, #e35858); box-shadow: 0 10px 22px -6px rgba(201, 44, 44, 0.5); }
.dash-kpi__delta {
font: 600 11px/1 "JetBrains Mono", monospace;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--text-secondary);
}
.dash-kpi__delta--success { color: var(--success); }
.dash-kpi__num {
display: inline-block;
font: 800 2rem/1 "JetBrains Mono", monospace;
letter-spacing: -0.03em;
color: var(--text);
}
.dash-kpi__unit {
display: inline-block;
font-weight: 600;
color: var(--text-secondary);
margin-left: 4px;
font-size: 1.1rem;
}
.dash-kpi__sub {
display: block;
margin-top: 10px;
font-size: 12.5px;
color: var(--text-secondary);
line-height: 1.5;
}
/* === SPLIT (Activity + Side) === */
.dash-split {
display: grid;
grid-template-columns: 1.7fr 1fr;
gap: 18px;
align-items: start;
}
@media (max-width: 980px) { .dash-split { grid-template-columns: 1fr; } }
.dash-card {
position: relative;
background: #fff;
border: 1px solid var(--border);
border-radius: 20px;
padding: 24px clamp(20px, 3vw, 28px);
box-shadow: 0 22px 50px -28px rgba(11, 18, 32, 0.18);
}
.dash-card__head {
display: flex; justify-content: space-between; align-items: flex-end;
gap: 16px; flex-wrap: wrap;
margin-bottom: 18px;
}
.dash-card__eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font: 600 11px/1 "JetBrains Mono", monospace;
text-transform: uppercase; letter-spacing: 0.16em;
color: var(--brand);
margin-bottom: 8px;
}
.dash-card__eyebrow::before {
content: ""; display: inline-block;
width: 22px; height: 1px;
background: linear-gradient(90deg, var(--brand), transparent);
}
.dash-card h2 {
font-size: 1.2rem; letter-spacing: -0.015em;
margin: 0; font-weight: 700;
}
.dash-card__link {
font: 600 13px/1 "Inter", sans-serif;
color: var(--brand);
display: inline-flex; align-items: center; gap: 4px;
text-decoration: none;
}
.dash-card__link:hover { color: var(--brand-hover); }
.dash-card__link svg { width: 14px; height: 14px; stroke-width: 2; }
.dash-side { display: flex; flex-direction: column; gap: 18px; }
/* === FEED === */
.dash-feed { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.dash-feed__item {
display: grid;
grid-template-columns: 12px 1fr auto;
align-items: center;
gap: 14px;
padding: 14px 4px;
border-bottom: 1px solid var(--border);
transition: background 0.2s;
}
.dash-feed__item:last-child { border-bottom: 0; }
.dash-feed__item:hover { background: var(--surface-alt); border-radius: 12px; }
.dash-feed__dot {
width: 10px; height: 10px;
background: var(--brand);
border-radius: 50%;
box-shadow: 0 0 0 4px var(--brand-soft);
}
.dash-feed__item--paid .dash-feed__dot { background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }
.dash-feed__item--reserved .dash-feed__dot { background: var(--warning); box-shadow: 0 0 0 4px var(--warning-soft); }
.dash-feed__item--cancelled .dash-feed__dot { background: var(--text-secondary); box-shadow: 0 0 0 4px var(--surface-alt); }
.dash-feed__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dash-feed__body strong { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-feed__body span { font-size: 12.5px; color: var(--text-secondary); }
.dash-feed__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.dash-feed__meta strong { font: 700 14px/1 "JetBrains Mono", monospace; letter-spacing: -0.01em; color: var(--text); }
.dash-feed__meta span { font-size: 11.5px; color: var(--text-secondary); font-family: "JetBrains Mono", monospace; }
/* === EMPTY STATE === */
.dash-empty { text-align: center; padding: 40px 20px; }
.dash-empty__ico {
display: inline-flex; align-items: center; justify-content: center;
width: 76px; height: 76px;
background: linear-gradient(135deg, var(--brand-soft), #d6e0fb);
color: var(--brand);
border-radius: 22px;
margin-bottom: 18px;
}
.dash-empty__ico svg { width: 36px; height: 36px; stroke-width: 1.6; }
.dash-empty h3 { font-size: 1.15rem; margin: 0 0 8px; letter-spacing: -0.01em; }
.dash-empty p { color: var(--text-secondary); font-size: 14px; line-height: 1.55; max-width: 380px; margin: 0 auto 18px; }
/* === QUICK ACTIONS === */
.dash-quick { display: flex; flex-direction: column; gap: 8px; }
.dash-quick__item {
display: grid;
grid-template-columns: 36px 1fr 18px;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: var(--surface-alt);
border-radius: 12px;
color: var(--text);
text-decoration: none;
transition: background 0.2s, transform 0.2s;
}
.dash-quick__item:hover { background: var(--brand-soft); transform: translateX(2px); color: var(--brand); }
.dash-quick__ico {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px;
background: #fff;
color: var(--brand);
border-radius: 10px;
box-shadow: 0 2px 6px rgba(11,18,32,0.06);
}
.dash-quick__ico svg { width: 18px; height: 18px; stroke-width: 1.9; }
.dash-quick__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-quick__body strong { font-size: 13.5px; font-weight: 600; color: inherit; }
.dash-quick__body span { font-size: 12px; color: var(--text-secondary); }
.dash-quick__item > svg { color: var(--text-secondary); width: 14px; height: 14px; stroke-width: 2; }
.dash-quick__item:hover > svg { color: var(--brand); }
/* === ALERTS BLOCK === */
.dash-alerts { display: flex; flex-direction: column; gap: 10px; }
.dash-alert {
display: grid;
grid-template-columns: 38px 1fr;
gap: 12px;
align-items: center;
padding: 14px 16px;
border-radius: 14px;
text-decoration: none;
transition: transform 0.2s, box-shadow 0.2s;
border: 1px solid;
}
.dash-alert:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -16px rgba(11,18,32,0.18); }
.dash-alert__ico {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px;
border-radius: 11px;
color: #fff;
}
.dash-alert__ico svg { width: 18px; height: 18px; stroke-width: 1.9; }
.dash-alert div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-alert strong { font-size: 13.5px; font-weight: 600; color: var(--text); }
.dash-alert span { font-size: 12px; color: var(--text-secondary); }
.dash-alert--warn { background: var(--warning-soft); border-color: rgba(196, 119, 0, 0.25); }
.dash-alert--warn .dash-alert__ico { background: linear-gradient(135deg, #c47700, #e6a532); }
.dash-alert--info { background: var(--brand-soft); border-color: rgba(16, 70, 187, 0.18); }
.dash-alert--info .dash-alert__ico { background: linear-gradient(135deg, var(--brand), #4a78f0); }
.dash-alert--ok { background: var(--success-soft); border-color: rgba(31, 157, 85, 0.25); }
.dash-alert--ok .dash-alert__ico { background: linear-gradient(135deg, #1f9d55, #2cb86b); }
/* === STEPS === */
.dash-steps {
position: relative;
background: #fff;
border: 1px solid var(--border);
border-radius: 20px;
padding: 24px clamp(20px, 3vw, 28px);
box-shadow: 0 22px 50px -28px rgba(11, 18, 32, 0.18);
}
.dash-steps__list {
list-style: none; padding: 0; margin: 18px 0 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
@media (max-width: 900px) { .dash-steps__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .dash-steps__list { grid-template-columns: 1fr; } }
.dash-step {
position: relative;
display: flex; align-items: flex-start; gap: 12px;
padding: 16px 14px;
background: var(--surface-alt);
border-radius: 14px;
border: 1px solid transparent;
transition: all 0.25s;
}
.dash-step__num {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; flex-shrink: 0;
background: #fff;
color: var(--text-secondary);
border: 1px solid var(--border);
border-radius: 10px;
font: 700 13px/1 "JetBrains Mono", monospace;
}
.dash-step__num svg { width: 16px; height: 16px; stroke-width: 2.4; }
.dash-step div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dash-step strong { font-size: 13.5px; font-weight: 600; color: var(--text); letter-spacing: -0.005em; }
.dash-step span { font-size: 12px; color: var(--text-secondary); line-height: 1.45; }
.dash-step.is-done {
background: var(--success-soft);
border-color: rgba(31, 157, 85, 0.22);
}
.dash-step.is-done .dash-step__num {
background: linear-gradient(135deg, #1f9d55, #2cb86b);
color: #fff;
border-color: transparent;
box-shadow: 0 8px 18px -6px rgba(31, 157, 85, 0.5);
}
.dash-step.is-current {
background: var(--brand-soft);
border-color: rgba(16, 70, 187, 0.22);
}
.dash-step.is-current .dash-step__num {
background: linear-gradient(135deg, var(--brand), #4a78f0);
color: #fff;
border-color: transparent;
box-shadow: 0 8px 18px -6px rgba(16, 70, 187, 0.5);
animation: stepPulse 2s ease-in-out infinite;
}
@keyframes stepPulse {
0%, 100% { box-shadow: 0 8px 18px -6px rgba(16,70,187,0.5); }
50% { box-shadow: 0 8px 24px -4px rgba(16,70,187,0.8); }
}
/* ─── Старые классы кабинета (для обратной совместимости с другими шаблонами) ─── */
.cabinet { display: grid; grid-template-columns: 240px 1fr; gap: 32px; padding: 32px 0 64px; }
@media (max-width: 880px) { .cabinet { grid-template-columns: 1fr; } }
.cabinet__nav { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px; position: sticky; top: calc(var(--header-h) + 16px); height: max-content; }
@media (max-width: 880px) { .cabinet__nav { position: static; } }
.cabinet__nav ul { list-style: none; padding: 0; margin: 0; }
.cabinet__nav li a {
display: flex; align-items: center; gap: 10px;
padding: 9px 12px; border-radius: var(--r);
color: var(--text-secondary); font-size: 14px;
transition: background var(--t), color var(--t);
}
.cabinet__nav li a:hover { background: var(--surface-alt); color: var(--text); }
.cabinet__nav li a.is-active { background: var(--brand); color: #fff; box-shadow: 0 4px 10px var(--brand-glow); }
.cabinet__main { min-width: 0; }
/* ─── Payment ──────────────── */
.payment-shell { padding: 32px 0 88px; }
.pay-layout { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }
@media (max-width: 980px) { .pay-layout { grid-template-columns: 1fr; } }
.timer-card { display: flex; gap: 16px; align-items: center; padding: 20px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.timer-card .clock { margin-left: auto; font: 700 1.7rem var(--font-mono); letter-spacing: -0.02em; color: var(--brand); }
.timer-card--urgent { border-color: var(--danger); background: var(--danger-soft); }
.timer-card--urgent .clock { color: var(--danger); animation: pulse 1s ease-in-out infinite; }
.pay-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
@media (max-width: 720px) { .pay-methods { grid-template-columns: 1fr; } }
.pay-method {
display: flex; flex-direction: column; gap: 6px;
border: 1px solid var(--border-strong); border-radius: var(--r);
padding: 14px; cursor: pointer; position: relative;
transition: border-color var(--t), background var(--t);
}
.pay-method input { position: absolute; opacity: 0; pointer-events: none; }
.pay-method:hover { border-color: var(--brand); }
.pay-method:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.pay-method .lbl { font-weight: 600; font-size: 14px; color: var(--text); }
.pay-method .hint { font-size: 12px; color: var(--text-secondary); }
.pay-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
.pay-row strong { font-family: var(--font-mono); color: var(--text); }
.pay-row--total { font-size: 16px; padding-top: 14px; border-top: 1px solid var(--border); margin-top: 14px; }
.pay-row--total strong { font-size: 1.5rem; color: var(--brand); }
.timeline { list-style: none; padding: 0; margin: 24px 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 13px; top: 10px; bottom: 10px; width: 1px; background: var(--border); }
.timeline li { position: relative; padding: 0 0 24px 40px; }
.timeline .dot { position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border); }
.timeline .dot::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--border-strong); }
.timeline .is-done .dot { border-color: var(--brand); }
.timeline .is-done .dot::after { background: var(--brand); }
.timeline .is-ok .dot { border-color: var(--success); }
.timeline .is-ok .dot::after { background: var(--success); }
.timeline .is-error .dot { border-color: var(--danger); }
.timeline .is-error .dot::after { background: var(--danger); }
.timeline .lbl { font-weight: 600; color: var(--text); }
.timeline .date { color: var(--text-secondary); font-size: 12.5px; margin-top: 2px; }
/* ─── Chat ──────────────── */
/* ─── Chat page wrapper (хлебные крошки + хедер) ─── */
.chat-page { padding-top: 24px; padding-bottom: 80px; }
.chat-bc {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
margin: 0 0 18px;
}
.chat-bc__back {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
color: var(--text-secondary);
font: 600 13px/1 "Inter", sans-serif;
text-decoration: none;
transition: all 0.2s;
}
.chat-bc__back svg { transform: rotate(180deg); width: 14px; height: 14px; stroke-width: 2.2; }
.chat-bc__back:hover {
background: var(--brand-soft);
color: var(--brand);
border-color: var(--brand);
transform: translateX(-2px);
}
.chat-bc__crumbs {
display: inline-flex; align-items: center; gap: 8px;
font-size: 13.5px; color: var(--text-secondary);
}
.chat-bc__crumbs a { color: var(--text-secondary); text-decoration: none; }
.chat-bc__crumbs a:hover { color: var(--brand); }
.chat-bc__sep { color: var(--text-secondary); opacity: 0.4; }
.chat-bc__current { color: var(--text); font-weight: 600; }
.chat-header { margin-bottom: 18px; }
.chat-header h1 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); letter-spacing: -0.02em; margin: 8px 0 6px; }
.chat-header p { margin: 0; }
.chat__side-title { font: 600 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-secondary); padding: 8px 12px; }
.chat__side-empty { padding: 10px 12px; font-size: 13px; line-height: 1.45; margin: 0; }
.chat__side .chat__side-foot { margin: 4px 0 0; padding: 4px 0 0; border-top: 1px solid var(--border); }
.chat__side a.chat__side-back {
display: flex !important;
align-items: center;
justify-content: flex-start !important;
gap: 10px !important;
padding: 8px 12px !important;
color: var(--text-secondary) !important;
font-size: 13px;
border-radius: 8px;
margin: 0;
}
.chat__side a.chat__side-back:hover { background: var(--surface-alt); color: var(--text) !important; }
.chat__head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px !important; gap: 12px; }
.chat__head-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.chat__head-info strong { font-size: 14.5px; font-weight: 700; letter-spacing: -0.005em; color: var(--text); }
.chat__head-sub { font-size: 12px; color: var(--text-secondary); }
.chat__head-side { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* Connection status badge */
.chat-status {
display: inline-flex; align-items: center; gap: 6px;
font: 600 11px/1 "JetBrains Mono", monospace;
text-transform: uppercase; letter-spacing: 0.1em;
color: var(--text-secondary);
background: var(--surface-alt);
padding: 6px 10px;
border-radius: 999px;
transition: background 0.25s, color 0.25s;
}
.chat-status::before {
content: ""; width: 7px; height: 7px;
background: var(--text-secondary);
border-radius: 50%;
flex-shrink: 0;
}
.chat-status[data-status="online"] { color: var(--success); background: var(--success-soft); }
.chat-status[data-status="online"]::before { background: var(--success); box-shadow: 0 0 0 3px rgba(31,157,85,0.15); animation: chatPulse 2s ease-in-out infinite; }
.chat-status[data-status="connecting"], .chat-status[data-status="reconnecting"] { color: var(--warning); background: var(--warning-soft); }
.chat-status[data-status="connecting"]::before, .chat-status[data-status="reconnecting"]::before { background: var(--warning); animation: chatBlink 0.8s linear infinite; }
.chat-status[data-status="offline"] { color: var(--danger); background: var(--danger-soft); }
.chat-status[data-status="offline"]::before { background: var(--danger); }
.chat-status[data-status="fallback"] { color: var(--brand); background: var(--brand-soft); }
.chat-status[data-status="fallback"]::before { background: var(--brand); animation: chatBlink 1.2s linear infinite; }
@keyframes chatPulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(31,157,85,0.15); }
50% { box-shadow: 0 0 0 6px rgba(31,157,85,0.05); }
}
@keyframes chatBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
/* Typing indicator */
.chat-typing {
display: flex; align-items: center; gap: 8px;
padding: 10px 18px;
background: linear-gradient(180deg, var(--brand-soft) 0%, transparent 100%);
border-bottom: 1px solid var(--border);
font-size: 12.5px; color: var(--brand);
font-weight: 500;
}
.chat-typing[hidden] { display: none; }
.chat-typing__dot {
width: 6px; height: 6px;
background: var(--brand);
border-radius: 50%;
display: inline-block;
animation: typingBounce 1.2s ease-in-out infinite;
}
.chat-typing__dot:nth-child(2) { animation-delay: 0.15s; }
.chat-typing__dot:nth-child(3) { animation-delay: 0.30s; }
@keyframes typingBounce {
0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
30% { transform: translateY(-4px); opacity: 1; }
}
.chat-typing__text { margin-left: 4px; }
/* Сообщения — статусы pending / failed / seen */
.chat-msg__body { white-space: pre-wrap; word-wrap: break-word; }
.chat-msg__meta { display: flex; align-items: center; gap: 6px; font-size: 11px; opacity: 0.7; margin-top: 4px; font-family: var(--font-mono); }
.chat-msg__status { font-size: 10px; letter-spacing: 0.05em; }
.chat-msg.is-pending { opacity: 0.65; }
.chat-msg.is-pending .chat-msg__status { animation: chatBlink 1s ease-in-out infinite; }
.chat-msg.is-failed { border: 1px solid var(--danger); }
.chat-msg.is-failed .chat-msg__status { color: var(--danger); }
.chat-msg.is-seen .chat-msg__status { color: rgba(255,255,255,0.95); }
.chat-msg--mine .chat-msg__status { color: rgba(255,255,255,0.85); }
input.is-warn { border-color: var(--warning) !important; background: var(--warning-soft); }
/* ─── Chat: header layout + actions ─── */
.chat-header {
display: flex; justify-content: space-between; align-items: flex-end;
gap: 16px; flex-wrap: wrap;
margin-bottom: 18px;
}
.chat__head-action {
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--surface-alt);
color: var(--text-secondary);
border: 0; border-radius: 10px;
cursor: pointer;
transition: all 0.2s;
}
.chat__head-action:hover { background: var(--success-soft); color: var(--success); }
.chat-tag {
display: inline-block;
font: 600 10.5px/1 "JetBrains Mono", monospace;
text-transform: uppercase; letter-spacing: 0.12em;
padding: 4px 8px; border-radius: 999px;
margin-left: 8px;
vertical-align: middle;
}
.chat-tag--support { background: var(--brand-soft); color: var(--brand); }
.chat-tag--manager { background: var(--success-soft); color: var(--success); }
.chat-tag--closed { background: var(--surface-alt); color: var(--text-secondary); }
/* ─── Chat: filters bar (staff view) ─── */
.chat-filters {
background: #fff;
border: 1px solid var(--border);
border-radius: 14px;
padding: 14px 18px;
margin-bottom: 18px;
}
.chat-filters__form { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.chat-filters__group { display: flex; flex-direction: column; gap: 4px; }
.chat-filters__group--grow { flex: 1 1 260px; }
.chat-filters__group label {
font: 600 11px/1 "JetBrains Mono", monospace;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--text-secondary);
}
.chat-filters__group select, .chat-filters__group input {
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface);
font-size: 13.5px;
min-height: 38px;
}
/* ─── Chat rooms list ─── */
.chat-rooms { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; max-height: 540px; overflow-y: auto; }
.chat-rooms li { padding: 0; }
.chat-room {
display: grid;
grid-template-columns: 38px 1fr;
gap: 10px;
padding: 10px 12px !important;
border-radius: 10px;
text-decoration: none;
transition: background 0.2s, transform 0.15s;
align-items: start;
}
.chat-room:hover { background: var(--brand-soft); transform: translateX(2px); }
.chat-room.is-active { background: linear-gradient(135deg, var(--brand), #0c348c); color: #fff; box-shadow: 0 8px 18px -8px rgba(16,70,187,0.45); }
.chat-room.is-active .chat-room__avatar { background: rgba(255,255,255,0.18); color: #fff; }
.chat-room.is-active .chat-room__sub, .chat-room.is-active .chat-room__time { color: rgba(255,255,255,0.8); }
.chat-room.is-closed { opacity: 0.6; }
.chat-room__avatar {
width: 38px; height: 38px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--brand-soft); color: var(--brand);
border-radius: 10px;
flex-shrink: 0;
}
.chat-room__avatar svg { width: 18px; height: 18px; stroke-width: 1.9; }
.chat-room__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chat-room__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat-room__top strong {
font-size: 13.5px; font-weight: 600;
color: inherit;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-room__badge {
display: inline-flex; align-items: center;
background: var(--danger); color: #fff;
font: 700 10.5px/1 "JetBrains Mono", monospace;
padding: 3px 7px; border-radius: 999px;
min-width: 18px; justify-content: center;
}
.chat-room__sub {
font-size: 11.5px; color: var(--text-secondary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-room__time {
font: 500 10.5px/1 "JetBrains Mono", monospace;
color: var(--text-secondary);
margin-top: 4px;
}
.chat-room-empty {
display: flex; align-items: center; justify-content: center;
min-height: 60vh;
}
/* ─── Ticket form ─── */
.ticket-page { padding: 24px 0 80px; }
.ticket-card {
max-width: 720px;
margin: 0 auto;
background: #fff;
border: 1px solid var(--border);
border-radius: 20px;
padding: 32px clamp(20px, 4vw, 40px);
box-shadow: 0 22px 50px -28px rgba(11, 18, 32, 0.18);
}
.ticket-card__head { margin-bottom: 24px; }
.ticket-card h1 {
font-size: clamp(1.4rem, 2.6vw, 1.85rem);
letter-spacing: -0.02em;
margin: 6px 0 8px;
}
.ticket-card__head p { color: var(--text-secondary); font-size: 14px; line-height: 1.55; }
.ticket-cats { border: 0; padding: 0; margin: 0 0 22px; }
.ticket-cats legend {
font: 600 11px/1 "JetBrains Mono", monospace;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--text-secondary);
margin-bottom: 10px;
}
.ticket-cats__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
@media (max-width: 640px) { .ticket-cats__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .ticket-cats__grid { grid-template-columns: 1fr; } }
.ticket-cat {
position: relative;
display: flex; align-items: center; gap: 10px;
padding: 12px 14px;
background: var(--surface-alt);
border: 1px solid transparent;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s;
}
.ticket-cat input { position: absolute; opacity: 0; pointer-events: none; }
.ticket-cat:hover { background: var(--brand-soft); }
.ticket-cat.is-checked {
background: linear-gradient(135deg, var(--brand), #0c348c);
color: #fff;
border-color: transparent;
box-shadow: 0 10px 22px -8px rgba(16,70,187,0.45);
}
.ticket-cat__ico {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
background: #fff;
color: var(--brand);
border-radius: 8px;
flex-shrink: 0;
}
.ticket-cat.is-checked .ticket-cat__ico { background: rgba(255,255,255,0.18); color: #fff; }
.ticket-cat__label { font-size: 13.5px; font-weight: 600; }
.ticket-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border); }
.form-error { color: var(--danger); font-size: 12px; margin-top: 4px; display: block; }
.chat__head-back {
display: none;
width: 32px; height: 32px;
align-items: center; justify-content: center;
background: var(--surface-alt);
color: var(--text-secondary);
border-radius: 10px;
text-decoration: none;
transition: all 0.2s;
flex-shrink: 0;
}
.chat__head-back svg { transform: rotate(180deg); width: 16px; height: 16px; stroke-width: 2.2; }
.chat__head-back:hover { background: var(--brand-soft); color: var(--brand); }
@media (max-width: 720px) { .chat__head-back { display: inline-flex; } }
.chat-empty {
margin: auto;
display: flex; flex-direction: column; align-items: center; gap: 8px;
text-align: center; padding: 32px 20px;
color: var(--text-secondary);
}
.chat-empty__ico {
display: inline-flex; align-items: center; justify-content: center;
width: 64px; height: 64px;
background: var(--brand-soft);
color: var(--brand);
border-radius: 18px;
margin-bottom: 8px;
}
.chat-empty strong { font-size: 14.5px; color: var(--text); font-weight: 600; }
.chat-empty span { font-size: 13px; }
.chat { display: grid; grid-template-columns: 280px 1fr; gap: 16px; padding: 0 0 64px; min-height: 60vh; }
@media (max-width: 880px) { .chat { grid-template-columns: 1fr; } }
.chat__side { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px; height: max-content; align-self: start; }
.chat__room { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); display: flex; flex-direction: column; min-height: 60vh; }
.chat__head { padding: 16px 20px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 14.5px; }
.chat__messages { flex: 1; padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; max-height: 60vh; }
.chat-msg { max-width: 75%; padding: 10px 14px; border-radius: var(--r); background: var(--surface-alt); font-size: 14px; line-height: 1.5; color: var(--text); }
.chat-msg--mine { align-self: flex-end; background: var(--brand); color: #fff; }
.chat-msg .t { font-size: 11px; opacity: 0.7; margin-top: 4px; font-family: var(--font-mono); }
.chat__compose { padding: 14px; border-top: 1px solid var(--border); display: flex; gap: 8px; }
.chat__compose input { flex: 1; }
.chat__side a {
display: flex; align-items: center; gap: 10px; justify-content: space-between;
padding: 10px 12px; border-radius: var(--r);
color: var(--text-secondary); font-size: 14px;
}
.chat__side a:hover { background: var(--surface-alt); color: var(--text); }
.chat__side a.is-active { background: var(--brand); color: #fff; }
.chat__side .badge { background: var(--danger); color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 999px; line-height: 1.5; font-family: var(--font-mono); font-weight: 600; }
/* ─── Marketplace ─── */
.market-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
@media (max-width: 1024px) { .market-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .market-grid { grid-template-columns: 1fr; } }
.listing {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
padding: 20px; transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.listing:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--sh-2); }
.listing__title { font-weight: 600; margin-bottom: 6px; }
.listing__price { font: 800 1.5rem var(--font-mono); letter-spacing: -0.02em; color: var(--brand); margin: 12px 0 4px; }
/* ─── Notifications list ── */
.notif-list { list-style: none; padding: 0; margin: 0; }
.notif-item { padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 10px; background: var(--surface); }
.notif-item--unread { border-left: 3px solid var(--brand); background: var(--brand-soft); }
.notif-item__title { font-weight: 600; margin-bottom: 4px; color: var(--text); }
.notif-item__body { font-size: 14px; color: var(--text-secondary); }
.notif-item__date { font-size: 12px; margin-top: 8px; color: var(--text-secondary); font-family: var(--font-mono); }
.simple-form { max-width: 560px; }
/* ─── Этап 2: Деталь сделки + маркет + кабинет ─────────────────────────── */
.kicker { font: 600 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--brand); display: inline-block; }
.breadcrumbs { font-size: 13px; color: var(--text-secondary); margin: 24px 0 16px; }
.breadcrumbs a { color: var(--text-secondary); }
.breadcrumbs a:hover { color: var(--brand); }
.breadcrumbs span { color: var(--text); }
.flex-between { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.text-center { text-align: center; }
.text-primary { color: var(--brand); }
.pulse { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
/* ─── Деталь сделки ─── */
.deal-detail { padding: 0 0 64px; }
.deal-detail__layout { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; }
@media (max-width: 960px) { .deal-detail__layout { grid-template-columns: 1fr; } }
.deal-detail__main { min-width: 0; }
.deal-detail__head { margin-bottom: 28px; }
.deal-detail__head h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -0.025em; margin: 12px 0 8px; }
.deal-detail__badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.deal-detail__type { color: var(--text-secondary); font-size: 15px; }
.deal-detail__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.badge-vat, .badge-urgent, .badge-status, .badge-tag {
display: inline-flex; align-items: center; gap: 4px;
font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill);
border: 1px solid transparent;
}
.badge-vat { background: var(--warning-soft); color: var(--warning); }
.badge-urgent { background: var(--danger-soft); color: var(--danger); }
.badge-tag { background: var(--surface-alt); color: var(--text-secondary); }
.badge-status--active, .badge-status--paid, .badge-status--confirmed, .badge-status--listed,
.badge-status--approved, .badge-status--completed, .badge-status--labor_active { background: var(--success-soft); color: var(--success); }
.badge-status--reserved, .badge-status--awaiting, .badge-status--submitted,
.badge-status--under_review, .badge-status--pending, .badge-status--labor_pending,
.badge-status--in_progress, .badge-status--created { background: var(--brand-soft); color: var(--brand); }
.badge-status--draft, .badge-status--moderation { background: var(--warning-soft); color: var(--warning); }
.badge-status--cancelled, .badge-status--rejected, .badge-status--failed { background: var(--danger-soft); color: var(--danger); }
.badge-status--closed, .badge-status--sold { background: var(--surface-alt); color: var(--text-secondary); }
.deal-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px 24px; margin-bottom: 18px; }
.deal-block h2 { font-size: 1.15rem; margin: 0 0 14px; letter-spacing: -0.015em; }
.deal-content { color: var(--text); font-size: 15px; line-height: 1.65; }
.deal-content--risks { color: var(--text-secondary); }
.deal-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 720px) { .deal-stats { grid-template-columns: 1fr 1fr; } }
.deal-stat { padding: 14px 16px; background: var(--surface-alt); border-radius: var(--r); }
.deal-stat__label { font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.deal-stat__value { font: 700 1.4rem var(--font-mono); letter-spacing: -0.02em; }
.deal-stat__sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.deal-progress__bar {
height: 10px; background: var(--surface-alt); border-radius: var(--r-pill); overflow: hidden; margin-bottom: 12px;
}
.deal-progress__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-soft)); border-radius: inherit; transition: width 0.4s var(--t); }
.deal-progress__legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; font-size: 13px; }
.deal-progress__legend > div { display: flex; flex-direction: column; gap: 2px; }
.deal-progress__legend strong { font: 700 1.05rem var(--font-mono); }
.deal-progress__legend .muted { color: var(--text-secondary); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; }
/* ─── Боковая панель покупки ─── */
.deal-detail__side { position: sticky; top: calc(var(--header-h) + 16px); }
@media (max-width: 960px) { .deal-detail__side { position: static; } }
.deal-purchase { padding: 22px 22px 24px; }
.deal-purchase h3 { font-size: 1.05rem; margin: 0 0 14px; }
.purchase-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; padding: 6px 0; }
.purchase-pick { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; }
.purchase-pick input { max-width: 90px; text-align: center; font: 700 1.1rem var(--font-mono); }
.purchase-summary { background: var(--surface-alt); border-radius: var(--r); padding: 12px 14px; margin: 12px 0 4px; }
.deal-purchase__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.deal-purchase__icon-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 10px; border-radius: var(--r);
font-size: 13px; color: var(--text-secondary); background: transparent;
border: 1px solid var(--border); cursor: pointer; transition: all var(--t);
}
.deal-purchase__icon-btn:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.deal-purchase__icon-btn.is-active { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
.deal-labor { background: var(--brand-soft); border-radius: var(--r); padding: 14px 16px; margin-top: 16px; }
.deal-labor h4 { font-size: 14px; margin: 0 0 6px; color: var(--brand); display: flex; align-items: center; gap: 6px; }
.deal-labor p { font-size: 13px; margin-bottom: 10px; }
/* ─── Модалка покупки ─── */
.modal { padding: 0; border: 0; border-radius: var(--r-lg); background: transparent; box-shadow: 0 24px 80px rgba(11, 18, 32, 0.35); max-width: 560px; width: 92vw; }
.modal::backdrop { background: rgba(11, 18, 32, 0.55); backdrop-filter: blur(4px); }
.modal__panel { background: var(--surface); border-radius: var(--r-lg); padding: 28px 32px; }
/* ─── Маркет долей (для marketplace/shares.html) ─── */
.marketplace-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
@media (max-width: 1024px) { .marketplace-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .marketplace-grid { grid-template-columns: 1fr; } }
.listing-card {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
padding: 20px; transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.listing-card:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--sh-2); }
.listing-card h3 { font-size: 1.05rem; margin: 0 0 6px; letter-spacing: -0.01em; }
.listing-card__price { font: 800 1.5rem var(--font-mono); letter-spacing: -0.02em; color: var(--brand); margin: 12px 0 4px; }
/* ─── Cabinet sections ─── */
.cabinet-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px 22px; }
.cabinet-block h2 { font-size: 1.05rem; margin: 0 0 8px; letter-spacing: -0.01em; }
/* ─── Card helper ─── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
/* ═══ Toast notifications (premium) ════════════════════════════════════ */
.toast-host {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 9999;
display: flex;
flex-direction: column-reverse;
gap: 14px;
pointer-events: none;
max-width: calc(100vw - 48px);
}
@media (max-width: 560px) {
.toast-host { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}
.toast {
pointer-events: auto;
width: 420px;
max-width: 100%;
position: relative;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(228, 232, 238, 0.9);
border-radius: 18px;
box-shadow:
0 24px 60px -18px rgba(11, 18, 32, 0.32),
0 8px 20px -8px rgba(16, 70, 187, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
overflow: hidden;
isolation: isolate;
opacity: 0;
transform: translate3d(28px, 0, 0) scale(0.96);
transition:
opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.3s ease;
}
.toast::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(420px 200px at 0% 0%, rgba(74, 120, 240, 0.10), transparent 65%);
opacity: 0.85;
}
.toast.is-visible {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
.toast.is-leaving {
opacity: 0;
transform: translate3d(28px, 0, 0) scale(0.96);
}
.toast:hover {
box-shadow:
0 32px 70px -18px rgba(11, 18, 32, 0.38),
0 10px 24px -8px rgba(16, 70, 187, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* Левая акцент-полоса */
.toast__accent {
position: absolute;
left: 0; top: 14px; bottom: 14px;
width: 3px;
border-radius: 0 3px 3px 0;
background: linear-gradient(180deg, var(--brand), #4a78f0);
}
.toast--success .toast__accent { background: linear-gradient(180deg, #1f9d55, #2cb86b); }
.toast--danger .toast__accent { background: linear-gradient(180deg, #c92c2c, #e35858); }
.toast--muted .toast__accent { background: linear-gradient(180deg, #c0c5cc, #8e9399); }
.toast__body {
position: relative;
display: grid;
grid-template-columns: 44px 1fr;
gap: 14px;
padding: 16px 44px 14px 20px;
align-items: start;
}
.toast__icon {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px;
flex-shrink: 0;
border-radius: 14px;
background: linear-gradient(135deg, var(--brand) 0%, #4a78f0 100%);
color: #fff;
box-shadow:
0 10px 22px -6px rgba(16, 70, 187, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.toast--success .toast__icon {
background: linear-gradient(135deg, #1f9d55 0%, #2cb86b 100%);
box-shadow: 0 10px 22px -6px rgba(31, 157, 85, 0.5), inset 0 1px 0 rgba(255,255,255,0.25);
}
.toast--danger .toast__icon {
background: linear-gradient(135deg, #c92c2c 0%, #e35858 100%);
box-shadow: 0 10px 22px -6px rgba(201, 44, 44, 0.5), inset 0 1px 0 rgba(255,255,255,0.25);
}
.toast--muted .toast__icon {
background: linear-gradient(135deg, #c0c5cc 0%, #8e9399 100%);
color: #fff;
box-shadow: 0 8px 18px -6px rgba(142, 147, 153, 0.4);
}
.toast__icon svg { width: 22px; height: 22px; }
.toast__content {
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.toast__title {
font-size: 15px;
font-weight: 700;
letter-spacing: -0.012em;
color: var(--text);
line-height: 1.3;
word-wrap: break-word;
}
.toast__text {
font-size: 13.5px;
color: var(--text-secondary);
line-height: 1.5;
word-wrap: break-word;
}
.toast__actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 12px;
flex-wrap: wrap;
}
.toast__cta {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 16px;
background: linear-gradient(135deg, var(--brand) 0%, #4a78f0 100%);
color: #fff !important;
font: 600 13px/1 "Inter", -apple-system, sans-serif;
letter-spacing: -0.005em;
border: 0;
border-radius: 10px;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
box-shadow: 0 8px 18px -6px rgba(16, 70, 187, 0.55);
transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}
.toast__cta:hover {
transform: translateY(-1px);
box-shadow: 0 12px 24px -6px rgba(16, 70, 187, 0.65);
filter: brightness(1.05);
}
.toast__cta:active { transform: translateY(0); }
.toast__cta svg { width: 14px; height: 14px; stroke-width: 2.2; }
.toast__timer {
display: inline-flex;
align-items: center;
gap: 6px;
font: 600 11.5px/1 "JetBrains Mono", monospace;
color: var(--text-secondary);
letter-spacing: 0.05em;
padding: 6px 10px;
background: var(--surface-alt);
border-radius: 999px;
white-space: nowrap;
}
.toast__timer-dot {
width: 6px; height: 6px;
background: var(--brand);
border-radius: 50%;
animation: toastPulse 1s ease-in-out infinite;
flex-shrink: 0;
}
.toast--success .toast__timer-dot { background: #2cb86b; }
.toast--danger .toast__timer-dot { background: #e35858; }
.toast--muted .toast__timer-dot { background: #8e9399; }
@keyframes toastPulse {
0%, 100% { opacity: 0.4; transform: scale(0.7); }
50% { opacity: 1; transform: scale(1.15); }
}
.toast__close {
position: absolute;
top: 10px; right: 10px;
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
border: 0;
border-radius: 8px;
color: var(--text-secondary);
cursor: pointer;
transition: background 0.2s, color 0.2s, transform 0.2s;
z-index: 2;
}
.toast__close:hover {
background: var(--surface-alt);
color: var(--text);
transform: rotate(90deg);
}
.toast__close svg { width: 14px; height: 14px; stroke-width: 2.4; }
.toast__progress {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
background: rgba(16, 70, 187, 0.08);
overflow: hidden;
}
.toast__progress-bar {
height: 100%;
width: 100%;
background: linear-gradient(90deg, var(--brand) 0%, #4a78f0 100%);
transform-origin: left center;
transform: scaleX(1);
box-shadow: 0 0 8px rgba(74, 120, 240, 0.55);
}
.toast--success .toast__progress-bar {
background: linear-gradient(90deg, #1f9d55 0%, #2cb86b 100%);
box-shadow: 0 0 8px rgba(44, 184, 107, 0.55);
}
.toast--danger .toast__progress-bar {
background: linear-gradient(90deg, #c92c2c 0%, #e35858 100%);
box-shadow: 0 0 8px rgba(227, 88, 88, 0.55);
}
.toast--muted .toast__progress-bar {
background: linear-gradient(90deg, #c0c5cc 0%, #8e9399 100%);
box-shadow: none;
}
/* Если нет CTA — таймер прижимается вправо в одиночку */
.toast--no-cta .toast__actions { justify-content: flex-end; }
@media (max-width: 560px) {
.toast { width: 100%; border-radius: 16px; }
.toast__body { padding: 14px 40px 12px 16px; gap: 12px; grid-template-columns: 40px 1fr; }
.toast__icon { width: 40px; height: 40px; border-radius: 12px; }
.toast__icon svg { width: 20px; height: 20px; }
.toast__title { font-size: 14.5px; }
.toast__text { font-size: 13px; }
.toast__actions { gap: 8px; }
.toast__cta { padding: 8px 12px; font-size: 12.5px; flex: 1; justify-content: center; }
.toast__timer { padding: 5px 9px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
.toast { transition: opacity 0.2s linear; transform: none !important; }
.toast.is-visible, .toast.is-leaving { transform: none !important; }
.toast__timer-dot { animation: none; opacity: 0.6; }
}
/* Collapsible block (риски) */
.deal-block--collapsible[hidden] { display: none; }
.risks-toggle { display: inline-flex; align-items: center; gap: 8px; }
.risks-toggle .ri-show, .risks-toggle .ri-hide { display: none; }
.risks-toggle[aria-expanded="false"] .ri-show { display: inline; }
.risks-toggle[aria-expanded="true"] .ri-hide { display: inline; }
/* DaData lock-fields */
.dadata-badge {
display: inline-flex; align-items: center; gap: 4px;
font: 600 10px/1 "JetBrains Mono", monospace;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--brand);
background: var(--brand-soft);
padding: 4px 8px;
border-radius: 999px;
margin-left: 6px;
vertical-align: middle;
}
.dadata-badge svg { width: 11px; height: 11px; stroke-width: 2; }
input[readonly], textarea[readonly], [data-locked="1"] {
background-color: var(--surface-alt) !important;
color: var(--text) !important;
cursor: not-allowed;
border-color: var(--border) !important;
}
input[readonly]:focus, textarea[readonly]:focus {
outline: none;
box-shadow: none !important;
border-color: var(--border) !important;
}
[data-inn-status] {
display: inline-block; margin-top: 6px; font-size: 12.5px; line-height: 1.4;
color: var(--text-secondary);
}
[data-inn-status].is-loading { color: var(--brand); }
[data-inn-status].is-ok { color: var(--success); font-weight: 600; }
[data-inn-status].is-err { color: var(--danger); }
button[type=submit]:disabled {
opacity: 0.55;
cursor: not-allowed;
filter: grayscale(0.3);
}
/* ─── Главная: блок «Активные сделки» + FOMO для анонимов ─────────────── */
.block--deals {
padding: 80px 0 88px;
background:
radial-gradient(1200px 600px at 88% -10%, rgba(74, 120, 240, 0.10), transparent 60%),
radial-gradient(900px 500px at -10% 110%, rgba(16, 70, 187, 0.08), transparent 55%),
var(--surface-alt);
}
.home-deals { position: relative; margin-top: 28px; }
.home-deals__grid {
display: grid; gap: 16px;
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px) { .home-deals__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .home-deals__grid { grid-template-columns: 1fr; } }
.home-deals--locked .home-deals__grid {
filter: blur(4px) saturate(0.92);
-webkit-filter: blur(4px) saturate(0.92);
pointer-events: none;
user-select: none;
opacity: 0.85;
}
.home-deals--locked .home-deals__grid a,
.home-deals--locked .home-deals__grid button { pointer-events: none; }
/* На мобильных карточки прячем за overlay полностью — не отвлекают */
@media (max-width: 640px) {
.home-deals--locked .home-deals__grid {
min-height: 320px;
filter: blur(2px) saturate(0.9);
}
}
.home-deals__overlay {
position: absolute; inset: -8px;
display: flex; align-items: center; justify-content: center;
pointer-events: none;
}
.home-deals__cta {
pointer-events: auto;
max-width: 520px;
padding: 38px 40px 32px;
background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow:
0 30px 80px -20px rgba(16, 70, 187, 0.28),
0 12px 30px -8px rgba(11, 18, 32, 0.12);
text-align: center;
position: relative;
overflow: hidden;
}
.home-deals__cta::before {
content: "";
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(280px 180px at 50% -40px, rgba(74, 120, 240, 0.18), transparent 70%);
}
.home-deals__cta > * { position: relative; }
.home-deals__cta-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 56px; height: 56px;
border-radius: 16px;
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-hover) 100%);
color: #fff;
margin-bottom: 14px;
box-shadow: 0 10px 24px -4px rgba(16, 70, 187, 0.45);
}
.home-deals__cta-icon svg { width: 26px; height: 26px; stroke-width: 1.8; }
.home-deals__cta-badge {
display: inline-flex; align-items: center; gap: 6px;
font: 600 11px/1 var(--font-mono);
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--brand);
background: var(--brand-soft);
border-radius: var(--r-pill);
padding: 6px 12px;
margin-bottom: 14px;
}
.home-deals__cta h3 {
font-size: clamp(1.25rem, 2vw, 1.55rem);
letter-spacing: -0.02em;
margin: 0 0 12px;
line-height: 1.25;
color: var(--text);
}
.home-deals__cta p {
color: var(--text-secondary);
font-size: 14.5px;
line-height: 1.55;
margin-bottom: 22px;
}
.home-deals__actions {
display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
margin-bottom: 22px;
}
.home-deals__cta-list {
list-style: none; padding: 18px 0 0;
margin: 0;
border-top: 1px solid var(--border);
display: flex; gap: 18px; flex-wrap: wrap; justify-content: center;
font-size: 13px; color: var(--text-secondary);
}
.home-deals__cta-list li {
display: inline-flex; align-items: center; gap: 6px;
}
.home-deals__cta-list svg { color: var(--success); width: 14px; height: 14px; stroke-width: 2.4; }
@media (max-width: 520px) {
.home-deals__cta { padding: 28px 24px 22px; }
.home-deals__cta h3 { font-size: 1.15rem; }
.home-deals__cta-list { gap: 10px 14px; font-size: 12.5px; }
.home-deals__actions .btn { flex: 1 1 auto; }
}