/* nav */
nav{
  position:sticky;top:0;z-index:50;
  background:rgba(244,244,242,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:17px}
nav ul{display:flex;gap:30px;list-style:none;align-items:center}
nav ul a{color:var(--muted);font-size:14.5px;font-weight:500}
nav ul a:hover{color:var(--ink)}
.pill{
  border:1px solid var(--ink);border-radius:999px;padding:9px 22px;
  font-size:14px;font-weight:600;color:var(--ink);background:transparent;cursor:pointer;
  display:inline-block;
}
.pill:hover{background:var(--ink);color:#fff}
.back{color:var(--muted);font-size:14.5px;font-weight:500}
.back:hover{color:var(--ink)}
@media(max-width:680px){nav ul li.hideM{display:none}}

/* screens / phones */
.screen{
  border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  box-shadow:0 8px 32px rgba(0,0,0,.08);
}
.screen img{display:block;width:100%}
.screen.svg-wrap{background:var(--card);padding:28px}
.screen.svg-wrap svg{display:block;width:100%;height:auto}
.phone{
  border-radius:22px;overflow:hidden;background:#fff;
  box-shadow:0 16px 40px rgba(20,20,20,.12);border:1px solid var(--line);
}
.phone img{display:block;width:100%}
.cap{font-size:13px;color:var(--muted);margin-top:10px;text-align:center;line-height:1.4}

/* cover single */
.cover{border-radius:28px;overflow:hidden;margin:16px 0 0}
.cover img{display:block;width:100%}

/* cover phones strip */
.cover-grid{
  margin:16px 0 0;border-radius:28px;overflow:hidden;
  background:color-mix(in srgb, var(--accent) 35%, #1a1028);
  padding:40px 32px 0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;align-items:flex-end;
}
.cover-grid .ph{border-radius:18px 18px 0 0;overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,.4)}
.cover-grid .ph img{display:block;width:100%}
@media(max-width:720px){
  .cover-grid{grid-template-columns:1fr;padding:24px 20px 0}
  .cover-grid .ph:nth-child(2),.cover-grid .ph:nth-child(3){display:none}
}

/* footer / connect */
.connect{
  background:var(--dark);color:#fff;border-radius:32px 32px 0 0;
  padding:80px 0 44px;margin-top:88px;
}
.connect h2{
  color:#fff;font-weight:300;font-size:clamp(36px,6vw,72px);
  letter-spacing:-.03em;margin-bottom:0;line-height:1.02;
}
.connect.has-cta .connect-head{margin-bottom:0}
.connect.has-grid h2{margin-bottom:48px}
.connect-head{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px;
}
.hire{
  display:inline-flex;align-items:center;gap:12px;background:#fff;color:var(--ink);
  border-radius:999px;padding:16px 30px;font-weight:600;font-size:16px;
  transition:transform .15s ease;
}
.hire:hover{transform:scale(1.03)}
.contacts{
  display:flex;flex-wrap:wrap;gap:26px;margin-top:64px;color:#9B9B97;font-size:15px;
}
.contacts a{color:#fff;font-weight:500}
.contacts a:hover{text-decoration:underline}
.cgrid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  border:1px solid #2C2C2C;border-radius:18px;overflow:hidden;
}
@media(max-width:680px){.cgrid{grid-template-columns:1fr}}
.ci{
  display:flex;flex-direction:column;gap:10px;padding:26px 28px;
  background:#1A1A1A;text-decoration:none;transition:background .18s;
}
.ci:hover{background:#242424}
.ci-l{font-size:12px;color:#7A7A76;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.ci-v{font-size:17px;font-weight:500;color:#fff}
.ci-r .ci-v{color:var(--accent)}
.copy{margin-top:48px;padding-top:22px;border-top:1px solid #2C2C2C;color:#7A7A76;font-size:13.5px}