/* ============================================================
   juris86 — "Sistema 86"  ·  seções
   ============================================================ */

/* ---------------- Section header (reutilizável) ---------------- */
.shead{ display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:start; margin-bottom:64px; }
.shead .num{ font-family:var(--mono); font-size:.78rem; color:var(--orange); padding-top:8px; white-space:nowrap; }
.shead .ttl{ max-width:18ch; }
.shead .rt{ grid-column:2; max-width:52ch; }
.shead .lead{ margin-top:18px; }

/* ---------------- 01 · Manifesto / O que é ---------------- */
.manifesto{ position:relative; overflow:hidden; }
.manifesto .wm{ font-size:clamp(16rem,30vw,34rem); left:-4%; top:50%; transform:translateY(-50%); }
.mani-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; position:relative; }
.mani-statement{ font-weight:700; letter-spacing:-.025em; line-height:1.1; font-size:clamp(1.6rem,1.1rem + 2vw,2.7rem); }
.mani-statement .ac{ color:var(--orange); }
.mani-statement .dim{ color:var(--faint); }
.mani-media{ position:relative; z-index:2; }
.mani-media .frame{ position:relative; overflow:hidden; border-radius:4px; border:1px solid var(--line-2); }
.mani-media image-slot{ width:100%; height:520px; }
.mani-media .shard{ width:120px; height:170px; left:-22px; bottom:-26px; opacity:.9; }
.mani-media .plate{ position:absolute; z-index:3; right:-18px; top:32px; background:var(--panel); border:1px solid var(--line); padding:14px 18px; font-family:var(--mono); font-size:.74rem; box-shadow:0 20px 50px -24px rgba(0,0,0,.8); }
.mani-media .plate b{ display:block; color:var(--orange); font-size:1.5rem; font-family:var(--sans); letter-spacing:-.03em; margin-bottom:2px; }
.mani-tags{ display:flex; flex-wrap:wrap; gap:9px; margin-top:30px; }
.mani-tags span{ font-family:var(--mono); font-size:.74rem; color:var(--dim); padding:8px 14px; border:1px solid var(--line); border-radius:999px; transition:.25s var(--ease); }
.mani-tags span:hover{ border-color:var(--orange); color:var(--white); transform:translateY(-2px); }

/* ---------------- 02 · Método (pinned scroll) ---------------- */
.method{ position:relative; background:var(--ink-2); }
.method-inner{ display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; align-items:start; }
.method-stick{ position:sticky; top:120px; align-self:start; }
.method-bignum{ position:relative; height:clamp(140px,18vw,230px); margin:24px 0 18px; }
.method-bignum span{ position:absolute; left:0; top:0; font-weight:800; font-size:clamp(9rem,16vw,15rem); line-height:.74; letter-spacing:-.05em; color:var(--orange);
  opacity:0; transform:translateY(28px) scale(.96); transition:opacity .5s var(--ease), transform .6s var(--ease); }
.method-bignum span.on{ opacity:1; transform:none; }
.method-prog{ height:3px; background:var(--line); border-radius:3px; overflow:hidden; margin-top:14px; }
.method-prog i{ display:block; height:100%; width:0; background:var(--orange); box-shadow:0 0 12px var(--glow); transition:width .4s var(--ease); }
.method-steps{ display:flex; flex-direction:column; gap:18px; }
.method-step{ position:relative; padding:38px 36px; border:1px solid var(--line); border-radius:14px; background:var(--panel);
  opacity:.4; transform:scale(.985); transition:opacity .5s var(--ease), transform .5s var(--ease), border-color .5s, box-shadow .5s; }
.method-step.active{ opacity:1; transform:none; border-color:var(--orange); box-shadow:0 0 60px -28px var(--glow); }
.method-step .si{ display:flex; align-items:center; gap:14px; font-family:var(--mono); font-size:.74rem; color:var(--orange); margin-bottom:16px; }
.method-step .si .dash{ flex:1; height:1px; background:var(--line); }
.method-step h3{ font-size:clamp(1.4rem,1rem + 1.4vw,2.1rem); font-weight:700; letter-spacing:-.025em; }
.method-step p{ color:var(--dim); margin:12px 0 0; max-width:46ch; }
.method-step .ico{ position:absolute; right:34px; top:34px; width:46px; height:46px; color:var(--orange); opacity:.25; transition:opacity .5s; }
.method-step.active .ico{ opacity:1; }
.method-step .ico svg{ width:100%; height:100%; }

/* ---------------- 03 · Soluções (sticky explorer) ---------------- */
.sol{ position:relative; overflow:hidden; }
.sol-block{ position:relative; }
.sol-block + .sol-block{ margin-top:30px; }
.sol-head{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 28px; border:1px solid var(--line); border-bottom:0; border-radius:18px 18px 0 0; background:var(--panel-2); }
.sol-head .bk{ font-weight:800; font-size:1.2rem; letter-spacing:-.04em; }
.sol-head .bk .o{ color:var(--orange); }
.sol-head .lbl{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.sol-body{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:0 0 18px 18px; overflow:hidden; }
.sol-rows{ display:flex; flex-direction:column; background:var(--panel); }
.sol-row{ position:relative; text-align:left; background:transparent; border:0; border-bottom:1px solid var(--line); color:var(--white); cursor:pointer; padding:26px 30px; display:flex; align-items:center; gap:18px; transition:background .35s var(--ease); }
.sol-row:last-child{ border-bottom:0; }
.sol-row .ri{ font-family:var(--mono); font-size:.74rem; color:var(--faint); width:30px; flex:none; transition:color .35s; }
.sol-row .rt{ flex:1; font-weight:600; font-size:1.08rem; letter-spacing:-.015em; transition:transform .4s var(--ease); }
.sol-row .ra{ width:22px; height:22px; color:var(--orange); opacity:0; transform:translateX(-8px); transition:opacity .35s, transform .4s var(--ease); }
.sol-row::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--orange); transform:scaleY(0); transform-origin:top; transition:transform .4s var(--ease); }
.sol-row:hover{ background:rgba(255,255,255,.02); }
.sol-row:hover .rt{ transform:translateX(6px); }
.sol-row.on{ background:rgba(232,73,42,.06); }
.sol-row.on::before{ transform:scaleY(1); }
.sol-row.on .ri{ color:var(--orange); }
.sol-row.on .rt{ transform:translateX(6px); }
.sol-row.on .ra{ opacity:1; transform:none; }
.sol-stage{ position:relative; background:var(--ink-2); border-left:1px solid var(--line); min-height:440px; padding:40px; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.sol-stage .pane{ position:absolute; inset:40px; display:flex; flex-direction:column; justify-content:center; opacity:0; transform:translateY(14px); pointer-events:none; transition:opacity .45s var(--ease), transform .5s var(--ease); }
.sol-stage .pane.on{ opacity:1; transform:none; pointer-events:auto; }
.sol-stage .pk{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); }
.sol-stage h3{ font-size:1.6rem; font-weight:700; letter-spacing:-.025em; margin:13px 0 14px; }
.sol-stage p{ color:var(--dim); margin:0 0 22px; font-size:.98rem; max-width:42ch; }
.sol-stage ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; }
.sol-stage li{ display:flex; gap:11px; font-size:.94rem; align-items:flex-start; }
.sol-stage li svg{ width:18px; height:18px; color:var(--orange); flex:none; margin-top:2px; }
.sol-stage .bignum{ position:absolute; right:-2%; bottom:-12%; font-weight:800; font-size:16rem; line-height:.7; color:#fff; opacity:.03; }

/* ---------------- 04 · Prova / Stats (diagonal) ---------------- */
.proof{ position:relative; background:var(--orange); color:var(--on-orange); overflow:hidden; }
.proof::before, .proof::after{ content:""; position:absolute; left:0; right:0; height:8vw; background:var(--ink); z-index:1; }
.proof::before{ top:-1px; clip-path:polygon(0 0,100% 0,100% 0,0 100%); }
.proof::after{ bottom:-1px; clip-path:polygon(0 100%,100% 0,100% 100%,0 100%); }
.proof .wrap{ position:relative; z-index:2; }
.proof-top{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:64px; }
.proof .tag, .proof .tag::before{ color:var(--on-orange); background-color:var(--on-orange); }
.proof .tag{ background:transparent; }
.proof h2{ font-weight:800; letter-spacing:-.03em; }
.proof p{ color:rgba(8,8,10,.72); max-width:44ch; font-weight:500; }
.proof-figs{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1.5px solid rgba(8,8,10,.2); }
.proof-fig{ padding:34px 26px 10px; border-right:1.5px solid rgba(8,8,10,.2); position:relative; }
.proof-fig:last-child{ border-right:0; }
.proof-fig .n{ font-weight:800; font-size:clamp(2.6rem,5vw,4.2rem); line-height:.9; letter-spacing:-.03em; }
.proof-fig .l{ margin-top:14px; font-weight:600; font-size:.95rem; color:rgba(8,8,10,.7); }
.proof-fig .c{ position:absolute; top:14px; right:18px; font-family:var(--mono); font-size:.7rem; color:rgba(8,8,10,.5); }

/* ---------------- 05 · Cases (drag rail) ---------------- */
.cases{ position:relative; overflow:hidden; }
.rail{ display:flex; gap:26px; overflow-x:auto; padding:10px 0 26px; scroll-snap-type:x proximity; cursor:grab; scrollbar-width:none; }
.rail::-webkit-scrollbar{ display:none; }
.rail.drag{ cursor:grabbing; }
.rail-pad{ flex:none; width:max(0px,calc((100vw - var(--maxw))/2)); }
.case{ flex:none; width:270px; scroll-snap-align:center; }
.case .device{ position:relative; border-radius:30px; border:1px solid var(--line-2); background:var(--panel); padding:9px; box-shadow:0 36px 70px -36px rgba(0,0,0,.85); transition:transform .5s var(--ease), box-shadow .5s; }
.case:hover .device{ transform:translateY(-8px); box-shadow:0 44px 80px -34px rgba(0,0,0,.9), 0 0 50px -30px var(--glow); }
.case .device::before{ content:""; position:absolute; top:16px; left:50%; transform:translateX(-50%); width:62px; height:5px; border-radius:3px; background:var(--line-2); z-index:3; }
.case .scr{ border-radius:23px; overflow:hidden; }
.case image-slot{ width:100%; height:440px; }
.case .cap{ margin-top:16px; display:flex; align-items:baseline; justify-content:space-between; }
.case .cap .nm{ font-weight:600; font-size:.98rem; }
.case .cap .ar{ font-family:var(--mono); font-size:.7rem; color:var(--faint); text-transform:uppercase; }
.rail-foot{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:18px; }
.rail-foot .bar{ flex:1; height:2px; background:var(--line); border-radius:2px; position:relative; overflow:hidden; max-width:280px; }
.rail-foot .bar i{ position:absolute; left:0; top:0; height:100%; width:24%; background:var(--orange); border-radius:2px; }
.rail-nav{ display:flex; gap:10px; }
.rail-btn{ width:46px; height:46px; border-radius:50%; border:1px solid var(--line-2); background:transparent; color:var(--white); cursor:pointer; display:grid; place-items:center; transition:.25s var(--ease); }
.rail-btn:hover{ border-color:var(--orange); color:var(--orange); box-shadow:0 0 26px -12px var(--glow); transform:translateY(-2px); }
.rail-btn svg{ width:18px; height:18px; }

/* ---------------- 06 · Time ---------------- */
.team{ position:relative; }
.founders{ display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-bottom:30px; }
.founder{ display:grid; grid-template-columns:160px 1fr; gap:26px; align-items:start; padding:26px; border:1px solid var(--line); border-radius:16px; background:var(--panel); transition:border-color .35s, transform .35s var(--ease); }
.founder:hover{ border-color:var(--line-2); transform:translateY(-4px); }
.founder .pf{ position:relative; overflow:hidden; border-radius:12px; }
.founder image-slot{ width:160px; height:200px; }
.founder .role{ font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--orange); }
.founder h3{ margin:8px 0 12px; font-size:1.34rem; }
.founder p{ margin:0; color:var(--dim); font-size:.9rem; line-height:1.6; }
.crew{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:30px; }
.crew-card{ position:relative; border-radius:14px; overflow:hidden; }
.crew-card .ph{ position:relative; overflow:hidden; }
.crew-card image-slot{ width:100%; height:310px; filter:grayscale(.4) contrast(1.02); transition:filter .5s var(--ease), transform .6s var(--ease); }
.crew-card:hover image-slot{ filter:grayscale(0); transform:scale(1.05); }
.crew-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(transparent 42%,rgba(197,55,27,.12),rgba(8,8,10,.94)); pointer-events:none; }
.crew-card .info{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:18px 16px; transform:translateY(8px); transition:transform .4s var(--ease); }
.crew-card:hover .info{ transform:none; }
.crew-card .nm{ font-weight:700; font-size:1rem; }
.crew-card .rl{ font-family:var(--mono); font-size:.7rem; color:var(--dim); margin-top:3px; text-transform:uppercase; }

/* ---------------- 07 · CTA + Form ---------------- */
.cta{ position:relative; overflow:hidden; background:var(--ink-2); }
.cta .wm{ font-size:clamp(16rem,28vw,32rem); right:-5%; bottom:-16%; }
.cta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; position:relative; }
.steps{ margin-top:34px; display:flex; flex-direction:column; gap:10px; }
.step{ display:flex; gap:20px; align-items:flex-start; padding:22px; border:1px solid var(--line); border-radius:13px; transition:border-color .35s, transform .35s var(--ease), box-shadow .35s; background:var(--panel); }
.step:hover{ border-color:var(--orange); transform:translateX(6px); box-shadow:0 0 50px -28px var(--glow); }
.step .sx{ width:42px; height:42px; flex:none; border-radius:11px; background:var(--glow-soft); color:var(--orange); display:grid; place-items:center; font-weight:700; font-family:var(--mono); }
.step h4{ font-size:1.06rem; margin:0 0 5px; font-weight:600; }
.step p{ margin:0; color:var(--dim); font-size:.9rem; }
.form-card{ position:relative; background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:40px; }
.form-card .glowdot{ width:200px; height:200px; right:-40px; top:-40px; }
.form-card h3{ font-size:1.5rem; margin:0 0 7px; letter-spacing:-.02em; }
.form-card .sub{ color:var(--dim); font-size:.92rem; margin:0 0 28px; }
.field{ position:relative; margin-bottom:8px; padding-top:18px; }
.field input, .field select{ width:100%; background:transparent; border:0; border-bottom:1px solid var(--line-2); color:var(--white); padding:11px 2px; font-family:var(--sans); font-size:1rem; transition:border-color .35s; }
.field select{ color:var(--dim); }
.field input:focus, .field select:focus{ outline:none; border-bottom-color:var(--orange); }
.field label{ position:absolute; left:2px; top:30px; font-size:1rem; color:var(--faint); pointer-events:none; transition:top .3s var(--ease), font-size .3s var(--ease), color .3s; }
.field input:focus + label, .field input.has + label, .field.sel label{ top:0; font-size:.72rem; color:var(--orange); font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.field select option{ background:var(--panel); color:var(--white); }
.form-card .btn{ width:100%; justify-content:center; margin-top:22px; }
.form-note{ font-family:var(--mono); font-size:.72rem; color:var(--faint); margin-top:16px; text-align:center; }

/* ---------------- 08 · FAQ ---------------- */
.faq{ display:grid; grid-template-columns:.85fr 1.15fr; gap:54px; align-items:start; }
.faq-list{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; text-align:left; background:none; border:0; color:var(--white); cursor:pointer; display:flex; justify-content:space-between; gap:20px; align-items:center; padding:24px 4px; font-weight:600; font-size:1.04rem; letter-spacing:-.01em; transition:color .3s, padding-left .3s var(--ease); }
.faq-q:hover{ color:var(--orange); padding-left:8px; }
.faq-q .pm{ width:20px; height:20px; flex:none; position:relative; }
.faq-q .pm::before, .faq-q .pm::after{ content:""; position:absolute; background:var(--orange); transition:.35s var(--ease); }
.faq-q .pm::before{ top:9px; left:0; right:0; height:2px; }
.faq-q .pm::after{ left:9px; top:0; bottom:0; width:2px; }
.faq-item.open .pm::after{ transform:scaleY(0); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease); }
.faq-a .inner{ padding:0 4px 24px; color:var(--dim); font-size:.95rem; max-width:62ch; }

@media (max-width:1000px){
  .mani-grid, .method-inner, .sol-body, .proof-top, .cta-grid, .faq{ grid-template-columns:1fr; }
  .method-stick{ position:relative; top:0; }
  .method-bignum{ height:auto; display:flex; }
  .method-bignum span{ position:relative; opacity:1; transform:none; font-size:6rem; }
  .method-bignum span:not(:first-child){ display:none; }
  .sol-stage{ border-left:0; border-top:1px solid var(--line); min-height:380px; }
  .proof-figs{ grid-template-columns:1fr 1fr; }
  .proof-fig:nth-child(2){ border-right:0; }
  .founders, .crew{ grid-template-columns:1fr 1fr; }
  .shead{ grid-template-columns:1fr; gap:10px; }
  .shead .rt{ grid-column:1; }
}
@media (max-width:600px){
  .founders, .crew, .proof-figs, .founder{ grid-template-columns:1fr; }
  .founder image-slot{ width:100%; height:260px; }
  .proof-fig{ border-right:0; border-bottom:1.5px solid rgba(8,8,10,.2); }
}