@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,500;1,500&display=swap');

:root {
  --bg: #08090b;
  --ink: #f2ede4;
  --muted: rgba(242, 237, 228, .67);
  --hair: rgba(242, 237, 228, .42);
  --violet: #7c55ec;
  --violet-2: #9b72ff;
  --warm: #f3d6b4;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
}

body {
  min-height: 100vh;
  font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

a { color: inherit; }

.page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(900px 700px at 64% 70%, rgba(113, 79, 184, .16), transparent 60%),
    radial-gradient(1200px 900px at 42% 15%, rgba(255,255,255,.035), transparent 68%),
    linear-gradient(180deg, #0c0d10 0%, #07080a 100%);
}

.page::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .17;
  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='.18'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.topbar {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 38px 58px 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  text-decoration: none;
}

.mark {
  position: relative;
  width: 48px;
  height: 52px;
  display: inline-block;
}

.mark-left,
.mark-right {
  position: absolute;
  top: 0;
  width: 20px;
  height: 52px;
  background: var(--ink);
}

.mark-left {
  left: 0;
  clip-path: polygon(0 0, 100% 14%, 100% 86%, 0 100%);
}

.mark-right {
  right: 0;
  clip-path: polygon(0 14%, 100% 0, 100% 100%, 0 86%);
}

.mark-cut {
  position: absolute;
  left: 18px;
  top: 14px;
  width: 12px;
  height: 12px;
  background: var(--bg);
  transform: rotate(45deg);
  z-index: 3;
}

.wordmark {
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: .14em;
}

.chapter {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 18px;
  color: rgba(242,237,228,.58);
  font-size: 12px;
  letter-spacing: .18em;
  white-space: nowrap;
}

.chapter-line {
  width: 44px;
  height: 1px;
  background: rgba(242,237,228,.55);
}

.hero {
  position: relative;
  z-index: 10;
  width: min(920px, 66vw);
  margin: 16.5vh 0 0 5vw;
  padding-bottom: 180px;
}

.kicker {
  margin-bottom: 28px;
  font-size: 11px;
  letter-spacing: .44em;
  color: rgba(242,237,228,.82);
}

h1,
h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  letter-spacing: -.035em;
}

h1 {
  margin: 0;
  font-size: clamp(74px, 7vw, 130px);
  line-height: .83;
}

h2 {
  margin: 20px 0 0;
  font-size: clamp(38px, 3.6vw, 68px);
  line-height: .95;
}

.intro {
  max-width: 720px;
  margin: 30px 0 0;
  font-size: clamp(18px, 1.5vw, 25px);
  line-height: 1.5;
  letter-spacing: .045em;
  color: rgba(242,237,228,.83);
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 36px;
  padding: 16px 24px 17px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(132,89,235,.96), rgba(112,72,215,.96));
  color: white;
  text-decoration: none;
  font-size: 16px;
  letter-spacing: .02em;
  box-shadow:
    0 14px 36px rgba(108, 71, 213, .22),
    inset 0 1px 0 rgba(255,255,255,.2);
  transition: transform .2s ease, filter .2s ease;
}

.cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

.cta-arrow {
  font-size: 19px;
  opacity: .9;
}

.email {
  display: block;
  width: max-content;
  margin-top: 16px;
  color: rgba(242,237,228,.5);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: .12em;
}

.email:hover { color: rgba(242,237,228,.9); }

.footer {
  position: absolute;
  z-index: 30;
  left: 58px;
  right: 58px;
  bottom: 30px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid rgba(242,237,228,.38);
}

.values {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 10px;
  letter-spacing: .42em;
  color: rgba(242,237,228,.72);
}

.values i {
  display: block;
  width: 1px;
  height: 26px;
  background: rgba(242,237,228,.36);
}

.signature {
  text-align: right;
  display: grid;
  gap: 6px;
  color: rgba(242,237,228,.72);
  font-size: 11px;
  letter-spacing: .06em;
}

.signature small {
  color: rgba(242,237,228,.36);
  font-size: 10px;
}

/* Portal / light composition */
.portal {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.portal-line {
  position: absolute;
  top: 0;
  right: 17.5vw;
  width: 52px;
  height: 74vh;
  background:
    linear-gradient(90deg,
      rgba(255,246,228,0) 0%,
      rgba(255,246,228,.54) 22%,
      rgba(255,248,234,.98) 48%,
      rgba(252,226,193,.76) 72%,
      rgba(255,246,228,0) 100%);
  box-shadow:
    0 0 42px rgba(255,233,205,.36),
    0 0 120px rgba(238,203,166,.20);
}

.portal-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 44px;
  width: 1px;
  height: 82vh;
  background: rgba(255,255,255,.72);
  box-shadow: 0 0 18px rgba(255,255,255,.5);
}

.portal-glow {
  position: absolute;
  right: 7vw;
  bottom: 18vh;
  width: 46vw;
  height: 28vh;
  background:
    radial-gradient(ellipse at 46% 63%,
      rgba(255,246,228,.96) 0%,
      rgba(242,204,175,.52) 15%,
      rgba(136,84,222,.27) 29%,
      rgba(95,54,178,.15) 43%,
      transparent 67%);
  filter: blur(8px);
  transform: rotate(-1deg);
}

.portal-floor {
  position: absolute;
  right: 4vw;
  bottom: 0;
  width: 57vw;
  height: 31vh;
  background:
    linear-gradient(180deg, transparent 0%, rgba(255,255,255,.025) 100%),
    radial-gradient(ellipse at 56% 0%,
      rgba(248,226,206,.29) 0%,
      rgba(140,91,220,.11) 18%,
      transparent 54%);
  transform-origin: 50% 0%;
  transform: perspective(800px) rotateX(65deg);
  filter: blur(1px);
}

.ambient,
.veil {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}

.ambient-a {
  width: 700px;
  height: 700px;
  left: 34vw;
  top: 6vh;
  background: radial-gradient(circle, rgba(252,229,201,.07), transparent 69%);
}

.ambient-b {
  width: 600px;
  height: 500px;
  right: 12vw;
  bottom: 10vh;
  background: radial-gradient(circle, rgba(120,73,206,.12), transparent 66%);
}

.veil-1 {
  left: 23vw;
  top: 16vh;
  width: 52vw;
  height: 46vh;
  background:
    linear-gradient(132deg,
      transparent 14%,
      rgba(238,220,206,.04) 31%,
      rgba(244,211,184,.10) 43%,
      rgba(255,244,224,.19) 55%,
      transparent 66%);
  transform: skewX(7deg) rotate(6deg);
  filter: blur(2px);
}

.veil-2 {
  left: 43vw;
  top: 28vh;
  width: 48vw;
  height: 33vh;
  background:
    linear-gradient(150deg,
      transparent 10%,
      rgba(205,178,177,.04) 31%,
      rgba(174,125,202,.14) 52%,
      rgba(248,223,197,.22) 66%,
      transparent 75%);
  transform: rotate(11deg);
  filter: blur(3px);
}

@media (max-width: 980px) {
  .topbar { padding: 28px 28px 0; }
  .chapter { display: none; }

  .hero {
    width: min(760px, calc(100vw - 56px));
    margin: 17vh 28px 0;
    padding-bottom: 190px;
  }

  .portal-line {
    right: 11vw;
    opacity: .65;
  }

  .portal-glow {
    right: -10vw;
    width: 80vw;
  }

  .footer {
    left: 28px;
    right: 28px;
  }

  .values { gap: 18px; }
}

@media (max-width: 700px) {
  .topbar { padding: 22px 20px 0; }

  .mark {
    width: 38px;
    height: 41px;
  }

  .mark-left, .mark-right {
    width: 16px;
    height: 41px;
  }

  .mark-cut {
    left: 14px;
    top: 11px;
    width: 10px;
    height: 10px;
  }

  .wordmark {
    font-size: 20px;
    letter-spacing: .12em;
  }

  .hero {
    width: auto;
    margin: 14vh 20px 0;
    padding-bottom: 205px;
  }

  .kicker {
    margin-bottom: 20px;
    font-size: 9px;
    letter-spacing: .34em;
  }

  h1 {
    font-size: clamp(54px, 15.4vw, 78px);
    line-height: .9;
  }

  h2 {
    margin-top: 16px;
    font-size: clamp(30px, 9.5vw, 48px);
    line-height: 1;
  }

  .intro {
    margin-top: 26px;
    max-width: 92%;
    font-size: 16px;
    line-height: 1.45;
    letter-spacing: .02em;
  }

  .cta {
    margin-top: 28px;
    padding: 14px 20px 15px;
    font-size: 14px;
  }

  .portal-line {
    top: 8vh;
    right: 4vw;
    width: 30px;
    height: 66vh;
    opacity: .48;
  }

  .portal-line::after {
    left: 25px;
    height: 72vh;
  }

  .portal-glow {
    right: -35vw;
    bottom: 17vh;
    width: 120vw;
    height: 26vh;
    opacity: .76;
  }

  .veil-1 {
    left: 15vw;
    top: 25vh;
    width: 96vw;
    opacity: .6;
  }

  .veil-2 {
    left: 26vw;
    top: 36vh;
    width: 96vw;
    opacity: .7;
  }

  .footer {
    left: 20px;
    right: 20px;
    bottom: 18px;
    padding-top: 18px;
    display: block;
  }

  .values {
    gap: 12px;
    flex-wrap: wrap;
    font-size: 8px;
    letter-spacing: .28em;
  }

  .values i {
    height: 18px;
  }

  .signature {
    margin-top: 16px;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}