:root{
  --brand:#003b8e; --brand-600:#0a4aa8; --ink:#0f1f3d; --muted:#667085;
  --bg:#f7f9fd; --card:#fff; --line:#e4eaf5; --tint:#e8effb; --radius:16px;
  --shadow:0 8px 28px rgba(0,59,142,.08);
}
*{box-sizing:border-box;margin:0}
body{font-family:Inter,system-ui,sans-serif;color:var(--ink);min-height:100vh;position:relative;overflow-x:hidden;
  background:var(--bg)}
/* Frosted-glass background (static): pale blue-white base, soft peach glows, and translucent angled glass panes
   at both edges, each with a bright edge and soft depth shadow. Pure CSS + one inline SVG. No JS, no animation. */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(620px 520px at 4% 6%,rgba(255,196,160,.55),rgba(255,196,160,0) 70%),
    radial-gradient(700px 560px at 98% 96%,rgba(255,190,150,.45),rgba(255,190,150,0) 70%),
    radial-gradient(760px 600px at 82% 30%,rgba(150,190,245,.50),rgba(150,190,245,0) 70%),
    radial-gradient(800px 640px at 22% 78%,rgba(170,200,245,.45),rgba(170,200,245,0) 70%),
    linear-gradient(135deg,#f1f5fc 0%,#dfe9f8 48%,#e9eef8 100%)}
.glass{position:absolute;inset:0;width:100%;height:100%;display:block}
.glass .pane{filter:drop-shadow(0 24px 34px rgba(40,80,150,.16))}
.bg::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:3;background:linear-gradient(90deg,var(--brand),#2c6fd6 60%,#f26a1b)}
@media(max-width:700px){.glass{opacity:.8}}

/* ---- Page ---- */
main{position:relative;z-index:1;max-width:560px;margin:0 auto;padding:48px 20px 40px}
@media(min-width:1024px){main{max-width:660px}}
.brand{text-align:center}
.brand + .eyebrow{margin-top:44px}
.mark{display:block;width:72px;height:72px;margin:0 auto;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,40,120,.18))}
.tagline{margin-top:12px;color:var(--muted);font-size:17px}

.eyebrow{margin:36px 0 12px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.grid{display:grid;gap:12px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:420px){.grid.two{gap:10px}}

/* ---- Reusable link button (cards) ----
   Frosted card tinted by a per-card --accent (set inline). The hover effect depends on the fx-* class:
   fx-tilt = 3D tilt toward cursor · fx-play = lift + pulse ring · fx-slide = slide + accent bar · fx-shine = light sweep */
.link-btn{--accent:var(--brand);--mx:50%;--my:50%;--rx:0deg;--ry:0deg;
  position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:14px;padding:13px 16px;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.74));
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid rgba(255,255,255,.95);border-radius:18px;color:var(--ink);text-decoration:none;
  font-weight:600;font-size:15px;letter-spacing:-.005em;
  box-shadow:0 1px 0 #fff inset,0 1px 2px rgba(15,31,61,.06),0 8px 22px -10px rgba(15,31,61,.18);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
/* cursor-following spotlight */
.link-btn::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .35s;
  background:radial-gradient(240px circle at var(--mx) var(--my),color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%)}
/* gradient hairline ring */
.link-btn::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;transition:opacity .35s;
  background:linear-gradient(135deg,var(--accent),transparent 40%,transparent 60%,color-mix(in srgb,var(--accent) 55%,#fff));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.link-btn:hover::before,.link-btn:hover::after{opacity:1}
.link-btn:hover{box-shadow:0 1px 0 #fff inset,0 4px 10px -4px rgba(15,31,61,.12),0 22px 40px -16px color-mix(in srgb,var(--accent) 55%,transparent)}
.link-btn:active{transform:scale(.98)}
.link-btn:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 45%,#fff);outline-offset:2px}

.link-btn .ico{position:relative;flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 16%,transparent);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.link-btn .ico svg{width:24px;height:24px}
.link-btn .label{flex:1;line-height:1.25}
.link-btn .label small{display:block;margin-top:2px;font-weight:500;font-size:12px;color:var(--muted)}
.link-btn .go{flex:none;width:30px;height:30px;padding:7px;border-radius:50%;color:#98a2b3;background:rgba(15,31,61,.05);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),background .3s,color .3s}
.link-btn.compact .go{display:none}
.link-btn.large .ico{width:46px;height:46px;border-radius:14px}
.link-btn.large .ico svg{width:28px;height:28px}
/* narrow phones: tighten compact cards so two fit per row with icon and label side by side */
@media(max-width:420px){
  main{padding-left:16px;padding-right:16px}
  .link-btn.compact{gap:8px;padding:11px 10px;font-size:13.5px}
  .link-btn.compact .label{min-width:0}
  .link-btn.compact .label small{font-size:11px}
  .link-btn.large .ico{width:34px;height:34px;border-radius:10px}
  .link-btn.large .ico svg{width:22px;height:22px}
}

/* fx-tilt: card leans toward the cursor, icon pops */
.link-btn.fx-tilt{transition:transform .15s ease-out,box-shadow .4s}
.link-btn.fx-tilt:hover{transform:perspective(700px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-3px)}
.link-btn.fx-tilt:hover .ico{transform:scale(1.12) rotate(-6deg)}

/* fx-play: lift, icon grows with a pulsing ring */
.link-btn.fx-play:hover{transform:translateY(-4px)}
.link-btn.fx-play .ico::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent)}
.link-btn.fx-play:hover .ico{transform:scale(1.1)}
.link-btn.fx-play:hover .ico::after{opacity:1;animation:ring 1.4s ease-out infinite}
@keyframes ring{to{box-shadow:0 0 0 12px transparent}}

/* fx-slide: nudges right, accent bar draws in on the left, arrow becomes a filled bubble */
.link-btn.fx-slide{background-image:linear-gradient(var(--accent),var(--accent)),linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.74));
  background-size:4px 0%,100% 100%;background-position:left center,0 0;background-repeat:no-repeat;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,background-size .4s cubic-bezier(.2,.8,.2,1)}
.link-btn.fx-slide:hover{transform:translateX(5px);background-size:4px 100%,100% 100%}
.link-btn.fx-slide:hover .ico{transform:rotate(-8deg) scale(1.06)}
.link-btn.fx-slide:hover .go{background:var(--accent);color:#fff;transform:translateX(2px) rotate(-45deg)}

/* fx-shine (primary CTA): gradient drifts toward the brand orange while a light band sweeps across */
.link-btn.primary{--accent:#2c6fd6;color:#fff;border-color:transparent;font-size:16px;padding:15px 18px;
  background:linear-gradient(110deg,var(--brand) 0%,#1857c0 45%,#2c6fd6 78%,#f26a1b 100%) 0 0/200% 100%;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 12px 28px -12px rgba(0,59,142,.6);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,background-position .6s ease}
.link-btn.primary::before{opacity:1;transform:translateX(-120%);transition:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.38) 50%,transparent 65%)}
.link-btn.primary::after{display:none}
.link-btn.primary:hover{transform:translateY(-3px);background-position:100% 0;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 20px 38px -14px rgba(242,106,27,.55),0 10px 24px -12px rgba(0,59,142,.6)}
.link-btn.primary:hover::before{transform:translateX(120%);transition:transform .9s ease}
.link-btn.primary .ico{color:#fff;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.link-btn.primary:hover .ico{transform:rotate(-10deg) scale(1.08)}
.link-btn.primary .go{color:#fff;background:rgba(255,255,255,.16)}
.link-btn.primary:hover .go{background:#fff;color:var(--brand);transform:translateX(4px)}

@media (hover:none){.link-btn:hover{transform:none}}
@media (prefers-reduced-motion:reduce){
  .link-btn,.link-btn *,.link-btn::before,.link-btn .ico::after{transition:none!important;animation:none!important}
  .link-btn:hover,.link-btn:hover .ico,.link-btn:hover .go{transform:none!important}
}

.socials{display:flex;justify-content:center;gap:20px;margin-top:40px}
.socials a{display:grid;place-items:center;width:38px;height:38px;transition:transform .15s}
.socials a:hover{transform:translateY(-3px) scale(1.06)}
.socials a:focus-visible{outline:3px solid #9db8ea;outline-offset:3px;border-radius:10px}
.socials svg{width:100%;height:100%}
footer{text-align:center;color:var(--muted);font-size:13px;margin-top:28px}

/* ---- Language switcher: small pill in the top-right of the content column, level with the logo ---- */
.lang{position:absolute;top:22px;right:20px;z-index:5;display:inline-flex;gap:2px;padding:3px;border-radius:999px;
  background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 6px 18px -8px rgba(15,31,61,.25)}
.lang button{-webkit-appearance:none;appearance:none;margin:0;border:0;background:transparent;cursor:pointer;box-sizing:border-box;min-width:34px;padding:6px 10px;border-radius:999px;text-align:center;
  font:700 12px/1 Inter,system-ui,sans-serif;letter-spacing:.06em;color:#4a5875;transition:background .2s,color .2s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.lang button:hover{color:#0a1a4f}
.lang button[aria-pressed="true"]{background:var(--brand);color:#fff}
.lang button:focus-visible{outline:2px solid #2c6fd6;outline-offset:2px}
@media(max-width:420px){main .lang{right:16px;top:16px}}