@font-face{font-family:Fraunces;src:url(assets/fraunces.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:DM Sans;src:url(assets/dm-sans.woff2) format("woff2");font-weight:400 800;font-display:swap}
:root{--ink:#251b3c;--purple:#661eff;--soft:#f0e9ff;--muted:#544866;--line:#d9cdea}
*{box-sizing:border-box}body{margin:0;color:var(--ink);background:#fcfbff;font:16px/1.55 "DM Sans",system-ui,sans-serif}a{color:inherit}a:focus-visible{outline:3px solid var(--purple);outline-offset:5px}.wrap{width:min(1120px,calc(100% - 40px));margin-inline:auto}
header,footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0}nav{display:flex;gap:28px}nav a,.brand{text-decoration:none;font-weight:700}.brand{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}.brand img{border-radius:10px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:100px;padding:14px 22px;background:var(--purple);color:#fff;text-decoration:none;font-weight:750}.button:hover{background:#5121b6}.button.small{padding:9px 16px}
.hero{display:grid;grid-template-columns:1fr .95fr;align-items:center;gap:36px;padding:64px 0 72px}.kicker{color:#5121b6;font-size:.76rem;font-weight:800;letter-spacing:.16em}h1,h2,h3,p{margin:0}h1,h2{font-family:Fraunces,Georgia,serif;line-height:.98}h1{margin:18px 0 22px;font-size:clamp(4rem,9vw,8rem);letter-spacing:-.075em}h1 em{color:var(--purple);font-style:normal}.lede{font-size:clamp(1.15rem,2.5vw,1.6rem);max-width:24ch;color:var(--muted)}.actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:26px}.secondary{font-weight:750;text-underline-offset:4px}.note{margin-top:12px;color:var(--muted);font-size:.85rem}
.showcase{align-self:stretch;min-width:0;position:relative}.showcase img{position:absolute;inset:0 0 0 auto;width:100%;height:100%;object-fit:contain;object-position:right bottom}
.features{background:#f2ebff;padding:64px 0}.features h2,.install h2{font-size:clamp(2.15rem,5vw,4rem);margin:12px 0 24px;letter-spacing:-.04em}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.feature-grid article{padding:20px;background:white;border:1px solid var(--line);border-radius:18px}.number{color:var(--purple);font-size:.8rem;font-weight:800}.feature-grid h3{margin:8px 0}.feature-grid p,.install li span,footer p{color:var(--muted)}.install{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:64px 0}.install ol{margin:0;padding-left:25px}.install li{padding:8px 0}.install li::marker{color:var(--purple);font-weight:800}.install li span{display:block}footer{border-top:1px solid var(--line);font-size:.87rem}
@media(max-width:760px){nav{display:none}.hero,.install{grid-template-columns:1fr;gap:22px}.hero{padding:38px 0 48px}.showcase{height:clamp(320px,105vw,490px)}.showcase img{object-position:center bottom;transform:translateX(min(11.3%, 43px))}.feature-grid{grid-template-columns:repeat(2,1fr)}footer{flex-wrap:wrap}}
@media(max-width:360px){.wrap{width:calc(100% - 28px)}.feature-grid{grid-template-columns:1fr}}

.hero-banner{background:#661eff url(assets/hero-background.jpg) center/cover}
.hero{min-height:clamp(480px,55vw,620px);padding:0;overflow:hidden;color:#fff}.hero .intro{padding:clamp(24px,5vw,68px)}.hero .kicker,.hero .lede,.hero .note,.hero h1 em{color:#fff}.hero .button{background:#fff;color:#5121b6}.hero a:focus-visible{outline-color:#fff}
@media(max-width:760px){.hero{gap:0}.hero .intro{padding-bottom:12px}}

@media(max-width:760px){.hero-banner{background-image:linear-gradient(to bottom,#661effd9 0%,#661eff99 22%,#661eff33 41%,#661eff00 58%),url(assets/hero-background-mobile.jpg)}}

.social-link{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;color:var(--purple)}
.social-link:hover{background:var(--soft)}