:root{
  --ink:#083b29;--deep:#062d20;--leaf:#128b39;--lime:#bdfa59;
  --soft:#e9f7dc;--paper:#f7fbf1;--muted:#597063;--line:#dcebd5;
}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;min-width:320px;background:radial-gradient(ellipse 360px 360px at 84% 41%,#d4f8af 0,transparent 95%),var(--paper);color:var(--ink);font-family:'DM Sans',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
a:focus-visible{outline:3px solid var(--leaf);outline-offset:4px}
.defs{position:absolute;width:0;height:0;overflow:hidden}
svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.site{min-height:100svh;display:flex;flex-direction:column;overflow:hidden}
.wrap{width:min(1140px,calc(100% - 80px));margin-inline:auto}
.header{display:flex;align-items:center;justify-content:space-between;padding:24px 0 14px;gap:20px;position:relative;z-index:3}
.brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;flex:none;min-width:0}
.brand-logo{display:block;width:184px;height:auto;flex:none}
.brand-beta{display:inline-block;font:800 12px/1 'Baloo 2',system-ui,sans-serif;letter-spacing:.045em;color:#188e42;white-space:nowrap;transform:translateY(5px)}
.header-right{display:flex;align-items:center;gap:14px}
.language-picker{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 11px;max-width:170px;
 border-radius:13px;border:1px solid #c7e1c6;background:#ffffffdd;color:var(--ink);cursor:pointer;position:relative;flex:none}
.language-picker svg{width:17px;height:17px;stroke-width:1.9;color:#257e49}
.language-picker select{font:800 12px/1 'DM Sans',system-ui,sans-serif;cursor:pointer;color:inherit;
 border:0;background:transparent;outline:none;min-width:0;max-width:125px}
.language-picker:focus-within{outline:3px solid #76c84d;outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden;white-space:nowrap}

.header-link{display:inline-flex;gap:8px;align-items:center;min-height:42px;border:1px solid #c7e1c6;border-radius:999px;background:#ffffffdd;text-decoration:none;padding:9px 17px;font-size:12px;font-weight:900;white-space:nowrap;transition:background .2s,border .2s}
.header-link svg{width:16px;height:16px}
.header-link:hover{background:var(--lime);border-color:var(--lime)}
.main{flex:1;display:grid;grid-template-columns:minmax(0,1.07fr) minmax(0,.93fr);align-items:center;gap:42px;min-height:0;padding:17px 0 13px}
.intro{position:relative;z-index:2;padding:20px 0 25px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;color:#2c8150;font-size:10px;font-weight:900;letter-spacing:1.7px}
.asterisk{font-size:18px;color:var(--leaf);line-height:1}
h1{font:800 clamp(65px,6vw,91px)/.91 'Baloo 2',system-ui,sans-serif;letter-spacing:-3.5px;margin:16px 0 13px}
h1 em{color:#24973f;font-style:normal;position:relative;white-space:nowrap}
h1 em:after{content:'';position:absolute;left:1%;right:1%;bottom:-3px;height:8px;border-radius:50%;background:var(--lime);transform:rotate(-2deg);z-index:-1}
.lede{font-size:clamp(14px,1.38vw,17px);line-height:1.58;color:var(--muted);max-width:490px;margin:16px 0 22px}
.features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:540px}
.feature{display:flex;gap:10px;align-items:center;min-width:0;min-height:64px;padding:9px 10px;background:#ffffffd9;border:1px solid var(--line);border-radius:14px}
.feature-icon{display:grid;place-items:center;flex:none;background:#e4f9d0;border-radius:11px;width:40px;height:40px;color:#178642}
.feature-icon svg{width:20px;height:20px;stroke-width:2.2}
.feature div{display:flex;flex-direction:column;gap:2px;min-width:0}
.feature strong{font-size:13px;line-height:1.15;overflow-wrap:anywhere}
.feature small{font-size:10px;line-height:1.25;color:#607565;overflow-wrap:anywhere}
.actions{margin-top:22px;display:flex;gap:17px;align-items:center;flex-wrap:wrap}
.primary{display:inline-flex;align-items:center;justify-content:center;gap:17px;background:var(--ink);color:#fff;border-radius:14px;min-height:53px;padding:11px 21px;text-decoration:none;font-size:13px;font-weight:900;white-space:nowrap;transition:transform .2s,background .2s}
.primary svg{width:18px;height:18px}
.primary:hover{transform:translateY(-2px);background:#075536}
.platform{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#41684e;font-weight:800;white-space:nowrap}
.platform svg{width:16px;height:16px}
.install-trigger{border:0;border-bottom:1px solid #8bb98b;background:transparent;padding:8px 0 5px;cursor:pointer;font-family:inherit}
.install-trigger:hover{color:#08702c;border-bottom-color:#08702c}
.install-trigger:focus-visible,.install-close:focus-visible,.install-tabs button:focus-visible,.install-open:focus-visible{outline:3px solid #68bf34;outline-offset:3px}
.install-trigger-arrow{width:15px!important;height:15px!important}

.visual{position:relative;display:grid;place-items:center;min-height:550px;height:min(610px,calc(100svh - 150px));max-height:660px;isolation:isolate}
.visual-back{position:absolute;inset:8% 3%;background:#e0f8d1;border-radius:46% 54% 51% 49%/53% 44% 56% 47%;transform:rotate(-9deg);z-index:-2}
.visual-back:after{content:'';position:absolute;inset:9%;border:2px dashed #a3d88288;border-radius:50%}
.visual-spark{position:absolute;color:#6ac52a;font-size:45px;z-index:-1}
.spark-a{left:9%;top:9%;transform:rotate(21deg)}
.spark-b{right:2%;bottom:12%;font-size:28px}
/* Same aspect ratio as the actual cropped screenshot: the whole interface stays visible. */
.device{width:280px;height:521px;border:8px solid #0b422c;background:#f7fbf1;box-shadow:13px 19px 0 #06402615,23px 25px 35px #00210d29;border-radius:32px;position:relative;overflow:hidden;transform:rotate(5deg)}
.real-app-screen{display:block;width:100%;height:100%;object-fit:contain;object-position:center center;background:var(--paper)}
.floating{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;border:1px solid #e4eedf;background:white;color:#0c432a;border-radius:17px;padding:10px 14px;box-shadow:0 12px 27px #052b1d28;font-size:11px;font-weight:900;white-space:nowrap}
.float-star{top:19%;left:-3%;transform:rotate(-8deg)}.float-star span{font-size:21px;color:#edae28}
.float-award{bottom:19%;right:-5%;transform:rotate(7deg);padding:6px 12px 6px 5px}
.float-award .award-icon{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:11px;background:#e1f9d0;color:#0c7941}
.float-award .award-icon svg{width:22px;height:22px;stroke-width:2.2}
.visual-caption{position:absolute;bottom:-3px;font-size:10px;color:#70927a;letter-spacing:.3px}
.footer{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #dbecd7;padding:14px 0 22px;color:#78937e;font-size:10px;font-weight:800;letter-spacing:.45px}
@media(min-width:1100px) and (max-height:730px){
 .header{padding-top:15px}
 .main{padding:0;gap:25px}
 .intro{padding:0}
 h1{font-size:clamp(60px,5.5vw,76px);margin:10px 0}
 .lede{margin:12px 0 15px}
 .feature{min-height:56px}
 .features{gap:7px}
 .actions{margin-top:15px}
 .visual{min-height:0;height:calc(100svh - 110px)}
 .device{transform:rotate(5deg) scale(.83)}
 .floating{transform:scale(.85)}
 .float-star{top:17%;left:1%}
 .float-award{right:0;bottom:14%}
}
@media(max-width:920px){
 .wrap{width:min(100% - 44px,760px)}
 .main{grid-template-columns:minmax(0,1fr) minmax(0,.75fr);gap:15px}
 h1{font-size:clamp(57px,7.3vw,74px)}
 .visual{height:535px;min-height:0}
 .device{transform:rotate(5deg) scale(.82)}
 .float-star{left:-13%;top:15%}.float-award{right:-14%;bottom:13%}
 .feature{padding:8px;gap:7px}
 .feature-icon{width:34px;height:34px}
 .feature-icon svg{width:18px;height:18px}
 .feature strong{font-size:12px}
 .feature small{font-size:9px}
 .footer{letter-spacing:0}
}
@media(max-width:700px){
 body{background:radial-gradient(ellipse 250px 260px at 90% 11%,#d9f8bb 0,transparent 93%),var(--paper)}
 .wrap{width:calc(100% - 34px)}
 .site{min-height:100svh}
 .header{padding:18px 0 4px}
 .brand-logo{width:143px}.brand-beta{font-size:10px;transform:translateY(4px)}
 .header-link{padding:8px 13px;font-size:11px;min-height:37px}
 .main{display:block;padding:20px 0 12px}
 .intro{padding:12px 0 4px}
 .eyebrow{font-size:9px;letter-spacing:1.1px}
 h1{font-size:clamp(48px,11.7vw,72px);margin:12px 0 9px;letter-spacing:-2.6px;line-height:.89}
 h1 br:nth-of-type(2){display:initial}
 h1 em:before{content:' '}
 .lede{max-width:500px;font-size:14px;line-height:1.45;margin:13px 0 18px}
 .features{gap:8px;max-width:none}
 .feature{min-height:58px;padding:7px 8px;border-radius:12px}
 .feature-icon{width:35px;height:35px;border-radius:10px}
 .feature strong{font-size:11px}
 .feature small{font-size:9px}
 .actions{margin-top:17px;gap:12px}
 .primary{min-height:48px;padding:10px 15px;font-size:12px}
 .platform{font-size:10px}
 .visual{height:320px;min-height:0;margin-top:-7px}
 .visual-back{inset:13% 11% 1%;border-radius:48%;transform:rotate(-8deg)}
 .visual-spark{display:none}
 .device{width:157px;height:292px;border-width:5px;border-radius:18px;transform:rotate(4deg);transform-origin:center center}
 .floating{font-size:10px;padding:7px 10px;box-shadow:0 5px 17px #0002}
 .float-star{top:19%;left:8%;transform:rotate(-8deg)}
 .float-award{bottom:20%;right:7%;transform:rotate(6deg)}
 .float-award .award-icon{width:27px;height:27px;flex-basis:27px;border-radius:8px}
 .float-award .award-icon svg{width:17px;height:17px}
 .visual-caption{bottom:2px;font-size:9px}
 .footer{font-size:9px;flex-wrap:wrap;gap:5px;padding:13px 0 17px}
}
@media(max-width:380px){
 .brand-logo{width:135px}.brand-beta{font-size:9px}.header-link{font-size:10px}
 .eyebrow{font-size:8px}
 h1{font-size:46px}
 .lede{font-size:13px}
 .feature-icon{width:31px;height:31px}
 .feature strong{font-size:10px}
 .feature small{font-size:8px}
 .platform{white-space:normal}
 .visual{height:320px}
}
/* Keep the full multilingual page compact without clipping longer translated words. */
@media(max-width:560px){
 .header-link{display:none}
 .header-right{gap:7px}
 .language-picker{height:38px;padding:0 8px;gap:5px}
 .language-picker select{font-size:11px;max-width:100px}
 .language-picker svg{width:16px;height:16px}
}
@media(max-width:350px){
 .brand-logo{width:124px}.brand-beta{font-size:9px}
 .language-picker select{max-width:88px}
}
html[lang="eu"] h1,html[lang="de"] h1{font-size:clamp(57px,5.4vw,82px)}
@media(max-width:700px){
 html[lang="eu"] h1,html[lang="de"] h1{font-size:clamp(44px,10.5vw,62px)}
}
@media(prefers-reduced-motion:reduce){.primary,.header-link{transition:none}}

/* Compact install guide stays off-canvas until requested. */
.install-dialog{border:1px solid #cfe2c6;border-radius:23px;width:min(450px,calc(100vw - 26px));max-height:calc(100dvh - 30px);padding:0;overflow:auto;color:var(--ink);background:#fbfff6;box-shadow:0 24px 70px #072e2270}
.install-dialog::backdrop{background:#031f16a8;backdrop-filter:blur(3px)}
.install-dialog-content{padding:25px 26px 28px}
.install-dialog-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.install-kicker{font:800 10px/1.2 'DM Sans',system-ui,sans-serif;color:#298447;letter-spacing:.16em}
.install-close{display:grid;place-items:center;border:1px solid #d5e8d0;border-radius:50%;background:#fff;color:#164c30;font:400 25px/1 system-ui,sans-serif;cursor:pointer;width:35px;height:35px}
.install-dialog h2{font:800 clamp(29px,6vw,37px)/1.06 'Baloo 2',system-ui,sans-serif;margin:8px 0 8px;letter-spacing:-1.1px}
.install-intro{font-size:13px;line-height:1.55;color:var(--muted);margin:0 0 18px}
.install-tabs{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:5px;border-radius:13px;background:#e5f3d9}
.install-tabs button{border:0;border-radius:10px;padding:10px 14px;background:transparent;color:#3a6852;cursor:pointer;font:800 13px/1.2 'DM Sans',system-ui,sans-serif}
.install-tabs button[aria-selected="true"]{background:#fff;box-shadow:0 2px 10px #073c231a;color:var(--ink)}
.install-steps{min-height:178px;padding:13px 0 10px}
.install-steps[hidden]{display:none}
.install-steps ol{counter-reset:step;list-style:none;margin:0;padding:0;display:grid;gap:12px}
.install-steps li{counter-increment:step;display:grid;grid-template-columns:27px 34px minmax(0,1fr);align-items:center;gap:11px;font-size:13px;line-height:1.43;color:#244a37}
.install-steps li::before{content:counter(step);display:grid;place-items:center;background:#e1f9ca;color:#156b36;border-radius:10px;font:900 12px/1 'DM Sans',sans-serif;width:27px;height:27px}
.install-step-icon{display:grid;place-items:center;width:34px;height:34px;background:#ffffff;border:1px solid #d6e9d0;border-radius:11px;color:#146b3b;box-shadow:0 2px 8px #073c2310}
.install-step-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.install-step-copy{display:block;min-width:0;overflow-wrap:break-word}
.install-open{display:flex;justify-content:center;align-items:center;gap:10px;border-radius:12px;background:var(--ink);color:white;text-decoration:none;font:800 13px/1.2 'DM Sans',system-ui,sans-serif;min-height:44px;padding:11px 16px;margin-top:2px}
.install-open svg{width:17px;height:17px}
.install-open:hover{background:#085b39}
@media(max-width:700px){
 .install-dialog-content{padding:20px 18px 22px}
 .install-dialog h2{font-size:30px}
 .install-steps{min-height:186px}
 .install-trigger{font-size:11px}
}