:root {
    --bg: #f6f8fb;
    --panel: #fff;
    --panel2: #edf2f6;
    --text: #101419;
    --muted: #6b7280;
    --line: rgba(10,20,40,.1);
    --dark: #090d12;
    --dark2: #11171d;
    --white: #f7fbff;
    --cyan: #10d8e8;
    --blue: #073fe5;
    --green: #1ee26c;
    --brand: linear-gradient(120deg,var(--cyan),var(--blue) 55%,var(--green));
    --radius: 24px;
    --font: 'Manrope',sans-serif;
    --display: 'Anton',sans-serif
}

html[data-theme="dark"] {
    --bg: #090d12;
    --panel: #12181e;
    --panel2: #171f27;
    --text: #f7fbff;
    --muted: #9aa5b1;
    --line: rgba(255,255,255,.09);
    --dark: #090d12;
    --dark2: #11171d;
    --white: #f7fbff
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: auto
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    overflow-x: hidden;
    transition: background .35s,color .35s
}

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

img {
    max-width: 100%;
    display: block
}

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

.section {
    padding: 150px 0
}

.dark-section {
    background: var(--dark);
    color: #f7fbff
}

.center {
    text-align: center
}

.loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #090d12;
    display: grid;
    place-items: center;
    transition: opacity .5s,visibility .5s
}

.loader img {
    width: 140px
}

.loader span {
    position: absolute;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(16,216,232,.3);
    border-radius: 50%;
    animation: pulse 1.4s ease infinite
}

@keyframes pulse {
    to {
        transform: scale(1.45);
        opacity: 0
    }
}

.header {
    height: 86px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(255,255,255,.06);
    backdrop-filter: blur(18px);
    background: rgba(9,13,18,.72)
}

html[data-theme="light"] .header {
    background: rgba(246,248,251,.84);
    border-bottom: 1px solid var(--line)
}

.header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 23px;
    font-weight: 800
}

.logo img {
    width: 54px;
    height: 34px;
    object-fit: contain
}

.nav {
    display: flex;
    gap: 34px;
    font-size: 13px;
    font-weight: 600;
    color: #c5ccd4
}

.nav a {
    transition: .25s
}

.nav a:hover {
    color: var(--cyan)
}

html[data-theme="light"] .nav {
    color: #505864
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px
}

.theme-toggle {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 50%;
    background: #11171d;
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer
}

.theme-toggle span:last-child {
    display: none
}

html[data-theme="light"] .theme-toggle {
    background: #fff;
    color: #111;
    border-color: var(--line)
}

html[data-theme="light"] .theme-toggle span:first-child {
    display: none
}

html[data-theme="light"] .theme-toggle span:last-child {
    display: block
}

.round-btn {
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 999px;
    padding: 8px 8px 8px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    font-weight: 700
}

.round-btn b,.primary-btn i {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--brand);
    display: grid;
    place-items: center;
    color: #fff;
    font-style: normal
}

html[data-theme="light"] .round-btn {
    border-color: var(--line)
}

.hero {
    padding-top: 86px;
    min-height: 860px;
    position: relative;
    overflow: hidden
}

.hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size: 72px 72px;
    pointer-events: none
}

.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .2
}

.glow-a {
    width: 420px;
    height: 420px;
    background: var(--blue);
    right: 10%;
    top: 15%
}

.glow-b {
    width: 320px;
    height: 320px;
    background: var(--green);
    right: -5%;
    bottom: 10%
}

.hero-grid {
    min-height: 690px;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 30px;
    position: relative;
    z-index: 2
}

.kicker {
    font-size: 12px;
    letter-spacing: .22em;
    color: #aab4c0;
    display: flex;
    align-items: center;
    gap: 11px
}

.dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 0 8px rgba(16,216,232,.09)
}

.hero-title,.display-heading {
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: -.018em;
    line-height: .9;
    margin: 26px 0;
    text-transform: uppercase
}

.hero-title {
    font-size: clamp(76px,7vw,118px)
}

.hero-title span:nth-child(2) {
    background: var(--brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.hero-text {
    font-size: 18px;
    line-height: 1.75;
    color: #a9b2bd;
    max-width: 660px
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 30px
}

.primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    border-radius: 999px;
    padding: 10px 10px 10px 24px;
    background: #fff;
    color: #091017;
    font-size: 14px;
    font-weight: 600;
}

.text-link {
    font-size: 14px;
    font-weight: 700
}

.hero-visual {
    height: 640px;
    position: relative;
    display: grid;
    place-items: center
}

.hand-glow {
    position: absolute;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle,rgba(16,216,232,.18),transparent 65%);
    border-radius: 50%
}

.phone-shell {
    width: 310px;
    height: 620px;
    padding: 9px;
    border: 5px solid #e9edf2;
    border-radius: 54px;
    background: #20262d;
    box-shadow: 0 30px 80px rgba(0,0,0,.35);
    position: relative;
    overflow: hidden
}

.hero-phone {
    transform: rotate(8deg);
    z-index: 3
}

.phone-notch {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 104px;
    height: 30px;
    border-radius: 20px;
    background: #070a0d;
    z-index: 5
}

.phone-screen {
    height: 100%;
    border-radius: 42px;
    padding: 70px 24px 26px;
    background: radial-gradient(circle at 70% 0%,rgba(16,216,232,.18),transparent 36%),linear-gradient(160deg,#0d1118,#111a24);
    display: flex;
    flex-direction: column
}

.app-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 54px
}

.app-head img {
    width: 70px
}

.app-head span {
    font-size: 11px;
    color: var(--green)
}

.phone-screen small {
    font-size: 11px;
    letter-spacing: .18em;
    color: #8e98a4
}

.phone-screen strong {
    font-family: var(--display);
    font-size: 74px;
    line-height: 1;
    margin: 16px 0 6px
}

.phone-screen em {
    font-style: normal;
    color: #7d8794;
    font-size: 14px
}

.metric-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: auto
}

.metric-grid div {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 14px;
    background: rgba(255,255,255,.03)
}

.metric-grid b {
    display: block;
    margin-top: 7px
}

.float-pill {
    position: absolute;
    background: #fff;
    color: #10141a;
    border-radius: 999px;
    padding: 5px 15px;
    font-size: 12px;
    letter-spacing: .1em;
    box-shadow: 0 8px 20px rgba(0,0,0,.15);
    z-index: 5 ;
    font-weight: 600;
}

.p1 {
    right: 1%;
    top: 28%
}

.p2 {
    left: 4%;
    bottom: 16%
}

.p3 {
    right: 10%;
    bottom: 6%
}

.glass-card {
    position: absolute;
    left: -5%;
    bottom: 6%;
    width: 280px;
    border-radius: 18px;
    padding: 18px 20px;
    background: linear-gradient(115deg,rgba(7,63,229,.75),rgba(16,216,232,.55));
    backdrop-filter: blur(12px);
    z-index: 4
}

.review-main {
    display: flex;
    align-items: center;
    gap: 16px
}

.review-main>b {
    font-family: var(--display);
    font-size: 54px
}

.review-main span {
    font-size: 22px;
    color: #fff
}

.review-main small {
    display: block;
    color: #ffffff;
    margin-top: 3px
}

.review-arrow {
    position: absolute;
    right: 16px;
    bottom: 12px
}

.brand-strip {
    border-top: 1px solid rgba(255,255,255,.07);
    padding: 28px 0 34px
}

.brand-strip>span {
    display: block;
    text-align: center;
    font-size: 10px;
    letter-spacing: .2em;
    color: #77828e;
    margin-bottom: 24px
}

.logo-marquee {
    overflow: hidden
}

.logo-track {
    display: flex;
    width: max-content;
    gap: 74px;
    align-items: center;
    animation: marquee 26s linear infinite
}

.logo-track b {
    font-size: 16px;
    white-space: nowrap;
    color: #bdc5ce
}

@keyframes marquee {
    to {
        transform: translateX(-50%)
    }
}

.narrow-head {
    max-width: 950px
}

.mini-pill {
    display: inline-flex;
    border-radius: 999px;
    background: var(--panel2);
    padding: 8px 15px;
    font-size: 12px;
    font-weight: 700
}

.mini-pill.dark {
    background: #141b22;
    color: #dce5ed
}

.display-heading {
    font-size: clamp(58px,6.2vw,92px);
    line-height: .93
}

.narrow-head p {
    max-width: 680px;
    margin: 0 auto;
    color: var(--muted);
    font-size: 17px
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    margin-top: 72px;
    border-radius: 24px;
    overflow: hidden;
    gap: 1px;
    background: var(--line)
}

.feature-card {
    background: var(--panel);
    padding: 58px 42px 52px;
    min-height: 310px
}

.feature-card h3 {
    font-family: var(--display);
    font-size: 28px;
    font-weight: 400;
    margin: 32px 0 14px;
    line-height: 1
}

.feature-card p {
    color: var(--muted);
    line-height: 1.7;
    margin: 0
}

.f-icon {
    height: 38px;
    font-size: 38px
}

.layers i {
    display: block;
    width: 34px;
    height: 8px;
    border-radius: 4px;
    background: currentColor;
    margin-top: -1px;
    transform: skewY(-18deg)
}

.bolt {
    font-family: var(--display)
}

.feature-note {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 42px;
    color: var(--muted)
}

.feature-note>span {
    background: var(--text);
    color: var(--bg);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700
}

.feature-note a {
    text-decoration: underline;
    color: var(--text);
    font-weight: 700
}

.capability {
    overflow: hidden
}

.phone-stage {
    height: 770px;
    position: relative;
    display: grid;
    place-items: center;
    perspective: 1300px
}

.stage-phone {
    transform: rotateX(58deg) rotateZ(-16deg) scale(.92);
    width: 390px;
    height: 690px
}

.light-ui {
    background: #f4f7f9;
    color: #0b1118
}

.light-ui small {
    color: #6b7480
}

.light-ui h3 {
    font-family: var(--display);
    font-size: 46px;
    line-height: .95;
    margin: 28px 0 32px
}

.ui-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    border-top: 1px solid rgba(10,20,30,.1);
    font-size: 13px
}

.ui-line b {
    color: var(--blue);
    font-size: 11px
}

.ui-price {
    margin-top: auto;
    background: #0d131a;
    color: #fff;
    border-radius: 22px;
    padding: 20px
}

.ui-price strong {
    font-size: 48px;
    margin: 6px 0 0
}

.stage-tag {
    position: absolute;
    background: #fff;
    color: #10161d;
    padding: 10px 15px;
    border-radius: 999px;
    font-size: 10px;
    z-index: 5;
    box-shadow: 0 9px 30px rgba(0,0,0,.18)
}

.tag-a {
    left: 8%;
    top: 22%
}

.tag-b {
    left: 17%;
    top: 34%
}

.tag-c {
    right: 13%;
    top: 31%
}

.tag-d {
    right: 17%;
    top: 14%
}

.experience-strip {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    background: linear-gradient(105deg,#0d2741 0%,#10364a 45%,#173f42 100%);
    border: 1px solid rgba(80,214,224,.18);
    box-shadow: 0 18px 50px rgba(4,18,34,.18),inset 0 1px 0 rgba(255,255,255,.04);
    display: grid;
    grid-template-columns: 1.35fr repeat(3,1fr);
    padding: 30px 36px;
    align-items: center;
    gap: 20px
}

.experience-copy span {
    font-family: var(--display);
    font-size: 25px;
    line-height: .95
}

.experience-copy b {
    color: var(--cyan);
    font-weight: 400
}

.experience-item {
    border-left: 1px solid rgba(255,255,255,.14);
    padding: 4px 0 4px 28px
}

.experience-item strong {
    font-family: var(--display);
    font-size: 40px;
    display: block
}

.experience-item span {
    font-size: 12px;
    color: #b8c8d5
}

.service-feature-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 80px;
    align-items: center
}

.step-label {
    font-size: 11px;
    letter-spacing: .15em;
    color: var(--muted)
}

.display-heading.left {
    text-align: left
}

.service-copy p {
    color: var(--muted);
    font-size: 17px;
    line-height: 1.75
}

.service-copy ul {
    list-style: none;
    padding: 0;
    margin: 30px 0
}

.service-copy li {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px
}

.service-copy li:before {
    content: "\2192";
    margin-right: 10px;
    color: var(--blue)
}

.small-link {
    text-decoration: underline;
    font-weight: 800;
    font-size: 13px
}

.service-art {
    height: 610px;
    border-radius: 34px;
    overflow: hidden;
    position: relative
}

.service-art>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.8)
}

.service-art:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,rgba(2,10,18,.58),transparent 60%)
}

.floating-panel {
    position: absolute;
    z-index: 3;
    background: rgba(8,13,18,.88);
    color: #fff;
    border: 1px solid rgba(255,255,255,.1);
    backdrop-filter: blur(12px);
    border-radius: 18px;
    padding: 18px;
    width: 190px
}

.floating-panel small {
    display: block;
    color: #8fa0af;
    font-size: 9px;
    letter-spacing: .15em
}

.floating-panel b {
    display: block;
    font-family: var(--display);
    font-size: 30px;
    margin-top: 8px
}

.floating-panel span {
    font-size: 11px;
    color: #a8b4bf
}

.fp-a {
    left: 24px;
    bottom: 24px
}

.fp-b {
    right: 24px;
    top: 24px
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px
}

.bento-card {
    min-height: 420px;
    border-radius: 22px;
    overflow: hidden;
    position: relative;
    background: #141b22;
    border: 1px solid rgba(255,255,255,.07)
}

.bento-wide {
    grid-row: span 2;
    min-height: 856px
}

.bento-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .66
}

.bento-card:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,rgba(3,7,12,.92),transparent 62%)
}

.bento-copy {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 26px;
    z-index: 2
}

.bento-copy span {
    font-size: 10px;
    letter-spacing: .18em;
    color: var(--cyan)
}

.bento-copy h3 {
    font-family: var(--display);
    font-size: 34px;
    font-weight: 400;
    line-height: 1;
    margin: 10px 0
}

.bento-copy p {
    font-size: 13px;
    line-height: 1.55;
    color: #b3bdc8;
    margin: 0
}

.mesh-art {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 45%,rgba(16,216,232,.25),transparent 40%),#10171e
}

.mesh-art i {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 25px var(--cyan)
}

.mesh-art i:nth-child(1) {
    left: 20%;
    top: 20%
}

.mesh-art i:nth-child(2) {
    left: 70%;
    top: 28%
}

.mesh-art i:nth-child(3) {
    left: 55%;
    top: 55%
}

.mesh-art i:nth-child(4) {
    left: 27%;
    top: 66%
}

.mesh-art i:nth-child(5) {
    left: 77%;
    top: 75%
}

.proof-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 70px
}

.proof-panel {
    border: 1px solid var(--line);
    background: var(--panel);
    border-radius: 22px;
    padding: 30px
}

.proof-panel small {
    font-size: 10px;
    letter-spacing: .18em;
    color: var(--muted)
}

.name-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 12px;
    margin-top: 22px
}

.name-grid span {
    background: var(--panel2);
    border-radius: 12px;
    min-height: 64px;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    padding: 8px
}

.name-grid.compact {
    grid-template-columns: repeat(4,1fr)
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px;
    margin-top: 70px
}

.testimonial-grid article {
    background: #131a21;
    border: 1px solid rgba(255,255,255,.07);
    padding: 34px;
    border-radius: 18px
}

.quote {
    font-family: Georgia,serif;
    font-size: 70px;
    line-height: .6;
    color: var(--cyan)
}

.testimonial-grid p {
    color: #a8b3be;
    line-height: 1.7;
    min-height: 110px
}

.testimonial-grid b {
    display: block;
    font-size: 13px
}

.testimonial-grid span {
    font-size: 11px;
    color: #71808d
}

.faq-grid {
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: 80px;
    align-items: start
}

.accordion {
    border-top: 1px solid var(--line)
}

.faq-item {
    width: 100%;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    padding: 22px 0;
    display: flex;
    justify-content: space-between;
    text-align: left;
    font: 600 14px var(--font);
    cursor: pointer
}

.faq-item b {
    font-size: 30px;
}

.faq-answer {
    display: none;
    padding: 10px 0px;
    color: var(--muted);
    line-height: 1.7;
    font-size: 14px
}

.faq-item.active+ .faq-answer {
    display: block
}

.faq-item.active b {
    transform: rotate(45deg)
}

.download-cta {
    padding: 100px 0;
    overflow: hidden
}

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

.download-cta .download-grid ul {
    padding-left: 0px;
}

.download-cta .download-grid ul li {
    list-style: none;
    line-height: 32px;
    color: #536c80;
}

.download-cta .download-grid ul li svg {
    width: 22px;
    height: 22px;
    stroke: url(#brand-icon-gradient);
    color: transparent;
}

.download-grid p {
    color: #9aa7b3;
    max-width: 560px;
    line-height: 1.75;
    margin-bottom: 18px;
}

.cta-phone-wrap {
    height: 500px;
    position: relative;
    display: grid;
    place-items: center
}

.cta-phone {
    width: 250px;
    height: 500px;
    transform: rotate(10deg);
    z-index: 2
}

.cta-phone .phone-screen img {
    width: 100px;
    margin: auto auto 35px
}

.cta-phone .phone-screen strong {
    font-size: 55px
}

.cta-mark {
    position: absolute;
    width: 420px;
    opacity: .12;
    filter: blur(.2px)
}

.footer {
    background: #080c10;
    color: #f5f8fb;
    position: relative
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr .75fr .9fr 1.2fr;
    gap: 55px;
    padding: 86px 0
}

.footer-logo {
    margin-bottom: 20px
}

.footer-brand>p,.footer-col>p {
    color: #ffffff;
    line-height: 1.65;
    font-size: 15px !important;
}

.footer-rating {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #12181e;
    border-radius: 16px;
    padding: 14px 18px;
    margin-top: 30px;
    max-width: 310px
}

.footer-rating strong {
    font-family: var(--display);
    font-size: 42px
}

.footer-rating span {
    font-size: 12px;
    color: #fff
}

.footer-rating small {
    display: block;
    color: #88949f;
    font-size: 9px
}

.footer-rating b {
    margin-left: auto
}

.footer-col h4 {
    font-family: var(--display);
    font-size: 20px;
    font-weight: 400;
    margin: 4px 0 26px
}

.footer-col>a {
    display: block;
    color: #ffffff;
    font-size: 15px !important;
    margin: 12px 0;
    font-weight: 400;
}

.footer-col .strong {
    color: #fff;
    font-weight: 800
}

.gap-top {
    margin-top: 30px
}

.newsletter {
    display: flex;
    background: #12181e;
    border-radius: 14px;
    padding: 7px;
    margin-top: 26px
}

.newsletter input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    color: #fff;
    padding: 0 12px;
    min-width: 0
}

.newsletter button {
    border: 0;
    border-radius: 10px;
    padding: 14px 18px;
    color: #fff;
    background: var(--brand);
    font-weight: 800;
    cursor: pointer
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.06)
}

.footer-bottom .container {
    display: flex;
    justify-content: space-between;
    padding: 24px 0;
    color: #6f7b86;
    font-size: 11px
}

.to-top {
    position: absolute;
    right: 32px;
    bottom: 18px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fff;
    color: #10151a;
    display: grid;
    place-items: center;
    font-size: 20px
}

@media(max-width: 1100px) {
    .nav {
        display:none
    }

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

    .hero {
        padding-bottom: 60px
    }

    .hero-visual {
        height: 610px
    }

    .service-feature-grid,.download-grid {
        grid-template-columns: 1fr
    }

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

    .bento-wide {
        grid-row: auto;
        grid-column: span 2;
        min-height: 520px
    }

    .proof-panels {
        grid-template-columns: 1fr
    }

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

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

    .experience-strip {
        grid-template-columns: 1fr 1fr
    }

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

    .feature-card {
        min-height: auto
    }

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

@media(max-width: 767px) {
    .container {
        width:min(100% - 28px,1320px)
    }

    .section {
        padding: 95px 0
    }

    .header {
        height: 72px
    }

    .header-actions .round-btn span {
        display: none
    }

    .round-btn {
        padding: 7px
    }

    .hero {
        padding-top: 72px
    }

    .hero-grid {
        min-height: auto;
        padding-top: 70px
    }

    .hero-title {
        font-size: 58px
    }

    .hero-text {
        font-size: 15px
    }

    .hero-actions {
        align-items: flex-start;
        flex-direction: column
    }

    .hero-visual {
        height: 500px
    }

    .hero-phone {
        width: 230px;
        height: 460px
    }

    .phone-screen strong {
        font-size: 58px
    }

    .glass-card {
        width: 220px;
        left: 0
    }

    .p1 {
        right: -5%
    }

    .p2 {
        left: -3%
    }

    .display-heading {
        font-size: 50px
    }

    .phone-stage {
        height: 580px
    }

    .stage-phone {
        width: 260px;
        height: 500px
    }

    .stage-tag {
        font-size: 8px
    }

    .tag-a {
        left: 0
    }

    .tag-b {
        left: 2%;
        top: 40%
    }

    .tag-c {
        right: 0
    }

    .experience-strip {
        grid-template-columns: 1fr
    }

    .experience-item {
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.1);
        padding: 18px 0 0
    }

    .service-art {
        height: 450px
    }

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

    .bento-wide {
        grid-column: auto
    }

    .proof-panel {
        padding: 20px
    }

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

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

    .footer-bottom .container {
        flex-direction: column;
        gap: 8px
    }

    .to-top {
        right: 18px
    }

    .feature-note {
        flex-direction: column;
        text-align: center
    }
}

.loader.hide {
    opacity: 0;
    visibility: hidden
}

:root {
    --bg: #f7fafc;
    --panel2: #edf4f8;
    --muted: #5f6f7c;
    --brand: linear-gradient(115deg,#10cbdc,#074de8 65%,#13c969)
}

body {
    font-size: 14px;
    line-height: 1.65
}

section[id],.brand-strip[id] {
    scroll-margin-top: 126px
}

.container {
    width: min(1278px,calc(100% - 64px));
}

.section {
    padding: 108px 0
}

.icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    vertical-align: middle
}

a,button {
    -webkit-tap-highlight-color: transparent
}

button {
    font-family: var(--font)
}

a:focus-visible,button:focus-visible,input:focus-visible {
    outline: 3px solid #10cbdc;
    outline-offset: 5px
}

.header {
    top: 16px;
    left: 16px;
    right: 16px;
    height: 88px;
    border: 1px solid #24313c;
    border-radius: 50px;
    background: rgba(5,10,19,.95);
    box-shadow: 0 12px 40px #00142512
}

.header-inner {
    width: calc(100% - 72px);
    max-width: 1500px;
    gap: 24px
}

.logo {
    flex-shrink: 0
}

.logo img {
    width: 100px;
    height: 50px;
    object-fit: contain
}

.nav {
    gap: 28px;
    font-size: 13px;
    color: #f1f5f9
}

.header-actions {
    gap: 22px
}

.round-btn {
    order: -1;
    color: #fff;
    background: #0756e8;
    border: 0;
    padding: 7px 7px 7px 22px;
    gap: 22px;
    font-size: 13px;
    white-space: nowrap
}

.round-btn b {
    background: white;
    color: #0756e8;
    width: 42px;
    height: 42px
}

.theme-toggle {
    display: flex;
    width: auto;
    height: 44px;
    padding: 5px;
    gap: 4px;
    background: transparent;
    border: 0
}

.theme-toggle span,.theme-toggle span:last-child,html[data-theme="light"] .theme-toggle span:first-child,html[data-theme="light"] .theme-toggle span:last-child {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%
}

.theme-toggle span {
    color: #8095a8
}

.theme-toggle span:nth-child(2) {
    background: #0756e8;
    color: #fff
}

.theme-label {
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    margin-left: 8px;
    white-space: nowrap
}

html[data-theme="light"] .header {
    background: rgba(255,255,255,.96);
    border: 1px solid #d6e5ed;
    box-shadow: 0 10px 36px #074b7b0c
}

html[data-theme="light"] .nav {
    color: #22384b
}

html[data-theme="light"] .nav a:hover {
    color: #0756e8
}

html[data-theme="light"] .theme-toggle {
    background: transparent;
    color: #18334d
}

html[data-theme="light"] .theme-toggle span:first-child {
    background: #e2f5fb;
    color: #0756e8
}

html[data-theme="light"] .theme-toggle span:nth-child(2) {
    background: transparent;
    color: #8095a8
}

.menu-toggle {
    display: none;
    color: inherit;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 50%;
    width: 42px;
    height: 42px;
    place-items: center
}

.hero {
    padding-top: 124px;
    min-height: 810px
}

.hero-grid {
    min-height: 645px;
    gap: 50px
}

.hero-title {
    font-size: clamp(60px,6.2vw,94px);
    line-height: 90px;
    letter-spacing: 4px;
    margin: 24px 0
}

.hero-text {
    font-size: 15px;
    line-height: 1.85;
    max-width: 520px
}

.kicker {
    font-size: 10px;
    letter-spacing: .15em;
    line-height: 1.7
}

.hero-visual {
    height: 600px
}

.hero-phone {
    width: 280px;
    height: 560px
}

.hero-actions {
    gap: 24px
}

.primary-btn,.text-link {
    font-size: 13px
}

.hero .phone-screen {
    padding: 65px 20px 22px
}

.app-head {
    margin-bottom: 36px
}

.phone-screen {
    color: #f7fbff
}

.phone-screen small {
    letter-spacing: .11em
}

.p1 {
    right: -2%
}

.p2 {
    left: 0;
    bottom: 28%
}

.glass-card {
    left: -8%;
    bottom: 5%;
    width: 230px
}

.review-main>b {
    font-size: 44px
}

.brand-strip {
    padding: 26px 0
}

.display-heading {
    font-size: clamp(46px,5.2vw,72px);
    line-height: 1.09;
    margin: 22px 0
}

.narrow-head {
    max-width: 920px
}

.narrow-head p,.service-copy p {
    font-size: 15px;
    line-height: 1.85
}

.feature-grid,.proof-panels,.testimonial-grid {
    margin-top: 48px
}

.feature-card {
    padding: 36px;
    min-height: 290px
}

.feature-card h3 {
    font-size: 25px;
    line-height: 1.2;
    margin: 24px 0 14px
}

.feature-card p {
    font-size: 14px;
    line-height: 1.8
}

.f-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: #0756e812;
    color: #0756e8;
    display: grid;
    place-items: center
}

.f-icon .icon {
    width: 28px;
    height: 28px
}

html[data-theme="dark"] .f-icon {
    background: #10d8e815;
    color: #10d8e8
}

.feature-note {
    margin-top: 26px;
    font-size: 13px
}

.feature-note p {
    margin: 0
}

.mini-pill {
    font-size: 11px;
    padding: 7px 14px
}

.service-feature-grid {
    gap: 64px
}

.service-art {
    height: 530px
}

.bento-card {
    min-height: 350px
}

.bento-wide {
    min-height: 716px
}

.bento-copy h3 {
    font-size: 29px;
    line-height: 1.15
}

.testimonial-grid article {
    padding: 28px
}

.testimonial-grid p {
    font-size: 14px
}

.footer-grid {
    gap: 40px;
    padding: 72px 0
}

.footer-logo img {
    width: 116px;
    height: 58px
}

.capability {
    position: relative
}

.stage-intro {
    max-width: 520px!important;
    color: #a8bac8!important
}

.phone-stage {
    height: 700px;
    isolation: isolate
}

.stage-phone {
    width: 320px;
    height: 590px;
    transform: none;
    z-index: 2;
    border-radius: 48px;
    box-shadow: 0 28px 70px #0004
}

.stage-phone .phone-screen {
    padding: 58px 22px 22px;
    border-radius: 35px
}

.light-ui {
    color: #102238
}

.light-ui h3 {
    font-size: 35px;
    line-height: 1.13;
    margin: 20px 0
}

.ui-line {
    padding: 12px 0;
    font-size: 12px
}

.ui-price {
    border-radius: 16px;
    padding: 14px 18px
}

.ui-price small {
    color: #a4bfca
}

.ui-price strong {
    display: block;
    font-size: 39px;
    line-height: 1.1
}

.campaign-chart {
    margin: 17px 0
}

.campaign-chart>svg {
    display: block;
    width: 100%;
    height: 62px;
    margin-top: 10px
}

.chart-label {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: #536577
}

.chart-label b {
    color: #06734b;
    font-size: 8px
}

.chart-label .icon {
    width: 12px;
    height: 12px
}

.stage-orbit {
    position: absolute;
    width: 630px;
    height: 630px;
    z-index: -1;
    border: 1px solid #10d8e81c;
    border-radius: 50%;
    background: radial-gradient(ellipse,#0756e820,transparent 68%)
}

.stage-orbit:after {
    content: '';
    position: absolute;
    inset: 65px;
    border: 1px dashed #10d8e825;
    border-radius: 50%
}

.stage-story {
    position: absolute;
    width: 245px;
    z-index: 3
}

.story-left {
    left: 0;
    top: 27%
}

.story-right {
    right: 0;
    top: 42%
}

.stage-story .step-label {
    color: #10d8e8
}

.stage-story h3 {
    font-size: 27px;
    line-height: 1.25;
    letter-spacing: -1px;
    margin: 15px 0
}

.stage-story p {
    font-size: 13px;
    line-height: 1.85;
    color: #9aafbe
}

.story-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 20px
}

.story-chips span {
    border: 1px solid #b5d3df26;
    border-radius: 30px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 500;
}

.story-chips .icon {
    width: 14px;
    height: 14px;
    margin-right: 4px
}

.stage-tag {
    font-size: 9px;
    padding: 9px 14px;
    background: #132834;
    color: #bceef6;
    border: 1px solid #10d8e830;
    box-shadow: none
}

.tag-a {
    left: 28%;
    top: 15%
}

.tag-b {
    left: 29%;
    top: 82%
}

.tag-c {
    right: 24%;
    top: 75%
}

.tag-d {
    right: 25%;
    top: 7%
}

.experience-strip {
    padding: 26px 30px
}

.experience-copy span {
    font-size: 23px;
    line-height: 1.18
}

.experience-item strong {
    font-size: 34px
}

.experience-item span {
    line-height: 1.6
}

html[data-theme="light"] .dark-section {
    background: #edf5f9;
    color: #102238
}

html[data-theme="light"] .hero {
    background: linear-gradient(120deg,#fafcfe 35%,#edf6ff 75%,#e4faf3)
}

html[data-theme="light"] .hero:before {
    background-image: linear-gradient(#0756e807 1px,transparent 1px),linear-gradient(90deg,#0756e807 1px,transparent 1px)
}

html[data-theme="light"] .hero-text,html[data-theme="light"] .kicker,html[data-theme="light"] .download-grid p {
    color: #536c80
}

html[data-theme="light"] .primary-btn {
    background: #0756e8;
    color: #fff
}

html[data-theme="light"] .primary-btn i {
    background: #fff;
    color: #0756e8
}

html[data-theme="light"] .brand-strip {
    border-color: #12375714
}

html[data-theme="light"] .logo-track b {
    color: #4a6378
}

html[data-theme="light"] .brand-strip>span {
    color: #536c80;
    font-weight: 700;
}

html[data-theme="light"] .mini-pill.dark {
    background: #dcebf4;
    color: #21516d
}

html[data-theme="light"] .stage-story p,html[data-theme="light"] .stage-intro {
    color: #536c80!important
}

html[data-theme="light"] .stage-story .step-label {
    color: #0756e8
}

html[data-theme="light"] .story-chips span {
    border-color: #0756e825;
    background: #fff9
}

html[data-theme="light"] .stage-tag {
    background: #fff;
    color: #19516c;
    border-color: #c9e5ee
}

html[data-theme="light"] .experience-strip {
    background: linear-gradient(110deg,#dfebff,#def5f4,#e4f6e9);
    border-color: #c9dfe9
}

html[data-theme="light"] .experience-copy b {
    color: #0756e8;
}

html[data-theme="light"] .experience-item {
    border-color: #ffffff54;
}

html[data-theme="light"] .experience-item span {
    color: #536c80
}

.bento-card {
    color: #f7fbff
}

html[data-theme="light"] .testimonial-grid article {
    background: #fff;
    border-color: #dce6ed
}

html[data-theme="light"] .testimonial-grid p {
    color: #536c80
}

html[data-theme="light"] .quote {
    color: #0756e8
}

@media(min-width: 1101px) and (max-width:1250px) {
    .header-inner {
        width:calc(100% - 48px);
        gap: 16px
    }

    .nav {
        gap: 18px
    }

    .theme-label {
        display: none
    }

    .stage-story {
        width: 220px
    }
}

@media(max-width: 1100px) {
    .menu-toggle {
        display:grid
    }

    .nav.is-open {
        display: flex;
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        right: 0;
        background: #101b28;
        border: 1px solid #29394a;
        border-radius: 24px;
        padding: 24px;
        flex-wrap: wrap;
        box-shadow: 0 16px 30px #00142522
    }

    html[data-theme="light"] .nav.is-open {
        background: #fff;
        border-color: #dce6ed
    }

    .hero-grid {
        grid-template-columns: 1.05fr .95fr;
        gap: 24px
    }

    .hero-title {
        font-size: clamp(48px,6.2vw,70px)
    }

    .hero-phone {
        width: 245px;
        height: 500px
    }

    .hero-visual {
        height: 560px
    }

    .hero .phone-screen strong {
        font-size: 58px
    }

    .hero .metric-grid div {
        padding: 10px
    }

    .glass-card {
        left: -3%
    }

    .stage-story {
        width: 190px
    }

    .stage-story h3 {
        font-size: 23px
    }

    .stage-phone {
        width: 290px
    }

    .tag-a {
        left: 24%
    }

    .tag-c {
        right: 20%
    }

    .feature-grid {
        grid-template-columns: repeat(3,1fr)
    }

    .feature-card {
        padding: 25px
    }

    .feature-card h3 {
        font-size: 22px
    }

    .bento-wide {
        min-height: 460px
    }
}

@media(max-width: 800px) {
    .theme-label {
        display:none
    }

    .stage-story {
        width: 160px
    }

    .stage-story h3 {
        font-size: 21px
    }

    .stage-phone {
        width: 270px
    }

    .story-chips {
        display: none
    }

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

    .feature-card {
        padding: 30px
    }

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

    .hero-copy {
        max-width: 600px
    }

    .hero-visual {
        height: 540px
    }

    .hero-title {
        font-size: 68px
    }

    .hero-grid {
        padding-top: 45px
    }

    .hero-phone {
        width: 260px;
        height: 520px
    }

    .p1 {
        right: 12%
    }

    .p2 {
        left: 12%
    }

    .glass-card {
        left: 8%
    }
}

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

    .section {
        padding: 60px 0 !important;
    }

    .header {
        top: 10px;
        left: 10px;
        right: 10px;
        height: 72px;
        border-radius: 23px
    }

    .header-inner {
        width: calc(100% - 28px);
        gap: 10px
    }

    .logo img {
        width: 73px;
        height: 40px
    }

    .header-actions {
        gap: 9px
    }

    .round-btn {
        padding: 5px;
        gap: 0
    }

    .round-btn b {
        width: 36px;
        height: 36px
    }

    .theme-toggle {
        gap: 0;
        padding: 0
    }

    .theme-toggle span,.theme-toggle span:last-child,html[data-theme="light"] .theme-toggle span:first-child,html[data-theme="light"] .theme-toggle span:last-child {
        width: 28px;
        height: 30px
    }

    .theme-toggle .icon {
        width: 18px;
        height: 18px
    }

    .menu-toggle {
        width: 36px;
        height: 36px
    }

    .nav.is-open {
        gap: 0;
        flex-direction: column;
        padding: 12px 22px
    }

    .nav a {
        padding: 10px
    }

    .hero {
        padding-top: 100px;
        padding-bottom: 0;
        min-height: auto
    }

    .hero-grid {
        padding-top: 32px
    }

    .hero-title {
        font-size: clamp(44px,10.5vw,65px);
        line-height: 1.08;
        margin: 22px 0
    }

    .kicker {
        font-size: 8px;
        letter-spacing: .1em
    }

    .hero-text {
        font-size: 14px;
        line-height: 1.8
    }

    .hero-actions {
        flex-direction: row;
        gap: 18px;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 24px
    }

    .hero-visual {
        height: 550px
    }

    .p1 {
        right: 0;
        top: 23%
    }

    .p2 {
        left: 0;
        bottom: 30%
    }

    .glass-card {
        left: 0;
        bottom: 8%;
        width: 205px
    }

    .p3 {
        right: 0;
        bottom: 4%
    }

    .display-heading {
        font-size: clamp(38px,8.5vw,54px);
        line-height: 1.12
    }

    .narrow-head p {
        font-size: 14px
    }

    .feature-grid,.proof-panels,.testimonial-grid {
        margin-top: 32px
    }

    .feature-note {
        width: calc(100% - 36px);
        margin-inline:auto }

    .phone-stage {
        height: auto;
        padding-top: 35px;
        padding-bottom: 32px;
        display: flex;
        flex-direction: column;
        gap: 30px;
        perspective: 1200px
    }

    .stage-phone {
        order: 1;
        width: 278px;
        height: 555px;
        flex-shrink: 0
    }

    .stage-story {
        position: relative;
        width: 100%;
        max-width: 420px;
        left: auto;
        right: auto;
        top: auto;
        padding: 22px;
        border: 1px solid #9bbac828;
        border-radius: 20px;
        background: #91d6ef06
    }

    .story-left {
        order: 2
    }

    .story-right {
        order: 3
    }

    .stage-story h3 {
        font-size: 23px;
        margin: 10px 0
    }

    .stage-story h3 br {
        display: none
    }

    .stage-story p {
        margin-bottom: 0
    }

    .stage-orbit {
        top: 70px;
        width: 440px;
        height: 440px;
        max-width: 125%
    }

    .stage-tag {
        display: none
    }

    .stage-story .story-chips {
        display: flex;
        margin-top: 14px
    }

    .light-ui h3 {
        font-size: 32px
    }

    .stage-phone .phone-screen {
        padding-top: 55px
    }

    .campaign-chart {
        margin: 12px 0
    }

    .experience-strip {
        padding: 24px;
        gap: 16px
    }

    .experience-copy span br {
        display: none
    }

    .experience-copy span {
        font-size: 22px
    }

    .experience-item {
        padding-top: 14px
    }

    .experience-item strong {
        font-size: 30px
    }

    .service-feature-grid,.faq-grid,.download-grid {
        gap: 34px
    }

    .service-art {
        height: 390px
    }

    .floating-panel {
        width: 155px;
        padding: 14px
    }

    .fp-a {
        left: 16px;
        bottom: 16px
    }

    .fp-b {
        right: 16px;
        top: 16px
    }

    .bento-card,.bento-wide {
        min-height: 380px
    }

    .bento-copy {
        left: 24px;
        right: 24px
    }

    .download-cta {
        padding: 72px 0 32px
    }

    .cta-phone-wrap {
        height: 460px
    }

    .footer-grid {
        padding: 56px 0;
        gap: 28px
    }

    .footer-col h4 {
        margin-bottom: 18px
    }

    .footer-bottom .container {
        padding-right: 50px
    }

    .brand-strip>span {
        font-size: 8px
    }

    .logo-track {
        gap: 40px
    }

    .logo-track b {
        font-size: 14px
    }
}

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

    .stage-phone {
        transform: none!important
    }
}

.hero-title span:nth-child(2) {
    width: fit-content;
    max-width: 100%;
    background: var(--brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.review-main>b,.footer-rating strong {
    color: #fff
}

.header .header-actions {
    align-items: center;
    gap: 14px;
    flex-shrink: 0
}

.header .round-btn {
    height: 42px;
    padding: 5px 5px 5px 17px;
    gap: 14px;
    font-size: 12px;
    line-height: 1;
    align-items: center;
    text-transform: uppercase;
}

.header .round-btn b {
    width: 32px;
    height: 32px;
    flex-shrink: 0
}

.header .round-btn .icon {
    width: 18px;
    height: 18px;
    display: block
}

.header .theme-toggle {
    height: 42px;
    width: 93px;
    padding: 9px 24px;
    gap: 16px;
    align-items: center;
    justify-content: center;
    border: 1px solid #344457;
    border-radius: 999px;
    background: #101b28;
    line-height: 1;
}

.header .theme-toggle span, html[data-theme="light"] .header .theme-toggle span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
}

.header .theme-toggle .icon {
    display: block;
    width: 20px;
    height: 20px;
}

.header .theme-label {
    display: none
}

html[data-theme="light"] .header .theme-toggle {
    background: #f0f5f9;
    border-color: #d3e1eb
}

html[data-theme="light"] .header .theme-toggle span:first-child {
    background: #0756e8;
    color: #fff
}

.header .menu-toggle {
    height: 42px;
    width: 42px;
    flex-shrink: 0;
    cursor: pointer
}

@media(max-width: 767px) {
    .header .header-actions {
        gap:8px
    }

    .header .round-btn {
        height: 38px;
        width: 38px;
        padding: 4px;
        gap: 0;
        justify-content: center
    }

    .header .round-btn b {
        width: 30px;
        height: 30px
    }

    .header .theme-toggle {
        height: 38px;
        width: 68px;
        padding: 4px;
        gap: 2px
    }

    .header .theme-toggle span, html[data-theme="light"] .header .theme-toggle span {
        width: 28px;
        height: 28px;
        flex-basis: 28px
    }

    .header .theme-toggle .icon {
        width: 16px;
        height: 16px
    }

    .header .menu-toggle {
        height: 38px;
        width: 38px
    }
}

:root {
    --brand: linear-gradient(100deg,#10d8e8 0%,#079be8 24%,#073fe5 47%,#087acb 62%,#0ed8b2 79%,#1ee26c 100%)
}

.brand-defs {
    position: absolute;
    overflow: hidden;
    pointer-events: none
}

.logo-track {
    gap: 0;
    animation: marquee 42s linear infinite
}

.logo-group {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-right: 23px;
    flex-shrink: 0
}

.partner-logo {
    width: 178px;
    height: 86px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    padding: 14px 20px;
    background: #fff;
    border: 1px solid #dce6ed;
    border-radius: 16px
}

.partner-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.logo-marquee {
    mask-image: linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)
}

.logo-marquee:hover .logo-track {
    animation-play-state: paused
}

html[data-theme="light"] .header .round-btn, html[data-theme="light"] .primary-btn, html[data-theme="light"] .header .theme-toggle span:first-child, html[data-theme="light"] .glass-card {
    background: var(--brand)
}

html[data-theme="light"] .header .round-btn, html[data-theme="light"] .primary-btn {
    color: #fff;
    text-shadow: 0 1px 3px #003b6980;
}

html[data-theme="light"] .header .round-btn b, html[data-theme="light"] .primary-btn i {
    text-shadow: none
}

html[data-theme="light"] .f-icon {
    background: linear-gradient(115deg,#10d8e818,#073fe512,#1ee26c18)
}

html[data-theme="light"] .f-icon .icon, html[data-theme="light"] .round-btn b .icon, html[data-theme="light"] .primary-btn i .icon {
    stroke: url(#brand-icon-gradient)
}

html[data-theme="light"] .stage-story .step-label, html[data-theme="light"] .experience-copy b, html[data-theme="light"] .quote, html[data-theme="light"] .ui-line b, html[data-theme="light"] .service-copy li:before, html[data-theme="light"] .nav a:hover {
    background: var(--brand);
    background-clip: text;
    -webkit-background-clip: text;
    color: #ffffff;
    -webkit-text-fill-color: transparent;
}

html[data-theme="light"] .campaign-chart>svg>path:last-child {
    stroke: url(#brand-icon-gradient)
}

html[data-theme="light"] .glow-a {
    background: var(--brand)
}

@media(max-width: 767px) {
    .logo-group {
        gap:14px;
        padding-right: 14px
    }

    .partner-logo {
        width: 144px;
        height: 72px;
        padding: 12px 18px;
        border-radius: 12px
    }

    .partner-logo img {
        max-height: 48px
    }
}

@media(prefers-reduced-motion:reduce) {
    .logo-marquee {
        overflow-x: auto;
        mask-image: none
    }

    .logo-track {
        animation: none
    }

    .logo-group[aria-hidden="true"] {
        display: none
    }
}

.features .feature-grid {
    gap: 22px;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    align-items: stretch;
}

.features .feature-card {
    --card-tint: #effafb;
    --card-glow: #e3f6fa;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    border: 1px solid #d8e7ef;
    border-radius: 28px;
    background: radial-gradient(ellipse at 50% 0%,var(--card-glow),transparent 72%),linear-gradient(145deg,#fff 20%,#fcfdff 65%,var(--card-tint));
    box-shadow: inset 0 1px 0 #fff,0 2px 0 #e6eff4,0 14px 32px -22px #23557835;
    transition: box-shadow .3s,border-color .3s,translate .3s;
}

.features .feature-card:nth-child(2) {
    --card-tint: #f1f4ff;
    --card-glow: #e8eeff
}

.features .feature-card:nth-child(3) {
    --card-tint: #f0faf5;
    --card-glow: #e3f7ed
}

.feature-art {
    height: 148px;
    position: relative;
    display: grid;
    place-items: center;
    isolation: isolate;
    overflow: hidden;
    border-radius: 27px 27px 0 0;
    background: transparent;
    perspective: 600px;
}

.features .feature-card .f-icon {
    position: relative;
    width: 82px;
    height: 82px;
    margin: 0;
    border: 1px solid #fff;
    border-radius: 24px;
    background: linear-gradient(145deg,#ffffff55,transparent 48%),var(--brand);
    color: #fff;
    transform: none;
    box-shadow: 0 4px 0 #0c83ac28,0 12px 24px -10px #077ea95c,inset 0 1px 1px #ffffff90;
    transition: transform .35s;
}

.features .feature-card .f-icon .icon {
    width: 37px;
    height: 37px;
    stroke: #fff;
    filter: drop-shadow(0 1px 1px #064f7d30)
}

.feature-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0px 15px 15px;
}

.features .feature-card h3 {
    font-family: var(--font);
    font-size: 19px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: -.55px;
    margin: 0px 0 10px;
    max-width: 300px
}

.features .feature-card p {
    font-size: 13px;
    line-height: 23px;
    color: #5f7384;
    margin: 0px;
}

.feature-detail {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 17px;
    border-top: 0;
    font-size: 10px;
    font-weight: 600;
    color: #526f80;
    line-height: 1.6
}

.feature-detail>span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand);
    flex-shrink: 0
}

html[data-theme="dark"] .features .feature-card {
    --card-tint: #12323c;
    --card-glow: #154755;
    background: radial-gradient(ellipse at 50% 0%,var(--card-glow),transparent 80%),linear-gradient(145deg,#202d38,#192632 65%,var(--card-tint));
    border-color: #2c4351;
    box-shadow: inset 0 1px 0 #ffffff0b,0 3px 0 #0a131e,0 18px 32px -22px #000b
}

html[data-theme="dark"] .features .feature-card:nth-child(2) {
    --card-tint: #202b49;
    --card-glow: #253f70
}

html[data-theme="dark"] .features .feature-card:nth-child(3) {
    --card-tint: #163a33;
    --card-glow: #1c5247
}

html[data-theme="dark"] .features .feature-card .f-icon {
    background: linear-gradient(145deg,#ffffff30,transparent 48%),var(--brand);
    border-color: #ffffff50;
    box-shadow: 0 4px 0 #061b2940,0 12px 24px -10px #0008,inset 0 1px 1px #ffffff70
}

html[data-theme="dark"] .features .feature-card .f-icon .icon {
    filter: none
}

html[data-theme="dark"] .features .feature-card p {
    color: #a5b8c7
}

html[data-theme="dark"] .feature-art-label,html[data-theme="dark"] .feature-detail,html[data-theme="dark"] @media(hover: hover) and (prefers-reduced-motion:no-preference) {
    .features .feature-card:hover {
        translate:0 -6px;
        border-color: #91cfdc;
        box-shadow: inset 0 1px 0 #fff8,0 3px 0 #cee3eb,0 24px 36px -20px #23557850
    }

    .features .feature-card:hover .f-icon {
        transform: rotateX(0) rotateY(0) rotateZ(0) translateY(-4px)
    }

    html[data-theme="dark"] .features .feature-card:hover {
        box-shadow: inset 0 1px 0 #ffffff16,0 3px 0 #0a131e,0 24px 36px -20px #000b
    }
}

@media(min-width: 801px) and (max-width:1100px) {
    .features .feature-grid {
        gap:16px
    }

    .feature-body {
        padding: 10px 22px 24px
    }

    .features .feature-card h3 {
        font-size: 17px
    }

    .feature-detail {
        font-size: 9px
    }
}

@media(max-width: 800px) {
    .features .feature-grid {
        gap:24px
    }

    .feature-art {
        height: 140px
    }

    .feature-body {
        padding: 10px 26px 26px
    }

    .features .feature-card h3 {
        max-width: none;
        font-size: 19px
    }

    .features .feature-card p {
        margin-bottom: 20px
    }
}

.header {
    transition: top .25s ease,left .25s ease,right .25s ease,border-radius .25s ease,background .25s ease,box-shadow .25s ease
}

html .header.is-sticky {
    top: 0;
    left: 0;
    right: 0;
    border: 0;
    border-radius: 0;
    background: rgba(5,10,19,.98);
    box-shadow: 0 8px 24px #00000024
}

html[data-theme="light"] .header.is-sticky {
    border: 0;
    background: rgba(255,255,255,.98);
    box-shadow: 0 8px 24px #163c5710
}

.header .nav a {
    position: relative
}

.header .nav a:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 2px;
    border-radius: 2px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .2s ease
}

.header .nav a.is-active {
    color: var(--cyan)
}

.header .nav a.is-active:after {
    transform: scaleX(1)
}

html[data-theme="light"] .header .nav a.is-active {
    background: var(--brand);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent
}

@media(max-width: 1100px) {
    .header.is-sticky .nav.is-open {
        left:12px;
        right: 12px
    }

    .header .nav a:after {
        bottom: 3px
    }
}

@media(prefers-reduced-motion:reduce) {
    .header,.header .nav a:after {
        transition: none
    }
}

:root {
    --surface-soft: #edf5f9;
    --surface-raised: #fff;
    --copy: #5c7283;
    --outline: #dbe7ee;
    --ink: #10263a;
    --section-space: 88px
}

html[data-theme="dark"] {
    --surface-soft: #0e1721;
    --surface-raised: #15212d;
    --copy: #a0b2c2;
    --outline: #273b4b;
    --ink: #f1f7fb;
    --section-space: 80px
}

body {
    color: var(--text)
}

.section {
    padding: var(--section-space) 0
}

.display-heading {
    font-size: clamp(40px,4.7vw,48px);
    line-height: 1.12;
    letter-spacing: -.01em;
    margin: 20px 0
}

.section-heading {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    align-items: flex-end;
    margin-bottom: 40px
}

.section-heading h2 {
    margin-bottom: 0
}

.section-heading>p {
    max-width: 320px;
    font-size: 14px;
    line-height: 1.85;
    color: var(--copy);
    margin: 0 0 5px;
    font-weight: 500;
}

.mini-pill {
    border: 1px solid var(--outline);
    background: var(--surface-soft);
    color: var(--copy);
    font-size: 14px;
    line-height: 1.5
}

.skip-link {
    position: fixed;
    top: -100px;
    left: 20px;
    z-index: 10000;
    background: var(--panel);
    color: var(--text);
    padding: 12px 20px;
    border-radius: 10px
}

.skip-link:focus {
    top: 10px
}

.hero {
    min-height: auto
}

.hero-grid {
    min-height: 625px
}

.hero-visual {
    height: 590px
}

.hero-title {
    font-size: clamp(58px,6.1vw,80px)
}

.hero-text {
    max-width: 515px;
    font-size: 14px;
    line-height: 1.85
}

.hero-phone .phone-screen strong {
    font-size: 64px
}

.hero-phone .app-head {
    margin-bottom: 25px
}

.preview-label {
    font-size: 8px;
    color: #849aaa;
    margin-top: 6px;
    letter-spacing: .04em
}

.review-main small {
    font-size: 9px
}

.review-main>b {
    color: #fff
}

.glass-card {
    background: linear-gradient(115deg,#0755e8eb,#079cace8);
    color: #fff
}

.review-arrow {
    color: #fff
}

.brand-strip {
    padding: 23px 0 28px
}

.brand-strip>span {
    color: var(--copy);
    font-size: 9px
}

.partner-logo {
    height: 74px;
    width: 166px;
    border-radius: 12px
}

.partner-logo img {
    max-height: 50px;
    border-radius: 10px;
}

.features .feature-grid {
    margin-top: 38px
}

.features .feature-card h3 {
    font-size: 18px
}

.feature-art {
    height: 118px;
}

.feature-body {
}

.feature-note {
    margin-top: 25px
}

.capability {
    padding-bottom: 68px
}

.phone-stage {
    height: 635px
}

.stage-phone {
    height: 565px;
    width: 300px
}

.stage-story {
    width: 250px
}

.stage-story h3 {
    font-size: 22px;
}

.stage-orbit {
    width: 550px;
    height: 550px
}

.stage-intro {
    font-size: 14px!important
}

.experience-strip {
    gap: 26px;
    border-radius: 22px
}

.experience-item strong {
    font-size: 28px;
}

.experience-copy span {
    font-size: 23px
}

.experience-item span {
    font-size: 16px;
    font-weight: 500;
}

.header-inner {
    max-width: 1340px
}

.header .nav a {
    font-size: 14px !important;
    text-transform: uppercase;
    font-weight: 600;
}

.header .round-btn {
    background: var(--brand)
}

.primary-btn {
    min-height: 39px;
    gap: 18px;
    padding: 8px 20px 8px 20px;
    font-size: 12px;
    line-height: 1.4
}

.primary-btn>.icon {
    width: 22px;
    height: 22px
}

.primary-btn i {
    width: 30px;
    height: 30px;
}

.text-link .icon {
    width: 22px;
    height: 22px;
    margin-left: 6px
}

.services-section {
    padding-top: var(--section-space)
}

.service-heading {
    margin-bottom: 44px
}

.service-panel {
    position: relative;
    isolation: isolate;
    background: #f2f8fb;
    border-top: 1px solid #d9e7ee;
    overflow: hidden
}

.service-panel-2 {
    background: #edf3ff
}

.service-panel-3 {
    background: #edf8f3
}

.service-panel:before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse at 78% 45%,#11d4d115,transparent 58%);
    pointer-events: none
}

.service-panel-inner {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 65px;
    align-items: center;
    min-height: min(730px,calc(100svh - 88px));
    padding-block:54px }

.service-eyebrow {
    display: flex;
    gap: 12px;
    align-items: center;
    color: var(--copy);
    font-size: 11px;
    font-weight: 600
}

.service-eyebrow .icon {
    width: 20px;
    height: 20px;
    stroke: url(#brand-icon-gradient)
}

.service-index {
    font-family: var(--display);
    font-size: 100px;
    line-height: 1.1;
    display: block;
    margin: 13px 0 3px;
    color: #1d70921a;
    letter-spacing: -.04em
}

.service-panel-copy h3 {
    font-family: var(--display);
    font-size: clamp(44px,4.6vw,64px);
    text-transform: uppercase;
    font-weight: 400;
    line-height: 1.08;
    margin: 0 0 23px;
    color: var(--ink)
}

.service-description {
}

.service-description p {
    color: var(--copy);
    font-size: 13px;
    line-height: 1.85;
    margin: 0 0 18px
}

.service-description ul {
    list-style: none;
    padding: 0;
    margin: 0 0 23px;
    display: grid;
    gap: 9px
}

.service-description li {
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--ink)
}

.service-description li .icon {
    width: 15px;
    height: 15px;
    color: #079c80
}

.service-description .primary-btn {
    background: var(--brand);
    color: #fff;
    text-shadow: 0 1px 3px #06447670
}

.service-visual {
    position: relative;
    width: 100%;
    max-width: 590px;
    margin-inline:auto; text-align: center
}

.service-visual>img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 25px 40px #143e4f08)
}

.service-status {
    position: absolute;
    top: 7%;
    right: 6%;
    z-index: 2;
    border: 1px solid var(--outline);
    background: var(--surface-raised);
    box-shadow: 0 8px 25px #143b5710;
    border-radius: 30px;
    padding: 9px 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--ink)
}

.service-status i {
    width: 6px;
    height: 6px;
    background: #0bb587;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #0bb58712
}

.service-caption {
    font-size: 12px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--copy)
}

html[data-theme="dark"] .service-panel {
    background: #101922;
    border-color: #233442
}

html[data-theme="dark"] .service-panel-2 {
    background: #141f30
}

html[data-theme="dark"] .service-panel-3 {
    background: #11241f
}

html[data-theme="dark"] .service-index {
    color: #abd6ed16
}

.benefits-section {
    background: var(--bg)
}

.benefits-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr 1fr;
    grid-template-rows: 315px 315px;
    gap: 20px
}

.benefit-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--outline);
    border-radius: 27px;
    background: linear-gradient(150deg,#fff,#f0f7fb);
    box-shadow: inset 0 1px 0 #fff8;
    transition: border-color .3s
}

.benefit-models {
    grid-column: 1;
    grid-row: 1
}

.benefit-reporting {
    grid-column: 1;
    grid-row: 2
}

.benefit-main {
    grid-column: 2;
    grid-row: 1/span 2;
    background: radial-gradient(ellipse at 80% 15%,#98ead655,transparent 65%),linear-gradient(140deg,#e9f5ff,#dceff7 65%,#e4f8f0)
}

.benefit-reach {
    grid-column: 3;
    grid-row: 1
}

.benefit-targeting {
    grid-column: 3;
    grid-row: 2
}

.benefit-copy {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 29px 20px 0
}

.benefit-copy>span {
    font-size: 12px;
    font-weight: 700;
    color: var(--copy);
    letter-spacing: .13em
}

.benefit-copy h3 {
    font-family: var(--display);
    text-transform: uppercase;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: .01em;
    color: var(--ink);
    margin: 10px 0
}

.benefit-copy p {
    color: var(--copy);
    font-size: 10px;
    line-height: 1.65;
    margin: 0
}

.benefit-card>img {
    position: absolute;
    bottom: -28px;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 1;
    transition: transform .6s
}

.benefit-main .benefit-copy {
    padding-top: 38px
}

.benefit-main h3 {
    font-size: 39px;
    line-height: 1.1
}

.benefit-main .benefit-copy p {
    font-size: 11px
}

.benefit-main>img {
    bottom: 7px
}

.benefit-footnote {
    position: absolute;
    bottom: 23px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 3;
    font-size: 12px;
    letter-spacing: .18em;
    color: var(--copy);
    font-weight: 700;
}

html[data-theme="dark"] .benefit-card {
    background: linear-gradient(140deg,#17242e,#101923);
    box-shadow: inset 0 1px 0 #ffffff08
}

html[data-theme="dark"] .benefit-main {
    background: radial-gradient(ellipse at 85% 5%,#0b65765c,transparent 60%),linear-gradient(150deg,#112d3b,#131d2b 65%,#16372c)
}

@media(hover: hover) and (prefers-reduced-motion:no-preference) {
    .benefit-card:hover>img {
        transform:translateY(-6px) scale(1.025)
    }

    .benefit-card:hover {
        border-color: #20afc18c
    }
}

.proof {
    background: var(--surface-soft)
}

.proof-panels {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 38px;
    gap: 20px
}

.proof-panel {
    background: var(--panel);
    border: 1px solid var(--outline);
    padding: 26px;
    border-radius: 24px
}

.proof-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px
}

.proof-panel-head>span {
    font-size: 12px;
    font-weight: 700;
    color: var(--ink)
}

.proof-panel-head>b {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .14em;
    color: var(--copy)
}

.proof-logo-grid {
    display: grid;
    grid-template-columns: repeat(8,1fr);
    gap: 10px
}

.proof-logo {
    height: 76px;
    border: 1px solid #e5edf3;
    border-radius: 12px;
    background: #fff;
    display: grid;
    place-items: center;
    padding: 16px;
    overflow: hidden
}

.proof-logo img {
    width: 100%;
    height: 100%;
    max-height: 42px;
    object-fit: contain
}

.mmp-grid {
    grid-template-columns: repeat(9,1fr)
}

.proof-wordmark>span {
    font: 800 20px Arial;
    color: #fd563a;
    line-height: .8
}

.proof-wordmark>span>span {
    display: block;
    font-size: 12px;
    margin-top: 5px
}

.partnership-layout {
    display: grid;
    grid-template-columns: .86fr 1.14fr;
    gap: 80px;
    align-items: center
}

.partnership-heading>p {
    font-size: 14px;
    line-height: 1.8;
    color: var(--copy);
    margin-bottom: 24px
}

.partnership-heading .text-link {
    font-size: 12px
}

.slider-controls {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 35px
}

.slider-arrow,.slider-pause {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--outline);
    background: var(--panel);
    color: var(--ink);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .2s,box-shadow .2s
}

.slider-arrow:hover {
    background: var(--surface-soft);
    box-shadow: 0 3px 15px #0559a310
}

.slider-arrow .icon {
    width: 20px;
    height: 20px
}

.slider-pause {
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent
}

.slider-pause .icon {
    width: 16px;
    height: 16px
}

.slide-counter {
    font-size: 16px;
    color: var(--copy);
    letter-spacing: .1em
}

.slide-counter b {
    color: var(--ink)
}

.promise-slider {
    min-width: 0;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid var(--outline);
    background: radial-gradient(ellipse at 100% 0%,#10dbc414,transparent 65%),var(--surface-raised);
    box-shadow: 0 15px 40px -30px #17487055;
    position: relative
}

.promise-track {
    display: flex;
    transition: transform .6s cubic-bezier(.22,1,.36,1);
    will-change: transform
}

.promise-slide {
    flex: 0 0 100%;
    min-width: 0;
    padding: 36px 36px 58px;
    box-sizing: border-box
}

.promise-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 29px
}

.promise-top>span:last-child {
    font-size: 12px;
    letter-spacing: .14em;
    color: var(--copy);
    font-weight: 600;
}

.promise-symbol {
    display: grid;
    place-items: center;
    width: 49px;
    height: 49px;
    background: var(--brand);
    color: #fff;
    border-radius: 15px;
    box-shadow: 0 7px 14px #0b75b023
}

.promise-symbol .icon {
    width: 23px;
    height: 23px
}

.promise-slide h3 {
    font-family: var(--font);
    font-size: 28px;
    line-height: 1.35;
    letter-spacing: -.9px;
    margin: 0 0 17px;
    font-weight: bold;
    color: var(--ink)
}

.promise-slide>p {
    font-size: 14px;
    line-height: 1.9;
    color: var(--copy);
    margin: 0;
}

.promise-chips {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin: 24px 0
}

.promise-chips span {
    font-size: 14px;
    border: 1px solid var(--outline);
    border-radius: 30px;
    color: var(--copy);
    font-weight: 600;
}

.promise-author {
    border-top: 1px solid var(--outline);
    padding-top: 21px;
    display: flex;
    gap: 12px;
    align-items: center
}

.promise-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--surface-soft);
    color: var(--copy);
    display: grid;
    place-items: center;
    font-size: 16px;
    font-weight: 700
}

.promise-author b {
    display: block;
    font-size: 11px;
    color: var(--ink)
}

.promise-author small {
    display: block;
    font-size: 8px;
    color: var(--copy);
    margin-top: 4px
}

.promise-author>img {
    width: 55px;
    height: auto;
    margin-left: auto
}

.slider-dots {
    position: absolute;
    bottom: 22px;
    left: 0;
    right: 0;
    display: flex;
    gap: 7px;
    justify-content: center
}

.slider-dots button {
    width: 24px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: 0;
    display: grid;
    place-items: center;
    cursor: pointer
}

.slider-dots button:after {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 20px;
    background: var(--outline);
    transition: width .25s
}

.slider-dots button[aria-current]:after {
    width: 21px;
    background: var(--brand)
}

.faq {
    background: var(--surface-soft)
}

.faq-grid {
    gap: 70px
}

.faq-item {
    font-size: 20px !important;
    padding: 16px 0;
    line-height: 1.6;
    gap: 20px
}

.faq-item b {
    line-height: 1.1;
    transition: transform .2s
}

.faq-answer {
    font-size: 13px;
    line-height: 1.85
}

.download-cta {
    padding: 72px 0
}

.download-grid {
    gap: 40px
}

.download-grid p {
    font-size: 14px
}

.cta-phone-wrap {
    height: 425px;
    margin-top: 50px;
}

.cta-phone {
    height: 446px;
    width: 225px;
    border-radius: 44px
}

.cta-phone .phone-screen {
    border-radius: 30px;
    padding: 50px 18px 24px
}

.cta-phone .phone-screen img {
    margin: auto auto 26px
}

.cta-mark {
    width: 330px
}

.footer-grid {
    padding: 58px 0;
    gap: 32px;
    grid-template-columns: 1.15fr .7fr 1.15fr 1.15fr
}

.footer-col h4 {
    font: 700 12px var(--font);
    letter-spacing: .06em;
    margin-bottom: 22px
}

.footer-brand>p,.footer-col>p {
    font-size: 12px
}

.footer-col>a {
    font-size: 12px;
    overflow-wrap: anywhere
}

.footer-deck {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 11px;
    margin-top: 28px;
    color: #e2f4ff
}

.footer-deck .icon {
    width: 16px;
    height: 16px
}

.footer-col>a:hover {
    color: red;
    font-weight: 800;
    background: var(--brand);
    background-clip: text;
    -webkit-background-clip: text;
    color: #ffffff;
    -webkit-text-fill-color: #00000000;
}

a.footer-contact-btn:hover {
    background: var(--brand);
    background-clip: text;
    -webkit-background-clip: text;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

.footer-col .footer-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 11px 15px;
    border: 1px solid #345465;
    border-radius: 30px;
    color: #e2f4ff;
    font-size: 11px
}

.footer-contact-btn .icon {
    width: 16px;
    height: 16px
}

.footer-availability {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #ffffff;
    margin-top: 14px;
}

.footer-availability i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #20d79e
}

.footer-bottom .container {
    font-size: 14px;
    color: #fff;
}

.to-top {
    width: 38px;
    height: 38px;
    font-size: 20px;
    bottom: 17px
}

@media(min-width: 1001px) and (min-height:701px) {
    .service-panel {
        position:sticky;
        top: 88px
    }

    .service-panel-inner {
        min-height: calc(100svh - 88px);
        max-height: 820px
    }

    .service-stack {
        isolation: isolate
    }

    .service-panel-1 {
        z-index: 1
    }

    .service-panel-2 {
        z-index: 2
    }

    .service-panel-3 {
        z-index: 3
    }
}

@media(max-width: 1100px) {
    .stage-story {
        width:195px
    }

    .stage-story h3 {
        font-size: 22px
    }

    .service-panel-inner {
        gap: 28px;
        padding-block:44px; min-height: 610px
    }

    .service-index {
        font-size: 82px
    }

    .service-panel-copy h3 {
        font-size: 49px
    }

    .service-visual {
        max-width: 480px
    }

    .benefits-grid {
        grid-template-rows: 285px 285px;
        gap: 15px
    }

    .benefit-copy h3 {
        font-size: 24px
    }

    .benefit-main h3 {
        font-size: 33px
    }

    .benefit-copy {
        padding: 25px 15px 0
    }

    .proof-logo-grid {
        grid-template-columns: repeat(4,1fr)
    }

    .mmp-grid {
        grid-template-columns: repeat(5,1fr)
    }

    .partnership-layout {
        gap: 40px
    }

    .promise-slide {
        padding: 28px 28px 52px
    }

    .promise-slide h3 {
        font-size: 24px
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 36px
    }
}

@media(max-width: 800px) {
    :root,html[data-theme="dark"] {
        --section-space:66px
    }

    .container {
        width: calc(100% - 40px)
    }

    .hero-grid {
        padding-top: 32px;
        min-height: auto
    }

    .hero-title {
        font-size: clamp(50px,8.5vw,68px)
    }

    .hero-visual {
        height: 570px
    }

    .hero-phone {
        height: 520px;
        width: 260px
    }

    .hero-text {
        max-width: 570px
    }

    .section-heading {
        gap: 22px;
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 30px
    }

    .section-heading>p {
        max-width: 480px;
        font-size: 13px
    }

    .service-panel-inner {
        grid-template-columns: 1fr;
        gap: 12px;
        padding-block:40px; min-height: 0
    }

    .service-panel-copy {
        max-width: 560px
    }

    .service-index {
        font-size: 67px;
        margin: 12px 0 0
    }

    .service-panel-copy h3 {
        font-size: 46px
    }

    .service-description {
        max-width: 530px
    }

    .service-visual {
        max-width: 470px;
        margin-top: 5px
    }

    .service-status {
        font-size: 8px
    }

    .service-caption {
        font-size: 8px
    }

    .benefits-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 310px 500px 310px;
        gap: 16px
    }

    .benefit-models {
        grid-column: 1;
        grid-row: 1
    }

    .benefit-reporting {
        grid-column: 2;
        grid-row: 1
    }

    .benefit-main {
        grid-column: 1/span 2;
        grid-row: 2
    }

    .benefit-main>img {
        width: 400px;
        left: auto;
        right: 10px;
        bottom: -15px
    }

    .benefit-main .benefit-copy {
        width: 48%;
        padding-top: 105px
    }

    .benefit-main .benefit-footnote {
        text-align: left;
        left: 30px
    }

    .benefit-main h3 {
        font-size: 36px
    }

    .benefit-reach {
        grid-column: 1;
        grid-row: 3
    }

    .benefit-targeting {
        grid-column: 2;
        grid-row: 3
    }

    .partnership-layout {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .partnership-heading>p br {
        display: none
    }

    .partnership-heading .display-heading {
        font-size: 48px
    }

    .slider-controls {
        margin-top: 24px
    }

    .promise-slide>p {
        min-height: 60px
    }

    .faq-grid {
        grid-template-columns: 1fr;
        gap: 25px
    }

    .download-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px
    }

    .download-grid .display-heading {
        font-size: 44px
    }

    .cta-phone {
        width: 210px
    }

    .cta-mark {
        width: 280px
    }

    .cta-phone-wrap {
        height: 440px
    }
}

@media(max-width: 767px) {
    .display-heading {
        font-size:clamp(36px,8.2vw,49px)
    }

    .hero-title {
        font-size: clamp(43px,10.5vw,65px)
    }

    .header-inner {
        width: calc(100% - 28px)
    }

    .hero-grid {
        padding-top: 28px
    }

    .hero-visual {
        height: 535px
    }

    .hero-phone {
        height: 485px;
        width: 248px
    }

    .hero-phone .phone-screen strong {
        font-size: 57px
    }

    .hero-phone .phone-screen {
        padding-top: 54px
    }

    .hero-phone .app-head {
        margin-bottom: 20px
    }

    .hero-phone .metric-grid {
        gap: 8px
    }

    .hero-phone .metric-grid div {
        padding: 10px
    }

    .hero-phone .metric-grid small {
        font-size: 9px
    }

    .glass-card {
        bottom: 7%;
        width: 205px;
        padding: 15px 18px
    }

    .review-main>b {
        font-size: 39px
    }

    .review-main {
        gap: 12px
    }

    .review-main span {
        font-size: 11px
    }

    .p2 {
        bottom: 27%
    }

    .p3 {
        bottom: 46%
    }

    .primary-btn {
        font-size: 11px
    }

    .hero-actions {
        gap: 16px
    }

    .hero-actions .text-link {
        font-size: 11px
    }

    .brand-strip>span {
        font-size: 8px;
        letter-spacing: .13em
    }

    .partner-logo {
        width: 140px;
        height: 65px
    }

    .partner-logo img {
        max-height: 40px
    }

    .feature-art {
        height: 126px
    }

    .features .feature-card h3 {
        font-size: 18px
    }

    .features .feature-card p {
        font-size: 12px
    }

    .feature-body {
        padding: 0 25px 25px
    }

    .feature-detail {
        padding-top: 10px
    }

    .feature-note {
        font-size: 12px;
        gap: 8px
    }

    .phone-stage {
        height: auto;
        padding-top: 28px;
        gap: 20px
    }

    .stage-phone {
        height: 540px;
        width: 274px
    }

    .stage-story {
        width: 100%;
        max-width: none;
        padding: 21px
    }

    .stage-story h3 {
        font-size: 20px;
    }

    .stage-story p {
        font-size: 12px
    }

    .stage-orbit {
        width: 400px;
        height: 400px;
        max-width: 110%;
        top: 70px
    }

    .experience-strip {
        gap: 16px;
        padding: 22px
    }

    .experience-copy span {
        font-size: 20px
    }

    .experience-item strong {
        font-size: 28px
    }

    .capability {
        padding-bottom: 56px
    }

    .service-heading {
        margin-bottom: 30px
    }

    .service-panel-copy h3 {
        font-size: 43px
    }

    .service-index {
        font-size: 58px
    }

    .service-eyebrow {
        font-size: 10px;
        gap: 8px
    }

    .service-description {
        padding-left: 0px;
    }

    .service-description p {
        font-size: 12px
    }

    .service-description ul {
        gap: 8px
    }

    .service-description li {
        font-size: 10px
    }

    .service-panel-inner {
        padding-block:34px; gap: 5px
    }

    .service-visual>img {
        margin-block:-5px }

    .service-status {
        top: 6%;
        right: 2%;
        padding: 7px 10px
    }

    .service-caption {
        font-size: 7px
    }

    .benefits-grid {
        gap: 16px;
        grid-template-columns: 1fr;
        grid-template-rows: none
    }

    .benefit-card {
        grid-column: auto;
        grid-row: auto;
        height: 338px;
        border-radius: 24px
    }

    .benefit-copy h3 {
        font-size: 28px
    }

    .benefit-copy p {
        font-size: 11px
    }

    .benefit-card>img {
        max-width: 420px;
        left: 50%;
        transform: translateX(-50%);
        bottom: -32px
    }

    .benefit-main {
        height: 600px;
        order: 0
    }

    .benefit-main .benefit-copy {
        width: 100%;
        padding: 30px 15px 0
    }

    .benefit-main .benefit-copy h3 {
        font-size: 37px
    }

    .benefit-main>img {
        width: 100%;
        max-width: 410px;
        right: auto;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%)
    }

    .benefit-main .benefit-footnote {
        text-align: center;
        left: 0;
        bottom: 20px
    }

    .proof-panel {
        padding: 18px
    }

    .proof-panel-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px
    }

    .proof-logo-grid,.mmp-grid {
        grid-template-columns: repeat(3,1fr);
        gap: 8px
    }

    .proof-logo {
        height: 65px;
        padding: 10px;
        border-radius: 9px
    }

    .proof-logo img {
        max-height: 35px
    }

    .proof-wordmark>span {
        font-size: 17px
    }

    .proof-wordmark>span>span {
        font-size: 10px
    }

    .partnership-heading .display-heading {
        font-size: 43px
    }

    .promise-slide {
        padding: 26px 23px 52px
    }

    .promise-slide h3 {
        font-size: 24px
    }

    .promise-slide>p {
        font-size: 12px;
        min-height: 72px
    }

    .promise-top {
        margin-bottom: 22px
    }

    .promise-author>img {
        width: 42px
    }

    .promise-author small {
        font-size: 7px
    }

    .promise-chips {
        margin: 20px 0
    }

    .slider-controls {
        gap: 15px
    }

    .faq-grid {
        gap: 24px
    }

    .faq-item {
        font-size: 12px;
        padding: 18px 0
    }

    .faq-answer {
        font-size: 12px
    }

    .download-grid {
        grid-template-columns: 1fr;
        gap: 25px
    }

    .download-cta {
        padding: 56px 0 28px
    }

    .download-grid .display-heading {
        font-size: 46px
    }

    .download-grid p {
        font-size: 13px
    }

    .cta-phone-wrap {
        height: 425px
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 29px;
        padding: 46px 0
    }

    .footer-brand {
        max-width: 350px
    }

    .footer-col h4 {
        margin-bottom: 17px
    }

    .footer-bottom .container {
        gap: 6px;
        padding-block:20px; padding-right: 40px
    }

    .to-top {
        right: 16px;
        bottom: 20px
    }

    .header.is-sticky .nav.is-open {
        max-height: calc(100svh - 0px);
        overflow-y: auto
    }
}

@media(max-width: 370px) {
    .header .logo img {
        width:65px
    }

    .header .header-actions {
        gap: 5px
    }

    .hero-title {
        font-size: 42px
    }

    .hero .kicker {
        font-size: 7px
    }

    .benefit-main {
        height: 555px
    }

    .promise-author {
        gap: 8px
    }

    .promise-author b {
        font-size: 10px
    }

    .proof-logo-grid,.mmp-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(prefers-reduced-motion:reduce) {
    .service-panel {
        position: relative;
        top: auto
    }

    .promise-track,.benefit-card>img,.slider-dots button:after {
        transition: none
    }

    .service-panel-inner {
        min-height: 0;
        max-height: none
    }
}

.benefit-card:not(.benefit-main)>img {
    top: 151px;
    bottom: auto;
    height: calc(100% - 141px);
    width: 100%;
    object-fit: cover;
    object-position: center 64%
}

.benefit-main>img {
    top: 172px;
    bottom: auto;
    height: calc(100% - 192px);
    object-fit: cover;
    object-position: center bottom
}

@media(min-width: 1001px) and (min-height:701px) {
    .service-panel-inner {
        min-height:min(740px,calc(100svh - 88px));
        max-height: none
    }
}

@media(max-width: 800px) and (min-width:701px) {
    .benefit-main>img {
        top:0;
        bottom: 0;
        height: 100%;
        width: 400px;
        object-fit: contain;
        object-position: center bottom
    }
}

@media(max-width: 767px) {
    .benefit-card:not(.benefit-main)>img {
        top:153px;
        height: calc(100% - 153px);
        max-width: none
    }

    .benefit-main>img {
        top: 165px;
        height: calc(100% - 188px);
        max-width: none;
        object-fit: cover;
        object-position: center bottom
    }
}

.benefit-main>img {
    top: 210px;
    height: calc(100% - 230px)
}

.feature-detail {
    font-size: 11px
}

@media(max-width: 1100px) and (min-width:801px) {
    .feature-detail {
        font-size:10px
    }
}

@media(max-width: 800px) and (min-width:701px) {
    .benefit-main>img {
        top:0;
        height: 100%
    }
}

@media(max-width: 767px) {
    .benefit-main>img {
        top:190px;
        height: calc(100% - 213px)
    }

    .feature-detail {
        font-size: 10px
    }
}

.stage-phone .phone-screen {
    padding: 48px 20px 17px
}

.stage-phone .light-ui h3 {
    font-size: 29px;
    line-height: 1.12;
    margin: 14px 0
}

.stage-phone .ui-line {
    padding: 9px 0;
    font-size: 11px
}

.stage-phone .campaign-chart {
    margin: 9px 0
}

.stage-phone .campaign-chart>svg {
    height: 43px;
    margin-top: 7px
}

.stage-phone .ui-price {
    padding: 11px 15px;
    margin-top: auto
}

.stage-phone .ui-price strong {
    font-size: 23px;
    margin: 5px 0 0
}

.stage-phone .phone-screen>small {
    font-size: 9px
}

.benefit-main>img {
    object-fit: contain;
    object-position: center center
}

.faq {
    background: var(--bg);
    border-top: 0px solid var(--outline);
    padding-bottom: 56px
}

html .download-cta {
    width: min(1320px,calc(100% - 48px));
    margin: 24px auto 56px;
    padding: 54px 0;
    border: 1px solid #244656;
    border-radius: 30px;
    background: radial-gradient(ellipse at 88% 35%,#086b7038,transparent 62%),linear-gradient(120deg,#101d2c,#102a30);
    color: #f7fbff;
    isolation: isolate;
}

.download-cta .download-grid {
    width: calc(100% - 88px)
}

html[data-theme="light"] .download-cta {
    background: radial-gradient(ellipse at 90% 20%,#c8f4e7,transparent 65%),linear-gradient(115deg,#edf4ff,#e7f5fa);
    border-color: #d1e4ee;
    color: #10263a;
}

@media(max-width: 800px) {
    .download-cta .download-grid {
        width:calc(100% - 48px)
    }
}

@media(max-width: 767px) {
    .faq {
        padding-bottom:36px
    }

    html .download-cta {
        width: calc(100% - 28px);
        margin: 20px auto 36px;
        padding: 34px 0 16px;
        border-radius: 24px
    }

    .download-cta .download-grid {
        width: calc(100% - 40px)
    }

    .download-cta .display-heading {
        font-size: clamp(36px,10vw,46px)
    }
}

.header:not(.is-sticky) {
    width: calc(100% - 32px);
    max-width: 1366px;
    left: 0;
    right: 0;
    margin-inline:auto }

.header .header-inner {
    width: calc(100% - 72px);
    max-width: 1366px;
}

.campaigns-section {
    background: var(--bg)
}

.campaigns-browser {
    position: relative;
    margin-top: 38px;
    padding-right: 32px
}

.campaigns-viewport {
    height: 271px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    border: 1px solid #dce2e7;
    border-radius: 9px;
    background: #fff;
    outline-offset: 5px
}

.campaigns-viewport::-webkit-scrollbar {
    display: none
}

.campaigns-logo-grid {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    background: #fff
}

.campaigns-logo-grid .proof-logo {
    height: 136px;
    border: 0;
    border-radius: 0;
    border-right: 1px solid #e0e3e7;
    border-bottom: 1px solid #e0e3e7;
    background: #fff;
    padding: 30px;
    overflow: hidden
}

.campaigns-logo-grid .proof-logo:nth-child(5n) {
    border-right: 0
}

.campaigns-logo-grid .proof-logo img {
    width: 100%;
    height: auto;
    max-width: 150px;
    max-height: 37px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .8;
    transition: filter .25s,opacity .25s,transform .25s
}

.campaigns-logo-grid .proof-logo:hover img {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.04)
}

.campaigns-scroll-control {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 112px;
    display: grid;
    place-items: center
}

.campaigns-scroll-control input {
    appearance: none;
    -webkit-appearance: none;
    writing-mode: vertical-lr;
    direction: ltr;
    width: 20px;
    height: 112px;
    margin: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    border: 0;
    border-radius: 6px;
    touch-action: none
}

.campaigns-scroll-control input::-webkit-slider-runnable-track {
    width: 4px;
    height: 112px;
    border-radius: 5px;
    background: var(--outline)
}

.campaigns-scroll-control input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 4px;
    height: 38px;
    border-radius: 5px;
    background: var(--ink);
    border: 0
}

.campaigns-scroll-control input::-moz-range-track {
    width: 4px;
    border-radius: 5px;
    background: var(--outline)
}

.campaigns-scroll-control input::-moz-range-thumb {
    width: 4px;
    height: 38px;
    border: 0;
    border-radius: 5px;
    background: var(--ink)
}

.campaign-scroll-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 16px;
    padding-right: 32px;
    color: var(--copy);
    font-size: 9px
}

.campaign-scroll-caption>span:first-child {
    font-size: 8px;
    letter-spacing: .14em
}

.campaign-scroll-caption>span:last-child {
    display: flex;
    align-items: center;
    gap: 8px
}

.campaign-scroll-caption .icon {
    width: 15px;
    height: 19px
}

.measurement-section {
    background: var(--surface-soft);
    border-block:1px solid var(--outline) }

.measurement-layout {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 70px;
    align-items: center
}

.measurement-heading p {
    font-size: 13px;
    line-height: 1.85;
    color: var(--copy);
    max-width: 310px;
    margin: 0
}

.measurement-logos {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px
}

.measurement-logos .proof-logo {
    padding: 5px;
    border-radius: 13px
}

.measurement-logos .proof-logo img {
    max-height: 42px;
    max-width: 135px;
}

html[data-theme="dark"] .campaigns-viewport {
    border-color: #344655
}

@media(max-width: 1000px) {
    .campaigns-logo-grid {
        grid-template-columns:repeat(4,minmax(0,1fr))
    }

    .campaigns-logo-grid .proof-logo:nth-child(5n) {
        border-right: 1px solid #e0e3e7
    }

    .campaigns-logo-grid .proof-logo:nth-child(4n) {
        border-right: 0
    }

    .campaigns-logo-grid .proof-logo {
        height: 145px;
        padding: 24px
    }

    .campaigns-viewport {
        height: 292px
    }

    .measurement-layout {
        gap: 35px
    }

    .measurement-logos .proof-logo {
        height: 85px;
        padding: 15px
    }
}

@media(max-width: 767px) {
    .header:not(.is-sticky) {
        width:calc(100% - 20px)
    }

    .header .header-inner {
        width: calc(100% - 28px)
    }

    .campaigns-browser {
        padding-right: 23px;
        margin-top: 28px
    }

    .campaigns-viewport {
        height: 254px
    }

    .campaigns-logo-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        column-gap: 1px
    }

    .campaigns-logo-grid .proof-logo {
        height: 126px;
        padding: 22px;
        box-shadow: 1px 0 0 #e0e3e7
    }

    /* Follow the visual columns even when a logo is reordered with CSS. */
    .campaigns-logo-grid .proof-logo:nth-child(n) {
        border-right: 0
    }

    .campaigns-logo-grid .proof-logo img {
        max-height: 52px
    }

    .campaigns-scroll-control {
        width: 17px;
        height: 90px
    }

    .campaigns-scroll-control input,.campaigns-scroll-control input::-webkit-slider-runnable-track {
        height: 90px
    }

    .campaign-scroll-caption {
        padding-right: 23px;
        font-size: 8px;
        gap: 10px
    }

    .campaign-scroll-caption>span:first-child {
        font-size: 7px;
        letter-spacing: .06em
    }

    .measurement-layout {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .measurement-heading h2 br {
        display: none
    }

    .measurement-heading p {
        max-width: none
    }

    .measurement-logos {
        gap: 8px
    }

    .measurement-logos .proof-logo {
        height: 76px;
        padding: 11px;
        border-radius: 10px
    }

    .measurement-logos .proof-logo img {
        max-height: 37px
    }
}

@media(prefers-reduced-motion:reduce) {
    .campaigns-logo-grid .proof-logo img {
        transition: none
    }
}

body {
    font-size: 16px
}

body :is(p,a,button,input,small,label,li,em) {
    font-size: 14px!important;
    font-weight: 300;
    margin: 0px;
}

.experience-copy>span {
    font-size: 30px!important;
}

.footer-col h4 {
    font-size: 16px
}

.feature-detail,.service-eyebrow,.chart-label,.ui-line b,.chart-label b,.proof-panel-head>b,.promise-author b,.metric-grid b,.step-label,.kicker,.f-icon,.brand-strip>span {
    font-size: 14px!important;
    font-weight: 600;
}

.feature-detail {
    flex-wrap: wrap;
    gap: 8px;
    line-height: 1.6
}

.hero .kicker {
    line-height: 1.65;
    letter-spacing: .06em
}

.dot {
    flex-shrink: 0
}

.hero .hero-text {
    line-height: 1.8
}

.header .nav {
    gap: 36px;
}

.header .header-actions {
    gap: 16px
}

.header .round-btn {
    height: 42px;
    padding-left: 18px;
    gap: 12px
}

.header .round-btn b {
    width: 34px;
    height: 34px
}

.header .theme-toggle,.header .menu-toggle {
    height: 42px;
}

.hero-phone {
    height: 610px;
    width: 310px
}

.hero-visual {
    height: 665px
}

.hero-phone .metric-grid div {
    padding: 11px
}

.hero-phone .app-head {
    margin-bottom: 28px
}

.glass-card {
    width: 280px;
    padding: 17px 20px
}

.review-main {
    gap: 15px
}

.review-main small {
    line-height: 1.5
}

.review-main span {
    line-height: 1.2;
}

.float-pill {
    letter-spacing: .04em
}

.glass-card .review-main>b {
    font-size: 44px
}

.phone-stage {
    height: 705px
}

.stage-phone {
    width: 330px;
    height: 645px
}

.stage-phone .phone-screen {
    padding: 53px 22px 20px
}

.stage-phone .light-ui h3 {
    font-size: 26px;
}

.stage-phone .ui-line {
    gap: 10px
}

.stage-phone .ui-line b {
    font-size: 16px
}

.chart-label {
    gap: 8px;
    line-height: 1.4
}

.stage-phone .campaign-chart>svg {
    height: 45px
}

.ui-price small {
    letter-spacing: .02em
}

.stage-story {
    width: 434px;
}

.stage-tag {
    display: none
}

.stage-story p {
    line-height: 1.75
}

.story-chips {
    gap: 8px
}

.service-panel-inner {
    padding-block: 30px; }

.service-index {
    font-size: 78px
}

.service-description {
    max-width: 510px
}

.service-description p {
    line-height: 1.75
}

.service-description li {
    line-height: 1.5
}

.service-description li .icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0
}

.service-caption {
    letter-spacing: .02em;
    line-height: 1.6;
    display: block
}

.service-status {
    padding: 9px 13px
}

.service-eyebrow {
    line-height: 1.5
}

.service-panel-copy h3 {
    font-size: 48px;
}

.promise-top>span:last-child {
    letter-spacing: .04em
}

.promise-slide>p {
}

.promise-author {
    flex-wrap: wrap
}

.promise-author small {
    line-height: 1.5
}

.promise-author>img {
    width: 100px;
}

.promise-avatar {
    flex-shrink: 0
}

.promise-slide {
    padding-bottom: 64px
}

.promise-chips span {
    padding: 4px 15px;
}

.promise-slider .slider-dots button {
    width: 30px;
    height: 24px
}

.footer-grid {
    grid-template-columns: 1.05fr .72fr 1.15fr 1.18fr;
    gap: 28px
}

.footer-col h4 {
    line-height: 1.5
}

.footer-col>a {
    line-height: 1.7
}

.footer-availability {
    line-height: 1.6
}

.footer-bottom .container {
    padding-right: 52px
}

.to-top {
    width: 46px;
    height: 46px;
    background: var(--brand);
    color: #fff;
    box-shadow: 0 5px 18px #0756e82b;
    display: grid;
    place-items: center;
    transition: box-shadow .2s
}

.to-top .icon {
    width: 23px;
    height: 23px;
    transition: transform .2s
}

.to-top:hover .icon {
    transform: translateY(-3px)
}

.benefits-grid {
    grid-template-rows: minmax(435px,auto) minmax(435px,auto);
}

.benefit-card {
    display: flex;
    flex-direction: column;
    min-height: 340px;
}

.benefit-copy {
    padding: 25px 23px 0
}

.benefit-copy>span {
    letter-spacing: .05em
}

.benefit-copy h3 {
    font-size: 29px
}

.benefit-copy p {
    line-height: 1.65
}

.benefits-grid .benefit-card>img,.benefits-grid .benefit-card:not(.benefit-main)>img {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    transform: none;
    width: 100%;
    max-width: none;
    object-fit: scale-down;
    object-position: center;
    margin-top: auto;
    padding: 10px 18px 18px;
    flex-shrink: 0
}

.benefits-grid .benefit-main>img {
    height: 429px;
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px 8px
}

.benefit-main .benefit-copy {
    width: 100%;
    padding: 32px 23px 0
}

.benefit-main h3 {
    font-size: 30px;
}

.benefit-main .benefit-footnote {
    position: static;
    padding: 0 16px 23px;
    text-align: center;
    letter-spacing: .04em;
    line-height: 1.5
}

.campaign-scroll-caption {
    align-items: center;
    flex-wrap: wrap;
    line-height: 1.6
}

.campaign-scroll-caption>span:first-child {
    letter-spacing: .05em
}

.measurement-heading p {
    max-width: 360px
}

@media(min-width: 1001px) and (min-height:701px) {
    .service-panel-inner {
        min-height: 767px;
    }
}

@media(max-width: 1200px) {
    .header .nav {
        gap:16px
    }

    .header .header-inner {
        width: calc(100% - 48px)
    }

    .header .logo img {
        width: 85px
    }

    .header .round-btn {
        padding-left: 14px;
        gap: 8px
    }

    .stage-story {
        width: 210px
    }

    .stage-story h3 {
        font-size: 20px;
    }

    .service-panel-copy h3 {
        font-size: 49px
    }

    .service-index {
        font-size: 66px
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 35px
    }

    .benefits-grid {
        grid-template-rows: minmax(435px,auto) minmax(435px,auto)
    }
}

@media(max-width: 1000px) {
    .header .header-inner {
        width:calc(100% - 48px)
    }

    .service-panel-inner {
        min-height: 0
    }

    .stage-phone {
        width: 300px
    }

    .stage-story {
        width: 180px
    }

    .story-chips {
        display: none
    }

    .benefit-copy h3 {
        font-size: 25px
    }

    .benefit-main h3 {
        font-size: 34px
    }

    .benefit-copy {
        padding: 24px 16px 0
    }

    .benefits-grid .benefit-card:not(.benefit-main)>img {
        height: 225px
    }

    .promise-top {
        flex-wrap: wrap
    }
}

@media(max-width: 800px) {
    .hero-visual {
        height:665px
    }

    .hero-phone {
        width: 290px;
        height: 590px
    }

    .phone-stage {
        height: 690px
    }

    .stage-story {
        width: 165px
    }

    .stage-phone {
        width: 280px
    }

    .stage-story p {
        line-height: 1.6
    }

    .service-panel-inner {
        grid-template-columns: 1fr
    }

    .service-description {
        max-width: 560px
    }

    .service-visual {
        max-width: 510px
    }

    .service-index {
        font-size: 60px
    }

    .benefits-grid {
        grid-template-rows: auto auto auto
    }

    .benefit-main {
        min-height: 750px
    }

    .benefits-grid .benefit-main>img {
        height: 430px;
        max-height: 480px;
        flex: none
    }

    .benefit-main .benefit-footnote {
        text-align: center
    }

    .benefit-card {
        min-height: 440px
    }

    .promise-slide>p {
        min-height: 0
    }

    .header .round-btn {
        height: 44px
    }

    .campaign-scroll-caption>span:first-child {
        max-width: 65%
    }
}

@media(max-width: 767px) {
    .header .logo img {
        width:73px
    }

    .header .round-btn {
        height: 40px;
        width: 40px;
        padding: 4px
    }

    .header .theme-toggle {
        height: 40px;
    }

    .header .menu-toggle {
        height: 40px;
        width: 40px
    }

    .hero .kicker {
        letter-spacing: .025em
    }

    .hero-grid {
        padding-top: 27px
    }

    .hero-actions {
        gap: 18px
    }

    .hero-actions .primary-btn {
        padding-left: 16px
    }

    .hero-visual {
        height: 660px
    }

    .hero-phone {
        width: 298px;
        height: 509px;
    }

    .glass-card {
        width: 265px;
        left: 0;
        bottom: 6%
    }

    .p1 {
        right: 0;
        top: 20%
    }

    .p2 {
        bottom: 32%;
        left: 0
    }

    .p3 {
        bottom: 10;
    }

    .hero-phone .phone-screen strong {
        font-size: 60px
    }

    .phone-stage {
        height: auto
    }

    .stage-phone {
        width: min(330px,100%);
        height: 645px
    }

    .stage-story {
        width: 100%;
        padding: 22px
    }

    .stage-story .story-chips {
        display: flex
    }

    .feature-body {
        padding: 0 24px 26px
    }

    .feature-detail {
        line-height: 1.6
    }

    .feature-art {
        height: 125px
    }

    .service-visual {
        margin-top: 22px
    }

    .service-status {
        position: relative;
        top: auto;
        right: auto;
        margin-bottom: -6px
    }

    .service-caption {
        margin-top: 10px
    }

    .benefits-grid {
        grid-template-rows: none
    }

    .benefit-card {
        height: auto;
        min-height: 440px
    }

    .benefit-main {
        height: auto;
        min-height: 710px
    }

    .benefit-copy h3 {
        font-size: 29px
    }

    .benefits-grid .benefit-card:not(.benefit-main)>img {
        height: 245px
    }

    .benefits-grid .benefit-main>img {
        height: 420px;
        margin-top: 0
    }

    .benefit-main .benefit-copy {
        padding: 27px 20px 0
    }

    .benefit-main h3 {
        font-size: 36px
    }

    .campaign-scroll-caption {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px
    }

    .campaign-scroll-caption>span:first-child {
        max-width: none
    }

    .promise-slide {
        padding: 24px 22px 60px
    }

    .promise-author {
        align-items: flex-start
    }

    .promise-author>img {
        display: none
    }

    .promise-author small {
        font-size: 16px
    }

    .promise-top {
        gap: 14px
    }

    .promise-author>div {
        flex: 1;
        min-width: 0
    }

    .slider-controls {
        gap: 12px
    }

    .footer-bottom .container {
        line-height: 1.6
    }

    .footer-col .footer-contact-btn {
        padding: 10px 14px
    }

    .cta-phone-wrap {
        height: 485px
    }

    .cta-phone {
        height: 470px;
        width: 250px
    }

    .cta-phone .phone-screen {
        padding-top: 55px
    }

    .to-top {
        bottom: 24px;
        right: 16px
    }
}

@media(max-width: 370px) {
    .stage-phone .phone-screen {
        padding:53px 16px 18px
    }

    .stage-phone .ui-line {
        gap: 6px
    }

    .stage-phone .ui-line span {
        max-width: 145px
    }

    .stage-phone .light-ui h3 {
        font-size: 28px
    }

    .chart-label {
        flex-wrap: wrap
    }

    .stage-phone {
        height: 685px
    }

    .hero-phone {
        width: 260px
    }

    .hero-phone .phone-screen {
        padding-inline:15px }

    .hero-actions {
        flex-direction: column;
        align-items: flex-start
    }

    .hero .kicker {
        font-size: 16px!important
    }

    .glass-card {
        width: 255px
    }

    .benefits-grid .benefit-main>img {
        height: 380px
    }

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

html[data-theme="light"] {
    --bg: #edf2f5;
    --panel: #f8fafc;
    --panel2: #e1eaf0;
    --surface-soft: #e3ebf1;
    --surface-raised: #f4f7fa;
    --copy: #486172;
    --muted: #486172;
    --outline: #cbd9e3;
    --ink: #132d41;
    --text: #132d41;
    --line: #213e581f
}

html[data-theme="light"] .hero {
    background: linear-gradient(115deg,#edf2f6 10%,#e1edf6 62%,#dfefe9)
}

html[data-theme="light"] .hero:before {
    opacity: .55
}

html[data-theme="light"] .hero-glow {
    opacity: .11
}

html[data-theme="light"] .hero-text,html[data-theme="light"] .kicker {
    color: #486172
}

html[data-theme="light"] .header {
    background: rgba(241,246,250,.97);
    border-color: #cad9e3;
    box-shadow: 0 8px 28px #163c570c;
    border-radius: 50px;
}

html[data-theme="light"] .header.is-sticky {
    background: rgba(241,246,250,.98);
    box-shadow: 0 5px 24px #163c5712;
    border-radius: 0px;
}

html[data-theme="light"] .features .feature-card {
    background: radial-gradient(ellipse at 50% 0%,#cde8ef80,transparent 75%),linear-gradient(145deg,#f4f8fa,#e9f1f5);
    border-color: #cbdce5;
    box-shadow: inset 0 1px 0 #fff9,0 3px 0 #d5e2ea,0 16px 30px -22px #173e5a40
}

html[data-theme="light"] .features .feature-card:nth-child(2) {
    background: radial-gradient(ellipse at 50% 0%,#d4dff280,transparent 75%),linear-gradient(145deg,#f3f6fa,#e7edf5)
}

html[data-theme="light"] .features .feature-card:nth-child(3) {
    background: radial-gradient(ellipse at 50% 0%,#d0eadf80,transparent 75%),linear-gradient(145deg,#f1f8f5,#e5f0eb)
}

html[data-theme="light"] .features .feature-card p {
    color: #486172
}

html[data-theme="light"] .dark-section {
    background: #e3ecf1
}

html[data-theme="light"] .service-panel {
    background: #e7eff4;
    border-color: #cddde6
}

html[data-theme="light"] .service-panel-2 {
    background: #e3ebf4
}

html[data-theme="light"] .service-panel-3 {
    background: #e1eee8
}

html[data-theme="light"] .service-index {
    color: #4b809485;
}

html[data-theme="light"] .benefit-card {
    background: linear-gradient(145deg,#f3f7fa,#e3edf3);
    border-color: #cbdbe5;
    box-shadow: 0 10px 24px -20px #173e5a40
}

html[data-theme="light"] .benefit-main {
    background: radial-gradient(ellipse at 80% 0%,#b7dfd875,transparent 68%),linear-gradient(150deg,#dbeaf4,#d4e7e8)
}

html[data-theme="light"] .promise-slider {
    background: radial-gradient(ellipse at 100% 0%,#b9e0d95c,transparent 65%),#f1f6f9;
    box-shadow: 0 16px 36px -25px #163c5745
}

html[data-theme="light"] .campaigns-viewport,html[data-theme="light"] .measurement-logos .proof-logo {
    box-shadow: 0 10px 24px -20px #173e5a35
}

html[data-theme="light"] .download-cta {
    background: radial-gradient(ellipse at 85% 20%,#b9dfd77a,transparent 65%),linear-gradient(115deg,#dce8f3,#d8e9ed);
    border-color: #bdd4df
}

html[data-theme="light"] .mini-pill {
    background: #e4edf3;
    color: #3c5d74;
    border-color: #c4d7e2
}

.stage-story ul li {
    line-height: 36px;
    list-style: none;
}

.stage-story ul {
    padding-left: 0px;
}

.stage-story ul li .icon {
    width: 22px;
    height: 22px;
    stroke: url(#brand-icon-gradient);
    color: transparent;
}

html[data-theme="light"] .phone-stage .stage-story {
    background: #f0f6f85c;
    border-color: #c4d8e2;
    padding: 10px;
    border-radius: 10px;
}

html[data-theme="light"] .experience-strip {
    border-color: #a9c5d0;
    box-shadow: 0 16px 38px rgba(22,63,84,.10),inset 0 1px 0 rgba(255,255,255,.55);
    background: var(--brand);
}

.experience-copy {
    position: relative;
    padding-left: 8px
}

.experience-item strong {
    letter-spacing: -.02em
}

html[data-theme="light"] .experience-copy span, html[data-theme="light"] .experience-item strong {
    color: #0b2b49;
}

html[data-theme="light"] .experience-item span {
    color: #ffffff;
}

@media(max-width: 767px) {
    .experience-strip::before {
        width:4px
    }

    .experience-copy {
        padding-left: 0
    }
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 92px
}

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased
}

:root, html[data-theme="dark"] {
    --section-space: 84px
}

.loader img {
    width: 82px;
    height: auto
}

.loader span {
    width: 112px;
    height: 112px;
    border-color: rgba(16,216,232,.24)
}

.header {
    top: 14px;
    height: 74px;
    border-radius: 22px;
    background: rgba(7,15,24,.84);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 10px 34px rgba(0,0,0,.12);
    -webkit-backdrop-filter: blur(20px) saturate(135%);
    backdrop-filter: blur(20px) saturate(135%);
    transition: top .32s cubic-bezier(.2,.7,.2,1),border-radius .32s ease,background-color .32s ease,border-color .32s ease,box-shadow .32s ease
}

.header.is-sticky {
    top: 0;
    border-radius: 0;
    border-color: transparent;
    background: rgba(6,12,20,.96);
    box-shadow: 0 8px 28px rgba(0,0,0,.18)
}

html[data-theme="light"] .header {
    background: rgba(240,247,250,.9);
    border-color: rgba(23,61,84,.12);
    box-shadow: 0 10px 30px rgba(23,61,84,.08)
}

html[data-theme="light"] .header.is-sticky {
    background: rgba(245,249,251,.97);
    border-color: transparent;
    box-shadow: 0 7px 24px rgba(23,61,84,.10)
}

.header .nav a {
    transition: color .22s ease,opacity .22s ease
}

.experience-strip {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 24px 28px;
    gap: 14px;
    border-radius: 22px;
    border: 1px solid rgba(31,205,214,.22);
    background: radial-gradient(circle at 70% -30%,rgba(16,216,232,.18),transparent 42%), radial-gradient(circle at 96% 120%,rgba(30,226,108,.14),transparent 36%), linear-gradient(112deg,#071624 0%,#0b2636 46%,#10352f 100%);
    box-shadow: 0 20px 52px rgba(3,16,27,.20),inset 0 1px 0 rgba(255,255,255,.05);
    color: #f4fbff
}

.experience-strip::after {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    right: -110px;
    top: -150px;
    border: 1px solid rgba(16,216,232,.16);
    border-radius: 50%;
    box-shadow: 0 0 0 34px rgba(16,216,232,.025),0 0 0 68px rgba(30,226,108,.018);
    pointer-events: none;
    z-index: -1
}

.experience-copy {
    padding: 4px 18px 4px 10px
}

.experience-copy>span {
    display: block;
    color: #f6fbff;
    font-size: 32px!important;
    line-height: 40px;
    letter-spacing: .015em
}

.experience-copy b {
    background: linear-gradient(90deg,var(--cyan),#5ac8ff 52%,var(--green));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent
}

.experience-item {
    min-height: 72px;
    padding: 8px 14px 8px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid rgba(255,255,255,.13)
}

.experience-item strong {
    color: #fff;
    font-size: 32px;
    line-height: 1;
    letter-spacing: 2px;
}

.experience-item span {
    margin-top: 8px;
    color: #b9ccd8;
    font-size: 14px;
    line-height: 1.45
}

html[data-theme="light"] .experience-strip {
    color: #f4fbff;
    border-color: rgba(18,161,179,.22);
    background: radial-gradient(circle at 70% -30%,rgba(16,216,232,.17),transparent 42%), radial-gradient(circle at 96% 120%,rgba(30,226,108,.13),transparent 36%), linear-gradient(112deg,#0b2030 0%,#0e3040 48%,#153c35 100%);
    box-shadow: 0 18px 44px rgba(19,54,73,.16),inset 0 1px 0 rgba(255,255,255,.06)
}

html[data-theme="light"] .experience-copy>span, html[data-theme="light"] .experience-item strong {
    color: #fff;
    -webkit-text-fill-color: initial
}

html[data-theme="light"] .experience-copy b {
    -webkit-text-fill-color: transparent
}

html[data-theme="light"] .experience-item span {
    color: #c5d7df
}

@media(min-width: 1001px) {
    .benefits-section {
        padding:52px 0 58px
    }

    .benefits-section .section-heading {
        margin-bottom: 24px;
        gap: 28px
    }

    .benefits-section .display-heading {
        margin-top: 14px;
        font-size: clamp(38px,3.8vw,48px);
    }

    .benefits-section .section-heading>p {
        margin-bottom: 3px;
        line-height: 1.65
    }

    .benefits-grid {
        grid-template-rows: minmax(200px,200px) minmax(200px,200px);
        gap: 16px
    }

    .benefit-card {
        min-height: 0;
        border-radius: 22px
    }

    .benefit-copy {
        padding: 16px 16px 0
    }

    .benefit-copy>span {
        font-size: 10px;
        letter-spacing: .08em
    }

    .benefit-copy h3, .benefit-main h3 {
        margin: 7px 0 5px;
        font-size: 21px;
        line-height: 1.06
    }

    .benefit-copy p {
        margin: 0;
        font-size: 11px;
        line-height: 1.45
    }

    .benefits-grid .benefit-card:not(.benefit-main)>img {
        /* height: 104px;
         */
        margin-top: auto;
        padding: 2px 14px 10px;
        object-fit: contain
    }

    .benefit-main .benefit-copy {
        padding: 20px 18px 0
    }

    .benefits-grid .benefit-main>img {
        height: 236px;
        max-height: 236px;
        padding: 4px 12px;
        object-fit: contain
    }

    .benefit-main .benefit-footnote {
        padding: 0 14px 13px;
        font-size: 9px
    }
}

@media(max-width: 1000px) {
    .benefits-section {
        padding-top:64px;
        padding-bottom: 64px
    }
}

@media(max-width: 767px) {
    html {
        scroll-padding-top:76px
    }

    .header, .header:not(.is-sticky) {
        top: 0;
        width: 100%;
        border-radius: 0;
        border-left: 0;
        border-right: 0
    }

    .loader img {
        width: 68px
    }

    .loader span {
        width: 94px;
        height: 94px
    }

    .experience-strip {
        grid-template-columns: 1fr 1fr;
        padding: 22px 18px;
        gap: 8px
    }

    .experience-copy {
        grid-column: 1/-1;
        padding: 0 0 14px
    }

    .experience-copy>span {
        font-size: 32px!important;
        line-height: 44px;
    }

    .experience-item {
        min-height: 80px;
        padding: 12px;
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.12)
    }

    .experience-item:first-of-type {
        grid-column: 1/-1
    }
}

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

html {
    scroll-behavior: smooth
}

.header {
    transition: height .28s ease,background-color .28s ease,border-color .28s ease,box-shadow .28s ease,backdrop-filter .28s ease;
    will-change: background-color,box-shadow
}

.header.is-sticky {
    background: rgba(9,13,18,.94);
    border-color: rgba(255,255,255,.09);
    box-shadow: 0 12px 34px rgba(0,0,0,.18);
    backdrop-filter: blur(22px) saturate(145%)
}

html[data-theme="light"] .header.is-sticky {
    background: rgba(242,247,250,.96);
    border-color: #c9d9e2;
    box-shadow: 0 12px 34px rgba(16,52,72,.10)
}

.loader img {
    width: 82px
}

.loader span {
    width: 112px;
    height: 112px
}

main>section:not(.hero):not(.services-section) {
    position: relative
}

main>section:not(.hero):not(.services-section)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(1320px,calc(100% - 48px));
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg,transparent,var(--outline) 18%,var(--outline) 82%,transparent);
    pointer-events: none
}

.services-section::before,.tech-ribbon::before {
    display: none
}

.primary-btn,.round-btn,.slider-arrow,.footer-contact-btn {
    transition: transform .28s ease,box-shadow .28s ease,border-color .28s ease,background-position .45s ease,color .28s ease
}

.primary-btn {
    background: linear-gradient(110deg,#073fe5 0%,#079be8 35%,#10d8e8 55%,#1ee26c 78%,#073fe5 100%);
    background-size: 240% 100%;
    background-position: 0 0
}

@media(hover: hover) {
    .primary-btn:hover {
        background-position:100% 0;
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(7,89,190,.24)
    }

    .round-btn:hover {
        background: linear-gradient(110deg,rgba(7,63,229,.95),rgba(16,216,232,.92),rgba(30,226,108,.88));
        border-color: transparent;
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 10px 26px rgba(7,89,190,.22)
    }

    .slider-arrow:hover {
        transform: translateY(-2px);
        border-color: #10b9d0;
        background: linear-gradient(135deg,rgba(16,216,232,.16),rgba(7,63,229,.12))
    }
}

html[data-theme="dark"] .service-index {
    color: transparent;
    -webkit-text-stroke: 1px rgba(16,216,232,.38);
    background: linear-gradient(120deg,#10d8e8,#4b7dff 58%,#1ee26c);
    -webkit-background-clip: text;
    background-clip: text;
    opacity: .66
}

html[data-theme="dark"] .service-panel-copy h3 {
    color: #f5fbff
}

html[data-theme="dark"] .service-description p {
    color: #a8bac8
}

html[data-theme="dark"] .service-description li {
    color: #dce9f1
}

.benefits-section {
    overflow: hidden
}

.benefits-grid {
    grid-template-rows: 290px 290px;
    gap: 18px
}

.benefit-card {
    min-height: 0;
    box-shadow: 0 16px 34px -28px rgba(9,54,82,.42),inset 0 1px 0 rgba(255,255,255,.55)
}

.benefit-copy {
    padding: 24px 18px 0
}

.benefit-copy h3 {
    font-size: 24px;
    margin: 12px 0 6px;
    line-height: 32px;
}

.benefit-copy p {
    font-size: 13px!important;
    line-height: 1.5
}

.benefit-copy>span {
    font-size: 11px!important
}

.benefits-grid .benefit-card:not(.benefit-main)>img {
    min-height: 190px;
    max-height: 190px;
    padding: 4px 24px 12px;
    object-fit: contain
}

.benefit-main .benefit-copy {
    padding: 29px 22px 0
}

.benefit-main h3 {
    font-size: 27px;
}

.benefits-grid .benefit-main>img {
    height: auto;
    min-height: 275px;
    max-height: 340px;
    padding: 6px 14px 0;
    object-fit: contain
}

.benefit-main .benefit-footnote {
    padding: 0 14px 18px
}

html[data-theme="dark"] .benefit-card {
    border-color: #284150;
    background: linear-gradient(145deg,#13202a,#0e1821);
    box-shadow: 0 18px 34px -28px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.04)
}

html[data-theme="dark"] .benefit-main {
    background: radial-gradient(ellipse at 75% 12%,rgba(16,216,232,.16),transparent 58%),linear-gradient(145deg,#112938,#111d29 58%,#123126)
}

html[data-theme="dark"] .benefit-copy>span,html[data-theme="dark"] .benefit-footnote {
    color: #8fb1c4
}

.tech-ribbon {
    padding: 86px 0 92px;
    overflow: hidden;
    background: var(--bg)
}

.tech-ribbon-head {
    display: grid;
    column-gap: 70px;
    align-items: center;
    margin-bottom: 42px;
    text-align: center;
}

.tech-ribbon-head .mini-pill {
    grid-column: 1/-1;
    justify-self: start;
    margin-bottom: 15px
}

.tech-ribbon-head .display-heading {
    margin: 0;
}

.tech-ribbon-head p {
    margin: 0 0 5px;
    color: var(--copy);
    font-size: 14px!important;
    line-height: 1.8;
    /* max-width: 390px;
     */
}

.tech-rails {
    display: grid;
    gap: 0px;
    transform: rotate(-.35deg);
    transform-origin: center
}

.tech-rail {
    overflow: hidden;
    border-block:1px solid rgba(255,255,255,.08) }

.tech-rail-track {
    width: max-content;
    display: flex;
    align-items: center;
    min-height: 55px;
    animation: techRail 30s linear infinite;
    will-change: transform
}

.tech-rail:nth-child(even) .tech-rail-track {
    animation-direction: reverse;
    animation-duration: 34s
}

.tech-rail:nth-child(3) .tech-rail-track {
    animation-duration: 38s
}

.tech-rail span {
    flex: 0 0 auto;
    min-width: 330px;
    padding: 0 32px;
    text-align: center;
    font-size: 16px!important;
    font-weight: 800;
    letter-spacing: .02em;
    white-space: nowrap;
    color: #fff
}

.rail-one {
    background: #021aae;
}

.rail-two {
    background: #5aba47;
}

.rail-three {
    background: linear-gradient(90deg,#087f78,#0bb587,#159c65)
}

@keyframes techRail {
    to {
        transform: translateX(-50%)
    }
}

@media(hover: hover) {
    .tech-rail:hover .tech-rail-track {
        animation-play-state:paused
    }
}

html[data-theme="light"] .tech-ribbon {
    background: #edf4f8;
}

html[data-theme="dark"] .tech-ribbon {
    background: radial-gradient(circle at 82% 18%,rgba(16,216,232,.06),transparent 32%),#0b1118
}

.slider-controls {
    gap: 14px
}

.slider-pause {
    display: none!important
}

.promise-slider {
    border-color: color-mix(in srgb,var(--outline) 82%,#10d8e8 18%);
    box-shadow: 0 24px 58px -38px rgba(7,89,190,.38)
}

html[data-theme="dark"] .promise-slider {
    background: radial-gradient(circle at 95% 0%,rgba(16,216,232,.10),transparent 42%),#101b25;
    border-color: #2b4353
}

html[data-theme="dark"] .promise-slide h3 {
    color: #f2f8fc
}

html[data-theme="dark"] .promise-slide>p,html[data-theme="dark"] .promise-top>span:last-child {
    color: #a5b8c7
}

.measurement-section {
    background: linear-gradient(180deg,var(--surface-soft),var(--bg));
    border-block:1px solid var(--outline); }

.measurement-layout {
    grid-template-columns: .7fr 1.3fr;
    gap: 64px
}

.measurement-logos {
    position: relative;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
    padding: 18px 18px 18px;
    border: 1px solid var(--outline);
    border-radius: 28px;
    background: radial-gradient(circle at 90% 8%,rgba(16,216,232,.12),transparent 30%),radial-gradient(circle at 8% 90%,rgba(30,226,108,.08),transparent 26%),var(--surface-raised);
    box-shadow: 0 22px 55px -38px rgba(9,65,96,.45)
}

.measurement-logos .proof-logo {
    height: 86px;
    padding: 15px;
    border-radius: 16px;
    border: 1px solid var(--outline);
    background: #fff;
    box-shadow: none;
    transition: transform .28s ease,border-color .28s ease,box-shadow .28s ease
}

.measurement-logos .proof-logo img {
    max-width: 125px;
    max-height: 40px
}

@media(hover: hover) {
    .measurement-logos .proof-logo:hover {
        transform:translateY(-4px);
        border-color: #48bfd0;
        box-shadow: 0 12px 28px rgba(13,91,130,.12)
    }
}

html[data-theme="dark"] .measurement-logos {
    background: radial-gradient(circle at 90% 8%,rgba(16,216,232,.09),transparent 30%),radial-gradient(circle at 8% 90%,rgba(30,226,108,.06),transparent 26%),#101a24;
    border-color: #263b4a
}

html[data-theme="dark"] .measurement-logos .proof-logo {
    border-color: #263b4a;
    background: #f8fbfd
}

html[data-theme="dark"] :is(.section-heading>p,.narrow-head>p,.measurement-heading p,.partnership-heading>p,.tech-ribbon-head p) {
    color: #a6b9c7
}

html[data-theme="dark"] .mini-pill {
    color: #b7cad7;
    background: #101d27;
    border-color: #294050
}

html[data-theme="light"] .display-heading {
    color: #10263a
}

@media(max-height: 820px) and (min-width:1001px) {
    .benefits-section {
        padding-top:70px;
        padding-bottom: 70px
    }

    .benefits-section .section-heading {
        margin-bottom: 28px
    }

    .benefits-grid {
        grid-template-rows: 270px 270px
    }
}

@media(max-width: 1000px) {
    .benefits-grid {
        grid-template-rows:270px 270px
    }

    .tech-ribbon-head {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .tech-ribbon-head .mini-pill {
        grid-column: auto
    }

    .tech-ribbon-head p {
        max-width: 600px
    }

    .tech-rail span {
        min-width: 285px;
        font-size: 17px!important
    }

    .measurement-layout {
        grid-template-columns: 1fr;
        gap: 30px
    }
}

@media(max-width: 767px) {
    .loader img {
        width:70px
    }

    .loader span {
        width: 96px;
        height: 96px
    }

    .benefits-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 14px
    }

    .benefit-models,.benefit-reporting,.benefit-main,.benefit-reach,.benefit-targeting {
        grid-column: 1;
        grid-row: auto
    }

    .benefit-card {
        min-height: 330px
    }

    .benefit-main {
        min-height: 540px
    }

    .benefits-grid .benefit-card:not(.benefit-main)>img {
        max-height: 160px
    }

    .tech-ribbon {
        padding: 66px 0 72px
    }

    .tech-ribbon-head {
        margin-bottom: 30px
    }

    .tech-rails {
        gap: 0px;
        transform: none
    }

    .tech-rail-track {
        min-height: 60px
    }

    .tech-rail span {
        min-width: 245px;
        padding: 0 20px;
        font-size: 14px!important
    }

    .measurement-logos {
        grid-template-columns: repeat(3,minmax(0,1fr));
        padding: 11px 12px 12px;
    }

    .measurement-logos .proof-logo {
        height: 66px;
    }
}

:root {
    --btn-fg: #fff;
    --btn-bg: linear-gradient(100deg,#073fe5 0%,#078edb 42%,#10c8bf 72%,#16c96b 100%);
    --btn-shadow: 0 14px 34px rgba(7,85,190,.22);
    --heading-size: clamp(36px,5.2vw,36px);
}

html[data-theme="dark"] {
    --btn-fg: #fff
}

.display-heading {
    font-size: var(--heading-size)!important
}

.primary-btn,.round-btn,.footer-contact-btn,.slider-arrow,.slider-autoplay {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,border-color .3s ease,color .3s ease!important
}

.primary-btn,.round-btn,.footer-contact-btn {
    color: var(--btn-fg)!important
}

.primary-btn::before,.round-btn::before,.footer-contact-btn::before,.slider-arrow::before,.slider-autoplay::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--btn-bg);
    transform: translateX(-104%);
    transition: transform .42s cubic-bezier(.2,.8,.2,1)
}

@media(hover: hover) {
    .primary-btn:hover,.round-btn:hover,.footer-contact-btn:hover,.slider-arrow:hover,.slider-autoplay:hover {
        transform:translateY(-2px);
        box-shadow: var(--btn-shadow)!important;
        color: #fff!important;
        border-color: transparent!important
    }

    .primary-btn:hover::before,.round-btn:hover::before,.footer-contact-btn:hover::before,.slider-arrow:hover::before,.slider-autoplay:hover::before {
        transform: translateX(0)
    }
}

html[data-theme="dark"] .primary-btn,html[data-theme="dark"] .round-btn,html[data-theme="dark"] .footer-contact-btn {
    color: #fff!important
}

.hero-actions .text-link {
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 999px;
    padding: 12px 18px;
    color: #fff
}

html[data-theme="light"] .hero-actions .text-link {
    border-color: rgba(8,61,112,.22);
    color: var(--ink)
}

.hero-actions .text-link:hover {
    background: var(--btn-bg);
    border-color: transparent;
    color: #fff
}

.stage-story {
    border: 1px solid rgba(90,175,215,.22);
    border-radius: 22px;
    padding: 20px;
    background: linear-gradient(145deg,rgba(255,255,255,.10),rgba(5,34,52,.16));
    box-shadow: 0 22px 55px rgba(0,16,33,.18),inset 0 1px rgba(255,255,255,.16);
    backdrop-filter: blur(12px);
    transform-style: preserve-3d;
    transition: transform .4s ease,box-shadow .4s ease
}

@media(hover: hover) {
    .stage-story:hover {
        transform:perspective(900px) rotateX(2deg) rotateY(-3deg) translateY(-6px);
        box-shadow: 0 30px 70px rgba(0,24,55,.28)
    }
}

html[data-theme="light"] .stage-story {
    background: linear-gradient(145deg,rgba(255,255,255,.92),rgba(226,244,250,.78));
    box-shadow: 0 20px 55px rgba(22,87,120,.13)
}

.service-panel-copy h3 {
    font-size: clamp(30px,4vw,30px)!important;
}

.service-description li {
    font-size: 12px;
    gap: 11px
}

.service-description li .icon {
    width: 22px;
    height: 22px;
    stroke: url(#brand-icon-gradient);
    color: transparent;
}

.service-panel-inner {
    will-change: transform,opacity
}

html[data-theme="dark"] .service-index {
    color: #7edcff!important;
    opacity: .32
}

.tech-ribbon {
    border-block:1px solid var(--outline) }

.tech-rail.rail-one {
    background: linear-gradient(90deg,#063e90,#075fbb,#087fca)!important
}

.tech-rail.rail-two {
    background: linear-gradient(90deg,#075e96,#079fba,#12b879)!important
}

.slider-autoplay {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid var(--outline);
    background: var(--surface-raised);
    color: var(--ink);
    cursor: pointer
}

.slider-autoplay .icon {
    width: 17px;
    height: 17px;
    position: absolute
}

.slider-autoplay .icon-play {
    display: none
}

.slider-autoplay:not(.is-playing) .icon-pause {
    display: none
}

.slider-autoplay:not(.is-playing) .icon-play {
    display: block
}

.measurement-logos {
    transform-origin: center;
    will-change: transform
}

.measurement-logos .proof-logo {
    background: linear-gradient(145deg,var(--surface-raised),var(--surface-soft));
    box-shadow: 0 10px 28px rgba(15,72,107,.08);
    transition: transform .3s ease,box-shadow .3s ease
}

@media(hover: hover) {
    .measurement-logos .proof-logo:hover {
        transform:translateY(-4px) scale(1.025);
        box-shadow: 0 18px 35px rgba(15,72,107,.15)
    }
}

.faq-item {
    border-bottom: 1px solid color-mix(in srgb,var(--outline) 82%,transparent);
    padding: 18px 0!important
}

.faq-item b {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid var(--outline);
    display: grid;
    place-items: center;
    background: var(--surface-raised);
    font-size: 0;
    flex-shrink: 0;
}

.faq-item b::before,.faq-item b::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 1.5px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .3s ease
}

.faq-item b::after {
    transform: rotate(90deg)
}

.faq-item.active b {
    background: var(--btn-bg);
    color: #fff;
    border-color: transparent
}

.faq-item.active b::after {
    transform: rotate(0)
}

.footer-help {
    display: flex;
    flex-direction: column;
}

.footer-contact-line {
    display: flex!important;
    align-items: center;
    gap: 12px;
    padding: 0px 0;
    color: #dff7ff!important;
    text-decoration: none
}

.footer-contact-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg,rgba(7,63,229,.35),rgba(16,200,191,.25));
    border: 1px solid rgba(255,255,255,.13);
    font-size: 22px;
    flex: 0 0 auto
}

.footer-contact-line small,.footer-contact-line b {
    display: block
}

.footer-contact-line small {
    font-size: 15px !important;
    color: #f8fcff;
    margin-bottom: 2px;
    font-weight: 600 !important;
}

.footer-contact-line b {
    font-size: 14px;
    color: #fff;
    font-weight: 400;
}

@media(max-width: 767px) {
    .display-heading {
        font-size: clamp(30px,11vw,30px)!important;
        line-height: 40px;
    }

    .stage-story {
        padding: 14px
    }

    .slider-autoplay {
        width: 38px;
        height: 38px
    }
}

.hero-actions .text-link {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid color-mix(in srgb,currentColor 26%,transparent);
    border-radius: 999px;
    transition: color .3s ease,background .35s ease,box-shadow .35s ease,transform .35s ease,border-color .2s ease;
}

@media (hover: hover) {
    .hero-actions .text-link:hover, .hero-actions .text-link:focus-visible {
        border-color:transparent!important;
        outline: none;
        background: var(--btn-bg)!important;
        color: #fff!important;
        box-shadow: var(--btn-shadow);
        transform: translateY(-2px);
    }
}

.measurement-logos {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transform: none!important;
    will-change: auto!important;
}

.measurement-logos::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(circle at 18% 42%,rgba(16,216,232,.18),transparent 28%), radial-gradient(circle at 70% 58%,rgba(7,63,229,.14),transparent 30%), radial-gradient(circle at 96% 38%,rgba(30,226,108,.16),transparent 26%);
    background-size: 180% 100%;
    background-position: 0% 50%;
    animation: mmpGradientTravel 5.6s ease-in-out infinite alternate;
    opacity: .9;
}

.measurement-logos::before, .measurement-logos .proof-logo {
    position: relative;
    z-index: 1;
}

@keyframes mmpGradientTravel {
    from {
        background-position: 0% 50%
    }

    to {
        background-position: 100% 50%
    }
}

html[data-theme="dark"] .measurement-logos::after {
    opacity: .68;
}

@media (prefers-reduced-motion:reduce) {
    .measurement-logos::after {
        animation: none
    }
}

.faq-heading-copy .faq-intro {
    max-width: 470px;
    margin: 18px 0 0;
    color: var(--copy);
    font-size: 14px;
    line-height: 1.75;
}

html[data-theme="dark"] .faq-heading-copy .faq-intro {
    color: #a6b9c7;
}

@media(max-width: 767px) {
    .faq-heading-copy .faq-intro {
        font-size:13px;
        line-height: 1.7
    }

    .faq-heading-copy .faq-intro br {
        display: none
    }
}

@media (min-width: 1101px) {
    .hero {
        min-height:100svh;
        padding-top: 92px;
        display: flex;
        flex-direction: column;
    }

    .hero-grid {
        min-height: 0;
        height: calc(100svh - 168px);
        flex: 1;
    }

    .hero-visual {
        height: min(590px,calc(100svh - 190px));
    }

    .hero-phone {
        width: min(280px,28vw);
        height: min(560px,calc(100svh - 220px));
    }

    .brand-strip {
        margin-top: auto;
    }
}

@media (max-width: 767px) {
    .hero {
        padding-top:72px;
        min-height: auto;
        overflow: hidden;
    }

    .hero-grid {
        padding-top: 42px;
    }

    .hero-visual {
        height: 540px;
        overflow: visible;
    }

    .glass-card {
        left: 50%;
        bottom: 8px;
        width: min(238px,78vw);
        transform: translateX(-50%);
        z-index: 8;
        display: n;
    }

    .review-main {
        min-width: 0;
    }

    .review-main>b {
        font-size: 38px;
        line-height: 1;
        flex: 0 0 auto;
    }

    .review-main span {
        min-width: 0;
        font-size: 12px;
    }

    .review-main small {
        font-size: 8px;
        white-space: normal;
    }
}

@media (max-width: 390px) {
    .hero-visual {
        height:515px;
    }

    .hero-phone {
        width: 218px;
        height: 440px;
    }

    .glass-card {
        width: 220px;
        bottom: 4px;
    }
}

.hero-grid::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(720px,62vw);
    aspect-ratio: 1;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    opacity: .34;
    filter: blur(22px);
    background: radial-gradient(circle at 34% 38%,rgba(21,210,229,.26),transparent 32%), radial-gradient(circle at 68% 44%,rgba(31,91,255,.24),transparent 35%), radial-gradient(circle at 52% 72%,rgba(41,220,126,.16),transparent 30%);
    animation: heroAmbientDrift 9s ease-in-out infinite alternate;
}

.hero-grid > * {
    position: relative;
    z-index: 1;
}

@keyframes heroAmbientDrift {
    0% {
        transform: translate(-54%,-50%) scale(.96) rotate(-3deg)
    }

    50% {
        transform: translate(-48%,-53%) scale(1.04) rotate(2deg)
    }

    100% {
        transform: translate(-51%,-47%) scale(1) rotate(0deg)
    }
}

html[data-theme="light"] .hero-grid::before {
    opacity: .22;
    filter: blur(28px);
}

@media(max-width: 767px) {
    .hero-grid::before {
        display:none!important;
        animation: none!important;
    }
}

@media(prefers-reduced-motion:reduce) {
    .hero-grid::before {
        animation: none;
    }
}

@media (min-width: 1001px) {
    .hero {
        padding-top: 124px;
        min-height: 100svh;
    }

    .hero-grid {
        min-height: calc(100svh - 124px);
    }

    .hero > .brand-strip {
        margin-top: 0;
    }
}

.measurement-heading > p {
    max-width: 560px;
    line-height: 1.65;
}

@media (min-width: 769px) {
    .measurement-heading > p {
        max-width: 520px;
    }
}

.display-heading, .service-panel-copy h3, .section-heading > p, .measurement-heading > p {
    will-change: transform, opacity;
}

.brand-strip {
    overflow: hidden
}

.brand-strip .logo-marquee-row {
    width: 100%;
    margin-top: 12px
}

.brand-strip .logo-marquee-row + .logo-marquee-row {
    margin-top: 14px
}

.brand-strip .logo-track {
    width: max-content;
    animation: networkRowLeft 60s linear infinite
}

.brand-strip .row-2 .logo-track {
    animation-name: networkRowRight;
    animation-duration: 68s
}

@keyframes networkRowLeft {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

@keyframes networkRowRight {
    from {
        transform: translateX(-50%)
    }

    to {
        transform: translateX(0)
    }
}

.brand-strip .logo-marquee:hover .logo-track {
    animation-play-state: running
}

.campaigns-logo-grid .proof-logo img, .campaigns-logo-grid .proof-logo:hover img {
    filter: none!important;
    opacity: 1!important;
}

.campaigns-logo-grid .proof-logo:hover img {
    transform: none!important
}

.events-section {
    position: relative;
    overflow: hidden;
    background: var(--bg);
    border-top: 1px solid var(--outline)
}

.events-section::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -180px;
    top: -240px;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(16,216,232,.13),transparent 67%);
    pointer-events: none
}

.events-head {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 60px;
    align-items: end;
    margin-bottom: 19px;
}

.events-head p {
    max-width: 520px;
    margin: 0 0 5px;
    color: var(--copy);
    line-height: 1.75
}

.events-grid {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 18px
}

.event-card {
    position: relative;
    min-height: 330px;
    padding: 20px;
    border: 1px solid var(--outline);
    border-radius: 26px;
    background: linear-gradient(145deg,var(--surface-raised),var(--surface-soft));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform .35s ease,border-color .35s ease,box-shadow .35s ease
}

.event-card-featured {
    background: radial-gradient(circle at 90% 10%,rgba(16,216,232,.15),transparent 34%),linear-gradient(145deg,var(--surface-raised),var(--surface-soft))
}

.event-media {
    position: relative;
    height: 400px;
    margin: -34px -34px 15px;
    overflow: hidden;
    border-bottom: 1px solid var(--outline);
    background: var(--surface-soft)
}

.event-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,transparent 58%,rgba(4,17,28,.22));
    pointer-events: none
}

.event-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2,.7,.2,1)
}

@media(hover: hover) {
    .event-card:hover .event-media img {
        transform:scale(1.045)
    }
}

.event-date {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--outline);
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--copy)
}

.event-date strong {
    color: var(--ink);
    font-weight: 800
}

.event-copy {
    max-width: 580px;
    padding-top: 10px;
}

.event-tag {
    display: inline-flex;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--copy)
}

.event-copy h3 {
    margin: 0px;
}

.event-copy h3 a {
    font-size: 24px !important;
    line-height: 1;
    text-transform: capitalize;
    font-weight: 700;
    color: var(--ink);
    font-family: var(--font);
    display: block;
    margin-bottom: 10px;
}

.event-copy p {
    margin: 0;
    max-width: 510px;
    color: var(--copy);
    line-height: 1.7
}

.event-arrow {
    position: absolute;
    right: 28px;
    bottom: 28px;
    width: 46px;
    height: 46px;
    border: 1px solid var(--outline);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 20px;
    color: var(--ink);
    transition: .3s ease
}

@media(hover: hover) {
    .event-card:hover {
        transform:translateY(-5px);
        border-color: #48bfd0;
        box-shadow: 0 22px 55px rgba(15,72,107,.12)
    }

    .event-card:hover .event-arrow {
        background: var(--btn-bg);
        border-color: transparent;
        color: #fff;
        transform: rotate(45deg)
    }
}

html[data-theme="dark"] .event-card {
    background: linear-gradient(145deg,#111d28,#0d1720)
}

@media(max-width: 900px) {
    .events-head,.events-grid {
        grid-template-columns:1fr
    }

    .events-head {
        gap: 20px
    }

    .event-card {
        min-height: 290px
    }

    .event-media {
        height: 230px
    }

    .event-copy {
        padding-top: 40px
    }
}

@media(max-width: 767px) {
    .brand-strip .partner-logo {
        width:130px;
        height: 64px
    }

    .brand-strip .logo-group {
        gap: 10px;
        padding-right: 10px
    }

    .brand-strip .logo-marquee-row {
        margin-top: 9px
    }

    .brand-strip .logo-marquee-row + .logo-marquee-row {
        margin-top: 10px
    }

    .events-head {
        margin-bottom: 26px
    }

    .event-card {
        min-height: 270px;
        padding: 24px;
        border-radius: 20px
    }

    .event-copy {
        padding-top: 34px;
        padding-right: 38px
    }

    .event-arrow {
        right: 20px;
        bottom: 20px;
        width: 40px;
        height: 40px
    }
}

@media(prefers-reduced-motion:reduce) {
    .brand-strip .logo-track {
        animation: none!important;
        transform: none!important
    }
}

@media(max-width: 767px) {
    .event-media {
        height:210px;
        margin: -24px -24px 22px
    }
}

.round-btn b .icon, .primary-btn .icon, .primary-btn i .icon, .text-link .icon, .footer-deck .icon, .footer-contact-btn .icon, .event-arrow {
    transform: rotate(0deg) !important;
    transition: transform .25s ease !important;
}

.round-btn:hover b .icon, .primary-btn:hover .icon, .primary-btn:hover i .icon, .text-link:hover .icon, .footer-deck:hover .icon, .footer-contact-btn:hover .icon, a:hover .event-arrow {
    transform: rotate(45deg) !important;
}

.mobile-nav-logo, .mobile-nav-overlay {
    display: none;
}

@media (max-width: 1100px) {
    body.mobile-menu-open {
        overflow:hidden;
    }

    .header {
        z-index: 10020;
    }

    .header .menu-toggle {
        display: grid;
        position: relative;
        z-index: 10031;
        border: 0 !important;
        outline: 0;
        box-shadow: none;
        overflow: hidden;
    }

    .header .menu-toggle > svg {
        display: none;
    }

    .header .menu-toggle::before, .header .menu-toggle::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 20px;
        height: 2px;
        border-radius: 4px;
        background: currentColor;
        transition: transform .25s ease, margin .25s ease;
        transform: translate(-50%,-50%);
    }

    .header .menu-toggle::before {
        margin-top: -4px;
    }

    .header .menu-toggle::after {
        margin-top: 4px;
    }

    body.mobile-menu-open .header .menu-toggle::before {
        margin-top: 0;
        transform: translate(-50%,-50%) rotate(45deg);
    }

    body.mobile-menu-open .header .menu-toggle::after {
        margin-top: 0;
        transform: translate(-50%,-50%) rotate(-45deg);
    }

    .mobile-nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 10010;
        background: rgba(0,0,0,.58);
        -webkit-backdrop-filter: blur(7px);
        backdrop-filter: blur(7px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .28s ease, visibility .28s ease;
    }

    body.mobile-menu-open .mobile-nav-overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .header .nav, .header .nav.is-open {
        display: flex;
        position: fixed !important;
        z-index: 10030;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        bottom: 0;
        width: min(84vw,360px);
        height: 100dvh;
        padding: 28px 26px 34px !important;
        flex-direction: column;
        flex-wrap: nowrap !important;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #101b28;
        box-shadow: -20px 0 50px rgba(0,0,0,.22);
        transform: translateX(105%);
        visibility: hidden;
        pointer-events: none;
        transition: transform .3s ease, visibility .3s ease;
        overflow-y: auto;
    }

    .header .nav.is-open {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
    }

    html[data-theme="light"] .header .nav, html[data-theme="light"] .header .nav.is-open {
        background: #fff;
        border: 0 !important;
    }

    .header .nav .mobile-nav-logo {
        display: flex;
        width: max-content;
        margin: 0 0 32px;
        padding: 0 !important;
        border: 0 !important;
    }

    .header .nav .mobile-nav-logo::after {
        display: none !important;
    }

    .header .nav .mobile-nav-logo img {
        display: block;
        width: 104px;
        height: 52px;
        object-fit: contain;
    }

    .header .nav > a:not(.mobile-nav-logo) {
        display: flex;
        align-items: center;
        min-height: 48px;
        width: 100%;
        padding: 10px 0 !important;
        margin: 0;
        border: 0 !important;
        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;
        line-height: 1.35;
    }

    .header .nav > a:not(.mobile-nav-logo)::after {
        bottom: 5px;
    }
}

@media (max-width: 767px) {
    .header {
        border:0 !important;
    }

    .header-inner {
        gap: 10px;
    }

    .header .menu-toggle {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
    }

    .header .nav, .header .nav.is-open {
        width: min(88vw,340px);
        padding: 24px 22px 30px !important;
    }

    h1,h2,h3,h4,p,a,span {
        overflow-wrap: normal;
        word-break: normal;
    }
}

@media (max-width: 767px) {
    .hero {
        padding-top: 72px;
        overflow: hidden;
    }

    .hero-grid {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        padding-top: 32px;
        gap: 28px;
    }

    .hero-copy {
        width: 100%;
        position: relative;
        z-index: 3;
    }

    .hero-title {
        font-size: 57px !important;
        line-height: 1.09 !important;
        letter-spacing: -.025em !important;
    }

    .hero-text {
        max-width: 100%;
    }

    .hero-visual {
        width: 100%;
        height: 500px !important;
        min-height: 500px;
        margin-top: 0 !important;
        position: relative;
        overflow: visible;
    }

    .hero-phone {
        position: absolute;
        left: 50% !important;
        top: 0 !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
    }

    .experience-strip {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 0 !important;
        padding: 18px 14px !important;
    }

    .experience-copy {
        grid-column: 1 / -1;
    }

    .experience-item {
        min-width: 100%;
        padding: 14px !important;
        width: 100%;
        max-width: 100%;
        grid-column: 1 / -1;
    }

    .experience-item:first-of-type {
        grid-column: auto !important;
    }

    .experience-item:nth-of-type(1) {
        bord; }

    .experience-item strong {
        font-size: 30px !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
    }

    .experience-item span {
        font-size: 14px !important;
        overflow-wrap: normal;
        word-break: normal;
    }

    .benefit-main {
        min-height: 520px !important;
    }

    .benefit-main .benefit-copy {
        position: relative;
        z-index: 3;
        padding: 24px 20px 0 !important;
    }

    .benefit-main h3 {
        font-size: 30px !important;
        line-height: 1.09 !important;
    }

    .benefit-main .benefit-copy p br {
        display: none;
    }

    .benefits-grid .benefit-main > img {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: 330px !important;
        max-height: 330px !important;
        margin-top: 12px !important;
        object-fit: contain !important;
        transform: none !important;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 34px !important;
    }

    .footer-contact-line > span:last-child {
        min-width: 0;
    }

    .footer-contact-line small,.footer-contact-line b,.newsletter-col h4,.newsletter-col p {
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .footer-contact-line small {
        font-size: 15px !important;
    }

    .footer-contact-line b {
        font-size: 14px !important;
    }
}

@media (max-width: 390px) {
    .hero-visual {
        height: 470px !important;
        min-height: 470px;
    }

    .hero-phone {
        width: 210px !important;
        height: 424px !important;
    }
}

/* REQUESTED SERVICES DARK BACKGROUND FIX */
html[data-theme="dark"] .services-section {
    background: #0b1118;
}

html[data-theme="dark"] .services-section .service-heading {
    color: #f5fbff;
}

html[data-theme="dark"] .services-section .service-panel {
    background: #101922;
    border-color: #233442;
}

html[data-theme="dark"] .services-section .service-panel-2 {
    background: #111c29;
}

html[data-theme="dark"] .services-section .service-panel-3 {
    background: #10201d;
}

html[data-theme="dark"] .services-section .service-panel:nth-of-type(4) {
    background: #101922;
}

.partner-logo {
    width: 80px;
    height: 80px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 16px;
    overflow: hidden;
    box-sizing: border-box;
}

.partner-logo img {
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 10px;
    display: block;
}

/* ===== VLINE INNER PAGES ===== */
.inner-page main {
    overflow: hidden
}

.inner-hero {
    padding: 170px 0 82px;
    border-bottom: 1px solid var(--line)
}

.inner-breadcrumb {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 26px;
    font-size: 14px;
    opacity: .7;
    text-transform: uppercase;
    font-weight: 600;
}

.inner-breadcrumb a {
    color: inherit;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600 !important;
}

.inner-hero h1 {
    font-family: var(--heading-font,inherit);
    font-size: clamp(48px,7vw,96px);
    line-height: .95;
    margin: 0;
    max-width: 1050px
}

.inner-hero p {
    font-size: 16px !important;
    line-height: 1.7;
    margin: 26px 0 0;
    opacity: .78
}

.inner-section {
    padding: 100px 0
}

.inner-section-head {
    /* max-width:850px;
     */
    margin-bottom: 44px;
    text-align: center;
}

.inner-section-head h2 {
    font-size: clamp(34px,5vw,64px);
    line-height: 1;
    margin: 22px 0 21px;
}

.inner-section-head p {
    line-height: 1.75;
    opacity: .76
}

.about-founder {
    display: grid;
    grid-template-columns: minmax(300px,0.8fr) 2.2fr;
    gap: 70px;
    align-items: center
}

.about-founder-media img {
    display: block;
    border-radius: 24px;
    object-fit: cover
}

.founder-role {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .12em;
    opacity: .65;
    font-weight: 700;
}

.founder-copy h2 {
    font-size: clamp(38px,5vw,68px);
    margin: 15px 0 15px;
}

.founder-copy p {
    line-height: 1.8;
    opacity: .82;
    margin-bottom: 10px;
}

.founder-tagline {
    font-size: 18px!important;
    font-weight: 700;
    opacity: 1!important;
    margin-top: 26px!important
}

.social-links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 22px 0
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 46px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    font-weight: 700
}

.inner-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px
}

.inner-card {
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 30px;
    background: var(--card-bg,transparent)
}

.inner-card h3 {
    font-size: 24px;
    margin: 0 0 14px
}

.inner-card p {
    line-height: 1.7;
    opacity: .76;
    margin: 0
}

.event-detail {
    margin-bottom: 90px
}

.event-title-row {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: end;
    margin-bottom: 28px
}

.event-title-row h2 {
    font-size: clamp(34px,5vw,62px);
    margin: 0
}

.event-title-row p {
    margin: 0;
    opacity: .7
}

.event-gallery {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px
}

.event-gallery img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 18px;
    display: block
}

.event-gallery img:nth-child(5n+1) {
    grid-column: span 2;
    height: 430px
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 22px
}

.team-card {
    border: 1px solid var(--line);
    border-radius: 22px;
    overflow: hidden
}

.team-card img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    display: block
}

.team-card-body {
    padding: 24px
}

.team-card h2,.team-card h3 {
    margin: 0 0 8px
}

.team-card button {
    margin-top: 16px;
    border: 1px solid var(--line);
    background: transparent;
    color: inherit;
    border-radius: 999px;
    padding: 11px 17px;
    cursor: pointer
}

.team-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.72);
    display: none;
    place-items: center;
    padding: 24px
}

.team-modal:target {
    display: grid
}

.team-modal-box {
    width: min(760px,100%);
    max-height: 85vh;
    overflow: auto;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 34px
}

.team-modal-close {
    float: right;
    color: inherit;
    text-decoration: none;
    font-size: 28px
}

.contact-layout {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 60px
}

.contact-list a {
    display: block;
    color: inherit;
    text-decoration: none;
    margin: 12px 0
}

.static-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

.static-form label {
    font-size: 13px
}

.static-form input,.static-form textarea {
    width: 100%;
    margin-top: 7px;
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: transparent;
    color: inherit
}

.static-form textarea {
    min-height: 150px;
    resize: vertical
}

.static-form .full {
    grid-column: 1/-1
}

.static-form button {
    border: 0;
    border-radius: 999px;
    padding: 12px 30px;
    font-weight: 700
}

.footer-socials {
    display: flex;
    gap: 10px;
    margin: 0 0 16px
}

.footer-socials a {
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: inherit;
    text-decoration: none;
    font-weight: 800
}

.home-event-strip {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px
}

.home-event-strip img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 18px
}

.home-event-strip h3 {
    margin: 14px 0 4px
}

.home-event-strip p {
    margin: 0;
    opacity: .68
}

.footer-deck .icon,.event-arrow {
    display: none!important
}

@media(max-width: 767px) {
    .inner-hero {
        padding:125px 0 60px
    }

    .inner-section {
        padding: 70px 0
    }

    .about-founder,.contact-layout {
        grid-template-columns: 1fr;
        gap: 34px
    }

    .inner-grid,.team-grid,.home-event-strip {
        grid-template-columns: 1fr
    }

    .event-title-row {
        display: block
    }

    .event-title-row p {
        margin-top: 10px
    }

    .event-gallery {
        grid-template-columns: 1fr 1fr
    }

    .event-gallery img,.event-gallery img:nth-child(5n+1) {
        height: 220px;
        grid-column: auto
    }

    .static-form {
        grid-template-columns: 1fr
    }

    .static-form .full {
        grid-column: auto
    }
}

/* ===== Inner pages refinement 2026-09-21 ===== */
.inner-page .inner-hero h1,.inner-page .inner-section-head h2 {
    font-family: var(--heading-font,inherit);
    font-size: clamp(42px,5.2vw,72px);
    line-height: 1.02;
}

.inner-page .inner-hero h1 {
    max-width: 1100px
}

.inner-soft-section {
    background: color-mix(in srgb,currentColor 3%,transparent)
}

.events-view-all {
    display: flex;
    justify-content: center;
    margin-top: 38px
}

.home-events-grid {
    grid-template-columns: repeat(3,1fr)
}

.event-showcase-stack {
    display: grid;
    gap: 34px
}

.event-showcase-card {
    border: 1px solid var(--line);
    border-radius: 28px;
    padding: 30px;
    overflow: hidden
}

.event-showcase-copy {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 24px
}

.event-showcase-copy h2 {
    margin: 20px 0px 0px;
}

.event-showcase-copy p {
    max-width: 360px;
    opacity: .7;
    line-height: 1.6
}

.event-photo-slider {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
    scrollbar-width: thin
}

.event-photo-slider a {
    flex: 0 0:min(31%,390px);
    scroll-snap-align: start;
    overflow: hidden;
    border-radius: 18px
}

.event-photo-slider img {
    width: 100%;
    display: block;
    transition: transform .4s ease
}

.event-photo-slider a:hover img {
    transform: scale(1.035)
}

.solution-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px
}

.feature-detail-card {
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 32px;
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 28px;
    align-items: center
}

.feature-detail-card img {
    width: 100%;
    height: 100px;
    object-fit: contain
}

.feature-detail-card h3 {
    font-size: 27px;
    margin: 0 0 10px
}

.feature-detail-card p {
    margin: 0;
    line-height: 1.7;
    opacity: .75
}

.service-detail-list {
    display: grid;
    gap: 22px
}

.service-detail-row {
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: 40px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 26px;
    padding: 38px
}

.service-detail-row:nth-child(even)>div {
    order: 2
}

.service-detail-row:nth-child(even)>img {
    order: 1
}

.service-detail-row span {
    font-size: 13px;
    opacity: .55
}

.service-detail-row h3 {
    font-size: clamp(30px,4vw,48px);
    margin: 10px 0 15px
}

.service-detail-row p {
    line-height: 1.75;
    opacity: .75;
    max-width: 700px
}

.service-detail-row img {
    width: 100%;
    height: 230px;
    object-fit: contain
}

.partner-page-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    border: 1px solid var(--line);
    border-radius: 22px;
    overflow: hidden
}

.partner-page-logo {
    min-height: 150px;
    display: grid;
    place-items: center;
    padding: 26px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #fff
}

.partner-page-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.team-profile-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 24px
}

.team-profile-card {
    border: 1px solid var(--line);
    border-radius: 24px;
    overflow: hidden
}

.team-profile-card>a {
    display: block;
    background: color-mix(in srgb,currentColor 5%,transparent)
}

.team-profile-card img,.team-photo-placeholder {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: contain;
    display: block
}

.team-photo-placeholder {
    display: grid;
    place-items: center;
    font-size: 42px;
    font-weight: 800;
    opacity: .25
}

.team-profile-copy {
    padding: 22px
}

.team-profile-copy h2 {
    font-size: 25px!important;
    margin: 0 0 5px
}

.team-profile-copy p {
    margin: 0;
    opacity: .65
}

.member-socials {
    display: flex;
    gap: 8px;
    margin-top: 15px;
    justify-content: center;
}

.member-socials a,.member-socials span {
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: inherit;
    text-decoration: none;
    font-weight: 700
}

.team-modal {
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(8px)
}

.team-modal-backdrop {
    position: absolute;
    inset: 0
}

.team-modal-box {
    position: relative;
    z-index: 2
}

.team-modal-profile {
    width: min(980px,100%);
    padding: 0;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    overflow: hidden
}

.team-modal-photo {
    background: #090d12
}

.team-modal-photo img {
    width: 100%;
    height: 100%;
    min-height: 560px;
    object-fit: contain;
    display: block
}

.team-modal-content {
    padding: 48px
}

.team-modal-content h2 {
    font-size: 48px!important;
    margin: 14px 0 5px
}

.team-modal-content h3 {
    margin: 0 0 25px;
    opacity: .65
}

.team-modal-content p {
    line-height: 1.75
}

.team-modal-close {
    position: absolute;
    right: 18px;
    top: 14px;
    z-index: 4;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--line);
    float: none
}

.about-team-preview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px
}

.about-team-lead,.about-team-more {
    border: 1px solid var(--line);
    border-radius: 24px;
    overflow: hidden;
    color: inherit;
    text-decoration: none
}

.about-team-lead img {
    width: 100%;
    height: 420px;
    object-fit: contain;
    display: block;
    background: color-mix(in srgb,currentColor 5%,transparent)
}

.about-team-lead div {
    padding: 22px
}

.about-team-lead h3 {
    font-size: 28px;
    margin: 0
}

.about-team-lead p {
    margin: 5px 0 0;
    opacity: .65
}

.about-team-more {
    padding: 38px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    min-height: 300px
}

.about-team-more span {
    opacity: .6
}

.about-team-more strong {
    font-size: clamp(32px,4vw,54px);
    line-height: 1.05;
    margin-top: 10px
}

.contact-methods {
    display: grid;
    gap: 12px
}

.contact-methods a {
    display: flex;
    gap: 15px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px;
    color: inherit;
    text-decoration: none
}

.contact-method-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--accent,#15bff1);
    color: #061018
}

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

.contact-methods small {
    opacity: .55;
    margin-bottom: 3px
}

.contact-form-card {
    border: 1px solid var(--line);
    border-radius: 26px;
    padding: 30px
}

.static-form input,.static-form textarea {
    box-shadow: none!important;
    outline: none!important
}

.static-form input:focus,.static-form textarea:focus {
    border-color: currentColor
}

.footer-socials a svg {
    width: 18px;
    height: 18px
}

.contact-socials a {
    padding: 0;
    width: 46px
}

.contact-socials a svg {
    width: 18px;
    height: 18px
}

.inner-page .icon,.inner-page .footer-contact-icon,.inner-page .contact-method-icon {
    opacity: 1
}

@media(max-width: 991px) {
    .partner-page-grid {
        grid-template-columns:repeat(3,1fr)
    }

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

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

    .event-showcase-copy {
        display: block
    }

    .event-photo-slider a {
        flex-basis: 46%
    }
}

@media(max-width: 767px) {
    .inner-page .inner-hero h1,.inner-page .inner-section-head h2 {
        font-size:38px
    }

    .home-events-grid {
        grid-template-columns: 1fr
    }

    .event-showcase-card {
        padding: 18px
    }

    .event-photo-slider a {
        flex-basis: 82%
    }

    .event-photo-slider img {
        height: 240px
    }

    .service-detail-row {
        grid-template-columns: 1fr;
        padding: 24px
    }

    .service-detail-row:nth-child(even)>div,.service-detail-row:nth-child(even)>img {
        order: initial
    }

    .service-detail-row img {
        height: 180px
    }

    .feature-detail-card {
        grid-template-columns: 80px 1fr;
        padding: 22px
    }

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

    .partner-page-logo {
        min-height: 115px;
        padding: 18px
    }

    .team-profile-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 12px
    }

    .team-profile-copy {
        padding: 16px
    }

    .team-profile-copy h2 {
        font-size: 20px!important
    }

    .team-modal-profile {
        grid-template-columns: 1fr
    }

    .team-modal-photo img {
        min-height: 0;
        height: 300px
    }

    .team-modal-content {
        padding: 28px
    }

    .team-modal-content h2 {
        font-size: 36px!important
    }

    .about-team-preview {
        grid-template-columns: 1fr
    }

    .about-team-lead img {
        height: 340px
    }

    .contact-form-card {
        padding: 20px
    }
}

/* ===== 2026-09-21 precision inner-page refinements ===== */
.solution-network .inner-section-head strong {
    display: block;
    margin-top: 22px;
    font-size: 18px
}

.solution-six-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px
}

.solution-network-card {
    position: relative;
    min-height: 310px;
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: 26px;
    overflow: hidden;
    background: color-mix(in srgb,var(--bg) 92%,#15bff0 8%)
}

.solution-network-card>span {
    font-size: 12px;
    letter-spacing: .12em;
    opacity: .55
}

.solution-network-card img {
    display: block;
    width: 120px;
    height: 120px;
    object-fit: contain;
    margin: 24px 0
}

.solution-network-card h3 {
    font-size: 25px;
    line-height: 1.15;
    margin: 0;
    max-width: 320px
}

.team-intro {
    text-align: center;
    margin-left: auto;
    margin-right: auto
}

.team-reference-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 42px 28px
}

.team-reference-card {
    text-align: center;
}

.team-face {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    overflow: visible;
    background: color-mix(in srgb,currentColor 6%,transparent)
}

.team-face img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    display: block
}

.team-plus {
    position: absolute;
    right: 3%;
    bottom: 10%;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #18bff0;
    color: #07121c;
    font-size: 25px;
    font-weight: 500;
    border: 5px solid var(--bg)
}

.team-reference-card h3 {
    font-size: 16px;
    margin: 18px 0 5px
}

.team-reference-card>p {
    margin: 0;
    opacity: .65;
    font-size: 14px
}

.team-reference-card .member-socials {
    margin-top: 12px
}

.member-socials svg {
    width: 20px;
    height: 20px;
}

.team-popup-reference {
    position: relative;
    z-index: 2;
    width: min(980px,100%);
    max-height: 86vh;
    display: grid;
    grid-template-columns: 40% 60%;
    overflow: hidden;
    background: var(--bg);
    border-radius: 24px;
}

.team-popup-left {
    background: #080d12;
    display: flex;
    flex-direction: column
}

.team-popup-left>img {
    width: 100%;
    height: 460px;
    object-fit: cover;
    object-position: center top;
}

.team-popup-social {
    padding: 10px;
    display: flex;
    gap: 10px
}

.team-popup-social a {
    color: #fff;
    text-decoration: none;
    border: 1px solid #39434d;
    border-radius: 999px;
    padding: 6px 16px;
}

.team-popup-copy {
    padding: 46px
}

.team-popup-copy h2 {
    font-size: clamp(38px,5vw,62px);
    margin: 10px 0 4px
}

.team-popup-copy h3 {
    margin: 0 0 24px;
    opacity: .6
}

.team-popup-scroll {
    max-height: 48vh;
    overflow: auto;
    padding-right: 12px
}

.team-popup-scroll p {
    line-height: 1.75;
    font-weight: 400;
    color: #484545;
    margin-bottom: 10px;
}

.team-popup-scroll blockquote {
    font-size: 20px;
    font-weight: 700;
    margin: 24px 0 0
}

.team-popup-close {
    position: absolute;
    right: 18px;
    top: 18px;
    z-index: 5;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #ffffff;
    text-decoration: none;
    font-size: 30px;
    background: var(--brand);
}

.about-five {
    grid-template-columns: repeat(5,1fr);
    gap: 22px
}

.center-action {
    display: flex;
    justify-content: center;
    margin-top: 42px
}

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

.mission-card {
    border: 1px solid var(--line);
    border-radius: 28px;
    padding: 25px;
    min-height: 420px;
    background: color-mix(in srgb,var(--bg) 94%,#18bff0 6%)
}

.mission-card img {
    width: 150px;
    height: 130px;
    object-fit: contain;
    margin-bottom: 28px
}

.mission-card>span {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
}

.mission-card h3 {
    font-size: clamp(24px,3vw,24px);
    line-height: 34px;
    margin: 12px 0 18px;
    text-transform: capitalize !important;
}

.mission-card p {
    line-height: 1.75;
    opacity: .72;
}

.event-seven-row {
    overflow-x: auto;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 68px)/5);
    gap: 14px;
    padding: 0 0 12px;
    scrollbar-width: none
}

.event-seven-row:hover {
    scrollbar-width: thin
}

.event-seven-row::-webkit-scrollbar {
    height: 0
}

.event-seven-row:hover::-webkit-scrollbar {
    height: 7px
}

.event-seven-row::-webkit-scrollbar-thumb {
    background: #18bff0;
    border-radius: 20px
}

.event-seven-row a {
    width: auto;
    min-width: 0
}

.event-seven-row img {
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 16px
}

.partner-eight {
    grid-template-columns: repeat(8,1fr)!important
}

.partner-eight .partner-page-logo {
    min-height: 120px;
    padding: 18px
}

.partner-eight .partner-page-logo img {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-sizing: border-box;
}

.event-meta {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
    letter-spacing: .1em;
    opacity: .65
}

@media(max-width: 1100px) {
    .team-reference-grid {
        grid-template-columns:repeat(3,1fr)
    }

    .about-five {
        grid-template-columns: repeat(3,1fr)
    }

    .partner-eight {
        grid-template-columns: repeat(5,1fr)!important
    }

    .event-seven-row {
        grid-auto-columns: 22%
    }
}

@media(max-width: 767px) {
    .solution-six-grid {
        grid-template-columns:1fr
    }

    .team-reference-grid,.about-five {
        grid-template-columns: repeat(2,1fr);
        gap: 28px 14px
    }

    .team-reference-card h3 {
        font-size: 17px
    }

    .team-plus {
        width: 32px;
        height: 32px
    }

    .team-popup-reference {
        grid-template-columns: 1fr
    }

    .team-popup-left>img {
        height: 280px
    }

    .team-popup-copy {
        padding: 26px
    }

    .team-popup-scroll {
        max-height: 35vh
    }

    .mission-vision-grid {
        grid-template-columns: 1fr
    }

    .mission-card {
        padding: 26px;
        min-height: 0
    }

    .event-seven-row {
        grid-auto-columns: 72%
    }

    .event-seven-row img {
        height: 240px!important
    }

    .partner-eight {
        grid-template-columns: repeat(2,1fr)!important
    }

    .site-nav {
        gap: 10px!important
    }

    .site-nav a {
        white-space: nowrap
    }

    .inner-hero h1,.inner-section-head h2 {
        font-size: 38px!important
    }
}

/* ===== Final static-page pass: menu, team interactions, events, contact ===== */
.nav-dropdown {
    position: relative;
    display: flex;
    align-items: center
}

.nav-dropdown-toggle {
    appearance: none;
    text-transform: uppercase;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    padding: 8px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap
}

.nav-chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform .25s ease
}

.nav-dropdown-menu {
    position: absolute;
    left: 50%;
    top: calc(100% + 14px);
    transform: translate(-50%,10px);
    min-width: 210px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--bg);
    box-shadow: 0 18px 45px rgba(0,0,0,.16);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease,transform .25s ease,visibility .25s ease;
    z-index: 40
}

.nav-dropdown-menu a {
    display: block!important;
    padding: 11px 13px!important;
    border-radius: 10px;
    white-space: nowrap
}

.nav-dropdown.is-open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%,0)
}

.nav-dropdown.is-open .nav-chevron {
    transform: rotate(180deg)
}

/* team cards inspired by supplied reference, adapted to VLINE MEDIA */
.team-reference-card {
    position: relative
}

.team-face {
    isolation: isolate;
    transition: transform .45s cubic-bezier(.2,.75,.2,1)
}

.team-face::before {
    content: "";
    position: absolute;
    inset: 7%;
    border-radius: 50%;
    background: linear-gradient(145deg,rgba(20,193,239,.16),rgba(145,63,255,.18));
    transform: scale(.82);
    opacity: 0;
    transition: transform .45s cubic-bezier(.2,.75,.2,1),opacity .35s ease;
    z-index: -1
}

.team-face img {
    transition: transform .5s cubic-bezier(.2,.75,.2,1),filter .4s ease;
    box-shadow: 0 14px 35px rgba(0,0,0,.12)
}

.team-arrow {
    position: absolute;
    right: 2%;
    bottom: 9%;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #ffffff;
    border: 5px solid var(--bg);
    transition: transform .4s cubic-bezier(.2,.75,.2,1),background .3s ease;
    color .3s ease; z-index: 3;
    background: var(--brand);
}

.team-arrow .icon {
    width: 22px;
    height: 22px;
    transition: transform .35s ease
}

.team-reference-card:hover .team-face {
    transform: translateY(-5px)
}

.team-reference-card:hover .team-face::before {
    opacity: 1;
    transform: scale(1.08)
}

.team-reference-card:hover .team-face img {
    transform: scale(.94)
}

.team-reference-card:hover .team-arrow {
    transform: translate(5px, -5px) rotate( 82deg);
}

.team-reference-card:hover .team-arrow .icon {
    transform: rotate(-45deg)
}

.team-reference-card h3,.team-reference-card>p {
    transition: transform .35s ease,opacity .35s ease
}

.team-reference-card:hover h3,.team-reference-card:hover>p {
    transform: translateY(-2px)
}

/* animated target-based static modal */
.team-modal {
    display: grid!important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease,visibility .28s ease
}

.team-modal:target {
    opacity: 1;
    visibility: visible;
    pointer-events: auto
}

.team-modal .team-popup-reference {
    opacity: 0;
    transform: translateY(28px) scale(.97);
    transition: opacity .38s ease .04s,transform .38s cubic-bezier(.2,.75,.2,1) .04s;
}

.team-modal:target .team-popup-reference {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.team-popup-close span {
    position: absolute;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 4px
}

.team-popup-close span:first-child {
    transform: rotate(45deg)
}

.team-popup-close span:last-child {
    transform: rotate(-45deg)
}

.team-popup-close {
    transition: transform .25s ease,background .25s ease
}

.team-popup-close:hover {
    transform: rotate(90deg);
}

.team-popup-social a {
    display: inline-flex;
    align-items: center;
    gap: 8px
}

.team-popup-social svg {
    width: 17px;
    height: 17px
}

/* consistent inner page typography & breadcrumb rhythm */
.inner-page .inner-hero {
    padding-top: 160px;
    padding-bottom: 74px
}

.inner-page .inner-breadcrumb {
    margin-bottom: 22px;
    flex-wrap: wrap;
    row-gap: 6px
}

.inner-page .inner-hero h1,.inner-page .inner-section-head h2 {
    font-size: clamp(42px,5.2vw,72px)!important
}

.inner-page .inner-section-head h2 {
}

/* solution cards */
.solution-six-grid {
    align-items: stretch
}

.solution-network-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    gap: 14px 22px;
    align-items: start;
    min-height: 330px;
    background: linear-gradient(145deg,color-mix(in srgb,var(--bg) 92%,#18bff0 8%),color-mix(in srgb,var(--bg) 95%,#7b42ff 5%));
    transition: transform .35s ease,border-color .35s ease
}

.solution-network-card:hover {
    transform: translateY(-7px);
    border-color: #18bff0
}

.solution-card-number {
    font-size: 41px;
    letter-spacing: .16em;
    padding-top: 6px;
    font-weight: 800;
}

.solution-card-visual {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
    width: 128px;
    height: 128px;
    border-radius: 24px;
    background: color-mix(in srgb,var(--bg) 80%,#18bff0 20%);
    display: grid;
    place-items: center;
    padding: 18px
}

.solution-card-visual img {
    width: 100%!important;
    height: 100%!important;
    margin: 0!important
}

.solution-card-copy {
    grid-column: 1 / -1;
    align-self: end;
    padding-top: 10px;
}

.solution-card-copy h3 {
    font-size: 20px;
    margin: 0 0 12px;
    text-transform: capitalize !important;
}

.solution-card-copy p {
    margin: 0;
    line-height: 1.65;
    opacity: .72
}

/* service list + details */
.service-list-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 22px
}

.service-list-card {
    position: relative;
    display: grid;
    grid-template-columns: 72px 140px 1fr;
    gap: 24px;
    align-items: center;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 26px;
    overflow: hidden;
    transition: transform .35s ease,border-color .35s ease;
    background: color-mix(in srgb,var(--bg) 96%,#18bff0 4%)
}

.service-list-card:hover {
    transform: translateY(-5px);
    border-color: #18bff0
}

.service-list-number {
    font-size: 40px;
    letter-spacing: .14em;
    align-self: start;
    font-weight: 800;
    font-family: 'Anton';
    opacity: 0.6;
}

.service-list-visual {
    height: 140px;
    border-radius: 22px;
    background: color-mix(in srgb,var(--bg) 85%,#18bff0 15%);
    display: grid;
    place-items: center;
    padding: 22px
}

.service-list-visual img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.service-list-copy h2 {
    font-size: 30px!important;
    line-height: 1.08;
    margin: 0 0 12px
}

.service-list-copy p {
    line-height: 1.65;
    opacity: .72;
    margin: 0 0 20px
}

.service-list-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
    font-weight: 700
}

.service-list-link .icon {
    width: 17px;
    height: 17px
}

.service-detail-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 56px;
    align-items: center
}

.service-detail-hero-visual {
    min-height: 320px;
    border: 1px solid var(--line);
    border-radius: 30px;
    display: grid;
    place-items: center;
    padding: 44px;
    background: color-mix(in srgb,var(--bg) 93%,#18bff0 7%)
}

.service-detail-hero-visual img {
    max-width: 320px;
    width: 100%;
    height: 250px;
    object-fit: contain
}

.service-detail-overview {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 70px
}

.service-detail-body p {
    font-size: 17px;
    line-height: 1.8;
    opacity: .8
}

.service-benefit-grid,.service-process-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 18px
}

.service-benefit-grid article,.service-process-grid article {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 22px;
    min-height: 207px;
    background: color-mix(in srgb,var(--bg) 95%,#18bff0 5%)
}

.service-benefit-grid article>span,.service-process-grid article>b {
    display: block;
    font-size: 40px;
    letter-spacing: .14em;
    margin-bottom: 28px;
    font-family: 'Anton';
    opacity: 0.6;
}

.service-benefit-grid h3,.service-process-grid h3 {
    font-size: 18px;
    margin: 0 0 10px;
    line-height: 26px;
}

.service-benefit-grid p,.service-process-grid p {
    margin: 0;
    line-height: 1.65;
    opacity: .7
}

.service-detail-cta {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    padding: 38px;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: linear-gradient(120deg,color-mix(in srgb,var(--bg) 85%,#18bff0 15%),color-mix(in srgb,var(--bg) 90%,#7b42ff 10%))
}

.service-detail-cta h2 {
    font-size: clamp(34px,4.5vw,58px);
    line-height: 1.02;
    margin: 10px 0 0;
    max-width: 780px
}

/* partners */
.partner-eight {
    border-radius: 24px;
    background: #fff
}

.partner-eight .partner-page-logo {
    transition: transform .28s ease,box-shadow .28s ease;
    background: #fff
}

.partner-eight .partner-page-logo:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0,0,0,.08);
    z-index: 2
}

/* events: fixed scrollbar gutter prevents layout jump */
.event-showcase-card {
    padding: 15px;
}

.event-gallery-shell {
    position: relative
}

.event-auto-hint {
    position: absolute;
    right: 0;
    top: -28px;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .55
}

.event-seven-row {
    scrollbar-gutter: stable;
    height: auto;
    padding-bottom: 14px;
    scroll-behavior: smooth
}

.event-seven-row::-webkit-scrollbar {
    height: 7px
}

.event-seven-row::-webkit-scrollbar-track {
    background: transparent
}

.event-seven-row::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 20px;
    transition: background .25s ease
}

.event-seven-row:hover::-webkit-scrollbar-thumb {
    background: #18bff0
}

.event-seven-row {
    scrollbar-color: transparent transparent
}

.event-seven-row:hover {
    scrollbar-color: #18bff0 transparent
}

.event-seven-row img {
    height: 300px!important;
}

/* contact */
.contact-info-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 20px
}

.contact-company-socials,.footer-company-socials {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px
}

.contact-company-socials a,.footer-company-socials a {
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: inherit;
    text-decoration: none;
    transition: transform .25s ease,border-color .25s ease,background .25s ease;
    background: var(--brand);
}

.contact-company-socials a:hover,.footer-company-socials a:hover {
    transform: translateY(-3px);
    border-color: transparent;
    background: var(--brand);
}

.contact-company-socials svg,.footer-company-socials svg {
    width: 18px;
    height: 18px;
    color: #fff;
}

.contact-form-card {
    padding: 34px!important;
    align-content: start;
    box-shadow: none!important
}

.form-title {
    grid-column: 1/-1;
    margin-bottom: 8px
}

.form-title span {
    font-size: 14px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.form-title h2 {
    margin: 10px 0 0;
}

.static-form input,.static-form textarea {
    border-radius: 8px!important;
    min-height: 42px;
    box-shadow: none!important;
    outline: 0!important
}

.static-form textarea {
    min-height: 89px!important;
}

.static-form input:focus,.static-form textarea:focus {
    border-color: #18bff0!important;
    box-shadow: none!important;
    outline: 0!important
}

.contact-card-row {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 18px;
    margin-top: 28px
}
.contact-detail-card strong a {
    font-weight: 800;
}
.contact-detail-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: color-mix(in srgb,var(--bg) 96%,#18bff0 4%)
}

.contact-detail-card .contact-method-icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    color: #fff;
    background: var(--brand);
}

.contact-detail-card svg {
    width: 26px;
    height: 26px;
}

.contact-detail-card small,.contact-detail-card strong {
    display: block
}

.contact-detail-card small {
    font-size: 12px;
    opacity: .55;
    margin-bottom: 4px
}

.contact-detail-card strong {
    font-size: 15px
}

/* homepage event section keeps original visual flow while using new event content */
.home-event-feature-grid {
    display: grid;
    grid-template-columns: 1.15fr .65fr;
    gap: 22px
}

.home-event-feature {
    position: relative;
    min-height: 520px;
    border-radius: 26px;
    overflow: hidden;
    background: #07090d;
    color: #fff
}

.home-event-feature-media {
    position: absolute;
    inset: 0;
    display: block
}

.home-event-feature-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease
}

.home-event-feature:hover .home-event-feature-media img {
    transform: scale(1.035)
}

.home-event-media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(0,0,0,.08) 30%,rgba(0,0,0,.86) 100%)
}

.home-event-feature-copy {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 28px;
    z-index: 2
}

.home-event-meta {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    font-size: 14px;
    letter-spacing: .1em;
    margin-bottom: 12px
}

.home-event-eyebrow {
    font-size: 14px;
    letter-spacing: .14em;
}

.home-event-feature h3 {
    font-size: clamp(30px,3vw,48px);
    line-height: 1;
    margin: 10px 0
}

.home-event-feature h3 a {
    color: #fff;
    text-decoration: none;
    font-size: 20px !important;
    font-weight: 800;
}

.home-event-feature p {
    max-width: 650px;
    line-height: 1.55
}

.home-event-round-link {
    position: absolute;
    right: 24px;
    bottom: 24px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    color: #081018
}

.home-event-round-link .icon {
    width: 18px;
    height: 18px
}

@media(max-width: 1200px) {
    .service-list-card {
        grid-template-columns:54px 110px 1fr
    }

    .service-list-copy h2 {
        font-size: 26px!important
    }

    .service-benefit-grid,.service-process-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width: 1100px) {
    .nav-dropdown {
        width:100%;
        display: block
    }

    .nav-dropdown-toggle {
        width: 100%;
        justify-content: space-between;
        padding: 14px 0
    }

    .nav-dropdown-menu {
        position: static;
        transform: none!important;
        min-width: 0;
        width: 100%;
        padding: 0 0 0 14px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: max-height .3s ease,padding .3s ease
    }

    .nav-dropdown.is-open .nav-dropdown-menu {
        max-height: 140px;
        padding-top: 4px;
        padding-bottom: 8px;
        pointer-events: auto
    }

    .nav-dropdown.is-open .nav-chevron {
        transform: rotate(180deg)
    }

    .nav-dropdown-menu a {
        padding: 9px 0!important
    }
}

@media(max-width: 991px) {
    .solution-six-grid {
        grid-template-columns:repeat(2,1fr)
    }

    .service-list-grid {
        grid-template-columns: 1fr
    }

    .service-detail-hero-grid,.service-detail-overview {
        grid-template-columns: 1fr;
        gap: 34px
    }

    .partner-eight {
        grid-template-columns: repeat(4,1fr)!important
    }

    .contact-card-row {
        grid-template-columns: 1fr
    }

    .home-event-feature-grid {
        grid-template-columns: 1fr
    }

    .home-event-feature {
        min-height: 470px
    }
}

@media(max-width: 767px) {
    .inner-page .inner-hero {
        padding-top:128px;
        padding-bottom: 56px
    }

    .inner-page .inner-breadcrumb {
        margin-bottom: 18px
    }

    .inner-page .inner-hero h1,.inner-page .inner-section-head h2 {
        font-size: 38px!important
    }

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

    .solution-network-card {
        min-height: 290px
    }

    .solution-card-visual {
        width: 104px;
        height: 104px
    }

    .team-reference-grid,.about-five {
        grid-template-columns: repeat(2,minmax(0,1fr))!important;
        gap: 30px 14px!important
    }

    .team-arrow {
        width: 36px;
        height: 36px;
        border-width: 4px
    }

    .team-reference-card h3 {
        font-size: 17px;
        margin-top: 14px
    }

    .team-reference-card>p {
        font-size: 12px
    }

    .member-socials {
        gap: 6px
    }

    .member-socials a {
        width: 32px;
        height: 32px
    }

    .team-modal {
        padding: 12px
    }

    .team-popup-reference {
        max-height: 92vh
    }

    .team-popup-left>img {
        height: 250px
    }

    .team-popup-social {
        padding: 16px
    }

    .team-popup-social a {
        padding: 8px 10px;
        font-size: 12px
    }

    .team-popup-copy {
        padding: 24px!important
    }

    .team-popup-copy h2 {
        font-size: 34px!important
    }

    .team-popup-scroll {
        max-height: 32vh
    }

    .mission-vision-grid {
        grid-template-columns: 1fr
    }

    .mission-card {
        min-height: 0
    }

    .service-list-card {
        grid-template-columns: 46px 1fr;
        padding: 20px;
        gap: 16px
    }

    .service-list-visual {
        grid-column: 2;
        height: 120px
    }

    .service-list-copy {
        grid-column: 1/-1
    }

    .service-list-copy h2 {
        font-size: 26px!important
    }

    .service-detail-hero-visual {
        min-height: 240px;
        padding: 28px
    }

    .service-detail-hero-visual img {
        height: 190px
    }

    .service-benefit-grid,.service-process-grid {
        grid-template-columns: 1fr
    }

    .service-detail-cta {
        align-items: flex-start;
        flex-direction: column;
        padding: 26px
    }

    .partner-eight {
        grid-template-columns: repeat(2,1fr)!important
    }
    .partner-eight .partner-page-logo img {
        width: 70px;
        height: 70px;
    }

    .event-showcase-card {
        padding: 20px
    }

    .event-showcase-copy h2 {
        font-size: 31px
    }

    .event-seven-row {
        grid-auto-columns: 72%!important
    }

    .event-seven-row img {
        height: 280px!important
    }

    .event-auto-hint {
        display: none
    }

    .contact-form-card {
        padding: 22px!important
    }

    .form-title h2 {
        font-size: 29px!important
    }

    .home-event-feature {
        min-height: 420px
    }

    .home-event-feature-copy {
        padding: 20px
    }

    .home-event-feature p {
        padding-right: 54px
    }

    .home-event-round-link {
        right: 18px;
        bottom: 18px
    }
}

/* Header disclosure: bridge the hover gap and keep icons independent of page SVG defs. */
.nav-dropdown-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -15px;
    height: 15px
}

.header .nav-dropdown-menu a {
    color: var(--text);
    font-size: 13px;
    line-height: 1.5
}

.header .nav-dropdown-menu a::after {
    display: none
}

.header .nav-dropdown-menu a:hover,.header .nav-dropdown-menu a:focus-visible {
    background: var(--panel2);
    color: var(--text);
    -webkit-text-fill-color: currentColor
}

.nav-dropdown-toggle:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 5px;
    border-radius: 4px
}

html[data-theme] .header .round-btn b {
    background: #fff;
    color: #0756e8
}

html[data-theme] .header .round-btn b .icon {
    stroke: currentColor;
    stroke-width: 2;
    opacity: 1
}

@media(min-width: 1101px) {
    .header .nav {
        align-items:center
    }
}

@media(max-width: 1100px) {
    .nav-dropdown-toggle {
        min-height:48px;
        line-height: 1.35
    }

    .nav-dropdown-menu::before {
        display: none
    }

    .nav-dropdown.is-open .nav-dropdown-menu {
        opacity: 1;
        visibility: visible
    }
}

/* About actions and partner image finishing. */
.founder-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 28px
}

.founder-actions .member-socials {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0
}

.founder-actions .primary-btn {
    min-height: 42px;
    padding: 12px 24px;
    margin: 0;
    justify-content: center
}

.about-team-section .center-action {
    align-items: center;
    flex-wrap: wrap;
    gap: 20px 32px;
    margin-top: 42px
}

.about-team-section .center-action .primary-btn {
    min-height: 46px;
    padding: 12px 24px;
    justify-content: center
}

.about-team-section .center-action .text-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    margin: 0
}

.about-team-section .center-action .text-link .icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0
}

.partner-page-logo img {
}

.mission-card--vision,.mission-card--mission {
    padding: 28px;
    background: var(--panel);
    overflow: hidden;
}

.mission-card-visual {
    position: relative;
    display: grid;
    place-items: center;
    isolation: isolate;
    min-height: 280px;
    margin-bottom: 28px;
    border: 1px solid rgba(7,85,237,.1);
    border-radius: 20px;
    background: radial-gradient(ellipse at 25% 25%,rgba(16,216,232,.22),transparent 65%),linear-gradient(135deg,#edfaff,#e4edff 65%,#e5fff0);
}

.mission-card--mission .mission-card-visual {
    background: radial-gradient(ellipse at 75% 30%,rgba(30,226,108,.2),transparent 65%),linear-gradient(135deg,#e9f2ff,#e3faf7 65%,#eafff1);
}

.mission-card-visual img {
    width: min(100%,360px);
    height: 280px;
    object-fit: contain;
    margin: 0;
    filter: drop-shadow(0 16px 24px rgba(7,63,120,.12));
    transition: transform .4s ease;
}

html[data-theme="dark"] .mission-card-visual {
    border-color: rgba(16,216,232,.15);
    background: radial-gradient(ellipse at 30% 30%,rgba(16,216,232,.19),transparent 65%),linear-gradient(135deg,#102732,#102044 65%,#11372f);
}

html[data-theme="dark"] .mission-card--mission .mission-card-visual {
    background: radial-gradient(ellipse at 75% 30%,rgba(30,226,108,.16),transparent 65%),linear-gradient(135deg,#122744,#103334 65%,#133b2d);
}

@media(hover: hover) and (prefers-reduced-motion:no-preference) {
    .mission-card:hover .mission-card-visual img {
        transform:translateY(-5px)
    }
}

@media(max-width: 600px) {
    .mission-card--vision,.mission-card--mission {
        padding:20px
    }

    .mission-card-visual {
        min-height: 220px;
        margin-bottom: 24px;
        border-radius: 16px
    }

    .mission-card-visual img {
        height: 220px;
        width: min(100%,300px)
    }
}

@media(max-width: 480px) {
    .founder-actions {
        gap:16px
    }

    .about-team-section .center-action {
        flex-direction: column;
        gap: 12px
    }
}

.inner-page main h1, .inner-page main h2, .inner-page main [class] :is(h1,h2) {
    font-family: var(--display);
    font-size: var(--heading-size) !important;
    font-weight: 400;
    line-height: 1.12;
    text-transform: uppercase;
}

.inner-page main :is(h3,h4,h5,h6) {
    text-transform: uppercase;
}

@media (max-width: 767px) {
    .inner-page main h1, .inner-page main h2, .inner-page main [class] :is(h1,h2) {
        font-size: 30px !important;
        line-height: 40px;
    }
}

/* Events: editorial layout and accessible photo galleries. */
.events-page .inner-hero {
    padding: 170px 0 68px;
    background: radial-gradient(ellipse at 90% 25%,rgba(16,216,232,.07),transparent 55%)
}

.events-hero-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 280px;
    gap: 64px;
    align-items: center
}

.events-eyebrow,.events-note-label {
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    margin-bottom: 22px
}

.events-page main .inner-hero h1 {
    font-size: 40px!important;
    line-height: 1.2;
    letter-spacing: -.015em
}

.events-page .inner-hero p {
    font-size: 16px;
    line-height: 1.8;
    margin-top: 21px;
    font-weight: 400 !;
}

.events-explore {
    margin-top: 28px;
    font-size: 14px
}

.events-explore .icon,.events-gallery-controls .icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0
}

.events-hero-note {
    border-left: 1px solid var(--line);
    padding: 26px 0 26px 36px
}

.events-hero-note strong {
    display: block;
    font-size: 30px;
    line-height: 1.3;
    letter-spacing: -.04em;
    margin-bottom: 22px
}

.events-hero-note>span:last-child {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.9
}

.events-page #event-highlights {
    padding: 60px 0 100px;
    scroll-margin-top: 110px
}

.events-section-label {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    margin-bottom: 26px;
    color: var(--muted)
}

.events-page .event-showcase-stack {
    gap: 36px
}

.events-page .event-showcase-card {
    padding: 32px;
    border-radius: 20px;
    background: var(--panel);
    border: 1px solid var(--line)
}

.events-page .event-showcase-copy {
    display: grid;
    grid-template-columns: minmax(0,1.4fr) minmax(0,1fr);
    align-items: end;
    gap: 48px;
    margin-bottom: 30px
}

.events-card-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--muted)
}

.events-index {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--line);
    border-radius: 50%;
    font-size: 12px;
    color: var(--text)
}

.events-page main .event-showcase-copy h2 {
    font-size: 30px!important;
    line-height: 1.2;
    margin: 18px 0 10px
}

.events-location {
    font-size: 14px;
    color: var(--muted)
}

.events-page .event-showcase-copy p {
    font-size: 16px;
    line-height: 1.8;
    max-width: 340px;
    margin: 0;
    color: var(--muted);
    opacity: 1;
    justify-self: end
}

.events-gallery-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    padding-top: 18px;
    margin-bottom: 16px;
    gap: 16px;
    font-weight: 700;
}

.events-gallery-toolbar>span {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--muted)
}

.events-gallery-toolbar>span>span {
    margin: 0 10px;
    opacity: .5
}

.events-gallery-controls {
    display: flex;
    gap: 8px
}

.events-gallery-controls button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--panel);
    color: #ffffff;
    cursor: pointer;
    transition: background .2s,color .2s;
    background: var(--brand);
}

.events-gallery-controls button:hover:not(:disabled) {
    color: var(--panel)
}

.events-gallery-controls button:disabled {
    opacity: .3;
    cursor: default
}

.events-page .event-seven-row {
    grid-auto-columns: calc((100% - 32px)/4);
    gap: 16px;
    padding-bottom: 14px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--muted) transparent;
    scroll-behavior: smooth
}

.events-page .event-seven-row::-webkit-scrollbar-thumb {
    background: var(--muted)
}

.events-page .event-seven-row a {
    border-radius: 12px;
    background: var(--panel2)
}

.events-page .event-seven-row img {
    height: 420px!important;
    aspect-ratio: auto;
    border-radius: 0;
    object-fit: cover
}

.events-page :is(.events-explore,.events-gallery-controls button,.event-seven-row,.event-seven-row a):focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 4px
}

@media(max-width: 900px) {
    .events-hero-layout {
        grid-template-columns:minmax(0,1fr);
        gap: 0
    }

    .events-hero-note {
        display: none
    }

    .events-page .event-showcase-copy {
        gap: 28px
    }

    .events-page .event-seven-row {
        grid-auto-columns: calc((100% - 16px)/2)
    }
}

@media(max-width: 600px) {
    .events-page .inner-hero {
        padding:130px 0 42px
    }

    .events-page main .inner-hero h1 {
        font-size: 30px!important;
        line-height: 1.2
    }

    .events-page #event-highlights {
        padding: 36px 0 64px
    }

    .events-page .event-showcase-card {
        padding: 20px 16px;
        border-radius: 16px
    }

    .events-page .event-showcase-stack {
        gap: 24px
    }

    .events-page .event-showcase-copy {
        grid-template-columns: minmax(0,1fr);
        gap: 18px;
        margin-bottom: 24px
    }

    .events-page .event-showcase-copy p {
        justify-self: start;
        max-width: none;
        font-size: 16px
    }

    .events-page main .event-showcase-copy h2 {
        font-size: 32px!important;
        line-height: 1.2
    }

    .events-page .event-seven-row {
        grid-auto-columns: 86%;
        gap: 12px
    }

    .events-page .event-seven-row img {
        height: 290px!important
    }

    .events-gallery-toolbar>span {
        font-size: 12px;
        letter-spacing: .06em
    }

    .events-gallery-toolbar>span>span {
        margin: 0 5px
    }
}

@media(prefers-reduced-motion:reduce) {
    .events-page .event-seven-row {
        scroll-behavior: auto
    }

    .events-page .event-photo-slider img {
        transition: none
    }
}

/* Shared CTA sizing and responsive finishing across every page. */
:root {
    --cta-height: 42px;
    --cta-width: 220px;
}

html body .site-btn.site-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    /* width:var(--cta-width);
     */
    /* max-width:100%;
     */
    /* min-width:0;
     */
    height: var(--cta-height);
    /* min-height:var(--cta-height);
     */
    padding: 0 18px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--btn-bg);
    color: #fff!important;
    -webkit-text-fill-color: currentColor!important;
    background-clip: border-box!important;
    -webkit-background-clip: border-box!important;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-transform: none;
    text-decoration: none;
    text-shadow: none;
    letter-spacing: 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform .3s ease,box-shadow .3s ease,border-color .3s ease,color .3s ease!important;
}

html body .site-btn.site-btn--outline {
    background: transparent!important;
    border-color: var(--text)!important;
    color: var(--text)!important;
}

html body .site-btn.site-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--btn-bg);
    transform: translateX(-104%);
    transition: transform .42s cubic-bezier(.2,.8,.2,1);
}

html body .site-btn.site-btn .icon {
    width: 20px;
    height: 20px;
    margin: 0;
    flex-shrink: 0;
    stroke: currentColor;
    transition: transform .25s ease!important;
}

html body .site-btn.site-btn:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 4px;
    color: #fff!important;
    border-color: transparent!important;
}

html body .site-btn.site-btn:focus-visible::before {
    transform: translateX(0);
}

@media(hover: hover) {
    html body .site-btn.site-btn:hover {
        color:#fff!important;
        border-color: transparent!important;
        transform: translateY(-2px);
        box-shadow: var(--btn-shadow)!important;
    }

    html body .site-btn.site-btn:hover::before {
        transform: translateX(0);
    }

    html body .site-btn.site-btn:hover .icon {
        transform: rotate(45deg)!important;
    }
}

.hero-actions,.center-action,.founder-actions {
    flex-wrap: wrap;
    gap: 16px;
}

html body .about-team-section .center-action {
    gap: 16px;
}

html body .site-btn.site-btn :is(b,i) {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

/* Keep the compact header controls usable beside the mobile menu. */
html body .header .site-btn {
    width: auto;
}

html body .header .site-btn b {
    background: #fff;
    color: #0756e8;
}

/* Services: generous artwork, a clear reading order and aligned actions. */
.service-list-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 24px;
}

.service-list-grid .service-list-card {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: 280px 1fr;
    gap: 0;
    padding: 0;
    border-radius: 22px;
    background: var(--panel);
    border-color: var(--line);
    align-items: stretch;
}

.service-list-grid .service-list-number {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--panel);
    border: 1px solid var(--line);
    color: var(--text);
    font: 700 12px var(--font);
    letter-spacing: 0;
    opacity: 1;
}

.service-list-grid .service-list-visual {
    grid-column: 1;
    height: 280px;
    border-radius: 0;
    padding: 20px 48px;
    background: radial-gradient(ellipse at 25% 25%,rgba(16,216,232,.2),transparent 70%),linear-gradient(135deg,#eaf5ff,#e4edff 65%,#e5fff0);
    border-bottom: 1px solid var(--line);
}

.service-list-grid .service-list-card:nth-child(even) .service-list-visual {
    background: radial-gradient(ellipse at 75% 20%,rgba(30,226,108,.2),transparent 70%),linear-gradient(135deg,#e9f2ff,#e3faf7);
}

html[data-theme="dark"] .service-list-grid .service-list-visual {
    background: radial-gradient(ellipse at 25% 25%,rgba(16,216,232,.15),transparent 70%),linear-gradient(135deg,#102732,#102044 65%,#11372f);
}

html[data-theme="dark"] .service-list-grid .service-list-card:nth-child(even) .service-list-visual {
    background: radial-gradient(ellipse at 75% 20%,rgba(30,226,108,.15),transparent 70%),linear-gradient(135deg,#122744,#103334);
}

.service-list-grid .service-list-visual img {
    display: block;
    width: 100%;
    max-width: 340px;
    height: 240px;
    min-height: 0;
    object-fit: contain;
    object-position: center;
    margin: 0 auto;
}

.service-list-grid .service-list-copy {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px;
    min-width: 0;
}

.inner-page main .service-list-grid .service-list-copy h2 {
    font-size: 22px!important;
    line-height: 1.3;
    margin: 0 0 14px;
    overflow-wrap: break-word;
}

.service-list-grid .service-list-copy p {
    font-size: 15px!important;
    line-height: 1.75;
    margin: 0 0 24px;
}

.service-list-grid .service-list-copy .site-btn {
    margin-top: auto;
}

/* Shrink grid children before long content can push past the viewport. */
:where(main,footer) :where([class*="grid"],[class*="layout"],.event-showcase-copy,.service-detail-overview)>* {
    min-width: 0;
}

main :where(h1,h2,h3,h4,p),footer :where(p,a,b) {
    overflow-wrap: break-word;
}

main :where(input,textarea,select) {
    min-width: 0;
    max-width: 100%;
    font: inherit;
}

.inner-section {
    padding-block:80px; }

.inner-section-head {
    margin-bottom: 36px;
}

.inner-section-head p {
    max-width: 760px;
    margin-inline:auto; }

.inner-breadcrumb {
    flex-wrap: wrap;
}

@media(max-width: 991px) {
    .inner-section {
        padding-block:64px;
    }

    .service-list-grid {
        gap: 20px;
    }

    .service-list-grid .service-list-copy {
        padding: 24px;
    }
}

@media(max-width: 767px) {
    .container {
        width:calc(100% - 32px);
    }

    .section,.inner-section {
        padding-block:56px; }

    .inner-section-head {
        margin-bottom: 28px;
    }

    .service-list-grid {
        grid-template-columns: minmax(0,1fr);
    }

    html body .header .site-btn {
        width: 38px;
        min-width: 38px;
        height: 38px;
        min-height: 38px;
        padding: 0;
    }

    .header-inner {
        gap: 8px;
    }

    .header .header-actions {
        gap: 8px;
    }

    .service-detail-hero-grid,.service-detail-overview,.about-founder {
        gap: 28px;
    }

    .contact-layout,.static-form {
        grid-template-columns: minmax(0,1fr);
    }

    .static-form .full {
        grid-column: 1;
    }

    .footer-grid {
        gap: 28px!important;
    }

    .footer-bottom .container {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
        text-align: center;
    }
}

@media(max-width: 480px) {
    .hero-actions,.center-action {
        display:flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    html body :is(.hero-actions,.center-action) .site-btn {
        width: 100%;
        max-width: 100%;
    }

    html body .about-team-section .center-action {
        align-items: stretch;
        gap: 12px;
    }

    .service-list-grid .service-list-copy {
        padding: 22px 20px;
    }

    .service-list-grid .service-list-visual {
        padding: 16px 30px;
    }

    .service-list-grid .service-list-card {
        grid-template-rows: 220px 1fr;
    }

    .service-list-grid .service-list-visual {
        height: 220px;
    }

    .service-list-grid .service-list-visual img {
        height: 188px;
    }

    .service-list-grid .service-list-card {
        border-radius: 18px;
    }

    .service-detail-cta {
        padding: 24px 20px;
    }

    .service-detail-cta .site-btn {
        width: 100%;
    }

    .team-reference-grid,.about-five,.team-profile-grid {
        grid-template-columns: minmax(0,1fr)!important;
    }

    .team-face {
        max-width: 100%;
    }

    .contact-form-card {
        padding: 24px 20px;
    }

    .contact-detail-card {
        padding: 20px;
        gap: 12px;
    }

    .contact-detail-card strong {
        overflow-wrap: anywhere;
    }

    .feature-detail-card {
        grid-template-columns: minmax(0,1fr);
    }

    .solution-network-card {
        padding: 24px 20px;
    }

    .events-gallery-toolbar {
        flex-wrap: wrap;
        gap: 12px;
    }

    .events-gallery-controls {
        margin-left: auto;
    }

    .hero-title {
        font-size: clamp(32px,8.8vw,42px)!important;
    }

    .inner-page main h1,.inner-page main h2 {
        overflow-wrap: break-word;
    }

    .home-event-feature-copy {
        padding: 24px 20px;
    }

    .partner-page-logo {
        padding: 12px;
    }

    .footer-contact-line b {
        overflow-wrap: anywhere!important;
    }
}

@media(prefers-reduced-motion:reduce) {
    html body .site-btn.site-btn,html body .site-btn.site-btn::before,html body .site-btn.site-btn .icon {
        transition: none!important;
    }

    html body .site-btn.site-btn:hover,html body .site-btn.site-btn:hover .icon {
        transform: none!important;
    }

    .service-list-grid .service-list-card {
        transition: none;
    }
}

/* One number badge for service, solution, event and process cards. */
html body :is(.service-index,.service-list-number,.solution-card-number,.events-index, .service-benefit-grid article>span,.service-process-grid article>b) {
    display: inline-grid;
    place-items: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--panel);
    background-clip: border-box;
    -webkit-background-clip: border-box;
    color: var(--text)!important;
    -webkit-text-fill-color: currentColor;
    font-family: var(--font);
    font-size: 14px!important;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: 0;
    opacity: 1;
    flex-shrink: 0;
}

html body .service-index {
    margin: 0 0 20px;
}

html body :is(.service-benefit-grid article>span,.service-process-grid article>b) {
    margin-bottom: 20px;
}

/* Home events: dark brand gradients keep text readable over every photo. */
.home-events-original .events-head #eventsTitle {
    color: var(--text);
    -webkit-text-fill-color: currentColor;
    background: none;
}

.home-events-original .events-head>p {
    color: var(--text);
    opacity: .8;
}

.home-events-original .home-event-feature {
    display: flex;
    flex-direction: column;
    padding-top: 170px;
}

.home-events-original .home-event-media-overlay {
    background: linear-gradient(180deg, rgba(5, 15, 30, .08) 0%, rgb(5 20 43 / 22%) 40%, rgba(5, 20, 43, .92) 100%);
}

.home-events-original .home-event-feature-copy {
    position: relative;
    margin-top: auto;
    padding: 28px;
    color: #fff;
}

.home-events-original .home-event-feature-copy :is(h3,h3 a,p,.home-event-meta,.home-event-eyebrow) {
    color: #fff!important;
    -webkit-text-fill-color: #fff;
    opacity: 1;
}

.home-events-original .home-event-feature-copy p {
    padding-right: 62px;
    line-height: 1.75;
    margin-top: 12px;
}

.home-events-original .home-event-meta {
    flex-wrap: wrap;
    gap: 8px 16px;
    letter-spacing: .06em;
}

.home-events-original .home-event-eyebrow {
    font-size: 12px;
    letter-spacing: .1em;
}

.home-events-original .home-event-round-link {
    background: #fff;
    color: #08283e;
}

@media(max-width: 480px) {
    .home-events-original .home-event-feature-copy {
        padding:22px 20px;
    }

    .home-events-original .home-event-feature-copy p {
        padding-right: 0;
    }

    .home-events-original .home-event-round-link {
        position: static;
        margin-top: 18px;
    }
}

/* Keep every profile's social footer visible, including long founder bios. */
.team-modal .team-popup-reference {
    height: min(600px,86vh);
    height: min(600px,86dvh);
    max-height: 86dvh;
    grid-template-rows: minmax(0,1fr);
}

.team-modal .team-popup-left {
    display: grid;
    grid-template-rows: minmax(0,1fr) auto;
    min-width: 0;
    min-height: 0;
}

.team-modal .team-popup-left>img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: top top;
}

.team-modal .team-popup-social {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
    padding: 15px;
    background: #080d12;
}

.team-modal .team-popup-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 42px;
    padding: 0 8px;
    gap: 8px;
    font-size: 14px!important;
    line-height: 1;
    color: #fff;
    background: var(--btn-bg);
}

.team-modal .team-popup-social svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.team-modal .team-popup-social a:hover {
    background: var(--btn-bg);
    border-color: transparent;
}

.team-modal .team-popup-social a:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

.team-modal .team-popup-copy {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.team-modal .team-popup-copy>.mini-pill {
    align-self: flex-start;
    flex-shrink: 0;
}

.team-modal .team-popup-scroll {
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
}

@media(max-width: 767px) {
    .team-modal .team-popup-reference {
        height:auto;
        max-height: 90vh;
        max-height: 90dvh;
        grid-template-columns: minmax(0,1fr);
        grid-template-rows: auto auto;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .team-modal .team-popup-left {
        grid-template-rows: 220px auto;
    }

    .team-modal .team-popup-scroll {
        overflow: visible;
        flex-shrink: 0;
    }

    .team-modal .team-popup-social {
        padding: 12px;
        gap: 8px;
    }
}

.contact-info-panel .inner-section-head {
    text-align: left;
}

.member-socials a:hover {
    background: var(--brand);
    color: #fff;
    border: transparent;
}

/* Solutions card refresh */
.solution-network .solution-six-grid {
    gap: 24px;
    grid-template-columns: repeat(3,minmax(0,1fr));
}

.solution-network .solution-network-card {
    --solution-accent: #22cbd5;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    min-height: 0;
    padding: 12px;
    border-radius: 24px;
    background: var(--panel);
    /* box-shadow: 0 8px 28px #0000000a;
     */
    transition: transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}

.solution-network .solution-network-card:nth-child(3n + 2) {
    --solution-accent: #7299ef;
}

.solution-network .solution-network-card:nth-child(3n + 3) {
    --solution-accent: #4dc9a1;
}

.solution-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px 18px;
}

.solution-card-category {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.solution-network .solution-card-visual {
    position: relative;
    isolation: isolate;
    width: 100%;
    height: 230px;
    flex-shrink: 0;
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: minmax(0,1fr);
    padding: 20px 28px;
    overflow: hidden;
    border-radius: 16px;
    background: radial-gradient(ellipse at 50% 65%,color-mix(in srgb,var(--solution-accent) 20%,transparent),transparent 72%),color-mix(in srgb,var(--panel) 94%,var(--solution-accent));
    border: 1px solid color-mix(in srgb,var(--solution-accent) 12%,transparent);
}

.solution-network .solution-card-visual::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 240px;
    height: 240px;
    border: 1px solid color-mix(in srgb,var(--solution-accent) 16%,transparent);
    border-radius: 50%;
    box-shadow: 0 0 0 28px color-mix(in srgb,var(--solution-accent) 4%,transparent);
}

.solution-network .solution-card-visual img {
    display: block;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    transform: none;
}

.solution-network .solution-card-copy {
    align-self: stretch;
    padding: 26px 14px 20px;
}

.solution-network .solution-card-copy h3 {
    max-width: none;
    min-height: 2.9em;
    margin: 0 0 14px;
    font-family: var(--display);
    font-size: 22px;
    font-weight: 400;
    text-shadow: none;
    line-height: 1.3;
    text-transform: uppercase !important;
}

.solution-network .solution-card-copy p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
    opacity: 1;
}

@media (hover: hover) and (prefers-reduced-motion:no-preference) {
    .solution-network .solution-network-card:hover {
        transform:translateY(-5px);
        border-color: color-mix(in srgb,var(--solution-accent) 55%,var(--line));
        box-shadow: 0 18px 40px #0000001f;
    }

    .solution-network-card:hover .solution-card-visual img {
        transform: none;
    }
}

@media (max-width: 991px) {
    .solution-network .solution-six-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width: 600px) {
    .solution-network .solution-six-grid {
        grid-template-columns:minmax(0,1fr);
        gap: 20px;
    }

    .solution-network .solution-card-copy h3 {
        min-height: 0;
        font-size: 22px;
    }

    .solution-network .solution-card-copy {
        padding: 24px 12px 18px;
    }
}

@media (prefers-reduced-motion:reduce), (hover: none) {
    .solution-network .solution-network-card:hover {
        transform:none;
    }

    .solution-network .solution-network-card,.solution-network .solution-card-visual img {
        transition: none;
    }
}

/* Responsive banner: keep CTAs together and content within the viewport. */
@media (max-width: 840px) {
    .hero .hero-copy, .hero .hero-visual {
        min-width: 0;
        max-width: 100%;
    }

    .hero .hero-actions {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-width: 0;
    }

    html body .hero .hero-actions .site-btn.site-btn {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        max-width: 220px;
        padding-inline: clamp(6px, 1.5vw, 12px); gap: 5px;
        font-size: clamp(10px, 2.7vw, 14px);
        white-space: nowrap;
    }

    html body .hero .hero-actions .site-btn :is(b, i), html body .hero .hero-actions .site-btn .icon {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
    }
}

@media (max-width: 767px) {
    html[data-theme] .header, html[data-theme] .header:not(.is-sticky) {
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 0;
    }

    .hero .kicker {
        white-space: normal;
        overflow-wrap: anywhere;
        min-width: 0;
    }

    .hero .hero-visual {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        height: auto !important;
        min-height: 0;
        padding: 0 0 8px;
    }

    .hero .hero-visual .hero-phone {
        position: relative;
        left: auto !important;
        top: auto !important;
        width: min(260px, 100%) !important;
        height: 525px !important;
        flex: 0 0 auto;
        transform: none !important;
    }

    .hero-visual .review-card {
        position: relative;
        inset: auto;
        width: min(238px, 100%);
        margin: 0;
        transform: none;
    }

    .hero-visual .review-card .review-main > b {
        font-size: 38px;
    }

    .hero-visual .p1 {
        top: 110px;
        bottom: auto;
        right: 0;
        display: none;
    }

    .hero-visual .p2 {
        display: none;
        top: 270px;
        bottom: auto;
        left: 0;
    }

    .hero-visual .p3 {
        top: 440px;
        bottom: auto;
        right: 0;
        display: none;
    }
}

/* About: company network and campaign delivery. */
.about-network {
    padding-top: 72px;
}

.about-network-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(32px, 5vw, 76px);
    align-items: center;
}

.about-network-copy {
    min-width: 0;
}

.about-network-copy h2 {
    font-size: clamp(32px, 3.3vw, 48px);
    line-height: 1.16;
    letter-spacing: -.035em;
    margin: 24px 0;
}

.about-network-copy h2 span {
    color: #087fbe;
}

html[data-theme="dark"] .about-network-copy h2 span {
    color: #53d8ee;
}

.about-network-copy p {
    font-size: 16px;
    line-height: 1.85;
    color: var(--muted);
    margin: 0;
}

.about-network-capabilities {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin: 25px 0 30px;
}

.about-network-capabilities span {
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 7px;
}

.about-network-capabilities span::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0aa889;
}

.about-network-visual {
    min-width: 0;
    padding: 28px 24px 24px;
    border: 1px solid var(--line);
    border-radius: 32px;
    background: radial-gradient(ellipse at 65% 35%, rgba(16,216,232,.16), transparent 65%), var(--panel);
}

.about-network-visual-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
    color: var(--muted);
}

.about-network-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0cba8a;
    box-shadow: 0 0 0 5px rgba(12,186,138,.1);
}

.about-network-phone {
    width: 100%;
    height: auto;
    max-height: 440px;
    object-fit: contain;
    margin: 12px auto;
}

.about-network-connection {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 1.4vw, 19px);
    border-top: 1px solid var(--line);
    padding-top: 20px;
    font-size: 12px;
    font-weight: 700;
}

.about-network-connection img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.about-network-connection [aria-hidden] {
    color: var(--muted);
}

.about-network-flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 56px;
    border-top: 1px solid var(--line);
    padding-top: 28px;
    gap: 32px;
}

.about-network-flow > div + div {
    border-left: 1px solid var(--line);
    padding-left: 32px;
}

.about-network-flow span {
    display: block;
    color: var(--muted);
    font-size: 10px;
    letter-spacing: .15em;
    font-weight: 800;
    margin-bottom: 14px;
}

.about-network-flow strong {
    display: block;
    font-size: 19px;
}

.about-network-flow p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
    margin: 8px 0 0;
}

@media (max-width: 900px) {
    .about-network-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .about-network-visual {
        width: 100%;
        max-width: 580px;
        margin: auto;
    }

    .about-network-copy h2 {
        max-width: 700px;
    }
}

@media (max-width: 600px) {
    .about-network {
        padding: 48px 0;
    }

    .about-network-visual {
        padding: 24px 16px 20px;
        border-radius: 24px;
    }

    .about-network-flow {
        grid-template-columns: 1fr;
        gap: 22px;
        margin-top: 36px;
    }

    .about-network-flow > div + div {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding: 22px 0 0;
    }

    .about-network-connection {
        gap: 9px;
        font-size: 11px;
    }
}

/* Consistent section spacing across every page and screen size. */
html body section {
    padding: 40px 0 !important;
}

/* Banner clearance below fixed navigation;
 compact spacing across devices. */
html body section.hero, html body section.inner-hero {
    padding: 128px 0 48px !important;
    min-height: 0;
}

.hero .hero-grid {
    min-height: 0;
    height: auto;
    padding-top: 0;
    gap: clamp(24px, 4vw, 56px);
}

.hero .hero-visual {
    height: 560px;
    min-height: 0;
}

.hero .hero-title {
    font-size: clamp(54px, 5.6vw, 80px);
    line-height: 1.08;
}

.footer-grid > *, .footer-contact-line > span {
    min-width: 0;
}

.footer-contact-line b {
    overflow-wrap: anywhere;
}

.footer-bottom .container {
    padding-right: 0;
}

@media (max-width: 1100px) {
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero .hero-grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
        gap: 24px;
    }

    .hero .hero-copy, .hero .hero-visual {
        min-width: 0;
    }

    .hero .hero-actions {
        flex-wrap: wrap;
        gap: 12px;
    }
}

@media (max-width: 767px) {
    html body section.hero, html body section.inner-hero {
        padding: 112px 0 40px !important;
    }

    .hero .hero-grid {
        gap: 32px;
        padding-top: 0;
    }

    .hero .hero-title {
        font-size: clamp(48px, 10vw, 66px) !important;
        line-height: 1.08 !important;
    }

    .hero .hero-text {
        font-size: 15px;
        line-height: 1.8;
    }

    .hero .hero-visual {
        height: auto;
        min-height: 0;
    }

    .hero .hero-actions {
        flex-wrap: wrap;
    }

    html body .hero .hero-actions .site-btn.site-btn {
        flex: 1 1 170px;
        max-width: none;
        min-height: 46px;
        font-size: 13px;
        padding-inline: 16px; justify-content: center;
    }

    .inner-breadcrumb {
        margin-bottom: 20px;
    }

    .inner-hero p {
        margin-top: 20px;
    }

    .footer-grid {
        gap: 32px !important;
    }

    .footer-bottom .container {
        padding: 0;
    }

    .footer-contact-line {
        max-width: 100%;
    }

    .header .nav {
        max-height: calc(100dvh - 92px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

@media (max-width: 480px) {
    .footer-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    html body .hero .hero-actions .site-btn.site-btn {
        flex: 0 0 auto;
        width: 100%;
    }

    .hero .hero-visual .hero-phone {
        width: min(248px, 100%) !important;
        height: 500px !important;
    }
}

/* Keep phone illustrations within narrow columns without clipping their content. */
@media (min-width: 768px) and (max-width: 1100px) {
    .hero .hero-visual .hero-phone {
        width: 250px;
        height: 520px;
        transform: none !important;
    }

    .hero .hero-visual .float-pill {
        display: none;
    }

    .hero .hero-visual .review-card {
        width: min(238px, 100%);
        left: 0;
        bottom: 0;
        transform: none;
    }
}

@media (max-width: 767px) {
    .phone-stage .stage-phone {
        max-width: 100%;
        margin-inline: auto; transform: none !important;
    }

    .cta-phone-wrap .cta-phone {
        max-width: 100%;
        transform: none !important;
    }
}

/* Readable body copy in both themes, without opacity reducing text contrast. */
html[data-theme="light"] {
    --body-copy: #263b4b;
    --muted: #3f5363;
    --copy: #263b4b;
}

html[data-theme="dark"] {
    --body-copy: #dce5ee;
    --muted: #bdcbd8;
    --copy: #dce5ee;
}

html body :is(main, footer) :is(p, li, dd, dt, blockquote, figcaption, .faq-answer, .feature-detail, .service-description, .contact-form-note) {
    color: var(--body-copy) !important;
    -webkit-text-fill-color: currentColor;
    opacity: 1 !important;
}

html body :is(main, footer) :is(p, li, blockquote) :is(strong, em, b) {
    color: inherit;
}

html body :is(.inner-breadcrumb, .founder-role, .team-profile-role, .contact-detail-card small, .contact-info-panel small, .event-showcase-meta, .home-event-meta) {
    opacity: 1;
}

/* These surfaces keep their own colors independently of the page theme. */
html body :is(.footer, .phone-screen, .home-event-feature-copy, .review-card) {
    --body-copy: #e2ebf3;
}

html body .phone-screen.light-ui {
    --body-copy: #263b4b;
}

html body .footer :is(p, small, .footer-bottom, .footer-availability) {
    color: #d5e1ec;
    opacity: 1;
}

html body .footer :is(.footer-col > a:not(.site-btn), .footer-contact-line b) {
    color: #edf4fa;
    opacity: 1;
}

/* Paint filled gradient buttons once, without a transparent border seam. */
html body .site-btn.site-btn:not(.site-btn--outline) {
    border: 0 !important;
    background: var(--btn-bg);
    background-origin: border-box;
    background-clip: border-box !important;
}

html body .site-btn.site-btn:not(.site-btn--outline)::before {
    content: none;
}

html body .site-btn.site-btn--outline::before {
    inset: -1px;
    border-radius: inherit;
}

/* Keep the banner rating and caption separated at every screen width. */
.hero .hero-visual .review-card {
    max-width: 100%;
    height: auto;
    padding: 16px;
}

.hero .review-card .review-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    min-width: 0;
}

.hero .hero-visual .review-card .review-main > b {
    flex: 0 0 auto;
    font-size: clamp(34px, 4vw, 44px);
    line-height: 1.1;
    white-space: nowrap;
}

.hero .review-card .review-main > span {
    flex: 1 1 110px;
    min-width: 0;
    font-size: 16px;
    line-height: 1.4;
}

.hero .review-card .review-main small {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Reduce the home banner's top spacing across screen sizes. */
html body section.hero {
    padding-top: 112px !important;
}

@media (max-width: 767px) {
    html body section.hero {
        padding-top: 96px !important;
    }
}

/* Keep footer text clear of the absolutely positioned back-to-top button. */
.footer-bottom .container {
    min-height: 80px;
    padding: 16px 62px 16px 0;
    gap: 8px 24px;
    flex-wrap: wrap;
    align-items: center;
}

.footer-bottom .container > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.footer-bottom .footer-agency-tagline {
    display: block;
}

@media (max-width: 767px) {
    .footer-bottom .container {
        min-height: 56px;
        padding: 10px 0 10px;
        flex-direction: column-reverse;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    span.footer-agency-tagline {
    display: none !important;
}
}

@media (min-width: 1500px) {
    .footer-bottom .container {
        padding-right: 0;
    }
}

/* Keep MoneyMan after Claro on mobile using the same logo element. */
@media (max-width: 767px) {
    .campaigns-logo-grid .campaign-moneyman {
        order: 1;
    }
}