/* ==========================================================
   HERITAGE COLLECTION™
   GLOBAL ECOSYSTEM MODULE
   Scoped to .ecosystem — no global selectors.
========================================================== */

.ecosystem{
    position:relative;
    padding:clamp(110px,12vw,170px) 0;
    overflow:hidden;
    isolation:isolate;
    background:
        radial-gradient(
            ellipse 60% 50% at 50% 48%,
            rgba(212,175,55,.085),
            transparent 70%
        ),
        radial-gradient(
            ellipse at 8% 10%,
            rgba(255,255,255,.022),
            transparent 45%
        ),
        linear-gradient(
            180deg,
            #0b1628 0%,
            #07111d 100%
        );
}

/* ----------------------------------------------------------
   DEPTH — masked grid
---------------------------------------------------------- */

.ecosystem::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    opacity:.5;
    pointer-events:none;
    background-image:
        linear-gradient(
            rgba(255,255,255,.02) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.02) 1px,
            transparent 1px
        );
    background-size:76px 76px;
    mask-image:
        radial-gradient(
            ellipse at 50% 50%,
            #000 30%,
            transparent 82%
        );
    -webkit-mask-image:
        radial-gradient(
            ellipse at 50% 50%,
            #000 30%,
            transparent 82%
        );
}

/* ----------------------------------------------------------
   DEPTH — edge vignette
---------------------------------------------------------- */

.ecosystem::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
        linear-gradient(
            180deg,
            rgba(7,17,29,.85) 0%,
            transparent 22%,
            transparent 78%,
            rgba(7,17,29,.85) 100%
        );
}

/* ==========================================================
   HEADER
========================================================== */

.ecosystem-header{
    position:relative;
    z-index:4;
    width:min(820px,100%);
    margin:0 auto clamp(64px,8vw,110px);
    text-align:center;
}

.ecosystem-header .eyebrow{
    margin-bottom:26px;
}

.ecosystem-header h2{
    margin:0 auto 26px;
    font-size:clamp(40px,4.4vw,68px);
    font-weight:800;
    line-height:1.12;
    letter-spacing:-.025em;
    text-wrap:balance;
}

.ecosystem-header h2 span{
    display:block;
}

.ecosystem-header p{
    max-width:640px;
    margin:0 auto;
    color:var(--color-text);
    font-size:clamp(16px,1.15vw,19px);
    line-height:1.8;
}

/* ==========================================================
   NETWORK STAGE
========================================================== */

.ecosystem-network{
    position:relative;
    z-index:4;
    width:min(1040px,100%);
    aspect-ratio:1000 / 780;
    margin:0 auto;
}

/* ----------------------------------------------------------
   AMBIENT RING + CORE LIGHT
---------------------------------------------------------- */

.ecosystem-network::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    z-index:1;
    width:60%;
    aspect-ratio:1;
    transform:translate(-50%,-50%);
    border-radius:50%;
    border:1px solid rgba(255,255,255,.035);
    pointer-events:none;
}

.ecosystem-network::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    z-index:0;
    width:52%;
    aspect-ratio:1;
    transform:translate(-50%,-50%);
    border-radius:50%;
    pointer-events:none;
    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.13),
            rgba(212,175,55,.045) 42%,
            transparent 70%
        );
    animation:ecosystemAura 12s ease-in-out infinite;
}

/* ==========================================================
   CENTER — GLOBAL PLATFORM CORE
========================================================== */

.ecosystem-center{
    position:absolute;
    left:50%;
    top:50%;
    z-index:8;
    transform:translate(-50%,-50%);
}

.center-circle{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:clamp(200px,20vw,252px);
    aspect-ratio:1;
    padding:0 26px;
    border-radius:50%;
    text-align:center;
    background:
        radial-gradient(
            circle at 34% 22%,
            rgba(243,220,130,.16),
            transparent 46%
        ),
        linear-gradient(
            152deg,
            rgba(33,45,66,.98),
            rgba(11,21,37,.99)
        );
    border:1px solid rgba(212,175,55,.34);
    box-shadow:
        0 40px 90px rgba(0,0,0,.5),
        0 0 0 12px rgba(212,175,55,.028),
        0 0 0 26px rgba(212,175,55,.016),
        0 0 70px rgba(212,175,55,.12);
}

.center-circle::before,
.center-circle::after{
    content:"";
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}

.center-circle::before{
    inset:-20px;
    border:1px solid rgba(212,175,55,.14);
    animation:ecosystemOrbit 34s linear infinite;
}

.center-circle::after{
    inset:-40px;
    border:1px dashed rgba(212,175,55,.09);
    animation:ecosystemOrbitReverse 52s linear infinite;
}

.center-mark{
    display:flex;
    align-items:center;
    justify-content:center;
    width:52px;
    height:52px;
    margin-bottom:15px;
    border-radius:50%;
    color:#0b1628;
    background:
        linear-gradient(
            180deg,
            var(--color-primary-light),
            var(--color-primary)
        );
    box-shadow:0 12px 26px rgba(212,175,55,.22);
    font-size:16px;
    font-weight:800;
    letter-spacing:.02em;
}

.center-title{
    color:var(--color-white);
    font-size:clamp(15px,1.35vw,18px);
    font-weight:700;
    line-height:1.35;
    letter-spacing:.01em;
}

.center-caption{
    margin-top:10px;
    color:var(--color-primary);
    font-size:10px;
    font-weight:700;
    line-height:1.4;
    letter-spacing:.2em;
    text-transform:uppercase;
}

/* ==========================================================
   CONNECTIONS
========================================================== */

.ecosystem-lines{
    position:absolute;
    inset:0;
    z-index:3;
    width:100%;
    height:100%;
    overflow:visible;
    pointer-events:none;
}

.ecosystem-lines use{
    fill:none;
    stroke-linecap:round;
    vector-effect:non-scaling-stroke;
}

.ecosystem-lines-base use{
    stroke:rgba(212,175,55,.15);
    stroke-width:1;
}

.ecosystem-lines-flow use{
    stroke:rgba(212,175,55,.48);    stroke-width:1.5;
    stroke-dasharray:2 34;
    animation:ecosystemLineFlow 14s linear infinite;
}

.ecosystem-lines-flow use:nth-child(2){ animation-delay:-1.7s; }
.ecosystem-lines-flow use:nth-child(3){ animation-delay:-3.4s; }
.ecosystem-lines-flow use:nth-child(4){ animation-delay:-5.1s; }
.ecosystem-lines-flow use:nth-child(5){ animation-delay:-6.8s; }
.ecosystem-lines-flow use:nth-child(6){ animation-delay:-8.5s; }
.ecosystem-lines-flow use:nth-child(7){ animation-delay:-10.2s; }
.ecosystem-lines-flow use:nth-child(8){ animation-delay:-11.9s; }

.ecosystem-points circle{
    fill:var(--color-primary);
    animation:ecosystemPointPulse 4.5s ease-in-out infinite;
}

.ecosystem-points circle:nth-child(2){ animation-delay:-.55s; }
.ecosystem-points circle:nth-child(3){ animation-delay:-1.1s; }
.ecosystem-points circle:nth-child(4){ animation-delay:-1.65s; }
.ecosystem-points circle:nth-child(5){ animation-delay:-2.2s; }
.ecosystem-points circle:nth-child(6){ animation-delay:-2.75s; }
.ecosystem-points circle:nth-child(7){ animation-delay:-3.3s; }
.ecosystem-points circle:nth-child(8){ animation-delay:-3.85s; }

/* ==========================================================
   NODES
========================================================== */

.ecosystem-nodes{
    position:absolute;
    inset:0;
    z-index:7;
    margin:0;
    padding:0;
    list-style:none;
}

.ecosystem .node{
    position:absolute;
    left:var(--x);
    top:var(--y);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    width:clamp(132px,13vw,156px);
    min-height:130px;
    padding:20px 14px;
    border-radius:20px;
    text-align:center;
    transform:translate(-50%,-50%);
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.022)
        );
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 20px 46px rgba(0,0,0,.3);
    transition:
        transform var(--transition),
        border-color var(--transition),
        background-color var(--transition),
        box-shadow var(--transition);
}

.ecosystem .node::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    opacity:0;
    pointer-events:none;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(212,175,55,.14),
            transparent 62%
        );
    transition:opacity var(--transition);
}

.node-icon{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    border-radius:50%;
    color:var(--color-primary);
    background:rgba(212,175,55,.07);
    border:1px solid rgba(212,175,55,.2);
    transition:
        color var(--transition),
        background-color var(--transition),
        border-color var(--transition);
}

.node-icon svg{
    width:23px;
    height:23px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.4;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.node-label{
    position:relative;
    z-index:2;
    color:var(--color-text);
    font-size:12px;
    font-weight:700;
    line-height:1.35;
    letter-spacing:.11em;
    text-transform:uppercase;
    transition:color var(--transition);
}

.ecosystem .node:hover,
.ecosystem .node:focus-within{
    z-index:10;
    transform:translate(-50%,-50%) translateY(-4px);
    border-color:rgba(212,175,55,.3);
    background-color:rgba(255,255,255,.02);
    box-shadow:
        0 28px 60px rgba(0,0,0,.36),
        0 0 34px rgba(212,175,55,.07);
}

.ecosystem .node:hover::before,
.ecosystem .node:focus-within::before{
    opacity:1;
}

.ecosystem .node:hover .node-icon,
.ecosystem .node:focus-within .node-icon{
    background:rgba(212,175,55,.13);
    border-color:rgba(212,175,55,.36);
}

.ecosystem .node:hover .node-label,
.ecosystem .node:focus-within .node-label{
    color:var(--color-white);
}

/* ----------------------------------------------------------
   NODE POSITIONS — mapped to the 1000 x 780 connector space
---------------------------------------------------------- */

.ecosystem .airlines{ --x:50%;    --y:8.46%;  }
.ecosystem .airports{ --x:82.6%;  --y:19.49%; }
.ecosystem .museums { --x:92%;    --y:50%;    }
.ecosystem .unesco  { --x:82.6%;  --y:80.51%; }
.ecosystem .cruise  { --x:50%;    --y:91.54%; }
.ecosystem .railway { --x:17.4%;  --y:80.51%; }
.ecosystem .hotels  { --x:8%;     --y:50%;    }
.ecosystem .tourism { --x:17.4%;  --y:19.49%; }

/* ==========================================================
   ANIMATIONS
========================================================== */

@keyframes ecosystemOrbit{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
}

@keyframes ecosystemOrbitReverse{
    from{ transform:rotate(360deg); }
    to{ transform:rotate(0deg); }
}

@keyframes ecosystemLineFlow{
    from{ stroke-dashoffset:0; }
    to{ stroke-dashoffset:-504; }
}

@keyframes ecosystemPointPulse{
    0%,100%{ opacity:.35; }
    50%{ opacity:1; }
}

@keyframes ecosystemAura{
    0%,100%{ opacity:.55; }
    50%{ opacity:1; }
}

/* ==========================================================
   RESPONSIVE — LAPTOP
========================================================== */

@media(max-width:1200px){

    .ecosystem .node{
        min-height:120px;
        padding:18px 12px;
        gap:10px;
    }

    .node-icon{
        width:42px;
        height:42px;
    }

    .node-icon svg{
        width:21px;
        height:21px;
    }

    .node-label{
        font-size:11px;
        letter-spacing:.09em;
    }
}

/* ==========================================================
   RESPONSIVE — TABLET
========================================================== */

@media(max-width:992px){

    .ecosystem-network{
        display:flex;
        flex-direction:column;
        align-items:center;
        width:100%;
        max-width:720px;
        aspect-ratio:auto;
    }

    .ecosystem-lines,
    .ecosystem-network::before,
    .ecosystem-network::after{
        display:none;
    }

    .ecosystem-center{
        position:relative;
        left:auto;
        top:auto;
        margin-bottom:52px;
        transform:none;
    }

    .ecosystem-nodes{
        position:relative;
        inset:auto;
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:16px;
        width:100%;
    }

    .ecosystem .node{
        position:relative;
        left:auto;
        top:auto;
        width:auto;
        min-height:0;
        padding:24px 16px;
        transform:none;
    }

    .ecosystem .node:hover,
    .ecosystem .node:focus-within{
        transform:translateY(-4px);
    }
}

/* ==========================================================
   RESPONSIVE — MOBILE
========================================================== */

@media(max-width:768px){

    .ecosystem-center{
        margin-bottom:44px;
    }

    .ecosystem-nodes{
        gap:12px;
    }

    .ecosystem .node{
        padding:20px 12px;
        gap:10px;
        border-radius:18px;
    }
}

@media(max-width:480px){

    .ecosystem-header .eyebrow{
        margin-bottom:20px;
    }

    .ecosystem-center{
        margin-bottom:38px;
    }

    .center-caption{
        letter-spacing:.16em;
    }

    .ecosystem .node{
        padding:18px 10px;
    }

    .node-icon{
        width:38px;
        height:38px;
    }

    .node-icon svg{
        width:19px;
        height:19px;
    }

    .node-label{
        font-size:10px;
        letter-spacing:.07em;
    }
}

/* ==========================================================
   REDUCED MOTION
========================================================== */

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

    .center-circle::before,
    .center-circle::after,
    .ecosystem-lines-flow use,
    .ecosystem-points circle,
    .ecosystem-network::after{
        animation:none;
    }

    .ecosystem-lines-flow use{
        stroke-dasharray:2 12;
        stroke:rgba(212,175,55,.4);
    }

    .ecosystem-points circle{
        opacity:.8;
    }

    .ecosystem .node,
    .node-icon,
    .node-label,
    .ecosystem .node::before{
        transition-duration:.01ms;
    }

    .ecosystem .node:hover,
    .ecosystem .node:focus-within{
        transform:translate(-50%,-50%);
    }
}

@media(prefers-reduced-motion:reduce) and (max-width:992px){

    .ecosystem .node:hover,
    .ecosystem .node:focus-within{
        transform:none;
    }
}
/* ==========================================================
   SUMMARY
========================================================== */

.ecosystem-summary{

    display:grid;

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

    gap:28px;

    margin-top:110px;

}

.summary-card{

    position:relative;

    padding:36px;

    border-radius:24px;

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.02)
        );

    border:1px solid rgba(255,255,255,.08);

    transition:all .35s ease;

}

.summary-card:hover{

    transform:translateY(-8px);

    border-color:rgba(212,175,55,.28);

}

.summary-card__number{

    display:inline-flex;

    margin-bottom:20px;

    color:var(--color-primary);

    font-size:12px;

    font-weight:800;

    letter-spacing:.18em;

}

.summary-card h3{

    margin-bottom:14px;

    color:#fff;

    font-size:26px;

    line-height:1.2;

}

.summary-card p{

    color:var(--color-text);

    line-height:1.8;

}
/* ==========================================================
   PLATFORM
========================================================== */

.ecosystem-platform{

    position:relative;

    margin-top:110px;

}

.platform-line{

    width:100%;

    height:1px;

    margin-bottom:42px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(212,175,55,.45),
            transparent
        );

}

.platform-grid{

    display:grid;

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

    gap:22px;

}

.platform-item{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:110px;

    padding:24px;

    text-align:center;

    border-radius:20px;

    border:1px solid rgba(255,255,255,.08);

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.02)
        );

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.platform-item:hover{

    transform:translateY(-6px);

    border-color:rgba(212,175,55,.30);

    box-shadow:

        0 20px 50px rgba(0,0,0,.28);

}

.platform-item__title{

    color:#ffffff;

    font-size:12px;

    font-weight:700;

    line-height:1.6;

    letter-spacing:.16em;

    text-transform:uppercase;

}
/* ==========================================================
   FOOTER
========================================================== */

.ecosystem-footer{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

    margin-top:120px;

    padding-top:70px;

    border-top:1px solid rgba(255,255,255,.08);

}

.ecosystem-footer__label{

    display:inline-block;

    margin-bottom:18px;

    color:var(--color-primary);

    font-size:11px;

    font-weight:800;

    letter-spacing:.22em;

    text-transform:uppercase;

}

.ecosystem-footer h3{

    color:#ffffff;

    font-size:clamp(34px,3vw,52px);

    line-height:1.1;

    letter-spacing:-.03em;

}

.ecosystem-footer__right p{

    max-width:620px;

    color:var(--color-text);

    font-size:18px;

    line-height:1.9;

}

/* ==========================================================
   RESPONSIVE EXTENSIONS
========================================================== */

@media(max-width:1200px){

    .ecosystem-summary{

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

    }

    .platform-grid{

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

    }

}

@media(max-width:992px){

    .ecosystem-footer{

        grid-template-columns:1fr;

        gap:36px;

        margin-top:90px;

        padding-top:50px;

    }

}

@media(max-width:768px){

    .ecosystem-summary{

        grid-template-columns:1fr;

        gap:18px;

        margin-top:70px;

    }

    .platform-grid{

        grid-template-columns:1fr;

        gap:16px;

    }

    .summary-card{

        padding:28px;

    }

    .platform-item{

        min-height:86px;

        padding:20px;

    }

    .ecosystem-footer h3{

        font-size:34px;

    }

    .ecosystem-footer__right p{

        font-size:16px;

    }

}

/* ==========================================================
   MODULE END
========================================================== */