:root{
  --navy:#082d63;
  --navy2:#0a427f;
  --aqua:#10a7c8;
  --aqua2:#62d4e7;
  --ink:#10233c;
  --muted:#61758d;
  --line:#d9edf4;
  --card:#ffffff;
  --soft:#f5fbfd;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at top right, rgba(16,167,200,.11), transparent 28rem),
    linear-gradient(180deg,#fff 0%,#f7fcfe 100%);
}
.shell{min-height:100vh;display:flex;justify-content:center;padding:22px 12px 46px}
.card{width:min(100%,620px)}
.brand{
  position:relative;
  overflow:hidden;
  border-radius:30px;
  background:white;
  border:1px solid rgba(8,45,99,.08);
  box-shadow:0 22px 60px rgba(8,45,99,.12);
}
.brand::after{
  content:"";
  position:absolute;left:-10%;right:-10%;bottom:-34px;height:88px;
  background:linear-gradient(90deg,var(--navy),var(--aqua));
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  opacity:.98;
}
.logo-wrap{
  padding:26px 26px 18px;
  background:linear-gradient(180deg,#fff,#f9fdff);
}
.logo{display:block;width:100%;max-height:185px;object-fit:contain}
.identity{padding:6px 28px 48px;text-align:center;position:relative;z-index:1}
.name{margin:8px 0 0;font-size:clamp(2.1rem,8vw,3.5rem);line-height:.95;color:var(--navy);font-weight:850;letter-spacing:-.045em}
.role{margin:12px 0 4px;color:var(--aqua);font-weight:800;font-size:1.15rem}
.company{max-width:440px;margin:0 auto;color:var(--muted);font-size:.98rem;line-height:1.45}
.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.action{
  text-decoration:none;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:20px;
  min-height:92px;padding:16px;
  display:flex;align-items:center;gap:12px;
  box-shadow:0 8px 24px rgba(8,45,99,.06);
  transition:.16s ease;
}
.action:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(8,45,99,.10)}
.icon{
  width:46px;height:46px;flex:0 0 46px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(145deg,var(--navy),var(--aqua));color:white;
  font-size:1.25rem;font-weight:850
}
.action-copy{min-width:0}
.action-label{display:block;font-weight:800;font-size:.92rem;color:var(--navy)}
.action-value{display:block;margin-top:3px;color:var(--muted);font-size:.84rem;line-height:1.25;overflow-wrap:anywhere}
.wide{grid-column:1/-1}
.controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.control{
  border:none;border-radius:18px;padding:16px 18px;font:inherit;font-weight:850;
  cursor:pointer;text-decoration:none;text-align:center;
}
.primary{background:linear-gradient(100deg,var(--navy),var(--navy2));color:white}
.secondary{background:#eaf8fc;color:var(--navy);border:1px solid #ccecf4}
.qr{
  margin-top:18px;padding:22px;background:white;border-radius:24px;border:1px solid var(--line);
  text-align:center;box-shadow:0 8px 24px rgba(8,45,99,.06)
}
.qr img{width:min(58vw,230px);height:auto;display:block;margin:0 auto;border-radius:14px}
.qr h2{font-size:1.02rem;margin:14px 0 4px;color:var(--navy)}
.qr p{margin:0;color:var(--muted);font-size:.88rem}
.footer{text-align:center;color:var(--muted);font-size:.78rem;padding:18px 8px}
.footer a{color:var(--navy);text-decoration:none;font-weight:700}
@media(max-width:520px){
  .action-grid{grid-template-columns:1fr}
  .wide{grid-column:auto}
  .controls{grid-template-columns:1fr}
  .action{min-height:82px}
  .shell{padding-top:10px}
  .brand{border-radius:24px}
}