/* v7 — language flag themes. Goinenglish blue stays the base; each language swaps the warm accent for its flag colours. */
:root,html[data-flag="us"]{--f1:#B22234;--f2:#FFFFFF;--f3:#3C3B6E;--fa:#E0394B;--fa2:#FF8A93;--fink:#fff;--fglow:rgba(224,57,75,.55);
  --fstripe:linear-gradient(90deg,#3C3B6E 0 24%,transparent 24%),repeating-linear-gradient(90deg,#B22234 0 9px,#fff 9px 18px)}
html[data-flag="de"]{--f1:#000000;--f2:#DD0000;--f3:#FFCE00;--fa:#FFCE00;--fa2:#FFE27A;--fink:#1A1200;--fglow:rgba(255,206,0,.5);
  --fstripe:linear-gradient(90deg,#111 0 33.3%,#DD0000 33.3% 66.6%,#FFCE00 66.6%)}
html[data-flag="es"]{--f1:#AA151B;--f2:#F1BF00;--f3:#AA151B;--fa:#F1BF00;--fa2:#FFE08A;--fink:#3A0A0C;--fglow:rgba(241,191,0,.5);
  --fstripe:linear-gradient(90deg,#AA151B 0 25%,#F1BF00 25% 75%,#AA151B 75%)}
html[data-flag="fr"]{--f1:#002654;--f2:#FFFFFF;--f3:#CE1126;--fa:#E8283B;--fa2:#FF8590;--fink:#fff;--fglow:rgba(232,40,59,.5);
  --fstripe:linear-gradient(90deg,#002654 0 33.3%,#fff 33.3% 66.6%,#CE1126 66.6%)}
html[data-flag="cn"]{--f1:#EE1C25;--f2:#FFDE00;--f3:#EE1C25;--fa:#EE1C25;--fa2:#FF6B5E;--fink:#FFF6C2;--fglow:rgba(238,28,37,.55);
  --fstripe:linear-gradient(90deg,#EE1C25 0 70%,#FFDE00 70% 76%,#EE1C25 76% 84%,#FFDE00 84% 88%,#EE1C25 88%)}

/* flags in the language switcher */
.flag{display:inline-block;width:22px;height:15px;border-radius:3px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.18),0 4px 10px -4px rgba(0,0,0,.45);overflow:hidden}
.lang-btn .flag-cur{width:22px;height:15px;margin-left:2px}
.lang-btn{gap:8px!important}
.lang-menu{min-width:220px!important}
.lang-menu a .flag{width:26px;height:18px;border-radius:4px;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.lang-menu a:hover .flag{transform:scale(1.12) rotate(-4deg)}
.lang-menu a b{min-width:30px!important;height:22px!important}

/* flag ribbon on the floating header capsule */
.site-header .nav{position:relative}
.site-header .nav::after{content:"";position:absolute;left:18%;right:18%;bottom:-1px;height:3px;border-radius:3px;background:var(--fstripe);opacity:.95;pointer-events:none;
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.site-header .nav::before{content:"";position:absolute;left:30%;right:30%;bottom:-8px;height:14px;background:radial-gradient(closest-side,var(--fglow),transparent);filter:blur(6px);pointer-events:none;opacity:.7}

/* warm accents take the flag colour */
.v2-hero .btn-primary,.v2-page-head .btn-primary,main>section.spot:first-of-type .btn-primary,.cta-band .btn-primary,.cta-band .btn:not(.btn-ghost){background:linear-gradient(135deg,var(--fa2),var(--fa) 60%)!important;color:var(--fink)!important;box-shadow:0 18px 44px -14px var(--fglow)!important}
.v2-badge b{background:linear-gradient(135deg,var(--fa2),var(--fa))!important;color:var(--fink)!important}
.kicker::before{background:linear-gradient(90deg,#1A9AD6,var(--fa))!important}
.v2-hero h1 .grad,.v2-page-head h1 .grad{background:linear-gradient(100deg,#7DD3FC 0%,#BDE9FF 30%,var(--fa2) 62%,var(--fa) 80%,#7DD3FC 100%)!important;background-size:250% 100%!important;-webkit-background-clip:text!important;background-clip:text!important}
html[data-flag="us"] .v2-hero h1 .grad,html[data-flag="us"] .v2-page-head h1 .grad{background:linear-gradient(100deg,#7DD3FC 0%,#FFFFFF 34%,#FF8A93 62%,#E0394B 80%,#7DD3FC 100%)!important;background-size:250% 100%!important;-webkit-background-clip:text!important;background-clip:text!important}
.scroll-prog{background:linear-gradient(90deg,#7DD3FC,#1A9AD6 55%,var(--fa))!important}
.site-footer a:hover{color:var(--fa2)!important}
.pb-tag{background:linear-gradient(135deg,var(--fa2),var(--fa))!important;color:var(--fink)!important}

/* silk flag waving softly in the hero */
.flag-silk{position:absolute;top:96px;right:-40px;width:min(42vw,560px);height:min(28vw,373px);z-index:1;pointer-events:none;opacity:.24;transform:perspective(900px) rotateY(-28deg) rotateZ(4deg);
  -webkit-mask:radial-gradient(ellipse at 70% 45%,#000 30%,transparent 72%);mask:radial-gradient(ellipse at 70% 45%,#000 30%,transparent 72%);mix-blend-mode:screen;filter:saturate(1.2)}
.flag-silk svg{width:100%;height:100%;display:block}
.flag-silk::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(100deg,rgba(0,0,0,.55) 0,rgba(255,255,255,.35) 9%,rgba(0,0,0,.55) 18%);background-size:200% 100%;mix-blend-mode:overlay;animation:silk 7s linear infinite}
@keyframes silk{to{background-position:-200% 0}}
.flag-silk.wave svg{animation:wave 6s ease-in-out infinite;transform-origin:0 50%}
@keyframes wave{0%,100%{transform:skewY(0) scaleX(1)}50%{transform:skewY(-2.5deg) scaleX(.97)}}
@media (max-width:760px){.flag-silk{width:80vw;height:53vw;top:70px;right:-30vw;opacity:.16}}

/* language seal next to hero badge area */
.v2-hero .wrap,.v2-page-head{position:relative;z-index:2}

/* flag transition when switching language: the real flag opens from the click point */
.flag-wipe{position:fixed;inset:0;z-index:10000;pointer-events:none;clip-path:circle(0px at 50% 0);background:#0A2342}
.flag-wipe::before{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 6px #1A9AD6,inset 0 0 160px rgba(0,0,0,.45);z-index:2}
.flag-wipe svg.fw-flag{position:absolute;inset:0;width:100%;height:100%;display:block;transform:scale(1.12);animation:fwzoom 1.4s cubic-bezier(.2,.8,.2,1) forwards}
.flag-wipe .fw-silk{position:absolute;inset:0;z-index:1;background:repeating-linear-gradient(100deg,rgba(0,0,0,.28) 0,rgba(255,255,255,.18) 11%,rgba(0,0,0,.28) 22%);background-size:220% 100%;mix-blend-mode:overlay;animation:silk 2.4s linear infinite}
.flag-wipe .fw-name{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%) scale(.85);opacity:0;padding:14px 28px;border-radius:999px;background:rgba(255,255,255,.94);color:#0A2342;font:700 clamp(1.1rem,2.4vw,1.6rem)/1 var(--display,sans-serif);letter-spacing:-.01em;box-shadow:0 30px 70px -20px rgba(0,0,0,.6),0 0 0 3px #1A9AD6;animation:fwname .35s .3s ease-out forwards;white-space:nowrap}
@keyframes fwopen{to{clip-path:circle(150% at var(--x,50%) var(--y,0))}}
@keyframes fwzoom{to{transform:scale(1)}}
@keyframes fwname{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media (prefers-reduced-motion:reduce){.flag-silk::after,.flag-silk.wave svg{animation:none}.flag-wipe{display:none}}

/* ---------- background follows the flag (navy-blue base stays) ---------- */
html[data-flag="us"]{--fbg:#F5F8FD;--fmist:#ECF1FA;--fg1:rgba(178,34,52,.42);--fg2:rgba(60,59,110,.85);--fg3:rgba(255,255,255,.10)}
html[data-flag="de"]{--fbg:#FAF8F1;--fmist:#F4EFE2;--fg1:rgba(221,0,0,.34);--fg2:rgba(255,206,0,.26);--fg3:rgba(0,0,0,.55)}
html[data-flag="es"]{--fbg:#FCF8EE;--fmist:#F7EFDC;--fg1:rgba(170,21,27,.42);--fg2:rgba(241,191,0,.30);--fg3:rgba(170,21,27,.18)}
html[data-flag="fr"]{--fbg:#F6F7FC;--fmist:#EDEFF8;--fg1:rgba(206,17,38,.40);--fg2:rgba(0,38,84,.85);--fg3:rgba(255,255,255,.10)}
html[data-flag="cn"]{--fbg:#FCF6F3;--fmist:#F8ECE6;--fg1:rgba(238,28,37,.46);--fg2:rgba(255,222,0,.22);--fg3:rgba(150,10,20,.35)}
body{background:var(--fbg)!important}
.sec-mist{background:var(--fmist)!important}
.v2-hero::after,.v2-page::after{background:linear-gradient(180deg,transparent,var(--fbg))!important}
/* hero: navy blue core, flag light pouring in from the edges */
.v2-hero,.v2-page,main>section.spot:first-of-type{
  background:radial-gradient(55% 70% at 100% 0%,var(--fg1),transparent 70%),radial-gradient(50% 60% at 0% 100%,var(--fg2),transparent 70%),radial-gradient(80% 60% at 50% 120%,var(--fg3),transparent 70%),
  radial-gradient(120% 90% at 50% -10%,#0E3462 0%,#0A2342 38%,#061528 70%,#050E1C 100%)!important}
.aur.a3{background:radial-gradient(circle,var(--f1) 0%,transparent 66%)!important;opacity:.32!important}
html[data-flag="de"] .aur.a3{background:radial-gradient(circle,#DD0000 0%,transparent 66%)!important}
/* dark bands, CTA and footer pick up the same glow */
.polyband,.kinetic,.gallery{background:radial-gradient(60% 130% at 0% 0%,rgba(26,154,214,.32),transparent 60%),radial-gradient(55% 120% at 100% 100%,var(--fg1),transparent 62%),linear-gradient(135deg,#071a33,#0A2342 55%,#0E3462)!important}
.cta-band{background:radial-gradient(50% 90% at 100% 0%,rgba(56,189,248,.42),transparent 60%),radial-gradient(45% 80% at 0% 100%,var(--fg1),transparent 62%),radial-gradient(40% 70% at 60% 120%,var(--fg2),transparent 60%),linear-gradient(135deg,#0A2342,#0E3462 60%,#0A2342)!important}
.site-footer{background:radial-gradient(60% 120% at 100% 0%,rgba(26,154,214,.25),transparent 60%),radial-gradient(45% 90% at 0% 100%,var(--fg1),transparent 62%),#050E1C!important}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:2;background:var(--fstripe);opacity:.9}

/* email address: the @ quietly opens the back office */
.mail-at a{color:inherit;text-decoration:none;-webkit-text-fill-color:inherit}
.mail-at a.at{cursor:pointer;transition:none}
.cta-band .mail-at{cursor:text}

/* client portal cards: light glass cards need dark text and readable secondary buttons */
.portal-card{background:linear-gradient(170deg,rgba(255,255,255,.93),rgba(236,246,253,.88))!important;border:1px solid rgba(255,255,255,.6)!important;box-shadow:0 40px 90px -40px rgba(0,0,0,.6)}
.portal-card .checks li,.portal-card .checks li span{color:#24364D!important}
html body main .portal-card a.btn.btn-ghost{background:#fff!important;color:#0A2342!important;-webkit-text-fill-color:#0A2342!important;border:1.5px solid rgba(10,35,66,.22)!important;box-shadow:0 10px 24px -14px rgba(10,35,66,.5)!important}
html body main .portal-card a.btn.btn-ghost:hover{border-color:#1A9AD6!important;color:#0E7DB5!important;-webkit-text-fill-color:#0E7DB5!important}
.portal-card .btn-row{flex-wrap:wrap;gap:10px}
.portal-card .btn-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:#0E7DB5;text-decoration:none;padding:8px 2px;font-size:.95rem}
.portal-card .btn-link:hover{color:#0A2342}
.portal-card .btn-link svg{width:16px;height:16px}