/* EUKLI / Motion Direction 05 — confident editorial typography, not animated scrolling */
:root{--ink:#101922;--navy:#153657;--blue:#214d78;--muted:#586775;--line:#e2e7eb;--soft:#f7f8fa}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{background:#fff}
.site-header{background:rgba(255,255,255,.975);border-bottom:1px solid #e7ebef;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.site-header:after{content:"";height:2px;background:var(--navy);position:absolute;left:0;right:0;bottom:-1px;transform:scaleX(var(--m-read-progress,0));transform-origin:left center;pointer-events:none}
.site-header .brand img{width:126px}
.main-nav a{font-size:13px;font-weight:750;color:#283543}
.main-nav a:hover{color:var(--blue)}
.language-switch{border:1px solid #d9e1e7;border-radius:6px;font-weight:800}
h1,h2,h3{font-weight:810;letter-spacing:-.078em;color:#101922}
.home-hero{background:#fff}
.hero-grid{min-height:clamp(690px,83svh,930px);grid-template-columns:1.14fr .86fr;gap:24px}
.hero-text{padding-block:75px 105px}
.hero-text .eyebrow{font-size:11px;letter-spacing:.1em;font-weight:800;color:#526b80}
.hero-text h1{font-size:clamp(54px,5.65vw,88px);font-weight:840;letter-spacing:-.087em;line-height:1.15;margin-top:26px;margin-bottom:31px;max-width:740px}
.hero-sub{font-size:clamp(15px,1.26vw,17px);line-height:1.95;color:#546373;max-width:525px}
.hero-demo{overflow:hidden;contain:paint}
.hero-demo::before{background:#f6f8fa;border-color:#e9edf1;box-shadow:none}
.hero-demo::after{content:"EUKLI";position:absolute;z-index:0;bottom:9%;left:0;font:900 clamp(90px,11vw,165px)/1 Arial,sans-serif;letter-spacing:-.075em;color:transparent;-webkit-text-stroke:1px #e1e6eb;pointer-events:none}
.hero-demo-label{color:#61788b;font-weight:800;z-index:4}
.hero-phone-front,.hero-phone-back{will-change:auto;transition:transform .12s linear;filter:drop-shadow(0 18px 28px rgba(16,32,54,.10))}
.hero-phone-front{transform:translate3d(0,var(--m-hero-front,0px),0) rotate(calc(-8deg + var(--m-hero-turn,0deg))) scale(.86)}
.hero-phone-back{transform:translate3d(0,var(--m-hero-back,0px),0) rotate(calc(9deg - var(--m-hero-turn,0deg))) scale(.76)}
.hero-demo:hover .hero-phone-front{transform:translate3d(0,calc(var(--m-hero-front,0px) - 7px),0) rotate(calc(-7deg + var(--m-hero-turn,0deg))) scale(.86)}
.hero-demo:hover .hero-phone-back{transform:translate3d(0,var(--m-hero-back,0px),0) rotate(calc(8deg - var(--m-hero-turn,0deg))) scale(.76)}
.hero-caption{color:#667787;font-weight:800}
.home-intro{padding-block:170px 185px}
.home-intro h2{font-size:clamp(45px,4.9vw,72px);font-weight:830;letter-spacing:-.087em;line-height:1.26}
.home-intro h2::after{content:"";display:block;width:94px;height:5px;background:#173c67;margin-top:40px;transform:scaleX(var(--m-intro-line,0));transform-origin:left;transition:transform .2s linear}
.home-intro p{font-size:16px;line-height:1.95}
.section-number{font-weight:800;letter-spacing:.14em;color:#647b90}
.section-title h2{font-size:clamp(48px,5.4vw,82px);line-height:1.1;font-weight:840;letter-spacing:-.085em}
.product-row{min-height:640px}
.product-row-copy{padding-top:78px;padding-bottom:78px}
.product-row h3{font-size:clamp(45px,4.6vw,70px);font-weight:840;line-height:1.22;letter-spacing:-.085em}
.product-row p{font-size:16px}
.product-row-visual,.product-row-flip .product-row-visual{background:#fafbfc}
.product-row-visual::after{content:"01";position:absolute;right:7%;bottom:2%;font:900 clamp(100px,12vw,190px)/1 Arial,sans-serif;letter-spacing:-.09em;color:#edf0f3;pointer-events:none}
.product-row-flip .product-row-visual::after{content:"02";left:8%;right:auto}
.product-art-orbit{border-color:#e9edf1;box-shadow:0 0 0 48px #f7f9fa,0 0 0 49px #eaedf0}
.product-row-visual .phone,.product-row:hover .product-row-visual .phone{transform:translate3d(0,var(--m-card-y,0px),0) rotate(var(--m-card-rotate,-3deg)) scale(var(--m-card-scale,.79));transition:transform .14s linear}
.product-row-flip .product-row-visual .phone{--m-card-rotate:3deg}
.product-row:hover .product-row-visual{background:#f8fafc}
.product-row .text-link{font-weight:800}
.product-row .text-link:last-child{position:relative}
.product-row .text-link:last-child::after{content:"";height:2px;width:100%;position:absolute;bottom:-7px;left:0;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.75,.2,1)}
.product-row:hover .text-link:last-child::after{transform:scaleX(1)}
.mini-logo-row{font-weight:850}
.launch-line{font-weight:800}
.home-about{background:#f7f8fa;padding-block:165px}
.about-grid h2{font-size:clamp(49px,5vw,76px);font-weight:850;line-height:1.21}
.about-rule{font-weight:750}
.home-contact h2{font-size:clamp(50px,5.5vw,82px);font-weight:850;line-height:1.15}
.contact-link{font-weight:750;transition:gap .3s ease,color .3s ease}
.contact-link:hover{gap:40px}
.detail-hero{background:#fff}
.detail-hero h1{font-size:clamp(54px,5.9vw,86px);font-weight:850;line-height:1.14;letter-spacing:-.089em}
.detail-lead{font-size:17px;color:#536373}
.detail-hero-art{background:#fafbfc}
.detail-hero-phone{transform:translate3d(0,var(--m-detail-phone,0px),0) rotate(var(--m-detail-rotate,-4deg))}
.detail-intro{background:#fff;border-block:1px solid #eff0f2}
.detail-intro h2{font-size:clamp(40px,4.5vw,67px);font-weight:820;line-height:1.3}
.features-heading h2{font-size:clamp(48px,5vw,73px);font-weight:840;line-height:1.17}
.feature-copy h3{font-size:clamp(34px,3.3vw,49px);font-weight:840;line-height:1.24;letter-spacing:-.075em}
.feature-copy{border-left:3px solid transparent;padding-left:25px;opacity:.63;transition:opacity .42s ease,border-color .42s ease,transform .42s ease}
.feature-copy.is-current{opacity:1;border-left-color:var(--navy);transform:translate3d(4px,0,0)}
.feature-copy.is-current h3{color:#112c49}
.feature-stage{border:1px solid #e9eef2;border-radius:18px;background:#fafbfc}
.feature-stage::before{content:"";position:absolute;inset:35px;border:1px solid #e8edf2;border-radius:50%;pointer-events:none}
.feature-preview{opacity:0;transform:translate3d(0,25px,0) scale(.965);transition:opacity .55s cubic-bezier(.22,.8,.22,1),transform .62s cubic-bezier(.22,.8,.22,1)}
.feature-preview.active{opacity:1;transform:translate3d(0,var(--m-preview-y,0px),0) scale(1)}
.feature-preview .phone{filter:drop-shadow(0 16px 21px rgba(16,32,54,.09))}
.detail-outro h2{font-size:clamp(46px,5vw,74px);font-weight:840}
.mobile-preview{background:#fafbfc;border:1px solid #edf0f3;border-radius:12px}
.mobile-feature-description h3{font-weight:840}
html.motion-v5-ready [data-reveal]:not(.is-visible){opacity:.73;transform:translate3d(0,22px,0);transition:opacity .72s cubic-bezier(.22,.8,.22,1),transform .8s cubic-bezier(.22,.8,.22,1)}
html.motion-v5-ready [data-reveal].is-visible{opacity:1;transform:translate3d(0,0,0);transition:opacity .72s cubic-bezier(.22,.8,.22,1),transform .8s cubic-bezier(.22,.8,.22,1);transition-delay:var(--m-stagger,0ms)}
html.motion-v5-ready .product-row .product-row-visual.is-visible{transform:translate3d(0,0,0)}
@media(min-width:1001px){
 .hero-demo,.detail-hero-art,.product-row-visual{backface-visibility:hidden}
}
@media(max-width:1100px){
 .hero-grid{grid-template-columns:1.06fr .94fr;gap:17px}
 .hero-text h1{font-size:clamp(49px,5.1vw,72px)}
 .product-row h3{font-size:clamp(41px,4.3vw,58px)}
 .hero-demo::after{font-size:100px}
 .detail-hero h1{font-size:clamp(48px,5.3vw,72px)}
}
@media(max-width:900px){
 .feature-copy{opacity:1}
 .feature-stage{position:relative}
 .mobile-preview{overflow:hidden}
 .mobile-preview .phone{transform:translate3d(0,var(--m-mobile-y,0px),0) scale(.66);transition:transform .12s linear}
}
@media(max-width:760px){
 .home-hero .hero-grid{min-height:unset;gap:0}
 .hero-text{padding-block:75px 38px}
 .hero-text h1{font-size:clamp(43px,10.8vw,68px);line-height:1.19;margin:20px 0 27px}
 .hero-sub{font-size:14px;line-height:1.8}
 .hero-demo{height:410px}
 .hero-demo::after{font-size:105px;bottom:13%}
 .hero-phone-front{transform:translate3d(0,var(--m-hero-front,0px),0) rotate(calc(-8deg + var(--m-hero-turn,0deg))) scale(.64)}
 .hero-phone-back{transform:translate3d(0,var(--m-hero-back,0px),0) rotate(calc(9deg - var(--m-hero-turn,0deg))) scale(.61)}
 .hero-demo:hover .hero-phone-front{transform:translate3d(0,var(--m-hero-front,0px),0) rotate(calc(-8deg + var(--m-hero-turn,0deg))) scale(.64)}
 .hero-demo:hover .hero-phone-back{transform:translate3d(0,var(--m-hero-back,0px),0) rotate(calc(9deg - var(--m-hero-turn,0deg))) scale(.61)}
 .home-intro{padding-block:100px 112px;display:block}
 .home-intro h2{font-size:clamp(39px,9vw,60px);margin-top:25px}
 .home-intro h2::after{margin-top:29px}
 .section-title h2{font-size:clamp(44px,10vw,64px)}
 .product-row{min-height:unset}
 .product-row-copy{padding-block:50px 42px}
 .product-row h3{font-size:clamp(42px,9.2vw,60px)}
 .product-row-visual .phone,.product-row:hover .product-row-visual .phone{transform:translate3d(0,var(--m-card-y,0px),0) rotate(var(--m-card-rotate,-3deg)) scale(var(--m-card-scale,.68))}
 .product-row-visual::after{font-size:140px}
 .about-grid h2{font-size:clamp(43px,9.1vw,65px)}
 .home-about{padding-block:105px}
 .home-contact h2{font-size:clamp(44px,9.8vw,65px)}
 .detail-hero h1{font-size:clamp(43px,10vw,68px)}
 .detail-intro h2{font-size:clamp(35px,8.4vw,54px)}
 .features-heading h2{font-size:clamp(43px,9.1vw,64px)}
 .detail-hero-phone{transform:translate3d(0,var(--m-detail-phone,0px),0) rotate(var(--m-detail-rotate,-4deg)) scale(.62)}
 .mobile-preview .phone{transform:translate3d(0,var(--m-mobile-y,0px),0) scale(.66)}
}
@media(max-width:390px){
 .hero-text h1{font-size:clamp(39px,10.3vw,51px)}
 .hero-demo::after{font-size:82px}
 .product-row h3{font-size:39px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .site-header:after{transition:none}
 .hero-phone-front,.hero-phone-back,.detail-hero-phone,.product-row-visual .phone,.product-row:hover .product-row-visual .phone,.mobile-preview .phone,.feature-preview{transition:none!important;transform:none!important}
 .hero-phone-front{transform:rotate(-8deg) scale(.86)!important}
 .hero-phone-back{transform:rotate(9deg) scale(.76)!important}
 .product-row-visual .phone{transform:rotate(-3deg) scale(.79)!important}
 .detail-hero-phone{transform:rotate(-4deg) scale(.72)!important}
 .mobile-preview .phone{transform:scale(.66)!important}
 html.motion-v5-ready [data-reveal],html.motion-v5-ready [data-reveal].is-visible{opacity:1!important;transform:none!important;transition:none!important}
 .home-intro h2::after{transform:scaleX(1)}
}