/* B3: transparent panels, restrained light sweeps and simulation controls. */
:root{--control-ink:#fff;--control-edge:#8be7ff;--control-fill:linear-gradient(115deg,#5542e5,#353bb2)}
.hero,.section{--card-rest:rgba(10,25,51,.43);--card-hover:rgba(20,38,71,.65);--card-border:rgba(126,168,222,.28);--card-lit:rgba(124,214,255,.57);--card-shadow:0 12px 28px #02091835,0 0 19px #438fff13;--card-lift:-2px;--card-sheen:rgba(139,218,255,.12)}
.section.light-section{--card-rest:rgba(251,253,255,.54);--card-hover:rgba(247,252,255,.82);--card-border:rgba(86,113,175,.25);--card-lit:rgba(69,103,199,.57);--card-shadow:0 12px 27px #3557a01b,0 0 18px #7cbfff1a;--card-lift:-3px;--card-sheen:rgba(133,187,255,.24)}
.section :is(.card,.service-card,.faq-list>details,.contact-form-card){position:relative;isolation:isolate;border:1px solid var(--card-border);border-radius:7px;background:var(--card-rest);box-shadow:inset 0 1px #ffffff0a;transition:transform .24s var(--ease),border-color .24s,background .24s,box-shadow .24s}
.section :is(.card,.service-card,.faq-list>details,.contact-form-card):hover{transform:none;border-color:var(--card-border);background:var(--card-rest);box-shadow:inset 0 1px #ffffff0a}
.section :is(.card,.service-card,.faq-list>details,.contact-form-card)::after{content:"";display:block;position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;opacity:0;background:linear-gradient(110deg,transparent 36%,var(--card-sheen) 49%,transparent 62%) 100% 0/260% 100% no-repeat;transition:background-position .75s var(--ease),opacity .24s}
.section :is(.card,.service-card,.faq-list>details,.contact-form-card):focus-within{border-color:var(--card-lit);background:var(--card-hover);box-shadow:var(--card-shadow)}
.section .service-card[open]{--card-rest:rgba(20,32,66,.65)}
.section .problem-grid{gap:13px 24px}
.section .problem-card,.section .problem-card:nth-last-child(-n+2){padding:18px 17px;border:1px solid var(--card-border);grid-template-columns:34px minmax(0,1fr);gap:3px 14px}
.section .problem-card .problem-glyph{grid-row:1/3;align-self:center}
.section .method-grid{gap:17px}
.section .method-card{padding:20px;margin-left:0}
.section .method-card::before{top:19px;left:-4px}
.section .stack-groups{gap:12px}
.section .stack-group{padding:16px}
.section .faq-list{gap:12px}
.section .faq-list details:last-child{border-bottom:1px solid var(--card-border)}
.section .faq-list summary{padding:17px 19px;gap:16px}
.section .faq-list details p{padding:0 19px 21px}
.section .faq-list details[open] summary{border:0}
.section :is(.service-card,.faq-list>details) summary:focus-visible{outline-offset:-5px;border-radius:5px}
.section .contact-form-card{padding:28px}

.hero .btn,.section .btn{position:relative;isolation:isolate;min-height:44px;max-width:100%;padding:10px 18px;gap:10px;border:1px solid #77b6e66e;border-radius:2px 10px 2px 10px;background:linear-gradient(115deg,#11284edb,#101a39d6);color:#e6f5ff;font:500 12px/1.5 var(--mono);letter-spacing:.025em;text-align:center;cursor:pointer;box-shadow:inset 0 1px #d3f4ff13,0 4px 16px #02091c22;transition:background .2s,border-color .2s,box-shadow .2s,transform .2s}
.hero .btn::before,.section .btn::before{content:"";position:absolute;inset:4px;pointer-events:none;opacity:.8;background:linear-gradient(var(--control-edge),var(--control-edge)) left top/12px 1px no-repeat,linear-gradient(var(--control-edge),var(--control-edge)) left top/1px 7px no-repeat,linear-gradient(var(--control-edge),var(--control-edge)) right bottom/12px 1px no-repeat,linear-gradient(var(--control-edge),var(--control-edge)) right bottom/1px 7px no-repeat}
.hero .btn.primary,.section .btn.primary{color:var(--control-ink);-webkit-text-fill-color:var(--control-ink);background:var(--control-fill);border-color:#9baaffb0;box-shadow:inset 0 1px #e4f6ff30,0 5px 22px #4044db2b;font-weight:500}
.section.light-section .btn:not(.primary){color:#293f88;background:linear-gradient(115deg,#f7fcffed,#e3edffcf);border-color:#6584bd8c;--control-edge:#3e6cba}
.hero .actions .btn:not(.primary){padding:10px 18px;border:1px solid #77b6e66e;border-radius:2px 10px 2px 10px;background:linear-gradient(115deg,#11284edb,#101a39d6)}
.hero .btn:focus-visible,.section .btn:focus-visible{outline:2px solid #9be8ff;outline-offset:4px;box-shadow:0 0 0 5px #4c8ce026}
.section.light-section .btn:focus-visible{outline-color:#3158b8}
.hero .btn:active,.section .btn:active{transform:translateY(1px)}
.hero .btn:disabled,.section .btn:disabled{opacity:1;cursor:wait;box-shadow:none}
.section .offer-card .btn{margin-top:20px;min-height:44px}
.section .service-body .btn{padding:8px 14px;min-height:40px;font-size:11px}
@media(min-width:851px){.section .service-card[open] .service-body>.btn{top:12px;right:16px;min-height:40px;padding:8px 13px;border:1px solid #77b6e66e;border-radius:2px 10px 2px 10px;background:linear-gradient(115deg,#11284edb,#101a39d6);font-weight:500}}
@media(hover:hover) and (pointer:fine){
 .section :is(.card,.service-card,.faq-list>details,.contact-form-card):hover{transform:translateY(var(--card-lift));border-color:var(--card-lit);background:var(--card-hover);box-shadow:var(--card-shadow)}
 .section :is(.card,.service-card,.faq-list>details,.contact-form-card):hover::after{opacity:1;background-position:0 0}
 .hero .btn:hover,.section .btn:hover{transform:translateY(-1px);border-color:#a0e8ff;box-shadow:inset 0 1px #e4f6ff30,0 5px 23px #418ce02e}
 .hero .btn.primary:hover,.section .btn.primary:hover{color:#fff;-webkit-text-fill-color:#fff;background:linear-gradient(115deg,#6050e9,#3c47be)}
 .section.light-section .btn:not(.primary):hover{border-color:#3c66b4;background:linear-gradient(115deg,#fff,#e7f5ff)}
}
@media(max-width:720px){
 .section .problem-grid{gap:11px}
 .section .problem-card{padding:16px 14px;grid-template-columns:30px minmax(0,1fr);gap:3px 12px}
 .section .method-card,.section .stack-group{padding:17px}
 .section .contact-form-card{padding:20px}
 .section .faq-list summary{padding:15px;min-height:64px}
 .section .faq-list details p{padding:0 15px 18px}
 .hero .btn,.section .btn{min-height:44px;font-size:12px;padding:10px 14px}
 .section .service-body .btn{min-height:44px}
 .hero .actions{gap:12px}
}
@media(prefers-reduced-motion:reduce){
 .hero .btn,.section .btn,.section :is(.card,.service-card,.faq-list>details,.contact-form-card){transform:none!important;transition:none!important}
 .section :is(.card,.service-card,.faq-list>details,.contact-form-card)::after{display:none;transition:none}
}

/* Captions share panel surfaces; only the passing reflection is purple. */
[data-artifact-slot] .artifact-caption{
 --caption-fill:var(--card-rest);--caption-edge:var(--card-border);
 --caption-title:#fff;--caption-description:#fff;--caption-rule:#48d9fa;
 --caption-shadow:inset 0 1px #ffffff0a;--caption-sheen:rgba(188,139,255,.25);
 position:relative;isolation:isolate;overflow:hidden;border-radius:7px;
 background:var(--caption-fill);border-color:var(--caption-edge);box-shadow:var(--caption-shadow);
 transition:transform .24s var(--ease),border-color .24s,background .24s,box-shadow .24s
}
.light-section [data-artifact-slot] .artifact-caption{
 --caption-title:#79510a;--caption-description:#79510a;--caption-rule:#a77b24;
 --caption-sheen:rgba(164,126,230,.23);
 background:var(--caption-fill);border-color:var(--caption-edge);box-shadow:var(--caption-shadow)
}
[data-artifact-slot] .artifact-caption .caption-copy h3{color:var(--caption-title);font-weight:700}
[data-artifact-slot] .artifact-caption .caption-copy p{color:var(--caption-description);font-weight:700;text-shadow:none}
[data-artifact-slot] .artifact-caption .caption-index{color:var(--caption-title);font-weight:700}
.light-section [data-artifact-slot] .artifact-caption :is(h3,p,.caption-index){
 background:linear-gradient(170deg,#533508 0%,#af8228 29%,#6a430c 37%,#f1d888 43%,#fff4bb 46%,#b28524 51%,#5c3909 62%,#b4872c 81%,#6d4812 100%);
 background-clip:text;-webkit-background-clip:text;color:transparent;
 text-shadow:0 .4px .35px #64420b38
}
[data-artifact-slot] .artifact-caption .caption-rule{background:var(--caption-rule);transform:scaleX(1.2);filter:drop-shadow(0 0 5px var(--caption-rule))}
[data-artifact-slot]:not(.hero-artifact) .artifact-caption .caption-rule{display:block;flex:0 0 24px;height:1px;opacity:1}
[data-artifact-slot] .artifact-caption::after{
 content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;opacity:0;
 background:linear-gradient(110deg,transparent 36%,var(--caption-sheen) 49%,transparent 62%) 100% 0/260% 100% no-repeat;
}
[data-artifact-slot] .artifact-caption:is(:hover,:focus-visible,.is-lit){
 --caption-fill:var(--card-hover);--caption-edge:var(--card-lit);--caption-shadow:var(--card-shadow)
}
.light-section [data-artifact-slot] .artifact-caption:is(:hover,:focus-visible,.is-lit){
 --caption-fill:var(--card-hover);--caption-edge:var(--card-lit);--caption-shadow:var(--card-shadow)
}
@keyframes caption-reflection{
 0%{background-position:100% 0;opacity:0}15%,75%{opacity:1}100%{background-position:0 0;opacity:0}
}
[data-artifact-slot] .artifact-caption:is(:focus-visible,.is-lit)::after{animation:caption-reflection .75s var(--ease) both}
[data-artifact-slot] .artifact-caption:focus-visible{outline:2px solid var(--caption-rule);outline-offset:4px}
[data-artifact-slot]:not(.hero-artifact) .artifact-caption:is(:focus-visible,.is-lit){transform:translateY(var(--card-lift))}
@media(min-width:721px){.hero-artifact .artifact-caption{position:absolute}}
/* Keep the wide hero treatment inside the available page gutter. */
@media(min-width:1280px){
 .hero-artifact{width:calc(100% + clamp(0px,calc((100vw - var(--max))/2 - 24px),80px))}
}
@media(max-width:720px){.hero-artifact .artifact-caption{inset:auto}}
@media(hover:hover) and (pointer:fine){
 [data-artifact-slot]:not(.hero-artifact) .artifact-caption:hover{transform:translateY(var(--card-lift))}
 [data-artifact-slot] .artifact-caption:hover::after{animation:caption-reflection .75s var(--ease) both}
}
@media(prefers-reduced-motion:reduce){
 [data-artifact-slot] .artifact-caption,[data-artifact-slot] .artifact-caption::after{transition:none!important;transform:none!important}
 [data-artifact-slot] .artifact-caption::after{display:none;animation:none!important}
}
@media(forced-colors:active){
 .light-section [data-artifact-slot] .artifact-caption :is(h3,p,.caption-index){background:none;color:CanvasText;text-shadow:none}
 [data-artifact-slot] .artifact-caption .caption-rule{background:CanvasText;filter:none}
}

/* Quiet instrument tabs: defined controls with restrained active indicators. */
.nav-links{counter-reset:nav-item;gap:6px}
.nav-links a{position:relative;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:8px 11px;border:1px solid #7897be18;border-radius:2px 7px 2px 7px;background:linear-gradient(115deg,#17304b18,#0a1b3308);color:#bfcde0;font:500 11px/1.4 var(--mono);letter-spacing:.015em;box-shadow:none;transition:color .2s,border-color .2s,background .2s,box-shadow .2s}
.nav-links a:not(.nav-home){display:inline-flex}
.nav-links a:not(.nav-home)::before{counter-increment:nav-item;content:"0" counter(nav-item);font-size:8px;color:#89b9ce54}
.nav-links a::after{content:"";position:absolute;right:4px;bottom:4px;width:6px;height:3px;border-right:1px solid #76cae52e;border-bottom:1px solid #76cae52e;pointer-events:none}
.nav-links a:is(:hover,:focus-visible){color:#f5fbff;border-color:#82c8e884;background:linear-gradient(115deg,#21405b8c,#152b469c);box-shadow:inset 0 1px #effcff0c}
.nav-links a:is(:hover,:focus-visible)::before{color:#89b9ce91}
.nav-links a:is(:hover,:focus-visible,[aria-current="location"])::after{border-color:#76cae565}
.nav-links a[aria-current="location"]{color:#f3fbff;border-color:#83cce9a6;background:linear-gradient(115deg,#1c3d57c7,#202f51ba);box-shadow:inset 0 -1px #7ce2f1}
.nav-links a[aria-current="location"]::before{color:#a2dcec}
.nav-links a:focus-visible{outline:2px solid #9be8ff;outline-offset:3px}
@media(min-width:721px) and (max-width:980px){.nav-links{gap:4px}.nav-links a{padding:8px;font-size:11px}.nav-links a::before{display:none}}
@media(max-width:720px){.nav-links{gap:6px}.nav-links a{min-height:44px;justify-content:flex-start;padding:11px 14px;font-size:13px}}
@media(prefers-reduced-motion:reduce){.nav-links a{transition:none}}
@media(forced-colors:active){.nav-links a{border-color:ButtonBorder;background:Canvas;color:LinkText}.nav-links a[aria-current="location"]{border-color:Highlight;color:Highlight;box-shadow:none}.nav-links a::after{border-color:currentColor}}

/* Static artwork is a complete presentation; keep capability status unobtrusive. */
.hero .artifact-error{position:absolute;inset:auto;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;pointer-events:none}
@media(max-width:720px){
 .hero-artifact .artifact-caption{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:start;gap:5px;padding:8px}
 .hero-artifact .artifact-caption .caption-index{align-self:start;font-size:10px;line-height:1.5}
 .hero-artifact .artifact-caption .caption-copy h3{line-height:1.5}
 .section .method-card{display:grid;grid-template-columns:7px max-content minmax(0,1fr);align-items:baseline;gap:10px 8px;padding:17px}
 .section .method-card::before{position:static;grid-column:1;grid-row:1;align-self:start;margin-top:7px}
 .section .method-card .number{grid-column:2;grid-row:1;margin:0;line-height:1.35}
 .section .method-card h3{grid-column:3;grid-row:1;min-width:0;margin:0;font-size:17px;line-height:1.35}
 .section .method-card p{grid-column:1/-1;margin:0}
}