:root {
  --void: #06020e;
  --surface: #110b22;
  --accent: #a78bfa;
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
  --muted: #afa4c1;
  --text: #d8cfe7;
  --bright: #f5f0ff;
}

body { overflow-wrap: break-word; }
a, button { -webkit-tap-highlight-color: transparent; }
button { font-family: inherit; }
button, a { touch-action: manipulation; }
:focus-visible { outline: 2px solid #c4b5fd; outline-offset: 5px; }
.skip-link { position: fixed; top: 10px; left: 16px; transform: translateY(-200%); z-index: 20; background: #ede8f7; color: #110b22; padding: 10px 16px; border-radius: 8px; }
.skip-link:focus { transform: none; }
.container, .nav-inner { max-width: 1220px; }
.nav-inner { height: 72px; }
nav { background: rgba(6,2,14,.95); border-bottom-color: rgba(167,139,250,.15); }
.nav-logo { margin-right: 28px; display: flex; align-items: center; }
.nav-logo img { width: 100px; height: auto; }
.nav-tab { padding: 0 13px; font-size: .82rem; }
.nav-cta { color: #ddd3f8; border-color: rgba(167,139,250,.27); }
.nav-download { background: #d1bffa; color: #190d32; font-weight: 700; }
.nav-download:hover { background: #e2d5ff; }
.tab-content { padding-top: 72px; }
.neural-canvas { opacity: .14; }
.reveal { opacity: 1; transform: none; }
.section-desc { color: var(--text); }
.section-tag { font-size: .7rem; letter-spacing: .16em; }
.tab-content:not(#tab-home) > .section:first-child { position: relative; isolation: isolate; }
.tab-content:not(#tab-home) > .section:first-child::before { content: ''; position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: 520px; background: linear-gradient(90deg,#06020e,rgba(6,2,14,.78) 50%,rgba(6,2,14,.5)),linear-gradient(0deg,#06020e,transparent 80%),url('assets/sage-neural-hero.jpg') center 48% / cover; pointer-events: none; }
.brand-tab-intro { text-align: left !important; max-width: 850px; padding: 8px 0 28px; margin-bottom: 30px; }
.brand-tab-intro h2 { font-size: clamp(2.3rem,4.4vw,3.8rem); font-weight: 600; letter-spacing: -.04em; }
.brand-tab-intro .section-desc { margin: 0 !important; max-width: 650px; font-size: 1rem; line-height: 1.8; }
.feature-card, .step-card, .paper, .faq-item, .migrate-card, .privacy-point { border-color: rgba(167,139,250,.18); background: rgba(17,11,34,.55); border-radius: 12px; }
.feature-card p, .step-card p, .paper-info p, .migrate-card p, .privacy-point p { color: #bdb0d0; line-height: 1.75; }
.feature-icon.pink, .feature-icon.gold { background: rgba(167,139,250,.12); }
.info-note { border-color: rgba(167,139,250,.2); background: rgba(167,139,250,.045); }
.info-note strong { color: #c4b5fd; }
.brand-release-notes { margin: 0; padding: 20px 24px; border-radius: 12px; border-color: rgba(167,139,250,.2); background: rgba(17,11,34,.55); }
.brand-release-notes summary { font-size: .9rem; color: #d8cbea; cursor: pointer; }
.brand-release-notes summary::marker { color: #c4b5fd; }
.release-notes-body { margin-top: 24px; }
#tab-features .features-grid { margin-top: 28px; }

.brand-hero { position: relative; isolation: isolate; padding: 88px 0 0; overflow: hidden; background: #06020e; }
.brand-hero-art { position: absolute; inset: 0; width: 100%; height: 720px; object-fit: cover; object-position: center; z-index: -3; }
.brand-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,rgba(6,2,14,.38),rgba(6,2,14,.58) 30%,rgba(6,2,14,.3) 48%,transparent 65%),linear-gradient(0deg,#06020e,transparent 35%); pointer-events: none; }
.brand-hero::after { content: ''; position: absolute; top: 0; left: 0; width: min(70%,1400px); height: 720px; z-index: -2; background: url('assets/sage-hero-trails.svg') left center / 100% 100% no-repeat; pointer-events: none; }
.brand-hero-copy { max-width: 620px; padding-bottom: 74px; }
.brand-eyebrow { color: #b4a0d9; letter-spacing: .15em; text-transform: uppercase; font-size: .68rem; margin-bottom: 23px; }
.brand-wordmark { display: block; width: 420px; max-width: 87%; height: auto; margin-bottom: 32px; filter: drop-shadow(0 0 22px rgba(167,139,250,.12)); }
.brand-hero h1 { max-width: 620px; font-size: clamp(2.2rem,3.7vw,3.2rem); line-height: 1.1; font-weight: 600; letter-spacing: -.04em; margin: 0 0 22px; animation: none; }
.brand-hero h1 em { font-style: normal; color: #c4b5fd; background: none; -webkit-text-fill-color: currentColor; }
.brand-description { max-width: 540px; font-size: 1.08rem; line-height: 1.7; color: #d2c8e3; }
.brand-compatibility { margin-top: 22px; font-size: .8rem; color: #b6a5ce; }
.brand-hero .hero-actions { margin-top: 30px; animation: none; }
.btn-primary { background: #c4b5fd; color: #180d2a; font-weight: 700; border: 1px solid #c4b5fd; box-shadow: 0 8px 30px rgba(167,139,250,.13); border-radius: 8px; }
.btn-primary:hover { background: #d9ceff; transform: translateY(-2px); box-shadow: 0 8px 36px rgba(167,139,250,.21); }
.btn-secondary { color: #e6dcf9; background: rgba(21,12,38,.5); border-color: rgba(196,181,253,.34); border-radius: 8px; }
.brand-free { font-size: .78rem; color: #b6a7ce; margin-top: 16px; }
.brand-assurance { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; border-top: 1px solid rgba(167,139,250,.18); padding: 24px 0; }
.brand-assurance span { color: #d9cfec; font-size: .83rem; display: flex; align-items: center; gap: 9px; }
.brand-assurance span::before { content: ''; width: 5px; height: 5px; background: #b5a0ee; border-radius: 50%; box-shadow: 0 0 10px rgba(167,139,250,.4); }
.brand-assurance a { margin-left: auto; color: #bba6ed; font-size: .8rem; text-decoration: none; }
.brand-release { border-top: 1px solid rgba(167,139,250,.08); padding: 15px 0 20px; display: flex; justify-content: space-between; gap: 10px 32px; flex-wrap: wrap; color: #a99abf; }
.brand-release .cta-meta { justify-content: flex-start; margin: 0; gap: 24px; }
.brand-release .cta-count { border: 0; padding: 0; color: #b7a9d0; background: none; font-size: .76rem; }
.brand-release .cta-count strong { font-size: inherit; }
.brand-release .cta-count > span { color: inherit; }
.brand-release .cta-version { font-size: .76rem; }
.brand-release .cta-fineprint { flex-basis: 100%; justify-content: flex-start; margin: 0; text-align: left; font-size: .65rem; color: #a99abf; }
.brand-release .download-badges { display: flex; gap: 17px; margin: 0; }
.brand-release .badge-link { border: 0; padding: 0; background: none; font-size: .76rem; color: #c2b4dc; }

.brand-section { padding: 100px 0; position: relative; }
.brand-section h2 { font-size: clamp(2rem,3.3vw,2.9rem); line-height: 1.16; font-weight: 600; letter-spacing: -.035em; }
.brand-section .section-desc { max-width: 650px; font-size: 1rem; line-height: 1.8; }
.brand-benefit-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 80px; align-items: center; }
.brand-benefits { margin-top: 26px; }
.brand-benefit { padding: 18px 0; border-top: 1px solid rgba(167,139,250,.13); }
.brand-benefit h3 { font-size: 1rem; color: var(--bright); font-weight: 600; margin-bottom: 5px; }
.brand-benefit p { color: #bdb0d0; font-size: .9rem; line-height: 1.7; }
.memory-example { background: linear-gradient(145deg,rgba(42,26,68,.46),rgba(15,8,27,.8)); border: 1px solid rgba(167,139,250,.23); border-radius: 16px; overflow: hidden; box-shadow: 0 18px 60px rgba(0,0,0,.22); }
.example-head { padding: 18px 24px; display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid rgba(167,139,250,.16); font-family: var(--font-mono); font-size: .68rem; color: #b5a3d3; }
.example-step { padding: 30px 26px; }
.example-step + .example-step { border-top: 1px solid rgba(167,139,250,.15); background: rgba(167,139,250,.04); }
.example-step small { display: block; font-family: var(--font-mono); font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 12px; color: #aa94cd; }
.example-step blockquote { color: #eee6fb; font-size: 1.08rem; line-height: 1.65; }
.example-step p { color: #b9accb; font-size: .84rem; line-height: 1.75; }
.example-step .example-arrow { display: inline-block; color: #c4b5fd; margin-right: 10px; }
.brand-comparison { border-top: 1px solid rgba(167,139,250,.12); border-bottom: 1px solid rgba(167,139,250,.12); background: linear-gradient(180deg,#0c0717,#080310); }
.comparison-intro { display: flex; justify-content: space-between; align-items: end; gap: 60px; margin-bottom: 38px; }
.comparison-intro > div { flex: 1; }
.comparison-intro .section-desc { max-width: 460px; }
.comparison-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.comparison-card { padding: 26px; border: 1px solid rgba(167,139,250,.16); border-radius: 12px; background: rgba(17,11,34,.5); }
.comparison-card:last-child { border-color: rgba(196,181,253,.43); background: rgba(85,53,135,.12); }
.comparison-card small { display: block; color: #aa99c6; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 13px; }
.comparison-card h3 { color: var(--bright); font-size: 1.35rem; font-weight: 600; margin-bottom: 12px; line-height: 1.3; }
.comparison-card p { font-size: .9rem; line-height: 1.75; color: #c0b2d2; }
.comparison-card a, .brand-source { display: inline-block; margin-top: 20px; font-size: .76rem; text-decoration: none; color: #c4b5fd; }
.comparison-details { margin-top: 28px; border-top: 1px solid rgba(167,139,250,.16); padding-top: 22px; }
.comparison-details summary { cursor: pointer; font-size: .86rem; color: #d4c7eb; }
.comparison-details p { font-size: .86rem; line-height: 1.8; color: #b9accb; max-width: 850px; margin-top: 14px; }
.comparison-details a { color: #c4b5fd; text-underline-offset: 3px; }
.brand-caveat { margin-top: 24px; font-size: .8rem; line-height: 1.75; color: #b5a5c9; max-width: 880px; }
.brand-dashboard { border-top: 1px solid rgba(167,139,250,.1); }
.dashboard-intro { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 30px; }
.dashboard-intro .section-desc { max-width: 430px; }
.dashboard-shot { border: 1px solid rgba(167,139,250,.25); border-radius: 12px; overflow: hidden; width: 100%; display: block; background: #0a0614; cursor: zoom-in; box-shadow: 0 20px 70px rgba(0,0,0,.3); }
.dashboard-shot img { display: block; width: 100%; height: auto; }
.dashboard-caption { margin-top: 12px; color: #ab9abf; font-size: .72rem; }
.brand-setup { padding-top: 80px; border-top: 1px solid rgba(167,139,250,.1); }
.setup-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 38px; margin-top: 34px; }
.setup-step { border-top: 1px solid rgba(167,139,250,.25); padding-top: 20px; }
.setup-number { font-family: var(--font-mono); color: #a98ae1; font-size: .75rem; }
.setup-step h3 { margin: 12px 0 8px; font-size: 1.15rem; color: var(--bright); font-weight: 600; }
.setup-step p { font-size: .9rem; color: #bfb1d1; line-height: 1.75; }
.setup-step a { color: #c4b5fd; text-underline-offset: 4px; }
.brand-fit { margin-top: 34px; padding: 20px 24px; border-left: 2px solid #9071ce; background: rgba(167,139,250,.04); border-radius: 0 8px 8px 0; font-size: .88rem; color: #c7b9da; line-height: 1.75; }
.start-paths { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; margin-top: 36px; }
.start-path { padding: 28px; border: 1px solid rgba(167,139,250,.23); border-radius: 12px; background: linear-gradient(145deg,rgba(42,26,68,.38),rgba(15,8,27,.7)); }
.start-path h3 { font-size: 1.4rem; color: var(--bright); font-weight: 600; margin: 10px 0; }
.start-path p { color: #bfb1d1; font-size: .92rem; line-height: 1.75; max-width: 440px; }
.start-path .btn-secondary { display: inline-flex; padding: 12px 18px; margin-top: 22px; font-size: .85rem; text-decoration: none; }
.developer-intro-actions, .developer-reference-links { display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: center; margin-top: 26px; }
.developer-intro-actions .btn-primary { display: inline-flex; padding: 13px 20px; text-decoration: none; font-size: .86rem; }
.developer-intro-actions > a:not(.btn-primary), .developer-reference-links a { color: #c4b5fd; font-size: .83rem; text-underline-offset: 4px; }
.developer-start h2, .developer-paths > div > h2, .python-quickstart > h2 { font-size: clamp(1.6rem,2.8vw,2rem); color: var(--bright); font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.developer-start .setup-grid { margin-top: 24px; }
.developer-start .setup-step, .developer-path-grid .value-card { min-width: 0; }
.developer-start .setup-step h3 { font-size: 1.15rem; letter-spacing: normal; }
.developer-start .brand-source { margin-top: 16px; }
.developer-paths, .python-quickstart { margin-top: 64px; scroll-margin-top: 100px; }
.developer-path-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin-top: 26px; }
.developer-path-grid .value-card { display: flex; flex-direction: column; border-color: rgba(167,139,250,.23); background: rgba(17,11,34,.55); }
.developer-path-grid .value-card .brand-source { align-self: flex-start; margin-top: auto; padding-top: 22px; }
.python-quickstart { max-width: 900px; }
.python-quickstart .section-desc { font-size: .95rem; line-height: 1.8; margin: 16px 0 24px; }
.quickstart-code { min-width: 0; max-width: 100%; overflow-x: auto; white-space: pre; padding: 18px 22px; margin-top: 16px; border: 1px solid rgba(167,139,250,.23); border-radius: 10px; background: #0b0615; color: #ddd2ef; font-family: var(--font-mono); font-size: .78rem; line-height: 1.8; }
.quickstart-code code { font-family: inherit; white-space: pre; }
.developer-start .quickstart-code { font-size: .64rem; padding: 12px; }
.quickstart-code-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 24px; padding: 12px 20px; border: 1px solid rgba(167,139,250,.23); border-radius: 10px 10px 0 0; background: #171025; color: #bca9d5; font-family: var(--font-mono); font-size: .7rem; }
.quickstart-copy { background: #2d1c46; color: #e6dcf9; border: 1px solid rgba(167,139,250,.3); border-radius: 6px; font-size: .72rem; padding: 7px 12px; cursor: pointer; }
.quickstart-python { margin-top: 0; border-top: 0; border-radius: 0 0 10px 10px; }
.quickstart-note { color: #b6a5ca; font-size: .79rem !important; line-height: 1.8; margin-top: 15px; }
.quickstart-next { margin-top: 28px; padding: 24px; border-left: 2px solid #9071ce; background: rgba(167,139,250,.04); border-radius: 0 8px 8px 0; }
.quickstart-next h3 { color: var(--bright); font-weight: 600; font-size: 1rem; }
.quickstart-next p, .developer-source p { font-size: .9rem; color: #bfb1d1; line-height: 1.8; margin-top: 12px; }
.developer-source { margin-top: 32px; padding: 20px 24px; border: 1px solid rgba(167,139,250,.2); border-radius: 10px; }
.developer-source summary { color: #d8cbea; cursor: pointer; font-size: .9rem; }
.brand-trust { background: #0b0615; border-block: 1px solid rgba(167,139,250,.14); }
.trust-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; }
.trust-points { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 36px; }
.trust-point { border-top: 1px solid rgba(167,139,250,.22); padding-top: 18px; }
.trust-point h3 { color: var(--bright); font-size: .98rem; font-weight: 600; margin-bottom: 10px; }
.trust-point p { color: #bdaece; font-size: .86rem; line-height: 1.75; }
.trust-point a { display: inline-block; color: #c4b5fd; margin-top: 14px; font-size: .77rem; text-underline-offset: 4px; }
.trust-limits { margin-top: 32px; font-size: .78rem; line-height: 1.8; color: #b4a3c9; }
.brand-final { text-align: center; padding: 100px 0; background: radial-gradient(ellipse at 50% 100%,rgba(124,58,237,.12),transparent 70%); }
.brand-final h2 { font-weight: 600; }
.brand-final p { max-width: 540px; margin: 16px auto 28px; color: #beafd1; font-size: 1rem; }
.brand-final .hero-actions { justify-content: center; animation: none; }
.brand-final small { display: block; margin-top: 20px; color: #b2a0c8; }
footer { padding: 34px 0; }
footer p { color: #af9dc7; }
footer .brand-footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 22px; margin-bottom: 22px; font-size: .78rem; }

@media (max-width: 1050px) {
  .brand-hero::after { display: none; }
  .nav-tab { padding: 0 8px; }
  .nav-download { display: none; }
  .brand-hero-art { height: 670px; object-position: 55% center; }
  .brand-hero-copy { max-width: 530px; }
  .brand-description { max-width: 450px; }
  .brand-benefit-layout, .trust-layout { gap: 45px; }
  .comparison-intro { gap: 30px; }
}
@media (max-width: 900px) {
  .nav-hamburger { display: flex; }
  .nav-tabs { position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; height: auto; gap: 0; background: rgba(6,2,14,.98); border-bottom: 1px solid rgba(167,139,250,.12); max-height: 0; overflow: hidden; transition: max-height .3s ease; }
  .nav-tabs.open { max-height: calc(100vh - 72px); overflow-y: auto; }
  .nav-tab { width: 100%; height: auto; padding: 14px 24px; font-size: 1rem; justify-content: flex-start; border-bottom: 1px solid rgba(167,139,250,.06); }
  .nav-tab.active { border-bottom-color: rgba(167,139,250,.06); border-left: 3px solid var(--accent); padding-left: 21px; background: rgba(124,58,237,.08); }
}
@media (max-width: 768px) {
  .nav-inner { height: 64px; }
  .tab-content { padding-top: 64px; }
  .nav-tabs { top: 64px; }
  .nav-cta { font-size: .76rem; padding: 7px 12px; }
  .nav-tab { padding: 14px 24px; font-size: 1rem; }
  .brand-hero { padding-top: 44px; }
  .brand-hero-art { height: 610px; object-fit: cover; object-position: 67% center; opacity: .52; }
  .brand-hero::before { background: linear-gradient(90deg,rgba(6,2,14,.87),rgba(6,2,14,.3)),linear-gradient(0deg,#06020e,transparent 65%); }
  .brand-hero-copy { padding-bottom: 44px; }
  .brand-eyebrow { font-size: .56rem; letter-spacing: .11em; }
  .brand-wordmark { width: 295px; margin-bottom: 27px; }
  .brand-hero h1 { max-width: 410px; font-size: clamp(2rem,7vw,2.65rem); }
  .brand-description { font-size: 1rem; max-width: 460px; }
  .brand-hero .hero-actions { flex-direction: row; align-items: stretch; gap: 12px; }
  .brand-hero .hero-actions > * { justify-content: center; padding: 13px 20px; font-size: .86rem; }
  .brand-compatibility { font-size: .72rem; }
  .brand-assurance { gap: 12px 22px; padding: 20px 0; }
  .brand-assurance span { font-size: .72rem; }
  .brand-assurance a { margin-left: 0; font-size: .72rem; }
  .brand-release { gap: 12px; }
  .brand-release .cta-meta { gap: 12px; }
  .brand-release .cta-fineprint-sep { display: none; }
  .brand-section { padding: 62px 0; }
  .brand-benefit-layout, .trust-layout { grid-template-columns: 1fr; gap: 35px; }
  .comparison-intro, .dashboard-intro { display: block; }
  .comparison-intro .section-desc, .dashboard-intro .section-desc { margin-top: 16px; }
  .comparison-grid { grid-template-columns: 1fr; }
  .comparison-card { padding: 23px; }
  .setup-grid { grid-template-columns: 1fr; gap: 26px; }
  .start-paths, .developer-path-grid { grid-template-columns: 1fr; }
  .developer-start .quickstart-code { font-size: .76rem; }
  .quickstart-code { font-size: .7rem; padding-inline: 16px; }
  .developer-intro-actions { gap: 20px; }
  .trust-points { gap: 24px; }
  .brand-final { padding: 64px 0; }
}
@media (max-width: 400px) {
  .brand-hero .hero-actions { flex-direction: column; align-items: stretch; }
  .trust-points { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .neural-canvas { display: none; }
}