@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root {
  --rumata-teal: #2c7865;
  --rumata-teal-strong: #1d5247;
  --rumata-lime: #90d26d;
  --rumata-mint: #d9edbf;
  --rumata-orange: #ff9800;
  --rumata-orange-strong: #e88900;
  --rumata-ink: #183a34;
  --rumata-ink-dark: #0d2521;
  --rumata-canvas: #f8faf5;
}


* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body:not(.home) main { background: linear-gradient(180deg, #fbf8ed 0%, #eef3dd 48%, #f8f3e6 100%); }
[data-theme='dark'] body:not(.home) main { background: linear-gradient(180deg, #0d2521 0%, #143029 48%, #0d2521 100%); }
a { color: inherit; text-decoration: none; }
button, textarea { font: inherit; }
button { color: inherit; }
svg { display: block; }
.wrap { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

:root {
  --site-header-height: 64px;
  --canvas: #f8faf5;
  --surface: #fff;
  --surface-2: #f1f6e8;
  --surface-mint: #d9edbf;
  --text: #2a413c;
  --strong: #122e29;
  --muted: #5c726c;
  --border: #dde7cf;
  --border-strong: #c4d6ac;
  --teal: var(--rumata-teal);
  --teal-strong: var(--rumata-teal-strong);
  --lime: var(--rumata-lime);
  --mint: var(--rumata-mint);
  --orange: var(--rumata-orange);
  --ink: var(--rumata-ink);
  --ink-dark: var(--rumata-ink-dark);
  --shadow-sm: 0 2px 8px -2px rgba(24, 58, 52, .1);
  --shadow-md: 0 8px 24px -6px rgba(24, 58, 52, .14);
  --shadow-lg: 0 18px 56px -18px rgba(24, 58, 52, .2);
  color-scheme: light;
}

[data-theme='dark'] {
  --canvas: #0d2521;
  --surface: #143029;
  --surface-2: #18382f;
  --surface-mint: #1f4a3d;
  --text: #cde0d4;
  --strong: #eaf6e3;
  --muted: #8fa89e;
  --border: #214a40;
  --border-strong: #2f6354;
  --shadow-sm: 0 2px 10px -2px rgba(0, 0, 0, .24);
  --shadow-md: 0 10px 28px -8px rgba(0, 0, 0, .38);
  --shadow-lg: 0 22px 64px -20px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

:where(a, button, textarea, summary):focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 8px;
}
[tabindex='-1']:focus { outline: none; }
.skip-link {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 10px;
  transform: translateY(-160%);
  border: 2px solid var(--strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--strong);
  padding: 10px 16px;
  font-weight: 700;
  box-shadow: var(--shadow-md);
  transition: transform .15s ease;
}
.skip-link:focus { transform: translateY(0); }
[data-theme='dark'] :where(a, button, textarea, summary):focus-visible { outline-color: var(--lime); }
.node-glyph { height: 28px; width: auto; }
.wordmark { display: inline-flex; align-items: center; gap: 9px; color: var(--strong); font: 600 19px/1 'Space Grotesk', sans-serif; }
.wordmark svg { height: 28px; width: auto; }
.icon { width: 19px; height: 19px; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  border-bottom: 1px solid transparent;
  background: var(--canvas);
  transition: background-color .24s ease, border-color .24s ease, box-shadow .24s ease, backdrop-filter .24s ease;
}
.home .site-header { background: transparent; }
.site-header.scrolled {
  border-bottom-color: color-mix(in srgb, var(--border) 75%, transparent);
  background: color-mix(in srgb, var(--canvas) 86%, transparent);
  box-shadow: 0 6px 24px -20px rgba(24, 58, 52, .28);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.nav { width: 100%; height: var(--site-header-height); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-inline: clamp(20px, 2.5vw, 42px); }
.brand { justify-self: start; transition: transform .2s; }
.brand:hover { transform: translateY(-1px); }
.nav-links { display: flex; gap: 28px; font-size: 14px; font-weight: 500; }
.nav-links a { color: var(--muted); transition: color .2s; }
.nav-links a:hover { color: var(--strong); }
.nav-actions { display: flex; justify-self: end; align-items: center; gap: 10px; }
.theme-button, .menu-button { border: 0; background: transparent; color: var(--strong); cursor: pointer; }
.theme-button { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; }
.theme-button:hover { background: color-mix(in srgb, var(--teal) 10%, transparent); }
.theme-sun { display: none; }
[data-theme='dark'] .theme-moon { display: none; }
[data-theme='dark'] .theme-sun { display: block; }
.menu-button { display: none; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 999px;
  background: var(--orange);
  color: var(--ink-dark) !important;
  font-weight: 650;
  padding: 12px 24px;
  box-shadow: 0 9px 28px -10px rgba(255, 152, 0, .55);
  transition: transform .2s, background .2s, box-shadow .2s;
}
.button:hover { background: var(--rumata-orange-strong); transform: translateY(-1px); box-shadow: 0 13px 32px -10px rgba(255, 152, 0, .65); }
.button.compact { padding: 8px 17px; font-size: 14px; }
.button .icon, .text-link .icon, .example-grid a .icon { width: 16px; height: 16px; }
.button.secondary { border: 1px solid rgba(217, 237, 191, .28); background: transparent; box-shadow: none; color: var(--mint) !important; }
.button.secondary:hover { background: rgba(255, 255, 255, .06); }

.brand-wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 70% at 15% 10%, rgba(144, 210, 109, .3), transparent 60%),
    radial-gradient(55% 60% at 90% 20%, rgba(217, 237, 191, .55), transparent 60%),
    radial-gradient(70% 80% at 70% 100%, rgba(44, 120, 101, .12), transparent 60%);
}
[data-theme='dark'] .brand-wash {
  background:
    radial-gradient(60% 70% at 15% 10%, rgba(144, 210, 109, .1), transparent 60%),
    radial-gradient(55% 60% at 90% 20%, rgba(44, 120, 101, .22), transparent 60%),
    radial-gradient(70% 80% at 70% 100%, rgba(13, 37, 33, .5), transparent 60%);
}
.brand-grid { position: absolute; inset: 0; opacity: .09; background-image: radial-gradient(var(--teal) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(#000, transparent 88%); }

.reveal-ready { transform: translateY(24px); transition: transform .65s cubic-bezier(.22, 1, .36, 1); }
.reveal-ready.revealed { transform: translateY(0); }
.effect-card { transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s, border-color .3s; }
.effect-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--teal) 42%, var(--border)); box-shadow: var(--shadow-md); }

.section { padding-block: 84px; }
.section-heading { max-width: 760px; }
.section-heading.center { margin-inline: auto; text-align: center; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--teal) 20%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--teal) 6%, transparent);
  color: var(--teal);
  padding: 5px 12px;
  font: 500 11px/1.3 'JetBrains Mono', monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}
[data-theme='dark'] .eyebrow { border-color: rgba(144, 210, 109, .24); background: rgba(144, 210, 109, .08); color: var(--lime); }
.section-heading h2 {
  margin: 18px 0 16px;
  color: var(--strong);
  font: 600 clamp(34px, 4vw, 49px)/1.08 'Space Grotesk', sans-serif;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.section-heading p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.75; text-wrap: pretty; }

.page-hero { position: relative; isolation: isolate; display: flex; min-height: 650px; align-items: center; overflow: hidden; padding: calc(88px + var(--site-header-height)) 0 88px; background: #f3ead6; }
.page-hero::before { content: ''; position: absolute; z-index: -3; inset: 0; background: url('/images/rumata-sunrise-outro-v1.jpg') center 48% / cover no-repeat; animation: page-landscape-breathe 15s ease-in-out infinite alternate; }
.page-hero::after { content: ''; position: absolute; z-index: -2; inset: 0; background: linear-gradient(180deg, rgba(249, 244, 231, .9), rgba(249, 244, 231, .2) 56%, rgba(248, 244, 234, .88)); }
[data-theme='dark'] .page-hero::before { filter: brightness(.48) saturate(.7); }
[data-theme='dark'] .page-hero::after { background: linear-gradient(180deg, rgba(13, 37, 33, .88), rgba(13, 37, 33, .3) 55%, rgba(13, 37, 33, .92)); }
.page-hero > .wrap { position: relative; z-index: 1; }
.page-hero .brand-wash { z-index: -1; opacity: .45; }
.page-hero .brand-grid { z-index: -1; opacity: .05; mask-image: linear-gradient(#000, transparent); }
.page-hero-card { width: min(820px, 100%); padding: clamp(38px, 6vw, 68px); border: 1px solid rgba(255, 255, 255, .7); border-radius: 40px; background: rgba(255, 252, 243, .72); box-shadow: 0 36px 90px -52px rgba(24, 58, 52, .5); backdrop-filter: blur(18px); }
[data-theme='dark'] .page-hero-card { border-color: rgba(217, 237, 191, .16); background: rgba(12, 40, 33, .76); box-shadow: 0 40px 96px -48px rgba(0, 0, 0, .75); }
.page-hero h1 { max-width: 900px; margin: 20px 0 18px; color: var(--strong); font: 600 clamp(44px, 6vw, 70px)/1 'Space Grotesk', sans-serif; letter-spacing: -.045em; text-wrap: balance; }
.page-hero p { max-width: 720px; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.75; }
@keyframes page-landscape-breathe { from { transform: scale(1.01); } to { transform: scale(1.035) translateY(-4px); } }

.footer { border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.footer-grid { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 50px; padding-block: 64px; }
.footer-grid > div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-grid strong { margin-bottom: 7px; color: var(--muted); font: 600 11px 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .13em; }
.footer-grid a, .footer-grid p { margin: 0; color: var(--muted); font-size: 13px; }
.footer-grid a:hover { color: var(--strong); }
.footer-brand p { max-width: 310px; margin-top: 5px; }
.footer-bottom { display: flex; justify-content: space-between; padding: 22px 0; border-top: 1px solid var(--border); color: var(--muted); font-size: 11px; }
.footer-glyph { display: inline-block; height: 14px; width: auto; vertical-align: middle; }

@media (max-width: 960px) {
  .nav-links { gap: 18px; }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .footer-grid > div:last-child { grid-column: 2; }
}

@media (max-width: 760px) {
  .wrap { width: min(100% - 30px, 1160px); }
  .nav { grid-template-columns: 1fr auto; padding-inline: 15px; }
  .nav-links { position: absolute; left: 0; right: 0; top: var(--site-header-height); flex-direction: column; gap: 0; padding: 12px 15px 18px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--canvas) 96%, transparent); backdrop-filter: blur(18px); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-12px); transition: opacity .24s, transform .3s cubic-bezier(.22, 1, .36, 1), visibility .24s; }
  .nav-links.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
  .nav-links a { padding: 11px 15px; }
  .nav-actions > .button { display: none; }
  .menu-button { display: block; min-width: 44px; min-height: 44px; padding: 8px 6px; }
  .section { padding-block: 62px; }
  .page-hero { min-height: 590px; padding: calc(62px + var(--site-header-height)) 0 62px; }
  .page-hero-card { border-radius: 30px; padding: 38px 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-grid > div:last-child { grid-column: auto; }
  .footer-bottom { flex-direction: column; gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

.hero {
  position: relative;
  display: flex;
  min-height: clamp(760px, 82vw, 930px);
  align-items: flex-start;
  overflow: hidden;
  padding-top: var(--site-header-height);
  background: #f5ecd9;
  isolation: isolate;
  text-align: center;
}
.home-hero-art { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.hero::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(249, 241, 222, .88) 4%, rgba(249, 241, 222, .7) 32%, rgba(249, 241, 222, .08) 68%, rgba(34, 75, 45, .09)); pointer-events: none; }
[data-theme='dark'] .hero::after { background: linear-gradient(180deg, rgba(13, 37, 33, .88), rgba(13, 37, 33, .46) 45%, rgba(13, 37, 33, .04)); }
[data-theme='dark'] .home-hero-art { filter: brightness(.68) saturate(.82); }
.hero-sun { position: absolute; z-index: -1; top: 5%; left: 50%; width: 46rem; height: 18rem; border-radius: 50%; background: rgba(255, 248, 226, .52); filter: blur(58px); transform: translateX(-50%); }
.hero-content { position: relative; z-index: 2; padding-top: clamp(92px, 11vw, 138px); }
.hero h1 { max-width: 980px; margin: 0 auto; color: #143d32; font: 600 clamp(49px, 6.5vw, 76px)/.99 'Space Grotesk', sans-serif; letter-spacing: -.05em; text-wrap: balance; text-shadow: 0 2px 28px rgba(255, 250, 235, .55); }
[data-theme='dark'] .hero h1 { color: var(--mint); text-shadow: 0 2px 28px rgba(13, 37, 33, .7); }
.hero-line { display: block; }
.rumata-word { position: relative; display: inline-block; padding-bottom: .16em; background: linear-gradient(135deg, #2c7865, #77a955); background-clip: text; color: transparent; }
[data-theme='dark'] .rumata-word { background-image: linear-gradient(135deg, var(--lime), var(--mint)); }
.rumata-word svg { position: absolute; left: 50%; bottom: -.02em; width: 108%; height: .18em; transform: translateX(-50%); overflow: visible; }
.rumata-word path { fill: none; stroke: var(--orange); stroke-width: 7; stroke-linecap: round; }
.hero-composer { width: min(768px, 100%); margin: 34px auto 0; text-align: left; }
.composer { position: relative; width: 100%; overflow: hidden; border: 1px solid rgba(44, 120, 101, .22); border-radius: 24px; background: rgba(255, 254, 248, .9); box-shadow: 0 30px 70px -32px rgba(27, 70, 54, .48), inset 0 1px rgba(255, 255, 255, .9); backdrop-filter: blur(20px); transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s, border-color .3s; }
.composer::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .11; background-image: radial-gradient(var(--teal) .75px, transparent .75px); background-size: 14px 14px; mask-image: linear-gradient(90deg, transparent, #000); }
.composer:hover, .composer:focus-within { transform: translateY(-4px); border-color: rgba(44, 120, 101, .42); box-shadow: 0 36px 86px -36px rgba(27, 70, 54, .58), 0 0 0 5px rgba(144, 210, 109, .09); }
.composer > * { position: relative; z-index: 1; }
[data-theme='dark'] .composer { border-color: rgba(217, 237, 191, .18); background: rgba(20, 48, 41, .9); box-shadow: 0 28px 78px -28px rgba(0, 0, 0, .72); }
.composer-main { display: flex; padding: 14px 14px 7px; }
.composer-input-wrap { position: relative; flex: 1; min-width: 0; }
.composer textarea { display: block; width: 100%; min-height: 56px; max-height: 180px; resize: none; border: 0; outline: 0; background: transparent; color: var(--strong); padding: 12px 13px; font-size: 16px; line-height: 1.55; }
.composer-placeholder { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: flex-start; padding: 12px 13px; color: color-mix(in srgb, var(--muted) 72%, transparent); font-size: 16px; line-height: 1.55; }
.feather-icon { width: 14px; height: 14px; flex: none; margin: 3px 0 0 4px; animation: feather-write 1.8s ease-in-out infinite; opacity: .6; }
@keyframes feather-write { 0%, 50%, 100% { transform: rotate(-45deg) translate(0, 0); opacity: .7; } 25% { transform: rotate(-45deg) translate(1px, -1px); opacity: 1; } 75% { transform: rotate(-45deg) translate(-1px, 1px); opacity: 1; } }
.composer.has-value .composer-placeholder { display: none; }
.composer-send { display: grid; flex: none; width: 44px; height: 44px; margin: 2px 0 0 10px; place-items: center; border: 0; border-radius: 14px; background: var(--orange); color: var(--ink-dark); box-shadow: 0 8px 22px -7px rgba(255, 152, 0, .65); cursor: pointer; transition: transform .2s, background .2s, opacity .2s; }
.composer-send:hover:not(:disabled) { transform: translateY(-2px) rotate(-2deg); background: var(--rumata-orange-strong); }
.composer-send:disabled { background: color-mix(in srgb, var(--orange) 30%, transparent); box-shadow: none; cursor: default; }
.composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px 12px; }
.composer-tools { display: flex; min-width: 0; align-items: center; gap: 4px; }
.composer-tool { display: inline-flex; height: 34px; min-width: 34px; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 999px; background: transparent; color: color-mix(in srgb, var(--strong) 70%, transparent); padding: 0 8px; cursor: pointer; }
.composer-tool:hover { background: color-mix(in srgb, var(--teal) 8%, var(--surface-2)); color: var(--strong); }
.composer-tool .icon { width: 18px; height: 18px; }
.composer .mode-build { display: none; }
.composer[data-prompt-mode='build'] .mode-plan { display: none; }
.composer[data-prompt-mode='build'] .mode-build { display: block; }
.plan-tool span { border-radius: 999px; background: color-mix(in srgb, var(--teal) 10%, transparent); color: var(--teal); padding: 3px 7px; font-size: 10px; font-weight: 700; line-height: 1; }
.composer-help { margin: 0; color: var(--muted); font: 500 10px/1 'JetBrains Mono', monospace; }
.composer-help kbd { border: 0; border-radius: 5px; background: color-mix(in srgb, var(--surface-2) 75%, transparent); padding: 3px 5px; font: inherit; }
.home main { background: linear-gradient(180deg, #f8f4e8 0%, #eaf0d8 42%, #f8f3e6 74%, var(--canvas) 100%); }
[data-theme='dark'] .home main { background: linear-gradient(180deg, #0d2521 0%, #18382f 42%, #143029 74%, var(--canvas) 100%); }
.capability-rail { position: relative; z-index: 3; overflow: hidden; border-block: 1px solid rgba(216, 223, 196, .7); background: rgba(252, 249, 237, .86); backdrop-filter: blur(16px); }
[data-theme='dark'] .capability-rail { border-color: var(--border); background: var(--surface); }
.capability-rail > div { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.capability-rail span { display: inline-flex; align-items: center; gap: 9px; min-width: 165px; justify-content: center; border-right: 1px solid #d8dfc4; color: #5f7163; padding: 17px 24px; font: 500 11px 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .06em; }
[data-theme='dark'] .capability-rail span { border-color: var(--border); color: var(--muted); }
.capability-rail .icon { width: 17px; height: 17px; color: var(--teal); }
@keyframes marquee { to { transform: translateX(-50%); } }
.journey-section { overflow: clip; background: linear-gradient(180deg, rgba(251, 249, 241, .98), rgba(237, 243, 220, .95)); }
[data-theme='dark'] .journey-section { background: linear-gradient(180deg, rgba(13, 37, 33, .98), rgba(20, 48, 41, .96)); }
.journey-section .section-heading { max-width: 850px; }
.journey-story { position: relative; height: 235vh; min-height: 1500px; margin-top: 30px; }
.journey-sticky { position: sticky; top: calc(var(--site-header-height) + 12px); display: grid; min-height: calc(100vh - var(--site-header-height) - 24px); grid-template-rows: 112px auto minmax(360px, 1fr); align-content: center; }
.journey-route { height: 110px; }
.journey-route svg { width: 100%; height: 100%; overflow: visible; }
.journey-route-base, .journey-route-progress { fill: none; stroke-linecap: round; stroke-width: 2; vector-effect: non-scaling-stroke; }
.journey-route-base { stroke: rgba(80, 126, 90, .22); stroke-dasharray: 5 10; }
.journey-route-progress { stroke: var(--teal); stroke-dasharray: 1; stroke-dashoffset: 1; }
[data-theme='dark'] .journey-route-base { stroke: rgba(217, 237, 191, .18); }
[data-theme='dark'] .journey-route-progress { stroke: var(--lime); }
.journey-traveler-halo { fill: rgba(255, 152, 0, .18); }
.journey-traveler-dot { fill: var(--orange); stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.journey-traveler-feather { fill: rgba(251, 249, 241, .96); stroke: var(--teal); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
[data-theme='dark'] .journey-traveler-feather { fill: #18382f; stroke: var(--lime); }
.journey-stages { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: -12px 0 20px; padding: 0; list-style: none; }
.journey-stage button { width: 100%; min-height: 132px; border: 1px solid transparent; border-radius: 22px; background: transparent; padding: 15px; text-align: left; cursor: pointer; transition: border-color .25s, background .25s, transform .25s, box-shadow .25s; }
.journey-stage button:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .42); }
.journey-stage.active button { border-color: rgba(44, 120, 101, .18); background: rgba(255, 253, 247, .68); box-shadow: 0 20px 45px -38px rgba(24, 58, 52, .55); backdrop-filter: blur(14px); }
[data-theme='dark'] .journey-stage button:hover, [data-theme='dark'] .journey-stage.active button { border-color: rgba(217, 237, 191, .14); background: rgba(20, 48, 41, .72); }
.journey-stage button > span { display: block; margin-bottom: 7px; color: var(--teal); font: 600 10px 'JetBrains Mono', monospace; letter-spacing: .08em; }
.journey-stage strong { display: block; color: var(--strong); font: 600 18px 'Space Grotesk', sans-serif; }
.journey-stage small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.journey-evolution { position: relative; isolation: isolate; min-height: 390px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .72); border-radius: 42px; background: linear-gradient(180deg, rgba(249, 241, 222, .88), rgba(218, 235, 190, .9)); box-shadow: inset 0 1px rgba(255, 255, 255, .75), 0 35px 76px -58px rgba(24, 58, 52, .65); }
.journey-evolution::before, .journey-evolution::after { content: ''; position: absolute; z-index: -1; right: -8%; bottom: -43%; width: 64%; height: 72%; border-radius: 50% 50% 0 0; background: linear-gradient(150deg, #9fc479, #d5e8ae); transform: rotate(-5deg); }
.journey-evolution::after { right: auto; bottom: -48%; left: -7%; width: 70%; background: linear-gradient(145deg, #c9df9e, #eff1cf); transform: rotate(6deg); }
[data-theme='dark'] .journey-evolution { border-color: rgba(217, 237, 191, .13); background: linear-gradient(180deg, rgba(20, 48, 41, .94), rgba(24, 63, 50, .96)); }
[data-theme='dark'] .journey-evolution::before { background: linear-gradient(150deg, #265844, #183e34); }
[data-theme='dark'] .journey-evolution::after { background: linear-gradient(145deg, #214c3d, #17372f); }
.journey-cloud { position: absolute; top: 42px; width: 76px; height: 24px; border-radius: 999px; background: rgba(255, 255, 255, .58); filter: blur(.2px); }
.journey-cloud::before, .journey-cloud::after { content: ''; position: absolute; bottom: 7px; border-radius: 50%; background: inherit; }
.journey-cloud::before { left: 14px; width: 31px; height: 31px; }.journey-cloud::after { right: 11px; width: 23px; height: 23px; }
.journey-cloud-one { left: 7%; }.journey-cloud-two { top: 76px; right: 8%; transform: scale(.72); opacity: .7; }
[data-theme='dark'] .journey-cloud { background: rgba(217, 237, 191, .09); }
.product-window { position: absolute; z-index: 2; top: 52%; left: 50%; width: min(620px, 74%); overflow: hidden; border: 1px solid rgba(44, 120, 101, .2); border-radius: 24px; background: rgba(255, 255, 250, .94); box-shadow: 0 28px 70px -32px rgba(20, 67, 52, .58); transform: translate(-50%, -50%); transform-origin: center; }
[data-theme='dark'] .product-window { border-color: rgba(217, 237, 191, .16); background: rgba(13, 37, 33, .95); box-shadow: 0 28px 70px -32px rgba(0, 0, 0, .75); }
.product-window-bar { display: flex; height: 38px; align-items: center; gap: 12px; border-bottom: 1px solid var(--border); padding: 0 13px; color: var(--muted); }
.product-window-bar > small { margin-right: auto; font: 500 9px 'JetBrains Mono', monospace; }
.window-lights { display: flex; gap: 4px; }.window-lights i { width: 7px; height: 7px; border-radius: 50%; background: #cad7b6; }.window-lights i:nth-child(2) { background: #f5c173; }.window-lights i:nth-child(3) { background: #86bd83; }
.product-live { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; background: #eaf6dc; color: #2d765e; padding: 4px 8px; font: 650 9px 'JetBrains Mono', monospace; opacity: 0; transform: scale(.8); }
[data-theme='dark'] .product-live { background: rgba(144, 210, 109, .1); color: var(--lime); }.product-live i { width: 6px; height: 6px; border-radius: 50%; background: #55a66c; }
.product-window-body { display: grid; min-height: 246px; grid-template-columns: 42px 1fr; }.product-window-body aside { display: grid; align-content: start; justify-items: center; gap: 18px; border-right: 1px solid var(--border); padding-top: 14px; }.product-window-body aside b { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 8px; background: var(--teal); color: #fff; font-size: 11px; }.product-window-body aside i { width: 14px; height: 4px; border-radius: 4px; background: var(--border-strong); }
.product-canvas { position: relative; overflow: hidden; padding: 20px; }
.product-prompt { position: absolute; z-index: 2; top: 50%; left: 50%; display: flex; width: min(340px, calc(100% - 34px)); align-items: center; gap: 12px; border: 1px solid rgba(44, 120, 101, .16); border-radius: 17px; background: rgba(250, 249, 238, .96); padding: 15px; box-shadow: 0 18px 40px -28px rgba(20, 67, 52, .6); transform: translate(-50%, -50%); }
[data-theme='dark'] .product-prompt { border-color: rgba(217, 237, 191, .14); background: rgba(24, 56, 47, .96); }.product-prompt .feather-icon { flex: 0 0 auto; width: 23px; color: var(--teal); }.product-prompt span { display: grid; }.product-prompt small, .product-interface small { color: var(--muted); font-size: 9px; }.product-prompt strong { color: var(--strong); font-size: 11px; line-height: 1.35; }
.product-interface { opacity: 0; transform: translateY(18px); }.product-interface header { display: flex; align-items: center; justify-content: space-between; }.product-interface header > span { display: grid; }.product-interface header strong { color: var(--strong); font: 600 16px 'Space Grotesk', sans-serif; }.mini-avatars { display: flex; }.mini-avatars i { display: grid; width: 25px; height: 25px; place-items: center; margin-left: -6px; border: 2px solid var(--surface); border-radius: 50%; background: #dbe8be; color: #315f4f; font: 600 8px 'Inter', sans-serif; }.product-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }.product-stats > span { display: grid; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-2); padding: 10px; }.product-stats strong { color: var(--strong); font: 600 17px 'Space Grotesk', sans-serif; }.product-flow { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 20px; }.product-flow span { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: 7px 9px; color: var(--muted); font-size: 8px; }.product-flow i { width: 14px; height: 1px; background: var(--teal); }
.connect-pieces, .growth-signals { position: absolute; z-index: 3; display: flex; opacity: 0; pointer-events: none; }.connect-pieces { top: 50%; right: 4%; left: 4%; justify-content: space-between; transform: translateY(-50%); }.connect-pieces span, .growth-signals span { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(44, 120, 101, .15); border-radius: 999px; background: rgba(255, 253, 247, .84); color: var(--teal); padding: 8px 11px; box-shadow: 0 12px 30px -22px rgba(20, 67, 52, .7); font-size: 9px; backdrop-filter: blur(10px); }.connect-pieces .icon, .growth-signals .icon { width: 14px; height: 14px; }[data-theme='dark'] .connect-pieces span, [data-theme='dark'] .growth-signals span { border-color: rgba(217, 237, 191, .14); background: rgba(13, 37, 33, .84); color: var(--lime); }
.growth-signals { right: 6%; bottom: 24px; left: 6%; justify-content: center; gap: 10px; transform: translateY(12px); }.growth-signals b { color: var(--strong); }
.journey-evolution[data-stage='0'] .product-window { width: min(420px, 76%); transform: translate(-50%, -50%) scale(.94); }.journey-evolution:not([data-stage='0']) .product-interface { opacity: 1; transform: none; }.journey-evolution:not([data-stage='0']) .product-prompt { top: 12px; left: 16px; width: 210px; padding: 8px 10px; transform: scale(.72); transform-origin: top left; opacity: .72; }.journey-evolution:is([data-stage='2'], [data-stage='3'], [data-stage='4']) .product-prompt { opacity: 0; transform: translateY(-12px) scale(.65); }.journey-evolution:is([data-stage='2'], [data-stage='3'], [data-stage='4']) .connect-pieces { opacity: 1; }.journey-evolution:is([data-stage='3'], [data-stage='4']) .product-window { transform: translate(-50%, calc(-50% - 10px)); box-shadow: 0 38px 86px -30px rgba(20, 67, 52, .7); }.journey-evolution:is([data-stage='3'], [data-stage='4']) .product-live { opacity: 1; transform: none; }.journey-evolution[data-stage='4'] .product-window { width: min(680px, 78%); transform: translate(-50%, calc(-50% - 22px)) scale(1.02); }.journey-evolution[data-stage='4'] .growth-signals { opacity: 1; transform: none; }
.depth-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 16px; background: linear-gradient(145deg, #e6f2ca, #f6f7df); color: var(--teal); box-shadow: inset 0 1px rgba(255, 255, 255, .8), 0 9px 20px -14px rgba(44, 120, 101, .7); }
[data-theme='dark'] .depth-icon { background: var(--surface-mint); color: var(--lime); }
.world-link, .text-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 30px; color: var(--teal); font-size: 13px; font-weight: 650; }
.world-link .icon, .text-link .icon { width: 16px; height: 16px; }
.system-section { position: relative; background: linear-gradient(180deg, rgba(237, 243, 220, .95), rgba(226, 237, 204, .96)); }
[data-theme='dark'] .system-section { background: linear-gradient(180deg, rgba(20, 48, 41, .96), rgba(24, 56, 47, .96)); }
.system-heading { display: flex; justify-content: center; text-align: center; }
.system-heading .section-heading { max-width: 850px; }
.architecture-story { height: 320vh; min-height: 2200px; margin-top: 36px; }
.architecture-sticky { position: sticky; top: calc(var(--site-header-height) + 12px); display: grid; min-height: calc(100vh - var(--site-header-height) - 24px); grid-template-columns: 220px minmax(0, 1fr); align-items: stretch; gap: 24px; }
.architecture-guide { display: grid; align-content: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.architecture-guide li { display: grid; grid-template-columns: 28px 1fr; gap: 9px; border-left: 2px solid transparent; padding: 9px 8px; opacity: .38; transition: opacity .3s, transform .35s, border-color .3s; }
.architecture-guide li.active { border-color: var(--orange); opacity: 1; transform: translateX(7px); }
.architecture-guide li > span { color: var(--teal); font: 600 9px 'JetBrains Mono', monospace; }.architecture-guide li div { display: grid; }.architecture-guide strong { color: var(--strong); font: 600 16px 'Space Grotesk', sans-serif; }.architecture-guide small { color: var(--muted); font-size: 10px; }
.architecture-scene { position: relative; isolation: isolate; min-height: 650px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .68); border-radius: 44px; background: linear-gradient(180deg, rgba(249, 241, 222, .88), rgba(218, 235, 190, .92)); box-shadow: inset 0 1px rgba(255,255,255,.8), 0 40px 86px -64px rgba(24,58,52,.65); perspective: 1200px; }
.architecture-scene::before, .architecture-scene::after { content: ''; position: absolute; z-index: -1; bottom: -31%; width: 72%; height: 56%; border-radius: 55% 55% 0 0; background: linear-gradient(145deg, #cce2a6, #8fbb72); }.architecture-scene::before { right: -18%; transform: rotate(-7deg); }.architecture-scene::after { left: -17%; background: linear-gradient(145deg, #e5edc4, #afd084); transform: rotate(8deg); }
[data-theme='dark'] .architecture-scene { border-color: rgba(217,237,191,.13); background: linear-gradient(180deg, rgba(17,45,38,.97), rgba(24,63,50,.98)); }.architecture-cloud { position: absolute; z-index: 0; top: 56px; width: 82px; height: 25px; border-radius: 999px; background: rgba(255,255,255,.55); }.architecture-cloud::before, .architecture-cloud::after { content: ''; position: absolute; bottom: 6px; border-radius: 50%; background: inherit; }.architecture-cloud::before { left: 14px; width: 34px; height: 34px; }.architecture-cloud::after { right: 10px; width: 26px; height: 26px; }.architecture-cloud-one { left: 7%; }.architecture-cloud-two { top: 96px; right: 7%; transform: scale(.7); opacity: .65; }[data-theme='dark'] .architecture-cloud { background: rgba(217,237,191,.09); }[data-theme='dark'] .architecture-scene::before { background: linear-gradient(145deg,#265844,#183e34); }[data-theme='dark'] .architecture-scene::after { background: linear-gradient(145deg,#214c3d,#17372f); }
.architecture-product-wrap { position: absolute; z-index: 8; inset: 0; display: grid; place-items: center; }.architecture-product { width: min(620px, 76%); overflow: hidden; border: 1px solid rgba(44,120,101,.2); border-radius: 24px; background: rgba(255,255,250,.96); box-shadow: 0 34px 84px -36px rgba(20,67,52,.65); }.architecture-product .product-interface, .architecture-product .product-live { opacity: 1; transform: none; }[data-theme='dark'] .architecture-product { border-color: rgba(217,237,191,.16); background: rgba(13,37,33,.96); box-shadow: 0 34px 84px -36px rgba(0,0,0,.78); }
.architecture-layers { position: absolute; z-index: 5; inset: 0; transform-style: preserve-3d; }.architecture-layer { position: absolute; top: 50%; left: 50%; width: min(590px, 72%); opacity: 0; transform-style: preserve-3d; }.layer-plane { position: relative; display: flex; min-height: 118px; align-items: center; gap: 18px; overflow: hidden; border: 1px solid rgba(44,120,101,.2); border-radius: 42px 24px 46px 22px; background: linear-gradient(135deg, rgba(255,253,247,.92), rgba(226,239,196,.86)); box-shadow: 0 26px 56px -38px rgba(20,67,52,.62); padding: 20px 28px; backdrop-filter: blur(16px); }.layer-plane::after { content: ''; position: absolute; right: -9%; bottom: -70%; width: 55%; height: 140%; border-radius: 50%; background: rgba(144,210,109,.18); }.layer-intelligence .layer-plane { background: linear-gradient(135deg,rgba(237,246,220,.93),rgba(197,228,193,.88)); }.layer-data .layer-plane { background: linear-gradient(135deg,rgba(246,243,220,.94),rgba(216,232,188,.9)); }.layer-foundation .layer-plane { background: linear-gradient(135deg,rgba(229,238,211,.94),rgba(177,214,184,.9)); }[data-theme='dark'] .layer-plane, [data-theme='dark'] .layer-intelligence .layer-plane, [data-theme='dark'] .layer-data .layer-plane, [data-theme='dark'] .layer-foundation .layer-plane { border-color: rgba(217,237,191,.14); background: linear-gradient(135deg,rgba(24,56,47,.94),rgba(31,74,61,.88)); }
.layer-icon { display: grid; width: 46px; height: 46px; flex: none; place-items: center; border-radius: 16px; background: rgba(255,255,255,.48); color: var(--teal); box-shadow: inset 0 1px rgba(255,255,255,.7); }.layer-icon .icon { width: 20px; height: 20px; }[data-theme='dark'] .layer-icon { background: rgba(217,237,191,.08); color: var(--lime); }.layer-plane > div { display: grid; }.layer-plane strong { color: var(--strong); font: 600 22px 'Space Grotesk',sans-serif; }.layer-plane p { margin: 1px 0; color: var(--muted); font-size: 12px; }.layer-plane small { color: var(--teal); font: 500 9px 'JetBrains Mono',monospace; }.layer-signal { position: absolute; top: 18px; right: 22px; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 6px rgba(144,210,109,.13); }
.architecture-spine { position: absolute; top: 24%; bottom: 20%; left: 50%; width: 2px; background: linear-gradient(180deg,transparent,var(--orange),transparent); opacity: 0; transform: translateX(-50%); }.architecture-payoff { position: absolute; z-index: 10; right: 0; bottom: 36px; left: 0; display: grid; justify-items: center; opacity: 0; text-align: center; transform: translateY(18px); }.architecture-payoff .node-glyph { height: 24px; margin-bottom: 8px; color: var(--teal); }.architecture-payoff span { color: var(--teal); font: 600 9px 'JetBrains Mono',monospace; text-transform: uppercase; letter-spacing: .12em; }.architecture-payoff strong { color: var(--strong); font: 600 clamp(30px,4vw,48px)/1 'Space Grotesk',sans-serif; letter-spacing: -.04em; }
.architecture-scene:is([data-stage='1'],[data-stage='2'],[data-stage='3'],[data-stage='4']) .architecture-product-wrap { opacity: 0; transform: scale(.78); }.architecture-scene:is([data-stage='1'],[data-stage='2'],[data-stage='3'],[data-stage='4']) .layer-experience { opacity: 1; transform: translate(-50%,-210px) rotateX(56deg) rotateZ(-3deg); }.architecture-scene:is([data-stage='2'],[data-stage='3'],[data-stage='4']) .layer-intelligence { opacity: 1; transform: translate(-50%,-95px) rotateX(56deg) rotateZ(-3deg); }.architecture-scene:is([data-stage='3'],[data-stage='4']) .layer-data { opacity: 1; transform: translate(-50%,20px) rotateX(56deg) rotateZ(-3deg); }.architecture-scene[data-stage='4'] .layer-foundation { opacity: 1; transform: translate(-50%,135px) rotateX(56deg) rotateZ(-3deg); }.architecture-scene:is([data-stage='2'],[data-stage='3'],[data-stage='4']) .architecture-spine { opacity: .7; }.architecture-scene[data-stage='5'] .architecture-layer { opacity: 0; transform: translate(-50%,-50%) rotateX(15deg) scale(.72); }.architecture-scene[data-stage='5'] .architecture-product-wrap { opacity: 1; transform: translateY(-52px) scale(.9); }.architecture-scene[data-stage='5'] .architecture-payoff { opacity: 1; transform: none; }
.team-section { background: linear-gradient(180deg, rgba(226, 237, 204, .96), rgba(248, 243, 230, .96)); }
[data-theme='dark'] .team-section { background: linear-gradient(180deg, rgba(24, 56, 47, .96), rgba(13, 37, 33, .98)); }
.team-panel { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); align-items: center; gap: clamp(42px, 6vw, 78px); padding: 18px; border: 1px solid rgba(255, 255, 255, .68); border-radius: 42px; background: rgba(255, 253, 248, .74); box-shadow: 0 32px 76px -52px rgba(30, 67, 49, .52); backdrop-filter: blur(16px); }
[data-theme='dark'] .team-panel { border-color: rgba(217, 237, 191, .12); background: rgba(20, 48, 41, .84); }
.team-photo { position: relative; overflow: hidden; height: 100%; min-height: 590px; margin: 0; border-radius: 29px; background: #e7eadb; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.team-photo figcaption { position: absolute; right: 20px; bottom: 20px; left: 20px; display: flex; align-items: center; gap: 9px; width: max-content; max-width: calc(100% - 40px); border: 1px solid rgba(255, 255, 255, .48); border-radius: 999px; background: rgba(251, 249, 241, .82); color: #355448; padding: 10px 15px; backdrop-filter: blur(14px); font-size: 11px; }
.team-photo figcaption i { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(255, 152, 0, .13); }
.team-copy { padding: clamp(20px, 3vw, 40px) clamp(12px, 2vw, 25px) clamp(20px, 3vw, 40px) 0; }
.team-copy .section-heading h2 { font-size: clamp(34px, 4vw, 48px); }
.team-copy .section-heading p { font-size: 15px; }
.team-points { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0; }
.team-points span { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #e0e5d5; border-radius: 999px; background: #f8f8ed; color: #496158; padding: 8px 11px; font-size: 11px; }
[data-theme='dark'] .team-points span { border-color: var(--border); background: var(--surface-2); color: var(--text); }
.team-points .icon, .team-points .feather-icon { width: 15px; height: 15px; margin: 0; color: var(--teal); }
.depth-section { background: linear-gradient(180deg, rgba(248, 243, 230, .96), rgba(226, 237, 201, .96)); }
[data-theme='dark'] .depth-section { background: linear-gradient(180deg, rgba(13, 37, 33, .98), rgba(24, 56, 47, .96)); }
.depth-grid { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); gap: clamp(55px, 8vw, 100px); }
.depth-intro { position: sticky; top: calc(var(--site-header-height) + 35px); align-self: start; }
.depth-list { display: flex; flex-direction: column; gap: 12px; }
.depth-card { border: 1px solid rgba(255, 255, 255, .62); border-radius: 28px; background: rgba(255, 253, 247, .76); padding: 8px; box-shadow: 0 22px 48px -40px rgba(30, 67, 49, .5); backdrop-filter: blur(14px); }
[data-theme='dark'] .depth-card { border-color: rgba(217, 237, 191, .12); background: rgba(20, 48, 41, .86); }
.depth-card summary { position: relative; display: grid; grid-template-columns: 52px 1fr 42px; align-items: center; gap: 14px; padding: 14px; cursor: pointer; list-style: none; }
.depth-card summary::-webkit-details-marker { display: none; }
.depth-card summary::after { content: '+'; display: grid; width: 34px; height: 34px; place-items: center; justify-self: end; border-radius: 50%; background: #edf2dc; color: var(--teal); font-size: 20px; }
.depth-icon { width: 48px; height: 48px; }
.depth-icon .icon { width: 21px; height: 21px; }
.depth-card strong { display: block; color: var(--strong); font: 600 19px 'Space Grotesk', sans-serif; }
.depth-card small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.depth-content p { margin: 0; padding: 2px 68px 8px 80px; color: var(--muted); font-size: 13px; }
.depth-content a { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 18px 80px; color: var(--teal); font-size: 11px; font-weight: 650; }
.depth-content .icon { width: 14px; height: 14px; }
.faq-section { background: linear-gradient(180deg, rgba(226, 237, 201, .96), var(--canvas)); }
[data-theme='dark'] .faq-section { background: linear-gradient(180deg, rgba(24, 56, 47, .96), var(--canvas)); }
.faq > div:last-child { display: flex; max-width: 850px; flex-direction: column; gap: 10px; margin: 42px auto 0; }
.faq details { border: 1px solid rgba(255, 255, 255, .62); border-radius: 22px; background: rgba(255, 253, 247, .72); padding-inline: 20px; box-shadow: 0 18px 42px -38px rgba(30, 67, 49, .44); backdrop-filter: blur(12px); }
[data-theme='dark'] .faq details { border-color: rgba(217, 237, 191, .12); background: rgba(20, 48, 41, .84); }
.faq summary { display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; color: var(--strong); font: 600 18px 'Space Grotesk', sans-serif; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--teal); transition: transform .32s cubic-bezier(.22, 1, .36, 1), background .2s; }
.faq details[open] summary span { transform: rotate(45deg); background: var(--orange); color: var(--ink-dark); }
.faq-answer { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .38s cubic-bezier(.22, 1, .36, 1), opacity .3s; }
.faq details[open] .faq-answer { grid-template-rows: 1fr; opacity: 1; }
.faq-answer p { min-height: 0; overflow: hidden; max-width: 720px; margin: 0; padding: 0 35px 24px 0; color: var(--muted); }
.home-outro { position: relative; isolation: isolate; display: flex; min-height: 1080px; flex-direction: column; overflow: hidden; background: var(--canvas); }
.home-outro::before { content: ''; position: absolute; z-index: -2; inset: 0; background: url('/images/rumata-sunrise-outro-v1.jpg') center bottom / cover no-repeat; -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .18) 8%, #000 28%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .18) 8%, #000 28%, #000 100%); }
.home-outro::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, var(--canvas) 0%, color-mix(in srgb, var(--canvas) 82%, transparent) 8%, transparent 31%, transparent 58%, rgba(246, 237, 218, .1) 70%, rgba(229, 216, 187, .7) 100%); pointer-events: none; }
[data-theme='dark'] .home-outro { background: #0d2521; }
[data-theme='dark'] .home-outro::before { filter: brightness(.42) saturate(.72) contrast(1.05); }
[data-theme='dark'] .home-outro::after { background: linear-gradient(180deg, var(--canvas) 0%, color-mix(in srgb, var(--canvas) 84%, transparent) 8%, transparent 31%, transparent 58%, rgba(8, 28, 23, .12) 70%, rgba(7, 27, 23, .78) 100%); }
.home-outro-cta { display: flex; min-height: 700px; flex: 1; align-items: flex-start; justify-content: center; padding-block: clamp(90px, 9vw, 138px) 220px; }
.home-closing { width: min(860px, 100%); border: 1px solid rgba(255, 255, 255, .68); border-radius: 36px; background: rgba(255, 252, 243, .62); box-shadow: 0 35px 85px -48px rgba(30, 67, 49, .55); padding: clamp(42px, 6vw, 68px); backdrop-filter: blur(18px); text-align: center; }
[data-theme='dark'] .home-closing { border-color: rgba(217, 237, 191, .18); background: rgba(10, 34, 29, .7); box-shadow: 0 35px 90px -42px rgba(0, 0, 0, .72); }
.home-closing-copy > .node-glyph { height: 34px; margin: 0 auto 24px; }
.home-closing-copy h2 { max-width: 640px; margin: 22px auto 30px; color: #173c32; font: 600 clamp(39px, 5vw, 58px)/1.02 'Space Grotesk', sans-serif; letter-spacing: -.045em; text-wrap: balance; }
[data-theme='dark'] .home-closing-copy h2 { color: var(--mint); }
.home-outro .footer { margin-top: auto; border-color: transparent; background: transparent; backdrop-filter: none; }
.home-outro .footer-grid a, .home-outro .footer-grid p, .home-outro .footer-bottom { color: rgba(31, 67, 55, .7); }
.home-outro .footer-grid strong { color: rgba(31, 67, 55, .58); }
.home-outro .footer-bottom { border-color: rgba(45, 79, 52, .14); }
[data-theme='dark'] .home-outro .footer { border-color: transparent; background: transparent; }
[data-theme='dark'] .home-outro .footer-grid a, [data-theme='dark'] .home-outro .footer-grid p, [data-theme='dark'] .home-outro .footer-bottom { color: rgba(217, 237, 191, .68); }
[data-theme='dark'] .home-outro .footer-grid strong { color: rgba(217, 237, 191, .52); }
[data-theme='dark'] .home-outro .footer-bottom { border-color: rgba(217, 237, 191, .12); }
@media (max-width: 1040px) {
  .journey-stage button { padding-inline: 10px; }
  .journey-stage small { font-size: 10px; }
  .product-window { width: min(620px, 82%); }
  .connect-pieces { right: 2%; left: 2%; }
  .architecture-sticky { grid-template-columns: 180px minmax(0, 1fr); gap: 14px; }
  .architecture-product, .architecture-layer { width: min(590px, 84%); }
  .team-panel { grid-template-columns: 1fr; }
  .team-photo { min-height: 560px; }
  .team-copy { padding: 20px 30px 36px; }
  .depth-grid { grid-template-columns: 1fr; }
  .depth-intro { position: static; }
}
@media (max-width: 760px) {
  .hero { min-height: 720px; }
  .home-hero-art { object-position: 52% bottom; }
  .hero::after { background: linear-gradient(180deg, rgba(249, 241, 222, .92), rgba(249, 241, 222, .75) 42%, rgba(249, 241, 222, .05) 80%); }
  .hero-content { padding-top: 74px; }
  .hero h1 { font-size: 47px; }
  .composer-main { padding: 12px 12px 6px; }
  .composer-footer { padding-inline: 12px; }
  .composer-help { display: none; }
  .journey-story { height: 220vh; min-height: 1320px; margin-top: 14px; }
  .journey-sticky { top: calc(var(--site-header-height) + 5px); min-height: calc(100svh - var(--site-header-height) - 10px); grid-template-rows: 72px 128px minmax(330px, 1fr); }
  .journey-route { height: 72px; }
  .journey-stages { position: relative; display: grid; margin: -4px 0 12px; }
  .journey-stage { grid-area: 1 / 1; opacity: 0; pointer-events: none; transform: translateX(14px); transition: opacity .25s, transform .25s; }
  .journey-stage.active { opacity: 1; pointer-events: auto; transform: none; }
  .journey-stage button { min-height: 112px; border-color: rgba(44, 120, 101, .16); background: rgba(255, 253, 247, .68); padding: 14px 16px; }
  [data-theme='dark'] .journey-stage button { border-color: rgba(217, 237, 191, .14); background: rgba(20, 48, 41, .72); }
  .journey-stage small { max-width: 440px; font-size: 11px; }
  .journey-evolution { min-height: 330px; border-radius: 30px; }
  .product-window, .journey-evolution[data-stage='0'] .product-window, .journey-evolution[data-stage='4'] .product-window { width: calc(100% - 34px); max-width: 600px; }
  .connect-pieces { top: auto; right: 14px; bottom: 14px; left: 14px; justify-content: center; gap: 5px; }
  .connect-pieces span { padding: 6px 8px; }
  .growth-signals { right: 10px; bottom: 10px; left: 10px; gap: 4px; }
  .growth-signals span { padding: 6px 7px; }
  .journey-evolution[data-stage='4'] .growth-signals { transform: scale(.92); }
  .architecture-story { height: 285vh; min-height: 1850px; margin-top: 18px; }
  .architecture-sticky { top: calc(var(--site-header-height) + 5px); min-height: calc(100svh - var(--site-header-height) - 10px); grid-template-columns: 1fr; grid-template-rows: 90px minmax(500px,1fr); }
  .architecture-guide { position: relative; display: grid; }
  .architecture-guide li { grid-area: 1 / 1; align-self: center; border-left: 0; border-bottom: 2px solid transparent; opacity: 0; transform: translateX(12px); }
  .architecture-guide li.active { border-color: var(--orange); opacity: 1; transform: none; }
  .architecture-scene { min-height: 500px; border-radius: 30px; }
  .architecture-product { width: calc(100% - 32px); }
  .architecture-layer { width: calc(100% - 42px); }
  .architecture-scene:is([data-stage='1'],[data-stage='2'],[data-stage='3'],[data-stage='4']) .layer-experience { transform: translate(-50%,-175px) rotateX(52deg) rotateZ(-3deg); }
  .architecture-scene:is([data-stage='2'],[data-stage='3'],[data-stage='4']) .layer-intelligence { transform: translate(-50%,-75px) rotateX(52deg) rotateZ(-3deg); }
  .architecture-scene:is([data-stage='3'],[data-stage='4']) .layer-data { transform: translate(-50%,25px) rotateX(52deg) rotateZ(-3deg); }
  .architecture-scene[data-stage='4'] .layer-foundation { transform: translate(-50%,125px) rotateX(52deg) rotateZ(-3deg); }
  .layer-plane { min-height: 102px; border-radius: 30px 18px 32px 16px; padding: 14px 16px; }
  .layer-icon { width: 38px; height: 38px; border-radius: 13px; }
  .layer-plane strong { font-size: 18px; }.layer-plane p { font-size: 10px; }.layer-plane small { font-size: 8px; }
  .architecture-payoff { bottom: 24px; }
  .team-panel { padding: 10px; border-radius: 29px; }
  .team-photo { min-height: 420px; border-radius: 21px; }
  .team-photo figcaption { right: 12px; bottom: 12px; left: 12px; max-width: calc(100% - 24px); white-space: normal; }
  .team-copy { padding: 22px 14px 26px; }
  .depth-card summary { grid-template-columns: 48px 1fr 34px; padding: 10px; }
  .depth-content p { padding: 2px 15px 8px 62px; }
  .depth-content a { margin: 0 0 18px 62px; }
  .home-outro { min-height: 1240px; }
  .home-outro::before { background-size: auto 100%; }
  .home-outro-cta { min-height: 740px; padding-block: 74px 250px; }
  .home-closing { border-radius: 28px; padding: 40px 22px; }
  .home-outro .footer, [data-theme='dark'] .home-outro .footer { background: transparent; }
}

.home .button .icon,
.home .text-link .icon,
.home .world-link .icon { transition: transform .28s cubic-bezier(.22, 1, .36, 1); }
.home .button:hover .icon,
.home .text-link:hover .icon,
.home .world-link:hover .icon { transform: translateX(4px); }
.home .button:active { transform: translateY(1px) scale(.98); }
.nav-links a { position: relative; }
.nav-links a::after { content: ''; position: absolute; right: 0; bottom: -7px; left: 0; height: 2px; border-radius: 2px; background: var(--orange); transform: scaleX(0); transform-origin: right; transition: transform .28s cubic-bezier(.22, 1, .36, 1); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.theme-button { transition: transform .3s cubic-bezier(.22, 1, .36, 1), background .2s; }
.theme-button:hover { transform: rotate(12deg) scale(1.06); }
.menu-button { transition: transform .2s, color .2s; }
.menu-button:active { transform: scale(.94); }
.composer-tool { transition: transform .2s, background .2s, color .2s; }
.composer-tool:hover { transform: translateY(-2px); }
.composer-tool:active { transform: translateY(0) scale(.94); }
.composer-send .icon { transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.composer-send:hover:not(:disabled) .icon { transform: translateX(3px); }
.product-window, .product-interface, .product-prompt, .product-live, .connect-pieces, .growth-signals { transition: width .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1), opacity .38s ease, box-shadow .6s ease; }
.connect-pieces span { animation: connected-float 3.4s ease-in-out infinite alternate; }
.connect-pieces span:nth-child(2) { animation-delay: -.9s; }.connect-pieces span:nth-child(3) { animation-delay: -1.8s; }
.product-live i { animation: live-pulse 1.8s ease-in-out infinite; }
.growth-signals span { animation: signal-arrive .55s cubic-bezier(.22, 1, .36, 1) both; }.growth-signals span:nth-child(2) { animation-delay: .08s; }.growth-signals span:nth-child(3) { animation-delay: .16s; }
@keyframes connected-float { to { transform: translateY(-6px) rotate(-1deg); } }
@keyframes live-pulse { 50% { box-shadow: 0 0 0 5px rgba(85, 166, 108, .16); } }
@keyframes signal-arrive { from { transform: translateY(8px); } }
.architecture-product-wrap, .architecture-layer, .architecture-spine, .architecture-payoff { transition: transform .72s cubic-bezier(.22,1,.36,1), opacity .48s ease; }
.architecture-layer .layer-plane { animation: layer-breathe 4s ease-in-out infinite alternate; }.architecture-layer:nth-child(2) .layer-plane { animation-delay: -1s; }.architecture-layer:nth-child(3) .layer-plane { animation-delay: -2s; }.architecture-layer:nth-child(4) .layer-plane { animation-delay: -3s; }
.layer-signal { animation: live-pulse 2s ease-in-out infinite; }
@keyframes layer-breathe { to { transform: translateY(-4px); } }
.team-photo img { transition: transform 1s cubic-bezier(.22, 1, .36, 1); }
.team-photo:hover img { transform: scale(1.025); }
.depth-card { transition: background .3s, border-color .3s, transform .3s; }
.depth-card:hover { transform: translateX(4px); border-color: rgba(44, 120, 101, .28); }
.depth-card summary::after { transition: transform .35s cubic-bezier(.22, 1, .36, 1), background .2s; }
.depth-card[open] summary::after { transform: rotate(45deg); background: var(--orange); color: var(--ink-dark); }
.depth-card .depth-content { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .38s cubic-bezier(.22, 1, .36, 1), opacity .3s; }
.depth-card[open] .depth-content { grid-template-rows: 1fr; opacity: 1; }
.depth-card .depth-content > div { min-height: 0; overflow: hidden; }
.home-closing { transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s, background .3s; }
.home-closing:hover { transform: translateY(-5px); box-shadow: 0 42px 94px -48px rgba(30, 67, 49, .66); }
.home-hero-art { animation: landscape-breathe 14s ease-in-out infinite alternate; }
@keyframes landscape-breathe { from { transform: scale(1.012) translate(var(--hero-x, 0), var(--hero-y, 0)); } to { transform: scale(1.035) translate(var(--hero-x, 0), calc(var(--hero-y, 0) - 5px)); } }
.hero-content { animation: hero-arrive .85s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes hero-arrive { from { transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) {
  .journey-traveler, .connect-pieces span, .product-live i, .growth-signals span, .architecture-layer .layer-plane, .layer-signal, .home-hero-art, .hero-content { animation: none; }
  .product-window, .product-interface, .product-prompt, .product-live, .connect-pieces, .growth-signals, .architecture-product-wrap, .architecture-layer, .architecture-spine, .architecture-payoff { transition: none; }
  .depth-card:hover, .team-photo:hover img, .home-closing:hover { transform: none; }
}

.examples-page main > .section,
.contact-page main > .section { position: relative; }

.example-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.example-grid article { position: relative; isolation: isolate; display: flex; min-height: 410px; flex-direction: column; overflow: hidden; padding: 30px; border: 1px solid rgba(109, 139, 90, .2); border-radius: 32px; background: linear-gradient(145deg, rgba(255, 253, 246, .92), rgba(237, 243, 216, .86)); box-shadow: 0 24px 54px -42px rgba(25, 67, 49, .48); transition: transform .36s cubic-bezier(.22, 1, .36, 1), box-shadow .36s, border-color .3s; }
.example-grid article:nth-child(3n + 2) { background: linear-gradient(145deg, rgba(247, 249, 232, .94), rgba(219, 236, 199, .88)); }
.example-grid article:nth-child(3n + 3) { background: linear-gradient(145deg, rgba(255, 248, 231, .94), rgba(241, 230, 200, .88)); }
.example-grid article::before { content: ''; position: absolute; z-index: -1; top: -55px; right: -45px; width: 150px; height: 150px; border-radius: 44% 56% 63% 37%; background: color-mix(in srgb, var(--lime) 18%, transparent); filter: blur(2px); transform: rotate(18deg); transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.example-grid article:hover { transform: translateY(-9px) rotate(-.35deg); border-color: rgba(44, 120, 101, .3); box-shadow: 0 34px 68px -42px rgba(25, 67, 49, .56); }
.example-grid article:hover::before { transform: rotate(32deg) scale(1.08); }
[data-theme='dark'] .example-grid article,
[data-theme='dark'] .example-grid article:nth-child(n) { border-color: rgba(217, 237, 191, .12); background: linear-gradient(145deg, rgba(20, 48, 41, .94), rgba(24, 56, 47, .88)); box-shadow: 0 28px 64px -38px rgba(0, 0, 0, .7); }
.example-grid article > span { align-self: flex-start; border-radius: 999px; background: rgba(255, 255, 255, .52); color: var(--teal); padding: 6px 10px; font: 600 10px 'JetBrains Mono', monospace; letter-spacing: .12em; }
[data-theme='dark'] .example-grid article > span { background: rgba(217, 237, 191, .08); color: var(--lime); }
.example-grid h2 { margin: 36px 0 12px; color: var(--strong); font: 600 24px/1.18 'Space Grotesk', sans-serif; }
.example-grid p { margin: 0; color: var(--muted); font-size: 14px; }
.example-grid blockquote { margin: 28px 0; padding: 17px 18px; border: 1px solid rgba(255, 255, 255, .58); border-left: 3px solid var(--orange); border-radius: 16px; background: rgba(255, 255, 255, .44); color: var(--text); font-size: 13px; font-style: italic; backdrop-filter: blur(10px); }
[data-theme='dark'] .example-grid blockquote { border-color: rgba(217, 237, 191, .1); border-left-color: var(--orange); background: rgba(217, 237, 191, .055); }
.example-grid a { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; color: var(--teal); font-weight: 650; }
.example-grid a .icon { transition: transform .25s; }
.example-grid a:hover .icon { transform: translateX(4px); }
[data-theme='dark'] .example-grid a { color: var(--lime); }

.pricing-hero, .legal-hero { position: relative; isolation: isolate; display: flex; min-height: 640px; align-items: center; overflow: hidden; padding: calc(72px + var(--site-header-height)) 20px 72px; text-align: center; background: #f3ead6; }
.pricing-hero::before, .legal-hero::before { content: ''; position: absolute; z-index: -3; inset: 0; background: url('/images/rumata-sunrise-outro-v1.jpg') center 48% / cover no-repeat; animation: page-landscape-breathe 15s ease-in-out infinite alternate; }
.pricing-hero::after, .legal-hero::after { content: ''; position: absolute; z-index: -2; inset: 0; background: linear-gradient(180deg, rgba(249, 244, 231, .88), rgba(249, 244, 231, .18) 55%, rgba(248, 244, 234, .9)); }
[data-theme='dark'] :is(.pricing-hero, .legal-hero)::before { filter: brightness(.48) saturate(.7); }
[data-theme='dark'] :is(.pricing-hero, .legal-hero)::after { background: linear-gradient(180deg, rgba(13, 37, 33, .88), rgba(13, 37, 33, .28) 55%, rgba(13, 37, 33, .94)); }
.pricing-hero .brand-wash, .pricing-hero .brand-grid, .legal-hero-effects { z-index: -1; pointer-events: none; }
.pricing-hero-fade, .legal-hero-fade { display: none; }
.pricing-hero-content, .legal-hero-content { position: relative; z-index: 2; width: min(820px, 100%); margin-inline: auto; padding: clamp(38px, 6vw, 66px); border: 1px solid rgba(255, 255, 255, .7); border-radius: 40px; background: rgba(255, 252, 243, .72); box-shadow: 0 36px 90px -52px rgba(24, 58, 52, .5); backdrop-filter: blur(18px); }
[data-theme='dark'] :is(.pricing-hero-content, .legal-hero-content) { border-color: rgba(217, 237, 191, .16); background: rgba(12, 40, 33, .76); box-shadow: 0 40px 96px -48px rgba(0, 0, 0, .75); }
.pricing-eyebrow, .legal-hero .eyebrow { gap: 7px; }
.pricing-eyebrow .icon, .legal-hero .eyebrow .icon { width: 14px; height: 14px; }
.pricing-hero h1, .legal-hero h1 { margin: 20px 0 0; color: var(--strong); font: 600 clamp(42px, 5.3vw, 58px)/1.04 'Space Grotesk', sans-serif; letter-spacing: -.045em; text-wrap: balance; }
.pricing-hero p, .legal-hero-content > p:not(.updated) { max-width: 720px; margin: 20px auto 0; color: var(--muted); font-size: 17px; line-height: 1.7; text-wrap: pretty; }
.pricing-catalog { padding-top: 72px; }
.pricing-heading { display: flex; max-width: 720px; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 42px; }
.pricing-heading h2 { margin: 0; color: var(--strong); font: 600 28px/1.18 'Space Grotesk', sans-serif; letter-spacing: -.025em; }
.pricing-heading p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.pricing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.pricing-grid.three-up { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pricing-catalog-followup { padding-top: 24px; }
.pricing-credit-note { max-width: 760px; margin: 28px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.pricing-card { position: relative; display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid rgba(109, 139, 90, .2); border-radius: 30px; background: linear-gradient(160deg, rgba(255, 253, 246, .94), rgba(236, 243, 217, .86)); box-shadow: 0 24px 54px -42px rgba(25, 67, 49, .46); transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s, border-color .3s; }
.pricing-card:nth-child(even) { background: linear-gradient(160deg, rgba(247, 249, 232, .95), rgba(221, 237, 201, .88)); }
.pricing-card:hover { transform: translateY(-8px); border-color: rgba(44, 120, 101, .32); box-shadow: 0 34px 68px -42px rgba(25, 67, 49, .56); }
.pricing-card.popular { border-color: rgba(255, 152, 0, .48); box-shadow: 0 28px 64px -40px rgba(255, 152, 0, .52); transform: translateY(-5px); }
.pricing-card.popular:hover { transform: translateY(-11px); }
[data-theme='dark'] .pricing-card, [data-theme='dark'] .pricing-card:nth-child(n) { border-color: rgba(217, 237, 191, .12); background: linear-gradient(160deg, rgba(20, 48, 41, .96), rgba(24, 56, 47, .9)); }
.pricing-popular { position: absolute; top: 16px; right: 16px; border-radius: 999px; background: var(--orange); color: var(--ink-dark); padding: 6px 11px; font-size: 10px; font-weight: 700; line-height: 1; }
.pricing-card-header { display: flex; flex-direction: column; gap: 12px; padding: 26px 24px 0; }
.pricing-card h3 { margin: 0; color: var(--strong); font: 600 20px/1.2 'Space Grotesk', sans-serif; }
.pricing-price { display: flex; align-items: baseline; gap: 4px; }
.pricing-price strong { color: var(--strong); font: 600 34px/1 'Space Grotesk', sans-serif; letter-spacing: -.03em; }
.pricing-price span, .pricing-card-header p { color: var(--muted); }
.pricing-card-header p { min-height: 64px; margin: 0; font-size: 13px; line-height: 1.65; }
.pricing-card-body { display: flex; flex: 1; flex-direction: column; gap: 20px; padding: 16px 24px 24px; }
.pricing-card ul { flex: 1; margin: 0; padding: 0; list-style: none; }
.pricing-card li { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px; color: var(--text); font-size: 13px; line-height: 1.5; }
.pricing-check { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--teal); }
[data-theme='dark'] .pricing-check { color: var(--lime); }
.pricing-addon { display: flex; flex-direction: column; gap: 4px; padding: 13px 14px; border: 1px solid color-mix(in srgb, var(--teal) 20%, var(--border)); border-radius: 15px; background: color-mix(in srgb, var(--teal) 5%, transparent); color: var(--text); font-size: 12px; line-height: 1.45; }
.pricing-addon strong { color: var(--strong); font-size: 13px; }
.pricing-addon span { color: var(--muted); }
.pricing-action { display: inline-flex; width: 100%; min-height: 44px; align-items: center; justify-content: center; gap: 8px; border: 1px solid color-mix(in srgb, var(--teal) 30%, var(--border)); border-radius: 999px; color: var(--teal); padding: 9px 16px; font-size: 14px; font-weight: 650; transition: transform .2s, border-color .2s, background .2s, box-shadow .2s; }
.pricing-action:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--teal) 52%, var(--border)); background: color-mix(in srgb, var(--teal) 6%, transparent); }
.pricing-action.primary { border-color: transparent; background: var(--orange); color: var(--ink-dark); box-shadow: 0 9px 28px -10px rgba(255, 152, 0, .55); }
.pricing-action.primary:hover { background: var(--rumata-orange-strong); box-shadow: 0 13px 32px -10px rgba(255, 152, 0, .65); }
.pricing-action .icon { width: 16px; height: 16px; }
[data-theme='dark'] .pricing-action:not(.primary) { border-color: rgba(144, 210, 109, .25); color: var(--lime); }

.contact-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 24px; padding: 22px; border: 1px solid rgba(109, 139, 90, .2); border-radius: 38px; background: rgba(255, 253, 246, .76); box-shadow: 0 28px 68px -50px rgba(25, 67, 49, .5); backdrop-filter: blur(16px); }
[data-theme='dark'] .contact-grid { border-color: rgba(217, 237, 191, .12); background: rgba(20, 48, 41, .82); }
.contact-grid > div { padding: clamp(26px, 4vw, 50px); }
.contact-grid h2 { margin: 0; color: var(--strong); font: 600 clamp(34px, 4vw, 46px)/1.08 'Space Grotesk', sans-serif; letter-spacing: -.035em; }
.contact-grid p { max-width: 640px; color: var(--muted); }
.contact-grid aside { padding: 34px; border: 1px solid rgba(255, 255, 255, .62); border-radius: 28px; background: linear-gradient(145deg, rgba(224, 239, 202, .84), rgba(249, 242, 220, .82)); box-shadow: 0 22px 48px -38px rgba(25, 67, 49, .48); }
[data-theme='dark'] .contact-grid aside { border-color: rgba(217, 237, 191, .12); background: linear-gradient(145deg, rgba(31, 74, 61, .8), rgba(20, 48, 41, .86)); }
.contact-grid aside strong { color: var(--strong); font: 600 21px 'Space Grotesk', sans-serif; }
.contact-grid aside a { display: inline-flex; align-items: center; gap: 8px; color: var(--teal); font-weight: 650; }
[data-theme='dark'] .contact-grid aside a { color: var(--lime); }

.not-found { position: relative; isolation: isolate; display: grid; min-height: min(820px, 100vh); place-items: center; overflow: hidden; padding: calc(70px + var(--site-header-height)) 20px 100px; text-align: center; background: #f3ead6; }
.not-found::before { content: ''; position: absolute; z-index: -3; inset: 0; background: url('/images/rumata-sunrise-outro-v1.jpg') center / cover no-repeat; animation: page-landscape-breathe 15s ease-in-out infinite alternate; }
.not-found::after { content: ''; position: absolute; z-index: -2; inset: 0; background: rgba(249, 244, 231, .48); }
[data-theme='dark'] .not-found::before { filter: brightness(.44) saturate(.72); }
[data-theme='dark'] .not-found::after { background: rgba(13, 37, 33, .58); }
.not-found .brand-wash, .not-found .brand-grid, .not-found-fade { display: none; }
.not-found-content { position: relative; z-index: 1; max-width: 760px; padding: clamp(38px, 6vw, 68px); border: 1px solid rgba(255, 255, 255, .72); border-radius: 40px; background: rgba(255, 252, 243, .74); box-shadow: 0 38px 92px -52px rgba(24, 58, 52, .56); backdrop-filter: blur(18px); animation: legal-enter .55s ease-out both; }
[data-theme='dark'] .not-found-content { border-color: rgba(217, 237, 191, .16); background: rgba(12, 40, 33, .78); }
.not-found-code { display: inline-block; color: var(--teal); font: 600 12px 'JetBrains Mono', monospace; letter-spacing: .24em; }
[data-theme='dark'] .not-found-code { color: var(--lime); }
.not-found h1 { max-width: 680px; margin: 22px auto 0; color: var(--strong); font: 600 clamp(48px, 7vw, 78px)/1 'Space Grotesk', sans-serif; letter-spacing: -.05em; text-wrap: balance; }
.not-found p { max-width: 590px; margin: 24px auto 0; color: var(--muted); font-size: 18px; line-height: 1.75; }
.not-found-actions { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 34px; }
.not-found-link { color: var(--teal); font-size: 14px; font-weight: 650; transition: opacity .2s; }
.not-found-link:hover { opacity: .7; }
[data-theme='dark'] .not-found-link { color: var(--lime); }

.legal-hero { min-height: 600px; }
.legal-hero-content { animation: legal-enter .5s ease-out both; }
.legal-hero .updated { margin: 16px 0 0; color: var(--muted); font: 500 11px 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }
.legal-layout { display: grid; position: relative; z-index: 2; width: min(1152px, calc(100% - 40px)); grid-template-columns: 220px minmax(0, 1fr); gap: 30px; margin: -34px auto 0; padding-bottom: 90px; }
.legal-sidebar { position: sticky; top: 88px; align-self: start; }
.legal-sidebar details { display: none; }
.legal-desktop-nav, .legal-sidebar details, .legal-document { border: 1px solid rgba(109, 139, 90, .2); border-radius: 26px; background: rgba(255, 253, 246, .86); box-shadow: 0 24px 54px -44px rgba(25, 67, 49, .46); backdrop-filter: blur(16px); }
[data-theme='dark'] :is(.legal-desktop-nav, .legal-sidebar details, .legal-document) { border-color: rgba(217, 237, 191, .12); background: rgba(20, 48, 41, .88); }
.legal-desktop-nav { padding: 22px; }
.legal-desktop-nav > p, .legal-sidebar summary { margin: 0; color: var(--muted); font: 500 11px 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; }
.legal-navigation { margin-top: 16px; }
.legal-navigation ol { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.legal-navigation a { display: flex; gap: 8px; color: var(--muted); font-size: 13px; line-height: 1.45; transition: color .2s, transform .2s; }
.legal-navigation a:hover { color: var(--teal); transform: translateX(3px); }
[data-theme='dark'] .legal-navigation a:hover { color: var(--lime); }
.legal-navigation a span { opacity: .6; font: 400 11px/1.8 'JetBrains Mono', monospace; }
.legal-document { min-width: 0; padding: 42px; animation: legal-enter .45s .08s ease-out both; }
.legal-document section { padding: 32px 0; border-bottom: 1px solid var(--border); scroll-margin-top: 112px; }
.legal-document section:first-child { padding-top: 0; }
.legal-document section:last-child { padding-bottom: 0; border-bottom: 0; }
.legal-introduction { display: flex; flex-direction: column; gap: 16px; padding-bottom: 32px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 15px; line-height: 1.86; }
.legal-document h2 { margin: 0; color: var(--strong); font: 600 24px/1.25 'Space Grotesk', sans-serif; letter-spacing: -.02em; }
.legal-document h3 { margin: 8px 0 0; color: var(--strong); font: 600 18px/1.35 'Space Grotesk', sans-serif; }
.legal-document section > div { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; color: var(--muted); font-size: 15px; line-height: 1.86; }
.legal-document p { margin: 0; }
.legal-document strong { color: var(--strong); font-weight: 600; }
.legal-document ul { margin: 0; padding-left: 24px; }
.legal-document li { margin-top: 8px; padding-left: 3px; }
.legal-document li:first-child { margin-top: 0; }
.legal-document li::marker { color: var(--orange); }
.legal-document a { color: var(--teal); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--teal) 30%, transparent); text-underline-offset: 4px; }
[data-theme='dark'] .legal-document a { color: var(--lime); }
.legal-document code { border-radius: 6px; background: var(--surface-2); padding: 2px 5px; color: var(--strong); font: 12px 'JetBrains Mono', monospace; }
.legal-table-wrap { overflow-x: auto; }
.legal-document table { width: 100%; min-width: 560px; border-collapse: collapse; text-align: left; font-size: 14px; }
.legal-document th, .legal-document td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.legal-document thead th { padding-block: 8px; border-bottom-color: var(--border-strong); color: var(--strong); font-weight: 600; }
.legal-document tbody th { color: var(--strong); font-weight: 500; }
.legal-rtl { text-align: right; }
.legal-rtl ul { padding-right: 24px; padding-left: 0; }

.page-outro { position: relative; isolation: isolate; display: flex; min-height: 980px; flex-direction: column; overflow: hidden; background: var(--canvas); }
.page-outro::before { content: ''; position: absolute; z-index: -2; inset: 0; background: url('/images/rumata-sunrise-outro-v1.jpg') center bottom / cover no-repeat; -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.22) 8%, #000 24%, #000); mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.22) 8%, #000 24%, #000); }
.page-outro::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, var(--canvas), color-mix(in srgb, var(--canvas) 72%, transparent) 9%, transparent 30%, transparent 60%, rgba(229, 216, 187, .7)); }
[data-theme='dark'] .page-outro::before { filter: brightness(.42) saturate(.72) contrast(1.05); }
[data-theme='dark'] .page-outro::after { background: linear-gradient(180deg, var(--canvas), color-mix(in srgb, var(--canvas) 76%, transparent) 9%, transparent 30%, transparent 60%, rgba(7, 27, 23, .8)); }
.page-outro-cta { display: flex; min-height: 620px; flex: 1; align-items: flex-start; justify-content: center; padding-block: 95px 190px; }
.landscape-closing { width: min(860px, 100%); padding: clamp(42px, 6vw, 66px); border: 1px solid rgba(255,255,255,.7); border-radius: 38px; background: rgba(255,252,243,.68); box-shadow: 0 36px 88px -48px rgba(24,58,52,.56); text-align: center; backdrop-filter: blur(18px); transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s; }
.landscape-closing:hover { transform: translateY(-5px); box-shadow: 0 44px 96px -48px rgba(24,58,52,.64); }
[data-theme='dark'] .landscape-closing { border-color: rgba(217,237,191,.16); background: rgba(10,34,29,.74); box-shadow: 0 40px 96px -46px rgba(0,0,0,.74); }
.landscape-closing > .node-glyph { height: 34px; margin: 0 auto 24px; }
.landscape-closing h2 { max-width: 650px; margin: 22px auto 30px; color: #173c32; font: 600 clamp(39px, 5vw, 58px)/1.02 'Space Grotesk', sans-serif; letter-spacing: -.045em; text-wrap: balance; }
[data-theme='dark'] .landscape-closing h2 { color: var(--mint); }
.landscape-composer { text-align: left; }
.landscape-composer .composer { background: rgba(255,254,248,.88); }
[data-theme='dark'] .landscape-composer .composer { background: rgba(20,48,41,.92); }
.page-outro .footer { margin-top: auto; border-color: transparent; background: transparent; }
.page-outro .footer-grid a, .page-outro .footer-grid p, .page-outro .footer-bottom { color: rgba(31,67,55,.7); }
.page-outro .footer-grid strong { color: rgba(31,67,55,.58); }
.page-outro .footer-bottom { border-color: rgba(45,79,52,.14); }
[data-theme='dark'] .page-outro .footer-grid a, [data-theme='dark'] .page-outro .footer-grid p, [data-theme='dark'] .page-outro .footer-bottom { color: rgba(217,237,191,.68); }
[data-theme='dark'] .page-outro .footer-grid strong { color: rgba(217,237,191,.52); }
[data-theme='dark'] .page-outro .footer-bottom { border-color: rgba(217,237,191,.12); }

@keyframes legal-enter { from { transform: translateY(14px); } to { transform: translateY(0); } }

@media (max-width: 960px) {
  .example-grid, .pricing-grid, .pricing-grid.three-up { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .legal-layout { grid-template-columns: 1fr; gap: 24px; }
  .legal-sidebar { position: static; }
  .legal-sidebar details { display: block; padding: 20px; }
  .legal-sidebar summary { display: flex; cursor: pointer; list-style: none; align-items: center; justify-content: space-between; }
  .legal-sidebar summary::-webkit-details-marker { display: none; }
  .legal-sidebar summary span { font-size: 16px; transition: transform .2s; }
  .legal-sidebar details[open] summary span { transform: rotate(45deg); }
  .legal-desktop-nav { display: none; }
}

@media (max-width: 760px) {
  .example-grid, .pricing-grid, .pricing-grid.three-up { grid-template-columns: 1fr; }
  .pricing-hero, .legal-hero { min-height: 580px; padding: calc(55px + var(--site-header-height)) 15px 55px; }
  .pricing-hero-content, .legal-hero-content { border-radius: 30px; padding: 38px 24px; }
  .pricing-hero h1, .legal-hero h1 { font-size: 40px; }
  .pricing-catalog { padding-top: 48px; }
  .pricing-card-header p { min-height: 0; }
  .pricing-card.popular { transform: none; }
  .not-found { min-height: 680px; padding-inline: 15px; }
  .not-found-content { border-radius: 30px; padding: 38px 24px; }
  .not-found-actions { flex-direction: column; gap: 18px; }
  .legal-layout { width: min(100% - 30px, 1152px); margin-top: -22px; }
  .legal-document { padding: 26px; }
  .page-outro { min-height: 1160px; }
  .page-outro::before { background-size: auto 100%; }
  .page-outro-cta { min-height: 720px; padding-block: 72px 230px; }
  .landscape-closing { border-radius: 28px; padding: 40px 22px; }
}

.technology-hero { position: relative; isolation: isolate; display: flex; min-height: 680px; align-items: center; overflow: hidden; padding: calc(88px + var(--site-header-height)) 0 88px; background: #f3ead6; }
.technology-hero::before { content: ''; position: absolute; z-index: -3; inset: 0; background: url('/images/rumata-sunrise-outro-v1.jpg') center 48% / cover no-repeat; animation: page-landscape-breathe 15s ease-in-out infinite alternate; }
.technology-hero::after { content: ''; position: absolute; z-index: -2; inset: 0; background: linear-gradient(180deg, rgba(249, 244, 231, .9), rgba(249, 244, 231, .18) 55%, rgba(248, 244, 234, .9)); }
[data-theme='dark'] .technology-hero::before { filter: brightness(.48) saturate(.7); }
[data-theme='dark'] .technology-hero::after { background: linear-gradient(180deg, rgba(13, 37, 33, .88), rgba(13, 37, 33, .28) 55%, rgba(13, 37, 33, .94)); }
.technology-hero > .wrap { position: relative; z-index: 1; }
.technology-hero .brand-wash, .technology-hero .brand-grid { z-index: -1; opacity: .35; }
.technology-hero-card { width: min(880px, 100%); padding: clamp(40px, 6vw, 70px); border: 1px solid rgba(255, 255, 255, .7); border-radius: 42px; background: rgba(255, 252, 243, .72); box-shadow: 0 36px 90px -52px rgba(24, 58, 52, .52); backdrop-filter: blur(18px); }
[data-theme='dark'] .technology-hero-card { border-color: rgba(217, 237, 191, .16); background: rgba(12, 40, 33, .76); box-shadow: 0 40px 96px -48px rgba(0, 0, 0, .75); }
.technology-hero .eyebrow { gap: 7px; }
.technology-hero .eyebrow svg { width: 14px; height: 14px; }
.technology-hero h1 { max-width: 900px; margin: 20px 0 18px; color: var(--strong); font: 600 clamp(48px, 6.3vw, 76px)/.98 'Space Grotesk', sans-serif; letter-spacing: -.05em; text-wrap: balance; }
.technology-hero p { max-width: 790px; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.75; }

.tech-heading { max-width: 760px; }
.tech-heading .eyebrow { gap: 7px; }
.tech-heading .eyebrow svg { width: 14px; height: 14px; }
.tech-heading h2 { margin: 18px 0 16px; color: var(--strong); font: 600 clamp(35px, 4vw, 50px)/1.08 'Space Grotesk', sans-serif; letter-spacing: -.035em; text-wrap: balance; }
.tech-heading > p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.75; text-wrap: pretty; }
.tech-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tech-feature { min-height: 210px; padding: 24px; border: 1px solid rgba(109, 139, 90, .2); border-radius: 27px; background: linear-gradient(145deg, rgba(255, 253, 246, .92), rgba(230, 240, 209, .86)); box-shadow: 0 24px 54px -42px rgba(25, 67, 49, .46); }
.tech-feature:nth-child(3n + 2) { background: linear-gradient(145deg, rgba(247, 249, 232, .94), rgba(218, 235, 198, .88)); }
[data-theme='dark'] .tech-feature:nth-child(n) { border-color: rgba(217, 237, 191, .12); background: linear-gradient(145deg, rgba(20, 48, 41, .96), rgba(24, 56, 47, .9)); }
.tech-icon, .workflow-feature-grid article > span, .access-blocks article > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--teal) 10%, transparent); color: var(--teal); }
[data-theme='dark'] :is(.tech-icon, .workflow-feature-grid article > span, .access-blocks article > span) { background: rgba(144, 210, 109, .1); color: var(--lime); }
.tech-feature h3 { margin: 28px 0 7px; color: var(--strong); font: 600 16px/1.25 'Space Grotesk', sans-serif; }
.tech-feature p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.tech-accent-card { display: flex; min-height: 210px; flex-direction: column; justify-content: space-between; padding: 24px; border-radius: 27px; background: radial-gradient(circle at 85% 10%, rgba(144, 210, 109, .28), transparent 44%), var(--teal); color: var(--mint); box-shadow: var(--shadow-md); transition: transform .3s, box-shadow .3s; }
.tech-accent-card:hover { transform: translateY(-4px) rotate(-.35deg); box-shadow: var(--shadow-lg); }
.tech-accent-card small { font: 500 10px 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.tech-accent-card strong { font: 600 19px/1.25 'Space Grotesk', sans-serif; }

.tech-workflows { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 56px; }
.workflow-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 30px; }
.workflow-feature-grid article { display: flex; min-height: 116px; gap: 12px; padding: 16px; border: 1px solid rgba(109, 139, 90, .2); border-radius: 20px; background: rgba(255, 253, 246, .78); box-shadow: 0 18px 42px -38px rgba(25, 67, 49, .44); }
[data-theme='dark'] .workflow-feature-grid article { border-color: rgba(217, 237, 191, .12); background: rgba(20, 48, 41, .82); }
.workflow-feature-grid article > span { flex: none; width: 36px; height: 36px; border-radius: 9px; }
.workflow-feature-grid article svg { width: 17px; height: 17px; }
.workflow-feature-grid b { color: var(--strong); font-size: 13px; }
.workflow-feature-grid p { margin: 3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.missing-callout, .security-callout { display: flex; gap: 13px; margin-top: 18px; padding: 18px; border: 1px solid rgba(255, 152, 0, .3); border-radius: 16px; background: rgba(255, 152, 0, .06); }
.missing-callout > span, .security-callout > span { display: grid; flex: none; width: 38px; height: 38px; place-items: center; border-radius: 11px; background: rgba(255, 152, 0, .13); color: var(--orange); }
.missing-callout > span svg, .security-callout > span svg { width: 18px; height: 18px; }
.missing-callout p, .security-callout p { margin: 0; color: var(--text); font-size: 13px; line-height: 1.65; }
.missing-callout strong, .security-callout strong { display: block; color: var(--strong); }
.sticky-visual { position: sticky; top: 92px; }
.sticky-visual > p { margin: 12px 0 0; color: var(--muted); font: 400 10px 'JetBrains Mono', monospace; text-align: center; }
.workflow-graph { position: relative; aspect-ratio: 16/11; overflow: hidden; border: 1px solid rgba(109, 139, 90, .22); border-radius: 32px; background: color-mix(in srgb, var(--surface) 88%, transparent); box-shadow: 0 32px 72px -42px rgba(25, 67, 49, .55); backdrop-filter: blur(16px); }
.graph-grid, .panel-grid { position: absolute; inset: 0; background-image: radial-gradient(var(--teal) 1px, transparent 1px); background-size: 22px 22px; opacity: .1; }
.graph-wash { position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(217, 237, 191, .55), transparent 48%), radial-gradient(circle at 10% 90%, rgba(144, 210, 109, .16), transparent 42%); }
[data-theme='dark'] .graph-wash { opacity: .25; }
.graph-wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.graph-wires path { fill: none; stroke: url(#wire); stroke-width: .8; stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; animation: flow-wire 2.4s linear infinite; }
.graph-wires path.hot { stroke: var(--orange); stroke-width: 1.1; }
@keyframes flow-wire { to { stroke-dashoffset: -16; } }
.workflow-node { position: absolute; z-index: 2; display: flex; min-width: 124px; align-items: center; gap: 8px; padding: 7px 10px 7px 7px; transform: translate(-50%, -50%); border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: var(--shadow-md); animation: node-float 4s ease-in-out infinite alternate; }
.workflow-node > i { display: grid; width: 28px; height: 28px; flex: none; place-items: center; border-radius: 8px; background: color-mix(in srgb, var(--teal) 10%, transparent); color: var(--teal); }
.workflow-node > i svg { width: 15px; height: 15px; }
.workflow-node > b { display: flex; flex-direction: column; color: var(--strong); font-size: 11px; line-height: 1.25; }
.workflow-node small { color: var(--muted); font: 400 8px 'JetBrains Mono', monospace; }
.workflow-node.ai { border-color: rgba(255, 152, 0, .72); box-shadow: 0 0 0 3px rgba(255, 152, 0, .12), var(--shadow-md); }
.workflow-node.trigger { left: 13%; top: 26%; }.workflow-node.branch { left: 42%; top: 14%; }.workflow-node.db { left: 40%; top: 64%; }.workflow-node.ai { left: 70%; top: 38%; }.workflow-node.deploy { left: 70%; top: 84%; }.workflow-node.done { left: 88%; top: 60%; }
@keyframes node-float { to { translate: 0 -3px; } }
.graph-status { position: absolute; left: 15px; bottom: 10px; color: var(--muted); font: 500 9px 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }
.graph-status i, .provisioned i { display: inline-block; width: 6px; height: 6px; margin-left: 5px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(144, 210, 109, .12); animation: pulse-dot 1.8s ease-in-out infinite; }
@keyframes pulse-dot { 50% { opacity: .35; transform: scale(.75); } }

.backend-panel { position: relative; overflow: hidden; padding: 64px 48px; border: 1px solid rgba(217, 237, 191, .13); border-radius: 42px; background: radial-gradient(circle at 88% 8%, rgba(144, 210, 109, .2), transparent 34%), radial-gradient(circle at 8% 100%, rgba(255, 152, 0, .1), transparent 36%), var(--ink); color: var(--mint); box-shadow: 0 36px 86px -48px rgba(0, 0, 0, .72); }
.backend-panel > *:not(.panel-grid) { position: relative; z-index: 1; }
.backend-panel .panel-grid { color: var(--lime); opacity: .055; }
.backend-panel .eyebrow { border-color: rgba(217, 237, 191, .18); background: rgba(217, 237, 191, .07); color: var(--lime); }
.backend-panel .tech-heading h2 { color: var(--mint); }
.backend-panel .tech-heading > p, .backend-panel > p { color: rgba(217, 237, 191, .72); }
.backend-panel > p { max-width: 780px; margin: 28px 0 0; font-size: 13px; }
.step-flow { display: flex; padding: 0; margin: 36px 0 0; list-style: none; }
.step-flow li { display: flex; flex: 1; align-items: center; min-width: 0; }
.step-flow article { display: flex; flex: 1; min-height: 124px; gap: 11px; padding: 15px; border: 1px solid rgba(217, 237, 191, .18); border-radius: 15px; background: rgba(255, 255, 255, .035); }
.step-flow li.highlight article { border-color: rgba(255, 152, 0, .45); background: rgba(255, 152, 0, .07); }
.step-flow article > span { display: grid; width: 36px; height: 36px; flex: none; place-items: center; border-radius: 10px; background: rgba(144, 210, 109, .1); color: var(--lime); }
.step-flow article > span svg { width: 17px; height: 17px; }
.step-flow article div { display: flex; min-width: 0; flex-direction: column; }
.step-flow small { color: rgba(217, 237, 191, .5); font: 400 9px 'JetBrains Mono', monospace; }
.step-flow b { color: var(--mint); font: 600 12px 'Space Grotesk', sans-serif; }
.step-flow p { margin: 4px 0 0; color: rgba(217, 237, 191, .62); font-size: 10px; line-height: 1.5; }
.step-arrow { display: grid; width: 30px; flex: none; place-items: center; color: rgba(144, 210, 109, .55); }
.step-arrow svg { width: 18px; height: 18px; }

.tech-persistence { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 72px; }
.persistence-strata { display: flex; flex-direction: column; gap: 12px; }
.persistence-strata article { position: relative; display: flex; align-items: center; gap: 15px; padding: 18px 21px; border: 1px solid rgba(109, 139, 90, .2); border-radius: 24px; background: rgba(255, 253, 246, .86); box-shadow: 0 22px 48px -40px rgba(25, 67, 49, .48); transition: transform .3s; }
[data-theme='dark'] .persistence-strata article { border-color: rgba(217, 237, 191, .12); background: rgba(20, 48, 41, .88); }
.persistence-strata article:hover { transform: translateY(-3px); }
.persistence-strata article:first-child { margin-right: 28px; background: var(--teal-strong); color: var(--mint); }
.persistence-strata article:nth-child(2) { margin-left: 24px; margin-right: 14px; background: color-mix(in srgb, var(--teal) 12%, var(--surface)); }
.persistence-strata article:nth-child(3) { margin-left: 48px; }
.persistence-strata article > span { display: grid; width: 44px; height: 44px; flex: none; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--teal) 12%, transparent); color: var(--teal); }
.persistence-strata article:first-child > span { background: rgba(255,255,255,.14); color: var(--mint); }
.persistence-strata b { color: var(--strong); font: 600 15px 'Space Grotesk', sans-serif; }
.persistence-strata article:first-child b { color: var(--mint); }
.persistence-strata small { margin-left: 7px; color: var(--muted); font: 400 9px 'JetBrains Mono', monospace; text-transform: uppercase; }
.persistence-strata article:first-child small, .persistence-strata article:first-child p { color: var(--mint); }
.persistence-strata p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.provisioned { align-self: flex-start; margin-top: 3px; padding: 6px 12px; border: 1px solid rgba(144, 210, 109, .42); border-radius: 999px; background: rgba(217, 237, 191, .42); color: var(--teal); font: 400 10px 'JetBrains Mono', monospace; }
.provisioned i { margin: 0 7px 0 0; }
.security-callout { border-color: color-mix(in srgb, var(--teal) 25%, transparent); background: color-mix(in srgb, var(--teal) 6%, transparent); }
.security-callout > span { background: var(--teal); color: var(--mint); }

.tech-security > .tech-heading { max-width: 790px; }
.security-grid { display: grid; grid-template-columns: 1.1fr .9fr; align-items: start; gap: 40px; margin-top: 42px; }
.permission-card { padding: 32px; border: 1px solid rgba(109, 139, 90, .2); border-radius: 30px; background: linear-gradient(145deg, rgba(240, 246, 221, .88), rgba(255, 249, 232, .84)); box-shadow: 0 26px 58px -44px rgba(25, 67, 49, .5); }
[data-theme='dark'] .permission-card { border-color: rgba(217, 237, 191, .12); background: linear-gradient(145deg, rgba(24, 56, 47, .9), rgba(20, 48, 41, .94)); }
.permission-root { display: inline-flex; align-items: center; gap: 11px; padding: 12px 16px; border-radius: 15px; background: var(--ink); color: var(--mint); box-shadow: var(--shadow-md); }
.permission-root > span { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 10px; background: rgba(255,255,255,.09); }
.permission-root > span svg { width: 17px; height: 17px; }
.permission-root div { display: flex; flex-direction: column; }
.permission-root b, .permission-leaf article > b { font: 600 12px 'JetBrains Mono', monospace; }
.permission-root small { color: var(--mint); font: 400 8px 'JetBrains Mono', monospace; }
.permission-bits { display: flex; gap: 2px; margin-left: auto; }
.permission-bits i { display: grid; width: 15px; height: 17px; place-items: center; border-radius: 3px; background: rgba(144, 210, 109, .2); color: var(--lime); font: 400 9px 'JetBrains Mono', monospace; font-style: normal; }
.permission-bits i.off { opacity: .35; }
.permission-leaves { margin: 4px 0 0 22px; }
.permission-leaf { position: relative; display: flex; padding-left: 30px; }
.tree-rail { position: absolute; left: 0; top: 0; width: 27px; height: 100%; border-left: 1px solid var(--border-strong); }
.tree-rail::after { content: ''; position: absolute; left: 0; top: 50%; width: 27px; border-top: 1px solid var(--border-strong); }
.permission-leaf.last .tree-rail { height: 50%; }
.permission-leaf article { display: flex; width: 100%; align-items: center; gap: 10px; margin: 4px 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); box-shadow: var(--shadow-sm); }
.entity-icon { display: grid; width: 31px; height: 31px; flex: none; place-items: center; border-radius: 8px; background: color-mix(in srgb, var(--teal) 10%, transparent); color: var(--teal); }
.entity-icon svg { width: 15px; height: 15px; }
.permission-leaf article > b { flex: 1; color: var(--strong); }
.permission-leaf article > small { padding: 2px 6px; border-radius: 999px; background: var(--mint); color: var(--teal-strong); font: 400 7px 'JetBrains Mono', monospace; text-transform: uppercase; }
.access-blocks { display: flex; flex-direction: column; gap: 13px; }
.access-blocks article { display: flex; gap: 14px; padding: 21px; border: 1px solid rgba(109, 139, 90, .2); border-radius: 22px; background: rgba(255, 253, 246, .84); box-shadow: 0 20px 46px -40px rgba(25, 67, 49, .46); }
[data-theme='dark'] .access-blocks article { border-color: rgba(217, 237, 191, .12); background: rgba(20, 48, 41, .88); }
.access-blocks article > span { flex: none; }
.access-blocks b { color: var(--strong); font: 600 15px 'Space Grotesk', sans-serif; }
.access-blocks p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

.automation-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-top: 42px; }
.example-flow { margin-top: 30px; padding: 26px; border: 1px solid rgba(109, 139, 90, .2); border-radius: 30px; background: rgba(236, 243, 216, .78); box-shadow: 0 24px 52px -44px rgba(25, 67, 49, .46); }
[data-theme='dark'] .example-flow { border-color: rgba(217, 237, 191, .12); background: rgba(24, 56, 47, .8); }
.example-flow > small { color: var(--muted); font: 500 10px 'JetBrains Mono', monospace; letter-spacing: .13em; text-transform: uppercase; }
.example-flow .step-flow { margin-top: 16px; }
.example-flow .step-flow article { min-height: 62px; align-items: center; border-color: var(--border); background: var(--surface); }
.example-flow .step-flow b { color: var(--strong); }
.example-flow .step-flow small { color: var(--muted); }
.example-flow .step-arrow { color: var(--teal); }
.tech-build .tech-heading { margin-inline: auto; text-align: center; }
.use-cases { display: flex; max-width: 890px; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 40px auto 0; }
.use-cases > span { display: inline-flex; align-items: center; gap: 9px; padding: 9px 19px 9px 10px; border: 1px solid rgba(109, 139, 90, .2); border-radius: 999px; background: rgba(255, 253, 246, .82); box-shadow: 0 18px 42px -38px rgba(25, 67, 49, .46); transition: transform .25s, box-shadow .25s, border-color .25s; }
[data-theme='dark'] .use-cases > span { border-color: rgba(217, 237, 191, .12); background: rgba(20, 48, 41, .84); }
.use-cases > span:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--teal) 40%, var(--border)); box-shadow: var(--shadow-md); }
.use-cases i { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--teal) 10%, transparent); color: var(--teal); }
.use-cases i svg { width: 15px; height: 15px; }
.use-cases b { color: var(--strong); font-size: 13px; }

@media (max-width: 980px) {
  .tech-feature-grid, .automation-grid { grid-template-columns: repeat(2, 1fr); }
  .tech-workflows, .tech-persistence, .security-grid { grid-template-columns: 1fr; }
  .sticky-visual { position: static; }
  .step-flow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .step-flow li { display: block; }
  .step-arrow { display: none; }
}

@media (max-width: 640px) {
  .technology-hero { min-height: 610px; padding: calc(62px + var(--site-header-height)) 0 62px; }
  .technology-hero-card { border-radius: 30px; padding: 40px 24px; }
  .tech-feature-grid, .automation-grid, .workflow-feature-grid, .step-flow { grid-template-columns: 1fr; }
  .backend-panel { padding: 44px 20px; }
  .workflow-node { min-width: 98px; padding: 6px; }
  .workflow-node > i { width: 23px; height: 23px; }
  .workflow-node > b { font-size: 9px; }
  .permission-card { padding: 18px; overflow-x: auto; }
  .permission-tree { min-width: 480px; }
  .persistence-strata article { margin-inline: 0 !important; }
}