/* =========================================================
   landing.css - página inicial
   Paleta: azul-marinho + âmbar (tema papel mantido).
   Direção: plano, estrutural, sem brilhos. Linhas finas em vez de caixas,
   lista editorial em vez de grelha de cartões iguais.
   ========================================================= */
body.landing,.landing{
  --card:rgba(255,255,255,.028);
  --card-hi:rgba(255,255,255,.055);
  --glow:rgba(255,174,31,.16);
}
body.theme-paper,.theme-paper{
  --bg:#F1F0EA;--bg-soft:#FAF9F5;--panel:#FFFFFF;--panel-2:#F4F3EE;
  --line:rgba(15,15,13,.13);--line-strong:rgba(15,15,13,.26);
  --text:#0F0F0D;--muted:#5C5B54;--muted-2:#8E8D85;
  --accent:#5C7A00;--accent-2:#8FB800;--accent-soft:rgba(92,122,0,.13);
  --card:rgba(15,15,13,.035);--card-hi:rgba(15,15,13,.06);
}
.theme-paper .btn.primary{color:#141A02}

/* progresso do scroll: fio liso */
.lx-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:80}
.lx-progress span{display:block;height:100%;width:0;background:var(--accent)}

/* cabeçalho */
.lx-header{position:fixed;top:0;left:0;right:0;background:transparent;border-bottom:1px solid transparent;transition:background .25s,border-color .25s}
.lx-header.scrolled{background:color-mix(in srgb,var(--bg) 94%,transparent);border-bottom-color:var(--line)}

/* texto de apoio */
.lx-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lx-dot{width:7px;height:7px;border-radius:1px;background:var(--accent);flex:none}
.lx-h2{font-size:clamp(28px,4vw,48px);line-height:1.04;letter-spacing:-.03em;font-weight:700;margin:14px 0 12px}
.lx-sub{color:var(--muted);font-size:clamp(15px,1.3vw,17px);max-width:54ch;line-height:1.65;margin:0}
.lx-grad{color:var(--accent);background:none;-webkit-text-fill-color:currentColor}
.lx-mono{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;color:var(--muted-2)}
number-flow{font-variant-numeric:tabular-nums}

/* ---------- hero ---------- */
.lx-hero{position:relative;padding:136px 0 80px;border-bottom:1px solid var(--line)}
.lx-hero-wrap{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:64px;align-items:center}
.lx-h1{font-size:clamp(40px,6.4vw,82px);line-height:.98;letter-spacing:-.04em;font-weight:700;margin:20px 0 22px}
.lx-h1 .lx-l{display:block}
.lx-h1 .lx-l>span{display:block;opacity:0;transform:translateY(.3em);animation:lxRise .7s cubic-bezier(.2,.8,.2,1) forwards}
.lx-h1 .lx-l:nth-child(2)>span{animation-delay:.07s}
.lx-h1 .lx-l:nth-child(3)>span{animation-delay:.14s}
@keyframes lxRise{to{opacity:1;transform:none}}
.lx-lede{color:var(--muted);font-size:clamp(16px,1.4vw,18.5px);line-height:1.62;max-width:50ch;margin:0 0 28px}
.lx-actions{display:flex;flex-wrap:wrap;gap:10px}
.lx-actions .btn{padding:13px 20px;font-size:15px}
.lx-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:44px 0 0;border-top:1px solid var(--line)}
.lx-meta>div{padding:16px 14px 0 0}
.lx-meta>div+div{padding-left:16px;border-left:1px solid var(--line)}
.lx-meta dt{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:6px}
.lx-meta dd{margin:0;font-family:var(--font-head);font-size:clamp(22px,2.5vw,32px);font-weight:700;letter-spacing:-.03em;line-height:1}

/* ---------- painel de demonstração ---------- */
.lx-mock{border:1px solid var(--line-strong);border-radius:10px;background:var(--panel);overflow:hidden}
.lx-mock-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 12px;border-bottom:1px solid var(--line)}
.lx-tabs{display:flex;gap:2px}
.lx-tabs button{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);
  background:none;border:0;border-bottom:2px solid transparent;border-radius:0;padding:12px 10px 10px;margin-bottom:-1px;cursor:pointer;transition:color .15s,border-color .15s}
.lx-tabs button:hover{color:var(--text)}
.lx-tabs button.on{color:var(--accent);border-bottom-color:var(--accent)}
.lx-live{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.lx-live i{width:6px;height:6px;border-radius:1px;background:var(--good,var(--accent))}
.lx-pane{display:none;padding:18px 16px 6px;min-height:212px}
.lx-pane.on{display:block}
.lx-pane-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px}
.lx-pane-head b{font-family:var(--font-head);font-size:16px;letter-spacing:-.01em}
.lx-pane-head span{font-family:var(--font-mono);font-size:10.5px;color:var(--muted-2);letter-spacing:.04em}
.lx-gauges{display:flex;gap:0;margin-bottom:16px;border:1px solid var(--line);border-radius:8px}
.lx-gauge{flex:1;padding:10px 12px}
.lx-gauge+.lx-gauge{border-left:1px solid var(--line)}
.lx-gauge span{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.lx-gauge b{font-family:var(--font-head);font-size:28px;font-weight:700;letter-spacing:-.03em;line-height:1.15}
.lx-gauge em{font-style:normal;font-size:11px;color:var(--muted);margin-left:4px}
.lx-bars{display:flex;flex-direction:column;gap:9px}
.lx-bar{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:10.5px;color:var(--muted)}
.lx-bar span{width:82px;flex:none}
.lx-bar i{position:relative;flex:1;height:4px;background:var(--card-hi);overflow:hidden}
.lx-bar i:after{content:"";position:absolute;inset:0;width:var(--w);background:var(--accent);transform-origin:left;animation:lxGrow .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes lxGrow{from{transform:scaleX(0)}}
.lx-drive{margin-top:16px;height:28px;border-radius:6px;background:var(--card);border:1px solid var(--line);position:relative;overflow:hidden}
.lx-drive:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 42px)}
.lx-drive i{position:absolute;top:50%;left:-10%;width:22px;height:8px;border-radius:2px;background:var(--accent);transform:translateY(-50%);animation:lxDrive 3.4s cubic-bezier(.4,.1,.5,.9) infinite}
@keyframes lxDrive{0%{left:-8%}70%,100%{left:96%}}
.lx-icon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lx-ic{aspect-ratio:1.4;border-radius:6px;border:1px solid var(--line);background:var(--card);position:relative;overflow:hidden}
.lx-ic:after{content:"";position:absolute;inset:28%;border-radius:4px;background:var(--accent)}
.lx-ic.i2:after{border-radius:50%}
.lx-ic.i3:after{inset:26% 36%;border-radius:2px}
.lx-ic.i4:after{inset:32% 26%;border-radius:6px 6px 2px 2px}
.lx-ic.i5:after{inset:34%;transform:rotate(45deg);border-radius:2px}
.lx-ic.i6:after{inset:28% 32%;border-radius:50% 50% 3px 3px}
.lx-styles{display:flex;gap:6px;margin-top:14px}
.lx-styles b{font-family:var(--font-mono);font-size:10.5px;padding:4px 9px;border-radius:5px;border:1px solid var(--line);color:var(--muted-2);font-weight:400}
.lx-styles b.on{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:var(--accent-soft)}
.lx-shirt{display:flex;align-items:center;gap:16px}
.lx-shirt-body{position:relative;width:96px;height:112px;border-radius:10px 10px 4px 4px;background:var(--panel-2);border:1px solid var(--line-strong);overflow:hidden}
.lx-shirt-body:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,var(--accent) 0 6px,transparent 6px 12px);opacity:.32}
.lx-shirt-body:after{content:"";position:absolute;left:50%;top:0;width:34px;height:20px;transform:translateX(-50%);border-radius:0 0 18px 18px;background:var(--panel);border:1px solid var(--line)}
.lx-tex{display:none}
.lx-swatches{display:grid;grid-template-columns:repeat(2,22px);gap:6px}
.lx-swatches i{width:22px;height:22px;border-radius:4px;border:1px solid var(--line-strong)}
.lx-swatches .s1{background:var(--accent)}.lx-swatches .s2{background:var(--accent-2)}
.lx-swatches .s3{background:#2A3550}.lx-swatches .s4{background:#E9EFFA}
.lx-mock-foot{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-top:1px solid var(--line)}
.lx-mock-foot .ok{color:var(--good,var(--accent))}
.lx-scroll{display:none}

/* ---------- ferramentas: índice em linhas ---------- */
.lx-tools{padding:96px 0 40px}
.lx-sec-head{max-width:62ch;margin-bottom:40px}
.lx-grid{display:block;border-top:1px solid var(--line-strong)}
.lx-card{position:relative;display:grid;align-items:center;column-gap:20px;row-gap:4px;
  grid-template-columns:34px 36px 200px minmax(0,1fr) 190px 64px;
  padding:22px 4px;border-bottom:1px solid var(--line);background:transparent;transition:background .2s,padding .2s}
.lx-card:hover{background:var(--card);padding-left:14px;padding-right:14px}
.lx-card:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.lx-idx{position:static;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--muted-2);transition:color .2s}
.lx-card:hover .lx-idx{color:var(--accent)}
.lx-card-ico{width:36px;height:36px;border-radius:7px;display:grid;place-items:center;color:var(--accent);border:1px solid var(--line-strong);background:transparent}
.lx-card-ico svg{width:19px;height:19px}
.lx-card h3{font-size:20px;letter-spacing:-.02em;font-weight:700;margin:0}
.lx-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.55;max-width:58ch}
.lx-card code{font-family:var(--font-mono);font-size:11.5px;padding:1px 5px;border-radius:4px;background:var(--card-hi);border:1px solid var(--line)}
.lx-tags{display:flex;flex-wrap:wrap;gap:5px;margin:0;padding:0;justify-content:flex-end}
.lx-tags b{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:400;color:var(--muted-2);border:1px solid var(--line);border-radius:4px;padding:3px 6px}
.lx-go{display:inline-flex;align-items:center;justify-content:flex-end;gap:6px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin:0;transition:color .2s}
.lx-go svg{width:13px;height:13px;transition:transform .25s}
.lx-card:hover .lx-go{color:var(--accent)}
.lx-card:hover .lx-go svg{transform:translateX(4px)}

/* ---------- como funciona ---------- */
.lx-how{padding:88px 0;border-top:1px solid var(--line);margin-top:56px}
.lx-how-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:start}
.lx-how-left{position:sticky;top:100px}
.lx-how-left .btn{margin-top:24px}
.lx-steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.lx-step{display:grid;grid-template-columns:48px 1fr;column-gap:12px;padding:24px 0;border-bottom:1px solid var(--line)}
.lx-num{position:static;width:auto;height:auto;display:block;border:0;background:none;border-radius:0;font-family:var(--font-mono);font-size:12px;color:var(--accent);padding-top:4px;letter-spacing:.08em}
.lx-step h3{grid-column:2;font-size:19px;margin:0 0 6px;letter-spacing:-.015em}
.lx-step p{grid-column:2;margin:0;color:var(--muted);font-size:14.5px;line-height:1.6;max-width:46ch}
.lx-step code{font-family:var(--font-mono);font-size:12px;background:var(--card-hi);padding:1px 5px;border-radius:4px}

/* ---------- demo ---------- */
.lx-demo{padding:24px 0 72px}
.lx-demo-box{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:48px;align-items:center;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line);padding:48px 0}
.lx-demo-copy .btn{margin-top:22px}
.lx-demo-stage{border:1px solid var(--line-strong);border-radius:10px;overflow:hidden;background:var(--bg)}
.lx-demo-tabs{display:flex;gap:2px;padding:0 10px;border-bottom:1px solid var(--line);flex-wrap:wrap;background:var(--panel)}
.lx-demo-tabs button{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:11px 9px 9px;margin-bottom:-1px;border:0;border-bottom:2px solid transparent;background:none;color:var(--muted-2);cursor:pointer;transition:color .15s,border-color .15s}
.lx-demo-tabs button:hover{color:var(--text)}
.lx-demo-tabs button.on{color:var(--accent);border-bottom-color:var(--accent)}
.lx-demo-screen{position:relative;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;color:#E9EFFA;--accent:#FFAE1F;--accent-2:#FF8A05}
.lx-demo-bg{position:absolute;inset:0;background:linear-gradient(140deg,#081126,#0B1530 60%,#050A16)}
.lx-demo-content{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;width:78%}
.lx-demo-content b{font-family:var(--font-head);font-size:clamp(13px,1.6vw,19px);letter-spacing:.04em}
.lx-demo-content>span{font-size:11px;color:rgba(233,239,250,.66)}
.lx-demo-content em{font-style:normal;font-family:var(--font-mono);font-size:10.5px;color:#FFC46B}
.lx-loadbar{position:relative;width:100%;height:7px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden;margin-top:4px}
.lx-loadbar-fill{position:absolute;inset:0;width:42%;border-radius:inherit;transition:width .4s ease}
.lx-loadbar-segs{display:none}
.lx-loadbar.bar-grad .lx-loadbar-fill{background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.lx-loadbar.bar-solid .lx-loadbar-fill{background:var(--accent)}
.lx-loadbar.bar-stripes .lx-loadbar-fill{background:repeating-linear-gradient(45deg,var(--accent) 0 8px,var(--accent-2) 8px 16px);background-size:200% 100%;animation:lxStripe 1.1s linear infinite}
@keyframes lxStripe{to{background-position:32px 0}}
.lx-loadbar.bar-line{height:3px;border-radius:2px}
.lx-loadbar.bar-line .lx-loadbar-fill{background:var(--accent)}
.lx-loadbar.bar-segments .lx-loadbar-fill{display:none}
.lx-loadbar.bar-segments .lx-loadbar-segs{display:flex;gap:3px;height:100%;width:100%}
.lx-loadbar .seg{flex:1;background:rgba(255,255,255,.14);border-radius:1px}
.lx-loadbar .seg.on{background:var(--accent)}

/* ---------- faq: lista com fios ---------- */
.lx-faq{padding:48px 0 88px}
.lx-faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px;border-top:1px solid var(--line-strong)}
.lx-faq details{border-bottom:1px solid var(--line);background:transparent;padding:0}
.lx-faq summary{list-style:none;cursor:pointer;padding:20px 0;font-family:var(--font-head);font-weight:600;font-size:16.5px;display:flex;align-items:center;justify-content:space-between;gap:16px;transition:color .15s}
.lx-faq summary:hover{color:var(--accent)}
.lx-faq summary::-webkit-details-marker{display:none}
.lx-faq summary:after{content:"+";font-family:var(--font-mono);color:var(--accent);font-size:18px;transition:transform .25s}
.lx-faq details[open] summary:after{transform:rotate(45deg)}
.lx-faq .ans{padding:0 0 20px;color:var(--muted);font-size:14.5px;line-height:1.65;max-width:52ch}
.lx-faq code{font-family:var(--font-mono);font-size:12px;background:var(--card-hi);padding:1px 5px;border-radius:4px}

/* ---------- cta ---------- */
.lx-cta{padding:24px 0 96px}
.lx-cta-box{text-align:left;padding:56px 48px;border-radius:10px;border:1px solid var(--line-strong);background:var(--panel);display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:48px;align-items:end}
.lx-cta-box>.lx-eyebrow,.lx-cta-box>.lx-cta-h,.lx-cta-box>.lx-sub{grid-column:1}
.lx-cta-box>.lx-actions{grid-column:2;grid-row:1/4;align-self:end;flex-direction:column;align-items:stretch}
.lx-cta-box .lx-sub{margin:0}
.lx-cta-h{font-size:clamp(34px,5.4vw,68px);line-height:1;letter-spacing:-.04em;font-weight:700;margin:14px 0 16px}

/* ---------- revelar (o motion trata da animação; sem JS fica tudo visível) ---------- */
.js .lx-in{opacity:0}
.js .lx-in.on{opacity:1}

/* ---------- responsivo ---------- */
@media (max-width:1080px){
  .lx-hero-wrap{grid-template-columns:1fr;gap:40px}
  .lx-how-grid,.lx-demo-box{grid-template-columns:1fr;gap:32px}
  .lx-how-left{position:static}
  .lx-card{grid-template-columns:30px 36px minmax(0,1fr) auto;grid-template-areas:"idx ico name go" ". . desc desc" ". . tags tags"}
  .lx-card .lx-idx{grid-area:idx}.lx-card .lx-card-ico{grid-area:ico}.lx-card h3{grid-area:name}
  .lx-card p{grid-area:desc}.lx-card .lx-tags{grid-area:tags;padding-top:6px}.lx-card .lx-go{grid-area:go}
  .lx-cta-box{grid-template-columns:1fr}
  .lx-cta-box>.lx-actions{grid-column:1;grid-row:auto;flex-direction:row;margin-top:24px}
}
@media (max-width:720px){
  .lx-hero{padding:112px 0 56px}
  .lx-h1{font-size:clamp(34px,9.4vw,52px);letter-spacing:-.035em}
  .lx-meta{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:6px}
  .lx-meta>div:nth-child(3){padding-left:0;border-left:0}
  .lx-faq-grid{grid-template-columns:1fr}
  .lx-tools{padding:64px 0 20px}
  .lx-how{padding:56px 0;margin-top:32px}
  .lx-cta-box{padding:36px 22px}
  .lx-go{font-size:0;gap:0}
  .lx-tabs button{padding:12px 6px 10px;font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  .js .lx-in{opacity:1}
  .lx-h1 .lx-l>span{animation:none;opacity:1;transform:none}
  .lx-drive i,.lx-bar i:after{animation:none}
  .lx-loadbar.bar-stripes .lx-loadbar-fill{animation:none}
}