/* ==========================================================================
   Genberline — genberline.com
   Hoja base del sitio: reinicio, cabecera, pie, botones y la portada completa
   (hero, productos, enfoque, cómo empezar y solicitud de demostración).
   Sin frameworks: tipografía del sistema (Arial/Helvetica), grid + flex propios.
   Las páginas interiores suman css/pages.css sobre esta misma base.
   ========================================================================== */

:root {
    --gb-night: #06101f;
    --gb-header: #070f1d;
    --gb-navy: #0b192e;
    --gb-ink: #14223b;
    --gb-text-soft: #64758b;
    --gb-blue: #3265f6;
    --gb-blue-strong: #174adf;
    --gb-blue-hover: #184ae1;
    --gb-sky: #88caff;
    --gb-tint: #f7f9fd;
    --gb-panel: #f5f8fc;
    --gb-line: #dce5ef;
    --gb-line-soft: #e7edf6;
    --gb-focus: #5a99ff;
    --gb-error: #a62b42;
    --gb-error-bg: #fff1f3;
    --gb-ok: #14846d;
    --gb-ok-bg: #e2faf5;
}

/* ----- Reinicio (mismo punto de partida del diseño) ----- */

*,
::before,
::after {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    color: #14223b;
    background: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
}

a {
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

b,
strong {
    font-weight: bolder;
}

small {
    font-size: 80%;
}

table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
}

ol,
ul,
menu {
    list-style: none;
}

img,
svg,
video {
    vertical-align: middle;
    display: block;
}

img,
video {
    max-width: 100%;
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: transparent;
    border-radius: 0;
}

button {
    -webkit-appearance: button;
    appearance: button;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

button:disabled {
    cursor: wait;
    opacity: .65;
}

summary {
    display: list-item;
}

::placeholder {
    opacity: 1;
}

[hidden]:where(:not([hidden=until-found])) {
    display: none !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #5a99ff;
    outline-offset: 4px;
}

/* ----- Tipografía y campos (valores del diseño) ----- */

h1 {
    letter-spacing: -2.7px;
    margin: 0 0 27px;
    font-size: clamp(44px, 4.6vw, 66px);
    font-weight: 600;
    line-height: 1.08;
}

h1 > span {
    color: #78e7dc;
}

h2 {
    letter-spacing: -1.8px;
    margin: 0;
    font-size: 44px;
    font-weight: 600;
    line-height: 1.15;
}

h3 {
    font-weight: 600;
}

p {
    margin: 0;
}

input,
textarea {
    color: #233955;
    background: #fbfcfe;
    border: 1px solid #d8e1ee;
    border-radius: 6px;
    width: 100%;
    min-width: 0;
    margin-top: 6px;
    padding: 11px 12px;
    font-size: 14px;
    font-weight: 400;
    display: block;
}

textarea {
    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    color: #98a5b8;
}

fieldset {
    border: 0;
    margin: 0 0 20px;
    padding: 0;
}

legend {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
}

form label {
    margin-bottom: 15px;
    font-size: 14px;
    font-weight: 600;
    display: block;
}

.container {
    width: calc(100% - 96px);
    max-width: 1260px;
    margin: auto;
}

.skip {
    z-index: 50;
    color: #07172b;
    background: #fff;
    padding: 12px;
    position: fixed;
    top: -80px;
}

.skip:focus {
    top: 0;
}

/* ----- Botones ----- */

.button {
    color: #fff;
    background: #3265f6;
    border: 1px solid transparent;
    border-radius: 7px;
    justify-content: center;
    align-items: center;
    min-height: 50px;
    padding: 14px 23px;
    font-size: 14px;
    font-weight: 700;
    transition: background .2s, transform .2s;
    display: inline-flex;
}

.button:hover {
    background: #184ae1;
    transform: translateY(-1px);
}

.button-outline {
    color: #e5edfb;
    background: none;
    border-color: #ffffff3d;
}

.button-outline:hover {
    background: #ffffff0d;
}

.button-dark {
    background: #174adf;
}

/* ----- Cabecera ----- */

.site-header {
    color: #fff;
    z-index: 20;
    background: #070f1d;
    border-bottom: 1px solid #8da9d222;
    position: sticky;
    top: 0;
}

.nav {
    justify-content: space-between;
    align-items: center;
    gap: 35px;
    height: 94px;
    display: flex;
}

.brand {
    letter-spacing: -1.2px;
    align-items: center;
    gap: 11px;
    font-size: 27px;
    font-weight: 700;
    display: flex;
}

.brand-official {
    flex-shrink: 0;
    width: 245px;
    max-width: 40vw;
}

.brand-official img {
    object-fit: contain;
    object-position: left center;
    width: 100%;
    height: 63px;
}

.navigation {
    color: #d2dbea;
    gap: 30px;
    font-size: 14px;
    display: flex;
}

.navigation a:hover {
    color: #fff;
}

.nav-cta {
    min-height: 43px;
    padding: 10px 19px;
}

.mobile-menu {
    display: none;
}

/* ----- Hero ----- */

.hero {
    color: #fff;
    background: #07172b;
    position: relative;
    overflow: hidden;
}

.hero-impact {
    isolation: isolate;
    background: #06101f;
    min-height: 790px;
}

.hero-artwork {
    z-index: -2;
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hero-artwork img {
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;
    animation: 1.2s ease-out both hero-arrive;
}

.hero-impact::after {
    content: "";
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(90deg, #06101ff2 0%, #06101fdb 25%, #06101f8a 45%, #06101f00 70%), linear-gradient(#06101f00 65%, #06101f 100%);
    position: absolute;
    inset: 0;
}

.impact-content {
    padding-top: 92px;
    padding-bottom: 90px;
    position: relative;
}

.hero-kicker {
    letter-spacing: 1.8px;
    color: #9ab6dd;
    align-items: center;
    gap: 10px;
    margin-bottom: 27px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
}

.kicker-line {
    background: #70e9dd;
    width: 26px;
    height: 2px;
}

.impact-content .hero-kicker {
    letter-spacing: 2px;
    color: #a6c4ed;
    margin-bottom: 30px;
    font-size: 12px;
}

.impact-content h1 {
    letter-spacing: -3.5px;
    max-width: 890px;
    margin-bottom: 28px;
    font-size: clamp(52px, 5.8vw, 85px);
    font-weight: 600;
    line-height: 1.07;
}

.impact-content h1 > span {
    color: #88caff;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(115deg, #dceeff 8%, #5fb5ff 55%, #4887f4);
    -webkit-background-clip: text;
    background-clip: text;
}

.impact-content > p {
    color: #b1bfd3;
    max-width: 430px;
    font-size: 17px;
    line-height: 1.85;
}

.hero-actions {
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 30px;
    display: flex;
}

.impact-content .button {
    background: #3475ee;
    border-radius: 5px;
    min-height: 55px;
    padding: 16px 24px;
    font-size: 14px;
    box-shadow: 0 6px 30px #1762f62b;
}

.impact-content .button-outline {
    box-shadow: none;
    background: #07132170;
    border-color: #a9c8ee50;
}

.impact-principle {
    color: #7790b2;
    align-items: center;
    gap: 13px;
    margin-top: 34px;
    font-size: 13px;
    line-height: 1.5;
    display: flex;
}

.impact-principle strong {
    color: #c2d2e7;
    font-weight: 400;
}

.principle-stroke {
    background: #4e9bff;
    width: 2px;
    height: 35px;
}

.impact-bottom {
    border-top: 1px solid #83abdf33;
    align-items: center;
    gap: 35px;
    padding: 28px 0 34px;
    display: flex;
    position: relative;
}

.ecosystem-intro {
    flex-shrink: 0;
    align-items: center;
    gap: 13px;
    display: flex;
}

.ecosystem-number {
    color: #9bc7ff;
    letter-spacing: -2px;
    font-size: 45px;
    font-weight: 500;
    line-height: 1;
}

.ecosystem-intro > span:last-child {
    letter-spacing: 1.6px;
    color: #778ead;
    font-size: 10px;
    line-height: 1.8;
}

.ecosystem-intro strong {
    color: #bfd1e9;
    font-weight: 500;
}

.ecosystem-links {
    flex: 1;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    display: grid;
}

.ecosystem-links a {
    color: #aec0dc;
    border-radius: 6px;
    align-items: center;
    gap: 9px;
    padding: 13px 9px;
    font-size: 12px;
    transition: color .2s, background .2s;
    display: flex;
}

.ecosystem-links a:hover {
    color: #fff;
    background: #203c652e;
}

.ecosystem-links svg {
    color: #6ca5f2;
    flex-shrink: 0;
}

/* ----- Secciones ----- */

.section {
    padding: 100px 0;
}

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

.section-heading > p {
    color: #718096;
    max-width: 400px;
    padding-bottom: 4px;
    font-size: 16px;
    line-height: 1.7;
}

.eyebrow {
    letter-spacing: 1.7px;
    color: #2a62e8;
    margin-bottom: 15px;
    font-size: 12px;
    font-weight: 700;
    display: block;
}

.solutions h2 {
    font-size: 41px;
}

/* ----- Productos: pestañas ----- */

.product-showcase {
    flex-direction: column;
    gap: 8px;
    display: flex;
}

.product-tabs {
    color: #5c6b80;
    border-radius: 8px;
    grid-template-columns: repeat(5, 1fr);
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-bottom: 25px;
    display: grid;
}

.product-tab {
    color: #24334b;
    white-space: normal;
    background: #fff;
    border: 1px solid #dce5ef;
    border-radius: 10px;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    align-items: flex-start;
    gap: 14px;
    min-height: 165px;
    padding: 23px 18px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.43;
    transition: all .2s;
    display: inline-flex;
    position: relative;
}

.product-tab:focus-visible {
    box-shadow: 0 0 0 3px #3377ff80;
}

.product-tab[data-state=active] {
    background: #edf3ff;
    border-color: #3265f6;
    box-shadow: 0 0 0 1px #3265f6;
}

.product-tab svg {
    pointer-events: none;
    flex-shrink: 0;
}

.product-tab > svg {
    color: #3061d8;
    width: 25px;
    height: 25px;
}

.product-tab > strong {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
}

.product-tab > span:last-child {
    letter-spacing: 1.3px;
    color: #7c8ea6;
    font-size: 12px;
}

.tab-number {
    color: #adbacd;
    font-size: 12px;
    position: absolute;
    top: 20px;
    right: 15px;
}

/* ----- Productos: detalle y vista ilustrativa ----- */

.product-detail {
    background: #f5f8fc;
    border: 1px solid #e7edf6;
    border-radius: 14px;
    flex: 1;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
    padding: 50px 55px;
    display: grid;
}

.product-detail[hidden] {
    display: none;
}

.pill {
    letter-spacing: 1.3px;
    color: #3761a1;
    border: 1px solid #d0ddf3;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 12px;
}

.detail-copy h3 {
    letter-spacing: -1px;
    max-width: 380px;
    margin: 19px 0;
    font-size: 34px;
    line-height: 1.22;
}

.detail-copy p {
    color: #64758b;
    font-size: 15px;
    line-height: 1.75;
}

.detail-copy ul {
    margin: 22px 0 27px;
    padding: 0;
    list-style: none;
}

.detail-copy li {
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    font-size: 14px;
    display: flex;
}

.detail-copy li svg {
    color: #3570eb;
    flex-shrink: 0;
}

.detail-preview {
    justify-self: end;
    width: 100%;
    max-width: 420px;
}

.product-preview {
    color: #14223b;
    background: #fff;
    border: 1px solid #dce5ef;
    border-radius: 13px;
    overflow: hidden;
    box-shadow: 0 22px 70px #00142c20;
}

.preview-top {
    border-bottom: 1px solid #e8eef5;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    display: flex;
}

.tiny-brand {
    letter-spacing: .2px;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 800;
    display: flex;
}

.preview-tag {
    color: #697c95;
    font-size: 12px;
}

.preview-body {
    padding: 20px 25px;
}

.preview-heading {
    justify-content: space-between;
    align-items: center;
    display: flex;
}

.preview-heading .eyebrow {
    margin-bottom: 5px;
    font-size: 12px;
}

.preview-heading h3 {
    letter-spacing: -.5px;
    margin: 0;
    font-size: 19px;
    font-weight: 600;
}

.preview-heading > svg {
    color: #8ea8c5;
}

.metric {
    flex-direction: column;
    margin-top: 17px;
    display: flex;
}

.metric > span:first-child {
    color: #64758b;
    font-size: 12px;
}

.metric strong {
    letter-spacing: -1.5px;
    font-size: 32px;
    line-height: 1.5;
}

.metric-note {
    color: #8090a3;
    font-size: 12px;
}

.chart {
    border-bottom: 1px solid #e5edfa;
    align-items: end;
    gap: 8px;
    height: 62px;
    margin: 13px 0 16px;
    display: flex;
}

.chart span {
    background: #dce7ff;
    border-radius: 3px 3px 0 0;
    flex: 1;
}

.chart span:nth-child(n+8) {
    background: #3265f6;
}

.preview-table {
    width: 100%;
    position: relative;
    overflow-x: auto;
}

.product-preview table {
    caption-side: bottom;
    width: 100%;
    font-size: 12px;
    line-height: 1.43;
}

.product-preview tr {
    border-bottom: 1px solid;
    transition: background-color .15s;
}

.product-preview tbody tr:last-child {
    border-bottom: 0;
}

.product-preview th {
    color: #8694a7;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
    height: 26px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 400;
}

.product-preview td {
    vertical-align: middle;
    white-space: nowrap;
    padding: 9px 0;
}

.product-preview th:last-child,
.product-preview td:last-child {
    text-align: right;
}

.status {
    color: #3962a3;
    white-space: nowrap;
    background: #eef4ff;
    border-radius: 4px;
    padding: 3px 6px;
}

.preview-foot {
    color: #8c9aae;
    align-items: center;
    gap: 6px;
    margin-top: 13px;
    font-size: 12px;
    display: flex;
}

/* ----- Nuestro enfoque ----- */

.approach {
    background: #f7f9fd;
}

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

.principles article {
    border-top: 1px solid #d9e1ee;
    padding-top: 30px;
    position: relative;
}

.principles article > svg {
    color: #2658c4;
    width: 29px;
    height: 29px;
}

.principles article > span {
    color: #a1b0c6;
    font-size: 12px;
    position: absolute;
    top: 30px;
    right: 0;
}

.principles h3 {
    letter-spacing: -.4px;
    margin: 22px 0 12px;
    font-size: 20px;
}

.principles p {
    color: #6c7b90;
    font-size: 15px;
    line-height: 1.8;
}

/* ----- Cómo empezar ----- */

.steps-grid {
    grid-template-columns: 1fr 1fr;
    gap: 110px;
    display: grid;
}

.steps-grid > div > p {
    color: #728097;
    margin-top: 22px;
    font-size: 16px;
}

.steps {
    margin: 0;
    padding: 0;
    list-style: none;
}

.steps li {
    gap: 23px;
    padding: 0 0 27px;
    display: flex;
}

.steps li + li {
    border-top: 1px solid #e4eaf3;
    padding-top: 25px;
}

.steps li > span {
    color: #3768dd;
    background: #edf3ff;
    border-radius: 7px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 37px;
    height: 37px;
    font-size: 13px;
    display: flex;
}

.steps h3 {
    margin: 0 0 8px;
    font-size: 18px;
}

.steps p {
    color: #6d7f96;
    font-size: 15px;
}

/* ----- Solicitud de demostración ----- */

.demo-section {
    color: #fff;
    background: #0b192e;
}

.demo-grid {
    grid-template-columns: .95fr 1fr;
    align-items: start;
    gap: 100px;
    display: grid;
}

.demo-copy {
    padding-top: 35px;
}

.demo-copy .eyebrow,
.demo-copy em {
    color: #88caff;
}

.demo-copy h2 {
    font-size: 49px;
    line-height: 1.18;
}

.demo-copy em {
    font-style: normal;
}

.demo-copy > p {
    color: #acbfd8;
    max-width: 370px;
    margin-top: 27px;
    line-height: 1.8;
}

.contact-options {
    color: #c8d5e8;
    flex-direction: column;
    gap: 15px;
    margin-top: 35px;
    font-size: 14px;
    display: flex;
}

.contact-options > span {
    align-items: center;
    gap: 12px;
    display: flex;
}

.contact-options svg {
    color: #79a3e3;
}

.demo-signature {
    color: #8ea7c9;
    border-top: 1px solid #ffffff1c;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 60px;
    padding-top: 27px;
    font-size: 13px;
    display: flex;
}

.demo-signature img {
    object-fit: contain;
    max-width: 230px;
}

.form-card {
    color: #15243c;
    background: #fff;
    border-radius: 13px;
    padding: 36px;
}

.form-card h3 {
    letter-spacing: -.6px;
    margin: 0 0 5px;
    font-size: 26px;
}

.form-intro {
    color: #728199;
    margin-bottom: 26px;
    font-size: 14px;
}

.form-row {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    display: grid;
}

.solution-checks {
    flex-wrap: wrap;
    gap: 8px;
    display: flex;
}

form .solution-check {
    cursor: pointer;
    border: 1px solid #dfe6ef;
    border-radius: 5px;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 8px 10px;
    font-size: 14px;
    font-weight: 400;
    display: flex;
}

form .solution-check.checked {
    background: #f0f5ff;
    border-color: #8bacf9;
}

.channel-options {
    gap: 25px;
    display: flex;
}

.channel-options label {
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 400;
    display: flex;
}

form .consent {
    color: #697c94;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    display: flex;
}

.consent a,
.form-foot a,
.form-error a {
    text-decoration: underline;
}

.native-check,
.native-radio {
    appearance: auto;
    accent-color: #2867ef;
    vertical-align: middle;
    flex-shrink: 0;
    width: 16px;
    min-width: 16px;
    height: 16px;
    margin: 2px 0 0;
    padding: 0;
    display: inline-block;
}

.optional {
    color: #8e9caf;
    font-weight: 400;
}

.submit {
    width: 100%;
}

.form-foot {
    text-align: center;
    color: #8493a7;
    margin-top: 13px;
    font-size: 12px;
    line-height: 1.6;
}

/* Trampa anti-spam: fuera de pantalla para las personas. */
.honey {
    width: 1px;
    height: 1px;
    position: absolute;
    left: -9999px;
    overflow: hidden;
}

.form-error {
    color: #a62b42;
    background: #fff1f3;
    border-radius: 5px;
    margin-bottom: 15px;
    padding: 10px;
    font-size: 13px;
}

/* ----- Pie ----- */

footer {
    color: #fff;
    background: #070f1d;
    padding: 40px 0 22px;
}

.footer-top {
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    display: flex;
}

.footer-top p {
    color: #899fbd;
    font-size: 13px;
}

.footer-top > a:last-child {
    color: #c9d6e9;
    font-size: 13px;
}

.footer-top .brand-official {
    width: 230px;
}

/* Enlaces a las páginas del sitio (no vienen en el diseño: mantienen navegables
   los productos, Nosotros, Contacto y la política de privacidad). */
.footer-links {
    color: #a1b2ca;
    border-top: 1px solid #ffffff12;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin-top: 30px;
    padding-top: 23px;
    font-size: 13px;
    display: flex;
}

.footer-links a:hover,
.footer-top > a:last-child:hover {
    color: #fff;
}

.footer-links + .footer-bottom {
    margin-top: 23px;
}

.footer-bottom {
    color: #768dac;
    border-top: 1px solid #ffffff12;
    justify-content: space-between;
    margin-top: 30px;
    padding-top: 23px;
    font-size: 12px;
    display: flex;
}

/* ----- Adaptación por ancho ----- */

@media (min-width: 1500px) {
    h1 {
        font-size: 69px;
    }
}

@media (min-width: 1700px) {
    .hero-artwork img {
        object-position: center 48%;
    }

    .impact-content {
        padding-top: 110px;
        padding-bottom: 110px;
    }
}

@media (max-width: 1100px) {
    .container {
        width: calc(100% - 60px);
    }

    h1 {
        font-size: 51px;
    }

    .navigation,
    .nav {
        gap: 20px;
    }

    .brand {
        font-size: 24px;
    }

    .brand-official {
        width: 215px;
    }

    .hero-impact {
        min-height: 730px;
    }

    .impact-content {
        padding-top: 75px;
        padding-bottom: 70px;
    }

    .impact-content h1 {
        font-size: 66px;
    }

    .ecosystem-intro {
        display: none;
    }

    .impact-bottom {
        padding: 22px 0;
    }

    .ecosystem-links a {
        gap: 6px;
        padding: 12px 5px;
        font-size: 12px;
    }

    .product-tab {
        padding: 20px 13px;
    }

    .product-detail {
        gap: 35px;
        padding: 35px;
    }

    .steps-grid {
        gap: 60px;
    }

    .demo-grid {
        gap: 45px;
    }

    .demo-copy h2 {
        font-size: 42px;
    }
}

@media (max-width: 800px) {
    .container {
        width: calc(100% - 40px);
    }

    .nav {
        height: 80px;
    }

    .brand-official {
        width: 210px;
        max-width: 43vw;
    }

    .brand-official img {
        height: 52px;
    }

    .navigation {
        display: none;
    }

    .navigation.open {
        background: #0a1c35;
        border-bottom: 1px solid #ffffff20;
        flex-direction: column;
        padding: 25px;
        display: flex;
        position: absolute;
        top: 80px;
        left: 0;
        right: 0;
    }

    .mobile-menu {
        color: #fff;
        background: none;
        border: 0;
        padding: 5px;
        display: flex;
    }

    .nav-cta {
        margin-left: auto;
        padding: 10px 12px;
        font-size: 12px;
    }

    .hero-impact {
        min-height: 0;
    }

    .hero-artwork {
        opacity: .85;
        height: 610px;
        top: 210px;
    }

    .hero-artwork img {
        object-position: 73% center;
    }

    .hero-impact::after {
        background: linear-gradient(#06101f 0%, #06101fe8 25%, #06101f50 61%, #06101f 88%), linear-gradient(90deg, #06101f55, #06101f00);
    }

    .impact-content {
        padding-top: 56px;
        padding-bottom: 210px;
    }

    .impact-content h1 {
        letter-spacing: -2px;
        max-width: 700px;
        font-size: clamp(47px, 8.5vw, 69px);
    }

    .impact-content > p {
        max-width: 480px;
        font-size: 16px;
    }

    .impact-content .hero-kicker {
        letter-spacing: 1.3px;
        font-size: 10px;
    }

    .impact-content .hero-actions {
        max-width: 450px;
    }

    .impact-content .button {
        padding: 13px 18px;
        font-size: 13px;
    }

    .impact-principle {
        margin-top: 26px;
    }

    .impact-bottom {
        padding: 22px 0 26px;
    }

    .ecosystem-links {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .ecosystem-links a {
        border: 1px solid #304c7044;
        min-height: 58px;
        padding: 12px 9px;
        font-size: 12px;
    }

    .section {
        padding: 65px 0;
    }

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

    .section-heading br {
        display: none;
    }

    .section-heading h2 br {
        display: block;
    }

    h2 {
        font-size: 36px;
    }

    .solutions h2 {
        font-size: 34px;
    }

    .product-tabs {
        grid-template-columns: repeat(5, minmax(135px, 1fr));
        gap: 10px;
        padding: 2px 2px 8px;
        overflow: auto;
    }

    .product-tab {
        min-height: 150px;
    }

    .product-detail {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 28px;
    }

    .detail-copy h3 {
        max-width: none;
        font-size: 31px;
    }

    .detail-preview {
        justify-self: center;
        max-width: 450px;
    }

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

    .principles article {
        padding-top: 22px;
    }

    .principles h3 {
        margin-top: 16px;
    }

    .principles p {
        max-width: 500px;
    }

    .steps-grid,
    .demo-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .desktop-break {
        display: none;
    }

    .demo-copy {
        padding-top: 0;
    }

    .demo-copy h2 {
        font-size: 43px;
    }

    .demo-copy h2 br {
        display: none;
    }

    .demo-copy > p {
        max-width: 550px;
    }

    .contact-options {
        flex-flow: wrap;
        gap: 20px;
    }

    .demo-signature {
        display: none;
    }

    .form-card {
        width: 100%;
        max-width: 600px;
        margin: auto;
        padding: 28px;
    }

    .footer-top {
        flex-wrap: wrap;
    }

    .footer-top p {
        order: 3;
        width: 100%;
    }

    .footer-bottom {
        flex-wrap: wrap;
        gap: 15px;
    }
}

@media (max-width: 420px) {
    .container {
        width: calc(100% - 32px);
    }

    h1 {
        letter-spacing: -1.8px;
    }

    .nav {
        gap: 10px;
    }

    .brand {
        gap: 7px;
        font-size: 21px;
    }

    .brand-official {
        width: 178px;
        max-width: 44vw;
    }

    .brand-official img {
        height: 49px;
    }

    .nav-cta {
        padding: 9px 10px;
        font-size: 12px;
    }

    .hero-artwork {
        top: 250px;
    }

    .impact-content {
        padding-bottom: 205px;
    }

    .impact-content h1 {
        letter-spacing: -1.8px;
        font-size: 44px;
    }

    .impact-content .hero-kicker {
        letter-spacing: 1px;
        gap: 7px;
        font-size: 9px;
    }

    .impact-content .hero-kicker .kicker-line {
        width: 14px;
    }

    .hero-actions {
        gap: 8px;
    }

    .impact-content .button {
        padding: 13px 14px;
        font-size: 12px;
    }

    .impact-bottom {
        padding-bottom: 25px;
    }

    .ecosystem-links {
        grid-template-columns: repeat(2, 1fr);
    }

    .ecosystem-links a:last-child {
        grid-column: span 2;
    }

    .solutions h2 {
        font-size: 31px;
    }

    .product-detail {
        padding: 22px;
    }

    .detail-copy h3 {
        font-size: 28px;
    }

    .detail-copy .button {
        padding: 12px 15px;
        font-size: 12px;
    }

    .preview-top {
        padding: 12px 15px;
    }

    .preview-body {
        padding: 17px;
    }

    .metric strong {
        font-size: 29px;
    }

    .demo-copy h2 {
        font-size: 36px;
    }

    .contact-options {
        flex-direction: column;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .form-card {
        padding: 22px;
    }

    .footer-top .brand-official {
        max-width: 65vw;
    }
}

@media (hover: hover) {
    .product-preview tbody tr:hover,
    .product-preview thead tr:hover {
        background-color: #f1f4f9;
    }
}

@keyframes hero-arrive {
    0% {
        opacity: .4;
        transform: scale(1.035);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

    *,
    ::before,
    ::after {
        transition: none !important;
        animation: none !important;
    }
}