@font-face{font-family:"HN Display";src:url("../fonts/HelveticaNowDisplay-Md.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"HN Text";src:url("../fonts/HelveticaNowText-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Suisse Mono";src:url("../fonts/SuisseIntlMono.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --coral:#de5849;
  --ink:#0a0a0a;
  --field:#f0f1f4;
  --paper:#fff;
  --muted:rgba(240,241,244,.66);
  --line:rgba(240,241,244,.22);
  --line-dark:rgba(10,10,10,.18);
  --display:"HN Display","Helvetica Neue",Arial,sans-serif;
  --text:"HN Text","Helvetica Neue",Arial,sans-serif;
  --mono:"Suisse Mono",ui-monospace,monospace;
  --bar:64px;
  --gutter:clamp(1.25rem,3vw,3.5rem);
  --ease:cubic-bezier(.22,.9,.24,1);
}

*,*:before,*:after{box-sizing:border-box;margin:0}
html{background:var(--ink);color:var(--field);-webkit-text-size-adjust:100%}
body{min-height:100svh;background:var(--ink);font-family:var(--text);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button{font:inherit;color:inherit}
button:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
img,svg{display:block;max-width:100%}
[hidden]{display:none!important}

.masthead{position:fixed;inset:0 0 auto;z-index:20;height:var(--bar);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--gutter);background:rgba(10,10,10,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.brand{width:clamp(118px,10vw,150px);border:0;background:none;padding:0;cursor:pointer}
.brand img{width:100%;height:auto}
.masthead-title{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.masthead-actions{justify-self:end;display:flex;align-items:center;gap:1rem}
.masthead-state{display:flex;align-items:center;gap:.65rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}
.state-dot{width:.52rem;height:.52rem;background:var(--coral)}
.language-link{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:34px;border:1px solid var(--line);color:var(--field);font-family:var(--mono);font-size:.65rem;letter-spacing:.1em;text-decoration:none;transition:background .2s ease,color .2s ease}
.language-link:hover,.language-link:focus-visible{background:var(--field);color:var(--ink)}

.app-shell{min-height:100svh;padding-top:var(--bar)}
.overview,.detail-view{min-height:calc(100svh - var(--bar));padding:clamp(1.25rem,2.4vh,2rem) var(--gutter) clamp(3rem,6vh,4rem)}
.overview{display:grid;grid-template-rows:auto minmax(290px,1fr) auto;gap:clamp(1rem,2.2vh,1.65rem);max-width:1600px;margin:auto}
.overview-heading{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.45fr) minmax(250px,.8fr);align-items:end;gap:clamp(1rem,3vw,3rem)}
.eyebrow,.detail-kicker,.footer-label,.ecosystem>p{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.overview-heading h1{font-family:var(--display);font-size:clamp(2rem,3.4vw,4.15rem);font-weight:500;line-height:.96;letter-spacing:-.035em;text-wrap:balance}
.overview-copy{max-width:32rem;color:var(--muted);font-size:clamp(.95rem,1.3vw,1.16rem);line-height:1.5}

.service-map{display:grid;grid-template-columns:1.12fr 1.12fr .82fr;grid-template-rows:1fr 1fr;border:1px solid var(--line);min-height:0}
.service-tile{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:clamp(.8rem,1.5vw,1.5rem);min-width:0;padding:clamp(1rem,2.2vw,2rem);border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:transparent;text-align:left;cursor:pointer;overflow:hidden;transition:background .25s ease,color .25s ease}
.service-tile:before{content:"";position:absolute;inset:auto 0 0;height:4px;background:var(--coral);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.service-tile:hover,.service-tile:focus-visible{background:var(--field);color:var(--ink)}
.service-tile:hover:before,.service-tile:focus-visible:before{transform:scaleX(1)}
.service-tile:hover .tile-index,.service-tile:focus-visible .tile-index,.service-tile:hover small,.service-tile:focus-visible small{color:rgba(10,10,10,.62)}
.service-tile:hover .tile-action,.service-tile:focus-visible .tile-action{transform:translate(.18rem,-.18rem);color:var(--coral)}
.tile-intelligence{grid-column:1;grid-row:1}
.tile-automation{grid-column:2;grid-row:1}
.tile-odoo{grid-column:1;grid-row:2;border-bottom:0}
.tile-cloud{grid-column:2;grid-row:2;border-bottom:0}
.tile-custom{grid-column:3;grid-row:1/3;border-right:0;border-bottom:0;align-content:space-between}
.tile-index{font-family:var(--mono);font-size:.72rem;color:var(--muted);transition:color .25s ease}
.tile-copy{display:grid;gap:.55rem;align-self:center}
.tile-copy strong{font-family:var(--display);font-size:clamp(1.45rem,2.3vw,2.65rem);font-weight:500;line-height:.98;letter-spacing:-.03em}
.tile-copy small{max-width:31rem;color:var(--muted);font-size:clamp(.82rem,1vw,.98rem);line-height:1.42;transition:color .25s ease}
.tile-custom .tile-copy{align-self:end}
.tile-action{font-family:var(--mono);font-size:1.2rem;line-height:1;transition:transform .25s ease,color .25s ease}

.version-v2 .tile-action{display:none}
.version-v2 .tile-brand{grid-column:3;grid-row:1;display:flex;align-items:center;justify-content:center;gap:.5rem;min-width:112px;height:42px;padding:.45rem .6rem;background:var(--field);color:var(--ink);pointer-events:none}
.version-v2 .tile-brand img{width:25px;max-width:48px;height:23px;object-fit:contain}
.version-v2 .tile-brand-odoo img{width:50px}.version-v2 .tile-brand-cloud img{width:38px}.version-v2 .tile-brand-custom img{width:26px}
.version-v2 .tile-brand small{font-family:var(--mono);font-size:.5rem;line-height:1.2;letter-spacing:.05em;text-transform:uppercase;color:rgba(10,10,10,.62)}

.version-v{--field:#fff;--paper:#f5f4f1;--muted:rgba(10,10,10,.62);--line:rgba(10,10,10,.16);background:radial-gradient(circle at 51% 11%,rgba(222,88,73,.085),transparent 31rem),#fff;color:var(--ink)}
.version-v .masthead{background:rgba(255,255,255,.92);border-color:var(--line);box-shadow:0 1px 18px rgba(10,10,10,.035);backdrop-filter:blur(16px)}
.version-v .masthead-title{color:rgba(10,10,10,.58)}
.version-v .language-link{border-color:var(--line);color:var(--ink)}
.version-v .language-link:hover,.version-v .language-link:focus-visible{background:var(--ink);color:var(--field)}
.version-v .overview-heading h1{letter-spacing:-.05em}
.version-v .eyebrow{display:flex;align-items:center;gap:.8rem;color:rgba(10,10,10,.56)}
.version-v .eyebrow:before{content:"";flex:none;width:28px;height:2px;background:var(--coral)}
.version-v .service-map{border-color:var(--line);background:rgba(255,255,255,.82);box-shadow:0 24px 70px rgba(10,10,10,.075)}
.version-v .service-tile{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto 1fr;border-color:var(--line);transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease)}
.version-v .service-tile:hover,.version-v .service-tile:focus-visible{z-index:2;background:var(--ink);color:var(--field);box-shadow:0 18px 45px rgba(10,10,10,.18)}
.version-v .tile-index{grid-column:1;grid-row:1;display:flex;align-items:center;gap:.45rem;color:rgba(10,10,10,.52)}
.version-v .tile-index:before{content:"";width:5px;height:5px;background:var(--coral)}
.version-v .tile-copy{grid-column:2;grid-row:1/3}
.version-v .tile-copy small{color:rgba(10,10,10,.62)}
.version-v .service-tile:hover .tile-copy small,.version-v .service-tile:focus-visible .tile-copy small{color:rgba(255,255,255,.68)}
.version-v .service-tile:hover .tile-index,.version-v .service-tile:focus-visible .tile-index{color:var(--coral)}
.version-v .tile-action{display:block;grid-column:3;grid-row:1;color:rgba(10,10,10,.42)}
.version-v .service-tile:hover .tile-action,.version-v .service-tile:focus-visible .tile-action{color:var(--coral)}
.version-v .tile-brand{grid-column:3;grid-row:2;align-self:end;justify-self:end;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;width:92px;min-height:62px;padding:.5rem;background:var(--paper);border:1px solid var(--line);color:var(--ink);pointer-events:none}
.version-v .service-tile:hover .tile-brand,.version-v .service-tile:focus-visible .tile-brand{background:#fff;border-color:rgba(255,255,255,.42);box-shadow:0 8px 24px rgba(0,0,0,.24)}
.version-v .tile-brand img{width:27px;max-width:58px;height:24px;object-fit:contain}
.version-v .tile-brand-odoo img{width:56px}.version-v .tile-brand-cloud img{width:44px}.version-v .tile-brand-custom img{width:28px}
.version-v .tile-brand small{font-family:var(--mono);font-size:.48rem;line-height:1.2;letter-spacing:.05em;text-align:center;text-transform:uppercase;color:rgba(10,10,10,.62)}
.version-v .trust-est,.version-v .trust-seal{filter:none}
.version-v .trust-wordmark small,.version-v .trust-rating small{color:rgba(10,10,10,.68)}
.version-v a.trust-wordmark{padding:.45rem .55rem;background:var(--ink)}
.version-v a.trust-wordmark .trust-rating small{color:var(--field)}
.version-v .detail-toolbar{padding:.15rem 0}
.version-v .service-detail{border:1px solid var(--line-dark);box-shadow:0 26px 70px rgba(10,10,10,.08)}
.version-v .detail-heading{background:radial-gradient(circle at 8% 35%,rgba(222,88,73,.12),transparent 24rem),#fff}
.version-v .capability-list li:nth-child(even){background:rgba(244,243,240,.5)}
.version-v .detail-footer{background:#f1f0ed}
.version-v .back-button:hover{background:var(--ink);color:var(--field)}
.version-v .keyboard-hint{color:rgba(10,10,10,.42)}

.ecosystem{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(1rem,3vw,3rem);border-top:1px solid var(--line);padding-top:1rem}
.trust-strip{display:flex;justify-content:flex-end;align-items:center;gap:1.4rem;min-width:0;color:var(--field)}
.trust-item{flex:none;display:flex;align-items:center;gap:.5rem;color:inherit;text-decoration:none}
.trust-item img{display:block;object-fit:contain}
.trust-est{width:30px;height:27px;filter:invert(1)}
.trust-seal{width:36px;height:36px;filter:invert(1)}
.trust-aws{box-sizing:content-box;width:31px;height:18px;padding:.25rem .35rem;background:var(--field)}
.trust-clutch{width:53px;height:15px}
.trust-wordmark small{font-family:var(--mono);font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(240,241,244,.74)}
.trust-rating{display:flex;align-items:center;gap:.35rem;color:var(--coral);font-size:.66rem;letter-spacing:.04em;white-space:nowrap}
.trust-rating small{color:var(--field);font-size:.58rem;letter-spacing:.08em}

.detail-view{max-width:1600px;margin:auto;display:grid;grid-template-rows:auto 1fr;gap:1rem}
.detail-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.detail-navigation{display:flex;align-items:center;gap:.4rem}
.back-button{display:inline-flex;align-items:center;gap:.7rem;min-height:44px;padding:.7rem 1rem;border:1px solid var(--line);background:transparent;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .2s ease,color .2s ease}
.back-button:hover{background:var(--field);color:var(--ink)}
.service-switcher{display:flex;gap:.4rem}
.service-switcher button{width:44px;height:44px;border:1px solid var(--line);background:transparent;font-family:var(--mono);font-size:.68rem;cursor:pointer}
.service-switcher button:hover,.service-switcher button.is-active{background:var(--coral);border-color:var(--coral);color:var(--ink)}
.slide-arrow{display:grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid var(--line);background:var(--field);color:var(--ink);font-family:var(--mono);font-size:1rem;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}
.slide-arrow:hover,.slide-arrow:focus-visible{background:var(--coral);border-color:var(--coral)}

.service-detail{display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:var(--field);color:var(--ink);min-height:0;overflow:hidden;touch-action:pan-y}
.detail-heading{display:grid;grid-template-columns:auto minmax(240px,.9fr) minmax(320px,1.1fr);gap:clamp(1rem,3vw,3rem);align-items:end;padding:clamp(1.25rem,2.4vw,2.5rem);border-bottom:1px solid var(--line-dark)}
.detail-index{font-family:var(--display);font-size:clamp(2.8rem,6vw,6rem);line-height:.76;color:var(--coral)}
.detail-heading h2{margin-top:.55rem;font-family:var(--display);font-size:clamp(2.4rem,5vw,5.7rem);font-weight:500;line-height:.88;letter-spacing:-.045em;text-wrap:balance}
.detail-kicker{color:rgba(10,10,10,.58)}
.detail-heading-meta{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.service-mark{display:flex;align-items:center;gap:.55rem;min-height:34px;padding:.35rem .55rem;border:1px solid var(--line-dark)}
.service-mark img{width:25px;max-width:54px;height:22px;object-fit:contain}.service-mark small{font-family:var(--mono);font-size:.5rem;line-height:1.2;letter-spacing:.05em;text-transform:uppercase;color:rgba(10,10,10,.58)}
.detail-lead{max-width:42rem;font-size:clamp(1.05rem,1.6vw,1.5rem);line-height:1.38;color:rgba(10,10,10,.72)}

.capability-list{display:grid;grid-template-columns:repeat(5,1fr);list-style:none;min-height:0}
.capability-list li{display:grid;align-content:start;gap:.75rem;padding:clamp(1rem,1.8vw,1.75rem);border-right:1px solid var(--line-dark)}
.capability-list li:last-child{border-right:0}
.capability-number{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:rgba(10,10,10,.52)}
.capability-list h3{font-family:var(--display);font-size:clamp(1.2rem,1.8vw,1.85rem);font-weight:500;line-height:1;letter-spacing:-.025em}
.capability-list p{font-size:clamp(.82rem,1vw,.98rem);line-height:1.5;color:rgba(10,10,10,.68)}

.detail-footer{display:grid;grid-template-columns:minmax(0,1fr);gap:.55rem;align-items:center;padding:.72rem clamp(1.25rem,2.4vw,2.5rem);border-top:1px solid var(--line-dark);background:var(--paper)}
.detail-flow{display:flex;align-items:center;gap:1rem;min-width:0}
.footer-label{flex:none;color:rgba(10,10,10,.52)}
.detail-flow ul{display:flex;align-items:center;gap:.45rem;list-style:none;min-width:0;overflow-x:auto;scrollbar-width:none}
.detail-flow li{display:flex;align-items:center;gap:.45rem;white-space:nowrap;font-size:.7rem}
.detail-flow li:not(:last-child):after{content:"→";font-family:var(--mono);color:var(--coral)}
.detail-logos{display:flex;align-items:center;justify-self:end;gap:.4rem}
.detail-logo{display:flex;align-items:center;justify-content:center;width:44px;height:36px}
.detail-logo img{max-width:36px;max-height:36px;object-fit:contain}
.detail-logo.aws{width:88px;gap:.4rem}
.detail-logo.aws:after{content:"Partner";font-family:var(--mono);font-size:.5rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(10,10,10,.58)}
.detail-logo.aws img{width:31px;height:18px}.detail-logo.clutch{width:66px;background:var(--ink)}.detail-logo.clutch img{width:53px;height:15px}

.keyboard-hint{position:fixed;z-index:30;left:var(--gutter);right:var(--gutter);bottom:.7rem;display:flex;justify-content:space-between;pointer-events:none;font-family:var(--mono);font-size:.58rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(240,241,244,.38)}
@media (max-height:700px){.keyboard-hint{display:none}}

.is-leaving{animation:viewOut .18s ease both}
.is-entering{animation:viewIn .42s var(--ease) both}
@keyframes viewOut{to{opacity:0;transform:scale(.985)}}
@keyframes viewIn{from{opacity:0;transform:translateY(14px)}}

@media (max-width:1000px){
  .overview-heading{grid-template-columns:1fr 1.3fr}.overview-copy{grid-column:1/3}.eyebrow{align-self:start}
  .service-map{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,minmax(120px,auto))}
  .tile-intelligence{grid-column:1;grid-row:1}.tile-automation{grid-column:2;grid-row:1}.tile-odoo{grid-column:1;grid-row:2;border-bottom:1px solid var(--line)}.tile-cloud{grid-column:2;grid-row:2;border-bottom:1px solid var(--line)}.tile-custom{grid-column:1/3;grid-row:3;border-right:0}
  .capability-list{grid-template-columns:repeat(2,1fr);overflow:auto}.capability-list li{border-bottom:1px solid var(--line-dark)}
  .detail-heading{grid-template-columns:auto 1fr}.detail-lead{grid-column:2}
}

@media (max-width:700px){
  :root{--bar:58px}
  .masthead{grid-template-columns:1fr auto}.masthead-title{display:none}.masthead-actions{gap:.55rem}.masthead-state{font-size:.58rem}.language-link{min-width:34px;height:32px}
  .overview,.detail-view{padding-inline:1rem}
  .overview{display:block}.overview-heading{display:grid;grid-template-columns:1fr;gap:.9rem;margin-bottom:1.2rem}.overview-copy{grid-column:auto}
  .overview-heading h1{font-size:clamp(2.3rem,11vw,4.2rem)}
  .service-map{display:grid;grid-template-columns:1fr;grid-template-rows:none}
  .service-tile,.tile-intelligence,.tile-automation,.tile-odoo,.tile-cloud,.tile-custom{grid-column:auto;grid-row:auto;min-height:125px;border-right:0;border-bottom:1px solid var(--line);align-content:center}
  .version-v2 .service-tile{grid-template-columns:auto minmax(0,1fr) auto}.version-v2 .tile-brand{min-width:96px;padding-inline:.45rem}.version-v2 .tile-brand small{max-width:58px}
  .version-v .service-tile{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto 1fr}.version-v .tile-brand{width:78px;min-height:58px}.version-v .tile-brand small{max-width:68px}
  .tile-custom{border-bottom:0}.tile-custom .tile-copy{align-self:center}
  .ecosystem{display:grid;grid-template-columns:1fr;margin-top:1.2rem}.trust-strip{justify-content:flex-start;flex-wrap:wrap;gap:.9rem 1.2rem}
  .detail-toolbar{display:grid;align-items:start;justify-content:stretch}.back-button{justify-self:start}.detail-navigation{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;width:100%}.service-switcher{display:grid;grid-template-columns:repeat(5,44px);max-width:100%;overflow-x:auto;justify-self:stretch}
  .service-detail{overflow:visible}.detail-heading{grid-template-columns:1fr;padding:1.2rem}.detail-index{font-size:3rem}.detail-lead{grid-column:auto}.detail-heading h2{font-size:clamp(2.7rem,14vw,5rem)}
  .capability-list{display:grid;grid-template-columns:1fr;overflow:visible}.capability-list li{border-right:0;padding:1.2rem}
  .detail-footer{grid-template-columns:1fr}.detail-flow{display:grid;gap:.7rem}.detail-flow ul{display:grid;gap:.35rem;overflow:visible}.detail-flow li:not(:last-child):after{content:none}.detail-flow li{white-space:normal}.detail-logos{flex-wrap:wrap}.detail-logo{width:44px;height:40px}.detail-logo img{max-width:36px;max-height:36px}.detail-logo.aws{width:94px}
  .keyboard-hint{display:none}
}

@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
