/* Polices auto-hébergées (RGPD + rapidité : aucune requête vers Google) */
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/bebas-neue-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/poppins-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/poppins-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/poppins-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/poppins-latin-700-normal.woff2) format('woff2')}
/* ===== Direction : bento pastel, bleu profond, cartes blanches arrondies ===== */
:root{--ink:#0d2a5c;--blue:#2a6fdb;--sky:#29b6f6;--peri:#7b8fd4;--sh:0 18px 40px rgba(42,74,154,.14);--disp:'Bebas Neue','Arial Narrow',Impact,sans-serif}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:radial-gradient(circle at 12% 0,#d9e5ff,transparent 45%),radial-gradient(circle at 92% 35%,#e7defd,transparent 40%),#f4f7fd;color:var(--ink);font:16px/1.65 Poppins,system-ui,sans-serif;overflow-x:hidden}
h1,h2{font-family:var(--disp);font-weight:400;line-height:.92;letter-spacing:.02em;text-transform:uppercase}
h3{font-weight:600;line-height:1.3;margin-bottom:.5rem}h3 small{font-weight:400;opacity:.6}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px}

/* Preloader : 7 éléments */
#preloader{position:fixed;inset:0;z-index:99;display:grid;place-items:center;background:#eef3fc;transition:opacity .8s,visibility .8s}
#preloader.done{opacity:0;visibility:hidden}
.orbs{display:flex;gap:clamp(8px,2vw,20px)}
.orb{width:clamp(34px,8vw,54px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-size:1.3rem;color:#0d2a5c55;background:#fff;border:1px solid #0d2a5c1f;transition:.5s}
.orb.on{color:#fff;background:var(--c);border-color:#fff;box-shadow:0 0 0 5px #fff,0 10px 28px var(--c);transform:translateY(-8px) scale(1.1)}
.e0{--c:#ff6a4d}.e1{--c:#3d8bff}.e2{--c:#2fd6a5}.e3{--c:#a77bff}.e4{--c:#79c536}.e5{--c:#6fd3f2}.e6{--c:#e6b32e}

/* Navbar en pilule flottante */
#nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);width:min(1100px,92vw);z-index:50;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem .55rem .5rem 1.4rem;border-radius:999px;background:rgba(255,255,255,.7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:.35s}
#nav.solid{background:rgba(255,255,255,.94);box-shadow:var(--sh)}
.logo{font:1.7rem var(--disp);color:var(--ink);text-decoration:none;letter-spacing:.03em}
#nav nav{display:flex;align-items:center;gap:1.3rem}
#nav nav>a:not(.cta){color:var(--ink);text-decoration:none;font-size:.9rem;border-bottom:2px solid transparent}
#nav nav>a:not(.cta):hover{border-color:var(--ink)}
#langbtn{border:1.5px solid var(--ink);background:none;color:var(--ink);border-radius:999px;padding:.25rem .8rem;font:600 .8rem inherit;cursor:pointer}

/* Boutons : glow + éclat au survol */
.cta{display:inline-block;padding:.75rem 1.7rem;border-radius:999px;border:0;background:#fff;color:var(--ink);font:600 .92rem Poppins,sans-serif;text-decoration:none;cursor:pointer;position:relative;overflow:hidden;transition:box-shadow .3s,transform .2s}
.cta.dark{background:linear-gradient(135deg,#0d2a5c,#2a6fdb);color:#fff}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.6),transparent 60%);transform:translateX(-120%)}
.cta:hover{transform:translateY(-2px);box-shadow:0 0 0 4px rgba(41,182,246,.25),0 10px 34px rgba(41,182,246,.7)}
.cta:hover::after{transform:translateX(120%);transition:transform .8s}

/* Hero : bannière bleue, cristaux en parallaxe (transform uniquement) */
.hero{position:relative;margin:90px 4vw 0;min-height:min(80svh,720px);border-radius:34px;overflow:hidden;display:flex;align-items:center;padding:0 clamp(1.5rem,6vw,5rem);color:#fff;background:linear-gradient(120deg,#0a3585,#2a6fdb 55%,#29b6f6);box-shadow:var(--sh)}
.layer{position:absolute;inset:-15% 0;pointer-events:none;will-change:transform}
.l1{background:radial-gradient(circle at 78% 28%,rgba(255,255,255,.4),transparent 30%),radial-gradient(circle at 15% 95%,rgba(123,143,212,.7),transparent 40%)}
.l2{background:radial-gradient(circle,#fff 1.2px,transparent 2px) 0 0/84px 84px;opacity:.3}
.cr{position:absolute;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:linear-gradient(160deg,rgba(255,255,255,.75),rgba(159,230,255,.3))}
.c1{right:14%;top:14%;width:190px;height:310px}.c2{right:30%;top:52%;width:100px;height:170px;opacity:.6}
.c3{right:3%;top:48%;width:150px;height:250px;opacity:.85}.c4{right:38%;top:8%;width:60px;height:100px;opacity:.5}
.hero-in{position:relative;max-width:660px;will-change:transform}
h1{font-size:clamp(3.4rem,10.5vw,8.4rem);text-shadow:0 8px 40px rgba(6,30,90,.35)}
.hero p{margin:1.4rem 0 2rem;max-width:440px;opacity:.92}
.chip{position:absolute;background:#fff;color:var(--ink);border-radius:10px;padding:.35rem .9rem;font:600 .8rem Poppins,sans-serif;box-shadow:0 8px 22px rgba(6,30,90,.25);animation:bob 5s ease-in-out infinite alternate}
.k1{right:12%;bottom:22%;transform:rotate(-4deg)}.k2{right:28%;bottom:9%;transform:rotate(3deg);animation-delay:-2s}.k3{right:5%;bottom:10%;animation-delay:-3.5s}
@keyframes bob{to{translate:0 -10px}}

/* Sections & cartes blanches */
.sec{max-width:1150px;margin:auto;padding:7rem 5vw 0}
h2{font-size:clamp(2.8rem,6.5vw,4.6rem);margin-bottom:2rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.4rem}
.card,.box{background:#fff;border-radius:26px;box-shadow:var(--sh);padding:1.7rem}
.card{transition:transform .15s ease-out;transform-style:preserve-3d;will-change:transform}
.ico{display:grid;place-items:center;width:50px;height:50px;border-radius:14px;margin-bottom:1rem;background:linear-gradient(160deg,#1a4494,#0d2a5c);color:#fff;font-size:1.25rem}
.pick{display:inline-block;margin-top:1rem;padding:.3rem 1rem;border-radius:999px;background:#e8eefc;color:var(--blue);text-decoration:none;font-weight:600;font-size:.88rem}
.bento{display:grid;grid-template-columns:1.1fr 1fr;gap:1.4rem;margin-bottom:1.4rem}
.tiles p{font-size:.9rem;opacity:.8}
svg{width:100%;height:auto;margin-top:.6rem}
.ln{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2s ease .3s}.rv.in .ln{stroke-dashoffset:0}
.note{font-size:.82rem;opacity:.7;margin-top:.8rem}

/* Avant / après */
.ba{position:relative;--p:50%;min-height:210px;border-radius:20px;overflow:hidden;margin-top:.6rem}
.ba>div{position:absolute;inset:0;padding:1.2rem 1.4rem;display:grid;align-content:center;gap:.3rem}
.bef{background:#e6ebf7}.aft{background:linear-gradient(135deg,#0a3585,#29b6f6);color:#fff;clip-path:inset(0 0 0 var(--p))}
.ba em{font-style:normal;font-weight:600;opacity:.7}
.st{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}.st strong{font:2rem var(--disp)}
.hd{position:absolute;top:0;bottom:0;left:var(--p);width:3px;background:#fff;box-shadow:0 0 14px #fff}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize}

/* Formulaire */
form{max-width:640px;display:grid;gap:1rem}
label{display:grid;gap:.35rem;font-size:.92rem;font-weight:600}
input,select,textarea{width:100%;padding:.75rem 1rem;border-radius:14px;border:1.5px solid #d5def3;background:#f3f6fd;color:var(--ink);font:400 1rem Poppins,sans-serif}
.chk{display:flex;gap:.7rem;align-items:flex-start;font-weight:400}.chk input{width:auto;margin-top:.35rem}
.hp{position:absolute;left:-9999px}
.flash{padding:.7rem 1rem;border-radius:14px;font-size:.9rem}.flash.ok{background:#dff5ff}.flash.err{background:#ffe3e3}
dialog{border:0;border-radius:26px;padding:1.8rem;max-width:min(540px,92vw);margin:auto;color:var(--ink);box-shadow:0 30px 80px rgba(13,42,92,.4)}
dialog::backdrop{background:rgba(13,42,92,.45);backdrop-filter:blur(6px)}
dialog[open]{animation:pop .35s ease-out}@keyframes pop{from{opacity:0;transform:translateY(20px) scale(.97)}}
dt{color:var(--blue);font-weight:600;font-size:.82rem;margin-top:.8rem}dd{margin:0;overflow-wrap:anywhere}
.row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.3rem}
footer{max-width:1150px;margin:6rem auto 0;padding:2rem 5vw 3rem;font-size:.88rem}
footer p{opacity:.75;max-width:760px;margin:.5rem 0 1rem}summary{cursor:pointer;font-weight:600}

/* Apparition au scroll */
.rv{opacity:0;transform:translateY(34px);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media(max-width:820px){.bento{grid-template-columns:1fr}.chip{display:none}.hero{margin-top:84px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}.rv{opacity:1;transform:none}.ln{stroke-dashoffset:0}}

/* Primogems, offres, devise */
.sprite{position:absolute;width:0;height:0}
#cur{width:auto;padding:.25rem .6rem;border-radius:999px;border:1.5px solid var(--ink);background:none;font:600 .8rem Poppins,sans-serif;cursor:pointer}
.from{margin-top:.8rem;font-size:.9rem}.from b{color:var(--blue);font-size:1.15rem}
.offers{margin-bottom:1.4rem}
.pg{display:grid;grid-template-columns:auto 1fr auto auto auto;align-items:center;gap:1rem;padding:1rem 0;border-bottom:1px solid #e3e9f7}
.pg:first-child{padding-top:0}
.gems{display:flex;min-width:78px}.gm{width:30px;height:30px;margin:0 -7px 0 0;filter:drop-shadow(0 3px 6px rgba(41,182,246,.5))}
.pgt b{display:block;font-size:1.05rem}.pgt small{opacity:.65}
.arr{color:var(--sky);font-size:1.5rem}
.pgp s{opacity:.5;margin-right:.6rem}.pgp strong{font:2rem var(--disp);color:var(--blue)}
.pgp em{margin-left:.6rem;background:#ffe9a8;padding:.1rem .6rem;border-radius:999px;font:600 .78rem Poppins,sans-serif}
.pg .pick{margin:0}
@media(max-width:700px){.pg{grid-template-columns:auto 1fr;}.arr{display:none}}

/* ===== Mélange : ciel nocturne onirique (nuages, étoiles, comète) + cartes pastel ===== */
.ic{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hero{background:linear-gradient(180deg,#0b1030 0%,#2b3690 45%,#6b7fe0 82%,#a9bdf5 100%)}
.l2 .sp{position:absolute;background:#fff;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:tw 3s ease-in-out infinite alternate}
.s1{left:8%;top:22%;width:18px;height:18px}.s2{left:46%;top:14%;width:12px;height:12px;animation-delay:-1s}.s3{right:30%;top:32%;width:22px;height:22px;animation-delay:-2s}.s4{left:24%;top:52%;width:10px;height:10px;animation-delay:-.5s}.s5{right:8%;top:20%;width:14px;height:14px;animation-delay:-1.6s}
@keyframes tw{from{opacity:.25;scale:.7}to{opacity:1;scale:1.15}}
.cm{position:absolute;left:-20%;top:28%;width:340px;height:4px;border-radius:4px;background:linear-gradient(90deg,transparent,#8fe3ff,#fff);rotate:24deg;animation:comet 9s linear infinite}
@keyframes comet{to{translate:150vw 60vh;opacity:0}}
.cl{position:absolute;bottom:0;border-radius:50% 50% 0 0;background:#c9d8ff;border:3px solid rgba(255,255,255,.75);box-shadow:70px -26px 0 -8px #d7e3ff,-80px -16px 0 -18px #d7e3ff}
.cl.a{left:-6%;width:34%;height:200px;bottom:14%}.cl.b{left:34%;width:30%;height:150px;bottom:6%;background:#b9ccfa}.cl.c{right:-6%;width:38%;height:220px;bottom:14%;background:#e3ecff}
.hero-in{z-index:2}
.mascot{position:absolute;right:9%;bottom:6%;width:min(270px,30vw);z-index:3;animation:bob 4.5s ease-in-out infinite alternate;filter:drop-shadow(0 16px 24px rgba(6,20,80,.4))}
.mascot svg,.mascot img{width:100%;height:auto;display:block;margin:0}
.bubble{position:absolute;right:26%;top:16%;z-index:4;max-width:270px;background:rgba(255,255,255,.94);color:var(--ink);border-radius:18px;padding:.8rem 1.1rem;font-size:.86rem;box-shadow:0 12px 30px rgba(6,20,80,.3)}
.bubble::after{content:"";position:absolute;right:-10px;bottom:22px;border:10px solid transparent;border-left-color:rgba(255,255,255,.94);border-right:0}
.bubble b{color:var(--blue)}.bubble p{margin:.2rem 0 0;max-width:none;opacity:1;min-height:3.6em}
.chip{display:none}
/* Chargement façon jeu */
.pl{text-align:center}.ld{margin-top:1.6rem;font:1.6rem var(--disp);letter-spacing:.08em}
.pbar{width:min(300px,70vw);height:6px;border-radius:6px;background:#0d2a5c1a;margin:.8rem auto;overflow:hidden}
.pbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--sky),var(--blue));animation:fill 2.4s ease-out forwards}
@keyframes fill{to{width:100%}}
.tip{font-size:.85rem;opacity:.7;max-width:320px;margin:0 auto}
#sending{position:fixed;inset:0;z-index:120;display:grid;place-content:center;justify-items:center;gap:1rem;background:rgba(11,16,48,.8);backdrop-filter:blur(8px);color:#fff;font-weight:600}
#sending[hidden]{display:none}
.spin{width:58px;height:58px;border-radius:50%;border:5px solid rgba(255,255,255,.25);border-top-color:#8fe3ff;animation:rot 1s linear infinite}@keyframes rot{to{rotate:360deg}}
@media(max-width:820px){.bubble{display:none}.mascot{width:130px;right:4%}}
/* Admin */
.adm{max-width:980px;margin:2rem auto;padding:0 5vw}.adm h1{font-size:3rem;margin-bottom:1rem}.adm .box{margin-bottom:1.4rem;max-width:none}
.tb{width:100%;border-collapse:collapse;font-size:.9rem}.tb th,.tb td{padding:.5rem;text-align:left;border-bottom:1px solid #e3e9f7}.tb input{padding:.4rem .6rem;max-width:110px}
.bd{background:#ffe9a8;border-radius:999px;padding:.1rem .6rem;font-size:.78rem;font-weight:600}
.g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}

/* ===== THÈME NUIT GLOBAL : marque Nicole ===== */
:root{--ink:#e9f0ff;--hero-img:linear-gradient(transparent,transparent);--moon-img:linear-gradient(transparent,transparent);--cloud1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 160' preserveAspectRatio='none'%3E%3Cpath d='M0 100Q30 60 70 78Q90 30 150 50Q200 10 250 48Q300 20 340 60Q380 40 420 75Q470 35 520 62Q560 30 610 55Q660 20 710 58Q760 38 800 70Q850 30 900 56Q950 18 1000 55Q1050 35 1090 72Q1140 55 1200 100V160H0Z' fill='%23c3d3ff' stroke='%23fff' stroke-width='3'/%3E%3C/svg%3E");--cloud2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 160' preserveAspectRatio='none'%3E%3Cpath d='M0 100Q50 70 100 82Q130 44 190 64Q240 34 290 66Q340 40 380 78Q440 50 490 76Q540 46 600 72Q650 44 700 74Q760 48 820 78Q880 50 930 76Q990 50 1040 80Q1100 62Q1140 55 1200 100V160H0Z' fill='%23e6eeff' stroke='%23fff' stroke-width='3'/%3E%3C/svg%3E")}
body{background:linear-gradient(180deg,#080c26 0%,#141c5e 30%,#26339a 65%,#4559c9 100%);color:var(--ink)}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle,#fff 1px,transparent 1.6px) 0 0/90px 90px,radial-gradient(circle,#bfe3ff 1px,transparent 1.8px) 45px 45px/150px 150px;animation:tw2 6s ease-in-out infinite alternate}
@keyframes tw2{from{opacity:.25}to{opacity:.7}}
main,footer,.cwrap{position:relative;z-index:1}
#fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.pt{position:absolute;top:-24px;width:10px;height:14px;border-radius:70% 0 70% 0;background:rgba(255,255,255,.75);animation:fall linear infinite}
@keyframes fall{to{transform:translate3d(70px,112vh,0) rotate(540deg)}}
#preloader{background:radial-gradient(circle at 50% 40%,#2b3690,#080c26);color:#fff}
.orb{background:rgba(255,255,255,.08);color:#ffffff77;border-color:#ffffff33}.orb.on{color:#fff;border-color:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.15),0 0 34px var(--c)}
.pbar{background:#ffffff26}
#nav{background:rgba(12,18,64,.55);border:1px solid rgba(255,255,255,.15)}#nav.solid{background:rgba(12,18,64,.88);box-shadow:0 12px 40px rgba(0,0,0,.35)}
.logo{display:flex;align-items:center;gap:.4rem;font-size:1.9rem}.logo .ic{width:22px;height:22px;stroke:#f2c14e}
.cta{color:#0d2a5c}.cta.dark{color:#fff;background:linear-gradient(135deg,#3b5bdb,#29b6f6)}
h2{background:linear-gradient(90deg,#fff,#9fe1ff,#fff);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s linear infinite}
@keyframes shine{to{background-position:-200% 0}}
.card,.box{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 20px 50px rgba(3,8,40,.35)}
.card:hover,.box:hover{border-color:rgba(127,212,255,.7);box-shadow:0 0 0 1px rgba(127,212,255,.4),0 24px 60px rgba(41,182,246,.3)}
.ico{background:linear-gradient(160deg,#3b5bdb,#29b6f6);box-shadow:0 0 22px rgba(41,182,246,.55)}
.pick{background:rgba(255,255,255,.14);color:#bfe6ff}.from b,.pgp strong,dt{color:#8fe3ff}
.bef{background:rgba(255,255,255,.1)}
input,select,textarea{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:var(--ink)}select option{background:#14195a;color:#fff}#cur{color:var(--ink)}
.flash.ok{background:rgba(111,227,255,.22)}.flash.err{background:rgba(255,90,90,.3)}
dialog{background:#141a52;border:1px solid rgba(255,255,255,.25)}
.pg,.tb th,.tb td{border-color:rgba(255,255,255,.16)}.pgp em,.bd{color:#0d2a5c}
#order-f{background-image:linear-gradient(rgba(10,15,58,.74),rgba(10,15,58,.74)),var(--moon-img);background-size:cover;background-position:center}
.hero{background-image:var(--hero-img),linear-gradient(180deg,#080c26 0%,#26339a 55%,#6b7fe0 100%);background-size:cover,100% 100%;background-position:center}
.hero-in{max-width:600px}
/* nuages animés (SVG cerclé de blanc, dérive lente) */
.cband{position:absolute;left:0;bottom:-2px;width:200%;background-repeat:repeat-x;background-size:50% 100%;pointer-events:none;animation:drift 80s linear infinite}
.cb1{height:150px;background-image:var(--cloud1);opacity:.5;z-index:1}.cb2{height:96px;background-image:var(--cloud2);z-index:3;animation-duration:48s}
@keyframes drift{to{transform:translateX(-50%)}}
.cwrap{height:130px;overflow:hidden;margin-top:5rem}
.mascot{width:min(360px,36vw);right:6%;bottom:38px;z-index:2}
.mascot::before{content:"";position:absolute;inset:-8% -18%;border-radius:50%;z-index:-1;background:radial-gradient(circle,rgba(159,225,255,.55),transparent 65%);animation:halo 4s ease-in-out infinite alternate}
@keyframes halo{to{opacity:.5;scale:1.12}}
.bubble{display:flex;gap:.7rem;right:34%;top:14%;color:#0d2a5c}.av{width:44px;height:44px;flex:none;border-radius:50%;overflow:hidden;background:#dbe6ff}.av:empty{display:none}.av img{width:100%;height:100%;object-fit:cover}
.brand{font:1.5rem var(--disp);letter-spacing:.06em;opacity:1!important;margin-bottom:.4rem}
.grid>.rv:nth-child(2){transition-delay:.12s}.grid>.rv:nth-child(3){transition-delay:.24s}.grid>.rv:nth-child(4){transition-delay:.36s}
@media(max-width:820px){.mascot{width:150px;right:2%;bottom:30px}}
@media(prefers-reduced-motion:reduce){.pt,.cband,body::before,h2{animation:none!important}}


/* =========================================================
   NICOLE ART UPGRADE — supplied official illustration + stickers
   ========================================================= */
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:2rem}
.section-heading h2{margin-bottom:0}
.eyebrow{display:block;margin-bottom:.5rem;color:#8fe3ff;font-size:.72rem;font-weight:700;letter-spacing:.18em}
.mascot{width:min(470px,40vw)!important;right:4%!important;bottom:0!important;z-index:4!important;display:flex;align-items:flex-end;justify-content:center;animation:bob 5s ease-in-out infinite alternate}
.mascot img{position:relative;z-index:2;width:100%;height:auto;max-height:760px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 20px 28px rgba(3,8,40,.42));}
.mascot-glow{position:absolute;width:90%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(159,225,255,.5),transparent 68%);filter:blur(2px);z-index:1;animation:halo 4s ease-in-out infinite alternate}
.hero-sticker{position:absolute;z-index:5;pointer-events:none;filter:drop-shadow(0 12px 18px rgba(3,8,40,.28));}
.hero-sticker img{width:100%;height:auto;display:block}
.sticker-one{width:150px;right:30%;bottom:7%;transform:rotate(-8deg);animation:stickerFloat 5.5s ease-in-out infinite alternate}
.sticker-two{width:135px;right:1%;top:14%;transform:rotate(7deg);animation:stickerFloat 6.5s ease-in-out -1.5s infinite alternate}
@keyframes stickerFloat{to{translate:0 -12px;rotate:2deg}}
.mini-stickers{display:flex;align-items:flex-end;gap:.35rem;height:92px;margin-bottom:-.4rem}
.mini-stickers img{width:86px;height:86px;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(0,0,0,.22));transition:transform .25s ease}
.mini-stickers img:first-child{transform:rotate(-8deg)}
.mini-stickers img:last-child{transform:rotate(8deg) translateY(5px)}
.mini-stickers:hover img:first-child{transform:rotate(-4deg) translateY(-5px)}
.mini-stickers:hover img:last-child{transform:rotate(4deg) translateY(-8px)}
.floating-sticker{width:118px;flex:none;margin-bottom:-1rem;transform:rotate(8deg);filter:drop-shadow(0 14px 18px rgba(0,0,0,.25));animation:stickerFloat 6s ease-in-out infinite alternate}
.floating-sticker img{display:block;width:100%;height:auto}
#services .grid{position:relative}
#services .card{position:relative;overflow:hidden}
#services .card::after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-35px;bottom:-40px;background:radial-gradient(circle,rgba(127,212,255,.22),transparent 70%);pointer-events:none}
#results .bento{position:relative}
#order-f{background-image:linear-gradient(rgba(10,15,58,.78),rgba(10,15,58,.78)),var(--moon-img);}
.flash{margin-bottom:1rem}

@media(max-width:1100px){
  .mascot{width:min(390px,39vw)!important;right:2%!important}
  .sticker-one{right:27%;width:120px}
  .sticker-two{width:110px}
}
@media(max-width:820px){
  .section-heading{align-items:center}
  .mini-stickers{display:none}
  .floating-sticker{width:82px}
  .mascot{width:210px!important;right:1%!important;bottom:28px!important}
  .hero-sticker{opacity:.9}
  .sticker-one{width:92px;right:25%;bottom:4%}
  .sticker-two{width:80px;right:0;top:18%}
}
@media(max-width:560px){
  .mascot{width:165px!important;right:-3%!important}
  .sticker-one{width:70px;right:23%}
  .sticker-two{width:62px;top:22%}
  .section-heading{gap:1rem}
}

/* =========================================================
   NICOLE × TEYVAT — fusion du site existant + direction
   illustration/stickers officiels fournis par l'utilisateur.
   Aucun visuel généré par IA n'est utilisé ici.
   ========================================================= */

.logo{display:flex!important;align-items:center;gap:.55rem;font-family:var(--disp);font-size:1.85rem;letter-spacing:.06em;text-transform:uppercase}
.logo-art{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#eef5ff,#fff);border:1px solid rgba(143,227,255,.75);box-shadow:0 0 18px rgba(111,211,255,.35)}
.logo-art img{width:54px;height:54px;object-fit:contain;display:block}

/* Intro : vraie animation des 7 emblèmes officiels fournis */
#preloader{background:radial-gradient(circle at 50% 42%,rgba(71,104,220,.98),rgba(8,12,38,.99) 68%);overflow:hidden}
#preloader::before,#preloader::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
#preloader::before{width:520px;height:520px;background:radial-gradient(circle,rgba(127,212,255,.15),transparent 68%);top:-190px;left:-140px}
#preloader::after{width:620px;height:620px;background:radial-gradient(circle,rgba(177,150,255,.12),transparent 68%);right:-210px;bottom:-250px}
.pl{position:relative;z-index:2;width:min(760px,92vw);text-align:center}
.pre-brand{display:flex;align-items:center;justify-content:center;gap:.65rem;margin-bottom:2rem;color:#fff;font:2.1rem var(--disp);letter-spacing:.14em;text-shadow:0 8px 35px rgba(0,0,0,.25)}
.pre-mark{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:#fff;box-shadow:0 0 30px rgba(159,225,255,.45)}
.pre-mark img{width:70px;height:70px;object-fit:contain}
.orbs{display:flex;justify-content:center;align-items:center;gap:clamp(6px,1.7vw,16px);padding:.75rem 0}
.orb{width:clamp(42px,7vw,68px);height:clamp(42px,7vw,68px);padding:7px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);box-shadow:0 10px 35px rgba(0,0,0,.18);opacity:.35;transform:translateY(12px) scale(.82);transition:opacity .55s,transform .55s,box-shadow .55s,border-color .55s}
.orb img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 4px 9px rgba(0,0,0,.22))}
.orb.on{background:rgba(255,255,255,.13);opacity:1;transform:translateY(-4px) scale(1.08);border-color:rgba(255,255,255,.75);box-shadow:0 0 0 4px rgba(255,255,255,.07),0 0 28px rgba(127,212,255,.4)}
.e0.on{box-shadow:0 0 0 4px rgba(86,209,255,.1),0 0 28px rgba(44,195,255,.45)}
.e1.on{box-shadow:0 0 0 4px rgba(123,236,191,.1),0 0 28px rgba(123,236,191,.38)}
.e2.on{box-shadow:0 0 0 4px rgba(184,227,255,.1),0 0 28px rgba(184,227,255,.38)}
.e3.on{box-shadow:0 0 0 4px rgba(245,189,66,.1),0 0 28px rgba(245,189,66,.42)}
.e4.on{box-shadow:0 0 0 4px rgba(187,99,255,.1),0 0 28px rgba(187,99,255,.42)}
.e5.on{box-shadow:0 0 0 4px rgba(255,107,91,.1),0 0 28px rgba(255,107,91,.42)}
.e6.on{box-shadow:0 0 0 4px rgba(140,255,72,.1),0 0 28px rgba(140,255,72,.35)}

/* Hero : plus riche, sans changer l'illustration officielle */
.hero{isolation:isolate;border:1px solid rgba(255,255,255,.16);box-shadow:0 28px 90px rgba(3,8,40,.42),inset 0 0 90px rgba(127,212,255,.08)}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(6,14,55,.76),rgba(10,24,89,.3) 48%,rgba(29,74,156,.08)),radial-gradient(circle at 75% 42%,rgba(159,225,255,.2),transparent 26%)}
.hero::after{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.12);border-radius:28px;z-index:1;pointer-events:none}
.hero-in{z-index:6}
.hero-in::before{content:"GENSHIN IMPACT  ·  TEYVAT CONCIERGE";display:inline-block;margin-bottom:1rem;padding:.34rem .75rem;border-radius:999px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(8px);font-size:.68rem;font-weight:700;letter-spacing:.2em;color:#dff5ff}
.hero h1{max-width:690px}
.hero p{font-size:1rem;max-width:500px;color:#eaf5ff}
.hero .cta{box-shadow:0 12px 36px rgba(35,181,255,.25)}
.mascot{filter:drop-shadow(0 30px 38px rgba(0,0,0,.24))}
.sticker-three{width:138px;right:34%;top:7%;transform:rotate(-5deg);animation:stickerFloat 6.2s ease-in-out -2s infinite alternate}
.element-rail{position:absolute;right:1.8%;top:50%;transform:translateY(-50%);z-index:7;display:flex;flex-direction:column;gap:.55rem;padding:.7rem .45rem;border:1px solid rgba(255,255,255,.18);background:rgba(7,14,53,.34);backdrop-filter:blur(12px);border-radius:22px;box-shadow:0 14px 40px rgba(0,0,0,.22)}
.element-rail img{width:31px;height:31px;object-fit:contain;filter:drop-shadow(0 4px 7px rgba(0,0,0,.3));transition:transform .25s ease}
.element-rail img:hover{transform:scale(1.18) rotate(5deg)}

/* Sections : bento plus travaillé, tout en gardant la structure du projet */
.sec{position:relative}
.sec::before{content:"";position:absolute;left:5vw;right:5vw;top:2.5rem;height:1px;background:linear-gradient(90deg,transparent,rgba(159,225,255,.28),transparent);pointer-events:none}
.section-heading,.sec>h2{position:relative;z-index:2}
.section-heading::before,.sec>h2::before{content:"✦";position:absolute;left:-1.5rem;top:.1rem;color:#f4d67a;font-size:.8rem;filter:drop-shadow(0 0 8px rgba(244,214,122,.5))}
.card,.box{position:relative;overflow:hidden}
.card::before,.box::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.09),transparent 32%,transparent 70%,rgba(125,172,255,.06));opacity:.8}
.card::after,.box::after{content:"";position:absolute;right:-45px;top:-55px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(159,225,255,.14),transparent 67%);pointer-events:none}
.card:hover,.box:hover{transform:translateY(-4px);}
.element-ico{overflow:hidden;padding:7px!important;background:linear-gradient(145deg,rgba(255,255,255,.2),rgba(50,98,204,.32))!important}
.element-ico img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 7px rgba(0,0,0,.25))}

/* Sticker sheet comme décoration, pas comme illustration générée */
.sec-primos{position:relative}
.section-deco{position:absolute;pointer-events:none;z-index:1;filter:drop-shadow(0 20px 25px rgba(0,0,0,.25))}
.deco-primos{width:250px;right:-20px;top:4.8rem;transform:rotate(5deg)}
.deco-primos img{width:100%;height:auto;display:block}
.sec-primos>h2,.sec-primos>.grid{position:relative;z-index:2}
#results .floating-sticker{background:transparent}

/* Ruban officiel des éléments en bas des blocs */
.sec-primos::after{content:"";position:absolute;left:50%;bottom:-3.5rem;transform:translateX(-50%);width:min(800px,75vw);height:1px;background:linear-gradient(90deg,transparent,rgba(159,225,255,.4),transparent)}

/* Footer / ambiance plus proche d'une page événementielle */
footer{position:relative;margin-top:7rem;padding:5rem 5vw 3rem;background:linear-gradient(180deg,rgba(6,11,45,0),rgba(4,8,31,.68));border-top:1px solid rgba(255,255,255,.1);overflow:hidden}
footer::before{content:"";position:absolute;left:50%;top:1rem;transform:translateX(-50%);width:min(900px,80vw);height:120px;background:radial-gradient(ellipse,rgba(90,157,255,.18),transparent 70%);pointer-events:none}

@media(max-width:900px){
  .element-rail{right:.7%;gap:.3rem;padding:.5rem .3rem;border-radius:17px}
  .element-rail img{width:25px;height:25px}
  .sticker-three{width:105px;right:28%;top:8%}
  .deco-primos{width:190px;right:-35px;opacity:.8}
}
@media(max-width:700px){
  .element-rail{display:none}
  .sticker-three{width:82px;right:24%;top:13%}
  .deco-primos{width:145px;right:-30px;top:5rem}
  .section-heading::before,.sec>h2::before{left:-.9rem}
  .pre-brand{font-size:1.7rem}
  .orb{width:39px;height:39px;padding:5px}
}
@media(max-width:520px){
  .logo-art{width:35px;height:35px}.logo-art img{width:47px;height:47px}
  .logo{font-size:1.55rem}
  .deco-primos{width:105px;right:-25px}
  .sticker-three{display:none}
}

/* ===== FINAL POLISH — official elements, hover labels, clearer progress ===== */
/* Les emblèmes officiels restent seuls : aucun fond blanc ajouté derrière eux. */
.element-ico{
  width:58px!important;height:58px!important;padding:0!important;margin-bottom:1rem!important;
  display:grid!important;place-items:center!important;background:transparent!important;
  border:0!important;box-shadow:none!important;border-radius:0!important;
}
.element-ico img{
  width:100%!important;height:100%!important;object-fit:contain!important;
  filter:drop-shadow(0 7px 12px rgba(2,10,50,.28))!important;
}
.card .element-ico,.box .element-ico{position:relative;z-index:2}

/* Rail des éléments : l'étiquette apparaît au survol sans passer sur le contenu. */
.element-rail{
  right:1.6%!important;top:50%!important;transform:translateY(-50%)!important;
  gap:.42rem!important;padding:.65rem!important;width:58px;
  align-items:stretch!important;overflow:visible!important;
}
.element-item{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;cursor:default;border-radius:13px;
  transition:width .28s ease,background .28s ease,transform .28s ease;
}
.element-item img{
  width:34px!important;height:34px!important;flex:0 0 34px;
  object-fit:contain!important;filter:drop-shadow(0 4px 8px rgba(0,0,0,.32))!important;
  transition:transform .28s ease!important;
}
.element-item b{
  position:absolute;right:50px;top:50%;transform:translateY(-50%) translateX(8px);
  width:max-content;max-width:125px;padding:.38rem .65rem;border-radius:10px;
  background:rgba(8,14,49,.96);border:1px solid rgba(159,225,255,.35);
  color:#fff;font-size:.72rem;letter-spacing:.04em;white-space:nowrap;
  opacity:0;visibility:hidden;pointer-events:none;
  box-shadow:0 10px 25px rgba(0,0,0,.28);
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
}
.element-item:hover,.element-item:focus-within{
  background:rgba(255,255,255,.11);transform:translateX(-2px);
}
.element-item:hover img,.element-item:focus-within img{transform:scale(1.12)}
.element-item:hover b,.element-item:focus-within b{
  opacity:1;visibility:visible;transform:translateY(-50%) translateX(0);
}

/* La mascotte reste seule dans le hero : suppression du sticker "Fine" ajouté au-dessus. */
.mascot-glow{opacity:.7}

/* Graphique : on explique clairement ce que représentent les points. */
.chart-wrap{position:relative}
.chart-explainer{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:.1rem 0 .5rem;font-size:.76rem;color:#cfe0ff}
.chart-key{display:flex;align-items:center;gap:.45rem;font-weight:600}
.chart-key i{width:8px;height:8px;border-radius:50%;background:#7fd4ff;box-shadow:0 0 12px #7fd4ff;display:block}
.chart-axis{opacity:.7;text-align:right}
.progress-chart{position:relative}
.progress-chart svg{display:block}
.chart-points circle{
  fill:#fff;stroke:#7fd4ff;stroke-width:3;cursor:pointer;
  transition:r .18s ease,fill .18s ease,filter .18s ease;
  outline:none;
}
.chart-points circle:hover,.chart-points circle:focus{
  fill:#dff8ff;filter:drop-shadow(0 0 8px rgba(127,212,255,.95));
}
.chart-tooltip{
  position:absolute;left:0;top:0;max-width:235px;padding:.55rem .7rem;
  border-radius:11px;background:rgba(8,14,49,.96);border:1px solid rgba(127,212,255,.45);
  color:#fff;font-size:.73rem;line-height:1.35;box-shadow:0 12px 28px rgba(0,0,0,.3);
  opacity:0;visibility:hidden;transform:translateY(4px);pointer-events:none;
  transition:opacity .16s ease,transform .16s ease,visibility .16s ease;z-index:8;
}
.chart-tooltip.show{opacity:1;visibility:visible;transform:none}
.chart-tooltip strong{display:block;color:#9fe1ff;margin-bottom:.12rem}

/* Les quatre garanties deviennent des cartes éditoriales : pas de gros carré d'icône. */
.proof-card{min-height:175px;padding:1.5rem 1.6rem!important;overflow:hidden!important}
.proof-card .proof-number{position:relative;z-index:2;display:inline-block;font:1rem var(--disp);letter-spacing:.12em;color:#9fe1ff;margin-bottom:2.1rem}
.proof-card h3,.proof-card p{position:relative;z-index:2;max-width:80%}
.proof-card p{opacity:.76;font-size:.9rem}
.proof-element{
  position:absolute!important;right:-6px!important;top:-8px!important;width:92px!important;height:92px!important;
  object-fit:contain!important;opacity:.18!important;filter:drop-shadow(0 8px 12px rgba(127,212,255,.3))!important;
  transition:opacity .3s ease,transform .3s ease!important;pointer-events:none;
}
.proof-card:hover .proof-element{opacity:.34!important;transform:rotate(7deg) scale(1.08)!important}
.proof-card::after{right:auto!important;left:-45px!important;top:auto!important;bottom:-65px!important;width:170px!important;height:170px!important;background:radial-gradient(circle,rgba(127,212,255,.13),transparent 68%)!important}

/* Retire les halos blancs parasites autour des emblèmes. */
.element-rail::before,.element-rail::after{display:none!important}

@media(max-width:900px){
  .element-rail{right:.7%!important;width:49px!important;padding:.45rem!important}
  .element-item{width:38px;height:38px}
  .element-item img{width:29px!important;height:29px!important;flex-basis:29px}
  .element-item b{right:43px}
}
@media(max-width:700px){
  .chart-explainer{align-items:flex-start;flex-direction:column;gap:.2rem}
  .chart-axis{text-align:left}
}
@media(max-width:520px){
  .element-rail{display:none!important}
}

/* ===== NICOLE FUSION v3 — clean official artwork + editorial hero ===== */
.hero{min-height:min(82svh,760px);padding:clamp(5rem,8vw,7rem) clamp(1.5rem,5vw,5rem) 3.5rem;align-items:flex-start;background:linear-gradient(180deg,#080d2c 0%,#101a57 40%,#3348a1 76%,#6f82d9 100%);}
.hero::before{background:radial-gradient(circle at 78% 32%,rgba(255,255,255,.18),transparent 24%),radial-gradient(circle at 30% 100%,rgba(126,214,255,.16),transparent 30%);}
.hero-in{width:min(50%,650px);padding-top:1.2rem;z-index:8}
.hero h1{font-size:clamp(4rem,8.6vw,8rem);max-width:650px;line-height:.86;letter-spacing:.01em}
.hero p{font-size:1rem;line-height:1.7;max-width:520px;margin-top:1.6rem;color:#eaf4ff!important;opacity:1}
.hero .cta{margin-top:.2rem}
.mascot{position:absolute!important;z-index:6!important;right:7%;bottom:-3%;width:min(48%,610px)!important;max-width:610px;pointer-events:none}
.mascot img{display:block;width:100%;height:auto}
.mascot-glow{position:absolute;inset:18% 12% 8%;background:radial-gradient(ellipse,rgba(128,206,255,.3),transparent 67%);filter:blur(20px);z-index:-1}
.hero-sticker.sticker-one{width:150px;left:43%;top:48%;z-index:9;transform:rotate(-7deg);}
.hero-sticker.sticker-two{width:150px;right:2%;top:14%;z-index:9;transform:rotate(5deg)}
.hero-sticker img{filter:drop-shadow(0 12px 18px rgba(0,0,0,.25))}
/* Dialogue card: never white text on a white surface. */
.bubble{left:44%;right:auto;top:auto;bottom:9%;max-width:340px;width:min(340px,34vw);padding:.9rem 1rem 1rem 3.8rem!important;background:rgba(247,250,255,.97)!important;color:#10295e!important;border:1px solid rgba(255,255,255,.7);box-shadow:0 18px 44px rgba(3,9,40,.3);z-index:12}
.bubble::after{right:auto;left:-12px;bottom:28px;border:12px solid transparent;border-right-color:rgba(247,250,255,.97);border-left:0}
.bubble b{color:#245fd0!important}.bubble p{color:#173568!important;opacity:1!important;line-height:1.5!important;min-height:0!important;margin:.2rem 0 0!important}
.bubble .av{position:absolute;left:-28px;top:-24px;width:82px;height:82px;border-radius:50%;background:transparent;overflow:visible}
.bubble .av img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(0,0,0,.22))}
.bubble-orbit{position:absolute;left:-37px;top:-33px;width:102px;height:102px;border:1px solid rgba(126,214,255,.55);border-radius:50%;opacity:.7;animation:orbitPulse 3s ease-in-out infinite}
@keyframes orbitPulse{50%{transform:scale(1.06);opacity:.35}}
/* Rail: transparent official symbols only; label opens beside the symbol on hover/focus. */
.element-rail{background:rgba(4,10,37,.48)!important;box-shadow:0 16px 42px rgba(0,0,0,.24)!important;backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important}
.element-item{background:transparent!important;border:0!important;box-shadow:none!important}
.element-item:hover,.element-item:focus-within{background:rgba(255,255,255,.1)!important}
.element-item b{right:52px!important;background:#091333!important;color:#fff!important;border:1px solid rgba(159,225,255,.45)!important;box-shadow:0 10px 24px rgba(0,0,0,.32)!important}
.element-rail img{filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))!important}
/* Element artwork inside cards: no container, no gradient, no white trace. */
.element-ico{background:transparent!important;box-shadow:none!important;border:0!important;padding:0!important;width:56px!important;height:56px!important}
.element-ico img{display:block;width:100%!important;height:100%!important;object-fit:contain!important;filter:drop-shadow(0 5px 8px rgba(7,15,55,.25))!important}
/* Chart is explanatory, not decorative only. */
.chart-help{margin:.15rem 0 .7rem!important;font-size:.78rem!important;line-height:1.55!important;color:#dce9ff!important;opacity:.82!important;max-width:680px}
.chart-explainer{color:#dce9ff!important}
.chart-tooltip{max-width:260px!important;padding:.65rem .8rem!important}
/* Four editorial guarantees: use thin CSS traces instead of four extra element icons. */
.proof-grid{margin-top:1.4rem}
.proof-card{min-height:185px!important;padding:1.55rem 1.7rem!important;background:linear-gradient(145deg,rgba(13,35,100,.96),rgba(34,62,145,.92))!important;color:#fff!important;border:1px solid rgba(159,225,255,.2)}
.proof-card::before{background:linear-gradient(120deg,rgba(127,212,255,.08),transparent 42%,rgba(255,255,255,.05))!important}
.proof-card h3{color:#fff!important}.proof-card p{color:#d9e8ff!important;opacity:.82!important}.proof-number{color:#8edcff!important}
.proof-trace{position:absolute;right:18px;top:18px;width:145px;height:105px;opacity:.7;pointer-events:none}
.proof-trace::before,.proof-trace::after{content:"";position:absolute;inset:0;border:1px solid rgba(127,212,255,.28);border-left-color:transparent;border-bottom-color:transparent;border-radius:70% 35% 65% 40%;transform:rotate(-18deg)}
.proof-trace::after{inset:18px -8px 10px 28px;border-color:rgba(255,255,255,.18);border-left-color:transparent;border-bottom-color:transparent;transform:rotate(12deg)}
.trace-a .proof-trace{transform:rotate(8deg)}.trace-b .proof-trace{transform:rotate(-8deg)}.trace-c .proof-trace{transform:rotate(18deg)}.trace-d .proof-trace{transform:rotate(-18deg)}
.proof-card:hover .proof-trace{opacity:1;transform:translate(-4px,-3px) rotate(0deg);transition:.35s ease}
/* Avoid the old proof-element rules entirely. */
.proof-element{display:none!important}
@media(max-width:900px){
  .hero-in{width:58%}.mascot{width:49%!important;right:3%}.hero-sticker.sticker-one{left:50%;width:125px}.hero-sticker.sticker-two{width:120px}.bubble{left:5%;bottom:6%;width:min(330px,48vw)}
}
@media(max-width:700px){
  .hero{min-height:760px}.hero-in{width:100%;padding-top:.5rem}.hero h1{font-size:clamp(3.4rem,17vw,6rem);max-width:75%}.hero p{max-width:62%}.mascot{width:62%!important;right:-3%;bottom:5%!important}.hero-sticker.sticker-one{left:7%;top:54%;width:115px}.hero-sticker.sticker-two{right:4%;top:17%;width:105px}.bubble{left:5%;bottom:7%;width:290px;max-width:78vw}.bubble .av{width:68px;height:68px;left:-22px;top:-20px}.bubble-orbit{width:84px;height:84px;left:-30px;top:-28px}.proof-grid{grid-template-columns:1fr 1fr}.proof-card{min-height:160px!important}
}
@media(max-width:520px){
  .hero{margin-left:2.5vw;margin-right:2.5vw;padding-left:1.1rem;padding-right:1.1rem}.hero h1{max-width:95%}.hero p{max-width:95%}.mascot{width:72%!important;right:-12%;bottom:8%!important;opacity:.95}.hero-sticker.sticker-one{left:4%;top:49%;width:92px}.hero-sticker.sticker-two{right:1%;top:20%;width:88px}.bubble{left:4%;bottom:4%;width:245px;padding-left:2.8rem!important;font-size:.78rem}.bubble .av{width:58px;height:58px}.bubble-orbit{width:72px;height:72px}.proof-grid{grid-template-columns:1fr}.proof-trace{width:120px;height:85px}.element-rail{display:none!important}
}