:root{--navy:#082B55;--navy2:#061f42;--panel:#182234;--panel2:#222c3e;--line:#536077;--white:#fff;--muted:#cbd3df;--muted2:#9ea9ba;--mint:#27E5B1;--sky:#33B8FF;--violet:#7A5CFF;--max:1420px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--navy)}
body{margin:0;background:var(--navy);color:#fff;font-family:Inter,Manrope,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.45;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}
.wrap{width:min(calc(100% - 56px),var(--max));margin:auto}
.site{min-height:100vh;background:var(--navy)}
.header{height:90px;border-bottom:1px solid rgba(255,255,255,.11);display:flex;align-items:center}
.nav{display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:flex;align-items:center;gap:13px;font-weight:800;font-size:28px;letter-spacing:-.03em}
.brand svg{width:94px;height:39px;display:block}
.navlinks{display:flex;gap:42px;font-size:14px;font-weight:650}
.navlinks a{opacity:.9}
.navlinks a:hover{opacity:1}
.navcta{padding:13px 22px;border-radius:10px;background:var(--mint);color:#062747;font-weight:800}
.hamb{display:none;border:0;background:none;color:#FFFFFF;padding:8px;opacity:1}
.hamb,.hamb:visited,.hamb:hover,.hamb:active,.hamb:focus{color:#FFFFFF;opacity:1}
.hamb span{display:block;width:27px;height:2px;background:#FFFFFF;margin:6px 0;opacity:1}
.mobilemenu{display:none}

.hero{padding:72px 0 66px}
.hero-grid{display:grid;grid-template-columns:minmax(380px,.78fr) minmax(560px,1.22fr);gap:68px;align-items:center}
h1{font-size:clamp(62px,6vw,96px);line-height:.94;letter-spacing:-.055em;margin:0 0 26px;font-weight:850}
.lead{font-size:23px;line-height:1.45;color:var(--muted);max-width:650px;margin:0 0 28px}
.playbadge{display:inline-flex;align-items:center;gap:12px;background:#050505;border:2px solid rgba(255,255,255,.82);border-radius:10px;padding:9px 18px 9px 12px;min-height:64px}
.playtri{width:38px;height:38px;position:relative}
.playtri:before{content:"";position:absolute;inset:2px 5px;clip-path:polygon(0 0,100% 50%,0 100%);background:linear-gradient(135deg,#27e5b1 0 31%,#33b8ff 31% 54%,#ffca28 54% 72%,#ff5252 72%)}
.playtxt small{display:block;font-size:10px;text-transform:uppercase;line-height:1;letter-spacing:.06em}
.playtxt strong{font-size:23px;letter-spacing:-.02em}
.compat{font-size:15px;color:var(--muted);margin:16px 0 0;max-width:590px}
.device-shell{padding:10px;background:#0b1019;border:2px solid rgba(255,255,255,.26);border-radius:24px;box-shadow:0 18px 34px rgba(0,0,0,.18)}
.device-shell picture,.device-shell img{display:block;width:100%}
.device-shell img{border-radius:15px}
.hero-device{max-width:850px;margin-left:auto}
.hero-device .portrait-only{display:none}

.features{padding:10px 0 60px}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.13);border-bottom:1px solid rgba(255,255,255,.13)}
.feature{padding:38px 36px 36px 0;min-height:190px}
.feature+.feature{padding-left:36px;border-left:1px solid rgba(255,255,255,.14)}
.ficon{width:42px;height:42px;margin-bottom:15px}
.ficon svg{width:100%;height:100%;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.feature h3{font-size:21px;margin:0 0 7px}
.feature p{font-size:15px;color:var(--muted);margin:0;max-width:270px}

.showcase{padding:44px 0 76px}
.section-kicker{font-size:13px;text-transform:uppercase;letter-spacing:.17em;color:var(--mint);font-weight:800;margin-bottom:12px}
.section-title{font-size:52px;line-height:1.02;letter-spacing:-.045em;margin:0 0 14px}
.section-lead{font-size:19px;color:var(--muted);max-width:780px;margin:0 0 32px}
.screen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.screen-card{background:var(--navy2);border:1px solid rgba(255,255,255,.14);border-radius:18px;overflow:hidden}
.screen-card .shot{padding:9px;background:#091527}
.screen-card picture,.screen-card img{display:block;width:100%}
.screen-card img{border-radius:10px}
.screen-meta{padding:20px 22px 22px}
.screen-meta h3{font-size:21px;margin:0 0 6px}
.screen-meta p{font-size:14px;color:var(--muted);margin:0}


/* APP ORIENTATION SHOWCASE */
.orientation-showcase{display:flex;flex-direction:column;gap:34px}
.orientation-block{background:var(--navy2);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:22px}
.orientation-head{display:flex;justify-content:space-between;align-items:flex-start;gap:28px;padding:2px 2px 20px}
.orientation-head h3{font-size:26px;line-height:1.08;margin:9px 0 7px;letter-spacing:-.025em}
.orientation-head p{font-size:15px;color:var(--muted);margin:0;max-width:690px}
.orientation-badge{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--mint)}
.orientation-icon{display:inline-block;border:2px solid currentColor;border-radius:3px;position:relative;opacity:.95}
.orientation-icon.wide{width:22px;height:13px}
.orientation-icon.tall{width:13px;height:22px}
.orientation-icon:after{content:"";position:absolute;width:3px;height:3px;border-radius:50%;background:currentColor;left:50%;bottom:1px;transform:translateX(-50%)}
.orientation-icon.wide:after{bottom:auto;right:1px;left:auto;top:50%;transform:translateY(-50%)}
.orientation-note{font-size:11px;letter-spacing:.15em;color:var(--muted2);white-space:nowrap;padding-top:4px}
.orientation-grid{display:grid;gap:18px}
.landscape-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
.portrait-gallery{grid-template-columns:repeat(3,minmax(0,1fr));max-width:980px;margin:0 auto}
.app-shot-card{min-width:0}
.shot-frame{background:#091527;border:1px solid rgba(255,255,255,.11);overflow:hidden}
.landscape-frame{border-radius:13px;padding:7px;aspect-ratio:2.17/1;display:flex;align-items:center}
.portrait-frame{border-radius:22px;padding:8px;max-width:292px;margin:0 auto;aspect-ratio:.492/1;display:flex;align-items:center}
.shot-frame img{width:100%;height:100%;display:block;object-fit:contain;border-radius:8px}
.portrait-frame img{border-radius:15px}
.shot-caption{display:flex;flex-direction:column;gap:4px;padding:12px 4px 0}
.shot-caption strong{font-size:16px}
.shot-caption span{font-size:13px;line-height:1.4;color:var(--muted2)}
.orientation-portrait{background:#08234a}

.workflow{padding:10px 0 80px}
.workflow-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(350px,.6fr);gap:56px;align-items:center}
.workflow .device-shell{border-radius:20px}
.copy h2{font-size:46px;line-height:1.06;letter-spacing:-.04em;margin:0 0 16px}
.copy p{font-size:18px;color:var(--muted);margin:0 0 18px}
.checks{display:grid;gap:10px;color:var(--muted);font-size:15px}
.check{display:flex;align-items:center;gap:10px}
.check b{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#fff;color:var(--navy);font-size:12px;flex:none}
.footer{border-top:1px solid rgba(255,255,255,.12);padding:27px 0 34px;color:var(--muted2);font-size:13px}
.footer-inner{display:flex;justify-content:space-between;gap:24px}

@media(max-width:1050px){
 .wrap{width:min(calc(100% - 38px),var(--max))}
 .navlinks{gap:23px}
 .hero-grid{grid-template-columns:1fr;gap:42px}
 .hero-device{margin:0;max-width:none}
 .screen-grid{grid-template-columns:1fr 1fr}
 .screen-card:last-child{grid-column:1/-1}
 .workflow-grid{grid-template-columns:1fr;gap:34px}
}
@media(max-width:760px){
 .wrap{width:min(calc(100% - 32px),var(--max))}
 .header{height:76px}
 .brand{font-size:23px}
 .brand svg{width:78px;height:32px}
 .navlinks,.navcta{display:none}
 .hamb{display:block}
 .mobilemenu{position:absolute;top:76px;left:0;right:0;background:var(--navy);z-index:30;padding:8px 16px 18px;border-bottom:1px solid rgba(255,255,255,.12)}
 .mobilemenu.open{display:grid}
 .mobilemenu a{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08);font-weight:650}
 .hero{padding:46px 0 46px}
 .hero-grid{gap:36px}
 h1{font-size:clamp(50px,14vw,70px);margin-bottom:20px}
 .lead{font-size:19px}
 .compat{font-size:14px}
 .hero-device{max-width:430px;margin:auto}
 .hero-device .landscape-only{display:none}
 .hero-device .portrait-only{display:block}
 .device-shell{padding:7px;border-radius:25px}
 .device-shell img{border-radius:18px}
 .feature-grid{grid-template-columns:1fr 1fr}
 .feature,.feature+.feature{min-height:190px;padding:25px 18px 25px 0;border-left:0}
 .feature:nth-child(even){padding-left:22px;border-left:1px solid rgba(255,255,255,.14)}
 .feature:nth-child(n+3){border-top:1px solid rgba(255,255,255,.14)}
 .section-title{font-size:39px}
 .section-lead{font-size:16px}
 .screen-grid{grid-template-columns:1fr}
 .screen-card:last-child{grid-column:auto}
 .screen-card .landscape-shot{display:none}
 .screen-card .portrait-shot{display:block!important}
 .workflow-grid{gap:28px}
 .workflow .landscape-only{display:none}
 .workflow .portrait-only{display:block!important;max-width:430px;margin:auto}
 .copy h2{font-size:37px}
 .footer-inner{display:block}
}
@media(min-width:761px){.portrait-shot,.workflow .portrait-only{display:none}}
@media(max-height:520px) and (orientation:landscape){
 .header{height:62px}
 .mobilemenu{top:62px}
 .hero{padding:28px 0 34px}
 .hero-grid{grid-template-columns:.8fr 1.2fr;gap:30px}
 h1{font-size:45px;margin-bottom:14px}
 .lead{font-size:16px;margin-bottom:15px}
 .playbadge{min-height:48px;padding:6px 12px}
 .playtri{width:28px;height:28px}
 .playtxt strong{font-size:17px}
 .compat{font-size:12px;margin-top:8px}
 .hero-device{max-width:none}
 .hero-device .portrait-only{display:none}
 .hero-device .landscape-only{display:block}
 .feature-grid{grid-template-columns:repeat(4,1fr)}
 .feature,.feature+.feature,.feature:nth-child(even){min-height:auto;padding:20px 16px;border-left:1px solid rgba(255,255,255,.14);border-top:0}
 .feature:first-child{border-left:0;padding-left:0}
 .screen-grid{grid-template-columns:repeat(3,1fr)}
 .screen-card .portrait-shot{display:none!important}
 .screen-card .landscape-shot{display:block}
}

@media(max-width:1050px){
 .landscape-gallery{grid-template-columns:1fr}
 .landscape-frame{aspect-ratio:auto}
 .portrait-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
 .orientation-showcase{gap:24px}
 .orientation-block{padding:16px;border-radius:17px}
 .orientation-portrait{order:1}
 .orientation-landscape{order:2}
 .orientation-head{display:block;padding-bottom:16px}
 .orientation-note{display:block;margin-top:12px}
 .orientation-head h3{font-size:23px}
 .orientation-head p{font-size:14px}
 .portrait-gallery,.landscape-gallery{grid-template-columns:1fr}
 .portrait-card{border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:18px}
 .portrait-card:last-child{border-bottom:0;padding-bottom:0}
 .portrait-frame{max-width:360px;width:100%}
 .landscape-frame{padding:5px;border-radius:10px}
 .shot-caption{padding-top:10px}
 .shot-caption span{font-size:12px}
}
@media(max-height:520px) and (orientation:landscape){
 .orientation-portrait{order:2}
 .orientation-landscape{order:1}
 .landscape-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
 .orientation-block{padding:14px}
 .orientation-head{padding-bottom:12px}
 .orientation-head h3{font-size:20px}
 .orientation-head p{font-size:12px}
 .shot-caption span{display:none}
}