:root { --ink:#1c2522; --paper:#ebe7df; --panel:#dfdcd3; --olive:#b7c47a; --rust:#b56c58; --muted:#68716c; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--paper); color:var(--ink); font-family:Manrope,sans-serif; }
.register-page { min-height:100vh; display:grid; place-items:center; position:relative; overflow:hidden; background:var(--panel); }
.register-page:before,.register-page:after { content:""; position:absolute; border:1px solid rgba(28,37,34,.15); border-radius:50%; pointer-events:none; }
.register-page:before { width:66vw; height:66vw; right:-24vw; top:-25vw; }
.register-page:after { width:44vw; height:44vw; left:-20vw; bottom:-21vw; border-color:rgba(181,108,88,.28); }
.grain { position:absolute; inset:0; opacity:.12; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E"); }
.mark { position:absolute; top:34px; left:5vw; font:500 11px 'DM Mono'; letter-spacing:.14em; color:var(--muted); }
.register-content { width:min(520px,82vw); position:relative; z-index:1; text-align:center; }
.eyebrow { margin:0 0 28px; font:10px 'DM Mono'; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
h1 { margin:0 0 52px; font-size:clamp(82px,14vw,168px); line-height:.74; letter-spacing:-.1em; font-weight:600; text-align:left; }
h1 em { font-family:Georgia,serif; font-weight:400; letter-spacing:-.13em; margin-left:18px; }
.register-button { display:flex; align-items:center; justify-content:space-between; gap:18px; width:100%; padding:20px 22px; border:1px solid var(--ink); color:var(--ink); text-decoration:none; font:500 11px 'DM Mono'; letter-spacing:.06em; text-align:left; transition:color .35s, transform .35s, background .35s; position:relative; overflow:hidden; }
.register-button:before { content:""; position:absolute; inset:0; background:var(--olive); transform:translateX(-101%); transition:transform .4s cubic-bezier(.16,1,.3,1); z-index:-1; }
.register-button:hover { transform:translateY(-4px); color:var(--ink); box-shadow:8px 8px 0 rgba(28,37,34,.12); }.register-button:hover:before { transform:translateX(0); }.button-arrow { font-size:22px; transition:transform .35s; }.register-button:hover .button-arrow { transform:translate(4px,-4px); }
@media (max-width:600px) { .mark { top:24px; }.register-content { width:calc(100% - 44px); } h1 { text-align:center; } h1 em { margin-left:0; } .register-button { padding:18px; } }