/* Moud One · microsite
   Paleta: paper fred, tinta blau nit, fil lima-groc de la marca MOUD.
   El fil (gradient) només s'usa per a una cosa: mostrar que la dada va a una. */
/* (tipografia: DM Sans i DM Mono, com moud.group) */
@font-face{font-family:"Eina01-no";src:url(fonts/eina01-bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(fonts/instrument-sans-latin.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";src:url(fonts/instrument-sans-latin-ext.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* Paleta de moud.group: negre, blau MOUD i llum blau marí */
  --paper:#000; --surface:#0E0E0E; --sunk:#131313;
  --ink:#FFFFFF; --ink2:rgba(255,255,255,.62); --ink3:rgba(255,255,255,.45);
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.16);
  --night:#060606; --night2:#161B52; --on-night:#FFFFFF; --on-night2:rgba(255,255,255,.55);
  --blue:#0066FF; --cyan:#00B4FF; --deep:#1A3FA0; --navy:#161B52;
  --lime:#00B4FF; --yellow:#0066FF; --thread:linear-gradient(90deg,#00B4FF,#0066FF);
  --thread-v:linear-gradient(180deg,#00B4FF,#0066FF);
  --break:#FF6B57; --ok:#00C47A;
  /* un color per mòdul: identifica el mòdul a les maquetes */
  --m-base:#8A93A6; --m-vendes:#3D7BFF; --m-suport:#FF8A4C; --m-my:#00C47A;
  --m-finances:#E3B23C; --m-com:#9B6BFF; --m-mkt:#FF5C9A; --m-ia:#03A6E9;
  --fd:"DM Sans",system-ui,sans-serif;
  --fb:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fm:"DM Mono",ui-monospace,monospace;
  --r-lg:16px; --r:10px; --r-sm:8px;
  --wrap:1200px; --gut:clamp(16px,5vw,60px);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--fb);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--m-vendes);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;z-index:100;background:var(--surface);padding:8px 14px;border-radius:8px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

h1,h2,h3{font-family:var(--fd);font-weight:700;letter-spacing:-.025em;line-height:1.02}
h2{font-size:clamp(32px,4.4vw,54px);max-width:18ch}
h3{font-size:21px;letter-spacing:-.01em;line-height:1.2}
.lede{font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--ink2);max-width:58ch}
section{padding:clamp(72px,10vw,128px) 0}
.sec-head{display:grid;gap:20px;margin-bottom:clamp(36px,5vw,64px)}

/* ---------- botons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;font-weight:600;font-size:16px;text-decoration:none;cursor:pointer;touch-action:manipulation;transition:transform .14s cubic-bezier(.23,1,.32,1),background .15s,color .15s}
.btn:active{transform:scale(.97)}
.btn-main{background:var(--ink);color:var(--paper)}
@media (hover:hover){.btn-main:hover{background:var(--night2);border-color:var(--night2);color:#fff}.btn-ghost:hover{background:var(--sunk)}}
.btn .pill{width:22px;height:8px;border-radius:9px;background:var(--thread)}
.btn[disabled]{opacity:.55;cursor:progress}

/* ---------- capçalera */
.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.top.scrolled{border-bottom-color:var(--line)}
.top .wrap{display:flex;align-items:center;gap:24px;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand{flex:none}
.brand svg{height:22px;width:auto;flex:none;aspect-ratio:448/142}
.brand b{font-family:var(--fd);font-size:22px;letter-spacing:-.03em;display:flex;align-items:center;gap:8px}
.brand b::before{content:"";width:18px;height:7px;border-radius:9px;background:var(--thread)}
.nav{display:flex;gap:26px;margin-left:auto;font-size:15px}
.nav a{text-decoration:none;color:var(--ink2)}
.nav a:hover{color:var(--ink)}
.lang{font-size:14px;color:var(--ink3);text-decoration:none;border:1px solid var(--line2);border-radius:999px;padding:4px 10px}
.top .btn{min-height:40px;padding:0 18px;font-size:15px}
@media (max-width:900px){.nav{display:none}.top .lang{margin-left:auto}}
@media (max-width:420px){.top .btn{padding:0 14px}.brand svg{height:18px}.brand b{font-size:19px}}

/* ---------- hero */
.hero{padding:clamp(40px,7vw,96px) 0 clamp(64px,8vw,112px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero h1{font-size:clamp(46px,7vw,94px);max-width:10ch;margin-bottom:26px}
.hero .thread{height:12px;width:min(260px,55%);border-radius:12px;background:var(--thread);margin:0 0 30px;transform-origin:left;animation:thread 1.1s .2s cubic-bezier(.65,0,.35,1) both}
@keyframes thread{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero .lede{margin-bottom:36px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}}

/* maqueta · un sol registre */
.record{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 30px 60px -30px rgba(28,39,68,.35),0 2px 6px rgba(28,39,68,.06);overflow:hidden;font-size:14px}
.chrome{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--sunk)}
.chrome i{width:10px;height:10px;border-radius:50%;background:var(--line2)}
.chrome .url{margin-left:10px;flex:1;background:var(--surface);border-radius:999px;padding:4px 14px;font-size:12.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chrome .url b{color:var(--ink);font-weight:600}
.rec-head{display:flex;align-items:center;gap:14px;padding:20px 22px 6px}
.avatar{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font:700 15px var(--fd);color:#fff;background:var(--night2);flex:none}
.rec-head h3{font-family:var(--fb);font-size:17px;font-weight:650;letter-spacing:0}
.rec-head p{color:var(--ink3);font-size:13px}
.timeline{position:relative;padding:14px 22px 22px 52px}
.timeline::before{content:"";position:absolute;left:31px;top:24px;bottom:34px;width:4px;border-radius:4px;background:var(--thread-v);transform-origin:top;animation:threadv 1.4s .5s cubic-bezier(.65,0,.35,1) both}
@keyframes threadv{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.timeline li{position:relative;display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line)}
.timeline li:last-child{border-bottom:0}
.timeline li::before{content:"";position:absolute;left:-26px;top:15px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:3px solid var(--c,var(--m-base))}
.timeline .what{font-weight:600}
.timeline .what small{display:block;font-weight:400;color:var(--ink3);font-size:12.5px}
.tag{flex:none;align-self:start;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.hero .thread,.timeline::before{animation:none}}

/* ---------- comparació · el flux */
.compare{background:var(--night);color:var(--on-night)}
.compare h2,.compare h3{color:#fff}
.compare .lede{color:var(--on-night2)}
.flow{display:grid;gap:clamp(28px,4vw,44px)}
.flow-row{display:grid;gap:16px}
.flow-row>header{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.flow-row>header h3{font-size:22px}
.flow-row>header p{color:var(--on-night2);font-size:15px}
.stages{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;position:relative}
.stage{position:relative;padding:58px 8px 0;text-align:center;font-size:14px;font-weight:600;color:#fff}
.stage::before{content:"";position:absolute;left:50%;top:22px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--night);border:3px solid currentColor;z-index:2}
.stage small{display:block;font-weight:400;color:var(--on-night2);font-size:12.5px;margin-top:2px}

/* fila trencada: cada eina és una caixa, entre caixes la línia es talla */
.split .tools{display:grid;grid-template-columns:3fr 1fr 2fr 1fr;gap:0;margin-bottom:-8px;position:relative;z-index:1}
.tool{margin:0 5px;border:1.5px dashed var(--on-night2);border-radius:14px;height:108px;padding:8px 12px;font-size:12.5px;color:var(--on-night2);display:flex;justify-content:space-between;align-items:flex-start;gap:6px}
.tool b{font-weight:600;color:var(--on-night)}
.split .stages{margin-top:-82px}
.split .stage{color:var(--on-night2)}
.split .stage::after{content:"";position:absolute;top:29px;left:0;right:0;height:3px;background:var(--on-night2);opacity:.55;z-index:1}
.split .stage.cut-r::after{right:50%}
.split .stage.cut-l::after{left:50%}
.split .stage:first-child::after{left:50%}
.split .stage:last-child::after{right:50%}
.gaps{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:10px}
.gap{font-size:13px;color:#FFB4A6;display:flex;gap:8px;align-items:flex-start;line-height:1.35}
.gap::before{content:"";flex:none;width:14px;height:14px;margin-top:2px;border-radius:3px;background:linear-gradient(135deg,transparent 42%,#FF8A75 42%,#FF8A75 58%,transparent 58%),linear-gradient(45deg,transparent 42%,#FF8A75 42%,#FF8A75 58%,transparent 58%)}
.gap.blank::before{display:none}
.loose{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.loose span{font-size:13px;padding:5px 12px;border:1px dashed var(--on-night2);border-radius:999px;color:var(--on-night2);transform:rotate(var(--rot,0deg))}

/* fila Moud One: un sol fil continu */
.one-row .stages::after{content:"";position:absolute;left:calc(100%/14);right:calc(100%/14);top:27px;height:7px;border-radius:7px;background:var(--thread);transform-origin:left;transform:scaleX(var(--p,1));transition:transform 1.6s cubic-bezier(.65,0,.35,1);z-index:1}
.one-row .stage::before{border-color:var(--lime);background:var(--night)}
.one-row.pending .stages::after{--p:0}
.feeds{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:2px}
.feeds .feed{grid-column:var(--col);font-size:12.5px;color:var(--on-night2);text-align:center;padding-top:16px;position:relative}
.feeds .feed::before{content:"";position:absolute;left:50%;top:0;width:2px;height:12px;background:var(--lime);opacity:.6}
.channels{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px;font-size:14px;color:var(--on-night2)}
.channels span{padding:5px 12px;border-radius:999px;background:var(--night2);color:var(--on-night)}
.channels span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--lime);margin-right:8px;vertical-align:1px}

@media (max-width:820px){
  /* en vertical: el flux baixa en columna, una fila al costat de l'altra no hi cap */
  .flow-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .stages{grid-template-columns:1fr;gap:0}
  .stage{padding:0 0 0 30px;text-align:left;min-height:56px}
  .stage::before{left:0;top:2px;margin-left:0}
  .split .tools,.split .gaps,.feeds{display:none}
  .split .stages{margin-top:0}
  .split .stage::after{top:0;bottom:0;left:7px!important;right:auto!important;width:3px;height:auto}
  .split .stage:first-child::after{top:10px}
  .split .stage:last-child::after{bottom:auto;height:10px}
  .split .stage.cut-r::after{bottom:22px}
  .split .stage.cut-l::after{top:28px}
  .split .stage.cut-l::before{box-shadow:0 -14px 0 -5px #FF8A75}
  .one-row .stages::after{left:6px;right:auto;top:8px;bottom:48px;width:7px;height:auto;background:var(--thread-v);transform-origin:top;transform:scaleY(var(--p,1))}
  .flow-row>header h3{font-size:18px}
  .flow-row>header p{display:none}
  .mob-note{display:block!important}
}
.mob-note{display:none;font-size:13px;color:var(--on-night2);margin-top:6px}
@media (prefers-reduced-motion:reduce){.one-row .stages::after{transition:none}.one-row.pending .stages::after{--p:1}}

/* les 8 diferències */
.diffs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,5vw,72px);margin-top:clamp(56px,7vw,96px);border-top:1px solid var(--night2)}
.diff{padding:26px 0 28px;border-bottom:1px solid var(--night2);display:grid;gap:8px;align-content:start}
.diff h3{font-size:20px;display:flex;gap:12px;align-items:baseline}
.diff h3::before{content:"";flex:none;width:16px;height:6px;border-radius:6px;background:var(--thread);transform:translateY(-4px)}
.diff p{color:var(--on-night);opacity:.92;max-width:52ch}
.diff .usual{color:var(--on-night2);font-size:14.5px;opacity:1}
.diff .usual b{font-weight:600;color:var(--on-night)}
@media (max-width:820px){.diffs{grid-template-columns:1fr}}

/* ---------- base i mòduls */
.base-list{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(48px,6vw,80px)}
.base-list li{padding:9px 16px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:15px}
.base-intro{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,72px);align-items:end;margin-bottom:24px}
@media (max-width:820px){.base-intro{grid-template-columns:1fr}}

.builder{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:900px){.builder{grid-template-columns:1fr}}
.mods{display:grid;gap:8px}
.mod{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 14px;align-items:center;padding:14px 16px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);cursor:pointer;transition:border-color .15s,background .15s}
.mod:hover{border-color:var(--line2)}
.mod .dot{width:12px;height:12px;border-radius:4px;background:var(--c)}
.mod b{font-weight:650;min-width:0;overflow-wrap:break-word;hyphens:auto}
.mod span.d{grid-column:2/4;font-size:14px;color:var(--ink2);line-height:1.45}
.mod input{appearance:none;-webkit-appearance:none;width:42px;height:24px;border-radius:999px;background:var(--line2);position:relative;cursor:pointer;margin:0;transition:background .18s}
.mod input::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .2s cubic-bezier(.23,1,.32,1)}
.mod input:checked{background:var(--c)}
.mod input:checked::after{transform:translateX(18px)}
.mod input:disabled{opacity:.7;cursor:default}
.mod:has(input:checked){border-color:color-mix(in srgb,var(--c) 45%,var(--line))}
.mod.base-mod{cursor:default;background:var(--sunk)}
@media (max-width:900px){
  .mods{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mod{grid-template-columns:auto minmax(0,1fr) auto;padding:12px;gap:4px 10px}
  .mod span.d{display:none}
  .mod.base-mod{grid-column:1/-1}
}
@media (max-width:560px){.mods{grid-template-columns:1fr}.mod b{hyphens:manual}}

.app{position:sticky;top:88px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 30px 60px -34px rgba(28,39,68,.35)}
.app-body{display:grid;grid-template-columns:150px 1fr;min-height:470px}
.side{background:var(--sunk);padding:16px 10px;font-size:13px;display:grid;align-content:start;gap:2px;border-right:1px solid var(--line)}
.side .who{display:flex;gap:8px;align-items:center;font-weight:650;padding:0 6px 14px}
.side .who i{width:22px;height:22px;border-radius:7px;background:var(--night2)}
.side a{display:flex;gap:8px;align-items:center;padding:6px 8px;border-radius:7px;text-decoration:none;color:var(--ink2)}
.side a::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--c,var(--m-base))}
.side a.on{background:var(--surface);color:var(--ink);font-weight:600}
.main{padding:18px;display:grid;gap:12px;align-content:start}
.main .co{display:flex;align-items:center;gap:12px;padding-bottom:6px}
.main .co h4{font-size:17px;font-weight:650}
.main .co p{font-size:13px;color:var(--ink3)}
.panel{border:1px solid var(--line);border-left:4px solid var(--c);border-radius:10px;padding:10px 12px;font-size:13.5px;display:grid;gap:3px;animation:in .28s cubic-bezier(.23,1,.32,1)}
.panel .t{font-size:12px;font-weight:650;color:var(--c)}
.panel .x{color:var(--ink3);font-size:12.5px}
.link{display:none;align-items:center;gap:6px;margin-top:4px;font-size:12.5px;font-weight:600;color:var(--ink)}
.link::before{content:"";width:16px;height:6px;border-radius:6px;background:var(--thread)}
.link.on{display:flex;animation:in .3s cubic-bezier(.23,1,.32,1)}
[hidden]{display:none!important}
@keyframes in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.panel,.link.on{animation:none}}
.status{font-size:14px;color:var(--ink2);margin-top:14px}
@media (max-width:560px){.app-body{grid-template-columns:1fr}.side{display:none}.app{position:static}}

/* ---------- marca i dispositius */
.brand-sec .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:center}
@media (max-width:900px){.brand-sec .wrap{grid-template-columns:1fr}}
.points{display:grid;gap:14px;margin-top:28px}
.points li{display:grid;grid-template-columns:auto 1fr;gap:12px;color:var(--ink2)}
.points li::before{content:"";width:10px;height:10px;margin-top:8px;border-radius:3px;background:var(--ink)}
.points b{color:var(--ink);font-weight:600}
.devices{position:relative;height:clamp(320px,38vw,440px)}
.dev{position:absolute;background:var(--surface);border:1px solid var(--line);box-shadow:0 24px 50px -28px rgba(28,39,68,.4);overflow:hidden}
.dev .bar{height:30px;display:flex;align-items:center;gap:8px;padding:0 12px;background:var(--b);color:#fff;font-size:12px;font-weight:600}
.dev .bar i{width:14px;height:14px;border-radius:4px;background:rgba(255,255,255,.85)}
.dev .ln{height:9px;border-radius:5px;background:var(--sunk);margin:10px 12px 0}
.dev .ln.s{width:45%}.dev .ln.m{width:70%}
.dev .blk{height:46px;border-radius:8px;margin:12px;background:color-mix(in srgb,var(--b) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--b) 30%,transparent)}
.dev .btnm{width:72px;height:22px;border-radius:999px;margin:12px;background:var(--b)}
.dev .u{position:absolute;bottom:8px;left:12px;font-size:11px;color:var(--ink3)}
.d-desk{--b:#1F6F5C;left:0;top:0;width:76%;height:76%;border-radius:14px}
.d-pad{--b:#7A3E9D;right:4%;top:30%;width:40%;height:62%;border-radius:18px;border-width:6px;border-color:var(--ink)}
.d-ph{--b:#C2410C;right:0;bottom:0;width:20%;min-width:96px;height:58%;border-radius:20px;border-width:5px;border-color:var(--ink)}
.d-pad .bar,.d-ph .bar{font-size:11px}

/* ---------- operació real */
.proof{background:var(--sunk)}
.proof .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.proof blockquote{margin:0;font-family:var(--fd);font-size:clamp(26px,3vw,38px);line-height:1.15;letter-spacing:-.02em}
.proof p{color:var(--ink2)}
.proof p+p{margin-top:14px}
@media (max-width:820px){.proof .wrap{grid-template-columns:1fr}}

/* ---------- alta (seqüència real) */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.5vw,32px);counter-reset:s;position:relative}
.steps::before{content:"";position:absolute;top:21px;left:22px;right:22px;height:2px;background:var(--line2)}
.steps li{counter-increment:s;position:relative}
.steps li::before{content:counter(s);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);font:700 18px var(--fd);margin-bottom:18px;position:relative}
.steps li:last-child::before{background:var(--ink);color:var(--paper)}
.steps h3{margin-bottom:8px}
.steps p{color:var(--ink2);font-size:16px}
@media (max-width:900px){
  .steps{grid-template-columns:1fr;gap:26px}
  .steps::before{left:21px;right:auto;top:22px;bottom:40px;width:2px;height:auto}
  .steps li{padding-left:64px}
  .steps li::before{position:absolute;left:0;top:-6px;margin:0}
}

/* ---------- preguntes */
.faq .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,72px)}
@media (max-width:900px){.faq .wrap{grid-template-columns:1fr}}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-weight:600;font-size:18px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:28px;width:12px;height:12px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg);top:33px}
.faq details p{padding:0 0 22px;color:var(--ink2);max-width:62ch}

/* ---------- contacte */
.contact{background:var(--night);color:var(--on-night)}
.contact h2{color:#fff}
.contact .lede{color:var(--on-night2)}
.contact .wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:start}
@media (max-width:900px){.contact .wrap{grid-template-columns:1fr}}
.alt{margin-top:28px;color:var(--on-night2);font-size:15px}
.alt a{color:#fff}
form.lead{position:relative;background:var(--surface);color:var(--ink);border-radius:var(--r-lg);padding:clamp(20px,3vw,36px);display:grid;gap:18px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.f2{grid-template-columns:1fr}}
.field{display:grid;gap:6px}
.field label,.field legend{font-size:14px;font-weight:600;color:var(--ink2)}
.field .opt{font-weight:400;color:var(--ink3)}
.in{width:100%;min-height:48px;padding:10px 14px;border-radius:10px;border:1.5px solid var(--line2);background:var(--surface);font-size:16px;transition:border-color .15s,box-shadow .15s}
textarea.in{min-height:110px;resize:vertical;line-height:1.5}
.in:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--lime) 55%,transparent)}
.in[aria-invalid="true"]{border-color:var(--break)}
fieldset{border:0;padding:0;margin:0;min-width:0}
.seg{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.seg span{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line2);font-size:14.5px;font-weight:500;transition:background .15s,border-color .15s,color .15s}
.seg input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.seg input:focus-visible+span{outline:3px solid var(--m-vendes);outline-offset:2px}
.check{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:14px;color:var(--ink2);align-items:start;cursor:pointer}
.check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--night)}
.hp{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
.hp input{width:1px}
.msg{display:none;border-radius:10px;padding:12px 14px;font-size:15px;line-height:1.45}
.msg.err{display:block;background:color-mix(in srgb,var(--break) 12%,var(--surface));color:var(--break);border:1px solid color-mix(in srgb,var(--break) 40%,transparent)}
.msg.err a{color:inherit;font-weight:600}
.done{display:grid;gap:10px;padding:12px 0}
.done h3{font-size:28px}
.done p{color:var(--ink2)}
.fine{font-size:13px;color:var(--ink3)}

/* ---------- peu */
footer{padding:36px 0 48px;font-size:14px;color:var(--ink3)}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
footer a{color:var(--ink2)}
footer .brand{margin-right:auto}

/* ---------- com funciona: un encàrrec de principi a fi */
.walk-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end;margin-bottom:clamp(40px,6vw,80px)}
@media (max-width:900px){.walk-head{grid-template-columns:1fr}}
.cast{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;font-size:14.5px;color:var(--ink2)}
.cast span{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;background:var(--surface);border:1px solid var(--line)}
.cast i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 11px var(--fb);font-style:normal;color:#fff;background:var(--c)}
.walk{position:relative;display:grid;gap:clamp(56px,8vw,104px);--rail:56px}
/* el fil: una sola línia que travessa tots els passos i s'omple amb el scroll */
.walk::before,.walk::after{content:"";position:absolute;left:calc(var(--rail)/2 - 3px);top:22px;bottom:22px;width:6px;border-radius:6px}
.walk::before{background:var(--line)}
.walk::after{background:var(--thread-v);transform-origin:top;transform:scaleY(var(--fill,1))}
.step{display:grid;grid-template-columns:var(--rail) minmax(0,.8fr) minmax(0,1.2fr);gap:0 clamp(20px,3.5vw,56px);align-items:start;position:relative}
.step>.node{position:relative;z-index:2;width:44px;height:44px;margin-left:calc(var(--rail)/2 - 22px);border-radius:50%;display:grid;place-items:center;background:var(--paper);border:2px solid var(--ink);font:700 17px var(--fd)}
.step.seen>.node{background:var(--ink);color:var(--paper)}
.step .txt{padding-top:6px}
.mtag{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--c);margin-bottom:10px}
.mtag::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--c)}
.mtag+.mtag{margin-left:14px}
.step h3{font-size:clamp(22px,2.2vw,28px);letter-spacing:-.02em;line-height:1.12;margin-bottom:12px}
.step .txt>p{color:var(--ink2);max-width:46ch}
.carried{margin-top:16px;font-size:14.5px;color:var(--ink2);display:flex;gap:10px;align-items:baseline;max-width:46ch}
.carried::before{content:"";flex:none;width:18px;height:7px;border-radius:7px;background:var(--thread);transform:translateY(-2px)}
.carried b{color:var(--ink);font-weight:600}
@media (max-width:900px){
  .walk{--rail:44px}
  .step{grid-template-columns:var(--rail) minmax(0,1fr);gap:18px 14px}
  .step>.node{width:36px;height:36px;font-size:15px;margin-left:calc(var(--rail)/2 - 18px)}
  .step .scr,.step .two{grid-column:2}
}
@media (prefers-reduced-motion:reduce){.walk::after{transform:none}}

/* pantalles de maqueta */
.scr{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;font-size:13.5px;line-height:1.45;box-shadow:0 24px 48px -30px rgba(28,39,68,.35)}
.scr .chrome{padding:9px 14px}
.scr .chrome .url{font-size:12px}
.sbody{padding:16px}
.srow{display:flex;justify-content:space-between;align-items:center;gap:12px}
.muted{color:var(--ink3)}
.small{font-size:12.5px}
.carry{background:linear-gradient(transparent 62%,color-mix(in srgb,var(--lime) 70%,transparent) 62%);font-weight:600;padding:0 2px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;color:var(--c,var(--ink2));background:color-mix(in srgb,var(--c,var(--ink3)) 13%,transparent);white-space:nowrap}
.mbtn{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:8px;background:var(--c,var(--ink));color:#fff;font-weight:600;font-size:13px;white-space:nowrap}
.mbtn.out{background:transparent;color:var(--ink);border:1.5px solid var(--line2)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin-top:12px}
.kv dt{color:var(--ink3)}
.kv dd{min-width:0;overflow-wrap:anywhere}
.hr{height:1px;background:var(--line);margin:14px -16px}

/* correu */
.mail-from{display:flex;gap:10px;align-items:center}
.mail-from .avatar{width:34px;height:34px;font-size:12px;border-radius:50%;background:#B5562E}
.mail-body{margin-top:12px;padding:12px 14px;border-radius:10px;background:var(--sunk);color:var(--ink2)}
.convert{margin-top:12px;border:1.5px solid var(--m-vendes);border-radius:12px;padding:12px 14px}
.convert .t{font-weight:650;color:var(--m-vendes);font-size:12.5px;margin-bottom:6px}

/* pipeline */
.cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.col{background:var(--sunk);border-radius:10px;padding:8px;min-height:150px}
.col>b{display:block;font-size:12px;color:var(--ink2);margin-bottom:6px;font-weight:600}
.card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:7px 8px;font-size:12px;margin-bottom:6px}
.card.hot{border:1.5px solid var(--m-vendes);box-shadow:0 6px 16px -8px color-mix(in srgb,var(--m-vendes) 60%,transparent)}
.card s{display:block;height:6px;border-radius:4px;background:var(--line);text-decoration:none;margin-top:5px;width:70%}
.agent{margin-top:12px;display:grid;grid-template-columns:auto 1fr;gap:10px;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--m-ia) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--m-ia) 35%,transparent)}
.agent i{width:26px;height:26px;border-radius:8px;background:var(--m-ia);display:block}
@media (max-width:560px){.cols{grid-template-columns:repeat(2,minmax(0,1fr))}.cols .col:nth-child(n+3){display:none}}

/* pressupost */
table.q{width:100%;border-collapse:collapse;margin-top:10px;font-size:13px}
table.q th{text-align:left;font-weight:600;color:var(--ink3);font-size:12px;padding:6px 0;border-bottom:1px solid var(--line)}
table.q td{padding:8px 0;border-bottom:1px dashed var(--line)}
table.q td:last-child,table.q th:last-child{text-align:right;white-space:nowrap}
table.q tfoot td{border:0;font-weight:700;padding-top:10px}
.from-cat{font-size:11px;color:var(--ink3);font-weight:400;display:block}

/* proposta */
.prop{display:grid;grid-template-columns:1.1fr 1fr}
.prop .cover{background:#2F3B2A;color:#F4F1E6;padding:16px;display:grid;align-content:end;min-height:190px;gap:4px}
.prop .cover b{font:700 20px/1.1 var(--fd)}
.prop .sign{padding:16px;display:grid;gap:8px;align-content:start}
.sigline{height:46px;border-bottom:1.5px solid var(--ink);position:relative}
.sigline svg{position:absolute;left:4px;bottom:4px;width:120px;height:38px}
@media (max-width:560px){.prop{grid-template-columns:1fr}.prop .cover{min-height:110px}}

/* projecte */
.phases{display:flex;gap:4px;margin:12px 0}
.phases span{flex:1;height:7px;border-radius:4px;background:var(--line)}
.phases span.d{background:var(--m-base)}
.phases span.n{background:color-mix(in srgb,var(--m-base) 45%,var(--line))}
.tasks{display:grid;gap:6px}
.task{display:grid;grid-template-columns:16px 1fr auto;gap:10px;align-items:center;padding:7px 10px;border:1px solid var(--line);border-radius:8px}
.task .bx{width:16px;height:16px;border-radius:5px;border:1.5px solid var(--line2)}
.task.ok .bx{background:var(--m-base);border-color:var(--m-base)}
.task.ok>span:nth-child(2){color:var(--ink3);text-decoration:line-through}
.who2{display:flex}
.who2 i{width:22px;height:22px;border-radius:50%;border:2px solid var(--surface);margin-left:-6px;background:var(--c)}

/* espai client */
.my-top{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#2F3B2A;color:#F4F1E6;font-weight:600;font-size:13px}
.my-top i{width:20px;height:20px;border-radius:6px;background:#E8C766}
.deliv{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:10px;margin-top:10px}
.deliv .th{height:48px;border-radius:6px;background:linear-gradient(135deg,#E8C766,#B5562E)}
.cmt{margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--sunk);font-size:13px}
.seen-by{margin-top:10px;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--m-my);font-weight:600}
.seen-by::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--m-my)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){.two{grid-template-columns:1fr}}
.two .scr{box-shadow:none}

/* factura */
.inv{display:grid;gap:4px}
.inv .big{font:700 26px var(--fd);letter-spacing:-.02em}
.track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:14px;font-size:11.5px;color:var(--ink3)}
.track span{border-top:4px solid var(--line);padding-top:6px}
.track span.d{border-color:var(--m-finances);color:var(--ink);font-weight:600}

/* tiquet */
.thread-msg{display:grid;gap:8px;margin-top:10px}
.bub{padding:9px 12px;border-radius:12px;max-width:88%;font-size:13px}
.bub.c{background:var(--sunk);justify-self:start;border-bottom-left-radius:4px}
.bub.t{background:color-mix(in srgb,var(--m-suport) 14%,var(--surface));justify-self:end;border-bottom-right-radius:4px}
.bub small{display:block;color:var(--ink3);font-size:11.5px;margin-top:2px}
.ctx{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}

/* com funciona per a l'empresa */
.how{display:grid;gap:clamp(56px,8vw,96px)}
.how-block{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,72px);align-items:start}
.how-block>div:first-child h3{font-size:clamp(24px,2.4vw,32px);letter-spacing:-.02em;margin-bottom:12px}
.how-block>div:first-child p{color:var(--ink2)}
@media (max-width:900px){.how-block{grid-template-columns:1fr}}
.roles{display:grid;gap:10px}
.role{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:16px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.role i{width:44px;height:44px;border-radius:12px;background:var(--c)}
.role b{display:block;font-weight:650;margin-bottom:2px}
.role p{color:var(--ink2);font-size:15px}
.steps-v{grid-template-columns:1fr;gap:26px}
.steps-v::before{left:21px;right:auto;top:22px;bottom:40px;width:2px;height:auto}
.steps-v li{padding-left:64px}
.steps-v li::before{position:absolute;left:0;top:-6px;margin:0}
.prop .cover .carry{background:linear-gradient(transparent 62%,rgba(198,244,50,.55) 62%)}
.roles{gap:0;border-top:1px solid var(--line)}
.role{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:18px 0}
.role i{width:14px;height:14px;border-radius:4px;margin-top:6px}
.role{grid-template-columns:14px 1fr}
.nw{white-space:nowrap}
.dev .bar{white-space:nowrap;overflow:hidden}
@media (min-width:821px){
  .split .tool{height:122px}
  .split .stages{margin-top:-108px}
  .split .stage{padding-top:62px}
  .split .stage::before{top:30px}
  .split .stage::after{top:37px}
}
/* capçalera al mòbil: el botó no es parteix; el canvi d'idioma queda al peu */
.top .btn{white-space:nowrap;flex:none}
@media (max-width:520px){.top .wrap{gap:12px}.top .lang{display:none}.top .btn{margin-left:auto}}
/* menú: cinc enllaços d'una línia; si no hi caben (iPad i menys), s'amaga i queden el logo, l'idioma i la demo */
.nav a{white-space:nowrap}
@media (max-width:1180px){.nav{display:none}.top .lang{margin-left:auto}}

/* ============ Estil de moud.group ============ */
body{font-weight:400}
h1,h2,h3{font-family:var(--fd);font-weight:700}
h1{letter-spacing:-.045em;line-height:.92}
h2{font-weight:600;letter-spacing:-.035em;line-height:1.04}
h3{font-weight:600;letter-spacing:-.015em}
.muted-line{color:rgba(255,255,255,.38);display:block}
.lede{color:var(--ink2)}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline-color:var(--cyan)}

/* etiqueta mono (MOUD ONE · BARCELONA) i pastilla amb punt blau */
.kicker{font-family:var(--fm);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink3);margin-bottom:26px}
.pill{display:inline-flex;align-items:center;gap:8px;background:#080808;border:1px solid var(--line);border-radius:30px;padding:7px 14px;font-size:12.5px;font-weight:500;color:rgba(255,255,255,.72);margin-bottom:22px}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue)}

/* botons: blanc ple + contorn fosc, cantó de 8 px */
.btn{border-radius:8px;min-height:48px;font-size:15px;border:1px solid var(--line2)}
.btn-main{background:#fff;color:#000;border-color:#fff}
.btn-ghost{background:transparent;color:#fff}
@media (hover:hover){.btn-main:hover{background:#EFEEEC;border-color:#EFEEEC;color:#000}.btn-ghost:hover{background:#0E0E0E;border-color:rgba(255,255,255,.3)}}
.top .btn-main{background:var(--blue);border-color:var(--blue);color:#fff}
@media (hover:hover){.top .btn-main:hover{background:#1A75FF;border-color:#1A75FF;color:#fff}}

/* capçalera: negra translúcida, logo MOUD / one */
.top{background:rgba(0,0,0,.72)}
.top.scrolled{border-bottom-color:var(--line)}
.nav a{color:rgba(255,255,255,.55);font-size:14px}
.nav a:hover{color:#fff}
.lang{color:rgba(255,255,255,.6);border-color:var(--line2);border-radius:6px;font-size:12px;font-weight:600}
.brand{color:#fff}
.brand svg{color:var(--cyan)}
.brand b{font-family:var(--fb);font-weight:500;font-size:16px;letter-spacing:0;gap:12px}
.brand b::before{content:"/";width:auto;height:auto;background:none;border-radius:0;color:rgba(255,255,255,.35);font-weight:400}

/* portada: llum blau marí com la de moud.group */
.hero{background:radial-gradient(70% 60% at 50% 0%,rgba(26,63,160,.55),transparent 70%),radial-gradient(60% 50% at 100% 30%,rgba(0,102,255,.18),transparent 70%),#000}
.hero .thread{display:none}
.hero h1{margin-bottom:30px}

/* seccions: separadors fins */
section{border-top:1px solid var(--line)}
.hero{border-top:0}
.compare,.contact{background:#060606}
.compare .lede{color:var(--ink2)}
.proof{background:#080808}

/* maquetes i targetes sobre negre */
.record,.scr,.app{background:#0B0B0F;border-color:var(--line2);box-shadow:0 40px 80px -40px rgba(0,102,255,.35)}
.chrome{background:#111216;border-bottom-color:var(--line)}
.chrome .url{background:#000;color:var(--ink3)}
.avatar{background:var(--deep)}
.carry{background:linear-gradient(transparent 60%,rgba(0,102,255,.55) 60%)}
.prop .cover .carry{background:linear-gradient(transparent 60%,rgba(0,180,255,.45) 60%)}
.mail-body,.cmt,.bub.c,.col,.side{background:#15161B}
.card{background:#0B0B0F}
.mod{background:#0B0B0F}
.mod.base-mod{background:#15161B}
.base-list li,.cast span{background:#0B0B0F;border-color:var(--line2)}
.in{background:#0B0B0F;border-color:var(--line2);color:#fff}
.in:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,102,255,.3)}
form.lead{background:#0E0E0E;color:#fff;border:1px solid var(--line2)}
.seg span{border-color:var(--line2)}
.seg input:checked+span{background:#fff;border-color:#fff;color:#000}
.check input{accent-color:var(--blue)}
.done{background:#0E0E0E!important;color:#fff!important}
.step>.node{background:#000;border-color:rgba(255,255,255,.5)}
.step.seen>.node{background:var(--blue);border-color:var(--blue);color:#fff}
.steps li::before{background:#000;border-color:rgba(255,255,255,.5)}
.steps li:last-child::before{background:var(--blue);border-color:var(--blue);color:#fff}
.walk::before{background:rgba(255,255,255,.08)}
.points li::before{background:var(--blue)}
.dev{background:#0B0B0F;border-color:var(--line2)}
.d-pad,.d-ph{border-color:#2A2C36}
.faq summary::after{border-color:#fff}
.role i{background:var(--c)}
.one-row .stage::before{border-color:var(--cyan);background:#060606}
.channels span{background:#111216}
.channels span::before{background:var(--cyan)}
.feeds .feed::before{background:var(--cyan)}
.diffs{border-top-color:var(--line)}
.diff{border-bottom-color:var(--line)}
footer{background:#060606;border-top:1px solid var(--line);color:var(--ink3)}
footer a{color:rgba(255,255,255,.6)}
.tag,.chip{background:color-mix(in srgb,var(--c,#8A93A6) 18%,transparent)}
.pill{justify-self:start;width:max-content;max-width:100%}
.faq .faq-head{display:grid;align-content:start}
/* logo partit: MOUD → web del grup · one → portada de Moud One */
.brand a{color:inherit;text-decoration:none;display:flex;align-items:center}
.brand .brand-one b{display:flex;align-items:center;gap:12px}
/* Moud One dins de moud.group: logo MOUD en blanc i el blau de les apps (#2DB9FF) com a accent */
:root{--blue:#2DB9FF;--cyan:#2DB9FF;--thread:linear-gradient(90deg,#2DB9FF,#0A84D6);--thread-v:linear-gradient(180deg,#2DB9FF,#0A84D6)}
.brand svg{color:#fff}
.top .btn-main{background:#2DB9FF;border-color:#2DB9FF;color:#000}
@media (hover:hover){.top .btn-main:hover{background:#5CCBFF;border-color:#5CCBFF;color:#000}}
.step.seen>.node,.steps li:last-child::before{color:#000}
.pill::before{background:#2DB9FF}
.carry{background:linear-gradient(transparent 60%,rgba(45,185,255,.45) 60%)}
.hero{background:radial-gradient(70% 60% at 50% 0%,rgba(10,132,214,.35),transparent 70%),#000}