:root{color-scheme:dark;--bg:#080f14;--text:#eef4f6;--muted:#a0afb8;--line:#ffffff18}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 0,#18303a66,transparent 60%),var(--bg);color:var(--text);font-family:Inter,"Segoe UI",Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}::selection{background:#19b7c5;color:#080f14}
.shell{max-width:1440px;margin:auto;padding:0 48px}.top{display:flex;align-items:center;justify-content:space-between;padding:27px 0;border-bottom:1px solid var(--line);gap:20px}.brand{font-size:19px;font-weight:650;letter-spacing:.2em}.top-note{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.17em}.motion-toggle{color:#c4d0d6;border:1px solid #ffffff26;background:transparent;padding:9px 13px;border-radius:30px;font-size:12px;cursor:pointer}.motion-toggle:hover{border-color:#ffffff66}a:focus-visible,button:focus-visible{outline:2px solid #fff;outline-offset:5px}
.intro{text-align:center;padding:57px 0 40px}.eyebrow{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:#95b1bc;margin:0 0 20px}.intro h1{font-size:clamp(35px,4.6vw,66px);font-weight:450;letter-spacing:-.045em;line-height:1.08;margin:0}.intro h1 span{display:block;color:#fff;font-size:1.22em;letter-spacing:.015em;margin-top:4px}.intro p:last-child{font-size:16px;color:var(--muted);margin:23px 0 0;letter-spacing:.025em}
.people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;padding-bottom:40px}.person{--accent:#dfb778;--rgb:223,183,120;position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#101a21;transition:transform .4s,border-color .4s,box-shadow .4s}.person.water{--accent:#53d9da;--rgb:83,217,218}.person.digital{--accent:#b4a0ff;--rgb:180,160,255}.person:hover,.person:focus-visible{transform:translateY(-7px);border-color:rgba(var(--rgb),.55);box-shadow:0 20px 55px #0005}.visual{height:310px;position:relative;isolation:isolate;overflow:hidden;background:#16222b}.visual:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#101a21 0%,transparent 42%,#080f1420);pointer-events:none;z-index:2}.portrait{width:100%;height:100%;object-fit:cover;object-position:center 25%;filter:saturate(.45);transition:transform .8s,filter .8s}.person:hover .portrait,.person:focus-visible .portrait{transform:scale(1.045);filter:saturate(.8)}.senior .portrait{object-position:center 30%}.water .portrait{object-position:center 22%}.digital .portrait{object-position:center top}.number{position:absolute;left:22px;top:18px;font-size:13px;letter-spacing:.15em;z-index:4;color:#fff;background:#080f1480;padding:8px 10px;border:1px solid #ffffff26;border-radius:5px}.generation{position:absolute;right:18px;top:22px;font-size:10px;letter-spacing:.15em;text-transform:uppercase;z-index:4;background:#080f14b0;padding:8px 10px;border-radius:20px;color:#e6eef2}.art{position:absolute;bottom:18px;right:12px;width:150px;height:170px;z-index:3;color:var(--accent);filter:drop-shadow(0 0 9px rgba(var(--rgb),.4));opacity:.8;transition:opacity .4s}.person:hover .art{opacity:1}.art svg{width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.art:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse,rgba(8,15,20,.88),transparent 72%);z-index:-1}.draw{stroke-dasharray:650;stroke-dashoffset:650;animation:draw 2.8s .4s ease forwards}.strings{transform-origin:75px 95px;animation:strings 3s ease-in-out infinite}.wave{animation:wave 3s ease-out infinite;transform-origin:75px 100px}.wave.second{animation-delay:1.5s}.flow{stroke-dasharray:6 12;animation:flow 4s linear infinite}.microbe{animation:float 5s ease-in-out infinite}.microbe.second{animation-delay:-2s}.node{fill:currentColor;stroke:none;animation:pulse 3s ease-in-out infinite}.node.delay{animation-delay:-1.4s}.code{stroke-dasharray:45;animation:code 4s ease-in-out infinite}.person:hover .flow{animation-duration:1.5s}.person:hover .strings{animation-duration:.4s}
.copy{padding:6px 25px 25px;display:flex;flex-direction:column;flex:1;position:relative;z-index:4}.field{color:var(--accent);font-size:10px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 15px;line-height:1.6}.copy h2{font-size:25px;letter-spacing:-.025em;line-height:1.2;font-weight:500;margin:0 0 13px}.copy h2 span{display:block}.description{color:#aab8c1;font-size:14px;line-height:1.65;margin:0 0 25px;flex:1}.cta{background:var(--accent);color:#071015;display:flex;align-items:center;justify-content:space-between;gap:15px;border-radius:5px;padding:15px 17px;font-size:13px;font-weight:650}.arrow{font-size:21px;line-height:1;transition:transform .3s}.person:hover .arrow{transform:translateX(4px)}.foot{border-top:1px solid var(--line);padding:22px 0 28px;display:flex;justify-content:space-between;gap:20px;color:#8397a3;font-size:11px;letter-spacing:.06em}.foot p{margin:0}.foot span{color:#c1d0d7}
@keyframes draw{to{stroke-dashoffset:0}}@keyframes strings{50%{transform:translateX(.8px)}}@keyframes wave{0%{opacity:0;transform:scale(.8)}30%{opacity:.7}100%{opacity:0;transform:scale(1.15)}}@keyframes flow{to{stroke-dashoffset:-72}}@keyframes float{50%{transform:translate(3px,-7px) rotate(4deg)}}@keyframes pulse{50%{opacity:.35}}@keyframes code{50%{stroke-dashoffset:30;opacity:.5}}
body.paused .art *,body.paused .art{animation-play-state:paused!important}body.paused .draw{stroke-dashoffset:0}
@media(min-width:1550px){.intro{padding-top:75px}.visual{height:370px}}
@media(max-width:1000px){.shell{padding:0 25px}.people{gap:14px}.copy{padding:6px 18px 20px}.copy h2{font-size:21px}.visual{height:270px}.art{width:125px;height:145px}.top-note{display:none}}
@media(max-width:700px){.shell{padding:0 20px}.top{padding:21px 0}.brand{font-size:16px}.intro{padding:42px 0 31px}.intro h1{font-size:36px}.intro p:last-child{font-size:14px}.people{grid-template-columns:1fr;gap:24px;max-width:450px;margin:auto}.visual{height:350px}.copy{padding:8px 24px 24px}.copy h2{font-size:26px}.art{width:155px;height:175px}.description{margin-bottom:22px}.foot{flex-direction:column;gap:9px}.person:hover{transform:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.draw{stroke-dashoffset:0}.wave{opacity:.3}.person:hover{transform:none}}