:root{
  --c-dark:#F4F3F4;
  --c-gray-dark:#AAAAAA;
  --c-gray:#426FB3;
  --c-gray-light:#223A64;
  --c-light:#04112C;
  --c-accent:#154A9A;
  --bg:var(--c-light);
  --surface:color-mix(in srgb, var(--c-light) 82%, var(--c-gray-light));
  --text:var(--c-dark);
  --muted:color-mix(in srgb, var(--c-dark) 70%, transparent);
  --border:color-mix(in srgb, var(--c-gray-dark) 22%, transparent);
  --icon:var(--c-gray-dark);
  --focus:var(--c-gray);
  --shadow:0 18px 60px rgba(0,0,0,0.35);
  --cut-lg:26px;
    --cut-md:18px;
    --cut-sm:14px;
    --stroke:1px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Inter",ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(900px 700px at 15% 10%, color-mix(in srgb, var(--c-accent) 35%, transparent), transparent 60%),
    radial-gradient(900px 700px at 85% 25%, color-mix(in srgb, var(--c-gray) 30%, transparent), transparent 62%),
    linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--bg) 70%, var(--c-light)));
  color:var(--text);
}

@supports (clip-path: polygon(0 0)){
  .chamfer-lg{clip-path:polygon(var(--cut-lg) 0,100% 0,100% calc(100% - var(--cut-lg)),calc(100% - var(--cut-lg)) 100%,0 100%,0 var(--cut-lg))!important;border-radius:0!important}
  .chamfer-md{clip-path:polygon(var(--cut-md) 0,100% 0,100% calc(100% - var(--cut-md)),calc(100% - var(--cut-md)) 100%,0 100%,0 var(--cut-md))!important;border-radius:0!important}
  .chamfer-sm{clip-path:polygon(var(--cut-sm) 0,100% 0,100% calc(100% - var(--cut-sm)),calc(100% - var(--cut-sm)) 100%,0 100%,0 var(--cut-sm))!important;border-radius:0!important}
}

.wrap{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(18px,4vw,44px);
}

.card-shell{
  width:min(720px,100%);
  background:var(--border);
  padding:var(--stroke);
  box-shadow:var(--shadow);
}

.card-inner{
  background:var(--surface);
  padding:clamp(22px,4vw,44px);
  position:relative;
  overflow:hidden;
}

.card-inner::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:radial-gradient(400px 180px at 20% 0%, color-mix(in srgb, var(--c-accent) 38%, transparent), transparent 70%);
  pointer-events:none;
}

.logo{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
  position:relative;
  z-index:1;
}

.logo img{
  height:44px;
  width:auto;
  max-width:220px;
  display:block;
}

.logo-fallback{
  display:flex;
  align-items:center;
  gap:10px;
}

.logo-fallback .mark{
  height:44px;
  width:44px;
  background:linear-gradient(135deg, var(--c-gray) 0%, var(--c-accent) 100%);
}

.logo-fallback .brand{
  font-weight:700;
  letter-spacing:0.5px;
  text-transform:lowercase;
}

h1{
  margin:6px 0 10px;
  font-family:"Oswald",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:700;
  letter-spacing:0.02em;
  font-size:clamp(26px,3.6vw,40px);
  line-height:1.12;
  position:relative;
  z-index:1;
}

.sub{
  margin:0 0 26px;
  font-size:clamp(15px,1.6vw,18px);
  line-height:1.6;
  color:var(--muted);
  position:relative;
  z-index:1;
  max-width:58ch;
}

.contacts{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  position:relative;
  z-index:1;
}

@media (min-width:560px){
  .contacts{grid-template-columns:1fr 1fr}
}

.contact-shell{
  background:var(--border);
  padding:var(--stroke);
  text-decoration:none;
  color:inherit;
}

.contact-inner{
  display:flex;
  gap:12px;
  align-items:center;
  padding:14px 16px;
  background:color-mix(in srgb, var(--surface) 84%, var(--c-gray-light));
  color:var(--text);
  transition:transform 120ms ease, background 120ms ease;
}

.contact-shell:hover .contact-inner{
  transform:translateY(-1px);
  background:color-mix(in srgb, var(--surface) 76%, var(--c-accent));
}

.contact-shell:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--focus) 55%, transparent), var(--shadow);
}

.icon-shell{
  background:color-mix(in srgb, var(--c-accent) 30%, transparent);
  padding:var(--stroke);
  flex:0 0 auto;
}

.icon-inner{
  height:42px;
  width:42px;
  display:grid;
  place-items:center;
  background:color-mix(in srgb, var(--c-accent) 36%, transparent);
  color:var(--icon);
}

.icon-inner svg{width:20px;height:20px}

.text{display:flex;flex-direction:column;gap:2px;min-width:0}
.label{font-size:12px;letter-spacing:0.04em;text-transform:uppercase;color:var(--muted)}
.value{font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.footer{
  margin-top:22px;
  font-size:12px;
  color:var(--muted);
  position:relative;
  z-index:1;
}