@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,500..700,50&family=Manrope:wght@400;500;700&display=swap');

:root {
  --plum: #2a1a5e;
  --plum-deep: #170f38;
  --lavender: #e4defb;
  --lavender-soft: #f3f1fb;
  --lilac: #b6a8f0;
  --orange: #ff6f61;
  --ink: #1d1638;
  --muted: #5a5278;
  --line: #d6cff0;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Manrope', system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--lavender-soft);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.65;
}

a { color: inherit; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* Header */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding: 28px clamp(20px, 5vw, 64px) clamp(48px, 9vh, 96px);
  overflow: hidden;
  color: var(--lavender);
  background:
    radial-gradient(circle at 82% 18%, rgba(182, 168, 240, .28), transparent 38%),
    radial-gradient(circle at 10% 110%, rgba(255, 111, 97, .16), transparent 40%),
    linear-gradient(160deg, var(--plum) 0%, var(--plum-deep) 100%);
}


.hero-body { position: relative; z-index: 1; margin: auto; max-width: 1200px; text-align: center; }
.function { margin: 0 0 18px; color: var(--lilac); font-size: clamp(13px, 1.4vw, 15px); font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; }
h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(54px, 10vw, 160px);
  font-weight: 600;
  line-height: .95;
  text-wrap: balance;
  letter-spacing: -.045em;
  color: #fff;
}
h1 .dot { color: var(--orange); }
.hero-line { max-width: 720px; margin: clamp(22px, 3vw, 36px) auto 0; font-family: var(--serif); font-size: clamp(20px, 2.2vw, 28px); font-weight: 500; line-height: 1.4; color: var(--lavender); }

/* Body */
.page { max-width: 820px; margin: 0 auto; padding: clamp(56px, 9vw, 112px) clamp(20px, 5vw, 40px) 40px; }
section + section { margin-top: 56px; }

.label { margin: 0 0 14px; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }

.focus ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.focus li { position: relative; padding: 16px 0 16px 28px; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: clamp(22px, 2.6vw, 28px); font-weight: 500; }
.focus li::before { content: ''; position: absolute; left: 0; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--orange); transform: translateY(-50%); }

.previously p { margin: 0; font-size: 19px; font-weight: 500; }
.previously span { margin: 0 8px; color: var(--lilac); }

.cta-title { margin: 0 0 22px; font-family: var(--serif); font-size: clamp(40px, 6vw, 64px); font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cta-card { display: flex; flex-direction: column; gap: 6px; padding: 26px; border-radius: 18px; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.cta-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(42, 26, 94, .22); }
.cta-linkedin { color: var(--plum-deep); background: var(--orange); }
.cta-moonlight { color: var(--lavender); background: var(--plum); }
.cta-kicker { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; opacity: .8; }
.cta-name { font-family: var(--serif); font-size: 28px; font-weight: 600; line-height: 1.15; }
.cta-desc { font-size: 16px; line-height: 1.5; opacity: .9; }

.aside { padding-top: 32px; border-top: 1px solid var(--line); }
.aside p { margin: 0 0 12px; color: var(--muted); font-size: 16px; }

footer { max-width: 820px; margin: 0 auto; padding: 24px clamp(20px, 5vw, 40px) 48px; color: var(--muted); font-size: 14px; }
footer p { margin: 0; }

@media (max-width: 640px) {
  body { font-size: 17px; }
  .hero { min-height: 88svh; }
  .function { font-size: 11px; letter-spacing: 1.4px; }
      .cta-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .cta-card { transition: none; }
}