:root { color-scheme: dark; --bg: #241934; --bg-soft: #2b1f40; --panel: #2f2049; --panel-deep: #3a2650; --ink: #fff3e6; --muted: #e3cbdd; --dim: #a8899f; --line: rgba(255, 243, 230, 0.14); --coral: #ff6b4a; --citrus: #ffc94a; } * { box-sizing: border-box; } html { scroll-behavior: smooth; /* The actual root scrolling box in standards mode is , not — body's own overflow-x:hidden below doesn't stop the page from allowing horizontal scroll/drag when a descendant (e.g. the fixed-position .page-glow discs, rotated .stack-card mockups, or a third-party fixed badge like Google reCAPTCHA's) claims width past the viewport. Setting it here too is what actually prevents the drag-to-scroll-right bug on mobile. */ overflow-x: hidden; width: 100%; } body { min-width: 320px; margin: 0; overflow-x: hidden; color: var(--ink); background: var(--bg); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; } .shell { width: min(1180px, calc(100% - 56px)); margin: 0 auto; position: relative; } .page-glow { position: fixed; z-index: -2; border-radius: 50%; pointer-events: none; filter: blur(110px); } .glow-one { width: 46rem; height: 46rem; top: -22rem; right: -18rem; background: var(--coral); opacity: .3; } .glow-two { width: 36rem; height: 36rem; bottom: -14rem; left: -14rem; background: var(--citrus); opacity: .16; } .grid-noise { position: fixed; z-index: -1; inset: 0; pointer-events: none; opacity: .3; background-image: linear-gradient(rgba(255,243,230,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,243,230,.035) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(#000, transparent 78%); } .site-header { border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; background: rgba(36,25,52,.78); backdrop-filter: blur(14px); } .site-header-inner { height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 25px; } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 17px; letter-spacing: -.03em; white-space: nowrap; } .brand img { width: 30px; height: 30px; border-radius: 9px; box-shadow: 0 0 22px rgba(255,201,74,.35); } .brand b { font-weight: 800; } .site-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; } .site-nav a { position: relative; color: #e6d3e0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; transition: color .2s; } .site-nav a:after { content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px; border-radius: 2px; background: var(--citrus); box-shadow: 0 0 8px var(--citrus); transition: right .25s ease; } .site-nav a:hover { color: var(--citrus); } .site-nav a:hover:after { right: 0; } .header-actions { display: flex; align-items: center; gap: 14px; } .sign-in { color: var(--ink); border: 1.5px solid rgba(255,243,230,.28); border-radius: 999px; padding: 10px 16px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; transition: .2s; } .sign-in:hover { color: #241934; background: var(--citrus); border-color: var(--citrus); } .nav-toggle { display: none; width: 38px; height: 38px; padding: 0; border: 1.5px solid rgba(255,243,230,.28); border-radius: 999px; background: transparent; cursor: pointer; place-items: center; } .nav-toggle span { display: block; width: 16px; height: 2px; margin: 3.5px auto; background: var(--ink); border-radius: 2px; transition: transform .2s, opacity .2s; } .nav-toggle.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } .mobile-nav { display: none; position: sticky; top: 92px; z-index: 39; flex-direction: column; background: #1e1529; border-bottom: 1px solid var(--line); max-height: 0; overflow: hidden; transition: max-height .25s ease; } .mobile-nav.open { max-height: 320px; } .mobile-nav a { padding: 16px 28px; color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; border-top: 1px solid var(--line); } .mobile-nav .mobile-sign-in { color: var(--citrus); } .hero { min-height: 620px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 40px; padding: 64px 0 92px; } .eyebrow { display: inline-flex; align-items: center; padding: 8px 15px; margin: 0 0 24px; border-radius: 999px; background: var(--coral); color: #241934; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; } .hero h1 { max-width: 620px; margin: 0; font-size: clamp(42px, 4.8vw, 68px); font-weight: 900; letter-spacing: -.045em; line-height: 1.02; } .hero h1 em { font-style: normal; color: var(--citrus); } .lede { max-width: 480px; margin: 26px 0; color: var(--muted); font-size: 16.5px; line-height: 1.68; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; } .button { display: inline-flex; align-items: center; gap: 12px; padding: 16px 24px; font-size: 13px; font-weight: 800; letter-spacing: .02em; text-decoration: none; border-radius: 999px; transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease; } .button:hover { transform: translateY(-3px); } .button:active { transform: translateY(-1px); } .button span { transition: transform .25s ease; } .button:hover span { transform: translateX(3px); } .button-quiet:hover span { transform: translateY(3px); } .button-primary { color: #241934; background: var(--citrus); box-shadow: 0 16px 36px rgba(255,201,74,.28); } .button-primary:hover { box-shadow: 0 20px 46px rgba(255,201,74,.4); } .button-quiet { color: var(--ink); border: 2px solid rgba(255,243,230,.3); } .microcopy { margin: 19px 0 0; color: var(--dim); font-size: 11.5px; letter-spacing: .02em; } .hero-copy > * { opacity: 0; animation: fade-up-in .8s cubic-bezier(.16,1,.3,1) forwards; } .hero-copy > *:nth-child(1) { animation-delay: .05s; } .hero-copy > *:nth-child(2) { animation-delay: .16s; } .hero-copy > *:nth-child(3) { animation-delay: .27s; } .hero-copy > *:nth-child(4) { animation-delay: .38s; } .hero-copy > *:nth-child(5) { animation-delay: .48s; } .hero-visual { position: relative; isolation: isolate; opacity: 0; animation: fade-up-in 1s cubic-bezier(.16,1,.3,1) .3s forwards; } .card-stack { position: relative; height: 400px; } .stack-card { position: absolute; width: min(280px, 78vw); padding: 22px; border-radius: 24px; box-shadow: 0 24px 54px rgba(15,7,26,.4); transition: transform .3s ease, box-shadow .3s ease; animation: card-float 6s ease-in-out infinite; } .stack-card:hover { transform: scale(1.03) !important; box-shadow: 0 30px 64px rgba(15,7,26,.5); } .stack-card-1 { background: var(--ink); color: #241934; top: 6px; left: 4%; transform: rotate(-7deg); z-index: 3; animation-delay: 0s; } .stack-card-2 { background: var(--coral); color: #241934; top: 92px; left: 34%; transform: rotate(6deg); z-index: 2; animation-delay: .5s; } .stack-card-3 { background: var(--panel-deep); color: var(--ink); top: 196px; left: 12%; transform: rotate(-3deg); z-index: 1; border: 1px solid rgba(255,243,230,.14); animation-delay: 1s; } .stack-thumb { width: 100%; height: 72px; border-radius: 13px; margin-bottom: 13px; background: linear-gradient(135deg, var(--citrus), var(--coral)); } .stack-card-3 .stack-thumb { background: linear-gradient(135deg, var(--coral), #7a5aa8); } .stack-lines { display: grid; gap: 7px; margin-bottom: 12px; } .stack-lines i { display: block; height: 8px; border-radius: 4px; background: currentColor; opacity: .2; } .stack-tag { display: inline-block; padding: 5px 12px; border-radius: 999px; background: rgba(0,0,0,.14); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .stack-card-3 .stack-tag { background: rgba(255,255,255,.14); } .floating-chip { position: absolute; z-index: 4; border-radius: 12px; padding: 10px 14px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; box-shadow: 0 15px 34px rgba(15,7,26,.35); animation: chip-float 4.5s ease-in-out infinite; } .chip-one { top: -6px; right: 2%; background: var(--ink); color: #241934; animation-delay: .2s; } .chip-one span { margin-right: 6px; } .chip-two { bottom: 2px; left: -2%; background: var(--panel-deep); color: var(--ink); border: 1px solid rgba(255,243,230,.16); animation-delay: 1.1s; } .chip-two i { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--citrus); box-shadow: 0 0 10px var(--citrus); animation: node-pulse 2.2s infinite; } .proof { display: flex; align-items: center; gap: 30px; padding: 30px 34px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); } .proof-item { display: flex; flex-direction: column; gap: 4px; flex: 1; } .proof-item strong { font-size: 22px; font-weight: 900; letter-spacing: -.02em; color: var(--citrus); } .proof-item span { color: var(--muted); font-size: 12.5px; } .proof-divider { width: 1px; height: 34px; background: var(--line); } .capabilities, .showcase { padding: 108px 0; } .capabilities { border-top: 1px solid var(--line); } .section-intro { display: flex; align-items: end; justify-content: space-between; gap: 38px; margin-bottom: 45px; } .section-intro h2, .contact h2, .faq h2 { max-width: 705px; margin: 0; font-size: clamp(30px, 3.6vw, 46px); font-weight: 850; letter-spacing: -.04em; line-height: 1.1; } .capability-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .capability-grid article { min-height: 224px; padding: 24px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); transition: transform .25s, background .25s; } .capability-grid article:hover { transform: translateY(-6px); background: var(--panel-deep); } .cap-icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 24px; border-radius: 13px; color: #241934; } .capability-grid article:nth-child(1) .cap-icon { background: var(--citrus); } .capability-grid article:nth-child(2) .cap-icon { background: var(--coral); } .capability-grid article:nth-child(3) .cap-icon { background: var(--ink); } .capability-grid article:nth-child(4) .cap-icon { background: var(--citrus); } .cap-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .capability-grid h3 { margin: 0 0 10px; font-size: 17px; font-weight: 800; letter-spacing: -.02em; } .capability-grid p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.62; } .showcase-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; padding: 44px 0; } .showcase-row + .showcase-row { border-top: 1px solid var(--line); } .showcase-row.reverse .showcase-copy { order: 2; } .showcase-row.reverse .showcase-visual { order: 1; } .showcase-tag { display: inline-block; margin-bottom: 14px; color: var(--citrus); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .showcase-copy h3 { margin: 0 0 12px; font-size: clamp(22px, 2.4vw, 29px); font-weight: 800; letter-spacing: -.03em; } .showcase-copy p { margin: 0 0 18px; color: var(--muted); font-size: 14.5px; line-height: 1.7; max-width: 460px; } .check-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .check-list li { position: relative; padding-left: 26px; color: #f0e2ea; font-size: 13.5px; } .check-list li:before { content: "✓"; position: absolute; left: 0; color: var(--citrus); font-weight: 900; } .showcase-visual { display: grid; place-items: center; } .brief-mock { display: flex; align-items: center; gap: 18px; padding: 28px; width: 100%; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); } .brief-tags { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; } .brief-tags span:nth-child(1) { background: var(--citrus); color: #241934; } .brief-tags span:nth-child(2) { background: var(--coral); color: #241934; } .brief-tags span:nth-child(3) { background: var(--ink); color: #241934; } .brief-tags span { padding: 8px 13px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; text-align: center; } .brief-arrow { flex: 0 0 auto; color: var(--citrus); font-size: 22px; font-weight: 800; } .brief-output { flex: 1; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: var(--panel-deep); } .mock-thumb { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, var(--citrus), var(--coral)); } .mock-thumb.small { flex-basis: 40px; width: 40px; height: 40px; } .mock-lines { flex: 1; display: grid; gap: 7px; } .mock-lines i { display: block; height: 7px; border-radius: 4px; background: rgba(255,243,230,.2); } .telegram-mock { width: 100%; display: grid; place-items: center; padding: 20px 0; } .telegram-bubble { width: min(340px, 100%); padding: 20px; border-radius: 22px 22px 22px 6px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 30px 66px rgba(15,7,26,.4); } .tg-label { margin: 0 0 12px; color: var(--citrus); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .tg-caption { margin: 14px 0 16px; color: #f5e8ee; font-size: 13px; line-height: 1.6; } .tg-actions { display: flex; gap: 8px; } .tg-btn { flex: 1; text-align: center; padding: 10px; border-radius: 12px; font-size: 11.5px; font-weight: 800; } .tg-btn.approve { background: var(--citrus); color: #241934; } .tg-btn.revise { background: var(--panel-deep); border: 1px solid var(--line); color: var(--ink); } .chart-mock { width: 100%; padding: 28px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); } .chart-bars { display: flex; align-items: flex-end; gap: 12px; height: 130px; margin-bottom: 20px; } .chart-bars span { flex: 1; border-radius: 8px 8px 0 0; background: rgba(255,243,230,.16); transition: height 1s cubic-bezier(.16,1,.3,1); } .chart-bars span:nth-child(1) { transition-delay: .05s; } .chart-bars span:nth-child(2) { transition-delay: .15s; } .chart-bars span:nth-child(3) { transition-delay: .25s; } .chart-bars span:nth-child(4) { transition-delay: .35s; } .chart-bars span:nth-child(5) { transition-delay: .45s; } .chart-mock:not(.in-view) .chart-bars span { height: 0 !important; } .chart-bars span.bar-good { background: linear-gradient(180deg, var(--citrus), var(--coral)); box-shadow: 0 0 24px rgba(255,201,74,.35); } .chart-badge { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; background: rgba(255,201,74,.15); border: 1px solid rgba(255,201,74,.4); color: #ffe6b0; font-size: 12px; font-weight: 600; } .chart-badge b { color: var(--citrus); } .statement { padding: 128px 0 118px; text-align: center; border-top: 1px solid var(--line); } .statement-orb { width: 50px; height: 50px; display: grid; place-items: center; margin: 0 auto 24px; border-radius: 16px; background: linear-gradient(135deg, var(--citrus), var(--coral)); color: #241934; transform: rotate(-6deg); } .statement-orb svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .statement p { margin: 0; font-size: clamp(34px, 5vw, 62px); font-weight: 900; letter-spacing: -.05em; line-height: 1.04; } .statement p span { color: var(--citrus); } .faq { display: grid; grid-template-columns: .78fr 1.22fr; gap: 95px; padding: 0 0 117px; } .faq-note { margin: 18px 0 0; color: var(--dim); font-size: 13px; } .faq-note a { color: var(--citrus); text-decoration: none; font-weight: 700; } .faq-list { display: grid; gap: 10px; } .faq details { border-radius: 16px; background: var(--panel); border: 1px solid var(--line); padding: 0 22px; transition: background .2s; } .faq details[open] { background: var(--panel-deep); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; color: var(--ink); cursor: pointer; font-size: 15px; font-weight: 750; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary span { flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--citrus); color: #241934; font-size: 15px; font-weight: 900; transition: transform .2s; } .faq details[open] summary span { transform: rotate(45deg); } .faq details p { max-width: 650px; margin: 0; padding: 0 0 22px; color: var(--muted); font-size: 14px; line-height: 1.67; } .contact { display: flex; align-items: flex-start; justify-content: space-between; gap: 45px; margin-bottom: 32px; padding: 57px; border-radius: 28px; background: linear-gradient(120deg, var(--coral), var(--citrus)); color: #241934; } .contact .eyebrow { background: rgba(36,25,52,.18); color: #241934; } .contact h2 { font-size: clamp(29px,3.4vw,42px); color: #241934; } .contact-intro { flex: 1 1 340px; min-width: 0; } .contact p:not(.eyebrow) { max-width: 480px; margin: 14px 0 0; color: rgba(36,25,52,.78); line-height: 1.6; } .contact .button-primary { background: #241934; color: var(--ink); box-shadow: 0 16px 36px rgba(36,25,52,.28); } .contact-form { flex: 1 1 380px; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .contact-field { display: grid; gap: 6px; min-width: 0; } .contact-field-wide { grid-column: 1 / -1; } .contact-field label { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: rgba(36,25,52,.7); } .contact-field input, .contact-field textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1.5px solid rgba(36,25,52,.16); background: rgba(255,255,255,.72); color: #241934; font: inherit; font-size: 13.5px; resize: vertical; transition: border-color .2s, background .2s; } .contact-field input::placeholder, .contact-field textarea::placeholder { color: rgba(36,25,52,.45); } .contact-field input:focus, .contact-field textarea:focus { outline: none; border-color: #241934; background: #fff; } .contact-status { grid-column: 1 / -1; margin: 0; min-height: 1.4em; font-size: 12.5px; font-weight: 700; } .contact-status-success { color: #1b6e3c; } .contact-status-error { color: #8a1f1f; } .contact-submit { grid-column: 1 / -1; justify-self: start; margin-top: 4px; border: none; cursor: pointer; } .g-recaptcha { grid-column: 1 / -1; } .site-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 33px 0 38px; color: var(--dim); font-size: 12px; border-top: 1px solid var(--line); } .site-footer .brand { font-size: 14px; } .site-footer .brand img { width: 25px; height: 25px; } .site-footer p { margin: 0; } .site-footer-copy { display: grid; gap: 4px; text-align: center; } .site-footer-legal { display: flex; gap: 14px; } .site-footer a { color: var(--muted); text-decoration: none; font-weight: 700; } .site-footer a:hover { color: #241934; } .site-language { display: flex; gap: 9px; align-items: center; font-size: 11px; font-weight: 800; } .site-language a { color: var(--muted); text-decoration: none; } .site-language a[aria-current="page"] { color: #241934; text-decoration: underline; text-underline-offset: 3px; } @keyframes node-pulse { 50% { opacity: .5; transform: scale(1.4); } } @keyframes chip-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes card-float { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } } .stack-card-1 { --r: -7deg; } .stack-card-2 { --r: 6deg; } .stack-card-3 { --r: -3deg; } @keyframes fade-up-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); } .reveal.in-view { opacity: 1; transform: translateY(0); } .reveal-delay.in-view { transition-delay: .12s; } .capability-grid article.reveal:nth-child(1) { transition-delay: .04s; } .capability-grid article.reveal:nth-child(2) { transition-delay: .12s; } .capability-grid article.reveal:nth-child(3) { transition-delay: .2s; } .capability-grid article.reveal:nth-child(4) { transition-delay: .28s; } .faq-list details:nth-child(1) { transition-delay: .03s; } .faq-list details:nth-child(2) { transition-delay: .09s; } .faq-list details:nth-child(3) { transition-delay: .15s; } .faq-list details:nth-child(4) { transition-delay: .21s; } .faq-list details:nth-child(5) { transition-delay: .27s; } @media (max-width: 940px) { .site-nav { display: none; } .site-language { display: none; } .nav-toggle { display: grid; } .mobile-nav { display: flex; } .hero { grid-template-columns: 1fr; padding-top: 56px; text-align: center; } .hero-copy { display: flex; flex-direction: column; align-items: center; } .hero-actions { justify-content: center; } .hero-visual { width: min(520px, 100%); margin: 24px auto 0; } .card-stack { height: 340px; } .proof { flex-direction: column; align-items: stretch; gap: 18px; } .proof-divider { display: none; } .capability-grid { grid-template-columns: repeat(2,1fr); } .showcase-row, .showcase-row.reverse { grid-template-columns: 1fr; text-align: center; } .showcase-row.reverse .showcase-copy, .showcase-row.reverse .showcase-visual { order: initial; } .showcase-copy p { margin-left: auto; margin-right: auto; } .check-list { justify-items: center; } .check-list li { padding-left: 0; } .check-list li:before { position: static; margin-right: 6px; } .faq { grid-template-columns: 1fr; gap: 35px; } .contact { display: block; } .contact-form { margin-top: 27px; } .section-intro { display: block; } } @media (max-width: 560px) { .shell { width: min(100% - 32px, 1180px); } .site-header-inner { height: 72px; } .mobile-nav { top: 72px; } .hero { min-height: auto; padding: 48px 0 56px; } .hero h1 { font-size: 38px; } .lede { font-size: 15px; } .hero-actions { display: grid; } .button { justify-content: center; } .capabilities, .showcase { padding: 68px 0; } .capability-grid { grid-template-columns: 1fr; } .capability-grid article { min-height: auto; } .brief-mock { flex-direction: column; } .statement { padding: 80px 0; } .faq { padding-bottom: 64px; } .contact { padding: 28px; } .contact-form { grid-template-columns: 1fr; } .contact-submit { justify-self: stretch; text-align: center; justify-content: center; } .site-footer { align-items: flex-start; flex-wrap: wrap; } .site-footer-copy { order: 3; width: 100%; text-align: left; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; } }