:root {
    --public-navy: #07152f;
    --public-navy-2: #0b1f45;
    --public-primary: #2864f0;
    --public-primary-dark: #174bd0;
    --public-cyan: #24b8e8;
    --public-text: #10203b;
    --public-muted: #62718a;
    --public-border: #dce4ef;
    --public-bg: #f5f8fc;
    --public-white: #fff;
    --public-green: #13a76b;
    --public-shadow: 0 24px 70px rgba(14,31,60,.11);
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    color: var(--public-text);
    background: var(--public-bg);
    font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    -webkit-font-smoothing: antialiased
}

body.public-menu-open {
    overflow: hidden
}

a {
    text-decoration: none
}

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

.public-announcement {
    position: relative;
    z-index: 1100;
    color: #dbeafe;
    background: #07152f;
    font-size: .72rem
}

.public-announcement .public-container {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px
}

.public-announcement span,.public-announcement a {
    display: flex;
    align-items: center;
    gap: 7px
}

.public-announcement a {
    color: #fff;
    font-weight: 750
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(220,228,239,.85);
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(18px);
    transition: .25s
}

.site-header.scrolled {
    box-shadow: 0 10px 36px rgba(14,31,60,.08)
}

.site-nav {
    min-height: 78px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 32px
}

.public-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--public-text)
}

.public-brand:hover {
    color: var(--public-text)
}

.public-brand img {
    max-width: 150px;
    max-height: 44px;
    object-fit: contain
}

.public-brand-mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(145deg,#3475ff,#174bd0);
    box-shadow: 0 10px 24px rgba(40,100,240,.27);
    font-size: 1.2rem
}

.public-brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1
}

.public-brand-copy strong {
    font-size: 1rem
}

.public-brand-copy small {
    margin-top: 5px;
    color: #54709d;
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase
}

.public-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px
}

.public-menu>a {
    position: relative;
    padding: 11px 13px;
    color: #52627c;
    font-size: .83rem;
    font-weight: 720
}

.public-menu>a::after {
    content: "";
    position: absolute;
    left: 13px;
    right: 13px;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--public-primary);
    transform: scaleX(0);
    transition: .2s
}

.public-menu>a:hover,.public-menu>a.active {
    color: var(--public-text)
}

.public-menu>a.active::after {
    transform: scaleX(1)
}

.public-nav-actions {
    display: flex;
    align-items: center;
    gap: 8px
}

.public-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 17px;
    border: 1px solid transparent;
    border-radius: 11px;
    font-family: inherit;
    font-size: .8rem;
    font-weight: 780;
    cursor: pointer;
    transition: .2s
}

.public-button:hover {
    transform: translateY(-1px)
}

.public-button.large {
    min-height: 52px;
    padding: 12px 22px;
    font-size: .86rem
}

.public-button-primary {
    color: #fff;
    background: linear-gradient(135deg,#3475ff,#2056dc);
    box-shadow: 0 10px 26px rgba(40,100,240,.24)
}

.public-button-primary:hover {
    color: #fff;
    background: linear-gradient(135deg,#2864f0,#174bd0)
}

.public-button-outline {
    color: var(--public-text);
    background: #fff;
    border-color: var(--public-border)
}

.public-button-outline:hover {
    color: var(--public-primary);
    border-color: #9db8ed
}

.public-button-ghost {
    color: #fff;
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.15)
}

.public-button-ghost:hover,.public-button-light {
    color: var(--public-navy);
    background: #fff
}

.public-login-menu {
    position: relative
}

.public-login-trigger .tabler-chevron-down {
    font-size: .72rem;
    transition: .2s
}

.public-login-menu.show .public-login-trigger .tabler-chevron-down {
    transform: rotate(180deg)
}

.public-login-popover {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 390px;
    padding: 8px;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-7px);
    background: #fff;
    border: 1px solid var(--public-border);
    border-radius: 17px;
    box-shadow: 0 25px 70px rgba(7,21,47,.16);
    transition: .2s
}

.public-login-menu.show .public-login-popover {
    visibility: visible;
    opacity: 1;
    transform: none
}

.public-login-popover>a {
    display: grid;
    grid-template-columns: 43px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border-radius: 12px;
    color: var(--public-text)
}

.public-login-popover>a:hover {
    background: #f4f7fc
}

.public-login-popover>a+a {
    margin-top: 3px;
    border-top: 1px solid #edf1f7
}

.public-login-popover strong,.public-login-popover small {
    display: block
}

.public-login-popover strong {
    font-size: .81rem
}

.public-login-popover small {
    margin-top: 4px;
    color: var(--public-muted);
    font-size: .68rem
}

.login-choice-icon {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #6750d9;
    background: #f0edff;
    font-size: 1.08rem
}

.login-choice-icon.company {
    color: #1760dc;
    background: #eaf2ff
}

.public-menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid var(--public-border);
    border-radius: 11px;
    color: var(--public-text);
    background: #fff;
    font-size: 1.25rem
}

[data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s ease,transform .7s ease
}

[data-reveal].revealed {
    opacity: 1;
    transform: none
}

.public-hero-v2 {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: radial-gradient(circle at 68% 18%,#123776 0,#0a2048 34%,#07152f 70%);
    isolation: isolate
}

.hero-grid-pattern {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .16;
    background-image: linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(to right,transparent,#000 40%,#000)
}

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

.hero-orb-one {
    width: 440px;
    height: 440px;
    right: -170px;
    top: -220px;
    background: rgba(36,184,232,.12)
}

.hero-orb-two {
    width: 300px;
    height: 300px;
    left: 34%;
    bottom: -240px;
    background: rgba(40,100,240,.18)
}

.hero-v2-grid {
    min-height: 690px;
    display: grid;
    grid-template-columns: minmax(0,.9fr) minmax(510px,1.1fr);
    align-items: center;
    gap: 58px;
    padding: 74px 0 86px
}

.public-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    color: var(--public-primary);
    background: #ebf2ff;
    border: 1px solid #d5e4ff;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 820;
    letter-spacing: .055em;
    text-transform: uppercase
}

.public-eyebrow.dark {
    color: #b9d4ff;
    background: rgba(73,132,255,.13);
    border-color: rgba(112,159,255,.22)
}

.hero-v2-copy h1 {
    max-width: 690px;
    margin: 20px 0;
    font-size: clamp(3.1rem,5.35vw,5rem);
    line-height: .98;
    letter-spacing: -.062em
}

.hero-v2-copy h1 em {
    color: #64c8ff;
    font-style: normal
}

.hero-v2-copy>p {
    max-width: 630px;
    margin: 0;
    color: #b8c7df;
    font-size: 1.04rem;
    line-height: 1.75
}

.hero-v2-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 29px
}

.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 17px;
    margin-top: 27px;
    color: #91a7c8;
    font-size: .7rem
}

.hero-trust span {
    display: flex;
    align-items: center;
    gap: 6px
}

.hero-trust i {
    color: #5dbfec;
    font-size: .95rem
}

.hero-product-stage {
    position: relative;
    min-width: 0;
    padding: 30px 0 42px
}

.product-window {
    overflow: hidden;
    background: #f7f9fd;
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 19px;
    box-shadow: 0 36px 100px rgba(0,0,0,.38);
    transform: perspective(1100px) rotateY(-4deg) rotateX(1deg)
}

.product-window>header {
    height: 54px;
    display: grid;
    grid-template-columns: 40px 1fr 31px;
    align-items: center;
    gap: 14px;
    padding: 0 17px;
    background: #fff;
    border-bottom: 1px solid #e5eaf2
}

.product-brand-mini {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: #fff;
    background: #2864f0;
    border-radius: 9px
}

.product-search {
    max-width: 280px;
    padding: 8px 11px;
    color: #9aa6ba;
    background: #f5f7fb;
    border: 1px solid #e7ebf1;
    border-radius: 8px;
    font-size: .59rem
}

.product-avatar {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    color: #fff;
    background: #263650;
    border-radius: 8px;
    font-size: .64rem;
    font-weight: 800
}

.product-body {
    min-height: 370px;
    display: grid;
    grid-template-columns: 63px 1fr
}

.product-body>aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
    padding-top: 23px;
    background: #fff;
    border-right: 1px solid #e5eaf2
}

.product-body>aside b {
    width: 29px;
    height: 7px;
    border-radius: 4px;
    background: #dfe5ee
}

.product-body>aside b.active {
    height: 29px;
    background: #e5efff;
    border: 1px solid #cfe0ff
}

.product-body>main {
    padding: 25px
}

.product-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.product-head small,.product-head strong {
    display: block
}

.product-head small {
    color: #7a899f;
    font-size: .52rem
}

.product-head strong {
    margin-top: 4px;
    color: #16243a;
    font-size: .85rem
}

.product-head button {
    padding: 8px 10px;
    color: #fff;
    background: #2864f0;
    border: 0;
    border-radius: 7px;
    font-size: .53rem;
    font-weight: 700
}

.product-stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 9px;
    margin-top: 20px
}

.product-stats>div {
    padding: 13px;
    background: #fff;
    border: 1px solid #e3e8f0;
    border-radius: 10px
}

.product-stats span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px
}

.product-stats .blue {
    color: #2864f0;
    background: #ebf2ff
}

.product-stats .red {
    color: #e23d55;
    background: #fff0f2
}

.product-stats .amber {
    color: #e18a12;
    background: #fff8e7
}

.product-stats small,.product-stats strong {
    display: block
}

.product-stats small {
    margin-top: 9px;
    color: #748299;
    font-size: .48rem
}

.product-stats strong {
    margin-top: 3px;
    color: #14223a;
    font-size: 1rem
}

.product-chart {
    margin-top: 12px;
    padding: 16px;
    background: #fff;
    border: 1px solid #e3e8f0;
    border-radius: 10px
}

.chart-title {
    display: flex;
    justify-content: space-between
}

.chart-title strong,.chart-title small {
    display: block;
    color: #18263b
}

.chart-title strong {
    font-size: .64rem
}

.chart-title small {
    margin-top: 3px;
    color: #8491a5;
    font-size: .45rem
}

.chart-title>b {
    color: #12a66a;
    font-size: .55rem
}

.chart-bars {
    height: 105px;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding: 13px 10px 0
}

.chart-bars i {
    flex: 1;
    min-width: 6px;
    background: linear-gradient(#4a83fb,#dbe7ff);
    border-radius: 5px 5px 2px 2px
}

.hero-status-pill {
    position: absolute;
    z-index: 2;
    right: 22px;
    top: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    color: #b9cee9;
    background: rgba(7,21,47,.85);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 999px;
    font-size: .59rem;
    backdrop-filter: blur(12px)
}

.hero-status-pill span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #32d38c;
    box-shadow: 0 0 0 5px rgba(50,211,140,.12)
}

.floating-job-card {
    position: absolute;
    left: -25px;
    bottom: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    color: var(--public-text);
    background: rgba(255,255,255,.96);
    border: 1px solid #fff;
    border-radius: 13px;
    box-shadow: 0 20px 46px rgba(0,0,0,.24)
}

.floating-job-card>span {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    color: #12a66a;
    background: #eafaf3;
    border-radius: 10px
}

.floating-job-card strong,.floating-job-card small {
    display: block
}

.floating-job-card strong {
    font-size: .68rem
}

.floating-job-card small {
    margin-top: 4px;
    color: var(--public-muted);
    font-size: .54rem
}

.floating-rating-card {
    position: absolute;
    right: -20px;
    bottom: 23px;
    padding: 13px 15px;
    color: var(--public-text);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 46px rgba(0,0,0,.22)
}

.floating-rating-card strong {
    font-size: 1.15rem
}

.floating-rating-card span {
    margin-left: 4px;
    color: #f5a623;
    font-size: .55rem;
    letter-spacing: -1px
}

.floating-rating-card small {
    display: block;
    margin-top: 3px;
    color: var(--public-muted);
    font-size: .5rem
}

.public-proof-strip {
    background: #fff;
    border-bottom: 1px solid var(--public-border)
}

.public-proof-strip .public-container {
    min-height: 112px;
    display: grid;
    grid-template-columns: 1.2fr repeat(4,1fr);
    align-items: center
}

.public-proof-strip>.public-container>span {
    color: #8a97a9;
    font-size: .68rem;
    font-weight: 780;
    letter-spacing: .08em;
    text-transform: uppercase
}

.public-proof-strip div div {
    padding-left: 26px;
    border-left: 1px solid var(--public-border)
}

.public-proof-strip b,.public-proof-strip small {
    display: block
}

.public-proof-strip b {
    color: var(--public-navy);
    font-size: 1.35rem
}

.public-proof-strip small {
    margin-top: 4px;
    color: var(--public-muted);
    font-size: .6rem
}

.public-section-v2 {
    padding: 100px 0
}

.public-section-heading {
    max-width: 650px
}

.public-section-heading.centered {
    margin: 0 auto 42px;
    text-align: center
}

.section-tag {
    display: inline-flex;
    align-items: center;
    margin-bottom: 13px;
    color: var(--public-primary);
    font-size: .65rem;
    font-weight: 830;
    letter-spacing: .1em;
    text-transform: uppercase
}

.section-tag.light {
    color: #70cfff
}

.public-section-heading h2 {
    margin: 0;
    font-size: clamp(2rem,3.6vw,3.25rem);
    line-height: 1.08;
    letter-spacing: -.05em
}

.public-section-heading p {
    margin: 16px 0 0;
    color: var(--public-muted);
    line-height: 1.72
}

.solutions-section {
    background: #f5f8fc
}

.solution-bento {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 16px
}

.solution-card {
    position: relative;
    overflow: hidden;
    padding: 29px;
    background: #fff;
    border: 1px solid var(--public-border);
    border-radius: 20px
}

.solution-card.large {
    min-height: 420px;
    display: grid;
    grid-template-columns: 1fr 230px;
    gap: 25px
}

.solution-card.wide {
    display: grid;
    grid-template-columns: 1fr .8fr;
    align-items: center;
    grid-column: 1/-1
}

.solution-card.blue-card {
    color: #fff;
    background: linear-gradient(145deg,#174bd0,#2864f0);
    border: 0
}

.solution-card.dark-card {
    color: #fff;
    background: linear-gradient(145deg,#07152f,#102c5d);
    border: 0
}

.solution-icon {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    margin-bottom: 22px;
    color: #2864f0;
    background: #ebf2ff;
    border-radius: 13px;
    font-size: 1.15rem
}

.solution-icon.green {
    color: #0d9d62;
    background: #e8faf2
}

.solution-icon.amber {
    color: #f5a623;
    background: #fff3cf
}

.solution-icon.violet {
    color: #7457e7;
    background: #f0edff
}

.solution-card.blue-card .solution-icon {
    color: #fff;
    background: rgba(255,255,255,.15)
}

.solution-card>small,.solution-card>div>small {
    color: #7a899f;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase
}

.solution-card.blue-card>div>small,.solution-card.dark-card>small {
    color: #b8d2ff
}

.solution-card h3 {
    max-width: 450px;
    margin: 9px 0 11px;
    font-size: 1.45rem;
    line-height: 1.17;
    letter-spacing: -.03em
}

.solution-card.large h3 {
    font-size: 1.75rem
}

.solution-card p {
    margin: 0;
    color: var(--public-muted);
    font-size: .83rem;
    line-height: 1.7
}

.solution-card.blue-card p,.solution-card.dark-card p {
    color: #c8d9f4
}

.solution-card a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 22px;
    color: #fff;
    font-size: .73rem;
    font-weight: 780
}

.phone-mock {
    align-self: end;
    min-height: 320px;
    padding: 28px 14px 15px;
    background: #fff;
    border: 6px solid #0a1e40;
    border-bottom: 0;
    border-radius: 30px 30px 0 0;
    box-shadow: 0 22px 48px rgba(2,13,35,.35);
    transform: translateY(30px)
}

.phone-speaker {
    position: absolute;
    top: 12px;
    left: 50%;
    width: 48px;
    height: 4px;
    transform: translateX(-50%);
    background: #cbd4e2;
    border-radius: 4px
}

.phone-task {
    position: relative;
    padding: 12px;
    color: #fff;
    background: #173f92;
    border-radius: 11px
}

.phone-task small,.phone-task strong,.phone-task span {
    display: block
}

.phone-task small {
    font-size: .42rem
}

.phone-task strong {
    margin-top: 4px;
    font-size: .66rem
}

.phone-task span {
    margin-top: 4px;
    color: #bcd1f3;
    font-size: .5rem
}

.phone-task>i {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%)
}

.phone-progress {
    display: flex;
    align-items: center;
    margin: 16px 5px
}

.phone-progress b {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    color: #77879e;
    background: #edf1f7;
    border-radius: 50%;
    font-size: .5rem
}

.phone-progress b.done {
    color: #fff;
    background: #2864f0
}

.phone-progress em {
    flex: 1;
    height: 2px;
    background: #dfe6ef
}

.phone-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 4px;
    border-bottom: 1px solid #edf1f6
}

.phone-check>span {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    color: #fff;
    background: #17af72;
    border-radius: 6px;
    font-size: .55rem
}

.phone-check strong,.phone-check small {
    display: block;
    color: #1a2941
}

.phone-check strong {
    font-size: .55rem
}

.phone-check small {
    margin-top: 2px;
    color: #8996a9;
    font-size: .43rem
}

.phone-mock button {
    width: 100%;
    margin-top: 14px;
    padding: 9px;
    color: #2864f0;
    background: #edf4ff;
    border: 1px dashed #80a8f7;
    border-radius: 8px;
    font-size: .5rem
}

.mini-avatars {
    display: flex;
    align-items: center;
    margin-top: 24px
}

.mini-avatars b {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    margin-right: -7px;
    color: #fff;
    background: #2864f0;
    border: 3px solid #fff;
    border-radius: 50%;
    font-size: .55rem
}

.mini-avatars b:nth-child(2) {
    background: #14a66b
}

.mini-avatars b:nth-child(3) {
    background: #7555d9
}

.mini-avatars span {
    margin-left: 14px;
    color: var(--public-muted);
    font-size: .6rem
}

.label-palette {
    display: flex;
    gap: 8px;
    margin-top: 24px
}

.label-palette i {
    width: 34px;
    height: 51px;
    border: 4px solid rgba(255,255,255,.8);
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0,0,0,.16)
}

.label-palette .green {
    background: #18a968
}

.label-palette .blue {
    background: #2780e5
}

.label-palette .yellow {
    background: #f1c73d
}

.label-palette .red {
    background: #e8424f
}

.finance-mini {
    padding: 22px;
    background: #f6f8fc;
    border: 1px solid #e4e9f1;
    border-radius: 15px
}

.finance-mini>span {
    display: flex;
    justify-content: space-between
}

.finance-mini small,.finance-mini strong {
    display: block
}

.finance-mini small {
    color: var(--public-muted);
    font-size: .57rem
}

.finance-mini strong {
    font-size: 1.25rem
}

.finance-mini>div {
    height: 7px;
    margin: 17px 0;
    background: #dfe7f2;
    border-radius: 7px
}

.finance-mini>div i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg,#2864f0,#29b8e7);
    border-radius: 7px
}

.finance-mini b {
    color: #13a76b
}

.process-section {
    color: #fff;
    background: #07152f
}

.process-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 90px;
    align-items: center
}

.process-grid .public-section-heading p {
    color: #9eb0cb
}

.process-grid .public-button {
    margin-top: 24px
}

.process-grid ol {
    margin: 0;
    padding: 0;
    list-style: none
}

.process-grid li {
    display: grid;
    grid-template-columns: 53px 1fr;
    gap: 19px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255,255,255,.1)
}

.process-grid li>b {
    color: #56bffc;
    font-size: .74rem
}

.process-grid li strong,.process-grid li small {
    display: block
}

.process-grid li strong {
    font-size: 1rem
}

.process-grid li small {
    margin-top: 7px;
    color: #95a8c4;
    font-size: .76rem;
    line-height: 1.55
}

.audience-section {
    background: #fff
}

.audience-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 17px
}

.audience-grid>a {
    position: relative;
    overflow: hidden;
    padding: 33px;
    color: var(--public-text);
    background: #f6f8fc;
    border: 1px solid var(--public-border);
    border-radius: 21px;
    transition: .25s
}

.audience-grid>a:hover {
    transform: translateY(-4px);
    border-color: #9db8ed;
    box-shadow: var(--public-shadow)
}

.audience-number {
    position: absolute;
    right: 25px;
    top: 21px;
    color: #dbe3ef;
    font-size: 3.5rem;
    font-weight: 850
}

.audience-icon {
    width: 53px;
    height: 53px;
    display: grid;
    place-items: center;
    margin-bottom: 27px;
    color: #fff;
    background: linear-gradient(145deg,#3475ff,#174bd0);
    border-radius: 16px;
    font-size: 1.4rem
}

.audience-icon.apartment {
    background: linear-gradient(145deg,#7e63e9,#5841bc)
}

.audience-grid small {
    color: var(--public-primary);
    font-size: .64rem;
    font-weight: 800;
    text-transform: uppercase
}

.audience-grid h3 {
    margin: 8px 0 10px;
    font-size: 1.45rem
}

.audience-grid p {
    max-width: 490px;
    margin: 0;
    color: var(--public-muted);
    font-size: .82rem;
    line-height: 1.65
}

.audience-grid b {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 25px;
    color: var(--public-primary);
    font-size: .75rem
}

.public-page-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: radial-gradient(circle at 75% 10%,#153d81,#0a2048 42%,#07152f);
    isolation: isolate
}

.public-page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .18;
    background-image: linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);
    background-size: 56px 56px
}

.page-hero-grid {
    min-height: 510px;
    display: grid;
    grid-template-columns: 1fr .75fr;
    align-items: center;
    gap: 70px;
    padding: 70px 0
}

.public-page-hero h1 {
    max-width: 780px;
    margin: 17px 0;
    font-size: clamp(2.6rem,4.5vw,4.35rem);
    line-height: 1.02;
    letter-spacing: -.057em
}

.public-page-hero p {
    max-width: 690px;
    margin: 0;
    color: #b8c7df;
    font-size: 1rem;
    line-height: 1.75
}

.about-visual {
    position: relative;
    min-height: 330px
}

.about-rings {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center
}

.about-rings span {
    position: absolute;
    width: 310px;
    height: 310px;
    border: 1px solid rgba(127,180,255,.25);
    border-radius: 50%
}

.about-rings span:nth-child(2) {
    width: 225px;
    height: 225px;
    border-style: dashed
}

.about-rings span:nth-child(3) {
    width: 135px;
    height: 135px;
    background: rgba(57,119,244,.13)
}

.about-rings b {
    width: 73px;
    height: 73px;
    display: grid;
    place-items: center;
    color: #fff;
    background: #2864f0;
    border-radius: 22px;
    box-shadow: 0 18px 50px rgba(40,100,240,.5);
    font-size: 1.7rem
}

.about-chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 13px;
    color: #d6e5fb;
    background: rgba(12,35,76,.85);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 99px;
    font-size: .66rem;
    backdrop-filter: blur(10px)
}

.about-chip.one {
    left: 0;
    top: 80px
}

.about-chip.two {
    right: 0;
    top: 80px
}

.about-chip.three {
    left: 42%;
    bottom: 9px
}

.about-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px
}

.about-story-copy {
    color: var(--public-muted);
    line-height: 1.85
}

.about-story-copy p {
    margin: 0 0 20px
}

.values-section {
    padding-top: 0;
    background: #fff
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border: 1px solid var(--public-border);
    border-radius: 20px;
    overflow: hidden
}

.values-grid article {
    position: relative;
    padding: 29px;
    border-right: 1px solid var(--public-border)
}

.values-grid article:last-child {
    border-right: 0
}

.values-grid article>span {
    position: absolute;
    right: 20px;
    top: 15px;
    color: #e4eaf2;
    font-size: 1.8rem;
    font-weight: 850
}

.values-grid i {
    color: #2864f0;
    font-size: 1.6rem
}

.values-grid h3 {
    margin: 23px 0 9px
}

.values-grid p {
    margin: 0;
    color: var(--public-muted);
    font-size: .78rem;
    line-height: 1.6
}

.mission-section {
    color: #fff;
    background: #07152f
}

.mission-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px
}

.mission-grid h2 {
    margin: 0;
    font-size: clamp(2rem,3.5vw,3.3rem);
    letter-spacing: -.05em
}

.mission-grid blockquote {
    margin: 0;
    color: #d8e5f7;
    font-size: 1.18rem;
    line-height: 1.65
}

.mission-grid p {
    color: #8298b8
}

.pricing-hero>.public-container {
    min-height: 430px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center
}

.pricing-hero h1,.pricing-hero p {
    margin-left: auto;
    margin-right: auto
}

.pricing-section {
    padding: 0 0 100px;
    margin-top: -25px;
    position: relative;
    z-index: 2
}

.pricing-grid-v2 {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 17px;
    align-items: stretch
}

.price-card-v2 {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px;
    background: #fff;
    border: 1px solid var(--public-border);
    border-radius: 21px;
    box-shadow: 0 18px 55px rgba(14,31,60,.07)
}

.price-card-v2.featured {
    border: 2px solid #2864f0;
    box-shadow: 0 26px 80px rgba(40,100,240,.18)
}

.price-popular {
    position: absolute;
    left: 50%;
    top: -17px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    color: #fff;
    background: #2864f0;
    border-radius: 99px;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: .64rem;
    font-weight: 800
}

.price-card-v2 header {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.price-card-v2 header small {
    color: var(--public-muted);
    font-size: .58rem;
    text-transform: uppercase
}

.price-card-v2 h2 {
    margin: 4px 0;
    font-size: 1.4rem
}

.price-package-icon {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    color: #2864f0;
    background: #edf4ff;
    border-radius: 13px;
    font-size: 1.15rem
}

.price-value-v2 {
    display: flex;
    align-items: end;
    gap: 7px;
    margin-top: 25px
}

.price-value-v2 strong {
    font-size: 2.1rem;
    letter-spacing: -.05em
}

.price-value-v2 span {
    padding-bottom: 5px;
    color: var(--public-muted);
    font-size: .7rem
}

.price-card-v2>p {
    min-height: 44px;
    color: var(--public-muted);
    font-size: .76rem;
    line-height: 1.6
}

.price-card-v2>.public-button {
    width: 100%;
    margin-top: 13px
}

.price-divider {
    height: 1px;
    margin: 24px 0;
    background: var(--public-border)
}

.included-title {
    font-size: .72rem
}

.price-card-v2 ul {
    flex: 1;
    margin: 13px 0 0;
    padding: 0;
    list-style: none
}

.price-card-v2 li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 7px 0;
    color: #52617a;
    font-size: .72rem
}

.price-card-v2 li i {
    color: #14a66b
}

.pricing-note {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid var(--public-border);
    border-radius: 16px
}

.pricing-note>i {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: #2864f0;
    background: #edf4ff;
    border-radius: 12px;
    font-size: 1.15rem
}

.pricing-note p {
    margin: 4px 0 0;
    color: var(--public-muted);
    font-size: .72rem
}

.pricing-note>a {
    color: #2864f0;
    font-size: .72rem;
    font-weight: 800
}

.compare-section {
    padding-top: 0
}

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

.included-grid>div {
    padding: 24px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--public-border);
    border-radius: 16px
}

.included-grid i {
    color: #2864f0;
    font-size: 1.5rem
}

.included-grid strong,.included-grid span {
    display: block
}

.included-grid strong {
    margin-top: 12px;
    font-size: .85rem
}

.included-grid span {
    margin-top: 5px;
    color: var(--public-muted);
    font-size: .68rem
}

.contact-direct {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 29px
}

.contact-direct>a,.contact-direct>div {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    color: #fff;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px
}

.contact-direct i {
    color: #69caff
}

.contact-direct small,.contact-direct strong {
    display: block
}

.contact-direct small {
    color: #94a9c8;
    font-size: .55rem
}

.contact-direct strong {
    margin-top: 3px;
    font-size: .7rem
}

.contact-form-shell {
    padding: 28px;
    color: var(--public-text);
    background: #fff;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 21px;
    box-shadow: 0 35px 90px rgba(0,0,0,.25)
}

.contact-form-head small {
    color: #2864f0;
    font-size: .62rem;
    font-weight: 800;
    text-transform: uppercase
}

.contact-form-head h2 {
    margin: 5px 0;
    font-size: 1.45rem
}

.contact-form-head p {
    color: var(--public-muted);
    font-size: .73rem
}

.contact-form {
    display: grid;
    gap: 12px;
    margin-top: 18px
}

.contact-fields.two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.contact-form label>span {
    display: block;
    margin-bottom: 6px;
    font-size: .66rem;
    font-weight: 750
}

.contact-form input,.contact-form select,.contact-form textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #cfd8e5;
    border-radius: 9px;
    outline: 0;
    background: #fff;
    font: inherit;
    font-size: .75rem
}

.contact-form input,.contact-form select {
    height: 43px
}

.contact-form textarea {
    resize: vertical
}

.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus {
    border-color: #2864f0;
    box-shadow: 0 0 0 3px #edf4ff
}

.contact-form .public-button {
    width: 100%
}

.contact-honeypot {
    position: absolute!important;
    left: -9999px!important
}

.form-privacy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--public-muted);
    font-size: .57rem
}

.contact-error {
    margin: 12px 0;
    padding: 10px 12px;
    color: #a02635;
    background: #fff0f2;
    border: 1px solid #ffc9d0;
    border-radius: 9px;
    font-size: .68rem
}

.contact-success {
    text-align: center;
    padding: 35px 5px
}

.contact-success>span {
    width: 63px;
    height: 63px;
    display: grid;
    place-items: center;
    margin: 0 auto 17px;
    color: #fff;
    background: #17aa6d;
    border-radius: 19px;
    font-size: 1.65rem
}

.contact-success p {
    color: var(--public-muted)
}

.contact-step-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 14px
}

.contact-step-grid>div {
    padding: 25px;
    background: #fff;
    border: 1px solid var(--public-border);
    border-radius: 16px
}

.contact-step-grid b {
    color: #2864f0;
    font-size: .68rem
}

.contact-step-grid strong,.contact-step-grid span {
    display: block
}

.contact-step-grid strong {
    margin-top: 25px
}

.contact-step-grid span {
    margin-top: 8px;
    color: var(--public-muted);
    font-size: .71rem;
    line-height: 1.58
}

.public-cta-band {
    color: #fff;
    background: linear-gradient(135deg,#2864f0,#1748c5)
}

.public-cta-inner {
    min-height: 210px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px
}

.public-cta-inner span {
    color: #bbd3ff;
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase
}

.public-cta-inner h2 {
    max-width: 740px;
    margin: 8px 0;
    font-size: clamp(1.8rem,3.4vw,3rem);
    line-height: 1.08;
    letter-spacing: -.045em
}

.public-cta-inner>div:last-child {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px
}

.public-cta-inner small {
    color: #bdd2fb;
    font-size: .58rem
}

.site-footer {
    color: #a4b5ce;
    background: #07152f
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.7fr repeat(3,1fr);
    gap: 65px;
    padding: 72px 0 55px
}

.site-footer .public-brand {
    color: #fff
}

.site-footer .public-brand-copy small {
    color: #8fa6c5
}

.footer-brand p {
    max-width: 390px;
    margin: 20px 0 0;
    font-size: .72rem;
    line-height: 1.75
}

.footer-grid>div:not(.footer-brand) {
    display: flex;
    flex-direction: column;
    gap: 11px
}

.footer-grid>div>strong {
    margin-bottom: 5px;
    color: #fff;
    font-size: .75rem
}

.footer-grid a,.footer-grid span {
    color: #8fa5c3;
    font-size: .68rem
}

.footer-grid a:hover {
    color: #fff
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 0 27px;
    border-top: 1px solid rgba(255,255,255,.09);
    font-size: .61rem
}

.login-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(420px,.92fr) minmax(480px,1.08fr);
    background: #f4f7fb
}

.login-aside {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 44px clamp(35px,5vw,78px);
    color: #fff;
    background: radial-gradient(circle at 85% 15%,#174784,#0b234d 45%,#07152f);
    isolation: isolate
}

.login-aside::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .18;
    background-image: linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);
    background-size: 54px 54px
}

.login-aside .public-brand {
    color: #fff
}

.login-aside .public-brand-copy small {
    color: #9ab0cd
}

.login-aside-copy {
    max-width: 550px
}

.login-aside-copy h1 {
    margin: 0 0 17px;
    font-size: clamp(2.3rem,4.3vw,4rem);
    line-height: 1;
    letter-spacing: -.055em
}

.login-aside-copy p {
    max-width: 520px;
    margin: 0;
    color: #b3c4dc;
    line-height: 1.75
}

.login-aside-note {
    color: #839bbd;
    font-size: .67rem
}

.login-main {
    display: grid;
    place-items: center;
    padding: 42px
}

.login-card {
    width: min(450px,100%)
}

.login-card h2 {
    margin: 0 0 8px;
    font-size: 1.8rem;
    letter-spacing: -.04em
}

.login-card>p {
    margin: 0 0 23px;
    color: var(--public-muted);
    font-size: .8rem
}

.login-form {
    padding: 26px;
    background: #fff;
    border: 1px solid var(--public-border);
    border-radius: 17px;
    box-shadow: 0 18px 55px rgba(14,31,60,.08)
}

.login-label {
    display: block;
    margin-bottom: 7px;
    font-size: .72rem;
    font-weight: 750
}

.login-input {
    width: 100%;
    height: 48px;
    padding: 0 13px;
    border: 1px solid #cbd6e4;
    border-radius: 10px;
    outline: 0;
    color: var(--public-text);
    background: #fff;
    font: inherit;
    font-size: .82rem
}

.login-input:focus {
    border-color: #2864f0;
    box-shadow: 0 0 0 3px #eaf2ff
}

.login-field+.login-field {
    margin-top: 15px
}

.login-submit {
    width: 100%;
    margin-top: 20px
}

.login-alert {
    margin-bottom: 15px;
    padding: 11px 12px;
    color: #a12635;
    background: #fff0f2;
    border: 1px solid #ffc8cf;
    border-radius: 9px;
    font-size: .73rem
}

.login-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 17px
}

.login-links a {
    color: #2864f0;
    font-size: .7rem;
    font-weight: 750
}

.portal-body {
    background: var(--public-bg)
}

.portal-container {
    width: min(1120px,calc(100% - 28px));
    margin: 0 auto;
    padding: 28px 0 48px
}

.portal-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px
}

.portal-top h1 {
    margin: 0;
    font-size: 1.55rem
}

.portal-top p {
    margin: 5px 0 0;
    color: var(--public-muted);
    font-size: .84rem
}

.portal-stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
    margin-bottom: 18px
}

.portal-stat {
    padding: 17px;
    background: #fff;
    border: 1px solid var(--public-border);
    border-radius: 12px
}

.portal-stat small,.portal-stat strong {
    display: block
}

.portal-stat small {
    color: var(--public-muted);
    font-size: .74rem
}

.portal-stat strong {
    margin-top: 7px;
    font-size: 1.5rem
}

.portal-card {
    overflow: hidden;
    margin-bottom: 16px;
    background: #fff;
    border: 1px solid var(--public-border);
    border-radius: 13px
}

.portal-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 17px;
    border-bottom: 1px solid var(--public-border);
    font-size: .88rem;
    font-weight: 750
}

.portal-table {
    width: 100%;
    border-collapse: collapse
}

.portal-table th,.portal-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #edf2f7;
    text-align: left;
    font-size: .8rem
}

.portal-table th {
    color: var(--public-muted);
    background: #f8fafc;
    font-size: .68rem;
    text-transform: uppercase
}

.portal-table tr:last-child td {
    border-bottom: 0
}

.portal-status {
    display: inline-flex;
    padding: 5px 7px;
    color: var(--public-muted);
    background: #f1f5f9;
    border-radius: 6px;
    font-size: .68rem
}

.portal-detail-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 12px
}

.portal-detail {
    padding: 13px;
    background: #f8fafc;
    border: 1px solid #edf2f7;
    border-radius: 9px
}

.portal-detail small,.portal-detail strong {
    display: block
}

.portal-detail small {
    color: var(--public-muted);
    font-size: .72rem
}

.portal-detail strong {
    margin-top: 5px;
    font-size: .86rem
}

.portal-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px
}

.portal-company-brand {
    display: flex;
    align-items: center;
    gap: 10px
}

.portal-company-brand>img {
    display: block;
    max-width: 190px;
    max-height: 52px;
    object-fit: contain
}

.portal-company-brand>span:not(.public-brand-mark) {
    display: flex;
    flex-direction: column
}

.portal-company-brand strong {
    font-size: .86rem
}

.portal-company-brand small,.portal-cell-note {
    display: block;
    margin-top: 3px;
    color: var(--public-muted);
    font-size: .65rem
}

.portal-table td>.public-button {
    min-height: 34px;
    padding: 0 11px;
    font-size: .68rem
}

.portal-brand-actions {
    display: flex;
    gap: 8px
}

.portal-welcome {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 18px;
    padding: 31px 34px;
    color: #fff;
    background: radial-gradient(circle at 88% 0,#174784,#0b234d 48%,#07152f);
    border-radius: 20px;
    box-shadow: 0 22px 55px rgba(7,21,47,.15)
}

.portal-welcome::after {
    content: "";
    position: absolute;
    right: -80px;
    top: -120px;
    width: 340px;
    height: 340px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%
}

.portal-kicker {
    color: #70cfff;
    font-size: .62rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase
}

.portal-welcome h1 {
    margin: 8px 0 7px;
    font-size: 1.75rem;
    letter-spacing: -.04em
}

.portal-welcome p {
    max-width: 690px;
    margin: 0;
    color: #aebfda;
    font-size: .78rem;
    line-height: 1.6
}

.portal-next-action {
    position: relative;
    z-index: 2;
    min-width: 240px;
    padding: 16px 18px;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 13px;
    backdrop-filter: blur(8px)
}

.portal-next-action small,.portal-next-action strong,.portal-next-action span {
    display: block
}

.portal-next-action small {
    color: #8ed8ff;
    font-size: .6rem
}

.portal-next-action strong {
    margin-top: 7px;
    font-size: 1rem
}

.portal-next-action span {
    margin-top: 4px;
    color: #aebfda;
    font-size: .65rem
}

.portal-alert {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 15px;
    padding: 12px 14px;
    color: #9a5b0b;
    background: #fff7df;
    border: 1px solid #f6d893;
    border-radius: 11px;
    font-size: .72rem
}

.portal-nav {
    position: sticky;
    top: 12px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 5px;
    overflow: auto;
    margin-bottom: 16px;
    padding: 7px;
    background: rgba(255,255,255,.92);
    border: 1px solid var(--public-border);
    border-radius: 13px;
    box-shadow: 0 10px 28px rgba(14,31,60,.07);
    backdrop-filter: blur(15px)
}

.portal-nav a {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 12px;
    color: #52617a;
    border-radius: 9px;
    white-space: nowrap;
    font-size: .68rem;
    font-weight: 750
}

.portal-nav a:hover {
    color: #2864f0;
    background: #edf4ff
}

.portal-stats-v2 {
    grid-template-columns: repeat(4,1fr)
}

.portal-stats-v2 .portal-stat {
    position: relative;
    color: var(--public-text);
    transition: .2s
}

.portal-stats-v2 .portal-stat:hover {
    transform: translateY(-2px);
    border-color: #b7caf1;
    box-shadow: 0 14px 35px rgba(14,31,60,.08)
}

.portal-stat-icon {
    position: absolute;
    right: 15px;
    top: 15px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px
}

.portal-stat-icon.blue {
    color: #2864f0;
    background: #ebf2ff
}

.portal-stat-icon.red {
    color: #dd3852;
    background: #fff0f2
}

.portal-stat-icon.amber {
    color: #df8b11;
    background: #fff5dc
}

.portal-stat-icon.green {
    color: #0c9f62;
    background: #e7f9f0
}

.portal-stat em {
    display: block;
    margin-top: 7px;
    color: #7b899d;
    font-size: .58rem;
    font-style: normal
}

.portal-card-head>div>span,.portal-card-head>div>small {
    display: block
}

.portal-card-head>div>small {
    margin-top: 4px;
    color: var(--public-muted);
    font-size: .62rem;
    font-weight: 500
}

.portal-action-stack>small {
    display: block;
    max-width: 240px;
    margin-bottom: 7px;
    color: var(--public-muted);
    font-size: .64rem
}

.portal-action-stack>div {
    display: flex;
    flex-wrap: wrap;
    gap: 5px
}

.portal-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin: 30px 2px 14px
}

.portal-section-heading span {
    color: #2864f0;
    font-size: .6rem;
    font-weight: 800;
    text-transform: uppercase
}

.portal-section-heading h2 {
    margin: 5px 0 0;
    font-size: 1.3rem
}

.portal-two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

.portal-list {
    padding: 4px 17px
}

.portal-list article {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 12px;
    padding: 15px 0;
    border-bottom: 1px solid #edf2f7
}

.portal-list article:last-child {
    border-bottom: 0
}

.portal-list-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 1.05rem
}

.portal-list-icon.danger {
    color: #dd3852;
    background: #fff0f2
}

.portal-list-icon.amber {
    color: #df8b11;
    background: #fff5dc
}

.portal-list article strong,.portal-list article small,.portal-list article em,.portal-list article span {
    display: block
}

.portal-list article strong {
    font-size: .78rem
}

.portal-list article small {
    margin-top: 4px;
    color: var(--public-muted);
    font-size: .66rem
}

.portal-list article em {
    margin-top: 7px;
    color: #52617a;
    font-size: .62rem;
    font-style: normal
}

.portal-list article span {
    margin-top: 4px;
    color: #7e8ba0;
    font-size: .6rem
}

.portal-inline-route {
    margin-top: 8px
}

.portal-inline-route .public-button {
    min-height: 32px;
    padding: 0 10px;
    font-size: .62rem
}

.portal-empty {
    display: grid;
    place-items: center;
    padding: 35px;
    text-align: center
}

.portal-empty>i {
    color: #14a66b;
    font-size: 1.65rem
}

.portal-empty strong,.portal-empty span {
    display: block
}

.portal-empty strong {
    margin-top: 10px;
    font-size: .78rem
}

.portal-empty span {
    max-width: 310px;
    margin-top: 5px;
    color: var(--public-muted);
    font-size: .65rem
}

.portal-compact-list {
    padding: 3px 17px
}

.portal-compact-list>div:not(.portal-empty) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 0;
    border-bottom: 1px solid #edf2f7
}

.portal-compact-list>div:last-child {
    border-bottom: 0
}

.portal-compact-list>div>span:last-child {
    text-align: right
}

.portal-compact-list strong,.portal-compact-list small {
    display: block
}

.portal-compact-list strong {
    font-size: .73rem
}

.portal-compact-list small {
    margin-top: 4px;
    color: var(--public-muted);
    font-size: .62rem
}

.portal-compact-list a,.portal-file-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    color: #2864f0;
    font-size: .64rem;
    font-weight: 750
}

.portal-status.label-green {
    color: #07844e;
    background: #e6f8ef
}

.portal-status.label-blue {
    color: #1d5bd6;
    background: #e9f1ff
}

.portal-status.label-yellow {
    color: #9d6500;
    background: #fff4d3
}

.portal-status.label-red {
    color: #bf263e;
    background: #ffe9ed
}

.billing-switch {
    display: inline-flex;
    align-self: center;
    gap: 4px;
    margin-top: 30px;
    padding: 5px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 13px;
    backdrop-filter: blur(12px)
}

.billing-switch button {
    min-height: 43px;
    padding: 0 18px;
    color: #b9c9e1;
    background: transparent;
    border: 0;
    border-radius: 9px;
    font: inherit;
    font-size: .75rem;
    font-weight: 800;
    cursor: pointer
}

.billing-switch button.active {
    color: var(--public-navy);
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.16)
}

.billing-switch span {
    margin-left: 5px;
    padding: 4px 7px;
    color: #dffbef;
    background: rgba(20,167,107,.26);
    border-radius: 99px;
    font-size: .55rem
}

.billing-switch button.active span {
    color: #07844e;
    background: #e4f8ef
}

.price-billing-note {
    min-height: 21px;
    margin-top: 7px;
    color: #16825a;
    font-size: .64rem;
    font-weight: 750
}

.price-card-v2 li strong {
    color: var(--public-text)
}

.annual-explainer {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    align-items: center;
    gap: 18px;
    margin-top: 22px;
    padding: 22px 25px;
    color: #fff;
    background: linear-gradient(135deg,#0b2148,#12366e);
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(7,21,47,.14)
}

.annual-explainer>span {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    color: #8ed8ff;
    background: rgba(255,255,255,.09);
    border-radius: 15px;
    font-size: 1.35rem
}

.annual-explainer strong {
    font-size: .92rem
}

.annual-explainer p {
    margin: 5px 0 0;
    color: #aebfda;
    font-size: .7rem;
    line-height: 1.55
}

.annual-explainer>a {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    font-size: .72rem;
    font-weight: 800
}

.features-hero {
    background: radial-gradient(circle at 73% 34%,#174784,#0a2149 38%,#07152f 73%)
}

.feature-hero-grid {
    min-height: 610px;
    display: grid;
    grid-template-columns: 1fr .78fr;
    align-items: center;
    gap: 75px;
    padding: 70px 0
}

.feature-hero-grid h1 {
    max-width: 760px
}

.feature-orbit {
    position: relative;
    min-height: 410px;
    display: grid;
    place-items: center
}

.feature-orbit::before,.feature-orbit::after {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    border: 1px solid rgba(123,180,255,.26);
    border-radius: 50%
}

.feature-orbit::after {
    width: 245px;
    height: 245px;
    border-style: dashed;
    animation: orbit-spin 35s linear infinite
}

.feature-orbit-core {
    position: relative;
    z-index: 2;
    width: 145px;
    height: 145px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    color: #fff;
    background: linear-gradient(145deg,#3978ff,#174bcf);
    border: 1px solid rgba(255,255,255,.36);
    border-radius: 42px;
    box-shadow: 0 30px 80px rgba(22,75,193,.45)
}

.feature-orbit-core i {
    font-size: 2rem
}

.feature-orbit-core strong {
    font-size: .75rem
}

.orbit-item {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 13px;
    color: #e3efff;
    background: rgba(10,32,72,.88);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 99px;
    box-shadow: 0 15px 35px rgba(0,0,0,.2);
    font-size: .65rem;
    font-weight: 750;
    backdrop-filter: blur(12px)
}

.orbit-item i {
    color: #70cfff;
    font-size: 1rem
}

.orbit-item.one {
    left: 0;
    top: 70px
}

.orbit-item.two {
    right: 8px;
    top: 67px
}

.orbit-item.three {
    left: 0;
    bottom: 60px
}

.orbit-item.four {
    right: 0;
    bottom: 65px
}

@keyframes orbit-spin {
    to {
        transform: rotate(360deg)
    }
}

.feature-nav-section {
    position: relative;
    z-index: 3;
    margin-top: -38px
}

.feature-quick-nav {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1px;
    overflow: hidden;
    background: var(--public-border);
    border: 1px solid var(--public-border);
    border-radius: 17px;
    box-shadow: var(--public-shadow)
}

.feature-quick-nav a {
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    color: var(--public-text);
    background: #fff;
    font-size: .68rem;
    font-weight: 750
}

.feature-quick-nav a:hover {
    color: var(--public-primary);
    background: #f8fbff
}

.feature-quick-nav i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--public-primary);
    background: #ecf3ff;
    border-radius: 10px;
    font-size: 1rem
}

.feature-catalog-section {
    background: linear-gradient(#f5f8fc,#fff)
}

.feature-category-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
}

.feature-category-card {
    scroll-margin-top: 105px;
    padding: 30px;
    background: #fff;
    border: 1px solid var(--public-border);
    border-radius: 20px;
    box-shadow: 0 13px 38px rgba(14,31,60,.055)
}

.feature-category-card>header {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 16px
}

.feature-category-card>header>span {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    color: #2864f0;
    background: #eaf2ff;
    border-radius: 15px;
    font-size: 1.3rem
}

.feature-category-card header small {
    color: #a1afc1;
    font-size: .62rem;
    font-weight: 800
}

.feature-category-card h2 {
    margin: 3px 0 7px;
    font-size: 1.18rem
}

.feature-category-card header p {
    margin: 0;
    color: var(--public-muted);
    font-size: .72rem;
    line-height: 1.55
}

.feature-detail-list {
    display: grid;
    gap: 13px;
    margin-top: 24px;
    padding-top: 21px;
    border-top: 1px solid #e9eef5
}

.feature-detail-list>div {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 10px
}

.feature-detail-list>div>i {
    color: #14a66b;
    font-size: 1.02rem
}

.feature-detail-list strong,.feature-detail-list small {
    display: block
}

.feature-detail-list strong {
    font-size: .76rem
}

.feature-detail-list small {
    margin-top: 4px;
    color: var(--public-muted);
    font-size: .67rem;
    line-height: 1.55
}

.feature-flow-section {
    color: #fff;
    background: #07152f
}

.feature-flow-section .public-section-heading p {
    color: #91a6c4
}

.feature-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 17px;
    margin-top: 46px
}

.feature-flow>div {
    min-height: 150px;
    padding: 23px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px
}

.feature-flow>b {
    color: #68caff
}

.feature-flow strong,.feature-flow span {
    display: block
}

.feature-flow strong {
    margin-top: 21px;
    font-size: .85rem
}

.feature-flow span {
    margin-top: 7px;
    color: #91a6c4;
    font-size: .67rem;
    line-height: 1.55
}

.feature-flow>i {
    color: #4e75aa
}

@media(max-width: 1100px) {
    .site-nav {
        gap:15px
    }

    .public-menu>a {
        padding: 10px 8px
    }

    .public-demo-button {
        display: none
    }

    .hero-v2-grid {
        grid-template-columns: .9fr 1.1fr;
        gap: 30px
    }

    .hero-v2-copy h1 {
        font-size: 3.7rem
    }

    .footer-grid {
        gap: 35px
    }
}

@media(max-width: 980px) {
    .public-container {
        width:min(100% - 30px,760px)
    }

    .public-announcement {
        display: none
    }

    .site-nav {
        grid-template-columns: auto auto;
        min-height: 70px
    }

    .public-menu-toggle {
        display: grid;
        justify-self: end
    }

    .public-menu {
        position: fixed;
        left: 15px;
        right: 15px;
        top: 82px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-8px);
        background: #fff;
        border: 1px solid var(--public-border);
        border-radius: 17px;
        box-shadow: 0 28px 70px rgba(7,21,47,.18);
        transition: .2s
    }

    .public-menu.show {
        visibility: visible;
        opacity: 1;
        transform: none
    }

    .public-menu>a {
        padding: 13px
    }

    .public-menu>a::after {
        display: none
    }

    .public-nav-actions {
        position: fixed;
        left: 27px;
        right: 27px;
        top: 365px;
        z-index: 2;
        visibility: hidden;
        opacity: 0
    }

    .public-menu.show~.public-nav-actions {
        visibility: visible;
        opacity: 1
    }

    .public-login-menu {
        width: 100%
    }

    .public-login-trigger {
        width: 100%;
        background: #f4f7fc
    }

    .public-login-popover {
        position: static;
        width: 100%;
        display: none;
        margin-top: 7px;
        visibility: visible;
        opacity: 1;
        transform: none;
        box-shadow: none
    }

    .public-login-menu.show .public-login-popover {
        display: block
    }

    .hero-v2-grid {
        min-height: 0;
        grid-template-columns: 1fr;
        padding: 70px 0 90px
    }

    .hero-v2-copy {
        text-align: center
    }

    .hero-v2-copy h1,.hero-v2-copy>p {
        margin-left: auto;
        margin-right: auto
    }

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

    .hero-product-stage {
        width: min(680px,100%);
        margin: auto
    }

    .product-window {
        transform: none
    }

    .public-proof-strip .public-container {
        grid-template-columns: repeat(2,1fr);
        padding: 22px 0
    }

    .public-proof-strip>.public-container>span {
        grid-column: 1/-1;
        margin-bottom: 7px
    }

    .public-proof-strip div div {
        padding: 15px
    }

    .solution-bento {
        grid-template-columns: 1fr
    }

    .solution-card.wide {
        grid-column: auto
    }

    .process-grid,.page-hero-grid,.about-story,.mission-grid {
        grid-template-columns: 1fr;
        gap: 45px
    }

    .about-visual {
        min-height: 330px
    }

    .values-grid {
        grid-template-columns: 1fr 1fr
    }

    .values-grid article:nth-child(2) {
        border-right: 0
    }

    .values-grid article:nth-child(-n+2) {
        border-bottom: 1px solid var(--public-border)
    }

    .pricing-grid-v2 {
        grid-template-columns: 1fr
    }

    .pricing-section {
        margin-top: -45px
    }

    .included-grid,.contact-step-grid {
        grid-template-columns: 1fr 1fr
    }

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

    .footer-grid>div:last-child {
        grid-column: 2/4
    }

    .login-page {
        grid-template-columns: 1fr
    }

    .login-aside {
        min-height: 315px;
        gap: 55px
    }

    .login-main {
        padding: 50px 20px
    }

    .feature-hero-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center
    }

    .feature-hero-grid h1,.feature-hero-grid p {
        margin-left: auto;
        margin-right: auto
    }

    .feature-hero-grid .hero-v2-actions {
        justify-content: center
    }

    .feature-orbit {
        width: min(560px,100%);
        margin: auto
    }

    .feature-quick-nav {
        grid-template-columns: repeat(2,1fr)
    }

    .feature-category-grid {
        grid-template-columns: 1fr
    }

    .feature-flow {
        grid-template-columns: 1fr
    }

    .feature-flow>i {
        transform: rotate(90deg);
        margin: auto
    }

    .annual-explainer {
        grid-template-columns: 52px 1fr
    }

    .annual-explainer>a {
        grid-column: 1/-1
    }

    .portal-stats-v2 {
        grid-template-columns: repeat(2,1fr)
    }

    .portal-two-column {
        grid-template-columns: 1fr
    }
}

@media(max-width: 680px) {
    .public-container {
        width:calc(100% - 24px)
    }

    .public-section-v2 {
        padding: 72px 0
    }

    .site-nav {
        min-height: 65px
    }

    .public-menu {
        top: 76px
    }

    .public-nav-actions {
        left: 24px;
        right: 24px;
        top: 359px
    }

    .public-brand-mark {
        width: 38px;
        height: 38px
    }

    .hero-v2-grid {
        padding: 55px 0 72px
    }

    .hero-v2-copy h1 {
        font-size: 2.75rem
    }

    .hero-v2-copy>p {
        font-size: .9rem
    }

    .hero-v2-actions {
        display: grid
    }

    .hero-v2-actions .public-button {
        width: 100%
    }

    .hero-trust {
        display: grid;
        grid-template-columns: 1fr 1fr;
        text-align: left
    }

    .hero-product-stage {
        padding-bottom: 65px
    }

    .product-window {
        border-radius: 14px
    }

    .product-body {
        grid-template-columns: 42px 1fr;
        min-height: 315px
    }

    .product-body>aside {
        gap: 10px
    }

    .product-body>aside b {
        width: 20px
    }

    .product-body>main {
        padding: 14px
    }

    .product-stats {
        gap: 5px
    }

    .product-stats>div {
        padding: 8px
    }

    .product-stats span {
        width: 24px;
        height: 24px
    }

    .product-stats small {
        font-size: .39rem
    }

    .chart-bars {
        gap: 7px
    }

    .floating-job-card {
        left: 4px;
        bottom: 16px
    }

    .floating-rating-card {
        display: none
    }

    .public-proof-strip .public-container {
        grid-template-columns: 1fr 1fr
    }

    .public-proof-strip div div {
        padding: 13px 7px;
        border: 0
    }

    .solution-card {
        padding: 23px
    }

    .solution-card.large,.solution-card.wide {
        grid-template-columns: 1fr
    }

    .solution-card.large {
        padding-bottom: 0
    }

    .phone-mock {
        width: 220px;
        margin: auto
    }

    .audience-grid {
        grid-template-columns: 1fr
    }

    .public-cta-inner {
        min-height: 270px;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column
    }

    .public-cta-inner>div:last-child {
        width: 100%;
        align-items: stretch
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        padding: 55px 0 40px
    }

    .footer-brand {
        grid-column: 1/-1
    }

    .footer-grid>div:last-child {
        grid-column: auto
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column
    }

    .public-page-hero h1 {
        font-size: 2.7rem
    }

    .page-hero-grid {
        min-height: 0;
        padding: 60px 0
    }

    .about-visual {
        min-height: 300px
    }

    .about-rings span {
        width: 270px;
        height: 270px
    }

    .about-chip.one {
        left: 3px
    }

    .about-chip.two {
        right: 3px
    }

    .values-grid {
        grid-template-columns: 1fr
    }

    .values-grid article {
        border-right: 0;
        border-bottom: 1px solid var(--public-border)!important
    }

    .values-grid article:last-child {
        border-bottom: 0!important
    }

    .included-grid,.contact-step-grid {
        grid-template-columns: 1fr
    }

    .pricing-note {
        grid-template-columns: 42px 1fr
    }

    .pricing-note>a {
        grid-column: 1/-1
    }

    .contact-fields.two {
        grid-template-columns: 1fr
    }

    .contact-form-shell {
        padding: 21px
    }

    .login-aside {
        min-height: 290px;
        padding: 28px 22px
    }

    .login-aside-copy h1 {
        font-size: 2.2rem
    }

    .login-main {
        padding: 35px 14px
    }

    .login-form {
        padding: 21px
    }

    .portal-top {
        align-items: flex-start;
        flex-direction: column
    }

    .portal-stats,.portal-detail-grid {
        grid-template-columns: 1fr
    }

    .portal-table thead {
        display: none
    }

    .portal-table,.portal-table tbody,.portal-table tr {
        display: block
    }

    .portal-table tbody {
        padding: 8px
    }

    .portal-table tr {
        margin-bottom: 8px;
        padding: 9px 11px;
        border: 1px solid #edf2f7;
        border-radius: 9px
    }

    .portal-table td {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 7px 0;
        border: 0;
        text-align: right
    }

    .portal-table td::before {
        content: attr(data-label);
        color: var(--public-muted);
        font-size: .7rem;
        text-align: left
    }

    .portal-table td[colspan] {
        display: block;
        text-align: center
    }

    .portal-table td[colspan]::before {
        display: none
    }

    .feature-hero-grid {
        min-height: 0;
        padding: 60px 0 40px
    }

    .feature-orbit {
        min-height: 330px
    }

    .feature-orbit::before {
        width: 285px;
        height: 285px
    }

    .feature-orbit::after {
        width: 205px;
        height: 205px
    }

    .feature-orbit-core {
        width: 115px;
        height: 115px;
        border-radius: 32px
    }

    .orbit-item.one,.orbit-item.three {
        left: -2px
    }

    .orbit-item.two,.orbit-item.four {
        right: -2px
    }

    .feature-quick-nav {
        grid-template-columns: 1fr
    }

    .feature-category-card {
        padding: 22px
    }

    .feature-category-card>header {
        grid-template-columns: 45px 1fr
    }

    .feature-category-card>header>span {
        width: 45px;
        height: 45px
    }

    .billing-switch {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr
    }

    .billing-switch button {
        padding: 0 7px
    }

    .annual-explainer {
        grid-template-columns: 44px 1fr;
        padding: 18px
    }

    .annual-explainer>span {
        width: 44px;
        height: 44px
    }
}

@media(max-width: 767.98px) {
    input,select,textarea,.login-input {
        font-size:16px!important
    }

    .public-button {
        min-height: 46px
    }

    .login-main {
        padding-bottom: max(35px,env(safe-area-inset-bottom))
    }

    .portal-welcome {
        align-items: flex-start;
        flex-direction: column;
        padding: 24px
    }

    .portal-next-action {
        width: 100%;
        min-width: 0
    }

    .portal-nav {
        top: 6px
    }

    .portal-brand-actions .public-button span {
        display: none
    }

    .portal-brand-actions .public-button {
        width: 44px;
        padding: 0
    }

    .portal-compact-list>div:not(.portal-empty) {
        align-items: flex-start;
        flex-direction: column
    }

    .portal-compact-list>div>span:last-child {
        text-align: left
    }
}

@media(max-width: 520px) {
    .portal-stats-v2 {
        grid-template-columns:1fr
    }

    .portal-welcome h1 {
        font-size: 1.45rem
    }

    .portal-nav {
        margin-left: -5px;
        margin-right: -5px
    }

    .portal-action-stack>div {
        justify-content: flex-end
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        scroll-behavior: auto!important;
        animation: none!important;
        transition: none!important
    }

    [data-reveal] {
        opacity: 1;
        transform: none
    }
}

.product-body>.product-main {
    padding: 25px
}

@media(max-width: 680px) {
    .product-body>.product-main {
        padding:14px
    }
}

.register-section {
    position: relative;
    overflow: hidden;
    padding: 85px 0 100px;
    color: #fff;
    background: radial-gradient(circle at 10% 0,#194891 0,transparent 35%),#07152f
}

.register-section::after {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -210px;
    bottom: -280px;
    border: 75px solid rgba(73,132,239,.1);
    border-radius: 50%
}

.register-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    gap: 75px;
    align-items: center
}

.register-copy h1 {
    margin: 18px 0;
    font-size: clamp(2.65rem,5vw,4.35rem);
    line-height: 1.02;
    letter-spacing: -.06em
}

.register-copy>p {
    color: #adbeda;
    line-height: 1.75
}

.register-copy ul {
    display: grid;
    gap: 13px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    color: #d8e6fa;
    font-size: .82rem
}

.register-copy li {
    display: flex;
    gap: 10px;
    align-items: center
}

.register-copy li i {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    color: #93c5fd;
    background: rgba(59,130,246,.16);
    border-radius: 8px
}

.register-card {
    padding: 29px;
    color: var(--public-text);
    background: #fff;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 23px;
    box-shadow: 0 35px 100px rgba(0,0,0,.3)
}

.register-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 0 22px;
    border-bottom: 1px solid var(--public-border)
}

.register-card-head small,.register-card-head strong,.register-card-head span,.register-card-head a {
    display: block
}

.register-card-head small {
    color: var(--public-muted);
    font-size: .62rem
}

.register-card-head strong {
    margin-top: 4px;
    font-size: .92rem
}

.register-card-head>div:last-child {
    text-align: right
}

.register-card-head span {
    font-size: 1.1rem;
    font-weight: 850
}

.register-card-head a {
    margin-top: 3px;
    color: var(--public-primary);
    font-size: .64rem;
    font-weight: 750
}

.register-form {
    display: grid;
    gap: 14px;
    margin-top: 22px
}

.register-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.register-form label>span {
    display: block;
    margin-bottom: 7px;
    font-size: .68rem;
    font-weight: 760
}

.register-form input:not([type=checkbox]) {
    width: 100%;
    height: 46px;
    padding: 11px 12px;
    border: 1px solid #cfd8e5;
    border-radius: 10px;
    outline: 0;
    background: #fff;
    font: inherit;
    font-size: 16px
}

.register-form input:focus {
    border-color: #2864f0;
    box-shadow: 0 0 0 3px #edf4ff
}

.register-consent {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: var(--public-muted);
    font-size: .68rem
}

.register-consent input {
    width: 17px;
    height: 17px;
    margin: 0;
    flex: 0 0 17px
}

.register-consent span {
    margin: 0!important
}

.register-form>.public-button {
    width: 100%;
    margin-top: 2px
}

.register-form>.public-button:disabled {
    opacity: .55;
    cursor: not-allowed
}

.register-login {
    text-align: center;
    color: var(--public-muted)
}

.register-login a {
    color: var(--public-primary);
    font-weight: 750
}

@media(max-width: 980px) {
    .register-layout {
        grid-template-columns:1fr;
        gap: 40px
    }

    .register-copy {
        text-align: center
    }

    .register-copy h1 {
        max-width: 760px;
        margin-left: auto;
        margin-right: auto
    }

    .register-copy>p {
        max-width: 680px;
        margin-left: auto;
        margin-right: auto
    }

    .register-copy ul {
        width: max-content;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        text-align: left
    }
}

@media(max-width: 680px) {
    .register-section {
        padding:55px 0 70px
    }

    .register-copy h1 {
        font-size: 2.65rem
    }

    .register-card {
        padding: 21px 16px
    }

    .register-card-head {
        align-items: flex-start
    }

    .register-fields {
        grid-template-columns: 1fr
    }

    .register-form {
        gap: 12px
    }
}