/* Sufi Platform — Persian Futurism. Palette: alijsh/persian-colors.
   Layout, illustration, product previews, and responsive rules each have one owner. */
@font-face {
  font-family: "Sufi Display";
  src: url("./fonts/Vazir-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sufi Display";
  src: url("./fonts/Vazir-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --persian-blue-strong: #0067A5;
  --persian-blue-pale: #91A3B0;
  --persian-blue-vivid-pale: #BCD4E6;
  --persian-blue-vivid: #1C39BB;
  --persian-blue-grayish-purplish: #4C516D;
  --persian-blue-vivid-purplish: #32127A;
  --persian-brown-strong-reddish: #882D17;
  --persian-green-grayish: #5E716A;
  --persian-green-dark-grayish: #3A4B47;
  --persian-green-brilliant-bluish: #00A693;
  --persian-green-moderate-bluish: #317873;
  --persian-orange-moderate-reddish: #CB6D51;
  --persian-orange-grayish-reddish: #B4745E;
  --persian-orange-vivid-reddish: #E25822;
  --persian-orange-moderate: #D99058;
  --persian-orange-vivid: #F38400;
  --persian-pink-deep-purplish: #F77FBE;
  --persian-pink-moderate-purplish: #D597AE;
  --persian-pink-dark-purplish: #C17E91;
  --persian-purple-vivid-reddish: #870074;
  --persian-red-vivid-purplish-bright: #FE28A2;
  --persian-red-strong-purplish: #B3446C;
  --persian-red-vivid-purplish: #CE4676;
  --persian-red-moderate-purplish: #A8516E;
  --persian-red-vivid: #CC3333;
  color-scheme: dark;
  --canvas: #090f1b;
  --canvas-elevated: #101a29;
  --surface: #152131;
  --surface-bright: #1d3040;
  --ivory: #edf3f6;
  --text: #dce5eb;
  --muted: var(--persian-blue-vivid-pale);
  --dim: var(--persian-blue-pale);
  --line: rgb(188 212 230 / 15%);
  --line-bright: rgb(188 212 230 / 30%);
  --cyan: var(--persian-green-brilliant-bluish);
  --cyan-dark: var(--persian-green-moderate-bluish);
  --violet: var(--persian-blue-vivid);
  --violet-light: var(--persian-blue-vivid-pale);
  --amber: var(--persian-orange-moderate);
  --emerald: var(--persian-green-brilliant-bluish);
  --danger: var(--persian-red-vivid);
  --font-display: "Sufi Display", "Segoe UI", Tahoma, sans-serif;
  --font-body: "Segoe UI", "Sufi Display", Tahoma, sans-serif;
  --font-mono: "Cascadia Code", Consolas, monospace;
  --shell: 1328px;
  --radius-lg: 22px;
  --radius-md: 14px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; background: var(--canvas); }
body { margin: 0; min-width: 320px; color: var(--text); font: 16px/1.7 var(--font-body); }
button, select { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button, select { color: inherit; }
button, a { touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
button, select, a[href] { cursor: pointer; }
img, svg { max-width: 100%; }
svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
p, h1, h2, h3, figure { margin: 0; }
h1, h2, h3 { color: var(--ivory); font-family: var(--font-display); text-wrap: balance; }
::selection { background: var(--persian-green-moderate-bluish); color: white; }
:focus-visible { outline: 2px solid var(--persian-blue-vivid-pale); outline-offset: 5px; }
[dir="rtl"] body { font-family: var(--font-display); line-height: 1.9; }
[dir="rtl"] :is(h1,h2,h3) { letter-spacing: 0; }
[dir="rtl"] :is(p,li,small) { unicode-bidi: plaintext; }
.shell { width: min(var(--shell), calc(100% - 96px)); margin-inline: auto; }
.sr-only, .icon-sprite { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: 12px; inset-inline-start: 16px; padding: 12px 20px; border-radius: 8px; background: var(--ivory); color: var(--canvas); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.global-atmosphere { position: absolute; inset: 0 0 auto; height: 1100px; overflow: hidden; pointer-events: none; z-index: -1; background: radial-gradient(ellipse at 85% 28%, rgb(0 103 165 / 13%), transparent 54%), radial-gradient(ellipse at 4% 30%, rgb(50 18 122 / 12%), transparent 50%); }
.atmosphere-grid { position: absolute; inset: 0; opacity: .23; background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 112px 100%; mask-image: linear-gradient(#000, transparent); }
.atmosphere-light { display: none; }

/* Navigation */
.site-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--line); background: rgb(9 15 27 / 96%); }
.header-inner { min-height: 86px; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand-symbol { display: grid; place-items: center; width: 42px; height: 46px; border: 1px solid var(--line-bright); border-radius: 12px 3px; background: var(--surface); }
.brand-symbol img { width: 32px; height: 32px; }
.brand-copy { display: grid; line-height: 1.4; }
.brand-copy strong { font-family: var(--font-display); font-size: 16px; }
.brand-copy small { font-size: 10px; margin-top: 4px; color: var(--dim); }
.primary-nav { display: flex; align-items: center; gap: 24px; margin-inline: auto; }
.primary-nav a { position: relative; padding-block: 15px; color: var(--dim); font-size: 13px; font-weight: 600; white-space: nowrap; transition: color .2s; }
.primary-nav a::after { content: ""; position: absolute; bottom: 7px; inset-inline: 0; height: 2px; background: var(--cyan); transform: scaleX(0); transition: transform .2s; }
.primary-nav a:is(:hover,:focus-visible,.is-active) { color: var(--ivory); }
.primary-nav a.is-active::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.language-picker select { max-width: 112px; min-height: 42px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--canvas-elevated); font-size: 13px; }
.text-action { display: inline-flex; gap: 10px; align-items: center; font-size: 13px; font-weight: 600; min-height: 44px; }
.text-action svg, .signal-button svg { width: 19px; height: 19px; flex-shrink: 0; }
[dir="rtl"] .text-action svg, [dir="rtl"] .signal-button svg:not(:has(use)) { transform: scaleX(-1); }
.nav-toggle { display: none; width: 44px; height: 44px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.nav-toggle svg { display: block; width: 22px; height: 22px; }

/* Opening view */
.scene { position: relative; padding-block: 100px; }
.hero-scene { padding-block: 64px 82px; }
.hero-layout { display: grid; grid-template-columns: minmax(0,.83fr) minmax(0,1.17fr); gap: 48px; align-items: center; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding-block: 12px; }
.alpha-signal { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px; margin: 0 0 8px; border: 1px solid rgb(0 166 147 / 30%); border-radius: 5px; color: var(--persian-blue-vivid-pale); font-size: 11px; letter-spacing: .02em; background: rgb(0 166 147 / 6%); }
.alpha-signal i, .product-live-signal i, .values-launch-status i { width: 6px; height: 6px; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 0 4px rgb(0 166 147 / 10%); flex-shrink: 0; }
.hero-copy h1 { margin: 16px 0 0; font-size: clamp(34px, 3.2vw, 50px); line-height: 1.32; letter-spacing: -.018em; font-weight: 600; max-width: min(22ch, 100%); text-wrap: pretty; }
.hero-copy h1 em { font-style: normal; font-weight: 800; color: var(--ivory); box-decoration-break: clone; -webkit-box-decoration-break: clone; background-image: linear-gradient(transparent 72%, rgb(0 166 147 / 42%) 72%); padding-inline: .06em; }
.hero-lead { max-width: 46ch; margin-top: 22px; color: var(--muted); font-size: 17px; line-height: 1.9; }
.hero-note { margin-top: 18px; padding-inline-start: 16px; border-inline-start: 2px solid var(--amber); color: var(--dim); font-size: 13px; line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.signal-button { display: inline-flex; justify-content: center; align-items: center; gap: 12px; min-height: 47px; padding: 11px 16px; border: 1px solid var(--line-bright); border-radius: 7px; color: var(--text); font-size: 12px; font-weight: 600; transition: background .2s, border-color .2s, transform .2s; }
.signal-button-primary { background: var(--persian-green-brilliant-bluish); border-color: var(--cyan); color: #07151a; }
.signal-button-ghost { background: rgb(188 212 230 / 3%); }
.signal-button:hover { transform: translateY(-2px); border-color: var(--muted); background: var(--surface-bright); }
.signal-button-primary:hover { color: var(--canvas); background: var(--persian-blue-vivid-pale); }
.hero-horizon { position: absolute; inset-inline: 48px; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line-bright), transparent); }
.scroll-cue { position: absolute; left: 50%; bottom: 16px; width: 28px; height: 34px; display: grid; place-items: center; }
.scroll-cue span { width: 7px; height: 7px; border-bottom: 1px solid var(--amber); border-right: 1px solid var(--amber); transform: rotate(45deg); }
[dir="rtl"] .hero-copy h1 { max-width: min(28ch, 100%); font-size: clamp(30px, 3vw, 42px); line-height: 1.78; letter-spacing: 0; word-spacing: .14em; }
[dir="rtl"] .hero-lead { line-height: 2.05; word-spacing: .06em; }

/* A custom dimensional pavilion. Text remains in the untransformed DOM. */
.architecture-stage { min-width: 0; }
.architecture-frame { position: relative; border: 1px solid rgb(188 212 230 / 22%); border-radius: 22px; background: linear-gradient(150deg, rgb(28 57 187 / 6%), transparent 38%), var(--canvas-elevated); box-shadow: 0 30px 90px rgb(0 0 0 / 20%), inset 0 1px 0 rgb(188 212 230 / 8%); isolation: isolate; }
.architecture-frame::before, .architecture-frame::after { content: ""; position: absolute; width: 46px; height: 46px; border: 1px solid var(--amber); opacity: .55; pointer-events: none; }
.architecture-frame::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; border-radius: 12px 0 0; }
.architecture-frame::after { top: 12px; right: 12px; border-left: 0; border-bottom: 0; border-radius: 0 12px 0 0; }
.pavilion-art { height: 305px; padding: 6px 0 0; overflow: hidden; border-radius: 22px 22px 0 0; background: radial-gradient(ellipse at 50% 42%, rgb(0 103 165 / 14%), transparent 68%); perspective: 900px; }
.pavilion-model { width: 100%; height: 100%; overflow: visible; transform: rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition: transform .35s var(--ease-out); transform-origin: center 70%; }
.pavilion-shadow { fill: #050b12; stroke: none; opacity: .6; }
.pavilion-model > ellipse { stroke: none; }
.pavilion-drafting { stroke: var(--persian-blue-pale); stroke-width: .7; opacity: .19; }
.pavilion-base { fill: #182737; stroke: var(--persian-orange-moderate); stroke-width: .8; }
.pavilion-side { fill: #0d1b2c; stroke: #3A4B47; stroke-width: .8; }
.pavilion-top { fill: url(#pavilion-surface); stroke: var(--persian-green-brilliant-bluish); stroke-width: 1; }
.pavilion-crown { fill: url(#pavilion-ceramic); stroke: var(--persian-blue-vivid-pale); stroke-width: .8; }
.pavilion-module { fill: var(--persian-green-moderate-bluish); stroke: var(--persian-blue-vivid-pale); stroke-width: .8; }
.pavilion-inlay { stroke: var(--persian-orange-moderate); stroke-width: .7; opacity: .8; fill: none; }
.pavilion-terminal { fill: var(--persian-orange-moderate); stroke: none; }
.link-line { stroke: var(--persian-blue-vivid-pale); stroke-width: 1; opacity: .33; transition: opacity .2s, stroke .2s; }
.link-line.is-active { opacity: 1; stroke: var(--persian-orange-moderate); stroke-width: 3; }
.architecture-core { position: absolute; top: 29px; left: 50%; transform: translateX(-50%); display: grid; justify-items: center; width: 200px; gap: 2px; text-align: center; pointer-events: none; }
.architecture-core img { width: 58px; height: 58px; filter: drop-shadow(0 8px 13px rgb(0 0 0 / 30%)); }
.architecture-core strong { font-family: var(--font-display); font-size: 15px; color: var(--ivory); }
.architecture-core small { color: var(--muted); font-size: 10px; }
.architecture-catalog { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 22px; padding: 4px 26px 26px; }
.architecture-family { min-width: 0; }
.architecture-group-label { margin-bottom: 7px; display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: 10px; letter-spacing: .03em; }
.architecture-group-label::before { content: ""; width: 5px; height: 5px; background: var(--amber); transform: rotate(45deg); flex-shrink: 0; }
.architecture-family-links { display: grid; gap: 4px; }
.architecture-node { --node-accent: 0 166 147; position: relative; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px 10px; min-height: 36px; border: 1px solid transparent; border-radius: 6px; background: rgb(188 212 230 / 3%); transition: background .2s, border-color .2s; }
.architecture-node::after { content: "↗"; margin-inline-start: auto; color: var(--dim); font-size: 12px; }
.architecture-node:is(:hover,:focus-visible,.is-active,.is-touch-active) { background: rgb(0 166 147 / 10%); border-color: rgb(0 166 147 / 35%); z-index: 5; }
.architecture-node-icon { display: grid; place-items: center; color: var(--persian-blue-vivid-pale); width: 22px; height: 22px; flex-shrink: 0; }
.architecture-node-icon svg { display: block; width: 22px; height: 22px; stroke-width: 2; }
.architecture-node-label { color: var(--text); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.family-future .architecture-node-icon { color: var(--persian-orange-moderate); }
.family-services .architecture-node-icon { color: var(--persian-green-brilliant-bluish); }
.mobile-architecture-group { display: none; }
.architecture-popover { position: absolute; z-index: 20; inset-inline: 0; bottom: calc(100% + 8px); padding: 16px; border: 1px solid var(--line-bright); border-radius: 10px; background: #182939; box-shadow: 0 16px 36px rgb(0 0 0 / 45%); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(3px); transition: opacity .15s, transform .15s, visibility .15s; }
.architecture-popover strong { display: block; color: var(--ivory); font-size: 12px; }
.architecture-popover small { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.architecture-popover::after { content: ""; position: absolute; inset-inline: 0; bottom: -10px; height: 10px; }
.is-tooltip-below .architecture-popover { top: calc(100% + 8px); bottom: auto; }
.is-tooltip-below .architecture-popover::after { top: -10px; bottom: auto; }
.architecture-node:not(.is-tooltip-dismissed):is(:hover,:focus-visible,.is-touch-active) .architecture-popover { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }

/* Chapters and shared panel language */
.scene-heading { max-width: 760px; margin-bottom: 38px; }
.scene-heading h2 { font-size: clamp(28px,3vw,42px); line-height: 1.35; letter-spacing: -.025em; }
.scene-heading p { margin-top: 16px; color: var(--muted); font-size: 17px; line-height: 1.85; max-width: 67ch; }
.scene-heading::before { content: ""; display: block; width: 30px; height: 3px; margin-bottom: 20px; background: var(--amber); }
.product-scene { border-bottom: 1px solid var(--line); }
.foundation-scene { background: linear-gradient(180deg, rgb(188 212 230 / 2%), transparent); }
.foundation-chapters { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.product-chapter, .future-product-card { --product-accent: var(--persian-blue-vivid-pale); --product-rgb: 188 212 230; position: relative; min-width: 0; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--canvas-elevated); transition: border-color .2s, background .2s, box-shadow .2s; }
.product-chapter { display: flex; flex-direction: column; }
.product-chapter::before { content: ""; position: absolute; top: -1px; inset-inline: 26px; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--product-rgb) / 65%), transparent); }
.chapter-blazor, .chapter-com { --product-accent: var(--persian-blue-vivid-pale); --product-rgb: 188 212 230; }
.chapter-theme, .chapter-crm { --product-accent: var(--persian-pink-moderate-purplish); --product-rgb: 213 151 174; }
.chapter-core, .chapter-helpdesk { --product-accent: var(--persian-orange-moderate); --product-rgb: 217 144 88; }
.chapter-copilots, .chapter-forms { --product-accent: var(--persian-green-brilliant-bluish); --product-rgb: 0 166 147; }
.product-card-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.product-emblem { display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; color: var(--product-accent); border: 1px solid rgb(var(--product-rgb) / 28%); border-radius: 12px 3px; background: rgb(var(--product-rgb) / 7%); }
.product-logo { width: 29px; height: 29px; stroke-width: 1.35; }
.logo-node { fill: var(--product-accent); stroke-width: .5; }
.product-live-signal { display: inline-flex; align-items: center; gap: 9px; color: var(--dim); font-size: 10px; text-align: end; }
.product-live-signal b { font-weight: 400; }
.product-content { min-width: 0; }
.product-content h3 { font-size: 23px; line-height: 1.4; font-weight: 700; text-wrap: balance; }
.product-content p { margin-top: 12px; color: var(--muted); font-size: 15px; line-height: 1.85; }
.product-status { display: inline-block; margin-bottom: 9px; color: var(--dim); font-size: 11px; }
.product-links { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 24px; margin-top: auto; }
.product-links span { font-size: 10px; color: var(--dim); border: 1px solid var(--line); border-radius: 4px; padding: 3px 7px; }
.repository-link { margin-top: 24px; padding-top: 18px; display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); }
.repository-mark { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.repository-link span { display: grid; font-size: 12px; }
.repository-link small { font-size: 10px; color: var(--dim); }
.repository-link b { font-weight: 500; }
.repository-arrow { width: 16px; height: 16px; margin-inline-start: auto; color: var(--dim); }
.repository-link:hover { color: var(--amber); }
.product-chapters { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.product-chapters .chapter-copilots { grid-column: 1/-1; }
.product-chapters .product-chapter { cursor: pointer; }
.product-chapters .product-chapter:is(:hover,.is-active) { border-color: rgb(var(--product-rgb) / 60%); background: #132331; box-shadow: 0 14px 36px rgb(0 0 0 / 12%); }
.copilot-card-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr); align-items: center; gap: 42px; }
.copilot-card-body .product-content { grid-column: 1; grid-row: 1; }
.copilot-card-body .product-visual { grid-column: 2; grid-row: 1; margin: 0; }
.copilot-card-body .product-content h3 { font-size: 34px; }

/* Existing illustrative previews, with consistent surfaces and legible type. */
.product-visual { position: relative; display: flex; flex-direction: column; min-height: 236px; margin-bottom: 26px; padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: #0b1522; box-shadow: inset 0 1px 0 rgb(188 212 230 / 5%); font-size: 12px; }
.product-preview-bar, .copilot-chat-bar { display: flex; gap: 8px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.product-preview-bar i, .copilot-chat-bar > i { width: 6px; height: 6px; border-radius: 50%; background: var(--product-accent); }
.product-preview-bar b, .copilot-chat-bar b { margin-inline-start: auto; font-size: 9px; font-weight: 400; color: var(--dim); }
.product-preview-tools, .copilot-chat-tools { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 14px; margin-top: auto; }
.product-preview-tools span, .copilot-chat-tools span { padding: 3px 7px; font-size: 9px; color: var(--dim); border: 1px solid var(--line); border-radius: 4px; }
.copilot-chat-stream, .com-thread { display: grid; gap: 10px; padding-block: 16px 2px; }
.copilot-chat-user, .com-bubble-in { justify-self: end; max-width: 85%; padding: 10px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px 9px 2px 9px; color: var(--muted); }
.copilot-chat-ai, .com-bubble-out { justify-self: start; max-width: 90%; display: grid; gap: 7px; padding: 10px 13px; border: 1px solid rgb(var(--product-rgb) / 25%); background: rgb(var(--product-rgb) / 7%); border-radius: 9px 9px 9px 2px; }
.copilot-chat-typing { display: inline-flex; gap: 3px; }
.copilot-chat-typing i { width: 3px; height: 3px; border-radius: 50%; background: var(--cyan); }
.helpdesk-ticket { margin-top: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--canvas-elevated); }
.helpdesk-ticket-meta, .helpdesk-ticket-footer { display: flex; gap: 8px; justify-content: space-between; color: var(--dim); font-size: 10px; }
.helpdesk-ticket-meta em { color: var(--persian-orange-moderate); font-style: normal; }
.helpdesk-ticket > p { margin-block: 8px; color: var(--text); }
.helpdesk-ticket-footer b { color: var(--persian-orange-moderate); font-weight: 400; }
.helpdesk-sla-track { height: 3px; margin-top: 12px; border-radius: 3px; background: var(--surface-bright); }
.helpdesk-sla-track i { display: block; width: 72%; height: 100%; background: var(--persian-orange-moderate); }
.crm-profile { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding-block: 24px 10px; }
.crm-avatar { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid rgb(213 151 174 / 35%); border-radius: 50%; background: rgb(213 151 174 / 8%); color: var(--persian-pink-moderate-purplish); }
.crm-profile-copy { display: grid; gap: 2px; }
.crm-profile-copy strong { color: var(--text); font-size: 12px; }
.crm-profile-copy small { font-size: 10px; color: var(--dim); }
.crm-status { margin-inline-start: auto; display: grid; gap: 5px; font-size: 9px; color: var(--dim); }
.crm-status span { padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px; }
.crm-status .is-live { border-color: rgb(0 166 147 / 35%); color: var(--muted); }
.forms-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-block: 16px 2px; }
.forms-preview label { display: grid; gap: 6px; font-size: 10px; color: var(--dim); }
.forms-preview label i { display: block; height: 27px; border: 1px solid var(--line); border-radius: 4px; background: var(--canvas-elevated); }
.forms-submit { grid-column: 2; justify-self: end; padding: 5px 14px; border-radius: 4px; background: var(--persian-green-moderate-bluish); color: var(--ivory); font-size: 10px; }

/* Future products, roadmap, and the existing values narrative */
.future-product-scene { background: linear-gradient(180deg, rgb(50 18 122 / 6%), transparent); }
.future-horizon-signal { display: inline-block; margin-bottom: 12px; color: var(--persian-orange-moderate); font-size: 11px; }
.future-product-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.future-product-card { display: flex; flex-direction: column; padding: 24px; background: transparent; border-radius: 12px; }
.future-product-card .product-emblem { --product-accent: var(--persian-orange-moderate); --product-rgb: 217 144 88; margin-bottom: 24px; }
.future-product-card .product-content h3 { font-size: 19px; }
.future-product-card .product-content p { font-size: 14px; }
.horizon-scene { border-bottom: 1px solid var(--line); }
.development-horizon { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; }
.horizon-band { position: relative; padding-top: 28px; border-top: 1px solid var(--line-bright); }
.horizon-band::before { content: ""; position: absolute; inset-inline-start: 0; top: -5px; width: 9px; height: 9px; background: var(--canvas); border: 1px solid var(--amber); transform: rotate(45deg); }
.horizon-now::before { background: var(--cyan); border-color: var(--cyan); }
.horizon-depth { display: block; margin-bottom: 20px; color: var(--dim); font-size: 11px; }
.horizon-band b { color: var(--persian-orange-moderate); font-size: 12px; font-weight: 400; }
.horizon-now b { color: var(--muted); }
.horizon-band h3 { margin-top: 7px; font-size: 22px; }
.horizon-band ul { display: grid; gap: 12px; padding-inline-start: 18px; margin-top: 22px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.horizon-band li::marker { color: var(--persian-green-moderate-bluish); }
.invitation-scene { overflow: hidden; }
.invitation-atmosphere { pointer-events: none; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgb(0 166 147 / 5%), transparent 60%); z-index: -1; }
.invitation-layout { position: relative; }
.invitation-header { display: flex; align-items: center; gap: 24px; max-width: 800px; margin-bottom: 38px; }


.invitation-heading h2 { font-size: clamp(28px,3vw,42px); line-height: 1.5; letter-spacing: -.02em; }
.values-editorial { position: relative; border: 1px solid var(--line-bright); border-radius: 22px; background: linear-gradient(125deg, rgb(49 120 115 / 12%), transparent 55%), var(--canvas-elevated); overflow: hidden; }
.values-art { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.values-rosette { position: absolute; width: 480px; height: 480px; inset-inline-end: -190px; top: -175px; color: var(--persian-orange-moderate); opacity: .13; stroke-width: 1; }
.values-river { position: absolute; width: 100%; height: 200px; left: 0; bottom: 5%; color: var(--persian-green-brilliant-bluish); opacity: .08; stroke-width: 1; }
.values-main { position: relative; display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 54px; padding: 48px; }
.values-quotation { position: relative; align-self: center; }
.values-quotation figcaption { color: var(--dim); font-size: 13px; margin-bottom: 20px; }
.values-quotation blockquote { margin: 0; color: var(--persian-blue-vivid-pale); font-family: var(--font-display); font-size: 27px; line-height: 1.8; white-space: pre-line; }
.values-quotation-mark { display: block; margin-top: 20px; color: var(--persian-orange-moderate); font-size: 48px; line-height: 1; font-family: serif; }
.values-principles { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
.values-principle { display: grid; grid-template-columns: 22px 30px 1fr; align-items: start; gap: 12px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.values-principle:last-child { border: 0; padding-bottom: 0; }
.values-principle-index { color: var(--dim); font-size: 10px; padding-top: 5px; }
.values-principle svg { width: 27px; height: 27px; color: var(--persian-orange-moderate); }
.values-principle p { color: var(--muted); font-size: 14px; line-height: 1.9; }
.values-invitation { position: relative; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); background: rgb(9 15 27 / 45%); }
.values-launch, .values-access { padding: 34px 48px; }
.values-access { border-inline-start: 1px solid var(--line); }
.values-launch-status { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; font: 10px var(--font-mono); color: var(--dim); }
.values-invitation p { color: var(--muted); font-size: 14px; line-height: 1.85; }
.invitation-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.site-footer { border-top: 1px solid var(--line); padding-block: 34px; color: var(--dim); font-size: 12px; }
.footer-layout { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr) auto auto; gap: 20px 36px; align-items: start; }
.footer-layout strong { color: var(--text); font: 700 15px var(--font-display); }
.footer-layout div p { margin-top: 8px; }
.footer-layout > span { font-family: var(--font-mono); font-size: 10px; }
.footer-contact { display: grid; gap: 2px; }
.footer-contact strong { margin-bottom: 8px; }
.footer-contact a { display: inline-flex; align-items: center; gap: 10px; min-height: 38px; width: fit-content; border-radius: 3px; color: var(--muted); transition: color .2s; }
.footer-contact a:hover { color: var(--persian-orange-moderate); }
.footer-contact svg { flex-shrink: 0; color: var(--persian-orange-moderate); }
.footer-contact bdi { direction: ltr; font-family: var(--font-body); }
.origin-banner { position: relative; grid-column: 1/-1; justify-self: center; display: flex; align-items: center; justify-content: center; gap: 22px; width: min(440px,100%); margin-block: 12px 4px; padding: 12px 28px 12px 16px; direction: ltr; border: 1px solid rgb(188 212 230 / 22%); border-radius: 16px 4px; background: radial-gradient(ellipse at 20% 35%, rgb(0 166 147 / 9%), transparent 65%), var(--canvas-elevated); box-shadow: 0 8px 24px rgb(0 0 0 / 12%), inset 0 1px 0 rgb(188 212 230 / 7%); }
.origin-banner::before { content: ""; position: absolute; top: -1px; inset-inline: 22px; height: 1px; background: linear-gradient(90deg, transparent, var(--persian-orange-moderate), transparent); opacity: .7; }
.origin-emblem { display: block; flex: 0 0 auto; width: 132px; height: 119px; }
.origin-copy { display: grid; justify-items: center; gap: 4px; padding-block: 8px; }
.origin-copy strong { color: var(--persian-blue-vivid-pale); font: 700 25px/1.3 var(--font-display); white-space: nowrap; letter-spacing: -.02em; }
.origin-copy > span { color: var(--persian-orange-moderate); font: 400 19px/1.7 var(--font-display); }
.origin-tricolor { display: block; width: 48px; height: 3px; margin-top: 7px; border-radius: 1px; background: linear-gradient(90deg, var(--persian-green-brilliant-bluish) 0 33.33%, var(--persian-blue-vivid-pale) 33.33% 66.66%, var(--persian-red-vivid) 66.66% 100%); }
.noscript-message { max-width: var(--shell); margin: 0 auto; padding: 20px 24px; color: var(--muted); font-size: 12px; }

/* Progressive motion never hides the narrative or runs a continuous render loop. */
@keyframes chapter-arrive { from { transform: translateY(12px); } to { transform: translateY(0); } }
.js .reveal.is-visible { animation: chapter-arrive .65s var(--ease-out) both; }
@media (min-width: 1600px) {
  .hero-scene { padding-block: 90px 104px; }
  .hero-copy h1 { font-size: 48px; }
}
@media (max-width: 1180px) {
  .shell { width: calc(100% - 64px); }
  .header-inner { gap: 20px; }
  .brand-copy small { display: none; }
  .primary-nav { gap: 16px; }
  .primary-nav a { font-size: 12px; }
  .header-actions { gap: 14px; }
  .hero-layout { gap: 30px; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); }
  .hero-copy h1 { font-size: 40px; }
  .hero-lead { font-size: 16px; }
  .hero-actions { gap: 8px; }
  .hero-actions .signal-button { padding-inline: 12px; }
  .architecture-catalog { padding-inline: 18px; gap: 16px 12px; }
  .architecture-node { padding-inline: 7px; gap: 7px; }
  .architecture-node-label { font-size: 10px; }
  .pavilion-art { height: 278px; }
  .architecture-core { top: 23px; }
  .architecture-core img { width: 52px; height: 52px; }
  .future-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .product-chapter { padding: 24px; }
  .values-main { padding: 36px; gap: 34px; }
  .values-launch, .values-access { padding: 30px 36px; }
}
@media (max-width: 940px) {
  .header-inner { min-height: 76px; flex-wrap: wrap; position: relative; }
  .brand-copy small { display: block; }
  .nav-toggle { display: block; margin-inline-start: auto; order: 2; }
  .header-actions { margin-inline-start: auto; }
  .primary-nav { order: 3; width: 100%; padding-bottom: 16px; margin: 0; justify-content: center; }
  .js .primary-nav { display: none; }
  .js .primary-nav.is-open { display: flex; }
  .hero-layout { grid-template-columns: 1fr; gap: 40px; }
  .hero-copy { max-width: 670px; padding: 0; }
  .hero-copy h1 { font-size: 42px; }
  [dir="rtl"] .hero-copy h1 { font-size: 38px; }
  .hero-lead { max-width: 70ch; }
  .architecture-stage { width: 100%; max-width: 720px; justify-self: center; }
  .pavilion-art { height: 310px; }
  .architecture-core { top: 32px; }
  .architecture-catalog { padding: 0 28px 28px; gap: 20px 28px; }
  .architecture-node { min-height: 44px; }
  .architecture-node-label { font-size: 12px; }
  .architecture-group-label { font-size: 11px; }
  .scene { padding-block: 72px; }
  .hero-scene { padding-block: 44px 70px; }
  .foundation-chapters { grid-template-columns: 1fr; }
  .foundation-chapters .product-chapter { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.55fr); column-gap: 32px; }
  .foundation-chapters .product-card-header { grid-column: 1/-1; }
  .foundation-chapters .product-links { grid-column: 1; }
  .foundation-chapters .repository-link { grid-column: 2; grid-row: 2/4; align-self: end; }
  .development-horizon { gap: 22px; }
  .horizon-band h3 { font-size: 19px; }
  .horizon-band ul { font-size: 13px; }
  .values-main { grid-template-columns: 1fr; }
  .values-quotation { max-width: 600px; }
  .values-principles { gap: 20px; }
  .footer-layout { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .footer-contact a { min-height: 44px; }
}
@media (max-width: 640px) {
  html { scroll-padding-top: 96px; }
  .shell { width: calc(100% - 36px); }
  .header-inner { min-height: 72px; gap: 12px; }
  .brand { gap: 8px; }
  .brand-symbol { width: 34px; height: 38px; }
  .brand-symbol img { width: 28px; height: 28px; }
  .brand-copy strong { font-size: 13px; }
  .brand-copy small { display: none; }
  .header-actions { gap: 8px; }
  .header-actions .text-action { font-size: 11px; gap: 5px; }
  .header-actions .text-action svg { width: 13px; }
  .language-picker select { max-width: 82px; padding-inline: 6px; font-size: 11px; }
  .nav-toggle { width: 40px; height: 42px; padding: 9px; margin: 0; }
  .primary-nav { flex-wrap: wrap; gap: 2px 22px; justify-content: flex-start; }
  .primary-nav a { font-size: 13px; }
  .hero-copy h1 { font-size: 34px; line-height: 1.38; }
  [dir="rtl"] .hero-copy h1 { font-size: 32px; line-height: 1.8; }
  .alpha-signal { font-size: 10px; margin-bottom: 4px; }
  .hero-lead { margin-top: 20px; font-size: 16px; line-height: 1.95; }
  .hero-note { font-size: 12px; }
  .hero-actions { gap: 10px; }
  .signal-button { min-height: 46px; font-size: 11px; padding-inline: 12px; }
  .hero-layout { gap: 34px; }
  .pavilion-art { height: 238px; }
  .architecture-core { top: 18px; }
  .architecture-core img { width: 45px; height: 45px; }
  .architecture-core strong { font-size: 13px; }
  .architecture-core small { font-size: 9px; }
  .architecture-catalog { grid-template-columns: 1fr; padding: 0 18px 24px; gap: 20px; }
  .architecture-family-links { grid-template-columns: 1fr; gap: 6px; }
  .architecture-node { min-height: 44px; padding: 8px 12px; }
  .architecture-node-label { font-size: 13px; }
  .architecture-node-icon, .architecture-node-icon svg { width: 24px; height: 24px; }
  .architecture-group-label { margin-bottom: 10px; font-size: 12px; }
  .architecture-popover { padding: 14px; }
  .scene { padding-block: 56px; }
  .hero-scene { padding-block: 36px 56px; }
  .scene-heading { margin-bottom: 28px; }
  .scene-heading h2 { font-size: 29px; }
  .scene-heading p { font-size: 16px; }
  .product-chapter, .future-product-card { padding: 22px; border-radius: 16px; }
  .foundation-chapters .product-chapter { display: flex; }
  .product-content h3 { font-size: 22px; }
  .product-content p { font-size: 16px; }
  .product-chapters, .future-product-grid { grid-template-columns: 1fr; }
  .copilot-card-body { display: flex; flex-direction: column; gap: 24px; align-items: stretch; }
  .copilot-card-body .product-content { order: -1; }
  .copilot-card-body .product-content h3 { font-size: 30px; }
  .product-visual { min-height: 225px; padding: 14px; }
  .product-visual p { font-size: 12px; }
  .future-product-card .product-content p { font-size: 16px; }
  .development-horizon { grid-template-columns: 1fr; gap: 28px; }
  .horizon-band { padding-top: 24px; }
  .horizon-depth { margin-bottom: 10px; }
  .horizon-band h3 { font-size: 23px; }
  .horizon-band ul { font-size: 15px; margin-bottom: 0; }
  .invitation-header { gap: 16px; }


  .invitation-heading h2 { font-size: 26px; line-height: 1.6; }
  .values-main { padding: 26px 22px; gap: 30px; }
  .values-quotation blockquote { font-size: 23px; }
  .values-principle { grid-template-columns: 28px 1fr; gap: 12px; }
  .values-principle-index { grid-column: 1; grid-row: 1; }
  .values-principle svg { grid-column: 1; grid-row: 1; margin-top: 28px; width: 23px; }
  .values-principle p { grid-column: 2; font-size: 15px; }
  .values-invitation { grid-template-columns: 1fr; }
  .values-launch, .values-access { padding: 24px 22px; }
  .values-access { border-inline-start: 0; border-top: 1px solid var(--line); }
  .values-invitation p { font-size: 15px; }
  .footer-layout { grid-template-columns: 1fr; gap: 18px; }
  .origin-banner { gap: 12px; padding: 10px 16px 10px 8px; margin-block: 6px; }
  .origin-emblem { width: 104px; height: 94px; }
  .origin-copy strong { font-size: 21px; }
  .origin-copy > span { font-size: 17px; }
}
@media (max-width: 380px) {
  .brand-copy { max-width: 70px; }
  .brand-copy strong { font-size: 12px; }
  .header-inner { gap: 8px; }
  .header-actions .text-action { max-width: 40px; line-height: 1.5; }
  .header-actions .text-action svg { display: none; }
  .language-picker select { max-width: 73px; }
  .hero-copy h1 { font-size: 30px; }
  .pavilion-art { height: 215px; }
  .architecture-core { top: 17px; }
  .architecture-core img { width: 38px; height: 38px; }
  .product-live-signal { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .pavilion-model { transform: none; }
  .signal-button:hover { transform: none; }
}
@media (forced-colors: active) {
  .global-atmosphere, .pavilion-art, .values-art, .hero-horizon, .invitation-atmosphere { display: none; }
  .architecture-frame { padding-top: 145px; }
  .architecture-core { top: 16px; }
  .architecture-core img { filter: none; }
  .architecture-node, .product-chapter, .future-product-card, .architecture-frame, .values-editorial, .architecture-popover, .signal-button { border: 1px solid CanvasText; background: Canvas; color: CanvasText; box-shadow: none; }
  .product-chapter.is-active, .primary-nav a.is-active { outline: 2px solid Highlight; outline-offset: 3px; }
  .architecture-node-label, .architecture-popover strong, .architecture-popover small { color: CanvasText; }
  .signal-button-primary, .signal-button-primary:hover { background: Canvas; color: LinkText; border-color: LinkText; }
  .origin-banner { border-color: CanvasText; background: Canvas; box-shadow: none; }
  .origin-banner::before, .origin-tricolor { display: none; }
  .origin-copy strong, .origin-copy > span { color: CanvasText; }
}