:root {
  --bg: #050706;
  --panel: #0d0b0c;
  --panel-2: #151012;
  --line: rgba(113, 24, 28, .62);
  --red: #ff2638;
  --red-deep: #71181c;
  --red-soft: #b3343d;
  --text: #f4eeee;
  --muted: #a69a9c;
  --shadow: 0 24px 70px rgba(0,0,0,.42);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
body { overflow-x: hidden; }
.grain { position: fixed; inset: 0; pointer-events: none; opacity: .08; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E"); }
.shell { width: min(680px, calc(100% - 32px)); margin: 0 auto; padding: 52px 0 44px; position: relative; }
.topline { display:flex; align-items:center; justify-content:space-between; color: var(--muted); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; }
.profile { width: 78px; height: 78px; border-radius: 50%; padding: 2px; border: 1px solid var(--red); box-shadow: 0 0 28px rgba(255,38,56,.18); overflow: hidden; flex: 0 0 auto; }
.profile img { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; object-position: 62% 34%; }
.hero { padding: 64px 0 34px; }
h1 { font-size: clamp(2.4rem, 8vw, 5.1rem); line-height: .92; letter-spacing: -.075em; margin: 0 0 20px; max-width: 640px; }
.accent { color: var(--red); }
.lead { margin: 0; max-width: 570px; color: #d7cbcd; font-size: clamp(1rem, 2.4vw, 1.2rem); line-height: 1.55; }
.grid { display:grid; gap: 14px; margin-top: 32px; }
.card { display:block; color: inherit; text-decoration:none; padding: 22px; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(113,24,28,.18), rgba(13,11,12,.86)); box-shadow: var(--shadow); transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.card:hover, .link:hover { transform: translateY(-2px); border-color: var(--red); background: linear-gradient(135deg, rgba(113,24,28,.35), rgba(13,11,12,.94)); }
.eyebrow { color: var(--red); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; }
.card h2 { margin: 10px 0 8px; font-size: 1.55rem; letter-spacing: -.04em; }
.card p { margin: 0; color: var(--muted); line-height: 1.5; }
.links { display:grid; gap: 10px; margin-top: 26px; }
.link { display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 16px 18px; border:1px solid var(--line); background: var(--panel); color: var(--text); text-decoration:none; transition: .2s ease; }
.link span:last-child { color: var(--red); font-size: 1.1rem; }
.note { color: var(--muted); font-size: .88rem; line-height: 1.55; margin: 22px 0 0; }
footer { margin-top: 40px; color: #746a6b; font-size: .76rem; letter-spacing: .04em; display:flex; justify-content:space-between; gap: 12px; }
.back { color: var(--muted); text-decoration:none; border-bottom: 1px solid var(--red-deep); }
@media (max-width: 520px) { .shell { padding-top: 28px; } .hero { padding-top: 48px; } .card, .link { padding: 18px; } footer { flex-direction: column; } }