@font-face{font-family:"HelveticaNowDisplay";src:url("../fonts/HelveticaNowDisplay-Md.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"HelveticaNowText";src:url("../fonts/HelveticaNowText-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"SuisseIntlMono";src:url("../fonts/SuisseIntlMono.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{--ink:#0B0E12;--ink-2:#6A6A6B;--field:#F0F1F4;--paper:#FFFFFF;--hair:#D9D9D9;--coral:#DE5849;--coral-dark:#C63524;--mint:#E5F3EF;--violet:#ECEBFA;--peach:#F9E9E3;--sand:#F1EFEA;--mx:20%;--my:10%}
*{box-sizing:border-box}
html{background:var(--ink);color-scheme:dark}
body{margin:0;background:var(--ink);color:var(--paper);font-family:"HelveticaNowText",system-ui,sans-serif;min-width:320px}
.stage{position:relative;isolation:isolate;min-height:100svh;padding:0 clamp(22px,4vw,72px) clamp(28px,4vw,58px);overflow:hidden;background:radial-gradient(90% 70% at var(--mx) var(--my),rgba(222,88,73,.24),transparent 58%),radial-gradient(65% 70% at 95% 8%,rgba(242,160,145,.12),transparent 54%),var(--ink)}
.ambient{position:absolute;z-index:-1;inset:0;opacity:.35;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(circle at 70% 40%,#000,transparent 72%);animation:grid-drift 18s ease-in-out infinite alternate}
.topbar{height:72px;display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.11)}
.logo{display:block;width:184px;height:auto}
.intro{display:flex;align-items:end;justify-content:space-between;gap:40px;padding:clamp(28px,4vh,48px) 0 clamp(24px,3vh,38px)}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:"HelveticaNowDisplay",system-ui,sans-serif;font-weight:500;letter-spacing:-.025em}
h1{max-width:850px;font-size:clamp(42px,4.3vw,76px);line-height:.98}
.intro>p{flex:0 1 560px;max-width:560px;color:rgba(255,255,255,.76);font-size:clamp(16px,1.15vw,20px);line-height:1.45;text-align:right}
.suite-shell{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,22%);grid-template-rows:minmax(0,1fr) auto;gap:16px;max-width:1800px;min-height:640px;margin:0 auto;padding:18px;border:1px solid rgba(255,255,255,.13);border-radius:28px;background:rgba(240,241,244,.975);box-shadow:0 42px 100px -38px rgba(0,0,0,.78);color:var(--ink);overflow:hidden;transform:translateY(0);animation:shell-in .9s cubic-bezier(.2,.75,.2,1) both}
.suite-shell:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 78% 35%,rgba(222,88,73,.09),transparent 24%),linear-gradient(120deg,transparent 55%,rgba(255,255,255,.72));opacity:.8}
.connections{position:absolute;z-index:1;inset:18px;width:calc(100% - 36px);height:calc(100% - 36px);pointer-events:none;overflow:visible}
.connections path{fill:none;stroke:var(--coral);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:7 12;opacity:.36;animation:flow 10s linear infinite;transition:opacity .25s,stroke-width .25s}
.connections path.is-active{opacity:1;stroke-width:4}
.core-stack,.custom,.systems{position:relative;z-index:2}
.core-stack{display:grid;grid-template-rows:.8fr 2.35fr .8fr .8fr;gap:12px;min-width:0}
.layer,.custom,.systems{border:1px solid rgba(11,14,18,.13);box-shadow:0 8px 24px -22px rgba(11,14,18,.8);transition:transform .3s cubic-bezier(.2,.75,.2,1),box-shadow .3s,border-color .3s,filter .3s;outline:none}
.layer{position:relative;display:grid;grid-template-columns:minmax(230px,27%) minmax(0,1fr) auto;align-items:center;gap:28px;padding:18px 24px;border-radius:18px;overflow:hidden}
.layer:focus-visible,.custom:focus-visible,.systems:focus-visible{box-shadow:0 0 0 4px rgba(222,88,73,.28),0 18px 36px -24px rgba(11,14,18,.7)}
.layer:hover,.layer:focus-visible,.custom:hover,.custom:focus-visible,.systems:hover,.systems:focus-visible{transform:translateY(-3px);border-color:rgba(198,53,36,.55);box-shadow:0 22px 42px -28px rgba(11,14,18,.72)}
.layer-name,.systems-title{display:flex;align-items:center;gap:14px}
.layer h2,.custom h2,.systems h2{font-size:clamp(23px,1.65vw,32px);line-height:1}
.layer>p{color:#3F4246;font-size:clamp(16px,1.18vw,21px);line-height:1.35}
.node{display:block;flex:0 0 auto;width:12px;height:12px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 7px rgba(222,88,73,.13)}
.intelligence{background:var(--mint)}
.automation{grid-template-columns:minmax(230px,27%) 1fr;background:var(--violet)}
.odoo{background:var(--peach)}
.cloud{background:var(--sand)}
.automation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.module{min-height:76px;padding:12px 16px;border:1px solid rgba(11,14,18,.12);border-radius:13px;background:rgba(255,255,255,.8);transition:transform .25s,background .25s}
.module:hover{transform:translateX(4px);background:#fff}
.module h3{font-size:clamp(17px,1.05vw,21px);margin-bottom:4px}
.module p{color:#55585C;font-size:clamp(13px,.86vw,16px);line-height:1.32}
.signal{display:flex;align-items:end;gap:5px;width:56px;height:34px}
.signal i{display:block;width:7px;border-radius:6px;background:var(--coral);transform-origin:bottom;animation:bars 2.5s ease-in-out infinite}
.signal i:nth-child(1){height:30%}.signal i:nth-child(2){height:58%;animation-delay:.15s}.signal i:nth-child(3){height:42%;animation-delay:.3s}.signal i:nth-child(4){height:78%;animation-delay:.45s}.signal i:nth-child(5){height:100%;animation-delay:.6s}
.database{position:relative;width:58px;height:38px;border:2px solid var(--coral-dark);border-radius:50%;transform:translateY(-8px)}
.database:before,.database:after,.database i{content:"";position:absolute;left:-2px;width:58px;height:20px;border:2px solid var(--coral-dark);border-top:0;border-radius:0 0 50% 50%}
.database:before{top:8px}.database:after{top:18px}.database i{top:28px}
.cloud-mark{display:flex;align-items:center;gap:9px}
.cloud-mark i{display:block;width:12px;height:12px;border-radius:50%;background:var(--coral)}
.cloud-mark i:nth-child(2){animation:pulse 2.4s ease-in-out infinite}
.custom{display:flex;flex-direction:column;min-width:0;padding:28px 24px;border-radius:18px;background:linear-gradient(155deg,#F6FFFC,var(--mint));overflow:hidden}
.custom:after{content:"";position:absolute;right:-60px;bottom:-70px;width:210px;height:210px;border:1px solid rgba(222,88,73,.22);border-radius:50%;box-shadow:0 0 0 38px rgba(222,88,73,.05),0 0 0 76px rgba(222,88,73,.035);animation:orbit 12s linear infinite}
.custom-head{display:flex;align-items:center;gap:14px}
.custom-icon{position:relative;display:block;width:42px;height:42px;border:2px solid var(--coral-dark);border-radius:11px}
.custom-icon i{position:absolute;left:9px;width:20px;height:2px;border-radius:2px;background:var(--coral-dark)}
.custom-icon i:nth-child(1){top:10px}.custom-icon i:nth-child(2){top:18px}.custom-icon i:nth-child(3){top:26px;width:13px}
.custom-list{display:grid;gap:10px;margin:42px 0 32px}
.custom-list p{position:relative;padding:15px 14px 15px 20px;border:1px solid rgba(11,14,18,.12);border-radius:12px;background:rgba(255,255,255,.82);font-size:clamp(16px,1.08vw,20px);transition:transform .25s,border-color .25s}
.custom-list p:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:12px 0 0 12px;background:var(--coral)}
.custom:hover .custom-list p:nth-child(1){transform:translateX(5px)}.custom:hover .custom-list p:nth-child(2){transform:translateX(10px)}.custom:hover .custom-list p:nth-child(3){transform:translateX(15px)}
.custom-note{margin-top:auto;max-width:20ch;color:#525558;font-size:clamp(15px,1vw,18px);line-height:1.45}
.systems{grid-column:1/-1;display:grid;grid-template-columns:minmax(250px,1.2fr) repeat(3,1fr);align-items:center;gap:20px;padding:18px 24px;border-radius:18px;background:#fff}
.systems p{padding-left:20px;border-left:1px solid var(--hair);color:#4F5255;font-size:clamp(14px,.95vw,18px);line-height:1.35}
.suite-shell:has([data-zone]:hover) [data-zone]:not(:hover){filter:saturate(.78)}
@keyframes shell-in{from{transform:translateY(28px)}to{transform:translateY(0)}}
@keyframes grid-drift{from{transform:translate3d(-12px,-8px,0)}to{transform:translate3d(12px,8px,0)}}
@keyframes flow{to{stroke-dashoffset:-152}}
@keyframes bars{0%,100%{transform:scaleY(.75)}50%{transform:scaleY(1)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(222,88,73,.35)}50%{box-shadow:0 0 0 12px rgba(222,88,73,0)}}
@keyframes orbit{to{transform:rotate(360deg)}}
@media (max-width:1100px){.stage{overflow:visible}.intro{align-items:start;flex-direction:column;gap:16px}.intro>p{flex:0 1 auto;text-align:left}.suite-shell{grid-template-columns:1fr;grid-template-rows:auto;min-height:0}.custom{min-height:360px}.systems{grid-column:1;grid-template-columns:1fr 1fr}.systems-title{grid-column:1/-1}.connections{display:none}}
@media (max-width:720px){.stage{padding-inline:16px}.topbar{height:62px}.logo{width:154px}.intro{padding-block:28px 24px}.suite-shell{padding:10px;border-radius:20px}.core-stack{grid-template-rows:auto}.layer,.automation{grid-template-columns:1fr;gap:12px;padding:20px}.automation-grid{grid-template-columns:1fr}.signal,.database,.cloud-mark{position:absolute;right:22px;top:22px}.odoo>p{padding-right:72px}.custom{padding:22px;min-height:340px}.systems{grid-template-columns:1fr;padding:22px}.systems-title{grid-column:auto}.systems p{padding:12px 0 0;border-left:0;border-top:1px solid var(--hair)}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}