/*
 * COID regional landing pages — isolated responsive layer.
 * Loaded only on regional pages and after site.css.
 */

html,
body.coid-premium-page,
body.coid-regional-template {
    max-width: 100%;
    overflow-x: clip !important;
}

.coid-region-page {
    width: 100%;
    min-width: 0;
    overflow: clip;
}

.coid-region-page *,
.coid-region-page *::before,
.coid-region-page *::after {
    min-width: 0;
}

.coid-region-page .coid-container {
    width: min(1280px, calc(100% - 64px));
    max-width: 100%;
}

.coid-region-page .coid-header__inner,
.coid-region-page .coid-hero__inner,
.coid-region-page .coid-section-head,
.coid-region-page .coid-services-grid,
.coid-region-page .coid-process-grid,
.coid-region-page .coid-pricing-grid,
.coid-region-page .coid-faq__grid,
.coid-region-page .coid-contact__inner,
.coid-region-page .coid-footer__grid {
    min-width: 0;
}

.coid-region-page .coid-hero {
    min-height: auto;
    padding: 142px 0 96px;
}

.coid-region-page .coid-breadcrumbs {
    max-width: 100%;
    flex-wrap: wrap;
    line-height: 1.5;
}

.coid-region-page .coid-hero__inner {
    grid-template-columns: minmax(0, 1.06fr) minmax(340px, .76fr);
    gap: clamp(40px, 6vw, 88px);
    padding-top: 34px;
}

.coid-region-page .coid-hero__copy {
    max-width: 760px;
}

.coid-region-page .coid-hero h1 {
    max-width: 760px;
    font-size: clamp(36px, 4vw, 58px);
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.coid-region-page .coid-hero__lead {
    max-width: 700px;
    margin-top: 40px;
}

.coid-region-page .coid-hero__visual {
    width: 100%;
    min-height: 470px;
}

.coid-region-page .coid-hero-device {
    width: min(100%, 590px);
}

.coid-region-page .coid-section {
    padding: clamp(82px, 9vw, 124px) 0;
}

.coid-region-page .coid-section-head {
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .62fr);
    gap: clamp(32px, 6vw, 76px);
}

.coid-region-page .coid-section-head h2,
.coid-region-page .coid-region-story__aside h2,
.coid-region-page .coid-region-seo-copy__header h2,
.coid-region-page .coid-faq h2,
.coid-region-page .coid-contact h2 {
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.coid-region-page .coid-services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.coid-region-page .coid-service-card {
    min-height: 440px;
    height: auto;
}

.coid-region-page .coid-process-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.coid-region-page .coid-process-step {
    min-height: 300px;
}

.coid-region-page .coid-pricing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.coid-region-page .coid-price-card {
    min-width: 0;
    height: 100%;
}

.coid-region-page .coid-faq__grid {
    grid-template-columns: minmax(280px, .68fr) minmax(0, 1.32fr);
    gap: clamp(42px, 7vw, 90px);
}

.coid-region-page .coid-contact__inner {
    grid-template-columns: minmax(0, 1fr) minmax(380px, .78fr);
    gap: clamp(42px, 7vw, 90px);
}

.coid-region-page .coid-form,
.coid-region-page input,
.coid-region-page textarea,
.coid-region-page button {
    max-width: 100%;
}

/* Dedicated SEO copy */
.coid-region-seo-copy {
    border-top: 1px solid rgba(128, 153, 216, .12);
    border-bottom: 1px solid rgba(128, 153, 216, .12);
    background:
        radial-gradient(circle at 15% 18%, rgba(64, 102, 235, .14), transparent 31%),
        radial-gradient(circle at 90% 70%, rgba(128, 75, 236, .11), transparent 28%),
        linear-gradient(180deg, rgba(5, 9, 19, .5), rgba(9, 14, 29, .88), rgba(5, 8, 17, .52));
}

.coid-region-seo-copy__header {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, .55fr);
    gap: clamp(30px, 6vw, 82px);
    align-items: end;
    margin-bottom: clamp(42px, 6vw, 72px);
}

.coid-region-seo-copy__header .coid-kicker {
    grid-column: 1 / -1;
}

.coid-region-seo-copy__header h2 {
    font-size: clamp(36px, 4.2vw, 60px);
    line-height: 1.07;
    letter-spacing: -.043em;
    font-weight: 560;
}

.coid-region-seo-copy__header > p {
    color: var(--coid-muted);
    font-size: 14px;
    line-height: 1.82;
}

.coid-region-seo-copy__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, .62fr);
    gap: clamp(42px, 7vw, 92px);
    align-items: start;
}

.coid-region-seo-copy__body {
    columns: 2;
    column-gap: clamp(30px, 4vw, 58px);
}

.coid-region-seo-copy__body p {
    break-inside: avoid;
    margin: 0 0 24px;
    color: #aab5c9;
    font-size: 14px;
    line-height: 1.9;
}

.coid-region-seo-copy__body p:first-child::first-letter {
    float: left;
    margin: .08em .12em 0 0;
    color: #eaf0ff;
    font-size: 3.6em;
    line-height: .82;
    font-weight: 560;
}

.coid-region-seo-copy__points {
    display: grid;
    border-top: 1px solid var(--coid-line);
}

.coid-region-seo-copy__points article {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 18px;
    padding: 25px 0 28px;
    border-bottom: 1px solid var(--coid-line);
}

.coid-region-seo-copy__points article > span {
    padding-top: 4px;
    color: #6678a5;
    font-size: 10px;
    letter-spacing: .14em;
}

.coid-region-seo-copy__points h3 {
    font-size: 18px;
    line-height: 1.25;
    font-weight: 560;
}

.coid-region-seo-copy__points p {
    margin-top: 9px;
    color: #8f9bb2;
    font-size: 12px;
    line-height: 1.75;
}

/* Directory cards must never overflow. */
.coid-region-page .coid-region-directory__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.coid-region-page .coid-region-directory__group,
.coid-region-page .coid-region-directory__links a {
    min-width: 0;
    overflow: hidden;
}

.coid-region-page .coid-region-directory__links span,
.coid-region-page .coid-region-directory__links small {
    overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
    .coid-region-page .coid-container {
        width: min(1120px, calc(100% - 42px));
    }

    .coid-region-page .coid-hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr);
        gap: 42px;
    }

    .coid-region-page .coid-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .coid-region-page .coid-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .coid-region-page .coid-region-directory__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .coid-region-page .coid-container {
        width: calc(100% - 36px);
    }

    .coid-region-page .coid-hero {
        padding: 126px 0 84px;
    }

    .coid-region-page .coid-hero__inner {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .coid-region-page .coid-hero__copy {
        max-width: 800px;
    }

    .coid-region-page .coid-hero__visual {
        width: min(100%, 760px);
        min-height: 440px;
        margin: 0 auto;
    }

    .coid-region-page .coid-section-head,
    .coid-region-page .coid-region-story__grid,
    .coid-region-page .coid-region-seo-copy__header,
    .coid-region-page .coid-region-seo-copy__layout,
    .coid-region-page .coid-faq__grid,
    .coid-region-page .coid-contact__inner {
        grid-template-columns: 1fr;
    }

    .coid-region-page .coid-region-story__aside,
    .coid-region-page .coid-faq__intro {
        position: static;
    }

    .coid-region-page .coid-region-seo-copy__header .coid-kicker {
        grid-column: auto;
    }

    .coid-region-page .coid-region-seo-copy__header > p {
        max-width: 760px;
    }

    .coid-region-page .coid-region-seo-copy__body {
        columns: 1;
    }

    .coid-region-page .coid-pricing-grid {
        grid-template-columns: 1fr;
    }

    .coid-region-page .coid-price-card {
        min-height: auto;
    }

    .coid-region-page .coid-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .coid-region-page .coid-container {
        width: calc(100% - 28px);
    }

    .coid-region-page .coid-header__inner {
        gap: 12px;
    }

    .coid-region-page .coid-brand__copy small {
        display: none;
    }

    .coid-region-page .coid-hero {
        padding: 106px 0 70px;
    }

    .coid-region-page .coid-breadcrumbs {
        gap: 7px;
        font-size: 8px;
        letter-spacing: .07em;
    }

    .coid-region-page .coid-hero__inner {
        padding-top: 24px;
        gap: 34px;
    }

    .coid-region-page .coid-hero h1 {
        margin-top: 20px;
        font-size: clamp(30px, 9.6vw, 42px);
        line-height: 1.08;
        letter-spacing: -.04em;
    }

    .coid-region-page .coid-hero__lead {
        margin-top: 28px;
        font-size: 14px;
        line-height: 1.72;
    }

    .coid-region-page .coid-hero__buttons {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 27px;
    }

    .coid-region-page .coid-hero__facts {
        grid-template-columns: 1fr;
        gap: 13px;
        margin-top: 32px;
    }

    .coid-region-page .coid-hero__facts > div:last-child {
        grid-column: auto;
    }

    .coid-region-page .coid-hero__visual {
        min-height: 275px;
        margin-top: 0;
    }

    .coid-region-page .coid-hero-device {
        width: 100%;
        border-radius: 20px;
    }

    .coid-region-page .coid-floating-card {
        display: none;
    }

    .coid-region-page .coid-section {
        padding: 74px 0;
    }

    .coid-region-page .coid-section-head {
        gap: 18px;
        margin-bottom: 34px;
    }

    .coid-region-page .coid-section-head h2,
    .coid-region-page .coid-region-story__aside h2,
    .coid-region-page .coid-region-seo-copy__header h2,
    .coid-region-page .coid-faq h2,
    .coid-region-page .coid-contact h2 {
        font-size: clamp(30px, 9.4vw, 42px);
        line-height: 1.09;
    }

    .coid-region-page .coid-services-grid,
    .coid-region-page .coid-process-grid,
    .coid-region-page .coid-region-directory__grid,
    .coid-region-page .coid-footer__grid {
        grid-template-columns: 1fr;
    }

    .coid-region-page .coid-service-card {
        min-height: 0;
        padding: 24px;
    }

    .coid-region-page .coid-service-card h3 {
        margin-top: 62px;
        font-size: 22px;
    }

    .coid-region-page .coid-service-card__price {
        position: static;
        margin-top: 26px;
    }

    .coid-region-page .coid-process-step {
        min-height: 230px;
    }

    .coid-region-page .coid-region-copy {
        padding: 26px 0 30px 38px;
    }

    .coid-region-page .coid-region-copy > span {
        top: 30px;
    }

    .coid-region-seo-copy__header {
        margin-bottom: 34px;
    }

    .coid-region-seo-copy__body p {
        font-size: 13px;
        line-height: 1.84;
    }

    .coid-region-seo-copy__points article {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 10px;
        padding: 21px 0 23px;
    }

    .coid-region-page .coid-price-card {
        padding: 24px 24px 104px;
    }

    .coid-region-page .coid-contact {
        padding: 78px 0;
    }

    .coid-region-page .coid-contact__links {
        margin-top: 30px;
    }

    .coid-region-page .coid-form {
        width: 100%;
        padding: 20px;
    }

    .coid-region-page .coid-form__row {
        grid-template-columns: 1fr;
    }

    .coid-region-page .coid-region-directory__group {
        padding: 20px;
    }

    .coid-region-page .coid-footer__bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }
}

@media (max-width: 420px) {
    .coid-region-page .coid-container {
        width: calc(100% - 22px);
    }

    .coid-region-page .coid-brand__mark {
        width: 42px;
        height: 42px;
    }

    .coid-region-page .coid-brand__copy strong {
        font-size: 14px;
    }

    .coid-region-page .coid-menu-toggle {
        width: 40px;
        height: 40px;
    }

    .coid-region-page .coid-hero h1 {
        font-size: clamp(28px, 9.8vw, 37px);
    }

    .coid-region-page .coid-button {
        min-height: 52px;
        padding-inline: 18px;
    }

    .coid-region-page .coid-price-card,
    .coid-region-page .coid-service-card,
    .coid-region-page .coid-form {
        border-radius: 19px;
    }
}

/* =========================================================
   Regional first screen v1.3.3
   Completely isolated from the homepage .coid-hero system.
   ========================================================= */
.coid-region-intro{
    position:relative;
    isolation:isolate;
    min-height:760px;
    padding:132px 0 88px;
    overflow:hidden;
    background:#03060d;
}
.coid-region-intro::after{
    content:"";
    position:absolute;
    z-index:-1;
    left:0;right:0;bottom:-1px;
    height:150px;
    background:linear-gradient(to bottom,transparent,var(--coid-bg));
    pointer-events:none;
}
.coid-region-intro__backdrop{
    position:absolute;
    z-index:-4;
    inset:0;
    overflow:hidden;
}
.coid-region-intro__backdrop img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transform:scale(1.03);
    filter:saturate(.9) contrast(1.06) brightness(.56);
}
.coid-region-intro__shade{
    position:absolute;
    z-index:-3;
    inset:0;
    background:
        linear-gradient(90deg,rgba(3,6,13,.98) 0%,rgba(3,6,13,.94) 40%,rgba(3,6,13,.62) 66%,rgba(3,6,13,.82) 100%),
        linear-gradient(180deg,rgba(3,6,13,.46),rgba(3,6,13,.1) 42%,rgba(3,6,13,.92));
}
.coid-region-intro__shade::before{
    content:"";
    position:absolute;
    width:620px;height:620px;
    right:5%;top:5%;
    border-radius:50%;
    background:radial-gradient(circle,rgba(79,113,255,.18),transparent 65%);
    filter:blur(14px);
}
.coid-region-intro__container{position:relative;z-index:2}
.coid-region-intro__breadcrumbs{
    margin:0 0 42px;
    max-width:100%;
    flex-wrap:wrap;
}
.coid-region-intro__layout{
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(360px,.82fr);
    gap:clamp(48px,6vw,96px);
    align-items:center;
}
.coid-region-intro__content{min-width:0;max-width:760px}
.coid-region-intro__title{
    max-width:740px;
    margin:28px 0 0;
    color:#f5f7ff;
    font-size:clamp(38px,4vw,58px);
    line-height:1.07;
    letter-spacing:-.048em;
    font-weight:580;
    overflow-wrap:normal;
    word-break:normal;
    text-wrap:balance;
}
.coid-region-intro__lead{
    max-width:680px;
    margin:42px 0 0;
    color:#adb8cd;
    font-size:16px;
    line-height:1.78;
}
.coid-region-intro__actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:13px;
    margin-top:34px;
}
.coid-region-intro__benefits{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0;
    margin-top:48px;
    padding-top:24px;
    border-top:1px solid rgba(132,155,215,.16);
}
.coid-region-intro__benefits article{
    display:grid;
    grid-template-columns:28px minmax(0,1fr);
    gap:10px;
    min-width:0;
    padding-right:18px;
}
.coid-region-intro__benefits strong{
    color:#6277aa;
    font-size:9px;
    line-height:1.55;
    letter-spacing:.12em;
}
.coid-region-intro__benefits span{
    color:#c0c8da;
    font-size:10px;
    line-height:1.55;
}
.coid-region-intro__media{
    position:relative;
    width:100%;
    max-width:590px;
    justify-self:end;
    min-width:0;
    perspective:1400px;
}
.coid-region-intro__motion{
    position:relative;
    width:100%;
    min-width:0;
    padding:28px 0 46px;
    transform-style:preserve-3d;
    will-change:transform;
    animation:coid-region-motion-float 6.4s ease-in-out infinite;
}
.coid-region-intro__image-wrap{
    position:relative;
    width:100%;
    aspect-ratio:1.18;
    overflow:hidden;
    border:1px solid rgba(133,166,255,.28);
    border-radius:30px;
    background:rgba(9,14,28,.72);
    box-shadow:0 40px 100px rgba(0,0,0,.5),0 0 80px rgba(48,92,255,.14),inset 0 1px rgba(255,255,255,.1);
}
.coid-region-intro__image-wrap::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(145deg,rgba(255,255,255,.09),transparent 28%,transparent 70%,rgba(88,102,255,.13));
    pointer-events:none;
}
.coid-region-intro__image-wrap img{
    width:100%;height:100%;
    object-fit:cover;
    border-radius:inherit;
    filter:saturate(1.05) contrast(1.04);
}
.coid-region-intro__region-card{
    position:absolute;
    left:-28px;
    top:0;
    display:flex;
    align-items:center;
    gap:12px;
    max-width:230px;
    padding:14px 17px;
    border:1px solid rgba(137,172,255,.24);
    border-radius:15px;
    background:rgba(8,13,27,.9);
    box-shadow:0 20px 54px rgba(0,0,0,.42);
    backdrop-filter:blur(16px);
}
.coid-region-intro__region-card small{
    display:block;
    color:#7f8ca9;
    font-size:8px;
    text-transform:uppercase;
    letter-spacing:.13em;
}
.coid-region-intro__region-card strong{
    display:block;
    margin-top:4px;
    color:#f2f5ff;
    font-size:12px;
    line-height:1.3;
}
.coid-region-intro__caption{
    position:absolute;
    right:-20px;
    bottom:0;
    width:min(310px,78%);
    padding:18px 20px;
    border:1px solid rgba(133,156,214,.18);
    border-radius:16px;
    background:rgba(6,10,20,.92);
    box-shadow:0 22px 60px rgba(0,0,0,.44);
}
.coid-region-intro__caption span{
    display:block;
    color:#64749a;
    font-size:7px;
    letter-spacing:.15em;
}
.coid-region-intro__caption strong{
    display:block;
    margin-top:9px;
    color:#e6ebf5;
    font-size:12px;
    line-height:1.5;
    font-weight:520;
}

@media (max-width:1100px){
    .coid-region-intro{min-height:auto;padding:124px 0 82px}
    .coid-region-intro__layout{grid-template-columns:minmax(0,1fr) minmax(320px,.72fr);gap:42px}
    .coid-region-intro__title{font-size:clamp(36px,4.5vw,52px)}
    .coid-region-intro__benefits{grid-template-columns:1fr;gap:14px}
    .coid-region-intro__benefits article{padding-right:0}
}

@media (max-width:900px){
    .coid-region-intro{padding:118px 0 76px}
    .coid-region-intro__shade{background:linear-gradient(180deg,rgba(3,6,13,.88),rgba(3,6,13,.78) 48%,rgba(3,6,13,.97))}
    .coid-region-intro__breadcrumbs{margin-bottom:34px}
    .coid-region-intro__layout{grid-template-columns:1fr;gap:48px}
    .coid-region-intro__content{max-width:780px}
    .coid-region-intro__media{justify-self:start;width:min(100%,720px);max-width:none}.coid-region-intro__motion{padding:20px 0 38px}
    .coid-region-intro__image-wrap{aspect-ratio:1.65;border-radius:25px}
    .coid-region-intro__region-card{left:18px;top:0}
    .coid-region-intro__caption{right:18px}
}

@media (max-width:680px){
    .coid-region-intro{padding:101px 0 62px}
    .coid-region-intro__backdrop img{object-position:62% center;filter:saturate(.8) contrast(1.04) brightness(.4)}
    .coid-region-intro__breadcrumbs{margin-bottom:26px;font-size:8px;line-height:1.45;letter-spacing:.07em}
    .coid-region-intro__layout{gap:34px}
    .coid-region-intro__title{margin-top:20px;font-size:clamp(30px,9.4vw,40px);line-height:1.08;letter-spacing:-.042em;text-wrap:pretty}
    .coid-region-intro__lead{margin-top:29px;font-size:14px;line-height:1.72}
    .coid-region-intro__actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:27px}
    .coid-region-intro__actions .coid-button{width:100%;min-height:54px}
    .coid-region-intro__benefits{gap:12px;margin-top:31px;padding-top:20px}
    .coid-region-intro__benefits article{grid-template-columns:26px minmax(0,1fr)}
    .coid-region-intro__benefits span{font-size:10px}
    .coid-region-intro__media{padding:0}
    .coid-region-intro__image-wrap{aspect-ratio:1.35;border-radius:20px}
    .coid-region-intro__region-card{position:static;max-width:none;margin-top:12px;border-radius:13px}
    .coid-region-intro__caption{position:static;width:100%;margin-top:10px;border-radius:13px}
}

@media (max-width:420px){
    .coid-region-intro{padding-top:94px}
    .coid-region-intro__title{font-size:clamp(28px,9.8vw,36px)}
    .coid-region-intro__lead{font-size:13px}
    .coid-region-intro__image-wrap{aspect-ratio:1.22}
}


/*
 * Regional hero uses the exact animation system of the homepage:
 * .coid-hero__backdrop, .coid-hero__grid, .coid-hero__effects,
 * .coid-orb, .coid-hero-device, .coid-tilt, .coid-floating-card,
 * data-coid-parallax and the shared site.js.
 *
 * The rules below only constrain layout so animated elements cannot cover the text column.
 */
.coid-region-intro {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: 150px 0 90px;
    isolation: isolate;
    overflow: hidden;
}

.coid-region-intro::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0;
    height: 190px;
    background: linear-gradient(to bottom, transparent, var(--coid-bg));
}

.coid-region-intro .coid-hero__backdrop,
.coid-region-intro .coid-hero__grid,
.coid-region-intro .coid-hero__effects,
.coid-region-intro .coid-orb {
    pointer-events: none;
}

.coid-region-intro__container {
    position: relative;
    z-index: 3;
}

.coid-region-intro__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, .82fr);
    gap: clamp(64px, 7vw, 112px);
    align-items: center;
}

.coid-region-intro__content {
    position: relative;
    z-index: 5;
    min-width: 0;
    max-width: 760px;
}

.coid-region-intro__media.coid-hero__visual {
    z-index: 2;
    width: 100%;
    max-width: 650px;
    min-height: 540px;
    justify-self: end;
    overflow: visible;
}

.coid-region-intro__media .coid-hero-device {
    width: min(620px, 100%);
    max-width: 100%;
}

.coid-region-intro__media .coid-floating-card--top {
    left: 18px;
    top: 10%;
}

.coid-region-intro__media .coid-floating-card--bottom {
    right: 18px;
    bottom: 10%;
}

.coid-region-intro .coid-scroll-hint {
    z-index: 4;
}

@media (max-width: 1180px) {
    .coid-region-intro__layout {
        grid-template-columns: minmax(0, 1fr) minmax(380px, .78fr);
        gap: 52px;
    }

    .coid-region-intro__media.coid-hero__visual {
        min-height: 500px;
    }
}

@media (max-width: 960px) {
    .coid-region-intro {
        min-height: auto;
        padding: 145px 0 100px;
    }

    .coid-region-intro__layout {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .coid-region-intro__content {
        max-width: 780px;
    }

    .coid-region-intro__media.coid-hero__visual {
        width: min(100%, 760px);
        max-width: 760px;
        min-height: 500px;
        justify-self: center;
        margin-top: 16px;
    }

    .coid-region-intro__media .coid-hero-device {
        width: min(720px, 86vw);
    }

    .coid-region-intro__media .coid-floating-card--top {
        left: 5%;
    }

    .coid-region-intro__media .coid-floating-card--bottom {
        right: 5%;
    }

    .coid-region-intro .coid-scroll-hint {
        display: none;
    }
}

@media (max-width: 680px) {
    .coid-region-intro {
        padding: 116px 0 72px;
    }

    .coid-region-intro__layout {
        gap: 28px;
    }

    .coid-region-intro__media.coid-hero__visual {
        min-height: 330px;
        margin-top: 28px;
        overflow: hidden;
        border-radius: 22px;
    }

    .coid-region-intro__media .coid-hero-device {
        width: 100%;
        transform: none !important;
        border-radius: 22px;
    }

    .coid-region-intro__media .coid-hero-device img {
        border-radius: 16px;
    }

    .coid-region-intro__media .coid-floating-card {
        padding: 10px 12px;
        border-radius: 12px;
        max-width: calc(100% - 24px);
    }

    .coid-region-intro__media .coid-floating-card--top {
        left: 12px;
        top: 12px;
    }

    .coid-region-intro__media .coid-floating-card--bottom {
        right: 12px;
        bottom: 12px;
        min-width: 150px;
    }
}

@media (max-width: 420px) {
    .coid-region-intro__media.coid-hero__visual {
        min-height: 280px;
    }

    .coid-region-intro__media .coid-floating-card--bottom {
        display: none;
    }

    .coid-region-intro__media .coid-floating-card--top {
        max-width: 190px;
    }
}