/* Personal brand colour study 01. Preview only. */
:root{--bg:#0b1118;--panel:#101a2c;--text:#edf0f4;--muted:#a9b5c3;--faint:#8191a7;--accent:#d9f43b;--electric:#315cf5;--border:#96adcf2c}
html{background:var(--bg)}body{background:var(--bg)}.preview-label{background:#111b2b;color:#c2cbd7}.preview-label a{padding-left:16px;border-left:1px solid var(--border);color:var(--accent);font-size:8px}.preview-label a:hover{color:#f0ff8c}.site-header{background:#0b1118ed}.button{background:var(--accent);border-color:var(--accent);color:#0b1118}.button:hover{background:#e9ff7b;border-color:#e9ff7b}.button-outline{background:transparent;border-color:#7d93b85c;color:var(--text)}.button-outline:hover{background:#315cf51c;border-color:var(--electric)}.brand-mark i{border-color:#b4c4eb}.brand-mark i+i{border-color:var(--accent)}.portrait-grid{background-image:linear-gradient(#315cf52b 1px,transparent 1px),linear-gradient(90deg,#315cf52b 1px,transparent 1px)}.frame-outer{stroke:#315cf5aa}.frame-inner{stroke:#899fcd50}.frame-accent{stroke:var(--accent);opacity:.85}.portrait-ticks{stroke:#7c99d777}.portrait-image{background:#02050b}.portrait-image img{filter:saturate(.32) brightness(.85)}.portrait-note{color:#9aacd1}.portrait-module:before{content:'';position:absolute;inset:18% 7% 16%;background:radial-gradient(ellipse,#315cf533,transparent 70%);filter:blur(22px);pointer-events:none}.portrait-module figcaption{z-index:4}.portrait-lines{z-index:3}.portrait-image{z-index:2}.portrait-grid{z-index:1}.portrait-scanner{opacity:0}.portrait-scanner path{stroke-width:1!important;opacity:.8}.motion-enhanced .portrait-trace{animation:none;opacity:0}.portrait-slices{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0}.portrait-slice{position:absolute;inset:0;overflow:hidden}.portrait-slice img{width:100%;height:100%;object-fit:cover;object-position:50% 24%}.portrait-slice:nth-child(1){clip-path:inset(0 0 75% 0)}.portrait-slice:nth-child(2){clip-path:inset(25% 0 50% 0)}.portrait-slice:nth-child(3){clip-path:inset(50% 0 25% 0)}.portrait-slice:nth-child(4){clip-path:inset(75% 0 0 0)}
.section-rule{position:relative}.rule-line{transform-origin:left center}.section-rule:after{content:'';position:absolute;right:-3px;top:50%;width:7px;height:7px;border:1px solid var(--electric);transform:translateY(-50%) rotate(45deg);opacity:.85}.cross-end{color:var(--accent)}.motion-enhanced .workflow-frame{border-color:#315cf555;box-shadow:0 0 50px #315cf508}.workflow-frame{background:linear-gradient(120deg,#121e35,#0d1625)}.workflow-frame:before,.workflow-frame:after{width:23px;height:23px;border-color:var(--accent)}.workflow-ornament{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);pointer-events:none;z-index:3;overflow:visible}.workflow-ornament path{vector-effect:non-scaling-stroke;stroke-width:1}.workflow-draw{stroke:var(--electric);opacity:.85}.workflow-signal{stroke:var(--accent);opacity:0}.workflow-tabs{position:relative}.workflow-tabs button{z-index:2}.workflow-tabs button[aria-selected=true]{background:#315cf51a}.workflow-tabs button:hover{background:#315cf51a}.tab-reticle{position:absolute;pointer-events:none;left:0;top:8px;bottom:8px;width:33.333%;z-index:4;opacity:0}.tab-reticle:before,.tab-reticle:after{content:'';position:absolute;width:12px;height:12px;border:1px solid var(--accent)}.tab-reticle:before{top:0;left:8px;border-bottom:0;border-right:0}.tab-reticle:after{bottom:0;right:8px;border-top:0;border-left:0}.pipeline{position:relative}.pipeline i.pipeline-pulse{position:absolute;width:4px;height:4px;left:0;top:50%;margin-top:-2px;background:var(--accent);box-shadow:0 0 8px #d9f45088;transform:rotate(45deg);opacity:0}.text-button{color:var(--accent);border-color:#d9f43b45}.build-icon{background:#315cf510;border-color:#315cf54a}.build-icon svg{stroke:#9eb5ff}.build-row{position:relative}.build-row:after{content:'';position:absolute;left:0;top:-1px;width:100%;height:1px;background:var(--electric);transform:scaleX(var(--build-line,0));transform-origin:left;opacity:.6}.build-row:hover .build-icon{border-color:var(--accent);transition:border-color .2s}.offer{background:#101a2b}.offer:before{background:radial-gradient(ellipse at 90% 35%,#315cf516,transparent 65%)}.price{position:relative}.price:after{content:'';position:absolute;top:-9px;right:0;width:26px;height:26px;border-top:1px solid var(--electric);border-right:1px solid var(--electric);opacity:.8}.delivery-steps{position:relative;--delivery-progress:0}.delivery-steps:before{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--accent);transform:scaleX(var(--delivery-progress));transform-origin:left}.delivery-steps li{position:relative}.delivery-steps li:after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--electric);transform:scaleX(0);transform-origin:left;transition:transform .35s}.delivery-steps li:hover:after{transform:scaleX(1)}.step-number{position:relative;width:max-content}.step-number:after{content:'';display:inline-block;width:18px;height:1px;background:var(--electric);vertical-align:middle;margin-left:13px}.career-track{position:relative;--career-progress:0}.career-track:before{content:'';position:absolute;top:-1px;left:0;width:100%;height:1px;background:var(--accent);transform-origin:left;transform:scaleX(var(--career-progress))}.career-track:after{content:'';position:absolute;top:-11px;left:calc(var(--career-progress) * (100% - 16px));width:16px;height:21px;border-top:1px solid var(--accent);border-bottom:1px solid var(--accent);background:linear-gradient(90deg,var(--accent) 1px,transparent 1px,transparent 15px,var(--accent) 15px);pointer-events:none;opacity:.8}.career-track li:before{background:var(--node-fill,var(--bg))}.image-corner{border-color:var(--accent)}.story-image{background:#102243}.contact{background:radial-gradient(ellipse at center,#315cf514,transparent 70%)}.contact-lines{stroke:#4e73e35c}.contact-accent{stroke:var(--accent)}.motion-toggle{background:#0b1118eb}.portrait-note,.stage-meta,.build-type{color:#94a8c6}.reading-progress>i{background:linear-gradient(var(--electric),var(--accent))}
.offer{--muted:#edf0f4;--border:#edf0f43d;background:var(--electric);border-color:#8da5ff6b}.offer:before{background:radial-gradient(ellipse at 90% 35%,#f3f7ff0c,transparent 65%)}.offer .delivery-steps{border-color:#edf0f469}.offer .price:after{border-color:var(--accent)}.offer .step-number:after{background:#edf0f47a}.offer .section-rule:after{border-color:var(--accent)}
@media(max-width:760px){.preview-label{gap:10px}.preview-label span{display:none}.preview-label a{font-size:7px;padding-left:10px}.portrait-module:before{inset:10% 0 5%}.tab-reticle{top:5px;bottom:6px}.tab-reticle:before,.tab-reticle:after{width:9px;height:9px}.tab-reticle:before{left:5px}.tab-reticle:after{right:5px}.price:after{top:19px}.career-track:before,.career-track:after{display:none}.delivery-steps:before{width:1px;height:100%;top:0;left:17px;transform:scaleY(var(--delivery-progress));transform-origin:top}.delivery-steps li:after{display:none}.step-number:after{display:none}.section-rule:after{width:5px;height:5px;right:-2px}}
html.calm .portrait-slices,html.calm .portrait-scanner,html.calm .workflow-signal,html.calm .tab-reticle,html.calm .pipeline-pulse{opacity:0!important}html.calm .portrait-image>img{opacity:1!important;visibility:visible!important}html.calm .career-track:before,html.calm .career-track:after,html.calm .delivery-steps:before{display:none}
@media(prefers-reduced-motion:reduce){.portrait-slices,.portrait-scanner,.workflow-signal,.tab-reticle,.pipeline-pulse{opacity:0!important}.portrait-image>img{opacity:1!important;visibility:visible!important}.career-track:before,.career-track:after,.delivery-steps:before{display:none}}

/* Quiet glide is the selected entrance. Scroll and interaction provide the other cues. */
:root {
  --glide-distance: 8px;
  --glide-duration: 800ms;
  --glide-ease: cubic-bezier(.2, .7, .2, 1);
}

.motion-enabled .reveal {
  opacity: .65;
  transform: translateY(var(--glide-distance));
  transition: opacity var(--glide-duration) var(--glide-ease),
    transform var(--glide-duration) var(--glide-ease);
}

.motion-enabled .reveal.is-visible,
.motion-enabled .reveal:focus-within {
  opacity: 1;
  transform: none;
}

.motion-enabled .reveal:focus-within {
  transition-duration: 0s;
}

.motion-enabled .hero-copy,
.motion-enabled .portrait-module {
  animation: quiet-glide var(--glide-duration) var(--glide-ease) both;
}

.motion-enabled .workflow-content.changing {
  animation: quiet-glide 320ms var(--glide-ease) both;
}

.motion-enabled .text-button.pressed::after {
  animation: press-flash .16s steps(1, end);
}

@keyframes quiet-glide {
  from { opacity: .65; translate: 0 var(--glide-distance); }
  to { opacity: 1; translate: 0 0; }
}
