@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ArchivoBlack-400.woff2?v=20260917b) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/SpaceGrotesk-400.woff2?v=20260917b) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/SpaceGrotesk-500.woff2?v=20260917b) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/SpaceGrotesk-700.woff2?v=20260917b) format('woff2')}
/* Mini website mockups ("screens"): the product is the picture. Each .screen draws a browser frame with a fake
   site inside: nav, hero photo (--img), headline bars, buttons. Colour of the fake site comes from --brand. */
.screen{--brand:#2457FF;--paper:#fff;--ink:#1a1a1a;position:relative;background:var(--paper);border-radius:10px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.12);aspect-ratio:16/11;color:var(--ink);font-family:system-ui,sans-serif}
.screen .chrome{height:7.5%;background:#ececec;display:flex;align-items:center;gap:4%;padding:0 3%}
.screen .chrome i{width:2.2%;aspect-ratio:1;border-radius:50%;background:#c9c9c9;display:block}
.screen .chrome i:nth-child(1){background:#f36b5b}.screen .chrome i:nth-child(2){background:#f5c451}.screen .chrome i:nth-child(3){background:#5dcb6a}
.screen .chrome u{flex:1;height:52%;background:#fff;border-radius:99px;margin-left:2%;text-decoration:none}
.screen .nav{display:flex;align-items:center;gap:3%;padding:3% 5% 0}
.screen .nav b{width:16%;height:.7em;background:var(--ink);border-radius:2px}.screen .nav s{width:7%;height:.5em;background:#bbb;border-radius:2px;text-decoration:none;margin-left:auto}.screen .nav s+s{margin-left:0}
.screen .hero{margin:4% 5% 0;border-radius:6px;height:34%;background:#ddd center/cover no-repeat;background-image:var(--img);position:relative}
.screen .hero::after{content:"";position:absolute;left:6%;bottom:12%;width:38%;height:14%;background:rgba(255,255,255,.92);border-radius:3px}
.screen .t{margin:5% 5% 0;height:1.1em;width:58%;background:var(--ink);border-radius:3px}
.screen .p{margin:2.5% 5% 0;height:.45em;width:70%;background:#c8c8c8;border-radius:2px}.screen .p+.p{width:52%}
.screen .btn{margin:4% 5% 0;width:24%;height:1.5em;background:var(--brand);border-radius:4px}
.screen .cards{display:flex;gap:3%;margin:4% 5% 0}.screen .cards i{flex:1;aspect-ratio:4/3;border-radius:5px;background:#e6e6e6 center/cover;background-image:var(--img2,none)}
.screen.tall{aspect-ratio:9/16}.screen.tall .chrome{height:4.5%}.screen.tall .hero{height:28%}
@media(prefers-reduced-motion:reduce){.screen,.screen *{animation:none!important;transition:none!important}}
:root{--cream:#FFF9ED;--blue:#3137FF;--ink:#141414;--yellow:#FFE44D;--max:1280px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--cream);color:var(--ink);font:500 17px/1.5 "Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:inherit}:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.5rem}
.disp{font-family:"Archivo Black",Impact,"Arial Black",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:-.02em;line-height:.9}
h1,h2,h3{margin:0}h2{font-size:clamp(2.6rem,7vw,5.6rem)}
p{margin:.6em 0}
header{border-bottom:3px solid var(--ink)}header .wrap{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem}
.logo{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;font-family:"Archivo Black",Impact,sans-serif;font-size:1.3rem;letter-spacing:-.02em}.logo .cap{background:var(--blue);color:#fff;font:700 .7rem "Space Grotesk",sans-serif;padding:.25em .6em;border-radius:999px;letter-spacing:.04em}
nav{display:flex;gap:1.4rem;align-items:center;font-weight:700;font-size:.95rem}nav a{text-decoration:none}nav a.b{background:var(--ink);color:#fff;padding:.6rem 1.1rem;border-radius:999px}
@media(max-width:700px){nav a:not(.b){display:none}}
.btn{display:inline-block;background:var(--blue);color:#fff;text-decoration:none;font-weight:700;padding:1.1rem 1.9rem;border-radius:999px;font-size:1.15rem;text-transform:uppercase;letter-spacing:.02em;transition:transform .15s,background .15s}.btn:hover{background:#1d22d6;transform:translateY(-1px)}
.btn.yellow{background:var(--yellow);color:var(--ink)}.btn.yellow:hover{background:#ffd90a}
.hero{padding:4rem 0 3rem;border-bottom:3px solid var(--ink)}
.hero h1{font-size:clamp(3.4rem,13.5vw,10rem)}.hero .price{font-size:clamp(2rem,6vw,4.2rem);margin:.5rem 0 1.4rem}
.hero .under{font-weight:700;margin-top:1rem}.hero .none{margin-top:3rem;font-size:clamp(1.2rem,2.8vw,1.8rem);font-weight:700;letter-spacing:-.01em}
.blue{background:var(--blue);color:#fff;padding:6rem 0;border-bottom:3px solid var(--ink)}.blue h2{color:var(--yellow)}
.blue ol{list-style:none;margin:3rem 0 0;padding:0;display:grid;gap:1.2rem;font-size:clamp(1.4rem,3.4vw,2.4rem);font-weight:700;letter-spacing:-.02em}.blue ol span{color:var(--yellow);margin-right:.6rem}
.blue .btn{margin-top:2.5rem}
section{padding:6rem 0}
.wall .grid{columns:2;column-gap:1.2rem;margin-top:2.5rem}@media(min-width:760px){.wall .grid{columns:3}}@media(min-width:1100px){.wall .grid{columns:4}}
.wall figure{break-inside:avoid;margin:0 0 1.2rem}.wall .screen{--paper:#fff;box-shadow:0 2px 0 var(--ink),0 0 0 2px var(--ink)}.wall figcaption{font-weight:700;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;margin-top:.5rem}
.nine h2{max-width:none}.nine p{font-size:1.3rem;max-width:44ch;margin-top:1.5rem}
.get ul{list-style:none;margin:2.5rem 0 0;padding:0;font-size:1.3rem;line-height:2;font-weight:700}.get li::before{content:"✓";display:inline-block;width:1.6em;color:var(--blue)}
.get .managed{margin-top:2.5rem;font-size:1.15rem}.get .managed a{font-weight:700}
.pricing{text-align:center;padding:8rem 0;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}.pricing h2{font-size:clamp(4.5rem,16vw,11rem)}.pricing .btn{margin-top:1.8rem}.pricing p{font-weight:700}
.closing{text-align:center;padding:8rem 0}.closing h2{font-size:clamp(2.2rem,6vw,4.6rem);max-width:18ch;margin:0 auto;opacity:0;transform:translateY(16px);transition:opacity .7s,transform .7s}.closing h2.in{opacity:1;transform:none}.closing h2+h2{margin-top:1.5rem;color:var(--blue);transition-delay:.35s}.closing .btn{margin-top:2.5rem}
footer{border-top:3px solid var(--ink);padding:3rem 0 6rem;font-size:.95rem}footer nav{margin-top:1rem;gap:1.2rem}
.sticky-cta{position:fixed;left:0;right:0;bottom:0;background:var(--cream);border-top:3px solid var(--ink);padding:.7rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;transform:translateY(110%);transition:transform .25s;z-index:30}
.sticky-cta.on{transform:none}.sticky-cta b{font-size:1rem}.sticky-cta .btn{padding:.7rem 1.2rem;font-size:.9rem}
@media(min-width:900px){.sticky-cta{display:none}}
.form{max-width:560px}.form label{display:block;font-weight:700;margin:1.1rem 0 .3rem}.form input,.form textarea{width:100%;font:inherit;padding:.8rem;border:2px solid var(--ink);border-radius:12px;background:#fff}.form textarea{min-height:110px}.form .btn{margin-top:1.4rem}
.prose{max-width:66ch}.prose h1{font-size:clamp(2.2rem,5vw,3.6rem);margin-bottom:1rem}.prose h2{font-size:1.5rem;margin-top:2rem;font-family:"Space Grotesk",sans-serif;font-weight:700;text-transform:none;letter-spacing:0}

footer .credits{font-size:.8rem;opacity:.7;margin-top:1.2rem;max-width:70ch}footer .credits a{color:inherit}