:root{--ink:#19152b;--muted:#57526a;--accent:#5d35d5;--purple:#a887ff;--line:#e9e3f2;--paper:#fcfbfe;--deep:#1b1231}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6}a{color:inherit}img,video{display:block;max-width:100%}img{height:auto}figure,p,h1,h2,h3{margin:0}button{font:inherit}a:focus-visible,button:focus-visible,summary:focus-visible,video:focus-visible{outline:3px solid #a778ff;outline-offset:4px}.skip{position:absolute;top:-60px;z-index:4;background:white;padding:8px}.skip:focus{top:4px}.wrap{width:min(1240px,calc(100% - 88px));margin-inline:auto}header{position:sticky;top:0;z-index:3;background:#fcfbfef5;border-bottom:1px solid var(--line);backdrop-filter:blur(15px)}.bar{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{flex:none}.brand img{width:108px}nav{display:flex;gap:30px}nav a,footer a{font-size:.88rem;text-decoration:none;font-weight:650}nav a:hover,footer a:hover{text-decoration:underline}.button,.secondary{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:750;text-decoration:none;border-radius:9px;padding:13px 17px;font-size:.92rem;min-height:48px}.button{background:var(--accent);color:white}.button:hover{background:#4925b3}.small{min-height:42px;padding:8px 13px;font-size:.83rem}.secondary{border:1px solid #dcd3ed;color:var(--accent);background:white}.secondary:hover{background:#efe8ff}.hero{background:radial-gradient(ellipse at 80% 35%,#eee6ff 0,transparent 58%),linear-gradient(135deg,#fff,#f6f1ff);padding:83px 0 67px}.hero-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:35px;align-items:center}.eyebrow{display:flex;align-items:center;gap:9px;text-transform:uppercase;font-size:.72rem;letter-spacing:.13em;font-weight:800;color:#6240a3;margin-bottom:16px}.eyebrow span,.screen-label i{width:8px;height:8px;border-radius:50%;background:#9164fb;flex:none}.hero h1{font-size:clamp(3.15rem,5.65vw,6.3rem);font-weight:800;line-height:.99;letter-spacing:-.078em}.hero h1 em{display:block;color:var(--accent);font-style:normal}.hero-copy>p:not(.eyebrow){max-width:480px;margin-top:23px;font-size:1.13rem;color:var(--muted)}.actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}.hero-art{border:1px solid #e1d5fc;border-radius:22px;background:radial-gradient(ellipse at 48% 52%,#fff 10%,#e5d8ff 75%);padding:18px;min-width:0;box-shadow:0 18px 42px #51239c14}.hero-art img{width:100%;margin:18px 0 8px}.screen-label{display:flex;align-items:center;gap:8px;font-size:.65rem;letter-spacing:.10em;color:#59417d;font-weight:800}.screen-label span{margin-left:auto}figcaption{font-size:.75rem;color:var(--muted)}.ribbon{background:var(--deep);color:#f6f0ff}.ribbon .wrap{display:grid;grid-template-columns:repeat(3,1fr)}.ribbon span{padding:19px 0;font-weight:680;font-size:.9rem}.ribbon b{color:#bd9eff;margin-right:9px}.section{padding-block:85px}h2{font-size:clamp(2.2rem,4.3vw,4.25rem);line-height:1.05;letter-spacing:-.06em;font-weight:790}.intro>p:last-child,.video p:not(.eyebrow),.contact p:not(.eyebrow){font-size:1.08rem;max-width:590px;color:var(--muted);margin-top:18px}.workflow{display:grid;grid-template-columns:.72fr 1.28fr;gap:24px;margin-top:35px}.steps{display:grid;gap:10px}.steps button{display:flex;text-align:left;gap:14px;align-items:flex-start;background:white;border:1px solid var(--line);border-radius:13px;color:var(--muted);padding:18px;cursor:pointer;font-size:.93rem}.steps button[aria-pressed=true]{background:#f2ebff;border-color:#af91ef}.steps small,.role-grid small{color:var(--accent);font-weight:800}.steps strong{display:block;color:var(--ink);font-size:1.08rem;margin-bottom:4px}.product-screen{display:grid;grid-template-rows:1fr auto;justify-items:center;align-items:center;background:#f1ebfb;border-radius:16px;padding:17px}.product-screen img{width:100%;height:clamp(240px,31vw,390px);object-fit:contain}.video,.contact{background:var(--deep);color:white}.video-grid,.regulatory,.faq{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:45px}.video .eyebrow,.contact .eyebrow{color:#d2bbff}.video p:not(.eyebrow),.contact p:not(.eyebrow){color:#ded3ec}.video .secondary{margin-top:24px}.video video{width:100%;border-radius:15px;background:#0e0918;aspect-ratio:16/9}.regulatory{align-items:start}.regulatory p:not(.eyebrow){color:var(--muted);margin-bottom:12px}.sources{display:flex;flex-wrap:wrap;gap:16px;color:var(--accent);font-size:.85rem;font-weight:750}.roles{background:#f3eefb}.role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:30px}.role-grid article{background:white;border:1px solid var(--line);padding:22px;border-radius:13px}.role-grid h3{margin:8px 0 5px;font-size:1.15rem}.role-grid p,.faq details p{color:var(--muted)}.faq{align-items:start}.faq details{border-bottom:1px solid var(--line);padding:15px 0}.faq details p{margin:8px 0 0}.faq summary{cursor:pointer;font-weight:750}.contact{text-align:center}.contact .eyebrow{justify-content:center}.contact p:not(.eyebrow){margin-inline:auto}.contact .button{margin-top:24px;background:#8051f3}.contact .button:hover{background:#6d3dde}.contact small{display:block;margin-top:10px;color:#ded3ec}footer{color:var(--muted)}footer p{font-size:.82rem}
@media(max-width:900px){.wrap{width:calc(100% - 44px)}nav{gap:13px}.hero-grid{gap:20px}.section{padding-block:66px}.video-grid,.regulatory,.faq{gap:24px}}
@media(max-width:700px){.wrap{width:calc(100% - 34px)}nav{display:none}.bar{min-height:64px}.hero{padding:48px 0 38px}.hero-grid,.workflow,.video-grid,.regulatory,.faq,.role-grid{grid-template-columns:1fr}.hero h1{font-size:clamp(3rem,11vw,4.7rem)}.hero-copy>p:not(.eyebrow){font-size:1rem}.hero-art{padding:13px}.ribbon span{font-size:.72rem;line-height:1.3;padding:13px 4px}.ribbon b{display:block;margin:0 0 4px}.section{padding-block:49px}.product-screen img{height:245px}.product-screen{grid-row:1}.steps button{padding:13px}.contact br,.roles br{display:none}footer .bar{flex-wrap:wrap;padding-block:15px;gap:10px}.actions a{padding-inline:12px;font-size:.82rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.testimonials { background: #fff; }
.testimonials-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.testimonials figure { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: clamp(18px, 2.3vw, 30px); background: #f8f4ff; border: 1px solid var(--line); border-top: 3px solid #9164fb; border-radius: 14px; }
.testimonials blockquote { margin: 0; color: var(--ink); font-size: .96rem; }
.testimonials blockquote strong { color: #542eb9; }
.testimonials figcaption { display: flex; align-items: center; gap: 11px; font-size: .82rem; }
.testimonials figcaption img { border-radius: 50%; flex: none; }
.testimonials figcaption strong { display: block; color: var(--ink); font-size: .96rem; }
@media (max-width: 850px) {
  .testimonials-grid { grid-template-columns: 1fr; }
}

.client-brands { padding: 34px 0 30px; background: #fff; border-bottom: 1px solid var(--line); }
.client-brands h2 { font-size: clamp(1rem, 2vw, 1.3rem); letter-spacing: -.02em; text-align: center; }
.brand-grid { list-style: none; padding: 0; margin: 21px 0 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.brand-grid li { display: grid; place-items: center; padding: 12px; min-height: 85px; }
.brand-grid img { width: 100%; max-width: 150px; height: 62px; object-fit: contain; }
@media (max-width: 750px) {
  .brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brand-grid li { padding: 7px; min-height: 62px; }
  .brand-grid img { height: 48px; }
}

.hero { background: none; padding: clamp(15px, 3vw, 42px) 0; }
.hero-mockup { display: block; width: min(1120px, 96%); height: auto; max-height: 75svh; object-fit: contain; margin-inline: auto; }
.hero .hero-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr); gap: clamp(16px, 2vw, 32px); }
.hero .eyebrow { line-height: 1.4; letter-spacing: .13em; }
.hero-description { max-width: 480px; margin-top: 23px; font-size: 1.13rem; font-weight: 400; color: var(--muted); }
.hero .hero-mockup { width: 100%; }
@media (max-width: 700px) {
  .hero .hero-grid { grid-template-columns: 1fr; }
  .hero-description { font-size: 1rem; }
}

.hero h1 { font-size: clamp(2.65rem, 3.9vw, 4.15rem); line-height: 1.04; letter-spacing: -.06em; }
.hero .hero-grid { width: min(1440px, calc(100% - 64px)); grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.hero .hero-mockup { max-height: none; }
@media (max-width: 700px) {
  .hero h1 { font-size: clamp(2.35rem, 8vw, 3.4rem); }
  .hero .hero-grid { width: calc(100% - 34px); grid-template-columns: 1fr; }
}

/* Page rhythm and section compositions */
:root {
  --gutter: clamp(22px, 5vw, 88px);
  --section-space: clamp(72px, 10vw, 168px);
  --section-gap: clamp(32px, 5vw, 84px);
}
.wrap { width: min(1360px, calc(100% - 2 * var(--gutter))); }
.section { padding-block: var(--section-space); }
.hero {
  display: grid;
  align-items: center;
  min-height: calc(93svh - 72px);
  padding-block: clamp(64px, 8vw, 130px);
}
.hero .hero-grid { width: min(1480px, calc(100% - 2 * var(--gutter))); gap: clamp(28px, 4vw, 68px); }
.hero-description { line-height: 1.7; }
.eyebrow { margin-bottom: 22px; }
.actions { gap: 13px; margin-top: 34px; }
.ribbon span { padding-block: 25px; }
.client-brands { padding-block: clamp(55px, 7vw, 105px); }
.brand-grid { gap: 24px; margin-top: 36px; }
.brand-grid li { min-height: 100px; }
.intro > p:last-child { margin-top: 24px; }
.workflow { gap: clamp(26px, 4vw, 64px); margin-top: clamp(35px, 5vw, 74px); }
.steps { gap: 14px; }
.steps button { padding: clamp(18px, 2.2vw, 33px); }
.product-screen { background: #f3eefb; padding: clamp(20px, 3vw, 48px); border-radius: 22px; }
.product-screen img { height: clamp(255px, 35vw, 490px); }
.video, .roles, .contact { display: grid; align-items: center; }
.video { background: radial-gradient(ellipse at 88% 35%, #302051, var(--deep) 65%); }
.video-grid { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: var(--section-gap); }
.video video { border: 1px solid #fff3; border-radius: 22px; box-shadow: 0 20px 54px #09051255; }
.regulatory, .faq { gap: var(--section-gap); align-items: start; }
.regulatory p:not(.eyebrow) { font-size: 1.07rem; margin-bottom: 22px; }
.sources { margin-top: 30px; }
.roles { background: #f3eefb; }
.role-grid, .testimonials-grid { gap: clamp(17px, 2vw, 32px); margin-top: clamp(32px, 5vw, 72px); }
.role-grid article { padding: clamp(24px, 3vw, 44px); border-radius: 20px; }
.role-grid h3 { margin: 15px 0 9px; }
.testimonials figure { padding: clamp(25px, 2.6vw, 42px); gap: 30px; border-radius: 20px; }
.testimonials blockquote { line-height: 1.75; }
.faq details { padding-block: 23px; }
.contact { background: radial-gradient(ellipse at 50% 100%, #332056, var(--deep) 65%); }
.contact .button { margin-top: 34px; }
footer .bar { padding-block: 24px; }
@media (min-width: 1000px) {
  #produto, .video, .roles { min-height: 90svh; }
  #cenario, .faq, .contact { min-height: 70svh; }
  #cenario, .faq { align-content: center; }
}
@media (min-width: 701px) and (max-width: 999px) {
  .brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .testimonials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  :root { --section-space: 66px; --section-gap: 31px; }
  .hero { min-height: 0; padding-block: 54px 44px; }
  .hero .hero-grid, .video-grid { grid-template-columns: 1fr; }
  .hero .hero-grid { width: calc(100% - 2 * var(--gutter)); }
  .ribbon span { padding-block: 16px; }
  .brand-grid { gap: 10px; margin-top: 23px; }
  .brand-grid li { min-height: 62px; }
  .product-screen img { height: clamp(195px, 56vw, 290px); }
  .role-grid, .testimonials-grid { margin-top: 28px; }
}

.brand-carousel { overflow: hidden; margin-top: clamp(24px, 4vw, 54px); }
.brand-track { display: flex; animation: brand-rotation 12s ease-in-out infinite; }
.brand-carousel .brand-grid {
  flex: 0 0 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}
.brand-carousel .brand-grid img {
  max-width: 245px;
  height: clamp(58px, 9vw, 112px);
}
@keyframes brand-rotation {
  0%, 42% { transform: translateX(0); }
  50%, 92% { transform: translateX(-100%); }
  100% { transform: translateX(-200%); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-track { display: grid; animation: none; }
  [data-brand-loop] { display: none; }
}

#produto .workflow { grid-template-columns: minmax(240px, 0.55fr) minmax(0, 1.45fr); }
#produto .product-screen { background: transparent; padding: 0; align-content: center; }
#produto .product-screen img { height: auto; max-height: 650px; }
@media (max-width: 700px) {
  #produto .workflow { grid-template-columns: minmax(0, 1fr); }
}

.mockup-window { width: 100%; min-width: 0; overflow: hidden; }
.mockup-track { display: flex; align-items: center; transition: transform 550ms cubic-bezier(.22,.61,.36,1); }
#produto .mockup-track img { flex: 0 0 100%; min-width: 0; }
@media (prefers-reduced-motion: reduce) {
  .mockup-track { transition: none; }
}

.contact-form { background: #fff; color: var(--ink); min-height: 0; }
.contact-form h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 24px; }
.contact-form iframe { display: block; width: 100%; height: 780px; border: 1px solid var(--line); border-radius: 12px; }
.contact-form a { display: inline-block; margin-top: 16px; color: var(--accent); font-size: .9rem; }
@media (max-width: 700px) { .contact-form iframe { height: 960px; } }

.quote-layout { display: grid; grid-template-columns: 1fr 2.5fr; gap: clamp(24px, 5vw, 72px); }
.quote-layout h2 { text-transform: uppercase; letter-spacing: .14em; font-size: clamp(1.4rem, 3vw, 2rem); }
.quote-layout h2::before { content: ""; display: block; width: 90px; border-top: 1px solid; margin: 12px 0 30px; }
.quote-form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; align-items: center; }
.quote-form .wide { grid-column: 1 / -1; }
.quote-form p { color: var(--muted); }
.quote-form input:not([type=checkbox]), .quote-form textarea { width: 100%; padding: 15px; border: 1px solid #ccc; background: #fff; font: inherit; color: inherit; }
.quote-options { display: grid; gap: 8px; }
.quote-form button { justify-self: start; border: 0; cursor: pointer; }
.form-feedback { padding: 14px 18px; border-radius: 8px; font-size: 0.95rem; line-height: 1.4; }
.form-feedback[hidden] { display: none; }
.form-feedback.success { background: #e6f7ec; color: #1b5e20; border: 1px solid #a5d6a7; }
.form-feedback.error { background: #fdecea; color: #b71c1c; border: 1px solid #ef9a9a; }
@media (max-width: 700px) { .quote-layout, .quote-form { grid-template-columns: minmax(0,1fr); } }

.hero h1 { font-size: clamp(2.2rem, 3.5vw, 3.65rem); }
.criteria { display: grid; gap: 4px; margin: 24px 0; }
.criteria dt { font-weight: 750; }
.criteria dd { margin: 0 0 12px; color: var(--muted); }
.pi-copy { max-width: 72ch; margin-top: 24px; color: var(--muted); }

@media (max-width: 700px) {
  main .hero h1,
  main .section h2:not(.eyebrow) {
    letter-spacing: -.035em;
    word-spacing: .045em;
  }
}