*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#06122b}
:root[data-theme="light"] body{background:#f2f6fb}
img{max-width:100%;height:auto}
::selection{background:#22c58a;color:#06122b}
a{color:inherit}
:focus-visible{outline:2px solid #22c58a;outline-offset:2px}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(4%,-3%) scale(1.08)}100%{transform:translate(0,0) scale(1)}}
@keyframes drift2{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-5%,4%) scale(1.12)}100%{transform:translate(0,0) scale(1)}}
@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-14px)}100%{transform:translateY(0)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes sheen{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(34,197,138,.45)}70%{box-shadow:0 0 0 16px rgba(34,197,138,0)}100%{box-shadow:0 0 0 0 rgba(34,197,138,0)}}
@keyframes gridmove{from{background-position:0 0}to{background-position:0 80px}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
/* CTA da demo (não existia no design) */
.pf-try{display:inline-flex;align-items:center;gap:8px;padding:15px 28px;border-radius:999px;
  border:1px solid var(--accent,#22c58a);color:var(--accent,#22c58a);background:transparent;
  font:700 15.5px/1 Manrope,system-ui,sans-serif;text-decoration:none;white-space:nowrap;
  transition:background .16s,transform .06s}
.pf-try:hover{background:color-mix(in srgb,var(--accent,#22c58a) 12%,transparent);transform:translateY(-1px)}
.pf-try-header{padding:10px 17px;font-size:14px}
@media (max-width:960px){.pf-try-header{display:none}}
/* menu mobile (não existia no design) */
.pf-burger{display:none;margin-left:auto;background:transparent;border:1px solid var(--border,rgba(255,255,255,.18));color:var(--fg,#eaf1ff);border-radius:10px;width:42px;height:42px;cursor:pointer;font-size:18px;line-height:1}
.pf-mobile-nav{display:none;flex-direction:column;gap:2px;padding:10px 18px 18px;border-bottom:1px solid var(--border,rgba(255,255,255,.08));background:var(--headerbg,rgba(6,18,43,.96));backdrop-filter:blur(14px)}
.pf-mobile-nav a{padding:12px 6px;font:600 15.5px/1 Manrope,system-ui,sans-serif;color:var(--fg,#eaf1ff);text-decoration:none;border-bottom:1px solid var(--border,rgba(255,255,255,.06))}
.pf-mobile-nav.open{display:flex}


/* ilustrações no lugar dos placeholders do design */
.pf-illu{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;padding:18px;line-height:0}
.pf-illu svg{display:block;width:100%;height:auto;max-height:min(100%,360px)}


:root[data-theme="light"] .page{
  --bg:#f2f6fb; --fg:#0b2a6b; --muted:#5a6b8c;
  --card:#ffffff; --card2:#ffffff;
  --border:rgba(11,42,107,0.12); --accent:#12a06e; --blue:#0b2a6b;
  --headerbg:rgba(242,246,251,0.88); --footerbg:rgba(11,42,107,0.03);
  --band:rgba(11,42,107,0.04); --gridline:rgba(11,42,107,0.05);
  --ph1:rgba(11,42,107,0.09); --ph2:rgba(18,160,110,0.11);
}
.s1{--bg: #06122b; --fg: #eaf1ff; --muted: #93a4c7; --card: rgba(255,255,255,0.04); --card2: rgba(255,255,255,0.03); --border: rgba(255,255,255,0.10); --accent: #22c58a; --blue: #2f6bff; --headerbg: rgba(6,18,43,0.72); --footerbg: rgba(0,0,0,0.20); --band: rgba(47,107,255,0.06); --gridline: rgba(255,255,255,0.045); --ph1: rgba(47,107,255,0.14); --ph2: rgba(34,197,138,0.14); background: var(--bg); color: var(--fg); font-family: Manrope, system-ui, sans-serif; min-height: 100vh; overflow-x: hidden; position: relative}
.s2{position: sticky; top: 0px; z-index: 60; backdrop-filter: blur(14px); background: var(--headerbg, rgba(6,18,43,0.72)); border-bottom: 1px solid var(--border, rgba(255,255,255,0.08))}
.s3{max-width: 1240px; margin: 0px auto; padding: 14px 28px; display: flex; align-items: center; gap: 22px}
.s4{display: flex; align-items: center; gap: 11px; cursor: pointer; text-decoration: none}
.s5{width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--blue,#2f6bff), var(--accent,#22c58a)); display: inline-flex; align-items: center; justify-content: center; box-shadow: rgba(34, 197, 138, 0.35) 0px 4px 18px}
.s6{font-family: "Chakra Petch", sans-serif; font-weight: 700; font-size: 21px; letter-spacing: -0.01em; color: var(--fg,#eaf1ff)}
.s7{color: var(--accent,#22c58a)}
.s8{display: flex; gap: 4px; margin-left: 10px}
.s9{cursor: pointer; padding: 8px 14px; border-radius: 9px; font-size: 14.5px; font-weight: 600; color: var(--muted,#93a4c7); text-decoration: none; transition: color 0.18s, background 0.18s}
.s10{margin-left: auto; display: flex; align-items: center; gap: 12px}
.s11{display: flex; background: var(--card,rgba(255,255,255,0.05)); border: 1px solid var(--border,rgba(255,255,255,0.08)); border-radius: 999px; padding: 3px}
.s12{border-width: medium; border-style: none; border-color: currentcolor; border-image: none; cursor: pointer; padding: 5px 12px; border-radius: 999px; font-family: Manrope, sans-serif; font-weight: 700; font-size: 12.5px; transition: 0.16s; white-space: nowrap; background: rgb(34, 197, 138); color: rgb(6, 18, 43)}
.s13{border-width: medium; border-style: none; border-color: currentcolor; border-image: none; cursor: pointer; padding: 5px 12px; border-radius: 999px; font-family: Manrope, sans-serif; font-weight: 700; font-size: 12.5px; transition: 0.16s; white-space: nowrap; background: transparent; color: rgb(147, 164, 199)}
.s14{cursor: pointer; padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; color: rgb(6, 18, 43); background: var(--accent,#22c58a); text-decoration: none; box-shadow: rgba(34, 197, 138, 0.3) 0px 6px 20px; white-space: nowrap}
.s15{position: relative; overflow: hidden; padding: 90px 28px 70px}
.s16{position: absolute; inset: 0px; pointer-events: none}
.s17{position: absolute; top: -10%; left: -5%; width: 620px; height: 620px; background: radial-gradient(circle, var(--blue,#2f6bff), transparent 62%); opacity: 0.55; filter: blur(20px); animation: 16s ease-in-out 0s infinite normal none running drift}
.s18{position: absolute; bottom: -20%; right: -5%; width: 560px; height: 560px; background: radial-gradient(circle, var(--accent,#22c58a), transparent 62%); opacity: 0.4; filter: blur(20px); animation: 19s ease-in-out 0s infinite normal none running drift2}
.s19{position: absolute; inset: 0px; background-image: linear-gradient(var(--gridline,rgba(255,255,255,0.045)) 1px, transparent 1px), linear-gradient(90deg, var(--gridline,rgba(255,255,255,0.045)) 1px, transparent 1px); background-size: 80px 80px; animation: 8s linear 0s infinite normal none running gridmove; mask-image: radial-gradient(circle at 50% 30%, rgb(0, 0, 0) 10%, transparent 72%)}
.s20{position: relative; max-width: 1000px; margin: 0px auto; text-align: center}
.s21{display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--border,rgba(255,255,255,0.12)); background: var(--card,rgba(255,255,255,0.04)); font-size: 13px; font-weight: 600; color: var(--muted,#93a4c7); margin-bottom: 26px}
.s22{width: 8px; height: 8px; border-radius: 50%; background: var(--accent,#22c58a); animation: 2.2s ease 0s infinite normal none running pulseRing}
.s23{font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(38px, 6.4vw, 76px); line-height: 1.02; letter-spacing: -0.03em; margin: 0px 0px 22px; color: var(--fg,#eaf1ff); text-wrap: balance}
.s24{background: linear-gradient(120deg, var(--blue,#2f6bff), var(--accent,#22c58a)); -webkit-background-clip: text; background-clip: text; color: transparent}
.s25{font-size: clamp(16px, 2vw, 20px); line-height: 1.55; color: var(--muted,#93a4c7); max-width: 640px; margin: 0px auto 34px; text-wrap: pretty}
.s26{display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 46px}
.s27{cursor: pointer; padding: 15px 30px; border-radius: 999px; font-weight: 700; font-size: 15.5px; color: rgb(6, 18, 43); background: var(--accent,#22c58a); text-decoration: none; box-shadow: rgba(34, 197, 138, 0.35) 0px 10px 30px}
.s28{cursor: pointer; padding: 15px 30px; border-radius: 999px; font-weight: 700; font-size: 15.5px; color: var(--fg,#eaf1ff); background: transparent; border: 1px solid var(--border,rgba(255,255,255,0.18)); text-decoration: none}
.s29{display: flex; gap: 10px; justify-content: center; flex-wrap: wrap}
.s30{font-size: 12.5px; font-weight: 600; color: var(--muted,#93a4c7); align-self: center; letter-spacing: 0.04em; text-transform: uppercase}
.s31{cursor: pointer; padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--fg,#eaf1ff); background: var(--card,rgba(255,255,255,0.05)); border: 1px solid var(--border,rgba(255,255,255,0.1)); text-decoration: none; transition: 0.18s}
.s32{padding: 30px 0px 20px; border-top: 1px solid var(--border,rgba(255,255,255,0.06)); border-bottom: 1px solid var(--border,rgba(255,255,255,0.06))}
.s33{text-align: center; font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted,#93a4c7); margin: 0px 0px 18px}
.s34{overflow: hidden; mask-image: linear-gradient(90deg, transparent, rgb(0, 0, 0) 12%, rgb(0, 0, 0) 88%, transparent)}
.s35{display: flex; gap: 60px; width: max-content; animation: 22s linear 0s infinite normal none running marquee}
.s36{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 17px; color: var(--muted,#93a4c7); white-space: nowrap; display: flex; align-items: center; gap: 10px}
.s37{width: 7px; height: 7px; border-radius: 2px; background: var(--accent,#22c58a); transform: rotate(45deg)}
.s38{max-width: 1240px; margin: 0px auto; padding: 90px 28px}
.s39{display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center}
.s40{font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent,#22c58a)}
.s41{font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -0.02em; margin: 14px 0px 20px; color: var(--fg,#eaf1ff)}
.s42{font-size: 17px; line-height: 1.6; color: var(--muted,#93a4c7); margin: 0px 0px 26px; text-wrap: pretty}
.s43{cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--accent,#22c58a); text-decoration: none; font-size: 15px}
.s44{position: relative}
.s45{position: absolute; inset: -14px; background: linear-gradient(135deg, var(--blue,#2f6bff), var(--accent,#22c58a)); opacity: 0.22; filter: blur(30px); border-radius: 24px}
.s46{position: relative; border: 1px solid var(--border,rgba(255,255,255,0.12)); border-radius: 18px; overflow: hidden; background: var(--card2,rgba(255,255,255,0.03))}
.s47{height: 240px; background: repeating-linear-gradient(135deg, var(--ph1,rgba(47,107,255,0.14)) 0 12px, transparent 12px 24px); display: flex; align-items: center; justify-content: center}
.s48{font-family: "Space Grotesk", monospace; font-size: 13px; color: var(--muted,#93a4c7); letter-spacing: 0.06em}
.s49{max-width: 1240px; margin: 0px auto; padding: 30px 28px 90px}
.s50{position: relative; top: -80px}
.s51{text-align: center; max-width: 620px; margin: 0px auto 48px}
.s52{font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -0.02em; margin: 12px 0px 0px; color: var(--fg,#eaf1ff)}
.s53{display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px}
.s54{cursor: pointer; text-decoration: none; border: 1px solid var(--border,rgba(255,255,255,0.1)); border-radius: 18px; padding: 26px; background: var(--card,rgba(255,255,255,0.03)); transition: transform 0.2s, border-color 0.2s; display: flex; flex-direction: column; gap: 14px; min-height: 230px}
.s55{height: 92px; border-radius: 12px; background: repeating-linear-gradient(135deg, var(--ph2,rgba(34,197,138,0.14)) 0 10px, transparent 10px 20px); display: flex; align-items: center; justify-content: center}
.s56{font-family: "Space Grotesk", monospace; font-size: 11px; color: var(--muted,#93a4c7)}
.s57{font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 21px; margin: 0px; color: var(--fg,#eaf1ff)}
.s58{font-size: 14.5px; line-height: 1.5; color: var(--muted,#93a4c7); margin: 0px; flex: 1 1 0%}
.s59{font-weight: 700; font-size: 14px; color: var(--accent,#22c58a)}
.s60{position: relative; overflow: hidden; padding: 90px 28px}
.s61{position: absolute; inset: 0px; background: var(--band,rgba(47,107,255,0.06)); border-top: 1px solid var(--border,rgba(255,255,255,0.06)); border-bottom: 1px solid var(--border,rgba(255,255,255,0.06))}
.s62{position: absolute; top: 50%; left: 8%; width: 340px; height: 340px; background: radial-gradient(circle, var(--accent,#22c58a), transparent 65%); opacity: 0.28; filter: blur(20px); transform: translateY(-50%); animation: 9s ease-in-out 0s infinite normal none running floaty}
.s63{position: relative; max-width: 900px; margin: 0px auto; text-align: center}
.s64{font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(28px, 4vw, 48px); line-height: 1.08; letter-spacing: -0.02em; margin: 14px 0px 20px; color: var(--fg,#eaf1ff); text-wrap: balance}
.s65{font-size: 18px; line-height: 1.55; color: var(--muted,#93a4c7); max-width: 620px; margin: 0px auto 28px}
.s66{cursor: pointer; display: inline-flex; padding: 14px 28px; border-radius: 999px; font-weight: 700; color: rgb(6, 18, 43); background: var(--accent,#22c58a); text-decoration: none}
.s67{display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center}
.s68{font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue,#2f6bff)}
.s69{font-size: 17px; line-height: 1.6; color: var(--muted,#93a4c7); margin: 0px 0px 26px}
.s70{cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--accent,#22c58a); text-decoration: none}
.s71{position: relative; border: 1px solid var(--border,rgba(255,255,255,0.12)); border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--card2,rgba(255,255,255,0.03)); display: flex; align-items: center; justify-content: center}
.s72{position: absolute; inset: 0px; background: repeating-linear-gradient(135deg, var(--ph1,rgba(47,107,255,0.12)) 0 12px, transparent 12px 24px)}
.s73{position: relative; font-family: "Space Grotesk", monospace; font-size: 13px; color: var(--muted,#93a4c7)}
.s74{position: relative; overflow: hidden; padding: 80px 28px}
.s75{position: relative; max-width: 1240px; margin: 0px auto}
.s76{font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -0.02em; margin: 0px 0px 8px; color: var(--fg,#eaf1ff)}
.s77{font-size: 14px; color: var(--muted,#93a4c7); margin: 0px 0px 40px}
.s78{display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px}
.s79{border: 1px solid var(--border,rgba(255,255,255,0.1)); border-radius: 16px; padding: 24px; background: var(--card,rgba(255,255,255,0.03))}
.s80{font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -0.02em; color: var(--accent,#22c58a); line-height: 1}
.s81{font-size: 14.5px; color: var(--muted,#93a4c7); margin-top: 10px}
.s82{display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 44px; flex-wrap: wrap}
.s83{font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -0.02em; margin: 0px 0px 12px; color: var(--fg,#eaf1ff)}
.s84{font-size: 17px; color: var(--muted,#93a4c7); margin: 0px; max-width: 520px}
.s85{cursor: pointer; padding: 13px 24px; border-radius: 999px; font-weight: 700; font-size: 14.5px; color: var(--fg,#eaf1ff); border: 1px solid var(--border,rgba(255,255,255,0.18)); text-decoration: none; white-space: nowrap}
.s86{display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px}
.s87{border: 1px solid var(--border,rgba(255,255,255,0.1)); border-radius: 16px; padding: 26px; background: var(--card,rgba(255,255,255,0.03)); transition: border-color 0.2s}
.s88{width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(135deg, var(--blue,#2f6bff), var(--accent,#22c58a)); display: flex; align-items: center; justify-content: center; font-family: "Space Grotesk", sans-serif; font-weight: 700; color: rgb(255, 255, 255); margin-bottom: 16px}
.s89{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 19px; margin: 0px 0px 8px; color: var(--fg,#eaf1ff)}
.s90{font-size: 14.5px; line-height: 1.5; color: var(--muted,#93a4c7); margin: 0px}
.s91{font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.02em; margin: 14px 0px 40px; max-width: 760px; color: var(--fg,#eaf1ff); text-wrap: balance}
.s92{display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px}
.s93{border: 1px solid var(--border,rgba(255,255,255,0.1)); border-radius: 16px; padding: 22px; background: var(--card,rgba(255,255,255,0.03)); position: relative}
.s94{font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 15px; color: var(--accent,#22c58a); margin-bottom: 14px}
.s95{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 16px; margin: 0px 0px 8px; color: var(--fg,#eaf1ff); line-height: 1.2}
.s96{font-size: 13px; line-height: 1.45; color: var(--muted,#93a4c7); margin: 0px}
.s97{position: relative; overflow: hidden; padding: 30px 28px 100px}
.s98{position: relative; max-width: 1000px; margin: 0px auto; border-radius: 28px; overflow: hidden; border: 1px solid var(--border,rgba(255,255,255,0.12)); padding: 66px 40px; text-align: center; background: var(--card2,rgba(255,255,255,0.03))}
.s99{position: absolute; top: -30%; left: 20%; width: 480px; height: 480px; background: radial-gradient(circle, var(--blue,#2f6bff), transparent 62%); opacity: 0.32; filter: blur(24px); animation: 15s ease-in-out 0s infinite normal none running drift}
.s100{position: absolute; bottom: -40%; right: 15%; width: 420px; height: 420px; background: radial-gradient(circle, var(--accent,#22c58a), transparent 62%); opacity: 0.3; filter: blur(24px); animation: 18s ease-in-out 0s infinite normal none running drift2}
.s101{position: absolute; right: -40px; bottom: -50px; width: 340px; height: 340px; opacity: 0.05; pointer-events: none}
.s102{font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(30px, 4.2vw, 52px); line-height: 1.06; letter-spacing: -0.02em; margin: 0px 0px 18px; color: var(--fg,#eaf1ff); text-wrap: balance}
.s103{font-size: 17px; line-height: 1.55; color: var(--muted,#93a4c7); max-width: 560px; margin: 0px auto 34px}
.s104{display: flex; gap: 14px; justify-content: center; flex-wrap: wrap}
.s105{padding: 15px 32px; border-radius: 999px; font-weight: 700; font-size: 15.5px; color: rgb(6, 18, 43); background: var(--accent,#22c58a); text-decoration: none; box-shadow: rgba(34, 197, 138, 0.35) 0px 10px 30px}
.s106{border-top: 1px solid var(--border,rgba(255,255,255,0.08)); padding: 56px 28px 34px; background: var(--footerbg,rgba(0,0,0,0.15))}
.s107{max-width: 1240px; margin: 0px auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px}
.s108{display: flex; align-items: center; gap: 11px; margin-bottom: 16px}
.s109{width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--blue,#2f6bff), var(--accent,#22c58a)); display: inline-flex; align-items: center; justify-content: center}
.s110{font-family: "Chakra Petch", sans-serif; font-weight: 700; font-size: 21px; color: var(--fg,#eaf1ff)}
.s111{font-size: 15px; color: var(--muted,#93a4c7); margin: 0px; max-width: 280px}
.s112{font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg,#eaf1ff); margin: 0px 0px 16px}
.s113{display: flex; flex-direction: column; gap: 10px}
.s114{cursor: pointer; font-size: 14.5px; color: var(--muted,#93a4c7); text-decoration: none}
.s115{font-size: 14.5px; color: var(--muted,#93a4c7)}
.s116{max-width: 1240px; margin: 40px auto 0px; padding-top: 24px; border-top: 1px solid var(--border,rgba(255,255,255,0.08)); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px}
.s117{font-size: 13.5px; color: var(--muted,#93a4c7)}
.s118{display: flex; gap: 20px; flex-wrap: wrap}
.s119{cursor: pointer; font-size: 13.5px; color: var(--muted,#93a4c7); text-decoration: none}
.s120{position: relative; overflow: hidden; padding: 100px 28px 60px}
.s121{position: absolute; top: -10%; right: -5%; width: 560px; height: 560px; background: radial-gradient(circle, var(--blue,#2f6bff), transparent 62%); opacity: 0.4; filter: blur(20px); animation: 17s ease-in-out 0s infinite normal none running drift}
.s122{position: relative; max-width: 860px; margin: 0px auto; text-align: center}
.s123{font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(34px, 5vw, 60px); line-height: 1.05; letter-spacing: -0.03em; margin: 16px 0px 20px; color: var(--fg,#eaf1ff); text-wrap: balance}
.s124{font-size: 19px; line-height: 1.6; color: var(--muted,#93a4c7); max-width: 640px; margin: 0px auto}
.s125{max-width: 1000px; margin: 0px auto; padding: 40px 28px 60px}
.s126{border: 1px solid var(--border,rgba(255,255,255,0.1)); border-radius: 16px; padding: 28px; background: var(--card,rgba(255,255,255,0.03))}
.s127{width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(135deg, var(--blue,#2f6bff), var(--accent,#22c58a)); margin-bottom: 16px}
.s128{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 20px; margin: 0px 0px 8px; color: var(--fg,#eaf1ff)}
.s129{max-width: 1000px; margin: 0px auto; padding: 20px 28px 90px}
.s130{border: 1px solid var(--border,rgba(255,255,255,0.12)); border-radius: 24px; padding: 50px; background: var(--card2,rgba(255,255,255,0.03)); text-align: center}
.s131{font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -0.02em; margin: 0px 0px 16px; color: var(--fg,#eaf1ff)}
.s132{font-size: 17px; line-height: 1.6; color: var(--muted,#93a4c7); max-width: 620px; margin: 0px auto 30px}
.s133{cursor: pointer; display: inline-flex; padding: 14px 30px; border-radius: 999px; font-weight: 700; color: rgb(6, 18, 43); background: var(--accent,#22c58a); text-decoration: none}
.s134{position: relative; overflow: hidden; padding: 80px 28px 40px}
.s135{position: absolute; top: -20%; right: -5%; width: 480px; height: 480px; background: radial-gradient(circle, var(--blue,#2f6bff), transparent 62%); opacity: 0.28; filter: blur(24px); animation: 17s ease-in-out 0s infinite normal none running drift}
.s136{position: relative; max-width: 820px; margin: 0px auto}
.s137{display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px}
.s138{cursor: pointer; padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; text-decoration: none; border: 1px solid var(--border,rgba(255,255,255,0.16)); background: transparent; color: var(--fg,#eaf1ff)}
.s139{cursor: pointer; padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; text-decoration: none; border: 1px solid var(--accent,#22c58a); background: rgba(34, 197, 138, 0.12); color: var(--accent,#22c58a)}
.s140{font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(32px, 4.6vw, 52px); line-height: 1.05; letter-spacing: -0.03em; margin: 12px 0px 14px; color: var(--fg,#eaf1ff)}
.s141{font-size: 14px; color: var(--muted,#93a4c7); margin: 0px}
.s142{max-width: 820px; margin: 0px auto; padding: 20px 28px 40px}
.s143{border: 1px solid var(--border,rgba(255,255,255,0.12)); border-radius: 16px; padding: 22px 24px; background: var(--card,rgba(255,255,255,0.03)); margin-bottom: 40px}
.s144{font-size: 16px; line-height: 1.6; color: var(--muted,#93a4c7); margin: 0px}
.s145{margin-bottom: 34px}
.s146{font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -0.01em; margin: 0px 0px 12px; color: var(--fg,#eaf1ff); display: flex; align-items: baseline; gap: 12px}
.s147{font-size: 14px; color: var(--accent,#22c58a); font-family: "Space Grotesk", monospace}
.s148{font-size: 15.5px; line-height: 1.65; color: var(--muted,#93a4c7); margin: 0px 0px 12px}
.s149{margin: 8px 0px 0px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px}
.s150{font-size: 15px; line-height: 1.55; color: var(--muted,#93a4c7)}
.s151{margin-top: 20px; padding: 24px; border-radius: 16px; border: 1px solid var(--border,rgba(255,255,255,0.12)); background: var(--card2,rgba(255,255,255,0.03))}
.s152{font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 18px; margin: 0px 0px 8px; color: var(--fg,#eaf1ff)}
.s153{font-size: 15px; line-height: 1.6; color: var(--muted,#93a4c7); margin: 0px}
.s154{color: var(--accent,#22c58a); text-decoration: none; font-weight: 600}
.s155{min-height: calc(-200px + 100vh)}
.s156{max-width: 1240px; margin: 0px auto; padding: 40px 28px 80px}
.s157{display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 22px; border-bottom: 1px solid var(--border,rgba(255,255,255,0.08)); margin-bottom: 34px}
.s158{display: flex; align-items: center; gap: 12px}
.s159{display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--accent,#22c58a); background: rgba(34, 197, 138, 0.1); font-size: 12.5px; font-weight: 700; color: var(--accent,#22c58a)}
.s160{width: 7px; height: 7px; border-radius: 50%; background: var(--accent,#22c58a); animation: 2.2s ease 0s infinite normal none running pulseRing}
.s161{font-family: "Space Grotesk", monospace; font-size: 14px; color: var(--muted,#93a4c7)}
.s162{padding: 9px 18px; border-radius: 999px; border: 1px solid var(--border,rgba(255,255,255,0.16)); background: transparent; cursor: pointer; font-family: Manrope, sans-serif; font-weight: 600; font-size: 13.5px; color: var(--fg,#eaf1ff)}
.s163{display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start}
.s164{position: sticky; top: 90px; display: flex; flex-direction: column; gap: 4px}
.s165{font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted,#93a4c7); padding: 8px 12px 4px}
.s166{padding: 9px 12px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--muted,#93a4c7); text-decoration: none}
.s167{max-width: 760px}
.s168{font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -0.02em; margin: 0px 0px 14px; color: var(--fg,#eaf1ff)}
.s169{font-size: 16.5px; line-height: 1.6; color: var(--muted,#93a4c7); margin: 0px 0px 24px}
.s170{border: 1px solid var(--border,rgba(255,255,255,0.12)); border-radius: 12px; overflow: hidden; margin-bottom: 40px}
.s171{display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-bottom: 1px solid var(--border,rgba(255,255,255,0.08)); background: var(--card,rgba(255,255,255,0.03))}
.s172{font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted,#93a4c7); min-width: 150px}
.s173{font-family: "Space Grotesk", monospace; font-size: 13.5px; color: var(--accent,#22c58a)}
.s174{font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 24px; letter-spacing: -0.01em; margin: 0px 0px 12px; color: var(--fg,#eaf1ff)}
.s175{font-size: 15px; line-height: 1.6; color: var(--muted,#93a4c7); margin: 0px 0px 16px}
.s176{font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted,#93a4c7); margin: 0px 0px 8px}
.s177{margin: 0px 0px 20px; padding: 18px 20px; border-radius: 12px; background: rgb(4, 16, 31); border: 1px solid var(--border,rgba(255,255,255,0.1)); overflow-x: auto; font-family: "Space Grotesk", monospace; font-size: 13px; line-height: 1.7; color: rgb(207, 227, 255)}
.s178{color: rgb(107, 140, 199)}
.s179{color: rgb(34, 197, 138)}
.s180{margin: -8px 0px 20px; padding: 18px 20px; border-radius: 12px; background: rgb(4, 16, 31); border: 1px solid var(--border,rgba(255,255,255,0.1)); overflow-x: auto; font-family: "Space Grotesk", monospace; font-size: 13px; line-height: 1.7; color: rgb(207, 227, 255)}
.s181{color: rgb(127, 217, 176)}
.s182{margin: 0px 0px 44px; padding: 18px 20px; border-radius: 12px; background: rgb(4, 16, 31); border: 1px solid var(--border,rgba(255,255,255,0.1)); overflow-x: auto; font-family: "Space Grotesk", monospace; font-size: 13px; line-height: 1.7; color: rgb(207, 227, 255)}
.s183{font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 24px; letter-spacing: -0.01em; margin: 0px 0px 14px; color: var(--fg,#eaf1ff)}
.s184{display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 44px}
.s185{font-family: "Space Grotesk", monospace; font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 7px; background: var(--card,rgba(255,255,255,0.05)); color: var(--muted,#93a4c7); border: 1px solid var(--border,rgba(255,255,255,0.16))}
.s186{font-family: "Space Grotesk", monospace; font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 7px; background: rgba(34, 197, 138, 0.14); color: rgb(34, 197, 138); border: 1px solid rgba(34, 197, 138, 0.4)}
.s187{font-family: "Space Grotesk", monospace; font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 7px; background: rgba(220, 38, 38, 0.14); color: rgb(255, 107, 107); border: 1px solid rgba(220, 38, 38, 0.4)}
.s188{font-family: "Space Grotesk", monospace; font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 7px; background: rgba(217, 119, 6, 0.14); color: rgb(224, 160, 48); border: 1px solid rgba(217, 119, 6, 0.4)}
.s189{font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 24px; letter-spacing: -0.01em; margin: 0px 0px 18px; color: var(--fg,#eaf1ff)}
.s190{display: flex; flex-direction: column; gap: 20px}
.s191{font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.02em; margin: 0px 0px 10px; color: var(--accent,#22c58a)}
.s192{border: 1px solid var(--border,rgba(255,255,255,0.1)); border-radius: 12px; padding: 16px 18px; background: var(--card,rgba(255,255,255,0.03))}
.s193{display: flex; align-items: center; gap: 12px; flex-wrap: wrap}
.s194{font-family: "Space Grotesk", monospace; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 6px; background: rgba(34, 197, 138, 0.16); color: rgb(34, 197, 138)}
.s195{font-family: "Space Grotesk", monospace; font-size: 14px; color: var(--fg,#eaf1ff)}
.s196{margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted,#93a4c7); border: 1px solid var(--border,rgba(255,255,255,0.14)); padding: 3px 8px; border-radius: 999px}
.s197{font-size: 13.5px; line-height: 1.5; color: var(--muted,#93a4c7); margin: 11px 0px 0px}
.s198{font-family: "Space Grotesk", monospace; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 6px; background: rgba(47, 107, 255, 0.16); color: rgb(91, 139, 255)}
.s199{font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 24px; letter-spacing: -0.01em; margin: 44px 0px 12px; color: var(--fg,#eaf1ff)}
.s200{margin-top: 4px; padding: 26px; border-radius: 16px; border: 1px solid var(--border,rgba(255,255,255,0.12)); background: var(--card2,rgba(255,255,255,0.03)); text-align: center}
.s201{font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 20px; margin: 0px 0px 10px; color: var(--fg,#eaf1ff)}
.s202{font-size: 14.5px; color: var(--muted,#93a4c7); margin: 0px 0px 18px}
.s203{cursor: pointer; display: inline-flex; padding: 12px 26px; border-radius: 999px; font-weight: 700; font-size: 14.5px; color: rgb(6, 18, 43); background: var(--accent,#22c58a); text-decoration: none}
.s204{position: relative; overflow: hidden; padding: 90px 28px 50px}
.s205{position: absolute; top: -10%; left: -5%; width: 560px; height: 560px; background: radial-gradient(circle, var(--accent,#22c58a), transparent 62%); opacity: 0.36; filter: blur(20px); animation: 18s ease-in-out 0s infinite normal none running drift2}
.s206{position: relative; max-width: 1100px; margin: 0px auto}
.s207{cursor: pointer; font-size: 14px; font-weight: 600; color: var(--muted,#93a4c7); text-decoration: none}
.s208{display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; margin-top: 30px}
.s209{font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(36px, 5vw, 60px); line-height: 1.04; letter-spacing: -0.03em; margin: 14px 0px 20px; color: var(--fg,#eaf1ff)}
.s210{font-size: 18px; line-height: 1.6; color: var(--muted,#93a4c7); margin: 0px 0px 30px}
.s211{cursor: pointer; display: inline-flex; padding: 15px 30px; border-radius: 999px; font-weight: 700; color: rgb(6, 18, 43); background: var(--accent,#22c58a); text-decoration: none; box-shadow: rgba(34, 197, 138, 0.35) 0px 10px 30px}
.s212{position: relative; border: 1px solid var(--border,rgba(255,255,255,0.12)); border-radius: 20px; overflow: hidden; aspect-ratio: 1 / 1; background: var(--card2,rgba(255,255,255,0.03)); display: flex; align-items: center; justify-content: center}
.s213{position: absolute; inset: 0px; background: repeating-linear-gradient(135deg, var(--ph2,rgba(34,197,138,0.13)) 0 12px, transparent 12px 24px)}
.s214{max-width: 1100px; margin: 0px auto; padding: 40px 28px 90px}
.s215{font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.02em; margin: 0px 0px 30px; color: var(--fg,#eaf1ff)}
.s216{border: 1px solid var(--border,rgba(255,255,255,0.1)); border-radius: 16px; padding: 26px; background: var(--card,rgba(255,255,255,0.03))}
.s217{width: 34px; height: 34px; border-radius: 9px; background: var(--accent,#22c58a); display: flex; align-items: center; justify-content: center; margin-bottom: 14px}
.s218{width: 8px; height: 8px; background: rgb(6, 18, 43); border-radius: 2px; transform: rotate(45deg)}
.s219{font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 17px; margin: 0px 0px 8px; color: var(--fg,#eaf1ff)}
.s220{font-size: 14px; line-height: 1.5; color: var(--muted,#93a4c7); margin: 0px}
.s221{max-width: 1100px; margin: 0px auto; padding: 0px 28px 90px}
.s222{border: 1px solid var(--border,rgba(255,255,255,0.12)); border-radius: 24px; padding: 46px; background: var(--card2,rgba(255,255,255,0.03)); text-align: center}
.s223{font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(24px, 3vw, 36px); letter-spacing: -0.02em; margin: 0px 0px 24px; color: var(--fg,#eaf1ff)}
.s224{display: flex; gap: 12px; justify-content: center; flex-wrap: wrap}
.s225{cursor: pointer; padding: 10px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--fg,#eaf1ff); background: var(--card,rgba(255,255,255,0.05)); border: 1px solid var(--border,rgba(255,255,255,0.1)); text-decoration: none}
.s47{background:none;background-image:none}
.s55{background:none;background-image:none}
.s72{background:none;background-image:none}
.s213{background:none;background-image:none}
.h22:hover{color: var(--fg,#eaf1ff); background: var(--card,rgba(255,255,255,0.05));}
.h30:hover{filter: brightness(1.06); transform: translateY(-1px);}
.h45:hover{transform: translateY(-2px); filter: brightness(1.06);}
.h46:hover{background: var(--card,rgba(255,255,255,0.05)); border-color: var(--accent,#22c58a);}
.h50:hover{border-color: var(--accent,#22c58a); transform: translateY(-2px);}
.h64:hover{gap: 12px;}
.h77:hover{transform: translateY(-4px); border-color: var(--accent,#22c58a);}
.h90:hover{filter: brightness(1.06);}
.h97:hover{gap: 12px;}
.h118:hover{border-color: var(--accent,#22c58a); background: var(--card,rgba(255,255,255,0.05));}
.h121:hover{border-color: var(--accent,#22c58a);}
.h151:hover{transform: translateY(-2px);}
.h171:hover{filter: brightness(1.06);}
.h177:hover{color: var(--accent,#22c58a);}
.h183:hover{transform: translateY(-2px);}
.h201:hover{border-color: var(--accent,#22c58a);}
.h226:hover{filter: brightness(1.06);}
.h234:hover{filter: brightness(1.06);}
.h244:hover{border-color: #ff6b6b; color: #ff6b6b;}
.h249:hover{color: var(--fg,#eaf1ff); background: var(--card,rgba(255,255,255,0.05));}
.h307:hover{filter: brightness(1.06);}
.h315:hover{border-color: var(--accent,#22c58a);}
.h355:hover{color: var(--accent,#22c58a);}
.h356:hover{color: var(--accent,#22c58a);}
.h361:hover{color: var(--accent,#22c58a);}
.h372:hover{color: var(--accent,#22c58a);}
.f223:focus{border-color: var(--accent,#22c58a);}
.f231:focus{border-color: var(--accent,#22c58a);}
@media (max-width:860px){
.s15{padding:45px 28px 35px !important}
.s35{gap:33px !important}
.s38{padding:45px 28px !important}
.s39{grid-template-columns:1fr;gap:31px !important}
.s49{padding:30px 28px 45px !important}
.s53{grid-template-columns:1fr !important}
.s60{padding:45px 28px !important}
.s67{grid-template-columns:1fr;gap:31px !important}
.s74{padding:40px 28px !important}
.s78{grid-template-columns:1fr !important}
.s86{grid-template-columns:1fr !important}
.s92{grid-template-columns:1fr !important}
.s97{padding:30px 28px 50px !important}
.s98{padding:33px 40px !important}
.s106{padding:28px 28px 34px !important}
.s107{grid-template-columns:1fr;gap:22px !important}
.s120{padding:50px 28px 30px !important}
.s125{padding:40px 28px 30px !important}
.s129{padding:20px 28px 45px !important}
.s134{padding:40px 28px 40px !important}
.s156{padding:40px 28px 40px !important}
.s163{grid-template-columns:1fr;gap:22px !important}
.s204{padding:45px 28px 50px !important}
.s208{grid-template-columns:1fr;gap:28px !important}
.s214{padding:40px 28px 45px !important}
.s221{padding:0px 28px 45px !important}
}

/* com o CTA da demo, o header só cabe inteiro em telas largas: o seletor de tema
   (menos essencial) sai primeiro */
@media (max-width:1200px){
  header .pf-theme{display:none !important}
}
@media (max-width:960px){
  .pf-burger{display:block}
  header nav{display:none !important}
  header .pf-theme{display:none !important}
  header .pf-cta{display:none !important}
}
@media (max-width:860px){
  /* itens de flex/grid não encolhem abaixo do conteúdo por padrão: é o que faz
     a doc de API e as tabelas estourarem a viewport no celular */
  .page *{min-width:0}
  .page pre,.page code,.page table{overflow-x:auto;overflow-wrap:anywhere}
}
@media (max-width:520px){
  header > div{padding-left:16px !important;padding-right:16px !important;gap:10px !important}
  h1{letter-spacing:-.02em}
}