:root {
  color-scheme: dark;
  --bg: #08151c;
  --surface: #0e2028;
  --raised: #132b32;
  --text: #edf4f0;
  --muted: #9eb3b7;
  --accent: #a6edc3;
  --green: #49bf93;
  --line: #284049;
  --input: #0a1b23;
  --shadow: 0 24px 70px #0004
}

html[data-theme=light] {
  color-scheme: light;
  --bg: #f5f7f3;
  --surface: #fff;
  --raised: #e7efe8;
  --text: #102b2d;
  --muted: #536969;
  --accent: #176a48;
  --green: #177d58;
  --line: #cbdad2;
  --input: #f7faf7;
  --shadow: 0 20px 60px #143b2810
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Tahoma, "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.8
}

button,
input,
textarea,
select {
  font: inherit
}

button,
a,
input,
textarea,
select {
  touch-action: manipulation
}

button,
a {
  -webkit-tap-highlight-color: transparent
}

button {
  cursor: pointer
}

button:disabled {
  opacity: .55;
  cursor: wait
}

a {
  color: inherit;
  text-decoration: none
}

button {
  color: inherit
}

h1,
h2,
h3,
p {
  margin-top: 0
}

h1,
h2 {
  letter-spacing: -.045em;
  line-height: 1.25
}

html[lang=ar] h1,
html[lang=ar] h2 {
  letter-spacing: -.035em;
  line-height: 1.5
}

h2 {
  font-size: clamp(30px, 3.4vw, 48px);
  font-weight: 600;
  white-space: pre-line
}

h3 {
  line-height: 1.5
}

p {
  color: var(--muted)
}

::selection {
  background: var(--accent);
  color: var(--bg)
}

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 5px
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-offset: 2px
}

.wrap {
  width: min(1240px, calc(100% - 80px));
  margin-inline: auto
}

.top {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--bg) 93%, transparent);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line)
}

.nav-inner {
  height: 93px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  letter-spacing: .025em;
  line-height: 1.15;
  direction: ltr
}

.brand-mark {
  font-size: 30px;
  background: var(--accent);
  color: var(--bg);
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  position: relative;
  font-style: italic
}

.brand-mark>span {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 3px;
  font-size: 17px
}

.brand-sub {
  display: block;
  font-size: 9px;
  letter-spacing: .28em;
  margin-top: 5px;
  color: var(--muted)
}

nav,
.nav-actions {
  display: flex;
  align-items: center;
  gap: 27px
}

nav {
  font-size: 13px
}

nav a {
  color: var(--muted)
}

nav a:hover {
  color: var(--accent)
}

.nav-actions {
  gap: 9px
}

.icon-btn {
  background: none;
  border: 1px solid var(--line);
  border-radius: 9px;
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  font-size: 16px
}

.btn {
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 14px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
  font-size: 13px;
  transition: transform .2s, filter .2s
}

.btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08)
}

.btn.small {
  padding: 10px 15px;
  font-size: 12px
}

.btn.secondary {
  background: transparent;
  border-color: var(--line);
  color: var(--text)
}

.menu {
  display: none
}

.hero {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  align-items: center;
  gap: 60px;
  min-height: 700px;
  padding-block: 80px 90px
}

.eyebrow {
  color: var(--accent);
  font-size: 11px;
  letter-spacing: .13em;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 19px
}

.spark {
  font-size: 21px
}

.hero-specialty {
  font-size: 10px;
  letter-spacing: .12em;
  margin-top: 28px
}

.hero h1 {
  font-size: clamp(43px, 5.5vw, 76px);
  font-weight: 600;
  white-space: pre-line;
  margin-bottom: 25px
}

.hero h1::first-line {
  color: var(--text)
}

.hero h1 {
  color: var(--accent)
}

.lead {
  font-size: 16px;
  line-height: 2;
  max-width: 600px
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 32px
}

.text-link {
  font-size: 13px;
  font-weight: 600
}

.text-link:hover {
  color: var(--accent)
}

.hero-note {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 40px;
  font-size: 11px;
  color: var(--muted)
}

.hero-note .line {
  height: 1px;
  width: 35px;
  background: var(--green)
}

.system-art {
  height: 480px;
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: radial-gradient(ellipse at center, #2b8a6724, transparent 64%);
  direction: ltr
}

.system-art:before {
  content: "";
  position: absolute;
  inset: 30px 0;
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 20px 20px;
  mask-image: radial-gradient(ellipse, black, transparent 70%);
  z-index: -1
}

.art-top,
.art-bottom {
  position: absolute;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .13em
}

.art-top {
  top: 0;
  border-bottom: 1px solid var(--line);
  padding-bottom: 15px
}

.art-top>span:last-child {
  font-size: 21px;
  color: var(--accent)
}

.art-bottom {
  bottom: 0;
  justify-content: center;
  gap: 9px;
  letter-spacing: .03em;
  font-size: 8px
}

.tiny-dot {
  width: 5px;
  height: 5px;
  border-radius: 100%;
  background: var(--green)
}

.orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid var(--line);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: -1
}

.orbit-one {
  width: 290px;
  height: 290px
}

.orbit-two {
  width: 400px;
  height: 400px;
  border-style: dashed;
  animation: orbit 70s linear infinite
}

.core {
  width: 178px;
  height: 178px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, var(--raised), var(--bg));
  border: 1px solid var(--green);
  border-radius: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 80px #55e49c12, inset 0 1px 0 #ffffff10
}

.core-symbol {
  color: var(--accent);
  font-size: 54px;
  line-height: 1.2
}

.core strong {
  font-size: 21px;
  letter-spacing: .06em
}

.core strong span {
  color: var(--accent)
}

.core small {
  color: var(--muted);
  font-size: 8px;
  letter-spacing: .04em;
  margin-top: 8px
}

.node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 17px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow)
}

.node>span {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  background: var(--raised);
  color: var(--accent);
  border-radius: 8px;
  font-size: 22px
}

.node strong {
  font-size: 13px;
  display: block
}

.node small {
  font-size: 8px;
  color: var(--muted);
  display: block;
  letter-spacing: .03em
}

.node-one {
  top: 68px;
  left: 20px
}

.node-two {
  top: 118px;
  right: 0
}

.node-three {
  bottom: 97px;
  left: 0
}

.node-four {
  bottom: 55px;
  right: 15px
}

.tech-strip {
  border-block: 1px solid var(--line)
}

.tech-strip>.wrap {
  min-height: 92px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 650;
  direction: ltr
}

.section {
  padding-block: 85px
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  margin-bottom: 35px
}

.section-head h2 {
  margin-bottom: 0
}

.section-head>p {
  max-width: 310px;
  font-size: 13px;
  margin-bottom: 5px
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px
}

.service-card {
  padding: 30px 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  transition: transform .25s, border-color .25s;
  display: flex;
  flex-direction: column;
  align-items: start
}

.service-card:hover {
  transform: translateY(-6px);
  border-color: var(--green)
}

.service-icon {
  font-size: 29px;
  color: var(--accent);
  height: 65px
}

.service-card h3 {
  font-size: 17px;
  margin-bottom: 12px
}

.service-card p {
  font-size: 12px;
  margin-bottom: 25px
}

.service-card a {
  font-size: 12px;
  margin-top: auto;
  color: var(--accent)
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 27px
}

.project-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface)
}

.project-visual {
  height: 250px;
  overflow: hidden;
  position: relative;
  background: radial-gradient(ellipse at 60% 80%, #219b5e23, transparent 70%), var(--raised);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--line)
}

.project-visual img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform .5s
}

.project-card:hover .project-visual img {
  transform: scale(1.03)
}

.project-visual .project-glyph {
  font-size: 90px;
  color: var(--green);
  opacity: .5
}

.project-number {
  position: absolute;
  top: 20px;
  inset-inline-start: 22px;
  color: var(--muted);
  font-size: 11px
}

.project-body {
  padding: 25px 28px
}

.tag {
  font-size: 10px;
  color: var(--accent);
  letter-spacing: .05em;
  display: inline-block
}

.project-body h3 {
  font-size: 21px;
  margin: 12px 0
}

.project-body>p {
  font-size: 13px
}

.project-body details {
  border-top: 1px solid var(--line);
  padding-top: 15px;
  margin-top: 20px
}

.project-body summary {
  font-size: 12px;
  color: var(--accent);
  cursor: pointer
}

.project-body .formatted {
  font-size: 13px;
  padding-top: 14px
}

.search input {
  width: 245px
}

.empty-state {
  border: 1px dashed var(--line);
  padding: 35px;
  border-radius: 12px;
  font-size: 13px;
  grid-column: 1/-1
}

.about-band {
  background: var(--surface);
  border-block: 1px solid var(--line);
  padding-block: 60px
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: center
}

.about-grid h2 {
  margin-bottom: 0
}

.about-grid .lead {
  font-size: 15px
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 45px
}

.process-card {
  border-top: 1px solid var(--line);
  padding-top: 22px
}

.process-card>span {
  color: var(--green);
  font-size: 13px
}

.process-card h3 {
  font-size: 17px;
  margin: 20px 0 12px
}

.process-card p {
  font-size: 12px
}

.architect-panel {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  background: var(--surface)
}

.architect-intro {
  padding: 45px;
  background: radial-gradient(ellipse at top left, #27986622, transparent 75%);
  border-inline-end: 1px solid var(--line)
}

.architect-intro h2 {
  font-size: 38px;
  margin-bottom: 20px
}

.architect-intro p:not(.eyebrow) {
  font-size: 13px
}

.large-symbol {
  display: block;
  color: var(--accent);
  font-size: 50px;
  line-height: 1.3;
  margin-block: 20px
}

.architect-input {
  padding: 45px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  gap: 10px
}

.architect-input textarea {
  min-height: 190px
}

.architect-input .muted {
  font-size: 11px
}

.blueprint-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

.blueprint-card {
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface)
}

.blueprint-card h3 {
  color: var(--accent);
  font-size: 16px
}

.blueprint-card .formatted {
  font-size: 13px
}

.blueprint-actions {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 30px;
  border-radius: 14px
}

.lab-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px
}

.lab-step {
  padding: 25px 15px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 10px
}

.lab-step span {
  font-size: 11px;
  display: block;
  color: var(--muted);
  margin-bottom: 10px
}

.lab-step strong {
  font-size: 13px
}

.lab-step.active {
  background: var(--raised);
  border-color: var(--green);
  color: var(--accent)
}

.lab-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 25px
}

.lab-bottom p {
  margin: 0;
  font-size: 13px
}

.muted {
  font-size: 12px;
  color: var(--muted)
}

.panel>.muted {
  margin: 15px 0 0
}

#playground {
  padding-top: 0;
  padding-bottom: 35px
}

.playground>summary {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  font-size: 17px;
  font-weight: 600;
  list-style: none
}

.tabs {
  display: flex;
  gap: 10px;
  margin-block: 25px 15px;
  flex-wrap: wrap
}

.tab {
  padding: 9px 18px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 12px
}

.tab.active {
  background: var(--accent);
  color: var(--bg)
}

.playground .btn {
  margin-top: 16px
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px
}

.article-card {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 12px
}

.article-card h3 {
  margin: 15px 0;
  font-size: 20px
}

.article-card p {
  font-size: 13px
}

.article-card summary {
  font-size: 12px;
  color: var(--accent);
  cursor: pointer
}

.article-card .formatted {
  margin-top: 15px
}

.request-panel {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  overflow: hidden
}

.request-intro {
  padding: 45px;
  border-inline-end: 1px solid var(--line);
  background: radial-gradient(ellipse at bottom, #1a8a4726, transparent 70%);
  display: flex;
  flex-direction: column
}

.request-intro h2 {
  font-size: 48px
}

.request-intro>p {
  font-size: 13px
}

.request-sign {
  margin-top: auto;
  padding-top: 70px;
  font-size: 40px;
  line-height: 1.2;
  direction: ltr;
  font-weight: 700;
  letter-spacing: -.05em;
  color: var(--accent)
}

.request-sign span {
  display: block;
  font-size: 12px;
  letter-spacing: .2em;
  margin-top: 10px
}

.form {
  padding: 35px
}

.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px
}

label {
  font-size: 12px;
  display: block
}

label>span {
  display: block;
  margin-bottom: 8px
}

input,
textarea,
select {
  width: 100%;
  background: var(--input);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 12px 13px;
  color: var(--text);
  font-size: 13px;
  min-width: 0
}

textarea {
  resize: vertical;
  min-height: 130px
}

input::placeholder,
textarea::placeholder {
  color: var(--muted);
  opacity: .8
}

input[type=file] {
  font-size: 10px;
  padding: 13px 8px
}

input[type=file]::file-selector-button {
  background: var(--raised);
  border: 0;
  border-radius: 3px;
  color: var(--text);
  padding: 4px;
  font-size: 10px;
  margin-inline-end: 6px
}

.form label {
  margin-bottom: 17px
}

.consent {
  display: flex;
  align-items: start;
  gap: 10px;
  color: var(--muted)
}

.consent input {
  width: 15px;
  flex-shrink: 0;
  margin-top: 4px;
  accent-color: var(--green)
}

.consent span {
  font-size: 11px
}

.honeypot {
  position: absolute;
  inset-inline-start: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  clip-path: inset(50%);
  overflow: hidden;
  border: 0
}

#request-status {
  font-size: 12px;
  margin-top: 15px
}

.result {
  margin-top: 20px;
  overflow-wrap: anywhere
}

.error {
  color: #f19595
}

html[data-theme=light] .error {
  color: #a22127
}

.success {
  color: var(--accent)
}

.formatted {
  overflow-wrap: anywhere
}

.formatted p {
  white-space: pre-wrap;
  margin-block: 8px
}

.formatted h2,
.formatted h3,
.formatted h4 {
  font-size: 17px;
  margin: 15px 0 8px;
  letter-spacing: normal;
  line-height: 1.5
}

.formatted ul,
.formatted ol {
  padding-inline-start: 22px
}

.formatted pre {
  direction: ltr;
  text-align: left;
  white-space: pre-wrap;
  background: var(--bg);
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: auto
}

.formatted code {
  font-family: ui-monospace, Consolas, monospace;
  background: var(--bg);
  border-radius: 3px;
  padding: 2px 4px;
  color: var(--accent);
  font-size: 12px
}

.formatted pre code {
  padding: 0
}

.formatted blockquote {
  border-inline-start: 3px solid var(--green);
  margin: 10px 0;
  padding-inline-start: 13px;
  color: var(--muted)
}

.copy {
  font-size: 11px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 10px;
  color: var(--accent);
  margin-top: 12px
}

footer {
  padding-top: 40px;
  padding-bottom: 110px
}

.footer-top,
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px
}

.footer-top {
  padding-bottom: 35px;
  border-bottom: 1px solid var(--line)
}

.footer-top p {
  margin: 0;
  font-size: 13px
}

.footer-top .brand {
  font-size: 17px
}

.accent {
  color: var(--accent)
}

#social-links {
  display: flex;
  gap: 20px;
  font-size: 12px
}

.footer-bottom {
  padding-top: 22px;
  color: var(--muted);
  font-size: 11px
}

.chat-fab {
  position: fixed;
  bottom: 24px;
  inset-inline-end: 25px;
  background: var(--accent);
  color: var(--bg);
  border: 1px solid var(--green);
  padding: 13px 21px;
  box-shadow: var(--shadow);
  border-radius: 50px;
  z-index: 40;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  gap: 10px;
  align-items: center
}

.chat-fab>span {
  font-size: 23px;
  line-height: 1
}

.chat {
  position: fixed;
  inset-inline-end: 25px;
  bottom: 90px;
  width: 390px;
  height: min(590px, calc(100dvh - 110px));
  z-index: 50;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 17px;
  box-shadow: var(--shadow);
  background: var(--surface);
  overflow: hidden
}

.chat[hidden] {
  display: none
}

.chat-head {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--line)
}

.chat-avatar {
  font-size: 30px;
  color: var(--accent)
}

.chat-head strong,
.chat-head small {
  display: block
}

.chat-head strong {
  font-size: 14px
}

.chat-head small {
  font-size: 10px;
  color: var(--muted)
}

.chat-head .icon-btn {
  margin-inline-start: auto;
  font-size: 24px;
  width: 32px;
  height: 32px;
  border: 0
}

.messages {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: auto;
  flex: 1
}

.bubble {
  padding: 12px 14px;
  font-size: 12px;
  max-width: 94%;
  border-radius: 12px;
  overflow-wrap: anywhere
}

.bubble.bot {
  background: var(--raised);
  align-self: flex-start
}

.bubble.user {
  background: var(--accent);
  color: var(--bg);
  align-self: flex-end;
  white-space: pre-wrap
}

.bubble p {
  color: inherit
}

.typing {
  animation: pulse 1.2s infinite
}

.quick {
  padding: 10px 12px;
  display: flex;
  gap: 7px;
  overflow: auto
}

.quick button {
  border: 1px solid var(--line);
  background: none;
  border-radius: 20px;
  padding: 5px 10px;
  font-size: 10px;
  white-space: nowrap
}

#chat-form {
  padding: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 8px
}

#chat-form input {
  min-width: 0
}

#chat-form button {
  background: var(--accent);
  color: var(--bg);
  height: 45px;
  flex-shrink: 0
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

.skip {
  position: fixed;
  top: -100px;
  left: 20px;
  background: var(--accent);
  color: var(--bg);
  padding: 10px;
  z-index: 100
}

.skip:focus {
  top: 10px
}

@keyframes orbit {
  to {
    transform: translate(-50%, -50%) rotate(360deg)
  }
}

@keyframes pulse {
  50% {
    opacity: .45
  }
}

@media(min-width:1400px) {
  .hero {
    gap: 85px
  }
}

@media(max-width:1100px) {
  .wrap {
    width: calc(100% - 48px)
  }

  nav {
    gap: 15px
  }

  .nav-cta {
    display: none
  }

  .hero {
    gap: 30px
  }

  .system-art {
    transform: scale(.92);
    transform-origin: center
  }

  .service-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .architect-intro,
  .architect-input,
  .request-intro {
    padding: 30px
  }

  .request-panel {
    grid-template-columns: .75fr 1.25fr
  }

  .form {
    padding: 25px
  }
}

@media(max-width:800px) {
  .nav-inner {
    height: 76px
  }

  .menu {
    display: grid
  }

  nav {
    display: none;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: var(--bg);
    padding: 25px;
    border-bottom: 1px solid var(--line);
    flex-direction: column
  }

  nav.show {
    display: flex
  }

  .hero {
    grid-template-columns: 1fr;
    padding-block: 55px;
    gap: 40px
  }

  .hero h1 {
    font-size: 58px
  }

  .hero-copy {
    max-width: 650px
  }

  .system-art {
    width: min(510px, 100%);
    margin: auto;
    transform: none
  }

  .tech-strip>.wrap {
    justify-content: center;
    font-size: 13px;
    padding-block: 20px;
    gap: 20px 35px
  }

  .section {
    padding-block: 60px
  }

  .section-head {
    align-items: start;
    flex-direction: column;
    gap: 15px
  }

  .about-grid {
    gap: 30px;
    grid-template-columns: 1fr
  }

  .process-grid {
    grid-template-columns: 1fr 1fr
  }

  .architect-panel,
  .request-panel {
    grid-template-columns: 1fr
  }

  .architect-intro,
  .request-intro {
    border-inline-end: 0;
    border-bottom: 1px solid var(--line)
  }

  .architect-intro {
    display: block
  }

  .large-symbol {
    display: none
  }

  .request-sign {
    display: none
  }

  .article-grid {
    grid-template-columns: 1fr 1fr
  }

  .request-intro h2 {
    font-size: 40px
  }

  .footer-top {
    flex-wrap: wrap
  }

  .project-visual {
    height: 200px
  }

  .project-body {
    padding: 20px
  }

  .project-body h3 {
    font-size: 18px
  }
}

@media(max-width:520px) {
  .wrap {
    width: calc(100% - 36px)
  }

  .brand {
    font-size: 15px
  }

  .brand-mark {
    width: 35px;
    height: 35px;
    font-size: 25px
  }

  .brand-sub {
    font-size: 7px
  }

  .nav-inner {
    gap: 10px
  }

  .nav-actions {
    gap: 6px
  }

  .icon-btn {
    width: 33px;
    height: 35px;
    font-size: 13px
  }

  .hero h1 {
    font-size: 44px
  }

  .hero-specialty {
    font-size: 8px
  }

  .lead {
    font-size: 14px
  }

  .hero-actions {
    gap: 18px
  }

  .hero-actions .btn {
    padding: 13px 16px
  }

  .hero-note {
    font-size: 10px
  }

  .system-art {
    height: 400px
  }

  .orbit-two {
    width: 320px;
    height: 320px
  }

  .orbit-one {
    width: 230px;
    height: 230px
  }

  .core {
    width: 140px;
    height: 140px;
    border-radius: 30px
  }

  .core-symbol {
    font-size: 43px
  }

  .core strong {
    font-size: 17px
  }

  .core small {
    font-size: 6px
  }

  .node {
    padding: 10px;
    gap: 7px
  }

  .node>span {
    width: 25px;
    height: 25px;
    font-size: 18px
  }

  .node strong {
    font-size: 11px
  }

  .node small {
    font-size: 6px
  }

  .node-one {
    left: 0;
    top: 65px
  }

  .node-two {
    right: 0;
    top: 105px
  }

  .node-three {
    bottom: 82px;
    left: 0
  }

  .node-four {
    bottom: 43px;
    right: 0
  }

  .art-top,
  .art-bottom {
    left: 0;
    right: 0
  }

  .service-grid,
  .project-grid,
  .article-grid,
  .blueprint-grid {
    grid-template-columns: 1fr
  }

  .service-card {
    padding: 25px
  }

  .service-icon {
    height: 50px
  }

  .service-card h3 {
    font-size: 19px
  }

  .service-card p {
    font-size: 13px
  }

  .process-grid {
    gap: 18px
  }

  .process-card h3 {
    font-size: 15px
  }

  .process-card p {
    font-size: 11px
  }

  .lab-grid {
    grid-template-columns: 1fr 1fr
  }

  .lab-bottom {
    align-items: start;
    flex-direction: column
  }

  .panel {
    padding: 20px
  }

  .architect-intro,
  .architect-input {
    padding: 26px
  }

  .architect-intro h2 {
    font-size: 34px
  }

  .two {
    grid-template-columns: 1fr;
    gap: 0
  }

  .form {
    padding: 23px
  }

  .request-intro {
    padding: 27px
  }

  .chat {
    inset-inline-end: 10px;
    bottom: 82px;
    width: calc(100% - 20px);
    height: min(590px, calc(100dvh - 95px))
  }

  .chat-fab {
    bottom: 18px;
    inset-inline-end: 18px
  }

  .footer-top {
    flex-direction: column;
    align-items: start;
    gap: 18px
  }

  .search,
  .search input {
    width: 100%
  }

  .eyebrow {
    font-size: 10px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important
  }
}

.workflow-output {
  list-style: none;
  counter-reset: flow;
  padding: 0;
  margin: 0
}

.workflow-output li {
  counter-increment: flow;
  position: relative;
  padding: 14px 16px;
  padding-inline-start: 48px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
  margin-bottom: 14px
}

.workflow-output li:before {
  content: counter(flow);
  position: absolute;
  inset-inline-start: 15px;
  color: var(--accent);
  font-weight: 700
}

.workflow-output li:not(:last-child):after {
  content: "↓";
  position: absolute;
  bottom: -17px;
  inset-inline-start: 18px;
  color: var(--green);
  z-index: 1
}

/* IBM Plex Sans Arabic — self-hosted, SIL OFL 1.1. */

@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/static/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("/static/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("/static/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("/static/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2");
}

html[lang="ar"] body {
  font-family: "IBM Plex Sans Arabic", "Segoe UI", Arial, sans-serif;
  line-height: 1.85;
}
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 {
  letter-spacing: 0;
  font-weight: 600;
}
html[lang="ar"] .hero-specialty { font-size: 12px; letter-spacing: 0; }
html[lang="ar"] .eyebrow { letter-spacing: 0; }
html[lang="ar"] label { font-size: 13px; }

/* Obsidian visual layer. Content and API contracts remain in main.js. */
:root{--bg:#07090e;--surface:#10141e;--raised:#19202e;--text:#f0f3fa;--muted:#a3aec3;--accent:#9cebd5;--green:#58d7ba;--line:rgba(255,255,255,.09);--input:#0b1019;--shadow:0 24px 80px #0005}
html[data-theme=light]{--bg:#f5f7fc;--surface:#fff;--raised:#e9edf8;--text:#151e33;--muted:#52617a;--accent:#126c59;--green:#16826b;--line:#d7dfed;--input:#f8faff;--shadow:0 24px 70px #21315a10}
body{overflow-x:clip;background-image:radial-gradient(ellipse at 12% 5%,#6554e614,transparent 28%),radial-gradient(ellipse at 90% 18%,#28c8d011,transparent 26%);font-family:Inter,"Segoe UI",Arial,sans-serif}
.top{position:sticky;top:16px;z-index:40;margin:16px auto 0;width:min(1280px,calc(100% - 40px));border:1px solid var(--line);border-radius:24px;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(16px);box-shadow:var(--shadow);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.top.compact{transform:translateY(-7px) scale(.98)}
.top .nav-inner{width:100%;padding:15px 22px;min-height:76px}
#nav{position:relative;isolation:isolate}#nav a{position:relative;z-index:1;padding:9px 12px;border-radius:12px}
.nav-indicator{position:absolute;inset:0 auto auto 0;background:var(--raised);border:1px solid var(--line);border-radius:12px;pointer-events:none;opacity:0;transition:transform .25s,opacity .2s;z-index:0}
.btn{border-radius:12px;box-shadow:inset 0 1px 0 #fff3;transition:transform .25s,opacity .25s}.btn:hover{transform:translateY(-3px)}
.hero{padding-top:100px;padding-bottom:90px;min-height:740px;gap:60px}.hero h1{font-size:clamp(44px,5.1vw,78px);line-height:1.3;letter-spacing:-.05em}.hero .lead{max-width:540px;font-size:17px}.hero-specialty{font-family:ui-monospace,monospace;color:var(--muted)}
.hero-word{display:inline-block;animation:word-in .75s both cubic-bezier(.16,1,.3,1);animation-delay:var(--delay,0ms)}.hero-word.key{color:var(--accent);position:relative}.hero-word.key:after{content:"";position:absolute;inset:auto 0 0;height:2px;background:linear-gradient(90deg,transparent,#67ddec,#9d8cff,transparent);transform:scaleX(.6);animation:underline-breathe 4s ease-in-out infinite}
.system-art{overflow:visible;background:radial-gradient(ellipse,#427ccd10,transparent 65%);height:500px}.system-art .core{border-radius:34px;background:linear-gradient(145deg,var(--raised),var(--bg));border-color:#78dfc866;z-index:2}.core:before{content:"";position:absolute;inset:-22px;border-radius:48px;background:radial-gradient(ellipse,#5ddac52a,transparent 70%);z-index:-1;animation:core-breathe 4s ease-in-out infinite}.orbit{opacity:.5}.node{z-index:3;backdrop-filter:blur(16px);background:color-mix(in srgb,var(--surface) 90%,transparent);transition:transform .35s,border-color .3s;transform-style:preserve-3d}.node:focus-visible{outline:2px solid var(--accent);outline-offset:5px}.node:hover,.node:focus-visible{border-color:#8d96ed;transform:perspective(600px) translateY(-7px) rotateX(5deg) rotateY(-5deg)}
.data-beams{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}.beam-track{fill:none;stroke:#7492bb;stroke-opacity:.25;stroke-width:1}.beam-dot{fill:#8af4e0;filter:drop-shadow(0 0 4px #5adccc)}
.tech-strip{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);border-color:var(--line)}.tech-strip>.wrap{width:max-content;max-width:none;flex-wrap:nowrap;justify-content:start;gap:0;direction:ltr;will-change:transform;margin:0;min-height:100px}.tech-strip span{flex:none;width:170px;text-align:center;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:15px;color:var(--muted);padding:16px 20px}.tech-strip span:hover{color:var(--brand,var(--accent))}
.section{padding-block:90px}.section h2{font-size:clamp(30px,3.6vw,49px)}.section-head{align-items:end}.section>.eyebrow,.section-head .eyebrow{margin-bottom:18px}.section-number{display:inline-block;font:700 54px/1 ui-monospace,monospace;-webkit-text-stroke:1px var(--muted);color:transparent;position:relative;margin-inline-end:18px;vertical-align:middle}.section-number:after{content:attr(data-number);position:absolute;inset:0;color:var(--accent);clip-path:inset(calc(100% - var(--fill,0%)) 0 0);-webkit-text-stroke:0}
.service-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}.service-card{grid-column:span 3;min-height:245px;padding:32px;border-radius:22px}.service-card:first-child{grid-column:span 4}.service-card:nth-child(2){grid-column:span 2}.service-card h3{font-size:22px}.service-icon{font-family:ui-monospace,monospace}
.service-card,.project-card,.process-card,.article-card,.panel,.architect-panel,.request-panel{background:linear-gradient(140deg,color-mix(in srgb,var(--surface) 95%,transparent),color-mix(in srgb,var(--bg) 90%,transparent));border:1px solid var(--line);border-radius:22px;backdrop-filter:blur(16px)}
.spotlight{position:relative;isolation:isolate;overflow:hidden}.spotlight:before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),#7499f31c,transparent 65%);opacity:0;transition:opacity .3s;z-index:-1}.spotlight:hover:before{opacity:1}.spotlight:after{content:"";position:absolute;inset:0;border:1px solid transparent;border-radius:inherit;pointer-events:none;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),#a7c8ff77,transparent) border-box;mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask-composite:exclude;opacity:0;transition:opacity .3s}.spotlight:hover:after{opacity:1}
.process-grid{gap:16px}.process-card{padding:28px}.process-card>span{font:600 34px ui-monospace,monospace;color:var(--accent)}.about-band{background:linear-gradient(115deg,#7985ff0a,transparent,#4edeb208);border-block:1px solid var(--line)}
.architect-panel{position:relative;overflow:hidden;background:radial-gradient(ellipse at 0 0,#7365ed16,transparent 60%),var(--surface)}.architect-input{position:relative;border-radius:20px}.architect-input:before{content:"";position:absolute;inset:-2px;border:1px solid #74d9e4;border-radius:22px;pointer-events:none;opacity:0;transform:scale(.98);transition:opacity .3s,transform .4s}.architect-input:focus-within:before{opacity:.7;transform:scale(1);animation:input-pulse 3s infinite}.architect-input textarea{min-height:220px;background:var(--input)}.large-symbol{color:#9a92ef}.blueprint-card{animation:word-in .55s both;animation-delay:var(--delay,0ms)}
#lab .panel{padding:32px;background-image:radial-gradient(#718ab415 1px,transparent 1px);background-size:18px 18px}.lab-step{position:relative;transition:transform .35s}.lab-step.active{transform:translateY(-5px);box-shadow:0 0 32px #5ee1ba15}.lab-step.active:after{content:"";position:absolute;inset:-4px;border:1px solid var(--accent);border-radius:inherit;animation:pipeline-pulse 1.8s infinite;pointer-events:none}
.playground summary{list-style:none}.playground summary::-webkit-details-marker{display:none}.playground summary>span:last-child{transition:transform .4s}.playground[open] summary>span:last-child{transform:rotate(45deg)}.accordion-body{transform-origin:top}.chat{border-radius:24px;box-shadow:0 30px 100px #0008;transform-origin:bottom right}.chat-head{background:linear-gradient(110deg,var(--raised),var(--surface))}.chat-avatar{position:relative}.chat-avatar:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--green);inset:auto 0 0 auto;animation:core-breathe 2.5s infinite}.chat-fab{isolation:isolate;box-shadow:0 8px 36px #58d7ba20}.chat-fab:before{content:"";position:absolute;inset:-5px;border:1px solid var(--accent);border-radius:inherit;z-index:-1;animation:pipeline-pulse 3s infinite}
.reveal{transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .7s}.reveal.pending{opacity:0;transform:translateY(24px)}
@keyframes word-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes core-breathe{50%{opacity:.45;transform:scale(1.08)}}@keyframes underline-breathe{50%{opacity:.4;transform:scaleX(1)}}@keyframes pipeline-pulse{0%{opacity:.5;transform:scale(.98)}100%{opacity:0;transform:scale(1.06)}}@keyframes input-pulse{50%{opacity:.3;transform:scale(1.005)}}
.motion-paused *, .motion-paused *:before,.motion-paused *:after{animation-play-state:paused!important}
@media(min-width:1400px){.hero{min-height:800px}}
@media(max-width:1000px){.top{width:calc(100% - 24px)}.hero{gap:30px;padding-top:65px}.service-card:first-child,.service-card:nth-child(2){grid-column:span 3}.process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.top{top:8px;border-radius:18px;margin-top:8px}.top .nav-inner{padding:10px 12px;min-height:62px}.top.compact{transform:translateY(-3px)}#nav.open{background:var(--surface);border-radius:18px;border:1px solid var(--line)}.nav-indicator{display:none}.hero{padding-top:50px;padding-bottom:50px;min-height:auto}.hero h1{font-size:44px}.hero .lead{font-size:16px}.system-art{height:390px;margin-block:10px}.service-grid{grid-template-columns:1fr}.service-card,.service-card:first-child,.service-card:nth-child(2){grid-column:auto;min-height:210px}.section{padding-block:55px}.section-number{font-size:38px;margin-inline-end:10px}.process-card{padding:20px}.tech-strip span{width:140px}.architect-input textarea{min-height:180px}#lab .panel{padding:20px}.chat{transform-origin:bottom center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal.pending{opacity:1;transform:none}.hero-word{opacity:1}.node:hover,.node:focus-visible{transform:none}.tech-strip>.wrap{transform:none!important;will-change:auto}.section-number:after{clip-path:none}}
.hero h1 .hero-word{color:var(--text)}.hero h1 .hero-word.key{color:var(--accent);background:linear-gradient(110deg,var(--accent),#71cce1 55%,#b7a4f4);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero{position:relative;isolation:isolate}.hero:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 75% 30%,#7965ed12,transparent 55%),radial-gradient(ellipse at 20% 60%,#45dfc10c,transparent 55%);animation:aurora-drift 15s ease-in-out infinite alternate}@keyframes aurora-drift{to{transform:translate3d(18px,-12px,0) scale(1.04);opacity:.45}}
html[data-theme=light] .hero h1 .hero-word.key{-webkit-text-fill-color:var(--accent)}
@media(max-width:800px){#nav{position:absolute;top:calc(100% + 10px);left:0;right:0;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}#nav.show{display:flex;align-items:stretch;gap:4px}#nav a{text-align:start;padding:12px 16px}.nav-indicator{display:none}.top .nav-inner{position:static}}
/* V8.2 — editorial hierarchy and quieter interactions. */
.hero{padding-top:65px;padding-bottom:65px;min-height:660px;gap:48px}.hero h1{font-size:clamp(42px,4.7vw,72px);max-width:670px;line-height:1.35}.hero-copy .eyebrow{margin-bottom:24px}.hero-specialty{margin-bottom:22px}.hero-note{margin-top:30px}
.node{cursor:pointer;text-align:start;color:var(--text);font:inherit}.node[aria-pressed=true]{border-color:var(--accent);background:var(--raised)}.beam-track.selected{stroke:var(--accent);stroke-opacity:.8;stroke-width:2}.node-info{position:absolute;inset:calc(100% + 15px) 12px auto;min-height:72px;padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);font-size:13px;direction:inherit;color:var(--muted);box-shadow:var(--shadow)}.node-info strong{color:var(--accent);margin-inline-end:8px}.system-art{margin-bottom:85px}.node-info[hidden]{display:none}
.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.featured-project{grid-column:1/-1;display:grid;grid-template-columns:1.2fr 1fr;min-height:380px}.featured-project .project-visual{height:100%;min-height:360px}.featured-project .project-body{padding:40px}.featured-project h3{font-size:30px}.featured-label{display:block;color:var(--accent);font-size:11px;letter-spacing:.12em;margin-bottom:20px}.project-visual img{object-fit:contain;background:var(--input)}.project-body details{margin-top:22px}.project-body summary{color:var(--accent);font-weight:600}.project-body p{max-width:65ch}.project-card:not(.featured-project) .project-visual{height:240px}
.service-illustration{height:92px;width:100%;max-width:260px;margin-bottom:22px;color:var(--accent);overflow:visible}.service-illustration .wire{stroke:var(--muted);stroke-width:1;opacity:.5;fill:none}.service-illustration .block{stroke:var(--accent);fill:var(--raised);stroke-width:1}.service-illustration .ink{fill:var(--accent)}.service-card .service-icon{display:none}.service-card{min-height:290px}.service-card h3{margin-bottom:10px}.service-card:hover .service-illustration{transform:translateY(-3px);transition:transform .3s}
.about-grid{grid-template-columns:1fr 1fr;gap:35px 70px}.maker-identity{grid-row:span 2;padding-inline-end:30px}.maker-identity h2{font-size:44px;margin-bottom:8px}.maker-monogram{position:relative;display:grid;place-items:center;width:150px;height:170px;border:1px solid var(--line);border-radius:25px;background:linear-gradient(145deg,var(--raised),var(--bg));font:600 50px ui-monospace,monospace;color:var(--accent);margin-bottom:30px}.maker-monogram span{position:absolute;bottom:12px;right:16px;font-size:25px}.maker-links{display:flex;gap:18px;flex-wrap:wrap;color:var(--accent);margin-top:24px}.about-grid>div:nth-child(2) h2{font-size:28px}.about-grid>div:nth-child(2){align-self:end}.about-grid>div:nth-child(3){align-self:start}.about-grid .lead{font-size:17px}
.chat-fab:before,.hero-word.key:after,.lab-step.active:after,.chat-avatar:after{animation:none}.lab-step.active:after{animation:pipeline-pulse 1.2s 1}.orbit-two{animation:none}.hero:before{animation:none}.core:before{animation-duration:6s}.node-info{animation:word-in .3s both}
@media(max-width:800px){.hero{padding-top:38px;min-height:auto}.hero h1{font-size:clamp(36px,7vw,54px)}.hero-copy .lead{margin-bottom:25px}.featured-project{display:block}.featured-project .project-visual{min-height:0;height:280px}.featured-project .project-body{padding:25px}.about-grid{grid-template-columns:1fr}.maker-identity{grid-row:auto;padding:0}.maker-monogram{width:110px;height:125px}.about-grid>div:nth-child(2) h2{font-size:27px}.node-info{font-size:12px}.system-art{margin-bottom:95px}}
@media(max-width:520px){.hero h1{font-size:40px;line-height:1.45}.hero-specialty{font-size:11px}.hero-note{margin-top:24px}.project-grid{grid-template-columns:1fr}.featured-project .project-visual{height:220px}.featured-project h3{font-size:25px}.chat-fab{width:49px;height:49px;min-width:49px;padding:0;justify-content:center;border-radius:50%;font-size:0;inset-inline-end:16px;bottom:16px}.chat-fab>span{font-size:25px}.maker-identity h2{font-size:36px}}
/* V9 — SEO pages, Arabic typography and layout polish. */
html[lang="ar"] .hero-specialty{font-family:inherit;letter-spacing:0;font-size:14px;font-weight:500}
.theme-icon{display:block;width:18px;height:18px}
a.icon-btn{text-decoration:none;color:inherit;font-weight:600;line-height:1}
.service-card,.service-card:first-child,.service-card:nth-child(2){grid-column:span 3}
.service-card details>summary,.project-body details>summary{list-style:none;cursor:pointer}.service-card details>summary::-webkit-details-marker{display:none}
.card-title-link{color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .3s,color .2s}
html[dir=rtl] .card-title-link{background-position:100% 100%}
.card-title-link:hover,.card-title-link:focus-visible{color:var(--accent);background-size:100% 1px}
.card-links{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.article-card .text-link{display:inline-block;margin-top:18px;color:var(--accent)}
.footer-top .brand[dir=ltr]{unicode-bidi:isolate}
/* Detail pages (articles and case studies). */
.detail-page .top{position:sticky}
.detail{padding-block:56px 90px;max-width:860px}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 42px;font-size:13px;color:var(--muted)}
.breadcrumbs li+li:before{content:"/";margin-inline-end:8px;opacity:.5}
.breadcrumbs a{color:var(--muted)}.breadcrumbs a:hover{color:var(--accent)}
.breadcrumbs [aria-current]{color:var(--text);max-width:40ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.detail-article h1{font-size:clamp(34px,5vw,56px);line-height:1.3;margin:14px 0 18px;letter-spacing:-.02em}
html[lang=ar] .detail-article h1{letter-spacing:0}
.detail-article>.lead{font-size:19px;color:var(--muted);max-width:62ch;margin-bottom:34px}
.detail-article .formatted{font-size:17px;line-height:1.95;max-width:70ch}
.detail-article .formatted h2{font-size:28px;margin:44px 0 14px}.detail-article .formatted h3{font-size:22px;margin:32px 0 10px}
.detail-article .formatted ul,.detail-article .formatted ol{padding-inline-start:22px;margin:14px 0}.detail-article .formatted li{margin:6px 0}
.detail-article .formatted pre{overflow:auto;padding:18px;border-radius:14px;background:var(--input);border:1px solid var(--line);direction:ltr;text-align:left}
.detail-article .formatted blockquote{border-inline-start:3px solid var(--accent);padding-inline-start:18px;color:var(--muted);margin:22px 0}
.detail-figure{margin:0 0 36px;border-radius:20px;overflow:hidden;border:1px solid var(--line)}.detail-figure img{display:block;width:100%;height:auto}
.detail-cta{margin-top:64px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:36px;border-radius:22px}
.detail-cta h2{font-size:28px;margin:6px 0}.detail-cta p{color:var(--muted);margin:0}
.not-found{min-height:70vh;display:flex;flex-direction:column;justify-content:center}
@media(max-width:700px){.detail{padding-block:32px 60px}.detail-cta{flex-direction:column;align-items:flex-start;padding:24px}.breadcrumbs ol{margin-bottom:28px}}
.breadcrumbs a{display:inline-block;padding:6px 2px;min-height:24px}
/* Hero words never start fully transparent, so the headline paints immediately (better LCP). */
@keyframes hero-word-in{from{opacity:.01;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-word{animation-name:hero-word-in;animation-duration:.6s}
.footer-top .brand{gap:0}.breadcrumbs ol{align-items:center}.breadcrumbs li{display:flex;align-items:center}

/* V8.3: refined assistant dock and illustrative automation canvas. */
#chat-open.chat-fab{width:auto;height:58px;min-width:58px;padding:5px 17px 5px 5px;gap:9px;direction:ltr;background:var(--surface);color:var(--text);border:1px solid var(--line);box-shadow:0 10px 36px #0004;bottom:calc(20px + env(safe-area-inset-bottom));inset-inline-end:20px;transition:transform .25s}
#chat-open:before{display:none}#chat-open:hover{transform:translateY(-3px)}#chat-open .assistant-name{font:600 12px/1.2 ui-monospace,monospace;letter-spacing:.03em}#chat-open .assistant-orb{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 30% 20%,#c3fff0,#78d9c1 45%,#286c76);color:#09252b;box-shadow:inset 0 1px 3px #fff9,inset 0 -5px 12px #083e5655}#chat-open svg{width:27px;height:27px;transition:transform .4s}#chat-open[aria-expanded=true] svg{transform:rotate(45deg) scale(.85)}#chat-open:focus-visible{outline:3px solid var(--accent);outline-offset:5px}.chat{bottom:calc(91px + env(safe-area-inset-bottom))}
.workflow-window{border:1px solid var(--line);border-radius:24px;overflow:hidden;background:var(--surface);box-shadow:0 25px 100px #0002}.workflow-toolbar{display:flex;align-items:center;gap:20px;padding:18px 24px;border-bottom:1px solid var(--line);direction:ltr}.workflow-toolbar .tag{margin-inline-start:auto;font-size:10px}.workflow-file{font:11px ui-monospace,monospace;letter-spacing:.12em;color:var(--muted)}.workflow-dots{display:flex;gap:6px}.workflow-dots i{width:7px;height:7px;border-radius:50%;background:#8b98b55e}.workflow-dots i:first-child{background:#ff8d8766}.workflow-dots i:last-child{background:#82e6c566}
.workflow-canvas{position:relative;height:410px;direction:ltr;background:radial-gradient(ellipse at 40% 50%,#8264e614,transparent 60%),radial-gradient(var(--line) 1px,transparent 1px);background-size:auto,18px 18px;isolation:isolate}.workflow-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.workflow-lines path{fill:none;stroke:var(--muted);stroke-opacity:.4;stroke-width:1.5;vector-effect:non-scaling-stroke}.flow-node{position:absolute;top:50%;transform:translate(-50%,-50%);width:140px;min-height:124px;border:1px solid var(--line);border-radius:18px;padding:14px;background:var(--bg);display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:0 8px 30px #0002;transition:transform .4s}.flow-node:after{content:"";position:absolute;inset:-1px;border:1px solid var(--flow-color,#7ce7cf);border-radius:inherit;box-shadow:0 0 30px color-mix(in srgb,var(--flow-color,#7ce7cf) 16%,transparent);opacity:0;transition:opacity .4s;pointer-events:none}.flow-node.active:after{opacity:1}.flow-node.active{transform:translate(-50%,-54%)}.flow-icon{display:grid;place-items:center;width:38px;height:38px;font-size:27px;border-radius:11px;background:var(--raised);color:var(--flow-color,#7ce7cf);margin-bottom:10px}.flow-node strong{font:600 12px/1.4 ui-monospace,monospace}.flow-node small{font-size:11px;color:var(--muted);margin-top:5px}.flow-trigger{left:12%;--flow-color:#ffa18f}.flow-ai{left:37.5%;--flow-color:#b0a0ff}.flow-route{left:63%;--flow-color:#87c7f7}.flow-save{left:88%;top:25%;--flow-color:#91e7b5}.flow-send{left:88%;top:75%;--flow-color:#f6cc86}.flow-port{position:absolute;right:-4px;top:50%;width:7px;height:7px;background:var(--muted);border-radius:50%}.flow-caption{position:absolute;bottom:18px;left:24px;display:flex;gap:18px;font:9px ui-monospace,monospace;letter-spacing:.15em;color:var(--muted)}.flow-packet{position:absolute;left:0;top:0;width:6px;height:6px;background:#9df6da;border-radius:50%;box-shadow:0 0 12px #7deed4;pointer-events:none;opacity:0}.workflow-console{display:flex;align-items:center;justify-content:space-between;padding:22px 26px;gap:20px;border-top:1px solid var(--line);background:var(--bg)}.workflow-console>div{display:flex;align-items:center;gap:20px}.workflow-step{direction:ltr;font:12px ui-monospace,monospace;color:var(--accent)}.workflow-console p{margin:0;font-size:14px}.workflow-console .btn{font-size:12px;padding:10px 16px}.workflow-disclaimer{font-size:11px;color:var(--muted);margin:0;padding:13px 26px}
@media(max-width:700px){.workflow-toolbar{padding:14px;gap:10px}.workflow-file{font-size:8px;letter-spacing:.04em}.workflow-dots{display:none}.workflow-canvas{height:570px}.flow-node{width:125px;min-height:108px;padding:10px}.flow-trigger{left:50%;top:13%}.flow-ai{left:50%;top:36%}.flow-route{left:50%;top:59%}.flow-save{left:25%;top:83%}.flow-send{left:75%;top:83%}.flow-port{right:50%;top:auto;bottom:-4px}.flow-caption{display:none}.workflow-console{padding:18px;align-items:stretch;flex-direction:column}.workflow-console>div{gap:12px}.workflow-console p{font-size:12px}.workflow-disclaimer{padding:12px 18px}#chat-open.chat-fab{width:56px;height:56px;min-width:56px;padding:4px;border-radius:50%;inset-inline-end:14px;bottom:calc(14px + env(safe-area-inset-bottom))}#chat-open .assistant-name{display:none}#chat-open .assistant-orb{width:46px;height:46px}.chat{bottom:calc(82px + env(safe-area-inset-bottom));max-height:calc(100dvh - 104px)}}
@media(prefers-reduced-motion:reduce){.flow-node,.flow-node:after,#chat-open svg{transition:none}.flow-node.active{transform:translate(-50%,-50%)}.flow-packet{display:none}}
html[data-theme=light] .flow-icon{color:color-mix(in srgb,var(--flow-color) 50%,#172135)}

/* ==========================================================================
   SAMI DEVELOPER V10 — "Aurora" visual layer
   Loaded last in the CSS bundle. It re-tunes the palette, adds an animated
   (GPU-only, transform/opacity) aurora background, glass surfaces, gradient
   accents and the new sections (FAQ, footer, privacy, share, progress UI).
   Every animation respects prefers-reduced-motion and pauses off-screen.
   ========================================================================== */

:root {
  color-scheme: dark;
  --bg: #060914;
  --bg-2: #0a0f1f;
  --surface: #0e1426;
  --raised: #161d35;
  --text: #eef1fb;
  --muted: #a3acc8;
  --accent: #5eead4;
  --green: #34d3b4;
  --violet: #a78bfa;
  --sky: #60a5fa;
  --warm: #fbbf77;
  --line: rgba(165, 180, 235, .12);
  --line-strong: rgba(165, 180, 235, .22);
  --input: #0a0f1d;
  --on-accent: #041318;
  --grad: linear-gradient(115deg, #5eead4 0%, #60a5fa 48%, #a78bfa 100%);
  --grad-soft: linear-gradient(115deg, rgba(94, 234, 212, .16), rgba(96, 165, 250, .10) 50%, rgba(167, 139, 250, .16));
  --glass: color-mix(in srgb, var(--surface) 72%, transparent);
  --shadow: 0 30px 80px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .02);
  --glow: 0 10px 40px -10px rgba(94, 234, 212, .45);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --radius: 22px;
  --aurora-a: rgba(45, 212, 191, .20);
  --aurora-b: rgba(99, 102, 241, .22);
  --aurora-c: rgba(192, 132, 252, .14);
  --grid-dot: rgba(160, 180, 255, .07)
}

html[data-theme=light] {
  color-scheme: light;
  --bg: #f6f7fc;
  --bg-2: #eef1fa;
  --surface: #ffffff;
  --raised: #eef1f9;
  --text: #0f1733;
  --muted: #4d5778;
  --accent: #0f766e;
  --green: #0d9488;
  --violet: #6d28d9;
  --sky: #2563eb;
  --warm: #b45309;
  --line: rgba(30, 45, 100, .11);
  --line-strong: rgba(30, 45, 100, .2);
  --input: #f8f9fe;
  --on-accent: #ffffff;
  --grad: linear-gradient(115deg, #0f766e 0%, #2563eb 50%, #6d28d9 100%);
  --grad-soft: linear-gradient(115deg, rgba(13, 148, 136, .09), rgba(37, 99, 235, .06) 50%, rgba(109, 40, 217, .09));
  --glass: color-mix(in srgb, #ffffff 78%, transparent);
  --shadow: 0 24px 60px -28px rgba(28, 40, 90, .28), 0 0 0 1px rgba(28, 40, 90, .03);
  --glow: 0 12px 34px -12px rgba(37, 99, 235, .45);
  --aurora-a: rgba(20, 184, 166, .16);
  --aurora-b: rgba(99, 102, 241, .14);
  --aurora-c: rgba(236, 72, 153, .08);
  --grid-dot: rgba(30, 45, 100, .07)
}

html { scrollbar-color: var(--raised) var(--bg); -webkit-text-size-adjust: 100% }
body {
  background: var(--bg);
  background-image: none;
  color: var(--text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased
}
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--text) }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px }

/* ---------------------------------------------------------- aurora bg --- */
.aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  contain: strict
}
.aurora::before {
  /* dotted engineering grid that fades out downwards */
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--grid-dot) 1px, transparent 1.2px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%)
}
.aurora::after {
  /* soft vignette keeps text contrast high at the edges */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 120% 90% at 50% 10%, transparent 45%, var(--bg) 100%)
}
.aurora i {
  position: absolute;
  display: block;
  width: 62vmax;
  height: 62vmax;
  border-radius: 50%;
  will-change: transform;
  animation: aurora-float 34s var(--ease) infinite alternate
}
.aurora i:nth-child(1) { top: -30vmax; inset-inline-start: -14vmax; background: radial-gradient(circle at center, var(--aurora-a), transparent 62%) }
.aurora i:nth-child(2) { top: -22vmax; inset-inline-end: -20vmax; background: radial-gradient(circle at center, var(--aurora-b), transparent 62%); animation-duration: 42s; animation-delay: -12s }
.aurora i:nth-child(3) { top: 28vh; inset-inline-start: 30vw; width: 48vmax; height: 48vmax; background: radial-gradient(circle at center, var(--aurora-c), transparent 64%); animation-duration: 50s; animation-delay: -24s }
@keyframes aurora-float {
  0% { transform: translate3d(0, 0, 0) scale(1) }
  50% { transform: translate3d(6vw, 4vh, 0) scale(1.12) }
  100% { transform: translate3d(-4vw, 8vh, 0) scale(.94) }
}

/* ------------------------------------------------------ scroll progress --- */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 60;
  background: var(--grad);
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 60%, transparent)
}
html[dir=rtl] .scroll-progress { transform-origin: 100% 50% }

/* --------------------------------------------------------------- header --- */
.top {
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  border: 1px solid var(--line);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 18px 50px -30px rgba(0, 0, 0, .6)
}
.top.compact { background: color-mix(in srgb, var(--bg) 82%, transparent); border-color: var(--line-strong) }
.brand-mark {
  background: var(--grad);
  color: var(--on-accent);
  box-shadow: var(--glow);
  border-radius: 13px
}
html[data-theme=light] .brand-mark { color: #fff }
.brand-sub { color: var(--muted) }
#nav a { color: var(--muted); transition: color .2s }
#nav a:hover, #nav a:focus-visible, #nav a.current { color: var(--text) }
#nav a.current::after {
  content: "";
  position: absolute;
  inset-inline: 12px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad)
}
.nav-indicator { background: color-mix(in srgb, var(--raised) 80%, transparent) }
.icon-btn {
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  color: var(--text);
  border-radius: 11px;
  transition: border-color .2s, background .2s, transform .2s
}
.icon-btn:hover { border-color: var(--line-strong); background: var(--raised) }
.theme-icon { transition: transform .6s var(--ease) }
html[data-theme=light] .theme-icon { transform: rotate(180deg) }

/* -------------------------------------------------------------- buttons --- */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: var(--grad);
  background-size: 160% 100%;
  background-position: 0 50%;
  color: var(--on-accent);
  font-weight: 700;
  box-shadow: var(--glow), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-position .6s var(--ease)
}
html[data-theme=light] .btn { color: #fff }
.btn::after {
  /* sheen sweep */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .8s var(--ease)
}
.btn:hover { background-position: 100% 50%; box-shadow: 0 16px 44px -12px color-mix(in srgb, var(--violet) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, .4) }
.btn:hover::after { transform: translateX(120%) }
.btn:active { transform: translateY(0) scale(.98) }
.btn.secondary {
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-strong)
}
.btn.secondary:hover { box-shadow: inset 0 0 0 1px var(--accent) }
html[data-theme=light] .btn.secondary { color: var(--text); background: #fff }
.btn.secondary::after { display: none }
.text-link { color: var(--text); transition: color .2s }
.text-link:hover { color: var(--accent) }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em
}
.eyebrow { color: var(--accent) }

/* ----------------------------------------------------------------- hero --- */
.hero::before, .hero-word.key::after { display: none }
.hero { min-height: min(760px, 92vh) }
.hero h1 { text-wrap: balance; max-width: 720px }
html[lang=ar] .hero h1 { font-weight: 700 }
.hero h1 .hero-word.key,
html[data-theme=light] .hero h1 .hero-word.key {
  background: linear-gradient(100deg, var(--accent) 0%, var(--sky) 35%, var(--violet) 65%, var(--accent) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: hero-word-in .6s both var(--ease), text-flow 9s linear infinite;
  animation-delay: var(--delay, 0ms), 0ms
}
@keyframes text-flow { to { background-position: -250% 0 } }
.hero .lead { color: var(--muted) }
.hero-copy .eyebrow .spark { display: inline-block; animation: spin-slow 14s linear infinite; color: var(--violet) }
@keyframes spin-slow { to { transform: rotate(360deg) } }

.availability {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 6px 14px 6px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--green) 35%, transparent);
  background: color-mix(in srgb, var(--green) 10%, transparent);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600
}
.availability::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 70%, transparent);
  animation: live-pulse 2.2s ease-out infinite
}
@keyframes live-pulse { 70%, 100% { box-shadow: 0 0 0 9px transparent } }

.system-art .core {
  background: linear-gradient(150deg, color-mix(in srgb, var(--raised) 90%, transparent), var(--bg-2));
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  box-shadow: 0 0 60px -10px color-mix(in srgb, var(--accent) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, .06)
}
.system-art .core::after {
  /* rotating conic halo */
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--spin, 0deg), transparent 0 55%, var(--accent) 70%, var(--violet) 85%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: halo 6s linear infinite;
  pointer-events: none
}
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg }
@keyframes halo { to { --spin: 360deg } }
.core-symbol { color: var(--accent) }
.core strong span { color: var(--violet) }
.node { border-color: var(--line); background: var(--glass) }
.node > span {
  background: var(--grad-soft);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 22%, transparent)
}
.orbit { border-color: color-mix(in srgb, var(--sky) 25%, transparent) !important }
.beam-dot { fill: var(--accent) }

/* ----------------------------------------------------------- tech strip --- */
.tech-strip { border-color: var(--line); background: color-mix(in srgb, var(--surface) 35%, transparent) }
.tech-strip span { font-weight: 600; letter-spacing: .02em; transition: color .25s }

/* ---------------------------------------------------- generic surfaces --- */
.service-card, .project-card, .process-card, .article-card, .panel,
.architect-panel, .request-panel, .workflow-window, .faq-item, .detail-cta {
  background: linear-gradient(160deg, color-mix(in srgb, var(--surface) 88%, transparent), color-mix(in srgb, var(--bg-2) 78%, transparent));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px)
}
html[data-theme=light] .service-card, html[data-theme=light] .project-card,
html[data-theme=light] .process-card, html[data-theme=light] .article-card,
html[data-theme=light] .panel, html[data-theme=light] .architect-panel,
html[data-theme=light] .request-panel, html[data-theme=light] .faq-item,
html[data-theme=light] .detail-cta, html[data-theme=light] .workflow-window {
  background: linear-gradient(160deg, #ffffff, #fbfcff)
}
.service-card, .project-card, .article-card, .process-card {
  transition: transform .5s var(--ease), border-color .3s, box-shadow .5s var(--ease)
}
.service-card:hover, .project-card:hover, .article-card:hover, .process-card:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong);
  box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--sky) 45%, transparent), 0 0 0 1px var(--line-strong)
}
.spotlight::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 12%, transparent), transparent 65%) }
.spotlight::after { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--violet) 75%, transparent), transparent) border-box }

.section-number { -webkit-text-stroke: 1px color-mix(in srgb, var(--muted) 70%, transparent) }
.section-number::after {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent
}
.section h2 { text-wrap: balance }
.section-head p { max-width: 42ch }

/* services */
.service-card h3 { font-size: 21px }
.service-illustration .block { stroke: var(--accent); fill: color-mix(in srgb, var(--raised) 80%, transparent) }
.service-illustration .ink { fill: var(--violet) }
.service-card > a { color: var(--accent); font-weight: 600; font-size: 13.5px; display: inline-flex; gap: 6px; transition: gap .3s var(--ease) }
.service-card > a:hover { gap: 12px }

/* projects */
.project-visual {
  background:
    radial-gradient(ellipse at 30% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(ellipse at 90% 100%, color-mix(in srgb, var(--violet) 20%, transparent), transparent 60%),
    var(--bg-2) !important;
  overflow: hidden
}
.project-visual img { transition: transform .9s var(--ease) }
.project-card:hover .project-visual img { transform: scale(1.04) }
.project-glyph {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  transition: transform .8s var(--ease)
}
.project-card:hover .project-glyph { transform: scale(1.12) rotate(-6deg) }
.project-number { color: var(--muted) }
.featured-label { color: var(--warm) !important }
.search input { border-radius: 14px; background: var(--glass); border-color: var(--line) }

/* process: animated connector line */
.process-grid { position: relative }
.process-card > span {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  font-weight: 700
}

/* about band */
.about-band {
  background: linear-gradient(110deg, color-mix(in srgb, var(--accent) 5%, transparent), transparent 45%, color-mix(in srgb, var(--violet) 7%, transparent));
  border-block: 1px solid var(--line)
}
.maker-monogram {
  background: var(--grad-soft), var(--surface);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--accent) 45%, transparent)
}
.maker-monogram { color: var(--text) }
.maker-monogram span { color: var(--violet) }
.maker-links a, #social-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  color: var(--text);
  font-size: 12.5px;
  transition: border-color .2s, transform .3s var(--ease), color .2s
}
.maker-links a:hover, #social-links a:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px) }

/* architect + lab + playground */
.architect-panel { background: radial-gradient(ellipse at 0 0, color-mix(in srgb, var(--violet) 14%, transparent), transparent 55%), radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%), var(--surface) }
html[data-theme=light] .architect-panel { background: radial-gradient(ellipse at 0 0, rgba(109, 40, 217, .06), transparent 55%), #fff }
.large-symbol { color: var(--violet) }
.architect-input:focus-within::before { border-color: var(--accent) }
.lab-step { border-radius: 16px }
.lab-step.active { border-color: var(--accent); background: var(--grad-soft) }
.tab { border-radius: 999px }
.tab.active { background: var(--grad); color: var(--on-accent); border-color: transparent }
html[data-theme=light] .tab.active { color: #fff }

/* forms */
input, textarea, select {
  background: var(--input);
  border-color: var(--line);
  border-radius: 13px;
  transition: border-color .2s, box-shadow .2s
}
input:focus, textarea:focus, select:focus {
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
  outline: none
}
input:user-invalid, textarea:user-invalid { border-color: #f87171 }
.consent a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px }
.request-panel { overflow: hidden; position: relative }
.request-intro {
  background:
    radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%),
    radial-gradient(ellipse at 0% 100%, color-mix(in srgb, var(--violet) 16%, transparent), transparent 55%) !important
}
.request-sign span { color: var(--accent) }
.request-perks { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px }
.request-perks li { display: flex; align-items: center; gap: 12px; color: var(--text); font-size: 14px }
.request-perks li::before {
  content: "✓";
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--grad-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700
}
#request-status.success { color: var(--green) }

/* --------------------------------------------------------------- FAQ --- */
.faq-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start }
.faq-layout .section-head { display: block; position: sticky; top: 120px }
.faq-layout .section-head p { margin-top: 14px }
.faq-list { display: grid; gap: 12px }
.faq-item { padding: 0; overflow: hidden; transition: border-color .3s }
.faq-item[open] { border-color: color-mix(in srgb, var(--accent) 35%, transparent) }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 26px;
  font-weight: 600;
  font-size: 16.5px;
  color: var(--text)
}
.faq-item summary::-webkit-details-marker { display: none }
.faq-item summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid var(--line);
  color: var(--accent);
  font-size: 18px;
  transition: transform .4s var(--ease), background .3s
}
.faq-item[open] summary::after { transform: rotate(45deg); background: var(--grad-soft) }
.faq-item .faq-answer { padding: 0 26px 24px; color: var(--muted); line-height: 1.95 }
.faq-item .faq-answer p { margin: 0 }

/* ------------------------------------------------------------- footer --- */
.site-footer { margin-top: 40px; padding: 0 0 40px; border-top: 1px solid var(--line); background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface) 45%, transparent)) }
.footer-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 56px 0 46px;
  border-bottom: 1px solid var(--line)
}
.footer-cta h2 { margin: 0; font-size: clamp(26px, 3.2vw, 42px); text-wrap: balance }
.footer-cta h2 span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding: 44px 0 34px }
.footer-grid h3 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; font-weight: 600 }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px }
.footer-grid ul a { color: var(--text); font-size: 14px; opacity: .85; transition: opacity .2s, color .2s }
.footer-grid ul a:hover { opacity: 1; color: var(--accent) }
.footer-brand .brand { gap: 0; font-size: 20px; font-weight: 800; letter-spacing: .02em; justify-content: flex-start }
.footer-brand p { margin: 14px 0 0; max-width: 36ch; font-size: 14px }
.site-footer #social-links { display: flex; flex-wrap: wrap; gap: 10px }
.site-footer .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted) }
.site-footer .footer-links { display: flex; gap: 18px; flex-wrap: wrap }
.site-footer .footer-bottom a:hover { color: var(--accent) }

/* -------------------------------------------- floating actions (fab) --- */
#chat-open.chat-fab { right: 20px; left: auto; background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-color: var(--line-strong) }
#chat-open .assistant-orb { background: radial-gradient(circle at 30% 20%, #d9fff6, #5eead4 40%, #6366f1 100%); color: #061018 }
.chat { right: 20px; left: auto }
.chat { background: color-mix(in srgb, var(--surface) 94%, transparent); border-color: var(--line-strong); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px) }
.bubble.user { background: var(--grad); color: var(--on-accent) }
html[data-theme=light] .bubble.user { color: #fff }
.to-top {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 39;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 0;
  padding: 0;
  color: var(--text);
  background: conic-gradient(var(--accent) var(--p, 0%), var(--line-strong) 0);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(14px) scale(.9);
  pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease)
}
.to-top::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--surface) }
.to-top svg { position: relative; width: 18px; height: 18px }
.to-top.show { opacity: 1; transform: none; pointer-events: auto }
.to-top:hover svg { transform: translateY(-2px); transition: transform .25s }
.wa-fab {
  position: fixed;
  bottom: 88px;
  right: 24px;
  z-index: 39;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #25d366;
  color: #fff;
  box-shadow: 0 12px 30px -10px rgba(37, 211, 102, .7);
  transition: transform .3s var(--ease)
}
.wa-fab:hover { transform: translateY(-3px) scale(1.05) }
.wa-fab svg { width: 24px; height: 24px }

/* toast */
.toast-host { position: fixed; inset-inline: 0; bottom: 26px; z-index: 70; display: grid; justify-items: center; pointer-events: none }
.toast {
  padding: 11px 18px;
  border-radius: 14px;
  background: var(--raised);
  color: var(--text);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
  font-size: 13.5px;
  animation: toast-in .45s var(--ease) both
}
.toast.out { animation: toast-out .3s ease both }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.96) } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px) } }

/* ------------------------------------------------- reveal choreography --- */
.reveal { transition: transform .9s var(--ease), opacity .9s var(--ease), filter .9s var(--ease) }
.reveal.pending { opacity: 0; transform: translateY(28px) scale(.985); filter: blur(4px) }
.stagger > * { transition-delay: calc(var(--i, 0) * 70ms) }


/* ------------------------------------------------------- detail pages --- */
.reading-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0) }
html[dir=rtl] .reading-progress { transform-origin: 100% 50% }
.detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 30px; color: var(--muted); font-size: 13.5px }
.detail-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong) }
.detail-article h1 { text-wrap: balance }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 46px 0 0; padding-top: 26px; border-top: 1px solid var(--line) }
.share > span { color: var(--muted); font-size: 13px; margin-inline-end: 6px }
.share a, .share button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .2s, color .2s, transform .3s var(--ease)
}
.share a:hover, .share button:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px) }
.formatted a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px }
.detail-cta { background: var(--grad-soft), var(--surface) !important }

/* privacy / legal page */
.legal { padding-block: 56px 90px; max-width: 820px }
.legal h1 { font-size: clamp(32px, 4.6vw, 50px); margin: 10px 0 14px }
.legal h2 { font-size: 22px; margin: 38px 0 10px }
.legal p, .legal li { color: var(--muted); line-height: 1.95 }
.legal ul { padding-inline-start: 22px }
.legal .updated { font-size: 13px }

/* 404 */
.not-found h1 { font-size: clamp(34px, 5vw, 60px) }
.not-found .code {
  font: 800 clamp(90px, 18vw, 180px)/1 ui-monospace, monospace;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0 0 10px;
  letter-spacing: -.04em
}

/* ---------------------------------------------------------- responsive --- */
@media (max-width: 1000px) {
  .faq-layout { grid-template-columns: 1fr; gap: 28px }
  .faq-layout .section-head { position: static }
  .footer-grid { grid-template-columns: 1fr 1fr }
  .footer-brand { grid-column: 1 / -1 }
}
@media (max-width: 800px) {
  #nav { background: var(--surface) !important; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); border-color: var(--line-strong) !important }
  html[data-theme=light] #nav { box-shadow: 0 30px 60px -24px rgba(28, 40, 90, .35) }
  #nav a.current::after { display: none }
  #nav a.current { background: var(--grad-soft); color: var(--text) }
}
@media (max-width: 700px) {
  .aurora i { width: 90vmax; height: 90vmax; animation-duration: 46s }
  .hero { min-height: auto }
  .footer-cta { flex-direction: column; align-items: flex-start; padding: 42px 0 34px }
  .footer-grid { grid-template-columns: 1fr; gap: 28px }
  .faq-item summary { padding: 18px 20px; font-size: 15.5px }
  .faq-item .faq-answer { padding: 0 20px 20px }
  .to-top { bottom: 16px; left: 16px; width: 44px; height: 44px }
  .wa-fab { bottom: 76px; right: 18px; width: 46px; height: 46px }
  .service-card:hover, .project-card:hover, .article-card:hover, .process-card:hover { transform: none }
  .availability { font-size: 12px }
  #chat-open.chat-fab { right: 14px }
  .chat { right: 10px }
}
@media (hover: none) {
  .btn::after { display: none }
}

@media (prefers-reduced-motion: reduce) {
  .aurora i, .hero h1 .hero-word.key, .system-art .core::after, .availability::before,
  .hero-copy .eyebrow .spark { animation: none !important }
  .reveal.pending { filter: none }
  .scroll-progress, .reading-progress { display: none }
}

/* Pause decorative loops when the tab is hidden or the user paused motion. */
.motion-paused .aurora i, .motion-paused .system-art .core::after { animation-play-state: paused }

@media print {
  .aurora, .top, .chat-fab, .chat, .to-top, .wa-fab, .scroll-progress, .reading-progress, .share, .toast-host { display: none !important }
  body { background: #fff; color: #000 }
}

/* Generic mobile `nav` rules in style.css target the header menu only. */
nav.breadcrumbs { display: block !important; position: static; padding: 0; background: none; border: 0; box-shadow: none }