@font-face{font-family:"Baloo 2";font-weight:500;font-display:swap;src:url(/fonts/baloo2-500.woff2) format("woff2")}
@font-face{font-family:"Baloo 2";font-weight:700;font-display:swap;src:url(/fonts/baloo2-700.woff2) format("woff2")}
@font-face{font-family:"Baloo 2";font-weight:800;font-display:swap;src:url(/fonts/baloo2-800.woff2) format("woff2")}

:root{
  color-scheme:light;
  --ink:#3D2C25;
  --soft:#7A6457;
  --coral:#FF6B4A;
  --coral-dark:#E2512F;
  --teal:#1FA290;
  --sky:#CDEFF4;
  --cream:#FFF6E5;
  --paper:#FFFFFF;
  --line:#F1D9BC;
  --grass:#A4DA7E;
  --font:"Baloo 2",ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:500 18px/1.55 var(--font);color:var(--ink);background:var(--cream)}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:#167f71}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:18px;padding-bottom:18px}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}
.brand img{width:52px;height:52px;border-radius:14px;box-shadow:0 3px 0 var(--line)}
.brand b{display:block;white-space:nowrap;font-weight:800;font-size:24px;line-height:1}
.brand small{display:block;font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--coral);margin-top:4px}
.top nav{display:flex;gap:18px;font-weight:700;font-size:16px}
.top nav a{color:var(--soft);text-decoration:none}
.top nav a:hover{color:var(--ink)}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:48px;padding:28px 0 56px}
.hero h1{font-weight:800;font-size:clamp(38px,5.4vw,62px);line-height:1.02;letter-spacing:-.01em;margin:0 0 16px}
.hero h1 em{font-style:normal;color:var(--coral)}
.hero p{font-size:20px;color:var(--soft);margin:0 0 26px;max-width:30em}
.soon{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;border-radius:999px;padding:12px 22px 10px;font-weight:700;font-size:17px}
.soon svg{width:20px;height:20px;flex:none}
.art{position:relative}
.art img{border-radius:32px;box-shadow:0 10px 0 var(--line),0 24px 48px rgba(61,44,37,.16);transform:rotate(2deg)}

/* big screenshot */
.screen{background:var(--sky);padding:56px 0 64px;border-radius:40px 40px 0 0}
.screen h2,.features h2,.know h2{font-weight:800;font-size:clamp(28px,3.6vw,40px);line-height:1.1;margin:0 0 8px;text-align:center}
.screen p.lead,.features p.lead{color:var(--soft);text-align:center;margin:0 auto 32px;max-width:34em}
.shot{border-radius:22px;overflow:hidden;border:6px solid #fff;box-shadow:0 8px 0 rgba(61,44,37,.08),0 20px 40px rgba(61,44,37,.14)}

/* features */
.features{background:var(--cream);padding:64px 0}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.card{background:var(--paper);border-radius:24px;overflow:hidden;box-shadow:0 5px 0 var(--line)}
.card img{aspect-ratio:2296/1400;object-fit:cover;width:100%}
.card div{padding:18px 22px 22px}
.card h3{font-weight:800;font-size:23px;line-height:1.15;margin:0 0 4px}
.card p{margin:0;color:var(--soft)}

/* good to know */
.know{padding:8px 0 72px}
.know .box{background:var(--paper);border-radius:28px;padding:34px 36px;box-shadow:0 5px 0 var(--line);max-width:760px;margin:0 auto}
.know h2{text-align:left;font-size:28px}
.know ul{margin:10px 0 0;padding:0;list-style:none}
.know li{position:relative;padding-left:30px;margin:10px 0}
.know li::before{content:"";position:absolute;left:0;top:.42em;width:16px;height:16px;border-radius:50%;background:var(--grass);box-shadow:inset 0 0 0 4px #fff,0 0 0 2px var(--grass)}

/* text pages */
.page{max-width:760px;margin:0 auto;padding:24px 20px 72px}
.page h1{font-weight:800;font-size:clamp(34px,5vw,46px);line-height:1.05;margin:8px 0 10px}
.page h2{font-weight:800;font-size:23px;line-height:1.2;margin:30px 0 4px}
.page p,.page li{margin:8px 0}
.page .muted{color:var(--soft);font-size:16px}
.page .box{background:var(--paper);border-radius:24px;padding:8px 26px 22px;box-shadow:0 5px 0 var(--line);margin:24px 0}
.mail{display:inline-flex;align-items:center;gap:10px;background:var(--coral);color:#fff;text-decoration:none;font-weight:800;font-size:19px;border-radius:999px;padding:12px 24px 10px;box-shadow:0 4px 0 var(--coral-dark);margin:6px 0 4px}
.mail:hover{color:#fff;background:#ff7a5c}

/* footer */
footer{border-top:2px dashed var(--line);padding:26px 0 40px;color:var(--soft);font-size:16px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
footer nav{display:flex;flex-wrap:wrap;gap:6px 18px}
footer a{color:var(--soft)}

@media (max-width:820px){
  .hero{grid-template-columns:1fr;gap:32px;padding-top:12px;text-align:center}
  .hero p{margin-left:auto;margin-right:auto}
  .art{max-width:min(440px,calc(100% - 20px));margin:0 auto}
  .grid{grid-template-columns:1fr}
  .screen{border-radius:28px 28px 0 0;padding:44px 0 48px}
  .shot{border-width:4px;border-radius:16px}
}
@media (max-width:520px){
  body{font-size:17px}
  .top nav{gap:14px;font-size:15px}
  .brand b{font-size:20px}
  .brand img{width:44px;height:44px}
  .know .box{padding:26px 22px}
}
@media (max-width:360px){
  .top nav{gap:10px;font-size:14px}
  .brand b{font-size:18px}
}