:root { --bg: #f5faf7; --text: #10211e; --muted: #566a65; --accent: #007d70; --border: #d6e4dd; --card: #ffffff; }
body { background: radial-gradient(circle at 82% 4%, #dff36a 0, rgba(223,243,106,0) 22rem), var(--bg); }
.wrap { max-width: 1040px; }
header.site-header { padding: 22px 0; }
header.site-header .brand { font-size: 18px; letter-spacing: -.02em; }
header.site-header .brand img { width: 34px; height: 34px; border-radius: 9px; }
header.site-header nav { display: flex; align-items: center; }
header.site-header nav a { margin-left: 18px; font-weight: 600; }
.hero { text-align: left; max-width: 780px; padding: 74px 0 46px; }
.hero img.icon { width: 72px; height: 72px; border-radius: 18px; margin-bottom: 24px; }
.hero h1 { font-size: clamp(40px, 6vw, 64px); line-height: 1.04; max-width: 730px; }
.hero p.tagline { font-size: 19px; line-height: 1.55; max-width: 665px; margin: 0 0 24px; }
.hero .badge { background: #e7f5ef; border-color: #cae5da; }
.cta-row { justify-content: flex-start; }
.btn { border-radius: 12px; padding: 13px 20px; }
.btn-primary { background: #006b60; color: #fff; box-shadow: 0 10px 22px rgba(0,107,96,.2); }
.btn-secondary { background: rgba(255,255,255,.7); }
.screenshots { justify-content: flex-start; margin: 25px 0 68px; gap: 26px; }
.screenshots img { width: 245px; border-radius: 25px; }
.screenshots img:nth-child(2) { transform: translateY(28px); }
.features { gap: 18px; margin: 30px 0 68px; }
.feature-card { background: rgba(255,255,255,.82); border-radius: 18px; padding: 23px; transition: transform .18s ease, box-shadow .18s ease; }
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 15px 35px rgba(15,52,46,.1); }
.feature-card h3 { font-size: 16px; }
.feature-card .emoji { font-size: 27px; }
.callout { background: #10211e; color: #fff; border: 0; padding: 39px; box-shadow: 0 16px 40px rgba(15,52,46,.18); }
.callout p { color: #d4e5df; }
.callout .cta-row { justify-content: center; }
.callout .btn-primary { background: #dff36a; color: #10211e; box-shadow: none; }
.pricing { margin: 54px 0; gap: 18px; }
.price-card { background: rgba(255,255,255,.82); border-radius: 18px; }
.price-card.highlight { background: #e5f6f0; border-color: #008c7d; box-shadow: 0 14px 34px rgba(0,125,112,.12); }
.price-card .amount { font-size: 33px; }
footer.site-footer { margin-top: 56px; }
@media (max-width: 640px) { .hero { padding: 48px 0 30px; text-align: center; } .hero p.tagline { font-size: 17px; } .cta-row { justify-content: center; } .screenshots { justify-content: center; margin-bottom: 45px; } .screenshots img:nth-child(2) { transform: none; } header.site-header nav a:first-child { display: none; } }