:root {
    --blue: #487fff;
    --blue-dark: #2e5fe4;
    --ink: #101828;
    --muted: #667085;
    --line: #e5eaf2;
    --soft: #f6f8fc;
    --navy: #0d1830;
    --green: #18a873
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    color: var(--ink);
    background: #fff;
    font: 15px/1.65 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif
}

a {
    color: inherit;
    text-decoration: none
}

.container {
    width: min(1180px, calc(100% - 40px));
    margin: auto
}

.skip {
    position: fixed;
    top: -60px;
    left: 16px;
    z-index: 100;
    background: #fff;
    padding: 10px
}

.skip:focus {
    top: 10px
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase
}

.eyebrow:before {
    content: "";
    width: 22px;
    height: 2px;
    background: currentColor
}

.eyebrow.light {
    color: #8fafff
}

header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    border-bottom: 1px solid rgba(225, 230, 239, .75);
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(18px)
}

.nav {
    height: 76px;
    display: flex;
    align-items: center
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-right: auto
}

.brand img {
   /* width: 42px;
    height: 42px;
    border-radius: 12px
    */
        width: 50px;
    height: 50px;
    border-radius: 32px;
    border: 0.5px solid #487fff;
    padding: 3px;
    transform: rotate(25deg);
}

.brand>span {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.15
}

.brand strong {
    color: var(--blue);
    font-weight: 800
}

.brand small {
    display: block;
    margin-top: 4px;
    color: #8994a7;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase
}

.nav nav {
    display: flex;
    gap: 31px
}

.nav nav a,
.access>a:first-child {
    color: #475467;
    font-size: 13px;
    font-weight: 650
}

.nav nav a:hover,
.access>a:first-child:hover {
    color: var(--blue)
}

.access {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-left: 38px
}

.button {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 0 24px;
    border: 0;
    border-radius: 25px;
    color: #fff;
    background: var(--blue);
    box-shadow: 0 12px 24px rgba(72, 127, 255, .2);
    font-weight: 750;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s
}

.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(72, 127, 255, .3)
}

.button.small {
    min-height: 42px;
    padding: 0 18px;
    font-size: 13px
}

.menu-button {
    display: none;
    border: 0;
    background: none
}

.hero {
    position: relative;
    overflow: hidden;
    min-height: 760px;
    padding: 145px 0 90px;
    background:
        linear-gradient(rgba(72,127,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(72,127,255,.035) 1px, transparent 1px),
        radial-gradient(circle at 82% 26%, rgba(72,127,255,.16), transparent 30%),
        linear-gradient(125deg, #fff 18%, #f3f7ff 100%);
    background-size: 52px 52px, 52px 52px, auto, auto
}

.hero:after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 110px;
    background: linear-gradient(transparent, rgba(255,255,255,.92));
    pointer-events: none
}

.hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 30px;
    align-items: center;
    min-height: 520px
}

.hero-copy {
    position: relative;
    z-index: 2
}

.hero-copy .eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 13px;
    border: 1px solid #cad8ff;
    border-radius: 999px;
    background: rgba(255,255,255,.85);
    box-shadow: 0 8px 24px rgba(48,79,145,.08)
}

.hero h1,
.heading h2,
.spot-copy h2,
.security h2,
.contact h2 {
    margin: 18px 0 22px;
    font-size: clamp(48px, 5vw, 72px);
    line-height: 1.01;
    letter-spacing: -.055em
}

.hero h1 {
    max-width: 640px;
    font-size: clamp(48px, 4.4vw, 68px);
    text-wrap: balance
}

.hero h1 span,
.hero h1 strong,
.heading h2 span,
.heading h2 strong,
.spot-copy h2 span,
.spot-copy h2 strong,
.security h2 span,
.security h2 strong,
.contact h2 span,
.contact h2 strong {
    display: block
}

.hero h1 span,
.heading h2 span,
.spot-copy h2 span,
.security h2 span,
.contact h2 span {
    font-weight: 350
}

.hero h1 strong,
.heading h2 strong,
.spot-copy h2 strong,
.contact h2 strong {
    color: var(--blue);
    font-weight: 800
}

.hero-copy>p {
    max-width: 620px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.75
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 26px;
    margin: 34px 0
}

.hero-actions .button {
    min-height: 56px;
    padding-inline: 25px;
    box-shadow: 0 16px 34px rgba(72,127,255,.3)
}

.play {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #344054;
    font-weight: 750
}

.play i {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid #d9e1ef;
    border-radius: 50%;
    color: var(--blue);
    font-size: 10px;
    font-style: normal;
    background: #fff
}

.trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 5px;
    border-top: 0;
    color: #778399;
    font-size: 13px;
    line-height: 1.25
}

.trust span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    padding: 12px 14px;
    white-space: nowrap;
    border: 1px solid rgba(217,225,239,.9);
    border-radius: 11px;
    background: rgba(255,255,255,.72)
}

.trust svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--blue)
}

.trust b {
    color: var(--ink);
    font-size: inherit;
    font-weight: 800
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(1px)
}

.orb.one {
    top: 100px;
    right: -170px;
    width: 430px;
    height: 430px;
    background: rgba(72, 127, 255, .08)
}

.orb.two {
    bottom: -120px;
    left: 35%;
    width: 280px;
    height: 280px;
    background: rgba(57, 210, 184, .08)
}

.visual {
    position: relative;
    min-width: 0;
    width: 100%;
    padding: 46px 0
}

.visual:before {
    content: "";
    position: absolute;
    inset: 2% -6%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(72,127,255,.25), transparent 68%);
    filter: blur(8px)
}

.dash {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: transparent;
    box-shadow: 0 35px 90px rgba(35,57,105,.25);
    transform: none;
    animation: dashFloatPanel 5.5s ease-in-out infinite
}

.dash:after {
    content: "";
    position: absolute;
    z-index: 2;
    top: -35%;
    bottom: -35%;
    left: -45%;
    width: 22%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
    filter: blur(5px);
    pointer-events: none;
    transform: rotate(14deg);
    animation: dashShine 8s ease-in-out infinite
}

@media(min-width:1200px) {
    .hero>.container {
        width: min(1180px, calc(100% - 40px))
    }

    .visual {
        margin-right: 0
    }
}

.dash-screenshot {
    display: block;
    max-width: 100%;
    width: 100%;
    height: 380px;
    aspect-ratio: 1633 / 963;
    border-radius: 14px;

    transform-origin: center;
    animation: dashMotion 7s ease-in-out infinite alternate
}

.dash-screenshot~.dash-bar,
.dash-screenshot~.dash-body {
    display: none !important
}

@media(max-width:960px) {
    .hero,
    .hero-grid {
        min-height: 0
    }

    .dash-screenshot {
        height: auto
    }
}

.dash-bar {
    height: 39px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 13px;
    border-bottom: 1px solid var(--line);
    color: #9aa5b5;
    font-size: 9px
}

.dash-bar>i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d6dce5
}

.dash-bar span {
    margin-left: 5px
}

.dash-bar b {
    margin-left: auto
}

.dash-body {
    display: grid;
    grid-template-columns: 48px 1fr;
    min-height: 390px;
    background: #f5f7fb
}

.dash-body aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 12px 0;
    background: #10192c
}

.dash-body aside img {
    width: 29px;
    height: 29px;
    border-radius: 8px
}

.dash-body aside i {
    width: 15px;
    height: 15px;
    border: 2px solid #59677f;
    border-radius: 5px
}

.dash-body aside i.active {
    border-color: #9eb8ff;
    background: #487fff
}

.dash-content {
    padding: 23px
}

.hello span,
.hello b {
    display: block
}

.hello span {
    color: #9ba5b5;
    font-size: 9px
}

.hello b {
    font-size: 18px
}

.metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 18px 0
}

.metrics article {
    position: relative;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff
}

.metrics span,
.metrics small {
    display: block;
    color: #8c98aa;
    font-size: 8px
}

.metrics b {
    font-size: 17px
}

.metrics small {
    position: absolute;
    right: 10px;
    bottom: 13px;
    color: var(--green)
}

.dash-lower {
    display: grid;
    grid-template-columns: 1.7fr .8fr;
    gap: 8px
}

.chart,
.radar {
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff
}

.chart>span,
.radar>span {
    font-size: 9px;
    font-weight: 700
}

.chart svg {
    display: block;
    width: 100%;
    height: 130px
}

.chart .area {
    fill: url(#area)
}

.chart .line {
    fill: none;
    stroke: var(--blue);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 600;
    animation: draw 2.8s ease forwards
}

.radar>div {
    position: relative;
    width: 95px;
    height: 95px;
    margin: 22px auto;
    border: 1px solid #e1e8f4;
    border-radius: 50%
}

.radar i {
    position: absolute;
    inset: 12px;
    border: 1px solid #e1e8f4;
    border-radius: 50%
}

.radar i:nth-child(2) {
    inset: 25px
}

.radar i:nth-child(3) {
    inset: 40px;
    background: var(--blue);
    border: 0
}

.radar b {
    position: absolute;
    inset: auto 0 -24px;
    text-align: center;
    color: var(--blue)
}

.float-card {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 185px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 17px;
    background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(244,248,255,.9));
    box-shadow: 0 18px 42px rgba(32, 48, 80, .18), inset 0 1px 0 #fff;
    backdrop-filter: blur(12px);
    will-change: transform;
    animation: floatTop 6s ease-in-out infinite
}

.float-card>i {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(145deg, #25c997, #0e9f78);
    box-shadow: 0 8px 18px rgba(15,167,123,.25);
    font-style: normal
}

.float-card span,
.float-card b {
    display: block;
    color: #667085;
    font-size: 11px
}

.float-card b {
    margin-bottom: 2px;
    color: #172033;
    font-size: 14px
}

.float-a {
    right: -28px;
    top: 0
}

.float-b {
    left: -28px;
    bottom: -2px;
    animation-name: floatBottom;
    animation-duration: 7s;
    animation-delay: -2.5s
}

.float-b>i {
    background: linear-gradient(145deg, #6795ff, #356bea);
    box-shadow: 0 8px 18px rgba(72,127,255,.28)
}

@keyframes draw {
    from {
        stroke-dashoffset: 600
    }

    to {
        stroke-dashoffset: 0
    }
}

@keyframes floatTop {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0) }
    50% { transform: translate3d(-5px, -11px, 0) rotate(-.6deg); box-shadow: 0 25px 50px rgba(32,48,80,.23), inset 0 1px 0 #fff }
}

@keyframes floatBottom {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0) }
    50% { transform: translate3d(6px, 10px, 0) rotate(.7deg); box-shadow: 0 25px 50px rgba(32,48,80,.23), inset 0 1px 0 #fff }
}

@keyframes dashMotion {
    0% {
        transform: scale(1.04) translate3d(-8px, 0, 0)
    }

    50% {
        transform: scale(1.075) translate3d(0, -8px, 0)
    }

    100% {
        transform: scale(1.04) translate3d(8px, 4px, 0)
    }
}

@keyframes dashFloatPanel {
    0%, 100% {
        transform: translateY(0);
        box-shadow: 0 35px 90px rgba(35,57,105,.25)
    }

    50% {
        transform: translateY(-10px);
        box-shadow: 0 48px 105px rgba(35,57,105,.32)
    }
}

@keyframes dashShine {
    0%, 58% {
        left: -45%;
        opacity: 0
    }

    66% {
        opacity: .8
    }

    86%, 100% {
        left: 125%;
        opacity: 0
    }
}

.proof {
    border-block: 1px solid var(--line);
    background: #fff
}

.proof .container {
    display: flex;
    align-items: center;
    min-height: 90px
}

.proof p {
    margin-right: auto;
    font-weight: 700
}

.proof div div {
    display: flex;
    gap: 29px;
    color: #7a8699;
    font-size: 12px;
    font-weight: 650
}

.journey,
.modules,
.pricing {
    padding: 120px 0
}

.heading {
    max-width: 790px;
    margin-bottom: 65px
}

.heading h2 {
    font-size: clamp(42px, 4.5vw, 62px)
}

.heading>p {
    max-width: 650px;
    color: var(--muted);
    font-size: 17px
}

.heading.centered {
    margin-inline: auto;
    text-align: center
}

.heading.centered .eyebrow {
    justify-content: center
}

.heading.compact {
    max-width: 850px
}

.journey-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line)
}

.journey-grid article {
    position: relative;
    padding: 35px 25px;
    border-right: 1px solid var(--line)
}

.journey-grid article:last-child {
    border: 0
}

.journey-grid article>b {
    color: #aeb9c9;
    font-size: 12px
}

.journey-grid article>i {
    display: block;
    width: 45px;
    height: 45px;
    margin: 45px 0 28px;
    border: 10px solid #edf2ff;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 0 1px #d9e4ff
}

.journey-grid h3 {
    font-size: 21px
}

.journey-grid p {
    min-height: 100px;
    color: var(--muted);
    font-size: 13px
}

.journey-grid span {
    color: var(--blue);
    font-size: 12px;
    font-weight: 750
}

.spotlight {
    overflow: hidden;
    padding: 120px 0;
    color: #fff;
    background: var(--navy)
}

.spotlight .container {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 80px;
    align-items: center
}

.spot-copy h2,
.security h2,
.contact h2 {
    font-size: clamp(40px, 4.2vw, 58px)
}

.spot-copy h2 strong,
.security h2 strong {
    color: #8fafff
}

.spot-copy>p,
.security-grid>div>p {
    color: #adb9cb;
    font-size: 16px
}

.spot-copy ul {
    padding: 15px 0;
    list-style: none
}

.spot-copy li {
    display: flex;
    gap: 13px;
    margin: 20px 0
}

.spot-copy li>i {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: rgba(72, 127, 255, .25);
    font-style: normal
}

.spot-copy li b,
.spot-copy li span {
    display: block
}

.spot-copy li span {
    color: #aab6c8;
    font-size: 12px
}

.spot-copy li b {
    color: #fff;
    font-size: 14px
}

.spot-copy>a {
    color: #8fafff;
    font-weight: 750
}

.orbit {
    position: relative;
    min-height: 540px
}

.ring {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(143, 175, 255, .25);
    border-radius: 50%;
    transform: translate(-50%, -50%)
}

.r1 {
    width: 330px;
    height: 330px
}

.r2 {
    width: 500px;
    height: 500px
}

.orbit-core,
.orbit-item {
    position: absolute;
    display: flex;
    align-items: center;
    border: 1px solid rgba(143, 175, 255, .25);
    background: #152441;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .25)
}

.orbit-core {
    left: 50%;
    top: 50%;
    width: 200px;
    height: 200px;
    flex-direction: column;
    justify-content: center;
    border-radius: 50%;
    transform: translate(-50%, -50%)
}

.orbit-core img {
    width: 55px;
    border-radius: 15px
}

.orbit-core b {
    margin-top: 12px
}

.orbit-core span {
    color: #8ea0ba;
    font-size: 10px
}

.orbit-item {
    gap: 10px;
    min-width: 135px;
    padding: 13px;
    border-radius: 13px
}

.orbit-item i {
    width: 28px;
    height: 28px;
    border: 8px solid rgba(72, 127, 255, .23);
    border-radius: 50%;
    background: #487fff
}

.orbit-item span,
.orbit-item b {
    display: block;
    font-size: 9px
}

.orbit-item b {
    font-size: 11px
}

.oi-1 {
    top: 20px;
    left: 40%
}

.oi-2 {
    top: 45%;
    right: -5px
}

.oi-3 {
    bottom: 20px;
    left: 42%
}

.oi-4 {
    top: 45%;
    left: -5px
}

.modules {
    background: var(--soft)
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px
}

.module-grid article {
    position: relative;
    min-height: 220px;
    padding: 27px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #fff;
    transition: .25s
}

.module-grid article:hover {
    transform: translateY(-5px);
    border-color: #b9ccff;
    box-shadow: 0 18px 40px rgba(42, 62, 100, .08)
}

.module-grid article>i {
    color: #9ba6b7;
    font-style: normal;
    font-size: 11px
}

.module-grid h3 {
    margin-top: 45px
}

.module-grid p {
    color: var(--muted);
    font-size: 13px
}

.module-grid article>span {
    position: absolute;
    right: 22px;
    bottom: 19px;
    color: var(--blue)
}

.security {
    padding: 105px 0;
    color: #fff;
    background: #152441
}

.security-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: center
}

.security-cards article {
    display: flex;
    gap: 18px;
    padding: 21px 0;
    border-bottom: 1px solid #2e405e
}

.security-cards>article>i {
    display: grid;
    width: 43px;
    height: 43px;
    place-items: center;
    border-radius: 12px;
    color: #8fafff;
    background: #203353;
    font-style: normal;
    font-size: 22px
}

.security-cards b,
.security-cards span {
    display: block
}

.security-cards span {
    color: #98a9c0;
    font-size: 12px
}

.plan-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px
}

.plan-grid article {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff
}

.plan-grid article.featured {
    color: #fff;
    border-color: var(--blue);
    background: var(--blue);
    box-shadow: 0 22px 45px rgba(72, 127, 255, .25)
}

.plan-grid mark {
    position: absolute;
    top: -12px;
    left: 50%;
    padding: 5px 13px;
    border-radius: 20px;
    color: var(--blue);
    background: #fff;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .1);
    font-size: 9px;
    transform: translateX(-50%)
}

.plan-grid>article>span {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase
}

.plan-grid article>div {
    display: flex;
    align-items: baseline;
    margin: 18px 0
}

.plan-grid article>div b {
    font-size: 34px
}

.plan-grid article>div small {
    margin-right: 5px
}

.plan-grid article>div em {
    font-size: 10px;
    font-style: normal
}

.plan-grid p {
    color: var(--muted);
    font-size: 12px
}

.featured p {
    color: #dfe7ff
}

.plan-grid ul {
    flex: 1;
    padding: 5px 0;
    list-style: none
}

.plan-grid li {
    margin: 10px 0;
    font-size: 12px
}

.plan-grid li:before {
    content: "✓";
    margin-right: 8px;
    color: var(--green)
}

.featured li:before {
    color: #fff
}

.button.ghost {
    color: var(--blue);
    border: 1px solid #cbd8f8;
    background: #fff;
    box-shadow: none
}

.featured .button {
    color: var(--blue);
    background: #fff;
    box-shadow: none
}

.contact {
    padding: 110px 0;
    background: #eef3ff
}

.contact-box {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 75px;
    align-items: center;
    padding: 60px;
    border-radius: 28px;
    color: #fff;
    background: var(--blue);
    box-shadow: 0 28px 65px rgba(72, 127, 255, .22)
}

.contact h2 strong {
    color: #fff
}

.contact-box>div>p {
    color: #dfe7ff;
    font-size: 16px
}

.contact-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 28px;
    font-size: 11px
}

.contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
    padding: 27px;
    border-radius: 19px;
    color: var(--ink);
    background: #fff
}

.contact-form label {
    font-size: 11px;
    font-weight: 700
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    margin-top: 6px;
    padding: 12px;
    border: 1px solid #d9e0eb;
    border-radius: 9px;
    font: 14px system-ui
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: 3px solid #dce5ff;
    border-color: var(--blue)
}

.full,
.form-status {
    grid-column: 1/-1
}

.check {
    display: flex;
    align-items: center;
    color: var(--muted);
    font-weight: 400 !important
}

.check input {
    width: auto;
    margin: 0 8px 0 0
}

.check a {
    color: var(--blue)
}

.trap {
    position: absolute;
    left: -9999px
}

.form-status {
    padding: 9px;
    border-radius: 8px
}

.form-status.ok {
    color: #067647;
    background: #ecfdf3
}

.form-status.error {
    color: #b42318;
    background: #fef3f2
}

footer {
    position: relative;
    overflow: hidden;
    padding: 76px 0 24px;
    color: #aab6ca;
    background: radial-gradient(circle at 8% 0, rgba(72, 127, 255, .17), transparent 31%), #0b1426
}

footer:before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(104, 146, 255, .75), transparent)
}

.footer-main {
    position: relative;
    display: grid;
    grid-template-columns: minmax(250px, 1.55fr) repeat(3, minmax(90px, .55fr)) minmax(220px, 1fr);
    gap: clamp(28px, 4vw, 58px)
}

.footer-brand .brand span { color: #fff }
.footer-brand .brand small { color: #91a0b9 }

.footer-brand p {
    max-width: 330px;
    margin: 24px 0 0 53px;
    color: #9eabc0;
    font-size: 14px;
    line-height: 1.75
}

.footer-main nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
    font-size: 13px
}

.footer-main nav b {
    margin-bottom: 10px;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase
}

.footer-main nav a { transition: color .2s ease, transform .2s ease }
.footer-main nav a:hover { color: #fff; transform: translateX(3px) }

.footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px
}

.footer-contact>b {
    margin-bottom: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase
}

.footer-contact>a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: #d6deeb;
    font-size: 13px;
    line-height: 1.35;
    transition: color .2s ease, transform .2s ease
}

.footer-contact>a:hover { color: #fff; transform: translateX(3px) }

.footer-contact i {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border: 1px solid #2a3b59;
    border-radius: 12px;
    color: #81a3ff;
    background: rgba(72,127,255,.09)
}

.footer-contact a:first-of-type i { color: #43d19e; border-color: rgba(67,209,158,.3); background: rgba(67,209,158,.1) }
.footer-contact a:last-of-type i { color: #81a3ff; border-color: rgba(129,163,255,.3); background: rgba(72,127,255,.1) }
.footer-contact svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.footer-contact .whatsapp-icon { width: 22px; height: 22px; stroke-width: 1.65; shape-rendering: geometricPrecision }
.footer-contact small { display: block; margin-bottom: 3px; color: #8fa0ba; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase }

.footer-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 62px;
    padding-top: 22px;
    border-top: 1px solid #26344b;
    color: #7f8da5;
    font-size: 11px;
    text-align: center
}

.footer-note { display: inline-flex; align-items: center; gap: 8px }
.footer-note i { width: 7px; height: 7px; border-radius: 50%; background: #18b981; box-shadow: 0 0 0 4px rgba(24,185,129,.12) }

.menu-button {
    display: none
}

@media(max-width:960px) {

    .nav nav,
    .access {
        display: none
    }

    .menu-button {
        display: block;
        margin-left: auto
    }

    .menu-button i {
        display: block;
        width: 23px;
        height: 2px;
        margin: 5px;
        background: var(--ink)
    }

    header.open .nav nav {
        position: absolute;
        top: 76px;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 12px 20px;
        border-bottom: 1px solid var(--line);
        background: #fff
    }

    header.open .nav nav a {
        padding: 13px
    }

    .hero-grid,
    .spotlight .container,
    .security-grid,
    .contact-box {
        grid-template-columns: 1fr
    }

    .hero-copy {
        text-align: center
    }

    .hero-copy>p {
        margin-inline: auto
    }

    .hero-actions,
    .trust {
        justify-content: center
    }

    .visual {
        max-width: 720px;
        margin: auto
    }

    .proof .container {
        flex-direction: column;
        padding-block: 25px
    }

    .proof p {
        margin: 0 0 15px
    }

    .journey-grid,
    .module-grid,
    .plan-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .spot-copy {
        max-width: 670px
    }

    .orbit {
        max-width: 650px;
        width: 100%;
        margin: auto
    }

    .security-grid {
        gap: 45px
    }

    .contact-box {
        padding: 45px
    }

    .footer-main {
        grid-template-columns: 1.5fr repeat(3, 1fr);
        gap: 34px
    }

    .footer-contact { grid-column: 1/-1; display: grid; grid-template-columns: repeat(2, max-content); align-items: center; margin-top: 8px }
    .footer-contact>b { grid-column: 1/-1 }
}

@media(max-width:620px) {
    .container {
        width: calc(100% - 28px)
    }

    .nav {
        height: 66px
    }

    .brand img {
        width: 37px;
        height: 37px
    }

    .hero {
        padding: 115px 0 65px
    }

    .hero h1 {
        font-size: 43px
    }

    .hero-copy>p {
        font-size: 16px
    }

    .hero-actions {
        flex-direction: column
    }

    .trust {
        gap: 12px
    }

    .dash {
        transform: none
    }

    .dash-body {
        grid-template-columns: 38px 1fr;
        min-height: 300px
    }

    .dash-content {
        padding: 12px
    }

    .metrics {
        grid-template-columns: repeat(2, 1fr)
    }

    .metrics article:last-child {
        display: none
    }

    .dash-lower {
        grid-template-columns: 1fr
    }

    .radar {
        display: none
    }

    .float-card {
        display: none
    }

    .proof div div {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 20px
    }

    .journey,
    .modules,
    .pricing,
    .contact,
    .spotlight {
        padding: 78px 0
    }

    .heading h2,
    .spot-copy h2,
    .security h2,
    .contact h2 {
        font-size: 38px
    }

    .journey-grid,
    .module-grid,
    .plan-grid {
        grid-template-columns: 1fr
    }

    .journey-grid article {
        border-right: 0;
        border-bottom: 1px solid var(--line)
    }

    .journey-grid article>i {
        margin: 25px 0
    }

    .journey-grid p {
        min-height: 0
    }

    .orbit {
        min-height: 390px;
        transform: scale(.78);
        margin-block: -40px
    }

    .r2 {
        width: 430px;
        height: 430px
    }

    .contact-box {
        width: 100%;
        padding: 28px 18px;
        border-radius: 0
    }

    .contact-form {
        grid-template-columns: 1fr;
        padding: 18px
    }

    .full {
        grid-column: auto
    }

    .footer-main {
        grid-template-columns: 1fr 1fr
    }

    .footer-main>div {
        grid-column: 1/-1
    }

    .footer-brand p { margin-left: 0 }

    .footer-contact { display: flex; align-items: flex-start; margin-top: 12px }

    .footer-bottom {
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 12px;
        margin-top: 42px;
        text-align: center
    }

    .contact {
        background: var(--blue)
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    * {
        animation: none !important;
        transition: none !important
    }
}

/* Refinamento visual: fundo técnico, ícones da jornada e microinterações */
.hero {
    background: linear-gradient(122deg, #fff 12%, #f8faff 58%, #f2f6ff 100%)
}

.hero .orb {
    display: none
}

.hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(72, 127, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(72, 127, 255, .035) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(90deg, transparent 3%, #000 62%, transparent 100%);
    pointer-events: none
}

.hero:after {
    content: "";
    position: absolute;
    top: -45%;
    right: -12%;
    width: 72%;
    height: 130%;
    background: radial-gradient(ellipse at center, rgba(72, 127, 255, .14), rgba(72, 127, 255, .04) 40%, transparent 70%);
    transform: rotate(-12deg);
    pointer-events: none
}

.journey-grid article {
    transition: transform .35s ease, background-color .35s ease, box-shadow .35s ease, border-color .35s ease
}

.journey-grid article:hover {
    z-index: 2;
    border-color: transparent;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(34, 55, 95, .09);
    transform: translateY(-7px)
}

.journey-grid article>i {
    position: relative;
    display: grid;
    width: 58px;
    height: 58px;
    margin: 38px 0 26px;
    place-items: center;
    border: 1px solid #d9e4ff;
    border-radius: 17px;
    background: #edf3ff;
    box-shadow: none
}

.journey-grid article>i:before,
.journey-grid article>i:after {
    content: "";
    position: absolute;
    display: block
}

.journey-grid article:nth-child(1)>i:before {
    top: 12px;
    width: 13px;
    height: 13px;
    border: 2px solid var(--blue);
    border-radius: 50%
}

.journey-grid article:nth-child(1)>i:after {
    bottom: 10px;
    width: 29px;
    height: 15px;
    border: 2px solid var(--blue);
    border-bottom: 0;
    border-radius: 18px 18px 0 0
}

.journey-grid article:nth-child(2)>i:before {
    width: 25px;
    height: 31px;
    border: 2px solid var(--blue);
    border-radius: 50% 50% 50% 6px;
    transform: rotate(-45deg)
}

.journey-grid article:nth-child(2)>i:after {
    width: 7px;
    height: 7px;
    border: 2px solid var(--blue);
    border-radius: 50%
}

.journey-grid article:nth-child(3)>i:before {
    width: 29px;
    height: 22px;
    border: 2px solid var(--blue);
    border-radius: 6px
}

.journey-grid article:nth-child(3)>i:after {
    right: 9px;
    bottom: 9px;
    width: 15px;
    height: 15px;
    border: 4px solid #edf3ff;
    border-radius: 50%;
    background: var(--blue)
}

.journey-grid article:nth-child(4)>i {
    background: linear-gradient(90deg, transparent 16px, var(--blue) 16px, var(--blue) 21px, transparent 21px), linear-gradient(90deg, transparent 26px, var(--blue) 26px, var(--blue) 31px, transparent 31px), linear-gradient(90deg, transparent 36px, var(--blue) 36px, var(--blue) 41px, transparent 41px), #edf3ff;
    background-size: 100% 18px, 100% 26px, 100% 35px, 100%;
    background-position: 0 25px, 0 17px, 0 8px, 0;
    background-repeat: no-repeat
}

.journey-grid article:nth-child(4)>i:before {
    left: 12px;
    right: 12px;
    bottom: 11px;
    height: 2px;
    background: var(--blue)
}

.journey-grid article:nth-child(4)>i:after {
    display: none
}

.metrics article,
.module-grid article,
.plan-grid article,
.security-cards article,
.float-card {
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease
}

.metrics article:hover {
    z-index: 2;
    border-color: #bfd0ff;
    box-shadow: 0 10px 25px rgba(48, 70, 110, .1);
    transform: translateY(-4px)
}

.module-grid article:hover {
    transform: translateY(-6px)
}

.plan-grid article:hover {
    z-index: 2;
    box-shadow: 0 18px 38px rgba(42, 62, 100, .11);
    transform: translateY(-6px)
}

.plan-grid article.featured:hover {
    box-shadow: 0 28px 52px rgba(72, 127, 255, .3)
}

.security-cards article:hover {
    transform: translateX(7px)
}

@media(max-width:620px) {
    .hero:before {
        background-size: 42px 42px
    }

    .hero:after {
        top: -25%;
        right: -65%;
        width: 145%
    }

    .journey-grid article:hover,
    .metrics article:hover,
    .module-grid article:hover,
    .plan-grid article:hover,
    .security-cards article:hover {
        transform: none
    }
}

/* Família de ícones coloridos */
.journey-grid article>i {
    width: 64px;
    height: 64px;
    border: 0;
    box-shadow: 0 10px 22px rgba(35, 55, 95, .12)
}

.journey-grid article:nth-child(1)>i {
    background: linear-gradient(145deg, #e9f0ff, #cddcff)
}

.journey-grid article:nth-child(2)>i {
    background: linear-gradient(145deg, #e7fbf5, #bdeedc)
}

.journey-grid article:nth-child(3)>i {
    background: linear-gradient(145deg, #fff4d8, #ffe099)
}

.journey-grid article:nth-child(4)>i {
    background: linear-gradient(145deg, #f2eaff, #d9c3ff)
}

.journey-grid article:nth-child(1)>i:before,
.journey-grid article:nth-child(1)>i:after {
    border-color: #487fff
}

.journey-grid article:nth-child(2)>i:before,
.journey-grid article:nth-child(2)>i:after {
    border-color: #12a477
}

.journey-grid article:nth-child(3)>i:before {
    border-color: #e19a00
}

.journey-grid article:nth-child(3)>i:after {
    border-color: #fff4d8;
    background: #e19a00
}

.journey-grid article:nth-child(4)>i {
    background-image: linear-gradient(90deg, transparent 18px, #8758dc 18px, #8758dc 23px, transparent 23px), linear-gradient(90deg, transparent 29px, #8758dc 29px, #8758dc 34px, transparent 34px), linear-gradient(90deg, transparent 40px, #8758dc 40px, #8758dc 45px, transparent 45px), linear-gradient(145deg, #f2eaff, #d9c3ff);
    background-size: 100% 18px, 100% 27px, 100% 37px, 100%;
    background-position: 0 29px, 0 20px, 0 10px, 0;
    background-repeat: no-repeat
}

.journey-grid article:nth-child(4)>i:before {
    background: #8758dc
}

.module-grid article {
    padding-top: 25px
}

.module-grid article:before {
    content: "";
    display: block;
    width: 48px;
    height: 48px;
    margin: 12px 0 25px;
    border-radius: 14px;
    box-shadow: 0 9px 20px rgba(35, 55, 95, .1)
}

.module-grid article:after {
    content: "";
    position: absolute;
    top: 48px;
    left: 41px;
    width: 22px;
    height: 22px;
    background: #fff;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain
}

.module-grid article>i {
    position: absolute;
    top: 24px;
    right: 24px
}

.module-grid h3 {
    margin-top: 0
}

.module-grid article:nth-child(1):before {
    background: linear-gradient(145deg, #5d90ff, #386fe9)
}

.module-grid article:nth-child(2):before {
    background: linear-gradient(145deg, #29c99a, #10936c)
}

.module-grid article:nth-child(3):before {
    background: linear-gradient(145deg, #ffb84d, #ed8f12)
}

.module-grid article:nth-child(4):before {
    background: linear-gradient(145deg, #9d72e8, #7445c5)
}

.module-grid article:nth-child(5):before {
    background: linear-gradient(145deg, #fa7084, #df3f5a)
}

.module-grid article:nth-child(6):before {
    background: linear-gradient(145deg, #45bfe1, #178ba9)
}

.module-grid article:nth-child(7):before {
    background: linear-gradient(145deg, #7789a8, #4e607e)
}

.module-grid article:nth-child(8):before {
    background: linear-gradient(145deg, #7f72ff, #5546df)
}

.module-grid article:nth-child(1):after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M4 21c0-5 3-8 8-8s8 3 8 8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")
}

.module-grid article:nth-child(2):after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 21v-4a7 7 0 0 1 14 0v4M9 7V3m6 4V3M5 10 2 7m17 3 3-3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")
}

.module-grid article:nth-child(3):after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16v11H9l-5 4V5Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='9' cy='10.5' r='1'/%3E%3Ccircle cx='12' cy='10.5' r='1'/%3E%3Ccircle cx='15' cy='10.5' r='1'/%3E%3C/svg%3E")
}

.module-grid article:nth-child(4):after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s7-6 7-13a7 7 0 1 0-14 0c0 7 7 13 7 13Z' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E")
}

.module-grid article:nth-child(5):after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20V10m6 10V4m5 16v-7m5 7V7' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E")
}

.module-grid article:nth-child(6):after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='6' width='18' height='14' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M8 6V4h8v2M7 12h10' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E")
}

.module-grid article:nth-child(7):after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h9l4 4v14H6V3Z' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M15 3v5h5M9 13h6m-6 4h6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E")
}

.module-grid article:nth-child(8):after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 1.7 5.3L19 9l-5.3 1.7L12 16l-1.7-5.3L5 9l5.3-1.7L12 2Zm7 13 .8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8L19 15Z'/%3E%3C/svg%3E")
}

/* Ícones circulares e alinhados */
.journey-grid article>i {
    border-radius: 50%;
    background-image: none !important
}

.journey-grid article>i:before {
    inset: auto !important;
    width: 27px !important;
    height: 27px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: currentColor !important;
    transform: none !important;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain
}

.journey-grid article>i:after {
    display: none !important
}

.journey-grid article:nth-child(1)>i {
    color: #487fff
}

.journey-grid article:nth-child(2)>i {
    color: #0fa77a
}

.journey-grid article:nth-child(3)>i {
    color: #d58b00
}

.journey-grid article:nth-child(4)>i {
    color: #8052d1;
    background: linear-gradient(145deg, #f2eaff, #d9c3ff) !important
}

.journey-grid article:nth-child(1)>i:before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M4 21c0-5 3-8 8-8s8 3 8 8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")
}

.journey-grid article:nth-child(2)>i:before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s7-6 7-13a7 7 0 1 0-14 0c0 7 7 13 7 13Z' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E")
}

.journey-grid article:nth-child(3)>i:before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16v11H9l-5 4V5Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='9' cy='10.5' r='1'/%3E%3Ccircle cx='12' cy='10.5' r='1'/%3E%3Ccircle cx='15' cy='10.5' r='1'/%3E%3C/svg%3E")
}

.journey-grid article:nth-child(4)>i:before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20V10m6 10V4m5 16v-7m5 7V7' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E")
}

.journey-grid article>span {
    display: none
}

.spot-copy>a {
    display: none
}

.module-grid article:before {
    border-radius: 50%
}

/* Cards de módulos com segunda face */
.module-grid {
    perspective: 1200px
}

.module-grid article {
    transform-style: preserve-3d;
    cursor: pointer;
    transition: transform .65s cubic-bezier(.2, .75, .25, 1), box-shadow .35s ease, border-color .35s ease
}

.module-grid article>*:not(.module-back) {
    backface-visibility: hidden;
    transition: opacity .2s ease
}

.module-grid article:hover {
    z-index: 3;
    border-color: #b9ccff;
    box-shadow: 0 22px 45px rgba(42, 62, 100, .14);
    transform: translateY(-5px) rotateY(180deg);
    outline: none
}

.module-grid article:hover:before,
.module-grid article:hover:after {
    opacity: 0
}

.module-back {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 27px;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(145deg, #487fff, #315fd0);
    backface-visibility: hidden;
    transform: rotateY(180deg)
}

.module-back small {
    color: #dbe5ff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase
}

.module-back h3 {
    margin: 12px 0 10px;
    color: #fff;
    font-size: 20px
}

.module-back ul {
    margin: 0;
    padding: 0;
    list-style: none
}

.module-back li {
    margin: 7px 0;
    color: #eef3ff;
    font-size: 11px
}

.module-back li:before {
    content: "✓";
    margin-right: 8px;
    color: #fff;
    font-weight: 800
}

.module-back>b {
    margin-top: auto;
    font-size: 10px;
    font-weight: 700
}

@media(max-width:620px) {
    .module-grid article:hover {
        transform: none
    }
}

/* Cards da jornada */
.journey-grid {
    gap: 16px;
    border-top: 0
}

.journey-grid article {
    min-height: 350px;
    padding: 29px;
    border: 1px solid #e2e8f2 !important;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(38, 56, 90, .045);
    overflow: hidden
}

.journey-grid article:before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--step-color)
}

.journey-grid article:after {
    content: "";
    position: absolute;
    top: -55px;
    right: -55px;
    width: 135px;
    height: 135px;
    border-radius: 50%;
    background: var(--step-wash);
    pointer-events: none
}

.journey-grid article:after {
    display: none
}

.journey-grid article:nth-child(1) {
    --step-color: #487fff;
    --step-wash: #edf3ff
}

.journey-grid article:nth-child(2) {
    --step-color: #0fa77a;
    --step-wash: #e7f8f2
}

.journey-grid article:nth-child(3) {
    --step-color: #e79a00;
    --step-wash: #fff6df
}

.journey-grid article:nth-child(4) {
    --step-color: #8052d1;
    --step-wash: #f2eaff
}

.journey-grid article>b {
    position: relative;
    z-index: 1;
    display: inline-flex;
    min-width: 38px;
    height: 25px;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    color: var(--step-color);
    background: var(--step-wash);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em
}

.journey-grid article>i {
    margin: 35px 0 27px !important;
    box-shadow: 0 12px 25px rgba(34, 55, 95, .12)
}

.journey-grid article:nth-child(1)>i {
    background: linear-gradient(145deg, #e8efff, #ceddff) !important
}

.journey-grid article:nth-child(2)>i {
    background: linear-gradient(145deg, #e5faf3, #bfeedd) !important
}

.journey-grid article:nth-child(3)>i {
    background: linear-gradient(145deg, #fff4d8, #ffe09a) !important
}

.journey-grid article:nth-child(4)>i {
    background: linear-gradient(145deg, #f2eaff, #dac5ff) !important
}

.journey-grid h3 {
    margin: 0 0 15px;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -.025em
}

.journey-grid p {
    min-height: 0;
    margin: 0;
    color: #68758a;
    font-size: 13px;
    line-height: 1.75
}

.journey-grid article:hover {
    border-color: color-mix(in srgb, var(--step-color) 35%, white) !important;
    box-shadow: 0 18px 40px rgba(35, 54, 90, .1);
    transform: none
}

@media(max-width:960px) {
    .journey-grid {
        gap: 12px
    }

    .journey-grid article {
        min-height: 330px
    }
}

@media(max-width:620px) {
    .journey-grid article {
        min-height: auto;
        padding: 25px
    }

    .journey-grid article:hover {
        transform: none
    }
}

/* Integração dos cards da jornada ao design do site */
.journey {
    background: #f6f8fc
}

.journey-grid {
    gap: 12px
}

.journey-grid article {
    min-height: 290px;
    padding: 25px;
    border-color: #e1e7f0 !important;
    border-radius: 16px;
    box-shadow: none
}

.journey-grid article:before {
    display: none
}

.journey-grid article>b {
    position: absolute;
    top: 23px;
    right: 23px;
    min-width: auto;
    height: auto;
    padding: 0;
    color: #9aa7ba;
    background: transparent;
    font-size: 10px
}

.journey-grid article>i {
    width: 56px !important;
    height: 56px !important;
    margin: 8px 0 34px !important;
    box-shadow: 0 9px 22px rgba(40, 60, 100, .09)
}

.journey-grid h3 {
    margin-bottom: 13px;
    font-size: 20px
}

.journey-grid p {
    font-size: 12px;
    line-height: 1.75
}

.journey-grid article:hover {
    border-color: #adc4ff !important;
    box-shadow: 0 16px 35px rgba(40, 60, 100, .08);
    transform: none
}

@media(max-width:960px) {
    .journey-grid article {
        min-height: 280px
    }
}

@media(max-width:620px) {
    .journey-grid article {
        min-height: auto
    }
}

/* Destaque do plano mais escolhido */
.plan-grid article.featured {
    padding-top: 36px;
    border-width: 1px
}

.plan-grid mark {
    top: -17px;
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 7px;
    padding: 0 17px;
    border: 1px solid #487fff;
    color: #315fd0;
    background: #fff;
    box-shadow: 0 10px 24px rgba(35, 63, 135, .18);
    font-size: 0;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap
}

.plan-grid mark:before {
    content: "★";
    color: #487fff;
    font-size: 12px
}

.plan-grid mark:after {
    content: "Mais popular";
    font-size: 11px
}

.plan-grid li.includes-label {
    margin-top: 0;
    color: var(--ink);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase
}

.plan-grid li.includes-label:before {
    display: none
}

.plan-grid .featured li.includes-label {
    color: #fff
}

.plan-grid li {
    line-height: 1.35
}

/* Faixa de módulos */
.proof {
    border-color: #21314d;
    background: #0d1830
}

.proof p {
    color: #fff
}

.proof p span,
.proof p strong {
    display: block
}

.proof p span {
    font-size: 15px;
    font-weight: 350;
    line-height: 1.2
}

.proof p strong {
    color: #8fafff;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.025em
}

.proof div div {
    color: #aebfff
}

.proof div div span {
    position: relative;
    padding-left: 13px
}

.proof div div span:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #487fff;
    transform: translateY(-50%)
}

.proof div div>strong {
    color: #fff;
    font-size: 12px;
    font-weight: 800
}

/* Transições entre seções e retorno ao topo */
.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 45;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    color: #fff;
    background: #487fff;
    box-shadow: 0 12px 28px rgba(72, 127, 255, .3);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(14px) scale(.9);
    transition: opacity .25s ease, transform .25s ease, background-color .25s ease
}

.back-to-top svg {
    display: block;
    margin-top: -1px
}

.back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: none
}

.back-to-top:hover {
    background: #2e5fe4;
    transform: translateY(-4px)
}

.back-to-top:focus-visible {
    outline: 3px solid #b9ccff;
    outline-offset: 3px
}

@media(max-width:620px) {
    .back-to-top {
        right: 16px;
        bottom: 16px;
        width: 44px;
        height: 44px
    }

    .reveal-ready main>section:not(.hero) {
        transform: translateY(18px)
    }
}

@media(prefers-reduced-motion:reduce) {
    .reveal-ready main>section:not(.hero) {
        opacity: 1;
        transform: none
    }

    .back-to-top {
        transition: none
    }
}

/* Painel do hero: chrome, mapa e ícones */
.dash-bar>i:nth-child(1) {
    background: #ff6b6b
}

.dash-bar>i:nth-child(2) {
    background: #ffc14d
}

.dash-bar>i:nth-child(3) {
    background: #3dce7a
}

.dash-bar .live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 3px 8px;
    border-radius: 999px;
    color: #067647;
    background: #ecfdf3;
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase
}

.dash-bar .live b {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #12b76a;
    box-shadow: 0 0 0 0 rgba(18, 183, 106, .55);
    animation: live 1.7s ease-out infinite
}

.visual aside i {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 0;
    border-radius: 8px;
    color: #8b9bb8;
    background: transparent
}

.visual aside i.active {
    color: #fff;
    background: #487fff;
    border: 0
}

.visual aside i svg {
    width: 14px;
    height: 14px;
    display: block
}

.metrics article {
    padding: 12px 12px 12px 42px
}

.metrics article>i {
    position: absolute;
    left: 10px;
    top: 12px;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px
}

.metrics article:nth-child(1)>i {
    background-color: #edf3ff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='3.2' fill='none' stroke='%23487fff' stroke-width='2'/%3E%3Cpath d='M5 19c.8-3.2 3.4-5 7-5s6.2 1.8 7 5' fill='none' stroke='%23487fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")
}

.metrics article:nth-child(2)>i {
    background-color: #e7f8f2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s7-6.2 7-12a7 7 0 1 0-14 0c0 5.8 7 12 7 12Z' fill='none' stroke='%230fa77a' stroke-width='2'/%3E%3Ccircle cx='12' cy='9' r='2.2' fill='none' stroke='%230fa77a' stroke-width='2'/%3E%3C/svg%3E")
}

.metrics article:nth-child(3)>i {
    background-color: #eef3ff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16v11H9l-5 4V5Z' fill='none' stroke='%23487fff' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")
}

.chart .grid {
    stroke-width: 1
}

.chart .tip {
    transform-box: fill-box;
    transform-origin: center;
    animation: ping 1.8s ease-out infinite
}

.radar {
    display: flex;
    flex-direction: column
}

.radar .gauge {
    display: block;
    width: 96px;
    height: 96px;
    margin: 10px auto 8px
}

.radar .gauge .track {
    fill: none;
    stroke: #e8eef8;
    stroke-width: 10
}

.radar .gauge .value {
    fill: none;
    stroke: #487fff;
    stroke-width: 10;
    stroke-linecap: round;
    stroke-dasharray: 276.5;
    stroke-dashoffset: 44.2;
    transform: rotate(-90deg);
    transform-origin: 60px 60px
}

.radar .gauge text {
    fill: #101828;
    font: 800 18px Inter, ui-sans-serif, system-ui, sans-serif
}

.radar .gauge .sub {
    fill: #8c98aa;
    font: 700 8px Inter, ui-sans-serif, system-ui, sans-serif
}

.radar ul {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none
}

.radar li {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #8c98aa;
    font-size: 8px;
    font-weight: 700
}

.radar li em {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #487fff;
    font-style: normal
}

.radar li:nth-child(1) em {
    background: #18a873
}

.radar li:nth-child(3) em {
    background: #8052d1
}

.radar b {
    display: none
}

.float-card>i svg {
    width: 14px;
    height: 14px;
    display: block
}

@keyframes live {

    70%,
    100% {
        box-shadow: 0 0 0 7px transparent
    }
}

@keyframes pin {
    50% {
        transform: translateY(-3px) scale(1.08)
    }
}

@keyframes ping {

    70%,
    100% {
        transform: scale(2.1);
        opacity: 0
    }
}

@media(prefers-reduced-motion:reduce) {

    .dash-bar .live b,
    .chart .tip,
    .radar .pin {
        animation: none
    }
}

/* Movimento intencional dos destaques do hero */
.hero .float-a {
    animation: floatTop 6s ease-in-out infinite !important
}

.hero .float-b {
    animation: floatBottom 7s ease-in-out -2.5s infinite !important
}

/* Ícones dos nós da órbita (Pessoas, Território, Equipe, Resultados) */
.orbit .ring:before {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #79a0ff;
    box-shadow: 0 0 0 6px rgba(72,127,255,.13), 0 0 22px #487fff
}

.orbit .r1 { animation: orbitSpin 22s linear infinite !important }
.orbit .r2 { animation: orbitSpinReverse 34s linear infinite !important }
.orbit .orbit-core { animation: orbitCorePulse 4s ease-in-out infinite !important }
.orbit .oi-1,
.orbit .oi-3 { animation: orbitNodeA 5s ease-in-out infinite !important }
.orbit .oi-2,
.orbit .oi-4 { animation: orbitNodeB 6s ease-in-out -2s infinite !important }

@keyframes orbitSpin {
    to { transform: translate(-50%, -50%) rotate(360deg) }
}

@keyframes orbitSpinReverse {
    to { transform: translate(-50%, -50%) rotate(-360deg) }
}

@keyframes orbitCorePulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 20px 40px rgba(0,0,0,.25), 0 0 0 0 rgba(72,127,255,.18) }
    50% { transform: translate(-50%, -50%) scale(1.035); box-shadow: 0 24px 55px rgba(0,0,0,.3), 0 0 0 16px rgba(72,127,255,0) }
}

@keyframes orbitNodeA {
    0%, 100% { transform: translateY(0) }
    50% { transform: translateY(-9px) }
}

@keyframes orbitNodeB {
    0%, 100% { transform: translateY(0) }
    50% { transform: translateY(9px) }
}

.orbit-item i{position:relative;display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;border:0;background:#487fff;box-shadow:0 0 0 6px rgba(72,127,255,.23)}
.orbit-item i:before{content:"";width:16px;height:16px;background:#fff;mask-repeat:no-repeat;mask-position:center;mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain}
.oi-1 i:before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M4 21c0-5 3-8 8-8s8 3 8 8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M4 21c0-5 3-8 8-8s8 3 8 8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.oi-2 i:before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s7-6 7-13a7 7 0 1 0-14 0c0 7 7 13 7 13Z' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s7-6 7-13a7 7 0 1 0-14 0c0 7 7 13 7 13Z' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E")}
.oi-3 i:before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8' r='3' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M3 20c.7-3.5 3.2-5.5 6-5.5s5.3 2 6 5.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='17' cy='9' r='2.4' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M16 14.5c2 0 3.8 1.2 4.6 3.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8' r='3' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M3 20c.7-3.5 3.2-5.5 6-5.5s5.3 2 6 5.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='17' cy='9' r='2.4' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M16 14.5c2 0 3.8 1.2 4.6 3.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.oi-4 i:before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20V10m6 10V4m5 16v-7m5 7V7' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20V10m6 10V4m5 16v-7m5 7V7' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E")}

/* URL própria evita o cache da marca antiga */
img[src$="favicon.svg"] {
    content: url("../images/logo-rocket.svg?v=3")
}