/* =========================================================
LOCAL FONT SYSTEM - ONLY LORENZO SANS FAMILY
Используются только локальные файлы из assets/fonts:
- Lorenzo Sans Regular.ttf - основной текст и подзаголовки
- Lorenzo Sans Medium.ttf - H1 и H2
- Lorenzo Sans Bold.ttf / Lorenzo-Sans-Bold.ttf - меню, кнопки, капсулы, акценты
Expressway Free и внешние Google Fonts отключены.
========================================================= */
@font-face {
font-family: "Lorenzo Sans";
src: url("/assets/fonts/lorenzo-sans-regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Lorenzo Sans";
src: url("/assets/fonts/lorenzo-sans-medium.ttf") format("truetype");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Lorenzo Sans";
src: url("/assets/fonts/lorenzo-sans-bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Lorenzo Sans";
src: url("/assets/fonts/lorenzo-sans-extra-bold.ttf") format("truetype");
font-weight: 800 900;
font-style: normal;
font-display: swap;
}
:root {
--font-main: "Lorenzo Sans";
--font-heading: "Lorenzo Sans";
--font-text: "Lorenzo Sans";
--font-ui: "Lorenzo Sans";
}
body.landing-page {
font-family: var(--font-text) !important;
}
body.landing-page,
body.landing-page p,
body.landing-page a,
body.landing-page button,
body.landing-page input,
body.landing-page textarea,
body.landing-page select,
body.landing-page li,
body.landing-page span,
body.landing-page small,
body.landing-page label,
body.landing-page strong,
body.landing-page b,
body.landing-page .nav,
body.landing-page .header-button,
body.landing-page .button,
body.landing-page .hero-text,
body.landing-page .section-subtitle,
body.landing-page .system-ten__heading p,
body.landing-page .scale-v2__subtitle,
body.landing-page .pipeline-ref__subtitle,
body.landing-page .flow-choice__control-head p,
body.landing-page .rubrics-cabinet__subtitle,
body.landing-page .funnel-route__subtitle,
body.landing-page .analytics-final__subtitle,
body.landing-page .project-fit__subtitle,
body.landing-page .next-step-contact__copy p,
body .footer {
font-family: var(--font-text) !important;
}
body.landing-page h1,
body.landing-page h2,
body.landing-page h3,
body.landing-page h4,
body.landing-page h5,
body.landing-page h6,
body.landing-page .hero-copy h1,
body.landing-page .hero-copy h1 span,
body.landing-page .hero-copy h1 strong,
body.landing-page .section-title,
body.landing-page .section-title__line,
body.landing-page .section-title__accent,
body.landing-page .section-heading h2,
body.landing-page .system-ten__heading h2,
body.landing-page .scale-v2__title,
body.landing-page .scale-v2__title-line,
body.landing-page .pipeline-ref__title,
body.landing-page .flow-choice__header h2,
body.landing-page .flow-choice__panel > h3,
body.landing-page .rubrics-cabinet__header h2,
body.landing-page .funnel-route__title,
body.landing-page .analytics-final__title,
body.landing-page .project-fit__header h2,
body.landing-page .next-step-contact__copy h2,
body.landing-page .section-cap,
body.landing-page .system-ten__badge,
body.landing-page .scale-v2__top-badge,
body.landing-page .pipeline-ref__badge,
body.landing-page .rubrics-cabinet__badge,
body.landing-page .funnel-route__badge,
body.landing-page .analytics-final__badge,
body.landing-page .project-fit__badge,
body.landing-page .next-step-contact__badge {
font-family: var(--font-heading) !important;
}
/* Единая центровка капсул, заголовков и подзаголовков всех экранов */
body.landing-page .section-cap,
body.landing-page .system-ten__badge,
body.landing-page .scale-v2__top-badge,
body.landing-page .pipeline-ref__badge,
body.landing-page .rubrics-cabinet__badge,
body.landing-page .funnel-route__badge,
body.landing-page .analytics-final__badge,
body.landing-page .project-fit__badge,
body .next-step-contact__badge {
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
justify-content: center !important;
}
body .section-heading,
body .system-ten__heading,
body .scale-v2__container,
body .pipeline-ref__inner,
body .flow-choice__header,
body .rubrics-cabinet__header,
body .funnel-route__header,
body .analytics-final__header,
body .project-fit__header,
body .next-step-contact__copy {
text-align: center !important;
}
:root{
--bg:#fbf8f0;
--cream:#fffdf8;
--text:#07183a;
--text-soft:#26375d;
--muted:#53617d;
--aqua:#2fc6c9;
--aqua-2:#9ee7e3;
--teal:#1baaa9;
--gold:#dfae45;
--gold-soft:#f1d78d;
--line:rgba(7,24,58,.09);
--glass:rgba(255,255,255,.78);
--glass-strong:rgba(255,255,255,.92);
--shadow:0 28px 80px rgba(17,33,67,.10);
--shadow-soft:0 18px 50px rgba(17,33,67,.08);
--container:1360px;
--content:calc(100% - 56px);
--radius:34px;
--ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.5}
a{text-decoration:none;color:inherit} img{display:block;max-width:100%}
.page-bg{position:fixed;inset:0;z-index:-10;background:radial-gradient(circle at 12% 92%,rgba(47,198,201,.18),transparent 30%),radial-gradient(circle at 86% 8%,rgba(241,215,141,.18),transparent 28%),linear-gradient(135deg,#fffdf8 0%,#fbf8f0 48%,#eefafa 100%)}
.glow{position:absolute;border-radius:999px;filter:blur(34px);opacity:.45;animation:float 13s ease-in-out infinite}.glow-a{width:360px;height:360px;left:-110px;bottom:-80px;background:#54d7d6}.glow-b{width:340px;height:340px;right:160px;top:120px;background:#f0c85d;animation-delay:-5s}.glow-c{width:420px;height:420px;right:-140px;top:260px;background:#b7edf0;animation-delay:-8s}@keyframes float{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(18px,-20px,0) scale(1.05)}}
.site-header{width:min(var(--container),var(--content));margin:14px auto 0;height:68px;padding:0 26px;border-radius:20px;background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.86);box-shadow:var(--shadow-soft);backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:space-between;position:sticky;top:18px;z-index:50}.logo{display:flex;align-items:center;gap:14px;font-weight:700;font-size:18px;letter-spacing:-.02em}.logo-mark{width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 28% 28%,#fff 0 13%,transparent 14%),linear-gradient(135deg,#16c6c8 0%,#84ded8 46%,#f2d375 100%);box-shadow:0 12px 30px rgba(47,198,201,.25)}.nav{display:flex;align-items:center;gap:38px;font-weight:600;color:#0b1838;font-size:15px}.nav a{transition:.22s}.nav a:hover{color:var(--teal)}.header-button{height:48px;min-width:146px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:#c5eeef;color:#07183a;border:1px solid rgba(47,198,201,.22);font-weight:600;font-size:16px;box-shadow:0 12px 28px rgba(47,198,201,.12);transition:.25s}.header-button:hover{transform:translateY(-2px);background:#aee8e9}
.hero-shell{width:min(var(--container),var(--content));height:min(680px,calc(100svh - 108px));min-height:660px;margin:16px auto 0;border-radius:34px;position:relative;overflow:hidden;display:grid;grid-template-columns:41% 59%;align-items:center;padding:44px 52px;background:radial-gradient(circle at 12% 88%,rgba(47,198,201,.18),transparent 24%),radial-gradient(circle at 72% 20%,rgba(241,215,141,.18),transparent 22%),linear-gradient(135deg,rgba(255,255,255,.94),rgba(255,253,248,.86));box-shadow:var(--shadow)}
.hero-shell:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 74% 52%,rgba(101,222,218,.25),transparent 30%),radial-gradient(circle at 38% 92%,rgba(47,198,201,.12),transparent 22%);pointer-events:none}.hero-copy{position:relative;z-index:3;max-width:500px}.eyebrow{color:#c18431;font-size:13px;line-height:1.32;text-transform:uppercase;font-weight:700;letter-spacing:.045em;margin-bottom:18px}.eyebrow.mini{font-size:12px;letter-spacing:.12em;margin-bottom:12px}.hero-copy h1{line-height:.98;letter-spacing:-.025em;margin:0;color:var(--text)}.hero-copy h1 span{display:block;font-size:clamp(44px,4.15vw,64px);font-weight:700}.hero-copy h1 strong{display:block;margin-top:6px;font-size:clamp(44px,4.15vw,64px);font-weight:700;color:var(--aqua);text-shadow:0 0 18px rgba(47,198,201,.10)}.hero-text{max-width:500px;margin-top:20px;color:#142851;font-size:16px;line-height:1.55;font-weight:400}.hero-actions{display:flex;align-items:center;gap:18px;margin-top:28px}.button{min-height:56px;border-radius:15px;padding:0 28px;display:inline-flex;align-items:center;gap:4px;justify-content:center;font-weight:600;font-size:16px;border:1px solid rgba(255,255,255,.85);transition:.25s;position:relative;white-space:nowrap}.button:hover{transform:translateY(-2px)}.button i{font-style:normal;font-size:28px;line-height:1}.button-primary{background:linear-gradient(135deg,#23c3c8,#4fd5d0);color:#fff;box-shadow:0 18px 42px rgba(47,198,201,.25),inset 0 1px 0 rgba(255,255,255,.55)}.button-secondary{background:rgba(255,255,255,.72);color:#07183a;border-color:rgba(7,24,58,.06);box-shadow:0 14px 34px rgba(17,33,67,.07)}.button.small{min-height:52px;padding:0 22px;font-size:14px}.pulse-button:before,.pulse-button:after{content:"";position:absolute;inset:-12px;border-radius:22px;border:1px solid rgba(47,198,201,.34);animation:pulseRing 2.2s ease-out infinite;pointer-events:none}.pulse-button:after{inset:-22px;animation-delay:.55s;opacity:.55}@keyframes pulseRing{0%{transform:scale(.96);opacity:.72}80%,100%{transform:scale(1.12);opacity:0}}
.hero-visual{position:relative;z-index:2;min-height:100%;align-self:stretch}.hero-image{position:absolute;right:-12px;top:10px;width:100%;height:calc(100% - 78px);object-fit:contain;object-position:center right;filter:drop-shadow(0 22px 38px rgba(25,61,79,.10))}.live-card{position:absolute;right:0;bottom:14px;width:min(540px,86%);min-height:140px;border-radius:22px;background:rgba(255,255,255,.90);box-shadow:0 28px 70px rgba(18,54,72,.14);border:1px solid rgba(255,255,255,.85);display:grid;grid-template-columns:42% 1px 1fr;gap:20px;padding:20px 24px;backdrop-filter:blur(18px);animation:cardFloat 5s ease-in-out infinite}.live-card:before{content:"";position:absolute;inset:-4px;border-radius:28px;background:linear-gradient(135deg,rgba(47,198,201,.18),rgba(223,174,69,.14));z-index:-1;filter:blur(16px);opacity:.8}@keyframes cardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}.live-status{display:flex;align-items:center;gap:9px;font-weight:700;color:#0e2046;font-size:14px}.status-ring{width:20px;height:20px;border-radius:50%;border:3px solid #19cbbd;position:relative}.status-ring:after{content:"";position:absolute;inset:3px;border-radius:50%;background:#19cbbd}.status-dot{width:7px;height:7px;border-radius:50%;background:#32ca87;box-shadow:0 0 0 0 rgba(50,202,135,.45);animation:dotPulse 1.7s ease-in-out infinite}@keyframes dotPulse{50%{box-shadow:0 0 0 10px rgba(50,202,135,0)}}.live-number{margin-top:12px;display:flex;align-items:flex-end;gap:10px;color:#07183a}.live-number strong{font-size:34px;line-height:.85;letter-spacing:-.06em;animation:numberPop 2.8s ease-in-out infinite}.live-number span{font-size:19px;color:#26375d}@keyframes numberPop{0%,100%{transform:scale(1)}45%{transform:scale(1.035)}55%{transform:scale(1)}}.live-bars{height:38px;margin-top:12px;display:flex;align-items:flex-end;gap:7px}.live-bars span{width:8px;border-radius:6px;background:linear-gradient(180deg,#1fc6c8,#f0c455);animation:barDance 1.6s ease-in-out infinite;transform-origin:bottom}.live-bars span:nth-child(2n){animation-delay:.18s}.live-bars span:nth-child(3n){animation-delay:.34s}.live-bars span:nth-child(5n){animation-delay:.52s}@keyframes barDance{0%,100%{transform:scaleY(.78);opacity:.82}50%{transform:scaleY(1.12);opacity:1}}.live-divider{background:rgba(7,24,58,.10)}.route-box p{font-weight:700;color:#26375d;margin-bottom:10px}.route-icons{display:flex;align-items:center;gap:9px;margin-bottom:8px}.route-icons span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#7ddbd5;color:#fff;font-weight:700}.route-icons span:nth-of-type(3),.route-icons span:nth-of-type(4){background:#e6b54b}.route-icons i{font-style:normal;color:#9aa5b9}.route-box strong{font-size:12.5px;color:#26375d;font-weight:500}
.section{width:min(1180px,var(--content));margin:120px auto 0}.section-heading{max-width:760px;margin-bottom:36px}.section-heading.center{text-align:center;margin-left:auto;margin-right:auto}.section-heading h2,.split-content h2,.media-text h2,.cta-card h2{font-size:clamp(36px,4vw,58px);line-height:1.02;letter-spacing:-.045em;font-weight:800;color:#07183a}.section-heading p:not(.eyebrow),.split-content p,.media-text p,.cta-card p{margin-top:18px;color:var(--muted);font-size:18px;line-height:1.65}.glass{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.85);box-shadow:var(--shadow-soft);backdrop-filter:blur(18px)}.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}.reveal.is-visible{opacity:1;transform:none}.reveal-d1{transition-delay:.08s}.reveal-d2{transition-delay:.16s}.reveal-d3{transition-delay:.24s}.reveal-d4{transition-delay:.32s}.bento-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:18px}.bento-card{min-height:210px;padding:28px;border-radius:28px}.bento-large{grid-row:span 2;min-height:438px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(202,245,244,.35))}.card-label{color:#c18431;text-transform:uppercase;font-size:12px;font-weight:700;letter-spacing:.12em;margin-bottom:12px}.bento-card h3{font-size:34px;line-height:1.08;letter-spacing:-.04em}.bento-card p{color:var(--muted);margin-top:10px}.metric-number{display:block;font-size:58px;line-height:1;font-weight:800;color:#22bfc4;margin-bottom:12px}.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.audience-card{min-height:340px;padding:30px;border-radius:28px;display:flex;flex-direction:column}.icon-circle{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin-bottom:24px;background:linear-gradient(135deg,#b9efed,#f3dc97);color:#07183a;font-weight:800}.audience-card h3{font-size:24px;line-height:1.15;letter-spacing:-.03em}.audience-card p{margin-top:14px;color:var(--muted);font-size:15.5px}.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:26px}.tag-row span{padding:7px 12px;border-radius:999px;background:#fff;color:#53617d;font-size:12px}.split-section{display:grid;grid-template-columns:.88fr 1.12fr;gap:42px;align-items:start}.split-content{position:sticky;top:130px}.text-link{display:inline-flex;margin-top:26px;color:#009fa6;font-weight:700}.timeline{padding:24px;border-radius:28px}.timeline-item{display:grid;grid-template-columns:50px 1fr;gap:16px;padding:19px 0}.timeline-item:not(:last-child){border-bottom:1px solid var(--line)}.timeline-item span{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#1fc6c8,#e6b54b);color:#fff;font-weight:800;font-size:12px}.timeline-item h4{font-size:19px}.timeline-item p{margin-top:6px;color:var(--muted);font-size:14.5px}.media-card{min-height:520px;border-radius:36px;padding:28px;display:grid;grid-template-columns:1.05fr .95fr;gap:30px}.media-placeholder{border-radius:28px;background:linear-gradient(135deg,rgba(47,198,201,.16),rgba(241,215,141,.18));display:grid;place-items:center;color:#3f6372;font-weight:700;border:1px dashed rgba(47,198,201,.30)}.media-text{align-self:center;padding:32px}.rubric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.rubric-card{min-height:210px;padding:22px;border-radius:22px;background:rgba(255,255,255,.70);border:1px solid rgba(255,255,255,.88);box-shadow:0 16px 40px rgba(17,33,67,.06)}.rubric-card span{display:inline-flex;color:#d2a145;font-weight:800;margin-bottom:24px}.rubric-card h3{font-size:18px;line-height:1.15}.rubric-card p{margin-top:10px;color:var(--muted);font-size:14px}.dashboard-section{width:min(1180px,var(--content));margin:120px auto 0;padding:76px 0;border-radius:38px;background:linear-gradient(135deg,#1aa5a4,#72ddd3);color:#fff;box-shadow:0 32px 90px rgba(26,165,164,.22)}.dashboard-section .section-heading h2,.dashboard-section .section-heading p{color:#fff}.dashboard-grid{width:min(1060px,calc(100% - 36px));margin:40px auto 0;display:grid;grid-template-columns:1.3fr .7fr .7fr;gap:16px}.glass-dark{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(18px)}.dashboard-card{min-height:210px;padding:24px;border-radius:28px;color:#fff}.dashboard-card.large{grid-column:span 2}.dashboard-card-header{display:flex;justify-content:space-between;color:rgba(255,255,255,.75);font-size:13px}.pipeline{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:34px}.pipeline div{min-height:112px;padding:16px;border-radius:18px;background:rgba(255,255,255,.12)}.pipeline strong{display:block;font-size:36px}.pipeline span{font-size:13px;color:rgba(255,255,255,.75)}.dashboard-card>p{color:rgba(255,255,255,.75)}.dashboard-card>strong{display:block;margin-top:22px;font-size:30px}.dashboard-card>span{color:rgba(255,255,255,.75)}.ai-card{grid-column:span 3}.ai-card h3{max-width:780px;margin-top:20px;font-size:clamp(28px,3vw,44px);line-height:1.06}.ai-card a{display:inline-flex;margin-top:22px;color:#fff;font-weight:700}.cta-section{width:min(1180px,var(--content));margin:110px auto 0}.cta-card{min-height:380px;border-radius:36px;padding:56px;text-align:center;display:grid;place-items:center}.cta-card h2{max-width:820px}.cta-card p{max-width:680px}.center-actions{justify-content:center}.footer{width:min(1180px,var(--content));margin:56px auto 28px;padding:24px 0;border-top:1px solid var(--line);color:var(--muted);text-align:center;font-size:13px}.modal-backdrop{position:fixed;inset:0;z-index:200;background:rgba(7,24,58,.34);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;padding:24px}.modal-backdrop[hidden]{display:none}.modal-card{position:relative;width:min(640px,100%);max-height:92vh;overflow:auto;background:#fffdf8;border-radius:28px;padding:30px 26px;box-shadow:0 34px 100px rgba(7,24,58,.28)}.modal-close{position:absolute;top:14px;right:16px;width:36px;height:36px;border:none;border-radius:50%;background:rgba(7,24,58,.06);font-size:24px;cursor:pointer}.modal-header{margin-bottom:16px}.modal-header h3{font-size:25px}#fluentform{width:100%;min-height:540px;border:0;border-radius:18px}
@media(max-width:1160px){.hero-shell{grid-template-columns:1fr;height:auto;min-height:auto}.hero-copy{max-width:700px}.hero-visual{min-height:560px}.hero-image{height:520px}.live-card{right:50%;transform:translateX(50%);bottom:0}.nav{gap:24px}.cards-3,.bento-grid{grid-template-columns:1fr}.bento-large{grid-row:auto}.split-section,.media-card{grid-template-columns:1fr}.split-content{position:relative;top:auto}.rubric-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}.dashboard-card.large,.ai-card{grid-column:span 1}.pipeline{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){:root{--content:calc(100% - 24px)}.site-header{height:66px;top:10px}.logo span:last-child{display:none}.nav{display:none}.header-button{height:44px;min-width:118px}.hero-shell{padding:46px 22px;border-radius:26px}.hero-copy h1 span,.hero-copy h1 strong{font-size:44px}.hero-text{font-size:16px}.button{width:100%;min-height:58px}.hero-visual{min-height:520px}.hero-image{right:-110px;width:780px;max-width:none;height:500px;opacity:.95}.live-card{width:100%;grid-template-columns:1fr;gap:18px;padding:20px;bottom:0}.live-divider{display:none}.section,.dashboard-section,.cta-section{margin-top:82px}.section-heading h2,.split-content h2,.media-text h2,.cta-card h2{font-size:34px}.rubric-grid{grid-template-columns:1fr}.pipeline{grid-template-columns:1fr}.cta-card{padding:34px 20px}.modal-card{padding:22px 18px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}
/* ================================
FLOW SECTION - SYSTEM IN 10 SEC
================================ */
.flow-section {
position: relative;
}
.flow-loop-wrap {
position: relative;
margin-top: 38px;
padding-bottom: 92px;
}
.flow-cards {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
align-items: stretch;
gap: 14px;
}
.flow-card {
position: relative;
min-height: 190px;
padding: 28px 28px 26px;
border-radius: 28px;
background: rgba(255, 255, 255, 0.68);
border: 1px solid rgba(255, 255, 255, 0.72);
box-shadow: 0 24px 70px rgba(28, 22, 8, 0.08);
backdrop-filter: blur(22px) saturate(160%);
-webkit-backdrop-filter: blur(22px) saturate(160%);
overflow: hidden;
transition:
transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.28s ease,
background 0.24s ease;
}
.flow-card::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 18% 0%, rgba(52, 201, 196, 0.13), transparent 42%),
radial-gradient(circle at 100% 100%, rgba(201, 150, 80, 0.12), transparent 38%);
opacity: 0;
transition: opacity 0.28s ease;
pointer-events: none;
}
.flow-card:hover {
transform: translateY(-4px);
background: rgba(255, 255, 255, 0.82);
box-shadow: 0 34px 90px rgba(28, 22, 8, 0.13);
}
.flow-card:hover::before {
opacity: 1;
}
.flow-step {
position: relative;
z-index: 1;
width: 42px;
height: 42px;
margin-bottom: 26px;
border-radius: 999px;
display: grid;
place-items: center;
background:
linear-gradient(135deg, rgba(52, 201, 196, 0.95), rgba(232, 200, 122, 0.92));
color: #ffffff;
font-size: 13px;
font-weight: 800;
box-shadow:
0 10px 24px rgba(52, 201, 196, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.flow-step-check {
background: linear-gradient(135deg, #45c98c, #8de2b5);
animation: check-pulse 2.4s ease-in-out infinite;
}
@keyframes check-pulse {
0%,
100% {
box-shadow:
0 10px 24px rgba(69, 201, 140, 0.22),
0 0 0 0 rgba(69, 201, 140, 0.34),
inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
50% {
box-shadow:
0 10px 24px rgba(69, 201, 140, 0.24),
0 0 0 10px rgba(69, 201, 140, 0),
inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
}
.flow-card h3 {
position: relative;
z-index: 1;
font-size: 24px;
line-height: 1.12;
letter-spacing: -0.04em;
font-weight: 760;
color: var(--text, #131108);
}
.flow-card p {
position: relative;
z-index: 1;
margin-top: 14px;
color: var(--muted, #6b6558);
font-size: 15.5px;
line-height: 1.55;
}
.flow-card-final {
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(237, 255, 247, 0.72));
}
.flow-arrow {
align-self: center;
width: 28px;
height: 28px;
border-radius: 999px;
display: grid;
place-items: center;
color: rgba(19, 17, 8, 0.42);
font-size: 24px;
font-weight: 700;
transform: translateY(-4px);
}
/* ЦИКЛ: стрелка от последнего блока к первому */
.cycle-arrow {
position: absolute;
left: 5.5%;
right: 5.5%;
bottom: 4px;
height: 92px;
z-index: 1;
pointer-events: none;
}
.cycle-arrow svg {
width: 100%;
height: 100%;
overflow: visible;
}
.cycle-path,
.cycle-head {
fill: none;
stroke: rgba(52, 201, 196, 0.62);
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 10 13;
filter: drop-shadow(0 8px 18px rgba(52, 201, 196, 0.22));
animation: cycle-dash 2.4s linear infinite;
}
.cycle-head {
stroke: rgba(201, 150, 80, 0.72);
stroke-width: 4;
stroke-dasharray: none;
animation: cycle-head-pulse 2.4s ease-in-out infinite;
}
@keyframes cycle-dash {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: -46;
}
}
@keyframes cycle-head-pulse {
0%,
100% {
opacity: 0.72;
transform: translateX(0);
}
50% {
opacity: 1;
transform: translateX(-4px);
}
}
.cycle-dot {
position: absolute;
right: 5.5%;
top: 18px;
width: 13px;
height: 13px;
border-radius: 999px;
background: linear-gradient(135deg, #34c9c4, #e8c87a);
box-shadow: 0 0 0 0 rgba(52, 201, 196, 0.36);
animation: cycle-dot-move 4.4s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
@keyframes cycle-dot-move {
0% {
right: 5.5%;
top: 18px;
opacity: 0;
transform: scale(0.8);
}
8% {
opacity: 1;
transform: scale(1);
}
48% {
right: 50%;
top: 72px;
opacity: 1;
}
86% {
right: 94%;
top: 26px;
opacity: 1;
transform: scale(1);
}
100% {
right: 94%;
top: 26px;
opacity: 0;
transform: scale(0.8);
}
}
.cycle-label {
position: absolute;
left: 50%;
bottom: -2px;
transform: translateX(-50%);
padding: 9px 16px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.74);
border: 1px solid rgba(255, 255, 255, 0.78);
color: var(--muted, #6b6558);
font-size: 13px;
font-weight: 600;
white-space: nowrap;
box-shadow: 0 12px 34px rgba(28, 22, 8, 0.08);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
/* RESPONSIVE */
@media (max-width: 980px) {
.flow-loop-wrap {
padding-bottom: 42px;
}
.flow-cards {
grid-template-columns: 1fr;
gap: 14px;
}
.flow-arrow {
width: 100%;
height: 26px;
transform: rotate(90deg);
}
.cycle-arrow {
display: none;
}
}
@media (max-width: 640px) {
.flow-card {
min-height: auto;
padding: 24px 22px;
border-radius: 24px;
}
.flow-card h3 {
font-size: 22px;
}
.flow-card p {
font-size: 15px;
}
}
/* ===== SCALE V2 - tighter premium version ===== */
.scale-v2 {
position: relative;
padding: 72px 0 84px;
background:
radial-gradient(circle at 8% 78%, rgba(98, 231, 235, 0.18), transparent 18%),
radial-gradient(circle at 92% 14%, rgba(235, 203, 94, 0.18), transparent 18%),
linear-gradient(180deg, #f9faf8 0%, #f7f8f6 100%);
overflow: hidden;
}
.scale-v2__container {
width: min(1320px, calc(100% - 48px));
margin: 0 auto;
position: relative;
z-index: 2;
}
.scale-v2__top-badge {
margin: 0 auto 24px;
padding: 10px 18px;
width: fit-content;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 999px;
background: rgba(239, 246, 246, 0.92);
border: 1px solid rgba(198, 228, 230, 0.95);
box-shadow: 0 12px 28px rgba(41, 56, 82, 0.05);
color: #48b8c7;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.01em;
}
.scale-v2__top-badge-icon {
font-size: 14px;
line-height: 1;
color: #61c8d4;
}
.scale-v2__title {
margin: 0;
text-align: center;
font-size: clamp(46px, 5vw, 78px);
line-height: 0.94;
font-weight: 800;
letter-spacing: -0.045em;
color: #112b63;
}
.scale-v2__title-line {
display: block;
}
.scale-v2__title-line--gradient {
margin-top: 8px;
background: linear-gradient(90deg, #57d2df 8%, #74c7c4 45%, #dea43e 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
.scale-v2__subtitle {
max-width: 860px;
margin: 24px auto 0;
text-align: center;
font-size: 18px;
line-height: 1.58;
font-weight: 400;
color: #5f739d;
}
.scale-v2__grid {
margin-top: 56px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 36px;
}
.scale-v2-card {
position: relative;
border-radius: 34px;
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(233, 238, 244, 0.92);
box-shadow:
0 28px 60px rgba(31, 44, 79, 0.07),
inset 0 1px 0 rgba(255, 255, 255, 0.88);
overflow: hidden;
backdrop-filter: blur(10px);
}
.scale-v2-card__image-wrap {
position: relative;
margin: 14px 14px 0;
border-radius: 28px;
overflow: hidden;
background: linear-gradient(180deg, rgba(244, 249, 250, 0.98), rgba(240, 244, 245, 0.95));
}
.scale-v2-card__image {
display: block;
width: 100%;
height: 292px;
object-fit: cover;
border-radius: 28px;
}
.scale-v2-card__number {
position: absolute;
top: 18px;
left: 18px;
z-index: 4;
width: 74px;
height: 74px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 800;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(255, 255, 255, 0.97);
box-shadow: 0 14px 30px rgba(36, 54, 84, 0.08);
}
.scale-v2-card--cyan .scale-v2-card__number {
color: #4ec5d3;
}
.scale-v2-card--blue .scale-v2-card__number {
color: #4ebfd1;
}
.scale-v2-card--gold .scale-v2-card__number {
color: #d9a341;
}
.scale-v2-card__content {
padding: 22px 28px 28px;
}
.scale-v2-card__title {
margin: 0;
font-size: 26px;
line-height: 1.12;
font-weight: 800;
letter-spacing: -0.03em;
color: #14326f;
}
.scale-v2-card__text {
margin: 16px 0 0;
font-size: 16px;
line-height: 1.62;
font-weight: 400;
color: #6a7ea7;
}
.scale-v2-card__tags {
display: flex;
flex-wrap: nowrap;
gap: 10px;
margin-top: 22px;
}
.scale-v2-tag {
min-width: 0;
height: 42px;
padding: 0 14px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
white-space: nowrap;
font-size: 13px;
line-height: 1;
font-weight: 700;
letter-spacing: -0.01em;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.86);
}
.scale-v2-tag__icon {
width: 15px;
height: 15px;
min-width: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.scale-v2-tag__icon svg {
width: 15px;
height: 15px;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.scale-v2-tag--cyan {
background: #f1fcfd;
border: 1px solid #d1eef2;
color: #43bfd0;
}
.scale-v2-tag--blue {
background: #f1fbfd;
border: 1px solid #d2edf2;
color: #47bfd2;
}
.scale-v2-tag--gold {
background: #fff8ef;
border: 1px solid #f0dfba;
color: #d89c34;
}
.scale-v2-card--gold .scale-v2-card__image-wrap {
background: linear-gradient(180deg, #fbf8ef 0%, #f8f4ea 100%);
}
.scale-v2-card--cyan .scale-v2-card__image-wrap,
.scale-v2-card--blue .scale-v2-card__image-wrap {
background: linear-gradient(180deg, #f4f9fa 0%, #f1f5f5 100%);
}
/* subtle border tint per card */
.scale-v2-card--cyan {
border-color: rgba(211, 238, 241, 0.95);
}
.scale-v2-card--blue {
border-color: rgba(214, 235, 241, 0.95);
}
.scale-v2-card--gold {
border-color: rgba(239, 229, 210, 0.95);
}
/* responsive */
@media (max-width: 1240px) {
.scale-v2__grid {
gap: 24px;
}
.scale-v2-card__content {
padding: 20px 22px 24px;
}
.scale-v2-card__title {
font-size: 22px;
}
.scale-v2-card__text {
font-size: 15px;
}
.scale-v2-tag {
font-size: 12px;
padding: 0 12px;
}
}
@media (max-width: 1024px) {
.scale-v2 {
padding: 60px 0 72px;
}
.scale-v2__grid {
grid-template-columns: 1fr;
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
.scale-v2-card__image {
height: 320px;
}
.scale-v2-card__tags {
flex-wrap: wrap;
}
}
@media (max-width: 767px) {
.scale-v2__container {
width: min(100% - 28px, 1320px);
}
.scale-v2__top-badge {
font-size: 13px;
padding: 9px 14px;
gap: 8px;
}
.scale-v2__title {
font-size: 38px;
line-height: 0.98;
}
.scale-v2__subtitle {
margin-top: 18px;
font-size: 16px;
line-height: 1.55;
}
.scale-v2__grid {
margin-top: 36px;
}
.scale-v2-card__image {
height: auto;
aspect-ratio: 16 / 10;
}
.scale-v2-card__number {
width: 62px;
height: 62px;
font-size: 20px;
}
.scale-v2-card__title {
font-size: 22px;
}
.scale-v2-card__text {
font-size: 15px;
}
.scale-v2-card__tags {
flex-wrap: wrap;
}
}
.pipeline-ref {
position: relative;
overflow: hidden;
padding: 72px 0 90px;
background:
radial-gradient(circle at 8% 86%, rgba(80, 218, 226, 0.20), transparent 28%),
radial-gradient(circle at 94% 8%, rgba(99, 190, 238, 0.18), transparent 25%),
radial-gradient(circle at 84% 72%, rgba(232, 178, 58, 0.12), transparent 24%),
linear-gradient(180deg, #fbfdfc 0%, #f7fcfd 48%, #fbfcfa 100%);
}
.pipeline-ref__inner {
width: min(1500px, calc(100% - 72px));
margin: 0 auto;
}
.pipeline-ref__badge {
display: inline-flex;
align-items: center;
gap: 12px;
min-height: 44px;
padding: 0 22px;
border-radius: 999px;
background: rgba(255,255,255,.74);
border: 1px solid rgba(157,222,232,.74);
box-shadow: 0 14px 34px rgba(34,91,111,.06);
color: #1098a7;
font-size: 15px;
font-weight: 900;
letter-spacing: .07em;
}
.pipeline-ref__badge i {
color: #dba342;
font-style: normal;
font-size: 18px;
}
.pipeline-ref__title {
margin: 18px 0 0;
font-size: clamp(58px, 6.5vw, 108px);
line-height: .9;
letter-spacing: -.055em;
font-weight: 700;
color: #0b2456;
}
.pipeline-ref__title strong {
font-weight: 700;
background: linear-gradient(90deg, #0b2456 0%, #16adc0 44%, #d59a31 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.pipeline-ref__subtitle {
max-width: 980px;
margin: 22px 0 0;
color: #596d93;
font-size: 19px;
line-height: 1.5;
font-weight: 500;
}
.pipeline-ref__subtitle b {
color: #087b8f;
font-weight: 900;
}
.pipeline-ref__map {
position: relative;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
column-gap: 38px;
row-gap: 64px;
padding-top: 62px;
}
.pipeline-ref__track {
position: absolute;
z-index: 0;
pointer-events: none;
}
.pipeline-ref__track--top {
left: 13%;
right: 10%;
top: 248px;
height: 3px;
background: linear-gradient(90deg, transparent, #17a7b6 7%, #2baee6 52%, #23b8c4 94%, transparent);
}
.pipeline-ref__track--bottom {
left: 5%;
right: 21%;
bottom: 220px;
height: 3px;
background: linear-gradient(90deg, transparent, #17a7b6 8%, #2baee6 56%, #23b8c4 96%, transparent);
}
.pipeline-ref__track--turn {
right: 8%;
top: 248px;
width: 108px;
height: 260px;
border-top: 4px solid #1ab0bf;
border-right: 4px solid #1ab0bf;
border-bottom: 4px solid #1ab0bf;
border-radius: 0 44px 44px 0;
}
.pipeline-ref__track--coin {
right: 1.5%;
bottom: 184px;
width: 176px;
height: 88px;
border-right: 2px dashed rgba(38,184,201,.72);
border-bottom: 2px dashed rgba(38,184,201,.72);
border-radius: 0 0 70px 0;
}
.pipeline-ref-card {
position: relative;
z-index: 2;
min-height: 326px;
padding: 62px 24px 26px;
border-radius: 23px;
text-align: center;
background: rgba(255,255,255,.86);
border: 1px solid rgba(165,218,231,.68);
box-shadow: 0 22px 50px rgba(22,82,112,.075), inset 0 1px 0 rgba(255,255,255,.86);
backdrop-filter: blur(16px);
}
.pipeline-ref-card::after {
content: "→";
position: absolute;
top: 138px;
right: -34px;
z-index: 5;
color: #16aeba;
font-size: 38px;
font-weight: 900;
}
.pipeline-ref-card:nth-of-type(5)::after,
.pipeline-ref-card--9::after {
content: "";
}
.pipeline-ref-card__num {
position: absolute;
top: -28px;
left: 50%;
z-index: 6;
transform: translateX(-50%);
width: 58px;
height: 58px;
display: grid;
place-items: center;
border-radius: 999px;
color: #119cae;
font-size: 23px;
font-weight: 900;
background:
radial-gradient(circle at 34% 25%, #fff 0 17%, transparent 18%),
linear-gradient(135deg, #cbfbfb 0%, #bff2ef 48%, #e8d48a 100%);
border: 1px solid rgba(255,255,255,.92);
box-shadow: 0 14px 30px rgba(45,181,194,.17);
}
.pipeline-ref-card__icon {
width: 112px;
height: 112px;
margin: 0 auto 18px;
display: grid;
place-items: center;
color: #109eb0;
border-radius: 28px;
background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.96), rgba(227,250,253,.74));
box-shadow: 0 16px 28px rgba(42,137,160,.11), inset 0 0 0 1px rgba(176,226,238,.78);
font-size: 52px;
line-height: 1;
}
.pipeline-ref-card h3 {
margin: 0;
color: #0b2456;
font-size: 23px;
line-height: 1.08;
letter-spacing: -.035em;
font-weight: 900;
}
.pipeline-ref-card p {
margin: 14px auto 0;
max-width: 230px;
color: #50658c;
font-size: 14.2px;
line-height: 1.45;
font-weight: 500;
}
.pipeline-ref-card--6 { grid-column: 1 / 2; grid-row: 2; }
.pipeline-ref-card--7 { grid-column: 2 / 3; grid-row: 2; }
.pipeline-ref-card--8 { grid-column: 3 / 4; grid-row: 2; }
.pipeline-ref-card--9 {
grid-column: 4 / 5;
grid-row: 2;
border-color: rgba(226,176,62,.66);
background: radial-gradient(circle at 74% 18%, rgba(255,222,146,.17), transparent 34%), rgba(255,255,255,.88);
}
.pipeline-ref-card--9 .pipeline-ref-card__num,
.pipeline-ref-card--9 .pipeline-ref-card__icon {
color: #d19322;
}
.pipeline-ref-card--9 .pipeline-ref-card__icon {
background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.98), rgba(255,246,224,.84));
box-shadow: 0 18px 30px rgba(208,151,31,.14), inset 0 0 0 1px rgba(238,212,150,.88);
}
.pipeline-ref__coin {
position: absolute;
right: 1.1%;
bottom: 197px;
z-index: 2;
width: 92px;
height: 92px;
display: grid;
place-items: center;
border-radius: 50%;
color: #d19322;
font-size: 52px;
font-weight: 900;
background: radial-gradient(circle at 50% 50%, #fff8e9 0 42%, rgba(255,239,204,.92) 43% 100%);
border: 1px solid rgba(226,176,62,.48);
box-shadow: 0 22px 44px rgba(208,151,31,.15);
}
@media (max-width: 1080px) {
.pipeline-ref__map {
grid-template-columns: 1fr;
gap: 30px;
}
.pipeline-ref__track,
.pipeline-ref-card::after,
.pipeline-ref__coin {
display: none;
}
.pipeline-ref-card,
.pipeline-ref-card--6,
.pipeline-ref-card--7,
.pipeline-ref-card--8,
.pipeline-ref-card--9 {
grid-column: auto;
grid-row: auto;
}
}
/* ================================
FLOW CHOICE SECTION
================================ */
.flow-choice {
position: relative;
overflow: hidden;
padding: 78px 0 92px;
background:
radial-gradient(circle at 7% 78%, rgba(94, 220, 224, 0.16), transparent 27%),
radial-gradient(circle at 93% 18%, rgba(235, 190, 84, 0.12), transparent 22%),
linear-gradient(180deg, #fffdf8 0%, #fbfaf5 52%, #f8fbfa 100%);
}
.flow-choice::before,
.flow-choice::after {
content: "";
position: absolute;
pointer-events: none;
border-radius: 999px;
border: 1px solid rgba(213, 168, 65, 0.2);
}
.flow-choice::before {
width: 640px;
height: 210px;
right: -210px;
top: 54px;
transform: rotate(-18deg);
}
.flow-choice::after {
width: 720px;
height: 230px;
left: -260px;
bottom: 20px;
transform: rotate(12deg);
border-color: rgba(84, 199, 205, 0.18);
}
.flow-choice__inner {
position: relative;
z-index: 2;
width: min(1120px, calc(100% - 40px));
margin: 0 auto;
}
.flow-choice__header {
text-align: center;
margin-bottom: 22px;
}
.flow-choice__header h2 {
margin: 0;
font-size: clamp(46px, 5.8vw, 82px);
line-height: 0.96;
letter-spacing: -0.045em;
font-weight: 700;
color: #0b2456;
}
.flow-choice__ornament {
position: relative;
width: 180px;
height: 22px;
margin: 18px auto 0;
}
.flow-choice__ornament::before,
.flow-choice__ornament::after {
content: "";
position: absolute;
top: 50%;
width: 76px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(207, 151, 45, 0.72));
}
.flow-choice__ornament::before {
left: 0;
}
.flow-choice__ornament::after {
right: 0;
transform: rotate(180deg);
}
.flow-choice__ornament::marker {
display: none;
}
.flow-choice__ornament {
color: #d49a2f;
}
.flow-choice__ornament::selection {
background: transparent;
}
.flow-choice__ornament::before {
box-shadow: 92px 0 0 0 transparent;
}
.flow-choice__ornament::after {
box-shadow: -92px 0 0 0 transparent;
}
.flow-choice__ornament:after {
content: "";
}
.flow-choice__ornament::after {
content: "";
}
.flow-choice__ornament::before,
.flow-choice__ornament::after {
opacity: 0.9;
}
.flow-choice__ornament {
background:
radial-gradient(circle at 50% 50%, #d49a2f 0 5px, transparent 6px);
}
.flow-choice__ornament--small {
width: 130px;
margin-top: 14px;
height: 20px;
}
.flow-choice__ornament--small::before,
.flow-choice__ornament--small::after {
width: 54px;
}
.flow-choice__panel {
max-width: 920px;
margin: 0 auto;
padding: 34px 38px 34px;
border-radius: 34px;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(224, 224, 218, 0.92);
box-shadow:
0 24px 70px rgba(31, 36, 52, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.flow-choice__panel > h3 {
margin: 0;
text-align: center;
font-size: clamp(34px, 3.4vw, 48px);
line-height: 0.98;
letter-spacing: -0.035em;
font-weight: 700;
color: #0b2456;
}
.flow-choice__control {
margin-top: 2px;
padding: 28px 30px 30px;
border-radius: 26px;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(226, 226, 220, 0.86);
box-shadow:
0 18px 48px rgba(22, 36, 60, 0.06),
inset 0 1px 0 rgba(255,255,255,0.86);
}
.flow-choice__control-head {
display: flex;
align-items: center;
gap: 20px;
}
.flow-choice__icon,
.flow-choice__selected-icon {
flex: 0 0 auto;
width: 56px;
height: 56px;
display: grid;
place-items: center;
border-radius: 999px;
color: #fff;
background: linear-gradient(135deg, #0fb7bd 0%, #0b8a9f 52%, #d49a2f 100%);
box-shadow: 0 16px 32px rgba(26, 160, 169, 0.2);
font-size: 25px;
font-weight: 800;
}
.flow-choice__control-head h4 {
margin: 0;
font-size: 31px;
line-height: 0.96;
letter-spacing: -0.025em;
font-weight: 700;
color: #0b2456;
}
.flow-choice__control-head p {
margin: 10px 0 0;
color: #52678e;
font-size: 16px;
line-height: 1.2;
}
.flow-choice__slider {
position: relative;
height: 16px;
margin: 22px 4px 18px;
border-radius: 999px;
background: #e4e4e0;
box-shadow:
inset 0 2px 8px rgba(20, 26, 41, 0.1),
0 1px 0 rgba(255,255,255,0.85);
}
.flow-choice__slider span {
position: absolute;
inset: 0 auto 0 0;
width: 58%;
border-radius: inherit;
background: linear-gradient(90deg, #18c5ca 0%, #10a5b8 62%, #e2b34e 100%);
box-shadow: 0 0 18px rgba(31, 190, 198, 0.22);
}
.flow-choice__slider i {
position: absolute;
top: 50%;
left: 58%;
transform: translate(-50%, -50%);
width: 42px;
height: 42px;
border-radius: 999px;
background: #fff;
border: 3px solid #d39a2d;
box-shadow:
0 10px 24px rgba(29, 34, 49, 0.16),
inset 0 1px 0 rgba(255,255,255,0.9);
}
.flow-choice__scale {
display: grid;
grid-template-columns: repeat(3, 1fr);
color: #52678e;
font-size: 16px;
line-height: 1.2;
margin-bottom: 26px;
}
.flow-choice__scale span:nth-child(2) {
text-align: center;
}
.flow-choice__scale span:nth-child(3) {
text-align: right;
}
.flow-choice__cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.flow-choice__card {
position: relative;
min-height: 190px;
padding: 30px 24px 26px;
border-radius: 22px;
text-align: center;
background: rgba(255, 255, 255, 0.66);
border: 1px solid rgba(224, 230, 230, 0.9);
box-shadow:
0 14px 34px rgba(25, 39, 60, 0.055),
inset 0 1px 0 rgba(255,255,255,0.8);
}
.flow-choice__card--active {
background:
radial-gradient(circle at 50% 0%, rgba(51, 207, 211, 0.12), transparent 54%),
rgba(248, 255, 255, 0.78);
border-color: rgba(23, 185, 195, 0.92);
box-shadow:
0 18px 40px rgba(25, 160, 170, 0.11),
inset 0 1px 0 rgba(255,255,255,0.86);
}
.flow-choice__check {
position: absolute;
top: 18px;
left: 18px;
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 999px;
color: #fff;
background: linear-gradient(135deg, #0dc2c4, #0998a5);
box-shadow: 0 12px 24px rgba(15, 175, 184, 0.22);
font-weight: 800;
}
.flow-choice__card-icon {
height: 56px;
margin: 2px 0 20px;
color: #0da3b1;
font-size: 62px;
line-height: 0.8;
}
.flow-choice__card:nth-child(3) .flow-choice__card-icon {
color: #0b2456;
}
.flow-choice__card h5 {
margin: 0;
color: #0b2456;
font-size: 21px;
line-height: 1.15;
font-weight: 800;
}
.flow-choice__card p {
margin: 16px auto 0;
max-width: 220px;
color: #52678e;
font-size: 15px;
line-height: 1.45;
}
.flow-choice__selected {
display: grid;
grid-template-columns: 62px 1fr auto;
gap: 20px;
align-items: center;
margin-top: 26px;
padding: 24px 28px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(226, 226, 220, 0.88);
box-shadow:
0 14px 36px rgba(24, 35, 56, 0.055),
inset 0 1px 0 rgba(255,255,255,0.86);
}
.flow-choice__selected h4 {
margin: 0;
color: #0b2456;
font-size: 26px;
line-height: 1.1;
font-weight: 800;
letter-spacing: -0.02em;
}
.flow-choice__selected p {
margin: 8px 0 0;
color: #52678e;
font-size: 16px;
line-height: 1.35;
}
.flow-choice__button {
min-width: 260px;
min-height: 66px;
padding: 0 28px;
border-radius: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 22px;
color: #fff;
text-decoration: none;
font-size: 20px;
font-weight: 600;
background:
linear-gradient(135deg, #10c2c8 0%, #0a8fa4 70%);
border: 2px solid #d6a13c;
box-shadow:
0 18px 36px rgba(9, 143, 164, 0.22),
inset 0 1px 0 rgba(255,255,255,0.36);
}
.flow-choice__button span {
font-size: 34px;
line-height: 1;
transform: translateY(-1px);
}
.flow-choice__steps {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
gap: 22px;
align-items: center;
margin-top: 18px;
padding: 22px 28px;
border-radius: 20px;
background: rgba(255,255,255,0.58);
border: 1px solid rgba(226,226,220,0.84);
}
.flow-choice__steps > i {
color: #52678e;
font-style: normal;
font-size: 30px;
}
.flow-choice__step {
display: flex;
align-items: center;
gap: 16px;
}
.flow-choice__step b {
width: 50px;
height: 50px;
display: grid;
place-items: center;
border-radius: 999px;
color: #0b2456;
background: #fff;
border: 1px solid rgba(180, 195, 216, 0.74);
font-size: 26px;
font-weight: 600;
}
.flow-choice__step strong {
display: block;
color: #0b2456;
font-size: 18px;
line-height: 1.1;
font-weight: 800;
}
.flow-choice__step p {
margin: 7px 0 0;
color: #52678e;
font-size: 13px;
line-height: 1.2;
}
/* Responsive */
@media (max-width: 960px) {
.flow-choice__panel {
padding: 28px 20px;
}
.flow-choice__cards,
.flow-choice__selected,
.flow-choice__steps {
grid-template-columns: 1fr;
}
.flow-choice__steps > i {
transform: rotate(90deg);
text-align: center;
}
.flow-choice__button {
width: 100%;
}
}
@media (max-width: 640px) {
.flow-choice {
padding: 58px 0 70px;
}
.flow-choice__inner {
width: min(100%, calc(100% - 24px));
}
.flow-choice__header h2 {
font-size: 42px;
}
.flow-choice__control {
padding: 22px 16px;
}
.flow-choice__selected {
padding: 22px 18px;
}
}
----
/* ================================
FLOW CHOICE SECTION
================================ */
.flow-choice {
position: relative;
overflow: hidden;
padding: 78px 0 92px;
background:
radial-gradient(circle at 7% 78%, rgba(94, 220, 224, 0.16), transparent 27%),
radial-gradient(circle at 93% 18%, rgba(235, 190, 84, 0.12), transparent 22%),
linear-gradient(180deg, #fffdf8 0%, #fbfaf5 52%, #f8fbfa 100%);
}
.flow-choice::before,
.flow-choice::after {
content: "";
position: absolute;
pointer-events: none;
border-radius: 999px;
border: 1px solid rgba(213, 168, 65, 0.2);
}
.flow-choice::before {
width: 640px;
height: 210px;
right: -210px;
top: 54px;
transform: rotate(-18deg);
}
.flow-choice::after {
width: 720px;
height: 230px;
left: -260px;
bottom: 20px;
transform: rotate(12deg);
border-color: rgba(84, 199, 205, 0.18);
}
.flow-choice__inner {
position: relative;
z-index: 2;
width: min(1120px, calc(100% - 40px));
margin: 0 auto;
}
.flow-choice__header {
text-align: center;
margin-bottom: 22px;
}
.flow-choice__header h2 {
margin: 0;
font-size: clamp(46px, 5.8vw, 82px);
line-height: 0.96;
letter-spacing: -0.045em;
font-weight: 700;
color: #0b2456;
}
.flow-choice__ornament {
position: relative;
width: 180px;
height: 22px;
margin: 18px auto 0;
}
.flow-choice__ornament::before,
.flow-choice__ornament::after {
content: "";
position: absolute;
top: 50%;
width: 76px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(207, 151, 45, 0.72));
}
.flow-choice__ornament::before {
left: 0;
}
.flow-choice__ornament::after {
right: 0;
transform: rotate(180deg);
}
.flow-choice__ornament::marker {
display: none;
}
.flow-choice__ornament {
color: #d49a2f;
}
.flow-choice__ornament::selection {
background: transparent;
}
.flow-choice__ornament::before {
box-shadow: 92px 0 0 0 transparent;
}
.flow-choice__ornament::after {
box-shadow: -92px 0 0 0 transparent;
}
.flow-choice__ornament:after {
content: "";
}
.flow-choice__ornament::after {
content: "";
}
.flow-choice__ornament::before,
.flow-choice__ornament::after {
opacity: 0.9;
}
.flow-choice__ornament {
background:
radial-gradient(circle at 50% 50%, #d49a2f 0 5px, transparent 6px);
}
.flow-choice__ornament--small {
width: 130px;
margin-top: 14px;
height: 20px;
}
.flow-choice__ornament--small::before,
.flow-choice__ornament--small::after {
width: 54px;
}
.flow-choice__panel {
max-width: 920px;
margin: 0 auto;
padding: 34px 38px 34px;
border-radius: 34px;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(224, 224, 218, 0.92);
box-shadow:
0 24px 70px rgba(31, 36, 52, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.flow-choice__panel > h3 {
margin: 0;
text-align: center;
font-size: clamp(34px, 3.4vw, 48px);
line-height: 0.98;
letter-spacing: -0.035em;
font-weight: 700;
color: #0b2456;
}
.flow-choice__control {
margin-top: 2px;
padding: 28px 30px 30px;
border-radius: 26px;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(226, 226, 220, 0.86);
box-shadow:
0 18px 48px rgba(22, 36, 60, 0.06),
inset 0 1px 0 rgba(255,255,255,0.86);
}
.flow-choice__control-head {
display: flex;
align-items: center;
gap: 20px;
}
.flow-choice__icon,
.flow-choice__selected-icon {
flex: 0 0 auto;
width: 56px;
height: 56px;
display: grid;
place-items: center;
border-radius: 999px;
color: #fff;
background: linear-gradient(135deg, #0fb7bd 0%, #0b8a9f 52%, #d49a2f 100%);
box-shadow: 0 16px 32px rgba(26, 160, 169, 0.2);
font-size: 25px;
font-weight: 800;
}
.flow-choice__control-head h4 {
margin: 0;
font-size: 31px;
line-height: 0.96;
letter-spacing: -0.025em;
font-weight: 700;
color: #0b2456;
}
.flow-choice__control-head p {
margin: 10px 0 0;
color: #52678e;
font-size: 16px;
line-height: 1.2;
}
.flow-choice__slider {
position: relative;
height: 16px;
margin: 22px 4px 18px;
border-radius: 999px;
background: #e4e4e0;
box-shadow:
inset 0 2px 8px rgba(20, 26, 41, 0.1),
0 1px 0 rgba(255,255,255,0.85);
}
.flow-choice__slider span {
position: absolute;
inset: 0 auto 0 0;
width: 58%;
border-radius: inherit;
background: linear-gradient(90deg, #18c5ca 0%, #10a5b8 62%, #e2b34e 100%);
box-shadow: 0 0 18px rgba(31, 190, 198, 0.22);
}
.flow-choice__slider i {
position: absolute;
top: 50%;
left: 58%;
transform: translate(-50%, -50%);
width: 42px;
height: 42px;
border-radius: 999px;
background: #fff;
border: 3px solid #d39a2d;
box-shadow:
0 10px 24px rgba(29, 34, 49, 0.16),
inset 0 1px 0 rgba(255,255,255,0.9);
}
.flow-choice__scale {
display: grid;
grid-template-columns: repeat(3, 1fr);
color: #52678e;
font-size: 16px;
line-height: 1.2;
margin-bottom: 26px;
}
.flow-choice__scale span:nth-child(2) {
text-align: center;
}
.flow-choice__scale span:nth-child(3) {
text-align: right;
}
.flow-choice__cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.flow-choice__card {
position: relative;
min-height: 190px;
padding: 30px 24px 26px;
border-radius: 22px;
text-align: center;
background: rgba(255, 255, 255, 0.66);
border: 1px solid rgba(224, 230, 230, 0.9);
box-shadow:
0 14px 34px rgba(25, 39, 60, 0.055),
inset 0 1px 0 rgba(255,255,255,0.8);
}
.flow-choice__card--active {
background:
radial-gradient(circle at 50% 0%, rgba(51, 207, 211, 0.12), transparent 54%),
rgba(248, 255, 255, 0.78);
border-color: rgba(23, 185, 195, 0.92);
box-shadow:
0 18px 40px rgba(25, 160, 170, 0.11),
inset 0 1px 0 rgba(255,255,255,0.86);
}
.flow-choice__check {
position: absolute;
top: 18px;
left: 18px;
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 999px;
color: #fff;
background: linear-gradient(135deg, #0dc2c4, #0998a5);
box-shadow: 0 12px 24px rgba(15, 175, 184, 0.22);
font-weight: 800;
}
.flow-choice__card-icon {
height: 56px;
margin: 2px 0 20px;
color: #0da3b1;
font-size: 62px;
line-height: 0.8;
}
.flow-choice__card:nth-child(3) .flow-choice__card-icon {
color: #0b2456;
}
.flow-choice__card h5 {
margin: 0;
color: #0b2456;
font-size: 21px;
line-height: 1.15;
font-weight: 800;
}
.flow-choice__card p {
margin: 16px auto 0;
max-width: 220px;
color: #52678e;
font-size: 15px;
line-height: 1.45;
}
.flow-choice__selected {
display: grid;
grid-template-columns: 62px 1fr auto;
gap: 20px;
align-items: center;
margin-top: 26px;
padding: 24px 28px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(226, 226, 220, 0.88);
box-shadow:
0 14px 36px rgba(24, 35, 56, 0.055),
inset 0 1px 0 rgba(255,255,255,0.86);
}
.flow-choice__selected h4 {
margin: 0;
color: #0b2456;
font-size: 26px;
line-height: 1.1;
font-weight: 800;
letter-spacing: -0.02em;
}
.flow-choice__selected p {
margin: 8px 0 0;
color: #52678e;
font-size: 16px;
line-height: 1.35;
}
.flow-choice__button {
min-width: 260px;
min-height: 66px;
padding: 0 28px;
border-radius: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 22px;
color: #fff;
text-decoration: none;
font-size: 20px;
font-weight: 600;
background:
linear-gradient(135deg, #10c2c8 0%, #0a8fa4 70%);
border: 2px solid #d6a13c;
box-shadow:
0 18px 36px rgba(9, 143, 164, 0.22),
inset 0 1px 0 rgba(255,255,255,0.36);
}
.flow-choice__button span {
font-size: 34px;
line-height: 1;
transform: translateY(-1px);
}
.flow-choice__steps {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
gap: 22px;
align-items: center;
margin-top: 18px;
padding: 22px 28px;
border-radius: 20px;
background: rgba(255,255,255,0.58);
border: 1px solid rgba(226,226,220,0.84);
}
.flow-choice__steps > i {
color: #52678e;
font-style: normal;
font-size: 30px;
}
.flow-choice__step {
display: flex;
align-items: center;
gap: 16px;
}
.flow-choice__step b {
width: 50px;
height: 50px;
display: grid;
place-items: center;
border-radius: 999px;
color: #0b2456;
background: #fff;
border: 1px solid rgba(180, 195, 216, 0.74);
font-size: 26px;
font-weight: 600;
}
.flow-choice__step strong {
display: block;
color: #0b2456;
font-size: 18px;
line-height: 1.1;
font-weight: 800;
}
.flow-choice__step p {
margin: 7px 0 0;
color: #52678e;
font-size: 13px;
line-height: 1.2;
}
/* Responsive */
@media (max-width: 960px) {
.flow-choice__panel {
padding: 28px 20px;
}
.flow-choice__cards,
.flow-choice__selected,
.flow-choice__steps {
grid-template-columns: 1fr;
}
.flow-choice__steps > i {
transform: rotate(90deg);
text-align: center;
}
.flow-choice__button {
width: 100%;
}
}
@media (max-width: 640px) {
.flow-choice {
padding: 58px 0 70px;
}
.flow-choice__inner {
width: min(100%, calc(100% - 24px));
}
.flow-choice__header h2 {
font-size: 42px;
}
.flow-choice__control {
padding: 22px 16px;
}
.flow-choice__selected {
padding: 22px 18px;
}
}
/* =========================================
RUBRICS SCALE BLOCK
========================================= */
.rubrics-scale {
position: relative;
overflow: hidden;
padding: 78px 0 88px;
background:
radial-gradient(circle at 8% 78%, rgba(80, 218, 226, 0.14), transparent 27%),
radial-gradient(circle at 92% 16%, rgba(235, 184, 75, 0.12), transparent 23%),
radial-gradient(circle at 88% 64%, rgba(107, 199, 236, 0.12), transparent 24%),
linear-gradient(180deg, #fffdf8 0%, #fbfaf5 48%, #f8fbfa 100%);
}
.rubrics-scale::before,
.rubrics-scale::after {
content: "";
position: absolute;
pointer-events: none;
border-radius: 999px;
}
.rubrics-scale::before {
right: -180px;
top: 34px;
width: 620px;
height: 220px;
border: 1px solid rgba(218, 164, 50, 0.18);
transform: rotate(-18deg);
}
.rubrics-scale::after {
left: -250px;
bottom: 18px;
width: 700px;
height: 250px;
border: 1px solid rgba(67, 196, 208, 0.16);
transform: rotate(14deg);
}
.rubrics-scale__inner {
position: relative;
z-index: 2;
width: min(1320px, calc(100% - 56px));
margin: 0 auto;
}
.rubrics-scale__header {
text-align: center;
margin-bottom: 30px;
}
.rubrics-scale__header h2 {
margin: 0;
font-size: clamp(52px, 5.8vw, 92px);
line-height: 0.94;
letter-spacing: -0.045em;
font-weight: 700;
color: #0b2456;
}
.rubrics-scale__header p {
margin: 14px 0 0;
color: #52678e;
font-size: clamp(24px, 2.2vw, 36px);
line-height: 1.1;
font-weight: 400;
}
.rubrics-scale__ornament,
.rubrics-scale__divider {
position: relative;
height: 22px;
margin: 22px auto 0;
}
.rubrics-scale__ornament {
width: 220px;
}
.rubrics-scale__divider {
width: 150px;
margin-top: 14px;
}
.rubrics-scale__ornament::before,
.rubrics-scale__ornament::after,
.rubrics-scale__divider::before,
.rubrics-scale__divider::after {
content: "";
position: absolute;
top: 50%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(206, 149, 40, 0.72));
}
.rubrics-scale__ornament::before,
.rubrics-scale__divider::before {
left: 0;
}
.rubrics-scale__ornament::after,
.rubrics-scale__divider::after {
right: 0;
transform: rotate(180deg);
}
.rubrics-scale__ornament::before,
.rubrics-scale__ornament::after {
width: 94px;
}
.rubrics-scale__divider::before,
.rubrics-scale__divider::after {
width: 62px;
}
.rubrics-scale__ornament,
.rubrics-scale__divider {
background:
radial-gradient(circle at 50% 50%, #d49a2f 0 5px, transparent 6px);
}
/* Main panel */
.rubrics-scale__panel {
padding: 12px;
border-radius: 34px;
background: rgba(255, 255, 255, 0.58);
border: 1px solid rgba(222, 195, 146, 0.42);
box-shadow:
0 26px 72px rgba(28, 40, 64, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.88);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.rubrics-scale__panel::before {
content: "";
display: block;
position: absolute;
}
.rubrics-scale__notice {
min-height: 64px;
margin: 0 0 10px;
padding: 0 28px;
border-radius: 24px 24px 12px 12px;
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
color: #52678e;
font-size: 18px;
line-height: 1.3;
background: rgba(255, 255, 255, 0.36);
}
.rubrics-scale__notice span {
color: #d49a2f;
font-size: 20px;
}
.rubrics-scale__notice p {
margin: 0;
}
/* Columns */
.rubrics-scale__columns {
display: grid;
grid-template-columns: 0.9fr 1.1fr 1.35fr;
gap: 10px;
}
.rubrics-scale__column {
min-height: 520px;
padding: 28px 26px 30px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.66);
border: 1px solid rgba(223, 205, 169, 0.44);
box-shadow:
0 18px 44px rgba(28, 40, 64, 0.055),
inset 0 1px 0 rgba(255, 255, 255, 0.86);
}
.rubrics-scale__column h3 {
margin: 0;
text-align: center;
color: #0b2456;
font-size: 26px;
line-height: 1.05;
font-weight: 700;
letter-spacing: -0.025em;
}
.rubrics-scale__count {
margin: 14px 0 24px;
text-align: center;
color: #078ba0;
font-size: 24px;
line-height: 1.1;
font-weight: 500;
}
/* Left vertical cards */
.rubrics-scale__list {
display: grid;
gap: 14px;
}
.rubric-item {
min-height: 74px;
padding: 0 26px;
border-radius: 12px;
display: flex;
align-items: center;
gap: 22px;
background: rgba(255, 255, 255, 0.76);
border: 1px solid rgba(229, 236, 239, 0.9);
box-shadow:
0 12px 24px rgba(24, 38, 59, 0.055),
inset 0 1px 0 rgba(255,255,255,0.88);
}
.rubric-icon {
width: 40px;
min-width: 40px;
height: 40px;
display: grid;
place-items: center;
color: #0698ad;
font-size: 34px;
line-height: 1;
}
.rubric-item strong {
color: #0b2456;
font-size: 17px;
line-height: 1.2;
font-weight: 600;
}
/* Middle grid */
.rubrics-scale__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.rubric-mini {
min-height: 112px;
padding: 18px 10px 16px;
border-radius: 12px;
display: grid;
place-items: center;
align-content: center;
gap: 12px;
text-align: center;
color: #0b2456;
background: rgba(255, 255, 255, 0.74);
border: 1px solid rgba(228, 236, 240, 0.88);
box-shadow:
0 12px 24px rgba(24, 38, 59, 0.05),
inset 0 1px 0 rgba(255,255,255,0.88);
}
.rubric-mini span {
color: #0698ad;
font-size: 36px;
line-height: 1;
}
.rubric-mini strong {
font-size: 14.5px;
line-height: 1.15;
font-weight: 600;
}
/* Right grouped rubrics */
.rubrics-group {
padding: 14px 16px 16px;
border-radius: 13px;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(168, 220, 231, 0.68);
box-shadow:
0 10px 22px rgba(25, 55, 72, 0.045),
inset 0 1px 0 rgba(255,255,255,0.88);
}
.rubrics-group + .rubrics-group {
margin-top: 11px;
}
.rubrics-group__title {
display: flex;
align-items: center;
gap: 12px;
color: #0b2456;
margin-bottom: 12px;
}
.rubrics-group__title span {
color: #079aae;
font-size: 22px;
line-height: 1;
}
.rubrics-group__title strong {
font-size: 20px;
line-height: 1.1;
font-weight: 700;
}
.rubrics-group__tags {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
}
.rubrics-group__tags span {
min-height: 42px;
padding: 0 10px;
border-radius: 8px;
display: grid;
place-items: center;
text-align: center;
color: #0b2456;
font-size: 12.5px;
line-height: 1.1;
font-weight: 600;
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(228, 236, 240, 0.92);
box-shadow:
0 8px 16px rgba(24, 38, 59, 0.04),
inset 0 1px 0 rgba(255,255,255,0.9);
}
/* CTA */
.rubrics-scale__cta {
margin: 30px auto 0;
text-align: center;
}
.rubrics-scale__cta p {
margin: 0 0 20px;
color: #0b2456;
font-size: clamp(26px, 2.3vw, 34px);
line-height: 1.1;
letter-spacing: -0.02em;
}
.rubrics-scale__button {
min-width: min(520px, 100%);
min-height: 66px;
padding: 0 34px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 28px;
text-decoration: none;
color: #ffffff;
font-size: 23px;
line-height: 1;
font-weight: 500;
background:
linear-gradient(135deg, #16c8cf 0%, #078fa6 72%);
border: 2px solid #d8a03c;
box-shadow:
0 18px 38px rgba(12, 151, 169, 0.24),
inset 0 1px 0 rgba(255,255,255,0.34);
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}
.rubrics-scale__button:hover {
transform: translateY(-3px);
box-shadow:
0 24px 46px rgba(12, 151, 169, 0.3),
inset 0 1px 0 rgba(255,255,255,0.38);
}
.rubrics-scale__button i {
font-style: normal;
font-size: 34px;
line-height: 1;
}
/* Responsive */
@media (max-width: 1180px) {
.rubrics-scale__columns {
grid-template-columns: 1fr;
}
.rubrics-scale__column {
min-height: auto;
}
.rubrics-group__tags {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.rubrics-scale {
padding: 58px 0 70px;
}
.rubrics-scale__inner {
width: min(100%, calc(100% - 24px));
}
.rubrics-scale__header h2 {
font-size: 44px;
}
.rubrics-scale__header p {
font-size: 24px;
}
.rubrics-scale__panel {
padding: 8px;
border-radius: 26px;
}
.rubrics-scale__notice {
min-height: auto;
padding: 18px;
font-size: 16px;
}
.rubrics-scale__column {
padding: 24px 18px;
}
.rubrics-scale__grid {
grid-template-columns: repeat(2, 1fr);
}
.rubrics-group__tags {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rubrics-scale__button {
min-height: 60px;
padding: 0 22px;
font-size: 18px;
gap: 16px;
}
}
========
картинка рубрики
-=======
.rubric-icon img {
width: 34px;
height: 34px;
object-fit: contain;
}
/* =========================================================
ВОРОНКА - КОНТЕНТ ЭТО ТОЛЬКО ВХОД
========================================================= */
.route-funnel-section {
position: relative;
overflow: hidden;
padding: 54px 18px 68px;
background:
radial-gradient(circle at 12% 86%, rgba(100, 235, 239, 0.10) 0, rgba(100, 235, 239, 0) 26%),
radial-gradient(circle at 88% 16%, rgba(235, 191, 88, 0.10) 0, rgba(235, 191, 88, 0) 20%),
radial-gradient(circle at 70% 14%, rgba(139, 222, 247, 0.11) 0, rgba(139, 222, 247, 0) 26%),
linear-gradient(180deg, #f8faf9 0%, #f7fbfb 100%);
}
.route-funnel-wrap {
position: relative;
max-width: 1680px;
margin: 0 auto;
padding: 54px 54px 30px;
border-radius: 34px;
background: rgba(255, 255, 255, 0.58);
border: 1px solid rgba(225, 233, 239, 0.95);
box-shadow:
0 18px 60px rgba(18, 38, 63, 0.06),
inset 0 1px 0 rgba(255,255,255,0.82);
backdrop-filter: blur(10px);
}
/* top area */
.route-funnel-hero {
position: relative;
min-height: 250px;
}
.route-funnel-copy {
position: relative;
z-index: 2;
max-width: 760px;
}
.route-funnel-title {
margin: 0;
font-size: clamp(42px, 4vw, 76px);
line-height: 0.98;
font-weight: 700;
letter-spacing: -0.03em;
color: #0b2456;
}
.route-funnel-line {
width: 46px;
height: 3px;
margin: 28px 0 22px;
border-radius: 999px;
background: linear-gradient(90deg, #d9a337 0%, #eac66e 100%);
}
.route-funnel-text {
max-width: 480px;
margin: 0;
font-size: 18px;
line-height: 1.6;
font-weight: 400;
color: #6b7ea6;
}
.route-funnel-arc {
position: absolute;
inset: 0 0 auto auto;
width: min(52%, 820px);
top: -8px;
right: 0;
z-index: 1;
pointer-events: none;
opacity: 0.98;
}
.route-funnel-arc svg {
width: 100%;
height: auto;
display: block;
}
/* steps */
.route-funnel-steps {
position: relative;
z-index: 3;
margin-top: 18px;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 22px;
}
.route-step-card {
position: relative;
min-height: 290px;
padding: 78px 28px 26px;
border-radius: 26px;
background: rgba(255,255,255,0.66);
border: 1px solid rgba(217, 234, 238, 0.95);
box-shadow:
0 14px 34px rgba(16, 35, 59, 0.05),
inset 0 1px 0 rgba(255,255,255,0.84);
text-align: center;
}
.route-step-card::after {
content: "";
position: absolute;
top: 100px;
right: -22px;
width: 44px;
height: 2px;
background: linear-gradient(90deg, rgba(63, 212, 220, 0.15) 0%, #35cfda 48%, rgba(63, 212, 220, 0.15) 100%);
}
.route-step-card:last-child::after {
display: none;
}
.route-step-num {
position: absolute;
top: 18px;
left: 18px;
width: 54px;
height: 54px;
border-radius: 999px;
display: grid;
place-items: center;
font-size: 21px;
font-weight: 700;
color: #2fb7ca;
background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(247,252,252,0.92) 100%);
border: 1px solid rgba(213, 236, 239, 0.96);
box-shadow: 0 10px 24px rgba(36, 183, 194, 0.09);
}
.route-step-num-gold {
color: #d6a03a;
}
.route-step-icon {
width: 98px;
height: 98px;
margin: 0 auto 18px;
border-radius: 999px;
display: grid;
place-items: center;
background:
linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(244,252,252,0.92) 100%);
border: 1px solid rgba(216, 237, 239, 0.98);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.84),
0 10px 28px rgba(43, 196, 209, 0.06);
}
.route-step-icon svg {
width: 50px;
height: 50px;
stroke: #20becf;
stroke-width: 2.7;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.route-step-icon-warm svg {
stroke: #e0aa42;
}
.route-step-icon-gold svg {
stroke: #d69e37;
}
.route-step-card h3 {
margin: 0 0 10px;
font-size: 24px;
line-height: 1.1;
font-weight: 700;
color: #10285f;
}
.route-step-card p {
margin: 0;
font-size: 15px;
line-height: 1.45;
color: #66789d;
}
.route-step-card-warm::after {
background: linear-gradient(90deg, rgba(226, 176, 70, 0.14) 0%, #e2b046 48%, rgba(226, 176, 70, 0.14) 100%);
}
.route-step-card-gold {
border-color: rgba(233, 216, 180, 0.95);
}
/* metrics area */
.route-funnel-metrics {
margin-top: 34px;
border-radius: 28px;
background: rgba(255,255,255,0.58);
border: 1px solid rgba(227, 233, 239, 0.95);
box-shadow:
0 16px 42px rgba(18, 38, 63, 0.04),
inset 0 1px 0 rgba(255,255,255,0.82);
padding: 18px;
display: grid;
grid-template-columns: 320px 1fr;
gap: 20px;
}
.route-funnel-metrics-left {
padding: 18px 18px 14px;
}
.route-funnel-metrics-left h3 {
margin: 0 0 18px;
font-size: 22px;
line-height: 1.1;
font-weight: 700;
color: #10285f;
}
.route-funnel-metrics-left p {
margin: 0;
max-width: 220px;
font-size: 16px;
line-height: 1.55;
color: #7b8dae;
}
.route-funnel-live {
margin-top: 38px;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: 999px;
background: rgba(247, 252, 252, 0.86);
border: 1px solid rgba(225, 239, 241, 0.96);
color: #7b8dae;
font-size: 12px;
line-height: 1;
}
.route-funnel-live-dot {
width: 10px;
height: 10px;
border-radius: 999px;
background: #22c79f;
box-shadow: 0 0 0 5px rgba(34, 199, 159, 0.12);
}
.route-funnel-metrics-right {
position: relative;
padding: 8px 2px 0;
}
.route-metrics-track {
position: relative;
margin: 0 30px 16px;
display: grid;
grid-template-columns: repeat(5, 1fr);
align-items: center;
}
.route-metrics-track::before {
content: "";
position: absolute;
top: 18px;
left: 4%;
right: 4%;
height: 4px;
border-radius: 999px;
background: linear-gradient(90deg, #1fcad3 0%, #24c5cc 64%, #deb04e 82%, #e0b24f 100%);
}
.track-dot {
position: relative;
z-index: 2;
justify-self: center;
width: 38px;
height: 38px;
border-radius: 999px;
display: grid;
place-items: center;
font-size: 22px;
font-weight: 700;
color: #ffffff;
background: linear-gradient(180deg, #38d8d7 0%, #16bdb8 100%);
box-shadow: 0 8px 20px rgba(23, 192, 201, 0.25);
}
.track-dot.warm,
.track-dot.gold {
background: linear-gradient(180deg, #f0c86e 0%, #dca647 100%);
box-shadow: 0 8px 20px rgba(220, 166, 71, 0.24);
}
.route-metrics-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 18px;
}
.metric-card {
min-height: 192px;
padding: 20px 22px 18px;
border-radius: 22px;
background: rgba(255,255,255,0.82);
border: 1px solid rgba(222, 236, 238, 0.98);
box-shadow:
0 14px 34px rgba(16, 35, 59, 0.04),
inset 0 1px 0 rgba(255,255,255,0.84);
}
.metric-card-top {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 24px;
}
.metric-icon {
width: 52px;
height: 52px;
border-radius: 999px;
display: grid;
place-items: center;
background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(244,252,252,0.92) 100%);
border: 1px solid rgba(216, 237, 239, 0.98);
}
.metric-icon svg {
width: 28px;
height: 28px;
stroke: #20becf;
stroke-width: 2.5;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.metric-icon-warm svg {
stroke: #e0aa42;
}
.metric-icon-gold svg {
stroke: #d69e37;
}
.metric-card h4 {
margin: 0 0 8px;
font-size: 16px;
line-height: 1.1;
font-weight: 700;
color: #10285f;
}
.metric-card span {
display: block;
font-size: 14px;
line-height: 1.2;
color: #7b8dae;
}
.metric-card strong {
display: block;
font-size: 30px;
line-height: 1;
letter-spacing: -0.03em;
color: #10285f;
}
.metric-card-gold,
.metric-card-warm {
border-color: rgba(235, 223, 195, 0.95);
}
/* responsive */
@media (max-width: 1480px) {
.route-funnel-steps {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.route-step-card:nth-child(3)::after {
display: none;
}
.route-funnel-metrics {
grid-template-columns: 1fr;
}
}
@media (max-width: 1080px) {
.route-funnel-wrap {
padding: 36px 20px 24px;
}
.route-funnel-hero {
min-height: auto;
}
.route-funnel-arc {
position: relative;
width: 100%;
max-width: 640px;
margin: 24px 0 0 auto;
}
.route-funnel-steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.route-step-card:nth-child(2)::after,
.route-step-card:nth-child(4)::after {
display: none;
}
.route-metrics-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 680px) {
.route-funnel-section {
padding: 28px 10px 42px;
}
.route-funnel-title {
font-size: 38px;
}
.route-funnel-text {
font-size: 16px;
}
.route-funnel-steps {
grid-template-columns: 1fr;
gap: 16px;
}
.route-step-card::after {
display: none;
}
.route-funnel-metrics {
padding: 14px;
}
.route-metrics-track {
margin: 0 0 14px;
}
.route-metrics-grid {
grid-template-columns: 1fr;
}
.track-dot {
width: 32px;
height: 32px;
font-size: 18px;
}
}
/* =========================================================
FINAL LANDING POLISH - mobile adaptation + unified premium style
========================================================= */
html { scroll-padding-top: 110px; }
body { }
/* Logo */
.logo-brand { flex: 0 0 auto; min-width: 178px; }
.logo-image { width: 172px; height: auto; object-fit: contain; display: block; }
.logo-mark { display: none; }
.site-header {
gap: 20px;
overflow: visible;
}
.nav a {
position: relative;
padding: 10px 0;
}
.nav a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 4px;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, var(--aqua), var(--gold));
transform: scaleX(0);
transform-origin: left;
transition: transform .22s ease;
}
.nav a:hover::after { transform: scaleX(1); }
/* Unified section blending */
.hero-shell,
.scale-v2,
.pipeline-ref,
.flow-choice,
.rubrics-scale,
.route-funnel-section,
.analytics-lux,
.cta-section {
isolation: isolate;
}
.scale-v2,
.pipeline-ref,
.flow-choice,
.rubrics-scale,
.route-funnel-section,
.analytics-lux {
margin-top: 0;
}
.scale-v2,
.pipeline-ref,
.flow-choice,
.rubrics-scale,
.route-funnel-section,
.analytics-lux {
background:
radial-gradient(circle at 7% 90%, rgba(47,198,201,.14), transparent 30%),
radial-gradient(circle at 92% 8%, rgba(223,174,69,.12), transparent 26%),
linear-gradient(180deg, rgba(255,253,248,.96) 0%, rgba(247,252,252,.94) 52%, rgba(255,253,248,.96) 100%) !important;
}
/* Hero video with image fallback */
.hero-video,
.hero-fallback {
position: absolute;
right: -12px;
top: 10px;
width: 100%;
height: calc(100% - 78px);
object-fit: contain;
object-position: center right;
filter: drop-shadow(0 22px 38px rgba(25,61,79,.10));
}
.hero-fallback { display: none; }
.hero-video:not([src]) + .hero-fallback { display: block; }
/* Make first hero fit better on tablets */
.hero-copy h1,
.scale-v2__title,
.pipeline-ref__title,
.flow-choice__header h2,
.rubrics-scale__header h2,
.route-funnel-title,
.analytics-lux__heading h2 {
font-weight: 700;
}
.hero-copy h1 span,
.hero-copy h1 strong { letter-spacing: -.035em; }
/* Center badge requested */
.scale-v2__top-badge { display: flex; margin-left: auto; margin-right: auto; }
/* Desktop tag overflow fix */
.scale-v2-card__tags { flex-wrap: wrap; }
.scale-v2-tag { max-width: 100%; white-space: normal; min-height: 42px; height: auto; padding-top: 10px; padding-bottom: 10px; text-align: center; }
.scale-v2-card__text { overflow-wrap: anywhere; }
/* Pipeline - cleaner icon boxes + centered badge */
.pipeline-ref__badge { margin-left: auto; margin-right: auto; display: flex; width: fit-content; }
.pipeline-ref__inner { width: min(1420px, calc(100% - 56px)); }
.pipeline-ref-card__icon {
background: linear-gradient(135deg, rgba(47,198,201,.18), rgba(223,174,69,.16));
border: 1px solid rgba(47,198,201,.18);
color: #159ba4;
}
.pipeline-ref-card { min-height: 286px; }
.pipeline-ref-card h3 { min-height: 2.3em; }
.pipeline-ref-card p { font-size: 15px; }
/* Clickable flow cards */
.flow-choice__card { cursor: pointer; user-select: none; }
.flow-choice__card:focus-visible {
outline: 3px solid rgba(47,198,201,.45);
outline-offset: 4px;
}
.flow-choice__card--active {
transform: translateY(-6px);
border-color: rgba(47,198,201,.55) !important;
box-shadow: 0 24px 60px rgba(35,177,182,.18), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.flow-choice__slider { position: relative; }
.flow-choice__slider i { transition: left .28s var(--ease), transform .28s var(--ease); }
.flow-choice__slider[data-active="0"] i { left: 0%; transform: translate(-2%, -50%); }
.flow-choice__slider[data-active="1"] i { left: 50%; transform: translate(-50%, -50%); }
.flow-choice__slider[data-active="2"] i { left: 100%; transform: translate(-98%, -50%); }
.flow-choice__button,
.header-button,
.button-primary {
background: linear-gradient(135deg, #18bdc4 0%, #45d4cf 52%, #d9a43e 140%) !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,.7) !important;
box-shadow: 0 18px 42px rgba(47,198,201,.22), inset 0 1px 0 rgba(255,255,255,.5) !important;
}
/* Rubrics: use premium generated visual instead of rough text blocks */
.rubrics-scale__image-card {
margin: 22px auto 0;
width: min(1180px, 100%);
border-radius: 32px;
padding: 10px;
background: rgba(255,255,255,.76);
border: 1px solid rgba(255,255,255,.9);
box-shadow: 0 28px 80px rgba(17,33,67,.10);
overflow: hidden;
}
.rubrics-scale__image-card img {
width: 100%;
border-radius: 24px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.rubrics-scale__columns { display: none !important; }
.rubrics-scale__panel {
background: rgba(255,255,255,.64) !important;
border-color: rgba(255,255,255,.86) !important;
box-shadow: 0 30px 90px rgba(17,33,67,.09) !important;
}
.rubrics-scale__notice { justify-content: center; text-align: center; }
/* Funnel star position soft fix */
.route-funnel-section .route-star,
.route-funnel-section [class*="star"] {
max-width: 100%;
}
.route-funnel-section svg { overflow: visible; }
/* Analytics - light dashboard from screenshot */
.analytics-lux {
position: relative;
padding: 86px 0 96px;
overflow: hidden;
}
.analytics-lux::before {
content: "";
position: absolute;
inset: 8% -10% auto -10%;
height: 62%;
background:
radial-gradient(circle at 22% 55%, rgba(47,198,201,.18), transparent 32%),
radial-gradient(circle at 82% 16%, rgba(223,174,69,.13), transparent 26%);
z-index: -1;
}
.analytics-lux__inner { width: min(1360px, calc(100% - 56px)); margin: 0 auto; }
.analytics-lux__heading { text-align: center; max-width: 920px; margin: 0 auto 34px; }
.analytics-lux__heading .eyebrow { color: #11aeb9; letter-spacing: .32em; margin-bottom: 10px; }
.analytics-lux__heading h2 {
margin: 0;
font-size: clamp(44px, 5vw, 78px);
line-height: .96;
letter-spacing: -.045em;
color: #102650;
}
.analytics-lux__heading p {
margin: 18px auto 0;
max-width: 780px;
color: #6a7893;
font-size: 20px;
line-height: 1.38;
}
.analytics-board {
position: relative;
border-radius: 34px;
padding: 26px;
background: rgba(255,255,255,.76);
border: 1px solid rgba(217,234,237,.86);
box-shadow: 0 36px 110px rgba(20,52,70,.12);
backdrop-filter: blur(22px) saturate(160%);
}
.analytics-board::before {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
background: linear-gradient(135deg, rgba(47,198,201,.16), rgba(255,255,255,0), rgba(223,174,69,.13));
pointer-events: none;
}
.analytics-board__top,
.analytics-board__grid { position: relative; z-index: 1; }
.analytics-board__top {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 18px;
padding: 0 6px 22px;
}
.analytics-board__brand { display: flex; align-items: center; gap: 16px; color: #102650; font-size: 21px; }
.analytics-board__logo {
width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
color: #fff; background: linear-gradient(135deg, #63d9d6, #f0c96d);
box-shadow: 0 16px 36px rgba(47,198,201,.18);
}
.analytics-board__filters { display: flex; gap: 14px; align-items: center; color: #64809b; font-weight: 600; }
.analytics-board__filters span {
min-height: 46px; padding: 0 18px; border-radius: 16px; display: inline-flex; align-items: center;
background: rgba(255,255,255,.70); border: 1px solid rgba(223,235,238,.9);
}
.analytics-board__status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #33c7c5; margin-right: 10px; box-shadow: 0 0 0 7px rgba(51,199,197,.10); }
.analytics-board__icons { display: flex; gap: 12px; }
.analytics-board__icons span {
width: 46px; height: 46px; border-radius: 16px; display: grid; place-items: center;
color: #688197; background: rgba(255,255,255,.70); border: 1px solid rgba(223,235,238,.9);
box-shadow: 0 12px 28px rgba(17,33,67,.05);
}
.analytics-board__grid {
display: grid;
grid-template-columns: 1.35fr .45fr .55fr;
gap: 18px;
}
.sales-path-card,
.boost-card,
.scale-card,
.ai-recommendation-card {
background: rgba(255,255,255,.72);
border: 1px solid rgba(226,237,239,.92);
border-radius: 26px;
box-shadow: 0 18px 50px rgba(17,33,67,.06), inset 0 1px 0 rgba(255,255,255,.86);
}
.analytics-card-title { font-size: 18px; line-height: 1.2; font-weight: 800; color: #102650; margin-bottom: 22px; }
.sales-path-card { padding: 28px; }
.sales-path { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; gap: 10px; position: relative; }
.sales-path b { position: absolute; top: 50%; transform: translateY(-50%); color: #e5ad42; font-size: 28px; font-weight: 400; }
.sales-path b:nth-of-type(1){ left: 24.5%; }
.sales-path b:nth-of-type(2){ left: 49.5%; }
.sales-path b:nth-of-type(3){ left: 74.5%; }
.sales-step {
min-height: 176px;
padding: 22px 14px 18px;
border-radius: 20px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(241,251,251,.76));
border: 1px solid rgba(216,234,237,.88);
box-shadow: 0 16px 38px rgba(17,33,67,.06);
}
.sales-step i {
width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-style: normal;
color: #13aeb6; background: radial-gradient(circle at 32% 22%, #fff 0 17%, transparent 18%), linear-gradient(135deg, #bdeeed, #f2d887);
margin-bottom: 14px; font-weight: 800;
}
.sales-step strong { font-size: 42px; line-height: 1; color: #102650; letter-spacing: -.04em; }
.sales-step span { margin-top: 8px; color: #536982; font-size: 16px; }
.boost-card { padding: 28px 22px; }
.boost-card button {
width: 100%; height: 54px; margin-top: 13px; border: 1px solid rgba(216,234,237,.9); border-radius: 16px;
background: rgba(255,255,255,.72); color: #25385b; text-align: left; padding: 0 18px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
.boost-card button::before { content: "◎"; color: #14bfc3; margin-right: 12px; }
.scale-card { padding: 28px 24px; overflow: hidden; }
.scale-card h3 { font-size: 28px; color: #102650; margin: 26px 0 2px; }
.scale-card p { color: #65758a; }
.scale-card strong { display: block; margin-top: 22px; font-size: 32px; color: #16bdc4; }
.scale-line { height: 78px; margin-top: 4px; border-radius: 18px; background: linear-gradient(180deg, rgba(51,199,197,.13), transparent); position: relative; overflow: hidden; }
.scale-line span { position: absolute; left: 4%; right: 2%; bottom: 18px; height: 44px; border-bottom: 4px solid #55d6d1; border-radius: 70% 40% 0 0; transform: skewX(-20deg); }
.scale-progress { display: flex; align-items: center; gap: 12px; color: #61758a; font-weight: 700; }
.scale-progress i { flex: 1; height: 12px; border-radius: 999px; background: linear-gradient(90deg, #18bdc4 0 74%, rgba(15,77,90,.12) 74%); }
.scale-progress em { font-style: normal; }
.ai-recommendation-card {
grid-column: 1 / -1;
min-height: 210px;
padding: 32px 36px;
display: grid;
grid-template-columns: 120px 1fr 340px;
align-items: center;
gap: 28px;
overflow: hidden;
}
.ai-bubble {
width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center;
color: #fff; font-size: 44px; background: linear-gradient(135deg, #27c7c9, #7de6df);
box-shadow: 0 18px 44px rgba(47,198,201,.22), 0 0 0 16px rgba(47,198,201,.08);
}
.ai-recommendation-card p { color: #607794; font-size: 17px; margin-bottom: 8px; }
.ai-recommendation-card h3 { max-width: 760px; color: #102650; font-size: clamp(26px, 2.4vw, 38px); line-height: 1.18; letter-spacing: -.035em; }
.ai-recommendation-card a { display: inline-flex; margin-top: 18px; color: #11aeb9; font-weight: 800; }
.ai-growth { height: 150px; position: relative; display: flex; align-items: end; justify-content: center; gap: 18px; opacity: .95; }
.ai-growth span { width: 38px; border-radius: 20px 20px 0 0; background: linear-gradient(180deg, rgba(47,198,201,.32), rgba(47,198,201,.08)); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.ai-growth span:nth-child(1){ height: 52px; } .ai-growth span:nth-child(2){ height: 88px; } .ai-growth span:nth-child(3){ height: 72px; } .ai-growth span:nth-child(4){ height: 108px; }
.ai-growth i { position: absolute; left: 10%; right: 0; bottom: 18px; height: 105px; border-bottom: 4px solid #e3aa42; border-radius: 0 0 90% 0; transform: rotate(-10deg); }
/* CTA + modal polish */
.cta-card { background: rgba(255,255,255,.76); }
.modal-card { width: min(720px, 100%); }
@media (max-width: 1240px) {
.site-header { width: min(100% - 28px, var(--container)); padding: 0 18px; }
.nav { gap: 20px; font-size: 14px; }
.logo-image { width: 152px; }
.hero-shell { grid-template-columns: 1fr; height: auto; min-height: auto; padding-bottom: 34px; }
.hero-copy { max-width: 760px; }
.hero-visual { min-height: 620px; }
.hero-video, .hero-fallback { right: 50%; transform: translateX(50%); height: 560px; width: min(900px, 112%); object-position: center; }
.live-card { right: 50%; transform: translateX(50%); bottom: 6px; }
.analytics-board__grid { grid-template-columns: 1fr; }
.ai-recommendation-card { grid-template-columns: 96px 1fr; }
.ai-growth { display: none; }
.sales-path { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 980px) {
html { scroll-padding-top: 140px; }
.site-header {
top: 10px;
height: auto;
min-height: 68px;
padding: 10px 12px;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
}
.nav {
grid-column: 1 / -1;
order: 3;
display: flex !important;
gap: 8px;
overflow-x: auto;
padding: 6px 0 2px;
scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
flex: 0 0 auto;
min-height: 38px;
padding: 9px 14px;
border-radius: 999px;
background: rgba(255,255,255,.72);
border: 1px solid rgba(47,198,201,.12);
font-size: 13px;
}
.nav a::after { display: none; }
.header-button { min-width: 120px; height: 44px; }
.hero-shell { margin-top: 14px; padding: 38px 24px 26px; border-radius: 28px; }
.hero-visual { min-height: 560px; }
.hero-video { display: none; }
.hero-fallback { display: block; height: 510px; width: 760px; max-width: none; opacity: .98; }
.live-card { width: min(620px, 100%); }
.scale-v2__grid { max-width: 720px; }
.pipeline-ref__map { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px; height: auto !important; }
.pipeline-ref-card, .pipeline-ref-card--6, .pipeline-ref-card--7, .pipeline-ref-card--8, .pipeline-ref-card--9 { grid-column: auto !important; grid-row: auto !important; min-height: 250px; }
.pipeline-ref__track, .pipeline-ref-card::after, .pipeline-ref__coin { display: none !important; }
.flow-choice__cards { grid-template-columns: 1fr !important; }
.flow-choice__steps { flex-direction: column; align-items: stretch !important; }
.flow-choice__steps > i { transform: rotate(90deg); align-self: center; }
.rubrics-scale__image-card { border-radius: 26px; padding: 8px; }
.analytics-board__top { grid-template-columns: 1fr; }
.analytics-board__filters { flex-wrap: wrap; }
}
@media (max-width: 720px) {
:root { --content: calc(100% - 24px); }
body { font-size: 15px; }
.logo-brand { min-width: 132px; }
.logo-image { width: 132px; }
.hero-shell { width: min(100% - 20px, var(--container)); padding: 32px 18px 20px; }
.eyebrow { font-size: 11px; line-height: 1.45; }
.hero-copy h1 span, .hero-copy h1 strong { font-size: 42px; }
.hero-text { font-size: 15.5px; }
.hero-actions { gap: 12px; }
.button { width: 100%; min-height: 54px; }
.hero-visual { min-height: 500px; margin-top: 10px; }
.hero-fallback { right: 50%; width: 680px; height: 455px; transform: translateX(50%); }
.live-card { position: relative; right: auto; bottom: auto; transform: none; width: 100%; margin-top: 360px; grid-template-columns: 1fr; border-radius: 22px; }
.live-divider { display: none; }
.scale-v2, .pipeline-ref, .flow-choice, .rubrics-scale, .route-funnel-section, .analytics-lux { padding-top: 62px !important; padding-bottom: 68px !important; }
.section { margin-top: 74px; }
.section-heading { margin-bottom: 24px; }
.section-heading h2, .split-content h2, .media-text h2, .cta-card h2,
.scale-v2__title, .pipeline-ref__title, .flow-choice__header h2, .rubrics-scale__header h2,
.route-funnel-title, .analytics-lux__heading h2 {
font-size: 38px !important;
line-height: .98 !important;
letter-spacing: -.035em;
}
.section-heading p:not(.eyebrow), .scale-v2__subtitle, .pipeline-ref__subtitle, .analytics-lux__heading p { font-size: 16px; line-height: 1.55; }
.scale-v2__container, .pipeline-ref__inner, .flow-choice__inner, .rubrics-scale__inner, .analytics-lux__inner { width: min(100% - 24px, 1320px) !important; }
.scale-v2-card { border-radius: 26px; }
.scale-v2-card__image-wrap { margin: 10px 10px 0; border-radius: 22px; }
.scale-v2-card__image { border-radius: 22px; }
.scale-v2-card__content { padding: 20px; }
.scale-v2-card__tags { display: grid; grid-template-columns: 1fr; }
.pipeline-ref__map { grid-template-columns: 1fr; }
.pipeline-ref-card { min-height: auto; padding: 24px 20px; border-radius: 24px; }
.flow-choice__panel { padding: 22px 14px !important; border-radius: 26px !important; }
.flow-choice__panel > h3 { font-size: 30px !important; }
.flow-choice__control { padding: 18px 12px !important; border-radius: 24px !important; }
.flow-choice__control-head, .flow-choice__selected { grid-template-columns: auto 1fr !important; }
.flow-choice__selected .flow-choice__button { grid-column: 1 / -1; width: 100%; margin-top: 8px; }
.flow-choice__scale { font-size: 11px; }
.rubrics-scale__panel { padding: 16px 10px 20px !important; border-radius: 26px !important; }
.rubrics-scale__image-card { padding: 6px; border-radius: 20px; overflow-x: auto; }
.rubrics-scale__image-card img { min-width: 760px; border-radius: 16px; }
.analytics-lux__heading .eyebrow { letter-spacing: .22em; }
.analytics-board { padding: 14px; border-radius: 26px; }
.analytics-board__brand { font-size: 18px; }
.analytics-board__logo { width: 44px; height: 44px; }
.analytics-board__filters span { min-height: 40px; padding: 0 12px; font-size: 13px; }
.sales-path-card, .boost-card, .scale-card, .ai-recommendation-card { border-radius: 22px; padding: 20px 16px; }
.sales-path { grid-template-columns: 1fr; gap: 14px; }
.sales-path b { position: static; transform: rotate(90deg); justify-self: center; line-height: 1; }
.sales-step { min-height: 136px; }
.sales-step strong { font-size: 36px; }
.ai-recommendation-card { grid-template-columns: 1fr; text-align: left; }
.ai-bubble { width: 72px; height: 72px; font-size: 34px; }
.modal-backdrop { padding: 12px; align-items: flex-start; overflow: auto; }
.modal-card { margin-top: 12px; padding: 20px 14px; border-radius: 24px; }
#fluentform { min-height: 620px; }
}
@media (max-width: 420px) {
.hero-copy h1 span, .hero-copy h1 strong,
.scale-v2__title, .pipeline-ref__title, .flow-choice__header h2, .rubrics-scale__header h2,
.route-funnel-title, .analytics-lux__heading h2 { font-size: 34px !important; }
.header-button { min-width: 106px; font-size: 14px; }
.logo-image { width: 122px; }
.hero-visual { min-height: 470px; }
.hero-fallback { width: 630px; height: 420px; }
.live-card { margin-top: 330px; }
}
.hero-video.is-hidden { display: none !important; }
.hero-fallback.is-visible-fallback { display: block !important; }
/* =====================================================
PRECISION FIXES - hero video + screens 6, 9, 10, 11
===================================================== */
/* Hero video must stay video on desktop and mobile */
.hero-video { display: block !important; z-index: 1; }
.hero-fallback { display: none !important; z-index: 0; }
.hero-video:not([src]) + .hero-fallback { display: none !important; }
.hero-video.is-hidden { display: none !important; }
.hero-fallback.is-visible-fallback { display: block !important; }
.hero-visual { overflow: hidden; }
.hero-visual::before {
content: "";
position: absolute;
inset: auto -6% -6% -6%;
height: 36%;
background: radial-gradient(circle at 50% 0%, rgba(127, 236, 228, 0.18), transparent 62%);
pointer-events: none;
z-index: 0;
}
.live-card { z-index: 3; }
/* Screen 6 - rubrics */
.rubrics-cabinet {
position: relative;
padding: 94px 0 96px;
background:
radial-gradient(circle at 4% 18%, rgba(47,198,201,.14), transparent 24%),
radial-gradient(circle at 96% 88%, rgba(47,198,201,.16), transparent 24%),
linear-gradient(180deg, rgba(255,252,246,.98) 0%, rgba(248,252,251,.96) 52%, rgba(255,251,246,.98) 100%);
}
.rubrics-cabinet__inner,
.project-fit__inner,
.footer-dark__inner { width: min(1320px, calc(100% - 56px)); margin: 0 auto; }
.rubrics-cabinet__header { text-align: center; }
.rubrics-cabinet__header h2 {
margin: 0;
font-size: clamp(44px, 5.1vw, 86px);
line-height: .98;
letter-spacing: -.045em;
color: #102650;
}
.rubrics-cabinet__header p {
margin-top: 12px;
color: #587191;
font-size: clamp(22px, 2.3vw, 32px);
line-height: 1.18;
}
.rubrics-cabinet__ornament {
width: 188px; height: 22px; margin: 20px auto 0; position: relative;
}
.rubrics-cabinet__ornament::before,
.rubrics-cabinet__ornament::after {
content: ""; position: absolute; top: 10px; width: 74px; height: 1px;
background: linear-gradient(90deg, rgba(223,174,69,.18), rgba(223,174,69,.85), rgba(223,174,69,.18));
}
.rubrics-cabinet__ornament::before { left: 0; }
.rubrics-cabinet__ornament::after { right: 0; }
.rubrics-cabinet__ornament { display: flex; align-items: center; justify-content: center; color: #d7a23f; font-size: 22px; }
.rubrics-cabinet__ornament::after, .rubrics-cabinet__ornament::before { border-radius: 999px; }
.rubrics-cabinet__frame {
margin-top: 28px;
border-radius: 42px;
padding: 24px 22px 30px;
background: rgba(255,255,255,.62);
border: 1px solid rgba(241,228,205,.82);
box-shadow: 0 28px 90px rgba(17,33,67,.08), inset 0 1px 0 rgba(255,255,255,.84);
backdrop-filter: blur(18px);
}
.rubrics-cabinet__notice {
display: flex; align-items: center; justify-content: center; gap: 12px;
margin-bottom: 24px; color: #536d89; text-align: center;
}
.rubrics-cabinet__notice span { color: #d7a23f; font-size: 22px; }
.rubrics-cabinet__notice p { font-size: 18px; }
.rubrics-cabinet__grid {
display: grid;
grid-template-columns: .95fr 1.08fr 1.4fr;
gap: 14px;
}
.cabinet-card {
padding: 22px 18px 18px;
border-radius: 26px;
background: rgba(255,253,250,.92);
border: 1px solid rgba(239,222,195,.86);
box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 18px 44px rgba(17,33,67,.05);
}
.cabinet-card h3 {
text-align: center; font-size: 28px; line-height: 1.08; color: #102650;
}
.cabinet-card__divider {
width: 172px; max-width: 100%; height: 20px; margin: 12px auto 10px; position: relative;
}
.cabinet-card__divider::before,
.cabinet-card__divider::after {
content: ""; position: absolute; top: 9px; width: 70px; height: 1px; background: linear-gradient(90deg, rgba(223,174,69,.18), rgba(223,174,69,.86), rgba(223,174,69,.18));
}
.cabinet-card__divider::before { left: 0; }
.cabinet-card__divider::after { right: 0; }
.cabinet-card__divider { display: flex; justify-content: center; align-items: center; color: #d7a23f; font-size: 16px; }
.cabinet-card__divider::after, .cabinet-card__divider::before { border-radius: 999px; }
.cabinet-card__divider::selection { background: transparent; }
.cabinet-card__divider::before, .cabinet-card__divider::after {}
.cabinet-card__divider:after, .cabinet-card__divider:before {}
.cabinet-card__divider::marker { content: ""; }
.cabinet-card__count {
margin-bottom: 16px; text-align: center; color: #19aeb9; font-size: 20px; font-weight: 500;
}
.cabinet {
position: relative;
min-height: 560px;
padding: 14px 12px 72px;
border-radius: 22px;
background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(250,253,253,.9));
border: 1px solid rgba(237,224,203,.8);
box-shadow: inset 0 1px 0 rgba(255,255,255,.96);
}
.cabinet::before, .cabinet::after {
content: ""; position: absolute; top: 0; bottom: 0; width: 3px;
background: linear-gradient(180deg, rgba(217,171,78,.45), rgba(129,224,219,.55), rgba(217,171,78,.45));
border-radius: 999px;
}
.cabinet::before { left: 10px; }
.cabinet::after { right: 10px; }
.cabinet__shelf {
position: relative;
display: grid;
gap: 10px;
padding: 18px 12px 24px;
}
.cabinet__shelf::after {
content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 6px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(121,228,220,.72), rgba(223,174,69,.32), rgba(121,228,220,.72));
box-shadow: 0 4px 18px rgba(86,210,207,.22);
}
.cabinet__shelf--two { grid-template-columns: repeat(2, 1fr); }
.cabinet__shelf--three { grid-template-columns: repeat(3, 1fr); }
.cabinet__shelf--one { grid-template-columns: minmax(120px, 170px); justify-content: center; }
.cabinet-item {
min-height: 96px;
padding: 14px 10px;
border-radius: 18px;
display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,250,248,.9));
border: 1px solid rgba(233,224,208,.92);
box-shadow: 0 12px 26px rgba(17,33,67,.04);
}
.cabinet-item span { color: #1aaeb7; font-size: 26px; line-height: 1; }
.cabinet-item strong { margin-top: 12px; color: #2a4469; font-size: 16px; line-height: 1.2; font-weight: 600; }
.cabinet-decor--solo {
position: absolute; left: 18px; right: 18px; bottom: 18px; height: 74px;
}
.cabinet-decor .vase {
position: absolute; left: 4px; bottom: 0; width: 34px; height: 48px; border-radius: 16px 16px 12px 12px;
background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,236,220,.92));
box-shadow: 0 8px 20px rgba(17,33,67,.05);
}
.cabinet-decor .vase::before {
content: ""; position: absolute; left: 11px; top: -28px; width: 2px; height: 28px; background: #d9b67a;
box-shadow: -8px 6px 0 #dfc58f, 8px 10px 0 #d9b67a, 4px 3px 0 #cdb27d;
}
.cabinet-decor .book {
position: absolute; bottom: 4px; left: 54px; width: 68px; height: 12px; border-radius: 4px;
background: linear-gradient(90deg, #efe2c8, #fbfbfa);
box-shadow: 0 8px 18px rgba(17,33,67,.05);
}
.cabinet-decor .book-b { width: 50px; height: 10px; left: 68px; bottom: 18px; }
.school-groups { display: grid; gap: 12px; }
.school-group {
border-radius: 18px; padding: 12px 14px 14px; background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(249,251,250,.88));
border: 1px solid rgba(234,223,207,.92); box-shadow: 0 10px 24px rgba(17,33,67,.04);
}
.school-group__title {
display: flex; align-items: center; gap: 10px; color: #1b365f; font-weight: 700; font-size: 18px;
}
.school-group__title span { color: #d7a23f; }
.school-group__tags {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px;
}
.school-group__tags span {
min-height: 70px; padding: 12px 10px; border-radius: 16px; display: flex; align-items: center; justify-content: center; text-align: center;
background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,248,247,.92));
border: 1px solid rgba(232,223,208,.92); color: #2a4469; font-size: 15px; line-height: 1.22;
}
.rubrics-cabinet__cta { text-align: center; margin-top: 24px; }
.rubrics-cabinet__cta p { color: #314a71; font-size: 18px; }
.rubrics-cabinet__button,
.project-fit-card__button,
.contact-form-shell__button {
min-height: 68px; padding: 0 30px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 14px;
background: linear-gradient(135deg, #17bcc4 0%, #4ad5d1 55%, #d6a03d 135%);
color: #fff; font-weight: 700; font-size: 18px; border: 2px solid rgba(255,255,255,.56);
box-shadow: 0 18px 44px rgba(47,198,201,.22), inset 0 1px 0 rgba(255,255,255,.54), 0 0 0 3px rgba(255,245,228,.78);
}
.rubrics-cabinet__button { margin-top: 18px; min-width: 470px; }
.rubrics-cabinet__button i,
.project-fit-card__button i,
.contact-form-shell__button span { font-style: normal; font-size: 28px; line-height: 1; }
/* Screen 9 - choose project */
.project-fit {
position: relative; padding: 96px 0 94px;
background:
radial-gradient(circle at 0% 8%, rgba(76,227,220,.22), transparent 26%),
radial-gradient(circle at 100% 100%, rgba(76,227,220,.2), transparent 24%),
linear-gradient(180deg, rgba(255,252,246,.98) 0%, rgba(249,252,252,.96) 52%, rgba(255,252,246,.98) 100%);
overflow: hidden;
}
.project-fit::before,
.project-fit::after {
content: ""; position: absolute; border: 1px solid rgba(220,178,86,.42); border-radius: 50%; pointer-events: none;
}
.project-fit::before { width: 92vw; height: 34vw; max-height: 460px; top: -120px; left: 4vw; }
.project-fit::after { width: 46vw; height: 18vw; max-height: 240px; right: -12vw; top: 40px; }
.project-fit__badge {
display: flex; align-items: center; justify-content: center; gap: 16px; color: #d29a33; text-transform: uppercase; letter-spacing: .28em; font-size: 14px; font-weight: 700;
}
.project-fit__badge span { width: 86px; height: 1px; background: linear-gradient(90deg, rgba(210,154,51,0), rgba(210,154,51,.9), rgba(210,154,51,0)); }
.project-fit__header { max-width: 960px; margin: 18px auto 0; text-align: center; }
.project-fit__header h2 {
margin: 0; font-size: clamp(50px, 6vw, 96px); line-height: .94; letter-spacing: -.05em; color: #102650;
}
.project-fit__header h2 em { font-style: normal; color: #cb9241; }
.project-fit__header p { margin: 18px auto 0; max-width: 860px; color: #5d7190; font-size: 22px; line-height: 1.45; }
.project-fit__cards {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px;
}
.project-fit-card {
position: relative; padding: 32px 28px 26px; border-radius: 34px; background: rgba(255,255,255,.74);
border: 1px solid rgba(237,225,205,.88); box-shadow: 0 26px 76px rgba(17,33,67,.08), inset 0 1px 0 rgba(255,255,255,.88); backdrop-filter: blur(18px);
}
.project-fit-card__number {
position: absolute; top: 28px; left: 28px; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
background: radial-gradient(circle at 32% 26%, #ffffff 0 18%, transparent 19%), linear-gradient(135deg, #bfeeed, #f1d98b);
color: #129eab; font-size: 34px; font-weight: 600; box-shadow: 0 14px 30px rgba(47,198,201,.16), 0 0 0 6px rgba(255,251,242,.86);
}
.project-fit-card__art {
position: relative; height: 190px; margin: 18px auto 18px; width: min(260px, 100%);
}
.project-fit-card h3 {
margin-top: 10px; font-size: 28px; line-height: 1.12; color: #102650;
}
.project-fit-card p { margin-top: 14px; color: #536d89; font-size: 18px; line-height: 1.56; min-height: 170px; }
.project-fit-card__button { width: 100%; margin-top: 16px; min-height: 60px; font-size: 17px; }
.project-fit-card__art--expert .art-sheet,
.project-fit-card__art--expert .art-calendar {
position: absolute; border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,250,249,.92));
box-shadow: 0 18px 34px rgba(17,33,67,.05);
}
.project-fit-card__art--expert .art-sheet { left: 24px; top: 28px; width: 96px; height: 128px; border: 1px solid rgba(234,223,205,.9); }
.project-fit-card__art--expert .art-sheet::before {
content: ""; position: absolute; inset: 22px 20px auto; height: 4px; background: #f0c55f; border-radius: 999px;
box-shadow: 0 18px 0 #8adddc, 0 36px 0 #f0c55f, 0 54px 0 #8adddc;
}
.project-fit-card__art--expert .art-calendar { left: 108px; top: 58px; width: 114px; height: 104px; border: 1px solid rgba(196,237,235,.95); }
.project-fit-card__art--expert .art-calendar::before { content:""; position:absolute; left:16px; right:16px; top:26px; height: 2px; background:#dfecec; box-shadow: 0 20px 0 #dfecec, 0 40px 0 #dfecec; }
.project-fit-card__art--expert .art-calendar::after { content:""; position:absolute; left:18px; top:-10px; width:12px; height:24px; border-radius:999px; background:#4bcfce; box-shadow: 44px 0 0 #4bcfce; }
.project-fit-card__art--expert .art-spark { position:absolute; right:18px; top:26px; color:#d9a444; font-size:24px; }
.project-fit-card__art--project .art-bars { position:absolute; left:38px; right:54px; bottom:18px; display:flex; align-items:flex-end; gap:14px; }
.project-fit-card__art--project .art-bars i { display:block; width:30px; border-radius:14px 14px 8px 8px; background: linear-gradient(180deg, #8fe2e0, #d5f7f3); box-shadow: 0 12px 22px rgba(47,198,201,.12); }
.project-fit-card__art--project .art-bars i:nth-child(1){ height:64px; } .project-fit-card__art--project .art-bars i:nth-child(2){ height:92px; } .project-fit-card__art--project .art-bars i:nth-child(3){ height:118px; } .project-fit-card__art--project .art-bars i:nth-child(4){ height:82px; }
.project-fit-card__art--project .art-line { position:absolute; left:30px; right:34px; top:52px; height:4px; background: linear-gradient(90deg, rgba(0,0,0,0) 0 6%, #d59b3b 6% 94%, rgba(0,0,0,0) 94%); transform: rotate(-23deg); }
.project-fit-card__art--project .art-line::before,
.project-fit-card__art--project .art-line::after { content:""; position:absolute; width:12px; height:12px; border-radius:50%; background:#d59b3b; top:-4px; }
.project-fit-card__art--project .art-line::before { left:6px; box-shadow: 52px 18px 0 #d59b3b, 105px 2px 0 #d59b3b, 154px -25px 0 #d59b3b; }
.project-fit-card__art--project .art-target { position:absolute; right:24px; bottom:26px; width:84px; height:84px; border-radius:50%; border:3px solid #7bdedc; box-shadow: inset 0 0 0 10px rgba(123,222,220,.18), inset 0 0 0 22px rgba(123,222,220,.08); }
.project-fit-card__art--project .art-target::before { content:""; position:absolute; inset:28px; border-radius:50%; background:#2cc5c9; }
.project-fit-card__art--team .art-people { position:absolute; left:56px; right:56px; top:62px; display:flex; justify-content:center; gap:18px; }
.project-fit-card__art--team .art-people b { position:relative; display:block; width:48px; height:56px; border-radius:24px 24px 18px 18px; background: linear-gradient(180deg, #40cfd1, #7ae2df); box-shadow: 0 12px 24px rgba(47,198,201,.12); }
.project-fit-card__art--team .art-people b::before { content:""; position:absolute; left:8px; top:-24px; width:32px; height:32px; border-radius:50%; background: linear-gradient(180deg, #40cfd1, #7ae2df); }
.project-fit-card__art--team .art-people b:nth-child(2) { width:64px; height:70px; transform: translateY(10px); }
.project-fit-card__art--team .art-people b:nth-child(2)::before { left:12px; top:-30px; width:40px; height:40px; }
.project-fit-card__art--team .art-orbit { position:absolute; left:34px; right:34px; top:40px; height:120px; border:2px solid rgba(90,216,215,.56); border-radius:50%; }
.project-fit-card__art--team .art-star { position:absolute; top:16px; left:50%; transform:translateX(-50%); color:#d7a23f; font-size:34px; }
/* Screen 10 - contact */
.next-step-contact {
position: relative; padding: 34px 0 0;
background: linear-gradient(180deg, rgba(237,249,249,.72) 0%, rgba(246,252,251,.92) 100%);
}
.next-step-contact__panel {
width: min(1600px, calc(100% - 28px)); margin: 0 auto; border-radius: 42px; padding: 38px 54px 44px;
display: grid; grid-template-columns: .88fr 1.12fr; gap: 42px; align-items: center;
background:
radial-gradient(circle at 0% 76%, rgba(47,198,201,.12), transparent 24%),
radial-gradient(circle at 96% 16%, rgba(47,198,201,.08), transparent 18%),
linear-gradient(135deg, rgba(247,252,252,.98), rgba(239,247,247,.94));
border: 1px solid rgba(230,241,241,.9); box-shadow: 0 26px 88px rgba(17,33,67,.09), inset 0 1px 0 rgba(255,255,255,.92);
}
.next-step-contact__copy { position: relative; padding: 12px 0 140px; }
.next-step-contact__pill {
display: inline-flex; align-items: center; min-height: 50px; padding: 0 34px; border-radius: 999px;
border: 1px solid rgba(97,221,214,.72); color: #17aeb8; text-transform: uppercase; letter-spacing: .16em; font-size: 14px; font-weight: 700;
box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
}
.next-step-contact__copy h2 {
margin-top: 30px; font-size: clamp(54px, 5.1vw, 92px); line-height: .98; letter-spacing: -.05em; color: #102650;
}
.next-step-contact__copy h2 em { font-style: normal; color: #c98e39; }
.next-step-contact__line { width: 220px; height: 22px; margin: 24px 0; position: relative; }
.next-step-contact__line::before, .next-step-contact__line::after {
content: ""; position: absolute; top: 10px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, #2cc7cd, #e0b656);
}
.next-step-contact__line::before { left: 0; width: 180px; }
.next-step-contact__line::after { right: 0; width: 10px; }
.next-step-contact__copy p { max-width: 520px; color: #536d89; font-size: 20px; line-height: 1.55; }
.next-step-contact__doc { position: absolute; left: 0; bottom: 0; width: 210px; height: 160px; }
.next-step-contact__doc::before {
content: ""; position:absolute; left:-40px; bottom:-56px; width: 280px; height: 180px; border: 1px solid rgba(223,174,69,.26); border-radius: 50%;
}
.doc-icon {
position: absolute; left: 18px; bottom: 10px; width: 118px; height: 118px; border-radius: 50%;
background: radial-gradient(circle at 30% 24%, #ffffff 0 18%, transparent 19%), linear-gradient(135deg, rgba(255,255,255,.9), rgba(242,251,250,.88));
box-shadow: 0 0 0 8px rgba(255,249,239,.9), 0 12px 24px rgba(47,198,201,.1);
}
.doc-icon::before {
content: ""; position: absolute; left: 32px; top: 24px; width: 38px; height: 52px; border-radius: 8px; background: linear-gradient(180deg, #ffffff, #f4faf9);
box-shadow: 0 0 0 1px rgba(214,232,232,.9);
}
.doc-icon::after {
content: ""; position: absolute; left: 42px; top: 38px; width: 18px; height: 2px; background: #58d5d1; box-shadow: 0 10px 0 #58d5d1, 0 20px 0 #58d5d1;
}
.doc-check {
position: absolute; right: 10px; bottom: 18px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
background: linear-gradient(135deg, #1abec5, #48d5cf); color: #fff; font-size: 18px; box-shadow: 0 8px 18px rgba(47,198,201,.18);
}
.contact-form-shell {
position: relative; border-radius: 42px; padding: 22px;
background: linear-gradient(180deg, rgba(243,250,250,.98), rgba(241,247,247,.96));
border: 1px solid rgba(229,240,240,.92); box-shadow: 0 24px 80px rgba(17,33,67,.08), inset 0 1px 0 rgba(255,255,255,.92);
}
.contact-form-shell__inner {
border-radius: 34px; padding: 46px 40px 36px; background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(248,251,251,.94));
border: 1px solid rgba(233,239,239,.94);
}
.contact-form-shell__star {
position: absolute; top: -16px; right: -8px; width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center;
color: #d7a23f; font-size: 34px; background: rgba(255,252,246,.82); box-shadow: 0 0 0 10px rgba(255,248,236,.72), 0 18px 30px rgba(223,174,69,.12);
}
.contact-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 26px; }
.field-shell { display: flex; flex-direction: column; gap: 12px; }
.field-shell > span { color: #1d3760; font-size: 18px; font-weight: 700; }
.field-shell--full { grid-column: 1 / -1; }
.field-shell__input {
min-height: 72px; border-radius: 22px; display: flex; align-items: center; gap: 16px; padding: 0 24px;
background: rgba(255,255,255,.96); border: 1px solid rgba(184,230,229,.86); box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
}
.field-shell__input i, .field-shell__input b { font-style: normal; color: #77829d; font-size: 24px; font-weight: 500; }
.field-shell__input b { margin-left: auto; }
.field-shell__input input {
width: 100%; border: 0; outline: none; background: transparent; color: #1c355c; font-size: 17px;
}
.contact-form-shell__button { width: 100%; margin-top: 34px; min-height: 84px; font-size: 24px; }
/* Screen 11 - footer */
.footer-dark {
position: relative; margin-top: 0; padding: 54px 0 0; background: linear-gradient(180deg, #001d27 0%, #002835 44%, #00202b 100%);
color: rgba(230,245,247,.96); overflow: hidden;
}
.footer-dark::before {
content: ""; position: absolute; inset: 0; background:
radial-gradient(circle at 10% 50%, rgba(0,194,214,.18), transparent 24%),
radial-gradient(circle at 56% 30%, rgba(0,173,202,.14), transparent 30%),
radial-gradient(circle at 92% 72%, rgba(0,194,214,.12), transparent 24%);
pointer-events: none;
}
.footer-dark__inner { position: relative; z-index: 1; width: min(1320px, calc(100% - 56px)); }
.footer-dark__top { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; padding-bottom: 36px; }
.footer-brand { display: flex; align-items: center; gap: 18px; font-size: 30px; font-weight: 700; }
.footer-brand__mark {
width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; color: #f0c35b; font-size: 32px;
box-shadow: inset 0 0 0 5px rgba(97,221,214,.9), inset 0 0 0 10px rgba(240,195,91,.14);
}
.footer-dark__tagline { font-size: 18px; color: rgba(232,245,246,.95); text-align: right; }
.footer-dark__divider { height: 1px; background: rgba(76,214,216,.34); }
.footer-dark__grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 54px; padding: 64px 0 74px;
}
.footer-dark__col h3 {
font-size: 20px; color: #fff; margin-bottom: 20px; padding-bottom: 14px; position: relative;
}
.footer-dark__col h3::after {
content: ""; position: absolute; left: 0; bottom: 0; width: 58px; height: 4px; border-radius: 999px; background: linear-gradient(90deg, #24c7ca, #d6a03d);
}
.footer-dark__col ul { display: grid; gap: 16px; }
.footer-dark__col a, .footer-dark__col li { color: rgba(224,244,245,.9); font-size: 17px; line-height: 1.5; }
.footer-dark__copyright { padding: 34px 0 54px; text-align: center; color: rgba(224,244,245,.9); font-size: 16px; }
.footer-dark__divider--bottom {
position: relative; background: rgba(76,214,216,.24);
}
.footer-dark__divider--bottom::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: linear-gradient(90deg, #22c6ca, #d6a03d);
}
/* responsive */
@media (max-width: 1240px) {
.rubrics-cabinet__grid, .project-fit__cards, .footer-dark__grid { grid-template-columns: 1fr; }
.school-group__tags { grid-template-columns: repeat(3, 1fr); }
.cabinet { min-height: auto; }
.project-fit__cards { max-width: 760px; margin-left: auto; margin-right: auto; }
.project-fit-card p { min-height: auto; }
.next-step-contact__panel { grid-template-columns: 1fr; }
.next-step-contact__copy { padding-bottom: 80px; }
.footer-dark__top { grid-template-columns: 1fr; }
.footer-dark__tagline { text-align: left; }
}
@media (max-width: 980px) {
.hero-video, .hero-fallback { right: 50%; transform: translateX(50%); width: min(920px, 118%); height: 560px; object-position: center; }
.hero-video { display: block !important; }
.hero-fallback { display: none !important; }
.rubrics-cabinet, .project-fit { padding: 72px 0 74px; }
.rubrics-cabinet__inner, .project-fit__inner, .footer-dark__inner { width: min(100% - 28px, 1320px); }
.school-group__tags { grid-template-columns: repeat(2, 1fr); }
.contact-form-grid { grid-template-columns: 1fr; }
.field-shell, .field-shell--full { grid-column: auto; }
}
@media (max-width: 720px) {
.hero-shell { padding-bottom: 22px; }
.hero-video, .hero-fallback { width: 760px; height: 500px; }
.live-card { margin-top: 344px; }
.rubrics-cabinet__inner, .project-fit__inner, .footer-dark__inner { width: min(100% - 24px, 1320px); }
.rubrics-cabinet__frame { padding: 16px 12px 20px; border-radius: 28px; }
.rubrics-cabinet__header h2, .project-fit__header h2, .next-step-contact__copy h2 { font-size: 42px !important; line-height: .98 !important; }
.rubrics-cabinet__header p, .project-fit__header p, .next-step-contact__copy p { font-size: 16px; }
.cabinet-card { padding: 18px 12px 14px; border-radius: 22px; }
.cabinet-card h3 { font-size: 24px; }
.cabinet__shelf--three { grid-template-columns: repeat(2, 1fr); }
.cabinet-item strong { font-size: 14px; }
.school-group__tags { grid-template-columns: repeat(2, 1fr); }
.rubrics-cabinet__button { min-width: 100%; width: 100%; font-size: 16px; }
.project-fit__cards { gap: 16px; }
.project-fit-card { padding: 24px 18px 18px; border-radius: 26px; }
.project-fit-card__number { top: 18px; left: 18px; width: 62px; height: 62px; font-size: 28px; }
.project-fit-card__art { height: 158px; margin-top: 26px; }
.project-fit-card h3 { font-size: 24px; }
.project-fit-card p { font-size: 16px; }
.project-fit-card__button { font-size: 16px; }
.next-step-contact__panel { width: min(100% - 12px, 1600px); padding: 20px 16px 24px; border-radius: 28px; gap: 18px; }
.contact-form-shell, .contact-form-shell__inner { border-radius: 24px; }
.contact-form-shell__inner { padding: 22px 16px 20px; }
.field-shell__input { min-height: 62px; padding: 0 16px; border-radius: 18px; }
.field-shell > span { font-size: 16px; }
.contact-form-shell__button { min-height: 66px; font-size: 19px; margin-top: 22px; }
.next-step-contact__doc { width: 150px; height: 114px; }
.doc-icon { width: 86px; height: 86px; }
.doc-icon::before { left: 22px; top: 18px; width: 30px; height: 42px; }
.doc-icon::after { left: 30px; top: 30px; width: 14px; box-shadow: 0 9px 0 #58d5d1, 0 18px 0 #58d5d1; }
.doc-check { width: 28px; height: 28px; right: 6px; bottom: 10px; }
.footer-dark { padding-top: 34px; }
.footer-brand { font-size: 24px; }
.footer-brand__mark { width: 58px; height: 58px; font-size: 26px; }
.footer-dark__grid { padding: 34px 0 38px; gap: 28px; }
}
@media (max-width: 420px) {
.hero-video, .hero-fallback { width: 680px; height: 448px; }
.live-card { margin-top: 300px; }
.rubrics-cabinet__header h2, .project-fit__header h2, .next-step-contact__copy h2 { font-size: 36px !important; }
.school-group__tags, .cabinet__shelf--three { grid-template-columns: 1fr; }
.project-fit-card__button, .rubrics-cabinet__button, .contact-form-shell__button { font-size: 15px; }
}
/* =========================================================
DESIGN SYSTEM LOCK - FONTS FROM CURRENT PACKAGE
========================================================= */
:root {
--font-heading: "Lorenzo Sans";
--font-text: "Lorenzo Sans";
--cream-deep: #f7f2e8;
--cream-soft: #fffdf8;
--ink: #07183a;
--ink-soft: #31415f;
--aqua-light: #dff8f7;
--aqua-core: #34c9c4;
--gold-core: #d6a247;
--gold-light: #f2d99b;
}
body.landing-page,
p,
a,
button,
input,
textarea,
select,
.nav,
.header-button,
.button,
.eyebrow,
.hero-text,
.section-heading p,
.scale-v2__subtitle,
.scale-v2-card__text,
.rubric-card p,
.dashboard-card,
.footer {
}
h1,
h2,
h3,
h4,
h5,
h6,
.hero-copy h1,
.hero-copy h1 span,
.hero-copy h1 strong,
.section-heading h2,
.split-content h2,
.media-text h2,
.cta-card h2,
.scale-v2__title,
.scale-v2-card__title,
.rubric-card h3,
.dashboard-card h3,
.ai-card h3 {
font-weight: 800;
}
/* =========================================================
SCREEN 2 - SYSTEM IN 10 SECONDS
Reference: screen 2. Built as real HTML/CSS, not image.
========================================================= */
.system-ten {
position: relative;
width: 100%;
margin: 0;
padding: clamp(92px, 8vw, 138px) 0 clamp(84px, 7vw, 126px);
overflow: hidden;
isolation: isolate;
background:
radial-gradient(circle at 50% 45%, rgba(143, 224, 224, 0.42) 0%, rgba(221, 247, 246, 0.26) 24%, transparent 56%),
radial-gradient(circle at 14% 18%, rgba(246, 231, 201, 0.58) 0%, transparent 33%),
radial-gradient(circle at 88% 18%, rgba(255, 246, 229, 0.65) 0%, transparent 32%),
linear-gradient(180deg, #fffdf8 0%, #f8f4eb 48%, #fbfbf6 100%);
}
.system-ten__bg,
.system-ten__bg span {
pointer-events: none;
}
.system-ten__orb {
position: absolute;
z-index: -2;
border-radius: 999px;
filter: blur(18px);
}
.system-ten__orb--a {
width: min(940px, 68vw);
height: min(940px, 68vw);
left: 50%;
top: 50%;
transform: translate(-50%, -42%);
background: radial-gradient(circle, rgba(177, 240, 239, 0.52) 0%, rgba(219, 249, 247, 0.28) 42%, transparent 68%);
}
.system-ten__orb--b {
width: 560px;
height: 560px;
left: -150px;
bottom: -170px;
background: radial-gradient(circle, rgba(86, 216, 216, 0.16), transparent 70%);
}
.system-ten__ring {
position: absolute;
z-index: -1;
left: 50%;
top: 50%;
width: 1180px;
height: 1180px;
border-radius: 50%;
border: 1px solid rgba(219, 171, 88, 0.26);
opacity: 0.72;
transform: translate(-50%, -48%) rotate(-21deg);
}
.system-ten__ring--two {
width: 1450px;
height: 820px;
border-color: rgba(255, 255, 255, 0.82);
transform: translate(-50%, -45%) rotate(-16deg);
box-shadow: 0 0 70px rgba(255,255,255,.45) inset;
}
.system-ten__spark {
position: absolute;
z-index: 0;
color: rgba(232, 185, 91, 0.44);
text-shadow: 0 0 24px rgba(255, 255, 255, 0.9);
animation: systemSpark 4.5s ease-in-out infinite;
}
.system-ten__spark--one { left: 7%; top: 57%; font-size: 34px; }
.system-ten__spark--two { right: 15%; top: 19%; font-size: 46px; animation-delay: -1.4s; }
.system-ten__spark--three { right: 5%; bottom: 27%; font-size: 30px; animation-delay: -2.7s; }
@keyframes systemSpark {
0%, 100% { opacity: .38; transform: scale(.9) rotate(0deg); }
50% { opacity: .92; transform: scale(1.06) rotate(7deg); }
}
.system-ten__heading {
position: relative;
z-index: 2;
width: min(1120px, calc(100% - 44px));
margin: 0 auto clamp(46px, 4.2vw, 70px);
text-align: center;
}
.system-ten__badge {
width: fit-content;
margin: 0 auto 22px;
padding: 12px 26px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 16px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.56);
border: 1px solid rgba(255, 255, 255, 0.92);
box-shadow:
0 18px 46px rgba(17, 33, 67, 0.055),
inset 0 1px 0 rgba(255,255,255,.88);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
color: #b77e33;
font-size: 14px;
line-height: 1;
letter-spacing: .18em;
text-transform: uppercase;
}
.system-ten__badge span {
color: #d3a451;
font-size: 13px;
}
.system-ten__heading h2 {
margin: 0;
color: var(--ink);
font-size: clamp(36px, 4.3vw, 80px);
line-height: .9;
letter-spacing: -0.055em;
text-shadow: 0 16px 42px rgba(7, 24, 58, 0.06);
}
.system-ten__heading > p:not(.system-ten__badge) {
max-width: 850px;
margin: 28px auto 0;
color: rgba(49, 65, 95, .76);
font-size: clamp(17px, 1.25vw, 22px);
line-height: 1.58;
letter-spacing: .01em;
}
.system-ten__panel {
position: relative;
z-index: 3;
width: min(1380px, calc(100% - 88px));
min-height: 440px;
margin: 0 auto;
padding: clamp(32px, 3.2vw, 52px) clamp(34px, 3.6vw, 62px) clamp(82px, 5.8vw, 112px);
border-radius: 34px;
background:
radial-gradient(circle at 50% 43%, rgba(114, 219, 218, .21), transparent 45%),
linear-gradient(135deg, rgba(255,255,255,.58), rgba(255,255,255,.28));
border: 1px solid rgba(255, 255, 255, .88);
box-shadow:
0 28px 86px rgba(37, 77, 96, .10),
inset 0 1px 0 rgba(255,255,255,.98),
inset 0 0 0 14px rgba(255,255,255,.18);
backdrop-filter: blur(24px) saturate(150%);
-webkit-backdrop-filter: blur(24px) saturate(150%);
}
.system-ten__panel::before {
content: "";
position: absolute;
inset: 12px;
border-radius: 26px;
border: 1px solid rgba(255,255,255,.74);
pointer-events: none;
}
.system-ten__steps {
position: relative;
z-index: 4;
display: grid;
grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) 44px minmax(0, 1fr) 44px minmax(0, 1fr);
align-items: center;
gap: clamp(18px, 2vw, 34px);
}
.system-step {
position: relative;
min-height: 300px;
padding: 34px 28px 32px;
border-radius: 30px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
background:
radial-gradient(circle at 50% 26%, rgba(189, 244, 243, .35), transparent 37%),
linear-gradient(150deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .43));
border: 1px solid rgba(255,255,255,.9);
box-shadow:
0 24px 68px rgba(35, 73, 91, .08),
inset 0 1px 0 rgba(255,255,255,.95),
inset 0 -1px 0 rgba(255,255,255,.42);
overflow: hidden;
}
.system-step::before {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
background:
linear-gradient(145deg, rgba(255,255,255,.95), transparent 30%),
radial-gradient(circle at 18% 12%, rgba(255,255,255,.9), transparent 18%);
opacity: .8;
pointer-events: none;
}
.system-step::after {
content: "";
position: absolute;
left: 50%;
top: 38px;
width: 116px;
height: 116px;
border-radius: 50%;
transform: translateX(-50%);
background: radial-gradient(circle, rgba(188, 242, 241, .82), rgba(255,255,255,.24) 62%, transparent 70%);
border: 1px solid rgba(255,255,255,.72);
box-shadow: inset 0 0 36px rgba(255,255,255,.58), 0 12px 42px rgba(47,198,201,.10);
pointer-events: none;
}
.system-step__number {
position: absolute;
z-index: 5;
top: 23px;
right: 22px;
width: 44px;
height: 44px;
border-radius: 999px;
display: grid;
place-items: center;
background: linear-gradient(145deg, rgba(45, 202, 200, .96), rgba(107, 220, 216, .92));
color: #fff;
font-size: 17px;
line-height: 1;
box-shadow:
0 12px 28px rgba(47, 198, 201, .22),
inset 0 1px 0 rgba(255,255,255,.76);
}
.system-step__icon {
position: relative;
z-index: 4;
width: 104px;
height: 104px;
margin: 8px auto 26px;
border-radius: 50%;
display: grid;
place-items: center;
}
.system-step__icon svg {
width: 63px;
height: 63px;
fill: none;
stroke: url(#unused);
stroke: var(--gold-core);
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 8px 13px rgba(214, 162, 71, .18));
}
.system-step__icon--content svg,
.system-step__icon--funnel svg,
.system-step__icon--analytics svg {
stroke: var(--aqua-core);
}
.system-step__icon--content svg path:last-child,
.system-step__icon--funnel svg circle,
.system-step__icon--analytics svg circle {
stroke: var(--gold-core);
}
.system-step h3 {
position: relative;
z-index: 4;
margin: 0;
color: var(--ink);
font-size: clamp(25px, 2vw, 34px);
line-height: 1.06;
letter-spacing: -0.035em;
}
.system-step p {
position: relative;
z-index: 4;
max-width: 225px;
margin: 18px auto 0;
color: rgba(55, 67, 96, .76);
font-size: clamp(15px, 1.1vw, 18px);
line-height: 1.44;
letter-spacing: .005em;
}
.system-ten__arrow {
position: relative;
z-index: 5;
display: grid;
place-items: center;
color: rgba(207, 150, 52, .78);
font-size: clamp(36px, 3vw, 52px);
line-height: 1;
transform: translateY(-2px);
text-shadow: 0 12px 18px rgba(207, 150, 52, .10);
}
.system-ten__return {
position: absolute;
left: clamp(54px, 9.5vw, 150px);
right: clamp(54px, 9.5vw, 150px);
bottom: 29px;
height: 104px;
z-index: 6;
pointer-events: none;
}
.system-ten__return-svg {
position: absolute;
inset: 0 0 18px;
width: 100%;
height: 100%;
overflow: visible;
}
.system-ten__return-path,
.system-ten__return-head {
fill: none;
stroke: rgba(207, 150, 52, .62);
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 5 6;
animation: systemReturnDash 1.85s linear infinite;
filter: drop-shadow(0 8px 14px rgba(207, 150, 52, .12));
}
.system-ten__return-head {
stroke-width: 2.4;
stroke-dasharray: none;
animation: systemReturnHead 2.4s ease-in-out infinite;
}
@keyframes systemReturnDash {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: 33; }
}
@keyframes systemReturnHead {
0%, 100% { opacity: .68; transform: translateX(0); }
50% { opacity: 1; transform: translateX(-4px); }
}
.system-ten__return-dot {
position: absolute;
z-index: 7;
right: 0;
top: 13px;
width: 12px;
height: 12px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold-core), var(--aqua-core));
box-shadow: 0 0 0 0 rgba(52, 201, 196, .34), 0 8px 16px rgba(207, 150, 52, .15);
animation: systemReturnDot 4.2s cubic-bezier(.5, 0, .1, 1) infinite;
}
@keyframes systemReturnDot {
0% { right: 1%; top: 9px; opacity: 0; transform: scale(.7); }
7% { opacity: 1; transform: scale(1); }
48% { right: 50%; top: 91px; opacity: 1; }
88% { right: 99%; top: 22px; opacity: 1; transform: scale(1); }
100% { right: 99%; top: 22px; opacity: 0; transform: scale(.72); }
}
.system-ten__return-center {
position: absolute;
z-index: 8;
left: 50%;
bottom: 18px;
transform: translateX(-50%);
width: 60px;
height: 60px;
border-radius: 50%;
display: grid;
place-items: center;
background:
radial-gradient(circle at 35% 24%, rgba(255,255,255,.98), rgba(255,255,255,.78) 42%, rgba(242, 217, 155, .72));
border: 1px solid rgba(255,255,255,.9);
color: var(--aqua-core);
font-size: 33px;
box-shadow: 0 18px 42px rgba(41, 56, 82, .12), inset 0 1px 0 rgba(255,255,255,.96);
animation: systemReturnSpin 5.6s linear infinite;
}
@keyframes systemReturnSpin {
to { transform: translateX(-50%) rotate(360deg); }
}
.system-ten__return p {
position: absolute;
left: 50%;
bottom: -6px;
transform: translateX(-50%);
margin: 0;
width: max-content;
max-width: 72vw;
color: rgba(49, 65, 95, .68);
font-size: clamp(13px, 1vw, 16px);
line-height: 1.2;
letter-spacing: .14em;
text-align: center;
}
@media (max-width: 1180px) {
.system-ten__panel {
width: min(960px, calc(100% - 48px));
padding: 34px 34px 80px;
}
.system-ten__steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}
.system-ten__arrow {
display: none;
}
.system-step {
min-height: 280px;
}
.system-ten__return {
left: 70px;
right: 70px;
bottom: 18px;
}
}
@media (max-width: 720px) {
.system-ten {
padding: 78px 0 78px;
}
.system-ten__heading {
width: min(100% - 28px, 620px);
margin-bottom: 34px;
}
.system-ten__badge {
padding: 10px 16px;
gap: 9px;
font-size: 11px;
letter-spacing: .12em;
}
.system-ten__heading h2 {
font-size: clamp(44px, 15vw, 64px);
line-height: .94;
}
.system-ten__heading > p:not(.system-ten__badge) {
margin-top: 18px;
font-size: 16px;
}
.system-ten__heading br {
display: none;
}
.system-ten__panel {
width: min(100% - 24px, 560px);
padding: 20px 16px 28px;
border-radius: 28px;
}
.system-ten__panel::before {
inset: 8px;
border-radius: 22px;
}
.system-ten__steps {
grid-template-columns: 1fr;
gap: 15px;
}
.system-step {
min-height: auto;
padding: 22px 20px 24px;
border-radius: 24px;
}
.system-step::after {
top: 22px;
width: 86px;
height: 86px;
}
.system-step__number {
top: 16px;
right: 16px;
width: 38px;
height: 38px;
font-size: 14px;
}
.system-step__icon {
width: 76px;
height: 76px;
margin: 3px auto 18px;
}
.system-step__icon svg {
width: 47px;
height: 47px;
}
.system-step h3 {
font-size: 25px;
}
.system-step p {
max-width: 300px;
margin-top: 11px;
font-size: 15px;
}
.system-ten__return {
position: relative;
left: auto;
right: auto;
bottom: auto;
height: auto;
margin-top: 18px;
padding-top: 58px;
}
.system-ten__return-svg,
.system-ten__return-dot {
display: none;
}
.system-ten__return-center {
top: 0;
bottom: auto;
width: 48px;
height: 48px;
font-size: 27px;
}
.system-ten__return p {
position: static;
transform: none;
width: auto;
max-width: 100%;
font-size: 11px;
letter-spacing: .08em;
}
}
/* =========================================================
SCREEN 2 TYPOGRAPHY + SEAM FIX - V5
========================================================= */
:root {
--font-heading: "Lorenzo Sans";
--font-text: "Lorenzo Sans";
}
/* The attached text font is dense, so we open it slightly across the whole UI. */
body.landing-page,
p,
a,
button,
input,
textarea,
select,
.nav,
.header-button,
.button,
.hero-text,
.eyebrow,
.system-ten__badge,
.system-ten__heading > p:not(.system-ten__badge),
.system-step p,
.system-ten__return p {
letter-spacing: 0.018em;
}
.nav {
letter-spacing: 0.022em;
font-size: 14.5px;
}
.header-button,
.button {
letter-spacing: 0.012em;
}
h1,
h2,
h3,
h4,
h5,
h6,
.hero-copy h1,
.hero-copy h1 span,
.hero-copy h1 strong,
.system-ten__heading h2,
.system-step h3 {
letter-spacing: 0.006em;
}
/* Remove the hard visual seam between hero and screen 2. */
.hero-shell {
margin-bottom: 0;
}
.system-ten {
margin-top: -18px;
padding-top: clamp(100px, 7.1vw, 122px);
background:
linear-gradient(180deg, rgba(251,248,240,0) 0%, rgba(251,248,240,.72) 5%, rgba(255,253,248,.96) 14%, rgba(248,244,235,.96) 58%, #fbfbf6 100%),
radial-gradient(circle at 50% 45%, rgba(143, 224, 224, 0.38) 0%, rgba(221, 247, 246, 0.22) 25%, transparent 56%),
radial-gradient(circle at 14% 18%, rgba(246, 231, 201, 0.48) 0%, transparent 33%),
radial-gradient(circle at 88% 18%, rgba(255, 246, 229, 0.56) 0%, transparent 32%);
}
.system-ten::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 110px;
z-index: 1;
pointer-events: none;
background: linear-gradient(180deg, rgba(251,248,240,0), rgba(255,253,248,.78), rgba(255,253,248,0));
}
.system-ten__heading {
max-width: 980px;
margin-bottom: clamp(38px, 3.6vw, 56px);
}
.system-ten__heading h2 {
font-size: clamp(38px, 3.8vw, 62px);
line-height: 1.02;
letter-spacing: 0.012em;
font-weight: 800;
text-shadow: 0 14px 36px rgba(7, 24, 58, 0.045);
}
.system-ten__heading > p:not(.system-ten__badge) {
max-width: 780px;
margin-top: 20px;
font-size: clamp(16px, 1.05vw, 19px);
line-height: 1.62;
}
.system-ten__badge {
margin-bottom: 20px;
font-size: 16.5px;
letter-spacing: .1em;
}
.system-ten__panel {
width: min(1240px, calc(100% - 120px));
min-height: 414px;
padding: clamp(30px, 2.8vw, 44px) clamp(32px, 3vw, 48px) clamp(78px, 5.2vw, 98px);
border-radius: 32px;
}
.system-ten__steps {
gap: clamp(14px, 1.45vw, 26px);
grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr) 36px minmax(0, 1fr) 36px minmax(0, 1fr);
}
.system-step {
min-height: 276px;
padding: 28px 24px 28px;
border-radius: 28px;
}
.system-step::after {
top: 32px;
width: 102px;
height: 102px;
}
.system-step__number {
top: 20px;
right: 20px;
width: 40px;
height: 40px;
font-size: 15px;
letter-spacing: .02em;
}
.system-step__icon {
width: 96px;
height: 96px;
margin: 5px auto 23px;
}
.system-step__icon svg {
width: 58px;
height: 58px;
}
.system-step h3 {
font-size: clamp(23px, 1.7vw, 29px);
line-height: 1.12;
}
.system-step p {
max-width: 214px;
margin-top: 14px;
font-size: clamp(14px, .98vw, 16px);
line-height: 1.48;
}
.system-ten__arrow {
font-size: clamp(31px, 2.45vw, 42px);
}
.system-ten__return {
left: clamp(44px, 8.2vw, 124px);
right: clamp(44px, 8.2vw, 124px);
bottom: 24px;
}
.system-ten__return-center {
width: 54px;
height: 54px;
font-size: 30px;
}
.system-ten__return p {
bottom: -2px;
font-size: clamp(12px, .88vw, 14px);
letter-spacing: .15em;
}
@media (max-width: 1180px) {
.system-ten__panel {
width: min(920px, calc(100% - 44px));
}
.system-ten__steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
body.landing-page,
p,
a,
button,
input,
textarea,
select,
.nav,
.header-button,
.button,
.hero-text,
.eyebrow,
.system-ten__badge,
.system-ten__heading > p:not(.system-ten__badge),
.system-step p,
.system-ten__return p {
letter-spacing: 0.012em;
}
.system-ten {
margin-top: -8px;
padding-top: 76px;
}
.system-ten__heading h2 {
font-size: clamp(38px, 12.2vw, 52px);
line-height: 1.06;
letter-spacing: .006em;
}
.system-ten__heading > p:not(.system-ten__badge) {
font-size: 15px;
line-height: 1.58;
}
.system-ten__panel {
width: min(100% - 24px, 560px);
}
.system-step h3 {
font-size: 23px;
}
}
/* =========================================================
SCREEN 1 + SCREEN 2 MICRO FIXES - v6
- reduce blank space inside live card
- move card away from hard right edge
- add more breathing room under screen 2
========================================================= */
@media (min-width: 1161px) {
.live-card {
right: 18px;
width: min(520px, 84%);
grid-template-columns: 35% 1px 1fr;
gap: 12px;
padding: 19px 22px;
}
.live-left {
min-width: 0;
}
.live-bars {
gap: 5px;
max-width: 142px;
}
.live-bars span {
width: 7px;
}
.route-box {
min-width: 0;
padding-left: 0;
}
.route-icons {
gap: 7px;
}
.route-icons span {
width: 32px;
height: 32px;
}
}
.system-ten {
padding-bottom: clamp(126px, 9.5vw, 176px);
}
.system-ten__panel {
padding-bottom: clamp(104px, 6.8vw, 132px);
}
.system-ten__return {
bottom: 38px;
}
.system-ten__return p {
bottom: -18px;
}
@media (max-width: 1180px) {
.system-ten {
padding-bottom: 118px;
}
.system-ten__panel {
padding-bottom: 104px;
}
.system-ten__return {
bottom: 32px;
}
}
@media (max-width: 720px) {
.system-ten {
padding-bottom: 104px;
}
.system-ten__panel {
padding-bottom: 96px;
}
.system-ten__return {
bottom: 28px;
}
}
/* =========================================================
SCREEN 1 PRECISION FIXES - v7
Наталия: вернуть спокойный масштаб главного заголовка,
дать воздух кнопке и отодвинуть «Главный маршрут» от линии.
========================================================= */
@media (min-width: 1161px) {
/* H1 стал слишком тяжёлым после подключения нового шрифта — уменьшаем масштаб,
сохраняем тот же стиль и пропорцию первого экрана. */
.hero-copy {
max-width: 470px;
}
.hero-copy h1 span,
.hero-copy h1 strong {
font-size: clamp(48px, 3.55vw, 60px) !important;
line-height: 1.04;
letter-spacing: -0.012em !important;
}
.hero-copy h1 strong {
margin-top: 8px;
}
.hero-text {
max-width: 500px;
margin-top: 18px;
}
/* Кнопки не должны прилипать к тексту: даём им больше внутреннего воздуха. */
.header-button {
min-width: 166px;
padding: 0 28px;
font-size: 15.5px;
letter-spacing: .01em;
}
.button {
padding-left: 34px;
padding-right: 34px;
}
.hero-actions {
gap: 20px;
}
/* Нижняя карточка: маршрут чуть ниже, чтобы заголовок не прилипал к верхней границе/линии. */
.route-box {
padding-top: 10px;
}
.route-box p {
margin-bottom: 12px;
}
/* Саму карточку оставляем аккуратно внутри визуала, но не прижимаем к правому краю. */
.live-card {
right: 24px;
width: min(520px, 83%);
align-items: start;
}
}
@media (min-width: 721px) and (max-width: 1160px) {
.hero-copy h1 span,
.hero-copy h1 strong {
font-size: clamp(46px, 6.2vw, 62px) !important;
line-height: 1.04;
letter-spacing: -0.012em !important;
}
.header-button {
min-width: 154px;
padding: 0 24px;
}
.route-box {
padding-top: 8px;
}
}
@media (max-width: 720px) {
.hero-copy h1 span,
.hero-copy h1 strong {
font-size: clamp(38px, 12vw, 46px) !important;
line-height: 1.05;
letter-spacing: -0.01em !important;
}
.header-button {
min-width: 136px;
padding: 0 18px;
font-size: 14px;
}
.route-box {
padding-top: 4px;
}
}
/* =========================================================
UNIFIED SECTION HEADINGS + CAPSULES
screens 1-9: one heading system, centered capsules/titles
accents: aqua for 1,2,3,5,8; gold for 4,6,7,9
========================================================= */
:root {
--heading-dark: #07183a;
--heading-aqua: #2fc6c9;
--heading-gold: #c98b2f;
--heading-gold-soft: #dfae45;
--section-copy: #53617d;
}
.section-head,
.system-ten__heading,
.scale-v2__container,
.pipeline-ref__inner,
.flow-choice__header,
.rubrics-scale__header,
.route-funnel-copy,
.section-heading.center,
.cta-card {
text-align: center !important;
}
.section-cap,
.system-ten__badge,
.scale-v2__top-badge,
.pipeline-ref__badge,
.eyebrow.mini.section-cap {
width: fit-content !important;
max-width: min(92vw, 820px);
min-height: 52px;
margin-left: auto !important;
margin-right: auto !important;
margin-bottom: 22px !important;
padding: 0 38px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 14px !important;
border-radius: 999px !important;
background: rgba(255,255,255,.84) !important;
border: 1px solid rgba(255,255,255,.92) !important;
box-shadow: 0 16px 38px rgba(17,33,67,.06), inset 0 1px 0 rgba(255,255,255,.92) !important;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
color: var(--heading-gold) !important;
font-size: 15px !important;
line-height: 1 !important;
font-weight: 800 !important;
letter-spacing: .13em !important;
text-transform: uppercase !important;
white-space: nowrap;
}
.section-cap::before,
.section-cap::after {
content: "✦";
color: var(--heading-gold-soft);
font-size: 15px;
line-height: 1;
opacity: .9;
}
.system-ten__badge span,
.scale-v2__top-badge-icon,
.pipeline-ref__badge i {
color: var(--heading-gold-soft) !important;
}
/* Avoid doubled stars where HTML already has decorative spans/icons */
.system-ten__badge.section-cap::before,
.system-ten__badge.section-cap::after,
.scale-v2__top-badge.section-cap::before,
.scale-v2__top-badge.section-cap::after,
.pipeline-ref__badge.section-cap::before,
.pipeline-ref__badge.section-cap::after {
content: none;
}
.section-title,
.system-ten__heading h2.section-title,
.scale-v2__title.section-title,
.pipeline-ref__title.section-title,
.flow-choice__header .section-title,
.rubrics-scale__header .section-title,
.route-funnel-title.section-title,
.section-heading.center .section-title,
.cta-card .section-title {
max-width: 1020px;
margin: 0 auto !important;
text-align: center !important;
font-size: clamp(38px, 4.3vw, 64px) !important;
line-height: .96 !important;
font-weight: 700 !important;
letter-spacing: -.035em !important;
color: var(--heading-dark) !important;
text-shadow: 0 16px 42px rgba(7,24,58,.045);
}
.section-title span,
.section-title strong,
.scale-v2__title-line,
.pipeline-ref__title strong {
display: inline;
font-size: inherit !important;
line-height: inherit !important;
font-weight: inherit !important;
letter-spacing: inherit !important;
}
.section-title strong,
.section-title--aqua strong,
.scale-v2__title-line--gradient {
color: var(--heading-aqua) !important;
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
-webkit-text-fill-color: initial !important;
text-shadow: 0 0 18px rgba(47,198,201,.11);
}
.section-title--gold strong,
.pipeline-ref__title.section-title--gold strong,
.route-funnel-title.section-title--gold strong {
color: var(--heading-gold) !important;
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
-webkit-text-fill-color: initial !important;
text-shadow: 0 0 20px rgba(201,139,47,.10);
}
.section-title--small {
font-size: clamp(30px, 3.2vw, 46px) !important;
line-height: .98 !important;
}
.section-subtitle,
.system-ten__heading > p:not(.system-ten__badge),
.scale-v2__subtitle,
.pipeline-ref__subtitle,
.route-funnel-text,
.section-heading.center > p:not(.section-cap):not(.eyebrow),
.cta-card > p:not(.section-cap):not(.eyebrow) {
max-width: 860px !important;
margin: 20px auto 0 !important;
text-align: center !important;
color: var(--section-copy) !important;
font-size: clamp(16px, 1.15vw, 19px) !important;
line-height: 1.62 !important;
font-weight: 500 !important;
letter-spacing: .004em !important;
}
/* Screen 2 -> Screen 3 seamless background */
.system-ten {
position: relative !important;
z-index: 1;
padding-bottom: 44px !important;
background:
radial-gradient(circle at 8% 72%, rgba(47,198,201,.17), transparent 26%),
radial-gradient(circle at 92% 10%, rgba(241,215,141,.14), transparent 28%),
linear-gradient(180deg, rgba(255,253,248,.95) 0%, #f7fbfb 72%, #f7fbfb 100%) !important;
}
.system-ten::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -90px;
height: 180px;
z-index: 0;
pointer-events: none;
background:
radial-gradient(1080px 300px at -7% 8%, transparent 91%, rgba(124,218,224,.42) 91.35%, transparent 92.05%),
radial-gradient(1120px 300px at 108% 0%, transparent 91%, rgba(223,174,69,.30) 91.35%, transparent 92.05%),
linear-gradient(180deg, rgba(247,251,251,0) 0%, #f7fbfb 46%, rgba(247,251,251,0) 100%);
}
.system-ten__heading,
.system-ten__panel {
position: relative;
z-index: 2;
}
.scale-v2 {
position: relative !important;
z-index: 2;
margin-top: -1px !important;
padding: 58px 0 84px !important;
background:
radial-gradient(circle at 8% 25%, rgba(47,198,201,.15), transparent 25%),
radial-gradient(circle at 92% 20%, rgba(241,215,141,.12), transparent 24%),
linear-gradient(180deg, #f7fbfb 0%, #f8fbfb 24%, #fffdf8 100%) !important;
}
.scale-v2::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(1200px 330px at -9% -7%, transparent 91.5%, rgba(124,218,224,.48) 91.85%, transparent 92.5%),
radial-gradient(1180px 320px at 109% -4%, transparent 91.5%, rgba(223,174,69,.34) 91.85%, transparent 92.5%);
}
.scale-v2__container {
position: relative;
z-index: 2;
}
.scale-v2__title,
.system-ten__heading h2 {
font-size: clamp(38px, 4.3vw, 64px) !important;
}
.scale-v2__grid {
margin-top: 46px !important;
}
/* Screen 4 centered header */
.pipeline-ref__inner {
display: flex;
flex-direction: column;
align-items: center;
}
.pipeline-ref__map {
width: 100%;
}
.pipeline-ref__subtitle b {
color: var(--heading-dark) !important;
font-weight: 700 !important;
}
/* Screen 5 centered header only */
.flow-choice__header {
max-width: 1020px;
margin-left: auto !important;
margin-right: auto !important;
}
.flow-choice__panel > h3.section-title {
margin-bottom: 0 !important;
}
/* Screen 7 text should be centered, not left */
.route-funnel-copy {
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
.route-funnel-line {
margin-left: auto !important;
margin-right: auto !important;
}
/* Card headings stay as card headings, not giant section headings */
.scale-v2-card__title,
.pipeline-ref-card h3,
.rubrics-scale__column h3,
.route-step-card h3,
.audience-card h3,
.system-step h3 {
letter-spacing: -.03em !important;
}
@media (max-width: 1024px) {
.section-title,
.system-ten__heading h2.section-title,
.scale-v2__title.section-title,
.pipeline-ref__title.section-title,
.route-funnel-title.section-title {
font-size: clamp(36px, 6.2vw, 54px) !important;
}
.scale-v2 {
padding-top: 48px !important;
}
}
@media (max-width: 720px) {
.section-cap,
.system-ten__badge,
.scale-v2__top-badge,
.pipeline-ref__badge,
.eyebrow.mini.section-cap {
min-height: 44px;
padding: 0 18px !important;
font-size: 11px !important;
letter-spacing: .08em !important;
white-space: normal;
text-align: center;
}
.section-title,
.system-ten__heading h2.section-title,
.scale-v2__title.section-title,
.pipeline-ref__title.section-title,
.flow-choice__header .section-title,
.rubrics-scale__header .section-title,
.route-funnel-title.section-title,
.section-heading.center .section-title,
.cta-card .section-title {
max-width: 360px;
font-size: 36px !important;
line-height: 1 !important;
}
.section-title span,
.section-title strong {
display: inline;
}
.section-subtitle,
.system-ten__heading > p:not(.system-ten__badge),
.scale-v2__subtitle,
.pipeline-ref__subtitle,
.route-funnel-text,
.section-heading.center > p:not(.section-cap):not(.eyebrow),
.cta-card > p:not(.section-cap):not(.eyebrow) {
max-width: 350px !important;
font-size: 15px !important;
line-height: 1.56 !important;
}
.system-ten {
padding-bottom: 34px !important;
}
.scale-v2 {
padding: 42px 0 66px !important;
}
}
/* FINAL FONT GUARD - do not add other font families below this line */
:root {
--font-heading: "Lorenzo Sans";
--font-text: "Lorenzo Sans";
}
body.landing-page, body *:not(svg):not(svg *) {
font-family: var(--font-text) !important;
}
body.landing-page h1, body.landing-page h2, body.landing-page h3, body.landing-page h4, body.landing-page h5, body.landing-page h6,
body.landing-page .section-title, body.landing-page .section-title__line, body.landing-page .section-title__accent,
body.landing-page .section-cap, body.landing-page .system-ten__badge, body.landing-page .scale-v2__top-badge,
body.landing-page .pipeline-ref__badge, body .flow-choice__badge, body.landing-page .rubrics-cabinet__badge,
body.landing-page .funnel-route__badge, body.landing-page .analytics-final__badge, body.landing-page .project-fit__badge,
body .next-step-contact__badge {
font-family: var(--font-heading) !important;
}
/* =========================================================
FINAL CANONICAL TYPOGRAPHY + SEAMLESS BACKGROUND V6
========================================================= */
html,
body.landing-page,
body * {
font-family: var(--font-main) !important;
}
body {
background: #fbf8f0 !important;
color: var(--text) !important;
}
body.landing-page p,
body.landing-page li,
body.landing-page span,
body.landing-page small,
body.landing-page label,
body.landing-page input,
body.landing-page textarea,
body.landing-page select,
body.landing-page .hero-text,
body.landing-page .section-subtitle,
body.landing-page .system-ten__heading p,
body.landing-page .scale-v2__subtitle,
body.landing-page .pipeline-ref__subtitle,
body.landing-page .flow-choice__control-head p,
body.landing-page .rubrics-cabinet__subtitle,
body.landing-page .funnel-route__subtitle,
body.landing-page .analytics-final__subtitle,
body.landing-page .project-fit__subtitle,
body.landing-page .next-step-contact__copy p,
body .scale-v2-card__text,
body .pipeline-ref-card p,
body .flow-choice__card p,
body .rubrics-cabinet p,
body .route-funnel-section p,
body .dashboard-section p {
font-family: var(--font-text) !important;
font-weight: 400 !important;
}
body.landing-page h1,
body.landing-page h2,
body.landing-page .hero-copy h1,
body.landing-page .hero-copy h1 span,
body.landing-page .hero-copy h1 strong,
body.landing-page .section-title,
body.landing-page .section-title__line,
body.landing-page .section-title__accent,
body.landing-page .section-heading h2,
body.landing-page .system-ten__heading h2,
body.landing-page .scale-v2__title,
body.landing-page .scale-v2__title-line,
body.landing-page .pipeline-ref__title,
body.landing-page .flow-choice__header h2,
body.landing-page .rubrics-cabinet__header h2,
body.landing-page .funnel-route__title,
body.landing-page .analytics-final__title,
body.landing-page .project-fit__header h2,
body.landing-page .next-step-contact__copy h2,
body .cta-card h2 {
font-family: var(--font-heading) !important;
font-weight: 500 !important;
}
body.landing-page h3,
body.landing-page h4,
body.landing-page h5,
body.landing-page h6,
body .scale-v2-card__title,
body .pipeline-ref-card h3,
body.landing-page .flow-choice__panel > h3,
body .flow-choice__card h5,
body .rubrics-cabinet h3,
body .route-funnel-section h3,
body .dashboard-section h3 {
font-family: var(--font-heading) !important;
font-weight: 700 !important;
}
body.landing-page .nav,
body.landing-page .nav a,
body .site-header,
body.landing-page .header-button,
body.landing-page .button,
body .button span,
body.landing-page .section-cap,
body.landing-page .system-ten__badge,
body.landing-page .scale-v2__top-badge,
body.landing-page .pipeline-ref__badge,
body .flow-choice__badge,
body.landing-page .rubrics-cabinet__badge,
body.landing-page .funnel-route__badge,
body.landing-page .analytics-final__badge,
body.landing-page .project-fit__badge,
body.landing-page .next-step-contact__badge,
body.landing-page .tag-row span,
body.landing-page .scale-v2-tag,
body .route-icons,
body .live-card {
font-family: var(--font-ui) !important;
font-weight: 700 !important;
}
/* Общий бесшовный фон для 10 экранов */
.page-bg {
background:
radial-gradient(circle at 11% 10%, rgba(47,198,201,.17), transparent 27%),
radial-gradient(circle at 89% 7%, rgba(223,174,69,.17), transparent 24%),
radial-gradient(circle at 8% 48%, rgba(47,198,201,.15), transparent 24%),
radial-gradient(circle at 92% 62%, rgba(223,174,69,.13), transparent 23%),
radial-gradient(circle at 18% 88%, rgba(158,231,227,.22), transparent 27%),
linear-gradient(180deg, #fffdf8 0%, #f8fbfa 27%, #f5fbfc 53%, #fffdf8 78%, #f8fbfa 100%) !important;
}
.page-bg::before,
.page-bg::after {
content: "";
position: absolute;
inset: -12% -8%;
pointer-events: none;
opacity: .62;
background:
radial-gradient(900px 280px at -7% 12%, transparent 91.4%, rgba(92,210,217,.52) 91.8%, transparent 92.5%),
radial-gradient(980px 300px at 106% 22%, transparent 91.5%, rgba(223,174,69,.38) 92%, transparent 92.7%),
radial-gradient(920px 300px at -6% 72%, transparent 91.4%, rgba(92,210,217,.42) 92%, transparent 92.7%),
radial-gradient(1040px 320px at 109% 86%, transparent 91.4%, rgba(223,174,69,.35) 92%, transparent 92.7%);
animation: bgLinesFloat 22s ease-in-out infinite alternate;
}
.page-bg::after {
opacity: .42;
filter: blur(1px);
transform: rotate(.8deg) scale(1.03);
animation-duration: 28s;
animation-direction: alternate-reverse;
}
@keyframes bgLinesFloat {
0% { transform: translate3d(0,0,0) scale(1); }
50% { transform: translate3d(0,-18px,0) scale(1.015); }
100% { transform: translate3d(0,18px,0) scale(1.02); }
}
main {
position: relative;
overflow: hidden;
}
main > section {
position: relative;
z-index: 1;
}
main > section:not(.hero-shell),
.system-ten,
.scale-v2,
.pipeline-ref,
.flow-choice,
.rubrics-scale,
.route-funnel-section,
.dashboard-section,
.section#choose,
.cta-section {
background: transparent !important;
}
.system-ten::before,
.system-ten::after,
.scale-v2::before,
.scale-v2::after,
.pipeline-ref::before,
.pipeline-ref::after,
.flow-choice::before,
.flow-choice::after,
.rubrics-scale::before,
.rubrics-scale::after,
.route-funnel-section::before,
.route-funnel-section::after,
.dashboard-section::before,
.dashboard-section::after,
.cta-section::before,
.cta-section::after {
pointer-events: none;
}
/* Дополнительные мягкие цветовые размывки на ключевых экранах */
.system-ten,
.scale-v2,
.pipeline-ref,
.flow-choice,
.rubrics-scale,
.route-funnel-section,
.dashboard-section,
.section#choose,
.cta-section {
background-image:
radial-gradient(circle at 8% 20%, rgba(47,198,201,.08), transparent 26%),
radial-gradient(circle at 92% 18%, rgba(223,174,69,.075), transparent 24%) !important;
}
/* Заголовки и капсулы строго по центру */
body.landing-page .section-cap,
body.landing-page .system-ten__badge,
body.landing-page .scale-v2__top-badge,
body.landing-page .pipeline-ref__badge,
body .flow-choice__badge,
body.landing-page .rubrics-cabinet__badge,
body.landing-page .funnel-route__badge,
body.landing-page .analytics-final__badge,
body.landing-page .project-fit__badge,
body .next-step-contact__badge {
display: inline-flex !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
justify-content: center !important;
}
body .section-heading,
body .system-ten__heading,
body .scale-v2__container,
body .pipeline-ref__inner,
body .flow-choice__header,
body .rubrics-cabinet__header,
body .funnel-route__header,
body .analytics-final__header,
body .project-fit__header,
body .next-step-contact__copy,
body .cta-card {
text-align: center !important;
}
/* Футер отдельно - тёмная опора */
.footer {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 38px 28px !important;
border-top: 0 !important;
background:
radial-gradient(circle at 12% 0%, rgba(47,198,201,.18), transparent 32%),
linear-gradient(135deg, #07183a 0%, #0b2456 58%, #082d3c 100%) !important;
color: rgba(255,255,255,.78) !important;
box-shadow: 0 -24px 70px rgba(7,24,58,.16);
}
.footer p,
.footer a,
.footer span {
color: rgba(255,255,255,.78) !important;
font-family: var(--font-text) !important;
font-weight: 400 !important;
}
@media (max-width: 767px) {
body.landing-page h1,
body.landing-page h2,
body.landing-page .section-title,
body.landing-page .system-ten__heading h2,
body.landing-page .scale-v2__title,
body.landing-page .pipeline-ref__title,
body.landing-page .flow-choice__header h2,
body.landing-page .rubrics-cabinet__header h2,
body.landing-page .funnel-route__title,
body.landing-page .analytics-final__title,
body.landing-page .project-fit__header h2,
body .next-step-contact__copy h2 {
font-weight: 500 !important;
}
}
/* =========================================================
FINAL OVERRIDE V7 - SOFTER SHARED BACKGROUND + DARK FOOTER
========================================================= */
.page-bg {
position: fixed;
inset: 0;
z-index: -10;
overflow: hidden;
background:
radial-gradient(circle at 8% 10%, rgba(75, 214, 214, 0.16), transparent 20%),
radial-gradient(circle at 94% 88%, rgba(76, 214, 214, 0.14), transparent 22%),
radial-gradient(circle at 90% 16%, rgba(223, 174, 69, 0.10), transparent 18%),
linear-gradient(180deg, #fffdf9 0%, #fbfcfb 35%, #f8fcfc 68%, #fffdf9 100%) !important;
}
.page-bg .glow {
opacity: .16 !important;
filter: blur(52px) !important;
}
.page-bg::before,
.page-bg::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}
.page-bg::before {
background:
radial-gradient(1180px 360px at -6% 18%, transparent 92.2%, rgba(119, 228, 228, 0.34) 92.6%, transparent 93%),
radial-gradient(1260px 380px at 108% 32%, transparent 92.2%, rgba(223, 174, 69, 0.24) 92.6%, transparent 93%),
radial-gradient(1320px 420px at 52% 66%, transparent 92.4%, rgba(255, 255, 255, 0.72) 92.8%, transparent 93.1%);
opacity: .72;
}
.page-bg::after {
background:
radial-gradient(1320px 420px at 102% 74%, transparent 92.1%, rgba(223, 174, 69, 0.18) 92.5%, transparent 92.9%),
radial-gradient(1280px 420px at -8% 86%, transparent 92.1%, rgba(122, 225, 225, 0.24) 92.5%, transparent 92.9%);
opacity: .54;
}
main {
position: relative;
overflow: hidden;
}
/* Убираем конкурирующие фоны и двойные линии внутри экранов */
.system-ten,
.scale-v2,
.pipeline-ref,
.flow-choice,
.rubrics-scale,
.route-funnel-section,
.dashboard-section,
.section#choose,
.cta-section {
background: transparent !important;
box-shadow: none !important;
}
.system-ten::before,
.system-ten::after,
.scale-v2::before,
.scale-v2::after,
.pipeline-ref::before,
.pipeline-ref::after,
.flow-choice::before,
.flow-choice::after,
.rubrics-scale::before,
.rubrics-scale::after,
.route-funnel-section::before,
.route-funnel-section::after,
.dashboard-section::before,
.dashboard-section::after,
.section#choose::before,
.section#choose::after,
.cta-section::before,
.cta-section::after {
display: none !important;
}
.system-ten,
.scale-v2,
.pipeline-ref,
.flow-choice,
.rubrics-scale,
.route-funnel-section,
.dashboard-section,
.section#choose,
.cta-section {
background-image:
radial-gradient(circle at 10% 18%, rgba(76, 214, 214, 0.05), transparent 22%),
radial-gradient(circle at 88% 16%, rgba(223, 174, 69, 0.05), transparent 18%) !important;
}
/* Сохраняем панели и карточки, но делаем фон спокойнее */
.system-ten__panel,
.flow-choice__panel,
.rubrics-cabinet,
.route-funnel,
.analytics-final,
.project-fit__grid,
.cta-card {
background: rgba(255, 255, 255, 0.58) !important;
border: 1px solid rgba(255, 255, 255, 0.78) !important;
box-shadow: 0 18px 52px rgba(16, 31, 58, 0.06) !important;
backdrop-filter: blur(18px) saturate(135%);
-webkit-backdrop-filter: blur(18px) saturate(135%);
}
.scale-v2 {
margin-top: -12px !important;
padding-top: 42px !important;
}
/* Новый футер как на референсе */
.site-footer {
width: min(1500px, calc(100% - 32px));
margin: 84px auto 0;
border-radius: 30px 30px 0 0;
overflow: hidden;
background:
radial-gradient(circle at 10% 12%, rgba(47, 198, 201, 0.18), transparent 26%),
radial-gradient(circle at 92% 100%, rgba(223, 174, 69, 0.14), transparent 28%),
linear-gradient(135deg, #031521 0%, #052234 54%, #072b39 100%);
box-shadow: 0 -12px 36px rgba(7, 24, 58, 0.08);
color: rgba(255, 255, 255, 0.92);
position: relative;
}
.site-footer::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: linear-gradient(90deg, #25c8cd 0%, #f0b544 100%);
}
.site-footer__inner {
width: min(1320px, calc(100% - 56px));
margin: 0 auto;
padding: 44px 0 26px;
}
.site-footer__top {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 28px;
}
.site-footer__brand {
display: inline-flex;
align-items: center;
}
.site-footer__logo {
width: 210px;
max-width: 100%;
height: auto;
}
.site-footer__lead {
margin: 0;
text-align: right;
color: rgba(255, 255, 255, 0.86);
font-size: 16px;
line-height: 1.5;
font-family: var(--font-text) !important;
}
.site-footer__divider {
height: 1px;
margin: 34px 0 38px;
background: linear-gradient(90deg, rgba(47, 198, 201, 0.30), rgba(255,255,255,0.12), rgba(223, 174, 69, 0.30));
}
.site-footer__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 32px;
}
.site-footer__col h3 {
margin: 0 0 18px;
color: #ffffff;
font-family: var(--font-ui) !important;
font-weight: 700 !important;
font-size: 26px;
line-height: 1.1;
}
.site-footer__col h3::after {
content: "";
display: block;
width: 54px;
height: 3px;
border-radius: 999px;
margin-top: 14px;
background: linear-gradient(90deg, #25c8cd 0%, #f0b544 100%);
}
.site-footer__col a,
.site-footer__col p {
display: block;
margin: 0 0 16px;
color: rgba(232, 244, 248, 0.88);
font-family: var(--font-text) !important;
font-size: 15px;
line-height: 1.5;
}
.site-footer__col a:hover {
color: #ffffff;
}
.site-footer__bottom {
margin-top: 34px;
padding-top: 24px;
border-top: 1px solid rgba(255,255,255,0.10);
text-align: center;
}
.site-footer__bottom p {
margin: 0;
color: rgba(232, 244, 248, 0.82);
font-size: 14px;
font-family: var(--font-text) !important;
}
@media (max-width: 980px) {
.site-footer__top {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
}
.site-footer__lead {
text-align: center;
}
.site-footer__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.site-footer {
width: min(100%, calc(100% - 16px));
margin-top: 64px;
border-radius: 24px 24px 0 0;
}
.site-footer__inner {
width: min(100% - 32px, 1320px);
padding: 32px 0 22px;
}
.site-footer__logo {
width: 180px;
}
.site-footer__grid {
grid-template-columns: 1fr;
gap: 20px;
}
.site-footer__col h3 {
font-size: 22px;
}
}
/* =========================================================
HEADER ANIMATED LOGO - rotating mandala + static text
Верхний логотип: вращается только мандала, текст остается статичным.
Файл видео должен лежать здесь:
assets/ornament_rotating_very_slow_transparent.gif.mp4
========================================================= */
.logo-brand--animated {
display: inline-flex;
align-items: center;
gap: 11px;
min-width: 178px;
flex: 0 0 auto;
}
.logo-ornament {
width: 48px;
height: 48px;
min-width: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
overflow: hidden;
background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.72), rgba(255,255,255,.18));
}
.logo-ornament__video {
display: block;
width: 54px;
height: 54px;
object-fit: contain;
mix-blend-mode: multiply;
}
.logo-brand-text {
display: inline-flex;
flex-direction: column;
justify-content: center;
gap: 0;
color: #0b1838;
font-family: var(--font-heading) !important;
font-weight: 800;
line-height: .94;
letter-spacing: -0.02em;
text-transform: none;
white-space: nowrap;
}
.logo-brand-text span:first-child {
font-size: 18px;
}
.logo-brand-text span:last-child {
font-size: 18px;
color: var(--teal);
}
.logo-image {
max-height: 46px;
width: auto;
object-fit: contain;
}
@media (max-width: 720px) {
.logo-brand--animated {
min-width: auto;
gap: 8px;
}
.logo-ornament {
width: 42px;
height: 42px;
min-width: 42px;
}
.logo-ornament__video {
width: 48px;
height: 48px;
}
.logo-brand-text span:first-child,
.logo-brand-text span:last-child {
font-size: 15px;
}
}
/* =========================================================
TASK PATCH - demo access + lead form
Minimal overrides; Lorenzo Sans remains unchanged.
========================================================= */
.header-actions {
display: flex;
align-items: center;
gap: 12px;
flex: 0 0 auto;
}
.header-button {
padding: 0 22px;
text-transform: uppercase;
white-space: nowrap;
}
.header-button-soft {
background: rgba(255, 255, 255, .78) !important;
border: 1px solid rgba(47, 198, 201, .42) !important;
color: #07183a !important;
box-shadow: 0 12px 28px rgba(17, 33, 67, .06) !important;
}
.header-button-soft:hover {
background: rgba(255, 255, 255, .94) !important;
}
.demo-section,
.cta-v2 {
position: relative;
width: min(1320px, calc(100% - 48px));
margin: 78px auto 0;
border-radius: 34px;
background:
radial-gradient(circle at 10% 8%, rgba(47,198,201,.12), transparent 28%),
radial-gradient(circle at 92% 92%, rgba(223,174,69,.12), transparent 30%),
rgba(255, 255, 255, .58);
border: 1px solid rgba(255,255,255,.78);
box-shadow: 0 18px 52px rgba(16, 31, 58, .06);
backdrop-filter: blur(18px) saturate(135%);
-webkit-backdrop-filter: blur(18px) saturate(135%);
}
.demo-section {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
align-items: center;
gap: 34px;
padding: clamp(34px, 4vw, 58px);
}
.demo-copy,
.cta-copy {
position: relative;
z-index: 1;
text-align: center;
}
.demo-copy .section-title,
.cta-copy .section-title {
max-width: 780px;
}
.demo-copy .section-title,
.demo-copy .section-title span,
.cta-copy .section-title,
.cta-copy .section-title span {
color: #07183a !important;
}
.demo-copy .section-title span,
.demo-copy .section-title strong {
display: block !important;
}
.demo-copy .section-title strong,
.cta-copy .section-subtitle strong {
color: var(--aqua) !important;
font-weight: inherit;
}
.section-subtitle {
max-width: 760px;
margin: 18px auto 0;
color: var(--muted);
font-size: 18px;
line-height: 1.58;
}
.demo-card,
.lead-form-v2 {
background: rgba(255,255,255,.82);
border: 1px solid rgba(255,255,255,.92);
border-radius: 28px;
box-shadow: 0 22px 56px rgba(17,33,67,.08);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.demo-card {
padding: 30px;
display: grid;
gap: 28px;
align-self: center;
}
.demo-card h3 {
margin: 0 0 18px;
color: #07183a;
font-size: 24px;
line-height: 1.14;
}
.demo-list {
display: grid;
gap: 10px;
list-style: none;
}
.demo-list li {
position: relative;
padding-left: 24px;
color: var(--text-soft) !important;
font-size: 16px;
font-weight: 500 !important;
}
.demo-list li::before {
content: "";
position: absolute;
left: 0;
top: .62em;
width: 8px;
height: 8px;
border-radius: 50%;
background: linear-gradient(135deg, var(--aqua), var(--gold));
box-shadow: 0 0 0 4px rgba(47,198,201,.10);
}
.btn {
min-height: 58px;
border: 0;
border-radius: 15px;
padding: 0 28px;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-ui) !important;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: .25s;
}
.btn:hover {
transform: translateY(-2px);
}
.btn-primary {
background: linear-gradient(135deg,#23c3c8,#4fd5d0);
color: #fff;
box-shadow: 0 18px 42px rgba(47,198,201,.25), inset 0 1px 0 rgba(255,255,255,.55);
}
.cta-v2 {
display: grid;
grid-template-columns: minmax(300px, .9fr) minmax(360px, 1.1fr);
align-items: start;
gap: 36px;
padding: clamp(34px, 4vw, 58px);
}
.cta-copy {
position: sticky;
top: 120px;
padding-top: 10px;
}
.lead-form-v2 {
padding: 28px;
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.lead-form-v2 label {
display: grid;
gap: 8px;
color: #142851;
font-family: var(--font-ui) !important;
font-size: 15px;
font-weight: 700;
text-align: left;
}
.lead-form-v2 input,
.lead-form-v2 select {
width: 100%;
min-height: 54px;
border-radius: 14px;
border: 1px solid rgba(47,198,201,.22);
background: rgba(255,255,255,.88);
color: #07183a;
padding: 0 16px;
font-size: 16px;
outline: none;
box-shadow: inset 0 1px 0 rgba(255,255,255,.88);
}
.lead-form-v2 input:focus,
.lead-form-v2 select:focus {
border-color: rgba(47,198,201,.62);
box-shadow: 0 0 0 4px rgba(47,198,201,.12);
}
.consent-list {
display: grid;
gap: 12px;
margin-top: 4px;
}
.lead-form-v2 .consent {
display: grid;
grid-template-columns: 24px 1fr;
align-items: start;
gap: 12px;
color: var(--muted);
font-family: var(--font-text) !important;
font-size: 13px;
font-weight: 400;
line-height: 1.45;
}
.lead-form-v2 .consent input {
width: 22px;
height: 22px;
min-height: 22px;
accent-color: var(--aqua);
margin-top: 1px;
}
.lead-form-v2 .consent a {
color: #009fa6;
font-weight: 700;
}
.lead-form-v2 .btn {
width: 100%;
margin-top: 8px;
}
.scale-v2-card {
display: flex;
flex-direction: column;
}
.scale-v2-card__content {
display: flex;
flex: 1;
flex-direction: column;
}
.scale-v2-card__text {
flex: 1;
}
.scale-v2-card__tags {
align-items: flex-start;
margin-top: auto !important;
padding-top: 22px;
}
@media (max-width: 1180px) {
.site-header {
gap: 16px;
padding: 0 18px;
}
.nav {
gap: 20px;
}
.header-actions {
gap: 8px;
}
.header-button {
min-width: 0;
padding: 0 16px;
font-size: 14px;
}
}
@media (max-width: 980px) {
.demo-section,
.cta-v2 {
grid-template-columns: 1fr;
}
.cta-copy {
position: relative;
top: auto;
}
}
@media (max-width: 767px) {
.site-header {
height: auto;
min-height: 66px;
align-items: center;
flex-wrap: wrap;
gap: 10px;
padding: 12px 14px;
}
.header-actions {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
}
.header-button {
width: 100%;
height: 44px;
font-size: 12px;
}
.demo-section,
.cta-v2 {
width: min(100% - 24px, 1320px);
margin-top: 56px;
padding: 24px 18px;
border-radius: 26px;
}
.section-subtitle {
font-size: 15px;
}
.demo-card,
.lead-form-v2 {
padding: 20px;
border-radius: 22px;
}
.hero-actions {
flex-direction: column !important;
align-items: stretch !important;
gap: 12px !important;
}
.hero-actions .button {
width: 100% !important;
}
}
/* FONT RESTORE: keep every site area on local Lorenzo Sans assets. */
:root {
--font-main: "Lorenzo Sans", sans-serif;
--font-heading: "Lorenzo Sans", sans-serif;
--font-text: "Lorenzo Sans", sans-serif;
--font-ui: "Lorenzo Sans", sans-serif;
}
html,
body.landing-page,
body *:not(svg):not(path):not(use) {
font-family: "Lorenzo Sans", sans-serif !important;
}
button,
input,
textarea,
select {
font-family: "Lorenzo Sans", sans-serif !important;
}
/* Hero H1 - force Lorenzo Sans Medium */
.hero-copy h1,
.hero-copy h1 span,
.hero-copy h1 strong {
font-family: "Lorenzo Sans" !important;
font-weight: 500 !important;
}
/* Demo title - compact three-line layout */
.demo-title {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0.02em !important;
line-height: 0.95 !important;
}
.demo-title span,
.demo-title strong {
display: block !important;
margin: 0 !important;
line-height: 0.95 !important;
}
/* CTA promo image */
.public-page .cta-promo-image-wrap {
margin-top: 34px;
width: 100%;
display: flex;
justify-content: center;
}
.public-page .cta-promo-image {
display: block;
width: min(100%, 580px);
height: auto;
border-radius: 28px;
object-fit: contain;
filter: drop-shadow(0 24px 48px rgba(9, 31, 63, 0.10));
}
@media (max-width: 768px) {
.public-page .cta-promo-image-wrap {
margin-top: 28px;
}
.public-page .cta-promo-image {
width: 100%;
border-radius: 22px;
}
}
/* Более крупная и яркая стрелка в поле "Тип/масштаб проекта" */
.public-page label:has(select[name="tariff"]) {
position: relative;
}
.public-page select[name="tariff"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 64px;
background-image: none;
}
.public-page label:has(select[name="tariff"])::after {
content: "⌄";
position: absolute;
right: 24px;
bottom: 23px;
font-size: 34px;
line-height: 1;
font-weight: 800;
color: #18caca;
pointer-events: none;
text-shadow: 0 4px 12px rgba(24, 202, 202, 0.35);
}
/* Footer creator link */
.public-page .site-footer__bottom a {
color: #18caca;
font-weight: 700;
text-decoration: none;
transition: color 0.25s ease, text-shadow 0.25s ease;
}
.public-page .site-footer__bottom a:hover {
color: #10b8b8;
text-shadow: 0 0 14px rgba(24, 202, 202, 0.35);
}
/* Login page hero design */
.auth-hero-page {
min-height: 100vh;
background:
radial-gradient(circle at 18% 18%, rgba(36, 205, 205, 0.16), transparent 34%),
radial-gradient(circle at 82% 12%, rgba(212, 174, 83, 0.16), transparent 30%),
linear-gradient(135deg, #f7fbf8 0%, #eef9f7 45%, #fff8ec 100%);
}
.auth-hero-page .page-bg {
display: none;
}
.login-hero-main {
min-height: 100vh;
padding: 42px 24px;
display: flex;
align-items: center;
justify-content: center;
}
.login-hero-shell {
width: min(100%, 1180px);
min-height: auto;
padding: clamp(34px, 5vw, 76px);
display: flex;
justify-content: center;
align-items: center;
}
.login-hero-card {
width: min(100%, 520px);
margin: 0 auto;
padding: clamp(30px, 4vw, 48px);
border: 1px solid rgba(255, 255, 255, 0.72);
border-radius: 36px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(244, 255, 253, 0.76)),
rgba(255, 255, 255, 0.72);
box-shadow:
0 28px 70px rgba(17, 76, 94, 0.13),
inset 0 1px 0 rgba(255, 255, 255, 0.85);
backdrop-filter: blur(18px);
text-align: center;
}
.login-hero-logo-wrap {
display: flex;
justify-content: center;
margin-bottom: 26px;
}
.login-hero-logo {
width: min(100%, 210px);
height: auto;
display: block;
}
.login-hero-copy {
margin-bottom: 28px;
}
.login-hero-copy .eyebrow {
margin-bottom: 12px;
color: #1a7a7a;
}
.login-hero-copy h1 {
margin: 0 0 14px;
font-size: clamp(34px, 4vw, 52px);
line-height: 0.96;
letter-spacing: -0.045em;
color: #123f48;
}
.login-hero-copy p {
margin: 0;
font-size: 16px;
line-height: 1.65;
color: rgba(18, 63, 72, 0.72);
}
.login-hero-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.login-hero-fields {
display: flex;
flex-direction: column;
gap: 18px;
}
.login-hero-fields label {
display: flex;
flex-direction: column;
gap: 9px;
text-align: left;
font-size: 14px;
font-weight: 700;
color: #174d56;
}
.login-hero-fields input {
width: 100%;
min-height: 58px;
padding: 0 20px;
border: 1px solid rgba(26, 122, 122, 0.18);
border-radius: 18px;
background: rgba(255, 255, 255, 0.88);
color: #123f48;
font-size: 16px;
outline: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.login-hero-fields input:focus {
border-color: rgba(24, 202, 202, 0.72);
background: #ffffff;
box-shadow:
0 0 0 4px rgba(24, 202, 202, 0.13),
inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
.login-hero-button {
width: 100%;
min-height: 58px;
justify-content: center;
margin-top: 4px;
}
.login-hero-forgot {
display: inline-flex;
margin-top: 22px;
color: #1a7a7a;
font-weight: 700;
text-decoration: none;
}
.login-hero-forgot:hover {
color: #18caca;
}
.login-hero-error {
margin: 0 0 20px;
padding: 12px 16px;
border-radius: 16px;
background: rgba(255, 232, 232, 0.78);
color: #a63a3a;
font-weight: 700;
}
@media (max-width: 768px) {
.login-hero-main {
padding: 24px 14px;
}
.login-hero-shell {
padding: 24px 16px;
border-radius: 30px;
}
.login-hero-card {
padding: 28px 20px;
border-radius: 28px;
}
.login-hero-logo {
width: min(100%, 180px);
}
.login-hero-copy h1 {
font-size: 34px;
}
}
/* Login page - remove inner form card background and height clipping */
.auth-hero-page .login-hero-main {
min-height: 100vh;
height: auto;
overflow: visible;
}
.auth-hero-page .login-hero-shell {
min-height: calc(100vh - 64px);
height: auto;
overflow: visible;
}
.auth-hero-page .login-hero-card {
background: transparent;
border: 0;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
padding-top: 0;
padding-bottom: 0;
overflow: visible;
}
.auth-hero-page .login-hero-form {
overflow: visible;
}
.auth-hero-page .login-hero-forgot {
margin-top: 28px;
margin-bottom: 0;
}
/* Login page - centered card without large hero background panel */
.auth-hero-page {
min-height: 100vh;
background:
radial-gradient(circle at 50% 10%, rgba(24, 202, 202, 0.08), transparent 32%),
radial-gradient(circle at 50% 92%, rgba(200, 150, 46, 0.08), transparent 28%),
linear-gradient(180deg, #fbfaf5 0%, #ffffff 52%, #fbf8ef 100%);
}
/* Убираем большую заднюю плашку hero-shell */
.auth-hero-page .login-hero-shell {
width: auto;
max-width: none;
min-height: auto;
padding: 0;
margin: 0;
background: transparent !important;
border: 0 !important;
border-radius: 0;
box-shadow: none !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* Центрируем одну карточку */
.auth-hero-page .login-hero-main {
min-height: 100vh;
height: auto;
padding: 48px 20px;
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
}
/* Возвращаем саму форму как отдельную красивую карточку */
.auth-hero-page .login-hero-card {
width: min(100%, 520px);
margin: 0 auto;
padding: 44px 42px 40px;
border-radius: 28px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(26, 122, 122, 0.10);
box-shadow:
0 28px 80px rgba(20, 58, 66, 0.14),
0 10px 30px rgba(20, 58, 66, 0.08);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
text-align: center;
overflow: visible;
}
/* Логотип сверху по центру */
.auth-hero-page .login-hero-logo-wrap {
margin-bottom: 26px;
}
.auth-hero-page .login-hero-logo {
width: min(100%, 220px);
height: auto;
}
/* Заголовочный блок компактнее */
.auth-hero-page .login-hero-copy {
margin-bottom: 34px;
}
.auth-hero-page .login-hero-copy .eyebrow {
margin-bottom: 16px;
color: #1a7a7a;
letter-spacing: 0.04em;
}
.auth-hero-page .login-hero-copy h1 {
margin: 0 0 18px;
color: #123f48;
font-size: clamp(38px, 4vw, 58px);
line-height: 0.96;
letter-spacing: -0.045em;
}
.auth-hero-page .login-hero-copy p {
max-width: 390px;
margin: 0 auto;
color: rgba(18, 63, 72, 0.68);
font-size: 17px;
line-height: 1.65;
}
/* Поля строго друг под другом */
.auth-hero-page .login-hero-fields {
display: flex;
flex-direction: column;
gap: 22px;
}
.auth-hero-page .login-hero-fields label {
display: flex;
flex-direction: column;
gap: 10px;
text-align: left;
color: #123f48;
font-size: 15px;
font-weight: 700;
}
.auth-hero-page .login-hero-fields input {
width: 100%;
min-height: 58px;
padding: 0 20px;
border-radius: 18px;
border: 1px solid rgba(26, 122, 122, 0.18);
background: rgba(255, 255, 255, 0.96);
color: #123f48;
font-size: 16px;
outline: none;
}
.auth-hero-page .login-hero-fields input:focus {
border-color: rgba(24, 202, 202, 0.72);
box-shadow: 0 0 0 4px rgba(24, 202, 202, 0.13);
}
.auth-hero-page .login-hero-button {
width: 100%;
min-height: 58px;
margin-top: 10px;
justify-content: center;
}
.auth-hero-page .login-hero-forgot {
display: inline-flex;
margin-top: 28px;
margin-bottom: 0;
color: #1a7a7a;
font-weight: 700;
text-decoration: none;
}
.auth-hero-page .login-hero-forgot:hover {
color: #18caca;
}
@media (max-width: 768px) {
.auth-hero-page .login-hero-main {
padding: 28px 14px;
}
.auth-hero-page .login-hero-card {
width: min(100%, 460px);
padding: 34px 22px 32px;
border-radius: 24px;
}
.auth-hero-page .login-hero-logo {
width: min(100%, 185px);
}
.auth-hero-page .login-hero-copy h1 {
font-size: 38px;
}
}
/* Login page - title in one line */
.auth-hero-page .login-hero-copy h1 {
font-size: clamp(30px, 3vw, 42px);
line-height: 1.08;
letter-spacing: -0.035em;
white-space: nowrap;
}
/* Login page - compact one-screen layout */
.auth-hero-page .login-hero-main {
min-height: 100vh;
padding: 22px 18px;
align-items: center;
}
.auth-hero-page .login-hero-card {
width: min(100%, 500px);
padding: 30px 38px 28px;
border-radius: 26px;
}
.auth-hero-page .login-hero-logo-wrap {
margin-bottom: 16px;
}
.auth-hero-page .login-hero-logo {
width: min(100%, 170px);
}
.auth-hero-page .login-hero-copy {
margin-bottom: 24px;
}
.auth-hero-page .login-hero-copy .eyebrow {
margin-bottom: 10px;
font-size: 14px;
}
.auth-hero-page .login-hero-copy h1 {
margin-bottom: 12px;
font-size: clamp(28px, 2.6vw, 36px);
line-height: 1.04;
}
.auth-hero-page .login-hero-copy p {
max-width: 360px;
font-size: 15px;
line-height: 1.45;
}
.auth-hero-page .login-hero-form {
gap: 16px;
}
.auth-hero-page .login-hero-fields {
gap: 16px;
}
.auth-hero-page .login-hero-fields label {
gap: 8px;
font-size: 14px;
}
.auth-hero-page .login-hero-fields input {
min-height: 50px;
border-radius: 16px;
font-size: 15px;
}
.auth-hero-page .login-hero-button {
min-height: 52px;
margin-top: 4px;
}
.auth-hero-page .login-hero-forgot {
margin-top: 18px;
font-size: 15px;
}
@media (max-height: 760px) {
.auth-hero-page .login-hero-main {
padding-top: 14px;
padding-bottom: 14px;
}
.auth-hero-page .login-hero-card {
padding-top: 24px;
padding-bottom: 22px;
}
.auth-hero-page .login-hero-logo {
width: min(100%, 150px);
}
.auth-hero-page .login-hero-copy {
margin-bottom: 18px;
}
.auth-hero-page .login-hero-copy h1 {
font-size: 30px;
}
.auth-hero-page .login-hero-copy p {
font-size: 14px;
line-height: 1.35;
}
.auth-hero-page .login-hero-fields {
gap: 12px;
}
.auth-hero-page .login-hero-fields input {
min-height: 46px;
}
.auth-hero-page .login-hero-button {
min-height: 48px;
}
.auth-hero-page .login-hero-forgot {
margin-top: 14px;
}
}
@media (max-width: 768px) {
.auth-hero-page .login-hero-card {
width: min(100%, 460px);
padding: 26px 22px 24px;
}
.auth-hero-page .login-hero-logo {
width: min(100%, 150px);
}
}
/* Admin auth page - restored internal style */
.admin-auth-page {
min-height: 100vh;
background:
radial-gradient(circle at 18% 18%, rgba(24, 202, 202, 0.10), transparent 30%),
radial-gradient(circle at 82% 12%, rgba(200, 150, 46, 0.10), transparent 28%),
linear-gradient(180deg, #fbfaf5 0%, #ffffff 52%, #fbf8ef 100%);
}
.admin-auth-page .page-bg {
display: none;
}
.admin-auth-main {
min-height: 100vh;
padding: 44px 20px;
display: flex;
align-items: center;
justify-content: center;
}
.admin-auth-card {
width: min(100%, 480px);
padding: 42px 40px 40px;
border-radius: 28px;
background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(26, 122, 122, 0.10);
box-shadow:
0 28px 80px rgba(20, 58, 66, 0.14),
0 10px 30px rgba(20, 58, 66, 0.08);
text-align: center;
}
.admin-auth-logo-wrap {
display: flex;
justify-content: center;
margin-bottom: 24px;
}
.admin-auth-logo {
width: min(100%, 190px);
height: auto;
display: block;
}
.admin-auth-card .kicker {
margin: 0 0 12px;
color: #1a7a7a;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.admin-auth-card h1 {
margin: 0 0 14px;
color: #123f48;
font-size: clamp(30px, 3vw, 42px);
line-height: 1.08;
letter-spacing: -0.035em;
}
.admin-auth-subtitle {
max-width: 360px;
margin: 0 auto 30px;
color: rgba(18, 63, 72, 0.68);
font-size: 15px;
line-height: 1.5;
}
.admin-auth-form {
display: flex;
flex-direction: column;
gap: 18px;
}
.admin-auth-form label {
display: flex;
flex-direction: column;
gap: 9px;
text-align: left;
color: #123f48;
font-size: 14px;
font-weight: 700;
}
.admin-auth-form input {
width: 100%;
min-height: 52px;
padding: 0 18px;
border-radius: 16px;
border: 1px solid rgba(26, 122, 122, 0.18);
background: rgba(255, 255, 255, 0.96);
color: #123f48;
font-size: 15px;
outline: none;
}
.admin-auth-form input:focus {
border-color: rgba(24, 202, 202, 0.72);
box-shadow: 0 0 0 4px rgba(24, 202, 202, 0.13);
}
.admin-auth-form .btn {
width: 100%;
min-height: 52px;
justify-content: center;
margin-top: 4px;
}
.admin-auth-error {
margin: 0 0 20px;
padding: 12px 16px;
border-radius: 16px;
background: rgba(255, 232, 232, 0.78);
color: #a63a3a;
font-weight: 700;
}
@media (max-width: 768px) {
.admin-auth-main {
padding: 28px 14px;
}
.admin-auth-card {
padding: 34px 22px 32px;
border-radius: 24px;
}
.admin-auth-logo {
width: min(100%, 165px);
}
}
/* Добавляем место сверху, чтобы контент не заезжал под фиксированный логотип */
.public-page .thank-you-header + main {
padding-top: 118px !important;
}
@media (max-width: 768px) {
.public-page .thank-you-header {
top: 18px !important;
}
.public-page .thank-you-header + main {
padding-top: 96px !important;
}
}
/* Добавляем место сверху, чтобы контент не заезжал под фиксированный логотип */
.public-page .thank-you-header + main {
padding-top: 118px !important;
}
@media (max-width: 768px) {
.public-page .thank-you-header {
top: 18px !important;
}
.public-page .thank-you-header + main {
padding-top: 96px !important;
}
}
/* Отступ сверху, чтобы контент не заезжал под фиксированный логотип */
body.thank-you-page .thank-you-header + main {
padding-top: 112px !important;
}
@media (max-width: 768px) {
body.thank-you-page .thank-you-header {
top: 18px !important;
}
body.thank-you-page .thank-you-header + main {
padding-top: 96px !important;
}
}
/* Отступ сверху, чтобы контент не заезжал под фиксированный логотип */
body.thank-you-page .thank-you-header + main {
padding-top: 112px !important;
}
@media (max-width: 768px) {
body.thank-you-page .thank-you-header {
top: 18px !important;
}
body.thank-you-page .thank-you-header + main {
padding-top: 96px !important;
}
}
/* Thank-you static page */
body.thank-you-static-page {
min-height: 100vh;
background:
radial-gradient(circle at 14% 18%, rgba(24, 202, 202, 0.13), transparent 32%),
radial-gradient(circle at 84% 22%, rgba(200, 150, 46, 0.12), transparent 30%),
linear-gradient(135deg, #f7fbf8 0%, #eef9f7 48%, #fff8ec 100%);
}
body.thank-you-static-page .page-bg {
display: none;
}
.thank-you-static {
width: min(100% - 32px, 1460px);
margin: 0 auto;
padding: 34px 0 72px;
}
.thank-you-static__header {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto 34px;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
}
.thank-you-static__logo-link {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.thank-you-static__logo {
display: block;
width: 210px;
max-width: 72vw;
height: auto;
}
.thank-you-static__hero {
display: block;
}
.thank-you-static__card {
width: min(100%, 1180px);
margin: 0 auto;
padding: clamp(46px, 6vw, 78px) clamp(24px, 5vw, 72px);
border-radius: 34px;
background:
radial-gradient(circle at 18% 20%, rgba(24, 202, 202, 0.10), transparent 34%),
radial-gradient(circle at 82% 80%, rgba(200, 150, 46, 0.10), transparent 30%),
rgba(255, 255, 255, 0.76);
border: 1px solid rgba(255, 255, 255, 0.72);
box-shadow:
0 34px 90px rgba(20, 58, 66, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
text-align: center;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.thank-you-static__badge {
width: fit-content;
margin: 0 auto 26px;
padding: 16px 34px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.78);
color: #18caca;
font-size: 16px;
line-height: 1;
font-weight: 900;
letter-spacing: 0.18em;
text-transform: uppercase;
box-shadow: 0 18px 44px rgba(20, 58, 66, 0.08);
}
.thank-you-static__card h1 {
margin: 0 0 18px;
color: #071a40;
font-size: clamp(54px, 7vw, 88px);
line-height: 0.95;
letter-spacing: -0.055em;
}
.thank-you-static__subtitle {
max-width: 720px;
margin: 0 auto 30px;
color: rgba(7, 26, 64, 0.68);
font-size: clamp(19px, 2.2vw, 26px);
line-height: 1.45;
font-weight: 600;
}
.thank-you-static__actions {
display: flex;
justify-content: center;
align-items: center;
margin: 0 0 42px;
}
.thank-you-static__button {
min-width: 286px;
min-height: 58px;
justify-content: center;
border: 0;
cursor: pointer;
}
.thank-you-static__steps {
width: 100%;
margin: 0 auto;
padding: clamp(28px, 4vw, 44px);
border-radius: 30px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(244, 255, 253, 0.62)),
rgba(255, 255, 255, 0.60);
border: 1px solid rgba(255, 255, 255, 0.76);
box-shadow:
0 24px 62px rgba(20, 58, 66, 0.09),
inset 0 1px 0 rgba(255, 255, 255, 0.86);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.thank-you-static__steps-kicker {
width: fit-content;
margin: 0 auto 14px;
padding: 12px 24px;
border-radius: 999px;
background: rgba(24, 202, 202, 0.10);
color: #1a7a7a;
font-size: 14px;
font-weight: 900;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.thank-you-static__steps h2 {
margin: 0 0 30px;
color: #071a40;
font-size: clamp(30px, 4vw, 48px);
line-height: 1;
letter-spacing: -0.045em;
text-align: center;
}
.thank-you-static__steps-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.thank-you-static__step {
min-height: 205px;
padding: 26px 24px;
border-radius: 24px;
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(26, 122, 122, 0.10);
box-shadow: 0 16px 42px rgba(20, 58, 66, 0.08);
text-align: left;
}
.thank-you-static__step span {
display: inline-flex;
margin-bottom: 18px;
padding: 9px 16px;
border-radius: 999px;
background: rgba(24, 202, 202, 0.12);
color: #1a7a7a;
font-size: 13px;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.thank-you-static__step h3 {
margin: 0 0 12px;
color: #071a40;
font-size: 23px;
line-height: 1.1;
letter-spacing: -0.025em;
}
.thank-you-static__step p {
margin: 0;
color: rgba(7, 26, 64, 0.66);
font-size: 16px;
line-height: 1.55;
}
@media (max-width: 920px) {
.thank-you-static {
width: min(100% - 24px, 720px);
padding-top: 24px;
}
.thank-you-static__steps-grid {
grid-template-columns: 1fr;
}
.thank-you-static__card {
border-radius: 28px;
}
}
@media (max-width: 560px) {
.thank-you-static__logo {
width: 178px;
}
.thank-you-static__card {
padding: 42px 18px;
}
.thank-you-static__badge {
padding: 13px 20px;
font-size: 13px;
letter-spacing: 0.12em;
}
.thank-you-static__button {
width: 100%;
min-width: 0;
}
}
/* Thank-you page - smaller accepted title and working demo form */
body.thank-you-static-page .thank-you-static__card h1 {
font-size: clamp(42px, 5.2vw, 68px) !important;
line-height: 1.02 !important;
letter-spacing: -0.045em !important;
margin-bottom: 20px !important;
}
body.thank-you-static-page .thank-you-static__actions {
display: flex !important;
justify-content: center !important;
align-items: center !important;
margin: 0 0 42px !important;
}
body.thank-you-static-page .thank-you-static__button {
min-width: 286px !important;
min-height: 58px !important;
justify-content: center !important;
border: 0 !important;
cursor: pointer !important;
text-align: center !important;
}
@media (max-width: 560px) {
body.thank-you-static-page .thank-you-static__card h1 {
font-size: 38px !important;
}
body.thank-you-static-page .thank-you-static__button {
width: 100% !important;
min-width: 0 !important;
}
}
/* Thank-you page - final title size */
body.thank-you-static-page .thank-you-static__card h1 {
font-size: clamp(30px, 4vw, 48px) !important;
line-height: 1 !important;
letter-spacing: -0.045em !important;
margin-bottom: 22px !important;
}
/* Thank-you page - remove outer background under "Как это работает" */
body.thank-you-static-page .thank-you-static__steps {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
body.thank-you-static-page .thank-you-static__steps::before,
body.thank-you-static-page .thank-you-static__steps::after {
display: none !important;
content: none !important;
}
/* Mobile header fix - keep only two buttons, hide menu links */
@media (max-width: 768px) {
.public-page .site-header .nav {
display: none !important;
}
.public-page .site-header {
display: grid !important;
grid-template-columns: 1fr !important;
justify-items: center !important;
gap: 14px !important;
padding: 18px 18px 20px !important;
}
.public-page .site-header .logo {
justify-self: center !important;
margin: 0 auto !important;
}
.public-page .site-header .header-actions {
width: 100% !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 12px !important;
}
.public-page .site-header .header-button {
width: 100% !important;
min-height: 58px !important;
padding: 0 12px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
white-space: nowrap !important;
font-size: 15px !important;
line-height: 1.1 !important;
}
}
@media (max-width: 420px) {
.public-page .site-header .header-actions {
gap: 10px !important;
}
.public-page .site-header .header-button {
min-height: 56px !important;
font-size: 14px !important;
letter-spacing: 0.02em !important;
}
}
/* Mobile header final - logo separate, buttons inside capsule */
@media (max-width: 768px) {
.public-page .site-header {
width: calc(100% - 28px) !important;
margin: 18px auto 18px !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: 1fr !important;
justify-items: center !important;
gap: 12px !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Логотип отдельной строкой, без капсулы кнопок */
.public-page .site-header .logo {
width: auto !important;
max-width: 230px !important;
min-height: 0 !important;
margin: 0 auto !important;
padding: 12px 24px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
background: rgba(255, 255, 255, 0.76) !important;
border: 1px solid rgba(255, 255, 255, 0.72) !important;
border-radius: 28px !important;
box-shadow: 0 18px 44px rgba(20, 58, 66, 0.08) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
}
.public-page .site-header .logo-ornament {
width: 44px !important;
height: 44px !important;
flex: 0 0 44px !important;
}
.public-page .site-header .logo-ornament__video,
.public-page .site-header .logo-ornament img,
.public-page .site-header .logo-ornament video {
width: 44px !important;
height: 44px !important;
object-fit: contain !important;
}
.public-page .site-header .logo-brand-text {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
opacity: 1 !important;
visibility: visible !important;
width: auto !important;
max-width: none !important;
height: auto !important;
overflow: visible !important;
color: #1a7a7a !important;
font-size: 22px !important;
line-height: 0.82 !important;
letter-spacing: -0.03em !important;
}
.public-page .site-header .logo-brand-text span {
display: block !important;
color: inherit !important;
white-space: nowrap !important;
}
/* Старое меню скрыто */
.public-page .site-header .nav {
display: none !important;
}
/* Кнопки внутри отдельной капсулы */
.public-page .site-header .header-actions {
width: 100% !important;
max-width: 500px !important;
margin: 0 auto !important;
padding: 10px !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
background: rgba(255, 255, 255, 0.78) !important;
border: 1px solid rgba(255, 255, 255, 0.72) !important;
border-radius: 28px !important;
box-shadow: 0 18px 44px rgba(20, 58, 66, 0.08) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
}
.public-page .site-header .header-button {
width: 100% !important;
min-height: 50px !important;
height: 50px !important;
padding: 0 10px !important;
border-radius: 18px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 13px !important;
line-height: 1 !important;
font-weight: 900 !important;
letter-spacing: 0.02em !important;
text-align: center !important;
white-space: nowrap !important;
}
}
@media (max-width: 420px) {
.public-page .site-header {
width: calc(100% - 24px) !important;
margin-top: 14px !important;
gap: 10px !important;
}
.public-page .site-header .logo {
max-width: 220px !important;
padding: 10px 20px !important;
}
.public-page .site-header .logo-ornament {
width: 40px !important;
height: 40px !important;
flex-basis: 40px !important;
}
.public-page .site-header .logo-ornament__video,
.public-page .site-header .logo-ornament img,
.public-page .site-header .logo-ornament video {
width: 40px !important;
height: 40px !important;
}
.public-page .site-header .logo-brand-text {
font-size: 20px !important;
}
.public-page .site-header .header-actions {
padding: 8px !important;
gap: 8px !important;
border-radius: 24px !important;
}
.public-page .site-header .header-button {
min-height: 48px !important;
height: 48px !important;
border-radius: 16px !important;
font-size: 12px !important;
}
}
/* Desktop fix
cd /home/ladica/web/systema.natalialadica.ru/site-fabrika-kontenta
cp src/server.js src/server.js.before-remove-scale-title-br.$(date +%Y-%m-%d-%H%M%S)
cp public/styles.css public/styles.css.before-scale-title-no-br.$(date +%Y-%m-%d-%H%M%S)
python3 <<'PY'
from pathlib import Path
file = Path("/home/ladica/web/systema.natalialadica.ru/site-fabrika-kontenta/src/server.js")
text = file.read_text(encoding="utf-8")
old = '''Система подстраивается
под ваш масштаб
'''
new = '''Система подстраиваетсяпод ваш масштаб
'''
if old not in text:
raise SystemExit("Не нашла точный заголовок scale-v2 с
. Файл не изменён.")
text = text.replace(old, new, 1)
file.write_text(text, encoding="utf-8")
print("Готово:
между строками заголовка удалён.")
PY
cat >> public/styles.css <<'CSS'
/* Scale section title - no br, controlled spacing */
@media (min-width: 769px) {
.public-page .scale-v2__title {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 8px !important;
line-height: 0.95 !important;
}
.public-page .scale-v2__title-line {
display: block !important;
margin: 0 !important;
line-height: 0.95 !important;
}
}
@media (max-width: 768px) {
.public-page .scale-v2__title {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 6px !important;
}
.public-page .scale-v2__title-line {
display: block !important;
margin: 0 !important;
}
}
/* Scale v2 title - final controlled desktop/mobile spacing */
.public-page .scale-v2__title {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
line-height: 0.96 !important;
margin-bottom: 24px !important;
}
.public-page .scale-v2__title br {
display: none !important;
}
.public-page .scale-v2__title .scale-v2__title-line {
display: block !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0.96 !important;
}
.public-page .scale-v2__title strong.scale-v2__title-line {
margin-top: 0 !important;
}
@media (max-width: 768px) {
.public-page .scale-v2__title {
gap: 7px !important;
line-height: 1 !important;
margin-bottom: 20px !important;
}
.public-page .scale-v2__title .scale-v2__title-line {
line-height: 1 !important;
}
}
/* Kabinet entry page - center login card correctly */
body.auth-hero-page {
min-height: 100vh !important;
margin: 0 !important;
overflow-x: hidden !important;
}
body.auth-hero-page .login-hero-main {
width: 100% !important;
max-width: none !important;
min-height: 100vh !important;
margin: 0 !important;
padding: 36px 20px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: visible !important;
}
body.auth-hero-page .login-hero-shell {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
min-height: auto !important;
margin: 0 auto !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
transform: none !important;
}
body.auth-hero-page .login-hero-card {
width: 520px !important;
max-width: calc(100vw - 40px) !important;
margin: 0 auto !important;
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
}
@media (max-width: 768px) {
body.auth-hero-page .login-hero-main {
padding: 24px 14px !important;
}
body.auth-hero-page .login-hero-card {
width: min(100%, 460px) !important;
max-width: calc(100vw - 28px) !important;
}
}
/* Logout pages */
body.logout-page {
min-height: 100vh;
background:
radial-gradient(circle at 18% 18%, rgba(24, 202, 202, 0.13), transparent 32%),
radial-gradient(circle at 82% 16%, rgba(200, 150, 46, 0.12), transparent 30%),
linear-gradient(135deg, #f7fbf8 0%, #eef9f7 48%, #fff8ec 100%);
}
body.logout-page .page-bg {
display: none;
}
.logout-shell {
width: min(100% - 32px, 1180px);
min-height: 100vh;
margin: 0 auto;
padding: 42px 0;
display: flex;
align-items: center;
justify-content: center;
}
.logout-card {
width: min(100%, 620px);
margin: 0 auto;
padding: clamp(34px, 5vw, 54px);
border-radius: 32px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(244, 255, 253, 0.74)),
rgba(255, 255, 255, 0.78);
border: 1px solid rgba(255, 255, 255, 0.76);
box-shadow:
0 32px 82px rgba(20, 58, 66, 0.13),
inset 0 1px 0 rgba(255, 255, 255, 0.88);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
text-align: center;
}
.logout-card--demo {
width: min(100%, 760px);
}
.logout-logo-link {
display: inline-flex;
justify-content: center;
align-items: center;
margin-bottom: 28px;
text-decoration: none;
}
.logout-logo {
display: block;
width: 210px;
max-width: 70vw;
height: auto;
}
.logout-copy {
margin-bottom: 30px;
}
.logout-kicker {
margin: 0 0 14px;
color: #1a7a7a;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.logout-copy h1 {
margin: 0 0 18px;
color: #071a40;
font-size: clamp(36px, 5vw, 58px);
line-height: 1;
letter-spacing: -0.045em;
}
.logout-copy p {
max-width: 560px;
margin: 0 auto;
color: rgba(7, 26, 64, 0.68);
font-size: 18px;
line-height: 1.55;
font-weight: 600;
}
.logout-main-link {
min-width: 280px;
min-height: 58px;
justify-content: center;
}
.logout-secondary-link {
display: inline-flex;
margin-top: 24px;
color: #1a7a7a;
font-weight: 800;
text-decoration: none;
}
.logout-secondary-link:hover {
color: #18caca;
}
.logout-lead-form {
text-align: left;
}
.logout-lead-form .btn {
width: 100%;
justify-content: center;
}
@media (max-width: 768px) {
.logout-shell {
width: min(100% - 24px, 620px);
padding: 24px 0;
}
.logout-card {
padding: 30px 20px;
border-radius: 26px;
}
.logout-logo {
width: 176px;
}
.logout-copy h1 {
font-size: 36px;
}
.logout-copy p {
font-size: 16px;
}
.logout-main-link {
width: 100%;
min-width: 0;
}
}
/* Mobile hero live-card - second block under visual */
@media (max-width: 768px) {
.public-page .hero-visual {
position: relative !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
overflow: visible !important;
gap: 18px !important;
}
.public-page .hero-visual .hero-video,
.public-page .hero-visual .hero-image {
position: relative !important;
inset: auto !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
order: 1 !important;
z-index: 1 !important;
}
.public-page .hero-visual .live-card {
position: relative !important;
inset: auto !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
order: 2 !important;
z-index: 2 !important;
width: min(100%, 430px) !important;
max-width: calc(100vw - 40px) !important;
margin: 0 auto !important;
display: grid !important;
grid-template-columns: 1fr !important;
gap: 16px !important;
padding: 22px 20px !important;
border-radius: 28px !important;
background: rgba(255, 255, 255, 0.84) !important;
border: 1px solid rgba(255, 255, 255, 0.78) !important;
box-shadow: 0 22px 54px rgba(20, 58, 66, 0.12) !important;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
}
.public-page .hero-visual .live-left {
width: 100% !important;
}
.public-page .hero-visual .live-status {
justify-content: flex-start !important;
}
.public-page .hero-visual .live-number {
justify-content: flex-start !important;
}
.public-page .hero-visual .live-divider {
width: 100% !important;
height: 1px !important;
min-height: 1px !important;
background: rgba(26, 122, 122, 0.14) !important;
}
.public-page .hero-visual .route-box {
width: 100% !important;
text-align: center !important;
}
.public-page .hero-visual .route-icons {
justify-content: center !important;
flex-wrap: nowrap !important;
}
.public-page .hero-visual .route-box strong {
display: block !important;
max-width: 100% !important;
font-size: 15px !important;
line-height: 1.35 !important;
white-space: normal !important;
}
.public-page .hero-visual .live-bars {
width: 100% !important;
justify-content: center !important;
}
}
@media (max-width: 420px) {
.public-page .hero-visual {
gap: 16px !important;
}
.public-page .hero-visual .live-card {
max-width: calc(100vw - 28px) !important;
padding: 20px 16px !important;
border-radius: 24px !important;
}
.public-page .hero-visual .live-number strong {
font-size: 42px !important;
}
.public-page .hero-visual .route-box strong {
font-size: 14px !important;
}
}
/* Mobile hero fix - hide broken fallback image alt text */
@media (max-width: 768px) {
.public-page .hero-visual .hero-fallback {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
.public-page .hero-visual .hero-video {
display: block !important;
width: 100% !important;
height: auto !important;
}
}
/* Mobile cabinet bottom navigation */
@media (max-width: 768px) {
body:not(.public-page) .app {
padding-bottom: 92px !important;
}
body:not(.public-page) .sidebar {
position: relative !important;
width: 100% !important;
min-height: auto !important;
padding: 34px 28px 24px !important;
background: rgba(255, 255, 255, 0.88) !important;
border-right: 0 !important;
border-bottom: 1px solid rgba(26, 122, 122, 0.10) !important;
box-shadow: 0 14px 34px rgba(20, 58, 66, 0.06) !important;
}
body:not(.public-page) .sidebar > img {
display: block !important;
width: 210px !important;
max-width: 72vw !important;
height: auto !important;
margin: 0 0 22px !important;
}
body:not(.public-page) .sidebar nav {
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
z-index: 9999 !important;
width: 100% !important;
min-height: 76px !important;
padding: 8px 8px calc(8px + env(safe-area-inset-bottom)) !important;
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
gap: 2px !important;
background: rgba(255, 255, 255, 0.94) !important;
border-top: 1px solid rgba(26, 122, 122, 0.12) !important;
box-shadow: 0 -14px 34px rgba(20, 58, 66, 0.10) !important;
backdrop-filter: blur(18px) !important;
-webkit-backdrop-filter: blur(18px) !important;
}
body:not(.public-page) .sidebar nav a {
min-width: 0 !important;
min-height: 62px !important;
padding: 7px 2px 6px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
border-radius: 18px !important;
background: transparent !important;
color: rgba(7, 26, 64, 0.68) !important;
font-size: 11px !important;
line-height: 1.05 !important;
font-weight: 800 !important;
text-align: center !important;
text-decoration: none !important;
white-space: nowrap !important;
}
body:not(.public-page) .sidebar nav a::before {
width: 26px !important;
height: 26px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 999px !important;
color: currentColor !important;
font-size: 22px !important;
line-height: 1 !important;
}
body:not(.public-page) .sidebar nav a[href="/kabinet/"]::before {
content: "⌂";
}
body:not(.public-page) .sidebar nav a[href="/kabinet/create/"]::before {
content: "✦";
}
body:not(.public-page) .sidebar nav a[href="/kabinet/history/"]::before {
content: "☷";
}
body:not(.public-page) .sidebar nav a[href="/kabinet/settings/"]::before {
content: "☰";
}
body:not(.public-page) .sidebar nav a[href="/logout"]::before {
content: "↪";
}
body:not(.public-page) .sidebar nav a:hover,
body:not(.public-page) .sidebar nav a:focus {
color: #1a7a7a !important;
background: rgba(24, 202, 202, 0.08) !important;
}
body:not(.public-page) .app-main {
padding-bottom: 110px !important;
}
}
@media (max-width: 420px) {
body:not(.public-page) .sidebar nav a {
font-size: 10px !important;
}
body:not(.public-page) .sidebar nav a::before {
font-size: 20px !important;
}
}
/* FORCE cabinet mobile greeting and bottom icon nav */
.app-main {
position: relative !important;
}
/* Desktop greeting chip */
.app-user-chip {
position: absolute !important;
top: 28px !important;
right: 42px !important;
z-index: 50 !important;
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
max-width: min(430px, calc(100% - 84px)) !important;
padding: 12px 18px !important;
border-radius: 999px !important;
background: rgba(255, 255, 255, 0.86) !important;
border: 1px solid rgba(26, 122, 122, 0.14) !important;
box-shadow: 0 18px 44px rgba(20, 58, 66, 0.09) !important;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
color: #123f48 !important;
font-size: 16px !important;
line-height: 1 !important;
font-weight: 800 !important;
white-space: nowrap !important;
text-decoration: none !important;
}
.app-user-chip__icon {
width: 30px !important;
height: 30px !important;
flex: 0 0 30px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 999px !important;
background: linear-gradient(135deg, #24caca, #8bcf91) !important;
color: #ffffff !important;
font-size: 13px !important;
line-height: 1 !important;
font-weight: 900 !important;
box-shadow: 0 10px 24px rgba(24, 202, 202, 0.24) !important;
}
.app-user-chip__text {
display: inline-block !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Mobile cabinet */
@media (max-width: 768px) {
body .app {
display: block !important;
min-height: 100vh !important;
padding-bottom: 96px !important;
}
/* Top area with logo */
body .app .sidebar {
position: relative !important;
width: 100% !important;
min-height: 0 !important;
height: auto !important;
padding: 24px 22px 16px !important;
margin: 0 !important;
display: block !important;
background: rgba(255, 255, 255, 0.92) !important;
border-right: 0 !important;
border-bottom: 1px solid rgba(26, 122, 122, 0.10) !important;
box-shadow: 0 14px 34px rgba(20, 58, 66, 0.06) !important;
overflow: visible !important;
}
body .app .sidebar > img {
display: block !important;
width: 198px !important;
max-width: 74vw !important;
height: auto !important;
margin: 0 !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
/* Bottom nav */
body .app .sidebar nav {
position: fixed !important;
left: 0 !important;
right: 0 !important;
top: auto !important;
bottom: 0 !important;
z-index: 99999 !important;
width: 100% !important;
min-height: 74px !important;
height: auto !important;
margin: 0 !important;
padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
gap: 4px !important;
background: rgba(255, 255, 255, 0.96) !important;
border-top: 1px solid rgba(26, 122, 122, 0.12) !important;
border-radius: 0 !important;
box-shadow: 0 -14px 34px rgba(20, 58, 66, 0.10) !important;
backdrop-filter: blur(18px) !important;
-webkit-backdrop-filter: blur(18px) !important;
}
body .app .sidebar nav a {
min-width: 0 !important;
min-height: 58px !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 18px !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: rgba(7, 26, 64, 0.68) !important;
text-decoration: none !important;
font-size: 0 !important;
line-height: 0 !important;
text-indent: -9999px !important;
overflow: hidden !important;
}
body .app .sidebar nav a::before {
text-indent: 0 !important;
width: 44px !important;
height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 16px !important;
color: currentColor !important;
font-size: 24px !important;
line-height: 1 !important;
font-weight: 800 !important;
}
body .app .sidebar nav a[href="/kabinet/"]::before {
content: "⌂" !important;
}
body .app .sidebar nav a[href="/kabinet/create/"]::before {
content: "✦" !important;
}
body .app .sidebar nav a[href="/kabinet/history/"]::before {
content: "▤" !important;
}
body .app .sidebar nav a[href="/kabinet/settings/"]::before {
content: "☰" !important;
}
body .app .sidebar nav a[href="/logout"]::before {
content: "↪" !important;
}
body .app .sidebar nav a:hover,
body .app .sidebar nav a:focus {
color: #1a7a7a !important;
background: rgba(24, 202, 202, 0.08) !important;
}
body .app .app-main {
width: 100% !important;
margin: 0 !important;
padding: 22px 20px 112px !important;
position: relative !important;
}
body .app .app-user-chip {
position: static !important;
width: 100% !important;
max-width: none !important;
margin: 0 0 18px !important;
padding: 12px 14px !important;
justify-content: flex-start !important;
border-radius: 24px !important;
font-size: 14px !important;
}
body .app .app-user-chip__icon {
width: 28px !important;
height: 28px !important;
flex-basis: 28px !important;
font-size: 12px !important;
}
}
@media (max-width: 420px) {
body .app .sidebar {
padding: 22px 20px 15px !important;
}
body .app .sidebar > img {
width: 190px !important;
}
body .app .sidebar nav {
min-height: 72px !important;
padding-left: 8px !important;
padding-right: 8px !important;
}
body .app .sidebar nav a::before {
width: 40px !important;
height: 40px !important;
font-size: 22px !important;
}
}
/* Mobile cabinet - restore logo above icon menu */
@media (max-width: 768px) {
body:not(.public-page) .app .sidebar {
display: block !important;
width: 100% !important;
min-height: auto !important;
height: auto !important;
padding: 28px 20px 14px !important;
margin: 0 !important;
background: rgba(255, 255, 255, 0.94) !important;
border-right: 0 !important;
border-bottom: 1px solid rgba(26, 122, 122, 0.10) !important;
box-shadow: 0 14px 34px rgba(20, 58, 66, 0.06) !important;
overflow: visible !important;
}
body:not(.public-page) .app .sidebar > img {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 220px !important;
max-width: 74vw !important;
height: auto !important;
margin: 0 auto 22px !important;
padding: 0 !important;
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
object-fit: contain !important;
z-index: 10 !important;
}
body:not(.public-page) .app .sidebar nav {
position: static !important;
inset: auto !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
width: 100% !important;
min-height: auto !important;
margin: 0 auto !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
gap: 4px !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
}
@media (max-width: 420px) {
body:not(.public-page) .app .sidebar {
padding-top: 26px !important;
}
body:not(.public-page) .app .sidebar > img {
width: 208px !important;
margin-bottom: 20px !important;
}
}
/* Mobile cabinet hero - spacing and START button */
@media (max-width: 768px) {
body:not(.public-page) .app-main h1 {
margin-bottom: 30px !important;
line-height: 1.05 !important;
}
body:not(.public-page) .app-main h1 + p {
margin-top: 0 !important;
margin-bottom: 34px !important;
line-height: 1.62 !important;
}
body:not(.public-page) .app-main .btn,
body:not(.public-page) .app-main button,
body:not(.public-page) .app-main a.btn {
min-height: 58px !important;
font-size: 18px !important;
line-height: 1 !important;
letter-spacing: 0.05em !important;
font-weight: 900 !important;
text-transform: uppercase !important;
}
}
@media (max-width: 420px) {
body:not(.public-page) .app-main h1 {
margin-bottom: 28px !important;
}
body:not(.public-page) .app-main h1 + p {
margin-bottom: 32px !important;
line-height: 1.6 !important;
}
body:not(.public-page) .app-main .btn,
body:not(.public-page) .app-main button,
body:not(.public-page) .app-main a.btn {
font-size: 17px !important;
}
}
/* Desktop only - /kabinet/ home hero width and spacing */
@media (min-width: 921px) {
body:not(.public-page) .app-main .cabinet-home-hero {
max-width: 1180px !important;
width: min(100%, 1180px) !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 58px 72px 64px !important;
}
body:not(.public-page) .app-main .cabinet-home-hero h1 {
max-width: 900px !important;
margin-bottom: 26px !important;
line-height: 1.04 !important;
}
body:not(.public-page) .app-main .cabinet-home-hero h1 + p {
max-width: 940px !important;
margin-top: 0 !important;
margin-bottom: 34px !important;
line-height: 1.58 !important;
}
body:not(.public-page) .app-main .cabinet-home-hero .btn,
body:not(.public-page) .app-main .cabinet-home-hero button,
body:not(.public-page) .app-main .cabinet-home-hero a.btn {
margin-top: 0 !important;
}
}
@media (min-width: 921px) and (max-width: 1320px) {
body:not(.public-page) .app-main .cabinet-home-hero {
max-width: 1080px !important;
width: min(100%, 1080px) !important;
padding: 52px 60px 58px !important;
}
body:not(.public-page) .app-main .cabinet-home-hero h1 {
max-width: 820px !important;
}
body:not(.public-page) .app-main .cabinet-home-hero h1 + p {
max-width: 860px !important;
}
}
/* Desktop only - make /kabinet/ home hero narrower */
@media (min-width: 921px) {
body:not(.public-page) .app-main .cabinet-home-hero {
width: 700px !important;
max-width: 700px !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 58px 64px 64px !important;
}
body:not(.public-page) .app-main .cabinet-home-hero h1 {
max-width: 100% !important;
width: 100% !important;
margin-bottom: 28px !important;
line-height: 1.04 !important;
}
body:not(.public-page) .app-main .cabinet-home-hero h1 + p {
max-width: 100% !important;
width: 100% !important;
margin-bottom: 36px !important;
line-height: 1.58 !important;
}
}
@media (min-width: 921px) and (max-width: 1200px) {
body:not(.public-page) .app-main .cabinet-home-hero {
width: min(100%, 700px) !important;
max-width: calc(100vw - 360px) !important;
padding: 52px 56px 58px !important;
}
}
/* Context start page - text column inside context-head */
@media (min-width: 921px) {
body:not(.public-page) .app-main .context-head {
width: 100% !important;
}
body:not(.public-page) .app-main .context-head h1,
body:not(.public-page) .app-main .context-head p,
body:not(.public-page) .app-main .context-head .kicker,
body:not(.public-page) .app-main .context-head .eyebrow,
body:not(.public-page) .app-main .context-head .section-cap {
max-width: 700px !important;
width: 700px !important;
text-align: left !important;
}
body:not(.public-page) .app-main .context-head h1 {
margin-bottom: 34px !important;
line-height: 1.04 !important;
letter-spacing: -0.045em !important;
}
body:not(.public-page) .app-main .context-head h1 br {
display: block !important;
}
body:not(.public-page) .app-main .context-head h1 + p {
margin-top: 0 !important;
max-width: 700px !important;
width: 700px !important;
line-height: 1.56 !important;
}
}
@media (max-width: 920px) {
body:not(.public-page) .app-main .context-head h1 br {
display: block !important;
}
body:not(.public-page) .app-main .context-head h1 {
margin-bottom: 26px !important;
line-height: 1.06 !important;
}
body:not(.public-page) .app-main .context-head h1 + p {
line-height: 1.58 !important;
}
}
/* Result page - top section spacing */
body:not(.public-page) .app-main .panel:first-of-type {
padding-top: 58px !important;
padding-bottom: 56px !important;
}
body:not(.public-page) .app-main .panel:first-of-type .kicker,
body:not(.public-page) .app-main .panel:first-of-type .eyebrow,
body:not(.public-page) .app-main .panel:first-of-type .section-cap {
display: block !important;
margin-bottom: 28px !important;
line-height: 1.25 !important;
}
body:not(.public-page) .app-main .panel:first-of-type h1 {
margin-top: 0 !important;
margin-bottom: 24px !important;
line-height: 1.04 !important;
}
body:not(.public-page) .app-main .panel:first-of-type h1 + p {
margin-top: 0 !important;
line-height: 1.55 !important;
}
/* Mobile result page spacing */
@media (max-width: 768px) {
body:not(.public-page) .app-main .panel:first-of-type {
padding-top: 42px !important;
padding-bottom: 42px !important;
}
body:not(.public-page) .app-main .panel:first-of-type .kicker,
body:not(.public-page) .app-main .panel:first-of-type .eyebrow,
body:not(.public-page) .app-main .panel:first-of-type .section-cap {
margin-bottom: 22px !important;
}
body:not(.public-page) .app-main .panel:first-of-type h1 {
margin-bottom: 20px !important;
line-height: 1.06 !important;
}
body:not(.public-page) .app-main .panel:first-of-type h1 + p {
line-height: 1.58 !important;
}
}
/* CTA promo media - video replacement for promo-fabriki.webp */
.public-page .cta-promo-video {
display: block !important;
width: 100% !important;
height: auto !important;
object-fit: contain !important;
border-radius: inherit !important;
}
.public-page .cta-promo-image-wrap video {
max-width: 100% !important;
}