/* 24SD-CSP-FIX-V3 */

:root{
 --bg:#090e19;--panel:#101a29;--line:#25354a;
 --text:#f0f6ff;--muted:#a1aec1;
 --cyan:#70ddf9;--mint:#a5ffd8;--blue:#598af7
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;min-width:320px;color:var(--text);
 font:16px/1.65 system-ui,-apple-system,"Segoe UI",sans-serif;
 background:
 radial-gradient(ellipse 900px 550px at 85% 3%,#143354,transparent 75%),
 radial-gradient(ellipse 900px 600px at 3% 40%,#151c38,transparent 70%),
 var(--bg)
}
a{color:var(--cyan)}
a:focus-visible,summary:focus-visible{
 outline:3px solid var(--mint);outline-offset:4px
}
.container{width:min(1160px,calc(100% - 40px));margin:auto}
.topline{
 height:4px;
 background:linear-gradient(90deg,#66a8fa,#7be0ff,#91ffd1)
}
.site-header{
 position:sticky;top:0;z-index:30;
 border-bottom:1px solid #ffffff16;
 background:#090f1aef;backdrop-filter:blur(18px)
}
.header-content{
 display:flex;align-items:center;gap:25px;min-height:82px
}
.brand{
 display:flex;align-items:center;gap:12px;
 color:white;text-decoration:none;flex:none
}
.brand-icon{
 width:43px;height:43px;display:grid;place-items:center;
 border:1px solid #5ce9d155;border-radius:14px;
 background:linear-gradient(145deg,#2c6080,#122337)
}
.brand-icon svg{width:26px}
.brand-text{
 font-size:20px;font-weight:900;letter-spacing:-.045em;line-height:1
}
.brand-text b{color:var(--cyan)}
.brand-sub{
 font-size:10px;color:var(--muted);letter-spacing:.17em;
 margin-top:6px;font-weight:700
}
.nav{
 display:flex;gap:4px;margin-left:auto;
 max-width:100%;overflow:auto;scrollbar-width:none
}
.nav::-webkit-scrollbar{display:none}
.nav a{
 padding:11px 14px;border:1px solid transparent;
 border-radius:12px;color:#b0bed0;
 text-decoration:none;white-space:nowrap;
 font-weight:700;font-size:13px;transition:.15s
}
.nav a:hover{color:white;background:#ffffff0d}
.nav a.active{
 color:var(--mint);border-color:#70e6dc44;background:#8df3de12
}
.small-pill{
 font-size:11px;font-weight:750;white-space:nowrap;
 padding:7px 10px;color:var(--mint);
 border:1px solid #93ffce39;background:#9effd20b;border-radius:20px
}
main{min-height:74vh}
.tab-panel{animation:fade .26s ease-out}
.enhanced .tab-panel:not(.active){display:none}
@keyframes fade{
 from{opacity:.3;transform:translateY(9px)}
 to{opacity:1;transform:none}
}
h1,h2,h3,p{margin-top:0}
h1{
 font-size:clamp(45px,5.25vw,76px);
 line-height:1.04;letter-spacing:-.075em;
 margin:25px 0 23px;font-weight:850
}
h1 span,.gradient{
 background:linear-gradient(100deg,#71c8ff,#84edfa 55%,#a5ffce);
 background-clip:text;-webkit-background-clip:text;color:transparent
}
.lead{
 font-size:17px;color:#b8c7db;
 line-height:1.8;max-width:650px
}
.eyebrow{
 display:inline-flex;align-items:center;gap:10px;
 border:1px solid #95ffe135;background:#9efee90a;
 border-radius:99px;padding:8px 13px;
 color:var(--mint);font-size:11px;
 font-weight:900;letter-spacing:.12em;text-transform:uppercase
}
.dot{
 width:7px;height:7px;border-radius:50%;
 background:#91ffd5;box-shadow:0 0 13px #91ffd5
}
.hero{
 display:grid;grid-template-columns:1.03fr 1fr;
 align-items:center;gap:28px;min-height:610px;padding:75px 0 70px
}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 38px}
.btn{
 display:inline-flex;align-items:center;justify-content:center;
 gap:10px;min-height:47px;padding:10px 19px;
 border-radius:13px;text-decoration:none;
 font-weight:800;font-size:14px;transition:transform .15s
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
 color:#071526;background:linear-gradient(110deg,#8bd1ff,#8ff1d6);
 box-shadow:0 10px 35px #66c7ed25
}
.btn-outline{
 color:var(--text);border:1px solid #61728b;background:#ffffff07
}
.quickfacts{display:flex;flex-wrap:wrap;gap:8px}
.quickfacts span{
 padding:7px 11px;color:#bad1e2;
 border:1px solid #364458;border-radius:10px;
 font-weight:700;font-size:12px;background:#ffffff05
}
.quickfacts strong{color:white}

/* Steam Deck artwork */
.art{
 position:relative;min-height:365px;
 display:grid;place-items:center;isolation:isolate
}
.art:before{
 content:"";position:absolute;inset:3% -5% 6%;z-index:-1;
 border-radius:50%;
 background:radial-gradient(ellipse,#416bdb55,#147d9b20 47%,transparent 71%);
 filter:blur(16px)
}
.orb{
 position:absolute;width:100%;max-width:560px;aspect-ratio:1;
 border:1px solid #79cffa25;border-radius:50%;transform:scale(.87)
}
.orb:before{
 content:"";position:absolute;inset:13%;
 border:1px dashed #7daafa23;border-radius:50%
}
.console{
 width:min(100%,570px);aspect-ratio:2.17;
 display:grid;grid-template-columns:17% 66% 17%;
 padding:4.2%;align-items:stretch;position:relative;
 transform:rotate(-7deg);
 border:2px solid #40516b;border-radius:66px;
 background:linear-gradient(155deg,#333e4b,#0d121d 46%,#1c2635);
 box-shadow:12px 35px 30px #02060cc0,inset 0 3px 10px #ffffff1f,
 0 0 65px #0c91ec22
}
.screen{
 background:#05080c;border:4px solid #05070a;
 border-radius:7px;overflow:hidden;position:relative;
 box-shadow:0 0 0 1px #637b9b60
}
.artscene{
 position:absolute;inset:0;
 background:
 radial-gradient(circle at 67% 28%,#b4ecdc,#57cbdf 12%,transparent 25%),
 linear-gradient(150deg,transparent 50%,#102746 52%,#15233b 72%),
 linear-gradient(35deg,transparent 48%,#493a88 50%,#7d46a7 67%,transparent 70%),
 linear-gradient(125deg,#124a96,#612b97 46%,#e567a0)
}
.artscene:after{
 content:"";position:absolute;inset:54% -10% -10%;
 background:linear-gradient(150deg,#201e50 12%,#133a67 45%,#08172e 46%);
 clip-path:polygon(0 68%,25% 6%,53% 65%,80% 0,100% 46%,100% 100%,0 100%)
}
.screenbar{
 position:absolute;inset:0 0 auto;padding:7px 10px;
 font-size:7px;letter-spacing:.12em;font-weight:850;color:#e1faff;
 background:linear-gradient(#0009,transparent)
}
.screenbottom{
 position:absolute;left:8%;right:8%;bottom:9%;
 height:12%;border-radius:5px;
 background:#ffffff15;border:1px solid #ffffff3b
}
.screenbottom:before{
 content:"";display:block;width:37%;height:36%;
 border-radius:4px;background:#9efce3;margin:3% 5%
}
.control{
 display:flex;flex-direction:column;
 align-items:center;justify-content:space-around;min-width:0
}
.stick{
 width:52%;aspect-ratio:1;border-radius:50%;
 background:radial-gradient(circle at 43% 35%,
 #354151 12%,#141b28 48%,#050a12 57%,#364251 66%,#101621 76%);
 box-shadow:inset 0 0 0 2px #0b1420,0 2px 6px #000a
}
.pad{
 width:61%;aspect-ratio:1;border-radius:8px;
 background:linear-gradient(145deg,#172535,#0b1220);
 border:1px solid #3b495b
}
.cross{width:58%;aspect-ratio:1;position:relative}
.cross:before,.cross:after{
 content:"";position:absolute;background:#070d17;
 border:1px solid #485266;border-radius:3px
}
.cross:before{width:37%;height:100%;left:31.5%}
.cross:after{height:37%;width:100%;top:31.5%;left:0}
.buttons{
 width:60%;aspect-ratio:1;display:grid;
 grid-template-columns:repeat(2,1fr);
 grid-template-rows:repeat(2,1fr);gap:2px;transform:rotate(30deg)
}
.buttons i{
 border:1px solid #536173;border-radius:50%;background:#0d1623
}
.label-floating{
 position:absolute;right:-5%;bottom:1%;z-index:1;
 font-size:10px;font-weight:900;letter-spacing:.13em;
 border:1px solid #8ee2fa66;background:#13263dec;
 backdrop-filter:blur(6px);padding:10px 15px;
 border-radius:12px;color:#cefcff;box-shadow:0 20px 30px #0005
}

/* Content */
.section{padding:45px 0 65px}
.mini{
 font-size:12px;letter-spacing:.19em;
 font-weight:800;text-transform:uppercase;color:var(--mint)
}
.section-head{
 display:flex;justify-content:space-between;
 align-items:flex-end;gap:20px;margin-bottom:28px
}
.section-title{
 font-size:clamp(26px,3vw,38px);
 line-height:1.2;letter-spacing:-.045em;margin:8px 0 0
}
.desc{color:var(--muted);max-width:650px}
.link-arrow{
 font-weight:800;font-size:13px;
 text-decoration:none;white-space:nowrap
}
.grid{display:grid;gap:16px}
.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{
 border:1px solid var(--line);border-radius:22px;
 padding:25px;min-width:0;
 background:linear-gradient(145deg,#152335a6,#0c1523db);
 box-shadow:0 12px 35px #00000017
}
.card:hover{border-color:#49758d}
.card-icon{
 display:grid;place-items:center;font-size:24px;
 width:51px;height:51px;border-radius:15px;
 background:#73e8ee15;border:1px solid #73e8ee2a;
 margin-bottom:19px
}
.card h3{
 font-size:18px;letter-spacing:-.02em;
 margin-bottom:9px;line-height:1.3
}
.card p{
 color:var(--muted);font-size:14px;
 line-height:1.75;margin-bottom:0
}
.card a{
 display:inline-block;margin-top:16px;
 font-size:13px;font-weight:800;text-decoration:none
}
.page-head{padding:78px 0 25px;max-width:820px}
.page-head h1{font-size:clamp(37px,5vw,62px);margin:17px 0}
.kpis{
 display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
 gap:12px;margin:25px 0 30px
}
.kpi{
 background:#122033a6;border:1px solid #31475c;
 border-radius:18px;padding:22px 20px
}
.kpi strong{
 display:block;font-size:clamp(22px,3vw,35px);
 line-height:1.15;letter-spacing:-.04em;color:#a3f9ec
}
.kpi small{
 display:block;color:var(--muted);font-size:12px;margin-top:9px
}
.table-scroll{
 overflow-x:auto;border:1px solid var(--line);border-radius:18px
}
table{
 width:100%;border-collapse:collapse;text-align:left;
 min-width:530px;background:#101a29
}
th,td{
 padding:15px 18px;border-bottom:1px solid #28394a;font-size:14px
}
th{
 font-size:12px;color:#90b7d2;text-transform:uppercase;
 letter-spacing:.07em;background:#142334
}
tr:last-child td{border-bottom:0}
td:first-child{color:#b7c8dc;font-weight:750}
td:not(:first-child){color:#eff6fe}
.note{
 padding:17px 20px;border-left:3px solid #81e7df;
 background:#77e7e711;border-radius:0 12px 12px 0;
 color:#b9cddd;font-size:14px
}
.pill{
 display:inline-block;padding:5px 9px;border-radius:8px;
 border:1px solid #8be9c34d;background:#8be9c31a;
 color:#a8ffdf;font-weight:800;font-size:11px;margin-bottom:13px
}
.pill.orange{
 color:#ffdfad;border-color:#ffcd6f44;background:#f3a04c18
}
.pill.red{
 color:#feb7bc;border-color:#f7a4a43a;background:#ec5b6218
}
.pill.gray{
 color:#b8c6d7;border-color:#8c9caf55;background:#8c9caf16
}
.steps{
 counter-reset:step;display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));gap:16px
}
.step{
 counter-increment:step;position:relative;
 border:1px solid var(--line);background:#111c2c;
 border-radius:19px;padding:24px 25px 24px 78px
}
.step:before{
 content:counter(step,decimal-leading-zero);
 position:absolute;top:23px;left:23px;
 color:#8cf6e2;font-size:22px;font-weight:900
}
.step h3{font-size:16px;margin-bottom:10px}
.step p{font-size:14px;color:var(--muted);margin:0}
.guides{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px
}
details.guide,details.faq{
 border:1px solid var(--line);background:#101b2b;
 border-radius:18px;overflow:hidden
}
details[open]{border-color:#5c91a1}
details summary{
 list-style:none;cursor:pointer;display:flex;
 justify-content:space-between;align-items:center;
 gap:15px;padding:23px;font-weight:800;line-height:1.45
}
details summary::-webkit-details-marker{display:none}
details summary:after{
 content:"+";font-size:24px;color:#8be9d5;line-height:1;flex:none
}
details[open] summary:after{content:"−"}
.details-body{
 padding:0 23px 23px;color:#afbdd0;font-size:14px;line-height:1.78
}
.details-body ol,.details-body ul{margin:0;padding-left:20px}
.details-body li{margin-bottom:9px}
.details-body p:last-child{margin-bottom:0}
.faq-list{display:grid;gap:12px}
.callout{
 margin:24px 0;border:1px solid #76d2e94a;
 background:linear-gradient(90deg,#18547742,#1c29562b);
 border-radius:20px;padding:28px;
 display:flex;justify-content:space-between;
 align-items:center;gap:20px
}
.callout h3{margin:0 0 6px;font-size:21px}
.callout p{
 color:#afc6d8;font-size:14px;margin:0;max-width:660px
}
.fineprint{font-size:12px;color:#899bb1}
.site-footer{
 margin-top:50px;border-top:1px solid #233145;background:#070c14
}
.footer-grid{
 display:grid;grid-template-columns:1.3fr 1fr 1fr;
 gap:30px;padding:40px 0
}
.footer-grid h3{font-size:14px;margin-bottom:15px}
.footer-grid p,.footer-grid a{
 display:block;color:#91a1b6;font-size:13px;
 line-height:1.9;text-decoration:none;margin:0 0 7px
}
.footer-grid a:hover{color:var(--mint)}
.copyright{
 border-top:1px solid #1d2938;
 padding:20px 0;color:#728398;font-size:12px
}
@media(max-width:920px){
 .header-content{gap:12px;flex-wrap:wrap;padding:13px 0}
 .nav{width:100%;order:3;margin-left:0}
 .small-pill{margin-left:auto}
 .hero{grid-template-columns:1fr;gap:0;padding-top:56px}
 .art{max-width:620px;width:100%;margin:auto}
 .three,.four{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
 .container{width:min(calc(100% - 30px),1160px)}
 .site-header{position:relative}
 .header-content{min-height:0}
 .brand-text{font-size:18px}
 .small-pill{display:none}
 .nav a{padding:9px 13px}
 .hero{padding:43px 0 28px;min-height:0}
 .art{min-height:260px}
 .console{border-radius:32px}
 .label-floating{right:0;bottom:2%}
 .section{padding:30px 0 45px}
 .section-head{display:block}
 .three,.two,.four,.steps,.guides,.footer-grid{
  grid-template-columns:1fr
 }
 .page-head{padding-top:44px}
 .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
 .card{padding:21px}
 .callout{flex-direction:column;align-items:flex-start}
 h1{font-size:46px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .tab-panel{animation:none}
 .btn{transition:none}
}