.hero{height:100svh;min-height:640px;display:block;color:#fff}
.hero:after,.hero.gradient-ready:after{display:none}
.hero header{position:absolute;top:20px;left:40px;right:20px;width:auto;padding:0;margin:0;height:40px}
.hero .logo{font-size:24px;letter-spacing:-1.2px}
.hero .mark{font-size:27px}
.hero nav{gap:24px;align-items:center;font-size:12px;letter-spacing:-.3px}
.hero nav a:last-child{background:#0c0c0c;padding:14px 22px;border-radius:6px}
.hero-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(720px,calc(100% - 80px));padding:0;margin:0;display:block}
.hero h1{font-size:96px;line-height:1;font-weight:500;letter-spacing:-.05em;width:100%;max-width:none;margin:0;text-shadow:none}
.hero h1 span{padding:0;white-space:nowrap}
.hero h1 span:first-child{text-align:left}
.hero h1 span:nth-child(2){padding:0;text-align:right}
.hero h1 span:nth-child(3){padding:0;text-align:center}
.hero-bottom{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);width:min(690px,calc(100% - 80px));padding:0;margin:0;border:0;display:flex;justify-content:space-between;gap:30px;color:#fff;text-transform:none;letter-spacing:-.05em}
.hero-bottom>div{display:flex;flex-direction:column;gap:7px}
.hero-bottom .detail-label{font-size:14px}
.hero-bottom .detail-value{font-size:16px;font-weight:600;text-transform:uppercase}
.intro{width:min(720px,calc(100% - 80px));padding:100px 0 25px;display:flex;flex-direction:column;align-items:flex-start;gap:25px}
.intro p{font-size:30px;line-height:1.3;letter-spacing:-.035em;max-width:none;color:var(--text);text-shadow:none}
.intro .pill{background:#141414;border:0;border-radius:6px;text-transform:uppercase;font-size:12px;padding:17px 22px;letter-spacing:-.02em}
.intro .pill:hover{background:#fff;color:#111}
@media(max-width:900px){.hero h1{font-size:clamp(54px,9vw,80px)}.hero-content{width:calc(100% - 100px)}}
@media(max-width:600px){.hero{min-height:620px}.hero header{top:20px;left:20px;right:20px}.hero .logo{font-size:21px}.hero .mark{font-size:23px}.hero nav{gap:16px;font-size:10px}.hero nav a:last-child{padding:12px}.hero-content{width:calc(100% - 40px);top:46%}.hero h1{font-size:clamp(44px,12.3vw,72px)}.hero-bottom{bottom:30px;width:calc(100% - 40px);gap:14px}.hero-bottom .detail-label{font-size:11px}.hero-bottom .detail-value{font-size:11px;line-height:1.3}.hero-bottom span:last-child{max-width:none;text-align:left}.intro{width:calc(100% - 40px);padding:65px 0 0;gap:22px}.intro p{font-size:24px;line-height:1.35}.intro .pill{margin-top:0}}

.product-identity{display:flex;align-items:flex-start;gap:20px}.app-icon{width:72px;height:72px;border-radius:16px;background:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 72px;overflow:hidden}.app-icon svg{width:43px;height:43px}.toci-icon{width:54px;height:auto;object-fit:contain;filter:invert(41%) sepia(17%) saturate(980%) hue-rotate(24deg) brightness(88%) contrast(86%)}.spotted-mark{font-family:Georgia,serif;font-size:48px;line-height:1;color:#455b2c;letter-spacing:-5px;margin-left:-4px}.spot-dot{color:#9fb94e}.product-name{min-width:0}.project h3{font-size:28px}.contact-link{display:inline-block;border-bottom:1px solid #777;padding-bottom:7px}.contact-link:hover,.footer-contact:hover{color:#ffb197}.footer-contact{color:var(--text)}.hero *{text-shadow:none!important}.projects{padding-top:90px}@media(max-width:700px){.product-identity{gap:16px}.app-icon{width:60px;height:60px;flex-basis:60px;border-radius:13px}.app-icon svg{width:36px;height:36px}.project h3{font-size:25px}.toci-icon{width:46px}.spotted-mark{font-size:41px}}

.project{grid-template-columns:1fr 1fr;gap:60px}.toci-icon{width:48px;height:48px;object-fit:contain;filter:none}@media(max-width:700px){.project{grid-template-columns:1fr;gap:20px}.project .details{grid-column:1}.toci-icon{width:42px;height:42px}}

.toci-icon{width:72px;height:72px}@media(max-width:700px){.toci-icon{width:60px;height:60px}}

.brand-icon{width:30px;height:30px;flex:0 0 30px}footer .brand-icon{width:25px;height:25px;flex-basis:25px}@media(max-width:600px){.brand-icon{width:26px;height:26px;flex-basis:26px}}
