:root{
  --bg:#000; --txt:#f5f5f7; --grey:#86868b; --light:#d2d2d7; --dim:#48484a;
  --line:rgba(255,255,255,.1); --fill:rgba(255,255,255,.03);
  --sf:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --smooth:cubic-bezier(.16,1.06,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--txt);font-family:var(--sf);line-height:1.4;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
::selection{background:#fff;color:#000}

/* ── brand link (top-left) ── */
.brand{position:fixed;top:26px;left:30px;font-size:16px;font-weight:600;color:var(--dim);
  z-index:10;transition:color .4s var(--ease)}
.brand:hover{color:#fff}
.brand-dim{letter-spacing:-.02em}

/* ── hero ── */
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6vh 6vw}
.logo-letters{font-size:clamp(72px,20vw,220px);font-weight:600;letter-spacing:-.05em;line-height:1;cursor:default;display:inline-flex}
.logo-letters span{display:inline-block;transition:transform 1.05s var(--smooth),color .7s var(--ease)}
.logo-letters span:nth-of-type(2){transition-delay:.05s}
.logo-letters span:nth-of-type(3){transition-delay:.1s}
.logo-letters span:nth-of-type(4){transition-delay:.15s}
.logo-letters:hover span{transform:translateY(-18px)}
.logo-letters .dot{color:var(--dim)}
.logo-letters:hover .dot{color:#fff;transform:translateY(-18px) scale(1.25)}

.lead{margin-top:28px;font-size:clamp(19px,2.6vw,28px);font-weight:400;color:var(--grey);line-height:1.45}
.lw{display:inline-block;opacity:0;transform:translateY(26px);animation:lwIn 1.05s var(--smooth) forwards}
@keyframes lwIn{to{opacity:1;transform:none}}

.cta-row{margin-top:48px;display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.btn{display:inline-block;padding:16px 42px;border-radius:980px;background:#fff;color:#000;font-size:18px;font-weight:500;
  transition:transform .45s var(--smooth),box-shadow .45s var(--ease)}
.btn:hover{transform:scale(1.05);box-shadow:0 20px 55px -12px rgba(255,255,255,.4)}
.btn:active{transform:scale(.98)}
.btn-ghost{display:inline-block;padding:16px 38px;border-radius:980px;border:1px solid var(--line);color:var(--light);
  font-size:18px;font-weight:500;transition:background .4s var(--ease),color .4s var(--ease),transform .45s var(--smooth)}
.btn-ghost:hover{background:var(--fill);color:#fff;transform:scale(1.03)}

/* ── showcase / browser frame ── */
.showcase{max-width:880px;margin:0 auto;padding:4vh 6vw 8vh}
.frame{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#0a0a0a;
  box-shadow:0 40px 120px -30px rgba(0,0,0,.9)}
.frame-bar{display:flex;align-items:center;gap:8px;padding:14px 18px;background:#141414;border-bottom:1px solid var(--line)}
.dot-r,.dot-y,.dot-g{width:12px;height:12px;border-radius:50%}
.dot-r{background:#ff5f57}.dot-y{background:#febc2e}.dot-g{background:#28c840}
.frame-url{margin-left:14px;font-size:13px;color:var(--dim);background:#000;padding:5px 14px;border-radius:7px;border:1px solid var(--line)}
.frame-body{padding:54px 6vw 64px;position:relative;min-height:340px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.ctx-menu{background:#1c1c1e;border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:7px;width:280px;
  box-shadow:0 24px 60px -10px rgba(0,0,0,.8)}
.ctx-item{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border-radius:6px;
  font-size:14px;color:var(--light);transition:background .3s,color .3s}
.ctx-item.muted{color:var(--grey)}
.ctx-item.active{background:#4285f4;color:#fff;font-weight:500}
.ctx-item.active .ctx-arrow{opacity:1}
.ctx-arrow{opacity:0;font-size:15px}
.ctx-sep{height:1px;background:var(--line);margin:5px 10px}
.frame-caption{margin-top:30px;font-size:clamp(15px,2vw,19px);color:var(--grey)}

/* ── how it works ── */
.how{max-width:980px;margin:0 auto;padding:6vh 6vw}
.kicker{font-size:clamp(28px,5vw,56px);font-weight:600;letter-spacing:-.02em;margin-bottom:8vh;text-align:center}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.steps li{text-align:left;padding-top:24px;border-top:1px solid var(--line)}
.num{font-size:14px;color:var(--dim);letter-spacing:.08em;font-weight:500}
.steps h3{font-size:clamp(22px,3vw,30px);font-weight:600;letter-spacing:-.01em;margin:14px 0 10px}
.steps p{font-size:clamp(15px,1.7vw,18px);color:var(--grey);line-height:1.5}

/* ── features (rows, m07 style) ── */
.work{max-width:980px;margin:0 auto;padding:4vh 6vw 8vh}
.row{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;
  padding:36px 18px;border-top:1px solid var(--line);
  transition:background .6s var(--ease),padding-left .6s var(--ease),transform .4s var(--ease)}
.row:last-child{border-bottom:1px solid var(--line)}
.row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:#fff;
  transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--ease)}
.row:active{transform:scale(.992)}
.row:hover{background:var(--fill);padding-left:34px}
.row:hover::before{transform:scaleY(1);transform-origin:top}
.cat{display:block;font-size:13px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;font-weight:500;
  transition:color .5s var(--ease)}
.row:hover .cat{color:var(--light)}
.row-main h3{font-size:clamp(26px,4vw,44px);font-weight:600;letter-spacing:-.02em;
  transition:color .5s var(--ease),transform .55s var(--ease)}
.row:hover .row-main h3{color:#fff;transform:translateX(4px)}
.row-main p{margin-top:7px;font-size:clamp(15px,1.8vw,19px);color:var(--grey);transition:color .5s var(--ease);max-width:560px}
.row:hover .row-main p{color:var(--light)}
.arrow{font-size:clamp(22px,3vw,34px);color:var(--grey);opacity:.3;
  transition:transform .6s var(--smooth),opacity .5s var(--ease),color .5s var(--ease)}
.row:hover .arrow{transform:translateX(14px) rotate(-12deg);opacity:1;color:#fff}

/* ── final cta ── */
.cta{text-align:center;padding:18vh 6vw}
.cta h2{font-size:clamp(34px,6vw,72px);font-weight:600;letter-spacing:-.03em;margin-bottom:42px;line-height:1.05}
.cta-note{margin-top:26px;font-size:15px;color:var(--grey)}
.cta-note a{color:var(--light);transition:color .3s}
.cta-note a:hover{color:#fff}

/* ── footer ── */
footer{border-top:1px solid var(--line);padding:30px 6vw;text-align:center}
.foot{font-size:13px;color:var(--dim)}
.foot a{color:var(--grey);transition:color .3s}
.foot a:hover{color:#fff}

/* ── reveal ── */
.r{opacity:0;transform:translateY(30px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.r.in{opacity:1;transform:none}

@media(max-width:760px){
  .steps{grid-template-columns:1fr;gap:24px}
  .brand{top:18px;left:18px}
  .row-main p{display:none}
  .row{padding:28px 16px}
  .row:hover{padding-left:26px}
  .frame-body{padding:40px 6vw 48px}
}