/* Hero composition and resilient preview layout across all five languages. */
.hero{padding:72px 0 34px}.hero-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:36px;min-height:510px}.hero-copy{padding:0;max-width:520px}.hero h1{font-size:clamp(42px,3.7vw,64px);line-height:1.09;letter-spacing:-2.3px;font-weight:650;margin-bottom:26px}.hero h1 span{color:#a8d6bd}.hero-copy>p{font-size:15px;line-height:1.85;max-width:440px;color:#a8c0b2}.hero .eyebrow{font-size:10px;letter-spacing:2.4px;color:#9bbfac;margin-bottom:25px}.hero:before{opacity:.55}.hero:after{background:radial-gradient(ellipse at 77% 44%,#1d83532b,transparent 58%)}.hero-contact{display:inline-flex;align-items:center;gap:22px;padding:14px 21px;min-height:48px;border:1px solid #80b79a66;border-radius:10px;background:linear-gradient(135deg,#296b4b,#16432f);box-shadow:inset 0 1px 0 #c6f4d82b,0 8px 24px #0003;color:#f0fff5;margin:0 0 14px;font-size:13px}.hero-contact:hover{background:#2c7953;border-color:#b9e6ca}.hero-actions{margin-bottom:20px}.hero-actions .btn{border-color:#799f873b;background:#041c1044;min-height:43px;padding:10px 17px;font-size:12px}.hero .tags{margin-top:24px;gap:10px;font-size:9px;line-height:1.6}.hero .tags span+span{padding-left:10px}.product-stage{min-width:0;padding:8px 10px 0 0;perspective:1800px}.product-stage:after{inset:14px 0 117px 14px;border-radius:20px;transform:rotateY(-3deg) rotateZ(-.7deg);box-shadow:7px 6px 0 -1px #042519,7px 6px 0 0 #36725144}.browser{transform:rotateY(-3deg) rotateZ(-.7deg);border-color:#7ea98e88;border-radius:18px;box-shadow:inset 0 0 0 3px #79b9990d,0 30px 70px #0006,0 0 45px #25805212}.browser-top{height:33px;padding:0 16px}.browser-top span{font-size:9px}.dashboard{grid-template-columns:138px minmax(0,1fr);min-height:360px}.dash-side{min-width:0;padding:24px 10px;background:linear-gradient(180deg,#08251a99,#01170d99)}.dash-side .logo{font-size:12px;margin:0 7px 28px;gap:7px}.dash-nav{gap:6px}.dash-nav button{width:100%;min-width:0;min-height:36px;display:flex;align-items:center;gap:9px;padding:9px 8px;font-size:10px;line-height:1.4;white-space:normal;text-align:left;border:1px solid transparent;border-radius:7px;color:#9eb8a9}.dash-nav button span{min-width:0;overflow-wrap:anywhere}.dash-nav button svg{width:13px;height:13px;flex:0 0 13px}.dash-nav button.active{border-color:#75c39d30;color:#e3f6ea}.dash-nav button:hover{background:#163f2c;color:#ecfff4}.dash-main{min-width:0;padding:25px 18px 42px}.dash-heading{gap:8px}.dash-heading h3{font-size:17px;line-height:1.3}.dash-heading span{font-size:7px;flex-shrink:0}.dash-tabs{gap:5px;flex-wrap:wrap;margin-bottom:16px}.dash-tabs button{font-size:8px;padding:6px 8px;line-height:1.3}.dash-games{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.dash-game{min-width:0}.dash-game p{font-size:8px;padding:7px 5px}.dashboard-state{min-width:0}.dashboard-state h3{font-size:22px}.dashboard-state p{font-size:12px;line-height:1.7}.preview-table>div{min-width:0;gap:10px;font-size:10px}.preview-table>div span{overflow-wrap:anywhere}.operator{position:relative;bottom:auto;right:auto;width:calc(100% - 60px);max-width:470px;margin:-22px -8px 0 auto;padding:16px 19px;border-radius:13px;border-color:#82bc9c88;background:linear-gradient(135deg,#103525f5,#031c12fa);box-shadow:0 16px 40px #0006,inset 0 1px 0 #d3f6e11a;z-index:3}.operator-title{font-size:11px;gap:7px;margin-bottom:13px}.operator-title small{margin-left:auto;font-size:7px}.operator-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.operator-grid>div{padding:10px 8px;gap:6px}.operator-grid span{font-size:7px;line-height:1.4}.operator-grid strong{font-size:19px}.operator-grid .status{font-size:11px;line-height:23px;white-space:nowrap}.operator-chart{height:32px;margin-top:10px;padding-top:6px}.benefits{margin-top:42px;gap:16px}.benefit{padding:22px;background:linear-gradient(135deg,#12332355,#041b1299);border-color:#74ad8d30}.benefit h3{font-size:15px}.benefit p{font-size:11px}
@media(min-width:1600px){.hero{padding-top:85px}.hero-grid{min-height:550px}.dashboard{min-height:395px}.dash-main{padding:28px 20px 50px}.dash-game p{font-size:9px}}
@media(min-width:768px) and (max-width:1100px){.hero-grid{grid-template-columns:1fr;gap:35px}.hero-copy{max-width:730px}.hero h1{font-size:52px;max-width:700px}.hero-copy>p{max-width:600px}.product-stage{width:100%;max-width:800px;margin:0 auto}.dashboard{grid-template-columns:145px minmax(0,1fr)}.dash-nav button{font-size:11px}.hero .tags{font-size:10px}.benefit{padding:18px}.benefit h3{font-size:13px}}
@media(max-width:767px){.hero{padding:38px 0 24px}.hero-grid{display:block}.hero-copy{padding-bottom:30px}.hero h1{font-size:clamp(36px,8.6vw,54px);letter-spacing:-1.5px}.hero-copy>p{font-size:14px;line-height:1.8}.hero-contact{font-size:12px;min-height:46px}.hero .tags{font-size:8px;gap:8px}.hero .tags span+span{padding-left:0}.product-stage{padding:0 5px 0 0;margin:0}.browser{transform:none;border-radius:13px}.product-stage:after{transform:none;inset:5px 0 120px 5px;border-radius:15px}.browser-top{height:27px;padding:0 9px}.browser-top span{font-size:7px}.dashboard{grid-template-columns:103px minmax(0,1fr);min-height:290px}.dash-side{padding:18px 5px}.dash-side .logo{font-size:10px;margin:0 5px 18px;gap:4px}.dash-nav{gap:4px}.dash-nav button{font-size:9px;min-height:34px;padding:7px 5px;gap:5px}.dash-nav button svg{width:11px;height:11px;flex-basis:11px}.dash-main{padding:18px 10px 32px}.dash-heading h3{font-size:13px}.dash-heading span{display:none}.dash-tabs{gap:4px;margin-bottom:12px}.dash-tabs button{font-size:7px;padding:5px}.dash-games{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.dash-game:nth-child(n+5){display:none}.dash-game p{font-size:7px;padding:6px 4px}.operator{width:calc(100% - 15px);max-width:none;margin:-12px -2px 0 auto;padding:12px;border-radius:11px}.operator-title{font-size:10px}.operator-title small{font-size:6px}.operator-grid{gap:4px}.operator-grid>div{padding:7px 4px}.operator-grid span{font-size:6px}.operator-grid strong{font-size:16px}.operator-grid .status{font-size:8px;line-height:19px}.operator-chart{height:25px;margin-top:7px}.dashboard-state h3{font-size:17px}.dashboard-state p{font-size:10px}.dashboard-state .eyebrow{font-size:7px;letter-spacing:1px}.preview-table>div{font-size:9px;flex-wrap:wrap;padding:10px}.benefits{margin-top:28px}.benefit{padding:20px}.benefit h3{font-size:15px}.benefit p{font-size:11px}}
.hero-contact{vertical-align:middle;margin-right:10px}.hero-actions{display:inline-flex;vertical-align:middle;margin-bottom:14px}.hero .tags{clear:both}@media(max-width:480px){.hero-contact{margin-right:8px}}
/* Readable mobile operator panel, shared by all locales. */
@media(max-width:767px){
 .hero .product-stage{padding:0;margin:0;max-width:100%}
 .hero .product-stage:after{display:none}
 .hero .operator{position:relative;inset:auto;width:100%;max-width:none;margin:16px 0 0;padding:18px;border-radius:16px;box-sizing:border-box}
 .hero .operator-title{font-size:14px;line-height:1.45;gap:8px;flex-wrap:wrap;margin-bottom:16px}
 .hero .operator-title>svg{width:18px;height:18px}
 .hero .operator-title small{font-size:10px;line-height:1.4;margin-left:auto}
 .hero .operator-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .hero .operator-grid>div{min-width:0;min-height:94px;padding:14px 12px;gap:10px;justify-content:flex-end;border-radius:10px}
 .hero .operator-grid span{font-size:11px;line-height:1.45;overflow-wrap:anywhere}
 .hero .operator-grid strong{font-size:26px;line-height:1.15;font-weight:600}
 .hero .operator-grid .status{font-size:17px;line-height:1.7;white-space:normal}
 .hero .status-dot{width:7px;height:7px;margin-right:6px}
 .hero .operator-chart{width:100%;height:auto;aspect-ratio:4 / 1;margin-top:16px;padding-top:14px;overflow:hidden}
 .hero .benefits{margin-top:28px}
 .hero .dash-side .logo{letter-spacing:0;gap:4px;white-space:nowrap}
 .hero .dash-game p{font-size:9px;line-height:1.4}
 .hero .dash-tabs button{font-size:9px;min-height:28px;padding:6px}
 .hero .hero-actions,.hero .hero-contact{max-width:100%}
}
@media(max-width:359px){
 #header .logo{font-size:18px;letter-spacing:1px;gap:7px}
 #header .brand-mark{width:23px;height:27px}
 .hero .dashboard{grid-template-columns:88px minmax(0,1fr)}
 .hero .dash-side .logo{font-size:9px;margin-left:1px;margin-right:0}
 .hero .dash-nav button{font-size:8px;padding-left:3px;padding-right:3px}
 .hero .dash-main{padding-left:8px;padding-right:8px}
 .hero .operator{padding:14px}
 .hero .operator-title{font-size:13px}
 .hero .operator-grid>div{padding:12px 10px}
}