@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@500;600;700;800;900&family=Nunito:wght@400;600;700;800&display=swap');
:root{--bg:#08111e;--panel:#101d2e;--text:#f5f8ff;--muted:#9badc6;--cyan:#30e7d0;--orange:#ff8a25}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 82% 7%,#173357 0,transparent 30%),var(--bg);color:var(--text);font-family:Nunito,sans-serif}a{color:inherit;text-decoration:none}.topbar{height:84px;display:flex;align-items:center;justify-content:space-between;max-width:1240px;margin:auto;padding:0 24px;border-bottom:1px solid #ffffff12}.brand{display:flex;align-items:center;gap:11px;font:900 23px 'Exo 2';letter-spacing:2px}.brand small{display:block;font:700 8px Nunito;letter-spacing:3px;color:var(--cyan)}.brand-mark{display:grid;place-items:center;width:43px;height:43px;background:linear-gradient(145deg,var(--cyan),#188bf5);color:#07101d;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)}nav{display:flex;align-items:center;gap:30px;font-weight:800;font-size:14px}nav a:hover{color:var(--cyan)}.nav-cta{padding:12px 18px;border:1px solid var(--cyan);border-radius:12px;color:var(--cyan)}main{min-height:70vh}.hero{max-width:1240px;min-height:660px;margin:auto;padding:70px 24px;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:70px}.eyebrow{display:block;color:var(--cyan);font:800 12px 'Exo 2';letter-spacing:3px;margin-bottom:15px}.hero h1,.catalog-head h1,.detail-copy>h1,.pack-intro h1{font:900 clamp(45px,6vw,82px)/.97 'Exo 2';letter-spacing:-3px;margin:0}.hero h1 em{font-style:normal;color:var(--orange)}.hero-copy>p{max-width:590px;color:var(--muted);font-size:18px;line-height:1.75;margin:28px 0}.actions{display:flex;gap:15px}.button{display:inline-flex;align-items:center;justify-content:center;border-radius:14px;padding:16px 24px;font-weight:900}.primary{background:linear-gradient(135deg,var(--orange),#ffb02e);color:#17100a;box-shadow:0 12px 30px #ff8a2530}.ghost{border:1px solid #ffffff32}.trust{display:flex;gap:20px;margin-top:28px;color:#8fa0b9;font-size:12px}.hero-stage{min-height:480px;display:grid;place-items:center;position:relative}.orbit{position:absolute;width:420px;height:420px;border:1px solid #30e7d040;border-radius:50%;box-shadow:0 0 80px #30e7d017 inset}.showcase-card,.big-card{position:relative;overflow:hidden;background:radial-gradient(circle at 50% 40%,#ffbb4b80,transparent 34%),linear-gradient(145deg,#162942,#07111e);border:3px solid #ffc247;border-radius:24px;width:275px;height:405px;padding:20px;box-shadow:0 0 30px #ffac2e55,0 25px 60px #0008;transform:rotate(5deg);z-index:2}.showcase-card:before,.big-card:before,.mini-card:before,.reveal-card:before{content:"";position:absolute;inset:5px;border:1px solid #ffffff23;border-radius:inherit;pointer-events:none}.card-number{font:800 12px 'Exo 2';color:#d8e4f4}.creature{height:215px;display:grid;place-items:center;font-size:115px;filter:drop-shadow(0 10px 20px #ff7a0080)}.card-info small,.big-card small{color:#ffc84e;font:900 9px 'Exo 2';letter-spacing:2px}.card-info h2,.big-card h1{font:900 36px 'Exo 2';margin:3px 0}.card-info p,.big-card p{margin:0;color:#bccbe0;font-size:12px}.card-shine{position:absolute;inset:-70%;background:linear-gradient(110deg,transparent 45%,#fff5 49%,transparent 53%);transform:rotate(20deg);animation:shine 4s infinite}@keyframes shine{0%,45%{translate:-30% 0}70%,100%{translate:60% 0}}.float-chip{position:absolute;background:#101c2ee8;border:1px solid #ffffff22;border-radius:12px;padding:12px 16px;font:800 11px 'Exo 2';letter-spacing:1px;backdrop-filter:blur(8px);z-index:3}.chip-one{left:0;top:100px}.chip-two{right:0;bottom:80px}.section{max-width:1240px;margin:auto;padding:85px 24px}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:30px}.section-head h2{font:800 40px 'Exo 2';margin:0}.section-head>a{color:var(--cyan);font-weight:800}.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.mini-card{--accent:#30e7d0;position:relative;overflow:hidden;min-height:330px;border-radius:20px;padding:20px;background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--accent) 35%,transparent),transparent 31%),linear-gradient(145deg,#17283e,#0b1523);border:1px solid color-mix(in srgb,var(--accent) 55%,#ffffff22);transition:.28s}.mini-card:hover{transform:translateY(-9px);box-shadow:0 20px 45px #0006,0 0 20px color-mix(in srgb,var(--accent) 35%,transparent)}.mini-card>span{font:800 11px 'Exo 2';color:#9fb0c6}.mini-creature{height:180px;display:grid;place-items:center;font-size:86px;filter:drop-shadow(0 10px 16px color-mix(in srgb,var(--accent) 50%,transparent))}.mini-card small{color:var(--accent);font:900 9px 'Exo 2';letter-spacing:1.6px}.mini-card h3{font:900 27px 'Exo 2';margin:4px 0}.mini-card b{color:var(--accent);font-size:12px}.legendary{box-shadow:0 0 25px #ff9f1c40}.steps{max-width:1190px;margin:0 auto 100px;display:grid;grid-template-columns:repeat(3,1fr);background:#0e1b2c;border:1px solid #ffffff12;border-radius:25px;padding:38px}.steps>div{padding:10px 35px;border-right:1px solid #ffffff12}.steps>div:last-child{border:0}.steps b{font:900 28px 'Exo 2';color:var(--cyan)}.steps h3{font:800 20px 'Exo 2';margin:9px 0}.steps p{color:var(--muted);font-size:14px;line-height:1.6}.catalog-head,.pack-intro{text-align:center;max-width:800px;margin:75px auto 30px;padding:0 24px}.catalog-head h1,.pack-intro h1{font-size:60px}.catalog-head p,.pack-intro p{color:var(--muted);font-size:17px}.filters{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:35px auto}.filters button{border:1px solid #ffffff20;background:#101c2e;color:#a9b8cb;border-radius:30px;padding:10px 16px;font-weight:800;cursor:pointer}.filters button.active,.filters button:hover{background:var(--cyan);color:#051016}.catalog-grid{max-width:1240px;margin:0 auto 100px;padding:0 24px}.detail{max-width:1150px;margin:70px auto 100px;padding:0 24px;display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:center}.detail-visual{display:grid;place-items:center;min-height:550px;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 20%,transparent),transparent 60%);perspective:900px}.big-card{--accent:#ff9f1c;width:340px;height:500px;border-color:var(--accent);transform:rotateY(-7deg) rotateX(3deg);background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--accent) 45%,transparent),transparent 35%),linear-gradient(145deg,#162942,#07111e)}.big-creature{height:295px;display:grid;place-items:center;font-size:140px;filter:drop-shadow(0 15px 25px color-mix(in srgb,var(--accent) 60%,transparent))}.big-card small,.big-card b{color:var(--accent)}.back{display:block;color:#92a3bb;margin-bottom:45px}.detail-copy>h1{font-size:67px}.lead{color:#b0bfd2;font-size:17px;line-height:1.8}.stats{margin:30px 0}.stats>div{display:grid;grid-template-columns:80px 1fr 40px;align-items:center;gap:12px;margin:13px 0}.stats span{font-weight:800}.stats i{height:8px;background:#ffffff13;border-radius:8px;overflow:hidden}.stats u{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--cyan));border-radius:8px}.stats b{text-align:right}.ability{border-left:3px solid var(--accent);background:#111f31;padding:18px 22px;margin:28px 0}.ability span{font:900 9px 'Exo 2';letter-spacing:2px;color:var(--accent)}.ability h3{font:800 20px 'Exo 2';margin:5px 0}.ability p{color:var(--muted);margin:0}.pack-page{min-height:720px}.pack-area{display:grid;place-items:center;padding:30px 0 100px}.pack{width:285px;height:420px;border:2px solid var(--cyan);border-radius:22px;background:radial-gradient(circle,#2be3ca55,transparent 42%),linear-gradient(145deg,#17324e,#08111e);color:white;box-shadow:0 0 40px #30e7d040,0 30px 60px #0008;cursor:pointer;transition:.3s}.pack:hover{transform:scale(1.04) rotate(-2deg)}.pack>span{display:block;font:900 32px 'Exo 2';letter-spacing:4px}.pack>div{font-size:115px;margin:35px}.pack>b{font:900 18px 'Exo 2';letter-spacing:2px}.pack>small{display:block;color:var(--cyan);font-weight:900;margin-top:45px}.pack.opening{animation:openPack .18s 5 alternate}@keyframes openPack{to{transform:translateX(12px) rotate(3deg);filter:brightness(2)}}.hidden{display:none!important}.reveals{max-width:1240px;margin:50px auto 100px;padding:0 24px;display:flex;justify-content:center;flex-wrap:wrap;gap:15px}.reveal-card{position:relative;width:205px;height:315px;border-radius:17px;padding:15px;background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--accent) 40%,transparent),transparent 30%),linear-gradient(145deg,#17283e,#091321);border:2px solid var(--accent);opacity:0;animation:reveal .55s forwards;animation-delay:var(--delay)}@keyframes reveal{from{opacity:0;transform:translateY(60px) rotateY(90deg)}to{opacity:1;transform:none}}.reveal-card>span{font-size:10px;color:#a3b5ca}.reveal-card>div{height:160px;display:grid;place-items:center;font-size:75px}.reveal-card small,.reveal-card b{color:var(--accent);font-weight:900}.reveal-card h2{font:900 24px 'Exo 2';margin:5px 0}.reveal-card a{display:block;margin-top:10px;font-size:11px;color:#c8d5e6}.reveal-actions{width:100%;text-align:center;margin-top:30px}.reveal-actions h2{font:800 30px 'Exo 2'}footer{max-width:1200px;margin:auto;border-top:1px solid #ffffff12;padding:35px 24px 50px;display:flex;justify-content:space-between;color:#8798af}footer strong{font:900 20px 'Exo 2';letter-spacing:3px;color:white}footer p{margin:3px 0;font-size:12px}footer small{align-self:center}@media(max-width:850px){.topbar{height:auto;padding:18px;align-items:flex-start}.topbar nav{gap:10px;font-size:11px;flex-wrap:wrap;justify-content:flex-end}.topbar nav a:first-child{display:none}.hero{grid-template-columns:1fr;text-align:center;padding-top:55px}.hero-copy>p{margin-left:auto;margin-right:auto}.actions,.trust{justify-content:center}.hero-stage{min-height:450px}.card-grid{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:1fr;margin:20px}.steps>div{border-right:0;border-bottom:1px solid #ffffff12}.detail{grid-template-columns:1fr;gap:15px}.detail-copy{text-align:center}.stats,.ability{text-align:left}.back{margin-bottom:20px}}@media(max-width:520px){.brand{font-size:17px}.brand-mark{width:36px;height:36px}.nav-cta{padding:8px}.hero{padding:50px 18px}.hero h1{font-size:46px}.hero-stage{min-height:410px}.showcase-card{width:235px;height:350px}.creature{height:180px;font-size:95px}.trust{flex-wrap:wrap}.card-grid{grid-template-columns:1fr}.steps{padding:20px}.catalog-head h1,.pack-intro h1,.detail-copy>h1{font-size:43px}.big-card{width:285px;height:425px}.big-creature{height:235px}.detail-visual{min-height:470px}.reveal-card{width:170px;height:280px}.reveal-card>div{height:135px}footer{display:block}}
