/* Deckamp v1.7: responsive hero and two intentionally contained scroll galleries. */
:root{--max:1180px}
html,body{width:100%;max-width:100%;overflow-x:clip}
*,*::before,*::after{box-sizing:border-box}
img,video,picture,svg{max-width:100%}
.container,.hero-grid,.hero-copy,.hero-visual,.section,.showcase-top{min-width:0;max-width:100%}
.hero{padding:clamp(46px,6vw,80px) 0 clamp(44px,5vw,75px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.8fr);gap:clamp(24px,4.5vw,70px);align-items:center}
.hero-copy,.hero-visual{min-width:0}
.hero h1{font-size:clamp(44px,5.4vw,74px);line-height:1.07;letter-spacing:-.03em;max-width:none;overflow-wrap:normal;margin:16px 0 20px}
.hero h1 .gradient{display:block}
.hero .lead{max-width:550px;line-height:1.65;margin:0 0 24px}
.hero .actions{display:flex;gap:10px}
.hero .btn{text-align:center}
.hero-single-phone{width:min(100%,332px);margin-inline:auto;position:relative;filter:drop-shadow(0 24px 40px rgba(0,0,0,.5))}
.hero-single-phone::before{content:"";position:absolute;inset:9% -8%;z-index:-1;background:radial-gradient(ellipse at center,rgba(226,37,211,.19),transparent 72%);pointer-events:none}
.hero-single-phone img{display:block;width:100%;height:auto;border:4px solid #303045;border-radius:32px;background:#080917;box-shadow:0 0 0 1px rgba(255,255,255,.12);}
.hero-visual::before{display:none}
/* Screenshots: horizontal overflow belongs only to the strip, never the page. */
.screenshot-grid{display:flex!important;max-width:100%;width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:20px;padding:8px 5px 20px 3px;scrollbar-width:thin;scrollbar-color:#b54cc4 rgba(255,255,255,.05)}
.screenshot-grid .shot-card{min-width:0;flex:0 0 clamp(215px,25%,290px);scroll-snap-align:start}
/* Comparison displays 2 themes on desktop, 3 player views on desktop. */
.comparison-strip{display:grid;gap:20px;max-width:100%;min-width:0}
.themes-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
.skins-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
.comparison-card{min-width:0;border:1px solid rgba(219,193,250,.18);background:linear-gradient(145deg,#17152d,#0a0b1c 75%);border-radius:26px;padding:22px;display:flex;flex-direction:column;gap:14px}
.comparison-visual{width:100%;display:flex;align-items:center;justify-content:center;min-width:0}
.comparison-visual img{display:block;width:auto;height: min(55vw,490px);max-width:100%;border-radius:22px;object-fit:contain;background:#070815;box-shadow:0 18px 40px rgba(0,0,0,.34)}
.comparison-copy{padding:0 2px 4px}
.comparison-copy h3{font-size:22px;margin:0 0 7px}
.comparison-copy p{color:var(--muted);font-size:14px;line-height:1.65;margin:0}
.comparison-copy .shot-index{margin-bottom:6px}
.section-themes,.section-skins{padding:66px 0}
.section-themes{background:linear-gradient(180deg,#0a0a20,#0d0d25 70%,#090a1c)}
.section-skins{background:linear-gradient(180deg,#090a1c,#070817 85%)}
.swipe-hint{display:none;white-space:nowrap;color:#ff95ed;font-size:12px;font-weight:700}
.gallery-disclaimer{font-size:12px;line-height:1.7;color:#aeb1cc;margin-top:19px}
@media(max-width:950px){.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.83fr);gap:24px}.hero h1{font-size:clamp(42px,5.8vw,63px)}.hero-single-phone{width:min(100%,270px)}.hero .lead{font-size:15px}}
@media(max-width:700px){
 .container{width:calc(100% - 36px);max-width:100%}
 .hero{padding:26px 0 28px}
 .hero-grid{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,.81fr)!important;align-items:center;gap:clamp(10px,3vw,18px)!important}
 .hero-copy{min-width:0;max-width:100%}
 .hero h1{font-size:clamp(31px,8.4vw,41px)!important;line-height:1.07!important;letter-spacing:-.025em;margin:14px 0 14px;overflow-wrap:normal}
 .hero .eyebrow{font-size:9px;letter-spacing:.075em;line-height:1.5;gap:7px;white-space:normal}
 .hero .pulse-dot{flex:0 0 6px;width:6px;height:6px}
 .hero .lead{font-size:clamp(12px,3.2vw,14px)!important;line-height:1.54!important;margin:0 0 15px;max-width:none}
 .hero .actions{display:grid;grid-template-columns:1fr;gap:8px}
 .hero .btn{font-size:12px!important;line-height:1.2;min-height:41px;padding:8px 6px;width:100%;border-radius:11px;white-space:normal;max-width:100%}
 .hero .microline{font-size:10px;line-height:1.55;margin-top:13px;letter-spacing:0}
 .hero-visual{min-width:0;width:100%;max-width:100%}
 .hero-single-phone{width:min(100%,190px);margin:0 auto}
 .hero-single-phone img{border-radius:19px;border-width:3px}
 .section-preview{padding-top:30px}
 .showcase-top{display:block}
 .screenshot-grid{gap:13px}
 .screenshot-grid .shot-card{flex:0 0 min(68vw,255px)}
 .section-themes,.section-skins{padding:55px 0}
 .comparison-strip{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:14px;padding:0 2px 16px}
 .comparison-strip::-webkit-scrollbar{display:none}
 .comparison-card{flex:0 0 min(77vw,315px);scroll-snap-align:start;padding:16px;border-radius:21px}
 .comparison-visual img{height:410px;max-height:min(410px,108vw);max-width:100%;border-radius:17px}
 .comparison-copy h3{font-size:20px}
 .swipe-hint{display:inline-flex;margin:10px 0 0}
 .hero .lead,.page-lead,.section-intro,.comparison-copy p,.shot-copy p{overflow-wrap:break-word}
 .page-hero h1,h2{overflow-wrap:break-word}
}
@media(max-width:370px){
 .container{width:calc(100% - 28px)}
 .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.73fr)!important;gap:9px!important}
 .hero h1{font-size:30px!important}
 .hero .eyebrow{font-size:8px;letter-spacing:.04em}
 .hero .lead{font-size:12px!important}
 .hero .btn{font-size:11px!important}
 .comparison-card{flex-basis:83vw}
}
@media(prefers-reduced-motion:reduce){.screenshot-grid,.comparison-strip{scroll-behavior:auto}}