:root{
  --ink:#080a0f;--graphite:#151922;--paper:#f2efe8;--muted:#aab2c0;
  --blue:#4db8ff;--blue2:#0d69ff;--lineD:rgba(242,239,232,.15);
  --lineL:rgba(8,10,15,.15);--ease:cubic-bezier(.22,1,.36,1);
  --shell:min(1440px,calc(100% - 64px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
body{min-width:320px;margin:0;overflow-x:hidden;color:var(--paper);background:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button{border:0;padding:0;color:inherit;background:none;font:inherit}
img,svg{display:block;max-width:100%}
::selection{color:var(--ink);background:var(--blue)}
.shell{width:var(--shell);margin-inline:auto}
.skip{position:fixed;z-index:6000;top:12px;left:12px;padding:12px 16px;color:var(--ink);background:var(--paper);font-size:12px;font-weight:800;transform:translateY(-160%)}
.skip:focus{transform:none}

.noise{position:fixed;z-index:3000;inset:0;opacity:.05;pointer-events:none;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.52'/%3E%3C/svg%3E")}
.progress{position:fixed;z-index:2000;top:0;left:0;width:100%;height:2px;background:rgba(77,184,255,.12)}
.progress span{display:block;width:100%;height:100%;background:var(--blue);transform:scaleX(0);transform-origin:left}
.cursor{position:fixed;z-index:5000;top:0;left:0;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%)}
.cursor.dot{width:6px;height:6px;background:var(--blue)}
.cursor.ring{width:38px;height:38px;border:1px solid rgba(242,239,232,.52);transition:.18s}
.cursor.ring.active{width:58px;height:58px;border-color:var(--blue);background:rgba(77,184,255,.08)}

.preloader{position:fixed;z-index:5500;inset:0;display:grid;grid-template-rows:auto 1fr auto;padding:24px 28px;color:var(--paper);background:var(--ink);transition:opacity .7s var(--ease),visibility .7s var(--ease)}
.preloader.hidden{opacity:0;visibility:hidden}
.preloader>div{display:flex;align-items:center;justify-content:space-between;font:500 9px/1 ui-monospace,monospace;letter-spacing:.1em}
.preloader section{display:grid;align-content:center;gap:20px}
.preloader strong{font-size:clamp(5rem,16vw,13rem);line-height:.7;letter-spacing:-.08em}
.preloader section i{display:block;height:1px;background:rgba(242,239,232,.16)}
.preloader section b{display:block;width:100%;height:1px;background:var(--blue);transform:scaleX(0);transform-origin:left;animation:loadline 1.1s var(--ease) forwards}
@keyframes loadline{to{transform:scaleX(1)}}

.header{position:fixed;z-index:1900;top:0;left:0;display:grid;width:100%;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px 28px;color:#fff;mix-blend-mode:difference}
.brand{display:grid;width:max-content;gap:2px}
.brand strong{font-size:12px}
.brand span,.status,.menu-button{font:500 8px/1.2 ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}
.brand span{opacity:.62;font-size:7px}
.status{display:flex;align-items:center;gap:8px}
.status i{width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px rgba(77,184,255,.12)}
.menu-button{display:flex;align-items:center;justify-self:end;gap:10px;cursor:pointer}
.menu-button>i{position:relative;width:26px;height:10px}
.menu-button>i:before,.menu-button>i:after{position:absolute;right:0;width:26px;height:1px;content:"";background:currentColor;transition:transform .32s var(--ease)}
.menu-button>i:before{top:1px}.menu-button>i:after{bottom:1px}
.menu-button[aria-expanded=true]>i:before{transform:translateY(4px) rotate(45deg)}
.menu-button[aria-expanded=true]>i:after{transform:translateY(-4px) rotate(-45deg)}

.rail{position:fixed;z-index:1600;top:50%;left:20px;display:grid;width:20px;gap:16px;color:#fff;mix-blend-mode:difference;opacity:0;transform:translateY(-50%);transition:opacity .24s}
.rail.visible{opacity:.76}
.rail>div{display:grid;gap:6px;writing-mode:vertical-rl;transform:rotate(180deg)}
.rail span,.rail strong{font:500 7px/1 ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}.rail strong{opacity:.64}
.rail>i{display:block;width:1px;height:80px;margin-left:3px;background:rgba(255,255,255,.28)}
.rail>i b{display:block;width:1px;height:100%;background:#fff;transform:scaleY(0);transform-origin:top}

.menu{position:fixed;z-index:1800;inset:0;visibility:hidden;pointer-events:none}
.menu.open{visibility:visible;pointer-events:auto}
.menu-backdrop{position:absolute;inset:0;width:100%;height:100%;background:rgba(0,4,10,.56);opacity:0;backdrop-filter:blur(14px);transition:opacity .42s}
.menu.open .menu-backdrop{opacity:1}
.menu>section{position:absolute;top:0;right:0;display:grid;width:min(760px,100%);height:100%;grid-template-rows:auto 1fr auto;padding:92px 40px 30px;color:var(--paper);background:var(--graphite);transform:translateX(100%);transition:transform .7s var(--ease)}
.menu.open>section{transform:none}
.menu header,.menu footer{display:flex;justify-content:space-between;color:var(--muted);font:500 8px/1.4 ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}
.menu nav{display:grid;align-content:center}
.menu nav a{display:grid;grid-template-columns:46px 1fr;align-items:baseline;border-top:1px solid var(--lineD);padding:10px 0}
.menu nav a:last-child{border-bottom:1px solid var(--lineD)}
.menu nav small{color:var(--blue);font:500 8px/1 ui-monospace,monospace}
.menu nav span{font-size:clamp(2.8rem,7vw,6rem);font-weight:700;line-height:.98;letter-spacing:-.07em;transition:color .18s}
.menu nav a:hover span,.menu nav a:focus-visible span{color:var(--blue)}

.dark{color:var(--paper);background:var(--ink)}
.light{color:var(--ink);background:var(--paper)}
.blue{color:var(--ink);background:var(--blue)}
.section{position:relative}

.hero{position:relative;min-height:100svh;overflow:hidden;padding:88px 0 24px}
.ambient{position:absolute;inset:0;background:radial-gradient(circle at 74% 25%,rgba(77,184,255,.22),transparent 25rem),linear-gradient(90deg,transparent 49.9%,rgba(242,239,232,.06) 50%,transparent 50.1%)}
.meta{position:relative;z-index:2;display:flex;justify-content:space-between;color:var(--muted);font:500 7px/1 ui-monospace,monospace;letter-spacing:.1em}
.hero-stage{position:relative;z-index:2;display:grid;min-height:clamp(400px,55vh,650px);align-items:center}
.hero-word{position:absolute;z-index:3;width:100%;font-size:clamp(7rem,18.5vw,18rem);font-weight:800;line-height:.72;letter-spacing:-.105em;text-transform:uppercase;white-space:nowrap;pointer-events:none}
.hero-word.first{top:18%;left:-.02em}.hero-word.second{right:0;bottom:11%;text-align:right}
.hero-art{position:absolute;z-index:2;top:50%;left:54%;width:min(36vw,520px);margin:0;transform:translate(-50%,-50%);will-change:transform}
.hero-art img{width:100%;filter:drop-shadow(0 42px 80px rgba(0,0,0,.52))}
.orbit{position:absolute;border:1px solid rgba(242,239,232,.18);border-radius:50%;pointer-events:none}
.orbit.a{inset:4%;animation:orbit 16s linear infinite}.orbit.b{inset:15%;border-color:rgba(77,184,255,.32);animation:orbit 12s linear reverse infinite}
@keyframes orbit{to{transform:rotate(360deg)}}
.hero-art figcaption{position:absolute;top:50%;left:50%;display:grid;gap:6px;color:var(--paper);font:500 7px/1 ui-monospace,monospace;letter-spacing:.12em;text-align:center;transform:translate(-50%,-50%)}
.hero-copy{position:relative;z-index:5;display:grid;grid-template-columns:1.35fr .7fr auto;align-items:end;gap:34px;border-top:1px solid var(--lineD);padding-top:18px}
.eyebrow,.heading em,.contact-main>em{color:var(--blue);font:500 8px/1.3 ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;font-style:normal}
.hero-copy h1{max-width:660px;margin:10px 0 0;font-size:clamp(2.2rem,4.6vw,5rem);line-height:.96;letter-spacing:-.065em}
.hero-copy>p{max-width:390px;margin:0;color:var(--muted);font-size:11px;line-height:1.7}
.actions{display:flex;gap:9px;align-items:center}
.button{display:inline-flex;min-height:50px;align-items:center;justify-content:center;gap:12px;border-radius:999px;padding:0 18px;cursor:pointer;font:500 8px/1 ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;transition:transform .24s var(--ease),background .24s,color .24s}
.button.primary{color:var(--ink);background:var(--blue)}.button.ghost{border:1px solid var(--lineD);color:var(--paper)}
.button:hover,.button:focus-visible{transform:translateY(-3px)}.button.ghost:hover{color:var(--ink);background:var(--paper)}
.hero-foot{position:relative;z-index:4;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;margin-top:24px;color:var(--muted);font:500 7px/1 ui-monospace,monospace;letter-spacing:.08em}
.hero-foot>i{height:1px;background:var(--lineD)}.hero-foot b{display:block;width:18%;height:1px;background:var(--blue);animation:scrollline 2.4s var(--ease) infinite}
@keyframes scrollline{50%{transform:translateX(455%)}}

.marquee{overflow:hidden;color:var(--ink);background:var(--paper);border-bottom:1px solid var(--lineL)}
.marquee-track{display:flex;width:max-content;animation:marquee 28s linear infinite}.marquee-group{display:flex;flex:0 0 auto;align-items:center}
.marquee-group span{padding:20px 28px;font:500 9px/1 ui-monospace,monospace;letter-spacing:.1em}.marquee-group i{width:8px;height:8px;border-radius:50%;background:var(--blue)}
@keyframes marquee{to{transform:translateX(-50%)}}

.heading{display:grid;grid-template-columns:42px minmax(0,1.5fr) minmax(260px,.6fr);gap:32px;align-items:start;padding:110px 0 66px}
.heading>span{color:var(--blue2);font:500 9px/1 ui-monospace,monospace}.dark-heading>span{color:var(--blue)}
.heading h2{max-width:850px;margin:10px 0 0;font-size:clamp(3.2rem,7vw,8.5rem);line-height:.88;letter-spacing:-.085em}
.heading>p{margin:0;color:rgba(8,10,15,.58);font-size:11px;line-height:1.75}.dark-heading>p{color:var(--muted)}

.statement{display:grid;grid-template-columns:1fr 1fr;gap:60px;border-top:1px solid var(--lineL);padding:50px 0 80px}
.statement p{margin:0;font-size:clamp(2.2rem,4.4vw,5.4rem);line-height:.98;letter-spacing:-.055em}.statement p:last-child{color:rgba(8,10,15,.48)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--lineL);border-left:1px solid var(--lineL)}
.cards article{min-height:310px;border-right:1px solid var(--lineL);border-bottom:1px solid var(--lineL);padding:24px}
.cards article>span{color:var(--blue2);font:500 8px/1 ui-monospace,monospace}
.cards h3{max-width:13ch;margin:82px 0 16px;font-size:clamp(1.7rem,2.5vw,3rem);line-height:1;letter-spacing:-.045em}
.cards p{max-width:36ch;margin:0;color:rgba(8,10,15,.58);font-size:10px;line-height:1.7}
.quote{margin-top:78px;margin-bottom:0;border-top:1px solid var(--lineL);padding:36px 0 110px;font-size:clamp(2.2rem,5vw,6rem);font-weight:600;line-height:.97;letter-spacing:-.06em}

.skills{border-top:1px solid var(--lineD)}
.skills article{display:grid;grid-template-columns:minmax(260px,.8fr) 1.2fr;border-bottom:1px solid var(--lineD);padding:32px 0}
.skills article>div{display:grid;grid-template-columns:42px 1fr}.skills article>div span{color:var(--blue);font:500 8px/1 ui-monospace,monospace}
.skills h3{margin:0;font-size:clamp(2.2rem,4vw,5rem);line-height:.9;letter-spacing:-.06em}
.skills ul{display:grid;margin:0;padding:0;list-style:none}.skills li{display:flex;min-height:48px;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(242,239,232,.08);color:var(--muted);font-size:10px}.skills li:last-child{border-bottom:0}
.skills li em{font:500 7px/1 ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;font-style:normal}
.skill-ticker{display:flex;align-items:center;justify-content:space-between;padding:74px 0 100px;font-size:clamp(1.8rem,4vw,4.5rem);font-weight:800;letter-spacing:-.05em}
.skill-ticker i{width:8px;height:8px;border-radius:50%;background:var(--blue)}

.process{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;border-top:1px solid var(--lineL);padding:36px 0 110px}
.process-art{position:sticky;top:100px;align-self:start}.process-art>p{max-width:35ch;color:rgba(8,10,15,.54);font-size:10px;line-height:1.7}
.process-orb{position:relative;display:grid;width:min(100%,470px);aspect-ratio:1;place-items:center;border:1px solid var(--lineL);border-radius:50%;background:radial-gradient(circle at 38% 32%,rgba(77,184,255,.55),transparent 22%),radial-gradient(circle at center,rgba(77,184,255,.12),transparent 58%)}
.process-orb:before,.process-orb:after{position:absolute;border:1px solid var(--lineL);border-radius:50%;content:""}.process-orb:before{inset:12%}.process-orb:after{inset:27%}
.process-orb span{position:absolute;color:var(--blue2);font:500 9px/1 ui-monospace,monospace}.process-orb span:first-child{top:13%;left:13%}.process-orb span:nth-child(2){right:13%;bottom:13%}
.process-orb i{width:16px;height:16px;border-radius:50%;background:var(--blue2);box-shadow:0 0 0 18px rgba(13,105,255,.12)}
.process ol{margin:0;padding:0;list-style:none}.process li{display:grid;grid-template-columns:54px 1fr;border-top:1px solid var(--lineL);padding:24px 0 42px}.process li:last-child{border-bottom:1px solid var(--lineL)}
.process li>span{color:var(--blue2);font:500 8px/1 ui-monospace,monospace}.process h3{margin:0 0 12px;font-size:clamp(2.6rem,5vw,6.4rem);line-height:.9;letter-spacing:-.07em}
.process li p{max-width:44ch;margin:0;color:rgba(8,10,15,.58);font-size:10px;line-height:1.7}

.principles{display:grid;grid-template-columns:.5fr 1.2fr;gap:60px;padding:100px 0}.principles>span{font:500 8px/1 ui-monospace,monospace;letter-spacing:.08em}
.principles>p{max-width:900px;margin:0;font-size:clamp(3.5rem,8vw,9.6rem);font-weight:700;line-height:.86;letter-spacing:-.085em}
.principles>div{grid-column:2;display:grid;grid-template-columns:repeat(3,1fr);margin-top:40px;border-top:1px solid rgba(8,10,15,.25);border-left:1px solid rgba(8,10,15,.25)}
.principles article{min-height:220px;border-right:1px solid rgba(8,10,15,.25);border-bottom:1px solid rgba(8,10,15,.25);padding:20px}
.principles article span{font:500 8px/1 ui-monospace,monospace}.principles h3{margin:65px 0 12px;font-size:1.7rem}.principles article p{max-width:30ch;margin:0;font-size:9px;line-height:1.65}

.contact{position:relative;min-height:100svh;overflow:hidden;padding:30px 0 18px}
.contact-glow{position:absolute;inset:0;background:radial-gradient(circle at 20% 30%,rgba(77,184,255,.18),transparent 30rem),linear-gradient(180deg,transparent,rgba(77,184,255,.05))}
.contact-meta{position:relative;z-index:2;display:flex;justify-content:space-between;color:var(--muted);font:500 8px/1 ui-monospace,monospace;letter-spacing:.08em}
.contact-main{position:relative;z-index:2;display:grid;min-height:62vh;align-content:center;justify-items:start}
.contact-main h2{max-width:1200px;margin:14px 0 20px;font-size:clamp(4rem,11vw,12rem);line-height:.8;letter-spacing:-.095em}
.contact-main p{max-width:54ch;margin:0 0 28px;color:var(--muted);font-size:11px;line-height:1.7}
.contact-main .button{min-width:220px}
.contact-actions{display:flex;flex-wrap:wrap;gap:10px}

.contact-data{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--lineD);border-left:1px solid var(--lineD);margin-bottom:18px}
.contact-data>a{position:relative;display:grid;min-width:0;min-height:128px;align-content:center;gap:10px;border-right:1px solid var(--lineD);border-bottom:1px solid var(--lineD);padding:18px;transition:color .22s ease,background .22s ease}
.contact-data>a:hover,.contact-data>a:focus-visible{color:var(--ink);background:var(--blue)}
.contact-data span{color:var(--blue);font:500 7px/1 ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}
.contact-data>a:hover span,.contact-data>a:focus-visible span{color:var(--ink)}
.contact-data strong{overflow-wrap:anywhere;font-size:10px;line-height:1.5}
.contact-data i{position:absolute;right:16px;top:16px;font-style:normal}

.contact-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--lineD);border-left:1px solid var(--lineD)}
.contact-grid>div{display:grid;min-height:100px;align-content:center;gap:8px;border-right:1px solid var(--lineD);border-bottom:1px solid var(--lineD);padding:18px}
.contact-grid span{color:var(--blue);font:500 7px/1 ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}.contact-grid strong{font-size:10px;line-height:1.45}
.footer{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto auto;align-items:end;gap:28px;padding-top:26px}
.footer>div{display:grid;gap:3px}.footer strong{font-size:12px}.footer span,.footer p,.footer nav a{color:var(--muted);font:500 7px/1.4 ui-monospace,monospace;letter-spacing:.06em}
.footer nav{display:flex;gap:18px}.footer nav a{transition:color .2s ease}.footer nav a:hover,.footer nav a:focus-visible{color:var(--paper)}

.reveal{opacity:0;transform:translateY(34px);transition:opacity .7s var(--ease),transform .9s var(--ease)}
.reveal.visible{opacity:1;transform:none}

@media(hover:hover) and (pointer:fine){
  body,a,button{cursor:none}
  .marquee:hover .marquee-track{animation-play-state:paused}
}
@media(max-width:1100px){
  :root{--shell:min(100% - 42px,1100px)}
  .hero-copy{grid-template-columns:1.2fr .8fr}.actions{grid-column:1/-1}
  .heading{grid-template-columns:34px 1fr}.heading>p{grid-column:2;max-width:520px}
  .principles{grid-template-columns:1fr}.principles>div{grid-column:1}
}
@media(max-width:760px){
  :root{--shell:calc(100% - 28px)}
  .cursor,.rail,.status{display:none}
  .header{grid-template-columns:1fr auto;padding:14px}
  .menu>section{padding:82px 18px 24px}.menu header,.menu footer{flex-direction:column;align-items:flex-start;gap:18px}.menu nav a{grid-template-columns:36px 1fr;padding:13px 0}.menu nav span{font-size:clamp(2.6rem,13vw,4.4rem)}
  .hero{min-height:auto;padding-top:82px}.meta{gap:12px;font-size:6px}.meta span:nth-child(2){display:none}.hero-stage{min-height:410px}
  .hero-word{font-size:clamp(5rem,24vw,8rem)}.hero-word.first{top:21%}.hero-word.second{bottom:16%}
  .hero-art{left:58%;width:min(68vw,320px);opacity:.8}
  .hero-copy{grid-template-columns:1fr;gap:18px;border:1px solid var(--lineD);padding:16px;background:rgba(8,10,15,.86);backdrop-filter:blur(12px)}
  .hero-copy h1{font-size:clamp(2.4rem,11vw,4.6rem)}.actions{flex-wrap:wrap}.hero-foot{grid-template-columns:auto 1fr}.hero-foot>span:last-child{display:none}
  .heading{grid-template-columns:28px 1fr;gap:12px;padding:76px 0 42px}.heading>p{grid-column:2}.heading h2{font-size:clamp(3rem,14vw,5.4rem)}
  .statement{grid-template-columns:1fr;gap:28px;padding:36px 0 54px}.statement p{font-size:clamp(2.15rem,10vw,3.8rem)}
  .cards{grid-template-columns:1fr}.cards article{min-height:230px}.cards h3{margin-top:48px}.quote{margin-top:54px;padding-bottom:74px;font-size:clamp(2.2rem,10vw,4rem)}
  .skills article{grid-template-columns:1fr;gap:28px}.skills h3{font-size:clamp(2.7rem,12vw,4.6rem)}.skill-ticker{flex-wrap:wrap;gap:15px;justify-content:flex-start}
  .process{grid-template-columns:1fr;gap:46px}.process-art{position:relative;top:auto}.process-orb{width:min(86vw,380px)}.process h3{font-size:clamp(3rem,13vw,5rem)}
  .principles{gap:26px;padding:72px 0}.principles>p{font-size:clamp(3.2rem,14vw,5.8rem)}.principles>div{grid-template-columns:1fr}.principles article{min-height:180px}
  .contact{padding-top:20px}
  .contact-main{min-height:68vh}
  .contact-main h2{max-width:9ch;font-size:clamp(3.8rem,17vw,6.4rem)}
  .contact-main p{font-size:12px}
  .contact-actions{width:100%}
  .contact-actions .button{flex:1 1 210px}
  .contact-data{grid-template-columns:1fr}
  .contact-data>a{min-height:88px}
  .contact-grid{grid-template-columns:1fr}
  .footer{grid-template-columns:1fr;align-items:start}
  .footer nav{flex-wrap:wrap}
}
@media(max-width:380px){.button{width:100%}.actions{width:100%}.toast{right:10px;bottom:10px;left:10px;max-width:none}}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}


/* ==================================================================
   V1.1 — Interactive Identity Lab
   ================================================================== */

.hero-lab {
  min-height: 100svh;
  padding-bottom: 26px;
}

.hero-grid {
  position: absolute;
  inset: 0;
  opacity: 0.36;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(242, 239, 232, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 239, 232, 0.045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, black 0%, transparent 92%);
}

.hero-connection-canvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.identity-lab {
  position: relative;
  z-index: 3;
  display: grid;
  min-height: calc(100svh - 170px);
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.72fr);
  align-items: center;
  gap: clamp(30px, 5vw, 90px);
  padding-block: 34px 30px;
}

.identity-lab__words {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

.identity-lab .hero-word {
  transition:
    color 700ms var(--ease),
    -webkit-text-stroke-color 700ms var(--ease),
    transform 900ms var(--ease),
    opacity 500ms ease;
}

.identity-lab .hero-word.first {
  top: 10%;
}

.identity-lab .hero-word.second {
  bottom: 8%;
}

.identity-lab[data-active-state="1"] .hero-word.first {
  color: transparent;
  -webkit-text-stroke: 2px rgba(242, 239, 232, 0.84);
  transform: translateX(1.6vw);
}

.identity-lab[data-active-state="1"] .hero-word.second {
  color: var(--paper);
  -webkit-text-stroke: 0 transparent;
  transform: translateX(-1.5vw);
}

.identity-lab[data-active-state="2"] .hero-word {
  color: transparent;
  -webkit-text-stroke: 2px rgba(77, 184, 255, 0.86);
}

.identity-lab[data-active-state="2"] .hero-word.first {
  transform: translateX(-1vw) skewX(-4deg);
}

.identity-lab[data-active-state="2"] .hero-word.second {
  transform: translateX(1vw) skewX(4deg);
}

.identity-lab__stage {
  position: relative;
  z-index: 4;
  display: grid;
  min-height: clamp(440px, 62vh, 690px);
  place-items: center;
  outline: none;
  touch-action: pan-y;
}

.identity-lab__stage:focus-visible {
  border-radius: 30px;
  box-shadow: 0 0 0 1px var(--blue);
}

.identity-lab__visual {
  --lab-x: 0px;
  --lab-y: 0px;
  --lab-rotate: 0deg;
  position: relative;
  display: grid;
  width: min(42vw, 540px);
  aspect-ratio: 1;
  place-items: center;
  transform:
    translate3d(var(--lab-x), var(--lab-y), 0)
    rotate(var(--lab-rotate));
  transition:
    transform 700ms var(--ease),
    filter 600ms ease;
  will-change: transform;
  filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.4));
}

.lab-orbit,
.lab-pulse,
.lab-core {
  position: absolute;
  border-radius: 50%;
}

.lab-orbit {
  border: 1px solid rgba(242, 239, 232, 0.24);
  transition:
    inset 800ms var(--ease),
    border-color 500ms ease,
    border-radius 700ms var(--ease),
    transform 700ms var(--ease);
}

.lab-orbit span {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 8px rgba(77, 184, 255, 0.08);
}

.lab-orbit span:nth-child(1) {
  top: -5px;
  left: 50%;
}

.lab-orbit span:nth-child(2) {
  right: -5px;
  top: 50%;
}

.lab-orbit span:nth-child(3) {
  bottom: -5px;
  left: 34%;
}

.lab-orbit span:nth-child(4) {
  top: 25%;
  left: -5px;
}

.lab-orbit--outer {
  inset: 0;
  animation: lab-orbit-outer 18s linear infinite;
}

.lab-orbit--middle {
  inset: 13%;
  border-color: rgba(77, 184, 255, 0.4);
  animation: lab-orbit-middle 13s linear reverse infinite;
}

.lab-orbit--inner {
  inset: 29%;
  animation: lab-orbit-inner 9s linear infinite;
}

@keyframes lab-orbit-outer {
  to { transform: rotate(360deg); }
}

@keyframes lab-orbit-middle {
  to { transform: rotate(360deg); }
}

@keyframes lab-orbit-inner {
  to { transform: rotate(360deg); }
}

.lab-core {
  z-index: 5;
  display: grid;
  width: 34%;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(242, 239, 232, 0.36);
  color: var(--paper);
  background:
    radial-gradient(circle at 35% 28%, rgba(77, 184, 255, 0.42), transparent 36%),
    rgba(8, 10, 15, 0.84);
  box-shadow:
    inset 0 0 60px rgba(77, 184, 255, 0.1),
    0 0 0 22px rgba(77, 184, 255, 0.04);
  backdrop-filter: blur(18px);
  transition:
    border-radius 700ms var(--ease),
    width 700ms var(--ease),
    transform 700ms var(--ease),
    background 500ms ease;
}

.lab-core strong {
  max-width: 90%;
  font: 700 clamp(0.72rem, 1.4vw, 1rem)/1.1 ui-monospace, monospace;
  letter-spacing: 0.12em;
  text-align: center;
}

.lab-core__index {
  position: absolute;
  top: 19%;
  font: 500 8px/1 ui-monospace, monospace;
  color: var(--blue);
}

.lab-core i {
  position: absolute;
  bottom: 18%;
  width: 26%;
  height: 1px;
  background: var(--blue);
}

.lab-axis {
  position: absolute;
  z-index: 0;
  background: linear-gradient(90deg, transparent, rgba(242, 239, 232, 0.22), transparent);
}

.lab-axis--x {
  width: 124%;
  height: 1px;
}

.lab-axis--y {
  width: 1px;
  height: 124%;
  background: linear-gradient(transparent, rgba(242, 239, 232, 0.22), transparent);
}

.lab-pulse {
  inset: 38%;
  border: 1px solid rgba(77, 184, 255, 0.36);
  animation: lab-pulse 2.8s ease-out infinite;
}

.lab-pulse--two {
  animation-delay: 1.4s;
}

@keyframes lab-pulse {
  0% {
    opacity: 0.72;
    transform: scale(0.6);
  }
  100% {
    opacity: 0;
    transform: scale(4.5);
  }
}

.identity-lab[data-active-state="1"] .lab-orbit {
  border-radius: 18%;
}

.identity-lab[data-active-state="1"] .lab-orbit--outer {
  inset: 2%;
  transform: rotate(45deg);
}

.identity-lab[data-active-state="1"] .lab-orbit--middle {
  inset: 18%;
  transform: rotate(-25deg);
}

.identity-lab[data-active-state="1"] .lab-core {
  width: 38%;
  border-radius: 18%;
  transform: rotate(45deg);
  background:
    linear-gradient(135deg, rgba(77, 184, 255, 0.5), transparent 55%),
    rgba(8, 10, 15, 0.88);
}

.identity-lab[data-active-state="1"] .lab-core > * {
  transform: rotate(-45deg);
}

.identity-lab[data-active-state="2"] .lab-orbit {
  border-radius: 0;
  border-color: rgba(77, 184, 255, 0.52);
}

.identity-lab[data-active-state="2"] .lab-orbit--outer {
  inset: 6%;
  transform: rotate(8deg) skewX(-7deg);
}

.identity-lab[data-active-state="2"] .lab-orbit--middle {
  inset: 21%;
  transform: rotate(-8deg) skewY(7deg);
}

.identity-lab[data-active-state="2"] .lab-orbit--inner {
  inset: 35%;
}

.identity-lab[data-active-state="2"] .lab-core {
  width: 41%;
  border-radius: 0;
  transform: rotate(0);
  background:
    repeating-linear-gradient(
      90deg,
      rgba(77, 184, 255, 0.16) 0 1px,
      transparent 1px 12px
    ),
    rgba(8, 10, 15, 0.9);
}

.identity-lab__hint {
  position: absolute;
  bottom: 6%;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 9px;
  color: var(--muted);
  font: 500 7px/1.2 ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.identity-lab__hint i {
  display: block;
  width: 58px;
  height: 1px;
  background: var(--lineD);
}

.identity-lab__hint i::after {
  display: block;
  width: 18px;
  height: 1px;
  content: "";
  background: var(--blue);
  animation: lab-hint 2s var(--ease) infinite;
}

@keyframes lab-hint {
  50% { transform: translateX(40px); }
}

.identity-lab__content {
  position: relative;
  z-index: 5;
  align-self: end;
  display: grid;
  gap: 22px;
  max-width: 560px;
  padding: 28px;
  border: 1px solid var(--lineD);
  background: rgba(8, 10, 15, 0.82);
  backdrop-filter: blur(18px);
}

.identity-lab__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.identity-lab__counter {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font: 500 7px/1 ui-monospace, monospace;
}

.identity-lab__counter i {
  width: 30px;
  height: 1px;
  background: var(--lineD);
}

.identity-lab__content h1 {
  max-width: 10ch;
  margin: 0;
  font-size: clamp(3.2rem, 6vw, 7.2rem);
  line-height: 0.88;
  letter-spacing: -0.08em;
  transition:
    opacity 220ms ease,
    transform 500ms var(--ease);
}

.identity-lab__content > p {
  max-width: 48ch;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.75;
  transition:
    opacity 220ms ease,
    transform 500ms var(--ease);
}

.identity-lab.is-changing h1,
.identity-lab.is-changing .identity-lab__content > p {
  opacity: 0;
  transform: translateY(14px);
}

.identity-lab__controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--lineD);
  border-left: 1px solid var(--lineD);
}

.lab-tab {
  display: grid;
  min-height: 70px;
  align-content: center;
  gap: 7px;
  border-right: 1px solid var(--lineD);
  border-bottom: 1px solid var(--lineD);
  padding: 12px;
  color: var(--muted);
  cursor: pointer;
  font: 500 8px/1.2 ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  transition:
    color 220ms ease,
    background 220ms ease;
}

.lab-tab span {
  color: var(--blue);
  font-size: 7px;
}

.lab-tab.is-active {
  color: var(--ink);
  background: var(--blue);
}

.lab-tab.is-active span {
  color: var(--ink);
}

.lab-tab:focus-visible {
  outline: 1px solid var(--paper);
  outline-offset: -3px;
}

.identity-lab__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.hero-lab .hero-foot {
  margin-top: 0;
}

@media (max-width: 1100px) {
  .identity-lab {
    grid-template-columns: 1fr;
    padding-top: 20px;
  }

  .identity-lab__stage {
    min-height: 520px;
  }

  .identity-lab__visual {
    width: min(60vw, 520px);
  }

  .identity-lab__content {
    width: min(720px, 100%);
    justify-self: end;
  }
}

@media (max-width: 760px) {
  .hero-lab {
    padding-top: 82px;
  }

  .hero-grid {
    background-size: 32px 32px;
  }

  .identity-lab {
    min-height: auto;
    gap: 0;
    padding-top: 10px;
  }

  .identity-lab__stage {
    min-height: clamp(390px, 52svh, 480px);
  }

  .identity-lab__visual {
    width: min(78vw, 350px);
  }

  .identity-lab .hero-word {
    font-size: clamp(5rem, 24vw, 8rem);
  }

  .identity-lab .hero-word.first {
    top: 7%;
  }

  .identity-lab .hero-word.second {
    bottom: 12%;
  }

  .identity-lab__hint {
    bottom: 3%;
  }

  .identity-lab__content {
    width: 100%;
    gap: 18px;
    padding: 18px 14px;
  }

  .identity-lab__content h1 {
    font-size: clamp(3rem, 14vw, 5rem);
  }

  .identity-lab__controls {
    grid-template-columns: 1fr;
  }

  .lab-tab {
    min-height: 52px;
    grid-template-columns: 28px 1fr;
    align-items: center;
  }

  .identity-lab__actions {
    width: 100%;
  }

  .identity-lab__actions .button {
    flex: 1 1 190px;
  }

  .lab-core strong {
    font-size: 0.7rem;
  }

  .hero-lab .hero-foot > span:last-child {
    display: none;
  }
}

@media (max-width: 380px) {
  .identity-lab__stage {
    min-height: 350px;
  }

  .identity-lab__visual {
    width: 82vw;
  }

  .identity-lab__content {
    padding: 15px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lab-orbit,
  .lab-pulse,
  .identity-lab__hint i::after {
    animation: none !important;
  }

  .identity-lab__visual {
    transform: none !important;
  }
}


/* ==================================================================
   V1.3 — Mobile refinement e leitura
   ================================================================== */

.contact-note {
  position: relative;
  z-index: 2;
  margin-top: 0;
  margin-bottom: 18px;
  color: var(--muted);
  font: 500 8px/1.6 ui-monospace, monospace;
  letter-spacing: 0.045em;
}

.identity-lab__content h1,
.identity-lab__content > p,
.skills li,
.skills li em,
.process li p,
.principles article p,
.contact-main p,
.contact-data strong,
.contact-grid strong {
  text-wrap: pretty;
}

.contact-data > a,
.footer nav a,
.identity-lab__actions a,
.lab-tab {
  touch-action: manipulation;
}

@media (max-width: 760px) {
  .hero-lab {
    padding-top: 78px;
  }

  .identity-lab {
    gap: 4px;
  }

  .identity-lab__stage {
    min-height: clamp(350px, 47svh, 430px);
  }

  .identity-lab__visual {
    width: min(72vw, 325px);
  }

  .identity-lab .hero-word {
    font-size: clamp(4.55rem, 20.8vw, 7.1rem);
    letter-spacing: -0.09em;
  }

  .identity-lab .hero-word.first {
    top: 8%;
    left: 0.02em;
  }

  .identity-lab .hero-word.second {
    right: 0.02em;
    bottom: 13%;
  }

  .identity-lab__hint {
    bottom: 1%;
    width: 100%;
    text-align: center;
  }

  .identity-lab__content {
    gap: 16px;
    padding: 17px 14px;
  }

  .identity-lab__content h1 {
    max-width: 11ch;
    font-size: clamp(2.85rem, 12.7vw, 4.6rem);
    line-height: 0.93;
    letter-spacing: -0.072em;
  }

  .identity-lab__content > p {
    max-width: 46ch;
    font-size: 12px;
    line-height: 1.68;
  }

  .identity-lab__actions .button {
    min-height: 52px;
  }

  .heading {
    padding-top: 70px;
  }

  .heading > p {
    font-size: 12px;
    line-height: 1.68;
  }

  .statement p {
    font-size: clamp(2.2rem, 9.8vw, 3.8rem);
    line-height: 1;
  }

  .cards article p {
    font-size: 12px;
    line-height: 1.65;
  }

  .skills article {
    gap: 22px;
    padding-block: 26px;
  }

  .skills li {
    min-height: 54px;
    gap: 12px;
    font-size: 12px;
    line-height: 1.4;
  }

  .skills li em {
    flex: 0 0 auto;
    font-size: 8px;
  }

  .process {
    gap: 26px;
    padding-top: 24px;
    padding-bottom: 72px;
  }

  .process-art {
    display: grid;
    justify-items: center;
    gap: 16px;
  }

  .process-orb {
    width: min(64vw, 275px);
  }

  .process-art > p {
    max-width: 42ch;
    margin: 0;
    font-size: 11px;
    line-height: 1.65;
    text-align: center;
  }

  .process li {
    grid-template-columns: 38px 1fr;
    padding: 18px 0 25px;
  }

  .process h3 {
    margin-bottom: 8px;
    font-size: clamp(2.55rem, 11.4vw, 4.3rem);
  }

  .process li p {
    font-size: 12px;
    line-height: 1.62;
  }

  .principles {
    padding-block: 66px;
  }

  .principles > p {
    max-width: 11ch;
    font-size: clamp(2.95rem, 12.5vw, 5.1rem);
    line-height: 0.92;
  }

  .principles article {
    min-height: 160px;
  }

  .principles h3 {
    margin-top: 48px;
  }

  .principles article p {
    font-size: 11px;
    line-height: 1.62;
  }

  .contact-main {
    min-height: 60vh;
    padding-block: 58px 44px;
  }

  .contact-main h2 {
    max-width: 10ch;
    font-size: clamp(3.25rem, 14.4vw, 5.65rem);
    line-height: 0.86;
    letter-spacing: -0.083em;
  }

  .contact-main p {
    max-width: 44ch;
    font-size: 12px;
    line-height: 1.7;
  }

  .contact-actions .button {
    min-height: 54px;
  }

  .contact-data > a {
    min-height: 92px;
  }

  .contact-data strong,
  .contact-grid strong {
    font-size: 11px;
    line-height: 1.55;
  }

  .contact-note {
    margin-bottom: 14px;
    font-size: 9px;
  }

  .footer {
    gap: 20px;
  }

  .footer span,
  .footer p,
  .footer nav a {
    font-size: 8px;
    line-height: 1.5;
  }
}

@media (max-width: 380px) {
  .identity-lab__stage {
    min-height: 330px;
  }

  .identity-lab__visual {
    width: 76vw;
  }

  .identity-lab .hero-word {
    font-size: clamp(4.1rem, 20vw, 6.4rem);
  }

  .identity-lab__content h1 {
    font-size: clamp(2.65rem, 12.3vw, 4rem);
  }

  .contact-main h2 {
    font-size: clamp(3rem, 13.7vw, 5rem);
  }
}