/* Nexus landing page. Values follow the app's stylesheet: Geist and Geist
   Mono, the :root token block, the primary-button and card recipes. */

@font-face {
  font-family: 'Geist';
  src: url('assets/fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('assets/fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --sans: 'Geist', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', monospace;
  --bg0: #07060f; --bg1: #0c0a18;
  --line: rgba(139,132,255,.09); --line2: rgba(139,132,255,.18);
  --tx: #ece9f6; --tx2: #968fb0; --tx3: #5d5675;
  --violet-text: #c6c3ff; --cyan-text: #79d4ff;
  --pad: clamp(20px, 5vw, 72px);
  --gap: clamp(72px, 8.4vw, 120px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #030208; }
body { font: 400 17px/1.55 var(--sans); color: var(--tx); -webkit-font-smoothing: antialiased; }
h1, h2, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--violet-text); text-decoration: none; }
a:hover { color: var(--tx); }
img { max-width: 100%; height: auto; }
.mono { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--cyan-text); outline-offset: 2px; }

@keyframes auroraDrift { from { transform: translate3d(-5%,-2%,0) scale(1); opacity: .55; } to { transform: translate3d(5%,4%,0) scale(1.18); opacity: 1; } }
@keyframes gatePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(121,212,255,.45); } 50% { box-shadow: 0 0 0 8px rgba(121,212,255,0); } }
@keyframes caretBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* The page: the artboard's 1440 frame, framed on wider screens. */
.page { max-width: 1440px; margin: 0 auto; background: var(--bg0); position: relative; overflow: hidden; }
@media (min-width: 1489px) { .page { margin: 24px auto; border-radius: 14px; outline: 1px solid rgba(139,132,255,.14); } }

h2 { font: 600 34px/1 var(--sans); color: var(--tx); }

/* Header */
.top { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 28px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; }
.mark { width: 28px; height: 28px; display: block; }
.brand-name { font: 600 19px var(--sans); color: var(--tx); }
.maker { font: 400 15px var(--mono); color: var(--tx2); }
.maker-phone { display: none; }

/* Sections 1 and 2 with the form rail */
.offer { display: grid; grid-template-columns: minmax(0, 1fr) 420px; grid-template-areas: "hero rail" "pricing rail"; align-items: stretch; }

.hero { grid-area: hero; position: relative; overflow: hidden; padding: 64px var(--pad) 0; }
.hero .wash, .hero .aurora { position: absolute; inset: 0 0 auto; height: 420px; pointer-events: none; }
.wash { background: radial-gradient(1200px 480px at 30% -14%, rgba(157,123,255,.08), transparent 70%); }
.aurora { background: radial-gradient(900px 400px at 62% -10%, rgba(99,226,255,.05), transparent 70%); animation: auroraDrift 26s ease-in-out infinite alternate; }
.hero > * { position: relative; }
h1 { margin: 0 0 28px; font: 600 clamp(34px, 3.62vw + 19.9px, 72px)/1.08 var(--sans); color: var(--tx); letter-spacing: -.02em; max-width: 860px; text-wrap: pretty; }
.lede { margin: 0 0 40px; font: 400 19px/1.65 var(--sans); color: var(--tx2); max-width: 780px; text-wrap: pretty; }

/* The hero demo */
.composer { position: relative; max-width: 780px; margin: 0 0 30px; background: var(--bg1); border: 1px solid rgba(139,132,255,.22); border-radius: 16px; padding: 17px 24px; display: flex; align-items: center; gap: 16px; overflow: hidden; }
.composer-label { font: 500 11px var(--mono); letter-spacing: .16em; color: var(--tx3); flex: none; }
.composer-text { font: 400 15px/17px var(--mono); color: var(--tx); white-space: nowrap; overflow: hidden; min-height: 17px; }
.caret { width: 8px; height: 17px; flex: none; margin-left: -8px; background: var(--cyan-text); animation: caretBlink 1.05s step-end infinite; }
.gates { position: relative; max-width: 780px; display: flex; align-items: flex-start; margin: 0 0 72px; padding: 0 30px; }
.gate { position: relative; flex: none; }
.gate-node { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid rgba(139,132,255,.35); transition: background .35s, border-color .35s; }
.gate.is-done .gate-node { border-color: #9d7bff; background: #9d7bff; }
.gate.is-done .gate-node::after { content: '\2713'; font: 700 12px/1 var(--sans); color: var(--bg0); }
.gate.is-active .gate-node { border-color: var(--cyan-text); background: rgba(121,212,255,.16); animation: gatePulse 1.1s ease-in-out infinite; }
.gate.is-active .gate-node::after { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--cyan-text); }
.gate-name { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); font: 500 12.5px var(--mono); letter-spacing: .04em; white-space: nowrap; color: var(--tx3); transition: color .35s; }
.gate.is-done .gate-name { color: var(--violet-text); }
.gate.is-active .gate-name { color: var(--cyan-text); }
.link { flex: 1; height: 2px; align-self: flex-start; margin-top: 9px; background: rgba(139,132,255,.14); overflow: hidden; }
.link span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #63e2ff, #9d7bff); }
.link.is-filled span { width: 100%; transition: width .45s cubic-bezier(.4,0,.2,1); }

/* The offer line */
.terms { border-top: 1px solid var(--line2); padding-top: 30px; }
.price { font: 400 19px/1.5 var(--sans); color: var(--tx2); }
.price strong { font: 700 30px var(--sans); color: var(--tx); }
.audience { font: 400 18px var(--sans); color: var(--violet-text); margin-top: 12px; }

/* The form rail */
.rail { grid-area: rail; border-left: 1px solid var(--line2); background: var(--bg1); padding: 44px 40px; }
.request { display: flex; flex-direction: column; gap: 15px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.field-head label { font: 500 15px var(--sans); color: var(--violet-text); }
.tag { font: 400 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tx3); flex: none; }
.tag-required { color: var(--cyan-text); }
.request input { width: 100%; height: 50px; border-radius: 25px; background: var(--bg0); border: 1px solid rgba(139,132,255,.22); padding: 0 20px; font: 400 16px var(--sans); color: var(--tx); }
.request input:focus { border-color: rgba(99,226,255,.5); outline: none; }
.btn-primary { width: 100%; height: 56px; border: 0; border-radius: 28px; margin-top: 4px; cursor: pointer; background: linear-gradient(105deg, #8fe4ff, #54c4f7 38%, #9d7bff 88%); box-shadow: 0 0 38px rgba(157,123,255,.35); font: 700 18px var(--sans); color: var(--bg0); }
.btn-primary:hover { filter: brightness(1.08); }
.fine { font: 400 13.5px/1.5 var(--sans); color: var(--tx3); }

/* Pricing */
.pricing { grid-area: pricing; position: relative; padding: 120px var(--pad) 96px; }
.pricing h2 { margin-bottom: 26px; }
.plan { position: relative; background: var(--bg1); border: 1px solid var(--line2); border-radius: 28px; padding: 38px 44px; overflow: hidden; }
.plan::before { content: ''; position: absolute; top: -1px; left: 32px; right: 32px; height: 2px; background: linear-gradient(90deg, transparent, rgba(99,226,255,.55) 18%, rgba(164,143,224,.5) 60%, transparent); }
.plan-name { font: 600 24px var(--sans); color: var(--tx); margin-bottom: 8px; }
.plan-terms { font: 400 18px/1.55 var(--sans); color: var(--tx2); margin-bottom: 28px; }
.plan-lists { display: flex; flex-direction: column; gap: 22px; }
.kicker { font: 600 13px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--cyan-text); margin-bottom: 12px; }
.kicker-dim { color: var(--tx3); }
.plan-includes { display: flex; flex-direction: column; gap: 9px; font: 400 17px/1.5 var(--sans); color: var(--tx); }
.plan-excludes { font: 400 17px/1.5 var(--sans); color: var(--tx2); }
.plan-note { margin-top: 28px; font: 400 16px/1.6 var(--sans); color: var(--tx2); border-top: 1px solid var(--line); padding-top: 22px; }
/* Sections 3, 5, 6: heading plus left-aligned column */
.section { padding: var(--gap) var(--pad) 0; }
.section > * { max-width: 960px; }
.section.wide > * { max-width: 1060px; }
.section h2 { margin-bottom: 26px; }
.prose { display: flex; flex-direction: column; gap: 20px; font: 400 18px/1.65 var(--sans); color: var(--tx2); text-wrap: pretty; }
.prose .bright { color: var(--tx); }

/* Section 4 */
.shots { margin-top: var(--gap); background: #0a0814; border-top: 1px solid rgba(139,132,255,.14); border-bottom: 1px solid rgba(139,132,255,.14); padding: 88px var(--pad) 96px; }
.shots h2 { margin-bottom: 12px; }
.shots-intro { margin-bottom: 40px; font: 400 17px var(--sans); color: var(--tx2); }
.shots-list { display: flex; flex-direction: column; gap: 56px; }
.shots figure { display: flex; flex-direction: column; gap: 14px; }
.shot-index { font: 500 13px var(--mono); color: var(--cyan-text); letter-spacing: .14em; }
.shot-frame { border: 1px solid rgba(139,132,255,.4); border-radius: 14px; overflow: hidden; line-height: 0; background: var(--bg1); padding: 10px; box-shadow: 0 24px 60px rgba(0,0,0,.55); }
.shot-frame img { width: 100%; display: block; border-radius: 8px; }
.shots figcaption { font: 400 17px/1.55 var(--sans); color: var(--tx2); max-width: 900px; text-wrap: pretty; border-left: 2px solid rgba(139,132,255,.35); padding-left: 16px; }

/* Section 5 */
.capabilities { padding-top: 104px; }
.capabilities h2 { margin-bottom: 30px; }
.capability-list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 48px; font: 400 17px/1.55 var(--sans); color: var(--tx); }
.capability-list li { display: flex; gap: 14px; }
.capability-list li::before { content: '\2014'; color: var(--violet-text); flex: none; }
/* Section 6 */
#development h2 { margin-bottom: 14px; }
.development-intro { margin-bottom: 36px; font: 400 17px/1.6 var(--sans); color: var(--tx2); text-wrap: pretty; }
.milestones { border-top: 1px solid rgba(139,132,255,.14); }
.milestone { display: grid; grid-template-columns: 190px 1fr; gap: 24px; padding: 16px 0; border-bottom: 1px solid rgba(139,132,255,.08); }
.milestone:last-child { border-bottom-color: rgba(139,132,255,.14); }
.when { font: 400 14px var(--mono); color: var(--tx2); padding-top: 3px; }
.is-open .when { color: var(--cyan-text); }
.what { font: 500 17px/1.45 var(--sans); color: var(--tx); }
.ref { font: 400 14px var(--mono); color: var(--tx3); }
.gloss { font: 400 14.5px/1.5 var(--sans); color: var(--tx2); margin-top: 4px; }
/* Section 7 */
.privacy { padding: var(--gap) var(--pad) 0; max-width: 640px; box-sizing: content-box; display: flex; flex-direction: column; gap: 8px; font: 400 13.5px/1.55 var(--sans); color: var(--tx3); }
.privacy strong { font-weight: 600; color: var(--tx2); }
.privacy a { color: var(--tx2); text-decoration: underline; text-underline-offset: 2px; }
.privacy a:hover { color: var(--tx); }

/* Section 8 */
.foot { margin-top: var(--gap); border-top: 1px solid var(--line); padding: 40px var(--pad) 48px; display: flex; flex-direction: column; gap: 6px; font: 400 15px var(--sans); color: var(--tx2); }
.foot .dim { font-size: 14px; color: var(--tx3); }
.foot a { color: inherit; }
.foot a:hover { color: var(--tx); }

/* Single column: the rail becomes a card between the offer and pricing. */
@media (max-width: 1099px) {
  .offer { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "rail" "pricing"; }
  .hero { padding-top: clamp(32px, 4.4vw, 64px); }
  .terms { margin-bottom: 24px; }
  .rail { margin: 0 var(--pad); border: 1px solid var(--line2); border-radius: 24px; padding: 24px 22px; }
  .maker-phone { display: block; margin: 20px 0 0; text-align: center; font-size: 13px; }
  .pricing { padding-top: var(--gap); padding-bottom: 0; }
}

/* Phone: the 390 rendering. */
@media (max-width: 719px) {
  h2 { font-size: 28px; }
  .top { height: 56px; padding: 0 20px; }
  .brand { gap: 10px; }
  .mark { width: 24px; height: 24px; }
  .brand-name { font-size: 17px; }
  h1 { margin-bottom: 16px; }
  .lede { margin-bottom: 24px; font-size: 16px; line-height: 1.6; }
  .demo { display: none; }
  .terms { padding-top: 20px; }
  .price { font-size: 16px; }
  .price strong { font-size: 22px; }
  .audience { font-size: 16px; margin-top: 8px; }
  .request { gap: 13px; }
  .field-head label { font-size: 14px; }
  .tag { font-size: 10.5px; }
  .request input { height: 48px; border-radius: 24px; }
  .btn-primary { height: 52px; border-radius: 26px; font-size: 16px; margin-top: 2px; }
  .fine { font-size: 13px; }
  .plan { padding: 26px 22px; }
  .shots { padding-top: 56px; padding-bottom: 64px; }
  .shots-list { gap: 40px; }
  .capabilities { padding-top: var(--gap); }
  .capability-list { grid-template-columns: 1fr; }
  .milestone { grid-template-columns: 1fr; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .aurora, .caret, .gate-node { animation: none; }
}