/* © 2026 Dennis Andres */
:root {
  color-scheme: dark;
  --pink: #ff3b8d;
  --orange: #ff8248;
  --cyan: #35c9ee;
  --blue: #3f7df4;
  --lime: #6de5aa;
  --plum: #32133d;
  --plum-deep: #16091d;
  --ink: #180c20;
  --gradient: linear-gradient(120deg, var(--pink), var(--orange));
  --gradient-cool: linear-gradient(120deg, var(--cyan), var(--blue));
  --caminos-sky: radial-gradient(circle at 90% 12%, rgba(190, 234, 255, .98) 0%, rgba(155, 219, 255, .76) 23%, transparent 47%), linear-gradient(110deg, #ff4980 0%, #ff5b6e 52%, #ff6e5b 100%);
  --cc-plum: var(--plum);
  --cc-plum-deep: var(--plum-deep);
  --cc-night: #0c0611;
  --cc-ink: var(--ink);
  --cc-on-sky: #2a1233;
  --cc-on-sky-soft: #3d1735;
  --cc-snow: #fff7fc;
  --cc-snow-soft: #d6c7dc;
  --cc-snow-mute: #a996b0;
  --cc-pink-soft: #ff8cc0;
  --cc-card: linear-gradient(#1f0d28, #1b0a24);
  --cc-card-solid: #1f0d28;
  --cc-ring: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .1));
  --cc-line: rgba(255, 255, 255, .1);
  --cc-line-strong: rgba(255, 255, 255, .2);
  --cc-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 28px 64px -30px rgba(18, 6, 25, .8);
  --cc-shadow-lift: 0 44px 90px -34px rgba(18, 6, 25, .92), 0 0 0 1px rgba(255, 59, 141, .2);
  --cc-r-xl: 32px;
  --cc-r-lg: 24px;
  --cc-r: 18px;
  --cc-r-sm: 12px;
  --cc-max: 1320px;
  --cc-gutter: clamp(20px, 4.4vw, 64px);
  --cc-section: clamp(64px, 8.5vw, 128px);
  --cc-gap: clamp(16px, 2vw, 24px);
  --cc-fs-display: clamp(3rem, 1.3rem + 6vw, 6.75rem);
  --cc-fs-h1: clamp(2.5rem, 1.55rem + 3.9vw, 5.25rem);
  --cc-fs-h2: clamp(2rem, 1.35rem + 2.6vw, 3.75rem);
  --cc-fs-h3: clamp(1.3rem, 1.12rem + .7vw, 1.75rem);
  --cc-fs-lead: clamp(1.06rem, .98rem + .34vw, 1.3rem);
  --cc-fs-body: 1.0625rem;
  --cc-fs-small: .875rem;
  --cc-ease: cubic-bezier(.22, 1, .36, 1);
  --cc-dur-fast: 160ms;
  --cc-dur: 240ms;
  --cc-dur-slow: 640ms;
  --cc-header: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--cc-night); scroll-padding-top: calc(var(--cc-header) + 24px); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-width: 320px; min-height: 100svh; display: flex; flex-direction: column; overflow-x: clip; color: var(--cc-on-sky); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: var(--cc-fs-body); line-height: 1.65; background: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body::before { content: ""; position: fixed; z-index: -1; inset: 0; background: var(--caminos-sky); pointer-events: none; }
body.menu-open { overflow: hidden; }
main { flex: 1 0 auto; }
::selection { color: var(--cc-snow); background: var(--pink); }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 900; letter-spacing: -.045em; line-height: .96; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; z-index: 10001; top: 12px; left: 12px; padding: 12px 18px; border-radius: var(--cc-r-sm); color: var(--cc-snow); background: var(--cc-plum); font-size: 14px; font-weight: 800; transform: translateY(-200%); transition: transform var(--cc-dur) var(--cc-ease); }
.skip-link:focus { transform: none; }

.wrap { width: min(var(--cc-max), 100% - 2 * var(--cc-gutter)); margin-inline: auto; }
.wrap-wide { width: min(1480px, 100% - 2 * var(--cc-gutter)); margin-inline: auto; }
.band { padding-block: var(--cc-section); }
.band-tight { padding-block: calc(var(--cc-section) * .6); }
.on-night { color: var(--cc-snow); }

.kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--cc-on-sky); font-size: .8125rem; font-weight: 800; letter-spacing: .04em; line-height: 1.2; }
.kicker::before { content: ""; flex: none; width: 26px; height: 3px; border-radius: 3px; background: currentColor; }
.on-night .kicker, .kicker.is-light { color: var(--cc-snow); }
.on-night .kicker::before, .kicker.is-light::before { background: var(--gradient-cool); }

.title-display { font-size: var(--cc-fs-display); letter-spacing: -.06em; line-height: .88; }
.title-1 { font-size: var(--cc-fs-h1); letter-spacing: -.055em; line-height: .92; }
.title-2 { font-size: var(--cc-fs-h2); letter-spacing: -.05em; line-height: .95; }
.title-3 { font-size: var(--cc-fs-h3); letter-spacing: -.03em; line-height: 1.08; }
.lead { max-width: 62ch; font-size: var(--cc-fs-lead); line-height: 1.6; }
.on-sky-soft { color: var(--cc-on-sky-soft); }
.text-gradient { color: transparent; background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.btn { position: relative; isolation: isolate; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 24px; border: 1px solid transparent; border-radius: 14px; font-size: 15px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; text-align: center; white-space: nowrap; transition: transform var(--cc-dur) var(--cc-ease), opacity var(--cc-dur) ease; }
.btn::after { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; box-shadow: 0 18px 38px -16px rgba(255, 59, 141, .75); opacity: 0; transition: opacity var(--cc-dur) ease; pointer-events: none; }
.btn:hover { transform: translateY(-2px); }
.btn:hover::after { opacity: 1; }
.btn:active { transform: translateY(0) scale(.98); }
.btn-light, .btn-primary { color: var(--cc-ink); background: var(--gradient); }
.btn-dark { color: var(--cc-snow); background: var(--cc-plum); border-color: rgba(255, 255, 255, .12); }
.btn-dark::after { box-shadow: 0 18px 38px -16px rgba(22, 9, 29, .9); }
.btn-glass { color: var(--cc-snow); background: rgba(22, 9, 29, .55); border-color: rgba(255, 255, 255, .26); }
.btn-glass::after { box-shadow: 0 18px 38px -16px rgba(53, 201, 238, .6); }
.btn-discord { color: var(--cc-snow); background: #5865f2; }
.btn-discord::after { box-shadow: 0 18px 38px -16px rgba(88, 101, 242, .9); }
.btn svg { flex: none; width: 20px; height: 20px; }
.btn-small { min-height: 44px; padding: 0 18px; font-size: 14px; border-radius: 12px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }


@media (max-width: 640px) {
  .actions { display: grid; grid-template-columns: 1fr; }
  .btn { max-width: 100%; white-space: normal; }
  .actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .btn::after, .skip-link { transition: none; }
  .btn:hover, .btn:active { transform: none; }
}