/* Landing page "Sistemas sob medida e SaaS em PHP" · Agência Gu Web */
:root{
  --bg:#F5F6F9;--paper:#FFFFFF;--ink:#0A0E1F;--ink2:#353C52;--mute:#667089;--line:#E2E5EE;--line2:#D3D8E5;
  --acc:#5546E8;--acc-d:#3F31CF;--acc-soft:#EEECFE;--mint:#0F9F6E;--amber:#E39A0B;--night:#0A0E1F;--night2:#121936;
  --fh:"Plus Jakarta Sans",system-ui,sans-serif;--fb:"Figtree",system-ui,sans-serif;--fm:"JetBrains Mono",ui-monospace,Menlo,monospace;--wrap:1200px
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:var(--fb);background:var(--bg);color:var(--ink);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{display:block}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px;position:relative}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
h1,h2,h3{font-family:var(--fh);letter-spacing:-.022em;line-height:1.12;text-wrap:balance}

/* Botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:700;font-size:16px;line-height:1.2;padding:15px 24px;border-radius:12px;border:0;cursor:pointer;color:#fff;background:var(--acc);box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 14px 30px -14px rgba(85,70,232,.85);transition:transform .2s,background .2s,box-shadow .2s;white-space:nowrap}
.btn:hover{background:var(--acc-d);transform:translateY(-2px)}
.btn .i{width:18px;height:18px;stroke-width:2.2;transition:transform .2s}
.btn:hover .i{transform:translateX(3px)}
.btn-sm{padding:10px 16px;font-size:14.5px;border-radius:10px}
.btn-lg{padding:17px 26px;font-size:17px}
.btn-full{width:100%}
.btn:disabled{opacity:.7;cursor:wait;transform:none}
.btn-line{display:inline-flex;align-items:center;gap:10px;font-weight:700;padding:15px 20px;border-radius:12px;color:var(--ink);background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line2);transition:box-shadow .2s,transform .2s}
.btn-line:hover{box-shadow:inset 0 0 0 1.5px var(--ink);transform:translateY(-2px)}
.btn-line svg{width:20px;height:20px;color:#16A34A}

/* Topo */
.top{position:sticky;top:0;z-index:50;background:rgba(245,246,249,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:box-shadow .3s}
.top.scrolled{box-shadow:0 1px 0 var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.brand{display:flex;align-items:center;gap:11px;white-space:nowrap;font-weight:700;font-size:16.5px;line-height:1.1}
.brand img{max-height:40px;width:auto}
.brand-mark{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--ink);font-family:var(--fh);font-size:15px;font-weight:800;color:#fff}
.brand small{display:block;font-weight:500;font-size:12px;color:var(--mute)}
.nav{display:flex;gap:26px;font-size:15px;font-weight:600;color:var(--ink2)}
.nav a:hover{color:var(--acc)}
.top-r{display:flex;align-items:center;gap:10px}
.top-wa{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;background:#E7F8EE;color:#16A34A}
.top-wa svg{width:21px;height:21px}

/* 1 · Hero */
.hero{padding:56px 0 88px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:44px 44px;-webkit-mask:radial-gradient(70% 80% at 75% 30%,#000 10%,transparent 75%);mask:radial-gradient(70% 80% at 75% 30%,#000 10%,transparent 75%);opacity:.65;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.02fr 1fr;gap:56px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:10px;font-family:var(--fm);font-size:13px;font-weight:500;color:var(--ink2);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line2);padding:7px 14px 7px 12px;border-radius:999px}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(15,159,110,.15)}
.hero h1{font-size:clamp(38px,5vw,62px);font-weight:800;margin:22px 0 0}
.hero h1 em,.cta h2 em{font-style:normal;color:var(--acc);background:linear-gradient(transparent 62%,var(--acc-soft) 62%);padding:0 .06em}
.sub{font-size:19px;color:var(--ink2);margin-top:20px;max-width:56ch}
.sub b{color:var(--ink)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.proof{list-style:none;display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:30px;font-size:14.5px;font-weight:600;color:var(--ink2)}
.proof li{display:flex;align-items:center;gap:8px}
.proof .i{width:18px;height:18px;color:var(--acc)}

/* Ilustração do sistema */
.app{position:relative;padding:0 0 84px 26px}
.app-win{background:var(--paper);border-radius:18px;box-shadow:0 0 0 1px var(--line2),0 40px 80px -40px rgba(10,14,31,.45),0 12px 24px -16px rgba(10,14,31,.18);overflow:hidden}
.app-bar{display:flex;align-items:center;gap:7px;padding:12px 14px;border-bottom:1px solid var(--line);background:#FAFBFC}
.app-bar i{width:10px;height:10px;border-radius:50%;background:#E2E5EE}
.app-bar span{margin-left:10px;font-family:var(--fm);font-size:12px;color:var(--mute);background:var(--bg);padding:4px 12px;border-radius:7px;flex:1;max-width:260px}
.app-body{display:flex;min-height:360px}
.app-side{width:60px;flex:none;background:var(--night);display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 0}
.app-logo{width:34px;height:34px;border-radius:10px;background:var(--acc);color:#fff;display:grid;place-items:center;font-family:var(--fh);font-size:13px;margin-bottom:8px}
.app-side span{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#7C86A8}
.app-side span.on{background:rgba(255,255,255,.09);color:#fff}
.app-side .i{width:18px;height:18px}
.app-main{flex:1;min-width:0;padding:18px 20px 18px}
.app-h{display:flex;justify-content:space-between;align-items:flex-start}
.app-h small{display:block;font-size:12px;color:var(--mute)}
.app-h b{font-family:var(--fh);font-size:17px}
.chip-live{display:inline-flex;align-items:center;gap:6px;font-family:var(--fm);font-size:11.5px;color:var(--mint);background:#E7F8EE;padding:4px 9px;border-radius:999px}
.chip-live i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.kpis div{border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0}
.kpis small{display:block;font-size:11.5px;color:var(--mute);white-space:nowrap}
.kpis b{display:block;font-family:var(--fh);font-size:19px;white-space:nowrap;margin-top:2px}
.kpis em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--mute)}
.kpis em.up{color:var(--mint)}
.chart{display:flex;align-items:flex-end;gap:6px;height:84px;margin-top:14px;padding:0 2px;border-bottom:1px solid var(--line)}
.chart span{flex:1;height:var(--h);border-radius:5px 5px 0 0;background:linear-gradient(180deg,#8B80FF,var(--acc));opacity:.9;transform-origin:bottom;animation:grow .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d)}
.chart span:nth-last-child(-n+3){background:linear-gradient(180deg,#4ADE9F,var(--mint))}
@keyframes grow{from{transform:scaleY(0)}}
.events{list-style:none;margin-top:12px;display:grid;gap:6px}
.events li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink2);padding:7px 8px;border-radius:10px}
.events li.new{animation:slide .5s ease both;background:#F4F3FF}
@keyframes slide{from{opacity:0;transform:translateY(-8px)}}
.events li span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.events b{color:var(--ink)}
.events time{font-family:var(--fm);font-size:11px;color:var(--mute)}
.events i{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none}
.events i .i{width:15px;height:15px;stroke-width:2}
.events i.ok{background:#E7F8EE;color:var(--mint)}.events i.doc{background:#FFF4DE;color:var(--amber)}.events i.wa{background:#E8F0FF;color:#2F6BFF}.events i.ship{background:#F0EDFF;color:var(--acc)}
.code{position:absolute;left:0;bottom:0;margin:0;background:var(--night);color:#C9D1F5;font-family:var(--fm);font-size:13px;line-height:1.65;padding:16px 20px;border-radius:14px;box-shadow:0 24px 50px -24px rgba(10,14,31,.7);white-space:pre}
.code .v{color:#FF9ECF}.code .f{color:#8FB5FF}.code .s{color:#7EE2B8}
.app-note{position:absolute;right:4px;bottom:12px;font-size:11.5px;color:var(--mute)}

/* Seções */
.sec{padding:104px 0}
.sec-alt{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{max-width:760px;margin:0 auto 52px;text-align:center}
.sec-head.left{text-align:left;margin:0}
.kicker{font-family:var(--fm);font-size:13.5px;font-weight:500;color:var(--acc);margin-bottom:14px}
.sec h2{font-size:clamp(30px,3.6vw,46px);font-weight:800}
.sec-head>p:not(.kicker){color:var(--ink2);font-size:18px;margin-top:16px}
.sec-head a{color:var(--acc);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* 2 · Sinais */
.signs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.signs article{background:var(--paper);border-radius:18px;padding:26px 24px 28px;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .25s,transform .25s}
.signs article:hover{box-shadow:inset 0 0 0 1.5px var(--acc);transform:translateY(-3px)}
.signs .n{font-family:var(--fm);font-size:13px;font-weight:600;color:var(--acc);background:var(--acc-soft);padding:4px 9px;border-radius:7px}
.signs h3{font-size:20px;margin:18px 0 10px}
.signs p{font-size:15.5px;color:var(--ink2)}

/* 3 · Projetos */
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:-16px 0 36px}
.filters button{border:0;cursor:pointer;font-size:14.5px;font-weight:700;padding:10px 16px;border-radius:999px;background:var(--bg);color:var(--ink2);box-shadow:inset 0 0 0 1px var(--line);transition:background .2s,color .2s}
.filters button:hover{color:var(--ink)}
.filters button.on{background:var(--ink);color:#fff;box-shadow:none}
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pj{display:flex;flex-direction:column;background:var(--paper);border-radius:20px;padding:24px;box-shadow:inset 0 0 0 1px var(--line),0 1px 2px rgba(10,14,31,.04);transition:box-shadow .25s,transform .25s,opacity .3s}
.pj:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--line2),0 28px 50px -30px rgba(10,14,31,.35)}
.pj.hide{display:none}
.pj.show{animation:pop .35s ease both}
@keyframes pop{from{opacity:0;transform:translateY(8px)}}
.pj-top{display:flex;justify-content:space-between;align-items:center}
.pj-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--night);color:#fff}
.pj-ic .i{width:22px;height:22px}
.pj-tag{font-family:var(--fm);font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px}
.t-saas{background:var(--acc-soft);color:var(--acc)}.t-gestao{background:#E6F6F0;color:var(--mint)}.t-vendas{background:#FFF3DB;color:#A86B00}.t-ia{background:#FCE9F4;color:#B4237A}
.pj h3{font-size:21px;margin-top:18px}
.pj-who{font-size:14px;font-weight:600;color:var(--mute);margin-top:6px}
.pj-desc{font-size:15.5px;color:var(--ink2);margin-top:12px}
.pj-mods{list-style:none;display:grid;gap:8px;margin-top:16px;padding-top:16px;border-top:1px dashed var(--line2)}
.pj-mods li{display:flex;gap:9px;font-size:14.5px;line-height:1.45}
.pj-mods .i{width:17px;height:17px;color:var(--mint);stroke-width:2.4;margin-top:1px}
.pj-int{margin-top:18px}
.pj-int small{display:block;font-family:var(--fm);font-size:11.5px;color:var(--mute);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.pj-int>div{display:flex;flex-wrap:wrap;gap:6px}
.pj-cta{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;border:0;background:none;cursor:pointer;font-weight:700;font-size:15px;color:var(--acc);padding:18px 0 0}
.pj-cta .i{width:17px;height:17px;stroke-width:2.2;transition:transform .2s}
.pj-cta:hover .i{transform:translateX(4px)}

/* Selo de integração */
.lg{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ink2);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);padding:5px 10px 5px 6px;border-radius:9px;white-space:nowrap}
.lg img{width:18px;height:18px;object-fit:contain}
.lg i{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font-style:normal;font-family:var(--fm);font-size:9.5px;font-weight:600;color:#fff;background:var(--ink2)}

/* 4 · Integrações */
.sec-dark{background:var(--night);color:#E6E9F7;position:relative;overflow:hidden}
.sec-dark::before{content:"";position:absolute;inset:0;background:radial-gradient(800px 420px at 50% -10%,rgba(85,70,232,.35),transparent 70%);pointer-events:none}
.sec-dark .sec-head>p:not(.kicker){color:#A9B1D3}
.sec-dark .kicker{color:#A99FFF}
.hub{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hg{background:var(--night2);border-radius:18px;padding:22px;box-shadow:inset 0 0 0 1px rgba(170,180,230,.12)}
.hg h3{display:flex;align-items:center;gap:10px;font-size:16.5px;color:#fff;margin-bottom:16px}
.hg h3 .i{width:19px;height:19px;color:#A99FFF}
.hg-l{display:flex;flex-wrap:wrap;gap:8px}
.hg .lg{background:#fff;box-shadow:none;color:var(--ink);font-size:13.5px;padding:6px 11px 6px 7px}
.hg-api{background:linear-gradient(140deg,#2D2394,#5546E8);box-shadow:none}
.hg-api h3 .i{color:#fff}
.hg-api p{font-size:15px;color:#DCD8FF}

/* 5 · Processo */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s;position:relative}
.steps::before{content:"";position:absolute;left:24px;right:24px;top:24px;height:2px;background:repeating-linear-gradient(90deg,var(--line2) 0 8px,transparent 8px 14px)}
.steps li{position:relative}
.st-n{position:relative;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--ink);color:#fff;font-family:var(--fh);font-weight:800;font-size:18px;box-shadow:0 0 0 6px var(--bg)}
.steps li:last-child .st-n{background:var(--acc)}
.steps small{display:block;font-family:var(--fm);font-size:12.5px;color:var(--acc);margin-top:20px}
.steps h3{font-size:20px;margin-top:6px}
.steps p{font-size:15.5px;color:var(--ink2);margin-top:8px}
.own{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;margin-top:80px;background:var(--paper);border-radius:24px;padding:44px;box-shadow:inset 0 0 0 1px var(--line)}
.own h3{font-size:30px}
.own-copy>p{color:var(--ink2);margin-top:12px}
.stack{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.own-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:22px 26px}
.own-list li{display:flex;gap:12px}
.own-list .i{width:22px;height:22px;color:var(--acc);margin-top:2px}
.own-list b{display:block;font-size:16px}
.own-list span{font-size:14.5px;color:var(--ink2)}

/* 6 · FAQ */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;font-family:var(--fh);font-weight:700;font-size:18.5px;padding:22px 0}
.faq summary::-webkit-details-marker{display:none}
.pm{position:relative;width:28px;height:28px;border-radius:8px;background:var(--bg);flex:none}
.pm::before,.pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--ink);border-radius:2px;transition:transform .25s}
.pm::after{transform:rotate(90deg)}
details[open] .pm{background:var(--acc)}
details[open] .pm::before{background:#fff}
details[open] .pm::after{transform:rotate(0);background:#fff}
.faq p{color:var(--ink2);padding:0 44px 24px 0;font-size:16.5px}

/* 7 · Formulário */
.cta{background:var(--night);color:#E6E9F7;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 500px at 10% 100%,rgba(85,70,232,.32),transparent 65%);pointer-events:none}
.cta .kicker{color:#A99FFF}
.cta-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.cta h2{color:#fff}
.cta h2 em{color:#B7AEFF;background:none}
.cta-copy>p:not(.kicker){color:#A9B1D3;font-size:18px;margin-top:18px}
.gets{list-style:none;display:grid;gap:18px;margin-top:32px}
.gets li{display:flex;gap:14px}
.gets .i{width:22px;height:22px;color:#7EE2B8;margin-top:2px}
.gets b{display:block;color:#fff}
.gets span{font-size:15px;color:#A9B1D3}
.qf{background:var(--paper);color:var(--ink);border-radius:22px;padding:32px;box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.qf h3{font-size:26px}
.qf-sub{color:var(--mute);font-size:15px;margin:4px 0 20px}
.seg{border:0;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.seg legend{font-size:14px;font-weight:700;margin-bottom:8px}
.seg label{cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;line-height:1.25;padding:12px;border-radius:12px;box-shadow:inset 0 0 0 1.5px var(--line2);transition:box-shadow .2s,background .2s;height:100%}
.seg .i{width:18px;height:18px;color:var(--mute)}
.seg input:checked+span{box-shadow:inset 0 0 0 2px var(--acc);background:var(--acc-soft)}
.seg input:checked+span .i{color:var(--acc)}
.seg input:focus-visible+span{outline:2px solid var(--acc);outline-offset:2px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.f{margin-bottom:14px;min-width:0}
.f label{display:block;font-size:14px;font-weight:700;margin-bottom:6px}
.f .opt{font-weight:500;color:var(--mute)}
.f input,.f select,.f textarea{width:100%;font-size:16px;padding:13px 14px;border-radius:11px;border:1.5px solid var(--line2);background:#fff;color:var(--ink);transition:border-color .2s}
.f textarea{resize:vertical;min-height:92px;line-height:1.5}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--acc)}
.f .err{border-color:#E5484D}
.qf-note{display:flex;align-items:center;justify-content:center;gap:7px;font-size:13px;color:var(--mute);margin-top:12px;text-align:center}
.qf-note .i{width:15px;height:15px}
.lp-err{color:#C2262B;font-size:14.5px;margin-top:10px;text-align:center}
.lp-err a{font-weight:700;text-decoration:underline}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.done{text-align:center;padding:36px 8px}
.ok-c{width:68px;height:68px;margin:0 auto;border-radius:50%;background:#E7F8EE;color:var(--mint);display:grid;place-items:center}
.ok-c .i{width:32px;height:32px;stroke-width:2.4}
.done h3{margin:16px 0 8px}
.done p{color:var(--ink2);margin-bottom:20px}
.qf.flash{animation:flash 1.2s ease}
@keyframes flash{30%{box-shadow:0 0 0 6px rgba(169,159,255,.55),0 40px 80px -40px rgba(0,0,0,.7)}}

/* Rodapé e fixos */
.ft{background:#070A17;color:#8790B4;font-size:13.5px;padding:26px 0}
.ft .wrap{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
.sticky{display:none}
.wa-float{position:fixed;right:22px;bottom:22px;z-index:60;width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 14px 30px -10px rgba(37,211,102,.8);transition:transform .2s}
.wa-float:hover{transform:scale(1.07)}
.wa-float svg{width:30px;height:30px}
body.has-ai .wa-float{bottom:94px}

/* Revelar ao rolar */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}html{scroll-behavior:auto}}

@media (max-width:1080px){
  .nav{display:none}
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .app{max-width:620px}
  .signs{grid-template-columns:1fr 1fr}
  .projects{grid-template-columns:1fr 1fr}
  .hub{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr;gap:36px 24px}.steps::before{display:none}
  .own{grid-template-columns:1fr;gap:32px}
  .faq-grid,.cta-grid{grid-template-columns:1fr;gap:36px}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  .top .wrap{height:64px}
  .brand small{display:none}
  .top .btn-sm{padding:10px 13px;font-size:14px}
  .hero{padding:34px 0 64px}
  .hero h1{font-size:36px}
  .sub{font-size:17px}
  .ctas .btn,.ctas .btn-line{width:100%;justify-content:center}
  .app{padding:0 0 118px}
  .app-side{display:none}
  .app-body{min-height:0}
  .app-main{padding:14px}
  .kpis{grid-template-columns:1fr 1fr}.hide-s{display:none}
  .code{font-size:11.5px;padding:12px 14px;left:10px;right:10px;bottom:26px}
  .app-note{bottom:0}
  .sec{padding:72px 0}
  .sec-head{margin-bottom:36px;text-align:left}
  .filters{justify-content:flex-start;margin:-6px -18px 26px;padding:0 18px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .filters button{flex:none}
  .signs,.projects,.hub,.steps,.own-list{grid-template-columns:1fr}
  .own{padding:26px 20px;margin-top:56px}
  .qf{padding:24px 18px}
  .seg,.f2{grid-template-columns:1fr}
  .seg{grid-template-columns:1fr 1fr}
  .faq summary{font-size:17px}
  .faq p{padding-right:0}
  .ft{padding-bottom:96px}
  .wa-float{display:none}
  .sticky{display:flex;gap:10px;position:fixed;left:12px;right:12px;bottom:12px;z-index:60;transform:translateY(140%);transition:transform .3s}
  .sticky.on{transform:none}
  .sticky .btn{flex:1}
  .sticky .sw{width:54px;flex:none;border-radius:12px;background:#25D366;color:#fff;display:grid;place-items:center}
  .sticky .sw svg{width:26px;height:26px}
}