:root {
  --ink: #121e39;
  --muted: #4c5c76;
  --blue: #274cde;
  --night: #101a33;
  --ice: #b5caff;
  --glass-line: rgba(184, 204, 255, .28);
}

.header {
  background: rgba(250, 252, 255, .85);
  backdrop-filter: blur(20px) saturate(135%);
}

.hero {
  position: relative;
  isolation: isolate;
  color: #f9fbff;
  background:
    radial-gradient(ellipse at 74% 35%, #2d439a 0, transparent 55%),
    radial-gradient(ellipse at 100% 94%, #184866 0, transparent 46%),
    linear-gradient(115deg, #10182e 14%, #151f40 58%, #1e3159);
}

.hero::before,
.hero::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
}

.hero::before {
  background:
    linear-gradient(#9ab3ff14 1px, transparent 1px),
    linear-gradient(90deg, #9ab3ff14 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(115deg, transparent 18%, #000 82%);
}

.hero::after {
  background: radial-gradient(380px circle at var(--glow-x, 78%) var(--glow-y, 46%), #82a6ff29, transparent 100%);
}

.hero .eyebrow { color: #c3d4ff; }
.hero .eyebrow i { background: #95b9ff; box-shadow: 0 0 0 5px #95b9ff26, 0 0 20px #95b9ff; }
.hero h1 span { color: #a7b8ff; }
.hero .lead { color: #d8e4ff; }
.hero .micro { color: #c0cdea; }
.hero .micro svg { color: #80ebcf; }
.hero .primary { background: #a9bbff; color: #101a39; box-shadow: 0 9px 34px #7087fd54; }
.hero .primary:hover { background: #c5d2ff; }
.hero .secondary, .contact-box .outline {
  color: #f6f8ff;
  border-color: var(--glass-line);
  background: #ffffff14;
  backdrop-filter: blur(12px);
}
.hero .secondary:hover, .contact-box .outline:hover { background: #ffffff28; }

.orbit { border-color: #b0c7ff3d; }
.window {
  border-color: #c1d0ff69;
  background: linear-gradient(135deg, #40528cdd, #213457dc);
  backdrop-filter: blur(20px);
  box-shadow: 0 38px 80px #070d2580, inset 0 1px #ffffff30;
}
.window-top { color: #edf2ff; border-color: #bacdff38; }
.window-side { color: #d1ddff; background: #131e3f65; border-color: #bacdff38; }
.window-content { background: #eef3ffdf; color: var(--ink); }
.window .demo-tag { color: #ecf3ff; background: #b7caff29; }
.window .mini-stats div, .window .mini-chart, .window .mini-donut { background: #ffffffd9; }
.float-chip {
  color: #f7faff;
  background: linear-gradient(135deg, #3c5387e8, #233456ed);
  border-color: #c5d6ff55;
  backdrop-filter: blur(16px);
  box-shadow: 0 14px 35px #10163088, inset 0 1px #ffffff26;
}
.float-chip small { color: #d8e5ff; }
.float-icon { background: #acc5ff28; color: #dce8ff; }
.strip { background: #f1f5ff; }

.explorer {
  background: radial-gradient(ellipse at 94% 11%, #354b8b, transparent 65%), #141f3d;
  border-color: #26385e;
  box-shadow: 0 26px 48px #24366521;
  color: #f5f8ff;
}
.module-tabs { background: #ffffff0c; border-color: var(--glass-line); }
.module-tabs button { color: #d8e3ff; }
.module-tabs button:hover, .module-tabs button[aria-selected=true] {
  background: #c4d3ff2b;
  border-color: #c4d3ff55;
  color: #fff;
}
.module-copy .eyebrow { color: #b7caff; }
.module-copy p { color: #d5e1ff; }
.module-copy li svg { color: #8becd2; }
.demo-frame { color: var(--ink); }
.demo-row .pill { flex-shrink: 0; }

.workflow { padding-top: 4px; }
.workflow-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.workflow-grid li {
  padding: 21px;
  border: 1px solid #dbe5fa;
  border-radius: 15px;
  background: linear-gradient(135deg, #fff, #eef3ff);
}
.workflow-grid h3 { font-size: 17px; margin: 12px 0 6px; letter-spacing: -.025em; }
.workflow-grid p { font-size: 14px; color: var(--muted); margin: 0; }
.step-number { color: #2446bc; font-size: 13px; font-weight: 850; letter-spacing: .13em; }

.integration-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: clamp(22px, 4vw, 50px);
  border: 1px solid #dbe5f8;
  border-radius: 23px;
  background: radial-gradient(ellipse at 93% 12%, #dfe8ff, transparent 62%), #f3f7ff;
}
.integration-box .section-intro { margin: 0; }
.integration-box .section-intro > p { color: var(--muted); margin: 0 0 18px; }
.integration-box .section-intro > .eyebrow { color: #2148c2; }
#apps { padding-top: 4px; }
.app-card, .resource-grid article { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.app-visual {
  background: radial-gradient(ellipse at 80% 15%, #5d76ca, transparent 75%), #25375f;
}
.app-card:nth-child(2) .app-visual {
  background: radial-gradient(ellipse at 80% 15%, #3e958e, transparent 75%), #193d4d;
}
.app-card:nth-child(3) .app-visual {
  background: radial-gradient(ellipse at 80% 15%, #866ec6, transparent 75%), #3a2e65;
}
.app-visual::before, .app-visual::after { border-color: #dee9ff50; }


.phone-mock {
  position: absolute;
  z-index: 1;
  top: 15px;
  width: min(144px, 89%);
  height: 206px;
  border: 3px solid #899bc6;
  border-radius: 22px;
  background: #111725;
  box-shadow: 0 10px 24px #0b112c85, inset 0 0 0 1px #050912;
  transform: rotate(-5deg);
}
.phone-mock--cliente { transform: rotate(4deg); }
.phone-mock--investidor { transform: rotate(-4deg); }
.phone-mock::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 29px;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 8px;
  background: #040811;
}
.phone-brand {
  position: absolute;
  top: 74px;
  left: 13%;
  right: 13%;
  display: grid;
  color: white;
}
.phone-brand img {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
}
.phone-brand span {
  justify-self: end;
  padding-right: 3%;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}
.phone-mock--investidor .phone-brand span {
  justify-self: center;
  padding-right: 0;
  letter-spacing: .25em;
}
.contact-box {
  background: radial-gradient(ellipse at 97% 9%, #4256aa, transparent 63%), #151f3e;
  border: 1px solid #334a86;
  box-shadow: 0 18px 45px #172a5a24;
}

@media (hover: hover) and (pointer: fine) {
  .app-card:hover, .resource-grid article:hover {
    transform: translateY(-4px);
    border-color: #b2c5ff;
    box-shadow: 0 16px 32px #18397115;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-art { animation: hero-arrival .8s cubic-bezier(.2,.65,.35,1) both; }
  @keyframes hero-arrival {
    from { opacity: 0; transform: translateY(13px); }
    to { opacity: 1; transform: translateY(0); }
  }
}
@media (max-width: 790px) {
  .workflow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .integration-box { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 420px) {
  .workflow-grid { grid-template-columns: 1fr; }
}