/* ============ RESET & BASE ============ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); overflow-x: hidden; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: 'Manrope', 'Inter', sans-serif; margin: 0; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } img, svg { display: block; max-width: 100%; } .container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; } /* ============ THEME TOKENS ============ */ :root { --bg: #0b0d14; --bg-alt: #10131d; --surface: #151827; --surface-2: #1b1f30; --border: rgba(255,255,255,0.08); --text: #eef0f7; --text-dim: #a4a9bd; --text-faint: #6d7189; --accent: #6c5ce7; --accent-2: #00e5c7; --accent-3: #ff6b8b; --gold: #ffc94d; --grad: linear-gradient(135deg, var(--accent), var(--accent-2)); --grad-warm: linear-gradient(135deg, #ff6b8b, #ffc94d); --shadow-lg: 0 30px 60px -20px rgba(0,0,0,0.5); --shadow-glow: 0 0 0 1px rgba(108,92,231,0.25), 0 20px 50px -15px rgba(108,92,231,0.35); --radius: 20px; --radius-sm: 12px; --ease: cubic-bezier(.22,.9,.32,1.2); } /* light variant — toggled via , see the theme toggle button next to the language switcher (js/main.js applyTheme()). Accent/ gradient/shape tokens stay the same in both themes — only surfaces/text/ shadows change, so brand identity (purple/teal gradient) stays recognizable. */ :root[data-theme="light"] { --bg: #f7f7fb; --bg-alt: #f0f1f7; --surface: #ffffff; --surface-2: #f2f1f8; --border: rgba(20,16,50,0.08); --text: #16152b; --text-dim: #5b5775; --text-faint: #8b87a3; --shadow-lg: 0 30px 60px -20px rgba(30,20,70,0.18); --shadow-glow: 0 0 0 1px rgba(108,92,231,0.18), 0 20px 50px -15px rgba(108,92,231,0.22); } :root[data-theme="light"] .blob { opacity: 0.16; } ::selection { background: var(--accent); color: #fff; } /* ============ BACKGROUND DECOR ============ */ .bg-decor { position: fixed; inset: 0; z-index: -1; overflow: hidden; } .blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.35; animation: float-blob 22s ease-in-out infinite; } .blob-1 { width: 520px; height: 520px; background: var(--accent); top: -160px; left: -120px; animation-duration: 26s; } .blob-2 { width: 480px; height: 480px; background: var(--accent-2); top: 30%; right: -180px; animation-duration: 30s; animation-delay: -6s; } .blob-3 { width: 420px; height: 420px; background: var(--accent-3); bottom: -160px; left: 30%; animation-duration: 24s; animation-delay: -12s; opacity: 0.22; } @keyframes float-blob { 0%, 100% { transform: translate(0,0) scale(1); } 33% { transform: translate(60px, 40px) scale(1.08); } 66% { transform: translate(-40px, 60px) scale(0.95); } } @media (prefers-reduced-motion: reduce) { .blob { animation: none; } html { scroll-behavior: auto; } } /* ============ UTILITIES ============ */ .text-gradient { background: linear-gradient(110deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent)); background-size: 250% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradient-pan 7s ease-in-out infinite; } @keyframes gradient-pan { 0%, 100% { background-position: 0% center; } 50% { background-position: 100% center; } } @media (prefers-reduced-motion: reduce) { .text-gradient { animation: none; } } .eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 12px; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--accent); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 999; } .skip-link:focus { left: 16px; top: 16px; } /* scroll reveal — directional, with a soft blur that focuses in */ [data-reveal] { opacity: 0; transform: translateY(34px); filter: blur(7px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s ease; transition-delay: calc(var(--rd, 0) * 1ms); will-change: opacity, transform, filter; } [data-reveal="left"] { transform: translateX(-46px); } [data-reveal="right"] { transform: translateX(46px); } [data-reveal="zoom"] { transform: scale(.9) translateY(24px); } [data-reveal="flip"] { transform: perspective(700px) rotateX(14deg) translateY(30px); } [data-reveal].is-visible { opacity: 1; transform: none; filter: none; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; } } /* scroll progress bar */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); z-index: 300; box-shadow: 0 0 12px rgba(108,92,231,.6); pointer-events: none; } /* ============ BUTTONS ============ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: 999px; font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s ease, border-color .3s ease; white-space: nowrap; } .btn svg { transition: transform .3s var(--ease); } .btn:hover svg { transform: translateX(3px); } .btn-primary { background: var(--grad); color: #fff; box-shadow: var(--shadow-glow); } .btn-primary:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 0 0 1px rgba(108,92,231,0.4), 0 26px 60px -14px rgba(108,92,231,0.55); } .btn-ghost { background: rgba(255,255,255,0.04); color: var(--text); border-color: var(--border); backdrop-filter: blur(6px); } .btn-ghost:hover { background: rgba(255,255,255,0.08); transform: translateY(-3px); } .btn-outline { background: transparent; color: var(--text); border-color: var(--border); } .btn-outline:hover { border-color: var(--accent-2); color: var(--accent-2); transform: translateY(-2px); } .btn-lg { padding: 16px 30px; font-size: 16px; } .btn-sm { padding: 10px 20px; font-size: 14px; } .btn-block { width: 100%; } /* ============ HEADER ============ */ .site-header { position: sticky; top: 0; z-index: 100; padding: 14px 0; transition: transform .4s var(--ease), background .3s ease, border-color .3s ease, padding .3s ease; border-bottom: 1px solid transparent; } .site-header.is-scrolled { background: rgba(11,13,20,0.72); backdrop-filter: blur(14px) saturate(140%); border-color: var(--border); padding: 10px 0; } .site-header.is-hidden { transform: translateY(-100%); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; } .logo-mark { display: inline-flex; filter: drop-shadow(0 4px 14px rgba(108,92,231,0.5)); } .logo-word { font-family: 'Manrope', sans-serif; } .main-nav { display: flex; gap: 20px; } .main-nav a { font-size: 15px; font-weight: 500; color: var(--text-dim); position: relative; padding: 6px 0; transition: color .25s ease; white-space: nowrap; } .main-nav a::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--grad); border-radius: 2px; transition: width .3s var(--ease); } .main-nav a:hover { color: var(--text); } .main-nav a:hover::after { width: 100%; } .header-actions { display: flex; align-items: center; gap: 14px; } .lang-switch { display: flex; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 3px; } .lang-btn { border: none; background: transparent; color: var(--text-faint); padding: 6px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; transition: all .25s ease; } .lang-btn.is-active { background: var(--grad); color: #fff; } .lang-btn:not(.is-active):hover { color: var(--text); } .theme-switch-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-faint); transition: color .25s ease, border-color .25s ease, transform .25s var(--ease); } .theme-switch-btn:hover { color: var(--accent); border-color: var(--accent); transform: rotate(14deg); } .theme-switch-btn .icon-moon { display: none; } :root[data-theme="light"] .theme-switch-btn .icon-sun { display: none; } :root[data-theme="light"] .theme-switch-btn .icon-moon { display: block; } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 6px; } .nav-toggle span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .3s ease, opacity .3s ease; } /* ============ HERO ============ */ .hero { padding: 90px 0 60px; } .hero-inner { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr); gap: 50px; align-items: center; } .badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 13.5px; font-weight: 600; color: var(--text-dim); margin-bottom: 24px; } .badge-glow { box-shadow: 0 0 24px -6px rgba(108,92,231,0.5); animation: badge-pulse 3.2s ease-in-out infinite; } @keyframes badge-pulse { 0%, 100% { box-shadow: 0 0 18px -8px rgba(108,92,231,0.4); } 50% { box-shadow: 0 0 28px -4px rgba(0,229,199,0.45); } } .hero-title { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.14; font-weight: 800; letter-spacing: -0.02em; } .hero-subtitle { margin-top: 22px; font-size: 18px; line-height: 1.6; color: var(--text-dim); max-width: 560px; } .cta-row { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; } .stats-row { display: flex; gap: 30px; margin-top: 44px; flex-wrap: wrap; } .stat-chip { display: flex; flex-direction: column; gap: 4px; } .stat-num { font-family: 'Manrope', sans-serif; font-size: 26px; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat-chip span { font-size: 13px; color: var(--text-faint); max-width: 140px; } /* hero visual */ .hero-visual { position: relative; height: 460px; } .float-card { position: absolute; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); animation: floaty 6s ease-in-out infinite; will-change: transform; } @keyframes floaty { 0%, 100% { transform: translate(var(--fx,0), var(--fy,0)) rotate(0deg); } 50% { transform: translate(calc(var(--fx,0) * 1.15), calc(var(--fy,0) * 1.15 - 10px)) rotate(0.3deg); } } .chat-window { top: 0; left: 8%; width: 88%; padding: 18px; animation-duration: 7s; } .chat-window-lg { position: static; width: 100%; padding: 20px; margin: 0; animation: none; } .chat-head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px; } .chat-avatar { width: 36px; height: 36px; border-radius: 10px; background: var(--grad); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 15px; } .chat-name { font-weight: 700; font-size: 14.5px; } .chat-status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-faint); } .chat-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 8px var(--accent-2); animation: blink-dot 2s ease-in-out infinite; } @keyframes blink-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .chat-body { display: flex; flex-direction: column; gap: 10px; min-height: 60px; } .msg { padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.45; max-width: 86%; animation: msg-in .5s var(--ease) both; } @keyframes msg-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .msg-in { background: var(--surface-2); align-self: flex-start; border-bottom-left-radius: 4px; } .msg-out { background: var(--grad); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; } .msg-meta { align-self: flex-end; font-size: 11px; color: var(--text-faint); background: none; padding: 0 4px; } .msg-typing { align-self: flex-start; background: var(--surface-2); display: flex; gap: 4px; padding: 12px 16px; } .msg-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); animation: typing-bounce 1.2s ease-in-out infinite; } .msg-typing span:nth-child(2) { animation-delay: .15s; } .msg-typing span:nth-child(3) { animation-delay: .3s; } @keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } } /* right: 0 by default, NOT the decorative -2% overhang. .container maxes out at 1180px, so between roughly 981px and 1180px the container fills the whole viewport and a negative offset here has nothing to hang over -- it pushed the page 13-14px wider than the screen. The overhang is restored below, only at widths where the container is actually centred and has real margin to spare. */ .lead-card { top: 55%; right: 0; width: 250px; padding: 16px; animation-duration: 8s; animation-delay: -2s; } @media (min-width: 1240px) { .lead-card { right: -2%; } } /* Even at right:0 the float animation still translates these cards a few px on X, and a transform counts toward the page's scroll width. Clip the one container that holds all of them everywhere the layout has no spare margin; above 1240px .container is centred and the overhang is intentional design. */ @media (max-width: 1239px) { .hero-visual { overflow: clip; } } .lead-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; color: var(--accent-2); margin-bottom: 10px; } .lead-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 0 rgba(0,229,199,0.6); animation: pulse-ring 1.8s ease-out infinite; } @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(0,229,199,0.6); } 100% { box-shadow: 0 0 0 10px rgba(0,229,199,0); } } .lead-row { display: flex; justify-content: space-between; font-size: 12.5px; padding: 5px 0; color: var(--text-faint); border-bottom: 1px dashed var(--border); } .lead-row:last-child { border-bottom: none; } .lead-row strong { color: var(--text); font-weight: 600; } .mini-badge { bottom: 4%; left: 2%; padding: 10px 16px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; animation-duration: 9s; animation-delay: -4s; } /* ============ TRUST MARQUEE ============ */ .trust-bar { padding: 30px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .marquee-track { display: flex; gap: 14px; width: max-content; animation: marquee-scroll 104s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 7px)); } } .channel-pill { display: flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 14px; font-weight: 600; color: var(--text-dim); white-space: nowrap; } .channel-pill.soon { opacity: 0.55; } .channel-pill em { font-style: normal; font-size: 11px; background: var(--surface-2); padding: 2px 7px; border-radius: 999px; color: var(--text-faint); } /* ============ SECTION HEAD ============ */ .section-head { text-align: center; max-width: 640px; margin: 0 auto 56px; } .section-head h2 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; } .section-head p { margin-top: 16px; font-size: 16.5px; color: var(--text-dim); line-height: 1.6; } .features, .how, .demo, .pricing, .faq { padding: 110px 0; } /* ============ BENTO FEATURES ============ */ .bento { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; } .bento-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; transition: transform .4s var(--ease), border-color .4s ease, box-shadow .4s ease; position: relative; overflow: hidden; } .bento-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--grad); opacity: 0; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: opacity .4s ease; pointer-events: none; } .bento-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: var(--shadow-lg), 0 0 24px rgba(108,92,231,0.3); } .bento-card:hover::before { opacity: 1; } .bento-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(108,92,231,.25), transparent 65%); transition: opacity .35s ease; pointer-events: none; } .bento-card:hover::after { opacity: 1; } .price-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(0,229,199,.2), transparent 65%); transition: opacity .35s ease; pointer-events: none; } .price-card:hover::after { opacity: 1; } .bento-lg { grid-column: span 1; grid-row: span 2; display: flex; flex-direction: column; } .card-icon { width: 46px; height: 46px; border-radius: 13px; margin-bottom: 18px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(108,92,231,0.18), rgba(0,229,199,0.14)); color: var(--accent-2); transition: transform .4s var(--ease); } .bento-card:hover .card-icon { transform: rotate(-6deg) scale(1.08); } .bento-card h3 { font-size: 18.5px; font-weight: 700; margin-bottom: 10px; } .bento-card p { font-size: 14.5px; color: var(--text-dim); line-height: 1.6; } .mini-preview { margin-top: 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .ip-row { display: flex; align-items: center; gap: 8px; background: var(--surface-2); padding: 9px 12px; border-radius: 10px; font-size: 12.5px; color: var(--text-dim); } .ip-row b { color: var(--text); font-weight: 700; } .ip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .ip-dot.ig { background: linear-gradient(135deg, #f09433, #dc2743, #bc1888); } .ip-dot.tg { background: #229ed9; } .ip-dot.fb { background: #1877f2; } /* ============ HOW / TIMELINE ============ */ .timeline { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 30px; position: relative; padding-top: 10px; } .timeline-line { position: absolute; top: 24px; left: 12.5%; right: 12.5%; height: 2px; background: var(--border); z-index: 0; } .timeline-fill { display: block; height: 100%; width: 0%; background: var(--grad); transition: width 1.4s var(--ease); border-radius: 2px; } .timeline-step { position: relative; z-index: 1; } .step-num { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 15px; margin-bottom: 18px; color: var(--accent-2); transition: background .4s ease, color .4s ease, border-color .4s ease, transform .4s var(--ease); } .timeline-step.is-active .step-num { background: var(--grad); color: #fff; border-color: transparent; transform: scale(1.1); } .timeline-step h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; } .timeline-step p { font-size: 14px; color: var(--text-dim); line-height: 1.55; } /* ============ DEMO ============ */ .demo-inner { display: grid; grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr); gap: 60px; align-items: center; } .demo-copy h2 { font-size: clamp(26px, 3.2vw, 36px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; } .demo-copy p { margin-top: 16px; color: var(--text-dim); font-size: 16px; line-height: 1.6; } .kb-files { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } .kb-file { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); padding: 10px 14px; border-radius: 12px; font-size: 13px; color: var(--text-dim); } .kb-file em { font-style: normal; color: var(--text-faint); font-size: 11px; } .kb-add { border-style: dashed; color: var(--accent-2); background: transparent; } .kb-add:hover { border-color: var(--accent-2); } .chat-body#demoChatBody { min-height: 300px; max-height: 340px; overflow-y: auto; padding-right: 4px; } .chat-input-row { display: flex; gap: 10px; margin-top: 14px; border-top: 1px solid var(--border); padding-top: 14px; } .chat-input-row input { /* min-width:0 is what actually lets this shrink: an has a default intrinsic width (~180px), and `flex:1` alone will not shrink a flex item below its intrinsic size -- so on a 240px screen this row stayed wider than the page and scrolled it sideways. Same root cause as .phone-row in dashboard.css. */ flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 12px 18px; color: var(--text); font-size: 14px; outline: none; transition: border-color .3s ease; } .chat-input-row input:focus { border-color: var(--accent); } .chat-input-row button { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; border: none; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; transition: transform .3s var(--ease); } .chat-input-row button:hover { transform: scale(1.08) rotate(8deg); } /* ============ PRICING ============ */ /* flex-wrap costs nothing when there is room and is the only thing that keeps this row (label + switch + label + "−20%" badge) inside a 240px screen -- without it the row stayed one line and pushed the page sideways. */ .billing-toggle { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-bottom: 50px; font-size: 15px; font-weight: 600; color: var(--text-faint); } .billing-toggle .is-active { color: var(--text); } .switch { width: 52px; height: 28px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); position: relative; transition: background .3s ease; } .switch-knob { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--grad); transition: transform .35s var(--ease); } .switch[aria-checked="true"] .switch-knob { transform: translateX(24px); } .save-badge { background: rgba(0,229,199,0.14); color: var(--accent-2); font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; } .pricing-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; align-items: stretch; } .price-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 28px; display: flex; flex-direction: column; transition: transform .4s var(--ease), box-shadow .4s ease, border-color .4s ease; position: relative; } .price-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: var(--shadow-lg), 0 0 24px rgba(108,92,231,0.3); } .price-card h3 { font-size: 20px; font-weight: 800; } .price-desc { margin-top: 8px; font-size: 13.5px; color: var(--text-faint); min-height: 40px; } .price-amount { display: flex; align-items: baseline; gap: 6px; margin-top: 22px; flex-wrap: wrap; } .price-amount .amount { font-family: 'Manrope', sans-serif; font-size: 40px; font-weight: 800; } .price-amount .currency { font-size: 18px; font-weight: 700; color: var(--text-dim); } .price-amount .per { font-size: 13.5px; color: var(--text-faint); } .price-old { font-size: 18px; color: var(--text-faint); text-decoration: line-through; text-decoration-color: var(--accent-3); text-decoration-thickness: 2px; } .amount-custom { font-size: 26px; } .trial-note { font-size: 12.5px; color: var(--accent-2); font-weight: 600; margin-top: 8px; } .price-card .btn { margin-top: 22px; } .price-features { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .price-features li { font-size: 14px; color: var(--text-dim); padding-left: 26px; position: relative; } .price-features li::before { content: ''; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: rgba(0,229,199,0.14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 13l4 4L19 7' stroke='%2300e5c7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 10px; } .price-popular { border-color: rgba(108,92,231,0.5); background: linear-gradient(180deg, rgba(108,92,231,0.1), var(--surface) 40%); transform: scale(1.035); box-shadow: var(--shadow-glow); } .price-popular:hover { transform: scale(1.055) translateY(-6px); box-shadow: var(--shadow-lg), 0 0 32px rgba(108,92,231,0.5); } .popular-ribbon { position: absolute; top: -13px; left: 28px; background: var(--grad); color: #fff; font-size: 12px; font-weight: 800; padding: 5px 14px; border-radius: 999px; box-shadow: 0 8px 20px -6px rgba(108,92,231,0.6); } .promo-badge { position: absolute; top: 20px; right: 20px; background: linear-gradient(135deg, #ff6b8b, #ffc94d); color: #1a1a1a; font-size: 11.5px; font-weight: 800; padding: 5px 11px; border-radius: 999px; animation: promo-shine 2.6s ease-in-out infinite; } @keyframes promo-shine { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18); } } .guarantee-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 30px; margin-top: 50px; } .guarantee-item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-dim); } .guarantee-item svg { color: var(--accent-2); flex-shrink: 0; } /* ============ FAQ ACCORDION ============ */ .accordion { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .acc-item { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; transition: border-color .3s ease; } .acc-item.is-open { border-color: rgba(108,92,231,0.4); } .acc-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; background: none; border: none; color: var(--text); text-align: left; font-size: 15.5px; font-weight: 600; } .acc-icon { position: relative; width: 18px; height: 18px; flex-shrink: 0; } .acc-icon::before, .acc-icon::after { content: ''; position: absolute; background: var(--accent-2); border-radius: 2px; transition: transform .35s var(--ease); } .acc-icon::before { width: 100%; height: 2px; top: 8px; left: 0; } .acc-icon::after { width: 2px; height: 100%; left: 8px; top: 0; } .acc-item.is-open .acc-icon::after { transform: rotate(90deg); } .acc-body { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease), padding .45s ease; } .acc-item.is-open .acc-body { max-height: 240px; } .acc-body p { padding: 0 24px 22px; font-size: 14.5px; color: var(--text-dim); line-height: 1.65; } /* ============ FINAL CTA ============ */ .final-cta { padding: 40px 24px 120px; } .final-cta-inner { text-align: center; padding: 70px 40px; border-radius: 28px; background: linear-gradient(135deg, rgba(108,92,231,0.22), rgba(0,229,199,0.14)); border: 1px solid rgba(108,92,231,0.3); position: relative; overflow: hidden; } .final-cta-inner::before { content: ''; position: absolute; inset: -50%; background: conic-gradient(from 0deg, transparent, rgba(108,92,231,0.25), transparent 30%); animation: rotate-glow 12s linear infinite; } @keyframes rotate-glow { to { transform: rotate(360deg); } } .final-cta-inner h2, .final-cta-inner p, .final-cta-inner .btn { position: relative; z-index: 1; } .final-cta-inner h2 { font-size: clamp(26px, 3.6vw, 40px); font-weight: 800; } .final-cta-inner p { margin: 18px auto 30px; max-width: 480px; color: var(--text-dim); font-size: 16px; line-height: 1.6; } /* ============ FOOTER ============ */ .site-footer { border-top: 1px solid var(--border); padding: 60px 0 30px; } .footer-grid { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap: 40px; } .footer-brand p { margin: 14px 0 18px; color: var(--text-faint); font-size: 14px; max-width: 260px; line-height: 1.6; } .footer-col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: 16px; } .footer-col a { display: block; font-size: 14.5px; color: var(--text-dim); padding: 6px 0; transition: color .25s ease; } .footer-col a:hover { color: var(--accent-2); } .footer-bottom { display: flex; justify-content: space-between; margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-faint); flex-wrap: wrap; gap: 10px; } /* ============ RESPONSIVE ============ */ @media (max-width: 1024px) { /* The header only switched to the burger at 720px, but the full desktop row (logo + nav + RU/UZ/EN switch + theme + CTA) already stops fitting right below 980 -- measured 363px of header actions inside a 753px screen, which pushed the page 207px wider than the viewport on a tablet. The layout here already collapses to one column, so the header should switch with it. */ .main-nav { display: none; } .nav-toggle { display: flex; } .lang-switch { display: none; } .footer-lang { display: flex; } /* decorative hero cards overhang their container by design; contain them once the hero is stacked, so they can't widen the page */ .hero-visual { overflow: clip; } .hero-inner { grid-template-columns: minmax(0,1fr); } .hero-visual { height: 380px; margin-top: 20px; } .demo-inner { grid-template-columns: minmax(0,1fr); } .bento { grid-template-columns: repeat(2, minmax(0,1fr)); } .bento-lg { grid-column: span 2; grid-row: span 1; } .timeline { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 40px; } .timeline-line { display: none; } .pricing-grid { grid-template-columns: minmax(0,1fr); max-width: 440px; margin: 0 auto; } .price-popular { transform: scale(1); order: -1; } .price-popular:hover { transform: translateY(-6px); } .footer-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } } @media (max-width: 720px) { .main-nav { display: none; } .nav-toggle { display: flex; } .header-actions { gap: 10px; } .lang-switch { display: none; } .footer-lang { display: flex; } .bento { grid-template-columns: minmax(0,1fr); } .bento-lg { grid-column: span 1; } .timeline { grid-template-columns: minmax(0,1fr); } .footer-grid { grid-template-columns: minmax(0,1fr); gap: 30px; } .footer-bottom { flex-direction: column; } .stats-row { gap: 20px; } .hero { padding-top: 60px; } .features, .how, .demo, .pricing, .faq { padding: 70px 0; } } body.nav-open .main-nav { display: flex; position: fixed; inset: 70px 16px auto 16px; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 20px; box-shadow: var(--shadow-lg); gap: 4px; z-index: 90; } body.nav-open .main-nav a { padding: 10px 0; } body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; } body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============ NARROW PHONES (<=480px) ============ The layout previously stopped adapting at 720px, so on a real 360px phone the header row (logo + theme toggle + "Начать бесплатно" + burger) needed more width than .container's 312px of usable space and pushed the whole page ~20px wider than the screen -- that is what made the site scroll sideways and "вылетать из рамок". Measured directly at 360px before/after. */ @media (max-width: 480px) { .container { padding: 0 16px; } /* the header CTA duplicates both the hero button and the burger menu, and it is the single widest item in the row -- dropping it here is what actually makes the header fit, rather than shrinking everything to unreadable sizes */ .header-actions > .btn { display: none; } .header-actions { gap: 8px; } h1, .hero h1 { font-size: clamp(26px, 8vw, 34px); line-height: 1.15; } h2 { font-size: clamp(22px, 6.5vw, 28px); } /* long unbroken strings (URLs, emails, phone numbers) are the other classic source of sideways scroll on a narrow screen */ body { overflow-wrap: break-word; } /* The decorative hero cards deliberately overhang their container on desktop (.lead-card is `right: -2%`, .mini-badge `left: 2%`) for depth. A phone has no room for that overhang, and because they're absolutely positioned a max-width alone can't pull them back in -- the offset itself has to go, or the card keeps sticking out past the screen edge and scrolls the page. */ .float-card { max-width: calc(100vw - 32px); } .lead-card { right: 0; width: auto; max-width: min(250px, calc(100vw - 32px)); } .mini-badge { left: 0; } /* The float animation translates these cards on X, which put them back outside the screen even after the offsets above were zeroed -- a transform still counts toward the page's scroll width. There's no room for the effect on a phone anyway. */ .float-card { animation: none; } /* .btn is `white-space: nowrap` so its label can never wrap -- on a 240px screen (Galaxy Fold folded, and the narrowest devices still in use) the hero CTA alone needed 280px and dragged the page sideways. Allowing the label to wrap and capping the width to the container is what makes the page fit at ANY width rather than only down to a tested one. */ .btn { white-space: normal; max-width: 100%; padding: 13px 18px; } /* Final guard for this one container: it holds every decorative absolutely- positioned hero element, so clipping here contains anything added later without having to chase each new element's own offsets. `clip` keeps it from becoming a scroll container. */ .hero-visual { overflow: clip; } } /* Belt-and-braces: nothing decorative should ever be able to scroll the page sideways. `clip` (not `hidden`) is used deliberately -- unlike `hidden` it does NOT turn the element into a scroll container, so position: sticky elsewhere on the page keeps working exactly as before. */ @media (max-width: 720px) { body { overflow-x: clip; } }