:root{--bg:#121212;--text:#f2f2f2;--muted:#8f8f8f;--dim:#5c5c5c;--accent:#5BE978;--line:#2a2a2a}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{min-height:100vh;background:var(--bg) url(img/topo.svg) center/cover fixed no-repeat;color:var(--text);font-family:"Space Grotesk",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:28px 48px 40px;min-height:100vh;display:flex;flex-direction:column}
header{display:flex;align-items:center;gap:14px}
header img{width:38px;height:38px;border-radius:9px}
.brand{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:700;font-size:14px;letter-spacing:.14em}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.12em;font-size:12px}
.hero{flex:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center;padding:48px 0}
h1{font-weight:700;text-transform:uppercase;font-size:clamp(44px,6.2vw,84px);line-height:.94;letter-spacing:-.01em}
h1 .g{color:var(--accent)}
.lead{margin-top:28px;max-width:470px;color:var(--muted);font-size:18px;line-height:1.55}
.get{margin-top:36px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.get img{height:48px;display:block}
.notes{margin-top:26px;display:grid;gap:9px}
.notes .on{color:var(--accent)}
.notes a,.notes span{color:var(--muted)}
.notes a:hover{color:var(--text)}
.shots{position:relative;aspect-ratio:1.28}
.phone{position:absolute;width:74%;aspect-ratio:2.174;border-radius:clamp(18px,2.4vw,30px);background:#050505;padding:clamp(6px,.8vw,10px);box-shadow:0 30px 70px rgba(0,0,0,.65),0 0 0 1px #2c2c2c}
.phone img{width:100%;height:100%;object-fit:cover;border-radius:clamp(13px,1.8vw,22px);display:block}
.phone:nth-child(1){top:0;right:0}
.phone:nth-child(2){top:33%;left:0;z-index:2}
.phone:nth-child(3){bottom:0;right:4%;z-index:3}
footer{display:flex;gap:28px;color:var(--dim)}
footer a:hover{color:var(--text)}
/* the text pages */
.page{max-width:720px;padding:56px 0 24px;flex:1}
.page h1{font-size:clamp(34px,5vw,52px)}
.page .date{margin-top:14px;color:var(--dim)}
.page h2{margin:36px 0 10px;font-size:18px;text-transform:uppercase;letter-spacing:.04em}
.page p,.page li{color:var(--muted);font-size:17px;line-height:1.6}
.page ul{padding-left:20px;display:grid;gap:8px;margin-top:6px}
.page b{color:var(--text);font-weight:500}
.page a{color:var(--accent)}
.page p+p{margin-top:12px}
@media (max-width:860px){
 .wrap{padding:20px 16px 28px}
 .hero{grid-template-columns:1fr;gap:36px;padding:28px 0 40px}
 .shots{order:-1;aspect-ratio:1.5}
 .phone{width:82%}
 .lead{font-size:16px}
}