:root {
  --bg: #050b18;
  --bg-2: #07102a;
  --panel: #08122a;
  --panel-hot: #0b1c45;
  --line: #12203f;
  --line-2: #1e2e52;
  --line-3: #2a3e6b;
  --text: #dce6f7;
  --muted: #a9b8d4;
  --dim: #7c8db0;
  --white: #ffffff;
  --blue: #2f6bff;
  --blue-hi: #4d82ff;
  --cyan: #7fe3ff;
  --display: 'Space Grotesk', system-ui, sans-serif;
  --body: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}
::selection { background: var(--blue); color: var(--white); }
a { color: var(--cyan); }
a:hover { color: var(--white); }
img, svg { display: block; }
h1, h2, h3 { font-family: var(--display); color: var(--white); margin: 0; line-height: 1.1; letter-spacing: -0.03em; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--blue); color: var(--white); border-radius: 8px; }
.skip:focus { top: 12px; }

.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60; pointer-events: none; }
.progress span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--blue), var(--cyan)); }

/* ---------- header ---------- */
.top { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background .4s var(--ease), border-color .4s, backdrop-filter .4s; border-bottom: 1px solid transparent; }
.top.scrolled { background: rgba(5, 11, 24, .72); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom-color: var(--line); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 76px; transition: height .4s var(--ease); }
.top.scrolled .top-in { height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--white); text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; }
.logo svg path { stroke: var(--blue); stroke-width: 2.6; stroke-linecap: round; fill: none; stroke-dasharray: 30; stroke-dashoffset: 0; transition: stroke .3s; }
.logo:hover svg path { stroke: var(--cyan); animation: dash 1s var(--ease); }
@keyframes dash { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
.nav { display: flex; align-items: center; gap: 28px; font-size: 15px; }
.nav > a:not(.btn) { color: var(--muted); text-decoration: none; position: relative; padding: 10px 0; }
.nav > a:not(.btn)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--cyan); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.nav > a:not(.btn):hover { color: var(--white); }
.nav > a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; }
.lang { min-height: 44px; min-width: 52px; padding: 0 14px; background: transparent; border: 1px solid var(--line-2); border-radius: 999px; color: var(--text); font-family: var(--mono); font-size: 13px; cursor: pointer; transition: border-color .2s, color .2s; }
.lang:hover { border-color: var(--cyan); color: var(--white); }

/* ---------- buttons ---------- */
.btn { --tx: 0px; --ty: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font: 500 16px/1 var(--body); white-space: nowrap; text-decoration: none; cursor: pointer; border: 0; overflow: hidden; isolation: isolate; transform: translate(var(--tx), var(--ty)); transition: transform .35s var(--ease), background .25s, border-color .25s, color .25s; }
.btn svg path { stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.btn svg { transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn-sm { min-height: 44px; padding: 0 20px; font-size: 15px; }
.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120px circle at var(--bx, 50%) var(--by, 50%), rgba(127, 227, 255, .55), transparent 70%); opacity: 0; transition: opacity .3s; }
.btn-primary:hover { color: var(--white); background: var(--blue-hi); }
.btn-primary:hover::before { opacity: 1; }
.btn-ghost { background: transparent; color: var(--white); border: 1px solid var(--line-3); }
.btn-ghost:hover { border-color: var(--cyan); color: var(--white); }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; border-bottom: 1px solid var(--line); background: radial-gradient(1200px 600px at 80% 70%, #0a1a44 0%, var(--bg) 60%); }
#signal { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(5, 11, 24, .85) 0%, rgba(5, 11, 24, .35) 45%, rgba(5, 11, 24, 0) 70%), linear-gradient(0deg, var(--bg) 0%, rgba(5, 11, 24, 0) 22%); }
.hero-in { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 28px; padding-top: 140px; padding-bottom: 120px; pointer-events: none; }
.hero-in a, .hero-in button { pointer-events: auto; }
.eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.hero h1 { max-width: 1000px; font-weight: 700; font-size: clamp(44px, 7.2vw, 96px); line-height: .98; letter-spacing: -0.04em; }
.hero h1 .glyph { color: var(--cyan); }
.lead { max-width: 640px; font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 8px; }
.term { margin-top: 24px; max-width: 470px; border: 1px solid var(--line-2); border-radius: 14px; background: rgba(8, 18, 42, .78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overflow: hidden; }
.term-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line-2); font-family: var(--mono); font-size: 11px; color: var(--dim); }
.term-bar i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--line-3); }
.term-bar span { margin-left: 8px; }
#term { margin: 0; padding: 14px 18px 16px; min-height: 128px; font: 13px/1.85 var(--mono); color: var(--dim); white-space: pre-wrap; }
#term .p { color: var(--blue); }
#term .ok { color: var(--cyan); }
#term .w { color: var(--white); }
#term .caret { display: inline-block; width: 8px; height: 15px; vertical-align: -2px; background: var(--cyan); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero-meta { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 2; display: flex; justify-content: space-between; gap: 16px; font-family: var(--mono); font-size: 12px; color: var(--dim); pointer-events: none; }

/* ---------- marquee ---------- */
.marquee { overflow: hidden; border-bottom: 1px solid var(--line); padding: 24px 0; white-space: nowrap; }
.marquee-track { display: inline-flex; align-items: center; will-change: transform; font-family: var(--display); font-size: clamp(28px, 4vw, 52px); letter-spacing: -0.03em; }
.marquee-track span { padding: 0 26px; color: transparent; -webkit-text-stroke: 1px var(--line-3); transition: color .3s, -webkit-text-stroke-color .3s; }
.marquee-track span:nth-of-type(odd) { color: var(--white); -webkit-text-stroke: 0; }
.marquee-track b { color: var(--blue); font-weight: 400; }

/* ---------- sections ---------- */
.section { padding-top: 140px; padding-bottom: 140px; }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 56px; }
.section-head h2, .lectures h2, .contact h2 { font-size: clamp(38px, 5vw, 64px); line-height: 1.02; font-weight: 700; max-width: 700px; }
.section-head p { max-width: 400px; color: var(--muted); }

[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
[data-reveal].in { opacity: 1; transform: none; }

/* ---------- bento ---------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; perspective: 1400px; }
.span-7 { grid-column: span 7; }
.span-5 { grid-column: span 5; }
.card { --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg; position: relative; min-height: 380px; padding: 36px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line-2); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; overflow: hidden; transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .5s var(--ease), border-color .3s, opacity .9s var(--ease); }
.card[data-reveal].in { transform: rotateX(var(--rx)) rotateY(var(--ry)); }
.card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(47, 107, 255, .22), transparent 60%); opacity: 0; transition: opacity .4s; }
.card::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; background: radial-gradient(260px circle at var(--mx) var(--my), var(--cyan), transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .4s; }
.card:hover::before, .card:hover::after { opacity: 1; }
.card-hot { background: var(--panel-hot); border-color: var(--blue); }
.card-top { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 13px; color: var(--dim); }
.tag { color: var(--cyan); text-align: right; }
.card h3 { font-size: clamp(30px, 3vw, 40px); letter-spacing: -0.025em; margin-bottom: 12px; }
.card p { color: var(--muted); max-width: 540px; }
.card-hot p { color: #c7d3ea; }
.card-art { position: absolute; right: 28px; top: 64px; width: 220px; height: 120px; opacity: .9; transform: translateZ(40px); }
.card-art rect, .card-art path, .card-art circle { fill: none; stroke: var(--line-3); stroke-width: 1.2; }
.card:hover .card-art rect, .card:hover .card-art path, .card:hover .card-art circle { stroke: #3f5a94; }
.card-art .pulse { stroke: var(--blue); animation: pulse 2.6s ease-in-out infinite; }
.card-art .draw { stroke: var(--cyan); stroke-dasharray: 400; stroke-dashoffset: 400; }
.card.in .card-art .draw { animation: draw 2.4s var(--ease) .3s forwards; }
.card-art .ping { stroke: var(--cyan); fill: rgba(127, 227, 255, .15); transform-box: fill-box; transform-origin: center; animation: ping 2s ease-out infinite; }
.card-art .travel { fill: var(--cyan); stroke: none; offset-path: path('M28 60 H192'); animation: travel 3s linear infinite; }
@keyframes pulse { 50% { opacity: .35; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes ping { 0% { transform: scale(.6); opacity: 1; } 80%, 100% { transform: scale(1.8); opacity: 0; } }
@keyframes travel { from { offset-distance: 0%; } to { offset-distance: 100%; } }

/* ---------- lectures ---------- */
.band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); position: relative; overflow: hidden; }
.band::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(600px 400px at 85% 30%, #000, transparent 70%); -webkit-mask-image: radial-gradient(600px 400px at 85% 30%, #000, transparent 70%); opacity: .7; }
.lectures { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: start; padding-top: 140px; padding-bottom: 140px; }
.lectures-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.lectures-copy > p:not(.eyebrow) { color: var(--muted); }
.lectures-panel { display: flex; flex-direction: column; gap: 20px; }
.seg { position: relative; display: inline-flex; align-self: flex-start; gap: 4px; padding: 5px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg); }
.seg button { position: relative; z-index: 1; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 15px var(--body); cursor: pointer; transition: color .3s; }
.seg button[aria-selected="true"] { color: var(--white); }
.seg-pill { position: absolute; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px; background: var(--blue); transition: transform .5s var(--ease), width .5s var(--ease); }
.panel { border: 1px solid var(--line-2); border-radius: 22px; background: var(--panel); padding: 34px; display: flex; flex-direction: column; gap: 18px; animation: panelIn .6s var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(12px); } }
.panel h3 { font-size: 30px; letter-spacing: -0.02em; }
.panel p { color: var(--muted); }
.panel ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 16px; }
.panel li { display: flex; gap: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.panel li::before { content: '→'; font-family: var(--mono); color: var(--blue); }

/* ---------- process ---------- */
.steps { --fill: 0; position: relative; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.steps::before, .steps::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--line-2); }
.steps::after { background: linear-gradient(90deg, var(--blue), var(--cyan)); transform-origin: 0 50%; transform: scaleX(var(--fill)); }
.steps li { padding-top: 26px; display: flex; flex-direction: column; gap: 10px; }
.steps span { font-family: var(--mono); font-size: 13px; color: var(--dim); transition: color .4s; }
.steps li.lit span { color: var(--cyan); }
.steps h3 { font-size: 26px; letter-spacing: -0.02em; }
.steps p { color: var(--muted); font-size: 16px; }

/* ---------- contact ---------- */
.contact { border-top: 1px solid var(--line); background: radial-gradient(900px 500px at 10% 100%, #0a1a44 0%, var(--bg) 65%); }
.contact-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px; padding-top: 140px; padding-bottom: 140px; }
.contact-copy { grid-column: span 5; display: flex; flex-direction: column; gap: 22px; }
.contact-copy p { color: var(--muted); }
.mail { font-family: var(--display); font-size: clamp(22px, 2.4vw, 30px); text-decoration: none; word-break: break-all; }
.form { grid-column: span 7; border: 1px solid var(--line-2); border-radius: 22px; background: var(--panel); padding: 36px; display: flex; flex-direction: column; gap: 20px; }
.chips { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { padding: 0 0 12px; font-family: var(--mono); font-size: 13px; color: var(--dim); text-transform: uppercase; letter-spacing: .1em; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); font-size: 15px; transition: background .25s, border-color .25s, color .25s, transform .25s var(--ease); }
.chip:hover span { border-color: var(--line-3); color: var(--white); }
.chip input:checked + span { background: var(--panel-hot); border-color: var(--blue); color: var(--white); }
.chip input:checked + span::before { content: ''; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.chip input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--muted); }
.field input, .field textarea { width: 100%; min-height: 50px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg); color: var(--white); font: 16px var(--body); transition: border-color .25s, box-shadow .25s; }
.field textarea { padding: 14px 16px; resize: vertical; min-height: 140px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(47, 107, 255, .2); }
.field.bad input, .field.bad textarea { border-color: #ff8a7a; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.form-foot small { font-size: 13px; color: var(--dim); max-width: 340px; }
.form-status { min-height: 1.6em; font-family: var(--mono); font-size: 14px; color: var(--muted); }
.form-status.ok { color: var(--cyan); }
.form-status.err { color: #ffb4a8; }
.form.sent { position: relative; }
.form.sent::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--cyan); animation: sent 1.4s var(--ease) forwards; pointer-events: none; }
@keyframes sent { from { box-shadow: 0 0 0 0 rgba(127, 227, 255, .6); } to { box-shadow: 0 0 0 28px rgba(127, 227, 255, 0); } }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 36px; padding-bottom: 36px; font-size: 14px; color: var(--dim); }
.foot-links { display: flex; flex-wrap: wrap; gap: 24px; font-family: var(--mono); font-size: 13px; }
.foot-links a { color: var(--dim); text-decoration: none; }
.foot-links a:hover { color: var(--white); }

/* ---------- prose pages (privacy) ---------- */
.prose { max-width: 760px; padding-top: 140px; padding-bottom: 120px; }
.prose h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1.05; margin-bottom: 12px; }
.prose h2 { font-size: 24px; margin: 40px 0 12px; letter-spacing: -0.02em; }
.prose p, .prose li { color: var(--muted); }
.prose p + p { margin-top: 12px; }
.prose ul { padding-left: 20px; }
.prose .eyebrow { margin-bottom: 18px; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .bento, .contact-in { grid-template-columns: minmax(0, 1fr); }
  .span-7, .span-5, .contact-copy, .form { grid-column: auto; }
  .lectures { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .steps::before, .steps::after { display: none; }
  .steps li { border-top: 2px solid var(--line-2); }
  .steps li.lit { border-top-color: var(--blue); }
}
@media (max-width: 720px) {
  .wrap { padding: 0 16px; }
  .nav > a:not(.btn) { display: none; }
  .nav { gap: 10px; }
  .hero-in { padding-top: 110px; padding-bottom: 90px; }
  .hero::after { background: linear-gradient(0deg, var(--bg) 0%, rgba(5, 11, 24, .55) 45%, rgba(5, 11, 24, .3) 100%); }
  .hero-meta span:last-child { display: none; }
  .section, .lectures, .contact-in { padding-top: 96px; padding-bottom: 96px; }
  .card { min-height: 0; padding: 26px; padding-top: 170px; }
  .card-art { left: 26px; right: auto; top: 54px; width: 180px; height: 98px; }
  .form, .panel { padding: 22px; }
  .row { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .btn { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
}