:root{
  --blue:#3B4DA6;
  --blue-deep:#2C387E;
  --ink:#1f2557;
  --muted:#6b7088;
  --line:#e7e9f2;
  --page:#eef0f6;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Manrope',system-ui,sans-serif;
  background:radial-gradient(120% 60% at 50% 0%, #f4f5fa 0%, var(--page) 60%);
  color:var(--ink);
  display:flex;justify-content:center;align-items:flex-start;
  min-height:100%;
  -webkit-font-smoothing:antialiased;
  padding:28px 16px 48px;
}
#root{width:100%;max-width:392px}

/* ---- flip container ---- */
.flip{perspective:2200px;position:relative}
.flip-inner{position:relative;transition:transform .75s cubic-bezier(.45,.05,.2,1);transform-style:preserve-3d}
.flip.flipped .flip-inner{transform:rotateY(180deg)}
.face{
  background:#fff;border-radius:26px;overflow:hidden;
  box-shadow:0 24px 60px -22px rgba(31,37,87,.4), 0 3px 14px rgba(31,37,87,.07);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.face-front{position:relative;opacity:1;transition:opacity 0s linear .375s}
.flip.flipped .face-front{opacity:0}
.face-back{position:absolute;inset:0;transform:rotateY(180deg);display:flex;flex-direction:column;opacity:0;transition:opacity 0s linear .375s}
.flip.flipped .face-back{opacity:1}

/* ---- hero ---- */
.hero{position:relative;height:170px;background:#fff}
.hero .wave{position:absolute;top:0;left:0;width:100%;height:118px;display:block}
.logo-chip{position:absolute;right:18px;top:74px}
.logo-chip img{display:block;width:160px;height:auto}

/* ---- identity ---- */
.ident{display:flex;gap:15px;padding:4px 24px 22px}
.accent{
  width:3px;border-radius:3px;margin-top:6px;flex:none;
  background:repeating-linear-gradient(to bottom, var(--blue) 0 5px, transparent 5px 11px);
}
.ident-txt h1{
  font-family:'Quicksand',sans-serif;font-weight:700;
  font-size:34px;letter-spacing:-.5px;color:var(--ink);line-height:1.05;
}
.ident-txt .role{font-size:18px;color:var(--muted);margin-top:7px;font-weight:500}
.ident-txt .consult{
  font-family:'Quicksand',sans-serif;font-weight:700;
  font-size:18.5px;color:var(--blue);margin-top:9px;letter-spacing:-.2px;
}
.ident-txt .org{font-style:italic;font-size:16.5px;color:#5a5f7a;margin-top:7px}

/* ---- contacts ---- */
.contacts{padding:4px 22px 6px;display:flex;flex-direction:column}
.row{
  display:flex;align-items:center;gap:15px;
  padding:11px 6px;text-decoration:none;color:inherit;
  border-radius:14px;transition:background .16s ease, transform .16s ease;
}
a.row:hover{background:#f5f6fb}
a.row:active{transform:scale(.99)}
.row-ico{
  width:46px;height:46px;flex:none;border-radius:50%;
  background:var(--blue);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 16px -8px rgba(59,77,166,.7);
}
.row-txt{display:flex;flex-direction:column;min-width:0}
.row-val{font-size:16px;font-weight:500;color:#2a2f4a;line-height:1.35;word-break:break-word}
.row-val.nowrap{white-space:nowrap;word-break:normal}
.row-sub{font-size:13px;color:#9398b2;margin-top:1px}

/* ---- actions ---- */
.actions{padding:18px 22px 8px;display:flex;flex-direction:column;gap:11px}
.btn{
  border:none;cursor:pointer;font-family:'Manrope',sans-serif;
  font-weight:700;font-size:15.5px;
  display:flex;align-items:center;justify-content:center;gap:9px;
  height:52px;border-radius:15px;transition:transform .14s ease, box-shadow .2s ease, background .2s ease;
}
.btn:active{transform:translateY(1px) scale(.995)}
.btn.primary{background:var(--blue);color:#fff;box-shadow:0 14px 26px -12px rgba(59,77,166,.85)}
.btn.primary:hover{background:#3445a0}
.btn-pair{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.btn.ghost{background:#f2f3fa;color:var(--blue);border:1.5px solid #e4e7f4}
.btn.ghost:hover{background:#eceefb}

.foot{
  text-align:center;font-size:12.5px;color:#a7abc2;letter-spacing:.3px;
  padding:18px 0 22px;font-weight:500;
}

/* ---- flipper button ---- */
.btn.flipper{
  background:transparent;color:var(--blue);height:46px;font-size:14.5px;gap:6px;
  border:none;margin-top:2px;
}
.btn.flipper:hover{background:#f5f6fb}

/* ---- back face ---- */
.back-body{padding:26px 26px 18px;flex:1;display:flex;flex-direction:column}
.back-btn{
  align-self:flex-start;display:inline-flex;align-items:center;gap:4px;
  background:#f2f3fa;border:1.5px solid #e4e7f4;border-radius:11px;
  color:var(--blue);font-family:'Manrope';font-weight:700;font-size:13.5px;
  padding:8px 14px 8px 10px;cursor:pointer;margin-bottom:16px;transition:background .16s;
}
.back-btn:hover{background:#eceefb}
.back-h{font-family:'Quicksand',sans-serif;font-weight:700;font-size:30px;color:#1b2552;letter-spacing:-.5px;margin-bottom:20px}
.svc-list{display:flex;flex-direction:column;gap:19px}
.svc{display:flex;gap:14px;align-items:flex-start}
.svc-ico{
  width:40px;height:40px;flex:none;border-radius:50%;background:#dde7fb;
  display:flex;align-items:center;justify-content:center;margin-top:2px;
}
.svc-pound{font-family:'Quicksand',sans-serif;font-weight:700;font-size:21px;color:#2c3a8c;line-height:1}
.svc-txt{display:flex;flex-direction:column;min-width:0}
.svc-title{font-family:'Quicksand',sans-serif;font-weight:700;font-size:18px;color:#1c2552;letter-spacing:-.2px;line-height:1.2;text-wrap:pretty}
.svc-desc{font-size:13px;color:#8d92ac;margin-top:3px;line-height:1.4;text-wrap:pretty}
.back-foot{
  background:#1d2657;color:#fff;text-decoration:none;
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:17px 16px;font-size:14.5px;font-weight:600;letter-spacing:.2px;
}
.back-foot span{word-break:break-word}

/* ---- back QR codes ---- */
.back-qr-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:18px 0 6px;min-height:150px}
.back-qr{display:flex;flex-direction:column;align-items:center;gap:16px}
.back-qr-h{font-family:'Quicksand',sans-serif;font-weight:700;font-size:18px;color:#1c2552;letter-spacing:-.2px;white-space:nowrap}
.back-qr-row{display:flex;gap:26px}
.qr-mini{display:flex;flex-direction:column;align-items:center;gap:10px}
.qr-mini-img{padding:8px;background:#fff;border:1.5px solid var(--line);border-radius:13px;box-shadow:0 6px 16px -10px rgba(31,37,87,.4)}
.qr-mini-img img,.qr-mini-img canvas{display:block;width:112px;height:112px}
.qr-mini span{font-size:12.5px;font-weight:700;color:#6b7088;letter-spacing:.3px}

/* ---- QR sheet ---- */
.qr-sheet{
  position:fixed;inset:0;z-index:50;
  background:rgba(20,24,54,.5);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;pointer-events:none;transition:opacity .22s ease;
}
.qr-sheet.show{opacity:1;pointer-events:auto}
.qr-card{
  background:#fff;border-radius:24px;padding:26px 24px 28px;
  width:100%;max-width:330px;position:relative;text-align:center;
  transform:translateY(14px) scale(.97);transition:transform .26s cubic-bezier(.2,.8,.25,1);
  box-shadow:0 30px 70px -20px rgba(20,24,54,.55);
}
.qr-sheet.show .qr-card{transform:none}
.qr-x{position:absolute;top:14px;right:14px;background:#f3f4fa;border:none;border-radius:10px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.qr-title{font-family:'Quicksand',sans-serif;font-weight:700;font-size:19px;color:var(--ink);margin-bottom:16px}
.qr-seg{display:inline-flex;background:#f1f2f9;border-radius:11px;padding:4px;margin-bottom:20px;gap:3px}
.qr-seg button{
  border:none;background:transparent;cursor:pointer;font-family:'Manrope';font-weight:600;
  font-size:14px;color:var(--muted);padding:8px 20px;border-radius:8px;transition:.18s;
}
.qr-seg button.on{background:#fff;color:var(--blue);box-shadow:0 2px 6px rgba(31,37,87,.1)}
.qr-frame{display:flex;justify-content:center;padding:14px;background:#fff;border:1.5px solid var(--line);border-radius:16px;width:max-content;margin:0 auto}
.qr-frame img,.qr-frame canvas{display:block}
.qr-hint{font-size:13.5px;color:var(--muted);margin-top:18px;line-height:1.5;text-wrap:pretty}

@media(prefers-reduced-motion:no-preference){
  .flip{animation:rise .5s cubic-bezier(.2,.8,.25,1) both}
  @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}