/* =========================================================
   «Потік» - фінансовий облік для малого бізнесу
   Палітра: теплий папір, чорнильний графіт, індиго та персик
   ========================================================= */

:root{
  --paper:#FBFAF7;
  --white:#FFFFFF;
  --ink:#17141F;
  --ink-2:#2C2739;
  --slate:#5C5768;
  --mute:#8E889C;
  --line:#EBE6DF;
  --line-2:#DCD5CA;
  --violet:#5B4BE0;
  --violet-2:#7A6BFF;
  --violet-s:#EEEBFF;
  --peach:#FF875C;
  --peach-s:#FFEDE5;
  --mint:#12A97C;
  --mint-s:#E4F6EF;
  --rose:#E23F55;

  --disp:'Wix Madefor Display',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --shell:1180px;
  --gut:clamp(20px,5vw,44px);
  --sec-y:clamp(58px,6.6vw,102px);
  --r:14px;
  --r-lg:22px;
  --r-xl:30px;

  --sh-1:0 1px 3px rgb(23 20 31 / .05);
  --sh-2:0 12px 28px -14px rgb(23 20 31 / .2);
  --sh-3:0 34px 70px -30px rgb(23 20 31 / .3);

  --e:cubic-bezier(.22,.75,.28,1);
  --e-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font:400 17px/1.62 var(--body);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
ul,ol{list-style:none}
:focus-visible{outline:2.5px solid var(--violet);outline-offset:3px;border-radius:6px}
::selection{background:var(--violet);color:#fff}
[hidden]{display:none!important}
body.is-locked{overflow:hidden}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--violet);color:#fff;padding:12px 20px;border-radius:0 0 12px 0;font-weight:700}
.skip:focus{left:0}

.shell{width:min(100% - var(--gut)*2,var(--shell));margin-inline:auto}
.ico{width:1em;height:1em;flex:none;fill:none}

/* ---------- typography ---------- */
.h2{
  font-family:var(--disp);font-weight:700;
  font-size:clamp(28px,4vw,48px);line-height:1.1;letter-spacing:-.035em;
  margin-bottom:18px;
}
.h2 em,.hero__title em{font-style:normal;color:var(--violet)}
.sec__head .h2{margin-bottom:0}
.sec__head--center .h2{margin-bottom:0}
.lead{color:var(--slate);font-size:clamp(15.5px,1.6vw,17.5px);max-width:52ch}
.eyebrow{
  display:inline-block;font:700 11.5px/1 var(--body);
  text-transform:uppercase;letter-spacing:.18em;color:var(--violet);
  margin-bottom:16px;padding:8px 14px;border-radius:999px;background:var(--violet-s);
}

/* ---------- buttons ---------- */
.btn{
  --bg:transparent;--fg:var(--ink);--bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:12px;
  background:var(--bg);color:var(--fg);border:1.5px solid var(--bd);
  font:700 14.5px/1 var(--body);
  transition:transform .35s var(--e),background .3s,color .3s,border-color .3s,box-shadow .35s;
  white-space:nowrap;
}
.btn .ico{width:17px;height:17px;transition:transform .35s var(--e)}
.btn:hover .ico{transform:translateX(4px)}
.btn--solid{--bg:var(--violet);--fg:#fff;--bd:var(--violet);box-shadow:0 10px 24px -12px rgb(91 75 224 / .9)}
.btn--solid:hover{--bg:var(--violet-2);--bd:var(--violet-2);transform:translateY(-2px);box-shadow:0 18px 34px -14px rgb(91 75 224 / .9)}
.btn--line{--bd:var(--line-2);background:var(--white)}
.btn--line:hover{--bd:var(--ink);transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn--lg{padding:16px 28px;font-size:15px}
.btn--full{width:100%}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:90;background:rgb(251 250 247 / .82);backdrop-filter:blur(16px) saturate(150%);transition:box-shadow .4s}
.hdr.is-stuck{box-shadow:0 1px 0 var(--line),0 12px 26px -22px rgb(23 20 31 / .5)}
.hdr__in{display:flex;align-items:center;gap:clamp(12px,2.4vw,32px);height:72px}

.logo{display:inline-flex;align-items:center;gap:10px;flex:none}
.logo__mark{width:36px;height:36px;border-radius:11px;background:var(--violet);color:#fff;display:grid;place-items:center;transition:transform .5s var(--e)}
.logo__mark svg{width:22px;height:22px}
.logo:hover .logo__mark{transform:translateY(-3px) rotate(-6deg)}
.logo b{font:700 21px/1 var(--disp);letter-spacing:-.035em}

.nav{display:flex;align-items:center;gap:clamp(12px,1.8vw,26px);margin-left:auto}
.nav>a:not(.btn){position:relative;font-size:14.5px;font-weight:600;color:var(--slate);padding:6px 0;transition:color .3s}
.nav>a:not(.btn)::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--violet);border-radius:2px;transition:width .35s var(--e)}
.nav>a:not(.btn):hover,.nav>a.is-active{color:var(--ink)}
.nav>a:not(.btn):hover::after,.nav>a.is-active::after{width:100%}
.nav__cta{display:none}

.hdr__right{display:flex;align-items:center;gap:12px;margin-left:clamp(10px,2vw,22px)}
.hdr__login{font-size:14.5px;font-weight:700;color:var(--ink);transition:color .3s}
.hdr__login:hover{color:var(--violet)}

.burger{display:none;width:42px;height:42px;position:relative;flex:none;border-radius:11px;border:1.5px solid var(--line-2);background:var(--white)}
.burger span{position:absolute;left:10px;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .4s var(--e),opacity .25s}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:20px}
.burger span:nth-child(3){top:26px}
.burger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(46px,6vw,78px) 0 clamp(46px,5vw,72px);overflow:hidden}
.hero__mesh{
  position:absolute;left:50%;top:-24%;transform:translateX(-50%);
  width:min(150vw,1500px);aspect-ratio:2/1;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(closest-side at 34% 46%,rgb(91 75 224 / .17),transparent),
    radial-gradient(closest-side at 66% 40%,rgb(255 135 92 / .15),transparent);
}
.hero__in{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center}

.pill{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--white);border:1px solid var(--line-2);border-radius:999px;
  padding:7px 16px 7px 7px;font-size:13.5px;font-weight:600;color:var(--slate);
  box-shadow:var(--sh-1);transition:transform .35s var(--e),box-shadow .35s,border-color .3s;
}
.pill:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--violet)}
.pill__tag{background:var(--violet);color:#fff;font:700 11px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;padding:7px 11px;border-radius:999px}
.pill .ico{width:15px;height:15px;color:var(--violet);transition:transform .35s var(--e)}
.pill:hover .ico{transform:translateX(3px)}

.hero__title{
  font-family:var(--disp);font-weight:700;
  font-size:clamp(34px,6.2vw,74px);line-height:1.03;letter-spacing:-.045em;
  margin:22px 0 18px;max-width:15ch;
}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.07em}
.hero__title .word{display:inline-block;transform:translateY(112%);opacity:0;animation:wordUp .9s var(--e-out) forwards;animation-delay:var(--wd,0s)}
@keyframes wordUp{to{transform:none;opacity:1}}
.hero__lead{color:var(--slate);font-size:clamp(15.5px,1.7vw,19px);max-width:60ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.hero__fine{margin-top:14px;font-size:13px;color:var(--mute)}

/* ---------- дашборд ---------- */
.app{
  display:grid;grid-template-columns:214px 1fr;
  margin-top:clamp(34px,4.4vw,58px);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);
  overflow:hidden;box-shadow:var(--sh-3);
  transform:perspective(1600px) rotateX(4deg);transform-origin:top center;
}
.app__side{background:#F7F5F1;border-right:1px solid var(--line);padding:20px 16px;display:flex;flex-direction:column;gap:20px}
.app__brand{display:flex;align-items:center;gap:9px;font:700 16px/1 var(--disp);letter-spacing:-.03em}
.app__brand i{width:22px;height:22px;border-radius:7px;background:var(--violet)}
.app__nav{display:grid;gap:2px}
.app__nav span{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--slate)}
.app__nav .ico{width:17px;height:17px}
.app__nav .is-on{background:var(--violet-s);color:var(--violet)}
.app__hint{margin-top:auto;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:13px 14px;display:flex;flex-direction:column;gap:4px}
.app__hint b{font-size:13px;font-weight:700}
.app__hint span{font-size:11.5px;color:var(--mute)}

.app__main{padding:18px clamp(14px,1.8vw,22px) 22px;display:flex;flex-direction:column;gap:16px;min-width:0}
.app__top{display:flex;align-items:center;gap:14px}
.app__top>div{display:flex;flex-direction:column;gap:3px;margin-right:auto}
.app__top b{font:700 19px/1 var(--disp);letter-spacing:-.03em}
.app__top>div span{font-size:12.5px;color:var(--mute)}
.app__search{display:flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line);border-radius:10px;font-size:12.5px;color:var(--mute);background:#FAF9F6}
.app__search .ico{width:15px;height:15px}
.app__ava{width:34px;height:34px;border-radius:50%;background:var(--peach-s);color:var(--peach);display:grid;place-items:center;font:700 12px/1 var(--body);flex:none}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.kpi{border:1px solid var(--line);border-radius:13px;padding:14px;display:flex;flex-direction:column;gap:6px;background:#FDFCFA;transition:border-color .3s,transform .35s var(--e)}
.kpi:hover{border-color:var(--line-2);transform:translateY(-2px)}
.kpi--accent{background:var(--violet-s);border-color:transparent}
.kpi__l{font-size:11.5px;color:var(--mute);font-weight:600}
.kpi__v{font:700 clamp(16px,1.5vw,21px)/1 var(--disp);letter-spacing:-.035em}
.kpi__d{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;font:700 11px/1 var(--body);padding:5px 8px;border-radius:999px}
.kpi__d .ico{width:12px;height:12px}
.kpi__d--up{background:var(--mint-s);color:var(--mint)}
.kpi__d--flat{background:var(--peach-s);color:#D2643A}
.kpi--accent .kpi__d--up{background:rgb(255 255 255 / .75)}

.chart{border:1px solid var(--line);border-radius:15px;padding:16px 16px 12px;background:#FDFCFA}
.chart__head{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.chart__head>div:first-child{display:flex;flex-direction:column;gap:3px;margin-right:auto}
.chart__head b{font:700 15px/1 var(--disp);letter-spacing:-.03em}
.chart__head>div:first-child span{font-size:12px;color:var(--mute)}
.chart__tabs{display:flex;flex:none;gap:3px;background:#F2EFEA;border-radius:9px;padding:3px}
.chart__tabs button{padding:7px 13px;border-radius:7px;font:600 12.5px/1 var(--body);color:var(--slate);white-space:nowrap;transition:background .3s,color .3s,box-shadow .3s}
.chart__tabs button[aria-selected="true"]{background:var(--white);color:var(--ink);box-shadow:var(--sh-1)}
.chart__body{position:relative}
.chart__plot{position:relative}
.chart svg{width:100%;height:clamp(130px,17vw,196px);display:block}
#grid line{stroke:var(--line);stroke-width:1;stroke-dasharray:3 5}
#linePath{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 1.5s var(--e-out) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
#areaPath{opacity:0;animation:fadeIn .9s var(--e-out) .5s forwards}
@keyframes fadeIn{to{opacity:1}}
.chart__dot{
  position:absolute;width:12px;height:12px;border-radius:50%;
  background:var(--white);border:3px solid var(--violet);
  transform:translate(-50%,-50%);pointer-events:none;
  box-shadow:0 0 0 4px rgb(91 75 224 / .14);
  opacity:0;animation:fadeIn .5s var(--e-out) 1.35s forwards;
}
.chart__x{display:flex;justify-content:space-between;margin-top:8px;font:500 10.5px/1 var(--mono);color:var(--mute);letter-spacing:.02em}

.rows{border:1px solid var(--line);border-radius:15px;overflow:hidden;background:#FDFCFA}
.rows header{display:flex;align-items:baseline;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line)}
.rows header b{font:700 14px/1 var(--disp);letter-spacing:-.03em;margin-right:auto}
.rows header span{font-size:11.5px;color:var(--mute)}
.row{display:grid;grid-template-columns:26px 1fr auto auto;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--line);transition:background .3s}
.row:last-child{border-bottom:0}
.row:hover{background:#F7F5F1}
.row__ic{width:26px;height:26px;border-radius:8px;background:#F1EEE9;color:var(--slate);display:grid;place-items:center;font:700 14px/1 var(--body)}
.row__ic--in{background:var(--mint-s);color:var(--mint)}
.row__n{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:11.5px;color:var(--mute)}
.row__n b{font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row__t{font:500 11.5px/1 var(--mono);color:var(--mute);white-space:nowrap}
.row__s{font:700 13px/1 var(--mono);color:var(--ink);white-space:nowrap}
.row__s--in{color:var(--mint)}

/* ---------- clients ---------- */
.clients{padding-bottom:clamp(30px,4vw,54px)}
.clients__l{text-align:center;font:700 11.5px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:22px}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee__row{display:flex;width:max-content;animation:marq 34s linear infinite}
.marquee__row span{display:inline-flex;align-items:center;flex:none;font:700 clamp(18px,2.4vw,27px)/1 var(--disp);letter-spacing:-.03em;color:var(--line-2)}
.marquee__row i{font-style:normal;margin:0 22px;color:var(--violet);opacity:.4}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.sec{padding-block:var(--sec-y)}
.sec__head{display:grid;grid-template-columns:1fr .8fr;gap:clamp(20px,4vw,54px);align-items:end;margin-bottom:clamp(30px,4vw,50px)}
.sec__head--center{grid-template-columns:1fr;text-align:center;justify-items:center}
.sec__note{color:var(--mute);font-size:15.5px;max-width:46ch;padding-bottom:6px}

/* ---------- bento ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.5vw,18px)}
.bx{
  position:relative;display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(20px,2.4vw,28px);box-shadow:var(--sh-1);overflow:hidden;
  transition:transform .45s var(--e),box-shadow .4s,border-color .35s;
}
.bx:hover{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:var(--line-2)}
.bx--wide{grid-column:span 2}
.bx--tall{grid-column:span 2}
.bx__ic{width:46px;height:46px;border-radius:13px;background:var(--violet-s);color:var(--violet);display:grid;place-items:center;margin-bottom:16px;transition:background .35s,color .3s,transform .45s var(--e)}
.bx__ic .ico{width:23px;height:23px}
.bx:hover .bx__ic{background:var(--violet);color:#fff;transform:rotate(-7deg)}
.bx h3{font:700 18.5px/1.2 var(--disp);letter-spacing:-.03em;margin-bottom:8px}
.bx p{font-size:14.3px;color:var(--slate)}

.bx__viz{display:grid;gap:8px;margin-top:auto;padding-top:18px}
.bx__bank{display:flex;align-items:center;gap:10px;background:#FAF9F6;border:1px solid var(--line);border-radius:11px;padding:11px 13px;font-size:13px;font-weight:600}
.bx__bank i{font-style:normal;font:500 10.5px/1 var(--mono);color:var(--mute);background:var(--white);border:1px solid var(--line);border-radius:6px;padding:4px 6px}
.bx__bank em{margin-left:auto;font-style:normal;font:700 13px/1 var(--mono);color:var(--mint)}
.bx__bank:last-child em{color:var(--slate)}

.bx__fore{display:grid;gap:9px;margin-top:auto;padding-top:20px}
.bx__fore span{display:flex;align-items:baseline;gap:10px;background:#FAF9F6;border:1px solid var(--line);border-radius:11px;padding:12px 14px}
.bx__fore i{font-style:normal;font-size:12.5px;color:var(--mute)}
.bx__fore b{margin-left:auto;font:700 15px/1 var(--mono);letter-spacing:-.02em}
.bx__fore .is-warn{background:var(--peach-s);border-color:transparent}
.bx__fore .is-warn b{color:#C9502A}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px);counter-reset:s}
.steps li{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,2.4vw,30px);box-shadow:var(--sh-1);transition:transform .45s var(--e),box-shadow .4s}
.steps li:hover{transform:translateY(-6px);box-shadow:var(--sh-3)}
.steps__n{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:13px;background:var(--ink);color:#fff;font:700 15px/1 var(--mono);letter-spacing:-.02em;margin-bottom:18px}
.steps li b{display:block;font:700 19px/1.2 var(--disp);letter-spacing:-.03em;margin-bottom:8px}
.steps li p{font-size:14.5px;color:var(--slate)}

/* ---------- pricing ---------- */
.toggle{display:inline-flex;gap:4px;background:#F2EFEA;border-radius:12px;padding:4px;margin-top:20px}
.toggle button{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:9px;font:700 14px/1 var(--body);color:var(--slate);transition:background .3s,color .3s,box-shadow .3s}
.toggle button i{font-style:normal;font-size:11px;font-weight:700;color:var(--mint);background:var(--mint-s);padding:4px 6px;border-radius:6px}
.toggle .is-on{background:var(--white);color:var(--ink);box-shadow:var(--sh-1)}

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px);align-items:stretch}
.plan{
  position:relative;display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(24px,2.8vw,34px);box-shadow:var(--sh-1);
  transition:transform .45s var(--e),box-shadow .4s,border-color .35s;
}
.plan:hover{transform:translateY(-6px);box-shadow:var(--sh-3)}
.plan--hot{border-color:var(--violet);box-shadow:var(--sh-2)}
.plan__flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--violet);color:#fff;font:700 11px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;padding:9px 15px;border-radius:999px;white-space:nowrap}
.plan h3{font:700 22px/1.1 var(--disp);letter-spacing:-.035em}
.plan__d{margin-top:7px;font-size:13.5px;color:var(--mute);min-height:2.6em}
.plan__p{display:flex;align-items:baseline;gap:7px;margin:20px 0 4px}
.plan__p b{font:700 clamp(34px,4vw,44px)/1 var(--disp);letter-spacing:-.045em;transition:opacity .25s}
.plan__p b.is-swap{opacity:0}
.plan__p span{font-size:13.5px;font-weight:700;color:var(--mute)}
.plan__hint{font-size:12.5px;color:var(--mint);font-weight:700;min-height:1.4em;transition:opacity .3s}
.plan ul{display:grid;gap:11px;margin:22px 0 26px;padding-top:22px;border-top:1px solid var(--line);flex:1;align-content:start}
.plan li{display:flex;gap:10px;align-items:flex-start;font-size:14.3px;color:var(--slate)}
.plan li .ico{width:16px;height:16px;color:var(--violet);margin-top:3px}

/* ---------- reviews ---------- */
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
.rev{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,2.4vw,30px);box-shadow:var(--sh-1);transition:transform .45s var(--e),box-shadow .4s}
.rev:hover{transform:translateY(-6px);box-shadow:var(--sh-3)}
.rev p{font-size:15.5px;color:var(--ink-2);flex:1}
.rev p::before{content:'«'}
.rev p::after{content:'»'}
.rev footer{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.rev footer img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.rev footer span{display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--mute)}
.rev footer b{font-size:14.5px;font-weight:700;color:var(--ink);letter-spacing:-.02em}

/* ---------- faq ---------- */
.faq__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,70px);align-items:start}
.acc{display:grid;gap:9px}
.acc details{background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);overflow:hidden;transition:box-shadow .35s,border-color .3s}
.acc details[open]{border-color:var(--line-2);box-shadow:var(--sh-2)}
.acc summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;cursor:pointer;list-style:none;font-size:16px;font-weight:700;letter-spacing:-.02em;transition:color .3s}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--violet)}
.acc__ic{width:30px;height:30px;flex:none;border-radius:9px;background:var(--violet-s);color:var(--violet);display:grid;place-items:center;transition:transform .45s var(--e),background .35s,color .3s}
.acc__ic .ico{width:15px;height:15px}
.acc details[open] .acc__ic{transform:rotate(135deg);background:var(--violet);color:#fff}
.acc__body{padding:0 20px 20px;color:var(--slate);font-size:15px;animation:accIn .4s var(--e-out)}
@keyframes accIn{from{opacity:0;transform:translateY(-8px)}}

/* ---------- cta ---------- */
.cta{padding-block:0 clamp(56px,6vw,90px)}
.cta__box{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,54px);align-items:center;
  background:var(--ink);color:#fff;border-radius:var(--r-xl);
  padding:clamp(30px,4vw,54px);position:relative;overflow:hidden;
}
.cta__box::before{
  content:'';position:absolute;right:-12%;top:-60%;width:64%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgb(122 107 255 / .5),transparent);
}
.cta__copy{position:relative}
.cta__copy h2{font:700 clamp(26px,3.4vw,40px)/1.1 var(--disp);letter-spacing:-.04em;margin-bottom:12px}
.cta__copy p{color:#B6B1C6;font-size:15.5px;max-width:44ch}
.cta__form{position:relative;display:grid;gap:12px}
.cta__form .field{margin:0}
.cta__form label{display:block;font:700 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:#8E889C;margin-bottom:9px}
.cta__form input{
  width:100%;padding:15px 16px;background:rgb(255 255 255 / .07);
  border:1.5px solid rgb(255 255 255 / .16);border-radius:12px;font-size:15.5px;color:#fff;
  transition:border-color .3s,background .3s,box-shadow .3s;
}
.cta__form input::placeholder{color:#7A748A}
.cta__form input:focus{outline:none;border-color:var(--violet-2);background:rgb(255 255 255 / .1);box-shadow:0 0 0 4px rgb(122 107 255 / .2)}
.err{display:none;margin-top:7px;font-size:12.5px;color:#FF9A8A}
.field.is-bad input{border-color:#FF7A66}
.field.is-bad .err{display:block}
.cta__ok{display:flex;align-items:center;gap:13px;background:rgb(255 255 255 / .08);border-radius:12px;padding:14px 16px;animation:accIn .4s var(--e-out)}
.cta__ok-ic{width:40px;height:40px;flex:none;border-radius:50%;background:var(--mint);color:#fff;display:grid;place-items:center}
.cta__ok-ic .ico{width:20px;height:20px;stroke-width:3}
.cta__ok>span:last-child{display:flex;flex-direction:column;gap:2px;font-size:13px;color:#B6B1C6}
.cta__ok b{font-size:15px;font-weight:700;color:#fff}

/* ---------- footer ---------- */
.ftr{background:var(--white);border-top:1px solid var(--line);padding-top:clamp(40px,5vw,64px)}
.ftr__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:clamp(22px,4vw,44px)}
.ftr__brand p{margin-top:16px;color:var(--mute);font-size:14.3px;max-width:34ch}
.ftr__col{display:flex;flex-direction:column;gap:10px}
.ftr__col b{font:700 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--violet);margin-bottom:6px}
.ftr__col a{font-size:14.3px;color:var(--slate);transition:color .3s}
.ftr__col a:hover{color:var(--violet)}
.ftr__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:22px 0;margin-top:clamp(28px,4vw,44px);border-top:1px solid var(--line);font-size:13px;color:var(--mute)}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .8s var(--e-out) var(--d,0s),transform .8s var(--e-out) var(--d,0s)}
[data-reveal].is-in{opacity:1;transform:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bx--wide,.bx--tall{grid-column:span 2}
  .bx--tall{grid-row:auto}
  .app{grid-template-columns:1fr}
  .app__side{flex-direction:row;align-items:center;gap:14px;border-right:0;border-bottom:1px solid var(--line);padding:12px 14px;overflow-x:auto;scrollbar-width:none}
  .app__side::-webkit-scrollbar{display:none}
  .app__nav{display:flex;gap:4px}
  .app__nav span{white-space:nowrap}
  .app__hint{display:none}
}

@media (max-width:900px){
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(88vw,360px);
    flex-direction:column;align-items:stretch;justify-content:center;gap:4px;
    background:var(--white);border-left:1px solid var(--line);
    padding:88px 28px 40px;margin:0;
    transform:translateX(100%);transition:transform .5s var(--e),visibility 0s .5s;
    visibility:hidden;box-shadow:-30px 0 70px -22px rgb(23 20 31 / .28);overflow-y:auto;
  }
  .nav.is-open{transform:none;visibility:visible;transition:transform .5s var(--e),visibility 0s}
  .nav>a:not(.btn){font:700 21px/1 var(--disp);letter-spacing:-.035em;padding:15px 0;border-bottom:1px solid var(--line)}
  .nav>a:not(.btn)::after{display:none}
  .nav__cta{display:inline-flex;margin-top:20px}
  .burger{display:block}
  .hdr__cta,.hdr__login{display:none}

  .sec__head{grid-template-columns:1fr;align-items:start}
  .sec__note{padding-bottom:0}
  .steps,.plans,.rgrid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .plan--hot{order:-1}
  .faq__grid,.cta__box{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .app{transform:none}
}

@media (max-width:680px){
  body{font-size:16px}
  .hero{padding-top:34px}
  .hero__title{max-width:none}
  .bento{grid-template-columns:1fr}
  .bx--wide,.bx--tall{grid-column:span 1}
  .app__main{padding:14px 12px 16px}
  .app__search{display:none}
  .row{grid-template-columns:26px 1fr auto;row-gap:2px}
  .row__t{display:none}
  .chart__head{gap:10px}
  .chart__tabs{width:100%}
  .chart__tabs button{flex:1}
  .ftr__grid{grid-template-columns:1fr 1fr}
  .ftr__bottom{flex-direction:column;gap:8px}
  .pill{font-size:12.5px;padding-right:12px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
  .hero__title .word{opacity:1;transform:none}
  #linePath{stroke-dashoffset:0}
  #areaPath,.chart__dot{opacity:1}
}