:root {
    --forge-blue: #1267e8;
    --forge-blue2: #4aa7ff;
    --forge-navy: #0b1f3a;
    --forge-soft: #eef6ff;
    --forge-soft2: #f7fbff;
    --forge-green: #168a5b;
    --forge-purple: #8b5cf6;
    --forge-red: #ef5b3f;
    --shadow-soft: 0 18px 50px rgba(15, 53, 96, .10)
}

body {
    background: linear-gradient(180deg, #fff 0, #fbfdff 100%)
}

.site-header {
    height: 86px;
    padding: 0 clamp(22px, 6vw, 96px);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 rgba(13, 43, 85, .08)
}

.brand {
    gap: 10px
}

.brand>img {
    width: 78px;
    height: 62px
}

.brand-forge {
    font-size: 1.55rem;
    color: var(--forge-navy)
}

.brand-solutions {
    font-size: .55rem;
    letter-spacing: .25em;
    margin-top: 7px;
    color: var(--forge-navy)
}

.nav {
    gap: 24px
}

.nav a {
    font-size: .94rem;
    color: var(--forge-navy);
    position: relative
}

.nav a.active:after,
.nav a:not(.nav-cta):hover:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -11px;
    height: 2px;
    background: var(--forge-blue);
    border-radius: 2px
}

.nav-cta {
    background: linear-gradient(135deg, var(--forge-blue), #0b5bd5);
    color: white !important;
    border: 0 !important;
    padding: 11px 18px;
    box-shadow: 0 10px 24px rgba(18, 103, 232, .22)
}

.section-pad {
    padding: clamp(64px, 7vw, 100px) clamp(22px, 7vw, 110px)
}

.eyebrow {
    color: var(--forge-blue);
    font-size: .74rem
}

.button.primary {
    background: linear-gradient(135deg, var(--forge-blue), #0a5fdc);
    color: #fff;
    box-shadow: 0 12px 28px rgba(18, 103, 232, .24)
}

.button.secondary {
    border: 1px solid #9fc5f7;
    color: var(--forge-navy)
}

.hero {
    min-height: 620px;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    background: linear-gradient(90deg, rgba(246, 251, 255, .98) 0%, rgba(246, 251, 255, .93) 42%, rgba(232, 244, 255, .7) 100%);
    position: relative;
    overflow: hidden
}

.hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 82% 12%, rgba(115, 190, 255, .28), transparent 32%), radial-gradient(circle at 12% 80%, rgba(176, 220, 255, .25), transparent 28%);
    pointer-events: none
}

.hero-copy,
.hero-scene {
    position: relative;
    z-index: 1
}

.hero h1 {
    font-size: clamp(3.2rem, 5.3vw, 5.7rem);
    color: var(--forge-navy)
}

.hero h1 span {
    color: var(--forge-blue)
}

.hero .lead {
    font-size: clamp(1.05rem, 1.7vw, 1.28rem);
    max-width: 700px;
    color: #314866
}

.trust-row {
    gap: 14px 30px
}

.trust-row span:before {
    content: "✓";
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--forge-blue);
    color: #fff;
    font-size: .72rem;
    margin-right: 8px
}

.hero-scene {
    min-height: 430px;
    align-self: stretch;
    border-radius: 32px;
    overflow: hidden;
    background: linear-gradient(155deg, #f5fbff 8%, #dceeff 52%, #bcd9f1 100%);
    box-shadow: inset 0 0 80px rgba(255, 255, 255, .55), var(--shadow-soft)
}

.desk-glow {
    position: absolute;
    inset: auto -10% -18% -10%;
    height: 55%;
    background: linear-gradient(180deg, #e8edf3, #cfd8e3);
    transform: skewY(-3deg)
}

.scene-laptop {
    position: absolute;
    width: 56%;
    height: 46%;
    right: -5%;
    bottom: 13%;
    background: #27394b;
    border: 10px solid #1d2d3d;
    border-radius: 18px 18px 7px 7px;
    transform: perspective(700px) rotateY(-11deg) rotateX(3deg);
    box-shadow: 0 28px 45px rgba(25, 45, 67, .28)
}

.scene-screen {
    height: 100%;
    background: linear-gradient(145deg, #eef8ff, #dbeeff);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--forge-navy)
}

.scene-screen span {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: .16em
}

.scene-screen small {
    margin-top: 8px;
    color: #58708b
}

.scene-notebook {
    position: absolute;
    width: 43%;
    height: 18%;
    left: 18%;
    bottom: 16%;
    background: linear-gradient(180deg, #f7f7f7, #dce2e8);
    border-radius: 8px;
    transform: rotate(-4deg);
    box-shadow: 0 14px 24px rgba(30, 54, 78, .16)
}

.scene-notebook:before {
    content: "";
    position: absolute;
    left: 9%;
    right: 9%;
    top: 32%;
    height: 3px;
    background: #b6c4d2;
    box-shadow: 0 12px 0 #c5d0db, 0 24px 0 #c5d0db
}

.scene-mug {
    position: absolute;
    right: 15%;
    top: 15%;
    width: 118px;
    height: 118px;
    border-radius: 10px 10px 22px 22px;
    background: #fff;
    display: grid;
    place-items: center;
    text-align: center;
    font-size: .78rem;
    line-height: 1.3;
    font-weight: 800;
    color: #294666;
    transform: rotate(3deg);
    box-shadow: 0 16px 30px rgba(30, 54, 78, .13)
}

.scene-mug:after {
    content: "";
    position: absolute;
    right: -28px;
    top: 24px;
    width: 34px;
    height: 42px;
    border: 10px solid #fff;
    border-left: 0;
    border-radius: 0 24px 24px 0
}

.scene-plant {
    position: absolute;
    right: 13%;
    top: -7%;
    width: 150px;
    height: 140px;
    background: radial-gradient(ellipse at 40% 60%, #55a76a 0 22%, transparent 23%), radial-gradient(ellipse at 60% 45%, #6fb77f 0 20%, transparent 21%), radial-gradient(ellipse at 48% 28%, #4a9661 0 21%, transparent 22%)
}

.services-section {
    background: #fff
}

.home-services {
    padding-top: 46px
}

.cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px
}

.service-card {
    min-height: 245px;
    background: linear-gradient(180deg, #f4f9ff, #eef6ff);
    border: 1px solid #dceaf9;
    border-radius: 18px;
    padding: 26px;
    box-shadow: none
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-soft)
}

.service-card:nth-child(2) .service-icon {
    color: #0a8f70
}

.service-card:nth-child(3) .service-icon {
    color: var(--forge-purple)
}

.service-card:nth-child(4) .service-icon {
    color: var(--forge-red)
}

.service-icon {
    font-size: 2rem;
    line-height: 1;
    color: var(--forge-blue);
    font-weight: 900;
    margin-bottom: 18px
}

.service-card h3 {
    font-size: 1.28rem;
    color: var(--forge-navy)
}

.service-card p {
    font-size: .96rem;
    color: #46607c
}

.text-link {
    color: var(--forge-blue)
}

.benefit-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 18px;
    border-top: 1px solid #dce8f4;
    border-bottom: 1px solid #dce8f4
}

.benefit-strip>div {
    padding: 22px 26px;
    border-right: 1px solid #dce8f4
}

.benefit-strip>div:last-child {
    border-right: 0
}

.benefit-strip strong,
.benefit-strip span {
    display: block
}

.benefit-strip strong {
    color: var(--forge-navy)
}

.benefit-strip span {
    font-size: .82rem;
    color: #59708a;
    margin-top: 3px
}

.home-insights {
    display: grid;
    grid-template-columns: .78fr 1.22fr;
    gap: 36px;
    align-items: center;
    background: linear-gradient(135deg, #eff7ff, #f8fbff);
    border-top: 1px solid #d8e8f8;
    border-bottom: 1px solid #d8e8f8
}

.home-insights-copy h2 {
    font-size: clamp(2rem, 3.6vw, 3.6rem);
    line-height: 1.06;
    margin: 0 0 16px;
    color: var(--forge-navy);
    letter-spacing: -.035em
}

.home-insights-copy p:not(.eyebrow) {
    color: #58708b
}

.mini-insights {
    background: white;
    border: 1px solid #dce8f4;
    border-radius: 20px;
    padding: 18px;
    box-shadow: var(--shadow-soft)
}

.mini-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px
}

.mini-kpis>div {
    border: 1px solid #e3ebf3;
    border-radius: 12px;
    padding: 12px
}

.mini-kpis strong,
.mini-kpis span,
.mini-kpis small {
    display: block
}

.mini-kpis strong {
    font-size: 1.35rem;
    color: var(--forge-navy)
}

.mini-kpis span {
    font-size: .72rem;
    color: #61748b
}

.mini-kpis small {
    font-size: .7rem;
    color: var(--forge-green)
}

.mini-charts {
    display: grid;
    grid-template-columns: 1.25fr .9fr .75fr;
    gap: 10px;
    margin-top: 10px
}

.mini-charts>div {
    height: 130px;
    border: 1px solid #e3ebf3;
    border-radius: 12px;
    background: #fbfdff;
    position: relative;
    overflow: hidden
}

.mini-line:before,
.mini-line:after {
    content: "";
    position: absolute;
    left: 10%;
    right: 8%;
    height: 3px;
    border-radius: 99px;
    transform-origin: left center
}

.mini-line:before {
    top: 63%;
    background: var(--forge-blue);
    transform: rotate(-8deg);
    box-shadow: 36px -12px 0 -1px var(--forge-blue), 72px -4px 0 -1px var(--forge-blue), 108px -22px 0 -1px var(--forge-blue)
}

.mini-line:after {
    top: 76%;
    background: #77b6ff;
    transform: rotate(-4deg)
}

.mini-bars {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    padding: 18px
}

.mini-bars b {
    height: 10px;
    background: linear-gradient(90deg, var(--forge-blue), #72b5ff);
    border-radius: 3px
}

.mini-donut {
    display: grid;
    place-items: center
}

.mini-donut:before {
    content: "";
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: conic-gradient(var(--forge-blue) 0 63%, #65a9ee 63% 95%, #7abf70 95%)
}

.mini-donut span {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: white;
    display: grid;
    place-content: center;
    text-align: center;
    font-weight: 800;
    color: var(--forge-navy)
}

.mini-donut small {
    display: block;
    font-size: .58rem;
    font-weight: 500;
    color: #6d7f92
}

.page-hero {
    background: linear-gradient(120deg, #f8fbff, #eaf5ff);
    position: relative;
    overflow: hidden
}

.page-hero:after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -120px;
    top: -170px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(75, 164, 255, .24), transparent 68%)
}

.page-hero h1 {
    color: var(--forge-navy)
}

.detail-grid {
    background: #f8fbff
}

.detail-card,
.about-panel,
.journey-step,
.contact-form {
    border-color: #dce8f4;
    box-shadow: 0 12px 34px rgba(24, 70, 116, .06)
}

.journey-step {
    background: #f7fbff
}

.journey-step>span {
    background: linear-gradient(135deg, var(--forge-blue), #52a8ff);
    color: white
}

.website-comparison thead th {
    background: #eef6ff
}

.about-section {
    background: linear-gradient(135deg, #eef7ff, #f8fbff)
}

.values-grid article {
    border-top-color: var(--forge-blue)
}

.cta-panel {
    background: linear-gradient(120deg, #0b1f3a, #123c70)
}

.contact-section {
    background: white
}

footer {
    background: #f8fbff
}

.insights-demo {
    background: linear-gradient(145deg, #f8fbff, #fff);
    border-color: #dbe8f5
}

.demo-badge {
    color: #0d5ac6 !important;
    background: #eaf4ff
}

.demo-bar i {
    background: linear-gradient(90deg, var(--forge-blue), #6fb6ff)
}

.demo-donut {
    background: conic-gradient(var(--forge-blue) 0 63%, #65a9ee 63% 95%, #7abf70 95%)
}

@media(max-width:1050px) {
    .cards {
        grid-template-columns: repeat(2, 1fr)
    }

    .benefit-strip {
        grid-template-columns: repeat(2, 1fr)
    }

    .benefit-strip>div:nth-child(2) {
        border-right: 0
    }

    .benefit-strip>div:nth-child(-n+2) {
        border-bottom: 1px solid #dce8f4
    }

    .home-insights {
        grid-template-columns: 1fr
    }

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

    .hero-scene {
        min-height: 380px
    }

    .nav {
        gap: 17px
    }
}

@media(max-width:900px) {
    .site-header {
        height: 96px
    }

    .nav {
        top: 96px
    }

    .brand>img {
        width: 70px;
        height: 56px
    }

    .brand-forge {
        font-size: 1.35rem
    }

    .hero {
        min-height: auto
    }

    .page-hero {
        padding-top: 72px
    }
}

@media(max-width:620px) {

    .cards,
    .benefit-strip,
    .mini-kpis {
        grid-template-columns: 1fr
    }

    .mini-charts {
        grid-template-columns: 1fr
    }

    .mini-charts>div {
        height: 110px
    }

    .hero-scene {
        min-height: 330px
    }

    .scene-mug {
        width: 92px;
        height: 96px;
        font-size: .66rem
    }

    .scene-laptop {
        width: 62%;
        height: 44%
    }

    .benefit-strip>div {
        border-right: 0;
        border-bottom: 1px solid #dce8f4
    }

    .home-insights {
        padding-top: 56px;
        padding-bottom: 56px
    }

    .site-header {
        height: 88px
    }

    .nav {
        top: 88px
    }

    .brand>img {
        width: 62px;
        height: 50px
    }

    .brand-forge {
        font-size: 1.15rem
    }

    .brand-solutions {
        font-size: .44rem
    }

    .hero h1 {
        font-size: clamp(2.8rem, 14vw, 4.1rem)
    }
}