.living-hero,.hero-nav{display:none}
body[data-screen=home]{background:#020d07;color:#f0f4f0}
body[data-screen=home]:before,body[data-screen=home] .hero-media,body[data-screen=home] #shell,body[data-screen=home] footer{display:none!important}
body[data-screen=home] .landing-hero{min-height:100svh;background:radial-gradient(ellipse at 72% 36%,#0d281466,transparent 65%),#020b06}
body[data-screen=home] header{position:relative;inset:auto;width:100%;max-width:1600px;height:110px;padding:0 4.8%;margin:auto;background:none;z-index:2}
body[data-screen=home] header>nav:not(.hero-nav),body[data-screen=home] #login{display:none}
body[data-screen=home] .brand img{display:none}
body[data-screen=home] .brand:before{content:'';display:inline-block;width:31px;height:35px;vertical-align:middle;border:1px solid #a6efbc;border-radius:43% 57% 48% 52%;box-shadow:0 0 12px #5fc581,inset 0 0 7px #63cc87;transform:rotate(20deg);margin-right:27px}
body[data-screen=home] .brand:after{content:'KPALIVE';color:#eff4ee;font:500 20px 'DM Sans',Arial,sans-serif;letter-spacing:10px}
body[data-screen=home] .hero-nav{display:flex;gap:42px;align-items:center}
body[data-screen=home] .hero-nav a{color:#d2dcd3;font-size:15px;text-decoration:none}
body[data-screen=home] .hero-nav a:hover{color:#aaffcd}
body[data-screen=home] .living-hero{display:grid;grid-template-columns:44% 56%;max-width:1600px;margin:auto;padding:0 4.8% 30px;align-items:center}
.hero-copy{position:relative;z-index:1;padding:60px 0 90px}
.hero-copy h1{font-family:'DM Sans',Arial,sans-serif;font-size:clamp(45px,5.15vw,80px);line-height:1.04;letter-spacing:-2.9px;font-weight:400;margin:0 -55px 34px 0}
.hero-copy h1 em{color:#adf7d7;font-style:normal}
.hero-copy>p{font-size:clamp(17px,1.43vw,22px);line-height:1.5;color:#d2dbd4;margin:36px 0 42px;max-width:580px}
.hero-start{border:0;border-radius:50px;padding:20px 36px;background:#aaffce;color:#061b0d;font-size:22px;font-weight:600;display:flex;align-items:center;gap:18px;min-height:68px;transition:box-shadow .25s,transform .25s}
.hero-start span{font-size:30px;line-height:1}
.hero-start:hover{box-shadow:0 0 35px #90ffc633;transform:translateY(-2px)}
.hero-copy small{display:block;margin-top:20px;font-size:15px;line-height:1.5;color:#c6d2c9}
.hero-being{position:relative;width:100%;align-self:center;margin:0;min-width:0}
.hero-ring{width:117%;margin:-60px -10% -20px -7%;aspect-ratio:1;position:relative;isolation:isolate}
.hero-ring:before{content:'';position:absolute;inset:0;background:url('hero-reference.png') no-repeat 100% 22%;background-size:192% auto;mask-image:radial-gradient(ellipse 49% 48% at 51% 49%,#000 64%,transparent 100%),linear-gradient(#000 0 84%,transparent 96%);mask-composite:intersect;animation:hero-breathe 8s ease-in-out infinite;transition:filter .5s}
.hero-ring:hover:before,.engaged .hero-ring:before{filter:brightness(1.18)}
.hero-being>p{position:relative;text-align:center;margin:0 0 36px;color:#d8e6db;font-size:16px;line-height:1.5}
.hero-being i{display:inline-block;width:10px;height:10px;background:#a6ffbf;border-radius:50%;box-shadow:0 0 16px #8affab;margin-right:15px}
.hero-process{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.15fr 1.2fr;gap:0;border-top:1px solid #29432d;padding-top:26px}
.hero-process>div{display:flex;gap:42px;align-items:center;padding:12px 0;font-size:18px;color:#d1dcd3}
.hero-process>div+div{border-left:1px solid #29432d;padding-left:20%}
.hero-process b{font-weight:500;color:#abf6d0;font-size:20px}
@keyframes hero-breathe{0%,100%{transform:scale(.987)}50%{transform:scale(1.02)}}
@media(max-width:1000px){.hero-copy h1{font-size:54px}.hero-copy>p{font-size:17px}.hero-process>div{gap:20px;font-size:15px}.hero-process>div+div{padding-left:12%}.hero-start{font-size:18px;padding:18px 25px}}
@media(max-width:760px){
body[data-screen=home] header{height:78px;padding:0 23px}
body[data-screen=home] .brand:before{width:21px;height:24px;margin-right:15px}
body[data-screen=home] .brand:after{font-size:14px;letter-spacing:5px}
body[data-screen=home] .hero-nav{gap:0}
body[data-screen=home] .hero-nav a{font-size:12px}
body[data-screen=home] .hero-nav a:first-child{display:none}
body[data-screen=home] .living-hero{display:flex;flex-direction:column;padding:20px 23px 32px;position:relative}
.hero-copy{display:contents}
.hero-copy h1{order:0;font-size:clamp(36px,9.7vw,58px);line-height:1.08;letter-spacing:-1.7px;margin:0;width:100%;text-align:center}
.hero-being{order:1;max-width:360px;margin:0 auto}
.hero-ring{width:100%;margin:-4px 0 -16px;aspect-ratio:1.1}
.hero-being>p{font-size:11px;margin:0 0 18px}
.hero-being i{width:6px;height:6px;margin-right:7px}
.hero-copy>p{order:2;font-size:15px;text-align:center;line-height:1.55;margin:0 0 24px;max-width:440px}
.hero-start{order:3;justify-content:center;width:100%;max-width:400px;min-height:58px;padding:15px 20px;font-size:18px}
.hero-copy small{order:4;text-align:center;font-size:11px;margin:14px 0 32px}
.hero-process{order:5;width:100%;grid-template-columns:1fr;gap:14px;padding-top:24px}
.hero-process>div,.hero-process>div+div{padding:0;border:0;gap:22px;font-size:14px}
.hero-process b{font-size:16px}
}
@media(prefers-reduced-motion:reduce){.hero-ring:before{animation:none}.hero-start{transition:none}}
body[data-screen=home] .landing-hero{background:radial-gradient(ellipse at 72% 36%,#0d281466,transparent 65%),#020b06!important}
body[data-screen=home] header{position:relative!important;inset:auto!important;height:110px!important}
body[data-screen=home] .hero-copy h1{font-size:clamp(45px,5.15vw,80px)!important;line-height:1.04!important;letter-spacing:-2.9px!important;font-weight:400!important}
body[data-screen=home] .hero-copy h1 em{color:#adf7d7!important}
body[data-screen=home] .hero-nav button{border:0;padding:0;background:none;color:#d2dcd3;font:inherit;font-size:15px;cursor:pointer}
@media(max-width:760px){body[data-screen=home] header{height:78px!important}body[data-screen=home] .hero-copy h1{font-size:clamp(36px,9.7vw,58px)!important;line-height:1.08!important;letter-spacing:-1.7px!important}body[data-screen=home] .hero-nav button{font-size:12px}}
@media(min-width:761px){.hero-ring{width:105%;margin:-40px -3% -12px -2%}.hero-copy{padding:35px 0 65px}}