/* ESVITA Ecosystem Experience · v28.0.0
   Landing + access visual layer. Built as an additive layer over vita.css. */

:root{
  --eco-bg:#07151d;
  --eco-bg-2:#0a202a;
  --eco-ink:#122b36;
  --eco-muted:#6e858e;
  --eco-blue:#3f9dbb;
  --eco-teal:#5bbfb8;
  --eco-green:#7cc894;
  --eco-lime:#9bd889;
  --eco-line:rgba(106,205,197,.24);
  --eco-paper:#f3f7f6;
  --eco-paper-2:#e9f1ef;
}

body.ecosystem-site{background:var(--eco-bg);color:#f5fbfd}
.ecosystem-site .scene{overflow:visible}
.ecosystem-site h1,.ecosystem-site h2{letter-spacing:-.06em;text-wrap:balance}
.ecosystem-site h1 em,.ecosystem-site h2 em{font-style:normal;background:linear-gradient(100deg,#55b5cf,#61c8b6,#98d789);-webkit-background-clip:text;background-clip:text;color:transparent}
.ecosystem-site .button-primary{background:linear-gradient(100deg,#45a7c5,#5fc6b5,#8ed08b);color:#05161d;box-shadow:0 18px 48px rgba(78,190,177,.19)}
.ecosystem-site .button-primary:hover{box-shadow:0 22px 60px rgba(78,190,177,.28)}
.ecosystem-site .button-ghost{border-color:rgba(214,239,242,.18);background:rgba(255,255,255,.03)}

/* Official brand asset */
.brand-official{display:inline-flex;align-items:center;line-height:0}
.brand-official img{width:clamp(136px,11vw,180px)!important;height:auto;max-height:44px;object-fit:contain}
.ecosystem-header{background:rgba(6,20,28,.76);border-bottom:1px solid rgba(255,255,255,.07);backdrop-filter:blur(20px) saturate(125%)}
.ecosystem-header .nav{min-height:76px}
.ecosystem-header .nav-links{gap:18px}
.ecosystem-header .nav-links a{font-size:.87rem;letter-spacing:.015em;color:#cfe0e5}
.ecosystem-header .nav-links a:hover{color:#fff}
.ecosystem-header .nav-access{padding:9px 14px;border-radius:999px;border:1px solid rgba(196,225,230,.12)}
.ecosystem-header .nav-cta{border-color:rgba(107,205,188,.28);background:rgba(98,193,178,.07)}

/* Hero */
.ecosystem-hero{position:relative;min-height:calc(100svh - 76px);display:flex;align-items:center;padding:54px 0 72px;overflow:hidden;background:
  radial-gradient(circle at 78% 28%,rgba(57,151,181,.13),transparent 26%),
  radial-gradient(circle at 78% 74%,rgba(114,201,145,.09),transparent 28%),
  linear-gradient(180deg,#06131b 0%,#071923 55%,#081a23 100%)}
.ecosystem-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.016) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.016) 1px,transparent 1px);background-size:74px 74px;mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 80%,transparent);opacity:.24}
.ecosystem-ambient{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.ambient-a{width:42vw;height:42vw;right:-12vw;top:-10vw;background:rgba(53,157,190,.12)}
.ambient-b{width:38vw;height:38vw;left:28vw;bottom:-24vw;background:rgba(112,203,143,.08)}
.ecosystem-hero-grid{display:grid;grid-template-columns:minmax(420px,.83fr) minmax(540px,1.17fr);gap:clamp(24px,4vw,72px);align-items:center;width:100%}
.ecosystem-hero-copy{position:relative;z-index:5;max-width:690px}
.ecosystem-hero-copy .micro{color:#b8d4dc}
.ecosystem-hero h1{font-size:clamp(4rem,7.1vw,7.8rem);line-height:.86;margin:24px 0 30px}
.ecosystem-hero h1 em{display:inline-block;font-size:1.03em}
.ecosystem-hero-statement{font-size:clamp(1.45rem,2.05vw,2.35rem);font-weight:780;line-height:1.12;letter-spacing:-.035em;color:#eef8fa;margin-bottom:18px}
.ecosystem-hero-lead{max-width:650px;font-size:clamp(1.02rem,1.25vw,1.22rem);line-height:1.62;color:#b8cdd4}
.ecosystem-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.ecosystem-whisper{display:flex;align-items:flex-start;gap:10px;margin:21px 0 0;max-width:610px;color:#7f9aa3;font-size:.84rem;line-height:1.52}
.ecosystem-whisper span{width:7px;height:7px;margin-top:5px;flex:0 0 auto;border-radius:50%;background:linear-gradient(#55b7cf,#83ce94);box-shadow:0 0 0 6px rgba(86,190,181,.06)}

/* Interactive ecosystem */
.ecosystem-stage{position:relative;min-height:660px;isolation:isolate}
.ecosystem-stage::before{content:"";position:absolute;left:50%;top:50%;width:390px;height:390px;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(72,181,191,.12),rgba(110,201,152,.04) 48%,transparent 72%);filter:blur(16px)}
.ecosystem-field{position:absolute;left:50%;top:50%;translate:-50% -50%;border-radius:50%;border:1px solid rgba(130,208,211,.10);pointer-events:none}
.field-1{width:510px;height:510px;animation:ecoSpin 42s linear infinite}
.field-2{width:380px;height:380px;border-style:dashed;opacity:.65;animation:ecoSpinReverse 31s linear infinite}
.ecosystem-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1;pointer-events:none}
.ecosystem-lines path{fill:none;stroke:rgba(99,194,192,.18);stroke-width:1.3;transition:stroke .3s,stroke-width .3s,opacity .3s}
.ecosystem-lines path.is-active{stroke:url(#ecoGradient);stroke-width:2.4;filter:drop-shadow(0 0 7px rgba(96,201,183,.35))}
.eco-core{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:5;width:198px;height:198px;border:1px solid rgba(150,218,220,.16);border-radius:50%;background:rgba(6,24,33,.56);backdrop-filter:blur(14px);display:grid;place-items:center;cursor:pointer;box-shadow:0 28px 80px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.05)}
.eco-core img{width:118px;position:relative;z-index:2;filter:drop-shadow(0 18px 30px rgba(63,158,187,.18))}
.eco-core-halo{position:absolute;inset:14px;border-radius:50%;border:1px solid rgba(120,207,191,.16);animation:ecoBreathe 5.5s ease-in-out infinite}
.eco-node{position:absolute;z-index:4;border:1px solid rgba(193,228,232,.14);background:rgba(7,25,34,.74);color:#dfeef2;border-radius:999px;padding:10px 13px 10px 10px;display:flex;align-items:center;gap:8px;cursor:pointer;backdrop-filter:blur(12px);transition:.25s ease;box-shadow:0 12px 34px rgba(0,0,0,.12)}
.eco-node i{width:9px;height:9px;border-radius:50%;background:linear-gradient(140deg,#4eb0cc,#7ecb96);box-shadow:0 0 0 5px rgba(88,190,181,.05)}
.eco-node span{font-size:.7rem;font-weight:850;letter-spacing:.12em}
.eco-node:hover,.eco-node.is-active{transform:translateY(-3px);border-color:rgba(109,211,193,.45);background:rgba(20,55,62,.8);color:#fff;box-shadow:0 18px 46px rgba(0,0,0,.18),0 0 0 7px rgba(99,198,184,.04)}
.n-people{left:5%;top:18%}.n-process{right:4%;top:21%}.n-info{right:0;top:50%}.n-resources{right:9%;bottom:15%}.n-decisions{left:7%;bottom:15%}.n-results{left:0;top:51%}
.eco-insight{position:absolute;z-index:6;left:50%;bottom:6%;translate:-50% 0;width:min(480px,82%);padding:16px 19px;border-radius:20px;background:rgba(5,22,30,.74);border:1px solid rgba(171,222,226,.12);backdrop-filter:blur(16px);text-align:center;box-shadow:0 18px 55px rgba(0,0,0,.2)}
.eco-insight small{display:block;color:#66cabc;font-size:.62rem;font-weight:900;letter-spacing:.16em;margin-bottom:5px}
.eco-insight strong{font-size:.93rem;line-height:1.4;color:#edf7f9}
.eco-insight.is-changing{animation:ecoInsight .34s ease}
.eco-hint{position:absolute;right:2%;bottom:1.5%;font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:#62808a}

/* Shared section rhythm */
.ecosystem-section{position:relative;padding:clamp(92px,10vw,150px) 0;overflow:hidden}
.ecosystem-section-light{background:linear-gradient(180deg,#f3f7f6,#edf4f2);color:var(--eco-ink)}
.ecosystem-section-dark{background:linear-gradient(180deg,#081b24,#07151d);color:#f4fafb}
.ecosystem-section-gradient{background:linear-gradient(135deg,#315c69 0%,#467378 47%,#688071 100%);color:#fff}
.ecosystem-section .micro.ink{color:#3b7585}
.ecosystem-section-light h2{color:#15303b}
.ecosystem-section-light h2 em{background-image:linear-gradient(100deg,#328cab,#55b4a7,#769d70)}

/* Relationship scene */
.relations-grid{display:grid;grid-template-columns:minmax(350px,.72fr) minmax(560px,1.28fr);gap:clamp(38px,5vw,82px);align-items:center}
.relations-copy{max-width:560px}
.relations-copy h2{font-size:clamp(3.1rem,5.4vw,6rem);line-height:.95;margin:18px 0 24px}
.relations-copy p{font-size:1.08rem;line-height:1.66;color:#587079}
.scenario-tabs{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}
.scenario-tabs button{border:1px solid rgba(27,88,105,.14);background:rgba(255,255,255,.55);color:#46616b;border-radius:999px;padding:10px 15px;cursor:pointer;font-weight:760;transition:.2s}
.scenario-tabs button:hover,.scenario-tabs button.is-active{background:#12303c;color:#fff;border-color:#12303c;box-shadow:0 10px 28px rgba(17,57,70,.12)}
.relation-canvas{position:relative;min-height:590px;border-radius:42px;border:1px solid rgba(29,92,108,.10);background:
  radial-gradient(circle at 50% 50%,rgba(65,158,181,.10),transparent 28%),
  radial-gradient(circle at 75% 70%,rgba(122,194,142,.10),transparent 25%),
  rgba(255,255,255,.56);box-shadow:0 30px 90px rgba(24,68,77,.08);overflow:hidden}
.relation-canvas::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(38,100,115,.13) 1px,transparent 1px);background-size:27px 27px;opacity:.26;mask-image:radial-gradient(circle at 50% 50%,#000,transparent 76%)}
.relation-lines{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.relation-lines path{fill:none;stroke:rgba(53,133,151,.20);stroke-width:1.6;stroke-dasharray:5 8;transition:.25s}
.relation-lines path.is-active{stroke:#55b8aa;stroke-width:2.5;stroke-dasharray:none;filter:drop-shadow(0 0 6px rgba(76,176,161,.26))}
.relation-center{position:absolute;left:50%;top:45%;translate:-50% -50%;z-index:4;width:230px;aspect-ratio:1;border-radius:50%;display:grid;place-content:center;text-align:center;padding:22px;background:linear-gradient(145deg,#0b2b37,#123e47);color:#fff;border:1px solid rgba(255,255,255,.16);box-shadow:0 28px 70px rgba(24,76,85,.22),0 0 0 18px rgba(66,158,173,.04)}
.relation-center small{font-size:.62rem;letter-spacing:.17em;color:#76d0c1;font-weight:900}.relation-center strong{font-size:1.45rem;line-height:1.04;letter-spacing:-.04em;margin:7px 0}.relation-center span{font-size:.82rem;color:#a8c6ce}
.relation-center.is-changing{animation:relationPulse .38s ease}
.relation-node{position:absolute;z-index:4;min-width:130px;padding:12px 14px;border-radius:20px;border:1px solid rgba(35,103,115,.12);background:rgba(255,255,255,.86);box-shadow:0 14px 40px rgba(28,75,85,.08);color:#24434e;text-align:left;cursor:pointer;transition:.22s}
.relation-node span{display:block;font-weight:850}.relation-node small{display:block;margin-top:3px;color:#7a8f96;font-size:.68rem;text-transform:uppercase;letter-spacing:.1em}
.relation-node:hover,.relation-node.is-active{transform:translateY(-3px);border-color:rgba(66,158,162,.36);box-shadow:0 18px 46px rgba(30,85,91,.13);background:#fff}
.r1{left:7%;top:14%}.r2{right:9%;top:12%}.r3{right:4%;top:46%}.r4{right:10%;bottom:11%}.r5{left:9%;bottom:12%}.r6{left:3%;top:48%}
.relation-detail{position:absolute;left:50%;bottom:3.5%;translate:-50% 0;z-index:5;width:min(520px,86%);padding:13px 16px;border-radius:16px;background:rgba(240,247,245,.86);border:1px solid rgba(31,101,111,.10);backdrop-filter:blur(12px);text-align:center}
.relation-detail span{display:block;color:#4e9a96;font-size:.59rem;font-weight:900;letter-spacing:.15em}.relation-detail strong{display:block;margin-top:4px;font-size:.86rem;line-height:1.35;color:#35515a}

/* Signal journey */
.signal-section::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 22% 20%,rgba(57,154,183,.12),transparent 28%),radial-gradient(circle at 82% 72%,rgba(116,201,143,.08),transparent 30%)}
.signal-heading{max-width:900px}
.signal-heading h2{font-size:clamp(3.1rem,5vw,5.5rem);margin:18px 0 22px;line-height:.97}
.signal-heading p{max-width:760px;font-size:1.08rem;color:#a8c2ca;line-height:1.65}
.signal-journey{position:relative;margin-top:62px;display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.signal-track{position:absolute;left:8%;right:8%;top:29px;height:2px;background:rgba(158,207,216,.13);z-index:0;overflow:hidden}
.signal-track span{display:block;width:0;height:100%;background:linear-gradient(90deg,#50acc8,#62c3b1,#91ce8d);box-shadow:0 0 14px rgba(91,194,178,.35);transition:width .45s ease}
.signal-step{position:relative;z-index:2;border:0;background:none;color:#718e98;cursor:pointer;text-align:left;padding:0;transition:.2s}
.signal-step i{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;font-style:normal;font-size:.72rem;font-weight:900;background:#0a2530;border:1px solid rgba(167,211,218,.14);color:#7899a2;box-shadow:0 0 0 8px #081923;transition:.25s}
.signal-step strong{display:block;margin-top:16px;font-size:.8rem;letter-spacing:.11em;color:#9ab2ba}.signal-step small{display:block;margin-top:4px;font-size:.76rem;color:#637f88}
.signal-step:hover i,.signal-step.is-active i{background:linear-gradient(145deg,#398fab,#5caf9f);color:#fff;border-color:transparent;box-shadow:0 0 0 8px rgba(75,161,161,.08),0 12px 30px rgba(20,81,89,.24)}
.signal-step.is-active strong{color:#eaf7f9}.signal-step.is-active small{color:#9fc4ca}
.signal-detail{margin-top:42px;max-width:860px;padding:28px 30px;border-radius:28px;border:1px solid rgba(173,216,222,.10);background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018));backdrop-filter:blur(12px)}
.signal-detail span{display:block;color:#68c9ba;font-size:.64rem;font-weight:900;letter-spacing:.16em}.signal-detail strong{display:block;margin-top:8px;font-size:clamp(1.45rem,2.2vw,2.3rem);line-height:1.1;letter-spacing:-.035em}.signal-detail p{margin:9px 0 0;color:#91abb3;line-height:1.55;max-width:700px}
.signal-detail.is-changing{animation:ecoInsight .34s ease}

/* Perspective */
.perspectives-section{background:radial-gradient(circle at 75% 20%,rgba(99,215,188,.11),transparent 25%),linear-gradient(135deg,#315a68,#456f74 55%,#677e70)}
.perspective-grid{display:grid;grid-template-columns:minmax(360px,.78fr) minmax(560px,1.22fr);gap:clamp(38px,5vw,80px);align-items:center}
.perspective-copy h2{font-size:clamp(3rem,4.8vw,5.35rem);line-height:.98;margin:18px 0 24px}.perspective-copy p{color:#e0edef;line-height:1.62;max-width:580px}
.perspective-panel{padding:22px;border-radius:32px;border:1px solid rgba(255,255,255,.18);background:rgba(4,30,38,.24);backdrop-filter:blur(16px);box-shadow:0 24px 70px rgba(7,36,42,.15)}
.perspective-tabs{display:flex;gap:8px;flex-wrap:wrap}
.perspective-tabs button{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.035);color:#d9e9ec;border-radius:999px;padding:9px 13px;cursor:pointer}
.perspective-tabs button.is-active{background:#071e27;border-color:#071e27;color:#fff}
.perspective-view{min-height:300px;display:flex;flex-direction:column;justify-content:center;padding:26px 10px 12px}
.perspective-view small{color:#93e0ca;font-weight:900;letter-spacing:.16em}.perspective-view strong{display:block;margin-top:12px;max-width:760px;font-size:clamp(2rem,3.7vw,3.7rem);line-height:1.02;letter-spacing:-.05em}.perspective-view>div{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.perspective-view>div span{padding:8px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.15);font-size:.68rem;font-weight:800;letter-spacing:.08em;color:#ecf7f8}
.perspective-view.is-changing{animation:ecoInsight .34s ease}

/* Capabilities */
.ecosystem-capabilities{background:linear-gradient(180deg,#081923 0%,#0a2530 60%,#0b2c35 100%);color:#fff}
.ecosystem-capabilities::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 18%,rgba(76,181,188,.10),transparent 24%),radial-gradient(circle at 20% 82%,rgba(123,200,142,.08),transparent 27%)}
.capability-heading{max-width:900px}.capability-heading h2{font-size:clamp(3.05rem,5vw,5.5rem);line-height:.97;margin:18px 0 22px}.capability-heading>p{max-width:700px;color:#a8c2ca;font-size:1.06rem;line-height:1.6}
.ecosystem-module-stage{margin-top:44px;grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr);background:linear-gradient(145deg,rgba(5,28,38,.84),rgba(12,61,65,.34));border-color:rgba(255,255,255,.12);box-shadow:0 34px 100px rgba(0,0,0,.18)}
.ecosystem-module-stage .module-copy h3{font-size:clamp(2.7rem,4.4vw,4.8rem)}
.capability-art{position:relative;min-height:340px;display:grid;place-items:center;isolation:isolate;transition:transform .22s ease}
.capability-art::before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--moduleAccent) 18%,transparent),transparent 68%);filter:blur(12px)}
.capability-art img{width:112px;position:relative;z-index:3;opacity:.95;filter:drop-shadow(0 16px 30px rgba(0,0,0,.2))}
.capability-art strong{position:absolute;left:14%;top:14%;z-index:4;font-size:clamp(4rem,8vw,7.5rem);line-height:1;color:color-mix(in srgb,var(--moduleAccent) 78%,#fff);opacity:.92}
.capability-art>span{position:absolute;right:6%;bottom:12%;font-size:clamp(2.2rem,4.8vw,4.8rem);font-weight:900;letter-spacing:-.06em;color:rgba(255,255,255,.13)}
.capability-ring{position:absolute;left:50%;top:50%;translate:-50% -50%;border-radius:50%;border:1px solid color-mix(in srgb,var(--moduleAccent) 30%,transparent)}
.ring-one{width:300px;height:300px;animation:ecoSpin 24s linear infinite}.ring-two{width:220px;height:220px;border-style:dashed;animation:ecoSpinReverse 17s linear infinite}
.ecosystem-capabilities .module-pill{border-color:rgba(255,255,255,.10);background:rgba(255,255,255,.035)}
.ecosystem-capabilities .module-pill.is-active{border-color:rgba(110,211,193,.45);background:rgba(94,191,178,.10)}

/* Grow */
.grow-grid{display:grid;grid-template-columns:minmax(340px,.72fr) minmax(560px,1.28fr);gap:clamp(40px,5vw,82px);align-items:center}
.grow-copy h2{font-size:clamp(3rem,4.9vw,5.4rem);line-height:.98;margin:18px 0 24px}.grow-copy p{color:#587079;line-height:1.65}
.ecosystem-builder{padding:28px;border-radius:32px;background:rgba(255,255,255,.68);border:1px solid rgba(36,105,115,.11);box-shadow:0 26px 80px rgba(22,68,76,.08)}
.ecosystem-builder .builder-options{display:flex;flex-wrap:wrap;gap:9px}
.ecosystem-builder .builder-options button{border:1px solid rgba(30,91,104,.13);background:#f6faf9;color:#47626b;border-radius:999px;padding:10px 15px;cursor:pointer;font-weight:760;transition:.2s}
.ecosystem-builder .builder-options button:hover,.ecosystem-builder .builder-options button.is-active{background:#11313c;color:#fff;border-color:#11313c}
.ecosystem-builder .builder-result{margin-top:20px;padding:22px;border-radius:22px;background:linear-gradient(145deg,#0c2b37,#174852);color:#fff}
.ecosystem-builder .builder-result span{display:block;color:#70d0c1;font-size:.62rem;font-weight:900;letter-spacing:.14em}.ecosystem-builder .builder-result strong{display:block;margin-top:7px;font-size:clamp(1.35rem,2.2vw,2.2rem);line-height:1.15;letter-spacing:-.035em}
.grow-link{display:inline-flex;align-items:center;gap:12px;margin-top:20px;color:#1b5f6d;font-weight:850}.grow-link span{transition:transform .2s}.grow-link:hover span{transform:translateX(5px)}

/* Closing */
.ecosystem-closing{position:relative;padding:clamp(100px,11vw,160px) 0 0;overflow:hidden;background:
  radial-gradient(circle at 74% 32%,rgba(67,170,190,.13),transparent 25%),
  radial-gradient(circle at 80% 68%,rgba(114,201,144,.09),transparent 25%),
  linear-gradient(180deg,#071720,#06131a)}
.ecosystem-closing-field{position:absolute;right:-9vw;top:8%;width:52vw;height:52vw;border-radius:50%;border:1px solid rgba(133,209,207,.08);box-shadow:0 0 0 70px rgba(113,201,170,.018),0 0 0 145px rgba(80,166,190,.014)}
.closing-ecosystem-grid{display:grid;grid-template-columns:minmax(390px,.76fr) minmax(470px,1.24fr);align-items:center;gap:40px;min-height:520px}
.closing-ecosystem-copy{max-width:700px}.closing-ecosystem-copy h2{font-size:clamp(3.5rem,6vw,6.6rem);line-height:.9;margin:20px 0 26px}.closing-ecosystem-copy p{max-width:620px;color:#a9c0c7;font-size:1.06rem;line-height:1.6}.closing-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.closing-symbol{position:relative;min-height:440px;display:grid;place-items:center}.closing-symbol img{width:180px;position:relative;z-index:3;filter:drop-shadow(0 28px 55px rgba(45,147,174,.2))}.closing-symbol small{position:absolute;bottom:9%;font-size:.66rem;font-weight:900;letter-spacing:.18em;color:#6d919b}.closing-ring{position:absolute;left:50%;top:50%;translate:-50% -50%;border-radius:50%;border:1px solid rgba(121,205,205,.12)}.cr-1{width:390px;height:390px;animation:ecoSpin 34s linear infinite}.cr-2{width:280px;height:280px;border-style:dashed;animation:ecoSpinReverse 24s linear infinite}
.ecosystem-footer{position:relative;z-index:2;margin-top:30px;border-top:1px solid rgba(255,255,255,.07);padding:34px 0 42px}
.ecosystem-footer .brand-official img{width:150px!important;max-height:38px}.ecosystem-footer address{margin-top:16px;color:#8098a1;font-size:.76rem;line-height:1.55;font-style:normal}.ecosystem-footer .footer-enzo img{opacity:.82}.ecosystem-footer .footer-enzo div{display:grid;gap:3px}.ecosystem-footer .footer-enzo strong{color:#dbe9ec}.ecosystem-footer .footer-enzo small{color:#75909a;font-size:.72rem}.ecosystem-footer .footer-meta{color:#8da4ac}

/* Access page redesign */
body.access-page.ecosystem-access{min-height:100svh;background:linear-gradient(180deg,#06131b,#071a23);color:#f5fbfd}
.ecosystem-access .access-header{background:rgba(5,18,26,.72);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.07)}
.ecosystem-access .access-header .shell{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.ecosystem-access .access-header .brand-official img{width:155px!important;max-height:38px}
.ecosystem-access .access-back{color:#91a9b2;font-size:.84rem}.ecosystem-access .access-back:hover{color:#fff}
.access-experience{position:relative;min-height:calc(100svh - 76px);display:flex;align-items:center;padding:46px 0 62px;overflow:hidden}
.access-experience::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);background-size:70px 70px;opacity:.25;mask-image:radial-gradient(circle at 30% 50%,#000,transparent 72%)}
.access-experience-grid{display:grid;grid-template-columns:minmax(420px,.98fr) minmax(430px,.72fr);gap:clamp(42px,7vw,110px);align-items:center;width:100%}
.access-world{position:relative;min-height:600px;display:flex;flex-direction:column;justify-content:center;z-index:2}
.access-world .micro{color:#aac7cf}.access-world h1{font-size:clamp(3.6rem,6vw,6.6rem);line-height:.9;margin:21px 0 25px}.access-world p{max-width:620px;color:#a3bac2;font-size:1.03rem;line-height:1.62}.access-world p strong{color:#e7f3f5}
.access-convergence{position:absolute;right:-7%;top:50%;translate:0 -50%;width:440px;height:440px;opacity:.72;pointer-events:none}.access-convergence svg{position:absolute;inset:0;width:100%;height:100%}.access-convergence path{fill:none;stroke:rgba(96,193,190,.15);stroke-width:1.2;stroke-dasharray:7 9;animation:accessDash 14s linear infinite}.access-convergence .access-core{position:absolute;left:50%;top:50%;translate:-50% -50%;width:150px;height:150px;border-radius:50%;display:grid;place-items:center;background:rgba(7,28,37,.72);border:1px solid rgba(148,216,217,.14);box-shadow:0 0 0 22px rgba(83,185,181,.035),0 22px 60px rgba(0,0,0,.22)}.access-convergence .access-core img{width:86px}.access-convergence i{position:absolute;width:8px;height:8px;border-radius:50%;background:linear-gradient(#50adc8,#86cd95);box-shadow:0 0 0 5px rgba(94,193,180,.05)}.ac1{left:3%;top:19%}.ac2{right:5%;top:18%}.ac3{right:0;bottom:26%}.ac4{left:8%;bottom:15%}.ac5{left:-1%;top:49%}
.access-panel.ecosystem-login-panel{position:relative;z-index:5;padding:36px;border-radius:32px;background:rgba(7,27,36,.76);border:1px solid rgba(205,230,234,.11);box-shadow:0 34px 100px rgba(0,0,0,.28);backdrop-filter:blur(20px)}
.ecosystem-login-panel .login-brand{margin-bottom:28px}.ecosystem-login-panel .login-brand img{width:164px;height:auto}
.ecosystem-login-panel h2{font-size:clamp(2.45rem,4vw,3.7rem);margin:9px 0 12px;line-height:.98}.ecosystem-login-panel>p{color:#9db3bb;line-height:1.55;margin-bottom:28px}
.ecosystem-login-panel .access-note{color:#7f9ca5}.ecosystem-login-panel .access-product-choice{background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.08)}
.access-entry-note{display:flex;align-items:center;gap:9px;margin-top:22px;color:#76929b;font-size:.78rem}.access-entry-note i{width:7px;height:7px;border-radius:50%;background:#66c4b4;box-shadow:0 0 0 5px rgba(102,196,180,.05)}

/* Motion */
@keyframes ecoSpin{to{transform:rotate(360deg)}}
@keyframes ecoSpinReverse{to{transform:rotate(-360deg)}}
@keyframes ecoBreathe{0%,100%{transform:scale(.96);opacity:.55}50%{transform:scale(1.05);opacity:1}}
@keyframes ecoInsight{0%{opacity:.35;transform:translateY(5px)}100%{opacity:1;transform:none}}
@keyframes relationPulse{0%{box-shadow:0 0 0 0 rgba(73,166,168,.14)}100%{box-shadow:0 0 0 24px rgba(73,166,168,0)}}
@keyframes accessDash{to{stroke-dashoffset:-160}}

/* Responsive */
@media (max-width:1120px){
  .ecosystem-hero-grid,.relations-grid,.perspective-grid,.grow-grid,.closing-ecosystem-grid,.access-experience-grid{grid-template-columns:1fr}
  .ecosystem-hero-copy{max-width:820px}.ecosystem-stage{width:min(820px,100%);margin-inline:auto;min-height:620px}
  .relations-copy,.perspective-copy,.grow-copy{max-width:760px}.relation-canvas{width:min(840px,100%);margin-inline:auto}.perspective-panel,.ecosystem-builder{width:min(840px,100%)}
  .ecosystem-module-stage{grid-template-columns:1fr}.capability-art{min-height:300px}
  .closing-ecosystem-grid{gap:0}.closing-symbol{min-height:360px}
  .access-world{min-height:440px}.access-convergence{right:2%;opacity:.48}.ecosystem-login-panel{width:min(620px,100%);margin-inline:auto}
}

@media (max-width:820px){
  .ecosystem-header .nav{min-height:70px}.brand-official img{width:142px!important;max-height:36px}.ecosystem-header .nav-links{top:calc(100% + 8px)}
  .ecosystem-hero{padding:42px 0 60px;min-height:auto}.ecosystem-hero-grid{gap:12px}.ecosystem-hero h1{font-size:clamp(3.7rem,15vw,6.1rem)}
  .ecosystem-stage{min-height:530px}.field-1{width:420px;height:420px}.field-2{width:315px;height:315px}.eco-core{width:166px;height:166px}.eco-core img{width:98px}.eco-node span{font-size:.61rem}.n-people{left:4%;top:18%}.n-process{right:2%;top:19%}.n-results{left:0;top:50%}.n-info{right:0;top:50%}.n-decisions{left:5%;bottom:17%}.n-resources{right:6%;bottom:17%}.eco-insight{bottom:4%}
  .ecosystem-section{padding:84px 0}.relation-canvas{min-height:530px}.relation-center{width:195px}.relation-node{min-width:112px;padding:10px 12px}.r1{left:3%;top:13%}.r2{right:4%;top:12%}.r3{right:1%;top:46%}.r4{right:4%;bottom:13%}.r5{left:4%;bottom:13%}.r6{left:1%;top:47%}
  .signal-journey{grid-template-columns:repeat(3,1fr);gap:22px 12px}.signal-track{display:none}.signal-step{text-align:center}.signal-step i{margin-inline:auto}.signal-detail{margin-top:30px}
  .perspective-view{min-height:260px}.capability-art strong{left:7%}.capability-art>span{right:2%}
  .closing-symbol{min-height:320px}.cr-1{width:310px;height:310px}.cr-2{width:230px;height:230px}.closing-symbol img{width:145px}
  .access-experience{padding-top:28px}.access-world{min-height:390px;text-align:center;align-items:center}.access-world p{margin-inline:auto}.access-convergence{left:50%;right:auto;translate:-50% -50%;opacity:.28;width:380px;height:380px}.ecosystem-access .access-header .brand-official img{width:140px!important}
}

@media (max-width:560px){
  .ecosystem-hero-copy .micro,.relations-copy .micro,.signal-heading .micro,.perspective-copy .micro,.capability-heading .micro,.grow-copy .micro{font-size:.62rem}
  .ecosystem-hero h1{font-size:clamp(3.2rem,17vw,4.8rem);margin-bottom:24px}.ecosystem-hero-statement{font-size:clamp(1.3rem,6.6vw,1.75rem)}.ecosystem-hero-actions{flex-direction:column}.ecosystem-hero-actions .button{width:100%}
  .ecosystem-stage{min-height:455px;width:110%;margin-left:-5%}.field-1{width:330px;height:330px}.field-2{width:250px;height:250px}.eco-core{width:138px;height:138px}.eco-core img{width:82px}.eco-node{padding:7px 9px 7px 7px}.eco-node i{width:7px;height:7px}.eco-node span{font-size:.52rem;letter-spacing:.09em}.n-people{left:3%;top:18%}.n-process{right:3%;top:18%}.n-results{left:0;top:47%}.n-info{right:0;top:47%}.n-decisions{left:5%;bottom:20%}.n-resources{right:5%;bottom:20%}.eco-insight{bottom:1%;padding:12px 14px}.eco-insight strong{font-size:.78rem}.eco-hint{display:none}
  .ecosystem-section{padding:68px 0}.relations-copy h2,.signal-heading h2,.perspective-copy h2,.capability-heading h2,.grow-copy h2{font-size:clamp(2.55rem,12vw,3.75rem)}
  .relation-canvas{min-height:500px;border-radius:28px}.relation-center{width:160px;top:43%}.relation-center strong{font-size:1.12rem}.relation-center span{font-size:.7rem}.relation-node{min-width:92px;border-radius:15px;padding:8px 9px}.relation-node span{font-size:.75rem}.relation-node small{font-size:.53rem}.r1{left:2%;top:11%}.r2{right:2%;top:10%}.r3{right:0;top:42%}.r4{right:2%;bottom:17%}.r5{left:2%;bottom:17%}.r6{left:0;top:42%}.relation-detail{bottom:2.5%;width:92%;padding:10px 12px}.relation-detail strong{font-size:.72rem}
  .scenario-tabs{display:grid;grid-template-columns:repeat(3,1fr)}.scenario-tabs button{padding:9px 7px;font-size:.76rem}
  .signal-journey{grid-template-columns:repeat(2,1fr)}.signal-step i{width:50px;height:50px}.signal-detail{padding:22px 20px;border-radius:22px}.signal-detail strong{font-size:1.45rem}
  .perspective-panel{padding:16px;border-radius:24px}.perspective-tabs{display:grid;grid-template-columns:1fr 1fr}.perspective-tabs button{font-size:.78rem}.perspective-view{min-height:245px;padding:20px 4px 5px}.perspective-view strong{font-size:clamp(1.75rem,9vw,2.5rem)}
  .ecosystem-module-stage{padding:18px;border-radius:26px}.capability-art{min-height:230px}.capability-ring.ring-one{width:210px;height:210px}.capability-ring.ring-two{width:160px;height:160px}.capability-art img{width:78px}.capability-art strong{font-size:4.1rem;top:8%}.capability-art>span{font-size:2.2rem;bottom:8%}.module-controls{grid-template-columns:auto minmax(0,1fr) auto}
  .ecosystem-builder{padding:19px;border-radius:24px}.ecosystem-builder .builder-options button{flex:1 1 calc(50% - 8px);padding:9px 7px}.ecosystem-builder .builder-result{padding:18px}.ecosystem-builder .builder-result strong{font-size:1.3rem}
  .ecosystem-closing{padding-top:80px}.closing-ecosystem-copy h2{font-size:clamp(3rem,14vw,4.5rem)}.closing-actions{flex-direction:column}.closing-actions .button{width:100%}.closing-symbol{min-height:280px}.cr-1{width:250px;height:250px}.cr-2{width:185px;height:185px}.closing-symbol img{width:118px}.ecosystem-footer .footer-enzo{align-items:center}
  .access-experience{padding:24px 0 42px}.access-world{min-height:330px}.access-world h1{font-size:clamp(3rem,15vw,4.5rem)}.access-convergence{width:300px;height:300px}.access-convergence .access-core{width:112px;height:112px}.access-convergence .access-core img{width:65px}.access-panel.ecosystem-login-panel{padding:25px 18px;border-radius:24px}.ecosystem-login-panel .login-brand img{width:145px}.ecosystem-access .access-back{font-size:.76rem}
}

@media (prefers-reduced-motion:reduce){
  .field-1,.field-2,.capability-ring,.closing-ring,.eco-core-halo,.access-convergence path{animation:none!important}
  .ecosystem-site *{scroll-behavior:auto!important}
}

/* Shell integrity: these grids live on the shared .shell element. */
.shell.ecosystem-hero-grid,.shell.access-experience-grid{width:var(--shell)}
.ecosystem-hero-actions .button span{margin-left:8px}

/* Final composition tuning after responsive render audit. */
@media (min-width:1121px){
  .n-decisions,.n-resources{bottom:23%}
  .access-convergence{right:-28%;top:55%;z-index:0;opacity:.52}
  .access-world>.micro,.access-world>h1,.access-world>p{position:relative;z-index:2}
}
@media (min-width:561px) and (max-width:1120px){.n-decisions,.n-resources{bottom:22%}}

/* v28.1.0 · Executive tone + ENZO-inspired materiality */
.ecosystem-hero{
  background:
    radial-gradient(circle at 76% 26%, rgba(63,157,187,.12), transparent 24%),
    radial-gradient(circle at 74% 72%, rgba(124,200,148,.08), transparent 28%),
    linear-gradient(180deg, #040c12 0%, #06131b 52%, #071923 100%);
}
.ecosystem-hero::before{opacity:.14;background-size:88px 88px}
.ecosystem-hero-copy{padding-top:12px}
.ecosystem-hero-statement{
  font-size:clamp(1.35rem,1.95vw,2.15rem);
  color:#f3fafb;
  max-width:560px;
}
.ecosystem-hero-lead{max-width:690px;color:#c2d5db}
.ecosystem-whisper{max-width:680px;color:#91a8b0}
.ecosystem-stage{min-height:690px}
.ecosystem-stage::before{width:430px;height:430px;background:radial-gradient(circle,rgba(72,181,191,.18),rgba(110,201,152,.06) 46%,transparent 72%);filter:blur(20px)}
.field-1,.field-2{opacity:.72}
.eco-node{background:rgba(7,25,34,.62)}
.eco-insight{background:rgba(5,22,30,.68)}
.relations-copy p,.signal-heading p,.perspective-copy p,.capability-heading p,.grow-copy p,.closing-ecosystem-copy p{font-size:1.06rem;line-height:1.72}
.relations-copy p,.grow-copy p{color:#516c75}
.signal-heading p{max-width:860px;color:#a4bcc4}
.perspective-copy p{color:rgba(245,252,252,.84)}
.capability-heading p{max-width:760px;color:#b5ccd4}
.closing-ecosystem-copy p{max-width:720px;color:#b6cbd2}
.footer-enzo strong{display:block;font-size:1rem}
.footer-enzo small{display:block;max-width:260px;line-height:1.45}
.access-world h1{max-width:720px}
.access-world p{max-width:640px;color:#aec2c9}
.access-convergence{opacity:.58}
.access-panel.ecosystem-login-panel{background:rgba(7,27,36,.80)}
@media (max-width:820px){
  .ecosystem-stage{min-height:560px}
}
@media (max-width:560px){
  .ecosystem-stage{min-height:472px}
}


/* v28.1.1 · Hero refinement, native composition, text safety */
.ecosystem-hero{padding:72px 0 82px}
.ecosystem-hero-grid{grid-template-columns:minmax(520px,.96fr) minmax(500px,1.04fr);gap:clamp(22px,3vw,54px);align-items:center}
.ecosystem-hero-copy{padding-top:34px;max-width:760px}
.ecosystem-hero h1{
  font-size:clamp(3.7rem,6.3vw,6.7rem);
  line-height:.92;
  letter-spacing:-.055em;
  max-width:8.2ch;
  margin:20px 0 24px;
  text-wrap:pretty;
  word-break:keep-all;
}
.ecosystem-hero-statement{max-width:12ch}
.ecosystem-hero-lead{max-width:620px}
.ecosystem-stage{
  min-height:660px;
  border-radius:42px;
  background:
    radial-gradient(circle at 54% 46%, rgba(70,181,194,.10), transparent 20%),
    radial-gradient(circle at 72% 30%, rgba(67,157,187,.16), transparent 34%),
    radial-gradient(circle at 80% 78%, rgba(124,200,148,.10), transparent 26%),
    linear-gradient(145deg, rgba(9,30,40,.22), rgba(5,18,26,.04));
  overflow:hidden;
}
.ecosystem-stage::before{
  content:"";
  position:absolute;left:50%;top:50%;width:410px;height:410px;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle,rgba(72,181,191,.14),rgba(110,201,152,.05) 48%,transparent 72%);
  filter:blur(18px);
}
.ecosystem-stage::after{
  content:"";
  position:absolute;inset:9% 10% 13% 16%;border-radius:50%;pointer-events:none;z-index:0;
  background:
    conic-gradient(from 224deg at 50% 50%,
      transparent 0deg 28deg,
      rgba(64,166,198,.66) 29deg 96deg,
      rgba(91,191,184,.60) 97deg 136deg,
      rgba(128,208,152,.58) 137deg 158deg,
      transparent 159deg 360deg);
  -webkit-mask:radial-gradient(circle, transparent 0 31%, #000 34% 57%, transparent 60%);
  mask:radial-gradient(circle, transparent 0 31%, #000 34% 57%, transparent 60%);
  filter:blur(13px) saturate(1.02);
  opacity:.58;
}
.ecosystem-field{z-index:1}
.ecosystem-lines{z-index:2}
.eco-node{z-index:4}
.eco-core{z-index:5}
.eco-insight{z-index:6}
.access-world{position:relative}
.access-world::before{
  content:"";
  position:absolute;right:-14%;top:50%;translate:0 -50%;width:420px;height:420px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 220deg, transparent 0 36deg, rgba(68,168,194,.18) 37deg 116deg, rgba(118,203,158,.16) 117deg 146deg, transparent 147deg 360deg);
  -webkit-mask:radial-gradient(circle, transparent 0 30%, #000 34% 54%, transparent 58%);
  mask:radial-gradient(circle, transparent 0 30%, #000 34% 54%, transparent 58%);
  filter:blur(14px);
  opacity:.42;
}
@media (max-width:1320px){
  .ecosystem-hero h1{font-size:clamp(3.5rem,5.7vw,5.9rem)}
  .ecosystem-hero-grid{grid-template-columns:minmax(440px,.94fr) minmax(460px,1.06fr)}
}
@media (max-width:1120px){
  .ecosystem-hero{padding:52px 0 66px}
  .ecosystem-hero-copy{padding-top:0}
  .ecosystem-hero h1{max-width:9.5ch}
  .ecosystem-stage::after{inset:10% 12% 15% 12%;opacity:.44}
  .access-world::before{left:50%;right:auto;translate:-50% -50%;opacity:.24}
}
@media (max-width:820px){
  .ecosystem-hero h1{font-size:clamp(3.25rem,13vw,5rem);max-width:10ch}
  .ecosystem-hero-statement{max-width:none}
  .ecosystem-stage{min-height:530px}
  .ecosystem-stage::after{inset:12% 9% 19% 9%;opacity:.35}
}
@media (max-width:560px){
  .ecosystem-hero{padding:38px 0 54px}
  .ecosystem-hero h1{font-size:clamp(2.85rem,14.6vw,4.3rem);line-height:.94;max-width:10.5ch}
  .ecosystem-stage{min-height:455px}
  .ecosystem-stage::after{inset:14% 7% 23% 7%;opacity:.28}
  .access-world::before{width:280px;height:280px;opacity:.18}
}

/* =========================================================
   ESVITA 28.2.0 · CLARIDAD QUE ALIVIA
   Hero nativo: complejidad -> claridad, sin órbitas genéricas.
   ========================================================= */
.ecosystem-hero{
  min-height:calc(100svh - 76px);
  padding:clamp(58px,7vh,92px) 0 clamp(56px,7vh,86px);
  background:
    radial-gradient(circle at 83% 22%,rgba(62,157,186,.12),transparent 27%),
    radial-gradient(circle at 67% 82%,rgba(117,203,151,.08),transparent 30%),
    linear-gradient(135deg,#041018 0%,#061720 52%,#071b23 100%);
}
.ecosystem-hero::before{
  opacity:.10;
  background-size:92px 92px;
  mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 82%,transparent);
}
.ecosystem-hero-grid{
  grid-template-columns:minmax(510px,.93fr) minmax(560px,1.07fr);
  gap:clamp(38px,4.2vw,78px);
  align-items:center;
}
.ecosystem-hero-copy{
  max-width:760px;
  padding:20px 0 10px;
}
.ecosystem-hero-copy .micro{
  color:#a8c6ce;
  letter-spacing:.15em;
}
.ecosystem-hero h1{
  max-width:720px;
  margin:22px 0 26px;
  font-size:clamp(3.35rem,5.55vw,6.05rem);
  line-height:.94;
  letter-spacing:-.055em;
  text-wrap:balance;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}
.ecosystem-hero h1 em{
  display:block;
  margin-top:.08em;
  font-size:.86em;
  line-height:.98;
  background:linear-gradient(102deg,#51b3ce 2%,#63c6b4 49%,#98d98a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ecosystem-hero-statement{
  max-width:590px;
  margin:0 0 14px;
  font-size:clamp(1.35rem,1.75vw,1.95rem);
  line-height:1.17;
  letter-spacing:-.032em;
  color:#f0f7f8;
}
.ecosystem-hero-lead{
  max-width:670px;
  color:#b8cdd3;
  font-size:clamp(1rem,1.12vw,1.16rem);
  line-height:1.68;
}
.ecosystem-whisper{color:#90a8b0;margin-top:22px}

/* The visual metaphor is not a network: it is a conversion from scattered work to useful clarity. */
.clarity-stage{
  position:relative;
  min-height:650px;
  border-radius:42px;
  overflow:hidden;
  isolation:isolate;
  border:1px solid rgba(175,224,226,.09);
  background:
    radial-gradient(circle at 48% 51%,rgba(77,185,189,.12),transparent 18%),
    radial-gradient(circle at 82% 35%,rgba(114,201,153,.09),transparent 22%),
    linear-gradient(145deg,rgba(12,38,49,.72),rgba(4,18,26,.42));
  box-shadow:0 34px 100px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.025);
}
.clarity-stage::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:radial-gradient(circle,rgba(129,202,205,.15) .8px,transparent .9px);
  background-size:31px 31px;
  opacity:.16;
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.7) 46%,transparent 88%);
}
.clarity-stage::after{
  content:"";
  position:absolute;
  width:520px;height:520px;
  left:42%;top:51%;translate:-50% -50%;
  z-index:0;
  border-radius:48% 52% 59% 41% / 46% 38% 62% 54%;
  background:conic-gradient(from 215deg,rgba(57,155,187,.04),rgba(70,182,187,.16),rgba(120,204,151,.13),rgba(57,155,187,.04));
  filter:blur(36px);
  animation:clarityMatter 14s ease-in-out infinite alternate;
}
.clarity-stage-label{
  position:absolute;left:30px;right:30px;top:25px;z-index:8;
  display:flex;align-items:center;gap:12px;
  font-size:.62rem;font-weight:900;letter-spacing:.17em;color:#78959e;
}
.clarity-stage-label i{height:1px;flex:1;background:linear-gradient(90deg,rgba(89,181,194,.18),rgba(115,204,158,.38))}
.clarity-stage-label strong{color:#73cbb0;font-size:inherit}
.clarity-flow{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.clarity-flow path{fill:none;stroke-width:1.4;stroke-linecap:round}
.clarity-flow .flow-in{stroke:rgba(103,183,194,.20);stroke-dasharray:3 9;animation:clarityDash 14s linear infinite}
.clarity-flow .flow-out{stroke:url(#clarityGradient);stroke-width:2;opacity:.72;filter:drop-shadow(0 0 6px rgba(94,198,178,.2))}
.clarity-flow circle{fill:#76cbb0;filter:drop-shadow(0 0 5px rgba(110,211,183,.62))}

.clarity-inputs{position:absolute;left:4%;top:12%;bottom:13%;width:31%;z-index:4;pointer-events:none}
.clarity-fragment{
  position:absolute;
  display:inline-flex;align-items:center;
  min-height:34px;padding:8px 12px;
  border-radius:11px;
  border:1px solid rgba(184,220,225,.10);
  background:rgba(12,37,47,.62);
  color:#92abb3;
  font-size:.68rem;font-weight:760;letter-spacing:.06em;
  box-shadow:0 12px 34px rgba(0,0,0,.10);
  backdrop-filter:blur(10px);
  animation:clarityFloat 7s ease-in-out infinite;
}
.clarity-fragment::before{content:"";width:6px;height:6px;border-radius:50%;margin-right:7px;background:#4ca5bd;opacity:.75}
.cf-1{left:5%;top:9%;animation-delay:-1s}.cf-2{right:2%;top:24%;animation-delay:-3.4s}.cf-3{left:0;top:43%;animation-delay:-5s}.cf-4{right:0;top:57%;animation-delay:-1.9s}.cf-5{left:8%;bottom:17%;animation-delay:-4.2s}.cf-6{right:10%;bottom:2%;animation-delay:-2.7s}

.clarity-core{
  position:absolute;left:47%;top:50%;translate:-50% -50%;z-index:6;
  width:178px;height:178px;border-radius:34px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(7,32,42,.96),rgba(10,46,51,.90));
  border:1px solid rgba(154,220,218,.18);
  box-shadow:0 30px 80px rgba(0,0,0,.30),0 0 0 14px rgba(91,194,181,.028),inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .35s ease;
}
.clarity-core img{width:94px;z-index:2;filter:drop-shadow(0 16px 26px rgba(54,162,183,.18))}
.clarity-core small{position:absolute;bottom:18px;font-size:.58rem;font-weight:900;letter-spacing:.20em;color:#9ac7ca}
.clarity-core-aura{position:absolute;inset:-31px;border-radius:46px;border:1px solid rgba(91,196,183,.09);animation:clarityBreathe 5s ease-in-out infinite}

.clarity-outputs{
  position:absolute;right:4.2%;top:16%;bottom:21%;width:31%;z-index:5;
  display:flex;flex-direction:column;justify-content:center;gap:13px;
}
.clarity-output{
  position:relative;width:100%;text-align:left;cursor:pointer;
  padding:15px 16px 15px 48px;
  border-radius:17px;border:1px solid rgba(172,218,220,.10);
  background:rgba(7,28,37,.62);color:#e4f0f2;
  backdrop-filter:blur(12px);
  transition:transform .24s ease,border-color .24s ease,background .24s ease,box-shadow .24s ease;
}
.clarity-output small{position:absolute;left:15px;top:17px;font-size:.57rem;font-weight:900;color:#5ebaa9;letter-spacing:.08em}
.clarity-output span{display:block;font-size:.62rem;font-weight:900;letter-spacing:.14em;color:#6ecab5;margin-bottom:4px}
.clarity-output strong{display:block;font-size:.84rem;line-height:1.35;color:#dcebee}
.clarity-output:hover,.clarity-output.is-active{transform:translateX(5px);border-color:rgba(104,209,184,.30);background:rgba(14,51,56,.78);box-shadow:0 14px 38px rgba(0,0,0,.15)}
.clarity-output.is-active::after{content:"";position:absolute;right:12px;top:12px;width:6px;height:6px;border-radius:50%;background:#7dd29f;box-shadow:0 0 0 5px rgba(125,210,159,.06)}

.clarity-relief{
  position:absolute;left:50%;bottom:29px;translate:-50% 0;z-index:7;
  width:min(520px,76%);padding:15px 18px;border-radius:18px;
  text-align:center;background:rgba(5,21,29,.70);border:1px solid rgba(173,220,222,.10);backdrop-filter:blur(14px);
}
.clarity-relief span{display:block;margin-bottom:5px;font-size:.58rem;font-weight:900;letter-spacing:.16em;color:#6dcbb5}
.clarity-relief strong{display:block;font-size:.86rem;line-height:1.4;color:#e8f2f4}
.clarity-relief.is-changing{animation:ecoInsight .34s ease}

@keyframes clarityFloat{0%,100%{transform:translate3d(0,0,0);opacity:.72}50%{transform:translate3d(5px,-8px,0);opacity:1}}
@keyframes clarityDash{to{stroke-dashoffset:-180}}
@keyframes clarityBreathe{0%,100%{transform:scale(.96);opacity:.48}50%{transform:scale(1.06);opacity:1}}
@keyframes clarityMatter{0%{transform:rotate(-5deg) scale(.96)}100%{transform:rotate(8deg) scale(1.05)}}

@media (max-width:1260px){
  .ecosystem-hero-grid{grid-template-columns:minmax(470px,.95fr) minmax(500px,1.05fr);gap:32px}
  .ecosystem-hero h1{font-size:clamp(3.2rem,5.2vw,5.45rem)}
  .clarity-stage{min-height:610px}
  .clarity-core{left:46%;width:158px;height:158px}.clarity-core img{width:82px}
  .clarity-output{padding-left:43px}.clarity-output strong{font-size:.77rem}
}
@media (max-width:1120px){
  .ecosystem-hero{padding-top:54px}
  .ecosystem-hero-grid{grid-template-columns:1fr;gap:42px}
  .ecosystem-hero-copy{max-width:850px;padding-top:0}
  .ecosystem-hero h1{max-width:850px;font-size:clamp(3.8rem,9vw,6.6rem)}
  .ecosystem-hero h1 em{font-size:.84em}
  .ecosystem-hero-statement{max-width:700px}
  .clarity-stage{width:min(900px,100%);min-height:600px;margin-inline:auto}
}
@media (max-width:720px){
  .ecosystem-hero{padding:42px 0 58px}
  .ecosystem-hero-grid{gap:30px}
  .ecosystem-hero h1{font-size:clamp(3rem,13.2vw,5rem);line-height:.96;letter-spacing:-.05em}
  .ecosystem-hero h1 em{font-size:.80em}
  .ecosystem-hero-lead{line-height:1.6}
  .clarity-stage{min-height:570px;border-radius:30px}
  .clarity-stage-label{left:18px;right:18px;top:18px}
  .clarity-inputs{left:3%;top:12%;width:36%;bottom:23%}
  .clarity-fragment{min-height:28px;padding:6px 8px;font-size:.56rem;border-radius:9px}.clarity-fragment::before{width:5px;height:5px;margin-right:5px}
  .clarity-core{left:50%;top:45%;width:126px;height:126px;border-radius:28px}.clarity-core img{width:66px}.clarity-core small{bottom:11px;font-size:.49rem}.clarity-core-aura{inset:-22px;border-radius:36px}
  .clarity-outputs{right:3%;top:13%;bottom:25%;width:36%;gap:9px}
  .clarity-output{padding:10px 9px 10px 31px;border-radius:13px}.clarity-output small{left:10px;top:12px;font-size:.49rem}.clarity-output span{font-size:.51rem}.clarity-output strong{font-size:.66rem}
  .clarity-relief{bottom:20px;width:88%;padding:12px 13px}.clarity-relief strong{font-size:.75rem}
}
@media (max-width:480px){
  .ecosystem-hero h1{font-size:clamp(2.75rem,13.4vw,4.1rem)}
  .ecosystem-hero-statement{font-size:1.25rem}
  .clarity-stage{min-height:525px}
  .clarity-inputs{top:13%;width:38%}.clarity-outputs{width:39%;right:2%}
  .cf-2,.cf-4{display:none}
  .clarity-core{width:112px;height:112px}.clarity-core img{width:58px}
}
@media (prefers-reduced-motion:reduce){
  .clarity-fragment,.clarity-core-aura,.clarity-stage::after,.clarity-flow .flow-in{animation:none!important}
}

/* 28.2.0 final art direction: the clarity scene belongs to the hero, it is not a card. */
.clarity-stage{
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}
.clarity-stage::before{
  inset:-5% -8%;
  opacity:.14;
  mask-image:radial-gradient(ellipse at 48% 50%,#000 0%,rgba(0,0,0,.75) 46%,transparent 76%);
}
.clarity-stage::after{
  width:610px;height:610px;
  background:conic-gradient(from 215deg,rgba(57,155,187,.01),rgba(70,182,187,.17),rgba(120,204,151,.14),rgba(57,155,187,.01));
  filter:blur(44px);
  opacity:.72;
}
.clarity-stage-label{left:5%;right:4%;top:18px}
.clarity-relief{background:rgba(5,21,29,.56)}
@media (max-width:1120px){.clarity-stage{overflow:hidden;border-radius:34px;background:linear-gradient(145deg,rgba(12,38,49,.26),rgba(4,18,26,.08))}}