.hero{--teal:#14909d;--teal-d:#0e6f79;--pink:#e8265e;--ink:#0f2a31;--mute:#546b72;
  position:relative;overflow:hidden;color:var(--ink);background:linear-gradient(180deg,#f3fbfc,#fff 75%);padding:72px 24px 0}
.hero *{box-sizing:border-box}
.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.38;pointer-events:none}
.b1{width:520px;height:520px;background:#2cc3d2;left:-140px;top:-120px}
.b2{width:460px;height:460px;background:#ff5c8d;right:-100px;top:140px;opacity:.28}
.b3{width:380px;height:380px;background:#9be7ef;left:38%;bottom:-160px}
.hero__grid{position:relative;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center;min-height:620px}
.hero h2{font-size: clamp(30px, 4.4vw, 46px);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -.02em;}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em}
.hero h1 .w span{display:inline-block}
.hero__sub{font-size:18px;line-height:1.6;color:var(--mute);max-width:470px;margin:0 0 32px}
.hero__btns{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;padding:16px 30px;border-radius:99px;font:700 16px 'Bricolage Grotesque',sans-serif;text-decoration:none}
.btn.p{background:var(--ink);color:#fff;box-shadow:0 14px 30px rgba(15,42,49,.28)}
.btn.s{border:2px solid #bfe1e5;color:var(--teal-d);background:rgba(255,255,255,.7)}
.btn.s:hover{border-color:var(--teal)}

.scene{perspective:1500px;position:relative;padding:30px 20px}
.dev{position:relative;transform-style:preserve-3d;width:100%;max-width:580px;margin:0 auto}
.win{background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border:1px solid #d6edf0;border-radius:22px;padding:16px;
  box-shadow:0 50px 90px -20px rgba(20,144,157,.45),0 18px 30px rgba(15,42,49,.08)}
.bar{display:flex;align-items:center;gap:7px;margin-bottom:14px}
.bar i{width:10px;height:10px;border-radius:50%;background:#e4eef0}
.bar i:nth-child(1){background:#ff7aa0}.bar i:nth-child(2){background:#ffd36b}.bar i:nth-child(3){background:#6fe0c0}
.bar em{margin-left:10px;font:500 11px 'Bricolage Grotesque';color:var(--mute);background:#eef7f8;padding:5px 14px;border-radius:99px;font-style:normal}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.card{background:#fff;border:1px solid #e3f0f2;border-radius:14px;padding:14px}
.card small{font-size:11px;color:var(--mute);display:block;margin-bottom:6px}
.card strong{font-size:30px;font-weight:800;letter-spacing:-.03em}
.card svg{display:block;width:100%;height:56px;margin-top:6px}
.bars{display:flex;align-items:flex-end;gap:7px;height:96px}
.bars div{flex:1;height:100%;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--teal),#7fdbe5);transform-origin:bottom}
.bars div:nth-child(3n){background:linear-gradient(180deg,var(--pink),#ff9bb8)}
.rows{margin-top:12px;display:grid;gap:8px}
.rows div{height:10px;border-radius:6px;background:#e8f3f5;overflow:hidden}
.rows div i{display:block;height:100%;width:100%;transform-origin:left;background:linear-gradient(90deg,var(--teal),var(--pink));border-radius:6px}
.code{position:absolute;left:-7%;bottom:-9%;width:56%;background:#0f2a31;color:#bff3f8;border-radius:14px;padding:14px 16px;
  font:500 12px/1.7 ui-monospace,Menlo,Consolas,monospace;box-shadow:0 30px 50px rgba(15,42,49,.35);}
.code p{margin:0;white-space:pre;min-height:1.7em;color:#fff;}
.code p:nth-of-type(5){color:#ff8fb0}
.code .ch{display:flex;justify-content:space-between;align-items:center;font:600 11px 'Bricolage Grotesque',sans-serif;color:#7fc9d1;padding-bottom:9px;margin-bottom:8px;border-bottom:1px solid #214751}
.code .ch em{font-style:normal;color:#6fe0c0;background:rgba(111,224,192,.12);padding:3px 9px;border-radius:99px}
.code .st{display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px 10px;border-radius:9px;background:rgba(111,224,192,.12);color:#9ff0d6;font:600 11.5px 'Bricolage Grotesque',sans-serif}
.code .st i{width:8px;height:8px;border-radius:50%;background:#6fe0c0;box-shadow:0 0 10px #6fe0c0}
.chat{position:absolute;right:-6%;top:12%;width:44%;display:grid;gap:8px}
.bub{padding:10px 14px;border-radius:16px;font-size:12.5px;font-weight:500;box-shadow:0 18px 30px rgba(15,42,49,.16);width:fit-content;max-width:100%}
.bub.u{background:#fff;color:var(--ink);border-bottom-left-radius:4px}
.bub.a{background:linear-gradient(135deg,var(--teal),#2cc3d2);color:#fff;border-bottom-right-radius:4px;justify-self:end}
.dots span{display:inline-block;width:6px;height:6px;border-radius:50%;background:#fff;margin:0 2px}
.chip{position:absolute;padding:9px 16px;border-radius:99px;background:#fff;font-weight:700;font-size:13px;box-shadow:0 14px 28px rgba(15,42,49,.14);display:flex;align-items:center;gap:8px}
.chip::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c,#14909d)}

.marq{position:relative;margin-top:40px;border-top:1px solid #d9edf0;overflow:hidden;white-space:nowrap;padding:20px 0;background:rgba(255,255,255,.6)}
.marq__t{display:inline-flex;will-change:transform}
.marq span{font-size:22px;font-weight:700;color:#0f2a31;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:44px;margin-right:44px}
.marq span::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--pink)}
@media(max-width:960px){
  .hero{padding-top:48px}.hero__grid{grid-template-columns:1fr;gap:24px}
  .scene{padding:30px 24px 50px}.chat{right:-3%}.code{left:-3%}
}