:root {
    --bg: #fdfdfd;    
    --text: #0f0f10; 
    --dot-color: rgba(0, 0, 0, .23);
    --dot-radius: 1.2px;       
    --dot-gap: 28px;          
    --card-bg: rgba(255, 255, 255, 0.88);
    --card-border: rgba(0, 0, 0, 0.06);


    --shadow-s:
    inset 0 1px 2px #ffffff10,
    0 1px 2px #00000030,
    0 2px 4px #00000015;
    --shadow-m:
    inset 0 1px 2px #ffffff20,
    0 2px 4px #00000030,
    0 4px 8px #00000015;
    --shadow-l:
    inset 0 1px 2px #ffffff50,
    0 4px 8px #00000030,
    0 8px 8px #00000015;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
    margin: 0;
    color: var(--text);
    background-color: var(--bg);
    background-image: radial-gradient(circle, var(--dot-color) var(--dot-radius), transparent calc(var(--dot-radius) + 0.4px));
    background-size: var(--dot-gap) var(--dot-gap);
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.wrap {
    min-height: 100%;
    display: grid;
    place-items: center;
    padding: 6rem 1.25rem;
}

main {
    width: min(920px, 100%);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 4vw, 2.25rem);
    box-shadow: var(--shadow-l);
}

h1 {
    margin: 0 0 .25rem;
    font-size: clamp(2.2rem, 4.6vw, 3.25rem);
    letter-spacing: 0.02em;
}

.subtitle {
    margin: 0 0 1.25rem;
    font-size: clamp(1rem, 2.1vw, 1.15rem);
    color: #454545;
}

p { margin: 0 0 1rem; }

hr {
    border: 0;
    border-top: 1px solid rgba(0,0,0,0.08);
    margin: 1.25rem 0 1.5rem;
}

.cta {
    display: inline-block;
    margin-top: .5rem;
    padding: .75rem 1.1rem;
    border: 1px solid #111;
    border-radius: 999px;
    background: white;
    text-decoration: none;
    color: #111;
    font-weight: 600;
    transition: background 0.1s ease-in-out;
}
.cta:hover { background: #111; color: #fff;}

.fine { color: #555; font-size: .95rem; }

footer { margin-top: 1rem; font-size: .9rem; color: #555; }

@media (prefers-reduced-motion: no-preference) {
    main { transition: transform .18s ease; }
}