:root {
    --ink: #0d1521;
    --muted: #5e6b78;
    --paper: #f7fafc;
    --white: #fff;
    --orange: #f36f21;
    --orange2: #ff9d1f;
    --line: #e3e9ef;
    --shadow: 0 24px 70px rgba(13, 21, 33, .12)
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--white);
    line-height: 1.6
}

a {
    color: inherit
}

img {
    max-width: 100%;
    display: block
}

.site-header {
    height: 132px;
    padding: 0 clamp(20px, 5vw, 72px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    background: #fff;
    border-bottom: 1px solid rgba(227, 233, 239, .75);
    z-index: 20
}

.brand {
    display: flex;
    align-items: center;
    gap: 18px;
    text-decoration: none;
    color: var(--ink)
}

.brand>img {
    width: 148px;
    height: 116px;
    object-fit: contain;
    flex: 0 0 auto;
    background: #fff
}

.brand-wordmark {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1
}

.brand-forge {
    color: #0d2b55;
    font-size: 2.35rem;
    font-weight: 700;
    letter-spacing: .11em;
    line-height: .9
}

.brand-forge .brand-o {
    color: #f36f21
}

.brand-solutions {
    color: #f36f21;
    font-size: .88rem;
    font-weight: 650;
    letter-spacing: .3em;
    margin-top: 11px;
    white-space: nowrap
}

.nav {
    display: flex;
    align-items: center;
    gap: 28px
}

.nav a {
    text-decoration: none;
    font-weight: 650;
    color: #344150
}

.nav a:hover,
.text-link:hover {
    color: var(--orange)
}

.nav-cta {
    padding: 10px 16px;
    border: 1px solid var(--line);
    border-radius: 999px
}

.menu-button {
    display: none;
    border: 1px solid var(--line);
    background: white;
    padding: 9px 13px;
    border-radius: 10px
}

.section-pad {
    padding: clamp(72px, 9vw, 128px) clamp(20px, 7vw, 110px)
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .78rem;
    font-weight: 850;
    color: var(--orange);
    margin: 0 0 14px
}

.hero {
    min-height: calc(100vh - 132px);
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(40px, 7vw, 100px);
    align-items: center;
    background: radial-gradient(circle at 82% 18%, #fff0e5 0, transparent 28%), radial-gradient(circle at 12% 40%, #eef8ff 0, transparent 35%), linear-gradient(180deg, #fff, #f9fbfd)
}

.hero h1,
.page-hero h1 {
    font-size: clamp(3rem, 6.2vw, 6rem);
    line-height: .98;
    letter-spacing: -.055em;
    margin: 0;
    max-width: 1000px
}

.lead {
    font-size: clamp(1.12rem, 2vw, 1.35rem);
    color: var(--muted);
    max-width: 800px;
    margin: 28px 0
}

.hero-actions,
.section-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap
}

.section-actions {
    margin-top: 34px
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 21px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 800;
    border: 0;
    cursor: pointer;
    font-size: 1rem
}

.primary {
    background: linear-gradient(135deg, var(--orange), var(--orange2));
    color: #10151d;
    box-shadow: 0 12px 30px rgba(243, 111, 33, .25)
}

.secondary {
    background: white;
    border: 1px solid var(--line);
    color: var(--ink)
}

.trust-row {
    display: flex;
    gap: 10px 22px;
    flex-wrap: wrap;
    margin-top: 34px;
    color: #566575;
    font-size: .9rem
}

.trust-row span:before {
    content: "✓";
    color: var(--orange);
    font-weight: 900;
    margin-right: 7px
}

.hero-visual {
    position: relative;
    min-height: 520px;
    display: grid;
    place-items: center
}

.logo-card {
    width: min(420px, 90%);
    border-radius: 34px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transform: rotate(2deg)
}

.float-card {
    position: absolute;
    min-width: 132px;
    text-align: center;
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--line);
    box-shadow: 0 18px 45px rgba(13, 21, 33, .14);
    padding: 14px 18px 15px;
    border-radius: 16px
}

.float-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    margin: 0 auto 7px;
    color: var(--orange)
}

.float-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor
}

.float-card strong,
.float-card small {
    display: block
}

.float-card strong {
    line-height: 1.2
}

.float-card small {
    color: var(--muted);
    margin-top: 3px
}

.card-one {
    left: 0;
    bottom: 18%
}

.card-two {
    right: 1%;
    top: 15%
}

.card-three {
    left: 4%;
    top: 12%
}

.card-four {
    right: -2%;
    bottom: 14%
}

.services-section {
    background: var(--paper);
    padding-top: 48px
}

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

.section-heading h2,
.contact-intro h2,
.about-panel h2,
.cta-panel h2 {
    font-size: clamp(2.2rem, 4vw, 4rem);
    line-height: 1.05;
    letter-spacing: -.04em;
    margin: 0 0 18px
}

.section-heading>p:last-child {
    color: var(--muted);
    font-size: 1.1rem
}

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

.service-card {
    background: #eef8ff;
    border: 1px solid #d8eaf6;
    border-radius: 24px;
    padding: 30px;
    min-height: 220px;
    transition: .2s ease;
    display: flex;
    flex-direction: column
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 45px rgba(13, 21, 33, .08)
}

.service-card h3 {
    font-size: 1.5rem;
    margin: 0 0 10px
}

.service-card p {
    color: var(--muted);
    margin: 0 0 22px
}

.text-link {
    margin-top: auto;
    font-weight: 800;
    text-decoration: none
}

.page-hero {
    background: radial-gradient(circle at 80% 10%, #fff0e5 0, transparent 30%), linear-gradient(180deg, #fff, #f7fafc);
    padding-bottom: 50px
}

.detail-grid {
    background: var(--paper);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    padding-top: 28px
}

.process-list.section-pad,
.about-section.section-pad {
    padding-top: 28px
}

.detail-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: clamp(28px, 4vw, 48px)
}

.detail-card h2,
.process-detail h2,
.values-grid h2 {
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    line-height: 1.1;
    margin: 0 0 18px
}

.detail-card p,
.process-detail p,
.values-grid p {
    color: var(--muted)
}

.website-service {
    grid-column: 1/-1
}

.website-comparison {
    margin: 34px 0 28px;
    padding-top: 28px;
    border-top: 1px solid var(--line)
}

.website-comparison h3 {
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    line-height: 1.15;
    margin: 0 0 8px
}

.website-comparison .comparison-intro {
    margin: 0 0 20px
}

.comparison-scroll {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: white
}

.website-comparison table {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
    text-align: left
}

.website-comparison th,
.website-comparison td {
    padding: 15px 16px;
    border-bottom: 1px solid var(--line);
    vertical-align: top
}

.website-comparison thead th {
    background: #fff7f0;
    color: var(--ink);
    font-weight: 850
}

.website-comparison thead th:first-child {
    background: #f3f6f9
}

.website-comparison tbody th {
    width: 24%;
    background: #fafcfd;
    color: var(--ink);
    font-weight: 750
}

.website-comparison tbody td {
    color: var(--muted)
}

.website-comparison tbody tr:last-child th,
.website-comparison tbody tr:last-child td {
    border-bottom: 0
}

.insights-demo {
    margin: 30px 0;
    background: linear-gradient(145deg, #f8fbff, #fff);
    border: 1px solid #dbe6f0;
    border-radius: 22px;
    padding: 24px;
    box-shadow: 0 18px 45px rgba(13, 21, 33, .07)
}

.insights-demo-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 18px
}

.insights-demo-head h4 {
    font-size: 1.35rem;
    margin: 5px 0
}

.insights-demo-head>span {
    color: var(--muted);
    font-size: .82rem
}

.demo-badge {
    color: #b4480d !important;
    background: #fff1e8;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: .7rem !important;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .08em
}

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

.demo-kpis>div {
    background: white;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px
}

.demo-kpis span,
.demo-kpis small {
    display: block;
    color: var(--muted);
    font-size: .75rem
}

.demo-kpis strong {
    display: block;
    font-size: 1.55rem;
    margin: 2px 0
}

.demo-kpis small {
    color: #18794e;
    font-weight: 750
}

.demo-charts {
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: 12px;
    margin-top: 12px
}

.demo-chart {
    background: white;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 17px
}

.demo-chart h5 {
    font-size: .92rem;
    margin: 0 0 14px
}

.demo-bar {
    display: grid;
    grid-template-columns: 65px 1fr 35px;
    align-items: center;
    gap: 7px;
    margin: 10px 0;
    font-size: .72rem;
    color: var(--muted)
}

.demo-bar i {
    height: 9px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--orange), var(--orange2))
}

.demo-bar b {
    text-align: right;
    color: var(--ink)
}

.demo-device {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center
}

.demo-device h5 {
    grid-column: 1/-1
}

.demo-donut {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: conic-gradient(#1267e8 0 63%, #f36f21 63% 95%, #9ba9b7 95%);
    display: grid;
    place-items: center
}

.demo-donut>div {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: white;
    display: grid;
    place-content: center;
    text-align: center
}

.demo-donut strong,
.demo-donut span {
    display: block
}

.demo-donut span {
    font-size: .65rem;
    color: var(--muted)
}

.demo-legend {
    display: grid;
    gap: 8px;
    font-size: .7rem;
    color: var(--muted)
}

.demo-legend span {
    display: flex;
    align-items: center;
    gap: 6px
}

.demo-legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1267e8
}

.demo-legend span:nth-child(2) i {
    background: #f36f21
}

.demo-legend span:nth-child(3) i {
    background: #9ba9b7
}

.demo-note {
    font-size: .78rem !important;
    margin: 12px 0 0 !important;
    text-align: right
}

.process-list {
    max-width: 1100px;
    margin: auto
}

.process-detail {
    padding: 58px 0;
    border-bottom: 1px solid var(--line)
}

.process-detail:first-child {
    padding-top: 0
}

.process-detail:last-child {
    border: 0;
    padding-bottom: 0
}

.process-detail p {
    font-size: 1.08rem;
    max-width: 850px
}

.website-journey {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 34px
}

.journey-step {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 24px 22px;
    display: flex;
    gap: 16px;
    align-items: flex-start
}

.journey-step>span {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--orange), var(--orange2));
    color: #10151d;
    font-weight: 900
}

.journey-step h3 {
    margin: 3px 0 7px;
    font-size: 1.08rem;
    line-height: 1.25
}

.journey-step p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.55
}

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

.about-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    background: rgba(255, 255, 255, .78);
    border: 1px solid white;
    padding: clamp(30px, 6vw, 74px);
    border-radius: 30px;
    box-shadow: var(--shadow)
}

.about-copy {
    font-size: 1.15rem;
    color: var(--muted)
}

.aws-certification {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-top: 26px;
    text-decoration: none;
    font-weight: 800;
    color: var(--ink)
}

.aws-certification img {
    width: 118px;
    height: auto;
    flex: 0 0 auto
}

.aws-certification span {
    max-width: 190px;
    line-height: 1.3
}

.aws-certification:hover span {
    color: var(--orange)
}

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

.values-grid article {
    border-top: 3px solid var(--orange);
    padding-top: 24px
}

.cta-panel {
    background: #0e1621;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px
}

.cta-panel>div {
    max-width: 760px
}

.cta-panel p:not(.eyebrow) {
    color: #c2ccd5
}

.contact-section {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: clamp(40px, 7vw, 90px)
}

.contact-intro p {
    color: var(--muted)
}

.contact-intro a {
    font-weight: 800;
    color: var(--orange)
}

.contact-form {
    background: var(--paper);
    border: 1px solid var(--line);
    padding: clamp(22px, 4vw, 40px);
    border-radius: 24px
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
}

.contact-form label {
    display: block;
    font-weight: 750;
    margin-bottom: 18px
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    width: 100%;
    margin-top: 7px;
    border: 1px solid #cfd8e2;
    background: white;
    border-radius: 10px;
    padding: 13px 14px;
    font: inherit;
    color: var(--ink)
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    outline: 3px solid rgba(243, 111, 33, .18);
    border-color: var(--orange)
}

.hp {
    position: absolute !important;
    left: -10000px !important
}

.form-footer {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap
}

.form-footer p {
    margin: 0;
    color: var(--muted)
}

footer {
    padding: 28px clamp(20px, 7vw, 110px);
    display: flex;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .92rem
}

@media(max-width:900px) {
    .offer-cards {
        grid-template-columns: 1fr
    }

    .site-header {
        height: 112px
    }

    .hero {
        min-height: calc(100vh - 112px);
        grid-template-columns: 1fr
    }

    .brand>img {
        width: 112px;
        height: 88px
    }

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

    .brand-solutions {
        font-size: .68rem;
        margin-top: 8px
    }

    .hero-visual {
        min-height: 430px
    }

    .cards,
    .detail-grid {
        grid-template-columns: 1fr
    }

    .website-journey {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .about-panel,
    .contact-section {
        grid-template-columns: 1fr
    }

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

    .cta-panel {
        align-items: flex-start;
        flex-direction: column
    }

    .nav {
        display: none;
        position: absolute;
        top: 112px;
        left: 0;
        right: 0;
        background: white;
        padding: 20px;
        flex-direction: column;
        align-items: stretch;
        border-bottom: 1px solid var(--line)
    }

    .nav.open {
        display: flex
    }

    .menu-button {
        display: block
    }

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

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

    .section-pad {
        padding-left: 20px;
        padding-right: 20px
    }

    .hero {
        min-height: calc(100vh - 96px);
        padding-top: 64px
    }

    .hero h1,
    .page-hero h1 {
        font-size: clamp(2.7rem, 14vw, 4rem)
    }

    .hero-visual {
        min-height: 390px
    }

    .float-card {
        min-width: 108px;
        font-size: .76rem;
        padding: 9px 10px 10px
    }

    .float-icon {
        width: 24px;
        height: 24px;
        margin-bottom: 4px
    }

    .card-three {
        left: 0;
        top: 8%
    }

    .card-four {
        right: 0;
        bottom: 8%
    }

    .website-journey {
        grid-template-columns: 1fr
    }

    .journey-step {
        padding: 20px 18px
    }

    .aws-certification {
        align-items: flex-start
    }

    .aws-certification img {
        width: 96px
    }

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

    footer {
        flex-direction: column
    }

    .site-header {
        padding: 0 16px
    }

    .brand {
        gap: 8px
    }

    .brand>img {
        width: 86px;
        height: 68px
    }

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

    .brand-solutions {
        font-size: .5rem;
        letter-spacing: .2em;
        margin-top: 6px
    }

    .nav {
        top: 96px
    }

    .website-comparison {
        margin-left: -8px;
        margin-right: -8px
    }

    .website-comparison th,
    .website-comparison td {
        padding: 12px 13px;
        font-size: .9rem
    }

    .insights-demo {
        padding: 15px;
        margin-left: -8px;
        margin-right: -8px
    }

    .demo-kpis {
        grid-template-columns: 1fr 1fr
    }

    .demo-device {
        grid-template-columns: 110px 1fr
    }

    .insights-demo-head {
        flex-direction: column;
        gap: 4px
    }
}

.website-offer {
    background: linear-gradient(135deg, #fff, #f5faff)
}

.offer-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    max-width: 1100px
}

.offer-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: clamp(26px, 4vw, 40px);
    box-shadow: 0 18px 45px rgba(13, 21, 33, .06)
}

.offer-card.featured {
    border: 2px solid #1267e8;
    box-shadow: 0 22px 55px rgba(18, 103, 232, .12)
}

.offer-label {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .72rem;
    font-weight: 900;
    color: #1267e8;
    background: #eef6ff;
    border-radius: 999px;
    padding: 5px 10px;
    margin-bottom: 12px
}

.offer-card h3 {
    font-size: 1.6rem;
    margin: 0 0 8px
}

.offer-price {
    color: var(--ink) !important;
    font-size: 2rem;
    font-weight: 900;
    margin: 0 0 16px !important
}

.offer-price small {
    font-size: .82rem;
    font-weight: 650;
    color: var(--muted)
}

.offer-price span {
    display: block;
    font-size: 1rem;
    color: #1267e8;
    margin-top: 2px
}

.offer-card>p:not(.offer-price) {
    color: var(--muted)
}

.offer-card ul {
    list-style: none;
    padding: 0;
    margin: 22px 0
}

.offer-card li {
    position: relative;
    padding: 7px 0 7px 25px;
    color: #344150
}

.offer-card li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #1267e8;
    font-weight: 950
}

.offer-card .button {
    margin-top: 4px
}

.offer-note {
    max-width: 1050px;
    color: var(--muted);
    margin: 24px 0 0
}

.offer-note .text-link {
    margin-left: 5px
}

.hero-points {
    list-style: none;
    padding: 0 !important
}

.hero-points li {
    position: relative;
    padding: 5px 0 5px 28px
}

.hero-points li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #1267e8;
    font-weight: 950
}

/* Forge Insights example dashboard */
.insights-section {
    scroll-margin-top: 155px
}

.demo-visuals {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(180px, 1fr);
    gap: 6px;
    margin-top: 12px
}

.demo-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 15px
}

.demo-trend {
    grid-row: span 2;
    padding: 15px 0 8px;
    min-width: 0
}

.demo-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px
}

.demo-panel-head h5 {
    font-size: .92rem;
    margin: 0 0 2px
}

.demo-panel-head span {
    display: block;
    color: var(--muted);
    font-size: .7rem
}

.demo-panel-head>strong {
    font-size: .78rem;
    color: #1267e8
}

.demo-trend svg {
    width: calc(100% + 24px);
    margin-left: -12px;
    height: 290px;
    display: block;
    overflow: visible;
    margin-top: 4px
}

.demo-grid-lines line {
    stroke: #e8edf3;
    stroke-width: 1
}

.demo-area {
    fill: url(#demoArea)
}

.demo-line {
    fill: none;
    stroke: #1267e8;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round
}

.demo-line-points circle {
    fill: #fff;
    stroke: #1267e8;
    stroke-width: 2
}

.demo-trend text {
    fill: #7b8794;
    font-size: 11px
}

.demo-trend .demo-panel-head {
    padding: 0 5px
}

.demo-device {
    display: block
}

.demo-device-body {
    display: grid;
    grid-template-columns: 112px 1fr;
    align-items: center;
    gap: 14px
}

.demo-legend strong {
    margin-left: auto;
    color: var(--ink)
}

.demo-page-list {
    display: grid;
    gap: 0
}

.demo-page-list div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    font-size: .75rem
}

.demo-page-list div:last-child {
    border-bottom: 0
}

.demo-page-list span {
    color: var(--muted)
}

.demo-page-list strong {
    color: var(--ink)
}

@media(max-width:900px) {
    .demo-visuals {
        grid-template-columns: 1fr
    }

    .demo-trend {
        grid-row: auto
    }
}

@media(max-width:560px) {
    .insights-section {
        scroll-margin-top: 115px
    }

    .demo-device-body {
        grid-template-columns: 100px 1fr
    }

    .demo-trend svg {
        height: 220px
    }
}

.demo-legend .device-mobile i {
    background: #1267e8 !important
}

.demo-legend .device-desktop i {
    background: #0d7c86 !important
}

.demo-legend .device-tablet i {
    background: #9ba9b7 !important
}

.demo-donut {
    background: conic-gradient(#1267e8 0 63%, #0d7c86 63% 95%, #9ba9b7 95%) !important
}
/* Services: full information on desktop, concise expandable sections on mobile */
.service-focus{margin:30px 0;padding:26px;border:1px solid #dbe6f0;border-radius:20px;background:#f7fafc}
.responsive-service-details>summary{display:none}
.responsive-service-content{display:block!important}
.service-focus .admin-tools-guide{margin:0;padding:0;border:0;background:transparent}
@media(max-width:767px){
 .service-focus{margin:18px 0;padding:18px;background:#fff}
 .responsive-service-details>summary{display:flex;flex-direction:column;gap:8px;cursor:pointer;list-style:none;line-height:1.5}
 .responsive-service-details>summary::-webkit-details-marker{display:none}
 .responsive-service-details>summary strong{font-size:1.2rem;color:#0d1521}
 .responsive-service-details>summary span{font-size:1rem;color:#344150}
 .responsive-service-details>summary em{font-size:.95rem;font-style:normal;font-weight:700;color:#b4480d}
 .responsive-service-details[open]>summary em{font-size:0}
 .responsive-service-details[open]>summary em:after{content:"Hide details";font-size:.95rem}
 .responsive-service-content{display:none!important;margin-top:20px;border-top:1px solid #e3e9ef;padding-top:14px}
 .responsive-service-details[open] .responsive-service-content{display:block!important}
 .detail-card{padding:20px}
 .detail-card p,.service-focus p{font-size:1rem;line-height:1.7}
}

/* Services: Business Admin Tools invoice showcase */
/* Override legacy service card layout rules for this two-column showcase. */
                        #admin-tools .admin-layout {width:100%;}
                        #admin-tools { background:linear-gradient(125deg,#f5faff,#fff); }
                        #admin-tools .admin-layout { display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:30px;align-items:start;min-width:0; }
                        #admin-tools .admin-layout > div { min-width:0; }
                        #admin-tools .admin-layout > div:nth-child(2) {grid-column:2;grid-row:1;align-self:start;}
                        #admin-tools .admin-kicker {color:#1267e8;font-size:.85rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;margin:0 0 10px}
                        #admin-tools .admin-heading {font-size:clamp(1.6rem,2.5vw,2.35rem);line-height:1.16;margin:0 0 14px}
                        #admin-tools .admin-rule {width:70px;height:4px;background:#1267e8;border-radius:4px;margin:0 0 24px}
                        #admin-tools .admin-feature {display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:start;margin:22px 0}
                        #admin-tools .admin-icon {display:flex;align-items:center;justify-content:center;width:48px;height:48px;min-width:48px;max-width:48px;border-radius:13px;background:#e7f2ff;color:#1267e8;font-size:1rem;font-weight:800;line-height:1;flex-shrink:0;} 
                        
                        
                        #admin-tools .admin-feature h3 {font-size:1.05rem;margin:0 0 4px}
                        #admin-tools .admin-feature p {margin:0;font-size:.95rem;line-height:1.5}
                        #admin-tools .invoice-example {min-width:0;overflow:hidden;background:#fff;border:1px solid #e2eaf4;border-radius:16px;padding:clamp(16px,2.5vw,30px);box-shadow:0 12px 34px rgba(15,38,70,.07);font-size:.88rem;color:#17233a}
                        #admin-tools .invoice-top,#admin-tools .invoice-parties {display:flex;justify-content:space-between;gap:18px}
                        #admin-tools .invoice-top {align-items:start;margin-bottom:25px}
                        #admin-tools .invoice-logo {font-weight:900;color:#1267e8;font-size:1.1rem;line-height:1.15}
                        #admin-tools .invoice-logo small {display:block;font-size:.68rem;letter-spacing:.05em;color:#627186;margin-top:5px}
                        #admin-tools .invoice-title {text-align:right}
                        #admin-tools .invoice-title strong {display:block;font-size:1.65rem;margin-bottom:6px;color:#17233a}
                        #admin-tools .invoice-parties {margin-bottom:22px}
                        #admin-tools .invoice-parties > div {flex:1;min-width:0}
                        #admin-tools .invoice-parties strong {display:block;margin-bottom:5px}
                        #admin-tools .invoice-table {width:100%;table-layout:fixed;border-collapse:collapse;font-size:.83rem}
                        #admin-tools .invoice-table th:first-child {width:46%} #admin-tools .invoice-table th {background:#eaf3ff;text-align:left}
                        #admin-tools .invoice-table th,#admin-tools .invoice-table td {padding:10px 7px;border-bottom:1px solid #e0e8f1}
                        #admin-tools .invoice-table th:not(:first-child),#admin-tools .invoice-table td:not(:first-child) {text-align:right}
                        #admin-tools .invoice-total {margin:15px 0 26px auto;max-width:230px}
                        #admin-tools .invoice-total div {display:flex;justify-content:space-between;gap:10px;padding:5px 8px}
                        #admin-tools .invoice-total .due {background:#e6f1ff;border-radius:7px;font-weight:800;font-size:1.02rem}
                        #admin-tools .invoice-payment {display:grid;grid-template-columns:1fr 1fr;gap:14px}
                        #admin-tools .invoice-payment p {font-size:.82rem;line-height:1.55;margin:6px 0 0}
                        #admin-tools .invoice-terms {background:#edf5ff;border-radius:10px;padding:13px}
                        #admin-tools .admin-demo-note {font-size:.78rem;text-align:right;margin:12px 0 0;color:#68788a}
                        #admin-tools .admin-plans {border-top:1px solid #dce6f0;padding-top:20px;margin-top:25px}
                        @media(max-width:700px) {#admin-tools .admin-layout {grid-template-columns:minmax(0,1fr)} #admin-tools .admin-layout > div:nth-child(2) {grid-column:1;grid-row:auto} #admin-tools .invoice-example {max-width:680px;width:100%}}
                        @media(max-width:450px) {#admin-tools .invoice-payment {grid-template-columns:1fr} #admin-tools .invoice-example {font-size:.78rem} #admin-tools .invoice-table {font-size:.74rem} #admin-tools .invoice-table th,#admin-tools .invoice-table td {padding:8px 4px}}
#admin-tools .admin-layout {display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;align-items:start !important;}
#admin-tools .invoice-example {display:block !important;background:#fff !important;color:#17233a !important;border:1px solid #d6e3f0 !important;box-shadow:0 16px 45px rgba(24,70,116,.12) !important;}
#admin-tools .invoice-example .invoice-table {display:table;width:100%;}
#admin-tools .invoice-example .invoice-table tr {display:table-row;}
#admin-tools .invoice-example .invoice-table td,#admin-tools .invoice-example .invoice-table th {display:table-cell;}
#admin-tools .invoice-example .invoice-top,#admin-tools .invoice-example .invoice-parties {display:flex;}
#admin-tools .invoice-example .invoice-payment {display:grid;}
@media(max-width:800px) {#admin-tools .admin-layout {grid-template-columns:minmax(0,1fr) !important;} #admin-tools .admin-layout > div:nth-child(2) {grid-column:1;grid-row:auto;}}


/* Admin Tools: understated chevron markers, no SVG dependencies */
#admin-tools .admin-feature {grid-template-columns:34px minmax(0,1fr);gap:12px;}
#admin-tools .admin-feature .admin-icon {display:flex;align-items:center;justify-content:center;width:34px;height:34px;min-width:34px;max-width:34px;border-radius:50%;background:#e7f2ff;color:#1267e8;font-size:2rem;font-weight:500;line-height:1;}


/* Standalone Admin Tools promotion: scoped layout for desktop and mobile. */
.home-admin-standalone {
    background: #f2f7fc;
}
.home-admin-standalone .offer-cards {
    grid-template-columns: minmax(0, 1fr);
    max-width: 760px;
    margin-inline: auto;
}
.home-admin-standalone .offer-card {
    min-width: 0;
}
#admin-standalone .admin-feature {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    margin: 20px 0;
}
#admin-standalone .admin-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: #e7f2ff;
    color: #1267e8;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
}
#admin-standalone .admin-feature h3 {
    font-size: 1.05rem;
    margin: 0 0 4px;
}
#admin-standalone .admin-feature p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.5;
}
@media (max-width: 600px) {
    #admin-standalone .admin-feature {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 10px;
    }
    #admin-standalone .admin-icon {
        width: 36px;
        height: 36px;
    }
}