:root{
  --navy:#082d63;
  --navy2:#0b4f8f;
  --aqua:#12a9ca;
  --aqua2:#66d5e7;
  --ink:#10233c;
  --muted:#60768e;
  --line:#d7edf4;
  --soft:#f6fbfd;
  --white:#fff;
}
*{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 85% 0%, rgba(18,169,202,.11), transparent 28rem),
    linear-gradient(180deg,#ffffff 0%,#f7fcfe 100%);
}
.shell{min-height:100vh;display:flex;justify-content:center;padding:22px 12px 44px}
.card{width:min(100%,650px)}
.hero{
  background:#fff;border:1px solid rgba(8,45,99,.08);border-radius:30px;
  overflow:hidden;box-shadow:0 22px 60px rgba(8,45,99,.12);position:relative;
}
.hero::after{
  content:"";position:absolute;left:-8%;right:-8%;bottom:-32px;height:80px;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  background:linear-gradient(90deg,var(--navy),var(--aqua));
}
.logo-wrap{padding:24px 24px 14px;background:linear-gradient(180deg,#fff,#fbfeff)}
.logo{display:block;width:100%;max-height:210px;object-fit:contain}
.identity{position:relative;z-index:1;text-align:center;padding:8px 26px 46px}
.company-name{
  margin:6px auto 0;max-width:560px;font-size:clamp(1.65rem,6.4vw,2.8rem);
  line-height:1.02;letter-spacing:-.03em;color:var(--navy);font-weight:850
}
.company-label{
  display:inline-block;margin-top:12px;padding:7px 12px;border-radius:999px;
  background:#eaf8fc;color:var(--navy);font-weight:800;font-size:.9rem
}
.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.action{
  text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:20px;min-height:90px;padding:15px;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:#fff;font-size:1.15rem;font-weight:850
}
.copy{min-width:0}
.label{display:block;font-weight:850;font-size:.92rem;color:var(--navy)}
.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:#fff}
.secondary{background:#eaf8fc;color:var(--navy);border:1px solid #ccecf4}
.qr{
  margin-top:18px;padding:22px;background:#fff;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:12px}
.qr h2{font-size:1.05rem;margin:14px 0 4px;color:var(--navy)}
.qr p{margin:0;color:var(--muted);font-size:.9rem}
.footer{text-align:center;color:var(--muted);font-size:.78rem;padding:18px 8px}
.footer a{color:var(--navy);text-decoration:none;font-weight:750}
@media(max-width:520px){
  .action-grid{grid-template-columns:1fr}.wide{grid-column:auto}.controls{grid-template-columns:1fr}
  .shell{padding-top:10px}.hero{border-radius:24px}.action{min-height:82px}
}