:root{
  --bg-0:#020308; --bg-1:#04060e; --bg-2:#080b1c;
  --ink:#eef2ff; --ink-soft:#aab3d4; --ink-dim:#7c86ad;
  --line:rgba(255,255,255,.12);
  --glass:rgba(255,255,255,.06);
  --accent:#6ee7ff; --accent-2:#a78bfa; --accent-3:#34d399;
  --radius:22px; --maxw:1120px;
  --shadow:0 24px 60px -20px rgba(2,6,23,.75);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);-webkit-font-smoothing:antialiased;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,system-ui,sans-serif;
  line-height:1.6;letter-spacing:.1px;background:var(--bg-1);min-height:100dvh}
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:
  radial-gradient(1100px 620px at 50% -22%,#0a2433 0,transparent 46%),
  radial-gradient(820px 820px at 50% 128%,#08283a 0,transparent 46%),
  linear-gradient(180deg,var(--bg-0),var(--bg-1) 42%,var(--bg-2))}
.bg::before,.bg::after{content:"";position:absolute;border-radius:50%;filter:blur(66px);opacity:.32;mix-blend-mode:screen}
.bg::before{width:46vmax;height:46vmax;left:-8vmax;top:-6vmax;background:radial-gradient(circle at 30% 30%,#3b82f6,transparent 60%);animation:drift1 26s ease-in-out infinite alternate}
.bg::after{width:40vmax;height:40vmax;right:-6vmax;top:18vmax;background:radial-gradient(circle at 60% 40%,#a855f7,transparent 60%);animation:drift2 32s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate3d(6vmax,5vmax,0) scale(1.12)}}
@keyframes drift2{to{transform:translate3d(-5vmax,-4vmax,0) scale(1.08)}}
.bg-motif{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background:url("assets/bg-motif.svg") center center / cover no-repeat fixed}
.bg-grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.skip{position:absolute;left:-999px;top:0;background:#000;color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}

.glass{position:relative;border:1px solid rgba(190,235,255,.55);border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.02) 50%,rgba(255,255,255,.01) 100%);
  -webkit-backdrop-filter:blur(5px) saturate(1.35);backdrop-filter:blur(5px) saturate(1.35);
  box-shadow:var(--shadow),
    0 0 16px -3px rgba(110,231,255,.22),
    inset 0 0 0 1px rgba(255,255,255,.55),
    inset 0 0 16px rgba(150,225,255,.12);
  overflow:hidden}
/* edge-lit glass: glowing cool rim on all four sides, like LED edge lighting */
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),inset 0 0 12px rgba(110,231,255,.12);
  background:transparent}

/* business card shares the exact same uniform glass look as the other panels */
#heroCard>.portrait,#heroCard>div:not(.glass-refract){position:relative;z-index:1}

header.nav{position:sticky;top:0;z-index:30;-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);
  background:linear-gradient(180deg,rgba(7,10,20,.72),rgba(7,10,20,.28));border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 22px;max-width:var(--maxw);margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.3px;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand .brandlogo{width:26px;height:26px;border-radius:8px;object-fit:cover;display:block;box-shadow:0 0 14px -3px var(--accent),inset 0 0 0 1px rgba(255,255,255,.25)}
.nav-links{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.nav-links a{color:var(--ink-soft);padding:8px 12px;border-radius:10px;font-size:.92rem}
.nav-links a:hover{color:var(--ink);background:rgba(255,255,255,.06);text-decoration:none}
.langswitch{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:rgba(255,255,255,.04)}
.langswitch button{all:unset;cursor:pointer;padding:7px 13px;font-size:.82rem;font-weight:600;color:var(--ink-dim);transition:.2s}
.langswitch button[aria-pressed="true"]{color:#06121f;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
/* group of page links inside the nav (becomes a hamburger dropdown on mobile) */
.navmenu{display:flex;gap:6px;align-items:center}
/* hamburger button — hidden on desktop, shown on mobile */
.navtoggle{all:unset;display:none;cursor:pointer;width:38px;height:38px;border-radius:11px;
  align-items:center;justify-content:center;font-size:1.25rem;line-height:1;color:var(--ink);
  border:1px solid rgba(190,235,255,.5);background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  -webkit-backdrop-filter:blur(8px) saturate(1.4);backdrop-filter:blur(8px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 12px -6px rgba(0,0,0,.5);transition:border-color .2s,background .2s}
.navtoggle:hover{border-color:rgba(190,235,255,.85)}
[data-theme="light"] .navtoggle{color:var(--ink);border-color:rgba(15,30,60,.22);
  background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,.26));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 12px -6px rgba(20,40,80,.28)}
[data-theme="light"] .navtoggle:hover{border-color:var(--accent)}
@media(max-width:640px){
  /* keep the controls (lang · theme · hamburger) on a single row */
  .nav-links{flex-wrap:nowrap;gap:8px}
  .navtoggle{display:inline-flex;flex:0 0 auto}
  /* page links collapse into a glass dropdown anchored under the bar */
  .navmenu{position:absolute;top:calc(100% + 8px);right:14px;z-index:50;flex-direction:column;align-items:stretch;
    min-width:210px;max-width:80vw;padding:8px;border-radius:16px;
    border:1px solid rgba(190,235,255,.5);background:linear-gradient(135deg,rgba(16,20,40,.92),rgba(9,12,26,.9));
    -webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
    box-shadow:0 24px 60px -20px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.25);
    opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top right;
    transition:opacity .2s ease,transform .2s ease,visibility .2s ease}
  .navmenu.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
  .navmenu .navlink,.navmenu .backbtn{display:block;width:100%;text-align:left;padding:12px 14px;border-radius:10px;font-size:.95rem}
  [data-theme="light"] .navmenu{border-color:rgba(15,30,60,.18);
    background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(245,248,252,.95));
    box-shadow:0 24px 60px -20px rgba(20,40,80,.4),inset 0 1px 0 rgba(255,255,255,.9)}
}

section{padding:24px 0;scroll-margin-top:80px}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);padding:7px 16px;border-radius:999px;border:1px solid rgba(190,235,255,.55);
  background:linear-gradient(135deg,rgba(110,231,255,.18),rgba(167,139,250,.12));
  -webkit-backdrop-filter:blur(8px) saturate(1.5);backdrop-filter:blur(8px) saturate(1.5);
  box-shadow:0 0 18px -4px rgba(110,231,255,.45),inset 0 1px 0 rgba(255,255,255,.45)}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em;margin:.2em 0}
h2.sec{font-size:clamp(1.6rem,3.4vw,2.3rem);margin:16px 0 8px}
.lead{color:var(--ink-soft);max-width:60ch;font-size:1.05rem}
#services .lead{max-width:none}

/* hero / card */
.hero{padding-top:48px}
.card-hero{display:grid;grid-template-columns:160px 1fr;gap:28px;padding:30px;align-items:center}
.portrait{position:relative;width:160px;height:160px;border-radius:20px;overflow:hidden;
  border:1px solid rgba(255,255,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 14px 40px -12px #000}
.portrait img{width:100%;height:100%;object-fit:cover;display:block}
.monogram{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:3.2rem;letter-spacing:1px;
  background:linear-gradient(135deg,#1b2550,#3a1d63);color:#dfe7ff}
.hero h1{font-size:clamp(1.9rem,4.4vw,2.9rem);font-weight:800}
.hero .role{color:var(--accent);font-weight:600;font-size:clamp(1rem,2.1vw,1.15rem);margin-top:2px}
.hero .pitch{color:var(--ink-soft);margin-top:12px;max-width:56ch}
.meta-row{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;color:var(--ink-dim);font-size:.9rem}
.meta-row span{display:inline-flex;align-items:center;gap:7px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
/* Liquid-glass buttons — clear, highest transparency, thin bright edge (no solid fill) */
.btn{display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:13px;font-weight:600;font-size:.95rem;
  color:var(--ink);border:1px solid rgba(190,235,255,.5);
  background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  -webkit-backdrop-filter:blur(6px) saturate(1.3);backdrop-filter:blur(6px) saturate(1.3);
  box-shadow:0 0 12px -4px rgba(110,231,255,.25),inset 0 0 0 1px rgba(255,255,255,.42),inset 0 0 12px rgba(150,225,255,.1);
  transition:.2s;cursor:pointer}
.btn:hover{text-decoration:none;transform:translateY(-1px);border-color:rgba(190,235,255,.78);
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
  box-shadow:0 0 16px -3px rgba(110,231,255,.4),inset 0 0 0 1px rgba(255,255,255,.52),inset 0 0 14px rgba(150,225,255,.14)}
.btn.primary{position:relative;overflow:hidden;color:#eafcff;border-color:rgba(150,225,255,.75);
  background:linear-gradient(135deg,rgba(110,231,255,.26),rgba(167,139,250,.18));
  animation:btnPulse 2.8s ease-in-out infinite}
.btn.primary::before{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);
  animation:chipShimmer 5s ease-in-out infinite}
.btn.primary:hover{transform:translateY(-1px);border-color:rgba(110,231,255,.85);
  background:linear-gradient(135deg,rgba(110,231,255,.36),rgba(167,139,250,.26))}
@keyframes btnPulse{
  0%,100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),inset 0 0 13px rgba(150,225,255,.13),0 0 8px -4px rgba(110,231,255,.3)}
  50%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),inset 0 0 13px rgba(150,225,255,.13),0 0 22px -2px rgba(110,231,255,.55)}}
@media(max-width:600px){.card-hero{grid-template-columns:1fr;text-align:center;justify-items:center}.meta-row,.cta-row{justify-content:center}}

/* hero row: business card + credentials */
.hero-row{display:grid;grid-template-columns:1fr 290px;gap:18px;align-items:stretch}
@media(max-width:980px){.hero-row{grid-template-columns:1fr}}
.creds{padding:24px 22px;display:flex;flex-direction:column;align-items:center;text-align:center}
.creds-badge{display:block;margin-bottom:12px}
.creds-badge img{width:190px;max-width:80%;height:auto;display:block;margin:0 auto;filter:drop-shadow(0 8px 24px rgba(0,0,0,.45))}
.creds-cap{font-size:.86rem;color:var(--ink-soft);line-height:1.45}
.creds-cap strong{color:var(--ink)}
.creds-cap span{color:var(--ink-dim);font-size:.8rem}
.creds-sep{width:100%;height:1px;background:var(--line);margin:18px 0}
.creds-title{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.creds-cert{display:flex;gap:10px;align-items:flex-start;text-align:left;width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.04);color:var(--ink-soft);font-size:.86rem;font-weight:600;line-height:1.35;margin-bottom:10px;transition:.2s}
.creds-cert:hover{text-decoration:none;background:rgba(255,255,255,.09);color:var(--ink);transform:translateY(-1px)}
.creds-cert:last-child{margin-bottom:0}
.creds-cert .ctext{display:flex;flex-direction:column;min-width:0}
.creds-cert .ct-title{color:var(--ink-soft);font-weight:600}
.creds-cert:hover .ct-title{color:var(--ink)}
.creds-cert em{display:block;font-style:normal;font-weight:400;color:var(--ink-dim);font-size:.78rem;margin-top:3px}
.creds-cert .ct-cert{color:var(--accent);font-weight:600;font-size:.77rem;margin-top:7px}
.creds-cert .ct-cert:hover{text-decoration:underline}
.creds-cert .logo{flex:0 0 auto;width:60px;height:40px;border-radius:9px;background:#fff;display:grid;place-items:center;padding:6px}
.creds-cert .logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}

/* uniform clickable chips */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.chiphint{margin-top:18px;color:var(--ink-dim);font-size:.85rem}
.chiphint .bob{display:inline-block;color:var(--accent);font-weight:700;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.card-links{display:flex;flex-direction:column;gap:10px;width:100%;align-items:flex-start}
.card-links a{font-size:.84rem;font-weight:600;color:var(--accent)}
.card-links a:hover{text-decoration:underline}
.chip{all:unset;cursor:pointer;position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;
  font-size:.86rem;font-weight:600;color:var(--ink-soft);padding:10px 16px;border-radius:999px;line-height:1;
  border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.03));
  -webkit-backdrop-filter:blur(8px) saturate(1.5);backdrop-filter:blur(8px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(255,255,255,.06),0 6px 16px -8px rgba(0,0,0,.6);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),background .25s,border-color .25s,box-shadow .25s,color .25s;
  animation:chipPulse 3s ease-in-out infinite}
/* "+" affordance — rotates to "×" when open */
.chip::after{content:"+";font-weight:700;font-size:1rem;opacity:.55;transition:transform .3s ease,opacity .3s;will-change:transform}
.chip[aria-expanded="true"]::after{transform:rotate(45deg);opacity:.95}
/* periodic light sweep to signal interactivity */
.chip::before{content:"";position:absolute;top:0;left:-60%;width:42%;height:100%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);filter:blur(2px);
  animation:chipShimmer 5s ease-in-out infinite}
@keyframes chipShimmer{0%{left:-60%}16%{left:130%}100%{left:130%}}
@keyframes chipPulse{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(255,255,255,.06),0 6px 16px -8px rgba(0,0,0,.6),0 0 0 0 rgba(110,231,255,0)}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(255,255,255,.06),0 6px 16px -8px rgba(0,0,0,.6),0 0 0 4px rgba(110,231,255,.18)}}
.chip:nth-child(1)::before{animation-delay:0s}
.chip:nth-child(2)::before{animation-delay:.7s}
.chip:nth-child(3)::before{animation-delay:1.4s}
.chip:nth-child(4)::before{animation-delay:2.1s}
.chip:hover{transform:translateY(-2px);color:var(--ink);border-color:rgba(255,255,255,.45);
  background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.07));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 12px 26px -8px rgba(110,231,255,.5)}
.chip:active{transform:translateY(0) scale(.96)}
.chip[aria-expanded="true"]{color:#06121f;border-color:transparent;animation:none;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 10px 24px -6px var(--accent),inset 0 1px 0 rgba(255,255,255,.5)}
.chip[aria-expanded="true"]::before{display:none}
@media(max-width:600px){.chips{justify-content:center}}

/* tag detail panel */
.tag-detail{margin-top:16px;padding:0 26px;max-height:0;opacity:0;transition:max-height .4s ease,opacity .3s ease,padding .4s ease;border:1px solid transparent}
.tag-detail.open{padding:26px;max-height:2000px;opacity:1;border-color:var(--line)}
.tag-detail h3{font-size:1.22rem;margin-bottom:12px;padding-right:44px}
.tag-detail p{color:var(--ink-soft);margin:0;font-size:1rem;line-height:1.7}
.tag-detail .det-body p{margin:0 0 14px}
.tag-detail .det-body p:last-child{margin-bottom:0}
.tag-detail .det-body strong{color:var(--ink);font-weight:600}
.tag-detail p a{font-weight:600}
.tag-detail .td{display:none}
.tag-detail .td.active{display:block}
.tag-detail .sub{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.tag-detail .sub span{font-size:.76rem;color:var(--ink-dim);border:1px solid var(--line);border-radius:7px;padding:4px 9px}
.td-link{display:inline-block;margin-top:16px;font-size:.9rem;font-weight:600;color:var(--accent)}
/* detail-panel close button (top-right) — visible on desktop inline panel and mobile popover */
.td-close{position:absolute;top:14px;right:14px;z-index:2;width:34px;height:34px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;line-height:1;color:var(--ink-soft);
  border:1px solid var(--line);background:rgba(255,255,255,.06);padding:0;transition:.2s}
.td-close:hover{color:var(--ink);background:rgba(255,255,255,.12);border-color:rgba(190,235,255,.6)}
[data-theme="light"] .td-close{background:rgba(15,30,60,.05);border-color:rgba(15,30,60,.2);color:var(--ink-soft)}
[data-theme="light"] .td-close:hover{background:rgba(15,30,60,.1);color:var(--ink);border-color:var(--accent)}
.tag-backdrop{display:none}
@media(max-width:640px){
  /* tag detail becomes a centred popover: fixed header (close) + scrollable body */
  .tag-detail{position:fixed;left:50%;top:50%;transform:translate(-50%,-47%) scale(.97);
    display:flex;flex-direction:column;width:min(92vw,440px);max-width:none;max-height:80vh;overflow:hidden;
    z-index:60;margin:0;padding:0;border:1px solid rgba(190,235,255,.5);
    background:linear-gradient(135deg,rgba(16,20,40,.9),rgba(9,12,26,.88));
    opacity:0;visibility:hidden;transition:opacity .25s ease,transform .25s ease,visibility .25s ease}
  .tag-detail.open{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);max-height:80vh;padding:0;border-color:rgba(190,235,255,.5)}
  .td-close{position:static;display:flex;align-items:center;justify-content:center;flex:0 0 auto;align-self:flex-end;
    margin:10px 10px 0;width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:1.6rem;line-height:1;
    color:var(--ink-soft);border:1px solid var(--line);background:rgba(255,255,255,.06);padding:0}
  .td-close:hover{color:var(--ink);background:rgba(255,255,255,.12)}
  .td-scroll{flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;padding:4px 24px 24px}
  /* no idle/active glass effects on the chips on mobile (no pulse, no light sweep) */
  .chip{animation:none}
  .chip::before{display:none}
  /* active chip behind the popover stays neutral on mobile (no glow/fill bleed-through) */
  .chip[aria-expanded="true"]{animation:none;color:var(--ink-soft);border-color:rgba(255,255,255,.22);
    background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.03));box-shadow:none}
  .tag-backdrop{display:block;position:fixed;inset:0;z-index:55;background:rgba(2,4,10,.66);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;visibility:hidden;
    transition:opacity .25s ease,visibility .25s ease}
  body.detail-open{overflow:hidden}
  body.detail-open .tag-backdrop{opacity:1;visibility:visible}
}

/* services */
.grid{display:grid;gap:18px;margin-top:28px;grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.grid{grid-template-columns:1fr}}
.tile{padding:24px}
.tile-head{display:flex;align-items:center;gap:13px;margin-bottom:12px}
.tile-head h3{font-size:1.18rem;margin:0;line-height:1.2}
.tile p{color:var(--ink-soft);font-size:.98rem;margin:0}
.tile .ic{flex:0 0 auto;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(110,231,255,.18),rgba(167,139,250,.18));border:1px solid var(--line);font-size:1.3rem}
.usp{margin-top:14px;font-style:italic;color:var(--accent)}
.tile-link{display:inline-block;margin-top:14px;font-weight:600;font-size:.92rem;color:var(--accent)}
.tile-link:hover{text-decoration:underline}

/* contact */
.contact-card{padding:34px;text-align:center}
.contact-card h2{font-size:clamp(1.5rem,3.2vw,2rem)}

/* legal */
.legal{color:var(--ink-soft);font-size:.92rem}
.legal h3{color:var(--ink);margin-top:20px;font-size:1.02rem}
.legal h4{color:var(--ink);margin-top:16px;font-size:.95rem}
.legal .note{font-size:.82rem;color:var(--ink-dim);border-left:2px solid var(--accent-2);padding:6px 0 6px 12px;margin:10px 0;background:rgba(167,139,250,.06)}
/* legal accordions — same look as the FAQ accordions on the AI Audit subpage */
details.legal-wrap{margin-top:12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(5px) saturate(1.2);backdrop-filter:blur(5px) saturate(1.2);overflow:hidden;transition:border-color .2s,background .2s}
details.legal-wrap:hover{border-color:rgba(190,235,255,.5);background:rgba(255,255,255,.06)}
details.legal-wrap[open]{border-color:rgba(190,235,255,.5)}
details.legal-wrap>summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:16px 20px;font-weight:600;color:var(--ink)}
details.legal-wrap>summary::-webkit-details-marker{display:none}
details.legal-wrap>summary::after{content:"+";flex:0 0 auto;font-size:1.4rem;font-weight:700;line-height:1;color:var(--accent);transition:transform .25s ease}
details.legal-wrap[open]>summary::after{transform:rotate(45deg)}
details.legal-wrap[open]>summary{color:var(--accent)}
.legal-body{padding:0 20px 18px;border:none;border-radius:0;background:transparent}

footer{padding:28px 0 48px;border-top:1px solid var(--line);margin-top:24px;color:var(--ink-dim);font-size:.9rem}
.foot-in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;align-items:center}
.foot-links{display:flex;gap:16px;flex-wrap:wrap}
.foot-links a{color:var(--ink-soft)}
/* fixed "back to top" button — bottom-right, all viewports */
.to-top{position:fixed;right:18px;bottom:18px;z-index:45;width:46px;height:46px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;line-height:1;color:var(--ink);
  border:1px solid rgba(190,235,255,.5);background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  -webkit-backdrop-filter:blur(8px) saturate(1.4);backdrop-filter:blur(8px) saturate(1.4);
  box-shadow:0 8px 24px -8px rgba(0,0,0,.6),0 0 14px -4px rgba(110,231,255,.4),inset 0 0 0 1px rgba(255,255,255,.4);
  transition:opacity .2s ease,transform .2s ease,background .2s,border-color .2s}
.to-top:hover{background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.07));border-color:rgba(190,235,255,.85);transform:translateY(-2px)}
/* hide it while a modal/popover is open (tip popover on all sizes; mobile chip popover) */
body.tip-open .to-top{opacity:0;visibility:hidden;pointer-events:none}
@media(max-width:640px){ body.detail-open .to-top{opacity:0;visibility:hidden;pointer-events:none} }

@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;transition:none!important}}
/* Apple HIG accessibility: frostier/solid glass when transparency is reduced; stronger borders on high contrast */
@media(prefers-reduced-transparency:reduce){
  .glass{background:rgba(11,16,36,.94)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .bg-motif{display:none}
  .glass-refract{display:none!important}
}
@media(prefers-contrast:more){
  .glass{border-color:rgba(255,255,255,.6)}
  .chip{border-color:rgba(255,255,255,.6)}
}

/* =====================================================================
   APPLE VISION PRO — SPATIAL MODE
   Activated by .visionos-device on <html> (set in app.js when a
   visionOS / Vision Pro visitor is detected, or via ?platform=visionpro).
   Same technique the AI Token Usage Tracker site uses: CSS perspective +
   parallax tilt + depth-layered Liquid Glass, which reads as spatial 3D
   inside Vision Pro's Safari. All motion respects prefers-reduced-motion.
   ===================================================================== */

/* Depth-layered glass: every card floats deeper in space */
html.visionos-device .glass{
  -webkit-backdrop-filter:blur(30px) saturate(1.7);
  backdrop-filter:blur(30px) saturate(1.7);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.65), 0 2px 0 rgba(255,255,255,.06) inset,
             0 0 0 1px rgba(190,235,255,.12);
}

/* Spatial scene: the business-card row becomes a tiltable 3D plane.
   Perspective is on the outer .hero; the inner .hero-row carries the
   rotation (it has no backdrop-filter itself, so refraction stays intact). */
html.visionos-device .hero{ perspective:1600px; perspective-origin:50% 28%; }
html.visionos-device .hero-row{
  transform-style:preserve-3d;
  transform:rotateX(calc(var(--py,0) * -2.4deg)) rotateY(calc(var(--px,0) * 2.8deg));
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
/* Portrait pops forward as a parallax layer (safe: no backdrop-filter on it) */
html.visionos-device #heroCard .portrait{
  transform:translate3d(calc(var(--px,0) * 12px), calc(var(--py,0) * 12px), 0);
  transition:transform .22s cubic-bezier(.22,.61,.36,1);
}

/* Gaze-responsive accent glow — Vision Pro highlights whatever you look at */
html.visionos-device .tile,
html.visionos-device .chip,
html.visionos-device .btn,
html.visionos-device .creds-cert,
html.visionos-device .contact-card{ transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
html.visionos-device .tile:hover,
html.visionos-device .contact-card:hover{
  transform:scale(1.025) translateY(-2px);
  border-color:var(--accent);
  box-shadow:0 30px 70px -28px rgba(0,0,0,.6), 0 0 70px -6px rgba(110,231,255,.45),
             0 0 0 1px rgba(110,231,255,.5);
}
html.visionos-device .chip:hover,
html.visionos-device .btn:hover{
  box-shadow:0 0 36px -6px rgba(110,231,255,.55), 0 0 0 1px rgba(110,231,255,.5);
}

/* Subtle animated mesh-gradient background drift for a living spatial scene */
@keyframes visionMeshDrift{
  0%{background-position:0% 0%, 100% 0%, 50% 100%}
  50%{background-position:18% 12%, 82% 22%, 42% 88%}
  100%{background-position:0% 0%, 100% 0%, 50% 100%}
}
@media(prefers-reduced-motion:no-preference){
  html.visionos-device body{
    background-image:
      radial-gradient(60rem 40rem at 12% 8%, rgba(110,231,255,.10), transparent 60%),
      radial-gradient(50rem 35rem at 92% 14%, rgba(167,139,250,.09), transparent 60%),
      radial-gradient(55rem 38rem at 50% 96%, rgba(52,211,153,.07), transparent 60%),
      linear-gradient(180deg,var(--bg-0),var(--bg-1) 42%,var(--bg-2));
    background-size:140% 140%, 140% 140%, 140% 140%, 100% 100%;
    background-attachment:fixed;
    animation:visionMeshDrift 30s ease-in-out infinite alternate;
  }
}

/* "Apple Vision Pro detected" spatial-mode hint banner */
.vision-banner{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(20px);
  z-index:60; display:flex; align-items:center; gap:12px;
  max-width:min(92vw,560px); padding:12px 16px; border-radius:16px;
  font-size:.9rem; color:var(--ink);
  background:rgba(11,16,36,.72);
  border:1px solid rgba(190,235,255,.45);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(22px) saturate(1.6); backdrop-filter:blur(22px) saturate(1.6);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .4s ease, transform .4s cubic-bezier(.22,.61,.36,1), visibility .4s;
}
.vision-banner.visible{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.vision-banner .vb-ico{ font-size:1.2rem; line-height:1; }
.vision-banner .vb-txt strong{ color:var(--accent); }
.vision-banner .vb-close{
  margin-left:auto; flex:0 0 auto; width:28px; height:28px; border-radius:50%;
  border:1px solid var(--line); background:rgba(110,231,255,.08); color:var(--accent);
  font-size:1rem; line-height:1; cursor:pointer;
}
@media(max-width:600px){ .vision-banner{ font-size:.82rem; bottom:14px; padding:10px 13px; } }

/* =====================================================================
   AI GOVERNANCE WATCH — feature row (below hero), deliberately eye-catching
   ===================================================================== */
.gw{ margin:-8px 0 0; padding-top:0; }
.gw-card{ position:relative; border-radius:var(--radius); padding:30px 32px; overflow:hidden;
  border:1px solid rgba(110,231,255,.5);
  background:linear-gradient(135deg, rgba(110,231,255,.12), rgba(167,139,250,.09) 55%, rgba(52,211,153,.07));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 26px 64px -30px rgba(0,0,0,.65), 0 0 80px -24px rgba(110,231,255,.45);
  -webkit-backdrop-filter:blur(16px) saturate(1.5); backdrop-filter:blur(16px) saturate(1.5); }
/* animated accent edge */
.gw-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:linear-gradient(120deg,var(--accent),var(--accent-2),var(--accent-3),var(--accent));
  background-size:300% 300%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.6;
  animation:gwEdge 9s linear infinite; pointer-events:none; }
@keyframes gwEdge{ 0%{background-position:0% 50%} 100%{background-position:300% 50%} }
.gw-badge{ display:inline-flex; align-items:center; gap:8px; font-size:.72rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:#06121f;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); padding:6px 13px; border-radius:999px; }
.gw-badge .live{ width:8px; height:8px; border-radius:50%; background:#06121f; animation:gwPulse 1.8s ease-out infinite; }
@keyframes gwPulse{ 0%{box-shadow:0 0 0 0 rgba(6,18,31,.55)} 100%{box-shadow:0 0 0 9px rgba(6,18,31,0)} }
.gw-card h2{ font-size:clamp(1.35rem,3vw,1.95rem); margin:14px 0 8px; }
.gw-lead{ color:var(--ink); max-width:none; margin:0 0 16px; font-size:1.02rem; line-height:1.6; }
.gw-pills{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; }
.gw-pills span{ font-size:.78rem; color:var(--accent); border:1px solid var(--line); border-radius:999px;
  padding:4px 11px; background:rgba(110,231,255,.06); }
.gw-btn{ font-size:.98rem; }
@media(max-width:600px){ .gw-card{ padding:22px 18px; } }

/* =====================================================================
   LIGHT MODE — activated by <html data-theme="light"> (toggle + system pref)
   ===================================================================== */
:root[data-theme="light"]{
  --bg-0:#aebcda; --bg-1:#b6c4e2; --bg-2:#a4b4d6;
  --ink:#0d1426; --ink-soft:#33435c; --ink-dim:#46546d;
  --line:rgba(15,30,60,.18);
  --glass:rgba(255,255,255,.5);
  --accent:#0e7490; --accent-2:#7c3aed; --accent-3:#0e9f6e;
  --shadow:0 22px 56px -26px rgba(20,40,80,.32);
}
/* deeper, cleaner saturated daylight backdrop (no muddy multiply) so the clear glass pops */
[data-theme="light"] .bg{ background:
  radial-gradient(1000px 640px at 10% -10%, #5b9bff 0, transparent 56%),
  radial-gradient(1000px 720px at 94% 6%, #6fb6f5 0, transparent 56%),
  radial-gradient(1100px 820px at 50% 122%, #34cdba 0, transparent 56%),
  linear-gradient(180deg,#aab9d8,#b6c4e2 42%,#9fb0d2); }
/* coloured blobs add clean depth (normal blend → no grey mud) — both blue-toned, no purple on the right */
[data-theme="light"] .bg::before,[data-theme="light"] .bg::after{ mix-blend-mode:normal; opacity:.22; }
[data-theme="light"] .bg::before{ background:radial-gradient(circle at 30% 30%,#3b82f6,transparent 60%); }
[data-theme="light"] .bg::after{ background:radial-gradient(circle at 60% 40%,#4f9bf0,transparent 60%); }
[data-theme="light"] .bg-grain{ opacity:.02; }
[data-theme="light"] header.nav{ background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.5)); }
[data-theme="light"] .nav-links a:hover{ background:rgba(15,30,60,.06); }
[data-theme="light"] .langswitch{ background:rgba(15,30,60,.04); }
/* hero meta link (CQ-Factory GmbH) — clearer & legible on the light glass */
[data-theme="light"] .meta-row a{ color:#1862c6; font-weight:600; text-decoration:underline; text-underline-offset:2px; }
[data-theme="light"] .meta-row a:hover{ color:#0f4ea8; }
[data-theme="light"] .eyebrow{ color:#0b5a70; border-color:rgba(15,30,60,.22);
  background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.07));
  -webkit-backdrop-filter:blur(10px) saturate(1.7);backdrop-filter:blur(10px) saturate(1.7);
  box-shadow:0 6px 16px -8px rgba(20,40,80,.28),inset 0 1px 0 rgba(255,255,255,.85); }
[data-theme="light"] .langswitch button[aria-pressed="true"]{ color:#fff; }
[data-theme="light"] .glass{
  /* near-clear glass like iOS 26: minimal fill, neutral cool edge, strong backdrop blur so
     the coloured backdrop reads straight through (not a white panel) */
  border:1px solid rgba(255,255,255,.4);
  background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02) 60%,rgba(255,255,255,0));
  -webkit-backdrop-filter:blur(14px) saturate(2) brightness(1.06); backdrop-filter:blur(14px) saturate(2) brightness(1.06);
  box-shadow:0 26px 64px -26px rgba(15,25,50,.45),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 26px rgba(255,255,255,.14),
    inset 0 0 0 1px rgba(255,255,255,.12); }
[data-theme="light"] .glass::after{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.45); }
[data-theme="light"] .glass-refract{ opacity:.58 !important; }
/* shift the motif's violet shapes toward blue in light mode (no purple), dark mode keeps violet */
[data-theme="light"] .bg-motif{ opacity:.5; filter:hue-rotate(-24deg) saturate(.9); }
[data-theme="light"] .btn{ color:var(--ink); border-color:rgba(15,30,60,.2);
  background:linear-gradient(135deg,rgba(255,255,255,.30),rgba(255,255,255,.12));
  box-shadow:0 6px 16px -8px rgba(20,40,80,.22), inset 0 1px 0 rgba(255,255,255,.8); }
[data-theme="light"] .btn:hover{ border-color:var(--accent);
  background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,.22)); }
[data-theme="light"] .btn.primary{ color:#fff; border-color:transparent;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); }
[data-theme="light"] .btn.primary:hover{ background:linear-gradient(135deg,#0b6076,#6d28d9); }
[data-theme="light"] .chip{ color:var(--ink-soft); border-color:rgba(15,30,60,.18);
  background:linear-gradient(135deg,rgba(255,255,255,.32),rgba(255,255,255,.12));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 6px 16px -10px rgba(20,40,80,.3); }
[data-theme="light"] .chip:hover{ color:var(--ink); border-color:var(--accent); }
[data-theme="light"] .chip[aria-expanded="true"]{ color:#fff; }
[data-theme="light"] .creds-cert{ background:rgba(15,30,60,.04); }
[data-theme="light"] .creds-cert:hover{ background:rgba(15,30,60,.07); }
[data-theme="light"] .portrait{ border-color:rgba(15,30,60,.15); }
[data-theme="light"] .tile .ic{ background:linear-gradient(135deg,rgba(14,116,144,.14),rgba(124,58,237,.14)); }
[data-theme="light"] details.legal-wrap:hover{ background:rgba(15,30,60,.05); }
/* open-accordion heading: avoid the teal-on-white "green" look — use a clean blue in light mode */
[data-theme="light"] details.legal-wrap[open]>summary,
[data-theme="light"] details.legal-wrap[open]>summary::after,
[data-theme="light"] .faq details[open] summary,
[data-theme="light"] .faq details[open] summary::after{ color:#1862c6; }
[data-theme="light"] .to-top{ color:var(--ink); border-color:rgba(15,30,60,.2);
  background:linear-gradient(135deg,rgba(255,255,255,.32),rgba(255,255,255,.14));
  box-shadow:0 8px 24px -8px rgba(20,40,80,.25), inset 0 1px 0 rgba(255,255,255,.8); }
[data-theme="light"] .gw-card{ border-color:rgba(14,116,144,.4);
  background:linear-gradient(135deg,rgba(14,116,144,.09),rgba(124,58,237,.07) 55%,rgba(14,159,110,.05)); }
[data-theme="light"] .gw-badge{ color:#fff; }
/* AI Governance Watch pills — readable on the coloured card in light mode */
[data-theme="light"] .gw-pills span{ color:#13324f; border-color:rgba(15,30,60,.14);
  background:rgba(255,255,255,.62); }
[data-theme="light"] .vision-banner{ background:rgba(255,255,255,.85); border-color:rgba(15,30,60,.18); color:var(--ink); }

/* theme toggle button (nav) */
.themebtn{ all:unset; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(190,235,255,.5);
  background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  -webkit-backdrop-filter:blur(8px) saturate(1.4); backdrop-filter:blur(8px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 12px -6px rgba(0,0,0,.5);
  font-size:1rem; line-height:1; transition:border-color .2s, background .2s, box-shadow .2s; }
.themebtn:hover{ border-color:rgba(190,235,255,.85); box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 14px -4px rgba(110,231,255,.5); }
/* light: darker translucent glass so the pale moon icon stays legible */
[data-theme="light"] .themebtn{ border-color:rgba(15,30,60,.4);
  background:linear-gradient(135deg,rgba(15,30,60,.5),rgba(15,30,60,.36));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 4px 12px -6px rgba(20,40,80,.4); }
[data-theme="light"] .themebtn:hover{ border-color:var(--accent);
  background:linear-gradient(135deg,rgba(15,30,60,.62),rgba(15,30,60,.48));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 14px -4px rgba(14,116,144,.5); }

/* AI-Audit subpage: "back to home" button — visible on the light nav (defined edge + fill) */
[data-theme="light"] .backbtn{ color:var(--ink); border-color:rgba(15,30,60,.24);
  background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.3));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 12px -6px rgba(20,40,80,.28); }
[data-theme="light"] .backbtn:hover{ border-color:var(--accent);
  background:linear-gradient(135deg,#fff,rgba(255,255,255,.5)); }

/* AI-Audit subpage: framework/method pills + info pills — defined edges in light mode */
[data-theme="light"] .pillset span,
[data-theme="light"] .pillset a{ color:var(--ink-soft); border-color:rgba(15,30,60,.28); background:rgba(255,255,255,.42); }
[data-theme="light"] .pillset a:hover{ color:var(--ink); border-color:var(--accent); background:rgba(255,255,255,.7); }
[data-theme="light"] .pillset .pill-info{ color:var(--ink-soft); border-color:rgba(15,30,60,.42); background:rgba(255,255,255,.42); }
[data-theme="light"] .pillset .pill-info:hover{ color:var(--ink); border-color:var(--accent); background:rgba(255,255,255,.7); }
/* AI-Audit subpage: explanation popover (#tip) in light mode */
[data-theme="light"] .tip{ border-color:rgba(15,30,60,.18);
  background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(245,248,252,.95));
  box-shadow:0 24px 60px -20px rgba(20,40,80,.45), inset 0 1px 0 rgba(255,255,255,.9); }
[data-theme="light"] .tip-backdrop{ background:rgba(20,40,80,.4); }
[data-theme="light"] .tip-close{ border-color:rgba(15,30,60,.2); background:rgba(15,30,60,.05); color:var(--ink-soft); }
[data-theme="light"] .tip-close:hover{ background:rgba(15,30,60,.1); color:var(--ink); }

/* light overrides for mobile popover + a11y media queries */
@media(max-width:640px){
  [data-theme="light"] .tag-detail{ background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(245,248,252,.93)); border-color:rgba(15,30,60,.18); }
  [data-theme="light"] .tag-detail.open{ border-color:rgba(15,30,60,.18); }
  [data-theme="light"] .tag-backdrop{ background:rgba(20,40,80,.4); }
  [data-theme="light"] .td-close{ background:rgba(15,30,60,.06); }
  [data-theme="light"] .chip[aria-expanded="true"]{ color:var(--ink-soft); background:linear-gradient(135deg,rgba(255,255,255,.7),rgba(255,255,255,.4)); }
}
@media(prefers-reduced-transparency:reduce){ [data-theme="light"] .glass{ background:#fff !important; } }
@media(prefers-contrast:more){
  [data-theme="light"] .glass{ border-color:rgba(15,30,60,.6); }
  [data-theme="light"] .chip{ border-color:rgba(15,30,60,.6); }
}