/* Brief, decorative page entrances over the existing real content. */
.page-entrance {
  position: fixed; inset: 0; z-index: 85; display: grid; place-items: center;
  padding: 72px 24px; isolation: isolate; pointer-events: none;
}
.page-entrance:before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at 50% 46%, #f4f0e9fa 15%, #f4f0e9f2 60%, #eee5d9de);
  opacity: 1;
}
.page-intro-scene { position: relative; width: min(520px, 85vw); height: 330px; transform-origin: center; }
.page-intro-skip {
  position: absolute; bottom: max(24px, env(safe-area-inset-bottom)); right: max(24px, env(safe-area-inset-right));
  pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 25px;
  min-height: 46px; padding: 12px 19px; border: 1px solid #fffdf9db; border-radius: 99px;
  background: #f8f4edee; box-shadow: inset 0 1px 0 #fff, 0 4px 20px #493a2412;
  color: #58483c; font-size: 12px;
}
.intro-caption { margin: 0; position: absolute; bottom: 0; width: 100%; text-align: center; font-size: 10px; font-weight: 650; letter-spacing: .18em; color: #78654d; }
.intro-monitor { position: absolute; inset: 0 20px 72px; padding: 13px; border-radius: 22px; border: 1px solid #fffdf9f0; background: linear-gradient(130deg,#fffdf9b3,#dccfbf8c); box-shadow: inset 0 1px 0 #fff, inset 0 -2px 4px #9e89693b, 0 24px 55px #4d3d2426; overflow: hidden; }
.intro-monitor:after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg,transparent 20%,#fffdf970 40%,transparent 63%); transform: translateX(-110%); }
.intro-monitor-screen { position: relative; height: 100%; overflow: hidden; background: #34312b; border: 1px solid #8a7862; border-radius: 11px; }
.intro-monitor-capture { width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transform: scale(1.025); filter: brightness(.7); }
.intro-monitor-symbol { position: absolute; inset: 0; display: grid; place-items: center; }
.intro-monitor-symbol img { width: 46px; height: 46px; filter: invert(1); opacity: .85; }
.intro-monitor-light { position: absolute; left: calc(50% - 2px); bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: #b6a07a; box-shadow: 0 0 7px #fff5d0; }
.intro-monitor-neck { position: absolute; width: 62px; height: 38px; top: 258px; left: calc(50% - 31px); background: linear-gradient(90deg,#c0b09a,#f7eee0 45%,#bdab91); clip-path: polygon(20% 0,80% 0,100% 100%,0 100%); }
.intro-monitor-base { position: absolute; width: 152px; height: 10px; top: 291px; left: calc(50% - 76px); border-radius: 50%; background: linear-gradient(#f9f2e7,#b4a185); box-shadow: 0 10px 16px #493a2417; }
.intro-setup-line { position: absolute; width: 1px; left: 63px; top: 46px; height: 236px; background: #b69c75; transform-origin: top; transform: scaleY(0); }
.intro-setup-card { position: absolute; left: 31px; right: 31px; height: 85px; padding: 16px 24px; display: flex; align-items: center; gap: 24px; border: 1px solid #fffdf9e6; border-radius: 20px; background: linear-gradient(125deg,#fffdf9d9,#e9dfd0b3); box-shadow: inset 0 1px 0 #fff, 0 13px 24px #493a2412; opacity: .45; transform: translate(var(--setup-start-x,0px),var(--setup-start-y,0px)) rotate(var(--setup-start-r,0deg)) scale(.96); }
.intro-setup-card:nth-of-type(2) { top: 12px; --setup-start-x: -45px; --setup-start-y: -14px; --setup-start-r: -5deg; }
.intro-setup-card:nth-of-type(3) { top: 120px; --setup-start-x: 45px; --setup-start-y: 0px; --setup-start-r: 5deg; }
.intro-setup-card:nth-of-type(4) { top: 228px; --setup-start-x: -30px; --setup-start-y: 18px; --setup-start-r: -3deg; }
.intro-setup-card > span { width: 28px; height: 28px; border-radius: 50%; background: #e6d9c6; display: grid; place-items: center; font-size: 10px; color: #796145; flex-shrink: 0; }
.intro-setup-card small { display: block; font-size: 8px; letter-spacing: .13em; color: #8a7255; margin-bottom: 6px; }
.intro-setup-card strong { font-size: 17px; font-weight: 500; letter-spacing: -.02em; }
.intro-question { position: absolute; top: 0; width: 100%; text-align: center; font-size: 24px; line-height: 1.5; letter-spacing: -.035em; margin: 0; }
.intro-connections { position: absolute; inset: 20px 0 0; width: 100%; height: 300px; overflow: visible; }
.intro-connections path { stroke: #b19b7b; stroke-width: 1; stroke-dasharray: 240; stroke-dashoffset: 240; }
.intro-fragment { position: absolute; padding: 12px 18px; border: 1px solid #fffdf9e6; border-radius: 99px; background: linear-gradient(125deg,#fffdf9e6,#e9dfd0a6); box-shadow: inset 0 1px 0 #fff, 0 8px 18px #493a240d; font-size: 12px; color: #695944; }
.intro-fragment-one { top: 111px; left: 0; --fragment-x: -20px; }
.intro-fragment-two { top: 111px; right: 0; --fragment-x: 20px; }
.intro-fragment-three { bottom: 0; left: 50%; translate: -50% 0; white-space: nowrap; --fragment-x: 0px; }
.intro-mavari { position: absolute; left: calc(50% - 56px); top: 168px; width: 112px; height: 112px; }
.intro-mavari img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.intro-mavari:after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg,transparent 25%,#fff9debd 48%,transparent 70%); mask: url('/assets/mavari-monogram.png') center / contain no-repeat; -webkit-mask: url('/assets/mavari-monogram.png') center / contain no-repeat; opacity: 0; }
.intro-message { position: absolute; inset: 36px 70px 66px; perspective: 900px; border-radius: 24px; background: linear-gradient(130deg,#eadfceb3,#cbbca573); border: 1px solid #fffdf9e6; box-shadow: inset 0 1px 0 #fff, 0 20px 45px #493a241a; }
.intro-message-flap { position: absolute; inset: 0; transform-origin: top; clip-path: polygon(0 0,100% 0,50% 65%); background: linear-gradient(135deg,#fffdf9e6,#d7c7afdb); border-radius: 24px 24px 0 0; z-index: 2; }
.intro-message-paper { position: absolute; inset: 12px; padding: 21px; display: flex; flex-direction: column; justify-content: center; gap: 16px; border: 1px solid #fffdf9d9; border-radius: 17px; background: #fbf7eff2; transform: translateY(12px); }
.intro-message-icon img { width: 30px; height: 30px; }
.intro-message-paper strong { font-size: 20px; font-weight: 500; letter-spacing: -.035em; }
.intro-message-rule { display: block; height: 1px; background: #c8b89e; width: 100%; }
.intro-message-rule:last-child { width: 68%; }
.intro-message-actions { position: absolute; bottom: 0; left: 0; right: 0; display: flex; gap: 9px; justify-content: center; }
.intro-message-actions span { padding: 11px 22px; background: #f9f4ebd9; border: 1px solid #fffdf9e6; border-radius: 99px; font-size: 12px; opacity: 0; }
.page-entrance[data-playing=true]:before { animation: scene-backdrop 1000ms ease both; }
.page-entrance[data-playing=true] .page-intro-scene { animation: scene-arrive 1000ms cubic-bezier(.22,1,.36,1) both; }
.page-entrance[data-playing=true] .intro-monitor-capture { animation: screen-wake 680ms 80ms ease both; }
.page-entrance[data-playing=true] .intro-monitor-symbol { animation: boot-symbol 500ms ease both; }
.page-entrance[data-playing=true] .intro-monitor:after { animation: monitor-reflection 800ms ease both; }
.page-entrance[data-playing=true] .intro-setup-card { animation: setup-assemble 650ms cubic-bezier(.22,1,.36,1) both; }
.page-entrance[data-playing=true] .intro-setup-card:nth-of-type(3) { animation-delay: 65ms; }
.page-entrance[data-playing=true] .intro-setup-card:nth-of-type(4) { animation-delay: 130ms; }
.page-entrance[data-playing=true] .intro-setup-line { animation: connection-draw 600ms 160ms ease both; }
.page-entrance[data-playing=true] .intro-fragment { animation: fragment-connect 800ms cubic-bezier(.22,1,.36,1) both; }
.page-entrance[data-playing=true] .intro-connections path { animation: line-draw 650ms 80ms ease both; }
.page-entrance[data-playing=true] .intro-mavari:after { animation: logo-reflection 850ms 50ms ease both; }
.page-entrance[data-playing=true] .intro-message-flap { animation: message-unfold 650ms ease both; }
.page-entrance[data-playing=true] .intro-message-paper { animation: message-reveal 650ms cubic-bezier(.22,1,.36,1) both; }
.page-entrance[data-playing=true] .intro-message-actions span { animation: message-actions 650ms 140ms ease both; }
.page-entrance[data-playing=true] .intro-message-actions span:nth-child(2) { animation-delay: 190ms; }
.page-entrance[data-playing=true] .intro-message-actions span:nth-child(3) { animation-delay: 240ms; }
.scene-arrived { animation: actual-scene-arrive 450ms cubic-bezier(.22,1,.36,1); }
@keyframes scene-backdrop { 0%,55% {opacity: 1} 100% {opacity: 0} }
@keyframes scene-arrive { 0% {opacity: .9; transform: translateY(15px) scale(.95)} 19%,60% {opacity: 1; transform: none} 100% {opacity: 0; transform: translate(var(--scene-end-x,0px),var(--scene-end-y,-12px)) scale(1.12)} }
@keyframes screen-wake { 0% {opacity: 0; filter: brightness(.5); transform: scale(1.025)} 35% {opacity: .4} 100% {opacity: 1; filter: brightness(1); transform: none} }
@keyframes boot-symbol { 0%,20% {opacity: 1} 100% {opacity: 0} }
@keyframes monitor-reflection { to {transform: translateX(110%)} }
@keyframes setup-assemble { from {opacity: .45; transform: translate(var(--setup-start-x),var(--setup-start-y)) rotate(var(--setup-start-r)) scale(.96)} to {opacity: 1; transform: none} }
@keyframes connection-draw { to {transform: scaleY(1)} }
@keyframes fragment-connect { 0% {opacity: .4; transform: translateX(var(--fragment-x)) translateY(8px)} 30%,70% {opacity: 1; transform: none} 100% {opacity: 0; transform: translateY(12px) scale(.95)} }
@keyframes line-draw { to {stroke-dashoffset: 0} }
@keyframes logo-reflection { 0%,20% {opacity: 0; background-position: -80px 0} 55% {opacity: .9} 100% {opacity: 0; background-position: 80px 0} }
@keyframes message-unfold { 0% {transform: rotateX(0)} 65%,100% {transform: rotateX(155deg); opacity: 0} }
@keyframes message-reveal { 0% {transform: translateY(12px); opacity: .4} 100% {transform: translateY(-8px); opacity: 1} }
@keyframes message-actions { from {transform: translateY(10px); opacity: 0} to {transform: none; opacity: 1} }
@keyframes actual-scene-arrive { from {filter: brightness(1.04)} to {filter: none} }

/* Fine-pointer lighting stays on actual surfaces; focused forms remain still. */
.interactive-glass { position: relative; isolation: isolate; }
.interactive-glass:after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: radial-gradient(ellipse at var(--glass-x,50%) var(--glass-y,20%),#fffdf94d,transparent 52%);
  box-shadow: inset 0 1px 0 #fffdf9a6; opacity: 0; transition: opacity .25s;
}
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  .interactive-glass:not(#hero-product):not(.about-symbol) { transform: perspective(1600px) rotateX(var(--glass-rx,0deg)) rotateY(var(--glass-ry,0deg)); transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s; }
  .interactive-glass[data-lit=true]:after { opacity: 1; }
  .interactive-glass:not(#hero-product):not(.about-symbol)[data-lit=true] { box-shadow: inset 0 1px 0 #fffdf9c9, 0 15px 34px #493a241a; }
  .interactive-glass:focus-within { --glass-rx: 0deg!important; --glass-ry: 0deg!important; }
}
.contact-form input, .contact-form textarea { transition: border-color .2s, background .2s, box-shadow .2s; }
.contact-form input:focus, .contact-form textarea:focus { border-color: #a88a60; background: #fffefa; box-shadow: 0 0 0 4px #bba17b21, inset 0 1px 0 #fff; }
.onboarding-intro > .inline-link { margin-right: 22px; }
.onboarding-steps { position: relative; isolation: isolate; }
.onboarding-steps:before, .onboarding-steps:after { content: ''; position: absolute; left: 15px; top: 18px; width: 1px; height: calc(100% - 45px); z-index: -1; background: #d0c1ac; }
.onboarding-steps:after { height: var(--setup-progress,0px); max-height: calc(100% - 45px); background: #987a54; transition: height .35s cubic-bezier(.22,1,.36,1); }
.onboarding-steps > li { position: relative; gap: 19px; }
.onboarding-number { display: grid; place-items: center; width: 31px; height: 31px; flex-shrink: 0; border: 1px solid #cfbea6; border-radius: 50%; background: var(--paper); color: #80684c; padding: 0!important; margin-top: 7px; font-size: 10px; transition: background .2s, color .2s; }
.onboarding-steps > li[data-active=true] .onboarding-number { background: #796246; border-color: #796246; color: #fffdf9; box-shadow: inset 0 1px 0 #fffdf933,0 2px 7px #493a2412; }
.onboarding-step { width: 100%; min-width: 0; border: 1px solid #d8ccbb; border-radius: 18px; background: linear-gradient(135deg,#fffdf9ba,#ebe1d182); box-shadow: inset 0 1px 0 #fffdf9d9; overflow: hidden; }
.onboarding-step summary { display: flex; align-items: center; min-height: 64px; gap: 15px; padding: 17px 44px 17px 20px; }
.onboarding-step summary h3 { margin: 0; font-size: 18px; line-height: 1.5; }
.onboarding-step summary:after { top: 50%; transform: translateY(-50%); right: 17px; font-size: 21px; }
.onboarding-step .step-copy { padding: 0 20px 21px; }
.onboarding-step .step-copy p { padding: 0; margin: 0; font-size: 13px; line-height: 1.9; }
.onboarding-step[open] { background: linear-gradient(135deg,#fffdf9ed,#eee4d6bf); }
@media (max-width: 760px) {
  .page-intro-scene { width: min(430px,88vw); height: 290px; }
  .page-entrance[data-playing=true]:before, .page-entrance[data-playing=true] .page-intro-scene { animation-duration: 800ms; }
  .page-entrance[data-playing=true] .page-intro-scene { --scene-end-x: 0px!important; }
  .intro-monitor { inset: 0 5px 65px; padding: 9px; border-radius: 18px; }
  .intro-monitor-neck { top: 225px; height: 33px; }
  .intro-monitor-base { top: 255px; }
  .intro-caption { font-size: 8px; }
  .intro-setup-card { left: 8px; right: 8px; height: 76px; padding: 14px 16px; gap: 14px; }
  .intro-setup-card:nth-of-type(2) { top: 3px; }
  .intro-setup-card:nth-of-type(3) { top: 103px; }
  .intro-setup-card:nth-of-type(4) { top: 203px; }
  .intro-setup-card strong { font-size: 15px; }
  .intro-setup-line { left: 38px; top: 30px; height: 220px; }
  .intro-question { font-size: 21px; }
  .intro-fragment { padding: 10px 12px; font-size: 10px; }
  .intro-fragment-one, .intro-fragment-two { top: 103px; }
  .intro-mavari { width: 90px; height: 90px; left: calc(50% - 45px); top: 151px; }
  .intro-connections { top: 5px; height: 270px; }
  .intro-message { inset: 30px 14px 58px; }
  .intro-message-paper { padding: 18px; gap: 13px; }
  .intro-message-paper strong { font-size: 18px; }
  .intro-message-actions span { padding: 10px 19px; }
  .interactive-glass:after { display: none; }
  .onboarding-steps > li { gap: 12px; }
  .onboarding-step summary { padding: 15px 39px 15px 16px; min-height: 68px; }
  .onboarding-step summary h3 { font-size: 17px; }
  .onboarding-step .step-copy { padding: 0 16px 19px; }
  .onboarding-step .step-copy p { font-size: 14px; line-height: 1.8; }
}
@media (prefers-reduced-transparency: reduce) {
  .page-entrance:before { background: #f4f0e9; }
  .intro-monitor,.intro-setup-card,.intro-fragment,.intro-message,.onboarding-step,.onboarding-step[open] { background: #f8f3eb; }
  .interactive-glass:after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .page-entrance { display: none!important; }
  .scene-arrived, .onboarding-steps:after { animation: none!important; transition: none!important; }
  .interactive-glass:not(#hero-product):not(.about-symbol) { transform: none!important; transition: none!important; }
  .interactive-glass:after { display: none; }
}
@media print { .page-entrance { display: none!important; } .onboarding-step .step-copy { display: block!important; } }

/* Warm charcoal glass; the page content keeps its warm beige palette. */
@media screen {
  .site-header, .site-header.is-scrolled {
    --paper: #3d3832; --ink: #fffdf9; --muted: #fff9f0; --warm: #fff9ec; --line: #f6e8d829;
    color: var(--ink);
    background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
    border-color: var(--line); box-shadow: none;
  }
  /* A separate glass layer lets the dropdown blur the page independently. */
  .site-header:before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(180deg, #ffffff06, transparent 43%, #00000008), linear-gradient(110deg, transparent 10%, #ffffff06 30%, transparent 52%), #3d3832bf;
    backdrop-filter: blur(14px) saturate(1.18);
    -webkit-backdrop-filter: blur(14px) saturate(1.18);
    box-shadow: inset 0 1px 0 #fff6e929, inset 0 -1px 0 #fff6e90d, 0 8px 28px #211b161c;
  }
  .site-header .framework-wordmark img { filter: brightness(0) invert(1); }
  .site-header .client-link small { color: var(--muted); }
  .site-header :is(a, button):focus-visible { outline-color: #ecd1a8; }
  .site-header #reading-progress { background: var(--warm); }
  .site-header nav a { isolation: isolate; border-radius: 99px; }
  .site-header nav a:before {
    content: ''; position: absolute; inset: 6px -11px; z-index: -1;
    border: 1px solid #fff6e930; border-radius: inherit; pointer-events: none;
    background: linear-gradient(135deg, #ffffff08, #ffffff02), #211b1738;
    box-shadow: inset 0 1px 0 #fff6e91f, 0 3px 10px #211b160d;
    opacity: 0; transition: opacity .2s, background .2s, box-shadow .2s;
  }
  .site-header nav a:is([aria-current], :hover, :focus-visible):before { opacity: 1; }
  .site-header nav a:active:before { background: #211b1766; box-shadow: inset 0 1px 3px #211b1626; }
  .site-header nav a:after { display: none; }
}
@media screen and (max-width: 980px) {
  .site-header nav {
    background: linear-gradient(145deg, #ffffff08, #ffffff00 55%), #3d3832ed;
    backdrop-filter: blur(20px) saturate(1.18);
    -webkit-backdrop-filter: blur(20px) saturate(1.18);
    border-color: #fff6e930;
    box-shadow: inset 0 1px 0 #fff6e91f, inset 0 -1px 0 #fff6e90c, 0 16px 40px #211b162b;
  }
  .site-header nav a { border-radius: 14px; }
  .site-header nav a:before { inset: 0 -10px; }
  .site-header nav a[aria-current] { background: transparent; }
  .site-header .menu-toggle {
    background: linear-gradient(135deg, #ffffff0c, #ffffff03);
    border-color: #fff6e930;
    box-shadow: inset 0 1px 0 #fff6e91f;
  }
}
@media screen and (max-width: 760px) { .site-header nav a:before { inset: 0; } }
@media screen and (prefers-reduced-motion: reduce) { .site-header nav a:before { transition: none; } }
@media screen and (prefers-reduced-transparency: reduce) {
  .site-header:before, .site-header nav {
    background: #3d3832; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media screen { .site-header:before, .site-header nav { background: #3d3832; } }
}