:root{--bg:#fbfbfd;--fg:#1d1d1f;--muted:#6e6e73;--card:#fff;--line:#d2d2d7;--accent:#0071e3;--radius:18px}
@media (prefers-color-scheme:dark){:root{--bg:#000;--fg:#f5f5f7;--muted:#a1a1a6;--card:#1c1c1e;--line:#38383a;--accent:#2997ff}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.55 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
.nav{position:sticky;top:0;z-index:10;backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);background:color-mix(in srgb,var(--bg) 80%,transparent);border-bottom:1px solid var(--line)}
.nav .in{max-width:980px;margin:auto;padding:12px 22px;display:flex;gap:22px;align-items:center;font-size:14px}
.nav .brand{font-weight:600;color:var(--fg);margin-right:auto}.nav a{color:var(--fg);opacity:.85}
main{max-width:980px;margin:auto;padding:0 22px}
.hero{text-align:center;padding:72px 0 40px}
.hero h1{font-size:clamp(40px,7vw,64px);line-height:1.05;letter-spacing:-.02em;margin:0 0 12px;font-weight:700}
.hero p{font-size:clamp(19px,2.6vw,24px);color:var(--muted);margin:0 auto;max-width:640px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:24px 0 64px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:block;color:inherit}
a.card:hover{text-decoration:none;transform:translateY(-2px);transition:transform .2s}
.card h2,.card h3{margin:.2em 0 .3em;letter-spacing:-.01em}.card p{color:var(--muted);margin:0}
.icon{width:56px;height:56px;border-radius:13px;display:grid;place-items:center;font-size:28px;color:#fff;background:linear-gradient(135deg,#34c759,#0a84ff)}
.icon.grey{background:linear-gradient(135deg,#8e8e93,#636366)}
.badge{display:inline-block;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--line);color:var(--fg);margin-top:12px}
.badge.live{background:#34c75922;color:#248a3d}
.btn{display:inline-block;margin-top:24px;padding:12px 24px;border-radius:999px;background:var(--fg);color:var(--bg);font-weight:600;font-size:15px;border:0;cursor:default}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin:24px 0}
.section{margin:56px 0}.section h2{font-size:clamp(28px,4vw,40px);letter-spacing:-.015em;margin:0 0 8px}
.lead{color:var(--muted);font-size:19px}
.prose{max-width:720px;margin:48px auto 72px}.prose h1{font-size:40px;letter-spacing:-.02em;margin-bottom:8px}
.prose h2{font-size:22px;margin-top:36px}.note{background:#ff9f0a22;border:1px solid #ff9f0a66;border-radius:12px;padding:12px 16px;font-size:15px}
details{border-bottom:1px solid var(--line);padding:14px 0}summary{cursor:pointer;font-weight:600}details p{color:var(--muted)}
footer{border-top:1px solid var(--line);color:var(--muted);font-size:13px}
footer .in{max-width:980px;margin:auto;padding:24px 22px;display:flex;flex-wrap:wrap;gap:16px}footer .in span{margin-right:auto}
footer a{color:var(--muted)}
.appicon{display:block;width:56px;height:56px;border-radius:22.5%;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.hero-icon{width:128px;height:128px;margin:0 auto 24px;box-shadow:0 10px 30px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.08)}
/* Feature-Kacheln */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin:24px 0 32px}
.tile{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;color:inherit;transition:transform .2s,box-shadow .2s}
a.tile:hover{text-decoration:none;transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.08)}
.tile .media{height:200px;overflow:hidden;background:linear-gradient(160deg,#e8f2ff,#eafaf0);display:flex;justify-content:center;align-items:flex-start;padding-top:22px}
.tile .media img{width:62%;height:auto;border-radius:16px 16px 0 0;box-shadow:0 6px 20px rgba(0,0,0,.14)}
.tile .media.wide{align-items:center;padding:16px}.tile .media.wide img{width:88%;border-radius:16px}
.tile .media.sym{align-items:center;padding:0;font-size:64px}
.tile .body{padding:20px 22px 22px}.tile h3{margin:0 0 4px;font-size:19px}.tile p{margin:0;color:var(--muted);font-size:15px}
.tile .more{display:inline-block;margin-top:10px;font-size:14px;color:var(--accent)}
.tile .badge{position:absolute;top:12px;right:12px;margin:0;background:#ff9f0a;color:#fff}
.bg-a{background:linear-gradient(160deg,#e8f2ff,#f3ecff)!important}.bg-b{background:linear-gradient(160deg,#eafaf0,#e8f2ff)!important}.bg-c{background:linear-gradient(160deg,#fff4e5,#ffecef)!important}.bg-d{background:linear-gradient(160deg,#1c1c1e,#3a3a3c)!important;color:#fff}
@media (prefers-color-scheme:dark){.tile .media,.bg-a,.bg-b,.bg-c{background:linear-gradient(160deg,#1a2433,#1c2a22)!important}}
.duo{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap;margin:8px auto 0;max-width:760px;padding:14px 22px;border-radius:999px;background:linear-gradient(90deg,#0a84ff,#5e5ce6);color:#fff;font-weight:600;font-size:16px;text-align:center}
.duo small{font-weight:400;opacity:.9}
.pro{border-radius:28px;padding:44px 36px;background:linear-gradient(135deg,#0b1f3a,#1d3f72 55%,#2a6f5a);color:#fff;display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:center}
.pro h2{color:#fff}.pro .lead{color:#d6e4f5}.pro ul{list-style:none;padding:0;margin:18px 0 0}.pro li{padding:7px 0 7px 30px;position:relative}.pro li:before{content:"✓";position:absolute;left:0;color:#5ee69a;font-weight:700}
.pro li span{display:block;color:#b9cbe2;font-size:14px}
.pro .pricebox{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:28px;text-align:center}
.pro-price{font-size:44px;font-weight:700;letter-spacing:-.02em;display:block}.pro .pricebox p{color:#d6e4f5;font-size:14px;margin:6px 0 0}
@media (max-width:760px){.pro{grid-template-columns:1fr;padding:32px 22px}.duo{border-radius:20px}}
.detail{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start;margin:48px 0 64px}
.detail h1{font-size:clamp(34px,5vw,48px);letter-spacing:-.02em;margin:0 0 10px}.detail .shot{width:100%;border-radius:28px;border:1px solid var(--line);box-shadow:0 12px 36px rgba(0,0,0,.12)}
.detail .shots{display:grid;gap:20px}.ex{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:14px 0;font-size:15px}.ex b{display:block;margin-bottom:4px}
.crumb{font-size:14px;margin-top:28px}
.teaser{border-radius:28px;background:linear-gradient(160deg,#1c1c1e,#3a3a3c);color:#fff;aspect-ratio:1;display:grid;place-items:center;text-align:center;font-size:15px;padding:24px}
.teaser .w{width:150px;height:184px;border-radius:44px;border:6px solid #636366;background:#000;display:grid;place-items:center;margin:0 auto 14px;font-size:44px;color:#8e8e93}
@media (max-width:820px){.detail{grid-template-columns:1fr}.detail .shots{max-width:340px;margin:auto}}
.plats{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;list-style:none;padding:0}
.plat{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;color:var(--accent)}
.plat svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.plat span{color:var(--muted)}.plat.soon{color:#8e8e93;opacity:.45;cursor:help}
.hero .plats{justify-content:center}
/* v3 Tiles */
.grid>.card{display:flex;flex-direction:column}
.tile-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:20px}
.tile-foot .badge{margin:0}
.tile-foot .plats{margin:0;gap:10px}
.plat2{display:inline-flex;color:var(--accent);line-height:0}.plat2 svg{height:22px;width:auto;fill:currentColor}
.plat2.soon{color:#8e8e93;opacity:.4;cursor:help}
.store-badge{display:block;margin-top:20px;padding:10px 0;line-height:0}
.store-badge img{height:40px;width:auto}
.store-badge.soon{opacity:.4}
.hero .store-badge{display:inline-block;margin:24px 12px 0}