:root {



    --ink: #14372a;



    --muted: #5e7066;



    --green: #136b45;



    --lime: #c3ef79;



    --paper: #f7f9f3;



    --line: #dce5d8;



    --white: #fff



}







* {



    box-sizing: border-box



}







html {



    scroll-behavior: smooth



}







body {



    margin: 0;



    background: var(--paper);



    color: var(--ink);



    font: 16px/1.65 Arial, Helvetica, sans-serif



}







a {



    color: inherit;



    text-decoration: none



}







button,



input,



textarea {



    font: inherit



}







button,



a {



    -webkit-tap-highlight-color: transparent



}







button {



    cursor: pointer



}







button:focus-visible,



a:focus-visible {



    outline: 3px solid #80b842;



    outline-offset: 5px



}







h1,



h2,



h3,



p {



    margin: 0



}







h1,



h2,



h3 {



    line-height: 1.08;



    letter-spacing: -.045em



}







h1 {



    font-size: clamp(44px, 5.8vw, 82px);



    font-weight: 500



}







h2 {



    font-size: clamp(30px, 3.7vw, 52px);



    font-weight: 500



}







h3 {



    font-size: 25px;



    font-weight: 500



}







p {



    color: var(--muted)



}







.wrap {



    width: min(1200px, calc(100% - 80px));



    margin: auto



}







.eyebrow {



    font-size: 18px;



    letter-spacing: .17em;



    text-transform: uppercase;



    font-weight: 700;



    color: var(--green);



    margin-bottom: 22px;



    display: block



}







.btn {



    display: inline-flex;



    justify-content: center;



    align-items: center;



    gap: 24px;



    border: 1px solid var(--green);



    padding: 14px 24px;



    border-radius: 6px;



    background: var(--green);



    color: white;



    font-size: 14px;



    font-weight: 600;



    line-height: 1.3



}







.btn:hover {



    filter: brightness(1.08)



}







.btn.light {



    background: var(--lime);



    color: #18372a;



    border-color: var(--lime)



}







.btn.ghost {



    background: transparent;



    color: inherit;



    border-color: currentColor



}







.actions {



    display: flex;



    gap: 14px;



    flex-wrap: wrap;



    margin-top: 30px



}







header {



    background: white;

    position: fixed;
    width: 100%;
    z-index: 999;

    border-bottom: 1px solid var(--line)



}







.nav {



    height: 88px;



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 24px



}







.brand {



    display: block;



    width: 158px;



    height: 45px;



    overflow: hidden;



    position: relative;



    background: #fdfdfd;



    flex-shrink: 0



}







.brand video,



.brand img {



    position: absolute;



    width: 224px;



    max-width: none;



    height: 126px;



    left: -28px;



    top: -39px



}







.navlinks {



    display: flex;



    align-items: center;



    gap: 32px;



    font-size: 14px



}







.navlinks a.active {



    color: var(--green);



    font-weight: 700



}







.menu {



    display: none;



    background: none;



    border: 1px solid var(--line);



    border-radius: 5px;



    padding: 8px 14px



}







.hero {



    background: linear-gradient(90deg, rgba(4, 18, 10, .84), rgba(4, 18, 10, .35) 54%, transparent 80%), url('assets/hero.jpeg') center/cover;



    color: white;



    min-height: 615px;



    display: flex;



    align-items: center



}







.hero .wrap {



    padding-top: 65px;



    padding-bottom: 65px



}







.hero .eyebrow {



    color: var(--lime)



}







.hero h1 {



    max-width: 700px



}







.hero h1 em {



    font-style: normal;



    color: var(--lime)



}







.hero .sub {



    font-size: 21px;



    color: white;



    margin: 24px 0 14px;



    max-width: 590px



}







.hero p {



    max-width: 560px;



    color: #d2d9d2;



    font-size: 15px



}







.trust {



    border-bottom: 1px solid var(--line);



    background: #edf2e8;



    padding: 20px 0;



    font-size: 13px;



    text-align: center;



    color: #41604d



}







.section {



    padding: 90px 0



}



/* heighlight  */



.trust {



    display: flex;



    align-items: center;



    justify-content: center;



    gap: 12px;



    flex-wrap: wrap;



    padding: 16px 20px



}







.trust-cert {



    display: inline-flex;



    align-items: center;



    justify-content: center;



    width: 38px;



    height: 38px;



    border: 1px solid var(--green);



    border-radius: 50%;



    color: var(--green);



    background: white;



    flex-shrink: 0;



    transition: *background* .2s, color .2s



}







.trust-cert:hover {



    background: var(--green);



    color: white



}







.trust mark {



    background: var(--lime);



    color: var(--ink);



    font-weight: 600;



    padding: 4px 10px;



    border-radius: 4px



}



.split.intro-card {



    background: var(--white);



    border: 1px solid var(--line);



    border-radius: 16px;



    padding: 48px;



    gap: 60px;



    box-shadow: 0 10px 30px rgba(19, 107, 69, .07);



    align-items: center



}







@media(max-width:650px) {



    .split.intro-card {



        padding: 28px 22px;



        gap: 22px;



        border-radius: 12px



    }



}



.split.intro-card {



    background: var(--white);



    border: 1px solid var(--line);



    border-radius: 16px;



    padding: 48px;



    gap: 60px;



    box-shadow: 0 10px 30px rgba(19, 107, 69, .07);



    align-items: center



}







@media(max-width:650px) {



    .split.intro-card {



        padding: 28px 22px;



        gap: 22px;



        border-radius: 12px



    }



}



.split {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 85px;



    align-items: start



}







.split p+p {



    margin-top: 18px



}







.feature-strip {



    display: grid;



    grid-template-columns: repeat(3, 1fr);



    gap: 42px;



    margin-top: 55px;



    border-top: 1px solid var(--line);



    padding-top: 35px



}







.feature-strip h3 {



    margin: 15px 0



}







.icon {



    display: inline-flex;



    width: 46px;



    height: 46px;



    border: 1px solid #b0c6a7;



    border-radius: 50%;



    align-items: center;



    justify-content: center;



    color: var(--green);



    font-size: 21px



}







.dark {



    background: #123e2c;



    color: white



}







.dark p {



    color: #bcd0c2



}







.dark .eyebrow {



    color: var(--lime)



}







.section-head {



    display: flex;



    justify-content: space-between;



    align-items: end;



    gap: 60px;



    margin-bottom: 45px



}







.section-head h2 {



    max-width: 670px



}







.section-head p {



    max-width: 320px;



    font-size: 14px



}



.btn.ai-glow {



    position: relative;



    overflow: hidden;



    flex-shrink: 0;



    background: linear-gradient(135deg, #c3ef79, #8fe3b0);



    color: #123e2c;



    border: 0;



    box-shadow: 0 0 0 1px rgba(195, 239, 121, .5), 0 0 16px rgba(195, 239, 121, .35);



    animation: aiPulse 3s ease-in-out infinite;



    transition: transform .2s



}







/* halka shimmer sweep */



.btn.ai-glow::after {



    content: "";



    position: absolute;



    top: 0;



    left: -60%;



    width: 40%;



    height: 100%;



    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);



    transform: skewX(-20deg);



    animation: aiShine 4s ease-in-out infinite



}







.btn.ai-glow:hover {



    transform: translateY(-2px);



    filter: none;



    box-shadow: 0 0 0 1px rgba(195, 239, 121, .8), 0 0 26px rgba(195, 239, 121, .55)



}







@keyframes aiPulse {



    0%, 100% { box-shadow: 0 0 0 1px rgba(195, 239, 121, .5), 0 0 12px rgba(195, 239, 121, .25) }



    50% { box-shadow: 0 0 0 1px rgba(195, 239, 121, .7), 0 0 24px rgba(195, 239, 121, .5) }



}







@keyframes aiShine {



    0%, 60% { left: -60% }



    100% { left: 130% }



}







@media(max-width:650px) {



    .section-head .btn.ai-glow { margin-top: 22px }



}







@media(prefers-reduced-motion:reduce) {



    .btn.ai-glow, .btn.ai-glow::after { animation: none }



}



.activities {



    display: grid;



    grid-template-columns: repeat(4, 1fr);



    gap: 18px



}







.activity {



    padding: 30px 25px;



    border-top: 1px solid #557461;



    background: #1c4936;



    min-height: 240px



}







.activity .icon {



    color: var(--lime);



    border-color: #5b7a61



}







.activity h3 {



    margin: 30px 0 13px;



    font-size: 23px



}







.activity p {



    font-size: 14px



}







.steps {



    display: grid;



    grid-template-columns: repeat(4, 1fr);



    gap: 26px;



    margin-top: 45px



}







.step {



    border-top: 1px solid #9eb5a2;



    padding-top: 22px



}







.step b {



    font-size: 13px;



    color: var(--green)



}







.step h3 {



    margin: 24px 0 14px;



    font-size: 23px



}







.step p {



    font-size: 14px



}







.audiences {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 0 65px;



    margin-top: 40px



}







.audience {



    padding: 28px 0;



    border-top: 1px solid var(--line)



}







.audience h3 {



    font-size: 22px;



    margin-bottom: 13px



}







.soft {



    background: #eaf0e4



}







.insight {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 65px;



    align-items: center



}







.insight h2 {



    margin-bottom: 25px



}







.visual {



    min-height: 325px;



    background: #dce7d4;



    display: flex;



    align-items: center;



    justify-content: center;



    flex-direction: column;



    border: 1px solid #c3d3b7;



    padding: 35px;



    text-align: center;



    border-radius: 12px



}







.visual .orbit {



    width: 130px;



    height: 130px;



    border: 1px solid #9bb591;



    border-radius: 50%;



    display: grid;



    place-items: center;



    box-shadow: 0 0 0 20px #d4e1cc, 0 0 0 21px #b5cba8;



    margin: 30px



}







.visual .orbit span {



    font-size: 45px;



    color: var(--green)



}







.visual small {



    color: #48643d;



    letter-spacing: .13em;



    text-transform: uppercase;



    font-size: 10px;



    margin-top: 22px



}







.advisory {



    display: flex;



    align-items: center;



    gap: 60px;



    border: 1px solid var(--line);



    padding: 45px;



    border-radius: 10px



}







.advisory div {



    flex: 1



}







.advisory h2 {



    font-size: 38px;



    margin-bottom: 20px



}







.advisory .btn {



    flex-shrink: 0



}







.closing {



    text-align: center;



    background: var(--lime);



    padding: 70px 20px



}







.closing h2 {



    max-width: 740px;



    margin: auto



}







.closing p {



    max-width: 640px;



    margin: 22px auto;



    color: #36513a



}







.closing small {



    display: block;



    margin-top: 20px;



    color: #38553e



}







.footer {



    background: #092f22;



    color: white;



    padding: 45px 0 24px



}







.footer-top {



    display: flex;



    justify-content: space-between;



    align-items: center;



    gap: 30px;



    padding-bottom: 35px



}







.footer p {



    color: #a4baab;



    font-size: 13px;



    margin-top: 12px



}







.footer-links {



    display: flex;



    gap: 26px;



    font-size: 13px



}







.copyright {



    border-top: 1px solid #355443;



    padding-top: 20px;



    font-size: 11px;



    color: #a4baab;



    display: flex;



    justify-content: space-between;



    gap: 20px



}







.pricing-intro {



    text-align: center;



    padding: 68px 20px 42px



}







.pricing-intro h1 {



    font-size: 64px



}







.pricing-intro p {



    font-size: 19px;



    margin-top: 20px



}







.toggle {



    display: inline-flex;



    align-items: center;



    border: 1px solid var(--line);



    background: white;



    border-radius: 100px;



    padding: 5px;



    margin-top: 28px;



    gap: 5px



}







.toggle button {



    border: 0;



    background: transparent;



    color: var(--ink);



    padding: 10px 24px;



    border-radius: 100px;



    font-size: 13px



}







.toggle button.selected {



    background: var(--ink);



    color: white



}







.save {



    font-size: 11px;



    color: var(--green);



    background: #e4f3cd;



    border-radius: 30px;



    padding: 7px 12px;



    margin-right: 5px



}







.plans {



    display: grid;



    grid-template-columns: repeat(4, 1fr);



    gap: 16px;



    padding: 15px 0 60px



}







.plan {



    background: white;



    border: 1px solid var(--line);



    border-radius: 12px;



    padding: 28px 22px;



    position: relative;



    display: flex;



    flex-direction: column



}







.plan.popular {



    background: #163f2c;



    color: white;



    border-color: #163f2c



}







.plan .tag {



    font-size: 10px;



    letter-spacing: .1em;



    text-transform: uppercase;



    min-height: 25px;



    color: var(--green)



}







.plan.popular .tag {



    color: var(--lime)



}







.plan h2 {



    font-size: 29px;



    margin: 9px 0 14px



}







.plan p {



    font-size: 13px;



    min-height: 66px



}







.plan.popular p {



    color: #bed0c4



}







.price {



    font-size: 43px;



    letter-spacing: -.05em;



    margin: 25px 0 4px;



    line-height: 1.1



}







.price span {



    font-size: 12px;



    letter-spacing: 0



}







.compare-price {



    font-size: 11px;



    color: #6e7d70;



    min-height: 21px



}







.popular .compare-price {



    color: #bad0bc



}







.credits {



    margin: 25px 0;



    padding: 18px 12px;



    background: #edf5e7;



    border-radius: 6px;



    font-size: 13px;



    color: #224d2e



}







.credits strong {



    font-size: 18px;



    display: block



}







.credits small {



    display: block;



    font-size: 11px



}







.plan ul {



    padding: 0;



    margin: 22px 0;



    list-style: none;



    font-size: 12px;



    flex: 1



}







.plan li {



    margin-bottom: 12px;



    padding-left: 20px;



    position: relative



}







.plan li:before {



    content: '✓';



    position: absolute;



    left: 0;



    color: #459455



}







.popular li:before {



    color: var(--lime)



}







.plan .btn {



    font-size: 12px;



    padding: 14px 8px;



    gap: 8px;



    width: 100%



}







.ribbon {



    position: absolute;



    right: 18px;



    top: -13px;



    background: var(--lime);



    color: #14372a;



    padding: 4px 12px;



    border-radius: 20px;



    font-size: 10px;



    font-weight: 700



}







.channels {



    font-size: 11px;



    padding: 0 0 18px;



    border-bottom: 1px solid var(--line);



    color: #4c6655



}







.popular .channels {



    color: #d0e2d2;



    border-color: #4f6c59



}







.credit-explainer {



    display: grid;



    grid-template-columns: 1fr 1fr 1fr;



    gap: 35px;



    border-top: 1px solid var(--line);



    border-bottom: 1px solid var(--line);



    padding: 36px 0



}







.credit-explainer h3 {



    font-size: 25px



}







.credit-explainer p {



    font-size: 13px;



    margin-top: 8px



}







.topups {



    display: grid;



    grid-template-columns: 1.4fr repeat(3, 1fr);



    gap: 18px;



    padding: 55px 0



}







.topup {



    padding: 24px;



    background: white;



    border: 1px solid var(--line);



    border-radius: 9px



}







.topup strong {



    display: block;



    font-size: 28px;



    margin: 10px 0 2px



}







.topup small {



    color: var(--muted)



}







.topup button {



    background: none;



    border: 0;



    padding: 14px 0 0;



    color: var(--green);



    font-size: 12px



}







.sales {



    background: #e6efdc;



    border-radius: 12px;



    padding: 40px;



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 40px;



    margin-bottom: 65px



}







.sales h2 {



    font-size: 33px;



    margin-bottom: 10px



}







.sales p {



    font-size: 14px



}







.legal {



    min-height: 65vh;



    padding: 70px 0



}







.legal h1 {



    font-size: 42px;



    margin-bottom: 25px;
    margin-top: 60px


}







dialog {



    width: min(560px, calc(100% - 32px));



    border: 0;



    border-radius: 15px;



    padding: 32px;



    color: var(--ink);



    max-height: 90vh



}







dialog::backdrop {



    background: #062518b8;



    backdrop-filter: blur(5px)



}







dialog h2 {



    font-size: 32px;



    margin: 15px 0 12px



}







dialog p {



    font-size: 13px;



    margin-bottom: 20px



}







.close {



    position: absolute;



    right: 17px;



    top: 12px;



    background: none;



    border: 0;



    font-size: 25px



}







.fields {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 15px



}







.fields label {



    font-size: 12px



}







.fields input,



.fields textarea {



    display: block;



    width: 100%;



    border: 1px solid #b7c7b6;



    border-radius: 5px;



    padding: 10px;



    margin-top: 5px;



    background: #fcfdfb



}







.fields .wide {



    grid-column: 1/-1



}







.fields textarea {



    resize: vertical;



    min-height: 100px



}







.form-note {



    font-size: 11px !important;



    margin-top: 15px



}







#wordcount {



    font-size: 11px



}







#formStatus {



    margin-top: 18px



}







body.mint {



    --paper: #fcfdf9;



    --green: #287b42;



    --ink: #193926;



    --lime: #d2edab



}







.mint .hero {



    margin: 24px 40px 0;



    border-radius: 20px;



    min-height: 580px;



    background-position: center



}







.mint .hero .wrap {



    width: min(1130px, calc(100% - 70px))



}







.mint .hero h1 {



    font-family: Georgia, serif;



    font-size: 76px;



    letter-spacing: -.06em;



    max-width: 650px



}







.mint h2 {



    font-family: Georgia, serif



}







.mint .trust {



    background: transparent;



    margin: 0 40px



}







.mint .dark {



    background: #e8f1e1;



    color: var(--ink)



}







.mint .dark p {



    color: #57705b



}







.mint .dark .eyebrow {



    color: var(--green)



}







.mint .activity {



    background: transparent;



    border-color: #b5cbb0;



    border-right: 1px solid #bfd1b6



}







.mint .activity .icon {



    color: var(--green);



    border-color: #a2bb99



}







.mint .feature-strip {



    border: 0;



    gap: 18px



}







.mint .feature-strip article {



    padding: 30px;



    background: #eff4e9;



    border-radius: 16px



}







.mint .plan {



    border-radius: 20px



}







.mint .plan.popular {



    background: #e2f2ca;



    color: var(--ink);



    border: 1px solid #a1ca83



}







.mint .plan.popular p,



.mint .popular .channels,



.mint .popular .compare-price {



    color: #506a42



}







.mint .plan.popular .tag {



    color: var(--green)



}







.mint .popular li:before {



    color: var(--green)



}







.mint .closing {



    background: #174b31;



    color: white



}







.mint .closing p,



.mint .closing small {



    color: #c6d9c8



}







.mint .closing .btn {



    background: var(--lime);



    color: var(--ink);



    border-color: var(--lime)



}







.mint .pricing-intro {



    background: #ecf3e4;



    padding-bottom: 85px



}







.mint .plans {



    margin-top: -25px



}







.mint .pricing-intro h1 {



    font-family: Georgia, serif



}







.mint .toggle {



    margin-bottom: 10px



}







@media(max-width:1000px) {



    .wrap {



        width: calc(100% - 48px)



    }







    .navlinks {



        gap: 18px



    }







    .plans {



        grid-template-columns: repeat(2, 1fr);



        gap: 25px



    }







    .split,



    .insight {



        gap: 35px



    }







    .activities,



    .steps {



        grid-template-columns: repeat(2, 1fr)



    }







    .topups {



        grid-template-columns: repeat(3, 1fr)



    }







    .topups>div:first-child {



        grid-column: 1/-1



    }







    .hero h1,



    .mint .hero h1 {



        font-size: 62px



    }







    .hero {



        background-position: 60% center



    }







    .section {



        padding: 65px 0



    }



}







@media(max-width:650px) {



    .wrap {



        width: calc(100% - 36px)



    }







    .nav {



        height: 74px



    }







    .brand {



        width: 140px



    }







    .menu {



        display: block



    }







    .navlinks {



        display: none;



        position: absolute;



        top: 74px;



        left: 0;



        right: 0;



        padding: 25px;



        background: white;



        z-index: 10;



        box-shadow: 0 10px 20px #1232



    }







    .navlinks.open {



        display: flex;



        flex-direction: column;



        align-items: stretch



    }







    .hero,



    .mint .hero {



        min-height: 620px;



        background-position: 62% center;



        margin: 0;



        border-radius: 0;



        background-image: linear-gradient(90deg, #07190de8, #07190d80), url('assets/hero.jpeg')



    }







    .hero h1,



    .mint .hero h1 {



        font-size: 49px



    }







    .hero .sub {



        font-size: 19px



    }







    .hero .wrap,



    .mint .hero .wrap {



        width: calc(100% - 36px);



        padding: 55px 0



    }







    .hero p {



        font-size: 14px



    }







    .trust,



    .mint .trust {



        font-size: 11px;



        margin: 0;



        padding: 18px



    }







    .section {



        padding: 55px 0



    }







    .split,



    .insight,



    .feature-strip,



    .audiences,



    .plans,



    .credit-explainer {



        grid-template-columns: 1fr;



        gap: 26px



    }







    .feature-strip {



        margin-top: 30px



    }







    .section-head {



        display: block



    }







    .section-head p {



        margin-top: 22px



    }







    .activities,



    .steps {



        grid-template-columns: 1fr 1fr;



        gap: 20px



    }







    .activity {



        padding: 20px 14px;



        min-height: 230px



    }







    .activity h3,



    .step h3 {



        font-size: 21px



    }







    .activity p,



    .step p {



        font-size: 13px



    }







    .advisory,



    .sales {



        display: block;



        padding: 28px



    }







    .advisory h2,



    .sales h2 {



        font-size: 31px



    }







    .advisory .btn,



    .sales .btn {



        margin-top: 25px



    }







    .closing h2 {



        font-size: 37px



    }







    .footer-top,



    .copyright {



        display: block



    }







    .footer-links {



        flex-wrap: wrap;



        margin-top: 28px



    }







    .pricing-intro h1 {



        font-size: 48px



    }







    .pricing-intro p {



        font-size: 17px



    }







    .toggle button {



        padding: 10px 15px



    }







    .save {



        font-size: 10px;



        padding: 6px



    }







    .plans {



        padding-top: 10px



    }







    .plan {



        padding: 28px



    }







    .plan p {



        min-height: 0



    }







    .topups {



        grid-template-columns: 1fr



    }







    .topups>div:first-child {



        grid-column: auto



    }







    .fields {



        grid-template-columns: 1fr



    }







    .mint .plans {



        margin-top: -30px



    }







    .visual {



        min-height: 280px



    }







    h2 {



        overflow-wrap: break-word



    }



}







@media(prefers-reduced-motion:reduce) {



    html {



        scroll-behavior: auto



    }



}







@media(max-width:650px) {



    .brand {



        width: 158px



    }



}







/* Privacy Policy  */



.legal {



    max-width: 860px



}







.legal h2 {



    font-size: 26px;



    margin: 42px 0 14px



}







.legal p {



    margin-bottom: 14px



}







.legal ul {



    margin: 0 0 16px;



    padding-left: 22px;



    color: var(--muted)



}







.legal li {



    margin-bottom: 8px



}







.legal-date {



    font-size: 13px;



    margin-bottom: 10px



}







.legal-contact {



    font-style: normal;



    background: #eaf0e4;



    border-left: 4px solid var(--green);



    border-radius: 8px;



    padding: 18px 22px;



    margin-top: 6px;



    line-height: 1.8



}







.legal-contact a {



    color: var(--green);



    text-decoration: underline



}







/* growth pro  */



.plan .btn {



    margin-top: auto



}







/* Annual code  */



.plan[hidden] {



    display: none



}







.plans.annual {



    grid-template-columns: repeat(3, 1fr)



}







@media(max-width:1000px) {



    .plans.annual {



        grid-template-columns: repeat(2, 1fr)



    }



}







@media(max-width:650px) {



    .plans.annual {



        grid-template-columns: 1fr



    }



}



/* Homepage: centred introduction beneath the hero banner */

.hero-introduction {

    padding: 56px 0 36px;

    background: var(--paper);

}

.hero-introduction .wrap {

    max-width: 980px;

}

.hero-introduction p {

    color: var(--ink);

    font-size: clamp(16px, 1.45vw, 19px);

    line-height: 1.85;

    text-align: center;

}

.hero-introduction strong,

.intro-card strong {

    font-weight: 700;

}


@media (max-width: 650px) {

    .hero-introduction { padding: 38px 0 28px; }

    .hero-introduction p { font-size: 16px; line-height: 1.75; }

}

/* Only the carbon footprint introduction: remove card styling. */
.split.intro-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

/* Keep the statement as bold body text, not a heading. */
.split.intro-card .intro-emphasis {
    font-size: 16px !important;
    line-height: 1.65;
    letter-spacing: normal;
    font-weight: 700;
}


/* 2026 homepage refinement — original hero/banner unchanged */
body.v1 .wrap { width: min(1320px, calc(100% - 64px)); max-width: 1320px; }
body.v1 .hero .wrap { max-width: 1320px; }
body.v1 .section { padding-top: 58px; padding-bottom: 58px; }
body.v1 .hero-introduction { padding: 35px 0 22px; }
body.v1 .hero-introduction .wrap { max-width: 1060px; }
body.v1 .hero-introduction p { line-height: 1.65; }
body.v1 .trust { display: none; }
body.v1 .split.intro-card { gap: 40px; align-items: center; }
body.v1 .split.intro-card p { margin-top: 0; margin-bottom: 12px; line-height: 1.65; }
body.v1 .split.intro-card p:last-child { margin-bottom: 0; }
body.v1 #activities { padding: 62px 0 68px; }
body.v1 #activities .section-head { justify-content: center; text-align: center; margin-bottom: 30px; }
body.v1 #activities .section-head h2 { max-width: none; }
body.v1 .activities { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
body.v1 .activity { position: relative; min-height: 222px; padding: 28px 24px 24px; border: 1px solid rgba(187,230,199,.27); border-radius: 16px; background: linear-gradient(150deg,#20523c 0%,#143b2c 100%); transition: transform .2s ease,border-color .2s ease; overflow: hidden; }
body.v1 .activity:hover { transform: translateY(-4px); border-color: #a4dfb5; }
body.v1 .activity .icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border: 1px solid rgba(183,237,190,.35); border-radius: 14px; color: #c6f1d1; background: rgba(178,229,184,.09); margin-bottom: 22px; }
body.v1 .activity .icon svg { width: 28px; height: 28px; }
body.v1 .activity h3 { font-size: clamp(17px,1.4vw,21px); margin: 0 0 11px; line-height: 1.3; }
body.v1 .activity p { font-size: 14px; line-height: 1.6; padding-right: 12px; margin: 0; opacity: .85; }
body.v1 .activity-arrow { position:absolute; top: 28px; right: 24px; opacity: .7; font-size: 19px; }
body.v1 .rating-section { padding-top: 35px; padding-bottom: 65px; }
body.v1 .rating-box { text-align: center; padding: clamp(32px,4.5vw,58px) 32px; }
body.v1 .rating-box h2, body.v1 .rating-box p { max-width: 850px; margin-left: auto; margin-right: auto; }
body.v1 .rating-box p { margin-top: 18px; margin-bottom: 26px; }
body.v1 .rating-box .btn { margin-left: auto; margin-right: auto; }
body.v1 .incubated { display:flex; align-items:center; justify-content:center; flex-direction:column; gap: 8px; margin-top: 26px; text-align:center; font-size: 13px; }
body.v1 .icreate-wordmark { text-decoration: none; color:#208947; font-size: 29px; font-weight: 850; letter-spacing: -.07em; line-height:1.2; }
body.v1 .icreate-wordmark span { color: #354b3e; }
@media(max-width:1000px) { body.v1 .activities { grid-template-columns: repeat(2,minmax(0,1fr)); } body.v1 .activity { min-height: 215px; } }
@media(max-width:650px) { body.v1 .wrap { width:calc(100% - 36px); } body.v1 .section { padding-top: 42px; padding-bottom: 42px; } body.v1 .hero-introduction {padding: 28px 0 18px;} body.v1 .split.intro-card { gap: 14px; } body.v1 .activities { grid-template-columns: 1fr; gap: 12px; } body.v1 .activity { min-height: 0; padding: 22px; } body.v1 .activity .icon { margin-bottom: 15px; } body.v1 .rating-box { padding: 34px 20px; } }


div:has(> a > img[alt="iCreate Logo"]) {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

img[alt="iCreate Logo"] {
    display: block;
    width: 160px;
    height: auto;
    margin: 0 auto;
}

/* Hostinger deployment stability fixes — no changes to hero artwork */
html { overflow-x: clip; }
body { overflow-x: clip; }
header .nav .brand, footer .brand {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 158px;
  height: 52px;
  background: transparent;
  overflow: visible;
}
header .nav .brand img, footer .brand img {
  position: static;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  margin-top: -8px;
}
body.v1 .incubated > div { width:100%; display:flex; align-items:center; justify-content:center; }
body.v1 .incubated a { display:inline-flex; justify-content:center; align-items:center; }
body.v1 .incubated img { width:160px; max-width:100%; height:auto; display:block; }
@media (max-width:650px) { header .nav .brand, footer .brand {width:136px;height:46px;} }

/* Sirāt platform video — centered, desktop and mobile */
body.v1 #platform-video {
    padding: 56px 0 64px;
    text-align: center;
}
body.v1 #platform-video .platform-video-wrap {
    width: min(1100px, calc(100% - 36px));
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
body.v1 #platform-video .platform-video-title {
    width: 100%;
    text-align: center;
    font-size: clamp(28px, 3.7vw, 48px);
    line-height: 1.15;
    margin: 0 0 32px;
    color: var(--ink);
}
body.v1 #platform-video .platform-video-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    border-radius: 14px;
    overflow: hidden;
    background: #0b221a;
    box-shadow: 0 15px 38px rgba(12, 47, 30, 0.15);
}
body.v1 #platform-video video.platform-video-player {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-width: none;
    min-width: 0;
    object-fit: contain;
    margin: 0;
    background: #0b221a;
}
@media (max-width: 650px) {
    body.v1 #platform-video { padding: 42px 0 48px; }
    body.v1 #platform-video .platform-video-title { margin-bottom: 22px; }
    body.v1 #platform-video .platform-video-container { border-radius: 10px; }
}


/* Same font size and color as Sirat introduction */

body.v1 .split.intro-card p {
    color: #14372a !important;
    font-size: clamp(16px, 1.45vw, 19px);
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 400;
    line-height: 1.65 !important;
    letter-spacing: normal;
}

/* Bold text */
body.v1 .split.intro-card p strong {
    color: #14372a !important;
    /*font-weight: 800 !important;*/
}

/* Space between paragraphs */
body.v1 .split.intro-card p + p {
    margin-top: 18px !important;
}

/* Mobile responsive */
@media (max-width: 650px) {
    body.v1 .split.intro-card p {
        font-size: 16px !important;
        line-height: 1.65 !important;
    }
}

/* === Sirāt header: single authoritative desktop/mobile layout === */
body.v1 header { background: #fff; position: fixed; width: 100%; z-index: 88; }
body.v1 header .nav {
    width: calc(100% - 64px) !important;
    max-width: 1600px !important;
    height: 92px !important;
    margin-inline: auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
}
body.v1 header .nav > .navlinks {
    margin-left: auto !important;
}
@media (max-width: 900px) {
    body.v1 header .nav { width: calc(100% - 36px) !important; }
}
@media (max-width: 650px) {
    body.v1 header .nav { width: calc(100% - 0px) !important; height: 76px !important;  position: fixed;
        background: #fff;
        padding: 21px !important;
        z-index: 99; }
    body.v1 header .nav > .menu { margin-left: auto !important; }
}
h2.beyond-title {
    display: block;
    font-size: 52px;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -2px;
    color: #00452F;
    text-transform: none;
    font-family: inherit;
    margin: 0 0 30px 0;
}

@media (max-width: 768px) {
    h2.beyond-title {
        font-size: 34px;
        letter-spacing: -1px;
    }
}

/* ===== Sirat: focused typography and incubator alignment fix =====
   No earlier CSS rules or HTML content removed. */
body.v1 #advisory .eyebrow,
body.v1 #advisory h2,
body.v1 #advisory p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 1.6;
    letter-spacing: normal;
    color: #00452F;
}
body.v1 #advisory .eyebrow {
    font-weight: 400;
    text-transform: none;
    margin-bottom: 10px;
}
body.v1 #advisory h2 {
    font-weight: 500;
    margin-bottom: 14px;
}
body.v1 #advisory p {
    font-weight: 400;
}
/* Slightly larger small label; keep the rating heading unchanged. */
body.v1 .rating-box > .eyebrow {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: #00452F;
}
/* Right-aligned compact incubator image; overrules inline centered div. */
body.v1 .rating-section .incubated {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    text-align: right;
    gap: 5px;
}
body.v1 .rating-section .incubated > div {
    width: auto;
    margin: 0 0 0 auto;
    display: flex;
    justify-content: flex-end;
    text-align: right !important;
}
body.v1 .rating-section .incubated > div > a {
    display: inline-flex;
    justify-content: flex-end;
}
body.v1 .rating-section .incubated img[alt="iCreate Logo"] {
    width: 90px !important;
    height: auto !important;
    max-width: 100%;
    margin: 0;
}
@media (max-width: 650px) {
    body.v1 #advisory .eyebrow,
    body.v1 #advisory h2,
    body.v1 #advisory p { font-size: 16px; }
    body.v1 .rating-box > .eyebrow { font-size: 15px; }
    body.v1 .rating-section .incubated img[alt="iCreate Logo"] { width: 75px !important; }
}
/* First Beyond Platform - Small Subtitle */
body.v1 #advisory .eyebrow {
    font-size: 16px;
    font-weight: 500;
    color: #00452F;
    letter-spacing: normal;
    text-transform: none;
    margin-bottom: 14px;
}

/* Second Beyond Platform - Main Heading */
body.v1 #advisory h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(30px, 3.7vw, 52px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.045em;
    color: #00452F;
    margin-bottom: 20px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    body.v1 #advisory h2 {
        font-size: 34px;
    }
}


/* ========================================================
   FINAL TARGETED FIX 2026-10-24
   Keep all preceding website styling and content intact.
   ======================================================== */
/* Rating small label: natural sentence case, no spaced capitals. */
body.v1 .rating-section .rating-box > .eyebrow {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.4;
    color: #00452F;
}
/* Main rating heading: natural case; avoid forced letter spacing. */
body.v1 .rating-section .rating-box > h2 {
    text-transform: none;
    letter-spacing: -0.035em;
}
/* Place incubator label immediately beside logo, together at right. */
body.v1 .rating-section .wrap > .incubated {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
    gap: 12px !important;
    text-align: right;
}
body.v1 .rating-section .incubated > span {
    flex: 0 0 auto !important;
    display: inline-block;
    white-space: nowrap;
    margin: 0 !important;
    font-size: 13px;
    line-height: 1.4;
    color: #00452F;
}
body.v1 .rating-section .incubated > div {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: max-content !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    text-align: left !important;
}
body.v1 .rating-section .incubated > div > a {
    flex: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start !important;
}
body.v1 .rating-section .incubated img[alt="iCreate Logo"] {
    display: block !important;
    width: 90px !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
}
body.v1 #advisory p strong {font-weight: 700; color: inherit;}
@media (max-width: 650px) {
    body.v1 .rating-section .wrap > .incubated { gap: 8px !important; }
    body.v1 .rating-section .incubated img[alt="iCreate Logo"] { width: 70px !important; }
}
/* The Sirāt Rating - Font Size Increase */

/* The Sirāt Rating - Final Font Fix */

body.v1 .rating-section .rating-box > span.eyebrow {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 32px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #00452F !important;
    display: block !important;
    margin-bottom: 22px !important;
}

/* Mobile */
@media (max-width: 768px) {
    body.v1 .rating-section .rating-box > span.eyebrow {
        font-size: 26px !important;
    }
}

/* Homepage: introductory copy in a single vertical column, no split/card. */
body.v1 .hero-introduction {
    padding-bottom: 12px;
}
body.v1 .carbon-copy-section.section {
    padding-top: 10px;
    padding-bottom: 54px;
}
body.v1 .carbon-copy-section .carbon-copy-content {
    width: min(100%, 1060px);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
}
body.v1 .carbon-copy-section .carbon-copy-content p {
    width: 100%;
    margin: 0;
    font-size: clamp(16px, 1.35vw, 18px);
    line-height: 1.7;
    letter-spacing: normal;
    color: var(--muted);
}
body.v1 .carbon-copy-section .carbon-copy-content .intro-emphasis {
    font-size: clamp(17px, 1.5vw, 20px) !important;
    line-height: 1.55;
    color: var(--ink);
    font-weight: 700;
}
body.v1 .carbon-copy-section .carbon-copy-content strong {
    font-weight: 700;
}
@media (max-width: 650px) {
    body.v1 .hero-introduction { padding-bottom: 12px; }
    body.v1 .carbon-copy-section.section { padding-top: 8px; padding-bottom: 38px; }
    body.v1 .carbon-copy-section .carbon-copy-content { gap: 14px; }
    body.v1 .carbon-copy-section .carbon-copy-content p { font-size: 16px; line-height: 1.7; }
}


/* FINAL HOMEPAGE COPY FIX: same typography as Sirāt introduction */
body.v1 .carbon-copy-section .carbon-copy-content {
    max-width: 1060px;
    margin-inline: auto;
    text-align: center;
    gap: 12px;
}
body.v1 .carbon-copy-section .carbon-copy-content > p,
body.v1 .carbon-copy-section .carbon-copy-content > p.intro-emphasis {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: clamp(16px, 1.45vw, 19px) !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    letter-spacing: normal !important;
    color: var(--ink) !important;
    margin: 0 !important;
    text-align: center !important;
}
body.v1 .carbon-copy-section .carbon-copy-content > p.intro-emphasis strong {
    font-weight: 700 !important;
    color: var(--ink) !important;
}
body.v1 .carbon-copy-section .carbon-copy-content > p strong {
    color: var(--ink) !important;
    font-weight: 700 !important;
}
@media (max-width: 650px) {
    body.v1 .carbon-copy-section .carbon-copy-content > p,
    body.v1 .carbon-copy-section .carbon-copy-content > p.intro-emphasis {
        font-size: 16px !important;
        line-height: 1.75 !important;
    }
}


/* Client-requested homepage video frame: confined and responsive */
body.v1 #platform-video .platform-video-container {
    width: min(100%, 900px);
    aspect-ratio: 16 / 9;
    height: auto;
    max-width: 100%;
    margin-inline: auto;
    overflow: hidden;
    border-radius: 14px;
    position: relative;
}
body.v1 #platform-video .platform-video-container .platform-video-player {
    display: block;
    position: static;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    background: #fff;
    border: 0;
    border-radius: inherit;
}

/* Requested homepage-only refinements */
body.v1 .rating-section .incubated img[alt="iCreate Logo"] { width: 70px !important; height: auto !important; }
@media (max-width: 650px) { body.v1 .rating-section .incubated img[alt="iCreate Logo"] { width: 60px !important; } }
body.v1 .sirat-customers-logos .sirat-customer-logo { width: 100px; height: 70px; display: flex; align-items: center; justify-content: center; }
body.v1 .sirat-customers-logos .sirat-customer-logo img { width: 60%; height: 60%; max-width: 60%; max-height: 60%; object-fit: contain; }
body.v1 .rating-box .sirat-rating-favicon { display: block; width: 90px; height: 90px; object-fit: contain; margin: 0 auto 14px; }
@media (max-width: 650px) { body.v1 .sirat-customers-logos .sirat-customer-logo { width: 110px; height: 80px; } }


/* TÜV SÜD Blue Color */
.carbon-copy-content a,
.carbon-copy-content a strong {
    color: #003BFF !important;
    -webkit-text-fill-color: #003BFF !important;
}


/* Sirat Rating - Reduce Spacing */
body.v1 .rating-section {
    padding-top: 25px !important;
    padding-bottom: 30px !important;
}

body.v1 .rating-box {
    padding: 30px 25px !important;
    text-align: center;
}

/* Rating Title */
body.v1 .rating-box .eyebrow {
    margin-bottom: 12px !important;
}

/* Sirat Logo */
body.v1 .sirat-rating-favicon {
    display: block;
    width: 125px !important;
    height: auto !important;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto 18px !important;
}

/* Main Heading */
body.v1 .rating-box h2 {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
}

/* Description */
body.v1 .rating-box p {
    margin-bottom: 20px !important;
}

/* Mobile View */
@media (max-width: 650px) {
    body.v1 .rating-box {
        padding: 25px 18px !important;
    }

    body.v1 .sirat-rating-favicon {
        width: 105px !important;
        margin-bottom: 15px !important;
    }
}
.sirat-header-brand {
    position: relative;
    overflow: hidden;
}

.sirat-header-brand .header-logo-fallback {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    object-fit: contain;
    z-index: 1;
}

.sirat-header-brand .header-logo-video {
    z-index: 2;
}

/*sirat ai*/

.sirat-marketing-cta {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  text-align: center;
  margin: 18px auto 0;
  padding: 0 20px 14px;
  color: #ffffff;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.5;
}

.sirat-marketing-cta span {
  display: inline;
}

.sirat-marketing-cta a {
  display: inline;
  color: #ffffff;
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.sirat-marketing-cta a:hover {
  opacity: 0.8;
}

@media (max-width: 768px) {
  .sirat-marketing-cta {
    font-size: 16px;
    gap: 4px;
  }
}

/* Sirat - centered footer line beneath all four activities */
body.v1 #activities .sirat-marketing-cta {
  display: flex;
  width: 100%;
  max-width: none;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 6px;
  row-gap: 2px;
  margin: 20px auto 0;
  padding: 0 10px;
  text-align: center;
  color: #fff;
  font-size: clamp(16px, 1.75vw, 22px);
  font-weight: 600;
  line-height: 1.45;
}
body.v1 #activities .sirat-marketing-cta a {
  display: inline;
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  white-space: nowrap;
}
@media (max-width: 650px) {
  body.v1 #activities .sirat-marketing-cta { font-size: 16px; }
}