/* Stratta Pay — site institucional (strattapay.com.br).
   Estrutura do modelo comercial da Stratta; cores do banking e do console (azul).
   A variável --lime guarda o destaque em fundo escuro (#b5b2ff, o --ev-hero-accent do banking). */
:root{
  /* Paleta do banking e do console (design system ev-*): azul-marinho, azul da marca e lilás-azulado. */
  --navy:#0b1535;--deep:#070e26;--surface:#16224a;--surface-2:#111b3f;--border:#2a3a66;
  --brand:#1b17ff;--brand-hover:#1410d6;--lime:#b5b2ff;--lime-ink:#1b17ff;--paper:#f1f3f9;--white:#fff;
  --text:#eef2fb;--muted:#bec9e1;--soft:#8e9bbb;--shadow:0 25px 85px #02081c80
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--navy);color:var(--white);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}
a{color:inherit;text-decoration:none}
button{cursor:pointer}
img{max-width:100%}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
::selection{background:var(--brand);color:#fff}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.container{width:min(1180px,calc(100% - 52px));margin:auto}
.skip{position:absolute;left:-999px;top:5px;background:var(--brand);color:#fff;z-index:50;padding:10px}
.skip:focus{left:10px}

/* Cabeçalho */
.header{position:sticky;top:0;z-index:25;background:#0b1535e8;border-bottom:1px solid #ffffff12;backdrop-filter:blur(18px)}
.nav{min-height:84px;display:flex;align-items:center;justify-content:space-between;gap:26px}
.brand img{display:block;width:150px;height:auto}
.menu{display:flex;align-items:center;gap:26px}
.menu a{font-size:12px;font-weight:500;color:#d3dcf0;transition:color .2s}
.menu a:hover{color:var(--lime)}
.menu a.nav-login{border:1px solid #3d4f80;border-radius:10px;padding:14px 17px;font-weight:600}
.menu a.nav-cta{background:var(--brand);color:#fff;border-radius:10px;padding:15px 19px;font-weight:700}
.menu a.nav-cta:hover{color:#fff;background:var(--brand-hover)}
.nav-cta span{margin-left:8px}
.menu-toggle{display:none}

/* Topo */
.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 12% 0%,#1b17ff3d 0%,transparent 38%),radial-gradient(circle at 92% 30%,#b5b2ff1c 0%,transparent 34%),linear-gradient(120deg,#08122e,#0b1535 60%,#0f1c45);padding:76px 0 88px}
.hero-lines{position:absolute;right:-130px;top:-220px;width:520px;height:520px;border:1px solid #b5b2ff40;border-radius:50%;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;align-items:center;gap:42px}
.eyebrow,.kicker{font-size:11px;letter-spacing:.21em;font-weight:700;color:var(--lime)}
.eyebrow{display:flex;gap:11px;align-items:center}
.lime-dot{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 16px var(--lime)}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(36px,4.3vw,60px);line-height:1.14;letter-spacing:-.05em;margin:27px 0 22px;font-weight:700}
h1 em{font-style:normal;color:var(--lime)}
.lead{max-width:585px;font-size:16px;line-height:1.85;color:#d5ddef;margin-bottom:30px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;border-radius:10px;padding:17px 22px;font-size:12px;font-weight:700;border:1px solid transparent;transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-hover)}
.btn-outline{border-color:#3d4f80;color:white;background:#ffffff05}
.btn-outline:hover{background:#ffffff13}
.hero-proof{display:flex;gap:20px;margin-top:50px}
.hero-proof div{min-width:0;padding-right:18px;border-right:1px solid #2a3a66}
.hero-proof div:last-child{border:0}
.hero-proof strong{font-size:12px;display:block;white-space:nowrap}
.hero-proof span{display:block;color:var(--soft);font-size:10px;margin-top:4px}

/* Ilustração da conta com subcontas */
.hero-visual{position:relative;min-height:500px;display:flex;align-items:center;justify-content:center}
.art-grid{position:absolute;inset:20px;background-image:radial-gradient(#b5b2ff2e 1px,transparent 1px);background-size:22px 22px;mask-image:radial-gradient(circle at 55% 55%,#000 5%,transparent 75%)}
.orb{position:absolute;border-radius:50%;filter:blur(4px)}
.orb-one{width:380px;height:380px;background:radial-gradient(#1b17ff3a,transparent 66%);top:40px;left:40px}
.orb-two{width:270px;height:270px;border:1px solid #b5b2ff48;right:15px;bottom:25px}
.account-card{z-index:1;width:min(430px,100%);background:linear-gradient(160deg,#f6f8fd,#e3e8f7);color:#0b1535;border-radius:22px;box-shadow:var(--shadow);padding:18px;transform:rotate(-2.5deg)}
.account-main{display:flex;align-items:center;gap:14px;background:white;border-radius:16px;padding:16px 18px;box-shadow:0 8px 20px #0b153514}
.account-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#1b17ff;color:white;flex-shrink:0}
.account-icon svg{width:22px;height:22px}
.account-main small{display:block;font-size:12px;color:#596984}
.account-main b{font-size:22px;letter-spacing:-.02em}
.sub-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.sub-list li{display:flex;align-items:center;gap:12px;background:#ffffffc9;border-radius:13px;padding:12px 14px}
.sub-list li div{min-width:0;flex:1}
.sub-list b{display:block;font-size:13px}
.sub-list small{font-size:12px;color:#596984}
.sub-dot{width:30px;height:30px;border-radius:50%;flex-shrink:0}
.dot-blue{background:#2f7be0}.dot-green{background:#1f9a63}.dot-purple{background:#6d5bff}
.sub-tag{font-size:10px;font-weight:600;background:#e4e6ff;color:#1410d6;border-radius:20px;padding:5px 9px;white-space:nowrap}
.account-caption{display:block;text-align:right;font-size:9px;color:#62728a;margin-top:10px}
.floating-note{position:absolute;z-index:2;right:-10px;bottom:34px;background:var(--brand);color:#fff;padding:16px 20px;border-radius:9px;font-size:12px;font-weight:700;box-shadow:0 17px 35px #0006;transform:rotate(3deg)}
.note-symbol{margin-right:10px}

.trust-line{border-top:1px solid #2a3a6633;border-bottom:1px solid #2a3a6633;background:#0e1840}
.trust-line .container{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:21px 0;font-size:11px;letter-spacing:.21em;font-weight:700;color:#dbe3f3}
.trust-line b{color:var(--lime);font-size:18px}

/* Seções */
.section{padding:105px 0;scroll-margin-top:90px}
.split,.bpo-grid,.faq-layout,.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.split{align-items:start}
.section h2{font-size:clamp(30px,3.2vw,46px);line-height:1.23;letter-spacing:-.045em;margin:19px 0 22px}
.section h2 span{color:var(--lime)}
.section-intro p,.lots-section p,.faq-layout>div>p,.contact-copy>p{color:var(--muted);line-height:1.9;font-size:14px;max-width:520px}
.text-link{display:inline-flex;gap:16px;color:var(--lime);font-size:13px;font-weight:700;margin-top:22px}
.usecases{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.usecases span{font-size:11px;font-weight:600;color:var(--lime);background:#b5b2ff14;border:1px solid #b5b2ff4d;border-radius:30px;padding:8px 13px}
.feature{display:flex;gap:22px;align-items:flex-start;padding:22px 8px;border-bottom:1px solid #2a3a6699}
.feature:first-child{border-top:1px solid #2a3a6699}
.feature-index{color:var(--lime);font-size:12px;font-weight:700;padding-top:3px}
.feature h3{font-size:17px;margin:0 0 8px}
.feature p{font-size:12.5px;line-height:1.8;color:var(--muted);margin:0}

/* Pagar e receber (fundo claro) */
.services-section{background:var(--paper);color:var(--deep)}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:38px}
.section-heading h2{margin-bottom:0}
.section-heading p{max-width:370px;font-size:13px;color:#596984;line-height:1.8;margin:0}
.services-section .kicker{color:var(--lime-ink)}
.services-section h2 span{color:#1b17ff}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.service-card{padding:28px 25px 24px;min-height:240px;background:white;border:1px solid #e3e8f2;border-radius:14px;transition:transform .2s,box-shadow .2s}
.service-card:hover{transform:translateY(-4px);box-shadow:0 15px 40px #0b153514}
.service-icon{width:47px;height:47px;display:grid;place-items:center;border-radius:10px;background:#ececff;color:#1b17ff;margin-bottom:23px}
.service-icon svg{width:24px;height:24px}
.service-card small{font-size:9px;letter-spacing:.17em;color:#62728a;font-weight:700}
.service-card h3{font-size:18px;margin:6px 0 10px}
.service-card p{font-size:12.5px;color:#596984;line-height:1.8;margin:0}
.service-disclaimer{font-size:10px;color:#62728a;margin-top:25px}

/* Pagamentos em lote */
.lots-section{background:linear-gradient(125deg,#08122e,#16224a)}
.lots-section .muted{font-size:12px;color:var(--soft);margin-bottom:25px}
.bpo-board{background:#070e2699;border-radius:17px;border:1px solid #2a3a66;padding:26px;box-shadow:var(--shadow)}
.board-head{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:11px;font-weight:700;letter-spacing:.1em;padding-bottom:22px;border-bottom:1px solid #2a3a66}
.board-chip{font-size:9px;letter-spacing:0;background:#b5b2ff1f;border:1px solid #b5b2ff66;padding:7px 11px;border-radius:40px;color:var(--lime);white-space:nowrap}
.board-row{display:flex;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid #2a3a6688}
.board-row:last-child{border-bottom:0}
.check-symbol{display:grid;place-items:center;flex-shrink:0;width:31px;height:31px;border-radius:50%;color:var(--lime);background:#b5b2ff16;border:1px solid #b5b2ff66}
.board-row b{display:block;font-size:13px}
.board-row div span{font-size:11.5px;color:var(--soft)}

/* Para quem */
.audience-section{background:var(--navy)}
.audience-section .section-heading p{color:var(--muted)}
.audience-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.audience-card{display:flex;flex-direction:column;background:linear-gradient(160deg,#16224a,#0f1a40);border:1px solid #2a3a66;border-radius:18px;padding:32px 30px}
.audience-tag{align-self:flex-start;font-size:9px;letter-spacing:.17em;font-weight:700;color:var(--lime);background:#b5b2ff14;border:1px solid #b5b2ff4d;border-radius:30px;padding:7px 12px}
.audience-card h3{font-size:24px;margin:20px 0 10px}
.audience-card p{font-size:13px;color:var(--muted);line-height:1.8}
.audience-card ul{list-style:none;padding:0;margin:6px 0 26px;display:flex;flex-direction:column;gap:11px}
.audience-card li{position:relative;padding-left:24px;font-size:13px;color:var(--text)}
.audience-card li:before{content:'›››';position:absolute;left:0;top:0;color:var(--lime);font-weight:800;font-size:11px;letter-spacing:-2px}
.audience-card .btn{margin-top:auto;align-self:flex-start}

/* Como abrir */
.how-section{background:#0e1840}
.how-section .section-heading p{color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.step{background:#16224a;border-radius:12px;border:1px solid #2a3a66;padding:26px 23px 30px;min-height:220px}
.step>span{font-size:30px;color:var(--lime);font-weight:700;display:block;margin-bottom:30px}
.step h3{font-size:16px;margin-bottom:9px}
.step p{font-size:12.5px;line-height:1.8;color:var(--muted);margin:0}

/* Perguntas */
.faq-section{background:var(--paper);color:var(--deep)}
.faq-section .kicker{color:var(--lime-ink)}
.faq-section h2 span{color:#1b17ff}
.faq-layout{align-items:start}
.faq-layout>div>p{color:#596984}
.faq-list details{border-bottom:1px solid #d5dbe8}
.faq-list details:first-child{border-top:1px solid #d5dbe8}
.faq-list summary{cursor:pointer;list-style:none;font-size:14px;font-weight:700;display:flex;justify-content:space-between;gap:12px;padding:22px 0}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:after{content:'+';font-size:20px;font-weight:400;color:#1b17ff}
.faq-list details[open] summary:after{content:'−'}
.faq-list details p{font-size:13px;line-height:1.9;color:#596984;margin-bottom:22px}

/* Contato */
.contact-section{background:linear-gradient(120deg,#08122e,#16224a)}
.contact-grid{grid-template-columns:.85fr 1.15fr;align-items:start;gap:65px}
.contact-people{display:flex;gap:15px;align-items:center;margin-top:46px}
.avatar{width:47px;height:47px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#fff;font-size:15px;font-weight:800;flex-shrink:0}
.contact-people b,.contact-people span,.contact-people a{display:block}
.contact-people b{font-size:13px}
.contact-people span{font-size:11px;color:var(--soft)}
.contact-people a{font-size:12px;color:var(--lime);margin-top:4px}
.contact-mail{display:flex;flex-direction:column;gap:9px;margin-top:28px;font-size:12px;color:#cdd6ea}
.contact-mail a:hover{color:var(--lime)}
.form-card{background:var(--paper);color:var(--deep);padding:35px;border-radius:18px;box-shadow:var(--shadow)}
.form-pill{font-size:9px;color:var(--lime-ink);background:#ececff;border-radius:50px;padding:8px 12px;letter-spacing:.12em;font-weight:700}
.form-header h3{font-size:26px;margin:22px 0 7px}
.form-header p{font-size:12px;color:#596984;margin-bottom:25px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 15px;align-items:start}
.form-card .field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;min-width:0}
.field-label{display:block;font-size:11px;font-weight:600;line-height:1.3;color:var(--deep)}
.field-label small{font-size:inherit;font-weight:400;color:#62728a}
.req{color:#1b17ff;font-weight:700}
.form-card input,.form-card select,.form-card textarea{display:block;width:100%;margin:0;border:1px solid #cdd4e2;background:#fff;border-radius:8px;padding:0 12px;height:46px;color:#0b1535;outline:none;font-size:13px;font-weight:400;line-height:1.4;box-shadow:none;transition:border-color .15s,box-shadow .15s}
.form-card textarea{height:auto;min-height:92px;padding:12px;resize:vertical}
.form-card select{-webkit-appearance:none;appearance:none;padding-right:38px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23596984' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.form-card select:invalid{color:#8a94a8}
.form-card select option{color:#0b1535}
.form-card ::placeholder{color:#8a94a8;opacity:1}
.form-card :is(input,select,textarea):hover{border-color:#aab4ca}
.form-card :is(input,select,textarea):focus,.form-card :is(input,select,textarea):focus-visible{border-color:#1b17ff;box-shadow:0 0 0 3px #b5b2ff80;outline:none}
.form-card .was-validated :is(input,select,textarea):invalid{border-color:#c94a4a}
.form-card .was-validated :is(input,select,textarea):invalid:focus{box-shadow:0 0 0 3px #c94a4a33}
.submit-btn{width:100%;margin-top:8px}
.btn-outline-dark{border-color:#0b1535;color:#0b1535;background:transparent}
.btn-outline-dark:hover{background:#0b15350d}
.form-card .consent{display:flex;flex-direction:row;align-items:flex-start;gap:10px;margin:2px 0 16px;font-size:11px;color:#596984;line-height:1.65;font-weight:400;cursor:pointer}
.form-card .consent input{flex:0 0 auto;width:16px;height:16px;padding:0;margin:2px 0 0;accent-color:#1b17ff;cursor:pointer}
.consent-text{color:#596984}
.consent a{color:#1410d6;text-decoration:underline}
.honeypot{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-message.success{color:#087b59}
[hidden]{display:none!important}
.form-message{min-height:16px;margin:14px 0 0;font-size:12px}
.form-message.error{color:#a62d2d}
.form-footnote{font-size:11px;color:#62728a;margin:10px 0 0;text-align:center}
.form-footnote a{color:#1410d6;text-decoration:underline}

/* Rodapé */
.footer{background:#060c22;border-top:1px solid #2a3a66}
.footer-main{padding:56px 0;display:flex;justify-content:space-between;gap:45px}
.footer-logo{width:150px;height:auto}
.footer-main p{font-size:12px;color:var(--soft);margin-top:15px}
.footer-links{display:flex;flex-direction:column;gap:13px;font-size:12px;color:#c9d3ea}
.footer-links a:hover{color:var(--lime)}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #1f2c55;padding:20px 0 25px;color:#8391b3;font-size:10.5px}

.reveal{animation:appear .55s ease both}
@keyframes appear{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{animation:none}.btn,.service-card{transition:none}}

@media(max-width:1080px){
  .menu{gap:14px}.menu a{font-size:11px}
  .hero-grid{gap:10px}.hero-proof{gap:10px}.hero-proof span{font-size:9px}
  .split,.bpo-grid,.faq-layout,.contact-grid{gap:35px}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .container{width:min(100% - 32px,600px)}
  .nav{min-height:72px}.brand img{width:125px}
  .menu-toggle{display:flex;flex-direction:column;gap:5px;background:none;border:0;padding:8px}
  .menu-toggle span{height:2px;width:24px;background:white}
  .menu{display:none;position:absolute;left:0;right:0;top:71px;background:#0b1535;flex-direction:column;align-items:stretch;gap:0;padding:15px 22px 25px;box-shadow:0 14px 25px #0006}
  .menu.open{display:flex}
  .menu a{padding:13px 0;font-size:14px}
  .menu a.nav-login,.menu a.nav-cta{padding:15px;text-align:center;margin-top:10px}
  .hero{padding:50px 0 66px}
  .hero-grid,.split,.bpo-grid,.faq-layout,.contact-grid,.audience-grid{grid-template-columns:1fr}
  .hero-visual{min-height:400px}
  .floating-note{right:0;bottom:6px}
  .hero-proof{flex-wrap:wrap;margin-top:34px}.hero-proof div{padding-right:9px}
  .trust-line .container{flex-wrap:wrap;justify-content:center;font-size:9px}
  .section{padding:72px 0}
  .section-heading{display:block}.section-heading p{margin-top:18px}
  .services-grid,.steps{grid-template-columns:1fr}
  .step,.service-card{min-height:0}
  .form-card{padding:25px 20px}
  .form-row{grid-template-columns:1fr;gap:0}
  .form-card input,.form-card select,.form-card textarea{font-size:16px}
  .footer-main{flex-direction:column;gap:30px}
  .footer-bottom{flex-direction:column}
  .contact-grid{gap:40px}
}
@media(max-width:420px){
  h1{font-size:33px}
  .btn{width:100%}
  .audience-card .btn{align-self:stretch}
  .account-card{padding:12px}
  .account-main b{font-size:19px}
  .sub-tag{display:none}
  .board-head{flex-direction:column;align-items:flex-start}
}