.landing{
 --canvas:#0e0c12;
 --surface:#18131d;
 --line:#3f2a3b;
 --rose:#ff91b3;
 --muted:#b9a7b9;
 background:var(--canvas);
 color:#fff6fa;
}
.landing .preview-strip{
 background:#291321;
 border-color:#56263d;
 color:#efc3d5;
 padding:8px 16px;
}
.preview-strip .release-tag{
 display:inline-block;
 margin-inline:0 8px;
 padding:2px 8px;
 border-radius:7px;
 background:#58213a;
 color:#ffd6e4;
 font:600 11px/1.5 "Segoe UI",sans-serif;
}
.preview-strip a{margin-inline-start:12px;color:#ff9cbd;text-decoration:underline;text-underline-offset:4px}
.landing .header{border-bottom:1px solid #312130;padding-block:19px}
.landing .brand img{width:153px;height:auto;object-fit:contain}
.landing .header nav{gap:24px}
.landing .header nav a{padding:6px 2px}
.landing .btn{border-radius:12px}
.landing .btn-primary{
 background:linear-gradient(120deg,#c63862,#921b47);
 border-color:#df5179;
 box-shadow:0 9px 25px #8f194c45;
}
.landing .btn-primary:hover{background:linear-gradient(120deg,#db4873,#a72454)}
.landing .btn-primary .windows-icon{font-size:22px;color:#ffe0eb}
.landing .hero{
 isolation:isolate;
 grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);
 gap:clamp(28px,5vw,74px);
 min-height:610px;
 padding:67px 0 68px;
}
.landing .hero::before{
 inset:0;
 background:
  radial-gradient(ellipse at 26% 48%,#a6265d34,transparent 62%),
  linear-gradient(90deg,#100d13 3%,#100d13be 49%,#100d13f2 89%),
  url("/assets/hero-valorant-0125.webp") center 45% / cover no-repeat;
 opacity:.78;
 mask-image:linear-gradient(transparent,#000 14%,#000 77%,transparent);
}
.hero-kicker{
 display:inline-flex;
 align-items:center;
 padding:6px 13px;
 border:1px solid #77405a;
 border-radius:999px;
 background:#2c1525;
 color:#fac1d7;
}
.hero-kicker .dot,.product-shot+.dot{box-shadow:0 0 12px #f97ea8}
.landing .hero h1{font-size:clamp(61px,7.1vw,106px);line-height:1.1;margin-block:19px 21px}
.landing .hero h1 em{color:var(--rose)}
.landing .hero-description{color:#d6c3d1;font-size:18px;max-width:390px}
.landing .hero-note{color:#bda9bb}
.landing .hero-visual{transform:none}
.landing .visual-label{color:#be9db2;align-items:center;margin:0 1px 11px}
.landing .live-pill{background:#21121e;color:#ffc9df;font-size:12px;padding:4px 10px}
.product-shot{
 margin:0;
 background:#18121b;
 border:1px solid #88485f;
 border-radius:20px;
 overflow:hidden;
 box-shadow:0 34px 88px #0009,0 0 40px #a7295a20;
}
.product-shot img{width:100%;height:auto;display:block;background:#121018}
.product-shot figcaption{
 display:flex;
 justify-content:space-between;
 gap:10px;
 padding:10px 15px;
 border-top:1px solid #4a2b3d;
 background:#211520;
 color:#dcb6c9;
 direction:rtl;
 font-size:12px;
}
.landing .intro-bar{
 background:linear-gradient(110deg,#211321,#16121a);
 border:1px solid var(--line);
 border-radius:18px;
 padding:18px 0;
}
.landing .intro-bar b,.landing .intro-bar>div:nth-child(3) b{font:inherit;font-size:33px;font-weight:bold;color:#ffd2e1}
.landing .intro-bar span{color:#c0a6b8}
.landing .intro-bar p{align-self:center}
.landing .section{padding-top:clamp(55px,8vw,104px)}
.landing .section h2{color:#fff1f7;font-weight:bold}
.landing .section-head .eyebrow{color:#f5a2c2}
.landing .steps{gap:16px;padding:0 0 20px}
.landing .steps article{
 border:1px solid var(--line);
 background:linear-gradient(147deg,#221520,#17121c);
 border-radius:17px;
 padding:22px;
}
.landing .step-number{
 display:inline-grid;
 place-items:center;
 width:42px;height:42px;
 background:#3d1d31;
 border:1px solid #673249;
 border-radius:12px;
 color:#ffb2cf;
 font:600 17px Yekan,sans-serif;
}
.landing .steps p{color:var(--muted)}
.landing .games-section{margin-top:25px;background:linear-gradient(180deg,#26112275,transparent)}
.landing .game-search{background:#221725;border-color:#624055;border-radius:13px}
.landing .game-card{border-radius:16px;border-color:#4b3043;background:#211725;text-align:right}
.landing .game-card:hover{border-color:#dc678e;box-shadow:0 13px 32px #08060990}
.landing .game-image{height:auto;aspect-ratio:320/224}
.landing .game-image img{filter:none}
.landing .game-image::after{background:linear-gradient(0deg,#211725 0%,transparent 35%)}
.landing .game-card .game-name{min-height:38px;gap:6px;line-height:1.35;overflow-wrap:anywhere}
.landing .game-card small{color:#c3a4b7}
.landing .server-card,.landing .route-panel,.landing .plan,.landing .faqs details{background-color:var(--surface);border-color:var(--line)}
.landing .server-card{border-radius:16px}
.landing .server-card.selected{border-color:#e46694;background:linear-gradient(115deg,#3d1c32,#281724)}
.landing .route-panel{border-radius:18px;box-shadow:0 18px 45px #0003}
.landing .route-index{background:#46243a;color:#ffb0ce}
.landing .plan{border-radius:18px}
.landing .plan.featured{border-color:#b84f79}
.landing .faqs{display:grid;gap:10px;align-content:start}
.landing .faqs details,.landing .faqs details:first-child{border:1px solid var(--line);border-radius:13px;padding:13px 17px}
.landing .faqs details[open]{border-color:#80506a}
.landing .download-banner{background:linear-gradient(130deg,#35182d,#19131f);border-color:#784259}
@media(max-width:800px){
 .landing .hero{grid-template-columns:1fr;gap:30px;min-height:0;padding:42px 0 40px}
 .landing .hero h1{font-size:clamp(55px,10vw,79px)}
 .landing .hero h1 br{display:none}
 .landing .hero h1 em{margin-inline-start:6px}
 .landing .hero-description{margin-inline:auto}
 .landing .intro-bar p{padding-block-start:14px}
 .landing .header nav.is-open{gap:12px}
}
@media(max-width:520px){
 .landing .brand img{width:114px}
 .landing .hero-description{font-size:16px}
 .landing .steps article{padding:15px}
 .landing .section-head h2{font-size:27px}
 .landing .game-search{min-width:0}
 .landing .game-grid{gap:10px}
 .landing .intro-bar b,.landing .intro-bar>div:nth-child(3) b{font-size:26px}
 .landing .intro-bar span{padding-inline:5px;text-align:center}
}