/* Lingora public site v2 — shared by /welcome and /android. CSS/SVG animations, reduced-motion aware. */
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(/static/site/manrope-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(/static/site/manrope-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(/static/site/manrope-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--bg0:#0B0722;--bg1:#160E3D;--ink:#F7F3FF;--mut:#B8AEDD;--mut2:#8E84B8;--line:rgba(255,255,255,.12);--violet:#7C5CFF;--violet2:#A68CFF;--pink:#FF4FA3;--pink2:#FF8BC8;--gold:#FFD27A;
  --grad:linear-gradient(120deg,#8B6BFF 0%,#C35CFF 45%,#FF5FA8 100%);--ease:cubic-bezier(.2,.75,.2,1);--spring:cubic-bezier(.34,1.56,.64,1);color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg0)}
body{margin:0;min-height:100vh;color:var(--ink);background:var(--bg0);font:500 16px/1.5 "Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;text-rendering:optimizeLegibility}
a{color:inherit}
img,svg{display:block}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{position:relative;max-width:1120px;margin:0 auto;padding:0 max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left))}

/* ---------- aurora background with parallax ---------- */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:radial-gradient(120% 80% at 50% -10%,#2A1670 0%,var(--bg1) 38%,var(--bg0) 75%)}
.bg .par{position:absolute;inset:-10% -10% -30%;will-change:transform}
.bg .blob{position:absolute;border-radius:50%;opacity:.75;will-change:transform}
.bg .b1{width:62vmax;height:62vmax;left:-18vmax;top:-20vmax;background:radial-gradient(closest-side,rgba(124,92,255,.55),rgba(124,92,255,0));animation:drift1 22s ease-in-out infinite alternate}
.bg .b2{width:55vmax;height:55vmax;right:-20vmax;top:6vmax;background:radial-gradient(closest-side,rgba(255,79,163,.42),rgba(255,79,163,0));animation:drift2 26s ease-in-out infinite alternate}
.bg .b3{width:48vmax;height:48vmax;left:18vmax;top:48vmax;background:radial-gradient(closest-side,rgba(176,76,255,.40),rgba(176,76,255,0));animation:drift3 30s ease-in-out infinite alternate}
.bg .b4{width:40vmax;height:40vmax;right:-8vmax;top:92vmax;background:radial-gradient(closest-side,rgba(255,139,200,.30),rgba(255,139,200,0));animation:drift1 34s ease-in-out infinite alternate-reverse}
.bg .stars{position:absolute;inset:0 0 -40%;background-image:radial-gradient(1.2px 1.2px at 12% 18%,rgba(255,255,255,.75),transparent 60%),radial-gradient(1px 1px at 78% 12%,rgba(255,255,255,.6),transparent 60%),radial-gradient(1.4px 1.4px at 64% 34%,rgba(255,220,240,.7),transparent 60%),radial-gradient(1px 1px at 28% 52%,rgba(255,255,255,.5),transparent 60%),radial-gradient(1.2px 1.2px at 88% 58%,rgba(220,210,255,.7),transparent 60%),radial-gradient(1px 1px at 8% 76%,rgba(255,255,255,.5),transparent 60%),radial-gradient(1.3px 1.3px at 46% 86%,rgba(255,255,255,.55),transparent 60%);will-change:transform}
.bg .grain{position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.bg .grid{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px);background-size:26px 26px;-webkit-mask-image:radial-gradient(90% 60% at 50% 0%,#000 0%,transparent 70%);mask-image:radial-gradient(90% 60% at 50% 0%,#000 0%,transparent 70%)}
@keyframes drift1{to{transform:translate3d(6vmax,5vmax,0) scale(1.08)}}
@keyframes drift2{to{transform:translate3d(-7vmax,6vmax,0) scale(.94)}}
@keyframes drift3{to{transform:translate3d(5vmax,-6vmax,0) scale(1.1)}}

/* ---------- header ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:max(18px,env(safe-area-inset-top)) 0 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:-.02em;text-decoration:none}
.brand img{width:38px;height:38px;border-radius:12px;box-shadow:0 8px 22px -6px rgba(255,79,163,.55),0 0 0 1px rgba(255,255,255,.18)}
.top-link{font-size:14px;font-weight:700;color:var(--mut);text-decoration:none;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);transition:color .2s,border-color .2s,background .2s}
.top-link:hover{color:#fff;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.08)}

/* ---------- hero ---------- */
.hero{padding:10px 0 20px;overflow-x:clip}
main,.a-main,.langs{overflow-x:clip}
.hgrid{display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:28px;padding-top:34px}
h1{margin:0 0 18px;font-weight:800;font-size:clamp(52px,5.8vw,80px);line-height:1.02;letter-spacing:-.045em;text-wrap:balance}
.gtext{background:linear-gradient(100deg,#FFC4E4 0%,#FF6FB5 38%,#C58BFF 72%,#FFD9A0 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 8s ease-in-out infinite alternate;white-space:nowrap}
@keyframes sheen{to{background-position:100% 0}}
.lead{margin:0 0 28px;max-width:27em;font-size:clamp(17px,1.6vw,20px);line-height:1.5;color:var(--mut);font-weight:600}
.lead b{color:#fff;font-weight:700}
.ctas{display:grid;gap:12px;max-width:430px}
.btn{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:12px;min-height:60px;padding:14px 22px;border-radius:20px;border:0;font-family:inherit;font-weight:800;font-size:18px;line-height:1.2;letter-spacing:-.01em;text-decoration:none;cursor:pointer;transition:transform .35s var(--spring),box-shadow .35s var(--ease),background-color .3s,border-color .3s;-webkit-tap-highlight-color:transparent}
.btn svg{width:24px;height:24px;flex:0 0 24px}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.45) 48%,transparent 66%);transform:translateX(-120%);transition:transform .8s var(--ease)}
.btn:hover{transform:translateY(-3px)}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(0) scale(.98);transition-duration:.12s}
.btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.btn-tg{background:linear-gradient(180deg,#fff,#F1EBFF);color:#3A1F9E;box-shadow:0 18px 40px -14px rgba(160,120,255,.9),inset 0 -2px 0 rgba(90,60,200,.12)}
.btn-tg svg{color:#2AABEE}
.btn-tg:hover{box-shadow:0 24px 50px -14px rgba(180,140,255,1),inset 0 -2px 0 rgba(90,60,200,.12)}
.btn-max{background:rgba(255,255,255,.06);color:#fff;border:1.5px solid rgba(255,255,255,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn-max:hover{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.1)}
.btn-max::after{background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.18) 48%,transparent 66%)}
.btn-android,.btn-dl{background:linear-gradient(120deg,#FF5FA8 0%,#C35CFF 55%,#8B6BFF 100%);color:#fff;box-shadow:0 18px 40px -14px rgba(255,79,163,.85),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-android:hover,.btn-dl:hover{box-shadow:0 24px 52px -14px rgba(255,79,163,1),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-android::after,.btn-dl::after{background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.35) 48%,transparent 66%)}
.btn[aria-disabled="true"]{opacity:.55;cursor:default}
.price{display:inline-flex;align-items:center;gap:9px;margin:22px 0 0;padding:10px 18px 10px 12px;border-radius:999px;font-weight:800;font-size:clamp(14px,1.4vw,16px);line-height:1.3;color:#2B0D3A;text-wrap:balance;background:linear-gradient(100deg,#FFE3A3 0%,#FFC2DE 55%,#E4CFFF 100%);box-shadow:0 14px 34px -12px rgba(255,140,200,.8),inset 0 1px 0 rgba(255,255,255,.7)}
.price span{text-wrap:balance}
.price svg{width:22px;height:22px;flex:0 0 22px}

/* stage + mascot */
.stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:420px}
.halo{position:absolute;left:50%;top:54%;width:min(440px,92%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(195,92,255,.45),rgba(255,79,163,.18) 55%,transparent 72%);animation:pulse 6s ease-in-out infinite}
.halo::before,.halo::after{content:"";position:absolute;inset:8%;border-radius:50%;border:1px solid rgba(255,255,255,.12)}
.halo::after{inset:-4%;border-style:dashed;border-color:rgba(255,255,255,.08);animation:spin 60s linear infinite}
@keyframes pulse{50%{transform:translate(-50%,-50%) scale(1.06);opacity:.85}}
@keyframes spin{to{transform:rotate(360deg)}}
.bubble{position:relative;z-index:2;margin:0 0 6px;padding:12px 20px;border-radius:20px;font-weight:800;font-size:18px;letter-spacing:-.01em;color:#2E1780;background:linear-gradient(180deg,#fff,#F3EDFF);box-shadow:0 18px 40px -16px rgba(20,8,70,.8),inset 0 -2px 0 rgba(90,60,200,.1);transform-origin:50% 100%;animation:bubbleIn .7s var(--spring) .35s both}
.bubble::after{content:"";position:absolute;left:50%;bottom:-8px;width:18px;height:18px;background:#F3EDFF;transform:translateX(-50%) rotate(45deg);border-radius:4px}
.bubble.swap{animation:bubblePop .45s var(--spring)}
@keyframes bubbleIn{from{opacity:0;transform:translateY(10px) scale(.6)}}
@keyframes bubblePop{0%{transform:scale(.86)}100%{transform:scale(1)}}
.lori{position:relative;z-index:1;width:min(370px,76%);--ex:0;--ey:0}
.lori svg{width:100%;height:auto;overflow:visible}
.lori *{transform-box:fill-box}
.l-float{transform-origin:50% 100%;animation:float 5.2s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(-1.6deg)}}
.l-shadow{transform-origin:50% 50%;animation:shadow 5.2s ease-in-out infinite}
@keyframes shadow{50%{transform:scale(.84);opacity:.55}}
.l-body{transform-origin:50% 100%}
.lori.hop .l-body{animation:hop .7s var(--spring)}
@keyframes hop{0%{transform:scale(1)}25%{transform:scale(1.06,.92)}55%{transform:translateY(-9px) scale(.97,1.04)}100%{transform:none}}
.l-arm{transform-origin:10% 90%;animation:wave 9s ease-in-out .9s infinite}
@keyframes wave{0%,24%,100%{transform:rotate(0)}3%{transform:rotate(-24deg)}6%{transform:rotate(12deg)}9%{transform:rotate(-24deg)}12%{transform:rotate(12deg)}15%{transform:rotate(-20deg)}18%{transform:rotate(6deg)}}
.lori.react .l-arm{animation:wave2 .9s ease-in-out infinite}
@keyframes wave2{50%{transform:rotate(-26deg)}}
.l-eye{transform-origin:50% 50%;animation:blink 5.6s infinite}
.l-eye.r{animation-delay:.04s}
@keyframes blink{0%,91%,97%,100%{transform:scaleY(1)}94%{transform:scaleY(.08)}}
.l-pupil{transform:translate(calc(var(--ex) * 3.4px),calc(var(--ey) * 3.2px));transition:transform .28s cubic-bezier(.3,.8,.3,1)}
.l-brow{transition:transform .35s var(--spring)}
.lori.react .l-brow{transform:translateY(-2.6px)}
.lori.react .l-eyes{transform:scale(1.06);transform-origin:50% 50%}
.l-eyes{transition:transform .35s var(--spring)}
.m-open{opacity:0;transform-origin:50% 0;transform:scaleY(.3);transition:opacity .2s,transform .35s var(--spring)}
.m-smile{transition:opacity .2s}
.lori.react .m-open{opacity:1;transform:none}
.lori.react .m-smile{opacity:0}
.l-cheek{transform-origin:50% 50%;transition:transform .35s var(--spring),opacity .3s}
.lori.react .l-cheek{transform:scale(1.25);opacity:1}
.l-spark{transform-origin:50% 50%;animation:twinkle 3.2s ease-in-out infinite}
.l-spark.s2{animation-delay:-1.1s}.l-spark.s3{animation-delay:-2.2s}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(.55) rotate(45deg);opacity:.55}}
.l-heart{opacity:0;transform-origin:50% 50%}
.lori.react .l-heart{animation:heart 1.4s ease-out infinite}
.lori.react .l-heart.h2{animation-delay:.45s}.lori.react .l-heart.h3{animation-delay:.9s}
@keyframes heart{0%{opacity:0;transform:translateY(6px) scale(.4)}25%{opacity:1}100%{opacity:0;transform:translateY(-16px) scale(1.1)}}
.hello{position:absolute;z-index:2;padding:7px 13px;border-radius:999px;font-weight:800;font-size:14px;letter-spacing:-.01em;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);box-shadow:0 12px 30px -14px rgba(0,0,0,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:bob 6s ease-in-out infinite}
.hello i{font-style:normal;display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:var(--c,#FF6FB5);box-shadow:0 0 10px var(--c,#FF6FB5)}
.hello.a{left:2%;top:24%;--c:#FF6FB5}.hello.b{right:0;top:36%;--c:#A68CFF;animation-delay:-1.5s}.hello.c{left:6%;bottom:14%;--c:#FFD27A;animation-delay:-3s}.hello.d{right:6%;bottom:6%;--c:#7FE3FF;animation-delay:-4.5s}
@keyframes bob{50%{transform:translateY(-10px)}}

/* ---------- sections ---------- */
section{position:relative}
.sec{margin:64px 0 0}
.sec-h{text-align:center;margin:0 auto 26px;max-width:860px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#FFC4E4;background:rgba(255,79,163,.1);border:1px solid rgba(255,111,181,.28)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pink);box-shadow:0 0 10px var(--pink)}
h2{margin:0;font-weight:800;font-size:clamp(28px,4vw,46px);line-height:1.08;letter-spacing:-.035em;text-wrap:balance}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.card{position:relative;overflow:hidden;isolation:isolate;border-radius:26px;padding:26px 18px 24px;text-align:center;background:linear-gradient(165deg,rgba(255,255,255,.1),rgba(255,255,255,.035));border:1px solid var(--line);box-shadow:0 24px 50px -28px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.12);transition:transform .45s var(--spring),border-color .3s,box-shadow .45s var(--ease);--mx:50%;--my:0%}
.card::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .35s;background:radial-gradient(260px circle at var(--mx) var(--my),rgba(255,139,200,.18),transparent 60%)}
.card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.26);box-shadow:0 34px 60px -28px rgba(120,60,255,.7),inset 0 1px 0 rgba(255,255,255,.18)}
.card:hover::before{opacity:1}
.ico{position:relative;display:grid;place-items:center;width:76px;height:76px;margin:0 auto 16px;border-radius:24px;background:linear-gradient(150deg,rgba(166,140,255,.32),rgba(255,95,168,.18));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 14px 30px -14px rgba(160,100,255,.8);transition:transform .5s var(--spring)}
.ico::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(255,255,255,.14)}
.ico svg{width:48px;height:48px;filter:drop-shadow(0 6px 8px rgba(30,6,80,.45))}
.card:hover .ico{transform:translateY(-3px) rotate(-6deg) scale(1.06)}
.card b{display:block;font-size:18px;font-weight:800;line-height:1.25;letter-spacing:-.015em;text-wrap:balance}
.why{border-radius:34px;padding:44px 28px 30px;background:linear-gradient(160deg,rgba(124,92,255,.2),rgba(255,79,163,.12) 60%,rgba(255,210,122,.06));border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 80px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.14);overflow:hidden}
.why::before{content:"";position:absolute;right:-80px;top:-100px;width:320px;height:320px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,111,181,.35),transparent);pointer-events:none}
.why::after{content:"";position:absolute;left:-60px;bottom:-120px;width:300px;height:300px;border-radius:50%;background:radial-gradient(closest-side,rgba(124,92,255,.4),transparent);pointer-events:none}
.why .card{background:linear-gradient(165deg,rgba(20,10,60,.55),rgba(20,10,60,.3));}
.why .ico{background:linear-gradient(150deg,var(--c1),var(--c2));box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 16px 34px -14px var(--c2)}
.why .card:nth-child(1){--c1:#8B6BFF;--c2:#5B3CE0}.why .card:nth-child(2){--c1:#FF7FC0;--c2:#E0408E}.why .card:nth-child(3){--c1:#B874FF;--c2:#7C3DE0}.why .card:nth-child(4){--c1:#FF9BB0;--c2:#C94BD8}
.why .sec-h,.why .grid4{position:relative;z-index:1}

/* flags marquee */
.langs{margin:64px 0 0}
.marquee{position:relative;overflow:hidden;padding:6px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee+.marquee{margin-top:10px}
.track{display:flex;width:max-content;gap:12px;animation:marq 42s linear infinite}
.marquee.rev .track{animation-direction:reverse;animation-duration:48s}
.marquee:hover .track{animation-play-state:paused}
.set{display:flex;gap:12px}
@keyframes marq{to{transform:translate3d(calc(-50% - 6px),0,0)}}
.chip{display:inline-flex;align-items:center;gap:10px;padding:8px 18px 8px 8px;border-radius:999px;white-space:nowrap;font-weight:700;font-size:16px;background:linear-gradient(165deg,rgba(255,255,255,.1),rgba(255,255,255,.04));border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.flag{position:relative;width:34px;height:34px;flex:0 0 34px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px rgba(255,255,255,.2),0 6px 14px -6px rgba(0,0,0,.8)}
.flag img{width:100%;height:100%;object-fit:cover}
.flag::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);background-size:250% 100%;animation:flagshine 5s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes flagshine{0%,60%{background-position:120% 0}100%{background-position:-120% 0}}

/* footer */
footer{margin:72px 0 0;padding:22px 0 max(26px,env(safe-area-inset-bottom));border-top:1px solid var(--line);color:var(--mut2);font-size:13px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px}
footer p{margin:0}
footer nav{display:flex;flex-wrap:wrap;gap:6px 16px}
footer a{text-decoration:none;transition:color .2s}
footer a:hover{color:#fff;text-decoration:underline}

/* ---------- scroll reveal ---------- */
.js .rv{opacity:0;transform:translate3d(0,26px,0) scale(.97);transition:opacity .8s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0) * 110ms)}
.js .rv.in,.rv-done .rv{opacity:1;transform:none}
.js .card.rv.in{transition:opacity .8s var(--ease),transform .9s var(--spring),border-color .3s,box-shadow .45s var(--ease);transition-delay:calc(var(--i,0) * 110ms),calc(var(--i,0) * 110ms),0s,0s}
.js .card.rv.in:hover{transition-delay:0s}

/* ---------- android page ---------- */
.a-head{text-align:center;padding:14px 0 10px}
.a-head .stage{min-height:0;margin:0 auto;width:min(240px,64vw)}
.a-head .lori{width:100%}
.a-head .halo{width:130%}
.a-head h1{font-size:clamp(38px,10vw,58px);margin:10px 0 12px}
.a-head .sub{margin:0 auto 24px;max-width:26em;font-size:18px;font-weight:600;color:var(--mut)}
.a-main{max-width:600px;margin:0 auto}
.a-main .btn-dl{min-height:66px;font-size:20px;border-radius:22px;max-width:440px;margin:0 auto}
.a-main .btn-dl svg{width:28px;height:28px;flex-basis:28px}
.meta{margin:12px 0 0;color:var(--mut2);font-size:13px;font-weight:600}
.qr{display:none;margin:26px auto 0;width:max-content;padding:16px 16px 12px;border-radius:24px;background:linear-gradient(165deg,rgba(255,255,255,.1),rgba(255,255,255,.04));border:1px solid var(--line)}
.qr img{width:150px;height:150px;border-radius:14px;background:#fff;padding:8px;margin:0 auto}
.qr p{margin:8px 0 0;font-size:13px;color:var(--mut)}
@media (min-width:760px) and (hover:hover){.qr{display:block}}
.faq{margin:34px 0 0}
details{margin:0 0 12px;padding:0 20px;border-radius:22px;background:linear-gradient(165deg,rgba(255,255,255,.09),rgba(255,255,255,.035));border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);transition:border-color .3s,background .3s}
details[open]{border-color:rgba(255,139,200,.35);background:linear-gradient(165deg,rgba(255,255,255,.12),rgba(255,255,255,.05))}
summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0;font-weight:800;font-size:17px;letter-spacing:-.01em}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:0 0 28px;height:28px;border-radius:50%;background:rgba(255,255,255,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFB7DC' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .35s var(--spring),background-color .3s}
details[open] summary::after{transform:rotate(45deg);background-color:rgba(255,79,163,.2)}
details ol{margin:0 0 18px;padding-left:22px;color:#DCD5F5}
details li{margin:0 0 8px}
details li::marker{color:var(--pink2);font-weight:800}
.note{margin:0 0 18px;color:var(--mut);font-size:14px}
.note a,details a{color:#FFB7DC}
code{padding:1px 7px;border-radius:7px;font-size:12px;word-break:break-all;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.a-foot{justify-content:center;text-align:center}
.a-foot nav{justify-content:center;gap:8px 22px}
.a-foot a{color:#DCD5F5}

/* ---------- responsive ---------- */
@media (max-width:980px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){
  .hgrid{grid-template-columns:1fr;text-align:center;gap:0;padding-top:10px}
  .stage{order:-1;min-height:0;padding:6px 0 4px}
  .lori{width:min(200px,52vw)}
  .halo{width:min(320px,88vw)}
  .bubble{font-size:16px;padding:10px 16px}
  h1{font-size:clamp(33px,10.4vw,56px);margin:14px 0 14px}
  .lead{margin:0 auto 24px;font-size:17px}
  .ctas{margin:0 auto}
  .hello{font-size:12px;padding:5px 10px}.hello i{width:6px;height:6px;margin-right:5px}
  .hello.a{left:0;top:34%}.hello.b{right:0;top:22%}.hello.c{left:2%;bottom:8%}.hello.d{right:2%;bottom:18%}
  .sec,.langs{margin-top:48px}
  .card{padding:20px 12px 18px;border-radius:22px}
  .ico{width:64px;height:64px;border-radius:20px;margin-bottom:12px}.ico svg{width:40px;height:40px}
  .card b{font-size:16px}
  .grid4{gap:12px}
  .why{padding:32px 14px 16px;border-radius:28px}
  .chip{font-size:15px;padding:6px 15px 6px 6px}.flag{width:30px;height:30px;flex-basis:30px}
  footer{margin-top:52px}
}
@media (max-width:360px){
  .wrap{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  .btn{font-size:17px;padding:14px 16px;gap:10px}
  .card b{font-size:15px}
  .price{font-size:13px;padding:9px 14px 9px 10px}
  .hello.c,.hello.d{display:none}
  .why{padding:28px 10px 12px}
}
/* glass blur only where it is cheap */
@media (hover:hover) and (min-width:821px){.card,.chip,details,.qr{-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
  .marquee{-webkit-mask-image:none;mask-image:none;overflow:visible}
  .track{width:auto;justify-content:center}
  .set{flex-wrap:wrap;justify-content:center}
  .set[aria-hidden="true"]{display:none}
  .marquee.rev{display:none}
  .l-pupil{transform:none}
}