:root {
    --green:#13F535;
    --green2:#00C82B;
    --yellow:#ffd400;
    --bg:#03080c;
    --safe-top:env(safe-area-inset-top,0px);
    --safe-bottom:env(safe-area-inset-bottom,0px);
}
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; background:var(--bg); color:#eafff6; font-family:Inter,Segoe UI,Roboto,Arial,sans-serif; }
body { -webkit-tap-highlight-color:transparent; user-select:none; }
.intro {
    position:relative; width:100%; height:100dvh; min-height:100%; display:grid; place-items:center;
    padding:calc(18px + var(--safe-top)) 18px calc(18px + var(--safe-bottom)); overflow:hidden;
    background:
      radial-gradient(circle at 50% 42%, rgba(0,200,43,.10), transparent 31%),
      radial-gradient(circle at 50% 50%, #071509 0%, #03080c 58%, #010305 100%);
}
.intro::before {
    content:""; position:absolute; inset:0; pointer-events:none; opacity:.18;
    background:repeating-linear-gradient(0deg, rgba(19,245,53,.05) 0, rgba(19,245,53,.05) 1px, transparent 1px, transparent 5px);
    animation:scanMove 7s linear infinite;
}
.intro-stars { position:absolute; inset:0; pointer-events:none; opacity:.38; background-image:radial-gradient(circle, rgba(19,245,53,.55) 0 1px, transparent 1.5px); background-size:97px 83px; animation:starsDrift 22s linear infinite; }
.intro-content { position:relative; z-index:2; width:min(620px,100%); display:flex; flex-direction:column; align-items:center; text-align:center; }
.intro-logo-wrap { position:relative; width:clamp(190px,31vw,280px); aspect-ratio:1; display:grid; place-items:center; border-radius:50%; filter:drop-shadow(0 0 28px rgba(0,200,43,.16)); }
.intro-logo { width:82%; height:82%; object-fit:contain; border-radius:50%; animation:logoFloat 4s ease-in-out infinite; }
.intro-sweep { position:absolute; width:82%; height:82%; border-radius:50%; overflow:hidden; animation:logoSweep 3.8s linear infinite; mix-blend-mode:screen; }
.intro-sweep::before { content:""; position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg, transparent 0 318deg, rgba(19,245,53,.04) 330deg, rgba(19,245,53,.35) 352deg, rgba(19,245,53,.82) 359deg, transparent 360deg); }
.intro-pulse { position:absolute; width:82%; height:82%; border:1px solid rgba(19,245,53,.32); border-radius:50%; opacity:0; animation:pulseRing 3.2s ease-out infinite; }
.pulse-two { animation-delay:1.6s; }
.intro-brand { margin-top:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
.intro-wordmark { display:block; width:min(92vw,780px); height:auto; filter:drop-shadow(0 8px 18px rgba(0,0,0,.42)); }
.intro-version { color:var(--green); font-size:11px; font-weight:900; letter-spacing:.14em; text-shadow:0 0 10px rgba(19,245,53,.24); text-transform:uppercase; }
.intro-language-line { margin:20px 0 13px; color:#91aa95; font-size:clamp(10px,1.8vw,13px); letter-spacing:.04em; }
.language-flags { display:flex; align-items:center; justify-content:center; gap:clamp(10px,2.6vw,20px); }
.flag-button {
    position:relative; width:clamp(62px,12vw,82px); height:clamp(52px,9.5vw,66px); padding:0;
    display:grid; place-items:center; border:1px solid rgba(19,245,53,.18); border-radius:13px;
    background:rgba(8,19,27,.72); box-shadow:0 8px 24px rgba(0,0,0,.24), inset 0 0 18px rgba(19,245,53,.025);
    cursor:pointer; transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.flag-button span { font-size:clamp(36px,7vw,50px); line-height:1; filter:saturate(1.06); }
.flag-button:hover,.flag-button:focus-visible { outline:none; transform:translateY(-3px) scale(1.04); border-color:rgba(19,245,53,.62); background:rgba(14,38,45,.88); box-shadow:0 0 0 2px rgba(19,245,53,.08),0 12px 30px rgba(0,0,0,.3); }
.flag-button.saved::after { content:""; position:absolute; right:7px; top:7px; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 9px var(--green); }
.intro-hint { margin-top:18px; color:#527356; font-size:9px; font-weight:800; letter-spacing:.24em; }
.intro.launching .intro-logo-wrap { animation:launchZoom .86s cubic-bezier(.2,.75,.2,1) forwards; }
.intro.launching .intro-sweep { animation-duration:.55s; }
.intro.launching .flag-button { pointer-events:none; animation:flagsOut .55s ease forwards; }
.intro.launching .intro-language-line,.intro.launching .intro-hint { animation:fadeOut .4s ease forwards; }
.intro.launching .intro-brand { animation:brandLaunch .75s ease forwards; }
.intro.launching .intro-wordmark { opacity:.92; }
@keyframes logoSweep { to { transform:rotate(360deg); } }
@keyframes logoFloat { 0%,100%{transform:scale(1)} 50%{transform:scale(1.025)} }
@keyframes pulseRing { 0%{transform:scale(.86);opacity:0} 18%{opacity:.42} 100%{transform:scale(1.22);opacity:0} }
@keyframes scanMove { to { transform:translateY(20px); } }
@keyframes starsDrift { to { background-position:97px 83px; } }
@keyframes launchZoom { 0%{transform:scale(1)} 58%{transform:scale(1.1)} 100%{transform:scale(1.6);opacity:0} }
@keyframes flagsOut { to { transform:translateY(16px);opacity:0} }
@keyframes fadeOut { to { opacity:0 } }
@keyframes brandLaunch { 60%{color:var(--green)} 100%{transform:translateY(-6px);opacity:0} }
@media (max-width:520px) {
    .intro { place-items:center; }
    .intro-logo-wrap { width:min(58vw,230px); }
    .intro-brand { gap:8px; }
    .intro-wordmark { width:min(94vw,620px); }
    .intro-version { font-size:9px; letter-spacing:.12em; }
    .intro-language-line { max-width:310px; line-height:1.55; margin-top:16px; }
    .language-flags { gap:9px; width:100%; }
    .flag-button { width:min(20vw,72px); height:min(17vw,60px); border-radius:11px; }
    .flag-button span { font-size:min(11vw,44px); }
}
@media (prefers-reduced-motion:reduce) {
    .intro-logo,.intro-sweep,.intro-pulse,.intro-stars,.intro::before { animation:none !important; }
}