:root { --ink:#10213f; --muted:#5f6f89; --line:#e7ebf2; --paper:#fff; --page:#f7f8fb; }
* { box-sizing:border-box; }
html { background:var(--page); }
body { margin:0; color:var(--ink); background:linear-gradient(180deg,#fff 0%,#fafbfe 58%,#f6f8fc 100%); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color:inherit; }
.app-showcase { width:min(1440px,calc(100% - 48px)); margin:0 auto; padding:48px 0 30px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px; }
.app-card { min-width:0; overflow:hidden; padding:28px; border:1px solid var(--line); border-radius:30px; background:var(--paper); box-shadow:0 18px 45px rgba(18,33,63,.08); }
.promise-card { --accent:#7c3aed; --accent-soft:#f4efff; --accent-line:#ded0ff; background:linear-gradient(150deg,#fff 0%,#fff 57%,#faf8ff 100%); }
.vault-card { --accent:#1769e8; --accent-soft:#eaf3ff; --accent-line:#cce0ff; background:linear-gradient(150deg,#fff 0%,#fff 57%,#f7fbff 100%); }
.card-topline { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.accent-dot { width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 6px var(--accent-soft); }
.app-intro { padding:24px 0 18px; }
.brand-logo { display:block; object-fit:contain; object-position:left center; }
.promise-logo { width:174px; height:78px; }
.vault-logo { width:188px; height:78px; }
h1 { margin:20px 0 10px; font-size:clamp(2rem,3.3vw,3.15rem); letter-spacing:-.055em; line-height:.98; }
.app-intro p { max-width:590px; min-height:72px; margin:0; color:var(--muted); font-size:1rem; line-height:1.55; }
.promo-image { display:block; width:100%; aspect-ratio:2 / 1; object-fit:contain; border:1px solid var(--accent-line); border-radius:20px; background:var(--accent-soft); }
.card-actions { display:flex; flex-wrap:wrap; align-items:center; gap:18px; padding:23px 0 25px; }
.play-badge { display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:7px 16px 7px 12px; color:#fff; border-radius:11px; background:#111827; box-shadow:0 5px 12px rgba(15,23,42,.2); text-decoration:none; line-height:1; transition:transform .18s ease,background .18s ease; }
.play-badge:hover { transform:translateY(-2px); background:#020617; }
.play-badge small { display:block; margin-bottom:3px; font-size:.56rem; letter-spacing:.08em; }
.play-badge span:last-child { font-size:1.13rem; font-weight:600; }
.play-triangle { width:22px; height:25px; clip-path:polygon(0 0,100% 50%,0 100%); background:linear-gradient(150deg,#57d4ff 0 32%,#7be47e 33% 62%,#ffd15b 63%); }
.privacy-link { color:var(--accent); font-size:.94rem; font-weight:700; text-underline-offset:4px; }
.screens-section { padding-top:21px; border-top:1px solid var(--accent-line); }
h2 { margin:0 0 17px; font-size:.9rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.screenshots { display:grid; grid-template-columns:repeat(3,1fr); align-items:start; gap:14px; }
.screenshots img { width:100%; min-width:0; border:1px solid rgba(16,33,63,.1); border-radius:16px; box-shadow:0 10px 20px rgba(16,33,63,.12); }
footer { width:min(1440px,calc(100% - 48px)); margin:0 auto; padding:30px 0 42px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:24px; color:var(--muted); font-size:.88rem; }
footer p { margin:0; font-weight:700; color:var(--ink); }
footer nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:18px; }
footer a { text-underline-offset:4px; }
a:focus-visible { outline:3px solid var(--accent,#1769e8); outline-offset:4px; border-radius:4px; }
@media (max-width:900px) { .app-showcase { grid-template-columns:1fr; width:min(720px,calc(100% - 32px)); padding-top:24px; } footer { width:min(720px,calc(100% - 32px)); } }
@media (max-width:520px) { .app-showcase { width:calc(100% - 24px); gap:18px; padding:12px 0 24px; } .app-card { padding:21px 17px; border-radius:23px; } .app-intro { padding-top:20px; } .app-intro p { min-height:0; font-size:1rem; } .promise-logo,.vault-logo { width:154px; height:65px; } h1 { margin-top:16px; font-size:2.15rem; } .promo-image { border-radius:15px; } .card-actions { align-items:stretch; gap:16px; } .play-badge { justify-content:center; flex:1 1 185px; } .privacy-link { padding:8px 0; } .screenshots { gap:8px; } .screenshots img { border-radius:10px; } footer { width:calc(100% - 24px); padding:25px 0 32px; align-items:flex-start; flex-direction:column; gap:12px; } footer nav { justify-content:flex-start; flex-direction:column; gap:10px; } }