@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:var(--ds-ink);--night:#10151c;--night-soft:var(--ds-surface-strong);--cream:var(--ds-surface);--paper:var(--ds-bg);--muted:var(--ds-muted);--cyan:var(--ds-accent);--coral:var(--ds-coral);--violet:var(--ds-violet);--lime:var(--ds-lime);--amber:var(--ds-amber);--line:var(--ds-line);--white-line:var(--ds-line-on-dark);--sans:var(--ds-font-sans);--mono:var(--ds-font-mono)}
body{color:var(--ink)}
.section-dark h1,.section-dark h2,.section-dark h3,.section-dark strong,.section-dark b,.system-card strong,.puzzle-piece b,.puzzle-piece small{color:#f7f8f4}
.section-dark p,.system-card small,.puzzle-piece small{color:rgba(255,255,255,.58)}
.section-light h1,.section-light h2,.section-light h3,.section-light strong,.section-light b,.section-cream h1,.section-cream h2,.section-cream h3,.section-cream strong,.section-cream b{color:var(--ink)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}.scroll-progress{height:3px;position:fixed;top:0;left:0;right:0;z-index:20;background:transparent}.scroll-progress span{display:block;height:100%;width:0;background:var(--cyan);transition:width .08s linear}.site-header{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,5vw,80px);position:fixed;z-index:10;top:0;left:0;right:0;color:#fff;transition:background .3s,backdrop-filter .3s}.site-header.is-scrolled{background:rgba(16,21,28,.86);backdrop-filter:blur(18px);border-bottom:1px solid var(--white-line)}.brand{display:inline-flex;align-items:center;gap:11px;font-weight:800;font-size:20px;letter-spacing:-.06em}.brand-mark{display:flex;align-items:flex-end;gap:3px;height:23px}.brand-mark i{display:block;width:5px;border-radius:4px;background:var(--cyan);transform:skew(-17deg)}.brand-mark i:nth-child(1){height:12px}.brand-mark i:nth-child(2){height:19px;background:var(--coral)}.brand-mark i:nth-child(3){height:15px;background:var(--violet)}.desktop-nav{display:flex;gap:34px;margin-left:auto;margin-right:40px;font-size:13px;color:rgba(255,255,255,.72)}.desktop-nav a:hover,.text-link:hover{color:var(--cyan)}.header-action{font-size:13px;border:1px solid var(--white-line);padding:10px 15px;border-radius:99px}.header-action span{color:var(--cyan);margin-left:12px}.menu-toggle,.mobile-nav{display:none}.section-dark{background:var(--night);color:#f7f8f4}.section-light{background:var(--paper)}.section-cream{background:var(--cream)}.container{width:min(1220px,calc(100% - 48px));margin:auto}.snap-section{min-height:100svh;display:flex;align-items:center;position:relative;overflow:hidden}.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.57);margin:0 0 23px}.eyebrow-dark{color:#77766e}.eyebrow-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cyan);margin-right:8px;box-shadow:0 0 0 4px rgba(126,240,220,.13)}h1,h2,h3,p{margin-top:0}h1,h2,h3{letter-spacing:-.065em}h1{font-size:clamp(46px,7vw,94px);line-height:.98;font-weight:600;max-width:820px;margin-bottom:29px}h2{font-size:clamp(42px,5vw,72px);line-height:1.03;font-weight:600;margin-bottom:27px}h3{font-size:30px;line-height:1.05;margin-bottom:17px}em{font-style:normal;color:var(--cyan)}.section-light em,.section-cream em{color:#7266d7}.hero{padding-top:82px}.hero-grid{position:absolute;inset:0;opacity:.34;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:75px 75px;mask-image:linear-gradient(90deg,#000,transparent 78%)}.hero-orbit{position:absolute;border:1px solid rgba(126,240,220,.18);border-radius:50%;aspect-ratio:1;filter:blur(.2px)}.orbit-one{width:min(57vw,720px);right:-14vw;top:9vh}.orbit-two{width:min(40vw,520px);right:4vw;top:25vh;border-color:rgba(255,140,120,.2)}.hero-layout{display:grid;grid-template-columns:1.02fr .98fr;gap:40px;align-items:center;position:relative}.hero-lede{color:rgba(255,255,255,.63);font-size:17px;max-width:540px;line-height:1.7;margin-bottom:34px}.hero-actions{display:flex;align-items:center;gap:27px}.button{display:inline-flex;align-items:center;gap:28px;border-radius:999px;padding:15px 18px 15px 22px;font-size:13px;font-weight:700}.button-bright{background:var(--cyan);color:var(--night);box-shadow:0 10px 30px rgba(126,240,220,.17)}.button-bright span{font-size:18px}.text-link{color:rgba(255,255,255,.72);font-size:13px}.text-link span{color:var(--coral);margin-left:10px;font-size:18px}.hero-visual{height:570px;position:relative}.system-card{position:absolute;background:rgba(27,36,46,.9);border:1px solid rgba(255,255,255,.16);box-shadow:20px 30px 70px rgba(0,0,0,.3);border-radius:16px}.system-card-main{left:16%;top:18%;width:min(360px,78%);padding:30px;transform:rotate(-5deg)}.card-kicker{display:block;font:11px var(--mono);letter-spacing:.1em;color:var(--cyan);text-transform:uppercase;margin-bottom:60px}.system-card strong{display:block;font-size:35px;line-height:1.05;letter-spacing:-.06em}.system-card strong span{color:var(--coral)}.system-card small{display:block;color:rgba(255,255,255,.46);font:10px var(--mono);margin-top:22px}.pulse-line{height:42px;display:flex;align-items:center;gap:6px;margin-top:25px;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}.pulse-line i{display:block;width:18%;height:2px;background:var(--cyan);opacity:.8}.pulse-line i:nth-child(2){height:17px;transform:skew(-30deg);background:var(--coral)}.pulse-line i:nth-child(3){height:30px;transform:skew(30deg);background:var(--violet)}.pulse-line i:nth-child(4){height:10px;background:var(--lime)}.floating-card{position:absolute;background:#f8f7f2;color:var(--ink);display:flex;align-items:center;gap:10px;padding:13px 17px;border-radius:10px;box-shadow:0 15px 35px rgba(0,0,0,.22);font-size:12px}.floating-card b,.floating-card small{display:block}.floating-card small{font-size:10px;color:var(--muted);margin-top:2px}.floating-chat{right:1%;top:18%;transform:rotate(7deg)}.floating-docu{right:7%;bottom:18%;transform:rotate(-8deg)}.mini-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;font-size:20px}.cyan{background:#d7fcf5;color:#008f7e}.coral{background:#ffe1da;color:#d15c4a}.visual-node{position:absolute;width:10px;height:10px;border-radius:50%;border:2px solid var(--cyan);background:var(--night);box-shadow:0 0 0 7px rgba(126,240,220,.08)}.node-a{top:6%;left:48%}.node-b{bottom:13%;left:21%;border-color:var(--coral)}.node-c{top:49%;right:9%;border-color:var(--violet)}.scroll-cue{position:absolute;left:clamp(24px,5vw,80px);bottom:32px;display:flex;gap:16px;align-items:center;color:rgba(255,255,255,.45);font:10px var(--mono);text-transform:uppercase;letter-spacing:.1em}.scroll-cue i{font-style:normal;color:var(--cyan);font-size:17px}.section-intro{padding:130px 0}.split-layout{display:grid;grid-template-columns:1fr 1.7fr 1fr;gap:40px}.section-index{font:11px var(--mono);color:var(--muted);padding-top:13px}.section-index span{opacity:.4}.intro-copy{grid-column:2}.intro-copy>p:not(.eyebrow){max-width:580px;color:#666a6d;font-size:17px;line-height:1.75}.arrow-link{display:inline-flex;gap:25px;align-items:center;margin-top:19px;font-size:13px;font-weight:800}.arrow-link span{font-size:20px;color:#7266d7}.principle-card{grid-column:3;padding:26px 0 0 27px;border-left:1px solid var(--line)}.principle-card strong{display:block;font-size:18px;margin-bottom:4px}.principle-card p{color:var(--muted);font-size:12px;margin:0 0 26px}.principle-number{font:10px var(--mono);color:#7266d7;margin-bottom:5px}.solutions-section{padding:130px 0}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:58px}.heading-note{max-width:325px;color:rgba(255,255,255,.49);font-size:13px;line-height:1.7;margin:0 0 7px}.solution-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}.solution-card{min-height:270px;padding:23px 22px;position:relative;border:1px solid var(--white-line);border-radius:12px;background:rgba(255,255,255,.025);transition:transform .3s,border-color .3s,background .3s}.solution-card:hover{transform:translateY(-6px);border-color:rgba(126,240,220,.5);background:rgba(126,240,220,.05)}.solution-feature{grid-column:span 2;grid-row:span 2;min-height:360px;background:var(--night-soft);border-color:rgba(126,240,220,.25)}.solution-card:nth-child(2),.solution-card:nth-child(3){grid-column:span 2}.solution-card:nth-child(4),.solution-card:nth-child(5){grid-column:span 2}.solution-top{font:10px var(--mono);text-transform:uppercase;color:rgba(255,255,255,.45);display:flex;gap:11px;align-items:center;margin-bottom:42px}.solution-icon{width:31px;height:31px;border-radius:8px;display:grid;place-items:center;font-size:19px}.icon-cyan{background:rgba(126,240,220,.13);color:var(--cyan)}.icon-violet{background:rgba(176,156,255,.16);color:var(--violet)}.icon-coral{background:rgba(255,140,120,.15);color:var(--coral)}.icon-lime{background:rgba(199,242,110,.15);color:var(--lime)}.icon-amber{background:rgba(247,199,104,.15);color:var(--amber)}.solution-card h3{font-size:25px}.solution-card p{font-size:12px;color:rgba(255,255,255,.48);line-height:1.65;max-width:240px}.solution-card>a{position:absolute;bottom:19px;right:22px;font-size:22px;color:var(--cyan)}.card-lines{position:absolute;bottom:0;left:0;width:45%;height:1px;background:var(--cyan);opacity:.5}.systems-section{padding:130px 0}.systems-heading .heading-note{color:#777}.showcase{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.showcase-label{padding:16px 0;font:10px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:#89867c;display:flex;gap:15px;align-items:center}.showcase-label span{height:1px;width:38px;background:#89867c}.showcase-main{min-height:360px;display:grid;grid-template-columns:1fr 1.4fr 1fr;align-items:center;position:relative;overflow:hidden}.showcase-mark{font-size:clamp(120px,17vw,220px);font-weight:800;letter-spacing:-.16em;color:var(--coral);line-height:.75}.showcase-mark span{color:var(--violet);font-size:.34em;vertical-align:top}.showcase-main h3{font-size:55px;margin-bottom:12px}.showcase-main p:not(.eyebrow){color:#666;max-width:385px;font-size:14px}.showcase-orbit{height:275px;position:relative}.showcase-orbit div{position:absolute;border:1px solid rgba(114,102,215,.25);border-radius:50%;inset:14%;transform:rotate(26deg)}.showcase-orbit div:nth-child(2){inset:25%;transform:rotate(-35deg);border-color:rgba(255,140,120,.35)}.showcase-orbit div:nth-child(3){inset:42%;border-color:rgba(126,240,220,.45);background:var(--cyan)}.future-row{padding:22px 0;display:flex;justify-content:space-between;align-items:center;font-size:12px}.future-row span:first-child{font:10px var(--mono);color:#89867c;text-transform:uppercase}.future-row strong{font-size:13px}.future-dots{color:var(--coral);letter-spacing:4px}.faq-section{padding:130px 0}.faq-layout{align-items:start}.faq-intro>p:not(.eyebrow){max-width:390px;color:#777;font-size:14px;line-height:1.7}.faq-list{grid-column:3}.faq-list details{border-top:1px solid var(--line);padding:20px 0}.faq-list details:last-child{border-bottom:1px solid var(--line)}summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;font-weight:700;font-size:14px}summary::-webkit-details-marker{display:none}summary span{font-size:22px;font-weight:400;color:#7266d7;transition:transform .2s}details[open] summary span{transform:rotate(45deg)}details p{color:#777;font-size:13px;line-height:1.7;margin:13px 30px 0 0}.contact-section{min-height:75svh;text-align:center}.contact-inner{width:min(780px,calc(100% - 48px))}.contact-inner .eyebrow{justify-content:center;display:flex}.contact-inner h2{font-size:clamp(46px,6vw,80px)}.contact-inner>p:not(.eyebrow){color:rgba(255,255,255,.55);margin-bottom:30px}.site-footer{background:var(--night);color:#fff;padding:0 clamp(24px,5vw,80px) 27px}.footer-top{border-top:1px solid var(--white-line);padding:32px 0 50px;display:flex;justify-content:space-between;align-items:flex-start;gap:30px}.footer-top p{font-size:12px;color:rgba(255,255,255,.4);margin:4px auto 0}.footer-top nav{display:flex;gap:25px;font-size:12px;color:rgba(255,255,255,.6)}.footer-top nav small{display:block;color:var(--coral);font-size:8px}.footer-bottom{display:flex;justify-content:space-between;font:10px var(--mono);color:rgba(255,255,255,.3)}.reveal{opacity:0;transform:translateY(25px);transition:opacity .75s ease,transform .75s ease}.reveal.is-visible{opacity:1;transform:none}.reveal-delay{transition-delay:.12s}.reveal-delay-2{transition-delay:.24s}
@media(max-width:850px){.desktop-nav,.header-action{display:none}.menu-toggle{display:block;border:0;background:transparent;color:#fff;font-size:22px;cursor:pointer}.mobile-nav{position:absolute;display:flex;flex-direction:column;gap:20px;top:72px;right:24px;background:var(--night-soft);padding:22px 25px;border:1px solid var(--white-line);border-radius:12px;font-size:13px}.mobile-nav[hidden]{display:none}.hero-layout{grid-template-columns:1fr}.hero{padding:125px 0 80px}.hero-visual{height:370px;margin-top:20px}.system-card-main{left:7%;top:10%}.split-layout{grid-template-columns:1fr;gap:25px}.section-index{padding:0}.intro-copy,.principle-card,.faq-list{grid-column:auto}.principle-card{border-left:0;border-top:1px solid var(--line);padding:25px 0 0}.section-heading{display:block}.heading-note{margin-top:25px}.solution-grid{grid-template-columns:1fr 1fr}.solution-feature,.solution-card:nth-child(2),.solution-card:nth-child(3),.solution-card:nth-child(4),.solution-card:nth-child(5){grid-column:span 1;grid-row:auto}.solution-feature{min-height:270px}.showcase-main{grid-template-columns:1fr 1.5fr}.showcase-orbit{display:none}.footer-top{flex-wrap:wrap}.footer-top p{order:3;width:100%;margin:0}.footer-bottom{gap:15px;flex-direction:column}.snap-section{min-height:auto}.contact-section{min-height:80svh}}
@media(max-width:530px){.container{width:min(100% - 36px,1220px)}h1{font-size:49px}.hero-lede{font-size:15px}.hero-actions{align-items:flex-start;flex-direction:column;gap:18px}.hero-visual{height:310px}.system-card-main{padding:22px;left:0;width:82%}.system-card strong{font-size:28px}.floating-chat{right:0}.floating-docu{right:0;bottom:5%}.solutions-section,.systems-section,.faq-section,.section-intro{padding:90px 0}.solution-grid{grid-template-columns:1fr}.solution-feature,.solution-card:nth-child(2),.solution-card:nth-child(3),.solution-card:nth-child(4),.solution-card:nth-child(5){grid-column:span 1}.showcase-main{display:block;padding:35px 0}.showcase-mark{font-size:130px;margin-bottom:35px}.showcase-main h3{font-size:48px}.footer-top nav{flex-wrap:wrap;gap:15px}.contact-inner h2{font-size:48px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.solution-card{transition:none}}

/* Reuse the approved Adevto mark in the header and footer. */
.brand{gap:5px}.brand-mark{display:block;width:32px;height:32px;object-fit:contain;flex:0 0 32px}
.pulse-line span{display:block;width:18%;height:2px;background:var(--cyan);opacity:.8}.pulse-line span:nth-child(2){height:17px;transform:skew(-30deg);background:var(--coral)}.pulse-line span:nth-child(3){height:30px;transform:skew(30deg);background:var(--violet)}.pulse-line span:nth-child(4){height:10px;background:var(--lime)}

/* The intro copy and principles are the two visible columns of this section;
   there is no section-index element occupying the first grid track. */
.section-intro .intro-copy{grid-column:1 / 3}
@media(max-width:850px){.section-intro .intro-copy{grid-column:auto}}
.faq-section .faq-intro{grid-column:1 / 3}
@media(max-width:850px){.faq-section .faq-intro{grid-column:auto}}

/* The opening scene keeps its calls to action inside the first viewport, even on
   short laptop screens. The extra cards are intentionally quiet so the base
   remains the visual anchor. */
.hero{padding-top:82px;padding-bottom:0}
.hero-layout{min-height:calc(100svh - 115px)}
.hero-visual{height:min(570px,calc(100svh - 210px))}
.floating-people{left:-3%;top:37%;transform:rotate(-7deg)}
.floating-products{left:5%;bottom:7%;transform:rotate(6deg)}
.floating-access{left:20%;top:4%;transform:rotate(-5deg)}
.violet{background:#e8e2ff;color:#7160c9}.lime{background:#ebf8c9;color:#719327}.amber{background:#fff0c9;color:#a27419}
.solution-card:nth-child(6),.solution-card:nth-child(7),.solution-card:nth-child(8){grid-column:span 2}
@media(max-width:850px){.hero-layout{min-height:0}.hero-visual{height:370px}.floating-people,.floating-products,.floating-access{display:none}.solution-card:nth-child(6),.solution-card:nth-child(7),.solution-card:nth-child(8){grid-column:span 1}}
@media(max-width:530px){.hero{min-height:100svh;padding-top:110px;padding-bottom:70px}.hero-layout{min-height:0}.hero-visual{height:310px}.scroll-cue{bottom:18px}}

/* Stable puzzle composition for the hero. Every piece owns a grid cell, so the
   visual keeps its hierarchy instead of relying on overlapping floating cards. */
.puzzle-board{width:min(100%,570px);height:500px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:12px;position:relative;transform:rotate(-1deg)}
.puzzle-board::before{content:"";position:absolute;inset:4%;border:1px solid rgba(126,240,220,.13);border-radius:28px;pointer-events:none}
.puzzle-piece{position:relative;z-index:1;display:flex;align-items:center;gap:10px;min-width:0;padding:12px 13px;border:1px solid rgba(255,255,255,.14);border-radius:13px;background:#f8f7f2;color:var(--ink);box-shadow:0 15px 30px rgba(0,0,0,.2);font-size:11px}
.puzzle-piece::before{content:"";position:absolute;width:8px;height:8px;border-radius:50%;right:11px;top:10px;background:var(--cyan);box-shadow:0 0 0 4px rgba(126,240,220,.15)}
.puzzle-piece b,.puzzle-piece small{display:block;white-space:nowrap}.puzzle-piece small{font-size:9px;color:var(--muted);margin-top:2px}.puzzle-piece .mini-icon{flex:0 0 30px}
.piece-access{grid-column:1;grid-row:1;transform:rotate(-3deg)}.piece-chat{grid-column:4;grid-row:1;transform:rotate(4deg)}.piece-people{grid-column:1;grid-row:2;transform:rotate(-4deg)}.piece-products{grid-column:1;grid-row:3;transform:rotate(3deg)}.piece-documents{grid-column:4;grid-row:3;transform:rotate(-4deg)}
.puzzle-board .system-card-main{position:relative;left:auto;top:auto;grid-column:2 / 4;grid-row:1 / 3;width:auto;height:auto;padding:30px;transform:rotate(-4deg);z-index:2}
.puzzle-board .system-card-main::after{content:"";position:absolute;right:-5px;bottom:28px;width:10px;height:10px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 5px rgba(255,140,120,.12)}
.puzzle-board .system-card-main .card-kicker{margin-bottom:50px}
.puzzle-board .system-card-main small{white-space:nowrap}
@media (min-width:851px) and (max-height:820px){h1{font-size:clamp(46px,6vw,78px);margin-bottom:20px}.hero-lede{font-size:15px;line-height:1.55;margin-bottom:22px}.hero-layout{min-height:calc(100svh - 104px)}.hero-visual{height:min(500px,calc(100svh - 175px))}.puzzle-board{height:100%;min-height:410px}.scroll-cue{bottom:13px}}
@media(max-width:850px){.hero{padding-bottom:105px}.scroll-cue{display:none}.hero-visual{height:auto;margin-top:28px}.puzzle-board{width:100%;height:auto;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;gap:12px;transform:none}.puzzle-board::before{inset:1%;border-radius:22px}.puzzle-board .system-card-main{grid-column:1 / -1;grid-row:auto;order:1;min-height:270px;transform:rotate(-2deg)}.puzzle-piece{grid-column:auto;grid-row:auto;min-height:78px;transform:none}.piece-access{order:2}.piece-chat{order:3}.piece-people{order:4}.piece-products{order:5}.piece-documents{order:6}}
@media(max-width:530px){.hero{padding-top:105px;padding-bottom:82px}.hero-visual{margin-top:24px}.puzzle-board{gap:10px}.puzzle-board .system-card-main{padding:24px;min-height:250px}.puzzle-board .system-card-main .card-kicker{margin-bottom:42px}.puzzle-piece{padding:11px 10px;font-size:10px}.puzzle-piece small{font-size:8px}.puzzle-piece .mini-icon{flex-basis:27px;width:27px;height:27px}.hero-orbit{opacity:.42}.orbit-one{width:115vw;right:-58vw;top:18%}.orbit-two{width:92vw;right:-35vw;top:31%}}

/* Puzzle pieces: darker surfaces, colored identities and real connectors. */
.puzzle-piece{--piece-bg:#253039;--piece-accent:var(--cyan);background:var(--piece-bg);color:#f7f8f4;border-color:color-mix(in srgb,var(--piece-accent) 46%,rgba(255,255,255,.15));box-shadow:0 14px 28px rgba(0,0,0,.28);border-radius:16px;overflow:visible}
.puzzle-piece::before{content:"";position:absolute;width:16px;height:16px;right:-9px;top:50%;transform:translateY(-50%);border:1px solid color-mix(in srgb,var(--piece-accent) 46%,rgba(255,255,255,.15));border-left:0;border-radius:0 50% 50% 0;background:var(--piece-bg);box-shadow:none}
.puzzle-piece::after{content:"";position:absolute;width:16px;height:16px;left:50%;bottom:-9px;transform:translateX(-50%);border:1px solid color-mix(in srgb,var(--piece-accent) 46%,rgba(255,255,255,.15));border-top:0;border-radius:0 0 50% 50%;background:var(--piece-bg)}
.puzzle-piece>span:last-child{min-width:0}.puzzle-piece b,.puzzle-piece small{white-space:normal;overflow-wrap:anywhere}.puzzle-piece b{font-size:11px;line-height:1.15}.puzzle-piece small{color:rgba(255,255,255,.58);line-height:1.25}
.piece-access{--piece-bg:#343127;--piece-accent:var(--amber)}.piece-chat{--piece-bg:#203936;--piece-accent:var(--cyan)}.piece-people{--piece-bg:#302c45;--piece-accent:var(--violet)}.piece-products{--piece-bg:#303a27;--piece-accent:var(--lime)}.piece-documents{--piece-bg:#432e2b;--piece-accent:var(--coral)}
@media(max-width:850px){.puzzle-piece::before{right:-7px}.puzzle-piece::after{bottom:-7px;width:13px;height:13px}.puzzle-piece b{font-size:10px}.puzzle-piece small{font-size:8px}}

/* Refined modular direction: the puzzle is expressed by the board layout and
   shared color language, not by cartoon-like protruding tabs. */
.puzzle-board{width:min(100%,620px);grid-template-columns:1fr 1.15fr 1.15fr 1fr;gap:16px;transform:none}
.puzzle-board::before{inset:2%;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:linear-gradient(90deg,transparent 24.8%,rgba(126,240,220,.08) 25%,transparent 25.2%,transparent 74.8%,rgba(126,240,220,.08) 75%,transparent 75.2%),linear-gradient(0deg,transparent 32.8%,rgba(126,240,220,.08) 33%,transparent 33.2%,transparent 66.8%,rgba(126,240,220,.08) 67%,transparent 67.2%)}
.puzzle-piece{background:rgba(28,38,48,.86);border:1px solid rgba(255,255,255,.12);border-radius:12px;box-shadow:0 12px 24px rgba(0,0,0,.18);transform:none!important;padding:14px 12px;overflow:hidden}
.puzzle-piece::before,.puzzle-piece::after{display:none}
.puzzle-piece b{font-size:10px;line-height:1.15}.puzzle-piece small{font-size:8px;line-height:1.25}.puzzle-piece .mini-icon{width:27px;height:27px;flex-basis:27px;font-size:16px}
.piece-access{--piece-bg:rgba(78,67,39,.55);border-top:2px solid var(--amber)}.piece-chat{--piece-bg:rgba(32,57,54,.55);border-top:2px solid var(--cyan)}.piece-people{--piece-bg:rgba(48,44,69,.55);border-top:2px solid var(--violet)}.piece-products{--piece-bg:rgba(48,58,39,.55);border-top:2px solid var(--lime)}.piece-documents{--piece-bg:rgba(67,46,43,.55);border-top:2px solid var(--coral)}
.piece-documents b{font-size:9px}
@media(max-width:850px){.puzzle-board{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.puzzle-piece{padding:12px 10px}.puzzle-piece b{font-size:10px}.puzzle-piece small{font-size:8px}}

/* The pieces orbit the core; these quiet connector lines explain the
   relationship without turning the composition into a rigid grid. */
.puzzle-board{isolation:isolate}
.connection-line{position:absolute;z-index:0;height:1px;transform-origin:left center;background:linear-gradient(90deg,rgba(126,240,220,.08),rgba(126,240,220,.55),rgba(126,240,220,.08));box-shadow:0 0 10px rgba(126,240,220,.12)}
.connection-line::before,.connection-line::after{content:"";position:absolute;top:50%;width:5px;height:5px;border-radius:50%;background:var(--cyan);transform:translateY(-50%);box-shadow:0 0 0 4px rgba(126,240,220,.1)}
.connection-line::before{left:0}.connection-line::after{right:0}
.line-access{left:23%;top:22%;width:17%;transform:rotate(8deg)}.line-chat{left:62%;top:22%;width:17%;transform:rotate(-8deg)}.line-people{left:23%;top:49%;width:17%;transform:rotate(-2deg)}.line-products{left:23%;top:76%;width:17%;transform:rotate(-10deg)}.line-documents{left:62%;top:76%;width:17%;transform:rotate(10deg)}
.puzzle-piece{z-index:1;transform-origin:center;transition:transform .25s ease,box-shadow .25s ease}.piece-access{transform:rotate(-5deg)!important}.piece-chat{transform:rotate(4deg)!important}.piece-people{transform:rotate(-3deg)!important}.piece-products{transform:rotate(4deg)!important}.piece-documents{transform:rotate(-5deg)!important}.puzzle-piece:hover{z-index:3;transform:translateY(-4px) rotate(0deg)!important;box-shadow:0 18px 34px rgba(0,0,0,.3)}
@media(max-width:850px){.connection-line{display:none}.puzzle-piece{transform:none!important}.puzzle-piece:hover{transform:translateY(-3px)!important}}

/* Connector segments terminate in the actual gaps between each satellite and
   the core. They sit above the background grid, below the cards. */
.connection-line{z-index:2;height:2px;background:linear-gradient(90deg,rgba(126,240,220,.28),var(--cyan),rgba(126,240,220,.28));opacity:.9}
.puzzle-piece{z-index:3}.puzzle-board .system-card-main{z-index:4}
.line-access{left:20%;top:17%;width:10%;transform:rotate(4deg)}
.line-chat{left:75%;top:17%;width:10%;transform:rotate(-4deg)}
.line-people{left:20%;top:50%;width:10%;transform:rotate(-1deg)}
.line-products{left:20%;top:83%;width:10%;transform:rotate(-5deg)}
.line-documents{left:75%;top:83%;width:10%;transform:rotate(5deg)}

/* Exact edge-to-edge placement for the current four-column board. */
.puzzle-board{grid-template-columns:1fr 1fr 1fr 1fr}
.puzzle-board .system-card-main{justify-self:stretch;align-self:stretch;margin:0}
.connection-line{height:3px;transform:none!important;border-radius:99px;background:var(--cyan);box-shadow:0 0 12px rgba(126,240,220,.35);opacity:.8}
.connection-line::before,.connection-line::after{width:5px;height:5px;box-shadow:0 0 0 3px rgba(126,240,220,.12)}
.line-access,.line-people,.line-products{left:21.7%;width:3.1%}
.line-chat,.line-documents{left:75.2%;width:3.1%}
.line-access,.line-chat{top:17%}.line-people{top:50%}.line-products,.line-documents{top:83%}

.solutions-section .section-heading{align-items:center}
.solutions-section .heading-note{margin:0}
.systems-section .section-heading{align-items:center}
.systems-section .heading-note{margin:0}
.system-showcase .future-row{margin-top:30px;border-top:1px solid rgba(20,23,29,.18);padding-top:28px}
.showcase-mark{display:flex;align-items:center;gap:0;color:#00d8ba;letter-spacing:-.08em}
.showcase-mark svg{width:clamp(95px,11vw,150px);height:clamp(105px,12vw,165px);flex:0 0 auto;color:#00d8ba}
.showcase-mark>span{color:#00d8ba;font-size:clamp(72px,8vw,112px);letter-spacing:-.1em;line-height:1;vertical-align:baseline}
.solution-card{min-height:225px}
.solution-feature{grid-row:auto;min-height:225px}
.solution-card>a,.card-lines{display:none}
.solution-feature{background:rgba(255,255,255,.025);border-color:var(--white-line)}

/* Semantic line icons. The fallback characters stay in the markup, but the
   visible mark is a consistent monochrome SVG mask. */
.mini-icon,.solution-icon{font-size:0}
.mini-icon,.solution-icon{line-height:0;text-indent:-9999px;place-items:center}
.mini-icon::before,.solution-icon::before{content:"";display:block;width:21px;height:21px;background:var(--icon-color,currentColor);mask:var(--icon-url) center/contain no-repeat;-webkit-mask:var(--icon-url) center/contain no-repeat;grid-area:1 / 1;text-indent:0}
.mini-icon{width:34px;height:34px}.solution-icon{width:36px;height:36px}.solution-icon::before{width:22px;height:22px}
.mini-icon,.solution-icon{display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important}
.mini-icon::before,.solution-icon::before{position:static;flex:0 0 auto;margin:0;transform:none}
.cyan{--icon-color:#008f7e}.coral{--icon-color:#d15c4a}.amber{--icon-color:#a27419}.violet{--icon-color:#7160c9}.lime{--icon-color:#719327}
.puzzle-piece b{font-size:11px}.puzzle-piece small{font-size:9px}.solution-top{font-size:11px}.solution-card h3{font-size:27px}.solution-card p{font-size:13px}
.piece-access .mini-icon,.solution-card:nth-child(8) .solution-icon{--icon-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")}
.piece-people .mini-icon,.solution-card:nth-child(6) .solution-icon{--icon-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='3'/%3E%3Cpath d='M5 20a7 7 0 0 1 14 0'/%3E%3C/svg%3E")}
.piece-products .mini-icon,.solution-card:nth-child(5) .solution-icon{--icon-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 7 9-4 9 4-9 4-9-4Z'/%3E%3Cpath d='M3 7v10l9 4 9-4V7M12 11v10'/%3E%3C/svg%3E")}
.piece-documents .mini-icon,.solution-card:nth-child(3) .solution-icon{--icon-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v5h4M9 12h6M9 16h6'/%3E%3C/svg%3E")}
.piece-chat .mini-icon,.solution-card:nth-child(1) .solution-icon{--icon-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H8l-4 4V5Z'/%3E%3Cpath d='M8 9h8M8 12h5'/%3E%3C/svg%3E")}
.solution-card:nth-child(2) .solution-icon{--icon-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 1.2 5.8L19 10l-5.8 1.2L12 17l-1.2-5.8L5 10l5.8-1.2L12 3Z'/%3E%3Cpath d='m19 16 .6 2.4L22 19l-2.4.6L19 22l-.6-2.4L16 19l2.4-.6L19 16Z'/%3E%3C/svg%3E")}
.solution-card:nth-child(4) .solution-icon{--icon-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='2.5'/%3E%3Ccircle cx='16' cy='8' r='2.5'/%3E%3Cpath d='M3.5 19a4.5 4.5 0 0 1 9 0M11.5 19a4.5 4.5 0 0 1 9 0'/%3E%3C/svg%3E")}
.solution-card:nth-child(7) .solution-icon{--icon-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Cpath d='M3 10h18M7 15h3'/%3E%3C/svg%3E")}

/* Radial desktop composition: the core is positioned first, then the
   capabilities orbit it. This avoids the rigid four-column alignment. */
.connection-map{display:none}
@media(min-width:851px){
  .puzzle-board{display:block;width:min(100%,620px);height:500px;transform:none}
  .puzzle-board::before{display:none}
  .connection-line{display:none}
  .connection-map{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}
  .connection-map line{stroke:var(--cyan);stroke-width:2;stroke-linecap:round;opacity:.8;filter:drop-shadow(0 0 5px rgba(126,240,220,.35))}
  .connection-map circle{fill:var(--cyan);opacity:.95;filter:drop-shadow(0 0 5px rgba(126,240,220,.55))}
  .puzzle-piece{position:absolute;width:136px;height:118px;z-index:3}
  .piece-access{left:-25px;top:12px;transform:rotate(-5deg)!important}
  .piece-chat{left:509px;right:auto;top:14px;transform:rotate(4deg)!important}
  .piece-people{left:-23px;top:190px;transform:rotate(-3deg)!important}
  .piece-products{left:-25px;bottom:0;transform:rotate(4deg)!important}
  .piece-documents{left:509px;right:auto;bottom:0;transform:rotate(-5deg)!important}
  .puzzle-board .system-card-main{position:absolute;left:160px;top:100px;width:300px;height:300px;margin:0;padding:30px;z-index:4;transform:rotate(-3deg)}
  .connection-map{width:620px;height:500px;max-width:none}
}