*{box-sizing:border-box}
:root{
  --ink:#15172c;
  --muted:#646a7e;
  --paper:#ffffff;
  --soft:#f6f7fb;
  --purple:#6756d8;
  --line:#e2e4ec;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;
}
a{color:inherit}
.site-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px max(6vw,22px);
  border-bottom:1px solid var(--line);
  background:#fff;
}
.brand{font-weight:850;text-decoration:none;font-size:1.15rem}
nav{display:flex;gap:22px}
nav a{text-decoration:none;color:var(--muted);font-weight:600}
nav a:hover{color:var(--purple)}
.hero{
  max-width:1120px;
  min-height:520px;
  margin:0 auto;
  padding:70px 28px;
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:70px;
  align-items:center;
}
.studio,.section-label{
  margin:0 0 8px;
  color:var(--purple);
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:.75rem;
  font-weight:850;
}
h1{
  margin:.05em 0 .25em;
  font-size:clamp(3.8rem,9vw,7.4rem);
  line-height:.92;
  letter-spacing:-.06em;
}
.lead{
  max-width:680px;
  margin:0 0 28px;
  color:var(--muted);
  font-size:1.2rem;
}
.app-icon{
  width:min(340px,100%);
  justify-self:center;
  border-radius:23%;
  box-shadow:0 20px 48px rgba(28,28,60,.19);
}
.coming-soon{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 16px;
  color:#fff;
  background:#101010;
  border-radius:11px;
}
.coming-soon span:last-child{display:flex;flex-direction:column;line-height:1}
.coming-soon small{font-size:.56rem;letter-spacing:.08em}
.coming-soon strong{font-size:1.34rem;font-weight:600;letter-spacing:-.03em}
.apple-mark{
  width:26px;
  height:31px;
  position:relative;
}
.apple-mark:before{
  content:"";
  position:absolute;
  width:22px;height:26px;left:1px;bottom:0;
  background:white;
  border-radius:45% 45% 50% 50% / 48% 48% 55% 55%;
}
.apple-mark:after{
  content:"";
  position:absolute;
  width:9px;height:6px;left:15px;top:0;
  background:white;border-radius:9px 1px 9px 1px;transform:rotate(-28deg);
}
.features{
  padding:82px max(7vw,26px) 92px;
  text-align:center;
  background:var(--soft);
  border-top:1px solid var(--line);
}
.features h2{
  margin:.08em 0 .8em;
  font-size:clamp(2.35rem,5vw,4rem);
  letter-spacing:-.045em;
}
.feature-grid{
  max-width:1080px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.feature-grid article{
  padding:30px 25px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
}
.feature-icon{font-size:2.3rem}
.feature-grid h3{font-size:1.28rem;margin:.4em 0}
.feature-grid p{margin:0;color:var(--muted)}
.text-link{
  display:inline-block;
  margin-top:34px;
  color:var(--purple);
  font-weight:750;
  text-decoration:none;
}
.page{
  max-width:1120px;
  min-height:72vh;
  margin:0 auto;
  padding:75px 28px 95px;
}
.page h1{font-size:clamp(3.5rem,8vw,6.5rem)}
.page h2{margin-top:2em}
.page-intro,.page p{color:var(--muted)}
.screenshots-page .page-intro{font-size:1.15rem;margin-bottom:38px}
.gallery{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}
.gallery img{
  width:100%;
  display:block;
  border-radius:14px;
  border:1px solid var(--line);
  box-shadow:0 12px 30px rgba(26,28,55,.12);
}
.back-link{margin-top:38px}
.back-link a{color:var(--purple);font-weight:700;text-decoration:none}
footer{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:25px max(6vw,22px);
  color:var(--muted);
  background:#fff;
  border-top:1px solid var(--line);
  font-size:.9rem;
}
footer a{text-decoration:none}
@media(max-width:760px){
  .site-header{align-items:flex-start}
  nav{gap:11px;font-size:.82rem;flex-wrap:wrap;justify-content:flex-end}
  .hero{grid-template-columns:1fr;text-align:center;gap:42px;padding-top:55px}
  .hero-copy{display:flex;flex-direction:column;align-items:center}
  .app-icon{width:205px}
  .feature-grid,.gallery{grid-template-columns:1fr}
  footer{flex-direction:column;text-align:center}
}