/* ===========================================================================
   SuperCota — landing dedicada (bpgsistemas.com.br/supercota)
   Usa os tokens de ../site-v2.css. Aqui ficam só as peças desta página.
   =========================================================================== */

/* ------------------------------- header -------------------------------- */
.sc-hd{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.86); backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:box-shadow .25s, border-color .25s; }
.sc-hd.solid{ box-shadow:0 10px 30px -24px rgba(13,26,58,.55); border-bottom-color:var(--line); }
.sc-hd .inner{ height:74px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.sc-hd .brand{ display:flex; align-items:center; gap:13px; flex:0 0 auto; }
.sc-hd .brand img{ height:34px; width:auto; }
.sc-hd nav{ display:flex; gap:24px; flex:0 1 auto; min-width:0; }
.sc-hd nav a{ color:var(--mute); font-size:14px; font-weight:500; white-space:nowrap; transition:color .15s; }
.sc-hd nav a:hover{ color:var(--navy); }
.sc-hd .cta{ display:flex; gap:11px; align-items:center; flex:0 0 auto; }
.sc-hd .cta .btn{ padding:11px 20px; font-size:14.5px; }
.sc-hd .cta .lbl-sm{ display:none; }

/* barra de progresso de leitura */
.sc-prog{ position:fixed; top:0; left:0; height:3px; width:0; z-index:120; background:linear-gradient(90deg, var(--red), var(--blue)); transition:width .08s linear; }

.sc-hamb{ display:none; background:none; border:none; cursor:pointer; padding:8px; }
.sc-hamb span{ display:block; width:24px; height:2px; background:var(--navy); margin:5px 0; }
.sc-mmenu{ display:none; position:fixed; inset:74px 0 0; z-index:99; background:var(--paper); padding:26px; flex-direction:column; gap:2px; }
.sc-mmenu.open{ display:flex; }
.sc-mmenu a{ color:var(--ink); font-size:19px; font-weight:600; padding:16px 4px; border-bottom:1px solid var(--line); }
.sc-mmenu .btn{ margin-top:18px; }

/* -------------------------------- hero --------------------------------- */
.sc-hero{ position:relative; background:var(--navy); color:#fff; overflow:hidden; padding:88px 0 0; }
.sc-hero .grid-bg{ position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size:56px 56px; mask-image:radial-gradient(900px 620px at 40% 0%, #000 30%, transparent 76%); pointer-events:none; }
.sc-hero .glow{ position:absolute; inset:0; background:radial-gradient(980px 560px at 78% 4%, rgba(43,95,214,.3), transparent 62%), radial-gradient(720px 460px at 4% 96%, rgba(197,55,47,.16), transparent 60%); pointer-events:none; }
.sc-hero .cols{ position:relative; z-index:2; display:grid; grid-template-columns:1.06fr .94fr; gap:60px; align-items:center; padding-bottom:84px; }
.sc-hero .cols > *{ min-width:0; }
.sc-hero h1{ font-size:clamp(36px,4.5vw,58px); letter-spacing:-.035em; margin-top:24px; }
.sc-hero h1 mark{ background:var(--red); color:#fff; border-radius:9px; padding:0 12px 3px; }
.sc-hero .sub{ margin-top:26px; font-size:19px; line-height:1.62; color:rgba(255,255,255,.78); max-width:540px; }
.sc-trust{ margin-top:34px; display:flex; gap:10px; flex-wrap:wrap; }
.sc-trust span{ display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:500; color:rgba(255,255,255,.8); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:30px; padding:9px 16px; }
.sc-trust span svg{ width:15px; height:15px; color:#5BBB7B; flex:0 0 auto; }

/* ------------------------- formulário de demo -------------------------- */
.sc-form{ background:#fff; color:var(--ink); border-radius:20px; padding:32px; box-shadow:0 60px 120px -45px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.07); }
.sc-form h2{ font-size:25px; letter-spacing:-.025em; }
.sc-form .fsub{ margin-top:8px; font-size:14.5px; color:var(--mute); }
.sc-form .fields{ margin-top:24px; display:grid; gap:15px; }
.sc-form label{ display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:7px; }
.sc-form label i{ font-style:normal; font-weight:400; color:var(--mute); }
.sc-form input{ width:100%; height:48px; border:1.5px solid var(--line-2); border-radius:11px; padding:0 15px; font-family:inherit; font-size:15px; color:var(--ink); background:#FCFBF8; transition:border-color .18s, box-shadow .18s; }
.sc-form input::placeholder{ color:#A2A8B4; }
.sc-form input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(27,77,190,.13); background:#fff; }
.sc-form input:user-invalid{ border-color:var(--red); }
.sc-form .btn{ width:100%; margin-top:22px; }
.sc-form .fnote{ margin-top:15px; font-size:12.5px; color:var(--mute); text-align:center; }
.sc-form .ferr{ display:none; margin-top:14px; background:var(--red-pale); border:1px solid #F0C4C0; color:#8E241F; border-radius:11px; padding:12px 15px; font-size:13.5px; }
.sc-form .ferr.on{ display:block; }

/* ---------------------------- prova social ----------------------------- */
.sc-social{ background:var(--navy-2); color:#fff; padding:0; }
.sc-social .inner{ display:grid; grid-template-columns:auto 1fr; gap:52px; align-items:center; padding:44px 0 40px; }
.sc-social .big{ font-size:56px; font-weight:700; letter-spacing:-.04em; color:#fff; line-height:1; }
.sc-social .lb{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-top:7px; }
.sc-social .say{ font-size:20px; color:rgba(255,255,255,.82); letter-spacing:-.02em; }

/* --------------------------- problema (3 cards) ------------------------- */
.sc-prob{ background:var(--paper); }
.sc-cards3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.sc-card{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:34px 30px; transition:transform .2s var(--ease), box-shadow .2s; }
.sc-card:hover{ transform:translateY(-5px); box-shadow:0 26px 52px -30px rgba(13,26,58,.4); }
.sc-card .ic{ width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.sc-card .ic svg{ width:23px; height:23px; }
.sc-card h3{ font-size:19px; margin-bottom:10px; letter-spacing:-.015em; }
.sc-card p{ font-size:14.5px; color:var(--mute); line-height:1.6; }
.sc-solve{ margin-top:46px; text-align:center; font-size:clamp(24px,2.8vw,34px); font-weight:700; letter-spacing:-.03em; color:var(--navy); }

/* ---------------------------- como funciona ---------------------------- */
.sc-how{ background:var(--navy); color:#fff; position:relative; overflow:hidden; }
.sc-how .glow{ position:absolute; inset:0; background:radial-gradient(900px 520px at 80% 12%, rgba(43,95,214,.26), transparent 60%), radial-gradient(700px 440px at 10% 92%, rgba(197,55,47,.14), transparent 58%); pointer-events:none; }
.sc-how .grid-bg{ position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size:52px 52px; mask-image:radial-gradient(800px 500px at 50% 0%, #000 30%, transparent 76%); pointer-events:none; }
.sc-how .wrap{ position:relative; z-index:2; }
.sc-how .sec-head h2{ color:#fff; }
.sc-how .sec-head p{ color:rgba(255,255,255,.72); }
.sc-how .cols{ display:grid; grid-template-columns:.86fr 1.14fr; gap:64px; align-items:center; }
.sc-how .cols > *{ min-width:0; }
.sc-steps{ display:grid; gap:0; }
.sc-step{ display:flex; gap:20px; padding:22px 0; border-bottom:1px solid rgba(255,255,255,.11); }
.sc-step:last-child{ border-bottom:none; }
.sc-step .n{ font-family:'Space Mono',monospace; font-weight:700; font-size:13px; color:#fff; background:rgba(43,95,214,.42); border:1px solid rgba(110,146,232,.5); width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.sc-step:nth-child(2) .n{ background:rgba(197,55,47,.36); border-color:rgba(224,91,82,.5); }
.sc-step:nth-child(3) .n{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28); }
.sc-step b{ display:block; font-size:17.5px; margin-bottom:5px; letter-spacing:-.015em; }
.sc-step span{ font-size:14.5px; color:rgba(255,255,255,.68); line-height:1.58; }
.sc-how .acts{ margin-top:34px; }

/* --------------------------- funcionalidades --------------------------- */
.sc-feat{ background:#fff; border-top:1px solid var(--line); }
.sc-fgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); border-radius:22px; overflow:hidden; background:#fff; }
.sc-fcell{ padding:36px 32px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .2s; }
.sc-fcell:nth-child(3n){ border-right:none; }
.sc-fcell:nth-child(n+4){ border-bottom:none; }
.sc-fcell:hover{ background:#FCFBF8; }
.sc-fcell .ic{ width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.sc-fcell .ic svg{ width:23px; height:23px; }
.sc-fcell h3{ font-size:18.5px; margin-bottom:9px; letter-spacing:-.015em; }
.sc-fcell p{ font-size:14.5px; color:var(--mute); line-height:1.6; }
.sc-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:15px; }
.sc-tags span{ font-family:'Space Mono',monospace; font-size:11px; font-weight:700; letter-spacing:.05em; padding:7px 12px; border:1.5px solid var(--line-2); border-radius:9px; background:#FCFBF8; color:var(--navy); }

/* ----------------------------- conformidade ---------------------------- */
.sc-comp{ background:var(--paper-2); }
.sc-comp .box{ background:linear-gradient(155deg, var(--navy), var(--navy-3)); color:#fff; border-radius:26px; padding:60px; display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center; position:relative; overflow:hidden; }
.sc-comp .box::after{ content:""; position:absolute; inset:0; background:radial-gradient(640px 380px at 88% 8%, rgba(43,95,214,.24), transparent 60%); pointer-events:none; }
.sc-comp .box > *{ position:relative; z-index:2; min-width:0; }
.sc-comp h2{ font-size:clamp(28px,3.4vw,42px); margin:18px 0 16px; }
.sc-comp p.lead{ color:rgba(255,255,255,.76); font-size:17.5px; line-height:1.62; }
.sc-comp .bl{ display:grid; gap:14px; }
.sc-comp .brow{ display:flex; align-items:flex-start; gap:16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:15px; padding:17px 19px; }
.sc-comp .brow .ic{ width:44px; height:44px; border-radius:12px; background:rgba(43,95,214,.3); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.sc-comp .brow .ic svg{ width:22px; height:22px; color:#fff; }
.sc-comp .brow b{ font-size:15.5px; display:block; margin-bottom:3px; }
.sc-comp .brow span{ font-size:13.5px; color:rgba(255,255,255,.66); line-height:1.5; }

/* ---------------------------- como contratar --------------------------- */
.sc-hire{ background:var(--paper); }
.sc-etapas{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.sc-etapa{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:32px 28px; position:relative; transition:transform .2s var(--ease), box-shadow .2s; }
.sc-etapa:hover{ transform:translateY(-5px); box-shadow:0 26px 52px -30px rgba(13,26,58,.4); }
.sc-etapa .et{ font-family:'Space Mono',monospace; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); }
.sc-etapa:nth-child(2) .et{ color:var(--red); }
.sc-etapa:nth-child(3) .et{ color:var(--navy); }
.sc-etapa h4{ font-size:19px; margin:12px 0 9px; letter-spacing:-.015em; }
.sc-etapa p{ font-size:14.5px; color:var(--mute); line-height:1.6; }
.sc-hire .acts{ margin-top:40px; display:flex; justify-content:center; }

/* -------------------------------- FAQ ---------------------------------- */
.sc-faq{ background:#fff; border-top:1px solid var(--line); }
.sc-faq .list{ max-width:860px; margin:0 auto; border:1px solid var(--line); border-radius:20px; overflow:hidden; }
.sc-faq details{ border-bottom:1px solid var(--line); }
.sc-faq details:last-child{ border-bottom:none; }
.sc-faq summary{ list-style:none; cursor:pointer; padding:24px 28px; font-size:17px; font-weight:600; letter-spacing:-.015em; color:var(--navy); display:flex; justify-content:space-between; align-items:center; gap:20px; transition:background .18s; }
.sc-faq summary::-webkit-details-marker{ display:none; }
.sc-faq summary:hover{ background:#FCFBF8; }
.sc-faq summary::after{ content:""; width:11px; height:11px; border-right:2.2px solid var(--blue); border-bottom:2.2px solid var(--blue); transform:rotate(45deg); flex:0 0 auto; margin-top:-4px; transition:transform .22s var(--ease); }
.sc-faq details[open] summary::after{ transform:rotate(225deg); margin-top:4px; }
.sc-faq .ans{ padding:0 28px 26px; font-size:15.5px; color:var(--mute); line-height:1.66; max-width:720px; }

/* ------------------------------ CTA final ------------------------------ */
.sc-fin{ background:var(--paper); text-align:center; padding-bottom:124px; }
.sc-fin .box{ background:var(--navy); border-radius:28px; padding:80px 44px; position:relative; overflow:hidden; }
.sc-fin .box::before{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size:52px 52px; mask-image:radial-gradient(700px 420px at 50% 0%, #000 30%, transparent 78%); }
.sc-fin .box::after{ content:""; position:absolute; inset:0; background:radial-gradient(700px 420px at 50% 0%, rgba(43,95,214,.26), transparent 60%); }
.sc-fin h2{ position:relative; z-index:2; color:#fff; font-size:clamp(30px,4.2vw,50px); margin-bottom:18px; letter-spacing:-.03em; }
.sc-fin p{ position:relative; z-index:2; color:rgba(255,255,255,.75); font-size:19px; max-width:600px; margin:0 auto 34px; line-height:1.6; }
.sc-fin .acts{ position:relative; z-index:2; display:flex; gap:15px; justify-content:center; flex-wrap:wrap; }

/* ------------------------------- rodapé -------------------------------- */
.sc-ft{ background:var(--navy-2); color:rgba(255,255,255,.66); padding:56px 0 30px; }
.sc-ft .top{ display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap; padding-bottom:34px; border-bottom:1px solid rgba(255,255,255,.1); }
.sc-ft .lock{ display:flex; align-items:center; gap:18px; }
.sc-ft .lock img{ height:38px; width:auto; filter:brightness(0) invert(1); }
.sc-ft .lock .sep{ width:1.5px; height:32px; background:rgba(255,255,255,.2); }
.sc-ft .lock .endo{ font-size:13.5px; color:rgba(255,255,255,.7); }
.sc-ft .lock .endo b{ color:#fff; }
.sc-ft .lks{ display:flex; gap:26px; flex-wrap:wrap; }
.sc-ft .lks a{ color:rgba(255,255,255,.7); font-size:14.5px; }
.sc-ft .lks a:hover{ color:#fff; }
.sc-ft .bot{ padding-top:24px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12.5px; color:rgba(255,255,255,.45); }

/* --------------------------- voltar ao topo ---------------------------- */
.sc-top{ position:fixed; right:26px; bottom:26px; width:48px; height:48px; border-radius:50%; background:var(--navy); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .25s, transform .2s var(--ease); box-shadow:0 16px 34px -14px rgba(0,0,0,.6); z-index:90; }
.sc-top.on{ opacity:1; pointer-events:auto; }
.sc-top:hover{ transform:translateY(-3px); }
.sc-top svg{ width:20px; height:20px; }

/* ------------------------------ responsivo ----------------------------- */
@media (max-width:1060px){
  .sc-hero .cols, .sc-how .cols, .sc-comp .box{ grid-template-columns:1fr; }
  .sc-cards3, .sc-etapas{ grid-template-columns:1fr; }
  .sc-fgrid{ grid-template-columns:1fr 1fr; }
  .sc-fcell:nth-child(3n){ border-right:1px solid var(--line); }
  .sc-fcell:nth-child(2n){ border-right:none; }
  .sc-fcell:nth-child(n+4){ border-bottom:1px solid var(--line); }
  .sc-fcell:nth-child(n+5){ border-bottom:none; }
  .sc-comp .box{ padding:44px; }
  .sc-social .inner{ grid-template-columns:1fr; gap:22px; }
}
@media (max-width:1140px){
  .sc-hd nav, .sc-hd .cta .btn-line{ display:none; }
  .sc-hamb{ display:block; }
}
@media (max-width:700px){
  .sc-hd .brand img{ height:27px; }
  .sc-hd .cta .btn{ padding:10px 15px; font-size:13.5px; }
  .sc-hd .cta .lbl-lg{ display:none; }
  .sc-hd .cta .lbl-sm{ display:inline; }
  .sc-hero{ padding-top:56px; }
  .sc-form{ padding:26px 22px; }
  .sc-fgrid{ grid-template-columns:1fr; }
  .sc-fcell{ border-right:none !important; border-bottom:1px solid var(--line) !important; }
  .sc-fcell:last-child{ border-bottom:none !important; }
  .sc-comp .box{ padding:32px; }
  .sc-fin .box{ padding:60px 26px; }
  .sc-faq summary{ padding:20px; font-size:16px; }
  .sc-faq .ans{ padding:0 20px 22px; }
  .sc-social .big{ font-size:44px; }
}