File: /var/www/quadcode.com/src/scss/lp/ai-analyst.css
.popupForm {
.container {
padding: 0 !important;
width: 100%;
@media (max-width: 1024px) {
padding: 0 16px !important;
}
}
}
body {
&.banner {
margin-top: 60px !important;
@media (max-width: 767px) {
margin-top: 60px;
}
}
}
.lang {
@media (max-width: 768px) {
display: none;
}
}
.topbar__right {
display: flex; align-items: center; justify-content: space-between; gap: 22px;
}
.logo { width: 168px; background-image: none; height: auto; }
<style>
@font-face {
font-family: "SuisseIntl";
src: local("Suisse Intl"), local("SuisseIntl-Regular"), local("Suisse Int'l Regular");
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: "SuisseIntl";
src: local("Suisse Intl Medium"), local("SuisseIntl-Medium"), local("Suisse Int'l Medium");
font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
font-family: "SuisseIntl";
src: local("Suisse Intl Bold"), local("SuisseIntl-Bold"), local("Suisse Int'l Bold");
font-weight: 700; font-style: normal; font-display: swap;
}
:root {
--bg: #f4f6fa;
--surface: #ffffff;
--text: #111722;
--text-secondary: #4e5b6e;
--muted: #5a6576;
--line: #e3e9f0;
--dark-1: #0b1018;
--dark-2: #101724;
--dark-3: #171f2f;
--dark-line: #2a3448;
--accent: #e62334;
--accent-deep: #c71929;
--accent-glow: rgba(230, 35, 52, 0.15);
--purple: #6c5ce7;
--purple-deep: #5a4bd1;
--blue: #3b82f6;
--radius-lg: 28px;
--radius-md: 20px;
--radius-sm: 14px;
}
* { box-sizing: border-box; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
font-family: "SuisseIntl", "Suisse Int'l", "Suisse", "Proxima Nova", "Segoe UI", system-ui, sans-serif;
font-size: 17px;
color: var(--text);
line-height: 1.55;
background: var(--bg);
overflow-x: hidden;
}
@media (hover: none) and (pointer: coarse) {
a, button, .btn { -webkit-tap-highlight-color: rgba(230, 35, 52, 0.12); touch-action: manipulation; }
}
img { display: block; max-width: 100%; }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
section { scroll-margin-top: 90px; }
.container {
width: min(1200px, calc(100% - 48px));
margin: 0 auto;
}
/* ═══ Topbar ═══ */
.topbar {
position: fixed; top: 0; left: 0; right: 0;
padding-top: env(safe-area-inset-top, 0);
z-index: 80;
background: rgba(252, 253, 255, 0.72);
border-bottom: 1px solid rgba(214, 224, 236, 0.85);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: background 0.25s ease, border-color 0.25s ease;
}
.topbar.is-scrolled {
background: rgba(250, 252, 255, 0.94);
border-bottom-color: rgba(206, 218, 232, 0.9);
}
.topbar__inner {
min-height: 72px;
display: flex; align-items: center; justify-content: space-between; gap: 22px;
}
.logo { width: 168px; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a {
color: var(--text-secondary); text-decoration: none; font-size: 14px; font-weight: 600;
position: relative; transition: color 0.2s ease;
}
.nav a:hover { color: var(--text); }
.nav a::after {
content: ""; position: absolute; bottom: -4px; left: 0; width: 100%; height: 2px;
background: var(--accent); border-radius: 1px; transform: scaleX(0); transform-origin: left;
transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav a:hover::after { transform: scaleX(1); }
/* ═══ Buttons ═══ */
.btn {
border: 0; border-radius: 14px; height: 48px; padding: 0 26px;
display: inline-flex; align-items: center; justify-content: center;
text-decoration: none; font-size: 15px; font-weight: 700; cursor: pointer;
position: relative; overflow: visible; isolation: isolate;
transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn--primary {
background: linear-gradient(180deg, #ff3d4b, var(--accent));
color: #fff; box-shadow: 0 14px 30px rgba(230, 35, 52, 0.28);
}
.btn--primary:hover { transform: translateY(-1px); background: linear-gradient(180deg, #ff3847, var(--accent-deep)); }
/* Shimmer button (Chamaac-style): text-only sweep, duration ~1.2s */
.btn--shimmer-text { overflow: hidden; }
.btn--shimmer-text .btn__label {
position: relative;
display: inline-block;
color: transparent;
background: linear-gradient(
90deg,
rgba(255,255,255,.65) 0%,
rgba(255,255,255,.65) 40%,
#fff 50%,
rgba(255,255,255,.65) 60%,
rgba(255,255,255,.65) 100%
);
background-size: 200% 100%;
background-position: 100% 50%;
-webkit-background-clip: text;
background-clip: text;
animation: btn-shimmer-sweep 1.2s ease-in-out infinite;
}
@keyframes btn-shimmer-sweep {
0% { background-position: 100% 50%; }
100% { background-position: -100% 50%; }
}
/* Glowing border button: subtle moving gradient on border only, no overlay */
.btn--ghost {
height: 46px;
border: 2px solid transparent;
background: linear-gradient(#fff, #fff) padding-box,
linear-gradient(105deg, #e2e8f0, #cbd5e1, #e2e8f0, #cbd5e1, #e2e8f0) border-box;
background-size: 100% 100%, 200% 200%;
background-position: 0 0, 0% 0%;
color: #2f3a4c;
border-radius: 14px;
animation: btn-border-flow 4s ease-in-out infinite;
}
.btn--ghost:hover { box-shadow: 0 6px 20px rgba(0,0,0,.07); }
@keyframes btn-border-flow {
0%, 100% { background-position: 0 0, 0% 0%; }
50% { background-position: 0 0, 100% 100%; }
}
.btn--sm { height: 40px; padding: 0 20px; font-size: 14px; border-radius: 12px; }
/* ═══ Hero ═══ */
.hero {
position: relative; min-height: 700px; padding: 132px 0 168px; overflow: hidden;
background: radial-gradient(ellipse 80% 60% at 50% 20%, rgba(230, 35, 52, 0.04), transparent 60%),
radial-gradient(circle at 8% -12%, #ffffff 0%, #f5f8fc 34%, var(--bg) 100%);
}
.hero__layout { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 42px; }
.hero__content { max-width: 880px; }
.badge {
display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px 6px 8px;
background: rgba(230, 35, 52, 0.06); border: 1px solid rgba(230, 35, 52, 0.12);
border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--accent);
margin-bottom: 20px;
}
.badge__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse-dot 2s ease infinite; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.4); } }
.hero h1 {
margin: 0; font-size: clamp(36px, 5vw, 62px); line-height: 1.1; letter-spacing: -0.03em;
color: var(--text);
}
.hero h1 .typing-line {
display: block; color: var(--accent); position: relative;
min-height: 1.15em;
}
.typing-line .typed-text {
border-right: 2px solid var(--accent);
padding-right: 4px;
animation: blink-caret 0.75s step-end infinite;
}
@keyframes blink-caret { 0%, 100% { border-color: var(--accent); } 50% { border-color: transparent; } }
.hero p {
margin: 22px auto 0; max-width: 640px; color: var(--text-secondary); font-size: 19px; line-height: 1.6;
}
.hero__actions { display: flex; gap: 14px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
/* Hero logo carousel (press / partners) */
.hero-logos {
margin-top: 48px;
padding-top: 32px;
width: 100%;
position: relative;
z-index: 1;
}
.hero-logos__track {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
flex-wrap: nowrap;
}
.hero-logos__slot {
width: 200px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.hero-logos__slot-inner {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.hero-logos__slot-inner .hero-logos__img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.hero-logos__img {
max-width: 160px;
max-height: 40px;
width: auto;
height: auto;
object-fit: contain;
opacity: 0;
transition: opacity 0.25s ease;
}
.hero-logos__slot:hover .hero-logos__img.is-visible { opacity: 0.7; }
.hero-logos__img.is-visible {
opacity: 0.45;
animation: hero-logo-in 0.5s ease-out forwards;
}
.hero-logos__img.is-visible.is-exit {
animation: hero-logo-out 0.5s ease-in forwards;
}
@keyframes hero-logo-in {
from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); filter: blur(6px); }
to { opacity: 0.45; transform: translate(-50%, -50%); filter: blur(0); }
}
@keyframes hero-logo-out {
from { opacity: 0.45; transform: translate(-50%, -50%); filter: blur(0); }
to { opacity: 0; transform: translate(-50%, calc(-50% - 12px)); filter: blur(6px); }
}
@media (prefers-reduced-motion: reduce) {
.hero-logos__img.is-visible { animation: none; }
.hero-logos__img.is-visible.is-exit { animation: none; }
}
@media (max-width: 1024px) {
.hero-logos__slot:nth-child(n+3) { display: none; }
}
@media (max-width: 768px) {
.hero-logos__slot:nth-child(n+2) { display: none; }
.hero-logos { margin-top: 36px; padding-top: 24px; }
.hero-logos__slot { width: 180px; height: 48px; }
}
/* Hero floating grid lines (decorative) */
.hero__grid {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image:
linear-gradient(rgba(0,0,0,.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,0,0,.02) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%);
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%);
}
/* Hero analytics icons (floating around content; scroll moves them down) */
.hero__icons {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
overflow: hidden;
--hero-progress: 0;
}
.hero__icon {
position: absolute;
width: 52px; height: 52px;
background: #fff;
border-radius: 14px;
box-shadow: 0 8px 24px rgba(0,0,0,.08);
display: flex; align-items: center; justify-content: center;
--tx: 0px;
--drift: 90px;
--speed: 1;
transform: translate3d(var(--tx), calc(var(--hero-progress) * var(--drift) * var(--speed)), 0)
scale(calc(1 - (var(--hero-progress) * 0.06)));
opacity: calc(1 - (var(--hero-progress) * 0.8));
filter: blur(calc(var(--hero-progress) * 2px));
will-change: transform, opacity, filter;
}
.hero__icon svg { width: 26px; height: 26px; stroke: var(--text-secondary); }
.hero__icon:nth-child(1) { top: 18%; left: 10%; --speed: .78; --drift: 72px; }
.hero__icon:nth-child(2) { top: 12%; right: 14%; --speed: .84; --drift: 84px; }
.hero__icon:nth-child(3) { top: 38%; left: 6%; --speed: 1.06; --drift: 102px; }
.hero__icon:nth-child(4) { top: 32%; right: 8%; --speed: .96; --drift: 94px; }
.hero__icon:nth-child(5) { top: 58%; left: 12%; --speed: 1.18; --drift: 116px; }
.hero__icon:nth-child(6) { top: 52%; right: 10%; --speed: 1.12; --drift: 110px; }
.hero__icon:nth-child(7) { bottom: 22%; left: 18%; --speed: 1.22; --drift: 118px; }
.hero__icon:nth-child(8) { bottom: 18%; right: 16%; --speed: 1.16; --drift: 114px; }
@media (max-width: 900px) {
.hero__icons { display: none; }
}
.hero__content, .hero__actions { position: relative; z-index: 1; }
/* ═══ Sections ═══ */
.section { padding: 100px 0; }
.section--dark {
background: linear-gradient(180deg, var(--dark-1) 0%, var(--dark-2) 100%);
color: #fff;
}
.section--dark .section-title { color: #fff; }
.section--dark .section-text { color: #a9b7ca; }
.section--alt { background: #fff; }
.section-label {
display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--accent); margin-bottom: 12px;
}
.section-title {
margin: 0; font-size: clamp(30px, 3.8vw, 50px); line-height: 1.08; letter-spacing: -0.025em;
}
.section-text { margin: 16px 0 0; color: var(--text-secondary); font-size: 18px; line-height: 1.6; }
.section-head { max-width: 700px; }
.section-head--center { text-align: center; margin-left: auto; margin-right: auto; }
/* ═══ Problem Section ═══ */
.problem-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-top: 48px;
}
.problem-grid > :first-child {
position: relative;
z-index: 2;
margin-right: -26px;
}
.problem-steps {
display: flex; flex-direction: column; gap: 8px;
}
.problem-step {
display: flex; align-items: center; gap: 14px;
padding: 8px 0;
border-radius: 0;
background: transparent;
border: 0;
transition: transform 0.2s ease;
}
.problem-step:hover { transform: translateX(2px); }
.problem-step__icon {
width: 24px;
height: 24px;
border-radius: 0;
display: grid;
place-items: center;
flex-shrink: 0;
background: transparent;
color: var(--accent);
}
.problem-step p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-secondary); }
.problem-step strong { color: var(--text); }
.problem-visual {
background: transparent;
border-radius: 0;
overflow: hidden;
position: relative;
border: 0;
box-shadow: none;
z-index: 1;
width: calc(100% + 220px);
max-width: none;
margin-left: -76px;
margin-right: -120px;
}
.pv-header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 24px;
border-bottom: 1px solid var(--line);
background: linear-gradient(180deg, #fbfcfe 0%, #f6f8fc 100%);
}
.pv-header__title {
font-size: 13px;
font-weight: 700;
color: #6b778b;
letter-spacing: .03em;
text-transform: uppercase;
}
.pv-header__period {
font-size: 12px;
color: #6b778b;
background: #fff;
border-radius: 8px;
padding: 4px 10px;
border: 1px solid #e6edf6;
}
.pv-body { padding: 10px 8px; }
.pv-stream {
border: 0;
border-radius: 0;
background: transparent;
padding: 0;
position: relative;
overflow: hidden;
/* Subtle edge fade via mask, no visible overlays */
-webkit-mask-image: linear-gradient(
90deg,
transparent 0%,
rgba(0, 0, 0, 0.45) 6%,
#000 13%,
#000 87%,
rgba(0, 0, 0, 0.45) 94%,
transparent 100%
);
mask-image: linear-gradient(
90deg,
transparent 0%,
rgba(0, 0, 0, 0.45) 6%,
#000 13%,
#000 87%,
rgba(0, 0, 0, 0.45) 94%,
transparent 100%
);
}
.pv-stream__row {
--dur: 38s;
--gap: 14px;
display: flex;
gap: var(--gap);
overflow: hidden;
padding: 8px 0;
}
.pv-stream__track {
display: flex;
flex-shrink: 0;
min-width: max-content;
gap: var(--gap);
animation: pvMarqueeX var(--dur) linear infinite;
will-change: transform;
}
.pv-stream__row--reverse .pv-stream__track { animation-direction: reverse; }
@keyframes pvMarqueeX {
from { transform: translateX(0); }
to { transform: translateX(calc(-100% - var(--gap))); }
}
.pv-chip {
display: inline-flex;
align-items: center;
gap: 10px;
white-space: nowrap;
border-radius: 12px;
border: 0;
background: rgba(255,255,255,.9);
padding: 10px 14px;
box-shadow: 0 5px 14px rgba(10, 16, 24, 0.06);
}
.pv-chip__dot {
width: 12px;
height: 12px;
border-radius: 4px;
flex-shrink: 0;
}
.pv-chip__dot--up { background: #22c55e; }
.pv-chip__dot--down { background: var(--accent); }
.pv-chip__dot--flat { background: #f59e0b; }
.pv-chip__label {
font-size: 15px;
font-weight: 600;
color: #1f2a40;
}
.pv-chip__delta {
font-size: 15px;
font-weight: 700;
}
.pv-chip__delta--up { color: #1d8f55; }
.pv-chip__delta--down { color: var(--accent); }
.pv-chip__delta--flat { color: #b7791f; }
.pv-breakdown,
.pv-alert-bar { display: none; }
/* ═══ Solution Section ═══ */
.solution-cards {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px;
}
.solution-card {
background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
padding: 32px 24px; text-align: center;
transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease;
}
.solution-card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(0,0,0,.08); }
.solution-card__icon {
width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
margin: 0 auto 18px; font-size: 24px;
}
.solution-card__icon--red { background: linear-gradient(135deg, rgba(230,35,52,.1), rgba(230,35,52,.05)); color: var(--accent); }
.solution-card__icon--blue { background: linear-gradient(135deg, rgba(59,130,246,.1), rgba(59,130,246,.05)); color: var(--blue); }
.solution-card__icon--purple { background: linear-gradient(135deg, rgba(108,92,231,.1), rgba(108,92,231,.05)); color: var(--purple); }
.solution-card h3 { margin: 0 0 8px; font-size: 19px; }
.solution-card p { margin: 0; color: var(--text-secondary); font-size: 15px; line-height: 1.55; }
/* ═══ Showcase / Conversation Studio ═══ */
.showcase { margin-top: 56px; }
.flow-lab {
background: linear-gradient(165deg, #f7f8fc 0%, #eff2f8 50%, #f4f6fb 100%);
border-radius: 24px;
border: 1px solid rgba(25, 39, 71, 0.08);
box-shadow: 0 18px 48px rgba(4, 8, 14, 0.08);
padding: 28px;
display: grid;
grid-template-columns: 320px 1fr;
gap: 24px;
align-items: stretch;
}
.flow-rail { display: flex; flex-direction: column; gap: 10px; }
.flow-rail__title {
font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--accent); margin-bottom: 8px;
}
.flow-step {
border: 1px solid var(--line);
border-radius: 12px;
background: #fff;
padding: 12px;
text-align: left;
cursor: pointer;
transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.flow-step:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(4,8,14,.08); }
.flow-step.is-active { border-color: rgba(230,35,52,.3); box-shadow: 0 0 0 3px rgba(230,35,52,.08); }
.flow-step__top { display: flex; align-items: center; gap: 8px; }
.flow-step__num {
width: 24px; height: 24px; border-radius: 8px;
background: linear-gradient(135deg, var(--accent), #ff6b6b);
color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center;
}
.flow-step__label { font-size: 14px; font-weight: 700; color: var(--text); }
.flow-step__meta {
margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap;
}
.flow-tag {
padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
background: #eef2f7; color: #5b6575; border: 1px solid #e2e8f0;
}
.flow-stage {
background: #fff; border-radius: 16px; border: 1px solid var(--line);
box-shadow: 0 14px 34px rgba(4, 8, 14, 0.10);
overflow: hidden; display: flex; flex-direction: column;
}
.flow-stage__bar {
height: 42px; border-bottom: 1px solid var(--line);
display: flex; align-items: center; gap: 8px; padding: 0 14px;
background: linear-gradient(180deg, #f5f7fb 0%, #eef2f7 100%);
}
.flow-dot { width: 8px; height: 8px; border-radius: 50%; background: #d5dbe6; }
.flow-stage__title { margin-left: 8px; font-size: 12px; font-weight: 600; color: #607089; }
.flow-chat {
padding: 12px 14px 10px;
border-bottom: 1px solid #edf1f6;
background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}
.flow-msg {
max-width: 84%;
padding: 10px 12px;
border-radius: 12px;
font-size: 13px;
line-height: 1.4;
opacity: 0;
transform: translateY(6px);
transition: opacity .3s ease, transform .3s ease;
}
.flow-msg.is-visible { opacity: 1; transform: translateY(0); }
.flow-msg--user {
margin-left: auto;
background: var(--accent);
color: #fff;
border-bottom-right-radius: 4px;
}
.flow-msg--ai {
margin-top: 8px;
background: #eef2f7;
color: #182236;
border-bottom-left-radius: 4px;
}
.flow-typing {
margin-top: 8px;
display: inline-flex;
gap: 4px;
background: #eef2f7;
border-radius: 12px;
border-bottom-left-radius: 4px;
padding: 10px 12px;
opacity: 0;
transition: opacity .25s ease;
}
.flow-typing.is-visible { opacity: 1; }
.flow-typing span {
width: 5px; height: 5px; border-radius: 50%; background: #65748b;
animation: flowTyping .95s ease-in-out infinite;
}
.flow-typing span:nth-child(2) { animation-delay: .14s; }
.flow-typing span:nth-child(3) { animation-delay: .28s; }
@keyframes flowTyping { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-3px); } }
.flow-screen {
position: relative;
height: 360px;
min-height: 360px;
background: #f3f6fb;
overflow: hidden;
padding: 14px;
}
.flow-screen.is-generating::after {
content: "Generating insight...";
position: absolute; inset: 14px;
border: 1px dashed #d8e1ee;
border-radius: 12px;
display: grid; place-items: center;
font-size: 12px; font-weight: 600; letter-spacing: .02em;
color: #6b7b92;
background: rgba(255,255,255,.6);
}
.flow-panel {
position: absolute;
inset: 14px;
display: none;
opacity: 0;
transform: translateY(10px);
overflow-y: auto;
border-radius: 12px;
}
.flow-panel.is-active {
display: block;
opacity: 1;
transform: translateY(0);
animation: flowPanelIn .38s cubic-bezier(.22,1,.36,1);
}
@keyframes flowPanelIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.flow-card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
box-shadow: 0 10px 24px rgba(4, 8, 14, 0.08);
}
.flow-card__head {
border-bottom: 1px solid #edf1f6;
padding: 10px 12px;
font-size: 12px;
color: #607089;
font-weight: 600;
}
.flow-card__body { padding: 12px; }
.flow-kv {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0;
font-size: 13px;
color: #1b273a;
border-bottom: 1px dashed #eef2f7;
}
.flow-kv:last-child { border-bottom: 0; }
.flow-pill {
font-size: 11px;
font-weight: 600;
padding: 2px 8px;
border-radius: 999px;
background: #eef2f7;
color: #5b6575;
}
.flow-pill--neg { background: rgba(230,35,52,.12); color: var(--accent); }
.flow-pill--pos { background: rgba(22,163,74,.14); color: #15803d; }
.flow-metric-grid {
margin-top: 10px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.flow-mini-stat {
border: 1px solid #e7edf5;
border-radius: 10px;
padding: 8px;
background: #fbfcfe;
text-align: left;
}
.flow-mini-stat__k { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #7b8799; }
.flow-mini-stat__v { margin-top: 2px; font-size: 14px; font-weight: 700; color: #182236; }
.flow-mini-stat__v--neg { color: var(--accent); }
.flow-mini-stat__v--pos { color: #15803d; }
.flow-chart {
margin-top: 8px;
border: 1px solid #e7edf5;
border-radius: 10px;
background: #fbfcfe;
padding: 8px;
}
.flow-chart--revenue {
background: #fff;
padding: 10px 10px 6px;
}
.flow-chart--revenue svg { height: 220px; }
.flow-chart__legend {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-bottom: 6px;
font-size: 11px;
color: #5f6e86;
}
.flow-chart__legend-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.flow-chart__swatch {
width: 16px;
height: 0;
border-bottom: 2px solid #2e6ad8;
}
.flow-chart__swatch--actual { border-bottom-color: #24a565; }
.flow-chart__swatch--forecast { border-bottom-color: #2f6fdf; }
.flow-chart__swatch--ci-upper { border-bottom-color: #78a8e8; border-bottom-style: dashed; }
.flow-chart__swatch--ci-lower { border-bottom-color: #78a8e8; border-bottom-style: dashed; opacity: 0.8; }
.flow-chart svg { width: 100%; max-width: 360px; height: 120px; display: block; }
.flow-chart__grid { stroke: #e9eef6; stroke-width: 1; }
.flow-chart__line { fill: none; stroke: #2e6ad8; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.flow-chart__line--actual { stroke: #24a565; }
.flow-chart__line--forecast { stroke: #2f6fdf; }
.flow-chart__line--ci-upper,
.flow-chart__line--ci-lower {
stroke: #78a8e8;
stroke-width: 1.8;
stroke-dasharray: 4 4;
}
.flow-chart__line--ci-lower { opacity: 0.8; }
.flow-driver {
display: flex;
gap: 10px;
align-items: flex-start;
font-size: 13px;
color: #1b273a;
line-height: 1.4;
padding: 8px 0;
border-bottom: 1px dashed #edf1f6;
}
.flow-driver:last-child { border-bottom: 0; }
.flow-driver__idx {
width: 18px; height: 18px; border-radius: 6px;
display: grid; place-items: center;
font-size: 11px; font-weight: 700; color: #fff;
background: linear-gradient(135deg, var(--accent), #ff6b6b);
flex-shrink: 0;
}
.flow-driver b { color: #101a2c; }
.flow-alert {
margin-top: 10px;
padding: 9px 10px;
border: 1px solid rgba(230,35,52,.2);
border-radius: 10px;
background: rgba(230,35,52,.06);
font-size: 12px;
color: #a31224;
font-weight: 600;
}
.flow-progress {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
padding: 8px 14px 12px; background: #fff;
}
.flow-progress span {
height: 4px; border-radius: 999px; background: #e6edf5; overflow: hidden;
}
.flow-progress span::after {
content: ""; display: block; width: 0; height: 100%;
background: linear-gradient(90deg, var(--accent), #ff6b6b);
transition: width .35s ease;
}
.flow-progress span.is-active::after { width: 100%; }
/* ═══ Bento Grid (after chat flow) ═══ */
.bento {
margin-top: 38px;
margin-bottom: 64px;
}
.bento-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.bento-col {
display: grid;
gap: 18px;
}
.bento-card {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-md);
box-shadow: 0 14px 30px rgba(4, 8, 14, 0.07);
overflow: hidden;
display: flex;
flex-direction: column;
}
.bento-visual {
min-height: 220px;
border-bottom: 1px solid #edf1f6;
position: relative;
overflow: hidden;
}
.bento-body {
padding: 18px 18px 20px;
}
.bento-body h3 {
margin: 0;
font-size: 24px;
line-height: 1.15;
letter-spacing: -0.015em;
}
.bento-body p {
margin: 8px 0 0;
color: var(--text-secondary);
font-size: 14px;
line-height: 1.55;
}
.bento-users {
min-height: 390px;
background: #f4f6fa;
}
.bento-users__scene {
position: absolute;
inset: 0;
}
.bento-users__bg {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: min(390px, 100%);
height: auto;
}
.bento-users__logo {
position: absolute;
left: 50%;
top: 56%;
transform: translate(-50%, -50%);
width: 76px;
height: 76px;
border-radius: 50%;
box-shadow: 0 12px 26px rgba(17, 23, 34, 0.22);
z-index: 3;
}
.bento-avatar {
position: absolute;
left: 50%;
top: 0;
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 8px 20px rgba(16, 23, 36, 0.16);
transform: translate3d(var(--x-start), -42px, 0) scale(var(--s, 1));
animation: avatarToLogo 7.2s linear infinite;
z-index: 2;
opacity: 0;
}
.bento-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 50%;
}
.bento-chip {
position: absolute;
left: 50%;
top: 0;
transform: translate3d(var(--x-start, 0px), 216px, 0) scale(0.72);
background: #fff;
border: 1px solid #d6deea;
border-radius: 12px;
box-shadow: 0 8px 18px rgba(16, 23, 36, 0.12);
padding: 8px 13px;
font-size: 16px;
font-weight: 500;
color: #2b3750;
display: inline-flex;
align-items: center;
gap: 10px;
animation: badgeFromLogo 7.2s linear infinite;
z-index: 2;
opacity: 0;
}
.bento-chip__icon {
width: 22px;
height: 22px;
border-radius: 7px;
border: 1px solid #e1e7f2;
color: #75839a;
display: grid;
place-items: center;
flex-shrink: 0;
}
@keyframes avatarToLogo {
0% {
transform: translate3d(var(--x-start), -42px, 0) scale(var(--s, 1));
opacity: 0;
}
8% {
opacity: 0.95;
}
90% {
transform: translate3d(var(--x-mid), var(--y-mid), 0) scale(var(--s, 1));
opacity: 1;
}
100% {
transform: translate3d(var(--x-end, 0px), 214px, 0) scale(0.64);
opacity: 0;
}
}
@keyframes badgeFromLogo {
0% {
transform: translate3d(var(--x-start, 0px), 216px, 0) scale(0.72);
opacity: 0;
}
10% {
opacity: 1;
}
88% {
transform: translate3d(var(--x-end), var(--y-end), 0) scale(var(--s, 1));
opacity: 1;
}
100% {
transform: translate3d(var(--x-end), calc(var(--y-end) + 26px), 0) scale(var(--s, 1));
opacity: 0;
}
}
.bento-secure {
min-height: 300px;
background: linear-gradient(180deg, #f8faff 0%, #f2f6fd 100%);
position: relative;
overflow: hidden;
border-bottom: 0;
}
.bento-secure__canvas-wrap {
position: absolute;
inset: 0;
overflow: hidden;
}
.bento-secure__canvas {
width: 100%;
height: 100%;
display: block;
}
.bento-secure__center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 168px;
height: 168px;
display: grid;
place-items: center;
z-index: 2;
background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 35%, rgba(255, 255, 255, 0) 78%);
}
.bento-secure__shield {
width: 118px;
height: 148px;
display: block;
}
.bento-secure__vignette {
position: absolute;
inset: 0;
background: radial-gradient(transparent 18%, rgba(248, 250, 255, 0.78) 72%);
pointer-events: none;
z-index: 1;
}
.bento-growth {
min-height: 180px;
display: grid;
place-items: center;
background: linear-gradient(140deg, #f5f8ff, #eff4ff);
}
.bento-growth__badge {
background: #fff;
border: 1px solid #e4ebf4;
border-radius: 14px;
box-shadow: 0 10px 22px rgba(16, 23, 36, 0.08);
padding: 14px 16px;
min-width: 220px;
}
.bento-growth__badge strong {
display: block;
font-size: 28px;
line-height: 1;
}
.bento-growth__badge span {
display: block;
margin-top: 6px;
color: #6b778b;
font-size: 14px;
}
.bento-balance-card {
background: linear-gradient(165deg, #ffffff 0%, #f7faff 55%, #f2f6fd 100%);
border-color: var(--line);
box-shadow: 0 18px 40px rgba(4, 8, 14, 0.10);
}
.bento-balance-card .bento-visual {
min-height: 245px;
border-bottom: 0;
background: transparent;
}
.bento-balance__chart-wrap {
position: absolute;
inset: 14px 0 auto 0;
height: 170px;
padding: 8px 0 0;
}
.bento-balance__days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 10px;
color: #7e8ba0;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
margin-bottom: 8px;
padding-inline: 28px;
}
.bento-balance__chart {
width: 100%;
height: 136px;
}
.bento-balance__chart svg {
width: 100%;
height: 100%;
display: block;
}
.bento-balance__body {
padding: 0 18px 20px;
}
.bento-balance__label {
margin: 0;
color: #667589;
font-size: 18px;
line-height: 1.2;
}
.bento-balance__value {
margin: 6px 0 0;
font-size: clamp(40px, 3.8vw, 56px);
line-height: 1;
letter-spacing: -0.02em;
color: #101a2c;
font-weight: 700;
}
.bento-balance__desc {
margin: 12px 0 0;
color: #5f6d83;
font-size: 16px;
line-height: 1.5;
max-width: 34ch;
}
.bento-critical-card {
background: linear-gradient(145deg, #ffffff 0%, #f8fbff 100%);
border-color: var(--line);
box-shadow: 0 12px 30px rgba(4, 8, 14, 0.08);
padding: 20px 18px;
}
.bento-critical {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.bento-critical h3 {
margin: 0;
font-size: clamp(23px, 2.1vw, 34px);
line-height: 1.15;
letter-spacing: -0.015em;
color: #111722;
}
.bento-critical h3 strong { color: var(--accent); font-weight: 700; }
.bento-critical__icon {
width: 82px;
height: 82px;
border-radius: 20px;
border: 1px solid #dce5f2;
background: linear-gradient(180deg, #ffffff, #f2f6fc);
display: grid;
place-items: center;
color: #202938;
flex-shrink: 0;
box-shadow: 0 8px 20px rgba(16, 23, 36, 0.08);
}
.bento-feed {
min-height: 280px;
background: linear-gradient(180deg, #f8fbff 0%, #f2f6fc 100%);
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.bento-feed__viewport {
width: min(320px, calc(100% - 28px));
height: 220px;
overflow: hidden;
position: relative;
}
.bento-feed__track {
display: flex;
flex-direction: column;
gap: 10px;
transform: translate3d(0, 0, 0);
will-change: transform;
}
.bento-feed__item {
display: flex;
align-items: center;
gap: 10px;
background: #fff;
border: 1px solid #e4ebf4;
border-radius: 10px;
padding: 10px 12px;
transition: transform 0.45s ease, box-shadow 0.45s ease, opacity 0.45s ease;
transform: scale(0.97);
opacity: 0.72;
}
.bento-feed__item.is-active {
transform: scale(1.05);
opacity: 1;
box-shadow: 0 12px 26px rgba(16, 23, 36, 0.16);
}
.bento-feed__icon {
width: 44px;
height: 44px;
border-radius: 11px;
border: 1px solid #e1e8f3;
background: #f2f6fb;
color: #4b5c75;
display: grid;
place-items: center;
flex-shrink: 0;
}
.bento-feed__content {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.bento-feed__content strong {
font-size: 16px;
font-weight: 600;
color: #1b2638;
}
.bento-feed__content span {
margin-top: 4px;
font-size: 13px;
color: #7a879b;
}
.bento-feed__dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.bento-feed__dot--warn { background: #f59e0b; }
.bento-feed__dot--ok { background: #22c55e; }
.bento-feed__dot--new { background: var(--accent); }
.bento-feed__fade {
position: absolute;
left: 0;
right: 0;
height: 32px;
pointer-events: none;
z-index: 2;
}
.bento-feed__fade--top {
top: 0;
background: linear-gradient(to bottom, rgba(248, 251, 255, 0.98), rgba(248, 251, 255, 0));
}
.bento-feed__fade--bottom {
bottom: 0;
background: linear-gradient(to top, rgba(242, 246, 252, 0.98), rgba(242, 246, 252, 0));
}
.bento-convert {
min-height: 450px;
background: #f6f8fc;
position: relative;
overflow: hidden;
}
.bento-convert__lane {
position: absolute;
left: 0;
width: 100%;
height: 50%;
overflow: hidden;
z-index: 1;
padding-inline: 0;
background: #f1f4f9;
}
.bento-convert__lane--top { top: 0; padding: 12px 0 10px; }
.bento-convert__lane--bottom { bottom: 0; padding: 10px 0 12px; }
.bento-convert__lane--top {
border-bottom-left-radius: 120px;
border-bottom-right-radius: 120px;
}
.bento-convert__lane--bottom {
border-top-left-radius: 120px;
border-top-right-radius: 120px;
}
.bento-convert__lane::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 64px;
z-index: 2;
pointer-events: none;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.bento-convert__lane--top::after {
bottom: 0;
background: linear-gradient(to top, rgba(241, 244, 249, 0.72), rgba(241, 244, 249, 0));
}
.bento-convert__lane--bottom::after {
top: 0;
background: linear-gradient(to bottom, rgba(241, 244, 249, 0.72), rgba(241, 244, 249, 0));
}
.bento-convert__track {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
animation: bentoMarqueeDown 14s linear infinite;
}
.bento-convert__track--delay { animation-delay: -7s; }
@keyframes bentoMarqueeDown {
from { transform: translateY(-50%); }
to { transform: translateY(0%); }
}
.bento-convert__item {
width: min(300px, calc(100% - 12px));
background: #fff;
border: 1px solid #dce5f1;
border-radius: 12px;
box-shadow: 0 6px 18px rgba(16, 23, 36, 0.08);
padding: 10px 12px;
display: flex;
align-items: center;
gap: 10px;
}
.bento-convert__avatar {
width: 36px;
height: 36px;
border-radius: 10px;
flex-shrink: 0;
overflow: hidden;
}
.bento-convert__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.bento-convert__icon {
width: 36px;
height: 36px;
border-radius: 10px;
border: 1px solid rgba(34, 197, 94, 0.22);
background: rgba(34, 197, 94, 0.1);
color: #16a34a;
display: grid;
place-items: center;
flex-shrink: 0;
}
.bento-convert__txt {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.bento-convert__txt strong {
font-size: 14px;
font-weight: 700;
color: #151f31;
}
.bento-convert__txt span {
margin-top: 4px;
font-size: 13px;
color: #667489;
}
.bento-convert__center {
position: absolute;
inset-inline: 0;
top: 50%;
transform: translateY(-50%);
height: 84px;
background: #fff;
border-top: 1px solid #e6edf7;
border-bottom: 1px solid #e6edf7;
z-index: 3;
display: grid;
place-items: center;
box-shadow: 0 16px 34px rgba(16, 23, 36, 0.14);
}
.bento-convert__logo {
width: min(220px, 80%);
height: auto;
}
.bento-rocket {
min-height: 220px;
background: radial-gradient(circle at 50% 50%, #edf4ff 0%, #f8fbff 70%);
}
.bento-rocket__center {
position: absolute;
inset: 0;
display: grid;
place-items: center;
}
.bento-rocket__circle {
width: 170px;
height: 170px;
border-radius: 50%;
border: 1px dashed #cfd9ea;
display: grid;
place-items: center;
}
.bento-rocket__icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: #fff;
border: 1px solid #d9e3f1;
display: grid;
place-items: center;
color: var(--accent);
box-shadow: 0 10px 22px rgba(16, 23, 36, 0.1);
}
/* ═══ Killer Feature (Explanation Tree) ═══ */
.killer-section {
position: relative;
overflow: hidden;
}
.killer-section::before {
content: "";
position: absolute;
inset: 0;
background: url("https://cdn.shadcnstudio.com/ss-assets/blocks/marketing/features/image-40.png") right bottom / auto 62% no-repeat;
opacity: 0.35;
pointer-events: none;
}
.killer-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 56px;
align-items: center;
margin-top: 24px;
}
.killer-copy { max-width: 700px; }
.killer-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
border-radius: 999px;
border: 1px solid #dfe7f2;
background: #fff;
color: var(--text);
font-size: 14px;
font-weight: 600;
box-shadow: 0 6px 18px rgba(4, 8, 14, 0.05);
}
.killer-copy .section-title { margin-top: 16px; }
.killer-copy .section-text { margin-top: 14px; max-width: 600px; }
.killer-feature-grid {
margin-top: 26px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.killer-feature {
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
padding: 16px 16px 14px;
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.killer-feature:hover {
transform: translateY(-2px);
border-color: rgba(230,35,52,.22);
box-shadow: 0 14px 28px rgba(4, 8, 14, 0.08);
}
.killer-feature__top {
display: flex;
align-items: center;
gap: 10px;
}
.killer-feature__icon {
width: 34px;
height: 34px;
border-radius: 10px;
border: 1px solid rgba(230,35,52,.18);
background: rgba(230,35,52,.08);
color: var(--accent);
display: grid;
place-items: center;
flex-shrink: 0;
}
.killer-feature h4 {
margin: 0;
font-size: 17px;
line-height: 1.2;
}
.killer-feature p {
margin: 8px 0 0;
color: var(--text-secondary);
font-size: 14px;
line-height: 1.45;
}
.killer-img {
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid var(--line);
box-shadow: 0 18px 42px rgba(4, 8, 14, 0.11);
background: linear-gradient(165deg, #fbfcff 0%, #f2f6fd 100%);
}
/* Contribution Tree (messy analytics collage) */
.ct-wrap {
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
padding: 0;
overflow: visible;
}
.ct-scene {
display: grid;
grid-template-columns: minmax(0, 500px) 220px;
column-gap: 34px;
justify-content: center;
align-items: start;
}
.ct-col {
display: grid;
gap: 18px;
align-content: start;
}
.ct-col--left { width: 100%; max-width: 500px; margin-top: 152px; }
.ct-col--right { width: 220px; }
.ct-card {
position: relative;
background: rgba(255,255,255,.96);
border: 1px solid #e3ebf6;
border-radius: 14px;
box-shadow: 0 14px 34px rgba(4, 8, 14, 0.09);
backdrop-filter: blur(1.5px);
padding: 14px;
width: 100%;
opacity: 0;
transform: translateY(14px) scale(.98);
transition: opacity .45s ease, transform .45s ease;
}
.ct-wrap.is-visible .ct-card {
opacity: 1;
transform: translateY(0) scale(1);
transition-delay: var(--d, 0s);
}
.ct-card__title {
font-size: 12px;
line-height: 1;
letter-spacing: .02em;
color: #728098;
font-weight: 600;
}
.ct-card__menu { color: #98a3b5; font-size: 14px; line-height: 1; }
.ct-sales {
width: 320px;
margin: 0 auto;
}
.ct-sales__header {
display: flex; justify-content: space-between; align-items: center; gap: 10px;
font-size: 11px; color: #7f8ca1;
}
.ct-sales__total { margin-top: 3px; font-size: 33px; font-weight: 700; line-height: 1; color: #141e31; letter-spacing: -0.02em; }
.ct-sales__row {
margin-top: 12px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center;
}
.ct-sales__cell { text-align: center; }
.ct-sales__name { font-size: 11px; color: #7b879c; font-weight: 600; }
.ct-sales__val { margin-top: 4px; font-size: 20px; font-weight: 700; color: #192338; line-height: 1; }
.ct-sales__meta { margin-top: 2px; font-size: 11px; color: #8b98ac; }
.ct-sales__vs {
width: 30px; height: 30px; border-radius: 50%;
border: 1px solid #e1e8f3; background: #f6f9fd;
display: grid; place-items: center; font-size: 11px; color: #7f8ca1; font-weight: 700;
}
.ct-sales__progress {
margin-top: 12px;
height: 6px;
border-radius: 999px;
background: #e8eef7;
overflow: hidden;
}
.ct-sales__progress span {
display: block; height: 100%; width: 63%;
border-radius: inherit;
background: linear-gradient(90deg, #111827, #334155);
}
.ct-activity {
width: 100%;
max-width: none;
}
.ct-activity__head { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.ct-activity__value { margin-top: 12px; font-size: 52px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.ct-activity__trend { margin-top: 2px; color: #1d8f55; font-size: 13px; font-weight: 700; }
.ct-activity__chart { margin-top: 8px; border-radius: 10px; overflow: hidden; }
.ct-activity__chart svg { width: 100%; height: 88px; display: block; }
.ct-activity__axis {
margin-top: 6px; display:flex; justify-content:space-between;
font-size: 10px; color:#8a96aa; letter-spacing:.04em; text-transform: uppercase;
}
.ct-services {
width: 100%;
max-width: none;
}
.ct-services__title { display:flex; justify-content:space-between; align-items:center; }
.ct-bars { margin-top: 10px; display:grid; gap: 8px; }
.ct-bars__row { display:grid; grid-template-columns: 64px 1fr 42px; gap: 8px; align-items:center; }
.ct-bars__idx { font-size: 11px; color: #8b98ac; }
.ct-bars__track { height: 10px; border-radius: 999px; background: #edf2fa; overflow: hidden; }
.ct-bars__fill { height: 100%; border-radius: inherit; }
.ct-bars__fill--vietnam { width: 100%; background: linear-gradient(90deg, #ff5a66, #ff7b88); }
.ct-bars__fill--thailand { width: 72%; background: linear-gradient(90deg, #16a34a, #6ee7b7); }
.ct-bars__fill--brazil { width: 24%; background: linear-gradient(90deg, #ef4444, #fda4af); }
.ct-bars__pct { text-align: right; font-size: 12px; font-weight: 700; color: #223149; }
.ct-finance {
width: 100%;
}
.ct-finance__title { display:flex; justify-content:space-between; align-items:center; }
.ct-finance__main { margin-top: 10px; display:flex; align-items:center; gap:10px; }
.ct-finance__main svg { flex-shrink: 0; color:#1f2a40; }
.ct-finance__sum { font-size: 37px; font-weight:700; line-height:1; letter-spacing:-0.02em; }
.ct-finance__sub { margin-top: 2px; color:#8895aa; font-size: 11px; }
.ct-finance__act { margin-top: 10px; font-size: 11px; color:#7f8ca0; }
.ct-finance__line { margin-top: 5px; height: 5px; border-radius: 999px; background:#e7edf7; overflow:hidden; }
.ct-finance__line span { display:block; height:100%; width:64%; background: #111827; border-radius: inherit; }
.ct-finance__rows { margin-top: 10px; display:grid; gap: 8px; }
.ct-finance__row { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; }
.ct-finance__name { color:#1f2a40; }
.ct-finance__name .dot {
width: 8px; height: 8px; border-radius: 50%; display:inline-block; margin-right: 8px; vertical-align: middle;
}
.ct-finance__name .dot--p { background: #111827; }
.ct-finance__name .dot--s { background: #dbe3ef; }
.ct-finance__name .dot--u { background: #ef4444; }
.ct-finance__val { font-weight:700; color:#111827; }
.ct-finance__delta { font-size:11px; color:#7d8ba0; margin-left:4px; }
.ct-earning {
width: 100%;
margin: 0;
}
.ct-earning__head { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.ct-earning__value { margin-top: 8px; display:flex; align-items:flex-end; gap:8px; }
.ct-earning__value strong { font-size: 48px; line-height: .95; letter-spacing: -0.02em; }
.ct-earning__value span { font-size: 14px; color:#1d8f55; font-weight:700; margin-bottom: 6px; }
.ct-earn-bars { margin-top: 8px; height: 72px; display:flex; align-items:flex-end; gap: 9px; }
.ct-earn-bars span {
width: 10px; border-radius: 999px; display:block;
background: linear-gradient(180deg, #f5b01f 0 46%, #0f4f66 46% 100%);
}
.ct-earn-bars span:nth-child(1) { height: 54px; }
.ct-earn-bars span:nth-child(2) { height: 44px; }
.ct-earn-bars span:nth-child(3) { height: 60px; }
.ct-earn-bars span:nth-child(4) { height: 52px; }
.ct-earn-bars span:nth-child(5) { height: 36px; }
.ct-earn-bars span:nth-child(6) { height: 64px; }
.ct-earn-bars span:nth-child(7) { height: 66px; }
.ct-earn-bars span:nth-child(8) { height: 40px; }
.ct-earning__kpi {
margin-top: 10px;
display: grid;
gap: 8px;
}
.ct-earning__kpi-row {
display: flex; justify-content: space-between; align-items: center; gap: 8px;
font-size: 13px;
}
.ct-earning__kpi-label { color: #243149; }
.ct-earning__kpi-val { font-weight: 700; color: #1d8f55; }
.ct-earning__kpi-sub { display:block; font-size: 11px; color: #8a97ab; margin-top: 1px; }
.ct-transactions {
width: 100%;
margin: 0;
}
.ct-transactions__head { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.ct-transactions__list { margin-top: 10px; display:grid; gap: 8px; }
.ct-transactions__item {
display:flex; justify-content:space-between; align-items:flex-start; gap:8px;
padding: 8px 0; border-bottom: 1px solid #edf2fa;
}
.ct-transactions__item:last-child { border-bottom: 0; padding-bottom: 0; }
.ct-transactions__name { color:#1f2a40; font-size: 13px; font-weight: 600; }
.ct-transactions__sub { color:#8a97ab; font-size: 11px; margin-top: 1px; }
.ct-transactions__amount { font-size: 13px; font-weight: 700; }
.ct-transactions__amount--neg { color: #111827; }
.ct-transactions__amount--pos { color: #1d8f55; }
/* ═══ Role Cards ═══ */
.roles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.role-card {
background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
padding: 32px 24px; display: flex; flex-direction: column;
transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease;
}
.role-card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(0,0,0,.08); }
.role-card__num {
width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
font-weight: 700; font-size: 15px; color: #fff; margin-bottom: 16px;
}
.role-card__num--1 { background: linear-gradient(135deg, var(--accent), #ff6b6b); }
.role-card__num--2 { background: linear-gradient(135deg, var(--purple), #a78bfa); }
.role-card__num--3 { background: linear-gradient(135deg, #059669, #34d399); }
.role-card h3 { margin: 0 0 12px; font-size: 20px; }
.role-card ul { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.role-card li { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; color: var(--text-secondary); line-height: 1.45; }
.role-card li svg { flex-shrink: 0; margin-top: 3px; }
.role-card__example {
margin-top: auto; padding: 14px 16px; border-radius: var(--radius-sm);
background: #f8f9fc; border: 1px solid var(--line); font-size: 14px; color: var(--text-secondary);
line-height: 1.5;
}
.role-card__example strong { color: var(--text); display: block; margin-bottom: 4px; }
.role-card__sample { display: none; font-style: italic; color: var(--accent); }
.role-card:hover .role-card__example-desc { display: none; }
.role-card:hover .role-card__sample { display: block; }
/* ═══ Steps / How it works ═══ */
.steps-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 48px; position: relative; }
.steps-row::before {
content: ""; position: absolute; top: 38px; left: 36px; right: 36px; height: 2px;
background: linear-gradient(90deg, rgba(230,35,52,.08), rgba(230,35,52,.2), rgba(230,35,52,.08));
border-radius: 1px; z-index: 0;
}
.hw-step {
background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
padding: 24px 18px; text-align: center; position: relative; z-index: 1;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hw-step:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.07); }
.hw-step__num {
width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
background: linear-gradient(135deg, var(--accent) 0%, #ff6b6b 100%);
color: #fff; font-weight: 700; font-size: 14px; margin: 0 auto 14px;
box-shadow: 0 4px 12px rgba(230, 35, 52, 0.2);
}
.hw-step p { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.hw-step .hw-step__desc { font-weight: 400; color: var(--text-secondary); font-size: 13px; margin-top: 6px; }
/* Decision loop: Alert + Forecast chart */
.decision-loop {
display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px;
align-items: stretch; margin-top: 48px; max-width: 100%;
}
.alert-card {
background: linear-gradient(165deg, #f7f9fd 0%, #f1f5fb 100%);
border: 1px solid var(--line);
border-radius: 12px;
padding: 0;
box-shadow: 0 4px 20px rgba(0,0,0,.06);
display: flex;
align-items: flex-end;
justify-content: center;
overflow: hidden;
}
.alert-card__mockup {
width: min(100%, 368px);
border-radius: 0;
overflow: visible;
box-shadow: none;
border: 0;
background: transparent;
margin: 0 auto -10px;
}
.alert-card__mockup img {
width: 100%;
height: auto;
display: block;
}
.alert-phone {
position: relative;
width: min(100%, 316px);
border-radius: 44px;
padding: 12px;
background: linear-gradient(160deg, #2b3342 0%, #0f1725 58%, #2b3442 100%);
border: 1px solid #3f4b5f;
box-shadow: 0 26px 48px rgba(11,16,24,.36), inset 0 1px 0 rgba(255,255,255,.22);
}
.alert-phone::before,
.alert-phone::after {
content: "";
position: absolute;
right: -2px;
width: 3px;
border-radius: 999px;
background: linear-gradient(180deg, #5f6b7e 0%, #2a3240 100%);
}
.alert-phone::before { top: 120px; height: 54px; }
.alert-phone::after { top: 186px; height: 34px; }
.alert-phone .alert-phone__screen::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 14% 20%, rgba(66, 153, 225, 0.18), transparent 36%),
radial-gradient(circle at 84% 12%, rgba(236, 72, 153, 0.14), transparent 34%),
linear-gradient(180deg, #f2f6ff 0%, #e8eef9 56%, #e2e9f6 100%);
pointer-events: none;
}
.alert-phone__screen {
position: relative;
border-radius: 32px;
overflow: hidden;
border: 1px solid rgba(255,255,255,.14);
min-height: 460px;
}
.alert-phone__notch {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
width: 102px;
height: 26px;
border-radius: 999px;
background: #0b1019;
z-index: 3;
box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.alert-phone__notch::after {
content: "";
position: absolute;
top: 9px;
right: 16px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #1f2937;
}
.alert-phone__status {
display: flex;
justify-content: space-between;
align-items: center;
padding: 42px 18px 8px;
font-size: 12px;
color: #39475f;
font-weight: 700;
position: relative;
z-index: 1;
}
.alert-phone__lock {
text-align: center;
padding: 4px 16px 12px;
position: relative;
z-index: 1;
}
.alert-phone__lock small {
display: block;
color: #5f718c;
font-size: 10px;
letter-spacing: .04em;
text-transform: uppercase;
font-weight: 700;
}
.alert-phone__lock strong {
display: block;
margin-top: 4px;
font-size: 46px;
line-height: 1;
color: #111a2b;
letter-spacing: -0.02em;
}
.slack-push {
margin: 0 12px;
border-radius: 18px;
border: 1px solid #d9e2ef;
background: rgba(255,255,255,.9);
backdrop-filter: blur(8px);
box-shadow: 0 12px 26px rgba(16,23,36,.14);
overflow: hidden;
position: relative;
z-index: 1;
}
.slack-push__top {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-bottom: 1px solid #edf2fa;
}
.slack-push__logo {
width: 22px;
height: 22px;
border-radius: 5px;
background: #fff;
border: 1px solid #e2e8f3;
display: grid;
place-items: center;
}
.slack-push__logo svg { width: 14px; height: 14px; }
.slack-push__app { font-size: 12px; font-weight: 700; color: #1e2a40; }
.slack-push__time { margin-left: auto; color: #7e8ca2; font-size: 11px; }
.slack-push__body { padding: 12px; }
.slack-push__title {
margin: 0;
font-size: 13px;
line-height: 1.45;
font-weight: 700;
color: #172236;
}
.slack-push__meta {
margin-top: 4px;
color: #6f7f97;
font-size: 12px;
}
.slack-push__chips {
margin-top: 10px;
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.slack-push__chip {
font-size: 10px;
font-weight: 700;
border-radius: 999px;
padding: 4px 8px;
}
.slack-push__chip--alert { background: rgba(230,35,52,.11); color: var(--accent); }
.slack-push__chip--channel { background: #edf2fa; color: #5f718b; }
.slack-push__cta {
margin-top: 10px;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 700;
color: var(--accent);
}
.alert-phone__home {
width: 120px;
height: 4px;
border-radius: 999px;
background: rgba(16,22,34,.28);
margin: 18px auto 10px;
position: relative;
z-index: 1;
}
.fc-wrap {
background: #fff; border: 1px solid var(--line); border-radius: 12px;
padding: 20px 24px; box-shadow: 0 4px 20px rgba(0,0,0,.06);
position: relative;
}
.fc-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.fc-subtitle { font-size: 12px; color: var(--text-secondary); margin-bottom: 14px; }
.fc-chart { height: 230px; position: relative; }
.fc-chart svg { width: 100%; height: 100%; display: block; }
.fc-axis { font-size: 10px; fill: #8a9ab2; font-weight: 500; }
.fc-grid { stroke: #e8ecf4; stroke-width: 1; }
.fc-today-line { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: 0.6; }
.fc-line-path {
fill: none; stroke: #3b82f6; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
stroke-dasharray: 420; stroke-dashoffset: 420;
transition: stroke-dashoffset 1s cubic-bezier(0.22,1,0.36,1);
}
.fc-wrap.is-visible .fc-line-path { stroke-dashoffset: 0; }
.fc-forecast-path {
fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
stroke-dasharray: 8 5; stroke-dashoffset: 120;
transition: stroke-dashoffset 0.8s cubic-bezier(0.22,1,0.36,1) 0.5s;
}
.fc-wrap.is-visible .fc-forecast-path { stroke-dashoffset: 0; }
.fc-ci-path {
fill: url(#fcCiGrad); opacity: 0;
transition: opacity 0.5s ease 0.7s;
}
.fc-wrap.is-visible .fc-ci-path { opacity: 1; }
.fc-legend {
display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap;
font-size: 11px; font-weight: 600; color: var(--text-secondary);
}
.fc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fc-legend-dot { width: 14px; height: 0; border-radius: 0; border-bottom: 2px solid #3b82f6; }
.fc-legend-dot--ci-upper,
.fc-legend-dot--ci-lower { border-bottom-color: #8fb2e6; border-bottom-style: dashed; }
.fc-legend-dot--actual { border-bottom-color: #22a862; border-bottom-style: solid; }
.fc-legend-dot--forecast { border-bottom-color: #3b82f6; border-bottom-style: solid; }
.fc-series { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fc-series--ci-upper { stroke: #8fb2e6; stroke-dasharray: 4 4; }
.fc-series--ci-lower { stroke: #8fb2e6; stroke-dasharray: 4 4; opacity: 0.85; }
.fc-series--actual { stroke: #22a862; }
.fc-series--forecast { stroke: #3b82f6; }
.fc-overlay {
display: flex; align-items: center; gap: 10px;
margin-top: 12px; padding: 10px 14px;
background: rgba(230,35,52,.06); border: 1px solid rgba(230,35,52,.18);
border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--accent);
opacity: 0; transform: translateY(6px);
transition: opacity 0.4s ease 1.2s, transform 0.4s ease 1.2s;
}
.fc-wrap.is-visible .fc-overlay { opacity: 1; transform: translateY(0); }
.fc-overlay svg { flex-shrink: 0; }
/* ═══ Forecast Section ═══ */
.forecast-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-top: 48px;
}
.forecast-compare {
display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.forecast-compare__card {
background: #fff; border: 1px solid var(--line); border-radius: 12px;
padding: 16px; box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
.forecast-compare__card--ok {
border-left: 3px solid #22c55e;
}
.forecast-compare__card--alert {
border-left: 3px solid var(--accent);
}
.forecast-compare__label {
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.forecast-compare__card--ok .forecast-compare__label { color: #22c55e; }
.forecast-compare__card--alert .forecast-compare__label { color: var(--accent); }
.forecast-compare__title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.forecast-compare__desc { font-size: 12px; color: var(--text-secondary); margin-bottom: 12px; line-height: 1.4; }
.forecast-compare__chart { height: 72px; }
.forecast-compare__chart svg { width: 100%; height: 100%; display: block; }
.fcc-band { transition: opacity 0.5s ease; }
.fcc-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke-dashoffset 0.8s ease; }
.forecast-compare.is-visible .fcc-line { stroke-dashoffset: 0 !important; }
.forecast-features { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 16px; }
.forecast-features li {
display: flex; align-items: flex-start; gap: 14px; font-size: 16px; color: var(--text-secondary); line-height: 1.5;
}
.forecast-features li .ff-icon {
width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0;
background: rgba(230,35,52,.06);
}
.forecast-img {
border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 24px 56px rgba(0,0,0,.08);
border: 1px solid var(--line);
}
.forecast-img img { width: 100%; display: block; }
/* ═══ Security Grid ═══ */
.security-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.sec-card {
background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
border-radius: var(--radius-md); padding: 28px 22px;
transition: transform 0.3s ease, background 0.3s ease;
}
.sec-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.06); }
.sec-card__icon {
width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
background: rgba(230,35,52,.1); margin-bottom: 16px;
}
.sec-card h4 { margin: 0 0 6px; font-size: 16px; color: #fff; }
.sec-card p { margin: 0; font-size: 14px; color: #8a9ab2; line-height: 1.5; }
/* ═══ Not Replacing Humans ═══ */
.human-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-top: 48px; }
.human-list { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-direction: column; gap: 14px; }
.human-list li {
display: flex; align-items: flex-start; gap: 12px; font-size: 16px; color: var(--text-secondary); line-height: 1.5;
}
.human-list li svg { flex-shrink: 0; margin-top: 3px; }
.human-visual {
background: linear-gradient(135deg, #f0f4ff, #fef2f2);
border-radius: var(--radius-lg); padding: 48px; text-align: center;
border: 1px solid var(--line);
}
.human-visual__icon { font-size: 64px; margin-bottom: 16px; }
.human-visual p { margin: 0; font-size: 18px; font-weight: 600; color: var(--text); line-height: 1.4; }
.human-visual span { color: var(--accent); }
/* ═══ Why Brokers ═══ */
.why-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 48px; }
.why-card {
background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
padding: 28px 20px; text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.why-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.06); }
.why-card__icon { margin-bottom: 12px; display: flex; align-items: center; justify-content: center; }
.why-card__icon svg { width: 32px; height: 32px; stroke: var(--accent); }
.why-card h4 { margin: 0 0 6px; font-size: 15px; }
.why-card p { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.45; }
/* ═══ CTA Banner ═══ */
.cta-banner {
background: linear-gradient(135deg, var(--dark-1), var(--dark-2));
border-radius: var(--radius-lg); padding: 64px 48px; text-align: center;
position: relative; overflow: hidden;
}
.cta-banner::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(ellipse 50% 50% at 50% 100%, rgba(230,35,52,.12) 0%, transparent 70%);
pointer-events: none;
}
.cta-banner h2 { margin: 0 0 12px; font-size: clamp(28px, 3.5vw, 42px); color: #fff; line-height: 1.1; position: relative; }
.cta-banner p { margin: 0 auto 28px; max-width: 520px; color: #8a9ab2; font-size: 17px; position: relative; }
.cta-banner .btn { position: relative; }
/* ═══ Footer ═══ */
.footer {
border-top: 0 !important;
background: linear-gradient(180deg, var(--dark-1) 0%, #080c14 100%);
color: #fff; padding: 48px 0 36px; border-top: 1px solid var(--dark-line);
}
.footer__inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer__logo { width: 148px; opacity: 0.9; }
.footer__links { display: flex; gap: 24px; align-items: center; }
.footer__links a { color: #8a9ab2; text-decoration: none; font-size: 14px; transition: color 0.2s ease; }
.footer__links a:hover { color: #fff; }
.footer__copy {
color: #5a6a80; font-size: 14px; width: 100%; text-align: center;
margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* ═══ Scroll Reveal ═══ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.stagger > * { opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease, transform 0.5s ease; }
.visible .stagger > *:nth-child(1) { transition-delay: 0.06s; }
.visible .stagger > *:nth-child(2) { transition-delay: 0.12s; }
.visible .stagger > *:nth-child(3) { transition-delay: 0.18s; }
.visible .stagger > *:nth-child(4) { transition-delay: 0.24s; }
.visible .stagger > *:nth-child(5) { transition-delay: 0.30s; }
.visible .stagger > * { opacity: 1; transform: translateY(0); }
/* ═══ Hero entrance ═══ */
.hero__content h1, .hero__content p, .hero__content .hero__actions {
opacity: 0; transform: translateY(20px); animation: hero-in 0.8s cubic-bezier(0.22,1,0.36,1) forwards;
}
.hero__content h1 { animation-delay: 0.1s; }
.hero__content p { animation-delay: 0.25s; }
.hero__content .hero__actions { animation-delay: 0.4s; }
@keyframes hero-in { to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1920px) {
.problem-visual {
width: 100%;
margin-left: 0;
margin-right: 0;
}
}
/* ═══ Responsive ═══ */
@media (max-width: 1080px) {
.roles-grid, .solution-cards { grid-template-columns: repeat(2, 1fr); }
.why-grid { grid-template-columns: repeat(3, 1fr); }
.steps-row { grid-template-columns: repeat(3, 1fr); }
.steps-row::before { display: none; }
.bento-grid { grid-template-columns: 1fr 1fr; }
.bento-col:last-child { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nav { display: none; }
}
@media (max-width: 900px) {
.killer-grid, .forecast-grid, .problem-grid, .human-grid { grid-template-columns: 1fr; gap: 36px; }
.killer-section::before { background-size: auto 52%; opacity: 0.26; }
.problem-grid > :first-child { margin-right: 0; }
.ct-scene {
grid-template-columns: 1fr;
gap: 12px;
}
.ct-col { gap: 12px; width: 100%; max-width: none; }
.ct-col--left { margin-top: 0; }
.ct-card { width: 100%; margin: 0; max-width: none; transform-origin: center; }
.ct-sales { width: 100%; }
.security-grid { grid-template-columns: repeat(2, 1fr); }
.bento-grid { grid-template-columns: 1fr; }
.bento-col:last-child { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
.container {
width: min(100%, calc(100% - 30px));
padding-left: max(15px, env(safe-area-inset-left));
padding-right: max(15px, env(safe-area-inset-right));
}
section { scroll-margin-top: 72px; }
.topbar__inner { min-height: 64px; }
.logo { width: 140px; }
.btn--sm { min-height: 44px; }
.hero { padding: 104px 0 132px; min-height: auto; }
.hero h1 { font-size: clamp(28px, 7vw, 44px); }
.hero p { font-size: 17px; }
.section { padding: 72px 0; }
.roles-grid, .solution-cards { grid-template-columns: 1fr; }
.why-grid { grid-template-columns: repeat(2, 1fr); }
.steps-row { grid-template-columns: repeat(2, 1fr); }
.decision-loop { grid-template-columns: 1fr; margin-top: 36px; }
.cta-banner { padding: 48px 28px; }
.flow-lab { grid-template-columns: 1fr; padding: 22px; gap: 16px; }
.flow-rail { order: 2; }
.flow-stage { order: 1; }
.bento { margin-top: 28px; }
.bento-body h3 { font-size: 21px; }
.bento-balance__value { font-size: clamp(34px, 8vw, 48px); }
.bento-balance__desc { font-size: 15px; }
.bento-critical h3 { font-size: clamp(20px, 5.4vw, 30px); }
.bento-critical__icon { width: 72px; height: 72px; border-radius: 16px; }
}
@media (max-width: 620px) {
.section { padding: 56px 0; }
.security-grid { grid-template-columns: 1fr; }
.why-grid { grid-template-columns: 1fr; }
.steps-row { grid-template-columns: 1fr; }
.killer-feature-grid { grid-template-columns: 1fr; }
.killer-section::before { background-size: auto 40%; opacity: 0.22; }
.ct-wrap { padding: 12px; }
.ct-card { padding: 12px; border-radius: 12px; }
.ct-sales__total, .ct-finance__sum { font-size: 30px; }
.ct-activity__value, .ct-earning__value strong { font-size: 42px; }
.ct-services__title, .ct-transactions__head, .ct-finance__title, .ct-earning__head { gap: 6px; }
.decision-loop { gap: 16px; margin-top: 28px; }
.hero__actions { flex-direction: column; width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; }
.hero__actions .btn { width: 100%; }
.cta-banner { padding: 40px 20px; border-radius: var(--radius-md); }
.footer { padding-bottom: max(36px, env(safe-area-inset-bottom)); }
.footer__inner { flex-direction: column; text-align: center; gap: 20px; }
.footer__links { flex-wrap: wrap; justify-content: center; }
.flow-lab { padding: 16px; border-radius: 16px; }
.flow-step { padding: 10px; }
.flow-stage__bar { height: 38px; }
.flow-chat { padding: 12px 12px 8px; }
.flow-msg { font-size: 12px; }
.bento-body { padding: 16px; }
.bento-visual { min-height: 190px; }
}
@media (max-width: 480px) {
.container { width: calc(100% - 24px); }
.hero h1 { font-size: clamp(24px, 7vw, 32px); }
.section-title { font-size: clamp(24px, 6vw, 32px); }
.pv-body { padding: 12px 10px 10px; }
.pv-header { padding: 12px 16px; }
.pv-stream__row { padding: 6px 8px; --gap: 8px; }
.pv-chip { padding: 6px 8px; gap: 6px; }
.pv-chip__label, .pv-chip__delta { font-size: 11px; }
.pv-breakdown { gap: 8px; margin-top: 10px; }
.pv-breakdown__item { padding: 10px 8px; }
.pv-breakdown__val { font-size: 15px; }
.pv-alert-bar { padding: 10px 16px; }
.pv-alert-text { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.reveal { opacity: 1; transform: none; transition: none; }
.reveal.visible .stagger > * { animation: none; }
.hero__content h1, .hero__content p, .hero__content .hero__actions { animation: none; opacity: 1; transform: none; }
.typed-text { animation: none; border-right: none; }
.flow-msg, .flow-typing, .flow-panel { transition: none; }
.flow-typing span { animation: none; }
.bento-avatar, .bento-chip, .bento-convert__track { animation: none; }
.btn--shimmer-text .btn__label { animation: none; background: none; color: #fff; }
.btn--ghost { animation: none; }
.ct-card { opacity: 1; transform: none; transition: none; }
.pv-stream__track { animation: none; }
.fc-line-path { stroke-dashoffset: 0; transition: none; }
.fc-ci-path { opacity: 1; transition: none; }
.fc-ci-line { opacity: 0.7; transition: none; }
.fc-overlay { opacity: 1; transform: none; transition: none; }
}