/* A living system observed from the future. Original artwork stays intact. */
:root {
  color-scheme: dark;
  --paper: #060d0e;
  --ink: #edf6ee;
  --muted: #a8beb3;
  --line: #294038;
  --sage: #10231b;
  --signal: #b9f7bd;
  --signal-ink: #102218;
  --surface: #0b1717;
  --purple: #c7b3e9;
  --blue: #a2d9eb;
  --gold: #e3c794;
  --radius: 12px;
  --heading-section-size: clamp(24px, 2.2vw, 30px);
  --heading-product-size: clamp(20px, 1.85vw, 25px);
  --heading-detail-size: clamp(17px, 1.35vw, 19px);
  --heading-label-gap: 16px;
  --heading-copy-gap: 16px;
}
body {
  position: relative;
  isolation: isolate;
  background: radial-gradient(ellipse at 14% 8%, #163b2b66, transparent 29%),
    radial-gradient(ellipse at 85% 35%, #15353c4d, transparent 25%), var(--paper);
  color: var(--ink);
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .22;
  background-image: radial-gradient(1px 1px at 17px 31px, #d0f7df 80%, transparent),
    radial-gradient(1px 1px at 93px 121px, #afcdd8 80%, transparent),
    radial-gradient(1px 1px at 151px 41px, #b6d8bd 80%, transparent);
  background-size: 257px 263px, 379px 397px, 541px 509px;
  mask-image: linear-gradient(#000, #0007 70%, transparent);
}
::selection { background: #b9f7bd; color: #102218; }
:focus-visible { outline-color: #c7ffcc; }
.site-header { background: #060d0ed9; backdrop-filter: blur(18px); border-color: transparent; }
.site-header.is-scrolled { border-color: #284236; }
.header-inner { height: 92px; border-bottom: 1px solid #b9f7bd24; }
.brand { color: #edf6ee; }
.brand .brand-mark { filter: brightness(0) invert(1); }
.brand-word > span { color: #b4c8b8; }
.main-nav a { color: #c0d1c6; }
.main-nav a:hover { color: #d3ffd3; }
.icon-button { border-color: #45604e; color: #dbefdf; }
.button { border-radius: 5px; }
.button-dark { background: var(--signal); color: var(--signal-ink); border: 1px solid #d4ffd4; box-shadow: 0 0 25px #b9f7bd0b; }
.button-dark:hover { background: #d0ffd0; box-shadow: 0 0 30px #b9f7bd24; transform: translateY(-2px); }
.text-link { color: #d4e8d8; }
.text-link:hover { color: #c7ffcc; }
.section-label, .eyebrow { color: #bed7c2; }
.label-line { background: #a6edb0; box-shadow: 0 0 12px #95ec9c55; }
.english-label { color: #acc3b3; }
.live-dot { background: #b9f7bd; box-shadow: 0 0 0 5px #b9f7bd0d, 0 0 16px #b9f7bd80; }

/* The warm image becomes an observation window into the organization. */
.hero { min-height: 750px; padding-top: 42px; padding-bottom: 100px; }
.hero-copy { max-width: 460px; padding-bottom: 0; padding-left: 24px; }
.hero-copy .eyebrow { margin-bottom: 16px; font-size: 11px; }
.hero h1 { color: #edf6ee; font-size: clamp(28px, 2.6vw, 36px); line-height: 1.65; font-weight: 500; text-wrap: balance; }
.hero-emphasis { display: block; color: #b9f7bd; font-size: 1.25em; line-height: 1.55; font-weight: 550; margin-top: 4px; }
.hero-emphasis svg { display: none; }
.hero-emphasis::after { display: none; }
.hero-period { color: #b9f7bd; margin: 0; }
.hero-description { color: #b3c9bd; margin-top: 22px; }
.hero-actions { margin-top: 24px; gap: 18px; }
.hero-signature { color: #aec6b5; margin-top: 26px; }
.hero-signature a { color: #d0edcf; }
.hero-signature .signature-rule { background: #618e68; }
.signature-dot { color: #789b7d; }
.scroll-cue { color: #b2c6b6; }
.scroll-line, .scroll-line::after { background-color: #698b6a; border-color: #9ac79b; }
.growth-hero-art { position: relative; isolation: isolate; }
.growth-hero-art::before { content: ''; position: absolute; inset: 7% 7% 14%; z-index: -1; border: 1px solid #b9f7bd22; border-radius: 50%; transform: rotate(-8deg) scaleY(1.18); box-shadow: 0 0 70px #4bda7314, inset 0 0 60px #4bda7308; pointer-events: none; }
.scene-telemetry { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 13px; color: #bad2c0; font: 9px/1.6 Arial, sans-serif; letter-spacing: 1.8px; direction: ltr; }
.scene-telemetry > span:first-child { display: flex; align-items: center; gap: 9px; }
.scene-telemetry i { width: 5px; height: 5px; border-radius: 50%; background: #b9f7bd; box-shadow: 0 0 10px #b9f7bd; }
.growth-hero-scene { padding: 12px 12px 0; border: 1px solid #9bd7a744; border-radius: 4px 22px 4px 4px; background: linear-gradient(140deg, #b9f7bd14, #16272380 30%, #0c1616cc); box-shadow: 0 24px 70px #0006, 0 0 40px #b9f7bd06; }
.growth-hero-scene picture { border: 1px solid #d4e3c466; border-radius: 2px 13px 2px 2px; background: #e8e9da; clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 17px, 100% 100%, 17px 100%, 0 calc(100% - 17px)); }
.growth-hero-image { filter: none; }
.hero-image-caption { padding: 15px 4px; color: #c3dec6; }
.growth-badge .icon { color: #b9f7bd; }
.hero-image-caption > span[lang] { color: #afcbb7; }
.hero-product-links { gap: 8px; margin-top: 20px; }
.hero-product-pill { position: relative; inset: auto; border-color: #4f755547; border-radius: 4px; background: #13271c66; box-shadow: inset 0 1px #b9f7bd09; }
.portal-connections { display: block; width: 100%; height: 35px; margin-block: -1px -14px; overflow: visible; color: #96dba1; }
.portal-connections path { stroke: currentColor; stroke-width: 1; opacity: .5; }
.portal-connections circle { fill: #b9f7bd; }
.hero-product-pill::after { content: ''; position: absolute; right: 0; top: 14px; height: 22px; width: 2px; background: #8fc69a; }
.hero-product-pill:hover { border-color: #8ac99a; background: #1d3827; box-shadow: 0 0 22px #81df8e12; }
.hero-product-pill strong { color: #e9f2e7; }
.hero-product-pill small { color: #b7cdbb; }
.product-icon.purple { color: #d9c7f4; background: #ad8fd51a; }
.product-icon.blue { color: #b1e3f1; background: #87c3d51a; }
.product-icon.gold { color: #e9d4ac; background: #d3b77a1a; }

/* Technical surfaces and precise frames continue through every section. */
.intro-section { background: linear-gradient(100deg, #0a1b15, #10201988); border-color: #a2dfac22; }
.intro-grid h2, .section-heading h2, .approach-intro h2, .faq-intro h2, .contact-surface h2 { color: #edf6ee; }
.muted-heading { color: #a4c7aa; }
.intro-copy p, .section-heading > p, .product-story > p, .approach-intro > p, .approach-list p, .faq-intro p, .faq-list details > div, .contact-surface p { color: #b4cbbd; }
.principles-strip, .principles-strip > div + div { border-color: #55765b55; }
.principles-strip .mini-icon { color: #a6dfaf; }
.principles-strip strong { color: #e2f0e1; }
.principles-strip > div > span:last-child { color: #b2c9b6; }
.product-explorer { --accent: #d0b9ef; --pale: #231d32; border-color: #486457; background: #0c1718; border-radius: 8px; box-shadow: 0 15px 60px #0003; }
.product-explorer[data-active-product=trustino] { --accent: #a4dcea; --pale: #162a32; }
.product-explorer[data-active-product=idento] { --accent: #e6c98f; --pale: #2b2518; }
.product-tabs { background: #0e1c1b; border-color: #476154; }
.product-tab + button { border-color: #334d3e; }
.product-tab[aria-selected=true] { background: #20352b; }
.product-tab:hover { background: #192e24; }
.product-tab strong { color: #e9f4e7; }
.product-tab small { color: #c0d5c4; }
.product-tab[aria-selected=true]::after { box-shadow: 0 0 15px var(--accent); }
.product-story h3 { color: #f0f5ec; }
.check-list { color: #c3d7c7; }
.product-story .text-link { color: #d3e7d4; }
.product-caption { color: #afc7b5; }
.product-caption > span { background: #b9f7bd; box-shadow: 0 0 9px #b9f7bd88; }
.product-visual { background: linear-gradient(145deg, #1f1b2c, #10171d); }
.product-visual::before, .product-visual::after { border-color: #8c73b744; }
.visual-blue { background: linear-gradient(145deg, #142c33, #0c1a20); }
.visual-blue::before, .visual-blue::after { border-color: #80bac944; }
.visual-gold { background: linear-gradient(145deg, #2a261b, #151b16); }
.visual-gold::before, .visual-gold::after { border-color: #cab37644; }
.visual-overline { color: #d0c4e2; }
.visual-overline > span { border-color: #b6a1cd66; }
.visual-blue .visual-overline { color: #bddce3; }
.visual-blue .visual-overline > span { border-color: #8ec2cb66; }
.visual-gold .visual-overline { color: #dfd3b5; }
.visual-gold .visual-overline > span { border-color: #c7b88766; }
.demo-window { background: #12221f; border-color: #9dc5ac44; border-radius: 11px; box-shadow: 0 30px 55px #0005; color: #e4eee2; }
.demo-window-top { border-color: #45635066; }
.window-dots i { background: #597362; }
.window-dots i:first-child { background: #a6d99d; }
.work-demo-heading small, .demo-task small { color: #b5c9b6; }
.demo-avatar { background: #3a2e49; border-color: #645279; color: #e4d7ef; }
.work-progress { background: #292535; }
.work-progress > div { color: #d2c8df; }
.progress-track { background: #4c405b; }
.progress-track i { background: #c3a4e5; }
.demo-task { border-color: #39514066; }
.task-check { border-color: #789d7a; }
.done .task-check { background: #315136; border-color: #719a6a; color: #d0f5bd; }
.task-state { color: #c1ddb4; }
.task-state.active { background: #514225; color: #f0d293; }
.floating-note { background: #1b3027; border-color: #668263; color: #dbeed5; box-shadow: 0 12px 25px #0003; }
.visual-doodle { color: #c6a7e2; }
.visual-blue .visual-doodle { color: #95d0df; }
.visual-gold .visual-doodle { color: #d8c284; }
.finance-heading, .sample-amount > span, .finance-legend, .finance-bottom { color: #b8cfc0; }
.sample-tag { background: #294232; color: #c3dfb7; }
.sample-amount strong { color: #c4edf1; }
.chart-bars { border-color: #59766d; background: repeating-linear-gradient(to top, transparent 0, transparent 32px, #b6d4c01a 33px, transparent 34px); }
.chart-bars > i { background: #709daa; }
.chart-bars > i::after { background: #bed3b9; }
.chart-bars > i:last-child { background: #b1e4e9; }
.finance-legend i { background: #97cbd5; }
.finance-legend > span:nth-child(2) i { background: #b5d6b3; }
.finance-bottom { border-color: #53725a66; }
.finance-bottom strong { color: #cbe9c0; }
.asset-cube { background: #393624; }
.asset-identity bdi, .asset-attributes dt { color: #c6c7ac; }
.asset-attributes > div { border-color: #6f755347; }
.asset-attributes dd { color: #d5dfc1; }
.asset-status i { background: #c0e298; }
.asset-history { background: #353623; color: #e0d7aa; }
.history-dot { background: #e0ca89; }
.asset-history > i { background: #9b9664; }

/* The growth section becomes a living-system chamber. */
.growth-surface { background: radial-gradient(ellipse at 8% 100%, #315e3744, transparent 60%), #0c201a; border: 1px solid #779f7166; border-radius: 4px 30px 4px 4px; box-shadow: inset 0 1px #c4ffc916, 0 0 60px #b9f7bd05; }
.growth-surface::before { border-color: #b9f7bd12; box-shadow: 0 0 0 55px #b9f7bd03, 0 0 0 110px #b9f7bd02; }
.section-label.light { color: #bfd8bd; }
.growth-copy h2 { color: #edf6ee; }
.growth-copy h2 > span { color: #c2f6b7; }
.growth-copy > p, .growth-detail p { color: #bed7c1; }
.growth-footnote, .growth-hint, .growth-example p { color: #c0d9bd; }
.growth-footnote .icon, .growth-detail-icon { color: #c5f6ac; }
.growth-steps { border-color: #6f9566; }
.growth-step { color: #bad5b7; }
.growth-step > span { color: #c0d6ad; }
.growth-step strong, .growth-step small { color: #c0d7ba; }
.growth-step[aria-pressed=true] strong { color: #d9ffc7; }
.growth-step[aria-pressed=true]::after { background: #c7f5a7; box-shadow: 0 0 13px #b8ed9999; }
.growth-detail-kicker { color: #c7dda9; }
.growth-detail h3 { color: #e5f5dc; }
.growth-detail-icon { border-color: #799963; background: #6c945214; }
.growth-organization-art { width: 100%; max-width: 420px; margin: 22px 0 0; border: 1px solid #65845d80; border-radius: 3px 20px 3px 3px; overflow: hidden; background: #0a1913; }
.growth-art-frame { position: relative; width: 100%; aspect-ratio: 3 / 2; }
.growth-art-frame picture { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 240ms ease; }
.growth-art-frame picture.is-active, .growth-art-frame picture.is-previous { opacity: 1; }
.growth-art-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.growth-organization-art figcaption { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 14px; font-size: 11px; line-height: 1.8; color: #c0d9bd; border-top: 1px solid #38563f; }
.growth-art-progress { display: flex; gap: 5px; flex-shrink: 0; }
.growth-art-progress i { width: 22px; height: 3px; border-radius: 2px; background: #36513e; }
.growth-art-progress i:first-child,
.growth-surface[data-growth-stage="1"] .growth-art-progress i:nth-child(2),
.growth-surface[data-growth-stage="2"] .growth-art-progress i { background: #c7f5a7; }
@media (prefers-reduced-motion: reduce) {
  .growth-art-frame picture { transition: none; }
}
.growth-example { border-color: #5d7c52; }
.organization-outline { fill: #020d0b66; stroke: #9eca7c88; }
.organization-ground { stroke: #7d9d68; }
.organization-caption { color: #bfd4ae; }
.tree-trunk { stroke: #d0f3af; }
.tree-leaf { fill: #94c477; stroke: #c0e99d; }
.tree-leaf.leaf-light { fill: #d5efb6; stroke: #e1ffc1; }
.tree-module { fill: #183122; stroke: #a0c982; }
.module-symbol { stroke: #dcf8c2; }
.tree-origin { fill: #dfffbb; }
.approach-list article { border-color: #385441; }
.approach-number { color: #b2d6a5; }
.approach-list h3 { color: #e2f1df; }
.approach-list article > .icon { color: #afd399; }
.approach-seal { color: #b4da9e; }
.faq-section { background: #091711c9; border-color: #55784b55; }
.faq-list details, .faq-list details:first-child { border-color: #3b573d; }
.faq-list summary { color: #e2efdd; }
.faq-list summary:hover { color: #c1f1b4; }
.faq-toggle { border-color: #719367; color: #c0e3ae; }
.faq-intro .text-link, .faq-list .text-link { color: #c1ebb7; }
.contact-surface { background: radial-gradient(ellipse at 10% 70%, #33572d55, transparent 57%), #11241b; border-color: #71986777; border-radius: 4px 30px 4px 4px; }
.contact-art { color: #b9d69a; }
.contact-art svg { stroke: #8ab36d; }
.contact-art svg image { filter: brightness(0) invert(1); opacity: .9; }
.contact-phone { color: #deefd9; }
.footer-main > p, .footer-main nav, .footer-bottom { color: #b3cab5; }
.footer-contact { color: #d6ebd0; }
.footer-bottom { border-color: #38553c; }
.footer-bottom > span[lang] { color: #a9c4a7; }
.back-top { color: #c5e3bd; }
.not-found p { color: #b6ccbb; }
.not-found-code { color: #b9f7bd; }
.not-found-brand { color: #edf6ee; }

/* Shared Persian heading scale and spacing below the hero. */
.section-label { display: flex; width: fit-content; max-width: 100%; line-height: 1.8; }
.product-story > .english-label, .growth-detail-kicker { display: block; }
.intro-grid h2, .section-heading h2, .growth-copy h2,
.approach-intro h2, .faq-intro h2, .contact-surface h2 {
  font-size: var(--heading-section-size);
  font-weight: 550;
  line-height: 1.65;
  letter-spacing: normal;
  text-wrap: balance;
}
.intro-grid { margin-top: var(--heading-label-gap); row-gap: var(--heading-copy-gap); }
.section-heading h2, .approach-intro h2, .faq-intro h2, .contact-surface h2 {
  margin-top: var(--heading-label-gap);
}
.growth-copy h2 { margin-block: var(--heading-label-gap) var(--heading-copy-gap); }
.approach-intro > p, .faq-intro > p, .contact-surface p { margin-top: var(--heading-copy-gap); }
.section-heading > p { padding-bottom: 0; }
.product-story h3 {
  font-size: var(--heading-product-size);
  font-weight: 550;
  line-height: 1.65;
  letter-spacing: normal;
  text-wrap: balance;
  margin-block: var(--heading-label-gap) var(--heading-copy-gap);
}
.approach-list h3, .growth-detail h3 {
  font-size: var(--heading-detail-size);
  font-weight: 550;
  line-height: 1.65;
  text-wrap: balance;
}
.approach-list p { margin-top: 10px; }
.growth-detail h3 { margin-block: 8px 12px; }
.work-demo-heading h4, .asset-identity h4 {
  font-size: clamp(16px, 1.3vw, 18px);
  font-weight: 550;
  line-height: 1.6;
}

@media (max-width: 959px) {
  .growth-organization-art { margin-inline: auto; }
  .hero { min-height: 660px; }
  .hero-copy { padding-left: 15px; }
  .hero h1 { font-size: clamp(23px, 3.15vw, 28px); }
  .scene-telemetry { font-size: 8px; letter-spacing: 1.2px; }
  .growth-hero-scene { padding: 8px 8px 0; }
  .hero-product-pill small { font-size: 10px; }
}
@media (max-width: 719px) {
  :root { --heading-label-gap: 14px; --heading-copy-gap: 14px; }
  .header-inner { height: 78px; }
  .site-header { background: #060d0ef2; }
  .main-nav { background: #0c1c16; border-color: #4e704c; }
  .main-nav a:hover { background: #213c28; }
  .hero { padding-top: 36px; min-height: 0; padding-bottom: 70px; }
  .hero-copy { max-width: 480px; padding: 0; }
  .hero h1 { font-size: clamp(24px, 6.7vw, 32px); font-weight: 500; }
  .scene-telemetry { font-size: 7px; margin-bottom: 12px; }
  .hero-image-caption { font-size: 10px; }
  .growth-hero-scene { border-radius: 3px 20px 3px 3px; }
  .growth-hero-scene picture { border-radius: 2px 10px 2px 2px; }
  .growth-hero-art { margin-top: 38px; }
  .hero-product-links { margin-top: 16px; }
  .hero-product-pill { border-radius: 3px; }
  .hero-product-pill small { font-size: 10px; }
  .principles-strip > div + div { border-color: #55765b55; }
  .growth-surface, .contact-surface { border-radius: 3px 22px 3px 3px; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .growth-hero-scene { transition: transform .5s, box-shadow .5s; }
  .growth-hero-scene:hover { transform: perspective(1300px) rotateY(-2deg) translateY(-3px); box-shadow: 0 30px 80px #0008, 0 0 35px #b9f7bd12; }
}
@media (prefers-reduced-motion: reduce) {
  .growth-hero-scene { transform: none; transition: none; }
}
