/* Nect Me: the ID card and avatar. Shared by the app and the website. Generated from app.css; edit the card there and re-run build. */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-stretch:75% 100%;font-display:swap;src:url(fonts/instrument-sans-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Caveat";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/caveat-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
.nm{--c1:#2b69f0;--c2:#6a4df3;--c3:#9033f3}
/* ---------- avatar ---------- */
.av{flex:none;display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;overflow:hidden;background:linear-gradient(145deg,var(--c1),var(--c2));color:#fff}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.av__i{font:700 1rem var(--f-d)}
.av--s{width:40px;height:40px}

/* ---------- THE ID CARD ---------- */
.idc{--tx:0deg;--ty:0deg;--mx:30%;--my:18%;position:relative;width:min(100%,330px);aspect-ratio:.7;margin:0 auto;perspective:1200px;touch-action:pan-y}
.idc__flip{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--ty)) rotateY(var(--tx));transition:transform .8s var(--ease)}
.idc.is-tilting .idc__flip{transition:transform .08s linear}
.idc.is-flipped .idc__flip{transform:rotateX(var(--ty)) rotateY(calc(180deg + var(--tx)))}
.idc__face{position:absolute;inset:0;border-radius:30px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;color:#fff;padding:20px;display:flex;flex-direction:column;
  background:linear-gradient(155deg,var(--c1) 0%,var(--c2) 68%,var(--c3) 130%);
  box-shadow:0 36px 60px -30px color-mix(in srgb,var(--c1) 80%,#000),0 12px 24px -14px rgba(20,26,60,.35),inset 0 1px 0 rgba(255,255,255,.35)}
.idc__back{transform:rotateY(180deg);align-items:center;justify-content:center;text-align:center;gap:14px}
/* Only the face you can see takes taps. Some phones still hit the hidden face, which made one tap flip the card twice. */
.idc__face{transition:visibility 0s}
.idc:not(.is-flipped) .idc__back{visibility:hidden;pointer-events:none;transition:visibility 0s .42s}
.idc.is-flipped .idc__front{visibility:hidden;pointer-events:none;transition:visibility 0s .42s}
.idc.is-flipped .idc__back,.idc:not(.is-flipped) .idc__front{visibility:visible;transition:visibility 0s}
.idc__rings{position:absolute;right:-46%;top:-30%;width:120%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28),0 0 0 34px rgba(255,255,255,0),0 0 0 35.5px rgba(255,255,255,.2),0 0 0 74px rgba(255,255,255,0),0 0 0 75.5px rgba(255,255,255,.13)}
.idc__rings{animation:spin 26s linear infinite}
.idc__rings::after{content:"";position:absolute;left:50%;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;box-shadow:0 0 14px 2px rgba(255,255,255,.8)}
@keyframes spin{to{transform:rotate(360deg)}}
.idc__sheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.75),transparent 46%),linear-gradient(112deg,transparent 28%,rgba(255,255,255,.28) 46%,transparent 62%)}
.idc__top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px}
.idc__brand{display:inline-flex;align-items:center;gap:6px;font:700 .86rem var(--f-d);letter-spacing:.01em;opacity:.95}
.idc__label{font:650 .72rem var(--f-b);padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.22);backdrop-filter:blur(6px)}
.idc__photo{position:relative;width:clamp(104px,44%,150px);aspect-ratio:1;margin:auto 0 16px;border-radius:50%;overflow:hidden;border:3px solid rgba(255,255,255,.7);background:rgba(255,255,255,.18);display:grid;place-items:center;box-shadow:0 14px 30px -12px rgba(0,0,0,.4)}
.idc__photo img{width:100%;height:100%;object-fit:cover;display:block}
.idc__ini{font:700 2.6rem var(--f-d)}
.idc__txt{position:relative;margin-bottom:34px}
.idc__name{font:700 clamp(1.5rem,7vw,1.85rem)/1.04 var(--f-d);letter-spacing:-.02em;text-wrap:balance}
.idc__role{margin-top:6px;font-size:.95rem;line-height:1.3;opacity:.94}
.idc__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.idc__tags i{font-style:normal;font-size:.72rem;font-weight:600;padding:3px 10px;border-radius:99px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.28)}
.idc__hint{position:absolute;right:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:99px;border:0;background:rgba(255,255,255,.24);backdrop-filter:blur(8px);color:#fff;font:650 .78rem var(--f-b)}
.idc__scan{position:relative;font:700 1.25rem var(--f-d);letter-spacing:-.01em}
.idc .qr-box{position:relative;background:#fff;padding:14px;border-radius:22px;box-shadow:0 14px 30px -12px rgba(0,0,0,.35)}
.idc .qr{width:min(190px,52vw);aspect-ratio:1}
.idc .qr svg{display:block;width:100%;height:100%}
.idc__url{position:relative;font-size:.78rem;opacity:.9;word-break:break-all;padding:0 10px}
.qr svg{display:block;width:100%;height:100%}