/* ========================================================= HubSuite — базові стилі Дві теми: light (варіант B, за замовчуванням) / dark (варіант A) Перемикаються через атрибут data-theme на ========================================================= */ /* -------- Спільні токени бренду -------- */ :root{ --navy-900:#0A1733; --navy-800:#0E1E45; --navy-700:#152a5c; --navy-600:#1e3a78; --lime:#C3F53C; --lime-600:#AEEA1F; --white:#ffffff; --font-display:'Sora', system-ui, sans-serif; --font-body:'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --container:1200px; --radius:18px; --radius-sm:12px; --ease:cubic-bezier(.22,.61,.36,1); --header-h:76px; } /* -------- Тема B (світла) -------- */ [data-theme="light"]{ --bg:#F5F7FC; --bg-alt:#FFFFFF; --surface:#FFFFFF; --surface-2:#EEF1F9; --text:#3A4363; --text-strong:#141C33; --heading:#0E1E45; --muted:#6A739A; --border:rgba(14,30,69,.15); --border-strong:rgba(14,30,69,.28); --accent:var(--lime); --accent-ink:#0E1E45; --accent-soft:rgba(174,234,31,.16); --shadow-sm:0 4px 16px rgba(16,30,64,.06); --shadow:0 18px 44px rgba(16,30,64,.10); --shadow-lg:0 30px 70px rgba(16,30,64,.16); --header-bg:rgba(255,255,255,.82); --hero-panel:#0E1E45; /* темна картка візуалу на світлому фоні */ --hero-panel-2:#152a5c; --grid-line:rgba(16,30,64,.05); --glow-1:rgba(174,234,31,.20); --glow-2:rgba(30,58,120,.14); } /* -------- Тема A (темна) -------- */ [data-theme="dark"]{ --bg:#0A1733; --bg-alt:#0E1E45; --surface:#122350; --surface-2:#0E1E45; --text:#C4CEEC; --text-strong:#FFFFFF; --heading:#FFFFFF; --muted:#8C99C4; --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.18); --accent:var(--lime); --accent-ink:#0E1E45; --accent-soft:rgba(174,234,31,.14); --shadow-sm:0 4px 16px rgba(0,0,0,.30); --shadow:0 20px 50px rgba(0,0,0,.45); --shadow-lg:0 30px 80px rgba(0,0,0,.55); --header-bg:rgba(10,23,51,.72); --hero-panel:#122350; --hero-panel-2:#1b3068; --grid-line:rgba(255,255,255,.045); --glow-1:rgba(174,234,31,.16); --glow-2:rgba(40,90,200,.22); } /* -------- Reset / база -------- */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px)} body{ font-family:var(--font-body); background:var(--bg); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background .4s var(--ease), color .4s var(--ease); } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} svg{display:block} .container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px} h1,h2,h3{font-family:var(--font-display);color:var(--heading);line-height:1.08;letter-spacing:-.02em} .accent-text{color:var(--accent)} [data-theme="light"] .accent-text{ /* на світлому лайм на білому слабо читається у тексті — робимо темніше */ color:#0E1E45; background:linear-gradient(180deg, transparent 62%, var(--accent-soft) 62%); padding:0 .06em; } /* ========================================================= КНОПКИ ========================================================= */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5em; font-family:var(--font-body);font-weight:600;font-size:15px; padding:13px 22px;border-radius:12px;border:1px solid transparent; cursor:pointer;white-space:nowrap; transition:transform .2s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .2s var(--ease), border-color .25s var(--ease); } .btn-lg{padding:16px 28px;font-size:16px} .btn-block{width:100%} .btn-primary{ background:var(--accent);color:var(--accent-ink); box-shadow:0 8px 22px rgba(174,234,31,.28); } .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(174,234,31,.42)} .btn-primary:active{transform:translateY(0)} .btn-ghost{ background:transparent;color:var(--heading); border-color:var(--border-strong); } .btn-ghost:hover{border-color:var(--accent);color:var(--heading);transform:translateY(-2px)} .btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px} /* Пульсація для головних CTA (заклик до дії): Hero, форма тощо */ @keyframes btnPulse{ 0%{box-shadow:0 8px 22px rgba(174,234,31,.30), 0 0 0 0 rgba(174,234,31,.45)} 70%{box-shadow:0 8px 22px rgba(174,234,31,.30), 0 0 0 16px rgba(174,234,31,0)} 100%{box-shadow:0 8px 22px rgba(174,234,31,.30), 0 0 0 0 rgba(174,234,31,0)} } .btn-pulse{animation:btnPulse 2.2s ease-out infinite} .btn-pulse:hover{animation:none} /* ========================================================= ШАПКА ========================================================= */ .site-header{ position:fixed;top:0;left:0;right:0;z-index:100;height:var(--header-h); background:var(--header-bg); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--border); transition:background .4s var(--ease), border-color .4s var(--ease), height .3s var(--ease); } .site-header .container{max-width:1340px} .site-header.scrolled{box-shadow:var(--shadow-sm)} .header-inner{height:var(--header-h);display:flex;align-items:center;gap:20px;flex-wrap:nowrap} .brand{flex-shrink:0;display:flex;align-items:center} .brand-logo{height:56px;width:auto} .brand-logo--dark{display:none} [data-theme="dark"] .brand-logo--light{display:none} [data-theme="dark"] .brand-logo--dark{display:block} .main-nav{display:flex;gap:26px;margin-left:6px} .main-nav a{ font-size:15px;font-weight:500;color:var(--text);position:relative;padding:6px 0; white-space:nowrap;transition:color .2s var(--ease); } .main-nav a::after{ content:"";position:absolute;left:0;right:100%;bottom:0;height:2px; background:var(--accent);transition:right .28s var(--ease); } .main-nav a:hover{color:var(--heading)} .main-nav a:hover::after{right:0} .header-actions{display:flex;align-items:center;gap:14px;margin-left:auto;flex-wrap:nowrap} .header-phone{display:flex;align-items:center;gap:10px} .phone-num{font-weight:600;font-size:14px;color:var(--heading);white-space:nowrap;letter-spacing:.01em} .phone-num:hover{color:var(--accent)} .msg-icons{display:flex;gap:7px} .msg-ico{ width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex-shrink:0; border:1px solid var(--border-strong);background:var(--surface); transition:transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); } .msg-ico svg{width:18px;height:18px} .msg-ico--call svg{fill:#2FB56B} .msg-ico--tg svg{fill:#2AABEE} .msg-ico--vb svg{fill:#7360F2} .msg-ico:hover{transform:translateY(-2px);border-color:var(--accent)} .header-msg-mobile{display:none;gap:6px} /* Перемикач-лампочка */ .bulb-toggle{ width:44px;height:44px;flex-shrink:0;border-radius:12px;cursor:pointer; background:var(--surface);border:1px solid var(--border-strong); display:grid;place-items:center;position:relative; transition:transform .2s var(--ease), border-color .25s var(--ease), box-shadow .3s var(--ease); } .bulb-toggle:hover{transform:translateY(-2px);border-color:var(--accent)} .bulb-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .bulb-svg{width:24px;height:24px;overflow:visible} .bulb-glass{ fill:transparent;stroke:var(--muted);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; transition:fill .45s var(--ease), stroke .45s var(--ease), filter .45s var(--ease); } .bulb-base{fill:none;stroke:var(--muted);stroke-width:1.7;stroke-linecap:round;transition:stroke .45s var(--ease)} .bulb-rays{stroke:var(--lime);stroke-width:1.9;stroke-linecap:round;fill:none;opacity:0;transform-origin:12px 12px;transform:scale(.5);transition:opacity .4s var(--ease), transform .5s var(--ease)} /* УВІМКНЕНО (світла тема): лампочка світиться */ [data-theme="light"] .bulb-glass{fill:var(--lime);stroke:#7FA512;filter:drop-shadow(0 0 7px rgba(195,245,60,.85))} [data-theme="light"] .bulb-base{stroke:#7FA512} [data-theme="light"] .bulb-rays{opacity:1;transform:scale(1)} [data-theme="light"] .bulb-toggle{border-color:rgba(174,234,31,.55);box-shadow:0 4px 16px rgba(174,234,31,.28)} /* спалах при перемиканні */ @keyframes bulbFlash{ 0%{filter:drop-shadow(0 0 0 rgba(195,245,60,0))} 45%{filter:drop-shadow(0 0 16px rgba(195,245,60,1))} 100%{filter:drop-shadow(0 0 7px rgba(195,245,60,.85))} } .bulb-toggle.flash .bulb-glass{animation:bulbFlash .6s var(--ease)} @keyframes bulbShake{0%,100%{transform:rotate(0)}30%{transform:rotate(-8deg)}60%{transform:rotate(7deg)}} .bulb-toggle.flash .bulb-svg{animation:bulbShake .5s var(--ease)} .btn-header{padding:11px 18px;font-size:14px} /* Бургер */ .burger{display:none;width:44px;height:40px;border:1px solid var(--border-strong); background:var(--surface);border-radius:10px;cursor:pointer;flex-direction:column; gap:5px;align-items:center;justify-content:center} .burger span{width:20px;height:2px;background:var(--heading);border-radius:2px;transition:transform .3s var(--ease), opacity .2s} .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger.open span:nth-child(2){opacity:0} .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* Мобільне меню */ .mobile-drawer{ position:absolute;top:var(--header-h);left:0;right:0; background:var(--bg-alt);border-bottom:1px solid var(--border); padding:20px 24px 26px;display:flex;flex-direction:column;gap:6px; transform:translateY(-12px);opacity:0;pointer-events:none; transition:transform .3s var(--ease), opacity .3s var(--ease); box-shadow:var(--shadow); } .mobile-drawer.open{transform:translateY(0);opacity:1;pointer-events:auto} .mobile-drawer nav{display:flex;flex-direction:column} .mobile-drawer nav a{padding:13px 4px;font-size:17px;font-weight:600;color:var(--heading);border-bottom:1px solid var(--border)} .mobile-drawer .btn{margin-top:16px} /* ========================================================= HERO ========================================================= */ .hero{position:relative;padding:calc(var(--header-h) + 64px) 0 90px;overflow:hidden} .hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none} .hero-grid{ position:absolute;inset:0; background-image:linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size:52px 52px; mask-image:radial-gradient(ellipse 80% 70% at 65% 25%, #000 40%, transparent 80%); -webkit-mask-image:radial-gradient(ellipse 80% 70% at 65% 25%, #000 40%, transparent 80%); } .hero-glow{position:absolute;border-radius:50%;filter:blur(80px);opacity:.9} .hero-glow--1{width:520px;height:520px;background:var(--glow-1);top:-120px;right:-60px} .hero-glow--2{width:460px;height:460px;background:var(--glow-2);bottom:-160px;left:-120px} .hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center} .eyebrow{ font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.18em; color:var(--accent-ink);display:inline-block; background:var(--accent-soft);padding:7px 14px;border-radius:100px; } [data-theme="dark"] .eyebrow{color:var(--lime);background:rgba(174,234,31,.10)} .hero-title{font-size:clamp(38px,5.4vw,66px);font-weight:800;margin:22px 0 20px} .hero-sub{font-size:clamp(16px,1.4vw,19px);max-width:560px;color:var(--text)} .hero-cta{display:flex;gap:14px;margin:30px 0 18px;flex-wrap:wrap} .hero-trust{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--muted);font-weight:500} .ico-check{width:18px;height:18px;fill:none;stroke:var(--lime-600);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .hero-stats{display:flex;gap:34px;margin-top:38px;flex-wrap:wrap} .stat{display:flex;flex-direction:column} .stat-num{font-family:var(--font-display);font-weight:800;font-size:38px;color:var(--heading);line-height:1} .stat-label{font-size:13.5px;color:var(--muted);margin-top:6px;max-width:130px} /* -------- Візуал: панель керівника -------- */ .hero-visual{position:relative;display:flex;justify-content:center} .dash-orbit{ position:absolute;width:120%;height:120%;top:-10%;left:-10%; border-radius:50%; background:radial-gradient(circle at 50% 40%, var(--glow-1), transparent 60%); opacity:.7; } .dash-card{ position:relative;width:100%;max-width:440px; background:linear-gradient(160deg, var(--hero-panel), var(--hero-panel-2)); border:1px solid rgba(255,255,255,.10); border-radius:22px;padding:22px; box-shadow:var(--shadow-lg); color:#DCE4FB; } .dash-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px} .dash-title{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;color:#fff;font-size:16px} .dash-title .dot{width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px rgba(174,234,31,.18)} .dash-ai{font-size:11.5px;font-weight:600;color:var(--lime);background:rgba(174,234,31,.12);padding:5px 10px;border-radius:100px;border:1px solid rgba(174,234,31,.25)} .dash-kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px} .kpi{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px} .kpi-label{font-size:12px;color:#9EAAD4;display:block} .kpi-val{font-family:var(--font-display);font-weight:800;font-size:28px;color:#fff;display:block;margin:4px 0 2px} .kpi-trend{font-size:12px;font-weight:600} .kpi-trend.up{color:var(--lime)} .dash-chart{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:14px 14px 8px;margin-bottom:16px} .chart-head{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:#9EAAD4;margin-bottom:8px} .chart-sum{font-family:var(--font-display);font-weight:700;color:#fff;font-size:15px} .bars{width:100%;height:96px} .bar{fill:rgba(255,255,255,.22);rx:4;transition:none} .bar--accent{fill:var(--lime)} .dash-pipeline{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .pl-step{font-size:11.5px;font-weight:600;padding:6px 11px;border-radius:100px;background:rgba(255,255,255,.06);color:#9EAAD4;border:1px solid rgba(255,255,255,.08)} .pl-step.done{color:#DCE4FB} .pl-step.active{background:var(--lime);color:var(--navy-800);border-color:transparent} .pl-arrow{width:14px;height:2px;background:rgba(255,255,255,.2);border-radius:2px} /* ========================================================= УНІВЕРСАЛЬНА СЕКЦІЯ ========================================================= */ .section{padding:96px 0;position:relative} .section--alt{background:var(--bg-alt)} .section-head{max-width:720px;margin:0 auto 56px;text-align:center} .section-title{font-size:clamp(30px,3.6vw,46px);font-weight:800;margin:16px 0 16px} .section-lead{font-size:clamp(16px,1.3vw,18px);color:var(--text)} .eyebrow--warn{color:#C24E2E;background:rgba(232,132,107,.14)} [data-theme="dark"] .eyebrow--warn{color:#F0A48C;background:rgba(232,132,107,.12)} /* ========================================================= ПРОБЛЕМА ========================================================= */ .problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .pain{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:28px 26px;transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .pain:hover{transform:translateY(-4px);border-color:rgba(232,132,107,.5);box-shadow:var(--shadow)} .pain-ico{ width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px; background:rgba(232,132,107,.12); } .pain-ico svg{width:24px;height:24px;fill:none;stroke:#E8846B;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .pain-title{font-size:19px;font-weight:700;color:var(--heading);margin-bottom:10px;letter-spacing:-.01em} .pain-text{font-size:14.5px;color:var(--muted);line-height:1.6} /* мостик до рішення */ .pain--bridge{ display:flex;flex-direction:column;justify-content:center; background:linear-gradient(150deg, var(--navy-700), var(--navy-800)); border-color:transparent;color:#fff;position:relative;overflow:hidden; } [data-theme="light"] .pain--bridge{background:linear-gradient(150deg, #142a5c, #0E1E45)} .pain--bridge::after{ content:"";position:absolute;right:-40px;bottom:-40px;width:160px;height:160px;border-radius:50%; background:radial-gradient(circle, rgba(174,234,31,.28), transparent 70%); } .pain--bridge:hover{transform:translateY(-4px);border-color:transparent;box-shadow:var(--shadow-lg)} .bridge-text{font-family:var(--font-display);font-weight:800;font-size:22px;color:#fff;position:relative;z-index:1;line-height:1.2} .bridge-sub{font-size:14px;color:var(--lime);margin-top:8px;position:relative;z-index:1;font-weight:600} .bridge-arrow{ width:44px;height:44px;border-radius:50%;background:var(--lime);display:grid;place-items:center; margin-top:22px;position:relative;z-index:1;transition:transform .3s var(--ease); } .bridge-arrow svg{width:22px;height:22px;fill:none;stroke:var(--navy-800);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .pain--bridge:hover .bridge-arrow{transform:translateX(5px)} /* стаггер появи карток */ .problem-grid .reveal:nth-child(2){transition-delay:.06s} .problem-grid .reveal:nth-child(3){transition-delay:.12s} .problem-grid .reveal:nth-child(4){transition-delay:.06s} .problem-grid .reveal:nth-child(5){transition-delay:.12s} .problem-grid .reveal:nth-child(6){transition-delay:.18s} @media (max-width:900px){ .problem-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:560px){ .problem-grid{grid-template-columns:1fr} } /* ========================================================= РІШЕННЯ ========================================================= */ .solution-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px} .sol{ display:flex;gap:20px;align-items:flex-start; background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:30px 28px;transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .sol:hover{transform:translateY(-4px);border-color:rgba(174,234,31,.5);box-shadow:var(--shadow)} .sol-ico{ width:54px;height:54px;flex-shrink:0;border-radius:14px;display:grid;place-items:center; background:var(--accent-soft); } .sol-ico svg{width:28px;height:28px;fill:none;stroke:var(--lime-600);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} [data-theme="dark"] .sol-ico svg{stroke:var(--lime)} .sol-title{font-size:20px;font-weight:700;color:var(--heading);margin-bottom:9px;letter-spacing:-.01em} .sol-text{font-size:14.5px;color:var(--muted);line-height:1.6;margin-bottom:14px} .sol-chip{ display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600; color:var(--heading);background:var(--surface-2);border:1px solid var(--border); padding:5px 12px 5px 10px;border-radius:100px; } .sol-chip::before{content:"↳";color:var(--lime-600);font-weight:700} [data-theme="dark"] .sol-chip::before{color:var(--lime)} .solution-cta{display:flex;justify-content:center;margin-top:44px} .solution-grid .reveal:nth-child(2){transition-delay:.08s} .solution-grid .reveal:nth-child(3){transition-delay:.12s} .solution-grid .reveal:nth-child(4){transition-delay:.18s} @media (max-width:820px){ .solution-grid{grid-template-columns:1fr} } /* ========================================================= МОЖЛИВОСТІ / МОДУЛІ ========================================================= */ .features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .feat{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm); padding:24px 22px;transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .feat:hover{transform:translateY(-4px);border-color:rgba(174,234,31,.5);box-shadow:var(--shadow)} .feat-ico{ width:46px;height:46px;border-radius:11px;display:grid;place-items:center;margin-bottom:16px; background:var(--accent-soft); } .feat-ico svg{width:24px;height:24px;fill:none;stroke:var(--lime-600);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} [data-theme="dark"] .feat-ico svg{stroke:var(--lime)} .feat-title{font-size:17px;font-weight:700;color:var(--heading);margin-bottom:8px;letter-spacing:-.01em} .feat-text{font-size:13.5px;color:var(--muted);line-height:1.55} /* AI-картка всередині сітки (заповнює порожні клітинки на десктопі) */ .feat--ai{ grid-column:span 2;display:flex;flex-direction:column;text-decoration:none;position:relative;overflow:hidden; background:linear-gradient(135deg, var(--navy-800), var(--navy-700)); border-color:rgba(174,234,31,.3); } [data-theme="light"] .feat--ai{background:linear-gradient(135deg,#0E1E45,#16306b)} .feat--ai::after{content:"";position:absolute;right:-30px;bottom:-40px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(174,234,31,.22),transparent 70%)} .feat--ai .feat-title{color:#fff;position:relative;z-index:1} .feat--ai .feat-text{color:#AEB9DC;position:relative;z-index:1} .feat--ai:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow-lg)} .feat-ico--ai{background:var(--lime);color:var(--navy-800);font-family:var(--font-display);font-weight:800;font-size:18px;position:relative;z-index:1} .feat-ai-link{margin-top:12px;color:var(--lime);font-weight:700;font-size:14px;position:relative;z-index:1} /* на десктопі показуємо картку в сітці, широку плашку ховаємо */ .features .feat-ai{display:none} /* акцентний перехід до AI-блоку */ .feat-ai{ display:flex;align-items:center;justify-content:space-between;gap:24px; margin-top:24px;padding:28px 32px;border-radius:var(--radius); background:linear-gradient(120deg, var(--navy-800), var(--navy-700)); border:1px solid rgba(174,234,31,.25);position:relative;overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s var(--ease); } [data-theme="light"] .feat-ai{background:linear-gradient(120deg, #0E1E45, #16306b)} .feat-ai::after{content:"";position:absolute;right:-30px;top:-30px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle, rgba(174,234,31,.22), transparent 70%)} .feat-ai:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)} .feat-ai-text{display:flex;align-items:center;gap:20px;position:relative;z-index:1} .feat-ai-badge{ flex-shrink:0;width:54px;height:54px;border-radius:14px;display:grid;place-items:center; background:var(--lime);color:var(--navy-800);font-family:var(--font-display);font-weight:800;font-size:20px; } .feat-ai-title{font-size:20px;font-weight:700;color:#fff;margin-bottom:6px;letter-spacing:-.01em} .feat-ai-sub{font-size:14px;color:#AEB9DC;line-height:1.5;max-width:640px} .feat-ai-arrow{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:var(--lime);display:grid;place-items:center;position:relative;z-index:1;transition:transform .3s var(--ease)} .feat-ai-arrow svg{width:22px;height:22px;fill:none;stroke:var(--navy-800);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .feat-ai:hover .feat-ai-arrow{transform:translateX(5px)} .features-grid .reveal:nth-child(4n+2){transition-delay:.05s} .features-grid .reveal:nth-child(4n+3){transition-delay:.10s} .features-grid .reveal:nth-child(4n+4){transition-delay:.15s} @media (max-width:1024px){ .features-grid{grid-template-columns:repeat(3,1fr)} .feat--ai{grid-column:span 1} } @media (max-width:720px){ .features-grid{grid-template-columns:repeat(2,1fr)} .feat--ai{display:none} .features .feat-ai{display:flex} .feat-ai{flex-direction:column;text-align:center;align-items:center;padding:26px 22px} .feat-ai-text{flex-direction:column;text-align:center} .feat-ai-sub{max-width:none} } @media (max-width:420px){ .features-grid{grid-template-columns:1fr} } /* ========================================================= AI ТА ТЕНДЕРИ (спотлайт-секція, завжди темна) ========================================================= */ .ai-section{ background:linear-gradient(165deg,#0A1733 0%, #0C1D46 100%); border-top:1px solid rgba(174,234,31,.16); border-bottom:1px solid rgba(174,234,31,.16); position:relative;overflow:hidden;color:#C4CEEC; } .ai-section .section-title{color:#fff} .ai-section .section-lead{color:#AEB9DC} .ai-section .eyebrow{color:var(--lime);background:rgba(174,234,31,.12)} .ai-glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none} .ai-glow--1{width:480px;height:480px;background:rgba(174,234,31,.14);top:-140px;left:-100px} .ai-glow--2{width:520px;height:520px;background:rgba(40,90,200,.20);bottom:-180px;right:-120px} .ai-h3{font-family:var(--font-display);font-size:clamp(22px,2.4vw,30px);font-weight:700;color:#fff;margin-bottom:14px;letter-spacing:-.01em} .ai-p{font-size:16px;color:#AEB9DC;line-height:1.6} .ai-p--center{text-align:center;max-width:640px;margin:0 auto} /* AI-агенти */ .ai-agents{ display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center; margin-bottom:80px;position:relative;z-index:1; } .ai-list{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:13px} .ai-list li{position:relative;padding-left:32px;color:#C4CEEC;font-size:15px} .ai-list li::before{ content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%; background:rgba(174,234,31,.15); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C3F53C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-size:13px;background-repeat:no-repeat;background-position:center; } /* чат-мокап */ .ai-chat{ background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10); border-radius:20px;padding:22px;box-shadow:var(--shadow-lg); } .ai-chat-roles{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap} .role-chip{font-size:13px;font-weight:600;padding:7px 14px;border-radius:100px;background:rgba(255,255,255,.06);color:#9EAAD4;border:1px solid rgba(255,255,255,.08)} .role-chip.is-active{background:var(--lime);color:var(--navy-800);border-color:transparent} .ai-msg{margin-bottom:14px;font-size:14.5px} .ai-msg--user{background:rgba(255,255,255,.07);color:#DCE4FB;padding:12px 16px;border-radius:14px 14px 14px 4px;max-width:80%} .ai-msg--bot{display:flex;gap:12px;align-items:flex-start;max-width:92%;margin-left:auto} .ai-avatar{flex-shrink:0;width:36px;height:36px;border-radius:10px;background:var(--lime);color:var(--navy-800);font-family:var(--font-display);font-weight:800;font-size:13px;display:grid;place-items:center} .ai-bubble{background:rgba(174,234,31,.10);border:1px solid rgba(174,234,31,.22);color:#EAF3D8;padding:12px 16px;border-radius:14px 14px 4px 14px} /* Тендери */ .ai-tenders{position:relative;z-index:1} .ai-tenders-head{text-align:center;margin-bottom:44px} .ai-platforms{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:16px 0 20px} .plat{font-family:var(--font-display);font-weight:700;font-size:14px;color:#fff;padding:8px 18px;border-radius:100px;background:rgba(255,255,255,.05);border:1px solid rgba(174,234,31,.28)} .ai-steps{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:36px} .ai-steps::before{content:"";position:absolute;top:24px;left:9%;right:9%;height:2px;background:linear-gradient(90deg,transparent,rgba(174,234,31,.35),transparent);z-index:0} .ai-step{position:relative;z-index:1;text-align:center;padding:0 6px} .ai-step-num{ width:50px;height:50px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center; background:var(--lime);color:var(--navy-800);font-family:var(--font-display);font-weight:800;font-size:20px; box-shadow:0 0 0 6px rgba(10,23,51,1), 0 8px 20px rgba(174,234,31,.3); } .ai-step-title{font-size:16px;font-weight:700;color:#fff;margin-bottom:8px} .ai-step-text{font-size:13px;color:#9EAAD4;line-height:1.5} .ai-value{ display:flex;align-items:center;justify-content:center;gap:12px;text-align:center; max-width:760px;margin:0 auto;padding:18px 26px;border-radius:14px; background:rgba(174,234,31,.08);border:1px solid rgba(174,234,31,.25); font-family:var(--font-display);font-weight:700;font-size:clamp(15px,1.6vw,19px);color:#EAF3D8; } .ai-value svg{flex-shrink:0;width:26px;height:26px;fill:none;stroke:var(--lime);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .ai-cta{text-align:center;margin-top:56px;position:relative;z-index:1} .ai-cta-note{font-size:14px;color:#9EAAD4;margin-top:14px} @media (max-width:900px){ .ai-agents{grid-template-columns:1fr;gap:32px;margin-bottom:56px} .ai-steps{grid-template-columns:repeat(2,1fr);gap:28px 16px} .ai-steps::before{display:none} } @media (max-width:560px){ .ai-steps{grid-template-columns:1fr;gap:22px;max-width:360px;margin-left:auto;margin-right:auto} .ai-step{ text-align:left;display:grid;grid-template-columns:44px 1fr;gap:6px 16px; align-items:start;padding:0; } .ai-step-num{ grid-row:1 / span 2;margin:0;width:44px;height:44px;min-width:44px; aspect-ratio:1/1;border-radius:50%;font-size:18px; box-shadow:0 8px 20px rgba(174,234,31,.3); } .ai-step-title{margin-bottom:0;align-self:center} .ai-step-text{grid-column:2} } /* ========================================================= БЕЗПЕКА ========================================================= */ .sec-main{display:grid;grid-template-columns:1fr 1.15fr;gap:24px;align-items:stretch;margin-bottom:24px} .panic-card{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:44px 34px;text-align:center;position:relative;overflow:hidden; display:flex;flex-direction:column;align-items:center;justify-content:center; } .panic-card::after{content:"";position:absolute;top:40px;left:50%;transform:translateX(-50%);width:260px;height:260px;border-radius:50%;background:radial-gradient(circle, rgba(255,86,86,.18), transparent 68%);pointer-events:none} .panic-badge{ position:absolute;top:18px;left:18px;font-size:11px;font-weight:700;letter-spacing:.08em; color:#FF6B6B;background:rgba(255,86,86,.12);border:1px solid rgba(255,86,86,.28); padding:5px 11px;border-radius:100px;text-transform:uppercase; } .panic-btn{ width:118px;height:118px;border-radius:50%;position:relative;z-index:1;margin-bottom:26px; background:radial-gradient(circle at 50% 38%, #FF6B6B, #D62E2E); display:grid;place-items:center; box-shadow:0 12px 34px rgba(214,46,46,.45), inset 0 -4px 10px rgba(0,0,0,.25); } .panic-btn::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(255,86,86,.5);animation:panicPulse 2.4s ease-out infinite} @keyframes panicPulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.35);opacity:0}100%{opacity:0}} .panic-btn svg{width:50px;height:50px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .panic-title{font-size:22px;font-weight:800;color:var(--heading);margin-bottom:12px;position:relative;z-index:1} .panic-sub{font-size:14.5px;color:var(--muted);line-height:1.6;max-width:360px;position:relative;z-index:1} .sec-list{display:flex;flex-direction:column;gap:18px} .sec-item{ display:flex;gap:18px;align-items:flex-start;flex:1; background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm); padding:24px 26px;transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .sec-item:hover{transform:translateY(-3px);border-color:rgba(174,234,31,.5);box-shadow:var(--shadow)} .sec-ico{width:50px;height:50px;flex-shrink:0;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft)} .sec-ico svg{width:26px;height:26px;fill:none;stroke:var(--lime-600);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} [data-theme="dark"] .sec-ico svg{stroke:var(--lime)} .sec-item-title{font-size:18px;font-weight:700;color:var(--heading);margin-bottom:7px} .sec-item-text{font-size:14px;color:var(--muted);line-height:1.55} .sec-value{ display:flex;align-items:center;gap:14px; padding:22px 28px;border-radius:var(--radius-sm); background:var(--accent-soft);border:1px solid rgba(174,234,31,.3); font-family:var(--font-display);font-weight:700;font-size:clamp(15px,1.5vw,18px);color:var(--heading); } .sec-value svg{flex-shrink:0;width:28px;height:28px;fill:none;stroke:var(--lime-600);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} [data-theme="dark"] .sec-value svg{stroke:var(--lime)} @media (max-width:880px){ .sec-main{grid-template-columns:1fr} .panic-card{padding:38px 28px} } /* ========================================================= ПОКАЗНИКИ / ЦИФРИ ========================================================= */ .metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .metric{ text-align:center;padding:34px 20px;border-radius:var(--radius); background:var(--surface);border:1px solid var(--border); } .metric-num{ display:block;font-family:var(--font-display);font-weight:800;line-height:1; font-size:clamp(46px,5vw,64px);color:var(--heading); background:linear-gradient(180deg, var(--lime-600), var(--lime)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } [data-theme="light"] .metric-num{ background:none;-webkit-text-fill-color:initial;color:#0E1E45; } .metric-label{display:block;margin-top:14px;font-size:14.5px;color:var(--muted);max-width:180px;margin-left:auto;margin-right:auto} .metrics-grid .reveal:nth-child(2){transition-delay:.08s} .metrics-grid .reveal:nth-child(3){transition-delay:.16s} .metrics-grid .reveal:nth-child(4){transition-delay:.24s} @media (max-width:640px){ .metrics-grid{grid-template-columns:repeat(2,1fr);gap:16px} } /* ========================================================= ЯК ЦЕ ПРАЦЮЄ (таймлайн) ========================================================= */ .timeline{max-width:720px;margin:0 auto;position:relative} .timeline::before{ content:"";position:absolute;left:25px;top:26px;bottom:26px;width:2px; background:linear-gradient(180deg, var(--accent), rgba(174,234,31,.15)); } .tl-step{display:flex;gap:24px;position:relative;padding-bottom:36px} .tl-step:last-child{padding-bottom:0} .tl-marker{flex-shrink:0;position:relative;z-index:1} .tl-num{ width:52px;height:52px;border-radius:50%;display:grid;place-items:center; background:var(--surface);border:2px solid var(--accent); font-family:var(--font-display);font-weight:800;font-size:20px;color:var(--heading); } .tl-body{padding-top:5px} .tl-title{font-size:20px;font-weight:700;color:var(--heading);margin-bottom:8px} .tl-text{font-size:15px;color:var(--muted);line-height:1.6;max-width:520px} .tl-chip{ display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em; color:var(--accent-ink);background:var(--accent);padding:4px 12px;border-radius:100px;margin-bottom:10px; } [data-theme="dark"] .tl-chip{color:var(--navy-800)} .tl-step--accent .tl-num{background:var(--accent);color:var(--navy-800);box-shadow:0 8px 22px rgba(174,234,31,.35)} .how-cta{text-align:center;margin-top:52px} .how-cta-note{font-size:14px;color:var(--muted);margin-top:14px} .timeline .reveal:nth-child(2){transition-delay:.06s} .timeline .reveal:nth-child(3){transition-delay:.12s} .timeline .reveal:nth-child(4){transition-delay:.18s} .timeline .reveal:nth-child(5){transition-delay:.24s} @media (max-width:560px){ .tl-num{width:46px;height:46px;font-size:18px} .timeline::before{left:22px} .tl-step{gap:18px;padding-bottom:30px} } /* ========================================================= ДЕМО-БЕЙДЖ (переиспользуемый) + Hero-демо ========================================================= */ .demo-badge{ display:inline-block;font-weight:700;font-size:13px;white-space:nowrap; color:var(--accent-ink);background:var(--accent);padding:5px 12px;border-radius:100px; } [data-theme="dark"] .demo-badge{color:var(--navy-800)} /* демо-плашка над дашбордом у Hero */ .hero-visual{flex-direction:column;align-items:center;gap:16px} .hero-demo-tab{ display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center; width:100%;max-width:440px;padding:12px 18px;border-radius:14px;position:relative;z-index:1; background:var(--surface);border:1px solid rgba(174,234,31,.35); font-size:14px;color:var(--text);box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); } .hero-demo-tab:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:var(--shadow)} [data-theme="dark"] .hero-demo-tab{background:#122350;color:#C4CEEC} /* ========================================================= ТАРИФИ ========================================================= */ .demo-strip{ display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap; padding:20px 26px;border-radius:var(--radius);margin-bottom:34px; background:linear-gradient(120deg, var(--navy-800), var(--navy-700)); border:1px solid rgba(174,234,31,.28);position:relative;overflow:hidden; } [data-theme="light"] .demo-strip{background:linear-gradient(120deg,#0E1E45,#16306b)} .demo-strip::after{content:"";position:absolute;right:-30px;top:-40px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(174,234,31,.2),transparent 70%)} .demo-strip-text{display:flex;align-items:center;gap:14px;position:relative;z-index:1;color:#DCE4FB;font-size:15.5px;flex-wrap:wrap} .demo-strip .btn{position:relative;z-index:1;flex-shrink:0} .price-toggle{display:flex;width:max-content;max-width:100%;margin:0 auto 36px;padding:5px;border-radius:100px;background:var(--surface-2);border:1px solid var(--border)} .pt-opt{ border:none;cursor:pointer;background:transparent;color:var(--muted); font-family:var(--font-body);font-weight:600;font-size:14.5px;padding:10px 22px;border-radius:100px; display:inline-flex;align-items:center;gap:8px;transition:background .25s var(--ease), color .25s var(--ease); } .pt-opt.is-active{background:var(--accent);color:var(--accent-ink)} [data-theme="dark"] .pt-opt.is-active{color:var(--navy-800)} .pt-save{font-size:11px;font-weight:700;padding:2px 8px;border-radius:100px;background:rgba(174,234,31,.2);color:var(--lime-600)} .pt-opt.is-active .pt-save{background:rgba(14,30,69,.18);color:var(--navy-800)} [data-theme="dark"] .pt-save{color:var(--lime)} .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch} .plan{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:34px 30px;display:flex;flex-direction:column;position:relative; transition:transform .3s var(--ease), box-shadow .3s var(--ease); } .plan:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .plan--featured{ border-color:var(--accent);box-shadow:0 20px 50px rgba(174,234,31,.14); } .plan--featured::before{content:"";position:absolute;inset:0;border-radius:var(--radius);padding:1px;background:linear-gradient(180deg,var(--accent),transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.5} .plan-tag{ position:absolute;top:-13px;left:50%;transform:translateX(-50%); background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:12px; padding:6px 16px;border-radius:100px;white-space:nowrap; } [data-theme="dark"] .plan-tag{color:var(--navy-800)} .plan-name{font-size:22px;font-weight:800;color:var(--heading);margin-bottom:4px} .plan-for{font-size:14px;color:var(--muted);margin-bottom:22px} .plan-price{display:flex;align-items:baseline;gap:4px;flex-wrap:wrap;margin-bottom:8px} .price-cur{font-family:var(--font-display);font-weight:700;font-size:24px;color:var(--heading)} .price-val{font-family:var(--font-display);font-weight:800;font-size:44px;line-height:1;color:var(--heading)} .price-unit{font-size:14px;color:var(--muted)} .plan-billing{font-size:13px;color:var(--muted);margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid var(--border)} .plan-feats{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:28px;flex-grow:1} .plan-feats li{position:relative;padding-left:28px;font-size:14.5px;color:var(--text);line-height:1.45} .plan-feats li::before{ content:"";position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;background:var(--accent-soft); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AEEA1F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-size:12px;background-repeat:no-repeat;background-position:center; } /* перемикання цін квартал/рік */ .pricing[data-period="quarter"] .price-y, .pricing[data-period="quarter"] .bill-y{display:none} .pricing[data-period="year"] .price-q, .pricing[data-period="year"] .bill-q{display:none} .pricing-notes{margin-top:32px;display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center} .pricing-notes p{font-size:14.5px;color:var(--muted)} .pn-plus{color:var(--lime-600);font-weight:800;margin-right:6px} [data-theme="dark"] .pn-plus{color:var(--lime)} @media (max-width:1200px){ .pricing-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto} .plan--featured{order:-1} } @media (max-width:480px){ .price-toggle{width:100%} .pt-opt{flex:1;justify-content:center;padding:10px 8px;font-size:13.5px} .pt-save{display:none} .plan{padding:28px 22px} .demo-strip{padding:18px 20px} .demo-strip .btn{width:100%} } /* ========================================================= ДОВІРА ========================================================= */ .trust-logos{ display:flex;justify-content:center;align-items:center;gap:14px 34px;flex-wrap:wrap; margin-bottom:52px;padding-bottom:44px;border-bottom:1px solid var(--border); } .tlogo{ font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:.01em; color:var(--muted);opacity:.75;white-space:nowrap; transition:opacity .25s var(--ease), color .25s var(--ease); } .tlogo:hover{opacity:1;color:var(--heading)} .trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .review{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:30px 28px;display:flex;flex-direction:column; transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .review:hover{transform:translateY(-4px);border-color:rgba(174,234,31,.45);box-shadow:var(--shadow)} .review-stars{color:var(--lime-600);font-size:15px;letter-spacing:.2em;margin-bottom:16px} [data-theme="dark"] .review-stars{color:var(--lime)} .review-text{font-size:15px;color:var(--text);line-height:1.65;flex-grow:1;margin-bottom:22px} .review-author{display:flex;align-items:center;gap:14px} .review-ava{ width:46px;height:46px;border-radius:50%;flex-shrink:0;display:grid;place-items:center; background:var(--accent-soft);color:var(--heading); font-family:var(--font-display);font-weight:800;font-size:15px; } .review-name{display:block;font-weight:700;font-size:15px;color:var(--heading)} .review-role{display:block;font-size:13px;color:var(--muted);margin-top:2px} .trust-grid .reveal:nth-child(2){transition-delay:.08s} .trust-grid .reveal:nth-child(3){transition-delay:.16s} @media (max-width:960px){ .trust-grid{grid-template-columns:1fr;max-width:560px;margin:0 auto} } /* ========================================================= ФІНАЛЬНИЙ CTA + ФОРМА ========================================================= */ .cta-final{position:relative;overflow:hidden;background:var(--bg-alt)} .cta-glow{position:absolute;width:640px;height:640px;border-radius:50%;filter:blur(100px);background:var(--glow-1);top:-200px;right:-160px;pointer-events:none} .cta-box{ position:relative;z-index:1; display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start; } .cta-title{font-size:clamp(30px,3.4vw,44px);font-weight:800;margin:16px 0 14px;color:var(--heading)} .cta-lead{font-size:16.5px;color:var(--text);line-height:1.6;max-width:480px} .cta-points{list-style:none;margin:26px 0 30px;display:flex;flex-direction:column;gap:13px} .cta-points li{position:relative;padding-left:32px;font-size:15px;color:var(--text)} .cta-points li::before{ content:"";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:var(--accent-soft); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AEEA1F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-size:13px;background-repeat:no-repeat;background-position:center; } .cta-demo{ display:flex;align-items:center;gap:12px;flex-wrap:wrap; padding:16px 20px;border-radius:14px;font-size:14.5px;color:var(--text); background:var(--surface);border:1px solid rgba(174,234,31,.3); } /* Форма */ .lead-form{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:34px 32px;box-shadow:var(--shadow); } .form-title{font-size:22px;font-weight:800;color:var(--heading);margin-bottom:24px} .form-field{margin-bottom:18px} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .form-field label{display:block;font-size:13.5px;font-weight:600;color:var(--heading);margin-bottom:7px} .req{color:#E8846B;margin-left:2px} .form-field input, .form-field select{ width:100%;padding:13px 16px;border-radius:11px;font-family:var(--font-body);font-size:15px; background:var(--surface-2);border:1px solid var(--border-strong);color:var(--heading); transition:border-color .2s var(--ease), box-shadow .2s var(--ease); appearance:none; } .form-field select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C99C4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center;background-size:16px; cursor:pointer; } .form-field input::placeholder{color:var(--muted);opacity:.8} .form-field input:focus, .form-field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(174,234,31,.18)} .form-field input.invalid{border-color:#E8846B;box-shadow:0 0 0 3px rgba(232,132,107,.15)} .lead-form .btn{margin-top:6px} .lead-form .btn[disabled]{opacity:.65;cursor:wait;animation:none} .form-note{font-size:12.5px;color:var(--muted);margin-top:14px;text-align:center;line-height:1.5} /* ========================================================= МОДАЛЬНЕ ВІКНО РЕЗУЛЬТАТУ ФОРМИ ========================================================= */ .modal{position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:20px; opacity:0;pointer-events:none;transition:opacity .3s var(--ease)} .modal.open{opacity:1;pointer-events:auto} .modal-backdrop{position:absolute;inset:0;background:rgba(5,10,25,.62);backdrop-filter:blur(4px)} .modal-card{ position:relative;width:100%;max-width:420px;border-radius:20px;padding:36px 30px 30px; background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-lg); transform:translateY(16px) scale(.96);transition:transform .35s var(--ease); } .modal.open .modal-card{transform:translateY(0) scale(1)} .modal-x{ position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:10px;cursor:pointer; background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center; transition:border-color .2s var(--ease), transform .2s var(--ease); } .modal-x:hover{border-color:var(--accent);transform:rotate(90deg)} .modal-x svg{width:16px;height:16px;fill:none;stroke:var(--heading);stroke-width:2.2;stroke-linecap:round} .modal-body{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px} /* ВАЖЛИВО: без цього правила display:flex перебиває атрибут hidden і обидва стани (успіх + помилка) показуються одночасно. */ .modal-body[hidden]{display:none} /* Лого у шапці модалки (спільне для обох станів) */ .modal-logo{text-align:center;margin-bottom:18px} .modal-logo .brand-logo{height:30px;margin:0 auto} /* margin — бо в темній темі лого стає display:block */ .modal-ico{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin-bottom:10px} .modal-ico svg{width:30px;height:30px;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .modal-ico--ok{background:var(--accent-soft)} .modal-ico--ok svg{stroke:var(--lime-600)} [data-theme="dark"] .modal-ico--ok svg{stroke:var(--lime)} .modal-ico--err{background:rgba(232,132,107,.14)} .modal-ico--err svg{stroke:#E8846B} .modal-title{font-size:21px;font-weight:800;color:var(--heading)} .modal-text{font-size:14.5px;color:var(--muted);line-height:1.6;margin-bottom:16px} .modal-phone{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--heading)} .modal-phone:hover{color:var(--lime-600)} [data-theme="dark"] .modal-phone:hover{color:var(--lime)} .modal .btn{width:100%} /* Тиха смуга контактів під основною кнопкою */ .modal-contacts{ width:100%;margin-top:22px;padding-top:18px; border-top:1px solid var(--border); display:flex;flex-direction:column;align-items:center;gap:12px; } .modal-cnote{font-size:13.5px;color:var(--muted);line-height:1.5} .modal-icons{display:flex;gap:9px;flex-wrap:wrap;justify-content:center} .msg-ico--mail svg{fill:var(--heading)} /* у стані помилки телефон іде одразу під текстом — прибираємо зайвий відступ */ .modal-body--err .modal-text{margin-bottom:6px} .modal-body--err .modal-contacts{margin-top:18px} /* ========================================================= ФУТЕР ========================================================= */ .footer{background:var(--bg);border-top:1px solid var(--border);padding:56px 0 36px} [data-theme="dark"] .footer{background:#081228} .footer-top{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:44px;padding-bottom:36px;border-bottom:1px solid var(--border)} .footer-brand .brand-logo{height:38px;margin-bottom:16px} .footer-tag{font-size:14px;color:var(--muted);line-height:1.6;max-width:300px} .footer-nav{display:flex;flex-direction:column;gap:12px} .footer-nav a{font-size:14.5px;color:var(--text);transition:color .2s var(--ease)} .footer-nav a:hover{color:var(--heading)} .footer-contacts{display:flex;flex-direction:column;gap:10px;align-items:flex-start} .footer-phone{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--heading)} .footer-phone:hover{color:var(--lime-600)} [data-theme="dark"] .footer-phone:hover{color:var(--lime)} .footer-mail{font-size:14.5px;color:var(--text)} .footer-mail:hover{color:var(--heading)} .footer-icons{display:flex;gap:8px;margin-top:8px} .msg-ico--ig{color:#D6489B} .msg-ico--ig svg{fill:currentColor} .footer-bottom{padding-top:24px;text-align:center;font-size:13px;color:var(--muted)} @media (max-width:900px){ .cta-box{grid-template-columns:1fr;gap:36px} .footer-top{grid-template-columns:1fr;gap:32px} } @media (max-width:520px){ .form-row{grid-template-columns:1fr} .lead-form{padding:28px 22px} } /* ========================================================= ПЛАВАЮЧИЙ КОНТАКТ-ВІДЖЕТ ========================================================= */ .contact-widget{position:fixed;right:22px;bottom:22px;z-index:200;display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none} .cw-menu{display:flex;flex-direction:column;align-items:flex-end;gap:10px} .cw-item{ display:flex;align-items:center;gap:10px; background:var(--surface);border:1px solid var(--border); border-radius:100px;padding:8px 16px 8px 8px; box-shadow:var(--shadow);font-weight:600;font-size:14px;color:var(--heading); opacity:0;transform:translateY(10px) scale(.9);pointer-events:none; transition:transform .3s var(--ease), opacity .3s var(--ease), border-color .2s; } .cw-item:hover{border-color:var(--accent);transform:translateY(-2px) scale(1)} .contact-widget.open .cw-item{opacity:1;transform:translateY(0) scale(1);pointer-events:auto} .contact-widget.open .cw-item:nth-child(1){transition-delay:.02s} .contact-widget.open .cw-item:nth-child(2){transition-delay:.06s} .contact-widget.open .cw-item:nth-child(3){transition-delay:.10s} .contact-widget.open .cw-item:nth-child(4){transition-delay:.14s} .contact-widget.open .cw-item:nth-child(5){transition-delay:.18s} .cw-ico{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex-shrink:0} .cw-ico svg{width:18px;height:18px;fill:#fff} .cw-ico--call{background:#2FB56B} .cw-ico--tg{background:#2AABEE} .cw-ico--vb{background:#7360F2} .cw-ico--ig{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF)} .cw-ico--mail{background:var(--navy-700)} .cw-fab{ width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;pointer-events:auto; background:var(--accent);color:var(--accent-ink); box-shadow:0 12px 30px rgba(174,234,31,.42); display:grid;place-items:center;position:relative; transition:transform .3s var(--ease), box-shadow .3s var(--ease); } .cw-fab:hover{transform:scale(1.06)} .cw-fab svg{width:26px;height:26px;position:absolute;transition:opacity .25s var(--ease), transform .3s var(--ease)} .cw-fab-open{fill:none;stroke:var(--accent-ink);stroke-width:2;stroke-linejoin:round} .cw-fab-close{fill:none;stroke:var(--accent-ink);stroke-width:2.4;stroke-linecap:round;opacity:0;transform:rotate(-90deg)} .contact-widget.open .cw-fab-open{opacity:0;transform:rotate(90deg)} .contact-widget.open .cw-fab-close{opacity:1;transform:rotate(0)} .cw-fab::after{ /* пульсація */ content:"";position:absolute;inset:-2px;border-radius:50%;pointer-events:none; border:2.5px solid var(--accent);animation:pulse 2s ease-out infinite; } .contact-widget.open .cw-fab::after{display:none} @keyframes pulse{0%{transform:scale(.95);opacity:.9}70%{transform:scale(1.65);opacity:0}100%{opacity:0}} /* ========================================================= АНІМАЦІЇ ПОЯВИ ========================================================= */ .reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease), transform 1s var(--ease)} .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.08s} .reveal.d2{transition-delay:.16s} /* ========================================================= АДАПТИВ ========================================================= */ @media (max-width:1340px){ .main-nav{display:none} .header-phone{display:none} .burger{display:flex} .header-msg-mobile{display:flex} } @media (max-width:1024px){ .hero-inner{grid-template-columns:1fr;gap:44px} .hero-visual{max-width:460px;margin:0 auto} .hero-sub{max-width:none} } @media (max-width:768px){ :root{--header-h:72px} .container{padding:0 14px} .header-inner{gap:8px} .btn-header{display:none} .burger{display:flex;width:38px;height:36px} .brand-logo{height:46px} .header-msg-mobile .msg-ico{width:32px;height:32px} .header-msg-mobile .msg-ico svg{width:16px;height:16px} .header-actions{gap:6px} .header-msg-mobile{gap:4px} .bulb-toggle{width:38px;height:38px} .bulb-svg{width:21px;height:21px} .hero{padding-top:calc(var(--header-h) + 40px);padding-bottom:64px} .hero-cta{flex-direction:column;align-items:stretch} .hero-cta .btn{width:100%} .hero-stats{gap:22px} .stat-num{font-size:32px} .section{padding:64px 0} .section-head{margin-bottom:40px} .contact-widget{right:16px;bottom:16px} } @media (max-width:400px){ .container{padding:0 10px} .header-inner{gap:5px} .brand-logo{height:38px} .header-msg-mobile{gap:3px} .header-msg-mobile .msg-ico{width:28px;height:28px;border-radius:8px} .header-msg-mobile .msg-ico svg{width:15px;height:15px} .bulb-toggle{width:34px;height:34px;border-radius:9px} .bulb-svg{width:19px;height:19px} .burger{width:34px;height:34px} } @media (max-width:340px){ .brand-logo{height:34px} .header-msg-mobile .msg-ico{width:26px;height:26px} .btn{white-space:normal;text-align:center} .btn-lg{padding:14px 16px;font-size:15px} } /* ========================================================= КОНТРАСТ СВІТЛОЇ ТЕМИ Лайм на білому «сліпне». Рішення: суцільні заливки (кнопки, бейджі, акцентні картки) лишаємо лаймовими, а лінійні елементи (іконки, галочки, кільця, дрібний текст) робимо темно-синіми + тонкі рамки для чіткості. Темної теми не стосується. ========================================================= */ /* лінійні іконки → темно-сині */ [data-theme="light"] .sol-ico svg, [data-theme="light"] .feat-ico svg, [data-theme="light"] .sec-ico svg, [data-theme="light"] .sec-value svg{stroke:#0E1E45} /* тайли іконок — щільніший фон + рамка */ [data-theme="light"] .sol-ico, [data-theme="light"] .feat-ico:not(.feat-ico--ai), [data-theme="light"] .sec-ico{background:#EAF2D2;border:1px solid rgba(14,30,69,.22)} /* СИНЯ РАМКА (колір лого) на лаймових заливках — щоб не зливались із білим */ [data-theme="light"] .demo-badge{border:1.5px solid #0E1E45} [data-theme="light"] .plan-tag{border:1.5px solid #0E1E45} [data-theme="light"] .tl-chip{border:1.5px solid #0E1E45} [data-theme="light"] .tl-step--accent .tl-num{border-color:#0E1E45} [data-theme="light"] .feat-ico--ai{border:1px solid #0E1E45} [data-theme="light"] .bridge-arrow, [data-theme="light"] .feat-ai-arrow{border:1.5px solid #0E1E45} /* чек-списки: темна галочка на світлому кружку */ [data-theme="light"] .plan-feats li::before, [data-theme="light"] .cta-points li::before{ background-color:#EAF2D2; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1E45' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } /* галочка успіху в модалці — за тим самим правилом, що й чек-листи */ [data-theme="light"] .modal-ico--ok{background:#EAF2D2;border:1px solid rgba(14,30,69,.18)} [data-theme="light"] .modal-ico--ok svg{stroke:#0E1E45} /* eyebrow — рамка для визначеності */ [data-theme="light"] .eyebrow{border:1.5px solid rgba(14,30,69,.5)} [data-theme="light"] .eyebrow--warn{border-color:rgba(194,78,46,.45)} /* зірки відгуків — насичений золотистий */ [data-theme="light"] .review-stars{color:#E0A400} [data-theme="light"] .review-ava{background:#EAF2D2;border:1px solid rgba(14,30,69,.08)} /* дрібний лаймовий текст → темніший */ [data-theme="light"] .pt-save{color:#4d6a10;background:rgba(174,234,31,.3)} [data-theme="light"] .pn-plus{color:#5c7a13} [data-theme="light"] .sol-chip::before{color:#0E1E45} /* таймлайн — темні кільця й лінія */ [data-theme="light"] .tl-num{border-color:#0E1E45;color:#0E1E45} [data-theme="light"] .timeline::before{background:linear-gradient(180deg,#0E1E45,rgba(14,30,69,.12))} /* акценти-плашки та рамки — чіткіше */ [data-theme="light"] .hero-demo-tab, [data-theme="light"] .sec-value, [data-theme="light"] .cta-demo, [data-theme="light"] .demo-strip{border-color:rgba(14,30,69,.16)} [data-theme="light"] .plan--featured{border-color:#0E1E45;box-shadow:0 20px 50px rgba(16,30,64,.14)} /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms !important;transition-duration:.001ms !important} .reveal{opacity:1;transform:none} html{scroll-behavior:auto} } /* колір іконки дзвінка */ .msg-ico--call svg{fill:#2FB56B} /* Синя рамка головних лаймових кнопок у світлій темі (винесено окремо) */ html[data-theme="light"] .btn-primary{border:1.5px solid #0E1E45} /* ========================================================= МОБІЛЬНИЙ ЗАСТОСУНОК ========================================================= */ .apps-box{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center} .apps-status{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:24px 0 22px;font-size:15px;color:var(--text)} .apps-badge{display:inline-block;font-weight:700;font-size:12px;letter-spacing:.04em;color:var(--accent-ink);background:var(--accent);padding:5px 12px;border-radius:100px} [data-theme="dark"] .apps-badge{color:var(--navy-800)} [data-theme="light"] .apps-badge{border:1.5px solid #0E1E45} .store-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px} .store-btn{ display:inline-flex;align-items:center;gap:12px;position:relative; background:#0E1E45;color:#fff;border:1px solid #0E1E45;border-radius:14px; padding:12px 20px 12px 16px;transition:transform .2s var(--ease), box-shadow .25s var(--ease); } .store-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(14,30,69,.28)} .store-ico{width:30px;height:30px;flex-shrink:0} .store-ico svg{width:30px;height:30px;fill:#fff} .store-txt{display:flex;flex-direction:column;line-height:1.15} .store-txt small{font-size:11px;opacity:.8} .store-txt strong{font-family:var(--font-display);font-weight:700;font-size:17px} .store-soon{margin-left:6px;font-size:10.5px;font-weight:700;color:var(--navy-800);background:var(--lime);padding:3px 8px;border-radius:100px;align-self:flex-start} .apps-note{font-size:14px;color:var(--muted)} /* телефон-мокап */ .apps-visual{display:flex;justify-content:center} .phone{ position:relative;width:250px;height:510px;border-radius:38px;padding:12px; background:linear-gradient(160deg,#111f42,#0a1733); box-shadow:0 30px 70px rgba(10,23,51,.4), inset 0 0 0 2px rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); } .phone-notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:110px;height:22px;background:#0a1733;border-radius:0 0 14px 14px;z-index:2} .phone-screen{ width:100%;height:100%;border-radius:28px;overflow:hidden;padding:34px 18px 22px; background:linear-gradient(170deg,#152a5c,#0e1e45);display:flex;flex-direction:column;gap:14px; } .phone-appbar{display:flex;align-items:center;gap:10px} .phone-appicon{width:34px;height:34px;border-radius:9px} .phone-appname{font-family:var(--font-display);font-weight:700;color:#fff;font-size:16px} .phone-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px} .phone-tile{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:11px} .pt-label{display:block;font-size:11px;color:#9EAAD4} .pt-val{display:block;font-family:var(--font-display);font-weight:800;color:#fff;font-size:22px;margin-top:2px} .phone-bars{display:flex;align-items:flex-end;gap:7px;height:80px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:12px} .phone-bars span{flex:1;background:rgba(255,255,255,.25);border-radius:4px} .phone-bars span.on{background:var(--lime)} .phone-row{display:flex;align-items:center;gap:10px} .phone-row span:first-child{width:26px;height:26px;border-radius:50%;background:rgba(174,234,31,.25);flex-shrink:0} .phone-row span:last-child{height:9px;border-radius:5px;background:rgba(255,255,255,.14)} .phone-row .w60{width:60%} .phone-row .w40{width:40%} @media (max-width:820px){ .apps-box{grid-template-columns:1fr;gap:40px} .apps-visual{order:-1} } /* ========================================================= ФУТЕР — правові посилання ========================================================= */ .footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap} .footer-legal{display:flex;gap:20px;flex-wrap:wrap} .footer-legal a{font-size:13px;color:var(--muted);transition:color .2s var(--ease)} .footer-legal a:hover{color:var(--heading)} /* щоб плаваючий контакт-віджет не перекривав правові посилання */ @media (min-width:961px){ .footer-legal{margin-right:96px} } @media (max-width:960px){ .footer-bottom{flex-direction:column;gap:12px;text-align:center} .footer{padding-bottom:88px} } /* ========================================================= ПРАВОВА СТОРІНКА (політика конфіденційності) ========================================================= */ .legal{padding:calc(var(--header-h) + 48px) 0 80px} .legal-wrap{max-width:820px;margin:0 auto} .legal h1{font-size:clamp(30px,4vw,44px);font-weight:800;color:var(--heading);margin-bottom:10px} .legal-meta{color:var(--muted);font-size:14px;margin-bottom:14px} .legal-intro{font-size:16.5px;color:var(--text);line-height:1.7;margin-bottom:8px} .legal h2{font-size:22px;font-weight:800;color:var(--heading);margin:38px 0 12px;scroll-margin-top:calc(var(--header-h) + 20px)} .legal h3{font-size:17px;font-weight:700;color:var(--heading);margin:22px 0 8px} .legal p{color:var(--text);font-size:15.5px;line-height:1.75;margin-bottom:12px} .legal ul{margin:8px 0 16px;padding-left:22px;display:flex;flex-direction:column;gap:9px} .legal li{color:var(--text);font-size:15.5px;line-height:1.6;list-style:disc} .legal a{color:var(--lime-600);text-decoration:underline} [data-theme="dark"] .legal a{color:var(--lime)} .legal-box{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px 24px;margin:20px 0} .legal-box p:last-child{margin-bottom:0} .legal-toc{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px 24px;margin:26px 0 8px} .legal-toc strong{display:block;font-family:var(--font-display);color:var(--heading);margin-bottom:10px;font-size:15px} .legal-toc ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px} .legal-toc a{color:var(--text);text-decoration:none} .legal-toc a:hover{color:var(--lime-600)} [data-theme="dark"] .legal-toc a:hover{color:var(--lime)} /* Viber приховано на сайті (щоб повернути — прибери це правило) */ .msg-ico--vb, .cw-item[data-contact="viber"]{display:none !important}