:root{color-scheme:light;font-family:ui-rounded,"SF Pro Rounded","Avenir Next",system-ui,-apple-system,sans-serif;color:#111343;background:#f5f3ff;--ink:#111343;--muted:#626d96;--violet:#5d2ce5;--yellow:#ffda55}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;line-height:1.55}img{display:block;max-width:100%}a{color:inherit}a:focus-visible{outline:3px solid #ffda55;outline-offset:4px;border-radius:6px}
.skip-link{position:absolute;left:1rem;top:-4rem;z-index:100;padding:.7rem 1rem;background:white;color:var(--ink);border-radius:12px}.skip-link:focus{top:1rem}
.container{width:min(1160px,calc(100% - 40px));margin-inline:auto}
.site-header{position:relative;z-index:10;background:#3422bd;color:white}.site-header .container{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:2rem}.brand{display:block;width:138px;flex:none}.brand img{width:100%}
.site-nav{display:flex;align-items:center;gap:clamp(.7rem,2vw,1.7rem);flex-wrap:wrap;font-size:.92rem;font-weight:800}.site-nav a{text-decoration:none;opacity:.92}.site-nav a:hover,.site-nav a[aria-current="page"]{opacity:1;text-decoration:underline;text-underline-offset:5px}.site-nav .lang{border:1px solid #ffffff80;border-radius:99px;padding:.35rem .7rem;text-decoration:none}
.hero{position:relative;overflow:hidden;background:linear-gradient(128deg,#3464ee 0%,#512ce0 53%,#29149e 100%);color:white}.hero::after{content:"";position:absolute;width:45rem;height:45rem;right:-20rem;top:-19rem;border:2px solid #ffffff18;border-radius:50%;box-shadow:0 0 0 65px #ffffff09,0 0 0 135px #ffffff08;pointer-events:none}
.hero-grid{min-height:690px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:2rem;position:relative;z-index:1}.hero-copy{padding:5rem 0 6rem}.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-size:.77rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase}.eyebrow::before{content:"";width:9px;height:9px;background:var(--yellow);border-radius:50%}
h1,h2,h3,p{margin-top:0}.hero h1{max-width:710px;font-size:clamp(3.6rem,7vw,6.8rem);line-height:.98;letter-spacing:-.075em;margin:1.2rem 0 1.5rem;font-weight:1000}.hero h1 span{color:var(--yellow)}.hero p{max-width:500px;color:#eeeaff;font-size:clamp(1.08rem,2vw,1.3rem)}.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:.75rem 1.3rem;border-radius:16px;text-decoration:none;font-weight:900;line-height:1.2;transition:transform .2s,box-shadow .2s}.button:hover{transform:translateY(-3px)}.button-primary{background:var(--yellow);color:var(--ink);box-shadow:0 10px 0 #13096850}.button-ghost{border:1px solid #ffffff85;color:white;background:#ffffff15}
.hero-visual{position:relative;min-height:690px;display:grid;place-items:center}.hero-phone{position:relative;z-index:2;width:min(290px,60%);aspect-ratio:1284/2778;overflow:hidden;border:9px solid #14134c;border-radius:43px;background:white;box-shadow:0 36px 60px #0905596e;transform:rotate(7deg)}.hero-phone img{width:100%;height:100%;object-fit:cover}.hero-mascot{position:absolute;z-index:3;width:min(250px,48%);left:-3%;bottom:2%;transform:rotate(-10deg);filter:drop-shadow(0 20px 18px #10086380)}.hero-spark{position:absolute;z-index:1;width:90px;height:90px;border:13px solid var(--yellow);border-radius:50%;left:5%;top:10%;opacity:.9}
.wave{height:44px;margin-top:-1px;background:#f5f3ff;clip-path:polygon(0 45%,8% 63%,18% 51%,30% 74%,43% 53%,56% 69%,70% 50%,85% 68%,100% 49%,100% 100%,0 100%)}
.intro{text-align:center;padding:5rem 0 2.7rem}.intro h2,.section-heading h2{font-size:clamp(2.25rem,4vw,3.7rem);line-height:1.06;letter-spacing:-.055em;margin:.5rem 0 .8rem}.intro p,.section-heading p{color:var(--muted);font-size:1.08rem;max-width:640px}.intro p{margin-inline:auto}.kicker{color:var(--violet);font-size:.82rem;font-weight:950;letter-spacing:.12em;text-transform:uppercase}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;padding-bottom:5rem}.feature{overflow:hidden;background:white;border:1px solid #e7e3fa;border-radius:30px;padding:1.2rem 1.2rem 1.8rem;box-shadow:0 16px 30px #25107c0b}.feature-art{height:210px;display:grid;place-items:center;border-radius:22px;overflow:hidden}.feature-art img{max-height:200px;object-fit:contain;transition:transform .3s}.feature:hover .feature-art img{transform:scale(1.06) rotate(-3deg)}.art-blue{background:#dff0ff}.art-pink{background:#ffe8f1}.art-yellow{background:#fff2c9}.feature h3{font-size:1.45rem;line-height:1.12;letter-spacing:-.03em;margin:1.4rem .3rem .5rem}.feature p{color:var(--muted);margin:0 .3rem}
.showcase{background:white;padding:5.5rem 0}.showcase-grid{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:clamp(2rem,6vw,6rem)}.showcase-copy .kicker{display:block;margin-bottom:1rem}.showcase-copy h2{font-size:clamp(2.5rem,4.4vw,4.4rem);line-height:1.05;letter-spacing:-.055em;margin-bottom:1rem}.showcase-copy p{color:var(--muted);font-size:1.08rem}.checks{list-style:none;padding:0;margin:1.7rem 0 0;display:grid;gap:.9rem;font-weight:800}.checks li{display:flex;gap:.75rem;align-items:flex-start}.checks li::before{content:"✓";display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:#d7f9e9;color:#087d50}
.screens{display:flex;align-items:center;justify-content:center;gap:clamp(.5rem,2vw,1.5rem);min-width:0}.screen{width:32%;border:6px solid #17154e;border-radius:27px;overflow:hidden;box-shadow:0 20px 30px #21135a2b}.screen:nth-child(2){transform:translateY(-20px)}.screen img{width:100%}
.banner{padding:5rem 0}.banner-inner{display:grid;grid-template-columns:1fr 220px;align-items:center;gap:2rem;overflow:hidden;padding:2.5rem 3.5rem;border-radius:36px;background:linear-gradient(125deg,#3120b8,#5d2ce5);color:white}.banner-inner h2{font-size:clamp(2rem,3.5vw,3.5rem);line-height:1.05;letter-spacing:-.05em;max-width:650px;margin-bottom:.9rem}.banner-inner p{color:#eeeaff;max-width:620px}.banner-inner img{width:220px;filter:drop-shadow(0 15px 12px #09034f70)}.banner .button{margin-top:.7rem}
.site-footer{background:#15144a;color:white;padding:3rem 0 2rem}.footer-grid{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}.site-footer .brand{width:150px}.site-footer p{color:#c6c5e7;max-width:350px;font-size:.9rem;margin:.7rem 0 0}.footer-links{display:flex;gap:1rem 2rem;flex-wrap:wrap;align-items:flex-start;font-size:.9rem;font-weight:700}.footer-links a:hover{color:var(--yellow)}.copyright{color:#a6a5cf;font-size:.78rem;margin-top:2.5rem}
.page-hero{overflow:hidden;background:linear-gradient(120deg,#3464ee,#4b25d5 62%,#29149e);color:white}.page-hero .container{display:grid;grid-template-columns:1fr 160px;align-items:center;gap:2rem;min-height:280px;padding-block:2.5rem}.page-hero h1{font-size:clamp(2.8rem,5vw,4.4rem);line-height:1.04;letter-spacing:-.05em;margin:.65rem 0}.page-hero p{color:#eceaff;max-width:620px;margin:0}.page-hero img{width:160px;filter:drop-shadow(0 12px 14px #12075470)}
.content-page{width:min(840px,calc(100% - 40px));margin:3.5rem auto 5rem}.content-page section{background:white;border:1px solid #e5e1fc;border-radius:24px;box-shadow:0 12px 28px #2713810a;margin:1rem 0;padding:1.6rem 1.8rem}.content-page h2{font-size:1.28rem;margin-bottom:.45rem;letter-spacing:-.025em}.content-page p{color:#424b70;margin:.55rem 0 0}.content-page a{color:#4920cc;font-weight:750}.content-page ul{color:#424b70;padding-left:1.4rem}.content-page li+li{margin-top:.45rem}.fine-print{font-size:.88rem;color:var(--muted)}
.hero-globe{position:relative;z-index:2;width:min(390px,75%);filter:drop-shadow(0 28px 24px #10086370);transform:rotate(7deg)}.showcase-art{width:min(450px,85%);margin:auto;filter:drop-shadow(0 20px 20px #1c126444)}.language-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}.language-grid a{display:flex;justify-content:space-between;align-items:center;gap:.6rem;text-decoration:none;color:#111343;background:white;border:1px solid #e5e1fc;border-radius:18px;padding:1rem 1.1rem;box-shadow:0 8px 20px #2713810a}.language-grid a:hover{border-color:#5d2ce5;transform:translateY(-2px)}.language-grid small{color:#626d96;font-size:.72rem}code{overflow-wrap:anywhere}
.localized .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.localized .hero-copy{min-width:0}.localized .hero h1{font-size:clamp(2.8rem,5vw,5.2rem);overflow-wrap:anywhere}.localized .showcase-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.localized .showcase-copy{min-width:0}.localized .showcase-copy h2,.localized .banner h2{overflow-wrap:anywhere}
html[dir="rtl"] .hero-globe{transform:rotate(-7deg)}html[dir="rtl"] .hero-phone{transform:rotate(-7deg)}
@media(max-width:800px){.hero-grid{min-height:0;grid-template-columns:1fr;gap:0}.hero-copy{padding:4rem 0 1rem}.hero-visual{min-height:600px}.hero-phone{width:min(245px,55%)}.hero-mascot{width:min(220px,43%);left:7%}.feature-grid{grid-template-columns:1fr 1fr}.showcase-grid{grid-template-columns:1fr}.showcase-copy{max-width:650px}}
@media(max-width:570px){.container{width:min(100% - 32px,1160px)}.site-header .container{min-height:68px;gap:1rem}.brand{width:112px}.site-nav{gap:.65rem;font-size:.78rem}.site-nav a[href$="credits.html"]{display:none}.hero h1{font-size:clamp(3.4rem,12vw,5rem)}.hero-visual{min-height:520px}.hero-phone{width:min(220px,66%)}.hero-mascot{left:0;bottom:3%;width:min(185px,45%)}.intro{padding-top:4rem}.feature-grid{grid-template-columns:1fr;padding-bottom:4rem}.feature-art{height:180px}.feature-art img{max-height:175px}.showcase{padding:4rem 0}.screen{border-width:4px;border-radius:16px}.banner{padding:4rem 0}.banner-inner{grid-template-columns:1fr;padding:2rem}.banner-inner img{display:none}.page-hero .container{grid-template-columns:1fr 95px;gap:.7rem;min-height:230px}.page-hero img{width:95px}.content-page{margin-top:2rem}.content-page section{padding:1.3rem}}
@media(max-width:800px){.language-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:570px){.language-grid{grid-template-columns:1fr}.hero-globe{width:min(300px,75%)}}
@media(max-width:800px){.localized .hero-grid,.localized .showcase-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button,.feature-art img{transition:none}}
