/* KANZPAY V12 — human editorial commerce theatre */
:root {
    --ink: #08090b;
    --ink2: #121316;
    --paper: #f8f4ec;
    --cream: #efe7da;
    --text: #171717;
    --muted: #6c655c;
    --gold1: #fff0ae;
    --gold2: #e6b94e;
    --gold3: #9b6415;
    --gold4: #f8db7e;
    --glass: rgba(255, 255, 255, .13);
    --shadow: 0 24px 80px rgba(34, 24, 10, .16);
    --radius: 28px
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    background: var(--ink)
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--text);
    font-family: Georgia, 'Times New Roman', serif;
    overflow-x: hidden
}

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

.scene {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 92px 0 46px
}

.inner {
    width: min(1325px, calc(100% - 72px));
    margin: auto;
    position: relative;
    z-index: 3
}

.eyebrow {
    font-size: 11px;
    letter-spacing: .19em;
    text-transform: uppercase;
    font-weight: 800;
    color: #ad771d;
    margin-bottom: 14px
}

.dark .eyebrow,
.hero .eyebrow {
    color: #e1b44d
}

h1,
h2 {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 500;
    line-height: .96;
    letter-spacing: -.045em;
    margin: 0;
}

.contact-shell h1 {
    white-space: normal !important;
}

h1 {
    font-size: clamp(58px, 6vw, 88px)
}

h2 {
    font-size: clamp(40px, 4.3vw, 64px)
}

p {
    font-size: 16px;
    line-height: 1.55
}

.metal {
    background: linear-gradient(180deg, var(--gold1), var(--gold4) 28%, #d39a28 48%, #86520d 72%, var(--gold4));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 8px 30px rgba(169, 105, 16, .13)
}

.glass {
    background: linear-gradient(135deg, rgba(255, 255, 255, .19), rgba(255, 255, 255, .07));
    border: 1px solid rgba(255, 255, 255, .24);
    box-shadow: inset 0 1px rgba(255, 255, 255, .2), 0 26px 72px rgba(0, 0, 0, .22);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border-radius: var(--radius)
}

.metal-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 20px;
    border-radius: 999px;
    font-weight: 800;
    background: linear-gradient(180deg, #fae49c, #d9a73b 52%, #986116);
    color: #181007;
    border: 1px solid rgba(255, 245, 199, .7);
    box-shadow: inset 0 1px rgba(255, 255, 255, .7), 0 12px 32px rgba(160, 99, 12, .25);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

.metal-button:after {
    content: "";
    position: absolute;
    inset: -3px;
    transform: translateX(-150%);
    background: linear-gradient(110deg, transparent 36%, rgba(255, 255, 255, .78) 50%, transparent 64%);
    transition: .7s
}

.metal-button:hover:after {
    transform: translateX(150%)
}

.ghost-button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 20px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, .07);
    backdrop-filter: blur(14px);
    white-space: nowrap;
}

.actions {
    display: flex;
    gap: 12px;
    margin-top: 24px
}

.nav {
    position: fixed;
    z-index: 100;
    top: 14px;
    left: 0;
    right: 0
}

.navin {
    width: min(1260px, calc(100% - 64px));
    height: 64px;
    margin: auto;
    display: flex;
    align-items: center;
    padding: 0 18px;
    border-radius: 22px;
    background: rgba(10, 11, 13, .63);
    border: 1px solid rgba(255, 255, 255, .17);
    backdrop-filter: blur(24px) saturate(150%);
    box-shadow: 0 16px 50px rgba(0, 0, 0, .18)
}

.brand {
    display: flex;
    align-items: center;
    margin-right: auto
}

.brand img {
    height: 60px;
    width: auto;
    max-width: 270px;
    display: block
}

.navlinks {
    display: flex;
    gap: 23px;
    color: #fff;
    font-size: 12px;
    margin-right: 22px
}

.navlinks a {
    opacity: .8;
    font-family: Georgia, 'Times New Roman', serif;
}

.navlinks a:hover {
    opacity: 1;
    color: #f1ce72
}

.gold-thread {
    position: fixed;
    z-index: 65;
    left: 25px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(225, 176, 66, .42) 10%, rgba(225, 176, 66, .62) 50%, rgba(225, 176, 66, .36) 90%, transparent);
    pointer-events: none
}

.gold-thread i {
    position: absolute;
    left: -4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff9d9, #f1c85c 45%, #89540f);
    box-shadow: 0 0 20px #e2b44b;
    top: var(--scroll, 6%)
}

/* hero */
.hero {
    background: #08090b;
    color: #fff
}

.hero-photo {
    position: absolute;
    inset: 0
}

.hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(1.04) contrast(1.02)
}

.hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5, 6, 8, .91) 0%, rgba(5, 6, 8, .79) 42%, rgba(5, 6, 8, .31) 71%, rgba(5, 6, 8, .58) 100%);
    z-index: 1
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr .9fr;
    gap: 6vw;
    align-items: center
}

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

.hero-copy h1 {
    white-space: nowrap;
}

.hero-copy p {
    max-width: 600px;
    color: #ddd8cf
}

.hero-proof {
    display: inline-flex;
    gap: 16px;
    margin-top: 26px;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 10px
}

.hero-proof b {
    color: #edc965
}

.commerce-orbit {
    justify-self: end;
    width: 380px;
    padding: 24px;
    color: #fff
}

.commerce-orbit small {
    letter-spacing: .14em;
    color: #e8bd56
}

.commerce-orbit .amount {
    font-family: Georgia, serif;
    font-size: 50px;
    margin: 10px 0
}

.commerce-orbit .line {
    padding: 8px 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: 12px
}

.commerce-orbit .completion {
    margin: 14px -24px 0;
    padding: 14px 24px;
    background: linear-gradient(90deg, #956014, #e0b34b, #f5da8b);
    color: #171006;
    font-weight: 800
}

.commerce-orbit .outcomes {
    display: flex;
    justify-content: space-between;
    padding-top: 12px;
    font-size: 10px;
    color: #cbc5bb
}

/* change */
.change {
    background: radial-gradient(circle at 72% 24%, #fffdf8, #eee6da 70%)
}

.change-copy {
    max-width: 980px
}

.change-copy p {
    max-width: 760px;
    color: var(--muted)
}

.change-stage {
    display: grid;
    grid-template-columns: .38fr 74px 1fr;
    gap: 22px;
    align-items: center;
    margin-top: 34px
}

.blind {
    color: #8d867e;
    padding-right: 6px
}

.blind .big {
    font-family: Georgia, serif;
    font-size: 64px;
    color: #bdb5aa
}

.blind .step {
    padding: 7px 0;
    border-bottom: 1px solid #d4ccbf;
    font-size: 13px
}

.blind b {
    display: block;
    margin-top: 8px;
    font-size: 22px
}

.bridge {
    text-align: center;
    font-size: 9px;
    letter-spacing: .14em;
    color: #91887d
}

.bridge:before {
    content: "";
    display: block;
    width: 1px;
    height: 105px;
    background: linear-gradient(transparent, #c7932d, transparent);
    margin: auto auto 8px
}

.live-commerce {
    padding: 24px;
    color: #fff;
    background: linear-gradient(145deg, rgba(13, 14, 17, .96), rgba(28, 29, 33, .9))
}

.live-commerce small {
    color: #e2b550;
    letter-spacing: .13em
}

.invoice-head {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #38393c;
    border-bottom: 1px solid #38393c;
    padding: 14px 0;
    margin-top: 14px
}

.invoice-head strong {
    font-family: Georgia, serif;
    font-size: 33px
}

.flow {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 0;
    font-size: 11px;
    flex-wrap: wrap
}

.flow span {
    opacity: .38;
    transition: .35s
}

.flow span.active {
    opacity: 1;
    color: #efcb6b
}

.flow i {
    color: #d6a640
}

.completion {
    margin: 4px -24px 0;
    padding: 13px 24px;
    background: linear-gradient(90deg, #956014, #deb24b, #f6dc8d);
    color: #171006;
    font-weight: 800;
    font-size: 12px
}

.keeps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 13px;
    font-size: 11px
}

.keeps small {
    display: block;
    color: #e0b44e;
    margin-bottom: 3px
}

/* product reality */
.product-reality {
    background: #0a0b0d;
    color: #fff
}

.reality-grid {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: 5vw;
    align-items: center
}

.reality-copy p {
    color: #cbc6bd;
    max-width: 520px
}

.phone-stage {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    align-items: center
}

.phone {
    background: #f9f9f7;
    color: #111;
    border-radius: 34px;
    padding: 13px;
    box-shadow: 0 35px 90px rgba(0, 0, 0, .36);
    min-height: 500px;
    border: 1px solid rgba(255, 255, 255, .25)
}

.phone:nth-child(1) {
    transform: translateY(28px) scale(.94);
    height: 550px;
}

.phone:nth-child(2) {
    z-index: 2
}

.phone:nth-child(3) {
    transform: translateY(22px) scale(.95)
}

.phone-top {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    font-weight: 700;
    padding: 5px 4px 10px
}

.phone h4 {
    margin: 8px 2px 12px;
    font-size: 15px
}

.checkout-hero {
    background: linear-gradient(145deg, #241b05, #090907);
    color: #fff;
    border-radius: 19px;
    padding: 16px
}

.checkout-hero small {
    color: #c9bfae
}

.checkout-hero strong {
    display: block;
    font-size: 31px;
    margin: 5px 0
}

.checkout-hero .save {
    color: #35b864;
    font-size: 11px
}

.ai-save {
    margin-top: 10px;
    padding: 10px 11px;
    border-radius: 12px;
    background: #151514;
    color: #fff;
    font-size: 10px;
    display: flex;
    justify-content: space-between
}

.pay-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px
}

.pay-choice div {
    border: 1px solid #ddd6c6;
    border-radius: 12px;
    padding: 10px;
    font-size: 9px
}

.pay-choice b {
    display: block;
    font-size: 11px;
    margin-bottom: 3px
}

.recommended {
    border-color: #d8aa44 !important;
    box-shadow: inset 0 0 0 1px #d8aa44
}

.reward-row {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding: 10px;
    border-radius: 12px;
    background: #fff6d8;
    font-size: 9px
}

.split-btn {
    margin-top: 10px;
    border: 1px solid #222;
    border-radius: 12px;
    text-align: center;
    padding: 10px;
    font-size: 10px;
    font-weight: 700
}

.saving-sheet {
    display: grid;
    gap: 9px
}

.saving-card {
    border: 1px solid #e3dfd5;
    border-radius: 16px;
    padding: 13px
}

.saving-card .brandline {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700
}

.saving-card .applied {
    margin-top: 9px;
    border-radius: 10px;
    background: #eaf8ef;
    color: #258346;
    padding: 8px;
    font-size: 9px
}

.success-box {
    margin-top: 14px;
    border-radius: 18px;
    padding: 22px 12px;
    text-align: center;
    background: #edf9f1
}

.success-box .tick {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #35ad54;
    color: #fff;
    display: grid;
    place-items: center;
    margin: auto
}

.success-box b {
    display: block;
    margin-top: 10px
}

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

.earnings div {
    text-align: center;
    border-right: 1px solid #ddd;
    padding: 7px 2px;
    font-size: 8px
}

.earnings div:last-child {
    border-right: 0
}

.earnings b {
    display: block;
    font-size: 12px
}

.screen-caption {
    font-size: 10px;
    text-align: left;
    color: #c6c0b8;
    margin-top: 12px
}

/* buyer value */
.buyer-value {
    background: linear-gradient(180deg, #f7f3eb, #efe6d8)
}

.value-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 4vw;
    align-items: center
}

.value-copy p {
    max-width: 520px;
    color: var(--muted)
}

.benefit-wave {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: flex-end;
    /* Enforces equal alignment along the baseline */
    gap: 12px;
}

.benefit {
    position: relative;
    min-height: 245px;
    /* Fixed height for consistent vertical card proportions */
    border-radius: 36px 36px 24px 24px;
    background: #fff;
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.benefit:nth-child(2),
.benefit:nth-child(4) {
    transform: translateY(28px);
}

.benefit:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 46%;
    /* Keeps the gold header standard across all cards */
    background: linear-gradient(145deg, #36260d, #c5902b 52%, #f2d478);
    opacity: .92;
    z-index: 0;
}

.benefit .ico {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    margin: 18px auto 0 18px;
    /* Top & Left padding inside header */
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .85);
    font-size: 22px;
}

.benefit-content {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 48%;
    box-sizing: border-box;
}

.benefit b {
    display: flex;
    align-items: flex-end;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    color: #111;
    min-height: 36px;
    margin-bottom: 6px;
    white-space: nowrap;
}

.benefit span {
    font-size: 11px;
    line-height: 1.3;
    color: #766f65;
    display: block;
}

.should-purchase {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.smart-pay {
    margin-top: 38px;
    padding: 18px 20px;
    border-radius: 20px;
    background: #111318;
    color: #fff;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center
}

.smart-pay b {
    font-family: Georgia, serif;
    font-size: 23px
}

.smart-pay span {
    font-size: 11px;
    color: #cfc9bf
}

.smart-pay em {
    font-style: normal;
    color: #f0c65d;
    font-size: 11px
}

/* scan go */
.scan-go {
    background: #090a0c;
    color: #fff
}

.scan-grid {
    display: grid;
    grid-template-columns: .88fr 1.28fr;
    gap: 5vw;
    align-items: center
}

.scan-copy p {
    color: #d0cbc2;
    max-width: 520px
}

.scan-film {
    height: 530px;
    position: relative;
    border-radius: 34px;
    overflow: hidden;
    background: #1a1b1e;
    box-shadow: 0 35px 90px rgba(0, 0, 0, .4)
}

.scan-film img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(1.05) contrast(1.03)
}

.scan-film:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(7, 8, 10, .15), rgba(7, 8, 10, .05) 45%, rgba(7, 8, 10, .52))
}

.scan-overlay {
    position: absolute;
    z-index: 3;
    right: 26px;
    top: 28px;
    width: 280px;
    padding: 18px
}

.scan-overlay small {
    color: #e4b651;
    letter-spacing: .13em
}

.scan-overlay h4 {
    font-family: Georgia, serif;
    font-size: 26px;
    margin: 9px 0
}

.scan-cart {
    display: grid;
    gap: 7px;
    font-size: 10px
}

.scan-cart span {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-top: 7px
}

.scan-complete {
    margin-top: 14px;
    background: linear-gradient(90deg, #9c6516, #e2b64e, #f7dc8e);
    color: #171006;
    padding: 11px;
    border-radius: 12px;
    font-weight: 800;
    text-align: center;
    font-size: 11px
}

.scan-benefits {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 20px
}

.scan-benefits>* {
    /* (100% - total gap space) / 3 columns */
    flex: 0 0 calc((100% - 16px) / 3);
    box-sizing: border-box;
    min-width: 0;
}

.scan-benefits span {
    white-space: nowrap;
    text-align: center;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .15);
    font-size: 10px;
    background: rgba(255, 255, 255, .05)
}

/* business */
.business {
    background: #f5efe4
}

.business-grid {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: 5vw;
    align-items: center
}

.business-copy p {
    max-width: 520px;
    color: var(--muted)
}

.seller-surface {
    background: #fff;
    border-radius: 30px;
    padding: 22px;
    box-shadow: var(--shadow);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.seller-header {
    grid-column: 1/-1;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.seller-header strong {
    font-family: Georgia, serif;
    font-size: 24px
}

.seller-header span {
    font-size: 10px;
    color: #6c675f;
    margin-left: 5px;
}

.metric {
    border: 1px solid #e5dfd5;
    border-radius: 18px;
    padding: 15px
}

.metric small {
    color: #888178
}

.metric b {
    display: block;
    font-size: 20px;
    margin-top: 5px
}

.payout {
    grid-column: 1/-1;
    border-radius: 18px;
    padding: 14px 16px;
    background: #121317;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.payout b {
    color: #f0c65d
}

.seller-intel {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px
}

.seller-intel div {
    background: #f5f2ec;
    border-radius: 15px;
    padding: 11px;
    font-size: 10px
}

.seller-intel b {
    display: block;
    margin-top: 5px
}

.reward-config {
    grid-column: 1/-1;
    border: 1px solid #e3dccf;
    border-radius: 18px;
    padding: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px
}

.reward-config strong {
    color: #9e6c1d
}

.seller-gains {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 20px
}

.seller-gains span {
    text-align: center;
    font-size: 10px;
    padding: 8px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #ddd5c8
}

/* kace */
.kace {
    background: #0a0b0d;
    color: #fff
}

.kace-grid {
    display: grid;
    grid-template-columns: .90fr 1.18fr;
    gap: 5vw;
    align-items: center
}

.kace-copy p {
    color: #cbc6bd;
    max-width: 520px
}

.kace-stage {
    position: relative;
    height: 470px
}

.source-card,
.publish-card {
    position: absolute;
    width: 250px;
    border-radius: 24px;
    padding: 18px
}

.source-card {
    left: 0;
    top: 40px;
    background: #f6f1e7;
    color: #111
}

.publish-card {
    right: 0;
    bottom: 40px;
    background: #f6f1e7;
    color: #111
}

.source-card b,
.publish-card b {
    display: block;
    font-family: Georgia, serif;
    font-size: 24px;
    margin: 7px 0;
    white-space: nowrap;
}

.source-card span,
.publish-card span {
    font-size: 10px;
    color: #6e675e
}

.kace-core {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 190px;
    height: 190px;
    border-radius: 50%;
    display: grid;
    place-content: center;
    text-align: center;
    background: radial-gradient(circle, #3b2a0e, #17130c 58%, #0a0b0d 70%);
    border: 1px solid rgba(235, 186, 75, .45);
    box-shadow: 0 0 70px rgba(215, 164, 47, .14)
}

.kace-core b {
    font-family: Georgia, serif;
    font-size: 28px;
    color: #f0c964
}

.kace-core small {
    font-size: 9px;
    letter-spacing: .14em;
    color: #9c8b6e
}

.kace-line {
    position: absolute;
    left: 210px;
    right: 210px;
    top: 50%;
    height: 2px;
    background: linear-gradient(90deg, #6b4910, #f0c45d, #6b4910)
}

.kace-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f6d77d;
    box-shadow: 0 0 16px #e4b447;
    top: calc(50% - 4px);
    left: 22%;
    animation: kaceMove 5s linear infinite
}

@keyframes kaceMove {
    0% {
        left: 22%
    }

    100% {
        left: 77%
    }
}

/* market */
.market {
    background: linear-gradient(180deg, #f8f4ec, #eee5d8)
}

.market-grid {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: 5vw;
    align-items: center
}

.market-copy p {
    max-width: 520px;
    color: var(--muted)
}

.category-river {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 145px);
    /* 3 row slots */
    gap: 12px;
}

.category {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    box-shadow: var(--shadow)
}

.category:has(img[alt="Restaurant"]) {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.category:has(img[alt="Retail"]) {
    grid-column: 2;
    grid-row: 1;
}

.category:has(img[alt="Jeweller"]) {
    grid-column: 2;
    grid-row: 2;
}

.category:has(img[alt="Products"]) {
    grid-column: 3;
    grid-row: 1;
}

.category:has(img[alt="Travel"]) {
    grid-column: 1 / span 2;
    grid-row: 3;
}

.category:has(img[alt="SMEs"]) {
    grid-column: 3;
    grid-row: 2 / span 2;
}

.category img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.category span {
    position: absolute;
    left: 12px;
    bottom: 10px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(10, 11, 13, .56);
    backdrop-filter: blur(12px);
    color: #f1cc6b;
    font-size: 10px
}

/* .category:nth-child(1) {
    grid-row: span 2
}

.category:nth-child(5) {
    grid-column: span 2
}

.category:nth-child(6) {
    grid-column: 3;
  grid-row: 1 / span 2; 
  height: 100%;
  object-fit: cover;
} */

.market-thread {
    grid-column: 1/-1;
    height: 2px;
    background: linear-gradient(90deg, transparent, #a76e17, #f2cd67, #a76e17, transparent);
    box-shadow: 0 0 16px rgba(211, 159, 42, .3)
}

/* compounding */
.compound {
    background: #101114;
    color: #fff
}

.compound-grid {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: 5vw;
    align-items: center
}

.compound-copy p {
    color: #c9c4ba;
    max-width: 510px
}

.loop {
    position: relative;
    height: 390px
}

.loop-path {
    position: absolute;
    inset: 35px 65px;
    border: 1px solid rgba(227, 179, 69, .35);
    border-radius: 50%
}

.loop-node {
    position: absolute;
    width: 180px;
    padding: 15px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .13);
    backdrop-filter: blur(12px)
}

.loop-node small {
    font-size: 9px;
    color: #d4a33d;
    letter-spacing: .12em
}

.loop-node b {
    display: block;
    font-family: Georgia, serif;
    font-size: 21px;
    margin-top: 5px
}

.n1 {
    left: 0;
    top: 145px
}

.n2 {
    left: 34%;
    top: 10px
}

.n3 {
    right: 0;
    top: 135px
}

.n4 {
    left: 35%;
    bottom: 4px
}

.loop-core {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: grid;
    place-content: center;
    text-align: center;
    background: radial-gradient(circle, #33250e, #111);
    color: #efc65d;
    font-family: Georgia, serif
}

.loop-pulse {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #f5d87d;
    box-shadow: 0 0 16px #e7b64b;
    left: 12%;
    top: 49%;
    animation: loopPulse 7s ease-in-out infinite
}

@keyframes loopPulse {
    0% {
        left: 12%;
        top: 49%
    }

    25% {
        left: 47%;
        top: 9%
    }

    50% {
        left: 87%;
        top: 48%
    }

    75% {
        left: 49%;
        top: 87%
    }

    100% {
        left: 12%;
        top: 49%
    }
}

.economics {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px
}

.economics span {
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    font-size: 10px
}

/* heritage */
.heritage {
    background: #f4eee3
}

.heritage-grid {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: 4vw;
    align-items: center
}

.heritage-copy p {
    color: var(--muted);
    max-width: 520px
}

.legacy {
    position: relative;
    padding: 30px 0
}

.legacy:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #d3cabd
}

.legacy-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    min-height: 115px;
    align-items: center
}

.legacy-row:nth-child(odd) .legacy-card {
    grid-column: 1
}

.legacy-row:nth-child(even) .legacy-card {
    grid-column: 2
}

.legacy-card {
    background: #fff;
    border-radius: 22px;
    padding: 18px 20px;
    box-shadow: var(--shadow)
}

.legacy-card b {
    font-family: Georgia, serif;
    font-size: 32px
}

.legacy-card span {
    display: block;
    font-size: 11px;
    color: #726c63;
    margin-top: 5px
}

.legacy-thesis {
    margin-top: 16px;
    padding: 18px 20px;
    border-radius: 20px;
    background: #111318;
    color: #fff
}

.legacy-thesis strong {
    font-family: Georgia, serif;
    font-size: 24px
}

.legacy-thesis p {
    font-size: 11px;
    color: #c7c2b8
}

/* trust */
.trust {
    background: #090a0c;
    color: #fff
}

.trust-grid {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: 5vw;
    align-items: center
}

.trust-copy p {
    color: #cbc6bd;
    max-width: 520px
}

.solar {
    height: 500px;
    position: relative;
    background: #000;
    /* dark background */
    overflow: hidden;
}

.orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(226, 180, 72, .18);
    border-radius: 50%;
}

.o1 {
    width: 180px;
    height: 180px;
}

.o2 {
    width: 290px;
    height: 290px;
}

.o3 {
    width: 400px;
    height: 400px;
}

.o4 {
    width: 500px;
    height: 500px;
}

.sun {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 128px;
    height: 128px;
    border-radius: 50%;
    display: grid;
    place-content: center;
    text-align: center;
    background: radial-gradient(circle, #4b3510, #20190d 60%, #0c0d0f 72%);
    color: #f1cb68;
    font-family: Georgia, serif;
    box-shadow: 0 0 55px rgba(221, 171, 51, .12);
    z-index: 2;
}

.planet {
    position: absolute;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .13);
    backdrop-filter: blur(12px);
    font-size: 10px;
    min-width: 140px;
    z-index: 3;
}

.planet b {
    display: block;
    color: #efc75f;
}

.planet small {
    color: #aaa;
}

.mercury {
    left: 16%;
    top: 5%;
}

.venus {
    right: 12%;
    top: 5%;
}

.earth {
    left: 4%;
    top: 43%;
}

.mars {
    right: 10%;
    top: 43%;
}

.jupiter {
    left: 14%;
    bottom: 8%;
}

.saturn {
    right: 9%;
    bottom: 9%;
}

.revolving-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    background: #f1cb68;
    border-radius: 50%;
    box-shadow: 0 0 12px 3px rgba(241, 203, 104, 0.9);
    z-index: 10;
    transform-origin: 0 0;
    /* 12-second smooth sequence: 1s travel + 1s pause per box */
    animation: moveAndPauseClockwise 12s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes moveAndPauseClockwise {

    /* 1. ADGM foundation (Top Left - Outer Ring 4: 250px) */
    0% {
        transform: rotate(-130deg) translate(250px) translate(-50%, -50%);
        opacity: 1;
    }

    8.33% {
        transform: rotate(-130deg) translate(250px) translate(-50%, -50%);

    }

    16.66% {
        transform: rotate(-130deg) translate(250px) translate(-50%, -50%);
        opacity: 1;
    }

    /* 2. Identity evidence (Top Right - Ring 3: 200px) */
    25% {
        transform: rotate(-50deg) translate(200px) translate(-50%, -50%);
        opacity: 0.9;
        /* Pauses at Identity */
    }

    33.33% {
        transform: rotate(-50deg) translate(200px) translate(-50%, -50%);
        opacity: 1;
    }

    /* 3. Security controls (Mid Right - Ring 2: 145px) */
    41.66% {
        transform: rotate(0deg) translate(145px) translate(-50%, -50%);
        opacity: 0.9;
        /* Pauses at Security */
    }

    50% {
        transform: rotate(0deg) translate(145px) translate(-50%, -50%);
        opacity: 1;
    }

    /* 4. Licensed rails (Bottom Right - Outer Ring 4: 250px) */
    58.33% {
        transform: rotate(50deg) translate(250px) translate(-50%, -50%);
        opacity: 0.9;
        /* Pauses at Rails */
    }

    66.66% {
        transform: rotate(50deg) translate(250px) translate(-50%, -50%);
        opacity: 1;
    }

    /* 5. Audit & monitoring (Bottom Left - Ring 3: 200px) */
    75% {
        transform: rotate(130deg) translate(200px) translate(-50%, -50%);
        opacity: 0.9;
        /* Pauses at Audit */
    }

    83.33% {
        transform: rotate(130deg) translate(200px) translate(-50%, -50%);
        opacity: 1;
    }

    /* 6. Commerce integrity (Mid Left - Ring 2: 145px) */
    91.66% {
        transform: rotate(180deg) translate(145px) translate(-50%, -50%);
        opacity: 0.9;
        /* Pauses at Commerce */
    }

    95.83% {
        transform: rotate(180deg) translate(145px) translate(-50%, -50%);
        opacity: 1;
    }

    /* Completes the full 360° clockwise cycle back to ADGM (-130 + 360 = 230deg) */
    100% {
        transform: rotate(230deg) translate(250px) translate(-50%, -50%);
        opacity: 1;
    }
}

.final {
    background: linear-gradient(120deg, #15100a, #090a0c 55%, #1c1408);
    color: #fff
}

.final-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 5vw;
    align-items: center
}

.final-art {
    height: 430px;
    position: relative
}

.final-core {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 230px;
    height: 230px;
    border-radius: 50%;
    display: grid;
    place-content: center;
    text-align: center;
    background: radial-gradient(circle, #f6dc8a, #d3a033 35%, #74470d 67%, #16100a 70%);
    color: #151006;
    font-family: Georgia, serif;
    font-size: 34px;
    box-shadow: 0 0 120px rgba(213, 158, 42, .22)
}

.final-core small {
    font-family: Arial, sans-serif;
    font-size: 10px
}

.final-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 380px;
    height: 380px;
    border-radius: 50%;
    border: 1px solid rgba(238, 190, 76, .28)
}

.faq {
    padding: 95px 0;
    background: #f8f4ec
}

.faq-head {
    display: grid;
    grid-template-columns: 1fr .6fr;
    gap: 40px;
    align-items: end
}

.faq-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 30px 0
}

.faq-tabs button {
    border: 1px solid #d9d0c3;
    background: #fff;
    border-radius: 999px;
    padding: 10px 15px;
    cursor: pointer
}

.faq-tabs button.active {
    background: #111318;
    color: #fff
}

.faq-panel {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 10px 18px
}

.faq-panel.active {
    display: grid
}

.faq details {
    background: #fff;
    border-radius: 18px;
    padding: 15px 18px;
    box-shadow: 0 10px 30px rgba(31, 22, 10, .05)
}

.faq summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 13px
}

.faq details p {
    font-size: 12px;
    color: #666057
}

.footer {
    background: #090a0c;
    color: #fff;
    padding: 46px 0 24px
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.35fr repeat(4, 1fr);
    gap: 35px
}

.footer-logo img {
    height: 68px;
    max-width: 260px
}

.footer-grid b {
    display: block;
    margin-bottom: 12px
}

.footer-grid a,
.footer-grid p {
    display: block;
    font-size: 11px;
    color: #aaa;
    line-height: 1.75;
    margin: 0
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #25262a;
    margin-top: 28px;
    padding-top: 18px;
    font-size: 10px;
    color: #8f8f91
}

.heart {
    color: #e83232
}

.carousel-section {
    padding: 80px 0;
    overflow: hidden;
    background: #f4eee3;
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-header h2 {
    color: #000;
    font-size: clamp(34px, 3.3vw, 40px) !important;
    margin: 0;
}


.carousel-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.carousel-track {
    display: flex;
    gap: 24px;
    width: max-content;
    animation: scrollRightToLeft 25s linear infinite;
}

.carousel-track:hover {
    animation-play-state: paused;
}

@keyframes scrollRightToLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        /* Shifts by half the total track width (the size of 5 cards + gaps) */
        transform: translateX(calc(-320px * 5 - 24px * 5));
    }
}

.carousel-card {
    width: 290px;
    background: var(--card-bg);
    border-radius: 16px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    overflow: hidden;
    background: white;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0;
}

.carousel-card:hover {
    box-shadow: 0 12px 35px rgba(212, 175, 55, 0.25);
}

.card-image-wrapper {
    overflow: hidden;
}

.card-image-wrapper img {
    transition: transform 0.5s ease;
    /* Smooth scaling animation */
}

.carousel-card:hover .card-image-wrapper img {
    transform: scale(1.15);
    /* Scales ONLY the image on card hover */
}

.card-image-wrapper {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.8) contrast(1.1);
    transition: transform 0.5s ease;
}

.carousel-card:hover .card-image-wrapper img {
    transform: scale(1.08);
}

.card-image-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--card-bg) 0%, transparent 60%);
}

.card-content {
    padding: 20px;
}

.card-content h3 {
    margin: 0 0 10px 0;
    font-size: 1.25rem;
    color: #000;
    font-weight: 600;
    font-family: Georgia, 'Times New Roman', serif;
}

.card-content span {
    font-family: Georgia, 'Times New Roman', serif;
}

.card-content p {
    margin-top: 10px;
    font-size: 0.875rem;
    color: #908e8e;
    line-height: 1.5;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.card-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 3em;
}

.read-more-btn {
    display: inline-block;
    color: #000;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    cursor: pointer;
}

.read-more-btn:hover {
    color: #404040;
}

:root {
    --maroon-950: #0a0705;
    --maroon-900: #120d09;
    --maroon-800: #1c150e;
    --maroon-700: #291f14;
    --gold-500: #c9a24a;
    --gold-400: #dcbb6c;
    --gold-300: #ecd394;
    --cream-100: #f6efe4;
    --cream-300: #cfc3b3;
    --ink-muted: #8f8579;
    --hairline: rgba(201, 162, 74, 0.16);
}

.phone-animates * {
    box-sizing: border-box;
}

.phone-animates .phone-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}

.phone-animates .phone-glow {
    position: absolute;
    width: 340px;
    height: 340px;
    background: radial-gradient(circle, rgba(201, 162, 74, 0.22), transparent 70%);
    filter: blur(10px);
}

.phone-animates .phone {
    position: relative;
    width: 100%;
    height: 550px;
    background: linear-gradient(180deg, #1a0a0d, #100507);
    border-radius: 38px;
    padding: 10px;
    box-shadow:
        0 40px 80px -20px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(201, 162, 74, 0.25),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.phone-animates .phone-notch {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 20px;
    background: #100507;
    border-radius: 0 0 14px 14px;
    z-index: 5;
}

.phone-animates .phone-screen {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, var(--maroon-900), var(--maroon-950) 70%);
    border-radius: 29px;
    overflow: hidden;
}

.phone-animates .status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px 0;
    font-size: 11px;
    color: var(--cream-300);
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}

/* screens crossfade */
.phone-animates .screen {
    position: absolute;
    inset: 0;
    padding: 20px 0;
    opacity: 0;
    animation-duration: 9s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.phone-animates .screen-review {
    margin-top: 10px;
    animation-name: phone-animates-showReview;
}

.phone-animates .screen-processing {
    animation-name: phone-animates-showProcessing;
}

.phone-animates .screen-success {
    animation-name: phone-animates-showSuccess;
}

.phone-animates .screen-gold {
    animation-name: phone-animates-showGold;
}

@keyframes phone-animates-showReview {
    0% {
        opacity: 0;
    }

    3% {
        opacity: 1;
    }

    13% {
        opacity: 1;
    }

    17% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes phone-animates-showProcessing {
    0% {
        opacity: 0;
    }

    17% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    28% {
        opacity: 1;
    }

    32% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes phone-animates-showSuccess {
    0% {
        opacity: 0;
    }

    32% {
        opacity: 0;
    }

    35% {
        opacity: 1;
    }

    43% {
        opacity: 1;
    }

    47% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes phone-animates-showGold {
    0% {
        opacity: 0;
    }

    47% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    96% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* Screen 1: Review cart */
.phone-animates .card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(201, 162, 74, 0.18);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 10px;
    margin-top: 30px;
}

.phone-animates .label-sm {
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-top: 20px;
}

.phone-animates .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
}

.phone-animates .row .name {
    font-size: 13px;
    color: var(--cream-100);
}

.phone-animates .row .amt {
    font-size: 13px;
    color: var(--cream-300);
    font-variant-numeric: tabular-nums;
}

.phone-animates .total-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed rgba(201, 162, 74, 0.25);
}

.phone-animates .total-line .t-label {
    font-size: 12px;
    color: var(--ink-muted);
}

.phone-animates .total-line .t-amt {
    font-size: 22px;
    font-weight: 600;
    color: var(--gold-300);
}

.phone-animates .btn {
    margin-top: 18px;
    background: linear-gradient(90deg, var(--gold-500), var(--gold-400));
    color: #2a0e14;
    text-align: center;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 12px;
    border-radius: 10px;
}

/* Screen 2: Processing */
.phone-animates .processing-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
}

.phone-animates .spinner {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid rgba(201, 162, 74, 0.2);
    border-top-color: var(--gold-400);
    animation: phone-animates-spin 1s linear infinite;
    margin-bottom: 22px;
}

@keyframes phone-animates-spin {
    to {
        transform: rotate(360deg);
    }
}

.phone-animates .processing-text {
    font-size: 13.5px;
    color: var(--cream-300);
}

.phone-animates .processing-sub {
    font-size: 11.5px;
    color: var(--ink-muted);
    margin-top: 6px;
}

/* Screen 3: Success */
.phone-animates .success-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
}

.phone-animates .check-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--gold-300), var(--gold-500));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #2a0e14;
    font-weight: 700;
    margin-bottom: 20px;
    box-shadow: 0 0 30px rgba(220, 187, 108, 0.5);
}

.phone-animates .success-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--cream-100);
    margin-bottom: 4px;
}

.phone-animates .success-sub {
    font-size: 12px;
    color: var(--ink-muted);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Screen 4: Gold reward */
.phone-animates .gold-wrap-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    position: relative;
}

.phone-animates .badge-stage {
    position: relative;
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.phone-animates .ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid var(--gold-400);
    opacity: 0;
    animation: phone-animates-ringPulse 2.4s ease-out infinite;
}

.phone-animates .ring.r2 {
    animation-delay: 0.8s;
}

.phone-animates .ring.r3 {
    animation-delay: 1.6s;
}

@keyframes phone-animates-ringPulse {
    0% {
        transform: scale(0.55);
        opacity: 0.55;
    }

    100% {
        transform: scale(1.55);
        opacity: 0;
    }
}

.phone-animates .gold-badge {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--maroon-700), var(--maroon-950) 75%);
    border: 1px solid rgba(201, 162, 74, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 34px rgba(220, 187, 108, 0.4), inset 0 0 12px rgba(0, 0, 0, 0.5);
    animation: phone-animates-badgePop 9s ease-in-out infinite;
    transform: scale(0);
}

@keyframes phone-animates-badgePop {

    0%,
    48% {
        transform: scale(0);
    }

    52% {
        transform: scale(1.18);
    }

    56% {
        transform: scale(1);
    }

    95% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

.phone-animates .gold-amt {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 2px;
    background: linear-gradient(100deg, var(--gold-500) 30%, var(--cream-100) 50%, var(--gold-500) 70%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: phone-animates-shimmer 2.6s linear infinite;
}

@keyframes phone-animates-shimmer {
    0% {
        background-position: 120% 0;
    }

    100% {
        background-position: -20% 0;
    }
}

.phone-animates .gold-caption {
    font-size: 12px;
    color: var(--ink-muted);
    margin-bottom: 22px;
    letter-spacing: 0.01em;
}

.phone-animates .balance-card {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(201, 162, 74, 0.2);
    border-radius: 12px;
    padding: 12px 16px;
}

.phone-animates .balance-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--cream-300);
    padding: 4px 0;
}

.phone-animates .balance-row b {
    color: var(--cream-100);
    font-variant-numeric: tabular-nums;
}

.phone-animates .balance-row.hl b {
    color: var(--gold-300);
}

/* Sparkle particles */
.phone-animates .sparkle {
    position: absolute;
    bottom: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold-300);
    opacity: 0;
}

.phone-animates .s1 {
    left: 28%;
    animation: phone-animates-rise 9s ease-in-out infinite;
    animation-delay: 0s;
}

.phone-animates .s2 {
    left: 40%;
    animation: phone-animates-rise 9s ease-in-out infinite;
    animation-delay: 0.3s;
}

.phone-animates .s3 {
    left: 52%;
    animation: phone-animates-rise 9s ease-in-out infinite;
    animation-delay: 0.6s;
}

.phone-animates .s4 {
    left: 64%;
    animation: phone-animates-rise 9s ease-in-out infinite;
    animation-delay: 0.9s;
}

.phone-animates .s5 {
    left: 34%;
    animation: phone-animates-rise 9s ease-in-out infinite;
    animation-delay: 1.4s;
}

.phone-animates .s6 {
    left: 58%;
    animation: phone-animates-rise 9s ease-in-out infinite;
    animation-delay: 1.8s;
}

.phone-animates .s7 {
    left: 46%;
    animation: phone-animates-rise 9s ease-in-out infinite;
    animation-delay: 2.4s;
}

.join-free-footer {
    padding: 0px;
    box-shadow: none;
    border: none;
    color: #e6b547 !important;
    background: transparent;
    margin-top: 0px;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    font-weight: 800;
    display: flex !important;
    align-items: center;
    gap: 3px;

    svg {
        width: 14px;
        height: 14px;
    }
}

@keyframes phone-animates-rise {

    0%,
    49% {
        opacity: 0;
        transform: translateY(0) scale(1);
    }

    52% {
        opacity: 1;
        transform: translateY(-10px) scale(1.2);
    }

    75% {
        opacity: 0.8;
        transform: translateY(-90px) scale(0.8);
    }

    92% {
        opacity: 0;
        transform: translateY(-160px) scale(0.5);
    }

    100% {
        opacity: 0;
    }
}

.phone-animates .phone-caption {
    text-align: center;
    margin-top: 22px;
    font-size: 12px;
    color: var(--ink-muted);
    letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
    .phone-animates .screen {
        animation: none;
        opacity: 0;
    }

    .phone-animates .screen-success {
        opacity: 1;
    }

    .phone-animates .spinner {
        animation: none;
    }

    .phone-animates .sparkle {
        animation: none;
    }

    .phone-animates .ring {
        animation: none;
        opacity: 0;
    }

    .phone-animates .gold-badge {
        animation: none;
        transform: scale(1);
    }

    .phone-animates .gold-amt {
        animation: none;
        -webkit-text-fill-color: var(--gold-300);
    }
}

@media (min-width: 1000px) and (max-width: 1150px) {
    .scan-benefits>* {
        flex: 0 0 calc((100% - 8px) / 2);
    }
}

@media(max-width:1000px) {
    .scene {
        min-height: auto;
        padding: 110px 0 70px
    }

    .inner {
        width: min(100% - 42px, 1240px)
    }

    .gold-thread {
        left: 12px;
    }

    .hero-grid,
    .reality-grid,
    .value-grid,
    .scan-grid,
    .business-grid,
    .kace-grid,
    .market-grid,
    .compound-grid,
    .heritage-grid,
    .trust-grid,
    .final-grid {
        grid-template-columns: 1fr
    }

    .commerce-orbit {
        justify-self: start
    }

    .phone-stage {
        max-width: 820px
    }

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

    .benefit:nth-child(n) {
        transform: none
    }

    .scan-film {
        height: 480px
    }

    .category-river {
        max-width: 850px
    }

    .heritage-grid,
    .trust-grid {
        gap: 30px
    }

    .navlinks {
        display: none
    }

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

@media(max-width:720px) {
    .commerce-orbit {
        width: fit-content;
    }

    .gold-thread {
        display: none
    }

    .navin {
        width: calc(100% - 24px);
        height: 56px
    }

    .brand img {
        height: 52px
    }

    .nav .metal-button,
    .hero-copy .metal-button,
    .ghost-button {
        padding: 6px 14px;
        font-size: 11px;
    }

    .inner {
        width: min(100% - 28px, 1240px)
    }

    h1 {
        font-size: 35px
    }

    h2 {
        font-size: 38px
    }

    .change-stage {
        grid-template-columns: 1fr
    }

    .bridge:before {
        height: 35px
    }

    .phone-stage {
        grid-template-columns: 1fr
    }

    .phone:nth-child(n) {
        transform: none;
        min-height: 430px
    }

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

    .scan-film {
        height: 520px
    }

    .scan-overlay {
        right: 16px;
        width: calc(100% - 32px)
    }

    .seller-surface {
        grid-template-columns: 1fr
    }

    .seller-header,
    .payout,
    .seller-intel,
    .reward-config {
        grid-column: 1
    }

    .seller-intel {
        grid-template-columns: 1fr
    }

    .kace-stage {
        height: 650px
    }

    .source-card,
    .publish-card {
        left: 50%;
        right: auto;
        transform: translateX(-50%)
    }

    .source-card {
        top: 10px
    }

    .publish-card {
        bottom: 10px
    }

    .kace-line {
        left: 50%;
        right: auto;
        top: 210px;
        bottom: 210px;
        width: 2px;
        height: auto
    }

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

    .category:nth-child(n) {
        grid-column: auto;
        grid-row: auto
    }

    /* .loop {
        height: 650px
    }

    .loop-path {
        display: none
    }

    .loop-node {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: auto;
        margin: 12px 0
    }

    .loop-core {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        margin: 20px auto
    }

    .loop-pulse {
        display: none
    } */

    .legacy:before {
        left: 12px
    }

    .legacy-row {
        grid-template-columns: 1fr;
        gap: 0;
        min-height: auto;
        margin: 12px 0;
        padding-left: 30px
    }

    .legacy-row .legacy-card {
        grid-column: 1 !important
    }

    .solar {
        transform: scale(.78);
        transform-origin: center
    }

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

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

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

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

@media(max-width:600px) {
    .loop-node {
        width: fit-content;
        padding: 10px;
        border-radius: 10px;
    }

    .loop-node b {
        font-size: 13px;
    }
}

@media(max-width:500px) {
    .benefit-wave {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-reality h2 {
        font-size: 27px !important;
    }

    .scan-benefits>* {
        flex: 0 0 calc((100% - 16px) / 2);
    }

    .scene h2 {
        font-size: 27px !important;
    }

    .category-river {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: unset;
    }

    .category-river .category {
        grid-column: unset !important;
        grid-row: unset !important;
        border-radius: 10px !important;
    }

    .loop-path {
        display: none
    }

    .loop-node {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: auto;
        margin: 12px 0
    }

    .loop-core {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        margin: 20px auto
    }

    .loop-pulse {
        display: none
    }

    .actions {
        flex-direction: column;
    }

    .actions .metal-button,
    .actions .ghost-button {
        width: fit-content;
    }

    .final-ring {
        width: 300px;
        height: 300px;
    }

    .final-core {
        width: 200px;
        height: 200px;
    }
}

@media (max-width: 550px) {
    .hero-grid {
        margin-top: 70px;
    }

    .card-image-wrapper {
        height: 120px;
    }

    .carousel-section {
        padding: 40px 0;
    }


    .carousel-card {
        width: 220px;
    }

    .card-content {
        padding: 10px;
    }

    .card-content h3 {
        font-size: 16px;
    }

    .read-more-btn {
        font-size: 11px;
    }

    .inner.final-grid {
        h2 {
            white-space: normal;
        }

        p {
            max-width: 100%;
        }
    }


    .card-content span {
        font-size: 13px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .card-content p {
        font-size: 13px;
    }

    .scene {
        padding: 50px 0 50px;
    }

    .solar {
        transform: scale(1);
        height: auto;
        padding: 40px 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .solar-center-graphic {
        position: relative;
        width: 320px;
        height: 320px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .o1 {
        width: 120px;
        height: 120px;
    }

    .o2 {
        width: 180px;
        height: 180px;
    }

    .o3 {
        width: 240px;
        height: 240px;
    }

    .o4 {
        width: 300px;
        height: 300px;
    }

    .sun {
        width: 90px;
        height: 90px;
        font-size: 13px;
    }

    .revolving-dot {
        display: none;
    }

    .planet {
        position: relative;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 100%;
        max-width: 340px;
        min-width: unset;
        box-sizing: border-box;
        text-align: left;
    }
}