*{margin:0;padding:0;box-sizing:border-box}body{margin:0;padding:0;background-color:#d2d2d2;background-image:repeating-linear-gradient(to right,transparent 0 100px,#25283b22 100px 101px),repeating-linear-gradient(to bottom,transparent 0 100px,#25283b22 100px 101px);font-family:Poppins,system-ui,Avenir,Helvetica,Arial,sans-serif;overflow-x:hidden;overflow-y:auto}#root{width:100vw;min-height:100vh;position:relative}#root:before{position:absolute;width:min(1400px,90vw);top:10%;left:50%;height:90%;transform:translate(-50%);content:"";background-image:url(/images/bg.png);background-size:100%;background-repeat:no-repeat;background-position:top center;pointer-events:none;z-index:0}.banner{width:100%;height:100vh;text-align:center;overflow:hidden;position:relative}.navbar{position:fixed;left:0;top:0;width:250px;height:100vh;display:flex;flex-direction:column;align-items:flex-start;padding:20px 0 30px;z-index:100}.nav-logo h3{font-family:ICA Rubrik,sans-serif;color:#25283b;font-size:2.5em;margin-bottom:50px;margin-left:20px;margin-top:-10px;font-weight:700;letter-spacing:3px;position:relative;z-index:101;text-shadow:2px 2px 4px rgba(255,255,255,.8)}.nav-menu{list-style:none;padding:0;margin:80px 0 0;display:flex;flex-direction:column;gap:12px;width:100%;align-items:flex-start}.nav-menu li{width:90%}.nav-menu a{color:#25283b;text-decoration:none;font-family:Poppins,sans-serif;font-size:1.1em;font-weight:500;display:block;padding:12px 15px;transition:all .3s ease;border-radius:12px;border:1px solid transparent;margin-left:20px;writing-mode:vertical-rl;text-orientation:upright}.nav-menu a:hover{background:#25283b26;border:1px solid rgba(37,40,59,.3);transform:translate(5px)}@media screen and (max-width:1023px){.navbar{width:150px}.nav-logo h3{font-size:1.4em;margin-bottom:50px}.nav-menu a{font-size:.85em;padding:10px 12px}}@media screen and (max-width:767px){.navbar{width:120px}.nav-logo h3{font-size:1.2em;margin-bottom:40px}.nav-menu a{font-size:.75em;padding:8px 10px}}.banner .slider{position:absolute;width:200px;height:250px;top:10%;left:calc(50% - 100px);transform-style:preserve-3d;transform:perspective(1000px);animation:autoRun 20s linear infinite;z-index:2}@keyframes autoRun{0%{transform:perspective(1000px) rotateX(-16deg) rotateY(0)}to{transform:perspective(1000px) rotateX(-16deg) rotateY(360deg)}}.banner .slider .item{position:absolute;inset:0;transform:rotateY(calc((var(--position) - 1) * (360 / var(--quantity)) * 1deg)) translateZ(550px)}.banner .slider .item img{width:100%;height:100%;object-fit:cover;border-radius:20px}.banner .content{position:absolute;bottom:0;left:50%;transform:translate(-50%);width:min(1400px,100vw);height:max-content;padding-bottom:100px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;z-index:1}.banner .content h1{font-family:ICA Rubrik,sans-serif;font-size:16em;line-height:1em;color:#25283b;position:relative}.banner .content h1:after{position:absolute;inset:0;content:attr(data-content);z-index:2;-webkit-text-stroke:2px #d2d2d2;color:transparent}.banner .content .author{font-family:Poppins,sans-serif;text-align:right;max-width:200px}.banner .content h2{font-size:3em}.banner .content .model{background-image:url(/images/model.png);width:100%;height:75vh;position:absolute;bottom:0;left:0;background-size:auto 130%;background-repeat:no-repeat;background-position:top center;z-index:1}@media screen and (max-width:1023px){.banner .slider{width:160px;height:200px;left:calc(50% - 80px)}.banner .slider .item{transform:rotateY(calc((var(--position) - 1) * (360 / var(--quantity)) * 1deg)) translateZ(300px)}.banner .content h1{text-align:center;width:100%;text-shadow:0 10px 20px #000;font-size:7em}.banner .content .author{color:#fff;text-shadow:0 10px 20px #000;z-index:2;max-width:unset;width:100%;text-align:center;padding:0 30px}}@media screen and (max-width:767px){.banner .slider{width:100px;height:150px;left:calc(50% - 50px)}.banner .slider .item{transform:rotateY(calc((var(--position) - 1) * (360 / var(--quantity)) * 1deg)) translateZ(180px)}.banner .content h1{font-size:5em}}.dragons-section{width:100%;min-height:100vh;background:linear-gradient(180deg,#d2d2d2,silver);padding:100px 250px 50px;position:relative;overflow:hidden}.dragons-section:before{position:absolute;content:"";inset:0;background-image:repeating-linear-gradient(to right,transparent 0 100px,#25283b22 100px 101px),repeating-linear-gradient(to bottom,transparent 0 100px,#25283b22 100px 101px);pointer-events:none}.section-header{text-align:center;margin-bottom:60px;position:relative;z-index:2}.section-header h2{font-family:ICA Rubrik,sans-serif;font-size:4em;color:#25283b;margin-bottom:15px;font-weight:700}.section-header p{font-family:Poppins,sans-serif;font-size:1.2em;color:#25283b;opacity:.8}.dragons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:30px;position:relative;z-index:2}.dragon-card{background:#fffffff2;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border-radius:25px;overflow:hidden;transition:none;box-shadow:0 15px 35px #25283b26;border:2px solid rgba(255,255,255,.5);position:relative;cursor:pointer}.card-content{padding:25px;opacity:0;transform:translateY(20px);background:linear-gradient(180deg,transparent 0%,rgba(37,40,59,.95) 100%);position:absolute;bottom:0;left:0;right:0;color:#fff}.card-content h3{font-family:ICA Rubrik,sans-serif;font-size:1.8em;color:#fff;margin-bottom:8px;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.dragon-type{font-family:Poppins,sans-serif;font-size:.9em;color:#ffffffe6;margin-bottom:15px;font-weight:500}.power-info{display:flex;align-items:center;gap:10px;margin-bottom:15px;padding:10px 15px;background:#ffffff26;border-radius:10px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.power-label{font-family:Poppins,sans-serif;font-size:.85em;color:#fffc;font-weight:600}.power-name{font-family:Poppins,sans-serif;font-size:.9em;color:#fff;font-weight:600}.dragon-description{font-family:Poppins,sans-serif;font-size:.95em;color:#ffffffe6;line-height:1.6}.card-image{position:relative;width:100%;height:380px;overflow:hidden;background:linear-gradient(135deg,#25283b,#1a1d2e)}.card-image img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;filter:brightness(1.05)}.element-badge{position:absolute;top:20px;right:20px;width:55px;height:55px;background:#fffffff2;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2em;box-shadow:0 6px 15px #0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.5)}@media screen and (max-width:1400px){.dragons-section{padding:100px 200px 50px 250px}}@media screen and (max-width:1023px){.dragons-section{padding:80px 30px 50px 150px}.section-header h2{font-size:2.5em}.dragons-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}}@media screen and (max-width:767px){.dragons-section{padding:60px 20px 40px 120px}.section-header h2{font-size:2em}.section-header p{font-size:1em}.dragons-grid{grid-template-columns:1fr;gap:20px}.card-image{height:240px}.card-content h3{font-size:1.5em}}