:root {
  --black: #000b19;
  --black-2: #001321;
  --bone: #000b19;
  --paper: #001725;
  --ink: #e7f1f0;
  --muted: #a6c3c5;
  --signal: #67cfff;
  --acid: #3fa982;
  --mint: #227c8a;
  --line: rgba(231, 241, 240, 0.17);
  --line-dark: rgba(231, 241, 240, 0.22);
  --display: "Arial Narrow", "Aptos Display", "Helvetica Neue", Arial, sans-serif;
  --body: Inter, "Aptos", "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2,.8,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 74px; }
body { margin: 0; color: var(--ink); background: var(--bone); font: 400 16px/1.58 var(--body); overflow-x: hidden; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img, video { display: block; max-width: 100%; }
::selection { background: var(--acid); color: var(--black); }
.page-grid { width: min(1480px, calc(100% - 8vw)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 999; top: 12px; left: 12px; padding: 10px 14px; background: var(--acid); transform: translateY(-150%); transition: transform .2s; }
.skip-link:focus { transform: translateY(0); }

.topbar { position: fixed; z-index: 100; inset: 0 0 auto; height: 78px; padding: 0 4vw; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid transparent; transition: height .3s, background .3s, color .3s, border-color .3s; }
.topbar.scrolled { height: 66px; background: rgba(241,238,230,.93); border-color: var(--line); backdrop-filter: blur(14px); }
.topbar.over-lab { color: #fff; background: rgba(10,11,11,.88); border-color: var(--line-dark); }
.identity { display: flex; align-items: center; gap: 11px; font: 700 14px/1 var(--display); letter-spacing: -.02em; }
.identity-mark { width: 42px; height: 31px; display: grid; place-items: center; color: var(--bone); background: var(--black); font: 800 10px var(--body); letter-spacing: -.05em; }
.over-lab .identity-mark { color: var(--black); background: var(--acid); }
.identity small { display: block; margin-top: 5px; color: var(--muted); font: 800 6px var(--body); letter-spacing: .2em; }
.over-lab .identity small { color: rgba(255,255,255,.48); }
.site-nav { display: flex; align-items: center; gap: clamp(16px,2.1vw,34px); font-size: 11px; font-weight: 700; }
.site-nav a { transition: opacity .2s; }
.site-nav a:hover { opacity: .55; }
.nav-contact { padding: 9px 12px; border: 1px solid currentColor; }
.nav-contact span { color: var(--signal); margin-left: 12px; }
.menu-button { display: none; width: 43px; height: 40px; padding: 11px; border: 1px solid currentColor; background: transparent; }
.menu-button span { display: block; height: 1px; margin: 5px 0; background: currentColor; transition: transform .25s; }

.kicker, .section-index { margin: 0; font-size: 9px; line-height: 1.2; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.kicker { display: flex; align-items: center; gap: 11px; }
.kicker span { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 5px rgba(103,207,255,.14); }
.section-index { color: var(--muted); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; }
h1, h2, h3, p { overflow-wrap: break-word; }
h2 { margin: 0; font-size: clamp(48px,6.5vw,98px); line-height: .91; letter-spacing: -.075em; }

.hero { min-height: 100svh; padding: 126px 0 34px; display: flex; flex-direction: column; justify-content: space-between; background: radial-gradient(circle at 76% 52%,#00172a 0,#000f20 34%,#000b19 68%); position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; width: 1px; background: var(--line); top: 0; bottom: 0; left: 61%; }
.hero::after { content: "24 / 08"; position: absolute; right: 2vw; top: 46%; color: rgba(10,11,11,.13); font: 800 8px var(--body); letter-spacing: .18em; writing-mode: vertical-rl; }
.hero-grid { display: grid; grid-template-columns: 1.12fr .72fr; gap: clamp(55px,8vw,135px); align-items: center; }
.hero-main { position: relative; z-index: 2; }
.hero h1 { margin: 27px 0 0; max-width: 1040px; font-size: clamp(60px,7.6vw,116px); line-height: .87; letter-spacing: -.085em; }
.hero h1 em { display: block; color: var(--signal); font-style: normal; }
.hero-art { width: min(100%, 610px); margin-inline: auto; filter: drop-shadow(0 28px 40px rgba(0,0,0,.35)); -webkit-mask-image: radial-gradient(ellipse 83% 82% at 50% 50%,#000 72%,transparent 100%); mask-image: radial-gradient(ellipse 83% 82% at 50% 50%,#000 72%,transparent 100%); }
.hero-preview{width:100%;max-width:610px;justify-self:end}.hero-art{height:auto;aspect-ratio:auto;object-fit:contain}
.hero::before,.hero::after{display:none}.hero-footer{border-top:0;padding-top:0}.hero-preview{transform:none}.hero-art{border-radius:0}
.hero-lead { max-width: 620px; margin: 30px 0 32px; color: var(--muted); font-size: clamp(17px,1.4vw,21px); }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; }
.button { min-height: 53px; padding: 13px 18px; display: inline-flex; align-items: center; justify-content: center; gap: 25px; border: 1px solid transparent; font-size: 12px; font-weight: 800; transition: transform .25s var(--ease), background .25s, color .25s; }
.button:hover { transform: translateY(-3px); }
.button-dark { color: #fff; background: var(--black); }
.button-dark:hover { color: var(--black); background: var(--acid); }
.text-action { font-size: 12px; font-weight: 800; border-bottom: 1px solid var(--ink); padding: 11px 0 7px; }
.text-action span { margin-left: 14px; color: var(--signal); }
.hero-preview { position: relative; z-index: 2; transform: translateY(14px); }
.preview-window { position: relative; background: var(--black); border: 1px solid #2e3131; box-shadow: 28px 30px 0 rgba(10,11,11,.08); overflow: hidden; }
.window-bar { height: 40px; padding: 0 12px; display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.38); font-size: 7px; letter-spacing: .12em; }
.window-bar i { width: 6px; height: 6px; border-radius: 50%; background: #5c5f5f; }
.window-bar span { margin-left: 8px; }.window-bar b { margin-left: auto; color: var(--acid); font-size: 7px; }
.preview-window img { width: 100%; aspect-ratio: 16/9; object-fit: cover; opacity: .88; }
.preview-window::after { content: ""; position: absolute; inset: 40px 0 0; background: linear-gradient(135deg,transparent 48%,rgba(199,255,82,.08)); pointer-events: none; }
.target { position: absolute; z-index: 2; width: 31px; height: 31px; border: 1px solid var(--signal); border-radius: 50%; }
.target::before, .target::after { content: ""; position: absolute; background: var(--signal); }.target::before { width: 43px; height: 1px; left: -7px; top: 14px; }.target::after { width: 1px; height: 43px; top: -7px; left: 14px; }
.target-one { top: 31%; left: 18%; }.target-two { right: 12%; bottom: 17%; transform: scale(.68); }
.preview-log { position: absolute; left: -28px; bottom: -27px; width: 230px; padding: 14px 15px; display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; color: #fff; background: var(--black); border: 1px solid #303333; }
.preview-log .live-dot { grid-row: 1/3; align-self: center; }.preview-log b { font-size: 8px; letter-spacing: .14em; }.preview-log small { color: rgba(255,255,255,.43); font-size: 8px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 5px rgba(199,255,82,.1); }
.hero-footer { margin-top: 70px; padding-top: 22px; display: grid; grid-template-columns: .65fr 1fr auto; gap: 5vw; align-items: center; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.hero-footer p { max-width: 520px; margin: 0; letter-spacing: 0; font-size: 12px; font-weight: 500; }
.hero-footer a { display: flex; align-items: center; gap: 10px; }.hero-footer a i { width: 45px; height: 1px; background: var(--ink); position: relative; overflow: hidden; }.hero-footer a i::after { content: ""; position: absolute; width: 15px; height: 1px; background: var(--signal); animation: travel 2.2s ease-in-out infinite; }

.challenge-section { padding: clamp(110px,13vw,200px) 0; background: var(--paper); }
.challenge-head { display: grid; grid-template-columns: .33fr 1.12fr .55fr; gap: 4vw; align-items: end; }
.challenge-head .section-index { align-self: start; }
.challenge-head > p:last-child { margin: 0 0 7px; color: var(--muted); font-size: 17px; }
.risk-board { margin-top: 92px; display: grid; grid-template-columns: .32fr 1fr; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.risk-status { padding: 30px 30px 30px 0; display: flex; flex-direction: column; border-right: 1px solid var(--ink); }
.risk-status span { font-size: 8px; font-weight: 800; letter-spacing: .16em; }.risk-status b { margin-top: auto; color: var(--signal); font: 700 clamp(34px,4vw,58px)/.95 var(--display); letter-spacing: -.06em; }.risk-status small { margin-top: 11px; color: var(--muted); font-size: 9px; }
.risk-lines { display: grid; grid-template-columns: 1fr 1fr; }
.risk-lines div { min-height: 90px; padding: 18px 22px; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; border-bottom: 1px solid var(--line); }
.risk-lines div:nth-child(odd) { border-right: 1px solid var(--line); }.risk-lines div:nth-last-child(-n+2) { border-bottom: 0; }
.risk-lines span { color: var(--muted); font-size: 9px; }.risk-lines strong { font: 700 clamp(17px,1.65vw,25px)/1.05 var(--display); letter-spacing: -.035em; }.risk-lines i { color: var(--muted); font-size: 7px; font-style: normal; letter-spacing: .12em; }.risk-lines i.critical { color: var(--signal); }

.lab { position: relative; color: #fff; background: var(--black); }
.lab-stage { position: sticky; z-index: 1; top: 0; height: 100svh; overflow: hidden; background: #050606; }
.lab-stage video { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.08) brightness(.72); }
.lab-shade { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(5,6,6,.94) 0%,rgba(5,6,6,.56) 43%,rgba(5,6,6,.16) 75%), linear-gradient(0deg,rgba(5,6,6,.7),transparent 38%); pointer-events: none; }
.lab-toolbar { position: absolute; z-index: 3; top: 96px; left: 4vw; right: 4vw; height: 42px; padding: 0 14px; display: grid; grid-template-columns: auto 1fr 45px; gap: 22px; align-items: center; border: 1px solid var(--line-dark); background: rgba(5,6,6,.46); backdrop-filter: blur(8px); }
.lab-toolbar p { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 8px; font-weight: 800; letter-spacing: .16em; }.lab-toolbar .live-dot { width: 6px; height: 6px; }.lab-toolbar > span { color: var(--acid); font: 800 9px ui-monospace,monospace; text-align: right; }
.lab-progress { height: 2px; background: rgba(255,255,255,.18); overflow: hidden; }.lab-progress i { display: block; width: 0; height: 100%; background: var(--acid); transform-origin: left; }
.lab-crosshair { position: absolute; z-index: 3; width: 64px; height: 64px; right: 19%; top: 42%; border: 1px solid rgba(103,207,255,.8); border-radius: 50%; transition: transform .35s var(--ease); }.lab-crosshair i:first-child { position: absolute; width: 82px; height: 1px; top: 31px; left: -10px; background: var(--signal); }.lab-crosshair i:last-child { position: absolute; width: 1px; height: 82px; left: 31px; top: -10px; background: var(--signal); }
.lab-readout { position: absolute; z-index: 3; right: 4vw; bottom: 7vh; min-width: 290px; padding: 18px 20px; display: grid; grid-template-columns: auto 1fr; column-gap: 16px; border: 1px solid var(--line-dark); background: rgba(5,6,6,.78); backdrop-filter: blur(10px); }
.lab-readout > span { grid-row: 1/3; color: var(--signal); font: 800 9px ui-monospace,monospace; }.lab-readout strong { font: 700 18px var(--display); }.lab-readout small { margin-top: 3px; color: var(--acid); font-size: 7px; font-weight: 800; letter-spacing: .17em; }
.lab-note { position: absolute; z-index: 3; left: 4vw; bottom: 5vh; display: flex; flex-direction: column; }.lab-note span { color: rgba(255,255,255,.35); font-size: 7px; font-weight: 800; letter-spacing: .16em; }.lab-note b { margin-top: 5px; font-size: 10px; }
.lab-steps { position: relative; z-index: 2; margin-top: -100svh; pointer-events: none; }
.lab-step { min-height: 100svh; padding: 160px 4vw 110px; display: flex; align-items: center; opacity: .22; transition: opacity .35s; }
.lab-step.is-active { opacity: 1; }.lab-step > div { width: min(720px,58vw); }
.lab-step span { color: var(--acid); font-size: 9px; font-weight: 800; letter-spacing: .18em; }.lab-step h2 { margin-top: 18px; font-size: clamp(52px,6.2vw,96px); text-shadow: 0 8px 35px rgba(0,0,0,.6); }.lab-step p { max-width: 580px; margin: 24px 0 0; color: rgba(255,255,255,.68); font-size: 17px; text-shadow: 0 3px 12px #000; }

.services { padding: clamp(120px,14vw,210px) 0; background: var(--bone); }
.services-head { display: grid; grid-template-columns: .3fr 1.1fr .5fr; gap: 4vw; align-items: end; }
.services-head .section-index { align-self: start; }.services-head > p:last-child { margin: 0 0 8px; color: var(--muted); font-size: 17px; }
.service-accordion { margin-top: 94px; border-top: 1px solid var(--ink); }
.service-accordion details { border-bottom: 1px solid var(--ink); }
.service-accordion summary { min-height: 112px; padding: 0 10px; display: grid; grid-template-columns: 55px 1fr 160px 25px; gap: 20px; align-items: center; cursor: pointer; list-style: none; transition: color .25s, background .25s, padding .25s; }
.service-accordion summary::-webkit-details-marker { display: none; }.service-accordion summary:hover { padding-inline: 22px; background: var(--paper); }
.service-accordion summary > span { color: var(--signal); font-size: 9px; font-weight: 800; }.service-accordion summary > strong { font: 700 clamp(24px,3vw,44px)/1 var(--display); letter-spacing: -.05em; }.service-accordion summary > i { color: var(--muted); font-size: 7px; font-style: normal; font-weight: 800; letter-spacing: .17em; }.service-accordion summary > b { font-size: 22px; font-weight: 400; transition: transform .25s; }
.service-accordion details[open] summary { color: var(--bone); background: var(--black); padding-inline: 22px; }.service-accordion details[open] summary > b { transform: rotate(45deg); }.service-accordion details[open] summary > i { color: var(--acid); }
.service-detail { min-height: 170px; padding: 32px 22px 42px 97px; display: grid; grid-template-columns: 1fr .7fr; gap: 8vw; background: var(--paper); }
.service-detail p { max-width: 700px; margin: 0; font-size: 18px; }.service-detail span { color: var(--muted); font-size: 10px; font-weight: 700; line-height: 1.7; text-transform: uppercase; }

.process { padding: clamp(110px,13vw,190px) 0; color: var(--black); background: var(--signal); }
.process-head { display: grid; grid-template-columns: .3fr 1fr; gap: 4vw; }.process-head .section-index { color: rgba(10,11,11,.57); }.process-head h2 { max-width: 1100px; }
.process-flow { margin-top: 90px; padding: 0; list-style: none; border-top: 1px solid var(--black); }
.process-flow li { min-height: 186px; display: grid; grid-template-columns: 75px 1fr auto; gap: 30px; align-items: center; border-bottom: 1px solid var(--black); transition: padding .25s, background .25s; }.process-flow li:hover { padding-inline: 18px; background: rgba(241,238,230,.13); }
.process-flow li > span { font: 800 12px var(--body); }.process-flow small { font-size: 8px; font-weight: 800; letter-spacing: .18em; }.process-flow h3 { max-width: 960px; margin: 10px 0 0; font-size: clamp(27px,3.3vw,48px); line-height: 1; letter-spacing: -.055em; }.process-flow i { font-size: 7px; font-style: normal; font-weight: 800; letter-spacing: .18em; writing-mode: vertical-rl; }
.process-icon { width: 46px; height: 46px; color: var(--acid); stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.about { min-height: 900px; display: grid; grid-template-columns: 1fr 1fr; background: var(--paper); }
.about-visual { min-width: 0; padding: clamp(70px,8vw,120px); display: grid; place-items: center; background: var(--black); overflow: hidden; }
.portrait-field { width: min(650px,100%); position: relative; border: 1px solid #343737; }
.portrait-field img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: saturate(.86) contrast(1.03); }
.portrait-field::after { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg,transparent 60%,rgba(199,255,82,.11)); pointer-events: none; }
.portrait-label { position: absolute; z-index: 3; top: -24px; left: 0; color: var(--acid); font-size: 8px; font-weight: 800; letter-spacing: .2em; }
.portrait-scan { position: absolute; z-index: 2; left: 0; right: 0; top: 32%; height: 1px; background: var(--acid); box-shadow: 0 0 18px 3px rgba(199,255,82,.2); animation: portraitScan 5s ease-in-out infinite; }
.portrait-evidence { position: absolute; z-index: 3; left: -34px; right: 7%; bottom: -38px; padding: 16px 18px; display: grid; grid-template-columns: auto 1fr; gap: 2px 18px; color: #fff; background: var(--black-2); border: 1px solid #3b3e3e; }.portrait-evidence span { grid-row: 1/3; color: var(--acid); font-size: 7px; font-weight: 800; letter-spacing: .14em; }.portrait-evidence b { font-size: 10px; letter-spacing: .13em; }.portrait-evidence small { color: rgba(255,255,255,.44); font-size: 7px; }
.portrait-corner { position: absolute; z-index: 4; width: 32px; height: 32px; border-color: var(--signal); }.portrait-corner.one { top: -9px; right: -9px; border-top: 2px solid var(--signal); border-right: 2px solid var(--signal); }.portrait-corner.two { left: -9px; bottom: -9px; border-left: 2px solid var(--signal); border-bottom: 2px solid var(--signal); }
.about-copy { padding: clamp(90px,10vw,150px) clamp(42px,8vw,130px); align-self: center; }
.about-copy h2 { margin-top: 26px; font-size: clamp(45px,5.5vw,82px); }.about-copy > p:not(.section-index) { max-width: 750px; margin: 24px 0 0; color: var(--muted); font-size: 16px; }
.skills { margin-top: 34px; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 7px; border-top: 1px solid var(--line); }.skills span { padding: 7px 10px; border: 1px solid var(--ink); font-size: 8px; font-weight: 800; letter-spacing: .08em; }

.contact { padding: clamp(140px,15vw,230px) 0 0; color: #fff; background: var(--black); overflow: hidden; }
.contact-grid { display: grid; grid-template-columns: .28fr 1fr .54fr; gap: 4vw; align-items: end; padding-bottom: 145px; }.contact-grid .section-index { color: rgba(255,255,255,.38); align-self: start; }.contact-grid h2 { font-size: clamp(52px,7vw,106px); }.contact-grid > div p { margin: 0 0 30px; color: rgba(255,255,255,.6); font-size: 17px; }.button-signal { color: var(--black); background: var(--acid); }.button-signal:hover { color: #fff; background: var(--signal); }
.footer { padding: 30px 0; color: #fff; background: #050606; border-top: 1px solid var(--line-dark); }.footer > div { display: grid; grid-template-columns: 1fr 1fr auto; gap: 24px; align-items: center; }.footer .identity-mark { color: var(--black); background: var(--acid); }.footer .identity small { color: rgba(255,255,255,.4); }.footer p { margin: 0; color: rgba(255,255,255,.35); font-size: 10px; text-align: center; }.footer > div > a:last-child { color: var(--acid); font-size: 10px; font-weight: 800; }

[data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .72s var(--ease), transform .72s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }

@keyframes travel { from { transform: translateX(-18px); } to { transform: translateX(55px); } }
@keyframes portraitScan { 0%,100% { transform: translateY(0); opacity: .25; } 50% { transform: translateY(360px); opacity: .85; } }

@media (max-width: 1120px) {
  .hero-grid { grid-template-columns: 1.05fr .75fr; gap: 50px; }.hero h1 { font-size: clamp(58px,7.8vw,90px); }
  .challenge-head, .services-head, .contact-grid { grid-template-columns: .25fr 1fr; }.challenge-head > p:last-child, .services-head > p:last-child, .contact-grid > div { grid-column: 2; margin-top: 24px; }
  .risk-board { grid-template-columns: .27fr 1fr; }
  .about { grid-template-columns: .9fr 1.1fr; }.about-visual { padding: 70px 50px; }.about-copy { padding-inline: 55px; }
}

@media (max-width: 820px) {
  .page-grid { width: calc(100% - 48px); }
  .topbar { padding-inline: 24px; }
  .hero { min-height: auto; padding-top: 116px; }.hero::before { display: none; }.hero-grid { grid-template-columns: 1fr; }.hero-main { max-width: 760px; }.hero-preview { width: 82%; margin-top: 16px; justify-self: end; }.hero-footer { grid-template-columns: 1fr auto; }.hero-footer p { display: none; }
  .challenge-head, .services-head, .contact-grid { grid-template-columns: 1fr; }.challenge-head > p:last-child, .services-head > p:last-child, .contact-grid > div { grid-column: 1; }.challenge-head h2, .services-head h2 { margin-top: 24px; }
  .risk-board { grid-template-columns: 1fr; }.risk-status { min-height: 190px; border-right: 0; border-bottom: 1px solid var(--ink); padding-right: 0; }.risk-status b { margin-top: 48px; }.risk-lines div { grid-template-columns: 28px 1fr auto; }
  .lab-step > div { width: 78vw; }.lab-shade { background: linear-gradient(90deg,rgba(5,6,6,.93),rgba(5,6,6,.42) 76%),linear-gradient(0deg,rgba(5,6,6,.7),transparent); }
  .service-accordion summary { grid-template-columns: 45px 1fr 22px; }.service-accordion summary > i { display: none; }.service-detail { padding-left: 78px; grid-template-columns: 1fr; gap: 22px; }
  .about { grid-template-columns: 1fr; }.about-visual { min-height: 740px; }.about-copy { padding: 100px 7vw; }
  .contact-grid h2 { margin-top: 24px; }
}

@media (max-width: 680px) {
  html { scroll-padding-top: 66px; }.page-grid { width: calc(100% - 34px); }
  .topbar { height: 66px; padding-inline: 17px; background: rgba(241,238,230,.93); border-bottom-color: var(--line); backdrop-filter: blur(12px); }.topbar.over-lab { background: rgba(10,11,11,.92); }
  .identity > span:last-child { display: none; }.menu-button { display: block; }.menu-button[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }.menu-button[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
  .site-nav { display: none; position: absolute; inset: 66px 0 auto; height: calc(100svh - 66px); padding: 30px 20px; flex-direction: column; align-items: stretch; gap: 0; color: #fff; background: var(--black); }.site-nav.open { display: flex; }.site-nav a { padding: 16px 0; border-bottom: 1px solid var(--line-dark); font-size: 18px; }.nav-contact { margin-top: 20px; padding: 13px!important; text-align: center; border: 1px solid var(--line-dark)!important; font-size: 12px!important; }
  .hero { padding-top: 102px; }.hero h1 { font-size: clamp(50px,15.3vw,72px); line-height: .88; }.hero-lead { font-size: 16px; }.hero-actions { flex-direction: column; align-items: stretch; gap: 12px; }.button { width: 100%; }.text-action { align-self: flex-start; }.hero-preview { width: calc(100% - 10px); margin-top: 24px; }.preview-window { box-shadow: 12px 14px 0 rgba(10,11,11,.08); }.preview-log { left: -8px; bottom: -31px; }.hero-footer { margin-top: 72px; }
  .challenge-section, .services { padding-block: 92px; } h2 { font-size: clamp(44px,13vw,62px); }.challenge-head > p:last-child, .services-head > p:last-child { font-size: 15px; }
  .risk-board { margin-top: 55px; }.risk-lines { grid-template-columns: 1fr; }.risk-lines div, .risk-lines div:nth-child(odd) { border-right: 0; border-bottom: 1px solid var(--line); }.risk-lines div:nth-last-child(2) { border-bottom: 1px solid var(--line); }.risk-lines div:last-child { border-bottom: 0; }
  .lab-stage { height: 78svh; top: 0; }.lab-stage video { object-position: 60% center; }.lab-toolbar { top: 82px; left: 17px; right: 17px; grid-template-columns: auto 1fr 35px; gap: 10px; }.lab-toolbar p { font-size: 6px; }.lab-crosshair { width: 42px; height: 42px; right: 15%; top: 42%; }.lab-crosshair i:first-child { width: 58px; top: 20px; left: -8px; }.lab-crosshair i:last-child { height: 58px; left: 20px; top: -8px; }.lab-readout { left: 17px; right: 17px; bottom: 16px; min-width: 0; }.lab-note { display: none; }
  .lab-steps { margin-top: -78svh; }.lab-step { min-height: 92svh; padding: 125px 17px 130px; align-items: center; }.lab-step > div { width: 100%; }.lab-step h2 { font-size: 46px; }.lab-step p { max-width: 90%; font-size: 15px; }
  .service-accordion { margin-top: 56px; }.service-accordion summary { min-height: 96px; padding-inline: 5px; grid-template-columns: 32px 1fr 20px; gap: 10px; }.service-accordion details[open] summary { padding-inline: 10px; }.service-accordion summary > strong { font-size: 24px; }.service-detail { min-height: 0; padding: 26px 14px 34px 42px; }.service-detail p { font-size: 16px; }
  .process { padding-block: 92px; }.process-head { grid-template-columns: 1fr; }.process-head h2 { margin-top: 24px; }.process-flow { margin-top: 58px; }.process-flow li { min-height: 174px; grid-template-columns: 38px 1fr; gap: 12px; }.process-flow li > i { display: none; }.process-flow h3 { font-size: 30px; }
  .about-visual { min-height: 540px; padding: 70px 28px; }.portrait-evidence { left: -12px; right: -12px; bottom: -46px; }.about-copy { padding: 90px 17px; }.about-copy h2 { font-size: 48px; }.about-copy > p:not(.section-index) { font-size: 15px; }
  .contact { padding-top: 112px; }.contact-grid { padding-bottom: 96px; }.contact-grid h2 { font-size: 54px; }.contact-grid > div p { font-size: 15px; }
  .footer > div { grid-template-columns: 1fr auto; }.footer p { grid-column: 1/-1; grid-row: 2; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms!important; animation-iteration-count: 1!important; transition-duration: .01ms!important; }
  [data-reveal] { opacity: 1; transform: none; }
  .lab-stage { position: relative; height: 70svh; }.lab-stage video { display: none; }.lab-stage { background: url('assets/motion/qa-scroll-test-poster.webp') center/cover no-repeat; }
  .lab-steps { margin-top: 0; }.lab-step { min-height: auto; padding: 76px 4vw; opacity: 1; border-top: 1px solid var(--line-dark); background: var(--black); }.lab-step > div { width: min(780px,92vw); }.portrait-scan { top: 48%; }
}

/* Dark mode da paleta da imagem da headline */
.topbar.scrolled { background: rgba(0,11,25,.93); color: var(--ink); border-color: var(--line); }
.topbar.over-lab { background: rgba(0,11,25,.92); }
.hero::after { color: rgba(231,241,240,.14); }
.preview-window img { aspect-ratio: auto; object-fit: contain; background: #06131c; opacity: 1; }
.preview-window::after { background: linear-gradient(135deg,transparent 48%,rgba(34,124,138,.12)); }
.window-bar i { background: #227c8a; }
.process { color: var(--ink); background: var(--black-2); }
.process-head .section-index { color: var(--muted); }
.process-flow { border-color: var(--line-dark); }
.process-flow li { border-color: var(--line-dark); }
.process-flow li:hover { background: rgba(63,169,130,.12); }
.services { background: var(--bone); }
.service-accordion summary:hover { background: var(--paper); }
.service-detail { background: var(--paper); }
.about { background: var(--paper); }
.contact { background: var(--black); }
@media (max-width: 760px) { .topbar { background: rgba(0,11,25,.93); color: var(--ink); } }
@media (max-width: 900px) { .hero-preview{max-width:540px} }
@media (max-width: 760px) { .hero-preview{max-width:none;justify-self:stretch}.hero-art{width:100%;max-width:100%} }

/* Tema inspirado no macOS: vidro, profundidade e superfícies suaves */
:root{--display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;--body:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,"Helvetica Neue",Arial,sans-serif;--glass:rgba(15,39,56,.62);--glass-strong:rgba(18,48,67,.82);--glass-border:rgba(185,224,242,.18);--glass-shadow:0 24px 70px rgba(0,0,0,.28)}
body{background:radial-gradient(circle at 72% 4%,#042c4c 0,#001321 30%,#000b19 68%);background-attachment:fixed}
.topbar{top:14px;left:4vw;right:4vw;width:auto;height:62px;padding:0 18px;color:var(--ink);background:rgba(4,26,40,.6);border:1px solid var(--glass-border);border-radius:18px;box-shadow:0 14px 40px rgba(0,0,0,.2);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%)}
.topbar.scrolled,.topbar.over-lab{height:62px;background:rgba(4,22,35,.78);border-color:var(--glass-border)}
.identity-mark{border-radius:9px;background:linear-gradient(145deg,#123e58,#06131c);box-shadow:inset 0 1px rgba(255,255,255,.13)}
.nav-contact{border-color:var(--glass-border);border-radius:10px;background:rgba(255,255,255,.05)}
.hero{background:radial-gradient(circle at 76% 47%,#06355a 0,#00172a 30%,#000b19 66%)}
.hero-grid{grid-template-columns:1fr .92fr;gap:clamp(40px,6vw,100px)}
.hero h1{font-weight:730;line-height:.93;letter-spacing:-.065em}
.hero-art{width:min(100%,720px);filter:drop-shadow(0 34px 55px rgba(0,0,0,.38));-webkit-mask-image:radial-gradient(ellipse 88% 86% at 50% 50%,#000 76%,transparent 100%);mask-image:radial-gradient(ellipse 88% 86% at 50% 50%,#000 76%,transparent 100%)}
.challenge-section{background:transparent}
.services{background:linear-gradient(180deg,rgba(3,29,45,.96),rgba(0,11,25,.98));border-top:1px solid var(--glass-border)}
.risk-board{padding:18px;border:1px solid var(--glass-border);border-radius:28px;background:linear-gradient(145deg,rgba(19,54,73,.72),rgba(4,25,39,.64));box-shadow:var(--glass-shadow);backdrop-filter:blur(24px);overflow:hidden}
.risk-status{padding:24px;border-right:1px solid var(--glass-border)}
.risk-lines div,.risk-lines div:nth-child(odd){border-color:rgba(185,224,242,.11)}
.lab-toolbar,.lab-readout{border-color:var(--glass-border);border-radius:16px;background:rgba(7,26,40,.64);box-shadow:var(--glass-shadow);backdrop-filter:blur(24px) saturate(145%)}
.lab-crosshair{opacity:.55}
.service-accordion{display:grid;gap:12px;border:0}
.service-accordion details{overflow:hidden;border:1px solid var(--glass-border);border-radius:18px;background:linear-gradient(145deg,rgba(18,48,67,.72),rgba(4,25,39,.66));box-shadow:0 12px 35px rgba(0,0,0,.14)}
.service-accordion summary{padding:0 22px}
.service-accordion summary:hover{background:rgba(255,255,255,.045)}
.service-accordion details[open] summary{color:var(--ink);background:rgba(255,255,255,.055)}
.service-detail{background:rgba(0,11,25,.38);border-top:1px solid var(--glass-border)}
.process{background:linear-gradient(180deg,rgba(3,29,45,.92),rgba(0,11,25,.96))}
.process-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;border:0}
.process-flow li{min-height:280px;padding:28px;display:flex;flex-direction:column;align-items:flex-start;border:1px solid var(--glass-border);border-radius:22px;background:linear-gradient(145deg,rgba(19,54,73,.72),rgba(4,25,39,.66));box-shadow:0 16px 42px rgba(0,0,0,.18)}
.process-flow li:hover{padding:28px;transform:translateY(-5px);background:rgba(20,63,83,.78)}
.process-icon{margin-top:auto;width:48px;height:48px}
.process-flow li:nth-child(2){background-image:linear-gradient(145deg,rgba(2,18,33,.88),rgba(3,20,36,.5)),url("assets/qa-strategy-background.png");background-position:center;background-size:cover}
.process-flow li:nth-child(2):hover{background-image:linear-gradient(145deg,rgba(2,18,33,.8),rgba(3,20,36,.42)),url("assets/qa-strategy-background.png")}
.process-flow li>span{color:var(--acid)}.process-flow i{margin-top:auto;writing-mode:horizontal-tb;color:var(--muted)}
.about{gap:20px;padding:20px;background:transparent}
.about-visual,.about-copy{border:1px solid var(--glass-border);border-radius:28px;background:linear-gradient(145deg,rgba(18,48,67,.68),rgba(4,25,39,.7));box-shadow:var(--glass-shadow)}
.portrait-field{overflow:hidden;border:1px solid var(--glass-border);border-radius:24px}.portrait-scan,.portrait-corner{display:none}.portrait-evidence{left:20px;right:20px;bottom:20px;border-color:var(--glass-border);border-radius:14px;background:rgba(4,22,35,.72);backdrop-filter:blur(18px)}
.skills{border:0}.skills span{border-color:var(--glass-border);border-radius:999px;background:rgba(255,255,255,.045)}
.contact{position:relative;background:radial-gradient(circle at 64% 50%,#063254 0,#001321 38%,#000b19 74%)}
.contact::after{content:"";position:absolute;z-index:0;inset:auto 0 0;height:120px;background:linear-gradient(180deg,transparent,#021b30);pointer-events:none}
.contact>*{position:relative;z-index:1}
.button-signal{border-radius:12px;box-shadow:0 12px 30px rgba(63,169,130,.2)}
.footer{background:rgba(0,7,16,.92);backdrop-filter:blur(20px)}
@media(max-width:1000px){.process-flow{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.topbar{top:8px;left:10px;right:10px;height:58px;border-radius:15px}.hero-grid{grid-template-columns:1fr}.hero-art{width:100%}.risk-board{padding:10px;border-radius:20px}.process-flow{grid-template-columns:1fr}.process-flow li{min-height:220px}.about{padding:10px}.about-visual,.about-copy{border-radius:20px}}
.hero-art{-webkit-mask-image:none;mask-image:none;background:transparent}

/* Hero compacto para notebooks: imagem maior e conteúdo textual reduzido */
.hero{padding:104px 0 28px;justify-content:center}
.hero-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,4vw,64px)}
.hero-main{max-width:610px}
.hero .kicker{font-size:9px}
.hero h1{max-width:600px;margin-top:20px;font-size:clamp(48px,5.6vw,82px);line-height:.94;letter-spacing:-.06em}
.hero-lead{max-width:540px;margin:22px 0 0;font-size:clamp(15px,1.15vw,18px);line-height:1.55}
.hero-preview{width:100%;max-width:780px;justify-self:end}
.hero-art{width:100%;max-width:780px;height:auto;filter:drop-shadow(0 26px 42px rgba(0,0,0,.4))}
@media(max-width:820px){.hero{min-height:auto;padding-top:106px}.hero-grid{grid-template-columns:1fr}.hero-main{max-width:720px}.hero-preview{width:min(100%,620px);justify-self:center;margin-top:24px}.hero h1{font-size:clamp(48px,10vw,68px)}}
@media(max-width:480px){.hero{padding-top:94px}.hero .kicker{font-size:7px}.hero h1{font-size:clamp(42px,13vw,58px)}.hero-lead{font-size:15px}.hero-preview{width:100%;margin-top:18px}}

/* Identidade visual do header */
.topbar .identity{height:100%;flex:0 0 auto}
.identity-logo{display:block;width:auto;height:50px;object-fit:contain}
.site-nav{gap:clamp(18px,1.8vw,32px);font-size:13px}
@media(max-width:760px){.identity-logo{height:44px}}

/* Retrato do hero com desvanecimento circular nas bordas */
.hero-preview{max-width:620px;justify-self:end}
.hero-art{width:min(100%,580px);max-width:580px;aspect-ratio:1;object-fit:cover;object-position:50% 30%;border-radius:50%;filter:drop-shadow(0 28px 46px rgba(0,0,0,.38));-webkit-mask-image:radial-gradient(circle at 50% 48%,#000 0,#000 58%,rgba(0,0,0,.9) 70%,transparent 100%);mask-image:radial-gradient(circle at 50% 48%,#000 0,#000 58%,rgba(0,0,0,.9) 70%,transparent 100%)}
@media(max-width:820px){.hero-preview{max-width:540px;justify-self:center}.hero-art{width:min(100%,540px);max-width:540px}}
@media(max-width:480px){.hero-preview{max-width:420px}.hero-art{width:100%;max-width:420px}}

/* Footer alinhado ao padrão visual do header */
.footer{padding:26px 4vw 34px;color:var(--ink);background:#021b30;border-top:0}
.footer>div{width:100%;max-width:none;min-height:82px;margin:0;padding:14px 18px;grid-template-columns:1fr auto 1fr;gap:24px;border:1px solid var(--glass-border);border-radius:18px;background:rgba(4,26,40,.6);box-shadow:0 14px 40px rgba(0,0,0,.2);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%)}
.footer .identity{justify-self:start}
.footer .identity-logo{height:50px}
.footer p{color:var(--muted);font-size:12px;font-weight:600;text-align:center}
.footer>div>a:last-child{justify-self:end;color:var(--ink);font-size:13px;font-weight:700}
.footer>div>a:last-child:hover{color:var(--signal)}
@media(max-width:680px){.contact::after{height:80px}.footer{padding:18px 10px 24px}.footer>div{min-height:72px;padding:16px 14px;grid-template-columns:1fr auto;gap:12px;border-radius:15px}.footer .identity-logo{height:42px}.footer p{grid-column:1/-1;grid-row:2;margin-top:4px;font-size:11px}.footer>div>a:last-child{font-size:12px}}

/* Atalho flutuante para contato pelo WhatsApp */
.whatsapp-button{position:fixed;z-index:90;right:clamp(18px,2.4vw,36px);bottom:clamp(18px,2.4vw,34px);width:58px;height:58px;display:grid;place-items:center;color:#fff;background:#25d366;border:1px solid rgba(255,255,255,.34);border-radius:50%;box-shadow:0 14px 34px rgba(0,0,0,.34);transition:transform .22s var(--ease),background .22s,box-shadow .22s}
.whatsapp-button:hover{transform:translateY(-4px) scale(1.03);background:#20bd5a;box-shadow:0 18px 40px rgba(0,0,0,.4)}
.whatsapp-button svg{width:30px;height:30px;fill:currentColor}
.whatsapp-button:focus-visible{outline:3px solid #fff;outline-offset:4px}
@media(max-width:680px){.whatsapp-button{right:16px;bottom:16px;width:54px;height:54px}.whatsapp-button svg{width:28px;height:28px}}

/* Imagem de estratégia aplicada aos cards e aos itens de Serviços */
.process-flow li{
  background-image:linear-gradient(145deg,rgba(2,18,33,.9),rgba(3,20,36,.58)),url("assets/qa-strategy-background.png");
  background-position:center;
  background-size:cover;
}
.process-flow li:hover{
  background-image:linear-gradient(145deg,rgba(2,18,33,.8),rgba(3,20,36,.42)),url("assets/qa-strategy-background.png");
}
.process-flow li:nth-child(1){background-image:linear-gradient(145deg,rgba(2,18,33,.9),rgba(3,20,36,.58)),url("assets/process-understanding-background.png");}
.process-flow li:nth-child(2){background-image:linear-gradient(145deg,rgba(2,18,33,.9),rgba(3,20,36,.58)),url("assets/process-strategy-background.png");}
.process-flow li:nth-child(3){background-image:linear-gradient(145deg,rgba(2,18,33,.9),rgba(3,20,36,.58)),url("assets/process-execution-background.png");}
.process-flow li:nth-child(4){background-image:linear-gradient(145deg,rgba(2,18,33,.9),rgba(3,20,36,.58)),url("assets/process-evidence-background.png");}
.process-flow li:nth-child(1):hover{background-image:linear-gradient(145deg,rgba(2,18,33,.8),rgba(3,20,36,.42)),url("assets/process-understanding-background.png");}
.process-flow li:nth-child(2):hover{background-image:linear-gradient(145deg,rgba(2,18,33,.8),rgba(3,20,36,.42)),url("assets/process-strategy-background.png");}
.process-flow li:nth-child(3):hover{background-image:linear-gradient(145deg,rgba(2,18,33,.8),rgba(3,20,36,.42)),url("assets/process-execution-background.png");}
.process-flow li:nth-child(4):hover{background-image:linear-gradient(145deg,rgba(2,18,33,.8),rgba(3,20,36,.42)),url("assets/process-evidence-background.png");}
.service-accordion details{
  background-image:linear-gradient(110deg,rgba(2,18,33,.94),rgba(3,20,36,.62)),url("assets/qa-strategy-background.png");
  background-position:center;
  background-size:cover;
}
.service-accordion details[open] summary{
  background:rgba(0,11,25,.34);
}
.service-accordion .service-detail{
  background:rgba(0,11,25,.42);
}

/* Fundo do título do bloco 01 / O que está em risco */
.challenge-head{
  padding:clamp(34px,4vw,62px) clamp(22px,3vw,46px);
  border:1px solid var(--glass-border);
  border-radius:24px;
  background:linear-gradient(90deg,rgba(0,11,25,.96) 0%,rgba(0,11,25,.88) 43%,rgba(0,11,25,.22) 100%),url("assets/qa-risk-background.png") center/cover;
  box-shadow:var(--glass-shadow);
}
@media(max-width:820px){
  .challenge-head{
    padding:32px 24px;
    background:linear-gradient(90deg,rgba(0,11,25,.92),rgba(0,11,25,.62)),url("assets/qa-risk-background.png") center/cover;
  }
}

/* Fundo do card de conteúdo da seção Sobre mim */
.about-copy{
  background:linear-gradient(90deg,rgba(0,11,25,.94) 0%,rgba(0,11,25,.83) 54%,rgba(0,11,25,.42) 100%),url("assets/about-content-background.png") center/cover;
}

/* Camada gráfica atrás do retrato de apresentação no hero */
.hero-preview{
  isolation:isolate;
}
.hero-preview::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  border-radius:24px;
  background:url("assets/hero-portrait-background.png") center/cover;
  opacity:.3;
  filter:blur(14px) brightness(.48) saturate(.58);
  pointer-events:none;
}
.hero-art{
  position:relative;
  z-index:1;
}

/* Tipografia amigável e profissional para o header */
:root{--header-font:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.topbar,.site-nav,.nav-contact,.menu-button{font-family:var(--header-font)}