/* TextureView — meusch.systems. Minimal dark landing + support/privacy pages. */

:root {
    --bg-top: #0c1224;
    --bg-bottom: #05070f;
    --glow: rgba(58, 111, 218, 0.22);
    --text: #e8edf6;
    --muted: #99a2b5;
    --accent: #5a93f7;
    --accent-hi: #8fb6fb;
    --card: rgba(255, 255, 255, 0.04);
    --hairline: rgba(255, 255, 255, 0.09);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    font: 17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    color: var(--text);
    background:
        radial-gradient(60vw 50vh at 50% 22%, var(--glow), transparent 70%),
        linear-gradient(180deg, var(--bg-top), var(--bg-bottom) 70%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 72px 24px 56px;
    text-align: center;
}

/* App-icon squircle (clipped to the inline #squircle path; drop-shadow follows the shape). */
.icon {
    width: 200px;
    height: 200px;
    margin: 0 auto 28px;
    filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.55));
}
.icon-plate { display: block; width: 100%; height: 100%; clip-path: url(#squircle); }
.icon-plate img { width: 100%; height: 100%; display: block; }

.icon--sm { width: 56px; height: 56px; margin: 0 0 0; filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); }

h1 {
    margin: 0 0 6px;
    font-size: clamp(34px, 7vw, 52px);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.tagline {
    margin: 0 auto 28px;
    max-width: 30ch;
    color: var(--muted);
    font-size: clamp(17px, 2.6vw, 20px);
}

.lede { margin: 0 auto 36px; max-width: 56ch; color: var(--text); }

/* Mac App Store pill. */
.btn {
    display: inline-block;
    padding: 13px 26px;
    border-radius: 980px;
    background: linear-gradient(180deg, var(--accent), #3f78e6);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(58, 111, 218, 0.35);
    transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(58, 111, 218, 0.45); }

/* Feature list. */
.features {
    list-style: none;
    margin: 52px auto 0;
    padding: 0;
    max-width: 560px;
    display: grid;
    gap: 14px;
    text-align: left;
}
.features li {
    padding: 16px 18px;
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: 14px;
}
.features b { color: var(--accent-hi); font-weight: 600; }

/* Content pages (privacy / support). */
.page { max-width: 680px; margin: 0 auto; padding: 56px 24px 72px; text-align: left; }
.page header { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; }
.page header h1 { font-size: 28px; margin: 0; }
.page header .home { color: var(--text); text-decoration: none; display: flex; align-items: center; gap: 14px; }
.page h2 { font-size: 19px; margin: 28px 0 8px; }
.page a { color: var(--accent-hi); }

footer {
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid var(--hairline);
    color: var(--muted);
    font-size: 14px;
}
footer a { color: var(--muted); text-decoration: none; margin: 0 10px; }
footer a:hover { color: var(--text); }
footer .copy { margin-top: 10px; opacity: 0.7; }