.hero {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(430px, 0.9fr) minmax(560px, 1.1fr);
    gap: clamp(24px, 5vw, 80px);
    align-items: center;
    min-height: calc(100vh - 98px);
    padding: 34px 2vw 20px;
    overflow: visible;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 660px;
    min-width: 0;
}



.hero-copy {
    max-width: 610px;
    margin-bottom: 8px;
    color: #4e4650;
    font-size: clamp(1.02rem, 1.35vw, 1.25rem);
    line-height: 1.7;
}

.hero-copy span {
    display: block;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
}


.hero-visual {
    position: relative;
    min-width: 0;
    min-height: 596px;
    perspective: 1000px;
}

.dashboard-shell {
    position: absolute;
    z-index: 1;
    right: -10px;
    top: 148px;
    width: min(620px, 92%);
    min-height: 450px;
    overflow: hidden;
    border: 1px solid rgba(151, 190, 255, 0.58);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 34px 90px rgba(33, 27, 83, 0.16);
    pointer-events: none;
    will-change: transform, opacity;
}

.goal-section {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(360px, 0.72fr) minmax(560px, 1.28fr);
    gap: clamp(36px, 6vw, 92px);
    align-items: center;
    min-height: 100vh;
    padding: 86px 5vw;
    background:
        radial-gradient(circle at 88% 92%, rgba(128, 104, 246, 0.16), transparent 24%),
        radial-gradient(circle at 50% 18%, rgba(255, 248, 237, 0.95), transparent 34%),
        #fff;
    overflow: visible;
}

.goal-copy {
    max-width: 620px;
}

.section-badge {
    display: inline-block;
    padding: 8px 22px;
    background-color: #eef1f7;   /* light grey bg */
    color: #4f46e5;              /* purple text */
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 999px;        /* full pill */
    letter-spacing: 0.5px;
}

.goal-copy h2 {
    max-width: 440px;
    margin-bottom: 14px;
    color: var(--purple-dark);
    font-size: clamp(2.35rem, 4vw, 4.2rem);
    line-height: 1.05;
}

.goal-copy>p {
    max-width: 460px;
    margin-bottom: 30px;
    color: var(--muted);
}

.goal-list {
    display: grid;
    gap: 18px;
}

.goal-list article {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 18px;
    align-items: center;
    min-height: 96px;
    padding: 18px 22px;
    border: 1px solid rgba(237, 240, 245, 0.9);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 24px 60px rgba(33, 27, 83, 0.08);
}

.goal-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-weight: 900;
}

.violet-icon {
    color: #bb59f3;
    background: #fbf0ff;
}

.orange-goal-icon {
    color: var(--orange);
    background: #fff3ec;
}

.mint-icon {
    color: #20d2ac;
    background: #effffb;
}

.goal-list h3 {
    margin-bottom: 4px;
    color: var(--purple-dark);
    font-size: 1rem;
}

.goal-list p {
    margin-bottom: 0;
    color: var(--soft-muted);
    font-size: 0.88rem;
}

.goal-dashboard-wrap {
    position: relative;
    min-height: 610px;
}

.goal-dashboard.dashboard-shell {
    position: relative;
    inset: auto;
    width: min(760px, 100%);
    min-height: 560px;
    margin-left: auto;
    border-radius: 24px;
    opacity: 1;
    visibility: visible;
}

.goal-dashboard .dashboard-layout {
    grid-template-columns: 78px 1fr;
    min-height: 502px;
}

.goal-dashboard .dashboard-main {
    grid-template-rows: auto 108px 94px 1fr;
    padding: 22px;
}

.dashboard-welcome {
    display: grid;
    gap: 3px;
    min-height: 48px;
}

.dashboard-welcome small {
    color: var(--soft-muted);
    font-weight: 800;
}

.dashboard-welcome strong {
    color: var(--purple-dark);
    font-size: 1.5rem;
}

.dock-slot {
    position: relative;
    overflow: hidden;
}

.dock-slot::after {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px dashed rgba(128, 104, 246, 0.22);
    border-radius: 12px;
    background: rgba(128, 104, 246, 0.035);
}

.goal-dashboard .dashboard-map {
    min-height: 192px;
}

.dashboard-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 0 22px;
    border-bottom: 1px solid var(--line);
}

.dashboard-topbar span {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--purple);
}

.dashboard-topbar strong {
    flex: 1;
    color: var(--purple-dark);
    font-size: 0.96rem;
}

.dashboard-topbar small {
    min-height: 26px;
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--green);
    background: #effaf5;
    font-weight: 850;
}

.dashboard-layout {
    display: grid;
    grid-template-columns: 74px 1fr;
    min-height: 392px;
}

.dashboard-rail {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 14px;
    padding-top: 28px;
    border-right: 1px solid var(--line);
    background: #fbfcff;
}

.dashboard-rail span {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #f0edff;
}

.dashboard-main {
    position: relative;
    display: grid;
    gap: 14px;
    padding: 20px;
}

.dashboard-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    min-height: 94px;
}

.dashboard-row span,
.dashboard-grid span,
.dashboard-map {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(248, 250, 255, 0.8);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    min-height: 86px;
}

.dashboard-map {
    position: relative;
    min-height: 150px;
    background:
        linear-gradient(90deg, rgba(128, 104, 246, 0.08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(128, 104, 246, 0.08) 1px, transparent 1px),
        #fbfcff;
    background-size: 28px 28px;
}

.dashboard-map i {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 3px solid #fff;
    border-radius: 999px;
    background: var(--green);
    box-shadow: 0 8px 18px rgba(33, 27, 83, 0.16);
}

.dashboard-map i:nth-child(1) {
    left: 22%;
    top: 42%;
}

.dashboard-map i:nth-child(2) {
    left: 54%;
    top: 24%;
    background: var(--purple);
}

.dashboard-map i:nth-child(3) {
    right: 18%;
    bottom: 22%;
    background: var(--orange);
}

.soft-shape {
    position: absolute;
    top: 36px;
    right: -4vw;
    width: min(600px, 80vw);
    height: 596px;
    background: var(--cream);
    border-radius: 56% 0 0 0;
    will-change: transform;
}

.loop-line {
    position: absolute;
    left: 70px;
    top: 108px;
    width: 220px;
    height: 190px;
    /* border: 3px solid #ffd08a;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-radius: 48% 52% 44% 56%; */
    background: url('../images/home/line-shape-hero.svg') no-repeat;
    /* transform: rotate(20deg); */
    /* will-change: transform; */
}

.loop-line::after {
    /* content: "";
    position: absolute;
    left: -78px;
    top: 67px;
    width: 130px;
    height: 94px;
    border: 3px solid #ffd08a;
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-radius: 48% 52% 44% 56%;
    transform: rotate(-34deg); */
}

.dot-field {
    position: absolute;
    left: -24px;
    bottom: 24px;
    width: 240px;
    height: 134px;
    opacity: 0.45;
    background-image: radial-gradient(#8f78ee 3px, transparent 3px);
    background-size: 17px 17px;
    will-change: transform;
}

.js .metric-card {
    opacity: 0;
    visibility: hidden;
}

.metric-card {
    position: absolute;
    z-index: 3;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow);
    transform-style: preserve-3d;
    will-change: transform, box-shadow;
}

.cards-docking .metric-card {
    pointer-events: none;
}

.cards-docking .dock-slot::after {
    opacity: 0.18;
}

.cards-docking .image-slot {
    opacity: 0.01;
}

.metric-heading {
    gap: 12px;
    color: var(--soft-muted);
    font-size: 1rem;
    font-weight: 800;
}

.metric-icon {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 999px;
    color: #fff;
    font-size: 0.86rem;
    font-weight: 900;
}

.red-icon {
    background: var(--red);
}

.green-icon {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
    background: var(--green);
    font-size: 1.24rem;
}

.orange-icon {
    background: var(--orange);
}

.metric-card strong {
    display: block;
    color: #111112;
    font-size: clamp(2rem, 3.1vw, 3.25rem);
    line-height: 1;
    letter-spacing: 0;
}

.metric-card small {
    display: block;
    color: var(--soft-muted);
    font-size: 0.98rem;
    font-weight: 700;
}

.metric-card small b {
    color: var(--green);
}

.likes-card {
    top: 72px;
    right: 220px;
    width: 244px;
    min-height: 184px;
    padding: 26px 34px;
}

.likes-card strong {
    margin: 30px 0 16px;
}

.chart-card {
    left: 0;
    top: 296px;
    width: 342px;
    min-height: 266px;
    padding: 24px 26px 26px;
    border: 1px solid #9fc8ff;
}

.chart-card h2 {
    margin-bottom: 24px;
    color: #3c4049;
    font-size: 1.12rem;
    letter-spacing: 0;
}

.bar-chart {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: end;
    gap: 36px;
    height: 132px;
    padding: 0 4px 24px;
    border-bottom: 1px solid #eef0f4;
}

.bar-chart::before,
.bar-chart::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: #eef0f4;
}

.bar-chart::before {
    top: 20px;
}

.bar-chart::after {
    top: 62px;
}

.bar-chart span {
    position: relative;
    display: block;
    height: var(--bar);
    min-height: 46px;
    border-radius: 8px 8px 0 0;
    background: #6148ce;
    transform-origin: center bottom;
    will-change: transform;
}

.bar-chart span::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -20px;
    height: 20px;
    border-radius: 0 0 8px 8px;
    background: #dcdcdc;
}

.chart-dates {
    display: flex;
    justify-content: space-between;
    padding: 14px 12px 0;
    color: #c3c5ce;
    font-size: 0.78rem;
    font-weight: 800;
}

.followers-card {
    right: 0;
    top: 270px;
    gap: 20px;
    width: 320px;
    min-height: 90px;
    padding: 22px;
    border: 1px solid #18c667;
    box-shadow: none;
}

.followers-card strong {
    font-size: 1.58rem;
    color: #30374a;
}

.reach-card {
    top: 376px;
    right: 118px;
    bottom: auto;
    width: 216px;
    min-height: 120px;
    padding: 18px 26px;
}

.reach-card strong {
    margin: 12px 0 8px;
    font-size: 1.8rem;
}

.eyebrow {
    margin: 0 0 12px;
    color: var(--purple);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.section {
    padding: 74px 5vw;
}

.section-heading {
    max-width: 760px;
    margin-bottom: 34px;
}

.section-heading h2,
.operations-copy h2,
.site-footer h2 {
    margin-bottom: 12px;
    color: var(--purple-dark);
    font-size: clamp(2rem, 4vw, 3.3rem);
    line-height: 1.08;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.feature-grid article {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.feature-icon {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 28px;
    border-radius: 8px;
    color: var(--purple-dark);
    background: #f0edff;
    font-size: 0.78rem;
    font-weight: 900;
}

.feature-grid h3 {
    margin-bottom: 8px;
}

.feature-grid p,
.operations-copy p,
.site-footer p {
    margin-bottom: 0;
    color: var(--muted);
}

.operations-section {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(520px, 1.14fr);
    gap: clamp(28px, 5vw, 68px);
    align-items: center;
    background: var(--soft);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.operations-copy {
    max-width: 620px;
}

.ops-table {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 20px 48px rgba(20, 39, 64, 0.08);
}

.ops-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1.1fr 0.7fr;
    gap: 14px;
    align-items: center;
    min-height: 58px;
    padding: 0 18px;
    border-bottom: 1px solid var(--line);
}

.ops-row:last-child {
    border-bottom: 0;
}

.ops-head {
    min-height: 46px;
    color: var(--soft-muted);
    background: #fbfdff;
    font-size: 0.82rem;
    font-weight: 850;
}

mark {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-weight: 850;
}

.good {
    color: #16855a;
    background: #edf9f3;
}

.warn {
    color: #ad6a00;
    background: #fff6e7;
}

.service {
    color: #b43c32;
    background: #fff0ee;
}

.blog-section {
    min-height: 240px;
}

.site-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 52px 5vw;
}

.site-footer h2 {
    max-width: 760px;
}

@media (max-width: 1180px) {
    .site-header {
        grid-template-columns: auto 1fr auto;
    }

    .hero {
        grid-template-columns: minmax(0, 1fr);
        padding-top: 44px;
    }

    .hero-visual {
        min-height: 620px;
    }

    .soft-shape {
        right: -12vw;
    }

    .goal-section {
        grid-template-columns: 1fr;
    }

    .goal-dashboard.dashboard-shell {
        margin-left: 0;
    }
}

@media (max-width: 900px) {
    .site-header {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        min-height: auto;
        padding: 18px 5vw;
    }

    .nav-links {
        order: 3;
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px 20px;
        overflow: visible;
        padding-bottom: 4px;
    }

    .hero {
        min-height: auto;
        padding: 44px 5vw 36px;
    }

    .hero-visual {
        min-height: 740px;
    }

    .soft-shape {
        width: 94vw;
        right: -22vw;
    }

    .dashboard-shell {
        right: 0;
        top: 176px;
        width: 100%;
    }

    .likes-card {
        right: 8vw;
    }

    .chart-card {
        left: 0;
        top: 320px;
    }

    .followers-card {
        right: 0;
        top: 292px;
    }

    .reach-card {
        right: 4vw;
        top: 610px;
        bottom: auto;
    }

    .feature-grid,
    .operations-section {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .header-action {
        display: none;
    }

    .hero-content {
        width: 90vw;
        max-width: 90vw;
    }

    h1 {
        font-size: 2.72rem;
    }

    .hero-copy {
        width: 100%;
        max-width: 100%;
        font-size: 1rem;
    }


    .hero-actions,
    .hero-actions .button,
    .site-footer .button {
        width: 100%;
    }

    .hero-actions .button {
        max-width: 342px;
    }

    .hero-visual {
        min-height: 760px;
    }

    .soft-shape {
        top: 60px;
        right: -50vw;
        width: 120vw;
        height: 650px;
    }

    .dashboard-shell {
        display: none;
    }

    .goal-section {
        padding: 64px 5vw;
    }

    .goal-dashboard-wrap {
        display: none;
    }

    .loop-line {
        left: 78px;
        top: 82px;
        transform: scale(0.78) rotate(20deg);
    }

    .dot-field {
        left: -12px;
        bottom: 58px;
    }

    .metric-card {
        border-radius: 16px;
    }

    .likes-card {
        top: 62px;
        right: 0;
        width: 222px;
    }

    .chart-card {
        top: 282px;
        width: min(100%, 342px);
    }

    .followers-card {
        top: 536px;
        width: min(100%, 320px);
    }

    .reach-card {
        top: 640px;
        right: 0;
        bottom: auto;
    }

    .ops-table {
        overflow-x: auto;
    }

    .ops-row {
        min-width: 560px;
    }

    .site-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Screenshot-aligned hero and dashboard */
.button-arrow {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-left: 10px;
    border: 1px solid rgba(255, 255, 255, 0.86);
    border-radius: 999px;
    font-size: 1.05rem;
    line-height: 1;
}

.button-primary {
    background: linear-gradient(90deg, #d964ff 0%, #3017e8 100%);
}

.line-chart {
    position: relative;
    min-height: 128px;
    padding-left: 34px;
}

.line-chart svg {
    width: 100%;
    height: 118px;
    overflow: visible;
}

.line-chart path,
.line-chart line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ghost-line {
    stroke: #ebe5f0;
    stroke-width: 3;
}

.main-line {
    stroke: #5c4aa5;
    stroke-width: 4;
}

.line-chart line {
    stroke: #8b7fd1;
    stroke-dasharray: 4 4;
    stroke-width: 1.5;
}

.line-chart circle {
    fill: #6046a9;
    stroke: #fff;
    stroke-width: 4;
}

.axis {
    position: absolute;
    left: 0;
    color: #a5a8b0;
    font-size: 0.7rem;
    font-weight: 650;
}

.axis-one {
    top: 16px;
}

.axis-two {
    top: 44px;
}

.axis-three {
    top: 72px;
}

.axis-four {
    top: 100px;
}

.chart-months {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    color: #a5a8b0;
    font-size: 0.72rem;
    font-weight: 650;
}

.cost-card-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 0px;
}

.cost-tooltip {
    min-width: 112px;
    padding: 5px 5px !important;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(33, 27, 83, 0.16);
}

.cost-tooltip small,
.cost-tooltip span {
    display: block;
    color: #a9acb6;
    font-size: 0.56rem;
    line-height: 10px;
    font-weight: 700;
}

.cost-tooltip strong {
    margin: 1px 0;
    color: #071936;
    font-size: 1rem;
    line-height: 1.1;
}

.expense-chart {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: end;
    gap: 22px;
    min-height: 126px;
}

.expense-group {
    display: grid;
    grid-template-columns: repeat(2, 18px);
    grid-template-rows: 18px 96px 20px;
    justify-content: center;
    column-gap: 8px;
}

.expense-group small {
    grid-column: 1 / -1;
    color: #6793bd;
    font-size: 0.75rem;
    text-align: center;
}

.expense-group span {
    align-self: end;
    height: var(--bar);
    min-height: 34px;
    border-radius: 6px;
}

.expense-group span:nth-of-type(1) {
    background: #d8c4dd;
}

.expense-group span:nth-of-type(2) {
    background: #8c4fa0;
}

.expense-group b {
    grid-column: 1 / -1;
    color: #6492bd;
    font-size: 0.76rem;
    text-align: center;
}

.compliance-card h2,
.dash-panel h4 {
    margin-top: 0px;
    margin-bottom: 16px;
    padding: 0px;
    color: #2b2b32;
    font-size: 1.08rem;
    line-height: 20px;
}

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

.compliance-grid strong {
    margin: 0;
    font-size: 1.9rem;
    line-height: 1;
}

.compliance-grid div:nth-child(1) strong {
    color: #00b76a;
}

.compliance-grid div:nth-child(2) strong {
    color: #f5a000;
}

.compliance-grid div:nth-child(3) strong {
    color: #ff3045;
}

.compliance-grid small {
    color: #5e8bc2;
    font-size: 0.78rem;
}

.deviation-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 28px;
    border-radius: 999px;
    color: #ff3036;
    background: #f2f6fb;
    font-size: 1.45rem;
    font-weight: 900;
}

.deviation-card small b {
    display: inline-block;
    margin-left: 12px;
}

.goal-illustration {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    color: #101010;
    font-size: 2rem;
    font-weight: 900;
}

.arrow-illustration::before {
    content: "→";
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 3px solid #151515;
    border-left-color: transparent;
    border-radius: 999px;
    font-size: 2.4rem;
}

.document-illustration::before {
    content: "☑";
    font-size: 3rem;
}

.ai-illustration {
    border: 3px dotted #101010;
    border-radius: 12px;
}

@media (min-width: 901px) {
    .site-header {
        min-height: 84px;
    }

    .brand {
        transform: scale(0.9);
        transform-origin: left center;
    }

    .hero {
        grid-template-columns: minmax(610px, 0.9fr) minmax(610px, 1.1fr);
        min-height: calc(100vh - 84px);
        padding: 100px 1.7vw 0;
        gap: 16px;
        align-items: start;
    }

    .hero-content {
        margin-top: 90px;
    }

    h1 {
        max-width: 720px;
        font-size: clamp(3rem, 3.9vw, 3.95rem);
        line-height: 1.22;
    }

    .hero-copy {
        max-width: 660px;
        font-size: 1.16rem;
    }

    .hero-actions {
        margin-top: 48px;
    }

    .button {
        min-height: 52px;
        padding: 0 23px;
        border-radius: 5px;
    }

    .hero-visual {
        min-height: 620px;
        align-self: start;
        /* margin-top: -26px; */
        margin-top: 0px;
    }

    .soft-shape {
        top: 110px;
        right: -3vw;
        width: 590px;
        height: 530px;
        border-radius: 63% 0 0 0;
    }

    .loop-line {
        left: 30px;
        top: 76px;
    }

    .dot-field {
        left: 0;
        bottom: 70px;
        width: 250px;
        height: 130px;
    }

    .hero {}

    .cost-card {
        top: 0;
        right: 150px;
        width: 311px !important;
        min-height: 189px;
        border: #E7E7E7 solid 1px;
        padding: 18px 20px 16px !important;
    }

    .cost-card h2 {
        margin-bottom: 0;
        color: #08243c;
        font-size: 1.03rem;
    }

    .expenses-card {
        left: -42px;
        top: 254px;
        width: 278px;
        min-height: 216px;
        padding: 22px 18px 24px;
        border-color: #6d58ff;
    }

    .expenses-card h2 {
        margin-bottom: 14px;
        line-height: 20px;
        color: #17253d;
        font-size: 1rem;
    }

    .compliance-card {
        right: 16px;
        top: 220px;
        display: block;
        width: 306px;
        min-height: 122px;
        padding: 10px;
        border: 1px solid #05a94f;
        box-shadow: 0 8px 18px rgba(33, 27, 83, 0.12);
    }

    .deviation-card {
        top: 374px;
        border: #E7E7E7 solid 1px;
        right: 136px;
        width: 240px;
        min-height: 150px;
        padding: 22px;
    }

    .deviation-card strong {
        margin: 0 0 2px;
        font-size: 1.45rem;
    }

    .deviation-card small {
        font-size: 0.82rem;
    }

    .goal-section {
        grid-template-columns: minmax(420px, 0.86fr) minmax(720px, 1.14fr);
        gap: 52px;
        min-height: 100vh;
        padding: 80px 0 44px 3.6vw;
    }

    .goal-copy h2 {
        font-size: 2.25rem;
    }

    .goal-copy>p {
        font-size: 1.15rem;
        line-height: 1.6;
    }

    .goal-list {
        gap: 34px;
        margin-top: 34px;
    }

    .goal-list article {
        grid-template-columns: 102px 1fr;
        min-height: 110px;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .goal-list h3 {
        margin-bottom: 4px;
        font-size: 1.45rem;
    }

    .goal-list p {
        max-width: 430px;
        color: #6c668b;
        font-size: 1.03rem;
        line-height: 1.55;
    }

    .goal-dashboard-wrap {
        min-height: 586px;
        overflow: visible;
    }

    .image-dashboard {
        position: relative;
        width: min(790px, 100%);
        margin-left: 0;
        filter: drop-shadow(-26px 30px 34px rgba(33, 27, 83, 0.22));
        opacity: 1;
    }

    .image-dashboard>img {
        display: block;
        width: 100%;
        height: auto;
        user-select: none;
        opacity: 1;
    }

    .image-slot {
        position: absolute;
        display: block;
        border-radius: 10px;
        background: rgba(128, 104, 246, 0.01);
        outline: 0;
        pointer-events: none;
        transition: opacity 200ms ease;
    }

    .image-dashboard .followers-slot {
        left: 49.6%;
        top: 39.2%;
        width: 322px;
        height: 118px;
        box-shadow: none !important;
        /* width: 30.7%;
        height: 20.4%; */
    }

    .image-dashboard .chart-slot {
        left: 10.5%;
        top: 56.2%;
        /* width: 28.3%; */
        width: 293px;
        /* height: 24.8%; */
        height: 190px;
    }

    .image-dashboard .likes-slot {
        left: 49.4%;
        top: 56.8%;
        /* width: 29.6%;
        height: 24.2%; */
        width: 311px;
        height: 189px;

    }

    .image-dashboard .reach-slot {
        left: 68.9%;
        top: 66.8%;
        width: 30.4%;
        height: 43%;
    }

    .goal-dashboard.dashboard-shell {
        width: 790px;
        min-height: 586px;
        margin-left: 0;
        border-radius: 0;
        border: 0;
        box-shadow: -26px 30px 46px rgba(33, 27, 83, 0.25);
    }

    .goal-dashboard .dashboard-layout {
        grid-template-columns: 66px 1fr;
        min-height: 586px;
    }

    .goal-dashboard .dashboard-rail {
        gap: 0;
        padding-top: 8px;
        color: #fff;
        background: #4d196f;
    }

    .goal-dashboard .dashboard-rail span {
        display: grid;
        place-items: center;
        width: 100%;
        min-height: 54px;
        border-radius: 0;
        color: rgba(255, 255, 255, 0.9);
        background: transparent;
        font-size: 0.62rem;
        font-weight: 800;
        text-align: center;
    }

    .goal-dashboard .dashboard-rail .rail-logo {
        width: 46px;
        min-height: 46px;
        margin: 0 auto 4px;
        border-radius: 12px;
        background: #fff;
    }

    .goal-dashboard .dashboard-rail .active-rail {
        background: rgba(255, 255, 255, 0.12);
    }

    .goal-dashboard .dashboard-main {
        gap: 12px;
        padding: 16px 20px 26px;
        background: #fff;
    }

    .dashboard-toolbar {
        display: grid;
        grid-template-columns: 190px 1fr 160px;
        align-items: center;
        min-height: 40px;
        border-bottom: 1px solid #edf0f5;
    }

    .dashboard-toolbar strong {
        color: #071936;
        font-size: 0.82rem;
    }

    .dashboard-toolbar span {
        width: 1px;
        height: 20px;
        background: #f1f2f6;
    }

    .dashboard-toolbar small {
        color: #c8cad1;
        font-weight: 800;
    }

    .dashboard-welcome {
        min-height: 34px;
    }

    .dashboard-welcome strong {
        font-size: 1.08rem;
    }

    .overview-row {
        display: grid;
        grid-template-columns: 190px 190px 190px 190px;
        gap: 20px;
        min-height: 90px;
    }

    .overview-row article,
    .dash-panel {
        position: relative;
        border: 1px solid #d9e0ef;
        border-radius: 10px;
        background: #fff;
        overflow: hidden;
    }

    .overview-row article {
        padding: 16px 12px;
    }

    .overview-row small {
        display: block;
        color: #6d9dcc;
        font-size: 0.76rem;
        margin-bottom: 4px;
    }

    .overview-row strong {
        color: #2b2b32;
        font-size: 1.05rem;
    }

    .overview-row i {
        position: absolute;
        inset: auto 0 0;
        height: 24px;
        background: repeating-linear-gradient(90deg, #f5ce99 0 5px, transparent 5px 10px);
        opacity: 0.65;
    }

    .dashboard-subtitle {
        margin: 6px 0 -2px;
        color: #2b2b32;
        font-size: 1.1rem;
    }

    .compliance-row {
        display: grid;
        grid-template-columns: 306px 306px;
        gap: 16px;
    }

    .dash-panel {
        min-height: 120px;
        padding: 16px;
    }

    .service-panel h4 {
        margin-bottom: 24px;
    }

    .dashboard-bottom-grid {
        display: grid;
        grid-template-columns: 278px 295px 168px;
        gap: 18px;
        min-height: 178px;
    }

    .dashboard-bottom-grid .dash-panel {
        min-height: 178px;
        padding: 0;
    }

    .dashboard-bottom-grid .reach-slot {
        width: 168px;
    }

    .dock-slot::after {
        inset: 6px;
        border-color: rgba(128, 104, 246, 0.16);
        background: rgba(128, 104, 246, 0.025);
    }
}

@media (min-width: 1600px) {
    .hero {
        grid-template-columns: minmax(660px, 0.95fr) minmax(700px, 1.05fr);
        gap: clamp(36px, 4vw, 86px);
        max-width: 1840px;
        min-height: calc(100vh - 84px);
        margin: 0 auto;
        padding: 72px 4vw 20px;
    }

    .hero-content {
        margin-top: 48px;
    }

    .hero h1 {
        max-width: 850px;
        margin-bottom: 24px;
        font-size: clamp(3.35rem, 3.35vw, 4.1rem);
        line-height: 1.12;
    }

    .hero-copy {
        max-width: 720px;
        font-size: 1.2rem;
    }

    .hero-actions {
        margin-top: 34px;
    }

    .hero-visual {
        min-height: 540px;
    }

    .soft-shape {
        top: 72px;
        right: -1.5vw;
        width: 660px;
        height: 500px;
    }

    .loop-line {
        left: 70px;
        top: 62px;
    }

    .dot-field {
        left: 28px;
        bottom: 44px;
    }

    .cost-card {
        right: 260px;
    }

    .expenses-card {
        left: 26px;
        top: 224px;
    }

    .compliance-card {
        right: 86px;
        top: 200px;
    }

    .deviation-card {
        right: 230px;
        top: 348px;
    }
}