:root { --ink:#3B2F4A; --muted:#7A6F86; --accent:#FF6FA3; --panel:#FFF8EC; --edge:#EFE3D2; --green:#5CCB8A; }
* { box-sizing: border-box; }
body { margin:0; font-family: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, "Segoe UI", sans-serif; color:var(--ink);
       background: linear-gradient(180deg, #BFE8FF 0%, #E9E4FF 45%, #FFE3F1 100%) fixed; line-height:1.6; }
a { color:#E0588A; }
.wrap { max-width: 900px; margin: 0 auto; padding: 32px 20px 60px; }
.card { background: var(--panel); border: 2px solid var(--edge); border-radius: 28px; padding: 28px; box-shadow: 0 6px 0 var(--edge); }
.card + .card { margin-top: 22px; }
.brand { display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--ink); font-weight:800; }
.brand img { width:48px; height:48px; border-radius:12px; }
nav { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:22px; }
nav .links a { margin-left:16px; font-weight:700; text-decoration:none; color:var(--ink); }
.hero { text-align:center; padding: 20px 0 10px; }
.hero img.icon { width:132px; height:132px; border-radius:30px; box-shadow: 0 10px 30px rgba(59,47,74,.18); }
h1 { font-size: 40px; line-height:1.15; margin: 18px 0 6px; font-weight: 900; }
h2 { font-size: 22px; margin: 26px 0 8px; font-weight: 900; }
.tag { font-size: 20px; color: var(--muted); font-weight: 700; margin: 0 0 18px; }
.btn { display:inline-block; background: var(--green); color:#fff; font-weight:900; text-decoration:none; padding:14px 26px;
       border-radius:18px; box-shadow: 0 5px 0 #3fa56c; margin: 6px; }
.btn.alt { background:#fff; color:var(--ink); box-shadow: 0 5px 0 var(--edge); }
.shots { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:16px; margin: 26px 0 6px; }
.shots img { width:100%; border-radius:22px; box-shadow: 0 8px 24px rgba(59,47,74,.15); }
.features { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:14px; }
.feature { background:#fff; border:2px solid var(--edge); border-radius:20px; padding:16px 18px; }
.feature b { display:block; font-size:17px; margin-bottom:4px; }
.muted { color: var(--muted); font-size: 14px; }
details { background:#fff; border:2px solid var(--edge); border-radius:18px; padding:12px 16px; margin:10px 0; }
summary { font-weight:800; cursor:pointer; }
footer { text-align:center; color:var(--muted); font-size:14px; margin-top:30px; }
footer a { margin: 0 8px; }
@media (max-width: 560px) { h1 { font-size: 30px; } .card { padding: 20px; } nav .links a { margin-left:10px; } }