/* public/landing.css
 *
 * Stylesheet for the marketing homepage (pages/index.js) only.
 * Extracted 2026-08-06 from the <style jsx global> block that used to be
 * pasted at the bottom of pages/index.js — same CSS, unmodified, just moved
 * into a real stylesheet so it's easier to read, edit, and lint.
 *
 * Loaded via a plain <link rel="stylesheet" href="/landing.css"> in that
 * page's <Head>, NOT a JS import — Next.js's pages router only allows
 * importing global .css files from pages/_app.js, so a stylesheet that
 * should apply to one page only has to be served from /public and linked
 * instead. This also means it never touches any other page's styles.
 *
 * New in this pass: the mobile hamburger menu styles at the bottom
 * (.hamburger-btn, .mobile-nav) — the nav links used to just disappear
 * below 860px with nothing replacing them.
 */

:root[data-theme='light'] {
  --bg: #ffffff; --bg-offset: #F9F8FF; --surface: #F2F0FC; --surface-2: #EAE7F8;
  --border: #DDD9F0; --border-subtle: #EEEAF8; --text: #1A1730; --text-2: #4A4566; --muted: #8B87A8; --dim: #B0ACCC;
  --lavender: #E6E6FA; --lavender-mid: #C5BEF0; --lavender-deep: #9B8EC4;
  --mint: #D4EDE1; --mint-mid: #9DD4B6; --sky: #C8DCF5; --sky-mid: #8BB8E8;
  --peach: #FAE0D0; --peach-mid: #F2B89A; --earth: #C8A882; --earth-deep: #8B6B42;
  --cyan: #00D4FF; --purple-vibe: #7C3AED; --green-natural: #4A7C59;
  --grad-hero: linear-gradient(135deg,#E6E6FA 0%,#C8DCF5 50%,#D4EDE1 100%);
  --grad-warm: linear-gradient(135deg,#FAE0D0 0%,#E6E6FA 100%);
  --grad-earth: linear-gradient(135deg,#D4EDE1 0%,#C8A882 100%);
  --grad-dusk: linear-gradient(135deg,#C5BEF0 0%,#F2B89A 100%);
  --grad-mesh: linear-gradient(120deg,#FAE0D0 0%,#E6E6FA 45%,#C8DCF5 75%,#D4EDE1 100%);
  --grad-portrait: linear-gradient(160deg,#2A2545 0%,#0C0B14 100%);
  --shadow-s: 0 2px 8px rgba(26,23,48,0.06); --shadow-m: 0 6px 24px rgba(26,23,48,0.09);
  --shadow-l: 0 16px 48px rgba(26,23,48,0.12); --radius-pill: 999px; --card-surface: #ffffff;
  --canvas-bg: #FDFCFF;
}
:root[data-theme='dark'] {
  --bg: #000000; --bg-offset: #0C0B14; --surface: #141220; --surface-2: #1E1B2E;
  --border: #2A2740; --border-subtle: #242140; --text: #FBFAFF; --text-2: #DED9F2; --muted: #AEA9D2; --dim: #8782AC;
  --lavender: #2A2545; --lavender-mid: #4A4080; --lavender-deep: #B8A9E0;
  --mint: #1A2E24; --mint-mid: #2D5A42; --sky: #1A2A3E; --sky-mid: #2D4A6B;
  --peach: #2E1E18; --peach-mid: #6B3820; --earth: #4A3820; --earth-deep: #8B6B42;
  --cyan: #00D4FF; --purple-vibe: #A855F7; --green-natural: #4A7C59;
  --grad-hero: linear-gradient(135deg,#1A1730 0%,#0D1A2E 50%,#0D2018 100%);
  --grad-warm: linear-gradient(135deg,#1A1220 0%,#2E1A14 100%);
  --grad-earth: linear-gradient(135deg,#1A2E24 0%,#2E2010 100%);
  --grad-dusk: linear-gradient(135deg,#2A2040 0%,#3A1A10 100%);
  --grad-mesh: linear-gradient(120deg,#2E1E18 0%,#1A1730 45%,#0D1A2E 75%,#0D2018 100%);
  --grad-portrait: linear-gradient(160deg,#2A2545 0%,#0C0B14 100%);
  --shadow-s: 0 2px 8px rgba(0,0,0,0.4); --shadow-m: 0 6px 24px rgba(0,0,0,0.5);
  --shadow-l: 0 16px 48px rgba(0,0,0,0.6); --radius-pill: 999px; --card-surface: #141220;
  --canvas-bg: #030309;
}
body { background: var(--bg-offset); color: var(--text); font-family: 'Nunito', sans-serif; line-height: 1.6; transition: background .35s, color .35s; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 30px; }
strong { font-weight: 700; color: var(--text); }

.eyebrow { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: var(--muted); }
.h-display { font-weight: 300; line-height: 1.15; letter-spacing: -0.01em; color: var(--text); }
.sub { font-size: 15px; color: var(--text-2); line-height: 1.6; }

.toggle-wrap { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.toggle { width: 48px; height: 26px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-pill); cursor: pointer; position: relative; flex-shrink: 0; }
.toggle::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--lavender-deep); top: 3px; left: 3px; transition: transform .3s cubic-bezier(.4,0,.2,1); }
[data-theme='dark'] .toggle { background: var(--lavender-mid); }
[data-theme='dark'] .toggle::after { transform: translateX(22px); background: #fff; }

.btn { font-family: 'Nunito'; font-size: 14px; font-weight: 600; border: none; border-radius: var(--radius-pill); padding: 13px 28px; cursor: pointer; transition: all .2s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-primary { background: var(--text); color: var(--bg); }
.btn-primary:hover { opacity: .85; transform: translateY(-1px); box-shadow: var(--shadow-m); }
.btn-outline { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-outline:hover { background: var(--surface); border-color: var(--lavender-mid); }
.btn-disabled { background: var(--surface-2); color: var(--dim); cursor: not-allowed; border: 1px solid var(--border); }
.btn-mono { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }

.soft { background: var(--card-surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; box-shadow: var(--shadow-s); }
.soft-label { font-family: 'DM Mono', monospace; font-size: 9px; color: var(--muted); letter-spacing: .25em; text-transform: uppercase; margin-bottom: 10px; }
.note { font-family: 'Nunito'; font-size: 13.5px; line-height: 1.6; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 15px 19px; }
.note b { color: var(--text); font-weight: 600; }

.input { font-family: 'Nunito'; font-size: 14px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 13px 16px; outline: none; width: 100%; transition: border-color .2s, box-shadow .2s; }
.input::placeholder { color: var(--dim); }
.input:focus { border-color: var(--lavender-deep); box-shadow: 0 0 0 3px rgba(155,142,196,0.15); }
.input-label { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 6px; }
select.input { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position: calc(100% - 20px) center,calc(100% - 15px) center; background-size: 5px 5px,5px 5px; background-repeat: no-repeat; }
textarea.input { resize: vertical; min-height: 110px; font-family: 'Nunito'; }
.file-input { padding: 10px 16px; cursor: pointer; }
.file-note { font-size: 12px; color: var(--text-2); margin-top: 6px; }

@keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
@keyframes pulse-ring { 0% { transform: scale(1); opacity: .5 } 100% { transform: scale(1.5); opacity: 0 } }
.s-orb { width: 116px; height: 116px; border-radius: 50%; background: var(--grad-hero); position: relative; display: flex; align-items: center; justify-content: center; animation: float 4s ease-in-out infinite; }
.s-orb::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; background: var(--grad-hero); opacity: .35; animation: pulse-ring 2.6s ease-out infinite; }
.s-orb-inner { width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,0.35); backdrop-filter: blur(8px); }

@media (prefers-reduced-motion: reduce) {
  .s-orb, .s-orb::before, .mesh-bg { animation: none !important; }
}

.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: flex-end; gap: 20px; padding: 12px 30px; background: rgba(249,248,255,0.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); transform: translateY(-100%); transition: transform .28s ease; }
.site-header.is-visible { transform: translateY(0); }
[data-theme='dark'] .site-header { background: rgba(12,11,20,0.86); }
.logo-mark { height: 30px; width: auto; }
.logo-for-dark { display: none; }
[data-theme='dark'] .logo-for-dark { display: block; }
[data-theme='dark'] .logo-for-light { display: none; }
.nav-links { display: flex; align-items: center; gap: 24px; font-family: 'DM Mono', monospace; font-size: 13.75px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.nav-links a:hover { color: var(--lavender-deep); }
.header-right { display: flex; align-items: center; gap: 24px; }
.header-right .btn { font-size: 13.75px; }
@media (max-width: 860px) { .nav-links { display: none; } }

.theme-toggle-float { position: fixed; bottom: 24px; right: 24px; z-index: 200; }

.hero-container { position: relative; height: 100vh; height: 100dvh; overflow: hidden; }
.hero-wrap { position: relative; z-index: 2; padding: 40px 30px 0; max-width: 1240px; margin: 0 auto; }
.hero-wrap::before { content: ''; position: absolute; top: -40px; left: -30px; right: -30px; height: 260px; background: radial-gradient(ellipse at top, var(--bg-offset) 0%, transparent 78%); opacity: .8; pointer-events: none; }
.hero-text-row { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; flex-wrap: nowrap; }
.hero-text-col { max-width: 700px; min-width: 0; }
.hero-logo-col { flex-shrink: 0; align-self: flex-end; }
.hero-logo { height: 150px; width: auto; max-width: none; flex-shrink: 0; }
.hero-kicker { font-family: 'Nunito'; font-weight: 600; font-size: 16px; color: var(--lavender-deep); margin-bottom: 8px; }
.hero-headline { font-weight: 300; font-size: clamp(36px,6vw,68px); line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 0; }
.hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }
@media (max-width: 760px) { .hero-logo { height: 92px; } }
@media (max-width: 460px) { .hero-logo { height: 66px; } }

.stage { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; z-index: 1; }
.stage canvas { width: 100%; height: 100%; display: block; }

.section { padding: 100px 0; border-top: 1px solid var(--border-subtle); }
.section:first-of-type { border-top: none; }
.section-head { max-width: 640px; margin-bottom: 44px; }
.section-num { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--lavender-deep); font-weight: 400; margin-right: 8px; }
.section-headline { font-weight: 300; font-size: clamp(28px,3.6vw,42px); line-height: 1.18; letter-spacing: -0.01em; margin: 10px 0 12px; }
.section-sub { font-size: 16px; color: var(--text-2); }
.section-headline .accent { color: var(--lavender-deep); }

.split-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 52px; align-items: center; }
@media (max-width: 900px) { .split-grid { grid-template-columns: 1fr; } }
#what-we-do .section-head { margin-bottom: 26px; }
#what-we-do .split-grid { gap: 40px; }
#what-we-do .split-grid, #science .split-grid { align-items: flex-start; }
.body-copy p { font-size: 15.5px; color: var(--text-2); margin-bottom: 14px; max-width: 560px; }
.placeholder-panel { border-radius: 24px; min-height: 380px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; box-shadow: var(--shadow-m); }
.media-panel { padding: 0; align-self: stretch; min-height: 440px; }
.media-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.section-split .section-headline { margin-top: 0; }
.journey-lead { font-size: 19px; font-weight: 700; line-height: 1.6; color: var(--text); max-width: 900px; margin: 32px 0 0; }
#journey .media-panel { margin-top: 8px; margin-bottom: 32px; }
.placeholder-label { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,0.9); background: rgba(20,15,35,0.35); padding: 9px 18px; border-radius: var(--radius-pill); backdrop-filter: blur(4px); text-align: center; }
@keyframes meshShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.mesh-bg { background: var(--grad-mesh); background-size: 220% 220%; animation: meshShift 20s ease-in-out infinite; }

.journey-banner { border-radius: 28px; min-height: 320px; background: var(--grad-earth); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; padding: 40px; margin-bottom: 48px; position: relative; overflow: hidden; }

.science-visual-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.brain-svg { width: 100%; max-width: 560px; height: auto; overflow: visible; }
.gyrus { fill: none; stroke: rgba(255,255,255,.5); stroke-width: 2; stroke-linecap: round; }
.brain-sheen { fill: #ffffff; opacity: .14; pointer-events: none; }
.brain-wave { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.brain-hz { font-family: 'DM Mono', monospace; font-size: 13px; letter-spacing: .06em; fill: var(--text-2); }
.brain-hz.sync { fill: var(--lavender-deep); }
.brain-caption { font-size: 12.5px; color: var(--text-2); text-align: center; max-width: 440px; }
.experience-heading { font-family: 'Nunito'; font-weight: 700; font-size: clamp(24px,3vw,34px); color: var(--text); letter-spacing: -0.01em; margin-bottom: 18px; }
.results-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin: 0 0 36px; }
@media (max-width: 900px) { .results-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .results-grid { grid-template-columns: 1fr; } }
.results-grid .pc-name { font-weight: 700; }
.results-grid .pc-desc { font-weight: 700; color: var(--text); }
.results-grid .soft.g-hero { background: var(--grad-hero); }
.results-grid .soft.g-warm { background: var(--grad-warm); }
.results-grid .soft.g-dusk { background: var(--grad-dusk); }
.results-grid .soft.g-earth { background: var(--grad-earth); }
.research-link { font-family: 'Nunito'; font-weight: 400; font-size: 17px; color: var(--text); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px; }
.research-link:hover { color: var(--lavender-deep); }
.research-link .arrow { transition: transform .2s; }
.research-link:hover .arrow { transform: translateX(4px); }

.about-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 52px; align-items: center; }
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } }
.portrait-placeholder { border-radius: 24px; min-height: 440px; background: var(--grad-portrait); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-l); position: relative; overflow: hidden; align-self: stretch; }
.portrait-placeholder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.contact-wrap { max-width: 640px; margin: 0 auto; text-align: center; }
.audience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 36px 0; text-align: left; }
@media (max-width: 640px) { .audience-grid { grid-template-columns: 1fr; } }
.contact-form { text-align: left; margin-top: 44px; display: flex; flex-direction: column; gap: 16px; }

.site-footer { padding: 50px 0 40px; text-align: center; border-top: 1px solid var(--border-subtle); margin-top: 20px; }
.footer-links { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; font-family: 'DM Mono', monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.footer-links a:hover { color: var(--lavender-deep); }
.footer-meta { font-size: 12.5px; color: var(--text-2); margin-bottom: 6px; }
.footer-meta a { color: var(--text-2); text-decoration: none; }
.footer-meta a:hover { color: var(--lavender-deep); }
.footer-copy { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--dim); margin-top: 14px; }

.footer-minimal-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.social-links { display: flex; justify-content: center; gap: 16px; }
.social-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); color: var(--text-2); transition: color .2s, border-color .2s; }
.social-icon:hover { color: var(--lavender-deep); border-color: var(--lavender-mid); }
.qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.qr-label { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.footer-minimal .footer-links { margin-bottom: 0; }

/* ── Mobile nav (added 2026-08-06) ──────────────────────────────
 * Below 860px .nav-links (above) is hidden with nothing replacing it —
 * this hamburger button + dropdown panel is that replacement, so
 * tablet/phone visitors can still reach What We Do / Journey / Science /
 * About / Contact once the inline links disappear. */
.hamburger-btn { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 34px; height: 34px; background: transparent; border: none; cursor: pointer; padding: 0; flex-shrink: 0; }
.hamburger-btn span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; }
@media (max-width: 860px) { .hamburger-btn { display: flex; } }

.mobile-nav { position: fixed; top: 62px; left: 0; right: 0; z-index: 99; display: flex; flex-direction: column; background: var(--bg-offset); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-m); padding: 8px 30px 16px; font-family: 'DM Mono', monospace; font-size: 13.75px; letter-spacing: .1em; text-transform: uppercase; }
[data-theme='dark'] .mobile-nav { background: rgba(12,11,20,0.97); }
.mobile-nav a { padding: 14px 0; color: var(--text-2); border-bottom: 1px solid var(--border-subtle); }
.mobile-nav a:last-child { border-bottom: none; }
@media (min-width: 861px) { .mobile-nav { display: none; } }
