:root {
    --brand: #665CD4;
    --bg-top: #EEF0FF;
    --bg-bottom: #F7F4FF;
    --text: #1A1B25;
    --muted: #6B6C7A;
    --card: #FFFFFF;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--text);
    background: linear-gradient(160deg, var(--bg-top), var(--bg-bottom));
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.hero {
    width: 100%;
    max-width: 560px;
    text-align: center;
}

.badge {
    width: 76px;
    height: 76px;
    margin: 0 auto 20px;
    border-radius: 22px;
    background: linear-gradient(145deg, #7A70E8, var(--brand));
    color: #fff;
    font-size: 40px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 30px rgba(102, 92, 212, 0.35);
}

h1 {
    font-size: 44px;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.tagline {
    font-size: 20px;
    font-weight: 600;
    color: var(--brand);
    margin-bottom: 6px;
}

.sub {
    font-size: 16px;
    color: var(--muted);
    margin-bottom: 36px;
}

.props {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

.prop {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--card);
    border-radius: 18px;
    padding: 16px 18px;
    box-shadow: 0 6px 18px rgba(26, 27, 37, 0.06);
}

.prop strong { display: block; font-size: 16px; }
.prop small { color: var(--muted); font-size: 14px; }

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.dot.green { background: #34C759; }
.dot.blue { background: #0A84FF; }
.dot.purple { background: var(--brand); }

footer {
    margin-top: 40px;
    color: var(--muted);
    font-size: 13px;
}