@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#08090b;color:#f3f3f0;font-family:Inter,system-ui,sans-serif}a{text-decoration:none;color:inherit}
header{border-bottom:1px solid #202227;position:sticky;top:0;background:#08090bf2;backdrop-filter:blur(14px);z-index:5}.nav{max-width:1180px;margin:auto;height:72px;display:flex;align-items:center;padding:0 24px;gap:34px}.logo{font-weight:800;letter-spacing:.08em}.logo span{color:#d7ff38;margin-right:8px}nav{display:flex;gap:26px;color:#a8abb1;font-size:14px;flex:1}nav a:hover{color:#fff}.cart{background:#15171b;color:#fff;border:1px solid #2a2d32;border-radius:8px;padding:10px 14px}.cart b{background:#d7ff38;color:#0b0c0e;padding:2px 7px;border-radius:20px;margin-left:6px}
main{max-width:1180px;margin:auto}.hero{min-height:590px;padding:90px 24px;display:grid;grid-template-columns:1.25fr .75fr;gap:70px;align-items:center}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.18em;color:#9ea2aa}.hero h1{font-size:clamp(52px,7vw,92px);line-height:.94;letter-spacing:-.06em;margin:18px 0}.hero h1 span{color:#d7ff38}.sub{color:#aeb1b8;max-width:580px;line-height:1.7;font-size:17px}.cta{display:inline-block;margin-top:24px;background:#d7ff38;color:#08090b;font-weight:800;padding:15px 21px;border-radius:7px}.hero-card{height:330px;border:1px solid #292c31;background:radial-gradient(circle at 50% 40%,#24282d,#0d0f12 60%);display:flex;flex-direction:column;justify-content:flex-end;padding:28px;position:relative}.crosshair{position:absolute;inset:0;display:grid;place-items:center;font-size:100px;font-weight:200;color:#d7ff38}.hero-card p,.hero-card strong{position:relative}.hero-card strong{font-size:23px}.shop,.why,.faq{padding:90px 24px}.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:28px}.section-head h2,.why h2,.faq h2{font-size:42px;letter-spacing:-.04em;margin:8px 0}.filter{border:1px solid #292c31;padding:9px 12px;color:#a8abb1;font-size:11px;letter-spacing:.12em}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.product{border:1px solid #272a2f;background:#0e1013;padding:24px;min-height:300px;display:flex;flex-direction:column}.tag{font-size:10px;color:#d7ff38;letter-spacing:.15em;font-weight:800}.product h3{font-size:25px;margin:28px 0 10px}.product p{color:#999da5;line-height:1.6;font-size:14px}.bottom{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:24px}.price{font-weight:800;font-size:20px}.buy{background:#d7ff38;border:0;padding:11px 15px;border-radius:6px;font-weight:800;cursor:pointer}.why{border-top:1px solid #202227;border-bottom:1px solid #202227;display:grid;grid-template-columns:.8fr 1.2fr;gap:60px}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.features article{border-left:1px solid #34373c;padding-left:18px}.features b{color:#d7ff38}.features h3{margin-bottom:8px}.features p{color:#999da5;line-height:1.5;font-size:14px}.faq details{border-top:1px solid #292c31;padding:20px 0}.faq summary{cursor:pointer;font-weight:600}.faq details p{color:#999da5;line-height:1.6;max-width:700px}footer{border-top:1px solid #202227;max-width:1180px;margin:auto;padding:35px 24px;display:flex;justify-content:space-between;color:#777b83;font-size:12px}
.modal{display:none;position:fixed;inset:0;background:#000b;z-index:10;align-items:center;justify-content:center;padding:20px}.modal.open{display:flex}.modal-box{background:#101216;border:1px solid #30333a;width:min(520px,100%);padding:30px;position:relative}.close{position:absolute;right:18px;top:12px;background:none;border:0;color:#aaa;font-size:30px}.modal-box h2{font-size:36px;margin:5px 0 25px}.item{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid #282b30;color:#c4c7cc}.total{display:flex;justify-content:space-between;padding:22px 0;font-size:19px}.pay{width:100%;padding:15px;background:#d7ff38;border:0;font-weight:800;border-radius:6px;cursor:pointer}.modal small{display:block;color:#747981;margin-top:13px;line-height:1.5}
@media(max-width:800px){.hero,.why{grid-template-columns:1fr}.hero{padding-top:55px}.hero-card{height:250px}.grid,.features{grid-template-columns:1fr}.nav nav{display:none}.section-head{align-items:start;gap:15px;flex-direction:column}footer{display:block}.why h2{font-size:35px}}

/* Animated Siege-style visual layer */
.hero-card{overflow:hidden}
.siege-visual{position:absolute;inset:0;background:
linear-gradient(120deg,#0b0d10cc,#11151bcc),
url("https://ubistatic-a.ubisoft.com/0090/PROD/ubiblog/2017/6/blitzandfrost.jpg") center/cover;
filter:saturate(.72);animation:heroPan 9s ease-in-out infinite alternate}
.scanline{position:absolute;inset:-20%;background:linear-gradient(transparent 48%,rgba(215,255,56,.12) 50%,transparent 52%);background-size:100% 18px;animation:scan 4s linear infinite}
.operator{position:absolute;inset:0;background:linear-gradient(90deg,transparent 45%,rgba(215,255,56,.08));mix-blend-mode:screen}
.operator-a{animation:glitchA 5s infinite}
.operator-b{animation:glitchB 7s infinite}
.visual-label{position:absolute;top:20px;right:20px;font-size:10px;letter-spacing:.2em;color:#d7ff38;border:1px solid #d7ff3866;padding:7px 9px;background:#08090b99}
.image-strip{overflow:hidden;border-top:1px solid #202227;border-bottom:1px solid #202227;background:#08090b}
.strip-track{display:flex;width:max-content;animation:stripMove 28s linear infinite}
.siege-img{width:300px;height:150px;margin:10px;position:relative;overflow:hidden;border:1px solid #292c31;background-size:cover;background-position:center;filter:grayscale(.25) contrast(1.1);transition:filter .3s,transform .3s}
.siege-img:hover{filter:none;transform:scale(1.03)}
.siege-img span{position:absolute;bottom:10px;left:12px;font-size:10px;letter-spacing:.18em;font-weight:800;color:#fff;background:#08090bcc;padding:7px 9px}
.img-one{background-image:linear-gradient(135deg,#1118,#0007),url("https://ubistatic-a.ubisoft.com/0090/PROD/ubiblog/2017/6/blitzandfrost.jpg")}
.img-two{background-image:linear-gradient(135deg,#1118,#0007),url("https://ubistatic-a.ubisoft.com/0090/PROD/ubiblog/2017/6/blitzandfrost.jpg");background-position:70% center}
.img-three{background-image:linear-gradient(135deg,#1118,#0007),url("https://ubistatic-a.ubisoft.com/0090/PROD/ubiblog/2017/6/blitzandfrost.jpg");background-position:30% center}
@keyframes heroPan{0%{transform:scale(1.02) translateX(-1%)}100%{transform:scale(1.1) translateX(2%)}}
@keyframes scan{from{transform:translateY(-20%)}to{transform:translateY(20%)}}
@keyframes glitchA{0%,90%,100%{opacity:.05;transform:translateX(0)}92%{opacity:.5;transform:translateX(4px)}94%{opacity:.1;transform:translateX(-4px)}}
@keyframes glitchB{0%,88%,100%{opacity:.03;transform:translateX(0)}90%{opacity:.3;transform:translateX(-5px)}93%{opacity:.06;transform:translateX(5px)}}
@keyframes stripMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.strip-track,.siege-visual,.scanline,.operator{animation:none}}
