/* Original product dashboard illustration, restored for the landing hero. */
.hero-product {
    --teal: #16a99d;
    --coral: #ff715f;
    --yellow: #f8c84e;
    min-width: 0;
}
.hero-product h3, .hero-product p { margin: 0; }

.hero-product {
    position: relative;
    min-height: 655px;
}

.product-window {
    position: absolute;
    top: 24px;
    left: 0;
    width: 760px;
    overflow: hidden;
    border: 1px solid rgba(8, 33, 63, .12);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 38px 100px rgba(8, 33, 63, .2);
    transform: rotate(.35deg);
}

.window-top {
    position: relative;
    display: flex;
    height: 36px;
    align-items: center;
    padding: 0 14px;
    border-bottom: 1px solid #e8eef0;
    background: #fbfcfc;
}

.browser-dots { display: flex; gap: 5px; }
.browser-dots i { width: 6px; height: 6px; border-radius: 50%; background: #d7e0e3; }
.browser-dots i:first-child { background: var(--coral); }
.browser-dots i:nth-child(2) { background: var(--yellow); }
.browser-dots i:last-child { background: var(--teal-bright); }
.window-url {
    position: absolute;
    left: 50%;
    min-width: 190px;
    padding: 3px 18px;
    border: 1px solid #e9eef0;
    border-radius: 7px;
    color: #8295a5;
    background: #f4f7f7;
    font: 600 8.5px "Outfit", sans-serif;
    text-align: center;
    transform: translateX(-50%);
}

.app-shell {
    display: grid;
    min-height: 525px;
    grid-template-columns: 142px 1fr;
    gap: 10px;
    padding: 10px;
    background: #f3f6f8;
}

.app-side {
    padding: 14px 9px;
    border: 1px solid #e1e9ed;
    border-radius: 17px;
    color: #66788a;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 14px 34px rgba(8, 33, 63, .06);
}

.app-side-brand { display: flex; align-items: center; gap: 7px; margin: 1px 7px 7px; }
.app-side-logo { width: 20px; height: 22px; flex: 0 0 auto; }
.app-side-word { width: 53px; height: auto; }
.side-group {
    display: block;
    margin: 5px 8px 2px;
    color: #a2afba;
    font-size: 4.8px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.side-item { display: flex; align-items: center; gap: 6px; margin-bottom: 1px; padding: 4px 7px; border-radius: 7px; font-size: 6.5px; font-weight: 700; line-height: 1.15; }
.side-item svg { width: 11px; height: 11px; flex: 0 0 auto; }
.side-item.active { color: #fff; background: var(--teal); box-shadow: 0 7px 16px rgba(22, 169, 157, .22); }

.app-main { padding: 15px 12px; }
.app-heading { display: flex; align-items: flex-start; justify-content: space-between; }
.app-heading small { display: block; margin-bottom: 3px; color: #91a0ad; font-size: 8px; }
.app-heading strong { color: var(--navy); font-size: 18px; }
.app-date { padding: 6px 9px; border: 1px solid #dde6e8; border-radius: 7px; color: #738697; background: #fff; font-size: 7px; }

.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-top: 20px; }
.metric { padding: 14px; border: 1px solid #e4ebed; border-radius: 13px; background: #fff; }
.metric-label { color: #8495a4; font-size: 7px; }
.metric-value { display: block; margin-top: 4px; color: var(--navy); font: 700 18px "Outfit", sans-serif; }
.metric-trend { display: block; margin-top: 5px; color: var(--teal); font-size: 7px; font-weight: 700; }

.chart-card { margin-top: 12px; padding: 15px; border: 1px solid #e4ebed; border-radius: 14px; background: #fff; }
.chart-title { display: flex; align-items: center; justify-content: space-between; color: var(--navy); font-size: 9px; font-weight: 800; }
.legend { display: flex; gap: 9px; color: #8394a2; font-size: 6px; font-weight: 600; }
.legend i { display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%; background: var(--teal); }
.legend span:last-child i { background: var(--coral); }
.chart { position: relative; height: 135px; margin-top: 9px; overflow: hidden; }
.chart-lines { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, transparent 0, transparent 33px, #edf1f2 34px); }
.chart svg { position: relative; z-index: 2; width: 100%; height: 100%; overflow: visible; }

.activity-strip { display: grid; grid-template-columns: 1.1fr .9fr; gap: 12px; margin-top: 12px; }
.activity-box { padding: 12px; border: 1px solid #e4ebed; border-radius: 12px; background: #fff; }
.activity-title { margin-bottom: 9px; color: var(--navy); font-size: 8px; font-weight: 800; }
.activity-row { display: flex; align-items: center; gap: 7px; padding: 5px 0; border-top: 1px solid #f0f3f4; color: #718495; font-size: 6px; }
.activity-row b { margin-left: auto; color: var(--navy); font-size: 6px; }
.activity-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }

.phone {
    position: absolute;
    z-index: 4;
    right: -28px;
    bottom: 16px;
    width: 204px;
    padding: 5px;
    border: 1px solid #26394e;
    border-radius: 32px;
    background: #0c1e31;
    box-shadow: 0 28px 58px rgba(8, 33, 63, .25), inset 0 0 0 1px rgba(255, 255, 255, .06);
    transform: rotate(-2deg);
}

.phone-screen { height: 415px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .16); border-radius: 27px; background: #f3f6f8; }
.phone-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 9px 13px 6px; color: var(--navy); font: 700 7px "Outfit", sans-serif; }
.phone-time { justify-self: start; letter-spacing: -.02em; }
.phone-notch { width: 43px; height: 12px; border-radius: 20px; background: linear-gradient(180deg, #132b41, #071727); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .08); }
.phone-status-icons { display: block; width: 31px; height: 9px; justify-self: end; }
.phone-systembar { display: grid; grid-template-columns: 29px 1fr 29px 29px; gap: 5px; align-items: center; padding: 4px 10px 7px; }
.phone-icon-button { display: flex; width: 29px; height: 29px; align-items: center; justify-content: center; border: 1px solid #e1e8ec; border-radius: 10px; color: #526779; background: #fff; box-shadow: 0 4px 10px rgba(8, 33, 63, .05); }
.phone-systembar > .phone-icon-button:first-child { border-color: transparent; color: #fff; background: var(--teal); }
.phone-icon-button svg { width: 12px; height: 12px; }
.phone-wallet { display: flex; min-width: 0; align-items: center; padding: 5px 8px; border: 1px solid rgba(22, 169, 157, .18); border-radius: 10px; background: #fff; box-shadow: 0 4px 10px rgba(8, 33, 63, .05); }
.phone-wallet span { display: block; color: #94a1ac; font-size: 5px; font-weight: 800; text-transform: uppercase; }
.phone-wallet strong { display: block; margin-top: 1px; color: var(--teal); font: 800 9px "Outfit", sans-serif; }
.phone-content { padding: 5px 11px 12px; }
.phone-page-heading { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.phone-page-heading img { width: 22px; height: 22px; padding: 3px; border: 1px solid #dfe7eb; border-radius: 8px; background: #fff; }
.phone-page-heading small { display: block; color: #9aa7b2; font-size: 5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.phone-page-heading h3 { margin-top: 1px; color: var(--navy); font-size: 13px; }
.balance { margin-top: 0; padding: 13px 14px; border-radius: 15px; color: #fff; background: linear-gradient(145deg, #16a99d, #0d746c); }
.balance span { font-size: 7px; opacity: .7; }
.balance strong { display: block; margin: 3px 0 8px; font: 700 20px "Outfit", sans-serif; }
.balance em { display: inline-flex; padding: 5px 8px; border-radius: 7px; color: #173354; background: #fff; font-size: 6px; font-style: normal; font-weight: 800; }
.phone-card { margin-top: 7px; padding: 9px 10px; border: 1px solid #e3eaec; border-radius: 12px; background: #fff; box-shadow: 0 4px 11px rgba(8, 33, 63, .04); }
.phone-card-head { display: flex; align-items: center; justify-content: space-between; color: var(--navy); font-size: 8px; font-weight: 800; }
.phone-card-head b { color: var(--coral); }
.phone-card p { margin-top: 4px; color: #8b9aa6; font-size: 5.5px; line-height: 1.4; }
.phone-status-pill { display: inline-flex; margin-top: 5px; padding: 3px 6px; border-radius: 99px; color: #0d7e75; background: #dff6f2; font-size: 5.5px; font-weight: 800; }

.floating-note {
    position: absolute;
    z-index: 6;
    top: 0;
    right: -20px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px;
    border: 1px solid rgba(8, 33, 63, .09);
    border-radius: 13px;
    color: var(--navy);
    background: rgba(255,255,255,.92);
    box-shadow: 0 14px 36px rgba(8, 33, 63, .14);
    font-size: 10px;
    font-weight: 800;
}

.floating-note i { width: 10px; height: 10px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 5px rgba(22,169,157,.12); }

@media (max-width: 1400px) and (min-width: 1101px) {
    .hero-product { min-height: 585px; }
    .product-window { transform: rotate(.35deg) scale(.82); transform-origin: top left; }
    .phone { right: -8px; bottom: 7px; transform: rotate(-2deg) scale(.88); transform-origin: bottom right; }
    .floating-note { right: 0; }
}

@media (max-width: 1100px) {
    .hero-grid { grid-template-columns: 1fr; gap: 45px; }
    .hero-copy { max-width: 690px; }
    .hero-product { width: min(760px, 100%); margin: 0 auto; }
    .product-window { left: 50%; transform: translateX(-50%) rotate(.35deg); }
    .phone { right: 0; }
    .floating-note { right: 0; }
}

@media (max-width: 760px) {
    .hero-product { min-height: 555px; }
    .product-window { left: 0; transform: rotate(.35deg) scale(.82); transform-origin: top left; }
    .phone { right: 0; bottom: 12px; transform: rotate(-2deg) scale(.85); transform-origin: bottom right; }
}

@media (max-width: 650px) {
    .hero-product { min-height: 490px; }
    .product-window { top: 18px; transform: rotate(.35deg) scale(.70); }
    .phone { bottom: 8px; transform: rotate(-2deg) scale(.8); }
    .floating-note { top: 0; right: 6px; font-size: 8px; }
}

@media (max-width: 500px) {
    .hero-product { min-height: 410px; }
    .product-window { top: 17px; transform: rotate(.35deg) scale(.56); }
    .phone { right: -4px; bottom: 2px; transform: rotate(-2deg) scale(.73); }
    .floating-note { display: none; }
}

@media (max-width: 400px) {
    .hero-product { min-height: 370px; }
    .product-window { transform: rotate(.35deg) scale(.48); }
    .phone { right: -7px; transform: rotate(-2deg) scale(.68); }
}

@media (max-width: 360px) {
    .hero-product { min-height: 345px; }
    .product-window { transform: rotate(.35deg) scale(.39); }
    .phone { right: -9px; transform: rotate(-2deg) scale(.62); }
}