@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@500;600;700&display=swap');
:root { color-scheme: light dark; --bg:#f4f0e8; --ink:#1b1b18; --muted:#69685f; --surface:rgba(255,255,255,.56); --line:rgba(27,27,24,.14); --accent:#265f4b; --accent-ink:#fffdf7; --shadow:0 28px 80px rgba(37,35,27,.1); }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--bg); }
body { min-height:100vh; margin:0; color:var(--ink); background:radial-gradient(circle at 15% 12%,rgba(226,180,116,.22),transparent 30rem),radial-gradient(circle at 85% 88%,rgba(38,95,75,.13),transparent 32rem),var(--bg); font-family:"DM Sans",system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
.shell { width:min(100% - 32px,760px); min-height:100vh; margin:0 auto; padding:clamp(24px,7vw,72px) 0 24px; display:grid; grid-template-rows:1fr auto; gap:28px; }
.card { align-self:center; padding:clamp(30px,7vw,72px); border:1px solid var(--line); border-radius:32px; background:var(--surface); box-shadow:var(--shadow); backdrop-filter:blur(18px); }
.monogram { width:52px; height:52px; display:grid; place-items:center; margin-bottom:44px; border:1px solid var(--line); border-radius:50%; font:600 15px/1 "Manrope",sans-serif; letter-spacing:.06em; }
.eyebrow { margin:0 0 14px; color:var(--accent); font-size:12px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; }
h1 { margin:0; font:700 clamp(50px,11vw,86px)/.98 "Manrope",sans-serif; letter-spacing:-.065em; }
.intro { max-width:510px; margin:25px 0 38px; color:var(--muted); font-size:clamp(18px,3vw,22px); line-height:1.55; }
.actions { display:flex; flex-wrap:wrap; gap:12px; }
.button { min-height:52px; padding:0 19px; display:inline-flex; align-items:center; justify-content:space-between; gap:26px; border:1px solid var(--line); border-radius:14px; color:var(--ink); background:transparent; font-weight:600; text-decoration:none; transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.button-primary { color:var(--accent-ink); background:var(--accent); border-color:var(--accent); }
.button:hover { transform:translateY(-2px); border-color:var(--ink); }
.button-primary:hover { border-color:var(--accent); background:#1f503f; }
.button:focus-visible { outline:3px solid color-mix(in srgb,var(--accent) 40%,transparent); outline-offset:3px; }
.details { margin-top:38px; display:flex; flex-wrap:wrap; gap:8px; color:var(--muted); font-size:14px; }
.details a { color:inherit; text-decoration:none; }
.details a:hover { color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
footer { padding:0 4px; display:flex; justify-content:space-between; color:var(--muted); font-size:12px; }
@media (max-width:560px) { .shell{width:min(100% - 20px,760px);padding-top:10px}.card{border-radius:24px}.monogram{margin-bottom:56px}.actions{flex-direction:column}.button{width:100%}.details{flex-direction:column;gap:6px}.details span{display:none} }
@media (prefers-color-scheme:dark) { :root{--bg:#141412;--ink:#f2efe7;--muted:#aaa79d;--surface:rgba(34,34,30,.65);--line:rgba(242,239,231,.15);--accent:#86c5a7;--accent-ink:#10251d;--shadow:0 28px 80px rgba(0,0,0,.25)} body{background:radial-gradient(circle at 15% 12%,rgba(160,105,54,.14),transparent 30rem),radial-gradient(circle at 85% 88%,rgba(80,149,116,.13),transparent 32rem),var(--bg)}.button-primary:hover{background:#9ad4b9} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{scroll-behavior:auto!important;transition:none!important} }