:root {
  --ink: #080b16;
  --ink-soft: #11172a;
  --paper: #f2f2ed;
  --paper-warm: #e7e7df;
  --blue: #63c9ff;
  --blue-bright: #9ae0ff;
  --pink: #fa3c8b;
  --violet: #9e70ff;
  --sun: #ffcf59;
  --line: rgba(242, 242, 237, .2);
  --muted: #a1a8bd;
  --sans: 'Manrope', sans-serif;
  --display: 'Space Grotesk', sans-serif;
  --mono: 'DM Mono', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--sans); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.noise { position: fixed; inset: 0; pointer-events: none; opacity: .045; z-index: 20; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' 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='.55'/%3E%3C/svg%3E"); }
.section-shell { width: min(1180px, calc(100% - 96px)); margin: 0 auto; }
.site-header { position: absolute; z-index: 5; top: 0; left: 50%; transform: translateX(-50%); width: min(1180px, calc(100% - 96px)); padding: 30px 0; display: flex; align-items: center; justify-content: space-between; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font: 700 15px var(--display); letter-spacing: .15em; }
.wordmark em { color: var(--pink); font-style: normal; }
.wordmark-mark { display: inline-flex; align-items: end; gap: 2px; height: 21px; }
.wordmark-mark i { display: block; width: 3px; background: var(--blue); border-radius: 99px; transform: skew(-20deg); }
.wordmark-mark i:nth-child(1) { height: 11px; }.wordmark-mark i:nth-child(2) { height: 17px; background: var(--pink); }.wordmark-mark i:nth-child(3) { height: 21px; background: var(--violet); }
.nav-links { display: flex; gap: 34px; margin-left: auto; margin-right: 45px; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.nav-links a, .footer-link { transition: color .25s ease; }.nav-links a:hover, .footer-link:hover { color: var(--blue); }
.nav-cta { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink); background: var(--paper); padding: 14px 17px; transition: transform .25s ease, background .25s ease; }.nav-cta span { color: var(--pink); margin-left: 7px; }.nav-cta:hover { transform: translateY(-2px); background: var(--blue-bright); }
.hero { min-height: 780px; display: grid; grid-template-columns: 51% 49%; align-items: center; position: relative; padding-top: 65px; }
.hero::before { content: ''; position: absolute; z-index: -1; width: 520px; height: 520px; right: 80px; top: 60px; border-radius: 50%; background: radial-gradient(circle, rgba(27, 95, 170, .34), rgba(7, 11, 22, 0) 68%); filter: blur(14px); }
.hero-copy { position: relative; z-index: 2; padding-top: 20px; }
.eyebrow { display: flex; align-items: center; gap: 11px; margin: 0 0 24px; font: 500 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }.eyebrow-line { display: inline-block; width: 28px; height: 1px; background: var(--pink); }
h1, h2, h3, p { margin-top: 0; } h1 { margin-bottom: 25px; font: 600 clamp(46px, 5.3vw, 78px)/.98 var(--display); letter-spacing: -.065em; } h1 span { color: var(--blue); text-shadow: 0 0 38px rgba(99, 201, 255, .32); }
.hero-dek { width: min(430px, 100%); margin-bottom: 32px; font-size: 16px; line-height: 1.7; color: #bdc4d3; }
.hero-actions { display: flex; align-items: center; gap: 25px; }.button { display: inline-flex; align-items: center; gap: 22px; padding: 17px 19px 17px 23px; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }.button-primary { background: var(--pink); color: #fff; box-shadow: 0 12px 30px rgba(250, 60, 139, .18); }.button-primary:hover { transform: translateY(-3px); box-shadow: 0 17px 38px rgba(250, 60, 139, .3); background: #ff5b9d; }.button-arrow { font-size: 16px; line-height: 0; }.text-link { display: inline-flex; align-items: center; gap: 11px; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #c8cede; border-bottom: 1px solid rgba(200, 206, 222, .35); padding-bottom: 7px; transition: color .25s ease, border-color .25s ease, gap .25s ease; }.text-link span { color: var(--pink); font-size: 16px; }.text-link:hover { color: var(--blue); border-color: var(--blue); gap: 15px; }
.hero-meta { display: flex; gap: 18px; align-items: center; margin-top: 65px; }.hero-meta span:not(.meta-divider) { display: flex; flex-direction: column; gap: 5px; }.hero-meta b { font: 500 14px var(--display); }.hero-meta small { color: var(--muted); font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }.meta-divider { display: block; width: 1px; height: 30px; background: var(--line); }
.hero-art { height: 650px; position: relative; display: flex; justify-content: center; align-items: center; }.book-glow { position: absolute; width: 410px; height: 490px; background: radial-gradient(ellipse, rgba(105, 78, 255, .38), rgba(38, 130, 252, 0) 65%); filter: blur(28px); transform: translate(12px, 15px); }.book-wrap { position: relative; width: min(300px, 72%); transform: rotate(5deg); animation: bookFloat 6s ease-in-out infinite; filter: drop-shadow(25px 25px 20px rgba(0,0,0,.45)); }.book-wrap img { display: block; width: 100%; height: auto; position: relative; z-index: 1; box-shadow: -3px 0 0 rgba(255,255,255,.15); }.book-label { position: absolute; top: -29px; right: -67px; z-index: 2; color: var(--blue); font: 9px var(--mono); text-transform: uppercase; letter-spacing: .1em; transform: rotate(-5deg); }.book-shadow { position: absolute; z-index: -1; right: -14px; top: 7px; bottom: -8px; width: 20px; background: linear-gradient(90deg, #161835, #02030b); transform: skewY(-13deg); }.orbit { position: absolute; border: 1px solid rgba(99, 201, 255, .3); border-radius: 50%; transform: rotate(-26deg); }.orbit-one { width: 440px; height: 650px; }.orbit-two { width: 500px; height: 280px; border-color: rgba(250, 60, 139, .2); transform: rotate(54deg); }.floating-note { position: absolute; z-index: 3; padding: 12px 14px; border: 1px solid rgba(242,242,237,.22); background: rgba(10, 16, 32, .72); backdrop-filter: blur(12px); font: 9px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: #d6d9e3; }.note-top { top: 17%; right: 1%; }.note-bottom { bottom: 14%; left: 3%; color: var(--blue-bright); }.note-bottom span { color: var(--pink); margin-left: 7px; }.note-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 8px; background: var(--pink); box-shadow: 0 0 9px var(--pink); }
.scroll-cue { position: absolute; bottom: 18px; left: 0; color: #7c849a; font: 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }.scroll-cue span { display: block; width: 28px; height: 1px; background: var(--pink); }
.marquee-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0 17px; overflow: hidden; background: rgba(255,255,255,.015); }.marquee-track { white-space: nowrap; display: flex; align-items: center; gap: 28px; width: max-content; animation: marquee 26s linear infinite; color: #7d859b; font: 500 10px var(--mono); letter-spacing: .15em; }.marquee-track b { color: var(--pink); font-size: 13px; }
.premise { padding: 145px 0 157px; display: grid; grid-template-columns: 1fr 1fr; gap: 12%; }.section-intro h2, .ideas-header h2, .author h2, .final-cta h2 { font: 600 clamp(42px, 5vw, 68px)/1.03 var(--display); letter-spacing: -.065em; }.section-intro h2 { margin-bottom: 0; }.section-intro h2 em, .author h2 em, .final-cta h2 em { font-style: normal; color: var(--pink); }.premise-body { padding-top: 55px; max-width: 440px; }.lead-copy { margin-bottom: 26px; font-size: 21px; line-height: 1.45; letter-spacing: -.02em; }.body-copy { color: var(--muted); font-size: 14px; line-height: 1.8; margin-bottom: 31px; }.body-copy strong { color: var(--paper); font-weight: 700; }
.dark-link { color: var(--paper); }
.ideas { padding: 100px 0 163px; }.ideas-header { display: flex; justify-content: space-between; align-items: end; margin-bottom: 52px; }.ideas-header h2 { margin: 0; }.ideas-header > p { margin: 0 7% 7px 0; font: 11px/1.7 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }.idea-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }.idea-card { min-height: 405px; padding: 23px 22px; position: relative; overflow: hidden; transition: transform .3s ease; }.idea-card:hover { transform: translateY(-8px); }.idea-card::after { content: ''; position: absolute; width: 230px; height: 230px; border-radius: 50%; right: -95px; bottom: -95px; background: rgba(255,255,255,.12); filter: blur(1px); }.idea-card-blue { background: #174a72; }.idea-card-pink { background: #ad2861; }.idea-card-violet { background: #5c3d91; }.idea-card-sun { background: #b8912c; color: #13120d; }.idea-number { position: relative; z-index: 1; font: 10px var(--mono); opacity: .67; }.idea-card h3 { position: absolute; z-index: 1; bottom: 68px; left: 22px; margin: 0; font: 500 28px/1.03 var(--display); letter-spacing: -.05em; }.idea-card h3 em { color: var(--blue-bright); font-style: normal; }.idea-card-pink h3 em { color: #ff9bc5; }.idea-card-violet h3 em { color: #d5beff; }.idea-card-sun h3 em { color: #fff1bb; }.idea-card p { position: absolute; z-index: 1; left: 22px; right: 22px; bottom: 21px; margin: 0; font-size: 11px; line-height: 1.55; opacity: .76; }.idea-arrow { position: absolute; z-index: 1; top: 19px; right: 20px; font-size: 18px; }.idea-icon { position: absolute; z-index: 1; top: 98px; right: 22px; width: 48px; height: 48px; opacity: .83; }.icon-signal { display: flex; align-items: end; gap: 3px; }.icon-signal i { display: block; width: 6px; background: var(--blue-bright); transform: skew(-18deg); }.icon-signal i:nth-child(1) { height: 17px; }.icon-signal i:nth-child(2) { height: 31px; }.icon-signal i:nth-child(3) { height: 45px; }.icon-pulse { border: 1px solid #ffb4d1; border-radius: 50%; }.icon-pulse::after, .icon-pulse::before { content: ''; position: absolute; inset: 10px; border: 1px solid #ffb4d1; border-radius: 50%; }.icon-pulse::before { inset: 21px; }.icon-connection { border: 1px solid #dfccff; border-radius: 50%; }.icon-connection i { position: absolute; width: 21px; height: 21px; border-radius: 50%; border: 1px solid #dfccff; }.icon-connection i:first-child { left: 0; top: 10px; }.icon-connection i:last-child { right: 0; top: 10px; }.icon-human { display: flex; align-items: end; gap: 4px; }.icon-human i { border: 2px solid #fff1bb; border-radius: 50% 50% 0 0; width: 12px; height: 26px; }.icon-human i:nth-child(2) { height: 43px; }.icon-human i:nth-child(3) { height: 19px; }
.pull-quote { padding: 90px 0 175px; text-align: center; max-width: 850px; }.quote-mark { color: var(--pink); font: 100px/.7 Georgia, serif; height: 50px; }.pull-quote blockquote { margin: 0 auto 30px; font: 500 clamp(27px, 4vw, 48px)/1.18 var(--display); letter-spacing: -.055em; }.quote-rule { width: 35px; height: 1px; margin: 0 auto 20px; background: var(--blue); }.pull-quote > p { margin: 0; color: var(--muted); font: 9px var(--mono); letter-spacing: .12em; }.pull-quote > p span { color: var(--paper); }
.author { padding: 30px 0 160px; }.author-card { min-height: 475px; padding: 58px 70px; position: relative; overflow: hidden; display: flex; align-items: center; gap: 90px; background: var(--paper); color: var(--ink); }.author-card::before { content: ''; position: absolute; width: 430px; height: 430px; left: -50px; top: 30px; border-radius: 50%; background: radial-gradient(circle, rgba(99, 201, 255, .72), transparent 67%); }.author-card::after { content: '∞'; position: absolute; right: 30px; top: -40px; color: rgba(250, 60, 139, .13); font: 440px/1 var(--display); font-weight: 700; }.author-monogram { position: relative; z-index: 1; width: 220px; height: 220px; flex: 0 0 220px; border: 1px solid rgba(8,11,22,.3); border-radius: 50%; display: grid; place-items: center; font: 700 62px var(--display); letter-spacing: -.1em; }.author-monogram span { color: var(--pink); }.author-copy { position: relative; z-index: 1; max-width: 395px; }.author-copy .eyebrow { color: #676c7a; }.author-copy h2 { margin-bottom: 20px; }.author-copy p:not(.eyebrow) { max-width: 335px; color: #4f5565; font-size: 14px; line-height: 1.7; }.author-copy .text-link { color: var(--ink); border-color: rgba(8,11,22,.3); }.author-side-note { position: absolute; z-index: 1; right: 45px; bottom: 44px; text-align: right; color: rgba(8,11,22,.5); font: 10px/1.6 var(--mono); letter-spacing: .12em; }.author-side-note span { color: var(--pink); }
.final-cta { min-height: 500px; padding: 88px 40px; margin-bottom: 70px; position: relative; overflow: hidden; text-align: center; border: 1px solid rgba(99, 201, 255, .23); background: linear-gradient(120deg, rgba(21, 46, 83, .85), rgba(43, 17, 59, .72)); }.final-cta::before { content: ''; position: absolute; inset: 0; opacity: .15; background-image: linear-gradient(rgba(99,201,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(99,201,255,.5) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(circle, black, transparent 70%); }.final-cta-glow { position: absolute; width: 430px; height: 230px; left: 50%; top: 0; transform: translateX(-50%); border-radius: 50%; background: rgba(99, 201, 255, .25); filter: blur(60px); }.final-cta .eyebrow, .final-cta h2, .final-cta .button, .final-cta .cta-note { position: relative; z-index: 1; }.final-cta .eyebrow { justify-content: center; }.final-cta h2 { margin-bottom: 32px; }.final-cta h2 em { color: var(--blue); }.button-light { background: var(--paper); color: var(--ink); }.button-light:hover { transform: translateY(-3px); background: var(--blue-bright); box-shadow: 0 15px 35px rgba(99, 201, 255, .22); }.cta-note { margin: 25px 0 0; color: #a6b1c9; font-size: 12px; }
.site-footer { padding: 26px 0 38px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; color: var(--muted); }.footer-mark { color: var(--paper); }.site-footer p, .footer-link { margin: 0; font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }.footer-link { color: var(--blue); }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }.reveal.is-visible { opacity: 1; transform: translateY(0); }.reveal-delay { transition-delay: .16s; }.reveal-delay-short { transition-delay: .08s; }.reveal-delay-long { transition-delay: .24s; }
@keyframes bookFloat { 0%, 100% { transform: rotate(5deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-10px); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (max-width: 900px) { .section-shell, .site-header { width: min(100% - 48px, 680px); }.nav-links { display: none; }.hero { min-height: auto; padding: 145px 0 90px; grid-template-columns: 1fr; gap: 65px; }.hero-copy { padding: 0; }.hero-art { height: 530px; }.book-wrap { width: 265px; }.scroll-cue { bottom: 0; }.premise { padding: 105px 0 110px; grid-template-columns: 1fr; gap: 20px; }.premise-body { padding-top: 0; }.ideas { padding: 75px 0 115px; }.idea-list { grid-template-columns: repeat(2, 1fr); }.idea-card { min-height: 350px; }.author-card { padding: 48px; gap: 45px; }.author-monogram { width: 170px; height: 170px; flex-basis: 170px; font-size: 49px; }.author-side-note { right: 28px; bottom: 25px; }.final-cta { margin-bottom: 45px; } }
@media (max-width: 560px) { .section-shell, .site-header { width: calc(100% - 36px); }.site-header { padding: 22px 0; }.nav-cta { padding: 11px 10px; font-size: 9px; }.hero { padding-top: 125px; }.hero-dek { font-size: 14px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 19px; }.hero-meta { margin-top: 42px; gap: 12px; }.hero-meta b { font-size: 12px; }.hero-art { height: 485px; }.book-wrap { width: 220px; }.orbit-one { width: 330px; height: 490px; }.orbit-two { width: 370px; height: 235px; }.note-top { top: 11%; right: -4px; }.note-bottom { bottom: 8%; left: -2px; }.floating-note { font-size: 8px; padding: 10px; }.book-label { right: -48px; font-size: 8px; }.ideas-header { align-items: start; flex-direction: column; gap: 18px; }.ideas-header > p { margin: 0; }.idea-list { grid-template-columns: 1fr 1fr; gap: 8px; }.idea-card { min-height: 310px; padding: 16px 15px; }.idea-card h3 { left: 15px; bottom: 68px; font-size: 22px; }.idea-card p { left: 15px; right: 13px; bottom: 14px; font-size: 10px; }.idea-arrow { top: 15px; right: 14px; }.idea-icon { top: 74px; right: 14px; transform: scale(.8); transform-origin: right top; }.pull-quote { padding: 50px 0 110px; }.author { padding: 0 0 100px; }.author-card { display: block; padding: 35px 25px 50px; }.author-monogram { margin-bottom: 45px; }.author-copy h2 { font-size: 43px; }.author-side-note { right: 25px; bottom: 20px; font-size: 8px; }.site-footer { align-items: flex-start; flex-direction: column; gap: 20px; padding-bottom: 28px; }.footer-link { order: 2; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.reveal, .book-wrap, .marquee-track { animation: none; transition: none; }.reveal { opacity: 1; transform: none; } }