/* Published Weband homepage (deliberately light: the page is finally finished) */
#pub{position:fixed;inset:0;overflow:auto;background:var(--paper);color:var(--paper-ink);color-scheme:light;
  padding-block:calc(env(safe-area-inset-top,0px) + 16px) calc(env(safe-area-inset-bottom,0px) + 40px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.pub-bar{max-width:1120px;margin:0 auto 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--paper-dim);letter-spacing:.03em}
.pub-dot{width:8px;height:8px;border-radius:50%;background:#2fb36b;box-shadow:0 0 0 4px rgba(47,179,107,.15)}
.pub-bar span:nth-child(2){flex:1;min-width:0}
.pub-again{font:inherit;font-size:12px;color:var(--paper-ink);background:#fff;border:1px solid var(--paper-line);border-radius:6px;padding:8px 14px;cursor:pointer}
.browser{max-width:1120px;margin:0 auto;background:#fff;border:1px solid var(--paper-line);border-radius:14px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(20,20,20,.35)}
.chrome{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#eceef2;border-bottom:1px solid var(--paper-line);font-size:12px;color:var(--paper-dim)}
.dots{display:flex;gap:6px}.dots i{width:10px;height:10px;border-radius:50%;background:#d3d6dd}
.tab{display:flex;align-items:center;gap:7px;background:#fff;border-radius:7px 7px 0 0;padding:6px 12px;margin-bottom:-11px;color:var(--paper-ink);white-space:nowrap}
.tab svg{width:14px;height:14px}
.url{flex:1;min-width:0;background:#fff;border-radius:6px;padding:5px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.site{position:relative;overflow:hidden;background:#fff;color:var(--paper-ink);font-family:var(--sitebody);--gut:clamp(18px,4.5vw,48px)}
.site-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:16px var(--gut);border-bottom:1px solid var(--paper-line)}
.brand{font-family:var(--brandface);font-weight:700;font-size:23px;letter-spacing:-.045em;color:var(--brand);display:inline-flex;align-items:center}
.site-nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center;font-size:13.5px}
.site-nav > span{padding:8px 12px;border-radius:999px;color:var(--paper-dim)}
.site-nav > span.nav-cta{background:var(--paper-ink);color:#fff;font-weight:500;padding:8px 15px}

.hero{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(28px,4vw,56px);align-items:center;padding:clamp(36px,6.5vw,84px) var(--gut) clamp(30px,4vw,48px);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:44px 44px}
.hero-copy{display:grid;gap:22px;min-width:0}
.kicker{margin:0;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.kicker::before{content:"";width:22px;height:2px;background:var(--brand)}
.hero h1{margin:0;font-family:var(--brandface);font-weight:600;font-size:clamp(2.3rem,6vw,4.7rem);line-height:.98;letter-spacing:-.05em;text-wrap:balance}
.hero h1 .hl{display:inline-block;background:var(--brand);color:#fff;padding:0 .2em .08em;margin:0 .04em;border-radius:.16em;transform:rotate(-3deg);box-shadow:.06em .08em 0 var(--paper-ink)}
.hero h1 .nw{white-space:nowrap}
.hero h1 .ol{color:transparent;-webkit-text-stroke:1.6px var(--paper-ink)}
.lede{margin:0;font-size:16.5px;line-height:1.65;color:var(--paper-dim);max-width:46ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.site-btn{display:inline-flex;gap:12px;align-items:center;background:var(--brand);color:#fff;font-weight:600;font-size:15px;padding:8px 8px 8px 20px;border-radius:999px;box-shadow:0 14px 30px -14px rgba(103,14,161,.9)}
.site-btn .arr{width:32px;height:32px;border-radius:50%;background:#fff;color:var(--brand);display:grid;place-items:center;font-weight:700}
.ghost-btn{display:inline-flex;align-items:center;font-weight:500;font-size:15px;padding:12px 18px;border-radius:999px;border:1.5px solid var(--paper-ink)}

.collage{position:relative;min-height:450px}
.ui{position:absolute;background:#fff;border:1px solid var(--paper-line);border-radius:16px;box-shadow:0 26px 50px -26px rgba(20,20,20,.4),0 1px 0 rgba(20,20,20,.04)}
.ui-label{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.ui-product{left:0;top:2%;width:52%;padding:12px;transform:rotate(-4deg);display:grid;gap:10px;z-index:2}
.ui-product .img{aspect-ratio:5/4;border-radius:11px;background:#efe9f5;display:grid;place-items:center;overflow:hidden;
  background-image:linear-gradient(rgba(103,14,161,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(103,14,161,.07) 1px,transparent 1px);background-size:18px 18px}
.ui-product .img svg{width:58%;height:auto}
.ui-product .row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13.5px}
.ui-product .row b{font-weight:600}
.ui-product .price{font-family:var(--brandface);font-weight:600;color:var(--brand)}
.ui-product .add{background:var(--paper-ink);color:#fff;text-align:center;border-radius:10px;padding:9px;font-size:13px;font-weight:600}
.ui-chat{right:0;bottom:0;width:58%;padding:14px;z-index:1;background:var(--paper-ink);color:#fff;border-color:#141414;transform:rotate(3deg);display:grid;gap:9px}
.ui-chat .ui-label{color:#c9a6ea}
.bubble{font-size:12.5px;line-height:1.45;padding:9px 11px;border-radius:12px;max-width:92%}
.bubble.me{justify-self:end;background:var(--brand);border-bottom-right-radius:4px}
.bubble.ai{background:#26252b;color:#e7e3ee;border-bottom-left-radius:4px}
.bubble.ai b{color:#7ee2a8;font-weight:600}
.ui-order{right:0;top:4%;width:41%;padding:11px 13px;display:flex;gap:10px;align-items:center;transform:rotate(2deg);z-index:3}
.ui-order .ping{flex:none;width:10px;height:10px;border-radius:50%;background:#2fb36b;box-shadow:0 0 0 5px rgba(47,179,107,.18)}
.ui-order span{font-size:12.5px;line-height:1.35;color:var(--paper-dim)} .ui-order b{display:block;color:var(--paper-ink);font-size:13.5px}
.hand{position:absolute;left:26%;top:58%;width:40px;z-index:3;filter:drop-shadow(0 0 12px rgba(255,138,61,.75)) drop-shadow(0 8px 10px rgba(20,20,20,.35));animation:hover 3s ease-in-out infinite}
@keyframes hover{50%{transform:translate(4px,-6px)}}

.fold-line{position:relative;margin:0 var(--gut);border-top:1.5px dashed rgba(255,138,61,.8)}
.fold-line span{position:absolute;right:0;top:-10px;background:#fff;padding-left:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#d0661d}

.marquee{margin-top:34px;background:var(--paper-ink);color:#fff;overflow:hidden;padding:16px 0;transform:rotate(-1deg) scale(1.02)}
.marquee-track{display:inline-flex;white-space:nowrap;animation:marq 30s linear infinite;font-family:var(--brandface);font-weight:500;font-size:clamp(18px,2.6vw,26px);letter-spacing:-.025em}
.marquee-track span{display:inline-flex;align-items:center;gap:26px;padding-right:26px}
.marquee-track span::after{content:"";width:12px;height:12px;background:var(--brand);border-radius:3px;transform:rotate(45deg)}
@keyframes marq{to{transform:translateX(-50%)}}

.section-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.section-head h2{margin:0;font-family:var(--brandface);font-weight:600;font-size:clamp(1.6rem,3.6vw,2.6rem);letter-spacing:-.045em;line-height:1.02}
.section-head p{margin:0;max-width:34ch;font-size:14.5px;line-height:1.6;color:var(--paper-dim)}
.bento-wrap{padding:clamp(40px,6vw,72px) var(--gut) clamp(20px,3vw,32px)}
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.tile{position:relative;overflow:hidden;border-radius:20px;padding:clamp(18px,2.4vw,26px);display:grid;gap:12px;align-content:space-between;min-height:210px;min-width:0}
.tile h3{margin:0;font-family:var(--brandface);font-weight:600;font-size:clamp(1.25rem,2.2vw,1.7rem);letter-spacing:-.04em;line-height:1.05}
.tile p{margin:0;font-size:14px;line-height:1.6}
.tile .ui-label{opacity:.75}
.t-custom{grid-column:span 3;grid-row:span 2;background:var(--brand);color:#fff;min-height:440px;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:30px 30px}
.t-custom p{color:#ead9f7;max-width:36ch}
.code{font-family:var(--mono);font-size:12.5px;line-height:1.75;background:rgba(20,20,20,.35);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:14px 16px;color:#f1e6fa;overflow-x:auto}
.code .k{color:#ffb27a}.code .s{color:#9ff0c2}.code .c{color:#c3a5dd}
.t-platform{grid-column:span 3;background:#f3eff8}
.t-platform p{color:var(--paper-dim)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{font-size:13px;font-weight:500;padding:7px 13px;border-radius:999px;background:#fff;border:1px solid var(--paper-line)}
.chips span.on{background:var(--paper-ink);color:#fff;border-color:var(--paper-ink)}
.t-ai{grid-column:span 3;background:var(--paper-ink);color:#fff}
.t-ai p{color:#bdb8c8}
.t-ai .line{display:flex;gap:10px;align-items:center;font-family:var(--mono);font-size:12px;color:#d8d3e2}
.t-ai .line i{width:8px;height:8px;border-radius:50%;background:#7ee2a8;box-shadow:0 0 0 4px rgba(126,226,168,.15)}

.process{padding:clamp(28px,4vw,48px) var(--gut) clamp(10px,2vw,20px)}
.steps-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.steps-row .st{display:grid;gap:8px;align-content:start;border-top:2px solid var(--paper-ink);padding-top:14px}
.steps-row .st .n{font-family:var(--brandface);font-weight:600;font-size:13px;color:var(--brand)}
.steps-row .st b{font-family:var(--brandface);font-weight:600;font-size:17px;letter-spacing:-.03em}
.steps-row .st p{margin:0;font-size:13.5px;line-height:1.55;color:var(--paper-dim)}
.steps-row .st.hot{border-top-color:var(--brand)} .steps-row .st.hot b{color:var(--brand)}

.site-foot{padding:clamp(30px,4vw,44px) var(--gut) 0;display:grid;gap:4px}
.foot-row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--paper-dim)}
.mega{font-family:var(--brandface);font-weight:700;font-size:clamp(4.4rem,21vw,16rem);line-height:.78;letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1.5px rgba(103,14,161,.4);text-align:center;margin:18px 0 -.06em;white-space:nowrap;user-select:none}

@media (max-width:880px){
  .hero{grid-template-columns:1fr}
  .collage{min-height:430px;max-width:520px;width:100%;justify-self:center}
  .bento .tile{grid-column:span 6}
  .t-custom{min-height:0}
  .steps-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .collage{min-height:450px}
  .fold-line span{font-size:9px;letter-spacing:.1em;max-width:85%;text-align:right}
  .ui-product{width:58%}.ui-chat{width:72%}.ui-order{width:44%;top:2%}.hand{left:28%;top:52%}
  .steps-row{grid-template-columns:1fr}
  .site-nav > span:not(.nav-cta):not(.rescued){display:none}
}
@media (prefers-reduced-motion:reduce){.marquee-track,.hand{animation:none}}
.piece{animation:settle .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
.rescued{display:inline-flex;align-items:center;gap:4px;margin-left:10px;vertical-align:middle;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:#b4520f;background:rgba(255,138,61,.14);border:1px solid rgba(255,138,61,.4);border-radius:999px;padding:2px 8px;white-space:nowrap;animation:settle .6s both;animation-delay:var(--rd,1.7s)}
.rescue-cta{position:relative;overflow:hidden;margin:clamp(30px,4vw,48px) var(--gut) 0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;
  padding:clamp(22px,4.5vw,44px);border-radius:16px;background:#141414;color:#fff}
.rescue-cta::before{content:"";position:absolute;right:-12%;bottom:-70%;width:75%;aspect-ratio:1;background:radial-gradient(circle,rgba(103,14,161,.6),transparent 65%);pointer-events:none}
.rescue-cta::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px;pointer-events:none}
.cta-copy{position:relative;z-index:1;display:grid;gap:14px;max-width:40rem;min-width:0}
.cta-kicker{margin:0;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.rescue-cta h2{margin:0;font-family:var(--brandface);font-weight:500;font-size:clamp(1.7rem,4.4vw,2.8rem);line-height:1.06;letter-spacing:-.035em;text-wrap:balance}
.rescue-cta p.cta-text{margin:0;font-size:15px;line-height:1.7;color:#d3cfdc;max-width:52ch}
.cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.cta-btn{display:inline-flex;gap:10px;align-items:center;background:var(--brand);color:#fff;text-decoration:none;font-weight:600;font-size:15px;padding:15px 24px;border-radius:999px;box-shadow:0 10px 30px -10px rgba(103,14,161,.9);transition:transform .2s,background .2s}
.cta-btn:hover{transform:translateY(-2px);background:#7c1cc0}
.cta-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.cta-url{font-family:var(--mono);font-size:12px;color:#8f8a9c;user-select:all}
.cta-art{position:relative;z-index:1;width:132px;height:132px}
.cta-art svg{width:100%;height:100%;overflow:visible}
@media (max-width:680px){.rescue-cta{grid-template-columns:1fr}.cta-art{display:none}}
@media (prefers-reduced-motion:reduce){.piece{animation:none}}