/* =========================================================
   AMP Data Solutions — design system
   Tokens → base → layout → components → page sections → demos
   ========================================================= */
:root{
  --ink:#0e1117; --ink-2:#151a23; --ink-3:#1d2430; --ink-4:#2a3342;
  --paper:#f3f5f8; --white:#fff; --text:#121722; --muted:#566074;
  --muted-d:#97a2b6; --line:#dde2ea; --line-d:rgba(255,255,255,.11);
  --blue:#1a4a9f; --blue-2:#4b86ff; --blue-3:#e3ecff; --purple:#6b3f8f;
  --green:#18a06a; --amber:#c98a12; --red:#d4483b;
  --font:'Geist','Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wrap:1280px; --gut:clamp(20px,4vw,48px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;font-family:var(--font);font-size:17px;line-height:1.6;color:var(--text);background:var(--paper);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--blue-2);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--blue-2);color:#fff;padding:10px 16px;border-radius:8px;z-index:200}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- page transition ---------- */
body{transition:opacity .25s ease}
body.is-leaving{opacity:0}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.section{padding:clamp(72px,9vw,132px) 0;position:relative}
.dark{background:var(--ink);color:#e9edf5}
.dark .muted,.dark .lede{color:var(--muted-d)}
.light{background:var(--paper)}
.white{background:var(--white)}
.lap{border-radius:40px 40px 0 0;margin-top:-40px;z-index:2}   /* panel slides over previous section */
.grid{display:grid;gap:clamp(20px,3vw,40px)}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px);align-items:start}
.split.rev{grid-template-columns:7fr 5fr}
.sticky{position:sticky;top:110px}
.stack>*+*{margin-top:1.1em}
.muted{color:var(--muted)}

/* ---------- type ---------- */
.h-xl{font-size:clamp(2.7rem,6.6vw,6rem);line-height:1.02;letter-spacing:-.045em;font-weight:500}
.h-lg{font-size:clamp(2rem,4.4vw,3.8rem);line-height:1.06;letter-spacing:-.035em;font-weight:500}
.h-md{font-size:clamp(1.4rem,2.2vw,2rem);line-height:1.15;letter-spacing:-.025em;font-weight:500}
.h-sm{font-size:1.15rem;line-height:1.3;letter-spacing:-.01em;font-weight:600}
.lede{font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.55;color:var(--muted);max-width:60ch}
.sec-head{max-width:820px;margin-bottom:clamp(36px,5vw,64px)}
.sec-head .lede{margin-top:20px}
.kicker{font-family:var(--mono);font-size:.78rem;color:var(--blue);letter-spacing:.02em;margin-bottom:16px;display:block}
.dark .kicker{color:var(--blue-2)}
.mono{font-family:var(--mono)}
.small{font-size:.9rem}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:999px;border:1px solid transparent;
  font-weight:500;text-decoration:none;font-size:1rem;line-height:1;position:relative;overflow:hidden;
  transition:transform .3s var(--ease),background .25s,color .25s,border-color .25s}
.btn svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-primary{background:var(--blue-2);color:#fff}
.btn-primary:hover{background:#6a9bff}
.btn-ghost{border-color:currentColor;background:transparent}
.dark .btn-ghost{border-color:rgba(255,255,255,.3)} .dark .btn-ghost:hover{background:rgba(255,255,255,.08)}
.light .btn-ghost,.white .btn-ghost{border-color:var(--ink-4)} .light .btn-ghost:hover,.white .btn-ghost:hover{background:var(--ink);color:#fff}
.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{background:var(--ink-4)}
.btn-white{background:#fff;color:var(--blue)}.btn-white:hover{background:var(--blue-3)}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.tlink{display:inline-flex;gap:8px;align-items:center;text-decoration:none;font-weight:500;border-bottom:1px solid currentColor;padding-bottom:2px}
.tlink svg{width:14px;height:14px;transition:transform .3s var(--ease)} .tlink:hover svg{transform:translateX(4px)}

/* ---------- header + menu ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:60;transition:transform .45s var(--ease),background .3s,border-color .3s;
  border-bottom:1px solid transparent;color:#fff}
.hdr.is-solid{background:rgba(14,17,23,.84);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:var(--line-d)}
.hdr.is-hidden{transform:translateY(-101%)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{height:26px;width:auto}
.brand span{font-size:.78rem;letter-spacing:.16em;color:#b9c4dc;font-weight:500;border-left:1px solid var(--line-d);padding-left:12px;line-height:1.2}
.nav{display:flex;gap:4px;align-items:center}
.nav a{padding:8px 14px;border-radius:999px;text-decoration:none;font-size:.95rem;color:#c9d2e3;transition:color .2s,background .2s}
.nav a:hover,.nav a[aria-current]{color:#fff;background:rgba(255,255,255,.08)}
.hdr-actions{display:flex;gap:10px;align-items:center}
.hdr .btn{padding:11px 18px;font-size:.92rem}
.menu-btn{display:inline-flex;gap:10px;align-items:center;background:transparent;border:1px solid rgba(255,255,255,.28);color:#fff;
  border-radius:999px;padding:10px 16px;font-size:.92rem;font-weight:500}
.menu-btn:hover{background:rgba(255,255,255,.1)}
.menu-btn i{display:grid;gap:4px}.menu-btn i b{display:block;width:16px;height:1.5px;background:currentColor;transition:transform .35s var(--ease)}
.menu-open .menu-btn i b:first-child{transform:translateY(2.75px) rotate(45deg)}
.menu-open .menu-btn i b:last-child{transform:translateY(-2.75px) rotate(-45deg)}
.prog{position:absolute;left:0;bottom:-1px;height:2px;background:var(--blue-2);width:100%;transform-origin:0 50%;transform:scaleX(var(--sp,0))}
.menu{position:fixed;inset:0;z-index:55;background:var(--ink);color:#fff;padding:120px 0 40px;overflow-y:auto;
  clip-path:circle(0 at calc(100% - 90px) 36px);visibility:hidden;
  transition:clip-path .75s var(--ease),visibility 0s .75s}
.menu-open .menu{clip-path:circle(150% at calc(100% - 90px) 36px);visibility:visible;transition:clip-path .75s var(--ease),visibility 0s}
.menu-open{overflow:hidden}
.menu-grid{display:grid;grid-template-columns:7fr 4fr;gap:48px}
.menu-links a{display:flex;align-items:baseline;gap:18px;padding:7px 0;text-decoration:none;font-size:clamp(1.5rem,3.4vw,2.7rem);
  letter-spacing:-.035em;line-height:1.1;font-weight:500;border-bottom:1px solid var(--line-d);
  opacity:0;transform:translateY(24px);transition:opacity .5s,transform .6s var(--ease),color .2s}
.menu-open .menu-links a{opacity:1;transform:none;transition-delay:calc(.12s + var(--i)*.045s)}
.menu-links a small{font-size:.9rem;letter-spacing:0;color:var(--muted-d);font-weight:400;margin-left:auto;text-align:right}
.menu-links a:hover{color:var(--blue-2)}
.menu-side{color:var(--muted-d);font-size:.98rem}
.menu-side h2{font-size:1rem;color:#fff;margin-bottom:10px;font-weight:500}
.menu-side p+h2{margin-top:28px}

/* ---------- hero ---------- */
.hero{background:var(--ink);color:#fff;min-height:100svh;padding:132px 0 96px;position:relative;overflow:hidden;display:flex;align-items:center}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(60% 50% at 78% 30%,rgba(75,134,255,.18),transparent 70%);opacity:.9;mask-image:linear-gradient(#000 40%,transparent);-webkit-mask-image:linear-gradient(#000 40%,transparent)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,64px);align-items:center;position:relative}
.hero h1{font-size:clamp(2.5rem,5vw,4.6rem)}
.hero .lede{color:#aab5c9;margin-top:28px;max-width:52ch}
.net{position:relative;aspect-ratio:1/1;max-height:640px;width:100%}
.net canvas{width:100%;height:100%;display:block;touch-action:pan-y}
.net-ctl{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);display:flex;background:rgba(255,255,255,.07);border:1px solid var(--line-d);border-radius:999px;padding:4px;gap:2px}
.net-ctl button{border:0;background:transparent;color:#aab5c9;padding:9px 16px;border-radius:999px;font-size:.88rem;font-weight:500;transition:background .25s,color .25s}
.net-ctl button[aria-pressed=true]{background:#fff;color:var(--ink)}
.net-note{position:absolute;left:0;top:0;font-size:.82rem;color:var(--muted-d);max-width:22ch;line-height:1.4}
.net-fallback{display:none}
.phero{background:var(--ink);color:#fff;padding:176px 0 120px;position:relative;overflow:hidden}
.phero::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 60% at 85% 20%,rgba(75,134,255,.2),transparent 70%);
  mask-image:linear-gradient(#000 30%,transparent);-webkit-mask-image:linear-gradient(#000 30%,transparent)}
.phero .wrap{position:relative}
.phero .lede{color:#aab5c9;margin-top:26px;max-width:62ch}
.phero-grid{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:end}
.crumbs{font-size:.88rem;color:var(--muted-d);margin-bottom:28px}
.crumbs a{text-decoration:none;color:#c9d2e3}.crumbs a:hover{text-decoration:underline}

/* ---------- generic cards / lists ---------- */
.card{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:clamp(22px,2.6vw,34px)}
.dark .card{background:var(--ink-2);border-color:var(--line-d)}
.card h3{margin-bottom:10px}
.card p{color:var(--muted);font-size:.98rem}.dark .card p{color:var(--muted-d)}
.rows>*{padding:26px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px}
.rows>*:last-child{border-bottom:1px solid var(--line)}
.dark .rows>*,.dark .rows>*:last-child{border-color:var(--line-d)}
.rows p{color:var(--muted)}.dark .rows p{color:var(--muted-d)}
.ticks li{padding-left:28px;position:relative;margin:.55em 0}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:14px;height:8px;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg) scale(.9)}
.dark .ticks li::before{border-color:var(--blue-2)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{padding:7px 14px;border-radius:999px;border:1px solid var(--line);font-size:.88rem;background:var(--white)}
.dark .tag{background:transparent;border-color:var(--line-d);color:#cdd5e5}
.note{font-size:.88rem;color:var(--muted);border-left:3px solid var(--amber);padding:4px 0 4px 14px;max-width:70ch}
.dark .note{color:var(--muted-d)}
/* editable placeholders — replace before launch */
.ph{background:rgba(201,138,18,.16);outline:1px dashed var(--amber);outline-offset:1px;border-radius:3px;padding:0 .2em}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-size:.8rem;font-weight:500;border:1px solid var(--line);background:var(--white)}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber)}
.dark .badge{background:rgba(255,255,255,.05);border-color:var(--line-d);color:#cdd5e5}

/* accordion (native <details>) */
.acc details{border-top:1px solid var(--line)}.acc details:last-child{border-bottom:1px solid var(--line)}
.dark .acc details,.dark .acc details:last-child{border-color:var(--line-d)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 0;font-size:1.25rem;font-weight:500;letter-spacing:-.015em}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;transition:transform .35s var(--ease)}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc .acc-body{padding:0 0 26px;color:var(--muted);max-width:70ch}.dark .acc .acc-body{color:var(--muted-d)}
.acc .acc-body li{margin:.3em 0}

/* tabs */
.tabs-list{display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--line);margin-bottom:28px}
.dark .tabs-list{border-color:var(--line-d)}
.tab{background:transparent;border:0;padding:12px 16px;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s,border-color .2s}
.tab:hover{color:var(--text)}.dark .tab:hover{color:#fff}
.tab[aria-selected=true]{color:var(--text);border-color:var(--blue-2)}.dark .tab[aria-selected=true]{color:#fff}
.tabpanel[hidden]{display:none}
.tabpanel{animation:fade .45s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* reveal (progressive enhancement: content visible without JS) */
.js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.js [data-reveal].is-in{opacity:1;transform:none}

/* glow cards: pointer-following light */
[data-glow]{position:relative;overflow:hidden;isolation:isolate}
[data-glow]::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(75,134,255,.22),transparent 60%)}
[data-glow]:hover::before,[data-glow]:focus-within::before{opacity:1}

/* ---------- home: problems ---------- */
.prob{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,96px);align-items:start}
.prob .tabs-list{display:block;border:0;margin:0}
.prob .tab{display:block;width:100%;text-align:left;font-size:clamp(1.25rem,2.2vw,1.8rem);letter-spacing:-.025em;line-height:1.2;padding:20px 0 20px 24px;border:0;border-top:1px solid var(--line);position:relative;margin:0;color:#8791a3}
.prob .tab:last-child{border-bottom:1px solid var(--line)}
.prob .tab::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--blue);transform:scaleY(0);transform-origin:50% 0;transition:transform .4s var(--ease)}
.prob .tab[aria-selected=true]{color:var(--text)}
.prob .tab[aria-selected=true]::before{transform:scaleY(1)}
.prob-panel{background:var(--ink);color:#e9edf5;border-radius:28px;padding:clamp(24px,3vw,40px);position:sticky;top:110px;min-height:420px}
.prob-panel h3{font-size:.9rem;color:var(--muted-d);font-weight:500;margin-bottom:8px}
.prob-panel p{font-size:1.1rem;line-height:1.5}
.prob-panel p+h3{margin-top:26px}
.ba{display:grid;grid-template-columns:1fr;gap:18px;margin-top:30px}
.ba svg{width:100%;height:auto}
.ba .ba-n{fill:var(--ink-3);stroke:var(--ink-4)}
.ba .ba-l{stroke:var(--muted-d);stroke-width:1.5;stroke-dasharray:3 6}
.ba .ba-ok .ba-l{stroke:var(--blue-2);stroke-dasharray:none}
.ba .ba-ok .ba-n{stroke:var(--blue-2)}
.ba .ba-p{fill:var(--blue-2)}
.ba-lbl{font-size:.78rem;fill:var(--muted-d);font-family:var(--mono)}

/* ---------- home: solution bento ---------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.sol{grid-column:span 6;min-height:440px;border-radius:28px;padding:clamp(24px,3vw,40px);text-decoration:none;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--line);background:var(--white);transition:transform .45s var(--ease),border-color .3s}
.sol:hover{transform:translateY(-4px);border-color:var(--blue-2)}
.sol.s7{grid-column:span 7}.sol.s5{grid-column:span 5}
.sol.d{background:var(--ink);color:#fff;border-color:var(--ink)}
.sol.b{background:var(--blue);color:#fff;border-color:var(--blue)}
.sol.b::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.2),transparent 60%)}
.sol .vis{flex:1;display:grid;align-items:center;margin:8px 0 18px}
.sol .vis svg{width:100%;height:auto;max-height:230px}
.sol p{color:var(--muted);max-width:46ch}.sol.d p,.sol.b p{color:#b9c4dc}.sol.b p{color:#d5e1ff}
.sol .go{display:inline-flex;gap:8px;align-items:center;margin-top:18px;font-weight:500}
.sol .go svg{width:16px;transition:transform .3s var(--ease)}.sol:hover .go svg{transform:translateX(5px)}
.sol h3{margin-bottom:10px}
.vis .fl{animation:dash 6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-60}}

/* ---------- home: in-action previews ---------- */
.act{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;align-items:stretch}
.act-card{background:var(--ink-2);border:1px solid var(--line-d);border-radius:28px;padding:clamp(20px,2.6vw,34px);display:flex;flex-direction:column;gap:22px}
.act-card .meta p{color:var(--muted-d);margin-top:8px;max-width:48ch}
.frame{background:#0a0d12;border:1px solid var(--line-d);border-radius:16px;overflow:hidden}
.frame-bar{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line-d);align-items:center}
.frame-bar i{width:9px;height:9px;border-radius:50%;background:var(--ink-4)}
.frame-bar span{margin-left:10px;font-family:var(--mono);font-size:.74rem;color:var(--muted-d)}
.mini{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:12px;padding:14px;min-height:230px;font-size:.78rem}
.mini .col{background:var(--ink-2);border:1px solid var(--line-d);border-radius:10px;padding:10px;display:grid;gap:6px;align-content:start}
.mini .col b{font-size:.72rem;color:var(--muted-d);font-weight:500}
.mini .ln{background:var(--ink-3);border-radius:6px;padding:7px 8px;display:flex;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:.7rem;transition:background .4s,color .4s,transform .4s var(--ease)}
.mini .ln.on{background:rgba(75,134,255,.22);color:#fff;transform:translateX(3px)}
.mini .pg{background:#fff;color:#222;border-radius:6px;padding:10px;display:grid;gap:5px;opacity:.25;transform:scale(.97);transition:opacity .6s,transform .6s var(--ease)}
.mini .pg i{display:block;height:5px;border-radius:3px;background:#d7dce6}.mini .pg i:first-child{background:var(--blue);width:55%;height:7px}
.mini .pg i:nth-child(3n){width:80%}
.mini.s2 .pg,.mini.s3 .pg{opacity:1;transform:none}
.mini .ok{color:var(--green);font-family:var(--mono);font-size:.7rem;opacity:0;transition:opacity .4s}.mini.s3 .ok{opacity:1}
.phone{width:min(100%,290px);margin:0 auto;background:#0a0d12;border:1px solid var(--ink-4);border-radius:34px;padding:12px;box-shadow:0 30px 80px -30px rgba(75,134,255,.35)}
.phone-in{background:var(--paper);color:var(--text);border-radius:24px;overflow:hidden;min-height:400px;display:flex;flex-direction:column;font-size:.8rem}
.ph-top{background:var(--blue);color:#fff;padding:14px 14px 12px}.ph-top b{display:block;font-size:.95rem;font-weight:600}.ph-top span{opacity:.8;font-size:.74rem}
.ph-body{padding:12px;display:grid;gap:8px;align-content:start;flex:1}
.pi{background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 10px;display:flex;justify-content:space-between;align-items:center;gap:8px;transition:transform .4s var(--ease),border-color .3s,background .3s}
.pi.on{border-color:var(--blue-2);background:var(--blue-3);transform:scale(1.02)}
.ab{font-family:var(--mono);font-size:.66rem;font-weight:600;padding:2px 6px;border-radius:5px;color:#fff;background:var(--blue)}
.ab.B{background:#6b7a96}.ab.C{background:#a4adbd}
.ph-sug{margin:0 12px 12px;border:1px dashed var(--blue-2);border-radius:10px;padding:9px 10px;background:#fff;opacity:0;transform:translateY(8px);transition:.5s var(--ease)}
.phone[data-step="3"] .ph-sug{opacity:1;transform:none}
.cap{font-size:.8rem;color:var(--muted-d)}

/* ---------- why / who ---------- */
.why li{display:grid;grid-template-columns:48px 1fr;gap:18px;padding:26px 0;border-top:1px solid var(--line)}
.why li:last-child{border-bottom:1px solid var(--line)}
.why .ic{width:40px;height:40px;border-radius:12px;background:var(--blue-3);display:grid;place-items:center;color:var(--blue)}
.why .ic svg{width:20px;height:20px}
.why p{color:var(--muted);margin-top:6px}
.who{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:24px;overflow:hidden}
.who>div{background:var(--white);padding:32px 28px;min-height:210px;display:flex;flex-direction:column;justify-content:space-between;transition:background .35s,color .35s}
.who>div:hover{background:var(--blue);color:#fff}.who>div:hover p{color:#d5e1ff}
.who p{color:var(--muted);font-size:.95rem;margin-top:10px}

/* ---------- approach (scroll-linked) ---------- */
.appr{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,6vw,96px)}
.tl{position:relative;padding-left:56px}
.tl::before,.tl::after{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:2px;background:var(--ink-4)}
.tl::after{background:var(--blue-2);transform-origin:50% 0;transform:scaleY(var(--p,0))}
.tl-step{position:relative;padding:0 0 clamp(40px,7vw,88px);opacity:.38;transition:opacity .5s}
.tl-step:last-child{padding-bottom:0}
.tl-step.is-active,.tl-step.is-done{opacity:1}
.tl-step .dot{position:absolute;left:-56px;top:0;width:32px;height:32px;border-radius:50%;background:var(--ink);border:2px solid var(--ink-4);display:grid;place-items:center;font-family:var(--mono);font-size:.72rem;transition:border-color .4s,background .4s}
.tl-step.is-done .dot,.tl-step.is-active .dot{border-color:var(--blue-2)}
.tl-step.is-active .dot{background:var(--blue-2);color:#fff}
.tl-step p{color:var(--muted-d);margin-top:10px;max-width:52ch}

/* ---------- CTA + footer ---------- */
.cta{background:var(--blue);color:#fff;overflow:hidden;position:relative}
.cta .mark{position:absolute;right:-4%;bottom:-18%;width:min(60vw,720px);opacity:.1;pointer-events:none}
.cta .lede{color:#d5e1ff}
.ftr{background:var(--ink);color:#c9d2e3;padding:clamp(72px,9vw,120px) 0 36px;border-radius:40px 40px 0 0;margin-top:-40px;position:relative;z-index:3}
.ftr-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px}
.ftr img{height:92px;width:auto;margin-bottom:20px}
.ftr h2{font-size:.95rem;color:#fff;font-weight:500;margin-bottom:14px}
.ftr a{text-decoration:none;display:block;padding:4px 0;color:#97a2b6;transition:color .2s}.ftr a:hover{color:#fff}
.ftr p{color:#97a2b6;font-size:.95rem}
.ftr-bot{margin-top:64px;padding-top:24px;border-top:1px solid var(--line-d);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:.84rem;color:#6f7a8e}

/* ---------- shared diagrams / steppers ---------- */
.stepper{background:var(--ink);color:#fff;border-radius:28px;padding:clamp(22px,3vw,40px);overflow:hidden}
.st-nav{display:grid;grid-template-columns:repeat(var(--n,6),1fr);gap:8px;position:relative}
.st-btn{background:transparent;border:0;color:#8791a3;text-align:left;padding:14px 4px 0;font-size:.9rem;font-weight:500;position:relative;border-top:2px solid var(--ink-4);transition:color .3s}
.st-btn small{display:block;font-family:var(--mono);font-size:.7rem;color:#6b7589;font-weight:400;margin-bottom:4px}
.st-btn::before{content:"";position:absolute;left:0;right:100%;top:-2px;height:2px;background:var(--blue-2)}
.st-btn.is-done::before{right:0}
.st-btn.is-on{color:#fff}
.st-btn.is-on::before{right:0;transition:right var(--dur,4s) linear}
.reduce .st-btn.is-on::before{transition:none}
.st-stage{margin-top:34px;display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(20px,4vw,56px);align-items:center}
.st-stage svg{width:100%;height:auto}
.st-info h3{margin-bottom:10px}.st-info p{color:var(--muted-d)}
.st-ctl{margin-top:20px;display:flex;gap:10px}
.st-ctl button{background:transparent;border:1px solid var(--line-d);color:#c9d2e3;border-radius:999px;padding:8px 14px;font-size:.84rem}
.st-ctl button:hover{background:rgba(255,255,255,.08)}
.fx{transition:opacity .5s,fill .5s,stroke .5s,transform .6s var(--ease)}
.js .fx:not(.on){opacity:.25}
.node-t{font-size:12px;fill:#c9d2e3;font-family:var(--font)}
.node-s{font-size:10px;fill:#8791a3;font-family:var(--mono)}
.doc-card{background:#fff;color:var(--text);border-radius:14px;padding:18px;box-shadow:0 20px 60px -20px rgba(0,0,0,.5);font-size:.82rem;display:grid;gap:8px}
.doc-card .row{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding-bottom:6px;font-family:var(--mono);font-size:.74rem}
.doc-card .row b{font-weight:600}
.stat{display:inline-block;padding:3px 9px;border-radius:999px;background:var(--blue-3);color:var(--blue);font-weight:600;font-family:var(--mono);font-size:.72rem}

.dark .svc-top .vis,.svc.dark .svc-top .vis{background:var(--ink-2);border:1px solid var(--line-d)}
.who.w4{grid-template-columns:repeat(4,1fr)}
.who.w4>div{min-height:170px}
/* decision flow (Odoo customisation) */
.flow3{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.flow3>div{border:1px solid var(--line);background:var(--white);border-radius:18px;padding:22px;position:relative}
.flow3>div:not(:last-child)::after{content:"";position:absolute;right:-15px;top:50%;width:16px;height:2px;background:var(--blue)}
.flow3 b{font-family:var(--mono);color:var(--blue);font-size:.8rem;display:block;margin-bottom:10px}
.flow3 p{color:var(--muted);font-size:.93rem}

/* module map */
.mods{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.mod{background:var(--ink-2);border:1px solid var(--line-d);border-radius:16px;padding:18px;text-align:left;color:#fff;transition:background .3s,border-color .3s,transform .35s var(--ease)}
.mod:hover{border-color:var(--blue-2);transform:translateY(-3px)}
.mod[aria-pressed=true]{background:var(--blue);border-color:var(--blue)}
.mod span{display:block;font-size:1.02rem;font-weight:500}.mod small{color:var(--muted-d);font-size:.8rem}.mod[aria-pressed=true] small{color:#d5e1ff}
.mod-detail{margin-top:18px;background:var(--ink-2);border:1px solid var(--line-d);border-radius:16px;padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.mod-detail p{color:var(--muted-d)}

/* compare */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cmp .card h3{display:flex;justify-content:space-between;align-items:center}

/* leadership */
.lead{border-radius:36px;padding:clamp(24px,4vw,64px);display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,5vw,80px);align-items:start}
.lead.d{background:var(--ink);color:#e9edf5}.lead.l{background:var(--white);border:1px solid var(--line)}
.lead.l .muted,.lead.l p{color:var(--muted)} .lead.d p{color:#aab5c9}
.portrait{aspect-ratio:4/5;border-radius:24px;position:relative;overflow:hidden;display:grid;place-items:end start;padding:22px;font-size:.85rem}
.lead.d .portrait{background:linear-gradient(160deg,var(--ink-3),#0a0d12);border:1px dashed var(--ink-4);color:var(--muted-d)}
.lead.l .portrait{background:linear-gradient(160deg,var(--blue-3),#fff);border:1px dashed #9fb7e8;color:var(--blue)}
.portrait svg{position:absolute;inset:0;margin:auto;width:46%;opacity:.35}
.lead h2{margin-bottom:6px}
.lead h3{margin:30px 0 10px}
.lead blockquote{margin:0;font-size:clamp(1.15rem,1.8vw,1.5rem);letter-spacing:-.02em;line-height:1.35;border-left:3px solid var(--blue-2);padding-left:18px}
.lead.l .portrait{order:2}
.lead.l .lead-side{order:1}

/* principles */
.prin{display:grid;gap:20px}
.prin>div{display:grid;grid-template-columns:90px 1fr 1.2fr;gap:28px;padding:34px 0;border-top:1px solid var(--ink-4);align-items:start}
.prin b{font-family:var(--mono);color:var(--blue-2);font-weight:400}
.prin p{color:var(--muted-d)}

/* service blocks */
.svc-nav{position:sticky;top:72px;z-index:20;background:rgba(243,245,248,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.svc-nav .wrap{display:flex;gap:6px;overflow-x:auto;padding-top:10px;padding-bottom:10px}
.svc-nav a{white-space:nowrap;padding:8px 16px;border-radius:999px;text-decoration:none;font-size:.92rem;color:var(--muted)}
.svc-nav a:hover,.svc-nav a.is-on{background:var(--ink);color:#fff}
.svc{padding:clamp(64px,8vw,112px) 0}
.svc-top{display:grid;grid-template-columns:6fr 6fr;gap:clamp(24px,5vw,80px);align-items:center;margin-bottom:48px}
.svc-top .vis{background:var(--ink);border-radius:28px;padding:24px;min-height:300px;display:grid;align-items:center}
.svc.alt .svc-top .vis{order:-1}
.svc .vis svg{width:100%;height:auto}
.svc.dk .tag{background:transparent}
.svc-cta{margin-top:40px;padding:28px 32px;border-radius:24px;background:var(--blue);color:#fff;display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}

/* AI + submittal demo */
.sb{background:var(--ink);border-radius:28px;padding:clamp(14px,2vw,26px);color:#e9edf5}
.sb-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:6px 6px 18px}
.sb-grid{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:14px}
.pn{background:var(--ink-2);border:1px solid var(--line-d);border-radius:18px;padding:18px;min-width:0}
.pn h3{font-size:.95rem;font-weight:600;margin-bottom:4px}.pn .sub{font-size:.8rem;color:var(--muted-d);margin-bottom:14px}
.q-line{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;padding:10px;border-radius:12px;border:1px solid var(--line-d);margin-bottom:8px;cursor:pointer;transition:background .25s,border-color .25s}
.q-line:hover{background:var(--ink-3)}
.q-line input{accent-color:var(--blue-2);width:16px;height:16px}
.q-line b{display:block;font-weight:500;font-size:.9rem}.q-line small{color:var(--muted-d);font-family:var(--mono);font-size:.7rem}
.q-line:has(input:checked){border-color:var(--blue-2);background:rgba(75,134,255,.1)}
.src{display:flex;align-items:center;gap:10px;font-size:.84rem;padding:8px 0;border-top:1px solid var(--line-d);color:#c9d2e3}
.src i{width:22px;height:26px;border-radius:4px;background:var(--ink-4);flex:none;position:relative}
.src i::after{content:"";position:absolute;left:4px;right:4px;top:8px;height:2px;background:#6b7589;box-shadow:0 5px #6b7589,0 10px #6b7589}
.src.hit i{background:var(--blue)}.src.hit i::after{background:#fff;box-shadow:0 5px #fff,0 10px #fff}
.src em{margin-left:auto;font-style:normal;color:var(--muted-d);font-family:var(--mono);font-size:.7rem}
.gen{margin-top:16px;display:grid;gap:8px}
.gen li{display:flex;gap:10px;align-items:center;font-size:.84rem;color:#6b7589;transition:color .3s}
.gen li::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid var(--ink-4);flex:none;transition:.3s}
.gen li.run{color:#fff}.gen li.run::before{border-color:var(--blue-2);border-top-color:transparent;animation:spin .8s linear infinite}
.gen li.done{color:#c9d2e3}.gen li.done::before{background:var(--green);border-color:var(--green)}
@keyframes spin{to{transform:rotate(360deg)}}
.doc{background:#fff;color:#1b2230;border-radius:12px;padding:22px;min-height:320px;font-size:.82rem;display:grid;gap:12px;align-content:start}
.doc.empty{display:grid;place-items:center;text-align:center;color:#8b94a6;background:repeating-linear-gradient(135deg,#f6f7fa,#f6f7fa 10px,#eef0f5 10px,#eef0f5 20px)}
.doc h4{font-size:1rem;font-weight:600;color:var(--blue)}
.doc .ds{border:1px solid var(--line);border-radius:10px;padding:12px;display:grid;gap:6px;animation:fade .5s var(--ease) both}
.doc .ds-h{display:flex;justify-content:space-between;gap:8px;align-items:center}
.doc table{width:100%;border-collapse:collapse;font-size:.76rem}
.doc td{padding:4px 0;border-top:1px solid #eceff4}.doc td:first-child{color:#6a7487;width:46%}
.doc .src-ref{font-family:var(--mono);font-size:.66rem;color:#8a93a6}
.vbtn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 12px;font-size:.74rem;font-weight:500;color:var(--text)}
.vbtn:hover{border-color:var(--blue)}
.vbtn[aria-pressed=true]{background:var(--green);border-color:var(--green);color:#fff}
.flag{color:var(--amber);font-weight:600;font-size:.72rem}
.issue{margin-top:12px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.issue button:disabled{opacity:.4;cursor:not-allowed}
.issue .msg{font-size:.82rem;color:var(--muted-d)}
.demo-lbl{display:inline-flex;gap:8px;align-items:center;font-size:.82rem;color:var(--muted-d)}
.demo-lbl::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--amber)}

/* FMCG demo */
.fm{background:var(--ink);border-radius:28px;padding:clamp(14px,2vw,26px);color:#e9edf5}
.fm-app{background:var(--paper);color:var(--text);border-radius:20px;overflow:hidden;display:grid;grid-template-columns:1fr 340px}
.fm-main{padding:20px;min-width:0}
.fm-side{background:#fff;border-left:1px solid var(--line);padding:20px;display:flex;flex-direction:column;gap:18px}
.fm-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:16px}
.fm-bar label{font-size:.78rem;color:var(--muted);display:block;margin-bottom:4px}
.fm-bar select{padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:#fff;min-width:220px;font-weight:500}
.ctx{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px;font-size:.84rem}
.ctx b{display:block;font-size:.72rem;color:var(--muted);font-weight:500}
.fm-cats{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:14px}
.chipb{white-space:nowrap;border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font-size:.86rem;font-weight:500;color:var(--muted)}
.chipb[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.fm-filter{display:flex;align-items:center;gap:10px;font-size:.82rem;color:var(--muted);margin-bottom:14px;flex-wrap:wrap}
.pg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.prod{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px;text-align:left;transition:border-color .25s,transform .3s var(--ease),box-shadow .3s}
.prod:hover{border-color:var(--blue-2);transform:translateY(-2px);box-shadow:0 14px 30px -20px rgba(26,74,159,.5)}
.prod .pimg{height:64px;border-radius:10px;display:grid;place-items:center;font-family:var(--mono);font-size:.74rem;color:#fff;background:var(--c,var(--blue))}
.prod b{font-weight:600;font-size:.92rem;line-height:1.25}.prod small{color:var(--muted);font-size:.76rem}
.prod .pr{display:flex;justify-content:space-between;align-items:center;margin-top:auto}
.prod .price{font-family:var(--mono);font-size:.86rem;font-weight:600}
.add{border:0;background:var(--blue);color:#fff;border-radius:999px;padding:7px 14px;font-size:.8rem;font-weight:500}
.add:hover{background:#2358b8}
.prod.in{border-color:var(--blue-2);background:var(--blue-3)}
.prod .rec{font-size:.7rem;color:var(--green);font-weight:600}
.bk h3{display:flex;justify-content:space-between;font-size:1rem}
.bk-empty{color:var(--muted);font-size:.9rem;border:1px dashed var(--line);border-radius:12px;padding:18px;text-align:center}
.bk-line{display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px 0;border-bottom:1px solid var(--line);font-size:.88rem}
.bk-line small{color:var(--muted);display:block;font-family:var(--mono);font-size:.72rem}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.qty button{border:0;background:#fff;width:30px;height:30px;font-size:1rem}.qty button:hover{background:var(--blue-3)}
.qty span{min-width:28px;text-align:center;font-family:var(--mono);font-size:.84rem}
.tot{display:grid;gap:6px;font-size:.88rem;border-top:2px solid var(--ink);padding-top:12px}
.tot div{display:flex;justify-content:space-between}.tot .g{font-size:1.15rem;font-weight:700}
.tot .mono{font-family:var(--mono)}
.sug{border:1px solid var(--blue-2);border-radius:14px;padding:14px;background:var(--blue-3)}
.sug h3{font-size:.92rem;margin-bottom:8px}
.sug-i{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:8px 0;border-top:1px solid rgba(26,74,159,.18);font-size:.84rem}
.sug-i small{display:block;color:var(--muted);font-size:.72rem}
.sug-i:first-of-type{border-top:0}

/* contact */
.form{display:grid;gap:20px}
.fld label,.fld legend{display:block;font-weight:500;font-size:.92rem;margin-bottom:8px}
.fld input,.fld select,.fld textarea{width:100%;padding:15px 16px;border-radius:14px;border:1px solid var(--line);background:#fff;transition:border-color .2s,box-shadow .2s}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--blue-2);box-shadow:0 0 0 4px rgba(75,134,255,.18)}
.fld textarea{min-height:150px;resize:vertical}
.fld .err{color:var(--red);font-size:.84rem;margin-top:6px;min-height:0}
.fld.bad input,.fld.bad select,.fld.bad textarea{border-color:var(--red)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
fieldset{border:0;padding:0;margin:0}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills input{position:absolute;opacity:0}
.pills label{margin:0;padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:500;font-size:.9rem;cursor:pointer;transition:.2s}
.pills input:checked+label{background:var(--ink);color:#fff;border-color:var(--ink)}
.pills input:focus-visible+label{outline:2px solid var(--blue-2);outline-offset:3px}
.ok-box{background:var(--ink);color:#fff;border-radius:28px;padding:clamp(28px,4vw,48px);animation:fade .5s var(--ease)}
.ok-box p{color:#aab5c9;margin-top:12px}
.contact-side .card+.card{margin-top:16px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .nav{display:none}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .sb-grid{grid-template-columns:1fr 1fr}.sb-grid .pn:last-child{grid-column:1/-1}
  .fm-app{grid-template-columns:1fr}.fm-side{border-left:0;border-top:1px solid var(--line)}
  .flow3{grid-template-columns:1fr 1fr}.flow3>div::after{display:none}
  .mods{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .hero{padding-top:110px;min-height:auto}
  .hero-grid,.split,.split.rev,.prob,.appr,.act,.svc-top,.lead,.phero-grid,.cmp,.menu-grid,.st-stage,.mod-detail{grid-template-columns:1fr}
  .svc.alt .svc-top .vis{order:0}
  .sticky,.prob-panel{position:static}
  .lead.l .portrait,.lead.l .lead-side{order:0}
  .portrait{aspect-ratio:16/10}
  .g3,.g4,.who,.who.w4{grid-template-columns:1fr 1fr}
  .bento{display:block}.sol,.sol.s7,.sol.s5{display:flex;margin-bottom:16px;min-height:380px}
  .rows>*{grid-template-columns:1fr;gap:8px}
  .prin>div{grid-template-columns:1fr;gap:10px}
  .st-nav{grid-template-columns:repeat(3,1fr);row-gap:18px}
  .net{max-width:520px;margin:0 auto}
  .menu-side{display:none}
  .brand span{display:none}
}
@media (max-width:640px){
  body{font-size:16px}
  .g2,.g3,.g4,.who,.who.w4,.f2,.flow3,.ftr-grid{grid-template-columns:1fr}
  .mods{grid-template-columns:1fr 1fr}
  .sb-grid{grid-template-columns:1fr}
  .mini{grid-template-columns:1fr 1fr}.mini .col:last-child{grid-column:1/-1}
  .ctx{grid-template-columns:1fr 1fr}
  .hdr .btn{display:none}
  .lap{border-radius:28px 28px 0 0;margin-top:-28px}
  .phero{padding:140px 0 88px}
  .svc-cta{padding:22px}
  .btn{padding:14px 20px}
  .menu-links a small{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js [data-reveal]{opacity:1;transform:none}
}

/* ---------- late refinements ---------- */
.split>*,.grid>*,.act>*,.svc-top>*,.lead>*,.prob>*,.appr>*,.phero-grid>*,.hero-grid>*,.fm-app>*,.sb-grid>*,.st-stage>*{min-width:0}
.vbtn{white-space:nowrap;flex:none}
.fm-app{overflow:clip}
@media (min-width:1101px){.fm-side{position:sticky;top:88px;align-self:start;max-height:calc(100vh - 100px);overflow-y:auto}}
.svc-nav{transition:top .45s var(--ease)}
html:has(.hdr.is-hidden) .svc-nav{top:0}
.lead.d .tag{background:transparent;border-color:var(--line-d);color:#cdd5e5}
.lead.d .ticks li::before{border-color:var(--blue-2)}
.lead.d h3{color:#fff}

/* =========================================================
   VERSION 2 additions
   ========================================================= */
.hdr-tel{display:none;font-size:.9rem;color:#c9d2e3;text-decoration:none;padding:0 6px}.hdr-tel:hover{color:#fff}
@media (min-width:1360px){.hdr-tel{display:inline}}
.cta-direct{margin-top:26px;color:#d5e1ff;font-size:.98rem}.cta-direct a{color:#fff;text-underline-offset:3px}
a.mail,.ftr p a{display:inline}
.menu-side a{color:#c9d2e3;text-underline-offset:3px}.menu-side a:hover{color:#fff}

/* photo / screenshot slots — drop a file in place and it covers the placeholder */
.portrait img,.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.shot{position:relative;margin:0;aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:repeating-linear-gradient(135deg,var(--ink-2),var(--ink-2) 14px,#1a212c 14px,#1a212c 28px);border:1px dashed var(--ink-4);display:grid;place-items:center;text-align:center;padding:24px;color:var(--muted-d)}
.light .shot,.white .shot{background:repeating-linear-gradient(135deg,#eef1f6,#eef1f6 14px,#e6eaf1 14px,#e6eaf1 28px);border-color:#b8c3d6;color:var(--muted)}
.shot .ph-in{max-width:42ch;position:relative;z-index:1}.shot b{display:block;color:inherit;font-weight:600;margin-bottom:6px;color:var(--text)}.dark .shot b{color:#fff}
.shot small{display:block;font-size:.8rem;opacity:.85}
.shot code{font-family:var(--mono);font-size:.74rem;background:rgba(127,127,127,.18);padding:2px 6px;border-radius:5px}
figcaption.cap2{font-size:.82rem;color:var(--muted);margin-top:10px}.dark figcaption.cap2{color:var(--muted-d)}
.gal-top{display:grid;grid-template-columns:5fr 7fr;gap:clamp(20px,4vw,56px);align-items:center}

/* founders */
.fdrs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
.fdr .portrait{aspect-ratio:4/5;margin-bottom:26px}
.fdr.d .portrait{background:linear-gradient(160deg,var(--ink-3),#0a0d12);border:1px dashed var(--ink-4);color:var(--muted-d)}
.fdr.l .portrait{background:linear-gradient(160deg,var(--blue-3),#fff);border:1px dashed #9fb7e8;color:var(--blue)}
.fdr .portrait svg{position:absolute;inset:0;margin:auto;width:42%;opacity:.35}
.fdr .portrait span{position:relative;z-index:1}
.fdr h3.name{font-size:clamp(1.8rem,3vw,2.6rem);letter-spacing:-.035em;line-height:1.05;font-weight:500}
.fdr .role{margin:8px 0 18px;font-weight:600;color:var(--blue)}.dark .fdr .role{color:var(--blue-2)}
.fdr .stmt{font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.35;letter-spacing:-.02em;margin-bottom:16px}
.fdr h4{font-size:.95rem;margin:22px 0 10px;font-weight:600}
.fdr p{color:var(--muted)}.dark .fdr p{color:var(--muted-d)}
.fdr:nth-child(2){margin-top:clamp(0px,6vw,88px)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-radius:20px;overflow:hidden;border:1px solid var(--line)}
.pair>div{background:var(--white);padding:28px}.pair p{color:var(--muted);margin-top:8px}

/* case study cards (home + index) */
.cs-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.cs{grid-column:span 6;border-radius:28px;padding:clamp(22px,3vw,40px);text-decoration:none;display:flex;flex-direction:column;gap:18px;min-height:400px;border:1px solid var(--line);background:var(--white);transition:transform .45s var(--ease),border-color .3s}
.cs:hover{transform:translateY(-4px);border-color:var(--blue-2)}
.cs.s5{grid-column:span 5}.cs.s7{grid-column:span 7}
.cs.f{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(24px,4vw,56px);align-items:center;background:var(--ink);color:#fff;border-color:var(--ink);min-height:0}
.cs.b{background:var(--blue);color:#fff;border-color:var(--blue)}
.cs.t{background:#e9eef9;border-color:#d4def3}
.cs.d{background:var(--ink-2);color:#fff;border-color:var(--ink-2)}
.cs .ind{font-size:.88rem;color:var(--muted)}.cs.f .ind,.cs.b .ind,.cs.d .ind{color:#aab5c9}.cs.b .ind{color:#d5e1ff}
.cs h3{margin:6px 0 8px}
.cs p{color:var(--muted);max-width:52ch}.cs.f p,.cs.d p{color:#aab5c9}.cs.b p{color:#d5e1ff}
.cs .vis{flex:1;display:grid;align-items:center}.cs .vis svg{width:100%;height:auto;max-height:230px}
.cs .go{display:inline-flex;gap:8px;align-items:center;font-weight:500;margin-top:auto}.cs .go svg{width:16px;transition:transform .3s var(--ease)}.cs:hover .go svg{transform:translateX(5px)}
.cs .badge{align-self:flex-start}
.cs.f .badge,.cs.b .badge,.cs.d .badge{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
.status{display:inline-flex;gap:8px;align-items:center;font-size:.8rem;font-weight:500;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--white);color:var(--text)}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
.status.ongoing::before{background:var(--amber);animation:pulse 1.8s ease-in-out infinite}
.status.confirm::before{background:#9aa4b5}
.dark .status,.phero .status,.cs.f .status,.cs.b .status,.cs.d .status{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22);color:#fff}
@keyframes pulse{50%{opacity:.3}}
.cs-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--line-d);border:1px solid var(--line-d);border-radius:16px;overflow:hidden;margin-top:34px;max-width:900px}
.cs-meta>div{background:var(--ink);padding:14px 16px;font-size:.92rem}.cs-meta b{display:block;font-size:.74rem;color:var(--muted-d);font-weight:500;margin-bottom:4px}
.cs-vis{background:var(--ink-2);border:1px solid var(--line-d);border-radius:24px;padding:22px}.cs-vis svg{width:100%;height:auto}
.prose{max-width:68ch}.prose p+p{margin-top:1em}
.scope2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.scope2>div{border-radius:22px;padding:clamp(22px,3vw,34px)}
.sc-conf{background:var(--white);border:1px solid var(--line)}
.sc-pot{border:1px dashed #9fb0cc;background:transparent}
.dark .sc-conf{background:var(--ink-2);border-color:var(--line-d)}.dark .sc-pot{border-color:var(--ink-4)}
.lbl{display:inline-block;font-size:.74rem;font-weight:600;padding:4px 10px;border-radius:999px;margin-bottom:14px}
.lbl.c{background:#e1f5ec;color:#0e7a4f}.lbl.p{background:#fdf1d8;color:#8a5a00}
.pull{font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.15;letter-spacing:-.03em;font-weight:500;max-width:24ch}
.sidecard{position:sticky;top:110px;background:var(--ink);color:#fff;border-radius:24px;padding:26px}
.sidecard dl{margin:0;display:grid;gap:14px}.sidecard dt{font-size:.76rem;color:var(--muted-d)}.sidecard dd{margin:2px 0 0}
.diag{background:var(--ink);border-radius:28px;padding:clamp(18px,3vw,36px);color:#fff}.diag svg{width:100%;height:auto}
.gal-tabs .tab{font-size:.95rem}

/* compliance demo */
.cmpd{background:var(--ink);border-radius:28px;padding:clamp(14px,2vw,26px);color:#e9edf5}
.cmpd .st-nav{--n:5;margin:6px 6px 18px}
.st-btn:disabled{opacity:.45;cursor:not-allowed}
.cmp-app{display:grid;grid-template-columns:minmax(260px,.85fr) 1.7fr;gap:14px;align-items:start}
.cmp-app>*{min-width:0}
.sp{background:#fff;color:#1b2230;border-radius:16px;padding:22px;font-size:.88rem;line-height:1.55;position:sticky;top:96px}
.sp p+p{margin-top:.7em}.sp-h{font-weight:700;letter-spacing:.01em}.sp-s{color:#6a7487;font-size:.78rem}
.sp mark{background:none;color:inherit;border-bottom:2px solid transparent;transition:background .25s,border-color .25s}
.sp.found mark{background:rgba(75,134,255,.16);border-color:var(--blue-2)}
.sp.found mark.hl{background:#ffd76a;border-color:#c98a12}
.cmp-pane{background:var(--ink-2);border:1px solid var(--line-d);border-radius:16px;padding:clamp(16px,2vw,26px);min-height:440px;display:grid;gap:14px;align-content:start}
.cmp-pane h3{font-size:1.15rem;font-weight:600}.cmp-pane>p{color:var(--muted-d)}
.cmp-pane .btn{justify-self:start}
.dz{border:1px dashed var(--ink-4);border-radius:14px;padding:22px;text-align:center;background:var(--ink-3)}.dz small{display:block;color:var(--muted-d);margin-top:4px}
.rq{display:grid;gap:8px}
.rq li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line-d);border-radius:12px;background:var(--ink-3);animation:fade .45s var(--ease) both;transition:border-color .2s}
.rq li:hover,.rq li:focus-visible{border-color:var(--blue-2)}.rq small{font-family:var(--mono);color:var(--muted-d);font-size:.72rem}
.cands{display:grid;gap:10px}
.cand{display:grid;grid-template-columns:22px 1fr;gap:12px;padding:14px;border:1px solid var(--line-d);border-radius:14px;cursor:pointer;background:var(--ink-3);transition:border-color .2s,background .2s}
.cand.on{border-color:var(--blue-2);background:rgba(75,134,255,.1)}.cand input{accent-color:var(--blue-2);margin-top:3px}
.cand small{display:block;color:var(--muted-d);font-size:.76rem}
.docs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.docs em{font-style:normal;font-size:.74rem;padding:3px 9px;border-radius:999px;border:1px solid var(--line-d);color:#c9d2e3}
.mx-wrap{overflow-x:auto;border-radius:12px;background:#fff;color:#1b2230}
.mx{width:100%;border-collapse:collapse;font-size:.82rem;min-width:620px}
.mx th{text-align:left;font-size:.72rem;color:#6a7487;font-weight:600;padding:10px 12px;border-bottom:1px solid #e3e7ee;background:#f6f8fb;white-space:nowrap}
.mx td{padding:10px 12px;border-bottom:1px solid #eceff4;vertical-align:top}
.mx td small{display:block;color:#8a93a6;font-family:var(--mono);font-size:.68rem;margin-top:2px}
.mx tr[data-r]:hover,.mx tr[data-r]:focus-visible{background:#f3f7ff}
.mx .ev{color:#4b566a}.mx .rv{white-space:nowrap}.mx .rv .vbtn+.vbtn{margin-left:6px}
.as{display:inline-flex;gap:6px;align-items:center;padding:3px 10px 3px 4px;border-radius:999px;font-size:.74rem;font-weight:600;white-space:nowrap}
.as i{font-style:normal;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:.7rem;background:rgba(0,0,0,.1)}
.as-meets{background:#e1f5ec;color:#0e7a4f}.as-verify{background:#fdf1d8;color:#8a5a00}.as-differs{background:#fde4e1;color:#a52a1f}.as-missing{background:#eceff4;color:#566074}
.cmp-foot{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;padding:16px 6px 4px}
.cmp-foot .note{margin:0}
.vbtn[aria-pressed=true]{background:var(--green);border-color:var(--green);color:#fff}

/* FMCG guided steps + gap tag */
.fm-steps{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px;padding:0;list-style:none;counter-reset:s}
.fm-steps li{counter-increment:s;font-size:.8rem;font-weight:500;padding:7px 12px 7px 8px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--muted);display:flex;gap:8px;align-items:center}
.fm-steps li::before{content:counter(s);width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.7rem;background:var(--paper);border:1px solid var(--line)}
.fm-steps li.done{color:var(--text)}.fm-steps li.done::before{content:"✓";background:var(--green);color:#fff;border-color:var(--green)}
.fm-steps li.cur{border-color:var(--blue-2);color:var(--blue);background:var(--blue-3)}.fm-steps li.cur::before{background:var(--blue-2);color:#fff;border-color:var(--blue-2)}
.prod .rec.gap{color:#8a5a00}
.prod .tagrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

@media (max-width:1100px){.cmp-app{grid-template-columns:1fr}.sp{position:static}.fdrs{grid-template-columns:1fr}.fdr:nth-child(2){margin-top:0}}
@media (max-width:900px){
  .cs,.cs.s5,.cs.s7{grid-column:1/-1;min-height:0}.cs.f{grid-template-columns:1fr}
  .scope2,.gal-top,.pair{grid-template-columns:1fr}.sidecard{position:static}
}
.fl{animation:dash 6s linear infinite}
.fdr{border-radius:32px;padding:clamp(20px,3vw,36px)}
.fdr.d{background:var(--ink);color:#e9edf5}
.fdr.l{background:var(--paper);border:1px solid var(--line)}
.fdr .ticks{margin-top:4px}
.cs-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:center;padding:clamp(40px,6vw,72px) 0;border-top:1px solid var(--line)}
.cs-row:first-child{border-top:0;padding-top:0}
.cs-row.alt .cs-vis2{order:2}
.cs-row .status{background:var(--white)}
@media (max-width:900px){.cs-row{grid-template-columns:1fr}.cs-row.alt .cs-vis2{order:0}}
.pair p{color:var(--muted)}
.cs .vis svg{max-height:210px}
.cs .status{align-self:flex-start}
.fdr .stmt{color:var(--text)}
.fdr.dark .role{color:var(--blue-2)}
.fdr.dark p{color:#aab5c9}
.fdr.dark .stmt{color:#fff}

/* =========================================================
   VERSION 3 additions
   ========================================================= */
/* --- navigation: dropdowns / mega-menu --- */
.nav{gap:2px}
.nav-top{padding:8px 13px;border-radius:999px;text-decoration:none;font-size:.95rem;color:#c9d2e3;transition:color .2s,background .2s;white-space:nowrap}
.nav-top:hover,.nav-top[aria-current]{color:#fff;background:rgba(255,255,255,.08)}
.nav-item{position:relative;display:flex;align-items:center}
.nav-item .nav-top{padding-right:4px}
.dd-btn{width:22px;height:30px;border:0;background:transparent;color:#c9d2e3;border-radius:999px;padding:0;position:relative}
.dd-btn::before{content:"";position:absolute;left:6px;top:11px;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .3s var(--ease)}
.nav-item.is-open .dd-btn::before{transform:rotate(-135deg);top:14px}
.dd{position:absolute;top:calc(100% + 10px);left:-14px;min-width:380px;background:#12161e;border:1px solid var(--line-d);border-radius:22px;padding:12px;box-shadow:0 30px 80px -30px rgba(0,0,0,.8);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .35s var(--ease),visibility 0s .35s}
.dd::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav-item.is-open .dd{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .35s var(--ease),visibility 0s}
.dd-intro{padding:10px 12px 12px;color:var(--muted-d);font-size:.9rem;border-bottom:1px solid var(--line-d);margin-bottom:6px;max-width:44ch}
.dd-grid{display:grid;gap:2px}
.nav .dd-a{display:block;padding:12px 14px;border-radius:14px;text-decoration:none;color:#fff;transition:background .2s}
.nav .dd-a:hover,.nav .dd-a[aria-current]{background:rgba(255,255,255,.07)}
.dd-a b{display:block;font-weight:500;font-size:.98rem}.dd-a small{display:block;color:var(--muted-d);font-size:.84rem;margin-top:2px}
.dd-wide{min-width:430px;background:linear-gradient(160deg,#16213a,#12161e 55%)}
.dd-wide .dd-a b::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--blue-2);margin-left:8px;vertical-align:middle}
.menu-links a.sub{font-size:clamp(1.05rem,1.8vw,1.35rem);padding:5px 0 5px 28px;color:#c9d2e3;border-bottom:0;letter-spacing:-.02em;line-height:1.2}
.menu-links a.sub::before{content:"";width:12px;height:1px;background:#566074;align-self:center;margin-left:-28px;margin-right:12px;flex:none}
.menu-links a{font-size:clamp(1.4rem,3vw,2.3rem);padding:8px 0}
@media (min-width:1101px){.menu-btn{display:none}}
@media (max-width:1100px){.nav{display:none}}
.ftr-grid{grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr}
@media (max-width:1100px){.ftr-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.ftr-grid{grid-template-columns:1fr}}

/* --- AI Submittal Builder demo --- */
.sbd{background:var(--ink);border-radius:28px;padding:clamp(14px,2vw,26px);color:#e9edf5}
.sbd .st-nav{--n:5;margin:6px 6px 18px}
.sbd-app{display:grid;grid-template-columns:1.8fr 1fr;gap:14px;align-items:start}.sbd-app>*{min-width:0}
.sbd-main{background:var(--ink-2);border:1px solid var(--line-d);border-radius:16px;padding:clamp(16px,2vw,26px);min-height:460px;display:grid;gap:14px;align-content:start}
.sbd-main h3{font-size:1.15rem;font-weight:600}.sbd-main>p{color:var(--muted-d)}.sbd-main>.btn{justify-self:start}
.sbd-side{display:grid;gap:14px;position:sticky;top:96px}
.hint{color:var(--muted-d);font-size:.8rem}
.ql .q-line{grid-template-columns:22px 1fr auto}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.two>*{min-width:0}
.dz{border:1px dashed var(--ink-4);border-radius:14px;padding:18px;background:var(--ink-3);display:grid;gap:8px;align-content:start}
.dz small{color:var(--muted-d)}.dz.ok{border-style:solid;border-color:var(--blue-2);background:rgba(75,134,255,.08)}
.chip-f{display:inline-block;font-family:var(--mono);font-size:.72rem;padding:4px 9px;border-radius:8px;background:var(--ink-4);color:#e9edf5;width:fit-content;max-width:100%;overflow-wrap:anywhere}
.sp-l,.ix-l{font-size:.8rem;color:#c9d2e3;display:grid;gap:6px;margin-top:4px}.ix-l{list-style:decimal;padding-left:18px}
.sp-l li{padding:6px 8px;background:var(--ink-2);border-radius:8px}
.src-t{display:inline-block;font-size:.68rem;font-weight:600;padding:2px 8px;border-radius:999px;margin-top:4px}
.src-t.lib{background:#e3ecff;color:#1a4a9f}.src-t.doc{background:#e6f4ee;color:#0e7a4f}.src-t.ai{background:#f3e8fb;color:#6b3f8f}
.cmpl{display:grid;gap:8px}
.cmpl li{display:grid;grid-template-columns:30px 1fr;gap:12px;padding:12px;border:1px solid var(--line-d);border-radius:12px;background:var(--ink-3);animation:fade .5s var(--ease) both}
.cmpl li.warn{border-color:var(--amber)}.cmpl .n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--blue-2);color:#fff;font-size:.74rem;font-family:var(--mono)}
.cmpl li.warn .n{background:var(--amber)}.cmpl small{display:block;color:var(--muted-d);font-size:.82rem}.cmpl em{display:block;font-style:normal;color:#f0c46a;font-size:.8rem;margin-top:4px}
.pcode{display:block;margin:6px 0 10px;font-weight:600;font-size:.9rem}
.docs-l{display:grid;gap:6px}
.docs-l li{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:center;font-size:.84rem;padding:8px 10px;border-radius:10px;background:var(--ink-3)}
.docs-l i{width:14px;height:18px;border-radius:3px;background:var(--blue);display:block}.docs-l em{font-style:normal;color:var(--muted-d);font-size:.72rem}
.lib-l{display:grid;gap:6px}.lib-l li{font-size:.8rem;padding:8px 10px;border-radius:10px;background:var(--ink-3);color:#c9d2e3}
.lib-l b{display:block;font-family:var(--mono);font-size:.68rem;color:var(--blue-2);font-weight:500}.lib-l li.new{outline:1px solid var(--green);animation:fade .5s var(--ease)}.lib-l li.new b{color:var(--green)}
.ql{display:grid;gap:0}
@media (max-width:1100px){.sbd-app{grid-template-columns:1fr}.sbd-side{position:static;grid-template-columns:1fr 1fr}}
@media (max-width:640px){.two,.sbd-side{grid-template-columns:1fr}}

/* --- field-sales visit flow --- */
.fm-shell{background:var(--paper);color:var(--text);border-radius:20px;padding:clamp(14px,2vw,22px)}
.fm-stages{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px;padding:0;list-style:none}
.fm-stages button{display:flex;gap:8px;align-items:center;font-size:.82rem;font-weight:500;padding:7px 14px 7px 8px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--muted)}
.fm-stages button span{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.7rem;background:var(--paper);border:1px solid var(--line)}
.fm-stages button.done{color:var(--text)}.fm-stages button.done span{background:var(--green);color:#fff;border-color:var(--green)}
.fm-stages button.on{border-color:var(--blue-2);color:var(--blue);background:var(--blue-3)}.fm-stages button.on span{background:var(--blue-2);color:#fff;border-color:var(--blue-2)}
.fm-bar-top{display:flex;gap:12px;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;margin-bottom:16px}
.fm-bar-top label{font-size:.78rem;color:var(--muted);display:block;margin-bottom:4px}.fm-bar-top select{padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:#fff;min-width:220px;font-weight:500}
.fm-mini{font-family:var(--mono);font-size:.82rem;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 14px}
.fm-cols{display:grid;grid-template-columns:1.7fr 1fr;gap:20px;align-items:start}.fm-cols>*{min-width:0}
.fm-aside{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;display:grid;gap:10px;position:sticky;top:90px}
.fm-body h3{font-size:1.15rem;margin-bottom:6px}.fm-body h4{font-size:.92rem;margin:20px 0 8px}
.tasks{display:grid;gap:8px;margin:14px 0}.tk{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer}
.tk input,.oc input{accent-color:var(--blue);width:18px;height:18px}
.lab{display:block;font-size:.85rem;font-weight:500;margin:14px 0 6px}
.fm-body textarea,.fm-tools input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#fff}
.ph-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}.fm-shell .chip-f{background:var(--blue-3);color:var(--blue)}
.prev>div{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.bars{display:flex;gap:10px;align-items:flex-end;height:120px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px}
.bars>div{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;align-items:center}.bars i{display:block;width:100%;background:var(--blue-2);border-radius:6px 6px 0 0;min-height:4px}.bars small{color:var(--muted);font-size:.7rem}
.fm-tools{display:grid;gap:10px;margin:12px 0 14px}
.og{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-top:12px}.og h4{margin:0 0 2px}
.oc{border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin:14px 0;background:#fff;display:flex;gap:18px;flex-wrap:wrap}.oc legend{font-size:.82rem;font-weight:500;padding:0 6px}.oc label{display:flex;gap:8px;align-items:center;font-size:.9rem}
.rv-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:grid;gap:4px}
.mgmt{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:18px 0}.mgmt>div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px}.mgmt b{display:block;font-size:1.3rem;font-weight:600}.mgmt span{font-size:.78rem;color:var(--muted)}
.fm-done{display:grid;gap:8px}
.fm-sum .bk-empty{margin:8px 0}
@media (max-width:900px){.fm-cols{grid-template-columns:1fr}.fm-aside{position:static}}

/* --- websites: product catalogue demo --- */
.catd{background:var(--ink);border-radius:28px;padding:clamp(14px,2vw,26px);color:#e9edf5}
.cat-app{background:var(--paper);color:var(--text);border-radius:20px;padding:clamp(14px,2vw,22px);display:grid;grid-template-columns:1.5fr 1fr;gap:20px;align-items:start}.cat-app>*{min-width:0}
.cat-top{display:grid;grid-template-columns:1fr auto;gap:10px;margin-bottom:12px}.cat-top input,.cat-top select{padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#fff;width:100%}
.cat-meta{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;color:var(--muted);margin:10px 0}.cat-meta button{border:0;background:none;color:var(--blue);text-decoration:underline;font-size:.85rem}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.cp{text-align:left;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;display:grid;gap:6px;transition:border-color .2s,transform .3s var(--ease)}.cp:hover{border-color:var(--blue-2);transform:translateY(-2px)}.cp.on{border-color:var(--blue-2);background:var(--blue-3)}
.cp-i{height:56px;border-radius:10px;background:linear-gradient(135deg,#1a4a9f,#4b86ff);color:#fff;display:grid;place-items:center;font-family:var(--mono);font-size:.72rem}.cp small{color:var(--muted);font-size:.76rem}
.cat-side{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;display:grid;gap:12px;position:sticky;top:90px}
.cat-side h3{font-size:1.1rem}.cat-side h4{font-size:.9rem;margin-top:6px}
.spec{width:100%;border-collapse:collapse;font-size:.86rem}.spec td{padding:7px 0;border-top:1px solid var(--line)}.spec td:first-child{color:var(--muted);width:42%}
.cat-side .docs-l li{background:var(--paper)}.cat-side .docs-l em{color:var(--muted)}
.cat-req{display:grid;gap:6px;border-top:2px solid var(--ink);padding-top:12px}.cat-req ul{display:grid;gap:6px}.cat-req li{display:flex;justify-content:space-between;gap:8px;font-size:.88rem;background:var(--paper);padding:8px 10px;border-radius:10px}.cat-req li button{border:0;background:none;font-size:1.1rem}
@media (max-width:900px){.cat-app{grid-template-columns:1fr}.cat-side{position:static}}

/* --- custom solutions hub, workflow, misc --- */
.wf{background:var(--ink);border-radius:28px;padding:clamp(18px,3vw,36px)}
.wf svg{width:100%;height:auto}
.hub{display:grid;gap:clamp(48px,7vw,96px)}
.hub-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:center}.hub-row.rev .hub-v{order:2}
.hub-v{background:var(--ink);border-radius:28px;padding:clamp(18px,3vw,32px)}.hub-v svg{width:100%;height:auto}
.hub-v.b{background:var(--blue)}
.statement{font-size:clamp(1.6rem,3.4vw,2.8rem);line-height:1.15;letter-spacing:-.03em;font-weight:500;max-width:26ch}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.apprl{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-d);border:1px solid var(--line-d);border-radius:20px;overflow:hidden}.apprl>div{background:var(--ink-2);padding:22px}.apprl b{font-family:var(--mono);color:var(--blue-2);font-weight:400;font-size:.8rem}.apprl p{color:var(--muted-d);margin-top:8px;font-size:.92rem}
.hosting{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden}.hosting>div{background:var(--white);padding:26px}.hosting p{color:var(--muted);margin-top:8px}
@media (max-width:900px){.hub-row,.apprl,.hosting{grid-template-columns:1fr}.hub-row.rev .hub-v{order:0}}
.nameplate{font-family:var(--mono);font-size:.8rem}
.grp-h{font-size:1rem;font-weight:600;color:var(--muted);margin:0 0 14px;letter-spacing:-.005em}
.sol.w{grid-column:1/-1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,48px);align-items:center}
.sol.w .vis{margin:0}.sol.w .vis svg{max-height:200px}
.ix-light{list-style:decimal;padding-left:22px;margin-top:14px;display:grid;gap:8px;font-size:1.02rem}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
@media (max-width:900px){.sol.w{display:grid;grid-template-columns:1fr}.apprl[style]{grid-template-columns:1fr!important}}
.src-t.pdoc{background:#e6f4ee;color:#0e7a4f}
.sbd .mx{min-width:0;font-size:.78rem}.sbd .mx th,.sbd .mx td{padding:8px 8px}
.sbd .mx .rv{white-space:normal}.sbd .mx .rv .vbtn{display:block;width:100%;margin:0 0 6px;text-align:center}.sbd .mx .rv .vbtn+.vbtn{margin-left:0}
.sbd .mx th{white-space:normal}
.st-stage.wide{grid-template-columns:1fr;gap:28px}.st-stage.wide .st-info{max-width:70ch}
.st-stage.wide .node-t{font-size:15px}.st-stage.wide .node-s{font-size:11.5px}
.portrait img{object-position:50% 25%}
.fdr .proj li{margin:.75em 0}.fdr .proj small{display:block;color:var(--muted);font-size:.86rem;margin-top:2px;line-height:1.45}
.fdr.dark .proj small{color:var(--muted-d)}.fdr .proj .muted{font-weight:400}

/* =========================================================
   VERSION 5 additions
   ========================================================= */
.ptn{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;font-size:.86rem;font-weight:500;line-height:1}
.ptn i{width:14px;height:14px;background:var(--blue-2);clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%);flex:none}
.light .ptn,.white .ptn{background:var(--blue-3);border-color:#c3d3f6;color:var(--blue)}.light .ptn i,.white .ptn i{background:var(--blue)}
.ptn-img{padding:0;border:0;background:none}.ptn-img img{height:34px;width:auto}
.hero-partner{margin-top:26px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:#aab5c9;font-size:.92rem}
.ptn-line{margin-top:18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:#aab5c9;font-size:.92rem}
.pband{display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:clamp(18px,3vw,40px);align-items:start}
.pband h3{font-size:1rem;font-weight:600}.pband p{color:var(--muted);font-size:.94rem;margin-top:6px}
@media (max-width:900px){.pband{grid-template-columns:1fr}}
.theme-panel h3{font-size:.9rem;color:var(--muted-d);font-weight:500;margin:0 0 8px}.theme-panel h3+p{font-size:1.1rem;line-height:1.5;color:#fff}.theme-panel ul{margin-top:6px}
.outcomes{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden}.outcomes>div{background:var(--white);padding:24px}.outcomes p{color:var(--muted);margin-top:8px;font-size:.95rem}
@media (max-width:900px){.outcomes{grid-template-columns:1fr 1fr}}@media (max-width:640px){.outcomes{grid-template-columns:1fr}}
.int-diagram{background:var(--ink);border-radius:28px;padding:clamp(18px,3vw,36px)}.int-diagram svg{width:100%;height:auto}
.ix-pts{display:grid;gap:0}.ix-pts>div{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:24px;padding:22px 0;border-top:1px solid var(--line-d)}.ix-pts>div:last-child{border-bottom:1px solid var(--line-d)}.ix-pts p{color:var(--muted-d)}
@media (max-width:900px){.ix-pts>div{grid-template-columns:1fr;gap:6px}}
.dark .prob .tab{border-color:var(--line-d);color:#7f8aa0}.dark .prob .tab:last-child{border-bottom-color:var(--line-d)}.dark .prob .tab:hover{color:#c9d2e3}.dark .prob .tab[aria-selected=true]{color:#fff}
.hero-partner{margin-top:22px}
/* official Odoo Ready Partner artwork, shown unaltered on a white card */
.ptn-img{background:#fff;border-radius:14px;padding:4px 10px;border:0}.ptn-img img{height:54px;width:auto;display:block}
.ftr .ptn-img img{height:46px}
.hero-partner{margin-top:30px}.hero-partner .ptn-img img{height:68px}.pband .ptn-img img{height:60px}
/* Odoo partner badge: one consistent presentation (hero and footer) */
.ftr .ptn-img img{height:64px;width:auto;margin:0}
.hero-partner .ptn-img img{height:64px}
.ptn-img{padding:6px 12px;border-radius:14px;background:#fff;display:inline-flex}