@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600&display=swap');

:root{--ink:#f7f8ff;--muted:#a8adc2;--line:#282b3d;--panel:#121420;--violet:#743cff;--cyan:#17d9e8}
*{box-sizing:border-box}
html{background:#080910;color:var(--ink);font-family:Manrope,Arial,sans-serif}
body{margin:0;background:radial-gradient(circle at 75% 8%,#3f1d8c55 0,transparent 28%),#080910}
a{color:inherit;text-decoration:none}
.topbar{width:min(1440px,calc(100% - 48px));height:92px;margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.topbar img{display:block;width:190px;height:auto}
.store-link{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.store-link span,.demo-card__actions span{color:var(--cyan)}
main{width:min(1440px,calc(100% - 48px));margin:auto}
.hero{min-height:610px;display:grid;grid-template-columns:1fr 420px;align-items:end;padding:110px 0 82px;border-bottom:1px solid var(--line)}
.eyebrow{margin:0 0 25px;color:#949ab3;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
h1,h2,h3{font-family:"Space Grotesk",sans-serif;font-weight:500;letter-spacing:-.065em}
h1{margin:0;font-size:clamp(78px,10vw,154px);line-height:.76}
h1 span{background:linear-gradient(110deg,var(--violet),#3958ff 55%,var(--cyan));background-clip:text;color:transparent}
.intro{max-width:390px;margin:0 0 10px;color:var(--muted);font-size:17px;line-height:1.7}
.library{padding:110px 0 150px}
.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:42px}
.section-heading h2,.coming h2{margin:0;font-size:clamp(58px,7vw,104px);line-height:.88}
.section-heading>span{color:var(--muted);font-size:12px}
.demo-card{border:1px solid var(--line);background:var(--panel)}
.demo-card__visual{position:relative;display:block;min-height:620px;overflow:hidden;background:linear-gradient(135deg,#e7e4db,#bfc3c8)}
.demo-card__visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.demo-card__visual:hover img{transform:scale(1.035)}
.demo-card__visual>span{position:absolute;right:24px;top:24px;padding:10px 14px;border-radius:999px;background:#0b0d14;color:var(--cyan);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.demo-card__content{display:grid;grid-template-columns:1fr auto;gap:28px;padding:32px}
.demo-card__content p{margin:0 0 8px;color:var(--muted);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.demo-card__content h3{margin:0;font-size:34px}
.demo-card__actions{display:flex;align-items:center;gap:12px}
.demo-card__actions a{padding:14px 18px;border:1px solid #40445d;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.demo-card__actions a:first-child{border-color:var(--violet);background:var(--violet)}
.coming{display:grid;grid-template-columns:1fr 2fr;gap:50px;padding:110px 0;border-top:1px solid var(--line)}
.coming>div{display:grid;grid-template-columns:1fr 300px;gap:40px}
.coming p:last-child{margin:0;color:var(--muted);line-height:1.7}
footer{width:min(1440px,calc(100% - 48px));margin:auto;display:flex;justify-content:space-between;padding:35px 0;border-top:1px solid var(--line);color:#777d96;font-size:10px;text-transform:uppercase;letter-spacing:.08em}
@media(max-width:760px){
  .topbar,main,footer{width:calc(100% - 28px)}
  .topbar{height:72px}.topbar img{width:150px}.store-link{font-size:9px}
  .hero{min-height:560px;display:block;padding:100px 0 55px}.hero h1{font-size:24vw}.intro{margin-top:55px;font-size:14px}
  .library{padding:75px 0 95px}.section-heading{align-items:start}.section-heading>span{margin-top:8px}
  .demo-card__visual{min-height:390px}.demo-card__content{grid-template-columns:1fr;padding:20px}.demo-card__actions{display:grid}
  .demo-card__actions a{text-align:center}
  .coming{display:block;padding:80px 0}.coming>div{display:block}.coming h2{margin-bottom:35px}
  footer{display:block;line-height:2}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.demo-card__visual img{transition:none}}