:root { --ink:#292741; --muted:#6d6b86; --violet:#7563e8; --deep:#433595; --lavender:#f4f1ff; --paper:#fdfcff; --pink:#f5a6d4; --line:#e8e4f6; --shadow:0 22px 50px rgba(71,51,146,.13); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:"DM Sans",sans-serif; } a { color:inherit; } .shell { width:min(1140px, calc(100% - 40px)); margin:0 auto; } .skip-link { position:absolute; left:-999px; } .skip-link:focus { left:16px; top:16px; z-index:99; padding:12px; background:white; }
.site-header { position:sticky; top:0; z-index:10; border-bottom:1px solid rgba(232,228,246,.7); background:rgba(253,252,255,.88); backdrop-filter:blur(18px); } .nav { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:28px; } .brand { display:flex; align-items:center; gap:8px; color:#35304d; font:600 20px Fredoka,sans-serif; text-decoration:none; letter-spacing:-.5px; } .brand>span:last-child span { color:var(--violet); } .brand-mark { display:grid; width:33px; height:33px; place-items:center; border-radius:11px; color:white; background:linear-gradient(145deg,#8c7bff,#5946c7); box-shadow:0 5px 10px #bfb5f6; font-size:20px; }.nav-links { display:flex; align-items:center; gap:28px; }.nav-links a { text-decoration:none; font-size:14px; font-weight:600; color:#5d5975; }.nav-links a:hover { color:var(--violet); }.nav-links .nav-contact { padding:10px 16px; border:1px solid var(--line); border-radius:99px; color:var(--deep); }.menu-button { display:none; }
.hero { position:relative; overflow:hidden; padding:92px 0 96px; background:radial-gradient(circle at 86% 23%,#e9e0ff 0,transparent 24%),radial-gradient(circle at 10% 82%,#f7dcf0 0,transparent 21%),linear-gradient(135deg,#fbfaff,#f2efff); }.hero-grid { display:grid; grid-template-columns:.95fr 1.05fr; gap:42px; align-items:center; }.eyebrow { margin:0 0 14px; color:#766ce1; font-size:12px; font-weight:700; letter-spacing:1.25px; text-transform:uppercase; }.eyebrow span { color:#b294ff; font-size:18px; vertical-align:-2px; }.hero h1,.section h2,.cta h2 { margin:0; font:700 clamp(43px,5.5vw,70px)/.98 Fredoka,sans-serif; letter-spacing:-2px; }.hero h1 em,.section h2 em { color:var(--violet); font-style:normal; }.intro { max-width:490px; margin:24px 0 29px; color:var(--muted); font-size:18px; line-height:1.65; }.hero-actions { display:flex; align-items:center; gap:25px; }.button { display:inline-flex; align-items:center; gap:14px; border:0; border-radius:14px; padding:15px 20px; font-weight:700; text-decoration:none; transition:transform .2s,box-shadow .2s; }.button:hover { transform:translateY(-2px); }.button-primary { color:white; background:var(--violet); box-shadow:0 9px 18px rgba(105,84,220,.25); }.text-link { color:#595473; font-size:14px; font-weight:700; text-decoration:none; }.text-link:hover { color:var(--violet); }
.hero-art { position:relative; height:442px; min-width:0; }.orb { position:absolute; border-radius:50%; background:#e8dfff; }.orb-a { width:352px; height:352px; right:68px; top:37px; }.orb-b { width:85px; height:85px; right:8px; top:22px; background:#f7cae5; }.character-card { position:absolute; z-index:2; width:183px; height:183px; background-position:center; background-repeat:no-repeat; background-size:contain; filter:drop-shadow(0 15px 16px rgba(71,51,146,.18)); transition:transform .3s,filter .3s; }.character-card:hover { filter:drop-shadow(0 22px 18px rgba(71,51,146,.25)); }.character-one { width:264px; height:264px; top:75px; right:130px; background-image:url("assets/shadeling-comum-3.png"); transform:rotate(-4deg); }.character-two { width:154px; height:154px; right:5px; top:74px; background-image:url("assets/shadeling-raro-166.png"); transform:rotate(8deg); }.character-three { width:143px; height:143px; left:21px; bottom:29px; background-image:url("assets/shadeling-raro-50.png"); transform:rotate(7deg); }.character-one:hover { transform:translateY(-8px) rotate(-2deg); }.character-two:hover { transform:translateY(-8px) rotate(10deg); }.character-three:hover { transform:translateY(-8px) rotate(5deg); }.sparkle { position:absolute; z-index:3; color:#9a89fc; font-size:28px; }.sparkle-one { top:37px; left:72px; }.sparkle-two { bottom:65px; right:20px; font-size:21px; }.sparkle-three { top:70px; right:171px; color:#ef9fcf; }.hero-note { position:absolute; z-index:3; right:41px; bottom:21px; padding:12px 15px; border-radius:13px; background:rgba(255,255,255,.9); box-shadow:0 12px 26px rgba(69,48,139,.1); color:#5d5779; font-size:12px; font-weight:700; }.hero-note span { color:#8f7cf3; }.cloud-edge { position:absolute; right:-5%; bottom:-44px; left:-5%; height:90px; border-radius:50% 50% 0 0/100% 100% 0 0; background:var(--paper); }
.section { padding:104px 0; }.section-heading { max-width:650px; margin:0 auto 52px; text-align:center; }.section h2 { font-size:clamp(38px,4.2vw,55px); }.section-heading>p:last-child,.creatures-copy>p:last-child,.about-copy>p:last-of-type { color:var(--muted); font-size:17px; line-height:1.7; }.game-showcase { display:grid; grid-template-columns:190px 1fr 190px; gap:48px; justify-items:center; align-items:center; }.phone { width:190px; padding:7px; border:6px solid #393651; border-radius:28px; background:#393651; box-shadow:0 22px 40px rgba(57,50,99,.2); }.phone img { display:block; width:100%; border-radius:17px; }.phone-home { transform:rotate(-6deg) translateY(21px); }.phone-level { transform:rotate(6deg) translateY(-19px); }.game-copy { max-width:490px; }.pill { display:inline-block; margin-bottom:14px; padding:7px 11px; border-radius:20px; color:#5f4cbe; background:#edeaff; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; }.game-copy h3 { margin:0 0 14px; font:600 38px/1.08 Fredoka,sans-serif; letter-spacing:-1px; }.game-copy>p { color:var(--muted); line-height:1.65; }.feature-list { display:grid; gap:12px; margin:25px 0 18px; }.feature-list>div { display:flex; align-items:center; gap:12px; }.feature-icon { display:grid; flex:0 0 36px; width:36px; height:36px; place-items:center; border-radius:12px; color:#6855d7; background:#f0edff; }.feature-list p { margin:0; color:var(--muted); font-size:13px; line-height:1.35; }.feature-list strong { color:var(--ink); }.store-note { color:#736e91; font-size:12px; font-weight:700; }
.creatures { overflow:hidden; background:linear-gradient(140deg,#f5f1ff,#fbf6fd); }.creatures-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:center; }.creatures-copy h2 { margin-bottom:20px; }.creature-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; padding:12px; border-radius:28px; background:rgba(255,255,255,.7); box-shadow:var(--shadow); }.creature { min-height:142px; border-radius:19px; background-color:#fff; background-repeat:no-repeat; background-position:center; background-size:86%; transition:transform .25s,box-shadow .25s; }.creature:hover { box-shadow:0 10px 19px rgba(71,51,146,.15); transform:scale(1.06) rotate(2deg); z-index:1; }.creature-a { background-image:url("assets/shadeling-lendario-31.png"); }.creature-b { background-image:url("assets/shadeling-epico-94.png"); }.creature-c { background-image:url("assets/shadeling-comum-3.png"); }.creature-d { background-image:url("assets/shadeling-epico-35.png"); }.creature-e { background-image:url("assets/shadeling-comum-77.png"); }.creature-f { background-image:url("assets/shadeling-comum-114.png"); }
.about { padding-top:110px; }.about-card { display:grid; grid-template-columns:.85fr 1.15fr; overflow:hidden; border-radius:34px; background:linear-gradient(125deg,#7563e8,#5542b7); color:white; }.about-art { position:relative; min-height:415px; overflow:hidden; background:radial-gradient(circle at 50% 45%,#a796ff 0 29%,transparent 29.5%); }.about-art:after { position:absolute; bottom:-56px; left:-15px; width:130%; height:150px; border-radius:50% 50% 0 0; background:#6955d5; content:""; }.about-creature { position:absolute; z-index:1; width:285px; height:285px; top:62px; left:50%; background:url("assets/shadeling-lendario-31.png") center/contain no-repeat; filter:drop-shadow(0 19px 19px rgba(39,22,105,.35)); transform:translateX(-50%) rotate(-5deg); }.about-star { position:absolute; z-index:2; color:#dcd5ff; font-size:28px; }.about-star.one { top:42px; left:22%; }.about-star.two { right:19%; top:65px; }.about-star.three { right:22%; bottom:94px; }.about-copy { align-self:center; padding:60px 70px 60px 35px; }.about-copy .eyebrow { color:#e2ddff; }.about-copy h2 { margin-bottom:22px; color:white; }.about-copy h2 em { color:#f2b9df; }.about-copy>p:last-of-type { color:#eeebff; }.button-light { margin-top:13px; color:#5341b4; background:#fff; }
.privacy { background:#f7f5fc; }.privacy-wrap { display:grid; grid-template-columns:.7fr 1.3fr; gap:60px; align-items:start; }.privacy-intro { position:sticky; top:110px; }.privacy-intro>p:last-child { color:var(--muted); }.privacy-card { padding:37px 42px; border:1px solid var(--line); border-radius:24px; background:#fff; color:#56526c; font-size:14px; line-height:1.7; }.privacy-card>p:first-child { margin-top:0; color:#46415d; }.privacy-card h3 { margin:29px 0 7px; color:#3c3658; font:600 20px Fredoka,sans-serif; }.privacy-card a { color:#5e4dc4; font-weight:700; }.privacy-card ul { margin:8px 0; padding-left:20px; }.privacy-card li { margin:8px 0; }.privacy-card strong { color:#47405f; }
.cta { padding:100px 0; background:var(--paper); }.cta-card { display:flex; align-items:center; justify-content:space-between; gap:35px; padding:48px 58px; border-radius:31px; color:white; background:linear-gradient(115deg,#3f328d,#745fdc); overflow:hidden; position:relative; }.cta-card:after { position:absolute; right:-68px; top:-110px; width:290px; height:290px; border:34px solid rgba(205,197,255,.16); border-radius:50%; content:""; }.cta-card .eyebrow { color:#dcd6ff; }.cta-card h2 { font-size:39px; }.cta-card .button { z-index:1; white-space:nowrap; }.footer { padding:28px 0; border-top:1px solid var(--line); }.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; color:#77728b; font-size:12px; }.footer .brand { font-size:17px; }.footer .brand-mark { width:27px; height:27px; border-radius:9px; font-size:16px; }.footer a:last-child { font-weight:700; text-decoration:none; }.footer a:last-child:hover { color:var(--violet); }
.reveal { animation:rise .65s both; } @keyframes rise { from { opacity:0; transform:translateY(15px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:850px) { .hero-grid,.creatures-layout,.privacy-wrap { grid-template-columns:1fr; }.hero { padding-top:73px; }.hero-copy { text-align:center; }.intro { margin-right:auto; margin-left:auto; }.hero-actions { justify-content:center; }.hero-art { width:min(540px,100%); margin:auto; }.game-showcase { grid-template-columns:1fr 1fr; gap:28px; }.game-copy { grid-column:span 2; grid-row:1; text-align:center; }.feature-list { max-width:390px; margin-right:auto; margin-left:auto; text-align:left; }.phone-home { grid-column:1; }.phone-level { grid-column:2; }.creatures-copy { text-align:center; }.about-card { grid-template-columns:1fr; }.about-copy { padding:46px; }.privacy-intro { position:static; text-align:center; }.privacy-card { padding:30px; }.cta-card { padding:45px; }.cta-card h2 { font-size:35px; } }
@media (max-width:600px) { .shell { width:min(100% - 28px,1140px); }.nav { min-height:64px; }.menu-button { display:flex; align-items:center; gap:6px; padding:8px; border:0; background:transparent; color:#56516d; font:600 13px "DM Sans",sans-serif; }.nav-links { display:none; position:absolute; top:64px; right:14px; left:14px; padding:18px; border:1px solid var(--line); border-radius:16px; background:white; box-shadow:var(--shadow); flex-direction:column; align-items:stretch; gap:14px; }.nav-links.open { display:flex; }.nav-links .nav-contact { text-align:center; }.hero { padding:58px 0 73px; }.hero h1 { font-size:47px; }.hero-art { height:333px; transform:scale(.86); transform-origin:top center; margin-bottom:-47px; }.game-showcase { grid-template-columns:1fr 1fr; gap:12px; }.game-copy { grid-column:span 2; }.phone { width:145px; border-width:4px; border-radius:22px; }.section { padding:75px 0; }.section-heading { margin-bottom:35px; }.creature-gallery { gap:7px; padding:8px; border-radius:19px; }.creature { min-height:93px; border-radius:13px; }.about { padding-top:75px; }.about-art { min-height:295px; }.about-creature { width:215px; height:215px; top:41px; }.about-copy { padding:37px 27px; }.privacy-card { padding:24px 21px; font-size:13px; }.privacy-card h3 { font-size:18px; }.cta { padding:70px 0; }.cta-card { align-items:flex-start; flex-direction:column; padding:35px 27px; }.cta-card h2 { font-size:31px; }.footer-inner { align-items:flex-start; flex-direction:column; gap:14px; }.footer-inner p { margin:0; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .reveal { animation:none; } * { transition:none!important; } }