/* ============ Latebird — locked brand · WOW redesign ============ */ :root{ --night:#0B2E2A; --night-deep:#08221F; --night-floor:#08231F; --money:#3DD68C; --gold:#FFC931; --gold-deep:#B98A00; --cream:#F7F5EF; --line:#E3E0D6; --muted:#5C6B68; --muted-light:#9DBBB1; --white:#fff; --radius:18px; --shadow:0 10px 36px rgba(11,46,42,.10); --ease-soft:cubic-bezier(.32,.72,0,1); --ease-pop:cubic-bezier(.34,1.56,.64,1); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} /* clip on body only — overflow-x:clip on makes the root a non-scroll-container, which silently disables ALL programmatic scrolling (scrollIntoView/scrollTo) in Chrome */ body{overflow-x:clip} body{ font-family:'Rubik',Arial,sans-serif; background:var(--cream); color:var(--night); line-height:1.55; -webkit-font-smoothing:antialiased; } .nowrap{white-space:nowrap} .center{text-align:center} /* decorative SVGs carry latin boards/labels — never let page RTL reorder them */ .hero-scene svg,.strip svg,.spot3-wrap svg,.signal-illus svg,.baggage-illus svg,.bp-barcode{direction:ltr} /* mascot color schemes */ .m-light{--head:#F7F5EF;--beak:#FFC931;--eye:#0B2E2A;--pupil:#F7F5EF;--hi:#0B2E2A} .m-dark{--head:#0B2E2A;--beak:#FFC931;--eye:#fff;--pupil:#0B2E2A;--hi:#fff} /* wordmark */ .wm{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-1px;direction:ltr;display:inline-block} .wm-late{color:#F7F5EF} .wm-bird{color:var(--money)} .lockup{display:inline-flex;align-items:center;gap:10px;text-decoration:none} /* ============ buttons ============ */ .btn{ display:inline-block;border:0;border-radius:16px;cursor:pointer; font-family:'Rubik',sans-serif;font-weight:700;text-decoration:none;text-align:center; transition:transform .35s var(--ease-soft),box-shadow .35s var(--ease-soft),background .25s var(--ease-soft); } .btn:active{transform:scale(.97)} .btn-gold{ background:var(--gold);color:var(--night); padding:14px 28px;font-size:17px; box-shadow:0 6px 22px rgba(255,201,49,.35); } .btn-gold:hover{background:#FFD45C;box-shadow:0 10px 30px rgba(255,201,49,.5);transform:translateY(-2px)} .btn-big{width:100%;padding:17px 28px;font-size:18px} .btn-xl{padding:18px 38px;font-size:19px;border-radius:99px} .btn-sm{padding:9px 18px;font-size:14.5px;box-shadow:none;white-space:nowrap} .btn-night{background:var(--night);color:#fff;padding:13px 26px;font-size:16px} .btn-night:hover{background:#114239;transform:translateY(-2px)} .btn-ghost{background:transparent;color:var(--muted);padding:13px 18px;font-size:15px;font-weight:600} .btn-ghost:hover{color:var(--night)} /* ============ header ============ */ .site-header{ background:rgba(11,46,42,.92); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); display:flex;align-items:center;justify-content:space-between;gap:14px; padding:12px 20px;position:sticky;top:0;z-index:50; box-shadow:0 2px 16px rgba(0,0,0,.25); } .site-header .wm{font-size:24px} .site-nav{display:none;gap:22px} .site-nav a{color:var(--muted-light);text-decoration:none;font-size:15px;font-weight:500;transition:color .25s var(--ease-soft)} .site-nav a:hover{color:#fff} @media(min-width:1024px){.site-nav{display:flex}} /* language switcher */ .header-actions{display:flex;align-items:center;gap:10px} .lang-switch{ display:inline-flex;align-items:center;gap:6px; color:var(--muted-light); border:1px solid rgba(157,187,177,.35);border-radius:10px; padding:6px 9px;background:rgba(247,245,239,.05); transition:border-color .25s var(--ease-soft); } .lang-switch:hover{border-color:rgba(157,187,177,.7)} .lang-switch svg{flex:none} .lang-switch select{ appearance:none;-webkit-appearance:none; background:transparent;border:0;outline:none;cursor:pointer; font-family:'Rubik',sans-serif;font-size:13.5px;font-weight:500; color:var(--cream);padding-inline-end:2px; } .lang-switch select option{color:var(--night);background:#fff} @media(max-width:430px){ .site-header{padding:10px 12px;gap:8px} .site-header .wm{font-size:19px} .site-header .lockup svg{width:30px;height:30px} .btn-sm{padding:8px 12px;font-size:13px} .lang-switch{padding:5px 7px} .lang-switch select{font-size:12.5px} } /* ============ HERO — night green, huge editorial type ============ */ .hero{ background: radial-gradient(900px 460px at 78% 10%,rgba(61,214,140,.10),transparent 65%), radial-gradient(700px 420px at 12% 80%,rgba(255,201,49,.07),transparent 60%), linear-gradient(175deg,#071F1B 0%,var(--night) 60%,#103D36 100%); color:#fff;position:relative;overflow:clip; } .hero-copy{ max-width:1100px;margin:0 auto;text-align:center;position:relative;z-index:2; padding:64px 20px 8px; } .hero h1{ font-size:clamp(34px,5.6vw,76px); font-weight:900;line-height:1.08;letter-spacing:-.5px;color:var(--cream); } .hero-accent{ margin-top:14px; font-size:clamp(30px,5.4vw,72px); font-weight:900;line-height:1.05;color:var(--gold); } .hero-accent .nowrap{ color:var(--money); font-family:'Space Grotesk','Rubik',sans-serif; font-feature-settings:"tnum"; } .hero-sub{margin:22px auto 0;max-width:560px;color:var(--muted-light);font-size:clamp(15px,3.8vw,18px)} .hero-actions{ margin-top:30px;display:flex;align-items:center;justify-content:center; gap:18px 34px;flex-wrap:wrap; } .hero-counter{display:flex;flex-direction:column;align-items:center;gap:1px} .counter-num{ font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(22px,3vw,30px); color:var(--money);letter-spacing:-.5px;font-feature-settings:"tnum"; font-variant-numeric:tabular-nums; } .counter-cap{font-size:13px;color:var(--muted-light);font-weight:500} /* hero scene */ .hero-scene{position:relative;z-index:1;margin-top:18px;line-height:0;pointer-events:none} .hero-scene svg{width:100%;height:auto;display:block} .hero-scene--m{display:none} @media(max-width:767px){ .hero-scene--d{display:none} .hero-scene--m{display:block;max-width:520px;margin-inline:auto} .hero-copy{padding-top:44px} } /* --- hero scene animations (transform/opacity only) — a living, looping world --- */ /* plane: full continuous cross-sky flight on a loop, not a short alternate nudge */ .sc-plane{will-change:transform;animation:planeFly 16s linear infinite} @keyframes planeFly{ 0%{transform:translate(40px,-6px)} 50%{transform:translate(-150px,7px)} 100%{transform:translate(40px,-6px)} } .sc-contrail{animation:trailFade 16s linear infinite} @keyframes trailFade{0%,100%{opacity:.7}50%{opacity:.18}} .cloud{will-change:transform;animation:cloudDrift 46s ease-in-out infinite alternate} .cloud-2{animation-duration:34s;animation-delay:-12s} @keyframes cloudDrift{from{transform:translateX(0)}to{transform:translateX(40px)}} .sc-moon{transform-box:fill-box;transform-origin:center;animation:moonGlow 7s ease-in-out infinite} @keyframes moonGlow{0%,100%{opacity:1}50%{opacity:.78}} /* coins: drop in once, THEN keep bobbing forever so the pile feels alive */ .coin{opacity:0;transform-box:fill-box;transform-origin:center;animation:coinDrop .55s var(--ease-pop) forwards,coinBob 3.2s ease-in-out infinite;will-change:transform} .coin-1{animation-delay:.9s,1.6s}.coin-2{animation-delay:1.15s,1.9s}.coin-3{animation-delay:1.4s,2.2s} .coin-4{animation-delay:1.65s,2.5s}.coin-5{animation-delay:1.9s,2.8s} @keyframes coinDrop{ from{opacity:0;transform:translateY(-30px) scale(.6)} to{opacity:1;transform:translateY(0) scale(1)} } @keyframes coinBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-4deg)}} /* board "DELAYED" line: flicker once on load, then re-flicker periodically (like a real board) */ .sc-flick{animation:boardFlick 1.6s steps(1,end) both .5s,boardReflick 9s steps(1,end) 3s infinite} @keyframes boardFlick{ 0%{opacity:0}14%{opacity:1}28%{opacity:.15}42%{opacity:1} 58%{opacity:.25}72%{opacity:1}100%{opacity:1} } @keyframes boardReflick{ 0%,84%,100%{opacity:1}86%{opacity:.2}88%{opacity:1}90%{opacity:.3}92%{opacity:1} } /* DELAYED status dot: pulse forever, not just 3 times */ .sc-dot{animation:dotPulse 1.4s ease-in-out infinite .5s;transform-box:fill-box;transform-origin:center} @keyframes dotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}} .sc-bird{transform-box:fill-box;transform-origin:center bottom;animation:birdBob 4.5s ease-in-out infinite} @keyframes birdBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-1.5deg)}} .lb-pupil{transition:transform .18s ease-out;will-change:transform} /* mascot blinks on idle (eyelid wipe) — handled by JS toggling .blink on .sc-bird */ .sc-bird.blink .lb-pupil{animation:none} .sc-glint{transform-box:fill-box;transform-origin:center;animation:glint 5s ease-in-out infinite} @keyframes glint{0%,92%,100%{opacity:0;transform:scale(.4)}95%{opacity:.9;transform:scale(1)}} /* ============ SOCIAL-PROOF STRIP (dark) ============ */ .strip{ background:var(--night-floor);color:var(--cream); padding:34px 0 92px;position:relative;text-align:center; } .strip::after{ /* cream curve into the checker section */ content:'';position:absolute;left:0;right:0;bottom:-1px;height:46px; background:var(--cream);border-radius:46px 46px 0 0; } .strip-label{ font-size:14px;font-weight:600;color:var(--muted-light); letter-spacing:.2px;margin-bottom:18px;padding:0 18px; } .marquee{overflow:hidden;position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } .marquee-track{display:flex;width:max-content;animation:marquee 34s linear infinite} .tails{height:86px;width:auto;display:block;flex:none;margin-inline-end:60px} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} .strip-badge{margin:30px auto 0;max-width:320px;padding:0 18px;position:relative;z-index:2} .strip-badge svg{width:100%;height:auto;display:block;filter:drop-shadow(0 14px 34px rgba(0,0,0,.35))} /* ============ generic card ============ */ .card{ background:#fff;border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow); } /* ============ CHECKER — boarding-pass card on cream ============ */ .checker-sec{padding-top:0!important;margin-top:-58px;position:relative;z-index:3} .checker-wrap{position:relative;max-width:680px;margin:0 auto} .hero-mascot{ position:absolute;top:-46px;inset-inline-start:30px;z-index:0; transform:rotate(-8deg); animation:peek .9s var(--ease-pop) both .3s; } .checker-wrap .checker{position:relative;z-index:1} @keyframes peek{from{transform:translateY(34px) rotate(-8deg);opacity:0}to{transform:translateY(0) rotate(-8deg);opacity:1}} @media(min-width:720px){.hero-mascot{inset-inline-start:-26px;top:-48px}} .checker{ color:var(--night);text-align:start;position:relative; border:1px solid var(--line);border-radius:22px; box-shadow:0 24px 70px rgba(11,46,42,.18); overflow:hidden;padding:0; } /* boarding-pass stub */ .bp-stub{ background:var(--night);color:var(--cream); display:flex;align-items:center;justify-content:space-between;gap:12px; padding:13px 20px; font-family:'Space Grotesk',sans-serif;font-weight:700; letter-spacing:2.5px;font-size:11.5px;white-space:nowrap; } .bp-air{color:var(--money)} .bp-route{color:rgba(247,245,239,.55);overflow:hidden;text-overflow:ellipsis} .bp-gate{ background:var(--gold);color:var(--night);border-radius:7px; padding:3px 10px;letter-spacing:1.5px;flex:none; } @media(max-width:480px){.bp-route{display:none}} /* perforation between stub and body */ .bp-body{ position:relative;padding:24px 20px 26px; border-top:2px dashed var(--line); } @media(min-width:720px){.bp-body{padding:28px 34px 30px}} .bp-body::before,.bp-body::after{ content:'';position:absolute;top:-12px;width:24px;height:24px;border-radius:50%; background:var(--cream);border:1px solid var(--line); } .bp-body::before{inset-inline-start:-13px} .bp-body::after{inset-inline-end:-13px} /* barcode footer */ .bp-foot{ display:flex;align-items:center;gap:14px; padding:12px 20px 14px;border-top:2px dashed var(--line); color:var(--night);position:relative; } .bp-foot::before,.bp-foot::after{ content:'';position:absolute;top:-12px;width:24px;height:24px;border-radius:50%; background:var(--cream);border:1px solid var(--line); } .bp-foot::before{left:-13px} .bp-foot::after{right:-13px} .bp-barcode{height:24px;width:110px;flex:none;opacity:.5} .bp-code{ font-family:'Space Grotesk',sans-serif;font-size:10.5px;letter-spacing:2px; color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .trustbar-p{ max-width:860px;margin:22px auto 0;font-size:14px;color:var(--muted);text-align:center; border:1px dashed var(--line);border-radius:99px;padding:10px 22px;background:#fff; } /* progress */ .progress{display:flex;list-style:none;gap:6px;margin-bottom:22px} .progress li{ flex:1;display:flex;align-items:center;justify-content:center;gap:7px; font-size:12.5px;font-weight:600;color:#A7B1AC; padding-bottom:10px;border-bottom:3px solid var(--line); } .progress li span{ width:20px;height:20px;border-radius:50%;background:var(--line);color:var(--muted); display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700; } .progress li em{font-style:normal} .progress li.active{color:var(--night);border-color:var(--gold)} .progress li.active span{background:var(--gold);color:var(--night)} .progress li.done{color:var(--money);border-color:var(--money)} .progress li.done span{background:var(--money);color:var(--night)} .step-title{font-size:21px;font-weight:800;margin-bottom:4px} .step-sub{font-size:14px;color:var(--muted);margin-bottom:18px} /* fields */ .field{margin-bottom:14px;text-align:start} .field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px;color:var(--night)} .field input{ width:100%;padding:13px 14px;font-size:16px;font-family:'Rubik',sans-serif; border:1.5px solid var(--line);border-radius:12px;background:var(--cream);color:var(--night); transition:border-color .2s var(--ease-soft),background .2s var(--ease-soft); } .field input:focus{outline:none;border-color:var(--money);background:#fff} .field input::placeholder{color:#A7B1AC} .field-row{display:grid;grid-template-columns:1fr;gap:0} @media(min-width:560px){.field-row{grid-template-columns:1.4fr 1fr;gap:12px}} .err{ background:#FDF0EE;border:1px solid #F3C7BF;color:#9C3A26; border-radius:10px;padding:10px 14px;font-size:14px;margin-bottom:14px; } .assure{margin-top:12px;text-align:center;font-size:13px;color:var(--muted)} .micro{font-size:12.5px;color:var(--muted);margin-top:8px} /* step 2 choices */ .choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px} .choice{ background:var(--cream);border:1.5px solid var(--line);border-radius:14px; padding:14px 12px;text-align:start;cursor:pointer;font-family:'Rubik',sans-serif; transition:border-color .25s var(--ease-soft),background .25s var(--ease-soft),box-shadow .25s var(--ease-soft),transform .25s var(--ease-soft); } .choice b{display:block;font-size:15.5px;color:var(--night)} .choice small{display:block;font-size:12px;color:var(--muted);margin-top:3px;line-height:1.4} .choice:hover{border-color:var(--money);transform:translateY(-2px)} .choice.selected{border-color:var(--money);background:#EDFBF4;box-shadow:0 4px 14px rgba(61,214,140,.18)} .followup{margin-top:16px;padding-top:16px;border-top:1px dashed var(--line)} .fu-q{font-size:15px;font-weight:700;margin-bottom:10px} .pills{display:flex;flex-wrap:wrap;gap:8px} .pill{ background:#fff;border:1.5px solid var(--line);border-radius:99px; padding:9px 16px;font-size:14px;font-family:'Rubik',sans-serif;font-weight:500; color:var(--night);cursor:pointer;transition:all .2s var(--ease-soft); } .pill:hover{border-color:var(--money)} .pill.selected{background:var(--night);border-color:var(--night);color:#fff} .step-actions{display:flex;gap:10px;margin-top:20px;align-items:center} .step-actions .btn-big{flex:1} /* loading */ .loading{text-align:center;padding:46px 10px} .spinner{ width:46px;height:46px;margin:0 auto 18px;border-radius:50%; border:4px solid var(--line);border-top-color:var(--gold); animation:spin .8s linear infinite; } @keyframes spin{to{transform:rotate(360deg)}} .load-msg{font-size:15.5px;font-weight:600;color:var(--muted)} /* ============ result ============ */ .result-label{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:4px} .result-amount{ font-size:clamp(34px,9vw,46px);font-weight:800;line-height:1.15;color:var(--night); } .result-amount .sum{color:var(--money);font-family:'Space Grotesk','Rubik',sans-serif;font-feature-settings:"tnum"} .result-lines{list-style:none;margin:14px 0 4px;padding:0} .result-lines li{ font-size:14.5px;color:var(--muted);padding:5px 0;padding-inline-start:18px;position:relative; } .result-lines li::before{ content:'';width:7px;height:7px;border-radius:50%;background:var(--money); position:absolute;inset-inline-start:0;top:13px; } .result-head{font-size:clamp(22px,6vw,28px);font-weight:800;line-height:1.3;margin-bottom:8px} .result-text{font-size:15px;color:var(--muted)} .result-mascot{display:block;margin:0 auto 8px;animation:peek .8s var(--ease-pop) both} /* email capture */ .email-block{ margin-top:22px;background:var(--cream);border:1.5px solid var(--line); border-radius:14px;padding:18px 16px; } .email-block h3{font-size:17.5px;font-weight:800;margin-bottom:6px} .email-block p{font-size:14px;color:var(--muted);margin-bottom:12px} .email-row{display:flex;flex-direction:column;gap:10px} @media(min-width:560px){.email-row{flex-direction:row}.email-row input{flex:1}} .email-row input{ padding:13px 14px;font-size:16px;border:1.5px solid var(--line);border-radius:12px; font-family:'Rubik',sans-serif;background:#fff; } .email-row input:focus{outline:none;border-color:var(--money)} .email-fine{font-size:12px;color:var(--muted);margin-top:10px;margin-bottom:0} .thanks{text-align:center;padding:8px 0 4px} .thanks h3{font-size:20px;font-weight:800;margin:10px 0 8px} .thanks p{font-size:14.5px;color:var(--muted)} .btn-wa{background:#25D366;color:#fff;margin-top:14px;padding:13px 24px;font-size:15.5px} .btn-wa:hover{background:#1fbd5a} .btn-restart{display:block;margin:18px auto 0} /* ============ sections ============ */ .section{padding:88px 18px;max-width:1020px;margin:0 auto} .sec-title{ font-size:clamp(28px,4.8vw,44px);font-weight:900;text-align:center; margin-bottom:40px;line-height:1.18;letter-spacing:-.4px; } .sec-title.small{font-size:clamp(20px,5vw,27px);text-align:start;margin-bottom:12px} .section.tinted{max-width:none;background:#EFEDE4} .section.tinted .signals{max-width:1020px;margin:0 auto} /* amounts — boarding-pass flavored cards */ .amount-grid{display:grid;grid-template-columns:1fr;gap:18px} @media(min-width:760px){.amount-grid{grid-template-columns:1fr 1fr}} body.ltr .amt-card--eu{order:-1} /* EU audiences see the € table first */ .amt-card{padding:24px;position:relative;overflow:hidden} .amt-card::before{ /* gold ticket edge */ content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:6px; background:linear-gradient(180deg,var(--gold),#E0A400); } .amt-card--eu::before{background:linear-gradient(180deg,var(--money),#2BA56C)} .amt-card h3,.baggage-note h3{font-size:17.5px;font-weight:800;margin-bottom:14px;line-height:1.4} .tagline{display:block;font-size:13px;font-weight:500;color:var(--gold-deep);margin-top:2px} .amt-card table{width:100%;border-collapse:collapse} .amt-card th{font-size:12.5px;font-weight:600;color:var(--muted);text-align:start;padding:6px 0;border-bottom:1px solid var(--line)} .amt-card td{padding:12px 0;font-size:14.5px;border-bottom:1px dashed var(--line);text-align:start} .amt-card tr:last-child td{border-bottom:0} .amt-card .amt{ font-weight:700;font-size:20px;color:var(--night);white-space:nowrap; font-family:'Space Grotesk','Rubik',sans-serif;font-feature-settings:"tnum"; } .baggage-note{margin-top:18px;padding:24px} .baggage-note p{font-size:14.5px;color:var(--muted)} .boost{ margin:28px auto 0;max-width:660px;text-align:center;font-size:16px;font-weight:600; background:#FFF6DC;border:1px solid #F2DFA6;border-radius:14px;padding:14px 20px; } .micro.center{margin-top:14px} /* how it works */ .spot3-wrap{max-width:560px;margin:0 auto 38px} .spot3-wrap svg{width:100%;height:auto;display:block} .steps3{display:grid;grid-template-columns:1fr;gap:18px} @media(min-width:760px){.steps3{grid-template-columns:1fr 1fr 1fr}} .step3{ background:#fff;border:1px solid var(--line); border-radius:var(--radius);padding:26px 22px;box-shadow:var(--shadow); transition:transform .35s var(--ease-soft),box-shadow .35s var(--ease-soft); } .step3:hover{transform:translateY(-4px);box-shadow:0 16px 44px rgba(11,46,42,.14)} .step3-num{ width:42px;height:42px;border-radius:50%;background:var(--gold);color:var(--night); font-weight:800;font-size:19px;display:flex;align-items:center;justify-content:center;margin-bottom:14px; font-family:'Space Grotesk',sans-serif; } .step3 h3{font-size:18px;font-weight:800;margin-bottom:8px} .step3 h3 small{display:block;font-size:12.5px;font-weight:500;color:#2BA56C;margin-top:2px} .step3 p{font-size:14.5px;color:var(--muted)} /* fee */ .fee-grid{display:grid;grid-template-columns:1fr;gap:18px} @media(min-width:760px){.fee-grid{grid-template-columns:1fr 1fr 1fr}} .fee-card{ padding:30px 22px;text-align:center;position:relative; transition:transform .35s var(--ease-soft),box-shadow .35s var(--ease-soft); } .fee-card:hover{transform:translateY(-4px);box-shadow:0 16px 44px rgba(11,46,42,.14)} .fee-card.highlight{ background:linear-gradient(175deg,var(--night) 0%,var(--night-deep) 100%); border-color:var(--night);color:#fff; box-shadow:0 18px 50px rgba(11,46,42,.35); } .fee-card.highlight h3{color:#fff} .fee-card.highlight p{color:var(--muted-light)} .fee-card p.fee-big{ font-size:46px;font-weight:700;color:#2BA56C;direction:ltr; font-family:'Space Grotesk','Rubik',sans-serif;font-feature-settings:"tnum";line-height:1.15; margin-bottom:2px; } .fee-card.highlight p.fee-big{color:var(--gold)} .fee-card h3{font-size:16.5px;font-weight:800;margin:6px 0 8px} .fee-card p{font-size:14px;color:var(--muted)} .stamp{ position:absolute;top:14px;inset-inline-end:-8px; transform:rotate(8deg); border:2px solid var(--gold);color:var(--gold);border-radius:8px; font-size:11px;font-weight:800;letter-spacing:.5px; padding:4px 10px;opacity:.95;background:rgba(255,201,49,.08); pointer-events:none; } /* trust signals */ .signals{display:grid;grid-template-columns:1fr;gap:14px} @media(min-width:600px){.signals{grid-template-columns:1fr 1fr}} @media(min-width:900px){.signals{grid-template-columns:repeat(3,1fr)}} .signal{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px} .signal h3{font-size:15.5px;font-weight:800;margin-bottom:6px;position:relative;padding-inline-start:18px} .signal h3::before{ content:'';width:9px;height:9px;border-radius:50%;background:var(--gold); position:absolute;inset-inline-start:0;top:8px; } .signal p{font-size:13.5px;color:var(--muted)} .signal-illus{display:flex;align-items:center;justify-content:center;padding:12px} .signal-illus svg{width:150px;height:auto} .radar-ring{transform-box:fill-box;transform-origin:center;animation:radarSpin 14s linear infinite} .rr2{animation-duration:22s;animation-direction:reverse} @keyframes radarSpin{to{transform:rotate(360deg)}} .radar-blip{animation:blip 2.2s ease-in-out infinite} @keyframes blip{0%,100%{opacity:1}50%{opacity:.15}} .bell{transform-box:fill-box;transform-origin:top center;animation:bellSway 3.4s ease-in-out infinite} @keyframes bellSway{0%,100%{transform:rotate(0)}30%{transform:rotate(7deg)}60%{transform:rotate(-6deg)}} /* baggage CTA */ .baggage-cta{ padding:30px 26px;display:grid;grid-template-columns:1fr;gap:20px;align-items:center; } @media(min-width:720px){.baggage-cta{grid-template-columns:220px 1fr;gap:34px;padding:34px 36px}} .baggage-illus{max-width:220px;margin:0 auto} .baggage-illus svg{width:100%;height:auto;display:block} .suitcase{animation:caseSlide 5s ease-in-out infinite alternate} @keyframes caseSlide{from{transform:translateX(-7px)}to{transform:translateX(7px)}} .baggage-cta p{font-size:15px;color:var(--muted);margin-bottom:18px;max-width:680px} /* FAQ */ .faq-list{max-width:760px;margin:0 auto} .faq-list details{ background:#fff;border:1px solid var(--line);border-radius:14px; margin-bottom:10px;overflow:hidden; } .faq-list summary{ list-style:none;cursor:pointer;padding:17px 20px;font-size:15.5px;font-weight:700; position:relative;padding-inline-end:44px;transition:background .2s var(--ease-soft); } .faq-list summary::-webkit-details-marker{display:none} .faq-list summary::after{ content:'+';position:absolute;inset-inline-end:18px;top:50%;transform:translateY(-50%); width:24px;height:24px;border-radius:50%;background:var(--cream);color:var(--night); display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px; transition:transform .3s var(--ease-soft),background .3s var(--ease-soft); } .faq-list details[open] summary::after{transform:translateY(-50%) rotate(45deg);background:var(--gold)} .faq-list summary:hover{background:#FCFBF7} .faq-list details p{padding:0 20px 18px;font-size:14.5px;color:var(--muted)} /* closer */ .closer{ background: radial-gradient(700px 380px at 50% 0%,rgba(61,214,140,.08),transparent 60%), linear-gradient(175deg,var(--night) 0%,var(--night-deep) 100%); color:#fff;text-align:center;padding:90px 18px 96px; } .closer h2{font-size:clamp(26px,5vw,46px);font-weight:900;margin-bottom:10px;letter-spacing:-.4px} .closer p{color:var(--muted-light);font-size:16px;margin-bottom:28px} .closer .btn-big{width:auto;min-width:260px} .closer-mascot{margin-bottom:16px;transform:rotate(6deg)} .closer-claim{ display:inline-block;margin-top:18px;color:var(--gold);text-decoration:none; font-size:15px;font-weight:600;border-bottom:1px solid rgba(255,201,49,.4); padding-bottom:2px;transition:color .25s var(--ease-soft),border-color .25s var(--ease-soft); } .closer-claim:hover{color:#FFD45C;border-color:var(--gold)} /* footer */ .site-footer{ background:var(--night-deep);color:var(--muted-light); text-align:center;padding:38px 18px 30px;border-top:1px solid rgba(157,187,177,.15); } .wm-foot{font-size:22px} .foot-tag{margin-top:8px;font-size:14px} .foot-links{margin:16px 0 14px;display:flex;justify-content:center;gap:24px;flex-wrap:wrap} .foot-links a{color:#fff;text-decoration:none;font-size:14px;opacity:.85} .foot-links a:hover{opacity:1;text-decoration:underline} .foot-legal{font-size:12px;opacity:.65;max-width:560px;margin:0 auto} /* ============ scroll-driven reveals ============ */ /* layer 1: native CSS scroll-driven animations (2026 baseline) */ @supports (animation-timeline: view()){ .rv{ animation:rvRise .8s var(--ease-soft) both; animation-timeline:view(); animation-range:entry 0% entry 42%; } } @keyframes rvRise{ from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:translateY(0)} } /* layer 2: IntersectionObserver fallback (class added by fx.js only) */ html.no-sda .rv{ opacity:0;transform:translateY(26px); transition:opacity .7s var(--ease-soft),transform .7s var(--ease-soft); } html.no-sda .rv.in{opacity:1;transform:none} /* spot 3-steps staggered entrance */ .spot-step{transform-box:fill-box;transform-origin:center;animation:spotPop .7s var(--ease-pop) both} .spot-step.s1{animation-delay:.1s} .spot-step.s2{animation-delay:.35s} .spot-step.s3{animation-delay:.6s} @keyframes spotPop{ from{opacity:0;transform:scale(.82)} to{opacity:1;transform:scale(1)} } /* ============ header: login + hamburger ============ */ .btn-login{ display:none;background:transparent;border:1px solid rgba(157,187,177,.4);border-radius:10px; color:var(--cream);font-family:'Rubik',sans-serif;font-size:14px;font-weight:600; padding:8px 16px;cursor:pointer;white-space:nowrap; transition:border-color .25s var(--ease-soft),background .25s var(--ease-soft); } .btn-login:hover{border-color:var(--money);background:rgba(61,214,140,.08)} @media(min-width:1024px){.btn-login{display:inline-block}} .menu-btn{ display:flex;flex-direction:column;justify-content:center;gap:5px; width:42px;height:42px;padding:10px;flex:none; background:transparent;border:0;cursor:pointer;border-radius:10px; } .menu-btn span{display:block;height:2.5px;border-radius:2px;background:var(--cream);transition:transform .3s var(--ease-soft),opacity .3s var(--ease-soft)} .menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)} .menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0} .menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)} @media(min-width:1024px){.menu-btn{display:none}} @media(max-width:1023px){.site-header .lang-switch{display:none}} /* drawer */ .drawer-overlay{position:fixed;inset:0;background:rgba(4,20,15,.55);z-index:180;backdrop-filter:blur(2px)} .drawer-overlay[hidden]{display:none} .drawer{ position:fixed;top:0;bottom:0;inset-inline-start:0;width:min(320px,86vw); background:linear-gradient(175deg,#071F1B 0%,var(--night) 100%); z-index:200;padding:18px 22px 28px;display:flex;flex-direction:column;gap:22px; transform:translateX(100%);visibility:hidden; transition:transform .32s var(--ease-soft); box-shadow:0 0 60px rgba(0,0,0,.4);overflow-y:auto; } body.ltr .drawer{transform:translateX(-100%)} .drawer.open{transform:none;visibility:visible} .drawer-head{display:flex;align-items:center;justify-content:space-between} .drawer-head .wm{font-size:24px} .drawer-close{ background:transparent;border:0;color:var(--muted-light);font-size:30px;line-height:1; cursor:pointer;padding:4px 10px;border-radius:8px; } .drawer-close:hover{color:#fff} .drawer-nav{display:flex;flex-direction:column} .drawer-nav a{ color:var(--cream);text-decoration:none;font-size:18px;font-weight:600; padding:14px 4px;border-bottom:1px solid rgba(157,187,177,.15); } .drawer-nav a:hover{color:var(--gold)} .drawer-lang{align-self:flex-start} .drawer-actions{margin-top:auto;display:flex;flex-direction:column;gap:12px} .drawer-login{ background:transparent;border:1.5px solid rgba(157,187,177,.45);color:var(--cream); padding:14px 24px;font-size:16px; } .drawer-login:hover{border-color:var(--money)} body.no-scroll{overflow:hidden} /* ============ gmail-scan secondary option ============ */ .gmail-opt{ display:flex;align-items:center;justify-content:center;gap:8px; margin:14px auto 0;background:transparent;border:1.5px dashed var(--line);border-radius:99px; padding:10px 20px;font-family:'Rubik',sans-serif;font-size:14px;font-weight:600;color:var(--muted); cursor:pointer;transition:border-color .25s var(--ease-soft),color .25s var(--ease-soft); } .gmail-opt:hover{border-color:var(--money);color:var(--night)} .soon-pill{ background:var(--gold);color:var(--night);border-radius:99px; font-size:11px;font-weight:800;padding:2px 9px;letter-spacing:.3px;flex:none; } .soon-pill--big{display:inline-block;margin-bottom:10px;font-size:12px;padding:3px 12px} /* ============ modals ============ */ .modal-overlay{ position:fixed;inset:0;background:rgba(7,31,27,.6);z-index:300; display:flex;align-items:center;justify-content:center;padding:18px; backdrop-filter:blur(3px); } .modal-overlay[hidden]{display:none} .modal{ background:#fff;border-radius:20px;max-width:480px;width:100%; padding:30px 26px 26px;position:relative;color:var(--night); box-shadow:0 30px 90px rgba(0,0,0,.4);max-height:88vh;overflow-y:auto; animation:modalPop .35s var(--ease-pop) both; } @keyframes modalPop{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}} .modal-close{ position:absolute;top:12px;inset-inline-end:14px; background:var(--cream);border:0;border-radius:50%;width:32px;height:32px; font-size:20px;line-height:1;color:var(--night);cursor:pointer; transition:background .2s var(--ease-soft); } .modal-close:hover{background:var(--gold)} .modal-h{font-size:21px;font-weight:800;margin-bottom:8px;padding-inline-end:30px} .modal-p{font-size:14.5px;color:var(--muted);margin-bottom:12px} .modal-privacy{ background:#EDFBF4;border:1px solid #BFE9D4;border-radius:12px;padding:10px 14px;color:#1D6B47; } .modal-msg{ margin-top:14px;font-size:14.5px;font-weight:600;border-radius:12px;padding:12px 16px; background:#EDFBF4;border:1px solid #BFE9D4;color:#1D6B47; } .modal-msg.is-err{background:#FDF0EE;border-color:#F3C7BF;color:#9C3A26} /* login modal */ .sso-list{display:flex;flex-direction:column;gap:9px;margin:16px 0 4px} .sso-btn{ display:flex;align-items:center;justify-content:center;gap:10px; background:#fff;border:1.5px solid var(--line);border-radius:12px; padding:12px 16px;font-family:'Rubik',sans-serif;font-size:15px;font-weight:600;color:var(--night); cursor:not-allowed;opacity:.55; } .sso-btn svg{flex:none} .login-or{ text-align:center;font-size:13px;color:var(--muted);margin:14px 0 10px;position:relative; } .login-or::before,.login-or::after{ content:'';position:absolute;top:50%;width:26%;height:1px;background:var(--line); } .login-or::before{inset-inline-start:0} .login-or::after{inset-inline-end:0} /* ============ sub-pages (terms / privacy / contact / account) ============ */ .subpage-main{max-width:780px;margin:0 auto;padding:46px 20px 90px} .draft-banner{ background:#FFF6DC;border:1.5px solid #F2DFA6;border-radius:12px; padding:12px 18px;font-size:14px;font-weight:700;color:#8A6400; margin-bottom:26px;text-align:center; } .subpage-main h1{font-size:clamp(28px,5vw,40px);font-weight:900;letter-spacing:-.4px;margin-bottom:6px} .subpage-main .page-meta{font-size:13px;color:var(--muted);margin-bottom:30px} .subpage-main h2{font-size:19px;font-weight:800;margin:28px 0 8px} .subpage-main p,.subpage-main li{font-size:15px;color:#3A4A47;margin-bottom:10px;line-height:1.7} .subpage-main ul,.subpage-main ol{padding-inline-start:22px;margin-bottom:12px} .subpage-main a{color:#1D6B47;font-weight:600} .contact-card{margin-top:26px;padding:26px 22px} .contact-card .field textarea{ width:100%;padding:13px 14px;font-size:16px;font-family:'Rubik',sans-serif;min-height:130px;resize:vertical; border:1.5px solid var(--line);border-radius:12px;background:var(--cream);color:var(--night); } .contact-card .field textarea:focus{outline:none;border-color:var(--money);background:#fff} /* account page */ .claim-card{padding:22px;margin-bottom:14px} .claim-route{font-size:17px;font-weight:800} .claim-meta{font-size:13px;color:var(--muted);margin:2px 0 14px} .claim-status{ display:inline-block;background:#EDFBF4;border:1px solid #BFE9D4;color:#1D6B47; border-radius:99px;font-size:12.5px;font-weight:700;padding:3px 12px;margin-bottom:14px; } .timeline{list-style:none;padding:0;margin:0} .timeline li{ position:relative;padding-inline-start:26px;padding-bottom:14px;font-size:14px;color:var(--muted); } .timeline li::before{ content:'';width:11px;height:11px;border-radius:50%;background:var(--line); position:absolute;inset-inline-start:0;top:4px; } .timeline li::after{ content:'';width:2px;background:var(--line); position:absolute;inset-inline-start:4.5px;top:17px;bottom:-2px; } .timeline li:last-child::after{display:none} .timeline li.done{color:var(--night);font-weight:600} .timeline li.done::before{background:var(--money)} .timeline li.now::before{background:var(--gold);box-shadow:0 0 0 4px rgba(255,201,49,.25)} .empty-state{text-align:center;padding:50px 20px} .empty-state h2{font-size:22px;font-weight:800;margin-bottom:8px} /* ============ FUTURISTIC-AI polish layer ============ */ /* --- hero aurora drift (transform-only, two soft blobs) --- */ .aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} .aurora::before,.aurora::after{ content:'';position:absolute;width:56vw;height:56vw;min-width:460px;min-height:460px; border-radius:50%;will-change:transform; } .aurora::before{ background:radial-gradient(circle,rgba(61,214,140,.13),transparent 62%); top:-20%;inset-inline-start:-14%; animation:auro1 24s ease-in-out infinite alternate; } .aurora::after{ background:radial-gradient(circle,rgba(255,201,49,.09),transparent 62%); bottom:-28%;inset-inline-end:-12%; animation:auro2 30s ease-in-out infinite alternate; } @keyframes auro1{to{transform:translate(9vw,7vh) scale(1.18)}} @keyframes auro2{to{transform:translate(-8vw,-6vh) scale(1.12)}} /* --- hero headline word stagger (spans added once by fx.js) --- */ .hw{display:inline-block;animation:hwIn .7s var(--ease-pop) both} @keyframes hwIn{from{opacity:0;transform:translateY(.5em) rotate(2deg)}to{opacity:1;transform:none}} /* --- hero CTA gold glow pulse --- */ .btn-xl{position:relative} .btn-xl::after{ content:'';position:absolute;inset:-2px;border-radius:inherit;pointer-events:none; animation:ctaPulse 2.9s var(--ease-soft) infinite; } @keyframes ctaPulse{ 0%{box-shadow:0 0 0 0 rgba(255,201,49,.45)} 70%{box-shadow:0 0 0 16px rgba(255,201,49,0)} 100%{box-shadow:0 0 0 0 rgba(255,201,49,0)} } /* --- hero counter: odometer pill --- */ .hero-counter .counter-num{ background:rgba(4,20,15,.55); border:1px solid rgba(61,214,140,.28);border-radius:12px; padding:5px 16px; box-shadow:inset 0 2px 10px rgba(0,0,0,.45),0 0 22px rgba(61,214,140,.10); } .hero-counter .counter-cap{margin-top:5px} /* --- AI engine scan (checker loading) --- */ .loading{padding:30px 4px 18px} .ai-scan{text-align:start;max-width:520px;margin:0 auto} .ai-scan-head{display:flex;align-items:center;gap:9px;margin-bottom:13px;justify-content:center} .ai-dot{ width:9px;height:9px;border-radius:50%;background:var(--money);flex:none; box-shadow:0 0 10px rgba(61,214,140,.9); animation:aiDot 1.15s ease-in-out infinite; } @keyframes aiDot{50%{opacity:.3}} .ai-title{font-size:14.5px;font-weight:700;color:var(--night)} .ai-panel{ position:relative;overflow:hidden;border-radius:16px; background: linear-gradient(rgba(61,214,140,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(61,214,140,.055) 1px,transparent 1px), radial-gradient(420px 200px at 50% 0%,rgba(61,214,140,.10),transparent 70%), linear-gradient(170deg,#071F1B,var(--night)); background-size:22px 22px,22px 22px,100% 100%,100% 100%; border:1px solid #1E564B; padding:10px 12px; box-shadow:inset 0 0 44px rgba(4,20,15,.55),0 14px 36px rgba(11,46,42,.22); } .ai-sweep{ position:absolute;left:0;right:0;top:0;height:26%;pointer-events:none; background:linear-gradient(180deg,transparent,rgba(255,201,49,.10) 76%,rgba(255,201,49,.45)); transform:translateY(-110%); animation:aiSweep 2s linear infinite; } @keyframes aiSweep{to{transform:translateY(420%)}} .ai-rules{list-style:none;margin:0;padding:0;position:relative} .ai-rules li{ display:flex;align-items:center;gap:11px; padding:11px 8px;border-radius:9px; border-bottom:1px dashed rgba(61,214,140,.16); opacity:.35; transition:opacity .3s var(--ease-soft),background .3s var(--ease-soft); } .ai-rules li:last-child{border-bottom:0} .ai-rules li.scan{opacity:1;background:rgba(255,201,49,.07)} .ai-rules li.ok{opacity:1} .ai-state{width:22px;height:22px;flex:none;position:relative} .ai-spin{ position:absolute;inset:2px;border-radius:50%; border:2px solid rgba(247,245,239,.16);border-top-color:var(--gold); opacity:0;animation:spin .7s linear infinite; } .ai-rules li.scan .ai-spin{opacity:1} .ai-rules li.ok .ai-spin{opacity:0;animation:none} .ai-check{ position:absolute;inset:0;color:var(--money); opacity:0;transform:scale(.3); transition:opacity .25s var(--ease-soft),transform .4s var(--ease-pop); } .ai-rules li.ok .ai-check{opacity:1;transform:none} .ai-name{flex:1;font-size:14px;font-weight:600;color:var(--cream)} .ai-rules li.ok .ai-name{color:var(--money)} .ai-tag{ flex:none;font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:700; letter-spacing:1.5px;color:var(--muted-light); border:1px solid rgba(157,187,177,.3);border-radius:6px;padding:2px 7px; } .ai-rules li.ok .ai-tag{color:var(--gold);border-color:rgba(255,201,49,.45)} .ai-scan .load-msg{margin-top:13px;text-align:center;font-size:14px} /* --- result reveal: gold particle burst (CSS only) --- */ .result-amount{position:relative} .burst{position:absolute;inset-inline-start:50%;top:46%;width:0;height:0;pointer-events:none} .burst i{ position:absolute;width:8px;height:8px;border-radius:50%;background:var(--gold); opacity:0;animation:burstFly .95s cubic-bezier(.16,.84,.44,1) forwards; } .burst i:nth-child(3n){background:var(--money);width:6px;height:6px} .burst i:nth-child(4n){border-radius:2px;width:9px;height:5px} .burst i:nth-child(1){--x:-96px;--y:-56px} .burst i:nth-child(2){--x:-66px;--y:-92px;animation-delay:.04s} .burst i:nth-child(3){--x:-22px;--y:-106px;animation-delay:.02s} .burst i:nth-child(4){--x:26px;--y:-100px;animation-delay:.06s} .burst i:nth-child(5){--x:72px;--y:-84px} .burst i:nth-child(6){--x:102px;--y:-44px;animation-delay:.05s} .burst i:nth-child(7){--x:112px;--y:6px;animation-delay:.03s} .burst i:nth-child(8){--x:84px;--y:48px;animation-delay:.07s} .burst i:nth-child(9){--x:30px;--y:66px;animation-delay:.02s} .burst i:nth-child(10){--x:-34px;--y:62px;animation-delay:.05s} .burst i:nth-child(11){--x:-86px;--y:40px;animation-delay:.03s} .burst i:nth-child(12){--x:-112px;--y:-8px;animation-delay:.06s} @keyframes burstFly{ 0%{opacity:0;transform:translate(0,0) scale(.3)} 14%{opacity:1} 100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1)} } /* --- result: regime chips dealt like boarding passes --- */ .regime-deal{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:16px 0 2px} .rchip{ display:inline-flex;align-items:center;gap:8px; background:#fff;border:1.5px solid var(--line);border-radius:10px; padding:7px 12px;box-shadow:0 3px 12px rgba(11,46,42,.08); animation:dealIn .55s var(--ease-pop) both; } .rchip::before{ content:'';width:7px;height:7px;border-radius:50%;flex:none; background:var(--cream);border:1px solid var(--line); } .rchip b{font-weight:700;font-size:12.5px;color:var(--night)} .rchip-amt{font-family:'Space Grotesk','Rubik',sans-serif;font-weight:700;font-size:13.5px;color:#2BA56C;font-feature-settings:"tnum"} .rchip small{font-size:10.5px;font-weight:600;color:var(--muted);background:var(--cream);border-radius:99px;padding:2px 8px} .rchip--best{border-color:var(--gold);background:#FFFBEE;box-shadow:0 6px 18px rgba(255,201,49,.28)} .rchip--best::before{background:var(--gold);border-color:#E0A400} @keyframes dealIn{ from{opacity:0;transform:translateY(18px) rotate(3deg) scale(.92)} to{opacity:1;transform:none} } .deal-note{font-size:12.5px;color:var(--muted);text-align:center;margin-top:8px} /* --- launch-phase trust band (dark, curved) --- */ .tb-sec{padding:10px 12px 92px} .trustband{ width:min(1020px,100%);margin:0 auto; background: linear-gradient(rgba(61,214,140,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(61,214,140,.045) 1px,transparent 1px), radial-gradient(640px 300px at 50% 0%,rgba(61,214,140,.12),transparent 65%), linear-gradient(170deg,#071F1B,var(--night)); background-size:26px 26px,26px 26px,100% 100%,100% 100%; color:var(--cream);border-radius:42px; padding:50px 22px 40px;text-align:center; box-shadow:0 24px 60px rgba(11,46,42,.25); } .launch-pill{ display:inline-block;background:rgba(255,201,49,.12); border:1px solid rgba(255,201,49,.45);color:var(--gold); font-size:12px;font-weight:700;letter-spacing:.4px; border-radius:99px;padding:4px 14px;margin-bottom:24px; } .tb-grid{display:grid;grid-template-columns:1fr;gap:26px} @media(min-width:640px){.tb-grid{grid-template-columns:repeat(3,1fr);gap:14px}} .tb-num{ display:block;font-family:'Space Grotesk',sans-serif;font-weight:700; font-size:clamp(36px,5vw,48px);color:var(--money);letter-spacing:-1px; font-variant-numeric:tabular-nums;line-height:1.1; } .tb-cap{display:block;margin-top:5px;font-size:14px;color:var(--muted-light);font-weight:500} .tb-legal{margin-top:34px;padding-top:22px;border-top:1px solid rgba(157,187,177,.16)} .tb-legal>span{display:block;font-size:13px;color:var(--muted-light);margin-bottom:12px} .tb-badges{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:0;margin:0} .tb-badges li{ border:1px solid rgba(157,187,177,.3);border-radius:99px; padding:5px 14px;font-size:12.5px;font-weight:600;color:var(--cream);opacity:.85; } /* --- scroll narrative: the wave divider now bridges cream→dark closer --- */ .closer{border-radius:0} /* --- micro-interactions --- */ .field input:focus,.email-row input:focus,.contact-card .field textarea:focus{ box-shadow:0 0 0 4px rgba(61,214,140,.16); } .lang-switch{transition:border-color .25s var(--ease-soft),box-shadow .25s var(--ease-soft),background .25s var(--ease-soft)} .lang-switch:hover{background:rgba(247,245,239,.09)} .lang-switch:focus-within{border-color:var(--money);box-shadow:0 0 0 3px rgba(61,214,140,.18)} .faq-list details[open]>p{animation:faqIn .42s var(--ease-pop) both} @keyframes faqIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}} .faq-list summary:active::after{transform:translateY(-50%) scale(.85)} /* ============ flight-number fast lane (step 1) ============ */ .flight-first{ background:linear-gradient(135deg,rgba(255,201,49,.12),rgba(255,201,49,.04)); border:1.5px solid rgba(255,201,49,.55);border-radius:14px; padding:16px 16px 14px;margin-bottom:4px;position:relative; } .flight-first::before{ content:'';position:absolute;inset:5px;border:1px dashed rgba(185,138,0,.35); border-radius:10px;pointer-events:none; } .ff-label{display:block;font-size:15px;font-weight:800;color:var(--night);margin-bottom:10px;position:relative} .flight-row{display:flex;flex-direction:column;gap:10px;position:relative} @media(min-width:560px){.flight-row{flex-direction:row}.flight-row input{flex:1}} .flight-row input{ width:100%;padding:13px 14px;font-size:16px;letter-spacing:1.5px; font-family:'Space Grotesk','Rubik',sans-serif;font-weight:700;text-transform:uppercase; border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--night); transition:border-color .2s var(--ease-soft); } .flight-row input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(255,201,49,.18)} .flight-row input::placeholder{color:#A7B1AC;letter-spacing:1px;font-weight:500;text-transform:none} .flight-row .btn{padding:13px 22px;font-size:15.5px;white-space:nowrap} .flight-first .micro{position:relative} .flight-status{ position:relative;margin-top:10px;border-radius:10px;padding:10px 14px; font-size:13.5px;font-weight:600;line-height:1.5; background:#fff;border:1px solid var(--line);color:var(--muted); } .flight-status.is-load{border-color:var(--gold);color:var(--night)} .flight-status.is-load::after{ content:'';display:inline-block;width:10px;height:10px;border-radius:50%; border:2px solid var(--gold);border-top-color:transparent; margin-inline-start:8px;vertical-align:-1px;animation:spin .8s linear infinite; } .flight-status.is-ok{background:#EDFBF4;border-color:#BCE9D4;color:#11614A} .flight-status.is-warn{background:#FFF8E6;border-color:#F0DCA0;color:#7A5C00} .or-divider{ display:flex;align-items:center;gap:14px;margin:18px 0 16px; color:var(--muted);font-size:13px;font-weight:700; } .or-divider::before,.or-divider::after{content:'';flex:1;border-top:2px dashed var(--line)} /* ============ group claim — viral share block ============ */ .group-block{ margin-top:18px;background:var(--night);border-radius:16px; padding:18px 18px 20px;color:var(--cream);position:relative;overflow:hidden; } .group-block::before{ content:'';position:absolute;inset:6px;border:1px dashed rgba(255,201,49,.35); border-radius:11px;pointer-events:none; } .group-stub{ display:flex;justify-content:space-between;align-items:center;gap:10px; font-family:'Space Grotesk',sans-serif;font-size:10.5px;letter-spacing:2px; color:var(--muted-light);margin-bottom:10px;position:relative; } .group-stamp{ background:var(--gold);color:var(--night);border-radius:7px; padding:3px 10px;font-weight:700;letter-spacing:1.5px;flex:none; } .group-block h3{font-size:18px;font-weight:800;color:var(--gold);margin-bottom:6px;position:relative} .group-block p{font-size:14px;color:rgba(247,245,239,.85);position:relative} .group-block p b{color:var(--money);font-weight:800;white-space:nowrap} .group-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;position:relative} .group-actions .btn-wa{margin-top:0;flex:1;min-width:170px} .btn-copy{ flex:1;min-width:150px;background:transparent;color:var(--cream); border:1.5px solid rgba(247,245,239,.4);padding:12px 20px;font-size:15px;border-radius:16px; } .btn-copy:hover{border-color:var(--gold);color:var(--gold)} /* ============================================================ MOTION OVERHAUL — "make it alive" layer (2026-06-12) transform/opacity only · GPU-friendly · CLS-safe · reduced-motion guarded ============================================================ */ /* --- persistent delight: a tiny bird crossing the screen occasionally --- */ .fly-bird{ position:fixed;top:18vh;inset-inline-start:-60px;z-index:40;pointer-events:none; width:34px;height:24px;opacity:0;will-change:transform; } .fly-bird svg{width:100%;height:100%;display:block;overflow:visible} .fly-bird.go{animation:flyAcross 9s linear forwards} @keyframes flyAcross{ 0%{opacity:0;transform:translate(0,0) scale(.9)} 6%{opacity:.85} 50%{transform:translate(50vw,-6vh) scale(1)} 94%{opacity:.85} 100%{opacity:0;transform:translate(108vw,4vh) scale(.9)} } body.ltr .fly-bird{animation-name:none} body.ltr .fly-bird.go{animation:flyAcrossLtr 9s linear forwards} @keyframes flyAcrossLtr{ 0%{opacity:0;transform:translate(0,0) scale(.9)} 6%{opacity:.85} 50%{transform:translate(-50vw,-6vh) scale(1)} 94%{opacity:.85} 100%{opacity:0;transform:translate(-108vw,4vh) scale(.9)} } .fly-bird .wing{transform-box:fill-box;transform-origin:center;animation:flap .42s ease-in-out infinite} @keyframes flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.32) translateY(-1px)}} /* --- hero scene: gentle continuous lift so the whole picture breathes --- */ .hero-scene svg{will-change:transform;animation:sceneBreathe 11s ease-in-out infinite} @keyframes sceneBreathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}} /* --- hero CTA: clearer magnetic feel + persistent gold glow already in btn-xl --- */ .btn-xl{will-change:transform} /* --- scroll-driven life: stagger reveals so groups cascade, not pop together --- */ @supports (animation-timeline: view()){ .amount-grid .rv,.fee-grid .rv,.signals .rv,.steps3 .rv,.faq-list .rv{ animation:rvRiseScale .9s var(--ease-soft) both; animation-timeline:view(); animation-range:entry 0% entry 46%; } } @keyframes rvRiseScale{ from{opacity:0;transform:translateY(30px) scale(.965)} to{opacity:1;transform:translateY(0) scale(1)} } /* IO-fallback stagger (delay set inline by fx.js via --d) */ html.no-sda .rv{transition-delay:var(--d,0ms)} /* --- section transition: soft animated wave divider into the dark closer --- */ .wave-divider{display:block;width:100%;height:54px;line-height:0;position:relative;z-index:2;overflow:hidden} .wave-divider svg{width:100%;height:100%;display:block} .wave-divider--closer{margin-bottom:-1px;background:var(--cream)} .wave-divider--closer .wave-path{fill:var(--night)} /* gentle horizontal drift gives the curtain a living, liquid edge */ .wave-divider--closer svg{width:130%;animation:waveDrift 14s ease-in-out infinite alternate;will-change:transform} @keyframes waveDrift{from{transform:translateX(0)}to{transform:translateX(-12%)}} /* --- hover physics: lift + shadow-grow (cards already transition transform/shadow) --- */ .card,.step3,.fee-card,.signal,.choice{will-change:transform} .signal{transition:transform .35s var(--ease-soft),box-shadow .35s var(--ease-soft),border-color .35s var(--ease-soft)} .signal:hover{transform:translateY(-4px);box-shadow:0 16px 44px rgba(11,46,42,.13);border-color:var(--money)} .amt-card{transition:transform .35s var(--ease-soft),box-shadow .35s var(--ease-soft)} .amt-card:hover{transform:translateY(-3px);box-shadow:0 18px 48px rgba(11,46,42,.14)} .baggage-cta{transition:transform .35s var(--ease-soft),box-shadow .4s var(--ease-soft)} .baggage-cta:hover{transform:translateY(-3px);box-shadow:0 20px 50px rgba(11,46,42,.15)} /* FAQ rows gently lift on hover */ .faq-list details{transition:transform .3s var(--ease-soft),box-shadow .3s var(--ease-soft)} .faq-list details:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(11,46,42,.08)} /* nav links underline-grow */ .site-nav a{position:relative} .site-nav a::after{ content:'';position:absolute;inset-inline-start:0;bottom:-4px;height:2px;width:100%; background:var(--gold);transform:scaleX(0);transform-origin:inset-inline-start; transition:transform .3s var(--ease-soft); } .site-nav a:hover::after{transform:scaleX(1)} /* --- counter pop when it lands (class toggled by fx.js / app.js) --- */ .result-amount .sum.count-pop{display:inline-block} .count-pop{animation:countPop .5s var(--ease-pop)} @keyframes countPop{0%{transform:scale(1)}40%{transform:scale(1.09)}100%{transform:scale(1)}} /* --- AI scan: radar sweep is richer; active regime row gets a moving scan bar --- */ .ai-rules li.scan{position:relative;overflow:hidden} .ai-rules li.scan::after{ content:'';position:absolute;inset:0;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,201,49,.16),transparent); transform:translateX(-100%);animation:rowScan 1s linear infinite; } @keyframes rowScan{to{transform:translateX(100%)}} .ai-panel{position:relative} .ai-panel::before{ /* sweeping radar arc over the whole panel */ content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit; background:radial-gradient(120% 90% at 50% -10%,rgba(61,214,140,.10),transparent 55%); opacity:0;animation:panelPulse 2s ease-in-out infinite; } @keyframes panelPulse{0%,100%{opacity:.25}50%{opacity:.7}} /* --- regime result chips: gentle settle wobble after being dealt --- */ .rchip--best{animation:dealIn .55s var(--ease-pop) both,bestGlow 2.4s ease-in-out 1.2s infinite} @keyframes bestGlow{0%,100%{box-shadow:0 6px 18px rgba(255,201,49,.28)}50%{box-shadow:0 8px 26px rgba(255,201,49,.5)}} /* --- strip badge floats subtly --- */ .strip-badge{animation:badgeFloat 6s ease-in-out infinite} @keyframes badgeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} /* --- closer mascot bobs --- */ .closer-mascot{animation:closerBob 5s ease-in-out infinite} @keyframes closerBob{0%,100%{transform:rotate(6deg) translateY(0)}50%{transform:rotate(6deg) translateY(-6px)}} /* --- checker mascot peeks then bobs --- */ .hero-mascot{animation:peek .9s var(--ease-pop) both .3s,mascotBob 4.6s ease-in-out 1.3s infinite} @keyframes mascotBob{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-8deg) translateY(-5px)}} /* mobile: keep everything alive but lighter (perf) */ @media(max-width:767px){ .hero-scene svg{animation-duration:13s} .fly-bird{top:14vh;width:28px;height:20px} } /* ============ reduced motion ============ */ @media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important} html{scroll-behavior:auto} .rv,.coin,.spot-step,.hw,.rchip{opacity:1!important;transform:none!important} .ai-rules li{opacity:1} .ai-sweep,.burst,.btn-xl::after,.fly-bird,.ai-rules li.scan::after,.ai-panel::before{display:none!important} .flight-status.is-load::after{display:none!important} .hero-scene svg,.strip-badge,.closer-mascot,.hero-mascot,.sc-bird,.coin,.cloud,.sc-plane{transform:none!important} } /* ============ footer guides + SEO-page components (premium elevation) ============ */ .foot-guides{ display:flex;flex-wrap:wrap;justify-content:center;align-items:center; gap:8px 18px;margin:22px auto 6px;max-width:760px;padding:0 12px; } .foot-guides-h{ font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase; color:var(--muted-light);opacity:.7;width:100%;text-align:center;margin-bottom:4px; } .foot-guides a{ color:var(--cream);text-decoration:none;font-size:13.5px;font-weight:500;opacity:.82; position:relative;transition:opacity .2s var(--ease-soft),color .2s var(--ease-soft); } .foot-guides a:hover{opacity:1;color:var(--money)} .foot-guides a:not(:last-child)::after{ content:'';position:absolute;inset-inline-end:-9px;top:50%;transform:translateY(-50%); width:3px;height:3px;border-radius:50%;background:var(--muted-light);opacity:.4; } /* internal "keep reading" links on content pages */ .related-links{ margin-top:40px;padding-top:22px;border-top:1px solid var(--line); display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center; } .related-h{ width:100%;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase; color:var(--muted);margin-bottom:4px; } .related-links a{ display:inline-block;background:#fff;border:1px solid var(--line);border-radius:99px; padding:8px 16px;font-size:13.5px;font-weight:600;color:#1D6B47;text-decoration:none; transition:border-color .2s var(--ease-soft),transform .2s var(--ease-soft),box-shadow .2s var(--ease-soft); } .related-links a:hover{border-color:var(--money);transform:translateY(-2px);box-shadow:0 8px 20px rgba(11,46,42,.08)} /* /airlines/ index grid */ .airline-grid{ list-style:none;padding:0;margin:24px 0 0; display:grid;grid-template-columns:1fr;gap:10px; } @media(min-width:560px){.airline-grid{grid-template-columns:1fr 1fr}} .airline-link{ display:flex;align-items:center;justify-content:space-between;gap:12px; background:#fff;border:1px solid var(--line);border-radius:14px; padding:15px 18px;text-decoration:none; box-shadow:0 2px 10px rgba(11,46,42,.04); transition:transform .25s var(--ease-soft),box-shadow .25s var(--ease-soft),border-color .25s var(--ease-soft); } .airline-link:hover{transform:translateY(-3px);border-color:var(--money);box-shadow:0 14px 34px rgba(11,46,42,.12)} .al-name{font-size:15.5px;font-weight:700;color:var(--night)} .al-code{ font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:1px; color:var(--night);background:var(--gold);border-radius:7px;padding:3px 9px;flex:none; } /* content-page tables get the boarding-pass amount treatment */ .subpage-main table{width:100%;border-collapse:collapse;margin:4px 0} .subpage-main th{font-size:12.5px;font-weight:600;color:var(--muted);text-align:start;padding:8px 10px;border-bottom:1px solid var(--line)} .subpage-main td{padding:11px 10px;font-size:14px;border-bottom:1px dashed var(--line);text-align:start;color:#3A4A47} .subpage-main td.amt{font-weight:700;color:var(--night);font-family:'Space Grotesk','Rubik',sans-serif;font-feature-settings:"tnum";white-space:nowrap} .subpage-main tr:last-child td{border-bottom:0} /* ============ premium polish: refined depth + typographic confidence ============ */ :root{ --shadow-sm:0 1px 2px rgba(11,46,42,.04),0 2px 6px rgba(11,46,42,.06); --shadow-lg:0 24px 60px rgba(11,46,42,.14),0 6px 18px rgba(11,46,42,.08); } /* tighter wordmark tracking for the capital-L lockup — editorial, confident */ .wm{letter-spacing:-1.4px} .wm-foot{letter-spacing:-1.2px} /* primary CTA: layered gold depth instead of flat fill */ .btn-gold{ background:linear-gradient(180deg,#FFD45C 0%,var(--gold) 60%,#F2B800 100%); box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 8px 24px rgba(255,201,49,.34),0 2px 6px rgba(184,138,0,.25); } .btn-gold:hover{background:linear-gradient(180deg,#FFDC78 0%,#FFD45C 60%,var(--gold) 100%);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 12px 32px rgba(255,201,49,.5)} .btn-gold:focus-visible{outline:3px solid rgba(255,201,49,.55);outline-offset:3px} /* generic card — softer, more expensive resting shadow */ .card{box-shadow:var(--shadow-sm)} .amt-card,.card.amt-card{box-shadow:var(--shadow-sm)} /* subpage h2 gets a subtle gold tick — editorial rhythm */ .subpage-main h2{position:relative;padding-inline-start:14px} .subpage-main h2::before{ content:'';position:absolute;inset-inline-start:0;top:.18em;height:.82em;width:4px; border-radius:3px;background:linear-gradient(180deg,var(--gold),var(--gold-deep)); } .subpage-main h1{letter-spacing:-.6px;line-height:1.1} .subpage-main .amt-card p strong{color:var(--night)} /* focus-visible accessibility ring across interactive elements */ a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible{ outline:2.5px solid var(--money);outline-offset:2px;border-radius:6px; } /* ============================================================ 3D DEPTH LAYER — hero bird + parallax world + tilt cards (CSS 3D transforms, driven by hero3d.js · 2026-06-12 "x") GPU-only transforms · reduced-motion + mobile guarded ============================================================ */ /* ---- the 3D stage sits between the copy and the existing 2D scene ---- */ .hero3d{ position:relative;z-index:1; width:100%;max-width:560px;margin:14px auto -6px; height:340px; perspective:1100px;perspective-origin:50% 42%; cursor:pointer;outline:none; --h3d-scroll:0; /* the whole stage drifts back slightly as you scroll past the hero */ transform:translateZ(0) scale(calc(1 - var(--h3d-scroll) * 0.12)); opacity:calc(1 - var(--h3d-scroll) * 0.55); transition:opacity .2s linear; } .hero3d:focus-visible{outline:2.5px solid var(--gold);outline-offset:6px;border-radius:24px} @media(min-width:768px){.hero3d{max-width:600px;height:380px;margin-top:4px}} /* fallback: if hero3d.js never runs, hide the empty stage so nothing looks broken */ html:not(.h3d-on) .hero3d{display:none} /* the rotating world — everything inside shares one 3D space */ .h3d-orbit{ position:absolute;inset:0; transform-style:preserve-3d; transform:rotateX(0) rotateY(0); will-change:transform; } /* ---- depth starfield: dots distributed on Z planes ---- */ .h3d-stars{ position:absolute;inset:-10% -6%; transform-style:preserve-3d;pointer-events:none; } .h3d-stars i{ position:absolute;border-radius:50%;background:var(--money); box-shadow:0 0 6px rgba(61,214,140,.6); animation:h3dTwinkle 5s ease-in-out infinite; } @keyframes h3dTwinkle{0%,100%{opacity:.6}50%{opacity:.12}} /* ---- ground glow the bird hovers above ---- */ .h3d-shadow{ position:absolute;left:50%;bottom:14%;width:170px;height:34px; transform:translateX(-50%) translateZ(-40px) rotateX(78deg); background:radial-gradient(ellipse,rgba(4,20,15,.55),transparent 70%); border-radius:50%;pointer-events:none; animation:h3dShadow 4s ease-in-out infinite; } @keyframes h3dShadow{0%,100%{opacity:.85;transform:translateX(-50%) translateZ(-40px) rotateX(78deg) scale(1)}50%{opacity:.5;transform:translateX(-50%) translateZ(-40px) rotateX(78deg) scale(.82)}} /* ---- floating € coins on their own Z planes ---- */ .h3d-coin{ position:absolute;width:34px;height:34px; filter:drop-shadow(0 8px 14px rgba(0,0,0,.3)); animation:h3dCoinSpin 6s linear infinite,h3dCoinBob 3.4s ease-in-out infinite; transform-style:preserve-3d; } .h3d-coin--a{left:14%;top:24%;transform:translateZ(90px)} .h3d-coin--b{right:12%;top:38%;width:28px;height:28px;transform:translateZ(40px);animation-duration:7s,4s} .h3d-coin--c{right:22%;bottom:20%;width:24px;height:24px;transform:translateZ(-60px);opacity:.65;animation-duration:8s,4.6s} @keyframes h3dCoinSpin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}} @keyframes h3dCoinBob{0%,100%{margin-top:0}50%{margin-top:-12px}} /* ---- the bird: depth-separated layers (locked mascot geometry) ---- */ .h3d-bird{ position:absolute;left:50%;top:50%; width:210px;height:210px;margin:-118px 0 0 -105px; transform-style:preserve-3d;will-change:transform; filter:drop-shadow(0 22px 30px rgba(4,20,15,.45)); } .h3d-layer{position:absolute;inset:0;transform-style:preserve-3d} .h3d-layer svg{width:100%;height:100%;display:block;overflow:visible} /* push each part onto a different Z plane → real parallax depth on tilt */ .h3d-l-far {transform:translateZ(-26px)} /* tail tufts, behind */ .h3d-l-body{transform:translateZ(0)} /* main head */ .h3d-l-wing{transform:translateZ(16px);animation:h3dWing 3.6s ease-in-out infinite} .h3d-l-beak{transform:translateZ(30px)} /* beak forward */ .h3d-l-feet{transform:translateZ(8px)} .h3d-l-eye {transform:translateZ(40px)} /* eye closest = pops out */ @keyframes h3dWing{0%,100%{transform:translateZ(16px) rotateZ(0)}50%{transform:translateZ(16px) rotateZ(-7deg)}} /* tap hint */ .h3d-hint{ position:absolute;left:50%;bottom:2px;transform:translateX(-50%); font-size:12px;font-weight:600;color:var(--muted-light); letter-spacing:.3px;opacity:.7;pointer-events:none; animation:h3dHint 3.2s ease-in-out infinite; } @keyframes h3dHint{0%,100%{opacity:.4}50%{opacity:.85}} /* on small screens the layered bird stays but lighter & a touch smaller */ @media(max-width:520px){ .hero3d{height:288px;max-width:420px} .h3d-bird{width:172px;height:172px;margin:-98px 0 0 -86px} .h3d-coin{width:28px;height:28px} } /* ---- 3D tilt-on-hover for content cards ---- */ .tilt3d{transform-style:preserve-3d;transition:transform .5s var(--ease-soft),box-shadow .4s var(--ease-soft)} .tilt3d.tilting{transition:box-shadow .4s var(--ease-soft);box-shadow:var(--shadow-lg)} /* lift inner highlights so the card has a glassy 3D sheen while tilting */ .tilt3d.tilting::after{ content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(125deg,rgba(255,255,255,.22),transparent 42%); opacity:1;transition:opacity .3s var(--ease-soft); } .amt-card,.fee-card,.step3{position:relative} /* the dark fee card / step cards get a faint inner depth ring while tilting */ .fee-card.highlight.tilting,.tilt3d.tilting{will-change:transform} /* ============ reduced motion: collapse the 3D layer to a calm static scene ============ */ @media (prefers-reduced-motion: reduce){ .hero3d{perspective:none;transform:none!important;opacity:1!important;cursor:default} .h3d-orbit,.h3d-bird,.h3d-layer,.h3d-coin,.h3d-shadow,.h3d-stars i,.h3d-l-wing{ transform:none!important;animation:none!important; } .h3d-l-far{transform:translateZ(0)!important} .h3d-stars{display:none} .h3d-hint{display:none} .tilt3d{transform:none!important} .tilt3d.tilting::after{display:none} } /* ============================================================ PREMIUM UPGRADE LAYER · 2026-06-12 "y" Flag language picker · GLB hero mount · agency-grade polish (purely additive — no checker id/selector touched) ============================================================ */ /* visually-hidden util — keeps the native