.ecosystem-page { --module-accent:var(--orange); --module-soft:color-mix(in srgb,var(--module-accent) 10%,transparent); background:var(--paper); }
.ecosystem-page[data-module="pay"] { --module-accent:#168bff; }
.ecosystem-page[data-module="pass"] { --module-accent:#d6ad00; }
.ecosystem-page[data-module="studio"] { --module-accent:#9b5cff; }
.ecosystem-page[data-module="portal"] { --module-accent:#8178ee; }
.ecosystem-page[data-module="web"] { --module-accent:#19b94b; }
.ecosystem-page[data-module="cloud"] { --module-accent:#35c7ff; }
.ecosystem-page[data-module="welcome"] { --module-accent:#444448; }
.ecosystem-page[data-module="mail"] { --module-accent:#dc5e4a; }
.ecosystem-page a:focus-visible,.ecosystem-page button:focus-visible { outline:2px solid var(--module-accent); outline-offset:3px; }
.ecosystem-main { overflow:hidden; }
.ecosystem-nav .nav-links { margin-left:auto; }
.ecosystem-hero { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr); gap:clamp(48px,9vw,132px); align-items:center; min-height:calc(88svh - 76px); padding-block:clamp(76px,10vw,145px); }
.ecosystem-hero h1 { max-width:850px; font-size:clamp(3.8rem,7.7vw,8.6rem); }
.ecosystem-hero-copy>p:not(.eyebrow) { max-width:650px; color:var(--muted); font-size:1.1rem; line-height:1.7; }
.ecosystem-actions { display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-top:31px; }
.ecosystem-map { position:relative; min-height:520px; display:grid; place-items:center; isolation:isolate; }
.ecosystem-map::before,.ecosystem-map::after { content:""; position:absolute; border:1px solid color-mix(in srgb,var(--module-accent) 42%,var(--line)); border-radius:50%; }
.ecosystem-map::before { width:440px; height:440px; box-shadow:inset 0 0 0 78px color-mix(in srgb,var(--module-accent) 5%,transparent); }
.ecosystem-map::after { width:250px; height:250px; }
.ecosystem-core { position:relative; z-index:2; width:126px; height:126px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:var(--paper); font-size:1.2rem; font-weight:720; letter-spacing:-.04em; box-shadow:0 24px 55px rgba(0,0,0,.18); }
.ecosystem-node { position:absolute; z-index:3; min-width:92px; padding:9px 13px; border:1px solid var(--line); border-radius:999px; background:var(--paper); color:var(--muted); font-size:.72rem; font-weight:680; text-align:center; box-shadow:0 12px 30px rgba(0,0,0,.08); }
.node-one{top:10%;left:39%}.node-two{top:30%;right:2%}.node-three{bottom:19%;right:8%}.node-four{bottom:7%;left:30%}.node-five{bottom:31%;left:0}.node-six{top:25%;left:5%}
.ecosystem-section { padding-block:clamp(88px,12vw,158px); border-top:1px solid var(--line); }
.ecosystem-section.surface { background:color-mix(in srgb,var(--surface) 70%,var(--paper)); }
.ecosystem-heading { display:grid; grid-template-columns:1fr .7fr; gap:clamp(38px,9vw,135px); align-items:end; margin-bottom:clamp(46px,7vw,78px); }
.ecosystem-heading p:last-child { max-width:560px; margin:0; color:var(--muted); line-height:1.7; }
.flow-board { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; align-items:stretch; }
.flow-step { position:relative; min-height:160px; padding:21px; border:1px solid var(--line); border-radius:14px; background:var(--paper); }
.flow-step:not(:last-child)::after { content:"→"; position:absolute; z-index:2; right:-17px; top:50%; width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:var(--paper); font-size:.75rem; }
.flow-step span { color:var(--module-accent); font-size:.68rem; font-weight:750; letter-spacing:.1em; text-transform:uppercase; }
.flow-step h3 { margin:23px 0 8px; font-size:1.05rem; }
.flow-step p { margin:0; color:var(--muted); font-size:.82rem; line-height:1.5; }
.scale-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.scale-card { min-height:260px; padding:27px; border:1px solid var(--line); border-radius:16px; background:var(--paper); }
.scale-card b { color:var(--module-accent); font-size:.7rem; letter-spacing:.12em; }
.scale-card h3 { margin:54px 0 13px; font-size:1.35rem; }
.scale-card p { margin:0; color:var(--muted); font-size:.9rem; line-height:1.6; }
.module-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.module-card { --card-accent:var(--orange); position:relative; min-height:300px; display:flex; flex-direction:column; padding:27px; overflow:hidden; border:1px solid var(--line); border-radius:17px; background:var(--paper); transition:transform .25s ease,border-color .25s ease; }
.module-card:hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--card-accent) 52%,var(--line)); }
.module-card::before { content:""; position:absolute; inset:0 0 auto; height:4px; background:var(--card-accent); }
.module-card[data-module="pay"]{--card-accent:#168bff}.module-card[data-module="pass"]{--card-accent:#d6ad00}.module-card[data-module="studio"]{--card-accent:#9b5cff}.module-card[data-module="portal"]{--card-accent:#8178ee}.module-card[data-module="web"]{--card-accent:#19b94b}.module-card[data-module="cloud"]{--card-accent:#35c7ff}
.module-card[data-module="welcome"]{--card-accent:#444448}.module-card[data-module="mail"]{--card-accent:#dc5e4a}
.module-status { position:absolute; top:27px; right:27px; color:var(--card-accent); font-size:.62rem; font-weight:760; letter-spacing:.09em; text-transform:uppercase; }
.module-mark { width:42px; height:42px; display:grid; place-items:center; border-radius:11px; background:color-mix(in srgb,var(--card-accent) 13%,transparent); color:var(--card-accent); font-size:.72rem; font-weight:800; }
.module-logo { width:min(100%,205px); min-height:71px; display:flex; align-items:center; }
.module-logo img { display:block; width:100%; height:auto; object-fit:contain; }
.module-card h3 { margin:auto 0 10px; font-size:1.55rem; }
.module-card p { margin:0 0 24px; color:var(--muted); font-size:.88rem; line-height:1.58; }
.module-link { display:flex; align-items:center; justify-content:space-between; color:var(--card-accent); font-size:.78rem; font-weight:700; }
.ecosystem-cta { display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end; padding:clamp(42px,7vw,78px); border-radius:20px; background:var(--ink); color:var(--paper); }
.ecosystem-cta h2 { max-width:760px; margin:0; }
.ecosystem-cta p { max-width:620px; color:color-mix(in srgb,var(--paper) 67%,transparent); }
.ecosystem-cta .button { background:var(--module-accent); border-color:var(--module-accent); color:white; }
.module-hero { min-height:calc(82svh - 76px); }
.module-hero h1 { font-size:clamp(4.4rem,9vw,10rem); }
.module-hero h1 em { color:var(--module-accent); }
.module-symbol { position:relative; width:min(88%,430px); aspect-ratio:1; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--module-accent) 48%,var(--line)); border-radius:50%; color:var(--module-accent); font-size:clamp(2.5rem,7vw,5rem); font-weight:760; box-shadow:inset 0 0 0 74px color-mix(in srgb,var(--module-accent) 6%,transparent); }
.module-symbol::after { content:""; position:absolute; width:34%; aspect-ratio:1; right:-7%; bottom:3%; border:1px solid var(--module-accent); border-radius:50%; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.feature-card { min-height:240px; padding:25px; border:1px solid var(--line); border-radius:15px; background:var(--paper); }
.feature-card span { color:var(--module-accent); font-size:.7rem; font-weight:780; }
.feature-card h3 { margin:43px 0 12px; font-size:1.24rem; }
.feature-card p { margin:0; color:var(--muted); font-size:.86rem; line-height:1.58; }
.web-support-grid .feature-card{display:flex;flex-direction:column}.web-support-grid .feature-card .text-link{margin-top:auto;padding-top:24px}
.use-case-list { display:grid; grid-template-columns:1fr 1fr; gap:1px; overflow:hidden; border:1px solid var(--line); border-radius:17px; background:var(--line); }
.use-case { min-height:205px; padding:27px; background:var(--paper); }
.use-case span { color:var(--module-accent); font-size:.7rem; font-weight:750; }
.use-case h3 { margin:27px 0 9px; font-size:1.18rem; }
.use-case p { margin:0; color:var(--muted); font-size:.86rem; line-height:1.58; }
.integration-list { display:flex; flex-wrap:wrap; gap:9px; padding:0; list-style:none; }
.integration-list a,.integration-list span { display:inline-flex; padding:10px 14px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:.78rem; font-weight:650; }
.integration-list a:hover { color:var(--module-accent); border-color:currentColor; }
.legal-note { margin-top:25px; padding:16px 18px; border-left:3px solid var(--module-accent); background:var(--module-soft); color:var(--muted); font-size:.8rem; line-height:1.6; }
.architecture-board { display:grid; grid-template-columns:minmax(0,1fr) 160px minmax(0,1fr); gap:18px; align-items:stretch; }
.architecture-group { display:grid; gap:9px; padding:18px; border:1px solid var(--line); border-radius:17px; background:var(--paper); }
.architecture-group>span { color:var(--muted); font-size:.68rem; font-weight:760; letter-spacing:.11em; text-transform:uppercase; }
.architecture-modules { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.architecture-module { min-height:92px; display:grid; align-content:end; padding:14px; border:1px solid var(--line); border-radius:11px; background:var(--surface); }
.architecture-module b { font-size:.9rem; }.architecture-module small { margin-top:4px; color:var(--muted); font-size:.7rem; line-height:1.4; }
.architecture-portal { position:relative; display:grid; place-items:center; padding:20px 12px; border-radius:17px; background:#8178ee; color:#fff; text-align:center; }
.architecture-portal::before,.architecture-portal::after { content:"↔"; position:absolute; top:50%; transform:translateY(-50%); color:var(--muted); }
.architecture-portal::before { left:-17px; }.architecture-portal::after { right:-17px; }
.architecture-portal strong { display:block; font-size:1.2rem; }.architecture-portal small { display:block; margin-top:8px; color:rgba(255,255,255,.74); font-size:.72rem; line-height:1.45; }
.architecture-cloud { display:grid; align-content:center; gap:12px; padding:26px; border:1px solid color-mix(in srgb,#35c7ff 40%,var(--line)); border-radius:17px; background:color-mix(in srgb,#35c7ff 7%,var(--paper)); }
.architecture-cloud span { color:#1686aa; font-size:.68rem; font-weight:760; letter-spacing:.11em; text-transform:uppercase; }.architecture-cloud h3 { margin:0; }.architecture-cloud p { margin:0; color:var(--muted); font-size:.82rem; line-height:1.55; }
.portal-capability-list { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; overflow:hidden; border:1px solid var(--line); border-radius:17px; background:var(--line); }
.portal-capability { min-height:220px; padding:27px; background:var(--paper); }
.portal-capability span { color:var(--module-accent); font-size:.68rem; font-weight:760; letter-spacing:.08em; }.portal-capability h3 { margin:30px 0 10px; font-size:1.18rem; }.portal-capability p { margin:0; color:var(--muted); font-size:.85rem; line-height:1.6; }
.lifecycle { display:grid; grid-template-columns:repeat(6,1fr); gap:1px; overflow:hidden; border:1px solid var(--line); border-radius:17px; background:var(--line); }
.lifecycle-step { min-height:205px; padding:22px 18px; background:var(--paper); }
.lifecycle-step span { color:var(--module-accent); font-size:.68rem; font-weight:780; }.lifecycle-step h3 { margin:42px 0 10px; font-size:1rem; }.lifecycle-step p { margin:0; color:var(--muted); font-size:.78rem; line-height:1.55; }
.technology-spectrum { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.technology-spectrum article { min-height:195px; display:flex; flex-direction:column; padding:24px; border:1px solid var(--line); border-radius:15px; background:var(--paper); }
.technology-spectrum span { color:var(--module-accent); font-size:.68rem; font-weight:780; letter-spacing:.08em; }.technology-spectrum h3 { margin:auto 0 10px; font-size:1.12rem; }.technology-spectrum p { margin:0; color:var(--muted); font-size:.82rem; line-height:1.55; }
.cloud-fabric { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); gap:12px; margin-bottom:12px; }
.cloud-fabric-modules { padding:22px; border:1px solid var(--line); border-radius:17px; background:var(--paper); }
.cloud-fabric-modules>span,.cloud-fabric-core>span { display:block; margin-bottom:16px; color:var(--muted); font-size:.68rem; font-weight:760; letter-spacing:.11em; text-transform:uppercase; }
.cloud-fabric-modules>div { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.cloud-fabric-modules a { min-height:112px; display:flex; flex-direction:column; justify-content:flex-end; padding:15px; border:1px solid var(--line); border-radius:12px; background:var(--surface); transition:border-color .2s ease,transform .2s ease; }
.cloud-fabric-modules a:hover { transform:translateY(-2px); border-color:var(--module-accent); }
.cloud-fabric-modules b { font-size:.92rem; }.cloud-fabric-modules small { margin-top:5px; color:var(--muted); font-size:.7rem; line-height:1.4; }
.cloud-fabric-core { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding:30px; border-radius:17px; background:color-mix(in srgb,var(--module-accent) 18%,var(--ink)); color:#fff; }
.cloud-fabric-core::before { content:""; position:absolute; width:230px; height:230px; top:-105px; right:-80px; border:1px solid rgba(255,255,255,.28); border-radius:50%; box-shadow:inset 0 0 0 42px rgba(255,255,255,.035); }
.cloud-fabric-core>span { color:rgba(255,255,255,.64); }.cloud-fabric-core strong { position:relative; font-size:clamp(2rem,4vw,3.4rem); line-height:.95; letter-spacing:-.055em; }.cloud-fabric-core p { position:relative; margin:18px 0 0; color:rgba(255,255,255,.72); font-size:.82rem; line-height:1.6; }
.cloud-foundations { margin-top:12px; }
@media(max-width:900px){.flow-board{grid-template-columns:1fr 1fr}.flow-step:not(:last-child)::after{display:none}.scale-grid{grid-template-columns:1fr 1fr}.module-grid,.feature-grid{grid-template-columns:1fr 1fr}.ecosystem-hero{grid-template-columns:1fr}.ecosystem-map{min-height:440px}.ecosystem-heading{grid-template-columns:1fr}.ecosystem-cta{grid-template-columns:1fr}.architecture-board,.cloud-fabric{grid-template-columns:1fr}.architecture-portal::before,.architecture-portal::after{display:none}.lifecycle{grid-template-columns:repeat(3,1fr)}.technology-spectrum{grid-template-columns:1fr 1fr}.cloud-fabric-core{min-height:280px}}
@media(max-width:760px){.ecosystem-nav .nav-links{display:none}.ecosystem-hero{min-height:auto;padding-top:58px}.ecosystem-hero h1{font-size:clamp(3.3rem,16vw,5.3rem)}.ecosystem-map{min-height:390px;order:-1}.ecosystem-map::before{width:330px;height:330px}.ecosystem-map::after{width:190px;height:190px}.ecosystem-core{width:104px;height:104px}.node-one{top:4%}.node-two{right:-2%}.node-three{right:0}.node-five{left:-2%}.scale-grid,.module-grid,.feature-grid,.use-case-list,.flow-board,.portal-capability-list,.lifecycle,.technology-spectrum{grid-template-columns:1fr}.scale-card,.module-card{min-height:230px}.use-case,.portal-capability,.lifecycle-step{min-height:0}.module-symbol{width:min(78vw,350px)}.ecosystem-cta{padding:38px 26px}.architecture-modules,.cloud-fabric-modules>div{grid-template-columns:1fr}.cloud-fabric-modules a{min-height:88px}.cloud-fabric-core{min-height:245px}}