:root{

/* =========================
MOBILE SCENE CONTROLLERIAI
========================= */
--mob-base-width: 750;
--mob-base-height: 1180;
--mob-section-height: 1180px;

--mob-title-x: 375px;
--mob-title-y: 42px;
--mob-title-size: 28px;

--mob-chip-modules-x: 375px;
--mob-chip-modules-y: 368px;
--mob-chip-features-x: 375px;
--mob-chip-features-y: 680px;
--mob-chip-integrations-x: 375px;
--mob-chip-integrations-y: 970px;

--mob-logo-x: 375px;
--mob-logo-y: 255px;
--mob-logo-size: 178px;

/* mobile žiedai */
--mob-ring1-cx: 375;
--mob-ring1-cy: 400;
--mob-ring1-rx: 250;
--mob-ring1-ry: 250;

--mob-ring2-cx: 375;
--mob-ring2-cy: 540;
--mob-ring2-rx: 400;
--mob-ring2-ry: 400;

--mob-ring3-cx: 375;
--mob-ring3-cy: 630;
--mob-ring3-rx: 500;
--mob-ring3-ry: 500;

/* mobile moduliai */
--mm1-x: 245px; --mm1-y: 355px;
--mm2-x: 505px; --mm2-y: 355px;
--mm3-x: 245px; --mm3-y: 495px;
--mm4-x: 505px; --mm4-y: 495px;
--mm5-x: 375px; --mm5-y: 560px;

/* mobile funkcijos */
--mf1-x: 140px; --mf1-y: 630px;
--mf2-x: 110px; --mf2-y: 720px;
--mf3-x: 240px; --mf3-y: 700px;
--mf4-x: 220px; --mf4-y: 820px;
--mf5-x: 350px; --mf5-y: 780px;
--mf6-x: 610px; --mf6-y: 630px;
--mf7-x: 480px; --mf7-y: 730px;
--mf8-x: 500px; --mf8-y: 830px;
--mf9-x: 380px; --mf9-y: 870px;
--mf10-x: 610px; --mf10-y: 750px;

/* mobile integracijos */
--mc1-x: 250px; --mc1-y: 1000px;
--mc2-x: 300px; --mc2-y: 1070px;
--mc3-x: 180px; --mc3-y: 1030px;
--mc4-x: 450px; --mc4-y: 1070px;
--mc5-x: 550px; --mc5-y: 1030px;
--mc6-x: 490px; --mc6-y: 1000px;

    /* =========================
        PAGRINDINIAI CONTROLLERIAI
        ========================= */

    /* bazinis artboard */
    --eco-base-width: 1496;
    --eco-base-height: 760;

    /* matomas sekcijos aukštis */
    --eco-section-height: 620px;

    /* visa scena */
    --eco-scene-scale: 1;
    --eco-scene-offset-x: 0px;
    --eco-scene-offset-y: -120px;

    /* pagrindinis title */
    --eco-title-x: 748px;
    --eco-title-y: 180px;
    --eco-title-size: 31px;

    /* chips */
    --eco-chip-top: 250px;
    --eco-chip-modules-x: 748px;
    --eco-chip-features-x: 950px;
    --eco-chip-integrations-x: 1125px;

    /* centras / logo */
    --eco-center-x: 748px;
    --eco-center-y: 432px;
    --eco-center-size: 208px;

    /* žiedai */
    --eco-ring1-cx: 748;
    --eco-ring1-cy: 432;
    --eco-ring1-rx: 200;
    --eco-ring1-ry: 200;

    --eco-ring2-cx: 748;
    --eco-ring2-cy: 432;
    --eco-ring2-rx: 330;
    --eco-ring2-ry: 330;

    --eco-ring3-cx: 748;
    --eco-ring3-cy: 432;
    --eco-ring3-rx: 500;
    --eco-ring3-ry: 500;

    /* globalus mazgų shift */
    --eco-nodes-shift-x: 0px;
    --eco-nodes-shift-y: 0px;

    /* kiekvieno mazgo pozicija */
    --m1-x: 820px;  --m5-y: 400px;
    --m2-x: 610px;  --m2-y: 500px;
    --m3-x: 900px;  --m3-y: 430px;
    --m4-x: 710px;  --m4-y: 580px;
    --m5-x: 600px;  --m1-y: 570px;

    --f1-x: 500px;  --f1-y: 330px;
    --f2-x: 480px;  --f2-y: 470px;
    --f3-x: 520px;  --f3-y: 590px;

    --f4-x: 1000px;  --f4-y: 370px;
    --f5-x: 1020px;  --f5-y: 450px;
    --f6-x: 1010px;  --f6-y: 535px;

    --f7-x: 600px;  --f7-y: 660px;
    --f8-x: 950px; --f8-y: 610px;
    --f9-x: 870px; --f9-y: 680px;
    --f10-x: 740px; --f10-y: 700px;

    --c1-x: 360px;  --c1-y: 430px;
    --c2-x: 320px;  --c2-y: 480px;
    --c3-x: 365px;  --c3-y: 535px;

    --c4-x: 1160px; --c4-y: 430px;
    --c5-x: 1190px; --c5-y: 490px;
    --c6-x: 1155px; --c6-y: 525px;

    /* dizainas */
    --eco-bg-1:#fbfcfe;
    --eco-bg-2:#f4f7fb;
    --eco-text:#151923;
    --eco-ring:#dde6f0;

    --eco-blue:#1f6fff;
    --eco-blue-soft:#6fc4ff;
    --eco-connect:#9aa3b2;
    --eco-feature-pulse: #ffb14a;

    --eco-dot-size: 14px;
    
    --mob-scene-scale: 1;
    --mob-scene-offset-x: 0px;
    --mob-scene-offset-y: 0px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
    background:#fff;
    color:var(--eco-text);
    font-family:Inter, Arial, sans-serif;
}

.ecosystem{
    position:relative;
    width:100%;
    height:var(--eco-section-height);
    overflow:hidden;
    background:linear-gradient(180deg,var(--eco-bg-1) 0%, var(--eco-bg-2) 100%);
    border-radius:0 0 34px 34px;
}

.ecosystem-desktop{ display:block; }
.ecosystem-mobile{ display:none; }

@media (max-width: 900px){
.ecosystem-desktop{ display:none; }
.ecosystem-mobile{ display:block; }
}

@media (min-width: 901px){
.ecosystem-mobile{ display:none !important; }
}

.ecosystem-mobile{
background:linear-gradient(180deg,var(--eco-bg-1) 0%, var(--eco-bg-2) 100%);
border-radius:0 0 34px 34px;
overflow:hidden;
height:var(--mob-section-height);
position:relative;
}

.eco-mobile-wrap{
position:absolute;
inset:0;
overflow:hidden;
width:100%;
height:100%;
}

.eco-mobile-scene{
position:absolute;
top:0;
left:50%;
width:calc(var(--mob-base-width) * 1px);
height:calc(var(--mob-base-height) * 1px);
transform-origin:top center;
will-change:transform;
}

.eco-mobile-title{
position:absolute;
z-index:30;
margin:0;
left:var(--mob-title-x);
top:var(--mob-title-y);
transform:translateX(-50%);
font-size:var(--mob-title-size);
line-height:1.08;
letter-spacing:-0.03em;
font-weight:700;
white-space:nowrap;
color:var(--eco-text);
}

.eco-mobile-chip{
position:absolute;
z-index:25;
transform:translateX(-50%);
border-radius:999px;
padding:10px 22px;
font-size:12px;
line-height:1;
font-weight:500;
white-space:nowrap;
backdrop-filter:blur(10px);
}

.eco-mobile-chip--modules{
left:var(--mob-chip-modules-x);
top:var(--mob-chip-modules-y);
color:var(--eco-blue);
background:rgba(31,111,255,.12);
}

.eco-mobile-chip--features{
left:var(--mob-chip-features-x);
top:var(--mob-chip-features-y);
color:#ffb14a;
background:rgba(255,177,74,.16);
}

.eco-mobile-chip--integrations{
left:var(--mob-chip-integrations-x);
top:var(--mob-chip-integrations-y);
color:#7f8897;
background:rgba(154,163,178,.14);
}

.eco-mobile-ring{
position:absolute;
border-radius:50%;
transform:translate(-50%,-50%);
pointer-events:none;
border:none;
background:transparent;
}

.eco-mobile-ring::before{
content:"";
position:absolute;
inset:0;
border-radius:50%;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.82),
inset 0 2px 6px rgba(255,255,255,.22),
inset 0 -1px 0 rgba(210,221,235,.12);
opacity:1;
}

.eco-mobile-ring::after{
content:"";
position:absolute;
inset:0;
border-radius:50%;
box-shadow:
0 -1px 0 rgba(236,241,247,.55),
0 -8px 18px rgba(236,241,247,.12);
opacity:.95;
}

.eco-mobile-ring--1{
box-shadow:
0 14px 18px rgba(214,224,236,.30),
0 28px 34px rgba(214,224,236,.18),
0 46px 62px rgba(214,224,236,.10);
}

.eco-mobile-ring--2{
box-shadow:
0 16px 20px rgba(214,224,236,.24),
0 32px 42px rgba(214,224,236,.16),
0 54px 72px rgba(214,224,236,.09);
}

.eco-mobile-ring--3{
box-shadow:
0 14px 18px rgba(214,224,236,.18),
0 28px 38px rgba(214,224,236,.12),
0 48px 64px rgba(214,224,236,.07);
}

.eco-mobile-logo{
position:absolute;
z-index:28;
left:var(--mob-logo-x);
top:var(--mob-logo-y);
width:var(--mob-logo-size);
height:var(--mob-logo-size);
transform:translate(-50%,-50%);
}

.eco-mobile-logo::before{
content:"";
position:absolute;
inset:-34px;
border-radius:50%;
background:radial-gradient(circle, rgba(20,32,60,.08), rgba(20,32,60,0) 72%);
filter:blur(18px);
}

.eco-mobile-logo__inner{
position:relative;
width:100%;
height:100%;
border-radius:50%;
background:linear-gradient(180deg,#fff 0%, #f6f8fb 100%);
box-shadow:
0 28px 64px rgba(20,32,60,.10),
0 8px 18px rgba(20,32,60,.05),
inset 0 1px 0 rgba(255,255,255,.95);
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}

.eco-mobile-logo__inner img{
display:block;
width:68%;
height:auto;
}

.eco-mobile-node{
position:absolute;
z-index:35;
transform:translate(-50%,-50%);
width:140px;
text-align:center;
}

.eco-mobile-node--integration{
width:auto;
pointer-events:none;
}

.eco-mobile-dot{
position:relative;
width:22px;
height:22px;
margin:0 auto 10px;
border-radius:50%;
background:#fff;
border:none;
box-shadow:
0 4px 8px rgba(20,32,60,.20),
0 12px 20px rgba(20,32,60,.10),
0 0 0 1px rgba(222,228,236,.95);
}

.eco-mobile-dot::before{
content:"";
position:absolute;
inset:-2px;
border-radius:50%;
background:rgba(255,255,255,.7);
filter:blur(2px);
z-index:0;
}

.eco-mobile-dot::after{
content:"";
position:absolute;
inset:0;
border-radius:50%;
background:#fff;
z-index:3;
}

.eco-mobile-pulse{
position:absolute;
inset:-3px;
border-radius:50%;
z-index:1;
animation:pulseCore 2s infinite cubic-bezier(.22,.61,.36,1);
}

.eco-mobile-node--module .eco-mobile-pulse{
background:rgba(31,111,255,.28);
box-shadow:
0 0 0 1px rgba(31,111,255,.22),
0 0 18px rgba(31,111,255,.22);
}

.eco-mobile-node--feature .eco-mobile-pulse{
background:rgba(255,177,74,.24);
box-shadow:
0 0 0 1px rgba(255,177,74,.18),
0 0 16px rgba(255,177,74,.18);
}

.eco-mobile-text{
display:block;
width:100%;
margin:0 auto;
color:var(--eco-text);
font-size:14px;
line-height:1.22;
font-weight:500;
text-align:center;
white-space:normal;
word-break:normal;
overflow-wrap:break-word;
}

.eco-mobile-node--integration .eco-mobile-dot{
width:auto !important;
height:auto !important;
margin:0;
background:transparent !important;
box-shadow:none !important;
}

.eco-mobile-node--integration .eco-mobile-dot::before,
.eco-mobile-node--integration .eco-mobile-dot::after{
display:none !important;
content:none !important;
}

.eco-mobile-node--integration img{
display:block;
width:72px;
height:40px;
object-fit:contain;
}

@media (min-width: 1181px){
.ecosystem-mobile{
display:none !important;
}
}

.scene-wrap{
    position:absolute;
    inset:0;
    overflow:hidden;
}

.scene{
    position:absolute;
    top:0;
    left:50%;
    width:calc(var(--eco-base-width) * 1px);
    height:calc(var(--eco-base-height) * 1px);
    transform-origin:top center;
    will-change:transform;
}

.scene-title{
    position:absolute;
    z-index:30;
    margin:0;
    left:var(--eco-title-x);
    top:var(--eco-title-y);
    transform:translateX(-50%);
    font-size:var(--eco-title-size);
    font-weight:700;
    line-height:1.08;
    letter-spacing:-0.03em;
    white-space:nowrap;
    color:var(--eco-text);
}

.chip{
    position:absolute;
    z-index:20;
    transform:translateX(-50%);
    border-radius:999px;
    padding:10px 20px;
    font-size:12px;
    line-height:1;
    font-weight:500;
    white-space:nowrap;
    backdrop-filter:blur(10px);
}

.chip--modules{
    left:var(--eco-chip-modules-x);
    top:var(--eco-chip-top);
    color:var(--eco-blue);
    background:rgba(31,111,255,.12);
}

.chip--features{
    left:var(--eco-chip-features-x);
    top:var(--eco-chip-top);
    color:#ffb14a;
    background:rgba(255,177,74,.16);
}

.chip--integrations{
    left:var(--eco-chip-integrations-x);
    top:var(--eco-chip-top);
    color:#7f8897;
    background:rgba(154,163,178,.14);
}

.ring{
position:absolute;
border-radius:50%;
transform:translate(-50%,-50%);
pointer-events:none;
border:none;
background:transparent;
}

.ring::before{
content:"";
position:absolute;
inset:0;
border-radius:50%;
box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(210,221,235,.16);
opacity:1;
}

.ring::after{
content:"";
position:absolute;
inset:0;
border-radius:50%;
box-shadow:
    0 -1px 0 rgba(232,238,246,.42);
opacity:.85;
}

.ring--1{
    box-shadow:
    0 16px 18px rgba(255,177,74,.08),
    0 28px 34px rgba(255,177,74,.06),
    0 42px 54px rgba(255,177,74,.035);
}

.ring--2{
box-shadow:
    0 20px 22px rgba(214,224,236,.24),
    0 34px 42px rgba(214,224,236,.16),
    0 52px 68px rgba(214,224,236,.08);
}

.ring--3{
box-shadow:
    0 24px 26px rgba(214,224,236,.18),
    0 40px 50px rgba(214,224,236,.12),
    0 60px 78px rgba(214,224,236,.06);
}

.center{
    position:absolute;
    z-index:25;
    left:var(--eco-center-x);
    top:var(--eco-center-y);
    width:var(--eco-center-size);
    height:var(--eco-center-size);
    transform:translate(-50%,-50%);
}

.center::before{
    content:"";
    position:absolute;
    inset:-34px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(31,111,255,.10), rgba(31,111,255,0) 72%);
    filter:blur(18px);
}

.center__inner{
    position:relative;
    width:100%;
    height:100%;
    border-radius:50%;
    background:linear-gradient(180deg,#fff 0%, #f6f8fb 100%);
    box-shadow:
    0 28px 64px rgba(20,32,60,.10),
    0 8px 18px rgba(20,32,60,.05),
    inset 0 1px 0 rgba(255,255,255,.95);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.center__inner img{
    display:block;
    width:68%;
    height:auto;
}

.node{
position:absolute;
z-index:35;
transform:translate(-50%,-50%);
text-align:center;
cursor:pointer;
width:120px;
}

.node__dot{
position:relative;
width:22px;
height:22px;
margin:0 auto 10px;
border-radius:50%;
background:#fff;
border:none;
box-shadow:
    0 4px 8px rgba(20,32,60,.20),
    0 12px 20px rgba(20,32,60,.10),
    0 0 0 1px rgba(222,228,236,.95);
}

.node__dot::before{
content:"";
position:absolute;
inset:-2px;
border-radius:50%;
background:rgba(255,255,255,.7);
filter:blur(2px);
z-index:0;
}

.node__dot::after{
content:"";
position:absolute;
inset:0;
border-radius:50%;
background:#fff;
z-index:3;
}

.node--module .node__dot,
.node--feature .node__dot,
.node--integration .node__dot{
border:0;
}

.node__label{
display:block;
width:100%;
max-width:100%;
margin:0 auto;
color:var(--eco-text);
font-size:14px;
line-height:1.22;
font-weight:500;
text-align:center;
white-space:normal;
word-break:normal;
overflow-wrap:break-word;
}

.node--module .pulse,
.node--feature .pulse{
position:absolute;
inset:-3px;
border-radius:50%;
z-index:1;
animation:pulseCore 2s infinite cubic-bezier(.22,.61,.36,1);
}

.node--module .pulse{
background:rgba(31,111,255,.28);
box-shadow:
    0 0 0 1px rgba(31,111,255,.22),
    0 0 18px rgba(31,111,255,.22);
}

.node--feature .pulse{
background:rgba(255,177,74,.24);
box-shadow:
    0 0 0 1px rgba(255,177,74,.18),
    0 0 16px rgba(255,177,74,.18);
}

@keyframes pulseCore{
0%{
    transform:scale(1);
    opacity:.85;
}
75%{
    transform:scale(2.2);
    opacity:0;
}
100%{
    transform:scale(2.2);
    opacity:0;
}
}

.node--integration .node__dot{
    border:4px solid var(--eco-connect);
    box-shadow:
    0 8px 18px rgba(20,32,60,.06),
    0 1px 4px rgba(20,32,60,.03),
    0 0 0 8px rgba(154,163,178,.10);
}

.node--integration.has-icon{
    width:auto !important;
}

.node--integration.has-icon .node__dot{
width:auto !important;
height:auto !important;
border:0 !important;
background:transparent !important;
box-shadow:none !important;
display:flex;
align-items:center;
justify-content:center;
overflow:visible;
margin:0 auto 8px;
}

.node--integration.has-icon .node__dot::before,
.node--integration.has-icon .node__dot::after{
display:none !important;
content:none !important;
}

.node--integration.has-icon .node__icon{
display:block;
width:72px;
height:40px;
object-fit:contain;
max-width:none;
max-height:none;
filter:none;
}

.node--integration.has-icon .node__label{
    display:none;
}

.node--integration{
cursor:default;
}

.node--integration.has-icon{
pointer-events:none;
}

.node--integration .node__dot{
animation:none !important;
}

.tooltip{
position:absolute;
z-index:100;
min-width:280px;
max-width:320px;
padding:18px 18px 16px;
border-radius:18px;
background:rgba(255,255,255,.98);
border:1px solid rgba(20,32,60,.08);
box-shadow:0 24px 50px rgba(20,32,60,.14);
opacity:0;
pointer-events:none;
transform:translateY(8px);
transition:opacity .18s ease, transform .18s ease;
}

.tooltip.is-visible{
    opacity:1;
    transform:translateY(0);
}

.tooltip__group{
    margin:0 0 8px;
    font-size:12px;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:#7b8796;
    font-weight:700;
}

.tooltip__title{
    margin:0 0 8px;
    font-size:22px;
    line-height:1.15;
    font-weight:700;
}

.tooltip__desc{
    margin:0;
    font-size:14px;
    line-height:1.55;
    color:#5a6474;
}

.tooltip.is-visible{
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
}

@media (max-width: 900px){
.tooltip{
    position:fixed;
    min-width:auto;
    width:320px;
    max-width:calc(100vw - 32px);
    z-index:9999;
}
}