@font-face{font-family:Inter;font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/inter-regular.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/inter-semibold.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/inter-bold.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:800;font-style:normal;font-display:swap;src:url(/fonts/inter-extrabold.woff2) format("woff2")}
:root{--g:#0B8F4D;--g2:#19B866;--gd:#066B39;--bg:#F4F6F5;--card:#fff;--line:#E3E8E5;--tx:#0E1913;--tx2:#56635C;--tx3:#6B7A72;--mint:#E7F6EE;--ink:#0E1913;--r:24px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--tx);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.5;font-size:16px}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
svg{flex-shrink:0}
:focus-visible{outline:3px solid var(--g2);outline-offset:3px;border-radius:12px}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:10px 16px;border-radius:10px;z-index:100;font-weight:700}
.skip:focus{left:12px}
.muted{color:var(--tx3)}.small{font-size:13px}.g{color:var(--g)}
.wrap{max-width:1312px;margin:0 auto;padding:0 32px}
.brand{font-weight:800;letter-spacing:.07em;line-height:1;display:inline-flex;align-items:baseline;color:var(--g);font-size:24px;white-space:nowrap}
.brand i{font-style:normal;letter-spacing:0;margin-left:.02em;color:var(--g2);font-size:.82em}
.logo{width:40px;height:40px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;background:var(--mint);color:var(--gd);font-size:13px;font-weight:600;white-space:nowrap}
.chip.gray{background:#EEF1EF;color:var(--tx2)}
.btn{display:inline-flex;align-items:center;gap:12px;min-height:54px;padding:0 26px;border-radius:999px;font-weight:700;font-size:16px;border:0;cursor:pointer;white-space:nowrap;transition:transform .15s,box-shadow .15s,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn small{display:block;font-size:11px;font-weight:600;opacity:.78;margin-bottom:2px;letter-spacing:.02em}
.btn span{line-height:1.15;text-align:left}
.btn-g{background:var(--g);color:#fff;box-shadow:0 14px 30px -12px rgba(11,143,77,.65)}.btn-g:hover{background:#09803F}
.btn-d{background:var(--ink);color:#fff;box-shadow:0 14px 30px -14px rgba(14,25,19,.7)}.btn-d:hover{background:#1c2a22}
.btn-o{background:#fff;color:var(--tx);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-sm{min-height:44px;padding:0 20px;font-size:14px}
.btn-lg{min-height:62px;padding:0 28px}
.ico{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.ico.soft{background:var(--mint);color:var(--g);width:50px;height:50px;border-radius:15px}
.ico.big{width:60px;height:60px;border-radius:18px}.ico.g{background:var(--g)}.ico.d{background:var(--ink)}.ico.gray{background:#9AA6A0}
.card{background:var(--card);border-radius:var(--r);box-shadow:0 0 0 1px var(--line)}
h1{font-size:clamp(38px,5vw,60px);line-height:1.05;letter-spacing:-.03em;font-weight:800;margin-top:22px}
h2{font-size:clamp(28px,3.2vw,38px);letter-spacing:-.02em;font-weight:800;line-height:1.15}
h3{font-size:18px;font-weight:700}
.chip+h2{margin-top:16px}
.sub{color:var(--tx2);font-size:17px;line-height:1.55;margin-top:12px;max-width:660px}
.lead{color:var(--tx2);font-size:clamp(17px,1.6vw,19px);line-height:1.55;margin-top:16px;max-width:560px}
/* nav */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;height:76px;padding:0 max(32px,calc((100% - 1312px)/2 + 32px));background:rgba(244,246,245,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}
.nav-brand{display:flex;align-items:center;gap:14px}
.nav-links{display:flex;gap:30px;font-weight:600;font-size:15px;color:var(--tx2)}
.nav-links a:hover{color:var(--g)}
.nav-cta{display:flex;gap:10px}
/* hero */
.hero{max-width:1312px;margin:0 auto;padding:36px 32px 96px;display:grid;grid-template-columns:5.2fr 5.8fr;gap:48px;align-items:center}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.web-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-weight:600;color:var(--tx2);font-size:15px}
.web-link:hover{color:var(--g)}
.platform-note{margin-top:14px;padding:12px 16px;border-radius:14px;background:var(--mint);color:var(--gd);font-weight:600;font-size:14px}
.meta{display:flex;gap:22px;flex-wrap:wrap;color:var(--tx2);font-size:14px;margin-top:22px}
.meta li{display:inline-flex;align-items:center;gap:8px}
.hero .small{margin-top:14px}
.hero-visual{position:relative;min-height:560px}
.win{border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 40px 90px -30px rgba(8,60,35,.45),0 0 0 1px rgba(0,0,0,.06)}
.win-bar{height:36px;background:#F1F4F2;display:flex;align-items:center;gap:8px;padding:0 14px;font-size:12px;color:var(--tx3)}
.win-bar b{width:11px;height:11px;border-radius:50%;background:#D5DBD8;display:block}
.win-bar span{margin-left:10px}
.hero-visual .win{position:absolute;left:0;top:28px;width:min(660px,92%)}
.phone{position:absolute;right:0;top:140px;width:232px;border-radius:38px;padding:9px;background:var(--ink);box-shadow:0 30px 70px -24px rgba(8,60,35,.55)}
.phone img{border-radius:30px;width:100%}
/* strip */
.strip{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip ul{max-width:1312px;margin:0 auto;padding:30px 32px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.strip li{display:flex;gap:16px;align-items:center}
.strip b{display:block;font-size:17px}.strip span:not(.ico){display:block;color:var(--tx2);font-size:14px;margin-top:2px}
/* sections */
.sec{padding:88px 0}.sec.alt{background:#fff}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.feat{padding:26px}.feat h3{margin-top:18px}.feat p{color:var(--tx2);font-size:14px;line-height:1.5;margin-top:6px}
.grid4.tight{margin-top:30px}
.row{display:flex;align-items:center;gap:14px;font-weight:600;font-size:17px}
.devices{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:40px}
.dev{padding:34px;display:flex;flex-direction:column;gap:20px}
.dev h3{font-size:24px;font-weight:800}.dev p{color:var(--tx2);font-size:15px;line-height:1.55}
.dev-head{display:flex;align-items:center;gap:16px}.dev-head p{font-size:14px;margin-top:2px}
.ml{margin-left:auto}
.dev-act{display:flex;align-items:center;gap:18px}
.dev-android{flex-direction:row;gap:26px;align-items:center}.dev-body{flex:1;display:flex;flex-direction:column;gap:20px}
.qr{text-align:center;flex-shrink:0}
.qr-box{width:150px;height:150px;padding:12px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.qr-box svg{width:100%;height:100%;display:block}
.qr figcaption{font-size:12px;color:var(--tx3);margin-top:10px;font-weight:600;max-width:150px}
.row-dev{flex-direction:row;align-items:center;gap:16px;padding:26px 30px}
.row-dev h3{font-size:19px;font-weight:700}.row-dev p{font-size:14px;margin-top:2px}
.soon{opacity:.85}.arrow{color:var(--g)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:44px}
.gallery img{width:100%;border-radius:26px;box-shadow:0 24px 50px -24px rgba(8,60,35,.5),0 0 0 1px rgba(0,0,0,.05)}
.alt .small{margin-top:26px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.steps li{padding:28px}.steps h3{font-size:19px;margin-top:18px}.steps p{color:var(--tx2);font-size:15px;line-height:1.55;margin-top:8px}
.step-top{display:flex;justify-content:space-between;align-items:center;color:var(--g)}
.num{width:36px;height:36px;border-radius:50%;background:var(--g);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
.faqs{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px;align-items:start}
.faq{padding:0;overflow:hidden}
.faq summary{display:flex;align-items:center;gap:12px;padding:24px 26px;cursor:pointer;font-weight:700;font-size:17px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg:first-child{color:var(--g)}.faq summary span{flex:1}.faq summary svg:last-child{color:var(--tx3);transition:transform .2s}
.faq[open] summary svg:last-child{transform:rotate(180deg)}
.faq p{padding:0 26px 24px 60px;color:var(--tx2);font-size:15px;line-height:1.6}
/* footer */
.foot{background:#fff;border-top:1px solid var(--line);padding:48px 0 36px;color:var(--tx3);font-size:14px}
.foot-in{display:grid;grid-template-columns:1fr auto;gap:30px}
.foot-brand{display:flex;align-items:center;gap:14px}.foot-brand p{margin-top:8px}
.foot-cols{display:flex;gap:64px}.foot-cols div{display:grid;gap:10px;align-content:start}
.foot-cols b{color:var(--tx)}.foot-cols a:hover{color:var(--g)}
.copy{grid-column:1/-1;margin-top:6px;padding-top:22px;border-top:1px solid var(--line)}
/* adaptiv */
@media (max-width:1100px){
 .hero{grid-template-columns:1fr;gap:32px;padding-bottom:64px}
 .hero-visual{min-height:0;display:grid;justify-items:center;padding-bottom:0}
 .hero-visual .win{position:relative;top:0;width:100%}
 .phone{position:relative;right:auto;top:auto;margin-top:-90px;margin-left:auto;margin-right:6%;width:200px}
 .nav-links{display:none}
 .grid4{grid-template-columns:repeat(2,1fr)}
 .strip ul{grid-template-columns:repeat(2,1fr)}
 .gallery{grid-template-columns:repeat(3,1fr)}
 .devices,.faqs{grid-template-columns:1fr}
 .steps{grid-template-columns:1fr}
}
@media (max-width:700px){
 .wrap{padding:0 20px}
 .nav{padding:0 20px;height:66px}.nav-cta .btn-o{display:none}.nav-brand .chip{display:none}
 .hero{padding:24px 20px 48px}
 .cta .btn{width:100%;justify-content:center}
 .sec{padding:60px 0}
 .grid4{grid-template-columns:1fr}
 .strip ul{grid-template-columns:1fr;padding:24px 20px}
 .gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:36px -20px 0;padding:0 20px 12px}
 .gallery li{flex:0 0 66%;scroll-snap-align:start}
 .dev{padding:24px}.dev-android{flex-direction:column;align-items:flex-start}.qr{align-self:center}
 .dev-act{flex-wrap:wrap}
 .sec-head{flex-direction:column;align-items:flex-start;gap:20px}
 .faq summary{padding:20px}.faq p{padding:0 20px 20px 20px}
 .foot-in{grid-template-columns:1fr}.foot-cols{gap:40px}
 .phone{width:150px;margin-top:-70px}
 .btn-lg{min-height:58px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}