:root {
    --platform-ink: #07142b;
    --platform-navy: #0b2248;
    --platform-blue: #2769bd;
    --platform-cyan: #48a6dc;
    --platform-muted: #64748b;
    --platform-line: #dce5ef;
    --platform-background: #f4f7fa;
    --platform-orange: #f47b34;
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 105px;
}

html,
body {
    min-height: 100%;
    margin: 0;
}

body {
    overflow-x: hidden;
    color: var(--platform-ink);
    background: #fff;
    font-family: "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.platform-header {
    width: min(1240px, calc(100% - 48px));
    min-height: 88px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    border-bottom: 1px solid #edf1f5;
}

.platform-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.platform-brand img {
    display: block;
    width: 188px;
    height: auto;
}

.platform-brand span {
    padding: 6px 9px;
    color: #244f7f;
    background: #edf6fc;
    border: 1px solid #b9cce0;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.platform-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 25px;
}

.platform-nav a {
    color: #475569;
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
}

.platform-nav a:hover,
.platform-nav a:focus-visible {
    color: var(--platform-blue);
}

.platform-nav .platform-nav__cta {
    padding: 12px 19px;
    color: #fff;
    background: var(--platform-navy);
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(11, 34, 72, .14);
}

.platform-nav .platform-nav__cta:hover,
.platform-nav .platform-nav__cta:focus-visible {
    color: #fff;
    background: #163b70;
}

.platform-hero {
    position: relative;
    width: min(1240px, calc(100% - 48px));
    min-height: 655px;
    margin: 0 auto;
    padding: 88px 0 64px;
    display: grid;
    grid-template-columns: .91fr 1.09fr;
    align-items: center;
    gap: 54px;
}

.platform-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 12px;
    right: -190px;
    width: 610px;
    height: 610px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(72, 166, 220, .13), rgba(72, 166, 220, 0) 66%);
}

.platform-eyebrow,
.platform-section-label,
.platform-capabilities__intro > span,
.platform-final-cta > div > span {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #276293;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.platform-eyebrow {
    margin-bottom: 22px;
}

.platform-eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--platform-cyan);
}

.platform-hero h1 {
    max-width: 600px;
    margin: 0;
    font-size: clamp(48px, 5vw, 64px);
    font-weight: 800;
    line-height: 1.02;
}

.platform-hero h1 em {
    color: var(--platform-blue);
    font-style: normal;
}

.platform-hero__copy > p {
    max-width: 545px;
    margin: 25px 0 31px;
    color: #5f6f84;
    font-size: 18px;
    line-height: 1.65;
}

.platform-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.platform-button {
    min-height: 54px;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.platform-button:hover { transform: translateY(-2px); }

.platform-button:focus-visible,
.platform-nav a:focus-visible {
    outline: 3px solid rgba(72, 166, 220, .4);
    outline-offset: 4px;
}

.platform-button--primary {
    color: #fff;
    background: var(--platform-navy);
    border: 1px solid var(--platform-navy);
    box-shadow: 0 13px 26px rgba(11, 34, 72, .2);
}

.platform-button--primary:hover { box-shadow: 0 16px 32px rgba(11, 34, 72, .27); }

.platform-button--secondary {
    color: var(--platform-navy);
    background: #fff;
    border: 1px solid #b9c8da;
}

.platform-button--secondary:hover { border-color: #7898bb; }

.platform-note {
    margin-top: 18px;
    color: #8a99aa;
    font-size: 11px;
}

.platform-note i {
    padding: 0 8px;
    color: #bdc7d3;
    font-style: normal;
}

.platform-preview {
    position: relative;
    height: 510px;
}

.shop-desktop {
    position: absolute;
    top: 16px;
    right: 0;
    width: 600px;
    height: 410px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #cdd9e6;
    border-radius: 19px;
    box-shadow: 0 35px 70px rgba(34, 57, 86, .2);
}

.shop-browser-bar {
    height: 34px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f5f7fa;
    border-bottom: 1px solid #e4e9ef;
}

.shop-browser-bar > i {
    width: 7px;
    height: 7px;
    background: #c5ced9;
    border-radius: 50%;
}

.shop-browser-bar > span {
    width: 245px;
    height: 17px;
    margin-left: 12px;
    padding-left: 10px;
    display: flex;
    align-items: center;
    color: #8391a2;
    background: #fff;
    border: 1px solid #dfe5ec;
    border-radius: 5px;
    font-size: 7px;
}

.shop-preview-nav {
    height: 58px;
    padding: 0 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.shop-preview-nav > strong { font-size: 13px; }
.shop-preview-nav > strong em { color: var(--platform-orange); font-style: normal; }
.shop-preview-nav > div { display: flex; gap: 16px; color: #758296; font-size: 7px; font-weight: 700; }

.shop-preview-nav > b {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    color: #fff;
    background: #102e5c;
    border-radius: 50%;
    font-size: 9px;
}

.shop-preview-hero {
    height: 142px;
    margin: 0 18px;
    padding: 26px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    background: #f5eee7;
    border-radius: 12px;
}

.shop-preview-hero small,
.shop-phone__hero small {
    color: #b05e2c;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .1em;
}

.shop-preview-hero h2 {
    width: 220px;
    margin: 7px 0 9px;
    font-family: Georgia, serif;
    font-size: 24px;
    line-height: 1.03;
}

.shop-preview-action {
    display: inline-block;
    padding: 7px 12px;
    color: #fff;
    background: #191919;
    border-radius: 999px;
    font-size: 6px;
    font-weight: 800;
}

.shop-preview-art { position: relative; width: 145px; height: 115px; }
.shop-plate { position: absolute; right: 5px; bottom: -12px; width: 122px; height: 55px; background: #fff; border-radius: 50%; box-shadow: 0 9px 14px rgba(85, 66, 45, .15); }
.shop-cup { position: absolute; right: 42px; bottom: 32px; width: 56px; height: 59px; background: #d99761; border-radius: 7px 7px 18px 18px; box-shadow: inset 0 8px #f1dbc8; }
.shop-leaf { position: absolute; width: 39px; height: 20px; background: #738c5e; border-radius: 100% 0 100% 0; transform: rotate(-25deg); }
.shop-leaf--one { top: 19px; left: 6px; }
.shop-leaf--two { top: 31px; right: 8px; transform: rotate(155deg); }

.shop-preview-heading {
    margin: 21px 24px 12px;
    display: flex;
    align-items: end;
    justify-content: space-between;
}

.shop-preview-heading h3 { margin: 0; font-size: 14px; }
.shop-preview-heading span { color: #738196; font-size: 7px; }

.shop-products {
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.shop-products > div { display: flex; flex-direction: column; font-size: 7px; }

.shop-products i {
    position: relative;
    height: 76px;
    margin-bottom: 7px;
    overflow: hidden;
    background: #eff2f4;
    border-radius: 8px;
}

.shop-products i::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46px;
    height: 46px;
    background: #c88c64;
    border-radius: 50% 50% 46% 54%;
    box-shadow: 0 12px 0 -5px rgba(255, 255, 255, .85);
    transform: translate(-50%, -44%);
}

.shop-products > div:nth-child(2) i { background: #eef4ef; }
.shop-products > div:nth-child(2) i::after { background: #688b73; }
.shop-products > div:nth-child(3) i { background: #f7f2e7; }
.shop-products > div:nth-child(3) i::after { background: #d1a34e; }
.shop-products strong { font-weight: 750; }
.shop-products span,
.shop-phone__products span { margin-top: 4px; color: #69778a; }

.shop-phone {
    position: absolute;
    bottom: 2px;
    left: 5px;
    z-index: 2;
    width: 180px;
    height: 356px;
    padding: 8px;
    background: #101827;
    border: 1px solid #aab9ca;
    border-radius: 30px;
    box-shadow: 0 30px 50px rgba(17, 38, 64, .27);
    transform: rotate(-2deg);
}

.shop-phone__screen { height: 100%; overflow: hidden; background: #fff; border-radius: 23px; }
.shop-phone__top { height: 26px; display: flex; justify-content: center; }
.shop-phone__top i { width: 53px; height: 13px; background: #101827; border-radius: 0 0 10px 10px; }
.shop-phone__brand { padding: 7px 13px 12px; display: flex; align-items: center; justify-content: space-between; font-size: 9px; }
.shop-phone__hero { margin: 0 9px; padding: 15px 11px; background: #f5eee7; border-radius: 9px; }
.shop-phone__hero small { font-size: 5px; }
.shop-phone__hero h3 { width: 110px; margin: 5px 0 8px; font-family: Georgia, serif; font-size: 15px; line-height: 1.05; }
.shop-phone__products { padding: 13px 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.shop-phone__products > div { display: flex; flex-direction: column; font-size: 5px; }
.shop-phone__products i { height: 62px; margin-bottom: 4px; background: linear-gradient(145deg, #e6eee7, #acc5b1); border-radius: 7px; }
.shop-phone__products > div:nth-child(2) i { background: linear-gradient(145deg, #f5eee4, #d8b98f); }

.platform-capabilities {
    padding: 105px max(24px, calc((100% - 1184px) / 2));
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 100px;
    background: var(--platform-background);
}

.platform-capabilities__intro { align-self: start; position: sticky; top: 70px; }
.platform-capabilities__intro h2,
.platform-steps > h2,
.platform-final-cta h2 { margin: 16px 0 20px; font-size: clamp(38px, 4vw, 54px); line-height: 1.08; }
.platform-capabilities__intro p { max-width: 440px; margin: 0; color: var(--platform-muted); font-size: 17px; line-height: 1.7; }
.platform-capabilities__list { border-top: 1px solid #ced8e3; }
.platform-capabilities__list article { padding: 25px 0; display: grid; grid-template-columns: 54px 1fr; gap: 16px; border-bottom: 1px solid #ced8e3; }
.platform-capabilities__list article > b { padding-top: 4px; color: var(--platform-blue); font-size: 11px; }
.platform-capabilities__list h3 { margin: 0 0 7px; font-size: 22px; }
.platform-capabilities__list p { max-width: 520px; margin: 0; color: var(--platform-muted); font-size: 15px; line-height: 1.6; }

.platform-steps {
    width: min(1184px, calc(100% - 48px));
    margin: 0 auto;
    padding: 110px 0 120px;
}

.platform-steps > h2 { max-width: 700px; }
.platform-steps__track { position: relative; margin-top: 62px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 55px; }
.platform-steps__track::before { content: ""; position: absolute; top: 21px; right: 9%; left: 5%; height: 1px; background: #cbd6e1; }
.platform-steps__track article { position: relative; }
.platform-steps__track article > b { position: relative; z-index: 1; width: 43px; height: 43px; display: grid; place-items: center; color: #fff; background: var(--platform-navy); border: 6px solid #fff; border-radius: 50%; font-size: 11px; }
.platform-steps__track h3 { margin: 22px 0 10px; font-size: 21px; }
.platform-steps__track p { margin: 0; color: var(--platform-muted); font-size: 15px; line-height: 1.65; }

.platform-final-cta {
    width: min(1184px, calc(100% - 48px));
    margin: 0 auto 80px;
    padding: 55px 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 45px;
    color: #fff;
    background: var(--platform-navy);
    border-radius: 24px;
    box-shadow: 0 28px 65px rgba(11, 34, 72, .2);
}

.platform-final-cta > div > span { color: #9ed6f4; }
.platform-final-cta h2 { max-width: 610px; margin-bottom: 0; font-size: clamp(35px, 3.5vw, 49px); }
.platform-final-cta .platform-actions { flex-shrink: 0; flex-direction: column; align-items: stretch; }
.platform-button--light { color: var(--platform-navy); background: #fff; border: 1px solid #fff; }
.platform-button--outline-light { color: #fff; border: 1px solid #7592b5; }

.platform-footer {
    width: min(1184px, calc(100% - 48px));
    min-height: 105px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--platform-line);
}

.platform-brand--footer img { width: 150px; }
.platform-footer p { color: #8a98a8; font-size: 12px; }

@media (max-width: 1080px) {
    .platform-header { padding: 18px 0; align-items: flex-start; }
    .platform-nav { max-width: 600px; flex-wrap: wrap; row-gap: 13px; }
    .platform-hero { grid-template-columns: 1fr; padding-top: 70px; }
    .platform-hero__copy { max-width: 720px; }
    .platform-preview { width: 680px; max-width: 100%; margin: 0 auto; }
    .platform-capabilities { gap: 60px; }
    .platform-final-cta { align-items: flex-start; flex-direction: column; }
    .platform-final-cta .platform-actions { flex-direction: row; }
}

@media (max-width: 760px) {
    html { scroll-padding-top: 20px; }
    .platform-header { width: calc(100% - 28px); align-items: center; flex-direction: column; gap: 16px; }
    .platform-brand img { width: min(188px, 58vw); }
    .platform-nav { width: 100%; justify-content: center; gap: 12px 18px; text-align: center; }
    .platform-nav a { font-size: 12px; }
    .platform-nav .platform-nav__cta { padding: 10px 15px; }
    .platform-hero { width: calc(100% - 28px); padding: 58px 0 42px; }
    .platform-hero h1 { font-size: clamp(42px, 12vw, 56px); }
    .platform-hero__copy > p { font-size: 16px; }
    .platform-actions { align-items: stretch; flex-direction: column; }
    .platform-button { width: 100%; }
    .platform-note { line-height: 1.8; text-align: center; }
    .platform-preview { height: 390px; transform: scale(.72); transform-origin: left top; width: 680px; max-width: none; }
    .platform-capabilities { padding-top: 75px; padding-bottom: 80px; grid-template-columns: 1fr; gap: 50px; }
    .platform-capabilities__intro { position: static; }
    .platform-steps { width: calc(100% - 36px); padding: 80px 0; }
    .platform-steps__track { grid-template-columns: 1fr; gap: 38px; }
    .platform-steps__track::before { top: 21px; bottom: 40px; left: 21px; width: 1px; height: auto; }
    .platform-steps__track article { padding-left: 66px; }
    .platform-steps__track article > b { position: absolute; left: 0; top: 0; }
    .platform-steps__track h3 { margin-top: 0; }
    .platform-final-cta { width: calc(100% - 28px); margin-bottom: 50px; padding: 42px 28px; border-radius: 20px; }
    .platform-final-cta .platform-actions { width: 100%; flex-direction: column; }
    .platform-footer { width: calc(100% - 36px); align-items: flex-start; flex-direction: column; justify-content: center; gap: 12px; padding: 24px 0; }
    .platform-footer p { margin: 0; }
}

@media (max-width: 520px) {
    .platform-preview { height: 335px; transform: scale(.6); }
    .platform-capabilities__list article { grid-template-columns: 42px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .platform-button { transition: none; }
}