/* ============================================================
   Maya Bar — Personal site
   Warm, premium, product-grade design system. RTL-first.
   ============================================================ */

:root{
  --bg:#F7F4EE;
  --bg-soft:#F1ECE2;
  --surface:#FFFFFF;
  --surface-warm:#FCFAF6;
  --ink:#211E19;
  --ink-2:#575149;
  --ink-3:#8D867B;
  --line:#E6E0D4;
  --line-soft:#EFEAE0;

  --blue:#68849F;
  --blue-deep:#4E647B;
  --blue-soft:#DFE8EF;
  --blue-ghost:#EEF3F7;
  --sage:#87A183;
  --sage-soft:#E3EADD;
  --peach:#D29A72;
  --peach-soft:#F6E6D6;
  --blush:#CFA093;
  --blush-soft:#F4E4DE;
  --butter-soft:#F3EACB;

  --radius-lg:22px;
  --radius:16px;
  --radius-sm:10px;
  --radius-xs:7px;

  --font-ui:'Assistant',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-serif:'Frank Ruhl Libre',Georgia,serif;

  --shadow-1:0 1px 2px rgba(33,30,25,.05),0 4px 14px rgba(33,30,25,.05);
  --shadow-2:0 2px 6px rgba(33,30,25,.06),0 14px 40px rgba(33,30,25,.09);
  --shadow-3:0 6px 18px rgba(33,30,25,.08),0 30px 70px rgba(33,30,25,.13);

  --ease:cubic-bezier(.22,.8,.28,1);
  --dur:.45s;

  --maxw:1120px;
  --pad:clamp(20px,4.5vw,44px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html:focus-within{scroll-behavior:smooth}
body{
  font-family:var(--font-ui);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;font-size:inherit;border:0;background:none;cursor:pointer;color:inherit}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
::selection{background:var(--blue-soft)}

.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* ---------- typography ---------- */
h1,h2,h3,h4{line-height:1.18;font-weight:700;letter-spacing:-.01em}
.serif{font-family:var(--font-serif);font-weight:500;letter-spacing:0}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:600;color:var(--ink-3);
  letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:14px;
}
.eyebrow::before{content:"";width:22px;height:1.5px;background:var(--peach);border-radius:2px}
[dir="ltr"] .eyebrow{letter-spacing:.14em}
.section-title{font-size:clamp(26px,3.6vw,40px);margin-bottom:14px}
.section-sub{color:var(--ink-2);font-size:clamp(16px,1.6vw,18.5px);max-width:640px}

section{padding-block:clamp(64px,9vw,120px)}
section.tight{padding-block:clamp(48px,6vw,80px)}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.08s}.reveal-d2{transition-delay:.16s}.reveal-d3{transition-delay:.24s}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset-inline:0;top:0;z-index:100;
  transition:background .35s var(--ease),box-shadow .35s var(--ease),padding .35s var(--ease);
  padding-block:18px;
}
.nav.scrolled{background:rgba(247,244,238,.86);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line);padding-block:10px}
.nav-inner{display:flex;align-items:center;gap:28px;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.brand{display:flex;flex-direction:column;line-height:1.25}
.brand-name{font-family:var(--font-serif);font-size:21px;font-weight:600;letter-spacing:.01em}
.brand-tag{font-size:12px;color:var(--ink-3);letter-spacing:.05em}
.nav-links{display:flex;gap:26px;margin-inline-start:auto;align-items:center}
.nav-links a{font-size:15.5px;font-weight:600;color:var(--ink-2);position:relative;padding-block:4px}
.nav-links a::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:2px;border-radius:2px;background:var(--peach);transform:scaleX(0);transition:transform .3s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-cta{margin-inline-start:8px}
.lang-switch{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:99px;padding:3px;background:var(--surface-warm)}
.lang-switch a,.lang-switch span{font-size:13px;font-weight:700;padding:3px 10px;border-radius:99px;color:var(--ink-3)}
.lang-switch .current{background:var(--ink);color:var(--surface)}
.lang-switch a:hover{color:var(--ink)}

.burger{display:none;flex-direction:column;gap:5px;padding:8px;margin-inline-start:auto}
.burger span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .3s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-menu{
  display:none;position:fixed;inset:0;z-index:99;background:var(--bg);
  padding:110px var(--pad) 40px;flex-direction:column;gap:8px;
}
.mobile-menu.open{display:flex}
.mobile-menu a{font-size:24px;font-weight:700;padding-block:12px;border-bottom:1px solid var(--line-soft)}
.mobile-menu .btn{margin-top:22px;justify-content:center}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:700;font-size:16px;
  padding:13px 26px;border-radius:99px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--ink);color:#FBF9F5;box-shadow:var(--shadow-1)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.btn-ghost{border:1.5px solid var(--line);background:var(--surface-warm);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink-3);transform:translateY(-2px)}
.btn-sm{padding:9px 18px;font-size:14.5px}
.btn .arr{transition:transform .25s var(--ease);display:inline-flex}
.btn:hover .arr{transform:translateX(-4px)}
[dir="ltr"] .btn:hover .arr{transform:translateX(4px)}

/* ---------- hero ---------- */
.hero{padding-top:clamp(130px,16vh,190px);padding-bottom:clamp(50px,7vw,90px);position:relative}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.hero h1{font-size:clamp(32px,4.6vw,54px);line-height:1.14;margin-bottom:20px}
.hero h1 em{font-family:var(--font-serif);font-style:normal;font-weight:600;color:var(--blue)}
.hero-sub{font-size:clamp(16.5px,1.8vw,19.5px);color:var(--ink-2);max-width:520px;margin-bottom:32px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-note{margin-top:26px;font-size:14px;color:var(--ink-3);display:flex;gap:8px;align-items:center}
.hero-note .dots{display:inline-flex;gap:4px}
.hero-note .dots i{width:6px;height:6px;border-radius:50%;display:inline-block}
.hero-note .dots i:nth-child(1){background:var(--blue)}
.hero-note .dots i:nth-child(2){background:var(--sage)}
.hero-note .dots i:nth-child(3){background:var(--peach)}
.hero-note .dots i:nth-child(4){background:var(--blush)}

/* hero stage — living product visual */
.stage{position:relative;perspective:1200px}
.stage-frame{
  position:relative;border-radius:var(--radius-lg);
  background:var(--surface);box-shadow:var(--shadow-3);
  border:1px solid var(--line);
  overflow:hidden;aspect-ratio:10/8.4;
  transition:transform .6s var(--ease);
  transform:rotateY(calc(var(--tiltx,0)*1deg)) rotateX(calc(var(--tilty,0)*-1deg));
}
.stage-top{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--line-soft);background:var(--surface-warm)}
.stage-top i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.stage-top i:first-child{background:var(--blush-soft)}
.stage-top .stage-url{margin-inline:auto;font-size:11.5px;color:var(--ink-3);background:var(--bg);border-radius:6px;padding:2px 14px;letter-spacing:.02em}
.stage-scenes{position:relative;height:calc(100% - 41px)}
.scene{position:absolute;inset:0;opacity:0;transform:translateY(14px) scale(.985);transition:opacity .6s var(--ease),transform .6s var(--ease),visibility 0s .6s;pointer-events:none;padding:18px;overflow:hidden;visibility:hidden}
.scene.on{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.stage-dots{position:absolute;bottom:-30px;inset-inline:0;display:flex;justify-content:center;gap:8px}
.stage-dots button{width:26px;height:4px;border-radius:3px;background:var(--line);transition:background .3s,width .3s var(--ease)}
.stage-dots button.on{background:var(--ink);width:38px}
.stage-cap{position:absolute;bottom:-58px;inset-inline:0;text-align:center;font-size:13.5px;color:var(--ink-3);transition:opacity .4s}

/* generic mini-app pieces used inside scenes/demos */
.mini{display:grid;grid-template-columns:132px 1fr;gap:0;height:100%;border:1px solid var(--line-soft);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface)}
.mini-side{background:var(--surface-warm);border-inline-end:1px solid var(--line-soft);padding:12px 10px;display:flex;flex-direction:column;gap:2px}
.mini-logo{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--ink);padding:4px 8px 10px}
.mini-nav-item{font-size:12px;color:var(--ink-2);padding:6px 9px;border-radius:7px;display:flex;align-items:center;gap:7px;transition:background .25s}
.mini-nav-item .ic{width:6px;height:6px;border-radius:2px;background:var(--line);flex:none}
.mini-nav-item.on{background:var(--bg);color:var(--ink);font-weight:700}
.mini-nav-item.on .ic{background:var(--blue)}
.mini-main{padding:14px;overflow:hidden;position:relative}
.mini-h{font-size:14px;font-weight:800;margin-bottom:2px}
.mini-sub{font-size:11px;color:var(--ink-3);margin-bottom:12px}

.chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;border-radius:99px;padding:2.5px 9px;line-height:1.4}
.chip.blue{background:var(--blue-soft);color:#3E5A73}
.chip.sage{background:var(--sage-soft);color:#4C6547}
.chip.peach{background:var(--peach-soft);color:#8A5A31}
.chip.blush{background:var(--blush-soft);color:#8C5546}
.chip.butter{background:var(--butter-soft);color:#7A6A2A}
.chip.ghost{background:var(--bg);color:var(--ink-3)}
.chip i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.7}

.row-card{
  display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1px solid var(--line-soft);border-radius:var(--radius-xs);
  padding:8px 11px;margin-bottom:7px;font-size:12.5px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s,opacity .5s;
}
.row-card .grow{flex:1;min-width:0}
.row-card .t{font-weight:700;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-card .s{font-size:11px;color:var(--ink-3)}
.row-card.hot{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-ghost)}
.row-card.enter{animation:rowIn .5s var(--ease) both}
@keyframes rowIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

.avatar{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800;flex:none}
.avatar.a1{background:var(--blue-soft);color:#3E5A73}
.avatar.a2{background:var(--sage-soft);color:#4C6547}
.avatar.a3{background:var(--peach-soft);color:#8A5A31}
.avatar.a4{background:var(--blush-soft);color:#8C5546}

.checkbox{width:15px;height:15px;border-radius:5px;border:1.5px solid var(--line);flex:none;display:inline-flex;align-items:center;justify-content:center;transition:background .3s,border-color .3s;position:relative}
.checkbox.done{background:var(--sage);border-color:var(--sage)}
.checkbox.done::after{content:"";width:8px;height:4.5px;border-inline-start:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
[dir="rtl"] .checkbox.done::after{transform:rotate(-45deg) translate(1px,-1px) scaleX(1)}

.progress{height:5px;background:var(--bg);border-radius:99px;overflow:hidden}
.progress i{display:block;height:100%;border-radius:99px;background:var(--sage);transition:width 1s var(--ease)}

/* chat (AI) pieces */
.chat{display:flex;flex-direction:column;gap:9px;font-size:12.5px}
.bubble{max-width:86%;padding:9px 13px;border-radius:14px;line-height:1.5;position:relative;opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.bubble.show{opacity:1;transform:none}
.bubble.user{align-self:flex-start;background:var(--ink);color:#F5F2EC;border-end-start-radius:4px}
.bubble.ai{align-self:flex-end;background:var(--surface-warm);border:1px solid var(--line-soft);border-end-end-radius:4px}
[dir="ltr"] .bubble.user{align-self:flex-end;border-radius:14px;border-end-end-radius:4px}
[dir="ltr"] .bubble.ai{align-self:flex-start;border-radius:14px;border-end-start-radius:4px}
.bubble .b-title{font-weight:800;font-size:11px;color:var(--ink-3);margin-bottom:3px;letter-spacing:.04em}
.typing{display:inline-flex;gap:4px;padding:4px 2px}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--ink-3);animation:tp 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.ai-action{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 10px;margin-top:7px;font-size:11.5px}
.ai-action .aa-t{font-weight:800;margin-bottom:5px;display:flex;gap:6px;align-items:center}
.ai-action .aa-btns{display:flex;gap:6px;margin-top:7px}
.ai-action button{font-size:11px;font-weight:700;border-radius:7px;padding:4px 12px;transition:transform .2s,opacity .2s}
.ai-action .ok{background:var(--ink);color:#fff}
.ai-action .no{border:1px solid var(--line);color:var(--ink-2)}
.ai-action button:hover{transform:translateY(-1px)}

/* ---------- intent section ---------- */
.intent-wrap{background:var(--surface-warm);border-block:1px solid var(--line-soft)}
.intent-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:38px}
.intent-card{
  text-align:start;border:1.5px solid var(--line);border-radius:var(--radius);
  background:var(--surface);padding:22px 20px 18px;cursor:pointer;position:relative;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;
  display:flex;flex-direction:column;gap:8px;min-height:158px;
}
.intent-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.intent-card.sel{border-color:var(--ink);box-shadow:var(--shadow-2)}
.intent-card .ic-dot{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:4px;font-size:15px}
.intent-card:nth-child(1) .ic-dot{background:var(--blue-soft)}
.intent-card:nth-child(2) .ic-dot{background:var(--sage-soft)}
.intent-card:nth-child(3) .ic-dot{background:var(--peach-soft)}
.intent-card:nth-child(4) .ic-dot{background:var(--blush-soft)}
.intent-card h3{font-size:17px}
.intent-card p{font-size:13.5px;color:var(--ink-2);line-height:1.5}
.intent-card .go{margin-top:auto;font-size:13px;font-weight:800;color:var(--ink-3);display:flex;align-items:center;gap:6px;opacity:0;transform:translateX(6px);transition:opacity .3s,transform .3s var(--ease)}
[dir="ltr"] .intent-card .go{transform:translateX(-6px)}
.intent-card:hover .go,.intent-card.sel .go{opacity:1;transform:none}
.intent-card.sel .go{color:var(--ink)}
.intent-other{margin-top:18px;font-size:14.5px;color:var(--ink-3)}
.intent-other button{font-weight:700;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.intent-other button:hover{color:var(--ink)}
.intent-echo{
  margin-top:26px;display:none;align-items:center;gap:10px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:12px 18px;font-size:14.5px;color:var(--ink-2);
}
.intent-echo.show{display:inline-flex;animation:rowIn .5s var(--ease)}
.intent-echo b{color:var(--ink)}

/* ---------- services (what I build) ---------- */
.svc-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:36px;margin-bottom:26px}
.svc-tab{
  font-size:15px;font-weight:700;color:var(--ink-2);
  border:1.5px solid var(--line);border-radius:99px;padding:10px 20px;
  background:var(--surface-warm);
  transition:background .3s,color .3s,border-color .3s,transform .25s var(--ease);
  display:inline-flex;align-items:center;gap:8px;
}
.svc-tab i{width:8px;height:8px;border-radius:50%;flex:none}
.svc-tab[data-svc="product"] i{background:var(--blue)}
.svc-tab[data-svc="crm"] i{background:var(--sage)}
.svc-tab[data-svc="ai"] i{background:var(--peach)}
.svc-tab[data-svc="web"] i{background:var(--blush)}
.svc-tab:hover{transform:translateY(-2px)}
.svc-tab.on{background:var(--ink);border-color:var(--ink);color:#FBF9F5}

.svc-stage{
  display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(22px,3.5vw,44px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-2);padding:clamp(22px,3.5vw,40px);
  min-height:540px;align-items:start;position:relative;overflow:hidden;
}
.svc-copy{position:relative;min-height:380px}
.svc-pane{position:absolute;inset:0;opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease),visibility 0s .5s;pointer-events:none;display:flex;flex-direction:column;visibility:hidden}
.svc-pane.on{opacity:1;transform:none;pointer-events:auto;position:relative;visibility:visible;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.svc-pane h3{font-size:clamp(21px,2.4vw,27px);margin-bottom:12px}
.svc-pane .svc-desc{color:var(--ink-2);font-size:16px;margin-bottom:18px}
.svc-pane .svc-for{font-size:14.5px;color:var(--ink-2);margin-bottom:8px;display:flex;gap:9px}
.svc-pane .svc-for b{color:var(--ink);flex:none}
.svc-caps{margin-top:auto;padding-top:22px;font-size:13px;color:var(--ink-3);letter-spacing:.03em;border-top:1px dashed var(--line);direction:ltr;text-align:end}
[dir="ltr"] .svc-caps{text-align:start}
.svc-demo{position:relative;min-height:480px}
.demo-pane{position:absolute;inset:0;opacity:0;transform:scale(.98);transition:opacity .5s var(--ease),transform .5s var(--ease),visibility 0s .5s;pointer-events:none;visibility:hidden}
.demo-pane.on{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .5s var(--ease),transform .5s var(--ease)}

/* demo shells */
.demo-window{
  height:100%;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg);box-shadow:var(--shadow-1);overflow:hidden;
  display:flex;flex-direction:column;
}
.demo-topbar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--surface-warm);border-bottom:1px solid var(--line-soft);flex:none}
.demo-topbar i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.demo-topbar .dt-name{margin-inline:auto;font-size:11px;color:var(--ink-3);letter-spacing:.06em;font-weight:700}
.demo-body{flex:1;position:relative;overflow:hidden}

.demo-hint{
  position:absolute;bottom:12px;inset-inline-start:12px;z-index:5;
  font-size:11.5px;font-weight:700;color:var(--ink-2);
  background:rgba(255,255,255,.92);border:1px solid var(--line);
  border-radius:99px;padding:5px 13px;box-shadow:var(--shadow-1);
  display:flex;align-items:center;gap:7px;
}
.demo-hint .pulse{width:7px;height:7px;border-radius:50%;background:var(--blue);animation:pl 1.6s infinite}
@keyframes pl{0%,100%{box-shadow:0 0 0 0 rgba(104,132,159,.4)}55%{box-shadow:0 0 0 6px rgba(104,132,159,0)}}

/* product demo (Atelier) */
.pd{display:grid;grid-template-columns:150px 1fr;height:100%}
.pd-side{background:var(--surface-warm);border-inline-end:1px solid var(--line-soft);padding:14px 10px;display:flex;flex-direction:column}
.pd-main{padding:16px;overflow:hidden;position:relative;background:var(--surface)}
.pd-step{position:absolute;inset:16px;opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}
.pd-step.on{opacity:1;transform:none;pointer-events:auto}
.pd-users{display:flex;margin-inline-start:6px}
.pd-users .avatar{margin-inline-start:-7px;border:2px solid var(--surface)}
.pd-next{
  position:absolute;bottom:14px;inset-inline-end:14px;z-index:6;
  background:var(--ink);color:#fff;font-size:12.5px;font-weight:700;
  border-radius:99px;padding:8px 18px;display:flex;align-items:center;gap:7px;
  box-shadow:var(--shadow-2);transition:transform .25s var(--ease);
}
.pd-next:hover{transform:translateY(-2px)}
.pd-dots{position:absolute;bottom:22px;inset-inline-start:16px;display:flex;gap:5px;z-index:6}
.pd-dots i{width:16px;height:3px;border-radius:2px;background:var(--line);transition:background .3s}
.pd-dots i.on{background:var(--ink)}

.phone{
  width:118px;border-radius:18px;border:1px solid var(--line);
  background:var(--surface);box-shadow:var(--shadow-2);overflow:hidden;flex:none;
}
.phone-notch{height:16px;display:flex;justify-content:center;align-items:center}
.phone-notch i{width:34px;height:5px;border-radius:99px;background:var(--line)}
.phone-body{padding:8px 9px 12px;font-size:9.5px}

/* CRM demo */
.crm{display:grid;grid-template-columns:140px 1fr;height:100%}
.crm-side{background:var(--surface-warm);border-inline-end:1px solid var(--line-soft);padding:13px 9px;display:flex;flex-direction:column;gap:1px}
.crm-main{background:var(--surface);position:relative;overflow:hidden}
.crm-list,.crm-record{position:absolute;inset:0;padding:16px;transition:transform .55s var(--ease),opacity .55s var(--ease)}
.crm-record{transform:translateX(-24px);opacity:0;pointer-events:none;display:flex;flex-direction:column}
[dir="ltr"] .crm-record{transform:translateX(24px)}
.crm.open .crm-list{transform:translateX(18px);opacity:0;pointer-events:none}
[dir="ltr"] .crm.open .crm-list{transform:translateX(-18px)}
.crm.open .crm-record{transform:none;opacity:1;pointer-events:auto}
.crm-back{font-size:11.5px;font-weight:800;color:var(--ink-3);display:inline-flex;gap:5px;align-items:center;margin-bottom:10px}
.crm-back:hover{color:var(--ink)}
.crm-rec-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.crm-rec-head .t{font-size:15px;font-weight:800}
.crm-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:10px;flex:1;min-height:0}
.crm-col{display:flex;flex-direction:column;min-height:0}
.crm-panel{border:1px solid var(--line-soft);border-radius:var(--radius-xs);background:var(--surface-warm);padding:10px;margin-bottom:9px}
.crm-panel .ph{font-size:10.5px;font-weight:800;color:var(--ink-3);letter-spacing:.05em;margin-bottom:7px;display:flex;justify-content:space-between;align-items:center}
.crm-actions{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px}
.crm-actions button{font-size:11px;font-weight:700;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:5px 11px;transition:transform .2s var(--ease),border-color .2s,background .2s}
.crm-actions button:hover{transform:translateY(-1px);border-color:var(--ink-3)}
.crm-actions button.done-flash{background:var(--sage-soft);border-color:var(--sage)}
.tl{display:flex;flex-direction:column;gap:0;overflow:hidden}
.tl-item{display:flex;gap:9px;font-size:11.5px;position:relative;padding-bottom:11px}
.tl-item::before{content:"";position:absolute;inset-inline-start:5.5px;top:14px;bottom:0;width:1.5px;background:var(--line-soft)}
.tl-item:last-child::before{display:none}
.tl-dot{width:12px;height:12px;border-radius:50%;border:3px solid var(--surface);flex:none;margin-top:2px;box-shadow:0 0 0 1px var(--line)}
.tl-item .tt{font-weight:700}
.tl-item .ts{color:var(--ink-3);font-size:10.5px}
.tl-item.enter{animation:rowIn .5s var(--ease) both}

/* AI demo */
.aidemo{display:grid;grid-template-columns:1fr 168px;height:100%}
.ai-chatcol{padding:14px;display:flex;flex-direction:column;background:var(--surface);min-width:0}
.ai-syscol{background:var(--surface-warm);border-inline-start:1px solid var(--line-soft);padding:13px 11px;display:flex;flex-direction:column;gap:7px;overflow:hidden}
.ai-syscol .sh{font-size:10px;font-weight:800;letter-spacing:.07em;color:var(--ink-3);margin-bottom:2px}
.sys-item{background:var(--surface);border:1px solid var(--line-soft);border-radius:8px;padding:7px 9px;font-size:11px;transition:border-color .4s,box-shadow .4s,transform .4s var(--ease)}
.sys-item .t{font-weight:700;font-size:11px}
.sys-item .chip{margin-top:4px}
.sys-item.scan{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-ghost);transform:translateY(-1px)}
.ai-input{margin-top:auto;display:flex;gap:8px;border:1.5px solid var(--line);border-radius:12px;padding:9px 13px;font-size:12.5px;color:var(--ink-3);align-items:center;background:var(--surface-warm)}
.ai-input .send{width:24px;height:24px;border-radius:8px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;flex:none}
.ai-replay{align-self:center;margin-top:10px;font-size:12px;font-weight:800;color:var(--ink-3);display:none}
.ai-replay.show{display:inline-flex;gap:6px;align-items:center}
.ai-replay:hover{color:var(--ink)}

/* automation pipeline */
.pipe{display:flex;align-items:stretch;gap:0;margin-top:14px;border-top:1px dashed var(--line);padding-top:13px}
.pipe-step{flex:1;text-align:center;position:relative;padding-inline:2px}
.pipe-step .pp{width:30px;height:30px;border-radius:10px;margin-inline:auto;display:flex;align-items:center;justify-content:center;background:var(--bg);border:1.5px solid var(--line);transition:background .4s,border-color .4s,transform .4s var(--ease);font-size:12px}
.pipe-step .pl{font-size:9.5px;font-weight:700;color:var(--ink-3);margin-top:5px;line-height:1.25}
.pipe-step::after{content:"";position:absolute;top:15px;inset-inline-end:-50%;width:100%;height:1.5px;background:var(--line);z-index:-1;transition:background .4s}
.pipe-step:last-child::after{display:none}
.pipe-step.on .pp{background:var(--peach-soft);border-color:var(--peach);transform:scale(1.12)}
.pipe-step.done .pp{background:var(--sage-soft);border-color:var(--sage);transform:none}
.pipe-step.done::after{background:var(--sage)}
.pipe-step.on .pl,.pipe-step.done .pl{color:var(--ink)}

/* web demo */
.webdemo{height:100%;display:flex;flex-direction:column}
.web-picker{display:flex;gap:6px;padding:10px 12px;background:var(--surface-warm);border-bottom:1px solid var(--line-soft);flex:none;flex-wrap:wrap}
.web-picker button{font-size:11.5px;font-weight:700;border:1px solid var(--line);border-radius:99px;padding:4.5px 13px;background:var(--surface);color:var(--ink-2);transition:all .25s}
.web-picker button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.web-view{flex:1;position:relative;overflow:hidden;background:var(--bg-soft)}
.web-arch{position:absolute;inset:0;overflow-y:auto;scrollbar-width:thin;opacity:0;pointer-events:none;transition:opacity .45s var(--ease),visibility 0s .45s;visibility:hidden}
.web-arch.on{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .45s var(--ease)}
/* children of a hidden demo pane must never re-enable themselves */
.demo-pane:not(.on) *{visibility:hidden!important;pointer-events:none!important}
.scene:not(.on) *,.bz-scene:not(.on) *{pointer-events:none!important}
.web-arch::-webkit-scrollbar{width:5px}
.web-arch::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.web-shot{width:100%;display:block;border-bottom:1px solid var(--line-soft)}
.web-sec{padding:26px 22px;border-bottom:1px solid var(--line-soft)}
.web-sec.center{text-align:center}
.web-cap{position:absolute;top:10px;inset-inline-start:10px;z-index:4;font-size:10.5px;font-weight:700;background:rgba(255,255,255,.94);border:1px solid var(--line);color:var(--ink-2);border-radius:99px;padding:4px 12px;box-shadow:var(--shadow-1)}

/* mock site pieces (for landing/campaign archetypes) */
.mock-nav{display:flex;justify-content:space-between;align-items:center;padding:13px 22px;background:var(--surface);border-bottom:1px solid var(--line-soft);font-size:11px}
.mock-nav .ml{font-weight:800;letter-spacing:.08em}
.mock-nav .mm{display:flex;gap:12px;color:var(--ink-3);font-weight:600}
.mock-hero{padding:36px 22px;text-align:center}
.mock-hero .mh-t{font-size:21px;font-weight:800;line-height:1.25;margin-bottom:8px}
.mock-hero .mh-s{font-size:12px;color:var(--ink-2);max-width:300px;margin-inline:auto;margin-bottom:14px}
.mock-btn{display:inline-block;font-size:11.5px;font-weight:700;background:var(--ink);color:#fff;border-radius:99px;padding:7px 18px}
.mock-btn.lite{background:transparent;color:var(--ink);border:1px solid var(--line);margin-inline-start:6px}
.mock-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:0 22px 26px}
.mock-card{background:var(--surface);border:1px solid var(--line-soft);border-radius:10px;padding:12px 10px;font-size:10px}
.mock-card .mc-i{width:22px;height:22px;border-radius:7px;margin-bottom:7px}
.mock-card .mc-t{font-weight:800;font-size:10.5px;margin-bottom:3px}
.mock-card p{color:var(--ink-3);line-height:1.45}
.mock-band{padding:28px 22px;text-align:center}
.mock-band .mb-t{font-family:var(--font-serif);font-size:16px;font-weight:600;max-width:290px;margin-inline:auto;line-height:1.45}
.mock-form{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;margin:0 22px 26px;box-shadow:var(--shadow-1)}
.mock-field{border:1px solid var(--line-soft);border-radius:8px;padding:7px 10px;font-size:10.5px;color:var(--ink-3);margin-bottom:7px;background:var(--surface-warm)}
.mock-steps{display:flex;gap:5px;margin-bottom:10px}
.mock-steps i{flex:1;height:3px;border-radius:2px;background:var(--line-soft)}
.mock-steps i.on{background:var(--sage)}

/* ---------- work section ---------- */
.work{background:var(--surface-warm);border-block:1px solid var(--line-soft)}
.bz-feature{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(26px,4vw,56px);
  margin-top:44px;align-items:center;
}
.bz-copy .founder{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:#6B5E3E;background:var(--butter-soft);border-radius:99px;padding:5px 14px;margin-bottom:16px}
.bz-copy h3{font-size:clamp(26px,3vw,36px);letter-spacing:.02em;margin-bottom:6px;font-weight:300}
.bz-copy h3 b{font-weight:800}
.bz-state{font-family:var(--font-serif);font-size:clamp(17px,1.9vw,20px);color:var(--ink);margin-bottom:14px;line-height:1.5}
.bz-desc{color:var(--ink-2);font-size:15.5px;margin-bottom:20px;max-width:440px}
.bz-tags{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:24px}
.bz-link{font-weight:800;font-size:15px;display:inline-flex;align-items:center;gap:8px;border-bottom:2px solid var(--peach);padding-bottom:2px;transition:gap .25s var(--ease)}
.bz-link:hover{gap:12px}

/* BrainZone faithful demo shell */
.bz-demo{position:relative}
.bz-window{
  border-radius:var(--radius-lg);border:1px solid var(--line);
  background:#F8F7F5;box-shadow:var(--shadow-3);overflow:hidden;
  aspect-ratio:10/7.2;display:flex;flex-direction:column;
}
.bz-top{display:flex;align-items:center;padding:12px 18px;border-bottom:1px solid #ECEAE6;flex:none;background:#F8F7F5}
.bz-wordmark{font-size:12px;letter-spacing:.34em;font-weight:800;color:#1F1E1B}
.bz-wordmark span{font-weight:300;color:#8B887F}
.bz-top .bz-crumb{margin-inline-start:auto;font-size:11px;color:#8B887F}
.bz-stagebox{flex:1;position:relative;overflow:hidden}
.bz-scene{position:absolute;inset:0;padding:18px 22px;opacity:0;transform:translateY(10px);transition:opacity .55s var(--ease),transform .55s var(--ease),visibility 0s .55s;pointer-events:none;overflow:hidden;visibility:hidden}
.bz-scene.on{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .55s var(--ease),transform .55s var(--ease)}
.bz-tabs{display:flex;gap:6px;padding:12px 16px;border-top:1px solid #ECEAE6;flex:none;background:#F8F7F5;flex-wrap:wrap}
.bz-tabs button{font-size:12px;font-weight:700;color:#6E6A62;border-radius:99px;padding:5.5px 14px;border:1px solid transparent;transition:all .25s}
.bz-tabs button:hover{color:#1F1E1B}
.bz-tabs button.on{background:#1F1E1B;color:#F8F7F5}
/* brainzone inner pieces — faithful minimal ivory style */
.bzc{background:#FFFFFF;border:1px solid #ECEAE6;border-radius:12px;padding:13px 15px;box-shadow:0 1px 2px rgba(30,28,24,.04)}
.bz-h{font-size:15px;font-weight:800;color:#1F1E1B}
.bz-s{font-size:11px;color:#8B887F}
.bz-chip{display:inline-block;font-size:10px;font-weight:700;border-radius:6px;padding:2px 8px;background:#F1EFEA;color:#6E6A62}
.bz-chip.late{background:#F6E3DA;color:#9C5F3F}
.bz-chip.cat{background:#EDEFE9;color:#5D6B57}
.bz-prog{height:4px;background:#EFEDE8;border-radius:99px;overflow:hidden;margin-top:9px}
.bz-prog i{display:block;height:100%;background:#1F1E1B;border-radius:99px;transition:width 1.1s var(--ease)}
.bz-days{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.bz-day{background:#fff;border:1px solid #ECEAE6;border-radius:10px;padding:8px;min-height:86px;font-size:10px;color:#8B887F;transition:border-color .3s,box-shadow .3s}
.bz-day .dn{font-size:13px;color:#1F1E1B;font-weight:700}
.bz-day.today{border-color:#1F1E1B;box-shadow:0 0 0 1px #1F1E1B}
.bz-pill{font-size:9px;background:#F1EFEA;border-radius:5px;padding:2px 6px;margin-top:4px;display:block;color:#5C5952;border-inline-start:2.5px solid #C9CDBF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bz-pill.b{border-inline-start-color:#B9C7D4}
.bz-task{display:flex;align-items:center;gap:9px;padding:8px 4px;border-bottom:1px solid #F1EFEA;font-size:12px;color:#1F1E1B}
.bz-task:last-child{border-bottom:0}
.bz-task .bz-when{margin-inline-start:auto;font-size:10px;color:#B4B0A6;flex:none}
/* soleil */
.soleil{position:absolute;inset-inline-start:14px;bottom:14px;top:14px;width:230px;background:#232019;color:#EFEBE2;border-radius:16px;padding:14px;display:flex;flex-direction:column;box-shadow:var(--shadow-3);transform:translateY(12px);opacity:0;transition:opacity .5s var(--ease),transform .5s var(--ease);z-index:5}
.bz-scene.on .soleil{opacity:1;transform:none}
.soleil .so-h{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.04em;margin-bottom:4px}
.soleil .so-sun{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#F4E9C8,#D9B96A);flex:none}
.soleil .so-s{font-size:10px;color:#9C978A;margin-bottom:10px}
.so-b{border-radius:10px;padding:8px 10px;font-size:11px;line-height:1.5;margin-bottom:8px;opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.so-b.show{opacity:1;transform:none}
.so-b.q{background:#38332A;align-self:flex-start}
.so-b.a{background:#2C2822;border:1px solid #3E3930}
.so-input{margin-top:auto;border:1px solid #3E3930;border-radius:10px;padding:7px 10px;font-size:10.5px;color:#8F8A7D;display:flex;align-items:center;gap:7px}
.so-input .snd{margin-inline-start:auto;width:20px;height:20px;border-radius:7px;background:#EFEBE2;color:#232019;display:flex;align-items:center;justify-content:center;font-size:10px}

/* other work */
.work-cats{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:56px}
.work-cat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow-1);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.work-cat:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.work-cat h4{font-size:19px;margin-bottom:6px}
.work-cat>p{font-size:14.5px;color:var(--ink-2);margin-bottom:18px}
.work-media{border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--line-soft);position:relative;background:var(--bg-soft)}
.work-media img{width:100%;height:100%;object-fit:cover;object-position:top;transition:opacity .6s var(--ease)}
.work-cap{font-size:12.5px;color:var(--ink-3);margin-top:10px;display:flex;justify-content:space-between;align-items:center}
.rp-cycle{aspect-ratio:16/9.5;position:relative}
.rp-cycle img{position:absolute;inset:0;opacity:0}
.rp-cycle img.on{opacity:1}
.crm-mini-cycle{aspect-ratio:16/9.5;position:relative;background:var(--surface-warm)}
.crm-mini-scene{position:absolute;inset:0;padding:14px;opacity:0;transition:opacity .6s var(--ease)}
.crm-mini-scene.on{opacity:1}

/* ---------- process ---------- */
.process-rail{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,60px);margin-top:44px;align-items:start}
.proc-steps{position:sticky;top:110px}
.proc-step{display:flex;gap:16px;padding-block:13px;opacity:.38;transition:opacity .4s;cursor:pointer}
.proc-step .pn{font-family:var(--font-serif);font-size:15px;color:var(--ink-3);width:26px;flex:none;padding-top:2px}
.proc-step h4{font-size:19px;margin-bottom:2px}
.proc-step p{font-size:14.5px;color:var(--ink-2)}
.proc-step.on{opacity:1}
.proc-step .pbar{width:2.5px;border-radius:2px;background:var(--line);flex:none;align-self:stretch;position:relative;overflow:hidden}
.proc-step .pbar i{position:absolute;inset-inline:0;top:0;height:0;background:var(--peach);transition:height .5s var(--ease)}
.proc-step.on .pbar i{height:100%}
.proc-visual{position:relative;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-2);aspect-ratio:10/8;overflow:hidden}
.proc-scene{position:absolute;inset:0;padding:26px;opacity:0;transform:scale(.97);transition:opacity .5s var(--ease),transform .5s var(--ease);display:flex;align-items:center;justify-content:center}
.proc-scene.on{opacity:1;transform:none}

/* messy → clear visual pieces */
.mess{position:relative;width:100%;height:100%}
.mess .m-item{position:absolute;background:var(--surface-warm);border:1px solid var(--line);border-radius:10px;padding:8px 13px;font-size:12px;font-weight:700;color:var(--ink-2);box-shadow:var(--shadow-1)}
.flow-box{border:1.5px solid var(--line);border-radius:12px;padding:10px 16px;font-size:13px;font-weight:700;background:var(--surface);text-align:center}
.flow-arrow{color:var(--ink-3);font-size:15px}

/* ---------- why ---------- */
.why-items{margin-top:20px}
.why-item{border-top:1px solid var(--line);padding-block:clamp(28px,4vw,44px);display:grid;grid-template-columns:.42fr .58fr;gap:clamp(18px,3vw,40px);align-items:start}
.why-item:last-child{border-bottom:1px solid var(--line)}
.why-item h3{font-size:clamp(20px,2.4vw,27px);display:flex;gap:14px;align-items:baseline}
.why-item h3 .wn{font-family:var(--font-serif);font-size:15px;color:var(--peach);flex:none}
.why-item p{font-family:var(--font-serif);font-size:clamp(17px,2vw,21px);line-height:1.65;color:var(--ink-2)}
.why-item p b{color:var(--ink);font-weight:600}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,70px);align-items:center}
.about-text p{font-size:clamp(17px,1.9vw,19.5px);color:var(--ink-2);margin-bottom:18px;line-height:1.75}
.about-text p b{color:var(--ink)}
.about-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.meta-chip{font-size:13.5px;font-weight:700;color:var(--ink-2);border:1px solid var(--line);background:var(--surface-warm);border-radius:99px;padding:6px 15px;display:inline-flex;gap:7px;align-items:center}
.meta-chip i{width:6px;height:6px;border-radius:50%;background:var(--blue)}
.about-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-2);padding:30px;position:relative;overflow:hidden;
}
.about-card::before{content:"";position:absolute;inset-inline-end:-40px;top:-40px;width:150px;height:150px;border-radius:50%;background:var(--butter-soft);opacity:.7}
.about-q{font-family:var(--font-serif);font-size:clamp(19px,2.2vw,23px);line-height:1.6;position:relative;margin-bottom:18px}
.about-sign{font-size:14px;color:var(--ink-3);position:relative}

/* ---------- intake ---------- */
.intake-sec{background:var(--surface-warm);border-top:1px solid var(--line-soft)}
.intake{
  max-width:760px;margin:44px auto 0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-2);overflow:hidden;
}
.intake-head{display:flex;align-items:center;gap:10px;padding:18px 26px;border-bottom:1px solid var(--line-soft);background:var(--surface-warm)}
.intake-prog{flex:1;display:flex;gap:6px}
.intake-prog i{flex:1;height:4px;border-radius:3px;background:var(--line);transition:background .4s}
.intake-prog i.on{background:var(--sage)}
.intake-stepnum{font-size:12.5px;font-weight:800;color:var(--ink-3);flex:none}
.intake-body{padding:clamp(22px,4vw,36px);position:relative;min-height:380px}
.i-step{display:none;animation:rowIn .45s var(--ease)}
.i-step.on{display:block}
.i-step h3{font-size:clamp(20px,2.4vw,25px);margin-bottom:6px}
.i-step .i-sub{color:var(--ink-2);font-size:15px;margin-bottom:24px}
.i-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.i-opt{
  text-align:start;border:1.5px solid var(--line);border-radius:12px;
  padding:14px 16px;font-size:15px;font-weight:700;background:var(--surface);
  transition:all .25s var(--ease);display:flex;align-items:center;gap:10px;
}
.i-opt small{display:block;font-weight:500;font-size:12.5px;color:var(--ink-3);margin-top:1px}
.i-opt:hover{border-color:var(--ink-3);transform:translateY(-1px)}
.i-opt.sel{border-color:var(--ink);background:var(--surface-warm);box-shadow:0 0 0 3px var(--line-soft)}
.i-opt .radio{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);flex:none;transition:all .25s;position:relative}
.i-opt.sel .radio{border-color:var(--ink)}
.i-opt.sel .radio::after{content:"";position:absolute;inset:2.5px;border-radius:50%;background:var(--ink)}
.i-q{margin-bottom:22px}
.i-q label,.i-field label{display:block;font-weight:800;font-size:15px;margin-bottom:9px}
.i-q label small,.i-field label small{font-weight:600;color:var(--ink-3)}
.i-chips{display:flex;gap:8px;flex-wrap:wrap}
.i-chip{border:1.5px solid var(--line);border-radius:99px;padding:8px 17px;font-size:14px;font-weight:700;background:var(--surface);transition:all .22s}
.i-chip:hover{border-color:var(--ink-3)}
.i-chip.sel{background:var(--ink);color:#fff;border-color:var(--ink)}
.i-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.i-field{margin-bottom:6px}
.i-field.full{grid-column:1/-1}
.i-field input,.i-field textarea,.i-field select{
  width:100%;border:1.5px solid var(--line);border-radius:11px;
  padding:11px 15px;font-size:15px;background:var(--surface-warm);
  transition:border-color .25s,box-shadow .25s;outline:none;resize:vertical;
}
.i-field input:focus,.i-field textarea:focus,.i-field select:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-ghost);background:var(--surface)}
.i-nav{display:flex;justify-content:space-between;align-items:center;margin-top:30px;gap:12px}
.i-back{font-weight:800;color:var(--ink-3);font-size:14.5px;display:inline-flex;gap:6px;align-items:center}
.i-back:hover{color:var(--ink)}
.i-summary{
  background:var(--surface-warm);border:1px solid var(--line);border-radius:14px;
  padding:20px;font-size:15.5px;line-height:1.7;margin-bottom:14px;position:relative;
}
.i-summary[contenteditable]:focus{outline:2px solid var(--blue-soft);border-color:var(--blue)}
.i-summary-tag{position:absolute;top:-11px;inset-inline-start:16px;font-size:11.5px;font-weight:800;background:var(--butter-soft);color:#6B5E3E;border-radius:99px;padding:2px 12px}
.i-edit-hint{font-size:13px;color:var(--ink-3);margin-bottom:24px}
.i-success{text-align:center;padding-block:34px}
.i-success .ok-ring{width:64px;height:64px;border-radius:50%;background:var(--sage-soft);margin:0 auto 20px;display:flex;align-items:center;justify-content:center}
.i-success .ok-ring::after{content:"";width:22px;height:12px;border-inline-start:3.5px solid var(--sage);border-bottom:3.5px solid var(--sage);transform:rotate(-45deg) translate(2px,-3px)}
.i-success h3{margin-bottom:8px}
.i-success p{color:var(--ink-2)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding-block:44px;background:var(--bg)}
.foot{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.foot .brand-name{font-size:19px}
.foot-links{display:flex;gap:20px;margin-inline-start:auto;font-size:14.5px;color:var(--ink-2);flex-wrap:wrap}
.foot-links a:hover{color:var(--ink)}
.foot-note{margin-top:18px;font-size:13px;color:var(--ink-3)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:56px}
  .hero-sub{max-width:100%}
  .svc-stage{grid-template-columns:1fr;min-height:0}
  .svc-copy{min-height:0}
  .svc-demo{min-height:480px}
  .intent-cards{grid-template-columns:1fr 1fr}
  .bz-feature{grid-template-columns:1fr}
  .work-cats{grid-template-columns:1fr}
  .process-rail{grid-template-columns:1fr}
  .proc-steps{position:static;display:grid;grid-template-columns:1fr;gap:0}
  .why-item{grid-template-columns:1fr;gap:10px}
  .about-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  body{font-size:16px}
  .nav-links{display:none}
  .burger{display:flex}
  .intent-cards{grid-template-columns:1fr}
  .i-opts{grid-template-columns:1fr}
  .i-fields{grid-template-columns:1fr}
  .svc-tabs{gap:6px}
  .svc-tab{padding:8.5px 15px;font-size:13.5px}
  .stage-frame{aspect-ratio:10/10.5}
  .bz-window{aspect-ratio:10/9.6}
  .pd{grid-template-columns:1fr}
  .pd-side{display:none}
  .scene .mini{grid-template-columns:1fr}
  .scene .mini-side{display:none}
  .crm{grid-template-columns:1fr}
  .crm-side{display:none}
  .aidemo{grid-template-columns:1fr}
  .ai-syscol{display:none}
  .crm-grid{grid-template-columns:1fr}
  .soleil{width:auto;inset-inline-end:14px}
  .mock-cards{grid-template-columns:1fr 1fr}
  .hero{padding-top:110px}
  .stage-cap{display:none}
  .stage-dots{bottom:-24px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ============================================================
   V2 — services rebuild, BrainZone film, motion upgrades
   ============================================================ */

/* ---------- problem → solution ---------- */
.ps{display:flex;flex-direction:column;gap:0;margin-bottom:18px}
.ps-row{display:flex;gap:12px;align-items:flex-start;padding:13px 0}
.ps-row + .ps-row{border-top:1px dashed var(--line)}
.ps-label{flex:none;font-size:11.5px;font-weight:800;letter-spacing:.07em;color:var(--ink-3);text-transform:uppercase;padding:3px 0;width:74px}
.ps-row.sol .ps-label{color:var(--accent,var(--blue))}
.ps-row p{font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.ps-row.sol p{color:var(--ink);font-weight:600}
.ps-arrow{align-self:center;color:var(--accent,var(--blue));font-size:15px;margin-inline-start:74px;line-height:.6;opacity:.8}

/* accent per service */
.svc-stage{--accent:var(--blue);transition:box-shadow .5s var(--ease)}
.svc-stage::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.55;transition:background .5s}
.svc-stage[data-accent="crm"]{--accent:var(--sage)}
.svc-stage[data-accent="ai"]{--accent:var(--peach)}
.svc-stage[data-accent="web"]{--accent:var(--blush)}
.svc-tab.on{position:relative}

/* ---------- assembly (digital product) ---------- */
.asm{position:relative;height:100%;overflow:hidden;background:var(--surface);border-radius:var(--radius-sm)}
.asm-piece{
  position:absolute;z-index:3;
  font-size:12px;font-weight:800;color:var(--ink-2);
  background:var(--surface-warm);border:1.5px solid var(--line);border-radius:10px;
  padding:7px 13px;cursor:pointer;box-shadow:var(--shadow-1);
  transition:transform 1s var(--ease),opacity .6s,border-color .3s,color .3s,box-shadow .3s;
  transform:translate(var(--sx),var(--sy)) rotate(var(--sr,0deg));
  will-change:transform;
}
.asm-piece i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--pc,var(--blue));margin-inline-end:7px}
.asm-piece:hover{border-color:var(--ink-3);transform:translate(var(--sx),var(--sy)) rotate(var(--sr,0deg)) scale(1.05)}
.asm.built .asm-piece{transform:translate(var(--tx),var(--ty)) rotate(0)}
.asm.built .asm-piece:hover{transform:translate(var(--tx),var(--ty)) scale(1.06)}
.asm-piece.dim{opacity:.35}
.asm-piece.lit{border-color:var(--pc,var(--blue));color:var(--ink);box-shadow:0 0 0 3px var(--blue-ghost)}
.asm-frame{
  position:absolute;inset-inline:12%;top:20%;bottom:8%;z-index:1;
  border:1.5px dashed var(--line);border-radius:14px;background:var(--surface-warm);
  opacity:0;transform:scale(.94);transition:opacity .8s var(--ease) .3s,transform .8s var(--ease) .3s,border-color .5s;
  overflow:hidden;
}
.asm.built .asm-frame{opacity:1;transform:none;border-style:solid}
.asm-ui{position:absolute;inset:0;padding:12px;opacity:0;transition:opacity .7s var(--ease) 1s}
.asm.built .asm-ui{opacity:1}
.asm-slot{position:relative;border-radius:8px;transition:box-shadow .35s,background .35s}
.asm-slot.lit{box-shadow:0 0 0 2.5px var(--pc,var(--blue));background:#fff}
.asm-status{position:absolute;bottom:12px;inset-inline-start:12px;z-index:4;font-size:11.5px;font-weight:800;color:var(--ink-3);display:flex;align-items:center;gap:8px}
.asm-status .progress{width:90px}
.asm-reset{position:absolute;top:12px;inset-inline-end:12px;z-index:4;font-size:11.5px;font-weight:800;color:var(--ink-3);border:1px solid var(--line);border-radius:99px;padding:4px 12px;background:var(--surface);transition:all .25s}
.asm-reset:hover{color:var(--ink);border-color:var(--ink-3)}

/* ---------- convergence (CRM) ---------- */
.conv-cover{position:absolute;inset:0;z-index:8;background:var(--surface);display:flex;align-items:center;justify-content:center;transition:opacity .7s var(--ease),visibility 0s .7s;border-radius:var(--radius-sm)}
.conv-cover.gone{opacity:0;visibility:hidden;pointer-events:none}
.conv-item{
  position:absolute;font-size:12.5px;font-weight:800;color:var(--ink-2);
  background:var(--surface-warm);border:1.5px solid var(--line);border-radius:10px;
  padding:8px 14px;box-shadow:var(--shadow-1);
  transform:translate(var(--sx),var(--sy)) rotate(var(--sr,0));
  transition:transform 1.1s var(--ease),opacity .5s;
}
.conv-item i{display:inline-block;width:7px;height:7px;border-radius:2px;background:var(--sage);margin-inline-end:7px;opacity:.7}
.conv-cover.pull .conv-item{transform:translate(0,0) scale(.4);opacity:0}
.conv-core{position:relative;z-index:2;text-align:center}
.conv-core .cc-ring{width:74px;height:74px;border-radius:22px;border:1.5px solid var(--line);background:var(--surface-warm);margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-size:24px;transition:transform .8s var(--ease),box-shadow .8s}
.conv-cover.pull .cc-ring{transform:scale(1.12);box-shadow:0 0 0 6px var(--sage-soft)}
.conv-core p{font-size:13.5px;font-weight:700;color:var(--ink-2);max-width:210px;margin-inline:auto}
.conv-go{margin-top:14px;font-size:13px;font-weight:800;background:var(--ink);color:#fff;border-radius:99px;padding:8px 20px;box-shadow:var(--shadow-1);transition:transform .25s var(--ease)}
.conv-go:hover{transform:translateY(-2px)}

/* ---------- AI manual→auto ---------- */
.ai-mode{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line-soft);background:var(--surface-warm);flex:none}
.ai-mode .m-label{font-size:12px;font-weight:800;color:var(--ink-3);transition:color .3s}
.ai-mode .m-label.on{color:var(--ink)}
.ai-switch{width:44px;height:24px;border-radius:99px;background:var(--line);position:relative;transition:background .35s;flex:none;cursor:pointer}
.ai-switch::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:var(--shadow-1);transition:transform .35s var(--ease)}
.ai-switch.on{background:var(--peach)}
.ai-switch.on::after{transform:translateX(-20px)}
[dir="ltr"] .ai-switch.on::after{transform:translateX(20px)}
.ai-mode .m-hint{margin-inline-start:auto;font-size:11px;color:var(--ink-3);font-weight:700}
.pipe-step .pm{font-size:9px;font-weight:800;border-radius:5px;padding:1.5px 7px;margin-top:4px;display:inline-block;background:var(--bg);color:var(--ink-3);border:1px solid var(--line-soft);transition:all .4s}
.pipe-step.auto .pm{background:var(--peach-soft);color:#8A5A31;border-color:transparent}
.pipe-step.done .pm{background:var(--sage-soft);color:#4C6547;border-color:transparent}

/* ---------- web builder ---------- */
.wb{height:100%;display:flex;flex-direction:column;background:var(--bg-soft)}
.wb-parts{display:flex;gap:7px;padding:11px 13px;background:var(--surface-warm);border-bottom:1px solid var(--line-soft);flex-wrap:wrap;flex:none}
.wb-part{font-size:11.5px;font-weight:800;color:var(--ink-2);border:1.5px solid var(--line);background:var(--surface);border-radius:99px;padding:5px 13px;transition:all .35s var(--ease);cursor:pointer}
.wb-part.placed{border-color:var(--blush);color:var(--ink);background:var(--blush-soft)}
.wb-part:hover{transform:translateY(-1px)}
.wb-stagewrap{flex:1;position:relative;display:flex;justify-content:center;padding:16px 0;overflow:hidden}
.wb-frame{
  width:var(--vw,92%);max-width:92%;min-width:220px;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;overflow-y:auto;
  box-shadow:var(--shadow-2);transition:width .5s var(--ease);
  scrollbar-width:thin;
}
.wb-sec{opacity:.25;filter:saturate(.4);transition:opacity .6s var(--ease),filter .6s}
.wb-sec.live{opacity:1;filter:none}
.wb-vp{display:flex;gap:6px;padding:10px 13px;border-top:1px solid var(--line-soft);background:var(--surface-warm);align-items:center;flex:none}
.wb-vp .vp-label{font-size:11px;font-weight:800;color:var(--ink-3);margin-inline-end:4px}
.wb-vp button{font-size:11.5px;font-weight:700;border:1px solid var(--line);border-radius:8px;padding:4px 12px;background:var(--surface);color:var(--ink-2);transition:all .25s}
.wb-vp button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.wb-vp input[type="range"]{flex:1;accent-color:var(--ink);min-width:60px}
.wb-arche{display:flex;gap:6px;margin-inline-start:auto}

/* ---------- BrainZone film ---------- */
.film{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-3);background:#F3F1EC;aspect-ratio:16/9.6}
.film-frame{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease);overflow:hidden}
.film-frame.on{opacity:1}
.film-frame img{width:100%;height:100%;object-fit:contain;object-position:center;transform:scale(1.05);transition:transform 7s linear}
.film-frame.on img{transform:scale(1.0) translateY(0)}
.film-cap{
  position:absolute;bottom:14px;inset-inline-start:14px;z-index:6;
  font-size:12.5px;font-weight:700;color:var(--ink);
  background:rgba(252,250,246,.92);border:1px solid var(--line);
  border-radius:99px;padding:6px 15px;box-shadow:var(--shadow-1);
  transition:opacity .4s;backdrop-filter:blur(6px);
}
.film-progress{position:absolute;top:0;inset-inline:0;z-index:6;height:2.5px;background:rgba(255,255,255,.25)}
.film-progress i{display:block;height:100%;width:0;background:#FBF9F5}
.film-progress i.run{transition:width var(--fd,5s) linear;width:100%}
.film-tabs{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.film-tab{
  font-size:13.5px;font-weight:700;color:var(--ink-2);
  border:1.5px solid var(--line);border-radius:99px;padding:7px 17px;background:var(--surface-warm);
  transition:all .3s var(--ease);display:inline-flex;align-items:center;gap:7px;
}
.film-tab i{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .3s}
.film-tab:hover{transform:translateY(-2px)}
.film-tab.on{background:var(--ink);color:#FBF9F5;border-color:var(--ink)}
.film-tab.on i{background:var(--peach)}

/* ---------- about v2 ---------- */
.about-stack{margin-top:26px;border-top:1px solid var(--line)}
.stack-row{display:flex;align-items:center;gap:14px;padding:13px 4px;border-bottom:1px solid var(--line);transition:background .3s,padding .3s var(--ease)}
.stack-row:hover{background:var(--surface-warm);padding-inline-start:12px}
.stack-row .sn{font-family:var(--font-serif);font-size:13px;color:var(--ink-3);width:22px;flex:none}
.stack-row .st{font-weight:800;font-size:15.5px;flex:none}
.stack-row .sd{font-size:13.5px;color:var(--ink-3);margin-inline-start:auto;text-align:end;opacity:0;transform:translateX(-8px);transition:opacity .35s,transform .35s var(--ease)}
[dir="ltr"] .stack-row .sd{transform:translateX(8px)}
.stack-row:hover .sd{opacity:1;transform:none}
.stack-row .sdot{width:8px;height:8px;border-radius:50%;flex:none}

/* ---------- cursor hint ---------- */
.cursor-hint{
  position:fixed;z-index:200;pointer-events:none;
  font-size:11.5px;font-weight:800;color:var(--ink);
  background:rgba(252,250,246,.95);border:1px solid var(--line);
  border-radius:99px;padding:5px 13px;box-shadow:var(--shadow-2);
  opacity:0;transform:translate(-50%,-140%) scale(.9);
  transition:opacity .25s var(--ease),transform .25s var(--ease);
  white-space:nowrap;
}
.cursor-hint.show{opacity:1;transform:translate(-50%,-140%) scale(1)}
@media (pointer:coarse){.cursor-hint{display:none}}

/* ---------- magnetic ---------- */
.magnetic{transition:transform .3s var(--ease)}

/* ---------- misc motion ---------- */
.reveal-stagger>*{opacity:0;transform:translateY(22px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.reveal-stagger.in>*{opacity:1;transform:none}

@media (max-width:720px){
  .ps-label{width:auto;min-width:58px}
  .ps-arrow{margin-inline-start:58px}
  .asm-frame{inset-inline:6%}
  .wb-frame{max-width:96%}
  .film{aspect-ratio:16/11}
  .film-cap{font-size:11px;padding:5px 11px}
}

/* keep interactive targets clear of the sticky nav when auto-scrolled */
section{scroll-margin-top:72px}
button,.row-card,.asm-piece,.i-opt{scroll-margin-top:110px;scroll-margin-bottom:40px}

/* ============================================================
   V3 — film videos + web-builder scene effects
   ============================================================ */
.film{aspect-ratio:1280/656}
.film-frame video{width:100%;height:100%;object-fit:cover;display:block;background:#F3F1EC}
@media (max-width:720px){.film{aspect-ratio:1280/720}}

/* message morph */
.wb-msg{position:relative;min-height:96px}
.wb-msg .msg-v{transition:opacity .55s var(--ease),transform .55s var(--ease)}
.wb-msg .m1{opacity:1}
.wb-msg .m2{position:absolute;inset:0;opacity:0;transform:translateY(10px);display:flex;flex-direction:column;justify-content:center;padding:0 22px}
.wb-msg .m1 .mh-t{color:var(--ink-3);font-weight:600}
.wb-sec[data-part="message"].live .m1{opacity:0;transform:translateY(-8px)}
.wb-sec[data-part="message"].live .m2{opacity:1;transform:none}

/* content skeleton → real */
.mock-card{position:relative}
.mock-card .skl{position:absolute;inset:10px;display:flex;flex-direction:column;gap:6px;justify-content:center;transition:opacity .45s var(--ease)}
.mock-card .skl i{height:7px;border-radius:4px;background:var(--line-soft);display:block}
.mock-card .real{opacity:0;transition:opacity .55s var(--ease) .15s}
.wb-sec[data-part="content"].live .skl{opacity:0}
.wb-sec[data-part="content"].live .real{opacity:1}

/* identity themes */
.wb-frame{--brand:#211E19;--brand-soft:var(--bg-soft);transition:width .5s var(--ease)}
.wb-frame .mock-btn{transition:background .6s var(--ease),color .6s}
.wb-frame .wb-band{transition:background .6s var(--ease)}
.wb-frame .ml{transition:color .5s,letter-spacing .5s}
.wb-frame[data-theme="t1"]{--brand:#8C5546;--brand-soft:var(--blush-soft)}
.wb-frame[data-theme="t2"]{--brand:#4C6547;--brand-soft:var(--sage-soft)}
.wb-frame[data-theme="t3"]{--brand:#3E5A73;--brand-soft:var(--blue-soft)}
.wb-frame[data-theme]:not([data-theme="t0"]) .mock-btn:not(.lite){background:var(--brand)}
.wb-frame[data-theme]:not([data-theme="t0"]) .wb-band{background:var(--brand-soft)}
.wb-frame[data-theme]:not([data-theme="t0"]) .ml{color:var(--brand);letter-spacing:.12em}
.wb-frame[data-theme]:not([data-theme="t0"]) .mc-i{border-radius:50%}
.wb-swatches{display:flex;gap:6px;justify-content:center;margin-top:10px}
.wb-swatches i{width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:var(--shadow-1);transition:transform .3s var(--ease)}
.wb-swatches .sw1{background:#8C5546}.wb-swatches .sw2{background:#4C6547}.wb-swatches .sw3{background:#3E5A73}
.wb-frame[data-theme="t1"] .sw1,.wb-frame[data-theme="t2"] .sw2,.wb-frame[data-theme="t3"] .sw3{transform:scale(1.35)}
/* paint sweep on theme change */
.wb-frame{position:relative}
.wb-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);transform:translateX(-110%);pointer-events:none}
[dir="rtl"] .wb-frame::after{transform:translateX(110%)}
.wb-frame.sweep::after{animation:sweep .8s var(--ease)}
@keyframes sweep{to{transform:translateX(110%)}}
[dir="rtl"] .wb-frame.sweep::after{animation:sweepR .8s var(--ease)}
@keyframes sweepR{to{transform:translateX(-110%)}}

/* journey fieldsets */
.wb-fieldset{animation:rowIn .45s var(--ease)}

/* toast */
.wb-toast{
  position:sticky;bottom:10px;margin:0 auto 10px;width:max-content;
  font-size:11px;font-weight:800;background:var(--ink);color:#fff;
  border-radius:99px;padding:6px 16px;box-shadow:var(--shadow-2);
  opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease),transform .4s var(--ease);
  pointer-events:none;
}
.wb-toast.show{opacity:1;transform:none}

/* cta pulse */
.js-wb-cta.pulse{animation:ctap .9s var(--ease)}
@keyframes ctap{0%{box-shadow:0 0 0 0 rgba(33,30,25,.35)}100%{box-shadow:0 0 0 14px rgba(33,30,25,0)}}
.wb-frame[data-theme]:not([data-theme="t0"]) .m2 .mh-t{color:var(--brand);transition:color .6s var(--ease)}
.wb-frame .mock-nav{transition:box-shadow .6s}
.wb-frame[data-theme]:not([data-theme="t0"]) .mock-nav{box-shadow:inset 0 -2px 0 var(--brand-soft)}

/* ============================================================
   V5 — mobile: premium-app feel
   ============================================================ */
@media (max-width:720px){
  /* breathing room + rhythm */
  section{padding-block:clamp(52px,10vw,72px)}
  .hero{padding-top:96px}
  .hero h1{font-size:clamp(27px,7.4vw,34px)}
  .hero-ctas .btn{flex:1;justify-content:center}

  /* intent → swipeable cards */
  .intent-cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;
    padding-bottom:8px;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);
    scrollbar-width:none}
  .intent-cards::-webkit-scrollbar{display:none}
  .intent-card{flex:0 0 78%;scroll-snap-align:center;min-height:150px}
  .intent-card .go{opacity:1;transform:none}

  /* tabs → horizontal snap rows */
  .svc-tabs,.film-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scroll-snap-type:x proximity}
  .svc-tabs::-webkit-scrollbar,.film-tabs::-webkit-scrollbar{display:none}
  .svc-tab,.film-tab{flex:0 0 auto;scroll-snap-align:start}

  /* stage paddings tighter, demos taller touch targets */
  .svc-stage{padding:18px 16px;gap:18px}
  .svc-demo{min-height:440px}
  .crm-actions button{padding:8px 14px;font-size:12px}
  .i-chip{padding:10px 18px}
  .i-opt{padding:15px 16px}

  /* iOS: prevent focus zoom */
  .i-field input,.i-field textarea,.i-field select{font-size:16px}

  /* film full-bleed feel */
  .bz-feature{gap:26px}
  .film{border-radius:16px}
  .film-cap{max-width:78%;font-size:10.5px;line-height:1.4;white-space:normal}

  /* web builder viewport bar wraps nicely */
  .wb-vp{flex-wrap:wrap}
  .wb-vp input[type="range"]{order:9;flex-basis:100%}

  /* process visual under steps, compact */
  .proc-visual{aspect-ratio:10/8.6}

  /* sticky mobile CTA */
  .m-cta{
    position:fixed;inset-inline:14px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:90;
    display:flex;align-items:center;justify-content:center;gap:8px;
    background:var(--ink);color:#FBF9F5;font-weight:800;font-size:15.5px;
    padding:14px 20px;border-radius:99px;box-shadow:var(--shadow-3);
    transform:translateY(120%);transition:transform .45s var(--ease);
  }
  .m-cta.show{transform:none}
}
@media (min-width:721px){.m-cta{display:none}}

/* ============================================================
   V6 — hero interactivity + mobile perfection pass
   ============================================================ */
/* hero scenes are touchable */
.scene .row-card{cursor:pointer;-webkit-tap-highlight-color:transparent}
.scene .row-card:active{transform:scale(.985)}
.scene .checkbox{cursor:pointer}
.stage-dots button{padding:10px 2px;background-clip:content-box}
.scene .ai-action .aa-done{display:none;font-weight:800;color:#4C6547;padding-top:6px}
.scene .ai-action.approved .aa-btns{display:none}
.scene .ai-action.approved .aa-done{display:block}

@media (max-width:720px){
  /* hero CTAs: stacked, full-width, never wrapping */
  .hero-ctas{flex-direction:column;align-items:stretch;gap:10px}
  .hero-ctas .btn{width:100%;justify-content:center;white-space:nowrap;padding:15px 20px}
  .hero-note{justify-content:center;text-align:center;font-size:13px}

  /* floating CTA: smaller, less intrusive */
  .m-cta{padding:12px 18px;font-size:14.5px;inset-inline:18%;justify-content:center}

  /* footer tidy */
  .foot{gap:14px}
  .foot-links{gap:14px;margin-inline-start:0;font-size:14px}
  .foot-note{margin-top:14px}

  /* nav breathing room */
  .nav-inner{gap:14px}

  /* section titles: avoid awkward serif orphan breaks */
  .section-title{line-height:1.22}

  /* demo window inner text slightly larger for touch reading */
  .demo-topbar .dt-name{font-size:10px}
}

/* ============================================================
   V7 — mobile decluttering
   ============================================================ */
@media (max-width:720px){
  /* lighter header + hero */
  .brand-tag{display:none}
  .hero-note{display:none}
  .hero{padding-top:88px;padding-bottom:34px}
  .hero h1{margin-bottom:14px}
  .hero-sub{margin-bottom:22px}

  /* services pane: keep only problem → solution */
  .svc-caps{display:none}
  .svc-pane h3{font-size:19px;margin-bottom:6px}
  .ps-row{padding:9px 0}
  .ps-row p{font-size:14.5px}
  .demo-topbar .dt-name{display:none}
  .demo-hint{font-size:10.5px;padding:4px 10px}

  /* film: caption below the video instead of over it */
  .film-cap{position:static;max-width:100%;margin-top:10px;background:none;border:0;box-shadow:none;padding:0 4px;color:var(--ink-2);font-size:12px}
  .film{overflow:visible}
  .film .film-progress{border-radius:16px 16px 0 0;overflow:hidden}
  .film-frame{border-radius:16px;overflow:hidden}

  /* process: steps carry the story, visual off */
  .proc-visual{display:none}
  .process-rail{gap:0}
  .proc-step{opacity:.55}
  .proc-step.on{opacity:1}

  /* about: descriptions always visible (no hover on touch) */
  .stack-row .sd{opacity:1;transform:none;font-size:12px}
  .stack-row{gap:10px}
  .stack-row .st{font-size:14.5px}

  /* film tabs smaller */
  .film-tab{font-size:12.5px;padding:6px 14px}

  /* intent cards lighter */
  .intent-card{min-height:140px;padding:18px 16px 14px}
  .intent-card h3{font-size:16px}

  /* general: slightly more air between heading and content */
  .section-sub{margin-bottom:4px}
  .svc-tabs{margin-top:26px;margin-bottom:18px}
}
@media (max-width:720px){
  /* caption sits just below the film frame */
  .film-cap{position:absolute;top:100%;inset-inline:0;margin-top:8px;text-align:center}
  .film-tabs{margin-top:48px}
}

/* ============================================================
   V8 — faster hero + more life everywhere
   ============================================================ */
/* top scroll progress */
.scroll-progress{position:fixed;top:0;inset-inline-start:0;height:2.5px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--peach),var(--blush),var(--blue));border-radius:0 2px 2px 0;pointer-events:none}

/* stories-style fill in hero dots */
.stage-dots button{position:relative;overflow:hidden;background:var(--line)}
.stage-dots button i{position:absolute;inset:0;width:0;background:var(--ink);border-radius:inherit;display:block}
.stage-dots button.on{background:var(--line)}
.stage-dots button.on i{animation:dotfill var(--scene-ms,3200ms) linear forwards}
@keyframes dotfill{to{width:100%}}
.stage-dots.paused button.on i{animation-play-state:paused}

/* section titles reveal word by word */
.section-title .w{display:inline-block;opacity:0;transform:translateY(.5em);
  transition:opacity .55s var(--ease),transform .55s var(--ease);transition-delay:calc(var(--i)*70ms)}
.section-title.in .w,.in .section-title .w{opacity:1;transform:none}

/* why items: accent line slides in on hover */
.why-item{position:relative}
.why-item::before{content:"";position:absolute;inset-inline-start:0;top:-1px;height:2px;width:0;
  background:var(--peach);transition:width .5s var(--ease)}
.why-item:hover::before{width:64px}

/* intent cards: livelier hover */
.intent-card:hover{transform:translateY(-5px) rotate(-.35deg)}
[dir="ltr"] .intent-card:hover{transform:translateY(-5px) rotate(.35deg)}

/* film: gentle tilt on pointer */
.film{transition:transform .5s var(--ease);will-change:transform}

@media (prefers-reduced-motion:reduce){
  .stage-dots button.on i{animation:none;width:100%}
  .scroll-progress{display:none}
}

/* ============================================================
   V9 — corsivo brand + sharper header
   ============================================================ */
/* the name, in corsivo */
html[lang="en"] .brand-name,
html[lang="it"] .brand-name{
  font-family:'Cormorant Garamond',var(--font-serif);
  font-style:italic;font-weight:600;font-size:24px;letter-spacing:.01em;
}
html[lang="he"] .brand-name{
  display:inline-block;
  transform:skewX(-7deg);
  font-weight:500;letter-spacing:.02em;
}
/* underline that draws itself + a small spark on hover */
.brand{position:relative;padding-inline-end:16px}
.brand-name{
  width:max-content;
  background:linear-gradient(var(--peach),var(--peach)) no-repeat;
  background-size:0% 1.5px;
  background-position:0 96%;
  transition:background-size .45s var(--ease);
}
[dir="rtl"] .brand-name{background-position:100% 96%}
.brand:hover .brand-name{background-size:100% 1.5px}
.brand::after{
  content:"✦";position:absolute;top:-3px;inset-inline-end:0;
  font-size:10px;color:var(--peach);
  opacity:0;transform:rotate(-40deg) scale(.4);
  transition:opacity .35s var(--ease),transform .45s var(--ease);
}
.brand:hover::after{opacity:1;transform:rotate(0) scale(1)}
/* hero flourish follows the corsivo voice on Latin pages */
html[lang="en"] .hero h1 em,
html[lang="it"] .hero h1 em{
  font-family:'Cormorant Garamond',var(--font-serif);
  font-style:italic;font-weight:600;
}
/* the stage glows softly in the active service's accent */
.svc-stage{box-shadow:var(--shadow-2),0 0 90px -38px var(--accent);transition:box-shadow .8s var(--ease)}
/* chips wake up on hover */
.chip,.meta-chip{transition:transform .25s var(--ease)}
.chip:hover,.meta-chip:hover{transform:translateY(-1.5px)}

/* ============================================================
   V10 — "What I build" mobile declutter
   ============================================================ */
@media (max-width:720px){
  /* problem → solution: stacked, label above, no arrow row */
  .ps{margin-bottom:8px}
  .ps-arrow{display:none}
  .ps-row{flex-direction:column;gap:3px;padding:8px 0}
  .ps-row + .ps-row{border-top:0;padding-top:0}
  .ps-label{width:auto;font-size:10.5px}

  /* stage: tighter shell */
  .svc-stage{padding:16px 14px;gap:14px;min-height:0}
  .svc-demo{min-height:400px}

  /* AI demo: the conversation is the story — pipeline off, hint off */
  .pipe{display:none}
  .ai-mode .m-hint{display:none}

  /* web builder: parts scroll in one row, slider off, hint off */
  .wb-parts{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:10px}
  .wb-parts::-webkit-scrollbar{display:none}
  .wb-part{flex:0 0 auto}
  .js-wb-hint{display:none}
  .wb-vp input[type="range"]{display:none}

  /* product assembly: fewer floating pieces, calmer frame */
  .asm-piece[data-slot="pay"],
  .asm-piece[data-slot="logic"]{display:none}
  .asm-piece{font-size:11px;padding:6px 11px}
  .asm-status{font-size:10.5px}
  .asm-status .progress{width:64px}
  .asm-reset{font-size:10.5px;padding:3px 10px}

  /* crm demo: lighter rows */
  .crm-list .row-card .s{display:none}
  .crm-panel{padding:8px}
}

/* ============================================================
   V11 — mobile chips + calmer product demo
   ============================================================ */
@media (max-width:720px){
  /* BrainZone tags: one tidy scrollable line */
  .bz-tags{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px;
    margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);padding-bottom:4px}
  .bz-tags::-webkit-scrollbar{display:none}
  .bz-tags .chip{flex:0 0 auto;font-size:11.5px}

  /* product demo: skip the scattered pieces — show the assembled product */
  .asm-piece{display:none}
  .asm-reset{display:none}
  .asm-frame{inset-inline:5%;top:8%;bottom:14%;opacity:1;transform:none;border-style:solid;transition:none}
  .asm-ui{opacity:1;transition:none}
  .asm-ui > div[style*="grid"]{gap:10px}
  .svc-demo{min-height:340px}
  .asm-status{inset-inline-end:12px;inset-inline-start:auto}

  /* scattered tool chips in the CRM cover: pulled closer to center */
  .conv-item{transform:translate(calc(var(--sx) * .5),calc(var(--sy) * .55)) rotate(var(--sr,0)) scale(.92)}
  .conv-cover.pull .conv-item{transform:translate(0,0) scale(.4)}
  .conv-core p{font-size:12.5px;max-width:190px}

  /* intent/echo chip row breathing */
  .intent-echo{font-size:13px;padding:10px 14px}

  /* film tabs: slightly tighter so all three peek nicely */
  .film-tab{font-size:12px;padding:6px 12px;gap:5px}
}
/* fix: keep the tag scroller inside its grid column */
.bz-copy{min-width:0}
@media (max-width:720px){
  .bz-tags{margin-inline:0;padding-inline:0}
}

/* ============================================================
   V12 — Latin corsivo name on the Hebrew page + readable CTA
   ============================================================ */
html[lang="he"] .brand-name{
  font-family:'Cormorant Garamond',var(--font-serif);
  font-style:italic;font-weight:600;font-size:24px;
  letter-spacing:.01em;transform:none;direction:ltr;
}
/* the nav CTA was inheriting the grey link color — make it unmissable */
.nav-links a.nav-cta{color:#FFFDF8;background:var(--ink);border:1px solid var(--ink)}
.nav-links a.nav-cta:hover{color:#FFFFFF;transform:translateY(-1px)}
.nav-links a.nav-cta::after{display:none}
.mobile-menu a.btn-primary{color:#FFFDF8}
/* mobile: tab rows align to the same content line as the other chips */
@media (max-width:720px){
  .svc-tabs,.film-tabs{margin-inline:0;padding-inline:0}
}